Skip to content

Commit

Permalink
Fixed hits filtering feature and added rank labels (#102)
Browse files Browse the repository at this point in the history 
* Added comment

* Fixed algorithm for extracting lineage and creating links

* Added back tax limit 10

* Fixed file path for taxonomy report

* Fixed hits filtering algorithm

* Added rank labels below sankey
  • Loading branch information
@snjlee58
snjlee58 authored Jan 10, 2025
1 parent e84423e commit 9c20af7
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 37 deletions.
4 changes: 3 additions & 1 deletion frontend/ResultView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -406,9 +406,11 @@ export default {
}
// Filter each group to only include items with taxId in filteredAlignments
return alignments
const filteredAligments = alignments
.map(group => group.filter(item => this.filteredHitsTaxIds.includes(Number(item.taxId))))
.filter(group => group.length > 0);
return filteredAligments
},
}
};
Expand Down
65 changes: 29 additions & 36 deletions frontend/SankeyDiagram.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,22 +95,18 @@ export default {
const links = [];
const allLinks = [];
const rankHierarchyFull = this.rankOrderFull.reduce((acc, rank, index) => {
acc[rank] = index;
return acc;
}, {});
let currentLineage = [];
const nodesByRank = {}; // Store nodes by rank for filtering top 10
// Step 1: Create nodes and save lineage data for ALL NODES (excluding clade ranks)
// Step 1: Create nodes and save lineage data for ALL NODES
data.forEach((d) => {
let node = {
id: d.taxon_id,
taxon_id: d.taxon_id,
name: d.name,
rank: d.rank,
trueRank: d.rank,
depth: d.depth,
hierarchy: d.depth,
proportion: parseFloat(d.proportion),
clade_reads: parseFloat(d.clade_reads),
taxon_reads: d.taxon_reads,
Expand All @@ -119,26 +115,28 @@ export default {
};
// Add node to its corresponding rank collection
if (!nodesByRank[d.rank]) {
nodesByRank[d.rank] = [];
if (this.sankeyRankColumns.includes(d.rank)) {
if (!nodesByRank[d.rank]) {
nodesByRank[d.rank] = [];
}
nodesByRank[d.rank].push(node);
}
nodesByRank[d.rank].push(node);
// Store lineage for each node
let lastLineageNode = currentLineage[currentLineage.length - 1];
if (lastLineageNode) {
let currentRank = node.depth;
let lastRank = lastLineageNode.depth;
let currentRank = node.hierarchy;
let lastRank = lastLineageNode.hierarchy;
while (lastLineageNode && currentRank <= lastRank) {
const poppedNode = currentLineage.pop();
lastLineageNode = currentLineage[currentLineage.length - 1];
if (!lastLineageNode) {
break; // Exit the loop if no more nodes in the lineage
}
lastRank = lastLineageNode.depth; // Update lastRank for the next iteration comparison
lastRank = lastLineageNode.hierarchy; // Update lastRank for the next iteration comparison
}
}
// Append current node to currentLineage array + store lineage data
Expand Down Expand Up @@ -171,7 +169,7 @@ export default {
value: node.clade_reads,
};
if (this.sankeyRankColumns.includes(previousNode.rank)) {
if (this.sankeyRankColumns.includes(previousNode.rank) && nodes.includes(previousNode)) {
links.push(linkEntry);
break;
}
Expand All @@ -185,7 +183,7 @@ export default {
// Main function for rendering Sankey
createSankey(items) {
const { nodes, links } = this.parseData(items);
// // Check if nodes and links are not empty
if (!nodes.length || !links.length) {
console.warn("No data to create Sankey diagram");
Expand All @@ -205,10 +203,10 @@ export default {
const marginRight = 70;
const width = container.parentElement.clientWidth; // Dynamically get parent width
const height = 360 + marginBottom; // Fixed height for now
const height = 450;
const svg = d3.select(container)
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("viewBox", `0 0 ${width} ${height+marginBottom}`)
.attr("width", "100%")
.attr("height", height)
.classed("hide", false);
Expand All @@ -228,7 +226,6 @@ export default {
nodes: nodes.map((d) => Object.assign({}, d)),
links: links.map((d) => Object.assign({}, d)),
});
const color = d3.scaleOrdinal().range(this.colors);
const unclassifiedLabelColor = "#696B7E";
Expand Down Expand Up @@ -325,7 +322,7 @@ export default {
.attr("stroke", (d) => (d.target.type === "unclassified" ? unclassifiedLabelColor : color(d.source.color))) // Set link color to source node color with reduced opacity
.attr("stroke-width", (d) => Math.max(1, d.width));
// .attr("clip-path", (d, i) => `url(#clip-path-${this.instanceId}-${i})`);
// Create node group (node + labels) and add mouse events
const nodeGroup = svg
.append("g")
Expand Down Expand Up @@ -360,7 +357,7 @@ export default {
<hr style="margin: 8px 0; border: none; border-top: 1px solid #fff; opacity: 0.2;">
<div style="display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem;">
<div style="font-weight: bold;">Clade Reads</div>
<div style="margin-left: 10px;">${d.value}</div>
<div style="margin-left: 10px;">${d.clade_reads}</div>
</div>
</div>
`);
Expand Down Expand Up @@ -455,7 +452,7 @@ export default {
.attr("dy", "0.35em")
.attr("text-anchor", "middle")
.style("font-size", "9px")
.text((d) => this.formatCladeReads(d.value))
.text((d) => this.formatCladeReads(d.clade_reads))
.style("cursor", "pointer");
},
Expand Down Expand Up @@ -484,36 +481,32 @@ export default {
return true;
},
findChildren(rawData, selectedNode) {
const ids = [];
const filteredTaxIds = [];
let startAdding = false;
const rankIndex = sankeyRankColumns.reduce((acc, rank, index) => {
acc[rank] = index;
return acc;
}, {});
const selectedNodeRank = selectedNode.hierarchy;
for (let i = 0; i < rawData.length; i++) {
const d = rawData[i];
if (d.taxon_id === selectedNode.taxon_id) {
const comparingNode = rawData[i];
if (comparingNode.taxon_id === selectedNode.taxon_id) {
// Start adding child nodes from here
startAdding = true;
continue; // Move to the next iteration to skip the current node
}
if (startAdding) {
const selectedNodeRank = rankIndex[selectedNode.trueRank] ?? -1;
const comparingNodeRank = rankIndex[d.rank] ?? Infinity;
if (comparingNodeRank > selectedNodeRank) {
ids.push(d.taxon_id);
const comparingNodeDepth = comparingNode.depth;
// console.log(selectedNode.name, selectedNode.hierarchy, "|", comparingNode.name, comparingNodeDepth);
if (comparingNodeDepth > selectedNodeRank) {
filteredTaxIds.push(comparingNode.taxon_id);
} else {
// Stop when we encounter a node at the same or higher rank
break;
}
}
}
return ids;
return filteredTaxIds;
},
// Throttle function (used for improving performance during node hover)
Expand Down

0 comments on commit 9c20af7

Please sign in to comment.