@sjcrh/proteinpaint-client 2.219.1 → 2.221.0

package/dist/chunk-7J3W3KCN.js

@@ -0,0 +1,255 @@
+import {
+  first_genetrack_tolist
+} from "./chunk-WD7FZ5EE.js";
+import {
+  HYPER_COLOR,
+  HYPO_COLOR
+} from "./chunk-4TJO2DGU.js";
+
+// plots/dmr/settings/defaults.ts
+function getDefaultDMRSettings(opts) {
+  const overrides = opts.settings || {};
+  const dm = opts?.app?.vocabApi?.termdbConfig?.queries?.dnaMethylation;
+  const chr = opts?.coordinateOverride?.chr;
+  const elementScale = dm?.regionAnalysis == "element" || Array.isArray(dm?.cpgChroms) && !!chr && !dm.cpgChroms.includes(chr);
+  const defaults = {
+    blockWidth: 800,
+    pad: elementScale ? 1e5 : 2e3,
+    lambda: elementScale ? 5e4 : 1e3,
+    C: 2,
+    fdr_cutoff: 0.05,
+    colors: {
+      group1: "#3b5ee6",
+      group2: "#c04e00",
+      hyper: HYPER_COLOR,
+      hypo: HYPO_COLOR
+    },
+    maxLoessRegion: 25e4,
+    minProbesForCi: 10,
+    backend: "rust",
+    maxRegionSize: 5e6
+  };
+  if (overrides.colors) {
+    Object.assign(defaults.colors, overrides.colors);
+    delete overrides.colors;
+  }
+  return Object.assign(defaults, overrides);
+}
+
+// plots/dmr/viewModel/DmrViewModel.ts
+var CCRE_TRACK_NAME = "ENCODE cCREs";
+var DmrViewModel = class {
+  constructor(dmrResult, config, genomeObj, queryChr, queryStart, queryStop) {
+    const { settings } = config;
+    const dmrBedItems = this.makeDmrBedItems(dmrResult, settings);
+    const sigCpgBedItems = this.makeSigCpgBedItems(dmrResult, settings, queryChr, queryStart, queryStop);
+    const xRange = (queryStop ?? 0) - (queryStart ?? 0);
+    const loess = dmrResult.diagnostic?.loess;
+    const showLoess = !!(loess && loess.group1_fitted.length > 0 && loess.group2_fitted.length > 0);
+    const showDots = xRange <= settings.dmr.maxLoessRegion;
+    const betaTrackResult = dmrResult.diagnostic ? this.renderBetaTrack(
+      dmrResult.diagnostic,
+      config,
+      settings.dmr.blockWidth,
+      showLoess,
+      showDots,
+      queryStart,
+      queryStop
+    ) : void 0;
+    this.viewData = {
+      tklst: this.buildTrackList(dmrBedItems, sigCpgBedItems, genomeObj, betaTrackResult?.img),
+      legendRows: this.buildLegendData(
+        config,
+        dmrResult.dmrs,
+        sigCpgBedItems,
+        showLoess,
+        showDots,
+        betaTrackResult?.showCi ?? false
+      ),
+      diagnostic: dmrResult.diagnostic,
+      dmrs: dmrResult.dmrs,
+      dmrBedItems,
+      showLoess,
+      showDots
+    };
+  }
+  buildTrackList(dmrBedItems, sigCpgBedItems, genomeObj, betaTrackImg) {
+    const tklst = [];
+    first_genetrack_tolist(genomeObj, tklst);
+    const ccre = (genomeObj?.tracks || []).find((t) => t.name == CCRE_TRACK_NAME);
+    if (ccre) tklst.push(structuredClone(ccre));
+    tklst.push({ type: "bedj", name: "DMRs", bedItems: dmrBedItems });
+    tklst.push({ type: "bedj", name: "Sig. CpGs", bedItems: sigCpgBedItems });
+    if (betaTrackImg) {
+      tklst.push({
+        type: "bigwig",
+        name: "Per-CpG Means",
+        height: 150,
+        imgData: betaTrackImg
+      });
+    }
+    return tklst;
+  }
+  buildLegendData(config, dmrs, sigCpgBedItems, showLoess, showDots, showCi) {
+    const { colors } = config.settings.dmr;
+    const g1 = config.group1Name || "Group 1";
+    const g2 = config.group2Name || "Group 2";
+    const meansItems = [];
+    if (showDots) {
+      meansItems.push({ text: `${g1} (control)`, color: colors.group1 }, { text: `${g2} (case)`, color: colors.group2 });
+    }
+    if (showLoess) {
+      const ciLabel = showCi ? " + 95% CI" : "";
+      meansItems.push(
+        { text: `${g1} LOESS trend${ciLabel}`, color: colors.group1, style: showCi ? "shaded" : "dashed" },
+        { text: `${g2} LOESS trend${ciLabel}`, color: colors.group2, style: showCi ? "shaded" : "dashed" }
+      );
+    }
+    const rows = [{ label: "Per-CpG Means", items: meansItems }];
+    const hasHyper = dmrs.some((d) => d.direction === "hyper");
+    const hasHypo = dmrs.some((d) => d.direction === "hypo");
+    if (hasHyper || hasHypo) {
+      const items = [];
+      if (hasHyper) items.push({ text: "Hypermethylated", color: colors.hyper });
+      if (hasHypo) items.push({ text: "Hypomethylated", color: colors.hypo });
+      rows.push({ label: "DMR", items });
+    }
+    if (sigCpgBedItems.length) {
+      const items = [];
+      const hasHyperCpg = sigCpgBedItems.some((b) => b.color === colors.hyper);
+      const hasHypoCpg = sigCpgBedItems.some((b) => b.color === colors.hypo);
+      if (hasHyperCpg) items.push({ text: "Hyper (FDR sig.)", color: colors.hyper });
+      if (hasHypoCpg) items.push({ text: "Hypo (FDR sig.)", color: colors.hypo });
+      rows.push({ label: "Sig. CpGs", items });
+    }
+    return rows;
+  }
+  /**
+   * Render the per-CpG means scatter plot to an offscreen canvas and return
+   * a data URI suitable for the bigwig imgData track.
+   */
+  renderBetaTrack(diagnostic, config, blockWidth, showLoess, showDots, queryStart, queryStop) {
+    const { probes } = diagnostic;
+    if (!probes.positions.length) return void 0;
+    const { colors, fdr_cutoff, minProbesForCi } = config.settings.dmr;
+    const dpr = typeof window !== "undefined" && window.devicePixelRatio > 1 ? window.devicePixelRatio : 1;
+    const width = blockWidth;
+    const height = 150;
+    const canvas = document.createElement("canvas");
+    canvas.width = width * dpr;
+    canvas.height = height * dpr;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return void 0;
+    ctx.scale(dpr, dpr);
+    const xMin = queryStart ?? probes.positions[0];
+    const xMax = queryStop ?? probes.positions[probes.positions.length - 1];
+    const xRange = xMax - xMin || 1;
+    const scaleX = (val) => (val - xMin) / xRange * width;
+    const scaleY = (val) => height - val * height;
+    ctx.clearRect(0, 0, width, height);
+    let showCi = false;
+    if (showLoess && diagnostic.loess) {
+      const { loess } = diagnostic;
+      const firstProbePos = probes.positions[0];
+      const lastProbePos = probes.positions[probes.positions.length - 1];
+      showCi = probes.positions.length >= minProbesForCi;
+      for (const [fitted, ciLower, ciUpper, color] of [
+        [loess.group1_fitted, loess.group1_ci_lower, loess.group1_ci_upper, colors.group1],
+        [loess.group2_fitted, loess.group2_ci_lower, loess.group2_ci_upper, colors.group2]
+      ]) {
+        if (!fitted.length) continue;
+        const lPos = loess.positions;
+        let iStart = 0;
+        let iEnd = lPos.length - 1;
+        while (iStart < lPos.length && lPos[iStart] < firstProbePos) iStart++;
+        while (iEnd >= 0 && lPos[iEnd] > lastProbePos) iEnd--;
+        if (iStart > iEnd) continue;
+        if (showCi) {
+          ctx.globalAlpha = 0.12;
+          ctx.fillStyle = color;
+          ctx.beginPath();
+          for (let i = iStart; i <= iEnd; i++) {
+            ctx.lineTo(scaleX(lPos[i]), scaleY(Math.max(0, Math.min(1, ciUpper[i]))));
+          }
+          for (let i = iEnd; i >= iStart; i--) {
+            ctx.lineTo(scaleX(lPos[i]), scaleY(Math.max(0, Math.min(1, ciLower[i]))));
+          }
+          ctx.closePath();
+          ctx.fill();
+        }
+        ctx.globalAlpha = 0.8;
+        ctx.strokeStyle = color;
+        ctx.lineWidth = 2;
+        ctx.setLineDash(showCi ? [] : [6, 4]);
+        ctx.beginPath();
+        for (let i = iStart; i <= iEnd; i++) {
+          ctx.lineTo(scaleX(lPos[i]), scaleY(Math.max(0, Math.min(1, fitted[i]))));
+        }
+        ctx.stroke();
+        ctx.setLineDash([]);
+      }
+    }
+    if (!showDots) {
+      ctx.globalAlpha = 1;
+      return { img: { minv: 0, maxv: 1, src: canvas.toDataURL("image/png") }, showCi };
+    }
+    for (let i = 0; i < probes.positions.length; i++) {
+      const x = scaleX(probes.positions[i]);
+      const isSig = probes.fdr[i] < fdr_cutoff;
+      const alpha = isSig ? 0.85 : 0.3;
+      ctx.globalAlpha = alpha;
+      ctx.fillStyle = colors.group1;
+      const m1 = probes.mean_group1[i];
+      if (m1 != null) {
+        ctx.beginPath();
+        ctx.arc(x, scaleY(m1), 4, 0, Math.PI * 2);
+        ctx.fill();
+      }
+      ctx.fillStyle = colors.group2;
+      const m2 = probes.mean_group2[i];
+      if (m2 != null) {
+        ctx.beginPath();
+        ctx.arc(x, scaleY(m2), 4, 0, Math.PI * 2);
+        ctx.fill();
+      }
+    }
+    ctx.globalAlpha = 1;
+    return { img: { minv: 0, maxv: 1, src: canvas.toDataURL("image/png") }, showCi };
+  }
+  makeDmrBedItems(dmrResult, settings) {
+    return dmrResult.dmrs.map((dmr) => {
+      const negLog = -Math.log10(Math.max(dmr.min_smoothed_fdr, 1e-300));
+      const alpha = Math.round(Math.min(255, Math.max(50, negLog / 10 * 255)));
+      const hex = alpha.toString(16).padStart(2, "0");
+      const base = dmr.direction === "hyper" ? settings.dmr.colors.hyper : settings.dmr.colors.hypo;
+      return { chr: dmr.chr, start: dmr.start, stop: dmr.stop, color: base + hex };
+    });
+  }
+  makeSigCpgBedItems(dmrResult, settings, chr, queryStart, queryStop) {
+    const diag = dmrResult.diagnostic;
+    if (!diag) return [];
+    const { probes } = diag;
+    const items = [];
+    const minDeltaBeta = 0.05;
+    for (let i = 0; i < probes.positions.length; i++) {
+      if (probes.fdr[i] >= settings.dmr.fdr_cutoff) continue;
+      const pos = probes.positions[i];
+      if (queryStart != null && queryStop != null && (pos < queryStart || pos > queryStop)) continue;
+      const mg1 = probes.mean_group1[i];
+      const mg2 = probes.mean_group2[i];
+      if (mg1 == null || mg2 == null) continue;
+      const deltaBeta = mg2 - mg1;
+      if (Math.abs(deltaBeta) < minDeltaBeta) continue;
+      const color = deltaBeta >= 0 ? settings.dmr.colors.hyper : settings.dmr.colors.hypo;
+      items.push({ chr, start: pos, stop: pos + 1, color });
+    }
+    return items;
+  }
+};
+
+export {
+  getDefaultDMRSettings,
+  CCRE_TRACK_NAME,
+  DmrViewModel
+};
+//# sourceMappingURL=chunk-7J3W3KCN.js.map

package/dist/chunk-7SFK32JP.js

@@ -0,0 +1,398 @@
+import {
+  Menu
+} from "./chunk-CNFTQSNE.js";
+import {
+  Tableau10_default,
+  arc_default
+} from "./chunk-WJLRU5OF.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");
+    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-7SFK32JP.js.map