@sjcrh/proteinpaint-client 2.194.0 → 2.195.0

package/dist/Disco.UI-BFJ5XFAT.js

@@ -0,0 +1,249 @@
+import {
+  makeBtn,
+  makeFileUpload,
+  makeGenomeDropDown,
+  makePrompt,
+  makeResetBtn,
+  makeTextAreaInput
+} from "./chunk-5EBRF6Z7.js";
+import {
+  launch
+} from "./chunk-N6ALTSJ2.js";
+import "./chunk-5B5FZPZI.js";
+import "./chunk-YRXB3MKU.js";
+import "./chunk-SKMFMGCD.js";
+import "./chunk-4KY4XKJV.js";
+import {
+  appear,
+  sayerror
+} from "./chunk-LYULXXGR.js";
+import "./chunk-HJ6L54YS.js";
+import "./chunk-LSEFWW72.js";
+import "./chunk-CPMOBFFR.js";
+import "./chunk-HYOEWQ5P.js";
+import {
+  Tabs
+} from "./chunk-HBW42TDT.js";
+import "./chunk-LQJMCE7G.js";
+import "./chunk-FN5XPUPH.js";
+import "./chunk-IIT367QZ.js";
+import "./chunk-RZGEKL77.js";
+import "./chunk-B4VBTVVQ.js";
+import "./chunk-IQTEW3SK.js";
+import "./chunk-MNPTPENH.js";
+import "./chunk-7IYJZZQI.js";
+import "./chunk-M3J4MINX.js";
+import "./chunk-PF4DSFDR.js";
+import "./chunk-I73KUUYG.js";
+import "./chunk-UAALI7MC.js";
+import "./chunk-7KRS7L4U.js";
+import "./chunk-BKPDYW5T.js";
+import "./chunk-JNITUVXP.js";
+import "./chunk-TJYRBEBK.js";
+import "./chunk-LOZEKOES.js";
+import "./chunk-VQZ2Z5YU.js";
+import "./chunk-SOTB4FRE.js";
+import "./chunk-TLT4YIG3.js";
+import "./chunk-KYBIQBXE.js";
+import "./chunk-I6Y4O3RR.js";
+import "./chunk-OMR2DT66.js";
+import "./chunk-DQC5FFGV.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>
+					<li>DNA total reads (optional)</li>
+					<li>DNA alt reads (optional)</li>
+					<li>RNA total reads (optional)</li>
+					<li>RNA alt reads (optional)</li></ol>
+					<p>Example:</p>
+<pre style="margin-left: 10px;">
+chr1	226252135	H3F3A	K28M	M	100	25	80	16
+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-BFJ5XFAT.js.map