@sjcrh/proteinpaint-client 2.206.1 → 2.207.0

package/dist/Wsi-SJC56PRR.js

@@ -0,0 +1,609 @@
+import {
+  Map_default,
+  Tile_default,
+  View_default,
+  Zoomify_default
+} from "./chunk-WTAPOH2W.js";
+import {
+  PlotBase,
+  Tabs,
+  controlsInit,
+  renderTable
+} from "./chunk-NQDF3U2C.js";
+import "./chunk-HJ6L54YS.js";
+import "./chunk-KV4W2ACA.js";
+import "./chunk-CCYVGZGI.js";
+import "./chunk-ELJX3QIQ.js";
+import "./chunk-N7DVQTPC.js";
+import "./chunk-EEB5VE2A.js";
+import "./chunk-6RRZRISL.js";
+import "./chunk-2KM4PRQM.js";
+import {
+  dofetch3
+} from "./chunk-GRVO7RW4.js";
+import "./chunk-7CJKL3LK.js";
+import "./chunk-HZ3TCGBK.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/w2/model/Model.ts
+var Model = class {
+  constructor(genome, dslabel) {
+    this.genome = genome;
+    this.dslabel = dslabel;
+  }
+  // both requests address the dataset
+  /** Every sample in the dataset that has at least one image on disk (one
+   subfolder per sample under either w2 root), with image counts. */
+  async getData() {
+    return await dofetch3("termdb/wsiBySample", {
+      body: { genome: this.genome, dslabel: this.dslabel }
+      // no sample_id = list samples
+    });
+  }
+  /** One sample's images (WsiImage | SpatialImage), enumerated from the
+   sample's subfolders in both w2 roots. */
+  async getImages(sample_id) {
+    return await dofetch3("termdb/wsiBySample", {
+      body: { genome: this.genome, dslabel: this.dslabel, sample_id }
+      // sample_id = list its images
+    });
+  }
+};
+
+// plots/w2/viewModel/ViewModel.ts
+var ViewModel = class {
+  // built once in the constructor, read by View
+  constructor(samples, settings) {
+    this.viewData = {
+      columns: [{ label: "Sample" }, { label: "Images" }],
+      // two-column table
+      rows: samples.map((s) => [{ value: s.sampleId }, { value: String(s.count) }]),
+      // one row per sample
+      selectedSample: samples[settings.selectedSampleIndex]
+      // undefined when index is -1
+    };
+  }
+};
+
+// plots/w2/view/View.ts
+var View = class {
+  constructor(dom, viewData, images, settings, interactions, vocab) {
+    this.dom = dom;
+    this.viewData = viewData;
+    this.images = images;
+    this.settings = settings;
+    this.interactions = interactions;
+    this.vocab = vocab;
+  }
+  async render() {
+    this.renderSampleTable();
+    await this.renderViewer();
+  }
+  renderSampleTable() {
+    this.dom.table.selectAll("*").remove();
+    renderTable({
+      div: this.dom.table,
+      // mount point
+      columns: this.viewData.columns,
+      // Sample | Images
+      rows: this.viewData.rows,
+      // one row per sample with images
+      singleMode: true,
+      // radio buttons: one sample viewed at a time
+      selectedRows: this.settings.selectedSampleIndex != -1 ? [this.settings.selectedSampleIndex] : [],
+      noButtonCallback: (index) => this.interactions.selectSample(index),
+      // row click = select sample
+      resize: true,
+      // user-resizable table
+      striped: true,
+      // alternating row shading
+      maxHeight: "30vh",
+      // table scrolls; the viewer keeps the space below
+      header: { style: { "text-transform": "capitalize" } }
+      // 'sample' -> 'Sample'
+    });
+  }
+  async renderViewer() {
+    const holder = this.dom.viewer;
+    holder.selectAll("*").remove();
+    const sample = this.viewData.selectedSample;
+    const selected = this.settings.selectedImageIndex;
+    const image = this.images[selected] ?? this.images[0];
+    if (!sample || !image) return;
+    const imageName = (f) => f.split("/").slice(-2)[0] || f;
+    new Tabs({
+      holder: holder.append("div"),
+      // tab strip sits above the map
+      tabsPosition: "horizontal",
+      tabs: this.images.map((img, i) => ({
+        label: imageName(img.fileName),
+        // e.g. 'image1'
+        active: i == (this.images[selected] ? selected : 0),
+        // highlight the shown image
+        callback: () => this.interactions.selectImage(i)
+        // dispatch -> re-render with image i
+      }))
+    }).main();
+    const params = `wsimage=${encodeURIComponent(image.fileName)}&dslabel=${this.vocab.dslabel}&genome=${this.vocab.genome}&sample_id=${encodeURIComponent(sample.sampleId)}&imageType=${image.type}`;
+    if (image.type == "spatial") {
+      const s = this.settings;
+      const genes = s.geneExpression ?? image.geneExpression;
+      const direct = await import("./wsi.direct-FNCUUBEJ.js");
+      await direct.init(
+        {
+          slideQuery: params,
+          // addresses the slide through the dataset (no direct-path gate)
+          label: image.fileName,
+          // display name in the info line
+          spatialData: image.spatialData,
+          // the consolidated h5ad, source of every overlay
+          hideCellStrokes: !s.showCellBoundaries,
+          // polygons without their green outlines
+          hideNucleusStrokes: !s.showNucleusBoundaries,
+          // skip the nucleus overlay entirely
+          showCellTypes: s.showCellTypes,
+          // fill cells by their cell_type annotation
+          cellTypeFilter: s.cellTypeFilter ?? void 0,
+          // 'Types shown' dropdowns; []/null = all
+          geneExpression: s.spatialMode == "gene_groups" ? void 0 : genes,
+          // one overlay per gene
+          geneGroups: s.spatialMode == "gene_groups" ? genes : void 0,
+          // or one summed overlay
+          hideExpressionFills: !s.showGeneExpression,
+          // checkbox off = hover counts only, no fills
+          annotationLevel: s.annotationLevel ?? image.annotationLevel,
+          // burger overrides dataset
+          width: "100%",
+          // fill the sandbox
+          height: this.settings.viewerHeight
+          // e.g. 70vh
+        },
+        holder
+      );
+      return;
+    }
+    const meta = await dofetch3(`wsitiles/meta?${params}`);
+    if (!meta || meta.error || meta.status === "error") {
+      this.dom.error.text(`Error loading ${image.fileName}: ${meta?.error || "failed to load slide metadata"}`);
+      return;
+    }
+    const [w, h] = meta.slide_dimensions;
+    const host = (sessionStorage.getItem("hostURL") || window.testHost || "").replace(/\/+$/, "");
+    const source = new Zoomify_default({
+      // {z}/{x}/{y} hit wsitiles/tile; the unused {TileGroup} token only satisfies
+      // OpenLayers' requirement that a {TileGroup}/{tileIndex} placeholder be present.
+      // v=<slide mtime>: tiles are served immutable, so a regenerated slide must
+      // change the URL to bust the browser cache
+      url: `${host}/wsitiles/tile/{z}/{x}/{y}?${params}&v=${meta.version || 0}&_={TileGroup}`,
+      size: [w, h],
+      // OL derives the tier count from this, same math as wsi_tile.py
+      crossOrigin: "anonymous",
+      // tiles come from the API origin, not the page's
+      zDirection: -1
+      // pick the sharper tier when between two zoom levels
+    });
+    const grid = source.getTileGrid();
+    const extent = grid.getExtent();
+    const mapDiv = holder.append("div").style("width", "100%").style("height", this.settings.viewerHeight);
+    const map = new Map_default({
+      target: mapDiv.node(),
+      // mount the map into the plot's viewer div
+      layers: [new Tile_default({ source })],
+      // OL fetches+mosaics tiles as the user pans/zooms
+      view: new View_default({ resolutions: grid.getResolutions(), extent })
+      // camera locked to the pyramid
+    });
+    map.getView().fit(extent);
+  }
+};
+
+// plots/w2/interactions/WsiInteractions.ts
+var WsiInteractions = class {
+  constructor(app, id) {
+    this.app = app;
+    this.id = id;
+  }
+  // rx app + this plot's id, for dispatching
+  /** a sample row was picked in the table; image selection resets to its first image */
+  selectSample(index) {
+    this.app.dispatch({
+      type: "plot_edit",
+      id: this.id,
+      config: { settings: { wsi: { selectedSampleIndex: index, selectedImageIndex: 0 } } }
+    });
+  }
+  /** an image tab was picked for the selected sample */
+  selectImage(index) {
+    this.app.dispatch({
+      type: "plot_edit",
+      id: this.id,
+      config: { settings: { wsi: { selectedImageIndex: index } } }
+    });
+  }
+};
+
+// plots/w2/Wsi.ts
+var Wsi = class _Wsi extends PlotBase {
+  constructor(opts, api) {
+    super(opts, api);
+    // created in init()
+    /** showCellTypes of the previous render, to tell which exclusive fill
+     checkbox was just toggled when both end up checked */
+    this.prevShowCellTypes = false;
+    /** gene names available in the current image's expression h5, cached per file */
+    this.geneNames = [];
+    /** cell types available in the current image's annotations CSV, cached per file */
+    this.cellTypeNames = [];
+    this.type = _Wsi.type;
+    const holder = opts.holder.classed("sjpp-wsi-main", true);
+    const div = holder.append("div").style("padding", "5px");
+    this.dom = {
+      div,
+      // burger menu for spatial viewer settings; hidden until a spatial image is shown
+      controls: div.append("div").attr("id", "sjpp-wsi-controls").style("display", "none"),
+      error: div.append("div").attr("id", "sjpp-wsi-error").style("opacity", 0.75),
+      // inline errors
+      table: div.append("div").attr("id", "sjpp-wsi-table"),
+      // sample table mount
+      viewer: div.append("div").attr("id", "sjpp-wsi-viewer")
+      // tabs + map mount
+    };
+    if (opts.header)
+      this.dom.header = opts.header.text("WHOLE SLIDE IMAGES").style("font-size", "0.7em").style("opacity", 0.6);
+  }
+  static {
+    this.type = "wsi";
+  }
+  /** the app-state slice this plot reacts to */
+  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 {
+      vocab: appState.vocab,
+      // genome + dslabel for server requests
+      config
+      // the plot's own settings
+    };
+  }
+  /** rx lifecycle: one-time setup before the first main() */
+  async init() {
+    this.interactions = new WsiInteractions(this.app, this.id);
+  }
+  /** rx lifecycle: re-renders the whole plot on every relevant state change */
+  async main() {
+    const config = structuredClone(this.state.config);
+    if (config.childType != this.type && config.chartType != this.type) return;
+    if (!this.interactions) throw "Interactions not initialized [wsi main()]";
+    const settings = config.settings.wsi;
+    if (settings.showCellTypes && settings.showGeneExpression) {
+      const off = this.prevShowCellTypes ? "showCellTypes" : "showGeneExpression";
+      this.app.dispatch({ type: "plot_edit", id: this.id, config: { settings: { wsi: { [off]: false } } } });
+      return;
+    }
+    this.prevShowCellTypes = settings.showCellTypes;
+    this.dom.error.text("");
+    const model = new Model(this.state.vocab.genome, this.state.vocab.dslabel);
+    const data = await model.getData();
+    if (!data || data.error || !data.samples?.length) {
+      this.dom.table.selectAll("*").remove();
+      this.dom.viewer.selectAll("*").remove();
+      this.dom.error.style("padding", "20px").text(data?.error || "No samples with whole-slide images.");
+      return;
+    }
+    const viewModel = new ViewModel(data.samples, settings);
+    const selectedSample = viewModel.viewData.selectedSample;
+    const images = selectedSample ? (await model.getImages(selectedSample.sampleId)).images ?? [] : [];
+    const image = images[settings.selectedImageIndex] ?? images[0];
+    const isSpatial = image?.type == "spatial";
+    this.dom.header?.text(isSpatial ? "SPATIAL VIEWER" : "WHOLE SLIDE IMAGES");
+    if (isSpatial) {
+      const spImage = image;
+      const genes = await this.fetchGeneNames(spImage, selectedSample.sampleId);
+      const cellTypes = await this.fetchCellTypes(spImage, selectedSample.sampleId);
+      if (settings.cellTypeFilter?.length && cellTypes.length) {
+        const cleaned = settings.cellTypeFilter.filter((t) => cellTypes.includes(t));
+        if (cleaned.length != settings.cellTypeFilter.length) {
+          this.app.dispatch({
+            type: "plot_edit",
+            id: this.id,
+            config: { settings: { wsi: { cellTypeFilter: cleaned } } }
+          });
+          return;
+        }
+      }
+      if (settings.geneExpression == null) {
+        const configured = (spImage.geneExpression || "").split(",").map((s) => s.trim()).filter((g) => genes.includes(g));
+        this.app.dispatch({
+          // one-time seeding edit; triggers a re-render with the seeded values
+          type: "plot_edit",
+          id: this.id,
+          config: {
+            settings: {
+              wsi: {
+                geneExpression: configured.join(",") || genes[0] || "",
+                annotationLevel: settings.annotationLevel ?? spImage.annotationLevel,
+                // dataset default (w2.cellTypes); the burger checkbox overrides
+                // after. Fills are mutually exclusive, so cell types on means
+                // expression fills off (hover counts stay either way)
+                showCellTypes: spImage.cellTypes ?? settings.showCellTypes,
+                showGeneExpression: spImage.cellTypes ? false : settings.showGeneExpression
+              }
+            }
+          }
+        });
+        return;
+      }
+      if (!this.components.controls) await this.setControls();
+      this.addGeneDatalist();
+    }
+    this.dom.controls.style("display", isSpatial ? "inline-block" : "none");
+    await new View(this.dom, viewModel.viewData, images, settings, this.interactions, this.state.vocab).render();
+  }
+  // the h5 the cache was built from
+  /** Discover the genes present in the image's cell_feature_matrix h5 via
+   wsitiles/genenames (same slide-scoped access checks as genecounts).
+   Returns [] when the image has no expression file or the request fails. */
+  async fetchGeneNames(image, sampleId) {
+    const src = image.spatialData;
+    if (!src) return [];
+    if (this.geneNamesFile == src) return this.geneNames;
+    const v = this.state.vocab;
+    const params = (
+      // standard wsitiles slide addressing + the expression file
+      `wsimage=${encodeURIComponent(image.fileName)}&dslabel=${v.dslabel}&genome=${v.genome}&sample_id=${encodeURIComponent(sampleId)}&imageType=spatial&file=${encodeURIComponent(src)}`
+    );
+    const r = await dofetch3(`wsitiles/genenames?${params}`).catch(() => null);
+    this.geneNames = Array.isArray(r?.genes) ? r.genes : [];
+    this.geneNamesFile = src;
+    return this.geneNames;
+  }
+  // the CSV the cache was built from
+  /** Discover the distinct cell_type values of the image's per-cell
+   annotations CSV via the meta request (?cellAnnotations= makes
+   wsitiles/meta scan it). Returns [] when the image has no annotations
+   file or the request fails. */
+  async fetchCellTypes(image, sampleId) {
+    const src = image.spatialData;
+    if (!src) {
+      this.cellTypeNames = [];
+      this.cellTypesFile = void 0;
+      return this.cellTypeNames;
+    }
+    if (this.cellTypesFile == src) return this.cellTypeNames;
+    const v = this.state.vocab;
+    const params = (
+      // standard wsitiles slide addressing + the annotations source to scan
+      `wsimage=${encodeURIComponent(image.fileName)}&dslabel=${v.dslabel}&genome=${v.genome}&sample_id=${encodeURIComponent(sampleId)}&imageType=spatial&cellAnnotations=${encodeURIComponent(src)}`
+    );
+    const r = await dofetch3(`wsitiles/meta?${params}`).catch(() => null);
+    this.cellTypeNames = Array.isArray(r?.cellTypes) ? r.cellTypes : [];
+    this.cellTypesFile = src;
+    return this.cellTypeNames;
+  }
+  /** Attach the discovered gene names to the Genes text input as a native
+   datalist, so typing autocompletes to genes that exist in the data.
+   (Autocomplete applies to the whole field, i.e. the first gene of a
+   comma-separated list — later genes are typed without suggestions.) */
+  addGeneDatalist() {
+    if (!this.geneNames.length) return;
+    const input = this.dom.controls.select("input[type=text]").node();
+    if (!input) return;
+    const id = `sjpp-wsi-genes-${this.id}`;
+    document.getElementById(id)?.remove();
+    const dl = document.createElement("datalist");
+    dl.id = id;
+    for (const g of this.geneNames) {
+      const opt = document.createElement("option");
+      opt.value = g;
+      dl.appendChild(opt);
+    }
+    input.after(dl);
+    input.setAttribute("list", id);
+  }
+  /** Burger menu with the spatial overlay settings; fields are pre-seeded
+   with defaults discovered from the data by main() before this runs. */
+  async setControls() {
+    this.components.controls = await controlsInit({
+      app: this.app,
+      // rx app the inputs dispatch through
+      id: this.id,
+      // this plot's id in app state
+      holder: this.dom.controls,
+      // the burger-menu div
+      inputs: [
+        {
+          // checkbox: toggle the blue nucleus outlines
+          label: "Nucleus boundaries",
+          title: "Show or hide the nucleus segmentation overlay",
+          type: "checkbox",
+          chartType: "wsi",
+          settingsKey: "showNucleusBoundaries",
+          boxLabel: "show"
+        },
+        {
+          // checkbox: toggle the green cell outlines
+          label: "Cell boundaries",
+          title: "Show or hide the cell segmentation overlay",
+          type: "checkbox",
+          chartType: "wsi",
+          settingsKey: "showCellBoundaries",
+          boxLabel: "show"
+        },
+        {
+          // checkbox: toggle the categorical cell-type fills (mutually
+          // exclusive with the gene expression fills, enforced in main())
+          label: "Cell types",
+          title: "Fill cells by their cell_type from the annotations CSV (when present)",
+          type: "checkbox",
+          chartType: "wsi",
+          settingsKey: "showCellTypes",
+          boxLabel: "show"
+        },
+        {
+          // chained dropdowns: one per selected type, plus an add-dropdown of
+          // the remaining types that appears once the previous is picked.
+          // No selection = all types. Hidden when the overlay is off or the
+          // image's CSV has no cell_type column.
+          label: "Types shown",
+          title: "Fill only the selected cell types; no selection = all types",
+          type: "custom",
+          settingsKey: "cellTypeFilter",
+          init: (self) => ({
+            main: (plot) => {
+              const td = self.dom.inputTd;
+              td.selectAll("*").remove();
+              const types = this.cellTypeNames;
+              const s = plot.settings.wsi;
+              if (!s.showCellTypes || !types.length) {
+                self.dom.row.style("display", "none");
+                return;
+              }
+              self.dom.row.style("display", "table-row");
+              const selected = (s.cellTypeFilter || []).filter((t) => types.includes(t));
+              const dispatch = (list) => (
+                // write the new selection back to state; re-render redraws the
+                // dropdowns. Stored as a LIST: type names are free text and may
+                // contain commas, so a joined string would corrupt them
+                this.app.dispatch({
+                  type: "plot_edit",
+                  id: this.id,
+                  config: { settings: { wsi: { cellTypeFilter: list } } }
+                })
+              );
+              const addSelect = () => td.append("select").attr("aria-label", "Cell type filter").style("display", "block").style("margin", "2px 0").style("max-width", "180px");
+              for (const [i, t] of selected.entries()) {
+                const sel = addSelect().on("change", function() {
+                  const next = selected.slice();
+                  if (this.value) next[i] = this.value;
+                  else next.splice(i, 1);
+                  dispatch(next);
+                });
+                sel.append("option").attr("value", "").text("\xD7 remove");
+                for (const ty of types)
+                  if (ty == t || !selected.includes(ty))
+                    sel.append("option").attr("value", ty).property("selected", ty == t).text(ty);
+              }
+              const remaining = types.filter((ty) => !selected.includes(ty));
+              if (remaining.length) {
+                const add = addSelect().on("change", function() {
+                  if (this.value) dispatch([...selected, this.value]);
+                });
+                add.append("option").attr("value", "").text(selected.length ? "Add type\u2026" : "All types");
+                for (const ty of remaining) add.append("option").attr("value", ty).text(ty);
+              }
+            }
+          })
+        },
+        {
+          // checkbox: toggle the expression FILLS only — hover counts stay
+          // either way (View.ts always loads the genes)
+          label: "Gene expression",
+          title: "Show or hide the gene expression overlay",
+          type: "checkbox",
+          chartType: "wsi",
+          settingsKey: "showGeneExpression",
+          boxLabel: "show"
+        },
+        {
+          // text field: which genes to load, with datalist autocomplete
+          label: "Genes",
+          title: "Comma-separated gene names to overlay",
+          type: "text",
+          chartType: "wsi",
+          settingsKey: "geneExpression",
+          placeholder: "gene1,gene2,\u2026"
+        },
+        {
+          // radio: per-gene overlays vs one summed gene-group overlay
+          label: "Overlay mode",
+          title: "Color each gene separately (gene_expression), or sum all genes into one overlay (gene_groups)",
+          type: "radio",
+          chartType: "wsi",
+          settingsKey: "spatialMode",
+          options: [
+            { label: "Per gene", value: "gene_expression" },
+            { label: "Gene group", value: "gene_groups" }
+          ]
+        },
+        {
+          // number: how many zoomed-in levels show the boundary strokes
+          label: "Annotation level",
+          title: "Show boundaries only within the n most zoomed-in levels; 0 = always show",
+          type: "number",
+          chartType: "wsi",
+          settingsKey: "annotationLevel",
+          min: 0,
+          step: 1
+        }
+      ]
+    });
+  }
+};
+var wsiInit = getCompInit(Wsi);
+var componentInit = wsiInit;
+function getDefaultWsiSettings(overrides = {}) {
+  const defaults = {
+    selectedSampleIndex: 0,
+    // first sample selected on launch
+    selectedImageIndex: 0,
+    // the sample's first image displayed by default
+    viewerHeight: "70vh",
+    // map height in the sandbox
+    // spatial overlay settings; null = fall back to the dataset's values
+    showCellBoundaries: true,
+    // green cell outlines on
+    showNucleusBoundaries: true,
+    // blue nucleus outlines on
+    showGeneExpression: true,
+    // expression fills on (seeding may flip this off)
+    showCellTypes: false,
+    // opt-in: fills all annotated cells, visually heavy
+    cellTypeFilter: null,
+    // null/[] = fill every annotated type
+    geneExpression: null,
+    // null = seed from the data on first spatial render
+    annotationLevel: null,
+    // null = dataset default
+    spatialMode: "gene_expression"
+    // per-gene overlays by default
+  };
+  return Object.assign(defaults, overrides);
+}
+async function getPlotConfig(opts, _app) {
+  const config = {
+    chartType: "wsi",
+    // routes state updates to this component
+    settings: {
+      wsi: getDefaultWsiSettings(opts.overrides)
+      // defaults + dataset overrides
+    },
+    hidePlotFilter: true
+    // the mass filter UI doesn't apply to slides
+  };
+  return copyMerge(config, opts);
+}
+export {
+  componentInit,
+  getDefaultWsiSettings,
+  getPlotConfig,
+  wsiInit
+};
+//# sourceMappingURL=Wsi-SJC56PRR.js.map