@sjcrh/proteinpaint-client 2.206.1 → 2.207.0

package/dist/chunk-VRINIB6B.js

@@ -0,0 +1,1233 @@
+import {
+  BRAIN_P_THRESHOLD,
+  brainFillByRegion,
+  brainTooltipByRegion,
+  loadBrainAssets,
+  makeBrainFcScale,
+  makeDiseaseTabs,
+  renderBrainSvg
+} from "./chunk-ILEXRHF7.js";
+import {
+  axisstyle,
+  newpane,
+  table2col
+} from "./chunk-NQDF3U2C.js";
+import {
+  Menu
+} from "./chunk-ELJX3QIQ.js";
+import {
+  dofetch3
+} from "./chunk-GRVO7RW4.js";
+import {
+  NumericModes
+} from "./chunk-HZ3TCGBK.js";
+import {
+  axisBottom,
+  axisLeft,
+  line_default
+} from "./chunk-Z2ZITHT4.js";
+import {
+  band,
+  linear,
+  point,
+  sqrt
+} from "./chunk-4OLM3KSB.js";
+import {
+  roundValue
+} from "./chunk-TLT4YIG3.js";
+import {
+  select_default
+} from "./chunk-I6Y4O3RR.js";
+
+// plots/proteinView.tiles.ts
+function getProteinViewConfig(self) {
+  return self?.app?.vocabApi?.termdbConfig?.queries?.proteome?.proteinView || {};
+}
+function getTileConfigs(self) {
+  return getProteinViewConfig(self).tiles || [];
+}
+function getTileConfig(self, key) {
+  return getTileConfigs(self).find((t) => t.key === key);
+}
+function diseaseCfg(self) {
+  return getProteinViewConfig(self).diseases || {};
+}
+var diseaseOrder = (self) => Object.keys(diseaseCfg(self));
+var diseaseLabel = (self, d) => diseaseCfg(self)[d]?.label || d;
+var isSpecificityControl = (self, d) => !!diseaseCfg(self)[d]?.specificityControl;
+var modelOrder = (self) => Object.keys(getProteinViewConfig(self).models || {});
+var modelColor = (self, m) => getProteinViewConfig(self).models?.[m]?.color || SINGLE_MODEL_COLOR;
+var cellTypeCfg = (self) => getProteinViewConfig(self).cellTypes || {};
+var proteomeLabel = (self, organism, assay) => self?.app?.vocabApi?.termdbConfig?.queries?.proteome?.organisms?.[organism]?.assays?.[assay]?.proteomeLabel || assay;
+function orderBy(keys, order) {
+  const rank = (k) => order.indexOf(k) === -1 ? order.length : order.indexOf(k);
+  return [...keys].sort((a, b) => rank(a) - rank(b));
+}
+function cohortMatches(m, organism, assay, catalog) {
+  if (!m) return false;
+  if (m.organism && m.organism !== organism) return false;
+  if (m.assay && m.assay !== assay) return false;
+  const c = catalog || {};
+  for (const k in m.catalog || {}) if (c[k] !== m.catalog[k]) return false;
+  for (const k of m.with || []) if (!c[k]) return false;
+  for (const k of m.without || []) if (c[k]) return false;
+  return true;
+}
+var SIG_P = 0.05;
+function parseAge(ageGroup) {
+  const n = parseInt(ageGroup || "");
+  return Number.isFinite(n) ? n : null;
+}
+var byAge = (a, b) => (parseAge(a) ?? 0) - (parseAge(b) ?? 0);
+var fetchCache = /* @__PURE__ */ new Map();
+function cachedFetch(key, load) {
+  if (!fetchCache.has(key)) {
+    const p = load();
+    p.catch(() => fetchCache.delete(key));
+    fetchCache.set(key, p);
+  }
+  return fetchCache.get(key);
+}
+var vocabKey = (self) => `${self.app.opts.state.vocab.genome}|${self.app.opts.state.vocab.dslabel}`;
+var TILE_FACE_SCALE = 0.67;
+var TILE_FACE_SCALE_X = 0.45;
+var EXPANDED_SCALE = 1.7;
+var CARD_W = 230;
+var CARD_MIN_H = 235;
+var SINGLE_MODEL_COLOR = "#6b7280";
+var ND_COLOR = "#4263eb";
+var PSY_COLOR = "#9ca3af";
+var WHOLE_COLOR = "#2166ac";
+var INSOLUBLE_COLOR = "#b2182b";
+var REFERENCE_COLOR = "#111827";
+var FC_NEG_COLOR = "#762a83";
+var FC_ZERO_COLOR = "#f7f7f7";
+var FC_POS_COLOR = "#2166ac";
+function getLog2Ratio(foldChange) {
+  if (!Number.isFinite(foldChange) || foldChange <= 0) return null;
+  return Math.log2(foldChange);
+}
+function launchViolinPlot(self, organismName, assayName, cohortName, isoform) {
+  const selectedProtein = self.state.config?.tw?.term;
+  if (!selectedProtein) throw new Error("proteinView: selected protein term is missing");
+  const action = {
+    type: "plot_create",
+    config: {
+      chartType: "summary"
+    }
+  };
+  action.config.assayCohortTitle = `${organismName} ${assayName}: ${cohortName}`;
+  action.config.proteomeDetails = { organism: organismName, assay: assayName, cohort: cohortName };
+  const termdbConfig = self.app.vocabApi.termdbConfig;
+  const proteomeOverlayTerm = termdbConfig?.queries?.proteome?.organisms?.[organismName]?.overlayTerm;
+  const t = structuredClone(selectedProtein);
+  t.name = `${t.name}: ${isoform}`;
+  t.dataTypeDetails = { organism: organismName, assay: assayName, cohort: cohortName };
+  action.config.term = { term: t, q: { mode: NumericModes.continuous } };
+  if (proteomeOverlayTerm) {
+    action.config.term2 = { term: structuredClone(proteomeOverlayTerm), q: {} };
+  }
+  self.app.dispatch(action);
+}
+var entries = (td, key) => td.byTile[key] || [];
+function catalogForEntry(self, e) {
+  return self.app.vocabApi.termdbConfig?.queries?.proteome?.organisms?.[e.organism]?.assays?.[e.assayName]?.cohorts?.[e.cohortName]?.catalog;
+}
+function prepareTileData(data, self) {
+  const catalogFor = (e) => catalogForEntry(self, e);
+  const accessions = /* @__PURE__ */ new Set();
+  let ptmSiteCount = 0;
+  const byCohort = /* @__PURE__ */ new Map();
+  for (const e of data?.cohorts || []) {
+    if (e.PTMType) {
+      ptmSiteCount++;
+      continue;
+    }
+    accessions.add(e.proteinAccession);
+    const log2fc = getLog2Ratio(e.foldChange);
+    if (log2fc === null) continue;
+    const key = `${e.organism}|${e.assayName}|${e.cohortName}`;
+    const p = Number(e.fdr);
+    const pRank = Number.isFinite(p) && p > 0 ? p : Infinity;
+    const cur = byCohort.get(key);
+    if (!cur) byCohort.set(key, { best: { e, pRank }, count: 1 });
+    else {
+      cur.count++;
+      if (pRank < cur.best.pRank) cur.best = { e, pRank };
+    }
+  }
+  const tiles = getTileConfigs(self);
+  const td = {
+    byTile: Object.fromEntries(tiles.map((t) => [t.key, []])),
+    isoformCount: accessions.size,
+    ptmSiteCount,
+    cohortCount: byCohort.size
+  };
+  for (const { best, count } of byCohort.values()) {
+    const e = best.e;
+    const catalog = catalogFor(e);
+    if (!catalog) continue;
+    const p = Number(e.fdr);
+    const entry = {
+      organism: e.organism,
+      assayName: e.assayName,
+      cohortName: e.cohortName,
+      disease: catalog.disease || e.disease,
+      uniqueIdentifier: e.uniqueIdentifier,
+      proteinAccession: e.proteinAccession,
+      log2fc: getLog2Ratio(e.foldChange),
+      fdr: Number.isFinite(p) && p > 0 ? p : null,
+      testedN: Number(e.testedN) || 0,
+      controlN: Number(e.controlN) || 0,
+      isoformCount: count,
+      catalog
+    };
+    const tile = tiles.find((t) => cohortMatches(t.cohortMatch, e.organism, e.assayName, catalog));
+    if (tile) td.byTile[tile.key].push(entry);
+  }
+  return td;
+}
+function makeTileGrid(holder) {
+  return holder.append("div").style("display", "flex").style("flex-wrap", "wrap").style("gap", "14px").style("margin-top", "10px").style("white-space", "normal");
+}
+function makeTileCard(grid, opts) {
+  const card = grid.append("div").style("border", opts.disabled ? "1px dashed #e5e7eb" : "1px solid #e5e7eb").style("border-radius", "8px").style("padding", "10px 12px").style("background", opts.disabled ? "#f9fafb" : "#fff");
+  if (opts.fullWidth) card.style("flex", "1 1 100%");
+  if (opts.uniform) {
+    card.style("width", `${CARD_W}px`).style("min-height", `${CARD_MIN_H}px`).style("display", "flex").style("flex-direction", "column");
+  }
+  const header = card.append("div").style("display", "flex").style("align-items", "baseline").style("gap", "8px").style("flex-wrap", "wrap");
+  header.append("span").style("font-weight", "600").style("font-size", ".9em").style("min-width", "0").style("color", opts.disabled ? "#9ca3af" : "#111827").text(opts.title);
+  if (opts.onExpand) {
+    header.append("span").attr("title", "Expand").attr("role", "button").attr("tabindex", "0").attr("aria-label", `Expand ${opts.title}`).style("margin-left", "auto").style("cursor", "pointer").style("color", "#9ca3af").style("font-size", "1em").style("line-height", "1").text("\u2922").on("mouseover", function() {
+      select_default(this).style("color", "#374151");
+    }).on("mouseout", function() {
+      select_default(this).style("color", "#9ca3af");
+    }).on("click", opts.onExpand).on("keydown", (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        opts.onExpand?.();
+      }
+    });
+  }
+  if (opts.subtitle) {
+    card.append("div").style("font-size", ".75em").style("color", "#6b7280").style("margin", "2px 0 4px 0").text(opts.subtitle);
+  }
+  return card.append("div");
+}
+var tileClickMenu = new Menu({ padding: "0px" });
+var TILE_PANE_ZINDEX = 100;
+function raiseSharedMenus(self) {
+  for (const m of [self?.dom?.tip, tileClickMenu]) {
+    const n = m?.d?.node?.();
+    if (!n) continue;
+    if (!n.style.zIndex) n.style.zIndex = String(TILE_PANE_ZINDEX + 1);
+    if (n.parentNode === document.body && n !== document.body.lastChild) document.body.appendChild(n);
+  }
+}
+function entryTipTable(entry, holder) {
+  const tbl = table2col({ holder: holder.append("table") });
+  tbl.addRow("Sample set", entry.cohortName);
+  const c = entry.catalog || {};
+  if (entry.disease) tbl.addRow("Disease", entry.disease);
+  if (c.model) tbl.addRow("Model", c.model);
+  if (c.cellType) tbl.addRow("Cell type", c.cellType);
+  if (c.ageGroup) tbl.addRow("Age group", c.ageGroup);
+  if (c.brainRegion) tbl.addRow("Brain region", c.brainRegion);
+  if (entry.ptmType) tbl.addRow("PTM type", entry.ptmType);
+  if (entry.modSites) tbl.addRow("Modified site", entry.modSites);
+  tbl.addRow("Assay", entry.assayName);
+  tbl.addRow("log2 fold change", entry.log2fc === null ? "NA" : roundValue(entry.log2fc, 3));
+  tbl.addRow("FDR", entry.fdr === null ? "NA" : entry.fdr.toExponential(2));
+  tbl.addRow("Case samples", entry.testedN);
+  tbl.addRow("Control samples", entry.controlN);
+  tbl.addRow("Protein accession", entry.proteinAccession);
+  if (entry.isoformCount > 1) tbl.addRow("Note", `most significant of ${entry.isoformCount} isoforms`);
+}
+function attachEntryBehavior(shape, entry, self) {
+  shape.style("cursor", "pointer").on("mouseover", (event) => {
+    raiseSharedMenus(self);
+    self.dom.tip.clear();
+    entryTipTable(entry, self.dom.tip.d);
+    self.dom.tip.show(event.clientX, event.clientY);
+  }).on("mouseout", () => self.dom.tip.hide()).on("click", (event) => {
+    raiseSharedMenus(self);
+    self.dom.tip.hide();
+    tileClickMenu.clear();
+    const div = tileClickMenu.d.append("div");
+    entryTipTable(entry, div.append("div").style("padding", "5px"));
+    div.append("div").attr("class", "sja_menuoption sja_sharp_border").text("Violin plot").on("click", () => {
+      tileClickMenu.hide();
+      launchViolinPlot(self, entry.organism, entry.assayName, entry.cohortName, entry.uniqueIdentifier);
+    });
+    tileClickMenu.show(event.clientX, event.clientY);
+  });
+}
+var isSig = (e) => e.fdr !== null && e.fdr < SIG_P;
+function drawMarker(g, x, y, color, sig, r = 4.5) {
+  return g.append("circle").attr("cx", x).attr("cy", y).attr("r", r).attr("fill", sig ? color : "#fff").attr("fill-opacity", sig ? 0.9 : 1).attr("stroke", color).attr("stroke-width", 1.5);
+}
+function fcDomain(values) {
+  let min = Math.min(0, ...values);
+  let max = Math.max(0, ...values);
+  const span = Math.max(0.4, max - min);
+  const pad = span * 0.15;
+  if (min < 0) min -= pad;
+  max += pad;
+  if (min === 0) min = -span * 0.05;
+  return [min, max];
+}
+function addSigFootnote(body) {
+  body.append("div").style("font-size", ".7em").style("color", "#9ca3af").style("margin-top", "2px").text(`filled: FDR < ${SIG_P}; hollow: not significant`);
+}
+function drawZeroLine(g, x1, y1, x2, y2) {
+  g.append("line").attr("x1", x1).attr("y1", y1).attr("x2", x2).attr("y2", y2).attr("stroke", "black").attr("stroke-dasharray", "4 3").attr("stroke-opacity", 0.35);
+}
+function styledAxis(g, axis, tickFontSize) {
+  const a = g.call(axis);
+  axisstyle({ axis: a, color: "black", showline: true });
+  if (tickFontSize) a.selectAll("text").style("font-size", tickFontSize);
+  return a;
+}
+function rotateXTicks(axisG) {
+  axisG.selectAll("text").attr("transform", "rotate(-38)").attr("text-anchor", "end").attr("dx", "-2px").attr("dy", "5px");
+}
+function yAxisTitle(svg, innerH, marginTop, text) {
+  svg.append("text").attr("transform", `translate(11,${marginTop + innerH / 2}) rotate(-90)`).attr("text-anchor", "middle").style("font-size", "11px").style("fill", "#374151").text(text);
+}
+function renderCrossDiseaseTile(body, td, self, cfg, opts = {}) {
+  const k = opts.scale || 1;
+  const kx = opts.scaleX ?? k;
+  const mr = 4.5 * Math.sqrt(k);
+  const tickFont = k < 1 ? "8.5px" : null;
+  const byDisease = /* @__PURE__ */ new Map();
+  const multiCohort = /* @__PURE__ */ new Set();
+  for (const e of entries(td, cfg.key)) {
+    const d = e.disease || e.cohortName;
+    const cur = byDisease.get(d);
+    if (cur) multiCohort.add(d);
+    if (!cur || (e.fdr ?? Infinity) < (cur.fdr ?? Infinity)) byDisease.set(d, e);
+  }
+  const diseases = orderBy([...byDisease.keys()], diseaseOrder(self));
+  const isControl = (d) => isSpecificityControl(self, d);
+  const margin = { top: 12, right: 10, bottom: 34, left: 46 };
+  const innerW = Math.max(200, diseases.length * 38) * kx;
+  const innerH = 150 * k;
+  const svg = body.append("svg").attr("width", innerW + margin.left + margin.right).attr("height", innerH + margin.top + margin.bottom);
+  const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
+  const x = band().domain(diseases).range([0, innerW]).padding(0.4);
+  const y = linear().domain(fcDomain(diseases.map((d) => byDisease.get(d).log2fc))).range([innerH, 0]);
+  const xAxisG = styledAxis(g.append("g").attr("transform", `translate(0,${innerH})`), axisBottom(x), tickFont);
+  if (kx < 0.6) rotateXTicks(xAxisG);
+  styledAxis(g.append("g"), axisLeft(y).ticks(4), tickFont);
+  drawZeroLine(g, 0, y(0), innerW, y(0));
+  yAxisTitle(svg, innerH, margin.top, "log2FC vs control");
+  const firstPsy = diseases.findIndex(isControl);
+  if (firstPsy > 0) {
+    const xSep = (x(diseases[firstPsy - 1]) + x.bandwidth() + x(diseases[firstPsy])) / 2;
+    g.append("line").attr("x1", xSep).attr("x2", xSep).attr("y1", 0).attr("y2", innerH).attr("stroke", "#d1d5db").attr("stroke-dasharray", "2 3");
+    if (kx >= 0.6) {
+      g.append("text").attr("x", (xSep + innerW) / 2).attr("y", 9).attr("text-anchor", "middle").style("font-size", "9px").style("fill", "#9ca3af").text(getProteinViewConfig(self).specificityControlLabel || "controls");
+    }
+  }
+  for (const d of diseases) {
+    const e = byDisease.get(d);
+    const cx = x(d) + x.bandwidth() / 2;
+    const color = isControl(d) ? PSY_COLOR : ND_COLOR;
+    g.append("line").attr("x1", cx).attr("x2", cx).attr("y1", y(0)).attr("y2", y(e.log2fc)).attr("stroke", color).attr("stroke-width", 1.5);
+    attachEntryBehavior(drawMarker(g, cx, y(e.log2fc), color, isSig(e), mr), e, self);
+  }
+  g.selectAll("text").each(function() {
+    const t = this.textContent || "";
+    const l = diseaseLabel(self, t);
+    if (l !== t) this.textContent = l;
+  });
+  addSigFootnote(body);
+  if (multiCohort.size) {
+    body.append("div").style("font-size", ".7em").style("color", "#9ca3af").text(`${[...multiCohort].map((d) => diseaseLabel(self, d)).join(", ")}: several cohorts, most significant shown`);
+  }
+  if (opts.expanded) {
+    body.append("div").style("font-size", ".75em").style("color", "#6b7280").style("margin-top", "4px").style("max-width", `${innerW + margin.left + margin.right}px`).text(diseases.map((d) => `${diseaseLabel(self, d)} = ${diseaseCfg(self)[d]?.name || d}`).join(" \xB7 "));
+  }
+}
+function renderInsolubleTile(body, td, self, cfg, opts = {}) {
+  const k = opts.scale || 1;
+  const kx = opts.scaleX ?? k;
+  const mr = 4.5 * Math.sqrt(k);
+  const tickFont = k < 1 ? "8.5px" : null;
+  const wholeByCohort = /* @__PURE__ */ new Map();
+  if (cfg.referenceTile) for (const e of entries(td, cfg.referenceTile)) wholeByCohort.set(e.cohortName, e);
+  const insol = entries(td, cfg.key);
+  const rows = orderBy([...new Set(insol.map((e) => e.cohortName))], diseaseOrder(self));
+  const pairs = rows.map((c) => ({
+    cohortName: c,
+    whole: wholeByCohort.get(c) || null,
+    insoluble: insol.find((e) => e.cohortName === c) || null
+  }));
+  const wholeEntry = pairs.find((p) => p.whole)?.whole;
+  const labelOf = (e, fallback) => e ? proteomeLabel(self, e.organism, e.assayName) : fallback;
+  const margin = { top: 24, right: 12, bottom: 34, left: 46 };
+  const innerW = 240 * kx;
+  const innerH = Math.max(90, rows.length * 30 * k);
+  const svg = body.append("svg").attr("width", innerW + margin.left + margin.right).attr("height", innerH + margin.top + margin.bottom);
+  const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
+  const values = [];
+  for (const p of pairs) {
+    if (p.whole) values.push(p.whole.log2fc);
+    if (p.insoluble) values.push(p.insoluble.log2fc);
+  }
+  const x = linear().domain(fcDomain(values)).range([0, innerW]);
+  const y = band().domain(rows).range([0, innerH]).padding(0.4);
+  styledAxis(g.append("g").attr("transform", `translate(0,${innerH})`), axisBottom(x).ticks(4), tickFont);
+  styledAxis(g.append("g"), axisLeft(y), tickFont);
+  drawZeroLine(g, x(0), 0, x(0), innerH);
+  svg.append("text").attr("x", margin.left + innerW / 2).attr("y", margin.top + innerH + 30).attr("text-anchor", "middle").style("font-size", "11px").style("fill", "#374151").text("log2FC vs control");
+  const legend = g.append("g").attr("transform", `translate(0,-12)`);
+  for (const [i, item] of [
+    {
+      label: labelOf(wholeEntry, getTileConfig(self, cfg.referenceTile || "")?.title || "reference"),
+      color: WHOLE_COLOR
+    },
+    { label: labelOf(insol[0], cfg.cohortMatch?.assay || cfg.title), color: INSOLUBLE_COLOR }
+  ].entries()) {
+    const lx = i * (kx < 0.6 ? 58 : 80);
+    legend.append("circle").attr("cx", lx).attr("cy", 0).attr("r", 4).attr("fill", item.color).attr("fill-opacity", 0.9);
+    legend.append("text").attr("x", lx + 8).attr("y", 3).style("font-size", "10px").style("fill", "#374151").text(item.label);
+  }
+  for (const p of pairs) {
+    const cy = y(p.cohortName) + y.bandwidth() / 2;
+    if (p.whole && p.insoluble) {
+      g.append("line").attr("x1", x(p.whole.log2fc)).attr("x2", x(p.insoluble.log2fc)).attr("y1", cy).attr("y2", cy).attr("stroke", "#9ca3af").attr("stroke-width", 1.5);
+    }
+    if (p.whole)
+      attachEntryBehavior(
+        drawMarker(g, x(p.whole.log2fc), cy, WHOLE_COLOR, isSig(p.whole), mr),
+        p.whole,
+        self
+      );
+    if (p.insoluble)
+      attachEntryBehavior(
+        drawMarker(g, x(p.insoluble.log2fc), cy, INSOLUBLE_COLOR, isSig(p.insoluble), mr),
+        p.insoluble,
+        self
+      );
+  }
+  addSigFootnote(body);
+}
+var brainGradientSeq = 0;
+function getBrainRegionsData(self) {
+  const gene = self.state?.config?.tw?.term?.name;
+  const [genome, dslabel] = vocabKey(self).split("|");
+  return cachedFetch(`brainRegions|${vocabKey(self)}|${gene}`, async () => {
+    const data = await dofetch3("termdb/brainRegions", { body: { genome, dslabel, gene } });
+    if (data.error) throw data.error;
+    const assets = Object.keys(data.isoforms || {}).length ? await cachedFetch(`brainAssets|${data.svgUrl}`, () => loadBrainAssets(data.svgUrl, Object.keys(data.regions))) : null;
+    return { data, assets };
+  });
+}
+var brainFcScale = (isoformData, disease) => makeBrainFcScale(isoformData.data[disease] || {});
+function drawBrainForDisease(holder, data, assets, isoform, disease, self, brainW, colorScale) {
+  const regionData = data.isoforms[isoform]?.data?.[disease] || {};
+  renderBrainSvg({
+    holder: holder.append("div"),
+    width: brainW,
+    templateUrl: data.templateUrl,
+    assets,
+    regions: data.regions,
+    tip: self.dom.tip,
+    fillByRegion: brainFillByRegion(regionData, colorScale),
+    tooltipByRegion: brainTooltipByRegion(regionData)
+  });
+}
+function drawBrainLegend(holder, colorScale, maxAbsFC, nSig, disease) {
+  const legend = holder.append("div").style("margin-top", "6px");
+  if (!nSig) {
+    legend.append("div").style("font-size", ".75em").style("color", "#6b7280").text(`No region reaches p < ${BRAIN_P_THRESHOLD} for this isoform in ${disease} (all regions grey).`);
+    return;
+  }
+  const w = 160;
+  const h = 10;
+  const svg = legend.append("svg").attr("width", w).attr("height", h + 16);
+  const gradientId = `pv-brain-fc-gradient-${brainGradientSeq++}`;
+  const gradient = svg.append("defs").append("linearGradient").attr("id", gradientId).attr("x1", "0").attr("y1", "0").attr("x2", "1").attr("y2", "0");
+  const steps = 10;
+  for (let i = 0; i <= steps; i++) {
+    const t = i / steps;
+    gradient.append("stop").attr("offset", `${t * 100}%`).attr("stop-color", colorScale(-maxAbsFC + t * 2 * maxAbsFC));
+  }
+  svg.append("rect").attr("width", w).attr("height", h).attr("fill", `url(#${gradientId})`).attr("stroke", "#d1d5db");
+  const labels = [
+    [0, `-${maxAbsFC.toFixed(2)}`, "start"],
+    [w / 2, "0", "middle"],
+    [w, maxAbsFC.toFixed(2), "end"]
+  ];
+  for (const [x, text, anchor] of labels) {
+    svg.append("text").attr("x", x).attr("y", h + 12).attr("text-anchor", anchor).style("font-size", "9px").style("fill", "#374151").text(text);
+  }
+  legend.append("div").style("font-size", ".7em").style("color", "#9ca3af").text(`log\u2082 fold change vs control \xB7 grey: not significant (p \u2265 ${BRAIN_P_THRESHOLD})`);
+}
+function renderBrainRegionTile(body, _td, self, _cfg, opts = {}) {
+  const expanded = !!opts.expanded;
+  const wait = body.append("div").style("font-size", ".75em").style("color", "#9ca3af").text("Loading\u2026");
+  getBrainRegionsData(self).then(({ data, assets }) => {
+    wait.remove();
+    const isoformIds = Object.keys(data.isoforms || {});
+    if (!isoformIds.length || !assets) {
+      body.append("div").style("font-size", ".75em").style("color", "#9ca3af").text("No brain-region data for this protein.");
+      return;
+    }
+    if (!expanded) {
+      const iso = isoformIds[0];
+      const tabsHolder2 = body.append("div");
+      const brainHolder2 = body.append("div");
+      const caption = body.append("div").style("font-size", ".7em").style("color", "#9ca3af").style("margin-top", "2px");
+      const redraw2 = (disease) => {
+        brainHolder2.selectAll("*").remove();
+        const { colorScale, nSig } = brainFcScale(data.isoforms[iso], disease);
+        drawBrainForDisease(brainHolder2, data, assets, iso, disease, self, 185, colorScale);
+        caption.text(
+          nSig ? `red: up \xB7 blue: down \xB7 grey: p \u2265 ${BRAIN_P_THRESHOLD}` : `no region reaches p < ${BRAIN_P_THRESHOLD} in ${disease}`
+        );
+      };
+      if (data.diseases.length > 1) makeDiseaseTabs(tabsHolder2, data.diseases, data.diseases[0], redraw2, ".75em");
+      redraw2(data.diseases[0]);
+      return;
+    }
+    const description = self.app.vocabApi.termdbConfig?.queries?.proteome?.brainRegions?.description;
+    if (description) {
+      body.append("div").style("font-size", ".8em").style("color", "#555").style("max-width", "640px").style("line-height", "1.4").style("margin-bottom", "8px").text(description);
+    }
+    let selectedIso = isoformIds[0];
+    let selectedDisease = data.diseases[0];
+    const controlRow = body.append("div").style("margin-bottom", "8px").style("font-size", ".85em");
+    controlRow.append("span").style("font-weight", "600").text("Isoform: ");
+    const tabsHolder = body.append("div");
+    const brainHolder = body.append("div");
+    const redraw = () => {
+      brainHolder.selectAll("*").remove();
+      const isoformData = data.isoforms[selectedIso];
+      if (!isoformData) return;
+      const { colorScale, maxAbsFC, nSig } = brainFcScale(isoformData, selectedDisease);
+      drawBrainForDisease(brainHolder, data, assets, selectedIso, selectedDisease, self, 460, colorScale);
+      drawBrainLegend(brainHolder, colorScale, maxAbsFC, nSig, selectedDisease);
+    };
+    if (data.diseases.length > 1) {
+      makeDiseaseTabs(
+        tabsHolder,
+        data.diseases,
+        selectedDisease,
+        (d) => {
+          selectedDisease = d;
+          redraw();
+        },
+        ".9em"
+      );
+    }
+    if (isoformIds.length > 1) {
+      const sel = controlRow.append("select").style("margin-left", "5px").on("change", () => {
+        selectedIso = sel.node().value;
+        redraw();
+      });
+      sel.selectAll("option").data(isoformIds).enter().append("option").attr("value", (d) => d).text((d) => `${data.isoforms[d].gene_name} \u2014 ${d}`);
+    } else {
+      controlRow.append("span").style("margin-left", "5px").text(`${data.isoforms[selectedIso].gene_name} \u2014 ${selectedIso}`);
+    }
+    redraw();
+  }).catch((err) => {
+    wait.style("color", "#b91c1c").text(`Failed to load: ${err?.message || err}`);
+    if (self.app?.opts?.debug) console.error(err);
+  });
+}
+function renderMouseModelsTile(body, td, self, cfg, opts = {}) {
+  const k = opts.scale || 1;
+  const kx = opts.scaleX ?? k;
+  const mr = 4 * Math.sqrt(k);
+  const tickFont = k < 1 ? "8.5px" : null;
+  const aged = /* @__PURE__ */ new Map();
+  const singles = [];
+  for (const e of entries(td, cfg.key)) {
+    const age = e.catalog.ageGroup ? parseAge(e.catalog.ageGroup) : null;
+    if (age === null) {
+      singles.push(e);
+      continue;
+    }
+    if (!aged.has(e.catalog.model)) aged.set(e.catalog.model, []);
+    aged.get(e.catalog.model).push({ age, e });
+  }
+  for (const pts of aged.values()) pts.sort((a, b) => a.age - b.age);
+  const ages = [...new Set([...aged.values()].flatMap((pts) => pts.map((p) => p.age)))].sort((a, b) => a - b);
+  const hasAged = ages.length > 0;
+  const margin = { top: 20, right: 12, bottom: 36, left: 46 };
+  const mainW = hasAged ? 210 * kx : 0;
+  const stripGap = singles.length && hasAged ? 18 * kx : 0;
+  const stripW = singles.length * 34 * kx;
+  const innerH = 150 * k;
+  const svg = body.append("svg").attr("width", margin.left + mainW + stripGap + stripW + margin.right).attr("height", innerH + margin.top + margin.bottom);
+  const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
+  const values = [];
+  for (const pts of aged.values()) for (const p of pts) values.push(p.e.log2fc);
+  for (const e of singles) values.push(e.log2fc);
+  const x = linear().domain(ages.length > 1 ? [ages[0], ages[ages.length - 1]] : [(ages[0] ?? 0) - 1, (ages[0] ?? 0) + 1]).range([0, mainW]);
+  const y = linear().domain(fcDomain(values)).range([innerH, 0]);
+  if (hasAged) {
+    styledAxis(g.append("g").attr("transform", `translate(0,${innerH})`), axisBottom(x).tickValues(ages), tickFont);
+    svg.append("text").attr("x", margin.left + mainW / 2).attr("y", margin.top + innerH + 32).attr("text-anchor", "middle").style("font-size", "11px").style("fill", "#374151").text(cfg.xLabel || "age");
+  }
+  styledAxis(g.append("g"), axisLeft(y).ticks(4), tickFont);
+  drawZeroLine(g, 0, y(0), mainW + stripGap + stripW, y(0));
+  yAxisTitle(svg, innerH, margin.top, cfg.yLabel || "log2FC vs control");
+  let legendX = 0;
+  for (const model of orderBy([...aged.keys()], modelOrder(self))) {
+    const pts = aged.get(model);
+    const color = modelColor(self, model);
+    const path = line_default().x((p) => x(p.age)).y((p) => y(p.e.log2fc));
+    g.append("path").attr("d", path(pts)).attr("fill", "none").attr("stroke", color).attr("stroke-width", 1.5).attr("stroke-opacity", 0.75);
+    for (const p of pts)
+      attachEntryBehavior(drawMarker(g, x(p.age), y(p.e.log2fc), color, isSig(p.e), mr), p.e, self);
+    g.append("text").attr("x", legendX).attr("y", -8).style("font-size", "10px").style("font-weight", "600").style("fill", color).text(model);
+    legendX += 52;
+  }
+  if (singles.length) {
+    const stripX0 = mainW + stripGap;
+    g.append("line").attr("x1", stripX0 - stripGap / 2).attr("x2", stripX0 - stripGap / 2).attr("y1", 0).attr("y2", innerH).attr("stroke", "#d1d5db").attr("stroke-dasharray", "2 3");
+    for (const [i, e] of singles.entries()) {
+      const cx = stripX0 + i * 34 * kx + 17 * kx;
+      attachEntryBehavior(drawMarker(g, cx, y(e.log2fc), SINGLE_MODEL_COLOR, isSig(e), mr), e, self);
+      const lbl = g.append("text").attr("x", cx).attr("y", innerH + 14).attr("text-anchor", "middle").style("font-size", "9px").style("fill", "#6b7280").text(e.catalog.model);
+      if (kx < 0.6) lbl.attr("transform", `rotate(-38 ${cx} ${innerH + 14})`).attr("text-anchor", "end");
+    }
+  }
+  addSigFootnote(body);
+}
+function renderCellTypesTile(body, td, self, cfg, opts = {}) {
+  const k = opts.scale || 1;
+  const kx = opts.scaleX ?? k;
+  const all = entries(td, cfg.key);
+  const models = orderBy([...new Set(all.map((e) => e.catalog.model))], modelOrder(self));
+  const cellTypes = orderBy([...new Set(all.map((e) => e.catalog.cellType))], Object.keys(cellTypeCfg(self)));
+  const agesByModel = /* @__PURE__ */ new Map();
+  for (const m of models) {
+    const ages = [...new Set(all.filter((e) => e.catalog.model === m).map((e) => e.catalog.ageGroup))].sort(byAge);
+    agesByModel.set(m, ages);
+  }
+  const CELL_W = 34 * kx;
+  const CELL_H = 28 * k;
+  const ROW_LABEL_W = 82;
+  const MODEL_GAP = 12 * kx;
+  const HEADER_H = 34;
+  const colX = /* @__PURE__ */ new Map();
+  let xCursor = 0;
+  const modelSpans = [];
+  for (const m of models) {
+    const x0 = xCursor;
+    for (const a of agesByModel.get(m)) {
+      colX.set(`${m}|${a}`, xCursor + CELL_W / 2);
+      xCursor += CELL_W;
+    }
+    modelSpans.push({ model: m, x0, x1: xCursor });
+    xCursor += MODEL_GAP;
+  }
+  const gridW = xCursor - MODEL_GAP;
+  const gridH = cellTypes.length * CELL_H;
+  const svg = body.append("svg").attr("width", ROW_LABEL_W + gridW + 10).attr("height", HEADER_H + gridH + 8);
+  const g = svg.append("g").attr("transform", `translate(${ROW_LABEL_W},${HEADER_H})`);
+  for (const span of modelSpans) {
+    svg.append("text").attr("x", ROW_LABEL_W + (span.x0 + span.x1) / 2).attr("y", 12).attr("text-anchor", "middle").style("font-size", "10px").style("font-weight", "600").style("fill", modelColor(self, span.model)).text(span.model);
+  }
+  for (const [key, cx] of colX) {
+    svg.append("text").attr("x", ROW_LABEL_W + cx).attr("y", 27).attr("text-anchor", "middle").style("font-size", "9px").style("fill", "#6b7280").text(key.split("|")[1]);
+  }
+  for (const [i, ct] of cellTypes.entries()) {
+    svg.append("text").attr("x", ROW_LABEL_W - 6).attr("y", HEADER_H + i * CELL_H + CELL_H / 2 + 3).attr("text-anchor", "end").style("font-size", "10px").style("fill", "#374151").text(ct);
+  }
+  const maxAbsFc = Math.max(1, ...all.map((e) => Math.abs(e.log2fc)));
+  const colorScale = linear().domain([-maxAbsFc, 0, maxAbsFc]).range([FC_NEG_COLOR, FC_ZERO_COLOR, FC_POS_COLOR]);
+  const NEG_LOG_P_CAP = 10;
+  const rScale = sqrt().domain([0, NEG_LOG_P_CAP]).range([3 * k, Math.min(11 * k, CELL_W / 2 - 0.5)]);
+  for (const e of all) {
+    const cx = colX.get(`${e.catalog.model}|${e.catalog.ageGroup}`);
+    const row = cellTypes.indexOf(e.catalog.cellType);
+    if (cx === void 0 || row < 0) continue;
+    const negLogP = e.fdr === null ? 0 : Math.min(NEG_LOG_P_CAP, -Math.log10(Math.max(e.fdr, 1e-300)));
+    const circle = g.append("circle").attr("cx", cx).attr("cy", row * CELL_H + CELL_H / 2).attr("r", rScale(negLogP)).attr("fill", colorScale(e.log2fc)).attr("stroke", isSig(e) ? "#374151" : "#d1d5db").attr("stroke-width", 1);
+    attachEntryBehavior(circle, e, self);
+  }
+  const foot = body.append("div").style("font-size", ".7em").style("color", "#9ca3af").style("margin-top", "2px");
+  foot.style("max-width", "100%");
+  foot.append("span").text(`color: log2FC (purple down, blue up) \xB7 size: \u2212log10(FDR) \xB7 outline: FDR < ${SIG_P}`);
+  for (const ct of cellTypes) {
+    const note = cellTypeCfg(self)[ct]?.note;
+    if (note) foot.append("div").text(note);
+  }
+}
+function renderPlaqueTile(body, td, self, cfg, opts = {}) {
+  const k = opts.scale || 1;
+  const kx = opts.scaleX ?? k;
+  const mr = 4 * Math.sqrt(k);
+  const tickFont = k < 1 ? "8.5px" : null;
+  const all = entries(td, cfg.key);
+  const series = all.filter((e) => e.catalog.ageGroup && e.catalog.model);
+  const reference = all.filter((e) => !(e.catalog.ageGroup && e.catalog.model));
+  const refLabel = (e) => e.organism.charAt(0).toUpperCase() + e.organism.slice(1);
+  const ages = [...new Set(series.map((e) => e.catalog.ageGroup))].sort(byAge);
+  const refCategories = [...new Set(reference.map(refLabel))];
+  const categories = [...ages, ...refCategories];
+  const margin = { top: 20, right: 14, bottom: 36, left: 46 };
+  const innerW = Math.max(180, categories.length * 52) * kx;
+  const innerH = 140 * k;
+  const svg = body.append("svg").attr("width", innerW + margin.left + margin.right).attr("height", innerH + margin.top + margin.bottom);
+  const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
+  const x = point().domain(categories).range([0, innerW]).padding(0.5);
+  const y = linear().domain(fcDomain(all.map((e) => e.log2fc))).range([innerH, 0]);
+  const xAxisG = styledAxis(g.append("g").attr("transform", `translate(0,${innerH})`), axisBottom(x), tickFont);
+  if (kx < 0.6) rotateXTicks(xAxisG);
+  styledAxis(g.append("g"), axisLeft(y).ticks(4), tickFont);
+  drawZeroLine(g, 0, y(0), innerW, y(0));
+  yAxisTitle(svg, innerH, margin.top, cfg.yLabel || "log2FC vs control");
+  if (kx >= 0.6) {
+    svg.append("text").attr("x", margin.left + innerW / 2).attr("y", margin.top + innerH + 32).attr("text-anchor", "middle").style("font-size", "11px").style("fill", "#374151").text(cfg.xLabel || "age");
+  }
+  if (refCategories.length && ages.length) {
+    const xSep = (x(ages[ages.length - 1]) + x(refCategories[0])) / 2;
+    g.append("line").attr("x1", xSep).attr("x2", xSep).attr("y1", 0).attr("y2", innerH).attr("stroke", "#d1d5db").attr("stroke-dasharray", "2 3");
+  }
+  const models = orderBy([...new Set(series.map((e) => e.catalog.model))], modelOrder(self));
+  let legendX = 0;
+  for (const model of models) {
+    const color = modelColor(self, model);
+    const pts = series.filter((e) => e.catalog.model === model).sort((a, b) => byAge(a.catalog.ageGroup, b.catalog.ageGroup));
+    const path = line_default().x((e) => x(e.catalog.ageGroup)).y((e) => y(e.log2fc));
+    g.append("path").attr("d", path(pts)).attr("fill", "none").attr("stroke", color).attr("stroke-width", 1.5).attr("stroke-opacity", 0.75).attr("stroke-dasharray", pts.length < ages.length ? "5 3" : null);
+    for (const e of pts)
+      attachEntryBehavior(drawMarker(g, x(e.catalog.ageGroup), y(e.log2fc), color, isSig(e), mr), e, self);
+    g.append("text").attr("x", legendX).attr("y", -8).style("font-size", "10px").style("font-weight", "600").style("fill", color).text(model);
+    legendX += 52;
+  }
+  for (const e of reference) {
+    const cx = x(refLabel(e));
+    const cy = y(e.log2fc);
+    const r = 5.5 * Math.sqrt(k);
+    const diamond = g.append("path").attr("d", `M ${cx} ${cy - r} L ${cx + r} ${cy} L ${cx} ${cy + r} L ${cx - r} ${cy} Z`).attr("fill", isSig(e) ? REFERENCE_COLOR : "#fff").attr("stroke", REFERENCE_COLOR).attr("stroke-width", 1.5);
+    attachEntryBehavior(diamond, e, self);
+  }
+  addSigFootnote(body);
+}
+function getGeneRanks(self) {
+  const gene = self.state?.config?.tw?.term?.name;
+  const [genome, dslabel] = vocabKey(self).split("|");
+  return cachedFetch(`geneRanks|${vocabKey(self)}|${gene}`, async () => {
+    const data = await dofetch3("termdb/geneRanking", { body: { genome, dslabel, gene } });
+    if (data.error) throw data.error;
+    return data.geneRanks || {};
+  });
+}
+var rankColor = linear().domain([0, 0.1, 1]).range(["#1d4ed8", "#93c5fd", "#f3f4f6"]).clamp(true);
+function renderMultiomicRankTile(body, _td, self, _cfg, opts = {}) {
+  const expanded = !!opts.expanded;
+  const rankCfg = self.app.vocabApi.termdbConfig?.queries?.geneRanking || {};
+  const modalities = rankCfg.modalities || [];
+  const integrativeColumn = rankCfg.integrativeColumn;
+  const statColumns = rankCfg.statColumns || [];
+  const rankingLabel = (key) => rankCfg.labels?.[key] || key;
+  const wait = body.append("div").style("font-size", ".75em").style("color", "#9ca3af").text("Loading\u2026");
+  getGeneRanks(self).then((geneRanks) => {
+    wait.remove();
+    const keys = Object.keys(geneRanks);
+    const ranked = keys.filter((k) => geneRanks[k].row);
+    if (!ranked.length) {
+      body.append("div").style("font-size", ".75em").style("color", "#9ca3af").text("Not present in the multiomic rankings.");
+      return;
+    }
+    const fmt = (n) => n.toLocaleString();
+    if (expanded) {
+      const description = self.app.vocabApi.termdbConfig?.queries?.geneRanking?.description;
+      if (description) {
+        body.append("div").style("font-size", ".8em").style("color", "#555").style("max-width", "640px").style("line-height", "1.4").style("margin-bottom", "10px").text(description);
+      }
+    }
+    for (const key of keys) {
+      const r = geneRanks[key];
+      const colIdx = new Map(r.columns.map((c, i) => [c, i]));
+      const intIdx = integrativeColumn ? colIdx.get(integrativeColumn) : void 0;
+      const intRank = r.row && intIdx !== void 0 ? r.row[intIdx] : null;
+      const section = body.append("div").style("margin-bottom", expanded ? "12px" : "6px");
+      const head = section.append("div").style("display", "flex").style("align-items", "baseline").style("gap", "6px").style("font-size", expanded ? ".9em" : ".8em");
+      head.append("span").style("font-weight", "600").style("color", "#374151").text(rankingLabel(key));
+      if (!r.row) {
+        head.append("span").style("color", "#9ca3af").text("not ranked");
+        continue;
+      }
+      head.append("span").style("color", typeof intRank === "number" ? "#111827" : "#9ca3af").text(typeof intRank === "number" ? `#${fmt(intRank)} of ${fmt(r.counts[intIdx])}` : "no integrative rank");
+      const mods = modalities.filter((m) => colIdx.has(m));
+      if (!expanded) {
+        const strip = section.append("div").style("display", "flex").style("gap", "2px").style("margin-top", "2px");
+        for (const m of mods) {
+          const c = colIdx.get(m);
+          const v = r.row[c];
+          const n = r.counts[c];
+          const pct = typeof v === "number" && n ? (v - 1) / Math.max(1, n - 1) : null;
+          strip.append("div").attr("title", pct === null ? `${m}: not ranked` : `${m}: #${fmt(v)} of ${fmt(n)}`).style("width", "20px").style("height", "9px").style("border-radius", "2px").style("background", pct === null ? "#fff" : rankColor(pct)).style("border", pct === null ? "1px dashed #d1d5db" : "1px solid transparent").style("box-sizing", "border-box");
+        }
+        continue;
+      }
+      const tbl = table2col({ holder: section.append("table") });
+      for (const m of mods) {
+        const c = colIdx.get(m);
+        const v = r.row[c];
+        const n = r.counts[c];
+        const pctTop = typeof v === "number" ? 100 * v / n : null;
+        const pctText = pctTop === null ? "" : ` (top ${pctTop < 0.1 ? pctTop.toFixed(2) : pctTop.toFixed(1)}%)`;
+        tbl.addRow(m, typeof v === "number" ? `#${fmt(v)} of ${fmt(n)}${pctText}` : "not ranked");
+      }
+      for (const extra of statColumns) {
+        const c = colIdx.get(extra);
+        if (c === void 0) continue;
+        const v = r.row[c];
+        tbl.addRow(extra, typeof v === "number" ? v < 1e-3 && v > 0 ? v.toExponential(2) : String(v) : "NA");
+      }
+    }
+    if (!expanded) {
+      const foot = body.append("div").style("font-size", ".7em").style("color", "#9ca3af").style("margin-top", "4px");
+      foot.text("strip: one cell per modality, darker = ranked higher \xB7 hover for ranks");
+    }
+  }).catch((err) => {
+    wait.style("color", "#b91c1c").text(`Failed to load: ${err?.message || err}`);
+    if (self.app?.opts?.debug) console.error(err);
+  });
+}
+function getConcordance(self, x, y) {
+  const [genome, dslabel] = vocabKey(self).split("|");
+  const refKey = (r) => `${r.organism}|${r.assay}|${r.cohort}`;
+  return cachedFetch(`dapConcordance|${vocabKey(self)}|${refKey(x)}|${refKey(y)}`, async () => {
+    const data = await dofetch3("termdb/dapVolcano", {
+      body: {
+        genome,
+        dslabel,
+        organism: x.organism,
+        assay: x.assay,
+        cohort: x.cohort,
+        concordanceWith: { organism: y.organism, assay: y.assay, cohort: y.cohort }
+      }
+    });
+    if (data.error) throw data.error;
+    return data.concordance;
+  });
+}
+function findPairCohort(self, side, age) {
+  const organisms = self.app?.vocabApi?.termdbConfig?.queries?.proteome?.organisms || {};
+  for (const organism in organisms) {
+    const assays = organisms[organism]?.assays || {};
+    for (const assay in assays) {
+      for (const cohort in assays[assay].cohorts || {}) {
+        const c = assays[assay].cohorts[cohort];
+        if (!c.DAPfile || !c.catalog) continue;
+        if (!cohortMatches(side, organism, assay, c.catalog)) continue;
+        if (side.ageVaries && c.catalog.ageGroup !== age) continue;
+        const label = side.ageVaries ? `${side.label} ${age}` : side.label;
+        return { organism, assay, cohort, label };
+      }
+    }
+  }
+  return null;
+}
+function concordanceAges(self, cfg) {
+  const organisms = self.app?.vocabApi?.termdbConfig?.queries?.proteome?.organisms || {};
+  const sides = (cfg.pairs || []).flatMap((p) => [p.x, p.y]).filter((sd) => sd.ageVaries);
+  const ages = /* @__PURE__ */ new Set();
+  for (const organism in organisms) {
+    const assays = organisms[organism]?.assays || {};
+    for (const assay in assays) {
+      for (const cohort in assays[assay].cohorts || {}) {
+        const c = assays[assay].cohorts[cohort];
+        if (!c.DAPfile || !c.catalog?.ageGroup) continue;
+        if (sides.some((sd) => cohortMatches(sd, organism, assay, c.catalog))) ages.add(c.catalog.ageGroup);
+      }
+    }
+  }
+  return [...ages].sort(byAge);
+}
+function defaultConcordanceAge(self, cfg) {
+  const ages = concordanceAges(self, cfg);
+  if (cfg.defaultAge && ages.includes(cfg.defaultAge)) return cfg.defaultAge;
+  return ages[0] || cfg.defaultAge || "";
+}
+function concordancePairs(self, cfg, age = defaultConcordanceAge(self, cfg)) {
+  const pairs = [];
+  for (const p of cfg.pairs || []) {
+    const x = findPairCohort(self, p.x, age);
+    const y = findPairCohort(self, p.y, age);
+    if (x && y) pairs.push({ key: p.key, label: p.label, x, y });
+  }
+  return pairs;
+}
+async function drawConcordance(holder, self, pair, gene, expanded) {
+  const { points: pts, r: R, p: P } = await getConcordance(self, pair.x, pair.y);
+  const target = gene.toUpperCase();
+  const hit = pts.find((p) => p.gene === target);
+  const margin = expanded ? { top: 14, right: 16, bottom: 44, left: 52 } : { top: 8, right: 10, bottom: 32, left: 38 };
+  const innerW = expanded ? 380 : 150;
+  const innerH = expanded ? 320 : 118;
+  const svg = holder.append("svg").attr("width", innerW + margin.left + margin.right).attr("height", innerH + margin.top + margin.bottom);
+  const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
+  const x = linear().domain(fcDomain(pts.map((p) => p.x))).range([0, innerW]);
+  const y = linear().domain(fcDomain(pts.map((p) => p.y))).range([innerH, 0]);
+  const tickFont = expanded ? null : "8.5px";
+  styledAxis(g.append("g").attr("transform", `translate(0,${innerH})`), axisBottom(x).ticks(expanded ? 6 : 4), tickFont);
+  styledAxis(g.append("g"), axisLeft(y).ticks(expanded ? 6 : 4), tickFont);
+  drawZeroLine(g, x(0), 0, x(0), innerH);
+  drawZeroLine(g, 0, y(0), innerW, y(0));
+  yAxisTitle(svg, innerH, margin.top, `${pair.y.label} log2FC`);
+  svg.append("text").attr("x", margin.left + innerW / 2).attr("y", margin.top + innerH + (expanded ? 36 : 28)).attr("text-anchor", "middle").style("font-size", expanded ? "11px" : "10px").style("fill", "#374151").text(`${pair.x.label} log2FC`);
+  for (const p of pts) {
+    if (p === hit) continue;
+    g.append("circle").attr("cx", x(p.x)).attr("cy", y(p.y)).attr("r", expanded ? 1.6 : 1.1).attr("fill", "#9ca3af").attr("fill-opacity", 0.45);
+  }
+  if (hit) {
+    g.append("circle").attr("cx", x(hit.x)).attr("cy", y(hit.y)).attr("r", expanded ? 6 : 4).attr("fill", "#e75480").attr("stroke", "#7f1d1d").attr("stroke-width", 1.2);
+    g.append("text").attr("x", x(hit.x) + (expanded ? 9 : 6)).attr("y", y(hit.y) - (expanded ? 6 : 4)).style("font-size", expanded ? "12px" : "9px").style("font-weight", "600").style("fill", "#7f1d1d").text(gene);
+  }
+  g.append("text").attr("x", innerW).attr("y", -2).attr("text-anchor", "end").style("font-size", expanded ? "11px" : "9px").style("fill", "#374151").attr("title", P === null ? null : `Pearson cor.test p = ${P < 1e-4 ? P.toExponential(1) : P.toFixed(4)}`).text(`R = ${R === null ? "NA" : R.toFixed(2)} \xB7 n = ${pts.length.toLocaleString()}`);
+  if (!hit) {
+    holder.append("div").style("font-size", ".72em").style("color", "#9ca3af").text(`${gene} is not quantified in both datasets`);
+  } else if (expanded) {
+    holder.append("div").style("font-size", ".8em").style("color", "#374151").style("margin-top", "4px").text(`${gene}: ${pair.x.label} log2FC ${hit.x.toFixed(2)} \xB7 ${pair.y.label} log2FC ${hit.y.toFixed(2)}`);
+  }
+}
+function renderConcordanceTile(body, _td, self, cfg, opts = {}) {
+  const expanded = !!opts.expanded;
+  const gene = self.state?.config?.tw?.term?.name || "";
+  let age = defaultConcordanceAge(self, cfg);
+  let pairs = concordancePairs(self, cfg, age);
+  if (!pairs.length) return;
+  let pair = pairs[0];
+  const controls = body.append("div").style("display", "flex").style("align-items", "center").style("gap", "12px");
+  const tabsHolder = controls.append("div");
+  const plotHolder = body.append("div");
+  let generation = 0;
+  const redraw = () => {
+    const gen = ++generation;
+    plotHolder.selectAll("*").remove();
+    const wait = plotHolder.append("div").style("font-size", ".75em").style("color", "#9ca3af").text("Loading\u2026");
+    const target = plotHolder.append("div");
+    drawConcordance(target, self, pair, gene, expanded).then(() => {
+      if (gen !== generation) target.remove();
+      else wait.remove();
+    }).catch((err) => {
+      if (gen !== generation) return;
+      wait.style("color", "#b91c1c").text(`Failed to load: ${err?.message || err}`);
+      if (self.app?.opts?.debug) console.error(err);
+    });
+  };
+  const makeTabs = () => {
+    tabsHolder.selectAll("*").remove();
+    if (pairs.length < 2) return;
+    makeDiseaseTabs(
+      tabsHolder,
+      pairs.map((p) => p.label),
+      pair.label,
+      (label) => {
+        pair = pairs.find((p) => p.label === label) || pairs[0];
+        redraw();
+      },
+      ".9em"
+    );
+  };
+  if (expanded) {
+    makeTabs();
+    const ages = concordanceAges(self, cfg);
+    if (ages.length > 1) {
+      const ageDiv = controls.append("div").style("font-size", ".85em").style("color", "#374151");
+      ageDiv.append("span").text("Age: ");
+      const sel = ageDiv.append("select").style("font-size", "inherit");
+      for (const a of ages)
+        sel.append("option").attr("value", a).property("selected", a === age).text(a);
+      sel.on("change", () => {
+        age = sel.property("value");
+        const next = concordancePairs(self, cfg, age);
+        if (!next.length) {
+          plotHolder.selectAll("*").remove();
+          plotHolder.append("div").style("font-size", ".8em").style("color", "#9ca3af").text(`No cohorts at ${age}`);
+          tabsHolder.selectAll("*").remove();
+          return;
+        }
+        pairs = next;
+        pair = pairs.find((p) => p.key === pair.key) || pairs[0];
+        makeTabs();
+        redraw();
+      });
+    }
+  }
+  redraw();
+  if (!expanded) {
+    body.append("div").style("font-size", ".7em").style("color", "#9ca3af").style("margin-top", "2px").text(`${pair.label}${age ? ", " + age : ""}, all genes \xB7 expand for other pairs and ages`);
+  } else if (cfg.note) {
+    body.append("div").style("font-size", ".75em").style("color", "#9ca3af").style("margin-top", "6px").text(cfg.note);
+  }
+}
+var TILE_RENDERERS = {
+  crossDisease: {
+    has: (td, _s, cfg) => new Set(entries(td, cfg.key).map((e) => e.disease || e.cohortName)).size >= 2,
+    render: renderCrossDiseaseTile
+  },
+  insoluble: { has: (td, _s, cfg) => entries(td, cfg.key).length >= 1, render: renderInsolubleTile },
+  brainRegions: { has: (td, _s, cfg) => entries(td, cfg.key).length >= 2, render: renderBrainRegionTile },
+  mouseModels: { has: (td, _s, cfg) => entries(td, cfg.key).length >= 2, render: renderMouseModelsTile },
+  cellTypes: { has: (td, _s, cfg) => entries(td, cfg.key).length >= 2, render: renderCellTypesTile },
+  plaque: { has: (td, _s, cfg) => entries(td, cfg.key).length >= 1, render: renderPlaqueTile },
+  multiomicRank: {
+    // available whenever the dataset ships rankings; the gene may still be absent
+    has: (_td, self) => !!self?.app?.vocabApi?.termdbConfig?.queries?.geneRanking?.rankings,
+    render: renderMultiomicRankTile
+  },
+  concordance: { has: (_td, self, cfg) => concordancePairs(self, cfg).length > 0, render: renderConcordanceTile }
+  // 'ptm' is rendered by renderPTMSummaryCard from site-level data, not here
+};
+function configuredTiles(self) {
+  const out = [];
+  for (const cfg of getTileConfigs(self)) {
+    const r = TILE_RENDERERS[cfg.key];
+    if (!r) continue;
+    out.push({ ...cfg, ...r });
+  }
+  return out;
+}
+function renderTileError(holder, err, self) {
+  holder.append("div").style("color", "#b91c1c").style("font-size", ".8em").text(`Failed to render: ${err?.message || err}`);
+  if (self?.app?.opts?.debug) console.error(err);
+}
+var openTilePanes = /* @__PURE__ */ new Map();
+var tilePaneKey = (self, key) => `${self?.id ?? ""}|${key}`;
+function closeTilePanes(self) {
+  const prefix = `${self?.id ?? ""}|`;
+  for (const [k, pane] of openTilePanes) {
+    if (!k.startsWith(prefix)) continue;
+    pane.pane.remove();
+    openTilePanes.delete(k);
+  }
+}
+function closeTilePane(self, key) {
+  const k = tilePaneKey(self, key);
+  const existing = openTilePanes.get(k);
+  if (!existing) return false;
+  existing.pane.remove();
+  openTilePanes.delete(k);
+  return true;
+}
+function toggleTilePane(self, key, title, make, onClose) {
+  const k = tilePaneKey(self, key);
+  if (closeTilePane(self, key)) return null;
+  const pane = newpane({
+    x: Math.max(16, (window.innerWidth - 760) / 2),
+    y: 60,
+    close: () => {
+      pane.pane.remove();
+      openTilePanes.delete(k);
+    }
+  });
+  if (onClose) {
+    const remove = pane.pane.remove.bind(pane.pane);
+    pane.pane.remove = () => {
+      remove();
+      onClose();
+    };
+  }
+  openTilePanes.set(k, pane);
+  if (!pane.pane.node().style.zIndex) pane.pane.style("z-index", TILE_PANE_ZINDEX);
+  pane.header.text(title);
+  make(pane.body);
+  raiseSharedMenus(self);
+  return pane;
+}
+function openExpandedTile(tile, td, self) {
+  const protein = self.state?.config?.tw?.term?.name || "";
+  toggleTilePane(self, tile.key, `${protein ? protein + " \u2014 " : ""}${tile.title}`, (paneBody) => {
+    const body = paneBody.append("div").style("padding", "12px 16px");
+    body.append("div").style("font-size", ".8em").style("color", "#6b7280").style("margin-bottom", "6px").text(tile.subtitle);
+    try {
+      tile.render(body.append("div"), td, self, tile, { scale: EXPANDED_SCALE, expanded: true });
+    } catch (err) {
+      renderTileError(body, err, self);
+    }
+  });
+}
+function renderStudyTiles(grid, td, self) {
+  const missing = [];
+  for (const tile of configuredTiles(self)) {
+    if (!tile.has(td, self, tile)) {
+      missing.push(tile);
+      continue;
+    }
+    const body = makeTileCard(grid, {
+      title: tile.title,
+      subtitle: tile.subtitle,
+      uniform: true,
+      onExpand: () => openExpandedTile(tile, td, self)
+    });
+    try {
+      tile.render(body, td, self, tile, { scale: TILE_FACE_SCALE, scaleX: TILE_FACE_SCALE_X });
+    } catch (err) {
+      renderTileError(body, err, self);
+    }
+  }
+  return { missing };
+}
+function renderPlaceholderTiles(grid, tiles) {
+  for (const tile of tiles) {
+    const body = makeTileCard(grid, { title: tile.title, disabled: true, uniform: true });
+    body.style("flex", "1").style("display", "flex").style("align-items", "center").style("justify-content", "center").append("div").style("font-size", ".75em").style("color", "#9ca3af").style("max-width", "200px").style("text-align", "center").text(tile.note || "No data for this protein in this study");
+  }
+}
+var PTM_FALLBACK_PALETTE = ["#d7301f", "#2166ac", "#1b9e77", "#7570b3", "#e6ab02"];
+function firstModSitePos(modSites) {
+  const m = /[A-Za-z](\d+)/.exec(modSites || "");
+  if (!m) return null;
+  const pos = Number(m[1]);
+  return Number.isInteger(pos) && pos >= 1 ? pos : null;
+}
+function renderOverviewVolcanoCard(grid, data, self, opts) {
+  const pts = [];
+  for (const e of data?.cohorts || []) {
+    if (e.PTMType) continue;
+    const log2fc = getLog2Ratio(e.foldChange);
+    const p = Number(e.fdr);
+    if (log2fc === null || !Number.isFinite(p) || p <= 0) continue;
+    pts.push({ x: log2fc, y: -Math.log10(Math.max(p, 1e-300)), sig: p < SIG_P });
+  }
+  const protein = self.state?.config?.tw?.term?.name || "";
+  const body = makeTileCard(grid, {
+    title: "All sample sets",
+    subtitle: "log2FC vs significance, every cohort",
+    uniform: true,
+    onExpand: () => toggleTilePane(self, "volcano", `${protein ? protein + " \u2014 " : ""}All sample sets`, (paneBody) => {
+      opts.onExpandRender(paneBody.append("div").style("padding", "12px 16px"));
+    })
+  });
+  if (!pts.length) {
+    body.append("div").style("font-size", ".75em").style("color", "#9ca3af").text("No protein-level data.");
+    return;
+  }
+  const margin = { top: 8, right: 10, bottom: 32, left: 38 };
+  const innerW = 156;
+  const innerH = 118;
+  const svg = body.append("svg").attr("width", innerW + margin.left + margin.right).attr("height", innerH + margin.top + margin.bottom);
+  const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
+  const x = linear().domain(fcDomain(pts.map((p) => p.x))).range([0, innerW]);
+  const y = linear().domain([0, Math.max(2, ...pts.map((p) => p.y)) * 1.05]).range([innerH, 0]);
+  styledAxis(g.append("g").attr("transform", `translate(0,${innerH})`), axisBottom(x).ticks(4), "8.5px");
+  styledAxis(g.append("g"), axisLeft(y).ticks(4), "8.5px");
+  drawZeroLine(g, x(0), 0, x(0), innerH);
+  g.append("line").attr("x1", 0).attr("x2", innerW).attr("y1", y(-Math.log10(SIG_P))).attr("y2", y(-Math.log10(SIG_P))).attr("stroke", "#9ca3af").attr("stroke-dasharray", "3 3").attr("stroke-opacity", 0.5);
+  yAxisTitle(svg, innerH, margin.top, "\u2212log\u2081\u2080(FDR)");
+  svg.append("text").attr("x", margin.left + innerW / 2).attr("y", margin.top + innerH + 28).attr("text-anchor", "middle").style("font-size", "10px").style("fill", "#374151").text("log2FC");
+  for (const p of pts) {
+    g.append("circle").attr("cx", x(p.x)).attr("cy", y(p.y)).attr("r", 2).attr("fill", p.sig ? "#e75480" : "#c7cbd1").attr("fill-opacity", 0.6);
+  }
+  body.append("div").style("font-size", ".7em").style("color", "#9ca3af").style("margin-top", "2px").text(`${pts.length} dots (accession \xD7 sample set) \xB7 expand for the interactive view`);
+}
+function renderPTMSummaryCard(grid, ptmEntries, self, opts) {
+  if (!ptmEntries?.length) return;
+  const protein = self.state?.config?.tw?.term?.name || "";
+  const cfg = getTileConfig(self, "ptm");
+  const title = cfg?.title || "PTM sites";
+  const body = makeTileCard(grid, {
+    title,
+    subtitle: cfg?.subtitle || "Site-level log2FC along the protein",
+    uniform: true,
+    onExpand: () => toggleTilePane(self, "ptm", `${protein ? protein + " \u2014 " : ""}${title}`, async (paneBody) => {
+      const holder = paneBody.append("div").style("padding", "12px 16px");
+      const wait = holder.append("div").style("color", "#6b7280").style("font-size", ".85em").text("Loading\u2026");
+      try {
+        await opts.onExpandRender(holder);
+      } catch (err) {
+        renderTileError(holder, err, self);
+      }
+      wait.remove();
+    })
+  });
+  const byOrganism = /* @__PURE__ */ new Map();
+  const typeCounts = /* @__PURE__ */ new Map();
+  for (const e of ptmEntries) {
+    const pos = firstModSitePos(e.modSites);
+    const log2fc = getLog2Ratio(e.foldChange);
+    const mclass = Object.values(e.mclassOverride || {})[0];
+    const existing = typeCounts.get(e.PTMType);
+    const color = existing?.color || mclass?.color || PTM_FALLBACK_PALETTE[typeCounts.size % PTM_FALLBACK_PALETTE.length];
+    const tc = existing || { count: 0, color };
+    tc.count++;
+    typeCounts.set(e.PTMType, tc);
+    if (pos === null || log2fc === null) continue;
+    const p = Number(e.fdr);
+    const entry = {
+      organism: e.organism,
+      assayName: e.assayName,
+      cohortName: e.cohortName,
+      disease: e.disease,
+      uniqueIdentifier: e.uniqueIdentifier,
+      proteinAccession: e.proteinAccession,
+      log2fc,
+      fdr: Number.isFinite(p) && p > 0 ? p : null,
+      testedN: Number(e.testedN) || 0,
+      controlN: Number(e.controlN) || 0,
+      isoformCount: 1,
+      catalog: catalogForEntry(self, e) || {},
+      ptmType: e.PTMType,
+      modSites: e.modSites
+    };
+    const arr = byOrganism.get(e.organism) || [];
+    arr.push({ pos, log2fc, color, entry });
+    byOrganism.set(e.organism, arr);
+  }
+  const stripW = 152;
+  const stripH = 46;
+  const labelW = 46;
+  for (const [organism, points] of byOrganism) {
+    const maxPos = Math.max(...points.map((p) => p.pos)) * 1.05;
+    const maxAbs = Math.max(0.2, ...points.map((p) => Math.abs(p.log2fc)));
+    const row = body.append("div").style("display", "flex").style("align-items", "center").style("gap", "4px");
+    row.append("span").style("flex", `0 0 ${labelW}px`).style("font-size", ".7em").style("color", "#6b7280").text(organism);
+    const svg = row.append("svg").attr("width", stripW).attr("height", stripH);
+    const x = linear().domain([0, maxPos]).range([4, stripW - 4]);
+    const y = linear().domain([-maxAbs, maxAbs]).range([stripH - 4, 4]);
+    svg.append("line").attr("x1", 0).attr("x2", stripW).attr("y1", y(0)).attr("y2", y(0)).attr("stroke", "#e5e7eb");
+    for (const p of points) {
+      svg.append("line").attr("x1", x(p.pos)).attr("x2", x(p.pos)).attr("y1", y(0)).attr("y2", y(p.log2fc)).attr("stroke", p.color).attr("stroke-opacity", 0.4);
+      attachEntryBehavior(
+        svg.append("circle").attr("cx", x(p.pos)).attr("cy", y(p.log2fc)).attr("r", 2.5).attr("fill", p.color).attr("fill-opacity", 0.8),
+        p.entry,
+        self
+      );
+    }
+  }
+  const foot = body.append("div").style("display", "flex").style("gap", "10px").style("flex-wrap", "wrap").style("font-size", ".7em").style("color", "#6b7280").style("margin-top", "4px");
+  for (const [type, tc] of typeCounts) {
+    const item = foot.append("span").style("display", "inline-flex").style("align-items", "center").style("gap", "4px");
+    item.append("span").style("display", "inline-block").style("width", "7px").style("height", "7px").style("border-radius", "50%").style("background", tc.color);
+    item.append("span").text(`${tc.count} ${type}`);
+  }
+}
+function renderCoverageLine(holder, td) {
+  const parts = [`${td.cohortCount} sample set${td.cohortCount === 1 ? "" : "s"}`];
+  if (td.ptmSiteCount) parts.push(`${td.ptmSiteCount} PTM site measurement${td.ptmSiteCount === 1 ? "" : "s"}`);
+  if (td.isoformCount > 1) parts.push(`${td.isoformCount} isoforms (tiles show the most significant per sample set)`);
+  holder.append("div").style("font-size", ".8em").style("color", "#6b7280").style("margin-bottom", "4px").text(parts.join(" \xB7 "));
+}
+
+export {
+  getTileConfig,
+  orderBy,
+  getLog2Ratio,
+  launchViolinPlot,
+  prepareTileData,
+  makeTileGrid,
+  makeTileCard,
+  renderTileError,
+  closeTilePanes,
+  closeTilePane,
+  toggleTilePane,
+  renderStudyTiles,
+  renderPlaceholderTiles,
+  renderOverviewVolcanoCard,
+  renderPTMSummaryCard,
+  renderCoverageLine
+};
+//# sourceMappingURL=chunk-VRINIB6B.js.map