@sjcrh/proteinpaint-client 2.225.0 → 2.226.0

package/dist/ProteomeInput-M5UIO73Q.js

@@ -0,0 +1,610 @@
+import {
+  makeTileCard,
+  makeTileGrid,
+  renderPlaceholderTiles,
+  renderTileError,
+  tileExpandState
+} from "./chunk-SH7SL4I5.js";
+import "./chunk-ZX75ZAUG.js";
+import {
+  getDefaultGseaSettings
+} from "./chunk-6PVVV3UW.js";
+import "./chunk-ILEXRHF7.js";
+import {
+  PlotBase,
+  getDefaultVolcanoSettings,
+  sayerror
+} from "./chunk-DPWSIN62.js";
+import "./chunk-HJ6L54YS.js";
+import {
+  importPlot
+} from "./chunk-KZ54E2FU.js";
+import {
+  Menu
+} from "./chunk-CNFTQSNE.js";
+import "./chunk-DOC3HBOV.js";
+import "./chunk-TVJOSRCH.js";
+import "./chunk-3CIL7KH7.js";
+import "./chunk-T4XPCSLP.js";
+import {
+  dofetch3
+} from "./chunk-6V7ITU5F.js";
+import "./chunk-W5J3LTYS.js";
+import "./chunk-KUOXZIH4.js";
+import {
+  NumericModes
+} from "./chunk-T2W4JHWJ.js";
+import {
+  PROTEOME_DAP,
+  TermTypeGroups,
+  axisBottom,
+  axisLeft
+} from "./chunk-2N345NXD.js";
+import {
+  copyMerge,
+  getCompInit
+} from "./chunk-HBNB5TRH.js";
+import "./chunk-PF4DSFDR.js";
+import {
+  linear
+} from "./chunk-4OLM3KSB.js";
+import "./chunk-PWYMHUXY.js";
+import "./chunk-TLT4YIG3.js";
+import "./chunk-5R63Q5KH.js";
+import "./chunk-I6Y4O3RR.js";
+import "./chunk-Q5RDQNIT.js";
+import "./chunk-HS5PO5ZQ.js";
+
+// plots/ProteomeInput.ts
+var VOLCANO_FACE = { w: 174, h: 150 };
+var VOLCANO_MARGIN = { top: 8, right: 12, bottom: 34, left: 44 };
+var QC_FIGURE_W = 460;
+var QC_THUMBS = 4;
+var QC_THUMB_W = 100;
+var UP_COLOR = "#b2182b";
+var DOWN_COLOR = "#2166ac";
+var ProteomeInput = class _ProteomeInput extends PlotBase {
+  constructor(opts, api) {
+    super(opts, api);
+    /** key of the in-place expanded tool tile */
+    this.expandedTileKey = null;
+    /** memoized DAP volcano response for the tile face */
+    this.volcanoFace = null;
+    /** the full differential analysis child plot, mounted into this persistent holder; the
+     *  expanded volcano tile re-attaches the holder, so collapsing keeps the analysis and
+     *  its settings alive */
+    this.volcanoHolder = null;
+    this.volcanoComponent = null;
+    this.type = _ProteomeInput.type;
+    this.components = {};
+  }
+  static {
+    this.type = "ProteomeInput";
+  }
+  getState(appState) {
+    const config = appState.plots.find((p) => p.id === this.id);
+    if (!config) {
+      throw `No plot with id='${this.id}' found. Did you set this.id before this.api = getComponentApi(this)?`;
+    }
+    return {
+      config,
+      activeCohort: appState.activeCohort,
+      termdbConfig: appState.termdbConfig,
+      // the full differential analysis child plot; in state so its creation triggers main()
+      volcanoSubplotId: appState.plots.find(
+        (p) => p.parentId === this.id && p.chartType === "differentialAnalysis"
+      )?.id
+    };
+  }
+  async init(appState) {
+    const state = this.getState(appState);
+    const proteomeDetails = state.config.proteomeDetails;
+    const { organism, assay, cohort } = proteomeDetails;
+    const organisms = state.termdbConfig?.queries?.proteome?.organisms || {};
+    const cohortConfig = organisms[organism]?.assays?.[assay]?.cohorts?.[cohort];
+    this.dom = this.initDom(proteomeDetails);
+    const activeCohort = state.activeCohort;
+    const dq = state.termdbConfig?.queries?.proteome?.dataQuality;
+    const qcFigures = cohortConfig?.qcFigures || [];
+    this.tools = [
+      {
+        key: "volcano",
+        title: "DAP volcano",
+        subtitle: "Differentially abundant proteins, case vs control",
+        isVisible: () => !!cohortConfig?.DAPfile,
+        face: (holder) => this.renderVolcanoFace(holder, proteomeDetails),
+        expanded: (holder) => this.renderVolcanoExpanded(holder, proteomeDetails)
+      },
+      {
+        key: "single",
+        title: "Single protein",
+        subtitle: "Abundance of one protein across samples",
+        isVisible: () => true,
+        face: (holder) => this.renderSingleProteinFace(holder, proteomeDetails),
+        expanded: (holder) => this.renderSingleProtein(holder, proteomeDetails, activeCohort)
+      },
+      {
+        key: "two",
+        title: "Two proteins",
+        subtitle: "Abundance of one protein vs another",
+        isVisible: () => true,
+        face: (holder) => toolGlyph(holder, "scatter", "Pick two proteins to compare their abundance per sample."),
+        expanded: (holder) => this.renderTwoProteinSelect(holder, proteomeDetails)
+      },
+      {
+        key: "cluster",
+        title: "Hierarchical clustering",
+        subtitle: "Protein \xD7 sample abundance heatmap",
+        isVisible: () => true,
+        face: (holder) => toolGlyph(holder, "cluster", "Pick three or more proteins to cluster samples by abundance."),
+        expanded: (holder) => this.renderMultiProteinSelect(holder, proteomeDetails, activeCohort)
+      },
+      {
+        key: "dataQuality",
+        title: "Data quality",
+        subtitle: "QC figures provided for this sample set",
+        isVisible: () => !!dq,
+        hasData: () => qcFigures.length > 0,
+        noDataNote: "No data quality figures have been provided for this sample set yet",
+        face: (holder) => renderQcFace(holder, qcFigures),
+        expanded: (holder) => {
+          if (dq.description)
+            holder.append("div").style("max-width", "900px").style("margin-bottom", "12px").style("color", "#555").text(dq.description);
+          renderQcFigures(holder, qcFigures, QC_FIGURE_W);
+        }
+      }
+    ];
+    if (state.config.expandedTile) this.expandedTileKey = state.config.expandedTile;
+    const grid = makeTileGrid(this.dom.tiles);
+    const missing = [];
+    for (const tool of this.tools) {
+      if (!tool.isVisible()) continue;
+      if (tool.hasData && !tool.hasData()) {
+        missing.push(tool);
+        continue;
+      }
+      const face = makeTileCard(grid, {
+        title: tool.title,
+        subtitle: tool.subtitle,
+        uniform: true,
+        expand: { render: tool.expanded, ...tileExpandState(this, tool.key) }
+      });
+      try {
+        const p = tool.face(face);
+        if (p instanceof Promise) p.catch((err) => renderTileError(face, err, this));
+      } catch (err) {
+        renderTileError(face, err, this);
+      }
+    }
+    renderPlaceholderTiles(
+      grid,
+      missing.map((t) => ({ title: t.title, note: t.noDataNote }))
+    );
+  }
+  initDom(proteomeDetails) {
+    const { organism, assay, cohort } = proteomeDetails;
+    this.opts.header.append("span").style("padding-right", "5px").text(`${organism} ${assay}: ${cohort}`);
+    this.opts.header.append("span").text("PROTEOME").style("font-size", "0.7em").style("opacity", "0.6");
+    return {
+      tiles: this.opts.holder.append("div").style("margin", "10px").attr("data-testid", "sjpp-proteome-input-tiles-wrapper")
+    };
+  }
+  getUsecase(proteomeDetails) {
+    const { organism, assay, cohort } = proteomeDetails;
+    return {
+      target: "proteomeAbundance",
+      detail: "term",
+      proteomeDetails: { organism, assay, cohort },
+      label: `Organism: ${organism}; Assay: ${assay}; Sample set: ${cohort}`
+    };
+  }
+  /** face: a quick protein search that opens the single-protein plot directly */
+  renderSingleProteinFace(holder, proteomeDetails) {
+    toolGlyph(holder, "violin", "Search a protein to plot its abundance:");
+    const row = holder.append("div").style("margin-top", "6px");
+    this.addProteinSearchbox(row, proteomeDetails, (term) => this.launchSingleProtein(term, proteomeDetails), {
+      width: "150px"
+    });
+  }
+  launchSingleProtein(term, proteomeDetails) {
+    const { organism, assay, cohort } = proteomeDetails;
+    const t = structuredClone(term.term || term);
+    t.dataTypeDetails = { organism, assay, cohort };
+    const config = {
+      chartType: "summary",
+      term: { term: t, q: { mode: NumericModes.continuous } },
+      assayCohortTitle: `${organism} ${assay}: ${cohort}`,
+      proteomeDetails: { organism, assay, cohort }
+    };
+    const overlayTerm = this.getState(this.app.getState()).termdbConfig?.queries?.proteome?.organisms?.[organism]?.overlayTerm;
+    if (overlayTerm) config.term2 = { term: structuredClone(overlayTerm), q: {} };
+    this.launchPlot(config);
+  }
+  async renderSingleProtein(holder, proteomeDetails, activeCohort) {
+    const row = holder.style("padding", "10px");
+    row.append("div").style("padding", "5px").style("margin-bottom", "5px").text("Select a protein:");
+    const treeHolder = row.append("div");
+    const termdb = await import("./app-IF7YPCGZ.js");
+    termdb.appInit({
+      vocabApi: this.app.vocabApi,
+      holder: treeHolder,
+      state: {
+        activeCohort,
+        nav: { header_mode: "search_only" },
+        tree: { usecase: this.getUsecase(proteomeDetails) }
+      },
+      tree: {
+        click_term: (term) => this.launchSingleProtein(term, proteomeDetails)
+      }
+    });
+  }
+  addProteinSearchbox(row, proteomeDetails, onSelect, opts = {}) {
+    const usecase = this.getUsecase(proteomeDetails);
+    const tip = new Menu({ padding: "0px" });
+    const searchbox = row.append("input").attr("type", "search").attr("placeholder", "Protein").attr("class", "sja_genesearchinput").style("width", opts.width || "200px");
+    const mark = row.append("span").style("margin-left", "5px");
+    const word = row.append("span").style("margin-left", "5px").style("font-size", ".8em").style("opacity", 0.6);
+    let debounceTimer;
+    const doSearch = async () => {
+      const v = searchbox.property("value").trim();
+      if (v.length < 2) {
+        tip.hide();
+        return;
+      }
+      try {
+        const data = await this.app.vocabApi.findTerm(v, "", usecase, TermTypeGroups.PROTEOME_ABUNDANCE);
+        if (!data.lst?.length) {
+          mark.style("color", "red").html("&cross;");
+          word.text("No match");
+          tip.hide();
+        } else {
+          tip.clear().showunder(searchbox.node());
+          for (const term of data.lst) {
+            tip.d.append("div").attr("class", "sja_menuoption").style("border-radius", "0px").text(term.name).on("click", () => {
+              tip.hide();
+              searchbox.property("value", term.name);
+              mark.style("color", "green").html("&check;");
+              word.text(term.name);
+              onSelect(term);
+            });
+          }
+        }
+      } catch (e) {
+        mark.style("color", "red").html("&cross;");
+        word.text(e.message || "Error");
+      }
+    };
+    searchbox.on("keyup", async (event) => {
+      if (event.key === "Escape") {
+        tip.hide();
+        return;
+      }
+      clearTimeout(debounceTimer);
+      mark.html("");
+      word.text("");
+      debounceTimer = setTimeout(doSearch, 300);
+    });
+    return { searchbox, mark, word };
+  }
+  async renderTwoProteinSelect(holder, proteomeDetails) {
+    const { organism, assay, cohort } = proteomeDetails;
+    holder.style("padding", "10px");
+    let selectedTerm1 = null;
+    let selectedTerm2 = null;
+    const gene1row = holder.append("div").style("padding", "5px");
+    const gene2row = holder.append("div").style("padding", "5px").style("display", "none");
+    const submitBtn = holder.append("button").attr("type", "button").attr("disabled", true);
+    gene1row.append("span").text("Select the first protein:");
+    this.addProteinSearchbox(gene1row, proteomeDetails, (term) => {
+      selectedTerm1 = term;
+      gene2row.style("display", "block");
+    });
+    gene2row.append("span").text("Select the second protein:");
+    this.addProteinSearchbox(gene2row, proteomeDetails, (term) => {
+      selectedTerm2 = term;
+      submitBtn.attr("disabled", null);
+    });
+    submitBtn.text("Submit").style("border", "none").style("border-radius", "20px").style("padding", "10px 15px").style("margin-top", "10px").on("click", async () => {
+      if (!selectedTerm1 || !selectedTerm2) {
+        sayerror(holder, "Please select two proteins.");
+        return;
+      }
+      const t1 = structuredClone(selectedTerm1);
+      const t2 = structuredClone(selectedTerm2);
+      t1.dataTypeDetails = { organism, assay, cohort };
+      t2.dataTypeDetails = { organism, assay, cohort };
+      await this.launchPlot({
+        chartType: "summary",
+        term: { term: t1, q: { mode: NumericModes.continuous } },
+        term2: { term: t2, q: { mode: NumericModes.continuous } },
+        assayCohortTitle: `${organism} ${assay}: ${cohort}`,
+        proteomeDetails: { organism, assay, cohort }
+      });
+    });
+  }
+  async renderMultiProteinSelect(holder, proteomeDetails, activeCohort) {
+    const { organism, assay, cohort } = proteomeDetails;
+    holder.style("padding", "10px");
+    const usecase = this.getUsecase(proteomeDetails);
+    const termdb = await import("./app-IF7YPCGZ.js");
+    const treeHolder = holder.append("div");
+    termdb.appInit({
+      vocabApi: this.app.vocabApi,
+      holder: treeHolder,
+      state: {
+        activeCohort,
+        nav: { header_mode: "search_only" },
+        tree: { usecase }
+      },
+      tree: {
+        submit_lst: (termlst) => {
+          const twlst = termlst.map((term) => {
+            const t = structuredClone(term);
+            t.dataTypeDetails = { organism, assay, cohort };
+            return { term: t, q: { mode: NumericModes.continuous } };
+          });
+          if (twlst.length < 3) {
+            alert("At least three proteins are required for hierarchical clustering. Please select more proteins.");
+            return;
+          }
+          this.launchPlot({
+            chartType: "hierCluster",
+            dataType: "proteomeAbundance",
+            termgroups: [{ name: "Protein Abundance Cluster", lst: twlst, type: "hierCluster" }],
+            assayCohortTitle: `${organism} ${assay}: ${cohort}`,
+            proteomeDetails: { organism, assay, cohort }
+          });
+        }
+      }
+    });
+    const enforceMinAndLayout = () => {
+      const submitBtn = treeHolder.select("button").node();
+      if (submitBtn) {
+        const selectedCount = treeHolder.selectAll('.sja_menuoption[aria-label="Click to delete"]').size();
+        submitBtn.disabled = selectedCount < 3;
+      }
+      const node = treeHolder.node();
+      const divs = node.querySelectorAll("div");
+      for (const div of divs) {
+        if (div.style.flexWrap === "wrap" && div.style.display === "inline-block") {
+          div.style.display = "flex";
+        }
+      }
+    };
+    const observer = new MutationObserver(enforceMinAndLayout);
+    observer.observe(treeHolder.node(), {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["style"]
+    });
+  }
+  /** tile-face DAP volcano: the server-rendered PNG of every protein, no interactive dots */
+  getVolcanoFace(proteomeDetails) {
+    if (!this.volcanoFace) {
+      const { organism, assay, cohort } = proteomeDetails;
+      const s = this.volcanoSettings();
+      this.volcanoFace = dofetch3("termdb/dapVolcano", {
+        body: {
+          genome: this.app.vocabApi.vocab.genome,
+          dslabel: this.app.vocabApi.vocab.dslabel,
+          organism,
+          assay,
+          cohort,
+          volcanoRender: {
+            significanceThresholds: {
+              pValueCutoff: s.pValue,
+              pValueType: s.pValueType,
+              foldChangeCutoff: s.foldChangeCutoff
+            },
+            pixelWidth: VOLCANO_FACE.w,
+            pixelHeight: VOLCANO_FACE.h,
+            dotRadius: Math.max(VOLCANO_FACE.w, VOLCANO_FACE.h) / 160,
+            colorSignificantUp: UP_COLOR,
+            colorSignificantDown: DOWN_COLOR,
+            colorNonsignificant: "#9ca3af",
+            maxInteractiveDots: 0,
+            devicePixelRatio: Math.max(1, Math.min(window.devicePixelRatio || 1, 3))
+          }
+        }
+      }).then((res) => {
+        if (res.error) throw res.error;
+        if (!res.data?.volcanoPng) throw "No volcano data for this sample set";
+        return res;
+      });
+      this.volcanoFace.catch(() => this.volcanoFace = null);
+    }
+    return this.volcanoFace;
+  }
+  volcanoSettings() {
+    return { ...getDefaultVolcanoSettings({}, { termType: PROTEOME_DAP }), pValueType: "original" };
+  }
+  /** PNG + axes */
+  drawVolcano(holder, res) {
+    const ext = res.data.plotExtent;
+    const m = VOLCANO_MARGIN;
+    const svg = holder.append("svg").attr("width", ext.pixelWidth + m.left + m.right).attr("height", ext.pixelHeight + m.top + m.bottom);
+    const g = svg.append("g").attr("transform", `translate(${m.left},${m.top})`);
+    g.append("image").attr("href", `data:image/png;base64,${res.data.volcanoPng}`).attr("width", ext.pixelWidth).attr("height", ext.pixelHeight).attr("preserveAspectRatio", "none");
+    const x = linear().domain([ext.xMin, ext.xMax]).range([0, ext.pixelWidth]);
+    const y = linear().domain([ext.yMin, ext.yMax]).range([ext.pixelHeight, 0]);
+    const xAxis = linear().domain([ext.xMinUnpadded, ext.xMaxUnpadded]).range([x(ext.xMinUnpadded), x(ext.xMaxUnpadded)]);
+    const yAxis = linear().domain([ext.yMinUnpadded, ext.yMaxUnpadded]).range([y(ext.yMinUnpadded), y(ext.yMaxUnpadded)]);
+    g.append("g").attr("transform", `translate(0,${ext.pixelHeight})`).call(axisBottom(xAxis).ticks(4)).selectAll("text").style("font-size", "8.5px");
+    g.append("g").call(axisLeft(yAxis).ticks(4)).selectAll("text").style("font-size", "8.5px");
+    svg.append("text").attr("x", m.left + ext.pixelWidth / 2).attr("y", m.top + ext.pixelHeight + 30).attr("text-anchor", "middle").style("font-size", "10px").text("log2FC");
+    svg.append("text").attr("transform", `translate(11,${m.top + ext.pixelHeight / 2}) rotate(-90)`).attr("text-anchor", "middle").style("font-size", "10px").text("\u2212log\u2081\u2080(FDR)");
+  }
+  volcanoCountsLine(holder, res) {
+    const d = res.data;
+    const line = holder.append("div").style("font-size", ".75em").style("color", "#374151").style("margin-top", "2px");
+    line.append("span").style("color", UP_COLOR).text(`${d.totalSignificantUp} up`);
+    line.append("span").text(" \xB7 ");
+    line.append("span").style("color", DOWN_COLOR).text(`${d.totalSignificantDown} down`);
+    line.append("span").style("color", "#6b7280").text(` of ${d.totalRows.toLocaleString()} proteins`);
+  }
+  async renderVolcanoFace(holder, proteomeDetails) {
+    const wait = holder.append("div").style("font-size", ".75em").style("color", "#9ca3af").text("Loading\u2026");
+    try {
+      const res = await this.getVolcanoFace(proteomeDetails);
+      wait.remove();
+      this.drawVolcano(holder, res);
+      this.volcanoCountsLine(holder, res);
+      holder.append("div").style("font-size", ".7em").style("color", "#9ca3af").text(`${res.sample_size2} case \xB7 ${res.sample_size1} control samples`);
+    } catch (e) {
+      wait.remove();
+      throw e;
+    }
+  }
+  /** expanded volcano tile: the full differential analysis plot. Created as a child plot on
+   *  first expand; later expands re-attach the same live component. */
+  async renderVolcanoExpanded(holder, proteomeDetails) {
+    if (!this.volcanoHolder) this.volcanoHolder = holder.append("div");
+    else holder.node().appendChild(this.volcanoHolder.node());
+    if (this.volcanoComponent) return;
+    if (this.getVolcanoSubplot()) {
+      await this.mayMountVolcano();
+      return;
+    }
+    const { organism, assay, cohort } = proteomeDetails;
+    await this.app.dispatch({
+      type: "plot_create",
+      parentId: this.id,
+      config: {
+        chartType: "differentialAnalysis",
+        childType: "volcano",
+        parentId: this.id,
+        termType: PROTEOME_DAP,
+        headerText: `${organism} ${assay}: ${cohort}`,
+        proteomeDetails: { organism, assay, cohort },
+        settings: {
+          volcano: this.volcanoSettings(),
+          gsea: getDefaultGseaSettings({})
+        },
+        highlightedData: [],
+        hidePlotFilter: true
+      }
+    });
+  }
+  getVolcanoSubplot() {
+    const id = this.getState(this.app.getState()).volcanoSubplotId;
+    return id ? this.app.getState().plots.find((p) => p.id === id) : void 0;
+  }
+  /** mount the differential analysis child plot into the volcano holder, only while the
+   *  holder is on the page (the volcano measures its layout) */
+  async mayMountVolcano() {
+    if (this.volcanoComponent || !this.volcanoHolder?.node()?.isConnected) return;
+    const subplot = this.getVolcanoSubplot();
+    if (!subplot) return;
+    const { componentInit: componentInit2 } = await importPlot(subplot.chartType);
+    this.volcanoComponent = await componentInit2({
+      app: this.app,
+      holder: this.volcanoHolder,
+      id: subplot.id,
+      parentId: this.id
+    });
+    this.components.volcano = this.volcanoComponent;
+    await this.volcanoComponent.update({ appState: this.app.getState() });
+  }
+  /** open a tool's plot as a new chart; this tool grid stays so other tools remain one click away */
+  async launchPlot(config) {
+    await this.app.dispatch({ type: "plot_create", config });
+  }
+  async main() {
+    await this.mayMountVolcano();
+  }
+  /** remove the differential analysis child config here
+   *  Deferred until app.main() has finished destroying the deleted plots
+   *  skipped if the child is already gone (e.g. every plot was deleted). */
+  destroy() {
+    const app = this.app;
+    const parentId = this.id;
+    const childIds = app.getState().plots.filter((p) => p.parentId === parentId && p.chartType === "differentialAnalysis").map((p) => p.id);
+    if (!childIds.length) return;
+    queueMicrotask(() => {
+      const ids = new Set(app.getState().plots.map((p) => p.id));
+      if (ids.has(parentId)) return;
+      for (const id of childIds) if (ids.has(id)) app.dispatch({ type: "plot_delete", id });
+    });
+  }
+};
+var proteomeInputInit = getCompInit(ProteomeInput);
+var componentInit = proteomeInputInit;
+function getPlotConfig(opts) {
+  const config = {
+    chartType: "ProteomeInput",
+    hidePlotFilter: true
+  };
+  return copyMerge(config, opts);
+}
+function toolGlyph(holder, kind, hint) {
+  const W = 200, H = 110;
+  const svg = holder.append("svg").attr("width", W).attr("height", H).style("display", "block");
+  const g = svg.append("g");
+  if (kind === "violin") {
+    for (const [cx, h, c] of [
+      [60, 80, DOWN_COLOR],
+      [140, 60, UP_COLOR]
+    ]) {
+      const top = (H - h) / 2;
+      g.append("path").attr(
+        "d",
+        `M${cx},${top} C${cx + 28},${top + h * 0.35} ${cx + 22},${top + h * 0.8} ${cx},${top + h} C${cx - 22},${top + h * 0.8} ${cx - 28},${top + h * 0.35} ${cx},${top} Z`
+      ).attr("fill", c).attr("fill-opacity", 0.25).attr("stroke", c);
+      g.append("line").attr("x1", cx - 10).attr("x2", cx + 10).attr("y1", top + h * 0.55).attr("y2", top + h * 0.55).attr("stroke", c).attr("stroke-width", 2);
+    }
+  } else if (kind === "scatter") {
+    for (let i = 0; i < 40; i++) {
+      const t = i * 37 % 40;
+      const jitter = (i * 53 % 17 - 8) * 2.2;
+      g.append("circle").attr("cx", 20 + t * 4).attr("cy", H - 12 - t * 2.1 + jitter).attr("r", 2.6).attr("fill", "#6b7280").attr("fill-opacity", 0.55);
+    }
+    g.append("line").attr("x1", 16).attr("y1", H - 10).attr("x2", 184).attr("y2", 12).attr("stroke", UP_COLOR);
+  } else {
+    const cols = 8, rows = 5, cw = 18, ch = 12, x0 = (W - cols * cw) / 2, y0 = 40;
+    const palette = [DOWN_COLOR, "#92c5de", "#f7f7f7", "#f4a582", UP_COLOR];
+    for (let r = 0; r < rows; r++)
+      for (let c = 0; c < cols; c++)
+        g.append("rect").attr("x", x0 + c * cw).attr("y", y0 + r * ch).attr("width", cw - 1).attr("height", ch - 1).attr("fill", palette[(r * 3 + c * 2 + (c > 3 ? 2 : 0)) % palette.length]);
+    const leaf = (c) => x0 + c * cw + cw / 2;
+    const link = (a, b, yTop, yA, yB) => g.append("path").attr("d", `M${a},${yA} V${yTop} H${b} V${yB}`).attr("fill", "none").attr("stroke", "#6b7280");
+    for (let c = 0; c < cols; c += 2) link(leaf(c), leaf(c + 1), 30, y0, y0);
+    link((leaf(0) + leaf(1)) / 2, (leaf(2) + leaf(3)) / 2, 20, 30, 30);
+    link((leaf(4) + leaf(5)) / 2, (leaf(6) + leaf(7)) / 2, 20, 30, 30);
+    link((leaf(0) + leaf(3)) / 2, (leaf(4) + leaf(7)) / 2, 8, 20, 20);
+  }
+  holder.append("div").style("font-size", ".75em").style("color", "#6b7280").style("margin-top", "4px").text(hint);
+}
+function renderQcFace(holder, figures) {
+  const grid = holder.append("div").style("display", "grid").style("grid-template-columns", `repeat(2, ${QC_THUMB_W}px)`).style("gap", "6px").style("margin-top", "4px");
+  for (const fig of figures.slice(0, QC_THUMBS)) {
+    const cell = grid.append("div").attr("title", fig.title).style("height", "78px").style("overflow", "hidden").style("display", "flex").style("align-items", "center").style("justify-content", "center").style("border", "1px solid #f3f4f6");
+    loadQcFigure(cell, fig, "100%");
+  }
+  holder.append("div").style("font-size", ".75em").style("color", "#6b7280").style("margin-top", "6px").text(`${figures.length} QC figure${figures.length === 1 ? "" : "s"}`);
+}
+function renderQcFigures(holder, figures, width) {
+  const grid = holder.append("div").style("display", "flex").style("flex-wrap", "wrap").style("gap", "16px");
+  for (const fig of figures) {
+    const cell = grid.append("div").style("width", `${width}px`);
+    cell.append("div").style("font-size", "0.9em").style("margin-bottom", "4px").text(fig.title);
+    loadQcFigure(cell.append("div"), fig);
+  }
+}
+function loadQcFigure(holder, fig, maxHeight) {
+  holder.style("color", "#888").style("font-size", "0.85em").text("Loading\u2026");
+  dofetch3(`img?file=${encodeURIComponent(fig.file)}`).then((img) => {
+    if (!img || img.error) throw img?.error || "no image";
+    holder.text("").append("img").attr("src", img.src).attr("alt", fig.title).style("max-width", "100%").style("max-height", maxHeight || null);
+  }).catch((e) => {
+    console.error("dataQuality figure", fig.file, e);
+    holder.text("Figure not available");
+  });
+}
+export {
+  ProteomeInput,
+  componentInit,
+  getPlotConfig,
+  proteomeInputInit
+};
+//# sourceMappingURL=ProteomeInput-M5UIO73Q.js.map