@sjcrh/proteinpaint-client 2.208.0 → 2.209.0

package/dist/NumericHandler-42RR54X3.js

@@ -0,0 +1,34 @@
+import {
+  NumericHandler
+} from "./chunk-D5ETVOOE.js";
+import "./chunk-F4DM3WS4.js";
+import "./chunk-C3HEDQPT.js";
+import "./chunk-HJ6L54YS.js";
+import "./chunk-KV4W2ACA.js";
+import "./chunk-B6UXFX73.js";
+import "./chunk-ELJX3QIQ.js";
+import "./chunk-3FEP6B5T.js";
+import "./chunk-EEB5VE2A.js";
+import "./chunk-6RRZRISL.js";
+import "./chunk-2KM4PRQM.js";
+import "./chunk-OBDIJ4QS.js";
+import "./chunk-6FG6JFZP.js";
+import "./chunk-3XBG5HIV.js";
+import "./chunk-SB36AUG7.js";
+import "./chunk-WINIL2KN.js";
+import "./chunk-PF4DSFDR.js";
+import "./chunk-7X6NF7NI.js";
+import "./chunk-W5J3LTYS.js";
+import "./chunk-Z2ZITHT4.js";
+import "./chunk-4OLM3KSB.js";
+import "./chunk-FXQXCOII.js";
+import "./chunk-TLT4YIG3.js";
+import "./chunk-5R63Q5KH.js";
+import "./chunk-I6Y4O3RR.js";
+import "./chunk-Q5RDQNIT.js";
+import "./chunk-DQC5FFGV.js";
+import "./chunk-HS5PO5ZQ.js";
+export {
+  NumericHandler
+};
+//# sourceMappingURL=NumericHandler-42RR54X3.js.map

package/dist/NumericHandler.unit.spec-YYOO7XVT.js

@@ -0,0 +1,214 @@
+import {
+  agedx
+} from "./chunk-32AI7I4C.js";
+import {
+  NumericHandler
+} from "./chunk-D5ETVOOE.js";
+import "./chunk-F4DM3WS4.js";
+import {
+  termjson
+} from "./chunk-FQYXNCZI.js";
+import {
+  sleep
+} from "./chunk-FYXIK6Y6.js";
+import {
+  require_tape
+} from "./chunk-PJYCTAMC.js";
+import {
+  TwRouter
+} from "./chunk-C3HEDQPT.js";
+import "./chunk-HJ6L54YS.js";
+import "./chunk-KV4W2ACA.js";
+import "./chunk-B6UXFX73.js";
+import "./chunk-ELJX3QIQ.js";
+import "./chunk-3FEP6B5T.js";
+import "./chunk-EEB5VE2A.js";
+import "./chunk-6RRZRISL.js";
+import "./chunk-2KM4PRQM.js";
+import "./chunk-OBDIJ4QS.js";
+import "./chunk-6FG6JFZP.js";
+import "./chunk-3XBG5HIV.js";
+import "./chunk-SB36AUG7.js";
+import "./chunk-WINIL2KN.js";
+import "./chunk-PF4DSFDR.js";
+import "./chunk-7X6NF7NI.js";
+import "./chunk-W5J3LTYS.js";
+import "./chunk-Z2ZITHT4.js";
+import "./chunk-4OLM3KSB.js";
+import "./chunk-FXQXCOII.js";
+import "./chunk-TLT4YIG3.js";
+import "./chunk-5R63Q5KH.js";
+import {
+  select_default
+} from "./chunk-I6Y4O3RR.js";
+import "./chunk-Q5RDQNIT.js";
+import "./chunk-DQC5FFGV.js";
+import {
+  __toESM
+} from "./chunk-HS5PO5ZQ.js";
+
+// termsetting/handlers/test/NumericHandler.unit.spec.ts
+var import_tape = __toESM(require_tape(), 1);
+async function getNumericHandler(_opts = {}) {
+  const term = JSON.parse(JSON.stringify(termjson.agedx));
+  if (term.bins.default.type == "regular-bin") term.bins.default.bin_size = 500;
+  const rawTw = {
+    term,
+    q: {
+      mode: "discrete",
+      //type: 'regular-bin',
+      ...term.bins.default
+    }
+  };
+  const tw = await TwRouter.initRaw(rawTw);
+  const handler = new NumericHandler({
+    termsetting: {
+      tw,
+      term: rawTw.term,
+      q: rawTw.q,
+      opts: {
+        numericEditMenuVersion: ["continuous", "discrete", "binary", "spline"],
+        // _opts will any matching override previous opts key-values
+        ..._opts
+      },
+      api: {
+        async runCallback() {
+          const self = handler.termsetting;
+          const q = handler.editHandler.q;
+          self.tw = await TwRouter.initRaw({ term: self.term, q }, self.opts);
+        }
+      },
+      dom: {
+        tip: {
+          hide() {
+          }
+        }
+      },
+      vocabApi: {
+        getViolinBox() {
+          return agedx;
+        },
+        getPercentile() {
+          return {
+            values: [0.03537315665, 3.13072460515, 8.164619357749999, 17.8726813385]
+          };
+        }
+      }
+    }
+  });
+  const holder = select_default("body").append("div").style("width", "fit-content").style("margin", "20px").style("padding", "5px").style("border", "1px solid #000");
+  return {
+    rawTw,
+    tw,
+    handler,
+    holder,
+    destroy: () => {
+      if (handler.editHandler && "destroy" in handler.editHandler) handler.editHandler.destroy();
+      if (typeof handler.destroy == "function") handler.destroy();
+      holder.remove();
+    }
+  };
+}
+(0, import_tape.default)("\n", (test) => {
+  test.comment("-***- NumericHandler.unit.spec -***-");
+  test.end();
+});
+(0, import_tape.default)("tabs data and pill status", async (test) => {
+  const { handler, destroy } = await getNumericHandler();
+  test.deepEqual(
+    handler.tabs.map((t) => t.label),
+    ["Continuous", "Discrete", "Cubic spline", "Binary"],
+    "sets the expected tab data"
+  );
+  test.deepEqual(handler.getPillStatus(), { text: "bin size=500" }, `should give the expected pill status`);
+  if (test._ok) destroy();
+  test.end();
+});
+(0, import_tape.default)("editHandler", async (test) => {
+  const { handler, destroy } = await getNumericHandler();
+  handler.density_data = { min: 0, max: 100 };
+  await handler.setEditHandler(handler.tabs[0]);
+  test.equal(
+    handler.editHandler.constructor.name,
+    "NumContEditor",
+    `sets the expected editHandler for mode='continuous'`
+  );
+  await handler.setEditHandler(handler.tabs[1]);
+  test.equal(
+    handler.editHandler.constructor.name,
+    "NumDiscreteEditor",
+    `sets the expected editHandler for mode='discrete'`
+  );
+  await handler.setEditHandler(handler.tabs[2]);
+  test.equal(handler.editHandler.constructor.name, "NumSplineEditor", `sets the expected editHandler for mode='binary'`);
+  await handler.setEditHandler(handler.tabs[3]);
+  test.equal(handler.editHandler.constructor.name, "NumBinaryEditor", `sets the expected editHandler for mode='spline'`);
+  if (test._ok) destroy();
+  test.end();
+});
+(0, import_tape.default)("showEditMenu, multiple modes", async (test) => {
+  const { handler, holder, destroy } = await getNumericHandler();
+  await handler.showEditMenu(holder);
+  await sleep(0);
+  test.equal(handler.editHandler.dom.density_div.selectAll("svg").size(), 1, `should render a density plot svg`);
+  test.equal(
+    handler.dom.topBar?.selectAll(".sj-toggle-button").size(),
+    4,
+    `should render 4 tabs, one toggle button for each mode`
+  );
+  test.equal(handler.dom.btnDiv?.selectAll("button").size(), 2, `should render an apply and reset button`);
+  test.deepEqual(handler.getPillStatus(), { text: "bin size=500" }, "should have the expected initial pill status");
+  const tabBtns = handler.dom.topBar.node().querySelectorAll("button");
+  tabBtns[2].click();
+  await sleep(10);
+  handler.dom.btnDiv.select("button").node().click();
+  await sleep(10);
+  test.deepEqual(
+    handler.getPillStatus(),
+    { text: "cubic spline" },
+    "should have a different pill status after switching q.modes"
+  );
+  if (test._ok) destroy();
+  test.end();
+});
+(0, import_tape.default)("showEditMenu, single mode", async (test) => {
+  const { handler, holder, destroy } = await getNumericHandler({ numericEditMenuVersion: ["binary"] });
+  await handler.showEditMenu(holder);
+  await sleep(0);
+  test.equal(handler.editHandler.dom.density_div.selectAll("svg").size(), 1, `should render a density plot svg`);
+  test.equal(
+    handler.dom.topBar?.selectAll(".sj-toggle-button").size(),
+    void 0,
+    `should not render mode toggle buttons`
+  );
+  test.equal(handler.dom.btnDiv?.selectAll("button").size(), 2, `should render an apply and reset button`);
+  if (test._ok) destroy();
+  test.end();
+});
+(0, import_tape.default)("apply and reset", async (test) => {
+  test.timeoutAfter(50);
+  test.plan(2);
+  const { handler, holder, destroy } = await getNumericHandler();
+  handler.editHandler = {
+    getEditedQ() {
+      test.pass("should trigger editHandler.getEditedQ() from applyEdits()");
+      return { mode: "discrete", type: "regular-bin" };
+    },
+    undoEdits() {
+      test.pass("should trigger editHandler.undoEdits() from undoEdits()");
+    }
+  };
+  try {
+    await handler.renderButtons(holder);
+    const btns = holder.node()?.querySelectorAll("button");
+    if (btns?.length) {
+      btns[0].click();
+      btns[1].click();
+    }
+    if (test._ok) destroy();
+    test.end();
+  } catch (e) {
+    test.fail("should trigger editHandler.getEditedQ and .undoEdits(): " + e);
+  }
+});
+//# sourceMappingURL=NumericHandler.unit.spec-YYOO7XVT.js.map

package/dist/ProteomeInput-4N2G6IFX.js

@@ -0,0 +1,388 @@
+import {
+  getDefaultGseaSettings
+} from "./chunk-FSLOUTTK.js";
+import {
+  PlotBase,
+  Tabs,
+  getDefaultVolcanoSettings,
+  sayerror,
+  table2col
+} from "./chunk-C3HEDQPT.js";
+import "./chunk-HJ6L54YS.js";
+import "./chunk-KV4W2ACA.js";
+import "./chunk-B6UXFX73.js";
+import {
+  Menu
+} from "./chunk-ELJX3QIQ.js";
+import "./chunk-3FEP6B5T.js";
+import "./chunk-EEB5VE2A.js";
+import "./chunk-6RRZRISL.js";
+import "./chunk-2KM4PRQM.js";
+import {
+  dofetch3
+} from "./chunk-OBDIJ4QS.js";
+import "./chunk-6FG6JFZP.js";
+import {
+  NumericModes
+} from "./chunk-3XBG5HIV.js";
+import {
+  PROTEOME_DAP,
+  TermTypeGroups
+} from "./chunk-SB36AUG7.js";
+import {
+  copyMerge,
+  getCompInit
+} from "./chunk-WINIL2KN.js";
+import "./chunk-PF4DSFDR.js";
+import "./chunk-7X6NF7NI.js";
+import "./chunk-W5J3LTYS.js";
+import "./chunk-Z2ZITHT4.js";
+import "./chunk-4OLM3KSB.js";
+import "./chunk-FXQXCOII.js";
+import "./chunk-TLT4YIG3.js";
+import "./chunk-5R63Q5KH.js";
+import "./chunk-I6Y4O3RR.js";
+import "./chunk-Q5RDQNIT.js";
+import "./chunk-DQC5FFGV.js";
+import "./chunk-HS5PO5ZQ.js";
+
+// plots/ProteomeInput.ts
+var ProteomeInput = class _ProteomeInput extends PlotBase {
+  static {
+    this.type = "ProteomeInput";
+  }
+  constructor(opts, api) {
+    super(opts, api);
+    this.type = _ProteomeInput.type;
+    this.components = {};
+  }
+  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,
+      activeCohort: appState.activeCohort,
+      termdbConfig: appState.termdbConfig
+    };
+  }
+  async init(appState) {
+    const state = this.getState(appState);
+    const proteomeDetails = state.config.proteomeDetails;
+    const { organism, assay, cohort } = proteomeDetails;
+    const organisms = state.termdbConfig?.queries?.proteome?.organisms || {};
+    const cohortConfig = organisms[organism]?.assays?.[assay]?.cohorts?.[cohort];
+    this.dom = this.initDom(proteomeDetails);
+    this.tabs = [
+      {
+        label: "Single protein",
+        isVisible: () => true,
+        callback: async (_event, tab) => {
+          await this.renderSingleProtein(tab, proteomeDetails, state.activeCohort);
+          delete tab.callback;
+        }
+      },
+      {
+        label: "Two proteins",
+        isVisible: () => true,
+        callback: async (_event, tab) => {
+          await this.renderTwoProteinSelect(tab, proteomeDetails, state.activeCohort);
+          delete tab.callback;
+        }
+      },
+      {
+        label: "Hierarchical clustering",
+        isVisible: () => true,
+        callback: async (_event, tab) => {
+          await this.renderMultiProteinSelect(tab, proteomeDetails, state.activeCohort);
+          delete tab.callback;
+        }
+      },
+      {
+        label: "DAP Volcano",
+        isVisible: () => !!cohortConfig?.DAPfile,
+        callback: async (_event, tab) => {
+          await this.renderDapVolcano(tab, proteomeDetails);
+          delete tab.callback;
+        }
+      }
+    ];
+    const chartTabs = new Tabs({
+      holder: this.dom.tabs,
+      tabs: this.tabs,
+      tabsPosition: "vertical"
+    });
+    await chartTabs.main();
+  }
+  initDom(proteomeDetails) {
+    const { organism, assay, cohort } = proteomeDetails;
+    this.opts.header.append("span").style("padding-right", "5px").text(`${organism} ${assay}: ${cohort}`);
+    this.opts.header.append("span").text("PROTEOME").style("font-size", "0.7em").style("opacity", "0.6");
+    return {
+      tabs: this.opts.holder.append("div").style("margin", "10px").attr("data-testid", "sjpp-proteome-input-tabs-wrapper")
+    };
+  }
+  getUsecase(proteomeDetails) {
+    const { organism, assay, cohort } = proteomeDetails;
+    return {
+      target: "proteomeAbundance",
+      detail: "term",
+      proteomeDetails: { organism, assay, cohort },
+      label: `Organism: ${organism}; Assay: ${assay}; Sample set: ${cohort}`
+    };
+  }
+  async renderSingleProtein(tab, proteomeDetails, activeCohort) {
+    const { organism, assay, cohort } = proteomeDetails;
+    const row = tab.contentHolder.style("padding", "15px");
+    row.append("div").style("padding", "5px").style("margin-bottom", "5px").text("Select a protein:");
+    const treeHolder = row.append("div");
+    const termdb = await import("./app-2SFDRDN2.js");
+    termdb.appInit({
+      vocabApi: this.app.vocabApi,
+      holder: treeHolder,
+      state: {
+        activeCohort,
+        nav: { header_mode: "search_only" },
+        tree: { usecase: this.getUsecase(proteomeDetails) }
+      },
+      tree: {
+        click_term: (term) => {
+          const t = structuredClone(term.term || term);
+          t.dataTypeDetails = { organism, assay, cohort };
+          const config = {
+            chartType: "summary",
+            term: { term: t, q: { mode: NumericModes.continuous } },
+            assayCohortTitle: `${organism} ${assay}: ${cohort}`,
+            proteomeDetails: { organism, assay, cohort }
+          };
+          const overlayTerm = this.getState(this.app.getState()).termdbConfig?.queries?.proteome?.organisms?.[organism]?.overlayTerm;
+          if (overlayTerm) config.term2 = { term: structuredClone(overlayTerm), q: {} };
+          this.dispatchEdits(config);
+        }
+      }
+    });
+  }
+  addProteinSearchbox(row, proteomeDetails, onSelect) {
+    const usecase = this.getUsecase(proteomeDetails);
+    const tip = new Menu({ padding: "0px" });
+    const searchbox = row.append("input").attr("type", "search").attr("placeholder", "Protein").attr("class", "sja_genesearchinput").style("width", "200px");
+    const mark = row.append("span").style("margin-left", "5px");
+    const word = row.append("span").style("margin-left", "5px").style("font-size", ".8em").style("opacity", 0.6);
+    let debounceTimer;
+    const doSearch = async () => {
+      const v = searchbox.property("value").trim();
+      if (v.length < 2) {
+        tip.hide();
+        return;
+      }
+      try {
+        const data = await this.app.vocabApi.findTerm(v, "", usecase, TermTypeGroups.PROTEOME_ABUNDANCE);
+        if (!data.lst?.length) {
+          mark.style("color", "red").html("&cross;");
+          word.text("No match");
+          tip.hide();
+        } else {
+          tip.clear().showunder(searchbox.node());
+          for (const term of data.lst) {
+            tip.d.append("div").attr("class", "sja_menuoption").style("border-radius", "0px").text(term.name).on("click", () => {
+              tip.hide();
+              searchbox.property("value", term.name);
+              mark.style("color", "green").html("&check;");
+              word.text(term.name);
+              onSelect(term);
+            });
+          }
+        }
+      } catch (e) {
+        mark.style("color", "red").html("&cross;");
+        word.text(e.message || "Error");
+      }
+    };
+    searchbox.on("keyup", async (event) => {
+      if (event.key === "Escape") {
+        tip.hide();
+        return;
+      }
+      clearTimeout(debounceTimer);
+      mark.html("");
+      word.text("");
+      debounceTimer = setTimeout(doSearch, 300);
+    });
+    return { searchbox, mark, word };
+  }
+  async renderTwoProteinSelect(tab, proteomeDetails, _activeCohort) {
+    const { organism, assay, cohort } = proteomeDetails;
+    const holder = tab.contentHolder.style("padding", "10px");
+    let selectedTerm1 = null;
+    let selectedTerm2 = null;
+    const gene1row = holder.append("div").style("padding", "5px");
+    const gene2row = holder.append("div").style("padding", "5px").style("display", "none");
+    const submitBtn = holder.append("button").attr("type", "button").attr("disabled", true);
+    gene1row.append("span").text("Select the first protein:");
+    this.addProteinSearchbox(gene1row, proteomeDetails, (term) => {
+      selectedTerm1 = term;
+      gene2row.style("display", "block");
+    });
+    gene2row.append("span").text("Select the second protein:");
+    this.addProteinSearchbox(gene2row, proteomeDetails, (term) => {
+      selectedTerm2 = term;
+      submitBtn.attr("disabled", null);
+    });
+    submitBtn.text("Submit").style("border", "none").style("border-radius", "20px").style("padding", "10px 15px").style("margin-top", "10px").on("click", async () => {
+      if (!selectedTerm1 || !selectedTerm2) {
+        sayerror(holder, "Please select two proteins.");
+        return;
+      }
+      const t1 = structuredClone(selectedTerm1);
+      const t2 = structuredClone(selectedTerm2);
+      t1.dataTypeDetails = { organism, assay, cohort };
+      t2.dataTypeDetails = { organism, assay, cohort };
+      await this.dispatchEdits({
+        chartType: "summary",
+        term: { term: t1, q: { mode: NumericModes.continuous } },
+        term2: { term: t2, q: { mode: NumericModes.continuous } },
+        assayCohortTitle: `${organism} ${assay}: ${cohort}`,
+        proteomeDetails: { organism, assay, cohort }
+      });
+    });
+  }
+  async renderMultiProteinSelect(tab, proteomeDetails, activeCohort) {
+    const { organism, assay, cohort } = proteomeDetails;
+    const holder = tab.contentHolder.style("padding", "10px");
+    const usecase = this.getUsecase(proteomeDetails);
+    const termdb = await import("./app-2SFDRDN2.js");
+    const treeHolder = holder.append("div");
+    termdb.appInit({
+      vocabApi: this.app.vocabApi,
+      holder: treeHolder,
+      state: {
+        activeCohort,
+        nav: { header_mode: "search_only" },
+        tree: { usecase }
+      },
+      tree: {
+        submit_lst: (termlst) => {
+          const twlst = termlst.map((term) => {
+            const t = structuredClone(term);
+            t.dataTypeDetails = { organism, assay, cohort };
+            return { term: t, q: { mode: NumericModes.continuous } };
+          });
+          if (twlst.length < 3) {
+            alert("At least three proteins are required for hierarchical clustering. Please select more proteins.");
+            return;
+          }
+          this.dispatchEdits({
+            chartType: "hierCluster",
+            dataType: "proteomeAbundance",
+            termgroups: [{ name: "Protein Abundance Cluster", lst: twlst, type: "hierCluster" }],
+            assayCohortTitle: `${organism} ${assay}: ${cohort}`,
+            proteomeDetails: { organism, assay, cohort }
+          });
+        }
+      }
+    });
+    const enforceMinAndLayout = () => {
+      const submitBtn = treeHolder.select("button").node();
+      if (submitBtn) {
+        const selectedCount = treeHolder.selectAll('.sja_menuoption[aria-label="Click to delete"]').size();
+        submitBtn.disabled = selectedCount < 3;
+      }
+      const node = treeHolder.node();
+      const divs = node.querySelectorAll("div");
+      for (const div of divs) {
+        if (div.style.flexWrap === "wrap" && div.style.display === "inline-block") {
+          div.style.display = "flex";
+        }
+      }
+    };
+    const observer = new MutationObserver(enforceMinAndLayout);
+    observer.observe(treeHolder.node(), {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["style"]
+    });
+  }
+  async renderDapVolcano(tab, proteomeDetails) {
+    const { organism, assay, cohort } = proteomeDetails;
+    const holder = tab.contentHolder.style("padding", "15px");
+    const countsDiv = holder.append("div");
+    countsDiv.append("span").text("Loading sample counts...");
+    try {
+      const result = await dofetch3("termdb/dapVolcano", {
+        body: {
+          genome: this.app.vocabApi.vocab.genome,
+          dslabel: this.app.vocabApi.vocab.dslabel,
+          organism,
+          assay,
+          cohort,
+          countsOnly: true
+        }
+      });
+      countsDiv.selectAll("*").remove();
+      if (result.error) throw result.error;
+      const table = table2col({ holder: countsDiv });
+      table.table.style("margin-left", "5px").style("padding", "5px 10px");
+      {
+        const [c1, c2] = table.addRow();
+        c1.html(`<span style="font-size:.8em;font-weight:bold">CONTROL</span>`);
+        c2.html(`${result.sample_size1} samples`);
+      }
+      {
+        const [c1, c2] = table.addRow();
+        c1.html(`<span style="font-size:.8em;font-weight:bold">CASE</span>`);
+        c2.html(`${result.sample_size2} samples`);
+      }
+    } catch (e) {
+      countsDiv.selectAll("*").remove();
+      countsDiv.append("span").style("color", "#999").text("Sample counts unavailable");
+      console.error(e.stack);
+    }
+    holder.append("button").text("Launch Volcano").on("click", async () => {
+      await this.dispatchEdits({
+        chartType: "differentialAnalysis",
+        childType: "volcano",
+        termType: PROTEOME_DAP,
+        headerText: `${organism} ${assay}: ${cohort}`,
+        proteomeDetails: { organism, assay, cohort },
+        settings: {
+          volcano: {
+            ...getDefaultVolcanoSettings({}, { termType: PROTEOME_DAP }),
+            pValueType: "original"
+          },
+          gsea: getDefaultGseaSettings({})
+        },
+        highlightedData: [],
+        hidePlotFilter: true
+      });
+    });
+  }
+  async dispatchEdits(config) {
+    await this.app.dispatch({
+      type: "app_refresh",
+      subactions: [
+        { type: "plot_create", config },
+        { type: "plot_delete", id: this.id }
+      ]
+    });
+  }
+  async main() {
+  }
+};
+var proteomeInputInit = getCompInit(ProteomeInput);
+var componentInit = proteomeInputInit;
+function getPlotConfig(opts) {
+  const config = {
+    chartType: "ProteomeInput",
+    hidePlotFilter: true
+  };
+  return copyMerge(config, opts);
+}
+export {
+  ProteomeInput,
+  componentInit,
+  getPlotConfig,
+  proteomeInputInit
+};
+//# sourceMappingURL=ProteomeInput-4N2G6IFX.js.map