@euphrasiologist/lwphylo 1.5.0 → 1.5.1

package/README.md

@@ -20,7 +20,12 @@ Need a tree to experiment with? `randomTree(nTips, { maxBranchLength, labelPrefi
 - `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(); }`.
+- `onNodeClick(node, event)` — fires when an internal node circle is clicked (requires `internalNodeCircles: true`).
+- `container` (DOM element or CSS selector) + `rotateOnClick` (bool) — the batteries-included version of click-to-rotate: with both set, `drawPhylogeny` mounts the SVG into `container` itself and, on every internal-node click, rotates that clade and redraws back into the same container — no manual render loop needed:
+  ```js
+  drawPhylogeny(newickString, { layout: "rect", container: "#tree", rotateOnClick: true });
+  ```
+  `rotateOnClick` auto-enables `internalNodeCircles` unless you set it explicitly. A supplied `onNodeClick` still fires too, before the rotate. Without a `container`, `rotateOnClick` throws — there'd be nowhere to put the redrawn SVG. For finer control (e.g. wrapping the SVG in your own zoom/pan `<g>`, as the demo site does), skip `container`/`rotateOnClick` and drive it yourself with `onNodeClick` + `rotate()` as shown in the demo's own source.
 
 ### Acknowledgements
 

package/dist/drawPhylogeny.cjs

@@ -837,6 +837,20 @@ function unrooted (node) {
   return data;
 }
 
+/**
+ * Reverse the child order at one node, flipping which side of the tree
+ * that clade's descendants are drawn on. Defaults to the root. Mutates
+ * the tree in place.
+ */
+function rotate(tree, nodeId = tree.id) {
+  const target = preorder(tree).find((n) => n.id === nodeId);
+  if (!target) {
+    throw new Error(`No node with id ${nodeId} found in tree`);
+  }
+  target.children.reverse();
+  return tree;
+}
+
 /**
  * Parse a Newick tree string into a doubly-linked list of JS Objects.
  * Assigns labels, branch lengths, and node IDs (tips before internals if input emits them that way).
@@ -950,9 +964,8 @@ function addScaleBar(svg, { scale, basis, defaultX, defaultY, scaleBar, fontSize
 // 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(
-  input,
-  {
+function drawPhylogeny(input, options = {}) {
+  const {
     layout = "rect", // rect/radial/unrooted
     width = 800,
     height = 800,
@@ -963,12 +976,13 @@ function drawPhylogeny(
     tipLabels = true,
     labelFontSize = 10, // font size (px) for tip labels
     tipRadius, // px radius of tip dots; defaults to each layout's original size
-    internalNodeCircles = false, // draw a circle at every internal (non-tip) node
     internalNodeRadius = 3, // px radius for internal node circles
     nodeLabels = false, // draw text labels at internal nodes (e.g. clade/support labels)
     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
+    container, // DOM element or CSS selector — if given, drawPhylogeny mounts the SVG itself instead of just returning it
+    rotateOnClick = false, // click an internal node circle to rotate its children in place and auto-redraw (requires container)
     onNodeClick, // (node, event) => void — fires when an internal node circle is clicked (requires internalNodeCircles: true)
     showTooltips = true,
     tooltipFormatter = (d, rtt) =>
@@ -978,8 +992,10 @@ function drawPhylogeny(
     highlightTips = [], // array of tip labels or ids for static highlight (optional)
     highlightStroke = "#e63946",
     highlightWidth = 2.5
-  } = {}
-) {
+  } = options;
+  // rotateOnClick needs internal node circles to click on; auto-enable them
+  // unless the caller explicitly said otherwise.
+  const internalNodeCircles = options.internalNodeCircles ?? rotateOnClick;
 
   // shared helpers
   const isNumber = (x) => typeof x === "number" && Number.isFinite(x);
@@ -987,6 +1003,35 @@ function drawPhylogeny(
   const parsedTree = (input && typeof input === "object" && Array.isArray(input.children))
     ? input
     : readTree(input);
+
+  const mountEl = typeof container === "string"
+    ? (typeof document !== "undefined" ? document.querySelector(container) : null)
+    : (container ?? null);
+
+  if (rotateOnClick && !mountEl) {
+    throw new Error(
+      "rotateOnClick requires a `container` (a DOM element or CSS selector) so drawPhylogeny can mount the redrawn SVG after each rotation."
+    );
+  }
+
+  // fires the caller's onNodeClick (if any), then handles the rotate+redraw itself
+  const effectiveOnNodeClick = (onNodeClick || rotateOnClick)
+    ? (node, event) => {
+      if (typeof onNodeClick === "function") onNodeClick(node, event);
+      if (rotateOnClick) {
+        rotate(parsedTree, node.thisId);
+        drawPhylogeny(parsedTree, options);
+      }
+    }
+    : undefined;
+
+  function mount(svgNode) {
+    if (mountEl) {
+      mountEl.innerHTML = "";
+      mountEl.appendChild(svgNode);
+    }
+    return svgNode;
+  }
   // 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" } = {}) {
@@ -1127,10 +1172,10 @@ function drawPhylogeny(
           .text((d) => tooltipFormatter(d, rootToTip(d.thisId)));
       }
 
-      if (onNodeClick) {
+      if (effectiveOnNodeClick) {
         internalDots
           .style("cursor", "pointer")
-          .on("click", (event, d) => onNodeClick(d, event));
+          .on("click", (event, d) => effectiveOnNodeClick(d, event));
       }
     }
 
@@ -1261,7 +1306,7 @@ function drawPhylogeny(
       });
     }
 
-    return svg.node();
+    return mount(svg.node());
   } else if (layout === "radial") {
     // RADIAL LAYOUT
     if (width !== height) {
@@ -1487,10 +1532,10 @@ function drawPhylogeny(
           .text((d) => tooltipFormatter(d, rootToTip(d.thisId)));
       }
 
-      if (onNodeClick) {
+      if (effectiveOnNodeClick) {
         internalDots
           .style("cursor", "pointer")
-          .on("click", (event, d) => onNodeClick(d, event));
+          .on("click", (event, d) => effectiveOnNodeClick(d, event));
       }
     }
 
@@ -1689,7 +1734,7 @@ function drawPhylogeny(
       });
     }
 
-    return svg.node();
+    return mount(svg.node());
   } else if (layout === "unrooted") {
     // UNROOTED LAYOUT
     const unrootedPhylo = unrooted(parsedTree);
@@ -1753,11 +1798,11 @@ function drawPhylogeny(
       .attr("stroke-width", 2)
       .attr("fill", (d) => (d.isTip ? "black" : "white"));
 
-    if (internalNodeCircles && onNodeClick) {
+    if (internalNodeCircles && effectiveOnNodeClick) {
       nodes
         .filter((d) => !d.isTip)
         .style("cursor", "pointer")
-        .on("click", (event, d) => onNodeClick(d, event));
+        .on("click", (event, d) => effectiveOnNodeClick(d, event));
     }
 
     if (nodeLabels) {
@@ -1922,7 +1967,7 @@ function drawPhylogeny(
       });
     }
 
-    return svg.node();
+    return mount(svg.node());
   } else {
     throw new Error(
       "Unsupported layout type. Use 'rect', 'radial', or 'unrooted'."