@sjcrh/proteinpaint-client 2.183.0 → 2.183.1

package/dist/proteinView-ESTBC3K2.js

@@ -0,0 +1,633 @@
+import {
+  LegendCircleReference,
+  PlotBase,
+  addGeneSearchbox,
+  axisstyle,
+  shapeSelector,
+  shapesArray,
+  table2col
+} from "./chunk-2LCTMDCS.js";
+import {
+  aa2gmcoord
+} from "./chunk-HJ6L54YS.js";
+import "./chunk-E5JQ3PN6.js";
+import {
+  dofetch3
+} from "./chunk-RCYTUKAJ.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-IQIXGTQV.js";
+import "./chunk-UCLS2SVB.js";
+import {
+  copyMerge,
+  getCompInit
+} from "./chunk-MVTCBVSX.js";
+import "./chunk-F6V4AYWP.js";
+import {
+  roundValue
+} from "./chunk-5OHXYXLD.js";
+import "./chunk-DQC5FFGV.js";
+import "./chunk-JOT4WDJE.js";
+import "./chunk-OTCYJP7G.js";
+import "./chunk-GXINX3WK.js";
+import {
+  TermTypes
+} from "./chunk-SOED2SLH.js";
+import {
+  getColors,
+  mclass
+} from "./chunk-XRVBHNCW.js";
+import "./chunk-BEWDIM6H.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 "./chunk-NDWTN4U5.js";
+import {
+  rgb
+} from "./chunk-OMR2DT66.js";
+import "./chunk-HFNDKYVF.js";
+
+// plots/proteinView.ts
+var defaultConfig = {
+  chartType: "proteinView"
+};
+var ProteinView = class _ProteinView extends PlotBase {
+  static {
+    this.type = "proteinView";
+  }
+  constructor(opts, api) {
+    super(opts, api);
+    this.type = _ProteinView.type;
+    this.components = {};
+  }
+  async init() {
+    const holder = this.opts.holder.append("div").style("padding", "10px");
+    this.dom = {
+      holder,
+      body: holder.append("div"),
+      tip: new Menu({ padding: "" })
+    };
+  }
+  getState(appState) {
+    const config = appState.plots.find((p) => p.id === this.id);
+    if (!config) throw `No plot with id='${this.id}' found`;
+    return { config };
+  }
+  async main() {
+    const term = this.state.config?.tw?.term;
+    if (!term?.name) throw new Error("proteinView: selected protein term is missing");
+    const body = {
+      genome: this.app.opts.state.vocab.genome,
+      dslabel: this.app.opts.state.vocab.dslabel,
+      term: this.state.config.tw,
+      filter: this.state.config.filter,
+      filter0: this.state.config.filter0
+    };
+    const data = await dofetch3("termdb/proteome", { body });
+    if (data.error) throw data.error;
+    this.dom.body.selectAll("*").remove();
+    renderCohortVolcano(this.dom.body, data, this);
+    renderPTMLollipop(this.dom.body, data, this);
+  }
+};
+function renderCohortVolcano(holder, data, self) {
+  const dots = [];
+  for (const cohortData of data?.cohorts || []) {
+    const log2fc = getLog2Ratio(cohortData.foldChange);
+    const pValue = Number(cohortData.pValue);
+    const testedN = Number(cohortData.testedN);
+    const controlN = Number(cohortData.controlN);
+    if (log2fc === null || !Number.isFinite(pValue) || pValue <= 0) continue;
+    dots.push({
+      assayName: cohortData.assayName,
+      cohortName: cohortData.cohortName,
+      PTMType: cohortData.PTMType,
+      modSites: cohortData.modSites,
+      proteinAccession: cohortData.proteinAccession,
+      uniqueIdentifier: cohortData.uniqueIdentifier,
+      log2fc,
+      pValue,
+      score: -Math.log10(Math.max(pValue, 1e-300)),
+      testedN: Number.isFinite(testedN) ? testedN : 0,
+      controlN: Number.isFinite(controlN) ? controlN : 0
+    });
+  }
+  const panel = holder.append("div").style("margin-bottom", "14px");
+  panel.append("div").style("font-weight", 600).style("margin-bottom", "6px").text("Cohort Volcano");
+  if (!dots.length) {
+    panel.append("div").style("font-size", ".85em").style("color", "#666").text("No cohorts with valid fold-change and p-value to plot.");
+    return;
+  }
+  const width = 640;
+  const height = 660;
+  const margin = { top: 40, right: 70, bottom: 120, left: 70 };
+  const innerW = width - margin.left - margin.right;
+  const innerH = height - margin.top - margin.bottom;
+  let minX = Number.POSITIVE_INFINITY;
+  let maxX = Number.NEGATIVE_INFINITY;
+  let maxY = 0;
+  let maxTestedN = 0;
+  let minTestedN = Number.POSITIVE_INFINITY;
+  for (const p of dots) {
+    minX = Math.min(minX, p.log2fc);
+    maxX = Math.max(maxX, p.log2fc);
+    maxY = Math.max(maxY, p.score);
+    maxTestedN = Math.max(maxTestedN, p.testedN);
+    if (p.testedN > 0) minTestedN = Math.min(minTestedN, p.testedN);
+  }
+  if (maxY < 1) maxY = 1;
+  if (!Number.isFinite(minTestedN)) minTestedN = 1;
+  const xSpan = Math.max(0.05, maxX - minX);
+  const xPad = Math.max(0.01, xSpan * 0.1);
+  const xMin = Math.min(0, minX - xPad);
+  const xMax = Math.max(0, maxX + xPad);
+  const yMax = maxY * 1.15;
+  const xScale = linear().domain([xMin, xMax]).range([0, innerW]);
+  const yScale = linear().domain([0, yMax]).range([innerH, 0]);
+  const radiusScale = linear().domain([minTestedN, Math.max(minTestedN + 1, maxTestedN)]).range([4, 12]);
+  const assayNames = [...new Set(dots.map((d) => d.assayName))].sort();
+  const cohortNames = [...new Set(dots.map((d) => d.cohortName))].sort();
+  const proteinAccessions = [...new Set(dots.map((d) => d.proteinAccession))].sort();
+  const assayColorScale = getColors(assayNames.length).domain(assayNames);
+  const cohortColorScale = getColors(cohortNames.length).domain(cohortNames);
+  const proteinColorScale = getColors(proteinAccessions.length).domain(proteinAccessions);
+  const assayColors = new Map(assayNames.map((name) => [name, rgb(assayColorScale(name)).formatHex()]));
+  const cohortColors = new Map(cohortNames.map((name) => [name, rgb(cohortColorScale(name)).formatHex()]));
+  const proteinColors = new Map(
+    proteinAccessions.map((acc) => [acc, rgb(proteinColorScale(acc)).formatHex()])
+  );
+  const makeShapeMap = (items) => new Map(items.map((item, i) => [item, i % shapesArray.length]));
+  const assayShapes = makeShapeMap(assayNames);
+  const cohortShapes = makeShapeMap(cohortNames);
+  const proteinShapes = makeShapeMap(proteinAccessions);
+  let colorMode = "none";
+  let shapeMode = "none";
+  const defaultDotColor = "#9ca3af";
+  const getColor = (d) => {
+    switch (colorMode) {
+      case "none":
+        return defaultDotColor;
+      case "assayType":
+        return assayColors.get(d.assayName) ?? "#888";
+      case "cohort":
+        return cohortColors.get(d.cohortName) ?? "#888";
+      case "proteinAccession":
+        return proteinColors.get(d.proteinAccession) ?? "#888";
+      default:
+        return "#888";
+    }
+  };
+  const getShapeIndex = (d) => {
+    switch (shapeMode) {
+      case "none":
+        return 0;
+      case "assayType":
+        return assayShapes.get(d.assayName) ?? 0;
+      case "cohort":
+        return cohortShapes.get(d.cohortName) ?? 0;
+      case "proteinAccession":
+        return proteinShapes.get(d.proteinAccession) ?? 0;
+      default:
+        return 0;
+    }
+  };
+  const getShapePath = (d) => {
+    const index = getShapeIndex(d) % shapesArray.length;
+    return shapesArray[index];
+  };
+  const getShapeTransform = (d, sizeScale = 1) => {
+    const r = radiusScale(Math.max(minTestedN, d.testedN || minTestedN)) * sizeScale;
+    const scale = r / 8;
+    const x = xScale(d.log2fc) - 8 * scale;
+    const y = yScale(d.score) - 8 * scale;
+    return `translate(${x},${y}) scale(${scale})`;
+  };
+  const groupingModes = [
+    { key: "none", label: "Default" },
+    { key: "assayType", label: "Assay" },
+    { key: "cohort", label: "Cohort" },
+    { key: "proteinAccession", label: "Isoform" }
+  ];
+  const makeHiddenState = () => ({
+    none: /* @__PURE__ */ new Set(),
+    assayType: /* @__PURE__ */ new Set(),
+    cohort: /* @__PURE__ */ new Set(),
+    proteinAccession: /* @__PURE__ */ new Set()
+  });
+  const hiddenColor = makeHiddenState();
+  const hiddenShape = makeHiddenState();
+  const getValueByMode = (d, mode) => {
+    switch (mode) {
+      case "none":
+        return "";
+      case "assayType":
+        return d.assayName;
+      case "cohort":
+        return d.cohortName;
+      case "proteinAccession":
+        return d.proteinAccession;
+      default:
+        return "";
+    }
+  };
+  const isDotHidden = (d) => {
+    const colorValue = getValueByMode(d, colorMode);
+    const shapeValue = getValueByMode(d, shapeMode);
+    return hiddenColor[colorMode].has(colorValue) || hiddenShape[shapeMode].has(shapeValue);
+  };
+  const getDotDistancePx = (d1, d2) => {
+    const x = xScale(d1.log2fc) - xScale(d2.log2fc);
+    const y = yScale(d1.score) - yScale(d2.score);
+    return Math.sqrt(x * x + y * y);
+  };
+  const getClusterDots = (seed) => {
+    const thresholdPx = 5;
+    return dots.filter((d) => !isDotHidden(d) && getDotDistancePx(d, seed) < thresholdPx).sort((a, b) => getDotDistancePx(a, seed) - getDotDistancePx(b, seed));
+  };
+  const renderClusterTooltip = (clusterDots) => {
+    const tip = self.dom.tip.clear().d;
+    if (clusterDots.length > 1) {
+      tip.append("div").style("color", "#888").style("font-weight", "bold").style("margin", "0 0 6px 0").text(`${clusterDots.length} Cohorts`);
+    }
+    const list = tip.append("div");
+    if (clusterDots.length > 1) {
+      const grouped = /* @__PURE__ */ new Map();
+      for (const d of clusterDots) {
+        const key = [d.assayName, d.cohortName, d.modSites || ""].join("	");
+        if (!grouped.has(key)) grouped.set(key, d);
+      }
+      for (const d of grouped.values()) {
+        const block = list.append("div").style("padding", "3px 0").style("border-bottom", "1px solid #f1f1f1");
+        const table = table2col({ holder: block.append("table") });
+        table.addRow("Assay", d.assayName);
+        table.addRow("Cohort", d.cohortName);
+        if (d.modSites) table.addRow("Modified Site", d.modSites);
+      }
+      return;
+    }
+    for (const d of clusterDots) {
+      const block = list.append("div").style("padding", "3px 0").style("border-bottom", "1px solid #f1f1f1");
+      const table = table2col({ holder: block.append("table") });
+      table.addRow("Assay", d.assayName);
+      table.addRow("Cohort", d.cohortName);
+      table.addRow("Protein Accession", d.proteinAccession);
+      if (d.PTMType) {
+        table.addRow("PTM Type", d.PTMType);
+        table.addRow("Modified Site", d.modSites);
+        table.addRow("PTM", d.uniqueIdentifier);
+      } else {
+        table.addRow("Isoform", d.uniqueIdentifier);
+      }
+      table.addRow("log2 fold change", roundValue(d.log2fc, 3));
+      table.addRow("p value", d.pValue.toExponential(2));
+      table.addRow("-log10(p)", roundValue(d.score, 3));
+      table.addRow("Tested samples", d.testedN);
+      table.addRow("Control samples", d.controlN);
+    }
+  };
+  const updateDots = () => {
+    cohortDots.attr("fill", (d) => getColor(d)).attr("stroke", (d) => getColor(d)).attr("d", (d) => getShapePath(d)).attr("transform", (d) => getShapeTransform(d)).style("opacity", (d) => isDotHidden(d) ? 0 : 1).style("pointer-events", (d) => isDotHidden(d) ? "none" : "auto");
+  };
+  const getShapeMapInUse = () => {
+    switch (shapeMode) {
+      case "none":
+        return assayShapes;
+      case "assayType":
+        return assayShapes;
+      case "cohort":
+        return cohortShapes;
+      case "proteinAccession":
+        return proteinShapes;
+      default:
+        return assayShapes;
+    }
+  };
+  const plotAndLegend = panel.append("div").style("display", "flex").style("align-items", "flex-start").style("gap", "14px").style("flex-wrap", "wrap");
+  const svg = plotAndLegend.append("svg").attr("width", width).attr("height", height).style("display", "block").style("max-width", "100%").style("height", "auto");
+  const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
+  const xAxis = g.append("g").attr("transform", `translate(0,${innerH})`).call(axisBottom(xScale));
+  axisstyle({ axis: xAxis, color: "black", showline: true });
+  const yAxis = g.append("g").call(axisLeft(yScale));
+  axisstyle({ axis: yAxis, color: "black", showline: true });
+  const x0 = xScale(0);
+  const pThreshold = -Math.log10(0.05);
+  const thresholdY = yScale(Math.min(yMax, pThreshold));
+  g.append("line").attr("x1", x0).attr("x2", x0).attr("y1", 0).attr("y2", innerH).attr("stroke", "black").attr("stroke-dasharray", "5 4").attr("stroke-opacity", 0.4);
+  g.append("line").attr("x1", 0).attr("x2", innerW).attr("y1", thresholdY).attr("y2", thresholdY).attr("stroke", "black").attr("stroke-dasharray", "5 4").attr("stroke-opacity", 0.4);
+  g.append("text").attr("x", innerW / 2).attr("y", innerH + 44).attr("text-anchor", "middle").style("font-weight", 600).text("log2 fold change (disease / control)");
+  g.append("text").attr("transform", `translate(${-50},${innerH / 2}) rotate(-90)`).attr("text-anchor", "middle").style("font-weight", 600).text("-log10(p-value)");
+  const cohortDots = g.selectAll("path.cohort-dot").data(dots).enter().append("path").attr("class", "cohort-dot").attr("transform", (d) => getShapeTransform(d, 0.9)).attr("d", (d) => getShapePath(d)).attr("fill", (d) => getColor(d)).attr("fill-opacity", 0.5).attr("stroke", (d) => getColor(d)).attr("stroke-width", 1).style("cursor", "pointer");
+  cohortDots.transition().duration(350).attr("d", (d) => getShapePath(d)).attr("transform", (d) => getShapeTransform(d, 1));
+  updateDots();
+  cohortDots.on("mouseover", function(_event, d) {
+    const clusterDots = getClusterDots(d);
+    renderClusterTooltip(clusterDots);
+    self.dom.tip.showunder(this);
+  }).on("mouseout", () => {
+    self.dom.tip.hide();
+  });
+  const legend = plotAndLegend.append("div").style("margin", "0").style("min-width", "220px").style("font-size", ".75em").style("color", "#374151");
+  const colorLegendDiv = legend.append("div").style("margin-bottom", "12px");
+  const shapeLegendDiv = legend.append("div").style("margin-bottom", "12px");
+  function renderColorLegend() {
+    colorLegendDiv.selectAll("*").remove();
+    shapeLegendDiv.selectAll("*").remove();
+    const modeRow = colorLegendDiv.append("div").style("display", "flex").style("gap", "10px").style("margin-bottom", "6px").style("flex-wrap", "wrap");
+    modeRow.append("span").text("Color by");
+    for (const { key, label } of groupingModes) {
+      modeRow.append("span").text(label).style("cursor", "pointer").style("font-weight", key === colorMode ? "600" : "400").style("text-decoration", key === colorMode ? "underline" : "none").style("color", key === colorMode ? "#111" : "#6b7280").on("click", () => {
+        colorMode = key;
+        updateDots();
+        renderColorLegend();
+      });
+    }
+    const makeLegendItems = (items, colorMap) => {
+      const openColorMenu = (event, name, swatch) => {
+        const menu = new Menu({ padding: "0px" });
+        const div = menu.d.append("div");
+        const hidden = hiddenColor[colorMode].has(name);
+        const hiddenCount = hiddenColor[colorMode].size;
+        div.append("div").attr("class", "sja_menuoption sja_sharp_border").text(hidden ? "Show" : "Hide").on("click", () => {
+          if (hidden) hiddenColor[colorMode].delete(name);
+          else hiddenColor[colorMode].add(name);
+          updateDots();
+          renderColorLegend();
+          menu.hide();
+        });
+        div.append("div").attr("class", "sja_menuoption sja_sharp_border").text("Show only").on("click", () => {
+          hiddenColor[colorMode].clear();
+          for (const item of items) {
+            if (item != name) hiddenColor[colorMode].add(item);
+          }
+          updateDots();
+          renderColorLegend();
+          menu.hide();
+        });
+        if (hiddenCount > 1)
+          div.append("div").attr("class", "sja_menuoption sja_sharp_border").text("Show all").on("click", () => {
+            hiddenColor[colorMode].clear();
+            updateDots();
+            renderColorLegend();
+            menu.hide();
+          });
+        const input = div.append("div").attr("class", "sja_sharp_border").style("padding", "0px 10px").text("Color:").append("input").attr("type", "color").attr("value", colorMap.get(name) ?? "#888").on("change", () => {
+          const newColor = input.node().value;
+          colorMap.set(name, newColor);
+          swatch.style("background", newColor);
+          updateDots();
+          menu.hide();
+        });
+        menu.showunder(event.target);
+      };
+      for (const name of items) {
+        const hidden = hiddenColor[colorMode].has(name);
+        const row = colorLegendDiv.append("div").style("display", "flex").style("align-items", "center").style("gap", "6px").style("margin-bottom", "3px");
+        const swatch = row.append("span").style("display", "inline-block").style("width", "10px").style("height", "10px").style("border-radius", "50%").style("background", colorMap.get(name) ?? "#888").style("opacity", hidden ? 0.35 : 0.8).style("flex-shrink", "0").style("cursor", "pointer");
+        swatch.on("click", (event) => openColorMenu(event, name, swatch));
+        row.append("span").text(name).style("text-decoration", hidden ? "line-through" : "none").style("cursor", "pointer").on("click", (event) => openColorMenu(event, name, swatch));
+      }
+    };
+    if (colorMode === "assayType") {
+      makeLegendItems(assayNames, assayColors);
+    } else if (colorMode === "cohort") {
+      makeLegendItems(cohortNames, cohortColors);
+    } else if (colorMode === "proteinAccession") {
+      makeLegendItems(proteinAccessions, proteinColors);
+    }
+    const shapeModeRow = shapeLegendDiv.append("div").style("display", "flex").style("gap", "10px").style("margin-bottom", "6px").style("flex-wrap", "wrap");
+    shapeModeRow.append("span").text("Shape by");
+    for (const { key, label } of groupingModes) {
+      shapeModeRow.append("span").text(label).style("cursor", "pointer").style("font-weight", key === shapeMode ? "600" : "400").style("text-decoration", key === shapeMode ? "underline" : "none").style("color", key === shapeMode ? "#111" : "#6b7280").on("click", () => {
+        shapeMode = key;
+        updateDots();
+        renderColorLegend();
+      });
+    }
+    const drawShapeLegend = (items, shapeMap) => {
+      const openShapeMenu = (event, name) => {
+        const menu = new Menu({ padding: "0px" });
+        const activeShapeMap = getShapeMapInUse();
+        const div = menu.d.append("div");
+        const hidden = hiddenShape[shapeMode].has(name);
+        const hiddenCount = hiddenShape[shapeMode].size;
+        div.append("div").attr("class", "sja_menuoption sja_sharp_border").text(hidden ? "Show" : "Hide").on("click", () => {
+          if (hidden) hiddenShape[shapeMode].delete(name);
+          else hiddenShape[shapeMode].add(name);
+          updateDots();
+          renderColorLegend();
+          menu.hide();
+        });
+        div.append("div").attr("class", "sja_menuoption sja_sharp_border").text("Show only").on("click", () => {
+          hiddenShape[shapeMode].clear();
+          for (const item of items) {
+            if (item != name) hiddenShape[shapeMode].add(item);
+          }
+          updateDots();
+          renderColorLegend();
+          menu.hide();
+        });
+        if (hiddenCount > 1)
+          div.append("div").attr("class", "sja_menuoption sja_sharp_border").text("Show all").on("click", () => {
+            hiddenShape[shapeMode].clear();
+            updateDots();
+            renderColorLegend();
+            menu.hide();
+          });
+        div.append("div").attr("class", "sja_menuoption sja_sharp_border").text("Change shape").on("click", () => {
+          div.selectAll("*").remove();
+          shapeSelector(div, (index) => {
+            activeShapeMap.set(name, index);
+            updateDots();
+            renderColorLegend();
+            menu.hide();
+          });
+        });
+        menu.showunder(event.target);
+      };
+      for (const name of items) {
+        const hidden = hiddenShape[shapeMode].has(name);
+        const row = shapeLegendDiv.append("div").style("display", "flex").style("align-items", "center").style("gap", "6px").style("margin-bottom", "3px");
+        const icon = row.append("svg").attr("width", 16).attr("height", 16).style("display", "inline-block").style("cursor", "pointer");
+        icon.append("path").attr("transform", "scale(0.8)").attr("d", shapesArray[(shapeMap.get(name) || 0) % shapesArray.length]).attr("fill", "#4b5563").attr("fill-opacity", hidden ? 0.35 : 0.9);
+        icon.on("click", (event) => openShapeMenu(event, name));
+        row.append("span").text(name).style("text-decoration", hidden ? "line-through" : "none").style("cursor", "pointer").on("click", (event) => openShapeMenu(event, name));
+      }
+    };
+    if (shapeMode === "assayType") {
+      drawShapeLegend(assayNames, assayShapes);
+    } else if (shapeMode === "cohort") {
+      drawShapeLegend(cohortNames, cohortShapes);
+    } else if (shapeMode === "proteinAccession") {
+      drawShapeLegend(proteinAccessions, proteinShapes);
+    }
+  }
+  renderColorLegend();
+  const sizeLegendRow = legend.append("div").style("display", "flex").style("align-items", "flex-start").style("gap", "8px").style("margin-top", "8px");
+  sizeLegendRow.append("span").style("display", "inline-block").style("margin-top", "42px").text("Tested sample size");
+  const legendSvg = sizeLegendRow.append("svg").attr("width", 190).attr("height", 110).style("display", "block");
+  new LegendCircleReference({
+    g: legendSvg.append("g").attr("transform", "translate(12, 8)"),
+    inputMax: 12,
+    inputMin: 4,
+    maxLabel: maxTestedN || minTestedN,
+    maxRadius: radiusScale(Math.max(minTestedN + 1, maxTestedN || minTestedN)),
+    minLabel: minTestedN,
+    minRadius: radiusScale(minTestedN),
+    title: "",
+    menu: {
+      minMaxLabel: "pixels",
+      callback: async (obj) => {
+        radiusScale.range([obj.min, obj.max]);
+        updateDots();
+      }
+    }
+  });
+}
+async function renderPTMLollipop(holder, data, self) {
+  if (!data?.cohorts?.length) return;
+  const custom_variants = [];
+  const mergedMclassOverride = {};
+  const gmCache = /* @__PURE__ */ new Map();
+  for (const ptm of data.cohorts) {
+    if (!ptm.PTMType) continue;
+    const gm = await getGmForPTM(ptm.geneName, self.app.opts.genome.name, gmCache);
+    if (!gm) continue;
+    const logValue = getLog2Ratio(ptm.foldChange);
+    if (ptm.mclassOverride && typeof ptm.mclassOverride == "object") {
+      Object.assign(mergedMclassOverride, ptm.mclassOverride);
+    }
+    const site = parsePTMModSites(ptm.modSites);
+    if (!site) continue;
+    const pos = aa2gmcoord(site, gm);
+    if (!Number.isInteger(pos)) continue;
+    const ptmClass = Object.keys(ptm.mclassOverride || {})[0];
+    custom_variants.push({
+      chr: gm.chr,
+      pos,
+      mname: `${ptm.modSites}: ${ptm.cohortName}`,
+      class: ptmClass,
+      dt: 1,
+      logValue
+    });
+  }
+  if (!custom_variants.length) return;
+  const mclassOverride = {
+    className: "PTMs",
+    classes: mergedMclassOverride
+  };
+  for (const key in mclassOverride.classes) {
+    if (mclass[key]) Object.assign(mclass[key], mclassOverride.classes[key]);
+  }
+  const tk = {
+    type: "mds3",
+    name: "PTMs",
+    custom_variants,
+    skewerModes: [
+      {
+        type: "numeric",
+        byAttribute: "logValue",
+        label: "Log2FC Disease vs Control",
+        inuse: true,
+        axisheight: 100
+      }
+    ],
+    mclassOverride
+  };
+  const arg = {
+    holder: holder.append("div"),
+    genome: self.app.opts.genome,
+    nobox: true,
+    tklst: [tk],
+    mclassOverride,
+    debugmode: self.app.opts.debug,
+    query: data.cohorts[0].geneName
+  };
+  const _ = await import("./block.init-TZXJGL7D.js");
+  await _.default(arg);
+}
+function parsePTMModSites(modSites) {
+  if (!modSites) return null;
+  const regex = /([A-Za-z])(\d+)/g;
+  let m;
+  while ((m = regex.exec(modSites)) !== null) {
+    const position = Number(m[2]);
+    if (!Number.isInteger(position) || position < 1) continue;
+    return position;
+  }
+  return null;
+}
+async function getGmForPTM(geneName, genomeName, gmCache) {
+  if (!geneName) return null;
+  if (gmCache.has(geneName)) return gmCache.get(geneName);
+  const d = await dofetch3("genelookup", {
+    body: {
+      deep: 1,
+      genome: genomeName,
+      input: geneName
+    }
+  });
+  if (d.error || !Array.isArray(d.gmlst) || !d.gmlst.length) {
+    gmCache.set(geneName, null);
+    return null;
+  }
+  const gm = d.gmlst.find((i) => i.isdefault) || d.gmlst[0];
+  gmCache.set(geneName, gm);
+  return gm;
+}
+function getLog2Ratio(foldChange) {
+  if (!Number.isFinite(foldChange) || foldChange <= 0) return null;
+  return Math.log2(foldChange);
+}
+async function getPlotConfig(opts) {
+  const config = structuredClone(defaultConfig);
+  if (!opts.tw) throw new Error("proteinView requires opts.tw");
+  return copyMerge(config, opts);
+}
+function makeChartBtnMenu(holder, chartsInstance) {
+  const row = holder.append("div").style("padding", "5px");
+  row.append("span").style("font-weight", "bold").text("Enter a gene name:");
+  const geneSearch = addGeneSearchbox({
+    row,
+    genome: chartsInstance.app.opts.genome,
+    tip: new Menu({ padding: "0px" }),
+    searchOnly: "gene",
+    callback: async () => {
+      if (!geneSearch.geneSymbol) throw new Error("A valid gene selection is required");
+      chartsInstance.dom.tip.hide();
+      chartsInstance.app.dispatch({
+        type: "plot_create",
+        config: {
+          chartType: "proteinView",
+          tw: {
+            term: {
+              gene: geneSearch.geneSymbol,
+              name: geneSearch.geneSymbol,
+              type: TermTypes.PROTEOME_ABUNDANCE
+            }
+          }
+        }
+      });
+    }
+  });
+}
+var proteinViewInit = getCompInit(ProteinView);
+var componentInit = proteinViewInit;
+export {
+  componentInit,
+  getPlotConfig,
+  makeChartBtnMenu,
+  proteinViewInit
+};
+//# sourceMappingURL=proteinView-ESTBC3K2.js.map