@euphrasiologist/lwphylo 1.2.24 → 1.3.0

package/README.md

@@ -2,16 +2,15 @@
 
 A lightweight, low level javascript library to plot phylogenies from a Newick file. It uses no dependencies on any other package, but is designed to be given to the D3 library for visualisation.
 
-### Functionality
+## Website
 
-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.
+Visit https://euphrasiologist.github.io/lwPhylo/ to see examples and live rendering of trees. Can even paste your own in.
 
-### Examples
+### Functionality
 
-A quick tutorial is now available to see on Observable: https://observablehq.com/@euphrasiologist/lwphylo-tutorial \
-It goes over the three tree layout functions, and hopefully is all quite straightforward. 
+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.
 
-Stay tuned for examples in the browser.
+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.
 
 ### Acknowledgements
 

package/dist/drawPhylogeny.cjs

@@ -52,8 +52,8 @@ function describeArc(cx, cy, radius, startAngle, endAngle) {
     return `M ${p.x} ${p.y}`;                   // degenerate span → no arc
   }
 
-  const largeArcFlag = delta > Math.PI ? 1 : 0; // should be 0 for “shortest”, but keep for safety
-  const sweepFlag = 0;                          // CCW
+  const largeArcFlag = delta > Math.PI ? 1 : 0;
+  const sweepFlag = 0;                          // CCW in our y-flipped coords: math-CCW = decreasing SVG angle = sweepFlag 0
 
   const p0 = polarToCartesian(cx, cy, radius, a0);
   const p1 = polarToCartesian(cx, cy, radius, a1);
@@ -62,15 +62,17 @@ function describeArc(cx, cy, radius, startAngle, endAngle) {
 }
 
 // src/radial/describeArcSweep.js
-function describeArcSweep(cx, cy, r, a0, a1, sweep = 1, largeArcFlag = 0) {
-  console.log("describeArcSweep input:", {
-    cx, cy, r,
-    a0Deg: (a0 * 180 / Math.PI).toFixed(2),
-    a1Deg: (a1 * 180 / Math.PI).toFixed(2),
-    sweep,
-    largeArcFlag
-  });
-
+// IMPORTANT: angles are in "math space" (increasing = CCW).
+// Because we map y as (cy - r*sin(a)), our math angle t maps to SVG angle -t.
+// Increasing t (math CCW) = decreasing SVG angle = sweepFlag 0 (negative direction).
+//   math CCW -> svg sweepFlag = 0
+//   math CW  -> svg sweepFlag = 1
+function describeArcSweep(
+  cx, cy, r,
+  a0, a1,
+  mathSweep = "ccw",          // "ccw" | "cw"
+  largeArcFlag = 0
+) {
   if (!(r > 0)) return "";
 
   const x0 = cx + r * Math.cos(a0);
@@ -78,7 +80,9 @@ function describeArcSweep(cx, cy, r, a0, a1, sweep = 1, largeArcFlag = 0) {
   const x1 = cx + r * Math.cos(a1);
   const y1 = cy - r * Math.sin(a1);
 
-  return `M ${x0} ${y0} A ${r} ${r} 0 ${largeArcFlag} ${sweep} ${x1} ${y1}`;
+  const svgSweepFlag = (mathSweep === "ccw") ? 0 : 1;
+
+  return `M ${x0} ${y0} A ${r} ${r} 0 ${largeArcFlag} ${svgSweepFlag} ${x1} ${y1}`;
 }
 
 /**
@@ -355,16 +359,13 @@ function getArcs(pd) {
 }
 
 /**
- * Build APE-like block arcs per internal parent:
- *  radius = parent.r
- *  start = first child's angle
- *  end   = last child's angle
- *  sweep = 0 (CCW) if end>=start; 1 (CW) if wrapped across 2π
- *
- * @param {Array} pd nodes with {thisId,parentId,children,angle,r}
- * @returns {Array} [{parentId,thisId,radius,start,end,sweep}]
+ * APE-like block arcs per internal parent.
+ * Draw CCW from first child's angle to last child's angle (wrapping allowed).
  */
 function getArcsFan(pd) {
+  const TAU = Math.PI * 2;
+  const norm = (t) => ((t % TAU) + TAU) % TAU;
+
   const byId = new Map(pd.map(d => [d.thisId, d]));
   const arcs = [];
 
@@ -376,9 +377,11 @@ function getArcsFan(pd) {
     const last  = byId.get(c[c.length - 1])?.angle;
     if (first == null || last == null) continue;
 
-    const start = first;
-    const end = last;
-    const sweep = end >= start ? 0 : 1; // CW if wrapped
+    const start = norm(first);
+    const end   = norm(last);
+
+    const deltaCCW = (end - start + TAU) % TAU;
+    if (deltaCCW < 1e-9) continue;
 
     arcs.push({
       parentId: p.parentId,
@@ -386,9 +389,11 @@ function getArcsFan(pd) {
       radius: p.r,
       start,
       end,
-      sweep
+      sweep: "ccw",                 // << math sweep
+      largeArc: deltaCCW > Math.PI ? 1 : 0
     });
   }
+
   return arcs;
 }
 
@@ -474,76 +479,6 @@ function getChildArcs(pd) {
   return arcs;
 }
 
-function getChildArcsFan(pd) {
-  const TAU = Math.PI * 2;
-  const norm = (t) => ((t % TAU) + TAU) % TAU;
-
-  function midCCW(a, b) {
-    const d = (b - a + TAU) % TAU;
-    return norm(a + d / 2);
-  }
-
-  const key = (x) => (typeof x === "string" ? +x : x);
-  const byId = new Map(pd.map(d => [key(d.thisId), d]));
-  const childrenByParent = new Map(
-    pd.map(d => [
-      key(d.thisId),
-      (d.children || [])
-        .map(ch => (typeof ch === "object" ? ch.thisId : ch))
-        .map(key)
-        .filter(id => byId.has(id))
-    ])
-  );
-
-  const child_arcs = [];
-
-  for (const parentRaw of pd) {
-    const pid = key(parentRaw.thisId);
-    const kids = childrenByParent.get(pid) || [];
-    if (kids.length < 2) continue;
-
-    const A = kids
-      .map(id => {
-        const node = byId.get(id);
-        return node ? { id, a: norm(node.angle) } : null;
-      })
-      .filter(Boolean)
-      .sort((u, v) => u.a - v.a);
-
-    const N = A.length;
-    if (N < 2) continue;
-
-    const parent = byId.get(pid);
-    const radius = parent?.r;
-    if (!(radius > 0)) continue;
-
-    for (let i = 0; i < N; i++) {
-      const prev = A[(i - 1 + N) % N];
-      const cur = A[i];
-      const next = A[(i + 1) % N];
-
-      const start = midCCW(prev.a, cur.a);
-      const end = midCCW(cur.a, next.a);
-
-      const sweep = 1; // always clockwise
-      const delta = (end - start + TAU) % TAU;
-      const largeArc = delta > Math.PI ? 1 : 0;
-
-      child_arcs.push({
-        parentId: pid,
-        childId: cur.id,
-        radius,
-        start,
-        end,
-        sweep,
-        largeArc
-      });
-    }
-  }
-
-  return child_arcs;
-}
-
 /**
  * radialLayout(node, opts?)
  * opts:
@@ -587,13 +522,8 @@ function radialLayout(node, opts = {}) {
     ? getArcsFan(pd)
     : getArcs(pd);
 
-  // per-child arcs for half-arc highlighting if you already use them
-  let child_arcs = [];
-  if (arcsStyle === "fan") {
-    child_arcs = getChildArcsFan(pd);
-  } else {
-    child_arcs = getChildArcs(pd);
-  }
+  // per-child arcs for path highlighting: always parent.angle → child.angle at parent.r
+  const child_arcs = getChildArcs(pd);
 
   return { data: pd, radii, arcs, child_arcs };
 }
@@ -921,21 +851,29 @@ function readTree(text) {
   text = String(text).replace(/\s+/g, '');
 
   const tokens = text.split(/(;|\(|\)|,)/);
-  const root = { parent: null, children: [] };
-  let curnode = root;
   let nodeId = 0;
+  const makeNode = (parent) => ({
+    parent,
+    children: [],
+    id: nodeId++,
+    label: '',
+    branchLength: null
+  });
+
+  const root = makeNode(null);
+  let curnode = root;
 
   for (const token of tokens) {
     if (!token || token === ';') continue;
 
     if (token === '(') {
-      const child = { parent: curnode, children: [] };
+      const child = makeNode(curnode);
       curnode.children.push(child);
       curnode = child; // descend
     } else if (token === ',') {
       // back to parent, then create sibling
       curnode = curnode.parent;
-      const child = { parent: curnode, children: [] };
+      const child = makeNode(curnode);
       curnode.children.push(child);
       curnode = child;
     } else if (token === ')') {
@@ -944,14 +882,15 @@ function readTree(text) {
       if (curnode === null) break;
     } else {
       // label/branch-length chunk (e.g., "A:0.01" or "A")
+      // Note: nodes are assigned an id at creation (above), so internal
+      // (clade) nodes that carry neither a label nor a branch length —
+      // e.g. "((A,B),(C,D));" — still get a valid, linkable id here.
       const nodeinfo = token.split(':');
       if (nodeinfo.length === 1) {
         if (token.startsWith(':')) {
-          curnode.label = '';
           curnode.branchLength = parseFloat(nodeinfo[0]);
         } else {
           curnode.label = nodeinfo[0];
-          curnode.branchLength = null;
         }
       } else if (nodeinfo.length === 2) {
         curnode.label = nodeinfo[0];
@@ -961,13 +900,9 @@ function readTree(text) {
         curnode.label = nodeinfo[0] || '';
         curnode.branchLength = parseFloat(nodeinfo[nodeinfo.length - 1]);
       }
-      curnode.id = nodeId++; // assign then increment
     }
   }
 
-  // Ensure root has an id if not assigned during parsing
-  if (root.id == null) root.id = nodeId;
-
   return root;
 }
 
@@ -982,6 +917,7 @@ function drawPhylogeny(
     strokeWidth = 1, // for the phylogeny branches
     radialMode = "outer", // "outer" (co-circular tips) or "phylo" (true terminals)
     tipLabels = true,
+    labelFontSize = 10, // font size (px) for tip labels
     showTooltips = true,
     tooltipFormatter = (d, rtt) =>
       `${d.thisLabel ?? "(unnamed)"}\nroot→tip: ${(+rtt).toFixed(4)}`,
@@ -1029,7 +965,7 @@ function drawPhylogeny(
     const tips = horizontal.filter((d) => d.isTip);
 
     // indices & root→tip getter
-    const byId = new Map(horizontal.map((d) => [d.thisId, d]));
+    const byId = new Map(tree_df.data.map((d) => [d.thisId, d])); // includes root
     const tipById = new Map(tips.map((d) => [d.thisId, d]));
     const tipByLabel = new Map(tips.map((d) => [d.thisLabel, d]));
     const rootToTip = makeRootToTipGetter(byId, { prefer: "x1" });
@@ -1103,6 +1039,7 @@ function drawPhylogeny(
     // interactive root→tip highlight (rect) on dot hover
     tipDots
       .on("mouseenter", function(_event, d) {
+        hoverLayer.selectAll("*").remove();
         drawRectPath(d.thisId, hoverLayer, hoverStroke, hoverWidth);
         d3__namespace.select(this).attr("r", 4);
       })
@@ -1122,7 +1059,7 @@ function drawPhylogeny(
         .attr("x", (d) => xScale(d.x1) + 4)
         .attr("y", (d) => yScale(d.y1))
         .attr("dy", "0.32em")
-        .attr("font-size", 10)
+        .attr("font-size", labelFontSize)
         .text((d) => d.thisLabel?.replace(/_/g, " ") ?? "");
 
       if (showTooltips) {
@@ -1133,6 +1070,7 @@ function drawPhylogeny(
 
       labels
         .on("mouseenter", function(_event, d) {
+          hoverLayer.selectAll("*").remove();
           drawRectPath(d.thisId, hoverLayer, hoverStroke, hoverWidth);
           d3__namespace.select(this).attr("font-weight", 600);
         })
@@ -1159,7 +1097,6 @@ function drawPhylogeny(
 
     // helper to draw root→tip for rect (both vertical+horizontal)
     function drawRectPath(tipId, layer, stroke, width) {
-      layer.selectAll("*").remove();
       let cur = byId.get(tipId);
       while (cur && cur.parentId != null) {
         const parent = byId.get(cur.parentId);
@@ -1216,10 +1153,14 @@ function drawPhylogeny(
     const END_CAP = 0;
 
     // ===== SCALES / BOUNDS =====
-    const maxRadius = d3__namespace.max(rad.data, (d) => d.r) ?? 0;
-    const scaleRadial = maxRadius + 2 * radialMargin;
     const w = width,
       h = height;
+    const maxRadius = d3__namespace.max(rad.data, (d) => d.r) ?? 0;
+    // radialMargin is in pixels: tips sit (radialMargin) px from the SVG edge.
+    // Derive the data-space scale so that radiusPx(maxRadius) = w/2 - radialMargin.
+    const scaleRadial = maxRadius > 0
+      ? maxRadius * (w / 2) / (w / 2 - radialMargin)
+      : 1;
     const centerX = w / 2,
       centerY = h / 2;
 
@@ -1299,8 +1240,8 @@ function drawPhylogeny(
             radiusPx(d.radius),
             d.start,
             d.end,
-            d.sweep,
-            d.largeArc,
+            d.sweep ?? "ccw",
+            d.largeArc ?? 0,
           )
       )
       .attr("fill", "none")
@@ -1415,7 +1356,7 @@ function drawPhylogeny(
             .attr("x", xoff)
             .attr("alignment-baseline", "middle")
             .attr("text-anchor", anchor)
-            .attr("font-size", 10)
+            .attr("font-size", labelFontSize)
             .attr("fill", "black")
             .text((d) => d.thisLabel?.replace(/_/g, " ") ?? "");
         });
@@ -1429,6 +1370,8 @@ function drawPhylogeny(
       // label hover
       labels
         .on("mouseenter", function(_event, d) {
+          hoverLines.selectAll("*").remove();
+          hoverArcs.selectAll("*").remove();
           drawRadialPath(d, hoverLines, hoverArcs, hoverStroke, hoverWidth);
           d3__namespace.select(this).select("text").attr("font-weight", 600);
         })
@@ -1448,9 +1391,6 @@ function drawPhylogeny(
       width = 3
     ) {
       // target may be a tip node *or* a numeric tip id
-      lineLayer.selectAll("*").remove();
-      arcLayer.selectAll("*").remove();
-
       let cur = (typeof target === "number" || typeof target === "string")
         ? byId.get(target)
         : target;
@@ -1489,18 +1429,10 @@ function drawPhylogeny(
           const R = radiusPx(rec.radius);
           return rec.sweep == null
             ? describeArc(centerX, centerY, R, rec.start, rec.end)
-            : describeArcSweep(centerX, centerY, R, rec.start, rec.end, rec.sweep, a.largeArc);
+            : describeArcSweep(centerX, centerY, R, rec.start, rec.end, rec.sweep ?? "ccw", rec.largeArc ?? 0);
         }
 
         if (a) {
-          console.log("Drawing arc:", {
-            childId: cur.thisId,
-            startDeg: (a.start * 180 / Math.PI).toFixed(2),
-            endDeg: (a.end * 180 / Math.PI).toFixed(2),
-            sweep: a.sweep,
-            radius: a.radius
-          });
-
           arcLayer
             .append("path")
             .attr("d", pathFromArcRecord(a))
@@ -1517,6 +1449,8 @@ function drawPhylogeny(
     // tip dot hover
     tipDots
       .on("mouseenter", function(_event, d) {
+        hoverLines.selectAll("*").remove();
+        hoverArcs.selectAll("*").remove();
         drawRadialPath(d, hoverLines, hoverArcs, hoverStroke, hoverWidth);
         d3__namespace.select(this).attr("r", DOT_R + 2);
       })
@@ -1673,7 +1607,7 @@ function drawPhylogeny(
             .attr("x", xOffset)
             .attr("alignment-baseline", "middle")
             .attr("text-anchor", anchor)
-            .attr("font-size", 10)
+            .attr("font-size", labelFontSize)
             .attr("fill", "black")
             .text(d.thisLabel?.replace(/_/g, " ") ?? "");
         });