@sjcrh/proteinpaint-client 2.225.0 → 2.227.0

package/dist/chunk-JI632MAR.js

@@ -0,0 +1,400 @@
+import {
+  Menu
+} from "./chunk-CNFTQSNE.js";
+import {
+  Tableau10_default,
+  arc_default
+} from "./chunk-2N345NXD.js";
+import {
+  hierarchy,
+  partition_default
+} from "./chunk-4OLM3KSB.js";
+import {
+  select_default
+} from "./chunk-I6Y4O3RR.js";
+import {
+  rgb,
+  value_default
+} from "./chunk-Q5RDQNIT.js";
+
+// plots/sunburst/SunburstRenderer.ts
+var RINGS = 2;
+var R0 = 74;
+var RING_W = 74;
+var RADIUS = R0 + RINGS * RING_W;
+var SIZE = RADIUS * 2 + 12;
+var DURATION = 750;
+var HOVER_DARKEN = 0.5;
+var DIM = 0.65;
+var WARN = "#b45309";
+var DIVIDER = "#ffffff";
+var SELECT_STROKE = "#111827";
+var CENTRE_FILL = "#f8fafc";
+var CENTRE_STROKE = "#cbd5e1";
+var TEXT_DARK = "#111827";
+var TEXT_MUTED = "#4b5563";
+var LINK = "#2563eb";
+var CARD_BORDER = "#d1d5db";
+var PILL_BG = "#e5e7eb";
+var RULE = "#e5e7eb";
+var RING_SHADE = [-0.35, 0];
+var LABEL_FONT = 12;
+var LABEL_LINE_H = LABEL_FONT * 1.15;
+var LABEL_CHAR_W = LABEL_FONT * 0.55;
+var LABEL_MAX_LINES = 2;
+var NO_HUE = "#9ca3af";
+var radius = (y) => y < 1 ? y * R0 : R0 + (y - 1) * RING_W;
+var midRadius = (g) => (radius(g.y0) + radius(g.y1)) / 2;
+var icon = (paths) => `<svg width="13" height="13" viewBox="0 0 24 24" style="vertical-align:-2px;margin-right:6px" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">${paths}</svg>`;
+var SunburstRenderer = class {
+  constructor(opts) {
+    /** stat box elements and the value they currently show, for the count animation */
+    this.statValues = /* @__PURE__ */ new Map();
+    this.baseColor = /* @__PURE__ */ new Map();
+    /************ rendering ************/
+    this.arc = arc_default().startAngle((d) => d.x0).endAngle((d) => d.x1).innerRadius((d) => radius(d.y0)).outerRadius((d) => Math.max(radius(d.y0), radius(d.y1)));
+    this.opts = opts;
+    this.hooks = opts.hooks;
+    const layout = opts.holder.append("div").style("display", "flex").style("gap", `${opts.gap ?? 24}px`).style("align-items", "flex-start");
+    const withPathCard = opts.pathCard !== false;
+    const pathCard = withPathCard ? card(layout, "Selection") : void 0;
+    pathCard?.box.style("flex", "0 0 230px");
+    const left = withPathCard ? void 0 : layout.append("div").style("flex", "0 0 260px").style("min-width", "0").style("display", "flex").style("flex-direction", "column").style("gap", "12px");
+    const panel = layout.append("div").append("div").style("width", `${SIZE}px`);
+    const toolbar = panel.append("div").style("display", "flex").style("justify-content", "center").style("gap", "28px").style("min-height", "20px");
+    const crumbs = withPathCard ? void 0 : panel.append("div").attr("data-testid", "sjpp-sunburst-crumbs").style("text-align", "center").style("font-size", "12px").style("margin-top", "6px").style("min-height", "16px");
+    const svg = panel.append("svg").attr("width", SIZE).attr("height", SIZE).style("display", "block").style("user-select", "none").on("mousedown", (event) => {
+      if (event.shiftKey && event.button == 0) event.preventDefault();
+    });
+    const right = layout.append("div").style("flex", "0 0 300px").style("min-width", "0").style("display", "flex").style("flex-direction", "column").style("gap", "12px");
+    const stats = right.append("div").style("display", "grid").style("grid-template-columns", "1fr 1fr").style("gap", "8px");
+    this.dom = {
+      pathCard,
+      left,
+      crumbs,
+      toolbar,
+      reset: void 0,
+      svg,
+      g: svg.append("g").attr("transform", `translate(${SIZE / 2},${SIZE / 2})`),
+      centre: void 0,
+      centreText: void 0,
+      paths: void 0,
+      labels: void 0,
+      stats,
+      right,
+      tip: new Menu({ padding: "" })
+    };
+    this.dom.reset = this.addControl().html(`${icon('<path d="M3 12a9 9 0 1 0 3-6.7"/><polyline points="3 3 3 9 9 9"/>')}RESET`).on("click", () => {
+      if (this.focus?.depth) this.zoomTo(this.root);
+    });
+    for (const label of opts.statLabels || []) {
+      const box = card(stats, label);
+      box.box.style("padding", "6px 10px");
+      box.title.style("margin-bottom", "0").style("white-space", "nowrap").style("overflow", "hidden").style("text-overflow", "ellipsis").attr("title", label);
+      const num = box.body.append("div").style("font-size", "20px").style("line-height", "1.2").style("font-weight", "500").style("color", TEXT_DARK).style("font-variant-numeric", "tabular-nums").text("0");
+      this.statValues.set(label, { el: num, value: 0, title: box.title });
+    }
+  }
+  /** a control in the toolbar above the chart */
+  addControl() {
+    return this.dom.toolbar.append("div").style("letter-spacing", "0.15em").style("font-size", "11px").style("font-weight", "bold").style("color", TEXT_MUTED).style("cursor", "pointer").style("user-select", "none").style("white-space", "nowrap");
+  }
+  unitText(n) {
+    return `${n.toLocaleString()} ${n === 1 ? this.opts.unit.one : this.opts.unit.many}`;
+  }
+  /** (re)draw the chart for a new tree, centred on the root */
+  setTree(tree) {
+    this.root = hierarchy(tree).sum((d) => d.value || 0).sort(() => 0);
+    partition_default().size([2 * Math.PI, this.root.height + 1])(this.root);
+    this.focus = this.root;
+    this.baseColor.clear();
+    let pi = 0;
+    for (const c of this.root.children || []) {
+      this.baseColor.set(
+        c.data.name,
+        this.opts.colors?.[c.data.name] || c.data.color || Tableau10_default[pi++ % Tableau10_default.length]
+      );
+    }
+    this.buildChart();
+    this.hooks.onFocus(this.focus);
+  }
+  /************ colours ************/
+  /** the hue of a wedge: its own colour or its nearest ancestor's, down to the first ring's */
+  hue(d) {
+    let n = d;
+    while (n.depth > 1) {
+      if (n.data.color) return n.data.color;
+      n = n.parent;
+    }
+    return n.depth === 1 ? this.baseColor.get(n.data.name) || NO_HUE : NO_HUE;
+  }
+  /** the hue, shaded by the ring the wedge occupies around the current centre (so a wedge keeps its
+   *  hue at every zoom level), faded when dimmed */
+  color(d) {
+    if (d.depth === 0) return CENTRE_FILL;
+    const ring = Math.max(0, Math.min(RING_SHADE.length - 1, d.depth - (this.focus?.depth ?? 0) - 1));
+    const c = rgb(this.hue(d)).brighter(RING_SHADE[ring]).formatHex();
+    return d.dim ? rgb(value_default(c, "#ffffff")(DIM)).formatHex() : c;
+  }
+  hoverColor(d) {
+    return rgb(this.color(d)).darker(HOVER_DARKEN).formatHex();
+  }
+  /** build every wedge and label once; zoomTo() then only animates their attributes */
+  buildChart() {
+    const g = this.dom.g;
+    g.selectAll("*").remove();
+    const root = this.root;
+    root.each((d) => d.current = { x0: d.x0, x1: d.x1, y0: d.y0, y1: d.y1 });
+    const nodes = root.descendants().slice(1);
+    this.dom.centre = g.append("g");
+    this.dom.centre.append("circle").attr("r", R0 - 3).attr("fill", CENTRE_FILL).attr("stroke", CENTRE_STROKE).attr("stroke-width", 1.5).on("click", () => {
+      if (this.focus.depth) this.zoomTo(this.focus.parent);
+    });
+    this.dom.centreText = this.dom.centre.append("g").attr("pointer-events", "none");
+    this.dom.paths = g.append("g").selectAll("path").data(nodes).join("path").attr("class", "sjpp-sunburst-wedge").attr("fill", (d) => this.color(d)).attr("fill-opacity", (d) => arcVisible(d.current, RINGS) ? 1 : 0).attr("stroke-opacity", (d) => arcVisible(d.current, RINGS) ? 1 : 0).attr("pointer-events", (d) => arcVisible(d.current, RINGS) ? "auto" : "none").attr("d", (d) => this.arc(d.current)).style("cursor", "pointer").on("mouseenter", (event, d) => {
+      select_default(event.currentTarget).attr("fill", this.hoverColor(d));
+      this.showTip(event, d);
+    }).on("mouseleave", (event, d) => {
+      select_default(event.currentTarget).attr("fill", this.color(d));
+      this.dom.tip.hide();
+    }).on("click", (event, d) => this.hooks.onClick(d, event));
+    this.dom.labels = g.append("g").attr("pointer-events", "none").attr("text-anchor", "middle").style("user-select", "none").selectAll("text").data(nodes).join("text").attr("font-size", `${LABEL_FONT}px`).attr("font-weight", "bold").attr("fill", "#fff").attr("dominant-baseline", "middle").attr("fill-opacity", (d) => this.labelVisible(d.current) ? 1 : 0).attr("transform", (d) => this.labelTransform(d.current)).each((d, i, els) => this.setLabelText(select_default(els[i]), d, d.current));
+    this.refresh();
+    this.renderCentre();
+  }
+  /** a label shows only where its wedge is visible and at least one line fits along the arc */
+  labelVisible(g) {
+    return arcVisible(g, RINGS) && (g.x1 - g.x0) * midRadius(g) >= LABEL_LINE_H + 2;
+  }
+  /** along the wedge's mid radius, reading outward; flipped in the left half so it is upright */
+  labelTransform(g) {
+    const a = (g.x0 + g.x1) / 2 * (180 / Math.PI);
+    return `rotate(${a - 90}) translate(${midRadius(g)},0) rotate(${a < 180 ? 0 : 180})`;
+  }
+  /** wrap the node name into as many lines as the wedge's arc length allows (max 2), each
+   *  no longer than the ring is thick */
+  setLabelText(text, d, g) {
+    const arcLen = (g.x1 - g.x0) * midRadius(g);
+    const nLines = Math.max(1, Math.min(LABEL_MAX_LINES, Math.floor(arcLen / LABEL_LINE_H)));
+    const maxChars = Math.floor((RING_W - 8) / LABEL_CHAR_W);
+    const lines = splitLabel(d.data.name, maxChars, nLines);
+    text.selectAll("tspan").remove();
+    lines.forEach((l, i) => {
+      text.append("tspan").attr("x", 0).attr("dy", i === 0 ? `${-(lines.length - 1) * LABEL_LINE_H / 2}px` : `${LABEL_LINE_H}px`).text(l);
+    });
+  }
+  /** name, count and Back on the centre disc */
+  renderCentre() {
+    const focus = this.focus;
+    const t = this.dom.centreText;
+    t.selectAll("*").remove();
+    this.dom.centre.select("circle").style("cursor", focus.depth ? "pointer" : "default");
+    const name = focus.depth ? focus.data.name : this.opts.rootName;
+    const nameLines = splitLabel(name, Math.floor(2 * (R0 - 16) / (15 * 0.6)), 2);
+    const rows = [
+      ...nameLines.map((l) => ({ text: l, size: 15, weight: "bold", color: TEXT_DARK, h: 18 })),
+      { text: this.unitText(focus.value || 0), size: 12, color: TEXT_MUTED, h: 16 }
+    ];
+    if (focus.depth) rows.push({ text: "\u2039  BACK", size: 12, weight: "bold", color: LINK, h: 22 });
+    const total = rows.reduce((s, r) => s + r.h, 0);
+    let y = -total / 2;
+    for (const r of rows) {
+      t.append("text").attr("text-anchor", "middle").attr("dominant-baseline", "middle").attr("y", y + r.h / 2).attr("font-size", `${r.size}px`).attr("font-weight", r.weight || "normal").attr("fill", r.color).attr("letter-spacing", r.text.endsWith("BACK") ? "0.12em" : null).text(r.text);
+      y += r.h;
+    }
+  }
+  /** re-apply selection strokes, dimming and the path card after the caller's selection changed;
+   *  no geometry changes */
+  refresh() {
+    this.root.each((d) => d.dim = !!this.hooks.isDimmed?.(d));
+    this.dom.paths.attr("fill", (d) => this.color(d)).attr("stroke", (d) => this.hooks.isSelected(d) ? SELECT_STROKE : DIVIDER).attr("stroke-width", (d) => this.hooks.isSelected(d) ? 3 : 1).attr("stroke-linejoin", "round").style("cursor", (d) => this.hooks.cursor?.(d) || "pointer");
+    this.dom.labels.attr("fill", (d) => d.dim ? TEXT_MUTED : "#fff");
+    this.renderReset();
+    this.renderPath();
+  }
+  /** reset is only active when zoomed in */
+  renderReset() {
+    const zoomed = !!this.focus?.depth;
+    this.dom.reset.style("opacity", zoomed ? 1 : 0.35).style("cursor", zoomed ? "pointer" : "default");
+  }
+  /** the path of clicked wedges, as the path card or the breadcrumb */
+  renderPath() {
+    if (this.dom.pathCard) this.renderPathCard(this.dom.pathCard);
+    else this.renderCrumbs();
+  }
+  /** root › … › centre, each earlier step clickable to zoom back to it */
+  renderCrumbs() {
+    const box = this.dom.crumbs;
+    box.selectAll("*").remove();
+    const focus = this.focus;
+    const steps = focus.ancestors().reverse();
+    steps.forEach((d, i) => {
+      if (i) box.append("span").style("color", "#9ca3af").style("margin", "0 6px").text("\u203A");
+      const isFocus = d === focus;
+      box.append("span").attr("class", "sjpp-sunburst-crumb").style("color", isFocus ? TEXT_DARK : LINK).style("font-weight", isFocus ? "bold" : "normal").style("cursor", isFocus ? "default" : "pointer").attr("title", isFocus ? null : `Go to ${d.depth ? d.data.name : this.opts.rootName}`).text(d.depth ? d.data.name : this.opts.rootName).on("click", () => {
+        if (!isFocus) this.zoomTo(d);
+      });
+    });
+  }
+  /** the path card: at the root it lists the first ring to click into; once zoomed it shows the path
+   *  of clicked wedges, each with a colour-coded badge, and clicking a line zooms back to it */
+  renderPathCard(pathCard) {
+    const box = pathCard.body;
+    box.selectAll("*").remove();
+    const focus = this.focus;
+    const atRoot = !focus.depth;
+    pathCard.title.text(atRoot ? this.opts.rootPathTitle || "Selection" : "Selection");
+    const nodes = atRoot ? this.root.children || [] : focus.ancestors().reverse().slice(1);
+    const STEP = 7;
+    nodes.forEach((d, i) => {
+      const isFocus = d === focus;
+      const indent = atRoot ? 0 : i * STEP;
+      const row = box.append("div").style("position", "relative").style("margin-left", `${indent}px`);
+      if (indent) {
+        row.append("div").style("position", "absolute").style("left", `${-STEP + 2}px`).style("top", "-6px").style("width", `${STEP - 4}px`).style("height", "22px").style("border-left", "1px solid #cbd5e1").style("border-bottom", "1px solid #cbd5e1").style("border-bottom-left-radius", "4px");
+      }
+      const line = row.append("div").attr("class", "sjpp-sunburst-pathrow").style("display", "flex").style("align-items", "center").style("gap", "8px").style("padding", "4px 6px").style("margin", "2px 0").style("border-radius", "6px").style("background", isFocus ? "#eef2ff" : "transparent").style("cursor", isFocus ? "default" : "pointer").attr("title", isFocus ? d.data.name : `Go to ${d.data.name}`).on("click", () => {
+        if (!isFocus) this.zoomTo(d);
+      }).on("mouseenter", (event) => {
+        if (!isFocus) select_default(event.currentTarget).style("background", "#f3f4f6");
+      }).on("mouseleave", (event) => {
+        if (!isFocus) select_default(event.currentTarget).style("background", "transparent");
+      });
+      badge(line, d.data.name, this.color(d));
+      const text = line.append("div").style("flex", "1 1 auto").style("min-width", "0").style("line-height", "1.2");
+      text.append("div").style("font-size", "0.9em").style("font-weight", isFocus ? "bold" : "normal").style("color", "#111827").style("overflow", "hidden").style("text-overflow", "ellipsis").style("white-space", "nowrap").text(d.data.name);
+      text.append("div").style("font-size", "0.7em").style("color", "#6b7280").text(`${d.data.level} \xB7 ${this.unitText(d.value || 0)}`);
+    });
+  }
+  /** shown title of a stat box, which keeps `label` as its key */
+  setStatTitle(label, text) {
+    this.statValues.get(label)?.title.text(text).attr("title", text);
+  }
+  /** stat box values, by label; null shows a dash with `nullTitle` as its tooltip. Numbers roll from
+   *  the previous value */
+  setStats(values, nullTitle = (_label) => "") {
+    for (const [label, v] of values) {
+      const box = this.statValues.get(label);
+      if (!box) continue;
+      if (v === null) {
+        box.el.interrupt().text("\u2014").attr("title", nullTitle(label) || null);
+        box.value = 0;
+        continue;
+      }
+      box.el.attr("title", null);
+      const from = box.value;
+      box.value = v;
+      const i = value_default(from, v);
+      box.el.transition().duration(DURATION).tween("text", () => (t) => box.el.text(Math.round(i(t)).toLocaleString()));
+    }
+  }
+  /************ interaction ************/
+  /** animate every wedge from its current geometry to where it sits with `p` at the centre */
+  zoomTo(p) {
+    this.focus = p;
+    this.dom.tip.hide();
+    const root = this.root;
+    root.each((d) => d.target = zoomTarget(d, p));
+    const t = this.dom.g.transition().duration(DURATION);
+    this.dom.paths.attr("pointer-events", "none");
+    t.on(
+      "end",
+      () => this.dom.paths.attr("pointer-events", (d) => arcVisible(d.target, RINGS) ? "auto" : "none")
+    );
+    this.dom.paths.transition(t).tween("data", (d) => {
+      const i = value_default(d.current, d.target);
+      return (k) => d.current = i(k);
+    }).filter(function(d) {
+      return +this.getAttribute("fill-opacity") || arcVisible(d.target, RINGS);
+    }).attr("fill-opacity", (d) => arcVisible(d.target, RINGS) ? 1 : 0).attr("stroke-opacity", (d) => arcVisible(d.target, RINGS) ? 1 : 0).attr("fill", (d) => this.color(d)).attrTween("d", (d) => () => this.arc(d.current));
+    this.dom.labels.filter((d, i, els) => +els[i].getAttribute("fill-opacity") || this.labelVisible(d.target)).each((d, i, els) => this.setLabelText(select_default(els[i]), d, d.target)).transition(t).attr("fill-opacity", (d) => this.labelVisible(d.target) ? 1 : 0).attrTween("transform", (d) => () => this.labelTransform(d.current));
+    this.renderCentre();
+    this.dom.centreText.attr("opacity", 0).transition(t).attr("opacity", 1);
+    this.renderReset();
+    this.renderPath();
+    this.hooks.onFocus(p);
+  }
+  showTip(event, d) {
+    this.dom.tip.clear().show(event.clientX, event.clientY);
+    const box = this.dom.tip.d.append("div").style("padding", "10px 14px").style("min-width", "170px").style("font-size", "13px").style("line-height", "1.45");
+    box.append("div").style("font-weight", "bold").style("font-size", "14px").text(d.data.name);
+    this.hooks.tooltip(d, box);
+  }
+  destroy() {
+    this.dom.tip.destroy?.();
+  }
+};
+function card(holder, title) {
+  const box = holder.append("div").style("border", `1px solid ${CARD_BORDER}`).style("border-radius", "10px").style("padding", "10px 12px").style("box-sizing", "border-box");
+  const head = box.append("div").style("display", "flex").style("align-items", "center").style("justify-content", "space-between").style("gap", "8px");
+  const titleDiv = head.append("div").style("font-size", "10px").style("font-weight", "bold").style("letter-spacing", "0.12em").style("text-transform", "uppercase").style("color", TEXT_MUTED).style("margin-bottom", "8px").text(title);
+  const headRight = head.append("div").style("display", "flex").style("align-items", "center").style("gap", "8px");
+  return { box, title: titleDiv, headRight, body: box.append("div") };
+}
+function badge(holder, name, color, size = 30) {
+  return holder.append("span").style("flex", "0 0 auto").style("min-width", `${size}px`).style("height", `${size}px`).style("line-height", `${size}px`).style("padding", "0 4px").style("box-sizing", "border-box").style("border-radius", "6px").style("background", color).style("color", "#fff").style("font-weight", "bold").style("font-size", size >= 30 ? "0.8em" : "0.7em").style("text-align", "center").text(badgeCode(name));
+}
+function pill(holder, opts = {}) {
+  const el = holder.append(opts.button ? "button" : "span").style("border-radius", "999px").style("font-weight", "bold").style("font-variant-numeric", "tabular-nums");
+  if (opts.button)
+    el.style("border", "none").style("background", SELECT_STROKE).style("color", "#fff").style("font-size", "13px").style("padding", "8px 16px").style("width", "100%").style("cursor", "pointer");
+  else el.style("background", PILL_BG).style("color", TEXT_DARK).style("font-size", "11px").style("padding", "1px 8px");
+  return el;
+}
+function badgeCode(name) {
+  if (name.length <= 5 && name === name.toUpperCase()) return name;
+  const words = name.split(/[\s()]+/).filter(Boolean);
+  if (/^[<>≤≥]?[\d.]+$/.test(words[0] || "")) return words[0].slice(0, 5);
+  if (words.length > 1)
+    return words.map((w) => w[0]).join("").toUpperCase().slice(0, 3);
+  return name.slice(0, 2).toUpperCase();
+}
+function zoomTarget(d, focus) {
+  const span = focus.x1 - focus.x0 || 1;
+  const ang = (x) => Math.max(0, Math.min(1, (x - focus.x0) / span)) * 2 * Math.PI;
+  return {
+    x0: ang(d.x0),
+    x1: ang(d.x1),
+    y0: Math.max(0, d.y0 - focus.depth),
+    y1: Math.max(0, d.y1 - focus.depth)
+  };
+}
+function arcVisible(g, rings) {
+  return g.y0 >= 1 && g.y1 <= rings + 1 && g.x1 > g.x0;
+}
+function splitLabel(text, maxChars, maxLines) {
+  const words = text.split(/\s+/).filter(Boolean);
+  const lines = [];
+  let cur = "";
+  for (const w of words) {
+    if (!cur) cur = w;
+    else if ((cur + " " + w).length <= maxChars) cur += " " + w;
+    else {
+      lines.push(cur);
+      cur = w;
+    }
+  }
+  if (cur) lines.push(cur);
+  if (lines.length > maxLines) {
+    const rest = lines.slice(maxLines - 1).join(" ");
+    lines.length = maxLines - 1;
+    lines.push(rest);
+  }
+  return lines.map((l) => l.length > maxChars ? l.slice(0, Math.max(1, maxChars - 1)) + "\u2026" : l);
+}
+
+export {
+  SIZE,
+  WARN,
+  SELECT_STROKE,
+  TEXT_DARK,
+  TEXT_MUTED,
+  LINK,
+  RULE,
+  icon,
+  SunburstRenderer,
+  card,
+  badge,
+  pill
+};
+//# sourceMappingURL=chunk-JI632MAR.js.map

package/dist/chunk-JI632MAR.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../plots/sunburst/SunburstRenderer.ts"],
+  "sourcesContent": ["import { Menu } from '#dom'\nimport { hierarchy, partition } from 'd3-hierarchy'\nimport { arc as d3arc } from 'd3-shape'\nimport { rgb as d3rgb } from 'd3-color'\nimport { interpolate } from 'd3-interpolate'\nimport { select } from 'd3-selection'\nimport 'd3-transition'\nimport { schemeTableau10 } from 'd3-scale-chromatic'\n\n/*\nZoomable sunburst renderer, shared by the term-based sunburst chart and the panNDA cohort sunburst.\n\nDraws a tree of SunNode: each wedge is sized by the summed `value` of its subtree. Two rings are shown\naround the centre; zoomTo() makes a wedge the centre so the next two rings appear, and the centre\noffers Back. The renderer owns the chart, the path card on the left (or, with pathCard: false, a\nbreadcrumb above the chart and an empty left column for the caller), the controls above the chart and\nthe stat boxes on the right; what a click does, what is selected or dimmed, the tooltip body and the\nstat values come from the caller's hooks, so the caller decides what the wedges mean.\n\nZooming is animated the way d3's zoomable sunburst does it: every node keeps a `current` geometry\n(angles + ring units, see Geom); zoomTo() assigns each node a `target` relative to the new centre, and\none transition interpolates current \u2192 target while re-drawing arcs and label positions each frame. The\nclicked wedge's target is the full centre disc (y 0..1), so it visibly sweeps round into a circle and\nfades as its children unfold into the rings; Back runs the same interpolation the other way. The\nwedges are created once per setTree() and only their attributes change afterwards.\n*/\n\nconst RINGS = 2\nconst R0 = 74 // centre radius\nconst RING_W = 74\nconst RADIUS = R0 + RINGS * RING_W\nexport const SIZE = RADIUS * 2 + 12\nconst DURATION = 750 // ms, zoom transition\nconst HOVER_DARKEN = 0.5 // d3-color darker() amount on hover\n/** how far a dimmed wedge fades towards white */\nconst DIM = 0.65\nexport const WARN = '#b45309'\n/** wedges touch, divided by thin white lines, with bold white labels; the chart sits on the\n *  page background like every other plot */\nconst DIVIDER = '#ffffff'\nexport const SELECT_STROKE = '#111827'\nconst CENTRE_FILL = '#f8fafc'\nconst CENTRE_STROKE = '#cbd5e1'\nexport const TEXT_DARK = '#111827'\nexport const TEXT_MUTED = '#4b5563'\nexport const LINK = '#2563eb'\nconst CARD_BORDER = '#d1d5db'\nconst PILL_BG = '#e5e7eb'\nexport const RULE = '#e5e7eb'\n/** shade of a ring relative to the centre: the inner ring a touch darker than its hue */\nconst RING_SHADE = [-0.35, 0]\nconst LABEL_FONT = 12 // px, bold\nconst LABEL_LINE_H = LABEL_FONT * 1.15\nconst LABEL_CHAR_W = LABEL_FONT * 0.55 // rough advance of a bold glyph\nconst LABEL_MAX_LINES = 2\nconst NO_HUE = '#9ca3af'\n\n/** radius of a ring-unit coordinate: the centre disc spans 0..1, every ring after is RING_W */\nconst radius = (y: number) => (y < 1 ? y * R0 : R0 + (y - 1) * RING_W)\nconst midRadius = (g: Geom) => (radius(g.y0) + radius(g.y1)) / 2\n\n/** small inline stroke icon for the controls above the chart; `paths` is the svg content */\nexport const icon = (paths: string) =>\n\t`<svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" style=\"vertical-align:-2px;margin-right:6px\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\">${paths}</svg>`\n\n/** one wedge. `value` is the node's own weight (e.g. 1 for a sample-set leaf, or the samples that end\n *  at this node); d3 adds the subtree's weights to it, so a node's size is value + its children's */\nexport type SunNode = {\n\tname: string\n\t/** ring name; undefined for the root and for leaves that are not on a ring */\n\tlevel?: string\n\tvalue?: number\n\tchildren?: SunNode[]\n\t/** the wedge's own hue (e.g. a term category colour); otherwise it takes its nearest ancestor's */\n\tcolor?: string\n\t[payload: string]: any\n}\n\nexport type HNode = any // d3 HierarchyRectangularNode<SunNode>\n/** a card: rounded box with a spaced-capitals title and an optional right-hand slot in its head */\nexport type Card = { box: any; title: any; headRight: any; body: any }\n\nexport type SunburstHooks = {\n\t/** a wedge was clicked; the caller zooms (renderer.zoomTo) and/or selects */\n\tonClick: (d: HNode, event: any) => void\n\tisSelected: (d: HNode) => boolean\n\tisDimmed?: (d: HNode) => boolean\n\t/** css cursor of a visible wedge, default pointer */\n\tcursor?: (d: HNode) => string\n\t/** fills the tooltip below the wedge name */\n\ttooltip: (d: HNode, box: any) => void\n\t/** the centre changed (after setTree and every zoomTo): update stats, toolbar and side panels */\n\tonFocus: (focus: HNode) => void\n}\n\nexport type SunburstRendererOpts = {\n\tholder: any\n\t/** the counted unit, e.g. sample set(s) or sample(s) */\n\tunit: { one: string; many: string }\n\t/** centre text at the root */\n\trootName: string\n\t/** title of the path card at the root, e.g. 'Species selection' */\n\trootPathTitle?: string\n\t/** base colour per first-ring value, before the node's own colour and the default palette */\n\tcolors?: { [value: string]: string }\n\t/** stat box labels, values come from setStats() */\n\tstatLabels?: string[]\n\t/** false: show the path as a breadcrumb above the chart, and leave the left column (dom.left)\n\t *  to the caller; default true */\n\tpathCard?: boolean\n\t/** px between the chart and the columns beside it, default 24; the chart has 6px of its own */\n\tgap?: number\n\thooks: SunburstHooks\n}\n\nexport class SunburstRenderer {\n\topts: SunburstRendererOpts\n\thooks: SunburstHooks\n\tdom: {\n\t\t/** path box: the first ring at the start, then the path of clicked wedges */\n\t\tpathCard?: Card\n\t\t/** left column for the caller's cards, when there is no path card */\n\t\tleft?: any\n\t\t/** path line below the toolbar, when there is no path card */\n\t\tcrumbs?: any\n\t\ttoolbar: any\n\t\treset: any\n\t\tsvg: any\n\t\tg: any\n\t\t/** centre disc (drawn beneath the wedges) and the text on it */\n\t\tcentre: any\n\t\tcentreText: any\n\t\t/** one <path> per node, whole tree; hidden ones have fill-opacity 0 */\n\t\tpaths: any\n\t\t/** one <text> per node, matching paths */\n\t\tlabels: any\n\t\tstats: any\n\t\t/** column right of the chart, below the stat boxes, for the caller's cards */\n\t\tright: any\n\t\ttip: Menu\n\t}\n\troot?: HNode\n\tfocus?: HNode\n\t/** stat box elements and the value they currently show, for the count animation */\n\tstatValues: Map<string, { el: any; value: number; title: any }> = new Map()\n\tbaseColor: Map<string, string> = new Map()\n\n\tconstructor(opts: SunburstRendererOpts) {\n\t\tthis.opts = opts\n\t\tthis.hooks = opts.hooks\n\t\tconst layout = opts.holder\n\t\t\t.append('div')\n\t\t\t.style('display', 'flex')\n\t\t\t.style('gap', `${opts.gap ?? 24}px`)\n\t\t\t.style('align-items', 'flex-start')\n\t\t// path box, or the caller's column, to the left of the chart\n\t\tconst withPathCard = opts.pathCard !== false\n\t\tconst pathCard = withPathCard ? card(layout, 'Selection') : undefined\n\t\tpathCard?.box.style('flex', '0 0 230px')\n\t\tconst left = withPathCard\n\t\t\t? undefined\n\t\t\t: layout\n\t\t\t\t\t.append('div')\n\t\t\t\t\t.style('flex', '0 0 260px')\n\t\t\t\t\t.style('min-width', '0')\n\t\t\t\t\t.style('display', 'flex')\n\t\t\t\t\t.style('flex-direction', 'column')\n\t\t\t\t\t.style('gap', '12px')\n\t\tconst panel = layout.append('div').append('div').style('width', `${SIZE}px`)\n\t\t// controls above the chart, in spaced capitals: reset, then any of the caller's (addControl)\n\t\tconst toolbar = panel\n\t\t\t.append('div')\n\t\t\t.style('display', 'flex')\n\t\t\t.style('justify-content', 'center')\n\t\t\t.style('gap', '28px')\n\t\t\t.style('min-height', '20px')\n\t\tconst crumbs = withPathCard\n\t\t\t? undefined\n\t\t\t: panel\n\t\t\t\t\t.append('div')\n\t\t\t\t\t.attr('data-testid', 'sjpp-sunburst-crumbs')\n\t\t\t\t\t.style('text-align', 'center')\n\t\t\t\t\t.style('font-size', '12px')\n\t\t\t\t\t.style('margin-top', '6px')\n\t\t\t\t\t.style('min-height', '16px')\n\t\tconst svg = panel\n\t\t\t.append('svg')\n\t\t\t.attr('width', SIZE)\n\t\t\t.attr('height', SIZE)\n\t\t\t.style('display', 'block')\n\t\t\t.style('user-select', 'none')\n\t\t\t.on('mousedown', (event: MouseEvent) => {\n\t\t\t\t// Stop Shift+click from extending a browser text selection outside the chart.\n\t\t\t\tif (event.shiftKey && event.button == 0) event.preventDefault()\n\t\t\t})\n\t\tconst right = layout\n\t\t\t.append('div')\n\t\t\t.style('flex', '0 0 300px')\n\t\t\t.style('min-width', '0')\n\t\t\t.style('display', 'flex')\n\t\t\t.style('flex-direction', 'column')\n\t\t\t.style('gap', '12px')\n\t\t// stat boxes; their numbers follow the centre of the chart and count up/down\n\t\tconst stats = right\n\t\t\t.append('div')\n\t\t\t.style('display', 'grid')\n\t\t\t.style('grid-template-columns', '1fr 1fr')\n\t\t\t.style('gap', '8px')\n\t\tthis.dom = {\n\t\t\tpathCard,\n\t\t\tleft,\n\t\t\tcrumbs,\n\t\t\ttoolbar,\n\t\t\treset: undefined,\n\t\t\tsvg,\n\t\t\tg: svg.append('g').attr('transform', `translate(${SIZE / 2},${SIZE / 2})`),\n\t\t\tcentre: undefined,\n\t\t\tcentreText: undefined,\n\t\t\tpaths: undefined,\n\t\t\tlabels: undefined,\n\t\t\tstats,\n\t\t\tright,\n\t\t\ttip: new Menu({ padding: '' })\n\t\t}\n\t\tthis.dom.reset = this.addControl()\n\t\t\t.html(`${icon('<path d=\"M3 12a9 9 0 1 0 3-6.7\"/><polyline points=\"3 3 3 9 9 9\"/>')}RESET`)\n\t\t\t.on('click', () => {\n\t\t\t\tif (this.focus?.depth) this.zoomTo(this.root)\n\t\t\t})\n\t\tfor (const label of opts.statLabels || []) {\n\t\t\tconst box = card(stats, label)\n\t\t\tbox.box.style('padding', '6px 10px')\n\t\t\t// the label on one line, so the box stays short\n\t\t\tbox.title\n\t\t\t\t.style('margin-bottom', '0')\n\t\t\t\t.style('white-space', 'nowrap')\n\t\t\t\t.style('overflow', 'hidden')\n\t\t\t\t.style('text-overflow', 'ellipsis')\n\t\t\t\t.attr('title', label)\n\t\t\tconst num = box.body\n\t\t\t\t.append('div')\n\t\t\t\t.style('font-size', '20px')\n\t\t\t\t.style('line-height', '1.2')\n\t\t\t\t.style('font-weight', '500')\n\t\t\t\t.style('color', TEXT_DARK)\n\t\t\t\t.style('font-variant-numeric', 'tabular-nums')\n\t\t\t\t.text('0')\n\t\t\tthis.statValues.set(label, { el: num, value: 0, title: box.title })\n\t\t}\n\t}\n\n\t/** a control in the toolbar above the chart */\n\taddControl() {\n\t\treturn this.dom.toolbar\n\t\t\t.append('div')\n\t\t\t.style('letter-spacing', '0.15em')\n\t\t\t.style('font-size', '11px')\n\t\t\t.style('font-weight', 'bold')\n\t\t\t.style('color', TEXT_MUTED)\n\t\t\t.style('cursor', 'pointer')\n\t\t\t.style('user-select', 'none')\n\t\t\t.style('white-space', 'nowrap')\n\t}\n\n\tunitText(n: number): string {\n\t\treturn `${n.toLocaleString()} ${n === 1 ? this.opts.unit.one : this.opts.unit.many}`\n\t}\n\n\t/** (re)draw the chart for a new tree, centred on the root */\n\tsetTree(tree: SunNode) {\n\t\tthis.root = hierarchy<SunNode>(tree)\n\t\t\t.sum(d => d.value || 0)\n\t\t\t.sort(() => 0)\n\t\tpartition<SunNode>().size([2 * Math.PI, this.root.height + 1])(this.root)\n\t\tthis.focus = this.root\n\t\t// first-ring colours: the dataset colours, the node's own, else a palette in ring order\n\t\tthis.baseColor.clear()\n\t\tlet pi = 0\n\t\tfor (const c of this.root.children || []) {\n\t\t\tthis.baseColor.set(\n\t\t\t\tc.data.name,\n\t\t\t\tthis.opts.colors?.[c.data.name] || c.data.color || schemeTableau10[pi++ % schemeTableau10.length]\n\t\t\t)\n\t\t}\n\t\tthis.buildChart()\n\t\tthis.hooks.onFocus(this.focus)\n\t}\n\n\t/************ colours ************/\n\n\t/** the hue of a wedge: its own colour or its nearest ancestor's, down to the first ring's */\n\thue(d: HNode): string {\n\t\tlet n = d\n\t\twhile (n.depth > 1) {\n\t\t\tif (n.data.color) return n.data.color\n\t\t\tn = n.parent\n\t\t}\n\t\treturn n.depth === 1 ? this.baseColor.get(n.data.name) || NO_HUE : NO_HUE\n\t}\n\n\t/** the hue, shaded by the ring the wedge occupies around the current centre (so a wedge keeps its\n\t *  hue at every zoom level), faded when dimmed */\n\tcolor(d: HNode): string {\n\t\tif (d.depth === 0) return CENTRE_FILL\n\t\tconst ring = Math.max(0, Math.min(RING_SHADE.length - 1, d.depth - (this.focus?.depth ?? 0) - 1))\n\t\tconst c = d3rgb(this.hue(d)).brighter(RING_SHADE[ring]).formatHex()\n\t\treturn d.dim ? d3rgb(interpolate(c, '#ffffff')(DIM)).formatHex() : c\n\t}\n\n\thoverColor(d: HNode): string {\n\t\treturn d3rgb(this.color(d)).darker(HOVER_DARKEN).formatHex()\n\t}\n\n\t/************ rendering ************/\n\n\tarc = d3arc()\n\t\t.startAngle((d: any) => d.x0)\n\t\t.endAngle((d: any) => d.x1)\n\t\t.innerRadius((d: any) => radius(d.y0))\n\t\t.outerRadius((d: any) => Math.max(radius(d.y0), radius(d.y1)))\n\n\t/** build every wedge and label once; zoomTo() then only animates their attributes */\n\tbuildChart() {\n\t\tconst g = this.dom.g\n\t\tg.selectAll('*').remove()\n\t\tconst root = this.root!\n\t\troot.each((d: HNode) => (d.current = { x0: d.x0, x1: d.x1, y0: d.y0, y1: d.y1 } as Geom))\n\t\tconst nodes = root.descendants().slice(1)\n\n\t\t// centre sits beneath the wedges so a clicked wedge can sweep over it as it grows;\n\t\t// hidden wedges have pointer-events none, so clicks fall through to the disc\n\t\tthis.dom.centre = g.append('g')\n\t\tthis.dom.centre\n\t\t\t.append('circle')\n\t\t\t.attr('r', R0 - 3)\n\t\t\t.attr('fill', CENTRE_FILL)\n\t\t\t.attr('stroke', CENTRE_STROKE)\n\t\t\t.attr('stroke-width', 1.5)\n\t\t\t.on('click', () => {\n\t\t\t\tif (this.focus!.depth) this.zoomTo(this.focus!.parent)\n\t\t\t})\n\t\tthis.dom.centreText = this.dom.centre.append('g').attr('pointer-events', 'none')\n\n\t\tthis.dom.paths = g\n\t\t\t.append('g')\n\t\t\t.selectAll('path')\n\t\t\t.data(nodes)\n\t\t\t.join('path')\n\t\t\t.attr('class', 'sjpp-sunburst-wedge')\n\t\t\t.attr('fill', (d: HNode) => this.color(d))\n\t\t\t.attr('fill-opacity', (d: HNode) => (arcVisible(d.current, RINGS) ? 1 : 0))\n\t\t\t.attr('stroke-opacity', (d: HNode) => (arcVisible(d.current, RINGS) ? 1 : 0))\n\t\t\t.attr('pointer-events', (d: HNode) => (arcVisible(d.current, RINGS) ? 'auto' : 'none'))\n\t\t\t.attr('d', (d: HNode) => this.arc(d.current))\n\t\t\t.style('cursor', 'pointer')\n\t\t\t.on('mouseenter', (event: any, d: HNode) => {\n\t\t\t\tselect(event.currentTarget).attr('fill', this.hoverColor(d))\n\t\t\t\tthis.showTip(event, d)\n\t\t\t})\n\t\t\t.on('mouseleave', (event: any, d: HNode) => {\n\t\t\t\tselect(event.currentTarget).attr('fill', this.color(d))\n\t\t\t\tthis.dom.tip.hide()\n\t\t\t})\n\t\t\t.on('click', (event: any, d: HNode) => this.hooks.onClick(d, event))\n\n\t\tthis.dom.labels = g\n\t\t\t.append('g')\n\t\t\t.attr('pointer-events', 'none')\n\t\t\t.attr('text-anchor', 'middle')\n\t\t\t.style('user-select', 'none')\n\t\t\t.selectAll('text')\n\t\t\t.data(nodes)\n\t\t\t.join('text')\n\t\t\t.attr('font-size', `${LABEL_FONT}px`)\n\t\t\t.attr('font-weight', 'bold')\n\t\t\t.attr('fill', '#fff')\n\t\t\t.attr('dominant-baseline', 'middle')\n\t\t\t.attr('fill-opacity', (d: HNode) => (this.labelVisible(d.current) ? 1 : 0))\n\t\t\t.attr('transform', (d: HNode) => this.labelTransform(d.current))\n\t\t\t.each((d: HNode, i: number, els: any[]) => this.setLabelText(select(els[i]), d, d.current))\n\n\t\tthis.refresh()\n\t\tthis.renderCentre()\n\t}\n\n\t/** a label shows only where its wedge is visible and at least one line fits along the arc */\n\tlabelVisible(g: Geom): boolean {\n\t\treturn arcVisible(g, RINGS) && (g.x1 - g.x0) * midRadius(g) >= LABEL_LINE_H + 2\n\t}\n\n\t/** along the wedge's mid radius, reading outward; flipped in the left half so it is upright */\n\tlabelTransform(g: Geom): string {\n\t\tconst a = ((g.x0 + g.x1) / 2) * (180 / Math.PI)\n\t\treturn `rotate(${a - 90}) translate(${midRadius(g)},0) rotate(${a < 180 ? 0 : 180})`\n\t}\n\n\t/** wrap the node name into as many lines as the wedge's arc length allows (max 2), each\n\t *  no longer than the ring is thick */\n\tsetLabelText(text: any, d: HNode, g: Geom) {\n\t\tconst arcLen = (g.x1 - g.x0) * midRadius(g)\n\t\tconst nLines = Math.max(1, Math.min(LABEL_MAX_LINES, Math.floor(arcLen / LABEL_LINE_H)))\n\t\tconst maxChars = Math.floor((RING_W - 8) / LABEL_CHAR_W)\n\t\tconst lines = splitLabel(d.data.name, maxChars, nLines)\n\t\ttext.selectAll('tspan').remove()\n\t\tlines.forEach((l: string, i: number) => {\n\t\t\ttext\n\t\t\t\t.append('tspan')\n\t\t\t\t.attr('x', 0)\n\t\t\t\t.attr('dy', i === 0 ? `${(-(lines.length - 1) * LABEL_LINE_H) / 2}px` : `${LABEL_LINE_H}px`)\n\t\t\t\t.text(l)\n\t\t})\n\t}\n\n\t/** name, count and Back on the centre disc */\n\trenderCentre() {\n\t\tconst focus = this.focus!\n\t\tconst t = this.dom.centreText\n\t\tt.selectAll('*').remove()\n\t\tthis.dom.centre.select('circle').style('cursor', focus.depth ? 'pointer' : 'default')\n\t\tconst name = focus.depth ? focus.data.name : this.opts.rootName\n\t\tconst nameLines = splitLabel(name, Math.floor((2 * (R0 - 16)) / (15 * 0.6)), 2)\n\t\tconst rows: { text: string; size: number; weight?: string; color: string; h: number }[] = [\n\t\t\t...nameLines.map(l => ({ text: l, size: 15, weight: 'bold', color: TEXT_DARK, h: 18 })),\n\t\t\t{ text: this.unitText(focus.value || 0), size: 12, color: TEXT_MUTED, h: 16 }\n\t\t]\n\t\tif (focus.depth) rows.push({ text: '\u2039  BACK', size: 12, weight: 'bold', color: LINK, h: 22 })\n\t\tconst total = rows.reduce((s, r) => s + r.h, 0)\n\t\tlet y = -total / 2\n\t\tfor (const r of rows) {\n\t\t\tt.append('text')\n\t\t\t\t.attr('text-anchor', 'middle')\n\t\t\t\t.attr('dominant-baseline', 'middle')\n\t\t\t\t.attr('y', y + r.h / 2)\n\t\t\t\t.attr('font-size', `${r.size}px`)\n\t\t\t\t.attr('font-weight', r.weight || 'normal')\n\t\t\t\t.attr('fill', r.color)\n\t\t\t\t.attr('letter-spacing', r.text.endsWith('BACK') ? '0.12em' : null)\n\t\t\t\t.text(r.text)\n\t\t\ty += r.h\n\t\t}\n\t}\n\n\t/** re-apply selection strokes, dimming and the path card after the caller's selection changed;\n\t *  no geometry changes */\n\trefresh() {\n\t\tthis.root!.each((d: HNode) => (d.dim = !!this.hooks.isDimmed?.(d)))\n\t\tthis.dom.paths\n\t\t\t.attr('fill', (d: HNode) => this.color(d))\n\t\t\t.attr('stroke', (d: HNode) => (this.hooks.isSelected(d) ? SELECT_STROKE : DIVIDER))\n\t\t\t.attr('stroke-width', (d: HNode) => (this.hooks.isSelected(d) ? 3 : 1))\n\t\t\t.attr('stroke-linejoin', 'round')\n\t\t\t.style('cursor', (d: HNode) => this.hooks.cursor?.(d) || 'pointer')\n\t\tthis.dom.labels.attr('fill', (d: HNode) => (d.dim ? TEXT_MUTED : '#fff'))\n\t\tthis.renderReset()\n\t\tthis.renderPath()\n\t}\n\n\t/** reset is only active when zoomed in */\n\trenderReset() {\n\t\tconst zoomed = !!this.focus?.depth\n\t\tthis.dom.reset.style('opacity', zoomed ? 1 : 0.35).style('cursor', zoomed ? 'pointer' : 'default')\n\t}\n\n\t/** the path of clicked wedges, as the path card or the breadcrumb */\n\trenderPath() {\n\t\tif (this.dom.pathCard) this.renderPathCard(this.dom.pathCard)\n\t\telse this.renderCrumbs()\n\t}\n\n\t/** root \u203A \u2026 \u203A centre, each earlier step clickable to zoom back to it */\n\trenderCrumbs() {\n\t\tconst box = this.dom.crumbs\n\t\tbox.selectAll('*').remove()\n\t\tconst focus = this.focus!\n\t\tconst steps: HNode[] = focus.ancestors().reverse()\n\t\tsteps.forEach((d: HNode, i: number) => {\n\t\t\tif (i) box.append('span').style('color', '#9ca3af').style('margin', '0 6px').text('\u203A')\n\t\t\tconst isFocus = d === focus\n\t\t\tbox\n\t\t\t\t.append('span')\n\t\t\t\t.attr('class', 'sjpp-sunburst-crumb')\n\t\t\t\t.style('color', isFocus ? TEXT_DARK : LINK)\n\t\t\t\t.style('font-weight', isFocus ? 'bold' : 'normal')\n\t\t\t\t.style('cursor', isFocus ? 'default' : 'pointer')\n\t\t\t\t.attr('title', isFocus ? null : `Go to ${d.depth ? d.data.name : this.opts.rootName}`)\n\t\t\t\t.text(d.depth ? d.data.name : this.opts.rootName)\n\t\t\t\t.on('click', () => {\n\t\t\t\t\tif (!isFocus) this.zoomTo(d)\n\t\t\t\t})\n\t\t})\n\t}\n\n\t/** the path card: at the root it lists the first ring to click into; once zoomed it shows the path\n\t *  of clicked wedges, each with a colour-coded badge, and clicking a line zooms back to it */\n\trenderPathCard(pathCard: Card) {\n\t\tconst box = pathCard.body\n\t\tbox.selectAll('*').remove()\n\t\tconst focus = this.focus!\n\t\tconst atRoot = !focus.depth\n\t\tpathCard.title.text(atRoot ? this.opts.rootPathTitle || 'Selection' : 'Selection')\n\t\tconst nodes: HNode[] = atRoot ? this.root!.children || [] : focus.ancestors().reverse().slice(1)\n\t\tconst STEP = 7 // px indent per ring, so the path reads as parent \u2192 child\n\t\tnodes.forEach((d: HNode, i: number) => {\n\t\t\tconst isFocus = d === focus\n\t\t\tconst indent = atRoot ? 0 : i * STEP\n\t\t\tconst row = box.append('div').style('position', 'relative').style('margin-left', `${indent}px`)\n\t\t\tif (indent) {\n\t\t\t\t// elbow connector from the parent's badge column down into this line\n\t\t\t\trow\n\t\t\t\t\t.append('div')\n\t\t\t\t\t.style('position', 'absolute')\n\t\t\t\t\t.style('left', `${-STEP + 2}px`)\n\t\t\t\t\t.style('top', '-6px')\n\t\t\t\t\t.style('width', `${STEP - 4}px`)\n\t\t\t\t\t.style('height', '22px')\n\t\t\t\t\t.style('border-left', '1px solid #cbd5e1')\n\t\t\t\t\t.style('border-bottom', '1px solid #cbd5e1')\n\t\t\t\t\t.style('border-bottom-left-radius', '4px')\n\t\t\t}\n\t\t\tconst line = row\n\t\t\t\t.append('div')\n\t\t\t\t.attr('class', 'sjpp-sunburst-pathrow')\n\t\t\t\t.style('display', 'flex')\n\t\t\t\t.style('align-items', 'center')\n\t\t\t\t.style('gap', '8px')\n\t\t\t\t.style('padding', '4px 6px')\n\t\t\t\t.style('margin', '2px 0')\n\t\t\t\t.style('border-radius', '6px')\n\t\t\t\t.style('background', isFocus ? '#eef2ff' : 'transparent')\n\t\t\t\t.style('cursor', isFocus ? 'default' : 'pointer')\n\t\t\t\t.attr('title', isFocus ? d.data.name : `Go to ${d.data.name}`)\n\t\t\t\t.on('click', () => {\n\t\t\t\t\tif (!isFocus) this.zoomTo(d)\n\t\t\t\t})\n\t\t\t\t.on('mouseenter', (event: any) => {\n\t\t\t\t\tif (!isFocus) select(event.currentTarget).style('background', '#f3f4f6')\n\t\t\t\t})\n\t\t\t\t.on('mouseleave', (event: any) => {\n\t\t\t\t\tif (!isFocus) select(event.currentTarget).style('background', 'transparent')\n\t\t\t\t})\n\t\t\tbadge(line, d.data.name, this.color(d))\n\t\t\tconst text = line.append('div').style('flex', '1 1 auto').style('min-width', '0').style('line-height', '1.2')\n\t\t\ttext\n\t\t\t\t.append('div')\n\t\t\t\t.style('font-size', '0.9em')\n\t\t\t\t.style('font-weight', isFocus ? 'bold' : 'normal')\n\t\t\t\t.style('color', '#111827')\n\t\t\t\t.style('overflow', 'hidden')\n\t\t\t\t.style('text-overflow', 'ellipsis')\n\t\t\t\t.style('white-space', 'nowrap')\n\t\t\t\t.text(d.data.name)\n\t\t\ttext\n\t\t\t\t.append('div')\n\t\t\t\t.style('font-size', '0.7em')\n\t\t\t\t.style('color', '#6b7280')\n\t\t\t\t.text(`${d.data.level} \u00B7 ${this.unitText(d.value || 0)}`)\n\t\t})\n\t}\n\n\t/** shown title of a stat box, which keeps `label` as its key */\n\tsetStatTitle(label: string, text: string) {\n\t\tthis.statValues.get(label)?.title.text(text).attr('title', text)\n\t}\n\n\t/** stat box values, by label; null shows a dash with `nullTitle` as its tooltip. Numbers roll from\n\t *  the previous value */\n\tsetStats(values: Map<string, number | null>, nullTitle = (_label: string) => '') {\n\t\tfor (const [label, v] of values) {\n\t\t\tconst box = this.statValues.get(label)\n\t\t\tif (!box) continue\n\t\t\tif (v === null) {\n\t\t\t\tbox.el\n\t\t\t\t\t.interrupt()\n\t\t\t\t\t.text('\u2014')\n\t\t\t\t\t.attr('title', nullTitle(label) || null)\n\t\t\t\tbox.value = 0\n\t\t\t\tcontinue\n\t\t\t}\n\t\t\tbox.el.attr('title', null)\n\t\t\tconst from = box.value\n\t\t\tbox.value = v\n\t\t\tconst i = interpolate(from, v)\n\t\t\tbox.el\n\t\t\t\t.transition()\n\t\t\t\t.duration(DURATION)\n\t\t\t\t.tween('text', () => (t: number) => box.el.text(Math.round(i(t)).toLocaleString()))\n\t\t}\n\t}\n\n\t/************ interaction ************/\n\n\t/** animate every wedge from its current geometry to where it sits with `p` at the centre */\n\tzoomTo(p: HNode) {\n\t\tthis.focus = p\n\t\tthis.dom.tip.hide()\n\t\tconst root = this.root!\n\t\troot.each((d: HNode) => (d.target = zoomTarget(d, p)))\n\t\tconst t = this.dom.g.transition().duration(DURATION)\n\n\t\t// no hover or clicks on wedges while they move (a wedge sweeping under the cursor would\n\t\t// otherwise darken and pop a tooltip); the visible ones take pointer events again at the end.\n\t\t// A zoom that interrupts this one re-runs the same steps, so nothing is left disabled.\n\t\tthis.dom.paths.attr('pointer-events', 'none')\n\t\t// judged by the target, not d.current: the group's end event fires a tick before the\n\t\t// wedge tweens write their final frame, so current would still be a hair short of it\n\t\tt.on('end', () =>\n\t\t\tthis.dom.paths.attr('pointer-events', (d: HNode) => (arcVisible(d.target, RINGS) ? 'auto' : 'none'))\n\t\t)\n\t\tthis.dom.paths\n\t\t\t.transition(t)\n\t\t\t// every node's current geometry moves, even hidden ones, so a later zoom starts right\n\t\t\t.tween('data', (d: HNode) => {\n\t\t\t\tconst i = interpolate(d.current, d.target)\n\t\t\t\treturn (k: number) => (d.current = i(k))\n\t\t\t})\n\t\t\t.filter(function (this: any, d: HNode) {\n\t\t\t\treturn +this.getAttribute('fill-opacity') || arcVisible(d.target, RINGS)\n\t\t\t})\n\t\t\t.attr('fill-opacity', (d: HNode) => (arcVisible(d.target, RINGS) ? 1 : 0))\n\t\t\t.attr('stroke-opacity', (d: HNode) => (arcVisible(d.target, RINGS) ? 1 : 0))\n\t\t\t.attr('fill', (d: HNode) => this.color(d))\n\t\t\t.attrTween('d', (d: HNode) => () => this.arc(d.current))\n\n\t\tthis.dom.labels\n\t\t\t.filter((d: HNode, i: number, els: any[]) => +els[i].getAttribute('fill-opacity') || this.labelVisible(d.target))\n\t\t\t.each((d: HNode, i: number, els: any[]) => this.setLabelText(select(els[i]), d, d.target))\n\t\t\t.transition(t)\n\t\t\t.attr('fill-opacity', (d: HNode) => (this.labelVisible(d.target) ? 1 : 0))\n\t\t\t.attrTween('transform', (d: HNode) => () => this.labelTransform(d.current))\n\n\t\t// the new centre text fades in beneath the wedge sweeping over the disc\n\t\tthis.renderCentre()\n\t\tthis.dom.centreText.attr('opacity', 0).transition(t).attr('opacity', 1)\n\t\tthis.renderReset()\n\t\tthis.renderPath()\n\t\tthis.hooks.onFocus(p)\n\t}\n\n\tshowTip(event: any, d: HNode) {\n\t\tthis.dom.tip.clear().show(event.clientX, event.clientY)\n\t\tconst box = this.dom.tip.d\n\t\t\t.append('div')\n\t\t\t.style('padding', '10px 14px')\n\t\t\t.style('min-width', '170px')\n\t\t\t.style('font-size', '13px')\n\t\t\t.style('line-height', '1.45')\n\t\tbox.append('div').style('font-weight', 'bold').style('font-size', '14px').text(d.data.name)\n\t\tthis.hooks.tooltip(d, box)\n\t}\n\n\tdestroy() {\n\t\tthis.dom.tip.destroy?.()\n\t}\n}\n\n/************ shared pieces ************/\n\n/** the card every box on the page is built from: rounded border, spaced-capitals title,\n *  a right-hand slot in the head for a count or control, and a body */\nexport function card(holder: any, title: string): Card {\n\tconst box = holder\n\t\t.append('div')\n\t\t.style('border', `1px solid ${CARD_BORDER}`)\n\t\t.style('border-radius', '10px')\n\t\t.style('padding', '10px 12px')\n\t\t.style('box-sizing', 'border-box')\n\tconst head = box\n\t\t.append('div')\n\t\t.style('display', 'flex')\n\t\t.style('align-items', 'center')\n\t\t.style('justify-content', 'space-between')\n\t\t.style('gap', '8px')\n\tconst titleDiv = head\n\t\t.append('div')\n\t\t.style('font-size', '10px')\n\t\t.style('font-weight', 'bold')\n\t\t.style('letter-spacing', '0.12em')\n\t\t.style('text-transform', 'uppercase')\n\t\t.style('color', TEXT_MUTED)\n\t\t.style('margin-bottom', '8px')\n\t\t.text(title)\n\tconst headRight = head.append('div').style('display', 'flex').style('align-items', 'center').style('gap', '8px')\n\treturn { box, title: titleDiv, headRight, body: box.append('div') }\n}\n\n/** colour-coded square with the short code of a name */\nexport function badge(holder: any, name: string, color: string, size = 30) {\n\treturn holder\n\t\t.append('span')\n\t\t.style('flex', '0 0 auto')\n\t\t.style('min-width', `${size}px`)\n\t\t.style('height', `${size}px`)\n\t\t.style('line-height', `${size}px`)\n\t\t.style('padding', '0 4px')\n\t\t.style('box-sizing', 'border-box')\n\t\t.style('border-radius', '6px')\n\t\t.style('background', color)\n\t\t.style('color', '#fff')\n\t\t.style('font-weight', 'bold')\n\t\t.style('font-size', size >= 30 ? '0.8em' : '0.7em')\n\t\t.style('text-align', 'center')\n\t\t.text(badgeCode(name))\n}\n\n/** rounded pill: the primary action button, or a count */\nexport function pill(holder: any, opts: { button?: boolean } = {}) {\n\tconst el = holder\n\t\t.append(opts.button ? 'button' : 'span')\n\t\t.style('border-radius', '999px')\n\t\t.style('font-weight', 'bold')\n\t\t.style('font-variant-numeric', 'tabular-nums')\n\tif (opts.button)\n\t\tel.style('border', 'none')\n\t\t\t.style('background', SELECT_STROKE)\n\t\t\t.style('color', '#fff')\n\t\t\t.style('font-size', '13px')\n\t\t\t.style('padding', '8px 16px')\n\t\t\t.style('width', '100%')\n\t\t\t.style('cursor', 'pointer')\n\telse el.style('background', PILL_BG).style('color', TEXT_DARK).style('font-size', '11px').style('padding', '1px 8px')\n\treturn el\n}\n\n/** short code for a badge: short upper-case names as they are (AD, CSF, T-ALL), the leading number\n *  of a bin label (10 to <20 \u2192 10), initials of multi-word names (Frontal Cortex \u2192 FC), else the\n *  first two letters (Human \u2192 HU) */\nexport function badgeCode(name: string): string {\n\tif (name.length <= 5 && name === name.toUpperCase()) return name\n\tconst words = name.split(/[\\s()]+/).filter(Boolean)\n\tif (/^[<>\u2264\u2265]?[\\d.]+$/.test(words[0] || '')) return words[0].slice(0, 5)\n\tif (words.length > 1)\n\t\treturn words\n\t\t\t.map(w => w[0])\n\t\t\t.join('')\n\t\t\t.toUpperCase()\n\t\t\t.slice(0, 3)\n\treturn name.slice(0, 2).toUpperCase()\n}\n\n/*********** zoom geometry (d3 zoomable-sunburst) ***********/\n\n/** arc geometry of one wedge in partition units: angles in radians; y in ring units, where\n *  y=0 is the centre point, y=1 the edge of the centre circle and y=2 the outer edge of the\n *  first ring */\ntype Geom = { x0: number; x1: number; y0: number; y1: number }\n\n/** where a node lands once `focus` is the centre: its angles are rescaled to the focus's\n *  span (clamped, so wedges outside the focus collapse to zero width) and its rings shift\n *  inward by the focus depth (so the focus itself becomes the full centre disc, y 0..1,\n *  and its ancestors collapse onto the centre point). Interpolating a node's current\n *  geometry toward this is what makes a clicked wedge sweep into a circle. */\nfunction zoomTarget(d: Geom & { depth: number }, focus: Geom & { depth: number }): Geom {\n\tconst span = focus.x1 - focus.x0 || 1\n\tconst ang = (x: number) => Math.max(0, Math.min(1, (x - focus.x0) / span)) * 2 * Math.PI\n\treturn {\n\t\tx0: ang(d.x0),\n\t\tx1: ang(d.x1),\n\t\ty0: Math.max(0, d.y0 - focus.depth),\n\t\ty1: Math.max(0, d.y1 - focus.depth)\n\t}\n}\n\n/** a wedge is drawn when it lies within the `rings` shown around the centre and has width */\nfunction arcVisible(g: Geom, rings: number): boolean {\n\treturn g.y0 >= 1 && g.y1 <= rings + 1 && g.x1 > g.x0\n}\n\n/** break a label into at most `maxLines` lines of at most `maxChars` characters, splitting\n *  at spaces; a line that still does not fit is truncated with an ellipsis */\nexport function splitLabel(text: string, maxChars: number, maxLines: number): string[] {\n\tconst words = text.split(/\\s+/).filter(Boolean)\n\tconst lines: string[] = []\n\tlet cur = ''\n\tfor (const w of words) {\n\t\tif (!cur) cur = w\n\t\telse if ((cur + ' ' + w).length <= maxChars) cur += ' ' + w\n\t\telse {\n\t\t\tlines.push(cur)\n\t\t\tcur = w\n\t\t}\n\t}\n\tif (cur) lines.push(cur)\n\tif (lines.length > maxLines) {\n\t\tconst rest = lines.slice(maxLines - 1).join(' ')\n\t\tlines.length = maxLines - 1\n\t\tlines.push(rest)\n\t}\n\treturn lines.map(l => (l.length > maxChars ? l.slice(0, Math.max(1, maxChars - 1)) + '\u2026' : l))\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/chunk-JKPMBNRM.js

@@ -0,0 +1,100 @@
+import {
+  junctionCustomTermSource
+} from "./chunk-FIWVGOSE.js";
+import {
+  getTermSampleTypes,
+  mayRenderFractionSelection,
+  mayRenderSampleTypeRow
+} from "./chunk-YBXQBSFY.js";
+import {
+  getTermLabelSuffix
+} from "./chunk-CFYWQJ7F.js";
+
+// termdb/handlers/junction.ts
+var SearchHandler = class {
+  async init(opts) {
+    if (!opts?.holder) throw new Error("opts.holder is required");
+    if (typeof opts.callback != "function") throw new Error("opts.callback is required");
+    const entries = getJunctionCustomTerms(opts.app.vocabApi.state?.customTerms);
+    render(opts, entries);
+  }
+};
+function getJunctionCustomTerms(customTerms) {
+  if (!Array.isArray(customTerms)) return [];
+  return customTerms.filter((term) => term?.source === junctionCustomTermSource && term.tw?.term);
+}
+function render(opts, entries) {
+  const holder = opts.holder;
+  holder.selectAll("*").remove();
+  const div = holder.append("div").style("padding", "10px 0px");
+  if (!entries.length) {
+    div.append("div").text("Junctions selected from genome browser will be shown here.");
+    return;
+  }
+  const termdbConfig = opts.app.vocabApi.termdbConfig;
+  const query = termdbConfig?.queries?.junction;
+  const sampleTypeSelect = mayRenderSampleTypeRow(div.append("div"), query, termdbConfig);
+  const pick = (termOrTw) => {
+    const termSampleTypes = getTermSampleTypes(sampleTypeSelect, query, termdbConfig);
+    if (!termSampleTypes) return;
+    const all = !termSampleTypes.sampleTypes?.length || query.sampleTypes.every((t) => termSampleTypes.sampleTypes.includes(t));
+    const apply = (term) => all ? term : withSampleTypes(term, termSampleTypes);
+    return opts.callback(termOrTw.term ? { ...termOrTw, term: apply(termOrTw.term) } : apply(termOrTw));
+  };
+  const listHolder = div.append("div");
+  const renderList = () => {
+    const entries2 = getJunctionCustomTerms(opts.app.vocabApi.state?.customTerms);
+    if (!entries2.length) return render(opts, entries2);
+    listHolder.selectAll("*").remove();
+    const itemOpts = { ...opts, callback: pick, renderList };
+    const listDiv = listHolder.append("div");
+    const fractionDiv = listHolder.append("div");
+    for (const entry of entries2) {
+      if (entry.eventlabel) renderJunctionEvent(listDiv, fractionDiv, entry, itemOpts);
+      else renderJunction(listDiv, entry, itemOpts);
+    }
+    listDiv.append("div").style("font-size", ".7em").style("margin-top", "10px").style("opacity", 0.7).text("Select additional junctions from genome browser.");
+  };
+  renderList();
+}
+function renderJunction(holder, entry, opts) {
+  const choice = holder.append("div");
+  choice.append("div").attr("class", "ts_pill sja_filter_tag_btn sja_tree_click_term").style("display", "inline-block").style("border-radius", "6px").style("margin", "1px 0").text(entry.tw.term.name).on("click", () => opts.callback(entry.tw.term));
+  addDeleteButton(choice, entry, opts);
+}
+function renderJunctionEvent(holder, fractionDiv, entry, opts) {
+  const eventHolder = holder.append("div");
+  const pillRow = eventHolder.append("div");
+  pillRow.append("div").attr("class", "ts_pill sja_filter_tag_btn sja_tree_click_term").style("display", "inline-block").style("border-radius", "6px").style("margin", "1px 0").text(entry.eventlabel).on("click", () => selectJunctionEvent(holder, fractionDiv, entry, opts));
+  addDeleteButton(pillRow, entry, opts);
+  eventHolder.append("div").style("margin-left", "10px").style("font-size", ".7em").selectAll("div").data(entry.tw.term.termlst, (term) => term.id).enter().append("div").text((term) => term.name);
+}
+function selectJunctionEvent(listDiv, fractionDiv, entry, opts) {
+  const isStaged = mayRenderFractionSelection({
+    term: entry.tw.term,
+    selectionMode: opts.termCollectionSelectionMode,
+    listDiv,
+    fractionDiv,
+    callback: (tw) => opts.callback(tw)
+  });
+  if (!isStaged) opts.callback(entry.tw.term);
+}
+function addDeleteButton(holder, entry, opts) {
+  holder.append("button").attr("data-testid", "sjpp-junction-delete").style("margin-left", "4px").attr("aria-label", `Delete ${entry.name}`).text("\xD7").on("click", async () => {
+    await opts.app.vocabApi.deleteCustomTermById(entry.id);
+    opts.renderList();
+  });
+}
+function withSampleTypes(term, termSampleTypes) {
+  const { sampleTypes, sampleTypeLabel } = termSampleTypes;
+  const t = { ...term, sampleTypes, sampleTypeLabel };
+  t.name = term.name + getTermLabelSuffix(t);
+  if (Array.isArray(term.termlst)) t.termlst = term.termlst.map((m) => ({ ...m, sampleTypes }));
+  return t;
+}
+
+export {
+  SearchHandler,
+  getJunctionCustomTerms
+};
+//# sourceMappingURL=chunk-JKPMBNRM.js.map