From 96abd34657973418001c6473be2951f773600c52 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sunny=20=28SunJae=29=20Lee=20=EC=9D=B4=EC=84=A0=EC=9E=AC?=
 <snjlee58@gmail.com>
Date: Mon, 9 Dec 2024 15:34:19 +0900
Subject: [PATCH 1/9] added taxonomyreport data to hits results

---
 backend/alignment.go | 75 +++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 74 insertions(+), 1 deletion(-)

diff --git a/backend/alignment.go b/backend/alignment.go
index aed2a9c..3b4ca72 100644
--- a/backend/alignment.go
+++ b/backend/alignment.go
@@ -190,6 +190,16 @@ type FastaEntry struct {
 type SearchResult struct {
 	Database   string      `json:"db"`
 	Alignments interface{} `json:"alignments"`
+	TaxonomyReport interface{} `json:"taxonomyreport"`
+}
+
+type TaxonomyReport struct {
+    Proportion    float64 `json:"proportion"`
+    CladeReads    int     `json:"cladeReads"`
+    TaxonReads    int     `json:"taxonReads"`
+    Rank          string  `json:"rank"`
+    TaxonID       string  `json:"taxonId"`
+    ScientificName string `json:"scientificName"`
 }
 
 func dbpaths(path string) (string, string) {
@@ -320,13 +330,76 @@ func ReadAlignments[T any, U interface{ ~uint32 | ~int64 }](id Id, entries []U,
 			all = append(all, results)
 		}
 		reader.Delete()
+
+		// Read the taxonomy report
+        taxonomyReportPath := filepath.Join(base, "alis_afsp_report")
+        taxonomyReport, err := ReadTaxonomyReport(taxonomyReportPath)
+        if err != nil {
+            return res, err
+        }
+
 		base := filepath.Base(name)
-		res = append(res, SearchResult{strings.TrimPrefix(base, "alis_"), all})
+		res = append(res, SearchResult{
+			strings.TrimPrefix(base, "alis_"), 
+			all,
+			taxonomyReport, // Include taxonomy report
+			})
 	}
 
 	return res, nil
 }
 
+func ReadTaxonomyReport(filePath string) ([]TaxonomyReport, error) {
+    file, err := os.Open(filePath)
+    if err != nil {
+        return nil, err
+    }
+    defer file.Close()
+
+    var reports []TaxonomyReport
+    scanner := bufio.NewScanner(file)
+
+    for scanner.Scan() {
+        line := scanner.Text()
+        fields := strings.Split(line, "\t")
+        if len(fields) < 6 {
+            return nil
+        }
+
+        // Parse the fields
+        proportion, err := strconv.ParseFloat(fields[0], 64)
+        if err != nil {
+            return nil, err
+        }
+
+        cladeReads, err := strconv.Atoi(fields[1])
+        if err != nil {
+            return nil, err
+        }
+
+        taxonReads, err := strconv.Atoi(fields[2])
+        if err != nil {
+            return nil, err
+        }
+
+        report := TaxonomyReport{
+            Proportion:    proportion,
+            CladeReads:    cladeReads,
+            TaxonReads:    taxonReads,
+            Rank:          fields[3],
+            TaxonID:       fields[4],
+            ScientificName: strings.TrimSpace(fields[5]),
+        }
+        reports = append(reports, report)
+    }
+
+    if err := scanner.Err(); err != nil {
+        return nil, err
+    }
+
+    return reports, nil
+}
+
 func Alignments(id Id, entry []int64, databases []string, jobsbase string) ([]SearchResult, error) {
 	return ReadAlignments[AlignmentEntry, int64](id, entry, databases, jobsbase)
 }

From adbd9c02b38d5bc3e808dae8b7e1c3383657515d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sunny=20=28SunJae=29=20Lee=20=EC=9D=B4=EC=84=A0=EC=9E=AC?=
 <snjlee58@gmail.com>
Date: Sun, 22 Dec 2024 17:00:17 +0900
Subject: [PATCH 2/9] Added svg canvas for rendering sankey

---
 backend/alignment.go       |  10 +-
 frontend/ResultView.vue    |   8 +-
 frontend/SankeyDiagram.vue | 724 +++++++++++++++++++++++++++++++++++++
 frontend/rankUtils.js      |  75 ++++
 4 files changed, 809 insertions(+), 8 deletions(-)
 create mode 100644 frontend/SankeyDiagram.vue
 create mode 100644 frontend/rankUtils.js

diff --git a/backend/alignment.go b/backend/alignment.go
index 3b4ca72..4f7bce1 100644
--- a/backend/alignment.go
+++ b/backend/alignment.go
@@ -195,11 +195,11 @@ type SearchResult struct {
 
 type TaxonomyReport struct {
     Proportion    float64 `json:"proportion"`
-    CladeReads    int     `json:"cladeReads"`
-    TaxonReads    int     `json:"taxonReads"`
+    CladeReads    int     `json:"clade_reads"`
+    TaxonReads    int     `json:"taxon_reads"`
     Rank          string  `json:"rank"`
-    TaxonID       string  `json:"taxonId"`
-    ScientificName string `json:"scientificName"`
+    TaxonID       string  `json:"taxon_id"`
+    ScientificName string `json:"name"`
 }
 
 func dbpaths(path string) (string, string) {
@@ -363,7 +363,7 @@ func ReadTaxonomyReport(filePath string) ([]TaxonomyReport, error) {
         line := scanner.Text()
         fields := strings.Split(line, "\t")
         if len(fields) < 6 {
-            return nil
+            return nil, err
         }
 
         // Parse the fields
diff --git a/frontend/ResultView.vue b/frontend/ResultView.vue
index 348f7ac..c0eb647 100644
--- a/frontend/ResultView.vue
+++ b/frontend/ResultView.vue
@@ -106,7 +106,9 @@
                             </v-btn>
                         </v-btn-toggle>
                     </v-flex>
-
+                    <v-flex>
+                        <SankeyDiagram :rawData="hits.results[0].taxonomyreport"></SankeyDiagram>
+                    </v-flex>
                     <table class="v-table result-table" style="position:relativ; margin-bottom: 3em;">
                         <colgroup>
                             <template v-if="isComplex">
@@ -251,6 +253,7 @@
 import Panel from './Panel.vue';
 import AlignmentPanel from './AlignmentPanel.vue';
 import Ruler from './Ruler.vue';
+import SankeyDiagram from './SankeyDiagram.vue';
 
 import { debounce } from './lib/debounce';
 
@@ -265,7 +268,7 @@ function getAbsOffsetTop($el) {
 
 export default {
     name: 'ResultView',
-    components: { Panel, AlignmentPanel, Ruler },
+    components: { Panel, AlignmentPanel, Ruler, SankeyDiagram },
     data() {
         return {
             alignment: null,
@@ -424,7 +427,6 @@ src: url(assets/InconsolataClustal2.woff2),
     }
 }
 
-
 .theme--dark {
     .result-table {
         a:not([href])  {
diff --git a/frontend/SankeyDiagram.vue b/frontend/SankeyDiagram.vue
new file mode 100644
index 0000000..dc83ee5
--- /dev/null
+++ b/frontend/SankeyDiagram.vue
@@ -0,0 +1,724 @@
+<template>
+	 <div class="sankey-container">
+            <svg ref="sankeySvg" width="600" height="300"></svg>
+			<!-- <pre v-if="rawData">{{ rawData }}</pre> -->
+        </div>
+</template>
+
+<script>
+import * as d3 from "d3";
+import { sankey, sankeyLinkHorizontal, sankeyJustify } from "d3-sankey";
+import { rankOrderFull, sankeyRankColumns } from "./rankUtils";
+
+export default {
+	name: "SankeyDiagram",
+	components: {
+		// SankeyTooltip,
+	},
+    props: {
+        rawData: {
+			type: Array,
+			required: true,
+		}
+    },
+    data: () => ({
+		sankeyData: {
+            nodes: [
+                { name: "Node A" },
+                { name: "Node B" },
+                { name: "Node C" },
+                { name: "Node D" }
+            ],
+            links: [
+                { source: 0, target: 1, value: 10 },
+                { source: 1, target: 2, value: 5 },
+                { source: 1, target: 3, value: 5 }
+            ]
+        },
+
+		loading: false,
+
+		// Data for tooltip
+			hoverDetails: {
+				visible: false,
+				data: {},
+			},
+			tooltipPosition: {
+				x: 0,
+				y: 0,
+			},
+
+		// Data for graph rendering
+		id: "testtest", // DEBUG
+		nonCladesRawData: null, // rawData with just clades filtered out
+		allNodesByRank: {},
+		rankOrderFull, // Imported from rankUtils
+		rankOrder: [...sankeyRankColumns, "no rank"],
+		fullRankOrder: [
+			"superkingdom",
+			"kingdom",
+			"subkingdom",
+			"superphylum",
+			"phylum",
+			"subphylum",
+			"superclass",
+			"class",
+			"subclass",
+			"superorder",
+			"order",
+			"suborder",
+			"infraorder",
+			"parvorder",
+			"superfamily",
+			"family",
+			"subfamily",
+			"supergenus",
+			"genus",
+			"subgenus",
+			"superspecies",
+			"species",
+			"subspecies",
+			"no rank",
+			"clade",
+		],
+		colors: [
+			"#57291F",
+			"#C0413B",
+			"#D77B5F",
+			"#FF9200",
+			"#FFCD73",
+			"#F7E5BF",
+			"#C87505",
+			"#F18E3F",
+			"#E59579",
+			"#C14C32",
+			"#80003A",
+			"#506432",
+			"#FFC500",
+			"#B30019",
+			"#EC410B",
+			"#E63400",
+			"#8CB5B5",
+			"#6C3400",
+			"#FFA400",
+			"#41222A",
+			"#FFB27B",
+			"#FFCD87",
+			"#BC7576",
+		],
+}),
+watch: {
+	loading(newValue) {
+			// console.log("Loading state changed:", newValue); // DEBUG
+			if (!newValue) {
+				this.$nextTick(() => {
+					// Ensure the DOM is updated before creating the Sankey diagram.
+					// Runs Only When the Container is Available.
+					this.createSankey();
+				});
+			}
+		},
+        rawData: {
+			immediate: true,
+			handler(newValue) {
+				// this.processRawData(newValue);
+				// this.loading = true;
+				this.$nextTick(() => {
+                if (newValue) {
+                    this.drawSankeyTest();
+                }
+            });
+			},
+		},
+    },
+    methods: {
+		drawSankeyTest() {
+			console.log("Raw Data:", this.rawData);
+            const svg = d3.select(this.$refs.sankeySvg);
+            const width = +svg.attr("width");
+            const height = +svg.attr("height");
+
+            // Clear any existing content
+            svg.selectAll("*").remove();
+
+            const sankeyGenerator = sankey()
+                .nodeAlign(sankeyJustify)
+                .nodeWidth(20)
+                .nodePadding(10)
+                .extent([
+                    [1, 1],
+                    [width - 1, height - 6]
+                ]);
+
+            const graph = sankeyGenerator({
+                nodes: this.sankeyData.nodes.map((d) => Object.assign({}, d)),
+                links: this.sankeyData.links.map((d) => Object.assign({}, d))
+            });
+
+            // Draw links
+            svg.append("g")
+                .attr("fill", "none")
+                .attr("stroke-opacity", 0.5)
+                .selectAll("path")
+                .data(graph.links)
+                .join("path")
+                .attr("d", sankeyLinkHorizontal())
+                .attr("stroke", "#555")
+                .attr("stroke-width", (d) => Math.max(1, d.width));
+
+            // Draw nodes
+            const node = svg.append("g")
+                .attr("stroke", "#000")
+                .selectAll("g")
+                .data(graph.nodes)
+                .join("g");
+
+            node.append("rect")
+                .attr("x", (d) => d.x0)
+                .attr("y", (d) => d.y0)
+                .attr("height", (d) => d.y1 - d.y0)
+                .attr("width", (d) => d.x1 - d.x0)
+                .attr("fill", "#1f77b4")
+                .attr("stroke", "#000");
+
+            node.append("text")
+                .attr("x", (d) => d.x0 - 6)
+                .attr("y", (d) => (d.y1 + d.y0) / 2)
+                .attr("dy", "0.35em")
+                .attr("text-anchor", "end")
+                .text((d) => d.name)
+                .attr("font-size", "10px")
+                .attr("fill", "#000")
+                .filter((d) => d.x0 < width / 2)
+                .attr("x", (d) => d.x1 + 6)
+                .attr("text-anchor", "start");
+        },
+
+		// Function for processing/parsing data
+		processRawData(data) {
+			if (!this.rawData || !Array.isArray(this.rawData)) {
+  console.warn("rawData is not an array or is undefined", this.rawData);
+  return;
+}
+			this.allNodesByRank = {}; // Reset the nodes by rank
+
+			// Filter out clades from raw data
+			const nonClades = data.filter((entry) => this.rankOrderFull.includes(entry.rank) && entry.rank !== "clade");
+			this.nonCladesRawData = nonClades;
+
+			// Store nodes by rank from full data (for calculation of maxTaxaLimit)
+			nonClades.forEach((node) => {
+				if (!this.allNodesByRank[node.rank]) {
+					this.allNodesByRank[node.rank] = [];
+				}
+				this.allNodesByRank[node.rank].push(node);
+			});
+
+			// Update the configure menu with the maximum taxa per rank
+			// this.updateConfigureMenu();
+		},
+		// Function for processing/parsing data
+		parseData(data, isFullGraph = false) {
+			const nodes = [];
+			const unclassifiedNodes = [];
+			const allNodes = [];
+			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)
+			data.forEach((d) => {
+				let node = {
+					id: d.taxon_id,
+					taxon_id: d.taxon_id,
+					name: d.name,
+					rank: d.rank,
+					trueRank: d.rank,
+					proportion: parseFloat(d.proportion),
+					clade_reads: parseFloat(d.clade_reads),
+					taxon_reads: d.taxon_reads,
+					lineage: [...currentLineage, { id: d.taxon_id, name: d.name, rank: d.rank }], // Copy current lineage
+					type: "",
+				};
+
+				console.log(node.taxon_id);
+
+				if (d.rank !== "no rank" && !this.isUnclassifiedTaxa(d)) {
+					// Declare type as 'classified'
+					node.type = "classified";
+
+					// Add classified node to its corresponding rank collection
+					if (!nodesByRank[d.rank]) {
+						nodesByRank[d.rank] = [];
+					}
+					nodesByRank[d.rank].push(node);
+
+					// Include all ranks for lineage tracking
+					if (node.rank !== "clade") {
+						let lastLineageNode = currentLineage[currentLineage.length - 1];
+
+						if (lastLineageNode) {
+							while (lastLineageNode && rankHierarchyFull[node.rank] <= rankHierarchyFull[lastLineageNode.rank]) {
+								currentLineage.pop();
+								lastLineageNode = currentLineage[currentLineage.length - 1];
+							}
+						}
+
+						// Append current node to currentLineage array + store lineage data
+						currentLineage.push(node);
+						node.lineage = [...currentLineage];
+					}
+				} else if (this.isUnclassifiedTaxa(d)) {
+					// lineage tracking for unclassified taxa
+					let currentLineageCopy = [...currentLineage];
+					const parentName = d.name.replace("unclassified ", "");
+					let lastLineageNode = currentLineageCopy[currentLineageCopy.length - 1];
+
+					if (lastLineageNode) {
+						while (lastLineageNode && lastLineageNode.name !== parentName) {
+							currentLineageCopy.pop();
+							lastLineageNode = currentLineageCopy[currentLineageCopy.length - 1];
+						}
+					}
+
+					// Find the previous node in the lineage that is in rankOrder
+					const parentNode = currentLineageCopy.find((n) => n.name === parentName);
+					if (parentNode && parentNode === lastLineageNode) {
+						const lineage = currentLineageCopy;
+
+						let previousNode = null;
+						for (let i = lineage.length - 1; i >= 0; i--) {
+							// Start from the last item
+							if (this.rankOrder.includes(lineage[i].rank)) {
+								previousNode = lineage[i];
+								break;
+							}
+						}
+
+						// Determine the rank immediately to the right of this node
+						const parentRankIndex = this.rankOrder.indexOf(previousNode.rank);
+
+						// Edit properties for unclassified taxa
+						const nextRank = this.rankOrder[parentRankIndex + 1];
+
+						node.id = `dummy-${d.taxon_id}`;
+						node.rank = nextRank;
+						node.type = "unclassified";
+
+						// Add unclassified node to currentLineage and save lineage data
+						currentLineageCopy.push(node);
+						node.lineage = [...currentLineageCopy];
+
+						unclassifiedNodes.push(node);
+					}
+				}
+			});
+
+			// Step 2: Filter top 10 nodes by clade_reads for each rank in rankOrder
+			// + Add filtered rank nodes & unclassified nodes to sankey diagram
+			this.rankOrder.forEach((rank) => {
+				if (nodesByRank[rank]) {
+					// Store all nodes
+					allNodes.push(...nodesByRank[rank]);
+
+					// Sort nodes by clade_reads in descending order and select the top nodes based on slider value
+					const topNodes = nodesByRank[rank].sort((a, b) => b.clade_reads - a.clade_reads).slice(0, isFullGraph ? nodesByRank[rank].length : this.taxaLimit); // Don't apply taxaLimit when parsing fullGraphData
+					nodes.push(...topNodes);
+				}
+			});
+
+			unclassifiedNodes.forEach((node) => {
+				// Store in all nodes
+				allNodes.push(node);
+
+				// Add unclassified nodes to sankey
+				nodes.push(node);
+			});
+
+			// Step 3: Create links based on filtered nodes' lineage
+			nodes.forEach((node) => {
+				// Find the previous node in the lineage that is in rankOrder
+				const lineage = node.lineage;
+				let previousNode = null;
+
+				for (let i = lineage.length - 2; i >= 0; i--) {
+					// Start from the second last item
+					if (this.rankOrder.includes(lineage[i].rank) && nodes.includes(lineage[i])) {
+						previousNode = lineage[i];
+						break;
+					}
+				}
+
+				if (previousNode) {
+					links.push({
+						source: previousNode.id,
+						target: node.id,
+						value: node.clade_reads,
+					});
+				}
+			});
+
+			// Store links for all nodes
+			allNodes.forEach((node) => {
+				// Find the previous node in the lineage that is in rankOrder
+				const lineage = node.lineage;
+				let previousNode = null;
+
+				for (let i = lineage.length - 2; i >= 0; i--) {
+					// Start from the second last item
+					if (this.rankOrder.includes(lineage[i].rank) && allNodes.includes(lineage[i])) {
+						previousNode = lineage[i];
+						break;
+					}
+				}
+
+				if (previousNode) {
+					allLinks.push({
+						source: previousNode.id,
+						target: node.id,
+						value: node.clade_reads,
+					});
+				}
+			});
+
+			return { nodes, links };
+		},
+        // 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");
+				// select(this.$refs.svg).classed("hide", true);
+				return;
+			}
+
+			const container = this.$refs.sankeyContainer;
+			d3.select(container).selectAll("*").remove(); // Clear the previous diagram
+
+			const width = 960;
+			const height = 360;
+			const nodeWidth = 30;
+			const nodePadding = 13;
+			const marginBottom = 50; // Margin for rank labels
+			const marginRight = 70;
+			const leftMargin = 10;
+
+			// const svg = select(container)
+			// 	.attr("viewBox", [0, 0, width, height + marginBottom])
+			// 	.classed("hide", false);
+
+			const svg = d3
+			.select(container)
+			.append("svg")
+			.attr("width", width)
+			.attr("height", height + marginBottom)
+			.attr("id", this.id); // Set the id based on the prop for download reference
+
+			const sankeyGenerator = sankey()
+				.nodeId((d) => d.id)
+				.nodeAlign(sankeyJustify)
+				.nodeWidth(nodeWidth)
+				.nodePadding(nodePadding)
+				.iterations(100)
+				.extent([
+					[10, 10],
+					[width - marginRight, height - 6],
+				]);
+			const graph = sankeyGenerator({
+				nodes: nodes.map((d) => Object.assign({}, d)),
+				links: links.map((d) => Object.assign({}, d)),
+			});
+
+			const color = d3.scaleOrdinal().range(this.colors);
+			const unclassifiedLabelColor = "#696B7E";
+
+			// Manually adjust nodes position to align by rank
+			const columnWidth = (width - marginRight) / this.rankOrder.length;
+			const columnMap = this.rankOrder.reduce((acc, rank, index) => {
+				const leftMargin = 10;
+				acc[rank] = index * columnWidth + leftMargin;
+				return acc;
+			}, {});
+
+			graph.nodes.forEach((node) => {
+				node.x0 = columnMap[node.rank];
+				node.x1 = node.x0 + sankeyGenerator.nodeWidth();
+
+				if (node.type === "unclassified") {
+					node.color = unclassifiedLabelColor;
+				} else {
+					node.color = color(node.id); // Assign color to node
+				}
+			});
+
+			// Re-run the layout to ensure correct vertical positioning
+			sankeyGenerator.update(graph);
+
+			// Add rank column labels
+			const rankLabels = ["D", "K", "P", "C", "O", "F", "G", "S"];
+			svg
+				.append("g")
+				.selectAll("text")
+				// .data(rankLabels)
+				.data(this.rankOrder)
+				.enter()
+				.append("text")
+				.attr("x", (rank) => columnMap[rank] + sankeyGenerator.nodeWidth() / 2)
+				.attr("y", height + marginBottom / 2)
+				.attr("dy", "0.35em")
+				.attr("text-anchor", "middle")
+				.text((rank, index) => rankLabels[index]);
+
+			// Draw rank label divider link
+			svg
+				.append("line")
+				.attr("x1", 0)
+				.attr("y1", height + 10)
+				.attr("x2", width)
+				.attr("y2", height + 10)
+				.attr("stroke", "#000")
+				.attr("stroke-width", 1);
+
+			// // Function to highlight lineage
+			// const highlightLineage = (node) => {
+			// 	const lineageIds = new Set(node.lineage.map((n) => n.id));
+			// 	lineageIds.add(node.id);
+
+			// 	svg.selectAll("rect").style("opacity", (d) => (lineageIds.has(d.id) ? 1 : 0.2));
+			// 	svg.selectAll("path").style("opacity", (d) => (lineageIds.has(d.source.id) && lineageIds.has(d.target.id) ? 1 : 0.2));
+			// 	svg.selectAll(".label").style("opacity", (d) => (lineageIds.has(d.id) ? 1 : 0.1));
+			// 	svg.selectAll(".clade-reads").style("opacity", (d) => (lineageIds.has(d.id) ? 1 : 0.1));
+			// };
+
+			// // Function to reset highlight
+			// const resetHighlight = () => {
+			// 	svg.selectAll("rect").style("opacity", 1);
+			// 	svg.selectAll("path").style("opacity", 1);
+			// 	svg.selectAll(".label").style("opacity", 1);
+			// 	svg.selectAll(".clade-reads").style("opacity", 1);
+			// };
+
+			// // Define a clipping path for each link (crops out curve when links are too thick)
+			// svg
+			// 	.append("defs")
+			// 	.selectAll("clipPath")
+			// 	.data(graph.links)
+			// 	.enter()
+			// 	.append("clipPath")
+			// 	// .attr("id", (d, i) => `clip-path-${this.instanceId}-${i}`)
+			// 	.append("rect")
+			// 	.attr("x", (d) => d.source.x1)
+			// 	.attr("y", 0)
+			// 	.attr("width", (d) => d.target.x0 - d.source.x1)
+			// 	.attr("height", height);
+
+			// // Add links
+			// svg
+			// 	.append("g")
+			// 	.attr("fill", "none")
+			// 	.attr("stroke-opacity", 0.3)
+			// 	.selectAll("path")
+			// 	.data(graph.links)
+			// 	.enter()
+			// 	.append("path")
+			// 	.attr("d", d3sankey.sankeyLinkHorizontal())
+			// 	.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")
+			// 	.selectAll(".node-group")
+			// 	.data(graph.nodes)
+			// 	.enter()
+			// 	.append("g")
+			// 	.attr("class", (d) => "node-group taxid-" + d.id)
+			// 	.attr("transform", (d) => `translate(${d.x0}, ${d.y0})`)
+			// 	.on("mouseover", (event, d) => {
+			// 		highlightLineage(d);
+			// 		// Create the tooltip div
+			// 		select("body")
+			// 			.append("div")
+			// 			.attr("class", "tooltip")
+			// 			.html(
+			// 				`
+			// 				<div style="padding-top: 4px; padding-bottom: 4px; padding-left: 8px; padding-right: 8px;">
+			// 					<p style="font-size: 0.6rem; margin-bottom: 0px;">#${d.id}</p>
+			// 					<div style="display: flex; justify-content: space-between; align-items: center;">
+			// 						<div style="font-weight: bold; font-size: 0.875rem;">${d.name}</div>
+			// 						<span style="background-color: rgba(255, 167, 38, 0.25); color: #ffa726; font-weight: bold; padding: 4px 8px; border-radius: 12px; font-size: 0.875rem; margin-left: 10px;">${d.rank}</span>
+			// 					</div>
+			// 					<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>
+			// 				</div>
+			// 			`
+			// 			)
+			// 			.style("left", `${d.x + d.dx}px`)
+			// 			.style("top", `${d.y + window.scrollY}px`);
+			// 	})
+			// 	.on("mousemove", (event, d) => {
+			// 		// Move the tooltip as the mouse moves
+			// 		select(".tooltip")
+			// 			.style("left", `${event.pageX + 10}px`)
+			// 			.style("top", `${event.pageY + 10}px`);
+			// 	})
+			// 	.on("mouseout", () => {
+			// 		resetHighlight();
+			// 		// Remove the tooltip when mouse leaves
+			// 		select(".tooltip").remove();
+			// 	})
+			// 	.on("click", (event, d) => {
+			// 		if (event.target.classList.contains("active")) {
+			// 			selectAll("rect.node, text.label").classed("active", false);
+			// 			this.$emit("select", null);
+			// 		} else {
+			// 			selectAll("rect.node, text.label").classed("active", false);
+			// 			selectAll(".taxid-" + d.id).classed("active", true);
+			// 			this.$emit("select", { name: d.name, id: d.id });
+			// 		}
+			// 	});
+
+			// // Create node rectangles
+			// nodeGroup
+			// 	.append("rect")
+			// 	.attr("width", (d) => d.x1 - d.x0)
+			// 	.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");
+
+			// // Add node name labels next to node
+			// nodeGroup
+			// 	.append("text")
+			// 	.attr("id", (d) => `nodeName-${d.id}`)
+			// 	.attr("class", (d) => "label taxid-" + d.id)
+			// 	.attr("x", (d) => d.x1 - d.x0 + 3)
+			// 	.attr("y", (d) => (d.y1 - d.y0) / 2)
+			// 	.attr("dy", "0.35em")
+			// 	.attr("text-anchor", "start")
+			// 	.text((d) => d.name)
+			// 	.style("font-size", "9px")
+			// 	.style("cursor", "pointer");
+
+			// // Add label above node (proportion/clade reads)
+			// nodeGroup
+			// 	.append("text")
+			// 	.attr("id", (d) => `cladeReads-${d.id}`)
+			// 	.attr("class", "clade-reads")
+			// 	.attr("x", (d) => (d.x1 - d.x0) / 2)
+			// 	.attr("y", -4)
+			// 	.attr("dy", "0.35em")
+			// 	.attr("text-anchor", "middle")
+			// 	.style("font-size", "9px")
+			// 	.text((d) => this.formatCladeReads(d.value))
+			// 	.style("cursor", "pointer");
+
+			// // Highlight nodes matching search query
+			// // this.highlightNodes(this.searchQuery);
+		},
+
+		isUnclassifiedTaxa(d) {
+			const name = d.name;
+
+			// Check if the name starts with "unclassified"
+			if (!name.includes("unclassified")) {
+				return false;
+			}
+
+			// Split the name into words
+			const words = name.trim().split(/\s+/);
+
+			// Check if there are at least two words
+			if (words.length < 2) {
+				return false;
+			}
+			return true;
+		},
+
+		// Functions for rerendering/updating Sankey
+		async updateSankey() {
+			// Start loading, show loading display
+			this.loading = true;
+
+			try {
+				// await this.fetchSankey();
+			} catch (error) {
+				console.error("Error in updateSankey:", error);
+			} finally {
+				setTimeout(() => {
+					this.loading = false;
+				}, 100); // Small delay to ensure DOM updates
+			}
+		},
+		async fetchSankey() {
+			await new Promise((resolve) => {
+				setTimeout(() => {
+					this.createSankey(); // Create the Sankey diagram immediately after getting data
+					resolve();
+				}, 50); // Immediate execution after fetching data
+			});
+		},
+
+		// Throttle function (used for improving performance during node hover)
+		throttle(func, delay) {
+			let lastCall = 0;
+			return function (...args) {
+				const now = new Date().getTime();
+				if (now - lastCall < delay) {
+					return;
+				}
+				lastCall = now;
+				return func(...args);
+			};
+		},
+		mounted() {
+			// Listener for screen resizing event
+			// window.addEventListener("resize", this.updateDiagramWidth);
+
+			this.drawSankeyTest();
+			// await this.updateSankey();
+		},
+		beforeUnmount() {
+			// window.removeEventListener("resize", this.updateDiagramWidth);
+		},
+	},
+}
+
+</script>
+
+<style scoped>
+.sankey-container {
+	/* display: flex; */
+	width: 100%;
+	height: 400px; /* Ensure it takes full viewport height */
+}
+.sankey-diagram {
+	width: 100%;
+	height: 400px;
+	padding-bottom: 32px;
+	overflow-x: scroll;
+	/* Hide horizontal scrollbar for IE, Edge and Firefox */
+	-ms-overflow-style: none; /* IE and Edge */
+	scrollbar-width: none; /* Firefox */
+}
+/* Hide horizontal scrollbar for Chrome, Safari and Opera */
+.sankey-diagram::-webkit-scrollbar {
+	display: none;
+}
+
+svg.hide {
+	display: none;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/rankUtils.js b/frontend/rankUtils.js
new file mode 100644
index 0000000..92068dc
--- /dev/null
+++ b/frontend/rankUtils.js
@@ -0,0 +1,75 @@
+/** Full rank order used for sorting/ordering of hierarchy */
+export const rankOrderFull = [
+	"superkingdom",
+	"kingdom",
+	"subkingdom",
+	"superphylum",
+	"phylum",
+	"subphylum",
+	"superclass",
+	"class",
+	"subclass",
+	"superorder",
+	"order",
+	"suborder",
+	"infraorder",
+	"parvorder",
+	"superfamily",
+	"family",
+	"subfamily",
+	"supergenus",
+	"genus",
+	"subgenus",
+	"superspecies",
+	"species",
+	"subspecies",
+	"no rank",
+	"clade",
+];
+
+/** Ranks displays as levels/columns on sankey diagram
+ * Include 'no rank' for nodes displayed on sankey */
+export const sankeyRankColumns = ["superkingdom", "kingdom", "phylum", "class", "order", "family", "genus", "species"];
+
+const rankColors = [
+	// Superkingdom
+	"#57291F",
+	"#E63A06",
+	"#EE9595",
+	// Superphylum
+	"#FF6200",
+	"#FF9200",
+	"#F7B267",
+	// Superclass
+	"#E8B600",
+	"#FFD000",
+	"#E6DB6A",
+	// Superorder
+	"#044036",
+	"#0A7A26",
+	"#46A74B",
+	"#86B614",
+	"#ABE188",
+	// Superfamily
+	"#0065A2",
+	"#00A5E3",
+	"#77D0D0",
+	// Supergenus
+	"#520073",
+	"#9C47B0",
+	"#C792C7",
+	// Superspecies
+	"#FD4BB9",
+	"#F389F3",
+	"#FAB3E3",
+	// No rank
+	"#8A9BA7",
+	// Clade
+	"#696B73",
+];
+
+/** Function to retrieve color corresponding to rank */
+export function getRankColor(rank) {
+	const rankIndex = rankOrderFull.indexOf(rank);
+	return rankColors[rankIndex % rankColors.length];
+}

From 0bd03152cc0bba8913f30d3236e287b2aac9c38c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sunny=20=28SunJae=29=20Lee=20=EC=9D=B4=EC=84=A0=EC=9E=AC?=
 <snjlee58@gmail.com>
Date: Sun, 22 Dec 2024 17:42:00 +0900
Subject: [PATCH 3/9] Added nodes and links to sankey (needs adjusting)

---
 frontend/SankeyDiagram.vue | 263 +++++++++++++++++++------------------
 1 file changed, 135 insertions(+), 128 deletions(-)

diff --git a/frontend/SankeyDiagram.vue b/frontend/SankeyDiagram.vue
index dc83ee5..132b866 100644
--- a/frontend/SankeyDiagram.vue
+++ b/frontend/SankeyDiagram.vue
@@ -1,6 +1,7 @@
 <template>
 	 <div class="sankey-container">
-            <svg ref="sankeySvg" width="600" height="300"></svg>
+        <svg ref="sankeyContainer" width="960" height="400"></svg>    
+		<!-- <svg ref="sankeySvg" width="600" height="300"></svg> -->
 			<!-- <pre v-if="rawData">{{ rawData }}</pre> -->
         </div>
 </template>
@@ -22,19 +23,19 @@ export default {
 		}
     },
     data: () => ({
-		sankeyData: {
-            nodes: [
-                { name: "Node A" },
-                { name: "Node B" },
-                { name: "Node C" },
-                { name: "Node D" }
-            ],
-            links: [
-                { source: 0, target: 1, value: 10 },
-                { source: 1, target: 2, value: 5 },
-                { source: 1, target: 3, value: 5 }
-            ]
-        },
+		// sankeyData: {
+        //     nodes: [
+        //         { name: "Node A" },
+        //         { name: "Node B" },
+        //         { name: "Node C" },
+        //         { name: "Node D" }
+        //     ],
+        //     links: [
+        //         { source: 0, target: 1, value: 10 },
+        //         { source: 1, target: 2, value: 5 },
+        //         { source: 1, target: 3, value: 5 }
+        //     ]
+        // },
 
 		loading: false,
 
@@ -121,11 +122,11 @@ watch: {
         rawData: {
 			immediate: true,
 			handler(newValue) {
-				// this.processRawData(newValue);
 				// this.loading = true;
 				this.$nextTick(() => {
-                if (newValue) {
-                    this.drawSankeyTest();
+					if (newValue) {
+					this.createSankey(newValue);
+                    // this.drawSankeyTest();
                 }
             });
 			},
@@ -133,7 +134,7 @@ watch: {
     },
     methods: {
 		drawSankeyTest() {
-			console.log("Raw Data:", this.rawData);
+			// console.log("Raw Data:", this.rawData);
             const svg = d3.select(this.$refs.sankeySvg);
             const width = +svg.attr("width");
             const height = +svg.attr("height");
@@ -197,9 +198,9 @@ watch: {
 		// Function for processing/parsing data
 		processRawData(data) {
 			if (!this.rawData || !Array.isArray(this.rawData)) {
-  console.warn("rawData is not an array or is undefined", this.rawData);
-  return;
-}
+				console.warn("rawData is not an array or is undefined", this.rawData);
+				return;
+			}
 			this.allNodesByRank = {}; // Reset the nodes by rank
 
 			// Filter out clades from raw data
@@ -208,6 +209,7 @@ watch: {
 
 			// Store nodes by rank from full data (for calculation of maxTaxaLimit)
 			nonClades.forEach((node) => {
+				console.log(node.rank);
 				if (!this.allNodesByRank[node.rank]) {
 					this.allNodesByRank[node.rank] = [];
 				}
@@ -247,7 +249,7 @@ watch: {
 					type: "",
 				};
 
-				console.log(node.taxon_id);
+				console.log(node.taxon_id); // DEBUG
 
 				if (d.rank !== "no rank" && !this.isUnclassifiedTaxa(d)) {
 					// Declare type as 'classified'
@@ -411,10 +413,6 @@ watch: {
 			const marginRight = 70;
 			const leftMargin = 10;
 
-			// const svg = select(container)
-			// 	.attr("viewBox", [0, 0, width, height + marginBottom])
-			// 	.classed("hide", false);
-
 			const svg = d3
 			.select(container)
 			.append("svg")
@@ -449,6 +447,7 @@ watch: {
 			}, {});
 
 			graph.nodes.forEach((node) => {
+			console.log(node.rank);
 				node.x0 = columnMap[node.rank];
 				node.x1 = node.x0 + sankeyGenerator.nodeWidth();
 
@@ -487,24 +486,24 @@ watch: {
 				.attr("stroke", "#000")
 				.attr("stroke-width", 1);
 
-			// // Function to highlight lineage
-			// const highlightLineage = (node) => {
-			// 	const lineageIds = new Set(node.lineage.map((n) => n.id));
-			// 	lineageIds.add(node.id);
-
-			// 	svg.selectAll("rect").style("opacity", (d) => (lineageIds.has(d.id) ? 1 : 0.2));
-			// 	svg.selectAll("path").style("opacity", (d) => (lineageIds.has(d.source.id) && lineageIds.has(d.target.id) ? 1 : 0.2));
-			// 	svg.selectAll(".label").style("opacity", (d) => (lineageIds.has(d.id) ? 1 : 0.1));
-			// 	svg.selectAll(".clade-reads").style("opacity", (d) => (lineageIds.has(d.id) ? 1 : 0.1));
-			// };
-
-			// // Function to reset highlight
-			// const resetHighlight = () => {
-			// 	svg.selectAll("rect").style("opacity", 1);
-			// 	svg.selectAll("path").style("opacity", 1);
-			// 	svg.selectAll(".label").style("opacity", 1);
-			// 	svg.selectAll(".clade-reads").style("opacity", 1);
-			// };
+			// Function to highlight lineage
+			const highlightLineage = (node) => {
+				const lineageIds = new Set(node.lineage.map((n) => n.id));
+				lineageIds.add(node.id);
+
+				svg.selectAll("rect").style("opacity", (d) => (lineageIds.has(d.id) ? 1 : 0.2));
+				svg.selectAll("path").style("opacity", (d) => (lineageIds.has(d.source.id) && lineageIds.has(d.target.id) ? 1 : 0.2));
+				svg.selectAll(".label").style("opacity", (d) => (lineageIds.has(d.id) ? 1 : 0.1));
+				svg.selectAll(".clade-reads").style("opacity", (d) => (lineageIds.has(d.id) ? 1 : 0.1));
+			};
+
+			// Function to reset highlight
+			const resetHighlight = () => {
+				svg.selectAll("rect").style("opacity", 1);
+				svg.selectAll("path").style("opacity", 1);
+				svg.selectAll(".label").style("opacity", 1);
+				svg.selectAll(".clade-reads").style("opacity", 1);
+			};
 
 			// // Define a clipping path for each link (crops out curve when links are too thick)
 			// svg
@@ -521,53 +520,53 @@ watch: {
 			// 	.attr("height", height);
 
 			// // Add links
-			// svg
-			// 	.append("g")
-			// 	.attr("fill", "none")
-			// 	.attr("stroke-opacity", 0.3)
-			// 	.selectAll("path")
-			// 	.data(graph.links)
-			// 	.enter()
-			// 	.append("path")
-			// 	.attr("d", d3sankey.sankeyLinkHorizontal())
-			// 	.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")
-			// 	.selectAll(".node-group")
-			// 	.data(graph.nodes)
-			// 	.enter()
-			// 	.append("g")
-			// 	.attr("class", (d) => "node-group taxid-" + d.id)
-			// 	.attr("transform", (d) => `translate(${d.x0}, ${d.y0})`)
-			// 	.on("mouseover", (event, d) => {
-			// 		highlightLineage(d);
-			// 		// Create the tooltip div
-			// 		select("body")
-			// 			.append("div")
-			// 			.attr("class", "tooltip")
-			// 			.html(
-			// 				`
-			// 				<div style="padding-top: 4px; padding-bottom: 4px; padding-left: 8px; padding-right: 8px;">
-			// 					<p style="font-size: 0.6rem; margin-bottom: 0px;">#${d.id}</p>
-			// 					<div style="display: flex; justify-content: space-between; align-items: center;">
-			// 						<div style="font-weight: bold; font-size: 0.875rem;">${d.name}</div>
-			// 						<span style="background-color: rgba(255, 167, 38, 0.25); color: #ffa726; font-weight: bold; padding: 4px 8px; border-radius: 12px; font-size: 0.875rem; margin-left: 10px;">${d.rank}</span>
-			// 					</div>
-			// 					<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>
-			// 				</div>
-			// 			`
-			// 			)
-			// 			.style("left", `${d.x + d.dx}px`)
-			// 			.style("top", `${d.y + window.scrollY}px`);
-			// 	})
+			svg
+				.append("g")
+				.attr("fill", "none")
+				.attr("stroke-opacity", 0.3)
+				.selectAll("path")
+				.data(graph.links)
+				.enter()
+				.append("path")
+				.attr("d", sankeyLinkHorizontal())
+				.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")
+				.selectAll(".node-group")
+				.data(graph.nodes)
+				.enter()
+				.append("g")
+				.attr("class", (d) => "node-group taxid-" + d.id)
+				.attr("transform", (d) => `translate(${d.x0}, ${d.y0})`)
+				.on("mouseover", (event, d) => {
+					highlightLineage(d);
+					// Create the tooltip div
+					d3.select("body")
+						.append("div")
+						.attr("class", "tooltip")
+						.html(
+							`
+							<div style="padding-top: 4px; padding-bottom: 4px; padding-left: 8px; padding-right: 8px;">
+								<p style="font-size: 0.6rem; margin-bottom: 0px;">#${d.id}</p>
+								<div style="display: flex; justify-content: space-between; align-items: center;">
+									<div style="font-weight: bold; font-size: 0.875rem;">${d.name}</div>
+									<span style="background-color: rgba(255, 167, 38, 0.25); color: #ffa726; font-weight: bold; padding: 4px 8px; border-radius: 12px; font-size: 0.875rem; margin-left: 10px;">${d.rank}</span>
+								</div>
+								<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>
+							</div>
+						`
+						)
+						.style("left", `${d.x + d.dx}px`)
+						.style("top", `${d.y + window.scrollY}px`);
+				})
 			// 	.on("mousemove", (event, d) => {
 			// 		// Move the tooltip as the mouse moves
 			// 		select(".tooltip")
@@ -588,45 +587,53 @@ watch: {
 			// 			selectAll(".taxid-" + d.id).classed("active", true);
 			// 			this.$emit("select", { name: d.name, id: d.id });
 			// 		}
-			// 	});
+			// 	})
+			;
+
+			// Create node rectangles
+			nodeGroup
+				.append("rect")
+				.attr("width", (d) => d.x1 - d.x0)
+				.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");
+
+			// Add node name labels next to node
+			nodeGroup
+				.append("text")
+				.attr("id", (d) => `nodeName-${d.id}`)
+				.attr("class", (d) => "label taxid-" + d.id)
+				.attr("x", (d) => d.x1 - d.x0 + 3)
+				.attr("y", (d) => (d.y1 - d.y0) / 2)
+				.attr("dy", "0.35em")
+				.attr("text-anchor", "start")
+				.text((d) => d.name)
+				.style("font-size", "9px")
+				.style("cursor", "pointer");
 
-			// // Create node rectangles
-			// nodeGroup
-			// 	.append("rect")
-			// 	.attr("width", (d) => d.x1 - d.x0)
-			// 	.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");
-
-			// // Add node name labels next to node
-			// nodeGroup
-			// 	.append("text")
-			// 	.attr("id", (d) => `nodeName-${d.id}`)
-			// 	.attr("class", (d) => "label taxid-" + d.id)
-			// 	.attr("x", (d) => d.x1 - d.x0 + 3)
-			// 	.attr("y", (d) => (d.y1 - d.y0) / 2)
-			// 	.attr("dy", "0.35em")
-			// 	.attr("text-anchor", "start")
-			// 	.text((d) => d.name)
-			// 	.style("font-size", "9px")
-			// 	.style("cursor", "pointer");
-
-			// // Add label above node (proportion/clade reads)
-			// nodeGroup
-			// 	.append("text")
-			// 	.attr("id", (d) => `cladeReads-${d.id}`)
-			// 	.attr("class", "clade-reads")
-			// 	.attr("x", (d) => (d.x1 - d.x0) / 2)
-			// 	.attr("y", -4)
-			// 	.attr("dy", "0.35em")
-			// 	.attr("text-anchor", "middle")
-			// 	.style("font-size", "9px")
-			// 	.text((d) => this.formatCladeReads(d.value))
-			// 	.style("cursor", "pointer");
+			// Add label above node (proportion/clade reads)
+			nodeGroup
+				.append("text")
+				.attr("id", (d) => `cladeReads-${d.id}`)
+				.attr("class", "clade-reads")
+				.attr("x", (d) => (d.x1 - d.x0) / 2)
+				.attr("y", -4)
+				.attr("dy", "0.35em")
+				.attr("text-anchor", "middle")
+				.style("font-size", "9px")
+				.text((d) => this.formatCladeReads(d.value))
+				.style("cursor", "pointer");
 
 			// // Highlight nodes matching search query
-			// // this.highlightNodes(this.searchQuery);
+			// this.highlightNodes(this.searchQuery);
+		},
+
+		formatCladeReads(value) {
+			if (value >= 1000) {
+				return `${(value / 1000).toFixed(2)}k`;
+			}
+			return value.toString();
 		},
 
 		isUnclassifiedTaxa(d) {
@@ -687,7 +694,7 @@ watch: {
 			// Listener for screen resizing event
 			// window.addEventListener("resize", this.updateDiagramWidth);
 
-			this.drawSankeyTest();
+			// this.drawSankeyTest();
 			// await this.updateSankey();
 		},
 		beforeUnmount() {

From 91574f1b61f85fb9850584533aabc711528544ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sunny=20=28SunJae=29=20Lee=20=EC=9D=B4=EC=84=A0=EC=9E=AC?=
 <snjlee58@gmail.com>
Date: Sun, 22 Dec 2024 23:09:28 +0900
Subject: [PATCH 4/9] Removed dummy data and fixed missing links

---
 frontend/SankeyDiagram.vue | 150 +++++++++----------------------------
 1 file changed, 36 insertions(+), 114 deletions(-)

diff --git a/frontend/SankeyDiagram.vue b/frontend/SankeyDiagram.vue
index 132b866..f73885e 100644
--- a/frontend/SankeyDiagram.vue
+++ b/frontend/SankeyDiagram.vue
@@ -1,8 +1,6 @@
 <template>
 	 <div class="sankey-container">
-        <svg ref="sankeyContainer" width="960" height="400"></svg>    
-		<!-- <svg ref="sankeySvg" width="600" height="300"></svg> -->
-			<!-- <pre v-if="rawData">{{ rawData }}</pre> -->
+        <svg ref="sankeyContainer" width="100%" height="500"></svg>    
         </div>
 </template>
 
@@ -23,20 +21,6 @@ export default {
 		}
     },
     data: () => ({
-		// sankeyData: {
-        //     nodes: [
-        //         { name: "Node A" },
-        //         { name: "Node B" },
-        //         { name: "Node C" },
-        //         { name: "Node D" }
-        //     ],
-        //     links: [
-        //         { source: 0, target: 1, value: 10 },
-        //         { source: 1, target: 2, value: 5 },
-        //         { source: 1, target: 3, value: 5 }
-        //     ]
-        // },
-
 		loading: false,
 
 		// Data for tooltip
@@ -126,75 +110,12 @@ watch: {
 				this.$nextTick(() => {
 					if (newValue) {
 					this.createSankey(newValue);
-                    // this.drawSankeyTest();
                 }
             });
 			},
 		},
     },
     methods: {
-		drawSankeyTest() {
-			// console.log("Raw Data:", this.rawData);
-            const svg = d3.select(this.$refs.sankeySvg);
-            const width = +svg.attr("width");
-            const height = +svg.attr("height");
-
-            // Clear any existing content
-            svg.selectAll("*").remove();
-
-            const sankeyGenerator = sankey()
-                .nodeAlign(sankeyJustify)
-                .nodeWidth(20)
-                .nodePadding(10)
-                .extent([
-                    [1, 1],
-                    [width - 1, height - 6]
-                ]);
-
-            const graph = sankeyGenerator({
-                nodes: this.sankeyData.nodes.map((d) => Object.assign({}, d)),
-                links: this.sankeyData.links.map((d) => Object.assign({}, d))
-            });
-
-            // Draw links
-            svg.append("g")
-                .attr("fill", "none")
-                .attr("stroke-opacity", 0.5)
-                .selectAll("path")
-                .data(graph.links)
-                .join("path")
-                .attr("d", sankeyLinkHorizontal())
-                .attr("stroke", "#555")
-                .attr("stroke-width", (d) => Math.max(1, d.width));
-
-            // Draw nodes
-            const node = svg.append("g")
-                .attr("stroke", "#000")
-                .selectAll("g")
-                .data(graph.nodes)
-                .join("g");
-
-            node.append("rect")
-                .attr("x", (d) => d.x0)
-                .attr("y", (d) => d.y0)
-                .attr("height", (d) => d.y1 - d.y0)
-                .attr("width", (d) => d.x1 - d.x0)
-                .attr("fill", "#1f77b4")
-                .attr("stroke", "#000");
-
-            node.append("text")
-                .attr("x", (d) => d.x0 - 6)
-                .attr("y", (d) => (d.y1 + d.y0) / 2)
-                .attr("dy", "0.35em")
-                .attr("text-anchor", "end")
-                .text((d) => d.name)
-                .attr("font-size", "10px")
-                .attr("fill", "#000")
-                .filter((d) => d.x0 < width / 2)
-                .attr("x", (d) => d.x1 + 6)
-                .attr("text-anchor", "start");
-        },
-
 		// Function for processing/parsing data
 		processRawData(data) {
 			if (!this.rawData || !Array.isArray(this.rawData)) {
@@ -209,7 +130,6 @@ watch: {
 
 			// Store nodes by rank from full data (for calculation of maxTaxaLimit)
 			nonClades.forEach((node) => {
-				console.log(node.rank);
 				if (!this.allNodesByRank[node.rank]) {
 					this.allNodesByRank[node.rank] = [];
 				}
@@ -220,7 +140,7 @@ watch: {
 			// this.updateConfigureMenu();
 		},
 		// Function for processing/parsing data
-		parseData(data, isFullGraph = false) {
+		parseData(data, isFullGraph = true) {
 			const nodes = [];
 			const unclassifiedNodes = [];
 			const allNodes = [];
@@ -249,8 +169,6 @@ watch: {
 					type: "",
 				};
 
-				console.log(node.taxon_id); // DEBUG
-
 				if (d.rank !== "no rank" && !this.isUnclassifiedTaxa(d)) {
 					// Declare type as 'classified'
 					node.type = "classified";
@@ -264,14 +182,18 @@ watch: {
 					// Include all ranks for lineage tracking
 					if (node.rank !== "clade") {
 						let lastLineageNode = currentLineage[currentLineage.length - 1];
-
 						if (lastLineageNode) {
-							while (lastLineageNode && rankHierarchyFull[node.rank] <= rankHierarchyFull[lastLineageNode.rank]) {
-								currentLineage.pop();
+
+							let currentRank = rankHierarchyFull[node.rank] ?? Infinity;
+							let lastRank = rankHierarchyFull[lastLineageNode.rank] ?? Infinity;
+								while (lastLineageNode && currentRank <= lastRank) {
+								const poppedNode = currentLineage.pop();
 								lastLineageNode = currentLineage[currentLineage.length - 1];
+
+								currentRank = rankHierarchyFull[node.rank] ?? Infinity;
+								lastRank = rankHierarchyFull[lastLineageNode.rank] ?? Infinity;
 							}
 						}
-
 						// Append current node to currentLineage array + store lineage data
 						currentLineage.push(node);
 						node.lineage = [...currentLineage];
@@ -330,7 +252,7 @@ watch: {
 					allNodes.push(...nodesByRank[rank]);
 
 					// Sort nodes by clade_reads in descending order and select the top nodes based on slider value
-					const topNodes = nodesByRank[rank].sort((a, b) => b.clade_reads - a.clade_reads).slice(0, isFullGraph ? nodesByRank[rank].length : this.taxaLimit); // Don't apply taxaLimit when parsing fullGraphData
+					const topNodes = nodesByRank[rank].sort((a, b) => b.clade_reads - a.clade_reads).slice(0, isFullGraph ? nodesByRank[rank].length : 10); // Don't apply taxaLimit when parsing fullGraphData
 					nodes.push(...topNodes);
 				}
 			});
@@ -405,10 +327,11 @@ watch: {
 			const container = this.$refs.sankeyContainer;
 			d3.select(container).selectAll("*").remove(); // Clear the previous diagram
 
-			const width = 960;
+			const width = 1160;
 			const height = 360;
 			const nodeWidth = 30;
-			const nodePadding = 13;
+			const nodePadding = 20;
+
 			const marginBottom = 50; // Margin for rank labels
 			const marginRight = 70;
 			const leftMargin = 10;
@@ -447,7 +370,6 @@ watch: {
 			}, {});
 
 			graph.nodes.forEach((node) => {
-			console.log(node.rank);
 				node.x0 = columnMap[node.rank];
 				node.x1 = node.x0 + sankeyGenerator.nodeWidth();
 
@@ -519,7 +441,7 @@ watch: {
 			// 	.attr("width", (d) => d.target.x0 - d.source.x1)
 			// 	.attr("height", height);
 
-			// // Add links
+			// Add links
 			svg
 				.append("g")
 				.attr("fill", "none")
@@ -567,27 +489,27 @@ watch: {
 						.style("left", `${d.x + d.dx}px`)
 						.style("top", `${d.y + window.scrollY}px`);
 				})
-			// 	.on("mousemove", (event, d) => {
-			// 		// Move the tooltip as the mouse moves
-			// 		select(".tooltip")
-			// 			.style("left", `${event.pageX + 10}px`)
-			// 			.style("top", `${event.pageY + 10}px`);
-			// 	})
-			// 	.on("mouseout", () => {
-			// 		resetHighlight();
-			// 		// Remove the tooltip when mouse leaves
-			// 		select(".tooltip").remove();
-			// 	})
-			// 	.on("click", (event, d) => {
-			// 		if (event.target.classList.contains("active")) {
-			// 			selectAll("rect.node, text.label").classed("active", false);
-			// 			this.$emit("select", null);
-			// 		} else {
-			// 			selectAll("rect.node, text.label").classed("active", false);
-			// 			selectAll(".taxid-" + d.id).classed("active", true);
-			// 			this.$emit("select", { name: d.name, id: d.id });
-			// 		}
-			// 	})
+				.on("mousemove", (event, d) => {
+					// Move the tooltip as the mouse moves
+					d3.select(".tooltip")
+						.style("left", `${event.pageX + 10}px`)
+						.style("top", `${event.pageY + 10}px`);
+				})
+				.on("mouseout", () => {
+					resetHighlight();
+					// Remove the tooltip when mouse leaves
+					d3.select(".tooltip").remove();
+				})
+				// .on("click", (event, d) => {
+				// 	if (event.target.classList.contains("active")) {
+				// 		selectAll("rect.node, text.label").classed("active", false);
+				// 		this.$emit("select", null);
+				// 	} else {
+				// 		selectAll("rect.node, text.label").classed("active", false);
+				// 		selectAll(".taxid-" + d.id).classed("active", true);
+				// 		this.$emit("select", { name: d.name, id: d.id });
+				// 	}
+				// })
 			;
 
 			// Create node rectangles

From f9b807bd666778f9a8c1168c2456ba227af3ef03 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sunny=20=28SunJae=29=20Lee=20=EC=9D=B4=EC=84=A0=EC=9E=AC?=
 <snjlee58@gmail.com>
Date: Sun, 22 Dec 2024 23:30:19 +0900
Subject: [PATCH 5/9] Adjusted size of sankey to fill screen width and handle
 responsive sizing

---
 frontend/SankeyDiagram.vue | 39 +++++++++++++++++++++++---------------
 1 file changed, 24 insertions(+), 15 deletions(-)

diff --git a/frontend/SankeyDiagram.vue b/frontend/SankeyDiagram.vue
index f73885e..22c5103 100644
--- a/frontend/SankeyDiagram.vue
+++ b/frontend/SankeyDiagram.vue
@@ -1,6 +1,6 @@
 <template>
 	 <div class="sankey-container">
-        <svg ref="sankeyContainer" width="100%" height="500"></svg>    
+        <svg ref="sankeyContainer"></svg>    
         </div>
 </template>
 
@@ -94,7 +94,6 @@ export default {
 }),
 watch: {
 	loading(newValue) {
-			// console.log("Loading state changed:", newValue); // DEBUG
 			if (!newValue) {
 				this.$nextTick(() => {
 					// Ensure the DOM is updated before creating the Sankey diagram.
@@ -320,15 +319,12 @@ watch: {
 			// // Check if nodes and links are not empty
 			if (!nodes.length || !links.length) {
 				console.warn("No data to create Sankey diagram");
-				// select(this.$refs.svg).classed("hide", true);
 				return;
 			}
 
 			const container = this.$refs.sankeyContainer;
 			d3.select(container).selectAll("*").remove(); // Clear the previous diagram
 
-			const width = 1160;
-			const height = 360;
 			const nodeWidth = 30;
 			const nodePadding = 20;
 
@@ -336,11 +332,13 @@ watch: {
 			const marginRight = 70;
 			const leftMargin = 10;
 
-			const svg = d3
-			.select(container)
-			.append("svg")
-			.attr("width", width)
-			.attr("height", height + marginBottom)
+			const width = container.parentElement.clientWidth; // Dynamically get parent width
+			const height = 360 + marginBottom; // Fixed height for now
+			
+			const svg = d3.select(container)
+			.attr("viewBox", `0 0 ${width} ${height}`)
+			.attr("width", "100%")
+			.attr("height", height)
 			.attr("id", this.id); // Set the id based on the prop for download reference
 
 			const sankeyGenerator = sankey()
@@ -353,6 +351,7 @@ watch: {
 					[10, 10],
 					[width - marginRight, height - 6],
 				]);
+
 			const graph = sankeyGenerator({
 				nodes: nodes.map((d) => Object.assign({}, d)),
 				links: links.map((d) => Object.assign({}, d)),
@@ -611,16 +610,21 @@ watch: {
 				lastCall = now;
 				return func(...args);
 			};
+		},
+		 onResize() {
+			if (this.rawData) {
+				this.drawSankey(this.rawData);
+			}
 		},
 		mounted() {
 			// Listener for screen resizing event
-			// window.addEventListener("resize", this.updateDiagramWidth);
+			window.addEventListener("resize", this.onResize);
 
 			// this.drawSankeyTest();
 			// await this.updateSankey();
 		},
 		beforeUnmount() {
-			// window.removeEventListener("resize", this.updateDiagramWidth);
+			window.removeEventListener("resize", this.onResize);
 		},
 	},
 }
@@ -629,13 +633,18 @@ watch: {
 
 <style scoped>
 .sankey-container {
-	/* display: flex; */
+	display: flex;
 	width: 100%;
-	height: 400px; /* Ensure it takes full viewport height */
+	height: auto; /* Ensure it takes full viewport height */
+}
+svg {
+  display: block; /* Prevent extra margins caused by inline SVG */
+  width: 100%;
+  height: auto;
 }
 .sankey-diagram {
 	width: 100%;
-	height: 400px;
+	height: auto;
 	padding-bottom: 32px;
 	overflow-x: scroll;
 	/* Hide horizontal scrollbar for IE, Edge and Firefox */

From 677a6b8852196a1763164fef7778715bd9f183ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sunny=20=28SunJae=29=20Lee=20=EC=9D=B4=EC=84=A0=EC=9E=AC?=
 <snjlee58@gmail.com>
Date: Mon, 23 Dec 2024 14:34:45 +0900
Subject: [PATCH 6/9] Added hover tooltip to sankey

---
 frontend/SankeyDiagram.vue | 46 +++++++++++++++++++++++---------------
 1 file changed, 28 insertions(+), 18 deletions(-)

diff --git a/frontend/SankeyDiagram.vue b/frontend/SankeyDiagram.vue
index 22c5103..5765175 100644
--- a/frontend/SankeyDiagram.vue
+++ b/frontend/SankeyDiagram.vue
@@ -464,13 +464,21 @@ watch: {
 				.attr("class", (d) => "node-group taxid-" + d.id)
 				.attr("transform", (d) => `translate(${d.x0}, ${d.y0})`)
 				.on("mouseover", (event, d) => {
+    				// Highlight the lineage
 					highlightLineage(d);
-					// Create the tooltip div
-					d3.select("body")
+
+					// Append tooltip to the body
+					const tooltip = d3.select("body")
 						.append("div")
 						.attr("class", "tooltip")
-						.html(
-							`
+						.style("position", "absolute")
+						.style("background-color", "rgba(38, 50, 56, 0.95)")
+						.style("color", "white")
+						.style("border-radius", "8px")
+						.style("padding", "10px")
+						.style("box-shadow", "0 2px 6px rgba(0, 0, 0, 0.1)")
+						.style("opacity", 1)
+						.html(`
 							<div style="padding-top: 4px; padding-bottom: 4px; padding-left: 8px; padding-right: 8px;">
 								<p style="font-size: 0.6rem; margin-bottom: 0px;">#${d.id}</p>
 								<div style="display: flex; justify-content: space-between; align-items: center;">
@@ -483,10 +491,12 @@ watch: {
 									<div style="margin-left: 10px;">${d.value}</div>
 								</div>
 							</div>
-						`
-						)
-						.style("left", `${d.x + d.dx}px`)
-						.style("top", `${d.y + window.scrollY}px`);
+						`);
+
+					// Position the tooltip
+					tooltip
+					.style("left", `${event.pageX + 10}px`)
+					.style("top", `${event.pageY + 10}px`);
 				})
 				.on("mousemove", (event, d) => {
 					// Move the tooltip as the mouse moves
@@ -499,16 +509,6 @@ watch: {
 					// Remove the tooltip when mouse leaves
 					d3.select(".tooltip").remove();
 				})
-				// .on("click", (event, d) => {
-				// 	if (event.target.classList.contains("active")) {
-				// 		selectAll("rect.node, text.label").classed("active", false);
-				// 		this.$emit("select", null);
-				// 	} else {
-				// 		selectAll("rect.node, text.label").classed("active", false);
-				// 		selectAll(".taxid-" + d.id).classed("active", true);
-				// 		this.$emit("select", { name: d.name, id: d.id });
-				// 	}
-				// })
 			;
 
 			// Create node rectangles
@@ -659,4 +659,14 @@ svg {
 svg.hide {
 	display: none;
 }
+/* Node Hover Tooltip */
+.tooltip {
+	position: absolute;
+	background-color: rgba(38, 50, 56, 0.95);
+	padding: 10px;
+	border-radius: 8px;
+	color: white;
+	pointer-events: none;
+	z-index: 1000;
+}
 </style>
\ No newline at end of file

From c5e8bb58f4fa92fe46e13a3d8cdacb74c48f095d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sunny=20=28SunJae=29=20Lee=20=EC=9D=B4=EC=84=A0=EC=9E=AC?=
 <snjlee58@gmail.com>
Date: Mon, 23 Dec 2024 14:44:14 +0900
Subject: [PATCH 7/9] Removed unneeded code

---
 frontend/SankeyDiagram.vue | 105 +++----------------------------------
 1 file changed, 8 insertions(+), 97 deletions(-)

diff --git a/frontend/SankeyDiagram.vue b/frontend/SankeyDiagram.vue
index 5765175..945a43b 100644
--- a/frontend/SankeyDiagram.vue
+++ b/frontend/SankeyDiagram.vue
@@ -11,9 +11,6 @@ import { rankOrderFull, sankeyRankColumns } from "./rankUtils";
 
 export default {
 	name: "SankeyDiagram",
-	components: {
-		// SankeyTooltip,
-	},
     props: {
         rawData: {
 			type: Array,
@@ -21,51 +18,11 @@ export default {
 		}
     },
     data: () => ({
-		loading: false,
-
-		// Data for tooltip
-			hoverDetails: {
-				visible: false,
-				data: {},
-			},
-			tooltipPosition: {
-				x: 0,
-				y: 0,
-			},
-
 		// Data for graph rendering
-		id: "testtest", // DEBUG
 		nonCladesRawData: null, // rawData with just clades filtered out
 		allNodesByRank: {},
 		rankOrderFull, // Imported from rankUtils
 		rankOrder: [...sankeyRankColumns, "no rank"],
-		fullRankOrder: [
-			"superkingdom",
-			"kingdom",
-			"subkingdom",
-			"superphylum",
-			"phylum",
-			"subphylum",
-			"superclass",
-			"class",
-			"subclass",
-			"superorder",
-			"order",
-			"suborder",
-			"infraorder",
-			"parvorder",
-			"superfamily",
-			"family",
-			"subfamily",
-			"supergenus",
-			"genus",
-			"subgenus",
-			"superspecies",
-			"species",
-			"subspecies",
-			"no rank",
-			"clade",
-		],
 		colors: [
 			"#57291F",
 			"#C0413B",
@@ -91,26 +48,16 @@ export default {
 			"#FFCD87",
 			"#BC7576",
 		],
-}),
-watch: {
-	loading(newValue) {
-			if (!newValue) {
-				this.$nextTick(() => {
-					// Ensure the DOM is updated before creating the Sankey diagram.
-					// Runs Only When the Container is Available.
-					this.createSankey();
-				});
-			}
-		},
-        rawData: {
+	}),
+	watch: {
+		rawData: {
 			immediate: true,
 			handler(newValue) {
-				// this.loading = true;
 				this.$nextTick(() => {
 					if (newValue) {
-					this.createSankey(newValue);
-                }
-            });
+						this.createSankey(newValue);
+					}
+				});
 			},
 		},
     },
@@ -134,9 +81,6 @@ watch: {
 				}
 				this.allNodesByRank[node.rank].push(node);
 			});
-
-			// Update the configure menu with the maximum taxa per rank
-			// this.updateConfigureMenu();
 		},
 		// Function for processing/parsing data
 		parseData(data, isFullGraph = true) {
@@ -327,10 +271,8 @@ watch: {
 
 			const nodeWidth = 30;
 			const nodePadding = 20;
-
 			const marginBottom = 50; // Margin for rank labels
 			const marginRight = 70;
-			const leftMargin = 10;
 
 			const width = container.parentElement.clientWidth; // Dynamically get parent width
 			const height = 360 + marginBottom; // Fixed height for now
@@ -338,8 +280,7 @@ watch: {
 			const svg = d3.select(container)
 			.attr("viewBox", `0 0 ${width} ${height}`)
 			.attr("width", "100%")
-			.attr("height", height)
-			.attr("id", this.id); // Set the id based on the prop for download reference
+			.attr("height", height);
 
 			const sankeyGenerator = sankey()
 				.nodeId((d) => d.id)
@@ -545,9 +486,6 @@ watch: {
 				.style("font-size", "9px")
 				.text((d) => this.formatCladeReads(d.value))
 				.style("cursor", "pointer");
-
-			// // Highlight nodes matching search query
-			// this.highlightNodes(this.searchQuery);
 		},
 
 		formatCladeReads(value) {
@@ -575,30 +513,6 @@ watch: {
 			return true;
 		},
 
-		// Functions for rerendering/updating Sankey
-		async updateSankey() {
-			// Start loading, show loading display
-			this.loading = true;
-
-			try {
-				// await this.fetchSankey();
-			} catch (error) {
-				console.error("Error in updateSankey:", error);
-			} finally {
-				setTimeout(() => {
-					this.loading = false;
-				}, 100); // Small delay to ensure DOM updates
-			}
-		},
-		async fetchSankey() {
-			await new Promise((resolve) => {
-				setTimeout(() => {
-					this.createSankey(); // Create the Sankey diagram immediately after getting data
-					resolve();
-				}, 50); // Immediate execution after fetching data
-			});
-		},
-
 		// Throttle function (used for improving performance during node hover)
 		throttle(func, delay) {
 			let lastCall = 0;
@@ -611,7 +525,7 @@ watch: {
 				return func(...args);
 			};
 		},
-		 onResize() {
+		onResize() {
 			if (this.rawData) {
 				this.drawSankey(this.rawData);
 			}
@@ -619,9 +533,6 @@ watch: {
 		mounted() {
 			// Listener for screen resizing event
 			window.addEventListener("resize", this.onResize);
-
-			// this.drawSankeyTest();
-			// await this.updateSankey();
 		},
 		beforeUnmount() {
 			window.removeEventListener("resize", this.onResize);

From 5051a196cd88546cb49f169ba38a0c4405581ac7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sunny=20=28SunJae=29=20Lee=20=EC=9D=B4=EC=84=A0=EC=9E=AC?=
 <snjlee58@gmail.com>
Date: Mon, 23 Dec 2024 14:55:06 +0900
Subject: [PATCH 8/9] Added d3 sankey dependencies

---
 package-lock.json | 826 +++++++++++++++++++++++++++++++++++++++++++++-
 package.json      |   4 +
 2 files changed, 822 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 31b903b..97aa259 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,13 +1,17 @@
 {
   "name": "mmseqs-app",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "mmseqs-app",
-      "version": "1.7.0",
+      "version": "1.8.0",
       "license": "GPL-3.0-or-later",
+      "dependencies": {
+        "d3": "^7.9.0",
+        "d3-sankey": "^0.12.3"
+      },
       "devDependencies": {
         "@babel/core": "^7.22.11",
         "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
@@ -5056,6 +5060,456 @@
         "node": ">=4"
       }
     },
+    "node_modules/d3": {
+      "version": "7.9.0",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-7.9.0.tgz",
+      "integrity": "sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "3",
+        "d3-axis": "3",
+        "d3-brush": "3",
+        "d3-chord": "3",
+        "d3-color": "3",
+        "d3-contour": "4",
+        "d3-delaunay": "6",
+        "d3-dispatch": "3",
+        "d3-drag": "3",
+        "d3-dsv": "3",
+        "d3-ease": "3",
+        "d3-fetch": "3",
+        "d3-force": "3",
+        "d3-format": "3",
+        "d3-geo": "3",
+        "d3-hierarchy": "3",
+        "d3-interpolate": "3",
+        "d3-path": "3",
+        "d3-polygon": "3",
+        "d3-quadtree": "3",
+        "d3-random": "3",
+        "d3-scale": "4",
+        "d3-scale-chromatic": "3",
+        "d3-selection": "3",
+        "d3-shape": "3",
+        "d3-time": "3",
+        "d3-time-format": "4",
+        "d3-timer": "3",
+        "d3-transition": "3",
+        "d3-zoom": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-axis": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
+      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-brush": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-3.0.0.tgz",
+      "integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "3",
+        "d3-transition": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-chord": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-3.0.1.tgz",
+      "integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-contour": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-4.0.2.tgz",
+      "integrity": "sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "^3.2.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==",
+      "license": "ISC",
+      "dependencies": {
+        "delaunator": "5"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dsv": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz",
+      "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
+      "license": "ISC",
+      "dependencies": {
+        "commander": "7",
+        "iconv-lite": "0.6",
+        "rw": "1"
+      },
+      "bin": {
+        "csv2json": "bin/dsv2json.js",
+        "csv2tsv": "bin/dsv2dsv.js",
+        "dsv2dsv": "bin/dsv2dsv.js",
+        "dsv2json": "bin/dsv2json.js",
+        "json2csv": "bin/json2dsv.js",
+        "json2dsv": "bin/json2dsv.js",
+        "json2tsv": "bin/json2dsv.js",
+        "tsv2csv": "bin/dsv2dsv.js",
+        "tsv2json": "bin/dsv2json.js"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dsv/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-fetch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-3.0.1.tgz",
+      "integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dsv": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-force": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
+      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-quadtree": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-geo": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.1.tgz",
+      "integrity": "sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.5.0 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-hierarchy": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
+      "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-polygon": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-3.0.1.tgz",
+      "integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-quadtree": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-random": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz",
+      "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-sankey": {
+      "version": "0.12.3",
+      "resolved": "https://registry.npmjs.org/d3-sankey/-/d3-sankey-0.12.3.tgz",
+      "integrity": "sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-array": "1 - 2",
+        "d3-shape": "^1.2.0"
+      }
+    },
+    "node_modules/d3-sankey/node_modules/d3-array": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+      "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "internmap": "^1.0.0"
+      }
+    },
+    "node_modules/d3-sankey/node_modules/d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-sankey/node_modules/d3-shape": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+      "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-path": "1"
+      }
+    },
+    "node_modules/d3-sankey/node_modules/internmap": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+      "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==",
+      "license": "ISC"
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/dashdash": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
@@ -5399,6 +5853,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/delaunator": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.1.tgz",
+      "integrity": "sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==",
+      "license": "ISC",
+      "dependencies": {
+        "robust-predicates": "^3.0.2"
+      }
+    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -7866,7 +8329,6 @@
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "dev": true,
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
       },
@@ -8218,6 +8680,15 @@
       "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
       "dev": true
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/interpret": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/interpret/-/interpret-2.2.0.tgz",
@@ -10953,6 +11424,12 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/robust-predicates": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
+      "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==",
+      "license": "Unlicense"
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -10976,6 +11453,12 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
@@ -10985,8 +11468,7 @@
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "node_modules/sanitize-filename": {
       "version": "1.6.3",
@@ -17428,6 +17910,313 @@
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
       "dev": true
     },
+    "d3": {
+      "version": "7.9.0",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-7.9.0.tgz",
+      "integrity": "sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==",
+      "requires": {
+        "d3-array": "3",
+        "d3-axis": "3",
+        "d3-brush": "3",
+        "d3-chord": "3",
+        "d3-color": "3",
+        "d3-contour": "4",
+        "d3-delaunay": "6",
+        "d3-dispatch": "3",
+        "d3-drag": "3",
+        "d3-dsv": "3",
+        "d3-ease": "3",
+        "d3-fetch": "3",
+        "d3-force": "3",
+        "d3-format": "3",
+        "d3-geo": "3",
+        "d3-hierarchy": "3",
+        "d3-interpolate": "3",
+        "d3-path": "3",
+        "d3-polygon": "3",
+        "d3-quadtree": "3",
+        "d3-random": "3",
+        "d3-scale": "4",
+        "d3-scale-chromatic": "3",
+        "d3-selection": "3",
+        "d3-shape": "3",
+        "d3-time": "3",
+        "d3-time-format": "4",
+        "d3-timer": "3",
+        "d3-transition": "3",
+        "d3-zoom": "3"
+      }
+    },
+    "d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "requires": {
+        "internmap": "1 - 2"
+      }
+    },
+    "d3-axis": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
+      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw=="
+    },
+    "d3-brush": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-3.0.0.tgz",
+      "integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==",
+      "requires": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "3",
+        "d3-transition": "3"
+      }
+    },
+    "d3-chord": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-3.0.1.tgz",
+      "integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==",
+      "requires": {
+        "d3-path": "1 - 3"
+      }
+    },
+    "d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA=="
+    },
+    "d3-contour": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-4.0.2.tgz",
+      "integrity": "sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==",
+      "requires": {
+        "d3-array": "^3.2.0"
+      }
+    },
+    "d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==",
+      "requires": {
+        "delaunator": "5"
+      }
+    },
+    "d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg=="
+    },
+    "d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "requires": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      }
+    },
+    "d3-dsv": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz",
+      "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
+      "requires": {
+        "commander": "7",
+        "iconv-lite": "0.6",
+        "rw": "1"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+          "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw=="
+        }
+      }
+    },
+    "d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w=="
+    },
+    "d3-fetch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-3.0.1.tgz",
+      "integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
+      "requires": {
+        "d3-dsv": "1 - 3"
+      }
+    },
+    "d3-force": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
+      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
+      "requires": {
+        "d3-dispatch": "1 - 3",
+        "d3-quadtree": "1 - 3",
+        "d3-timer": "1 - 3"
+      }
+    },
+    "d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA=="
+    },
+    "d3-geo": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.1.tgz",
+      "integrity": "sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==",
+      "requires": {
+        "d3-array": "2.5.0 - 3"
+      }
+    },
+    "d3-hierarchy": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
+      "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA=="
+    },
+    "d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "requires": {
+        "d3-color": "1 - 3"
+      }
+    },
+    "d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ=="
+    },
+    "d3-polygon": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-3.0.1.tgz",
+      "integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg=="
+    },
+    "d3-quadtree": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw=="
+    },
+    "d3-random": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz",
+      "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ=="
+    },
+    "d3-sankey": {
+      "version": "0.12.3",
+      "resolved": "https://registry.npmjs.org/d3-sankey/-/d3-sankey-0.12.3.tgz",
+      "integrity": "sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==",
+      "requires": {
+        "d3-array": "1 - 2",
+        "d3-shape": "^1.2.0"
+      },
+      "dependencies": {
+        "d3-array": {
+          "version": "2.12.1",
+          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+          "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+          "requires": {
+            "internmap": "^1.0.0"
+          }
+        },
+        "d3-path": {
+          "version": "1.0.9",
+          "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+          "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
+        },
+        "d3-shape": {
+          "version": "1.3.7",
+          "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+          "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+          "requires": {
+            "d3-path": "1"
+          }
+        },
+        "internmap": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+          "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw=="
+        }
+      }
+    },
+    "d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "requires": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      }
+    },
+    "d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
+      "requires": {
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
+      }
+    },
+    "d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ=="
+    },
+    "d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "requires": {
+        "d3-path": "^3.1.0"
+      }
+    },
+    "d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "requires": {
+        "d3-array": "2 - 3"
+      }
+    },
+    "d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "requires": {
+        "d3-time": "1 - 3"
+      }
+    },
+    "d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA=="
+    },
+    "d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "requires": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      }
+    },
+    "d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "requires": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      }
+    },
     "dashdash": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
@@ -17697,6 +18486,14 @@
         "slash": "^3.0.0"
       }
     },
+    "delaunator": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.1.tgz",
+      "integrity": "sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==",
+      "requires": {
+        "robust-predicates": "^3.0.2"
+      }
+    },
     "delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -19593,7 +20390,6 @@
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "dev": true,
       "requires": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
       }
@@ -19827,6 +20623,11 @@
       "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
       "dev": true
     },
+    "internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg=="
+    },
     "interpret": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/interpret/-/interpret-2.2.0.tgz",
@@ -21911,6 +22712,11 @@
         "sprintf-js": "^1.1.2"
       }
     },
+    "robust-predicates": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
+      "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg=="
+    },
     "run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -21920,6 +22726,11 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
+    },
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
@@ -21929,8 +22740,7 @@
     "safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "sanitize-filename": {
       "version": "1.6.3",
diff --git a/package.json b/package.json
index efee910..d72bc38 100644
--- a/package.json
+++ b/package.json
@@ -146,5 +146,9 @@
     "webpack-dev-server": "^4.15.1",
     "webpack-hot-middleware": "^2.25.4",
     "webpack-subresource-integrity": "^5.1.0"
+  },
+  "dependencies": {
+    "d3": "^7.9.0",
+    "d3-sankey": "^0.12.3"
   }
 }

From 3bd120c405352584422e29d68664b336cee1227a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sunny=20=28SunJae=29=20Lee=20=EC=9D=B4=EC=84=A0=EC=9E=AC?=
 <snjlee58@gmail.com>
Date: Thu, 26 Dec 2024 14:59:00 +0900
Subject: [PATCH 9/9] Resolved PR review comments

Changes:
- Return empty taxonomy report if file doesn't exist (error)
- Fixed file path for taxonomy report
- Hide sankey when hits is null
---
 backend/alignment.go    | 23 +++++++++--------------
 frontend/ResultView.vue |  3 ++-
 2 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/backend/alignment.go b/backend/alignment.go
index 4f7bce1..20c510a 100644
--- a/backend/alignment.go
+++ b/backend/alignment.go
@@ -332,11 +332,8 @@ func ReadAlignments[T any, U interface{ ~uint32 | ~int64 }](id Id, entries []U,
 		reader.Delete()
 
 		// Read the taxonomy report
-        taxonomyReportPath := filepath.Join(base, "alis_afsp_report")
-        taxonomyReport, err := ReadTaxonomyReport(taxonomyReportPath)
-        if err != nil {
-            return res, err
-        }
+        taxonomyReportPath := filepath.Join(base, "alis_" + db + "_report")
+        taxonomyReport, _ := ReadTaxonomyReport(taxonomyReportPath)
 
 		base := filepath.Base(name)
 		res = append(res, SearchResult{
@@ -352,7 +349,8 @@ func ReadAlignments[T any, U interface{ ~uint32 | ~int64 }](id Id, entries []U,
 func ReadTaxonomyReport(filePath string) ([]TaxonomyReport, error) {
     file, err := os.Open(filePath)
     if err != nil {
-        return nil, err
+        // Return an empty report for any error
+        return []TaxonomyReport{}, nil
     }
     defer file.Close()
 
@@ -363,23 +361,24 @@ func ReadTaxonomyReport(filePath string) ([]TaxonomyReport, error) {
         line := scanner.Text()
         fields := strings.Split(line, "\t")
         if len(fields) < 6 {
-            return nil, err
+			// Skip invalid lines
+            continue
         }
 
         // Parse the fields
         proportion, err := strconv.ParseFloat(fields[0], 64)
         if err != nil {
-            return nil, err
+            continue
         }
 
         cladeReads, err := strconv.Atoi(fields[1])
         if err != nil {
-            return nil, err
+            continue
         }
 
         taxonReads, err := strconv.Atoi(fields[2])
         if err != nil {
-            return nil, err
+            continue
         }
 
         report := TaxonomyReport{
@@ -393,10 +392,6 @@ func ReadTaxonomyReport(filePath string) ([]TaxonomyReport, error) {
         reports = append(reports, report)
     }
 
-    if err := scanner.Err(); err != nil {
-        return nil, err
-    }
-
     return reports, nil
 }
 
diff --git a/frontend/ResultView.vue b/frontend/ResultView.vue
index c0eb647..faeac32 100644
--- a/frontend/ResultView.vue
+++ b/frontend/ResultView.vue
@@ -96,6 +96,7 @@
                         <h2 style="margin-top: 0.5em; margin-bottom: 1em; display: inline-block;">
                             <span style="text-transform: uppercase;">{{ entry.db }}</span> <small>{{ entry.alignments ? Object.values(entry.alignments).length : 0 }} hits</small>
                         </h2>
+                        
                         <v-btn-toggle mandatory v-model="tableMode" class="ml-auto">
                             <v-btn>
                                 Graphical
@@ -106,7 +107,7 @@
                             </v-btn>
                         </v-btn-toggle>
                     </v-flex>
-                    <v-flex>
+                    <v-flex v-if="hits.results && hits.results[0].taxonomyreport">
                         <SankeyDiagram :rawData="hits.results[0].taxonomyreport"></SankeyDiagram>
                     </v-flex>
                     <table class="v-table result-table" style="position:relativ; margin-bottom: 3em;">