@sjcrh/proteinpaint-client 2.217.0 → 2.218.0

package/dist/proteomeCohortCompare-DL2QLFL3.js

@@ -0,0 +1,866 @@
+import {
+  makeTileCard,
+  makeTileGrid,
+  renderPlaceholderTiles,
+  renderTileError,
+  tileExpandState
+} from "./chunk-WRYNE3Q4.js";
+import "./chunk-ZX75ZAUG.js";
+import "./chunk-ILEXRHF7.js";
+import {
+  PlotBase
+} from "./chunk-YS7Y257H.js";
+import "./chunk-HJ6L54YS.js";
+import "./chunk-PITPUAWX.js";
+import {
+  Menu
+} from "./chunk-CNFTQSNE.js";
+import "./chunk-K6CZAEBF.js";
+import "./chunk-EEB5VE2A.js";
+import "./chunk-3CIL7KH7.js";
+import "./chunk-T4XPCSLP.js";
+import {
+  dofetch3
+} from "./chunk-XJYVMXMZ.js";
+import "./chunk-W5J3LTYS.js";
+import "./chunk-ZSNZPH6G.js";
+import "./chunk-ET2KFCXK.js";
+import {
+  axisBottom,
+  axisLeft
+} from "./chunk-LMG7Y5IN.js";
+import {
+  copyMerge,
+  getCompInit
+} from "./chunk-HBNB5TRH.js";
+import "./chunk-PF4DSFDR.js";
+import {
+  linear
+} from "./chunk-4OLM3KSB.js";
+import "./chunk-6XKAOSQE.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-DL2QLFL3.js.map