working

src/App.jsx

@@ -2,7 +2,7 @@ import "./App.css";
 import React, { useEffect, useState, useCallback ,useMemo} from "react";
 import Deck from "./Deck";
 import SearchPanel from "./components/SearchPanel";
-import axios from "axios";
+//import axios from "axios";
 import AboutOverlay from "./components/AboutOverlay";
 import { BrowserRouter as Router } from "react-router-dom";
 import { CgListTree } from "react-icons/cg";
@@ -59,11 +59,17 @@ function App() {
 
   useEffect(() => {
     const tree = window.kn_parse(window.newick)
+
+    window.kn_reorder(tree,tree.root)
+    tree.node_order = window.kn_expand_node(tree,tree.root)
     window.kn_calxy(tree,true)
-    tree.ids = [...Array(tree.x.length).keys()];
-    tree.x=tree.x.map(x=>10*(x+0.1))
-    tree.y=tree.y.map(x=>10*(x+0.1))
     window.tree=tree
+
+    tree.x=tree.x.map(a=>15*(a+0.1))
+    tree.y=tree.y.map(a=>30*(a+0.1))
+    //tree.names=tree.node.map(a=>a.name)
+    tree.ids = [...Array(tree.names.length).keys()];
+    //tree.parents=tree.node.map(a=>tree.node.findIndex(x=>x===a))
     setNodeData({ status: "loaded", data: {node_data:tree} });
   }, [nodeData.status]);
 

src/Deck.jsx

@@ -131,10 +131,10 @@ function toRGB(string) {
   }
   return rgb;
 }
-function toRGBCSS(string) {
+/*function toRGBCSS(string) {
   const output = toRGB(string);
   return `rgb(${output[0]},${output[1]},${output[2]})`;
-}
+}*/
 
 let getMMatrix = (zoom) => [
   1 / 2 ** (zoom - 5.6),
@@ -564,7 +564,8 @@ function Deck({ data, colourBy, progress, setSelectedNode,scatterIds,search_conf
 
   const hoverStuff = useMemo(() => {
     if (hoverInfo && hoverInfo.object) {
-      const lineage =
+      return <>{hoverInfo.object}</>
+      /*const lineage =
         data.lineage_mapping[node_data.lineages[hoverInfo.object]];
       const country =
         data.country_mapping[node_data.countries[hoverInfo.object]];
@@ -604,8 +605,8 @@ function Deck({ data, colourBy, progress, setSelectedNode,scatterIds,search_conf
           </div>
         </div>
       );
-    }
-  }, [data, node_data, hoverInfo]);
+    */}
+  }, [hoverInfo]);
   const spinnerShown = useMemo(() => node_data.ids.length === 0, [node_data]);
 
 

src/helpers/tree.js

@@ -97,9 +97,10 @@ function kn_calxy(tree, is_real) {
     // calculate y
     scale = tree.n_tips - 1;
     for (i = j = 0; i < tree.names.length; ++i) {
-        tree.y[i] = (tree.children[i].length && !tree.hidden[i]) ? (tree.y[tree.children[i][0]] + tree.y[tree.children[i][tree.children[i].length - 1]]) / 2.0 : (j++) / scale;
-        if (tree.children[i].length == 0) tree.miny[i] = tree.maxy[i] = tree.y[i];
-        else tree.miny[i] = tree.miny[tree.children[i][0]], tree.maxy[i] = tree.maxy[tree.children[i][tree.children[i].length - 1]];
+
+        tree.y[tree.node_order[i]] = (tree.children[tree.node_order[i]].length && !tree.hidden[tree.node_order[i]]) ? (tree.y[tree.children[tree.node_order[i]][0]] + tree.y[tree.children[tree.node_order[i]][tree.children[tree.node_order[i]].length - 1]]) / 2.0 : (j++) / scale;
+        if (tree.children[tree.node_order[i]].length == 0) tree.miny[tree.node_order[i]] = tree.maxy[tree.node_order[i]] = tree.y[tree.node_order[i]];
+        else tree.miny[tree.node_order[i]] = tree.miny[tree.children[tree.node_order[i]][0]], tree.maxy[tree.node_order[i]] = tree.maxy[tree.children[tree.node_order[i]][tree.children[tree.node_order[i]].length - 1]];
     }
     // calculate x
     if (is_real) { // use branch length
@@ -135,7 +136,7 @@ function kn_expand_node(tree, root) {
 	for (; ;) {
 		while (stack[stack.length - 1].i != tree.children[stack[stack.length - 1].p].length && !tree.hidden[stack[stack.length - 1].p]) {
 			var q = stack[stack.length - 1];
-			stack.push({ p: q.p.child[q.i], i: 0 });
+			stack.push({ p: tree.children[q.p][q.i], i: 0 });
 		}
 		node.push(stack.pop().p);
 		if (stack.length > 0) ++stack[stack.length - 1].i;
@@ -149,15 +150,18 @@ function kn_reorder(tree, root) {
     depths = {}
     tip_numbers = {}
     weights = {}
+    window.weights=weights
+    window.tip_numbers =tip_numbers
 	sort_leaf = function (a, b) {
 		if (depths[a] < depths[b]) return 1;
 		if (depths[a] > depths[b]) return -1;
 		return String(tree.names[a]) < String(tree.names[b]) ? -1 : String(tree.names[a]) > String(tree.names[b]) ? 1 : 0;
 	};
-	sort_weight = function (a, b) { return tree.weights[a] / tree.tip_numbers[a] - tree.weights[b] / tree.tip_numbers[b]; };
-
+	sort_weight = function (a, b) { return weights[a] / tip_numbers[a] - weights[b] / tip_numbers[b]; };
+    console.log("yp")
 	var x = new Array();
-	var i, node = kn_expand_node(root);
+	var i, node = kn_expand_node(tree,root);
+    window.node= node
 	// get depth
 	depths[node.length - 1] = 0;
 	for (i = node.length - 2; i >= 0; --i) {
@@ -167,26 +171,29 @@ function kn_reorder(tree, root) {
 	}
 	// set weight for leaves
 	x.sort(sort_leaf);
-	for (i = 0; i < x.length; ++i) x[i].weight = i, x[i].n_tips = 1;
+	for (i = 0; i < x.length; ++i) weights[x[i]] = i, tip_numbers[x[i]] = 1;
 	// set weight for internal nodes
 	for (i = 0; i < node.length; ++i) {
 		var q = node[i];
-		if (q.child.length) { // internal
+		if (tree.children[q].length) { // internal
 			var j, n = 0, w = 0;
-			for (j = 0; j < q.child.length; ++j) {
-				n += q.child[j].n_tips;
-				w += q.child[j].weight;
+			for (j = 0; j < tree.children[q].length; ++j) {
+				n += tip_numbers[tree.children[q][j]];
+				w += weights[tree.children[q][j]];
 			}
-			q.n_tips = n; q.weight = w;
+			tip_numbers[q] = n; weights[q] = w;
 		}
 	}
 	// swap children
 	for (i = 0; i < node.length; ++i)
-		if (node[i].child.length >= 2)
-			node[i].child.sort(sort_weight);
+		if (tree.children[node[i]].length >= 2)
+			tree.children[node[i]].sort(sort_weight);
+    console.log("node",node)
+    console.log("weight",weights)
 }
 
 
 window.kn_expand_node = kn_expand_node
+window.kn_reorder = kn_reorder
 window.kn_parse = kn_parse;
 window.kn_calxy = kn_calxy