@sjcrh/proteinpaint-client 2.187.0 → 2.188.0

package/dist/chunk-6NJMCO4X.js

@@ -0,0 +1,335 @@
+import {
+  storeInit
+} from "./chunk-H7YJG4YM.js";
+import {
+  summaryInit
+} from "./chunk-A6EFWGWD.js";
+import {
+  navInit
+} from "./chunk-XB3V6S2X.js";
+import {
+  AppBase,
+  downloadSVGsAsPdf,
+  filterRxCompInit,
+  newSandboxDiv,
+  sayerror,
+  vocabInit
+} from "./chunk-2XPDA6NL.js";
+import {
+  importPlot
+} from "./chunk-GHWHLSUX.js";
+import {
+  Menu
+} from "./chunk-HYOEWQ5P.js";
+import {
+  AppApi,
+  getCompInit,
+  multiInit
+} from "./chunk-MVTCBVSX.js";
+import {
+  select_default
+} from "./chunk-I6Y4O3RR.js";
+
+// mass/plot.js
+var MassPlot = class _MassPlot {
+  static type = "plot";
+  constructor(opts) {
+    this.type = _MassPlot.type;
+    setRenderers(this);
+    this.initUi(opts);
+  }
+  reactsTo(action) {
+    if (action.type.includes("cache_termq")) return true;
+    if (action.type.endsWith("_group")) return true;
+    if (action.type.startsWith("plot_")) {
+      return action.id === this.id || action.id == this.parentId || action.config?.parentId === this.id || action.parentId === this.id;
+    }
+    if (action.type.startsWith("filter")) return true;
+    if (action.type.startsWith("cohort")) return true;
+    if (action.type == "app_refresh") return true;
+    if (action.type.endsWith("customTerm")) return true;
+  }
+  // !!! NOTE: This getState() method is reused by the plot-specific recover component.
+  // When logging something within getState, it may have been called by either the plot or recover instance
+  getState(appState) {
+    const config = appState.plots.find((p) => p.id === this.id);
+    if (!config) {
+      throw `No plot with id='${this.id}' found. Did you set this.id before this.api = getComponentApi(this)?`;
+    }
+    return {
+      termfilter: appState.termfilter,
+      config,
+      groups: appState.groups,
+      // quick fix to skip history tracking as needed
+      _scope_: appState._scope_
+    };
+  }
+  async main() {
+    this.dom.errdiv.style("display", "none").style("background-color", "rgba(255,100,100,0.2)").html("");
+    if (!this.components) await this.setComponents(this.opts);
+  }
+  async setComponents(opts) {
+    const _ = await importPlot(opts.chartType);
+    const promises = {
+      // recover: recoverInit({
+      // 	app: this.app,
+      // 	holder: this.dom.localRecoverDiv,
+      // 	getState: appState => this.getState(appState),
+      // 	reactsTo: action =>
+      // 		action.id == this.id &&
+      // 		(action.type == 'plot_edit' || action.type == 'plot_nestedEdits') &&
+      // 		action._track_ != 'none',
+      // 	plot_id: this.id,
+      // 	maxHistoryLen: 10,
+      // 	hideLabel: true
+      // }),
+      chart: _.componentInit({
+        app: this.app,
+        holder: this.dom.viz,
+        header: this.dom.paneTitleDiv,
+        id: this.id,
+        plotDiv: select_default(this.dom.holder.app_div.node().parentNode),
+        /******* reason for passing plotDiv to chart ********
+        				- this plot instance may allow to launch a new plot as a persistent sandbox
+        				  inside mass plotDiv, maintaining the uniform plot appearance despite it's ad-hoc
+        				  the new plot is not a formal mass plot type, and cannot be done via app.dispatch()
+        				  thus the need to directly access plotDiv
+        				- example: mds3 tk from genome browser can launch disco etc
+        				- having access to plotDiv may offer flexibility for the plot to do stuff
+        
+        				since plot.js has no access to mass app .dom.plotDiv in which all apps are shown,
+        				this workarounds gets the parent node of sandbox.app_div which is app.dom.plotDiv
+        				*/
+        getFilterImage: async () => this.components.filter.getFilterImage()
+      })
+    };
+    if (!this.state.config.hidePlotFilter)
+      promises.filter = filterRxCompInit({
+        app: this.app,
+        vocabApi: this.app.vocabApi,
+        parentId: this.id,
+        holder: this.dom.filterDiv,
+        hideLabel: true,
+        emptyLabel: "+Add new filter",
+        callback: (filter) => {
+          this.app.dispatch({
+            id: this.id,
+            type: "plot_edit",
+            config: { filter }
+          });
+        }
+      });
+    this.components = await multiInit(promises);
+  }
+  destroy() {
+    this.dom.holder.app_div.selectAll("*").remove();
+    this.dom.holder.app_div.remove();
+    for (const key in this.dom) {
+      delete this.dom[key];
+    }
+  }
+};
+var plotInit = getCompInit(MassPlot);
+function setRenderers(self) {
+  self.initUi = function(opts) {
+    const holder = opts.holder;
+    opts.holder.app_div.attr("data-testid", "sjpp-massplot-sandbox-" + opts.chartType);
+    holder.header.style("padding", 0);
+    try {
+      self.dom = {
+        tip: new Menu({ padding: "0px" }),
+        holder,
+        paneTitleDiv: holder.header.append("div").style("display", "inline-block").style("color", "#555").style("padding-left", "7px").style("vertical-align", "sub"),
+        localRecoverDiv: holder.header.append("div").style("display", "inline-block"),
+        filterDiv: holder.header.append("div").style("display", "inline-block").style("zoom", 0.9),
+        body: holder.body.style("white-space", "nowrap").style("overflow-x", "auto"),
+        // will hold no data notice or the page title in multichart views
+        errdiv: holder.body.append("div").style("display", "none").style("padding", "5px").style("background-color", "rgba(255,100,100,0.2)"),
+        // dom.viz will hold the rendered view
+        viz: holder.body.append("div")
+      };
+    } catch (e) {
+      self.dom.errdiv.style("display", "none").text(e);
+    }
+  };
+}
+
+// mass/app.ts
+var MassApp = class extends AppBase {
+  // expected class-specific props
+  constructor(opts, api) {
+    super(opts);
+    this.components = {};
+    this.wasDestroyed = false;
+    this.api = api;
+    if (opts.addLoginCallback) {
+      opts.addLoginCallback(() => this.api.dispatch({ type: "app_refresh" }));
+    }
+    this.type = "app";
+    this.dom = {
+      holder: opts.holder,
+      // do not modify holder style
+      topbar: opts.holder.append("div"),
+      errdiv: opts.holder.append("div"),
+      plotDiv: opts.holder.append("div")
+    };
+    this.plotIdToSandboxId = {};
+  }
+  static {
+    this.type = "app";
+  }
+  async preApiFreeze(api) {
+    try {
+      api.tip = new Menu({ padding: "5px" });
+      api.tip.d.on("keyup", (event) => {
+        if (event.key == "Escape") api.tip.hide();
+      });
+      api.printError = (e) => this.printError(e);
+      api.vocabApi = await vocabInit({
+        app: api,
+        state: { vocab: this.opts.state.vocab },
+        fetchOpts: this.opts.fetchOpts,
+        getDatasetAccessToken: this.opts.getDatasetAccessToken
+      });
+      api.hasWebGL = function() {
+        try {
+          const canvas = document.createElement("canvas");
+          return !!(window.WebGLRenderingContext && (canvas.getContext("webgl") || canvas.getContext("experimental-webgl")));
+        } catch (_) {
+          return false;
+        }
+      };
+      this.opts.state.vocab = api.vocabApi.vocab;
+    } catch (e) {
+      console.log(`preApiFreeze error`, e);
+      throw e;
+    }
+  }
+  async init() {
+    try {
+      const debounceInterval = "debounceInterval" in this.opts ? this.opts.debounceInterval : 0;
+      const embeddedSessionState = this.opts.embeddedSessionState;
+      if (embeddedSessionState) {
+        Object.assign(this.opts.state, embeddedSessionState);
+      }
+      this.store = await storeInit({ app: this.api, state: this.opts.state, debounceInterval });
+      this.state = await this.store.copyState();
+      this.components = {};
+      if (this.state.nav.header_mode != "hidden") {
+        this.components.nav = await navInit({
+          app: this.api,
+          holder: this.dom.topbar,
+          header_mode: this.state && this.state.nav && this.state.nav.header_mode,
+          vocab: this.state.vocab,
+          massSessionDuration: this.state.termdbConfig.massSessionDuration,
+          // this.opts.massSessionDuration
+          pkgver: this.opts.pkgver,
+          downloadPlots: () => {
+            this.downloadPlots();
+          }
+        });
+      }
+      this.components.plots = {};
+      if (this.opts.app?.doNotAwaitInitRender) {
+        this.api.dispatch();
+      } else {
+        await this.api.dispatch();
+      }
+    } catch (e) {
+      this.printError(e);
+      throw e;
+    }
+  }
+  async main() {
+    await this.api.vocabApi.main();
+    this.dom.plotDiv?.style(
+      "display",
+      this.state.nav?.header_mode != "hidden" && this.state.nav?.activeTab == 0 ? "none" : "block"
+    );
+    const newPlots = {};
+    let sandbox;
+    for (const plot of this.state.plots) {
+      if (plot.parentId) continue;
+      if (this.components.plots && !(plot.id in this.components.plots)) {
+        sandbox = newSandboxDiv(this.dom.plotDiv, {
+          close: () => {
+            this.api.dispatch({
+              type: "plot_delete",
+              id: plot.id
+            });
+          },
+          plotId: plot.id,
+          beforePlotId: plot.insertBefore || null,
+          style: {
+            width: "98.5%"
+          }
+        });
+        if (plot.chartType == "summary")
+          newPlots[plot.id] = summaryInit(Object.assign({ app: this.api, holder: sandbox }, plot));
+        else newPlots[plot.id] = plotInit(Object.assign({ app: this.api, holder: sandbox }, plot));
+      }
+    }
+    const numNewPlots = Object.keys(newPlots).length;
+    if (numNewPlots) {
+      await Promise.all(Object.values(newPlots));
+      for (const plotId in newPlots) {
+        this.components.plots[plotId] = await newPlots[plotId];
+      }
+    }
+    for (const plotId in this.components.plots) {
+      if (!this.state.plots.find((p) => p.id === plotId)) {
+        this.components.plots[plotId].destroy();
+        delete this.components.plots[plotId];
+      }
+    }
+  }
+  printError(e) {
+    const errdiv = e.errdiv || this.dom.errdiv;
+    if (errdiv) errdiv.style("display", "").html("").style("background-color", "");
+    sayerror(errdiv || this.opts.holder, "Error: " + (e.message || e.error || e));
+    if (e.stack) console.log(e.stack);
+    this.bus.emit("error");
+    if (this.opts?.debug) console.trace("Trace from MassApp.printError() call");
+  }
+  skipPrevActionAbort(action) {
+    if (!action) return false;
+    if (action.type.startsWith("filter")) return false;
+    if (action.type.startsWith("cohort")) return false;
+    if (action.type == "app_refresh") {
+      if (action.subactions) {
+        return action.subactions.find((a) => a.type.startsWith("filter") || a.type.startsWith("cohort")) ? false : true;
+      }
+    }
+    return true;
+  }
+  async downloadPlots() {
+    const chartImagesAll = [];
+    let i = 1;
+    const values = Object.values(this.components.plots);
+    for (const plot of values) {
+      const chart = plot.type == "plot" ? plot.getComponents("chart") : plot;
+      const chartImages = chart.getChartImages ? chart.getChartImages() : null;
+      if (!chartImages) {
+        console.log(`The ${chart.type} does not support downloading images yet`);
+        continue;
+      }
+      for (const chartImage of chartImages) {
+        if (values.length > 1) chartImage.name = `${i}. ${chartImage.name}`;
+        chartImagesAll.push(chartImage);
+      }
+      i++;
+    }
+    if (chartImagesAll.length > 0) {
+      const filters = [];
+      const globalFilterImg = await this.components.nav.getComponents("filter").getFilterImage();
+      if (globalFilterImg) filters.push(globalFilterImg);
+      downloadSVGsAsPdf(chartImagesAll, "plots", "landscape", filters);
+    } else alert("No chart images available for download");
+  }
+};
+var appInit = AppApi.getInitFxn(MassApp);
+
+export {
+  appInit
+};
+//# sourceMappingURL=chunk-6NJMCO4X.js.map

package/dist/chunk-6ON5KAMO.js

@@ -0,0 +1,54 @@
+import {
+  addGeneSearchbox
+} from "./chunk-2XPDA6NL.js";
+import {
+  Menu
+} from "./chunk-HYOEWQ5P.js";
+
+// termdb/handlers/snp.ts
+var SearchHandler = class {
+  init(opts) {
+    this.callback = opts.callback;
+    const geneSearch = addGeneSearchbox({
+      tip: new Menu({ padding: "0px" }),
+      genome: opts.genomeObj,
+      row: opts.holder,
+      searchOnly: "snp",
+      allowVariant: true,
+      callback: () => this.selectSnp(geneSearch)
+    });
+  }
+  async selectSnp(geneSearch) {
+    const { chr, ref, alt, fromWhat } = geneSearch;
+    if (!chr || !ref || !alt || !fromWhat) throw "missing chr, ref, alt, or fromWhat of snp";
+    let start, stop;
+    if (!geneSearch.start && !geneSearch.stop) {
+      if (geneSearch.pos) {
+        start = geneSearch.pos - 1;
+        stop = geneSearch.pos;
+      } else {
+        throw "missing coordinate of snp";
+      }
+    } else {
+      start = geneSearch.start;
+      stop = geneSearch.stop;
+    }
+    const term = {
+      id: fromWhat,
+      chr,
+      start,
+      stop,
+      name: fromWhat,
+      ref,
+      alt: typeof alt == "string" ? [alt] : alt,
+      // is string if input to geneSearch was in variant or hgvs format // TODO: update genesearch.ts to parse alternative alleles from any input format into arrays
+      type: "snp"
+    };
+    this.callback(term);
+  }
+};
+
+export {
+  SearchHandler
+};
+//# sourceMappingURL=chunk-6ON5KAMO.js.map

package/dist/chunk-76GPYMHZ.js

@@ -0,0 +1,102 @@
+import {
+  addGeneSearchbox,
+  first_genetrack_tolist,
+  getDNAMethUnit,
+  sayerror
+} from "./chunk-2XPDA6NL.js";
+import {
+  Menu
+} from "./chunk-HYOEWQ5P.js";
+import {
+  DNA_METHYLATION
+} from "./chunk-FDK4UJMN.js";
+
+// termdb/handlers/dnaMethylation.ts
+var SearchHandler = class {
+  init(opts) {
+    this.opts = opts;
+    this.callback = opts.callback;
+    this.app = opts.app;
+    const holder = opts.holder.append("div").style("margin", "10px 0px");
+    this.dom = {};
+    this.dom.errDiv = holder.append("div").style("margin", "5px 0px").style("display", "none");
+    this.dom.geneSearchDiv = holder.append("div");
+    this.dom.blockDiv = holder.append("div").style("display", "none").style("margin", "15px 4px");
+    const geneSearch = addGeneSearchbox({
+      tip: new Menu({ padding: "0px" }),
+      genome: opts.genomeObj,
+      row: this.dom.geneSearchDiv,
+      callback: async () => {
+        try {
+          this.dom.errDiv.style("display", "none");
+          await this.handleGeneSearch(geneSearch);
+        } catch (e) {
+          this.dom.errDiv.style("display", "block");
+          sayerror(this.dom.errDiv, "Error: " + (e.message || e));
+          if (e.stack) console.log(e.stack);
+        }
+      }
+    });
+  }
+  async handleGeneSearch(geneSearch) {
+    if (geneSearch.geneSymbol) {
+      const { chr, start, stop } = geneSearch;
+      if (!chr || !Number.isInteger(start) || !Number.isInteger(stop))
+        throw new Error("unable to retrieve gene coordinate");
+      this.dom.blockDiv.selectAll("*").remove();
+      this.dom.blockDiv.style("display", "block");
+      this.dom.blockDiv.append("div").style("opacity", 0.6).text("Navigate genome browser to desired region");
+      const arg = {
+        holder: this.dom.blockDiv,
+        genome: this.opts.genomeObj,
+        // genome obj
+        chr,
+        start,
+        stop,
+        tklst: [],
+        nobox: true,
+        width: 500,
+        hidegenelegend: true,
+        debugmode: this.opts.debug
+      };
+      first_genetrack_tolist(this.opts.genomeObj, arg.tklst);
+      const _ = await import("./block-EHZM3FUX.js");
+      this.blockInstance = new _.Block(arg);
+      this.dom.submitBtn = this.dom.blockDiv.append("div").attr("data-testid", "sjpp-dnaMethylation-submitDiv").style("margin", "10px 0px").append("button").style("border", "none").style("border-radius", "20px").style("padding", "10px 15px").text("Submit Region").on("click", async () => {
+        const { chr: chr2, start: start2, stop: stop2 } = this.blockInstance.rglst[0];
+        const term = this.makeTerm({ chr: chr2, start: start2, stop: stop2 });
+        await this.callback(term);
+      });
+    } else if (geneSearch.chr && Number.isInteger(geneSearch.start) && Number.isInteger(geneSearch.stop)) {
+      const { chr } = geneSearch;
+      let { start, stop } = geneSearch;
+      if (geneSearch.actualposition?.len <= 1) {
+        start = geneSearch.actualposition.position;
+        stop = start + 1;
+      }
+      const term = this.makeTerm({ chr, start, stop });
+      await this.callback(term);
+    } else {
+      throw new Error("invalid gene search input");
+    }
+  }
+  makeTerm(opts) {
+    const { chr, start, stop } = opts;
+    if (!chr || !Number.isInteger(start) || !Number.isInteger(stop)) throw new Error("invalid coordinate");
+    const unit = getDNAMethUnit("region", this.app.vocabApi);
+    const term = {
+      chr,
+      start,
+      stop,
+      type: DNA_METHYLATION,
+      unit,
+      genomicFeatureType: "region"
+    };
+    return term;
+  }
+};
+
+export {
+  SearchHandler
+};
+//# sourceMappingURL=chunk-76GPYMHZ.js.map

package/dist/chunk-7AAFBFOH.js

@@ -0,0 +1,147 @@
+import {
+  violinRenderer
+} from "./chunk-SJC2C77V.js";
+import {
+  linear
+} from "./chunk-OAWQ6LOO.js";
+import {
+  drag_default
+} from "./chunk-KYBIQBXE.js";
+import {
+  pointer_default,
+  select_default
+} from "./chunk-I6Y4O3RR.js";
+
+// termsetting/handlers/NumericDensity.ts
+var NumericDensity = class {
+  constructor(opts) {
+    this.dom = {};
+    // WeakMap allows deletion of value when the object/DOM key is deleted,
+    // so better for avoiding memory leak
+    this.vrByDiv = /* @__PURE__ */ new WeakMap();
+    this.ranges = [];
+    this.no_density_data = false;
+    this.brushes = [];
+    this.plot_size = {
+      width: 500,
+      height: 100,
+      xpad: 10,
+      ypad: 20,
+      radius: 8
+    };
+    this.opts = opts;
+    this.termsetting = opts.termsetting;
+    this.tw = opts.termsetting.tw;
+  }
+  async setData() {
+    if (this.density_data) return this.density_data;
+    const self = this.termsetting;
+    const d = await self.vocabApi.getViolinBox(
+      {
+        plotType: "violin",
+        tw: { term: self.term, q: self.q },
+        svgw: this.plot_size.width,
+        radius: this.plot_size.radius,
+        filter: self.filter
+      },
+      self.opts.getBodyParams?.()
+    );
+    if (d.error) throw d;
+    this.density_data = d;
+    return this.density_data;
+  }
+  async showViolin(div, boundaryOpts) {
+    await this.setData();
+    if (!this.vrByDiv.has(div)) {
+      div.style("padding", "5px").selectAll("*").remove();
+      const loadingDiv = div.append("div").style("padding", "10px").style("text-align", "center").html("Getting distribution data ...<br/>");
+      const densityDiv = div.append("div");
+      loadingDiv.remove();
+      const vr = new violinRenderer({
+        holder: densityDiv,
+        rd: this.density_data,
+        width: this.plot_size.width,
+        height: this.plot_size.height,
+        radius: this.plot_size.radius
+      });
+      this.vrByDiv.set(div, vr);
+    }
+    this.vr = this.vrByDiv.get(div);
+    this.dom.svg = this.vr.svg;
+    this.vr.render();
+    if (boundaryOpts) await this.setBinLines(boundaryOpts);
+    return this.density_data;
+  }
+  async setBinLines(boundaryOpts) {
+    if (this.density_data.max == this.density_data.min) {
+      this.handleNoDensity();
+    } else {
+      if (this.dom.binsize_g) this.dom.binsize_g.selectAll("*").remove();
+      this.dom.binsize_g = this.dom.svg.append("g").attr("transform", `translate(${this.plot_size.xpad}, ${this.plot_size.ypad})`).attr("class", "binsize_g");
+      const maxvalue = this.density_data.max;
+      const minvalue = this.density_data.min;
+      this.xscale = linear().domain([minvalue, maxvalue]).range([this.plot_size.xpad, this.plot_size.width + this.plot_size.xpad]);
+      this.ranges = [];
+      this.brushes = [];
+      this.renderBinLines(boundaryOpts);
+    }
+  }
+  handleNoDensity() {
+    this.no_density_data = true;
+    this.ranges = [];
+    this.brushes = [];
+  }
+  renderBinLines(boundaryOpts) {
+    const { density_data, plot_size, tw, xscale } = this;
+    if (!this.density_data) throw `Missing .density_data [density.ts, renderBinLines()]`;
+    const scaledMinX = Math.round(this.xscale(density_data.min));
+    const scaledMaxX = Math.round(this.xscale(density_data.max));
+    const lines = [];
+    for (const [index, v] of boundaryOpts.values.entries()) {
+      lines.push({ ...v, index, scaledX: Math.round(this.xscale(v.x)) });
+    }
+    const lastVisibleLine = lines.find((l) => l.isLastVisibleLine);
+    const lastVisibleScaledX = lastVisibleLine ? lastVisibleLine.scaledX : scaledMaxX;
+    const dragger = drag_default().on("drag", onDrag).on("end", onDrag);
+    this.dom.binsize_g.selectAll("line").remove();
+    this.dom.binsize_g.selectAll("line").data(lines).enter().append("line").style("stroke", (d) => d.isDraggable ? "#cc0000" : "#555").style("stroke-width", 1).attr("x1", (d) => d.scaledX).attr("y1", 0).attr("x2", (d) => d.scaledX).attr("y2", plot_size.height).style("cursor", (d) => d.isDraggable ? "ew-resize" : "").attr("display", (d) => !d.isDraggable && d.scaledX > lastVisibleScaledX ? "none" : "").on("mouseover", function(_, d) {
+      if (d.isDraggable) select_default(this).style("stroke-width", 3);
+    }).on("mouseout", function() {
+      select_default(this).style("stroke-width", 1);
+    }).each(function(d) {
+      if (d.isDraggable) select_default(this).call(dragger);
+    });
+    const lineElems = this.dom.binsize_g.node().querySelectorAll("line");
+    function onDrag(event, _d) {
+      const draggedX = pointer_default(event, this)[0];
+      if (draggedX <= scaledMinX || draggedX >= scaledMaxX) return;
+      const d = _d;
+      d.draggedX = draggedX;
+      select_default(this).attr("x1", d.draggedX).attr("y1", 0).attr("x2", d.draggedX).attr("y2", plot_size.height);
+      const lastVisibleScaledX2 = lastVisibleLine?.draggedX ?? lastVisibleLine?.scaledX ?? scaledMaxX;
+      const xOffset = d.draggedX - d.scaledX;
+      if (xOffset) {
+        for (const elem of lineElems) {
+          const c = elem.__data__;
+          if (c.movesWithLineIndex !== d.index) continue;
+          c.draggedX = c.scaledX + xOffset;
+          select_default(elem).attr("x1", c.draggedX).attr("x2", c.draggedX).style("display", c.draggedX >= lastVisibleScaledX2 ? "none" : "");
+        }
+        const inverted = xscale.invert(d.draggedX);
+        const value = tw.term.type == "integer" ? Math.round(inverted) : inverted.toFixed(3);
+        boundaryOpts.callback(d, Number(value));
+      }
+    }
+  }
+  destroy() {
+    for (const [k, v] of Object.entries(this.dom)) {
+      delete this.dom[k];
+      if (typeof v.remove == "function") v.remove();
+    }
+  }
+};
+
+export {
+  NumericDensity
+};
+//# sourceMappingURL=chunk-7AAFBFOH.js.map