@euphrasiologist/lwphylo 1.2.23 → 1.2.26

package/dist/drawPhylogeny.esm.js

@@ -31,8 +31,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);
@@ -41,25 +41,27 @@ function describeArc(cx, cy, radius, startAngle, endAngle) {
 }
 
 // src/radial/describeArcSweep.js
-const TAU$1 = Math.PI * 2;
-const norm$1 = (t) => ((t % TAU$1) + TAU$1) % TAU$1;
-
-function describeArcSweep(cx, cy, r, a0, a1, sweep /*0=CCW,1=CW*/) {
-  console.log("describeArcSweep input:", {
-    cx, cy, r,
-    a0Deg: (a0 * 180 / Math.PI).toFixed(2),
-    a1Deg: (a1 * 180 / Math.PI).toFixed(2),
-    sweep
-  });
+// 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 delta = sweep === 0 ? norm$1(a1 - a0) : norm$1(a0 - a1);
-  if (!(r > 0) || delta < 1e-9) return "";
-  const largeArcFlag = delta > Math.PI ? 1 : 0;
+  const x0 = cx + r * Math.cos(a0);
+  const y0 = cy - r * Math.sin(a0);
+  const x1 = cx + r * Math.cos(a1);
+  const y1 = cy - r * Math.sin(a1);
 
-  const x0 = cx + r * Math.cos(a0), y0 = cy - r * Math.sin(a0);
-  const x1 = cx + r * Math.cos(a1), y1 = cy - r * Math.sin(a1);
+  const svgSweepFlag = (mathSweep === "ccw") ? 0 : 1;
 
-  return `M ${x0} ${y0} A ${r} ${r} 0 ${largeArcFlag} ${sweep} ${x1} ${y1}`;
+  return `M ${x0} ${y0} A ${r} ${r} 0 ${largeArcFlag} ${svgSweepFlag} ${x1} ${y1}`;
 }
 
 /**
@@ -336,16 +338,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 = [];
 
@@ -357,9 +356,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,
@@ -367,9 +368,11 @@ function getArcsFan(pd) {
       radius: p.r,
       start,
       end,
-      sweep
+      sweep: "ccw",                 // << math sweep
+      largeArc: deltaCCW > Math.PI ? 1 : 0
     });
   }
+
   return arcs;
 }
 
@@ -455,80 +458,6 @@ function getChildArcs(pd) {
   return arcs;
 }
 
-function getChildArcsFan(pd) {
-  const TAU = Math.PI * 2;
-  const norm = (t) => ((t % TAU) + TAU) % TAU;
-
-  // Circular midpoint that travels CCW from a -> b by half the CCW span
-  function midCCW(a, b) {
-    const d = (b - a + TAU) % TAU; // CCW delta in [0, 2π)
-    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),
-      // normalize children to numeric IDs; drop anything we can't resolve
-      (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;
-
-    // Sort children by angle (normalized) around the circle
-    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);
-
-      // Use SVG-conforming sweep logic
-      const delta = (end - start + TAU) % TAU;
-      const sweep = delta > Math.PI ? 0 : 1;
-
-      child_arcs.push({
-        parentId: pid,
-        childId: cur.id,
-        radius,
-        start,
-        end,
-        sweep
-      });
-    }
-
-  }
-
-  return child_arcs;
-}
-
 /**
  * radialLayout(node, opts?)
  * opts:
@@ -572,13 +501,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 };
 }
@@ -906,21 +830,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 === ')') {
@@ -929,14 +861,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];
@@ -946,13 +879,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;
 }
 
@@ -967,6 +896,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)}`,
@@ -1014,7 +944,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" });
@@ -1088,6 +1018,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.select(this).attr("r", 4);
       })
@@ -1107,7 +1038,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) {
@@ -1118,6 +1049,7 @@ function drawPhylogeny(
 
       labels
         .on("mouseenter", function(_event, d) {
+          hoverLayer.selectAll("*").remove();
           drawRectPath(d.thisId, hoverLayer, hoverStroke, hoverWidth);
           d3.select(this).attr("font-weight", 600);
         })
@@ -1144,7 +1076,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);
@@ -1201,10 +1132,14 @@ function drawPhylogeny(
     const END_CAP = 0;
 
     // ===== SCALES / BOUNDS =====
-    const maxRadius = d3.max(rad.data, (d) => d.r) ?? 0;
-    const scaleRadial = maxRadius + 2 * radialMargin;
     const w = width,
       h = height;
+    const maxRadius = d3.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;
 
@@ -1284,7 +1219,8 @@ function drawPhylogeny(
             radiusPx(d.radius),
             d.start,
             d.end,
-            d.sweep
+            d.sweep ?? "ccw",
+            d.largeArc ?? 0,
           )
       )
       .attr("fill", "none")
@@ -1399,7 +1335,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, " ") ?? "");
         });
@@ -1413,6 +1349,8 @@ function drawPhylogeny(
       // label hover
       labels
         .on("mouseenter", function(_event, d) {
+          hoverLines.selectAll("*").remove();
+          hoverArcs.selectAll("*").remove();
           drawRadialPath(d, hoverLines, hoverArcs, hoverStroke, hoverWidth);
           d3.select(this).select("text").attr("font-weight", 600);
         })
@@ -1432,9 +1370,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;
@@ -1473,18 +1408,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);
+            : 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))
@@ -1501,6 +1428,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.select(this).attr("r", DOT_R + 2);
       })
@@ -1657,7 +1586,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, " ") ?? "");
         });