@sjcrh/proteinpaint-client 2.206.0 → 2.207.0

package/dist/Volcano-KON4MOIM.js

@@ -0,0 +1,1649 @@
+import {
+  VolcanoModel,
+  getGroupColors
+} from "./chunk-SR35T6VI.js";
+import {
+  DATermTypes,
+  DataPointInteractions,
+  GeneSetEditUI,
+  MultiTermWrapperEditUI,
+  PlotBase,
+  axisstyle,
+  controlsInit,
+  downloadTable,
+  enabledTermTypes,
+  fileDateStamp,
+  fillTermWrapper,
+  getCombinedTermFilter,
+  getDNAMethTermName,
+  getDNAMethUnit,
+  getDefaultVolcanoSettings,
+  getGEunit,
+  getSampleNum,
+  renderTable,
+  sayerror,
+  table2col,
+  to_svg,
+  validateVolcanoSettings
+} from "./chunk-NQDF3U2C.js";
+import "./chunk-HJ6L54YS.js";
+import "./chunk-KV4W2ACA.js";
+import "./chunk-CCYVGZGI.js";
+import {
+  Menu
+} from "./chunk-ELJX3QIQ.js";
+import "./chunk-N7DVQTPC.js";
+import "./chunk-EEB5VE2A.js";
+import "./chunk-6RRZRISL.js";
+import "./chunk-2KM4PRQM.js";
+import "./chunk-GRVO7RW4.js";
+import "./chunk-7CJKL3LK.js";
+import "./chunk-HZ3TCGBK.js";
+import {
+  DNA_METHYLATION,
+  GENE_EXPRESSION,
+  PROTEOME_DAP,
+  SINGLECELL_CELLTYPE
+} from "./chunk-IZUYLFOX.js";
+import {
+  copyMerge,
+  getCompInit
+} from "./chunk-WINIL2KN.js";
+import "./chunk-PF4DSFDR.js";
+import "./chunk-7X6NF7NI.js";
+import {
+  uiLabel
+} from "./chunk-W5J3LTYS.js";
+import {
+  axisBottom,
+  axisLeft
+} from "./chunk-Z2ZITHT4.js";
+import {
+  linear
+} from "./chunk-4OLM3KSB.js";
+import "./chunk-FXQXCOII.js";
+import {
+  roundValueAuto
+} from "./chunk-TLT4YIG3.js";
+import "./chunk-5R63Q5KH.js";
+import {
+  selectAll_default,
+  select_default
+} from "./chunk-I6Y4O3RR.js";
+import {
+  rgb
+} from "./chunk-Q5RDQNIT.js";
+import "./chunk-DQC5FFGV.js";
+import "./chunk-HS5PO5ZQ.js";
+
+// plots/volcano/promoterLabel.ts
+function elementNoun(elementType) {
+  switch (elementType) {
+    case void 0:
+    case "":
+    case "promoter":
+      return { one: "Promoter", many: "promoters" };
+    /* Two different promoter DEFINITIONS, deliberately given distinct nouns. 'promoter' is
+    the TSS -1500/+500 window (Bibikova 2011 / Sandoval 2011 -- the 450K array's
+    TSS1500+TSS200 categories); 'promoter_pls' is the ENCODE cCRE promoter-like element,
+    ~349 bp, i.e. the CpG-island core with the shores removed. They cover different numbers
+    of genes and their hit counts are NOT comparable, so the UI must never call both
+    "promoters". */
+    case "promoter_pls":
+      return { one: "cCRE promoter", many: "cCRE promoters" };
+    case "eqtm_block":
+      return { one: "eQTM block", many: "eQTM blocks" };
+    case "enhancer":
+      return { one: "Enhancer", many: "enhancers" };
+    /* Distal and proximal are separate ENCODE classes and separate hypotheses -- dELS are
+    the intronic/intergenic enhancers where myeloma hypermethylation concentrates, pELS sit
+    within 2 kb of a TSS and behave more promoter-like. There are 4.5x as many dELS, so their
+    hit counts are not comparable to each other either. Naming them apart keeps a reader from
+    reading two runs as the same analysis. */
+    case "enhancer_distal":
+      return { one: "Distal enhancer", many: "distal enhancers" };
+    case "enhancer_proximal":
+      return { one: "Proximal enhancer", many: "proximal enhancers" };
+    default:
+      return { one: "Element", many: "elements" };
+  }
+}
+function formatPromoterLabel(d) {
+  if (!d) return "";
+  const id = d.promoter_id || "";
+  const { chr, start, stop } = d;
+  if (!chr || !Number.isFinite(start) || !Number.isFinite(stop)) return id;
+  const region = `${chr}:${start}-${stop}`;
+  const idx = id.match(/\.(p\d+)_[^_]*:\d+-\d+$/);
+  return idx ? `${idx[1]} \xB7 ${region}` : region;
+}
+
+// plots/volcano/viewModel/VolcanoViewModel.ts
+function shortenGroupName(name) {
+  if (name.length >= 25) return name.substring(0, 20) + "...";
+  return name;
+}
+var VolcanoViewModel = class {
+  constructor(config, response, settings) {
+    this.numSignificant = 0;
+    this.numNonSignificant = 0;
+    this.minLogFoldChange = 0;
+    this.maxLogFoldChange = 0;
+    //Used for the y axis domain
+    this.minLogPValue = 0;
+    this.maxLogPValue = 0;
+    //Unpadded extents — used for the visible axis labels/ticks (only span real data)
+    this.minLogFoldChangeAxis = 0;
+    this.maxLogFoldChangeAxis = 0;
+    this.minLogPValueAxis = 0;
+    this.maxLogPValueAxis = 0;
+    //Dot radius in pixels (from server) — overlay rings size to match the PNG
+    this.dotRadiusPx = 2;
+    //Used in place of 0 p values that cannot be log transformed
+    this.minNonZeroPValue = 1e-9;
+    this.offset = 10;
+    this.bottomPad = 60;
+    this.horizPad = 70;
+    this.topPad = 40;
+    this.config = config;
+    this.response = response;
+    this.plotX = this.horizPad + this.offset * 2;
+    this.dataRows = response.data.dots;
+    const { caseColor, controlColor } = getGroupColors(this.config);
+    const barplot = { colorNegative: controlColor, colorPositive: caseColor };
+    this.pValueTable = {
+      columns: [
+        { label: "log\u2082(fold-change)", barplot, sortable: true },
+        // DAP files carry a single FDR (adjusted p-value); other term types report
+        // both a raw and an adjusted p-value.
+        ...config.termType == DATermTypes.PROTEOME_DAP ? [{ label: "FDR", sortable: true }] : [
+          { label: "Original p-value", sortable: true },
+          { label: "Adjusted p-value", sortable: true }
+        ]
+      ],
+      /** Filled in setPointData(), one row per threshold-passing dot. Populated even when the
+       * table is hidden — the download reads it. */
+      rows: [],
+      rowKeys: /* @__PURE__ */ new Map(),
+      height: settings.height + this.topPad
+    };
+    this.settings = settings;
+    this.termType = config.termType;
+    this.dataType = this.setDataType();
+    this.setMinMaxValues();
+    const plotDim = this.setPlotDimensions();
+    this.setPTableColumns();
+    const pointData = this.setPointData(plotDim, controlColor, caseColor);
+    const foldChangeIdx = this.pValueTable.columns.findIndex((c) => c.label.includes("log\u2082(fold-change)"));
+    this.pValueTable.rows.sort((a, b) => b[foldChangeIdx].value - a[foldChangeIdx].value);
+    this.viewData = {
+      images: response.images || [],
+      termInfo: this.setTermInfo(plotDim),
+      plotDim,
+      pointData,
+      pValueTableData: this.pValueTable,
+      statsData: this.setStatsData(),
+      provenance: this.setProvenance(),
+      userActions: this.setUserActions(),
+      deltaBetaAxisLabel: this.setDeltaBetaAxisLabel(),
+      volcanoPng: response.data.volcanoPng,
+      plotExtent: response.data.plotExtent
+    };
+  }
+  /* The delta-beta axis used to read "Δβ (case − control)". Those are positional roles, not
+  	names, so the plot showed the size of an effect but not its direction -- you had to already
+  	know which group landed in which slot, or open a downloaded file and read the provenance line.
+  	Name the groups instead, in subtraction order (case first), so the axis states what it plots.
+  
+  	Returns undefined when the group names are not available; the view falls back to the old
+  	wording rather than rendering a broken label. */
+  setDeltaBetaAxisLabel() {
+    const groups = this.config?.samplelst?.groups;
+    const control = groups?.[0]?.name;
+    const cases = groups?.[1]?.name;
+    if (!control || !cases) return void 0;
+    return `\u0394\u03B2 (${shortenGroupName(cases)} \u2212 ${shortenGroupName(control)})`;
+  }
+  setDataType() {
+    if (this.termType == DATermTypes.GENE_EXPRESSION) return "genes";
+    if (this.termType == DATermTypes.DNA_METHYLATION) return elementNoun(this.settings?.elementType).many;
+    if (this.termType == DATermTypes.SINGLECELL_CELLTYPE) return "genes";
+    if (this.termType == DATermTypes.PROTEOME_DAP) return "proteins";
+    if (this.termType == DATermTypes.SINGLECELL_GENE_EXPRESSION) return "cells";
+    throw new Error(`Unknown termType: ${this.termType}`);
+  }
+  setMinMaxValues() {
+    const ext = this.response.data.plotExtent;
+    this.minLogFoldChange = ext.xMin;
+    this.maxLogFoldChange = ext.xMax;
+    this.minLogPValue = ext.yMin;
+    this.maxLogPValue = ext.yMax;
+    this.minLogFoldChangeAxis = ext.xMinUnpadded;
+    this.maxLogFoldChangeAxis = ext.xMaxUnpadded;
+    this.minLogPValueAxis = ext.yMinUnpadded;
+    this.maxLogPValueAxis = ext.yMaxUnpadded;
+    this.dotRadiusPx = ext.dotRadiusPx;
+    if (ext.minNonZeroPValue > 0) this.minNonZeroPValue = ext.minNonZeroPValue;
+  }
+  setPlotDimensions() {
+    const ext = this.response.data.plotExtent;
+    const plotW = ext.pixelWidth;
+    const plotH = ext.pixelHeight;
+    const xPlotScale = linear().domain([this.minLogFoldChange, this.maxLogFoldChange]).range([0, plotW]);
+    const yPlotScale = linear().domain([this.minLogPValue, this.maxLogPValue]).range([plotH, 0]);
+    const xScale = linear().domain([this.minLogFoldChangeAxis, this.maxLogFoldChangeAxis]).range([xPlotScale(this.minLogFoldChangeAxis), xPlotScale(this.maxLogFoldChangeAxis)]);
+    const yScale = linear().domain([this.minLogPValueAxis, this.maxLogPValueAxis]).range([yPlotScale(this.minLogPValueAxis), yPlotScale(this.maxLogPValueAxis)]);
+    return {
+      svg: {
+        //20 is for the term info above the plot
+        height: plotH + this.topPad + this.bottomPad * 2 + this.offset * 3,
+        width: plotW + this.horizPad * 2
+      },
+      top: {
+        x: this.plotX,
+        y: 5
+      },
+      xAxisLabel: {
+        x: this.horizPad + plotW / 2 + this.offset,
+        y: this.topPad + plotH + this.bottomPad + this.offset
+      },
+      xScale: {
+        scale: xScale,
+        x: this.plotX,
+        y: plotH + this.topPad + this.offset * 2
+      },
+      yAxisLabel: {
+        text: this.termType == DATermTypes.PROTEOME_DAP ? "-log10(FDR)" : `-log10(${this.settings.pValueType} P value)`,
+        x: this.horizPad / 3,
+        y: this.topPad + plotH / 2
+      },
+      yScale: {
+        scale: yScale,
+        x: this.horizPad,
+        y: this.topPad
+      },
+      plot: {
+        height: plotH,
+        width: plotW,
+        x: this.plotX,
+        y: this.topPad
+      },
+      logFoldChangeLine: {
+        x: xPlotScale(0) + this.plotX,
+        y1: this.topPad,
+        y2: plotH + this.offset * 4
+      },
+      xPlotScale,
+      yPlotScale
+    };
+  }
+  setTermInfo(plotDim) {
+    if (!enabledTermTypes.has(this.termType)) return;
+    if (this.termType == DATermTypes.PROTEOME_DAP) {
+      return {
+        y: plotDim.top.y + 10,
+        first: {
+          label: shortenGroupName(`Control (${this.response.sample_size1})`),
+          x: 0
+        },
+        second: {
+          label: shortenGroupName(`Case (${this.response.sample_size2})`),
+          x: this.settings.width
+        }
+      };
+    }
+    if (this.termType == DATermTypes.SINGLECELL_CELLTYPE) {
+      const groupLabel = `${this.config.termId} ${this.config.categoryName}`;
+      return {
+        y: plotDim.top.y + 10,
+        first: {
+          label: shortenGroupName(`Not in ${groupLabel}`),
+          x: 0
+        },
+        second: {
+          label: shortenGroupName(groupLabel),
+          x: this.settings.width
+        }
+      };
+    }
+    return {
+      //Set slightly above the plot
+      y: plotDim.top.y + 10,
+      first: {
+        // color: controlColor || this.settings.defaultSignColor,
+        label: shortenGroupName(`${this.config.samplelst.groups[0].name} (${this.response.sample_size1})`),
+        x: 0
+        // rectX: this.settings.width/2 - 10,
+      },
+      second: {
+        // color: caseColor || this.settings.defaultSignColor,
+        label: shortenGroupName(`${this.config.samplelst.groups[1].name} (${this.response.sample_size2})`),
+        x: this.settings.width
+        // rectX: this.settings.width/2 + 10,
+      }
+    };
+  }
+  setPointData(_plotDim, controlColor, caseColor) {
+    const radius = this.dotRadiusPx;
+    this.pValueTable.rows = [];
+    this.pValueTable.rowKeys.clear();
+    const dataCopy = structuredClone(this.dataRows);
+    for (const d of dataCopy) {
+      const highlightKey = this.termType === DATermTypes.DNA_METHYLATION ? d.promoter_id : d.gene_name;
+      d.highlighted = this.config?.highlightedData?.includes(highlightKey);
+      d.significant = true;
+      this.getGenesColor(d, d.significant, controlColor, caseColor);
+      if (d.significant) {
+        this.numSignificant++;
+        const row = this.termType == DATermTypes.PROTEOME_DAP ? [{ value: roundValueAuto(d.fold_change) }, { value: roundValueAuto(d.original_p_value) }] : [
+          { value: roundValueAuto(d.fold_change) },
+          { value: roundValueAuto(d.original_p_value) },
+          { value: d.adjusted_p_value != void 0 ? roundValueAuto(d.adjusted_p_value) : "" }
+        ];
+        if (this.termType == DATermTypes.DNA_METHYLATION) {
+          row.splice(
+            1,
+            0,
+            { value: roundValueAuto(d.delta_beta) },
+            { value: roundValueAuto(d.mean_beta_control) },
+            { value: roundValueAuto(d.mean_beta_case) }
+          );
+          row.splice(0, 0, { value: formatPromoterLabel(d) }, { value: d.gene_name || "" });
+        } else if (this.termType == DATermTypes.PROTEOME_DAP) {
+          row.splice(0, 0, { value: d.gene_name || "" }, { value: d.gene || "" });
+        } else {
+          row.splice(0, 0, { value: d.gene_name || "" });
+        }
+        this.pValueTable.rows.push(row);
+        this.pValueTable.rowKeys.set(row, highlightKey);
+      } else {
+        this.numNonSignificant++;
+      }
+      d.x = d.pixel_x + this.plotX;
+      d.y = d.pixel_y + this.topPad;
+      d.radius = radius;
+    }
+    this.numSignificant = this.response.data.totalSignificantRows;
+    this.numNonSignificant = Math.max(0, this.response.data.totalRows - this.numSignificant);
+    dataCopy.sort((a, b) => a.highlighted - b.highlighted);
+    return dataCopy;
+  }
+  getGenesColor(d, significant, controlColor, caseColor) {
+    if (!d.gene_name && this.termType != DATermTypes.DNA_METHYLATION)
+      throw new Error(`Missing gene_name in data: ${JSON.stringify(d)}`);
+    if (significant) {
+      if (controlColor && caseColor) d.color = d.fold_change > 0 ? caseColor : controlColor;
+      else d.color = this.settings.defaultSignColor;
+    } else d.color = this.settings.defaultNonSignColor;
+  }
+  /** One line describing what produced this result: which groups, how many samples actually
+   * entered the model, and every setting that changes the numbers.
+   *
+   * This exists because an exported table is the artifact that outlives the session. Re-running
+   * a contrast months later and getting different counts is impossible to diagnose when the
+   * original run's group sizes and options were never written down anywhere -- the file, the
+   * screenshot and the memory of it all look identical regardless of how it was configured.
+   * Only settings that can change the result are listed; cosmetic ones are deliberately left
+   * out so the line stays readable and a difference in it always means a real difference. */
+  setProvenance() {
+    const s = this.settings;
+    const parts = [];
+    if (this.config.samplelst?.groups?.length == 2) {
+      const [g1, g2] = this.config.samplelst.groups;
+      parts.push(`group1 (control) "${g1.name}" n=${this.response.sample_size1}`);
+      parts.push(`group2 (case) "${g2.name}" n=${this.response.sample_size2}`);
+    }
+    const conf = this.config.confounderTws?.map((t) => t?.term?.name || t?.term?.id).filter(Boolean);
+    parts.push(`confounders: ${conf?.length ? conf.join(" + ") : "none"}`);
+    if (this.termType == DATermTypes.DNA_METHYLATION) {
+      parts.push(`element class: ${s.elementType || "promoter"}`);
+      parts.push(`x axis: ${s.xAxis === "delta_beta" ? "delta-beta" : "log2(fold-change)"}`);
+      parts.push(`min samples per group: ${s.minSamplesPerGroup}`);
+      parts.push(`exclude sex chromosomes: ${s.excludeSexChr ? "yes" : "no"}`);
+    } else if (this.termType == DATermTypes.GENE_EXPRESSION) {
+      parts.push(`method: ${s.method}`);
+    }
+    const onDeltaBeta = this.termType == DATermTypes.DNA_METHYLATION && s.xAxis === "delta_beta";
+    const effect = onDeltaBeta ? `|delta-beta| > ${s.deltaBetaCutoff}` : `|log2(fold-change)| > ${s.foldChangeCutoff}`;
+    parts.push(`significance: ${s.pValueType} p < ${roundValueAuto(Math.pow(10, -s.pValue))}, ${effect}`);
+    return parts.join("; ");
+  }
+  setStatsData() {
+    const tableRows = [
+      {
+        label: `Percentage of significant ${this.dataType}`,
+        value: roundValueAuto(this.numSignificant * 100 / (this.numSignificant + this.numNonSignificant))
+      },
+      {
+        label: `Number of significant ${this.dataType}`,
+        value: this.numSignificant
+      },
+      {
+        label: `Number of total ${this.dataType}`,
+        value: this.numSignificant + this.numNonSignificant
+      }
+    ];
+    if (this.termType == DATermTypes.GENE_EXPRESSION || this.termType == DATermTypes.DNA_METHYLATION) {
+      tableRows.push(
+        {
+          label: this.config.samplelst.groups[0].name + " sample size (control group)",
+          value: this.response.sample_size1
+        },
+        {
+          label: this.config.samplelst.groups[1].name + " sample size (case group)",
+          value: this.response.sample_size2
+        }
+      );
+    } else if (this.termType == DATermTypes.PROTEOME_DAP) {
+      tableRows.push(
+        {
+          label: "Control sample size",
+          value: this.response.sample_size1
+        },
+        {
+          label: "Case sample size",
+          value: this.response.sample_size2
+        }
+      );
+    }
+    if (this.response.bcv !== void 0 && this.response.bcv !== null) {
+      tableRows.push({
+        label: "Biological coefficient of variation",
+        value: roundValueAuto(this.response.bcv)
+      });
+    }
+    return tableRows;
+  }
+  setPTableColumns() {
+    if (this.termType == DATermTypes.DNA_METHYLATION) {
+      this.pValueTable.columns.splice(
+        1,
+        0,
+        { label: "\u0394\u03B2", sortable: true },
+        { label: "Mean \u03B2 (group 1)", sortable: true },
+        { label: "Mean \u03B2 (group 2)", sortable: true }
+      );
+      this.pValueTable.columns.splice(
+        0,
+        0,
+        { label: elementNoun(this.settings?.elementType).one, sortable: true },
+        { label: "Gene(s)", sortable: true }
+      );
+    } else if (this.termType == DATermTypes.PROTEOME_DAP) {
+      this.pValueTable.columns.splice(0, 0, { label: "Identifier", sortable: true }, { label: "Gene", sortable: true });
+    } else {
+      this.pValueTable.columns.splice(0, 0, { label: "Gene Name", sortable: true });
+    }
+  }
+  setUserActions() {
+    const userActions = {
+      noShow: /* @__PURE__ */ new Set()
+    };
+    if (this.termType == DATermTypes.GENE_EXPRESSION) {
+      if (this.settings.method == "edgeR" && getSampleNum(this.config) > 100) {
+        userActions.noShow.add("Confounding factors");
+      }
+      if (this.settings.method == "wilcoxon") userActions.noShow.add("Confounding factors");
+    }
+    return userActions;
+  }
+};
+
+// plots/volcano/interactions/VolcanoInteractions.ts
+var VolcanoInteractions = class {
+  constructor(app, id, dom) {
+    this.app = app;
+    this.dom = dom;
+    this.id = id;
+    this.pValueTableData = [];
+    this.data = [];
+    this.totalSignificantRows = 0;
+    this.provenance = "";
+  }
+  /** Launches a multi-term select tree
+   * On submit, dispatches a plot_edit action with the new confounders */
+  async confoundersMenu() {
+    const state = this.app.getState();
+    const config = state.plots.find((p) => p.id === this.id);
+    if (config.termType !== GENE_EXPRESSION && config.termType !== DNA_METHYLATION) return;
+    const allowedGroupNames = /* @__PURE__ */ new Set([config.samplelst.groups[0].name, config.samplelst.groups[1].name]);
+    const grpTerms = new Set(
+      (this.app?.vocabApi?.state.groups || []).filter((g) => allowedGroupNames.has(g.name)).flatMap(
+        (g) => g.filter.lst.flatMap((f) => {
+          if (f.tvs?.term) return f.tvs.term;
+          else return f.lst.map((l) => l.tvs.term);
+        })
+      )
+    );
+    const disable_terms = grpTerms.size ? Array.from(grpTerms) : [];
+    const maxNum = config.settings.volcano.method == "edgeR" ? 1 : 2;
+    const ui = new MultiTermWrapperEditUI({
+      app: this.app,
+      callback: async (tws) => {
+        this.dom.actionsTip.hide();
+        await this.app.dispatch({
+          type: "plot_edit",
+          id: this.id,
+          config: { confounderTws: tws }
+        });
+      },
+      holder: this.dom.actionsTip.d,
+      headerText: "Select confounders",
+      maxNum,
+      state,
+      twList: config.confounderTws,
+      disable_terms
+    });
+    await ui.renderUI();
+  }
+  download(termType) {
+    this.dom.actionsTip.clear().showunder(this.dom.controls.select("div").node());
+    const opts = [
+      {
+        text: "Download plot",
+        callback: () => {
+          const svg = this.dom.holder.select("svg").node();
+          to_svg(svg, `Differential ${termType} analysis volcano`, { apply_dom_styles: true });
+        }
+      },
+      {
+        // DAP volcanoes report a single FDR rather than a p-value.
+        text: termType === PROTEOME_DAP ? "Download FDR table" : "Download p-value table",
+        callback: (itemDiv) => this.downloadPvalueTable(termType, itemDiv)
+      }
+    ];
+    for (const opt of opts) {
+      const itemDiv = this.dom.actionsTip.d.append("div").attr("class", "sja_menuoption").text(opt.text);
+      itemDiv.on("click", () => opt.callback(itemDiv));
+    }
+  }
+  /* The interactive table only holds the most-significant maxInteractiveDots rows, because the
+  	dot overlay has to stay responsive. The download has no such constraint, so it should be the
+  	COMPLETE set of significant rows: when the two differ, re-request with the cap lifted and write
+  	those rows instead.
+  
+  	That second request is cheap. volcanoRender is deliberately not part of the DA cache key (see
+  	dmKeyInputs in server/routes/termdb.diffMeth.ts), so lifting the cap re-uses the cached R result
+  	and pays only for a re-render.
+  
+  	If the re-request fails the download still happens, with the capped rows and a note saying so --
+  	losing the file entirely would be a worse outcome than a disclosed subset. */
+  async downloadPvalueTable(termType, itemDiv) {
+    const date = fileDateStamp();
+    const label = termType === PROTEOME_DAP ? "fdr" : "p-value";
+    let { rows, columns } = this.pValueTableData;
+    let subsetNote;
+    const cappedNote = (reason) => `Top ${rows.length.toLocaleString()} of ${this.totalSignificantRows.toLocaleString()} significant results, selected by adjusted p-value and sorted by fold-change. This file is not the complete result set (${reason}).`;
+    if (this.totalSignificantRows > rows.length) {
+      if (!this.fetchAllRows) subsetNote = cappedNote("complete set unavailable");
+      else {
+        const restore = itemDiv?.text();
+        itemDiv?.text(`Preparing ${this.totalSignificantRows.toLocaleString()} rows...`);
+        try {
+          const full = await this.fetchAllRows();
+          rows = full.rows;
+          columns = full.columns;
+        } catch (e) {
+          subsetNote = cappedNote(`could not retrieve the complete set: ${e?.message || e}`);
+        } finally {
+          if (restore) itemDiv?.text(restore);
+        }
+      }
+    }
+    const note = [subsetNote, this.provenance && `Run: ${this.provenance}`].filter(Boolean).join(" | ");
+    downloadTable(rows, columns, `${label}-table-${date}.tsv`, note || void 0);
+  }
+  async highlightDataPoint(value) {
+    const config = this.app.getState().plots.find((p) => p.id === this.id);
+    const highlightedData = config.highlightedData.includes(value) ? config.highlightedData.filter((d) => d !== value) : [...config.highlightedData, value];
+    await this.app.dispatch({
+      type: "plot_edit",
+      id: this.id,
+      config: { highlightedData }
+    });
+  }
+  /** When clicking on a data point, launches the box plot in a separate sandbox
+   * For geneExpression, value == gene symbol */
+  launchBoxPlot(value) {
+    const config = this.app.getState().plots.find((p) => p.id === this.id);
+    const values = {};
+    for (const group of config.samplelst.groups) {
+      values[group.name] = {
+        key: group.name,
+        label: group.name,
+        list: group.values
+      };
+    }
+    const setTerm = () => {
+      if (config.termType == GENE_EXPRESSION) {
+        return {
+          q: { mode: "continuous" },
+          term: {
+            gene: value,
+            name: value,
+            type: config.termType
+          }
+        };
+      } else return config.term;
+    };
+    this.app.dispatch({
+      type: "plot_create",
+      config: {
+        chartType: "summary",
+        childType: "boxplot",
+        term: setTerm(),
+        term2: {
+          q: { groups: config.tw.q.groups, type: "custom-samplelst" },
+          term: config.tw.term
+        }
+      }
+    });
+  }
+  /** Launch a violin plot for a gene expression data point. */
+  launchViolinGeneExp(value) {
+    const config = this.app.getState().plots.find((p) => p.id === this.id);
+    this.app.dispatch({
+      type: "plot_create",
+      config: {
+        chartType: "summary",
+        childType: "violin",
+        term: {
+          q: { mode: "continuous" },
+          term: {
+            gene: value,
+            name: value,
+            type: config.termType
+          }
+        },
+        term2: {
+          q: { groups: config.tw.q.groups, type: "custom-samplelst" },
+          term: config.tw.term
+        }
+      }
+    });
+  }
+  launchGeneSetEdit() {
+    const plotConfig = this.app.getState().plots.find((p) => p.id === this.id);
+    const holder = this.dom.actionsTip.d.append("div").style("padding", "5px");
+    const limitedGenesList = plotConfig.termType === DNA_METHYLATION ? this.data.map((d) => d.promoter_id) : this.data.map((d) => d.gene_name);
+    new GeneSetEditUI({
+      holder,
+      genome: this.app.opts.genome,
+      vocabApi: this.app.vocabApi,
+      limitedGenesList,
+      geneList: plotConfig.highlightedData.map((d) => {
+        return { gene: d };
+      }),
+      customInputs: [
+        {
+          label: "Cancel highlight",
+          getDisplayStyle: () => plotConfig.highlightedData.length > 0 ? "" : "none",
+          showInput: async () => {
+            await this.app.dispatch({
+              type: "plot_edit",
+              id: this.id,
+              config: { highlightedData: [] }
+            });
+            this.dom.actionsTip.hide();
+          }
+        }
+      ],
+      callback: async (result) => {
+        const highlightedData = result.geneList.map((d) => d.gene);
+        await this.app.dispatch({
+          type: "plot_edit",
+          id: this.id,
+          config: { highlightedData }
+        });
+        this.dom.actionsTip.hide();
+      }
+    });
+  }
+  /** When clicking on a DM data point, dispatches a DMR plot that runs DMRCate
+   * analysis and renders a genome browser Block with DMR regions on their own
+   * track. */
+  async launchDmr(d) {
+    const config = this.app.getState().plots.find((p) => p.id === this.id);
+    const controlColor = config?.tw?.term?.values?.[config?.samplelst?.groups[0].name]?.color || "#ff0000";
+    const caseColor = config?.tw?.term?.values?.[config?.samplelst?.groups[1].name]?.color || "#0000ff";
+    const label = d.promoterId || `${d.chr}:${d.start}-${d.stop}`;
+    const dmrConfig = {
+      chartType: "dmr",
+      headerText: `DMR: ${label}`,
+      coordinateOverride: { chr: d.chr, start: d.start, stop: d.stop },
+      group1: config.samplelst.groups[0].values || [],
+      group2: config.samplelst.groups[1].values || [],
+      group1Name: config.samplelst.groups[0].name,
+      group2Name: config.samplelst.groups[1].name,
+      settings: {
+        colors: { group1: controlColor, group2: caseColor }
+      }
+    };
+    this.app.dispatch({
+      type: "plot_create",
+      config: dmrConfig
+    });
+  }
+  /** Launch a violin/box plot for a DNA methylation promoter.
+   * Creates a methylation term using the promoter's chr/start/stop coordinates.
+   * The tw handler fills in id and unit from termdbConfig. */
+  launchDNAMethViolin(d) {
+    const config = this.app.getState().plots.find((p) => p.id === this.id);
+    const genomicFeatureType = d.promoter_id ? "promoter" : "gene";
+    const featureName = genomicFeatureType === "gene" ? d.gene_name?.split(",")[0]?.trim() || "" : "";
+    const term = {
+      genomicFeatureType,
+      featureName,
+      type: DNA_METHYLATION,
+      chr: d.chr,
+      start: d.start,
+      stop: d.stop
+    };
+    if (genomicFeatureType === "promoter") {
+      const noun = elementNoun(config?.settings?.volcano?.elementType).one;
+      const unit = getDNAMethUnit(genomicFeatureType, this.app.vocabApi);
+      term.unit = unit;
+      term.name = getDNAMethTermName(term, unit, noun);
+    }
+    this.app.dispatch({
+      type: "plot_create",
+      config: {
+        chartType: "summary",
+        childType: "violin",
+        term: {
+          q: { mode: "continuous" },
+          term
+        },
+        term2: {
+          q: { groups: config.tw.q.groups, type: "custom-samplelst" },
+          term: config.tw.term
+        }
+      }
+    });
+  }
+  async launchDEGClustering() {
+    const geneIndex = this.pValueTableData.columns.findIndex((col) => col.label === "Gene Name");
+    const adjustedPValIndex = this.pValueTableData.columns.findIndex((col) => col.label === "Adjusted p-value");
+    const rowsSorted = [...this.pValueTableData.rows].sort((a, b) => {
+      const aQVal = Number(a[adjustedPValIndex].value);
+      const bQVal = Number(b[adjustedPValIndex].value);
+      return aQVal - bQVal;
+    });
+    const geneList = rowsSorted.slice(0, 100).map((r) => ({ gene: r[geneIndex].value }));
+    const tws = geneList.map((d) => {
+      const gene = d.gene;
+      const unit = getGEunit(this.app.vocabApi);
+      const name = `${gene} ${unit}`;
+      const term = { gene, name, type: GENE_EXPRESSION };
+      return { term, q: {} };
+    });
+    const group = { lst: tws, type: "hierCluster" };
+    const customVariable = this.app.getState().plots.find((p) => p.id === this.id).tw;
+    const annotationGroup = { lst: [customVariable] };
+    const config = {
+      chartType: "hierCluster",
+      termgroups: [group, annotationGroup],
+      dataType: GENE_EXPRESSION,
+      filter: {
+        in: true,
+        join: "",
+        type: "tvslst",
+        lst: [{ type: "tvs", tvs: { term: customVariable.term } }]
+      }
+    };
+    await this.app.dispatch({
+      type: "plot_create",
+      config: structuredClone(config)
+    });
+  }
+};
+
+// plots/volcano/view/VolcanoPlotView.ts
+var VolcanoPlotView = class {
+  constructor(dom, interactions, termType) {
+    this.dom = dom;
+    this.interactions = interactions;
+    this.termType = termType;
+    const actions = this.dom.holder.append("div").attr("id", "sjpp-volcano-actions").style("display", "block").style("z-index", 1).style("position", "relative");
+    const svg = this.dom.holder.append("svg").style("display", "inline-block").attr("id", "sjpp-volcano-svg").style("vertical-align", "top");
+    this.volcanoDom = {
+      actions,
+      svg,
+      pValueTable: void 0,
+      top: void 0,
+      xAxis: void 0,
+      xAxisLabel: void 0,
+      yAxis: void 0,
+      yAxisLabel: void 0,
+      plot: void 0
+    };
+  }
+  render(settings, viewData) {
+    this.settings = settings;
+    this.viewData = viewData;
+    const plotDim = this.viewData.plotDim;
+    this.initDom();
+    this.renderUserActions();
+    this.renderPlot(plotDim);
+    renderDataPoints(this);
+    this.renderFoldChangeLine(plotDim);
+    this.attachInteractions(plotDim);
+    if (this.settings.showPValueTable) this.renderPValueTable();
+  }
+  initDom() {
+    this.volcanoDom.actions.selectAll("*").remove();
+    this.volcanoDom.svg.selectAll("*").remove();
+    const svg = this.volcanoDom.svg;
+    this.volcanoDom.top = svg.append("g").attr("id", "sjpp-volcano-top");
+    this.volcanoDom.xAxis = svg.append("g").attr("id", "sjpp-volcano-xAxis");
+    this.volcanoDom.yAxis = svg.append("g").attr("id", "sjpp-volcano-yAxis");
+    this.volcanoDom.xAxisLabel = svg.append("text").attr("id", "sjpp-volcano-xAxisLabel").attr("text-anchor", "middle");
+    this.volcanoDom.yAxisLabel = svg.append("text").attr("id", "sjpp-volcano-yAxisLabel").attr("text-anchor", "middle");
+    this.volcanoDom.plot = svg.append("g").attr("id", "sjpp-volcano-plot");
+    this.dom.holder.select("#sjpp-volcano-pValueTable").remove();
+    if (!this.settings.showPValueTable) return;
+    this.volcanoDom.pValueTable = this.dom.holder.append("div").attr("id", "sjpp-volcano-pValueTable").attr("data-testid", "sjpp-volcano-pValueTable").style("display", "inline-block").style("vertical-align", "top");
+  }
+  renderUserActions() {
+    this.dom.actionsTip.d.style("overflow", "hidden");
+    this.volcanoDom.actions.style("margin-left", "20px").style("padding", "5px");
+    this.addActionButton(
+      "Confounding factors",
+      [DATermTypes.GENE_EXPRESSION, DATermTypes.DNA_METHYLATION],
+      () => this.interactions.confoundersMenu()
+    );
+    this.addActionButton(
+      "Highlight genes",
+      [DATermTypes.GENE_EXPRESSION, DATermTypes.SINGLECELL_CELLTYPE, DATermTypes.DNA_METHYLATION],
+      () => this.interactions.launchGeneSetEdit()
+    );
+    this.addActionButton(
+      "Statistics",
+      [DATermTypes.GENE_EXPRESSION, DATermTypes.SINGLECELL_CELLTYPE, DATermTypes.DNA_METHYLATION],
+      () => {
+        this.renderStatsMenu();
+      },
+      { whenOpen: "Hide statistics" }
+    );
+    const dmNoun = elementNoun(this.settings?.elementType);
+    const sigLabel = this.termType == DATermTypes.DNA_METHYLATION ? `Number of significant ${dmNoun.many}` : "Number of significant genes";
+    const numSigGenes = this.viewData.statsData.find((d) => d.label == sigLabel)?.value;
+    if (numSigGenes) {
+      const n = numSigGenes.toLocaleString();
+      const sigText = this.termType == DATermTypes.DNA_METHYLATION ? `${n} DM ${dmNoun.many}:` : `${n} DE genes:`;
+      this.volcanoDom.actions.append("span").text(sigText).style("margin-left", "10px").style("font-weight", "bold");
+      const pValueTableButtonText = this.settings.showPValueTable ? "Hide p-value table" : "Show p-value table";
+      this.addActionButton(
+        pValueTableButtonText,
+        [DATermTypes.GENE_EXPRESSION, DATermTypes.SINGLECELL_CELLTYPE, DATermTypes.DNA_METHYLATION],
+        async () => {
+          const showTable = !this.settings.showPValueTable;
+          await this.interactions.app.dispatch({
+            type: "plot_edit",
+            id: this.interactions.id,
+            config: { settings: { volcano: { showPValueTable: showTable } } }
+          });
+        }
+      );
+    }
+    if (numSigGenes && numSigGenes >= 3) {
+      this.addActionButton(
+        `Hierarchical clustering of ${numSigGenes > 100 ? "top 100" : numSigGenes} DE genes`,
+        [DATermTypes.GENE_EXPRESSION],
+        async () => {
+          await this.interactions.launchDEGClustering();
+        }
+      );
+    }
+  }
+  /** Use the termTypes arr to render the buttons in a consistent order.
+   *
+   * Pass `opts.whenOpen` to make the button a toggle: clicking once opens
+   * the actionsTip with the callback's content and swaps the button text
+   * to `whenOpen` ("Hide statistics", etc.); clicking again hides the tip
+   * and restores the original text. The text also restores when the tip
+   * closes via Esc or outside-click (Menu.onHide hook), and when another
+   * action button hijacks the tip (the loop below resets all toggles
+   * before showing the new content). */
+  addActionButton(text, termTypes, callback, opts) {
+    if (this.viewData.userActions.noShow.has(text)) return;
+    if (!termTypes.includes(this.termType)) return;
+    const button = this.volcanoDom.actions.append("button").attr("class", "sja_menuoption").style("margin", "3px").style("padding", "3px").text(text).on("click", async () => {
+      const whenOpen = opts?.whenOpen;
+      if (whenOpen && button.text() === whenOpen) {
+        this.dom.actionsTip.hide();
+        return;
+      }
+      this.volcanoDom.actions.selectAll('button[data-volcano-toggle-open="1"]').each(function() {
+        const b = select_default(this);
+        const closed = b.attr("data-volcano-toggle-closed");
+        if (closed) b.text(closed).attr("data-volcano-toggle-open", null);
+        this.parent_menu = void 0;
+        const eh = this.__volcanoEscHandler;
+        if (eh) {
+          document.removeEventListener("keydown", eh);
+          this.__volcanoEscHandler = void 0;
+        }
+      });
+      this.dom.actionsTip.clear().showunder(button.node());
+      if (whenOpen) {
+        button.text(whenOpen).attr("data-volcano-toggle-open", "1").attr("data-volcano-toggle-closed", text);
+        button.node().parent_menu = this.dom.actionsTip.dnode;
+        const escHandler = (e) => {
+          if (e.key === "Escape") this.dom.actionsTip.hide();
+        };
+        document.addEventListener("keydown", escHandler);
+        button.node().__volcanoEscHandler = escHandler;
+        this.dom.actionsTip.onHide = () => {
+          button.text(text).attr("data-volcano-toggle-open", null);
+          button.node().parent_menu = void 0;
+          document.removeEventListener("keydown", escHandler);
+          button.node().__volcanoEscHandler = void 0;
+        };
+      } else {
+        this.dom.actionsTip.onHide = void 0;
+      }
+      await callback();
+    });
+  }
+  renderPlot(plotDim) {
+    this.volcanoDom.svg.attr("width", plotDim.svg.width).attr("height", plotDim.svg.height);
+    this.renderTermInfo(plotDim);
+    this.volcanoDom.yAxisLabel.attr(
+      "transform",
+      `translate(${plotDim.yAxisLabel.x}, ${plotDim.yAxisLabel.y}) rotate(-90)`
+    );
+    this.setSvgSubscriptLabel(
+      this.volcanoDom.yAxisLabel,
+      "-log",
+      "10",
+      this.termType === DATermTypes.PROTEOME_DAP ? "(FDR)" : `(${this.settings.pValueType} p-value)`
+    );
+    this.volcanoDom.xAxisLabel.attr("transform", `translate(${plotDim.xAxisLabel.x}, ${plotDim.xAxisLabel.y})`);
+    if (this.termType === DATermTypes.DNA_METHYLATION && this.settings.xAxis === "delta_beta") {
+      this.volcanoDom.xAxisLabel.selectAll("*").remove();
+      this.volcanoDom.xAxisLabel.text(this.viewData.deltaBetaAxisLabel || "\u0394\u03B2 (case \u2212 control)");
+    } else {
+      this.volcanoDom.xAxisLabel.text(null);
+      this.setSvgSubscriptLabel(this.volcanoDom.xAxisLabel, "log", "2", "(fold-change)");
+    }
+    this.renderScale(plotDim.xScale);
+    this.renderScale(plotDim.yScale, true);
+    if (this.viewData.volcanoPng) {
+      this.volcanoDom.plot.append("image").attr("href", `data:image/png;base64,${this.viewData.volcanoPng}`).attr("x", plotDim.plot.x).attr("y", plotDim.plot.y).attr("width", plotDim.plot.width).attr("height", plotDim.plot.height).attr("preserveAspectRatio", "none");
+    }
+  }
+  renderTermInfo(plotDim) {
+    if (this.viewData.termInfo == void 0) return;
+    this.volcanoDom.top.attr("transform", `translate(${plotDim.top.x}, ${plotDim.top.y})`);
+    const y = this.viewData.termInfo.y;
+    const addLabel = (term) => {
+      return this.volcanoDom.top.append("text").attr("font-size", "0.9em").attr("transform", `translate(${term.x}, ${y + 10})`).text(term.label);
+    };
+    const firstTerm = this.viewData.termInfo.first;
+    addLabel(firstTerm);
+    const secondTerm = this.viewData.termInfo.second;
+    const secondLabel = addLabel(secondTerm);
+    secondLabel.attr("text-anchor", "end");
+  }
+  renderScale(scale, isLeft = false) {
+    const scaleG = this.volcanoDom[isLeft ? "yAxis" : "xAxis"].append("g").attr("transform", `translate(${scale.x}, ${scale.y})`).call(isLeft ? axisLeft(scale.scale) : axisBottom(scale.scale));
+    axisstyle({
+      axis: scaleG,
+      color: "black",
+      showline: true
+    });
+  }
+  renderFoldChangeLine(plotDim) {
+    this.volcanoDom.plot.append("line").attr("stroke", "#ccc").attr("shape-rendering", "crispEdges").attr("x1", plotDim.logFoldChangeLine.x).attr("x2", plotDim.logFoldChangeLine.x).attr("y1", plotDim.logFoldChangeLine.y1).attr("y2", plotDim.logFoldChangeLine.y2);
+  }
+  renderStatsMenu() {
+    for (const img of this.viewData.images || []) {
+      this.dom.actionsTip.d.append("img").style("display", "inline-block").style("margin-left", "10px").style("margin-top", "-30px").attr("width", 450).attr("height", 450).attr("src", img.src);
+    }
+    const tableHolder = this.dom.actionsTip.d.append("div").style("display", this.viewData.images.length == 1 ? "inline-block" : "block").style("margin", `${this.viewData.images.length == 1 ? `40px 10px` : `0px 0px`} 0px 5px`).style("vertical-align", "top");
+    const table = table2col({ holder: tableHolder });
+    for (const d of this.viewData.statsData) {
+      const [td1, td2] = table.addRow();
+      td1.text(d.label);
+      td2.style("text-align", "end").text(Number.isInteger(d.value) ? d.value.toLocaleString() : d.value);
+    }
+  }
+  renderPValueTable() {
+    if (!this.settings.showPValueTable) return;
+    const maxTableRows = 5e3;
+    const allRows = this.viewData.pValueTableData.rows;
+    const rows = allRows.length > maxTableRows ? allRows.slice(0, maxTableRows) : allRows;
+    if (allRows.length > maxTableRows) {
+      this.volcanoDom.pValueTable.append("div").style("padding", "5px 10px").style("font-size", ".8em").style("color", "#666").text(
+        `Showing top ${maxTableRows.toLocaleString()} of ${allRows.length.toLocaleString()} significant results (sorted by fold-change)`
+      );
+    }
+    renderTable({
+      columns: this.viewData.pValueTableData.columns,
+      rows,
+      div: this.volcanoDom.pValueTable,
+      showLines: true,
+      maxHeight: `${this.viewData.pValueTableData.height}px`,
+      resize: true,
+      header: { allowSort: true },
+      noRadioBtn: true,
+      noButtonCallback: (i) => {
+        const key = this.viewData.pValueTableData.rowKeys.get(rows[i]);
+        if (!key) return;
+        this.interactions.highlightDataPoint(key);
+      },
+      hoverEffects: (tr, row) => {
+        const circles = this.volcanoDom.plot.selectAll("circle").nodes();
+        const key = this.viewData.pValueTableData.rowKeys.get(row);
+        const dataKey = this.termType === DATermTypes.DNA_METHYLATION ? "promoter_id" : "gene_name";
+        const circle = circles.find((d) => d.__data__[dataKey] == key);
+        if (!circle || circle.__data__.highlighted) return;
+        let clone;
+        tr.on("mouseover", () => {
+          if (circle.__data__.highlighted || clone) return;
+          clone = this.volcanoDom.plot.node()?.appendChild(circle.cloneNode(true));
+          clone.setAttribute("fill-opacity", 0.9);
+        });
+        tr.on("mouseleave", () => {
+          if (!clone) return;
+          clone.remove();
+          clone = null;
+        });
+        this.volcanoDom.pValueTable.on("mouseover", () => {
+          selectAll_default(circles).attr("stroke-opacity", 0.075);
+        });
+        this.volcanoDom.pValueTable.on("mouseleave", () => {
+          selectAll_default(circles).attr("stroke-opacity", (d) => d.significant ? 0.35 : 0.2);
+        });
+      }
+    });
+  }
+  setSvgSubscriptLabel(textElem, prefix, subscript, suffix) {
+    textElem.text(null);
+    textElem.append("tspan").text(prefix);
+    textElem.append("tspan").attr("baseline-shift", "sub").attr("font-size", "0.7em").text(subscript);
+    textElem.append("tspan").text(suffix);
+  }
+  attachInteractions(plotDim) {
+    const points = this.viewData.pointData;
+    if (!points || points.length === 0) return;
+    const dotRadiusPx = this.viewData.plotExtent.dotRadiusPx;
+    const hitRadius = dotRadiusPx + 3;
+    const highlightRadius = Math.max(0.5, dotRadiusPx - 0.5);
+    const highlightColor = this.settings.defaultHighlightColor;
+    const hoverLayer = this.volcanoDom.plot.append("g").attr("id", "sjpp-volcano-hover").style("pointer-events", "none");
+    const cover = this.volcanoDom.plot.append("rect").attr("id", "sjpp-volcano-cover").attr("x", plotDim.plot.x).attr("y", plotDim.plot.y).attr("width", plotDim.plot.width).attr("height", plotDim.plot.height).attr("fill", "transparent").style("pointer-events", "all").style("cursor", "default");
+    const circlePath = (r) => `M${r},0 A${r},${r} 0 1,1 ${-r},0 A${r},${r} 0 1,1 ${r},0 Z`;
+    new DataPointInteractions({
+      cover,
+      hoverLayer,
+      hoverTip: this.dom.tip,
+      points,
+      // Quadtree in cover-local space — d.x/d.y are SVG-absolute, so subtract
+      // the plot rect's origin once when building the tree.
+      getX: (d) => d.x - plotDim.plot.x,
+      getY: (d) => d.y - plotDim.plot.y,
+      hitRadius,
+      toHoverSpec: (d) => ({
+        path: circlePath(highlightRadius),
+        // Hover layer lives in the same coord space as the dots (SVG-absolute),
+        // so translate by d.x/d.y — NOT the cover-local pair.
+        transform: `translate(${d.x},${d.y})`,
+        fill: highlightColor,
+        fillOpacity: 0.9,
+        stroke: "none"
+      }),
+      maxTooltipRows: this.settings.maxTooltipGenes,
+      itemNoun: "gene",
+      renderSingleHoverTooltip: (d, container) => {
+        const table = table2col({ holder: container.append("table") });
+        this.addTooltipRows(d, table);
+      },
+      buildMultiHitTableData: (dots) => this.buildMultiHitTable(dots),
+      getActions: (d) => this.getActionMenuOpts(d),
+      renderSingleHitInfo: (d, container) => {
+        const tbl = table2col({ holder: container.append("table") });
+        this.addTooltipRows(d, tbl);
+      },
+      getRowKey: (d) => d.gene_name
+    }).attach();
+  }
+  /** Whether the effect size on show is delta-beta rather than log2 fold-change. Methylation
+   * fold-change is a difference of logits: it ranks elements correctly but says nothing about
+   * how much methylation moved, so it must not be what a reader is handed next to a delta-beta
+   * axis. Read by both hover paths -- the single-point tooltip and the multi-point table -- so
+   * the two cannot disagree about which number they show. */
+  get onDeltaBeta() {
+    return this.termType === DATermTypes.DNA_METHYLATION && this.settings.xAxis === "delta_beta";
+  }
+  buildMultiHitTable(dots) {
+    const isDM = this.termType === DATermTypes.DNA_METHYLATION;
+    const isDAP = this.termType === DATermTypes.PROTEOME_DAP;
+    const effectLabel = this.onDeltaBeta ? "\u0394\u03B2" : "log\u2082(FC)";
+    const pValueType = this.settings.pValueType;
+    const pLabel = isDAP ? "FDR" : `${pValueType.charAt(0).toUpperCase()}${pValueType.slice(1)} p-value`;
+    const pField = isDAP ? "original_p_value" : `${pValueType}_p_value`;
+    const columns = isDM ? [
+      { label: elementNoun(this.settings?.elementType).one },
+      { label: "Gene(s)" },
+      { label: effectLabel, sortable: true },
+      { label: pLabel, sortable: true }
+    ] : isDAP ? [
+      { label: "Identifier" },
+      { label: "Gene" },
+      { label: effectLabel, sortable: true },
+      { label: pLabel, sortable: true }
+    ] : [{ label: "Gene" }, { label: effectLabel, sortable: true }, { label: pLabel, sortable: true }];
+    const rows = dots.map((d) => {
+      const fc = { value: roundValueAuto(this.onDeltaBeta ? d.delta_beta : d.fold_change) };
+      const pval = { value: roundValueAuto(d[pField]) };
+      if (isDM) {
+        return [{ value: formatPromoterLabel(d) }, { value: d.gene_name || "" }, fc, pval];
+      }
+      if (isDAP) {
+        return [{ value: d.gene_name || "" }, { value: d.gene || "" }, fc, pval];
+      }
+      return [{ value: d.gene_name || "" }, fc, pval];
+    });
+    return { columns, rows };
+  }
+  /** Per-data-point action menu items (Violin / DMR / Box-plot). Used by
+   * both the single-gene click flow and the multi-gene click-menu rows so
+   * the launchers stay in lock-step. */
+  getActionMenuOpts(d) {
+    const termType = this.termType;
+    const interactions = this.interactions;
+    const all = [
+      {
+        label: "Violin plot",
+        isVisible: () => termType === DATermTypes.DNA_METHYLATION || termType === DATermTypes.GENE_EXPRESSION,
+        onClick: async () => {
+          if (termType === DATermTypes.DNA_METHYLATION) interactions.launchDNAMethViolin(d);
+          if (termType === DATermTypes.GENE_EXPRESSION) interactions.launchViolinGeneExp(d.gene_name);
+        }
+      },
+      {
+        label: "DMR analysis",
+        isVisible: () => termType === DATermTypes.DNA_METHYLATION,
+        onClick: async () => {
+          const dm = d;
+          await interactions.launchDmr({
+            chr: dm.chr,
+            start: dm.start,
+            stop: dm.stop,
+            promoterId: dm.promoter_id
+          });
+        }
+      },
+      {
+        label: "Box plot",
+        isVisible: () => termType === DATermTypes.GENE_EXPRESSION,
+        onClick: async () => {
+          interactions.launchBoxPlot(d.gene_name);
+        }
+      }
+    ];
+    return all.filter((o) => o.isVisible()).map(({ label, onClick }) => ({ label, onClick }));
+  }
+  /** Populates a `table2col` instance with the standard volcano hover rows
+   * (gene/promoter, fold-change, original + adjusted p-values). */
+  addTooltipRows(d, table) {
+    if (this.termType === DATermTypes.DNA_METHYLATION) {
+      if ("promoter_id" in d)
+        addTooltipRow(table, elementNoun(this.settings?.elementType).one, formatPromoterLabel(d));
+      if (d.gene_name) addTooltipRow(table, "Gene(s)", d.gene_name);
+    } else if (this.termType === DATermTypes.PROTEOME_DAP) {
+      addTooltipRow(table, "Identifier", d.gene_name);
+      if ("gene" in d) addTooltipRow(table, "Gene", d.gene);
+    } else {
+      addTooltipRow(table, "Gene name", d.gene_name);
+    }
+    if (this.onDeltaBeta) {
+      addTooltipRow(table, "\u0394\u03B2", roundValueAuto(d.delta_beta));
+    } else {
+      addTooltipRow(table, "log<sub>2</sub>(fold-change)", roundValueAuto(d.fold_change));
+    }
+    if (this.termType === DATermTypes.PROTEOME_DAP) {
+      addTooltipRow(table, "FDR", roundValueAuto(d.original_p_value));
+    } else {
+      addTooltipRow(table, "Original p-value", roundValueAuto(d.original_p_value));
+      if (d.adjusted_p_value != void 0) addTooltipRow(table, "Adjusted p-value", roundValueAuto(d.adjusted_p_value));
+    }
+  }
+};
+function addTooltipRow(table, text, value) {
+  const [td1, td2] = table.addRow();
+  td1.html(text);
+  td2.text(value);
+}
+function renderDataPoints(self) {
+  self.volcanoDom.plot.selectAll("circle").data(self.viewData.pointData).enter().append("circle").attr("stroke", (d) => rgb(d.color).formatHex()).attr("stroke-opacity", (d) => d.significant ? 0.35 : 0.2).attr("stroke-width", 1).attr("fill", self.settings.defaultHighlightColor).attr("fill-opacity", (d) => d.highlighted ? 0.9 : 0).attr("cx", (d) => d.x).attr("cy", (d) => d.y).attr("r", (d) => d.radius).style("pointer-events", "none");
+}
+
+// plots/volcano/VolcanoControlInputs.ts
+var VolcanoControlInputs = class {
+  constructor(config, termType, elementTypes) {
+    this.config = config;
+    if (this.config.termType == GENE_EXPRESSION) this.sampleNum = getSampleNum(config);
+    this.termType = termType;
+    this.elementTypes = elementTypes || [];
+    this.inputs = [
+      {
+        // DAP volcanoes threshold a single FDR (adjusted p-value); other term types
+        // threshold a p-value.
+        label: this.config.termType == PROTEOME_DAP ? "FDR significance (-log\u2081\u2080)" : "P value significance (-log\u2081\u2080)",
+        type: "number",
+        chartType: "volcano",
+        settingsKey: "pValue",
+        title: this.config.termType == PROTEOME_DAP ? "The FDR threshold to determine statistical significance" : "The p-value threshold to determine statistical significance",
+        min: 0,
+        // 5e-324 is the smallest positive number greater than 0 representable
+        // in IEEE 64-bit floating point (i.e. javascripts native Number.MIN_VALUE)
+        // -Math.log10(5e-324) = 323.3
+        max: 323.3,
+        step: 1
+      },
+      {
+        label: "P value",
+        type: "radio",
+        chartType: "volcano",
+        settingsKey: "pValueType",
+        title: "Toggle between original and adjusted pvalues for volcano plot",
+        // DAP files carry only a single FDR, so there is nothing to toggle between.
+        getDisplayStyle: () => this.config.termType == PROTEOME_DAP ? "none" : "",
+        options: [
+          { label: "Adjusted", value: "adjusted" },
+          { label: "Original", value: "original" }
+        ]
+      },
+      /* Hidden for differential methylation: a DM run plots and thresholds on delta-beta,
+      so a log2 cutoff would set a limit in units the plot never shows. Every other term
+      type still gets it. */
+      ...this.termType === DNA_METHYLATION ? [] : [
+        {
+          label: "Fold change (log\u2082)",
+          type: "number",
+          chartType: "volcano",
+          settingsKey: "foldChangeCutoff",
+          title: "The fold change threshold to determine biological significance",
+          min: -10,
+          max: 10
+        }
+      ],
+      {
+        label: "Max interactive dots",
+        type: "number",
+        chartType: "volcano",
+        settingsKey: "maxInteractiveDots",
+        title: "Cap on the number of top-significant points the server returns as interactive overlay circles. The PNG still shows every dot.",
+        min: 0,
+        max: 2e4,
+        step: 100
+      },
+      //Preferably, keep all the display (e.g. colors, sizes, etc.) controls
+      //at the bottom of the list or at least together
+      {
+        label: "Plot height",
+        type: "number",
+        chartType: "volcano",
+        settingsKey: "height",
+        title: "Height of the plot in pixels",
+        min: 300,
+        max: 1e3
+      },
+      {
+        label: "Plot width",
+        type: "number",
+        chartType: "volcano",
+        settingsKey: "width",
+        title: "Width of the plot in pixels",
+        min: 300,
+        max: 1e3
+      },
+      {
+        label: "Significant value color",
+        type: "color",
+        chartType: "volcano",
+        title: "Default color for significant data points.",
+        settingsKey: "defaultSignColor",
+        getDisplayStyle: () => {
+          if (this.config.termType == SINGLECELL_CELLTYPE) return "none";
+          const controlColor = this.config.tw?.term?.values?.[this.config.samplelst.groups[0].name]?.color;
+          const caseColor = this.config.tw?.term?.values?.[this.config.samplelst.groups[1].name].color;
+          if (controlColor && caseColor) return "none";
+          else return "";
+        }
+      },
+      {
+        label: "Non-significant value color",
+        type: "color",
+        chartType: "volcano",
+        title: "Default color for non-significant data points.",
+        settingsKey: "defaultNonSignColor"
+      },
+      {
+        label: "Highlight color",
+        type: "color",
+        chartType: "volcano",
+        title: "Default color for highlighted data points.",
+        settingsKey: "defaultHighlightColor"
+      }
+    ];
+    this.setVolcanoControlInputs();
+  }
+  /** Add more term type specific controls here. */
+  setVolcanoControlInputs() {
+    this.addGeneExpControlInputs();
+    this.addDNAMethControlInputs();
+    this.addSingleCellCTControlInputs();
+  }
+  addGeneExpControlInputs() {
+    if (this.termType !== GENE_EXPRESSION) return;
+    const geInputs = [
+      {
+        label: "Minimum read count",
+        type: "number",
+        chartType: "volcano",
+        settingsKey: "minCount",
+        title: "The smallest number of reads required for a gene to be considered in the analysis",
+        min: 0,
+        max: 1e4
+      },
+      {
+        label: "Minimum total read count",
+        type: "number",
+        chartType: "volcano",
+        settingsKey: "minTotalCount",
+        title: "The smallest total number of reads required for a gene to be considered in the analysis",
+        min: 0,
+        max: 1e4
+      },
+      {
+        label: "CPM cutoff",
+        type: "number",
+        chartType: "volcano",
+        settingsKey: "cpmCutoff",
+        title: "The minimum normalized expression threshold to retain only genes with sufficient expression",
+        min: 0
+      },
+      {
+        label: "Method",
+        type: "radio",
+        chartType: "volcano",
+        settingsKey: "method",
+        title: "Toggle between analysis methods",
+        options: this.getMethodOptions()
+      }
+      // {
+      // 	label: 'Rank Genes by',
+      // 	type: 'radio',
+      // 	chartType: 'volcano',
+      // 	settingsKey: 'rankBy',
+      // 	title: 'Rank genes by either the absolute value of the fold change or the variance',
+      // 	options: [
+      // 		{ label: 'abs(Fold Change)', value: 'abs(foldChange)' },
+      // 		{ label: 'Variance', value: 'variance' }
+      // 	],
+      // 	//TODO: will enable this feature when there is backhand support
+      // 	getDisplayStyle: () => 'none'
+      // }
+    ];
+    this.inputs.splice(0, 0, ...geInputs);
+  }
+  addDNAMethControlInputs() {
+    if (this.termType !== DNA_METHYLATION) return;
+    const dmInputs = [
+      /* Element class comes FIRST because it is categorically different from the
+      			controls below it: those tune how the test is run, this one changes what is
+      			being tested. Promoters, eQTM blocks, and cCRE classes are different genomic
+      			features with different coordinates and different test counts, so switching
+      			produces a different analysis rather than a refined one.
+      
+      			Hidden unless the dataset offers a genuine choice -- a single class means
+      			there is nothing to pick, and a dataset using the legacy promoter-only config
+      			gets no new UI at all. */
+      ...this.elementTypes.length > 1 ? [
+        {
+          label: "Element class",
+          type: "dropdown",
+          chartType: "volcano",
+          settingsKey: "elementType",
+          options: this.elementTypes.map((e) => ({ value: e.key, label: e.label })),
+          title: "Which regulatory elements to test. This changes the features being analysed, not just the thresholds: promoters are TSS windows (-1500/+500 bp, the 450K array definition), cCRE promoters are the ~349 bp ENCODE promoter-like elements (the CpG-island core, no shores), eQTM blocks are runs of CpGs whose methylation correlates with a gene, and the other cCRE classes are ENCODE enhancer and CTCF annotations. Hit counts are not comparable across classes because the number of tests and the genes covered both differ. Narrow elements recover focal signal that a wide window averages away; wide windows do better on broad marks."
+        }
+      ] : [],
+      {
+        label: "Min samples per group",
+        type: "number",
+        chartType: "volcano",
+        settingsKey: "minSamplesPerGroup",
+        title: "Minimum non-NA samples required per group for a promoter to be tested",
+        min: 1,
+        max: 100
+      },
+      {
+        label: "Exclude sex chromosomes",
+        type: "checkbox",
+        chartType: "volcano",
+        settingsKey: "excludeSexChr",
+        boxLabel: "",
+        title: "Drop chrX/chrY promoters. Recommended for mixed-sex cohorts \u2014 X-inactivation makes chrX methylation strongly sex-dependent, so a sex-imbalanced comparison reports sex rather than the grouping variable."
+      },
+      {
+        label: "Min \u0394\u03B2",
+        type: "number",
+        chartType: "volcano",
+        settingsKey: "deltaBetaCutoff",
+        title: "Effect-size cutoff for differential methylation, applied to \u0394\u03B2. 0.1 is a 10-percentage-point change in methylation, the conventional floor for calling a region differentially methylated. Kept separate from the log\u2082 cutoff because the two are not interchangeable.",
+        min: 0,
+        max: 1,
+        step: 0.01
+      }
+    ];
+    this.inputs.splice(0, 0, ...dmInputs);
+  }
+  addSingleCellCTControlInputs() {
+    if (this.termType !== SINGLECELL_CELLTYPE) return;
+    const scctInputs = [];
+    this.inputs.splice(0, 0, ...scctInputs);
+  }
+  getMethodOptions() {
+    if (this.termType !== GENE_EXPRESSION) return;
+    const settings = this.config.settings.volcano;
+    const features = JSON.parse(sessionStorage.getItem("optionalFeatures"));
+    if (features?.runDE_methods?.length) {
+      const opts = [];
+      for (const m of features.runDE_methods) {
+        opts.push({ label: m, value: m.toLowerCase() });
+      }
+      return opts;
+    }
+    if (this.sampleNum < settings.sampleNumCutoff) {
+      return [
+        { label: "edgeR", value: "edgeR" },
+        { label: "Wilcoxon", value: "wilcoxon" },
+        { label: "Limma", value: "limma" }
+      ];
+    } else return [{ label: "Wilcoxon", value: "wilcoxon" }];
+  }
+};
+
+// plots/volcano/Volcano.ts
+var MIN_WILCOXON_GROUP_SIZE = 20;
+var Volcano = class _Volcano extends PlotBase {
+  static {
+    this.type = "volcano";
+  }
+  constructor(opts, api) {
+    super(opts, api);
+    if (this.opts.parentId) this.parentId = this.opts.parentId;
+    this.type = _Volcano.type;
+    this.components = {
+      controls: {}
+    };
+    this.termType = opts.termType;
+    const holder = opts.holder.classed("sjpp-volcano-main", true).attr("data-testid", `sjpp-volcano-main-${opts.termType}`);
+    const controls = typeof opts.controls == "object" ? opts.controls : holder || holder.append("div");
+    const error = opts.holder.append("div").attr("id", "sjpp-volcano-error").attr("data-testid", `sjpp-volcano-error-${opts.termType}`).style("opacity", 0.75);
+    this.dom = {
+      holder,
+      controls,
+      error,
+      wait: holder.append("div").attr("id", "sjpp-volcano-wait").attr("data-testid", `sjpp-volcano-wait-${opts.termType}`).style("opacity", 0.75).style("padding", "20px").text("Loading..."),
+      tip: new Menu({ padding: "" }),
+      actionsTip: new Menu({ padding: "" })
+    };
+  }
+  getState(appState) {
+    const config = appState.plots.find((p) => p.id === this.id);
+    if (!config) {
+      throw new Error(
+        `No plot with id='${this.id}' found. Did you set this.id before this.api = getComponentApi(this)?`
+      );
+    }
+    const parentConfig = this.parentId && appState.plots.find((p) => p.id === this.parentId);
+    const termfilter = getCombinedTermFilter(appState, config.filter || parentConfig?.filter);
+    return {
+      config: Object.assign({}, config, {
+        settings: {
+          volcano: config.settings.volcano
+        }
+      }),
+      termfilter
+    };
+  }
+  async setControls() {
+    const plotConfig = this.app.getState().plots.find((p) => p.id === this.id);
+    const controls = new VolcanoControlInputs(
+      plotConfig,
+      this.termType,
+      this.app.vocabApi.termdbConfig?.queries?.dnaMethylation?.elementTypes
+    );
+    this.components.controls = await controlsInit({
+      app: this.app,
+      id: this.id,
+      holder: this.dom.controls.style("display", "inline-block"),
+      inputs: controls.inputs
+    });
+    this.components.controls.on("downloadClick.volcano", () => this.interactions.download(this.termType));
+    if (plotConfig.chartType == "differentialAnalysis")
+      this.components.controls.on(
+        "helpClick.differentialAnalysis",
+        () => (
+          //Opens the page for the differential analysis wiki
+          //Can't put in parent as DA does not have a controls component
+          window.open("https://github.com/stjude/proteinpaint/wiki/Differential-analysis")
+        )
+      );
+  }
+  async init() {
+    this.interactions = new VolcanoInteractions(this.app, this.id, this.dom);
+    this.model = new VolcanoModel(this, this.termType);
+    this.view = new VolcanoPlotView(this.dom, this.interactions, this.termType);
+    await this.setControls();
+  }
+  async main() {
+    if (!this.interactions) throw new Error("Volcano Interactions not initialized");
+    if (!this.model) throw new Error("Volcano Model not initialized");
+    if (!this.view) throw new Error("Volcano View not initialized");
+    const config = structuredClone(this.state.config);
+    if (config.chartType != this.type && config.childType != this.type) return;
+    const settings = config.settings.volcano;
+    try {
+      const showWait = setTimeout(() => {
+        this.dom.wait.style("display", "block");
+      }, 500);
+      const response = await this.model.getData(config, settings);
+      this.dom.error.text("");
+      if (!response || response.error || !response.data || !response.data.volcanoPng || !response.data.totalRows) {
+        const msg = response?.error || "No data returned from server";
+        if (response?.code === "CACHE_BUSY") {
+          if (window.confirm(msg)) this.main();
+        } else sayerror(this.dom.error, msg);
+        clearTimeout(showWait);
+        this.dom.wait.style("display", "none");
+        return;
+      }
+      const viewModel = new VolcanoViewModel(config, response, settings);
+      this.interactions.pValueTableData = viewModel.viewData.pValueTableData;
+      this.interactions.data = response.data.dots;
+      this.interactions.totalSignificantRows = response.data.totalSignificantRows;
+      this.interactions.provenance = viewModel.viewData.provenance;
+      this.interactions.fetchAllRows = async () => {
+        const full = await new VolcanoModel(this, this.termType).getData(config, {
+          ...settings,
+          maxInteractiveDots: null
+        });
+        if (!full || full.error || !full.data?.dots) throw new Error(full?.error || "no rows returned");
+        return new VolcanoViewModel(config, full, settings).viewData.pValueTableData;
+      };
+      this.view.render(settings, viewModel.viewData);
+      const notes = [];
+      if (!response.data.dots.length) notes.push("No points passed the significance thresholds.");
+      const smallestGroup = Math.min(response.sample_size1, response.sample_size2);
+      if (settings.method == "wilcoxon" && smallestGroup < MIN_WILCOXON_GROUP_SIZE) {
+        const samplesLabel = uiLabel(this.app.vocabApi.termdbConfig?.uiLabels, "samples", "samples");
+        notes.push(
+          `The smaller group has ${smallestGroup.toLocaleString()} ${samplesLabel}. Wilcoxon p-values are approximated here, and a gene that is zero in most ${samplesLabel} can be assigned a p-value far smaller than its group sizes can support. Rank these results by fold change rather than by p-value magnitude, and do not compare the p-values against another analysis.`
+        );
+      }
+      if (notes.length) this.dom.error.text(notes.join(" ")).style("color", "#555");
+      clearTimeout(showWait);
+      this.dom.wait.style("display", "none");
+    } catch (e) {
+      if (e instanceof Error) console.error(e.message || e);
+      else if (e.stack) console.log(e.stack);
+      throw e;
+    }
+  }
+};
+var volcanoInit = getCompInit(Volcano);
+var componentInit = volcanoInit;
+async function getPlotConfig(opts, app) {
+  if (!opts.termType) throw new Error(".termType is required");
+  const config = {
+    settings: {
+      // app is passed through so the defaults can read the dataset's preferred starting
+      // element class from termdbConfig; opts alone does not carry it
+      volcano: getDefaultVolcanoSettings(opts.overrides, { ...opts, app })
+    },
+    highlightedData: opts.highlightedData || [],
+    termType: opts.termType
+  };
+  if (opts.termType == GENE_EXPRESSION || opts.termType == DNA_METHYLATION) {
+    if (opts.confounderTws) {
+      try {
+        for (const tw of opts.confounderTws) {
+          await fillTermWrapper(tw, app.vocabApi);
+        }
+      } catch (e) {
+        console.error(e.message || e);
+        throw new Error(`Volcano getPlotConfig() failed to fill confounder term wrappers: ${e}`);
+      }
+    }
+    Object.assign(config, {
+      confounderTws: opts.confounderTws || [],
+      samplelst: opts.samplelst
+    });
+  }
+  if (opts.termType == SINGLECELL_CELLTYPE) {
+    Object.assign(config, {
+      //TODO: Fix this logic
+      sample: opts.experimentID || opts.sample || opts.samples?.[0]?.experiments[0]?.experimentID,
+      termId: app.vocabApi.termdbConfig.queries.singleCell.DEgenes.termId,
+      //TODO: 'Cluster' is a fallback for development
+      //Should require opts.categoryName in the future
+      categoryName: opts.categoryName || "Cluster"
+    });
+  }
+  validateVolcanoSettings(config, opts);
+  return copyMerge(config, opts);
+}
+export {
+  Volcano,
+  componentInit,
+  getPlotConfig,
+  volcanoInit
+};
+//# sourceMappingURL=Volcano-KON4MOIM.js.map