@sjcrh/proteinpaint-client 2.181.0 → 2.182.0

package/dist/chunk-IBTPGSYI.js

@@ -0,0 +1,526 @@
+import {
+  matrix_data_exports
+} from "./chunk-GO5SIPFE.js";
+import {
+  matrix_layout_exports
+} from "./chunk-FOEZG4VX.js";
+import {
+  matrix_serieses_exports
+} from "./chunk-Y3TDC7NU.js";
+import {
+  matrix_legend_exports
+} from "./chunk-UR3C4SCH.js";
+import {
+  matrix_groups_exports
+} from "./chunk-AETE4F7R.js";
+import {
+  setComputedConfig
+} from "./chunk-GTOY3JJO.js";
+import {
+  setMatrixDom
+} from "./chunk-IC7SUXJD.js";
+import {
+  setInteractivity
+} from "./chunk-IIRU6VK2.js";
+import {
+  setRenderers
+} from "./chunk-VJ37HKM6.js";
+import {
+  MatrixCluster
+} from "./chunk-A5TSPTYC.js";
+import {
+  MatrixControls
+} from "./chunk-XOBD3EAM.js";
+import {
+  PlotBase,
+  TwRouter,
+  getCombinedTermFilter,
+  rebaseGroupFilter,
+  routedTermTypes,
+  sayerror,
+  svgLegend
+} from "./chunk-7FEHI46K.js";
+import {
+  copyMerge,
+  deepEqual,
+  getCompInit
+} from "./chunk-MVTCBVSX.js";
+import {
+  dt2label,
+  mclass,
+  morigin
+} from "./chunk-IGEQI6MR.js";
+import {
+  convertUnits
+} from "./chunk-BEWDIM6H.js";
+import {
+  select_default
+} from "./chunk-NDWTN4U5.js";
+
+// plots/matrix/matrix.xtw.ts
+var addons;
+async function getTermGroups(termgroups, app) {
+  const termGroups = structuredClone(termgroups);
+  if (!addons)
+    addons = {
+      QualTWValues: discreteAddons,
+      QualTWPredefinedGS: discreteAddons,
+      QualTWCustomGS: discreteAddons,
+      NumTWRegularBin: discreteAddons,
+      NumTWCustomBin: discreteAddons,
+      NumTWCont: continuousAddons,
+      TermCollectionTWCont: TermCollectionContAddons
+    };
+  const opts = {
+    vocabApi: app.vocabApi,
+    addons
+  };
+  for (const [origIndex, tG] of termGroups.entries()) {
+    tG.origIndex = origIndex;
+    if (tG.type == "hierCluster") continue;
+    const xtwlst = [];
+    for (const tw of tG.lst) {
+      const inputTw = tw.getTw?.() || tw;
+      xtwlst.push(
+        inputTw.type in opts.addons && routedTermTypes.has(inputTw.term.type) ? await TwRouter.init(inputTw, opts) : inputTw
+      );
+    }
+    tG.lst = xtwlst;
+  }
+  return termGroups;
+}
+var discreteAddons = {
+  setCellProps: {
+    value: function(cell, anno, value, s, t, self2, width, height, dx, dy, i) {
+      const tw = this.getTw();
+      const key = anno.key;
+      const values = tw.term.values || {};
+      cell.label = "label" in anno ? anno.label : values[key]?.label ? values[key].label : key;
+      const tw$id = tw.$id;
+      cell.fill = self2.config.settings.matrix.twSpecificSettings?.[tw$id]?.[key]?.color || anno.color || values[anno.key]?.color || self2.data.refs.byTermId?.[tw$id]?.bins?.find((b) => anno.key == b.name)?.color;
+      cell.order = t.ref.bins ? t.ref.bins.findIndex((bin) => bin.name == key) : 0;
+      cell.x = cell.totalIndex * dx + cell.grpIndex * s.colgspace;
+      cell.y = height * i;
+      const group = tw.legend?.group || tw$id;
+      return { ref: t.ref, group, value: key, entry: { key, label: cell.label, fill: cell.fill } };
+    }
+  }
+};
+var continuousAddons = {
+  setCellProps: {
+    value: function(cell, anno, value, s, t, self2, width, height, dx, dy, i) {
+      const tw = this.getTw();
+      const key = anno.key;
+      const values = tw.term.values || {};
+      cell.label = "label" in anno ? anno.label : values[key]?.label ? values[key].label : key;
+      cell.fill = anno.color || values[anno.key]?.color;
+      const tw$id = tw.$id;
+      const twSpecificSettings = self2.config.settings.matrix.twSpecificSettings;
+      if (!twSpecificSettings[tw$id]) twSpecificSettings[tw$id] = {};
+      const twSettings = twSpecificSettings[tw$id];
+      if (!twSettings.contBarH) twSettings.contBarH = s.barh;
+      if (!("gap" in twSettings)) twSettings.contBarGap = 4;
+      const specialValue = tw.term.values?.[cell.key];
+      if (specialValue?.uncomputable) {
+        cell.x = cell.totalIndex * dx + cell.grpIndex * s.colgspace;
+        cell.y = height * i;
+        cell.height = twSettings.contBarH;
+        cell.fill = "transparent";
+        cell.label = specialValue.label;
+        const group = tw.legend?.group || tw.$id;
+        return {
+          ref: t.ref,
+          group,
+          value: specialValue.label || specialValue.key,
+          entry: { key, label: cell.label, fill: cell.fill }
+        };
+      }
+      cell.fill = self2.config.settings.matrix.twSpecificSettings?.[tw$id]?.contBarColor || "#555";
+      if (s.transpose) {
+        cell.height = t.scale(cell.key);
+        cell.x = twSettings.contBarGap;
+      } else {
+        const vc = cell.term.valueConversion;
+        let renderV = vc ? cell.key * vc.scaleFactor : cell.key;
+        if (this.q.convert2ZScore) {
+          renderV = (renderV - t.mean) / t.std;
+          cell.fill = renderV > 0 ? "#FF6666" : "#6666FF";
+          cell.zscoreLabel = ` (Z-score: ${renderV.toFixed(2)})`;
+        }
+        cell.label = "label" in anno ? anno.label : values[key]?.label ? values[key].label : this.term.unit ? `${cell.key.toFixed(2)} ${this.term.unit}` : cell.key.toFixed(2);
+        cell.height = renderV >= 0 ? t.scales.pos(renderV) : t.scales.neg(renderV);
+        cell.x = cell.totalIndex * dx + cell.grpIndex * s.colgspace;
+        cell.y = renderV >= 0 ? t.counts.posMaxHt + twSettings.contBarGap - cell.height : t.counts.posMaxHt + twSettings.contBarGap;
+        cell.convertedValueLabel = !vc ? "" : convertUnits(cell.key, vc.fromUnit, vc.toUnit, vc.scaleFactor);
+      }
+    }
+  }
+};
+var TermCollectionContAddons = {
+  setCellProps: {
+    value: function(cell, anno, value, s, t, self2, width, height, dx, _dy, _i) {
+      const tw = this.getTw();
+      const twSpecificSettings = self2.config.settings.matrix.twSpecificSettings;
+      if (!twSpecificSettings[tw.$id]) twSpecificSettings[tw.$id] = {};
+      const twSettings = twSpecificSettings[tw.$id];
+      if (!twSettings.contBarH) twSettings.contBarH = s.barh;
+      if (!("gap" in twSettings)) twSettings.contBarGap = 4;
+      const isNegative = value.value < 0;
+      if (isNegative) {
+        cell.height = t.scales.neg ? t.scales.neg(value.value) - t.scales.neg(0) : 0;
+        cell.x = cell.totalIndex * dx + cell.grpIndex * s.colgspace;
+        const cumulativeHeight = t.scales.neg ? t.scales.neg(value.pre_val_sum) - t.scales.neg(0) : 0;
+        cell.y = t.counts.posMaxHt + twSettings.contBarGap + (t.scales.neg ? t.scales.neg(0) : 0) + cumulativeHeight;
+      } else {
+        cell.height = t.scales.pos(value.value) - t.scales.pos(0);
+        cell.x = cell.totalIndex * dx + cell.grpIndex * s.colgspace;
+        const cumulativeHeight = t.scales.pos(value.pre_val_sum) - t.scales.pos(0);
+        cell.y = t.counts.posMaxHt + twSettings.contBarGap - t.scales.pos(0) - cumulativeHeight - cell.height;
+      }
+      cell.label = value.label;
+      cell.fill = twSettings[value.label]?.color || value.color || tw.term.propsByTermId?.[value.label]?.color;
+      cell.value = value.value;
+      return {
+        ref: t.ref,
+        group: tw.$id,
+        value: value.label,
+        order: -1,
+        entry: { key: value.label, label: value.label, fill: cell.fill }
+      };
+    }
+  }
+};
+
+// plots/matrix/matrix.js
+var Matrix = class _Matrix extends PlotBase {
+  static type = "matrix";
+  configTermKeys = ["termgroups.lst", "divideBy"];
+  constructor(opts) {
+    super(opts);
+    this.type = _Matrix.type;
+    this.holderTitle = "Sample Matrix";
+    this.optionalFeatures = JSON.parse(sessionStorage.getItem("optionalFeatures") || `{}`)?.matrix || [];
+    setInteractivity(this);
+    setRenderers(this);
+  }
+  async init(appState) {
+    const opts = this.opts;
+    if (opts.reactsTo) this.reactsTo = opts.reactsTo;
+    this.setDom = setMatrixDom;
+    this.setDom(opts);
+    this.config = appState.plots.find((p) => p.id === this.id);
+    this.settings = Object.assign({}, this.config.settings.matrix);
+    this.computed = {};
+    if (this.dom.header) this.dom.header.html(this.config.preBuiltPlotTitle || this.holderTitle);
+    this.setControls(appState);
+    this.clusterRenderer = new MatrixCluster({ holder: this.dom.cluster, app: this.app, parent: this });
+    this.legendRenderer = svgLegend({
+      holder: this.dom.legendG,
+      rectFillFxn: (d) => d.color,
+      iconStroke: "#aaa",
+      handlers: {
+        legend: {
+          click: this.legendClick
+        }
+      },
+      settings: {
+        isExcludedAttr: "isExcluded"
+      },
+      note: "CLICK A ROW LABEL OR ITEM TO APPLY FILTERING"
+    });
+    this.customTipApi = this.dom.tip.getCustomApi({
+      d: this.dom.menubody,
+      clear: (event) => {
+        if (event?.target) this.dom.menutop.style("display", "none");
+        this.dom.menubody.selectAll("*").remove();
+        return this.customTipApi;
+      },
+      show: () => {
+        this.dom.menubody.style("display", "block");
+      },
+      hide: () => {
+      }
+    });
+    this.setPill(appState);
+    const commonKeys = { mclass, dt2label, morigin };
+    for (const k in commonKeys) {
+      const v = commonKeys[k];
+      this[k] = copyMerge({}, v, appState.termdbConfig[k] || {}, appState.termdbConfig.matrix?.[k] || {});
+    }
+  }
+  setControls(appState) {
+    this.controlsRenderer = new MatrixControls(
+      {
+        app: this.app,
+        id: this.id,
+        parent: this,
+        holder: this.dom.controls,
+        getSvg: () => this.dom.svg.node()
+      },
+      appState
+    );
+  }
+  // reactsTo(action) {
+  // 	// note: a parent app or 'plot' component is expected to already have
+  // 	// a comprehensive reactsTo() call to filter the actions for this component,
+  // 	// so only farther selective action filters should be applied here as needed
+  // 	return true
+  // }
+  getState(appState) {
+    const config = appState.plots.find((p) => p.id === this.id);
+    const filter0 = appState.termfilter.filter0;
+    this.prevFilter0 = this.state?.filter0;
+    const parentConfig = appState.plots.find((p) => p.id === this.parentId);
+    const termfilter = getCombinedTermFilter(appState, config.filter || parentConfig?.filter);
+    return {
+      isVisible: true,
+      config,
+      filter: termfilter.filter,
+      filter0,
+      // read-only, invisible filter currently only used for gdc dataset
+      hasVerifiedToken: this.app.vocabApi.hasVerifiedToken(),
+      tokenVerificationMessage: this.app.vocabApi.tokenVerificationMessage,
+      vocab: appState.vocab,
+      termdbConfig: appState.termdbConfig,
+      clusterMethod: config.settings.hierCluster?.clusterMethod,
+      distanceMethod: config.settings.hierCluster?.distanceMethod,
+      clusterSamples: config.settings.hierCluster?.clusterSamples,
+      clusterRows: config.settings.hierCluster?.clusterRows,
+      zScoreTransformation: config.settings.hierCluster?.zScoreTransformation,
+      nav: appState.nav,
+      groups: rebaseGroupFilter(appState)
+    };
+  }
+  async main() {
+    try {
+      this.config = await this.getMutableConfig();
+      if (this.mayRequireToken()) return;
+      const termGroups = await getTermGroups(this.config.termgroups, this.app);
+      const prevTranspose = this.settings.transpose;
+      Object.assign(this.settings, structuredClone(this.config.settings), this.controlsRenderer.getSettings());
+      this.dom.loadingDiv.selectAll("*").remove();
+      this.dom.loadingDiv.html("").style("display", "").style("position", "relative").style("left", "45%");
+      this.dom.svg.style("opacity", 0.1).style("pointer-events", "none");
+      delete this.clickedClusterIds;
+      delete this.clickedLeftClusterIds;
+      try {
+        setComputedConfig(this.config);
+        const promises = [];
+        if (this.setHierClusterData) promises.push(this.setHierClusterData());
+        promises.push(this.setData());
+        this.dom.loadingDiv.html("Processing data ...");
+        await Promise.all(promises);
+        const warnings = this.data.warnings.join("\n");
+        this.dom.warningDiv.style("display", warnings.length ? "" : "none").html(warnings);
+        this.applyLegendValueFilter();
+        if (this.combineData) this.combineData();
+        this.app.save({ type: "plot_edit", id: this.id, config: this.config });
+      } catch (e) {
+        if (e == "no data") {
+          this.showNoMatchingDataMessage();
+          return;
+        } else if (this.app.isAbortError(e)) {
+          return;
+        } else {
+          this.dom.svg.style("display", "none");
+          throw e;
+        }
+      }
+      this.termGroups = termGroups;
+      this.dom.loadingDiv.html("Updating ...").style("display", "");
+      this.termOrder = this.getTermOrder(this.data);
+      this.sampleGroups = this.getSampleGroups(this.hierClusterSamples || this.data);
+      this.sampleOrder = this.getSampleOrder(this.data);
+      this.setLayout();
+      if (this.setHierColorScale) this.setHierColorScale(this.hierClusterData.clustering);
+      if (!this.sampleOrder?.length) {
+        this.showNoMatchingDataMessage();
+      }
+      this.controlsRenderer.main();
+      this.serieses = this.getSerieses(this.data);
+      this.dom.loadingDiv.html("Rendering ...");
+      if (this.plotDendrogramHclust) this.plotDendrogramHclust();
+      this.render();
+      this.mayDisplayCohortMessage();
+      this.dom.svg.style("display", "").style("opacity", 1).style("pointer-events", "");
+      const [xGrps, yGrps] = !this.settings.matrix.transpose ? ["sampleGrps", "termGrps"] : ["termGrps", "sampleGrps"];
+      const d = this.dimensions;
+      this.clusterRenderer.main({
+        settings: this.settings.matrix,
+        xGrps: this[xGrps],
+        yGrps: this[yGrps],
+        dimensions: d
+      });
+      this.legendRenderer(this.legendData, {
+        settings: Object.assign({}, this.settings.legend, {
+          svgw: Math.max(400, d.mainw + d.xOffset - this.settings.matrix.margin.right),
+          svgh: d.mainh + d.yOffset,
+          dimensions: d,
+          padleft: this.settings.legend.padleft
+          //+ d.xOffset
+        })
+      });
+      await this.adjustSvgDimensions(prevTranspose);
+      this.controlsRenderer.main();
+      if (this.data.removedHierClusterTerms) {
+        for (const r of this.data.removedHierClusterTerms) {
+          sayerror(this.dom.errorDiv, r.text + ": " + r.lst.join(", "));
+        }
+      }
+    } catch (e) {
+      const message = this.app.vocabApi.tokenVerificationMessage;
+      this.mayRequireToken(message);
+      if (!message) {
+        this.app.tip.hide();
+        this.dom.loadingDiv.style("display", "none");
+        throw e;
+      }
+    }
+    this.resetInteractions();
+  }
+  showNoMatchingDataMessage() {
+    this.forcedSampleCount = 0;
+    this.dom.svg.style("opacity", 1e-3).style("display", "none");
+    if (this.termOrder && this.dimensions) this.controlsRenderer.main({ sampleCount: 0 });
+    this.dom.loadingDiv.html("");
+    const div = this.dom.loadingDiv.append("div").style("display", "inline-block").style("text-align", "center").style("position", "relative").style("left", "-150px");
+    div.append("div").style("margin", "5px 10px").html("No matching cohort sample data for the current gene list.");
+    if (this.settings.matrix.showHints?.includes("genesetEdit")) {
+      const div1 = div.append("div").style("margin", "5px 10px");
+      div1.append("span").html("You may change the selected cohort,");
+      if (this.config.legendGrpFilter?.lst.length || this.config.legendValueFilter?.lst.length) {
+        const cnvBtn = this.controlsRenderer.btns.filter((d) => d.label == "CNV")?.node();
+        if (cnvBtn) {
+          div1.append("br");
+          div1.append("span").html("show hidden ");
+          div1.append("span").html("CNV").style("cursor", "pointer").style("text-decoration", "underline").on("click", () => {
+            cnvBtn.click();
+          });
+        }
+        const mutationBtn = this.controlsRenderer.btns.filter((d) => d.label == "Mutation")?.node();
+        if (cnvBtn && mutationBtn) div1.append("span").html(" or ");
+        if (mutationBtn) {
+          div1.append("span").style("cursor", "pointer").style("text-decoration", "underline").html("Mutation").on("click", () => {
+            mutationBtn.click();
+          });
+        }
+        if (cnvBtn || mutationBtn) div1.append("span").html(" data,");
+      }
+      div1.append("br");
+      div1.append("span").html("or edit the gene list from the ");
+      div1.append("span").style("cursor", "pointer").style("text-decoration", "underline").html("Gene Set Edit Group menu.").on("click", () => {
+        const GenesBtn = this.controlsRenderer.btns.filter((d) => d.label == "Genes")?.node().click();
+        const i = setInterval(() => {
+          const editBtn = this.app.tip.d.selectAll("button").filter(function() {
+            return this.innerHTML == "Edit Group";
+          }).node();
+          if (editBtn) {
+            editBtn.click();
+            clearInterval(i);
+          }
+        }, 100);
+      });
+    }
+    this.dom.svg.style("display", "none");
+  }
+  mayDisplayCohortMessage() {
+    const msg = !this.prevFilter0 || deepEqual(this.state.filter0, this.prevFilter0) ? "" : "The gene list is persisted across cohorts.";
+    if (msg) {
+      this.dom.loadingDiv.html("");
+      const div = this.dom.loadingDiv.append("div").style("display", "inline-block").style("text-align", "center").style("position", "relative").style("left", "-150px");
+      div.append("div").html(msg);
+      if (this.settings.matrix.showHints?.includes("genesetEdit")) {
+        const div1 = div.append("div");
+        div1.append("span").html(" You may edit the gene list from the ");
+        div1.append("span").style("cursor", "pointer").style("text-decoration", "underline").html("Gene Set Edit Group menu.").on("click", () => {
+          const GenesBtn = this.controlsRenderer.btns.filter((d) => d.label == "Genes")?.node().click();
+          const i = setInterval(() => {
+            const editBtn = this.app.tip.d.selectAll("button").filter(function() {
+              return this.innerHTML == "Edit Group";
+            }).node();
+            if (editBtn) {
+              editBtn.click();
+              clearInterval(i);
+            }
+          }, 100);
+        });
+      }
+    }
+    this.dom.loadingDiv.style("display", msg ? "" : "none");
+  }
+  sampleKey(s) {
+    return s.row.sample;
+  }
+  sampleLabel(s) {
+    return s.label || s.row._ref_.label || "";
+  }
+  sampleGrpKey(s) {
+    return s.grp.name;
+  }
+  sampleGrpLabel(s) {
+    return s.grp.label || s.grp.name || "";
+  }
+  termKey(t) {
+    return t.tw.$id;
+  }
+  termLabel(t) {
+    return t.label;
+  }
+  termGrpKey(t) {
+    return t.grp.name;
+  }
+  termGrpLabel(t) {
+    return t.grp.label || t.grp.name || [{ text: "\u22EE", dx: 3, cls: "sjpp-exclude-svg-download" }];
+  }
+  destroy() {
+    select_default(window).on(`resize.sjpp-${self.id}`, null);
+  }
+};
+for (const m of [matrix_data_exports, matrix_groups_exports, matrix_layout_exports, matrix_serieses_exports, matrix_legend_exports]) {
+  for (const methodName in m) {
+    Matrix.prototype[methodName] = m[methodName];
+  }
+}
+var matrixInit = getCompInit(Matrix);
+var componentInit = matrixInit;
+function makeChartBtnMenu(holder, chartsInstance) {
+  chartsInstance.dom.tip.clear();
+  const menuDiv = holder.append("div");
+  if (chartsInstance.state.termdbConfig.matrixplots) {
+    for (const plot of chartsInstance.state.termdbConfig.matrixplots) {
+      menuDiv.append("button").style("margin", "10px").style("padding", "10px 15px").style("border-radius", "20px").style("border-color", "#ededed").style("display", "inline-block").text(plot.name).on("click", async () => {
+        chartsInstance.dom.tip.hide();
+        const config = await chartsInstance.app.vocabApi.getMatrixByName(plot.name);
+        config.preBuiltPlotTitle = plot.name;
+        chartsInstance.app.dispatch({
+          type: "plot_create",
+          config
+        });
+      });
+    }
+  }
+  const chart = {
+    clickTo: chartsInstance.showTree_selectlst,
+    chartType: "matrix",
+    usecase: { target: "matrix", detail: "termgroups" },
+    processSelection: (lst) => {
+      return [
+        {
+          name: "",
+          lst: lst.map((term) => {
+            return { term };
+          })
+        }
+      ];
+    }
+  };
+  chartsInstance.showTree_selectlst(chart);
+}
+
+export {
+  Matrix,
+  matrixInit,
+  componentInit,
+  makeChartBtnMenu
+};
+//# sourceMappingURL=chunk-IBTPGSYI.js.map