Minor edits to select node logic and renamed variable

soedinglab · Jan 1, 2025 · a56738d · a56738d
1 parent 2f0bb1c
commit a56738d
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 14 deletions.
diff --git a/frontend/ResultView.vue b/frontend/ResultView.vue
@@ -113,7 +113,7 @@
                         </v-btn-toggle>
                     </v-flex>
                     <v-flex v-if="isSankeyVisible && entry.taxonomyreport">
-                        <SankeyDiagram :rawData="entry.taxonomyreport" @selectTaxon="handleSankeySelect"></SankeyDiagram>
+                        <SankeyDiagram :rawData="entry.taxonomyreport" :currentSelectedNodeId="selectedTaxId" @selectTaxon="handleSankeySelect"></SankeyDiagram>
                     </v-flex>
                     <table class="v-table result-table" style="position:relativ; margin-bottom: 3em;">
                         <colgroup>
@@ -283,7 +283,7 @@ export default {
             selectedDatabases: 0,
             isSankeyVisible: false,
             selectedTaxId: null,
-            selectedTaxIds: [],
+            filteredHitsTaxIds: [],
             tableMode: 0,
             menuActivator: null,
             menuItems: [],
@@ -376,8 +376,9 @@ export default {
                 this.menuActivator.click(event);
             }
         },
-        handleSankeySelect(selectedNodeIds) {
-            this.selectedTaxIds = selectedNodeIds ? selectedNodeIds.map(Number) : null; 
+        handleSankeySelect({ nodeId, descendantIds }) {
+            this.selectedTaxId = nodeId;
+            this.filteredHitsTaxIds = descendantIds ? descendantIds.map(Number) : null; 
         },
         filteredAlignments(alignments) {
             // Convert alignments to an array if it is an object
@@ -389,13 +390,13 @@ export default {
                 return []; // Return an empty array if conversion fails
             }
 
-            if (!this.selectedTaxIds || this.selectedTaxIds.length === 0) {
-                return alignments; // Return all groups if no selectedTaxIds
+            if (!this.filteredHitsTaxIds || this.filteredHitsTaxIds.length === 0) {
+                return alignments; // Return all groups if no filteredAlignments
             }
 
-            // Filter each group to only include items with taxId in selectedTaxIds
+            // Filter each group to only include items with taxId in filteredAlignments
             return alignments
-                .map(group => group.filter(item => this.selectedTaxIds.includes(Number(item.taxId))))
+                .map(group => group.filter(item => this.filteredHitsTaxIds.includes(Number(item.taxId))))
                 .filter(group => group.length > 0);
         },
     }

diff --git a/frontend/SankeyDiagram.vue b/frontend/SankeyDiagram.vue
@@ -15,8 +15,12 @@ export default {
         rawData: {
 			type: Array,
 			required: true,
-		}
-    },
+		},
+		currentSelectedNodeId: {
+			type: String,
+			default: null,
+		},
+	},
     data: () => ({
 		currentSelectedNode: null, // Track the currently selected node
 		
@@ -460,7 +464,7 @@ export default {
 					// If the same node is clicked again, deselect it
 					if (this.currentSelectedNode && this.currentSelectedNode.id === d.id) {
 						this.currentSelectedNode = null;
-						this.$emit("selectTaxon", null); // Emit an empty array to show all IDs
+						this.$emit("selectTaxon", { nodeId: null, descendantIds: null }); // Emit an empty array to show all IDs
 						return;
 					}
 
@@ -487,7 +491,7 @@ export default {
         			this.currentSelectedNode = d;
 
 					// Emit the IDs array
-					this.$emit("selectTaxon", allNodeIds);
+					this.$emit("selectTaxon", { nodeId: d.id, descendantIds: allNodeIds });
 				});
 			;
 
@@ -498,7 +502,9 @@ export default {
 				.attr("height", (d) => Math.max(1, d.y1 - d.y0))
 				.attr("fill", (d) => (d.type === "unclassified" ? unclassifiedLabelColor : d.color))
 				.attr("class", (d) => "node taxid-" + d.id) // Apply the CSS class for cursor
-				.style("cursor", "pointer");
+				.style("cursor", "pointer")
+				.style("stroke", (d) => this.currentSelectedNodeId === d.id ? "black" : null)
+				.style("stroke-width", (d) => this.currentSelectedNodeId === d.id ? "2px" : "0px");
 
 			// Add node name labels next to node
 			nodeGroup
@@ -511,7 +517,8 @@ export default {
 				.attr("text-anchor", "start")
 				.text((d) => d.name)
 				.style("font-size", "9px")
-				.style("cursor", "pointer");
+				.style("cursor", "pointer")
+				.style("font-weight", (d) => (this.currentSelectedNodeId === d.id ? "bold" : "normal"));
 
 			// Add label above node (proportion/clade reads)
 			nodeGroup