@sjcrh/proteinpaint-client 2.226.0 → 2.227.0

package/dist/cohortSunburst-DFJW6WXU.js

@@ -0,0 +1,402 @@
+import {
+  LINK,
+  RULE,
+  SIZE,
+  SunburstRenderer,
+  TEXT_DARK,
+  TEXT_MUTED,
+  WARN,
+  badge,
+  card,
+  icon,
+  pill
+} from "./chunk-JI632MAR.js";
+import {
+  catalogRowKey,
+  cohortMatches,
+  deriveCatalogRows
+} from "./chunk-ZX75ZAUG.js";
+import {
+  PlotBase
+} from "./chunk-YBXQBSFY.js";
+import "./chunk-HJ6L54YS.js";
+import "./chunk-QKVKQD6S.js";
+import "./chunk-CNFTQSNE.js";
+import "./chunk-DOC3HBOV.js";
+import "./chunk-TVJOSRCH.js";
+import "./chunk-3CIL7KH7.js";
+import "./chunk-T4XPCSLP.js";
+import "./chunk-VVWZ4BOI.js";
+import "./chunk-W5J3LTYS.js";
+import "./chunk-2IAELUCN.js";
+import "./chunk-CFYWQJ7F.js";
+import "./chunk-2N345NXD.js";
+import {
+  copyMerge,
+  getCompInit
+} from "./chunk-HBNB5TRH.js";
+import "./chunk-PF4DSFDR.js";
+import "./chunk-4OLM3KSB.js";
+import "./chunk-PWYMHUXY.js";
+import "./chunk-TLT4YIG3.js";
+import "./chunk-5R63Q5KH.js";
+import {
+  select_default
+} from "./chunk-I6Y4O3RR.js";
+import "./chunk-Q5RDQNIT.js";
+import "./chunk-HS5PO5ZQ.js";
+
+// plots/cohortSunburst.ts
+var defaultConfig = { chartType: "cohortSunburst" };
+var CohortSunburst = class _CohortSunburst extends PlotBase {
+  constructor(opts, api) {
+    super(opts, api);
+    /** selected cohorts by key, in selection order */
+    this.selected = /* @__PURE__ */ new Map();
+    /** leaf node of each cohort by key, for its hue and ring label */
+    this.leafNode = /* @__PURE__ */ new Map();
+    this.type = _CohortSunburst.type;
+  }
+  static {
+    this.type = "cohortSunburst";
+  }
+  async init() {
+    const holder = this.opts.holder.append("div").style("padding", "10px").style("white-space", "normal");
+    const body = holder.append("div");
+    this.dom = {
+      holder,
+      body,
+      sel: void 0,
+      selectAll: void 0,
+      header: this.opts.header
+    };
+    if (this.dom.header) this.dom.header.html("Explore cohorts");
+  }
+  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 proteome = this.app.vocabApi.termdbConfig?.queries?.proteome;
+    const ui = proteome?.cohortSunburst;
+    this.dom.body.selectAll("*").remove();
+    this.renderer?.destroy();
+    if (!ui?.levels?.length || !proteome?.organisms) {
+      this.dom.body.append("div").style("padding", "20px").style("color", "#666").text("No cohort sunburst is configured.");
+      return;
+    }
+    this.ui = ui;
+    const tree = buildTree(deriveCatalogRows(proteome.organisms), ui);
+    this.renderer = new SunburstRenderer({
+      holder: this.dom.body,
+      unit: { one: "sample set", many: "sample sets" },
+      rootName: "All sample sets",
+      rootPathTitle: `${ui.levels[0]?.name || ""} selection`.trim(),
+      colors: ui.colors,
+      statLabels: (ui.stats || []).map((s) => s.label),
+      hooks: {
+        onClick: (d) => this.onWedgeClick(d),
+        isSelected: (d) => this.isSelected(d),
+        isDimmed: (d) => this.selectedKind() !== void 0 && !leavesOf(d.data).some((l) => this.compatible(l.cohort)),
+        cursor: (d) => d.dim && this.terminalLeaf(d) ? "not-allowed" : "pointer",
+        tooltip: (d, box) => this.tooltip(d, box),
+        onFocus: () => {
+          this.renderStats();
+          this.renderToolbar();
+          this.renderSidebar();
+        }
+      }
+    });
+    this.dom.selectAll = this.renderer.addControl().on("click", () => this.toggleSelectAll());
+    this.dom.sel = card(this.renderer.dom.right, "Selected sample sets");
+    this.renderer.setTree(tree);
+    this.leafNode = new Map(this.renderer.root.leaves().map((l) => [cohortKey(l.data.cohort), l]));
+    this.renderSidebar();
+  }
+  /** selection strokes on the wedges plus the selection panel; no geometry changes */
+  refreshSelection() {
+    this.renderer.refresh();
+    this.renderToolbar();
+    this.renderSidebar();
+  }
+  /************ selection kind ************/
+  kindKeys() {
+    return this.ui?.selectionKind?.keys || [];
+  }
+  /** the kind of the current selection; undefined when nothing is selected */
+  selectedKind() {
+    const first = this.selected.values().next();
+    return first.done ? void 0 : kindOf(first.value, this.kindKeys());
+  }
+  /** whether a cohort could be added to the current selection */
+  compatible(r) {
+    const kind = this.selectedKind();
+    return kind === void 0 || kindOf(r, this.kindKeys()) === kind;
+  }
+  /** stat boxes for the sample sets under the centre */
+  renderStats() {
+    const leaves = leavesOf(this.renderer.focus.data);
+    const values = /* @__PURE__ */ new Map();
+    for (const def of this.ui.stats || []) values.set(def.label, computeStat(leaves, def));
+    const keyOf = new Map((this.ui.stats || []).map((def) => [def.label, def.key || ""]));
+    this.renderer.setStats(values, (label) => `No ${keyOf.get(label)} counts in the dataset yet`);
+  }
+  /** the sample sets Select all would take under the centre: those of the selected kind,
+   *  or, with nothing selected, of the largest kind there; and whether all are selected */
+  underFocus() {
+    const leaves = leavesOf(this.renderer.focus.data);
+    const keys = this.kindKeys();
+    const kind = this.selectedKind() ?? largestKind(leaves, keys);
+    const under = leaves.filter((l) => kindOf(l.cohort, keys) === kind);
+    const allIn = under.length > 0 && under.every((l) => this.selected.has(cohortKey(l.cohort)));
+    return { under, allIn, kind };
+  }
+  toggleSelectAll() {
+    const { under, allIn } = this.underFocus();
+    if (!under.length) return;
+    for (const l of under) {
+      if (allIn) this.selected.delete(cohortKey(l.cohort));
+      else this.selected.set(cohortKey(l.cohort), l.cohort);
+    }
+    this.refreshSelection();
+  }
+  /** select all follows the centre and flips to deselect once everything under it is selected */
+  renderToolbar() {
+    const { under, allIn, kind } = this.underFocus();
+    const what = kind ? `${kind} sample sets` : "sample sets";
+    const none = !under.length;
+    this.dom.selectAll.style("opacity", none ? 0.35 : 1).style("cursor", none ? "default" : "pointer").attr(
+      "title",
+      none ? `No ${what} under the centre; clear the selection to pick other kinds` : allIn ? `Deselect every ${what.replace(/s$/, "")} under the centre` : `Select every ${what.replace(/s$/, "")} under the centre`
+    ).html(
+      allIn ? `${icon('<circle cx="12" cy="12" r="9"/><path d="M8 12h8"/>')}DESELECT ALL` : `${icon('<circle cx="12" cy="12" r="9"/><path d="M12 8v8M8 12h8"/>')}SELECT ALL ${under.length}${kind ? ` \xB7 ${kind.toUpperCase()}` : ""}`
+    );
+  }
+  /** the selected-sample-sets card: count in the head, one line per set with its hue
+   *  badge, and the analyze/compare action as the footer */
+  renderSidebar() {
+    const { title, headRight, body } = this.dom.sel;
+    headRight.selectAll("*").remove();
+    body.selectAll("*").remove();
+    headRight.style("margin-bottom", "8px");
+    const n = this.selected.size;
+    title.text(n ? "Selected sample sets" : "No sample sets selected");
+    if (n) {
+      pill(headRight).text(n);
+      headRight.append("span").style("font-size", "11px").style("color", LINK).style("cursor", "pointer").text("Clear").on("click", () => {
+        this.selected.clear();
+        this.refreshSelection();
+      });
+    }
+    const kind = this.selectedKind();
+    if (kind) {
+      body.append("div").style("font-size", "0.75em").style("color", TEXT_MUTED).style("margin-bottom", "4px").text(`${kind} only \xB7 clear the selection to pick another kind`);
+    }
+    const list = body.append("div").style("max-height", `${SIZE - 200}px`).style("overflow-y", "auto");
+    if (!n) {
+      list.append("div").style("font-size", "0.85em").style("color", TEXT_MUTED).style("padding", "4px 0").text("Click a sample-set wedge, or Select all above the chart.");
+    }
+    for (const [k, r] of this.selected) {
+      const leaf = this.leafNode.get(k);
+      const line = list.append("div").style("display", "flex").style("align-items", "center").style("gap", "8px").style("padding", "3px 6px").style("margin", "2px 0").style("border-radius", "6px").on("mouseenter", (event) => {
+        select_default(event.currentTarget).style("background", "#f3f4f6").select(".sjpp-sunburst-remove").style("opacity", 1);
+      }).on("mouseleave", (event) => {
+        select_default(event.currentTarget).style("background", "transparent").select(".sjpp-sunburst-remove").style("opacity", 0);
+      });
+      badge(line, leaf?.data.name || r.cohort, leaf ? this.renderer.hue(leaf) : "#9ca3af", 24);
+      const text = line.append("div").style("flex", "1 1 auto").style("min-width", "0").style("line-height", "1.2");
+      text.append("div").style("font-size", "0.9em").style("color", TEXT_DARK).style("overflow", "hidden").style("text-overflow", "ellipsis").style("white-space", "nowrap").text(this.selectionLabel(r));
+      text.append("div").style("font-size", "0.7em").style("color", "#6b7280").text(r.proteome + (r.placeholder ? " \xB7 placeholder data" : ""));
+      line.append("span").attr("class", "sjpp-sunburst-remove").style("opacity", 0).style("cursor", "pointer").style("color", "#9ca3af").style("font-size", "0.85em").attr("title", "Remove").text("\u2715").on("click", () => {
+        this.selected.delete(k);
+        this.refreshSelection();
+      });
+    }
+    const types = new Set([...this.selected.values()].map((r) => r.dataType));
+    if (types.size > 1) {
+      body.append("div").style("font-size", "0.8em").style("color", WARN).style("margin-top", "6px").text("Selection mixes PTM (site-level) and protein-level assays; their log2FC-z are not directly comparable.");
+    }
+    const footer = body.append("div").style("margin-top", "10px").style("padding-top", "10px").style("border-top", `1px solid ${RULE}`);
+    pill(footer, { button: true }).property("disabled", n === 0).style("opacity", n ? 1 : 0.3).style("cursor", n ? "pointer" : "default").text(n >= 2 ? `Compare ${n} cohorts` : "Analyze cohort").on("click", () => this.onAction());
+  }
+  /************ interaction ************/
+  /** the single sample set a wedge stands for: the leaf itself, or the only leaf beneath an
+   *  inner wedge (e.g. a human assay wedge with one cohort), so it can be selected without
+   *  zooming down to a lone full-circle wedge */
+  terminalLeaf(d) {
+    if (d.data.cohort) return d.data.cohort;
+    if (d.value !== 1) return void 0;
+    return leavesOf(d.data)[0].cohort;
+  }
+  isSelected(d) {
+    const r = this.terminalLeaf(d);
+    return !!r && this.selected.has(cohortKey(r));
+  }
+  onWedgeClick(d) {
+    const r = this.terminalLeaf(d);
+    if (r) {
+      if (!this.compatible(r)) return;
+      const k = cohortKey(r);
+      if (this.selected.has(k)) this.selected.delete(k);
+      else this.selected.set(k, r);
+      this.refreshSelection();
+    } else this.renderer.zoomTo(d);
+  }
+  tooltip(d, box) {
+    const r = this.terminalLeaf(d);
+    const stat = (label, value) => {
+      const line = box.append("div").style("color", "#374151");
+      line.append("span").text(`${label}: `);
+      line.append("b").text(String(value));
+    };
+    const note = (text, color) => box.append("div").style("margin-top", "4px").style("color", color).text(text);
+    const kind = this.selectedKind();
+    if (r) {
+      box.append("div").style("color", "#6b7280").text(`${r.species} \xB7 ${r.proteome} \xB7 ${r.cohort}`);
+      if (r.placeholder) box.append("div").style("color", WARN).text("placeholder data");
+      if (!this.compatible(r))
+        note(`Clear the ${kind} selection to select a ${kindOf(r, this.kindKeys())} sample set`, WARN);
+      else note(this.selected.has(cohortKey(r)) ? "click to deselect" : "click to select", LINK);
+    } else {
+      box.append("div").style("color", "#6b7280").text(d.data.level);
+      stat("Sample sets", d.value);
+      if (d.dim) note(`No ${kind} sample sets here; clear the selection to pick from these`, WARN);
+      note("click to zoom in", LINK);
+    }
+  }
+  /** label for the selection list / compare plot; adds the assay when several are selected */
+  selectionLabel(r) {
+    const species = r.species;
+    const leaf = this.leafNode.get(cohortKey(r));
+    const base = `${species} ${leaf?.data.name || r.cohort}`;
+    const assays = new Set([...this.selected.values()].map((x) => x.proteome));
+    return assays.size > 1 ? `${base} (${r.proteome})` : base;
+  }
+  onAction() {
+    const sel = [...this.selected.values()];
+    if (sel.length === 1) {
+      const c = sel[0];
+      this.app.dispatch({
+        type: "plot_create",
+        config: {
+          chartType: "ProteomeInput",
+          proteomeDetails: { organism: c.organism, assay: c.assay, cohort: c.cohort },
+          hidePlotFilter: true
+        }
+      });
+    } else if (sel.length >= 2) {
+      this.app.dispatch({
+        type: "plot_create",
+        config: {
+          chartType: "proteomeCohortCompare",
+          cohorts: sel.map((c) => ({
+            organism: c.organism,
+            assay: c.assay,
+            cohort: c.cohort,
+            label: this.selectionLabel(c)
+          }))
+        }
+      });
+    }
+  }
+  destroy() {
+    this.renderer?.destroy();
+  }
+};
+function levelValue(row, level) {
+  for (const v of level.values) {
+    if (v.when && !cohortMatches(v.when, row.organism, row.assay, row)) continue;
+    if (v.const) return v.const;
+    if (v.key && row[v.key]) return String(row[v.key]);
+  }
+  return "";
+}
+function leafLabel(row, cfg) {
+  const pick = (keys) => keys.map((k) => row[k]).filter(Boolean).map(String);
+  const a = pick(cfg.keys);
+  if (a.length) return a.join(" ");
+  const b = pick(cfg.fallbackKeys || []);
+  return b.length ? b.join(" ") : row.cohort;
+}
+function buildTree(rows, ui, rootName = "All sample sets") {
+  const root = { name: rootName, children: [] };
+  for (const r of rows) {
+    let node = root;
+    for (const level of ui.levels) {
+      const v = levelValue(r, level);
+      if (!v) continue;
+      if (!node.children) node.children = [];
+      let child = node.children.find((c) => c.name === v && c.level === level.name);
+      if (!child) {
+        child = { name: v, level: level.name, children: [] };
+        node.children.push(child);
+      }
+      node = child;
+    }
+    if (!node.children) node.children = [];
+    node.children.push({ name: leafLabel(r, ui.leafLabel), cohort: r, value: 1 });
+  }
+  disambiguateLeaves(root);
+  return root;
+}
+function disambiguateLeaves(node) {
+  const leaves = (node.children || []).filter((c) => c.cohort);
+  const seen = /* @__PURE__ */ new Map();
+  for (const l of leaves) seen.set(l.name, (seen.get(l.name) || 0) + 1);
+  for (const l of leaves) if (seen.get(l.name) > 1) l.name = `${l.name} (${l.cohort.cohort})`;
+  for (const c of node.children || []) if (!c.cohort) disambiguateLeaves(c);
+}
+function leavesOf(n) {
+  if (n.cohort) return [n];
+  const out = [];
+  for (const c of n.children || []) out.push(...leavesOf(c));
+  return out;
+}
+var cohortKey = (r) => catalogRowKey(r.organism, r.assay, r.cohort);
+function kindOf(r, keys = []) {
+  return keys.map((k) => r[k]).filter(Boolean).map(String).join(" ");
+}
+function largestKind(leaves, keys = []) {
+  const counts = /* @__PURE__ */ new Map();
+  for (const l of leaves) {
+    const k = kindOf(l.cohort, keys);
+    counts.set(k, (counts.get(k) || 0) + 1);
+  }
+  let best = "";
+  let bestN = 0;
+  for (const [k, n] of counts) {
+    if (n > bestN) {
+      best = k;
+      bestN = n;
+    }
+  }
+  return best;
+}
+function computeStat(leaves, def) {
+  const rows = leaves.map((l) => l.cohort).filter((r) => !def.where || cohortMatches(def.where, r.organism, r.assay, r));
+  if (def.kind === "count") return rows.length;
+  if (def.kind === "distinct") {
+    const vals = new Set(rows.map((r) => r[def.key || ""]).filter((v) => v !== void 0 && v !== null && v !== ""));
+    return vals.size;
+  }
+  let total = 0;
+  let seen = false;
+  for (const r of rows) {
+    const v = Number(r[def.key || ""]);
+    if (!Number.isFinite(v) || r[def.key || ""] === void 0 || r[def.key || ""] === "") continue;
+    total += v;
+    seen = true;
+  }
+  return seen ? total : null;
+}
+var componentInit = getCompInit(CohortSunburst);
+async function getPlotConfig(opts) {
+  const config = structuredClone(defaultConfig);
+  return copyMerge(config, opts);
+}
+export {
+  componentInit,
+  getPlotConfig
+};
+//# sourceMappingURL=cohortSunburst-DFJW6WXU.js.map