@euphrasiologist/lwphylo 1.4.0 → 1.5.0

package/README.md

@@ -10,16 +10,17 @@ Visit https://euphrasiologist.github.io/lwPhylo/ to see examples and live render
 
 Newick trees can be parsed using the `readTree()` function. This object can then be wrapped in three main functions; `rectangleLayout()` to produce a "regular" phylogenetic tree, `radialLayout()` to produce a circular phylogeny, and `unrooted()` to produce an unrooted tree via the equal angle layout algorithm.
 
-Need a tree to experiment with? `randomTree(nTips, { maxBranchLength, labelPrefix, seed })` generates a random bifurcating tree in the same node shape as `readTree()`, ready to pass straight into any of the layout functions. `toNewick(tree)` serializes one of these parsed tree objects back to a Newick string, so it can be handed to `drawPhylogeny()` (which expects Newick text): `drawPhylogeny(toNewick(randomTree(20)))`.
+Need a tree to experiment with? `randomTree(nTips, { maxBranchLength, labelPrefix, seed })` generates a random bifurcating tree in the same node shape as `readTree()`, ready to pass straight into any of the layout functions. `toNewick(tree)` serializes one of these parsed tree objects back to a Newick string.
 
 `ladderize(tree, { ascending })` and `rotate(tree, nodeId)` change tip order by reordering a node's children in place — ladderize sorts every clade by descendant tip count (smallest first by default), rotate flips the child order at one node (the root, if no id is given).
 
-`drawPhylogeny(newick, options)` accepts, in addition to `layout`/`width`/`height`/`tipLabels`/`labelFontSize`/`highlightTips`:
+`drawPhylogeny(input, options)` accepts either a Newick string or an already-parsed tree object (from `readTree()`/`randomTree()`) as `input`. Passing the same parsed tree object back in across re-renders — e.g. after mutating it with `rotate()` — keeps node ids stable, which `onNodeClick` (below) relies on. Options, in addition to `layout`/`width`/`height`/`tipLabels`/`labelFontSize`/`highlightTips`:
 - `tipRadius` — px radius of tip circles.
 - `internalNodeCircles` (bool) + `internalNodeRadius` — draw a circle at every internal node.
 - `nodeLabels` (bool) + `nodeLabelFontSize` — draw text labels (e.g. clade/support values) at internal nodes that have one.
 - `scaleBar` — `true` for an auto-sized branch-length scale bar, a number for an explicit length in branch-length units, or `{ length, x, y, label }` for full control.
 - `alignTipLabels` (bool, rect & radial layouts) — align tip labels to a common column/ring, with dashed guide lines back to each tip's true position.
+- `onNodeClick(node, event)` — fires when an internal node circle is clicked (requires `internalNodeCircles: true`). Combine with `rotate()` for click-to-rotate: `onNodeClick: (node) => { rotate(tree, node.thisId); redraw(); }`.
 
 ### Acknowledgements
 

package/dist/drawPhylogeny.cjs

@@ -946,8 +946,12 @@ function addScaleBar(svg, { scale, basis, defaultX, defaultY, scaleBar, fontSize
     .text(opts.label ?? String(length));
 }
 
+// input: a Newick string, or an already-parsed tree (the node shape returned
+// by readTree()/randomTree()). Passing the same parsed tree object back in
+// across re-renders (e.g. after mutating it with rotate()) keeps node ids
+// stable, which onNodeClick below relies on.
 function drawPhylogeny(
-  treeText,
+  input,
   {
     layout = "rect", // rect/radial/unrooted
     width = 800,
@@ -965,6 +969,7 @@ function drawPhylogeny(
     nodeLabelFontSize, // defaults to labelFontSize
     scaleBar = false, // false | true | number (branch-length units) | { length, x, y, label }
     alignTipLabels = false, // rect & radial only: align tip labels to a common column/ring, with dashed guide lines back to the true tip position
+    onNodeClick, // (node, event) => void — fires when an internal node circle is clicked (requires internalNodeCircles: true)
     showTooltips = true,
     tooltipFormatter = (d, rtt) =>
       `${d.thisLabel ?? "(unnamed)"}\nroot→tip: ${(+rtt).toFixed(4)}`,
@@ -979,6 +984,9 @@ function drawPhylogeny(
   // shared helpers
   const isNumber = (x) => typeof x === "number" && Number.isFinite(x);
   const nodeLabelSize = nodeLabelFontSize ?? labelFontSize;
+  const parsedTree = (input && typeof input === "object" && Array.isArray(input.children))
+    ? input
+    : readTree(input);
   // Works for both radial (uses `r`) and rect (uses `x1`).
   // Falls back to summing branchLength up to the root if neither is present.
   function makeRootToTipGetter(byId, { prefer = "auto" } = {}) {
@@ -1007,7 +1015,7 @@ function drawPhylogeny(
 
   if (layout === "rect") {
     // RECTANGULAR LAYOUT
-    const tree_df = rectangleLayout(readTree(treeText));
+    const tree_df = rectangleLayout(parsedTree);
     const horizontal = tree_df.horizontal_lines;
     const vertical = tree_df.vertical_lines;
     const tips = horizontal.filter((d) => d.isTip);
@@ -1118,6 +1126,12 @@ function drawPhylogeny(
           .append("title")
           .text((d) => tooltipFormatter(d, rootToTip(d.thisId)));
       }
+
+      if (onNodeClick) {
+        internalDots
+          .style("cursor", "pointer")
+          .on("click", (event, d) => onNodeClick(d, event));
+      }
     }
 
     // internal node labels (optional)
@@ -1253,7 +1267,6 @@ function drawPhylogeny(
     if (width !== height) {
       throw new Error("width and height must be the same for radial layout");
     }
-    const parsedTree = readTree(treeText);
     const rad = radialLayout(parsedTree, {
       angleStrategy: "fan",
       arcsStyle: "fan"
@@ -1473,6 +1486,12 @@ function drawPhylogeny(
           .append("title")
           .text((d) => tooltipFormatter(d, rootToTip(d.thisId)));
       }
+
+      if (onNodeClick) {
+        internalDots
+          .style("cursor", "pointer")
+          .on("click", (event, d) => onNodeClick(d, event));
+      }
     }
 
     // ===== INTERNAL NODE LABELS (optional) =====
@@ -1673,7 +1692,6 @@ function drawPhylogeny(
     return svg.node();
   } else if (layout === "unrooted") {
     // UNROOTED LAYOUT
-    const parsedTree = readTree(treeText);
     const unrootedPhylo = unrooted(parsedTree);
 
     const w = width;
@@ -1735,6 +1753,13 @@ function drawPhylogeny(
       .attr("stroke-width", 2)
       .attr("fill", (d) => (d.isTip ? "black" : "white"));
 
+    if (internalNodeCircles && onNodeClick) {
+      nodes
+        .filter((d) => !d.isTip)
+        .style("cursor", "pointer")
+        .on("click", (event, d) => onNodeClick(d, event));
+    }
+
     if (nodeLabels) {
       const labeledInternalNodes = unrootedPhylo.data.filter((d) => !d.isTip && d.thisLabel);
       group