JSFiddle - React, Tailwind, and code Playground

by emepyc

CSS

label {
    font: 12px sans-serif;
}
.node circle {
    fill: #fff;
    stroke: steelblue;
    stroke-width: 1.5px;
}
.node {
    font: 10px sans-serif;
}
.link {
    fill: none;
    stroke: tan;
    stroke-width: 1.5px;
}

JavaScript

//newick1="((human:1,gorilla:1,chimp:1)anc1:1)";
var newick1 = "((human:1,chimp:1)anc1:1,gorilla:1)anc2:1";
//var newick2 = "(human:1,((a1:1,ja:1)c:1,gorilla:1)anc3:1)anc2:1";
//var newick2 = "((human:1,chimp:1)anc1:1,((a1:1,ja:1)c:1,gorilla:1)anc3:1)anc2:1"
//var newick2 = "((human:1,chimp:1)anc1:1,(gorilla:1,other:1)anc3:1)anc2:1";
var newick2 = "((human:1,chimp:1)anc1:1,(((sp1:1,sp2:1)a1:1,ja:1)c:1,gorilla:1)anc3:1)anc2:1";

var nexter = function () {
    var pos = 0;
    var n = function () {
        return pos++;
    };
    return n;
};
var next = nexter();

var apply = function(mytree, cbak) {
	if (mytree === undefined) {
	    return;
	}
    cbak(mytree);
	if (mytree.branchset !== undefined) {
	    for (var i=0; i<mytree.branchset.length; i++) {
            apply(mytree.branchset[i], cbak);
	    }
	}
	return;
};

var find_node_by_name = function(mytree, name) {
    if (mytree.name === name) {
	    return mytree;
	}
	if (mytree.branchset === undefined) {
	    return;
	}
	for (var i=0; i<mytree.branchset.length; i++) {
	    var node = find_node_by_name(mytree.branchset[i], name);
	    if (node !== undefined) {
		return node;
	    }
	}
};

var mark_links = function (tree) {
    apply(tree, function(d,i){ d.__linkid = next()});
};

var resolve_links = function (tree2, tree1) {
    apply(tree2, function(d) {
        var node = find_node_by_name(tree1, d.name);
        if((node !== undefined) && (node.__linkid !== undefined)) {
            d.__linkid = node.__linkid;
        }
    });
    apply(tree2, function(d) {
        if ((d.parent !== undefined) &&
            (d.parent.__linkid === undefined) &&
            (d.__linkid !== undefined)) {
            d.parent.__linkid = d.__linkid;
            console.log("** We set " + d.parent.name + " to " + d.parent.__linkid + "(" + d.__linkid + ")");
            d.__linkid = undefined;
//            resolve_links(d.parent, tree1);
        }
    });
    apply(tree2, function(d) {
        if (d.__linkid === undefined) {
 ...