@sjcrh/proteinpaint-client 2.224.1 → 2.224.2

package/dist/chunk-T2DORAV4.js

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