@jax-data-science/sci-image-visualizer 0.3.3 → 0.5.0

package/lib/visualizer.component.d.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, AfterViewInit, EventEmitter, NgZone, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { ChangeDetectorRef, AfterViewInit, ElementRef, EventEmitter, Injector, NgZone, OnChanges, OnDestroy, OnInit, SimpleChanges, Type } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { MenuItem, MessageService, TreeNode } from 'primeng/api';
 import { ContextMenu } from 'primeng/contextmenu';
@@ -7,7 +7,9 @@ import { ImageStatePort } from './contracts/ports/image-state.port';
 import { Polygon } from './models/region';
 import { RegionOpsService } from './region-ops.service';
 import { VisualizerStore } from './store/visualizer-store.service';
-import { PlotType, PlotTypeDescriptor } from './contracts/plot-type';
+import { PlotType, PlotTypeDescriptor, PlotTypeId } from './contracts/plot-type';
+import { PlotTypeContribution, PlotTypeOption } from './contracts/plot-type-contribution.contract';
+import { PlotModeController } from './plot-mode/plot-mode-controller';
 import { IVisualizer } from './contracts/visualizer.contract';
 import { SamToolService } from './toolbar/segmentation/sam-tool.service';
 import { SamPointToolService } from './toolbar/segmentation/sam-point-tool.service';
@@ -15,6 +17,7 @@ import { CellSegmentToolService } from './toolbar/segmentation/cell-segment-tool
 import { NumberParamSpec, SelectParamSpec, ToolParamSpec, ToolbarToolContribution } from './contracts/toolbar-tool.contract';
 import { ToolbarToolVisibility } from './contracts/toolbar-config';
 import { VizConfig } from './contracts/viz-config';
+import { SpatialDataPort } from './contracts/ports/spatial-data.port';
 import * as i0 from "@angular/core";
 export declare class VisualizerComponent implements OnInit, OnChanges, AfterViewInit, OnDestroy {
     private state;
@@ -28,6 +31,8 @@ export declare class VisualizerComponent implements OnInit, OnChanges, AfterView
     private samPointTool;
     private regionOps;
     private vizConfig?;
+    private spatialData?;
+    private injector?;
     /** Per-instance toast key. MessageService is a global singleton, so two live
      *  `<visualizer>` instances (main viewer + pipeline-dialog preview) sharing
      *  one key would each render the same message — a duplicate toast. A unique
@@ -177,6 +182,8 @@ export declare class VisualizerComponent implements OnInit, OnChanges, AfterView
     selectedColormap: any;
     /** Channels & Histogram dialog visibility (opened from the toolbar). */
     showChannelHistogram: boolean;
+    /** Spatial-omics controls dialog visibility (toolbar button). */
+    showSpatialControls: boolean;
     /** Region Editor dialog visibility (opened from the toolbar). */
     showRegionEditor: boolean;
     /** Region Editor dialog width. On open it is set to the configured host
@@ -200,9 +207,48 @@ export declare class VisualizerComponent implements OnInit, OnChanges, AfterView
     wireframeActive: boolean;
     /** napari 3D decimate factor (1 = Full … 8 = ⅛; default ½); changing it re-plots. */
     resolutionScale: number;
-    /** Plot types the active backend advertises (3D gated by capability). */
+    /** The selector's entries: the built-in plot types the active backend
+     *  advertises (3D gated by capability), then any contributed modes
+     *  ({@link PLOT_TYPE_CONTRIBUTIONS}). */
+    plotTypeMenu: PlotTypeOption[];
+    /**
+     * The built-in plot types on offer — {@link plotTypeMenu} without contributed
+     * modes. Kept with its original type so existing readers are unaffected.
+     */
     plotTypeOptions: PlotTypeDescriptor[];
-    selectedPlotType: PlotType;
+    /**
+     * What the selector shows: a built-in type or a contributed mode's id. Every
+     * rendering and tool decision goes through {@link basePlotType} instead, so a
+     * contributed mode behaves exactly like the built-in type it rides on.
+     */
+    selectedPlotTypeId: PlotTypeId;
+    /**
+     * The built-in plot type being rendered. With no contributed mode active this
+     * is the selection itself; during one it is the mode's `baseType`. Kept with its
+     * original `PlotType` type for existing readers — use {@link selectedPlotTypeId}
+     * for the selector's id. Assigning selects that built-in type.
+     */
+    get selectedPlotType(): PlotType;
+    set selectedPlotType(type: PlotType);
+    /** Contributed plot modes and their single live session. */
+    readonly plotModes: PlotModeController;
+    /**
+     * The live contributed mode's side panel, as the template renders it: an
+     * Angular component with its own injector, or a plain host element a `mount`
+     * panel rendered into. Null while no contributed session is live.
+     */
+    plotModePanel: {
+        title: string;
+        component: Type<unknown> | null;
+        injector: Injector | null;
+        host: HTMLElement | null;
+    } | null;
+    private destroying;
+    /** Where a `mount` panel's host element is attached once the dialog renders. */
+    set plotModePanelSlot(ref: ElementRef<HTMLElement> | undefined);
+    /** The built-in type actually rendered for {@link selectedPlotTypeId}: itself
+     *  for a built-in type, `baseType` for a contributed mode. */
+    get basePlotType(): PlotType;
     /** Floating intensity-profile inset (LINE mode). */
     readonly intensityInsetDiv = "intensity-inset-plot";
     profilePanelPos: {
@@ -230,6 +276,10 @@ export declare class VisualizerComponent implements OnInit, OnChanges, AfterView
     private profileDragMoveListener?;
     private profileDragUpListener?;
     private profileResizeListener?;
+    /** True while the 3D spatial cloud is the active mode. The controls drop the ROI
+     *  selection there: region tools are screen-space, and against an orbiting
+     *  camera a drawn rectangle has no fixed meaning in the data. */
+    get isSpatial3dMode(): boolean;
     /** LINE plot type shows the image + draggable line ROI + intensity inset. */
     get isProfileMode(): boolean;
     /** True for the Image plot type, which renders as a natively pan/zoom-able
@@ -239,6 +289,24 @@ export declare class VisualizerComponent implements OnInit, OnChanges, AfterView
     /** Isosurface band as a 0–255 slider position, mapped onto the volume's real
      *  intensity range by the renderer. Defaults to the full range. */
     isoRange: number[];
+    /** Whether a spatial-omics dataset is currently published on
+     *  `SPATIAL_DATA_PORT` — gates the spatial plot types in the selector. */
+    private hasSpatialDataset;
+    /** Whether that dataset's observations carry a z, gating the 3D spatial mode. */
+    private hasSpatial3dDataset;
+    /** Whether it carries a registered volume. Change detection only: a volume
+     *  appearing is what publishes it as the image, and the plot-type gates then
+     *  see an ordinary grayscale stack. */
+    private hasSpatialVolume;
+    /** Dataset identity + capability shape the last emission was handled at, so a
+     *  switch between two datasets of the same shape is not mistaken for a repeat. */
+    private spatialDatasetKey;
+    /** Dataset + geometry the currently published volume image was built from, so a
+     *  re-emitted dataset doesn't re-fetch megabytes or reset the user's scrub. */
+    private volumeImageKey;
+    /** Blob URLs backing that image — ours to revoke. */
+    private volumeImageUrls;
+    private spatialDatasetSubscription?;
     plotWidthSubscription?: Subscription;
     imageLoadingSubscription?: Subscription;
     imgLoadingMessageSubscription?: Subscription;
@@ -250,7 +318,7 @@ export declare class VisualizerComponent implements OnInit, OnChanges, AfterView
     private wheelListener?;
     /** Debounced z-slice scrubbing (see SliceScrubber — refactoring plan Step 7). */
     private readonly scrubber;
-    constructor(state: ImageStatePort, plotService: IVisualizer, messageService: MessageService, ngZone: NgZone, cdr: ChangeDetectorRef, session: VisualizerStore, samTool: SamToolService, cellSegmentTool: CellSegmentToolService, samPointTool: SamPointToolService, regionOps: RegionOpsService, vizConfig?: VizConfig | undefined, toolContributions?: readonly ToolbarToolContribution[]);
+    constructor(state: ImageStatePort, plotService: IVisualizer, messageService: MessageService, ngZone: NgZone, cdr: ChangeDetectorRef, session: VisualizerStore, samTool: SamToolService, cellSegmentTool: CellSegmentToolService, samPointTool: SamPointToolService, regionOps: RegionOpsService, vizConfig?: VizConfig | undefined, toolContributions?: readonly ToolbarToolContribution[], spatialData?: SpatialDataPort | undefined, plotTypeContributions?: readonly PlotTypeContribution[], injector?: Injector | undefined);
     /**
      * Plot types offered in the selector for the current image:
      *  - Outside **test mode**, only the curated default set (descriptors with a
@@ -263,12 +331,55 @@ export declare class VisualizerComponent implements OnInit, OnChanges, AfterView
      *  - scalar-intensity types (contour, surface, isosurface) hidden for RGB
      *    images — they map a single intensity per pixel. Image and Heatmap render
      *    any image.
+     *  - spatial-omics types hidden until a `SpatialDataset` is published on
+     *    `SPATIAL_DATA_PORT` — the mode has nothing to draw without observations,
+     *    exactly as a volume has nothing to draw without a stack.
+     */
+    /**
+     * Track whether a spatial-omics dataset is available. A dataset appearing (or
+     * being cleared) changes which plot types make sense, so it drives the same
+     * recompute + reconcile that the image stream and the test-mode toggle do.
+     *
+     * No-op when the host provides no `SPATIAL_DATA_PORT` — the spatial types then
+     * stay hidden for the life of the component.
      */
+    private watchSpatialDataset;
+    /**
+     * Publish a dataset's reference volume AS the image, and open the 2D Image view
+     * on it.
+     *
+     * The volume is a 3D image delivered in one file, so for a dataset that has no
+     * section image it is the honest thing to put on screen: the slice bar scrubs z,
+     * and the contrast window, colormaps and region tools all work because the
+     * volume genuinely is the image now. The 3D cloud stays one menu pick away.
+     *
+     * Keyed by dataset + geometry: the dataset stream re-emits on things like a
+     * colour-column change, and rebuilding then would re-fetch the voxels and throw
+     * the user back to the middle slice.
+     */
+    private showVolumeAsImage;
+    /** Forget the published volume image so re-selecting the dataset rebuilds it.
+     *  The URLs deliberately stay alive: the host may still be displaying that image
+     *  at this instant, and revoking under it would break every later tile read. They
+     *  are freed when the next volume replaces them, or on destroy. */
+    private dropVolumeImage;
+    private revokeVolumeImageUrls;
     private computePlotTypeOptions;
     ngOnChanges(changes: SimpleChanges): void;
     /** If the active plot type is no longer in the offered options (e.g. test mode
      *  turned off while a test-only type was active, or a scalar type carried onto
      *  an RGB image), fall back to the default 2D Image view. */
+    /** Whether the live spatial dataset brings pixels of its own — a tissue image it
+     *  registers onto, or a volume that is published as a z-stack image. */
+    private spatialDatasetHasPixels;
+    /**
+     * The host published NO image — a spatial dataset that brings none does this.
+     *
+     * Without handling the empty emission, `imageInfo` keeps the LAST image's metadata: the
+     * selector goes on offering pixel modes for pixels that are gone, and every
+     * `isStack`/`isGrayscale` decision is made against a file that is no longer loaded.
+     */
+    private onImageCleared;
     private reconcileSelectedPlotType;
     ngOnInit(): void;
     ngAfterViewInit(): void;
@@ -302,6 +413,8 @@ export declare class VisualizerComponent implements OnInit, OnChanges, AfterView
     selectColormap(colormapNode: TreeNode): void;
     /** Open the Channels & Histogram dialog (toolbar button). */
     openChannelHistogram(): void;
+    /** Toolbar → open the spatial-omics controls. */
+    openSpatialControls(): void;
     /** Open the Region Editor dialog (toolbar button). The editor stays linked to
      *  this plotting instance through the root RegionStore singleton, so it works
      *  the same as the former right-panel Regions tab. */
@@ -473,9 +586,28 @@ export declare class VisualizerComponent implements OnInit, OnChanges, AfterView
      * the toolbar/context-menu logic relies on, deactivates 2D-only tools when
      * moving to a 3D type, then re-plots.
      */
-    onSelectPlotType(type: PlotType): void;
+    onSelectPlotType(selected: PlotTypeId): void;
+    /**
+     * Start the selected contributed mode's session, once its base view has
+     * plotted. No-op for a built-in type, or when the base on screen is not the
+     * one the mode rides on. A backend that cannot provide a viewport for it
+     * (e.g. OSD fell back to Plotly) counts as a failed activation.
+     */
+    private activateSelectedPlotMode;
+    /** Render the live mode's panel. Activation can resolve outside Angular (an
+     *  OSD callback, a contribution's own promise), hence the zone re-entry. */
+    private showPlotModePanel;
+    /** Drop the panel (destroying a component panel) before the session ends. */
+    private hidePlotModePanel;
+    /**
+     * A contributed mode could not start. Its base type is already on screen —
+     * the base plotted first — so just select it: nothing needs to re-plot.
+     */
+    private fallBackFromPlotMode;
+    /** Run change detection; returns what it threw (logged), or null. */
+    private detectChangesSafely;
     /** Deactivate whatever tool is armed and clear every tool mode. */
     private deactivateActiveTool;
-    static ɵfac: i0.ɵɵFactoryDeclaration<VisualizerComponent, [null, null, null, null, null, null, null, null, null, null, { optional: true; }, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<VisualizerComponent, [null, null, null, null, null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<VisualizerComponent, "visualizer", never, { "toolbarTools": { "alias": "toolbarTools"; "required": false; }; "testMode": { "alias": "testMode"; "required": false; }; }, { "isStackEvent": "isStackEvent"; "isGrayscaleEvent": "isGrayscaleEvent"; }, never, ["*"], false, never>;
 }

package/package.json

@@ -1,6 +1,9 @@
 {
   "name": "@jax-data-science/sci-image-visualizer",
-  "version": "0.3.3",
+  "version": "0.5.0",
+  "engines": {
+    "node": ">=20.9.0"
+  },
   "description": "Browser-based scientific image visualization for Angular — gigapixel whole-slide (OpenSeadragon), 2D/3D (Plotly) and WebGPU (napari-js) rendering, with region/annotation editing and in-browser SAM segmentation.",
   "keywords": [
     "angular",
@@ -34,9 +37,10 @@
     "access": "public"
   },
   "dependencies": {
+    "@jax-js/jax": "^0.1.24",
     "cellpose-js": "^0.6.0",
     "fast-png": "^6.4.0",
-    "napari-js": "^0.11.1",
+    "napari-js": "^0.14.0",
     "openseadragon": "^6.0.2",
     "plotly.js-dist-min": "^3.0.1",
     "tslib": "^2.3.0"

package/src/lib/assets/spatial-omics-3d.svg

@@ -0,0 +1,31 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 512 512">
+  <!-- Spatial omics in 3D: the same observations as spatial-omics.svg — dots
+       whose SIZE varies with the value they carry — but arranged on a cube
+       lattice instead of a flat grid. Two square planes of four, the back one
+       offset up-right and drawn smaller, which is the whole 3D cue: no edges,
+       no perspective lines, nothing that needs a stroke to survive.
+
+       Sized for a 16px toolbar icon (1rem in the toolbar, 1.1rem in the
+       plot-mode dropdown), which drives every choice, exactly as in the 2D
+       icon it sits beside:
+        - Solid fills only. Both call sites tint with `filter: brightness(0) …`,
+          which flattens every colour to one — tone cannot carry meaning, so
+          the arrangement has to.
+        - Ink at 6-14% of the viewBox and 23% of the box overall, matching
+          spatial-omics.svg so the pair reads at one weight in the toolbar.
+        - Eight dots, not the 2D icon's nine plus a second layer: at 16px the
+          gaps are what make a lattice legible, and 4+4 keeps every gap above
+          2px where an 18-dot stack would silt up into a blob. -->
+  <g fill="#000000">
+    <!-- front plane -->
+    <circle cx="77" cy="180" r="59"/>
+    <circle cx="331" cy="180" r="42"/>
+    <circle cx="77" cy="434" r="71"/>
+    <circle cx="331" cy="434" r="50"/>
+    <!-- back plane, offset (+127, -127) and scaled to 0.78 -->
+    <circle cx="204" cy="53" r="38"/>
+    <circle cx="458" cy="53" r="48"/>
+    <circle cx="204" cy="307" r="33"/>
+    <circle cx="458" cy="307" r="43"/>
+  </g>
+</svg>

package/src/lib/assets/spatial-omics.svg

@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 512 512">
+  <!-- Spatial omics: an array of observations (spots / cells) whose SIZE varies
+       with the value they carry — the thing this plot mode draws.
+       Deliberately frameless, so it does not read as cells.svg (the cellpose
+       button, a framed dot cluster) sitting in the same toolbar.
+
+       Sized for a 16px toolbar icon, which drives every choice:
+        - Solid fills only. The toolbar tints icons with
+          `filter: brightness(0) …`, which flattens every colour to black — a
+          white highlight inside a dark shape simply disappears, so shape has to
+          carry the meaning, not tone.
+        - Ink at ~7-13% of the viewBox. Thin strokes (the 6/512 and 12/512 of the
+          previous version) render sub-pixel at 16px, antialias to ~20-40% alpha,
+          and the recolour filter then washes them out to an illegible smudge.
+        - No low-opacity decoration: invisible at 16px either way. -->
+  <g fill="#000000">
+    <circle cx="128" cy="128" r="34"/>
+    <circle cx="256" cy="128" r="52"/>
+    <circle cx="384" cy="128" r="40"/>
+    <circle cx="128" cy="256" r="52"/>
+    <circle cx="256" cy="256" r="68"/>
+    <circle cx="384" cy="256" r="34"/>
+    <circle cx="128" cy="384" r="40"/>
+    <circle cx="256" cy="384" r="34"/>
+    <circle cx="384" cy="384" r="52"/>
+  </g>
+</svg>