@jax-data-science/sci-image-visualizer 0.2.0 → 0.2.2

package/fesm2022/jax-data-science-sci-image-visualizer.mjs

@@ -166,7 +166,7 @@ const PLOT_TYPE_DESCRIPTORS = {
     // ── napari-js WebGPU (jit-ui#102). The 3D types take a runtime decimate factor. ──
     [PlotType.NAPARI_IMAGE]: { type: PlotType.NAPARI_IMAGE, label: 'Image (napari · WebGPU)', icon: 'pi pi-image', dimensions: '2d', source: 'image' },
     [PlotType.NAPARI_SCATTER]: { type: PlotType.NAPARI_SCATTER, label: 'Scatter 2D (napari · WebGPU)', icon: 'pi pi-chart-scatter', dimensions: '2d', source: 'regions' },
-    [PlotType.NAPARI_SURFACE]: { type: PlotType.NAPARI_SURFACE, label: 'Surface (napari · WebGPU)', productionLabel: 'Surface', icon: 'assets/plotting/surface.svg', dimensions: '3d', source: 'image', requiresGrayscale: true },
+    [PlotType.NAPARI_SURFACE]: { type: PlotType.NAPARI_SURFACE, label: 'Surface (napari · WebGPU)', productionLabel: 'Surface', icon: 'assets/plotting/surface.svg', dimensions: '3d', source: 'image' }, // a height-field is z=intensity of one plane — works for any grayscale/RGB image (RGB→luminance), no stack needed
     [PlotType.NAPARI_SCATTER3D]: { type: PlotType.NAPARI_SCATTER3D, label: 'Scatter 3D (napari · WebGPU)', icon: 'assets/plotting/3d-coordinates.svg', dimensions: '3d', source: 'image', requiresStack: true, requiresGrayscale: true },
     [PlotType.NAPARI_VOLUME]: { type: PlotType.NAPARI_VOLUME, label: 'Volume (napari · WebGPU)', productionLabel: 'Volume', icon: 'assets/plotting/cube-3d.svg', dimensions: '3d', source: 'image', requiresStack: true, requiresGrayscale: true },
     [PlotType.NAPARI_ISOSURFACE]: { type: PlotType.NAPARI_ISOSURFACE, label: 'Isosurface (napari · WebGPU)', productionLabel: 'Isosurface', icon: 'assets/plotting/isosurface.svg', dimensions: '3d', source: 'image', requiresStack: true, requiresGrayscale: true },
@@ -3223,6 +3223,9 @@ class VisualizerStore {
         // metadata on load (1 "Intensity" channel for grayscale; R/G/B for RGB). The
         // Channels & Histogram pane edits these and both backends recolor live.
         this.channelStates$ = new BehaviorSubject([]);
+        /** Index of the channel selected in the Channels pane — the ONE band a
+         *  single-scalar 3D view (the napari Surface) follows for a multichannel image. */
+        this.selectedChannel$ = new BehaviorSubject(0);
         // The derived defaults (full window, gamma 1, default tint) for the current
         // image, kept so "Reset" can restore a channel's window/gamma/colour.
         this.defaultChannelStates = [];
@@ -3372,6 +3375,7 @@ class VisualizerStore {
         this.defaultChannelStates = next.map((c) => ({ ...c }));
         if (next.length !== this.channelStates$.value.length) {
             this.channelStates$.next(next);
+            this.selectedChannel$.next(0); // new channel structure → reset the selected band
         }
     }
     /** Channels for an image:
@@ -3410,6 +3414,13 @@ class VisualizerStore {
     currentChannelStates() {
         return this.channelStates$.value;
     }
+    /** The channel selected in the pane (drives a single-scalar 3D Surface). */
+    getSelectedChannel() { return this.selectedChannel$.asObservable(); }
+    currentSelectedChannel() { return this.selectedChannel$.value; }
+    setSelectedChannel(index) {
+        if (this.selectedChannel$.value !== index)
+            this.selectedChannel$.next(index);
+    }
     /** Patch one channel by index (immutable update). */
     setChannelState(index, partial) {
         const next = this.channelStates$.value.map((c) => c.index === index ? { ...c, ...partial, index: c.index } : c);
@@ -6251,6 +6262,7 @@ class ChannelHistogramComponent {
     }
     selectChannel(ch) {
         this.selected = ch;
+        this.api.setSelectedChannel(ch.index); // a single-scalar 3D Surface follows the selected band
         this.histRetries = 0;
         this.loadHistogram();
     }
@@ -6720,6 +6732,11 @@ class VisualizerComponent {
         const caps = this.plotService.capabilities;
         const isStack = !!this.imageInfo?.isStack;
         const isGrayscale = !!this.imageInfo?.isGrayscale;
+        // A multichannel image's bands are each single-band (scalar), so the scalar
+        // plot modes (Heatmap / Surface / Volume / Isosurface) apply per channel even
+        // though the RGB composite isn't grayscale — don't gate them out.
+        const m0 = this.imageInfo?.imageMeta?.[0];
+        const isMultichannel = (m0?.channelCount ?? 1) > 1 && (m0?.rgbChannels ?? 1) < 3;
         this.plotTypeOptions = this.plotService.getPlotTypeDescriptors()
             .filter((d) => {
             // Outside test mode, only the curated set (those with a productionLabel)
@@ -6730,7 +6747,7 @@ class VisualizerComponent {
                 return false;
             if (d.requiresStack && !isStack)
                 return false;
-            if (d.requiresGrayscale && !isGrayscale)
+            if (d.requiresGrayscale && !isGrayscale && !isMultichannel)
                 return false;
             return true;
         })
@@ -18705,6 +18722,8 @@ class NapariVisualizerService extends BaseStoreVisualizer {
         this.surfaceLayer = null;
         /** Which band the surface samples (a channel index for multichannel, else the composite). */
         this.surfaceChannel = undefined;
+        /** True when the mounted Surface follows one band of a multichannel image. */
+        this.surfaceMultichannel = false;
         /** Pre-loaded per-slice luminance planes (already decimated to the surface grid), keyed by z,
          *  so the stack slider rebuilds the surface instantly. Filled by {@link preloadSurfacePlanes}. */
         this.surfacePlanes = new Map();
@@ -18877,7 +18896,13 @@ class NapariVisualizerService extends BaseStoreVisualizer {
         // beyond that one file's own extent).
         const info = this.loaded?.imageInfo;
         if (this.simpleStack.isSimple(info)) {
-            const url = this.simpleStack.urlFor(info, z);
+            // Serverless multichannel volume: fetch the requested channel's OWN plane
+            // (channelUrls[z][channel]) so each band stays distinct — the client-side
+            // analog of the server's per-channel /tile?channel=c. Else the z-anchor URL.
+            const chUrls = info.channelUrls;
+            const url = channel != null && chUrls?.[z]?.[channel] != null
+                ? chUrls[z][channel]
+                : this.simpleStack.urlFor(info, z);
             if (!url)
                 throw new Error(`[napari-js] no URL for slice ${z}`);
             return this.simpleStack.fetchAsBitmap(url);
@@ -19487,8 +19512,13 @@ class NapariVisualizerService extends BaseStoreVisualizer {
     async mountVolume(viewer, info, plotType) {
         const token = this.loadToken; // bail before rendering if a Cancel / new plot bumps this
         const desc = await this.ensureDescriptor();
-        const channelCount = desc?.channels ?? 1;
-        const multichannel = !!desc?.multichannel && channelCount > 1;
+        // Serverless multichannel (tiled:false + channelUrls): no tile descriptor, so
+        // derive the channel count from imageMeta and assemble each band from its own
+        // channelUrls[z][c] plane (fetchSlice does the per-channel routing).
+        const simpleMc = this.simpleStack.isSimple(info) && !!info?.channelUrls?.length
+            && (info?.imageMeta?.[0]?.channelCount ?? 1) > 1;
+        const channelCount = simpleMc ? info.imageMeta[0].channelCount : (desc?.channels ?? 1);
+        const multichannel = simpleMc || (!!desc?.multichannel && channelCount > 1);
         const res = volumeResolutionFor(this.resolutionScale);
         const rendering = isNapariIsosurface(plotType) ? 'iso' : 'mip';
         const states = this.store.currentChannelStates();
@@ -19878,9 +19908,15 @@ class NapariVisualizerService extends BaseStoreVisualizer {
      */
     async mountSurface(viewer) {
         const desc = await this.ensureDescriptor();
-        const multichannel = !!desc?.multichannel && (desc?.channels ?? 1) > 1;
-        const states = this.store.currentChannelStates();
-        this.surfaceChannel = multichannel ? states.find((s) => s.visible)?.index ?? 0 : undefined;
+        const info = this.loaded?.imageInfo;
+        // Serverless multichannel (tiled:false + channelUrls) has no descriptor — detect
+        // it from imageMeta so the Surface still follows one band.
+        const simpleMc = this.simpleStack.isSimple(info) && !!info?.channelUrls?.length
+            && (info?.imageMeta?.[0]?.channelCount ?? 1) > 1;
+        const multichannel = simpleMc || (!!desc?.multichannel && (desc?.channels ?? 1) > 1);
+        this.surfaceMultichannel = multichannel;
+        // A height field is single-scalar → follow the pane-SELECTED channel.
+        this.surfaceChannel = multichannel ? this.store.currentSelectedChannel() : undefined;
         this.surfaceMaxGrid = surfaceResolutionFor(this.resolutionScale).maxGrid;
         this.imageMode = 'grayscale';
         this.volumeMultichannel = false;
@@ -20105,13 +20141,25 @@ class NapariVisualizerService extends BaseStoreVisualizer {
             this.store.getReverseScale(),
             this.store.getInvert(),
             this.store.getChannelStates(),
-        ]).subscribe(([colormap, reverse, invert, channels]) => {
+            this.store.getSelectedChannel(),
+        ]).subscribe(([colormap, reverse, invert, channels, selected]) => {
             this.currentColormap = colormap ?? null;
             this.currentReverse = reverse;
             this.invertEnabled = invert;
             const layer = this.surfaceLayer;
             if (!layer || !this.viewer)
                 return;
+            // Selected channel changed (multichannel): re-fetch THAT band's planes and
+            // rebuild the height-field for the current slice.
+            if (this.surfaceMultichannel && selected !== this.surfaceChannel) {
+                this.surfaceChannel = selected;
+                void (async () => {
+                    await this.preloadSurfacePlanes(this.viewer);
+                    if (this.viewer)
+                        await this.buildSurface(this.viewer, this.loaded?.z ?? 0);
+                })().catch((err) => console.error('[napari-js] surface channel switch failed:', err));
+                return;
+            }
             const st = this.surfaceState(channels);
             const win = [st?.min ?? 0, st?.max ?? 255];
             const windowChanged = !this.surfaceWindow || win[0] !== this.surfaceWindow[0] || win[1] !== this.surfaceWindow[1];
@@ -21266,6 +21314,7 @@ class RoutingVisualizerService {
     /** Export the underlying data (16-bit multi-band TIFF) via the active backend. */
     exportData() { this.renderer().exportData(); }
     getChannels$() { return this.store.getChannelStates(); }
+    setSelectedChannel(index) { this.store.setSelectedChannel(index); }
     setChannelState(index, partial) {
         this.store.setChannelState(index, partial);
     }