@sjcrh/proteinpaint-client 2.184.0 → 2.185.0

package/dist/grin2-GJKLNT4J.js

@@ -0,0 +1,1031 @@
+import {
+  PlotBase,
+  axisstyle,
+  controlsInit,
+  filterInit,
+  get$id,
+  getCombinedTermFilter,
+  getNormalRoot,
+  make_one_checkbox,
+  renderTable,
+  sayerror,
+  table2col,
+  to_svg
+} from "./chunk-YWUVCXFS.js";
+import "./chunk-HJ6L54YS.js";
+import "./chunk-3QBZ2Y77.js";
+import {
+  Menu
+} from "./chunk-HYOEWQ5P.js";
+import "./chunk-FN5XPUPH.js";
+import "./chunk-G6O3URDN.js";
+import "./chunk-LSEFWW72.js";
+import {
+  icons
+} from "./chunk-KWM6B3NL.js";
+import "./chunk-UCLS2SVB.js";
+import "./chunk-6ZCHECOT.js";
+import {
+  copyMerge,
+  getCompInit
+} from "./chunk-MVTCBVSX.js";
+import "./chunk-2K5DSRBJ.js";
+import "./chunk-X4NI4JLQ.js";
+import "./chunk-L4QG7XZE.js";
+import "./chunk-DQC5FFGV.js";
+import "./chunk-UWYCEYML.js";
+import "./chunk-7UHUOC6F.js";
+import "./chunk-ZYY54HBU.js";
+import "./chunk-EGWVYY7K.js";
+import {
+  dt2lesion,
+  dtcnv,
+  dtfusionrna,
+  dtsnvindel,
+  dtsv,
+  mclass,
+  proteinChangingMutations
+} from "./chunk-AMYSEKPF.js";
+import "./chunk-TV74I3Y5.js";
+import {
+  quadtree
+} from "./chunk-KSGA62R2.js";
+import {
+  axisLeft
+} from "./chunk-LOZEKOES.js";
+import "./chunk-TOU7EVFQ.js";
+import {
+  linear
+} from "./chunk-OAWQ6LOO.js";
+import "./chunk-KYBIQBXE.js";
+import {
+  select_default
+} from "./chunk-I6Y4O3RR.js";
+import "./chunk-OMR2DT66.js";
+import "./chunk-HFNDKYVF.js";
+
+// plots/manhattan/manhattan.ts
+function findPointsInRadius(quadtree2, mx, my, hitRadius) {
+  const candidates = [];
+  quadtree2.visit((node, x1, y1, x2, y2) => {
+    if (x1 > mx + hitRadius || x2 < mx - hitRadius || y1 > my + hitRadius || y2 < my - hitRadius) {
+      return true;
+    }
+    if (!node.length) {
+      let current = node;
+      while (current) {
+        const point = current.data;
+        if (point) {
+          const px = point.pixel_x;
+          const py = point.pixel_y;
+          const distance = Math.sqrt((mx - px) ** 2 + (my - py) ** 2);
+          if (distance <= hitRadius) {
+            candidates.push({ point, distance });
+          }
+        }
+        current = current.next;
+      }
+    }
+    return false;
+  });
+  return candidates;
+}
+function updateSelectionTracking(currentSelectionOrder, selectedIndices, dataSource) {
+  const newlySelected = selectedIndices.filter((idx) => !currentSelectionOrder.includes(idx));
+  const updatedSelectionOrder = currentSelectionOrder.filter((idx) => selectedIndices.includes(idx));
+  updatedSelectionOrder.push(...newlySelected);
+  let lastTouchedGene = null;
+  let buttonText = "Lollipop";
+  if (updatedSelectionOrder.length > 0) {
+    const lastSelectedIdx = updatedSelectionOrder[updatedSelectionOrder.length - 1];
+    const dataItem = dataSource[lastSelectedIdx];
+    if (Array.isArray(dataItem)) {
+      lastTouchedGene = dataItem[0]?.value || null;
+    } else {
+      lastTouchedGene = dataItem.gene;
+    }
+    buttonText = `Lollipop (${lastTouchedGene})`;
+  }
+  return {
+    selectionOrder: updatedSelectionOrder,
+    lastTouchedGene,
+    buttonText,
+    buttonDisabled: lastTouchedGene === null
+  };
+}
+function plotManhattan(div, data, settings, app) {
+  settings = {
+    ...settings
+  };
+  let interactivePoints = data.plotData.points;
+  if (data.plotData.points.length > settings.interactiveDotsCap) {
+    interactivePoints = data.plotData.points.sort((a, b) => b.y - a.y).slice(0, settings.interactiveDotsCap);
+  }
+  div.style("position", "relative");
+  const geneTip = new Menu({ padding: "" });
+  let clickMenuIsShown = false;
+  const clickMenu = new Menu({
+    padding: "",
+    onHide: () => {
+      clickMenuIsShown = false;
+    }
+  });
+  const svg = div.append("svg").attr("data-testid", "sjpp-manhattan").attr("width", settings.plotWidth + 2 * settings.pngDotRadius + settings.yAxisX + settings.yAxisSpace).attr("height", settings.plotHeight + 2 * settings.pngDotRadius + settings.yAxisY * 4);
+  const yPlot = linear().domain([data.plotData.y_min, data.plotData.y_max]).range([settings.plotHeight + 2 * settings.pngDotRadius, 0]);
+  const yAxisScale = linear().domain([0, data.plotData.y_max - settings.pngDotRadius]).range([yPlot(0), yPlot(data.plotData.y_max - settings.pngDotRadius)]);
+  const axisG = svg.append("g").attr("transform", `translate(${settings.yAxisX + settings.yAxisSpace - settings.yAxisPad},${settings.yAxisY})`);
+  axisG.call(
+    axisLeft(yAxisScale).tickSizeOuter(0)
+    // removes top/bottom cap lines for clean look
+  );
+  axisstyle({
+    axis: axisG,
+    color: settings.axisColor,
+    fontsize: settings.fontSize + 2,
+    showline: settings.showYAxisLine
+  });
+  svg.append("text").attr("x", -((settings.plotHeight + 2 * settings.pngDotRadius) / 2) - settings.yAxisY).attr("y", settings.yAxisX / 2).attr("transform", "rotate(-90)").attr("text-anchor", "middle").attr("font-size", `${settings.fontSize + 4}px`).attr("fill", "black").text(data.plotData.has_capped_points ? "-log\u2081\u2080(q-value) [capped]" : "-log\u2081\u2080(q-value)");
+  svg.append("image").attr("transform", `translate(${settings.yAxisX + settings.yAxisSpace},${settings.yAxisY})`).attr("width", settings.plotWidth + 2 * settings.pngDotRadius).attr("height", settings.plotHeight + 2 * settings.pngDotRadius).attr("href", `data:image/png;base64,${data.pngImg || data.png}`);
+  const xScale = linear().domain([-data.plotData.x_buffer, data.plotData.total_genome_length + data.plotData.x_buffer]).range([0, settings.plotWidth + 2 * settings.pngDotRadius]);
+  if (settings.showInteractiveDots && data.plotData.points && data.plotData.points.length > 0) {
+    const pointsLayer = svg.append("g").attr("transform", `translate(${settings.yAxisX + settings.yAxisSpace},${settings.yAxisY})`);
+    const cover = select_default(svg.node().parentNode).append("div").style("position", "absolute").style("left", `${settings.yAxisX + settings.yAxisSpace}px`).style("top", `${settings.yAxisY}px`).style("width", `${settings.plotWidth + 2 * settings.pngDotRadius}px`).style("height", `${settings.plotHeight + 2 * settings.pngDotRadius}px`).style("pointer-events", "all");
+    let highlightedDots = [];
+    const normalizedPoints = interactivePoints;
+    const pointQuadtree = quadtree().x((d) => d.pixel_x).y((d) => d.pixel_y).addAll(normalizedPoints);
+    cover.on("mousemove", (event) => {
+      if (clickMenuIsShown) return;
+      const rect = cover.node().getBoundingClientRect();
+      const mx = event.clientX - rect.left;
+      const my = event.clientY - rect.top;
+      const hitRadius = settings.pngDotRadius + 3;
+      const candidates = findPointsInRadius(pointQuadtree, mx, my, hitRadius);
+      candidates.sort((a, b) => a.distance - b.distance);
+      const nearbyDots = candidates.slice(0, settings.maxTooltipGenes).map((c) => c.point);
+      const additionalCount = candidates.length - settings.maxTooltipGenes;
+      pointsLayer.selectAll(".hover-circle").remove();
+      if (nearbyDots.length > 0) {
+        nearbyDots.forEach((d) => {
+          pointsLayer.append("circle").attr("class", "hover-circle").attr("cx", d.pixel_x).attr("cy", d.pixel_y).attr("r", settings.pngDotRadius).attr("fill", "none").attr("stroke", "black").attr("stroke-width", settings.interactiveDotStrokeWidth);
+        });
+        highlightedDots = nearbyDots;
+        geneTip.clear().show(event.clientX, event.clientY);
+        if (nearbyDots.length > 1) {
+          const holder = geneTip.d.append("div").style("margin", "10px");
+          showGrin2ResultTable({ tableDiv: holder, hits: nearbyDots });
+          if (additionalCount > 0) {
+            holder.append("div").style("font-size", "0.85em").style("color", "#666").style("font-style", "italic").text(`and ${additionalCount} more gene${additionalCount > 1 ? "s" : ""}...`);
+          }
+        } else {
+          const d = nearbyDots[0];
+          const table = table2col({
+            holder: geneTip.d.append("div"),
+            margin: "10px"
+          });
+          table.addRow("Gene", d.gene);
+          table.addRow("Position", `${d.chrom}:${d.start}-${d.end}`);
+          const [t1, t2] = table.addRow();
+          t1.text("Type");
+          t2.html(`<span style="color:${d.color}">\u25CF</span> ${d.type.charAt(0).toUpperCase() + d.type.slice(1)}`);
+          table.addRow("Q-value", d.q_value.toPrecision(3));
+          table.addRow("Subject count", d.nsubj);
+        }
+      } else {
+        highlightedDots = [];
+        geneTip.hide();
+      }
+    }).on("mouseleave", () => {
+      pointsLayer.selectAll(".hover-circle").remove();
+      highlightedDots = [];
+      geneTip.hide();
+    }).on("click", (event) => {
+      if (highlightedDots.length === 0 || !app) return;
+      geneTip.hide();
+      const rect = cover.node().getBoundingClientRect();
+      const mx = event.clientX - rect.left;
+      const my = event.clientY - rect.top;
+      const hitRadius = settings.pngDotRadius + 3;
+      const allCandidates = findPointsInRadius(pointQuadtree, mx, my, hitRadius);
+      allCandidates.sort((a, b) => a.distance - b.distance);
+      const allNearbyDots = allCandidates.map((c) => c.point);
+      if (allNearbyDots.length === 1) {
+        createLollipopFromGene(allNearbyDots[0].gene, app);
+      } else if (allNearbyDots.length > 1) {
+        clickMenu.clear().show(event.clientX, event.clientY);
+        clickMenuIsShown = true;
+        const holder = clickMenu.d.append("div").style("margin", "10px");
+        showGrin2ResultTable({ tableDiv: holder, hits: allNearbyDots, app, clickMenu });
+      }
+    });
+  }
+  if (data.plotData.chrom_data) {
+    const chromLabelY = settings.plotHeight + 2 * settings.pngDotRadius + settings.yAxisY + 10;
+    Object.entries(data.plotData.chrom_data).forEach(([chrom, chromData]) => {
+      const chromLabel = chrom.replace("chr", "");
+      if (chromLabel === "M") return;
+      const centerPos = settings.yAxisX + settings.yAxisSpace + xScale(chromData.center);
+      svg.append("text").attr("x", centerPos).attr("y", chromLabelY).attr("text-anchor", "middle").attr("font-size", `${settings.fontSize + 2}px`).text(chromLabel);
+    });
+  }
+  svg.append("text").attr("x", settings.yAxisX + settings.yAxisSpace + (settings.plotWidth + 2 * settings.pngDotRadius) / 2).attr("y", settings.plotHeight + 2 * settings.pngDotRadius + settings.yAxisY + settings.xAxisLabelPad).attr("text-anchor", "middle").attr("font-size", `${settings.fontSize + 4}px`).attr("fill", "black").text("Chromosomes");
+  svg.append("text").attr("x", settings.yAxisX + settings.yAxisSpace).attr("y", settings.yAxisY / 2).attr("font-weight", "bold").attr("font-size", `${settings.fontSize + 2}px`).text("Manhattan Plot");
+  if (settings.showDownload) {
+    const downloadDiv = div.append("div").style("position", "absolute").style("top", "5px").style("left", `${settings.yAxisX + settings.yAxisSpace + 108}px`);
+    icons["download"](downloadDiv, {
+      width: 16,
+      height: 16,
+      title: "Download Manhattan plot",
+      handler: () => {
+        const svgNode = svg.node();
+        const clone = svgNode.cloneNode(true);
+        const bbox = svgNode.getBBox();
+        clone.setAttribute("width", bbox.width.toString());
+        clone.setAttribute("height", bbox.height.toString());
+        clone.setAttribute("viewBox", `${bbox.x} ${bbox.y} ${bbox.width} ${bbox.height}`);
+        to_svg(clone, `manhattan_plot_${(/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-").slice(0, -5)}`, {
+          apply_dom_styles: true
+        });
+      }
+    });
+  }
+  const mutationTypes = [...new Set(data.plotData.points.map((p) => p.type))];
+  const legendData = mutationTypes.map((type) => {
+    const point = data.plotData.points.find((p) => p.type === type);
+    return {
+      type: String(type).charAt(0).toUpperCase() + String(type).slice(1),
+      color: point?.color
+    };
+  });
+  if (settings.showLegend && legendData.length > 0) {
+    const legendY = settings.yAxisY / 2;
+    const totalWidth = legendData.length * settings.legendItemWidth;
+    const legendX = settings.yAxisX + settings.yAxisSpace + (settings.plotWidth + 2 * settings.pngDotRadius) - totalWidth - settings.legendRightOffset;
+    legendData.forEach((item, i) => {
+      const x = legendX + i * settings.legendItemWidth;
+      svg.append("circle").attr("cx", x + 8).attr("cy", legendY).attr("r", settings.legendDotRadius).attr("fill", item.color);
+      svg.append("text").attr("x", x + 8 + settings.legendTextOffset).attr("y", legendY + settings.legendVerticalOffset).attr("font-size", `${settings.legendFontSize + 2}px`).text(item.type);
+    });
+  }
+}
+function createLollipopFromGene(geneSymbol, app) {
+  const cfg = {
+    type: "plot_create",
+    config: {
+      chartType: "genomeBrowser",
+      snvindel: { shown: true },
+      // always set snvindel.shown=true so the mds3 tk is always shown; since grin2 works for this ds, it doesn't matter whether snvindel/cnv/svfusion any is present; all will be shown in mds3 tk
+      geneSearchResult: { geneSymbol }
+    }
+  };
+  if (app.vocabApi.termdbConfig.queries.trackLst?.activeTracks) {
+    cfg.config.trackLst = structuredClone(app.vocabApi.termdbConfig.queries.trackLst);
+    cfg.config.trackLst.activeTracks = [];
+  }
+  app.dispatch(cfg);
+}
+async function createMatrixFromGenes(geneSymbols, app) {
+  const MAX_GENES = 100;
+  const genesToUse = geneSymbols.slice(0, MAX_GENES);
+  try {
+    const termwrappers = await Promise.all(
+      genesToUse.map(async (gene) => {
+        const term = {
+          type: "geneVariant",
+          gene,
+          name: gene
+        };
+        const minTwCopy = app.vocabApi.getTwMinCopy({ term, q: {} });
+        return {
+          $id: await get$id(minTwCopy),
+          term,
+          q: {}
+        };
+      })
+    );
+    app.dispatch({
+      type: "plot_create",
+      config: {
+        chartType: "matrix",
+        dataType: "geneVariant",
+        termgroups: [
+          {
+            name: "Genomic Alterations",
+            lst: termwrappers
+          }
+        ]
+      }
+    });
+  } catch (error) {
+    sayerror(app.dom.div, `Error creating matrix: ${error instanceof Error ? error.message : error}`);
+  }
+}
+
+// plots/grin2/grin2.ts
+function showGrin2ResultTable(opts) {
+  const {
+    tableDiv,
+    hits,
+    app,
+    clickMenu,
+    columns: prebuiltColumns,
+    rows: prebuiltRows,
+    dataItems: prebuiltDataItems,
+    getGene = (item) => item.gene,
+    matrixButtonFormat = "Matrix ({n})",
+    ...renderTableOpts
+  } = opts;
+  const dataItems = prebuiltDataItems || hits;
+  if (!dataItems || dataItems.length === 0) return;
+  const columns = prebuiltColumns || [
+    { label: "Gene" },
+    { label: `${hits[0].chrom.charAt(0).toUpperCase()}${hits[0].chrom.slice(1).toLowerCase()} pos` },
+    { label: "Type" },
+    { label: "Q-value", sortable: true },
+    { label: "Subject count", sortable: true }
+  ];
+  const rows = prebuiltRows || hits.map((d) => [
+    { value: d.gene },
+    { html: `<span style="font-size:.8em">${d.start}-${d.end}</span>` },
+    { html: `<span style="color:${d.color}">\u25CF</span> ${d.type.charAt(0).toUpperCase() + d.type.slice(1)}` },
+    { value: d.q_value.toPrecision(3) },
+    { value: d.nsubj }
+  ]);
+  const tableOptions = {
+    div: tableDiv,
+    columns,
+    rows,
+    showLines: false,
+    showHeader: true,
+    striped: true,
+    resize: "both",
+    header: { allowSort: true },
+    ...renderTableOpts
+  };
+  if (app) {
+    let lastTouchedGene = null;
+    let selectionOrder = [];
+    tableOptions.buttonsToLeft = true;
+    tableOptions.buttons = [
+      {
+        text: matrixButtonFormat.replace("{n}", "0"),
+        callback: (selectedIndices, buttonNode) => {
+          if (selectedIndices.length > 0) {
+            buttonNode.disabled = true;
+            const selectedGenes = selectedIndices.map((idx) => getGene(dataItems[idx]));
+            clickMenu?.hide();
+            createMatrixFromGenes(selectedGenes, app);
+          }
+        },
+        onChange: (selectedIndices, buttonNode) => {
+          buttonNode.textContent = matrixButtonFormat.replace("{n}", String(selectedIndices.length));
+          buttonNode.disabled = selectedIndices.length === 0;
+        }
+      },
+      {
+        text: "Lollipop",
+        callback: (_selectedIndices, buttonNode) => {
+          if (lastTouchedGene) {
+            buttonNode.disabled = true;
+            clickMenu?.hide();
+            createLollipopFromGene(lastTouchedGene, app);
+          }
+        },
+        onChange: (selectedIndices, buttonNode) => {
+          const result = updateSelectionTracking(selectionOrder, selectedIndices, dataItems);
+          selectionOrder = result.selectionOrder;
+          lastTouchedGene = result.lastTouchedGene;
+          buttonNode.textContent = result.buttonText;
+          buttonNode.disabled = result.buttonDisabled;
+        }
+      }
+    ];
+  }
+  renderTable(tableOptions);
+}
+var GRIN2 = class extends PlotBase {
+  constructor(opts, api) {
+    super(opts, api);
+    this.type = "grin2";
+    // active MAF filter state, updated by filterInit UI
+    // Colors
+    this.borderColor = "#eee";
+    this.backgroundColor = "#f8f8f8";
+    this.optionsTextColor = "#666";
+    this.btnBackgroundColor = "#f0f0f0";
+    this.btnBorderColor = "#ccc";
+    this.btnTextColor = "#333";
+    this.btnHoverBackgroundColor = "#e0e0e0";
+    // Typography
+    this.optionsTextFontSize = 12;
+    this.btnFontSize = 12;
+    this.headerFontSize = 14;
+    this.headerFontWeight = 600;
+    this.tableFontSize = 11;
+    this.statsTableFontWeight = "bold";
+    // Spacing & Layout
+    this.btnPadding = "8px 16px";
+    this.btnSmallPadding = "2px 8px";
+    // for Select All/Clear All
+    this.btnBorderRadius = "3px";
+    this.btnMargin = "10px";
+    this.tableCellPadding = "8px";
+    this.controlsMargin = "5px";
+    this.controlsPadding = "10px";
+    // Input fields
+    this.inputWidth = "80px";
+    this.inputPadding = "2px 4px";
+    this.inputBorderColor = "#ddd";
+    this.inputBorderRadius = "2px";
+    // Containers
+    this.checkboxContainerMaxHeight = "150px";
+    this.checkboxContainerBackground = "#fafafa";
+    this.checkboxContainerBorder = "1px solid #ddd";
+    this.checkboxContainerPadding = "4px";
+    this.checkboxContainerBorderRadius = "3px";
+    // Interactive states
+    this.disabledOpacity = "0.6";
+    this.enabledOpacity = "1";
+    // Gaps and offsets
+    this.controlGap = "8px";
+    this.checkboxMarginBottom = "2px";
+    this.headerMargin = "0 10px 0 0";
+    this.sectionMargin = "20px 0";
+    this.addSnvindelRow = (table) => {
+      const [left, right] = table.addRow();
+      const t2 = table2col({ holder: right });
+      {
+        const [labelCell, containerCell] = t2.addRow();
+        labelCell.text("Consequences").style("padding-top", "8px");
+        this.createConsequenceCheckboxes(containerCell);
+      }
+      const mafFilterConfig = this.app.vocabApi.termdbConfig.queries?.snvindel?.mafFilter;
+      if (mafFilterConfig) {
+        this.snvindelMafFilter = structuredClone(
+          this.state.config.settings?.snvindelOptions?.mafFilter || mafFilterConfig.filter
+        );
+        const [td1, td2] = t2.addRow();
+        td1.text("MAF filter");
+        filterInit({
+          emptyLabel: "+",
+          holder: td2,
+          header_mode: "hide_search",
+          vocab: { terms: mafFilterConfig.terms },
+          callback: async (filter) => {
+            this.snvindelMafFilter = filter;
+          }
+        }).main(this.snvindelMafFilter);
+      }
+      const isChecked = this.state.config.settings.dtUsage[dtsnvindel].checked;
+      t2.table.style("display", isChecked ? "" : "none");
+      this.dom.snvindelCheckbox = make_one_checkbox({
+        holder: left,
+        labeltext: dt2lesion[dtsnvindel].uilabel,
+        checked: isChecked,
+        testid: "sjpp-grin2-checkbox-snvindel",
+        callback: (checked) => {
+          t2.table.style("display", checked ? "" : "none");
+          this.updateRunButtonFromCheckboxes();
+        }
+      });
+    };
+    // Add CNV row
+    this.addCnvRow = (table) => {
+      const [left, right] = table.addRow();
+      const t2 = table2col({ holder: right });
+      const useSaved = this.state.config.settings.runAnalysis === true;
+      const savedCnv = useSaved ? this.state.config.settings.cnvOptions : void 0;
+      this.dom.cnv_lossThreshold = this.addOptionRowToTable(
+        t2,
+        "Loss Threshold",
+        savedCnv?.lossThreshold ?? this.app.vocabApi.termdbConfig.queries.cnv?.cnvLossCutoff ?? -0.4,
+        // default. We first check if we have saved state, then we check the ds specific value, if that is undefined we fall back to the hardcoded default value
+        -5,
+        // min
+        0,
+        // max
+        0.05
+        // step
+      );
+      this.dom.cnv_gainThreshold = this.addOptionRowToTable(
+        t2,
+        "Gain Threshold",
+        savedCnv?.gainThreshold ?? this.app.vocabApi.termdbConfig.queries.cnv?.cnvGainCutoff ?? 0.4,
+        // default. We first check if we have saved state, then we check the ds specific value, if that is undefined we fall back to the hardcoded default value
+        0,
+        // min
+        5,
+        // max
+        0.05
+        // step
+      );
+      this.dom.cnv_maxSegLength = this.addOptionRowToTable(
+        t2,
+        "Max Segment Length",
+        savedCnv?.maxSegLength ?? this.app.vocabApi.termdbConfig.queries.cnv?.cnvMaxLength ?? 2e6,
+        // default 2Mb. We first check if we have saved state, then we check the ds specific value, if that is undefined we fall back to the hardcoded default value
+        0,
+        // min
+        1e9,
+        // max
+        1e3
+        // step
+      );
+      const dtUsage = this.state.config.settings.dtUsage;
+      const isChecked = useSaved && dtUsage[dtcnv]?.checked !== void 0 ? dtUsage[dtcnv].checked : !!this.app.vocabApi.termdbConfig.queries.cnv;
+      t2.table.style("display", isChecked ? "" : "none");
+      this.dom.cnvCheckbox = make_one_checkbox({
+        holder: left,
+        labeltext: dt2lesion[dtcnv].uilabel,
+        checked: isChecked,
+        testid: "sjpp-grin2-checkbox-cnv",
+        callback: (checked) => {
+          t2.table.style("display", checked ? "" : "none");
+          this.updateRunButtonFromCheckboxes();
+        }
+      });
+    };
+    // Add Fusion row
+    this.addFusionRow = (table) => {
+      const [left, right] = table.addRow();
+      const t2 = table2col({ holder: right });
+      const isChecked = this.state.config.settings.dtUsage[dtfusionrna].checked;
+      t2.table.style("display", isChecked ? "" : "none");
+      this.dom.fusionCheckbox = make_one_checkbox({
+        holder: left,
+        labeltext: dt2lesion[dtfusionrna].uilabel,
+        checked: isChecked,
+        testid: "grin2-checkbox-fusion",
+        callback: (checked) => {
+          t2.table.style("display", checked ? "" : "none");
+          this.updateRunButtonFromCheckboxes();
+        }
+      });
+    };
+    // Add SV row
+    this.addSvRow = (table) => {
+      const [left, right] = table.addRow();
+      const t2 = table2col({ holder: right });
+      const isChecked = this.state.config.settings.dtUsage[dtsv].checked;
+      t2.table.style("display", isChecked ? "" : "none");
+      this.dom.svCheckbox = make_one_checkbox({
+        holder: left,
+        labeltext: dt2lesion[dtsv].uilabel,
+        checked: isChecked,
+        testid: "sjpp-grin2-checkbox-sv",
+        callback: (checked) => {
+          t2.table.style("display", checked ? "" : "none");
+          this.updateRunButtonFromCheckboxes();
+        }
+      });
+    };
+    this.opts = opts;
+    this.components = {
+      controls: {}
+    };
+    opts.holder.classed("sjpp-grin2-main", true);
+    this.dom = {
+      massControls: opts.holder.append("div").style("display", "inline-block"),
+      headerText: opts.holder.append("div").style("display", "inline-block"),
+      controls: opts.holder.append("div"),
+      // controls ui on top
+      div: opts.holder.append("div").style("margin", "20px"),
+      // result ui on bottom
+      tip: new Menu({ padding: "" }),
+      geneTip: new Menu({ padding: "" }),
+      snvindelCheckbox: null,
+      cnvCheckbox: null,
+      fusionCheckbox: null,
+      svCheckbox: null,
+      runButton: null,
+      consequenceCheckboxes: {},
+      snvindelSelectAllBtn: null,
+      snvindelClearAllBtn: null,
+      snvindelDefaultBtn: null
+    };
+    if (opts.header) this.dom.header = opts.header.text("GRIN2");
+  }
+  static {
+    this.type = "grin2";
+  }
+  getState(appState) {
+    const config = appState.plots.find((p) => p.id === this.id);
+    if (!config) {
+      throw `No plot with id='${this.id}' found. Did you set this.id before this.api = getComponentApi(this)?`;
+    }
+    const parentConfig = appState.plots.find((p) => p.id === this.parentId);
+    const termfilter = getCombinedTermFilter(appState, config.filter || parentConfig?.filter);
+    return {
+      config,
+      termfilter
+    };
+  }
+  // Enable the run button only if at least one data type is checked
+  updateRunButtonState(dtu) {
+    const dtUsage = dtu || this.state.config.settings.dtUsage;
+    const anyChecked = Object.values(dtUsage).some((info) => info.checked);
+    this.dom.runButton.property("disabled", !anyChecked);
+  }
+  createConfigTable() {
+    this.dom.headerText.style("margin", "15px").html(
+      "GRIN2 stands for Genomic Random Interval (GRIN) statistical model. For details, see <a href=https://pubmed.ncbi.nlm.nih.gov/23842812/ target=_blank>Pounds, S. et al. Bioinformatics 2013</a>."
+    );
+    const table = table2col({ holder: this.dom.controls, disableScroll: true });
+    const queries = this.app.vocabApi.termdbConfig.queries;
+    if (queries.snvindel) {
+      this.addSnvindelRow(table);
+    }
+    if (queries.cnv) {
+      this.addCnvRow(table);
+    }
+    if (queries.svfusion?.dtLst?.includes(dtfusionrna)) {
+      this.addFusionRow(table);
+    }
+    if (queries.svfusion?.dtLst?.includes(dtsv)) {
+      this.addSvRow(table);
+    }
+    this.dom.runButton = this.dom.controls.append("button").attr("data-testid", "sjpp-grin2-run-button").style("margin-left", "100px").text("Run GRIN2").on("click", () => {
+      this.runAnalysis();
+    });
+    if (this.state.config.settings.runAnalysis) {
+      this.runAnalysis();
+    } else {
+      this.updateRunButtonState();
+    }
+  }
+  // Helper method to add option rows to table2col instances
+  addOptionRowToTable(table, label, defaultValue, min, max, step) {
+    const [labelCell, inputCell] = table.addRow();
+    labelCell.text(label);
+    const input = inputCell.append("input").attr("type", "number").attr("value", defaultValue).style("width", this.inputWidth).style("padding", this.inputPadding).style("border", `1px solid ${this.inputBorderColor}`).style("border-radius", this.inputBorderRadius).style("font-size", `${this.optionsTextFontSize}px`);
+    if (min !== null && min !== void 0) input.attr("min", min);
+    if (max !== null && max !== void 0) input.attr("max", max);
+    if (step !== null && step !== void 0) input.attr("step", step);
+    return input;
+  }
+  createConsequenceCheckboxes(container) {
+    const snvIndelClasses = Object.entries(mclass).filter(
+      ([key, cls]) => cls.dt === dtsnvindel && key !== "Blank" && key !== "WT"
+    );
+    const saved = this.state.config.settings.snvindelOptions?.consequences;
+    const useSaved = this.state.config.settings.runAnalysis === true && !!saved && saved.length > 0;
+    const canonicalDefault = /* @__PURE__ */ new Set([...proteinChangingMutations, "StartLost", "StopLost"]);
+    const initialChecked = useSaved ? new Set(saved) : canonicalDefault;
+    const controlDiv = container.append("div").style("margin-bottom", "6px").style("display", "flex").style("gap", this.controlGap);
+    this.dom.snvindelSelectAllBtn = controlDiv.append("button").style("font-size", `${this.tableFontSize}px`).text("Select All");
+    this.dom.snvindelClearAllBtn = controlDiv.append("button").style("font-size", `${this.tableFontSize}px`).text("Clear All");
+    this.dom.snvindelDefaultBtn = controlDiv.append("button").style("font-size", `${this.tableFontSize}px`).text("Default");
+    const checkboxContainer = container.append("div").style("max-height", this.checkboxContainerMaxHeight).style("overflow-y", "auto").style("border", this.checkboxContainerBorder);
+    this.dom.consequenceCheckboxes = {};
+    snvIndelClasses.forEach(([classKey, classInfo]) => {
+      const checkboxDiv = checkboxContainer.append("div").style("margin-bottom", this.checkboxMarginBottom);
+      const checkbox = make_one_checkbox({
+        holder: checkboxDiv,
+        labeltext: classInfo.label,
+        checked: initialChecked.has(classKey),
+        divstyle: { "font-size": `${this.tableFontSize}px` },
+        callback: () => {
+        }
+      });
+      checkboxDiv.select("label").attr("title", classInfo.desc);
+      this.dom.consequenceCheckboxes[classKey] = checkbox;
+    });
+    this.dom.snvindelSelectAllBtn.on("click", () => {
+      Object.values(this.dom.consequenceCheckboxes).forEach((cb) => cb.property("checked", true));
+    });
+    this.dom.snvindelClearAllBtn.on("click", () => {
+      Object.values(this.dom.consequenceCheckboxes).forEach((cb) => cb.property("checked", false));
+    });
+    this.dom.snvindelDefaultBtn.on("click", () => {
+      Object.entries(this.dom.consequenceCheckboxes).forEach(([classKey, checkbox]) => {
+        checkbox.property("checked", canonicalDefault.has(classKey));
+      });
+    });
+  }
+  getConfigValues(dtUsage) {
+    const requestConfig = {};
+    const usage = dtUsage || this.state.config.settings.dtUsage;
+    if (usage[dtsnvindel]?.checked) {
+      requestConfig.snvindelOptions = {
+        // minTotalDepth: parseFloat(this.dom.snvindel_minTotalDepth.property('value')),
+        // minAltAlleleCount: parseFloat(this.dom.snvindel_minAltAlleleCount.property('value')),
+        consequences: this.getSelectedConsequences()
+      };
+      if (this.snvindelMafFilter) {
+        requestConfig.snvindelOptions.mafFilter = this.snvindelMafFilter;
+      }
+    }
+    if (usage[dtcnv]?.checked) {
+      requestConfig.cnvOptions = {
+        lossThreshold: parseFloat(this.dom.cnv_lossThreshold.property("value")),
+        gainThreshold: parseFloat(this.dom.cnv_gainThreshold.property("value")),
+        maxSegLength: parseFloat(this.dom.cnv_maxSegLength.property("value"))
+      };
+    }
+    if (usage[dtfusionrna]?.checked) {
+      requestConfig.fusionOptions = {};
+    }
+    if (usage[dtsv]?.checked) {
+      requestConfig.svOptions = {};
+    }
+    return requestConfig;
+  }
+  getDtUsageFromCheckboxes() {
+    const dtUsage = structuredClone(this.state.config.settings.dtUsage);
+    if (dtUsage[dtsnvindel]) {
+      dtUsage[dtsnvindel].checked = this.dom.snvindelCheckbox.property("checked");
+    }
+    if (dtUsage[dtcnv]) {
+      dtUsage[dtcnv].checked = this.dom.cnvCheckbox.property("checked");
+    }
+    if (dtUsage[dtfusionrna]) {
+      dtUsage[dtfusionrna].checked = this.dom.fusionCheckbox.property("checked");
+    }
+    if (dtUsage[dtsv]) {
+      dtUsage[dtsv].checked = this.dom.svCheckbox.property("checked");
+    }
+    return dtUsage;
+  }
+  getSelectedConsequences() {
+    const consequences = [];
+    Object.entries(this.dom.consequenceCheckboxes).forEach(([classKey, checkbox]) => {
+      if (checkbox.property("checked")) {
+        consequences.push(classKey);
+      }
+    });
+    return consequences;
+  }
+  updateRunButtonFromCheckboxes() {
+    const dtUsage = this.getDtUsageFromCheckboxes();
+    this.updateRunButtonState(dtUsage);
+  }
+  async runAnalysis() {
+    this.dom.controls.style("pointer-events", "none").style("opacity", "0.5");
+    try {
+      const dtUsage = this.getDtUsageFromCheckboxes();
+      this.dom.runButton.property("disabled", true).text("Running GRIN2...");
+      this.dom.div.selectAll("*").remove();
+      const configValues = this.getConfigValues(dtUsage);
+      const requestData = {
+        filter: getNormalRoot(this.state.termfilter.filter),
+        filter0: this.state.termfilter.filter0,
+        width: this.state.config.settings.manhattan?.plotWidth,
+        height: this.state.config.settings.manhattan?.plotHeight,
+        pngDotRadius: this.state.config.settings.manhattan?.pngDotRadius,
+        devicePixelRatio: window.devicePixelRatio,
+        maxGenesToShow: this.state.config.settings?.manhattan?.maxGenesToShow,
+        lesionTypeColors: this.state.config.settings?.manhattan?.lesionTypeColors,
+        qValueThreshold: this.state.config.settings?.manhattan?.qValueThreshold,
+        maxCappedPoints: this.state.config.settings?.manhattan?.maxCappedPoints,
+        hardCap: this.state.config.settings?.manhattan?.hardCap,
+        binSize: this.state.config.settings?.manhattan?.binSize,
+        ...configValues
+      };
+      const response = await this.app.vocabApi.getGrin2Data(requestData, this.api.getAbortSignal());
+      if (response.status === "error") throw `GRIN2 analysis failed: ${response.error}`;
+      this.renderResults(response);
+      const updatedConfig = {
+        ...this.state.config,
+        settings: {
+          ...this.state.config.settings,
+          ...configValues,
+          dtUsage,
+          runAnalysis: true
+        }
+      };
+      this.app.dispatch({
+        type: "plot_edit",
+        id: this.id,
+        config: updatedConfig
+      });
+    } catch (error) {
+      if (this.dom.div) {
+        sayerror(this.dom.div, `Error running GRIN2: ${error instanceof Error ? error.message : error}`);
+      } else {
+      }
+    } finally {
+      this.dom.controls?.style("pointer-events", "auto").style("opacity", "1");
+      this.dom.runButton?.property("disabled", false).text("Run GRIN2");
+    }
+  }
+  async init() {
+    this.components.controls = await controlsInit({
+      app: this.app,
+      id: this.id,
+      holder: this.dom.massControls.style("display", "inline-block"),
+      inputs: []
+    });
+    const burgerMenu = this.dom.massControls.select("div > svg.bi.bi-copy");
+    if (burgerMenu) burgerMenu.remove();
+    const downloadBtn = this.dom.massControls.select("div > svg.bi.bi-download");
+    if (downloadBtn) downloadBtn.remove();
+    this.components.controls.on("helpClick.grin2", () => {
+      window.open("https://github.com/stjude/proteinpaint/wiki/Grin2");
+    });
+  }
+  async main() {
+    const config = structuredClone(this.state.config);
+    if (config.childType != this.type && config.chartType != this.type) return;
+    if (!this.dom.runButton) {
+      this.createConfigTable();
+    }
+  }
+  renderResults(result) {
+    if (result.pngImg) {
+      const plotData = result;
+      const plotDiv = this.dom.div;
+      const manhattanSettings = this.state.config.settings.manhattan;
+      plotManhattan(plotDiv, plotData, manhattanSettings, this.app);
+    }
+    if (result.topGeneTable) {
+      const tableContainer = this.dom.div.append("div").style("margin", this.sectionMargin);
+      const headerDiv = tableContainer.append("div").style("display", "flex").style("align-items", "center").style("margin", this.btnMargin);
+      headerDiv.append("h3").style("margin", this.headerMargin).style("font-size", `${this.headerFontSize}px`).text(`Top Genes (showing ${result.stats.lst[0].rows[1][1]} of ${result.stats.lst[0].rows[0][1]})`);
+      const tableDiv = tableContainer.append("div");
+      const lesionTypeColors = this.state.config.settings.manhattan.lesionTypeColors;
+      const qValueThreshold = this.state.config.settings.manhattan.qValueThreshold;
+      const columns = result.topGeneTable.columns;
+      const dtMapping = {};
+      Object.entries(dt2lesion).forEach(([dt, config]) => {
+        dtMapping[dt] = config.lesionTypes.map((lt) => ({
+          col: `Q-value (${lt.name})`,
+          type: lt.lesionType
+        }));
+      });
+      const qValueEntries = [];
+      Object.entries(this.state.config.settings.dtUsage).forEach(([key, isChecked]) => {
+        if (isChecked && dtMapping[key]) {
+          dtMapping[key].forEach(({ col, type }) => {
+            const colIndex = columns.findIndex((c) => c.label === col);
+            if (colIndex !== -1) qValueEntries.push({ colIndex, type });
+          });
+        }
+      });
+      const modifiedColumns = [{ label: "", width: "20px" }, ...result.topGeneTable.columns];
+      const lesionTypeCircleCache = new Map(
+        Object.entries(lesionTypeColors).map(([type, color]) => [
+          type,
+          `<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background-color:${color};margin-right:3px;"></span>`
+        ])
+      );
+      const processedRows = result.topGeneTable.rows.map((row) => {
+        const circles = qValueEntries.filter(({ colIndex }) => {
+          const qValue = row[colIndex]?.value;
+          return typeof qValue === "number" && qValue < qValueThreshold;
+        }).map(({ type }) => lesionTypeCircleCache.get(type));
+        return [{ value: "", html: circles.join("") }, ...row];
+      });
+      showGrin2ResultTable({
+        tableDiv,
+        app: this.app,
+        columns: modifiedColumns,
+        rows: processedRows,
+        dataItems: result.topGeneTable.rows,
+        getGene: (row) => row[0]?.value,
+        matrixButtonFormat: "Matrix ({n} genes selected)",
+        maxHeight: "400px",
+        maxWidth: "100%",
+        dataTestId: "sjpp-grin2-top-genes-table",
+        resize: "both",
+        selectAll: false,
+        allowRestoreRowOrder: true,
+        restoreButtonInFooter: true,
+        download: {
+          fileName: `grin2_top_genes_${(/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-").slice(0, -5)}.tsv`
+        },
+        header: {
+          allowSort: true,
+          style: {
+            "font-weight": this.statsTableFontWeight,
+            "background-color": this.backgroundColor
+          }
+        }
+      });
+    }
+    if (result.stats?.lst) {
+      const tablesContainer = this.dom.div.append("div").style("margin-top", "50px");
+      for (const section of result.stats.lst.slice(1)) {
+        tablesContainer.append("h4").style("margin", this.headerMargin).style("margin-top", "15px").style("font-size", `${this.headerFontSize - 2}px`).text(section.name);
+        const table = table2col({ holder: tablesContainer.append("div"), margin: "2px 8px" });
+        for (const [k, v] of section.rows) {
+          table.addRow(k, v);
+        }
+      }
+    }
+  }
+};
+var grin2Init = getCompInit(GRIN2);
+var componentInit = grin2Init;
+function getDefaultSettings(opts) {
+  const defaults = {
+    manhattan: {
+      // Core plot dimensions
+      plotWidth: 1e3,
+      plotHeight: 400,
+      pngDotRadius: 2,
+      // Layout spacing
+      yAxisX: 70,
+      yAxisY: 40,
+      yAxisSpace: 20,
+      xAxisLabelPad: 30,
+      yAxisPad: 5,
+      axisColor: "#545454",
+      showYAxisLine: true,
+      // Typography
+      fontSize: 12,
+      // Legend settings
+      showLegend: true,
+      legendItemWidth: 80,
+      legendDotRadius: 3,
+      legendRightOffset: 15,
+      legendTextOffset: 12,
+      legendVerticalOffset: 4,
+      legendFontSize: 12,
+      // Interactive dots
+      showInteractiveDots: true,
+      interactiveDotRadius: 2,
+      interactiveDotStrokeWidth: 1,
+      // Download options
+      showDownload: true,
+      // Max genes to show in table, interactive dots cap, and tooltip genes
+      maxGenesToShow: 500,
+      interactiveDotsCap: 5e3,
+      maxTooltipGenes: 5,
+      // Q-value threshold for significance indicators in the table, tooltips, and for determining which dots become interactive
+      qValueThreshold: 0.05,
+      // Colors for lesion types (currently used for table significance indicators. Long term will also be used for the rust code colors)
+      lesionTypeColors: {
+        mutation: "#44AA44",
+        // green
+        loss: "#4444FF",
+        // blue
+        gain: "#FF4444",
+        // red
+        fusion: "#FFA500",
+        // orange
+        sv: "#9932CC"
+        // purple
+      },
+      // Threshold for the rust code when determining if we need to raise the cap value from the default
+      maxCappedPoints: 5,
+      // Bin size for cap calculations
+      binSize: 10,
+      // Hard cap regardless of data distribution
+      hardCap: 200
+    }
+  };
+  return Object.assign(defaults, opts?.overrides);
+}
+async function getPlotConfig(opts, app) {
+  const queries = app.vocabApi.termdbConfig.queries;
+  const defaultSettings = getDefaultSettings(opts);
+  const dtUsage = {};
+  if (queries?.snvindel) {
+    dtUsage[dtsnvindel] = { checked: true, label: dt2lesion[dtsnvindel].uilabel };
+  }
+  if (queries?.cnv) {
+    dtUsage[dtcnv] = { checked: true, label: dt2lesion[dtcnv].uilabel };
+  }
+  if (queries?.svfusion) {
+    if (queries.svfusion.dtLst.includes(dtfusionrna)) {
+      dtUsage[dtfusionrna] = { checked: false, label: dt2lesion[dtfusionrna].uilabel };
+    }
+    if (queries.svfusion.dtLst.includes(dtsv)) {
+      dtUsage[dtsv] = { checked: false, label: dt2lesion[dtsv].uilabel };
+    }
+  }
+  const config = {
+    chartType: "grin2",
+    settings: {
+      controls: {},
+      dtUsage,
+      runAnalysis: false,
+      manhattan: {
+        ...defaultSettings.manhattan,
+        ...opts?.manhattan
+      },
+      snvindelOptions: queries?.snvindel ? {
+        // minTotalDepth: 10,
+        // minAltAlleleCount: 2,
+        consequences: [],
+        hyperMutator: 1e3
+      } : void 0,
+      cnvOptions: queries?.cnv ? {
+        lossThreshold: -0.4,
+        gainThreshold: 0.3,
+        maxSegLength: 0,
+        hyperMutator: 500
+      } : void 0,
+      fusionOptions: queries?.svfusion?.dtLst?.includes(dtfusionrna) ? {} : void 0,
+      svOptions: queries?.svfusion?.dtLst?.includes(dtsv) ? {} : void 0
+    }
+  };
+  return copyMerge(config, opts);
+}
+export {
+  componentInit,
+  getDefaultSettings,
+  getPlotConfig,
+  grin2Init,
+  showGrin2ResultTable
+};
+//# sourceMappingURL=grin2-GJKLNT4J.js.map