@sjcrh/proteinpaint-client 2.205.0 → 2.206.0

package/dist/hierCluster.integration.spec-CNR5OJOH.js

@@ -0,0 +1,483 @@
+import "./chunk-HS6BTSFX.js";
+import {
+  detectOne,
+  sleep
+} from "./chunk-FYXIK6Y6.js";
+import {
+  require_tape
+} from "./chunk-PJYCTAMC.js";
+import {
+  appInit
+} from "./chunk-KIRZXPMB.js";
+import "./chunk-ZWCVRVV4.js";
+import "./chunk-X46YA4CB.js";
+import "./chunk-SKMFMGCD.js";
+import "./chunk-K6PYTAXW.js";
+import "./chunk-KT4OZVO3.js";
+import "./chunk-TDM3645O.js";
+import "./chunk-RUHLDUOT.js";
+import "./chunk-PRZWSBMA.js";
+import "./chunk-RNWHB5DI.js";
+import "./chunk-MKAF2BHB.js";
+import "./chunk-NBX6TT5C.js";
+import "./chunk-4FTH4L3A.js";
+import "./chunk-X63NSV33.js";
+import {
+  fillTermWrapper
+} from "./chunk-Q5SK3U2T.js";
+import "./chunk-HJ6L54YS.js";
+import "./chunk-KV4W2ACA.js";
+import "./chunk-54KC7DAB.js";
+import "./chunk-N7DVQTPC.js";
+import "./chunk-ELJX3QIQ.js";
+import "./chunk-EEB5VE2A.js";
+import "./chunk-6RRZRISL.js";
+import "./chunk-2KM4PRQM.js";
+import "./chunk-RPDVFM7E.js";
+import "./chunk-M4XXKTH2.js";
+import "./chunk-5ILEFNXJ.js";
+import {
+  TermTypes
+} from "./chunk-IZUYLFOX.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";
+
+// plots/matrix/test/hierCluster.integration.spec.js
+var import_tape = __toESM(require_tape(), 1);
+(0, import_tape.default)("\n", function(test) {
+  test.comment("-***- plots/hierCluster.js -***-");
+  test.end();
+});
+(0, import_tape.default)("basic render", async (test) => {
+  test.timeoutAfter(4e3);
+  const { app, hc } = await getHierClusterApp({ terms: getGenes() });
+  test.equal(hc.dom.termLabelG.selectAll(".sjpp-matrix-label").size(), 4, "should render 4 gene rows");
+  test.equal(hc.dom.sampleLabelG.selectAll(".sjpp-matrix-label").size(), 60, "should render 60 sample columns");
+  if (test._ok) app.destroy();
+  test.end();
+});
+(0, import_tape.default)("filter", async (test) => {
+  test.timeoutAfter(4e3);
+  const { app, hc } = await getHierClusterApp({
+    terms: getGenes(),
+    filter: {
+      type: "tvslst",
+      join: "",
+      in: true,
+      lst: [{ type: "tvs", tvs: { term: { id: "diaggrp" }, values: [{ key: "Acute lymphoblastic leukemia" }] } }]
+    }
+  });
+  test.equal(hc.dom.sampleLabelG.selectAll(".sjpp-matrix-label").size(), 36, "should render 36 sample columns");
+  if (test._ok) app.destroy();
+  test.end();
+});
+(0, import_tape.default)("avoid race condition - specified gene list", async (test) => {
+  test.timeoutAfter(4e3);
+  test.plan(4);
+  const { app, hc } = await getHierClusterApp({ terms: getGenes() });
+  const termgroups = structuredClone(hc.config.termgroups);
+  const lst = await Promise.all([
+    fillTermWrapper({ term: { gene: "KRAS", name: "KRAS", type: "geneExpression" } }, app.vocabApi),
+    fillTermWrapper({ term: { gene: "AKT1", name: "AKT1", type: "geneExpression" } }, app.vocabApi),
+    fillTermWrapper({ term: { gene: "TP53", name: "TP53", type: "geneExpression" } }, app.vocabApi),
+    fillTermWrapper({ term: { gene: "BCR", name: "BCR", type: "geneExpression" } }, app.vocabApi)
+  ]);
+  termgroups[0].lst = lst;
+  const responseDelay = 250;
+  hc.origRequestData = hc.requestData;
+  hc.requestData = async () => {
+    const lst2 = hc.config.termgroups[0].lst;
+    const data = await hc.origRequestData({});
+    if (lst2.length === 3) return data;
+    await sleep(250);
+    return data;
+  };
+  const prom = {};
+  const postRenderTest = new Promise((resolve) => {
+    prom.resolve = resolve;
+  });
+  app.on("postRender.test1", () => {
+    app.on("postRender.test1", null);
+    prom.resolve();
+  });
+  await Promise.all([
+    app.dispatch({
+      type: "plot_edit",
+      id: hc.id,
+      config: { termgroups }
+    }),
+    (async () => {
+      await sleep(0);
+      const termgroups2 = structuredClone(hc.config.termgroups);
+      termgroups2[0].lst = lst.slice(0, 3);
+      await app.dispatch({
+        type: "plot_edit",
+        id: hc.id,
+        config: { termgroups: termgroups2 }
+      });
+    })()
+  ]);
+  await postRenderTest;
+  await sleep(responseDelay + 500);
+  test.equal(hc.dom.termLabelG.selectAll(".sjpp-matrix-label").size(), 3, "should render 3 gene rows");
+  const rects = hc.dom.seriesesG.selectAll(".sjpp-mass-series-g rect");
+  const hits = rects.filter((d) => d.key !== "BCR" && d.value.class != "WT" && d.value.class != "Blank");
+  test.equal(
+    rects.size(),
+    180,
+    "should have the expected total number of matrix cell rects, inlcuding WT and not tested"
+  );
+  test.equal(hits.size(), 180, "should have the expected number of matrix cell rects with hits");
+  test.equal(
+    app.Inner.dom.holder.selectAll(".sja_errorbar").filter(function() {
+      return this.style.display != "none";
+    }).size(),
+    0,
+    "should not display errors"
+  );
+  if (test._ok) app.destroy();
+});
+(0, import_tape.default)("avoid race condition - reused fetch response cache", async (test) => {
+  test.timeoutAfter(4e3);
+  test.plan(4);
+  const { app, hc } = await getHierClusterApp({ terms: getGenes() });
+  const termgroups = structuredClone(hc.config.termgroups);
+  const responseDelay = 250;
+  hc.origRequestData = hc.requestData;
+  hc.requestData = async () => {
+    const lst = hc.config.termgroups[0].lst;
+    const data = await hc.origRequestData({});
+    if (lst.length === 3) return data;
+    return data;
+    await sleep(responseDelay);
+    return data;
+  };
+  const prom = {};
+  const postRenderTest = new Promise((resolve) => {
+    prom.resolve = resolve;
+  });
+  app.on("postRender.test1", () => {
+    app.on("postRender.test1", null);
+    prom.resolve();
+  });
+  await Promise.all([
+    app.dispatch({
+      type: "plot_edit",
+      id: hc.id,
+      config: { termgroups }
+    }),
+    (async () => {
+      await sleep(0);
+      const _termgroups = structuredClone(termgroups);
+      _termgroups[0].lst = _termgroups[0].lst.slice(0, 3);
+      await app.dispatch({
+        type: "plot_edit",
+        id: hc.id,
+        config: { termgroups: _termgroups }
+      });
+    })()
+  ]);
+  await postRenderTest;
+  await sleep(responseDelay + 500);
+  test.equal(hc.dom.termLabelG.selectAll(".sjpp-matrix-label").size(), 3, "should render 3 gene rows");
+  const rects = hc.dom.seriesesG.selectAll(".sjpp-mass-series-g rect");
+  const hits = rects.filter((d) => d.key !== "BCR" && d.value.class != "WT" && d.value.class != "Blank");
+  test.equal(
+    rects.size(),
+    180,
+    "should have the expected total number of matrix cell rects, inlcuding WT and not tested"
+  );
+  test.equal(hits.size(), 180, "should have the expected number of matrix cell rects with hits");
+  test.equal(
+    app.Inner.dom.holder.selectAll(".sja_errorbar").filter(function() {
+      return this.style.display != "none";
+    }).size(),
+    0,
+    "should not display errors"
+  );
+  if (test._ok) app.destroy();
+});
+(0, import_tape.default)("dendrogram click", async function(test) {
+  test.timeoutAfter(5e3);
+  test.plan(3);
+  let numRenders = 0;
+  const { app, hc } = await getHierClusterApp({ terms: getGenes() });
+  const img = await detectOne({ elem: hc.dom.topDendrogram.node(), selector: "image" });
+  const svgBox = hc.dom.svg.node().getBoundingClientRect();
+  const imgBox = img.getBBox();
+  img.dispatchEvent(
+    new MouseEvent("click", {
+      //'view': window,
+      bubbles: true,
+      cancelable: true,
+      clientX: svgBox.x + hc.dimensions.xOffset + imgBox.x + imgBox.width / 2,
+      clientY: svgBox.y + imgBox.y + imgBox.height / 2
+    })
+  );
+  test.deepEqual(
+    hc.clickedClusterIds,
+    [
+      46,
+      54,
+      37,
+      28,
+      27,
+      51,
+      53,
+      44,
+      49,
+      25,
+      34,
+      11,
+      20,
+      41,
+      45,
+      29,
+      33,
+      17,
+      15,
+      2,
+      38,
+      42,
+      30,
+      36,
+      22,
+      9,
+      14,
+      3,
+      4,
+      31,
+      13,
+      26,
+      1,
+      16,
+      8,
+      10,
+      5,
+      6,
+      7,
+      23,
+      47,
+      48,
+      35,
+      43,
+      21,
+      32,
+      18,
+      24,
+      56
+    ],
+    `should give the expected clickedClusterIds`
+  );
+  test.deepEqual(
+    ["Zoom in", "List 50 samples"],
+    [...hc.dom.dendroClickMenu.d.node().querySelectorAll(".sja_menuoption")].map((elem) => elem.__data__.label),
+    "should show the expected menu options on dendrogram click"
+  );
+  hc.dom.dendroClickMenu.d.node().querySelector(".sja_menuoption").parentNode.lastChild.click();
+  await sleep(5);
+  test.equal(
+    hc.dom.dendroClickMenu.d.node().querySelectorAll(".sjpp_row_wrapper").length,
+    50,
+    "should list the expected number of samples"
+  );
+  if (test._ok) {
+    hc.dom.dendroClickMenu.clear().hide();
+    app.destroy();
+  }
+});
+(0, import_tape.default)("numeric dictionary terms (float)", async function(test) {
+  const terms = [
+    {
+      id: "aaclassic_5",
+      // tw.id must be provided
+      term: { id: "aaclassic_5", name: "a1", type: "float" },
+      // requires {id,name,type}; term.name doesn't need to be real, unique name works
+      q: { mode: "continuous" }
+      // set to continuous to avoid validating tw.term.bins
+    },
+    { id: "hrtavg", term: { id: "hrtavg", name: "a2", type: "float" }, q: { mode: "continuous" } },
+    { id: "agedx", term: { id: "agedx", name: "a3", type: "float" }, q: { mode: "continuous" } }
+  ];
+  const { app, hc } = await getHierClusterApp({ terms, dataType: "float", termGroupName: "Numeric Dictionary Terms" });
+  test.equal(hc.dom.termLabelG.selectAll(".sjpp-matrix-label").size(), 3, "should render 3 rows");
+  if (test._ok) app.destroy();
+  test.end();
+});
+(0, import_tape.default)("isoform expression cluster", async function(test) {
+  test.timeoutAfter(4e3);
+  const terms = [
+    {
+      term: { isoform: "ENST00000370314", name: "ENST00000370314", type: "isoformExpression" }
+    },
+    {
+      term: { isoform: "ENST00000361510", name: "ENST00000361510", type: "isoformExpression" }
+    },
+    {
+      term: { isoform: "ENST00000229281", name: "ENST00000229281", type: "isoformExpression" }
+    }
+  ];
+  const { app, hc } = await getHierClusterApp({
+    terms,
+    dataType: "isoformExpression",
+    termGroupName: "Isoform Expression"
+  });
+  test.equal(hc.dom.termLabelG.selectAll(".sjpp-matrix-label").size(), 3, "should render 3 isoform rows");
+  if (test._ok) app.destroy();
+  test.end();
+});
+(0, import_tape.default)("ssGSEA cluster", async function(test) {
+  test.timeoutAfter(4e3);
+  const terms = [
+    { term: { id: "HALLMARK_ADIPOGENESIS", name: "HALLMARK_ADIPOGENESIS", type: "ssGSEA" } },
+    {
+      term: { id: "HALLMARK_ALLOGRAFT_REJECTION", name: "HALLMARK_ALLOGRAFT_REJECTION", type: "ssGSEA" }
+    },
+    {
+      term: { id: "HALLMARK_ANDROGEN_RESPONSE", name: "HALLMARK_ANDROGEN_RESPONSE", type: "ssGSEA" }
+    }
+  ];
+  const { app, hc } = await getHierClusterApp({
+    terms,
+    dataType: "ssGSEA",
+    termGroupName: "Gene Set Enrichment (ssGSEA)"
+  });
+  test.equal(hc.dom.termLabelG.selectAll(".sjpp-matrix-label").size(), 3, "should render 3 ssGSEA rows");
+  if (test._ok) app.destroy();
+  test.end();
+});
+(0, import_tape.default)("dnaMethylation cluster", async function(test) {
+  test.timeoutAfter(4e3);
+  const terms = [
+    {
+      term: { type: "dnaMethylation", chr: "chr17", start: 7673484, stop: 7681953, genomicFeatureType: "gene" }
+    },
+    {
+      term: { type: "dnaMethylation", chr: "chr17", start: 7663195, stop: 7671664, genomicFeatureType: "gene" }
+    },
+    {
+      term: { type: "dnaMethylation", chr: "chr17", start: 7673484, stop: 7681953, genomicFeatureType: "promoter" }
+    }
+  ];
+  const { app, hc } = await getHierClusterApp({ terms, dataType: "dnaMethylation", termGroupName: "DNA Methylation" });
+  test.equal(hc.dom.termLabelG.selectAll(".sjpp-matrix-label").size(), 3, "should render 3 methylation rows");
+  if (test._ok) app.destroy();
+  test.end();
+});
+(0, import_tape.default)("cluster rejects a non-continuous term mode", async function(test) {
+  test.timeoutAfter(4e3);
+  const terms = [
+    { term: { gene: "AKT1", name: "AKT1", type: "geneExpression" }, q: { mode: "discrete" } },
+    { term: { gene: "TP53", name: "TP53", type: "geneExpression" }, q: { mode: "continuous" } },
+    { term: { gene: "BCR", name: "BCR", type: "geneExpression" }, q: { mode: "continuous" } }
+  ];
+  const { app, hc } = await getHierClusterApp({ terms, dataType: "geneExpression" });
+  test.equal(
+    hc.dom.termLabelG.selectAll(".sjpp-matrix-label").size(),
+    0,
+    "should render no rows when a term is not in continuous mode"
+  );
+  if (test._ok) app.destroy();
+  test.end();
+});
+(0, import_tape.default)("cluster rejects incompatible numeric types", async function(test) {
+  test.timeoutAfter(4e3);
+  const terms = [
+    { term: { gene: "AKT1", name: "AKT1", type: "geneExpression" }, q: { mode: "continuous" } },
+    { term: { gene: "TP53", name: "TP53", type: "geneExpression" }, q: { mode: "continuous" } },
+    { term: { id: "agedx", name: "agedx", type: "float" }, q: { mode: "continuous" } }
+  ];
+  let rejected = false;
+  try {
+    const { app, hc } = await getHierClusterApp({ terms, dataType: "geneExpression" });
+    rejected = hc.dom.termLabelG.selectAll(".sjpp-matrix-label").size() === 0;
+    if (app) app.destroy();
+  } catch (e) {
+    rejected = true;
+  }
+  test.ok(rejected, "should reject a cluster mixing geneExpression and float terms");
+  test.end();
+});
+async function getHierClusterApp(_opts = {}) {
+  const holder = select_default("body").append("div");
+  const defaults = {
+    debug: true,
+    holder,
+    genome: "hg38-test",
+    state: {
+      genome: "hg38-test",
+      dslabel: "TermdbTest",
+      termfilter: { filter0: _opts.filter0 },
+      plots: [
+        {
+          chartType: "hierCluster",
+          dataType: _opts.dataType || TermTypes.GENE_EXPRESSION,
+          settings: {
+            hierCluster: {
+              termGroupName: _opts.termGroupName || "Gene Expression (CGC genes only)"
+            },
+            matrix: {
+              // the matrix autocomputes the colw based on available screen width,
+              // need to set an exact screen width for consistent tests using getBBox()
+              availContentWidth: 1200
+            }
+          },
+          // force empty termgroups, genes since the instance requestData() will not have expression data,
+          // and will cause a non-trival error if using the actual requestData(), which will be mocked below
+          termgroups: [],
+          // _opts.termgroups || [],
+          // !!! there will be an initial load error since this is an empty geneset,
+          // !!! but will be ignored since it's not relevant to this test
+          terms: _opts.terms || [],
+          filter: _opts.filter
+        }
+      ]
+    },
+    app: {
+      features: ["recover"],
+      callbacks: _opts?.app?.callbacks || {}
+    },
+    recover: {
+      undoHtml: "Undo",
+      redoHtml: "Redo",
+      resetHtml: "Restore",
+      adjustTrackedState(state) {
+        const s = structuredClone(state);
+        delete s.termfilter.filter0;
+        return s;
+      }
+    },
+    hierCluster: _opts?.hierCluster || {}
+  };
+  const opts = Object.assign(defaults, _opts);
+  const app = await appInit(opts);
+  holder.select(".sja_errorbar").node()?.lastChild?.click?.();
+  const hc = Object.values(app.Inner.components.plots).find(
+    (p) => p.type == "hierCluster" || p.chartType == "hierCluster"
+  ).Inner;
+  return { app, hc };
+}
+function getGenes() {
+  return [
+    { gene: "AKT1", type: "geneExpression" },
+    { gene: "TP53", type: "geneExpression" },
+    { gene: "BCR", type: "geneExpression" },
+    { gene: "KRAS", type: "geneExpression" }
+  ];
+}
+//# sourceMappingURL=hierCluster.integration.spec-CNR5OJOH.js.map

package/dist/hierCluster.interactivity-TLEIVTFK.js

@@ -0,0 +1,49 @@
+import {
+  addSelectedRowsOptions,
+  addSelectedSamplesOptions,
+  getAllChildrenClusterIds,
+  getClusterFromLeftDendrogram,
+  getClusterFromTopDendrogram,
+  setClusteringBtn,
+  showTable4selectedRows,
+  showTable4selectedSamples,
+  triggerZoomBranch
+} from "./chunk-GT6WJUJY.js";
+import "./chunk-Q5SK3U2T.js";
+import "./chunk-HJ6L54YS.js";
+import "./chunk-KV4W2ACA.js";
+import "./chunk-54KC7DAB.js";
+import "./chunk-N7DVQTPC.js";
+import "./chunk-ELJX3QIQ.js";
+import "./chunk-EEB5VE2A.js";
+import "./chunk-6RRZRISL.js";
+import "./chunk-2KM4PRQM.js";
+import "./chunk-RPDVFM7E.js";
+import "./chunk-M4XXKTH2.js";
+import "./chunk-5ILEFNXJ.js";
+import "./chunk-IZUYLFOX.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 {
+  addSelectedRowsOptions,
+  addSelectedSamplesOptions,
+  getAllChildrenClusterIds,
+  getClusterFromLeftDendrogram,
+  getClusterFromTopDendrogram,
+  setClusteringBtn,
+  showTable4selectedRows,
+  showTable4selectedSamples,
+  triggerZoomBranch
+};
+//# sourceMappingURL=hierCluster.interactivity-TLEIVTFK.js.map

package/dist/hierCluster.renderers-P7JNIT3N.js

@@ -0,0 +1,19 @@
+import {
+  maySetSandboxHeader,
+  plotDendrogramHclust,
+  renderImage
+} from "./chunk-OXWLQQXL.js";
+import "./chunk-5ILEFNXJ.js";
+import "./chunk-IZUYLFOX.js";
+import "./chunk-Z2ZITHT4.js";
+import "./chunk-4OLM3KSB.js";
+import "./chunk-5R63Q5KH.js";
+import "./chunk-I6Y4O3RR.js";
+import "./chunk-Q5RDQNIT.js";
+import "./chunk-HS5PO5ZQ.js";
+export {
+  maySetSandboxHeader,
+  plotDendrogramHclust,
+  renderImage
+};
+//# sourceMappingURL=hierCluster.renderers-P7JNIT3N.js.map

package/dist/imagePlot-BF67SXQR.js

@@ -0,0 +1,156 @@
+import {
+  PlotBase,
+  controlsInit
+} from "./chunk-Q5SK3U2T.js";
+import "./chunk-HJ6L54YS.js";
+import "./chunk-KV4W2ACA.js";
+import "./chunk-54KC7DAB.js";
+import "./chunk-N7DVQTPC.js";
+import "./chunk-ELJX3QIQ.js";
+import "./chunk-EEB5VE2A.js";
+import "./chunk-6RRZRISL.js";
+import "./chunk-2KM4PRQM.js";
+import {
+  dofetch3
+} from "./chunk-RPDVFM7E.js";
+import "./chunk-M4XXKTH2.js";
+import "./chunk-5ILEFNXJ.js";
+import "./chunk-IZUYLFOX.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/imagePlot.ts
+var ImagePlot = class _ImagePlot extends PlotBase {
+  static {
+    this.type = "imagePlot";
+  }
+  constructor(opts, api) {
+    super(opts, api);
+    this.type = _ImagePlot.type;
+    if (this.opts?.header) {
+      if (this.opts?.headerText)
+        this.opts.header.append("span").style("padding-right", "5px").text(this.opts.headerText);
+      this.opts.header.append("span").text("IMAGE PLOT").style("font-size", "0.7em").style("opacity", 0.6);
+    }
+  }
+  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,
+      termfilter: appState.termfilter,
+      vocab: appState.vocab
+    };
+  }
+  async init(appState) {
+    const config = this.getState(appState).config;
+    const holder = this.opts.holder.append("div").attr("data-testid", "sjpp-imagePlot-holder");
+    this.dom = {
+      holder,
+      controlsHolder: holder.append("div").attr("data-testid", "sjpp-imagePlot-controlsDiv").style("display", "inline-block"),
+      imageHolder: holder.append("div").attr("data-testid", "sjpp-imagePlot-imagesDiv").style("display", "inline-block")
+    };
+    const sampleId = config.sample?.sampleId || config.sample?.sID;
+    let images;
+    if (config?.imgDir) {
+      const img = await dofetch3(
+        `img?file=${config.imgDir.folder}${config.imgDir.folder.endsWith("/") ? "" : "/"}${sampleId}/${config.imgDir.fileName}`
+      );
+      if (!img || img?.error) throw new Error(img?.error || "Error fetching image");
+      images = [img];
+    } else {
+      const result = await this.vocabApi.getSampleImages(sampleId);
+      if (result.error) throw new Error(result.error);
+      images = result.images;
+    }
+    for (const img of images) {
+      this.dom.imageHolder.append("img").style("padding", "10px").attr("src", img.src).attr("width", config.settings.imagePlot.width).attr("height", config.settings.imagePlot.height);
+    }
+  }
+  async setControls() {
+    this.components = {
+      controls: await controlsInit({
+        app: this.app,
+        id: this.id,
+        holder: this.dom.controlsHolder,
+        inputs: [
+          {
+            label: "Image width",
+            type: "number",
+            chartType: this.type,
+            settingsKey: "width"
+          },
+          {
+            label: "Image height",
+            type: "number",
+            chartType: this.type,
+            settingsKey: "height"
+          }
+        ]
+      })
+    };
+  }
+  async main() {
+  }
+};
+async function getPlotConfig(opts) {
+  const settings = getDefaultImagePlotSettings();
+  if (opts.settings) copyMerge(settings, opts.settings);
+  const config = {
+    settings: {
+      controls: {
+        isOpen: false
+      },
+      imagePlot: settings
+    }
+  };
+  return copyMerge(config, opts);
+}
+function getDefaultImagePlotSettings() {
+  return {
+    width: 500,
+    height: 500
+  };
+}
+var imagePlotInit = getCompInit(ImagePlot);
+var componentInit = imagePlotInit;
+async function renderImagePlot(state, holder, sample) {
+  const opts = {
+    holder,
+    state: {
+      vocab: state.vocab,
+      plots: [
+        {
+          chartType: "imagePlot",
+          sample
+        }
+      ]
+    }
+  };
+  const plot = await import("./plot.app-YIQOY2Z7.js");
+  await plot.appInit(opts);
+}
+export {
+  componentInit,
+  getDefaultImagePlotSettings,
+  getPlotConfig,
+  imagePlotInit,
+  renderImagePlot
+};
+//# sourceMappingURL=imagePlot-BF67SXQR.js.map