@sjcrh/proteinpaint-client 2.219.1 → 2.221.0

package/dist/aboutSunburst-5EKXZV2A.js

@@ -0,0 +1,86 @@
+import {
+  SunburstChart,
+  getPlotConfig
+} from "./chunk-2CDFU4MQ.js";
+import {
+  LINK,
+  TEXT_DARK
+} from "./chunk-7SFK32JP.js";
+import "./chunk-WD7FZ5EE.js";
+import "./chunk-HJ6L54YS.js";
+import "./chunk-WXSMUSU7.js";
+import "./chunk-CNFTQSNE.js";
+import "./chunk-RIHO7ZD5.js";
+import "./chunk-TVJOSRCH.js";
+import "./chunk-3CIL7KH7.js";
+import "./chunk-T4XPCSLP.js";
+import "./chunk-4TJO2DGU.js";
+import "./chunk-W5J3LTYS.js";
+import "./chunk-MHWYRNGA.js";
+import "./chunk-JHLF2ZC2.js";
+import "./chunk-WJLRU5OF.js";
+import "./chunk-HBNB5TRH.js";
+import "./chunk-PF4DSFDR.js";
+import "./chunk-4OLM3KSB.js";
+import "./chunk-PWYMHUXY.js";
+import "./chunk-TLT4YIG3.js";
+import "./chunk-5R63Q5KH.js";
+import "./chunk-I6Y4O3RR.js";
+import "./chunk-Q5RDQNIT.js";
+import "./chunk-HS5PO5ZQ.js";
+
+// plots/sunburst/aboutSunburst.ts
+var AboutSunburst = class {
+  constructor(holder, app, onOpen) {
+    this.app = app;
+    this.onOpen = onOpen;
+    const div = holder.append("div").attr("data-testid", "sjpp-about-sunburst").style("white-space", "normal");
+    this.chart = new SunburstChart({ holder: div, app, gap: 6 });
+  }
+  /** draw the counts of the app state's filter, unless they are shown already */
+  async update(appState) {
+    const termfilter = appState.termfilter;
+    const sig = JSON.stringify(termfilter);
+    if (sig == this.filterShown) return;
+    this.filterShown = sig;
+    this.ringsLoaded ??= getPlotConfig({}, this.app).then((config) => {
+      this.twLst = config.twLst;
+      this.renderRings();
+      return config.twLst;
+    });
+    let twLst;
+    try {
+      twLst = await this.ringsLoaded;
+    } catch (e) {
+      this.ringsLoaded = void 0;
+      this.filterShown = void 0;
+      this.chart.dom.errdiv.style("display", "").text(e?.message || String(e));
+      return;
+    }
+    const drawn = await this.chart.update({
+      genome: appState.vocab.genome,
+      dslabel: appState.vocab.dslabel,
+      twLst,
+      termfilter,
+      colors: appState.termdbConfig?.sunburst?.colors
+    });
+    if (drawn === false && this.filterShown == sig) this.filterShown = void 0;
+  }
+  /** one line per ring with its term name, then the link to the full chart */
+  renderRings() {
+    for (const [i, tw] of this.twLst.entries()) {
+      this.chart.ringLine(i).append("div").style("font-size", ".9em").style("color", TEXT_DARK).style("overflow", "hidden").style("white-space", "nowrap").style("text-overflow", "ellipsis").attr("title", tw.term.name).text(tw.term.name);
+    }
+    this.chart.dom.rings.body.append("div").attr("data-testid", "sjpp-about-sunburst-open").attr("role", "button").style("margin-top", "10px").style("font-size", ".85em").style("color", LINK).style("cursor", "pointer").text("Edit rings in the full chart \u203A").attr("tabindex", 0).on("click", this.onOpen).on("keydown", (event) => {
+      if (event.key == "Enter" || event.key == " ") {
+        event.preventDefault();
+        this.onOpen();
+      }
+    });
+    this.chart.markShownRings();
+  }
+};
+export {
+  AboutSunburst
+};
+//# sourceMappingURL=aboutSunburst-5EKXZV2A.js.map

package/dist/aboutSunburst-5EKXZV2A.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../plots/sunburst/aboutSunburst.ts"],
+  "sourcesContent": ["import { SunburstChart } from './SunburstChart'\nimport { getPlotConfig } from './sunburst'\nimport { LINK, TEXT_DARK } from './SunburstRenderer'\n\n/*\nThe sunburst on the About tab (massNav.tabs.about.showSunburst), of the dataset's default rings\n(termdb.sunburst.twLst). It zooms, selects and makes groups like the sunburst plot, but its Rings box only\nnames the rings: they are edited in the full chart, which a link below them launches, since the About tab\nhas no plot config to keep them in. The counts follow the global filter.\n*/\n\nexport class AboutSunburst {\n\tapp: any\n\tchart: SunburstChart\n\t/** launches the sunburst plot */\n\tonOpen: () => void\n\ttwLst?: any[]\n\t/** the default rings once loaded and listed in the Rings box; kept so that an update made while they\n\t *  load waits for them instead of loading and listing them again */\n\tringsLoaded?: Promise<any[]>\n\t/** the filter of the shown counts, to re-fetch only when it changes */\n\tfilterShown?: string\n\n\tconstructor(holder: any, app: any, onOpen: () => void) {\n\t\tthis.app = app\n\t\tthis.onOpen = onOpen\n\t\tconst div = holder.append('div').attr('data-testid', 'sjpp-about-sunburst').style('white-space', 'normal')\n\t\t// the Rings box and the stats close to the chart, 12px from it on both sides\n\t\tthis.chart = new SunburstChart({ holder: div, app, gap: 6 })\n\t}\n\n\t/** draw the counts of the app state's filter, unless they are shown already */\n\tasync update(appState: any) {\n\t\tconst termfilter = appState.termfilter\n\t\tconst sig = JSON.stringify(termfilter)\n\t\tif (sig == this.filterShown) return\n\t\tthis.filterShown = sig\n\t\tthis.ringsLoaded ??= getPlotConfig({}, this.app).then(config => {\n\t\t\tthis.twLst = config.twLst\n\t\t\tthis.renderRings()\n\t\t\treturn config.twLst\n\t\t})\n\t\tlet twLst: any[]\n\t\ttry {\n\t\t\ttwLst = await this.ringsLoaded\n\t\t} catch (e: any) {\n\t\t\t// try again on the next update, even with the same filter\n\t\t\tthis.ringsLoaded = undefined\n\t\t\tthis.filterShown = undefined\n\t\t\tthis.chart.dom.errdiv.style('display', '').text(e?.message || String(e))\n\t\t\treturn\n\t\t}\n\t\tconst drawn = await this.chart.update({\n\t\t\tgenome: appState.vocab.genome,\n\t\t\tdslabel: appState.vocab.dslabel,\n\t\t\ttwLst,\n\t\t\ttermfilter,\n\t\t\tcolors: appState.termdbConfig?.sunburst?.colors\n\t\t})\n\t\t// a failed request is retried on the next update, unless a newer update has recorded its own filter\n\t\tif (drawn === false && this.filterShown == sig) this.filterShown = undefined\n\t}\n\n\t/** one line per ring with its term name, then the link to the full chart */\n\trenderRings() {\n\t\tfor (const [i, tw] of this.twLst!.entries()) {\n\t\t\tthis.chart\n\t\t\t\t.ringLine(i)\n\t\t\t\t.append('div')\n\t\t\t\t.style('font-size', '.9em')\n\t\t\t\t.style('color', TEXT_DARK)\n\t\t\t\t.style('overflow', 'hidden')\n\t\t\t\t.style('white-space', 'nowrap')\n\t\t\t\t.style('text-overflow', 'ellipsis')\n\t\t\t\t.attr('title', tw.term.name)\n\t\t\t\t.text(tw.term.name)\n\t\t}\n\t\tthis.chart.dom.rings.body\n\t\t\t.append('div')\n\t\t\t.attr('data-testid', 'sjpp-about-sunburst-open')\n\t\t\t.attr('role', 'button')\n\t\t\t.style('margin-top', '10px')\n\t\t\t.style('font-size', '.85em')\n\t\t\t.style('color', LINK)\n\t\t\t.style('cursor', 'pointer')\n\t\t\t.text('Edit rings in the full chart \u203A')\n\t\t\t.attr('tabindex', 0)\n\t\t\t.on('click', this.onOpen)\n\t\t\t.on('keydown', (event: KeyboardEvent) => {\n\t\t\t\tif (event.key == 'Enter' || event.key == ' ') {\n\t\t\t\t\tevent.preventDefault()\n\t\t\t\t\tthis.onOpen()\n\t\t\t\t}\n\t\t\t})\n\t\tthis.chart.markShownRings()\n\t}\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,IAAM,gBAAN,MAAoB;AAAA,EAY1B,YAAY,QAAa,KAAU,QAAoB;AACtD,SAAK,MAAM;AACX,SAAK,SAAS;AACd,UAAM,MAAM,OAAO,OAAO,KAAK,EAAE,KAAK,eAAe,qBAAqB,EAAE,MAAM,eAAe,QAAQ;AAEzG,SAAK,QAAQ,IAAI,cAAc,EAAE,QAAQ,KAAK,KAAK,KAAK,EAAE,CAAC;AAAA,EAC5D;AAAA;AAAA,EAGA,MAAM,OAAO,UAAe;AAC3B,UAAM,aAAa,SAAS;AAC5B,UAAM,MAAM,KAAK,UAAU,UAAU;AACrC,QAAI,OAAO,KAAK,YAAa;AAC7B,SAAK,cAAc;AACnB,SAAK,gBAAgB,cAAc,CAAC,GAAG,KAAK,GAAG,EAAE,KAAK,YAAU;AAC/D,WAAK,QAAQ,OAAO;AACpB,WAAK,YAAY;AACjB,aAAO,OAAO;AAAA,IACf,CAAC;AACD,QAAI;AACJ,QAAI;AACH,cAAQ,MAAM,KAAK;AAAA,IACpB,SAAS,GAAQ;AAEhB,WAAK,cAAc;AACnB,WAAK,cAAc;AACnB,WAAK,MAAM,IAAI,OAAO,MAAM,WAAW,EAAE,EAAE,KAAK,GAAG,WAAW,OAAO,CAAC,CAAC;AACvE;AAAA,IACD;AACA,UAAM,QAAQ,MAAM,KAAK,MAAM,OAAO;AAAA,MACrC,QAAQ,SAAS,MAAM;AAAA,MACvB,SAAS,SAAS,MAAM;AAAA,MACxB;AAAA,MACA;AAAA,MACA,QAAQ,SAAS,cAAc,UAAU;AAAA,IAC1C,CAAC;AAED,QAAI,UAAU,SAAS,KAAK,eAAe,IAAK,MAAK,cAAc;AAAA,EACpE;AAAA;AAAA,EAGA,cAAc;AACb,eAAW,CAAC,GAAG,EAAE,KAAK,KAAK,MAAO,QAAQ,GAAG;AAC5C,WAAK,MACH,SAAS,CAAC,EACV,OAAO,KAAK,EACZ,MAAM,aAAa,MAAM,EACzB,MAAM,SAAS,SAAS,EACxB,MAAM,YAAY,QAAQ,EAC1B,MAAM,eAAe,QAAQ,EAC7B,MAAM,iBAAiB,UAAU,EACjC,KAAK,SAAS,GAAG,KAAK,IAAI,EAC1B,KAAK,GAAG,KAAK,IAAI;AAAA,IACpB;AACA,SAAK,MAAM,IAAI,MAAM,KACnB,OAAO,KAAK,EACZ,KAAK,eAAe,0BAA0B,EAC9C,KAAK,QAAQ,QAAQ,EACrB,MAAM,cAAc,MAAM,EAC1B,MAAM,aAAa,OAAO,EAC1B,MAAM,SAAS,IAAI,EACnB,MAAM,UAAU,SAAS,EACzB,KAAK,qCAAgC,EACrC,KAAK,YAAY,CAAC,EAClB,GAAG,SAAS,KAAK,MAAM,EACvB,GAAG,WAAW,CAAC,UAAyB;AACxC,UAAI,MAAM,OAAO,WAAW,MAAM,OAAO,KAAK;AAC7C,cAAM,eAAe;AACrB,aAAK,OAAO;AAAA,MACb;AAAA,IACD,CAAC;AACF,SAAK,MAAM,eAAe;AAAA,EAC3B;AACD;",
+  "names": []
+}

package/dist/adSandbox-RPEWEEW7.js

@@ -0,0 +1,29 @@
+import {
+  openSandbox
+} from "./chunk-BJAWDZBL.js";
+import "./chunk-WD7FZ5EE.js";
+import "./chunk-HJ6L54YS.js";
+import "./chunk-WXSMUSU7.js";
+import "./chunk-CNFTQSNE.js";
+import "./chunk-RIHO7ZD5.js";
+import "./chunk-TVJOSRCH.js";
+import "./chunk-3CIL7KH7.js";
+import "./chunk-T4XPCSLP.js";
+import "./chunk-4TJO2DGU.js";
+import "./chunk-W5J3LTYS.js";
+import "./chunk-MHWYRNGA.js";
+import "./chunk-JHLF2ZC2.js";
+import "./chunk-WJLRU5OF.js";
+import "./chunk-HBNB5TRH.js";
+import "./chunk-PF4DSFDR.js";
+import "./chunk-4OLM3KSB.js";
+import "./chunk-PWYMHUXY.js";
+import "./chunk-TLT4YIG3.js";
+import "./chunk-5R63Q5KH.js";
+import "./chunk-I6Y4O3RR.js";
+import "./chunk-Q5RDQNIT.js";
+import "./chunk-HS5PO5ZQ.js";
+export {
+  openSandbox
+};
+//# sourceMappingURL=adSandbox-RPEWEEW7.js.map

package/dist/animatedBubbleChart-ILDMZRBX.js

@@ -0,0 +1,542 @@
+import {
+  PlotBase,
+  Tabs
+} from "./chunk-WD7FZ5EE.js";
+import "./chunk-HJ6L54YS.js";
+import "./chunk-WXSMUSU7.js";
+import {
+  Menu
+} from "./chunk-CNFTQSNE.js";
+import "./chunk-RIHO7ZD5.js";
+import "./chunk-TVJOSRCH.js";
+import "./chunk-3CIL7KH7.js";
+import "./chunk-T4XPCSLP.js";
+import {
+  dofetch3
+} from "./chunk-4TJO2DGU.js";
+import "./chunk-W5J3LTYS.js";
+import "./chunk-MHWYRNGA.js";
+import "./chunk-JHLF2ZC2.js";
+import {
+  TermTypes,
+  arc_default,
+  collide_default,
+  getColors,
+  simulation_default,
+  x_default,
+  y_default
+} from "./chunk-WJLRU5OF.js";
+import {
+  copyMerge,
+  getCompInit
+} from "./chunk-HBNB5TRH.js";
+import "./chunk-PF4DSFDR.js";
+import {
+  enclose_default,
+  siblings_default,
+  sqrt
+} from "./chunk-4OLM3KSB.js";
+import "./chunk-PWYMHUXY.js";
+import "./chunk-TLT4YIG3.js";
+import "./chunk-5R63Q5KH.js";
+import {
+  select_default
+} from "./chunk-I6Y4O3RR.js";
+import "./chunk-Q5RDQNIT.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-ILDMZRBX.js.map