@sjcrh/proteinpaint-client 2.181.0 → 2.183.0

package/dist/Volcano-QBYYJYVW.js

@@ -0,0 +1,1185 @@
+import {
+  VolcanoModel
+} from "./chunk-Q7PYFSNU.js";
+import {
+  GeneSetEditUI,
+  MultiTermWrapperEditUI,
+  PlotBase,
+  axisstyle,
+  controlsInit,
+  downloadTable,
+  fillTermWrapper,
+  getCombinedTermFilter,
+  getDefaultVolcanoSettings,
+  getGEunit,
+  getSampleNum,
+  renderTable,
+  sayerror,
+  table2col,
+  to_svg,
+  validateVolcanoSettings
+} from "./chunk-OXJ2TWDO.js";
+import "./chunk-HJ6L54YS.js";
+import "./chunk-V6DLLX4N.js";
+import "./chunk-7RN3L2BX.js";
+import {
+  Menu
+} from "./chunk-A6TQGNDQ.js";
+import "./chunk-HYZG6OPC.js";
+import "./chunk-FN5XPUPH.js";
+import "./chunk-LSEFWW72.js";
+import "./chunk-5EF5U7MX.js";
+import "./chunk-2K5DSRBJ.js";
+import "./chunk-UCLS2SVB.js";
+import {
+  copyMerge,
+  getCompInit
+} from "./chunk-MVTCBVSX.js";
+import "./chunk-SEQLC4AD.js";
+import {
+  roundValueAuto
+} from "./chunk-L4QG7XZE.js";
+import "./chunk-DQC5FFGV.js";
+import "./chunk-KQMEJUWI.js";
+import "./chunk-UJU3Q7QJ.js";
+import "./chunk-WGL6FIUE.js";
+import {
+  DNA_METHYLATION,
+  GENE_EXPRESSION,
+  SINGLECELL_CELLTYPE
+} from "./chunk-6ITDJ5UR.js";
+import "./chunk-XYFDBYOY.js";
+import "./chunk-TV74I3Y5.js";
+import "./chunk-IH7ILDJS.js";
+import {
+  axisBottom,
+  axisLeft
+} from "./chunk-LOZEKOES.js";
+import "./chunk-TOU7EVFQ.js";
+import {
+  linear
+} from "./chunk-OAWQ6LOO.js";
+import "./chunk-SEEYV6P2.js";
+import {
+  selectAll_default,
+  select_default
+} from "./chunk-NDWTN4U5.js";
+import {
+  rgb
+} from "./chunk-OMR2DT66.js";
+import "./chunk-HFNDKYVF.js";
+
+// plots/volcano/viewModel/VolcanoViewModel.ts
+var VolcanoViewModel = class {
+  constructor(config, response, settings) {
+    this.numSignificant = 0;
+    this.numNonSignificant = 0;
+    this.minLogFoldChange = 0;
+    this.maxLogFoldChange = 0;
+    //Used for the y axis domain
+    this.minLogPValue = 0;
+    this.maxLogPValue = 0;
+    //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.pValueCutoff = settings.pValue;
+    this.plotX = this.horizPad + this.offset * 2;
+    const controlColor = this.config?.tw?.term?.values?.[this.config?.samplelst?.groups[0].name]?.color || "red";
+    const caseColor = this.config?.tw?.term?.values?.[this.config?.samplelst?.groups[1].name].color || "blue";
+    const barplot = caseColor && controlColor ? { colorNegative: controlColor, colorPositive: caseColor } : {};
+    this.pValueTable = {
+      columns: [
+        { label: "log\u2082(fold-change)", barplot, sortable: true },
+        { label: "Original p-value", sortable: true },
+        { label: "Adjusted p-value", sortable: true }
+      ],
+      //Arr set in setPointData()
+      rows: [],
+      height: settings.height + this.topPad
+    };
+    this.settings = settings;
+    this.termType = config.termType;
+    this.dataType = this.setDataType();
+    this.setMinMaxValues();
+    const plotDim = this.setPlotDimensions();
+    this.setPTableColumns();
+    const pointData = this.setPointData(plotDim, controlColor, caseColor);
+    const foldChangeIdx = this.pValueTable.columns.findIndex((c) => c.label.includes("log\u2082(fold-change)"));
+    this.pValueTable.rows.sort((a, b) => b[foldChangeIdx].value - a[foldChangeIdx].value);
+    this.viewData = {
+      images: response.images || [],
+      termInfo: this.setTermInfo(plotDim),
+      plotDim,
+      pointData,
+      pValueTableData: this.pValueTable,
+      statsData: this.setStatsData(),
+      userActions: this.setUserActions()
+    };
+  }
+  setDataType() {
+    if (this.termType == GENE_EXPRESSION) return "genes";
+    else if (this.termType == DNA_METHYLATION) return "promoters";
+    else if (this.termType == SINGLECELL_CELLTYPE) return "genes";
+    else throw new Error(`Unknown termType: ${this.termType}`);
+  }
+  setMinMaxValues() {
+    for (const d of this.response.data) {
+      this.minLogFoldChange = Math.min(this.minLogFoldChange, d.fold_change);
+      this.maxLogFoldChange = Math.max(this.maxLogFoldChange, d.fold_change);
+      if (d[`${this.settings.pValueType}_p_value`] != 0) {
+        this.minLogPValue = Math.min(this.minLogPValue, -Math.log10(d[`${this.settings.pValueType}_p_value`]));
+        this.maxLogPValue = Math.max(this.maxLogPValue, -Math.log10(d[`${this.settings.pValueType}_p_value`]));
+        this.minNonZeroPValue = Math.min(this.minNonZeroPValue, d[`${this.settings.pValueType}_p_value`]);
+      }
+    }
+  }
+  setPlotDimensions() {
+    const xScale = linear().domain([this.minLogFoldChange, this.maxLogFoldChange]).range([0, this.settings.width]);
+    const yScale = linear().domain([this.minLogPValue, this.maxLogPValue]).range([this.settings.height, 0]);
+    return {
+      svg: {
+        //20 is for the term info above the plot
+        height: this.settings.height + this.topPad + this.bottomPad * 2 + this.offset * 3,
+        width: this.settings.width + this.horizPad * 2
+      },
+      top: {
+        x: this.plotX,
+        y: 5
+      },
+      xAxisLabel: {
+        x: this.horizPad + this.settings.width / 2 + this.offset,
+        y: this.topPad + this.settings.height + this.bottomPad + this.offset
+      },
+      xScale: {
+        scale: xScale,
+        x: this.plotX,
+        y: this.settings.height + this.topPad + this.offset * 2
+      },
+      yAxisLabel: {
+        text: `-log10(${this.settings.pValueType} P value)`,
+        x: this.horizPad / 3,
+        y: this.topPad + this.settings.height / 2
+      },
+      yScale: {
+        scale: yScale,
+        x: this.horizPad,
+        y: this.topPad
+      },
+      plot: {
+        height: this.settings.height,
+        width: this.settings.width,
+        x: this.plotX,
+        y: this.topPad
+      },
+      logFoldChangeLine: {
+        x: xScale(0) + this.plotX,
+        y1: this.topPad,
+        y2: this.settings.height + this.offset * 4
+      }
+    };
+  }
+  setTermInfo(plotDim) {
+    if (this.termType != GENE_EXPRESSION && this.termType != DNA_METHYLATION) return;
+    const getLabel = (name) => {
+      if (name.length >= 25) return name.substring(0, 20) + "...";
+      return name;
+    };
+    return {
+      //Set slightly above the plot
+      y: plotDim.top.y + 10,
+      first: {
+        // color: controlColor || this.settings.defaultSignColor,
+        label: getLabel(`${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: getLabel(`${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 = Math.max(this.settings.width, this.settings.height) / 80;
+    const dataCopy = structuredClone(this.response.data);
+    for (const d of dataCopy) {
+      const highlightKey = this.termType === DNA_METHYLATION ? d.promoter_id : d.gene_name;
+      d.highlighted = this.config?.highlightedData?.includes(highlightKey);
+      d.significant = this.isSignificant(d);
+      this.getGenesColor(d, d.significant, controlColor, caseColor);
+      if (d.significant) {
+        this.numSignificant++;
+        const row = [
+          { value: roundValueAuto(d.fold_change) },
+          { value: roundValueAuto(d.original_p_value) },
+          { value: roundValueAuto(d.adjusted_p_value) }
+        ];
+        if (this.termType == DNA_METHYLATION) {
+          row.splice(0, 0, { value: d.promoter_id || "" }, { value: d.gene_name || "" });
+        } else {
+          row.splice(0, 0, { value: d.gene_name || "" });
+        }
+        this.pValueTable.rows.push(row);
+      } else {
+        this.numNonSignificant++;
+      }
+      d.x = plotDim.xScale.scale(d.fold_change) + this.plotX;
+      const y = d[`${this.settings.pValueType}_p_value`] == 0 ? this.minNonZeroPValue : d[`${this.settings.pValueType}_p_value`];
+      d.y = plotDim.yScale.scale(-Math.log10(y)) + this.topPad;
+      d.radius = radius;
+    }
+    dataCopy.sort((a, b) => a.highlighted - b.highlighted);
+    return dataCopy;
+  }
+  isSignificant(d) {
+    return -Math.log10(d[`${this.settings.pValueType}_p_value`]) > this.pValueCutoff && Math.abs(d.fold_change) > this.settings.foldChangeCutoff;
+  }
+  getGenesColor(d, significant, controlColor, caseColor) {
+    if (!d.gene_name && this.termType != DNA_METHYLATION)
+      throw new Error(`Missing gene_name in data: ${JSON.stringify(d)}`);
+    if (significant) {
+      if (controlColor && caseColor) d.color = d.fold_change > 0 ? caseColor : controlColor;
+      else d.color = this.settings.defaultSignColor;
+    } else d.color = this.settings.defaultNonSignColor;
+  }
+  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 == GENE_EXPRESSION || this.termType == 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
+        }
+      );
+    }
+    if (this.response.bcv !== void 0 && this.response.bcv !== null) {
+      tableRows.push({
+        label: "Biological coefficient of variation",
+        value: roundValueAuto(this.response.bcv)
+      });
+    }
+    return tableRows;
+  }
+  setPTableColumns() {
+    if (this.termType == DNA_METHYLATION) {
+      this.pValueTable.columns.splice(0, 0, { label: "Promoter", sortable: true }, { label: "Gene(s)", sortable: true });
+    } else {
+      this.pValueTable.columns.splice(0, 0, { label: "Gene Name", sortable: true });
+    }
+  }
+  setUserActions() {
+    const userActions = {
+      noShow: /* @__PURE__ */ new Set()
+    };
+    if (this.termType == GENE_EXPRESSION) {
+      if (this.settings.method == "edgeR" && getSampleNum(this.config) > 100) {
+        userActions.noShow.add("Confounding factors");
+      }
+      if (this.settings.method == "wilcoxon") userActions.noShow.add("Confounding factors");
+    }
+    return userActions;
+  }
+};
+
+// plots/volcano/interactions/VolcanoInteractions.ts
+var VolcanoInteractions = class {
+  constructor(app, id, dom) {
+    this.app = app;
+    this.dom = dom;
+    this.id = id;
+    this.pValueTableData = [];
+    this.data = [];
+  }
+  /** 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();
+  }
+  clearDom() {
+    this.dom.holder.selectAll('div[id="sjpp-volcano-actions"]').remove();
+    this.dom.holder.selectAll('svg[id="sjpp-volcano-svg"]').remove();
+    this.dom.holder.selectAll('div[id="sjpp-volcano-stats"]').remove();
+    this.dom.holder.selectAll('div[id="sjpp-volcano-pValueTable"]').remove();
+    this.dom.holder.selectAll('div[id="sjpp-volcano-images"]').remove();
+    this.dom.error.selectAll("*").remove();
+  }
+  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 });
+        }
+      },
+      {
+        text: "Download p value table",
+        callback: () => {
+          downloadTable(this.pValueTableData.rows, this.pValueTableData.columns);
+        }
+      }
+    ];
+    for (const opt of opts) {
+      this.dom.actionsTip.d.append("div").attr("class", "sja_menuoption").text(opt.text).on("click", opt.callback);
+    }
+  }
+  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 */
+  async launchBoxPlot(value) {
+    const config = this.app.getState().plots.find((p) => p.id === this.id);
+    if (config.termType != GENE_EXPRESSION) return;
+    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. */
+  async launchViolinGeneExp(value) {
+    const config = this.app.getState().plots.find((p) => p.id === this.id);
+    if (config.termType != GENE_EXPRESSION) return;
+    this.app.dispatch({
+      type: "plot_create",
+      config: {
+        chartType: "summary",
+        childType: "violin",
+        term: {
+          q: { mode: "continuous" },
+          term: {
+            gene: value,
+            name: value,
+            type: config.termType
+          }
+        },
+        term2: {
+          q: { groups: config.tw.q.groups, type: "custom-samplelst" },
+          term: config.tw.term
+        }
+      }
+    });
+  }
+  launchGeneSetEdit() {
+    const plotConfig = this.app.getState().plots.find((p) => p.id === this.id);
+    const holder = this.dom.actionsTip.d.append("div").style("padding", "5px");
+    const limitedGenesList = plotConfig.termType === DNA_METHYLATION ? this.data.map((d) => d.promoter_id) : this.data.map((d) => d.gene_name);
+    new GeneSetEditUI({
+      holder,
+      genome: this.app.opts.genome,
+      vocabApi: this.app.vocabApi,
+      limitedGenesList,
+      geneList: plotConfig.highlightedData.map((d) => {
+        return { gene: d };
+      }),
+      customInputs: [
+        {
+          label: "Cancel highlight",
+          getDisplayStyle: () => plotConfig.highlightedData.length > 0 ? "" : "none",
+          showInput: async () => {
+            await this.app.dispatch({
+              type: "plot_edit",
+              id: this.id,
+              config: { highlightedData: [] }
+            });
+            this.dom.actionsTip.hide();
+          }
+        }
+      ],
+      callback: async (result) => {
+        const highlightedData = result.geneList.map((d) => d.gene);
+        await this.app.dispatch({
+          type: "plot_edit",
+          id: this.id,
+          config: { highlightedData }
+        });
+        this.dom.actionsTip.hide();
+      }
+    });
+  }
+  /** When clicking on a DM data point, dispatches a DMR plot that runs DMRCate
+   * analysis and renders a genome browser Block with DMR regions on their own
+   * track. */
+  async launchDmr(d) {
+    const config = this.app.getState().plots.find((p) => p.id === this.id);
+    if (config.termType !== DNA_METHYLATION) return;
+    const controlColor = config?.tw?.term?.values?.[config?.samplelst?.groups[0].name]?.color || "#ff0000";
+    const caseColor = config?.tw?.term?.values?.[config?.samplelst?.groups[1].name]?.color || "#0000ff";
+    const label = d.promoterId || `${d.chr}:${d.start}-${d.stop}`;
+    const dmrConfig = {
+      chartType: "dmr",
+      headerText: `DMR: ${label}`,
+      coordinateOverride: { chr: d.chr, start: d.start, stop: d.stop },
+      group1: config.samplelst.groups[0].values || [],
+      group2: config.samplelst.groups[1].values || [],
+      group1Name: config.samplelst.groups[0].name,
+      group2Name: config.samplelst.groups[1].name,
+      settings: {
+        colors: { group1: controlColor, group2: caseColor }
+      }
+    };
+    this.app.dispatch({
+      type: "plot_create",
+      config: dmrConfig
+    });
+  }
+  /** Launch a violin/box plot for a DNA methylation promoter.
+   * Creates a methylation term using the promoter's chr/start/stop coordinates.
+   * The tw handler fills in id and unit from termdbConfig. */
+  launchViolin(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() || "" : "";
+    this.app.dispatch({
+      type: "plot_create",
+      config: {
+        chartType: "summary",
+        childType: "violin",
+        term: {
+          q: { mode: "continuous" },
+          term: {
+            genomicFeatureType,
+            featureName,
+            type: DNA_METHYLATION,
+            chr: d.chr,
+            start: d.start,
+            stop: d.stop
+          }
+        },
+        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 };
+      const tw = { term, q: {} };
+      return tw;
+    });
+    const group = { lst: tws, type: "hierCluster" };
+    const customVariable = this.app.getState().plots.find((p) => p.id === this.id).tw;
+    const annotationGroup = { lst: [customVariable] };
+    const config = {
+      chartType: "hierCluster",
+      termgroups: [group, annotationGroup],
+      dataType: GENE_EXPRESSION,
+      filter: {
+        in: true,
+        join: "",
+        type: "tvslst",
+        lst: [{ type: "tvs", tvs: { term: customVariable.term } }]
+      }
+    };
+    await this.app.dispatch({
+      type: "plot_create",
+      config: structuredClone(config)
+    });
+  }
+};
+
+// plots/volcano/view/DataPointMouseEvents.ts
+var DataPointMouseEvents = class {
+  constructor(d, circle, hoverTip, clickTip, interactions, termType) {
+    this.termType = termType;
+    circle.on("mouseover", () => {
+      circle.attr("fill-opacity", 0.9);
+      hoverTip.clear().showunder(circle.node());
+      const table = table2col({ holder: hoverTip.d.append("table") });
+      this.addTooltipRows(d, table);
+    });
+    circle.on("mouseout", () => {
+      hoverTip.hide();
+      if (d.highlighted) return;
+      circle.attr("fill-opacity", 0);
+    });
+    circle.on("click", () => {
+      hoverTip.hide();
+      clickTip.onHide = () => {
+        if (!d.highlighted) circle.attr("fill-opacity", 0);
+      };
+      clickTip.clear().showunder(circle.node());
+      const table = table2col({ holder: clickTip.d.append("table") });
+      this.addTooltipRows(d, table);
+      const menuDiv = clickTip.d.append("div").style("padding", "5px");
+      if (termType === DNA_METHYLATION) {
+        const dm = d;
+        menuDiv.append("div").attr("class", "sja_menuoption").text("Violin plot").on("click", () => {
+          clickTip.hide();
+          interactions.launchViolin(dm);
+        });
+        menuDiv.append("div").attr("class", "sja_menuoption").text("DMR analysis").on("click", async () => {
+          clickTip.hide();
+          await interactions.launchDmr({
+            chr: dm.chr,
+            start: dm.start,
+            stop: dm.stop,
+            promoterId: dm.promoter_id
+          });
+        });
+      } else {
+        menuDiv.append("div").attr("class", "sja_menuoption").text("Violin plot").on("click", async () => {
+          clickTip.hide();
+          await interactions.launchViolinGeneExp(d.gene_name);
+        });
+        menuDiv.append("div").attr("class", "sja_menuoption").text("Box plot").on("click", async () => {
+          clickTip.hide();
+          await interactions.launchBoxPlot(d.gene_name);
+        });
+      }
+    });
+  }
+  addTooltipRow(table, text, value) {
+    const [td1, td2] = table.addRow();
+    td1.html(text);
+    td2.text(value);
+  }
+  addTooltipRows(d, table) {
+    if (this.termType === DNA_METHYLATION) {
+      if ("promoter_id" in d) this.addTooltipRow(table, "Promoter", d.promoter_id);
+      if (d.gene_name) this.addTooltipRow(table, "Gene(s)", d.gene_name);
+    } else {
+      this.addTooltipRow(table, "Gene name", d.gene_name);
+    }
+    this.addTooltipRow(table, "log<sub>2</sub>(fold-change)", roundValueAuto(d.fold_change));
+    this.addTooltipRow(table, "Original p-value", roundValueAuto(d.original_p_value));
+    this.addTooltipRow(table, "Adjusted p-value", roundValueAuto(d.adjusted_p_value));
+  }
+};
+
+// plots/volcano/view/VolcanoPlotView.ts
+var VolcanoPlotView = class {
+  constructor(dom, settings, viewData, interactions, termType) {
+    this.dom = dom;
+    this.interactions = interactions;
+    this.settings = settings;
+    this.viewData = viewData;
+    const actions = this.dom.holder.append("div").attr("id", "sjpp-volcano-actions").style("display", "block").style("z-index", 1).style("position", "relative");
+    const svg = this.dom.holder.append("svg").style("display", "inline-block").attr("id", "sjpp-volcano-svg").style("vertical-align", "top");
+    this.volcanoDom = {
+      actions,
+      svg,
+      top: svg.append("g").attr("id", "sjpp-volcano-top"),
+      xAxis: svg.append("g").attr("id", "sjpp-volcano-xAxis"),
+      yAxis: svg.append("g").attr("id", "sjpp-volcano-yAxis"),
+      xAxisLabel: svg.append("text").attr("id", "sjpp-volcano-xAxisLabel").attr("text-anchor", "middle"),
+      yAxisLabel: svg.append("text").attr("id", "sjpp-volcano-yAxisLabel").attr("text-anchor", "middle"),
+      plot: svg.append("g").attr("id", "sjpp-volcano-plot"),
+      pValueTable: this.dom.holder.append("div").attr("id", "sjpp-volcano-pValueTable").style("display", "none")
+    };
+    this.termType = termType;
+    const plotDim = this.viewData.plotDim;
+    this.renderUserActions();
+    this.renderPlot(plotDim);
+    renderDataPoints(this);
+    this.renderFoldChangeLine(plotDim);
+    this.renderStatsMenu();
+    this.renderPValueTable();
+  }
+  renderUserActions() {
+    this.dom.actionsTip.d.style("overflow", "hidden");
+    this.volcanoDom.actions.style("margin-left", "20px").style("padding", "5px");
+    this.addActionButton(
+      "Confounding factors",
+      [GENE_EXPRESSION, DNA_METHYLATION],
+      () => this.interactions.confoundersMenu()
+    );
+    this.addActionButton(
+      "Highlight genes",
+      [GENE_EXPRESSION, SINGLECELL_CELLTYPE, DNA_METHYLATION],
+      () => this.interactions.launchGeneSetEdit()
+    );
+    this.addActionButton("Statistics", [GENE_EXPRESSION, SINGLECELL_CELLTYPE, DNA_METHYLATION], () => {
+      this.renderStatsMenu();
+    });
+    const sigLabel = this.termType == DNA_METHYLATION ? "Number of significant promoters" : "Number of significant genes";
+    const numSigGenes = this.viewData.statsData.find((d) => d.label == sigLabel)?.value;
+    if (numSigGenes) {
+      const sigText = this.termType == DNA_METHYLATION ? `${numSigGenes} DM promoters:` : `${numSigGenes} DE genes:`;
+      this.volcanoDom.actions.append("span").text(sigText).style("margin-left", "10px").style("font-weight", "bold");
+      this.addActionButton("Show p-value table", [GENE_EXPRESSION, SINGLECELL_CELLTYPE, DNA_METHYLATION], () => {
+        this.volcanoDom.pValueTable.style(
+          "display",
+          this.volcanoDom.pValueTable.style("display") == "none" ? "inline-block" : "none"
+        );
+      });
+    }
+    if (numSigGenes && numSigGenes >= 3) {
+      this.addActionButton(
+        `Hierarchical clustering of ${numSigGenes > 100 ? "top 100" : numSigGenes} DE genes`,
+        [GENE_EXPRESSION],
+        async () => {
+          await this.interactions.launchDEGClustering();
+        }
+      );
+    }
+  }
+  /** Use the termTypes arr to render the buttons in a consistent order */
+  addActionButton(text, termTypes, callback) {
+    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", () => {
+      this.dom.actionsTip.clear().showunder(button.node());
+      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.settings.pValueType} p-value)`);
+    this.volcanoDom.xAxisLabel.attr("transform", `translate(${plotDim.xAxisLabel.x}, ${plotDim.xAxisLabel.y})`);
+    this.setSvgSubscriptLabel(this.volcanoDom.xAxisLabel, "log", "2", "(fold-change)");
+    this.renderScale(plotDim.xScale);
+    this.renderScale(plotDim.yScale, true);
+    this.volcanoDom.plot.append("rect").attr("width", plotDim.plot.width).attr("height", plotDim.plot.height).attr("stroke", "#ededed").attr("fill", "transparent").attr("shape-rendering", "crispEdges").attr("transform", `translate(${plotDim.plot.x}, ${plotDim.plot.y})`);
+  }
+  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(d.value);
+    }
+  }
+  renderPValueTable() {
+    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 gene = this.viewData.pValueTableData.rows[i][0].value;
+        if (!gene) return;
+        this.interactions.highlightDataPoint(gene);
+      },
+      hoverEffects: (tr, row) => {
+        const circles = this.volcanoDom.plot.selectAll("circle").nodes();
+        const dataKey = this.termType === DNA_METHYLATION ? "promoter_id" : "gene_name";
+        const circle = circles.find((d) => d.__data__[dataKey] == row[0].value);
+        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);
+  }
+};
+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", (d) => d.significant ? 1.5 : 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).each(function(d) {
+    const circle = select_default(this);
+    new DataPointMouseEvents(d, circle, self.dom.hoverTip, self.dom.clickTip, self.interactions, self.termType);
+  });
+}
+
+// plots/volcano/VolcanoControlInputs.ts
+var VolcanoControlInputs = class {
+  constructor(config, termType) {
+    this.config = config;
+    if (this.config.termType == GENE_EXPRESSION) this.sampleNum = getSampleNum(config);
+    this.termType = termType;
+    this.inputs = [
+      {
+        label: "P value significance (-log\u2081\u2080)",
+        type: "number",
+        chartType: "volcano",
+        settingsKey: "pValue",
+        title: "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",
+        options: [
+          { label: "Adjusted", value: "adjusted" },
+          { label: "Original", value: "original" }
+        ]
+      },
+      {
+        label: "Fold change (log\u2082)",
+        type: "number",
+        chartType: "volcano",
+        settingsKey: "foldChangeCutoff",
+        title: "The fold change threshold to determine biological significance",
+        min: -10,
+        max: 10
+      },
+      //Preferably, keep all the display (e.g. colors, sizes, etc.) controls
+      //at the bottom of the list or at least together
+      {
+        label: "Plot height",
+        type: "number",
+        chartType: "volcano",
+        settingsKey: "height",
+        title: "Height of the plot in pixels",
+        min: 300,
+        max: 1e3
+      },
+      {
+        label: "Plot width",
+        type: "number",
+        chartType: "volcano",
+        settingsKey: "width",
+        title: "Width of the plot in pixels",
+        min: 300,
+        max: 1e3
+      },
+      {
+        label: "Significant value color",
+        type: "color",
+        chartType: "volcano",
+        title: "Default color for significant data points.",
+        settingsKey: "defaultSignColor",
+        getDisplayStyle: () => {
+          if (this.config.termType == SINGLECELL_CELLTYPE) return "none";
+          const controlColor = this.config.tw?.term?.values?.[this.config.samplelst.groups[0].name]?.color;
+          const caseColor = this.config.tw?.term?.values?.[this.config.samplelst.groups[1].name].color;
+          if (controlColor && caseColor) return "none";
+          else return "";
+        }
+      },
+      {
+        label: "Non-significant value color",
+        type: "color",
+        chartType: "volcano",
+        title: "Default color for non-significant data points.",
+        settingsKey: "defaultNonSignColor"
+      },
+      {
+        label: "Highlight color",
+        type: "color",
+        chartType: "volcano",
+        title: "Default color for highlighted data points.",
+        settingsKey: "defaultHighlightColor"
+      }
+    ];
+    this.setVolcanoControlInputs();
+  }
+  /** Add more term type specific controls here. */
+  setVolcanoControlInputs() {
+    this.addGeneExpControlInputs();
+    this.addDNAMethControlInputs();
+    this.addSingleCellCTControlInputs();
+  }
+  addGeneExpControlInputs() {
+    if (this.termType !== GENE_EXPRESSION) return;
+    const geInputs = [
+      {
+        label: "Minimum read count",
+        type: "number",
+        chartType: "volcano",
+        settingsKey: "minCount",
+        title: "The smallest number of reads required for a gene to be considered in the analysis",
+        min: 0,
+        max: 1e4
+      },
+      {
+        label: "Minimum total read count",
+        type: "number",
+        chartType: "volcano",
+        settingsKey: "minTotalCount",
+        title: "The smallest total number of reads required for a gene to be considered in the analysis",
+        min: 0,
+        max: 1e4
+      },
+      {
+        label: "CPM cutoff",
+        type: "number",
+        chartType: "volcano",
+        settingsKey: "cpmCutoff",
+        title: "The minimum normalized expression threshold to retain only genes with sufficient expression",
+        min: 0
+      },
+      {
+        label: "Method",
+        type: "radio",
+        chartType: "volcano",
+        settingsKey: "method",
+        title: "Toggle between analysis methods",
+        options: this.getMethodOptions()
+      }
+      // {
+      // 	label: 'Rank Genes by',
+      // 	type: 'radio',
+      // 	chartType: 'volcano',
+      // 	settingsKey: 'rankBy',
+      // 	title: 'Rank genes by either the absolute value of the fold change or the variance',
+      // 	options: [
+      // 		{ label: 'abs(Fold Change)', value: 'abs(foldChange)' },
+      // 		{ label: 'Variance', value: 'variance' }
+      // 	],
+      // 	//TODO: will enable this feature when there is backhand support
+      // 	getDisplayStyle: () => 'none'
+      // }
+    ];
+    this.inputs.splice(0, 0, ...geInputs);
+  }
+  addDNAMethControlInputs() {
+    if (this.termType !== DNA_METHYLATION) return;
+    const dmInputs = [
+      {
+        label: "Min samples per group",
+        type: "number",
+        chartType: "volcano",
+        settingsKey: "minSamplesPerGroup",
+        title: "Minimum non-NA samples required per group for a promoter to be tested",
+        min: 1,
+        max: 100
+      }
+    ];
+    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 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-diff-analysis-main", true);
+    const controls = typeof opts.controls == "object" ? opts.controls : holder || holder.append("div");
+    const error = opts.holder.append("div").attr("id", "sjpp-diff-analysis-error").style("opacity", 0.75);
+    this.dom = {
+      holder,
+      controls,
+      error,
+      wait: holder.append("div").attr("id", "sjpp-diff-analysis-wait").style("opacity", 0.75).style("padding", "20px").text("Loading..."),
+      hoverTip: new Menu({ padding: "" }),
+      clickTip: new Menu({ padding: "" }),
+      actionsTip: new Menu({ padding: "" })
+    };
+  }
+  reactsTo(action) {
+    if (action.type.includes("cache_termq")) return true;
+    if (action.type.startsWith("filter")) return true;
+    if (action.type.startsWith("cohort")) return true;
+    if (action.type == "app_refresh") return true;
+    if (action.type.startsWith("plot_")) {
+      return (action.id === this.id || action.id == this.parentId) && (!action.config?.childType || action.config?.childType == this.type);
+    }
+  }
+  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.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);
+    await this.setControls();
+  }
+  async main() {
+    const config = structuredClone(this.state.config);
+    if (config.chartType != this.type && config.childType != this.type) return;
+    const settings = config.settings.volcano;
+    try {
+      if (!this.interactions) throw new Error("Interactions not initialized");
+      const showWait = setTimeout(() => {
+        this.dom.wait.style("display", "block");
+      }, 500);
+      const model = new VolcanoModel(this.app, config, settings);
+      const response = await model.getData();
+      if (!response || response.error || !response.data || !response.data.length) {
+        sayerror(this.dom.error, response?.error || "No data returned from server");
+        clearTimeout(showWait);
+        this.dom.wait.style("display", "none");
+        return;
+      }
+      this.interactions.clearDom();
+      const viewModel = new VolcanoViewModel(config, response, settings);
+      this.interactions.pValueTableData = viewModel.viewData.pValueTableData;
+      this.interactions.data = response.data;
+      clearTimeout(showWait);
+      this.dom.wait.style("display", "none");
+      new VolcanoPlotView(this.dom, settings, viewModel.viewData, this.interactions, config.termType);
+    } 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: {
+      volcano: getDefaultVolcanoSettings(opts.overrides, opts)
+    },
+    highlightedData: opts.highlightedData || [],
+    termType: opts.termType
+  };
+  if (opts.termType == GENE_EXPRESSION) {
+    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 {
+  componentInit,
+  getPlotConfig,
+  volcanoInit
+};
+//# sourceMappingURL=Volcano-QBYYJYVW.js.map