@sjcrh/proteinpaint-client 2.217.0 → 2.218.0

package/dist/ProteomeInput-NYPUYVN5.js

@@ -1,610 +0,0 @@
-import {
-  makeTileCard,
-  makeTileGrid,
-  renderPlaceholderTiles,
-  renderTileError,
-  tileExpandState
-} from "./chunk-DX23HAW7.js";
-import "./chunk-ZX75ZAUG.js";
-import {
-  getDefaultGseaSettings
-} from "./chunk-CXEECHP5.js";
-import "./chunk-ILEXRHF7.js";
-import {
-  PlotBase,
-  getDefaultVolcanoSettings,
-  sayerror
-} from "./chunk-NNDKYTUV.js";
-import "./chunk-HJ6L54YS.js";
-import {
-  importPlot
-} from "./chunk-HWNQOADC.js";
-import {
-  Menu
-} from "./chunk-CNFTQSNE.js";
-import "./chunk-PLFPXOGX.js";
-import "./chunk-EEB5VE2A.js";
-import "./chunk-3CIL7KH7.js";
-import "./chunk-T4XPCSLP.js";
-import {
-  dofetch3
-} from "./chunk-BIJOXCLN.js";
-import "./chunk-W5J3LTYS.js";
-import "./chunk-L2WOLNZK.js";
-import {
-  NumericModes
-} from "./chunk-AMW5LCUB.js";
-import {
-  PROTEOME_DAP,
-  TermTypeGroups,
-  axisBottom,
-  axisLeft
-} from "./chunk-ZPWBYHNE.js";
-import {
-  copyMerge,
-  getCompInit
-} from "./chunk-HBNB5TRH.js";
-import "./chunk-PF4DSFDR.js";
-import {
-  linear
-} from "./chunk-4OLM3KSB.js";
-import "./chunk-6XKAOSQE.js";
-import "./chunk-TLT4YIG3.js";
-import "./chunk-5R63Q5KH.js";
-import "./chunk-I6Y4O3RR.js";
-import "./chunk-Q5RDQNIT.js";
-import "./chunk-HS5PO5ZQ.js";
-
-// plots/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-ATQM5PKI.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-ATQM5PKI.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-NYPUYVN5.js.map