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

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

@@ -6645,6 +6645,8 @@ const MODEL_INFO = {
  */
 class ToolbarComponent {
     constructor() {
+        /** A spatial dataset is on offer: its plot modes are a choice even with no image loaded. */
+        this.hasSpatialDataset = false;
         /** Plot types the active backend advertises, then any contributed modes. */
         this.plotTypeOptions = [];
         /** The selector's value: a built-in type or a contributed mode's id. */
@@ -6803,6 +6805,10 @@ class ToolbarComponent {
          */
         this.toolMenuItems = {};
     }
+    /** Whether the plot-type dropdown shows: for an image, or a spatial dataset with none. */
+    get showPlotTypes() {
+        return !!(this.imageInfo || this.hasSpatialDataset) && !!this.tools.specialTools;
+    }
     /** Rebuild the SAM model menu when the model list or active selection
      *  changes (keeps the array reference stable across other CD ticks). */
     ngOnChanges(changes) {
@@ -6927,13 +6933,15 @@ class ToolbarComponent {
         this.displayHelpDialog = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ToolbarComponent, selector: "plotting-toolbar", inputs: { imageInfo: "imageInfo", plotTypeOptions: "plotTypeOptions", selectedPlotType: "selectedPlotType", basePlotType: "basePlotType", isoRange: "isoRange", maxIndex: "maxIndex", zIndex: "zIndex", isHeatmap: "isHeatmap", is3dRegions: "is3dRegions", activeDragMode: "activeDragMode", activeSurface3dMode: "activeSurface3dMode", axesVisible: "axesVisible", wireframeActive: "wireframeActive", resolutionScale: "resolutionScale", wandSensitivity: "wandSensitivity", brushSize: "brushSize", vertexEraserRadius: "vertexEraserRadius", canUndo: "canUndo", canRedo: "canRedo", stackOptions: "stackOptions", tools: "tools", imageSmoothingEnabled: "imageSmoothingEnabled", samModels: "samModels", samModelId: "samModelId", contributedTools: "contributedTools", dialogTools: "dialogTools", openDialogToolId: "openDialogToolId", toolModelIds: "toolModelIds" }, outputs: { selectPlotType: "selectPlotType", addProfileLine: "addProfileLine", toggleImageSmoothing: "toggleImageSmoothing", isoRangeChange: "isoRangeChange", openChannelHistogram: "openChannelHistogram", openSpatialControls: "openSpatialControls", openRegionEditor: "openRegionEditor", selectStackOption: "selectStackOption", zScrub: "zScrub", zSlide: "zSlide", zIndexInput: "zIndexInput", reloadAndPlot: "reloadAndPlot", downloadImage: "downloadImage", autoscaleImage: "autoscaleImage", toggleDragMode: "toggleDragMode", zoomIn: "zoomIn", zoomOut: "zoomOut", toggleSurface3dMode: "toggleSurface3dMode", resetSurfaceCamera: "resetSurfaceCamera", toggleAxes: "toggleAxes", toggleWireframe: "toggleWireframe", selectResolution: "selectResolution", deleteRegion: "deleteRegion", undoRegion: "undoRegion", redoRegion: "redoRegion", segmentRegions: "segmentRegions", segmentCellpose: "segmentCellpose", runTool: "runTool", toggleDialogTool: "toggleDialogTool", toolModelChange: "toolModelChange", openToolParams: "openToolParams", samModelChange: "samModelChange", wandSensitivityChange: "wandSensitivityChange", brushSizeChange: "brushSizeChange", vertexEraserRadiusChange: "vertexEraserRadiusChange" }, usesOnChanges: true, ngImport: i0, template: "<p-toolbar>\n  <div class=\"p-toolbar-group-start flex-wrap align-items-center gap-1\">\n\n    <!-- Host-provided custom toolbar buttons, shown first (e.g. app-specific\n         actions the visualization view itself doesn't own). -->\n    <ng-content></ng-content>\n\n    <!-- Contributed dialog tools (TOOLBAR_TOOLS, kind: 'dialog'): app-level actions\n         like the host's own buttons above, so they sit right beside them. Image view\n         only, the view their dialog draws over. Highlighted while the dialog is open. -->\n    <ng-container *ngIf=\"isImageView\">\n      <p-button *ngFor=\"let tool of dialogTools; trackBy: trackToolById\"\n                size=\"small\" [text]=\"openDialogToolId !== tool.id\"\n                [pTooltip]=\"tool.tooltip\" tooltipPosition=\"bottom\"\n                [ariaLabel]=\"tool.label\"\n                [attr.aria-pressed]=\"openDialogToolId === tool.id\"\n                (onClick)=\"toggleDialogTool.emit(tool.id)\">\n        <img *ngIf=\"tool.icon.src\" [src]=\"tool.icon.src\" style=\"width: 1rem\" [alt]=\"tool.label\"\n             [class]=\"openDialogToolId === tool.id ? 'toolbar-icon-active' : 'toolbar-icon-dark'\" />\n        <i *ngIf=\"tool.icon.pi\" class=\"pi {{ tool.icon.pi }}\"></i>\n      </p-button>\n    </ng-container>\n\n    <!-- Plot type: available for any image (grayscale or RGB). -->\n    <ng-container *ngIf=\"imageInfo && tools.specialTools\">\n      <span class=\"toolbar-separator\"></span>\n      <p-dropdown [options]=\"plotTypeOptions\" optionLabel=\"label\" optionValue=\"type\"\n                  [(ngModel)]=\"selectedPlotType\" appendTo=\"body\"\n                  pTooltip=\"Select plot type\" tooltipPosition=\"bottom\"\n                  [style]=\"{'min-width': '11rem'}\"\n                  styleClass=\"plotmode-dropdown\" panelStyleClass=\"plotmode-panel\"\n                  (onChange)=\"selectPlotType.emit($event.value)\">\n        <ng-template let-opt pTemplate=\"selectedItem\">\n          <span class=\"plotmode-item\" *ngIf=\"opt\">\n            <i *ngIf=\"isPiIcon(opt.icon)\" [class]=\"opt.icon\"></i>\n            <img *ngIf=\"opt.icon && !isPiIcon(opt.icon)\" class=\"plotmode-icon-img\" [src]=\"opt.icon\" alt=\"\" />\n            <span>{{ opt.label }}</span>\n          </span>\n        </ng-template>\n        <ng-template let-opt pTemplate=\"item\">\n          <span class=\"plotmode-item\">\n            <i *ngIf=\"isPiIcon(opt.icon)\" [class]=\"opt.icon\"></i>\n            <img *ngIf=\"opt.icon && !isPiIcon(opt.icon)\" class=\"plotmode-icon-img\" [src]=\"opt.icon\" alt=\"\" />\n            <span>{{ opt.label }}</span>\n          </span>\n        </ng-template>\n      </p-dropdown>\n      <ng-container *ngIf=\"isIsosurfaceMode\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Iso</span>\n        <p-slider [(ngModel)]=\"isoRange\" [range]=\"true\"\n                  [min]=\"isoValueMin\" [max]=\"isoValueMax\" [step]=\"isoValueStep\"\n                  (onChange)=\"isoRangeChange.emit($event.values)\"\n                  pTooltip=\"Isosurface band (0\u2013255), mapped onto the volume's\n                  actual intensity range. Surfaces are drawn for voxels whose\n                  intensity falls in the selected band \u2014 narrow it to isolate\n                  features, widen it to see the whole structure.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  styleClass=\"wand-sensitivity-slider\"></p-slider>\n        <span class=\"flex align-items-center mx-1 toolbar-text wand-sensitivity-value\">\n          {{ isoRange[0] }}\u2013{{ isoRange[1] }}</span>\n      </ng-container>\n      <!-- Intensity tools (Heatmap / Image mode): add another colored line ROI.\n           Each added line gets the next bright palette colour and its own inset\n           trace; select a line on the image and use the trash tool to remove it\n           (and its trace). The lines are Region-based but excluded from the\n           Region Editor and exports. -->\n      <ng-container *ngIf=\"isIntensityCapable\">\n        <span class=\"toolbar-separator\"></span>\n        <p-button size=\"small\" [text]=\"true\"\n                  pTooltip=\"Add an intensity line (new colour). Click a line to select it,\n                  then use the trash tool to remove it.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  (onClick)=\"addProfileLine.emit()\">\n          <img src=\"assets/plotting/spline-chart.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n        </p-button>\n      </ng-container>\n    </ng-container>\n    <!-- Channels & Histogram: brightness/contrast, gamma, per-channel display,\n         colormap/reverse/invert \u2014 opens the floating dialog. -->\n    <p-button *ngIf=\"tools.specialTools\" pRipple size=\"small\" [text]=\"true\"\n              pTooltip=\"Channels &amp; Histogram (brightness/contrast, colormap)\"\n              tooltipPosition=\"bottom\"\n              (onClick)=\"openChannelHistogram.emit()\">\n      <img src=\"assets/plotting/invert.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n    </p-button>\n\n    <!-- Spatial-omics controls. Only meaningful in the spatial mode, which is\n         itself only offered while a dataset is loaded \u2014 so this button appears\n         exactly when there is something for it to control. -->\n    <p-button *ngIf=\"tools.specialTools && isSpatialMode\" pRipple size=\"small\" [text]=\"true\"\n              pTooltip=\"Spatial omics (colour by column or gene, legend, selection, distributions)\"\n              tooltipPosition=\"bottom\"\n              (onClick)=\"openSpatialControls.emit()\">\n      <img src=\"assets/plotting/spatial-omics.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n    </p-button>\n\n    <!-- Smoothen toggle: bilinear smoothing vs nearest-neighbour raw pixels (Image\n         view only \u2014 it's an OpenSeadragon drawer setting). Highlighted when smoothing on. -->\n    <p-button *ngIf=\"tools.specialTools && isImageView\" size=\"small\"\n              [text]=\"!imageSmoothingEnabled\"\n              pTooltip=\"Smoothen (turn on image smoothing)\" tooltipPosition=\"bottom\"\n              (onClick)=\"toggleImageSmoothing.emit()\">\n      <img src=\"assets/plotting/smooth.svg\" style=\"width: 1rem\"\n           [class]=\"imageSmoothingEnabled ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"/>\n    </p-button>\n\n    <!-- Stack controls -->\n    <ng-container *ngIf=\"imageInfo?.isStack\">\n      <span class=\"toolbar-separator\"></span>\n      <!-- Image view: scrub z-slices live (the renderer swaps slices in place). -->\n      <ng-container *ngIf=\"showsLiveSliceScrubber\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Slice</span>\n        <p-slider [(ngModel)]=\"zIndex\" [min]=\"0\" [max]=\"maxIndex\"\n                  (onChange)=\"zScrub.emit($event.value)\" (onSlideEnd)=\"zSlide.emit($event.value)\"\n                  pTooltip=\"Slice through the stack (\u2190 / \u2192 keys)\" tooltipPosition=\"bottom\"\n                  [style]=\"{'width':'16rem'}\" styleClass=\"wand-sensitivity-slider\"></p-slider>\n        <span class=\"flex align-items-center mx-1 toolbar-text\">{{zIndex}} of {{maxIndex}}</span>\n      </ng-container>\n      <!-- Heatmap view: single-image (high-def zoom) vs stack (frame slider). Plotly-only \u2014\n           hidden for napari, which has no single/stack toggle or per-frame fetch, and for the\n           spatial-omics modes: a 3D omics dataset publishes its reference volume as a z-stack\n           image, and these modes draw observations, not one of its slices. -->\n      <ng-container *ngIf=\"!showsLiveSliceScrubber && !isNapariMode && !isSpatialMode\">\n      <p-button icon=\"pi pi-image\" size=\"small\"\n                [text]=\"imageInfo?.showStack\"\n                pTooltip=\"Single image mode: enables high-def zoom\" tooltipPosition=\"bottom\"\n                (onClick)=\"selectStackOption.emit(stackOptions[0])\">\n      </p-button>\n      <p-button icon=\"pi pi-images\" size=\"small\"\n                [text]=\"!imageInfo?.showStack\"\n                pTooltip=\"Stack mode, enables slicing through image frames\" tooltipPosition=\"bottom\"\n                (onClick)=\"selectStackOption.emit(stackOptions[1])\">\n      </p-button>\n      <ng-container *ngIf=\"!imageInfo?.showStack\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Slice</span>\n        <div class=\"p-inputgroup\" style=\"width: auto\">\n          <p-inputNumber styleClass=\"w-3rem toolbar-input\"\n\t\t\t\t\tpTooltip=\"View image in stack (&#x23CE;)\"\n\t\t\t\t\t[(ngModel)]=\"zIndex\" [min]=\"0\" [max]=\"maxIndex\"\n           (onInput)=\"zIndexInput.emit(zIndex)\" (keydown.enter)=\"reloadAndPlot.emit()\"/>\n          <p-button icon=\"pi pi-refresh\" size=\"small\" [text]=\"true\" (onClick)=\"reloadAndPlot.emit()\"\n                    pTooltip=\"Plot this slice\" tooltipPosition=\"bottom\">\n          </p-button>\n        </div>\n        <span class=\"flex align-items-center mx-1 toolbar-text\">of {{maxIndex}}</span>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n\n    <!-- Image actions (special tools) -->\n    <ng-container *ngIf=\"tools.specialTools\">\n      <span class=\"toolbar-separator\"></span>\n      <p-button icon=\"pi pi-download\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Download image as PNG\" tooltipPosition=\"bottom\"\n                (onClick)=\"downloadImage.emit()\">\n      </p-button>\n      <p-button *ngIf=\"isHeatmap\" icon=\"pi pi-window-maximize\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Fit to view\" tooltipPosition=\"bottom\"\n                (onClick)=\"autoscaleImage.emit()\">\n      </p-button>\n    </ng-container>\n\n    <!-- Zoom tools. Plotly rubber-band drag-zoom: on OpenSeadragon the box-zoom\n         covers this and a bare drag pans natively, so it's hidden in image view. -->\n    <ng-container *ngIf=\"isHeatmap && tools.zoomTools\">\n      <span class=\"toolbar-separator\"></span>\n      <p-button *ngIf=\"!isImageView\" icon=\"pi pi-search\" size=\"small\"\n                [text]=\"activeDragMode !== 'zoom'\"\n                pTooltip=\"Zoom drag\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('zoom')\">\n      </p-button>\n      <p-button size=\"small\"\n                [text]=\"activeDragMode !== 'zoomToBox'\"\n                pTooltip=\"Zoom box (<kbd>b</kbd>)\" [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('zoomToBox')\">\n        <img src=\"assets/plotting/zoom-box.svg\"\n             [class]=\"activeDragMode === 'zoomToBox' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n             style=\"width: 1rem\"/>\n      </p-button>\n      <p-button icon=\"pi pi-arrows-alt\" size=\"small\"\n                [text]=\"activeDragMode !== 'pan'\"\n                pTooltip=\"Pan the image (<kbd>p</kbd>)\" [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('pan')\">\n      </p-button>\n      <p-button icon=\"pi pi-search-plus\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Zoom in (<kbd>+</kbd>)\" [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"zoomIn.emit()\">\n      </p-button>\n      <p-button icon=\"pi pi-search-minus\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Zoom out (<kbd>-</kbd>)\" [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"zoomOut.emit()\">\n      </p-button>\n    </ng-container>\n\n    <!-- Surface 3D controls -->\n    <ng-container *ngIf=\"!isHeatmap\">\n      <span class=\"toolbar-separator\"></span>\n      <p-button icon=\"pi pi-search\" size=\"small\"\n                [text]=\"activeSurface3dMode !== 'zoom'\"\n                pTooltip=\"Zoom\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleSurface3dMode.emit('zoom')\">\n      </p-button>\n      <p-button icon=\"pi pi-arrows-alt\" size=\"small\"\n                [text]=\"activeSurface3dMode !== 'pan'\"\n                pTooltip=\"Pan\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleSurface3dMode.emit('pan')\">\n      </p-button>\n      <p-button icon=\"pi pi-globe\" size=\"small\"\n                [text]=\"activeSurface3dMode !== 'orbit'\"\n                pTooltip=\"Orbital rotation\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleSurface3dMode.emit('orbit')\">\n      </p-button>\n      <p-button icon=\"pi pi-sync\" size=\"small\"\n                [text]=\"activeSurface3dMode !== 'turntable'\"\n                pTooltip=\"Turntable rotation\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleSurface3dMode.emit('turntable')\">\n      </p-button>\n      <p-button icon=\"pi pi-home\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Reset camera to default\" tooltipPosition=\"bottom\"\n                (onClick)=\"resetSurfaceCamera.emit()\">\n      </p-button>\n      <!-- 3D coordinate-axes / scale gizmo toggle (napari-js WebGPU volume/isosurface only).\n           `p-button-icon-only` gives the same square sizing as the neighbouring pi-icon buttons\n           (the projected <img> doesn't trigger PrimeNG's automatic icon-only sizing). -->\n      <p-button size=\"small\" *ngIf=\"isNapariMode\" styleClass=\"p-button-icon-only\"\n                [text]=\"!axesVisible\"\n                pTooltip=\"Toggle 3D axes / scale\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleAxes.emit()\">\n        <img src=\"assets/plotting/3d-coordinates.svg\"\n             [class]=\"axesVisible ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n             style=\"width: 1rem\"/>\n      </p-button>\n      <!-- Surface wireframe toggle (napari-js WebGPU surface only). -->\n      <p-button icon=\"pi pi-share-alt\" size=\"small\" *ngIf=\"isNapariSurfaceMode\"\n                [text]=\"!wireframeActive\"\n                pTooltip=\"Toggle wireframe\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleWireframe.emit()\">\n      </p-button>\n      <!-- Resolution (decimate factor) for the napari 3D types \u2014 reloads at coarser/finer sampling. -->\n      <ng-container *ngIf=\"isNapari3dMode\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Res</span>\n        <p-dropdown [options]=\"decimateOptions\" optionLabel=\"label\" optionValue=\"value\"\n                    [ngModel]=\"resolutionScale\" appendTo=\"body\"\n                    pTooltip=\"Resolution (decimate factor)\" tooltipPosition=\"bottom\"\n                    [style]=\"{'min-width': '6rem'}\"\n                    (onChange)=\"selectResolution.emit($event.value)\">\n        </p-dropdown>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"(isHeatmap || is3dRegions) && tools.regionTools\">\n      <span class=\"toolbar-separator\"></span>\n      <!-- Region Editor: opens the editor as a floating dialog (formerly the\n           right-panel Regions tab). Sits with the region drawing tools. -->\n      <p-button size=\"small\" [text]=\"true\"\n                pTooltip=\"Open the Region Editor\" tooltipPosition=\"bottom\"\n                (onClick)=\"openRegionEditor.emit()\">\n        <img src=\"assets/plotting/region-editor.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n      </p-button>\n      <!-- Region drawing tools -->\n      <p-button icon=\"pi pi-arrow-up-right\" size=\"small\"\n                [text]=\"activeDragMode !== 'select'\"\n                pTooltip=\"Selection mode (<kbd>s</kbd>)\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('select')\">\n      </p-button>\n      <p-button icon=\"pi pi-stop\" size=\"small\"\n                [text]=\"activeDragMode !== 'drawrect'\"\n                pTooltip=\"Draw a rectangular region (<kbd>r</kbd>)\" [escape]=\"false\"\n                tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('drawrect')\">\n      </p-button>\n      <p-button *ngIf=\"!is3dRegions\" size=\"small\"\n                [text]=\"activeDragMode !== 'drawopenpath'\"\n                pTooltip=\"Draw a polyline (<kbd>l</kbd>)\" [escape]=\"false\"\n                tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('drawopenpath')\">\n        <img src=\"assets/plotting/polyline.svg\"\n             [class]=\"activeDragMode === 'drawopenpath' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n             style=\"width: 1rem\"/>\n      </p-button>\n      <p-button icon=\"pi pi-pencil\" size=\"small\"\n                [text]=\"activeDragMode !== 'drawclosedpath'\"\n                pTooltip=\"Draw a freeform region (<kbd>f</kbd>)\" [escape]=\"false\"\n                tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('drawclosedpath')\">\n      </p-button>\n      <!-- Brush: paint a region by dragging a disc of the given size; the Size\n           slider appears while it's active. Hold Shift to erase (subtract). -->\n      <!-- Brush and polyline are absent from a 3D cloud: the brush paints in IMAGE\n                 pixels and there is no raster to sample, and an open polyline is a\n                 profile tool, not a closed region a selection can test against. -->\n            <p-button *ngIf=\"!is3dRegions\" size=\"small\"\n                [text]=\"activeDragMode !== 'brush'\"\n                pTooltip=\"Brush: click and drag to paint a region.\n                <br>Hold <kbd>Shift</kbd> while painting to erase from a region.\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('brush')\">\n        <img src=\"assets/plotting/paintbrush.svg\"\n             [class]=\"activeDragMode === 'brush' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n             style=\"width: 1rem\"/>\n      </p-button>\n      <ng-container *ngIf=\"activeDragMode === 'brush'\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Size</span>\n        <p-slider [(ngModel)]=\"brushSize\"\n                  [min]=\"brushSizeMin\" [max]=\"brushSizeMax\" [step]=\"brushSizeStep\"\n                  (onChange)=\"brushSizeChange.emit($event.value)\"\n                  pTooltip=\"Brush diameter in image pixels.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  styleClass=\"wand-sensitivity-slider\"></p-slider>\n        <span class=\"flex align-items-center mx-1 toolbar-text wand-sensitivity-value\">\n          {{ brushSize }}</span>\n      </ng-container>\n\n      <!-- Vertex editing \u2014 backends with a vertex-editing overlay (OSD + napari-js image). -->\n      <ng-container *ngIf=\"supportsRegionVertexTools\">\n        <p-button size=\"small\"\n                  [text]=\"activeDragMode !== 'drawpolygon'\"\n                  pTooltip=\"Polygon: click to place each vertex; click the first point to close\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  (onClick)=\"toggleDragMode.emit('drawpolygon')\">\n          <img src=\"assets/plotting/polygon-vertices.svg\"\n               [class]=\"activeDragMode === 'drawpolygon' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n               style=\"width: 1rem\"/>\n        </p-button>\n        <p-button size=\"small\"\n                  [text]=\"activeDragMode !== 'addpoint'\"\n                  pTooltip=\"Add a vertex: click an edge of the selected polygon\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  (onClick)=\"toggleDragMode.emit('addpoint')\">\n          <img src=\"assets/plotting/vertex-add.svg\"\n               [class]=\"activeDragMode === 'addpoint' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n               style=\"width: 1rem\"/>\n        </p-button>\n        <p-button size=\"small\"\n                  [text]=\"activeDragMode !== 'deletepoint'\"\n                  pTooltip=\"Delete a vertex: click a vertex of the selected polygon\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  (onClick)=\"toggleDragMode.emit('deletepoint')\">\n          <img src=\"assets/plotting/vertex-delete.svg\"\n               [class]=\"activeDragMode === 'deletepoint' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n               style=\"width: 1rem\"/>\n        </p-button>\n      </ng-container>\n\n      <p-button size=\"small\"\n                [text]=\"activeDragMode !== 'wand'\"\n                pTooltip=\"Wand: click and drag to grow a region by similar pixel values (<kbd>w</kbd>).\n                <br>Hold <kbd>Shift</kbd> while clicking or dragging on a region to erase pixels from it.\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('wand')\">\n        <img src=\"assets/plotting/wand.svg\"\n             [class]=\"activeDragMode === 'wand' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n             style=\"width: 1rem\"/>\n      </p-button>\n      <ng-container *ngIf=\"activeDragMode === 'wand'\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Sens.</span>\n        <p-slider [(ngModel)]=\"wandSensitivity\"\n                  [min]=\"wandSensitivityMin\" [max]=\"wandSensitivityMax\" [step]=\"wandSensitivityStep\"\n                  (onChange)=\"wandSensitivityChange.emit($event.value)\"\n                  pTooltip=\"Higher = stricter (smaller selection); lower = looser.\n                  Takes effect from the next click/drag tick.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  styleClass=\"wand-sensitivity-slider\"></p-slider>\n        <span class=\"flex align-items-center mx-1 toolbar-text wand-sensitivity-value\">\n          {{ wandSensitivity.toFixed(1) }}</span>\n      </ng-container>\n      <p-button icon=\"pi pi-eraser\" size=\"small\"\n                [text]=\"activeDragMode !== 'eraseVertex'\"\n                pTooltip=\"Vertex eraser (<kbd>e</kbd>): click or drag to remove polygon vertices inside\n                the cursor circle from any region.\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('eraseVertex')\">\n      </p-button>\n      <ng-container *ngIf=\"activeDragMode === 'eraseVertex'\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Radius</span>\n        <p-slider [(ngModel)]=\"vertexEraserRadius\"\n                  [min]=\"vertexEraserRadiusMin\" [max]=\"vertexEraserRadiusMax\" [step]=\"vertexEraserRadiusStep\"\n                  (onChange)=\"vertexEraserRadiusChange.emit($event.value)\"\n                  pTooltip=\"Eraser radius in image pixels.\n                  Vertices within this distance of the cursor are removed.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  styleClass=\"wand-sensitivity-slider\"></p-slider>\n        <span class=\"flex align-items-center mx-1 toolbar-text wand-sensitivity-value\">\n          {{ vertexEraserRadius }}</span>\n      </ng-container>\n      <p-button size=\"small\" [text]=\"true\"\n                [disabled]=\"!canUndo\"\n                pTooltip=\"Undo the last region action (<kbd>Ctrl</kbd>+<kbd>Z</kbd>).\n                Up to 10 actions can be undone.\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"undoRegion.emit()\">\n        <img src=\"assets/plotting/undo.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n      </p-button>\n      <p-button size=\"small\" [text]=\"true\"\n                [disabled]=\"!canRedo\"\n                pTooltip=\"Redo the last undone region action\n                (<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd> / <kbd>Ctrl</kbd>+<kbd>Y</kbd>).\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"redoRegion.emit()\">\n        <img src=\"assets/plotting/redo.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n      </p-button>\n      <p-button icon=\"pi pi-trash\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Delete selected region (<kbd>Del</kbd>)\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"deleteRegion.emit()\">\n      </p-button>\n      <!-- SAM (jit-ui#90): box-prompt segment, interactive point prompts, and a\n           model picker. -->\n      <span class=\"toolbar-separator\"></span>\n      <!-- SAM controls grouped: box-prompt Segment, then the point-prompt tool,\n           then the model-picker dropdown (the chevron) which governs BOTH tools.\n           Falls back to Segment + point with no model picker when none are set. -->\n      <span *ngIf=\"samModels.length; else segmentPlain\" class=\"p-buttonset segment-split\">\n        <p-button size=\"small\" [text]=\"true\"\n                  pTooltip=\"Segment the drawn rectangles with SAM (box prompt)\"\n                  tooltipPosition=\"bottom\"\n                  (onClick)=\"segmentRegions.emit()\">\n          <img src=\"assets/plotting/sam-box-prompt.svg\"\n               class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n        </p-button>\n        <ng-container [ngTemplateOutlet]=\"samPointBtn\"></ng-container>\n        <p-button icon=\"pi pi-chevron-down\" size=\"small\" [text]=\"true\"\n                  pTooltip=\"Pick the SAM model (used by both segment tools)\"\n                  tooltipPosition=\"bottom\"\n                  (onClick)=\"samModelMenu.toggle($event)\">\n        </p-button>\n      </span>\n      <ng-template #segmentPlain>\n        <span class=\"p-buttonset segment-split\">\n          <p-button size=\"small\" [text]=\"true\"\n                    pTooltip=\"Segment the drawn rectangles with SAM (box prompt)\"\n                    tooltipPosition=\"bottom\"\n                    (onClick)=\"segmentRegions.emit()\">\n            <img src=\"assets/plotting/sam-box-prompt.svg\"\n                 class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n          </p-button>\n          <ng-container [ngTemplateOutlet]=\"samPointBtn\"></ng-container>\n        </span>\n      </ng-template>\n      <!-- Point-prompt tool \u2014 shared between the models / no-models layouts so it\n           always sits just left of the model dropdown. -->\n      <ng-template #samPointBtn>\n        <p-button size=\"small\"\n                  [text]=\"activeDragMode !== 'samPoint'\"\n                  pTooltip=\"SAM point prompts: click a fiber to segment it as a new region;\n                  Shift/Alt-click to refine (exclude) the current one.<br>Esc undoes it.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  (onClick)=\"toggleDragMode.emit('samPoint')\">\n          <img src=\"assets/plotting/sam-point-prompt.svg\"\n               [class]=\"activeDragMode === 'samPoint' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n               style=\"width: 1rem\"/>\n        </p-button>\n      </ng-template>\n      <p-menu #samModelMenu styleClass=\"model-menu\" [model]=\"samMenuItems\" [popup]=\"true\" appendTo=\"body\">\n        <ng-template pTemplate=\"item\" let-item>\n          <ng-container [ngTemplateOutlet]=\"modelMenuItem\"\n                        [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n      </p-menu>\n\n      <!-- Shared item body for all three model pickers (SAM / YOLO / retinal):\n           the standard check-or-blank icon and label, plus an info icon carrying\n           the model's description as a hover tooltip. This replaced a single\n           \"About the SAM models\" overlay panel \u2014 per-model text sits next to the\n           model it describes, and YOLO/retinal get the same affordance.\n\n           p-menu puts its click handler on the wrapping `.p-menuitem-content`,\n           outside this template, so `command` still fires and the whole row stays\n           clickable \u2014 which is also why the info icon has to stop propagation, or\n           reading about a model would switch to it. -->\n      <ng-template #modelMenuItem let-item>\n        <a class=\"p-menuitem-link model-menu-item\">\n          <span class=\"p-menuitem-icon\" [ngClass]=\"item.icon\"></span>\n          <span class=\"p-menuitem-text\">{{ item.label }}</span>\n          <!-- `bottom` like every other tooltip in this toolbar, and for room:\n               these menus open under buttons that can sit near the right edge,\n               where a `right` tooltip has a few hundred px and squeezes its text\n               into a narrow column instead of using its max-width. -->\n          <!-- A focusable <button>, not a bare <i>. As an <i> the description\n               was reachable only by hovering a mouse: not tabbable, no\n               accessible name, nothing for a screen reader to announce \u2014 so\n               keyboard and AT users could pick a checkpoint but never read what\n               it was. PrimeNG's tooltip shows on focus as well as hover, so\n               making it a button restores it for free.\n\n               `aria-describedby` is deliberately not used: the tooltip is\n               rendered into `body` on demand and has no stable id to point at.\n               The description is carried on `aria-label` instead, which is\n               announced whether or not the tooltip is showing. It is stripped of\n               markup first, since the copy contains `<b>`/`<br>` for the visual\n               tooltip and those would otherwise be read out literally. -->\n          <button *ngIf=\"item.tooltip\" type=\"button\"\n                  class=\"pi pi-info-circle model-info-icon\"\n                  [attr.aria-label]=\"'About ' + item.label + ': ' + plainText(item.tooltip)\"\n                  [pTooltip]=\"item.tooltip\" [escape]=\"false\" tooltipPosition=\"bottom\"\n                  appendTo=\"body\" tooltipStyleClass=\"model-info-tooltip\"\n                  (click)=\"$event.stopPropagation()\"\n                  (keydown.enter)=\"$event.stopPropagation()\"\n                  (keydown.space)=\"$event.stopPropagation()\"></button>\n        </a>\n      </ng-template>\n      <p-button size=\"small\" [text]=\"true\"\n                pTooltip=\"Auto-segment cells inside each drawn rectangle (cellpose-SAM)\"\n                tooltipPosition=\"bottom\"\n                (onClick)=\"segmentCellpose.emit()\">\n        <img src=\"assets/plotting/cells.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n      </p-button>\n\n      <!-- Contributed no-prompt tools (TOOLBAR_TOOLS). Unlike the SAM and\n           cellpose tools these take no prompt \u2014 they sweep the whole current\n           view rather than being pointed at something \u2014 so there is nothing to\n           draw first. Each renders the same split button: run, pick checkpoint,\n           open parameters.\n\n           Nothing here names a specific tool. The library ships none; a host\n           registers them, which is what lets this package be published without\n           the closed model dependencies. -->\n      <ng-container *ngFor=\"let tool of contributedTools; trackBy: trackToolById\">\n        <span class=\"p-buttonset segment-split\">\n          <p-button size=\"small\" [text]=\"true\"\n                    [pTooltip]=\"tool.runTooltip\"\n                    tooltipPosition=\"bottom\"\n                    (onClick)=\"runTool.emit(tool.id)\">\n            <!-- `toolbar-icon-dark` is hardcoded rather than bound, unlike the\n                 toggle tools: these fire a run and have no active state. -->\n            <img *ngIf=\"tool.icon.src\" [src]=\"tool.icon.src\" class=\"toolbar-icon-dark\"\n                 style=\"width: 1rem\" [alt]=\"tool.label\" />\n            <i *ngIf=\"tool.icon.pi\" class=\"pi {{ tool.icon.pi }}\"></i>\n          </p-button>\n          <p-button icon=\"pi pi-chevron-down\" size=\"small\" [text]=\"true\"\n                    [pTooltip]=\"tool.modelTooltip || 'Pick the model'\"\n                    tooltipPosition=\"bottom\"\n                    (onClick)=\"toolMenu.toggle($event)\">\n          </p-button>\n          <p-button *ngIf=\"tool.params.length\"\n                    icon=\"pi pi-sliders-h\" size=\"small\" [text]=\"true\"\n                    [pTooltip]=\"tool.paramsTooltip || 'Parameters'\"\n                    tooltipPosition=\"bottom\"\n                    (onClick)=\"openToolParams.emit(tool.id)\">\n          </p-button>\n        </span>\n        <p-menu #toolMenu styleClass=\"model-menu\" [model]=\"toolMenuItems[tool.id] || []\"\n                [popup]=\"true\" appendTo=\"body\">\n          <ng-template pTemplate=\"item\" let-item>\n            <ng-container [ngTemplateOutlet]=\"modelMenuItem\"\n                          [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n          </ng-template>\n        </p-menu>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"tools.help\">\n      <span class=\"toolbar-separator\"></span>\n\n      <!-- Help -->\n      <p-button icon=\"pi pi-question-circle\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Help\" tooltipPosition=\"bottom\"\n                (onClick)=\"showHelp()\">\n      </p-button>\n    </ng-container>\n\n  </div>\n</p-toolbar>\n<p-dialog header=\"Plotting help\" [(visible)]=\"displayHelpDialog\" [modal]=\"true\" [style]=\"{width: '50vw'}\"\n          [maximizable]=\"true\" [draggable]=\"false\" [resizable]=\"false\">\n  <p>Click a file in the left-hand tree to display it. By default it opens in the\n    <b>Image</b> view \u2014 a natively tiled, deeply zoomable raster (OpenSeadragon) with a\n    navigator minimap and a physical-units scale bar. <b>Click the image to zoom</b> toward\n    the clicked point; scroll to zoom and drag to pan. When a stack is open, a slice slider\n    (Image view) or image-mode toggle (other views) appears. Regions can also be edited in the\n    <b>Region Editor</b>, opened with the\n    <img src=\"assets/plotting/region-editor.svg\" width=\"14\" height=\"14\" alt=\"Region Editor\"/>\n    toolbar button as a floating dialog. Drag the <i class=\"pi pi-bars\"></i> handle to detach\n    this toolbar into a floating window.\n  </p>\n\n  <h3>Plot-type dropdown</h3>\n  <p>\n    The <b>plot-type dropdown</b> switches how the file is visualized:\n    <b>Image</b>, <b>Heatmap</b>, <b>Contour</b>, <b>Surface</b>, <b>Volume</b>,\n    <b>Isosurface</b>, and \u2014 when a spatial-omics dataset is open \u2014\n    <b>Spatial omics</b> and <b>Spatial omics 3D</b>.\n  </p>\n  <p>\n    <b>Only the modes the data can actually support are offered</b>, so the list changes\n    with what is loaded rather than showing entries that would come up blank:\n  </p>\n  <ul>\n    <li><b>Contour</b>, <b>Volume</b> and <b>Isosurface</b> need a grayscale image; the\n      two 3D ones also need a z-stack.</li>\n    <li><b>Spatial omics</b> needs a published dataset, and <b>Spatial omics 3D</b> needs\n      one whose coordinates carry a z.</li>\n    <li>The pixel modes (<b>Image</b>, <b>Heatmap</b>, <b>Surface</b>) are withheld for a\n      dataset that brings no tissue image \u2014 seqFISH records coordinates and no section, so\n      there is nothing for them to draw.</li>\n  </ul>\n  <ul>\n    <li>\"<b>Isosurface band</b>\" slider (Isosurface): sets the intensity band the surfaces are\n      drawn for, mapped onto the volume's real intensity range.</li>\n    <li>\"<b>3D camera</b>\" (Surface / Scatter 3D / Isosurface): zoom <i class=\"pi pi-search\"></i>,\n      pan <i class=\"pi pi-arrows-alt\"></i>, orbit <i class=\"pi pi-globe\"></i>,\n      turntable <i class=\"pi pi-sync\"></i>, and reset camera <i class=\"pi pi-home\"></i>;\n      scroll to zoom the 3D scene.</li>\n  </ul>\n\n  <h3>Image manipulation tools</h3>\n  <ul>\n    <li>\"<b>Region Editor</b>\" <img src=\"assets/plotting/region-editor.svg\" width=\"15\" height=\"15\">:\n      opens the Region Editor as a floating, draggable dialog \u2014 a per-image table of every region\n      (class, colour, area) with bulk select/label/colour/delete and GeoJSON import/export. It stays\n      in sync with the image, so you can keep it open while drawing.</li>\n    <li>\"<b>Intensity profile lines</b>\" <img src=\"assets/plotting/spline-chart.svg\" width=\"15\" height=\"15\">\n      (<i>work in progress \u2014 not yet stable</i>): adds a coloured line ROI; a floating inset\n      chart plots intensity along each line, updates live as you drag it, and re-samples at the\n      current zoom resolution. Each added line gets its own colour; select a line and use the\n      trash tool <i class=\"pi pi-trash\"></i> to remove it (and its trace).</li>\n    <li>\"<b>Channels &amp; Histogram</b>\" <img src=\"assets/plotting/invert.svg\" width=\"15\" height=\"15\">:\n      opens a floating dialog for brightness/contrast, gamma, and per-channel display, plus the\n      <b>colormap / LUT</b> controls (grayscale only) \u2014 a <b>reverse</b> toggle and a colormap\n      dropdown (default: inverted greys).</li>\n    <li>\"<b>Smoothen</b>\" <img src=\"assets/plotting/smooth.svg\" width=\"15\" height=\"15\">\n      (Image view only): the image opens showing <b>raw pixels</b> (nearest-neighbour), so\n      zooming in renders crisp blocks for pixel inspection. Toggle this on for bilinear\n      smoothing; the icon turns white while smoothing is active.</li>\n  </ul>\n\n  <h3>Download &amp; view tools</h3>\n  <ul>\n    <li>\"<b>Download</b>\" <i class=\"pi pi-download\"></i>: download the current image as a PNG.</li>\n    <li>\"<b>Fit to view</b>\" / autoscale <i class=\"pi pi-window-maximize\"></i>: resets the image\n      to its original dimensions. In stack mode it also resets to single-image mode.</li>\n  </ul>\n\n  <h3>Zoom tools</h3>\n  <ul>\n    <li>\"<b>Zoom box</b>\" <img src=\"assets/plotting/zoom-box.svg\" width=\"15\" height=\"15\">\n      (<kbd>b</kbd>): drag a box to select an area to zoom into.</li>\n    <li>\"<b>Pan</b>\" <i class=\"pi pi-arrows-alt\"></i> (<kbd>p</kbd>): drag to pan the image.</li>\n    <li>\"<b>Zoom in</b>\" <i class=\"pi pi-search-plus\"></i> (<kbd>+</kbd>): zoom in one step.</li>\n    <li>\"<b>Zoom out</b>\" <i class=\"pi pi-search-minus\"></i> (<kbd>-</kbd>): zoom out one step,\n      stopping at the original image dimensions.</li>\n  </ul>\n\n  <h3>Region tools</h3>\n  <p>By default no tool is selected (all greyed-out); selecting a tool highlights it. The\n    vertex-editing tools (polygon, add/delete vertex, move, B\u00E9zier conversions) are available\n    in the <b>Image</b> view only. On a <b>donut</b> (a region with a hole), the inner-ring\n    vertices are editable too \u2014 drag, add, and delete them just like the outer ring.</p>\n  <ul>\n    <li>\"<b>Selection</b>\" <i class=\"pi pi-arrow-up-right\"></i> (<kbd>s</kbd>): a neutral mode\n      that turns off whatever drawing tool was active (wand, vertex eraser, rectangle, etc.).\n      Use it to step out of editing without picking another tool.</li>\n    <li>\"<b>Rectangular region</b>\" <i class=\"pi pi-stop\"></i> (<kbd>r</kbd>): click and drag to\n      create a rectangular region.</li>\n    <li>\"<b>Polyline</b>\" <img src=\"assets/plotting/polyline.svg\" width=\"14\" height=\"14\">\n      (<kbd>l</kbd>): draw an open (non-closed) polyline by clicking and dragging. Polylines can\n      be edited and exported to GeoJSON as a <code>LineString</code> feature.</li>\n    <li>\"<b>Freeform region</b>\" <i class=\"pi pi-pencil\"></i> (<kbd>f</kbd>): click and drag to\n      draw a closed freeform polygon.</li>\n    <li>\"<b>Brush</b>\" <img src=\"assets/plotting/paintbrush.svg\" width=\"15\" height=\"15\">: click\n      and drag to paint a region with a circular brush \u2014 the painted stroke is the region.\n      A <b>Size</b> slider (brush diameter, in image pixels) appears in the toolbar while the\n      brush is active. Hold <kbd>Shift</kbd> while painting to <b>erase</b> (subtract) from a\n      region instead. Painting over an existing region extends it; brushing across two regions\n      merges them. Painting a closed ring (or shift-erasing an interior pocket) leaves the\n      enclosed area empty \u2014 a <b>donut</b> (Image view).</li>\n    <li>\"<b>Polygon</b>\" <img src=\"assets/plotting/polygon-vertices.svg\" width=\"15\" height=\"15\">:\n      click to place each vertex; click the first point to close the polygon.</li>\n    <li>\"<b>Add vertex</b>\" <img src=\"assets/plotting/vertex-add.svg\" width=\"15\" height=\"15\">:\n      click an edge of the selected polygon to insert a new vertex.</li>\n    <li>\"<b>Delete vertex</b>\" <img src=\"assets/plotting/vertex-delete.svg\" width=\"15\" height=\"15\">:\n      click a vertex of the selected polygon to remove it.</li>\n    <li>\"<b>Move region</b>\" <img src=\"assets/plotting/region-move.svg\" width=\"15\" height=\"15\">:\n      drag to move the selected region.</li>\n    <li>\"<b>To B\u00E9zier</b>\" <img src=\"assets/plotting/to-bezier.svg\" width=\"15\" height=\"15\"> /\n      \"<b>To polygon</b>\" <img src=\"assets/plotting/to-polygon.svg\" width=\"15\" height=\"15\">:\n      convert the selected region to a smooth B\u00E9zier curve, or back to a straight-edged polygon.</li>\n    <li>\"<b>Wand</b>\" <img src=\"assets/plotting/wand.svg\" width=\"15\" height=\"15\"> (<kbd>w</kbd>):\n      click to grow a region from pixels with similar values around the click point. Hold\n      <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> for an exact-match flood fill; drag to keep extending the\n      selection while moving; hold <kbd>Shift</kbd> while clicking or dragging on an existing\n      region to <b>erase</b> pixels from it. Use the <b>Sens.</b> slider that appears to make the\n      wand stricter (higher = smaller selection) or looser. Subsequent clicks keep extending the\n      same region; clicking inside an existing region adopts it, and growing into another region\n      merges them.</li>\n    <li>\"<b>Vertex eraser</b>\" <i class=\"pi pi-eraser\"></i> (<kbd>e</kbd>): click or click-and-drag\n      to remove polygon vertices that fall inside the cursor circle from any region, including a\n      region's inner rings (donut holes). Use the <b>Radius</b> slider to set the eraser size in\n      image pixels. Polygons reduced below 3 vertices (or polylines below 2) are deleted entirely;\n      a hole reduced below 3 vertices is removed.</li>\n    <li>\"<b>Undo</b>\" <img src=\"assets/plotting/undo.svg\" width=\"15\" height=\"15\">\n      (<kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Z</kbd>): reverts the\n      last region action (draw, delete, edit, wand/brush stroke, segmentation, \u2026). Up to the last\n      <b>10</b> actions can be undone; the button greys out when there's nothing left to undo.</li>\n    <li>\"<b>Redo</b>\" <img src=\"assets/plotting/redo.svg\" width=\"15\" height=\"15\">\n      (<kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd> or <kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Y</kbd>):\n      re-applies the most recently undone action. Performing a new region action clears what can be redone.</li>\n    <li>\"<b>Delete region</b>\" <i class=\"pi pi-trash\"></i> (<kbd>Del</kbd>): deletes the selected\n      region. This can also be done from the Region Editor.</li>\n  </ul>\n\n  <h3>Region actions (right-click the image)</h3>\n  <p>Right-click a region \u2014 or the current multi-selection \u2014 to open the\n    \"<b>Selected region(s)</b>\" group at the top of the context menu. These act immediately on\n    the selection (they're not drawing modes) and are fully undo/redo-able:</p>\n  <ul>\n    <li>\"<b>Select all regions</b>\" <i class=\"pi pi-check-square\"></i>: select every region on\n      the image (also in the Region Editor toolbar).</li>\n    <li>\"<b>Merge / group</b>\": combine 2+ selected regions into one. If the pieces don't touch,\n      the result is a single multi-part region (sparse \"bits\").</li>\n    <li>\"<b>Ungroup</b>\": split a multi-part region back into one region per piece.</li>\n    <li>\"<b>Inverse</b>\": replace the selection with everything <i>outside</i> it \u2014 the image\n      rectangle with the selected regions punched out as holes. Works at any image size.</li>\n    <li>\"<b>Simplify</b>\": reduce a region's vertex count (Douglas\u2013Peucker) by an altitude\n      threshold in pixels \u2014 pick <b>Light</b> (1&nbsp;px), <b>Medium</b> (3&nbsp;px),\n      <b>Strong</b> (8&nbsp;px), or <b>Custom\u2026</b> for a slider. Applies to the exterior and any\n      holes (and every part of a multi-part region).</li>\n    <li>The B\u00E9zier conversions and Delete also live in this group (the right-click equivalents of\n      the toolbar / vertex tools above).</li>\n  </ul>\n\n  <h3>Segmentation &amp; detection tools</h3>\n  <p>AI-assisted segmentation and detection that run entirely in the browser. The first run\n    of any model downloads it (a progress toast is shown); it's then cached.</p>\n  <p>Two shapes of tool: the <b>prompted</b> ones (Segment, Point prompts, Cellpose) act on\n    rectangles you draw, and generated regions inherit the color of the rectangle they came\n    from<span *ngIf=\"contributedTools.length\">; the <b>no-prompt</b> ones ({{ contributedToolNames }})\n    sweep the whole current view, so there is nothing to draw first</span>.</p>\n  <p>Each model dropdown <i class=\"pi pi-chevron-down\"></i> lists the available checkpoints with\n    a <i class=\"pi pi-info-circle\"></i> beside each one \u2014 hover it for that model's size, speed,\n    training domain and accuracy, so you can pick without leaving the toolbar.</p>\n  <ul>\n    <li>\"<b>Segment</b>\" <img src=\"assets/plotting/sam-box-prompt.svg\" width=\"15\" height=\"15\">\n      (box prompt): draw one or more <b>Rectangular regions</b> around the objects of interest,\n      then click Segment. Each rectangle is replaced by the SAM mask of the object inside it.</li>\n    <li>\"<b>Point prompts</b>\" <img src=\"assets/plotting/sam-point-prompt.svg\" width=\"15\" height=\"15\">: click directly on an object to\n      segment it as a <b>new</b> region. Each click starts a fresh object \u2014 clicking another\n      object won't grow the previous one. <kbd>Shift</kbd>/<kbd>Alt</kbd>-click adds an\n      <i>exclude</i> point that refines the current object; <kbd>Esc</kbd> undoes it,\n      <kbd>Enter</kbd> commits it.</li>\n    <li>\"<b>Model picker</b>\" <i class=\"pi pi-chevron-down\"></i>: the dropdown attached to the\n      Segment button chooses the SAM model \u2014 <b>micro-sam ViT-T</b> (default; small, fast) or\n      <b>micro-sam ViT-B</b> (larger, highest accuracy) for light microscopy, or\n      <b>patho-sam ViT-B</b> for histopathology (H&amp;E / stained tissue). All are promptable\n      Segment Anything models finetuned for biomedical images; they differ in the <i>image\n      encoder</i> (the heavy once-per-image step) and the training domain \u2014 box and point\n      prompting behave the same. The choice applies to <i>both</i> the box and point tools, and\n      each tool loads its own encoder, so the first click after switching re-encodes once.</li>\n    <li>\"<b>Cellpose</b>\" <img src=\"assets/plotting/cells.svg\" width=\"15\" height=\"15\">: draw rectangles, then click Cellpose to\n      automatically segment every cell inside each rectangle (client-side cellpose-SAM) \u2014 one\n      region per detected cell. No clicking on individual cells needed.</li>\n    <!-- Contributed tools describe themselves. This library ships none, so an\n         open build's help lists only the prompted tools above \u2014 the text no\n         longer promises buttons that are not there. -->\n    <ng-container *ngFor=\"let tool of contributedTools\">\n      <li *ngIf=\"tool.help\" [innerHTML]=\"tool.help.body\"></li>\n    </ng-container>\n    <ng-container *ngFor=\"let tool of dialogTools\">\n      <li *ngIf=\"tool.help\" [innerHTML]=\"tool.help.body\"></li>\n    </ng-container>\n  </ul>\n\n  <h3>Spatial omics</h3>\n  <p>\n    In <b>Spatial omics</b> mode each observation \u2014 a cell or a Visium spot \u2014 is drawn at\n    its own coordinates, over the tissue image where the dataset registers onto one. The\n    <img src=\"assets/plotting/spatial-omics.svg\" width=\"14\" height=\"14\" alt=\"Spatial omics\"/>\n    panel colours them by a <b>column</b> (a cell type, a cluster) or by a <b>gene</b>, and\n    the two are exclusive so what drives the colours is never ambiguous.\n  </p>\n  <ul>\n    <li>\"<b>Select from ROIs</b>\": turns the regions you have drawn into a selection of\n      observations. Everything else then follows that selection.</li>\n    <li>\"<b>Point size</b>\" / \"<b>Opacity</b>\": how the markers are drawn, not what is\n      selected.</li>\n  </ul>\n\n  <h3>Distribution charts</h3>\n  <p>\n    The <b>Distribution</b> section of the spatial-omics panel charts whatever the map is\n    coloured by, so the two can never disagree. Each tab answers a different question, and\n    the <i class=\"pi pi-question-circle\"></i> beside them explains the one on screen \u2014\n    including what it must <em>not</em> be read for.\n  </p>\n  <ul>\n    <li>\"<b>Counts</b>\": how many observations per category. A category is a label, not a\n      magnitude, so a frequency is the only distribution it has.</li>\n    <li>\"<b>Histogram</b>\" / \"<b>Violin</b>\" / \"<b>Box</b>\": how a continuous value is\n      distributed \u2014 over everything, or split by a grouping column.</li>\n    <li>\"<b>Heatmap</b>\": mean expression of the genes you pick within each group.\n      Z-scored per gene by default, so a colour means \"above or below this gene's own\n      average\" rather than \"highly expressed\".</li>\n    <li>\"<b>Embedding</b>\": a UMAP, PCA or t-SNE over the same cells. <b>Lasso it to\n      select on the map</b> \u2014 both views read the same selection. Only PCA labels its axes\n      with a percentage, because only its axes explain a measurable share of the variance;\n      UMAP and t-SNE coordinates are arbitrary, so distance between distant clusters\n      should not be read.</li>\n    <li>\"<b>Detach</b>\": moves the charts into their own window so they can sit beside the\n      map instead of inside the panel. Switching tabs keeps the window where it is.</li>\n  </ul>\n\n  <h3>Help</h3>\n  <p>\"<b>Help</b>\" <i class=\"pi pi-question-circle\"></i>: opens this dialog.</p>\n\n  <h3>Keyboard shortcuts</h3>\n  <table class=\"shortcuts-table\">\n    <tr><td><kbd>+</kbd> / <kbd>=</kbd></td><td>Zoom in</td></tr>\n    <tr><td><kbd>-</kbd></td><td>Zoom out</td></tr>\n    <tr><td><kbd>b</kbd></td><td>Toggle zoom box mode</td></tr>\n    <tr><td><kbd>p</kbd></td><td>Toggle pan mode</td></tr>\n    <tr><td><kbd>f</kbd></td><td>Toggle freeform region drawing</td></tr>\n    <tr><td><kbd>l</kbd></td><td>Toggle polyline drawing</td></tr>\n    <tr><td><kbd>r</kbd></td><td>Toggle rectangular region drawing</td></tr>\n    <tr><td><kbd>w</kbd></td><td>Toggle wand tool</td></tr>\n    <tr><td>Wand + <kbd>Shift</kbd></td><td>Erase pixels from the active region</td></tr>\n    <tr><td>Wand + <kbd>Ctrl</kbd>/<kbd>Cmd</kbd></td><td>Exact-match flood fill (no smoothing)</td></tr>\n    <tr><td><kbd>e</kbd></td><td>Toggle vertex eraser</td></tr>\n    <tr><td><kbd>s</kbd></td><td>Selection mode (deactivates drawing tools)</td></tr>\n    <tr><td>Point prompt + <kbd>Shift</kbd>/<kbd>Alt</kbd></td><td>Add an exclude point (refine the current object)</td></tr>\n    <tr><td><kbd>Enter</kbd></td><td>Commit the current SAM point object</td></tr>\n    <tr><td><kbd>Esc</kbd></td><td>Undo the current SAM point object</td></tr>\n    <tr><td><kbd>Del</kbd> / <kbd>\u232B</kbd></td><td>Delete selected region</td></tr>\n    <tr><td><kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Z</kbd></td><td>Undo the last region action (up to 10)</td></tr>\n    <tr><td><kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd> / <kbd>Ctrl</kbd>+<kbd>Y</kbd></td><td>Redo the last undone region action</td></tr>\n  </table>\n\n  <ng-template pTemplate=\"footer\">\n    <p-button icon=\"pi pi-check\" (click)=\"displayHelpDialog=false\" label=\"Ok\" styleClass=\"p-button-text\">\n    </p-button>\n  </ng-template>\n</p-dialog>\n", styles: [":host{display:block}:host ::ng-deep .p-toolbar{padding:.25rem .5rem}.toolbar-text{color:var(--primary-color);font-size:.875rem}::ng-deep .toolbar-input .p-inputtext{color:var(--primary-color);border-color:var(--primary-color)}.toolbar-separator{border-left:1px solid var(--surface-border);height:1.5rem;margin:0 .25rem;align-self:center}.toolbar-icon-dark{filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}.toolbar-icon-active{filter:brightness(0) invert(1)}::ng-deep .plotmode-item{display:inline-flex;align-items:center;gap:.5rem;color:#000}::ng-deep .plotmode-item i{font-size:1rem;color:var(--primary-color)}::ng-deep .plotmode-item .plotmode-icon-img{width:1.1rem;height:1.1rem;object-fit:contain;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .p-menu.model-menu{width:auto;min-width:12.5rem}::ng-deep .model-menu-item{display:flex;align-items:center;gap:.5rem}::ng-deep .model-menu-item .p-menuitem-text{flex:1 1 auto;white-space:nowrap}::ng-deep .model-menu-item .model-info-icon{flex:0 0 auto;font-size:.875rem;opacity:.55;cursor:help;appearance:none;background:none;border:0;padding:0;margin:0;color:inherit;line-height:1}::ng-deep .model-menu-item .model-info-icon:hover{opacity:1}::ng-deep .model-menu-item .model-info-icon:focus-visible{opacity:1;outline:2px solid var(--primary-color, #2196f3);outline-offset:2px;border-radius:2px}::ng-deep .model-info-tooltip .p-tooltip-text{min-width:18rem;max-width:24rem;line-height:1.4}::ng-deep .wand-sensitivity-slider{width:8rem;align-self:center;margin:0 .25rem}.wand-sensitivity-value{min-width:2rem;text-align:right}span.colormap{width:50px;height:auto;display:inline-block}img.colormap{width:50px;height:auto}.colormap{background:no-repeat;background-size:100%;vertical-align:middle}kbd{background:#e8e8e8;border:1px solid #bbb;border-radius:3px;padding:1px 5px;font-family:monospace;font-size:.85em}.shortcuts-table{border-collapse:collapse}.shortcuts-table td{padding:.25rem .75rem .25rem 0;vertical-align:middle}.shortcuts-table td:first-child{white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "component", type: i3.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { 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: "component", type: i6.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "directive", type: i6$1.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: i7.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "autoShowPanelOnPrintableCharacterKeyDown", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { 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: i10.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { 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: "directive", type: i12.Ripple, selector: "[pRipple]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ToolbarComponent, selector: "plotting-toolbar", inputs: { imageInfo: "imageInfo", hasSpatialDataset: "hasSpatialDataset", plotTypeOptions: "plotTypeOptions", selectedPlotType: "selectedPlotType", basePlotType: "basePlotType", isoRange: "isoRange", maxIndex: "maxIndex", zIndex: "zIndex", isHeatmap: "isHeatmap", is3dRegions: "is3dRegions", activeDragMode: "activeDragMode", activeSurface3dMode: "activeSurface3dMode", axesVisible: "axesVisible", wireframeActive: "wireframeActive", resolutionScale: "resolutionScale", wandSensitivity: "wandSensitivity", brushSize: "brushSize", vertexEraserRadius: "vertexEraserRadius", canUndo: "canUndo", canRedo: "canRedo", stackOptions: "stackOptions", tools: "tools", imageSmoothingEnabled: "imageSmoothingEnabled", samModels: "samModels", samModelId: "samModelId", contributedTools: "contributedTools", dialogTools: "dialogTools", openDialogToolId: "openDialogToolId", toolModelIds: "toolModelIds" }, outputs: { selectPlotType: "selectPlotType", addProfileLine: "addProfileLine", toggleImageSmoothing: "toggleImageSmoothing", isoRangeChange: "isoRangeChange", openChannelHistogram: "openChannelHistogram", openSpatialControls: "openSpatialControls", openRegionEditor: "openRegionEditor", selectStackOption: "selectStackOption", zScrub: "zScrub", zSlide: "zSlide", zIndexInput: "zIndexInput", reloadAndPlot: "reloadAndPlot", downloadImage: "downloadImage", autoscaleImage: "autoscaleImage", toggleDragMode: "toggleDragMode", zoomIn: "zoomIn", zoomOut: "zoomOut", toggleSurface3dMode: "toggleSurface3dMode", resetSurfaceCamera: "resetSurfaceCamera", toggleAxes: "toggleAxes", toggleWireframe: "toggleWireframe", selectResolution: "selectResolution", deleteRegion: "deleteRegion", undoRegion: "undoRegion", redoRegion: "redoRegion", segmentRegions: "segmentRegions", segmentCellpose: "segmentCellpose", runTool: "runTool", toggleDialogTool: "toggleDialogTool", toolModelChange: "toolModelChange", openToolParams: "openToolParams", samModelChange: "samModelChange", wandSensitivityChange: "wandSensitivityChange", brushSizeChange: "brushSizeChange", vertexEraserRadiusChange: "vertexEraserRadiusChange" }, usesOnChanges: true, ngImport: i0, template: "<p-toolbar>\n  <div class=\"p-toolbar-group-start flex-wrap align-items-center gap-1\">\n\n    <!-- Host-provided custom toolbar buttons, shown first (e.g. app-specific\n         actions the visualization view itself doesn't own). -->\n    <ng-content></ng-content>\n\n    <!-- Contributed dialog tools (TOOLBAR_TOOLS, kind: 'dialog'): app-level actions\n         like the host's own buttons above, so they sit right beside them. Image view\n         only, the view their dialog draws over. Highlighted while the dialog is open. -->\n    <ng-container *ngIf=\"isImageView\">\n      <p-button *ngFor=\"let tool of dialogTools; trackBy: trackToolById\"\n                size=\"small\" [text]=\"openDialogToolId !== tool.id\"\n                [pTooltip]=\"tool.tooltip\" tooltipPosition=\"bottom\"\n                [ariaLabel]=\"tool.label\"\n                [attr.aria-pressed]=\"openDialogToolId === tool.id\"\n                (onClick)=\"toggleDialogTool.emit(tool.id)\">\n        <img *ngIf=\"tool.icon.src\" [src]=\"tool.icon.src\" style=\"width: 1rem\" [alt]=\"tool.label\"\n             [class]=\"openDialogToolId === tool.id ? 'toolbar-icon-active' : 'toolbar-icon-dark'\" />\n        <i *ngIf=\"tool.icon.pi\" class=\"pi {{ tool.icon.pi }}\"></i>\n      </p-button>\n    </ng-container>\n\n    <!-- Plot type: available for any image (grayscale or RGB), and for a spatial dataset\n         that brings none (its spatial modes are still a choice). -->\n    <ng-container *ngIf=\"showPlotTypes\">\n      <span class=\"toolbar-separator\"></span>\n      <p-dropdown [options]=\"plotTypeOptions\" optionLabel=\"label\" optionValue=\"type\"\n                  [(ngModel)]=\"selectedPlotType\" appendTo=\"body\"\n                  pTooltip=\"Select plot type\" tooltipPosition=\"bottom\"\n                  [style]=\"{'min-width': '11rem'}\"\n                  styleClass=\"plotmode-dropdown\" panelStyleClass=\"plotmode-panel\"\n                  (onChange)=\"selectPlotType.emit($event.value)\">\n        <ng-template let-opt pTemplate=\"selectedItem\">\n          <span class=\"plotmode-item\" *ngIf=\"opt\">\n            <i *ngIf=\"isPiIcon(opt.icon)\" [class]=\"opt.icon\"></i>\n            <img *ngIf=\"opt.icon && !isPiIcon(opt.icon)\" class=\"plotmode-icon-img\" [src]=\"opt.icon\" alt=\"\" />\n            <span>{{ opt.label }}</span>\n          </span>\n        </ng-template>\n        <ng-template let-opt pTemplate=\"item\">\n          <span class=\"plotmode-item\">\n            <i *ngIf=\"isPiIcon(opt.icon)\" [class]=\"opt.icon\"></i>\n            <img *ngIf=\"opt.icon && !isPiIcon(opt.icon)\" class=\"plotmode-icon-img\" [src]=\"opt.icon\" alt=\"\" />\n            <span>{{ opt.label }}</span>\n          </span>\n        </ng-template>\n      </p-dropdown>\n      <ng-container *ngIf=\"isIsosurfaceMode\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Iso</span>\n        <p-slider [(ngModel)]=\"isoRange\" [range]=\"true\"\n                  [min]=\"isoValueMin\" [max]=\"isoValueMax\" [step]=\"isoValueStep\"\n                  (onChange)=\"isoRangeChange.emit($event.values)\"\n                  pTooltip=\"Isosurface band (0\u2013255), mapped onto the volume's\n                  actual intensity range. Surfaces are drawn for voxels whose\n                  intensity falls in the selected band \u2014 narrow it to isolate\n                  features, widen it to see the whole structure.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  styleClass=\"wand-sensitivity-slider\"></p-slider>\n        <span class=\"flex align-items-center mx-1 toolbar-text wand-sensitivity-value\">\n          {{ isoRange[0] }}\u2013{{ isoRange[1] }}</span>\n      </ng-container>\n      <!-- Intensity tools (Heatmap / Image mode): add another colored line ROI.\n           Each added line gets the next bright palette colour and its own inset\n           trace; select a line on the image and use the trash tool to remove it\n           (and its trace). The lines are Region-based but excluded from the\n           Region Editor and exports. -->\n      <ng-container *ngIf=\"isIntensityCapable\">\n        <span class=\"toolbar-separator\"></span>\n        <p-button size=\"small\" [text]=\"true\"\n                  pTooltip=\"Add an intensity line (new colour). Click a line to select it,\n                  then use the trash tool to remove it.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  (onClick)=\"addProfileLine.emit()\">\n          <img src=\"assets/plotting/spline-chart.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n        </p-button>\n      </ng-container>\n    </ng-container>\n    <!-- Channels & Histogram: brightness/contrast, gamma, per-channel display,\n         colormap/reverse/invert \u2014 opens the floating dialog. -->\n    <p-button *ngIf=\"tools.specialTools\" pRipple size=\"small\" [text]=\"true\"\n              pTooltip=\"Channels &amp; Histogram (brightness/contrast, colormap)\"\n              tooltipPosition=\"bottom\"\n              (onClick)=\"openChannelHistogram.emit()\">\n      <img src=\"assets/plotting/invert.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n    </p-button>\n\n    <!-- Spatial-omics controls. Only meaningful in the spatial mode, which is\n         itself only offered while a dataset is loaded \u2014 so this button appears\n         exactly when there is something for it to control. -->\n    <p-button *ngIf=\"tools.specialTools && isSpatialMode\" pRipple size=\"small\" [text]=\"true\"\n              pTooltip=\"Spatial omics (colour by column or gene, legend, selection, distributions)\"\n              tooltipPosition=\"bottom\"\n              (onClick)=\"openSpatialControls.emit()\">\n      <img src=\"assets/plotting/spatial-omics.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n    </p-button>\n\n    <!-- Smoothen toggle: bilinear smoothing vs nearest-neighbour raw pixels (Image\n         view only \u2014 it's an OpenSeadragon drawer setting). Highlighted when smoothing on. -->\n    <p-button *ngIf=\"tools.specialTools && isImageView\" size=\"small\"\n              [text]=\"!imageSmoothingEnabled\"\n              pTooltip=\"Smoothen (turn on image smoothing)\" tooltipPosition=\"bottom\"\n              (onClick)=\"toggleImageSmoothing.emit()\">\n      <img src=\"assets/plotting/smooth.svg\" style=\"width: 1rem\"\n           [class]=\"imageSmoothingEnabled ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"/>\n    </p-button>\n\n    <!-- Stack controls -->\n    <ng-container *ngIf=\"imageInfo?.isStack\">\n      <span class=\"toolbar-separator\"></span>\n      <!-- Image view: scrub z-slices live (the renderer swaps slices in place). -->\n      <ng-container *ngIf=\"showsLiveSliceScrubber\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Slice</span>\n        <p-slider [(ngModel)]=\"zIndex\" [min]=\"0\" [max]=\"maxIndex\"\n                  (onChange)=\"zScrub.emit($event.value)\" (onSlideEnd)=\"zSlide.emit($event.value)\"\n                  pTooltip=\"Slice through the stack (\u2190 / \u2192 keys)\" tooltipPosition=\"bottom\"\n                  [style]=\"{'width':'16rem'}\" styleClass=\"wand-sensitivity-slider\"></p-slider>\n        <span class=\"flex align-items-center mx-1 toolbar-text\">{{zIndex}} of {{maxIndex}}</span>\n      </ng-container>\n      <!-- Heatmap view: single-image (high-def zoom) vs stack (frame slider). Plotly-only \u2014\n           hidden for napari, which has no single/stack toggle or per-frame fetch, and for the\n           spatial-omics modes: a 3D omics dataset publishes its reference volume as a z-stack\n           image, and these modes draw observations, not one of its slices. -->\n      <ng-container *ngIf=\"!showsLiveSliceScrubber && !isNapariMode && !isSpatialMode\">\n      <p-button icon=\"pi pi-image\" size=\"small\"\n                [text]=\"imageInfo?.showStack\"\n                pTooltip=\"Single image mode: enables high-def zoom\" tooltipPosition=\"bottom\"\n                (onClick)=\"selectStackOption.emit(stackOptions[0])\">\n      </p-button>\n      <p-button icon=\"pi pi-images\" size=\"small\"\n                [text]=\"!imageInfo?.showStack\"\n                pTooltip=\"Stack mode, enables slicing through image frames\" tooltipPosition=\"bottom\"\n                (onClick)=\"selectStackOption.emit(stackOptions[1])\">\n      </p-button>\n      <ng-container *ngIf=\"!imageInfo?.showStack\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Slice</span>\n        <div class=\"p-inputgroup\" style=\"width: auto\">\n          <p-inputNumber styleClass=\"w-3rem toolbar-input\"\n\t\t\t\t\tpTooltip=\"View image in stack (&#x23CE;)\"\n\t\t\t\t\t[(ngModel)]=\"zIndex\" [min]=\"0\" [max]=\"maxIndex\"\n           (onInput)=\"zIndexInput.emit(zIndex)\" (keydown.enter)=\"reloadAndPlot.emit()\"/>\n          <p-button icon=\"pi pi-refresh\" size=\"small\" [text]=\"true\" (onClick)=\"reloadAndPlot.emit()\"\n                    pTooltip=\"Plot this slice\" tooltipPosition=\"bottom\">\n          </p-button>\n        </div>\n        <span class=\"flex align-items-center mx-1 toolbar-text\">of {{maxIndex}}</span>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n\n    <!-- Image actions (special tools) -->\n    <ng-container *ngIf=\"tools.specialTools\">\n      <span class=\"toolbar-separator\"></span>\n      <p-button icon=\"pi pi-download\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Download image as PNG\" tooltipPosition=\"bottom\"\n                (onClick)=\"downloadImage.emit()\">\n      </p-button>\n      <p-button *ngIf=\"isHeatmap\" icon=\"pi pi-window-maximize\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Fit to view\" tooltipPosition=\"bottom\"\n                (onClick)=\"autoscaleImage.emit()\">\n      </p-button>\n    </ng-container>\n\n    <!-- Zoom tools. Plotly rubber-band drag-zoom: on OpenSeadragon the box-zoom\n         covers this and a bare drag pans natively, so it's hidden in image view. -->\n    <ng-container *ngIf=\"isHeatmap && tools.zoomTools\">\n      <span class=\"toolbar-separator\"></span>\n      <p-button *ngIf=\"!isImageView\" icon=\"pi pi-search\" size=\"small\"\n                [text]=\"activeDragMode !== 'zoom'\"\n                pTooltip=\"Zoom drag\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('zoom')\">\n      </p-button>\n      <p-button size=\"small\"\n                [text]=\"activeDragMode !== 'zoomToBox'\"\n                pTooltip=\"Zoom box (<kbd>b</kbd>)\" [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('zoomToBox')\">\n        <img src=\"assets/plotting/zoom-box.svg\"\n             [class]=\"activeDragMode === 'zoomToBox' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n             style=\"width: 1rem\"/>\n      </p-button>\n      <p-button icon=\"pi pi-arrows-alt\" size=\"small\"\n                [text]=\"activeDragMode !== 'pan'\"\n                pTooltip=\"Pan the image (<kbd>p</kbd>)\" [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('pan')\">\n      </p-button>\n      <p-button icon=\"pi pi-search-plus\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Zoom in (<kbd>+</kbd>)\" [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"zoomIn.emit()\">\n      </p-button>\n      <p-button icon=\"pi pi-search-minus\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Zoom out (<kbd>-</kbd>)\" [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"zoomOut.emit()\">\n      </p-button>\n    </ng-container>\n\n    <!-- Surface 3D controls -->\n    <ng-container *ngIf=\"!isHeatmap\">\n      <span class=\"toolbar-separator\"></span>\n      <p-button icon=\"pi pi-search\" size=\"small\"\n                [text]=\"activeSurface3dMode !== 'zoom'\"\n                pTooltip=\"Zoom\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleSurface3dMode.emit('zoom')\">\n      </p-button>\n      <p-button icon=\"pi pi-arrows-alt\" size=\"small\"\n                [text]=\"activeSurface3dMode !== 'pan'\"\n                pTooltip=\"Pan\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleSurface3dMode.emit('pan')\">\n      </p-button>\n      <p-button icon=\"pi pi-globe\" size=\"small\"\n                [text]=\"activeSurface3dMode !== 'orbit'\"\n                pTooltip=\"Orbital rotation\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleSurface3dMode.emit('orbit')\">\n      </p-button>\n      <p-button icon=\"pi pi-sync\" size=\"small\"\n                [text]=\"activeSurface3dMode !== 'turntable'\"\n                pTooltip=\"Turntable rotation\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleSurface3dMode.emit('turntable')\">\n      </p-button>\n      <p-button icon=\"pi pi-home\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Reset camera to default\" tooltipPosition=\"bottom\"\n                (onClick)=\"resetSurfaceCamera.emit()\">\n      </p-button>\n      <!-- 3D coordinate-axes / scale gizmo toggle (napari-js WebGPU volume/isosurface only).\n           `p-button-icon-only` gives the same square sizing as the neighbouring pi-icon buttons\n           (the projected <img> doesn't trigger PrimeNG's automatic icon-only sizing). -->\n      <p-button size=\"small\" *ngIf=\"isNapariMode\" styleClass=\"p-button-icon-only\"\n                [text]=\"!axesVisible\"\n                pTooltip=\"Toggle 3D axes / scale\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleAxes.emit()\">\n        <img src=\"assets/plotting/3d-coordinates.svg\"\n             [class]=\"axesVisible ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n             style=\"width: 1rem\"/>\n      </p-button>\n      <!-- Surface wireframe toggle (napari-js WebGPU surface only). -->\n      <p-button icon=\"pi pi-share-alt\" size=\"small\" *ngIf=\"isNapariSurfaceMode\"\n                [text]=\"!wireframeActive\"\n                pTooltip=\"Toggle wireframe\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleWireframe.emit()\">\n      </p-button>\n      <!-- Resolution (decimate factor) for the napari 3D types \u2014 reloads at coarser/finer sampling. -->\n      <ng-container *ngIf=\"isNapari3dMode\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Res</span>\n        <p-dropdown [options]=\"decimateOptions\" optionLabel=\"label\" optionValue=\"value\"\n                    [ngModel]=\"resolutionScale\" appendTo=\"body\"\n                    pTooltip=\"Resolution (decimate factor)\" tooltipPosition=\"bottom\"\n                    [style]=\"{'min-width': '6rem'}\"\n                    (onChange)=\"selectResolution.emit($event.value)\">\n        </p-dropdown>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"(isHeatmap || is3dRegions) && tools.regionTools\">\n      <span class=\"toolbar-separator\"></span>\n      <!-- Region Editor: opens the editor as a floating dialog (formerly the\n           right-panel Regions tab). Sits with the region drawing tools. -->\n      <p-button size=\"small\" [text]=\"true\"\n                pTooltip=\"Open the Region Editor\" tooltipPosition=\"bottom\"\n                (onClick)=\"openRegionEditor.emit()\">\n        <img src=\"assets/plotting/region-editor.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n      </p-button>\n      <!-- Region drawing tools -->\n      <p-button icon=\"pi pi-arrow-up-right\" size=\"small\"\n                [text]=\"activeDragMode !== 'select'\"\n                pTooltip=\"Selection mode (<kbd>s</kbd>)\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('select')\">\n      </p-button>\n      <p-button icon=\"pi pi-stop\" size=\"small\"\n                [text]=\"activeDragMode !== 'drawrect'\"\n                pTooltip=\"Draw a rectangular region (<kbd>r</kbd>)\" [escape]=\"false\"\n                tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('drawrect')\">\n      </p-button>\n      <p-button *ngIf=\"!is3dRegions\" size=\"small\"\n                [text]=\"activeDragMode !== 'drawopenpath'\"\n                pTooltip=\"Draw a polyline (<kbd>l</kbd>)\" [escape]=\"false\"\n                tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('drawopenpath')\">\n        <img src=\"assets/plotting/polyline.svg\"\n             [class]=\"activeDragMode === 'drawopenpath' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n             style=\"width: 1rem\"/>\n      </p-button>\n      <p-button icon=\"pi pi-pencil\" size=\"small\"\n                [text]=\"activeDragMode !== 'drawclosedpath'\"\n                pTooltip=\"Draw a freeform region (<kbd>f</kbd>)\" [escape]=\"false\"\n                tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('drawclosedpath')\">\n      </p-button>\n      <!-- Brush: paint a region by dragging a disc of the given size; the Size\n           slider appears while it's active. Hold Shift to erase (subtract). -->\n      <!-- Brush and polyline are absent from a 3D cloud: the brush paints in IMAGE\n                 pixels and there is no raster to sample, and an open polyline is a\n                 profile tool, not a closed region a selection can test against. -->\n            <p-button *ngIf=\"!is3dRegions\" size=\"small\"\n                [text]=\"activeDragMode !== 'brush'\"\n                pTooltip=\"Brush: click and drag to paint a region.\n                <br>Hold <kbd>Shift</kbd> while painting to erase from a region.\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('brush')\">\n        <img src=\"assets/plotting/paintbrush.svg\"\n             [class]=\"activeDragMode === 'brush' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n             style=\"width: 1rem\"/>\n      </p-button>\n      <ng-container *ngIf=\"activeDragMode === 'brush'\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Size</span>\n        <p-slider [(ngModel)]=\"brushSize\"\n                  [min]=\"brushSizeMin\" [max]=\"brushSizeMax\" [step]=\"brushSizeStep\"\n                  (onChange)=\"brushSizeChange.emit($event.value)\"\n                  pTooltip=\"Brush diameter in image pixels.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  styleClass=\"wand-sensitivity-slider\"></p-slider>\n        <span class=\"flex align-items-center mx-1 toolbar-text wand-sensitivity-value\">\n          {{ brushSize }}</span>\n      </ng-container>\n\n      <!-- Vertex editing \u2014 backends with a vertex-editing overlay (OSD + napari-js image). -->\n      <ng-container *ngIf=\"supportsRegionVertexTools\">\n        <p-button size=\"small\"\n                  [text]=\"activeDragMode !== 'drawpolygon'\"\n                  pTooltip=\"Polygon: click to place each vertex; click the first point to close\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  (onClick)=\"toggleDragMode.emit('drawpolygon')\">\n          <img src=\"assets/plotting/polygon-vertices.svg\"\n               [class]=\"activeDragMode === 'drawpolygon' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n               style=\"width: 1rem\"/>\n        </p-button>\n        <p-button size=\"small\"\n                  [text]=\"activeDragMode !== 'addpoint'\"\n                  pTooltip=\"Add a vertex: click an edge of the selected polygon\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  (onClick)=\"toggleDragMode.emit('addpoint')\">\n          <img src=\"assets/plotting/vertex-add.svg\"\n               [class]=\"activeDragMode === 'addpoint' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n               style=\"width: 1rem\"/>\n        </p-button>\n        <p-button size=\"small\"\n                  [text]=\"activeDragMode !== 'deletepoint'\"\n                  pTooltip=\"Delete a vertex: click a vertex of the selected polygon\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  (onClick)=\"toggleDragMode.emit('deletepoint')\">\n          <img src=\"assets/plotting/vertex-delete.svg\"\n               [class]=\"activeDragMode === 'deletepoint' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n               style=\"width: 1rem\"/>\n        </p-button>\n      </ng-container>\n\n      <p-button size=\"small\"\n                [text]=\"activeDragMode !== 'wand'\"\n                pTooltip=\"Wand: click and drag to grow a region by similar pixel values (<kbd>w</kbd>).\n                <br>Hold <kbd>Shift</kbd> while clicking or dragging on a region to erase pixels from it.\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('wand')\">\n        <img src=\"assets/plotting/wand.svg\"\n             [class]=\"activeDragMode === 'wand' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n             style=\"width: 1rem\"/>\n      </p-button>\n      <ng-container *ngIf=\"activeDragMode === 'wand'\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Sens.</span>\n        <p-slider [(ngModel)]=\"wandSensitivity\"\n                  [min]=\"wandSensitivityMin\" [max]=\"wandSensitivityMax\" [step]=\"wandSensitivityStep\"\n                  (onChange)=\"wandSensitivityChange.emit($event.value)\"\n                  pTooltip=\"Higher = stricter (smaller selection); lower = looser.\n                  Takes effect from the next click/drag tick.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  styleClass=\"wand-sensitivity-slider\"></p-slider>\n        <span class=\"flex align-items-center mx-1 toolbar-text wand-sensitivity-value\">\n          {{ wandSensitivity.toFixed(1) }}</span>\n      </ng-container>\n      <p-button icon=\"pi pi-eraser\" size=\"small\"\n                [text]=\"activeDragMode !== 'eraseVertex'\"\n                pTooltip=\"Vertex eraser (<kbd>e</kbd>): click or drag to remove polygon vertices inside\n                the cursor circle from any region.\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('eraseVertex')\">\n      </p-button>\n      <ng-container *ngIf=\"activeDragMode === 'eraseVertex'\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Radius</span>\n        <p-slider [(ngModel)]=\"vertexEraserRadius\"\n                  [min]=\"vertexEraserRadiusMin\" [max]=\"vertexEraserRadiusMax\" [step]=\"vertexEraserRadiusStep\"\n                  (onChange)=\"vertexEraserRadiusChange.emit($event.value)\"\n                  pTooltip=\"Eraser radius in image pixels.\n                  Vertices within this distance of the cursor are removed.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  styleClass=\"wand-sensitivity-slider\"></p-slider>\n        <span class=\"flex align-items-center mx-1 toolbar-text wand-sensitivity-value\">\n          {{ vertexEraserRadius }}</span>\n      </ng-container>\n      <p-button size=\"small\" [text]=\"true\"\n                [disabled]=\"!canUndo\"\n                pTooltip=\"Undo the last region action (<kbd>Ctrl</kbd>+<kbd>Z</kbd>).\n                Up to 10 actions can be undone.\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"undoRegion.emit()\">\n        <img src=\"assets/plotting/undo.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n      </p-button>\n      <p-button size=\"small\" [text]=\"true\"\n                [disabled]=\"!canRedo\"\n                pTooltip=\"Redo the last undone region action\n                (<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd> / <kbd>Ctrl</kbd>+<kbd>Y</kbd>).\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"redoRegion.emit()\">\n        <img src=\"assets/plotting/redo.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n      </p-button>\n      <p-button icon=\"pi pi-trash\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Delete selected region (<kbd>Del</kbd>)\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"deleteRegion.emit()\">\n      </p-button>\n      <!-- SAM (jit-ui#90): box-prompt segment, interactive point prompts, and a\n           model picker. -->\n      <span class=\"toolbar-separator\"></span>\n      <!-- SAM controls grouped: box-prompt Segment, then the point-prompt tool,\n           then the model-picker dropdown (the chevron) which governs BOTH tools.\n           Falls back to Segment + point with no model picker when none are set. -->\n      <span *ngIf=\"samModels.length; else segmentPlain\" class=\"p-buttonset segment-split\">\n        <p-button size=\"small\" [text]=\"true\"\n                  pTooltip=\"Segment the drawn rectangles with SAM (box prompt)\"\n                  tooltipPosition=\"bottom\"\n                  (onClick)=\"segmentRegions.emit()\">\n          <img src=\"assets/plotting/sam-box-prompt.svg\"\n               class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n        </p-button>\n        <ng-container [ngTemplateOutlet]=\"samPointBtn\"></ng-container>\n        <p-button icon=\"pi pi-chevron-down\" size=\"small\" [text]=\"true\"\n                  pTooltip=\"Pick the SAM model (used by both segment tools)\"\n                  tooltipPosition=\"bottom\"\n                  (onClick)=\"samModelMenu.toggle($event)\">\n        </p-button>\n      </span>\n      <ng-template #segmentPlain>\n        <span class=\"p-buttonset segment-split\">\n          <p-button size=\"small\" [text]=\"true\"\n                    pTooltip=\"Segment the drawn rectangles with SAM (box prompt)\"\n                    tooltipPosition=\"bottom\"\n                    (onClick)=\"segmentRegions.emit()\">\n            <img src=\"assets/plotting/sam-box-prompt.svg\"\n                 class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n          </p-button>\n          <ng-container [ngTemplateOutlet]=\"samPointBtn\"></ng-container>\n        </span>\n      </ng-template>\n      <!-- Point-prompt tool \u2014 shared between the models / no-models layouts so it\n           always sits just left of the model dropdown. -->\n      <ng-template #samPointBtn>\n        <p-button size=\"small\"\n                  [text]=\"activeDragMode !== 'samPoint'\"\n                  pTooltip=\"SAM point prompts: click a fiber to segment it as a new region;\n                  Shift/Alt-click to refine (exclude) the current one.<br>Esc undoes it.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  (onClick)=\"toggleDragMode.emit('samPoint')\">\n          <img src=\"assets/plotting/sam-point-prompt.svg\"\n               [class]=\"activeDragMode === 'samPoint' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n               style=\"width: 1rem\"/>\n        </p-button>\n      </ng-template>\n      <p-menu #samModelMenu styleClass=\"model-menu\" [model]=\"samMenuItems\" [popup]=\"true\" appendTo=\"body\">\n        <ng-template pTemplate=\"item\" let-item>\n          <ng-container [ngTemplateOutlet]=\"modelMenuItem\"\n                        [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n      </p-menu>\n\n      <!-- Shared item body for all three model pickers (SAM / YOLO / retinal):\n           the standard check-or-blank icon and label, plus an info icon carrying\n           the model's description as a hover tooltip. This replaced a single\n           \"About the SAM models\" overlay panel \u2014 per-model text sits next to the\n           model it describes, and YOLO/retinal get the same affordance.\n\n           p-menu puts its click handler on the wrapping `.p-menuitem-content`,\n           outside this template, so `command` still fires and the whole row stays\n           clickable \u2014 which is also why the info icon has to stop propagation, or\n           reading about a model would switch to it. -->\n      <ng-template #modelMenuItem let-item>\n        <a class=\"p-menuitem-link model-menu-item\">\n          <span class=\"p-menuitem-icon\" [ngClass]=\"item.icon\"></span>\n          <span class=\"p-menuitem-text\">{{ item.label }}</span>\n          <!-- `bottom` like every other tooltip in this toolbar, and for room:\n               these menus open under buttons that can sit near the right edge,\n               where a `right` tooltip has a few hundred px and squeezes its text\n               into a narrow column instead of using its max-width. -->\n          <!-- A focusable <button>, not a bare <i>. As an <i> the description\n               was reachable only by hovering a mouse: not tabbable, no\n               accessible name, nothing for a screen reader to announce \u2014 so\n               keyboard and AT users could pick a checkpoint but never read what\n               it was. PrimeNG's tooltip shows on focus as well as hover, so\n               making it a button restores it for free.\n\n               `aria-describedby` is deliberately not used: the tooltip is\n               rendered into `body` on demand and has no stable id to point at.\n               The description is carried on `aria-label` instead, which is\n               announced whether or not the tooltip is showing. It is stripped of\n               markup first, since the copy contains `<b>`/`<br>` for the visual\n               tooltip and those would otherwise be read out literally. -->\n          <button *ngIf=\"item.tooltip\" type=\"button\"\n                  class=\"pi pi-info-circle model-info-icon\"\n                  [attr.aria-label]=\"'About ' + item.label + ': ' + plainText(item.tooltip)\"\n                  [pTooltip]=\"item.tooltip\" [escape]=\"false\" tooltipPosition=\"bottom\"\n                  appendTo=\"body\" tooltipStyleClass=\"model-info-tooltip\"\n                  (click)=\"$event.stopPropagation()\"\n                  (keydown.enter)=\"$event.stopPropagation()\"\n                  (keydown.space)=\"$event.stopPropagation()\"></button>\n        </a>\n      </ng-template>\n      <p-button size=\"small\" [text]=\"true\"\n                pTooltip=\"Auto-segment cells inside each drawn rectangle (cellpose-SAM)\"\n                tooltipPosition=\"bottom\"\n                (onClick)=\"segmentCellpose.emit()\">\n        <img src=\"assets/plotting/cells.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n      </p-button>\n\n      <!-- Contributed no-prompt tools (TOOLBAR_TOOLS). Unlike the SAM and\n           cellpose tools these take no prompt \u2014 they sweep the whole current\n           view rather than being pointed at something \u2014 so there is nothing to\n           draw first. Each renders the same split button: run, pick checkpoint,\n           open parameters.\n\n           Nothing here names a specific tool. The library ships none; a host\n           registers them, which is what lets this package be published without\n           the closed model dependencies. -->\n      <ng-container *ngFor=\"let tool of contributedTools; trackBy: trackToolById\">\n        <span class=\"p-buttonset segment-split\">\n          <p-button size=\"small\" [text]=\"true\"\n                    [pTooltip]=\"tool.runTooltip\"\n                    tooltipPosition=\"bottom\"\n                    (onClick)=\"runTool.emit(tool.id)\">\n            <!-- `toolbar-icon-dark` is hardcoded rather than bound, unlike the\n                 toggle tools: these fire a run and have no active state. -->\n            <img *ngIf=\"tool.icon.src\" [src]=\"tool.icon.src\" class=\"toolbar-icon-dark\"\n                 style=\"width: 1rem\" [alt]=\"tool.label\" />\n            <i *ngIf=\"tool.icon.pi\" class=\"pi {{ tool.icon.pi }}\"></i>\n          </p-button>\n          <p-button icon=\"pi pi-chevron-down\" size=\"small\" [text]=\"true\"\n                    [pTooltip]=\"tool.modelTooltip || 'Pick the model'\"\n                    tooltipPosition=\"bottom\"\n                    (onClick)=\"toolMenu.toggle($event)\">\n          </p-button>\n          <p-button *ngIf=\"tool.params.length\"\n                    icon=\"pi pi-sliders-h\" size=\"small\" [text]=\"true\"\n                    [pTooltip]=\"tool.paramsTooltip || 'Parameters'\"\n                    tooltipPosition=\"bottom\"\n                    (onClick)=\"openToolParams.emit(tool.id)\">\n          </p-button>\n        </span>\n        <p-menu #toolMenu styleClass=\"model-menu\" [model]=\"toolMenuItems[tool.id] || []\"\n                [popup]=\"true\" appendTo=\"body\">\n          <ng-template pTemplate=\"item\" let-item>\n            <ng-container [ngTemplateOutlet]=\"modelMenuItem\"\n                          [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n          </ng-template>\n        </p-menu>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"tools.help\">\n      <span class=\"toolbar-separator\"></span>\n\n      <!-- Help -->\n      <p-button icon=\"pi pi-question-circle\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Help\" tooltipPosition=\"bottom\"\n                (onClick)=\"showHelp()\">\n      </p-button>\n    </ng-container>\n\n  </div>\n</p-toolbar>\n<p-dialog header=\"Plotting help\" [(visible)]=\"displayHelpDialog\" [modal]=\"true\" [style]=\"{width: '50vw'}\"\n          [maximizable]=\"true\" [draggable]=\"false\" [resizable]=\"false\">\n  <p>Click a file in the left-hand tree to display it. By default it opens in the\n    <b>Image</b> view \u2014 a natively tiled, deeply zoomable raster (OpenSeadragon) with a\n    navigator minimap and a physical-units scale bar. <b>Click the image to zoom</b> toward\n    the clicked point; scroll to zoom and drag to pan. When a stack is open, a slice slider\n    (Image view) or image-mode toggle (other views) appears. Regions can also be edited in the\n    <b>Region Editor</b>, opened with the\n    <img src=\"assets/plotting/region-editor.svg\" width=\"14\" height=\"14\" alt=\"Region Editor\"/>\n    toolbar button as a floating dialog. Drag the <i class=\"pi pi-bars\"></i> handle to detach\n    this toolbar into a floating window.\n  </p>\n\n  <h3>Plot-type dropdown</h3>\n  <p>\n    The <b>plot-type dropdown</b> switches how the file is visualized:\n    <b>Image</b>, <b>Heatmap</b>, <b>Contour</b>, <b>Surface</b>, <b>Volume</b>,\n    <b>Isosurface</b>, and \u2014 when a spatial-omics dataset is open \u2014\n    <b>Spatial omics</b> and <b>Spatial omics 3D</b>.\n  </p>\n  <p>\n    <b>Only the modes the data can actually support are offered</b>, so the list changes\n    with what is loaded rather than showing entries that would come up blank:\n  </p>\n  <ul>\n    <li><b>Contour</b>, <b>Volume</b> and <b>Isosurface</b> need a grayscale image; the\n      two 3D ones also need a z-stack.</li>\n    <li><b>Spatial omics</b> needs a published dataset, and <b>Spatial omics 3D</b> needs\n      one whose coordinates carry a z.</li>\n    <li>The pixel modes (<b>Image</b>, <b>Heatmap</b>, <b>Surface</b>) are withheld for a\n      dataset that brings no tissue image \u2014 seqFISH records coordinates and no section, so\n      there is nothing for them to draw.</li>\n  </ul>\n  <ul>\n    <li>\"<b>Isosurface band</b>\" slider (Isosurface): sets the intensity band the surfaces are\n      drawn for, mapped onto the volume's real intensity range.</li>\n    <li>\"<b>3D camera</b>\" (Surface / Scatter 3D / Isosurface): zoom <i class=\"pi pi-search\"></i>,\n      pan <i class=\"pi pi-arrows-alt\"></i>, orbit <i class=\"pi pi-globe\"></i>,\n      turntable <i class=\"pi pi-sync\"></i>, and reset camera <i class=\"pi pi-home\"></i>;\n      scroll to zoom the 3D scene.</li>\n  </ul>\n\n  <h3>Image manipulation tools</h3>\n  <ul>\n    <li>\"<b>Region Editor</b>\" <img src=\"assets/plotting/region-editor.svg\" width=\"15\" height=\"15\">:\n      opens the Region Editor as a floating, draggable dialog \u2014 a per-image table of every region\n      (class, colour, area) with bulk select/label/colour/delete and GeoJSON import/export. It stays\n      in sync with the image, so you can keep it open while drawing.</li>\n    <li>\"<b>Intensity profile lines</b>\" <img src=\"assets/plotting/spline-chart.svg\" width=\"15\" height=\"15\">\n      (<i>work in progress \u2014 not yet stable</i>): adds a coloured line ROI; a floating inset\n      chart plots intensity along each line, updates live as you drag it, and re-samples at the\n      current zoom resolution. Each added line gets its own colour; select a line and use the\n      trash tool <i class=\"pi pi-trash\"></i> to remove it (and its trace).</li>\n    <li>\"<b>Channels &amp; Histogram</b>\" <img src=\"assets/plotting/invert.svg\" width=\"15\" height=\"15\">:\n      opens a floating dialog for brightness/contrast, gamma, and per-channel display, plus the\n      <b>colormap / LUT</b> controls (grayscale only) \u2014 a <b>reverse</b> toggle and a colormap\n      dropdown (default: inverted greys).</li>\n    <li>\"<b>Smoothen</b>\" <img src=\"assets/plotting/smooth.svg\" width=\"15\" height=\"15\">\n      (Image view only): the image opens showing <b>raw pixels</b> (nearest-neighbour), so\n      zooming in renders crisp blocks for pixel inspection. Toggle this on for bilinear\n      smoothing; the icon turns white while smoothing is active.</li>\n  </ul>\n\n  <h3>Download &amp; view tools</h3>\n  <ul>\n    <li>\"<b>Download</b>\" <i class=\"pi pi-download\"></i>: download the current image as a PNG.</li>\n    <li>\"<b>Fit to view</b>\" / autoscale <i class=\"pi pi-window-maximize\"></i>: resets the image\n      to its original dimensions. In stack mode it also resets to single-image mode.</li>\n  </ul>\n\n  <h3>Zoom tools</h3>\n  <ul>\n    <li>\"<b>Zoom box</b>\" <img src=\"assets/plotting/zoom-box.svg\" width=\"15\" height=\"15\">\n      (<kbd>b</kbd>): drag a box to select an area to zoom into.</li>\n    <li>\"<b>Pan</b>\" <i class=\"pi pi-arrows-alt\"></i> (<kbd>p</kbd>): drag to pan the image.</li>\n    <li>\"<b>Zoom in</b>\" <i class=\"pi pi-search-plus\"></i> (<kbd>+</kbd>): zoom in one step.</li>\n    <li>\"<b>Zoom out</b>\" <i class=\"pi pi-search-minus\"></i> (<kbd>-</kbd>): zoom out one step,\n      stopping at the original image dimensions.</li>\n  </ul>\n\n  <h3>Region tools</h3>\n  <p>By default no tool is selected (all greyed-out); selecting a tool highlights it. The\n    vertex-editing tools (polygon, add/delete vertex, move, B\u00E9zier conversions) are available\n    in the <b>Image</b> view only. On a <b>donut</b> (a region with a hole), the inner-ring\n    vertices are editable too \u2014 drag, add, and delete them just like the outer ring.</p>\n  <ul>\n    <li>\"<b>Selection</b>\" <i class=\"pi pi-arrow-up-right\"></i> (<kbd>s</kbd>): a neutral mode\n      that turns off whatever drawing tool was active (wand, vertex eraser, rectangle, etc.).\n      Use it to step out of editing without picking another tool.</li>\n    <li>\"<b>Rectangular region</b>\" <i class=\"pi pi-stop\"></i> (<kbd>r</kbd>): click and drag to\n      create a rectangular region.</li>\n    <li>\"<b>Polyline</b>\" <img src=\"assets/plotting/polyline.svg\" width=\"14\" height=\"14\">\n      (<kbd>l</kbd>): draw an open (non-closed) polyline by clicking and dragging. Polylines can\n      be edited and exported to GeoJSON as a <code>LineString</code> feature.</li>\n    <li>\"<b>Freeform region</b>\" <i class=\"pi pi-pencil\"></i> (<kbd>f</kbd>): click and drag to\n      draw a closed freeform polygon.</li>\n    <li>\"<b>Brush</b>\" <img src=\"assets/plotting/paintbrush.svg\" width=\"15\" height=\"15\">: click\n      and drag to paint a region with a circular brush \u2014 the painted stroke is the region.\n      A <b>Size</b> slider (brush diameter, in image pixels) appears in the toolbar while the\n      brush is active. Hold <kbd>Shift</kbd> while painting to <b>erase</b> (subtract) from a\n      region instead. Painting over an existing region extends it; brushing across two regions\n      merges them. Painting a closed ring (or shift-erasing an interior pocket) leaves the\n      enclosed area empty \u2014 a <b>donut</b> (Image view).</li>\n    <li>\"<b>Polygon</b>\" <img src=\"assets/plotting/polygon-vertices.svg\" width=\"15\" height=\"15\">:\n      click to place each vertex; click the first point to close the polygon.</li>\n    <li>\"<b>Add vertex</b>\" <img src=\"assets/plotting/vertex-add.svg\" width=\"15\" height=\"15\">:\n      click an edge of the selected polygon to insert a new vertex.</li>\n    <li>\"<b>Delete vertex</b>\" <img src=\"assets/plotting/vertex-delete.svg\" width=\"15\" height=\"15\">:\n      click a vertex of the selected polygon to remove it.</li>\n    <li>\"<b>Move region</b>\" <img src=\"assets/plotting/region-move.svg\" width=\"15\" height=\"15\">:\n      drag to move the selected region.</li>\n    <li>\"<b>To B\u00E9zier</b>\" <img src=\"assets/plotting/to-bezier.svg\" width=\"15\" height=\"15\"> /\n      \"<b>To polygon</b>\" <img src=\"assets/plotting/to-polygon.svg\" width=\"15\" height=\"15\">:\n      convert the selected region to a smooth B\u00E9zier curve, or back to a straight-edged polygon.</li>\n    <li>\"<b>Wand</b>\" <img src=\"assets/plotting/wand.svg\" width=\"15\" height=\"15\"> (<kbd>w</kbd>):\n      click to grow a region from pixels with similar values around the click point. Hold\n      <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> for an exact-match flood fill; drag to keep extending the\n      selection while moving; hold <kbd>Shift</kbd> while clicking or dragging on an existing\n      region to <b>erase</b> pixels from it. Use the <b>Sens.</b> slider that appears to make the\n      wand stricter (higher = smaller selection) or looser. Subsequent clicks keep extending the\n      same region; clicking inside an existing region adopts it, and growing into another region\n      merges them.</li>\n    <li>\"<b>Vertex eraser</b>\" <i class=\"pi pi-eraser\"></i> (<kbd>e</kbd>): click or click-and-drag\n      to remove polygon vertices that fall inside the cursor circle from any region, including a\n      region's inner rings (donut holes). Use the <b>Radius</b> slider to set the eraser size in\n      image pixels. Polygons reduced below 3 vertices (or polylines below 2) are deleted entirely;\n      a hole reduced below 3 vertices is removed.</li>\n    <li>\"<b>Undo</b>\" <img src=\"assets/plotting/undo.svg\" width=\"15\" height=\"15\">\n      (<kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Z</kbd>): reverts the\n      last region action (draw, delete, edit, wand/brush stroke, segmentation, \u2026). Up to the last\n      <b>10</b> actions can be undone; the button greys out when there's nothing left to undo.</li>\n    <li>\"<b>Redo</b>\" <img src=\"assets/plotting/redo.svg\" width=\"15\" height=\"15\">\n      (<kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd> or <kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Y</kbd>):\n      re-applies the most recently undone action. Performing a new region action clears what can be redone.</li>\n    <li>\"<b>Delete region</b>\" <i class=\"pi pi-trash\"></i> (<kbd>Del</kbd>): deletes the selected\n      region. This can also be done from the Region Editor.</li>\n  </ul>\n\n  <h3>Region actions (right-click the image)</h3>\n  <p>Right-click a region \u2014 or the current multi-selection \u2014 to open the\n    \"<b>Selected region(s)</b>\" group at the top of the context menu. These act immediately on\n    the selection (they're not drawing modes) and are fully undo/redo-able:</p>\n  <ul>\n    <li>\"<b>Select all regions</b>\" <i class=\"pi pi-check-square\"></i>: select every region on\n      the image (also in the Region Editor toolbar).</li>\n    <li>\"<b>Merge / group</b>\": combine 2+ selected regions into one. If the pieces don't touch,\n      the result is a single multi-part region (sparse \"bits\").</li>\n    <li>\"<b>Ungroup</b>\": split a multi-part region back into one region per piece.</li>\n    <li>\"<b>Inverse</b>\": replace the selection with everything <i>outside</i> it \u2014 the image\n      rectangle with the selected regions punched out as holes. Works at any image size.</li>\n    <li>\"<b>Simplify</b>\": reduce a region's vertex count (Douglas\u2013Peucker) by an altitude\n      threshold in pixels \u2014 pick <b>Light</b> (1&nbsp;px), <b>Medium</b> (3&nbsp;px),\n      <b>Strong</b> (8&nbsp;px), or <b>Custom\u2026</b> for a slider. Applies to the exterior and any\n      holes (and every part of a multi-part region).</li>\n    <li>The B\u00E9zier conversions and Delete also live in this group (the right-click equivalents of\n      the toolbar / vertex tools above).</li>\n  </ul>\n\n  <h3>Segmentation &amp; detection tools</h3>\n  <p>AI-assisted segmentation and detection that run entirely in the browser. The first run\n    of any model downloads it (a progress toast is shown); it's then cached.</p>\n  <p>Two shapes of tool: the <b>prompted</b> ones (Segment, Point prompts, Cellpose) act on\n    rectangles you draw, and generated regions inherit the color of the rectangle they came\n    from<span *ngIf=\"contributedTools.length\">; the <b>no-prompt</b> ones ({{ contributedToolNames }})\n    sweep the whole current view, so there is nothing to draw first</span>.</p>\n  <p>Each model dropdown <i class=\"pi pi-chevron-down\"></i> lists the available checkpoints with\n    a <i class=\"pi pi-info-circle\"></i> beside each one \u2014 hover it for that model's size, speed,\n    training domain and accuracy, so you can pick without leaving the toolbar.</p>\n  <ul>\n    <li>\"<b>Segment</b>\" <img src=\"assets/plotting/sam-box-prompt.svg\" width=\"15\" height=\"15\">\n      (box prompt): draw one or more <b>Rectangular regions</b> around the objects of interest,\n      then click Segment. Each rectangle is replaced by the SAM mask of the object inside it.</li>\n    <li>\"<b>Point prompts</b>\" <img src=\"assets/plotting/sam-point-prompt.svg\" width=\"15\" height=\"15\">: click directly on an object to\n      segment it as a <b>new</b> region. Each click starts a fresh object \u2014 clicking another\n      object won't grow the previous one. <kbd>Shift</kbd>/<kbd>Alt</kbd>-click adds an\n      <i>exclude</i> point that refines the current object; <kbd>Esc</kbd> undoes it,\n      <kbd>Enter</kbd> commits it.</li>\n    <li>\"<b>Model picker</b>\" <i class=\"pi pi-chevron-down\"></i>: the dropdown attached to the\n      Segment button chooses the SAM model \u2014 <b>micro-sam ViT-T</b> (default; small, fast) or\n      <b>micro-sam ViT-B</b> (larger, highest accuracy) for light microscopy, or\n      <b>patho-sam ViT-B</b> for histopathology (H&amp;E / stained tissue). All are promptable\n      Segment Anything models finetuned for biomedical images; they differ in the <i>image\n      encoder</i> (the heavy once-per-image step) and the training domain \u2014 box and point\n      prompting behave the same. The choice applies to <i>both</i> the box and point tools, and\n      each tool loads its own encoder, so the first click after switching re-encodes once.</li>\n    <li>\"<b>Cellpose</b>\" <img src=\"assets/plotting/cells.svg\" width=\"15\" height=\"15\">: draw rectangles, then click Cellpose to\n      automatically segment every cell inside each rectangle (client-side cellpose-SAM) \u2014 one\n      region per detected cell. No clicking on individual cells needed.</li>\n    <!-- Contributed tools describe themselves. This library ships none, so an\n         open build's help lists only the prompted tools above \u2014 the text no\n         longer promises buttons that are not there. -->\n    <ng-container *ngFor=\"let tool of contributedTools\">\n      <li *ngIf=\"tool.help\" [innerHTML]=\"tool.help.body\"></li>\n    </ng-container>\n    <ng-container *ngFor=\"let tool of dialogTools\">\n      <li *ngIf=\"tool.help\" [innerHTML]=\"tool.help.body\"></li>\n    </ng-container>\n  </ul>\n\n  <h3>Spatial omics</h3>\n  <p>\n    In <b>Spatial omics</b> mode each observation \u2014 a cell or a Visium spot \u2014 is drawn at\n    its own coordinates, over the tissue image where the dataset registers onto one. The\n    <img src=\"assets/plotting/spatial-omics.svg\" width=\"14\" height=\"14\" alt=\"Spatial omics\"/>\n    panel colours them by a <b>column</b> (a cell type, a cluster) or by a <b>gene</b>, and\n    the two are exclusive so what drives the colours is never ambiguous.\n  </p>\n  <ul>\n    <li>\"<b>Select from ROIs</b>\": turns the regions you have drawn into a selection of\n      observations. Everything else then follows that selection.</li>\n    <li>\"<b>Point size</b>\" / \"<b>Opacity</b>\": how the markers are drawn, not what is\n      selected.</li>\n  </ul>\n\n  <h3>Distribution charts</h3>\n  <p>\n    The <b>Distribution</b> section of the spatial-omics panel charts whatever the map is\n    coloured by, so the two can never disagree. Each tab answers a different question, and\n    the <i class=\"pi pi-question-circle\"></i> beside them explains the one on screen \u2014\n    including what it must <em>not</em> be read for.\n  </p>\n  <ul>\n    <li>\"<b>Counts</b>\": how many observations per category. A category is a label, not a\n      magnitude, so a frequency is the only distribution it has.</li>\n    <li>\"<b>Histogram</b>\" / \"<b>Violin</b>\" / \"<b>Box</b>\": how a continuous value is\n      distributed \u2014 over everything, or split by a grouping column.</li>\n    <li>\"<b>Heatmap</b>\": mean expression of the genes you pick within each group.\n      Z-scored per gene by default, so a colour means \"above or below this gene's own\n      average\" rather than \"highly expressed\".</li>\n    <li>\"<b>Embedding</b>\": a UMAP, PCA or t-SNE over the same cells. <b>Lasso it to\n      select on the map</b> \u2014 both views read the same selection. Only PCA labels its axes\n      with a percentage, because only its axes explain a measurable share of the variance;\n      UMAP and t-SNE coordinates are arbitrary, so distance between distant clusters\n      should not be read.</li>\n    <li>\"<b>Detach</b>\": moves the charts into their own window so they can sit beside the\n      map instead of inside the panel. Switching tabs keeps the window where it is.</li>\n  </ul>\n\n  <h3>Help</h3>\n  <p>\"<b>Help</b>\" <i class=\"pi pi-question-circle\"></i>: opens this dialog.</p>\n\n  <h3>Keyboard shortcuts</h3>\n  <table class=\"shortcuts-table\">\n    <tr><td><kbd>+</kbd> / <kbd>=</kbd></td><td>Zoom in</td></tr>\n    <tr><td><kbd>-</kbd></td><td>Zoom out</td></tr>\n    <tr><td><kbd>b</kbd></td><td>Toggle zoom box mode</td></tr>\n    <tr><td><kbd>p</kbd></td><td>Toggle pan mode</td></tr>\n    <tr><td><kbd>f</kbd></td><td>Toggle freeform region drawing</td></tr>\n    <tr><td><kbd>l</kbd></td><td>Toggle polyline drawing</td></tr>\n    <tr><td><kbd>r</kbd></td><td>Toggle rectangular region drawing</td></tr>\n    <tr><td><kbd>w</kbd></td><td>Toggle wand tool</td></tr>\n    <tr><td>Wand + <kbd>Shift</kbd></td><td>Erase pixels from the active region</td></tr>\n    <tr><td>Wand + <kbd>Ctrl</kbd>/<kbd>Cmd</kbd></td><td>Exact-match flood fill (no smoothing)</td></tr>\n    <tr><td><kbd>e</kbd></td><td>Toggle vertex eraser</td></tr>\n    <tr><td><kbd>s</kbd></td><td>Selection mode (deactivates drawing tools)</td></tr>\n    <tr><td>Point prompt + <kbd>Shift</kbd>/<kbd>Alt</kbd></td><td>Add an exclude point (refine the current object)</td></tr>\n    <tr><td><kbd>Enter</kbd></td><td>Commit the current SAM point object</td></tr>\n    <tr><td><kbd>Esc</kbd></td><td>Undo the current SAM point object</td></tr>\n    <tr><td><kbd>Del</kbd> / <kbd>\u232B</kbd></td><td>Delete selected region</td></tr>\n    <tr><td><kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Z</kbd></td><td>Undo the last region action (up to 10)</td></tr>\n    <tr><td><kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd> / <kbd>Ctrl</kbd>+<kbd>Y</kbd></td><td>Redo the last undone region action</td></tr>\n  </table>\n\n  <ng-template pTemplate=\"footer\">\n    <p-button icon=\"pi pi-check\" (click)=\"displayHelpDialog=false\" label=\"Ok\" styleClass=\"p-button-text\">\n    </p-button>\n  </ng-template>\n</p-dialog>\n", styles: [":host{display:block}:host ::ng-deep .p-toolbar{padding:.25rem .5rem}.toolbar-text{color:var(--primary-color);font-size:.875rem}::ng-deep .toolbar-input .p-inputtext{color:var(--primary-color);border-color:var(--primary-color)}.toolbar-separator{border-left:1px solid var(--surface-border);height:1.5rem;margin:0 .25rem;align-self:center}.toolbar-icon-dark{filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}.toolbar-icon-active{filter:brightness(0) invert(1)}::ng-deep .plotmode-item{display:inline-flex;align-items:center;gap:.5rem;color:#000}::ng-deep .plotmode-item i{font-size:1rem;color:var(--primary-color)}::ng-deep .plotmode-item .plotmode-icon-img{width:1.1rem;height:1.1rem;object-fit:contain;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .p-menu.model-menu{width:auto;min-width:12.5rem}::ng-deep .model-menu-item{display:flex;align-items:center;gap:.5rem}::ng-deep .model-menu-item .p-menuitem-text{flex:1 1 auto;white-space:nowrap}::ng-deep .model-menu-item .model-info-icon{flex:0 0 auto;font-size:.875rem;opacity:.55;cursor:help;appearance:none;background:none;border:0;padding:0;margin:0;color:inherit;line-height:1}::ng-deep .model-menu-item .model-info-icon:hover{opacity:1}::ng-deep .model-menu-item .model-info-icon:focus-visible{opacity:1;outline:2px solid var(--primary-color, #2196f3);outline-offset:2px;border-radius:2px}::ng-deep .model-info-tooltip .p-tooltip-text{min-width:18rem;max-width:24rem;line-height:1.4}::ng-deep .wand-sensitivity-slider{width:8rem;align-self:center;margin:0 .25rem}.wand-sensitivity-value{min-width:2rem;text-align:right}span.colormap{width:50px;height:auto;display:inline-block}img.colormap{width:50px;height:auto}.colormap{background:no-repeat;background-size:100%;vertical-align:middle}kbd{background:#e8e8e8;border:1px solid #bbb;border-radius:3px;padding:1px 5px;font-family:monospace;font-size:.85em}.shortcuts-table{border-collapse:collapse}.shortcuts-table td{padding:.25rem .75rem .25rem 0;vertical-align:middle}.shortcuts-table td:first-child{white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "component", type: i3.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { 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: "component", type: i6.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "directive", type: i6$1.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: i7.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "autoShowPanelOnPrintableCharacterKeyDown", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { 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: i10.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { 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: "directive", type: i12.Ripple, selector: "[pRipple]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'plotting-toolbar', template: "<p-toolbar>\n  <div class=\"p-toolbar-group-start flex-wrap align-items-center gap-1\">\n\n    <!-- Host-provided custom toolbar buttons, shown first (e.g. app-specific\n         actions the visualization view itself doesn't own). -->\n    <ng-content></ng-content>\n\n    <!-- Contributed dialog tools (TOOLBAR_TOOLS, kind: 'dialog'): app-level actions\n         like the host's own buttons above, so they sit right beside them. Image view\n         only, the view their dialog draws over. Highlighted while the dialog is open. -->\n    <ng-container *ngIf=\"isImageView\">\n      <p-button *ngFor=\"let tool of dialogTools; trackBy: trackToolById\"\n                size=\"small\" [text]=\"openDialogToolId !== tool.id\"\n                [pTooltip]=\"tool.tooltip\" tooltipPosition=\"bottom\"\n                [ariaLabel]=\"tool.label\"\n                [attr.aria-pressed]=\"openDialogToolId === tool.id\"\n                (onClick)=\"toggleDialogTool.emit(tool.id)\">\n        <img *ngIf=\"tool.icon.src\" [src]=\"tool.icon.src\" style=\"width: 1rem\" [alt]=\"tool.label\"\n             [class]=\"openDialogToolId === tool.id ? 'toolbar-icon-active' : 'toolbar-icon-dark'\" />\n        <i *ngIf=\"tool.icon.pi\" class=\"pi {{ tool.icon.pi }}\"></i>\n      </p-button>\n    </ng-container>\n\n    <!-- Plot type: available for any image (grayscale or RGB). -->\n    <ng-container *ngIf=\"imageInfo && tools.specialTools\">\n      <span class=\"toolbar-separator\"></span>\n      <p-dropdown [options]=\"plotTypeOptions\" optionLabel=\"label\" optionValue=\"type\"\n                  [(ngModel)]=\"selectedPlotType\" appendTo=\"body\"\n                  pTooltip=\"Select plot type\" tooltipPosition=\"bottom\"\n                  [style]=\"{'min-width': '11rem'}\"\n                  styleClass=\"plotmode-dropdown\" panelStyleClass=\"plotmode-panel\"\n                  (onChange)=\"selectPlotType.emit($event.value)\">\n        <ng-template let-opt pTemplate=\"selectedItem\">\n          <span class=\"plotmode-item\" *ngIf=\"opt\">\n            <i *ngIf=\"isPiIcon(opt.icon)\" [class]=\"opt.icon\"></i>\n            <img *ngIf=\"opt.icon && !isPiIcon(opt.icon)\" class=\"plotmode-icon-img\" [src]=\"opt.icon\" alt=\"\" />\n            <span>{{ opt.label }}</span>\n          </span>\n        </ng-template>\n        <ng-template let-opt pTemplate=\"item\">\n          <span class=\"plotmode-item\">\n            <i *ngIf=\"isPiIcon(opt.icon)\" [class]=\"opt.icon\"></i>\n            <img *ngIf=\"opt.icon && !isPiIcon(opt.icon)\" class=\"plotmode-icon-img\" [src]=\"opt.icon\" alt=\"\" />\n            <span>{{ opt.label }}</span>\n          </span>\n        </ng-template>\n      </p-dropdown>\n      <ng-container *ngIf=\"isIsosurfaceMode\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Iso</span>\n        <p-slider [(ngModel)]=\"isoRange\" [range]=\"true\"\n                  [min]=\"isoValueMin\" [max]=\"isoValueMax\" [step]=\"isoValueStep\"\n                  (onChange)=\"isoRangeChange.emit($event.values)\"\n                  pTooltip=\"Isosurface band (0\u2013255), mapped onto the volume's\n                  actual intensity range. Surfaces are drawn for voxels whose\n                  intensity falls in the selected band \u2014 narrow it to isolate\n                  features, widen it to see the whole structure.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  styleClass=\"wand-sensitivity-slider\"></p-slider>\n        <span class=\"flex align-items-center mx-1 toolbar-text wand-sensitivity-value\">\n          {{ isoRange[0] }}\u2013{{ isoRange[1] }}</span>\n      </ng-container>\n      <!-- Intensity tools (Heatmap / Image mode): add another colored line ROI.\n           Each added line gets the next bright palette colour and its own inset\n           trace; select a line on the image and use the trash tool to remove it\n           (and its trace). The lines are Region-based but excluded from the\n           Region Editor and exports. -->\n      <ng-container *ngIf=\"isIntensityCapable\">\n        <span class=\"toolbar-separator\"></span>\n        <p-button size=\"small\" [text]=\"true\"\n                  pTooltip=\"Add an intensity line (new colour). Click a line to select it,\n                  then use the trash tool to remove it.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  (onClick)=\"addProfileLine.emit()\">\n          <img src=\"assets/plotting/spline-chart.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n        </p-button>\n      </ng-container>\n    </ng-container>\n    <!-- Channels & Histogram: brightness/contrast, gamma, per-channel display,\n         colormap/reverse/invert \u2014 opens the floating dialog. -->\n    <p-button *ngIf=\"tools.specialTools\" pRipple size=\"small\" [text]=\"true\"\n              pTooltip=\"Channels &amp; Histogram (brightness/contrast, colormap)\"\n              tooltipPosition=\"bottom\"\n              (onClick)=\"openChannelHistogram.emit()\">\n      <img src=\"assets/plotting/invert.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n    </p-button>\n\n    <!-- Spatial-omics controls. Only meaningful in the spatial mode, which is\n         itself only offered while a dataset is loaded \u2014 so this button appears\n         exactly when there is something for it to control. -->\n    <p-button *ngIf=\"tools.specialTools && isSpatialMode\" pRipple size=\"small\" [text]=\"true\"\n              pTooltip=\"Spatial omics (colour by column or gene, legend, selection, distributions)\"\n              tooltipPosition=\"bottom\"\n              (onClick)=\"openSpatialControls.emit()\">\n      <img src=\"assets/plotting/spatial-omics.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n    </p-button>\n\n    <!-- Smoothen toggle: bilinear smoothing vs nearest-neighbour raw pixels (Image\n         view only \u2014 it's an OpenSeadragon drawer setting). Highlighted when smoothing on. -->\n    <p-button *ngIf=\"tools.specialTools && isImageView\" size=\"small\"\n              [text]=\"!imageSmoothingEnabled\"\n              pTooltip=\"Smoothen (turn on image smoothing)\" tooltipPosition=\"bottom\"\n              (onClick)=\"toggleImageSmoothing.emit()\">\n      <img src=\"assets/plotting/smooth.svg\" style=\"width: 1rem\"\n           [class]=\"imageSmoothingEnabled ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"/>\n    </p-button>\n\n    <!-- Stack controls -->\n    <ng-container *ngIf=\"imageInfo?.isStack\">\n      <span class=\"toolbar-separator\"></span>\n      <!-- Image view: scrub z-slices live (the renderer swaps slices in place). -->\n      <ng-container *ngIf=\"showsLiveSliceScrubber\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Slice</span>\n        <p-slider [(ngModel)]=\"zIndex\" [min]=\"0\" [max]=\"maxIndex\"\n                  (onChange)=\"zScrub.emit($event.value)\" (onSlideEnd)=\"zSlide.emit($event.value)\"\n                  pTooltip=\"Slice through the stack (\u2190 / \u2192 keys)\" tooltipPosition=\"bottom\"\n                  [style]=\"{'width':'16rem'}\" styleClass=\"wand-sensitivity-slider\"></p-slider>\n        <span class=\"flex align-items-center mx-1 toolbar-text\">{{zIndex}} of {{maxIndex}}</span>\n      </ng-container>\n      <!-- Heatmap view: single-image (high-def zoom) vs stack (frame slider). Plotly-only \u2014\n           hidden for napari, which has no single/stack toggle or per-frame fetch, and for the\n           spatial-omics modes: a 3D omics dataset publishes its reference volume as a z-stack\n           image, and these modes draw observations, not one of its slices. -->\n      <ng-container *ngIf=\"!showsLiveSliceScrubber && !isNapariMode && !isSpatialMode\">\n      <p-button icon=\"pi pi-image\" size=\"small\"\n                [text]=\"imageInfo?.showStack\"\n                pTooltip=\"Single image mode: enables high-def zoom\" tooltipPosition=\"bottom\"\n                (onClick)=\"selectStackOption.emit(stackOptions[0])\">\n      </p-button>\n      <p-button icon=\"pi pi-images\" size=\"small\"\n                [text]=\"!imageInfo?.showStack\"\n                pTooltip=\"Stack mode, enables slicing through image frames\" tooltipPosition=\"bottom\"\n                (onClick)=\"selectStackOption.emit(stackOptions[1])\">\n      </p-button>\n      <ng-container *ngIf=\"!imageInfo?.showStack\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Slice</span>\n        <div class=\"p-inputgroup\" style=\"width: auto\">\n          <p-inputNumber styleClass=\"w-3rem toolbar-input\"\n\t\t\t\t\tpTooltip=\"View image in stack (&#x23CE;)\"\n\t\t\t\t\t[(ngModel)]=\"zIndex\" [min]=\"0\" [max]=\"maxIndex\"\n           (onInput)=\"zIndexInput.emit(zIndex)\" (keydown.enter)=\"reloadAndPlot.emit()\"/>\n          <p-button icon=\"pi pi-refresh\" size=\"small\" [text]=\"true\" (onClick)=\"reloadAndPlot.emit()\"\n                    pTooltip=\"Plot this slice\" tooltipPosition=\"bottom\">\n          </p-button>\n        </div>\n        <span class=\"flex align-items-center mx-1 toolbar-text\">of {{maxIndex}}</span>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n\n    <!-- Image actions (special tools) -->\n    <ng-container *ngIf=\"tools.specialTools\">\n      <span class=\"toolbar-separator\"></span>\n      <p-button icon=\"pi pi-download\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Download image as PNG\" tooltipPosition=\"bottom\"\n                (onClick)=\"downloadImage.emit()\">\n      </p-button>\n      <p-button *ngIf=\"isHeatmap\" icon=\"pi pi-window-maximize\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Fit to view\" tooltipPosition=\"bottom\"\n                (onClick)=\"autoscaleImage.emit()\">\n      </p-button>\n    </ng-container>\n\n    <!-- Zoom tools. Plotly rubber-band drag-zoom: on OpenSeadragon the box-zoom\n         covers this and a bare drag pans natively, so it's hidden in image view. -->\n    <ng-container *ngIf=\"isHeatmap && tools.zoomTools\">\n      <span class=\"toolbar-separator\"></span>\n      <p-button *ngIf=\"!isImageView\" icon=\"pi pi-search\" size=\"small\"\n                [text]=\"activeDragMode !== 'zoom'\"\n                pTooltip=\"Zoom drag\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('zoom')\">\n      </p-button>\n      <p-button size=\"small\"\n                [text]=\"activeDragMode !== 'zoomToBox'\"\n                pTooltip=\"Zoom box (<kbd>b</kbd>)\" [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('zoomToBox')\">\n        <img src=\"assets/plotting/zoom-box.svg\"\n             [class]=\"activeDragMode === 'zoomToBox' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n             style=\"width: 1rem\"/>\n      </p-button>\n      <p-button icon=\"pi pi-arrows-alt\" size=\"small\"\n                [text]=\"activeDragMode !== 'pan'\"\n                pTooltip=\"Pan the image (<kbd>p</kbd>)\" [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('pan')\">\n      </p-button>\n      <p-button icon=\"pi pi-search-plus\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Zoom in (<kbd>+</kbd>)\" [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"zoomIn.emit()\">\n      </p-button>\n      <p-button icon=\"pi pi-search-minus\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Zoom out (<kbd>-</kbd>)\" [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"zoomOut.emit()\">\n      </p-button>\n    </ng-container>\n\n    <!-- Surface 3D controls -->\n    <ng-container *ngIf=\"!isHeatmap\">\n      <span class=\"toolbar-separator\"></span>\n      <p-button icon=\"pi pi-search\" size=\"small\"\n                [text]=\"activeSurface3dMode !== 'zoom'\"\n                pTooltip=\"Zoom\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleSurface3dMode.emit('zoom')\">\n      </p-button>\n      <p-button icon=\"pi pi-arrows-alt\" size=\"small\"\n                [text]=\"activeSurface3dMode !== 'pan'\"\n                pTooltip=\"Pan\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleSurface3dMode.emit('pan')\">\n      </p-button>\n      <p-button icon=\"pi pi-globe\" size=\"small\"\n                [text]=\"activeSurface3dMode !== 'orbit'\"\n                pTooltip=\"Orbital rotation\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleSurface3dMode.emit('orbit')\">\n      </p-button>\n      <p-button icon=\"pi pi-sync\" size=\"small\"\n                [text]=\"activeSurface3dMode !== 'turntable'\"\n                pTooltip=\"Turntable rotation\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleSurface3dMode.emit('turntable')\">\n      </p-button>\n      <p-button icon=\"pi pi-home\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Reset camera to default\" tooltipPosition=\"bottom\"\n                (onClick)=\"resetSurfaceCamera.emit()\">\n      </p-button>\n      <!-- 3D coordinate-axes / scale gizmo toggle (napari-js WebGPU volume/isosurface only).\n           `p-button-icon-only` gives the same square sizing as the neighbouring pi-icon buttons\n           (the projected <img> doesn't trigger PrimeNG's automatic icon-only sizing). -->\n      <p-button size=\"small\" *ngIf=\"isNapariMode\" styleClass=\"p-button-icon-only\"\n                [text]=\"!axesVisible\"\n                pTooltip=\"Toggle 3D axes / scale\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleAxes.emit()\">\n        <img src=\"assets/plotting/3d-coordinates.svg\"\n             [class]=\"axesVisible ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n             style=\"width: 1rem\"/>\n      </p-button>\n      <!-- Surface wireframe toggle (napari-js WebGPU surface only). -->\n      <p-button icon=\"pi pi-share-alt\" size=\"small\" *ngIf=\"isNapariSurfaceMode\"\n                [text]=\"!wireframeActive\"\n                pTooltip=\"Toggle wireframe\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleWireframe.emit()\">\n      </p-button>\n      <!-- Resolution (decimate factor) for the napari 3D types \u2014 reloads at coarser/finer sampling. -->\n      <ng-container *ngIf=\"isNapari3dMode\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Res</span>\n        <p-dropdown [options]=\"decimateOptions\" optionLabel=\"label\" optionValue=\"value\"\n                    [ngModel]=\"resolutionScale\" appendTo=\"body\"\n                    pTooltip=\"Resolution (decimate factor)\" tooltipPosition=\"bottom\"\n                    [style]=\"{'min-width': '6rem'}\"\n                    (onChange)=\"selectResolution.emit($event.value)\">\n        </p-dropdown>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"(isHeatmap || is3dRegions) && tools.regionTools\">\n      <span class=\"toolbar-separator\"></span>\n      <!-- Region Editor: opens the editor as a floating dialog (formerly the\n           right-panel Regions tab). Sits with the region drawing tools. -->\n      <p-button size=\"small\" [text]=\"true\"\n                pTooltip=\"Open the Region Editor\" tooltipPosition=\"bottom\"\n                (onClick)=\"openRegionEditor.emit()\">\n        <img src=\"assets/plotting/region-editor.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n      </p-button>\n      <!-- Region drawing tools -->\n      <p-button icon=\"pi pi-arrow-up-right\" size=\"small\"\n                [text]=\"activeDragMode !== 'select'\"\n                pTooltip=\"Selection mode (<kbd>s</kbd>)\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('select')\">\n      </p-button>\n      <p-button icon=\"pi pi-stop\" size=\"small\"\n                [text]=\"activeDragMode !== 'drawrect'\"\n                pTooltip=\"Draw a rectangular region (<kbd>r</kbd>)\" [escape]=\"false\"\n                tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('drawrect')\">\n      </p-button>\n      <p-button *ngIf=\"!is3dRegions\" size=\"small\"\n                [text]=\"activeDragMode !== 'drawopenpath'\"\n                pTooltip=\"Draw a polyline (<kbd>l</kbd>)\" [escape]=\"false\"\n                tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('drawopenpath')\">\n        <img src=\"assets/plotting/polyline.svg\"\n             [class]=\"activeDragMode === 'drawopenpath' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n             style=\"width: 1rem\"/>\n      </p-button>\n      <p-button icon=\"pi pi-pencil\" size=\"small\"\n                [text]=\"activeDragMode !== 'drawclosedpath'\"\n                pTooltip=\"Draw a freeform region (<kbd>f</kbd>)\" [escape]=\"false\"\n                tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('drawclosedpath')\">\n      </p-button>\n      <!-- Brush: paint a region by dragging a disc of the given size; the Size\n           slider appears while it's active. Hold Shift to erase (subtract). -->\n      <!-- Brush and polyline are absent from a 3D cloud: the brush paints in IMAGE\n                 pixels and there is no raster to sample, and an open polyline is a\n                 profile tool, not a closed region a selection can test against. -->\n            <p-button *ngIf=\"!is3dRegions\" size=\"small\"\n                [text]=\"activeDragMode !== 'brush'\"\n                pTooltip=\"Brush: click and drag to paint a region.\n                <br>Hold <kbd>Shift</kbd> while painting to erase from a region.\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('brush')\">\n        <img src=\"assets/plotting/paintbrush.svg\"\n             [class]=\"activeDragMode === 'brush' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n             style=\"width: 1rem\"/>\n      </p-button>\n      <ng-container *ngIf=\"activeDragMode === 'brush'\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Size</span>\n        <p-slider [(ngModel)]=\"brushSize\"\n                  [min]=\"brushSizeMin\" [max]=\"brushSizeMax\" [step]=\"brushSizeStep\"\n                  (onChange)=\"brushSizeChange.emit($event.value)\"\n                  pTooltip=\"Brush diameter in image pixels.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  styleClass=\"wand-sensitivity-slider\"></p-slider>\n        <span class=\"flex align-items-center mx-1 toolbar-text wand-sensitivity-value\">\n          {{ brushSize }}</span>\n      </ng-container>\n\n      <!-- Vertex editing \u2014 backends with a vertex-editing overlay (OSD + napari-js image). -->\n      <ng-container *ngIf=\"supportsRegionVertexTools\">\n        <p-button size=\"small\"\n                  [text]=\"activeDragMode !== 'drawpolygon'\"\n                  pTooltip=\"Polygon: click to place each vertex; click the first point to close\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  (onClick)=\"toggleDragMode.emit('drawpolygon')\">\n          <img src=\"assets/plotting/polygon-vertices.svg\"\n               [class]=\"activeDragMode === 'drawpolygon' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n               style=\"width: 1rem\"/>\n        </p-button>\n        <p-button size=\"small\"\n                  [text]=\"activeDragMode !== 'addpoint'\"\n                  pTooltip=\"Add a vertex: click an edge of the selected polygon\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  (onClick)=\"toggleDragMode.emit('addpoint')\">\n          <img src=\"assets/plotting/vertex-add.svg\"\n               [class]=\"activeDragMode === 'addpoint' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n               style=\"width: 1rem\"/>\n        </p-button>\n        <p-button size=\"small\"\n                  [text]=\"activeDragMode !== 'deletepoint'\"\n                  pTooltip=\"Delete a vertex: click a vertex of the selected polygon\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  (onClick)=\"toggleDragMode.emit('deletepoint')\">\n          <img src=\"assets/plotting/vertex-delete.svg\"\n               [class]=\"activeDragMode === 'deletepoint' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n               style=\"width: 1rem\"/>\n        </p-button>\n      </ng-container>\n\n      <p-button size=\"small\"\n                [text]=\"activeDragMode !== 'wand'\"\n                pTooltip=\"Wand: click and drag to grow a region by similar pixel values (<kbd>w</kbd>).\n                <br>Hold <kbd>Shift</kbd> while clicking or dragging on a region to erase pixels from it.\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('wand')\">\n        <img src=\"assets/plotting/wand.svg\"\n             [class]=\"activeDragMode === 'wand' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n             style=\"width: 1rem\"/>\n      </p-button>\n      <ng-container *ngIf=\"activeDragMode === 'wand'\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Sens.</span>\n        <p-slider [(ngModel)]=\"wandSensitivity\"\n                  [min]=\"wandSensitivityMin\" [max]=\"wandSensitivityMax\" [step]=\"wandSensitivityStep\"\n                  (onChange)=\"wandSensitivityChange.emit($event.value)\"\n                  pTooltip=\"Higher = stricter (smaller selection); lower = looser.\n                  Takes effect from the next click/drag tick.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  styleClass=\"wand-sensitivity-slider\"></p-slider>\n        <span class=\"flex align-items-center mx-1 toolbar-text wand-sensitivity-value\">\n          {{ wandSensitivity.toFixed(1) }}</span>\n      </ng-container>\n      <p-button icon=\"pi pi-eraser\" size=\"small\"\n                [text]=\"activeDragMode !== 'eraseVertex'\"\n                pTooltip=\"Vertex eraser (<kbd>e</kbd>): click or drag to remove polygon vertices inside\n                the cursor circle from any region.\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('eraseVertex')\">\n      </p-button>\n      <ng-container *ngIf=\"activeDragMode === 'eraseVertex'\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Radius</span>\n        <p-slider [(ngModel)]=\"vertexEraserRadius\"\n                  [min]=\"vertexEraserRadiusMin\" [max]=\"vertexEraserRadiusMax\" [step]=\"vertexEraserRadiusStep\"\n                  (onChange)=\"vertexEraserRadiusChange.emit($event.value)\"\n                  pTooltip=\"Eraser radius in image pixels.\n                  Vertices within this distance of the cursor are removed.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  styleClass=\"wand-sensitivity-slider\"></p-slider>\n        <span class=\"flex align-items-center mx-1 toolbar-text wand-sensitivity-value\">\n          {{ vertexEraserRadius }}</span>\n      </ng-container>\n      <p-button size=\"small\" [text]=\"true\"\n                [disabled]=\"!canUndo\"\n                pTooltip=\"Undo the last region action (<kbd>Ctrl</kbd>+<kbd>Z</kbd>).\n                Up to 10 actions can be undone.\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"undoRegion.emit()\">\n        <img src=\"assets/plotting/undo.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n      </p-button>\n      <p-button size=\"small\" [text]=\"true\"\n                [disabled]=\"!canRedo\"\n                pTooltip=\"Redo the last undone region action\n                (<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd> / <kbd>Ctrl</kbd>+<kbd>Y</kbd>).\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"redoRegion.emit()\">\n        <img src=\"assets/plotting/redo.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n      </p-button>\n      <p-button icon=\"pi pi-trash\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Delete selected region (<kbd>Del</kbd>)\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"deleteRegion.emit()\">\n      </p-button>\n      <!-- SAM (jit-ui#90): box-prompt segment, interactive point prompts, and a\n           model picker. -->\n      <span class=\"toolbar-separator\"></span>\n      <!-- SAM controls grouped: box-prompt Segment, then the point-prompt tool,\n           then the model-picker dropdown (the chevron) which governs BOTH tools.\n           Falls back to Segment + point with no model picker when none are set. -->\n      <span *ngIf=\"samModels.length; else segmentPlain\" class=\"p-buttonset segment-split\">\n        <p-button size=\"small\" [text]=\"true\"\n                  pTooltip=\"Segment the drawn rectangles with SAM (box prompt)\"\n                  tooltipPosition=\"bottom\"\n                  (onClick)=\"segmentRegions.emit()\">\n          <img src=\"assets/plotting/sam-box-prompt.svg\"\n               class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n        </p-button>\n        <ng-container [ngTemplateOutlet]=\"samPointBtn\"></ng-container>\n        <p-button icon=\"pi pi-chevron-down\" size=\"small\" [text]=\"true\"\n                  pTooltip=\"Pick the SAM model (used by both segment tools)\"\n                  tooltipPosition=\"bottom\"\n                  (onClick)=\"samModelMenu.toggle($event)\">\n        </p-button>\n      </span>\n      <ng-template #segmentPlain>\n        <span class=\"p-buttonset segment-split\">\n          <p-button size=\"small\" [text]=\"true\"\n                    pTooltip=\"Segment the drawn rectangles with SAM (box prompt)\"\n                    tooltipPosition=\"bottom\"\n                    (onClick)=\"segmentRegions.emit()\">\n            <img src=\"assets/plotting/sam-box-prompt.svg\"\n                 class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n          </p-button>\n          <ng-container [ngTemplateOutlet]=\"samPointBtn\"></ng-container>\n        </span>\n      </ng-template>\n      <!-- Point-prompt tool \u2014 shared between the models / no-models layouts so it\n           always sits just left of the model dropdown. -->\n      <ng-template #samPointBtn>\n        <p-button size=\"small\"\n                  [text]=\"activeDragMode !== 'samPoint'\"\n                  pTooltip=\"SAM point prompts: click a fiber to segment it as a new region;\n                  Shift/Alt-click to refine (exclude) the current one.<br>Esc undoes it.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  (onClick)=\"toggleDragMode.emit('samPoint')\">\n          <img src=\"assets/plotting/sam-point-prompt.svg\"\n               [class]=\"activeDragMode === 'samPoint' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n               style=\"width: 1rem\"/>\n        </p-button>\n      </ng-template>\n      <p-menu #samModelMenu styleClass=\"model-menu\" [model]=\"samMenuItems\" [popup]=\"true\" appendTo=\"body\">\n        <ng-template pTemplate=\"item\" let-item>\n          <ng-container [ngTemplateOutlet]=\"modelMenuItem\"\n                        [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n      </p-menu>\n\n      <!-- Shared item body for all three model pickers (SAM / YOLO / retinal):\n           the standard check-or-blank icon and label, plus an info icon carrying\n           the model's description as a hover tooltip. This replaced a single\n           \"About the SAM models\" overlay panel \u2014 per-model text sits next to the\n           model it describes, and YOLO/retinal get the same affordance.\n\n           p-menu puts its click handler on the wrapping `.p-menuitem-content`,\n           outside this template, so `command` still fires and the whole row stays\n           clickable \u2014 which is also why the info icon has to stop propagation, or\n           reading about a model would switch to it. -->\n      <ng-template #modelMenuItem let-item>\n        <a class=\"p-menuitem-link model-menu-item\">\n          <span class=\"p-menuitem-icon\" [ngClass]=\"item.icon\"></span>\n          <span class=\"p-menuitem-text\">{{ item.label }}</span>\n          <!-- `bottom` like every other tooltip in this toolbar, and for room:\n               these menus open under buttons that can sit near the right edge,\n               where a `right` tooltip has a few hundred px and squeezes its text\n               into a narrow column instead of using its max-width. -->\n          <!-- A focusable <button>, not a bare <i>. As an <i> the description\n               was reachable only by hovering a mouse: not tabbable, no\n               accessible name, nothing for a screen reader to announce \u2014 so\n               keyboard and AT users could pick a checkpoint but never read what\n               it was. PrimeNG's tooltip shows on focus as well as hover, so\n               making it a button restores it for free.\n\n               `aria-describedby` is deliberately not used: the tooltip is\n               rendered into `body` on demand and has no stable id to point at.\n               The description is carried on `aria-label` instead, which is\n               announced whether or not the tooltip is showing. It is stripped of\n               markup first, since the copy contains `<b>`/`<br>` for the visual\n               tooltip and those would otherwise be read out literally. -->\n          <button *ngIf=\"item.tooltip\" type=\"button\"\n                  class=\"pi pi-info-circle model-info-icon\"\n                  [attr.aria-label]=\"'About ' + item.label + ': ' + plainText(item.tooltip)\"\n                  [pTooltip]=\"item.tooltip\" [escape]=\"false\" tooltipPosition=\"bottom\"\n                  appendTo=\"body\" tooltipStyleClass=\"model-info-tooltip\"\n                  (click)=\"$event.stopPropagation()\"\n                  (keydown.enter)=\"$event.stopPropagation()\"\n                  (keydown.space)=\"$event.stopPropagation()\"></button>\n        </a>\n      </ng-template>\n      <p-button size=\"small\" [text]=\"true\"\n                pTooltip=\"Auto-segment cells inside each drawn rectangle (cellpose-SAM)\"\n                tooltipPosition=\"bottom\"\n                (onClick)=\"segmentCellpose.emit()\">\n        <img src=\"assets/plotting/cells.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n      </p-button>\n\n      <!-- Contributed no-prompt tools (TOOLBAR_TOOLS). Unlike the SAM and\n           cellpose tools these take no prompt \u2014 they sweep the whole current\n           view rather than being pointed at something \u2014 so there is nothing to\n           draw first. Each renders the same split button: run, pick checkpoint,\n           open parameters.\n\n           Nothing here names a specific tool. The library ships none; a host\n           registers them, which is what lets this package be published without\n           the closed model dependencies. -->\n      <ng-container *ngFor=\"let tool of contributedTools; trackBy: trackToolById\">\n        <span class=\"p-buttonset segment-split\">\n          <p-button size=\"small\" [text]=\"true\"\n                    [pTooltip]=\"tool.runTooltip\"\n                    tooltipPosition=\"bottom\"\n                    (onClick)=\"runTool.emit(tool.id)\">\n            <!-- `toolbar-icon-dark` is hardcoded rather than bound, unlike the\n                 toggle tools: these fire a run and have no active state. -->\n            <img *ngIf=\"tool.icon.src\" [src]=\"tool.icon.src\" class=\"toolbar-icon-dark\"\n                 style=\"width: 1rem\" [alt]=\"tool.label\" />\n            <i *ngIf=\"tool.icon.pi\" class=\"pi {{ tool.icon.pi }}\"></i>\n          </p-button>\n          <p-button icon=\"pi pi-chevron-down\" size=\"small\" [text]=\"true\"\n                    [pTooltip]=\"tool.modelTooltip || 'Pick the model'\"\n                    tooltipPosition=\"bottom\"\n                    (onClick)=\"toolMenu.toggle($event)\">\n          </p-button>\n          <p-button *ngIf=\"tool.params.length\"\n                    icon=\"pi pi-sliders-h\" size=\"small\" [text]=\"true\"\n                    [pTooltip]=\"tool.paramsTooltip || 'Parameters'\"\n                    tooltipPosition=\"bottom\"\n                    (onClick)=\"openToolParams.emit(tool.id)\">\n          </p-button>\n        </span>\n        <p-menu #toolMenu styleClass=\"model-menu\" [model]=\"toolMenuItems[tool.id] || []\"\n                [popup]=\"true\" appendTo=\"body\">\n          <ng-template pTemplate=\"item\" let-item>\n            <ng-container [ngTemplateOutlet]=\"modelMenuItem\"\n                          [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n          </ng-template>\n        </p-menu>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"tools.help\">\n      <span class=\"toolbar-separator\"></span>\n\n      <!-- Help -->\n      <p-button icon=\"pi pi-question-circle\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Help\" tooltipPosition=\"bottom\"\n                (onClick)=\"showHelp()\">\n      </p-button>\n    </ng-container>\n\n  </div>\n</p-toolbar>\n<p-dialog header=\"Plotting help\" [(visible)]=\"displayHelpDialog\" [modal]=\"true\" [style]=\"{width: '50vw'}\"\n          [maximizable]=\"true\" [draggable]=\"false\" [resizable]=\"false\">\n  <p>Click a file in the left-hand tree to display it. By default it opens in the\n    <b>Image</b> view \u2014 a natively tiled, deeply zoomable raster (OpenSeadragon) with a\n    navigator minimap and a physical-units scale bar. <b>Click the image to zoom</b> toward\n    the clicked point; scroll to zoom and drag to pan. When a stack is open, a slice slider\n    (Image view) or image-mode toggle (other views) appears. Regions can also be edited in the\n    <b>Region Editor</b>, opened with the\n    <img src=\"assets/plotting/region-editor.svg\" width=\"14\" height=\"14\" alt=\"Region Editor\"/>\n    toolbar button as a floating dialog. Drag the <i class=\"pi pi-bars\"></i> handle to detach\n    this toolbar into a floating window.\n  </p>\n\n  <h3>Plot-type dropdown</h3>\n  <p>\n    The <b>plot-type dropdown</b> switches how the file is visualized:\n    <b>Image</b>, <b>Heatmap</b>, <b>Contour</b>, <b>Surface</b>, <b>Volume</b>,\n    <b>Isosurface</b>, and \u2014 when a spatial-omics dataset is open \u2014\n    <b>Spatial omics</b> and <b>Spatial omics 3D</b>.\n  </p>\n  <p>\n    <b>Only the modes the data can actually support are offered</b>, so the list changes\n    with what is loaded rather than showing entries that would come up blank:\n  </p>\n  <ul>\n    <li><b>Contour</b>, <b>Volume</b> and <b>Isosurface</b> need a grayscale image; the\n      two 3D ones also need a z-stack.</li>\n    <li><b>Spatial omics</b> needs a published dataset, and <b>Spatial omics 3D</b> needs\n      one whose coordinates carry a z.</li>\n    <li>The pixel modes (<b>Image</b>, <b>Heatmap</b>, <b>Surface</b>) are withheld for a\n      dataset that brings no tissue image \u2014 seqFISH records coordinates and no section, so\n      there is nothing for them to draw.</li>\n  </ul>\n  <ul>\n    <li>\"<b>Isosurface band</b>\" slider (Isosurface): sets the intensity band the surfaces are\n      drawn for, mapped onto the volume's real intensity range.</li>\n    <li>\"<b>3D camera</b>\" (Surface / Scatter 3D / Isosurface): zoom <i class=\"pi pi-search\"></i>,\n      pan <i class=\"pi pi-arrows-alt\"></i>, orbit <i class=\"pi pi-globe\"></i>,\n      turntable <i class=\"pi pi-sync\"></i>, and reset camera <i class=\"pi pi-home\"></i>;\n      scroll to zoom the 3D scene.</li>\n  </ul>\n\n  <h3>Image manipulation tools</h3>\n  <ul>\n    <li>\"<b>Region Editor</b>\" <img src=\"assets/plotting/region-editor.svg\" width=\"15\" height=\"15\">:\n      opens the Region Editor as a floating, draggable dialog \u2014 a per-image table of every region\n      (class, colour, area) with bulk select/label/colour/delete and GeoJSON import/export. It stays\n      in sync with the image, so you can keep it open while drawing.</li>\n    <li>\"<b>Intensity profile lines</b>\" <img src=\"assets/plotting/spline-chart.svg\" width=\"15\" height=\"15\">\n      (<i>work in progress \u2014 not yet stable</i>): adds a coloured line ROI; a floating inset\n      chart plots intensity along each line, updates live as you drag it, and re-samples at the\n      current zoom resolution. Each added line gets its own colour; select a line and use the\n      trash tool <i class=\"pi pi-trash\"></i> to remove it (and its trace).</li>\n    <li>\"<b>Channels &amp; Histogram</b>\" <img src=\"assets/plotting/invert.svg\" width=\"15\" height=\"15\">:\n      opens a floating dialog for brightness/contrast, gamma, and per-channel display, plus the\n      <b>colormap / LUT</b> controls (grayscale only) \u2014 a <b>reverse</b> toggle and a colormap\n      dropdown (default: inverted greys).</li>\n    <li>\"<b>Smoothen</b>\" <img src=\"assets/plotting/smooth.svg\" width=\"15\" height=\"15\">\n      (Image view only): the image opens showing <b>raw pixels</b> (nearest-neighbour), so\n      zooming in renders crisp blocks for pixel inspection. Toggle this on for bilinear\n      smoothing; the icon turns white while smoothing is active.</li>\n  </ul>\n\n  <h3>Download &amp; view tools</h3>\n  <ul>\n    <li>\"<b>Download</b>\" <i class=\"pi pi-download\"></i>: download the current image as a PNG.</li>\n    <li>\"<b>Fit to view</b>\" / autoscale <i class=\"pi pi-window-maximize\"></i>: resets the image\n      to its original dimensions. In stack mode it also resets to single-image mode.</li>\n  </ul>\n\n  <h3>Zoom tools</h3>\n  <ul>\n    <li>\"<b>Zoom box</b>\" <img src=\"assets/plotting/zoom-box.svg\" width=\"15\" height=\"15\">\n      (<kbd>b</kbd>): drag a box to select an area to zoom into.</li>\n    <li>\"<b>Pan</b>\" <i class=\"pi pi-arrows-alt\"></i> (<kbd>p</kbd>): drag to pan the image.</li>\n    <li>\"<b>Zoom in</b>\" <i class=\"pi pi-search-plus\"></i> (<kbd>+</kbd>): zoom in one step.</li>\n    <li>\"<b>Zoom out</b>\" <i class=\"pi pi-search-minus\"></i> (<kbd>-</kbd>): zoom out one step,\n      stopping at the original image dimensions.</li>\n  </ul>\n\n  <h3>Region tools</h3>\n  <p>By default no tool is selected (all greyed-out); selecting a tool highlights it. The\n    vertex-editing tools (polygon, add/delete vertex, move, B\u00E9zier conversions) are available\n    in the <b>Image</b> view only. On a <b>donut</b> (a region with a hole), the inner-ring\n    vertices are editable too \u2014 drag, add, and delete them just like the outer ring.</p>\n  <ul>\n    <li>\"<b>Selection</b>\" <i class=\"pi pi-arrow-up-right\"></i> (<kbd>s</kbd>): a neutral mode\n      that turns off whatever drawing tool was active (wand, vertex eraser, rectangle, etc.).\n      Use it to step out of editing without picking another tool.</li>\n    <li>\"<b>Rectangular region</b>\" <i class=\"pi pi-stop\"></i> (<kbd>r</kbd>): click and drag to\n      create a rectangular region.</li>\n    <li>\"<b>Polyline</b>\" <img src=\"assets/plotting/polyline.svg\" width=\"14\" height=\"14\">\n      (<kbd>l</kbd>): draw an open (non-closed) polyline by clicking and dragging. Polylines can\n      be edited and exported to GeoJSON as a <code>LineString</code> feature.</li>\n    <li>\"<b>Freeform region</b>\" <i class=\"pi pi-pencil\"></i> (<kbd>f</kbd>): click and drag to\n      draw a closed freeform polygon.</li>\n    <li>\"<b>Brush</b>\" <img src=\"assets/plotting/paintbrush.svg\" width=\"15\" height=\"15\">: click\n      and drag to paint a region with a circular brush \u2014 the painted stroke is the region.\n      A <b>Size</b> slider (brush diameter, in image pixels) appears in the toolbar while the\n      brush is active. Hold <kbd>Shift</kbd> while painting to <b>erase</b> (subtract) from a\n      region instead. Painting over an existing region extends it; brushing across two regions\n      merges them. Painting a closed ring (or shift-erasing an interior pocket) leaves the\n      enclosed area empty \u2014 a <b>donut</b> (Image view).</li>\n    <li>\"<b>Polygon</b>\" <img src=\"assets/plotting/polygon-vertices.svg\" width=\"15\" height=\"15\">:\n      click to place each vertex; click the first point to close the polygon.</li>\n    <li>\"<b>Add vertex</b>\" <img src=\"assets/plotting/vertex-add.svg\" width=\"15\" height=\"15\">:\n      click an edge of the selected polygon to insert a new vertex.</li>\n    <li>\"<b>Delete vertex</b>\" <img src=\"assets/plotting/vertex-delete.svg\" width=\"15\" height=\"15\">:\n      click a vertex of the selected polygon to remove it.</li>\n    <li>\"<b>Move region</b>\" <img src=\"assets/plotting/region-move.svg\" width=\"15\" height=\"15\">:\n      drag to move the selected region.</li>\n    <li>\"<b>To B\u00E9zier</b>\" <img src=\"assets/plotting/to-bezier.svg\" width=\"15\" height=\"15\"> /\n      \"<b>To polygon</b>\" <img src=\"assets/plotting/to-polygon.svg\" width=\"15\" height=\"15\">:\n      convert the selected region to a smooth B\u00E9zier curve, or back to a straight-edged polygon.</li>\n    <li>\"<b>Wand</b>\" <img src=\"assets/plotting/wand.svg\" width=\"15\" height=\"15\"> (<kbd>w</kbd>):\n      click to grow a region from pixels with similar values around the click point. Hold\n      <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> for an exact-match flood fill; drag to keep extending the\n      selection while moving; hold <kbd>Shift</kbd> while clicking or dragging on an existing\n      region to <b>erase</b> pixels from it. Use the <b>Sens.</b> slider that appears to make the\n      wand stricter (higher = smaller selection) or looser. Subsequent clicks keep extending the\n      same region; clicking inside an existing region adopts it, and growing into another region\n      merges them.</li>\n    <li>\"<b>Vertex eraser</b>\" <i class=\"pi pi-eraser\"></i> (<kbd>e</kbd>): click or click-and-drag\n      to remove polygon vertices that fall inside the cursor circle from any region, including a\n      region's inner rings (donut holes). Use the <b>Radius</b> slider to set the eraser size in\n      image pixels. Polygons reduced below 3 vertices (or polylines below 2) are deleted entirely;\n      a hole reduced below 3 vertices is removed.</li>\n    <li>\"<b>Undo</b>\" <img src=\"assets/plotting/undo.svg\" width=\"15\" height=\"15\">\n      (<kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Z</kbd>): reverts the\n      last region action (draw, delete, edit, wand/brush stroke, segmentation, \u2026). Up to the last\n      <b>10</b> actions can be undone; the button greys out when there's nothing left to undo.</li>\n    <li>\"<b>Redo</b>\" <img src=\"assets/plotting/redo.svg\" width=\"15\" height=\"15\">\n      (<kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd> or <kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Y</kbd>):\n      re-applies the most recently undone action. Performing a new region action clears what can be redone.</li>\n    <li>\"<b>Delete region</b>\" <i class=\"pi pi-trash\"></i> (<kbd>Del</kbd>): deletes the selected\n      region. This can also be done from the Region Editor.</li>\n  </ul>\n\n  <h3>Region actions (right-click the image)</h3>\n  <p>Right-click a region \u2014 or the current multi-selection \u2014 to open the\n    \"<b>Selected region(s)</b>\" group at the top of the context menu. These act immediately on\n    the selection (they're not drawing modes) and are fully undo/redo-able:</p>\n  <ul>\n    <li>\"<b>Select all regions</b>\" <i class=\"pi pi-check-square\"></i>: select every region on\n      the image (also in the Region Editor toolbar).</li>\n    <li>\"<b>Merge / group</b>\": combine 2+ selected regions into one. If the pieces don't touch,\n      the result is a single multi-part region (sparse \"bits\").</li>\n    <li>\"<b>Ungroup</b>\": split a multi-part region back into one region per piece.</li>\n    <li>\"<b>Inverse</b>\": replace the selection with everything <i>outside</i> it \u2014 the image\n      rectangle with the selected regions punched out as holes. Works at any image size.</li>\n    <li>\"<b>Simplify</b>\": reduce a region's vertex count (Douglas\u2013Peucker) by an altitude\n      threshold in pixels \u2014 pick <b>Light</b> (1&nbsp;px), <b>Medium</b> (3&nbsp;px),\n      <b>Strong</b> (8&nbsp;px), or <b>Custom\u2026</b> for a slider. Applies to the exterior and any\n      holes (and every part of a multi-part region).</li>\n    <li>The B\u00E9zier conversions and Delete also live in this group (the right-click equivalents of\n      the toolbar / vertex tools above).</li>\n  </ul>\n\n  <h3>Segmentation &amp; detection tools</h3>\n  <p>AI-assisted segmentation and detection that run entirely in the browser. The first run\n    of any model downloads it (a progress toast is shown); it's then cached.</p>\n  <p>Two shapes of tool: the <b>prompted</b> ones (Segment, Point prompts, Cellpose) act on\n    rectangles you draw, and generated regions inherit the color of the rectangle they came\n    from<span *ngIf=\"contributedTools.length\">; the <b>no-prompt</b> ones ({{ contributedToolNames }})\n    sweep the whole current view, so there is nothing to draw first</span>.</p>\n  <p>Each model dropdown <i class=\"pi pi-chevron-down\"></i> lists the available checkpoints with\n    a <i class=\"pi pi-info-circle\"></i> beside each one \u2014 hover it for that model's size, speed,\n    training domain and accuracy, so you can pick without leaving the toolbar.</p>\n  <ul>\n    <li>\"<b>Segment</b>\" <img src=\"assets/plotting/sam-box-prompt.svg\" width=\"15\" height=\"15\">\n      (box prompt): draw one or more <b>Rectangular regions</b> around the objects of interest,\n      then click Segment. Each rectangle is replaced by the SAM mask of the object inside it.</li>\n    <li>\"<b>Point prompts</b>\" <img src=\"assets/plotting/sam-point-prompt.svg\" width=\"15\" height=\"15\">: click directly on an object to\n      segment it as a <b>new</b> region. Each click starts a fresh object \u2014 clicking another\n      object won't grow the previous one. <kbd>Shift</kbd>/<kbd>Alt</kbd>-click adds an\n      <i>exclude</i> point that refines the current object; <kbd>Esc</kbd> undoes it,\n      <kbd>Enter</kbd> commits it.</li>\n    <li>\"<b>Model picker</b>\" <i class=\"pi pi-chevron-down\"></i>: the dropdown attached to the\n      Segment button chooses the SAM model \u2014 <b>micro-sam ViT-T</b> (default; small, fast) or\n      <b>micro-sam ViT-B</b> (larger, highest accuracy) for light microscopy, or\n      <b>patho-sam ViT-B</b> for histopathology (H&amp;E / stained tissue). All are promptable\n      Segment Anything models finetuned for biomedical images; they differ in the <i>image\n      encoder</i> (the heavy once-per-image step) and the training domain \u2014 box and point\n      prompting behave the same. The choice applies to <i>both</i> the box and point tools, and\n      each tool loads its own encoder, so the first click after switching re-encodes once.</li>\n    <li>\"<b>Cellpose</b>\" <img src=\"assets/plotting/cells.svg\" width=\"15\" height=\"15\">: draw rectangles, then click Cellpose to\n      automatically segment every cell inside each rectangle (client-side cellpose-SAM) \u2014 one\n      region per detected cell. No clicking on individual cells needed.</li>\n    <!-- Contributed tools describe themselves. This library ships none, so an\n         open build's help lists only the prompted tools above \u2014 the text no\n         longer promises buttons that are not there. -->\n    <ng-container *ngFor=\"let tool of contributedTools\">\n      <li *ngIf=\"tool.help\" [innerHTML]=\"tool.help.body\"></li>\n    </ng-container>\n    <ng-container *ngFor=\"let tool of dialogTools\">\n      <li *ngIf=\"tool.help\" [innerHTML]=\"tool.help.body\"></li>\n    </ng-container>\n  </ul>\n\n  <h3>Spatial omics</h3>\n  <p>\n    In <b>Spatial omics</b> mode each observation \u2014 a cell or a Visium spot \u2014 is drawn at\n    its own coordinates, over the tissue image where the dataset registers onto one. The\n    <img src=\"assets/plotting/spatial-omics.svg\" width=\"14\" height=\"14\" alt=\"Spatial omics\"/>\n    panel colours them by a <b>column</b> (a cell type, a cluster) or by a <b>gene</b>, and\n    the two are exclusive so what drives the colours is never ambiguous.\n  </p>\n  <ul>\n    <li>\"<b>Select from ROIs</b>\": turns the regions you have drawn into a selection of\n      observations. Everything else then follows that selection.</li>\n    <li>\"<b>Point size</b>\" / \"<b>Opacity</b>\": how the markers are drawn, not what is\n      selected.</li>\n  </ul>\n\n  <h3>Distribution charts</h3>\n  <p>\n    The <b>Distribution</b> section of the spatial-omics panel charts whatever the map is\n    coloured by, so the two can never disagree. Each tab answers a different question, and\n    the <i class=\"pi pi-question-circle\"></i> beside them explains the one on screen \u2014\n    including what it must <em>not</em> be read for.\n  </p>\n  <ul>\n    <li>\"<b>Counts</b>\": how many observations per category. A category is a label, not a\n      magnitude, so a frequency is the only distribution it has.</li>\n    <li>\"<b>Histogram</b>\" / \"<b>Violin</b>\" / \"<b>Box</b>\": how a continuous value is\n      distributed \u2014 over everything, or split by a grouping column.</li>\n    <li>\"<b>Heatmap</b>\": mean expression of the genes you pick within each group.\n      Z-scored per gene by default, so a colour means \"above or below this gene's own\n      average\" rather than \"highly expressed\".</li>\n    <li>\"<b>Embedding</b>\": a UMAP, PCA or t-SNE over the same cells. <b>Lasso it to\n      select on the map</b> \u2014 both views read the same selection. Only PCA labels its axes\n      with a percentage, because only its axes explain a measurable share of the variance;\n      UMAP and t-SNE coordinates are arbitrary, so distance between distant clusters\n      should not be read.</li>\n    <li>\"<b>Detach</b>\": moves the charts into their own window so they can sit beside the\n      map instead of inside the panel. Switching tabs keeps the window where it is.</li>\n  </ul>\n\n  <h3>Help</h3>\n  <p>\"<b>Help</b>\" <i class=\"pi pi-question-circle\"></i>: opens this dialog.</p>\n\n  <h3>Keyboard shortcuts</h3>\n  <table class=\"shortcuts-table\">\n    <tr><td><kbd>+</kbd> / <kbd>=</kbd></td><td>Zoom in</td></tr>\n    <tr><td><kbd>-</kbd></td><td>Zoom out</td></tr>\n    <tr><td><kbd>b</kbd></td><td>Toggle zoom box mode</td></tr>\n    <tr><td><kbd>p</kbd></td><td>Toggle pan mode</td></tr>\n    <tr><td><kbd>f</kbd></td><td>Toggle freeform region drawing</td></tr>\n    <tr><td><kbd>l</kbd></td><td>Toggle polyline drawing</td></tr>\n    <tr><td><kbd>r</kbd></td><td>Toggle rectangular region drawing</td></tr>\n    <tr><td><kbd>w</kbd></td><td>Toggle wand tool</td></tr>\n    <tr><td>Wand + <kbd>Shift</kbd></td><td>Erase pixels from the active region</td></tr>\n    <tr><td>Wand + <kbd>Ctrl</kbd>/<kbd>Cmd</kbd></td><td>Exact-match flood fill (no smoothing)</td></tr>\n    <tr><td><kbd>e</kbd></td><td>Toggle vertex eraser</td></tr>\n    <tr><td><kbd>s</kbd></td><td>Selection mode (deactivates drawing tools)</td></tr>\n    <tr><td>Point prompt + <kbd>Shift</kbd>/<kbd>Alt</kbd></td><td>Add an exclude point (refine the current object)</td></tr>\n    <tr><td><kbd>Enter</kbd></td><td>Commit the current SAM point object</td></tr>\n    <tr><td><kbd>Esc</kbd></td><td>Undo the current SAM point object</td></tr>\n    <tr><td><kbd>Del</kbd> / <kbd>\u232B</kbd></td><td>Delete selected region</td></tr>\n    <tr><td><kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Z</kbd></td><td>Undo the last region action (up to 10)</td></tr>\n    <tr><td><kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd> / <kbd>Ctrl</kbd>+<kbd>Y</kbd></td><td>Redo the last undone region action</td></tr>\n  </table>\n\n  <ng-template pTemplate=\"footer\">\n    <p-button icon=\"pi pi-check\" (click)=\"displayHelpDialog=false\" label=\"Ok\" styleClass=\"p-button-text\">\n    </p-button>\n  </ng-template>\n</p-dialog>\n", styles: [":host{display:block}:host ::ng-deep .p-toolbar{padding:.25rem .5rem}.toolbar-text{color:var(--primary-color);font-size:.875rem}::ng-deep .toolbar-input .p-inputtext{color:var(--primary-color);border-color:var(--primary-color)}.toolbar-separator{border-left:1px solid var(--surface-border);height:1.5rem;margin:0 .25rem;align-self:center}.toolbar-icon-dark{filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}.toolbar-icon-active{filter:brightness(0) invert(1)}::ng-deep .plotmode-item{display:inline-flex;align-items:center;gap:.5rem;color:#000}::ng-deep .plotmode-item i{font-size:1rem;color:var(--primary-color)}::ng-deep .plotmode-item .plotmode-icon-img{width:1.1rem;height:1.1rem;object-fit:contain;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .p-menu.model-menu{width:auto;min-width:12.5rem}::ng-deep .model-menu-item{display:flex;align-items:center;gap:.5rem}::ng-deep .model-menu-item .p-menuitem-text{flex:1 1 auto;white-space:nowrap}::ng-deep .model-menu-item .model-info-icon{flex:0 0 auto;font-size:.875rem;opacity:.55;cursor:help;appearance:none;background:none;border:0;padding:0;margin:0;color:inherit;line-height:1}::ng-deep .model-menu-item .model-info-icon:hover{opacity:1}::ng-deep .model-menu-item .model-info-icon:focus-visible{opacity:1;outline:2px solid var(--primary-color, #2196f3);outline-offset:2px;border-radius:2px}::ng-deep .model-info-tooltip .p-tooltip-text{min-width:18rem;max-width:24rem;line-height:1.4}::ng-deep .wand-sensitivity-slider{width:8rem;align-self:center;margin:0 .25rem}.wand-sensitivity-value{min-width:2rem;text-align:right}span.colormap{width:50px;height:auto;display:inline-block}img.colormap{width:50px;height:auto}.colormap{background:no-repeat;background-size:100%;vertical-align:middle}kbd{background:#e8e8e8;border:1px solid #bbb;border-radius:3px;padding:1px 5px;font-family:monospace;font-size:.85em}.shortcuts-table{border-collapse:collapse}.shortcuts-table td{padding:.25rem .75rem .25rem 0;vertical-align:middle}.shortcuts-table td:first-child{white-space:nowrap}\n"] }]
+            args: [{ selector: 'plotting-toolbar', template: "<p-toolbar>\n  <div class=\"p-toolbar-group-start flex-wrap align-items-center gap-1\">\n\n    <!-- Host-provided custom toolbar buttons, shown first (e.g. app-specific\n         actions the visualization view itself doesn't own). -->\n    <ng-content></ng-content>\n\n    <!-- Contributed dialog tools (TOOLBAR_TOOLS, kind: 'dialog'): app-level actions\n         like the host's own buttons above, so they sit right beside them. Image view\n         only, the view their dialog draws over. Highlighted while the dialog is open. -->\n    <ng-container *ngIf=\"isImageView\">\n      <p-button *ngFor=\"let tool of dialogTools; trackBy: trackToolById\"\n                size=\"small\" [text]=\"openDialogToolId !== tool.id\"\n                [pTooltip]=\"tool.tooltip\" tooltipPosition=\"bottom\"\n                [ariaLabel]=\"tool.label\"\n                [attr.aria-pressed]=\"openDialogToolId === tool.id\"\n                (onClick)=\"toggleDialogTool.emit(tool.id)\">\n        <img *ngIf=\"tool.icon.src\" [src]=\"tool.icon.src\" style=\"width: 1rem\" [alt]=\"tool.label\"\n             [class]=\"openDialogToolId === tool.id ? 'toolbar-icon-active' : 'toolbar-icon-dark'\" />\n        <i *ngIf=\"tool.icon.pi\" class=\"pi {{ tool.icon.pi }}\"></i>\n      </p-button>\n    </ng-container>\n\n    <!-- Plot type: available for any image (grayscale or RGB), and for a spatial dataset\n         that brings none (its spatial modes are still a choice). -->\n    <ng-container *ngIf=\"showPlotTypes\">\n      <span class=\"toolbar-separator\"></span>\n      <p-dropdown [options]=\"plotTypeOptions\" optionLabel=\"label\" optionValue=\"type\"\n                  [(ngModel)]=\"selectedPlotType\" appendTo=\"body\"\n                  pTooltip=\"Select plot type\" tooltipPosition=\"bottom\"\n                  [style]=\"{'min-width': '11rem'}\"\n                  styleClass=\"plotmode-dropdown\" panelStyleClass=\"plotmode-panel\"\n                  (onChange)=\"selectPlotType.emit($event.value)\">\n        <ng-template let-opt pTemplate=\"selectedItem\">\n          <span class=\"plotmode-item\" *ngIf=\"opt\">\n            <i *ngIf=\"isPiIcon(opt.icon)\" [class]=\"opt.icon\"></i>\n            <img *ngIf=\"opt.icon && !isPiIcon(opt.icon)\" class=\"plotmode-icon-img\" [src]=\"opt.icon\" alt=\"\" />\n            <span>{{ opt.label }}</span>\n          </span>\n        </ng-template>\n        <ng-template let-opt pTemplate=\"item\">\n          <span class=\"plotmode-item\">\n            <i *ngIf=\"isPiIcon(opt.icon)\" [class]=\"opt.icon\"></i>\n            <img *ngIf=\"opt.icon && !isPiIcon(opt.icon)\" class=\"plotmode-icon-img\" [src]=\"opt.icon\" alt=\"\" />\n            <span>{{ opt.label }}</span>\n          </span>\n        </ng-template>\n      </p-dropdown>\n      <ng-container *ngIf=\"isIsosurfaceMode\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Iso</span>\n        <p-slider [(ngModel)]=\"isoRange\" [range]=\"true\"\n                  [min]=\"isoValueMin\" [max]=\"isoValueMax\" [step]=\"isoValueStep\"\n                  (onChange)=\"isoRangeChange.emit($event.values)\"\n                  pTooltip=\"Isosurface band (0\u2013255), mapped onto the volume's\n                  actual intensity range. Surfaces are drawn for voxels whose\n                  intensity falls in the selected band \u2014 narrow it to isolate\n                  features, widen it to see the whole structure.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  styleClass=\"wand-sensitivity-slider\"></p-slider>\n        <span class=\"flex align-items-center mx-1 toolbar-text wand-sensitivity-value\">\n          {{ isoRange[0] }}\u2013{{ isoRange[1] }}</span>\n      </ng-container>\n      <!-- Intensity tools (Heatmap / Image mode): add another colored line ROI.\n           Each added line gets the next bright palette colour and its own inset\n           trace; select a line on the image and use the trash tool to remove it\n           (and its trace). The lines are Region-based but excluded from the\n           Region Editor and exports. -->\n      <ng-container *ngIf=\"isIntensityCapable\">\n        <span class=\"toolbar-separator\"></span>\n        <p-button size=\"small\" [text]=\"true\"\n                  pTooltip=\"Add an intensity line (new colour). Click a line to select it,\n                  then use the trash tool to remove it.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  (onClick)=\"addProfileLine.emit()\">\n          <img src=\"assets/plotting/spline-chart.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n        </p-button>\n      </ng-container>\n    </ng-container>\n    <!-- Channels & Histogram: brightness/contrast, gamma, per-channel display,\n         colormap/reverse/invert \u2014 opens the floating dialog. -->\n    <p-button *ngIf=\"tools.specialTools\" pRipple size=\"small\" [text]=\"true\"\n              pTooltip=\"Channels &amp; Histogram (brightness/contrast, colormap)\"\n              tooltipPosition=\"bottom\"\n              (onClick)=\"openChannelHistogram.emit()\">\n      <img src=\"assets/plotting/invert.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n    </p-button>\n\n    <!-- Spatial-omics controls. Only meaningful in the spatial mode, which is\n         itself only offered while a dataset is loaded \u2014 so this button appears\n         exactly when there is something for it to control. -->\n    <p-button *ngIf=\"tools.specialTools && isSpatialMode\" pRipple size=\"small\" [text]=\"true\"\n              pTooltip=\"Spatial omics (colour by column or gene, legend, selection, distributions)\"\n              tooltipPosition=\"bottom\"\n              (onClick)=\"openSpatialControls.emit()\">\n      <img src=\"assets/plotting/spatial-omics.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n    </p-button>\n\n    <!-- Smoothen toggle: bilinear smoothing vs nearest-neighbour raw pixels (Image\n         view only \u2014 it's an OpenSeadragon drawer setting). Highlighted when smoothing on. -->\n    <p-button *ngIf=\"tools.specialTools && isImageView\" size=\"small\"\n              [text]=\"!imageSmoothingEnabled\"\n              pTooltip=\"Smoothen (turn on image smoothing)\" tooltipPosition=\"bottom\"\n              (onClick)=\"toggleImageSmoothing.emit()\">\n      <img src=\"assets/plotting/smooth.svg\" style=\"width: 1rem\"\n           [class]=\"imageSmoothingEnabled ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"/>\n    </p-button>\n\n    <!-- Stack controls -->\n    <ng-container *ngIf=\"imageInfo?.isStack\">\n      <span class=\"toolbar-separator\"></span>\n      <!-- Image view: scrub z-slices live (the renderer swaps slices in place). -->\n      <ng-container *ngIf=\"showsLiveSliceScrubber\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Slice</span>\n        <p-slider [(ngModel)]=\"zIndex\" [min]=\"0\" [max]=\"maxIndex\"\n                  (onChange)=\"zScrub.emit($event.value)\" (onSlideEnd)=\"zSlide.emit($event.value)\"\n                  pTooltip=\"Slice through the stack (\u2190 / \u2192 keys)\" tooltipPosition=\"bottom\"\n                  [style]=\"{'width':'16rem'}\" styleClass=\"wand-sensitivity-slider\"></p-slider>\n        <span class=\"flex align-items-center mx-1 toolbar-text\">{{zIndex}} of {{maxIndex}}</span>\n      </ng-container>\n      <!-- Heatmap view: single-image (high-def zoom) vs stack (frame slider). Plotly-only \u2014\n           hidden for napari, which has no single/stack toggle or per-frame fetch, and for the\n           spatial-omics modes: a 3D omics dataset publishes its reference volume as a z-stack\n           image, and these modes draw observations, not one of its slices. -->\n      <ng-container *ngIf=\"!showsLiveSliceScrubber && !isNapariMode && !isSpatialMode\">\n      <p-button icon=\"pi pi-image\" size=\"small\"\n                [text]=\"imageInfo?.showStack\"\n                pTooltip=\"Single image mode: enables high-def zoom\" tooltipPosition=\"bottom\"\n                (onClick)=\"selectStackOption.emit(stackOptions[0])\">\n      </p-button>\n      <p-button icon=\"pi pi-images\" size=\"small\"\n                [text]=\"!imageInfo?.showStack\"\n                pTooltip=\"Stack mode, enables slicing through image frames\" tooltipPosition=\"bottom\"\n                (onClick)=\"selectStackOption.emit(stackOptions[1])\">\n      </p-button>\n      <ng-container *ngIf=\"!imageInfo?.showStack\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Slice</span>\n        <div class=\"p-inputgroup\" style=\"width: auto\">\n          <p-inputNumber styleClass=\"w-3rem toolbar-input\"\n\t\t\t\t\tpTooltip=\"View image in stack (&#x23CE;)\"\n\t\t\t\t\t[(ngModel)]=\"zIndex\" [min]=\"0\" [max]=\"maxIndex\"\n           (onInput)=\"zIndexInput.emit(zIndex)\" (keydown.enter)=\"reloadAndPlot.emit()\"/>\n          <p-button icon=\"pi pi-refresh\" size=\"small\" [text]=\"true\" (onClick)=\"reloadAndPlot.emit()\"\n                    pTooltip=\"Plot this slice\" tooltipPosition=\"bottom\">\n          </p-button>\n        </div>\n        <span class=\"flex align-items-center mx-1 toolbar-text\">of {{maxIndex}}</span>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n\n    <!-- Image actions (special tools) -->\n    <ng-container *ngIf=\"tools.specialTools\">\n      <span class=\"toolbar-separator\"></span>\n      <p-button icon=\"pi pi-download\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Download image as PNG\" tooltipPosition=\"bottom\"\n                (onClick)=\"downloadImage.emit()\">\n      </p-button>\n      <p-button *ngIf=\"isHeatmap\" icon=\"pi pi-window-maximize\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Fit to view\" tooltipPosition=\"bottom\"\n                (onClick)=\"autoscaleImage.emit()\">\n      </p-button>\n    </ng-container>\n\n    <!-- Zoom tools. Plotly rubber-band drag-zoom: on OpenSeadragon the box-zoom\n         covers this and a bare drag pans natively, so it's hidden in image view. -->\n    <ng-container *ngIf=\"isHeatmap && tools.zoomTools\">\n      <span class=\"toolbar-separator\"></span>\n      <p-button *ngIf=\"!isImageView\" icon=\"pi pi-search\" size=\"small\"\n                [text]=\"activeDragMode !== 'zoom'\"\n                pTooltip=\"Zoom drag\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('zoom')\">\n      </p-button>\n      <p-button size=\"small\"\n                [text]=\"activeDragMode !== 'zoomToBox'\"\n                pTooltip=\"Zoom box (<kbd>b</kbd>)\" [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('zoomToBox')\">\n        <img src=\"assets/plotting/zoom-box.svg\"\n             [class]=\"activeDragMode === 'zoomToBox' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n             style=\"width: 1rem\"/>\n      </p-button>\n      <p-button icon=\"pi pi-arrows-alt\" size=\"small\"\n                [text]=\"activeDragMode !== 'pan'\"\n                pTooltip=\"Pan the image (<kbd>p</kbd>)\" [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('pan')\">\n      </p-button>\n      <p-button icon=\"pi pi-search-plus\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Zoom in (<kbd>+</kbd>)\" [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"zoomIn.emit()\">\n      </p-button>\n      <p-button icon=\"pi pi-search-minus\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Zoom out (<kbd>-</kbd>)\" [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"zoomOut.emit()\">\n      </p-button>\n    </ng-container>\n\n    <!-- Surface 3D controls -->\n    <ng-container *ngIf=\"!isHeatmap\">\n      <span class=\"toolbar-separator\"></span>\n      <p-button icon=\"pi pi-search\" size=\"small\"\n                [text]=\"activeSurface3dMode !== 'zoom'\"\n                pTooltip=\"Zoom\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleSurface3dMode.emit('zoom')\">\n      </p-button>\n      <p-button icon=\"pi pi-arrows-alt\" size=\"small\"\n                [text]=\"activeSurface3dMode !== 'pan'\"\n                pTooltip=\"Pan\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleSurface3dMode.emit('pan')\">\n      </p-button>\n      <p-button icon=\"pi pi-globe\" size=\"small\"\n                [text]=\"activeSurface3dMode !== 'orbit'\"\n                pTooltip=\"Orbital rotation\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleSurface3dMode.emit('orbit')\">\n      </p-button>\n      <p-button icon=\"pi pi-sync\" size=\"small\"\n                [text]=\"activeSurface3dMode !== 'turntable'\"\n                pTooltip=\"Turntable rotation\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleSurface3dMode.emit('turntable')\">\n      </p-button>\n      <p-button icon=\"pi pi-home\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Reset camera to default\" tooltipPosition=\"bottom\"\n                (onClick)=\"resetSurfaceCamera.emit()\">\n      </p-button>\n      <!-- 3D coordinate-axes / scale gizmo toggle (napari-js WebGPU volume/isosurface only).\n           `p-button-icon-only` gives the same square sizing as the neighbouring pi-icon buttons\n           (the projected <img> doesn't trigger PrimeNG's automatic icon-only sizing). -->\n      <p-button size=\"small\" *ngIf=\"isNapariMode\" styleClass=\"p-button-icon-only\"\n                [text]=\"!axesVisible\"\n                pTooltip=\"Toggle 3D axes / scale\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleAxes.emit()\">\n        <img src=\"assets/plotting/3d-coordinates.svg\"\n             [class]=\"axesVisible ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n             style=\"width: 1rem\"/>\n      </p-button>\n      <!-- Surface wireframe toggle (napari-js WebGPU surface only). -->\n      <p-button icon=\"pi pi-share-alt\" size=\"small\" *ngIf=\"isNapariSurfaceMode\"\n                [text]=\"!wireframeActive\"\n                pTooltip=\"Toggle wireframe\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleWireframe.emit()\">\n      </p-button>\n      <!-- Resolution (decimate factor) for the napari 3D types \u2014 reloads at coarser/finer sampling. -->\n      <ng-container *ngIf=\"isNapari3dMode\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Res</span>\n        <p-dropdown [options]=\"decimateOptions\" optionLabel=\"label\" optionValue=\"value\"\n                    [ngModel]=\"resolutionScale\" appendTo=\"body\"\n                    pTooltip=\"Resolution (decimate factor)\" tooltipPosition=\"bottom\"\n                    [style]=\"{'min-width': '6rem'}\"\n                    (onChange)=\"selectResolution.emit($event.value)\">\n        </p-dropdown>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"(isHeatmap || is3dRegions) && tools.regionTools\">\n      <span class=\"toolbar-separator\"></span>\n      <!-- Region Editor: opens the editor as a floating dialog (formerly the\n           right-panel Regions tab). Sits with the region drawing tools. -->\n      <p-button size=\"small\" [text]=\"true\"\n                pTooltip=\"Open the Region Editor\" tooltipPosition=\"bottom\"\n                (onClick)=\"openRegionEditor.emit()\">\n        <img src=\"assets/plotting/region-editor.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n      </p-button>\n      <!-- Region drawing tools -->\n      <p-button icon=\"pi pi-arrow-up-right\" size=\"small\"\n                [text]=\"activeDragMode !== 'select'\"\n                pTooltip=\"Selection mode (<kbd>s</kbd>)\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('select')\">\n      </p-button>\n      <p-button icon=\"pi pi-stop\" size=\"small\"\n                [text]=\"activeDragMode !== 'drawrect'\"\n                pTooltip=\"Draw a rectangular region (<kbd>r</kbd>)\" [escape]=\"false\"\n                tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('drawrect')\">\n      </p-button>\n      <p-button *ngIf=\"!is3dRegions\" size=\"small\"\n                [text]=\"activeDragMode !== 'drawopenpath'\"\n                pTooltip=\"Draw a polyline (<kbd>l</kbd>)\" [escape]=\"false\"\n                tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('drawopenpath')\">\n        <img src=\"assets/plotting/polyline.svg\"\n             [class]=\"activeDragMode === 'drawopenpath' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n             style=\"width: 1rem\"/>\n      </p-button>\n      <p-button icon=\"pi pi-pencil\" size=\"small\"\n                [text]=\"activeDragMode !== 'drawclosedpath'\"\n                pTooltip=\"Draw a freeform region (<kbd>f</kbd>)\" [escape]=\"false\"\n                tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('drawclosedpath')\">\n      </p-button>\n      <!-- Brush: paint a region by dragging a disc of the given size; the Size\n           slider appears while it's active. Hold Shift to erase (subtract). -->\n      <!-- Brush and polyline are absent from a 3D cloud: the brush paints in IMAGE\n                 pixels and there is no raster to sample, and an open polyline is a\n                 profile tool, not a closed region a selection can test against. -->\n            <p-button *ngIf=\"!is3dRegions\" size=\"small\"\n                [text]=\"activeDragMode !== 'brush'\"\n                pTooltip=\"Brush: click and drag to paint a region.\n                <br>Hold <kbd>Shift</kbd> while painting to erase from a region.\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('brush')\">\n        <img src=\"assets/plotting/paintbrush.svg\"\n             [class]=\"activeDragMode === 'brush' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n             style=\"width: 1rem\"/>\n      </p-button>\n      <ng-container *ngIf=\"activeDragMode === 'brush'\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Size</span>\n        <p-slider [(ngModel)]=\"brushSize\"\n                  [min]=\"brushSizeMin\" [max]=\"brushSizeMax\" [step]=\"brushSizeStep\"\n                  (onChange)=\"brushSizeChange.emit($event.value)\"\n                  pTooltip=\"Brush diameter in image pixels.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  styleClass=\"wand-sensitivity-slider\"></p-slider>\n        <span class=\"flex align-items-center mx-1 toolbar-text wand-sensitivity-value\">\n          {{ brushSize }}</span>\n      </ng-container>\n\n      <!-- Vertex editing \u2014 backends with a vertex-editing overlay (OSD + napari-js image). -->\n      <ng-container *ngIf=\"supportsRegionVertexTools\">\n        <p-button size=\"small\"\n                  [text]=\"activeDragMode !== 'drawpolygon'\"\n                  pTooltip=\"Polygon: click to place each vertex; click the first point to close\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  (onClick)=\"toggleDragMode.emit('drawpolygon')\">\n          <img src=\"assets/plotting/polygon-vertices.svg\"\n               [class]=\"activeDragMode === 'drawpolygon' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n               style=\"width: 1rem\"/>\n        </p-button>\n        <p-button size=\"small\"\n                  [text]=\"activeDragMode !== 'addpoint'\"\n                  pTooltip=\"Add a vertex: click an edge of the selected polygon\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  (onClick)=\"toggleDragMode.emit('addpoint')\">\n          <img src=\"assets/plotting/vertex-add.svg\"\n               [class]=\"activeDragMode === 'addpoint' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n               style=\"width: 1rem\"/>\n        </p-button>\n        <p-button size=\"small\"\n                  [text]=\"activeDragMode !== 'deletepoint'\"\n                  pTooltip=\"Delete a vertex: click a vertex of the selected polygon\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  (onClick)=\"toggleDragMode.emit('deletepoint')\">\n          <img src=\"assets/plotting/vertex-delete.svg\"\n               [class]=\"activeDragMode === 'deletepoint' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n               style=\"width: 1rem\"/>\n        </p-button>\n      </ng-container>\n\n      <p-button size=\"small\"\n                [text]=\"activeDragMode !== 'wand'\"\n                pTooltip=\"Wand: click and drag to grow a region by similar pixel values (<kbd>w</kbd>).\n                <br>Hold <kbd>Shift</kbd> while clicking or dragging on a region to erase pixels from it.\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('wand')\">\n        <img src=\"assets/plotting/wand.svg\"\n             [class]=\"activeDragMode === 'wand' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n             style=\"width: 1rem\"/>\n      </p-button>\n      <ng-container *ngIf=\"activeDragMode === 'wand'\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Sens.</span>\n        <p-slider [(ngModel)]=\"wandSensitivity\"\n                  [min]=\"wandSensitivityMin\" [max]=\"wandSensitivityMax\" [step]=\"wandSensitivityStep\"\n                  (onChange)=\"wandSensitivityChange.emit($event.value)\"\n                  pTooltip=\"Higher = stricter (smaller selection); lower = looser.\n                  Takes effect from the next click/drag tick.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  styleClass=\"wand-sensitivity-slider\"></p-slider>\n        <span class=\"flex align-items-center mx-1 toolbar-text wand-sensitivity-value\">\n          {{ wandSensitivity.toFixed(1) }}</span>\n      </ng-container>\n      <p-button icon=\"pi pi-eraser\" size=\"small\"\n                [text]=\"activeDragMode !== 'eraseVertex'\"\n                pTooltip=\"Vertex eraser (<kbd>e</kbd>): click or drag to remove polygon vertices inside\n                the cursor circle from any region.\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"toggleDragMode.emit('eraseVertex')\">\n      </p-button>\n      <ng-container *ngIf=\"activeDragMode === 'eraseVertex'\">\n        <span class=\"flex align-items-center mx-1 toolbar-text\">Radius</span>\n        <p-slider [(ngModel)]=\"vertexEraserRadius\"\n                  [min]=\"vertexEraserRadiusMin\" [max]=\"vertexEraserRadiusMax\" [step]=\"vertexEraserRadiusStep\"\n                  (onChange)=\"vertexEraserRadiusChange.emit($event.value)\"\n                  pTooltip=\"Eraser radius in image pixels.\n                  Vertices within this distance of the cursor are removed.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  styleClass=\"wand-sensitivity-slider\"></p-slider>\n        <span class=\"flex align-items-center mx-1 toolbar-text wand-sensitivity-value\">\n          {{ vertexEraserRadius }}</span>\n      </ng-container>\n      <p-button size=\"small\" [text]=\"true\"\n                [disabled]=\"!canUndo\"\n                pTooltip=\"Undo the last region action (<kbd>Ctrl</kbd>+<kbd>Z</kbd>).\n                Up to 10 actions can be undone.\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"undoRegion.emit()\">\n        <img src=\"assets/plotting/undo.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n      </p-button>\n      <p-button size=\"small\" [text]=\"true\"\n                [disabled]=\"!canRedo\"\n                pTooltip=\"Redo the last undone region action\n                (<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd> / <kbd>Ctrl</kbd>+<kbd>Y</kbd>).\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"redoRegion.emit()\">\n        <img src=\"assets/plotting/redo.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n      </p-button>\n      <p-button icon=\"pi pi-trash\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Delete selected region (<kbd>Del</kbd>)\"\n                [escape]=\"false\" tooltipPosition=\"bottom\"\n                (onClick)=\"deleteRegion.emit()\">\n      </p-button>\n      <!-- SAM (jit-ui#90): box-prompt segment, interactive point prompts, and a\n           model picker. -->\n      <span class=\"toolbar-separator\"></span>\n      <!-- SAM controls grouped: box-prompt Segment, then the point-prompt tool,\n           then the model-picker dropdown (the chevron) which governs BOTH tools.\n           Falls back to Segment + point with no model picker when none are set. -->\n      <span *ngIf=\"samModels.length; else segmentPlain\" class=\"p-buttonset segment-split\">\n        <p-button size=\"small\" [text]=\"true\"\n                  pTooltip=\"Segment the drawn rectangles with SAM (box prompt)\"\n                  tooltipPosition=\"bottom\"\n                  (onClick)=\"segmentRegions.emit()\">\n          <img src=\"assets/plotting/sam-box-prompt.svg\"\n               class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n        </p-button>\n        <ng-container [ngTemplateOutlet]=\"samPointBtn\"></ng-container>\n        <p-button icon=\"pi pi-chevron-down\" size=\"small\" [text]=\"true\"\n                  pTooltip=\"Pick the SAM model (used by both segment tools)\"\n                  tooltipPosition=\"bottom\"\n                  (onClick)=\"samModelMenu.toggle($event)\">\n        </p-button>\n      </span>\n      <ng-template #segmentPlain>\n        <span class=\"p-buttonset segment-split\">\n          <p-button size=\"small\" [text]=\"true\"\n                    pTooltip=\"Segment the drawn rectangles with SAM (box prompt)\"\n                    tooltipPosition=\"bottom\"\n                    (onClick)=\"segmentRegions.emit()\">\n            <img src=\"assets/plotting/sam-box-prompt.svg\"\n                 class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n          </p-button>\n          <ng-container [ngTemplateOutlet]=\"samPointBtn\"></ng-container>\n        </span>\n      </ng-template>\n      <!-- Point-prompt tool \u2014 shared between the models / no-models layouts so it\n           always sits just left of the model dropdown. -->\n      <ng-template #samPointBtn>\n        <p-button size=\"small\"\n                  [text]=\"activeDragMode !== 'samPoint'\"\n                  pTooltip=\"SAM point prompts: click a fiber to segment it as a new region;\n                  Shift/Alt-click to refine (exclude) the current one.<br>Esc undoes it.\"\n                  [escape]=\"false\" tooltipPosition=\"bottom\"\n                  (onClick)=\"toggleDragMode.emit('samPoint')\">\n          <img src=\"assets/plotting/sam-point-prompt.svg\"\n               [class]=\"activeDragMode === 'samPoint' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n               style=\"width: 1rem\"/>\n        </p-button>\n      </ng-template>\n      <p-menu #samModelMenu styleClass=\"model-menu\" [model]=\"samMenuItems\" [popup]=\"true\" appendTo=\"body\">\n        <ng-template pTemplate=\"item\" let-item>\n          <ng-container [ngTemplateOutlet]=\"modelMenuItem\"\n                        [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n      </p-menu>\n\n      <!-- Shared item body for all three model pickers (SAM / YOLO / retinal):\n           the standard check-or-blank icon and label, plus an info icon carrying\n           the model's description as a hover tooltip. This replaced a single\n           \"About the SAM models\" overlay panel \u2014 per-model text sits next to the\n           model it describes, and YOLO/retinal get the same affordance.\n\n           p-menu puts its click handler on the wrapping `.p-menuitem-content`,\n           outside this template, so `command` still fires and the whole row stays\n           clickable \u2014 which is also why the info icon has to stop propagation, or\n           reading about a model would switch to it. -->\n      <ng-template #modelMenuItem let-item>\n        <a class=\"p-menuitem-link model-menu-item\">\n          <span class=\"p-menuitem-icon\" [ngClass]=\"item.icon\"></span>\n          <span class=\"p-menuitem-text\">{{ item.label }}</span>\n          <!-- `bottom` like every other tooltip in this toolbar, and for room:\n               these menus open under buttons that can sit near the right edge,\n               where a `right` tooltip has a few hundred px and squeezes its text\n               into a narrow column instead of using its max-width. -->\n          <!-- A focusable <button>, not a bare <i>. As an <i> the description\n               was reachable only by hovering a mouse: not tabbable, no\n               accessible name, nothing for a screen reader to announce \u2014 so\n               keyboard and AT users could pick a checkpoint but never read what\n               it was. PrimeNG's tooltip shows on focus as well as hover, so\n               making it a button restores it for free.\n\n               `aria-describedby` is deliberately not used: the tooltip is\n               rendered into `body` on demand and has no stable id to point at.\n               The description is carried on `aria-label` instead, which is\n               announced whether or not the tooltip is showing. It is stripped of\n               markup first, since the copy contains `<b>`/`<br>` for the visual\n               tooltip and those would otherwise be read out literally. -->\n          <button *ngIf=\"item.tooltip\" type=\"button\"\n                  class=\"pi pi-info-circle model-info-icon\"\n                  [attr.aria-label]=\"'About ' + item.label + ': ' + plainText(item.tooltip)\"\n                  [pTooltip]=\"item.tooltip\" [escape]=\"false\" tooltipPosition=\"bottom\"\n                  appendTo=\"body\" tooltipStyleClass=\"model-info-tooltip\"\n                  (click)=\"$event.stopPropagation()\"\n                  (keydown.enter)=\"$event.stopPropagation()\"\n                  (keydown.space)=\"$event.stopPropagation()\"></button>\n        </a>\n      </ng-template>\n      <p-button size=\"small\" [text]=\"true\"\n                pTooltip=\"Auto-segment cells inside each drawn rectangle (cellpose-SAM)\"\n                tooltipPosition=\"bottom\"\n                (onClick)=\"segmentCellpose.emit()\">\n        <img src=\"assets/plotting/cells.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\"/>\n      </p-button>\n\n      <!-- Contributed no-prompt tools (TOOLBAR_TOOLS). Unlike the SAM and\n           cellpose tools these take no prompt \u2014 they sweep the whole current\n           view rather than being pointed at something \u2014 so there is nothing to\n           draw first. Each renders the same split button: run, pick checkpoint,\n           open parameters.\n\n           Nothing here names a specific tool. The library ships none; a host\n           registers them, which is what lets this package be published without\n           the closed model dependencies. -->\n      <ng-container *ngFor=\"let tool of contributedTools; trackBy: trackToolById\">\n        <span class=\"p-buttonset segment-split\">\n          <p-button size=\"small\" [text]=\"true\"\n                    [pTooltip]=\"tool.runTooltip\"\n                    tooltipPosition=\"bottom\"\n                    (onClick)=\"runTool.emit(tool.id)\">\n            <!-- `toolbar-icon-dark` is hardcoded rather than bound, unlike the\n                 toggle tools: these fire a run and have no active state. -->\n            <img *ngIf=\"tool.icon.src\" [src]=\"tool.icon.src\" class=\"toolbar-icon-dark\"\n                 style=\"width: 1rem\" [alt]=\"tool.label\" />\n            <i *ngIf=\"tool.icon.pi\" class=\"pi {{ tool.icon.pi }}\"></i>\n          </p-button>\n          <p-button icon=\"pi pi-chevron-down\" size=\"small\" [text]=\"true\"\n                    [pTooltip]=\"tool.modelTooltip || 'Pick the model'\"\n                    tooltipPosition=\"bottom\"\n                    (onClick)=\"toolMenu.toggle($event)\">\n          </p-button>\n          <p-button *ngIf=\"tool.params.length\"\n                    icon=\"pi pi-sliders-h\" size=\"small\" [text]=\"true\"\n                    [pTooltip]=\"tool.paramsTooltip || 'Parameters'\"\n                    tooltipPosition=\"bottom\"\n                    (onClick)=\"openToolParams.emit(tool.id)\">\n          </p-button>\n        </span>\n        <p-menu #toolMenu styleClass=\"model-menu\" [model]=\"toolMenuItems[tool.id] || []\"\n                [popup]=\"true\" appendTo=\"body\">\n          <ng-template pTemplate=\"item\" let-item>\n            <ng-container [ngTemplateOutlet]=\"modelMenuItem\"\n                          [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n          </ng-template>\n        </p-menu>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"tools.help\">\n      <span class=\"toolbar-separator\"></span>\n\n      <!-- Help -->\n      <p-button icon=\"pi pi-question-circle\" size=\"small\" [text]=\"true\"\n                pTooltip=\"Help\" tooltipPosition=\"bottom\"\n                (onClick)=\"showHelp()\">\n      </p-button>\n    </ng-container>\n\n  </div>\n</p-toolbar>\n<p-dialog header=\"Plotting help\" [(visible)]=\"displayHelpDialog\" [modal]=\"true\" [style]=\"{width: '50vw'}\"\n          [maximizable]=\"true\" [draggable]=\"false\" [resizable]=\"false\">\n  <p>Click a file in the left-hand tree to display it. By default it opens in the\n    <b>Image</b> view \u2014 a natively tiled, deeply zoomable raster (OpenSeadragon) with a\n    navigator minimap and a physical-units scale bar. <b>Click the image to zoom</b> toward\n    the clicked point; scroll to zoom and drag to pan. When a stack is open, a slice slider\n    (Image view) or image-mode toggle (other views) appears. Regions can also be edited in the\n    <b>Region Editor</b>, opened with the\n    <img src=\"assets/plotting/region-editor.svg\" width=\"14\" height=\"14\" alt=\"Region Editor\"/>\n    toolbar button as a floating dialog. Drag the <i class=\"pi pi-bars\"></i> handle to detach\n    this toolbar into a floating window.\n  </p>\n\n  <h3>Plot-type dropdown</h3>\n  <p>\n    The <b>plot-type dropdown</b> switches how the file is visualized:\n    <b>Image</b>, <b>Heatmap</b>, <b>Contour</b>, <b>Surface</b>, <b>Volume</b>,\n    <b>Isosurface</b>, and \u2014 when a spatial-omics dataset is open \u2014\n    <b>Spatial omics</b> and <b>Spatial omics 3D</b>.\n  </p>\n  <p>\n    <b>Only the modes the data can actually support are offered</b>, so the list changes\n    with what is loaded rather than showing entries that would come up blank:\n  </p>\n  <ul>\n    <li><b>Contour</b>, <b>Volume</b> and <b>Isosurface</b> need a grayscale image; the\n      two 3D ones also need a z-stack.</li>\n    <li><b>Spatial omics</b> needs a published dataset, and <b>Spatial omics 3D</b> needs\n      one whose coordinates carry a z.</li>\n    <li>The pixel modes (<b>Image</b>, <b>Heatmap</b>, <b>Surface</b>) are withheld for a\n      dataset that brings no tissue image \u2014 seqFISH records coordinates and no section, so\n      there is nothing for them to draw.</li>\n  </ul>\n  <ul>\n    <li>\"<b>Isosurface band</b>\" slider (Isosurface): sets the intensity band the surfaces are\n      drawn for, mapped onto the volume's real intensity range.</li>\n    <li>\"<b>3D camera</b>\" (Surface / Scatter 3D / Isosurface): zoom <i class=\"pi pi-search\"></i>,\n      pan <i class=\"pi pi-arrows-alt\"></i>, orbit <i class=\"pi pi-globe\"></i>,\n      turntable <i class=\"pi pi-sync\"></i>, and reset camera <i class=\"pi pi-home\"></i>;\n      scroll to zoom the 3D scene.</li>\n  </ul>\n\n  <h3>Image manipulation tools</h3>\n  <ul>\n    <li>\"<b>Region Editor</b>\" <img src=\"assets/plotting/region-editor.svg\" width=\"15\" height=\"15\">:\n      opens the Region Editor as a floating, draggable dialog \u2014 a per-image table of every region\n      (class, colour, area) with bulk select/label/colour/delete and GeoJSON import/export. It stays\n      in sync with the image, so you can keep it open while drawing.</li>\n    <li>\"<b>Intensity profile lines</b>\" <img src=\"assets/plotting/spline-chart.svg\" width=\"15\" height=\"15\">\n      (<i>work in progress \u2014 not yet stable</i>): adds a coloured line ROI; a floating inset\n      chart plots intensity along each line, updates live as you drag it, and re-samples at the\n      current zoom resolution. Each added line gets its own colour; select a line and use the\n      trash tool <i class=\"pi pi-trash\"></i> to remove it (and its trace).</li>\n    <li>\"<b>Channels &amp; Histogram</b>\" <img src=\"assets/plotting/invert.svg\" width=\"15\" height=\"15\">:\n      opens a floating dialog for brightness/contrast, gamma, and per-channel display, plus the\n      <b>colormap / LUT</b> controls (grayscale only) \u2014 a <b>reverse</b> toggle and a colormap\n      dropdown (default: inverted greys).</li>\n    <li>\"<b>Smoothen</b>\" <img src=\"assets/plotting/smooth.svg\" width=\"15\" height=\"15\">\n      (Image view only): the image opens showing <b>raw pixels</b> (nearest-neighbour), so\n      zooming in renders crisp blocks for pixel inspection. Toggle this on for bilinear\n      smoothing; the icon turns white while smoothing is active.</li>\n  </ul>\n\n  <h3>Download &amp; view tools</h3>\n  <ul>\n    <li>\"<b>Download</b>\" <i class=\"pi pi-download\"></i>: download the current image as a PNG.</li>\n    <li>\"<b>Fit to view</b>\" / autoscale <i class=\"pi pi-window-maximize\"></i>: resets the image\n      to its original dimensions. In stack mode it also resets to single-image mode.</li>\n  </ul>\n\n  <h3>Zoom tools</h3>\n  <ul>\n    <li>\"<b>Zoom box</b>\" <img src=\"assets/plotting/zoom-box.svg\" width=\"15\" height=\"15\">\n      (<kbd>b</kbd>): drag a box to select an area to zoom into.</li>\n    <li>\"<b>Pan</b>\" <i class=\"pi pi-arrows-alt\"></i> (<kbd>p</kbd>): drag to pan the image.</li>\n    <li>\"<b>Zoom in</b>\" <i class=\"pi pi-search-plus\"></i> (<kbd>+</kbd>): zoom in one step.</li>\n    <li>\"<b>Zoom out</b>\" <i class=\"pi pi-search-minus\"></i> (<kbd>-</kbd>): zoom out one step,\n      stopping at the original image dimensions.</li>\n  </ul>\n\n  <h3>Region tools</h3>\n  <p>By default no tool is selected (all greyed-out); selecting a tool highlights it. The\n    vertex-editing tools (polygon, add/delete vertex, move, B\u00E9zier conversions) are available\n    in the <b>Image</b> view only. On a <b>donut</b> (a region with a hole), the inner-ring\n    vertices are editable too \u2014 drag, add, and delete them just like the outer ring.</p>\n  <ul>\n    <li>\"<b>Selection</b>\" <i class=\"pi pi-arrow-up-right\"></i> (<kbd>s</kbd>): a neutral mode\n      that turns off whatever drawing tool was active (wand, vertex eraser, rectangle, etc.).\n      Use it to step out of editing without picking another tool.</li>\n    <li>\"<b>Rectangular region</b>\" <i class=\"pi pi-stop\"></i> (<kbd>r</kbd>): click and drag to\n      create a rectangular region.</li>\n    <li>\"<b>Polyline</b>\" <img src=\"assets/plotting/polyline.svg\" width=\"14\" height=\"14\">\n      (<kbd>l</kbd>): draw an open (non-closed) polyline by clicking and dragging. Polylines can\n      be edited and exported to GeoJSON as a <code>LineString</code> feature.</li>\n    <li>\"<b>Freeform region</b>\" <i class=\"pi pi-pencil\"></i> (<kbd>f</kbd>): click and drag to\n      draw a closed freeform polygon.</li>\n    <li>\"<b>Brush</b>\" <img src=\"assets/plotting/paintbrush.svg\" width=\"15\" height=\"15\">: click\n      and drag to paint a region with a circular brush \u2014 the painted stroke is the region.\n      A <b>Size</b> slider (brush diameter, in image pixels) appears in the toolbar while the\n      brush is active. Hold <kbd>Shift</kbd> while painting to <b>erase</b> (subtract) from a\n      region instead. Painting over an existing region extends it; brushing across two regions\n      merges them. Painting a closed ring (or shift-erasing an interior pocket) leaves the\n      enclosed area empty \u2014 a <b>donut</b> (Image view).</li>\n    <li>\"<b>Polygon</b>\" <img src=\"assets/plotting/polygon-vertices.svg\" width=\"15\" height=\"15\">:\n      click to place each vertex; click the first point to close the polygon.</li>\n    <li>\"<b>Add vertex</b>\" <img src=\"assets/plotting/vertex-add.svg\" width=\"15\" height=\"15\">:\n      click an edge of the selected polygon to insert a new vertex.</li>\n    <li>\"<b>Delete vertex</b>\" <img src=\"assets/plotting/vertex-delete.svg\" width=\"15\" height=\"15\">:\n      click a vertex of the selected polygon to remove it.</li>\n    <li>\"<b>Move region</b>\" <img src=\"assets/plotting/region-move.svg\" width=\"15\" height=\"15\">:\n      drag to move the selected region.</li>\n    <li>\"<b>To B\u00E9zier</b>\" <img src=\"assets/plotting/to-bezier.svg\" width=\"15\" height=\"15\"> /\n      \"<b>To polygon</b>\" <img src=\"assets/plotting/to-polygon.svg\" width=\"15\" height=\"15\">:\n      convert the selected region to a smooth B\u00E9zier curve, or back to a straight-edged polygon.</li>\n    <li>\"<b>Wand</b>\" <img src=\"assets/plotting/wand.svg\" width=\"15\" height=\"15\"> (<kbd>w</kbd>):\n      click to grow a region from pixels with similar values around the click point. Hold\n      <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> for an exact-match flood fill; drag to keep extending the\n      selection while moving; hold <kbd>Shift</kbd> while clicking or dragging on an existing\n      region to <b>erase</b> pixels from it. Use the <b>Sens.</b> slider that appears to make the\n      wand stricter (higher = smaller selection) or looser. Subsequent clicks keep extending the\n      same region; clicking inside an existing region adopts it, and growing into another region\n      merges them.</li>\n    <li>\"<b>Vertex eraser</b>\" <i class=\"pi pi-eraser\"></i> (<kbd>e</kbd>): click or click-and-drag\n      to remove polygon vertices that fall inside the cursor circle from any region, including a\n      region's inner rings (donut holes). Use the <b>Radius</b> slider to set the eraser size in\n      image pixels. Polygons reduced below 3 vertices (or polylines below 2) are deleted entirely;\n      a hole reduced below 3 vertices is removed.</li>\n    <li>\"<b>Undo</b>\" <img src=\"assets/plotting/undo.svg\" width=\"15\" height=\"15\">\n      (<kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Z</kbd>): reverts the\n      last region action (draw, delete, edit, wand/brush stroke, segmentation, \u2026). Up to the last\n      <b>10</b> actions can be undone; the button greys out when there's nothing left to undo.</li>\n    <li>\"<b>Redo</b>\" <img src=\"assets/plotting/redo.svg\" width=\"15\" height=\"15\">\n      (<kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd> or <kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Y</kbd>):\n      re-applies the most recently undone action. Performing a new region action clears what can be redone.</li>\n    <li>\"<b>Delete region</b>\" <i class=\"pi pi-trash\"></i> (<kbd>Del</kbd>): deletes the selected\n      region. This can also be done from the Region Editor.</li>\n  </ul>\n\n  <h3>Region actions (right-click the image)</h3>\n  <p>Right-click a region \u2014 or the current multi-selection \u2014 to open the\n    \"<b>Selected region(s)</b>\" group at the top of the context menu. These act immediately on\n    the selection (they're not drawing modes) and are fully undo/redo-able:</p>\n  <ul>\n    <li>\"<b>Select all regions</b>\" <i class=\"pi pi-check-square\"></i>: select every region on\n      the image (also in the Region Editor toolbar).</li>\n    <li>\"<b>Merge / group</b>\": combine 2+ selected regions into one. If the pieces don't touch,\n      the result is a single multi-part region (sparse \"bits\").</li>\n    <li>\"<b>Ungroup</b>\": split a multi-part region back into one region per piece.</li>\n    <li>\"<b>Inverse</b>\": replace the selection with everything <i>outside</i> it \u2014 the image\n      rectangle with the selected regions punched out as holes. Works at any image size.</li>\n    <li>\"<b>Simplify</b>\": reduce a region's vertex count (Douglas\u2013Peucker) by an altitude\n      threshold in pixels \u2014 pick <b>Light</b> (1&nbsp;px), <b>Medium</b> (3&nbsp;px),\n      <b>Strong</b> (8&nbsp;px), or <b>Custom\u2026</b> for a slider. Applies to the exterior and any\n      holes (and every part of a multi-part region).</li>\n    <li>The B\u00E9zier conversions and Delete also live in this group (the right-click equivalents of\n      the toolbar / vertex tools above).</li>\n  </ul>\n\n  <h3>Segmentation &amp; detection tools</h3>\n  <p>AI-assisted segmentation and detection that run entirely in the browser. The first run\n    of any model downloads it (a progress toast is shown); it's then cached.</p>\n  <p>Two shapes of tool: the <b>prompted</b> ones (Segment, Point prompts, Cellpose) act on\n    rectangles you draw, and generated regions inherit the color of the rectangle they came\n    from<span *ngIf=\"contributedTools.length\">; the <b>no-prompt</b> ones ({{ contributedToolNames }})\n    sweep the whole current view, so there is nothing to draw first</span>.</p>\n  <p>Each model dropdown <i class=\"pi pi-chevron-down\"></i> lists the available checkpoints with\n    a <i class=\"pi pi-info-circle\"></i> beside each one \u2014 hover it for that model's size, speed,\n    training domain and accuracy, so you can pick without leaving the toolbar.</p>\n  <ul>\n    <li>\"<b>Segment</b>\" <img src=\"assets/plotting/sam-box-prompt.svg\" width=\"15\" height=\"15\">\n      (box prompt): draw one or more <b>Rectangular regions</b> around the objects of interest,\n      then click Segment. Each rectangle is replaced by the SAM mask of the object inside it.</li>\n    <li>\"<b>Point prompts</b>\" <img src=\"assets/plotting/sam-point-prompt.svg\" width=\"15\" height=\"15\">: click directly on an object to\n      segment it as a <b>new</b> region. Each click starts a fresh object \u2014 clicking another\n      object won't grow the previous one. <kbd>Shift</kbd>/<kbd>Alt</kbd>-click adds an\n      <i>exclude</i> point that refines the current object; <kbd>Esc</kbd> undoes it,\n      <kbd>Enter</kbd> commits it.</li>\n    <li>\"<b>Model picker</b>\" <i class=\"pi pi-chevron-down\"></i>: the dropdown attached to the\n      Segment button chooses the SAM model \u2014 <b>micro-sam ViT-T</b> (default; small, fast) or\n      <b>micro-sam ViT-B</b> (larger, highest accuracy) for light microscopy, or\n      <b>patho-sam ViT-B</b> for histopathology (H&amp;E / stained tissue). All are promptable\n      Segment Anything models finetuned for biomedical images; they differ in the <i>image\n      encoder</i> (the heavy once-per-image step) and the training domain \u2014 box and point\n      prompting behave the same. The choice applies to <i>both</i> the box and point tools, and\n      each tool loads its own encoder, so the first click after switching re-encodes once.</li>\n    <li>\"<b>Cellpose</b>\" <img src=\"assets/plotting/cells.svg\" width=\"15\" height=\"15\">: draw rectangles, then click Cellpose to\n      automatically segment every cell inside each rectangle (client-side cellpose-SAM) \u2014 one\n      region per detected cell. No clicking on individual cells needed.</li>\n    <!-- Contributed tools describe themselves. This library ships none, so an\n         open build's help lists only the prompted tools above \u2014 the text no\n         longer promises buttons that are not there. -->\n    <ng-container *ngFor=\"let tool of contributedTools\">\n      <li *ngIf=\"tool.help\" [innerHTML]=\"tool.help.body\"></li>\n    </ng-container>\n    <ng-container *ngFor=\"let tool of dialogTools\">\n      <li *ngIf=\"tool.help\" [innerHTML]=\"tool.help.body\"></li>\n    </ng-container>\n  </ul>\n\n  <h3>Spatial omics</h3>\n  <p>\n    In <b>Spatial omics</b> mode each observation \u2014 a cell or a Visium spot \u2014 is drawn at\n    its own coordinates, over the tissue image where the dataset registers onto one. The\n    <img src=\"assets/plotting/spatial-omics.svg\" width=\"14\" height=\"14\" alt=\"Spatial omics\"/>\n    panel colours them by a <b>column</b> (a cell type, a cluster) or by a <b>gene</b>, and\n    the two are exclusive so what drives the colours is never ambiguous.\n  </p>\n  <ul>\n    <li>\"<b>Select from ROIs</b>\": turns the regions you have drawn into a selection of\n      observations. Everything else then follows that selection.</li>\n    <li>\"<b>Point size</b>\" / \"<b>Opacity</b>\": how the markers are drawn, not what is\n      selected.</li>\n  </ul>\n\n  <h3>Distribution charts</h3>\n  <p>\n    The <b>Distribution</b> section of the spatial-omics panel charts whatever the map is\n    coloured by, so the two can never disagree. Each tab answers a different question, and\n    the <i class=\"pi pi-question-circle\"></i> beside them explains the one on screen \u2014\n    including what it must <em>not</em> be read for.\n  </p>\n  <ul>\n    <li>\"<b>Counts</b>\": how many observations per category. A category is a label, not a\n      magnitude, so a frequency is the only distribution it has.</li>\n    <li>\"<b>Histogram</b>\" / \"<b>Violin</b>\" / \"<b>Box</b>\": how a continuous value is\n      distributed \u2014 over everything, or split by a grouping column.</li>\n    <li>\"<b>Heatmap</b>\": mean expression of the genes you pick within each group.\n      Z-scored per gene by default, so a colour means \"above or below this gene's own\n      average\" rather than \"highly expressed\".</li>\n    <li>\"<b>Embedding</b>\": a UMAP, PCA or t-SNE over the same cells. <b>Lasso it to\n      select on the map</b> \u2014 both views read the same selection. Only PCA labels its axes\n      with a percentage, because only its axes explain a measurable share of the variance;\n      UMAP and t-SNE coordinates are arbitrary, so distance between distant clusters\n      should not be read.</li>\n    <li>\"<b>Detach</b>\": moves the charts into their own window so they can sit beside the\n      map instead of inside the panel. Switching tabs keeps the window where it is.</li>\n  </ul>\n\n  <h3>Help</h3>\n  <p>\"<b>Help</b>\" <i class=\"pi pi-question-circle\"></i>: opens this dialog.</p>\n\n  <h3>Keyboard shortcuts</h3>\n  <table class=\"shortcuts-table\">\n    <tr><td><kbd>+</kbd> / <kbd>=</kbd></td><td>Zoom in</td></tr>\n    <tr><td><kbd>-</kbd></td><td>Zoom out</td></tr>\n    <tr><td><kbd>b</kbd></td><td>Toggle zoom box mode</td></tr>\n    <tr><td><kbd>p</kbd></td><td>Toggle pan mode</td></tr>\n    <tr><td><kbd>f</kbd></td><td>Toggle freeform region drawing</td></tr>\n    <tr><td><kbd>l</kbd></td><td>Toggle polyline drawing</td></tr>\n    <tr><td><kbd>r</kbd></td><td>Toggle rectangular region drawing</td></tr>\n    <tr><td><kbd>w</kbd></td><td>Toggle wand tool</td></tr>\n    <tr><td>Wand + <kbd>Shift</kbd></td><td>Erase pixels from the active region</td></tr>\n    <tr><td>Wand + <kbd>Ctrl</kbd>/<kbd>Cmd</kbd></td><td>Exact-match flood fill (no smoothing)</td></tr>\n    <tr><td><kbd>e</kbd></td><td>Toggle vertex eraser</td></tr>\n    <tr><td><kbd>s</kbd></td><td>Selection mode (deactivates drawing tools)</td></tr>\n    <tr><td>Point prompt + <kbd>Shift</kbd>/<kbd>Alt</kbd></td><td>Add an exclude point (refine the current object)</td></tr>\n    <tr><td><kbd>Enter</kbd></td><td>Commit the current SAM point object</td></tr>\n    <tr><td><kbd>Esc</kbd></td><td>Undo the current SAM point object</td></tr>\n    <tr><td><kbd>Del</kbd> / <kbd>\u232B</kbd></td><td>Delete selected region</td></tr>\n    <tr><td><kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Z</kbd></td><td>Undo the last region action (up to 10)</td></tr>\n    <tr><td><kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd> / <kbd>Ctrl</kbd>+<kbd>Y</kbd></td><td>Redo the last undone region action</td></tr>\n  </table>\n\n  <ng-template pTemplate=\"footer\">\n    <p-button icon=\"pi pi-check\" (click)=\"displayHelpDialog=false\" label=\"Ok\" styleClass=\"p-button-text\">\n    </p-button>\n  </ng-template>\n</p-dialog>\n", styles: [":host{display:block}:host ::ng-deep .p-toolbar{padding:.25rem .5rem}.toolbar-text{color:var(--primary-color);font-size:.875rem}::ng-deep .toolbar-input .p-inputtext{color:var(--primary-color);border-color:var(--primary-color)}.toolbar-separator{border-left:1px solid var(--surface-border);height:1.5rem;margin:0 .25rem;align-self:center}.toolbar-icon-dark{filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}.toolbar-icon-active{filter:brightness(0) invert(1)}::ng-deep .plotmode-item{display:inline-flex;align-items:center;gap:.5rem;color:#000}::ng-deep .plotmode-item i{font-size:1rem;color:var(--primary-color)}::ng-deep .plotmode-item .plotmode-icon-img{width:1.1rem;height:1.1rem;object-fit:contain;filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}::ng-deep .p-menu.model-menu{width:auto;min-width:12.5rem}::ng-deep .model-menu-item{display:flex;align-items:center;gap:.5rem}::ng-deep .model-menu-item .p-menuitem-text{flex:1 1 auto;white-space:nowrap}::ng-deep .model-menu-item .model-info-icon{flex:0 0 auto;font-size:.875rem;opacity:.55;cursor:help;appearance:none;background:none;border:0;padding:0;margin:0;color:inherit;line-height:1}::ng-deep .model-menu-item .model-info-icon:hover{opacity:1}::ng-deep .model-menu-item .model-info-icon:focus-visible{opacity:1;outline:2px solid var(--primary-color, #2196f3);outline-offset:2px;border-radius:2px}::ng-deep .model-info-tooltip .p-tooltip-text{min-width:18rem;max-width:24rem;line-height:1.4}::ng-deep .wand-sensitivity-slider{width:8rem;align-self:center;margin:0 .25rem}.wand-sensitivity-value{min-width:2rem;text-align:right}span.colormap{width:50px;height:auto;display:inline-block}img.colormap{width:50px;height:auto}.colormap{background:no-repeat;background-size:100%;vertical-align:middle}kbd{background:#e8e8e8;border:1px solid #bbb;border-radius:3px;padding:1px 5px;font-family:monospace;font-size:.85em}.shortcuts-table{border-collapse:collapse}.shortcuts-table td{padding:.25rem .75rem .25rem 0;vertical-align:middle}.shortcuts-table td:first-child{white-space:nowrap}\n"] }]
         }], propDecorators: { imageInfo: [{
                 type: Input
+            }], hasSpatialDataset: [{
+                type: Input
             }], plotTypeOptions: [{
                 type: Input
             }], selectedPlotType: [{
@@ -13541,7 +13549,10 @@ class VisualizerComponent {
         this.isoRange = [0, 255];
         /** Whether a spatial-omics dataset is currently published on
          *  `SPATIAL_DATA_PORT` — gates the spatial plot types in the selector. */
+        /** Bound by the toolbar, which offers the plot modes for a dataset with no image too. */
         this.hasSpatialDataset = false;
+        /** The spatial dataset on offer, for drawing one that brings no image (see reloadAndPlot). */
+        this.spatialDataset = null;
         /** Whether that dataset's observations carry a z, gating the 3D spatial mode. */
         this.hasSpatial3dDataset = false;
         /** Whether it carries a registered volume. Change detection only: a volume
@@ -13642,6 +13653,7 @@ class VisualizerComponent {
      */
     watchSpatialDataset() {
         this.spatialDatasetSubscription = this.spatialData?.getDataset$().subscribe((dataset) => {
+            this.spatialDataset = dataset ?? null;
             const has = !!dataset;
             // Only a dataset whose observations carry a z can be drawn as a cloud, so
             // the 3D mode is gated on the coordinates, not merely on a dataset being
@@ -13704,6 +13716,10 @@ class VisualizerComponent {
                     const target = has3d ? PlotType.SPATIAL_OMICS_3D : PlotType.SPATIAL_OMICS;
                     if (this.selectedPlotTypeId !== target)
                         this.onSelectPlotType(target);
+                    // Same mode, another image-less dataset, nothing loaded: re-plot so its placeholder
+                    // image info (and with it the regions' key) is this dataset's, not the last one's.
+                    else if (!this.imageInfo)
+                        this.reloadAndPlot();
                 }
             }
             // Clearing the dataset while a spatial mode is active leaves a type that is
@@ -14709,10 +14725,56 @@ class VisualizerComponent {
         if (this.imageInfo) {
             this.state.setImageInfo(this.imageInfo);
         }
+        else if (this.spatialDataset && (isSpatialOmics(this.plotType) || isSpatialOmics3d(this.plotType))) {
+            // A spatial dataset that brings no image, opened with no image loaded (a host's
+            // first view): there is no image info to re-drive, so draw the spatial mode itself.
+            void this.plotSpatialWithoutImage(this.spatialDataset);
+        }
         else {
             this.plotService.reloadAndPlot();
         }
     }
+    /**
+     * Draw a spatial mode with no image behind it: the observations alone, framed on their own
+     * extent, as the seqFISH example shows them. The image info is a placeholder naming the
+     * dataset, so regions drawn here are kept per dataset like any image's.
+     */
+    async plotSpatialWithoutImage(dataset) {
+        // The same generation as the image pipeline: a newer image or dataset supersedes this
+        // draw, and a superseded draw neither reports nor releases the newer one's loading state.
+        const token = ++this.renderToken;
+        const div = document.getElementById(this.plotDivName);
+        const info = {
+            isGrayscale: false, trueImageSize: [0, 0], urls: [], isStack: false, showStack: false,
+            scaleRatio: true, fileName: `spatial:${dataset.id}`, imageMeta: [],
+        };
+        let failure = null;
+        try {
+            // A backend that cannot draw (no WebGPU, no plot target) resolves false rather than throwing.
+            if (!(await this.plotService.plot(this.plotDivName, null, info, div?.offsetHeight || 500, this.plotType))) {
+                failure = 'the renderer could not start';
+            }
+        }
+        catch (err) {
+            failure = err;
+        }
+        if (token !== this.renderToken)
+            return;
+        if (failure) {
+            console.warn('[visualizer] could not draw the spatial dataset', failure);
+            const e = failure;
+            this.messageService.add({
+                key: this.vizAlertToastKey,
+                severity: 'error',
+                summary: 'Could not draw the dataset',
+                // An image-less dataset has no tissue image to fall back on, so say so rather than
+                // leave an empty canvas that looks finished.
+                detail: `${dataset.name ?? dataset.id}: ${e?.message ?? String(failure)}.`,
+            });
+        }
+        this.state.setImageLoading(false);
+        this.cdr.detectChanges();
+    }
     cancelLoading() {
         // Stop any in-flight frame streaming (napari-js volume/surface preload) so the fetch loops
         // actually abort — clearing the flag alone only routed to Plotly and left napari fetching.
@@ -15649,11 +15711,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 }, { token: TOOLBAR_TOOLS, optional: true }, { token: SPATIAL_DATA_PORT, optional: true }, { token: PLOT_TYPE_CONTRIBUTIONS, optional: true }, { token: i0.Injector, 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 }, { propertyName: "plotModePanelSlot", first: true, predicate: ["plotModePanelSlot"], descendants: true }, { propertyName: "toolDialogSlot", first: true, predicate: ["toolDialogSlot"], 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]=\"plotTypeMenu\"\n  [selectedPlotType]=\"selectedPlotTypeId\"\n  [basePlotType]=\"basePlotType\"\n  [isoRange]=\"isoRange\"\n  [maxIndex]=\"maxIndex\"\n  [zIndex]=\"zIndex\"\n  [isHeatmap]=\"isHeatmap\"\n  [is3dRegions]=\"isSpatial3dMode\"\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  [contributedTools]=\"contributedTools\"\n  [dialogTools]=\"dialogTools\"\n  [openDialogToolId]=\"openDialogToolId\"\n  (toggleDialogTool)=\"toggleDialogTool($event)\"\n  [toolModelIds]=\"toolModelIds\"\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  (openSpatialControls)=\"openSpatialControls()\"\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  (runTool)=\"runTool($event)\"\n  (toolModelChange)=\"onToolModelChange($event)\"\n  (openToolParams)=\"openToolParams($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<!-- Spatial-omics controls. Renders its own empty state when no dataset (or no\n     SPATIAL_DATA_PORT) is present, so it is always safe to host. -->\n<spatial-controls [(visible)]=\"showSpatialControls\" [is3d]=\"isSpatial3dMode\" ></spatial-controls>\n\n<!-- Side panel of the active contributed plot mode (PLOT_TYPE_CONTRIBUTIONS),\n     in the same right-hand area as the spatial controls and the Region Editor.\n     Exists only while the mode's session is live; there is no close button,\n     because leaving the mode is what ends it. A component panel gets\n     PLOT_MODE_CONTEXT / PLOT_MODE_SESSION from its injector; a `mount` panel's\n     host element is attached to the slot below (see plotModePanelSlot). -->\n<p-dialog *ngIf=\"plotModePanel as panel\" [header]=\"panel.title\" [visible]=\"true\"\n          [modal]=\"false\" [closable]=\"false\" [resizable]=\"true\" [draggable]=\"true\"\n          appendTo=\"body\" position=\"right\" styleClass=\"plot-mode-panel\"\n          [style]=\"{ width: '22rem', maxHeight: '85vh' }\"\n          [contentStyle]=\"{ overflow: 'auto' }\">\n  <ng-container *ngIf=\"panel.component\">\n    <ng-container *ngComponentOutlet=\"panel.component; injector: panel.injector ?? undefined\"></ng-container>\n  </ng-container>\n  <div *ngIf=\"panel.host\" #plotModePanelSlot class=\"plot-mode-panel-slot\"></div>\n</p-dialog>\n\n<!-- An open dialog tool (TOOLBAR_TOOLS, kind: 'dialog'). Non-modal so the user can\n     keep working on the image, e.g. painting with the brush the tool armed. The\n     tool renders its body into a host element attached to the slot below (see\n     toolDialogSlot); closing the dialog ends the tool's session. -->\n<p-dialog *ngIf=\"toolDialog as dlg\" [header]=\"dlg.title\" [visible]=\"true\"\n          (visibleChange)=\"$event || closeDialogTool()\"\n          [modal]=\"false\" [closable]=\"true\" [resizable]=\"true\" [draggable]=\"true\"\n          appendTo=\"body\" position=\"right\" styleClass=\"tool-dialog\"\n          [style]=\"{ width: dlg.width, maxHeight: '85vh' }\"\n          [contentStyle]=\"{ overflow: 'auto' }\">\n  <div #toolDialogSlot class=\"tool-dialog-slot\"></div>\n</p-dialog>\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<!-- Parameters for whichever contributed tool is open. One dialog for all of\n     them: a tool declares its fields (ToolParamSpec) and this renders them, so\n     the toolbar can lay every tool out the same way and a plugin needs no\n     PrimeNG of its own. Defaults come from the active checkpoint, since they\n     encode what it was trained for. -->\n<p-dialog *ngIf=\"openParamsTool as tool\"\n          [header]=\"tool.label + ' parameters'\"\n          [visible]=\"true\" (visibleChange)=\"openParamsToolId = null\"\n          [modal]=\"true\"\n          [style]=\"{width: '30rem'}\" [draggable]=\"false\" [resizable]=\"false\" appendTo=\"body\">\n  <div class=\"grid formgrid p-fluid\">\n    <ng-container *ngFor=\"let p of tool.params\">\n      <div class=\"field\" [ngClass]=\"p.type === 'boolean' ? 'col-12' : 'col-6'\">\n        <ng-container [ngSwitch]=\"p.type\">\n\n          <ng-container *ngSwitchCase=\"'number'\">\n            <label class=\"text-sm\" [pTooltip]=\"p.tooltip || ''\">{{ p.label }}</label>\n            <p-inputNumber [ngModel]=\"paramsFor(tool.id)[p.id]\"\n                           (ngModelChange)=\"paramsFor(tool.id)[p.id] = $event\"\n                           [min]=\"numberParam(p).min\" [max]=\"numberParam(p).max\"\n                           [step]=\"numberParam(p).step\"\n                           [minFractionDigits]=\"numberParam(p).fractionDigits\"\n                           [showButtons]=\"true\"></p-inputNumber>\n          </ng-container>\n\n          <ng-container *ngSwitchCase=\"'select'\">\n            <label class=\"text-sm\" [pTooltip]=\"p.tooltip || ''\">{{ p.label }}</label>\n            <p-dropdown [options]=\"selectParam(p).options\" optionLabel=\"label\" optionValue=\"value\"\n                        [ngModel]=\"paramsFor(tool.id)[p.id]\"\n                        (ngModelChange)=\"paramsFor(tool.id)[p.id] = $event\"\n                        appendTo=\"body\"></p-dropdown>\n          </ng-container>\n\n          <!-- Checkbox label sits beside the box and may run to a sentence, so\n               it does not get the stacked label the other types use. -->\n          <div *ngSwitchCase=\"'boolean'\" class=\"flex align-items-center gap-2\">\n            <p-checkbox [ngModel]=\"paramsFor(tool.id)[p.id]\"\n                        (ngModelChange)=\"paramsFor(tool.id)[p.id] = $event\"\n                        [binary]=\"true\" [inputId]=\"tool.id + '-' + p.id\"></p-checkbox>\n            <label [for]=\"tool.id + '-' + p.id\" class=\"text-sm mb-0\"\n                   [pTooltip]=\"p.tooltip || ''\">{{ p.label }}</label>\n          </div>\n\n        </ng-container>\n      </div>\n    </ng-container>\n  </div>\n  <ng-template pTemplate=\"footer\">\n    <p-button label=\"Reset to model defaults\" [text]=\"true\" size=\"small\"\n              (onClick)=\"resetToolParams(tool.id)\"></p-button>\n    <p-button label=\"Close\" size=\"small\" (onClick)=\"openParamsToolId = null\"></p-button>\n  </ng-template>\n</p-dialog>\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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: i6$1.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: i7.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "autoShowPanelOnPrintableCharacterKeyDown", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { 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: i10.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { 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: i15$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: i17$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: i16.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: ToolbarComponent, selector: "plotting-toolbar", inputs: ["imageInfo", "plotTypeOptions", "selectedPlotType", "basePlotType", "isoRange", "maxIndex", "zIndex", "isHeatmap", "is3dRegions", "activeDragMode", "activeSurface3dMode", "axesVisible", "wireframeActive", "resolutionScale", "wandSensitivity", "brushSize", "vertexEraserRadius", "canUndo", "canRedo", "stackOptions", "tools", "imageSmoothingEnabled", "samModels", "samModelId", "contributedTools", "dialogTools", "openDialogToolId", "toolModelIds"], outputs: ["selectPlotType", "addProfileLine", "toggleImageSmoothing", "isoRangeChange", "openChannelHistogram", "openSpatialControls", "openRegionEditor", "selectStackOption", "zScrub", "zSlide", "zIndexInput", "reloadAndPlot", "downloadImage", "autoscaleImage", "toggleDragMode", "zoomIn", "zoomOut", "toggleSurface3dMode", "resetSurfaceCamera", "toggleAxes", "toggleWireframe", "selectResolution", "deleteRegion", "undoRegion", "redoRegion", "segmentRegions", "segmentCellpose", "runTool", "toggleDialogTool", "toolModelChange", "openToolParams", "samModelChange", "wandSensitivityChange", "brushSizeChange", "vertexEraserRadiusChange"] }, { kind: "component", type: RegionEditorComponent, selector: "region-editor" }, { kind: "component", type: ChannelHistogramComponent, selector: "channel-histogram", inputs: ["visible"], outputs: ["visibleChange"] }, { kind: "component", type: SpatialControlsComponent, selector: "spatial-controls", inputs: ["visible", "is3d"], 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 }, { propertyName: "plotModePanelSlot", first: true, predicate: ["plotModePanelSlot"], descendants: true }, { propertyName: "toolDialogSlot", first: true, predicate: ["toolDialogSlot"], 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  [hasSpatialDataset]=\"hasSpatialDataset\"\n  [plotTypeOptions]=\"plotTypeMenu\"\n  [selectedPlotType]=\"selectedPlotTypeId\"\n  [basePlotType]=\"basePlotType\"\n  [isoRange]=\"isoRange\"\n  [maxIndex]=\"maxIndex\"\n  [zIndex]=\"zIndex\"\n  [isHeatmap]=\"isHeatmap\"\n  [is3dRegions]=\"isSpatial3dMode\"\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  [contributedTools]=\"contributedTools\"\n  [dialogTools]=\"dialogTools\"\n  [openDialogToolId]=\"openDialogToolId\"\n  (toggleDialogTool)=\"toggleDialogTool($event)\"\n  [toolModelIds]=\"toolModelIds\"\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  (openSpatialControls)=\"openSpatialControls()\"\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  (runTool)=\"runTool($event)\"\n  (toolModelChange)=\"onToolModelChange($event)\"\n  (openToolParams)=\"openToolParams($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<!-- Spatial-omics controls. Renders its own empty state when no dataset (or no\n     SPATIAL_DATA_PORT) is present, so it is always safe to host. -->\n<spatial-controls [(visible)]=\"showSpatialControls\" [is3d]=\"isSpatial3dMode\" ></spatial-controls>\n\n<!-- Side panel of the active contributed plot mode (PLOT_TYPE_CONTRIBUTIONS),\n     in the same right-hand area as the spatial controls and the Region Editor.\n     Exists only while the mode's session is live; there is no close button,\n     because leaving the mode is what ends it. A component panel gets\n     PLOT_MODE_CONTEXT / PLOT_MODE_SESSION from its injector; a `mount` panel's\n     host element is attached to the slot below (see plotModePanelSlot). -->\n<p-dialog *ngIf=\"plotModePanel as panel\" [header]=\"panel.title\" [visible]=\"true\"\n          [modal]=\"false\" [closable]=\"false\" [resizable]=\"true\" [draggable]=\"true\"\n          appendTo=\"body\" position=\"right\" styleClass=\"plot-mode-panel\"\n          [style]=\"{ width: '22rem', maxHeight: '85vh' }\"\n          [contentStyle]=\"{ overflow: 'auto' }\">\n  <ng-container *ngIf=\"panel.component\">\n    <ng-container *ngComponentOutlet=\"panel.component; injector: panel.injector ?? undefined\"></ng-container>\n  </ng-container>\n  <div *ngIf=\"panel.host\" #plotModePanelSlot class=\"plot-mode-panel-slot\"></div>\n</p-dialog>\n\n<!-- An open dialog tool (TOOLBAR_TOOLS, kind: 'dialog'). Non-modal so the user can\n     keep working on the image, e.g. painting with the brush the tool armed. The\n     tool renders its body into a host element attached to the slot below (see\n     toolDialogSlot); closing the dialog ends the tool's session. -->\n<p-dialog *ngIf=\"toolDialog as dlg\" [header]=\"dlg.title\" [visible]=\"true\"\n          (visibleChange)=\"$event || closeDialogTool()\"\n          [modal]=\"false\" [closable]=\"true\" [resizable]=\"true\" [draggable]=\"true\"\n          appendTo=\"body\" position=\"right\" styleClass=\"tool-dialog\"\n          [style]=\"{ width: dlg.width, maxHeight: '85vh' }\"\n          [contentStyle]=\"{ overflow: 'auto' }\">\n  <div #toolDialogSlot class=\"tool-dialog-slot\"></div>\n</p-dialog>\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<!-- Parameters for whichever contributed tool is open. One dialog for all of\n     them: a tool declares its fields (ToolParamSpec) and this renders them, so\n     the toolbar can lay every tool out the same way and a plugin needs no\n     PrimeNG of its own. Defaults come from the active checkpoint, since they\n     encode what it was trained for. -->\n<p-dialog *ngIf=\"openParamsTool as tool\"\n          [header]=\"tool.label + ' parameters'\"\n          [visible]=\"true\" (visibleChange)=\"openParamsToolId = null\"\n          [modal]=\"true\"\n          [style]=\"{width: '30rem'}\" [draggable]=\"false\" [resizable]=\"false\" appendTo=\"body\">\n  <div class=\"grid formgrid p-fluid\">\n    <ng-container *ngFor=\"let p of tool.params\">\n      <div class=\"field\" [ngClass]=\"p.type === 'boolean' ? 'col-12' : 'col-6'\">\n        <ng-container [ngSwitch]=\"p.type\">\n\n          <ng-container *ngSwitchCase=\"'number'\">\n            <label class=\"text-sm\" [pTooltip]=\"p.tooltip || ''\">{{ p.label }}</label>\n            <p-inputNumber [ngModel]=\"paramsFor(tool.id)[p.id]\"\n                           (ngModelChange)=\"paramsFor(tool.id)[p.id] = $event\"\n                           [min]=\"numberParam(p).min\" [max]=\"numberParam(p).max\"\n                           [step]=\"numberParam(p).step\"\n                           [minFractionDigits]=\"numberParam(p).fractionDigits\"\n                           [showButtons]=\"true\"></p-inputNumber>\n          </ng-container>\n\n          <ng-container *ngSwitchCase=\"'select'\">\n            <label class=\"text-sm\" [pTooltip]=\"p.tooltip || ''\">{{ p.label }}</label>\n            <p-dropdown [options]=\"selectParam(p).options\" optionLabel=\"label\" optionValue=\"value\"\n                        [ngModel]=\"paramsFor(tool.id)[p.id]\"\n                        (ngModelChange)=\"paramsFor(tool.id)[p.id] = $event\"\n                        appendTo=\"body\"></p-dropdown>\n          </ng-container>\n\n          <!-- Checkbox label sits beside the box and may run to a sentence, so\n               it does not get the stacked label the other types use. -->\n          <div *ngSwitchCase=\"'boolean'\" class=\"flex align-items-center gap-2\">\n            <p-checkbox [ngModel]=\"paramsFor(tool.id)[p.id]\"\n                        (ngModelChange)=\"paramsFor(tool.id)[p.id] = $event\"\n                        [binary]=\"true\" [inputId]=\"tool.id + '-' + p.id\"></p-checkbox>\n            <label [for]=\"tool.id + '-' + p.id\" class=\"text-sm mb-0\"\n                   [pTooltip]=\"p.tooltip || ''\">{{ p.label }}</label>\n          </div>\n\n        </ng-container>\n      </div>\n    </ng-container>\n  </div>\n  <ng-template pTemplate=\"footer\">\n    <p-button label=\"Reset to model defaults\" [text]=\"true\" size=\"small\"\n              (onClick)=\"resetToolParams(tool.id)\"></p-button>\n    <p-button label=\"Close\" size=\"small\" (onClick)=\"openParamsToolId = null\"></p-button>\n  </ng-template>\n</p-dialog>\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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: i6$1.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: i7.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "autoShowPanelOnPrintableCharacterKeyDown", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { 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: i10.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { 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: i15$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: i17$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: i16.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: ToolbarComponent, selector: "plotting-toolbar", inputs: ["imageInfo", "hasSpatialDataset", "plotTypeOptions", "selectedPlotType", "basePlotType", "isoRange", "maxIndex", "zIndex", "isHeatmap", "is3dRegions", "activeDragMode", "activeSurface3dMode", "axesVisible", "wireframeActive", "resolutionScale", "wandSensitivity", "brushSize", "vertexEraserRadius", "canUndo", "canRedo", "stackOptions", "tools", "imageSmoothingEnabled", "samModels", "samModelId", "contributedTools", "dialogTools", "openDialogToolId", "toolModelIds"], outputs: ["selectPlotType", "addProfileLine", "toggleImageSmoothing", "isoRangeChange", "openChannelHistogram", "openSpatialControls", "openRegionEditor", "selectStackOption", "zScrub", "zSlide", "zIndexInput", "reloadAndPlot", "downloadImage", "autoscaleImage", "toggleDragMode", "zoomIn", "zoomOut", "toggleSurface3dMode", "resetSurfaceCamera", "toggleAxes", "toggleWireframe", "selectResolution", "deleteRegion", "undoRegion", "redoRegion", "segmentRegions", "segmentCellpose", "runTool", "toggleDialogTool", "toolModelChange", "openToolParams", "samModelChange", "wandSensitivityChange", "brushSizeChange", "vertexEraserRadiusChange"] }, { kind: "component", type: RegionEditorComponent, selector: "region-editor" }, { kind: "component", type: ChannelHistogramComponent, selector: "channel-histogram", inputs: ["visible"], outputs: ["visibleChange"] }, { kind: "component", type: SpatialControlsComponent, selector: "spatial-controls", inputs: ["visible", "is3d"], 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<!-- 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]=\"plotTypeMenu\"\n  [selectedPlotType]=\"selectedPlotTypeId\"\n  [basePlotType]=\"basePlotType\"\n  [isoRange]=\"isoRange\"\n  [maxIndex]=\"maxIndex\"\n  [zIndex]=\"zIndex\"\n  [isHeatmap]=\"isHeatmap\"\n  [is3dRegions]=\"isSpatial3dMode\"\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  [contributedTools]=\"contributedTools\"\n  [dialogTools]=\"dialogTools\"\n  [openDialogToolId]=\"openDialogToolId\"\n  (toggleDialogTool)=\"toggleDialogTool($event)\"\n  [toolModelIds]=\"toolModelIds\"\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  (openSpatialControls)=\"openSpatialControls()\"\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  (runTool)=\"runTool($event)\"\n  (toolModelChange)=\"onToolModelChange($event)\"\n  (openToolParams)=\"openToolParams($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<!-- Spatial-omics controls. Renders its own empty state when no dataset (or no\n     SPATIAL_DATA_PORT) is present, so it is always safe to host. -->\n<spatial-controls [(visible)]=\"showSpatialControls\" [is3d]=\"isSpatial3dMode\" ></spatial-controls>\n\n<!-- Side panel of the active contributed plot mode (PLOT_TYPE_CONTRIBUTIONS),\n     in the same right-hand area as the spatial controls and the Region Editor.\n     Exists only while the mode's session is live; there is no close button,\n     because leaving the mode is what ends it. A component panel gets\n     PLOT_MODE_CONTEXT / PLOT_MODE_SESSION from its injector; a `mount` panel's\n     host element is attached to the slot below (see plotModePanelSlot). -->\n<p-dialog *ngIf=\"plotModePanel as panel\" [header]=\"panel.title\" [visible]=\"true\"\n          [modal]=\"false\" [closable]=\"false\" [resizable]=\"true\" [draggable]=\"true\"\n          appendTo=\"body\" position=\"right\" styleClass=\"plot-mode-panel\"\n          [style]=\"{ width: '22rem', maxHeight: '85vh' }\"\n          [contentStyle]=\"{ overflow: 'auto' }\">\n  <ng-container *ngIf=\"panel.component\">\n    <ng-container *ngComponentOutlet=\"panel.component; injector: panel.injector ?? undefined\"></ng-container>\n  </ng-container>\n  <div *ngIf=\"panel.host\" #plotModePanelSlot class=\"plot-mode-panel-slot\"></div>\n</p-dialog>\n\n<!-- An open dialog tool (TOOLBAR_TOOLS, kind: 'dialog'). Non-modal so the user can\n     keep working on the image, e.g. painting with the brush the tool armed. The\n     tool renders its body into a host element attached to the slot below (see\n     toolDialogSlot); closing the dialog ends the tool's session. -->\n<p-dialog *ngIf=\"toolDialog as dlg\" [header]=\"dlg.title\" [visible]=\"true\"\n          (visibleChange)=\"$event || closeDialogTool()\"\n          [modal]=\"false\" [closable]=\"true\" [resizable]=\"true\" [draggable]=\"true\"\n          appendTo=\"body\" position=\"right\" styleClass=\"tool-dialog\"\n          [style]=\"{ width: dlg.width, maxHeight: '85vh' }\"\n          [contentStyle]=\"{ overflow: 'auto' }\">\n  <div #toolDialogSlot class=\"tool-dialog-slot\"></div>\n</p-dialog>\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<!-- Parameters for whichever contributed tool is open. One dialog for all of\n     them: a tool declares its fields (ToolParamSpec) and this renders them, so\n     the toolbar can lay every tool out the same way and a plugin needs no\n     PrimeNG of its own. Defaults come from the active checkpoint, since they\n     encode what it was trained for. -->\n<p-dialog *ngIf=\"openParamsTool as tool\"\n          [header]=\"tool.label + ' parameters'\"\n          [visible]=\"true\" (visibleChange)=\"openParamsToolId = null\"\n          [modal]=\"true\"\n          [style]=\"{width: '30rem'}\" [draggable]=\"false\" [resizable]=\"false\" appendTo=\"body\">\n  <div class=\"grid formgrid p-fluid\">\n    <ng-container *ngFor=\"let p of tool.params\">\n      <div class=\"field\" [ngClass]=\"p.type === 'boolean' ? 'col-12' : 'col-6'\">\n        <ng-container [ngSwitch]=\"p.type\">\n\n          <ng-container *ngSwitchCase=\"'number'\">\n            <label class=\"text-sm\" [pTooltip]=\"p.tooltip || ''\">{{ p.label }}</label>\n            <p-inputNumber [ngModel]=\"paramsFor(tool.id)[p.id]\"\n                           (ngModelChange)=\"paramsFor(tool.id)[p.id] = $event\"\n                           [min]=\"numberParam(p).min\" [max]=\"numberParam(p).max\"\n                           [step]=\"numberParam(p).step\"\n                           [minFractionDigits]=\"numberParam(p).fractionDigits\"\n                           [showButtons]=\"true\"></p-inputNumber>\n          </ng-container>\n\n          <ng-container *ngSwitchCase=\"'select'\">\n            <label class=\"text-sm\" [pTooltip]=\"p.tooltip || ''\">{{ p.label }}</label>\n            <p-dropdown [options]=\"selectParam(p).options\" optionLabel=\"label\" optionValue=\"value\"\n                        [ngModel]=\"paramsFor(tool.id)[p.id]\"\n                        (ngModelChange)=\"paramsFor(tool.id)[p.id] = $event\"\n                        appendTo=\"body\"></p-dropdown>\n          </ng-container>\n\n          <!-- Checkbox label sits beside the box and may run to a sentence, so\n               it does not get the stacked label the other types use. -->\n          <div *ngSwitchCase=\"'boolean'\" class=\"flex align-items-center gap-2\">\n            <p-checkbox [ngModel]=\"paramsFor(tool.id)[p.id]\"\n                        (ngModelChange)=\"paramsFor(tool.id)[p.id] = $event\"\n                        [binary]=\"true\" [inputId]=\"tool.id + '-' + p.id\"></p-checkbox>\n            <label [for]=\"tool.id + '-' + p.id\" class=\"text-sm mb-0\"\n                   [pTooltip]=\"p.tooltip || ''\">{{ p.label }}</label>\n          </div>\n\n        </ng-container>\n      </div>\n    </ng-container>\n  </div>\n  <ng-template pTemplate=\"footer\">\n    <p-button label=\"Reset to model defaults\" [text]=\"true\" size=\"small\"\n              (onClick)=\"resetToolParams(tool.id)\"></p-button>\n    <p-button label=\"Close\" size=\"small\" (onClick)=\"openParamsToolId = null\"></p-button>\n  </ng-template>\n</p-dialog>\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  [hasSpatialDataset]=\"hasSpatialDataset\"\n  [plotTypeOptions]=\"plotTypeMenu\"\n  [selectedPlotType]=\"selectedPlotTypeId\"\n  [basePlotType]=\"basePlotType\"\n  [isoRange]=\"isoRange\"\n  [maxIndex]=\"maxIndex\"\n  [zIndex]=\"zIndex\"\n  [isHeatmap]=\"isHeatmap\"\n  [is3dRegions]=\"isSpatial3dMode\"\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  [contributedTools]=\"contributedTools\"\n  [dialogTools]=\"dialogTools\"\n  [openDialogToolId]=\"openDialogToolId\"\n  (toggleDialogTool)=\"toggleDialogTool($event)\"\n  [toolModelIds]=\"toolModelIds\"\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  (openSpatialControls)=\"openSpatialControls()\"\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  (runTool)=\"runTool($event)\"\n  (toolModelChange)=\"onToolModelChange($event)\"\n  (openToolParams)=\"openToolParams($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<!-- Spatial-omics controls. Renders its own empty state when no dataset (or no\n     SPATIAL_DATA_PORT) is present, so it is always safe to host. -->\n<spatial-controls [(visible)]=\"showSpatialControls\" [is3d]=\"isSpatial3dMode\" ></spatial-controls>\n\n<!-- Side panel of the active contributed plot mode (PLOT_TYPE_CONTRIBUTIONS),\n     in the same right-hand area as the spatial controls and the Region Editor.\n     Exists only while the mode's session is live; there is no close button,\n     because leaving the mode is what ends it. A component panel gets\n     PLOT_MODE_CONTEXT / PLOT_MODE_SESSION from its injector; a `mount` panel's\n     host element is attached to the slot below (see plotModePanelSlot). -->\n<p-dialog *ngIf=\"plotModePanel as panel\" [header]=\"panel.title\" [visible]=\"true\"\n          [modal]=\"false\" [closable]=\"false\" [resizable]=\"true\" [draggable]=\"true\"\n          appendTo=\"body\" position=\"right\" styleClass=\"plot-mode-panel\"\n          [style]=\"{ width: '22rem', maxHeight: '85vh' }\"\n          [contentStyle]=\"{ overflow: 'auto' }\">\n  <ng-container *ngIf=\"panel.component\">\n    <ng-container *ngComponentOutlet=\"panel.component; injector: panel.injector ?? undefined\"></ng-container>\n  </ng-container>\n  <div *ngIf=\"panel.host\" #plotModePanelSlot class=\"plot-mode-panel-slot\"></div>\n</p-dialog>\n\n<!-- An open dialog tool (TOOLBAR_TOOLS, kind: 'dialog'). Non-modal so the user can\n     keep working on the image, e.g. painting with the brush the tool armed. The\n     tool renders its body into a host element attached to the slot below (see\n     toolDialogSlot); closing the dialog ends the tool's session. -->\n<p-dialog *ngIf=\"toolDialog as dlg\" [header]=\"dlg.title\" [visible]=\"true\"\n          (visibleChange)=\"$event || closeDialogTool()\"\n          [modal]=\"false\" [closable]=\"true\" [resizable]=\"true\" [draggable]=\"true\"\n          appendTo=\"body\" position=\"right\" styleClass=\"tool-dialog\"\n          [style]=\"{ width: dlg.width, maxHeight: '85vh' }\"\n          [contentStyle]=\"{ overflow: 'auto' }\">\n  <div #toolDialogSlot class=\"tool-dialog-slot\"></div>\n</p-dialog>\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<!-- Parameters for whichever contributed tool is open. One dialog for all of\n     them: a tool declares its fields (ToolParamSpec) and this renders them, so\n     the toolbar can lay every tool out the same way and a plugin needs no\n     PrimeNG of its own. Defaults come from the active checkpoint, since they\n     encode what it was trained for. -->\n<p-dialog *ngIf=\"openParamsTool as tool\"\n          [header]=\"tool.label + ' parameters'\"\n          [visible]=\"true\" (visibleChange)=\"openParamsToolId = null\"\n          [modal]=\"true\"\n          [style]=\"{width: '30rem'}\" [draggable]=\"false\" [resizable]=\"false\" appendTo=\"body\">\n  <div class=\"grid formgrid p-fluid\">\n    <ng-container *ngFor=\"let p of tool.params\">\n      <div class=\"field\" [ngClass]=\"p.type === 'boolean' ? 'col-12' : 'col-6'\">\n        <ng-container [ngSwitch]=\"p.type\">\n\n          <ng-container *ngSwitchCase=\"'number'\">\n            <label class=\"text-sm\" [pTooltip]=\"p.tooltip || ''\">{{ p.label }}</label>\n            <p-inputNumber [ngModel]=\"paramsFor(tool.id)[p.id]\"\n                           (ngModelChange)=\"paramsFor(tool.id)[p.id] = $event\"\n                           [min]=\"numberParam(p).min\" [max]=\"numberParam(p).max\"\n                           [step]=\"numberParam(p).step\"\n                           [minFractionDigits]=\"numberParam(p).fractionDigits\"\n                           [showButtons]=\"true\"></p-inputNumber>\n          </ng-container>\n\n          <ng-container *ngSwitchCase=\"'select'\">\n            <label class=\"text-sm\" [pTooltip]=\"p.tooltip || ''\">{{ p.label }}</label>\n            <p-dropdown [options]=\"selectParam(p).options\" optionLabel=\"label\" optionValue=\"value\"\n                        [ngModel]=\"paramsFor(tool.id)[p.id]\"\n                        (ngModelChange)=\"paramsFor(tool.id)[p.id] = $event\"\n                        appendTo=\"body\"></p-dropdown>\n          </ng-container>\n\n          <!-- Checkbox label sits beside the box and may run to a sentence, so\n               it does not get the stacked label the other types use. -->\n          <div *ngSwitchCase=\"'boolean'\" class=\"flex align-items-center gap-2\">\n            <p-checkbox [ngModel]=\"paramsFor(tool.id)[p.id]\"\n                        (ngModelChange)=\"paramsFor(tool.id)[p.id] = $event\"\n                        [binary]=\"true\" [inputId]=\"tool.id + '-' + p.id\"></p-checkbox>\n            <label [for]=\"tool.id + '-' + p.id\" class=\"text-sm mb-0\"\n                   [pTooltip]=\"p.tooltip || ''\">{{ p.label }}</label>\n          </div>\n\n        </ng-container>\n      </div>\n    </ng-container>\n  </div>\n  <ng-template pTemplate=\"footer\">\n    <p-button label=\"Reset to model defaults\" [text]=\"true\" size=\"small\"\n              (onClick)=\"resetToolParams(tool.id)\"></p-button>\n    <p-button label=\"Close\" size=\"small\" (onClick)=\"openParamsToolId = null\"></p-button>\n  </ng-template>\n</p-dialog>\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]
@@ -19783,6 +19845,12 @@ class PlotlyService {
         this.plotType = plotType;
     }
     setImageInfo(showStack, scaleratio) {
+        // Nothing plotted yet (a host's first view is an image-less spatial dataset): there is no
+        // image to describe, so nothing to re-plot — stop the spinner rather than throw.
+        if (!this.trueImgSize) {
+            this.state.setImageLoading(false);
+            return;
+        }
         // Build a partial image descriptor and push it to the host via the port.
         const imgInfo = {
             isGrayscale: this.imageInfo?.isGrayscale,
@@ -29663,7 +29731,9 @@ class NapariVisualizerService extends BaseStoreVisualizer {
                 await this.mountSpatialOmics3d(viewer, host);
             }
             else if (isSpatialOmics(plotType)) {
-                await this.mountSpatialOmics(viewer, host, z);
+                // No loaded image: an image-less dataset opened before any image (the visualizer's
+                // plotSpatialWithoutImage) — the observations alone.
+                await this.mountSpatialOmics(viewer, host, z, imageLoaded == null);
             }
             else if (isNapariScatter(plotType)) {
                 await this.mountScatter(viewer, host, z);
@@ -30574,8 +30644,11 @@ class NapariVisualizerService extends BaseStoreVisualizer {
      * exactly as the plain image view does. That is NOT optional here: this mode's selection is
      * driven by drawn ROIs, so without the overlay there is no way to make a selection at all.
      */
-    async mountSpatialOmics(viewer, host, z) {
-        await this.renderImage(z);
+    async mountSpatialOmics(viewer, host, z, noImage = false) {
+        // With no image loaded there is nothing to render under the observations; they are
+        // framed on their own extent, as for any dataset that brings no image.
+        if (!noImage)
+            await this.renderImage(z);
         // Only fit to the image when this dataset actually has one. Otherwise there is
         // nothing to fit, `imageW`/`imageH` still hold the LAST image's dimensions, and
         // this fits to those — and because it defers to a frame, it lands AFTER the points
@@ -30584,8 +30657,12 @@ class NapariVisualizerService extends BaseStoreVisualizer {
         if (this.spatialLatest?.[0]?.imageRef)
             this.fitCameraSoon();
         this.subscribeDisplayState();
-        this.installScaleBar();
-        this.installNavigator(z);
+        // The scale bar and navigator describe an image; with none loaded, whatever they would
+        // read is left over from the last one.
+        if (!noImage) {
+            this.installScaleBar();
+            this.installNavigator(z);
+        }
         this.install2dInteraction(viewer, host);
         this.installSpatialHover(host);
         this.spatialTiles()?.attach(viewer);