@sjcrh/proteinpaint-client 2.166.0 → 2.167.0

package/dist/grin2-Y57FKOV6.js

@@ -0,0 +1,1044 @@
+import {
+  PlotBase
+} from "./chunk-OA7TPCTX.js";
+import {
+  axisstyle,
+  get$id,
+  getNormalRoot,
+  make_one_checkbox,
+  renderTable,
+  sayerror,
+  table2col,
+  to_svg
+} from "./chunk-PX7A6LBY.js";
+import "./chunk-HJ6L54YS.js";
+import {
+  dofetch3
+} from "./chunk-6ADTREVX.js";
+import "./chunk-DKI7YOTJ.js";
+import {
+  dt2lesion,
+  dtcnv,
+  dtfusionrna,
+  dtsnvindel,
+  dtsv,
+  mclass,
+  proteinChangingMutations
+} from "./chunk-6VQ4C735.js";
+import {
+  Menu
+} from "./chunk-TGZA4ETW.js";
+import {
+  icons
+} from "./chunk-5MWX5HUZ.js";
+import "./chunk-IQIXGTQV.js";
+import "./chunk-ZFFHOEBE.js";
+import {
+  copyMerge,
+  getCompInit
+} from "./chunk-DDOM4XYV.js";
+import "./chunk-7NTZWOJV.js";
+import "./chunk-LD45BCVM.js";
+import "./chunk-RA5EXEHB.js";
+import {
+  quadtree
+} from "./chunk-2MN5JLZB.js";
+import {
+  axisLeft
+} from "./chunk-LOZEKOES.js";
+import "./chunk-TOU7EVFQ.js";
+import {
+  linear
+} from "./chunk-W2IWHXLL.js";
+import "./chunk-5OHXYXLD.js";
+import "./chunk-UJUXE42U.js";
+import "./chunk-OMR2DT66.js";
+import {
+  select_default
+} from "./chunk-NDWTN4U5.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) {
+      const point = node.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 });
+        }
+      }
+    }
+    return false;
+  });
+  return candidates;
+}
+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("-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");
+          renderTable({
+            div: holder,
+            header: { allowSort: true },
+            columns: [
+              { label: "Gene" },
+              { label: `${nearbyDots[0].chrom} pos` },
+              { label: "Type" },
+              { label: "-log\u2081\u2080(q-value)", sortable: true },
+              { label: "Subject count", sortable: true }
+            ],
+            rows: nearbyDots.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.y.toFixed(3) },
+              { value: d.nsubj }
+            ]),
+            showLines: false,
+            showHeader: true,
+            striped: true,
+            resize: false
+          });
+          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("-log\u2081\u2080(q-value)", d.y.toFixed(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");
+        const headerDiv = holder.append("div").style("display", "flex").style("align-items", "center").style("gap", "8px").style("margin-bottom", "8px");
+        headerDiv.append("span").style("font-weight", "bold").text("Select genes:");
+        const matrixBtn = headerDiv.append("button").text("Matrix (0)").property("disabled", true).on("click", () => {
+          matrixBtn.property("disabled", true);
+          clickMenu.hide();
+          createMatrixFromGenes(selectedGenes, app);
+        });
+        const lollipopBtn = headerDiv.append("button").text("Lollipop").property("disabled", true).on("click", () => {
+          if (lastTouchedGene) {
+            lollipopBtn.property("disabled", true);
+            clickMenu.hide();
+            createLollipopFromGene(lastTouchedGene, app);
+          }
+        });
+        let selectedGenes = [];
+        let lastTouchedGene = null;
+        renderTable({
+          div: holder,
+          header: { allowSort: true },
+          columns: [
+            { label: "Gene" },
+            { label: `${allNearbyDots[0].chrom} pos` },
+            { label: "Type" },
+            { label: "-log\u2081\u2080(q-value)", sortable: true },
+            { label: "Subject count", sortable: true }
+          ],
+          rows: allNearbyDots.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.y.toFixed(3) },
+            { value: d.nsubj }
+          ]),
+          showLines: false,
+          showHeader: true,
+          striped: true,
+          resize: false,
+          noButtonCallback: (rowIndex, checkboxNode) => {
+            const geneName = allNearbyDots[rowIndex].gene;
+            if (checkboxNode.checked) {
+              selectedGenes.push(geneName);
+              lastTouchedGene = geneName;
+            } else {
+              selectedGenes = selectedGenes.filter((g) => g !== geneName);
+              lastTouchedGene = selectedGenes.length > 0 ? selectedGenes[selectedGenes.length - 1] : null;
+            }
+            if (selectedGenes.length > 0) {
+              lollipopBtn.text(`Lollipop (${lastTouchedGene})`);
+              lollipopBtn.property("disabled", false);
+            } else {
+              lollipopBtn.text("Lollipop");
+              lollipopBtn.property("disabled", true);
+            }
+            matrixBtn.text(`Matrix (${selectedGenes.length})`).property("disabled", !selectedGenes.length);
+          }
+        });
+      }
+    });
+  }
+  if (data.plotData.chrom_data) {
+    const chromLabelY = settings.plotHeight + 2 * settings.pngDotRadius + settings.yAxisY;
+    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) {
+  try {
+    const termwrappers = await Promise.all(
+      geneSymbols.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
+var GRIN2 = class extends PlotBase {
+  constructor(opts, api) {
+    super(opts, api);
+    this.type = "grin2";
+    // 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 });
+      this.dom.snvindel_minTotalDepth = this.addOptionRowToTable(
+        t2,
+        "Min Total Depth",
+        this.state.config.settings?.snvindelOptions?.minTotalDepth ?? 10,
+        // default. Getting from state and defaulting to 10 if not available
+        0,
+        // min
+        1e6,
+        // max
+        1
+        // step
+      );
+      this.dom.snvindel_minAltAlleleCount = this.addOptionRowToTable(
+        t2,
+        "Min Alt Allele Count",
+        this.state.config.settings?.snvindelOptions?.minAltAlleleCount ?? 2,
+        // default. Getting from state and defaulting to 2 if not available
+        0,
+        1e6,
+        1
+      );
+      {
+        const [labelCell, containerCell] = t2.addRow();
+        labelCell.text("Consequences").style("font-size", `${this.optionsTextFontSize}px`).style("font-weight", "600").style("padding-top", "8px");
+        this.createConsequenceCheckboxes(containerCell);
+      }
+      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: "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: "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: "grin2-checkbox-sv",
+        callback: (checked) => {
+          t2.table.style("display", checked ? "" : "none");
+          this.updateRunButtonFromCheckboxes();
+        }
+      });
+    };
+    this.opts = opts;
+    opts.holder.classed("sjpp-grin2-main", true);
+    this.dom = {
+      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");
+  }
+  getState(appState) {
+    const config = appState.plots.find((p) => p.id === this.id);
+    if (!config) {
+      throw `No plot with id='${this.id}' found. Did you set this.id before this.api = getComponentApi(this)?`;
+    }
+    return {
+      config
+    };
+  }
+  // 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.controls.append("div").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", "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).style("font-size", `${this.optionsTextFontSize}px`);
+    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 (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 = {
+        genome: this.app.vocabApi.vocab.genome,
+        dslabel: this.app.vocabApi.vocab.dslabel,
+        filter: getNormalRoot(this.app.vocabApi.state.termfilter.filter),
+        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,
+        ...configValues
+      };
+      const response = await dofetch3("/grin2", {
+        body: requestData
+      });
+      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) {
+      sayerror(this.dom.div, `Error running GRIN2: ${error instanceof Error ? error.message : error}`);
+    } finally {
+      this.dom.controls.style("pointer-events", "auto").style("opacity", "1");
+      this.dom.runButton.property("disabled", false).text("Run GRIN2");
+    }
+  }
+  async init() {
+  }
+  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.showingTop?.toLocaleString()} of ${result.totalGenes?.toLocaleString()})`);
+      const matrixBtn = headerDiv.append("button").text("Matrix (0 genes selected)").property("disabled", true).on("click", () => {
+        matrixBtn.property("disabled", true);
+        createMatrixFromGenes(selectedGenes, this.app);
+      });
+      const lollipopBtn = headerDiv.append("button").text("Lollipop").property("disabled", true).on("click", () => {
+        if (lastTouchedGene) {
+          lollipopBtn.property("disabled", true);
+          createLollipopFromGene(lastTouchedGene, this.app);
+        }
+      });
+      const tableDiv = tableContainer.append("div");
+      const selectedGenes = [];
+      let lastTouchedGene = null;
+      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];
+      });
+      renderTable({
+        columns: modifiedColumns,
+        rows: processedRows,
+        div: tableDiv,
+        maxHeight: "400px",
+        maxWidth: "100%",
+        dataTestId: "grin2-top-genes-table",
+        noButtonCallback: (rowIndex, checkboxNode) => {
+          const geneName = result.topGeneTable.rows[rowIndex][0]?.value;
+          if (checkboxNode.checked) {
+            selectedGenes.push(geneName);
+            lastTouchedGene = geneName;
+          } else {
+            selectedGenes.splice(selectedGenes.indexOf(geneName), 1);
+            lastTouchedGene = selectedGenes.length > 0 ? selectedGenes[selectedGenes.length - 1] : null;
+          }
+          if (selectedGenes.length > 0) {
+            lollipopBtn.text(`Lollipop (${lastTouchedGene})`);
+            lollipopBtn.property("disabled", false);
+          } else {
+            lollipopBtn.text("Lollipop");
+            lollipopBtn.property("disabled", true);
+          }
+          matrixBtn.text(`Matrix (${selectedGenes.length} genes selected)`).property("disabled", !selectedGenes.length);
+        },
+        selectAll: false,
+        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.processingSummary) {
+      const headerDiv = this.dom.div.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("GRIN2 Processing Summary");
+      const tablesContainer = this.dom.div.append("div");
+      const generalTable = table2col({
+        holder: tablesContainer.append("div")
+      });
+      generalTable.addRow("Total Samples", result.processingSummary.totalSamples.toLocaleString());
+      generalTable.addRow("Processed Samples", result.processingSummary.processedSamples.toLocaleString());
+      generalTable.addRow("Unprocessed Samples", (result.processingSummary.unprocessedSamples ?? 0).toLocaleString());
+      generalTable.addRow("Failed Samples", result.processingSummary.failedSamples.toLocaleString());
+      generalTable.addRow(
+        "Failed Files",
+        result.processingSummary.failedFiles?.length ? result.processingSummary.failedFiles.map((f) => f.sampleName).join(", ") : "0"
+      );
+      generalTable.addRow("Total Lesions", result.processingSummary.totalLesions.toLocaleString());
+      generalTable.addRow("Processed Lesions", result.processingSummary.processedLesions.toLocaleString());
+      if (result.processingSummary.lesionCounts?.byType) {
+        const typeLabels = {};
+        Object.values(dt2lesion).forEach((config) => {
+          config.lesionTypes.forEach((lt) => {
+            typeLabels[lt.lesionType] = lt.name;
+          });
+        });
+        const columns = [
+          { label: "Lesion Type" },
+          { label: "Count", sortable: true },
+          { label: "Samples", sortable: true },
+          { label: "Capped" }
+        ];
+        const rows = Object.entries(result.processingSummary.lesionCounts.byType).map(([type, typeData]) => {
+          const { count, capped, samples } = typeData;
+          return [
+            { value: typeLabels[type] || type },
+            { value: count.toLocaleString() },
+            { value: samples?.toLocaleString() ?? "0" },
+            { value: capped ? "Yes" : "No" }
+          ];
+        });
+        renderTable({
+          columns,
+          rows,
+          dataTestId: "grin2-lesion-counts-table",
+          div: tablesContainer.append("div"),
+          showLines: false,
+          striped: true,
+          maxHeight: "none",
+          maxWidth: "100%",
+          resize: false,
+          download: {
+            fileName: `grin2_lesion_stats_${(/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-").slice(0, -5)}.tsv`
+          },
+          header: {
+            style: {
+              "font-weight": this.statsTableFontWeight,
+              "background-color": this.backgroundColor
+            },
+            allowSort: true
+          }
+        });
+      }
+    }
+    if (result.timing) {
+      this.dom.div.append("div").style("margin", this.sectionMargin).style("font-size", `${this.optionsTextFontSize}px`).style("color", this.optionsTextColor).text(
+        `Analysis completed in ${result.timing.totalTime} (Processing: ${result.timing.processingTime}, GRIN2: ${result.timing.grin2Time}, Plotting: ${result.timing.plottingTime})`
+      );
+    }
+    const expectedToProcessSamples = result.processingSummary.totalSamples - result.processingSummary.failedSamples;
+    if (result.processingSummary.processedSamples < expectedToProcessSamples) {
+      this.dom.div.append("div").style("margin", this.sectionMargin).style("font-size", `${this.optionsTextFontSize}px`).style("color", this.optionsTextColor).text(
+        `Note: Per-type lesion caps were reached before all samples could be processed. Analysis ran on ${result.processingSummary.processedSamples.toLocaleString()} of ${expectedToProcessSamples.toLocaleString()} samples.`
+      );
+    }
+  }
+};
+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: 20,
+      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 and interactive dots cap
+      maxGenesToShow: 500,
+      interactiveDotsCap: 5e3,
+      maxTooltipGenes: 5,
+      // Q-value threshold for significance indicators in the table
+      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
+      }
+    }
+  };
+  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
+    },
+    hidePlotFilter: true
+  };
+  return copyMerge(config, opts);
+}
+export {
+  componentInit,
+  getDefaultSettings,
+  getPlotConfig,
+  grin2Init
+};
+//# sourceMappingURL=grin2-Y57FKOV6.js.map