@sjcrh/proteinpaint-client 2.217.0 → 2.218.0

package/dist/summary.integration.spec-FILIPD3W.js

@@ -0,0 +1,405 @@
+import {
+  getRunPp
+} from "./chunk-5O4GAKJT.js";
+import {
+  detectOne,
+  detectStyle
+} from "./chunk-WA3C3A2M.js";
+import {
+  require_tape
+} from "./chunk-PJYCTAMC.js";
+import "./chunk-L7LRBRUN.js";
+import "./chunk-2GQSPQ3U.js";
+import "./chunk-WNUCR3UF.js";
+import "./chunk-ILPJAASI.js";
+import "./chunk-PRZWSBMA.js";
+import "./chunk-43WVK5KI.js";
+import "./chunk-MKAF2BHB.js";
+import "./chunk-TUPJEZSL.js";
+import "./chunk-4FTH4L3A.js";
+import "./chunk-VGUO2BQ7.js";
+import "./chunk-YS7Y257H.js";
+import "./chunk-HJ6L54YS.js";
+import "./chunk-PITPUAWX.js";
+import "./chunk-CNFTQSNE.js";
+import "./chunk-K6CZAEBF.js";
+import "./chunk-EEB5VE2A.js";
+import "./chunk-3CIL7KH7.js";
+import "./chunk-T4XPCSLP.js";
+import "./chunk-XJYVMXMZ.js";
+import "./chunk-W5J3LTYS.js";
+import "./chunk-ZSNZPH6G.js";
+import "./chunk-ET2KFCXK.js";
+import "./chunk-LMG7Y5IN.js";
+import "./chunk-HBNB5TRH.js";
+import "./chunk-PF4DSFDR.js";
+import "./chunk-4OLM3KSB.js";
+import "./chunk-6XKAOSQE.js";
+import "./chunk-TLT4YIG3.js";
+import "./chunk-5R63Q5KH.js";
+import "./chunk-I6Y4O3RR.js";
+import "./chunk-Q5RDQNIT.js";
+import {
+  __toESM
+} from "./chunk-HS5PO5ZQ.js";
+
+// plots/test/summary.integration.spec.js
+var import_tape = __toESM(require_tape(), 1);
+var runpp = getRunPp("mass", {
+  state: {
+    nav: {
+      header_mode: "hide_search",
+      activeTab: 1
+    },
+    vocab: {
+      dslabel: "TermdbTest",
+      genome: "hg38-test"
+    }
+  },
+  debug: 1
+});
+var tabLabels2Find = ["Barchart", "Violin", "Boxplot"];
+(0, import_tape.default)("\n", function(test) {
+  test.comment("-***- plots/summary -***-");
+  test.end();
+});
+(0, import_tape.default)('Render summary plot, term: "agedx"', (test) => {
+  test.timeoutAfter(6e3);
+  runpp({
+    state: {
+      plots: [
+        {
+          chartType: "summary",
+          childType: "barchart",
+          term: {
+            id: "agedx"
+          }
+        }
+      ]
+    },
+    summary: {
+      callbacks: {
+        "postRender.test": runTests
+      }
+    }
+  });
+  async function runTests(summary) {
+    summary.on("postRender.test", null);
+    testHeader(summary, summary.Inner.dom);
+    await testToggleButtons(summary, summary.Inner.dom);
+    await testOrientation(summary);
+    if (test._ok) summary.Inner.app.destroy();
+    test.end();
+  }
+  function testHeader(summary, dom) {
+    const headerText = dom.paneTitleDiv.select("div.sjpp-term-header").node();
+    const configTerm = summary.Inner.config.term.term.name;
+    test.equal(
+      headerText.innerHTML,
+      configTerm,
+      `Header text = ${headerText.innerHTML} should match term name = ${configTerm}`
+    );
+  }
+  async function testToggleButtons(summary, dom) {
+    const toggles = dom.chartToggles.selectAll("div > div> button").nodes().filter((d) => d.__data__.isVisible() == true);
+    let foundLabels = 0;
+    const notFoundLabels = [];
+    for (const toggle of toggles) {
+      if (tabLabels2Find.some((d) => d == toggle.__data__.label)) ++foundLabels;
+      else notFoundLabels.push(toggle.__data__.label);
+    }
+    if (notFoundLabels.length) test.fail(`Should not render tab(s) = ${notFoundLabels}`);
+    test.equal(tabLabels2Find.length, foundLabels, `Should render tabs: ${tabLabels2Find}`);
+    const foundTestPlot = await detectOne({
+      elem: summary.Inner.dom.holder.body.node(),
+      selector: ".sjpp-violin-plot",
+      trigger() {
+        toggles.find((d) => d.__data__.childType == "violin").click();
+      }
+    });
+    test.ok(foundTestPlot, `Should render violin after toggle`);
+    test.equal(summary.Inner.state.config.childType, "violin", `Should toggle to childType = violin`);
+    await detectStyle({
+      elem: summary.Inner.dom.plotDivs.barchart.node(),
+      matcher(mutations) {
+        for (const m of mutations) {
+          if (m.attributeName == "style" && m.target.style.display === "") return m;
+        }
+      },
+      trigger() {
+        toggles.find((d) => d.__data__.childType == "barchart").click();
+      }
+    });
+    test.equal(summary.Inner.state.config.childType, "barchart", `Should toggle back to childType = 'barchart'`);
+  }
+  async function testOrientation(summary) {
+    await summary.Inner.app.dispatch({
+      type: "plot_edit",
+      id: summary.Inner.id,
+      config: {
+        settings: { barchart: { orientation: "vertical" } }
+      }
+    });
+    test.notEqual(
+      summary.Inner.config.settings.barchart.orientation,
+      summary.Inner.config.settings.violin.orientation,
+      `Orientation change for barchart should not affect violin`
+    );
+  }
+});
+(0, import_tape.default)('Barchart tab only, term: "diaggrp"', (test) => {
+  test.timeoutAfter(3e3);
+  const message = `Should only show barchart tab in header`;
+  runpp({
+    state: {
+      plots: [
+        {
+          chartType: "summary",
+          childType: "barchart",
+          term: {
+            id: "diaggrp"
+          }
+        }
+      ]
+    },
+    summary: {
+      callbacks: {
+        "postRender.test": runTest
+      }
+    }
+  });
+  async function runTest(summary) {
+    const toggles = summary.Inner.dom.chartToggles.selectAll("div > div> button").nodes().filter((d) => d.__data__.isVisible() == true);
+    test.ok(toggles.length == 1, `Should only render one tab`);
+    if (toggles[0].__data__.childType == "barchart") test.pass(message);
+    else test.fail(message);
+    if (test._ok) summary.Inner.app.destroy();
+    test.end();
+  }
+});
+(0, import_tape.default)('Barchart & violin toggles, term: "diaggrp", term2: "agedx"', (test) => {
+  test.timeoutAfter(3e3);
+  runpp({
+    state: {
+      plots: [
+        {
+          chartType: "summary",
+          childType: "barchart",
+          term: {
+            id: "diaggrp"
+          },
+          term2: {
+            id: "agedx"
+          }
+        }
+      ]
+    },
+    summary: {
+      callbacks: {
+        "postRender.test": runTests
+      }
+    }
+  });
+  async function runTests(summary) {
+    summary.on("postRender.test", null);
+    await detectOne({ elem: summary.Inner.dom.holder.body.node(), selector: ".pp-bars-svg" });
+    await testToggleButtons(summary, summary.Inner.dom);
+    if (test._ok) summary.Inner.app.destroy();
+    test.end();
+  }
+  async function testToggleButtons(summary, dom) {
+    const toggles = dom.chartToggles.selectAll("div > div> button").nodes().filter((d) => d.__data__.isVisible() == true);
+    toggles.find((d) => d.__data__.childType == "violin").click();
+    const foundTestPlot = await detectOne({
+      elem: dom.holder.body.node(),
+      selector: ".sjpp-violin-plot"
+    });
+    test.ok(foundTestPlot, `Should render violin after toggle`);
+    test.equal(summary.Inner.state.config.childType, "violin", `Should toggle to childType = violin`);
+    await detectStyle({
+      elem: dom.plotDivs.barchart.node(),
+      matcher(mutations) {
+        for (const m of mutations) {
+          if (m.attributeName == "style" && m.target.style.display === "") return m;
+        }
+      },
+      trigger() {
+        toggles.find((d) => d.__data__.childType == "barchart").click();
+      }
+    });
+    test.equal(summary.Inner.state.config.childType, "barchart", `Should toggle back to childType = 'barchart'`);
+  }
+});
+(0, import_tape.default)('Barchart & violin toggles, term: "agedx", term2: "diaggrp"', (test) => {
+  test.timeoutAfter(3e3);
+  runpp({
+    state: {
+      plots: [
+        {
+          chartType: "summary",
+          childType: "barchart",
+          term: {
+            id: "agedx"
+          },
+          term2: {
+            id: "diaggrp"
+          }
+        }
+      ]
+    },
+    summary: {
+      callbacks: {
+        "postRender.test": runTests
+      }
+    }
+  });
+  async function runTests(summary) {
+    summary.on("postRender.test", null);
+    const toggles = summary.Inner.dom.chartToggles.selectAll("div > div> button").nodes().filter((d) => d.__data__.isVisible() == true);
+    testToggleButtonRendering(toggles);
+    await testToggleButtons(summary, toggles);
+    if (test._ok) summary.Inner.app.destroy();
+    test.end();
+  }
+  function testToggleButtonRendering(toggles) {
+    let foundLabels = 0;
+    for (const toggle of toggles) {
+      if (tabLabels2Find.some((d) => d == toggle.__data__.label)) ++foundLabels;
+    }
+    test.equal(
+      tabLabels2Find.length,
+      toggles.length,
+      `Should render ${tabLabels2Find.length} tabs: ${tabLabels2Find} for <2 numeric terms`
+    );
+  }
+  async function testToggleButtons(summary, toggles) {
+    toggles.find((d) => d.__data__.childType == "violin").click();
+    const foundTestPlot = await detectOne({
+      elem: summary.Inner.dom.holder.body.node(),
+      selector: ".sjpp-violin-plot"
+    });
+    test.ok(foundTestPlot, `Should render violin after toggle`);
+    test.equal(summary.Inner.state.config.childType, "violin", `Should toggle to childType = violin`);
+    await detectStyle({
+      elem: summary.Inner.dom.plotDivs.barchart.node(),
+      matcher(mutations) {
+        for (const m of mutations) {
+          if (m.attributeName == "style" && m.target.style.display === "") return m;
+        }
+      },
+      trigger() {
+        toggles.find((d) => d.__data__.childType == "barchart").click();
+      }
+    });
+    test.equal(summary.Inner.state.config.childType, "barchart", `Should toggle back to childType = 'barchart'`);
+  }
+});
+(0, import_tape.default)('Barchart, violin, and scatter toggles, term: "agedx", term2: "hrtavg"', (test) => {
+  test.timeoutAfter(3e3);
+  runpp({
+    state: {
+      plots: [
+        {
+          chartType: "summary",
+          childType: "barchart",
+          term: {
+            id: "agedx"
+          },
+          term2: {
+            id: "hrtavg"
+          }
+        }
+      ]
+    },
+    summary: {
+      callbacks: {
+        "postRender.test": runTests
+      }
+    }
+  });
+  async function runTests(summary) {
+    summary.on("postRender.test", null);
+    const sandboxDom = summary.Inner.dom;
+    const toggles = sandboxDom.chartToggles.selectAll("div > div> button").nodes().filter((d) => d.__data__.isVisible() == true);
+    testToggleButtonRendering(toggles);
+    await testToggling(summary, toggles);
+    if (test._ok) summary.Inner.app.destroy();
+    test.end();
+  }
+  function testToggleButtonRendering(toggles) {
+    const tabLabels2Find2 = [...tabLabels2Find];
+    tabLabels2Find2.push("Scatter");
+    let foundLabels = 0;
+    for (const toggle of toggles) {
+      if (tabLabels2Find2.some((d) => d == toggle.__data__.label)) ++foundLabels;
+    }
+    test.equal(
+      tabLabels2Find2.length,
+      toggles.length,
+      `Should render ${tabLabels2Find2.length} tabs: ${tabLabels2Find2} for 2 numeric terms`
+    );
+  }
+  async function testToggling(summary, toggles) {
+    toggles.find((d) => d.__data__.childType == "violin").click();
+    const foundTestPlot = await detectOne({
+      elem: summary.Inner.dom.holder.body.node(),
+      selector: ".sjpp-violin-plot"
+    });
+    test.ok(foundTestPlot, `Should render violin after toggle`);
+    test.equal(summary.Inner.state.config.childType, "violin", `Should toggle to childType = violin`);
+    await detectStyle({
+      elem: summary.Inner.dom.plotDivs.barchart.node(),
+      matcher(mutations) {
+        for (const m of mutations) {
+          if (m.attributeName == "style" && m.target.style.display === "") return m;
+        }
+      },
+      trigger() {
+        toggles.find((d) => d.__data__.childType == "barchart").click();
+      }
+    });
+    test.equal(summary.Inner.state.config.childType, "barchart", `Should toggle back to childType = 'barchart'`);
+  }
+});
+(0, import_tape.default)('Overlay continuity, term: "aaclassic_5", term2: "sex"', (test) => {
+  test.timeoutAfter(3e3);
+  const testTerm = "sex";
+  runpp({
+    state: {
+      plots: [
+        {
+          chartType: "summary",
+          childType: "barchart",
+          term: {
+            id: "aaclassic_5"
+          },
+          term2: {
+            id: testTerm
+          }
+        }
+      ]
+    },
+    summary: {
+      callbacks: {
+        "postRender.test": runTests
+      }
+    }
+  });
+  async function runTests(summary) {
+    summary.on("postRender.test", null);
+    await testOverlay(summary);
+    if (test._ok) summary.Inner.app.destroy();
+    test.end();
+  }
+  async function testOverlay(summary) {
+    const plots = summary.Inner.components.plots;
+    summary.Inner.dom.chartToggles.selectAll("div > div> button").nodes().find((d) => d.__data__.childType == "violin").click();
+    await detectOne({ elem: summary.Inner.dom.holder.body.node(), selector: ".sjpp-violin-plot" });
+    test.equal(
+      plots.violin.Inner.config.term2.term.id,
+      testTerm,
+      `Overlay term = ${testTerm} carried over to violin plot`
+    );
+  }
+});
+//# sourceMappingURL=summary.integration.spec-FILIPD3W.js.map

package/dist/summaryInput-RMY226Y3.js

@@ -0,0 +1,238 @@
+import {
+  PlotBase,
+  controlsInit,
+  defaultUiLabels,
+  fillTermWrapper,
+  getT0T2defaultQ
+} from "./chunk-YS7Y257H.js";
+import "./chunk-HJ6L54YS.js";
+import "./chunk-PITPUAWX.js";
+import "./chunk-CNFTQSNE.js";
+import "./chunk-K6CZAEBF.js";
+import "./chunk-EEB5VE2A.js";
+import "./chunk-3CIL7KH7.js";
+import "./chunk-T4XPCSLP.js";
+import "./chunk-XJYVMXMZ.js";
+import "./chunk-W5J3LTYS.js";
+import "./chunk-ZSNZPH6G.js";
+import "./chunk-ET2KFCXK.js";
+import "./chunk-LMG7Y5IN.js";
+import {
+  copyMerge,
+  getCompInit
+} from "./chunk-HBNB5TRH.js";
+import "./chunk-PF4DSFDR.js";
+import "./chunk-4OLM3KSB.js";
+import "./chunk-6XKAOSQE.js";
+import "./chunk-TLT4YIG3.js";
+import "./chunk-5R63Q5KH.js";
+import "./chunk-I6Y4O3RR.js";
+import "./chunk-Q5RDQNIT.js";
+import "./chunk-HS5PO5ZQ.js";
+
+// plots/summaryInput.ts
+var SummaryInputPlot = class _SummaryInputPlot extends PlotBase {
+  constructor(opts, api) {
+    super(opts, api);
+    this.components = {};
+    // expected class-specific props
+    // the *_surv keys are the overlay/divide-by held aside for a survival term1, and are
+    // filled by getPlotConfig() like the others, so they route the same way
+    this.configTermKeys = ["term", "term0", "term2", "term0_surv", "term2_surv"];
+    this.type = _SummaryInputPlot.type;
+    this.dom = {
+      header: opts.header.html("Correlation Input"),
+      holder: opts.holder,
+      controls: opts.holder.append("div"),
+      submit: opts.holder.append("div").style("position", "relative").style("margin", "10px").style("max-width", "200px")
+    };
+  }
+  static {
+    this.type = "summaryInput";
+  }
+  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,
+      // quick fix to skip history tracking as needed
+      _scope_: appState._scope_
+    };
+  }
+  async init(appState) {
+    const state = this.getState(appState);
+    this.renderSubmit();
+    await this.setControls(state.config);
+  }
+  async setControls(config) {
+    const controlLabels = config.controlLabels;
+    const inputs = [
+      {
+        type: "term",
+        configKey: "term",
+        testids: {
+          suffix: "summaryInputControlTerm"
+        },
+        usecase: { target: "summaryInput", detail: "term" },
+        label: controlLabels.term1?.label || "Primary variable",
+        processConfig: (config2) => {
+          const { term, term2, term0, term2_surv, term0_surv } = this.state.config;
+          const editedType = config2.term?.term?.type;
+          if (editedType === term?.term?.type) return;
+          if (editedType == "survival") {
+            if (term2 && term2.term?.name != term2_surv?.term?.name)
+              config2.term2 = { term: structuredClone(term2.term), q: {} };
+            if (term0 && term0.term?.name != term0_surv?.term?.name)
+              config2.term0 = { term: structuredClone(term0.term), q: {} };
+          } else {
+            if (term2_surv && term2_surv.term?.name != term2?.term?.name)
+              config2.term2 = { term: structuredClone(term2_surv.term), q: {} };
+            if (term0_surv && term0_surv.term.name != term0?.term?.name)
+              config2.term0 = { term: structuredClone(term0_surv.term), q: {} };
+          }
+          if (editedType == "multivalue" && config2.term?.term?.valueMeaning == "membership") {
+            if (term2 || config2.term2) config2.term2 = null;
+          }
+        }
+      },
+      {
+        type: "term",
+        configKey: "term2",
+        testids: {
+          suffix: "summaryInputControlTerm2"
+        },
+        usecase: { target: "summaryInput", detail: "term2" },
+        label: controlLabels.term2.label,
+        defaultQ4fillTW: getT0T2defaultQ(),
+        // hidden for survival term1 and for
+        // membership multivalue term1 (overlapping bars invalidate the barchart's
+        // association tests, so no real overlay is offered)
+        getDisplayStyle: (plot) => plot.config.term?.term.type == "survival" || plot.config.term?.term.type == "multivalue" && plot.config.term.term.valueMeaning == "membership" ? "none" : "table-row"
+      },
+      {
+        type: "term",
+        configKey: "term0",
+        testids: {
+          suffix: "summaryInputControlTerm0"
+        },
+        usecase: { target: "summaryInput", detail: "term0" },
+        label: controlLabels.term0.label,
+        defaultQ4fillTW: getT0T2defaultQ(),
+        numericEditMenuVersion: this.opts.numericEditMenuVersion || ["discrete"],
+        getDisplayStyle: (plot) => plot.config.term?.term.type == "survival" ? "none" : "table-row"
+      },
+      {
+        type: "term",
+        configKey: "term2_surv",
+        testids: {
+          suffix: "summaryInputControlTerm2surv"
+        },
+        usecase: { target: "summaryInput", detail: "term2" },
+        label: controlLabels.term2.label,
+        defaultQ4fillTW: getT0T2defaultQ(true),
+        getDisplayStyle: (plot) => plot.config.term?.term.type == "survival" ? "table-row" : "none"
+      },
+      {
+        type: "term",
+        configKey: "term0_surv",
+        testids: {
+          suffix: "summaryInputControlTerm0surv"
+        },
+        usecase: { target: "summaryInput", detail: "term0" },
+        label: controlLabels.term0.label,
+        defaultQ4fillTW: getT0T2defaultQ(true),
+        numericEditMenuVersion: this.opts.numericEditMenuVersion || ["discrete"],
+        getDisplayStyle: (plot) => plot.config.term?.term.type == "survival" ? "table-row" : "none"
+      }
+    ];
+    this.components.controls = await controlsInit({
+      app: this.app,
+      id: this.id,
+      holder: this.dom.controls.style("display", "inline-block"),
+      isOpen: true,
+      showTopBar: false,
+      inputs,
+      // may comment out loadingMasks option to be able to click the submit button and
+      // manually test submitting before a config tw is fully filled, there should only be
+      // a console warning and no displayed error messages in the app
+      loadingMasks: [this.dom.submitMask]
+    });
+  }
+  renderSubmit() {
+    this.dom.submitBtn = this.dom.submit.append("button").property("disabled", true).style("border", "none").style("border-radius", "20px").style("padding", "10px 15px").attr("data-testid", "sjpp-summaryInput-submitBtn").text("Submit").on("click", () => {
+      const { term, term2, term0, term2_surv, term0_surv, filter } = structuredClone(this.config);
+      if (!term) throw "config.term is missing";
+      const chartType = term.term.type == "survival" ? "survival" : "summary";
+      this.app.dispatch({
+        type: "app_refresh",
+        subactions: [
+          {
+            type: "plot_create",
+            config: {
+              chartType,
+              term,
+              term2: chartType == "survival" ? term2_surv : term2,
+              term0: chartType == "survival" ? term0_surv : term0,
+              filter
+            }
+          },
+          {
+            type: "plot_delete",
+            id: this.id
+          }
+        ]
+      });
+    });
+    this.dom.submitMask = this.dom.submit.append("div").style("position", "absolute").style("top", 0).style("left", 0).style("height", "100%").style("width", "100%").style("background-color", `rgba(255,255,255,0.7)`).style("display", "none");
+  }
+  async main() {
+    this.config = await this.getMutableConfig();
+    this.dom.submitBtn.property("disabled", !this.config.term).style("cursor", this.config.term ? "pointer" : "default");
+    this.dom.submitMask.style("display", "none");
+  }
+};
+var summaryInputInit = getCompInit(SummaryInputPlot);
+var componentInit = summaryInputInit;
+async function getPlotConfig(opts, app) {
+  try {
+    if (opts.term) {
+      const defaultQ = opts.term.bins || opts.term.q ? void 0 : { geneVariant: { type: "predefined-groupset" } };
+      await fillTermWrapper(opts.term, app.vocabApi, defaultQ);
+    }
+    const asBinary = opts.term?.term.type == "survival";
+    if (opts.term2) {
+      const defaultQ = opts.term2.bins || opts.term2.q ? void 0 : getT0T2defaultQ(asBinary);
+      await fillTermWrapper(opts.term2, app.vocabApi, defaultQ);
+    }
+    if (opts.term0) {
+      const defaultQ = opts.term0.bins || opts.term0.q ? void 0 : getT0T2defaultQ(asBinary);
+      await fillTermWrapper(opts.term0, app.vocabApi, defaultQ);
+    }
+    if (opts.term2_surv) {
+      const defaultQ = opts.term2_surv.bins || opts.term2_surv.q ? void 0 : getT0T2defaultQ(true);
+      await fillTermWrapper(opts.term2_surv, app.vocabApi, defaultQ);
+    }
+    if (opts.term0_surv) {
+      const defaultQ = opts.term0_surv.bins || opts.term0_surv.q ? void 0 : getT0T2defaultQ(true);
+      await fillTermWrapper(opts.term0_surv, app.vocabApi, defaultQ);
+    }
+  } catch (e) {
+    if (e.stack) console.log(e.stack);
+    throw `${e} [summaryInput getPlotConfig()]`;
+  }
+  const config = {
+    chartType: "summaryInput",
+    settings: {},
+    controlLabels: Object.assign({}, defaultUiLabels, app.vocabApi.termdbConfig.uiLabels || {})
+  };
+  return copyMerge(config, opts);
+}
+export {
+  componentInit,
+  getPlotConfig,
+  summaryInputInit
+};
+//# sourceMappingURL=summaryInput-RMY226Y3.js.map