@sjcrh/proteinpaint-client 2.211.0 → 2.212.0

package/dist/chunk-VPOAFNVL.js

@@ -0,0 +1,70 @@
+import {
+  junctionCustomTermSource
+} from "./chunk-2WKGE7BO.js";
+import {
+  mayRenderFractionSelection
+} from "./chunk-VHDYIOWU.js";
+
+// termdb/handlers/junction.ts
+var SearchHandler = class {
+  async init(opts) {
+    if (!opts?.holder) throw new Error("opts.holder is required");
+    if (typeof opts.callback != "function") throw new Error("opts.callback is required");
+    const entries = getJunctionCustomTerms(opts.app.vocabApi.state?.customTerms);
+    render(opts, entries);
+  }
+};
+function getJunctionCustomTerms(customTerms) {
+  if (!Array.isArray(customTerms)) return [];
+  return customTerms.filter((term) => term?.source === junctionCustomTermSource && term.tw?.term);
+}
+function render(opts, entries) {
+  const holder = opts.holder;
+  holder.selectAll("*").remove();
+  const div = holder.append("div").style("padding", "10px 0px");
+  if (!entries.length) {
+    div.append("div").text("Junctions selected from genome browser will be shown here.");
+    return;
+  }
+  const listDiv = div.append("div");
+  const fractionDiv = div.append("div");
+  for (const entry of entries) {
+    if (entry.eventlabel) renderJunctionEvent(listDiv, fractionDiv, entry, opts);
+    else renderJunction(listDiv, entry, opts);
+  }
+  listDiv.append("div").style("font-size", ".7em").style("margin-top", "10px").style("opacity", 0.7).text("Select additional junctions from genome browser.");
+}
+function renderJunction(holder, entry, opts) {
+  const choice = holder.append("div");
+  choice.append("div").attr("class", "ts_pill sja_filter_tag_btn sja_tree_click_term").style("display", "inline-block").style("border-radius", "6px").style("margin", "1px 0").text(entry.tw.term.name).on("click", () => opts.callback(entry.tw.term));
+  addDeleteButton(choice, entry, opts);
+}
+function renderJunctionEvent(holder, fractionDiv, entry, opts) {
+  const eventHolder = holder.append("div");
+  const pillRow = eventHolder.append("div");
+  pillRow.append("div").attr("class", "ts_pill sja_filter_tag_btn sja_tree_click_term").style("display", "inline-block").style("border-radius", "6px").style("margin", "1px 0").text(entry.eventlabel).on("click", () => selectJunctionEvent(holder, fractionDiv, entry, opts));
+  addDeleteButton(pillRow, entry, opts);
+  eventHolder.append("div").style("margin-left", "10px").style("font-size", ".7em").selectAll("div").data(entry.tw.term.termlst, (term) => term.id).enter().append("div").text((term) => term.name);
+}
+function selectJunctionEvent(listDiv, fractionDiv, entry, opts) {
+  const isStaged = mayRenderFractionSelection({
+    term: entry.tw.term,
+    selectionMode: opts.termCollectionSelectionMode,
+    listDiv,
+    fractionDiv,
+    callback: (tw) => opts.callback(tw)
+  });
+  if (!isStaged) opts.callback(entry.tw.term);
+}
+function addDeleteButton(holder, entry, opts) {
+  holder.append("button").attr("data-testid", "sjpp-junction-delete").style("margin-left", "4px").attr("aria-label", `Delete ${entry.name}`).text("\xD7").on("click", async () => {
+    await opts.app.vocabApi.deleteCustomTermById(entry.id);
+    render(opts, getJunctionCustomTerms(opts.app.vocabApi.state?.customTerms));
+  });
+}
+
+export {
+  SearchHandler,
+  getJunctionCustomTerms
+};
+//# sourceMappingURL=chunk-VPOAFNVL.js.map

package/dist/chunk-WB57TMJN.js

@@ -0,0 +1,56 @@
+import {
+  sayerror
+} from "./chunk-VHDYIOWU.js";
+import {
+  TermTypeGroups
+} from "./chunk-57Z4VYLM.js";
+
+// termdb/handlers/singleCellCellType.ts
+var SearchHandler = class {
+  async init(opts) {
+    this.validateOpts(opts);
+    this.callback = opts.callback;
+    this.app = opts.app;
+    const holder = opts.holder.append("div").style("padding", "10px 0px");
+    const scctTerms = opts.app.vocabApi.termdbConfig?.termType2terms?.[TermTypeGroups.SINGLECELL_CELLTYPE];
+    if (!scctTerms?.length) {
+      sayerror(
+        holder,
+        `termType2terms[${TermTypeGroups.SINGLECELL_CELLTYPE}]:[] is required in termdbConfig for singleCellCellType handler`
+      );
+      return;
+    }
+    const usecaseConfig = opts.usecase?.specialCase?.config;
+    const plots = usecaseConfig?.sample?.plots;
+    const isMeta = usecaseConfig?.sample?.isMetaResult;
+    const filtered = plots ? scctTerms.filter((t) => plots.includes(t.plot)) : usecaseConfig?.name ? scctTerms.filter((t) => t.plot === usecaseConfig.name) : scctTerms;
+    const getLabel = (t) => isMeta || plots?.length == 1 ? t.name : `${t.name} (${t.plot})`;
+    const filteredTerms = new Set(
+      plots || !usecaseConfig?.name ? filtered.map((t) => ({ ...t, label: getLabel(t) })) : filtered
+    );
+    for (const t of Array.from(filteredTerms)) {
+      holder.append("div").classed("termdiv", true).style("padding", "0px 5px").append("div").classed("termlabel sja_filter_tag_btn sja_tree_click_term ts_pill", true).style("display", "inline-block").style("padding", "5px 8px").style("margin", "1px 0px").style("border-radius", "6px").text(t.label || t.name).on("click", () => {
+        const term = this.makeTerm(t, usecaseConfig);
+        this.callback(term);
+      });
+    }
+  }
+  makeTerm(_term, usecaseConfig) {
+    const term = { ..._term };
+    if (!term.sample && usecaseConfig?.sample) term.sample = usecaseConfig.sample;
+    return term;
+  }
+  validateOpts(opts) {
+    if (opts.callback == null) throw new Error("callback is required");
+    if (opts.app == null) throw new Error("app is required");
+    if (opts.holder == null) throw new Error("holder is required");
+    if (opts.usecase == null) throw new Error("usecase is required");
+    if (!opts.app.vocabApi.termdbConfig?.termType2terms)
+      throw new Error("termType2terms is required in termdbConfig for singleCellCellType handler");
+  }
+};
+
+export {
+  SearchHandler
+};
+//# sourceMappingURL=chunk-WB57TMJN.js.map

package/dist/chunk-WILJJPWV.js

@@ -0,0 +1,255 @@
+import {
+  first_genetrack_tolist
+} from "./chunk-VHDYIOWU.js";
+import {
+  HYPER_COLOR,
+  HYPO_COLOR
+} from "./chunk-RMUK3TLD.js";
+
+// plots/dmr/settings/defaults.ts
+function getDefaultDMRSettings(opts) {
+  const overrides = opts.settings || {};
+  const dm = opts?.app?.vocabApi?.termdbConfig?.queries?.dnaMethylation;
+  const chr = opts?.coordinateOverride?.chr;
+  const elementScale = dm?.regionAnalysis == "element" || Array.isArray(dm?.cpgChroms) && !!chr && !dm.cpgChroms.includes(chr);
+  const defaults = {
+    blockWidth: 800,
+    pad: elementScale ? 1e5 : 2e3,
+    lambda: elementScale ? 5e4 : 1e3,
+    C: 2,
+    fdr_cutoff: 0.05,
+    colors: {
+      group1: "#3b5ee6",
+      group2: "#c04e00",
+      hyper: HYPER_COLOR,
+      hypo: HYPO_COLOR
+    },
+    maxLoessRegion: 25e4,
+    minProbesForCi: 10,
+    backend: "rust",
+    maxRegionSize: 5e6
+  };
+  if (overrides.colors) {
+    Object.assign(defaults.colors, overrides.colors);
+    delete overrides.colors;
+  }
+  return Object.assign(defaults, overrides);
+}
+
+// plots/dmr/viewModel/DmrViewModel.ts
+var CCRE_TRACK_NAME = "ENCODE cCREs";
+var DmrViewModel = class {
+  constructor(dmrResult, config, genomeObj, queryChr, queryStart, queryStop) {
+    const { settings } = config;
+    const dmrBedItems = this.makeDmrBedItems(dmrResult, settings);
+    const sigCpgBedItems = this.makeSigCpgBedItems(dmrResult, settings, queryChr, queryStart, queryStop);
+    const xRange = (queryStop ?? 0) - (queryStart ?? 0);
+    const loess = dmrResult.diagnostic?.loess;
+    const showLoess = !!(loess && loess.group1_fitted.length > 0 && loess.group2_fitted.length > 0);
+    const showDots = xRange <= settings.dmr.maxLoessRegion;
+    const betaTrackResult = dmrResult.diagnostic ? this.renderBetaTrack(
+      dmrResult.diagnostic,
+      config,
+      settings.dmr.blockWidth,
+      showLoess,
+      showDots,
+      queryStart,
+      queryStop
+    ) : void 0;
+    this.viewData = {
+      tklst: this.buildTrackList(dmrBedItems, sigCpgBedItems, genomeObj, betaTrackResult?.img),
+      legendRows: this.buildLegendData(
+        config,
+        dmrResult.dmrs,
+        sigCpgBedItems,
+        showLoess,
+        showDots,
+        betaTrackResult?.showCi ?? false
+      ),
+      diagnostic: dmrResult.diagnostic,
+      dmrs: dmrResult.dmrs,
+      dmrBedItems,
+      showLoess,
+      showDots
+    };
+  }
+  buildTrackList(dmrBedItems, sigCpgBedItems, genomeObj, betaTrackImg) {
+    const tklst = [];
+    first_genetrack_tolist(genomeObj, tklst);
+    const ccre = (genomeObj?.tracks || []).find((t) => t.name == CCRE_TRACK_NAME);
+    if (ccre) tklst.push(structuredClone(ccre));
+    tklst.push({ type: "bedj", name: "DMRs", bedItems: dmrBedItems });
+    tklst.push({ type: "bedj", name: "Sig. CpGs", bedItems: sigCpgBedItems });
+    if (betaTrackImg) {
+      tklst.push({
+        type: "bigwig",
+        name: "Per-CpG Means",
+        height: 150,
+        imgData: betaTrackImg
+      });
+    }
+    return tklst;
+  }
+  buildLegendData(config, dmrs, sigCpgBedItems, showLoess, showDots, showCi) {
+    const { colors } = config.settings.dmr;
+    const g1 = config.group1Name || "Group 1";
+    const g2 = config.group2Name || "Group 2";
+    const meansItems = [];
+    if (showDots) {
+      meansItems.push({ text: `${g1} (control)`, color: colors.group1 }, { text: `${g2} (case)`, color: colors.group2 });
+    }
+    if (showLoess) {
+      const ciLabel = showCi ? " + 95% CI" : "";
+      meansItems.push(
+        { text: `${g1} LOESS trend${ciLabel}`, color: colors.group1, style: showCi ? "shaded" : "dashed" },
+        { text: `${g2} LOESS trend${ciLabel}`, color: colors.group2, style: showCi ? "shaded" : "dashed" }
+      );
+    }
+    const rows = [{ label: "Per-CpG Means", items: meansItems }];
+    const hasHyper = dmrs.some((d) => d.direction === "hyper");
+    const hasHypo = dmrs.some((d) => d.direction === "hypo");
+    if (hasHyper || hasHypo) {
+      const items = [];
+      if (hasHyper) items.push({ text: "Hypermethylated", color: colors.hyper });
+      if (hasHypo) items.push({ text: "Hypomethylated", color: colors.hypo });
+      rows.push({ label: "DMR", items });
+    }
+    if (sigCpgBedItems.length) {
+      const items = [];
+      const hasHyperCpg = sigCpgBedItems.some((b) => b.color === colors.hyper);
+      const hasHypoCpg = sigCpgBedItems.some((b) => b.color === colors.hypo);
+      if (hasHyperCpg) items.push({ text: "Hyper (FDR sig.)", color: colors.hyper });
+      if (hasHypoCpg) items.push({ text: "Hypo (FDR sig.)", color: colors.hypo });
+      rows.push({ label: "Sig. CpGs", items });
+    }
+    return rows;
+  }
+  /**
+   * Render the per-CpG means scatter plot to an offscreen canvas and return
+   * a data URI suitable for the bigwig imgData track.
+   */
+  renderBetaTrack(diagnostic, config, blockWidth, showLoess, showDots, queryStart, queryStop) {
+    const { probes } = diagnostic;
+    if (!probes.positions.length) return void 0;
+    const { colors, fdr_cutoff, minProbesForCi } = config.settings.dmr;
+    const dpr = typeof window !== "undefined" && window.devicePixelRatio > 1 ? window.devicePixelRatio : 1;
+    const width = blockWidth;
+    const height = 150;
+    const canvas = document.createElement("canvas");
+    canvas.width = width * dpr;
+    canvas.height = height * dpr;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return void 0;
+    ctx.scale(dpr, dpr);
+    const xMin = queryStart ?? probes.positions[0];
+    const xMax = queryStop ?? probes.positions[probes.positions.length - 1];
+    const xRange = xMax - xMin || 1;
+    const scaleX = (val) => (val - xMin) / xRange * width;
+    const scaleY = (val) => height - val * height;
+    ctx.clearRect(0, 0, width, height);
+    let showCi = false;
+    if (showLoess && diagnostic.loess) {
+      const { loess } = diagnostic;
+      const firstProbePos = probes.positions[0];
+      const lastProbePos = probes.positions[probes.positions.length - 1];
+      showCi = probes.positions.length >= minProbesForCi;
+      for (const [fitted, ciLower, ciUpper, color] of [
+        [loess.group1_fitted, loess.group1_ci_lower, loess.group1_ci_upper, colors.group1],
+        [loess.group2_fitted, loess.group2_ci_lower, loess.group2_ci_upper, colors.group2]
+      ]) {
+        if (!fitted.length) continue;
+        const lPos = loess.positions;
+        let iStart = 0;
+        let iEnd = lPos.length - 1;
+        while (iStart < lPos.length && lPos[iStart] < firstProbePos) iStart++;
+        while (iEnd >= 0 && lPos[iEnd] > lastProbePos) iEnd--;
+        if (iStart > iEnd) continue;
+        if (showCi) {
+          ctx.globalAlpha = 0.12;
+          ctx.fillStyle = color;
+          ctx.beginPath();
+          for (let i = iStart; i <= iEnd; i++) {
+            ctx.lineTo(scaleX(lPos[i]), scaleY(Math.max(0, Math.min(1, ciUpper[i]))));
+          }
+          for (let i = iEnd; i >= iStart; i--) {
+            ctx.lineTo(scaleX(lPos[i]), scaleY(Math.max(0, Math.min(1, ciLower[i]))));
+          }
+          ctx.closePath();
+          ctx.fill();
+        }
+        ctx.globalAlpha = 0.8;
+        ctx.strokeStyle = color;
+        ctx.lineWidth = 2;
+        ctx.setLineDash(showCi ? [] : [6, 4]);
+        ctx.beginPath();
+        for (let i = iStart; i <= iEnd; i++) {
+          ctx.lineTo(scaleX(lPos[i]), scaleY(Math.max(0, Math.min(1, fitted[i]))));
+        }
+        ctx.stroke();
+        ctx.setLineDash([]);
+      }
+    }
+    if (!showDots) {
+      ctx.globalAlpha = 1;
+      return { img: { minv: 0, maxv: 1, src: canvas.toDataURL("image/png") }, showCi };
+    }
+    for (let i = 0; i < probes.positions.length; i++) {
+      const x = scaleX(probes.positions[i]);
+      const isSig = probes.fdr[i] < fdr_cutoff;
+      const alpha = isSig ? 0.85 : 0.3;
+      ctx.globalAlpha = alpha;
+      ctx.fillStyle = colors.group1;
+      const m1 = probes.mean_group1[i];
+      if (m1 != null) {
+        ctx.beginPath();
+        ctx.arc(x, scaleY(m1), 4, 0, Math.PI * 2);
+        ctx.fill();
+      }
+      ctx.fillStyle = colors.group2;
+      const m2 = probes.mean_group2[i];
+      if (m2 != null) {
+        ctx.beginPath();
+        ctx.arc(x, scaleY(m2), 4, 0, Math.PI * 2);
+        ctx.fill();
+      }
+    }
+    ctx.globalAlpha = 1;
+    return { img: { minv: 0, maxv: 1, src: canvas.toDataURL("image/png") }, showCi };
+  }
+  makeDmrBedItems(dmrResult, settings) {
+    return dmrResult.dmrs.map((dmr) => {
+      const negLog = -Math.log10(Math.max(dmr.min_smoothed_fdr, 1e-300));
+      const alpha = Math.round(Math.min(255, Math.max(50, negLog / 10 * 255)));
+      const hex = alpha.toString(16).padStart(2, "0");
+      const base = dmr.direction === "hyper" ? settings.dmr.colors.hyper : settings.dmr.colors.hypo;
+      return { chr: dmr.chr, start: dmr.start, stop: dmr.stop, color: base + hex };
+    });
+  }
+  makeSigCpgBedItems(dmrResult, settings, chr, queryStart, queryStop) {
+    const diag = dmrResult.diagnostic;
+    if (!diag) return [];
+    const { probes } = diag;
+    const items = [];
+    const minDeltaBeta = 0.05;
+    for (let i = 0; i < probes.positions.length; i++) {
+      if (probes.fdr[i] >= settings.dmr.fdr_cutoff) continue;
+      const pos = probes.positions[i];
+      if (queryStart != null && queryStop != null && (pos < queryStart || pos > queryStop)) continue;
+      const mg1 = probes.mean_group1[i];
+      const mg2 = probes.mean_group2[i];
+      if (mg1 == null || mg2 == null) continue;
+      const deltaBeta = mg2 - mg1;
+      if (Math.abs(deltaBeta) < minDeltaBeta) continue;
+      const color = deltaBeta >= 0 ? settings.dmr.colors.hyper : settings.dmr.colors.hypo;
+      items.push({ chr, start: pos, stop: pos + 1, color });
+    }
+    return items;
+  }
+};
+
+export {
+  getDefaultDMRSettings,
+  CCRE_TRACK_NAME,
+  DmrViewModel
+};
+//# sourceMappingURL=chunk-WILJJPWV.js.map

package/dist/chunk-X2HEDRFQ.js

@@ -0,0 +1,102 @@
+import {
+  addGeneSearchbox,
+  first_genetrack_tolist,
+  getDNAMethUnit,
+  sayerror
+} from "./chunk-VHDYIOWU.js";
+import {
+  Menu
+} from "./chunk-7XZA2XR2.js";
+import {
+  DNA_METHYLATION
+} from "./chunk-57Z4VYLM.js";
+
+// termdb/handlers/dnaMethylation.ts
+var SearchHandler = class {
+  init(opts) {
+    this.opts = opts;
+    this.callback = opts.callback;
+    this.app = opts.app;
+    const holder = opts.holder.append("div").style("margin", "10px 0px");
+    this.dom = {};
+    this.dom.errDiv = holder.append("div").style("margin", "5px 0px").style("display", "none");
+    this.dom.geneSearchDiv = holder.append("div");
+    this.dom.blockDiv = holder.append("div").style("display", "none").style("margin", "15px 4px");
+    const geneSearch = addGeneSearchbox({
+      tip: new Menu({ padding: "0px" }),
+      genome: opts.genomeObj,
+      row: this.dom.geneSearchDiv,
+      callback: async () => {
+        try {
+          this.dom.errDiv.style("display", "none");
+          await this.handleGeneSearch(geneSearch);
+        } catch (e) {
+          this.dom.errDiv.style("display", "block");
+          sayerror(this.dom.errDiv, "Error: " + (e.message || e));
+          if (e.stack) console.log(e.stack);
+        }
+      }
+    });
+  }
+  async handleGeneSearch(geneSearch) {
+    if (geneSearch.geneSymbol) {
+      const { chr, start, stop } = geneSearch;
+      if (!chr || !Number.isInteger(start) || !Number.isInteger(stop))
+        throw new Error("unable to retrieve gene coordinate");
+      this.dom.blockDiv.selectAll("*").remove();
+      this.dom.blockDiv.style("display", "block");
+      this.dom.blockDiv.append("div").style("opacity", 0.6).text("Navigate genome browser to desired region");
+      const arg = {
+        holder: this.dom.blockDiv,
+        genome: this.opts.genomeObj,
+        // genome obj
+        chr,
+        start,
+        stop,
+        tklst: [],
+        nobox: true,
+        width: 500,
+        hidegenelegend: true,
+        debugmode: this.opts.debug
+      };
+      first_genetrack_tolist(this.opts.genomeObj, arg.tklst);
+      const _ = await import("./block-7WZWBQVA.js");
+      this.blockInstance = new _.Block(arg);
+      this.dom.submitBtn = this.dom.blockDiv.append("div").attr("data-testid", "sjpp-dnaMethylation-submitDiv").style("margin", "10px 0px").append("button").style("border", "none").style("border-radius", "20px").style("padding", "10px 15px").text("Submit Region").on("click", async () => {
+        const { chr: chr2, start: start2, stop: stop2 } = this.blockInstance.rglst[0];
+        const term = this.makeTerm({ chr: chr2, start: start2, stop: stop2 });
+        await this.callback(term);
+      });
+    } else if (geneSearch.chr && Number.isInteger(geneSearch.start) && Number.isInteger(geneSearch.stop)) {
+      const { chr } = geneSearch;
+      let { start, stop } = geneSearch;
+      if (geneSearch.actualposition?.len <= 1) {
+        start = geneSearch.actualposition.position;
+        stop = start + 1;
+      }
+      const term = this.makeTerm({ chr, start, stop });
+      await this.callback(term);
+    } else {
+      throw new Error("invalid gene search input");
+    }
+  }
+  makeTerm(opts) {
+    const { chr, start, stop } = opts;
+    if (!chr || !Number.isInteger(start) || !Number.isInteger(stop)) throw new Error("invalid coordinate");
+    const unit = getDNAMethUnit("region", this.app.vocabApi);
+    const term = {
+      chr,
+      start,
+      stop,
+      type: DNA_METHYLATION,
+      unit,
+      genomicFeatureType: "region"
+    };
+    return term;
+  }
+};
+
+export {
+  SearchHandler
+};
+//# sourceMappingURL=chunk-X2HEDRFQ.js.map