@jax-data-science/sci-image-visualizer 0.8.1 → 0.8.3

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

@@ -13397,6 +13397,10 @@ class VisualizerComponent {
          * the newer render's overlay, or applying its ROIs.
          */
         this.renderToken = 0;
+        /** Set once the template, and with it the plot div, exists (see ngAfterViewInit). */
+        this.viewReady = false;
+        /** An image-less dataset whose draw waits for the view: see plotSpatialWithoutImage. */
+        this.pendingSpatialDraw = null;
         this.zIndex = 0;
         this.maxIndex = 0;
         this.contextMenuItems = [];
@@ -14444,6 +14448,20 @@ class VisualizerComponent {
             requestAnimationFrame(() => this.renderIntensityInset());
         };
         window.addEventListener('resize', this.profileResizeListener);
+        this.onViewReady();
+    }
+    /** The plot div exists now: run an image-less draw that arrived before it did. */
+    onViewReady() {
+        this.viewReady = true;
+        const pending = this.pendingSpatialDraw;
+        this.pendingSpatialDraw = null;
+        // Only if it is still the dataset on offer and no image has arrived meanwhile. By id, not by
+        // object: the port may re-emit the same dataset as a new object (a colour-column change does),
+        // and then the current object is the one to draw.
+        const current = this.spatialDataset;
+        if (pending && current && current.id === pending.id && !this.imageInfo) {
+            void this.plotSpatialWithoutImage(current);
+        }
     }
     onProfilePanelDragStart(e) {
         this.profilePanelDragging = true;
@@ -14740,6 +14758,13 @@ class VisualizerComponent {
      * dataset, so regions drawn here are kept per dataset like any image's.
      */
     async plotSpatialWithoutImage(dataset) {
+        if (!this.viewReady) {
+            // A host that creates the visualizer AFTER publishing the dataset (jit-ui opening a file
+            // from its tree) has it replayed into ngOnInit, before the template and its plot div
+            // exist; drawing now finds no target. Draw once the view is ready (onViewReady).
+            this.pendingSpatialDraw = dataset;
+            return;
+        }
         // The same generation as the image pipeline: a newer image or dataset supersedes this
         // draw, and a superseded draw neither reports nor releases the newer one's loading state.
         const token = ++this.renderToken;
@@ -29368,6 +29393,10 @@ class NapariVisualizerService extends BaseStoreVisualizer {
         this.loadingBadge = null;
         this.tileLoading = [];
         this.observationsLoading = 0;
+        /** Image tiles in flight, and the scene they belong to: a fetch that outlives {@link reset}
+         *  settles against the old generation and leaves the new scene's count alone. */
+        this.imageTilesLoading = 0;
+        this.imageTilesGeneration = 0;
         /** Monotonic load generation. Bumped by {@link reset} and {@link cancelLoading}; the frame-loading
          *  loops (volume assembly, surface preload) capture it and bail when it changes, so a Cancel (or a
          *  new plot) actually stops fetching frames instead of running to completion in the background. */
@@ -29686,6 +29715,9 @@ class NapariVisualizerService extends BaseStoreVisualizer {
             return false;
         }
         this.reset();
+        // This plot's scene. A newer plot resets into the next one while this one still awaits, and
+        // a superseded plot must not go on to draw (or count image tiles) into the newer scene.
+        const scene = this.imageTilesGeneration;
         this.host = host;
         this.plotDivId = plotDiv;
         this.currentPlotType = plotType;
@@ -29727,6 +29759,8 @@ class NapariVisualizerService extends BaseStoreVisualizer {
             });
             this.viewer = viewer;
             await viewer.ready;
+            if (scene !== this.imageTilesGeneration)
+                return false;
             if (isSpatialOmics3d(plotType)) {
                 await this.mountSpatialOmics3d(viewer, host);
             }
@@ -29823,11 +29857,15 @@ class NapariVisualizerService extends BaseStoreVisualizer {
         const v = this.viewer;
         if (!v)
             return;
+        const scene = this.imageTilesGeneration;
         const desc = await this.ensureDescriptor();
+        // Reset into a newer scene while the descriptor was in flight: this render is superseded.
+        if (scene !== this.imageTilesGeneration)
+            return;
         if (desc && desc.levels?.length) {
             if (token != null && token !== this.sliceReq)
                 return;
-            await this.renderImageTiled(z, desc);
+            await this.renderImageTiled(z, desc, scene);
             return;
         }
         return this.renderImageStitched(z, token);
@@ -29920,7 +29958,7 @@ class NapariVisualizerService extends BaseStoreVisualizer {
      * coordinates so regions align. Same three modes as the stitch path. Per-channel layers use the
      * REAL pyramid levels (per-channel tiles only exist there); the composite uses all levels.
      */
-    async renderImageTiled(z, desc) {
+    async renderImageTiled(z, desc, scene) {
         const v = this.viewer;
         if (!v)
             return;
@@ -29937,7 +29975,7 @@ class NapariVisualizerService extends BaseStoreVisualizer {
                 const st = states.find((s) => s.index === c);
                 const color = st?.color ?? desc.channelInfo?.[c]?.color ?? tintFor(c);
                 views.push({
-                    source: this.buildTiledSource(desc, c, 1),
+                    source: this.buildTiledSource(desc, c, 1, scene),
                     tint: color,
                     name: st?.name ?? `ch${c}`,
                     contrastLimits: [st?.min ?? 0, st?.max ?? 255],
@@ -29953,7 +29991,7 @@ class NapariVisualizerService extends BaseStoreVisualizer {
             const st = states[0];
             this.channelView.render('grayscale', [
                 {
-                    source: this.buildTiledSource(desc, undefined, 1),
+                    source: this.buildTiledSource(desc, undefined, 1, scene),
                     colormap: this.grayscaleColormap(),
                     contrastLimits: [st?.min ?? 0, st?.max ?? 255],
                     gamma: st?.gamma ?? 1,
@@ -29963,7 +30001,7 @@ class NapariVisualizerService extends BaseStoreVisualizer {
         }
         else {
             this.imageMode = 'rgb';
-            this.channelView.render('rgb', [{ source: this.buildTiledSource(desc, undefined, 4) }], {
+            this.channelView.render('rgb', [{ source: this.buildTiledSource(desc, undefined, 4, scene) }], {
                 interpolation,
             });
         }
@@ -29974,8 +30012,9 @@ class NapariVisualizerService extends BaseStoreVisualizer {
         await this.refreshHistogramSamples(z, desc);
     }
     /** Build a pyramidal TiledSource backed by the server `/tile` endpoint. `channel` selects a band
-     *  (grayscale luminance, real levels only); omit it for the composite (RGBA, all levels). */
-    buildTiledSource(desc, channel, channels) {
+     *  (grayscale luminance, real levels only); omit it for the composite (RGBA, all levels).
+     *  `scene` is the generation of the render that asked for it, taken before that render's awaits. */
+    buildTiledSource(desc, channel, channels, scene) {
         const infoB64 = this.tiles.getSelectedInfoB64() ?? '';
         // Per-channel tiles exist only at REAL Bio-Formats levels; the composite exists at all levels.
         const usable = channel == null
@@ -29985,6 +30024,9 @@ class NapariVisualizerService extends BaseStoreVisualizer {
         const tileSize = desc.tileSize || TILE_SIZE;
         const ch = channel == null ? '' : `&channel=${channel}`;
         const api = this.api;
+        // The scene this source draws: its tiles count on the badge only while that scene is current,
+        // so a request the disposed source still issues after a reset never shows on the new one.
+        const generation = scene;
         return {
             kind: 'tiled',
             width: desc.width,
@@ -29998,17 +30040,31 @@ class NapariVisualizerService extends BaseStoreVisualizer {
             fetchTile: async (key) => {
                 const res = usable[key.level]?.res ?? key.level;
                 const url = `${api}tile?info=${infoB64}&res=${res}&col=${key.col}&row=${key.row}&z=${key.z}&tileSize=${tileSize}${ch}`;
-                const headers = await this.tiles
-                    .getAuthHeaders()
-                    .catch(() => ({}));
-                const resp = await fetch(url, { headers });
-                if (!resp.ok) {
-                    throw new Error(`[napari-js] tile ${key.level}/${key.col}/${key.row} → ${resp.status}`);
+                // "Image reloading…" on the loading badge while any tile of the image is in flight.
+                const counted = generation === this.imageTilesGeneration;
+                if (counted) {
+                    this.imageTilesLoading++;
+                    this.showLoading();
+                }
+                try {
+                    const headers = await this.tiles
+                        .getAuthHeaders()
+                        .catch(() => ({}));
+                    const resp = await fetch(url, { headers });
+                    if (!resp.ok) {
+                        throw new Error(`[napari-js] tile ${key.level}/${key.col}/${key.row} → ${resp.status}`);
+                    }
+                    const bmp = await createImageBitmap(await resp.blob());
+                    if (channels === 4)
+                        return { width: bmp.width, height: bmp.height, data: bmp };
+                    return this.bitmapToLuminance(bmp);
+                }
+                finally {
+                    if (counted && generation === this.imageTilesGeneration) {
+                        this.imageTilesLoading--;
+                        this.showLoading();
+                    }
                 }
-                const bmp = await createImageBitmap(await resp.blob());
-                if (channels === 4)
-                    return { width: bmp.width, height: bmp.height, data: bmp };
-                return this.bitmapToLuminance(bmp);
             },
         };
     }
@@ -30170,7 +30226,11 @@ class NapariVisualizerService extends BaseStoreVisualizer {
         if (!this.host)
             return;
         this.loadingBadge ??= new NapariLoadingBadge(this.host);
-        this.loadingBadge.set([...(this.observationsLoading > 0 ? ['Observations'] : []), ...this.tileLoading]);
+        this.loadingBadge.set([
+            ...(this.imageTilesLoading > 0 ? ['Image'] : []),
+            ...(this.observationsLoading > 0 ? ['Observations'] : []),
+            ...this.tileLoading,
+        ]);
     }
     installNavigator(z) {
         this.navigator?.destroy();
@@ -32719,6 +32779,8 @@ class NapariVisualizerService extends BaseStoreVisualizer {
         this.loadingBadge = null;
         this.tileLoading = [];
         this.observationsLoading = 0;
+        this.imageTilesLoading = 0;
+        this.imageTilesGeneration++;
         this.regionOverlay?.destroy();
         this.regionOverlay = null;
         this.axesLabels?.destroy();