@jax-data-science/sci-image-visualizer 0.2.4 → 0.2.6

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

@@ -2375,6 +2375,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: WandService }] });
 
+/**
+ * Keys for the toast outlets the library renders for itself.
+ *
+ * PrimeNG delivers a message to a `<p-toast>` only when the keys match — a
+ * keyless message reaches a keyless toast and nothing else. The library used to
+ * emit its notices with no key, or with jit-ui's own keys (`app-toast`,
+ * `center-toast`), which meant its user-facing feedback silently depended on the
+ * host mounting the right markup. In jit-ui it did; in every other host —
+ * including this repo's browser example — errors and results went nowhere, so a
+ * failed or no-op action looked like a dead button.
+ *
+ * These keys are owned by the library and their outlets are rendered by
+ * {@link VisualizerComponent}, so the feedback works in any host. A host that
+ * wants these notices somewhere else should not render an outlet with the same
+ * key — two matching outlets show the message twice.
+ */
+/** General notices: save results, validation, action outcomes. Default position. */
+const VIZ_TOAST_KEY = 'sci-viz-notice';
+/**
+ * Failures that must interrupt: rendering/tile errors that leave the viewer in a
+ * bad state. Centered and sticky, matching how these were surfaced before.
+ */
+const VIZ_ALERT_TOAST_KEY = 'sci-viz-alert';
+
 /**
  * Bezier-curve helpers (no external dependency).
  *
@@ -5832,11 +5856,11 @@ class RegionEditorComponent {
                 this.regionApi.setPresetSet(set);
                 this.presetDraft = this.clonePresetSet(this.regionApi.getPresetSet());
                 this.setRegionsFromEditor();
-                this.messageService.add({ key: 'app-toast', severity: 'success',
+                this.messageService.add({ key: VIZ_TOAST_KEY, severity: 'success',
                     summary: 'Classes imported', detail: 'Annotation classes loaded.' });
             }
             catch (err) {
-                this.messageService.add({ key: 'app-toast', severity: 'error',
+                this.messageService.add({ key: VIZ_TOAST_KEY, severity: 'error',
                     summary: 'Import failed', detail: `${err}` });
             }
         };
@@ -5937,7 +5961,7 @@ class RegionEditorComponent {
         const height = Math.max(1, Math.round(size.height * scale));
         if (scale < 1) {
             this.messageService.add({
-                key: 'app-toast',
+                key: VIZ_TOAST_KEY,
                 severity: 'info',
                 summary: 'Mask downscaled',
                 detail: `Image too large for a full-resolution mask; saving at ${width}×${height}.`,
@@ -6010,7 +6034,7 @@ class RegionEditorComponent {
         this.maskBusy = false;
         this.maskEncoding = false;
         this.messageService.add({
-            key: 'app-toast',
+            key: VIZ_TOAST_KEY,
             severity: 'error',
             summary: 'Could not create mask',
             detail,
@@ -6057,7 +6081,7 @@ class RegionEditorComponent {
             next: () => {
                 this.saveAsBusy = false;
                 this.messageService.add({
-                    key: 'app-toast',
+                    key: VIZ_TOAST_KEY,
                     severity: 'success',
                     summary: 'Regions saved',
                     detail: `Saved ROIs for ${slices.length} slice${slices.length === 1 ? '' : 's'}`,
@@ -6066,7 +6090,7 @@ class RegionEditorComponent {
             error: (err) => {
                 this.saveAsBusy = false;
                 this.messageService.add({
-                    key: 'app-toast',
+                    key: VIZ_TOAST_KEY,
                     severity: 'error',
                     summary: 'Error saving regions',
                     detail: `${err?.message ?? err}`,
@@ -6097,7 +6121,7 @@ class RegionEditorComponent {
                 catch (err) {
                     this.saveAsBusy = false;
                     this.messageService.add({
-                        key: 'app-toast',
+                        key: VIZ_TOAST_KEY,
                         severity: 'error',
                         summary: 'Error saving regions',
                         detail: `${err?.message ?? err}`,
@@ -6109,7 +6133,7 @@ class RegionEditorComponent {
                         this.saveAsBusy = false;
                         this.showSaveAsDialog = false;
                         this.messageService.add({
-                            key: 'app-toast',
+                            key: VIZ_TOAST_KEY,
                             severity: 'success',
                             summary: 'Regions saved',
                             detail: `Saved as ${filename}`,
@@ -6118,7 +6142,7 @@ class RegionEditorComponent {
                     error: (err) => {
                         this.saveAsBusy = false;
                         this.messageService.add({
-                            key: 'app-toast',
+                            key: VIZ_TOAST_KEY,
                             severity: 'error',
                             summary: 'Error saving regions',
                             detail: `${err.message || err}`,
@@ -6560,6 +6584,32 @@ class VisualizerComponent {
      *  one key would each render the same message — a duplicate toast. A unique
      *  key per instance scopes the toast to the component that raised it. */
     static { this.nextToastId = 0; }
+    /**
+     * The library also raises notices from places that have no instance of their
+     * own to key against: {@link PlotlyService} is `providedIn: 'root'`, and the
+     * region editor is a child dialog. Those use the fixed
+     * {@link VIZ_TOAST_KEY} / {@link VIZ_ALERT_TOAST_KEY} outlets.
+     *
+     * For the same reason the per-instance key above exists, exactly ONE mounted
+     * visualizer may render those shared outlets — otherwise a message from the
+     * root service would be shown once per live viewer (jit-ui runs a main view
+     * and a pipeline-preview at the same time). The first to init claims them and
+     * releases on destroy, so the surviving viewer picks them up.
+     */
+    static { this.liveInstances = new Set(); }
+    /**
+     * Whether this instance renders the shared outlets. The owner is simply the
+     * oldest live visualizer — a `Set` iterates in insertion order, so when the
+     * owner is destroyed the next one takes over on its following change-detection
+     * pass. Tracking a set rather than a single owner matters: with a lone
+     * `owner` reference, tearing down the owner while a sibling was already
+     * initialised would leave nobody rendering the outlets, and every notice from
+     * the root service would silently vanish again.
+     */
+    get ownsSharedToasts() {
+        const oldest = VisualizerComponent.liveInstances.values().next();
+        return !oldest.done && oldest.value === this;
+    }
     /** Which toolbar groups to show. A partial override merges over the full set,
      *  so `{ specialTools: false }` hides only that group. Defaults to everything. */
     set toolbarTools(v) {
@@ -6596,6 +6646,8 @@ class VisualizerComponent {
         this.samPointTool = samPointTool;
         this.regionOps = regionOps;
         this.vizConfig = vizConfig;
+        this.vizToastKey = VIZ_TOAST_KEY;
+        this.vizAlertToastKey = VIZ_ALERT_TOAST_KEY;
         this.isStackEvent = new EventEmitter(false);
         this.isGrayscaleEvent = new EventEmitter(false);
         this._toolbarTools = ALL_TOOLBAR_TOOLS;
@@ -6623,6 +6675,13 @@ class VisualizerComponent {
         // the user doesn't mistake it for the final preview.
         this.sharpening = false;
         this.running = false;
+        /**
+         * Monotonic render generation. Bumped when a render starts, so a render that
+         * has been superseded by a newer image can be recognised and made inert: its
+         * callbacks return early instead of painting, clearing `running`, releasing
+         * the newer render's overlay, or applying its ROIs.
+         */
+        this.renderToken = 0;
         this.zIndex = 0;
         this.maxIndex = 0;
         this.contextMenuItems = [];
@@ -6656,6 +6715,25 @@ class VisualizerComponent {
          *  every point click, which re-runs inference). */
         this.samToastShown = false;
         this.samToastKey = `sam-${VisualizerComponent.nextToastId++}`;
+        /**
+         * Outlet for the library's own result/error notices.
+         *
+         * PrimeNG routes a message to a `<p-toast>` only when the keys match — a
+         * keyless message reaches a keyless toast and nothing else. These notices used
+         * to be emitted with no key, so they rendered only in hosts that happen to
+         * mount a bare `<p-toast>` (jit-ui does, in its file-tree component). Every
+         * other host — including this repo's own browser example — dropped them
+         * silently, which made a failed or no-op segmentation look like a dead button:
+         * the sticky progress toast is cleared in the same tick by hideSamToast, and
+         * the message explaining why never appeared anywhere.
+         *
+         * Keyed to this component instance so the library renders its own outlet and
+         * is not dependent on host markup. Deliberately NOT the sticky toast's key:
+         * {@link hideSamToast} clears that key in the `finally`, which would wipe the
+         * result the moment it was posted, and the sticky toast's custom template is
+         * built for the live status + progress bar.
+         */
+        this.resultToastKey = `${this.samToastKey}-result`;
         /** Subscriptions to the point tool's live feeds (status/busy/download). */
         this.samPointSub = new Subscription();
         /** Vertex eraser radius in image-pixel coordinates. */
@@ -6779,6 +6857,8 @@ class VisualizerComponent {
         }
     }
     ngOnInit() {
+        // Join the live set; the oldest member renders the shared notice outlets.
+        VisualizerComponent.liveInstances.add(this);
         this.state.setDiagram(this);
         this.selectedColormap =
             this.colormapsOptions[0].children.find((c) => c.label === 'Greys Inv') ??
@@ -6924,163 +7004,198 @@ class VisualizerComponent {
                     this.loadedFileName = imgInfo.fileName;
                     this.plotService.setImageMeta(this.imageInfo.imageMeta);
                     const urls = imgInfo.urls;
-                    if (!this.running) {
+                    // A newer image ALWAYS preempts an in-flight render. This was
+                    // `if (!this.running)`, which DROPPED the new image while the old one
+                    // finished: identity above had already flipped to the new file, so the
+                    // app reported image B as loaded while image A stayed on screen. Worse,
+                    // a cold image holds the slot for its whole server-side cache fill, so
+                    // every click for 1-2 minutes was discarded against a blank viewport
+                    // and a "Loading image..." overlay that never resolved.
+                    if (urls) {
+                        const token = ++this.renderToken;
+                        const isCurrent = () => this.renderToken === token;
+                        if (this.running) {
+                            // Stop the previous render's frame streaming (napari volume/surface
+                            // preload keeps fetching otherwise) and clear its sharpen flag. Its
+                            // callbacks are already inert via the token, so it can neither paint
+                            // nor release the overlay this render now owns.
+                            this.plotService.cancelLoading?.();
+                            this.sharpening = false;
+                        }
                         // image size — measure the plot div directly so the toolbar height is excluded
                         const plotDiv = document.getElementById(this.plotDivName);
                         const screenHeight = plotDiv?.offsetHeight || 500;
-                        if (urls) {
-                            this.plotService.reset();
-                            this.stackLoading = imgInfo.isStack && imgInfo.showStack;
-                            // set max index of stack — computed before updateZIndex so a
-                            // fresh stack (shorter or longer than whatever was previously
-                            // loaded) clamps against ITS bounds, not the stale ones.
-                            // One URL per slice (0-indexed), so the last reachable index is
-                            // length-1 — earlier `length-2` dropped the final slice.
-                            this.maxIndex = urls.length > 1 ? urls.length - 1 : 0;
-                            // One-shot hint: jump straight to a specific slice (e.g. the
-                            // file the user actually clicked within a numbered series).
-                            // Consumed immediately so redelivering the same ImageInfo later
-                            // (a plot-type switch, reloadAndPlot) doesn't reset the user's
-                            // current scrub position back to it.
-                            if (imgInfo.initialZIndex !== undefined) {
-                                this.zIndex = imgInfo.initialZIndex;
-                                imgInfo.initialZIndex = undefined;
+                        this.plotService.reset();
+                        this.stackLoading = imgInfo.isStack && imgInfo.showStack;
+                        // set max index of stack — computed before updateZIndex so a
+                        // fresh stack (shorter or longer than whatever was previously
+                        // loaded) clamps against ITS bounds, not the stale ones.
+                        // One URL per slice (0-indexed), so the last reachable index is
+                        // length-1 — earlier `length-2` dropped the final slice.
+                        this.maxIndex = urls.length > 1 ? urls.length - 1 : 0;
+                        // One-shot hint: jump straight to a specific slice (e.g. the
+                        // file the user actually clicked within a numbered series).
+                        // Consumed immediately so redelivering the same ImageInfo later
+                        // (a plot-type switch, reloadAndPlot) doesn't reset the user's
+                        // current scrub position back to it.
+                        if (imgInfo.initialZIndex !== undefined) {
+                            this.zIndex = imgInfo.initialZIndex;
+                            imgInfo.initialZIndex = undefined;
+                        }
+                        // make sure the zindex is within bounds
+                        this.updateZIndex(urls);
+                        this.running = true;
+                        // Multi-tier rendering (small blurry tier first, then sharpen in
+                        // place) — sequencing lives in RenderOrchestrator; this component
+                        // supplies the phase render and owns the UI flags via callbacks.
+                        // 3D plot types render single-pass: the in-place large pass doesn't
+                        // rebuild a 3D gl-mesh isosurface, so the sharpen step blanked it.
+                        const hasSmallTier = this.isHeatmap &&
+                            (imgInfo.smallUrls?.length ?? 0) === urls.length &&
+                            (imgInfo.smallUrls?.length ?? 0) > 0;
+                        const smallImgInfo = hasSmallTier ? { ...imgInfo, urls: imgInfo.smallUrls } : null;
+                        // Enter per-slice stack mode with the given slice→regions map and
+                        // seed the "previous shapes" from the now-live slice. enterStackMode
+                        // makes zIndex's slice live and resets undo (jit-ui#93).
+                        const enterStack = (slices, layout) => {
+                            this.plotService.enterStackMode(slices, this.zIndex, layout);
+                            const shapes = this.plotService
+                                .getRegions()
+                                .map((region) => region.getShape(this.plotService.getShowShapeLabel()));
+                            this.plotService.setPreviousShapes(shapes);
+                        };
+                        const applyRoi = () => {
+                            // Folder stack: a stack of self-contained per-slice files
+                            // (tiled === false; see loadSeriesAsStack). Each slice-file may
+                            // carry its own sibling "<stem>.geojson" (roiJsonStrs[z]), but a
+                            // fresh folder with none yet leaves roiJsonStrs undefined — key
+                            // off `tiled === false`, NOT roiJsonStrs, so an unannotated
+                            // folder stack still enters the per-slice-file layout (and saves
+                            // back one geojson per slice-file) rather than falling through to
+                            // the single-file combined path (jit-ui#93).
+                            if (imgInfo.isStack && imgInfo.tiled === false) {
+                                const perSlice = imgInfo.roiJsonStrs;
+                                const sliceCount = imgInfo.urls?.length ?? perSlice?.length ?? 0;
+                                const slices = new Map();
+                                for (let z = 0; z < sliceCount; z++) {
+                                    const json = perSlice?.[z] ?? null;
+                                    slices.set(z, json ? this.plotService.importRegions(json) : []);
+                                }
+                                enterStack(slices, 'per-slice-file');
+                                return;
                             }
-                            // make sure the zindex is within bounds
-                            this.updateZIndex(urls);
-                            this.running = true;
-                            // Multi-tier rendering (small blurry tier first, then sharpen in
-                            // place) — sequencing lives in RenderOrchestrator; this component
-                            // supplies the phase render and owns the UI flags via callbacks.
-                            // 3D plot types render single-pass: the in-place large pass doesn't
-                            // rebuild a 3D gl-mesh isosurface, so the sharpen step blanked it.
-                            const hasSmallTier = this.isHeatmap &&
-                                (imgInfo.smallUrls?.length ?? 0) === urls.length &&
-                                (imgInfo.smallUrls?.length ?? 0) > 0;
-                            const smallImgInfo = hasSmallTier ? { ...imgInfo, urls: imgInfo.smallUrls } : null;
-                            // Enter per-slice stack mode with the given slice→regions map and
-                            // seed the "previous shapes" from the now-live slice. enterStackMode
-                            // makes zIndex's slice live and resets undo (jit-ui#93).
-                            const enterStack = (slices, layout) => {
-                                this.plotService.enterStackMode(slices, this.zIndex, layout);
-                                const shapes = this.plotService
-                                    .getRegions()
-                                    .map((region) => region.getShape(this.plotService.getShowShapeLabel()));
-                                this.plotService.setPreviousShapes(shapes);
-                            };
-                            const applyRoi = () => {
-                                // Folder stack: a stack of self-contained per-slice files
-                                // (tiled === false; see loadSeriesAsStack). Each slice-file may
-                                // carry its own sibling "<stem>.geojson" (roiJsonStrs[z]), but a
-                                // fresh folder with none yet leaves roiJsonStrs undefined — key
-                                // off `tiled === false`, NOT roiJsonStrs, so an unannotated
-                                // folder stack still enters the per-slice-file layout (and saves
-                                // back one geojson per slice-file) rather than falling through to
-                                // the single-file combined path (jit-ui#93).
-                                if (imgInfo.isStack && imgInfo.tiled === false) {
-                                    const perSlice = imgInfo.roiJsonStrs;
-                                    const sliceCount = imgInfo.urls?.length ?? perSlice?.length ?? 0;
+                            // Single-file z-stack: one sibling geojson holding every slice's
+                            // regions indexed by QuPath's geometry.plane.z. Enter per-slice
+                            // mode (saving back one combined z-indexed geojson) when the
+                            // geojson actually carries slice indices, or when there's nothing
+                            // yet to author against. A legacy geojson whose regions are all on
+                            // the default plane stays global (shown on every slice) so
+                            // existing single-plane annotations aren't confined to slice 0.
+                            const roiJson = imgInfo.roiJsonStr;
+                            if (imgInfo.isStack) {
+                                const regions = roiJson ? this.plotService.importRegions(roiJson) : [];
+                                const hasSliceInfo = regions.some((r) => (r.z ?? 0) !== 0);
+                                if (!roiJson || hasSliceInfo) {
                                     const slices = new Map();
-                                    for (let z = 0; z < sliceCount; z++) {
-                                        const json = perSlice?.[z] ?? null;
-                                        slices.set(z, json ? this.plotService.importRegions(json) : []);
+                                    for (const r of regions) {
+                                        const z = r.z ?? 0;
+                                        const bucket = slices.get(z);
+                                        if (bucket)
+                                            bucket.push(r);
+                                        else
+                                            slices.set(z, [r]);
                                     }
-                                    enterStack(slices, 'per-slice-file');
+                                    enterStack(slices, 'combined');
                                     return;
                                 }
-                                // Single-file z-stack: one sibling geojson holding every slice's
-                                // regions indexed by QuPath's geometry.plane.z. Enter per-slice
-                                // mode (saving back one combined z-indexed geojson) when the
-                                // geojson actually carries slice indices, or when there's nothing
-                                // yet to author against. A legacy geojson whose regions are all on
-                                // the default plane stays global (shown on every slice) so
-                                // existing single-plane annotations aren't confined to slice 0.
-                                const roiJson = imgInfo.roiJsonStr;
-                                if (imgInfo.isStack) {
-                                    const regions = roiJson ? this.plotService.importRegions(roiJson) : [];
-                                    const hasSliceInfo = regions.some((r) => (r.z ?? 0) !== 0);
-                                    if (!roiJson || hasSliceInfo) {
-                                        const slices = new Map();
-                                        for (const r of regions) {
-                                            const z = r.z ?? 0;
-                                            const bucket = slices.get(z);
-                                            if (bucket)
-                                                bucket.push(r);
-                                            else
-                                                slices.set(z, [r]);
-                                        }
-                                        enterStack(slices, 'combined');
-                                        return;
-                                    }
-                                }
-                                // Single-plane image (or a legacy global z-stack geojson): one
-                                // region set for the whole image.
-                                if (roiJson) {
-                                    const regions = this.plotService.importRegions(roiJson);
-                                    this.plotService.setRegions(regions);
-                                    const shapes = regions.map((region) => region.getShape(this.plotService.getShowShapeLabel()));
-                                    this.plotService.setPreviousShapes(shapes);
-                                }
-                                // Loading an image's saved ROIs is not a user edit — start the
-                                // undo history fresh so the first undo can't wipe them (jit-ui#85).
-                                this.plotService.resetUndoHistory();
-                            };
-                            let overlayReleased = false;
-                            const releaseOverlay = () => {
-                                if (overlayReleased)
-                                    return;
-                                overlayReleased = true;
-                                if (imgInfo.isStack && imgInfo.showStack)
-                                    this.stackLoading = false;
-                                this.state.setImageLoading(false);
-                            };
-                            new RenderOrchestrator({
-                                // inPlace=true updates the existing render instead of rebuilding
-                                // it, so the canvas doesn't blank during the small→large swap.
-                                renderPhase: (phaseInfo, inPlace) => this.plotService.load(phaseInfo, this.zIndex).then((loadedImage) => {
+                            }
+                            // Single-plane image (or a legacy global z-stack geojson): one
+                            // region set for the whole image.
+                            if (roiJson) {
+                                const regions = this.plotService.importRegions(roiJson);
+                                this.plotService.setRegions(regions);
+                                const shapes = regions.map((region) => region.getShape(this.plotService.getShowShapeLabel()));
+                                this.plotService.setPreviousShapes(shapes);
+                            }
+                            // Loading an image's saved ROIs is not a user edit — start the
+                            // undo history fresh so the first undo can't wipe them (jit-ui#85).
+                            this.plotService.resetUndoHistory();
+                        };
+                        let overlayReleased = false;
+                        const releaseOverlay = () => {
+                            if (overlayReleased)
+                                return;
+                            overlayReleased = true;
+                            if (imgInfo.isStack && imgInfo.showStack)
+                                this.stackLoading = false;
+                            this.state.setImageLoading(false);
+                        };
+                        new RenderOrchestrator({
+                            // inPlace=true updates the existing render instead of rebuilding
+                            // it, so the canvas doesn't blank during the small→large swap.
+                            renderPhase: (phaseInfo, inPlace) => {
+                                // Superseded BEFORE this phase started — don't even issue the load.
+                                // RenderOrchestrator calls renderPhase once per tier and retries the
+                                // sharpen pass on failure, so checking only after the load resolves
+                                // would let a preempted render keep fetching slices/tiles for an
+                                // image nobody is looking at.
+                                if (!isCurrent())
+                                    return Promise.resolve(null);
+                                return this.plotService.load(phaseInfo, this.zIndex).then((loadedImage) => {
+                                    // Preempted while this phase was loading — drop it on the floor.
+                                    if (!isCurrent())
+                                        return null;
                                     // Guard against a newer click reaching us mid-render.
                                     if (phaseInfo.fileName !== loadedImage.filename)
                                         return null;
                                     return this.plotService.plot(this.plotDivName, loadedImage, phaseInfo, screenHeight, this.plotType, inPlace);
-                                }),
-                                smallShown: () => {
-                                    // If the file is still being cached/prepared server-side, keep the full
-                                    // cache-progress overlay up instead of dropping to the translucent "Sharpening
-                                    // preview..." spinner over a blank canvas (a large uncached image renders its
-                                    // small preview before its tiles exist). finished() releases the overlay once
-                                    // the real render lands.
-                                    if (this.isCaching)
-                                        return;
-                                    // Small tier on screen — drop the full overlay but keep a translucent spinner so
-                                    // the blurry render isn't mistaken for the final image.
-                                    releaseOverlay();
-                                    this.sharpening = true;
-                                },
-                                sharpenSettled: () => {
-                                    this.sharpening = false;
-                                },
-                                finished: (_viaSmall, logTag) => {
-                                    // Idempotent — releases now if smallShown deferred it (caching) or was skipped.
-                                    releaseOverlay();
-                                    this.running = false;
-                                    applyRoi();
-                                    console.log(logTag);
-                                },
-                                sharpenFailed: (err) => {
-                                    // The small tier stays on screen as the fallback — tell the
-                                    // user the sharper version isn't coming.
-                                    const msg = err?.error?.message || err?.message || err?.statusText || String(err);
-                                    this.messageService.add({
-                                        key: 'center-toast',
-                                        severity: 'warn',
-                                        summary: 'Preview not sharpened',
-                                        detail: `The full-resolution preview did not load (${msg}). The low-resolution preview is still shown. Try clicking the image again.`,
-                                    });
-                                    this.running = false;
-                                    applyRoi();
-                                },
-                            }).render(imgInfo, smallImgInfo);
-                        }
+                                });
+                            },
+                            smallShown: () => {
+                                if (!isCurrent())
+                                    return; // superseded by a newer image
+                                // If the file is still being cached/prepared server-side, keep the full
+                                // cache-progress overlay up instead of dropping to the translucent "Sharpening
+                                // preview..." spinner over a blank canvas (a large uncached image renders its
+                                // small preview before its tiles exist). finished() releases the overlay once
+                                // the real render lands.
+                                if (this.isCaching)
+                                    return;
+                                // Small tier on screen — drop the full overlay but keep a translucent spinner so
+                                // the blurry render isn't mistaken for the final image.
+                                releaseOverlay();
+                                this.sharpening = true;
+                            },
+                            sharpenSettled: () => {
+                                if (!isCurrent())
+                                    return; // superseded by a newer image
+                                this.sharpening = false;
+                            },
+                            finished: (_viaSmall, logTag) => {
+                                if (!isCurrent())
+                                    return; // superseded by a newer image
+                                // Idempotent — releases now if smallShown deferred it (caching) or was skipped.
+                                releaseOverlay();
+                                this.running = false;
+                                applyRoi();
+                                console.log(logTag);
+                            },
+                            sharpenFailed: (err) => {
+                                if (!isCurrent())
+                                    return; // superseded by a newer image
+                                // The small tier stays on screen as the fallback — tell the
+                                // user the sharper version isn't coming.
+                                const msg = err?.error?.message || err?.message || err?.statusText || String(err);
+                                this.messageService.add({
+                                    key: this.vizAlertToastKey,
+                                    severity: 'warn',
+                                    summary: 'Preview not sharpened',
+                                    detail: `The full-resolution preview did not load (${msg}). The low-resolution preview is still shown. Try clicking the image again.`,
+                                });
+                                this.running = false;
+                                applyRoi();
+                            },
+                        }).render(imgInfo, smallImgInfo);
                     }
                 }
             },
@@ -7088,7 +7203,7 @@ class VisualizerComponent {
                 const msg = err?.error?.message || err?.message || err?.statusText || String(err);
                 console.error('Error occured when getting image info', err);
                 this.messageService.add({
-                    key: 'center-toast',
+                    key: this.vizAlertToastKey,
                     sticky: true,
                     severity: 'error',
                     summary: 'An error occured',
@@ -7307,6 +7422,8 @@ class VisualizerComponent {
         }
     }
     ngOnDestroy() {
+        // Leave the live set so the next-oldest visualizer picks up the outlets.
+        VisualizerComponent.liveInstances.delete(this);
         this.scrubber.cancel();
         this.samPointSub.unsubscribe();
         if (this.plotContextMenuListener) {
@@ -7705,6 +7822,7 @@ class VisualizerComponent {
         const inv = this.regionOps.inverse(sel, w, h);
         if (!inv) {
             this.messageService.add({
+                key: this.resultToastKey,
                 severity: 'warn', summary: 'Inverse',
                 detail: 'Nothing to invert — select one or more closed regions first.',
             });
@@ -7773,13 +7891,17 @@ class VisualizerComponent {
         try {
             const n = await op();
             this.messageService.add({
+                key: this.resultToastKey,
                 severity: n > 0 ? 'success' : 'warn',
                 summary: label,
                 detail: tool.status$.value || (n > 0 ? `Added ${n} region(s).` : 'No regions added.'),
             });
         }
         catch (e) {
-            this.messageService.add({ severity: 'error', summary: `${label} failed`, detail: String(e) });
+            this.messageService.add({
+                key: this.resultToastKey,
+                severity: 'error', summary: `${label} failed`, detail: String(e),
+            });
         }
         finally {
             psub.unsubscribe();
@@ -8081,11 +8203,11 @@ class VisualizerComponent {
         this.plotService.setVertexEraserMode(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: VisualizerComponent, deps: [{ token: IMAGE_STATE_PORT }, { token: VISUALIZER }, { token: i1$2.MessageService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: VisualizerStore }, { token: SamToolService }, { token: CellSegmentToolService }, { token: SamPointToolService }, { token: RegionOpsService }, { token: VIZ_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: VisualizerComponent, selector: "visualizer", inputs: { toolbarTools: "toolbarTools", testMode: "testMode" }, outputs: { isStackEvent: "isStackEvent", isGrayscaleEvent: "isGrayscaleEvent" }, host: { listeners: { "window:keydown": "onKeydown($event)" } }, viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["cm"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- SAM toast: live status + encoder-download progress bar (jit-ui#90). Sticky\n     while a segment runs; stays open until the bar reaches 100% and the run ends. -->\n<p-toast [key]=\"samToastKey\" position=\"bottom-right\">\n  <ng-template let-message pTemplate=\"message\">\n    <div style=\"flex: 1; min-width: 16rem\">\n      <div class=\"font-bold mb-1\">{{ message.summary }}</div>\n      <div>{{ samStatus || message.detail }}</div>\n      <p-progressBar *ngIf=\"samDownloading\" [value]=\"samProgress\" styleClass=\"mt-2 sam-progress\"></p-progressBar>\n      <p-progressBar *ngIf=\"samBusy && !samDownloading\" mode=\"indeterminate\" styleClass=\"mt-2\"\n                     [style]=\"{ height: '4px' }\"></p-progressBar>\n    </div>\n  </ng-template>\n</p-toast>\n\n<!-- Toolbar dock: docked across the top by default; drag the handle to detach\n     it into a floating, movable window (frees the top row for the image). -->\n<div class=\"toolbar-dock\" [class.floating]=\"toolbarFloating\"\n     [style.left.px]=\"toolbarFloating ? toolbarPos.x : null\"\n     [style.top.px]=\"toolbarFloating ? toolbarPos.y : null\">\n  <div class=\"toolbar-drag-handle\" (mousedown)=\"onToolbarDragStart($event)\"\n       pTooltip=\"Drag to float the toolbar\" tooltipPosition=\"bottom\">\n    <i class=\"pi pi-bars\"></i>\n  </div>\n<plotting-toolbar\n  [imageInfo]=\"imageInfo\"\n  [plotTypeOptions]=\"plotTypeOptions\"\n  [selectedPlotType]=\"selectedPlotType\"\n  [isoRange]=\"isoRange\"\n  [maxIndex]=\"maxIndex\"\n  [zIndex]=\"zIndex\"\n  [isHeatmap]=\"isHeatmap\"\n  [activeDragMode]=\"activeDragMode\"\n  [activeSurface3dMode]=\"activeSurface3dMode\"\n  [axesVisible]=\"axesVisible\"\n  [wireframeActive]=\"wireframeActive\"\n  [resolutionScale]=\"resolutionScale\"\n  [wandSensitivity]=\"wandSensitivity\"\n  [brushSize]=\"brushSize\"\n  [samModels]=\"samModels\"\n  [samModelId]=\"samModelId\"\n  [vertexEraserRadius]=\"vertexEraserRadius\"\n  [canUndo]=\"canUndoRegion\"\n  [canRedo]=\"canRedoRegion\"\n  [stackOptions]=\"stackOptions\"\n  [tools]=\"toolbarTools\"\n  [imageSmoothingEnabled]=\"imageSmoothingEnabled\"\n  (selectPlotType)=\"onSelectPlotType($event)\"\n  (toggleImageSmoothing)=\"onToggleImageSmoothing()\"\n  (addProfileLine)=\"addProfileLine()\"\n  (isoRangeChange)=\"onIsoRangeChange($event)\"\n  (openChannelHistogram)=\"openChannelHistogram()\"\n  (openRegionEditor)=\"openRegionEditor()\"\n  (selectStackOption)=\"selectStackOption($event)\"\n  (zScrub)=\"onZScrub($event)\"\n  (zSlide)=\"onZSlide($event)\"\n  (zIndexInput)=\"zIndex = $event; updateZIndex()\"\n  (reloadAndPlot)=\"reloadAndPlot()\"\n  (downloadImage)=\"downloadImage()\"\n  (autoscaleImage)=\"autoscaleImage()\"\n  (toggleDragMode)=\"toggleDragMode($event)\"\n  (zoomIn)=\"zoomIn()\"\n  (zoomOut)=\"zoomOut()\"\n  (toggleSurface3dMode)=\"toggleSurface3dMode($event)\"\n  (resetSurfaceCamera)=\"resetSurfaceCamera()\"\n  (toggleAxes)=\"toggleAxes()\"\n  (toggleWireframe)=\"toggleWireframe()\"\n  (selectResolution)=\"selectResolution($event)\"\n  (deleteRegion)=\"deleteRegion()\"\n  (undoRegion)=\"undoRegion()\"\n  (redoRegion)=\"redoRegion()\"\n  (segmentRegions)=\"segmentRegions()\"\n  (segmentCellpose)=\"segmentCellpose()\"\n  (samModelChange)=\"onSamModelChange($event)\"\n  (wandSensitivityChange)=\"onWandSensitivityChange($event)\"\n  (brushSizeChange)=\"onBrushSizeChange($event)\"\n  (vertexEraserRadiusChange)=\"onVertexEraserRadiusChange($event)\">\n  <!-- Host-projected custom toolbar buttons, forwarded into the toolbar. -->\n  <ng-content></ng-content>\n</plotting-toolbar>\n  <p-button *ngIf=\"toolbarFloating\" class=\"toolbar-dock-btn\" icon=\"pi pi-thumbtack\" size=\"small\" [text]=\"true\"\n            pTooltip=\"Dock to top\" tooltipPosition=\"bottom\" (onClick)=\"dockToolbar()\">\n  </p-button>\n</div>\n\n<p-contextMenu #cm [model]=\"contextMenuItems\" appendTo=\"body\"></p-contextMenu>\n<!-- No `h-full` here: PrimeFlex's height:100% !important made #plot as tall as\n     the whole host, so under the docked toolbar its bottom toolbar-height strip\n     (incl. the OSD scale bar at bottom-left) was clipped by the host's\n     overflow:hidden. The component stylesheet sizes it (.viz-plot { flex: 1 }). -->\n<div class=\"w-full relative viz-plot\" [id]=\"plotDivName\">\n  <div *ngIf=\"imgLoading || stackLoading || isCaching\" id=\"overlay\">\n    <!-- Determinate stack/volume progress takes precedence: while it's active show ONLY the\n         progress bar + \"Loading frames...\", not the generic spinner/\"Loading image...\" on top of\n         it (both were rendering at once for napari volume/isosurface loads). -->\n    <ng-container *ngIf=\"stackLoading; else imgLoadingTpl\">\n      <p-progressBar class=\"progress\" [value]=\"loadingPercentage\"></p-progressBar>\n      <span class=\"text-loading\">Loading frames...</span>\n    </ng-container>\n    <ng-template #imgLoadingTpl>\n      <!-- Cache-copy progress is shown whenever a cache download is active (isCaching), independent\n           of `imgLoading`, so it's never dropped/masked mid-download. -->\n      <ng-container *ngIf=\"isCaching; else spinnerLoading\">\n        <!-- Stage-aware message comes from CacheProgressService updating\n             imageLoadingMessage$ (\"Caching image...\" during the GCS download,\n             then \"Generating preview...\" during per-slice thumbnail gen). Once the\n             download hits 100% the remaining work (server preview/tile generation)\n             has no determinate progress, so fall through to the spinner template\n             rather than parking a full bar under \"Loading image...\". -->\n        <p-progressBar class=\"progress\" [value]=\"cacheProgress\"></p-progressBar>\n        <span class=\"text-loading\">{{loadingMessage}}</span>\n      </ng-container>\n      <ng-template #spinnerLoading>\n        <div *ngIf=\"imgLoading\" class=\"spinner\"></div>\n        <span *ngIf=\"imgLoading && !zoom\" class=\"text-loading\">{{loadingMessage}}</span>\n        <span *ngIf=\"imgLoading && zoom\" class=\"zoom-text-loading\">{{loadingMessage}}</span>\n      </ng-template>\n    </ng-template>\n    <p-button *ngIf=\"stackLoading || imgLoading\" class=\"cancel-loading \" label=\"Cancel\"\n              (onClick)=\"cancelLoading()\">\n    </p-button>\n  </div>\n  <!-- Translucent \"sharpening\" overlay shown after the small-tier preview is\n       on screen while the large-tier render is still loading in the\n       background. Lets the user see the blurry image underneath but makes\n       it clear something is still loading so they don't mistake the\n       low-res render for the final image. -->\n  <div *ngIf=\"sharpening && !imgLoading && !stackLoading && !isCaching\" id=\"sharpening-overlay\">\n    <div class=\"spinner\"></div>\n    <span class=\"text-loading\">Sharpening preview...</span>\n  </div>\n\n</div>\n\n<!-- Floating, draggable intensity-profile inset. Shown in LINE mode; the chart\n     updates live as the line ROI on the image is moved. Kept OUTSIDE #plot and\n     positioned fixed so it floats over the whole page (not clipped to the\n     diagram/canvas area). -->\n<div *ngIf=\"hasProfiles\" class=\"intensity-panel\"\n     [style.left.px]=\"profilePanelPos.x\" [style.top.px]=\"profilePanelPos.y\">\n  <div class=\"intensity-panel-header\" (mousedown)=\"onProfilePanelDragStart($event)\">\n    <span>Intensity profile</span>\n    <i class=\"pi pi-arrows-alt\"></i>\n  </div>\n  <div [id]=\"intensityInsetDiv\" class=\"intensity-panel-plot\"></div>\n</div>\n\n<!-- Channels & Histogram: non-modal floating dialog opened from the toolbar. -->\n<channel-histogram [(visible)]=\"showChannelHistogram\"></channel-histogram>\n\n<!-- Region Editor: non-modal, draggable, resizable floating dialog opened from\n     the toolbar (formerly the right-panel Regions tab). Modeless so regions can\n     still be drawn/selected on the plot while it's open; stays linked to this\n     plotting instance via the root RegionStore singleton. Opens over the right\n     side of the view. -->\n<p-dialog header=\"Region Editor\" [(visible)]=\"showRegionEditor\"\n          [modal]=\"false\" [resizable]=\"true\" [draggable]=\"true\"\n          [maximizable]=\"true\" appendTo=\"body\" position=\"right\"\n          [style]=\"{ width: regionEditorWidth, height: '85vh' }\"\n          [contentStyle]=\"{ overflow: 'auto' }\">\n  <region-editor></region-editor>\n</p-dialog>\n\n<!-- Simplify (Douglas\u2013Peucker): custom px-threshold picker for the selected\n     region(s), opened from the right-click \"Simplify \u25B8 Custom\u2026\" action. -->\n<p-dialog header=\"Simplify region(s)\" [(visible)]=\"displaySimplifyDialog\" [modal]=\"true\"\n          [style]=\"{width: '22rem'}\" [draggable]=\"false\" [resizable]=\"false\">\n  <div class=\"flex flex-column gap-2\">\n    <span>Altitude threshold: <b>{{ simplifyThreshold }} px</b></span>\n    <p-slider [(ngModel)]=\"simplifyThreshold\" [min]=\"1\" [max]=\"20\" [step]=\"1\"></p-slider>\n    <small>Vertices within this distance of the line between their neighbours are removed.</small>\n  </div>\n  <ng-template pTemplate=\"footer\">\n    <p-button label=\"Cancel\" [text]=\"true\" (onClick)=\"displaySimplifyDialog = false\"></p-button>\n    <p-button label=\"Apply\" icon=\"pi pi-check\" (onClick)=\"simplifyRegions(simplifyThreshold)\"></p-button>\n  </ng-template>\n</p-dialog>\n\n", styles: [":host{display:flex;flex-direction:column;height:100%;overflow:hidden}.viz-plot{flex:1;min-height:0;height:auto!important}.toolbar-dock{display:flex;align-items:stretch;width:100%}.toolbar-dock plotting-toolbar{flex:1;min-width:0}.toolbar-dock.floating{position:fixed;z-index:1000;width:auto;max-width:calc(100% - 16px);background:var(--surface-card, #ffffff);border:1px solid var(--surface-border, #cccccc);border-radius:6px;box-shadow:0 4px 16px #0000004d}.toolbar-dock.floating plotting-toolbar{flex:0 1 auto}.toolbar-dock.floating .toolbar-drag-handle{border-radius:6px 0 0 6px}.toolbar-drag-handle{display:flex;align-items:center;justify-content:center;padding:0 .4rem;cursor:move;color:var(--primary-color);background:var(--surface-100, rgba(0, 0, 0, .04));border-right:1px solid var(--surface-border, #cccccc);-webkit-user-select:none;user-select:none}.toolbar-dock-btn{align-self:center}:host ::ng-deep .navigator{margin-bottom:80px!important;margin-right:12px!important}kbd{background:#e8e8e8;border:1px solid #bbb;border-radius:3px;padding:1px 5px;font-family:monospace;font-size:.85em}::ng-deep .context-menu-active>.p-menuitem-content{background-color:var(--primary-color)!important}::ng-deep .context-menu-active>.p-menuitem-content .p-menuitem-icon,::ng-deep .context-menu-active>.p-menuitem-content .p-menuitem-text{color:#fff!important}::ng-deep .context-menu-active>.p-menuitem-content .zoom-box-off-icon,::ng-deep .context-menu-active>.p-menuitem-content .wand-icon,::ng-deep .context-menu-active>.p-menuitem-content .polyline-icon,::ng-deep .context-menu-active>.p-menuitem-content .polygon-vertices-icon,::ng-deep .context-menu-active>.p-menuitem-content .vertex-add-icon,::ng-deep .context-menu-active>.p-menuitem-content .vertex-delete-icon,::ng-deep .context-menu-active>.p-menuitem-content .region-move-icon,::ng-deep .context-menu-active>.p-menuitem-content .to-bezier-icon,::ng-deep .context-menu-active>.p-menuitem-content .to-polygon-icon{filter:brightness(0) invert(1)}.toolbar-separator{border-left:1px solid var(--surface-border);height:1.5rem;margin:0 .25rem;align-self:center}.progress{position:absolute;width:50%;left:25%;top:55%}.text-loading{position:absolute;margin:0 auto;left:45%;top:60%;font-weight:700}.zoom-text-loading{position:absolute;margin:0 auto;left:35%;top:60%;font-weight:700;display:inline-block;width:350px}.cancel-loading{position:absolute;margin:0 auto;left:46%;top:70%}.spinner{position:absolute;left:45%;top:45%;height:100px;width:100px;margin:0 auto;-webkit-animation:rotation .6s infinite linear;-moz-animation:rotation .6s infinite linear;-o-animation:rotation .6s infinite linear;animation:rotation .6s infinite linear;border-left:6px solid rgba(0,174,239,.15);border-right:6px solid rgba(0,174,239,.15);border-bottom:6px solid rgba(0,174,239,.15);border-top:6px solid rgb(82,107,178);border-radius:100%}#overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff80;z-index:1000}#sharpening-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff2e;pointer-events:none;z-index:1000}#sharpening-overlay .spinner{height:60px;width:60px;border-width:4px;left:calc(50% - 30px);top:calc(50% - 60px)}#sharpening-overlay .text-loading{position:absolute;left:0;right:0;width:auto;text-align:center;top:calc(50% + 35px);font-size:.9rem;color:#526bb2}@-webkit-keyframes rotation{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(359deg)}}@-moz-keyframes rotation{0%{-moz-transform:rotate(0deg)}to{-moz-transform:rotate(359deg)}}@-o-keyframes rotation{0%{-o-transform:rotate(0deg)}to{-o-transform:rotate(359deg)}}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(359deg)}}::ng-deep .zoom-box-off-icon{background:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\" fill=\"black\" fill-rule=\"evenodd\">%0A  <!-- Rectangle outline -->%0A  <rect x=\"2\" y=\"2\" width=\"56\" height=\"56\"/>%0A  <rect x=\"9\" y=\"9\" width=\"42\" height=\"42\"/>%0A  <!-- Magnifying glass ring -->%0A  <circle cx=\"70\" cy=\"70\" r=\"23\"/>%0A  <circle cx=\"70\" cy=\"70\" r=\"14\"/>%0A  <!-- Handle -->%0A  <polygon points=\"81,81 97,97 92,100 77,85\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .wand-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<svg%0A   viewBox=\"0 0 100 100\"%0A   fill=\"black\"%0A   fill-rule=\"evenodd\"%0A   version=\"1.1\"%0A   id=\"svg4\"%0A   sodipodi:docname=\"wand.svg\"%0A   inkscape:version=\"1.4.3 (0d15f75, 2025-12-25)\"%0A   xmlns:inkscape=\"http://www.inkscape.org/namespaces/inkscape\"%0A   xmlns:sodipodi=\"http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd\"%0A   xmlns=\"http://www.w3.org/2000/svg\"%0A   xmlns:svg=\"http://www.w3.org/2000/svg\">%0A  <defs%0A     id=\"defs4\" />%0A  <sodipodi:namedview%0A     id=\"namedview4\"%0A     pagecolor=\"%23ffffff\"%0A     bordercolor=\"%23000000\"%0A     borderopacity=\"0.25\"%0A     inkscape:showpageshadow=\"2\"%0A     inkscape:pageopacity=\"0.0\"%0A     inkscape:pagecheckerboard=\"0\"%0A     inkscape:deskcolor=\"%23d1d1d1\"%0A     inkscape:zoom=\"8.74\"%0A     inkscape:cx=\"50\"%0A     inkscape:cy=\"49.942792\"%0A     inkscape:window-width=\"1024\"%0A     inkscape:window-height=\"1186\"%0A     inkscape:window-x=\"3560\"%0A     inkscape:window-y=\"131\"%0A     inkscape:window-maximized=\"0\"%0A     inkscape:current-layer=\"svg4\" />%0A  <!-- Wand handle: thin diagonal stick from lower-left to upper-right -->%0A  <polygon%0A     points=\"12,92 78,26 74,22 8,88 \"%0A     id=\"polygon1\"%0A     transform=\"matrix(1.0375192,0.05799445,0.25179496,0.91871864,-17.85351,5.6289793)\" />%0A  <!-- 4-pointed star at the wand tip -->%0A  <polygon%0A     points=\"62,34 76,30 80,6 84,30 98,34 84,38 80,62 76,38 \"%0A     id=\"polygon2\"%0A     transform=\"matrix(1.3082889,0,0,1.0245178,-38.907958,-1.4056881)\" />%0A  <!-- Small sparkle to the upper-left -->%0A  <polygon%0A     points=\"46,30 36,32 34,42 32,32 22,30 32,28 34,18 36,28 \"%0A     id=\"polygon3\"%0A     transform=\"translate(-9.610984,-6.7505721)\" />%0A  <!-- Small sparkle to the lower-right -->%0A  <polygon%0A     points=\"62,80 70,82 62,84 60,92 58,84 50,82 58,80 60,72 \"%0A     id=\"polygon4\"%0A     transform=\"translate(0,-1.6018307)\" />%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .brush-icon{background:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\"><!--!Font Awesome Free 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d=\"M512.5 74.3L291.1 222C262 241.4 243.5 272.9 240.5 307.3C302.8 320.1 351.9 369.2 364.8 431.6C399.3 428.6 430.7 410.1 450.1 381L597.7 159.5C604.4 149.4 608 137.6 608 125.4C608 91.5 580.5 64 546.6 64C534.5 64 522.6 67.6 512.5 74.3zM320 464C320 402.1 269.9 352 208 352C146.1 352 96 402.1 96 464C96 467.9 96.2 471.8 96.6 475.6C98.4 493.1 86.4 512 68.8 512L64 512C46.3 512 32 526.3 32 544C32 561.7 46.3 576 64 576L208 576C269.9 576 320 525.9 320 464z\"/></svg>') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .polyline-icon{background:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" width=\"16\" height=\"16\">%0A  <polyline points=\"1,14 5,3 10,11 15,2\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .polygon-vertices-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Polygon (click-to-place) tool icon: a traced polyline with vertex dots. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <g transform=\"matrix(1.4740709,0,0,1.4740709,-6.0268793,-6.8086826)\">%0A    <polyline points=\"23.877,16.627 14.657,10.767 5.25,21.551 12.757,29.397\"%0A              fill=\"none\" stroke=\"%23000000\" stroke-width=\"1.6\"%0A              stroke-linejoin=\"round\" stroke-linecap=\"round\"/>%0A    <circle cx=\"23.877\" cy=\"16.627\" r=\"1.9\"/>%0A    <circle cx=\"14.657\" cy=\"10.767\" r=\"1.9\"/>%0A    <circle cx=\"5.25\" cy=\"21.551\" r=\"1.9\"/>%0A    <circle cx=\"12.757\" cy=\"29.397\" r=\"1.9\"/>%0A  </g>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .vertex-add-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Add-vertex tool icon: a region blob with three corner vertices and a plus glyph. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <g transform=\"matrix(1.5222969,0,0,1.5222969,-8.2143505,-7.6146399)\">%0A    <path d=\"m 9.35834,12.33267 c 1.78,-2.53 4.93,-3.56 7.86,-3.98 3.98,-0.72 8.33,0.08 11.52,2.67 2.62,1.98 4.71,5.1 4.53,8.49 -0.29,2.27 -2.5,3.81 -4.66,4.01 -2.75,0.43 -5.54,0.07 -8.28,-0.26 -3.99,-0.68 -8.05,-2.16 -10.93,-5.12 -1.32,-1.63 -1.39,-4.17 -0.04,-5.81 z\"%0A          fill=\"none\" stroke=\"%23000000\" stroke-width=\"1.6\" stroke-miterlimit=\"10\"/>%0A    <circle cx=\"8.294\" cy=\"15.248\" r=\"2.63\"/>%0A    <circle cx=\"19.781\" cy=\"8.287\" r=\"2.63\"/>%0A    <circle cx=\"25.044\" cy=\"23.748\" r=\"2.63\"/>%0A  </g>%0A  <path d=\"M 9.65,29.0 H 5.85 v 5.3 H 0.55 v 3.4 H 5.85 v 5.3 H 9.65 V 37.7 H 14.95 V 34.3 H 9.65 Z\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .vertex-delete-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Delete-vertex tool icon: a region blob with three corner vertices and a minus glyph. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <g transform=\"matrix(1.5222969,0,0,1.5222969,-8.2143505,-7.6146399)\">%0A    <path d=\"m 9.35834,12.33267 c 1.78,-2.53 4.93,-3.56 7.86,-3.98 3.98,-0.72 8.33,0.08 11.52,2.67 2.62,1.98 4.71,5.1 4.53,8.49 -0.29,2.27 -2.5,3.81 -4.66,4.01 -2.75,0.43 -5.54,0.07 -8.28,-0.26 -3.99,-0.68 -8.05,-2.16 -10.93,-5.12 -1.32,-1.63 -1.39,-4.17 -0.04,-5.81 z\"%0A          fill=\"none\" stroke=\"%23000000\" stroke-width=\"1.6\" stroke-miterlimit=\"10\"/>%0A    <circle cx=\"8.294\" cy=\"15.248\" r=\"2.63\"/>%0A    <circle cx=\"19.781\" cy=\"8.287\" r=\"2.63\"/>%0A    <circle cx=\"25.044\" cy=\"23.748\" r=\"2.63\"/>%0A  </g>%0A  <path d=\"M 0.55,34.3 v 3.4 H 14.95 V 34.3 Z\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .region-move-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Region-move tool icon: a region blob with a drag arrow. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <path d=\"m 17.115582,8.9648664 c 1.707597,-3.3276806 4.729468,-4.6824281 7.540287,-5.2348498 3.827703,-0.947008 7.991169,0.1052238 11.051414,3.5118228 2.523022,2.604273 4.518416,6.7079726 4.345738,11.1668036 -0.278204,2.985704 -2.398311,5.011251 -4.470451,5.274308 -2.638142,0.565574 -5.314655,0.09206 -7.943203,-0.341976 C 23.811664,22.446579 19.916808,20.499952 17.153955,16.606696 15.89724,14.462775 15.820494,11.12194 17.115585,8.9648664 Z\"%0A        fill=\"none\" stroke=\"%23000000\" stroke-width=\"2.1\" stroke-miterlimit=\"10\"/>%0A  <path d=\"m 26.741429,13.966963 6.746922,16.786269 3.229398,-4.060758 3.583857,3.583857 2.761195,-2.761196 -3.583856,-3.571852 4.060758,-3.2354 z\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .to-bezier-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Convert-to-bezier tool icon: a smooth curve through two anchor points with control handles. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <!-- smooth cubic curve between the two anchors -->%0A  <path d=\"M 7,34 C 7,16 37,28 37,10\" fill=\"none\" stroke=\"%23000000\" stroke-width=\"2.4\"%0A        stroke-linecap=\"round\"/>%0A  <!-- control handles -->%0A  <line x1=\"7\" y1=\"34\" x2=\"7\" y2=\"22\" stroke=\"%23000000\" stroke-width=\"1.4\"/>%0A  <line x1=\"37\" y1=\"10\" x2=\"37\" y2=\"22\" stroke=\"%23000000\" stroke-width=\"1.4\"/>%0A  <circle cx=\"7\" cy=\"22\" r=\"2.2\"/>%0A  <circle cx=\"37\" cy=\"22\" r=\"2.2\"/>%0A  <!-- anchor points -->%0A  <rect x=\"4\" y=\"31\" width=\"6\" height=\"6\" rx=\"1\"/>%0A  <rect x=\"34\" y=\"7\" width=\"6\" height=\"6\" rx=\"1\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .to-polygon-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Convert-to-polygon tool icon: endpoints joined by straight segments through a vertex. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <!-- straight-segment path through the vertices -->%0A  <polyline points=\"7,34 22,12 37,10\" fill=\"none\" stroke=\"%23000000\" stroke-width=\"2.4\"%0A            stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0A  <!-- vertices -->%0A  <rect x=\"4\" y=\"31\" width=\"6\" height=\"6\" rx=\"1\"/>%0A  <rect x=\"19\" y=\"9\" width=\"6\" height=\"6\" rx=\"1\"/>%0A  <rect x=\"34\" y=\"7\" width=\"6\" height=\"6\" rx=\"1\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}.intensity-panel{position:fixed;z-index:1100;width:280px;height:180px;background:#191919e6;border:1px solid var(--primary-color, #3399ff);border-radius:6px;box-shadow:0 4px 14px #00000073;display:flex;flex-direction:column;overflow:hidden}.intensity-panel-header{display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem;cursor:move;-webkit-user-select:none;user-select:none;background:#ffffff14;color:#eee;font-size:.75rem;font-weight:600}.intensity-panel-header i{opacity:.6;font-size:.7rem}.intensity-panel-plot{flex:1 1 auto;width:100%}:host ::ng-deep .sam-progress .p-progressbar-value{transition:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i9.Slider, selector: "p-slider", inputs: ["animate", "disabled", "min", "max", "orientation", "step", "range", "style", "styleClass", "ariaLabel", "ariaLabelledBy", "tabindex", "autofocus"], outputs: ["onChange", "onSlideEnd"] }, { kind: "component", type: i11.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: i13$1.ContextMenu, selector: "p-contextMenu", inputs: ["model", "triggerEvent", "target", "global", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "id", "ariaLabel", "ariaLabelledBy", "pressDelay"], outputs: ["onShow", "onHide"] }, { kind: "component", type: i9$1.ProgressBar, selector: "p-progressBar", inputs: ["value", "showValue", "styleClass", "style", "unit", "mode", "color"] }, { kind: "component", type: i15$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: ToolbarComponent, selector: "plotting-toolbar", inputs: ["imageInfo", "plotTypeOptions", "selectedPlotType", "isoRange", "maxIndex", "zIndex", "isHeatmap", "activeDragMode", "activeSurface3dMode", "axesVisible", "wireframeActive", "resolutionScale", "wandSensitivity", "brushSize", "vertexEraserRadius", "canUndo", "canRedo", "stackOptions", "tools", "imageSmoothingEnabled", "samModels", "samModelId"], outputs: ["selectPlotType", "addProfileLine", "toggleImageSmoothing", "isoRangeChange", "openChannelHistogram", "openRegionEditor", "selectStackOption", "zScrub", "zSlide", "zIndexInput", "reloadAndPlot", "downloadImage", "autoscaleImage", "toggleDragMode", "zoomIn", "zoomOut", "toggleSurface3dMode", "resetSurfaceCamera", "toggleAxes", "toggleWireframe", "selectResolution", "deleteRegion", "undoRegion", "redoRegion", "segmentRegions", "segmentCellpose", "samModelChange", "wandSensitivityChange", "brushSizeChange", "vertexEraserRadiusChange"] }, { kind: "component", type: RegionEditorComponent, selector: "region-editor" }, { kind: "component", type: ChannelHistogramComponent, selector: "channel-histogram", inputs: ["visible"], outputs: ["visibleChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: VisualizerComponent, selector: "visualizer", inputs: { toolbarTools: "toolbarTools", testMode: "testMode" }, outputs: { isStackEvent: "isStackEvent", isGrayscaleEvent: "isGrayscaleEvent" }, host: { listeners: { "window:keydown": "onKeydown($event)" } }, viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["cm"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- SAM toast: live status + encoder-download progress bar (jit-ui#90). Sticky\n     while a segment runs; stays open until the bar reaches 100% and the run ends. -->\n<p-toast [key]=\"samToastKey\" position=\"bottom-right\">\n  <ng-template let-message pTemplate=\"message\">\n    <div style=\"flex: 1; min-width: 16rem\">\n      <div class=\"font-bold mb-1\">{{ message.summary }}</div>\n      <div>{{ samStatus || message.detail }}</div>\n      <p-progressBar *ngIf=\"samDownloading\" [value]=\"samProgress\" styleClass=\"mt-2 sam-progress\"></p-progressBar>\n      <p-progressBar *ngIf=\"samBusy && !samDownloading\" mode=\"indeterminate\" styleClass=\"mt-2\"\n                     [style]=\"{ height: '4px' }\"></p-progressBar>\n    </div>\n  </ng-template>\n</p-toast>\n\n<!-- Result/error notices from the library itself (segmentation outcome, region\n     validation). Rendered here so they do not depend on the host mounting a\n     keyless <p-toast> \u2014 without this the messages went nowhere in any host but\n     jit-ui, and a failed run looked like a button that did nothing. -->\n<p-toast [key]=\"resultToastKey\" position=\"bottom-right\"></p-toast>\n\n<!-- Shared outlets for notices raised where there is no per-instance key to use:\n     the root-provided PlotlyService and the region-editor dialog. Rendered by a\n     single visualizer (ownsSharedToasts) so a message from the root service is\n     not shown once per live viewer. -->\n<p-toast *ngIf=\"ownsSharedToasts\" [key]=\"vizToastKey\"></p-toast>\n<p-toast *ngIf=\"ownsSharedToasts\" [key]=\"vizAlertToastKey\" position=\"center\"></p-toast>\n\n<!-- Toolbar dock: docked across the top by default; drag the handle to detach\n     it into a floating, movable window (frees the top row for the image). -->\n<div class=\"toolbar-dock\" [class.floating]=\"toolbarFloating\"\n     [style.left.px]=\"toolbarFloating ? toolbarPos.x : null\"\n     [style.top.px]=\"toolbarFloating ? toolbarPos.y : null\">\n  <div class=\"toolbar-drag-handle\" (mousedown)=\"onToolbarDragStart($event)\"\n       pTooltip=\"Drag to float the toolbar\" tooltipPosition=\"bottom\">\n    <i class=\"pi pi-bars\"></i>\n  </div>\n<plotting-toolbar\n  [imageInfo]=\"imageInfo\"\n  [plotTypeOptions]=\"plotTypeOptions\"\n  [selectedPlotType]=\"selectedPlotType\"\n  [isoRange]=\"isoRange\"\n  [maxIndex]=\"maxIndex\"\n  [zIndex]=\"zIndex\"\n  [isHeatmap]=\"isHeatmap\"\n  [activeDragMode]=\"activeDragMode\"\n  [activeSurface3dMode]=\"activeSurface3dMode\"\n  [axesVisible]=\"axesVisible\"\n  [wireframeActive]=\"wireframeActive\"\n  [resolutionScale]=\"resolutionScale\"\n  [wandSensitivity]=\"wandSensitivity\"\n  [brushSize]=\"brushSize\"\n  [samModels]=\"samModels\"\n  [samModelId]=\"samModelId\"\n  [vertexEraserRadius]=\"vertexEraserRadius\"\n  [canUndo]=\"canUndoRegion\"\n  [canRedo]=\"canRedoRegion\"\n  [stackOptions]=\"stackOptions\"\n  [tools]=\"toolbarTools\"\n  [imageSmoothingEnabled]=\"imageSmoothingEnabled\"\n  (selectPlotType)=\"onSelectPlotType($event)\"\n  (toggleImageSmoothing)=\"onToggleImageSmoothing()\"\n  (addProfileLine)=\"addProfileLine()\"\n  (isoRangeChange)=\"onIsoRangeChange($event)\"\n  (openChannelHistogram)=\"openChannelHistogram()\"\n  (openRegionEditor)=\"openRegionEditor()\"\n  (selectStackOption)=\"selectStackOption($event)\"\n  (zScrub)=\"onZScrub($event)\"\n  (zSlide)=\"onZSlide($event)\"\n  (zIndexInput)=\"zIndex = $event; updateZIndex()\"\n  (reloadAndPlot)=\"reloadAndPlot()\"\n  (downloadImage)=\"downloadImage()\"\n  (autoscaleImage)=\"autoscaleImage()\"\n  (toggleDragMode)=\"toggleDragMode($event)\"\n  (zoomIn)=\"zoomIn()\"\n  (zoomOut)=\"zoomOut()\"\n  (toggleSurface3dMode)=\"toggleSurface3dMode($event)\"\n  (resetSurfaceCamera)=\"resetSurfaceCamera()\"\n  (toggleAxes)=\"toggleAxes()\"\n  (toggleWireframe)=\"toggleWireframe()\"\n  (selectResolution)=\"selectResolution($event)\"\n  (deleteRegion)=\"deleteRegion()\"\n  (undoRegion)=\"undoRegion()\"\n  (redoRegion)=\"redoRegion()\"\n  (segmentRegions)=\"segmentRegions()\"\n  (segmentCellpose)=\"segmentCellpose()\"\n  (samModelChange)=\"onSamModelChange($event)\"\n  (wandSensitivityChange)=\"onWandSensitivityChange($event)\"\n  (brushSizeChange)=\"onBrushSizeChange($event)\"\n  (vertexEraserRadiusChange)=\"onVertexEraserRadiusChange($event)\">\n  <!-- Host-projected custom toolbar buttons, forwarded into the toolbar. -->\n  <ng-content></ng-content>\n</plotting-toolbar>\n  <p-button *ngIf=\"toolbarFloating\" class=\"toolbar-dock-btn\" icon=\"pi pi-thumbtack\" size=\"small\" [text]=\"true\"\n            pTooltip=\"Dock to top\" tooltipPosition=\"bottom\" (onClick)=\"dockToolbar()\">\n  </p-button>\n</div>\n\n<p-contextMenu #cm [model]=\"contextMenuItems\" appendTo=\"body\"></p-contextMenu>\n<!-- No `h-full` here: PrimeFlex's height:100% !important made #plot as tall as\n     the whole host, so under the docked toolbar its bottom toolbar-height strip\n     (incl. the OSD scale bar at bottom-left) was clipped by the host's\n     overflow:hidden. The component stylesheet sizes it (.viz-plot { flex: 1 }). -->\n<div class=\"w-full relative viz-plot\" [id]=\"plotDivName\">\n  <div *ngIf=\"imgLoading || stackLoading || isCaching\" id=\"overlay\">\n    <!-- Determinate stack/volume progress takes precedence: while it's active show ONLY the\n         progress bar + \"Loading frames...\", not the generic spinner/\"Loading image...\" on top of\n         it (both were rendering at once for napari volume/isosurface loads). -->\n    <ng-container *ngIf=\"stackLoading; else imgLoadingTpl\">\n      <p-progressBar class=\"progress\" [value]=\"loadingPercentage\"></p-progressBar>\n      <span class=\"text-loading\">Loading frames...</span>\n    </ng-container>\n    <ng-template #imgLoadingTpl>\n      <!-- Cache-copy progress is shown whenever a cache download is active (isCaching), independent\n           of `imgLoading`, so it's never dropped/masked mid-download. -->\n      <ng-container *ngIf=\"isCaching; else spinnerLoading\">\n        <!-- Stage-aware message comes from CacheProgressService updating\n             imageLoadingMessage$ (\"Caching image...\" during the GCS download,\n             then \"Generating preview...\" during per-slice thumbnail gen). Once the\n             download hits 100% the remaining work (server preview/tile generation)\n             has no determinate progress, so fall through to the spinner template\n             rather than parking a full bar under \"Loading image...\". -->\n        <p-progressBar class=\"progress\" [value]=\"cacheProgress\"></p-progressBar>\n        <span class=\"text-loading\">{{loadingMessage}}</span>\n      </ng-container>\n      <ng-template #spinnerLoading>\n        <div *ngIf=\"imgLoading\" class=\"spinner\"></div>\n        <span *ngIf=\"imgLoading && !zoom\" class=\"text-loading\">{{loadingMessage}}</span>\n        <span *ngIf=\"imgLoading && zoom\" class=\"zoom-text-loading\">{{loadingMessage}}</span>\n      </ng-template>\n    </ng-template>\n    <p-button *ngIf=\"stackLoading || imgLoading\" class=\"cancel-loading \" label=\"Cancel\"\n              (onClick)=\"cancelLoading()\">\n    </p-button>\n  </div>\n  <!-- Translucent \"sharpening\" overlay shown after the small-tier preview is\n       on screen while the large-tier render is still loading in the\n       background. Lets the user see the blurry image underneath but makes\n       it clear something is still loading so they don't mistake the\n       low-res render for the final image. -->\n  <div *ngIf=\"sharpening && !imgLoading && !stackLoading && !isCaching\" id=\"sharpening-overlay\">\n    <div class=\"spinner\"></div>\n    <span class=\"text-loading\">Sharpening preview...</span>\n  </div>\n\n</div>\n\n<!-- Floating, draggable intensity-profile inset. Shown in LINE mode; the chart\n     updates live as the line ROI on the image is moved. Kept OUTSIDE #plot and\n     positioned fixed so it floats over the whole page (not clipped to the\n     diagram/canvas area). -->\n<div *ngIf=\"hasProfiles\" class=\"intensity-panel\"\n     [style.left.px]=\"profilePanelPos.x\" [style.top.px]=\"profilePanelPos.y\">\n  <div class=\"intensity-panel-header\" (mousedown)=\"onProfilePanelDragStart($event)\">\n    <span>Intensity profile</span>\n    <i class=\"pi pi-arrows-alt\"></i>\n  </div>\n  <div [id]=\"intensityInsetDiv\" class=\"intensity-panel-plot\"></div>\n</div>\n\n<!-- Channels & Histogram: non-modal floating dialog opened from the toolbar. -->\n<channel-histogram [(visible)]=\"showChannelHistogram\"></channel-histogram>\n\n<!-- Region Editor: non-modal, draggable, resizable floating dialog opened from\n     the toolbar (formerly the right-panel Regions tab). Modeless so regions can\n     still be drawn/selected on the plot while it's open; stays linked to this\n     plotting instance via the root RegionStore singleton. Opens over the right\n     side of the view. -->\n<p-dialog header=\"Region Editor\" [(visible)]=\"showRegionEditor\"\n          [modal]=\"false\" [resizable]=\"true\" [draggable]=\"true\"\n          [maximizable]=\"true\" appendTo=\"body\" position=\"right\"\n          [style]=\"{ width: regionEditorWidth, height: '85vh' }\"\n          [contentStyle]=\"{ overflow: 'auto' }\">\n  <region-editor></region-editor>\n</p-dialog>\n\n<!-- Simplify (Douglas\u2013Peucker): custom px-threshold picker for the selected\n     region(s), opened from the right-click \"Simplify \u25B8 Custom\u2026\" action. -->\n<p-dialog header=\"Simplify region(s)\" [(visible)]=\"displaySimplifyDialog\" [modal]=\"true\"\n          [style]=\"{width: '22rem'}\" [draggable]=\"false\" [resizable]=\"false\">\n  <div class=\"flex flex-column gap-2\">\n    <span>Altitude threshold: <b>{{ simplifyThreshold }} px</b></span>\n    <p-slider [(ngModel)]=\"simplifyThreshold\" [min]=\"1\" [max]=\"20\" [step]=\"1\"></p-slider>\n    <small>Vertices within this distance of the line between their neighbours are removed.</small>\n  </div>\n  <ng-template pTemplate=\"footer\">\n    <p-button label=\"Cancel\" [text]=\"true\" (onClick)=\"displaySimplifyDialog = false\"></p-button>\n    <p-button label=\"Apply\" icon=\"pi pi-check\" (onClick)=\"simplifyRegions(simplifyThreshold)\"></p-button>\n  </ng-template>\n</p-dialog>\n\n", styles: [":host{display:flex;flex-direction:column;height:100%;overflow:hidden}.viz-plot{flex:1;min-height:0;height:auto!important}.toolbar-dock{display:flex;align-items:stretch;width:100%}.toolbar-dock plotting-toolbar{flex:1;min-width:0}.toolbar-dock.floating{position:fixed;z-index:1000;width:auto;max-width:calc(100% - 16px);background:var(--surface-card, #ffffff);border:1px solid var(--surface-border, #cccccc);border-radius:6px;box-shadow:0 4px 16px #0000004d}.toolbar-dock.floating plotting-toolbar{flex:0 1 auto}.toolbar-dock.floating .toolbar-drag-handle{border-radius:6px 0 0 6px}.toolbar-drag-handle{display:flex;align-items:center;justify-content:center;padding:0 .4rem;cursor:move;color:var(--primary-color);background:var(--surface-100, rgba(0, 0, 0, .04));border-right:1px solid var(--surface-border, #cccccc);-webkit-user-select:none;user-select:none}.toolbar-dock-btn{align-self:center}:host ::ng-deep .navigator{margin-bottom:80px!important;margin-right:12px!important}kbd{background:#e8e8e8;border:1px solid #bbb;border-radius:3px;padding:1px 5px;font-family:monospace;font-size:.85em}::ng-deep .context-menu-active>.p-menuitem-content{background-color:var(--primary-color)!important}::ng-deep .context-menu-active>.p-menuitem-content .p-menuitem-icon,::ng-deep .context-menu-active>.p-menuitem-content .p-menuitem-text{color:#fff!important}::ng-deep .context-menu-active>.p-menuitem-content .zoom-box-off-icon,::ng-deep .context-menu-active>.p-menuitem-content .wand-icon,::ng-deep .context-menu-active>.p-menuitem-content .polyline-icon,::ng-deep .context-menu-active>.p-menuitem-content .polygon-vertices-icon,::ng-deep .context-menu-active>.p-menuitem-content .vertex-add-icon,::ng-deep .context-menu-active>.p-menuitem-content .vertex-delete-icon,::ng-deep .context-menu-active>.p-menuitem-content .region-move-icon,::ng-deep .context-menu-active>.p-menuitem-content .to-bezier-icon,::ng-deep .context-menu-active>.p-menuitem-content .to-polygon-icon{filter:brightness(0) invert(1)}.toolbar-separator{border-left:1px solid var(--surface-border);height:1.5rem;margin:0 .25rem;align-self:center}.progress{position:absolute;width:50%;left:25%;top:55%}.text-loading{position:absolute;margin:0 auto;left:45%;top:60%;font-weight:700}.zoom-text-loading{position:absolute;margin:0 auto;left:35%;top:60%;font-weight:700;display:inline-block;width:350px}.cancel-loading{position:absolute;margin:0 auto;left:46%;top:70%}.spinner{position:absolute;left:45%;top:45%;height:100px;width:100px;margin:0 auto;-webkit-animation:rotation .6s infinite linear;-moz-animation:rotation .6s infinite linear;-o-animation:rotation .6s infinite linear;animation:rotation .6s infinite linear;border-left:6px solid rgba(0,174,239,.15);border-right:6px solid rgba(0,174,239,.15);border-bottom:6px solid rgba(0,174,239,.15);border-top:6px solid rgb(82,107,178);border-radius:100%}#overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff80;z-index:1000}#sharpening-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff2e;pointer-events:none;z-index:1000}#sharpening-overlay .spinner{height:60px;width:60px;border-width:4px;left:calc(50% - 30px);top:calc(50% - 60px)}#sharpening-overlay .text-loading{position:absolute;left:0;right:0;width:auto;text-align:center;top:calc(50% + 35px);font-size:.9rem;color:#526bb2}@-webkit-keyframes rotation{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(359deg)}}@-moz-keyframes rotation{0%{-moz-transform:rotate(0deg)}to{-moz-transform:rotate(359deg)}}@-o-keyframes rotation{0%{-o-transform:rotate(0deg)}to{-o-transform:rotate(359deg)}}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(359deg)}}::ng-deep .zoom-box-off-icon{background:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\" fill=\"black\" fill-rule=\"evenodd\">%0A  <!-- Rectangle outline -->%0A  <rect x=\"2\" y=\"2\" width=\"56\" height=\"56\"/>%0A  <rect x=\"9\" y=\"9\" width=\"42\" height=\"42\"/>%0A  <!-- Magnifying glass ring -->%0A  <circle cx=\"70\" cy=\"70\" r=\"23\"/>%0A  <circle cx=\"70\" cy=\"70\" r=\"14\"/>%0A  <!-- Handle -->%0A  <polygon points=\"81,81 97,97 92,100 77,85\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .wand-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<svg%0A   viewBox=\"0 0 100 100\"%0A   fill=\"black\"%0A   fill-rule=\"evenodd\"%0A   version=\"1.1\"%0A   id=\"svg4\"%0A   sodipodi:docname=\"wand.svg\"%0A   inkscape:version=\"1.4.3 (0d15f75, 2025-12-25)\"%0A   xmlns:inkscape=\"http://www.inkscape.org/namespaces/inkscape\"%0A   xmlns:sodipodi=\"http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd\"%0A   xmlns=\"http://www.w3.org/2000/svg\"%0A   xmlns:svg=\"http://www.w3.org/2000/svg\">%0A  <defs%0A     id=\"defs4\" />%0A  <sodipodi:namedview%0A     id=\"namedview4\"%0A     pagecolor=\"%23ffffff\"%0A     bordercolor=\"%23000000\"%0A     borderopacity=\"0.25\"%0A     inkscape:showpageshadow=\"2\"%0A     inkscape:pageopacity=\"0.0\"%0A     inkscape:pagecheckerboard=\"0\"%0A     inkscape:deskcolor=\"%23d1d1d1\"%0A     inkscape:zoom=\"8.74\"%0A     inkscape:cx=\"50\"%0A     inkscape:cy=\"49.942792\"%0A     inkscape:window-width=\"1024\"%0A     inkscape:window-height=\"1186\"%0A     inkscape:window-x=\"3560\"%0A     inkscape:window-y=\"131\"%0A     inkscape:window-maximized=\"0\"%0A     inkscape:current-layer=\"svg4\" />%0A  <!-- Wand handle: thin diagonal stick from lower-left to upper-right -->%0A  <polygon%0A     points=\"12,92 78,26 74,22 8,88 \"%0A     id=\"polygon1\"%0A     transform=\"matrix(1.0375192,0.05799445,0.25179496,0.91871864,-17.85351,5.6289793)\" />%0A  <!-- 4-pointed star at the wand tip -->%0A  <polygon%0A     points=\"62,34 76,30 80,6 84,30 98,34 84,38 80,62 76,38 \"%0A     id=\"polygon2\"%0A     transform=\"matrix(1.3082889,0,0,1.0245178,-38.907958,-1.4056881)\" />%0A  <!-- Small sparkle to the upper-left -->%0A  <polygon%0A     points=\"46,30 36,32 34,42 32,32 22,30 32,28 34,18 36,28 \"%0A     id=\"polygon3\"%0A     transform=\"translate(-9.610984,-6.7505721)\" />%0A  <!-- Small sparkle to the lower-right -->%0A  <polygon%0A     points=\"62,80 70,82 62,84 60,92 58,84 50,82 58,80 60,72 \"%0A     id=\"polygon4\"%0A     transform=\"translate(0,-1.6018307)\" />%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .brush-icon{background:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\"><!--!Font Awesome Free 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d=\"M512.5 74.3L291.1 222C262 241.4 243.5 272.9 240.5 307.3C302.8 320.1 351.9 369.2 364.8 431.6C399.3 428.6 430.7 410.1 450.1 381L597.7 159.5C604.4 149.4 608 137.6 608 125.4C608 91.5 580.5 64 546.6 64C534.5 64 522.6 67.6 512.5 74.3zM320 464C320 402.1 269.9 352 208 352C146.1 352 96 402.1 96 464C96 467.9 96.2 471.8 96.6 475.6C98.4 493.1 86.4 512 68.8 512L64 512C46.3 512 32 526.3 32 544C32 561.7 46.3 576 64 576L208 576C269.9 576 320 525.9 320 464z\"/></svg>') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .polyline-icon{background:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" width=\"16\" height=\"16\">%0A  <polyline points=\"1,14 5,3 10,11 15,2\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .polygon-vertices-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Polygon (click-to-place) tool icon: a traced polyline with vertex dots. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <g transform=\"matrix(1.4740709,0,0,1.4740709,-6.0268793,-6.8086826)\">%0A    <polyline points=\"23.877,16.627 14.657,10.767 5.25,21.551 12.757,29.397\"%0A              fill=\"none\" stroke=\"%23000000\" stroke-width=\"1.6\"%0A              stroke-linejoin=\"round\" stroke-linecap=\"round\"/>%0A    <circle cx=\"23.877\" cy=\"16.627\" r=\"1.9\"/>%0A    <circle cx=\"14.657\" cy=\"10.767\" r=\"1.9\"/>%0A    <circle cx=\"5.25\" cy=\"21.551\" r=\"1.9\"/>%0A    <circle cx=\"12.757\" cy=\"29.397\" r=\"1.9\"/>%0A  </g>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .vertex-add-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Add-vertex tool icon: a region blob with three corner vertices and a plus glyph. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <g transform=\"matrix(1.5222969,0,0,1.5222969,-8.2143505,-7.6146399)\">%0A    <path d=\"m 9.35834,12.33267 c 1.78,-2.53 4.93,-3.56 7.86,-3.98 3.98,-0.72 8.33,0.08 11.52,2.67 2.62,1.98 4.71,5.1 4.53,8.49 -0.29,2.27 -2.5,3.81 -4.66,4.01 -2.75,0.43 -5.54,0.07 -8.28,-0.26 -3.99,-0.68 -8.05,-2.16 -10.93,-5.12 -1.32,-1.63 -1.39,-4.17 -0.04,-5.81 z\"%0A          fill=\"none\" stroke=\"%23000000\" stroke-width=\"1.6\" stroke-miterlimit=\"10\"/>%0A    <circle cx=\"8.294\" cy=\"15.248\" r=\"2.63\"/>%0A    <circle cx=\"19.781\" cy=\"8.287\" r=\"2.63\"/>%0A    <circle cx=\"25.044\" cy=\"23.748\" r=\"2.63\"/>%0A  </g>%0A  <path d=\"M 9.65,29.0 H 5.85 v 5.3 H 0.55 v 3.4 H 5.85 v 5.3 H 9.65 V 37.7 H 14.95 V 34.3 H 9.65 Z\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .vertex-delete-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Delete-vertex tool icon: a region blob with three corner vertices and a minus glyph. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <g transform=\"matrix(1.5222969,0,0,1.5222969,-8.2143505,-7.6146399)\">%0A    <path d=\"m 9.35834,12.33267 c 1.78,-2.53 4.93,-3.56 7.86,-3.98 3.98,-0.72 8.33,0.08 11.52,2.67 2.62,1.98 4.71,5.1 4.53,8.49 -0.29,2.27 -2.5,3.81 -4.66,4.01 -2.75,0.43 -5.54,0.07 -8.28,-0.26 -3.99,-0.68 -8.05,-2.16 -10.93,-5.12 -1.32,-1.63 -1.39,-4.17 -0.04,-5.81 z\"%0A          fill=\"none\" stroke=\"%23000000\" stroke-width=\"1.6\" stroke-miterlimit=\"10\"/>%0A    <circle cx=\"8.294\" cy=\"15.248\" r=\"2.63\"/>%0A    <circle cx=\"19.781\" cy=\"8.287\" r=\"2.63\"/>%0A    <circle cx=\"25.044\" cy=\"23.748\" r=\"2.63\"/>%0A  </g>%0A  <path d=\"M 0.55,34.3 v 3.4 H 14.95 V 34.3 Z\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .region-move-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Region-move tool icon: a region blob with a drag arrow. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <path d=\"m 17.115582,8.9648664 c 1.707597,-3.3276806 4.729468,-4.6824281 7.540287,-5.2348498 3.827703,-0.947008 7.991169,0.1052238 11.051414,3.5118228 2.523022,2.604273 4.518416,6.7079726 4.345738,11.1668036 -0.278204,2.985704 -2.398311,5.011251 -4.470451,5.274308 -2.638142,0.565574 -5.314655,0.09206 -7.943203,-0.341976 C 23.811664,22.446579 19.916808,20.499952 17.153955,16.606696 15.89724,14.462775 15.820494,11.12194 17.115585,8.9648664 Z\"%0A        fill=\"none\" stroke=\"%23000000\" stroke-width=\"2.1\" stroke-miterlimit=\"10\"/>%0A  <path d=\"m 26.741429,13.966963 6.746922,16.786269 3.229398,-4.060758 3.583857,3.583857 2.761195,-2.761196 -3.583856,-3.571852 4.060758,-3.2354 z\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .to-bezier-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Convert-to-bezier tool icon: a smooth curve through two anchor points with control handles. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <!-- smooth cubic curve between the two anchors -->%0A  <path d=\"M 7,34 C 7,16 37,28 37,10\" fill=\"none\" stroke=\"%23000000\" stroke-width=\"2.4\"%0A        stroke-linecap=\"round\"/>%0A  <!-- control handles -->%0A  <line x1=\"7\" y1=\"34\" x2=\"7\" y2=\"22\" stroke=\"%23000000\" stroke-width=\"1.4\"/>%0A  <line x1=\"37\" y1=\"10\" x2=\"37\" y2=\"22\" stroke=\"%23000000\" stroke-width=\"1.4\"/>%0A  <circle cx=\"7\" cy=\"22\" r=\"2.2\"/>%0A  <circle cx=\"37\" cy=\"22\" r=\"2.2\"/>%0A  <!-- anchor points -->%0A  <rect x=\"4\" y=\"31\" width=\"6\" height=\"6\" rx=\"1\"/>%0A  <rect x=\"34\" y=\"7\" width=\"6\" height=\"6\" rx=\"1\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .to-polygon-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Convert-to-polygon tool icon: endpoints joined by straight segments through a vertex. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <!-- straight-segment path through the vertices -->%0A  <polyline points=\"7,34 22,12 37,10\" fill=\"none\" stroke=\"%23000000\" stroke-width=\"2.4\"%0A            stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0A  <!-- vertices -->%0A  <rect x=\"4\" y=\"31\" width=\"6\" height=\"6\" rx=\"1\"/>%0A  <rect x=\"19\" y=\"9\" width=\"6\" height=\"6\" rx=\"1\"/>%0A  <rect x=\"34\" y=\"7\" width=\"6\" height=\"6\" rx=\"1\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}.intensity-panel{position:fixed;z-index:1100;width:280px;height:180px;background:#191919e6;border:1px solid var(--primary-color, #3399ff);border-radius:6px;box-shadow:0 4px 14px #00000073;display:flex;flex-direction:column;overflow:hidden}.intensity-panel-header{display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem;cursor:move;-webkit-user-select:none;user-select:none;background:#ffffff14;color:#eee;font-size:.75rem;font-weight:600}.intensity-panel-header i{opacity:.6;font-size:.7rem}.intensity-panel-plot{flex:1 1 auto;width:100%}:host ::ng-deep .sam-progress .p-progressbar-value{transition:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i9.Slider, selector: "p-slider", inputs: ["animate", "disabled", "min", "max", "orientation", "step", "range", "style", "styleClass", "ariaLabel", "ariaLabelledBy", "tabindex", "autofocus"], outputs: ["onChange", "onSlideEnd"] }, { kind: "component", type: i11.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: i13$1.ContextMenu, selector: "p-contextMenu", inputs: ["model", "triggerEvent", "target", "global", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "id", "ariaLabel", "ariaLabelledBy", "pressDelay"], outputs: ["onShow", "onHide"] }, { kind: "component", type: i9$1.ProgressBar, selector: "p-progressBar", inputs: ["value", "showValue", "styleClass", "style", "unit", "mode", "color"] }, { kind: "component", type: i15$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: ToolbarComponent, selector: "plotting-toolbar", inputs: ["imageInfo", "plotTypeOptions", "selectedPlotType", "isoRange", "maxIndex", "zIndex", "isHeatmap", "activeDragMode", "activeSurface3dMode", "axesVisible", "wireframeActive", "resolutionScale", "wandSensitivity", "brushSize", "vertexEraserRadius", "canUndo", "canRedo", "stackOptions", "tools", "imageSmoothingEnabled", "samModels", "samModelId"], outputs: ["selectPlotType", "addProfileLine", "toggleImageSmoothing", "isoRangeChange", "openChannelHistogram", "openRegionEditor", "selectStackOption", "zScrub", "zSlide", "zIndexInput", "reloadAndPlot", "downloadImage", "autoscaleImage", "toggleDragMode", "zoomIn", "zoomOut", "toggleSurface3dMode", "resetSurfaceCamera", "toggleAxes", "toggleWireframe", "selectResolution", "deleteRegion", "undoRegion", "redoRegion", "segmentRegions", "segmentCellpose", "samModelChange", "wandSensitivityChange", "brushSizeChange", "vertexEraserRadiusChange"] }, { kind: "component", type: RegionEditorComponent, selector: "region-editor" }, { kind: "component", type: ChannelHistogramComponent, selector: "channel-histogram", inputs: ["visible"], outputs: ["visibleChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: VisualizerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'visualizer', template: "<!-- SAM toast: live status + encoder-download progress bar (jit-ui#90). Sticky\n     while a segment runs; stays open until the bar reaches 100% and the run ends. -->\n<p-toast [key]=\"samToastKey\" position=\"bottom-right\">\n  <ng-template let-message pTemplate=\"message\">\n    <div style=\"flex: 1; min-width: 16rem\">\n      <div class=\"font-bold mb-1\">{{ message.summary }}</div>\n      <div>{{ samStatus || message.detail }}</div>\n      <p-progressBar *ngIf=\"samDownloading\" [value]=\"samProgress\" styleClass=\"mt-2 sam-progress\"></p-progressBar>\n      <p-progressBar *ngIf=\"samBusy && !samDownloading\" mode=\"indeterminate\" styleClass=\"mt-2\"\n                     [style]=\"{ height: '4px' }\"></p-progressBar>\n    </div>\n  </ng-template>\n</p-toast>\n\n<!-- Toolbar dock: docked across the top by default; drag the handle to detach\n     it into a floating, movable window (frees the top row for the image). -->\n<div class=\"toolbar-dock\" [class.floating]=\"toolbarFloating\"\n     [style.left.px]=\"toolbarFloating ? toolbarPos.x : null\"\n     [style.top.px]=\"toolbarFloating ? toolbarPos.y : null\">\n  <div class=\"toolbar-drag-handle\" (mousedown)=\"onToolbarDragStart($event)\"\n       pTooltip=\"Drag to float the toolbar\" tooltipPosition=\"bottom\">\n    <i class=\"pi pi-bars\"></i>\n  </div>\n<plotting-toolbar\n  [imageInfo]=\"imageInfo\"\n  [plotTypeOptions]=\"plotTypeOptions\"\n  [selectedPlotType]=\"selectedPlotType\"\n  [isoRange]=\"isoRange\"\n  [maxIndex]=\"maxIndex\"\n  [zIndex]=\"zIndex\"\n  [isHeatmap]=\"isHeatmap\"\n  [activeDragMode]=\"activeDragMode\"\n  [activeSurface3dMode]=\"activeSurface3dMode\"\n  [axesVisible]=\"axesVisible\"\n  [wireframeActive]=\"wireframeActive\"\n  [resolutionScale]=\"resolutionScale\"\n  [wandSensitivity]=\"wandSensitivity\"\n  [brushSize]=\"brushSize\"\n  [samModels]=\"samModels\"\n  [samModelId]=\"samModelId\"\n  [vertexEraserRadius]=\"vertexEraserRadius\"\n  [canUndo]=\"canUndoRegion\"\n  [canRedo]=\"canRedoRegion\"\n  [stackOptions]=\"stackOptions\"\n  [tools]=\"toolbarTools\"\n  [imageSmoothingEnabled]=\"imageSmoothingEnabled\"\n  (selectPlotType)=\"onSelectPlotType($event)\"\n  (toggleImageSmoothing)=\"onToggleImageSmoothing()\"\n  (addProfileLine)=\"addProfileLine()\"\n  (isoRangeChange)=\"onIsoRangeChange($event)\"\n  (openChannelHistogram)=\"openChannelHistogram()\"\n  (openRegionEditor)=\"openRegionEditor()\"\n  (selectStackOption)=\"selectStackOption($event)\"\n  (zScrub)=\"onZScrub($event)\"\n  (zSlide)=\"onZSlide($event)\"\n  (zIndexInput)=\"zIndex = $event; updateZIndex()\"\n  (reloadAndPlot)=\"reloadAndPlot()\"\n  (downloadImage)=\"downloadImage()\"\n  (autoscaleImage)=\"autoscaleImage()\"\n  (toggleDragMode)=\"toggleDragMode($event)\"\n  (zoomIn)=\"zoomIn()\"\n  (zoomOut)=\"zoomOut()\"\n  (toggleSurface3dMode)=\"toggleSurface3dMode($event)\"\n  (resetSurfaceCamera)=\"resetSurfaceCamera()\"\n  (toggleAxes)=\"toggleAxes()\"\n  (toggleWireframe)=\"toggleWireframe()\"\n  (selectResolution)=\"selectResolution($event)\"\n  (deleteRegion)=\"deleteRegion()\"\n  (undoRegion)=\"undoRegion()\"\n  (redoRegion)=\"redoRegion()\"\n  (segmentRegions)=\"segmentRegions()\"\n  (segmentCellpose)=\"segmentCellpose()\"\n  (samModelChange)=\"onSamModelChange($event)\"\n  (wandSensitivityChange)=\"onWandSensitivityChange($event)\"\n  (brushSizeChange)=\"onBrushSizeChange($event)\"\n  (vertexEraserRadiusChange)=\"onVertexEraserRadiusChange($event)\">\n  <!-- Host-projected custom toolbar buttons, forwarded into the toolbar. -->\n  <ng-content></ng-content>\n</plotting-toolbar>\n  <p-button *ngIf=\"toolbarFloating\" class=\"toolbar-dock-btn\" icon=\"pi pi-thumbtack\" size=\"small\" [text]=\"true\"\n            pTooltip=\"Dock to top\" tooltipPosition=\"bottom\" (onClick)=\"dockToolbar()\">\n  </p-button>\n</div>\n\n<p-contextMenu #cm [model]=\"contextMenuItems\" appendTo=\"body\"></p-contextMenu>\n<!-- No `h-full` here: PrimeFlex's height:100% !important made #plot as tall as\n     the whole host, so under the docked toolbar its bottom toolbar-height strip\n     (incl. the OSD scale bar at bottom-left) was clipped by the host's\n     overflow:hidden. The component stylesheet sizes it (.viz-plot { flex: 1 }). -->\n<div class=\"w-full relative viz-plot\" [id]=\"plotDivName\">\n  <div *ngIf=\"imgLoading || stackLoading || isCaching\" id=\"overlay\">\n    <!-- Determinate stack/volume progress takes precedence: while it's active show ONLY the\n         progress bar + \"Loading frames...\", not the generic spinner/\"Loading image...\" on top of\n         it (both were rendering at once for napari volume/isosurface loads). -->\n    <ng-container *ngIf=\"stackLoading; else imgLoadingTpl\">\n      <p-progressBar class=\"progress\" [value]=\"loadingPercentage\"></p-progressBar>\n      <span class=\"text-loading\">Loading frames...</span>\n    </ng-container>\n    <ng-template #imgLoadingTpl>\n      <!-- Cache-copy progress is shown whenever a cache download is active (isCaching), independent\n           of `imgLoading`, so it's never dropped/masked mid-download. -->\n      <ng-container *ngIf=\"isCaching; else spinnerLoading\">\n        <!-- Stage-aware message comes from CacheProgressService updating\n             imageLoadingMessage$ (\"Caching image...\" during the GCS download,\n             then \"Generating preview...\" during per-slice thumbnail gen). Once the\n             download hits 100% the remaining work (server preview/tile generation)\n             has no determinate progress, so fall through to the spinner template\n             rather than parking a full bar under \"Loading image...\". -->\n        <p-progressBar class=\"progress\" [value]=\"cacheProgress\"></p-progressBar>\n        <span class=\"text-loading\">{{loadingMessage}}</span>\n      </ng-container>\n      <ng-template #spinnerLoading>\n        <div *ngIf=\"imgLoading\" class=\"spinner\"></div>\n        <span *ngIf=\"imgLoading && !zoom\" class=\"text-loading\">{{loadingMessage}}</span>\n        <span *ngIf=\"imgLoading && zoom\" class=\"zoom-text-loading\">{{loadingMessage}}</span>\n      </ng-template>\n    </ng-template>\n    <p-button *ngIf=\"stackLoading || imgLoading\" class=\"cancel-loading \" label=\"Cancel\"\n              (onClick)=\"cancelLoading()\">\n    </p-button>\n  </div>\n  <!-- Translucent \"sharpening\" overlay shown after the small-tier preview is\n       on screen while the large-tier render is still loading in the\n       background. Lets the user see the blurry image underneath but makes\n       it clear something is still loading so they don't mistake the\n       low-res render for the final image. -->\n  <div *ngIf=\"sharpening && !imgLoading && !stackLoading && !isCaching\" id=\"sharpening-overlay\">\n    <div class=\"spinner\"></div>\n    <span class=\"text-loading\">Sharpening preview...</span>\n  </div>\n\n</div>\n\n<!-- Floating, draggable intensity-profile inset. Shown in LINE mode; the chart\n     updates live as the line ROI on the image is moved. Kept OUTSIDE #plot and\n     positioned fixed so it floats over the whole page (not clipped to the\n     diagram/canvas area). -->\n<div *ngIf=\"hasProfiles\" class=\"intensity-panel\"\n     [style.left.px]=\"profilePanelPos.x\" [style.top.px]=\"profilePanelPos.y\">\n  <div class=\"intensity-panel-header\" (mousedown)=\"onProfilePanelDragStart($event)\">\n    <span>Intensity profile</span>\n    <i class=\"pi pi-arrows-alt\"></i>\n  </div>\n  <div [id]=\"intensityInsetDiv\" class=\"intensity-panel-plot\"></div>\n</div>\n\n<!-- Channels & Histogram: non-modal floating dialog opened from the toolbar. -->\n<channel-histogram [(visible)]=\"showChannelHistogram\"></channel-histogram>\n\n<!-- Region Editor: non-modal, draggable, resizable floating dialog opened from\n     the toolbar (formerly the right-panel Regions tab). Modeless so regions can\n     still be drawn/selected on the plot while it's open; stays linked to this\n     plotting instance via the root RegionStore singleton. Opens over the right\n     side of the view. -->\n<p-dialog header=\"Region Editor\" [(visible)]=\"showRegionEditor\"\n          [modal]=\"false\" [resizable]=\"true\" [draggable]=\"true\"\n          [maximizable]=\"true\" appendTo=\"body\" position=\"right\"\n          [style]=\"{ width: regionEditorWidth, height: '85vh' }\"\n          [contentStyle]=\"{ overflow: 'auto' }\">\n  <region-editor></region-editor>\n</p-dialog>\n\n<!-- Simplify (Douglas\u2013Peucker): custom px-threshold picker for the selected\n     region(s), opened from the right-click \"Simplify \u25B8 Custom\u2026\" action. -->\n<p-dialog header=\"Simplify region(s)\" [(visible)]=\"displaySimplifyDialog\" [modal]=\"true\"\n          [style]=\"{width: '22rem'}\" [draggable]=\"false\" [resizable]=\"false\">\n  <div class=\"flex flex-column gap-2\">\n    <span>Altitude threshold: <b>{{ simplifyThreshold }} px</b></span>\n    <p-slider [(ngModel)]=\"simplifyThreshold\" [min]=\"1\" [max]=\"20\" [step]=\"1\"></p-slider>\n    <small>Vertices within this distance of the line between their neighbours are removed.</small>\n  </div>\n  <ng-template pTemplate=\"footer\">\n    <p-button label=\"Cancel\" [text]=\"true\" (onClick)=\"displaySimplifyDialog = false\"></p-button>\n    <p-button label=\"Apply\" icon=\"pi pi-check\" (onClick)=\"simplifyRegions(simplifyThreshold)\"></p-button>\n  </ng-template>\n</p-dialog>\n\n", styles: [":host{display:flex;flex-direction:column;height:100%;overflow:hidden}.viz-plot{flex:1;min-height:0;height:auto!important}.toolbar-dock{display:flex;align-items:stretch;width:100%}.toolbar-dock plotting-toolbar{flex:1;min-width:0}.toolbar-dock.floating{position:fixed;z-index:1000;width:auto;max-width:calc(100% - 16px);background:var(--surface-card, #ffffff);border:1px solid var(--surface-border, #cccccc);border-radius:6px;box-shadow:0 4px 16px #0000004d}.toolbar-dock.floating plotting-toolbar{flex:0 1 auto}.toolbar-dock.floating .toolbar-drag-handle{border-radius:6px 0 0 6px}.toolbar-drag-handle{display:flex;align-items:center;justify-content:center;padding:0 .4rem;cursor:move;color:var(--primary-color);background:var(--surface-100, rgba(0, 0, 0, .04));border-right:1px solid var(--surface-border, #cccccc);-webkit-user-select:none;user-select:none}.toolbar-dock-btn{align-self:center}:host ::ng-deep .navigator{margin-bottom:80px!important;margin-right:12px!important}kbd{background:#e8e8e8;border:1px solid #bbb;border-radius:3px;padding:1px 5px;font-family:monospace;font-size:.85em}::ng-deep .context-menu-active>.p-menuitem-content{background-color:var(--primary-color)!important}::ng-deep .context-menu-active>.p-menuitem-content .p-menuitem-icon,::ng-deep .context-menu-active>.p-menuitem-content .p-menuitem-text{color:#fff!important}::ng-deep .context-menu-active>.p-menuitem-content .zoom-box-off-icon,::ng-deep .context-menu-active>.p-menuitem-content .wand-icon,::ng-deep .context-menu-active>.p-menuitem-content .polyline-icon,::ng-deep .context-menu-active>.p-menuitem-content .polygon-vertices-icon,::ng-deep .context-menu-active>.p-menuitem-content .vertex-add-icon,::ng-deep .context-menu-active>.p-menuitem-content .vertex-delete-icon,::ng-deep .context-menu-active>.p-menuitem-content .region-move-icon,::ng-deep .context-menu-active>.p-menuitem-content .to-bezier-icon,::ng-deep .context-menu-active>.p-menuitem-content .to-polygon-icon{filter:brightness(0) invert(1)}.toolbar-separator{border-left:1px solid var(--surface-border);height:1.5rem;margin:0 .25rem;align-self:center}.progress{position:absolute;width:50%;left:25%;top:55%}.text-loading{position:absolute;margin:0 auto;left:45%;top:60%;font-weight:700}.zoom-text-loading{position:absolute;margin:0 auto;left:35%;top:60%;font-weight:700;display:inline-block;width:350px}.cancel-loading{position:absolute;margin:0 auto;left:46%;top:70%}.spinner{position:absolute;left:45%;top:45%;height:100px;width:100px;margin:0 auto;-webkit-animation:rotation .6s infinite linear;-moz-animation:rotation .6s infinite linear;-o-animation:rotation .6s infinite linear;animation:rotation .6s infinite linear;border-left:6px solid rgba(0,174,239,.15);border-right:6px solid rgba(0,174,239,.15);border-bottom:6px solid rgba(0,174,239,.15);border-top:6px solid rgb(82,107,178);border-radius:100%}#overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff80;z-index:1000}#sharpening-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff2e;pointer-events:none;z-index:1000}#sharpening-overlay .spinner{height:60px;width:60px;border-width:4px;left:calc(50% - 30px);top:calc(50% - 60px)}#sharpening-overlay .text-loading{position:absolute;left:0;right:0;width:auto;text-align:center;top:calc(50% + 35px);font-size:.9rem;color:#526bb2}@-webkit-keyframes rotation{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(359deg)}}@-moz-keyframes rotation{0%{-moz-transform:rotate(0deg)}to{-moz-transform:rotate(359deg)}}@-o-keyframes rotation{0%{-o-transform:rotate(0deg)}to{-o-transform:rotate(359deg)}}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(359deg)}}::ng-deep .zoom-box-off-icon{background:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\" fill=\"black\" fill-rule=\"evenodd\">%0A  <!-- Rectangle outline -->%0A  <rect x=\"2\" y=\"2\" width=\"56\" height=\"56\"/>%0A  <rect x=\"9\" y=\"9\" width=\"42\" height=\"42\"/>%0A  <!-- Magnifying glass ring -->%0A  <circle cx=\"70\" cy=\"70\" r=\"23\"/>%0A  <circle cx=\"70\" cy=\"70\" r=\"14\"/>%0A  <!-- Handle -->%0A  <polygon points=\"81,81 97,97 92,100 77,85\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .wand-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<svg%0A   viewBox=\"0 0 100 100\"%0A   fill=\"black\"%0A   fill-rule=\"evenodd\"%0A   version=\"1.1\"%0A   id=\"svg4\"%0A   sodipodi:docname=\"wand.svg\"%0A   inkscape:version=\"1.4.3 (0d15f75, 2025-12-25)\"%0A   xmlns:inkscape=\"http://www.inkscape.org/namespaces/inkscape\"%0A   xmlns:sodipodi=\"http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd\"%0A   xmlns=\"http://www.w3.org/2000/svg\"%0A   xmlns:svg=\"http://www.w3.org/2000/svg\">%0A  <defs%0A     id=\"defs4\" />%0A  <sodipodi:namedview%0A     id=\"namedview4\"%0A     pagecolor=\"%23ffffff\"%0A     bordercolor=\"%23000000\"%0A     borderopacity=\"0.25\"%0A     inkscape:showpageshadow=\"2\"%0A     inkscape:pageopacity=\"0.0\"%0A     inkscape:pagecheckerboard=\"0\"%0A     inkscape:deskcolor=\"%23d1d1d1\"%0A     inkscape:zoom=\"8.74\"%0A     inkscape:cx=\"50\"%0A     inkscape:cy=\"49.942792\"%0A     inkscape:window-width=\"1024\"%0A     inkscape:window-height=\"1186\"%0A     inkscape:window-x=\"3560\"%0A     inkscape:window-y=\"131\"%0A     inkscape:window-maximized=\"0\"%0A     inkscape:current-layer=\"svg4\" />%0A  <!-- Wand handle: thin diagonal stick from lower-left to upper-right -->%0A  <polygon%0A     points=\"12,92 78,26 74,22 8,88 \"%0A     id=\"polygon1\"%0A     transform=\"matrix(1.0375192,0.05799445,0.25179496,0.91871864,-17.85351,5.6289793)\" />%0A  <!-- 4-pointed star at the wand tip -->%0A  <polygon%0A     points=\"62,34 76,30 80,6 84,30 98,34 84,38 80,62 76,38 \"%0A     id=\"polygon2\"%0A     transform=\"matrix(1.3082889,0,0,1.0245178,-38.907958,-1.4056881)\" />%0A  <!-- Small sparkle to the upper-left -->%0A  <polygon%0A     points=\"46,30 36,32 34,42 32,32 22,30 32,28 34,18 36,28 \"%0A     id=\"polygon3\"%0A     transform=\"translate(-9.610984,-6.7505721)\" />%0A  <!-- Small sparkle to the lower-right -->%0A  <polygon%0A     points=\"62,80 70,82 62,84 60,92 58,84 50,82 58,80 60,72 \"%0A     id=\"polygon4\"%0A     transform=\"translate(0,-1.6018307)\" />%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .brush-icon{background:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\"><!--!Font Awesome Free 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d=\"M512.5 74.3L291.1 222C262 241.4 243.5 272.9 240.5 307.3C302.8 320.1 351.9 369.2 364.8 431.6C399.3 428.6 430.7 410.1 450.1 381L597.7 159.5C604.4 149.4 608 137.6 608 125.4C608 91.5 580.5 64 546.6 64C534.5 64 522.6 67.6 512.5 74.3zM320 464C320 402.1 269.9 352 208 352C146.1 352 96 402.1 96 464C96 467.9 96.2 471.8 96.6 475.6C98.4 493.1 86.4 512 68.8 512L64 512C46.3 512 32 526.3 32 544C32 561.7 46.3 576 64 576L208 576C269.9 576 320 525.9 320 464z\"/></svg>') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .polyline-icon{background:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" width=\"16\" height=\"16\">%0A  <polyline points=\"1,14 5,3 10,11 15,2\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .polygon-vertices-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Polygon (click-to-place) tool icon: a traced polyline with vertex dots. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <g transform=\"matrix(1.4740709,0,0,1.4740709,-6.0268793,-6.8086826)\">%0A    <polyline points=\"23.877,16.627 14.657,10.767 5.25,21.551 12.757,29.397\"%0A              fill=\"none\" stroke=\"%23000000\" stroke-width=\"1.6\"%0A              stroke-linejoin=\"round\" stroke-linecap=\"round\"/>%0A    <circle cx=\"23.877\" cy=\"16.627\" r=\"1.9\"/>%0A    <circle cx=\"14.657\" cy=\"10.767\" r=\"1.9\"/>%0A    <circle cx=\"5.25\" cy=\"21.551\" r=\"1.9\"/>%0A    <circle cx=\"12.757\" cy=\"29.397\" r=\"1.9\"/>%0A  </g>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .vertex-add-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Add-vertex tool icon: a region blob with three corner vertices and a plus glyph. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <g transform=\"matrix(1.5222969,0,0,1.5222969,-8.2143505,-7.6146399)\">%0A    <path d=\"m 9.35834,12.33267 c 1.78,-2.53 4.93,-3.56 7.86,-3.98 3.98,-0.72 8.33,0.08 11.52,2.67 2.62,1.98 4.71,5.1 4.53,8.49 -0.29,2.27 -2.5,3.81 -4.66,4.01 -2.75,0.43 -5.54,0.07 -8.28,-0.26 -3.99,-0.68 -8.05,-2.16 -10.93,-5.12 -1.32,-1.63 -1.39,-4.17 -0.04,-5.81 z\"%0A          fill=\"none\" stroke=\"%23000000\" stroke-width=\"1.6\" stroke-miterlimit=\"10\"/>%0A    <circle cx=\"8.294\" cy=\"15.248\" r=\"2.63\"/>%0A    <circle cx=\"19.781\" cy=\"8.287\" r=\"2.63\"/>%0A    <circle cx=\"25.044\" cy=\"23.748\" r=\"2.63\"/>%0A  </g>%0A  <path d=\"M 9.65,29.0 H 5.85 v 5.3 H 0.55 v 3.4 H 5.85 v 5.3 H 9.65 V 37.7 H 14.95 V 34.3 H 9.65 Z\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .vertex-delete-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Delete-vertex tool icon: a region blob with three corner vertices and a minus glyph. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <g transform=\"matrix(1.5222969,0,0,1.5222969,-8.2143505,-7.6146399)\">%0A    <path d=\"m 9.35834,12.33267 c 1.78,-2.53 4.93,-3.56 7.86,-3.98 3.98,-0.72 8.33,0.08 11.52,2.67 2.62,1.98 4.71,5.1 4.53,8.49 -0.29,2.27 -2.5,3.81 -4.66,4.01 -2.75,0.43 -5.54,0.07 -8.28,-0.26 -3.99,-0.68 -8.05,-2.16 -10.93,-5.12 -1.32,-1.63 -1.39,-4.17 -0.04,-5.81 z\"%0A          fill=\"none\" stroke=\"%23000000\" stroke-width=\"1.6\" stroke-miterlimit=\"10\"/>%0A    <circle cx=\"8.294\" cy=\"15.248\" r=\"2.63\"/>%0A    <circle cx=\"19.781\" cy=\"8.287\" r=\"2.63\"/>%0A    <circle cx=\"25.044\" cy=\"23.748\" r=\"2.63\"/>%0A  </g>%0A  <path d=\"M 0.55,34.3 v 3.4 H 14.95 V 34.3 Z\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .region-move-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Region-move tool icon: a region blob with a drag arrow. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <path d=\"m 17.115582,8.9648664 c 1.707597,-3.3276806 4.729468,-4.6824281 7.540287,-5.2348498 3.827703,-0.947008 7.991169,0.1052238 11.051414,3.5118228 2.523022,2.604273 4.518416,6.7079726 4.345738,11.1668036 -0.278204,2.985704 -2.398311,5.011251 -4.470451,5.274308 -2.638142,0.565574 -5.314655,0.09206 -7.943203,-0.341976 C 23.811664,22.446579 19.916808,20.499952 17.153955,16.606696 15.89724,14.462775 15.820494,11.12194 17.115585,8.9648664 Z\"%0A        fill=\"none\" stroke=\"%23000000\" stroke-width=\"2.1\" stroke-miterlimit=\"10\"/>%0A  <path d=\"m 26.741429,13.966963 6.746922,16.786269 3.229398,-4.060758 3.583857,3.583857 2.761195,-2.761196 -3.583856,-3.571852 4.060758,-3.2354 z\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .to-bezier-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Convert-to-bezier tool icon: a smooth curve through two anchor points with control handles. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <!-- smooth cubic curve between the two anchors -->%0A  <path d=\"M 7,34 C 7,16 37,28 37,10\" fill=\"none\" stroke=\"%23000000\" stroke-width=\"2.4\"%0A        stroke-linecap=\"round\"/>%0A  <!-- control handles -->%0A  <line x1=\"7\" y1=\"34\" x2=\"7\" y2=\"22\" stroke=\"%23000000\" stroke-width=\"1.4\"/>%0A  <line x1=\"37\" y1=\"10\" x2=\"37\" y2=\"22\" stroke=\"%23000000\" stroke-width=\"1.4\"/>%0A  <circle cx=\"7\" cy=\"22\" r=\"2.2\"/>%0A  <circle cx=\"37\" cy=\"22\" r=\"2.2\"/>%0A  <!-- anchor points -->%0A  <rect x=\"4\" y=\"31\" width=\"6\" height=\"6\" rx=\"1\"/>%0A  <rect x=\"34\" y=\"7\" width=\"6\" height=\"6\" rx=\"1\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .to-polygon-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Convert-to-polygon tool icon: endpoints joined by straight segments through a vertex. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <!-- straight-segment path through the vertices -->%0A  <polyline points=\"7,34 22,12 37,10\" fill=\"none\" stroke=\"%23000000\" stroke-width=\"2.4\"%0A            stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0A  <!-- vertices -->%0A  <rect x=\"4\" y=\"31\" width=\"6\" height=\"6\" rx=\"1\"/>%0A  <rect x=\"19\" y=\"9\" width=\"6\" height=\"6\" rx=\"1\"/>%0A  <rect x=\"34\" y=\"7\" width=\"6\" height=\"6\" rx=\"1\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}.intensity-panel{position:fixed;z-index:1100;width:280px;height:180px;background:#191919e6;border:1px solid var(--primary-color, #3399ff);border-radius:6px;box-shadow:0 4px 14px #00000073;display:flex;flex-direction:column;overflow:hidden}.intensity-panel-header{display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem;cursor:move;-webkit-user-select:none;user-select:none;background:#ffffff14;color:#eee;font-size:.75rem;font-weight:600}.intensity-panel-header i{opacity:.6;font-size:.7rem}.intensity-panel-plot{flex:1 1 auto;width:100%}:host ::ng-deep .sam-progress .p-progressbar-value{transition:none}\n"] }]
+            args: [{ selector: 'visualizer', template: "<!-- SAM toast: live status + encoder-download progress bar (jit-ui#90). Sticky\n     while a segment runs; stays open until the bar reaches 100% and the run ends. -->\n<p-toast [key]=\"samToastKey\" position=\"bottom-right\">\n  <ng-template let-message pTemplate=\"message\">\n    <div style=\"flex: 1; min-width: 16rem\">\n      <div class=\"font-bold mb-1\">{{ message.summary }}</div>\n      <div>{{ samStatus || message.detail }}</div>\n      <p-progressBar *ngIf=\"samDownloading\" [value]=\"samProgress\" styleClass=\"mt-2 sam-progress\"></p-progressBar>\n      <p-progressBar *ngIf=\"samBusy && !samDownloading\" mode=\"indeterminate\" styleClass=\"mt-2\"\n                     [style]=\"{ height: '4px' }\"></p-progressBar>\n    </div>\n  </ng-template>\n</p-toast>\n\n<!-- Result/error notices from the library itself (segmentation outcome, region\n     validation). Rendered here so they do not depend on the host mounting a\n     keyless <p-toast> \u2014 without this the messages went nowhere in any host but\n     jit-ui, and a failed run looked like a button that did nothing. -->\n<p-toast [key]=\"resultToastKey\" position=\"bottom-right\"></p-toast>\n\n<!-- Shared outlets for notices raised where there is no per-instance key to use:\n     the root-provided PlotlyService and the region-editor dialog. Rendered by a\n     single visualizer (ownsSharedToasts) so a message from the root service is\n     not shown once per live viewer. -->\n<p-toast *ngIf=\"ownsSharedToasts\" [key]=\"vizToastKey\"></p-toast>\n<p-toast *ngIf=\"ownsSharedToasts\" [key]=\"vizAlertToastKey\" position=\"center\"></p-toast>\n\n<!-- Toolbar dock: docked across the top by default; drag the handle to detach\n     it into a floating, movable window (frees the top row for the image). -->\n<div class=\"toolbar-dock\" [class.floating]=\"toolbarFloating\"\n     [style.left.px]=\"toolbarFloating ? toolbarPos.x : null\"\n     [style.top.px]=\"toolbarFloating ? toolbarPos.y : null\">\n  <div class=\"toolbar-drag-handle\" (mousedown)=\"onToolbarDragStart($event)\"\n       pTooltip=\"Drag to float the toolbar\" tooltipPosition=\"bottom\">\n    <i class=\"pi pi-bars\"></i>\n  </div>\n<plotting-toolbar\n  [imageInfo]=\"imageInfo\"\n  [plotTypeOptions]=\"plotTypeOptions\"\n  [selectedPlotType]=\"selectedPlotType\"\n  [isoRange]=\"isoRange\"\n  [maxIndex]=\"maxIndex\"\n  [zIndex]=\"zIndex\"\n  [isHeatmap]=\"isHeatmap\"\n  [activeDragMode]=\"activeDragMode\"\n  [activeSurface3dMode]=\"activeSurface3dMode\"\n  [axesVisible]=\"axesVisible\"\n  [wireframeActive]=\"wireframeActive\"\n  [resolutionScale]=\"resolutionScale\"\n  [wandSensitivity]=\"wandSensitivity\"\n  [brushSize]=\"brushSize\"\n  [samModels]=\"samModels\"\n  [samModelId]=\"samModelId\"\n  [vertexEraserRadius]=\"vertexEraserRadius\"\n  [canUndo]=\"canUndoRegion\"\n  [canRedo]=\"canRedoRegion\"\n  [stackOptions]=\"stackOptions\"\n  [tools]=\"toolbarTools\"\n  [imageSmoothingEnabled]=\"imageSmoothingEnabled\"\n  (selectPlotType)=\"onSelectPlotType($event)\"\n  (toggleImageSmoothing)=\"onToggleImageSmoothing()\"\n  (addProfileLine)=\"addProfileLine()\"\n  (isoRangeChange)=\"onIsoRangeChange($event)\"\n  (openChannelHistogram)=\"openChannelHistogram()\"\n  (openRegionEditor)=\"openRegionEditor()\"\n  (selectStackOption)=\"selectStackOption($event)\"\n  (zScrub)=\"onZScrub($event)\"\n  (zSlide)=\"onZSlide($event)\"\n  (zIndexInput)=\"zIndex = $event; updateZIndex()\"\n  (reloadAndPlot)=\"reloadAndPlot()\"\n  (downloadImage)=\"downloadImage()\"\n  (autoscaleImage)=\"autoscaleImage()\"\n  (toggleDragMode)=\"toggleDragMode($event)\"\n  (zoomIn)=\"zoomIn()\"\n  (zoomOut)=\"zoomOut()\"\n  (toggleSurface3dMode)=\"toggleSurface3dMode($event)\"\n  (resetSurfaceCamera)=\"resetSurfaceCamera()\"\n  (toggleAxes)=\"toggleAxes()\"\n  (toggleWireframe)=\"toggleWireframe()\"\n  (selectResolution)=\"selectResolution($event)\"\n  (deleteRegion)=\"deleteRegion()\"\n  (undoRegion)=\"undoRegion()\"\n  (redoRegion)=\"redoRegion()\"\n  (segmentRegions)=\"segmentRegions()\"\n  (segmentCellpose)=\"segmentCellpose()\"\n  (samModelChange)=\"onSamModelChange($event)\"\n  (wandSensitivityChange)=\"onWandSensitivityChange($event)\"\n  (brushSizeChange)=\"onBrushSizeChange($event)\"\n  (vertexEraserRadiusChange)=\"onVertexEraserRadiusChange($event)\">\n  <!-- Host-projected custom toolbar buttons, forwarded into the toolbar. -->\n  <ng-content></ng-content>\n</plotting-toolbar>\n  <p-button *ngIf=\"toolbarFloating\" class=\"toolbar-dock-btn\" icon=\"pi pi-thumbtack\" size=\"small\" [text]=\"true\"\n            pTooltip=\"Dock to top\" tooltipPosition=\"bottom\" (onClick)=\"dockToolbar()\">\n  </p-button>\n</div>\n\n<p-contextMenu #cm [model]=\"contextMenuItems\" appendTo=\"body\"></p-contextMenu>\n<!-- No `h-full` here: PrimeFlex's height:100% !important made #plot as tall as\n     the whole host, so under the docked toolbar its bottom toolbar-height strip\n     (incl. the OSD scale bar at bottom-left) was clipped by the host's\n     overflow:hidden. The component stylesheet sizes it (.viz-plot { flex: 1 }). -->\n<div class=\"w-full relative viz-plot\" [id]=\"plotDivName\">\n  <div *ngIf=\"imgLoading || stackLoading || isCaching\" id=\"overlay\">\n    <!-- Determinate stack/volume progress takes precedence: while it's active show ONLY the\n         progress bar + \"Loading frames...\", not the generic spinner/\"Loading image...\" on top of\n         it (both were rendering at once for napari volume/isosurface loads). -->\n    <ng-container *ngIf=\"stackLoading; else imgLoadingTpl\">\n      <p-progressBar class=\"progress\" [value]=\"loadingPercentage\"></p-progressBar>\n      <span class=\"text-loading\">Loading frames...</span>\n    </ng-container>\n    <ng-template #imgLoadingTpl>\n      <!-- Cache-copy progress is shown whenever a cache download is active (isCaching), independent\n           of `imgLoading`, so it's never dropped/masked mid-download. -->\n      <ng-container *ngIf=\"isCaching; else spinnerLoading\">\n        <!-- Stage-aware message comes from CacheProgressService updating\n             imageLoadingMessage$ (\"Caching image...\" during the GCS download,\n             then \"Generating preview...\" during per-slice thumbnail gen). Once the\n             download hits 100% the remaining work (server preview/tile generation)\n             has no determinate progress, so fall through to the spinner template\n             rather than parking a full bar under \"Loading image...\". -->\n        <p-progressBar class=\"progress\" [value]=\"cacheProgress\"></p-progressBar>\n        <span class=\"text-loading\">{{loadingMessage}}</span>\n      </ng-container>\n      <ng-template #spinnerLoading>\n        <div *ngIf=\"imgLoading\" class=\"spinner\"></div>\n        <span *ngIf=\"imgLoading && !zoom\" class=\"text-loading\">{{loadingMessage}}</span>\n        <span *ngIf=\"imgLoading && zoom\" class=\"zoom-text-loading\">{{loadingMessage}}</span>\n      </ng-template>\n    </ng-template>\n    <p-button *ngIf=\"stackLoading || imgLoading\" class=\"cancel-loading \" label=\"Cancel\"\n              (onClick)=\"cancelLoading()\">\n    </p-button>\n  </div>\n  <!-- Translucent \"sharpening\" overlay shown after the small-tier preview is\n       on screen while the large-tier render is still loading in the\n       background. Lets the user see the blurry image underneath but makes\n       it clear something is still loading so they don't mistake the\n       low-res render for the final image. -->\n  <div *ngIf=\"sharpening && !imgLoading && !stackLoading && !isCaching\" id=\"sharpening-overlay\">\n    <div class=\"spinner\"></div>\n    <span class=\"text-loading\">Sharpening preview...</span>\n  </div>\n\n</div>\n\n<!-- Floating, draggable intensity-profile inset. Shown in LINE mode; the chart\n     updates live as the line ROI on the image is moved. Kept OUTSIDE #plot and\n     positioned fixed so it floats over the whole page (not clipped to the\n     diagram/canvas area). -->\n<div *ngIf=\"hasProfiles\" class=\"intensity-panel\"\n     [style.left.px]=\"profilePanelPos.x\" [style.top.px]=\"profilePanelPos.y\">\n  <div class=\"intensity-panel-header\" (mousedown)=\"onProfilePanelDragStart($event)\">\n    <span>Intensity profile</span>\n    <i class=\"pi pi-arrows-alt\"></i>\n  </div>\n  <div [id]=\"intensityInsetDiv\" class=\"intensity-panel-plot\"></div>\n</div>\n\n<!-- Channels & Histogram: non-modal floating dialog opened from the toolbar. -->\n<channel-histogram [(visible)]=\"showChannelHistogram\"></channel-histogram>\n\n<!-- Region Editor: non-modal, draggable, resizable floating dialog opened from\n     the toolbar (formerly the right-panel Regions tab). Modeless so regions can\n     still be drawn/selected on the plot while it's open; stays linked to this\n     plotting instance via the root RegionStore singleton. Opens over the right\n     side of the view. -->\n<p-dialog header=\"Region Editor\" [(visible)]=\"showRegionEditor\"\n          [modal]=\"false\" [resizable]=\"true\" [draggable]=\"true\"\n          [maximizable]=\"true\" appendTo=\"body\" position=\"right\"\n          [style]=\"{ width: regionEditorWidth, height: '85vh' }\"\n          [contentStyle]=\"{ overflow: 'auto' }\">\n  <region-editor></region-editor>\n</p-dialog>\n\n<!-- Simplify (Douglas\u2013Peucker): custom px-threshold picker for the selected\n     region(s), opened from the right-click \"Simplify \u25B8 Custom\u2026\" action. -->\n<p-dialog header=\"Simplify region(s)\" [(visible)]=\"displaySimplifyDialog\" [modal]=\"true\"\n          [style]=\"{width: '22rem'}\" [draggable]=\"false\" [resizable]=\"false\">\n  <div class=\"flex flex-column gap-2\">\n    <span>Altitude threshold: <b>{{ simplifyThreshold }} px</b></span>\n    <p-slider [(ngModel)]=\"simplifyThreshold\" [min]=\"1\" [max]=\"20\" [step]=\"1\"></p-slider>\n    <small>Vertices within this distance of the line between their neighbours are removed.</small>\n  </div>\n  <ng-template pTemplate=\"footer\">\n    <p-button label=\"Cancel\" [text]=\"true\" (onClick)=\"displaySimplifyDialog = false\"></p-button>\n    <p-button label=\"Apply\" icon=\"pi pi-check\" (onClick)=\"simplifyRegions(simplifyThreshold)\"></p-button>\n  </ng-template>\n</p-dialog>\n\n", styles: [":host{display:flex;flex-direction:column;height:100%;overflow:hidden}.viz-plot{flex:1;min-height:0;height:auto!important}.toolbar-dock{display:flex;align-items:stretch;width:100%}.toolbar-dock plotting-toolbar{flex:1;min-width:0}.toolbar-dock.floating{position:fixed;z-index:1000;width:auto;max-width:calc(100% - 16px);background:var(--surface-card, #ffffff);border:1px solid var(--surface-border, #cccccc);border-radius:6px;box-shadow:0 4px 16px #0000004d}.toolbar-dock.floating plotting-toolbar{flex:0 1 auto}.toolbar-dock.floating .toolbar-drag-handle{border-radius:6px 0 0 6px}.toolbar-drag-handle{display:flex;align-items:center;justify-content:center;padding:0 .4rem;cursor:move;color:var(--primary-color);background:var(--surface-100, rgba(0, 0, 0, .04));border-right:1px solid var(--surface-border, #cccccc);-webkit-user-select:none;user-select:none}.toolbar-dock-btn{align-self:center}:host ::ng-deep .navigator{margin-bottom:80px!important;margin-right:12px!important}kbd{background:#e8e8e8;border:1px solid #bbb;border-radius:3px;padding:1px 5px;font-family:monospace;font-size:.85em}::ng-deep .context-menu-active>.p-menuitem-content{background-color:var(--primary-color)!important}::ng-deep .context-menu-active>.p-menuitem-content .p-menuitem-icon,::ng-deep .context-menu-active>.p-menuitem-content .p-menuitem-text{color:#fff!important}::ng-deep .context-menu-active>.p-menuitem-content .zoom-box-off-icon,::ng-deep .context-menu-active>.p-menuitem-content .wand-icon,::ng-deep .context-menu-active>.p-menuitem-content .polyline-icon,::ng-deep .context-menu-active>.p-menuitem-content .polygon-vertices-icon,::ng-deep .context-menu-active>.p-menuitem-content .vertex-add-icon,::ng-deep .context-menu-active>.p-menuitem-content .vertex-delete-icon,::ng-deep .context-menu-active>.p-menuitem-content .region-move-icon,::ng-deep .context-menu-active>.p-menuitem-content .to-bezier-icon,::ng-deep .context-menu-active>.p-menuitem-content .to-polygon-icon{filter:brightness(0) invert(1)}.toolbar-separator{border-left:1px solid var(--surface-border);height:1.5rem;margin:0 .25rem;align-self:center}.progress{position:absolute;width:50%;left:25%;top:55%}.text-loading{position:absolute;margin:0 auto;left:45%;top:60%;font-weight:700}.zoom-text-loading{position:absolute;margin:0 auto;left:35%;top:60%;font-weight:700;display:inline-block;width:350px}.cancel-loading{position:absolute;margin:0 auto;left:46%;top:70%}.spinner{position:absolute;left:45%;top:45%;height:100px;width:100px;margin:0 auto;-webkit-animation:rotation .6s infinite linear;-moz-animation:rotation .6s infinite linear;-o-animation:rotation .6s infinite linear;animation:rotation .6s infinite linear;border-left:6px solid rgba(0,174,239,.15);border-right:6px solid rgba(0,174,239,.15);border-bottom:6px solid rgba(0,174,239,.15);border-top:6px solid rgb(82,107,178);border-radius:100%}#overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff80;z-index:1000}#sharpening-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff2e;pointer-events:none;z-index:1000}#sharpening-overlay .spinner{height:60px;width:60px;border-width:4px;left:calc(50% - 30px);top:calc(50% - 60px)}#sharpening-overlay .text-loading{position:absolute;left:0;right:0;width:auto;text-align:center;top:calc(50% + 35px);font-size:.9rem;color:#526bb2}@-webkit-keyframes rotation{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(359deg)}}@-moz-keyframes rotation{0%{-moz-transform:rotate(0deg)}to{-moz-transform:rotate(359deg)}}@-o-keyframes rotation{0%{-o-transform:rotate(0deg)}to{-o-transform:rotate(359deg)}}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(359deg)}}::ng-deep .zoom-box-off-icon{background:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\" fill=\"black\" fill-rule=\"evenodd\">%0A  <!-- Rectangle outline -->%0A  <rect x=\"2\" y=\"2\" width=\"56\" height=\"56\"/>%0A  <rect x=\"9\" y=\"9\" width=\"42\" height=\"42\"/>%0A  <!-- Magnifying glass ring -->%0A  <circle cx=\"70\" cy=\"70\" r=\"23\"/>%0A  <circle cx=\"70\" cy=\"70\" r=\"14\"/>%0A  <!-- Handle -->%0A  <polygon points=\"81,81 97,97 92,100 77,85\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .wand-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<svg%0A   viewBox=\"0 0 100 100\"%0A   fill=\"black\"%0A   fill-rule=\"evenodd\"%0A   version=\"1.1\"%0A   id=\"svg4\"%0A   sodipodi:docname=\"wand.svg\"%0A   inkscape:version=\"1.4.3 (0d15f75, 2025-12-25)\"%0A   xmlns:inkscape=\"http://www.inkscape.org/namespaces/inkscape\"%0A   xmlns:sodipodi=\"http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd\"%0A   xmlns=\"http://www.w3.org/2000/svg\"%0A   xmlns:svg=\"http://www.w3.org/2000/svg\">%0A  <defs%0A     id=\"defs4\" />%0A  <sodipodi:namedview%0A     id=\"namedview4\"%0A     pagecolor=\"%23ffffff\"%0A     bordercolor=\"%23000000\"%0A     borderopacity=\"0.25\"%0A     inkscape:showpageshadow=\"2\"%0A     inkscape:pageopacity=\"0.0\"%0A     inkscape:pagecheckerboard=\"0\"%0A     inkscape:deskcolor=\"%23d1d1d1\"%0A     inkscape:zoom=\"8.74\"%0A     inkscape:cx=\"50\"%0A     inkscape:cy=\"49.942792\"%0A     inkscape:window-width=\"1024\"%0A     inkscape:window-height=\"1186\"%0A     inkscape:window-x=\"3560\"%0A     inkscape:window-y=\"131\"%0A     inkscape:window-maximized=\"0\"%0A     inkscape:current-layer=\"svg4\" />%0A  <!-- Wand handle: thin diagonal stick from lower-left to upper-right -->%0A  <polygon%0A     points=\"12,92 78,26 74,22 8,88 \"%0A     id=\"polygon1\"%0A     transform=\"matrix(1.0375192,0.05799445,0.25179496,0.91871864,-17.85351,5.6289793)\" />%0A  <!-- 4-pointed star at the wand tip -->%0A  <polygon%0A     points=\"62,34 76,30 80,6 84,30 98,34 84,38 80,62 76,38 \"%0A     id=\"polygon2\"%0A     transform=\"matrix(1.3082889,0,0,1.0245178,-38.907958,-1.4056881)\" />%0A  <!-- Small sparkle to the upper-left -->%0A  <polygon%0A     points=\"46,30 36,32 34,42 32,32 22,30 32,28 34,18 36,28 \"%0A     id=\"polygon3\"%0A     transform=\"translate(-9.610984,-6.7505721)\" />%0A  <!-- Small sparkle to the lower-right -->%0A  <polygon%0A     points=\"62,80 70,82 62,84 60,92 58,84 50,82 58,80 60,72 \"%0A     id=\"polygon4\"%0A     transform=\"translate(0,-1.6018307)\" />%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .brush-icon{background:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\"><!--!Font Awesome Free 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d=\"M512.5 74.3L291.1 222C262 241.4 243.5 272.9 240.5 307.3C302.8 320.1 351.9 369.2 364.8 431.6C399.3 428.6 430.7 410.1 450.1 381L597.7 159.5C604.4 149.4 608 137.6 608 125.4C608 91.5 580.5 64 546.6 64C534.5 64 522.6 67.6 512.5 74.3zM320 464C320 402.1 269.9 352 208 352C146.1 352 96 402.1 96 464C96 467.9 96.2 471.8 96.6 475.6C98.4 493.1 86.4 512 68.8 512L64 512C46.3 512 32 526.3 32 544C32 561.7 46.3 576 64 576L208 576C269.9 576 320 525.9 320 464z\"/></svg>') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .polyline-icon{background:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" width=\"16\" height=\"16\">%0A  <polyline points=\"1,14 5,3 10,11 15,2\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .polygon-vertices-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Polygon (click-to-place) tool icon: a traced polyline with vertex dots. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <g transform=\"matrix(1.4740709,0,0,1.4740709,-6.0268793,-6.8086826)\">%0A    <polyline points=\"23.877,16.627 14.657,10.767 5.25,21.551 12.757,29.397\"%0A              fill=\"none\" stroke=\"%23000000\" stroke-width=\"1.6\"%0A              stroke-linejoin=\"round\" stroke-linecap=\"round\"/>%0A    <circle cx=\"23.877\" cy=\"16.627\" r=\"1.9\"/>%0A    <circle cx=\"14.657\" cy=\"10.767\" r=\"1.9\"/>%0A    <circle cx=\"5.25\" cy=\"21.551\" r=\"1.9\"/>%0A    <circle cx=\"12.757\" cy=\"29.397\" r=\"1.9\"/>%0A  </g>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .vertex-add-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Add-vertex tool icon: a region blob with three corner vertices and a plus glyph. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <g transform=\"matrix(1.5222969,0,0,1.5222969,-8.2143505,-7.6146399)\">%0A    <path d=\"m 9.35834,12.33267 c 1.78,-2.53 4.93,-3.56 7.86,-3.98 3.98,-0.72 8.33,0.08 11.52,2.67 2.62,1.98 4.71,5.1 4.53,8.49 -0.29,2.27 -2.5,3.81 -4.66,4.01 -2.75,0.43 -5.54,0.07 -8.28,-0.26 -3.99,-0.68 -8.05,-2.16 -10.93,-5.12 -1.32,-1.63 -1.39,-4.17 -0.04,-5.81 z\"%0A          fill=\"none\" stroke=\"%23000000\" stroke-width=\"1.6\" stroke-miterlimit=\"10\"/>%0A    <circle cx=\"8.294\" cy=\"15.248\" r=\"2.63\"/>%0A    <circle cx=\"19.781\" cy=\"8.287\" r=\"2.63\"/>%0A    <circle cx=\"25.044\" cy=\"23.748\" r=\"2.63\"/>%0A  </g>%0A  <path d=\"M 9.65,29.0 H 5.85 v 5.3 H 0.55 v 3.4 H 5.85 v 5.3 H 9.65 V 37.7 H 14.95 V 34.3 H 9.65 Z\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .vertex-delete-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Delete-vertex tool icon: a region blob with three corner vertices and a minus glyph. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <g transform=\"matrix(1.5222969,0,0,1.5222969,-8.2143505,-7.6146399)\">%0A    <path d=\"m 9.35834,12.33267 c 1.78,-2.53 4.93,-3.56 7.86,-3.98 3.98,-0.72 8.33,0.08 11.52,2.67 2.62,1.98 4.71,5.1 4.53,8.49 -0.29,2.27 -2.5,3.81 -4.66,4.01 -2.75,0.43 -5.54,0.07 -8.28,-0.26 -3.99,-0.68 -8.05,-2.16 -10.93,-5.12 -1.32,-1.63 -1.39,-4.17 -0.04,-5.81 z\"%0A          fill=\"none\" stroke=\"%23000000\" stroke-width=\"1.6\" stroke-miterlimit=\"10\"/>%0A    <circle cx=\"8.294\" cy=\"15.248\" r=\"2.63\"/>%0A    <circle cx=\"19.781\" cy=\"8.287\" r=\"2.63\"/>%0A    <circle cx=\"25.044\" cy=\"23.748\" r=\"2.63\"/>%0A  </g>%0A  <path d=\"M 0.55,34.3 v 3.4 H 14.95 V 34.3 Z\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .region-move-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Region-move tool icon: a region blob with a drag arrow. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <path d=\"m 17.115582,8.9648664 c 1.707597,-3.3276806 4.729468,-4.6824281 7.540287,-5.2348498 3.827703,-0.947008 7.991169,0.1052238 11.051414,3.5118228 2.523022,2.604273 4.518416,6.7079726 4.345738,11.1668036 -0.278204,2.985704 -2.398311,5.011251 -4.470451,5.274308 -2.638142,0.565574 -5.314655,0.09206 -7.943203,-0.341976 C 23.811664,22.446579 19.916808,20.499952 17.153955,16.606696 15.89724,14.462775 15.820494,11.12194 17.115585,8.9648664 Z\"%0A        fill=\"none\" stroke=\"%23000000\" stroke-width=\"2.1\" stroke-miterlimit=\"10\"/>%0A  <path d=\"m 26.741429,13.966963 6.746922,16.786269 3.229398,-4.060758 3.583857,3.583857 2.761195,-2.761196 -3.583856,-3.571852 4.060758,-3.2354 z\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .to-bezier-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Convert-to-bezier tool icon: a smooth curve through two anchor points with control handles. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <!-- smooth cubic curve between the two anchors -->%0A  <path d=\"M 7,34 C 7,16 37,28 37,10\" fill=\"none\" stroke=\"%23000000\" stroke-width=\"2.4\"%0A        stroke-linecap=\"round\"/>%0A  <!-- control handles -->%0A  <line x1=\"7\" y1=\"34\" x2=\"7\" y2=\"22\" stroke=\"%23000000\" stroke-width=\"1.4\"/>%0A  <line x1=\"37\" y1=\"10\" x2=\"37\" y2=\"22\" stroke=\"%23000000\" stroke-width=\"1.4\"/>%0A  <circle cx=\"7\" cy=\"22\" r=\"2.2\"/>%0A  <circle cx=\"37\" cy=\"22\" r=\"2.2\"/>%0A  <!-- anchor points -->%0A  <rect x=\"4\" y=\"31\" width=\"6\" height=\"6\" rx=\"1\"/>%0A  <rect x=\"34\" y=\"7\" width=\"6\" height=\"6\" rx=\"1\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .to-polygon-icon{background:url('data:image/svg+xml,<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>%0A<!-- Convert-to-polygon tool icon: endpoints joined by straight segments through a vertex. -->%0A<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" fill=\"%23000000\">%0A  <!-- straight-segment path through the vertices -->%0A  <polyline points=\"7,34 22,12 37,10\" fill=\"none\" stroke=\"%23000000\" stroke-width=\"2.4\"%0A            stroke-linecap=\"round\" stroke-linejoin=\"round\"/>%0A  <!-- vertices -->%0A  <rect x=\"4\" y=\"31\" width=\"6\" height=\"6\" rx=\"1\"/>%0A  <rect x=\"19\" y=\"9\" width=\"6\" height=\"6\" rx=\"1\"/>%0A  <rect x=\"34\" y=\"7\" width=\"6\" height=\"6\" rx=\"1\"/>%0A</svg>%0A') no-repeat center center;background-size:contain;width:1.25rem;height:1.25rem;display:inline-block;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}.intensity-panel{position:fixed;z-index:1100;width:280px;height:180px;background:#191919e6;border:1px solid var(--primary-color, #3399ff);border-radius:6px;box-shadow:0 4px 14px #00000073;display:flex;flex-direction:column;overflow:hidden}.intensity-panel-header{display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem;cursor:move;-webkit-user-select:none;user-select:none;background:#ffffff14;color:#eee;font-size:.75rem;font-weight:600}.intensity-panel-header i{opacity:.6;font-size:.7rem}.intensity-panel-plot{flex:1 1 auto;width:100%}:host ::ng-deep .sam-progress .p-progressbar-value{transition:none}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [IMAGE_STATE_PORT]
@@ -11743,7 +11865,7 @@ class PlotlyService {
             catch (err) {
                 const msg = err?.error?.message || err?.message || err?.statusText || String(err);
                 console.error('Error occured', err);
-                this.messageService.add({ key: 'center-toast', sticky: true, severity: 'error', summary: 'An error occured', detail: `The following
+                this.messageService.add({ key: VIZ_ALERT_TOAST_KEY, sticky: true, severity: 'error', summary: 'An error occured', detail: `The following
                                   error occured: ${msg}. Please try to open the image again through the
                                   file navigator.` });
                 // TODO correctly clear the plot
@@ -12127,7 +12249,7 @@ class PlotlyService {
             }, error: err => {
                 const msg = err?.error?.message || err?.message || err?.statusText || String(err);
                 console.error('Error occured when zooming', err);
-                this.messageService.add({ key: 'center-toast', sticky: true, severity: 'error', summary: 'An error occured',
+                this.messageService.add({ key: VIZ_ALERT_TOAST_KEY, sticky: true, severity: 'error', summary: 'An error occured',
                     detail: `The following error occured while zooming: ${msg}.
                           Please try to open the image again through the file navigator and
                           zoom on the selected area once more.` });
@@ -15620,6 +15742,16 @@ class OpenSeadragonVisualizerService extends BaseStoreVisualizer {
         /** Only grayscale images get a colormap (RGB tiles pass through untouched). */
         this.isGrayscaleImage = false;
         this.colormapSub = null;
+        /** Bumped by every display invalidation. A recolor round captures it and, after
+         *  each `await`, abandons the tile once a newer round has started. Writing a
+         *  superseded context back is not merely wasted work: OSD's conversion sees a
+         *  canvas the newer round already replaced, throws `DOMException`, and
+         *  `_handleConversionError` DESTROYS the cache record and unloads the tile
+         *  (unlike the drawer's rasterBlob path, it does not re-prepare). Enough of
+         *  those and the viewer goes white mid-drag. */
+        this.displayToken = 0;
+        /** Pending coalesced invalidation (see {@link scheduleInvalidate}). */
+        this.invalidateHandle = null;
         /** Latest per-channel display state (window/gamma/visibility) from the store,
          *  read synchronously by recolorTile. Channel 0 drives grayscale windowing;
          *  R/G/B (indices 0-2) drive RGB per-channel windowing. */
@@ -15749,8 +15881,10 @@ class OpenSeadragonVisualizerService extends BaseStoreVisualizer {
             // requestInvalidate(true) restores each tile to its original data before
             // re-running recolorTile, so a change always maps afresh (no compounding).
             // RGB now recolors too (per-channel window/visibility), so don't gate on
-            // grayscale.
-            this.invalidateDisplay();
+            // grayscale. Coalesced: PrimeNG's slider fires (onChange) continuously, so
+            // a single drag would otherwise queue dozens of overlapping restore +
+            // re-process rounds over every channel image.
+            this.scheduleInvalidate();
         });
     }
     /** Seed the Intensity channel with a measured auto-window while it's still
@@ -16494,7 +16628,25 @@ class OpenSeadragonVisualizerService extends BaseStoreVisualizer {
      *  flooding OSD with "[CacheRecord] … InvalidStateError" and wasting work on tiles
      *  that aren't on screen. The other cached slices are marked stale and re-tinted
      *  lazily when revealed. Composite/grayscale invalidate the world as before. */
+    /** Collapse a burst of display-state changes into ONE invalidation on the next
+     *  frame. Dragging a window slider emits per pixel of travel, and each round
+     *  restores and re-processes every tile of every channel — so the burst is both
+     *  wasted work and the race that breaks cache records (see {@link displayToken}).
+     *  The store write stays live, so the pane itself remains responsive. */
+    scheduleInvalidate() {
+        if (this.invalidateHandle !== null)
+            return; // already queued for this frame
+        const raf = typeof requestAnimationFrame === 'function'
+            ? requestAnimationFrame
+            : (cb) => setTimeout(() => cb(0), 16);
+        this.invalidateHandle = raf(() => {
+            this.invalidateHandle = null;
+            this.invalidateDisplay();
+        });
+    }
     invalidateDisplay() {
+        // Supersede any in-flight recolor round before restarting one (see displayToken).
+        this.displayToken++;
         const v = this.viewer;
         if (!v)
             return;
@@ -17128,6 +17280,7 @@ class OpenSeadragonVisualizerService extends BaseStoreVisualizer {
             await this.recolorChannelTile(event);
             return;
         }
+        const token = this.displayToken;
         const gray = this.isGrayscaleImage;
         if (gray) {
             if (!this.colorLut)
@@ -17187,10 +17340,14 @@ class OpenSeadragonVisualizerService extends BaseStoreVisualizer {
         }
         if (!this.display.applyToRgba(img.data) || !ctx)
             return; // nothing opaque
+        // A newer display round has already restored this tile — writing now would
+        // hand OSD a superseded canvas and destroy the cache record.
+        if (token !== this.displayToken)
+            return;
         ctx.putImageData(img, 0, 0);
-        // The tile's cache can be evicted between the awaits above and here (slice
-        // change / invalidation), making setData throw a DOMException on a dead
-        // canvas. Swallow it — the tile is gone, so there's nothing to recolor.
+        // The tile's cache can still be evicted between the awaits above and here (a
+        // slice change), making setData throw a DOMException on a dead canvas.
+        // Swallow it — the tile is gone, so there's nothing to recolor.
         try {
             await event.setData(ctx, 'context2d');
         }
@@ -17204,6 +17361,7 @@ class OpenSeadragonVisualizerService extends BaseStoreVisualizer {
      * cross-tile fetch) → no race, no seams. Channel is parsed from the tile URL.
      */
     async recolorChannelTile(event) {
+        const token = this.displayToken;
         const tile = event?.tile;
         const url = (tile && (typeof tile.getUrl === 'function' ? tile.getUrl() : tile.url)) || '';
         const m = /[?&]channel=(\d+)/.exec(url);
@@ -17267,8 +17425,14 @@ class OpenSeadragonVisualizerService extends BaseStoreVisualizer {
         }
         if (!changed)
             return;
+        // A newer display round (the next tick of a slider drag) has already restored
+        // this tile. Writing a superseded context back makes OSD's conversion throw
+        // DOMException, which destroys the cache record and unloads the tile — do
+        // nothing and let the newer round repaint it.
+        if (token !== this.displayToken)
+            return;
         ctx.putImageData(img, 0, 0);
-        // See recolorTile: the tile cache can die between the awaits and here.
+        // See recolorTile: the tile cache can still die between the awaits and here.
         try {
             await event.setData(ctx, 'context2d');
         }
@@ -17410,6 +17574,14 @@ class OpenSeadragonVisualizerService extends BaseStoreVisualizer {
     unsubscribe() {
         this.colormapSub?.unsubscribe();
         this.colormapSub = null;
+        // Drop a queued invalidation so it can't fire against a torn-down viewer.
+        if (this.invalidateHandle !== null) {
+            if (typeof cancelAnimationFrame === 'function')
+                cancelAnimationFrame(this.invalidateHandle);
+            else
+                clearTimeout(this.invalidateHandle);
+            this.invalidateHandle = null;
+        }
         this.destroyViewer();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: OpenSeadragonVisualizerService, deps: [{ token: i1.HttpClient }, { token: TILE_ACCESS_PORT }, { token: WandToolService }, { token: BrushToolService }, { token: SamToolService }, { token: SamPointToolService }, { token: CellSegmentToolService }, { token: CELL_SEGMENTER, optional: true }, { token: VertexEraserToolService }, { token: ZoomToBoxToolService }, { token: VisualizerStore }, { token: RegionStore }, { token: SimpleSliceAccessService }, { token: VIZ_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable }); }