@sjcrh/proteinpaint-client 2.207.1 → 2.208.0

package/dist/SC-FPXVXBXF.js

@@ -0,0 +1,1175 @@
+import {
+  PlotBase,
+  digestMessage,
+  filterRxCompInit,
+  formatHeaderText,
+  getCombinedTermFilter,
+  getGEunit,
+  getNormalRoot,
+  make_radios,
+  newSandboxDiv,
+  renderTable
+} from "./chunk-QJ3HYZH3.js";
+import "./chunk-HJ6L54YS.js";
+import "./chunk-KV4W2ACA.js";
+import {
+  importPlot
+} from "./chunk-DMWOK4DS.js";
+import {
+  Menu
+} from "./chunk-ELJX3QIQ.js";
+import "./chunk-5IMFPVGT.js";
+import "./chunk-EEB5VE2A.js";
+import "./chunk-6RRZRISL.js";
+import "./chunk-2KM4PRQM.js";
+import {
+  dofetch3
+} from "./chunk-VMRO6DMC.js";
+import "./chunk-HKKTNIMX.js";
+import "./chunk-GMRIEUBW.js";
+import {
+  SINGLECELL_CELLTYPE,
+  SINGLECELL_GENE_EXPRESSION,
+  TermTypeGroups
+} from "./chunk-4EZLVENZ.js";
+import {
+  copyMerge,
+  getCompInit,
+  multiInit
+} 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/sc/model/SCModel.ts
+var SCModel = class {
+  constructor(sc) {
+    /** whether a sample has a spatial image (with the consolidated h5ad the
+     spatial subplot needs), keyed by sID. Successful probes are cached;
+     failures return false for the current render and may be retried. */
+    this.sampleHasSpatial = {};
+    this.sc = sc;
+    this.app = sc.app;
+    this.id = sc.id;
+    this.state = sc.app.getState();
+  }
+  /********** All Single Cell SAMPLES for rendering the sample table ******** */
+  async getAllSampleData(state) {
+    const body = {
+      genome: state.vocab.genome,
+      dslabel: state.vocab.dslabel,
+      filter: getNormalRoot(state.termfilter.filter),
+      filter0: state.termfilter.filter0
+    };
+    return await dofetch3("termdb/singlecellSamples", { body, signal: this.sc.api?.getAbortSignal() });
+  }
+  //Fetches optional name for ds defined columns
+  async getColumnLabels(dsScSamples) {
+    if (!dsScSamples || !dsScSamples.sampleColumns) return;
+    const colsCopy = structuredClone(dsScSamples.sampleColumns);
+    for (const col of colsCopy) {
+      let label = col.termid;
+      try {
+        label = (await this.app.vocabApi.getterm(col.termid)).name;
+      } catch (e) {
+        if (e.message) {
+        }
+      }
+      col.label = label;
+    }
+    return colsCopy;
+  }
+  /********** Single Cell DATA for rendering plots ********
+   * This is for the plot buttons. Returns an array plots with found files or
+   * available data. */
+  async getSampleData() {
+    const body = this.getDataRequestOpts();
+    if (!body) return;
+    return await dofetch3("termdb/singlecellData", { body, signal: this.sc.api?.getAbortSignal() });
+  }
+  /** May provide active plots to the request and return plot data when
+   * checkPlotAvailability is false. When checkPlotAvailability is true,
+   * only returns which plots are available but not the actual data. */
+  getDataRequestOpts(_plots = [], checkPlotAvailability = true) {
+    const state = this.app.getState();
+    const singleCellTermdbConfig = state.termdbConfig?.queries?.singleCell;
+    if (!singleCellTermdbConfig?.data) throw new Error("No singleCell.data defined in termdbConfig.queries");
+    const config = state.plots.find((p) => p.id === this.id);
+    if (!config.settings.sc.item) return;
+    const plots = _plots?.length ? _plots : singleCellTermdbConfig.data.plots.map((p) => p.name);
+    return {
+      genome: this.state.vocab.genome,
+      dslabel: this.state.vocab.dslabel,
+      // if true, only return available plot names, but not actual plot data
+      checkPlotAvailability,
+      plots,
+      sample: {
+        eID: config.settings.sc.item.eID,
+        sID: config.settings.sc.item.sID
+      }
+    };
+  }
+  async hasSpatialImage(sID) {
+    if (!(sID in this.sampleHasSpatial)) {
+      const supported = this.state.termdbConfig?.supportedChartTypes || {};
+      if (!Object.values(supported).some((types) => types?.includes?.("wsi"))) return false;
+      let r;
+      try {
+        r = await dofetch3("termdb/wsiBySample", {
+          // imageType: only the spatial root is enumerated for the probe
+          body: {
+            genome: this.state.vocab.genome,
+            dslabel: this.state.vocab.dslabel,
+            sample_id: sID,
+            imageType: "spatial"
+          },
+          signal: this.sc.api?.getAbortSignal()
+        });
+      } catch (e) {
+        if (this.app.vocabApi?.isAbortError?.(e)) throw e;
+        return false;
+      }
+      if (r?.error) return false;
+      this.sampleHasSpatial[sID] = !!(r?.images || []).some((i) => i.type == "spatial" && i.spatialData);
+    }
+    return this.sampleHasSpatial[sID];
+  }
+  /** Essentially for the GDC. Maybe applied to other ds in the future. */
+  async getCategories(_plots) {
+    const body = this.getDataRequestOpts(_plots, false);
+    if (!body) return;
+    let res;
+    try {
+      res = await dofetch3("termdb/singlecellData", { body, signal: this.sc.api?.getAbortSignal() });
+    } catch (e) {
+      if (e instanceof Error) console.error(`${e.message || e}`);
+    }
+    return this.formatCategories(res);
+  }
+  formatCategories(res) {
+    const plot = structuredClone(res.plots[0]);
+    plot.cells = [...plot.noExpCells, ...plot.expCells];
+    const clusters = new Set(plot.cells.map((c) => c.category));
+    const sortedClusters = Array.from(clusters).sort((a, b) => {
+      const num1 = parseInt(a.split(" ")[1]);
+      const num2 = parseInt(b.split(" ")[1]);
+      return num1 - num2;
+    });
+    return sortedClusters;
+  }
+};
+
+// plots/sc/viewModel/SCViewModel.ts
+var SCViewModel = class {
+  constructor(app, sampleColumns) {
+    this.app = app;
+    this.state = this.app.getState();
+    this.sampleColumns = sampleColumns || [];
+    this.metaResultIds = /* @__PURE__ */ new Set();
+  }
+  processData(config, _items) {
+    const items = _items.sort((a, b) => b.isMetaResult === a.isMetaResult ? 0 : b.isMetaResult ? 1 : -1);
+    const [rows, columns, sampleColIdx] = this.getTabelData(config, items, this.sampleColumns);
+    const selectedRows = [];
+    const sID = config.settings.sc.item?.sID;
+    const i = sID ? items.findIndex((item) => item.sample === sID || item.experiments?.some((e) => e.sampleName === sID)) : -1;
+    if (i != -1) selectedRows.push(i);
+    this.tableData = {
+      rows,
+      columns,
+      selectedRows,
+      sampleColIdx
+    };
+  }
+  /** Shape the selected sample's plot data for the plot buttons view:
+   * the server's plots plus flags the view only reads (hasSpatial shows
+   * the Spatial button). */
+  formatPlotsData(sampleData, hasSpatial) {
+    return { ...sampleData, hasSpatial };
+  }
+  getTabelData(plotConfig, items, sampleColumns) {
+    const rows = [];
+    const hasExperiments = items.some((i) => i.experiments);
+    let sampleColIdx = -1;
+    let firstColLabel = plotConfig.settings.sc.columns.sample;
+    if (items[0]?.isMetaResult) firstColLabel = "";
+    const columns = [{ label: firstColLabel, sortable: true }];
+    if (hasExperiments) {
+      columns.push({ label: "Sample", sortable: true });
+      sampleColIdx = 1;
+    } else sampleColIdx = 0;
+    columns.push({ label: "Shown plots" });
+    for (const col of sampleColumns || []) {
+      columns.push({
+        label: col.label,
+        width: "14vw",
+        sortable: true
+      });
+    }
+    if (hasExperiments) columns.push({ label: "Experiment", sortable: true });
+    for (const item of items) {
+      if (item.isMetaResult) this.metaResultIds.add(item.sample);
+      if (hasExperiments)
+        for (const exp of item.experiments) {
+          const row = [{ value: item.sample, __experimentID: exp.experimentID }];
+          row.push({ value: exp.sampleName });
+          row.push({ value: "" });
+          for (const col of sampleColumns || []) {
+            row.push({ value: item[col.termid] });
+          }
+          const urlTemp = this.state.termdbConfig?.urlTemplates?.scrnaExperimentId;
+          if (urlTemp) row.push({ value: exp.experimentID, url: `${urlTemp.base}${exp.experimentID}` });
+          else row.push({ value: exp.experimentID });
+          rows.push(row);
+        }
+      else {
+        const row = item.isMetaResult ? [{ html: item.sample.replace(/_/g, " "), value: item.sample, elemId: "isMetaResult" }] : [{ value: item.sample }];
+        row.push({ value: "" });
+        for (const col of sampleColumns || []) {
+          const value = item[col.termid];
+          if (value == null && item.isMetaResult) row.push({ value: "All" });
+          else row.push({ value: item[col.termid] });
+        }
+        rows.push(row);
+      }
+    }
+    return [rows, columns, sampleColIdx];
+  }
+};
+
+// plots/sc/interactions/SCInteractions.ts
+var SCInteractions = class {
+  constructor(sc) {
+    this.app = sc.app;
+    this.id = sc.id;
+    this.model = sc.model;
+    this.viewModel = sc.viewModel;
+  }
+  /** Add the plot to the state.plots array with .parentId. Adding
+   * .parentId prevents the plot from launching in a new sandbox outside SC.
+   * Pass the .parentId to both the plotConfig and the action.
+   * this.getState() in SC.ts will find all the subplots with the parentId==this.id
+   * SC.main() initializes the subplots as components in chartsDiv */
+  async createSubplot(config) {
+    const c = Object.assign({}, config, { parentId: this.id });
+    await this.app.dispatch({
+      type: "plot_create",
+      parentId: this.id,
+      config: c
+    });
+  }
+  /** Updates the selected item in the plot settings */
+  async updateItem(item) {
+    item.isMetaResult = this.viewModel.metaResultIds.has(item.sID);
+    await this.app.dispatch({
+      type: "plot_edit",
+      id: this.id,
+      config: { settings: { sc: { item } } }
+    });
+  }
+  async getDropDownOptions(plot) {
+    return this.model.getCategories(plot);
+  }
+};
+
+// plots/sc/view/SampleTableRenderer.ts
+var SampleTableRenderer = class {
+  constructor(dom, interactions, tableData) {
+    this.activeSandboxes = /* @__PURE__ */ new Map();
+    /** Tracks rendered btns per sample to avoid unnecessary destroy/recreate pattern. */
+    this.rendered = /* @__PURE__ */ new Map();
+    this.dom = dom;
+    this.interactions = interactions;
+    this.tableData = tableData;
+    this.renderSamplesTable(tableData);
+  }
+  /** Users select one item at a time to render the plot buttons
+   * to init() plots in the dashboard.*/
+  renderSamplesTable(tableData) {
+    this.dom.tableDiv.selectAll("*").remove();
+    renderTable({
+      rows: tableData.rows,
+      columns: tableData.columns,
+      div: this.dom.tableDiv,
+      singleMode: true,
+      // maxWidth: tableData.columns.length > 3 ? '95vw' : 'auto',
+      maxHeight: "30vh",
+      header: {
+        allowSort: true,
+        style: { "text-transform": "capitalize" }
+      },
+      striped: true,
+      selectedRows: tableData.selectedRows,
+      afterRender: () => {
+        this.reapplyAllPlotButtons();
+      },
+      noButtonCallback: (index) => {
+        const item = this.buildItemFromRow(tableData, index);
+        this.interactions.updateItem(item);
+        this.dom.plotsBtnsDiv.style("display", "block");
+      }
+    });
+  }
+  /** Builds an item object from a table row, mapping column labels to keys.
+   * Converts 'sample' -> 'sID' and 'experiment' -> 'eID'.
+   * Extracted out from noButtonCallback for testing.  */
+  buildItemFromRow(tableData, index) {
+    const item = {};
+    tableData.rows[index].forEach((r, idx) => {
+      if (!r.value) return;
+      let key = tableData.columns[idx].label.toLowerCase();
+      key = key === "sample" || key === "" ? "sID" : key === "experiment" ? "eID" : key;
+      item[key] = r.value;
+    });
+    if (!item.sID) throw new Error("Selected item must have sID property");
+    return item;
+  }
+  updateTable(tableData) {
+    this.tableData = tableData;
+    this.dom.tableDiv.selectAll("*").remove();
+    this.renderSamplesTable(tableData);
+  }
+  updatePlotBtns(activeSandboxes) {
+    this.activeSandboxes = activeSandboxes;
+    this.reapplyAllPlotButtons();
+  }
+  /** Called by afterRender to re-apply buttons for all samples with subplots.
+   * Also called in updateTable when the active sandboxes (i.e. subplots) change.*/
+  reapplyAllPlotButtons() {
+    for (const sampleId of this.rendered.keys()) {
+      if (!this.activeSandboxes.has(sampleId)) {
+        this.deleteBtns(sampleId);
+      }
+    }
+    for (const sampleId of this.activeSandboxes.keys()) {
+      this.applyButtonsForSample(sampleId);
+    }
+  }
+  deleteBtns(sampleId) {
+    const cached = this.rendered.get(sampleId);
+    if (cached) {
+      cached.cell.selectAll(".sjpp-sc-table-plot-btn").remove();
+      this.rendered.delete(sampleId);
+    }
+  }
+  /** Applies buttons for a single sample. Skips DOM work if cell and plots are unchanged. */
+  applyButtonsForSample(sampleId) {
+    const sampleIdx = this.tableData.sampleColIdx;
+    const row = this.tableData.rows.find((r) => r[sampleIdx].value === sampleId);
+    if (!row) return;
+    const cell = row[sampleIdx + 1].__td;
+    const sampleSandboxes = this.activeSandboxes.get(sampleId);
+    if (!sampleSandboxes || sampleSandboxes.length === 0) return;
+    const plotIds = sampleSandboxes.map((s) => s.plotId).join(",");
+    const cached = this.rendered.get(sampleId);
+    if (cached && cached.cell === cell && cached.plotIds === plotIds) return;
+    cell.selectAll(".sjpp-sc-table-plot-btn").remove();
+    this.rendered.set(sampleId, { cell, plotIds });
+    for (const { div, plotName } of sampleSandboxes) {
+      this.appendPlotBtn(cell, div, plotName, sampleId);
+    }
+  }
+  appendPlotBtn(cell, sandboxDiv, plotName, sampleId) {
+    const text = plotName.length > 25 ? plotName.slice(0, 12) + "..." : plotName;
+    const label = `Scroll to ${plotName}`;
+    cell.append("button").attr("class", "sjpp-sc-table-plot-btn").attr("data-testid", `sjpp-sc-table-${sampleId}-${plotName}-btn`).style("padding", "2px 5px").style("margin-left", "4px").style("font-size", "0.8em").style("border-radius", "20px").style("border", "0.5px solid black").style("cursor", "pointer").text(text).attr("aria-label", label).attr("title", label).attr("tabindex", 0).on("click", () => {
+      sandboxDiv.node().scrollIntoView({ behavior: "smooth", block: "start" });
+    });
+  }
+};
+
+// plots/sc/view/PlotButtons.ts
+var PlotButtons = class {
+  /** scctTerms and the scTermdbConfig are created on server init and will not change. */
+  constructor(interactions, holder, termdbConfig) {
+    holder.style("padding", "10px");
+    const promptDiv = holder.append("div").style("padding", "10px 0").text("Select data from");
+    this.plotBtnsDom = {
+      holder,
+      promptDiv,
+      selectPrompt: promptDiv.append("span"),
+      btnsDiv: holder.append("div"),
+      tip: new Menu({ padding: "" })
+    };
+    this.interactions = interactions;
+    this.scctTerms = termdbConfig?.termType2terms?.[TermTypeGroups.SINGLECELL_CELLTYPE];
+    this.scnvTerms = termdbConfig?.termType2terms?.[TermTypeGroups.SINGLECELL_NUMERIC_VALUE];
+    this.scTermdbConfig = termdbConfig.queries.singleCell;
+  }
+  update(settings, data) {
+    const item = settings.sc.item;
+    this.plotBtnsDom.holder.style("display", !item ? "none" : "block");
+    if (!item) return;
+    if (data != null && data.plots) this.data = data;
+    this.availablePlots = new Set(this.data?.plots?.map((p) => p.name));
+    this.settings = settings;
+    this.item = item;
+    const name = item.sID;
+    this.plotBtnsDom.selectPrompt.text(` ${name}:`);
+    this.renderChartBtns();
+  }
+  renderChartBtns() {
+    this.plotBtnsDom.btnsDiv.selectAll("*").remove();
+    const btns = this.getChartBtnOpts();
+    this.plotBtnsDom.btnsDiv.selectAll("button").data(btns.filter((b) => b.isVisible ? b.isVisible() : true)).enter().append("button").attr("type", "button").attr("data-testid", (b) => `sjpp-sc-plot-btn-${b.label.toLowerCase().replace(/\s/g, "-")}`).style("padding", "10px 15px").style("border-radius", "20px").style("border-color", "transparent").style("background-color", "#CFE2F3").style("margin", "0 10px").style("cursor", "pointer").text((b) => b.label).on("click", async (e, plot) => {
+      if (plot.open) {
+        this.plotBtnsDom.tip.clear().showunder(e.target);
+        plot.open(plot, this);
+      } else {
+        if (!plot.getPlotConfig)
+          throw new Error(`No getPlotConfig function defined for this plot button = ${plot.label}`);
+        const config = await plot.getPlotConfig();
+        await this.interactions.createSubplot(config);
+      }
+    });
+  }
+  getChartBtnOpts() {
+    const btns = [];
+    for (const plot of this.scTermdbConfig?.data?.plots || []) {
+      if (!this.availablePlots.has(plot.name)) continue;
+      btns.push({
+        label: plot.name,
+        isVisible: () => true,
+        getPlotConfig: async () => {
+          return await this.getSingleCellConfig(plot.name);
+        }
+      });
+    }
+    btns.push(
+      {
+        label: "Summary",
+        isVisible: () => true,
+        getPlotConfig: () => {
+          const sample = { ...this.item, plots: Array.from(this.availablePlots) };
+          const isMeta = sample?.isMetaResult || false;
+          return {
+            chartType: "dictionary",
+            sample,
+            spawnConfig: {
+              parentId: this.interactions.id,
+              headerText: this.makeHeaderText(sample, isMeta),
+              hidePlotFilter: !isMeta,
+              sample
+            },
+            tree: {
+              usecase: {
+                target: "dictionary",
+                specialCase: {
+                  type: "singleCell",
+                  config: { sample }
+                }
+              }
+            }
+          };
+        }
+      },
+      {
+        label: "Gene expression",
+        isVisible: () => this.scTermdbConfig?.geneExpression,
+        getPlotConfig: () => {
+          const sample = this.item;
+          const isMeta = sample?.isMetaResult || false;
+          const headerText = this.makeHeaderText(sample, isMeta);
+          return {
+            chartType: "GeneExpInput",
+            termType: SINGLECELL_GENE_EXPRESSION,
+            headerText,
+            termProperties: { sample },
+            parentId: this.interactions.id,
+            sample,
+            spawnConfig: {
+              parentId: this.interactions.id,
+              headerText,
+              hidePlotFilter: !isMeta,
+              /** Must pass this to summary config in the event a continuous
+               * overlay is applied, launching the scatter plot. Without it,
+               * the single cell model is not used. */
+              singleCellPlot: {
+                name: [...this.availablePlots][0],
+                sample
+              }
+            }
+          };
+        }
+      },
+      {
+        label: "Differential expression",
+        isVisible: () => this.scTermdbConfig?.DEgenes,
+        open: this.termDropdownMenu,
+        getPlotConfig: (value) => {
+          const isMeta = this.item?.isMetaResult || false;
+          return {
+            chartType: "differentialAnalysis",
+            termType: SINGLECELL_CELLTYPE,
+            categoryName: `${value}`,
+            headerText: `${isMeta ? "" : "Sample: "}${this.item.sID}, ${this.scTermdbConfig.DEgenes.termId} ${value}`,
+            termId: this.scTermdbConfig.DEgenes.termId,
+            sample: this.item,
+            plotName: "Differential expression"
+          };
+        }
+      },
+      {
+        label: this.scTermdbConfig?.images?.label || "Image",
+        isVisible: () => this.scTermdbConfig?.images && this.availablePlots.has(this.scTermdbConfig.images.label || "Image"),
+        getPlotConfig: () => {
+          const isMeta = this.item?.isMetaResult || false;
+          return {
+            chartType: "imagePlot",
+            sample: this.item,
+            imgDir: this.scTermdbConfig?.images,
+            headerText: this.makeHeaderText(this.item, isMeta),
+            settings: { imagePlot: { width: "", height: 400 } }
+          };
+        }
+      },
+      {
+        // spatial tissue viewer for samples with a spatial image (the model's
+        // wsiBySample probe sets data.hasSpatial); spawns the w2 wsi plot in
+        // fixed-sample mode, which has its own burger menu for the overlays
+        label: "Spatial",
+        isVisible: () => !!this.data?.hasSpatial,
+        getPlotConfig: () => {
+          const sample = this.item;
+          return {
+            chartType: "wsi",
+            name: `Sample: ${sample.sID} Spatial`,
+            sample
+          };
+        }
+      }
+    );
+    return btns;
+  }
+  makeHeaderText(sample, isMeta, plot) {
+    const caseText = sample.case ? ` Case: ${sample.case}` : "";
+    const projectText = sample?.["project id"] ? ` Project: ${sample["project id"]}` : "";
+    return `${isMeta ? "" : "Sample: "}${sample.sID}${caseText}${projectText}${plot ? ` (${plot})` : ""}`;
+  }
+  //********** Btn Menus **********/
+  async termDropdownMenu(plot, self) {
+    const _plot = Array.from(self.availablePlots)[0];
+    const options = await self.interactions.getDropDownOptions([_plot]);
+    if (!options?.length) throw new Error("No options found for this plot. Cannot open dropdown menu.");
+    self.plotBtnsDom.tip.clear();
+    const wrapper = self.plotBtnsDom.tip.d.append("div").style("padding", "10px");
+    wrapper.append("div").style("display", "block").style("width", "300px").text(`View differentially expressed genes of a ${self.scTermdbConfig.DEgenes.termId} versus rest of the cells:`);
+    const select = wrapper.append("select").style("margin", "10px 0").style("width", "auto").style("padding", "5px").on("change", async function() {
+      self.plotBtnsDom.tip.hide();
+      const value = select.node().value;
+      if (value.indexOf("Select") == 0) return;
+      const config = plot.getPlotConfig(value);
+      await self.interactions.createSubplot(config);
+    });
+    const regex = new RegExp(self.scTermdbConfig.DEgenes.termId, "gi");
+    options.unshift(`Select a ${self.scTermdbConfig.DEgenes.termId}...`);
+    for (const cluster of options) {
+      select.append("option").attr("value", cluster.replace(regex, "").trim()).text(cluster);
+    }
+  }
+  //********** Plot Config Helpers **********/
+  async getSingleCellConfig(plotName) {
+    if (!this.item) throw new Error("No item selected");
+    const plot = this.scTermdbConfig.data.plots.find((p) => p.name == plotName);
+    if (!plot) throw new Error(`No plot by name ${plotName} in data.plots.`);
+    const sample = this.item;
+    const isMeta = sample?.isMetaResult || false;
+    const config = {
+      chartType: "sampleScatter",
+      name: this.makeHeaderText(sample, isMeta, plotName),
+      sample,
+      singleCellPlot: {
+        name: plotName,
+        sample
+      }
+    };
+    if (plot.colorColumns?.[0]) {
+      const key = plot.colorColumns[0]?.type == "numeric" ? "scnv" : "scct";
+      config.colorTW = await this.makeScTW(key, sample, plot);
+    }
+    return config;
+  }
+  // Quick fix. Eventually use the handler to get the proper term from the termdbConfig
+  async makeScTW(key, item, plot) {
+    if (!key) throw new Error("Key is required for makeScTW");
+    const colorColName = plot.colorColumns[0].name;
+    const savedTerm = this[`${key}Terms`]?.find((t) => t.name == colorColName && t.plot == plot.name);
+    if (!savedTerm) {
+      const ttg = key === "scct" ? TermTypeGroups.SINGLECELL_CELLTYPE : TermTypeGroups.SINGLECELL_NUMERIC_VALUE;
+      throw new Error(
+        `No term found for colorColumn=${colorColName} in .termType2terms.${ttg} for plot ${plot.name}`
+      );
+    }
+    const term = Object.assign(structuredClone(savedTerm), {
+      sample: item
+    });
+    const id = await digestMessage(`${plot.name}-${item.sID}-${item.eID}`);
+    return Object.assign({ $id: id }, { term });
+  }
+};
+
+// plots/sc/view/SectionRenderer.ts
+var SectionRenderer = class {
+  constructor(sectionsDiv, groupBy) {
+    this.sections = {};
+    this.holder = sectionsDiv;
+    this.plotId2Key = /* @__PURE__ */ new Map();
+    this.groupBy = groupBy;
+  }
+  /** Send the sc with the updated state. May not be necessary long term. If not,
+   * remove and put in the constructor. */
+  async update(sc, subplots, groupBy) {
+    if (groupBy !== this.groupBy) {
+      this.groupBy = groupBy;
+      this.regroupSections(sc, subplots);
+      return;
+    }
+    const activeSubplots = new Set(subplots.map((s) => s.id));
+    for (const plotId of Array.from(this.plotId2Key.keys())) {
+      if (!activeSubplots.has(plotId)) this.removeSandbox(plotId);
+    }
+    for (const subplot of subplots) {
+      const key = this.getKey(subplot, sc);
+      if (!key) continue;
+      if (!this.sections[key]) this.initSection(key, sc);
+      if (!this.sections[key].sandboxes[subplot.id]) {
+        this.plotId2Key.set(subplot.id, key);
+        sc.subplotManager.setSectionKey(subplot.id, key);
+        await this.initSandbox(sc, subplot, key);
+      }
+    }
+    for (const key of Object.keys(this.sections)) {
+      if (Object.keys(this.sections[key].sandboxes).length === 0) {
+        this.removeSection(key, sc);
+      }
+    }
+  }
+  /** Reparent existing sandboxes into new section containers
+   * without destroying/recreating plot components. */
+  regroupSections(sc, subplots) {
+    const detached = /* @__PURE__ */ new Map();
+    for (const [plotId, key] of this.plotId2Key) {
+      const sandboxNode = this.sections[key]?.sandboxes[plotId];
+      if (sandboxNode) {
+        sandboxNode.remove();
+        detached.set(plotId, sandboxNode);
+      }
+    }
+    this.holder.selectAll("*").remove();
+    this.sections = {};
+    this.plotId2Key = /* @__PURE__ */ new Map();
+    for (const subplot of subplots) {
+      const key = this.getKey(subplot, sc);
+      if (!key) continue;
+      if (!this.sections[key]) this.initSection(key, sc);
+      this.plotId2Key.set(subplot.id, key);
+      sc.subplotManager.setSectionKey(subplot.id, key);
+      const existing = detached.get(subplot.id);
+      if (existing) {
+        this.sections[key].subplots.node().prepend(existing.node());
+        this.sections[key].sandboxes[subplot.id] = existing;
+      }
+    }
+  }
+  getKey(subplot, sc) {
+    if (this.groupBy === "none") return "none";
+    if (this.groupBy === "sample") return this.getSampleId(subplot);
+    return sc.subplotManager.getPlotName(subplot);
+  }
+  /** Extract sID from a subplot's config.
+   * Actual subplots store sample as {sID, eID} at top level or on term.term.sample. */
+  getSampleId(subplot) {
+    return subplot.sample?.sID || subplot.singleCellPlot?.sample?.sID || subplot.term?.term?.sample?.sID;
+  }
+  initSection(key, sc) {
+    const item = this.findSampleMetadata(key, sc);
+    const titleAttrText = this.groupBy == "sample" ? "this sample section" : this.groupBy == "plot" ? "this plot section" : "all plots";
+    const sectionWrapper = this.holder.insert("div", ":first-child").style("padding", "10px").attr("data-testid", `sjpp-sc-section-wrapper-${key}`);
+    sectionWrapper.append("span").attr("data-testid", `sjpp-sc-section-remove-btn-${key}`).style("margin", "0px 5px").style("cursor", "pointer").attr("title", `Remove ${titleAttrText}`).html(
+      `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="#000" class="bi bi-x-lg" viewBox="0 0 12 12">
+                <path
+                    stroke="#000"
+                    transform="scale(0.75)"
+                    d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>
+                </svg>`
+    ).on("click", () => {
+      this.removeSection(key, sc);
+    });
+    const titleText = this.makeSectionTitleText(key, item);
+    const titleWrapper = sectionWrapper.append("span").style("font-weight", 600).style("opacity", 0.7).text(titleText);
+    if (titleText.length) {
+      const arrow = titleWrapper.append("span").style("font-size", "0.8em").style("padding-left", "3px").attr("title", `Show/hide plots in ${titleAttrText}`).text("\u25BC");
+      titleWrapper.on("click", () => {
+        const isHidden = this.sections[key].subplots.style("display") === "none";
+        this.sections[key].subplots.style("display", isHidden ? "block" : "none");
+        arrow.text(isHidden ? "\u25BC" : "\u25B2");
+      });
+    }
+    this.sections[key] = {
+      sectionWrapper,
+      title: titleWrapper,
+      subplots: sectionWrapper.append("div").attr("data-testid", `sjpp-sc-subplots-${key}`),
+      sandboxes: {}
+    };
+  }
+  /** Look up sample metadata from the fetched items list.
+   * For experiment datasets, matches sID against experiments[].sampleName.
+   * For non-experiment datasets, matches sID against item.sample. */
+  findSampleMetadata(sampleId, sc) {
+    if (!sc.items) return void 0;
+    return sc.items.find((item) => item.sample === sampleId || item.experiments?.some((e) => e.sampleName === sampleId));
+  }
+  makeSectionTitleText(key, item) {
+    if (this.groupBy === "none") return "All plots";
+    if (this.groupBy === "plot") return key;
+    const caseText = item?.sample && item.sample !== key ? `Case: ${item.sample}` : "";
+    const isMeta = item?.isMetaResult || false;
+    const itemText = `${isMeta ? "" : "Sample: "}${key}`;
+    const projectProp = item?.case?.project?.project_id || item?.["project id"];
+    const projectText = projectProp ? `Project: ${projectProp}` : "";
+    return [itemText, caseText, projectText].filter(Boolean).join(" ");
+  }
+  async initSandbox(sc, subplot, key) {
+    const sandboxHolder = this.sections[key].subplots.insert("div", ":first-child").attr("data-testid", `sjpp-sc-sandbox-${subplot.id}`);
+    const sandboxDiv = await sc.subplotManager.initSubplotSandbox(sandboxHolder, subplot, {
+      sectionKey: key
+    });
+    this.sections[key].sandboxes[subplot.id] = sandboxDiv;
+  }
+  removeSection(key, sc) {
+    const subactions = [];
+    for (const plotId of Object.keys(this.sections[key].sandboxes || {})) {
+      this.removeSandbox(plotId, key);
+      subactions.push({
+        type: "plot_delete",
+        id: plotId,
+        parentId: sc.id
+      });
+    }
+    if (subactions.length > 0) {
+      sc.app.dispatch({
+        type: "app_refresh",
+        subactions
+      });
+    }
+    this.sections[key].sectionWrapper.remove();
+    delete this.sections[key];
+  }
+  removeSandbox(plotId, _key) {
+    const key = _key || this.plotId2Key.get(plotId);
+    if (!key) return;
+    const section = this.sections[key];
+    const sandbox = section?.sandboxes?.[plotId];
+    if (sandbox) sandbox.remove();
+    if (section?.sandboxes?.[plotId]) delete section.sandboxes[plotId];
+    this.plotId2Key.delete(plotId);
+  }
+};
+
+// plots/sc/settings/Settings.ts
+var GroupByOptions = ["sample", "plot", "none"];
+
+// plots/sc/view/SCViewRenderer.ts
+var SCViewRenderer = class _SCViewRenderer {
+  static {
+    //On load, show table
+    //Eventually maybe an app dispatch and not a flag
+    this.inUse = true;
+  }
+  constructor(sc) {
+    this.sc = sc;
+    this.dom = sc.dom;
+    this.interactions = sc.interactions;
+    this.dom.controlsDiv.style("padding", "10px");
+  }
+  render(settings, state) {
+    this.renderSelectBtn();
+    this.renderGroupByOptions(settings);
+    this.plotBtns = new PlotButtons(this.interactions, this.dom.plotsBtnsDiv, state.termdbConfig);
+    this.sectionRenderer = new SectionRenderer(this.dom.sectionsDiv, settings.groupBy);
+  }
+  /** Renders the select btn at the top of the page that
+   * show/hides the item table and plot buttons */
+  renderSelectBtn() {
+    const btn = this.dom.controlsDiv.append("button").attr("data-testid", "sjpp-sc-item-table-select-btn").attr("title", "Show/hide sample table and plot buttons").style("border-radius", "20px").style("padding", "5px 10px").style("background-color", "transparent").text("Select sample and plots");
+    const arrowSpan = btn.append("span").style("font-size", "0.8em").style("padding-left", "3px").text("\u25BC");
+    btn.on("click", () => {
+      _SCViewRenderer.inUse = !_SCViewRenderer.inUse;
+      arrowSpan.text(_SCViewRenderer.inUse ? "\u25BC" : "\u25B2");
+      this.dom.tableDiv.style("display", _SCViewRenderer.inUse ? "block" : "none");
+      this.dom.plotsBtnsDiv.style("display", _SCViewRenderer.inUse ? "block" : "none");
+    });
+  }
+  renderGroupByOptions(settings) {
+    this.groupsWrapper = this.dom.controlsDiv.append("div").style("display", "none");
+    this.groupsWrapper.append("span").style("padding", "3px 0px 3px 20px").style("opacity", 0.7).text("Group by:");
+    const optionsDiv = this.groupsWrapper.append("span").style("display", "inline-block");
+    const options = GroupByOptions.map((option) => {
+      return {
+        label: `${option.charAt(0).toUpperCase() + option.slice(1)}`,
+        value: option,
+        checked: settings.groupBy === option
+      };
+    });
+    make_radios({
+      holder: optionsDiv,
+      styles: { display: "inline-block" },
+      options,
+      callback: async (value) => {
+        await this.sc.app.dispatch({
+          type: "plot_edit",
+          id: this.sc.id,
+          config: { settings: { sc: { ...settings, groupBy: value } } }
+        });
+      }
+    });
+  }
+  async update(settings, data, activeSubplots, tableData, subplotManager) {
+    this.sampleTableRenderer = new SampleTableRenderer(this.dom, this.interactions, tableData);
+    this.plotBtns.update(settings, data);
+    await this.sectionRenderer.update(
+      this.sc,
+      activeSubplots.map((s) => s.subplot),
+      settings.sc.groupBy
+    );
+    const activeSandboxes = subplotManager.getSampleSandboxes();
+    this.groupsWrapper.style("display", activeSandboxes.size > 1 ? "inline-block" : "none");
+    this.sampleTableRenderer.updatePlotBtns(activeSandboxes);
+  }
+};
+
+// plots/sc/settings/defaults.ts
+function getDefaultSCAppSettings(overrides = {}, app) {
+  const defaults = {
+    sc: {
+      columns: {
+        sample: "Sample"
+      },
+      item: void 0,
+      groupBy: "sample"
+    },
+    hierCluster: {
+      unit: getGEunit(app.vocabApi),
+      yDendrogramHeight: 0,
+      clusterSamples: false
+    }
+  };
+  return Object.assign(defaults, overrides);
+}
+
+// plots/sc/subplots/DynamicSubplot.ts
+var DynamicSubplot = class _DynamicSubplot {
+  constructor(opts) {
+    this.dom = {};
+    this.type = _DynamicSubplot.type;
+    this.opts = opts;
+    this.app = opts.app;
+    this.parentId = opts?.parentId;
+  }
+  static {
+    this.type = "dynamicSubplot";
+  }
+  async init() {
+    this.opts.holder.app_div.attr("data-testid", "sjpp-sc-subplot-sandbox-" + this.opts.chartType);
+    if (this.opts.chartType == "summary") return;
+    this.dom = {
+      holder: this.opts.holder,
+      viz: this.opts.holder.body.append("div").style("position", "relative"),
+      paneTitleDiv: this.opts.holder.header.append("div").style("position", "relative"),
+      filterDiv: this.opts.holder.header.append("div").style("position", "relative"),
+      errorDiv: this.opts.holder.body.append("div").style("position", "relative")
+    };
+  }
+  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
+    };
+  }
+  async main() {
+    if (!this.components) await this.setComponents();
+  }
+  async setComponents() {
+    const _ = await importPlot(this.opts.chartType);
+    const chartOpts = {
+      app: this.app,
+      id: this.id,
+      parentId: this.parentId
+    };
+    if (this.opts.chartType == "summary") {
+      chartOpts.holder = this.opts.holder;
+      chartOpts.hidePlotFilter = this.opts.isMetaResult;
+    } else {
+      chartOpts.holder = this.dom.viz;
+      chartOpts.header = this.dom.paneTitleDiv;
+    }
+    const promises = {
+      chart: _.componentInit(chartOpts)
+    };
+    if (!this.state.config?.hidePlotFilter && this.opts.isMetaResult && this.opts.chartType != "summary") {
+      promises.filter = filterRxCompInit({
+        app: this.app,
+        vocabApi: this.app.vocabApi,
+        parentId: this.id,
+        holder: this.dom.filterDiv,
+        hideLabel: true,
+        emptyLabel: "+Add new filter",
+        callback: (filter) => {
+          this.app.dispatch({
+            id: this.id,
+            type: "plot_edit",
+            config: { filter }
+          });
+        }
+      });
+    }
+    this.components = await multiInit(promises);
+  }
+  destroy() {
+    const appDiv = this.dom?.holder?.app_div;
+    if (appDiv) {
+      appDiv.selectAll("*").remove();
+      appDiv.remove();
+    }
+    for (const key in this.dom) {
+      delete this.dom[key];
+    }
+  }
+};
+var dynamicSubplotInit = getCompInit(DynamicSubplot);
+
+// plots/sc/subplots/SubplotManager.ts
+var SubplotManager = class {
+  constructor(sc) {
+    this.sc = sc;
+    this.scCompPlots = this.sc.components.plots;
+    this.records = /* @__PURE__ */ new Map();
+  }
+  map(subplots) {
+    const subplotIds = new Set(subplots.map((s) => s.id));
+    for (const compPlotId of Object.keys(this.scCompPlots)) {
+      if (!subplotIds.has(compPlotId)) {
+        this.removeSubplot(compPlotId);
+      }
+    }
+    for (const recordId of Array.from(this.records.keys())) {
+      if (!subplotIds.has(recordId)) this.records.delete(recordId);
+    }
+    for (const subplot of subplots) {
+      this.updateSubplotRecord(subplot);
+    }
+    return this.getActiveSubplotsFlat();
+  }
+  updateSubplotRecord(subplot) {
+    const existing = this.records.get(subplot.id);
+    const sampleId = this.getSampleId(subplot);
+    const isMeta = sampleId && this.sc.viewModel.metaResultIds.has(sampleId) || false;
+    this.records.set(subplot.id, {
+      plotId: subplot.id,
+      sampleId,
+      plotName: this.getPlotName(subplot),
+      sectionKey: existing?.sectionKey,
+      subplot,
+      sandboxDiv: existing?.sandboxDiv,
+      isMetaResult: isMeta
+    });
+  }
+  removeSubplot(subplotId) {
+    if (this.scCompPlots[subplotId]) this.scCompPlots[subplotId].destroy();
+    delete this.scCompPlots[subplotId];
+    this.records.delete(subplotId);
+  }
+  async initSubplotSandbox(sandboxHolder, subplot, initOpts = {}) {
+    const sandbox = newSandboxDiv(sandboxHolder, {
+      close: () => {
+        this.removeSubplot(subplot.id);
+        this.sc.app.dispatch({
+          type: "plot_delete",
+          id: subplot.id,
+          parentId: this.sc.id
+        });
+        if (initOpts.onClose) initOpts.onClose();
+      },
+      plotId: subplot.id
+    });
+    const subplotOpts = Object.assign({}, subplot, {
+      app: this.sc.app,
+      parentId: this.sc.id,
+      id: subplot.id,
+      holder: sandbox,
+      isMetaResult: this.records.get(subplot.id)?.isMetaResult || false
+    });
+    this.scCompPlots[subplot.id] = await dynamicSubplotInit(subplotOpts);
+    this.setSandbox(subplot.id, sandbox.app_div);
+    if (initOpts.sectionKey) this.setSectionKey(subplot.id, initOpts.sectionKey);
+    return sandbox.app_div;
+  }
+  setSandbox(plotId, sandboxDiv) {
+    const record = this.records.get(plotId);
+    if (!record) return;
+    record.sandboxDiv = sandboxDiv;
+    this.records.set(plotId, record);
+  }
+  setSectionKey(plotId, sectionKey) {
+    const record = this.records.get(plotId);
+    if (!record) return;
+    record.sectionKey = sectionKey;
+    this.records.set(plotId, record);
+  }
+  getActiveSubplotsFlat() {
+    return Array.from(this.records.values());
+  }
+  getSampleId(subplot) {
+    return subplot.sample?.sID || subplot.singleCellPlot?.sample?.sID || subplot.term?.term?.sample?.sID;
+  }
+  getPlotName(subplot) {
+    const nameOverrides = /* @__PURE__ */ new Map([
+      ["GeneExpInput", "Gene expression"],
+      ["imagePlot", subplot?.imgDir?.label || "Image"],
+      ["dictionary", "Summary"],
+      ["summary", "Summary"]
+    ]);
+    let plotName = subplot?.plotName || nameOverrides.get(subplot?.chartType) || subplot?.singleCellPlot?.name;
+    if (!plotName) {
+      if (subplot?.term?.term?.plot) plotName = subplot.term.term.plot;
+      else plotName = subplot.chartType || "Plot";
+    }
+    return plotName;
+  }
+  getSampleSandboxes(activeSubplots = this.getActiveSubplotsFlat()) {
+    const sandboxes = /* @__PURE__ */ new Map();
+    for (const active of activeSubplots) {
+      if (!active.sampleId || !active.sandboxDiv) continue;
+      if (!sandboxes.has(active.sampleId)) sandboxes.set(active.sampleId, []);
+      sandboxes.get(active.sampleId).push({ plotId: active.plotId, div: active.sandboxDiv, plotName: active.plotName });
+    }
+    return sandboxes;
+  }
+};
+
+// plots/sc/SC.ts
+var SCViewer = class _SCViewer extends PlotBase {
+  static {
+    this.type = "sc";
+  }
+  constructor(opts, api) {
+    super(opts, api);
+    this.type = _SCViewer.type;
+    this.components = {
+      plots: {}
+    };
+    const div = opts.holder.classed("sjpp-sc-main", true).append("div").style("padding", "5px").style("display", "inline-block").style("vertical-align", "top");
+    this.dom = {
+      div,
+      loading: opts.holder.append("div").attr("class", "sjpp-sc-main-loading").attr("data-testid", "sjpp-sc-main-loading").style("position", "absolute").style("top", "0").style("left", "0").style("width", "100%").style("height", "100%").style("background-color", "rgba(255, 255, 255, 0.95)").style("text-align", "center"),
+      controlsDiv: div.append("div").attr("id", "sjpp-sc-controls-btn"),
+      tableDiv: div.append("div").attr("id", "sjpp-sc-item-table"),
+      plotsBtnsDiv: div.append("div").attr("id", "sjpp-sc-plot-buttons").style("display", "none"),
+      sectionsDiv: div.append("div").attr("id", "sjpp-sc-sections")
+    };
+    if (opts.header) formatHeaderText({
+      header: opts.header,
+      chartType: "SINGLE CELL"
+    });
+  }
+  getState(appState) {
+    const config = appState.plots.find((p) => p.id === this.id);
+    if (!config) {
+      throw new Error(
+        `No plot with id='${this.id}' found. Did you set this.id before this.api = getComponentApi(this)?`
+      );
+    }
+    const termfilter = getCombinedTermFilter(appState, config.filter);
+    return {
+      config,
+      subplots: appState.plots.filter((p) => p.parentId === this.id),
+      termfilter,
+      termdbConfig: appState.termdbConfig,
+      vocab: appState.vocab
+    };
+  }
+  async init(appState) {
+    const state = this.getState(appState);
+    const dsScSamples = state.termdbConfig.queries?.singleCell?.samples;
+    this.model = new SCModel(this);
+    try {
+      this.itemColumns = await this.model.getColumnLabels(dsScSamples);
+    } catch (e) {
+      if (e instanceof Error) console.error(`${e.message || e} [SC init()]`);
+      else if (e.stack) console.log(e.stack);
+      throw new Error(e.message || e);
+    }
+    this.viewModel = new SCViewModel(this.app, this.itemColumns);
+    this.interactions = new SCInteractions(this);
+    this.subplotManager = new SubplotManager(this);
+    this.view = new SCViewRenderer(this);
+    this.view.render(state.config.settings.sc, state);
+  }
+  async main() {
+    if (!this.model) throw new Error(`Model not initialized`);
+    if (!this.viewModel) throw new Error(`ViewModel not initialized`);
+    if (!this.view) throw new Error(`View not initialized`);
+    if (!this.interactions) throw new Error(`Interactions not initialized`);
+    const state = structuredClone(this.state);
+    const config = state.config;
+    super.toggleLoadingDiv();
+    let data;
+    try {
+      const allSampleData = await this.model.getAllSampleData(state);
+      if (!allSampleData || allSampleData.error) {
+        super.toggleLoadingDiv("none");
+        super.printError(allSampleData?.error || "No samples found for this dataset");
+        return;
+      }
+      this.items = allSampleData.samples;
+      this.viewModel.processData(config, allSampleData.samples);
+      if (config.settings?.sc?.item) {
+        const sampleData = await this.model.getSampleData();
+        if (!sampleData || sampleData.error) {
+          super.toggleLoadingDiv("none");
+          super.printError(sampleData?.error || "No data found for this sample");
+          return;
+        }
+        const hasSpatial = await this.model.hasSpatialImage(config.settings.sc.item.sID);
+        data = this.viewModel.formatPlotsData(sampleData, hasSpatial);
+      }
+    } catch (e) {
+      if (e instanceof Error) console.error(`${e.message || e} [SC main()]`);
+      else if (e.stack) console.log(e.stack);
+      super.toggleLoadingDiv("none");
+      super.printError(e.message || e);
+      return;
+    }
+    const activeSubplots = this.subplotManager.map(state.subplots);
+    await this.view.update(config.settings, data, activeSubplots, this.viewModel.tableData, this.subplotManager);
+    super.toggleLoadingDiv("none");
+  }
+};
+var SCInit = getCompInit(SCViewer);
+var componentInit = SCInit;
+function getPlotConfig(opts, app) {
+  const config = {
+    chartType: "sc",
+    settings: getDefaultSCAppSettings(opts.overrides, app)
+  };
+  return copyMerge(config, opts);
+}
+export {
+  SCInit,
+  SCViewer,
+  componentInit,
+  getPlotConfig
+};
+//# sourceMappingURL=SC-FPXVXBXF.js.map