@sjcrh/proteinpaint-client 2.185.0 → 2.186.0

package/dist/SC-BRC3J2O4.js

@@ -1,797 +0,0 @@
-import {
-  PlotBase,
-  digestMessage,
-  getGEunit,
-  make_radios,
-  newSandboxDiv,
-  renderTable
-} from "./chunk-YWUVCXFS.js";
-import "./chunk-HJ6L54YS.js";
-import {
-  importPlot
-} from "./chunk-3QBZ2Y77.js";
-import {
-  Menu
-} from "./chunk-HYOEWQ5P.js";
-import "./chunk-FN5XPUPH.js";
-import "./chunk-G6O3URDN.js";
-import "./chunk-LSEFWW72.js";
-import "./chunk-KWM6B3NL.js";
-import "./chunk-UCLS2SVB.js";
-import {
-  dofetch3
-} from "./chunk-6ZCHECOT.js";
-import {
-  copyMerge,
-  getCompInit
-} from "./chunk-MVTCBVSX.js";
-import "./chunk-2K5DSRBJ.js";
-import "./chunk-X4NI4JLQ.js";
-import "./chunk-L4QG7XZE.js";
-import "./chunk-DQC5FFGV.js";
-import "./chunk-UWYCEYML.js";
-import "./chunk-7UHUOC6F.js";
-import "./chunk-ZYY54HBU.js";
-import {
-  SINGLECELL_CELLTYPE,
-  SINGLECELL_GENE_EXPRESSION
-} from "./chunk-EGWVYY7K.js";
-import {
-  TermTypeGroups
-} from "./chunk-AMYSEKPF.js";
-import "./chunk-TV74I3Y5.js";
-import "./chunk-KSGA62R2.js";
-import "./chunk-LOZEKOES.js";
-import "./chunk-TOU7EVFQ.js";
-import "./chunk-OAWQ6LOO.js";
-import "./chunk-KYBIQBXE.js";
-import "./chunk-I6Y4O3RR.js";
-import "./chunk-OMR2DT66.js";
-import "./chunk-HFNDKYVF.js";
-
-// plots/sc/model/SCModel.ts
-var SCModel = class {
-  constructor(app, id) {
-    this.app = app;
-    this.id = id;
-    this.state = this.app.getState();
-  }
-  /********** Single Cell SAMPLES for rendering the table *********/
-  //The table data does not update
-  //Should only need to init once
-  async getSampleData() {
-    const body = this.getSampleRequestOpts();
-    return await dofetch3("termdb/singlecellSamples", { body });
-  }
-  //May involve more complicated logic later
-  getSampleRequestOpts() {
-    return {
-      genome: this.state.vocab.genome,
-      dslabel: this.state.vocab.dslabel,
-      filter0: this.state.termfilter.filter0 || null
-    };
-  }
-  //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 *********/
-  async getData() {
-    const body = this.getDataRequestOpts();
-    if (!body) return;
-    return await dofetch3("termdb/singlecellData", { body });
-  }
-  getDataRequestOpts() {
-    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 = singleCellTermdbConfig.data.plots.map((p) => p.name);
-    return {
-      genome: this.state.vocab.genome,
-      dslabel: this.state.vocab.dslabel,
-      checkPlotAvailability: true,
-      // only return available plot names, but not actual plot data
-      plots,
-      sample: {
-        eID: config.settings.sc.item.eID,
-        sID: config.settings.sc.item.sID
-      }
-    };
-  }
-};
-
-// plots/sc/viewModel/SCViewModel.ts
-var SCViewModel = class {
-  constructor(app, config, items, sampleColumns) {
-    this.app = app;
-    this.state = this.app.getState();
-    const [rows, columns] = this.getTabelData(config, items, 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
-    };
-  }
-  getTabelData(plotConfig, items, sampleColumns) {
-    const rows = [];
-    const hasExperiments = items.some((i) => i.experiments);
-    const columns = [{ label: plotConfig.settings.sc.columns.sample, sortable: true }];
-    if (hasExperiments) columns.push({ label: "Sample", sortable: true });
-    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 (hasExperiments)
-        for (const exp of item.experiments) {
-          const row = [{ value: item.sample, __experimentID: exp.experimentID }];
-          row.push({ value: exp.sampleName });
-          for (const col of sampleColumns || []) {
-            row.push({ value: item[col.termid] });
-          }
-          if (this.state.vocab.dslabel == "GDC")
-            row.push({ value: exp.experimentID, url: `https://portal.gdc.cancer.gov/files/${exp.experimentID}` });
-          else row.push({ value: exp.experimentID });
-          rows.push(row);
-        }
-      else {
-        const row = [{ value: item.sample }];
-        for (const col of sampleColumns || []) {
-          row.push({ value: item[col.termid] });
-        }
-        rows.push(row);
-      }
-    }
-    return [rows, columns];
-  }
-};
-
-// plots/sc/interactions/SCInteractions.ts
-var SCInteractions = class {
-  constructor(app, dom, id, getState) {
-    this.app = app;
-    this.dom = dom;
-    this.id = id;
-    this.getState = getState();
-  }
-  /** Used in the gene search menu shown on click from a plot btn
-   * Add the plot to the state.plots array with .parentId. Adding
-   * .parentId prevents the plot from launching in a new sandbox.
-   * 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 item in the plot settings */
-  async updateItem(item) {
-    await this.app.dispatch({
-      type: "plot_edit",
-      id: this.id,
-      config: { settings: { sc: { item } } }
-    });
-  }
-  toggleLoading(on) {
-    if (on) {
-      this.dom.loading.selectAll("*").remove();
-      this.dom.loading.style("display", "block").append("div").style("position", "relative").style("top", "50%").append("span").attr("class", "sjpp-spinner");
-      this.dom.loading.style("display", "");
-    } else {
-      this.dom.loading.selectAll(".sjpp-spinner").remove();
-      this.dom.loading.style("display", "none");
-    }
-  }
-};
-
-// plots/sc/view/SampleTableRenderer.ts
-var SampleTableRenderer = class {
-  constructor(dom, interactions, tableData) {
-    this.dom = dom;
-    this.interactions = interactions;
-    this.renderSamplesTable(tableData);
-  }
-  /** Users select one item at a time to render the plot buttons
-   * to init() plots in the dashboard.*/
-  renderSamplesTable(tableData) {
-    renderTable({
-      rows: tableData.rows,
-      columns: tableData.columns,
-      div: this.dom.tableDiv,
-      singleMode: true,
-      maxWidth: tableData.columns.length > 3 ? "98vw" : "40vw",
-      maxHeight: "30vh",
-      header: {
-        allowSort: true,
-        style: { "text-transform": "capitalize" }
-      },
-      striped: true,
-      selectedRows: tableData.selectedRows,
-      noButtonCallback: (index) => {
-        const item = {};
-        tableData.rows[index].forEach((r, idx) => {
-          if (!r.value) return;
-          let key = tableData.columns[idx].label.toLowerCase();
-          key = key === "sample" ? "sID" : key === "experiment" ? "eID" : key;
-          item[key] = r.value;
-        });
-        if (!item.sID) throw new Error("Selected item must have sID property");
-        this.interactions.updateItem(item);
-        this.dom.plotsBtnsDiv.style("display", "block");
-      }
-    });
-  }
-};
-
-// plots/sc/view/PlotButtons.ts
-var PlotButtons = class {
-  constructor(interactions, holder) {
-    holder.style("padding", "10px");
-    const promptDiv = holder.append("div").style("padding", "10px 0").text("Select data from");
-    this.plotBtnsDom = {
-      promptDiv,
-      selectPrompt: promptDiv.append("span"),
-      btnsDiv: holder.append("div"),
-      tip: new Menu({ padding: "" })
-    };
-    this.interactions = interactions;
-    const state = this.interactions.getState;
-    this.scctTerms = state.termdbConfig?.termType2terms?.[TermTypeGroups.SINGLECELL_CELLTYPE];
-    this.scTermdbConfig = state.termdbConfig.queries.singleCell;
-  }
-  update(settings, data) {
-    const item = settings.sc.item;
-    this.plotBtnsDom.promptDiv.style("display", !item ? "none" : "block");
-    if (!item) return;
-    if (data != null && data.plots) this.data = data;
-    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())).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 = [];
-    const availablePlots = new Set(this.data?.plots?.map((p) => p.name));
-    for (const plot of this.scTermdbConfig?.data?.plots || []) {
-      btns.push({
-        label: plot.name,
-        isVisible: () => availablePlots.has(plot.name),
-        getPlotConfig: async () => {
-          return await this.getSingleCellConfig(plot.name);
-        }
-      });
-    }
-    btns.push(
-      {
-        label: "Summary",
-        isVisible: () => true,
-        getPlotConfig: () => {
-          const sample = this.item;
-          return {
-            chartType: "dictionary",
-            sample,
-            spawnConfig: {
-              parentId: this.interactions.id,
-              hidePlotFilter: true,
-              headerText: `Sample: ${this.item.sID}`,
-              sample
-            },
-            tree: {
-              usecase: {
-                target: "dictionary",
-                specialCase: {
-                  type: "singleCell",
-                  config: { sample }
-                }
-              }
-            }
-          };
-        }
-      },
-      {
-        label: "Gene expression",
-        isVisible: () => this.scTermdbConfig?.geneExpression,
-        getPlotConfig: () => {
-          const sample = this.item;
-          const headerText = `Sample: ${this.item.sID}`;
-          return {
-            chartType: "GeneExpInput",
-            termType: SINGLECELL_GENE_EXPRESSION,
-            headerText,
-            termProperties: { sample },
-            sample,
-            spawnConfig: {
-              parentId: this.interactions.id,
-              hidePlotFilter: true,
-              headerText
-            }
-          };
-        }
-      },
-      {
-        label: "Differential expression",
-        isVisible: () => this.scTermdbConfig?.DEgenes,
-        open: this.termDropdownMenu,
-        getPlotConfig: (value) => {
-          return {
-            chartType: "differentialAnalysis",
-            termType: SINGLECELL_CELLTYPE,
-            categoryName: `${value}`,
-            headerText: `Sample: ${this.item.sID} ${this.scTermdbConfig.DEgenes.termId} ${value}`,
-            termId: this.scTermdbConfig.DEgenes.termId,
-            sample: this.item
-          };
-        }
-      }
-    );
-    return btns;
-  }
-  //********** Btn Menus **********/
-  termDropdownMenu(plot, self) {
-    self.plotBtnsDom.tip.clear();
-    const _plot = self.data.plots[0];
-    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(_plot.colorBy, "g");
-    _plot.clusters.unshift(`Select ${self.scTermdbConfig.DEgenes.termId}...`);
-    for (const cluster of _plot.clusters) {
-      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 config = {
-      chartType: "sampleScatter",
-      name: `Sample: ${this.item.sID}`,
-      sample,
-      singleCellPlot: {
-        name: plotName,
-        sample
-      }
-    };
-    if (plot.colorColumns?.[0]) {
-      config.colorTW = await this.makeScctTW(sample, plot);
-    }
-    return config;
-  }
-  // Quick fix. Eventually use the handler to get the proper term from the termdbConfig
-  async makeScctTW(item, plot) {
-    const colorColName = plot.colorColumns[0].name;
-    const savedTerm = this.scctTerms?.find((t) => t.name == colorColName && t.plot == plot.name);
-    if (!savedTerm)
-      throw new Error(
-        `No term found for colorColumn=${colorColName} in .termType2terms.[TermTypeGroups.SINGLECELL_CELLTYPE] 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.holder.selectAll("*").remove();
-      this.sections = {};
-      this.plotId2Key = /* @__PURE__ */ new Map();
-      for (const subplotId of Object.keys(sc.components.plots)) {
-        sc.removeComponent(subplotId);
-      }
-    }
-    const activeSubplots = new Set(subplots.map((s) => s.id));
-    for (const plotId of Object.keys(sc.components.plots)) {
-      if (!activeSubplots.has(plotId)) {
-        this.removeSandbox(plotId, sc);
-      }
-    }
-    for (const subplot of subplots) {
-      const key = groupBy == "none" ? "none" : groupBy == "sample" ? this.getSampleId(subplot) : this.getPlotName(subplot);
-      if (!key) continue;
-      if (!this.sections[key]) this.initSection(key, sc);
-      if (!this.sections[key].sandboxes[subplot.id]) {
-        this.plotId2Key.set(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);
-      }
-    }
-  }
-  /** 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;
-  }
-  getPlotName(subplot) {
-    let plotName = subplot?.plotName || subplot?.singleCellPlot?.name || subplot?.term?.term?.plot;
-    if (!plotName) {
-      if (subplot.chartType === "dictionary") plotName = "Summary";
-      if (subplot.chartType === "summary") plotName = "Summary";
-      if (subplot.chartType === "GeneExpInput") plotName = "Gene expression";
-    }
-    return plotName;
-  }
-  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 "";
-    if (this.groupBy === "plot") return key;
-    const caseText = item?.sample && item.sample !== key ? `Case: ${item.sample}` : "";
-    const itemText = `Sample: ${key}`;
-    const projectText = item?.["project id"] ? `Project: ${item["project id"]}` : "";
-    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 sandbox = newSandboxDiv(sandboxHolder, {
-      close: () => {
-        this.removeSandbox(subplot.id, sc);
-        sc.app.dispatch({
-          type: "plot_delete",
-          id: subplot.id,
-          parentId: sc.id
-        });
-      },
-      plotId: subplot.id
-    });
-    const opts = Object.assign({}, subplot, {
-      app: sc.app,
-      parentId: sc.id,
-      id: subplot.id
-    });
-    if (subplot.chartType == "summary") {
-      opts.holder = sandbox;
-    } else {
-      opts.holder = sandbox.body;
-      opts.header = sandbox.header;
-    }
-    await sc.initPlotComponent(subplot.id, opts);
-    this.sections[key].sandboxes[subplot.id] = sandbox.app_div;
-  }
-  removeSection(key, sc) {
-    const subactions = [];
-    for (const plotId of Object.keys(this.sections[key].sandboxes || {})) {
-      this.removeSandbox(plotId, sc, 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, sc, _key) {
-    sc.removeComponent(plotId);
-    const key = _key || this.plotId2Key.get(plotId);
-    if (!key) return;
-    this.sections[key].sandboxes[plotId].remove();
-    delete this.sections[key].sandboxes[plotId];
-    this.plotId2Key.delete(plotId);
-  }
-};
-
-// plots/sc/settings/Settings.ts
-var GroupByOptions = ["none", "sample", "plot"];
-
-// 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, groupBy) {
-    this.sc = sc;
-    this.dom = sc.dom;
-    this.interactions = sc.interactions;
-    this.plotBtns = new PlotButtons(this.interactions, this.dom.plotsBtnsDiv);
-    this.sectionRenderer = new SectionRenderer(this.dom.sectionsDiv, groupBy);
-  }
-  render(tableData, settings) {
-    this.renderSelectBtn();
-    this.renderGroupByOptions(settings);
-    new SampleTableRenderer(this.dom, this.interactions, tableData);
-    this.dom.plotsBtnsDiv.style("display", "none");
-  }
-  /** Renders the select btn at the top of the page that
-   * show/hides the item table and plot buttons */
-  renderSelectBtn() {
-    this.dom.controlsDiv.style("padding", "10px");
-    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.dom.controlsDiv.append("span").style("padding", "3px 0px 3px 20px").style("opacity", 0.7).text("Group plots by:");
-    const optionsDiv = this.dom.controlsDiv.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, subplots) {
-    this.plotBtns.update(settings, data);
-    await this.sectionRenderer.update(this.sc, subplots, settings.sc.groupBy);
-  }
-};
-
-// plots/sc/settings/defaults.ts
-function getDefaultSCAppSettings(overrides = {}, app) {
-  const defaults = {
-    sc: {
-      columns: {
-        // TODO: Implement ds specific column name
-        sample: "Sample"
-      },
-      item: void 0,
-      groupBy: "sample"
-    },
-    hierCluster: {
-      unit: getGEunit(app.vocabApi),
-      yDendrogramHeight: 0,
-      clusterSamples: false
-    }
-  };
-  return Object.assign(defaults, overrides);
-}
-
-// plots/sc/viewModel/plotData.ts
-function formatPlotData(_plots) {
-  const plots = structuredClone(_plots);
-  for (const plot of plots) {
-    const expCells = plot.expCells.sort((a, b) => a.geneExp - b.geneExp);
-    plot.cells = [...plot.noExpCells, ...expCells];
-    const clusters = new Set(plot.cells.map((c) => c.category));
-    plot.clusters = Array.from(clusters).sort((a, b) => {
-      const num1 = parseInt(a.split(" ")[1]);
-      const num2 = parseInt(b.split(" ")[1]);
-      return num1 - num2;
-    });
-  }
-  return plots;
-}
-
-// 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) opts.header.html(`SINGLE CELL`).style("font-size", "0.9em");
-  }
-  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)?`
-      );
-    }
-    return {
-      config,
-      subplots: appState.plots.filter((p) => p.parentId === this.id),
-      termfilter: appState.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.app, this.id);
-    try {
-      const response = await this.model.getSampleData();
-      if (response.error || !response.samples || !response.samples.length) {
-        this.app.printError("No samples found for this dataset");
-        return;
-      }
-      this.items = response.samples;
-      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.interactions = new SCInteractions(this.app, this.dom, this.id, () => this.getState(this.app.getState()));
-    this.viewModel = new SCViewModel(this.app, state.config, this.items, this.itemColumns);
-    this.view = new SCViewRenderer(this, state.config.settings.sc.groupBy);
-    this.view.render(this.viewModel.tableData, state.config.settings.sc);
-  }
-  async main() {
-    const state = structuredClone(this.state);
-    const config = state.config;
-    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`);
-    this.interactions.toggleLoading(true);
-    let data = null;
-    if (config.settings.sc.item) {
-      try {
-        data = await this.model.getData();
-        if (data.error || !data.plots || !data.plots.length) {
-          this.interactions.toggleLoading(false);
-          this.app.printError(data.error);
-          return;
-        }
-      } catch (e) {
-        this.interactions.toggleLoading(false);
-        if (e instanceof Error) console.error(`${e.message || e} [SC main()]`);
-        else if (e.stack) console.log(e.stack);
-        throw new Error(e.message || e);
-      }
-      data.plots = formatPlotData(data.plots);
-    }
-    await this.view.update(config.settings, data, state.subplots);
-    this.interactions.toggleLoading(false);
-  }
-  async initPlotComponent(subplotId, opts) {
-    const { componentInit: componentInit2 } = await importPlot(opts.chartType);
-    this.components.plots[subplotId] = await componentInit2(opts);
-  }
-  removeComponent(subplotId) {
-    this.components.plots[subplotId].destroy();
-    delete this.components.plots[subplotId];
-  }
-};
-var SCInit = getCompInit(SCViewer);
-var componentInit = SCInit;
-function getPlotConfig(opts, app) {
-  const config = {
-    chartType: "sc",
-    hidePlotFilter: true,
-    settings: getDefaultSCAppSettings(opts.overrides, app)
-  };
-  return copyMerge(config, opts);
-}
-export {
-  SCInit,
-  SCViewer,
-  componentInit,
-  getPlotConfig
-};
-//# sourceMappingURL=SC-BRC3J2O4.js.map