@sjcrh/proteinpaint-client 2.204.0 → 2.205.0

package/dist/Wsi-GXNGL7O6.js

@@ -0,0 +1,431 @@
+import {
+  Map_default,
+  Tile_default,
+  View_default,
+  Zoomify_default
+} from "./chunk-WTAPOH2W.js";
+import {
+  PlotBase,
+  Tabs,
+  controlsInit,
+  renderTable
+} from "./chunk-J7JDCNLU.js";
+import "./chunk-HJ6L54YS.js";
+import "./chunk-KV4W2ACA.js";
+import "./chunk-N635HDJ4.js";
+import "./chunk-T46FA72N.js";
+import "./chunk-ELJX3QIQ.js";
+import "./chunk-EEB5VE2A.js";
+import "./chunk-6RRZRISL.js";
+import "./chunk-2KM4PRQM.js";
+import {
+  dofetch3
+} from "./chunk-JYOIO5UY.js";
+import "./chunk-YN5NY3D3.js";
+import "./chunk-RN4BOWRH.js";
+import "./chunk-IK2BO37K.js";
+import {
+  copyMerge,
+  getCompInit
+} from "./chunk-WINIL2KN.js";
+import "./chunk-PF4DSFDR.js";
+import "./chunk-D6G64XPJ.js";
+import "./chunk-W5J3LTYS.js";
+import "./chunk-YLJOZP4P.js";
+import "./chunk-HDTFYTEL.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;
+  }
+  /** 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 {
+  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,
+      columns: this.viewData.columns,
+      rows: this.viewData.rows,
+      singleMode: true,
+      // radio buttons: one sample viewed at a time
+      selectedRows: this.settings.selectedSampleIndex != -1 ? [this.settings.selectedSampleIndex] : [],
+      noButtonCallback: (index) => this.interactions.selectSample(index),
+      resize: true,
+      striped: true,
+      maxHeight: "30vh",
+      header: { style: { "text-transform": "capitalize" } }
+    });
+  }
+  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.showGeneExpression ? s.geneExpression ?? image.geneExpression : void 0;
+      const direct = await import("./wsi.direct-C3HQEC2V.js");
+      await direct.init(
+        {
+          slideQuery: params,
+          label: image.fileName,
+          // expression fills need the cell polygons even when their strokes are hidden
+          cellBoundaries: s.showCellBoundaries || genes ? image.cellBoundaries : void 0,
+          hideCellStrokes: !s.showCellBoundaries,
+          nucleusBoundaries: s.showNucleusBoundaries ? image.nucleusBoundaries : void 0,
+          geneExpressionFile: image.geneExpressionFile,
+          geneExpression: s.spatialMode == "gene_groups" ? void 0 : genes,
+          geneGroups: s.spatialMode == "gene_groups" ? genes : void 0,
+          annotationLevel: s.annotationLevel ?? image.annotationLevel,
+          width: "100%",
+          height: this.settings.viewerHeight
+        },
+        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;
+  }
+  /** 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);
+    /** gene names available in the current image's expression h5, cached per file */
+    this.geneNames = [];
+    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),
+      table: div.append("div").attr("id", "sjpp-wsi-table"),
+      viewer: div.append("div").attr("id", "sjpp-wsi-viewer")
+    };
+    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";
+  }
+  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,
+      config
+    };
+  }
+  async init() {
+    this.interactions = new WsiInteractions(this.app, this.id);
+  }
+  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;
+    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);
+      if (settings.geneExpression == null) {
+        const configured = (spImage.geneExpression || "").split(",").map((s) => s.trim()).filter((g) => genes.includes(g));
+        this.app.dispatch({
+          type: "plot_edit",
+          id: this.id,
+          config: {
+            settings: {
+              wsi: {
+                geneExpression: configured.join(",") || genes[0] || "",
+                annotationLevel: settings.annotationLevel ?? spImage.annotationLevel
+              }
+            }
+          }
+        });
+        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();
+  }
+  /** 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) {
+    if (!image.geneExpressionFile) return [];
+    if (this.geneNamesFile == image.geneExpressionFile) return this.geneNames;
+    const v = this.state.vocab;
+    const params = `wsimage=${encodeURIComponent(image.fileName)}&dslabel=${v.dslabel}&genome=${v.genome}&sample_id=${encodeURIComponent(sampleId)}&imageType=spatial&file=${encodeURIComponent(
+      image.geneExpressionFile
+    )}`;
+    const r = await dofetch3(`wsitiles/genenames?${params}`).catch(() => null);
+    this.geneNames = Array.isArray(r?.genes) ? r.genes : [];
+    this.geneNamesFile = image.geneExpressionFile;
+    return this.geneNames;
+  }
+  /** 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,
+      id: this.id,
+      holder: this.dom.controls,
+      inputs: [
+        {
+          label: "Nucleus boundaries",
+          title: "Show or hide the nucleus segmentation overlay",
+          type: "checkbox",
+          chartType: "wsi",
+          settingsKey: "showNucleusBoundaries",
+          boxLabel: "show"
+        },
+        {
+          label: "Cell boundaries",
+          title: "Show or hide the cell segmentation overlay",
+          type: "checkbox",
+          chartType: "wsi",
+          settingsKey: "showCellBoundaries",
+          boxLabel: "show"
+        },
+        {
+          label: "Gene expression",
+          title: "Show or hide the gene expression overlay",
+          type: "checkbox",
+          chartType: "wsi",
+          settingsKey: "showGeneExpression",
+          boxLabel: "show"
+        },
+        {
+          label: "Genes",
+          title: "Comma-separated gene names to overlay",
+          type: "text",
+          chartType: "wsi",
+          settingsKey: "geneExpression",
+          placeholder: "gene1,gene2,\u2026"
+        },
+        {
+          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" }
+          ]
+        },
+        {
+          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",
+    // spatial overlay settings; null = fall back to the dataset's values
+    showCellBoundaries: true,
+    showNucleusBoundaries: true,
+    showGeneExpression: true,
+    geneExpression: null,
+    annotationLevel: null,
+    spatialMode: "gene_expression"
+  };
+  return Object.assign(defaults, overrides);
+}
+async function getPlotConfig(opts, _app) {
+  const config = {
+    chartType: "wsi",
+    settings: {
+      wsi: getDefaultWsiSettings(opts.overrides)
+    },
+    hidePlotFilter: true
+  };
+  return copyMerge(config, opts);
+}
+export {
+  componentInit,
+  getDefaultWsiSettings,
+  getPlotConfig,
+  wsiInit
+};
+//# sourceMappingURL=Wsi-GXNGL7O6.js.map

package/dist/adSandbox-SXSHVG4P.js

@@ -0,0 +1,33 @@
+import {
+  openSandbox
+} from "./chunk-RJFCT67B.js";
+import "./chunk-J7JDCNLU.js";
+import "./chunk-HJ6L54YS.js";
+import "./chunk-KV4W2ACA.js";
+import "./chunk-N635HDJ4.js";
+import "./chunk-T46FA72N.js";
+import "./chunk-ELJX3QIQ.js";
+import "./chunk-EEB5VE2A.js";
+import "./chunk-6RRZRISL.js";
+import "./chunk-2KM4PRQM.js";
+import "./chunk-JYOIO5UY.js";
+import "./chunk-YN5NY3D3.js";
+import "./chunk-RN4BOWRH.js";
+import "./chunk-IK2BO37K.js";
+import "./chunk-WINIL2KN.js";
+import "./chunk-PF4DSFDR.js";
+import "./chunk-D6G64XPJ.js";
+import "./chunk-W5J3LTYS.js";
+import "./chunk-YLJOZP4P.js";
+import "./chunk-HDTFYTEL.js";
+import "./chunk-FXQXCOII.js";
+import "./chunk-TLT4YIG3.js";
+import "./chunk-5R63Q5KH.js";
+import "./chunk-I6Y4O3RR.js";
+import "./chunk-Q5RDQNIT.js";
+import "./chunk-DQC5FFGV.js";
+import "./chunk-HS5PO5ZQ.js";
+export {
+  openSandbox
+};
+//# sourceMappingURL=adSandbox-SXSHVG4P.js.map