@sjcrh/proteinpaint-client 2.180.0 → 2.180.1

package/dist/block.tk.bedgraphdot-5ZBNIQFY.js

@@ -0,0 +1,382 @@
+import {
+  appear2 as appear,
+  axisstyle,
+  bwSetting,
+  disappear2 as disappear,
+  rgb2hex
+} from "./chunk-SAHCLNNL.js";
+import "./chunk-HJ6L54YS.js";
+import "./chunk-XEBPIJHM.js";
+import "./chunk-CXMZYVZT.js";
+import {
+  dofetch
+} 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 "./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 {
+  axisLeft
+} from "./chunk-LOZEKOES.js";
+import "./chunk-TOU7EVFQ.js";
+import {
+  format,
+  linear
+} from "./chunk-733PDAIR.js";
+import "./chunk-SEEYV6P2.js";
+import "./chunk-NDWTN4U5.js";
+import "./chunk-OMR2DT66.js";
+import "./chunk-HFNDKYVF.js";
+
+// src/block.tk.bedgraphdot.js
+async function loadTk(tk, block) {
+  block.tkcloakon(tk);
+  block.block_setheight();
+  const _finish = loadTk_finish_closure(tk, block);
+  try {
+    if (tk.uninitialized) {
+      makeTk(tk, block);
+      delete tk.uninitialized;
+    }
+    await loadTk_do(tk, block);
+    _finish({});
+  } catch (e) {
+    tk.height_main = 50;
+    _finish({ error: e.message || e });
+    if (e.stack) console.log(e.stack);
+    return;
+  }
+}
+function loadTk_finish_closure(tk, block) {
+  return (data) => {
+    block.tkcloakoff(tk, { error: data.error });
+    block.block_setheight();
+    block.setllabel();
+  };
+}
+function makeTk(tk, block) {
+  if (!tk.scale) tk.scale = {};
+  if (Number.isFinite(tk.scale.min) && Number.isFinite(tk.scale.max)) {
+  } else {
+    tk.scale.auto = true;
+  }
+  if (!Number.isFinite(tk.barheight)) tk.barheight = 100;
+  tk.height_main = tk.toppad + tk.barheight + tk.bottompad;
+  if (!tk.ncolor) tk.ncolor = "#BD005E";
+  if (!tk.ncolor2) tk.ncolor2 = "#5E00BD";
+  if (!tk.pcolor) tk.pcolor = "#005EBD";
+  if (!tk.pcolor2) tk.pcolor2 = "#FA7D00";
+  tk.leftaxis = tk.gleft.append("g");
+  tk.config_handle = block.maketkconfighandle(tk).on("click", () => {
+    tk.tkconfigtip.clear().showunder(tk.config_handle.node());
+  });
+}
+async function loadTk_do(tk, block) {
+  block.tkcloakon(tk);
+  const par = block.tkarg_q(tk);
+  par.rglst = rglst_quickfix(tk, block);
+  par.genome = block.genome.name;
+  tk.height_main = tk.toppad + tk.barheight + tk.bottompad;
+  tk.glider.selectAll("*").remove();
+  const data = await dofetch("tkbedgraphdot", par);
+  if (data.error) throw data.error;
+  tk.tklabel.transition().attr("y", tk.barheight / 2);
+  for (const r of data.rglst) {
+    const img = tk.glider.append("g").attr("transform", "translate(" + r.xoff + "," + tk.toppad + ")").append("image").attr("width", r.width).attr("height", tk.barheight).attr("xlink:href", r.img);
+  }
+  tk.leftaxis.selectAll("*").remove();
+  if (data.nodata) {
+    throw "no data in view range";
+  }
+  if (data.minv != void 0) {
+    tk.scale.min = data.minv;
+    tk.scale.max = data.maxv;
+  }
+  const scale = linear().domain([tk.scale.min, tk.scale.max]).range([tk.barheight, 0]);
+  const axis = axisLeft().scale(scale).tickValues([tk.scale.min, tk.scale.max]);
+  if (tk.integer4axis) {
+    axis.tickFormat(format("d"));
+  }
+  axisstyle({
+    axis: tk.leftaxis.call(axis),
+    color: "black",
+    showline: true
+  });
+}
+function bigwigconfigpanel(tk, block, holder, loader) {
+  const config = {
+    pcolor: {},
+    ncolor: {},
+    pcolor2: {},
+    ncolor2: {},
+    // .row
+    // .lab
+    dotplot: {},
+    // .row
+    dividefactor: {}
+  };
+  {
+    const row = holder.append("div").style("margin-bottom", "15px");
+    row.append("span").html("Height  ");
+    row.append("input").attr("size", 5).property("value", tk.barheight).on("keyup", (event) => {
+      if (event.code != "Enter") return;
+      const s = event.target.value;
+      if (s == "") return;
+      const v = Number.parseInt(s);
+      if (Number.isNaN(v) || v <= 1) {
+        alert("track height must be positive integer");
+        return;
+      }
+      tk.barheight = v;
+      loader(bwSetting.height);
+    });
+  }
+  config.pcolor.row = holder.append("div").style("margin-bottom", "15px");
+  config.pcolor.lab = config.pcolor.row.append("span").text("Positive value color").style("padding-right", "10px");
+  config.pcolor.row.append("input").attr("type", "color").property("value", rgb2hex(tk.pcolor)).on("change", (event) => {
+    tk.pcolor = event.target.value;
+    loader(bwSetting.pcolor);
+  });
+  config.ncolor.row = holder.append("div").style("margin-bottom", "15px");
+  config.ncolor.lab = config.ncolor.row.append("span").text("Negative value color").style("padding-right", "10px");
+  config.ncolor.row.append("input").attr("type", "color").property("value", rgb2hex(tk.ncolor)).on("change", (event) => {
+    tk.ncolor = event.target.value;
+    loader(bwSetting.ncolor);
+  });
+  if (!tk.scale.auto) {
+    config.pcolor2.row = holder.append("div").style("margin-bottom", "15px");
+    config.pcolor2.lab = config.pcolor2.row.append("span").html("&ge;Max color").style("padding-right", "10px");
+    config.pcolor2.row.append("input").attr("type", "color").property("value", rgb2hex(tk.pcolor2)).on("change", (event) => {
+      tk.pcolor2 = event.target.value;
+      loader(bwSetting.pcolor2);
+    });
+    config.ncolor2.row = holder.append("div").style("margin-bottom", "15px");
+    config.ncolor2.lab = config.ncolor2.row.append("span").html("&le;Min color").style("padding-right", "10px");
+    config.ncolor2.row.append("input").attr("type", "color").property("value", rgb2hex(tk.ncolor2)).on("change", (event) => {
+      tk.ncolor2 = event.target.value;
+      loader(bwSetting.ncolor2);
+    });
+  }
+  {
+    const row = holder.append("div").style("margin-bottom", "15px");
+    row.append("span").html("Y scale&nbsp;&nbsp;");
+    const ss = row.append("select");
+    const ssop1 = ss.append("option").text("automatic");
+    const ssop2 = ss.append("option").text("fixed");
+    const ssop3 = ss.append("option").text("percentile");
+    ss.on("change", (event) => {
+      const si = event.target.selectedIndex;
+      if (si == 0) {
+        fixed.style("display", "none");
+        percentile.style("display", "none");
+        tk.scale.auto = 1;
+        loader(bwSetting.autoscale);
+        return;
+      }
+      if (si == 1) {
+        fixed.style("display", "block");
+        percentile.style("display", "none");
+        return;
+      }
+      fixed.style("display", "none");
+      percentile.style("display", "block");
+    });
+    let usingfixed = false, usingperc = false;
+    if (tk.scale.auto) {
+      ssop1.property("selected", 1);
+    } else {
+      if (tk.scale.percentile) {
+        usingperc = true;
+        ssop3.property("selected", 1);
+      } else {
+        usingfixed = true;
+        ssop2.property("selected", 1);
+      }
+    }
+    const fixed = row.append("div").style("margin", "10px").style("display", usingfixed ? "block" : "none");
+    {
+      const row1 = fixed.append("div");
+      row1.append("span").html("Max&nbsp;").style("font-family", "Courier").style("font-size", ".9em");
+      const max = row1.append("input").attr("size", 5);
+      if (usingfixed) {
+        max.property("value", tk.scale.max);
+      }
+      const row2 = fixed.append("div");
+      row2.append("span").html("Min&nbsp;").style("font-family", "Courier").style("font-size", ".9em");
+      const min = row2.append("input").attr("size", 5);
+      if (usingfixed) {
+        min.property("value", tk.scale.min);
+      }
+      row2.append("button").text("Set").style("margin-left", "5px").on("click", () => {
+        const s1 = max.property("value");
+        if (s1 == "") {
+          return;
+        }
+        const v1 = Number.parseFloat(s1);
+        if (Number.isNaN(v1)) {
+          alert("invalid max value");
+          return;
+        }
+        const s2 = min.property("value");
+        if (s2 == "") {
+          return;
+        }
+        const v2 = Number.parseFloat(s2);
+        if (Number.isNaN(v2)) {
+          alert("invalid min value");
+          return;
+        }
+        delete tk.scale.auto;
+        delete tk.scale.percentile;
+        tk.scale.max = v1;
+        tk.scale.min = v2;
+        loader(bwSetting.fixedscale);
+      });
+    }
+    const percentile = row.append("div").style("margin-top", "6px").style("display", usingperc ? "block" : "none");
+    {
+      percentile.append("span").html("Percentile&nbsp;").style("font-family", "Courier").style("font-size", ".9em");
+      const input = percentile.append("input").attr("size", 5);
+      if (usingperc) {
+        input.property("value", tk.scale.percentile);
+      }
+      const setpercentile = (s) => {
+        if (s == "") return;
+        const v = Number.parseInt(s);
+        if (Number.isNaN(v) || v <= 0 || v > 100) {
+          alert("percentile should be integer within range 0-100");
+          return;
+        }
+        delete tk.scale.auto;
+        tk.scale.percentile = v;
+        loader(bwSetting.percentilescale);
+      };
+      input.on("keyup", (event) => {
+        if (event.code != "Enter") return;
+        setpercentile(input.property("value"));
+      });
+      percentile.append("button").text("Set").style("margin-left", "5px").on("click", () => {
+        setpercentile(input.property("value"));
+      });
+    }
+  }
+  {
+    config.dotplot.row = holder.append("div").style("margin-bottom", "15px");
+    config.dotplot.row.append("span").html("Dot plot&nbsp;&nbsp;");
+    const s = config.dotplot.row.append("select").on("change", (event) => {
+      const i = event.target.selectedIndex;
+      if (i == 0) {
+        delete tk.dotplotfactor;
+      } else {
+        tk.dotplotfactor = Number.parseInt(event.target.options[i].innerHTML);
+      }
+      loader(i == 0 ? bwSetting.nodotplot : bwSetting.usedotplot);
+    });
+    let o = s.append("option").text("no");
+    if (!tk.dotplotfactor) {
+      o.property("selected", 1);
+    }
+    o = s.append("option").text("5");
+    if (tk.dotplotfactor == 5) {
+      o.property("selected", 1);
+    }
+    o = s.append("option").text("10");
+    if (tk.dotplotfactor == 10) {
+      o.property("selected", 1);
+    }
+    o = s.append("option").text("15");
+    if (tk.dotplotfactor == 15) {
+      o.property("selected", 1);
+    }
+    o = s.append("option").text("20");
+    if (tk.dotplotfactor == 20) {
+      o.property("selected", 1);
+    }
+  }
+  config.dividefactor.row = holder.append("div");
+  {
+    const id = Math.random().toString();
+    const input = config.dividefactor.row.append("input").attr("type", "checkbox").attr("id", id);
+    if (!tk.normalize.disable) {
+      input.property("checked", 1);
+    }
+    config.dividefactor.row.append("label").html("&nbsp;Apply normalization").attr("for", id);
+    const folder = config.dividefactor.row.append("div").style("margin", "5px 10px 0px 20px").style("display", tk.normalize.disable ? "none" : "block");
+    folder.append("span").html("Divide raw value by&nbsp;");
+    const factorinput = folder.append("input").attr("type", "number").style("width", "60px").property("value", tk.normalize.dividefactor).on("keyup", (event) => {
+      if (event.code != "Enter" && event.code != "NumpadEnter") return;
+      const v = event.target.value;
+      if (v <= 0) {
+        return;
+      }
+      tk.normalize.dividefactor = v;
+      loader(bwSetting.usedividefactor);
+    });
+    folder.append("div").text("Enter a value above zero").style("font-size", ".7em").style("color", "#858585");
+    input.on("change", (event) => {
+      if (event.target.checked) {
+        appear(folder);
+        delete tk.normalize.disable;
+        factorinput.property("value", tk.normalize.dividefactor);
+        loader(bwSetting.usedividefactor);
+        return;
+      }
+      disappear(folder);
+      tk.normalize.disable = 1;
+      loader(bwSetting.nodividefactor);
+    });
+  }
+  return config;
+}
+function rglst_quickfix(tk, block) {
+  let rglst = block.tkarg_rglst(tk);
+  if (block.usegm) {
+    const r = rglst[0];
+    r.usegm_isoform = block.usegm.isoform;
+    for (let i = 1; i < rglst.length; i++) {
+      const ri = rglst[i];
+      r.width += ri.width + block.regionspace;
+      r.start = Math.min(r.start, ri.start);
+      r.stop = Math.max(r.stop, ri.stop);
+    }
+    rglst = [r];
+  }
+  let xoff = 0;
+  for (const r of rglst) {
+    r.xoff = 0;
+    xoff += r.width + block.regionspace;
+  }
+  if (block.subpanels.length == tk.subpanels.length) {
+    for (const r of block.subpanels) {
+      rglst.push({
+        chr: r.chr,
+        start: r.start,
+        stop: r.stop,
+        width: r.width,
+        exonsf: r.exonsf,
+        xoff
+      });
+      xoff += r.width + r.leftpad;
+    }
+  }
+  return rglst;
+}
+export {
+  bigwigconfigpanel,
+  loadTk,
+  loadTk_do
+};
+//# sourceMappingURL=block.tk.bedgraphdot-5ZBNIQFY.js.map

package/dist/block.tk.bigwig.ui-V2GLBUU5.js

@@ -0,0 +1,209 @@
+import {
+  isURL,
+  makeBtn,
+  makeGenomeDropDown,
+  makePrompt,
+  makeResetBtn,
+  makeTextAreaInput,
+  makeTextInput
+} from "./chunk-CUSG5PZE.js";
+import {
+  Tabs,
+  appear,
+  first_genetrack_tolist
+} 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 {
+  select_default
+} from "./chunk-NDWTN4U5.js";
+import "./chunk-OMR2DT66.js";
+import "./chunk-HFNDKYVF.js";
+
+// src/block.tk.bigwig.ui.js
+async function bigwigUI(genomes, holder) {
+  const wrapper = holder.append("div").style("margin", "5px 5px 5px 20px").style(
+    "font-family",
+    "'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif"
+  ).classed("sjpp-bw-ui", true).style("overflow", "hidden");
+  const obj = {};
+  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", "20px 0px 10px 0px").style("color", "#003366");
+  const tabs_div = wrapper.append("div").style("margin-left", "40px");
+  makeTrackEntryTabs(tabs_div, obj);
+  const controlBtnsDiv = wrapper.append("div").style("display", "flex").style("align-items", "center").style("margin", "40px 0px 40px 130px");
+  submitButton(controlBtnsDiv, obj, holder, genomes);
+  makeResetBtn(controlBtnsDiv, obj, ".sjpp_bigwigUI_input").style("margin", "0px 20px 20px 0px");
+  infoSection(wrapper, obj);
+}
+function makeTrackEntryTabs(tabs_div, obj) {
+  const tabs = [
+    {
+      label: "Single Track",
+      callback: async (event, tab) => {
+        tab.contentHolder.style("border", "none").style("display", "block");
+        const singlediv = tab.contentHolder.append("div").style("border", "none");
+        appear(tab.contentHolder);
+        makePrompt(singlediv, "Name");
+        trackNameInput(singlediv, obj);
+        makePrompt(singlediv, "File Path");
+        trackFilePathInput(singlediv, obj);
+        delete tab.callback;
+      }
+    },
+    {
+      label: "Multiple Tracks",
+      callback: async (event, tab) => {
+        tab.contentHolder.style("border", "none").style("display", "block");
+        appear(tab.contentHolder);
+        tab.contentHolder.append("div").html(
+          '<p style="margin-left: 10px;">Enter one track per line in the following format: [track name],[path/to/file.bw or URL]</p><p style="margin-left: 20px; color: #7d7c7c;">e.g. BigWig Track, proteinpaint_demo/hg19/bigwig/file.bw</p>'
+        );
+        multiTrackInput(tab.contentHolder, obj);
+        delete tab.callback;
+      }
+    }
+  ];
+  new Tabs({ holder: tabs_div, tabs }).main();
+}
+async 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.genomeselect = g.node();
+}
+function trackNameInput(div, obj) {
+  const track_div = div.append("div").style("margin-left", "10px");
+  const name = makeTextInput(track_div, "BigWig track").style("border", "1px solid rgb(138, 177, 212)").classed("sjpp_bigwigUI_input", true).on("keyup", async () => {
+    obj.trackname = name.property("value").trim();
+  });
+}
+function trackFilePathInput(div, obj) {
+  const track_div = div.append("div").style("margin-left", "10px");
+  const filepath = makeTextInput(track_div).style("border", "1px solid rgb(138, 177, 212)").classed("sjpp_bigwigUI_input", true).on("keyup", async () => {
+    obj.filepath = filepath.property("value").trim();
+    obj.tabInUse = "single";
+  });
+}
+function multiTrackInput(div, obj) {
+  const pasteTrack_div = div.append("div").style("display", "block");
+  const multi = makeTextAreaInput({ div: pasteTrack_div }).style("border", "1px solid rgb(138, 177, 212)").style("margin", "0px 0px 0px 20px").classed("sjpp_bigwigUI_input", true).on("keyup", async () => {
+    obj.multitrackdata = multi.property("value").trim();
+    obj.tabInUse = "multi";
+  });
+}
+function submitButton(div, obj, holder, genomes) {
+  const submit = makeBtn({
+    div,
+    text: "Submit"
+  });
+  submit.style("margin", "0px 20px 20px 60px").style("font-size", "16px").on("click", () => {
+    const runpp_arg = {
+      holder: holder.append("div").style("margin", "20px").node(),
+      /** Do not use window.location.origin. See comment: line 180, renderContent(), client/appdrawer/adSandbox.js*/
+      host: sessionStorage.getItem("hostURL")
+    };
+    const bigwig_arg = validateInput(obj, genomes);
+    if (!bigwig_arg) return;
+    select_default(".sjpp-bw-ui").remove();
+    runproteinpaint(Object.assign(runpp_arg, bigwig_arg));
+  });
+}
+function validateInput(obj, genomes) {
+  if (!obj.filepath && !obj.multitrackdata) {
+    alert("Provide data for either a single track or multiple tracks.");
+    return;
+  }
+  let genome = obj.genomeselect.options[obj.genomeselect.selectedIndex].text;
+  const runpp_args = {
+    block: true,
+    nobox: 1,
+    noheader: true,
+    genome,
+    tracks: []
+  };
+  const g = genomes[genome];
+  if (obj.tabInUse == "single") {
+    let file, url;
+    if (isURL(obj.filepath)) url = obj.filepath;
+    else file = obj.filepath;
+    const tk = {
+      type: "bigwig",
+      name: obj.trackname || "BigWig track",
+      file,
+      url,
+      scale: {
+        auto: 1
+      }
+    };
+    runpp_args.tracks.push(tk);
+    first_genetrack_tolist(g, runpp_args.tracks);
+    return runpp_args;
+  }
+  if (obj.tabInUse == "multi") {
+    for (const data of obj.multitrackdata.split(/[\r\n]/)) {
+      const line = data.split(",");
+      if (line[0] && !line[1]) alert("Problem with submission. Are commas between the track names and filepaths?");
+      if (line[0] && line[1]) {
+        let file, url;
+        const tmp = line[1].trim();
+        if (isURL(tmp)) url = tmp;
+        else file = tmp;
+        const tk = {
+          type: "bigwig",
+          name: line[0].trim(),
+          file,
+          url,
+          scale: {
+            auto: 1
+          },
+          iscustom: true
+        };
+        runpp_args.tracks.push(tk);
+      }
+    }
+    first_genetrack_tolist(g, runpp_args.tracks);
+    return runpp_args;
+  }
+  throw "unknown option";
+}
+function infoSection(div) {
+  div.append("div").style("margin", "10px").style("opacity", "0.65").style("line-height", "1.5").html(`<ul>
+                <li>
+                    <a href=https://docs.google.com/document/d/1ZnPZKSSajWyNISSLELMozKxrZHQbdxQkkkQFnxw6zTs/edit#heading=h.6spyog171fm9 target=_blank>BigWig track documentation</a>
+                </li>
+                <li>
+                    <a href=https://proteinpaint.stjude.org/ppdemo/hg19/bigwig/file.bw target=_blank>Example file</a>
+                </li>
+                <li>
+                    Please see the <a href=https://genome.ucsc.edu/goldenpath/help/bigWig.html target=_blank>UCSC documention</a> for information on bigWig file formatting.
+                </li>
+            </ul>`);
+}
+export {
+  bigwigUI
+};
+//# sourceMappingURL=block.tk.bigwig.ui-V2GLBUU5.js.map