@jax-data-science/sci-image-visualizer 0.1.0 → 0.2.1

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 },
@@ -6720,6 +6720,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 +6735,7 @@ class VisualizerComponent {
                 return false;
             if (d.requiresStack && !isStack)
                 return false;
-            if (d.requiresGrayscale && !isGrayscale)
+            if (d.requiresGrayscale && !isGrayscale && !isMultichannel)
                 return false;
             return true;
         })
@@ -15137,6 +15142,51 @@ class HistogramSampler {
             console.warn('[viz:window] per-image window compute failed — using identity 0..255', err);
         }
     }
+    /**
+     * Client-side histogram for the SIMPLE (`tiled:false`) path: bin an
+     * already-decoded RGBA frame's OWN pixels — no tile server, no fetch. Same
+     * output shape as {@link computeImageWindow}: grayscale → [intensity];
+     * RGB → [R, G, B]. This is what lets the Channels & Histogram pane work for
+     * serverless images (the processing-pipeline preview, DICOM/TIFF stacks),
+     * which never hit the tile / `/histogram` endpoints.
+     */
+    computeSimpleHistogram(z, data, gray) {
+        const cR = new Array(256).fill(0);
+        const cG = gray ? null : new Array(256).fill(0);
+        const cB = gray ? null : new Array(256).fill(0);
+        for (let i = 0; i < data.length; i += 4) {
+            if (data[i + 3] === 0)
+                continue; // skip transparent padding
+            if (gray) {
+                cR[maxRgb(data[i], data[i + 1], data[i + 2])]++;
+            }
+            else {
+                cR[data[i]]++;
+                cG[data[i + 1]]++;
+                cB[data[i + 2]]++;
+            }
+        }
+        this.sliceHistograms.set(z, gray ? [histogram256(cR)] : [histogram256(cR), histogram256(cG), histogram256(cB)]);
+        this.host.onChannelHistogramsSampled();
+    }
+    /**
+     * Per-channel histograms for a SIMPLE (`tiled:false`) MULTICHANNEL image: bin
+     * each already-decoded channel plane's own pixels (no tile server). One
+     * histogram per channel, so the pane's per-channel selector works serverlessly.
+     */
+    computeSimpleMultichannelHistograms(z, planes) {
+        this.sliceHistograms.set(z, planes.map((p) => {
+            const c = new Array(256).fill(0);
+            const d = p.data;
+            for (let i = 0; i < d.length; i += 4) {
+                if (d[i + 3] === 0)
+                    continue;
+                c[d[i]]++; // single-band plane: R=G=B, bin R
+            }
+            return histogram256(c);
+        }));
+        this.host.onChannelHistogramsSampled();
+    }
     /**
      * Native-bit-depth histogram for >8-bit images, from the server `/histogram`
      * endpoint (the 8-bit canvas tiles can't carry 16-bit values). Cached per
@@ -15531,6 +15581,14 @@ class OpenSeadragonVisualizerService extends BaseStoreVisualizer {
         /** preview blob URL → full-res upscaled blob URL (see toFullResUrl), so
          *  re-visiting a simple-mode slice doesn't re-upscale. Revoked on file change. */
         this.simpleFullResUrls = new Map();
+        /** SERVERLESS multichannel (tiled:false + channelCount>1): the stack's
+         *  per-slice per-channel plane URLs, the current slice's decoded planes, and
+         *  the last composite blob URL. Composited client-side via display.channelRgbLut
+         *  (no tile server); kept OFF the tiled isMultiChannel path. */
+        this.simpleMultichannel = false;
+        this.simpleChannelUrls = [];
+        this.simpleChannelPlanes = [];
+        this.simpleCompositeUrl = null;
         /** Skip the full-res upscale above this longest-side dimension — a folder
          *  stack is per-file previews (well under this); this only guards against an
          *  accidental enormous canvas allocation. */
@@ -15662,6 +15720,12 @@ class OpenSeadragonVisualizerService extends BaseStoreVisualizer {
             this.colorLut = buildColormapLut(cm?.data?.value, !!rev);
             this.channelStates = channels;
             this.invertBg = !!invert;
+            // Serverless multichannel: re-composite the current slice from its cached
+            // planes with the new channel states + re-open (no tile-invalidate path).
+            if (this.simpleMultichannel) {
+                void this.recompositeAndOpen();
+                return;
+            }
             // Multichannel: each channel is its own TiledImage — visibility is the
             // image's opacity (window/gamma/colour are applied by recolorChannelTile
             // on the invalidate below). Re-applying the current slice's reveal picks up
@@ -15771,17 +15835,39 @@ class OpenSeadragonVisualizerService extends BaseStoreVisualizer {
         const filename = imageInfo?.fileName;
         this.authHeaders = {};
         const [width, height] = imageInfo.trueImageSize ?? [0, 0];
-        const rawUrl = this.simpleStack.urlFor(imageInfo, z);
+        const meta = imageInfo.imageMeta?.[0];
+        // SERVERLESS MULTICHANNEL: composite the slice's per-channel planes
+        // client-side (no tile server), driven by the channel pane. Kept OFF the
+        // tiled isMultiChannel path (see compositeSimpleMultichannel).
+        const chUrls = imageInfo.channelUrls;
+        this.simpleMultichannel = !!chUrls?.length && (meta?.channelCount ?? 1) > 1;
         let url;
-        if (rawUrl) {
+        if (this.simpleMultichannel) {
+            this.simpleChannelUrls = chUrls;
             try {
-                const previewUrl = await this.simpleStack.fetchAsBlobUrl(rawUrl);
-                // Upscale the (downscaled) preview to full resolution so OSD's world
-                // matches the full-res ROI coordinate space — see toFullResUrl.
-                url = await this.toFullResUrl(previewUrl, width, height);
+                await this.loadSimpleChannelPlanes(chUrls[z] ?? chUrls[0]);
+                url = await this.compositeSimpleMultichannel();
+                // NB: histograms are binned in plot(), AFTER destroyViewer clears the
+                // sampler — computing them here would be wiped by that clear.
             }
             catch (err) {
-                console.warn('[OSD] simple-mode slice fetch failed', err);
+                console.warn('[OSD] simple multichannel composite failed', err);
+            }
+        }
+        else {
+            this.simpleChannelUrls = [];
+            this.simpleChannelPlanes = [];
+            const rawUrl = this.simpleStack.urlFor(imageInfo, z);
+            if (rawUrl) {
+                try {
+                    const previewUrl = await this.simpleStack.fetchAsBlobUrl(rawUrl);
+                    // Upscale the (downscaled) preview to full resolution so OSD's world
+                    // matches the full-res ROI coordinate space — see toFullResUrl.
+                    url = await this.toFullResUrl(previewUrl, width, height);
+                }
+                catch (err) {
+                    console.warn('[OSD] simple-mode slice fetch failed', err);
+                }
             }
         }
         // No loadable URL (empty urls[] or the fetch failed): signal "couldn't
@@ -15790,10 +15876,9 @@ class OpenSeadragonVisualizerService extends BaseStoreVisualizer {
         // the router can fall back, instead of mounting an <img> with an undefined
         // src that throws at runtime.
         if (!url) {
-            console.warn('[OSD] simple-mode slice has no loadable URL; skipping OSD render', rawUrl);
+            console.warn('[OSD] simple-mode slice has no loadable URL; skipping OSD render', filename);
             return { descriptor: null, infoB64: '', z, filename };
         }
-        const meta = imageInfo.imageMeta?.[0];
         const descriptor = {
             width,
             height,
@@ -15862,6 +15947,123 @@ class OpenSeadragonVisualizerService extends BaseStoreVisualizer {
         this.simpleFullResUrls.set(previewUrl, fullResUrl);
         return fullResUrl;
     }
+    /** Sample a SIMPLE-mode slice's own decoded pixels into the histogram — the
+     *  serverless analog of the tiled samplers (no tile server). Fire-and-forget;
+     *  a decode failure just leaves the pane empty rather than throwing. */
+    async sampleSimpleHistogram(url, z) {
+        if (!url)
+            return;
+        try {
+            const img = await this.loadImageEl(url);
+            const w = img.naturalWidth, h = img.naturalHeight;
+            if (!w || !h)
+                return;
+            const c = document.createElement('canvas');
+            c.width = w;
+            c.height = h;
+            const ctx = c.getContext('2d', { willReadFrequently: true });
+            if (!ctx)
+                return;
+            ctx.drawImage(img, 0, 0);
+            const data = ctx.getImageData(0, 0, w, h).data;
+            this.sampler.computeSimpleHistogram(z, data, this.isGrayscaleImage);
+        }
+        catch (err) {
+            console.warn('[OSD] simple-mode histogram sample failed', err);
+        }
+    }
+    /** Fetch + decode a slice's per-channel planes (single-band grayscale) into
+     *  pixel buffers, for the SERVERLESS multichannel compositor. Auth-safe: goes
+     *  through SimpleSliceAccessService (blob:/data: as-is; http via HttpClient). */
+    async loadSimpleChannelPlanes(urls) {
+        const planes = [];
+        for (const u of urls ?? []) {
+            try {
+                const previewUrl = await this.simpleStack.fetchAsBlobUrl(u);
+                const img = await this.loadImageEl(previewUrl);
+                const w = img.naturalWidth, h = img.naturalHeight;
+                if (!w || !h) {
+                    planes.push({ data: new Uint8ClampedArray(0), width: 0, height: 0 });
+                    continue;
+                }
+                const c = document.createElement('canvas');
+                c.width = w;
+                c.height = h;
+                const ctx = c.getContext('2d', { willReadFrequently: true });
+                if (!ctx) {
+                    planes.push({ data: new Uint8ClampedArray(0), width: 0, height: 0 });
+                    continue;
+                }
+                ctx.drawImage(img, 0, 0);
+                planes.push({ data: ctx.getImageData(0, 0, w, h).data, width: w, height: h });
+            }
+            catch (err) {
+                console.warn('[OSD] channel plane decode failed', err);
+                planes.push({ data: new Uint8ClampedArray(0), width: 0, height: 0 });
+            }
+        }
+        this.simpleChannelPlanes = planes;
+    }
+    /** Composite the cached per-channel planes into ONE RGBA image using the
+     *  current channel states (colour/window/gamma/visibility) — the client-side,
+     *  serverless analog of the tiled per-channel 'lighter' compositor
+     *  (same display.channelRgbLut math as recolorChannelTile, applied per-plane).
+     *  Returns a blob: URL of the composite PNG, revoking the previous one. */
+    async compositeSimpleMultichannel() {
+        const planes = this.simpleChannelPlanes;
+        if (!planes.length)
+            return undefined;
+        const w = planes[0].width, h = planes[0].height;
+        if (!w || !h)
+            return undefined;
+        const states = this.store.currentChannelStates();
+        const out = new Uint8ClampedArray(w * h * 4);
+        for (let c = 0; c < planes.length; c++) {
+            const st = states[c];
+            if (st && st.visible === false)
+                continue; // hidden channel contributes nothing
+            const plane = planes[c];
+            if (plane.width !== w || plane.height !== h || !plane.data.length)
+                continue;
+            const { r, g, b } = this.display.channelRgbLut(st);
+            const pd = plane.data;
+            for (let i = 0; i < out.length; i += 4) {
+                if (pd[i + 3] === 0)
+                    continue;
+                const lum = pd[i]; // single-band plane (R=G=B)
+                out[i] += r[lum]; // Uint8ClampedArray clamps → additive ('lighter')
+                out[i + 1] += g[lum];
+                out[i + 2] += b[lum];
+            }
+        }
+        for (let i = 3; i < out.length; i += 4)
+            out[i] = 255; // opaque
+        const canvas = document.createElement('canvas');
+        canvas.width = w;
+        canvas.height = h;
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return undefined;
+        ctx.putImageData(new ImageData(out, w, h), 0, 0);
+        const blob = await new Promise((res) => canvas.toBlob(res, 'image/png'));
+        if (!blob)
+            return undefined;
+        if (this.simpleCompositeUrl)
+            URL.revokeObjectURL(this.simpleCompositeUrl);
+        this.simpleCompositeUrl = URL.createObjectURL(blob);
+        return this.simpleCompositeUrl;
+    }
+    /** Re-composite the current slice from its cached planes (new channel states)
+     *  and re-open — the serverless analog of the tiled invalidate-on-channel-change. */
+    async recompositeAndOpen() {
+        const url = await this.compositeSimpleMultichannel();
+        if (!url || !this.viewer)
+            return;
+        try {
+            this.viewer.open({ type: 'image', url });
+        }
+        catch { /* viewer gone */ }
+    }
     /** Load a URL into an HTMLImageElement (resolves once decoded). Uses
      *  document.createElement rather than `new Image()` because this file's
      *  `Image` import is image-js's decoder, not the DOM element. */
@@ -15877,6 +16079,10 @@ class OpenSeadragonVisualizerService extends BaseStoreVisualizer {
         for (const u of this.simpleFullResUrls.values())
             URL.revokeObjectURL(u);
         this.simpleFullResUrls.clear();
+        if (this.simpleCompositeUrl) {
+            URL.revokeObjectURL(this.simpleCompositeUrl);
+            this.simpleCompositeUrl = null;
+        }
     }
     /** Mount the viewer with a custom tile source pointing at `GET /tile`. */
     plot(plotDiv, imageLoaded, imageInfo, _screenHeight, _plotType, inPlace) {
@@ -15932,6 +16138,15 @@ class OpenSeadragonVisualizerService extends BaseStoreVisualizer {
             this.isMultiChannel = false;
             this.cache.clearChannelGroups();
             this.destroyViewer();
+            // Serverless histogram — AFTER destroyViewer (its last act is sampler.clear()).
+            // Multichannel bins each cached channel plane; single-band / RGB bins the
+            // decoded frame's own pixels.
+            if (this.simpleMultichannel) {
+                this.sampler.computeSimpleMultichannelHistograms(loaded.z, this.simpleChannelPlanes);
+            }
+            else {
+                void this.sampleSimpleHistogram(loaded.url, loaded.z);
+            }
         }
         else {
             // Multichannel fluorescence (indexed/LUT-bearing stacks) composite client-side
@@ -16438,6 +16653,24 @@ class OpenSeadragonVisualizerService extends BaseStoreVisualizer {
         if (!this.viewer)
             return;
         if (this.simpleMode) {
+            if (this.simpleMultichannel) {
+                const urls = this.simpleChannelUrls[z] ?? this.simpleChannelUrls[0];
+                if (!urls)
+                    return;
+                this.currentZ = z;
+                this.viewportPixels = null;
+                void (async () => {
+                    await this.loadSimpleChannelPlanes(urls);
+                    if (this.currentZ !== z || !this.viewer)
+                        return;
+                    this.sampler.computeSimpleMultichannelHistograms(z, this.simpleChannelPlanes);
+                    const url = await this.compositeSimpleMultichannel();
+                    if (this.currentZ !== z || !this.viewer || !url)
+                        return;
+                    this.viewer.open({ type: 'image', url });
+                })();
+                return;
+            }
             const rawUrl = this.simpleUrls[z] ?? this.simpleUrls[0];
             if (!rawUrl)
                 return;
@@ -16456,6 +16689,7 @@ class OpenSeadragonVisualizerService extends BaseStoreVisualizer {
                     console.warn('[OSD] slice re-open failed', e?.message ?? e);
                 });
                 this.viewer.open({ type: 'image', url });
+                void this.sampleSimpleHistogram(url, z); // re-bin the scrubbed slice
             })
                 .catch((err) => console.warn('[OSD] slice fetch failed', err));
             return;
@@ -18648,7 +18882,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);
@@ -19258,8 +19498,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();