@sjcrh/proteinpaint-client 2.183.0 → 2.183.1

package/dist/chunk-4IL33OUX.js

@@ -0,0 +1,261 @@
+import {
+  hierCluster_renderers_exports
+} from "./chunk-YXJXRXJR.js";
+import {
+  hierCluster_interactivity_exports
+} from "./chunk-DP5ACVIR.js";
+import {
+  Matrix
+} from "./chunk-3DN47Y2E.js";
+import {
+  filterJoin,
+  getNormalRoot
+} from "./chunk-2LCTMDCS.js";
+import {
+  clusterMethodLst,
+  distanceMethodLst,
+  dofetch3
+} from "./chunk-RCYTUKAJ.js";
+import {
+  deepEqual,
+  getCompInit
+} from "./chunk-MVTCBVSX.js";
+import {
+  TermTypes2Dt
+} from "./chunk-SOED2SLH.js";
+import {
+  colorScaleMap
+} from "./chunk-XRVBHNCW.js";
+import {
+  extent,
+  linear
+} from "./chunk-OAWQ6LOO.js";
+
+// plots/matrix/hierCluster.js
+var HierCluster = class _HierCluster extends Matrix {
+  static type = "hierCluster";
+  constructor(opts) {
+    super(opts);
+    this.type = _HierCluster.type;
+    this.chartType = _HierCluster.type;
+  }
+  async init(appState) {
+    await super.init(appState);
+    this.maySetSandboxHeader(appState);
+    this.hcClipId = this.seriesClipId + "-hc";
+    this.dom.hcClipRect = this.dom.svg.select("defs").append("clipPath").attr("id", this.hcClipId).attr("clipPathUnits", "userSpaceOnUse").append("rect").attr("display", "block");
+    this.dom.topDendrogram = this.dom.svg.insert("g", "g").attr("clip-path", `url(#${this.hcClipId})`).append("g").attr("class", "sjpp-matrix-dendrogram").attr("data-testid", "hierCluster_top_dendrogram").on("click", (event) => {
+      const clickedClusterId = this.getClusterFromTopDendrogram(event);
+      if (clickedClusterId) {
+        this.clickedClusterIds = this.getAllChildrenClusterIds(clickedClusterId);
+        this.clickedClusterIds.push(clickedClusterId);
+        const clickedCluster = this.hierClusterData.clustering.col.mergedClusters.get(clickedClusterId);
+        const clickedClusterSampleNames = clickedCluster.children.map((c) => c.name);
+        this.addSelectedSamplesOptions(clickedClusterSampleNames, event);
+      } else {
+        delete this.clickedClusterIds;
+      }
+      if (this.clickedLeftClusterIds) {
+        delete this.clickedLeftClusterIds;
+        this.plotDendrogramHclust();
+      } else this.plotDendrogramHclust("top");
+    });
+    this.dom.leftDendrogram = this.dom.svg.insert("g", "g").attr("class", "sjpp-matrix-dendrogram").attr("data-testid", "hierCluster_left_dendrogram").on("click", (event) => {
+      const clickedLeftClusterId = this.getClusterFromLeftDendrogram(event);
+      if (clickedLeftClusterId) {
+        this.clickedLeftClusterIds = this.getAllChildrenClusterIds(clickedLeftClusterId, true);
+        this.clickedLeftClusterIds.push(clickedLeftClusterId);
+        const clickedLeftCluster = this.hierClusterData.clustering.row.mergedClusters.get(clickedLeftClusterId);
+        const clickedLeftClusterRowsNames = clickedLeftCluster.children.map((c) => c.name);
+        this.addSelectedRowsOptions(clickedLeftClusterRowsNames, event);
+      } else {
+        delete this.clickedLeftClusterIds;
+      }
+      if (this.clickedClusterIds) {
+        delete this.clickedClusterIds;
+        this.plotDendrogramHclust();
+      } else this.plotDendrogramHclust("left");
+    });
+  }
+  async setHierClusterData(_data = {}) {
+    this.prevServerData = this.currServerData;
+    const [d, twlst] = await this.requestData({});
+    if (d.error) throw d.error;
+    this.currServerData = structuredClone(d);
+    if (!deepEqual(this.prevServerData, this.currServerData)) {
+      delete this.clickedClusterIds;
+      delete this.clickedLeftClusterIds;
+    }
+    const s = this.settings.hierCluster;
+    if (!d.clustering) {
+      if (d.gene) {
+        throw `Cannot do clustering: data is only available for 1 gene (${d.gene}). Try again by adding more genes.`;
+      }
+    }
+    this.hierClusterData = d;
+    const c = this.hierClusterData.clustering;
+    this.setHierColorScale(c);
+    const samples = {};
+    for (const [i, column] of c.col.order.entries()) {
+      samples[column.name] = { sample: column.name };
+      for (const [j, row] of c.row.order.entries()) {
+        const tw = twlst.find((tw2) => tw2.$id === row.name || tw2.id === row.name);
+        const value = c.matrix[j][i];
+        samples[column.name][tw.$id] = {
+          key: tw.term.name,
+          values: [
+            {
+              sample: column.name,
+              dt: TermTypes2Dt[this.state.config.dataType],
+              label: s.termGroupName,
+              // gene: tw.term.name,
+              // chr: tw.term.chr,
+              // pos: `${tw.term.start}-${tw.term.stop}`,
+              value
+              // the color will be computed in matrix.cells, so that
+              // it can get updated even when there are no nonsetting state diff
+            }
+          ]
+        };
+      }
+    }
+    this.hcTermNameOrder = this.settings.hierCluster.sortClusterRows == "asListed" ? twlst.map((t) => t.term.name) : this.settings.hierCluster.sortClusterRows == "byName" ? twlst.map((t) => t.term.name).sort() : c.row.order.map((row) => twlst.find((t) => t.$id == row.name)?.term.name);
+    if (this.hcTermNameOrder.includes(void 0)) throw `unable to map row.name to term.name`;
+    this.hcTermSorter = (a, b) => {
+      const i = this.hcTermNameOrder.indexOf(a.tw.term.name);
+      const j = this.hcTermNameOrder.indexOf(b.tw.term.name);
+      if (i == -1 && j == -1) return 0;
+      if (i == -1) return 1;
+      if (j == -1) return -1;
+      return i - j;
+    };
+    this.hcSampleNameOrder = c.col.order.map((col) => col.name);
+    this.hcSampleSorter = (a, b) => {
+      const i = this.hcSampleNameOrder.indexOf(a.sample);
+      const j = this.hcSampleNameOrder.indexOf(b.sample);
+      if (i == -1 && j == -1) return 0;
+      if (i == -1) return 1;
+      if (j == -1) return -1;
+      return i - j;
+    };
+    const byTermId = {};
+    for (const tw of twlst) {
+      if (d.byTermId?.[tw.term.name]) byTermId[tw.$id] = d.byTermId[tw.term.name];
+    }
+    this.hierClusterSamples = {
+      refs: { byTermId, bySampleId: d.bySampleId },
+      lst: c.col.order.map((c2) => samples[c2.name]),
+      samples,
+      removedHierClusterTerms: d.removedHierClusterTerms
+    };
+  }
+  async requestData() {
+    const body = this.currRequestOpts?.hierCluster || this.getHCRequestBody(this.state);
+    const twlst = this.hcTermGroup.lst;
+    const data = await dofetch3("termdb/cluster", { body, signal: this.api.getAbortSignal?.() });
+    return [data, twlst];
+  }
+  getHCRequestBody(state) {
+    this.hcTermGroup = this.config.termgroups.find((grp) => grp.type == "hierCluster") || this.termOrder?.find((t) => t.grp.type == "hierCluster")?.grp;
+    const s = state.config.settings.hierCluster;
+    const dictionaryLegendFilter = {
+      type: "tvslst",
+      in: true,
+      join: "and",
+      lst: state.config.legendValueFilter.lst.filter((f) => !f.tvs.legendFilterType)
+    };
+    const terms = this.getClusterRowTermsAsParameter();
+    if (!terms.length) throw "no data";
+    if (!clusterMethodLst.find((i) => i.value == s.clusterMethod)) throw "Invalid cluster method";
+    if (!distanceMethodLst.find((i) => i.value == s.distanceMethod)) throw "Invalid distance method";
+    const body = {
+      genome: state.vocab.genome,
+      dslabel: state.vocab.dslabel,
+      dataType: state.config.dataType,
+      clusterMethod: s.clusterMethod,
+      distanceMethod: s.distanceMethod,
+      zScoreTransformation: s.zScoreTransformation,
+      terms,
+      filter: getNormalRoot(filterJoin([state.filter, dictionaryLegendFilter])),
+      filter0: state.filter0
+    };
+    if (state.config.dataType == "proteomeAbundance") {
+      body.proteomeDetails = {
+        assay: state.config.proteomeDetails?.assay,
+        cohort: state.config.proteomeDetails?.cohort
+      };
+    }
+    return body;
+  }
+  combineData() {
+    if (!this.hierClusterSamples) return;
+    const d = this.data;
+    const removedHierClusterTerms = this.hierClusterSamples.removedHierClusterTerms;
+    const samples = {};
+    const lst = [];
+    for (const sampleId in this.hierClusterSamples.samples) {
+      const s = this.hierClusterSamples.samples[sampleId];
+      samples[sampleId] = s;
+      lst.push(s);
+      if (sampleId in d.samples) Object.assign(s, d.samples[sampleId]);
+      const _ref_ = this.hierClusterSamples.refs.bySampleId[sampleId] || {};
+      if (!s._ref_) s._ref_ = _ref_;
+      else Object.assign(s._ref_, _ref_);
+    }
+    const t = this.hierClusterSamples.refs.byTermId;
+    for (const $id of Object.keys(t)) {
+      d.refs.byTermId[$id] = Object.assign({}, d.refs.byTermId[$id] || {}, t[$id]);
+    }
+    this.data = { samples, lst, refs: d.refs, removedHierClusterTerms };
+  }
+  setHierColorScale(c) {
+    const hc = this.settings.hierCluster;
+    const scale = linear(colorScaleMap[hc.colorScale].domain, colorScaleMap[hc.colorScale].range).clamp(true);
+    const globalMinMaxes = [];
+    for (const row of c.matrix) {
+      globalMinMaxes.push(...extent(row));
+    }
+    const absMax = Math.min(hc.zScoreCap, Math.max(...extent(globalMinMaxes).map(Math.abs)));
+    const [min, max] = hc.zScoreTransformation ? [-absMax, absMax] : [Math.min(...globalMinMaxes), Math.max(...globalMinMaxes)];
+    this.hierClusterValues = { scale, min, max };
+  }
+  getValueColor(value) {
+    const hc = this.settings.hierCluster;
+    if (hc.zScoreTransformation) {
+      const zScoreCap = this.settings.hierCluster.zScoreCap;
+      return this.hierClusterValues.scale((value - -zScoreCap) / (zScoreCap * 2));
+    } else {
+      return this.hierClusterValues.scale(value / this.hierClusterValues.max);
+    }
+  }
+  /* returns list of gene terms as request parameter, e.g. {gene,chr,start,stop}
+  	request parameter only need term but not tw, as it will simply fetch continuous sample values on terms without transform
+  
+  	use of this function is unfortunate because:
+  		the incomplete migration of {name} to {gene} for gene-based term
+  		geneset edit ui is hardcoded to return {name}
+  		existing plot states contain {name}
+  
+  	!!! migration instruction !!!
+  	- term.name is for display only, if a term is gene-based, it has term.gene=str
+  	- a geneVariant term can be based on a genomic range (and not a gene), in that case it won't have term.gene and cannot be used where gene is expected, e.g. gene-based clustering analysis
+  
+  	*/
+  getClusterRowTermsAsParameter() {
+    const lst = this.hcTermGroup.lst.map(this.opts.app.vocabApi.getTwMinCopy);
+    lst.sort((a, b) => a.term.name < b.term.name ? -1 : 1);
+    return lst;
+  }
+};
+for (const methods of [hierCluster_renderers_exports, hierCluster_interactivity_exports]) {
+  for (const methodName in methods) HierCluster.prototype[methodName] = methods[methodName];
+}
+var hierClusterInit = getCompInit(HierCluster);
+var componentInit = hierClusterInit;
+
+export {
+  HierCluster,
+  hierClusterInit,
+  componentInit
+};
+//# sourceMappingURL=chunk-4IL33OUX.js.map

package/dist/chunk-4YG57UVZ.js

@@ -0,0 +1,228 @@
+import {
+  appInit
+} from "./chunk-CAHAYB6O.js";
+import {
+  getDefaultViolinSettings
+} from "./chunk-QDRZL47L.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-4YG57UVZ.js.map