@sjcrh/proteinpaint-client 2.182.0 → 2.183.0

package/dist/chunk-NB7NLFGZ.js

@@ -0,0 +1,228 @@
+import {
+  appInit
+} from "./chunk-MXNSW55L.js";
+import {
+  getDefaultViolinSettings
+} from "./chunk-CVBQWXLH.js";
+import {
+  select_default
+} from "./chunk-NDWTN4U5.js";
+
+// plots/regression.inputs.values.table.js
+var row_hover_bgcolor = "#fff6dc";
+var InputValuesTable = class {
+  constructor(opts) {
+    this.opts = opts;
+    this.input = opts.input;
+    setRenderers(this);
+    this.setDOM(opts.holder);
+  }
+  main() {
+    try {
+      const term = this.input.term;
+      if (!term || !this.input.termStatus) {
+        this.dom.holder.style("display", "none");
+        this.dom.loading_div.style("display", "none");
+        return;
+      } else if (term) {
+        this.dom.holder.style("display", "block");
+        this.dom.loading_div.style("display", "block");
+        this.updateValueCount();
+        this.dom.loading_div.style("display", "none");
+        this.render();
+        return;
+      }
+    } catch (e) {
+      this.dom.loading_div.style("display", "none");
+      throw e;
+    }
+  }
+  updateValueCount() {
+    const i = this.input;
+    try {
+      if (i.pill && i.pill.validateQ) {
+        i.pill.validateQ({
+          term: i.term.term,
+          q: i.term.q,
+          sampleCounts: i.termStatus.sampleCounts
+        });
+      }
+    } catch (e) {
+      i.term.error = e;
+    }
+  }
+};
+function setRenderers(self) {
+  self.setDOM = (holder) => {
+    self.dom = {
+      holder: holder.style("margin", "10px").style("font-size", ".8em").style("text-align", "left").style("color", "#999"),
+      loading_div: holder.append("div").text("Loading..").style("display", "none"),
+      top_info_div: holder.append("div").style("padding-bottom", "5px"),
+      violin_div: holder.append("div").style("color", "black").style("padding-top", "5px"),
+      table_div: holder.append("table").style("margin", "5px 0px 15px 0px").style("border-collapse", "collapse").style("color", "black"),
+      bottom_info_div: holder.append("div"),
+      excluded_div: holder.append("table").style("display", "none").style("margin", "5px 10px").style("border-collapse", "collapse")
+    };
+  };
+  self.render = async () => {
+    const input = self.input;
+    renderTopInfo(input);
+    await renderValuesTable(input);
+    renderBottomInfo(input);
+    renderExcludedValues(input);
+  };
+  function renderTopInfo(input) {
+    if (input.termStatus.topInfoStatus?.length) {
+      self.dom.top_info_div.style("display", "block").html(input.termStatus.topInfoStatus.join("<br>"));
+    } else {
+      self.dom.top_info_div.style("display", "none");
+    }
+  }
+  async function renderValuesTable(input) {
+    if (input.term.q.mode == "continuous" || input.term.q.mode == "spline") {
+      self.dom.violin_div.style("display", "block");
+      self.dom.table_div.style("display", "none");
+      if (self.plotAppApi) {
+        const action = {
+          type: "app_refresh",
+          state: {
+            termfilter: {
+              filter: self.input.parent.parent.filter
+            }
+          },
+          subactions: [
+            {
+              type: "plot_edit",
+              id: self.violinApi.id,
+              config: {
+                term: input.term
+              }
+            }
+          ]
+        };
+        self.plotAppApi.dispatch(action);
+      } else {
+        const opts = {
+          holder: self.dom.violin_div,
+          vocabApi: self.input.parent.app.vocabApi,
+          state: {
+            vocab: {
+              genome: self.input.parent.app.vocabApi.genome,
+              dslabel: self.input.parent.app.vocabApi.dslabel
+            },
+            termfilter: {
+              filter: self.input.parent.parent.filter
+            },
+            plots: [
+              {
+                chartType: "violin",
+                term: input.term,
+                settings: {
+                  violin: getDefaultViolinSettings(null, {
+                    svgw: 350,
+                    axisHeight: 25,
+                    rightMargin: 10,
+                    datasymbol: "rug",
+                    radius: 8,
+                    plotThickness: 80
+                  })
+                }
+              }
+            ]
+          },
+          // global options for plotAppApi
+          // opts.violin will apply to all violin plots within the plotApp
+          // rx will pass options by component type, which are not tracked in state
+          // examples are callbacks, event listeners, etc
+          violin: {
+            mode: "minimal"
+          }
+        };
+        self.plotAppApi = await appInit(opts);
+        const plotId = self.plotAppApi.getState().plots[0].id;
+        self.violinApi = self.plotAppApi.getComponents(`plots.${plotId}`);
+      }
+    } else {
+      self.dom.violin_div.style("display", "none");
+      const data = input.termStatus.sampleCounts;
+      if (!data || !data.length) {
+        self.dom.table_div.style("display", "none");
+        return;
+      }
+      self.dom.table_div.style("display", "block");
+      const l = self.input.orderedLabels;
+      const sortFxn = l && l.length ? (a, b) => l.indexOf(a.label) - l.indexOf(b.label) : (a, b) => b.samplecount - a.samplecount;
+      const tr_data = data.sort(sortFxn);
+      const maxCount = Math.max(...tr_data.map((v) => v.samplecount), 0);
+      tr_data.forEach((v) => v.bar_width_frac = Number((1 - (maxCount - v.samplecount) / maxCount).toFixed(4)));
+      self.dom.table_div.selectAll("tr").remove();
+      const trs = self.dom.table_div.selectAll("tr").data(tr_data, (b) => b.key);
+      trs.enter().append("tr").each(trEnter);
+    }
+  }
+  function renderBottomInfo(input) {
+    if (input.termStatus.bottomSummaryStatus) {
+      self.dom.bottom_info_div.style("display", "block").html(input.termStatus.bottomSummaryStatus);
+    } else {
+      self.dom.bottom_info_div.style("display", "none");
+    }
+  }
+  function renderExcludedValues(input) {
+    const data = input.termStatus.excludeCounts;
+    if (!data || !data.length) {
+      self.dom.excluded_div.style("display", "none");
+      return;
+    }
+    self.dom.excluded_div.style("display", "block").selectAll("tr").remove();
+    const trs = self.dom.excluded_div.selectAll("tr").data(data, (b) => b.key);
+    trs.enter().append("tr").each(trEnter);
+    self.dom.excluded_div.selectAll("td").style("color", "#999");
+  }
+  function trEnter(item) {
+    const tr = select_default(this);
+    const input = this.parentNode.__data__;
+    const t = input.term;
+    const maxBarWidth = 150;
+    tr.style("text-align", "left").style("cursor", input.termStatus.allowToSelectRefGrp ? "pointer" : "default");
+    const tdSpacing = "1px 10px 1px 0px";
+    tr.append("td").style("padding", tdSpacing).style("text-align", "left").style("color", "black").text(item.samplecount !== void 0 ? "n=" + item.samplecount : "");
+    tr.append("td").style("padding", tdSpacing).style("text-align", "left").style("color", "black").text(item.label);
+    const bar_td = tr.append("td").style("padding", tdSpacing);
+    const barWidth = maxBarWidth * item.bar_width_frac;
+    bar_td.append("div").style("margin", tdSpacing).style("width", barWidth + "px").style("height", "15px").style("background-color", "#ddd");
+    addTrBehavior({ input, item, tr, rendered: false });
+  }
+  function addTrBehavior({ input, item, tr, rendered }) {
+    if (!item.bar_width_frac) return;
+    const t = input.term;
+    const hover_flag = input.termStatus.allowToSelectRefGrp;
+    let ref_text;
+    if (rendered) {
+      tr.style("background", "white");
+      ref_text = select_default(tr.node().lastChild).select("div").style("display", item.key === t.refGrp && hover_flag ? "inline-block" : "none").style("border", item.key === t.refGrp && hover_flag ? "1px solid #bbb" : "");
+    } else if (input.term.q.mode != "cutoff") {
+      const reference_td = tr.append("td").style("padding", "1px 5px").style("text-align", "left");
+      ref_text = reference_td.append("div").style("display", item.key === t.refGrp && hover_flag ? "inline-block" : "none").style("padding", "2px 10px").style("border", item.key === t.refGrp && hover_flag ? "1px solid #bbb" : "").style("border-radius", "10px").style("color", "#999").style("font-size", ".7em").text("REFERENCE");
+      if (hover_flag) {
+        tr.on("mouseover", () => {
+          if (t.refGrp !== item.key) {
+            tr.style("background", row_hover_bgcolor);
+            ref_text.style("display", "inline-block").style("border", "").text("Set as reference");
+          } else tr.style("background", "white");
+        }).on("mouseout", () => {
+          tr.style("background", "white");
+          if (t.refGrp !== item.key) ref_text.style("display", "none");
+        }).on("click", () => {
+          t.refGrp = item.key;
+          ref_text.style("border", "1px solid #bbb").text("REFERENCE");
+          self.opts.callback(t);
+        });
+      }
+    }
+  }
+}
+
+export {
+  InputValuesTable
+};
+//# sourceMappingURL=chunk-NB7NLFGZ.js.map

package/dist/chunk-NGGWK6HX.js

@@ -0,0 +1,302 @@
+import {
+  appear2 as appear,
+  axisstyle,
+  bwSetting,
+  disappear2 as disappear,
+  makeNumericAxisConfig,
+  rgb2hex
+} from "./chunk-OXJ2TWDO.js";
+import {
+  dofetch3
+} from "./chunk-7RN3L2BX.js";
+import {
+  axisLeft
+} from "./chunk-LOZEKOES.js";
+import {
+  format,
+  linear
+} from "./chunk-OAWQ6LOO.js";
+
+// src/block.tk.bigwig.js
+function bigwigfromtemplate(tk, template) {
+  tk.scale = {};
+  if (template.scale) {
+    for (const k in template.scale) {
+      tk.scale[k] = template.scale[k];
+    }
+  } else {
+    tk.scale.auto = 1;
+  }
+  if (tk.normalize) {
+  } else {
+    tk.normalize = {
+      dividefactor: 1,
+      disable: 1
+    };
+  }
+  tk.barheight = template.height || 50;
+  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";
+}
+function bigwigmaketk(tk, block) {
+  tk.img = tk.glider.append("image");
+  tk.tklabel.attr("y", tk.barheight / 2);
+  tk.leftaxis = tk.gleft.append("g");
+  tk.config_handle = block.maketkconfighandle(tk).on("click", () => {
+    tk.tkconfigtip.clear().showunder(tk.config_handle.node());
+    bigwigconfigpanel(tk, block, tk.tkconfigtip.d, () => bigwigload(tk, block));
+  });
+}
+async function bigwigload(tk, block) {
+  block.tkcloakon(tk);
+  const par = block.tkarg_q(tk);
+  if (tk.dotplotfactor) par.dotplotfactor = tk.dotplotfactor;
+  if (tk.bgcolor) par.bgcolor = tk.bgcolor;
+  tk.height_main = tk.toppad + tk.barheight + tk.bottompad;
+  tk.img.attr("width", block.width).attr("height", tk.barheight);
+  let errtext;
+  try {
+    let data;
+    if (tk.imgData) {
+      data = tk.imgData;
+    } else {
+      data = await dofetch3("tkbigwig", { method: "POST", body: JSON.stringify(par) });
+    }
+    if (data.error) throw data.error;
+    if (!data.src) throw "data.src missing";
+    tk.tklabel.transition().attr("y", tk.barheight / 2);
+    tk.img.attr("xlink:href", data.src);
+    if (data.minv != void 0) {
+      tk.scale.min = data.minv;
+    }
+    if (data.maxv != void 0) {
+      tk.scale.max = data.maxv;
+    }
+    tk.leftaxis.selectAll("*").remove();
+    if (data.nodata) {
+      throw "No data in view range";
+    }
+    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
+    });
+  } catch (err) {
+    tk.img.attr("width", 0).attr("height", 0);
+    if (err.stack) {
+      console.log(err.stack);
+    }
+    errtext = typeof err == "string" ? err : err.message;
+  } finally {
+    block.tkcloakoff(tk, { error: errtext });
+    block.block_setheight();
+    for (const panel of tk.subpanels) {
+      bigwigloadsubpanel(tk, block, panel);
+    }
+  }
+}
+async function bigwigloadsubpanel(tk, block, panel) {
+  block.tkcloakon_subpanel(panel);
+  const par = block.tkarg_q(tk);
+  if (tk.dotplotfactor) {
+    par.dotplotfactor = tk.dotplotfactor;
+  }
+  par.width = panel.width;
+  par.rglst = [
+    {
+      chr: panel.chr,
+      start: panel.start,
+      stop: panel.stop,
+      width: panel.width
+    }
+  ];
+  delete par.percentile;
+  delete par.autoscale;
+  panel.img.attr("width", panel.width).attr("height", tk.barheight);
+  let errtext;
+  try {
+    if (tk.imgData) throw "subpanel not supported by imgData yet";
+    const data = await dofetch3("tkbigwig", { method: "POST", body: JSON.stringify(par) });
+    if (data.error) throw data.error;
+    panel.img.attr("xlink:href", data.src);
+  } catch (err) {
+    panel.img.attr("width", 0).attr("height", 0);
+    if (err.stack) {
+      console.log(err.stack);
+    }
+    errtext = typeof err == "string" ? err : err.message;
+  } finally {
+    block.tkcloakoff_subpanel(panel, { error: errtext });
+  }
+}
+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 setting = {};
+    if (tk.scale.auto) {
+      setting.auto = 1;
+    } else if (tk.scale.percentile) {
+      setting.percentile = tk.scale.percentile;
+    } else {
+      setting.fixed = { min: tk.scale.min, max: tk.scale.max };
+    }
+    makeNumericAxisConfig({
+      holder: holder.append("div").style("margin-bottom", "15px"),
+      setting,
+      callback: (s) => {
+        if (s.auto) {
+          tk.scale.auto = 1;
+          loader(bwSetting.autoscale);
+          return;
+        }
+        if (s.fixed) {
+          delete tk.scale.auto;
+          delete tk.scale.percentile;
+          tk.scale.max = s.fixed.max;
+          tk.scale.min = s.fixed.min;
+          loader(bwSetting.fixedscale);
+          return;
+        }
+        delete tk.scale.auto;
+        tk.scale.percentile = s.percentile;
+        loader(bwSetting.percentilescale);
+      }
+    });
+  }
+  {
+    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;
+}
+
+export {
+  bigwigfromtemplate,
+  bigwigmaketk,
+  bigwigload,
+  bigwigloadsubpanel,
+  bigwigconfigpanel
+};
+//# sourceMappingURL=chunk-NGGWK6HX.js.map