@sjcrh/proteinpaint-client 2.207.1 → 2.209.0

package/dist/Wsi-B6EIGTI2.js

@@ -1,609 +0,0 @@
-import {
-  Map_default,
-  Tile_default,
-  View_default,
-  Zoomify_default
-} from "./chunk-WTAPOH2W.js";
-import {
-  PlotBase,
-  Tabs,
-  controlsInit,
-  renderTable
-} from "./chunk-PC4MFDHP.js";
-import "./chunk-HJ6L54YS.js";
-import "./chunk-KV4W2ACA.js";
-import "./chunk-HPAW7XDM.js";
-import "./chunk-ELJX3QIQ.js";
-import "./chunk-BZN2O76M.js";
-import "./chunk-EEB5VE2A.js";
-import "./chunk-6RRZRISL.js";
-import "./chunk-2KM4PRQM.js";
-import {
-  dofetch3
-} from "./chunk-52QHIKH2.js";
-import "./chunk-A2ORIMUJ.js";
-import "./chunk-PPSWNLMG.js";
-import "./chunk-RUBZCKIX.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-5MQVRJZX.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-B6EIGTI2.js.map