@sjcrh/proteinpaint-client 2.180.0 → 2.180.1

package/dist/Disco.UI-YWYNQSRV.js

@@ -0,0 +1,242 @@
+import {
+  launch
+} from "./chunk-A4RBXF53.js";
+import {
+  makeBtn,
+  makeFileUpload,
+  makeGenomeDropDown,
+  makePrompt,
+  makeResetBtn,
+  makeTextAreaInput
+} from "./chunk-CUSG5PZE.js";
+import "./chunk-TECXLSHZ.js";
+import "./chunk-SMKRNNHY.js";
+import "./chunk-SKMFMGCD.js";
+import "./chunk-HZETQJGD.js";
+import {
+  Tabs,
+  appear,
+  sayerror
+} from "./chunk-SAHCLNNL.js";
+import "./chunk-HJ6L54YS.js";
+import "./chunk-XEBPIJHM.js";
+import "./chunk-CXMZYVZT.js";
+import "./chunk-KDKY7S5G.js";
+import "./chunk-SSFOXHYJ.js";
+import "./chunk-FN5XPUPH.js";
+import "./chunk-LSEFWW72.js";
+import "./chunk-73VHTIHG.js";
+import "./chunk-2K5DSRBJ.js";
+import "./chunk-UCLS2SVB.js";
+import "./chunk-MVTCBVSX.js";
+import "./chunk-GM6H3CUI.js";
+import "./chunk-L4QG7XZE.js";
+import "./chunk-DQC5FFGV.js";
+import "./chunk-SNMJEDHY.js";
+import "./chunk-XQMDLYEK.js";
+import "./chunk-72YYKDTX.js";
+import "./chunk-RTKRLATH.js";
+import "./chunk-SOYDFNWV.js";
+import "./chunk-TV74I3Y5.js";
+import "./chunk-CTVZMQ5J.js";
+import "./chunk-LOZEKOES.js";
+import "./chunk-TOU7EVFQ.js";
+import "./chunk-733PDAIR.js";
+import "./chunk-SEEYV6P2.js";
+import "./chunk-NDWTN4U5.js";
+import "./chunk-OMR2DT66.js";
+import "./chunk-HFNDKYVF.js";
+
+// plots/disco/Disco.UI.ts
+function init_discoplotUI(holder, genomes, debugmode) {
+  const wrapper = holder.append("div").style("margin", "20px 20px 20px 40px").style(
+    "font-family",
+    "'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif"
+  ).style("place-items", "center left").style("overflow", "hidden").classed("sjpp-app-ui", true).classed("sjpp-disco-ui", true);
+  const obj = {
+    data: []
+  };
+  makePrompt(wrapper, "Select Genome").style("font-size", "1.15em").style("padding", "10px 0px").style("color", "#003366");
+  genomeSelection(wrapper, genomes, obj);
+  makePrompt(wrapper, "Provide Data").style("font-size", "1.15em").style("padding", "10px 0px 5px 0px").style("color", "#003366");
+  wrapper.append("div").style("opacity", 0.75).style("padding", "10px 10px 15px 20px").style("width", "65vw").style("line-height", "1.5em").html(
+    '<p>The plot accepts multiple data types. Input fields for each data type are available in the tabs below. Upload a file or paste data in at least one data type tab and click "Create Disco Plot". <a href="https://proteinpaint.stjude.org/ppdemo/hg38/disco/discoDemoData.tar.gz" target="Demo data">Download example files</a></p>'
+  );
+  const dataTypeTabs_div = wrapper.append("div").style("margin-left", "2vw");
+  makeDataTypeTabs(dataTypeTabs_div, obj);
+  const controlBtns_div = wrapper.append("div").style("display", "flex").style("align-items", "center").style("padding", "15px 0px");
+  submitButton(controlBtns_div, obj, genomes, wrapper, holder);
+  makeResetBtn(controlBtns_div, obj, ".disco_input");
+  if (debugmode) window["doms"] = obj;
+  return obj;
+}
+function genomeSelection(div, genomes, obj) {
+  const genome_div = div.append("div").style("margin-left", "40px");
+  const g = makeGenomeDropDown(genome_div, genomes).style("border", "1px solid rgb(138, 177, 212)");
+  obj.genome = g.node();
+}
+function makeDataTypeTabs(dataTypeTabs_div, obj) {
+  const tabs = [
+    {
+      label: "SNV Indel",
+      active: true,
+      callback: async (event, dataTypeTab) => {
+        dataTypeTab.key = "snv";
+        const listHTML = `<ol>
+					<li>chr</li>
+					<li>position</li>
+					<li>gene</li>
+					<li>aachange</li>
+					<li>class</li></ol>
+					<p>Example:</p>
+<pre style="margin-left: 10px;">
+chr1	226252135	H3F3A	K28M	M
+chr2	98765432	TestGene	TestMutation	F
+</pre>`;
+        mainTabCallback(dataTypeTab, obj, listHTML);
+      }
+    },
+    {
+      label: "SV",
+      active: false,
+      callback: async (event, dataTypeTab) => {
+        dataTypeTab.key = "sv";
+        const listHTML = `<ol>
+					<li>chrA</li>
+					<li>posA</li>
+					<li>geneA (optional)</li>
+					<li>chrB</li>
+					<li>posB</li>
+					<li>geneB (optional)</li>
+				</ol>
+				<p>Example (with genes):</p>
+<pre style="margin-left: 10px;">
+chr6	3067605	MDC1	chr12	61521661	KMT2D
+</pre>
+				<p>Example (without genes):</p>
+<pre style="margin-left: 10px;">
+chr6	3067605	chr12	61521661
+</pre>`;
+        mainTabCallback(dataTypeTab, obj, listHTML);
+      }
+    },
+    {
+      label: "CNV",
+      active: false,
+      callback: async (event, dataTypeTab) => {
+        dataTypeTab.key = "cnv";
+        const listHTML = `<ol>
+				<li>chr</li>
+				<li>start</li>
+				<li>stop</li>
+				<li>value</li>
+				</ol>
+				<p>Example:</p>
+<pre style="margin-left: 10px;">
+chr1	1	100000000	0.5
+chr1	100000000	200000000	-0.5
+</pre>`;
+        mainTabCallback(dataTypeTab, obj, listHTML);
+      }
+    }
+  ];
+  new Tabs({ holder: dataTypeTabs_div, tabs, tabsPosition: "vertical", linePosition: "right" }).main();
+}
+function mainTabCallback(dataTypeTab, obj, listHTML) {
+  dataTypeTab.contentHolder.style("border", "none").style("display", "block").style("padding-left", "30px");
+  makeDataInputTabs(dataTypeTab, obj);
+  dataTypeTab.contentHolder.append("div").style("padding", "15px 0px 0px 10px").style("opacity", 0.75).text(`Provide ${dataTypeTab.label} data in tab delimited format with the following columns:`).append("span").html(listHTML);
+  delete dataTypeTab.callback;
+}
+function makeDataInputTabs(dataTypeTab, obj) {
+  const width = 95;
+  const tabs = [
+    // //TODO: implement file upload and file path input once launch.adhoc is ready
+    {
+      label: "Select File",
+      active: true,
+      width,
+      callback: async (event, tab) => {
+        const key = dataTypeTab.key;
+        tab.contentHolder.style("border", "none").style("display", "block");
+        appear(tab.contentHolder);
+        tab.contentHolder.append("div").style("padding", "0px 0px 5px 15px").style("opacity", 0.65).text(`Select a local file`);
+        makeFileUpload2(tab, obj, key);
+        delete tab.callback;
+      }
+    },
+    // {
+    // 	label: 'File Path',
+    // 	active: false,
+    // 	width,
+    // 	callback: async (tab: Tab) => {
+    // 		const key = dataTypeTab.key
+    // 		tab.contentHolder.style('border', 'none').style('display', 'block')
+    // 		appear(tab.contentHolder)
+    // 		tab.contentHolder
+    // 			.append('div')
+    // 			.html(`<p style="margin-left: 10px; opacity: 0.65;">Provide a URL file path.</p>`)
+    // 		uiutils.makePrompt(tab.contentHolder, 'URL')
+    // 		makeTextEntryFilePathInput(tab.contentHolder, obj, key)
+    // 		delete tab.callback
+    // 	}
+    // },
+    {
+      label: "Paste Data",
+      active: false,
+      width,
+      callback: async (event, tab) => {
+        const key = dataTypeTab.key;
+        tab.contentHolder.style("border", "none").style("display", "block");
+        appear(tab.contentHolder);
+        makeCopyPasteInput(tab, obj, key);
+        delete tab.callback;
+      }
+    }
+  ];
+  new Tabs({ holder: dataTypeTab.contentHolder, tabs }).main();
+}
+function makeFileUpload2(tab, obj, key) {
+  const upload_div = tab.contentHolder.append("div").style("display", "inline-block");
+  const upload = makeFileUpload(upload_div).classed("disco_input", true);
+  upload.on("change", (event) => {
+    const file = event.target.files[0];
+    const reader = new FileReader();
+    reader.onload = (event2) => {
+      obj.data[key + "Text"] = event2.target.result;
+    };
+    reader.readAsText(file, "utf8");
+  });
+}
+function makeCopyPasteInput(tab, obj, key) {
+  const paste_div = tab.contentHolder.append("div").style("display", "block");
+  const paste = makeTextAreaInput({ div: paste_div, cols: 50 }).style("border", "1px solid rgb(138, 177, 212)").style("margin", "0px 0px 0px 20px").classed("disco_input", true).on("keyup", async () => {
+    obj.data[key + "Text"] = paste.property("value").trim();
+  });
+}
+function submitButton(div, obj, genomes, wrapper, holder) {
+  const submit = makeBtn({ div, text: "Create Disco Plot" });
+  const errorMessage_div = div.append("div");
+  submit.style("margin-right", "10px").style("font-size", "16px").classed("sjpp-ui-submitBtn", true).attr("type", "submit").on("click", () => {
+    if (!obj.data || obj.data == void 0) {
+      const sayerrorDiv = errorMessage_div.append("div").style("display", "inline-block").style("max-width", "20vw");
+      sayerror(sayerrorDiv, "Please provide data");
+      setTimeout(() => sayerrorDiv.remove(), 2e3);
+    } else {
+      const genomeObj = genomes[obj.genome.options[obj.genome.selectedIndex].text];
+      wrapper.remove();
+      launch(obj.data, genomeObj, holder);
+      backButton(holder, genomes);
+    }
+  });
+}
+function backButton(holder, genomes) {
+  holder.append("button").html("&#171; Back").on("click", () => {
+    holder.selectAll("*").remove();
+    init_discoplotUI(holder, genomes, false);
+  });
+}
+export {
+  init_discoplotUI
+};
+//# sourceMappingURL=Disco.UI-YWYNQSRV.js.map

package/dist/DmrPlot-5V5QL4VS.js

@@ -0,0 +1,151 @@
+import {
+  PlotBase,
+  first_genetrack_tolist,
+  sayerror
+} from "./chunk-SAHCLNNL.js";
+import "./chunk-HJ6L54YS.js";
+import "./chunk-XEBPIJHM.js";
+import "./chunk-CXMZYVZT.js";
+import {
+  dofetch3
+} from "./chunk-KDKY7S5G.js";
+import "./chunk-SSFOXHYJ.js";
+import "./chunk-FN5XPUPH.js";
+import "./chunk-LSEFWW72.js";
+import "./chunk-73VHTIHG.js";
+import "./chunk-2K5DSRBJ.js";
+import "./chunk-UCLS2SVB.js";
+import {
+  copyMerge,
+  getCompInit
+} from "./chunk-MVTCBVSX.js";
+import "./chunk-GM6H3CUI.js";
+import "./chunk-L4QG7XZE.js";
+import "./chunk-DQC5FFGV.js";
+import "./chunk-SNMJEDHY.js";
+import "./chunk-XQMDLYEK.js";
+import "./chunk-72YYKDTX.js";
+import "./chunk-RTKRLATH.js";
+import "./chunk-SOYDFNWV.js";
+import "./chunk-TV74I3Y5.js";
+import "./chunk-CTVZMQ5J.js";
+import "./chunk-LOZEKOES.js";
+import "./chunk-TOU7EVFQ.js";
+import "./chunk-733PDAIR.js";
+import "./chunk-SEEYV6P2.js";
+import "./chunk-NDWTN4U5.js";
+import "./chunk-OMR2DT66.js";
+import "./chunk-HFNDKYVF.js";
+
+// plots/dmr/settings/defaults.ts
+function getDefaultDMRSettings(opts) {
+  const overrides = opts.settings || {};
+  const defaults = {
+    blockWidth: 800,
+    pad: 2e3
+  };
+  return Object.assign(defaults, overrides);
+}
+
+// plots/dmr/DmrPlot.ts
+var DmrPlot = class _DmrPlot extends PlotBase {
+  constructor(opts, api) {
+    super(opts, api);
+    this.type = _DmrPlot.type;
+    this.blockInstance = null;
+    this.dom = {
+      header: opts?.header,
+      holder: opts.holder.append("div"),
+      error: opts.holder.append("div"),
+      loading: opts.holder.append("div").text("Running DMR analysis\u2026")
+    };
+  }
+  static {
+    this.type = "dmr";
+  }
+  getState(appState) {
+    const config = appState.plots.find((p) => p.id === this.id);
+    if (!config) throw new Error(`No plot with id='${this.id}' found`);
+    return { config };
+  }
+  async init() {
+  }
+  async main() {
+    const config = this.state.config;
+    if (this.dom.header) this.dom.header.text(config.headerText || "DMR Analysis");
+    validateConfig(config);
+    this.dom.holder.selectAll("*").remove();
+    this.dom.error.selectAll("*").remove();
+    this.dom.loading.style("display", "block");
+    try {
+      const { geneName, group1, group2, settings } = config;
+      const { genome, dslabel } = this.app.vocabApi.vocab;
+      const geneResult = await dofetch3("genelookup", {
+        body: { deep: 1, input: geneName, genome }
+      });
+      if (geneResult.error || !geneResult.gmlst?.length) {
+        throw new Error(`Could not find coordinates for gene "${geneName}"`);
+      }
+      const gm = geneResult.gmlst[0];
+      const chr = gm.chr;
+      const start = Math.max(0, gm.start - settings.dmr.pad);
+      const stop = gm.stop + settings.dmr.pad;
+      const dmrResult = await dofetch3("termdb/dmr", {
+        body: { genome, dslabel, chr, start, stop, group1, group2 }
+      });
+      if ("error" in dmrResult) {
+        sayerror(this.dom.error, dmrResult.error);
+        throw new Error(dmrResult.error);
+      }
+      const genomeObj = this.app.opts.genome;
+      const tklst = [];
+      first_genetrack_tolist(genomeObj, tklst);
+      tklst.push({
+        type: "bedj",
+        name: "DMRs",
+        bedItems: dmrResult.dmrs.map((dmr) => {
+          const alpha = Math.round(Math.min(255, (0.5 + dmr.probability * 0.5) * 255));
+          const hex = alpha.toString(16).padStart(2, "0");
+          const base = dmr.direction === "hyper" ? "#e66101" : "#5e81f4";
+          return { chr: dmr.chr, start: dmr.start, stop: dmr.stop, color: base + hex };
+        })
+      });
+      const { Block } = await import("./block-PH3K3TGJ.js");
+      this.blockInstance = new Block({
+        holder: this.dom.holder,
+        genome: genomeObj,
+        chr,
+        start,
+        stop,
+        tklst,
+        nobox: true,
+        width: settings.dmr.blockWidth,
+        hidegenelegend: true
+      });
+    } catch (e) {
+      const msg = e instanceof Error ? e.message : String(e);
+      sayerror(this.dom.error, msg);
+    }
+    this.dom.loading.style("display", "none");
+  }
+};
+var componentInit = getCompInit(DmrPlot);
+function getPlotConfig(opts) {
+  validateConfig(opts);
+  const config = {
+    settings: {
+      dmr: getDefaultDMRSettings(opts)
+    }
+  };
+  return copyMerge(config, opts);
+}
+function validateConfig(opts) {
+  if (!opts.geneName) throw new Error("geneName is required for DMR plot");
+  if (!opts.group1) throw new Error("group1 is required for DMR plot");
+  if (!opts.group2) throw new Error("group2 is required for DMR plot");
+}
+export {
+  componentInit,
+  getPlotConfig
+};
+//# sourceMappingURL=DmrPlot-5V5QL4VS.js.map