import {
  launch
} from "./chunk-FJP77STI.js";
import {
  makeBtn,
  makeFileUpload,
  makeGenomeDropDown,
  makePrompt,
  makeResetBtn,
  makeTextAreaInput
} from "./chunk-5EBRF6Z7.js";
import "./chunk-N2SKTCDK.js";
import "./chunk-HKSNADSX.js";
import "./chunk-SKMFMGCD.js";
import "./chunk-4KY4XKJV.js";
import {
  appear,
  sayerror
} from "./chunk-SA7APTJR.js";
import "./chunk-HJ6L54YS.js";
import "./chunk-LSEFWW72.js";
import "./chunk-SKREEF3H.js";
import "./chunk-HYOEWQ5P.js";
import {
  Tabs
} from "./chunk-HBW42TDT.js";
import "./chunk-G6O3URDN.js";
import "./chunk-FN5XPUPH.js";
import "./chunk-IIT367QZ.js";
import "./chunk-RZGEKL77.js";
import "./chunk-UI7OCM2A.js";
import "./chunk-YZK37YCC.js";
import "./chunk-7EMWHCVW.js";
import "./chunk-7IYJZZQI.js";
import "./chunk-M3J4MINX.js";
import "./chunk-PF4DSFDR.js";
import "./chunk-QH6W3NVF.js";
import "./chunk-NOEAT6CX.js";
import "./chunk-4UWS5Y3N.js";
import "./chunk-DD4R5P6W.js";
import "./chunk-JNITUVXP.js";
import "./chunk-KSGA62R2.js";
import "./chunk-LOZEKOES.js";
import "./chunk-TOU7EVFQ.js";
import "./chunk-OAWQ6LOO.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></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-IWVSK3RN.js.map
