@sjcrh/proteinpaint-client 2.223.0 → 2.224.0

package/dist/proteomeCohortCompare-7QIJAKDR.js

@@ -1,866 +0,0 @@
-import {
-  makeTileCard,
-  makeTileGrid,
-  renderPlaceholderTiles,
-  renderTileError,
-  tileExpandState
-} from "./chunk-FYBN6BAC.js";
-import "./chunk-ZX75ZAUG.js";
-import "./chunk-ILEXRHF7.js";
-import {
-  PlotBase
-} from "./chunk-JP4IU7DO.js";
-import "./chunk-HJ6L54YS.js";
-import "./chunk-IRAB3OI7.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 {
-  axisBottom,
-  axisLeft
-} from "./chunk-WJLRU5OF.js";
-import {
-  copyMerge,
-  getCompInit
-} from "./chunk-HBNB5TRH.js";
-import "./chunk-PF4DSFDR.js";
-import {
-  linear
-} from "./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/proteomeCohortCompare.ts
-var defaultConfig = { chartType: "proteomeCohortCompare" };
-var PLOT = 360;
-var MARGIN = { top: 16, right: 12, bottom: 46, left: 50 };
-var UP = "#b2182b";
-var DOWN = "#2166ac";
-var DISCORDANT = "#e08214";
-var NEUTRAL = "#cccccc";
-var Z_THRESH = 2;
-var FDR_THRESH = 0.05;
-var PANEL_CLASS = "sjpp-cc-panel";
-var FACE_W = 206;
-var FACE_H = 170;
-var PAIR_TILES = [
-  {
-    key: "scatter",
-    title: "Concordance scatter",
-    subtitle: "log2FC-z of one cohort vs the other",
-    available: () => true,
-    unavailableNote: "",
-    render: (self, data) => self.renderScatter(data)
-  }
-];
-var TOOL_TILES = [
-  {
-    key: "default",
-    title: "Correlation matrix",
-    subtitle: "Cohort \xD7 cohort concordance of log2FC-z",
-    available: () => true,
-    unavailableNote: "",
-    render: (self, data) => self.renderMatrix(data),
-    controls: (self, holder) => self.renderMatrixMetricSelect(holder)
-  },
-  {
-    key: "heatmap",
-    title: "Protein heatmap",
-    subtitle: "Clustered protein \xD7 cohort log2FC-z",
-    available: (_, data) => !!data.heatmap,
-    unavailableNote: "Heatmap unavailable for this selection",
-    render: (self, data) => self.renderHeatmap(data.heatmap)
-  },
-  {
-    key: "overlap",
-    title: "UpSet",
-    subtitle: "Shared vs cohort-specific DAPs",
-    available: (_, data) => !!data.overlap,
-    unavailableNote: "Overlap unavailable for this selection",
-    render: (self, data) => self.renderOverlap(data.overlap)
-  },
-  {
-    key: "trajectory",
-    title: "Trajectory",
-    subtitle: "Protein clusters over age / progression",
-    available: (self, data) => self.trajectorySeriesCount(data.cohorts) > 0 && Array.isArray(data.trajectory),
-    unavailableNote: "Needs an ordered series (\u22653 timepoints) in the selection",
-    render: (self, data) => self.renderTrajectory(data.trajectory)
-  }
-];
-var ProteomeCohortCompare = class _ProteomeCohortCompare extends PlotBase {
-  constructor(opts, api) {
-    super(opts, api);
-    this.cohorts = [];
-    this.matrixMetric = "spearman";
-    /** DAP thresholds (scatter coloring + heatmap row selection) */
-    this.zThresh = Z_THRESH;
-    this.fdrThresh = FDR_THRESH;
-    /** max heatmap rows (DAP-union capped by cross-cohort variance) */
-    this.maxRows = 30;
-    /** number of k-means clusters in the trajectory view */
-    this.nClusters = 3;
-    /** trajectory drill-down selection: which series/cluster's genes are listed + highlighted */
-    this.trajSelected = null;
-    /** last fetched response, kept so threshold changes re-render without refetching */
-    this.data = null;
-    /** signature of the current cohort selection — used to reset the trajectory drill-down when it changes */
-    this.cohortKey = "";
-    /** key of the in-place expanded tile, kept so a refetch or redraw reopens it */
-    this.expandedTileKey = null;
-    this.type = _ProteomeCohortCompare.type;
-  }
-  static {
-    this.type = "proteomeCohortCompare";
-  }
-  async init() {
-    const holder = this.opts.holder.append("div").style("padding", "10px");
-    this.dom = {
-      holder,
-      body: holder.append("div"),
-      tip: new Menu({ padding: "" }),
-      header: this.opts.header
-    };
-    if (this.dom.header) this.dom.header.html("Cohort Comparison");
-  }
-  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() {
-    const config = this.state.config;
-    this.cohorts = config.cohorts || [];
-    if (this.cohorts.length < 2) {
-      this.dom.body.selectAll("*").remove();
-      this.dom.body.append("div").style("color", "#666").text("Select at least two cohorts to compare.");
-      return;
-    }
-    const key = this.cohorts.map((c) => `${c.organism}|${c.assay}|${c.cohort}`).join(";");
-    if (key !== this.cohortKey) {
-      this.cohortKey = key;
-      this.trajSelected = null;
-    }
-    await this.reload();
-  }
-  cohortLabel(c) {
-    return c.label || c.cohort;
-  }
-  /** number of ordered series with ≥3 distinct timepoints among the response cohorts — gates the
-   *  Trajectory view (matches the server, which needs ≥3 distinct ages to build a trajectory) */
-  trajectorySeriesCount(cohortsData) {
-    const bySeries = /* @__PURE__ */ new Map();
-    for (const c of cohortsData || []) {
-      const t = c?.trajectory;
-      if (!t?.series) continue;
-      let vals = bySeries.get(t.series);
-      if (!vals) bySeries.set(t.series, vals = /* @__PURE__ */ new Set());
-      vals.add(t.value);
-    }
-    let n = 0;
-    for (const vals of bySeries.values()) if (vals.size >= 3) n++;
-    return n;
-  }
-  async reload() {
-    const multi = this.cohorts.length > 2;
-    const data = await dofetch3("termdb/proteomeCohortCompare", {
-      body: {
-        genome: this.app.opts.state.vocab.genome,
-        dslabel: this.app.opts.state.vocab.dslabel,
-        cohorts: this.cohorts,
-        // ≥3 cohorts: every tool is rendered as a tile, so fetch them all in one request
-        heatmap: multi,
-        overlap: multi,
-        trajectory: multi,
-        zThresh: this.zThresh,
-        fdrThresh: this.fdrThresh,
-        maxRows: this.maxRows,
-        nClusters: this.nClusters
-      }
-    }).catch((e) => {
-      this.dom.body.selectAll("*").remove();
-      throw e;
-    });
-    this.dom.body.selectAll("*").remove();
-    if (!data || data.error || !Array.isArray(data.z) || typeof data.sharedGeneCount !== "number") {
-      this.dom.body.append("div").style("padding", "12px").style("color", "#a00").text(
-        data && data.error || "Cohort comparison is unavailable \u2014 the server may need to be restarted to load the comparison endpoint."
-      );
-      return;
-    }
-    this.data = data;
-    if (data.sharedGeneCount < 3) {
-      this.dom.body.append("div").style("padding", "12px").style("color", "#a00").text("Too few shared proteins to compare.");
-      return;
-    }
-    this.renderToolTiles(data);
-  }
-  tiles() {
-    return this.cohorts.length > 2 ? TOOL_TILES : PAIR_TILES;
-  }
-  /** run a renderer (which draws into this.dom.body) against another holder */
-  renderInto(holder, draw) {
-    const body = this.dom.body;
-    this.dom.body = holder;
-    try {
-      draw();
-    } finally {
-      this.dom.body = body;
-    }
-  }
-  /** one live tile card per tool (same cards as the Protein View study tiles): the face is the
-   *  tool drawn at full size then scaled to fit, side panels hidden; expanding the card shows the
-   *  full tool in place. Tools without data render as greyed placeholders after the live ones. */
-  renderToolTiles(data) {
-    const grid = makeTileGrid(this.dom.body);
-    const missing = [];
-    for (const tile of this.tiles()) {
-      if (!tile.available(this, data)) {
-        missing.push(tile);
-        continue;
-      }
-      const body = makeTileCard(grid, {
-        title: tile.title,
-        subtitle: tile.subtitle,
-        uniform: true,
-        expand: { render: (holder) => this.renderExpanded(tile, holder, data), ...tileExpandState(this, tile.key) }
-      });
-      if (tile.controls) {
-        tile.controls(this, body.append("div").style("margin-top", "2px"));
-      }
-      const face = body.append("div").style("width", `${FACE_W}px`).style("height", `${FACE_H}px`).style("overflow", "hidden").style("margin-top", "4px").attr("title", `Expand ${tile.title}`);
-      const inner = face.append("div").style("display", "inline-block").style("transform-origin", "top left");
-      try {
-        this.renderInto(inner, () => tile.render(this, data));
-        inner.selectAll(`.${PANEL_CLASS}`).style("display", "none");
-        const node = inner.node();
-        const w = node.scrollWidth || node.offsetWidth;
-        const h = node.scrollHeight || node.offsetHeight;
-        const k = w && h ? Math.min(1, FACE_W / w, FACE_H / h) : 1;
-        inner.style("transform", `scale(${k})`);
-        inner.style("margin-left", `${Math.max(0, (FACE_W - w * k) / 2)}px`).style("margin-top", `${Math.max(0, (FACE_H - h * k) / 2)}px`);
-        inner.style("pointer-events", "none");
-      } catch (err) {
-        renderTileError(face, err, this);
-      }
-    }
-    renderPlaceholderTiles(
-      grid,
-      missing.map((t) => ({ title: t.title, note: t.unavailableNote }))
-    );
-  }
-  /** the expanded tile: the full interactive tool with its side panels and controls */
-  renderExpanded(tile, holder, data) {
-    if (tile.controls) tile.controls(this, holder.append("div").style("margin-bottom", "8px"));
-    try {
-      this.renderInto(holder.append("div"), () => tile.render(this, data));
-    } catch (err) {
-      renderTileError(holder, err, this);
-    }
-  }
-  /** Spearman/Pearson toggle for the correlation matrix. The response carries both matrices,
-   *  so switching only redraws the tiles — no refetch. */
-  renderMatrixMetricSelect(holder) {
-    const label = holder.append("label").style("font-size", "0.8em").style("color", "#374151");
-    label.append("span").style("margin-right", "6px").text("Correlation:");
-    const sel = label.append("select").style("font-size", "1em").on("change", (event) => {
-      this.matrixMetric = event.target.value;
-      this.redrawTools();
-    });
-    for (const m of ["spearman", "pearson"]) {
-      const o = sel.append("option").attr("value", m).text(m[0].toUpperCase() + m.slice(1));
-      if (m === this.matrixMetric) o.property("selected", true);
-    }
-  }
-  /** re-render the tool tiles (and the expanded one) from the cached response (no refetch) */
-  redrawTools() {
-    if (!this.data) return;
-    this.dom.body.selectAll("*").remove();
-    this.renderToolTiles(this.data);
-  }
-  renderScatter(data) {
-    const [ca, cb] = this.cohorts;
-    const zx = data.z[0];
-    const zy = data.z[1];
-    const px = data.fdr[0];
-    const py = data.fdr[1];
-    const genes = data.genes;
-    const rho = data.spearman[0][1];
-    const r = data.pearson[0][1];
-    const rhoP = data.spearmanP?.[0]?.[1] ?? null;
-    const rP = data.pearsonP?.[0]?.[1] ?? null;
-    const fmtP = (p) => p === null || !Number.isFinite(p) ? "" : `, p = ${p < 1e-4 ? p.toExponential(1) : p.toFixed(4)}`;
-    const n = data.sharedGeneCount;
-    const zT = this.zThresh;
-    const fT = this.fdrThresh;
-    const isDap = (z, fdr) => Math.abs(z) >= zT && fdr <= fT;
-    const catOf = (i) => {
-      if (!isDap(zx[i], px[i]) || !isDap(zy[i], py[i])) return "other";
-      const a = zx[i] > 0, b = zy[i] > 0;
-      if (a && b) return "up";
-      if (!a && !b) return "down";
-      return "discordant";
-    };
-    const cats = genes.map((_, i) => catOf(i));
-    const counts = { up: 0, down: 0, discordant: 0, other: 0 };
-    for (const c of cats) counts[c]++;
-    const catColor = { up: UP, down: DOWN, discordant: DISCORDANT, other: NEUTRAL };
-    const row = this.dom.body.append("div").style("display", "flex").style("gap", "18px").style("align-items", "flex-start");
-    let xmin = Infinity, xmax = -Infinity, ymin = Infinity, ymax = -Infinity;
-    for (let i = 0; i < genes.length; i++) {
-      if (zx[i] < xmin) xmin = zx[i];
-      if (zx[i] > xmax) xmax = zx[i];
-      if (zy[i] < ymin) ymin = zy[i];
-      if (zy[i] > ymax) ymax = zy[i];
-    }
-    const padX = (xmax - xmin) * 0.04 || 1;
-    const padY = (ymax - ymin) * 0.04 || 1;
-    const x = linear().domain([xmin - padX, xmax + padX]).range([MARGIN.left, MARGIN.left + PLOT]);
-    const y = linear().domain([ymin - padY, ymax + padY]).range([MARGIN.top + PLOT, MARGIN.top]);
-    const svg = row.append("svg").attr("width", MARGIN.left + PLOT + MARGIN.right).attr("height", MARGIN.top + PLOT + MARGIN.bottom);
-    if (xmin < 0 && xmax > 0)
-      svg.append("line").attr("x1", x(0)).attr("y1", MARGIN.top).attr("x2", x(0)).attr("y2", MARGIN.top + PLOT).attr("stroke", "#eee");
-    if (ymin < 0 && ymax > 0)
-      svg.append("line").attr("x1", MARGIN.left).attr("y1", y(0)).attr("x2", MARGIN.left + PLOT).attr("y2", y(0)).attr("stroke", "#eee");
-    const pts = svg.append("g");
-    const drawPoint = (i) => {
-      const c = cats[i];
-      pts.append("circle").attr("cx", x(zx[i])).attr("cy", y(zy[i])).attr("r", c === "other" ? 1.8 : 2.6).attr("fill", catColor[c]).attr("fill-opacity", c === "other" ? 0.3 : 0.8).on("mouseover", (event) => {
-        this.dom.tip.clear().show(event.clientX, event.clientY);
-        this.dom.tip.d.append("div").style("padding", "5px 8px").style("font-size", "0.85em").html(
-          `<b>${genes[i]}</b><br>${this.cohortLabel(ca)}: z=${zx[i].toFixed(2)} (log2FC ${data.fc[0][i].toFixed(
-            2
-          )}, FDR ${px[i].toExponential(1)})<br>${this.cohortLabel(cb)}: z=${zy[i].toFixed(2)} (log2FC ${data.fc[1][i].toFixed(2)}, FDR ${py[i].toExponential(1)})`
-        );
-      }).on("mouseout", () => this.dom.tip.hide());
-    };
-    for (let i = 0; i < genes.length; i++) if (cats[i] === "other") drawPoint(i);
-    for (let i = 0; i < genes.length; i++) if (cats[i] !== "other") drawPoint(i);
-    svg.append("g").attr("transform", `translate(0,${MARGIN.top + PLOT})`).call(axisBottom(x).ticks(5));
-    svg.append("g").attr("transform", `translate(${MARGIN.left},0)`).call(axisLeft(y).ticks(5));
-    svg.append("text").attr("x", MARGIN.left + PLOT / 2).attr("y", MARGIN.top + PLOT + 36).attr("text-anchor", "middle").style("font-size", "11px").text(`${this.cohortLabel(ca)}  (log2FC-z)`);
-    svg.append("text").attr("transform", `translate(12,${MARGIN.top + PLOT / 2}) rotate(-90)`).attr("text-anchor", "middle").style("font-size", "11px").text(`${this.cohortLabel(cb)}  (log2FC-z)`);
-    const panel = row.append("div").classed(PANEL_CLASS, true).style("font-size", "0.85em").style("padding-top", "4px").style("min-width", "190px");
-    const statBox = panel.append("div").style("margin-bottom", "12px").style("line-height", "1.6");
-    statBox.append("div").attr("title", "Number of shared proteins compared").html(`<b>n</b> = ${n.toLocaleString()} shared proteins`);
-    statBox.append("div").attr("title", "Spearman rank correlation of log2FC-z (robust; no linearity assumption)").html(`<b>\u03C1</b> (Spearman) = ${rho.toFixed(3)}${fmtP(rhoP)}`);
-    statBox.append("div").attr("title", "Pearson correlation of log2FC-z (linear agreement; the papers\u2019 R)").html(`<b>r</b> (Pearson) = ${r.toFixed(3)}${fmtP(rP)}`);
-    const cutoffs = panel.append("div").style("margin-bottom", "12px");
-    cutoffs.append("div").style("font-weight", "600").style("margin-bottom", "3px").attr("title", "A protein is a shared DAP only if it clears BOTH cutoffs in BOTH cohorts").text("DAP cutoffs");
-    const numInput = (label, value, step, title, onSet) => {
-      const l = cutoffs.append("div").style("margin-bottom", "2px").attr("title", title);
-      l.append("span").style("display", "inline-block").style("width", "44px").html(label);
-      l.append("input").attr("type", "number").attr("step", step).attr("min", 0).property("value", value).style("width", "70px").on("change", (event) => {
-        const v = Number(event.target.value);
-        if (Number.isFinite(v) && v >= 0) {
-          onSet(v);
-          this.redrawTools();
-        }
-      });
-    };
-    numInput("|z| \u2265", this.zThresh, 0.5, "Minimum |log2FC-z| (standardized fold change)", (v) => this.zThresh = v);
-    numInput("FDR \u2264", this.fdrThresh, 0.01, "Maximum FDR", (v) => this.fdrThresh = v);
-    const legend = panel.append("div");
-    legend.append("div").style("font-weight", "600").style("margin-bottom", "6px").text("Shared regulation");
-    const legItems = [
-      [UP, "Up in both", counts.up],
-      [DOWN, "Down in both", counts.down],
-      [DISCORDANT, "Opposite (DAP in both)", counts.discordant],
-      [NEUTRAL, "Not a shared DAP", counts.other]
-    ];
-    for (const [col, lab, ct] of legItems) {
-      const item = legend.append("div").style("display", "flex").style("align-items", "center").style("gap", "6px").style("margin-bottom", "3px");
-      item.append("span").style("width", "10px").style("height", "10px").style("border-radius", "50%").style("background", col).style("display", "inline-block");
-      item.append("span").html(`${lab} <span style="color:#999">(${ct.toLocaleString()})</span>`);
-    }
-  }
-  renderMatrix(data) {
-    const n = this.cohorts.length;
-    const corr = data[this.matrixMetric];
-    const order = leafOrder(corr);
-    const labels = order.map((i) => this.cohortLabel(this.cohorts[i]));
-    const cell = Math.max(26, Math.min(48, Math.floor(360 / n)));
-    const maxLabelLen = Math.max(...labels.map((l) => l.length));
-    const labelPad = Math.min(120, Math.max(40, Math.ceil(maxLabelLen * 6.5) + 12));
-    const svg = this.dom.body.append("svg").attr("width", labelPad + n * cell + 60).attr("height", labelPad + n * cell + 20);
-    const cscale = linear().domain([-1, 0, 1]).range([DOWN, "#f7f7f7", UP]).clamp(true);
-    const g = svg.append("g").attr("transform", `translate(${labelPad},${labelPad})`);
-    for (let ri = 0; ri < n; ri++) {
-      for (let ci = 0; ci < n; ci++) {
-        const v = corr[order[ri]][order[ci]];
-        g.append("rect").attr("x", ci * cell).attr("y", ri * cell).attr("width", cell - 1).attr("height", cell - 1).attr("fill", cscale(v)).style("cursor", ri === ci ? "default" : "pointer").on("mouseover", (event) => {
-          this.dom.tip.clear().show(event.clientX, event.clientY);
-          this.dom.tip.d.append("div").style("padding", "5px 8px").style("font-size", "0.85em").html(`${labels[ri]} \xD7 ${labels[ci]}<br><b>${this.matrixMetric} = ${v.toFixed(3)}</b>`);
-        }).on("mouseout", () => this.dom.tip.hide()).on("click", () => {
-          if (ri === ci) return;
-          this.openPair(this.cohorts[order[ri]], this.cohorts[order[ci]]);
-        });
-        g.append("text").attr("x", ci * cell + cell / 2).attr("y", ri * cell + cell / 2).attr("text-anchor", "middle").attr("dominant-baseline", "central").style("font-size", "10px").style("fill", Math.abs(v) > 0.6 ? "#fff" : "#333").style("pointer-events", "none").text(v.toFixed(2));
-      }
-    }
-    for (let i = 0; i < n; i++) {
-      svg.append("text").attr("x", labelPad - 6).attr("y", labelPad + i * cell + cell / 2).attr("text-anchor", "end").attr("dominant-baseline", "central").style("font-size", "11px").text(labels[i]);
-      svg.append("text").attr("transform", `translate(${labelPad + i * cell + cell / 2},${labelPad - 6}) rotate(-45)`).attr("text-anchor", "start").style("font-size", "11px").text(labels[i]);
-    }
-    this.dom.body.append("div").classed(PANEL_CLASS, true).style("font-size", "0.8em").style("color", "#777").style("margin-top", "6px").text("Rows/cols ordered by hierarchical clustering. Click a cell to open the pairwise scatter.");
-  }
-  /** open a fresh 2-cohort comparison for the clicked matrix pair */
-  openPair(a, b) {
-    this.app.dispatch({
-      type: "plot_create",
-      config: { chartType: "proteomeCohortCompare", cohorts: [a, b] }
-    });
-  }
-  /** protein × cohort log2FC-z heatmap, clustered on both axes (via server hclust.R) */
-  renderHeatmap(hm) {
-    if (!hm) {
-      this.dom.body.append("div").style("padding", "12px").style("color", "#a00").text("Heatmap unavailable.");
-      return;
-    }
-    const wrap = this.dom.body.append("div").style("display", "flex").style("gap", "18px").style("align-items", "flex-end");
-    const left = wrap.append("div");
-    const panel = wrap.append("div").classed(PANEL_CLASS, true).style("font-size", "0.85em").style("min-width", "160px");
-    panel.append("div").style("font-weight", "600").style("margin-bottom", "3px").text("DAP cutoffs");
-    const numInput = (label, value, step, title, onSet) => {
-      const l = panel.append("div").style("margin-bottom", "3px").attr("title", title);
-      l.append("span").style("display", "inline-block").style("width", "58px").html(label);
-      l.append("input").attr("type", "number").attr("step", step).attr("min", 0).property("value", value).style("width", "64px").on("change", (e) => {
-        const v = Number(e.target.value);
-        if (Number.isFinite(v) && v >= 0) {
-          onSet(v);
-          this.reload();
-        }
-      });
-    };
-    numInput("|z| \u2265", this.zThresh, 0.5, "DAP fold-change cutoff", (v) => this.zThresh = v);
-    numInput("FDR \u2264", this.fdrThresh, 0.01, "DAP significance cutoff (FDR)", (v) => this.fdrThresh = v);
-    numInput(
-      "max rows",
-      this.maxRows,
-      25,
-      "Cap on proteins shown (top by variance of z across cohorts)",
-      (v) => this.maxRows = Math.round(v)
-    );
-    const legendHolder = panel.append("div").style("margin-top", "12px");
-    const countTxt = hm.shown < hm.totalDap ? `${hm.shown} of ${hm.totalDap} DAP-union proteins` : `${hm.shown} DAP-union proteins`;
-    panel.append("div").style("margin-top", "12px").style("color", "#777").text(countTxt);
-    if (!hm.rowNames.length) {
-      left.append("div").style("padding", "12px").style("color", "#a00").text("No DAP proteins at these cutoffs \u2014 loosen |z| or FDR.");
-      return;
-    }
-    const rows = hm.rowNames;
-    const cols = hm.colLabels;
-    const Z = hm.z;
-    const cellW = 45;
-    const MAX_GRID_H = 600;
-    const cellH = Math.min(18, MAX_GRID_H / rows.length);
-    const showRowNames = cellH >= 8;
-    const rowDendW = hm.rowDendrogram ? 90 : 0;
-    const colDendH = hm.colDendrogram ? 70 : 0;
-    const maxLabelLen = Math.max(1, ...cols.map((c) => c.length));
-    const colLabelH = Math.min(220, Math.max(70, Math.round(maxLabelLen * 7) + 12));
-    const rowLabelW = showRowNames ? 140 : 8;
-    const legendW = 12;
-    const gridW = cols.length * cellW;
-    const gridH = rows.length * cellH;
-    const gridX = rowDendW;
-    const gridY = colDendH + colLabelH;
-    const svg = left.append("svg").attr("width", gridX + gridW + rowLabelW + legendW).attr("height", gridY + gridH + 12).attr("font-family", "sans-serif");
-    let cap = 1;
-    for (const row of Z) for (const v of row) cap = Math.max(cap, Math.abs(v));
-    const color = linear().domain([-cap, 0, cap]).range([DOWN, "#f7f7f7", UP]).clamp(true);
-    if (hm.rowDendrogram)
-      drawDendrogram(
-        svg.append("g").attr("transform", `translate(0,${gridY})`),
-        hm.rowDendrogram,
-        cellH,
-        rowDendW,
-        "left"
-      );
-    if (hm.colDendrogram)
-      drawDendrogram(
-        svg.append("g").attr("transform", `translate(${gridX},0)`),
-        hm.colDendrogram,
-        cellW,
-        colDendH,
-        "top"
-      );
-    const labG = svg.append("g").attr("transform", `translate(${gridX},${gridY - 4})`);
-    cols.forEach((c, i) => {
-      const cx = i * cellW + cellW / 2;
-      labG.append("text").attr("x", cx).attr("y", 0).attr("transform", `rotate(-90,${cx},0)`).attr("text-anchor", "start").attr("dominant-baseline", "central").style("font-size", "11px").text(c);
-    });
-    const cg = svg.append("g").attr("transform", `translate(${gridX},${gridY})`);
-    for (let r = 0; r < rows.length; r++) {
-      for (let c = 0; c < cols.length; c++) {
-        const v = Z[r][c];
-        cg.append("rect").attr("x", c * cellW).attr("y", r * cellH).attr("width", cellW - 0.5).attr("height", cellH - 0.5).attr("fill", color(v)).on("mouseover", (event) => {
-          this.dom.tip.clear().show(event.clientX, event.clientY);
-          this.dom.tip.d.append("div").style("padding", "5px 8px").style("font-size", "0.85em").html(
-            `<b>${rows[r]}</b> \u2014 ${cols[c]}<br>z = ${v.toFixed(2)}, log2FC = ${hm.fc[r][c].toFixed(
-              2
-            )}, FDR = ${hm.fdr[r][c].toExponential(1)}`
-          );
-        }).on("mouseout", () => this.dom.tip.hide());
-      }
-    }
-    if (showRowNames) {
-      const rowFont = Math.min(11, Math.max(7, Math.floor(cellH - 1)));
-      const rg = svg.append("g").attr("transform", `translate(${gridX + gridW + 4},${gridY})`);
-      rows.forEach(
-        (name, r) => rg.append("text").attr("x", 0).attr("y", r * cellH + cellH / 2).attr("dominant-baseline", "central").style("font-size", `${rowFont}px`).text(name)
-      );
-    }
-    const legLen = 150;
-    const legThick = 16;
-    const steps = 24;
-    const legSvg = legendHolder.append("svg").attr("width", legLen + 8).attr("height", legThick + 36).attr("font-family", "sans-serif");
-    legSvg.append("text").attr("x", 0).attr("y", 10).style("font-size", "11px").style("font-weight", "600").text("log2FC-z");
-    const legG = legSvg.append("g").attr("transform", "translate(2,18)");
-    for (let s = 0; s < steps; s++) {
-      const t = s / (steps - 1);
-      legG.append("rect").attr("x", t * legLen).attr("y", 0).attr("width", legLen / steps + 0.6).attr("height", legThick).attr("fill", color(-cap + 2 * cap * t));
-    }
-    for (const [t, lab] of [
-      [0, `\u2212${cap.toFixed(1)}`],
-      [0.5, "0"],
-      [1, `+${cap.toFixed(1)}`]
-    ])
-      legG.append("text").attr("x", t * legLen).attr("y", legThick + 13).attr("text-anchor", t === 0 ? "start" : t === 1 ? "end" : "middle").style("font-size", "11px").text(lab);
-  }
-  /** render a capped, expandable gene list (5 per row; first 10 shown, rest behind a black "more") */
-  renderGeneList(holder, headerText, genes) {
-    holder.selectAll("*").remove();
-    holder.append("div").style("font-weight", "600").style("margin-bottom", "4px").text(headerText);
-    const list = holder.append("div").style("max-width", "360px").style("line-height", "1.6").style("color", "#333").style("word-break", "break-word");
-    const LIMIT = 10;
-    const PER_ROW = 5;
-    const render = (expanded) => {
-      list.selectAll("*").remove();
-      if (!genes.length) {
-        list.text("(none)");
-        return;
-      }
-      const shown = expanded ? genes : genes.slice(0, LIMIT);
-      for (let i = 0; i < shown.length; i += PER_ROW) {
-        const chunk = shown.slice(i, i + PER_ROW);
-        const last = i + PER_ROW >= shown.length;
-        list.append("div").text(chunk.join(", ") + (last ? "" : ","));
-      }
-      if (genes.length > LIMIT)
-        list.append("button").attr("type", "button").style("cursor", "pointer").style("color", "#333").style("text-decoration", "underline").style("display", "inline-block").style("margin-top", "3px").style("background", "none").style("border", "none").style("padding", "0").style("font", "inherit").text(expanded ? "less" : `more (${(genes.length - LIMIT).toLocaleString()})`).on("click", () => render(!expanded));
-    };
-    render(false);
-  }
-  /** age/progression trajectory. One section per ordered series; within a section, one small panel
-   *  per k-means cluster: faint individual member trajectories (relative abundance)
-   *  plus a thick black module-eigengene trend line. Click a panel to list that cluster's genes.
-   *  DAP cutoffs + cluster count live in the right panel (all refetch). */
-  renderTrajectory(traj) {
-    const body = this.dom.body;
-    if (!Array.isArray(traj) || !traj.length) {
-      body.append("div").style("padding", "12px").style("color", "#a00").text(
-        "No age/progression series in this selection \u2014 pick \u22653 cohorts that form one ordered series (same model/region/cell type, differing only by age or stage)."
-      );
-      return;
-    }
-    const row = body.append("div").style("display", "flex").style("gap", "24px").style("align-items", "flex-start");
-    const left = row.append("div");
-    const panel = row.append("div").classed(PANEL_CLASS, true).style("font-size", "0.85em").style("min-width", "170px");
-    panel.append("div").style("font-weight", "600").style("margin-bottom", "3px").text("DAP cutoffs");
-    const numInput = (label, value, step, title, onSet) => {
-      const l = panel.append("div").style("margin-bottom", "3px").attr("title", title);
-      l.append("span").style("display", "inline-block").style("width", "62px").html(label);
-      l.append("input").attr("type", "number").attr("step", step).attr("min", 0).property("value", value).style("width", "60px").on("change", (e) => {
-        const v = Number(e.target.value);
-        if (Number.isFinite(v) && v >= 0) {
-          onSet(v);
-          this.trajSelected = null;
-          this.reload();
-        }
-      });
-    };
-    numInput("|z| \u2265", this.zThresh, 0.5, "Variable-protein fold-change cutoff", (v) => this.zThresh = v);
-    numInput(
-      "FDR \u2264",
-      this.fdrThresh,
-      0.01,
-      "Variable-protein significance cutoff (already an FDR)",
-      (v) => this.fdrThresh = v
-    );
-    numInput(
-      "clusters",
-      this.nClusters,
-      1,
-      "Number of k-means clusters",
-      (v) => this.nClusters = Math.max(1, Math.round(v))
-    );
-    panel.append("div").style("margin-top", "10px").style("font-size", "0.8em").style("color", "#777").style("line-height", "1.4").html(
-      "Each thin line is one protein (standardized log2FC-z).<br>The thick black line is the cluster eigengene (PC1)."
-    );
-    const genePanel = panel.append("div").style("margin-top", "14px");
-    const showGenes = () => {
-      const selSi = this.trajSelected?.si;
-      const s = selSi != null ? traj[selSi] : null;
-      const pr = s?.clusters?.[this.trajSelected.pi];
-      if (!pr) {
-        genePanel.selectAll("*").remove();
-        genePanel.append("div").style("color", "#888").text("Click a cluster to list its proteins.");
-        return;
-      }
-      this.renderGeneList(
-        genePanel,
-        `${pr.size.toLocaleString()} proteins \xB7 ${s.label} \xB7 C${this.trajSelected.pi + 1}:`,
-        pr.genes
-      );
-    };
-    const renderAll = () => {
-      left.selectAll("*").remove();
-      traj.forEach((s, si) => {
-        const section = left.append("div").style("margin-bottom", "20px");
-        section.append("div").style("font-weight", "600").style("max-width", "640px").text(s.label);
-        section.append("div").style("font-size", "0.8em").style("color", "#888").style("margin-bottom", "6px").text(
-          `${(s.geneCount || 0).toLocaleString()} variable proteins \xB7 ${s.points.map((p) => p.label).join(" \u2192 ")}`
-        );
-        const grid = section.append("div").style("display", "flex").style("flex-wrap", "wrap").style("gap", "12px");
-        if (!s.clusters?.length) {
-          grid.append("div").style("color", "#a00").style("font-size", "0.85em").text("No variable proteins at these cutoffs.");
-          return;
-        }
-        s.clusters.forEach((pr, pi) => {
-          const selected = this.trajSelected != null && this.trajSelected.si === si && this.trajSelected.pi === pi;
-          const cell = grid.append("div").style("border", selected ? "2px solid #333" : "1px solid #ddd").style("border-radius", "4px").style("padding", "4px 6px 2px").style("cursor", "pointer").on("click", () => {
-            this.trajSelected = selected ? null : { si, pi };
-            renderAll();
-            showGenes();
-          });
-          cell.append("div").style("font-size", "0.8em").style("font-weight", selected ? "700" : "600").style("margin-bottom", "1px").text(`C${pi + 1} \xB7 ${pr.size.toLocaleString()} proteins`);
-          this.drawClusterPlot(cell.append("div"), s.points, pr);
-        });
-      });
-    };
-    renderAll();
-    showGenes();
-  }
-  /** one cluster panel: faint member trajectories + a thick black eigengene line, over the ordered
-   *  timepoints (true-spaced by age). y = relative abundance (standardized log2FC-z). */
-  drawClusterPlot(holder, points, cluster) {
-    const lines = cluster.lines || [];
-    const eigengene = cluster.eigengene || [];
-    const W = 232, H = 162;
-    const M = { top: 8, right: 10, bottom: 34, left: 44 };
-    const innerW = W - M.left - M.right;
-    const innerH = H - M.top - M.bottom;
-    const xs = points.map((p) => p.value);
-    const xmin = Math.min(...xs);
-    const xmax = Math.max(...xs);
-    let ymin = Infinity, ymax = -Infinity;
-    for (const ln of lines)
-      for (const v of ln) {
-        if (v < ymin) ymin = v;
-        if (v > ymax) ymax = v;
-      }
-    for (const v of eigengene) {
-      if (v < ymin) ymin = v;
-      if (v > ymax) ymax = v;
-    }
-    if (!Number.isFinite(ymin)) {
-      ymin = -2;
-      ymax = 2;
-    }
-    if (ymin === ymax) {
-      ymin -= 1;
-      ymax += 1;
-    }
-    const padY = (ymax - ymin) * 0.06;
-    const x = linear().domain([xmin, xmax]).range([M.left, M.left + innerW]);
-    const y = linear().domain([ymin - padY, ymax + padY]).range([M.top + innerH, M.top]);
-    const svg = holder.append("svg").attr("width", W).attr("height", H).attr("font-family", "sans-serif");
-    if (ymin < 0 && ymax > 0)
-      svg.append("line").attr("x1", M.left).attr("x2", M.left + innerW).attr("y1", y(0)).attr("y2", y(0)).attr("stroke", "#eee");
-    svg.append("g").attr("transform", `translate(0,${M.top + innerH})`).call(
-      axisBottom(x).tickValues(xs).tickFormat(((_d, i) => points[i]?.label ?? ""))
-    );
-    svg.append("g").attr("transform", `translate(${M.left},0)`).call(axisLeft(y).ticks(3));
-    svg.append("text").attr("x", M.left + innerW / 2).attr("y", H - 3).attr("text-anchor", "middle").style("font-size", "9px").style("fill", "#555").text("age");
-    svg.append("text").attr("transform", `translate(9,${M.top + innerH / 2}) rotate(-90)`).attr("text-anchor", "middle").style("font-size", "9px").style("fill", "#555").text("relative abundance");
-    const pathOf = (vec) => vec.map((v, i) => `${i ? "L" : "M"}${x(points[i].value)},${y(v)}`).join(" ");
-    for (const ln of lines)
-      svg.append("path").attr("d", pathOf(ln)).attr("fill", "none").attr("stroke", "#888").attr("stroke-width", 0.5).attr("stroke-opacity", 0.22);
-    if (eigengene.length)
-      svg.append("path").attr("d", pathOf(eigengene)).attr("fill", "none").attr("stroke", "#000").attr("stroke-width", 2.5);
-  }
-  /** shared-vs-specific DAP overlap: an UpSet plot per direction (only offered for ≥3 cohorts).
-   *  Each protein falls in exactly one combination — the set of cohorts where it's a DAP in that
-   *  direction (|z| ≥ zThresh, FDR ≤ fdrThresh). Single-cohort groups are cohort-specific. */
-  renderOverlap(overlap) {
-    if (!overlap || !Array.isArray(overlap.up) || !Array.isArray(overlap.down)) {
-      this.dom.body.append("div").style("padding", "12px").style("color", "#a00").text("Overlap unavailable.");
-      return;
-    }
-    const labels = this.cohorts.map((c) => this.cohortLabel(c));
-    const wrap = this.dom.body.append("div");
-    const row = wrap.append("div").style("display", "flex").style("gap", "24px").style("align-items", "flex-start");
-    const left = row.append("div");
-    const panel = row.append("div").classed(PANEL_CLASS, true).style("font-size", "0.85em").style("min-width", "150px");
-    panel.append("div").style("font-weight", "600").style("margin-bottom", "3px").text("DAP cutoffs");
-    const numInput = (label, value, step, title, onSet) => {
-      const l = panel.append("div").style("margin-bottom", "3px").attr("title", title);
-      l.append("span").style("display", "inline-block").style("width", "48px").html(label);
-      l.append("input").attr("type", "number").attr("step", step).attr("min", 0).property("value", value).style("width", "64px").on("change", (e) => {
-        const v = Number(e.target.value);
-        if (Number.isFinite(v) && v >= 0) {
-          onSet(v);
-          this.reload();
-        }
-      });
-    };
-    numInput("|z| \u2265", this.zThresh, 0.5, "DAP fold-change cutoff", (v) => this.zThresh = v);
-    numInput("FDR \u2264", this.fdrThresh, 0.01, "DAP significance cutoff (FDR)", (v) => this.fdrThresh = v);
-    const diagrams = left.append("div");
-    const genePanel = panel.append("div").style("margin-top", "16px");
-    const cohortPhrase = (idxs) => {
-      const names = idxs.map((i) => labels[i]);
-      if (names.length <= 1) return names[0] || "\u2014";
-      if (names.length === 2) return `${names[0]} and ${names[1]}`;
-      return `${names.slice(0, -1).join(", ")}, and ${names[names.length - 1]}`;
-    };
-    const showGenes = (dir, combo) => {
-      const cnt = combo.genes.length;
-      this.renderGeneList(
-        genePanel,
-        `${cnt.toLocaleString()} protein${cnt === 1 ? "" : "s"} ${dir.toLowerCase()} in ${cohortPhrase(
-          combo.cohorts
-        )}:`,
-        combo.genes
-      );
-    };
-    for (const [dir, combos] of [
-      ["Up-regulated", overlap.up],
-      ["Down-regulated", overlap.down]
-    ]) {
-      const box = diagrams.append("div").style("margin-bottom", "24px");
-      box.append("div").style("font-weight", "600").style("margin-bottom", "4px").text(`${dir} (${totalGenes(combos).toLocaleString()})`);
-      this.drawUpSet(box, combos, labels, dir, showGenes);
-    }
-  }
-  /** UpSet plot: intersection-size bars over a cohort-membership dot matrix. Bars clickable. */
-  drawUpSet(container, combos, labels, dir, showGenes) {
-    const n = labels.length;
-    const MAX_COLS = 22;
-    const shown = combos.slice(0, MAX_COLS);
-    if (!shown.length) {
-      container.append("div").style("color", "#a00").style("padding", "8px 0").text("No DAPs at these cutoffs.");
-      return;
-    }
-    const maxCount = Math.max(1, ...shown.map((c) => c.genes.length));
-    const leftW = 150, topPad = 14, barMaxH = 110, colW = 26, rowH = 15, dotR = 4.5;
-    const matrixTop = topPad + barMaxH + 14;
-    const W = leftW + shown.length * colW + 12;
-    const H = matrixTop + n * rowH + 8;
-    const svg = container.append("svg").attr("width", W).attr("height", H).attr("font-family", "sans-serif");
-    const barColor = dir[0] === "U" ? UP : DOWN;
-    const totals = labels.map((_, i) => combos.reduce((s, c) => s + (c.cohorts.includes(i) ? c.genes.length : 0), 0));
-    const yBar = linear().domain([0, maxCount]).range([0, barMaxH]);
-    for (let i = 0; i < n; i++) {
-      svg.append("rect").attr("x", leftW - 6).attr("y", matrixTop + i * rowH).attr("width", shown.length * colW + 6).attr("height", rowH).attr("fill", i % 2 ? "#f4f4f4" : "#fff");
-      svg.append("text").attr("x", leftW - 10).attr("y", matrixTop + i * rowH + rowH / 2).attr("text-anchor", "end").attr("dominant-baseline", "central").style("font-size", "11px").text(`${labels[i]} (${totals[i].toLocaleString()})`);
-    }
-    shown.forEach((combo, j) => {
-      const x = leftW + j * colW + colW / 2;
-      const cnt = combo.genes.length;
-      const barH = yBar(cnt);
-      const members = new Set(combo.cohorts);
-      const tip = `${combo.cohorts.map((i) => labels[i]).join(" \u2229 ")}: ${cnt} proteins \u2014 click to list`;
-      svg.append("rect").attr("x", x - colW * 0.34).attr("y", topPad + barMaxH - barH).attr("width", colW * 0.68).attr("height", Math.max(1, barH)).attr("fill", barColor).attr("fill-opacity", 0.85);
-      svg.append("text").attr("x", x).attr("y", topPad + barMaxH - barH - 3).attr("text-anchor", "middle").style("font-size", "9px").style("fill", "#333").text(cnt.toLocaleString());
-      if (combo.cohorts.length > 1)
-        svg.append("line").attr("x1", x).attr("x2", x).attr("y1", matrixTop + Math.min(...combo.cohorts) * rowH + rowH / 2).attr("y2", matrixTop + Math.max(...combo.cohorts) * rowH + rowH / 2).attr("stroke", "#444").attr("stroke-width", 1.5);
-      for (let i = 0; i < n; i++)
-        svg.append("circle").attr("cx", x).attr("cy", matrixTop + i * rowH + rowH / 2).attr("r", dotR).attr("fill", members.has(i) ? "#444" : "#d0d0d0");
-      const hit = svg.append("rect").attr("x", x - colW / 2).attr("y", topPad).attr("width", colW).attr("height", H - topPad).attr("fill", "transparent").style("cursor", "pointer").on("click", () => showGenes(dir, combo));
-      hit.append("title").text(tip);
-    });
-    if (combos.length > shown.length)
-      container.append("div").style("font-size", "0.8em").style("color", "#999").style("margin-top", "2px").text(`Showing the ${shown.length} largest of ${combos.length.toLocaleString()} intersections.`);
-  }
-};
-function drawDendrogram(g, dend, leafSize, depth, orient) {
-  const heights = dend.height.map((h) => h.height);
-  const maxH = Math.max(...heights, 1e-9);
-  const toDepth = linear().domain([0, maxH]).range([depth, 0]);
-  const leafPos = /* @__PURE__ */ new Map();
-  dend.order.forEach((leaf, i) => leafPos.set(leaf.name, i * leafSize + leafSize / 2));
-  const merged = /* @__PURE__ */ new Map();
-  const pos = (n) => n < 0 ? { leaf: leafPos.get(dend.inputOrder[-n - 1]) ?? 0, depth } : merged.get(n) || { leaf: 0, depth };
-  const seg = (l1, d1, l2, d2) => {
-    const [x1, y1, x2, y2] = orient === "left" ? [d1, l1, d2, l2] : [l1, d1, l2, d2];
-    g.append("line").attr("x1", x1).attr("y1", y1).attr("x2", x2).attr("y2", y2).attr("stroke", "#555").attr("stroke-width", 1);
-  };
-  for (let i = 0; i < dend.merge.length; i++) {
-    const { n1, n2 } = dend.merge[i];
-    const a = pos(n1), b = pos(n2);
-    const d = toDepth(heights[i]);
-    seg(a.leaf, a.depth, a.leaf, d);
-    seg(b.leaf, b.depth, b.leaf, d);
-    seg(a.leaf, d, b.leaf, d);
-    merged.set(i + 1, { leaf: (a.leaf + b.leaf) / 2, depth: d });
-  }
-}
-function leafOrder(corr) {
-  const n = corr.length;
-  const nodes = [];
-  for (let i = 0; i < n; i++) nodes.push({ members: [i] });
-  let active = nodes.map((_, i) => i);
-  const d0 = (i, j) => 1 - corr[i][j];
-  const avgDist = (a, b) => {
-    let s = 0;
-    for (const x of nodes[a].members) for (const y of nodes[b].members) s += d0(x, y);
-    return s / (nodes[a].members.length * nodes[b].members.length);
-  };
-  while (active.length > 1) {
-    let bi = 0, bj = 1, bd = Infinity;
-    for (let a = 0; a < active.length; a++)
-      for (let b = a + 1; b < active.length; b++) {
-        const d = avgDist(active[a], active[b]);
-        if (d < bd) {
-          bd = d;
-          bi = a;
-          bj = b;
-        }
-      }
-    const A = active[bi], B = active[bj];
-    nodes.push({ members: [...nodes[A].members, ...nodes[B].members] });
-    active = active.filter((_, k) => k !== bi && k !== bj);
-    active.push(nodes.length - 1);
-  }
-  return nodes[active[0]].members;
-}
-function totalGenes(combos) {
-  return combos.reduce((s, c) => s + c.genes.length, 0);
-}
-var componentInit = getCompInit(ProteomeCohortCompare);
-async function getPlotConfig(opts) {
-  const config = structuredClone(defaultConfig);
-  if (!opts.cohorts || opts.cohorts.length < 2) throw new Error("proteomeCohortCompare requires \u22652 cohorts");
-  return copyMerge(config, opts);
-}
-export {
-  componentInit,
-  getPlotConfig
-};
-//# sourceMappingURL=proteomeCohortCompare-7QIJAKDR.js.map