@sjcrh/proteinpaint-client 2.211.0 → 2.212.0

package/dist/Volcano-DI2RLILX.js

@@ -0,0 +1,2456 @@
+import {
+  VolcanoModel,
+  getGroupColors
+} from "./chunk-4ZVOO3NI.js";
+import {
+  manhattanLayoutDefaults,
+  plotManhattan
+} from "./chunk-QWCKIRW2.js";
+import {
+  CCRE_TRACK_NAME
+} from "./chunk-WILJJPWV.js";
+import {
+  DATermTypes,
+  DataPointInteractions,
+  GeneSetEditUI,
+  MultiTermWrapperEditUI,
+  PlotBase,
+  axisstyle,
+  controlsInit,
+  downloadTable,
+  drawHoverShapes,
+  enabledTermTypes,
+  fileDateStamp,
+  fillTermWrapper,
+  getCombinedTermFilter,
+  getDNAMethTermName,
+  getDNAMethUnit,
+  getDefaultVolcanoSettings,
+  getGEunit,
+  getSampleNum,
+  renderTable,
+  sayerror,
+  table2col,
+  to_svg,
+  validateVolcanoSettings
+} from "./chunk-VHDYIOWU.js";
+import "./chunk-HJ6L54YS.js";
+import "./chunk-KV4W2ACA.js";
+import "./chunk-5WIA4KFA.js";
+import {
+  Menu
+} from "./chunk-7XZA2XR2.js";
+import "./chunk-DD3DWHUY.js";
+import "./chunk-EEB5VE2A.js";
+import "./chunk-6RRZRISL.js";
+import "./chunk-2KM4PRQM.js";
+import {
+  HYPER_COLOR,
+  HYPO_COLOR,
+  dofetch3
+} from "./chunk-RMUK3TLD.js";
+import "./chunk-HH5JKOE6.js";
+import "./chunk-RU2UHH7M.js";
+import {
+  DMR_SCAN_ELEMENT_TYPE,
+  DNA_METHYLATION,
+  GENE_EXPRESSION,
+  PROTEOME_DAP,
+  SINGLECELL_CELLTYPE,
+  bplen
+} from "./chunk-57Z4VYLM.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-6XKAOSQE.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" };
+    // de novo regions called by the genome scan, not an annotated class at all
+    case DMR_SCAN_ELEMENT_TYPE:
+      return { one: "DMR", many: "DMRs" };
+    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;
+    /** The significant count split by direction, from the server so it reflects every
+     * significant row rather than the maxInteractiveDots-capped `dots`. */
+    this.numSignificantUp = 0;
+    this.numSignificantDown = 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.termType = config.termType;
+    this.scan = response.scan;
+    this.singlePValue = config.termType == DATermTypes.PROTEOME_DAP || !!this.scan;
+    this.pValueLabel = this.setPValueLabel(settings);
+    this.pValueTable = {
+      columns: [
+        // a scan's effect size is delta-beta; the fold change is a difference of logits
+        { label: this.scan ? "\u0394\u03B2" : "log\u2082(fold-change)", barplot, sortable: true },
+        // DAP files carry a single FDR (adjusted p-value) and a scan a single p; other term
+        // types report both a raw and an adjusted p-value.
+        ...this.singlePValue ? [{ label: this.pValueLabel, 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.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.barplot);
+    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(),
+      scan: this.scan,
+      pValueLabel: this.pValueLabel,
+      singlePValue: this.singlePValue,
+      numSignificantUp: this.numSignificantUp,
+      numSignificantDown: this.numSignificantDown,
+      xOffset: this.response.data.xOffset ?? 0,
+      centered: !!this.response.data.centered,
+      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;
+    const centered = this.response.data.centered ? " \u2212 median" : "";
+    return `\u0394\u03B2${centered} (${shortenGroupName(cases)} \u2212 ${shortenGroupName(control)})`;
+  }
+  /** What the y axis and the p column are called. Named here once so the axis, the table header,
+   * the hover rows and the multi-hit table cannot disagree. */
+  setPValueLabel(settings) {
+    if (this.termType == DATermTypes.PROTEOME_DAP) return "FDR";
+    if (this.scan) return this.scan.backgroundCorrection ? "p vs matched background" : "smoothed FDR";
+    return `${settings.pValueType} p-value`;
+  }
+  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: `-log10(${this.pValueLabel})`,
+        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.singlePValue ? [
+          { value: roundValueAuto(this.scan ? d.delta_beta : 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) {
+          if (this.scan) {
+            row.splice(
+              1,
+              0,
+              // fold_change carries the peak per-CpG delta-beta on a scan row
+              { value: roundValueAuto(d.fold_change) },
+              { value: d.no_cpgs },
+              { value: d.stop - d.start },
+              ...this.scan.backgroundCorrection ? [{ value: d.excess == null ? "" : roundValueAuto(d.excess) }] : []
+            );
+          } else {
+            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);
+    this.numSignificantUp = this.response.data.totalSignificantUp ?? 0;
+    this.numSignificantDown = this.response.data.totalSignificantDown ?? 0;
+    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) {
+      const x = this.termType == DATermTypes.DNA_METHYLATION && this.settings.xAxis === "delta_beta" ? d.delta_beta - (this.response.data.xOffset ?? 0) : d.fold_change;
+      if (controlColor && caseColor) d.color = x > 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)"}`);
+      const off = this.response.data.xOffset ?? 0;
+      if (this.response.data.centered)
+        parts.push(`centered on median delta-beta ${off > 0 ? "+" : ""}${roundValueAuto(off)}`);
+      if (this.scan) {
+        parts.push(`scan: ${s.scanChromosome || "whole genome"}`);
+        parts.push(`background correction: ${s.backgroundCorrection ? "yes" : "no"}`);
+        parts.push(`min CpGs per DMR: ${s.minCpgs}`);
+      } else 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)
+      });
+    }
+    if (this.scan) tableRows.push(...this.setScanStats(this.scan));
+    return tableRows;
+  }
+  /* The whole-scan facts, every one of them over the scan as returned -- before the volcano's
+  thresholds -- and over the same set of DMRs (those meeting the CpG floor), so no two lines here
+  have different denominators. The counts the thresholds select are the three rows above. */
+  setScanStats(s) {
+    const rows = [
+      { label: "Chromosomes scanned", value: s.chromosomes.length },
+      { label: "CpGs analyzed", value: s.totalProbesAnalyzed },
+      { label: "DMRs called", value: s.called },
+      { label: `DMRs with ${s.minCpgs}+ CpGs`, value: s.kept },
+      { label: "Hypermethylated", value: s.hyper },
+      { label: "Hypomethylated", value: s.hypo }
+    ];
+    if (s.width)
+      rows.push({
+        label: "DMR width, median (IQR)",
+        value: `${bplen(s.width.median)} (${bplen(s.width.q1)} \u2013 ${bplen(s.width.q3)})`
+      });
+    if (s.regionMask)
+      rows.push({
+        label: `DMRs removed by artifact mask (${s.regionMask.sources.join(", ")}; \u2265${Math.round(
+          s.regionMask.overlapFrac * 100
+        )}% masked)`,
+        value: s.regionMask.dmrsDropped
+      });
+    const gm = s.globalMethylation;
+    if (gm) {
+      const [g1, g2] = this.config.samplelst?.groups?.map((g) => g.name) || ["group 1", "group 2"];
+      const one = s.chromosomes.length == 1 ? s.chromosomes[0] : null;
+      const meanLabel = (g) => one ? `${g} mean \u03B2 on ${one}` : `${g} genome-wide mean \u03B2`;
+      rows.push(
+        { label: meanLabel(g1), value: gm.controlMeanBeta.toFixed(4) },
+        { label: meanLabel(g2), value: gm.caseMeanBeta.toFixed(4) },
+        {
+          label: one ? `\u03B2 shift on ${one} (case \u2212 control)` : "Genome-wide \u03B2 shift (case \u2212 control)",
+          value: `${gm.shift >= 0 ? "+" : ""}${gm.shift.toFixed(4)}`
+        }
+      );
+    }
+    const bc = s.backgroundCorrection;
+    if (bc) {
+      rows.push(
+        { label: "Intergenic background windows sampled", value: bc.windows },
+        { label: `DMRs scored against background (matched on ${bc.matchedOn.join(" and ")})`, value: bc.scored },
+        { label: "DMRs unscored: stratum too thin (not plotted)", value: bc.unscored },
+        {
+          label: "DMRs moving more than matched background (p < 0.05)",
+          value: `${bc.significant.toLocaleString()} of ${bc.scored.toLocaleString()} (${(100 * bc.significant / Math.max(1, bc.scored)).toFixed(1)}%)`
+        }
+      );
+    }
+    if (s.geneBodyLoss)
+      rows.push({
+        // the correction adds the background gate, so the label must say which set this is
+        label: s.backgroundCorrection ? "Gene-body loss regions beating background \u2192 genes" : "Gene-body loss regions \u2192 genes",
+        value: `${s.geneBodyLoss.regions.toLocaleString()} \u2192 ${s.geneBodyLoss.genes.length.toLocaleString()}`
+      });
+    const pf = s.profileSummary;
+    if (pf) {
+      const pct = (v) => `${(100 * v).toFixed(1)}%`;
+      rows.push(
+        {
+          label: `Methylome profile: ${pf.bins.toLocaleString()} bins measured`,
+          value: `${pct(pf.fractionHyper)} hyper`
+        },
+        {
+          label: "Methylome profile: per-bin \u0394\u03B2, median (IQR)",
+          value: `${pf.median >= 0 ? "+" : ""}${pf.median.toFixed(4)} (${pf.q1.toFixed(4)} \u2013 ${pf.q3.toFixed(4)})`
+        },
+        { label: "Methylome profile: bins moving |\u0394\u03B2| > 0.05", value: pct(pf.fractionBeyond05) },
+        { label: "Methylome profile: bins moving |\u0394\u03B2| > 0.10", value: pct(pf.fractionBeyond10) }
+      );
+    }
+    const r = s.resources;
+    if (r) {
+      const top = r.perChromosome[0];
+      rows.push(
+        {
+          label: "Compute: workers \xD7 threads",
+          value: `${r.workers} \xD7 ${r.threadsPerWorker} (${r.workers * r.threadsPerWorker} core${r.workers * r.threadsPerWorker == 1 ? "" : "s"})`
+        },
+        { label: "Compute: wall time", value: `${(r.wallMs / 1e3).toFixed(1)} s` },
+        {
+          label: "Compute: peak memory per worker",
+          value: `${Math.round(r.peakWorkerMemoryMb).toLocaleString()} MB${top ? ` (${top.chr}, ${top.probes.toLocaleString()} CpGs)` : ""}`
+        },
+        { label: "Compute: peak memory, worker pool", value: `${Math.round(r.peakPoolMemoryMb).toLocaleString()} MB` },
+        { label: "Compute: worker CPU time", value: `${r.workerCpuSeconds.toFixed(1)} s` },
+        {
+          label: "Compute: server process",
+          value: `+${Math.round(r.nodeRssDeltaMb).toLocaleString()} MB, ${r.nodeCpuSeconds.toFixed(1)} s CPU`
+        }
+      );
+    }
+    return rows;
+  }
+  setPTableColumns() {
+    if (this.termType == DATermTypes.DNA_METHYLATION) {
+      if (this.scan) {
+        this.pValueTable.columns.splice(
+          1,
+          0,
+          { label: "Peak \u0394\u03B2", sortable: true },
+          { label: "CpGs", sortable: true },
+          { label: "Width (bp)", sortable: true },
+          ...this.scan.backgroundCorrection ? [{ label: "Excess \u0394\u03B2", sortable: true }] : []
+        );
+      } else {
+        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.scan) userActions.noShow.add("Confounding factors");
+    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/groupColors.ts
+function groupColors(config) {
+  const g = config?.samplelst?.groups;
+  if (!g?.length) return {};
+  const values = config?.tw?.term?.values;
+  const pick = (i) => values?.[g[i]?.name]?.color || g[i]?.color;
+  const out = {};
+  const c1 = pick(0);
+  const c2 = pick(1);
+  if (c1) out.group1 = c1;
+  if (c2) out.group2 = c2;
+  return out;
+}
+
+// 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, dmrSettings = {}) {
+    const config = this.app.getState().plots.find((p) => p.id === this.id);
+    const colors = groupColors(config);
+    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,
+      /* Which element matrix to drill into, for a dataset whose methylation is element-level
+      only. The server ignores it when the dataset has a CpG-level matrix, which is finer. The
+      scan is not a matrix, so a region opened from a scan names none and the server picks. */
+      elementType: config?.settings?.volcano?.elementType == DMR_SCAN_ELEMENT_TYPE ? void 0 : config?.settings?.volcano?.elementType,
+      settings: { colors, ...dmrSettings }
+    };
+    this.app.dispatch({
+      type: "plot_create",
+      config: dmrConfig
+    });
+  }
+  /* Open a genome browser on a scan's DMR, with the scan's own DMRs as a track. The scan wrote
+  every DMR it called to a bedj file in the server's cache (at the CpG floor the volcano counts
+  at), so the track is an ordinary file tk: the browser reads whatever region is in view from it,
+  including after the reader types another position into the search box. Opened on the DMR with
+  room either side. */
+  async launchScanGenomeBrowser(d, scan) {
+    const tracks = [];
+    const ccre = (this.app.opts.genome?.tracks || []).find((t) => t.name == CCRE_TRACK_NAME);
+    if (ccre) tracks.push(structuredClone(ccre));
+    if (scan.bedjFile) {
+      tracks.push({
+        type: "bedj",
+        name: "Scan DMRs",
+        // the file is under the server's bedj cache dir, not the tp dir
+        isCache: true,
+        file: scan.bedjFile,
+        stackheight: 14,
+        // drives both the fill and the block legend, which counts each class in view
+        categories: {
+          hyper: { label: "Hypermethylated DMR", color: HYPER_COLOR },
+          hypo: { label: "Hypomethylated DMR", color: HYPO_COLOR }
+        }
+      });
+    }
+    const pad = Math.max(5e3, d.stop - d.start);
+    this.app.dispatch({
+      type: "plot_create",
+      config: {
+        chartType: "genomeBrowser",
+        geneSearchResult: { chr: d.chr, start: Math.max(0, d.start - pad), stop: d.stop + pad },
+        tracks
+      }
+    });
+  }
+  /** 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/interactions/geneBodyLossDE.ts
+async function geneBodyLossTest(tip, config, vocab, scan, app) {
+  const gb = scan.geneBodyLoss;
+  const holder = tip.d;
+  const groups = (scan.matchedSamplelst || config?.samplelst)?.groups;
+  if (!groups || groups.length != 2) {
+    sayerror(holder.append("div"), "Two sample groups are required.");
+    return;
+  }
+  const div = holder.append("div").style("padding", "10px").style("max-width", "900px");
+  const wait = div.append("div").style("color", "#777").text("Running differential expression\u2026");
+  const de = getDefaultVolcanoSettings({}, { termType: "geneExpression" });
+  try {
+    const res = await dofetch3("termdb/dmrGeneDE", {
+      body: {
+        genome: vocab.genome,
+        dslabel: vocab.dslabel,
+        // `in` is part of the DE cache key, so it must travel or the two runs get separate entries
+        samplelst: { groups: groups.map((g) => ({ name: g.name, in: g.in, values: g.values })) },
+        genes: gb.genes,
+        method: de.method,
+        min_count: de.minCount,
+        min_total_count: de.minTotalCount,
+        cpm_cutoff: de.cpmCutoff,
+        filter: app.getState().termfilter?.filter,
+        filter0: app.getState().termfilter?.filter0
+      }
+    });
+    wait.remove();
+    if (res?.error) {
+      sayerror(div.append("div"), res.error);
+      return;
+    }
+    renderGeneDE(div, res, gb.regions, config, scan, app, tip);
+  } catch (e) {
+    wait.remove();
+    sayerror(div.append("div"), e?.message || String(e));
+  }
+}
+function renderGeneDE(div, res, nRegions, config, scan, app, tip) {
+  const gb = scan.geneBodyLoss;
+  const samplelst = scan.matchedSamplelst || config.samplelst;
+  const nMatched = samplelst.groups.reduce((n, g) => n + g.values.length, 0);
+  const dir = res.weightedDiff < 0 ? "lower" : "higher";
+  div.append("button").attr("class", "sja_menuoption").attr("data-testid", "sjpp-geneBodyLoss-deVolcano").style("margin", "0 0 8px").style("padding", "3px 6px").text(
+    `Open as differential expression volcano on the ${nMatched.toLocaleString()} samples with methylation, ${gb.genes.length.toLocaleString()} genes highlighted`
+  ).on("click", () => {
+    tip.hide();
+    app.dispatch({
+      type: "plot_create",
+      config: structuredClone({
+        chartType: "differentialAnalysis",
+        termType: "geneExpression",
+        state: config.state,
+        samplelst,
+        tw: config.tw,
+        highlightedData: gb.genes,
+        /* The default highlight is orange-yellow, which on a case group drawn in orange makes
+        the highlighted hits and the up-regulated genes one blob. Use the colour the
+        methylation figures give to LOSS instead: these genes are highlighted because they
+        lost gene-body methylation, so the fill says the same thing there and here. */
+        settings: { volcano: { defaultHighlightColor: HYPO_COLOR } }
+      })
+    });
+  });
+  div.append("div").style("font-weight", "bold").style("padding", "4px 0").text(
+    `Genes under a gene-body loss region are expressed ${dir} in the case group: ${res.weightedDiff >= 0 ? "+" : ""}${res.weightedDiff.toFixed(3)} log\u2082 fold change within matched gene length (p = ${res.p < 1e-3 ? res.p.toExponential(1) : res.p.toFixed(4)}).`
+  );
+  div.append("div").style("color", "#777").style("font-size", ".92em").text(
+    `${nRegions.toLocaleString()} regions \u2192 ${res.genesRequested.toLocaleString()} genes; ${res.nHit.toLocaleString()} compared against ${res.nOther.toLocaleString()} genes of matched length across ${res.strata.length} strata. ${res.genesNotInDE.toLocaleString()} were not tested by DE (low count or absent from the expression matrix) and ${res.unmatchedHits.toLocaleString()} fell in strata too thin to match. Comparing hits to all other genes instead would recover gene length.`
+  );
+  if (res.sigCount) {
+    div.append("div").style("padding", "8px 0 2px").style("font-weight", "bold").text(
+      `${res.sigCount.toLocaleString()} of these genes are differentially expressed on their own (p < 0.05), ${res.sigDown.toLocaleString()} of them down.`
+    );
+    const { caseColor, controlColor } = getGroupColors(config);
+    renderTable({
+      div: div.append("div"),
+      columns: [
+        { label: "Gene" },
+        { label: "Length (log\u2081\u2080 bp)", barplot: { axisWidth: 90, colorPositive: "#999", tickCount: 3 } },
+        { label: "log\u2082FC", barplot: { axisWidth: 110, colorNegative: controlColor, colorPositive: caseColor } },
+        { label: res.topGenes[0]?.adjusted ? "Adjusted p" : "p", align: "right" }
+      ],
+      rows: res.topGenes.map((g) => [
+        { value: g.gene },
+        { value: g.len ? Number(Math.log10(g.len).toFixed(2)) : NaN },
+        { value: Number(g.fc.toFixed(3)) },
+        { value: Number(g.p.toPrecision(2)) }
+      ]),
+      showLines: true,
+      maxHeight: "26vh",
+      download: { fileName: "gene-body-loss-genes.tsv" }
+    });
+    if (res.sigCount > res.topGenes.length)
+      div.append("div").style("color", "#777").style("font-size", ".9em").text(`Showing the ${res.topGenes.length} most significant of ${res.sigCount.toLocaleString()}.`);
+  }
+  div.append("div").style("padding", "10px 0 2px").style("font-weight", "bold").text("By gene length");
+  renderTable({
+    div: div.append("div"),
+    columns: [
+      { label: "Gene length" },
+      { label: "Genes hit", align: "right" },
+      { label: "Matched", align: "right" },
+      { label: "Median log\u2082FC, hit", align: "right" },
+      { label: "Median log\u2082FC, matched", align: "right" },
+      { label: "Difference", align: "right" }
+    ],
+    rows: res.strata.map((s) => [
+      { value: `${bplen(s.lenFrom)} \u2013 ${bplen(s.lenTo)}` },
+      { value: s.nHit.toLocaleString() },
+      { value: s.nOther.toLocaleString() },
+      { value: Number(s.medianHit.toFixed(3)) },
+      { value: Number(s.medianOther.toFixed(3)) },
+      { value: Number(s.diff.toFixed(3)) }
+    ]),
+    showLines: true,
+    maxHeight: "26vh",
+    download: { fileName: "gene-body-loss-expression.tsv" }
+  });
+}
+
+// plots/volcano/interactions/dmrGeneLink.ts
+async function dmrGeneLinkPanel(tip, config, vocab, scan, app) {
+  const div = tip.d.append("div").style("padding", "10px").style("max-width", "1000px");
+  const wait = div.append("div").style("color", "#777").text("Linking DMRs to genes and running differential expression\u2026");
+  const de = getDefaultVolcanoSettings({}, { termType: "geneExpression" });
+  const state = app.getState();
+  let res;
+  try {
+    res = await dofetch3("termdb/dmrGeneLink", {
+      body: {
+        genome: vocab.genome,
+        dslabel: vocab.dslabel,
+        cacheId: scan.cacheId,
+        minCpgs: scan.minCpgs,
+        /* The cohort the scan compared, expanded and matched server-side. The plot state's list can still
+        hold a "Not in" group as {in:false} carrying the included group's values, which DE reads as two
+        overlapping groups. */
+        samplelst: {
+          groups: (scan.matchedSamplelst || config.samplelst).groups.map((g) => ({
+            name: g.name,
+            in: g.in,
+            values: g.values
+          }))
+        },
+        method: de.method,
+        min_count: de.minCount,
+        min_total_count: de.minTotalCount,
+        cpm_cutoff: de.cpmCutoff,
+        filter: state.termfilter?.filter,
+        filter0: state.termfilter?.filter0
+      }
+    });
+  } catch (e) {
+    res = { error: e?.message || String(e) };
+  }
+  wait.remove();
+  if (res.error) return sayerror(div.append("div"), res.error);
+  div.append("div").style("font-weight", "bold").text(
+    `${res.genes.toLocaleString()} genes touched by DMRs of ${scan.minCpgs}+ CpGs (${res.links.toLocaleString()} gene-context links), read against ${res.deMethod || "differential"} expression on the samples with methylation`
+  );
+  div.append("div").style("color", "#777").style("font-size", ".92em").style("padding", "2px 0 6px").text(
+    `Promoter = within ${bplen(
+      2e3
+    )} of the TSS; body = the rest of the gene. Concordant: promoter \u0394\u03B2 and expression change in opposite directions, or gene-body \u0394\u03B2 and expression in the same direction (expression adjusted p < 0.05).`
+  );
+  const summary = table2col({ holder: div.append("div") });
+  for (const context of ["promoter", "body"]) {
+    const s = res.summary[context] || {};
+    const [td1, td2] = summary.addRow();
+    td1.text(context == "promoter" ? "Promoter DMRs" : "Gene-body DMRs");
+    td2.text(
+      ["concordant", "discordant", "no expression change", "not tested"].map((k) => `${k}: ${(s[k] || 0).toLocaleString()}`).join(" \xB7 ")
+    );
+  }
+  const rows = res.rows;
+  const litDiv = div.append("div");
+  const recordOf = /* @__PURE__ */ new Map();
+  const tableRows = rows.map((r) => {
+    const cells = [
+      { value: r.gene },
+      { value: r.context },
+      { value: `${r.dmr.chr}:${r.dmr.start}-${r.dmr.stop}` },
+      { value: Number(r.dmr.deltaBeta.toFixed(3)) },
+      { value: r.dmr.cpgs },
+      { value: r.nDmrs },
+      { value: r.fc == null ? "" : Number(r.fc.toFixed(3)) },
+      { value: r.p == null ? "" : Number(r.p.toPrecision(2)) },
+      { value: r.relationship }
+    ];
+    recordOf.set(cells, r);
+    return cells;
+  });
+  renderTable({
+    div: div.append("div"),
+    columns: [
+      { label: "Gene" },
+      { label: "Context" },
+      { label: "Strongest DMR" },
+      { label: "\u0394\u03B2", sortable: true },
+      { label: "CpGs", sortable: true },
+      { label: "DMRs", sortable: true },
+      { label: "Expression log\u2082FC", sortable: true },
+      { label: "Expression p", sortable: true },
+      { label: "Relationship" }
+    ],
+    rows: tableRows,
+    showLines: true,
+    maxHeight: "40vh",
+    header: { allowSort: true },
+    noRadioBtn: true,
+    download: { fileName: "dmr-gene-links.tsv" },
+    // a click asks PubMed about that row's gene in that row's context
+    noButtonCallback: (i) => showLiterature(litDiv, vocab, recordOf.get(tableRows[i]), disease)
+  });
+  if (rows.length < res.links)
+    div.append("div").style("color", "#777").style("font-size", ".9em").text(`Showing the first ${rows.length.toLocaleString()} of ${res.links.toLocaleString()} links.`);
+  const hint = litDiv.append("div").style("color", "#777").style("padding", "6px 0");
+  hint.append("span").text("Click a row for PubMed articles on that gene and mechanism, optionally within a disease: ");
+  const disease = hint.append("input").attr("type", "text").attr("placeholder", "e.g. myeloma").style("width", "120px");
+}
+async function showLiterature(holder, vocab, r, disease) {
+  holder.selectAll(".sjpp-dmr-lit").remove();
+  const out = holder.append("div").attr("class", "sjpp-dmr-lit");
+  const head = out.append("div").style("padding", "8px 0 2px").style("font-weight", "bold");
+  const d = String(disease?.property("value") || "").trim();
+  const within = d ? ` in ${d}` : "";
+  head.text(`PubMed: ${r.gene}, ${r.context} methylation and expression${within}\u2026`);
+  const res = await dofetch3("termdb/dmrLiterature", {
+    body: { genome: vocab.genome, dslabel: vocab.dslabel, gene: r.gene, context: r.context, disease: d }
+  }).catch((e) => ({ error: e?.message || String(e) }));
+  holder = out;
+  if (res.error) return sayerror(holder.append("div"), res.error);
+  head.text(
+    `PubMed: ${r.gene}, ${r.context} methylation and expression${within} (${res.count.toLocaleString()} article${res.count == 1 ? "" : "s"}${res.count > res.articles.length ? `, ${res.articles.length} most relevant shown` : ""}; this link is ${r.relationship})`
+  );
+  if (!res.articles.length) {
+    holder.append("div").style("color", "#777").text("No articles match. The link may be unreported rather than unsupported.");
+    return;
+  }
+  const ul = holder.append("ul").style("margin", "2px 0");
+  for (const a of res.articles) {
+    const li = ul.append("li");
+    li.append("span").text(`${a.title} ${a.journal} ${a.year}. `);
+    li.append("a").attr("href", a.doi ? `https://doi.org/${a.doi}` : `https://pubmed.ncbi.nlm.nih.gov/${a.pmid}/`).attr("target", "_blank").text(a.doi ? `doi:${a.doi}` : `PMID ${a.pmid}`);
+  }
+}
+
+// plots/volcano/view/VolcanoPlotView.ts
+var VolcanoPlotView = class {
+  constructor(dom, interactions, termType) {
+    this.linked = [];
+    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");
+    this.row = this.dom.holder.append("div").attr("id", "sjpp-volcano-row").style("display", "flex").style("align-items", "flex-start");
+    const svg = this.row.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;
+    this.linked = [];
+    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();
+    if (this.viewData.scan?.manhattan) this.renderScanManhattan();
+  }
+  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();
+    this.dom.holder.select("#sjpp-volcano-scanManhattan").remove();
+    if (!this.settings.showPValueTable) return;
+    this.volcanoDom.pValueTable = this.row.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 gb = this.viewData.scan?.geneBodyLoss;
+    if (gb?.genes.length) {
+      this.addActionButton(
+        `Expression of ${gb.genes.length.toLocaleString()} gene-body loss genes`,
+        [DATermTypes.DNA_METHYLATION],
+        () => geneBodyLossTest(
+          this.dom.actionsTip,
+          this.interactions.app.getState().plots.find((p) => p.id == this.interactions.id),
+          this.interactions.app.vocabApi.vocab,
+          this.viewData.scan,
+          this.interactions.app
+        )
+      );
+    }
+    if (this.viewData.scan?.cacheId) {
+      this.addActionButton(
+        "Genes, expression and literature",
+        [DATermTypes.DNA_METHYLATION],
+        () => dmrGeneLinkPanel(
+          this.dom.actionsTip,
+          this.interactions.app.getState().plots.find((p) => p.id == this.interactions.id),
+          this.interactions.app.vocabApi.vocab,
+          this.viewData.scan,
+          this.interactions.app
+        )
+      );
+    }
+    const dmNoun = elementNoun(this.settings?.elementType);
+    const SIG_PREFIX = "Number of significant ";
+    const sigRow = this.viewData.statsData.find((d) => d.label.startsWith(SIG_PREFIX));
+    const numSigGenes = Number(sigRow?.value ?? 0);
+    if (numSigGenes) {
+      const n = numSigGenes.toLocaleString();
+      const isDM = this.termType == DATermTypes.DNA_METHYLATION;
+      const up = this.viewData.numSignificantUp;
+      const down = this.viewData.numSignificantDown;
+      const split = up + down > 0 ? ` (${up.toLocaleString()} ${isDM ? "hyper" : "up"} / ${down.toLocaleString()} ${isDM ? "hypo" : "down"})` : "";
+      const off = this.viewData.xOffset;
+      const centered = this.viewData.centered ? `, centered on median \u0394\u03B2 ${off > 0 ? "+" : ""}${off.toFixed(3)}` : "";
+      const noun = isDM ? this.viewData.scan ? dmNoun.many : `DM ${dmNoun.many}` : this.termType == DATermTypes.GENE_EXPRESSION ? "DE genes" : `significant ${sigRow.label.slice(SIG_PREFIX.length)}`;
+      const sigText = `${n} ${noun}` + split + centered + ":";
+      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.viewData.pValueLabel})`);
+    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);
+    }
+  }
+  /* Where the DMRs are, along the whole genome: every kept DMR in the server's PNG, hyper above
+  the line and hypo below, height = evidence; the most significant thousand are live. A dot is
+  the same DMR the volcano shows, so hover and click give the volcano's own rows and actions --
+  the violin of that region and the region view, a genome browser with the called DMRs, the
+  per-CpG group means and the genes. Same lifecycle as the p-value table: redrawn from each
+  response, never left stale. */
+  /** What the scan covered, for the figure titles: the chromosome when that is all of it, and "the
+   * genome" otherwise. A one-chromosome scan describing itself as genome-wide overstates every
+   * number under it, which is what a dev host holding a subset of CpG shards produces. */
+  scanSpan() {
+    const chrs = this.viewData.scan?.chromosomes || [];
+    return chrs.length == 1 ? chrs[0] : "the genome";
+  }
+  renderScanManhattan() {
+    const { manhattan } = this.viewData.scan;
+    const div = this.row.insert("div", "#sjpp-volcano-pValueTable").attr("id", "sjpp-volcano-scanManhattan").attr("data-testid", "sjpp-volcano-scanManhattan").style("display", "block").style("margin", "0 0 0 20px");
+    const asRow = (d) => ({
+      promoter_id: `${d.chrom}:${d.start}-${d.stop}`,
+      gene_name: d.gene_name,
+      chr: d.chrom,
+      start: d.start,
+      stop: d.stop,
+      delta_beta: d.delta_beta,
+      fold_change: d.fold_change,
+      original_p_value: d.p,
+      adjusted_p_value: d.p,
+      no_cpgs: d.no_cpgs,
+      excess: d.excess
+    });
+    const g2 = this.viewData.scan.matchedSamplelst?.groups?.[1]?.name || "case group";
+    const link = {
+      points: [],
+      highlight: () => {
+      },
+      region: (d) => ({ chr: d.chrom, start: d.start, stop: d.stop })
+    };
+    const handle = plotManhattan(
+      div,
+      { png: manhattan.png, plotData: manhattan.plotData },
+      {
+        ...manhattanLayoutDefaults,
+        plotWidth: manhattan.plotWidth,
+        plotHeight: manhattan.plotHeight,
+        // the server already picked N per direction; the client must not re-cap by |y|
+        interactiveDotsCap: manhattan.plotData.points.length,
+        maxTooltipGenes: this.settings.maxTooltipGenes,
+        legendItemWidth: 130
+      },
+      void 0,
+      {
+        // names the chromosome when that is all the scan covered, rather than "the genome"
+        title: `DMRs along ${this.scanSpan()}, direction in ${g2} (top ${manhattan.interactive.toLocaleString()} per direction interactive)`,
+        // short, because it runs down a 300 px axis: the legend and title say what the sign means
+        yAxisLabel: `\xB1log\u2081\u2080(${this.viewData.pValueLabel.replace("smoothed ", "")})`,
+        legend: [
+          { label: "Hypermethylated", color: HYPER_COLOR, hollow: true },
+          { label: "Hypomethylated", color: HYPO_COLOR, hollow: true }
+        ],
+        itemNoun: "DMR",
+        renderSingleHoverTooltip: (d, container) => {
+          const table = table2col({ holder: container.append("table") });
+          this.addTooltipRows(asRow(d), table);
+          if (d.no_cpgs != null) addTooltipRow(table, "CpGs", d.no_cpgs);
+        },
+        buildMultiHitTableData: (dots) => this.buildMultiHitTable(dots.map(asRow)),
+        getActions: (d) => this.getActionMenuOpts(asRow(d)),
+        getRowKey: (d) => `${d.chrom}:${d.start}-${d.stop}`,
+        onHover: (dots) => this.mirrorHover(link, dots)
+      }
+    );
+    this.linked.push(Object.assign(link, handle));
+    this.renderMethylationProfile(this.viewData.scan.matchedSamplelst?.groups?.[0]?.name || "control group", g2);
+  }
+  /* The genome-wide methylation profile, under the DMR plot: mean beta per group in 100 kb bins,
+  	drawn as the per-bin difference. The DMR plot above shows the regions that passed a threshold;
+  	this shows every bin that was measured, which is what says whether the methylome shifted a
+  	little everywhere or a lot in a few places.
+  
+  	Same component and the same hover/click layer as the DMR plot, on the bins that moved most in
+  	each direction: 29,000 dots in a band cannot be read by eye, so a dot has to be able to say
+  	which 100 kb it is, what each group's mean beta there was, and how many CpGs that rests on.
+  	Clicking opens the browser on the bin -- the question a standout bin raises is which of the
+  	scan's DMRs are inside it, and that is the view that answers it. */
+  renderMethylationProfile(controlName, caseName) {
+    const profile = this.viewData.scan?.profile;
+    if (!profile) return;
+    const div = this.dom.holder.select("#sjpp-volcano-scanManhattan").append("div").attr("data-testid", "sjpp-volcano-methylationProfile").style("display", "block").style("margin-top", "-70px");
+    const region = (d) => ({ chr: d.chrom, start: d.pos, stop: d.pos + profile.binBp });
+    const label = (d) => `${d.chrom}:${(d.pos + 1).toLocaleString()}-${(d.pos + profile.binBp).toLocaleString()}`;
+    const link = { points: [], highlight: () => {
+    }, region };
+    const handle = plotManhattan(
+      div,
+      { png: profile.png, plotData: profile.plotData },
+      {
+        ...manhattanLayoutDefaults,
+        plotWidth: profile.plotWidth,
+        plotHeight: profile.plotHeight,
+        /* The radius the PNG was drawn at, not the shared default of 2: the hover layer is
+        placed in the PNG's own pixel space, and a 1 px mismatch in the padding stretches
+        the image against the dot coordinates the server computed. */
+        pngDotRadius: profile.dotRadius,
+        // the server already picked N per direction; the client must not re-cap by |y|
+        interactiveDotsCap: profile.plotData.points.length,
+        /* More rows than the volcano's 5. At 100 kb there are ~29,000 bins over 1,000 px, so
+        a cursor covers a median of 7 live bins on MMRF however tight the hit radius -- the
+        dots genuinely overlap at this scale. 8 shows the whole neighbourhood on a typical
+        hover instead of 5 of it. */
+        maxTooltipGenes: 8,
+        showLegend: false,
+        showDownload: false
+      },
+      void 0,
+      {
+        /* The width drawn, not the width requested: the server reports back what it binned at,
+        and a reader quoting the figure needs the two to agree. The interactive count is the
+        live dot count rather than the per-direction rule, because at a coarse width the rule
+        reaches every bin and "top 1,000 per direction" would read as a restriction. */
+        title: `${this.scanSpan() == "the genome" ? "Methylome-wide" : `${this.scanSpan()}-wide`} profile: mean \u0394\u03B2 per ${bplen(profile.binBp)} bin in ${caseName} (${profile.interactive.toLocaleString()} of ${profile.bins.toLocaleString()} bins interactive)`,
+        yAxisLabel: "\u0394\u03B2 per bin",
+        itemNoun: "bin",
+        renderSingleHoverTooltip: (d, container) => {
+          const table = table2col({ holder: container.append("table") });
+          addTooltipRow(table, "Region", label(d));
+          addTooltipRow(table, "\u0394\u03B2", roundValueAuto(d.y));
+          addTooltipRow(table, `Mean \u03B2, ${controlName}`, roundValueAuto(d.control));
+          addTooltipRow(table, `Mean \u03B2, ${caseName}`, roundValueAuto(d.case));
+          addTooltipRow(table, "CpGs measured", d.n_probes.toLocaleString());
+        },
+        buildMultiHitTableData: (dots) => ({
+          columns: [{ label: "Region" }, { label: "\u0394\u03B2", sortable: true }, { label: "CpGs", sortable: true }],
+          rows: dots.map((d) => [{ value: label(d) }, { value: roundValueAuto(d.y) }, { value: d.n_probes }])
+        }),
+        getActions: (d) => [
+          {
+            label: "Genome browser",
+            onClick: async () => await this.interactions.launchScanGenomeBrowser(region(d), this.viewData.scan)
+          }
+        ],
+        getRowKey: (d) => label(d),
+        onHover: (dots) => this.mirrorHover(link, dots)
+      }
+    );
+    this.linked.push(Object.assign(link, handle));
+  }
+  /* Ring, on every other figure, the live dots overlapping what the cursor is on. Only live dots can
+  be ringed -- the rest are pixels in a PNG -- so a hovered DMR outside another figure's interactive
+  top N has nothing to light up there. */
+  mirrorHover(src, dots) {
+    const hovered = dots.map(src.region);
+    for (const p of this.linked) {
+      if (p === src) continue;
+      p.highlight(
+        hovered.length ? p.points.filter((d) => {
+          const r = p.region(d);
+          return hovered.some((h) => h.chr == r.chr && h.start < r.stop && r.start < h.stop);
+        }) : []
+      );
+    }
+  }
+  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`;
+    const link = this.viewData.scan ? {
+      points,
+      region: (d) => ({ chr: d.chr, start: d.start, stop: d.stop }),
+      highlight: (dots) => {
+        drawHoverShapes(
+          linkedLayer,
+          dots.map((d) => ({
+            path: circlePath(dotRadiusPx + 2),
+            transform: `translate(${d.x},${d.y})`,
+            stroke: "black",
+            strokeWidth: 2
+          }))
+        );
+      }
+    } : void 0;
+    const linkedLayer = this.volcanoDom.plot.append("g").style("pointer-events", "none");
+    if (link) this.linked.push(link);
+    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,
+      ...link ? { onHover: (dots) => this.mirrorHover(link, dots) } : {},
+      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 { pValueLabel, singlePValue } = this.viewData;
+    const pLabel = pValueLabel.charAt(0).toUpperCase() + pValueLabel.slice(1);
+    const pField = singlePValue ? "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);
+        }
+      },
+      {
+        /* A scan has already called every DMR: the browser shows them from the cache, beside
+        the genes and cCREs, where the region view would re-fit the chromosome to draw the same
+        track. The region view stays for the element classes, whose hits are not yet DMRs. */
+        label: "Genome browser",
+        isVisible: () => termType === DATermTypes.DNA_METHYLATION && !!this.viewData.scan,
+        onClick: async () => {
+          const dm = d;
+          await interactions.launchScanGenomeBrowser(dm, this.viewData.scan);
+        }
+      },
+      {
+        label: "DMR analysis",
+        isVisible: () => termType === DATermTypes.DNA_METHYLATION && !this.viewData.scan,
+        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.viewData.singlePValue) {
+      addTooltipRow(table, this.viewData.pValueLabel, 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 isScan = (plot) => plot?.settings?.volcano?.elementType == DMR_SCAN_ELEMENT_TYPE;
+var VolcanoControlInputs = class {
+  constructor(config, termType, elementTypes, chromosomes) {
+    this.config = config;
+    if (this.config.termType == GENE_EXPRESSION) this.sampleNum = getSampleNum(config);
+    this.termType = termType;
+    this.elementTypes = elementTypes || [];
+    this.chromosomes = chromosomes || [];
+    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, and a DMR scan a single p, so there is nothing to
+        // toggle between
+        getDisplayStyle: (plot) => this.config.termType == PROTEOME_DAP || isScan(plot) ? "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 scanOnly = (plot) => isScan(plot) ? "" : "none";
+    const notScan = (plot) => isScan(plot) ? "none" : "";
+    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."
+        }
+      ] : [],
+      /* The scan's own knobs, shown only while the scan is the selected class. The chromosome
+      picker is a plain dropdown rather than the region search box: string2pos() turns a bare
+      "chr20" into a 20kb window at the chromosome midpoint, which would silently scan 0.005% of
+      the target. chrM is left out -- 16.5 kb of circular DNA that cannot carry a domain. */
+      {
+        label: "Scan",
+        type: "dropdown",
+        chartType: "volcano",
+        settingsKey: "scanChromosome",
+        getDisplayStyle: scanOnly,
+        options: [
+          { value: "", label: "Whole genome" },
+          ...this.chromosomes.filter((c) => c != "chrM" && c != "chrMT").map((c) => ({ value: c, label: c }))
+        ],
+        title: "Call DMRs de novo across the whole genome, or across one chromosome. A whole-genome scan takes about 45 seconds the first time and is cached after that."
+      },
+      {
+        label: "Correct for background drift",
+        type: "checkbox",
+        chartType: "volcano",
+        settingsKey: "backgroundCorrection",
+        boxLabel: "",
+        getDisplayStyle: scanOnly,
+        title: 'Score each DMR against width- and CpG-density-matched intergenic background instead of against zero, so the y axis asks "did this region move MORE than a region like it drifts" rather than "did it move". On a cohort whose whole genome shifts, the two questions have different answers -- on MMRF NSD2-high the hyper:hypo direction inverts. DMRs whose stratum holds too little background to score are counted in Statistics but not plotted. Roughly doubles the scan time.'
+      },
+      {
+        label: "Min CpGs per DMR",
+        type: "number",
+        chartType: "volcano",
+        settingsKey: "minCpgs",
+        getDisplayStyle: scanOnly,
+        min: 1,
+        max: 1e3,
+        title: "Drop DMRs called from fewer CpGs. Two-CpG calls carry the largest effect sizes and no direction (51.5% hyper on MMRF chr1, a coin flip, against 58% for 10+ CpG calls), so a \u0394\u03B2-sorted table would lead with the rows that mean least. Applied to the cached scan, so changing it redraws rather than refits."
+      },
+      /* DMRcate's region-shape knobs. Unlike the CpG floor these change the fit's output, so each
+      one refits the scan (and gets its own cache entry). */
+      {
+        label: "DMR bandwidth \u03BB (bp)",
+        type: "number",
+        chartType: "volcano",
+        settingsKey: "lambda",
+        getDisplayStyle: scanOnly,
+        min: 50,
+        max: 1e5,
+        step: 50,
+        title: "DMRcate lambda. Two things at once: the width of the Gaussian kernel that smooths per-CpG statistics along the genome, and the largest gap allowed between significant CpGs chained into one DMR. Larger values merge nearby signal into fewer, wider DMRs and recover broad domains; smaller values split them into narrow, focal regions. DMRcate recommends 1000 bp for CpG-resolution data. Changing it refits the scan (about 45 seconds genome-wide)."
+      },
+      {
+        label: "DMR kernel scaling C",
+        type: "number",
+        chartType: "volcano",
+        settingsKey: "C",
+        getDisplayStyle: scanOnly,
+        min: 0.5,
+        max: 50,
+        step: 0.5,
+        title: "DMRcate C: the kernel standard deviation is lambda / C. A larger C gives a narrower kernel, so each CpG borrows evidence from fewer neighbours: sharper boundaries and more, smaller DMRs, at the cost of power in sparse regions. A smaller C smooths further. DMRcate recommends 2. Changing it refits the scan."
+      },
+      {
+        label: "Per-CpG FDR cutoff",
+        type: "number",
+        chartType: "volcano",
+        settingsKey: "fdrCutoff",
+        getDisplayStyle: scanOnly,
+        min: 1e-4,
+        max: 0.5,
+        step: 0.01,
+        title: "The FDR a CpG's smoothed statistic must pass to take part in a DMR. Raising it lets weaker CpGs join, which extends DMRs and bridges gaps between them; lowering it keeps only the strongest CpGs, giving shorter, fewer DMRs. DMRcate's default is 0.05. This is not the volcano's significance threshold, which is applied afterwards to each DMR. Changing it refits the scan."
+      },
+      {
+        /* Display width for the methylome-wide profile only. The metric is the 100 kb bin and
+        the Statistics rows stay on it whatever this says -- this is here because 29,000 dots
+        over 1,000 px overlap however small the dot, so the native figure reads as a band. */
+        label: "Profile bin width",
+        type: "dropdown",
+        chartType: "volcano",
+        settingsKey: "profileBinBp",
+        getDisplayStyle: scanOnly,
+        options: [
+          { value: 1e5, label: "100 Kb (native)" },
+          { value: 5e5, label: "500 Kb" },
+          { value: 1e6, label: "1 Mb" },
+          { value: 5e6, label: "5 Mb" }
+        ],
+        // a <select> hands back its value as a string; the setting is a width in bp
+        processInput: (v) => Number(v),
+        title: "How wide a bin the methylome-wide profile draws. 100 kb is the width the metric is computed and reported at (Zhou 2018); the coarser widths average neighbouring bins into one dot, weighted by the CpGs each rests on, so a genome-wide shift is legible instead of hidden in a band of overlapping dots. Display only: the Statistics rows and the fraction-of-bins-moved figures stay on the 100 kb bins, and changing this redraws the cached scan rather than refitting it. The most extreme 1,000 bins per direction stay hoverable at any width."
+      },
+      {
+        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",
+        // the scan resolves its own groups (3+ per group, fixed) and has no per-element NA filter
+        getDisplayStyle: notScan,
+        min: 1,
+        max: 100
+      },
+      {
+        label: "Exclude sex chromosomes",
+        type: "checkbox",
+        chartType: "volcano",
+        settingsKey: "excludeSexChr",
+        boxLabel: "",
+        // the scan honours it too: scanChromosomes() drops chrX/chrY from a whole-genome scan
+        title: "Drop chrX and chrY (promoters, elements, or whole chromosomes from a DMR scan). 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. On a scan, autosomal DMRs are unchanged (each chromosome is fitted on its own); gene links and gene set enrichment lose the X-linked genes."
+      },
+      {
+        label: "Center \u0394\u03B2 on median",
+        type: "checkbox",
+        chartType: "volcano",
+        settingsKey: "centerDeltaBeta",
+        boxLabel: "",
+        // the background correction is the scan's version of this question
+        getDisplayStyle: notScan,
+        title: 'Move the \u0394\u03B2 origin to the median across all tested elements, so 0 is the typical element rather than no change. Use it to ask "which elements moved MORE than the typical one" \u2014 at a symmetric cutoff, a contrast whose whole distribution sits off zero clears the hyper threshold more easily than the hypo one, which skews the hyper:hypo ratio on its own. Leave it off to ask "which elements gained or lost methylation", since a genuine genome-wide shift is itself a result and centering would subtract it. The \u0394\u03B2 values in the table and its download are unaffected either way.'
+      },
+      {
+        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.app.opts.genome?.majorchrorder
+    );
+    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 {
+      this.dom.wait.text(
+        settings.elementType == DMR_SCAN_ELEMENT_TYPE ? "Scanning for DMRs... a whole-genome scan takes about 45 seconds the first time, and is cached after that." : "Loading..."
+      );
+      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-DI2RLILX.js.map