@sjcrh/proteinpaint-client 2.181.0 → 2.183.0

package/dist/report-YRAV4MY4.js

@@ -0,0 +1,220 @@
+import {
+  PlotBase,
+  controlsInit,
+  downloadSVGsAsPdf
+} from "./chunk-OXJ2TWDO.js";
+import "./chunk-HJ6L54YS.js";
+import {
+  importPlot
+} from "./chunk-V6DLLX4N.js";
+import "./chunk-7RN3L2BX.js";
+import "./chunk-A6TQGNDQ.js";
+import "./chunk-HYZG6OPC.js";
+import "./chunk-FN5XPUPH.js";
+import "./chunk-LSEFWW72.js";
+import {
+  icons
+} from "./chunk-5EF5U7MX.js";
+import "./chunk-2K5DSRBJ.js";
+import "./chunk-UCLS2SVB.js";
+import {
+  copyMerge,
+  getCompInit
+} from "./chunk-MVTCBVSX.js";
+import "./chunk-SEQLC4AD.js";
+import "./chunk-L4QG7XZE.js";
+import "./chunk-DQC5FFGV.js";
+import "./chunk-KQMEJUWI.js";
+import "./chunk-UJU3Q7QJ.js";
+import "./chunk-WGL6FIUE.js";
+import "./chunk-6ITDJ5UR.js";
+import "./chunk-XYFDBYOY.js";
+import "./chunk-TV74I3Y5.js";
+import "./chunk-IH7ILDJS.js";
+import "./chunk-LOZEKOES.js";
+import "./chunk-TOU7EVFQ.js";
+import "./chunk-OAWQ6LOO.js";
+import "./chunk-SEEYV6P2.js";
+import "./chunk-NDWTN4U5.js";
+import "./chunk-OMR2DT66.js";
+import "./chunk-HFNDKYVF.js";
+
+// plots/report/view/reportView.ts
+var ReportView = class {
+  constructor(report) {
+    this.opts = report.opts;
+    this.report = report;
+    const leftDiv = this.opts.holder.insert("div").style("display", "inline-block");
+    const controlsHolder = leftDiv.insert("div").style("display", "inline-block");
+    const mainDiv = this.opts.holder.insert("div").style("display", "inline-block").style("vertical-align", "top").style("padding", "20px");
+    const headerDiv = mainDiv.append("div").style("padding", "10px");
+    const downloadDiv = headerDiv.append("div").style("display", "inline-block").style("padding-left", "10px").style("vertical-align", "middle");
+    icons["pdf"](downloadDiv, {
+      handler: () => this.report.downloadReport(),
+      title: "Download the report",
+      width: 20,
+      height: 20
+    });
+    const plotsDiv = mainDiv.append("div");
+    this.dom = {
+      headerDiv,
+      plotsDiv,
+      header: this.opts.header,
+      //holder,
+      controlsHolder
+    };
+    if (this.dom.header) {
+      this.dom.header.html(this.report.config.name || "Summary Report");
+    }
+  }
+  getControlInputs() {
+    const inputs = [];
+    return inputs;
+  }
+};
+
+// plots/report/report.ts
+var Report = class _Report extends PlotBase {
+  constructor(opts, api) {
+    super(opts, api);
+    this.components = {};
+    this.type = _Report.type;
+  }
+  static {
+    this.type = "report";
+  }
+  async init(appState) {
+    this.config = appState.plots.find((p) => p.id === this.id);
+    this.view = new ReportView(this);
+    this.components = { plots: {} };
+    const state = this.getState(appState);
+    for (const section of state.config.sections) {
+      const div = this.view.dom.plotsDiv.append("div");
+      const headerIcon = div.append("span").style("margin-right", "10px").style("cursor", "pointer").text("\u25BC");
+      div.append("div").style("display", "inline-block").style("font-size", "1.2em").style("margin", "10px 0px").style("font-weight", "bold").text(section.name);
+      const sectionDiv = div.append("div").style("margin", "10px").style("display", "flex").style("flex-direction", "row").style("flex-wrap", "wrap").style("width", "100vw");
+      headerIcon.on("click", () => {
+        const display = sectionDiv.style("display");
+        headerIcon.text(display === "none" ? "\u25BC" : "\u25B2");
+        sectionDiv.style("display", display === "none" ? "flex" : "none");
+      });
+      for (const plot of section.plots) {
+        if (this.components.plots[plot.id]) continue;
+        await this.setPlot(plot, sectionDiv);
+      }
+    }
+  }
+  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 {
+      config,
+      plots: appState.plots.filter((p) => p.parentId === this.id),
+      //this property is needed to indicate that child plots need to be added to the appState plots
+      termfilter: appState.termfilter,
+      vocab: appState.vocab,
+      termdbConfig: appState.termdbConfig
+    };
+  }
+  async main() {
+    this.config = structuredClone(this.state.config);
+    this.settings = this.config.settings.report;
+  }
+  async setPlot(plot, sectionDiv) {
+    const plotDiv = sectionDiv.append("div").style("display", "inline-block").style("margin", "10px");
+    const headerDiv = plotDiv.append("div");
+    const headerIcon = headerDiv.append("span").style("margin", "10px").style("cursor", "pointer").text("\u25BC");
+    const header = headerDiv.append("div").style("display", "inline-block").style("font-size", "1.1em").style("margin-top", "10px");
+    headerIcon.on("click", () => {
+      const display = holder.style("display");
+      headerIcon.text(display === "none" ? "\u25BC" : "\u25B2");
+      holder.style("display", display === "none" ? "block" : "none");
+    });
+    const holder = plotDiv.append("div");
+    const opts = structuredClone(plot);
+    opts.header = header;
+    opts.holder = holder;
+    opts.app = this.app;
+    opts.parentId = this.id;
+    const { componentInit: componentInit2 } = await importPlot(opts.chartType);
+    this.components.plots[opts.id] = await componentInit2(opts);
+  }
+  async setControls() {
+    this.view.dom.controlsHolder.selectAll("*").remove();
+    const inputs = this.view.getControlInputs();
+    this.components = {
+      controls: await controlsInit({
+        app: this.app,
+        id: this.id,
+        holder: this.view.dom.controlsHolder,
+        inputs
+      })
+    };
+  }
+  getChartImages() {
+    const chartImagesAll = [];
+    for (const section of this.config.sections) {
+      for (const plotConfig of section.plots) {
+        const plot = this.components.plots[plotConfig.id];
+        if (plot?.getChartImages) {
+          const chartImages = plot.getChartImages();
+          for (const chartImage of chartImages) {
+            if (chartImage.name.trim()) chartImage.name = `${section.name} / ${chartImage.name}`;
+            else chartImage.name = section.name;
+            chartImagesAll.push(chartImage);
+          }
+        }
+      }
+    }
+    return chartImagesAll;
+  }
+  async downloadReport() {
+    const chartImagesAll = this.getChartImages();
+    const globalFilterImg = await this.app.getComponents("nav.filter").getFilterImage();
+    const filterImg = await this.opts.getFilterImage();
+    const filterImgs = [];
+    if (globalFilterImg) filterImgs.push(globalFilterImg);
+    if (filterImg) filterImgs.push(filterImg);
+    downloadSVGsAsPdf(chartImagesAll, "report", "landscape", filterImgs);
+  }
+};
+async function getPlotConfig(opts, app) {
+  const settings = getDefaultReportSettings();
+  const plot = {
+    settings: {
+      controls: {
+        isOpen: false
+        // control panel is hidden by default
+      },
+      report: settings,
+      startColor: {},
+      //dict to store the start color of the gradient for each chart when using continuous color
+      stopColor: {}
+      //dict to store the stop color of the gradient for each chart when using continuous color
+    }
+  };
+  try {
+    const config = app.vocabApi?.termdbConfig?.plotConfigByCohort?.default?.report;
+    opts.filter = app.vocabApi?.termdbConfig?.authFilter;
+    copyMerge(plot, config, opts);
+    return plot;
+  } catch (e) {
+    console.log(e);
+    throw `${e} [sampleScatter getPlotConfig()]`;
+  }
+}
+var reportInit = getCompInit(Report);
+var componentInit = reportInit;
+function getDefaultReportSettings() {
+  return {};
+}
+export {
+  Report,
+  componentInit,
+  getDefaultReportSettings,
+  getPlotConfig,
+  reportInit
+};
+//# sourceMappingURL=report-YRAV4MY4.js.map

package/dist/sampleScatter.spec-MBJ4XNTX.js

@@ -0,0 +1,200 @@
+import {
+  getRunPp
+} from "./chunk-E4NVHKWD.js";
+import {
+  require_tape
+} from "./chunk-QWOE5YTB.js";
+import "./chunk-I4IKRKYJ.js";
+import "./chunk-4RR4KPRJ.js";
+import "./chunk-V245THQC.js";
+import "./chunk-DGMK7SXX.js";
+import "./chunk-PRZWSBMA.js";
+import "./chunk-YY4CKQJ6.js";
+import "./chunk-MKAF2BHB.js";
+import "./chunk-OSM7YS23.js";
+import "./chunk-S5ZI6N2I.js";
+import "./chunk-AQ4OP4GR.js";
+import "./chunk-OXJ2TWDO.js";
+import "./chunk-HJ6L54YS.js";
+import "./chunk-V6DLLX4N.js";
+import "./chunk-7RN3L2BX.js";
+import "./chunk-A6TQGNDQ.js";
+import "./chunk-HYZG6OPC.js";
+import "./chunk-FN5XPUPH.js";
+import "./chunk-LSEFWW72.js";
+import "./chunk-5EF5U7MX.js";
+import "./chunk-2K5DSRBJ.js";
+import "./chunk-UCLS2SVB.js";
+import "./chunk-MVTCBVSX.js";
+import "./chunk-SEQLC4AD.js";
+import "./chunk-L4QG7XZE.js";
+import "./chunk-DQC5FFGV.js";
+import "./chunk-KQMEJUWI.js";
+import "./chunk-UJU3Q7QJ.js";
+import "./chunk-WGL6FIUE.js";
+import "./chunk-6ITDJ5UR.js";
+import "./chunk-XYFDBYOY.js";
+import "./chunk-TV74I3Y5.js";
+import "./chunk-IH7ILDJS.js";
+import "./chunk-LOZEKOES.js";
+import "./chunk-TOU7EVFQ.js";
+import "./chunk-OAWQ6LOO.js";
+import "./chunk-SEEYV6P2.js";
+import {
+  selectAll_default
+} from "./chunk-NDWTN4U5.js";
+import "./chunk-OMR2DT66.js";
+import {
+  __toESM
+} from "./chunk-HFNDKYVF.js";
+
+// plots/test/sampleScatter.spec.js
+var import_tape = __toESM(require_tape(), 1);
+var runpp = getRunPp("mass", {
+  state: {
+    vocab: {
+      dslabel: "PNET",
+      genome: "hg19"
+    }
+  },
+  debug: 1
+});
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+var state = {
+  plots: [
+    {
+      chartType: "sampleScatter",
+      colorTW: { id: "TSNE Category" },
+      name: "Methylome TSNE"
+    }
+  ]
+};
+var open_state = {
+  nav: { header_mode: "hide_search" },
+  plots: [
+    {
+      chartType: "sampleScatter",
+      colorTW: { id: "TSNE Category" },
+      name: "Methylome TSNE"
+    }
+  ]
+};
+(0, import_tape.default)("\n", function(test) {
+  test.comment("-***- mass/sampleScatter -***-");
+  test.end();
+});
+(0, import_tape.default)("PNET plot + filter + colorTW=gene", function(test) {
+  test.timeoutAfter(3e3);
+  test.plan(1);
+  const s2 = JSON.parse(JSON.stringify(state));
+  s2.termfilter = {
+    filter: {
+      type: "tvslst",
+      join: "",
+      in: true,
+      lst: [{ type: "tvs", tvs: { term: { id: "Gender" }, values: [{ key: "M", label: "Male" }] } }]
+    }
+  };
+  s2.plots[0].colorTW = { term: { type: "geneVariant", name: "TP53", gene: "TP53" } };
+  runpp({
+    state: s2,
+    sampleScatter: {
+      callbacks: {
+        "postRender.test": runTests
+      }
+    }
+  });
+  function runTests(scatter) {
+    testPlot();
+    if (test._ok) scatter.Inner.app.destroy();
+    test.end();
+    function testPlot() {
+      const scatterDiv = scatter.Inner.model.charts[0].chartDiv;
+      const serieG = scatterDiv.select(".sjpcb-scatter-series");
+      const numSymbols = serieG.selectAll("path").size();
+      console.log(numSymbols == scatter.Inner.model.charts[0].data.samples.length);
+      test.true(
+        numSymbols == scatter.Inner.model.charts[0].data.samples.length,
+        `Should be ${scatter.Inner.model.charts[0].data.samples.length}. Rendered ${numSymbols} symbols.`
+      );
+    }
+  }
+});
+import_tape.default.skip("Add shape, clicking term and replace by search", function(test) {
+  test.timeoutAfter(8e3);
+  runpp({
+    state: open_state,
+    sampleScatter: {
+      callbacks: {
+        "postRender.test": runTests
+      }
+    }
+  });
+  const origTerm = "TSNE Category";
+  const testTerm = "Mutational Burden";
+  async function runTests(scatter) {
+    scatter.on("postRender.test", null);
+    await sleep(500);
+    triggerAddBtn(scatter);
+    await sleep(300);
+    triggerPillChange();
+    await sleep(100);
+    testShapeRendering(scatter, testTerm);
+    await sleep(500);
+    triggerShapeReplace();
+    await sleep(300);
+    changeShapeBySearch();
+    await sleep(100);
+    testShapeRendering(scatter, origTerm);
+    if (test._ok) scatter.Inner.app.destroy();
+    test.end();
+  }
+  function triggerAddBtn(scatter) {
+    const addBtn = scatter.Inner.view.dom.controls.selectAll("div").nodes().find((c) => c.style.display == "block" && c?.childNodes[1]?.innerHTML == "+");
+    addBtn.dispatchEvent(new Event("click"));
+  }
+  function triggerPillChange() {
+    selectAll_default(".ts_pill").filter((d) => d.name == testTerm).node().click();
+  }
+  function testShapeRendering(scatter, term) {
+    const shapeLegend = scatter.Inner.model.charts[0].chartDiv.selectAll("g").nodes().find((c) => c?.childNodes[0].innerHTML == term);
+    let groups = [];
+    for (const [i, group] of shapeLegend.childNodes.entries()) {
+      if (i == 0) continue;
+      const label = group.childNodes[1].innerHTML.split(",");
+      groups.push({
+        label: label[0],
+        samples: label[1].match(/[\d\.]+/g)
+        //Maybe test all samples rendered?
+      });
+    }
+    test.ok(
+      scatter.Inner.shapeLegend.size == groups.length + 1,
+      `Legend categories (# = ${groups.length + 1}) should equal size of shapeLegend (# = ${scatter.Inner.shapeLegend.size}) `
+    );
+    compareData2DOMLegend(scatter, groups);
+  }
+  function compareData2DOMLegend(scatter, groups) {
+    for (const group of groups) {
+      const mapLeg = scatter.Inner.shapeLegend.get(group.label);
+      test.ok(
+        mapLeg.sampleCount == group.samples[0],
+        `Should show matching n = ${mapLeg.sampleCount} for ${group.label}. Legend: n = ${group.samples[0]}`
+      );
+    }
+  }
+  function triggerShapeReplace() {
+    selectAll_default(".ts_pill").filter((d) => d.name == testTerm).node().click();
+    selectAll_default(".sja_sharp_border").filter((d) => d.label == "Replace").node().click();
+  }
+  async function changeShapeBySearch() {
+    const termSearchDiv = selectAll_default(".tree_search").nodes().find((e) => e.placeholder.endsWith("genes"));
+    termSearchDiv.value = origTerm;
+    termSearchDiv.dispatchEvent(new Event("input"));
+    await sleep(1e3);
+    selectAll_default(".sja_tree_click_term").filter((d) => d.name == origTerm).node().click();
+  }
+});
+//# sourceMappingURL=sampleScatter.spec-MBJ4XNTX.js.map

package/dist/sampleView-IUR3ZEN7.js

@@ -0,0 +1,46 @@
+import {
+  componentInit,
+  getPlotConfig,
+  getSamplesRelated,
+  getTermValue,
+  sampleViewInit,
+  searchSampleInput
+} from "./chunk-UEMTP6ZC.js";
+import "./chunk-OXJ2TWDO.js";
+import "./chunk-HJ6L54YS.js";
+import "./chunk-V6DLLX4N.js";
+import "./chunk-7RN3L2BX.js";
+import "./chunk-A6TQGNDQ.js";
+import "./chunk-HYZG6OPC.js";
+import "./chunk-FN5XPUPH.js";
+import "./chunk-LSEFWW72.js";
+import "./chunk-5EF5U7MX.js";
+import "./chunk-2K5DSRBJ.js";
+import "./chunk-UCLS2SVB.js";
+import "./chunk-MVTCBVSX.js";
+import "./chunk-SEQLC4AD.js";
+import "./chunk-L4QG7XZE.js";
+import "./chunk-DQC5FFGV.js";
+import "./chunk-KQMEJUWI.js";
+import "./chunk-UJU3Q7QJ.js";
+import "./chunk-WGL6FIUE.js";
+import "./chunk-6ITDJ5UR.js";
+import "./chunk-XYFDBYOY.js";
+import "./chunk-TV74I3Y5.js";
+import "./chunk-IH7ILDJS.js";
+import "./chunk-LOZEKOES.js";
+import "./chunk-TOU7EVFQ.js";
+import "./chunk-OAWQ6LOO.js";
+import "./chunk-SEEYV6P2.js";
+import "./chunk-NDWTN4U5.js";
+import "./chunk-OMR2DT66.js";
+import "./chunk-HFNDKYVF.js";
+export {
+  componentInit,
+  getPlotConfig,
+  getSamplesRelated,
+  getTermValue,
+  sampleViewInit,
+  searchSampleInput
+};
+//# sourceMappingURL=sampleView-IUR3ZEN7.js.map

package/dist/samplelst-C2NBFGH6.js

@@ -0,0 +1,109 @@
+import {
+  getPillNameDefault,
+  renderTable
+} from "./chunk-OXJ2TWDO.js";
+import "./chunk-HJ6L54YS.js";
+import "./chunk-V6DLLX4N.js";
+import "./chunk-7RN3L2BX.js";
+import "./chunk-A6TQGNDQ.js";
+import "./chunk-HYZG6OPC.js";
+import "./chunk-FN5XPUPH.js";
+import "./chunk-LSEFWW72.js";
+import "./chunk-5EF5U7MX.js";
+import "./chunk-2K5DSRBJ.js";
+import "./chunk-UCLS2SVB.js";
+import "./chunk-MVTCBVSX.js";
+import "./chunk-SEQLC4AD.js";
+import "./chunk-L4QG7XZE.js";
+import "./chunk-DQC5FFGV.js";
+import "./chunk-KQMEJUWI.js";
+import "./chunk-UJU3Q7QJ.js";
+import "./chunk-WGL6FIUE.js";
+import "./chunk-6ITDJ5UR.js";
+import "./chunk-XYFDBYOY.js";
+import "./chunk-TV74I3Y5.js";
+import "./chunk-IH7ILDJS.js";
+import "./chunk-LOZEKOES.js";
+import "./chunk-TOU7EVFQ.js";
+import "./chunk-OAWQ6LOO.js";
+import "./chunk-SEEYV6P2.js";
+import "./chunk-NDWTN4U5.js";
+import "./chunk-OMR2DT66.js";
+import "./chunk-HFNDKYVF.js";
+
+// termsetting/handlers/samplelst.ts
+function getHandler(self) {
+  return {
+    showEditMenu(div) {
+      div.selectAll("*").remove();
+      const q = self.q;
+      if (self.vocabApi.termdbConfig?.displaySampleIds && self.vocabApi.hasVerifiedToken()) {
+        const groups = q.groups;
+        for (const group of groups) {
+          const groupDiv = div.append("div").style("display", "inline-block").style("vertical-align", "top");
+          const noButtonCallback = (i, node) => {
+            group.values[i].checked = node.checked;
+          };
+          const name = group.in ? group.name : `${group.name} will exclude these samples`;
+          addTable(groupDiv, name, group, noButtonCallback);
+        }
+        div.append("div").append("div").style("display", "inline-block").style("float", "right").style("padding", "6px 20px").append("button").attr("class", "sjpp_apply_btn sja_filter_tag_btn").text("Apply").on("click", () => {
+          for (const group of groups)
+            group.values = group.values.filter((value) => !("checked" in value) || value.checked);
+          self.api.runCallback();
+        });
+      } else {
+        const e = self.vocabApi.tokenVerificationPayload;
+        const missingAccess = e?.error == "Missing access" && self.vocabApi.termdbConfig.dataDownloadCatch?.missingAccess;
+        const message = e && missingAccess?.message?.replace("MISSING-ACCESS-LINK", missingAccess?.links[e.linkKey || ""]);
+        const helpLink = self.vocabApi.termdbConfig?.dataDownloadCatch?.helpLink;
+        div.append("div").style("color", "#e44").style("padding", "10px").html(
+          message || (self.vocabApi.tokenVerificationMessage || "Requires sign-in") + (helpLink ? ` <a href='${helpLink}' target=_blank>Tutorial</a>` : "")
+        );
+      }
+    },
+    getPillStatus() {
+    },
+    getPillName(d) {
+      return getPillNameDefault(self, d);
+    }
+  };
+}
+function addTable(div, name, group, noButtonCallback) {
+  div.style("padding", "6px").append("div").style("margin", "10px").style("font-size", "0.8rem").html(`<b> ${name}</b>.`);
+  const rows = [];
+  for (const value of group.values) rows.push([{ value: value.sample }]);
+  const columns = [{ label: "Sample" }];
+  renderTable({
+    rows,
+    columns,
+    div,
+    maxWidth: "30vw",
+    maxHeight: "40vh",
+    noButtonCallback,
+    striped: false,
+    showHeader: false,
+    selectAll: true,
+    columnButtons: void 0,
+    //Leave until table.js is typed
+    buttons: void 0
+  });
+}
+function fillTW(tw) {
+  if (!tw.q.groups) tw.q.groups = [];
+  if (tw.q.groups.length == 0) {
+    for (const k in tw.term.values) {
+      const v = tw.term.values[k];
+      tw.q.groups.push({
+        name: k,
+        inuse: v.inuse,
+        values: v.list
+      });
+    }
+  }
+}
+export {
+  fillTW,
+  getHandler
+};
+//# sourceMappingURL=samplelst-C2NBFGH6.js.map