@sjcrh/proteinpaint-client 2.207.1 → 2.209.0

package/dist/animatedBubbleChart-GMLNYTQC.js

@@ -0,0 +1,547 @@
+import {
+  PlotBase,
+  Tabs
+} from "./chunk-C3HEDQPT.js";
+import "./chunk-HJ6L54YS.js";
+import "./chunk-KV4W2ACA.js";
+import "./chunk-B6UXFX73.js";
+import {
+  Menu
+} from "./chunk-ELJX3QIQ.js";
+import "./chunk-3FEP6B5T.js";
+import "./chunk-EEB5VE2A.js";
+import "./chunk-6RRZRISL.js";
+import "./chunk-2KM4PRQM.js";
+import {
+  dofetch3
+} from "./chunk-OBDIJ4QS.js";
+import "./chunk-6FG6JFZP.js";
+import "./chunk-3XBG5HIV.js";
+import {
+  TermTypes,
+  getColors
+} from "./chunk-SB36AUG7.js";
+import {
+  copyMerge,
+  getCompInit
+} from "./chunk-WINIL2KN.js";
+import "./chunk-PF4DSFDR.js";
+import "./chunk-7X6NF7NI.js";
+import "./chunk-W5J3LTYS.js";
+import {
+  arc_default,
+  collide_default,
+  simulation_default,
+  x_default,
+  y_default
+} from "./chunk-Z2ZITHT4.js";
+import {
+  enclose_default,
+  siblings_default,
+  sqrt
+} from "./chunk-4OLM3KSB.js";
+import "./chunk-FXQXCOII.js";
+import "./chunk-TLT4YIG3.js";
+import "./chunk-5R63Q5KH.js";
+import {
+  select_default
+} from "./chunk-I6Y4O3RR.js";
+import "./chunk-Q5RDQNIT.js";
+import "./chunk-DQC5FFGV.js";
+import "./chunk-HS5PO5ZQ.js";
+
+// plots/animatedBubbleChart.ts
+var defaultConfig = { chartType: "animatedBubbleChart" };
+var SPLIT_W = 1100;
+var SPLIT_H = 900;
+var MIN_R = 6;
+var MAX_R = 43;
+var INNER_CIRCLE_RATIO = 0.75;
+var RING_GAP = 1;
+var PADDING = 0;
+var HOVER_SCALE = 1.2;
+var HOVER_COLLIDE_BOOST = 1.4;
+var HOVER_REPEL_REACH = 91;
+var HOVER_REPEL_STRENGTH = 0.17;
+var GRAVITY_STRENGTH = 0.28;
+var HOVER_GRAVITY = 0.045;
+var AnimatedBubbleChart = class _AnimatedBubbleChart extends PlotBase {
+  constructor(opts, api) {
+    super(opts, api);
+    this.simulation = null;
+    this.selectedRankingKey = null;
+    this.groupBy = "all";
+    // State for the split-view toggle. Stored on the instance so the toggle handler
+    // can recompute layout + restart the simulation without re-fetching data.
+    this.currentNodes = [];
+    this.currentAssays = [];
+    // 'all'-mode packed-cluster enclosing radius (+slack); set by computeHomes and used by
+    // the per-tick circular clamp, so we don't pack the same nodes twice.
+    this.allModeBoundaryR = 0;
+    this.modalityLabelsSel = null;
+    // Computed each time we enter split mode: where each modality's sub-cluster sits.
+    // Sizes vary because we hierarchically pack groups by their natural cluster radii.
+    // `topY` is the topmost EDGE of the cluster (min(homeY - outerR)) — bubble radii
+    // aren't scaled with the layout, so the visual extent reaches farther up than
+    // `cy - r*scale`. Labels use this so they always sit clear of every bubble.
+    this.groupCenters = [];
+    this.svgSel = null;
+    this.wrapperSel = null;
+    // Computed by `computeHomes` from the actual home positions + bubble radii.
+    // Drives the wrapper's visible width/height so the chart frame hugs the cluster
+    // instead of inheriting the much larger fixed SPLIT canvas size.
+    this.contentBbox = {
+      minX: 0,
+      minY: 0,
+      maxX: 0,
+      maxY: 0
+    };
+    this.BBOX_PAD = 20;
+    this.type = _AnimatedBubbleChart.type;
+    this.components = {};
+  }
+  static {
+    this.type = "animatedBubbleChart";
+  }
+  /** Internal SVG coordinate space — fixed, used by computeHomes for layout math. */
+  canvasW() {
+    return SPLIT_W;
+  }
+  canvasH() {
+    return SPLIT_H;
+  }
+  /** Visible viewport — sized to the actual content bbox + padding, not a fixed constant. */
+  viewportW() {
+    return Math.max(50, this.contentBbox.maxX - this.contentBbox.minX + 2 * this.BBOX_PAD);
+  }
+  viewportH() {
+    return Math.max(50, this.contentBbox.maxY - this.contentBbox.minY + 2 * this.BBOX_PAD);
+  }
+  async init() {
+    const holder = this.opts.holder.append("div").style("padding", "10px");
+    this.dom = {
+      holder,
+      controls: holder.append("div").style("display", "flex").style("gap", "14px").style("align-items", "center").style("margin-bottom", "10px"),
+      body: holder.append("div"),
+      tip: new Menu({ padding: "" }),
+      header: this.opts.header
+    };
+    if (this.dom.header) this.dom.header.html("Bubble Chart");
+  }
+  getState(appState) {
+    const config = appState.plots.find((p) => p.id === this.id);
+    if (!config) throw `No plot with id='${this.id}' found`;
+    return { config };
+  }
+  async main() {
+    await this.fetchAndRender(this.selectedRankingKey ?? void 0);
+  }
+  async fetchAndRender(rankingKey) {
+    const body = {
+      genome: this.app.opts.state.vocab.genome,
+      dslabel: this.app.opts.state.vocab.dslabel
+    };
+    if (rankingKey) body.rankingKey = rankingKey;
+    const data = await dofetch3("termdb/animatedBubbleChart", { body });
+    if (this.simulation) {
+      this.simulation.stop();
+      this.simulation = null;
+    }
+    if (data.error) {
+      if (data.rankingKeys?.length) this.renderControls(data.rankingKeys, rankingKey ?? data.rankingKeys[0]);
+      this.dom.body.selectAll("*").remove();
+      this.dom.body.append("div").style("padding", "20px").style("color", "#b00020").text(`Error: ${data.error}`);
+      return;
+    }
+    this.selectedRankingKey = data.selectedRankingKey;
+    this.renderControls(data.rankingKeys, data.selectedRankingKey);
+    this.dom.body.selectAll("*").remove();
+    if (!data.bubbles?.length) {
+      this.dom.body.append("div").style("padding", "20px").style("color", "#666").text("No data in the selected ranking file.");
+      return;
+    }
+    const container = this.dom.body.append("div").style("display", "flex").style("gap", "24px").style("align-items", "flex-start").style("flex-wrap", "nowrap");
+    const colorScale = getColors(data.assays.length).domain(data.assays);
+    const assayColors = {};
+    for (const a of data.assays) assayColors[a] = colorScale(a);
+    this.renderBubbles(container, data.bubbles, assayColors);
+    this.renderLegend(container, data.assays, assayColors);
+  }
+  renderControls(rankingKeys, current) {
+    this.dom.controls.selectAll("*").remove();
+    const sel = this.dom.controls.append("select").style("padding", "4px 8px").style("min-width", "200px");
+    sel.selectAll("option").data(rankingKeys).enter().append("option").attr("value", (d) => d).text((d) => d);
+    sel.property("value", current);
+    sel.on("change", () => this.fetchAndRender(sel.node().value));
+    const tabsHolder = this.dom.controls.append("div");
+    const tabsToggle = new Tabs({
+      holder: tabsHolder,
+      noContent: true,
+      tabs: [
+        {
+          label: "Combined",
+          active: this.groupBy === "all",
+          callback: () => {
+            if (this.groupBy === "all") return;
+            this.groupBy = "all";
+            this.applyGrouping();
+          }
+        },
+        {
+          label: "Split by dominant data type",
+          active: this.groupBy === "modality",
+          callback: () => {
+            if (this.groupBy === "modality") return;
+            this.groupBy = "modality";
+            this.applyGrouping();
+          }
+        }
+      ]
+    });
+    tabsToggle.main();
+  }
+  /** Find the modality (assay) that contributes the largest slice to this gene's wheel. */
+  dominantAssay(node) {
+    let bestAssay = node.slices[0]?.assay ?? this.currentAssays[0];
+    let bestAngle = -1;
+    for (const s of node.slices) {
+      if (s.angle > bestAngle) {
+        bestAngle = s.angle;
+        bestAssay = s.assay;
+      }
+    }
+    return bestAssay;
+  }
+  /** Compute homeX/homeY on every node based on the current `groupBy` mode. */
+  computeHomes() {
+    const nodes = this.currentNodes;
+    if (!nodes.length) return;
+    const W = this.canvasW();
+    const H = this.canvasH();
+    if (this.groupBy === "all") {
+      const packInputs = nodes.map((n) => ({ r: n.outerR, x: 0, y: 0 }));
+      siblings_default(packInputs);
+      const enclose = enclose_default(packInputs) ?? { x: 0, y: 0, r: Math.min(W, H) / 2 };
+      const dx2 = W / 2 - enclose.x;
+      const dy2 = H / 2 - enclose.y;
+      for (let i = 0; i < nodes.length; i++) {
+        nodes[i].homeX = packInputs[i].x + dx2;
+        nodes[i].homeY = packInputs[i].y + dy2;
+      }
+      this.allModeBoundaryR = enclose.r + 2;
+      this.groupCenters = [];
+      this.recordContentBbox();
+      return;
+    }
+    const assays = this.currentAssays;
+    const LABEL_GAP = 200;
+    const buckets = /* @__PURE__ */ new Map();
+    for (const a of assays) buckets.set(a, []);
+    for (const n of nodes) buckets.get(this.dominantAssay(n))?.push(n);
+    const layouts = [];
+    for (const assay of assays) {
+      const groupNodes = buckets.get(assay) ?? [];
+      if (!groupNodes.length) continue;
+      const packs = groupNodes.map((n) => ({ r: n.outerR, x: 0, y: 0 }));
+      siblings_default(packs);
+      const enclose = enclose_default(packs) ?? { x: 0, y: 0, r: 0 };
+      let naturalExtent = 0;
+      for (let j = 0; j < groupNodes.length; j++) {
+        const dx2 = packs[j].x - enclose.x;
+        const dy2 = packs[j].y - enclose.y;
+        const reach = Math.sqrt(dx2 * dx2 + dy2 * dy2) + groupNodes[j].outerR;
+        if (reach > naturalExtent) naturalExtent = reach;
+      }
+      layouts.push({ assay, nodes: groupNodes, packs, enclose, naturalExtent });
+    }
+    const superCircles = layouts.map((g) => ({ r: g.naturalExtent + LABEL_GAP, x: 0, y: 0 }));
+    siblings_default(superCircles);
+    const overallEnclose = enclose_default(superCircles) ?? { x: 0, y: 0, r: 1 };
+    const margin = 10;
+    const maxR = Math.min(W, H) / 2 - margin;
+    const scale = overallEnclose.r > maxR ? maxR / overallEnclose.r : 1;
+    const dx = W / 2 - overallEnclose.x * scale;
+    const dy = H / 2 - overallEnclose.y * scale;
+    this.groupCenters = [];
+    for (let i = 0; i < layouts.length; i++) {
+      const g = layouts[i];
+      const groupCx = superCircles[i].x * scale + dx;
+      const groupCy = superCircles[i].y * scale + dy;
+      const offX = groupCx - g.enclose.x;
+      const offY = groupCy - g.enclose.y;
+      for (let j = 0; j < g.nodes.length; j++) {
+        g.nodes[j].homeX = g.packs[j].x + offX;
+        g.nodes[j].homeY = g.packs[j].y + offY;
+      }
+      this.groupCenters.push({
+        assay: g.assay,
+        cx: groupCx,
+        cy: groupCy,
+        r: g.naturalExtent,
+        topY: groupCy - g.naturalExtent
+      });
+    }
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const n of nodes) {
+      if (n.homeX - n.outerR < minX) minX = n.homeX - n.outerR;
+      if (n.homeY - n.outerR < minY) minY = n.homeY - n.outerR;
+      if (n.homeX + n.outerR > maxX) maxX = n.homeX + n.outerR;
+      if (n.homeY + n.outerR > maxY) maxY = n.homeY + n.outerR;
+    }
+    if (Number.isFinite(minX)) {
+      const shiftX = W / 2 - (minX + maxX) / 2;
+      const shiftY = H / 2 - (minY + maxY) / 2;
+      for (const n of nodes) {
+        n.homeX += shiftX;
+        n.homeY += shiftY;
+      }
+      for (const g of this.groupCenters) {
+        g.cx += shiftX;
+        g.cy += shiftY;
+        g.topY += shiftY;
+      }
+    }
+    this.recordContentBbox();
+  }
+  /** Record the FINAL content bbox (after recentering) so the wrapper can hug the
+   *  cluster instead of inheriting a fixed canvas size. Called by both modes. */
+  recordContentBbox() {
+    const nodes = this.currentNodes;
+    if (!nodes.length) return;
+    let bx0 = Infinity, by0 = Infinity, bx1 = -Infinity, by1 = -Infinity;
+    for (const n of nodes) {
+      if (n.homeX - n.outerR < bx0) bx0 = n.homeX - n.outerR;
+      if (n.homeY - n.outerR < by0) by0 = n.homeY - n.outerR;
+      if (n.homeX + n.outerR > bx1) bx1 = n.homeX + n.outerR;
+      if (n.homeY + n.outerR > by1) by1 = n.homeY + n.outerR;
+    }
+    if (this.groupBy === "modality") {
+      for (const g of this.groupCenters) {
+        const labelY = g.topY - 32;
+        if (labelY < by0) by0 = labelY;
+      }
+    }
+    if (Number.isFinite(bx0)) {
+      this.contentBbox = { minX: bx0, minY: by0, maxX: bx1, maxY: by1 };
+    }
+  }
+  /** Toggle handler — recompute homes for the current groupBy and reheat the simulation. */
+  applyGrouping() {
+    this.computeHomes();
+    if (this.wrapperSel) {
+      this.wrapperSel.transition().duration(900).style("width", `${this.viewportW()}px`).style("height", `${this.viewportH()}px`);
+    }
+    if (this.svgSel) {
+      this.svgSel.transition().duration(900).style("left", `${this.BBOX_PAD - this.contentBbox.minX}px`).style("top", `${this.BBOX_PAD - this.contentBbox.minY}px`);
+    }
+    const centerByAssay = new Map(this.groupCenters.map((g) => [g.assay, g]));
+    if (this.modalityLabelsSel) {
+      const labels = this.modalityLabelsSel.selectAll("text");
+      if (this.groupBy === "modality") {
+        labels.transition().duration(900).attr("opacity", (assay) => centerByAssay.has(assay) ? 1 : 0).attr("x", (assay) => centerByAssay.get(assay)?.cx ?? 0).attr("y", (assay) => {
+          const g = centerByAssay.get(assay);
+          return g ? g.cy - g.r - 12 : 0;
+        });
+      } else {
+        labels.transition().duration(400).attr("opacity", 0);
+      }
+    }
+    if (this.simulation) {
+      this.simulation.force("x", x_default((d) => d.homeX).strength(GRAVITY_STRENGTH)).force("y", y_default((d) => d.homeY).strength(GRAVITY_STRENGTH)).velocityDecay(0.55).alpha(0.6).alphaDecay(0.018).restart();
+      setTimeout(() => {
+        if (this.simulation) this.simulation.velocityDecay(0.4).alphaDecay(0.022);
+      }, 2500);
+    }
+  }
+  renderBubbles(container, bubbles, assayColors) {
+    const maxRank = Math.max(...bubbles.map((b) => b.integrativeRank));
+    const sizeScale = sqrt().domain([1, maxRank]).range([MAX_R, MIN_R]).clamp(true);
+    const nodes = bubbles.map((b) => {
+      const outerR = sizeScale(b.integrativeRank);
+      const innerR = outerR * INNER_CIRCLE_RATIO;
+      const slices = [];
+      let cum = 0;
+      for (const s of b.slices) {
+        const start = cum;
+        const end = cum + s.angle;
+        slices.push({ ...s, startAngle: start, endAngle: end });
+        cum = end;
+      }
+      return {
+        gene: b.gene,
+        integrativeRank: b.integrativeRank,
+        orderStatQ: b.orderStatQ,
+        pValue: b.pValue,
+        fdr: b.fdr,
+        slices,
+        innerR,
+        outerR,
+        // Seed positions in a small jitter around center so the simulation pulls them outward to home
+        x: this.canvasW() / 2 + (Math.random() - 0.5) * 80,
+        y: this.canvasH() / 2 + (Math.random() - 0.5) * 80,
+        homeX: 0,
+        // filled in by packSiblings below
+        homeY: 0,
+        hovered: false
+      };
+    });
+    this.currentNodes = nodes;
+    this.currentAssays = Object.keys(assayColors);
+    this.computeHomes();
+    const wrapper = container.append("div").style("position", "relative").style("overflow", "hidden").style("width", `${this.viewportW()}px`).style("height", `${this.viewportH()}px`);
+    this.wrapperSel = wrapper;
+    const svg = wrapper.append("svg").attr("width", this.canvasW()).attr("height", this.canvasH()).style("position", "absolute").style("left", `${this.BBOX_PAD - this.contentBbox.minX}px`).style("top", `${this.BBOX_PAD - this.contentBbox.minY}px`);
+    this.svgSel = svg;
+    const root = svg.append("g");
+    const arcGen = arc_default().startAngle((d) => d.startAngle).endAngle((d) => d.endAngle);
+    const groups = root.selectAll("g.sjpp-abc-bubble").data(nodes).enter().append("g").attr("class", "sjpp-abc-bubble").attr("transform", (d) => `translate(${d.x},${d.y})`).style("cursor", "pointer").attr("role", "button").attr("tabindex", 0).attr("aria-label", (d) => `Open protein view for ${d.gene}`);
+    groups.append("circle").attr("class", "hit-area").attr("r", (d) => d.outerR).attr("fill", "transparent");
+    groups.each(function(d) {
+      const slicesG = select_default(this).append("g").attr("class", "ring");
+      const visible = d.slices.filter((s) => s.angle > 0);
+      slicesG.selectAll("path").data(visible).enter().append("path").attr("fill", (s) => assayColors[s.assay] ?? "#999").attr("stroke", "#fff").attr("stroke-width", 0.8).attr("opacity", 0).attr(
+        "d",
+        (s) => arcGen({
+          ...s,
+          innerRadius: d.innerR + RING_GAP,
+          outerRadius: d.outerR
+        })
+      );
+    });
+    groups.append("circle").attr("class", "inner").attr("r", 0).attr("fill", "#fff").attr("stroke", "#333").attr("stroke-width", 1);
+    const labelFontSize = (d) => {
+      const byRadius = d.innerR * 0.72;
+      const maxByWidth = d.innerR * 1.8 / Math.max(d.gene.length * 0.6, 1);
+      return Math.max(5, Math.min(byRadius, maxByWidth, 20));
+    };
+    groups.append("text").attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-weight", "bold").attr("font-size", (d) => `${labelFontSize(d)}px`).attr("fill", "#222").attr("pointer-events", "none").attr("opacity", 0).text((d) => d.gene);
+    const tip = this.dom.tip;
+    groups.on("mouseenter", (event, d) => {
+      d.hovered = true;
+      if (this.simulation) {
+        this.simulation.force("x").strength(HOVER_GRAVITY);
+        this.simulation.force("y").strength(HOVER_GRAVITY);
+        this.simulation.alpha(0.5).restart();
+      }
+      tip.clear().show(event.clientX, event.clientY);
+      const t = tip.d.append("div").style("padding", "8px").style("font-size", "13px").style("min-width", "220px");
+      t.append("div").style("font-weight", "bold").style("font-size", "15px").style("margin-bottom", "4px").text(d.gene);
+      t.append("div").text(`Integrative rank: ${d.integrativeRank}`);
+      if (d.orderStatQ != null) t.append("div").text(`Order statistic Q: ${d.orderStatQ.toExponential(3)}`);
+      if (d.pValue != null)
+        t.append("div").text(`P value: ${d.pValue >= 1e-4 ? d.pValue.toFixed(4) : d.pValue.toExponential(3)}`);
+      if (d.fdr != null) t.append("div").text(`FDR: ${d.fdr >= 1e-4 ? d.fdr.toFixed(4) : d.fdr.toExponential(3)}`);
+      const table = t.append("table").style("margin-top", "6px").style("border-collapse", "collapse").style("font-size", "12px");
+      const header = table.append("tr");
+      header.append("th").style("text-align", "left").style("padding", "2px 6px").text("Data Type");
+      header.append("th").style("text-align", "right").style("padding", "2px 6px").text("Rank");
+      header.append("th").style("text-align", "right").style("padding", "2px 6px").text("Share");
+      for (const s of d.slices) {
+        const row = table.append("tr");
+        const swatch = row.append("td").style("padding", "2px 6px");
+        swatch.append("span").style("display", "inline-block").style("width", "10px").style("height", "10px").style("background", assayColors[s.assay] ?? "#999").style("margin-right", "6px").style("vertical-align", "middle");
+        swatch.append("span").text(s.assay);
+        row.append("td").style("padding", "2px 6px").style("text-align", "right").text(s.rank == null ? "NA" : String(s.rank));
+        row.append("td").style("padding", "2px 6px").style("text-align", "right").text(s.weight == null ? "\u2014" : `${(s.weight * 100).toFixed(1)}%`);
+      }
+    }).on("mouseleave", (_event, d) => {
+      d.hovered = false;
+      if (this.simulation) {
+        this.simulation.force("x").strength(GRAVITY_STRENGTH);
+        this.simulation.force("y").strength(GRAVITY_STRENGTH);
+        this.simulation.alpha(0.25).restart();
+      }
+      tip.hide();
+    }).on("click keydown", (event, d) => {
+      if (event.type === "keydown") {
+        const ke = event;
+        if (ke.key !== "Enter" && ke.key !== " ") return;
+        ke.preventDefault();
+      }
+      tip.hide();
+      this.app.dispatch({
+        type: "plot_create",
+        config: {
+          chartType: "proteinView",
+          tw: {
+            term: {
+              gene: d.gene,
+              name: d.gene,
+              type: TermTypes.PROTEOME_ABUNDANCE
+            }
+          }
+        }
+      });
+    });
+    groups.select("circle.inner").transition().duration(900).attr("r", (d) => d.innerR);
+    groups.select("g.ring").selectAll("path").transition().delay(200).duration(900).attr("opacity", 0.95);
+    groups.select("text").transition().delay(500).duration(600).attr("opacity", 1);
+    const assayNames = this.currentAssays;
+    const labelsG = svg.append("g").attr("class", "modality-labels");
+    labelsG.selectAll("text").data(assayNames).enter().append("text").attr("text-anchor", "middle").attr("dominant-baseline", "alphabetic").attr("font-size", "13px").attr("font-weight", "bold").attr("paint-order", "stroke").attr("stroke", "#fff").attr("stroke-width", 3).attr("stroke-linejoin", "round").attr("fill", (d) => assayColors[d] ?? "#333").attr("opacity", 0).attr("x", this.canvasW() / 2).attr("y", 12).text((d) => d);
+    this.modalityLabelsSel = labelsG;
+    if (this.groupBy === "modality") {
+      const centerByAssay = new Map(this.groupCenters.map((g) => [g.assay, g]));
+      labelsG.selectAll("text").attr("opacity", (assay) => centerByAssay.has(assay) ? 1 : 0).attr("x", (assay) => centerByAssay.get(assay)?.cx ?? this.canvasW() / 2).attr("y", (assay) => {
+        const g = centerByAssay.get(assay);
+        return g ? g.cy - g.r - 8 : 12;
+      });
+    }
+    const collideR = (d) => (d.hovered ? d.outerR * HOVER_COLLIDE_BOOST : d.outerR) + PADDING;
+    function hoverRepel(alpha) {
+      const h = nodes.find((n) => n.hovered);
+      if (!h) return;
+      const sizeRatio = h.outerR / MAX_R;
+      const reach = HOVER_REPEL_REACH * sizeRatio;
+      const strength = HOVER_REPEL_STRENGTH * sizeRatio;
+      if (reach < 1) return;
+      for (const n of nodes) {
+        if (n === h) continue;
+        const dx = n.x - h.x;
+        const dy = n.y - h.y;
+        const dist = Math.sqrt(dx * dx + dy * dy) || 0.01;
+        if (dist >= reach) continue;
+        const falloff = 1 - dist / reach;
+        const push = strength * falloff * alpha;
+        n.vx = (n.vx ?? 0) + dx / dist * push * reach;
+        n.vy = (n.vy ?? 0) + dy / dist * push * reach;
+      }
+    }
+    this.simulation = simulation_default(nodes).force("collide", collide_default(collideR).strength(1).iterations(2)).force("x", x_default((d) => d.homeX).strength(GRAVITY_STRENGTH)).force("y", y_default((d) => d.homeY).strength(GRAVITY_STRENGTH)).force("hoverRepel", hoverRepel).alpha(1).alphaDecay(0.022).alphaMin(1e-3).on("tick", () => {
+      if (this.groupBy === "all") {
+        const cxC = this.canvasW() / 2;
+        const cyC = this.canvasH() / 2;
+        for (const d of nodes) {
+          const ddx = d.x - cxC;
+          const ddy = d.y - cyC;
+          const dist = Math.sqrt(ddx * ddx + ddy * ddy) || 1e-4;
+          const maxDist = this.allModeBoundaryR - d.outerR;
+          if (dist > maxDist) {
+            d.x = cxC + ddx * maxDist / dist;
+            d.y = cyC + ddy * maxDist / dist;
+          }
+        }
+      }
+      groups.attr("transform", (d) => `translate(${d.x},${d.y})${d.hovered ? ` scale(${HOVER_SCALE})` : ""}`);
+    });
+  }
+  renderLegend(container, assays, assayColors) {
+    const legend = container.append("div").style("display", "flex").style("flex-direction", "column").style("gap", "6px").style("padding", "4px 0").style("min-width", "160px");
+    legend.append("div").style("font-weight", "bold").style("font-size", "13px").style("margin-bottom", "4px").text("Data Type");
+    for (const assay of assays) {
+      const row = legend.append("div").style("display", "flex").style("align-items", "center").style("gap", "8px").style("font-size", "12px");
+      row.append("span").style("display", "inline-block").style("width", "14px").style("height", "14px").style("background", assayColors[assay] ?? "#999").style("border", "1px solid #ccc");
+      row.append("span").text(assay);
+    }
+  }
+};
+var componentInit = getCompInit(AnimatedBubbleChart);
+async function getPlotConfig(opts) {
+  const config = structuredClone(defaultConfig);
+  return copyMerge(config, opts);
+}
+export {
+  componentInit,
+  getPlotConfig
+};
+//# sourceMappingURL=animatedBubbleChart-GMLNYTQC.js.map

package/dist/app-2SFDRDN2.js

@@ -0,0 +1,32 @@
+import {
+  appInit
+} from "./chunk-C3HEDQPT.js";
+import "./chunk-HJ6L54YS.js";
+import "./chunk-KV4W2ACA.js";
+import "./chunk-B6UXFX73.js";
+import "./chunk-ELJX3QIQ.js";
+import "./chunk-3FEP6B5T.js";
+import "./chunk-EEB5VE2A.js";
+import "./chunk-6RRZRISL.js";
+import "./chunk-2KM4PRQM.js";
+import "./chunk-OBDIJ4QS.js";
+import "./chunk-6FG6JFZP.js";
+import "./chunk-3XBG5HIV.js";
+import "./chunk-SB36AUG7.js";
+import "./chunk-WINIL2KN.js";
+import "./chunk-PF4DSFDR.js";
+import "./chunk-7X6NF7NI.js";
+import "./chunk-W5J3LTYS.js";
+import "./chunk-Z2ZITHT4.js";
+import "./chunk-4OLM3KSB.js";
+import "./chunk-FXQXCOII.js";
+import "./chunk-TLT4YIG3.js";
+import "./chunk-5R63Q5KH.js";
+import "./chunk-I6Y4O3RR.js";
+import "./chunk-Q5RDQNIT.js";
+import "./chunk-DQC5FFGV.js";
+import "./chunk-HS5PO5ZQ.js";
+export {
+  appInit
+};
+//# sourceMappingURL=app-2SFDRDN2.js.map

package/dist/app-QOZ36UR4.js

@@ -0,0 +1,42 @@
+import {
+  appInit
+} from "./chunk-7GDRMBNO.js";
+import "./chunk-OI5KBFBE.js";
+import "./chunk-QD75Q5LM.js";
+import "./chunk-J5GQGWYX.js";
+import "./chunk-YHWQWVWX.js";
+import "./chunk-4G73CMUL.js";
+import "./chunk-X46YA4CB.js";
+import "./chunk-SKMFMGCD.js";
+import "./chunk-CKOU3P27.js";
+import "./chunk-PRZWSBMA.js";
+import "./chunk-C3HEDQPT.js";
+import "./chunk-HJ6L54YS.js";
+import "./chunk-KV4W2ACA.js";
+import "./chunk-B6UXFX73.js";
+import "./chunk-ELJX3QIQ.js";
+import "./chunk-3FEP6B5T.js";
+import "./chunk-EEB5VE2A.js";
+import "./chunk-6RRZRISL.js";
+import "./chunk-2KM4PRQM.js";
+import "./chunk-OBDIJ4QS.js";
+import "./chunk-6FG6JFZP.js";
+import "./chunk-3XBG5HIV.js";
+import "./chunk-SB36AUG7.js";
+import "./chunk-WINIL2KN.js";
+import "./chunk-PF4DSFDR.js";
+import "./chunk-7X6NF7NI.js";
+import "./chunk-W5J3LTYS.js";
+import "./chunk-Z2ZITHT4.js";
+import "./chunk-4OLM3KSB.js";
+import "./chunk-FXQXCOII.js";
+import "./chunk-TLT4YIG3.js";
+import "./chunk-5R63Q5KH.js";
+import "./chunk-I6Y4O3RR.js";
+import "./chunk-Q5RDQNIT.js";
+import "./chunk-DQC5FFGV.js";
+import "./chunk-HS5PO5ZQ.js";
+export {
+  appInit
+};
+//# sourceMappingURL=app-QOZ36UR4.js.map

package/dist/app.js

@@ -1,29 +1,29 @@
 import {
   bindProteinPaint,
   runproteinpaint
-} from "./chunk-LGR6CJTW.js";
-import "./chunk-TMXW5HVE.js";
-import "./chunk-M5SYLBBC.js";
-import "./chunk-ONVIVITY.js";
+} from "./chunk-AFQKYV4D.js";
+import "./chunk-IEIGHCZS.js";
+import "./chunk-WGDJX7WZ.js";
+import "./chunk-CYWEYHJQ.js";
 import "./chunk-PRZWSBMA.js";
-import "./chunk-7HGZRJZZ.js";
+import "./chunk-K77W4SSI.js";
 import "./chunk-MKAF2BHB.js";
-import "./chunk-Y4PX2ECH.js";
+import "./chunk-33BE7AYS.js";
 import "./chunk-4FTH4L3A.js";
-import "./chunk-EKQ7NYOU.js";
-import "./chunk-PC4MFDHP.js";
+import "./chunk-ANACCKCQ.js";
+import "./chunk-C3HEDQPT.js";
 import "./chunk-HJ6L54YS.js";
 import "./chunk-KV4W2ACA.js";
-import "./chunk-HPAW7XDM.js";
+import "./chunk-B6UXFX73.js";
 import "./chunk-ELJX3QIQ.js";
-import "./chunk-BZN2O76M.js";
+import "./chunk-3FEP6B5T.js";
 import "./chunk-EEB5VE2A.js";
 import "./chunk-6RRZRISL.js";
 import "./chunk-2KM4PRQM.js";
-import "./chunk-52QHIKH2.js";
-import "./chunk-A2ORIMUJ.js";
-import "./chunk-PPSWNLMG.js";
-import "./chunk-RUBZCKIX.js";
+import "./chunk-OBDIJ4QS.js";
+import "./chunk-6FG6JFZP.js";
+import "./chunk-3XBG5HIV.js";
+import "./chunk-SB36AUG7.js";
 import "./chunk-WINIL2KN.js";
 import "./chunk-PF4DSFDR.js";
 import "./chunk-7X6NF7NI.js";