@jax-data-science/sci-image-visualizer 0.14.0 → 0.16.0

package/fesm2022/{jax-data-science-sci-image-visualizer-jax-data-science-sci-image-visualizer-DvFp1jNH.mjs → jax-data-science-sci-image-visualizer-jax-data-science-sci-image-visualizer-CYsPzX3J.mjs}

@@ -26,11 +26,11 @@ import * as i5 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
 import * as i5$2 from 'primeng/dropdown';
 import { DropdownModule } from 'primeng/dropdown';
-import * as i7$3 from 'primeng/inputnumber';
+import * as i6$1 from 'primeng/inputnumber';
 import { InputNumberModule } from 'primeng/inputnumber';
 import * as i7$1 from 'primeng/progressbar';
 import { ProgressBarModule } from 'primeng/progressbar';
-import * as i2$1 from 'primeng/slider';
+import * as i8 from 'primeng/slider';
 import { SliderModule } from 'primeng/slider';
 import * as i18 from 'primeng/toast';
 import { ToastModule } from 'primeng/toast';
@@ -56,15 +56,17 @@ import * as i7 from 'primeng/paginator';
 import { PaginatorModule } from 'primeng/paginator';
 import * as i9 from 'primeng/table';
 import { TableModule } from 'primeng/table';
-import * as i8 from 'primeng/radiobutton';
+import * as i8$1 from 'primeng/radiobutton';
 import { RadioButtonModule } from 'primeng/radiobutton';
-import * as i8$1 from 'primeng/selectbutton';
+import * as i8$2 from 'primeng/selectbutton';
 import { SelectButtonModule } from 'primeng/selectbutton';
 import * as i11 from 'primeng/treeselect';
 import { TreeSelectModule } from 'primeng/treeselect';
 import * as Plotly from 'plotly.js-dist-min';
 import * as i3$2 from 'primeng/multiselect';
 import { MultiSelectModule } from 'primeng/multiselect';
+import * as i5$3 from 'primeng/inputswitch';
+import { InputSwitchModule } from 'primeng/inputswitch';
 import { Image } from 'image-js';
 import { Buffer } from 'buffer';
 import * as OpenSeadragon from 'openseadragon';
@@ -8862,6 +8864,10 @@ class VisualizerStore {
         // The derived defaults (full window, gamma 1, default tint) for the current
         // image, kept so "Reset" can restore a channel's window/gamma/colour.
         this.defaultChannelStates = [];
+        /** The channel info the host gave with the image (see setImageMeta), apart from what a tile
+         *  descriptor added since: each adoption merges against this, so a later descriptor can change
+         *  or clear what an earlier one put in. */
+        this.hostChannelInfo = [];
         // Grayscale display (ignore the channel tints) and inverted background — both
         // global display flags, like the colormap.
         this.grayscale$ = new BehaviorSubject(false);
@@ -8998,7 +9004,8 @@ class VisualizerStore {
      * "Actin" or "Cell-Membrane"), where a host's metadata (jit-ui's `/metadata`) carries none, so
      * the Channels pane showed "Channel 1", "Channel 2"… The host's own names and tints win; only a
      * channel still showing its derived default takes the descriptor's, so an edit made in the pane
-     * stays. A no-op when the channel counts differ, or for RGB.
+     * stays. A no-op when the channel counts differ, or for RGB. Each adoption replaces the last
+     * one's names, tints and groups: only the host's own count as overrides.
      */
     adoptChannelInfo(info) {
         const meta = this.imageMeta$.value;
@@ -9008,11 +9015,12 @@ class VisualizerStore {
             return;
         if ((m0.channelCount ?? 1) !== info.length || current.length !== info.length)
             return;
-        const host = m0.channelInfo ?? [];
+        const host = this.hostChannelInfo;
         const merged = info.map((d, i) => ({
             ...(host[i] ?? {}),
             name: host[i]?.name || d.name || '',
             color: host[i]?.color || d.color || '',
+            group: host[i]?.group?.length ? host[i].group : d.group,
         }));
         const before = this.defaultChannelStates;
         const nextMeta = meta.map((e, k) => (k === 0 ? { ...e, channelInfo: merged } : e));
@@ -9030,6 +9038,9 @@ class VisualizerStore {
                 patch.name = now.name;
             if (st.color === was.color && now.color !== was.color)
                 patch.color = now.color;
+            // The groups are the image's, never edited in the pane.
+            if (!sameGroup(st.group, now.group))
+                patch.group = now.group;
             if (!Object.keys(patch).length)
                 return st;
             changed = true;
@@ -9048,6 +9059,7 @@ class VisualizerStore {
      * CD3/CD8/PanCK one. Without a key, only a change of channel count re-derives.
      */
     setImageMeta(imageMeta, imageKey) {
+        this.hostChannelInfo = imageMeta?.[0]?.channelInfo ?? [];
         this.imageMeta$.next(imageMeta);
         const next = this.deriveChannels(imageMeta);
         // Always refresh the reset baseline to the current image's derived defaults
@@ -9088,6 +9100,7 @@ class VisualizerStore {
                 color: info?.[i]?.color || palette[i % palette.length],
                 ...base,
                 visible: defaultChannelVisible(i, count, info?.[i]?.visible),
+                ...(info?.[i]?.group?.length ? { group: [...info[i].group] } : {}),
             }));
         }
         return [{ index: 0, name: 'Intensity', color: '#ffffff', ...base }];
@@ -9250,6 +9263,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
                     type: Inject,
                     args: [PREFERENCES_PORT]
                 }] }] });
+/** Whether two group paths are the same (absent and empty alike). */
+function sameGroup(a, b) {
+    const x = a ?? [];
+    const y = b ?? [];
+    return x.length === y.length && x.every((v, i) => v === y[i]);
+}
 
 class RenderOrchestrator {
     constructor(host, retryDelayMs = 1000) {
@@ -10561,7 +10580,7 @@ function frameToRgba(cached, frameIndex) {
 /** Lazy-import so onnxruntime-web is never pulled into unit tests or the
  *  initial bundle — only when segmentation actually runs. */
 const onnxSessionFactory = async () => {
-    const { OnnxSamSession } = await import('./jax-data-science-sci-image-visualizer-onnx-sam-session-D7lSUAM1.mjs');
+    const { OnnxSamSession } = await import('./jax-data-science-sci-image-visualizer-onnx-sam-session-DaZVXq1s.mjs');
     return new OnnxSamSession();
 };
 /** Thrown inside a load that a model switch superseded. */
@@ -13109,7 +13128,7 @@ class ToolSliderComponent {
         this.valueChange.emit(this.range ? event.values : event.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ToolSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ToolSliderComponent, isStandalone: true, selector: "toolbar-tool-slider", inputs: { label: "label", value: "value", min: "min", max: "max", step: "step", range: "range", tooltip: "tooltip", valueText: "valueText" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<span class=\"flex align-items-center mx-1 toolbar-text\">{{ label }}</span>\n<p-slider\n  [ngModel]=\"value\"\n  [range]=\"range\"\n  [min]=\"min\"\n  [max]=\"max\"\n  [step]=\"step\"\n  [ariaLabel]=\"label\"\n  (onChange)=\"onChange($event)\"\n  [pTooltip]=\"tooltip\"\n  [escape]=\"false\"\n  tooltipPosition=\"bottom\"\n  styleClass=\"wand-sensitivity-slider\"\n></p-slider>\n<span class=\"flex align-items-center mx-1 toolbar-text wand-sensitivity-value\"> {{ valueText }}</span>\n", styles: [".toolbar-text{color:var(--primary-color);font-size:.875rem}.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)}.wand-sensitivity-value{min-width:2rem;text-align:right}:host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: SliderModule }, { kind: "component", type: i2$1.Slider, selector: "p-slider", inputs: ["animate", "disabled", "min", "max", "orientation", "step", "range", "style", "styleClass", "ariaLabel", "ariaLabelledBy", "tabindex", "autofocus"], outputs: ["onChange", "onSlideEnd"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ToolSliderComponent, isStandalone: true, selector: "toolbar-tool-slider", inputs: { label: "label", value: "value", min: "min", max: "max", step: "step", range: "range", tooltip: "tooltip", valueText: "valueText" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<span class=\"flex align-items-center mx-1 toolbar-text\">{{ label }}</span>\n<p-slider\n  [ngModel]=\"value\"\n  [range]=\"range\"\n  [min]=\"min\"\n  [max]=\"max\"\n  [step]=\"step\"\n  [ariaLabel]=\"label\"\n  (onChange)=\"onChange($event)\"\n  [pTooltip]=\"tooltip\"\n  [escape]=\"false\"\n  tooltipPosition=\"bottom\"\n  styleClass=\"wand-sensitivity-slider\"\n></p-slider>\n<span class=\"flex align-items-center mx-1 toolbar-text wand-sensitivity-value\"> {{ valueText }}</span>\n", styles: [".toolbar-text{color:var(--primary-color);font-size:.875rem}.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)}.wand-sensitivity-value{min-width:2rem;text-align:right}:host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: SliderModule }, { kind: "component", type: i8.Slider, selector: "p-slider", inputs: ["animate", "disabled", "min", "max", "orientation", "step", "range", "style", "styleClass", "ariaLabel", "ariaLabelledBy", "tabindex", "autofocus"], outputs: ["onChange", "onSlideEnd"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ToolSliderComponent, decorators: [{
             type: Component,
@@ -13283,7 +13302,7 @@ class StackControlsComponent {
         this.cancelReplot();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: StackControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: StackControlsComponent, isStandalone: true, selector: "toolbar-stack-controls", inputs: { liveScrubber: "liveScrubber", stackToggle: "stackToggle", showStack: "showStack", stackOptions: "stackOptions", zIndex: "zIndex", maxIndex: "maxIndex" }, outputs: { zScrub: "zScrub", zSlide: "zSlide", selectStackOption: "selectStackOption", zIndexInput: "zIndexInput", reloadAndPlot: "reloadAndPlot" }, ngImport: i0, template: "<span class=\"toolbar-separator\"></span>\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=\"stackToggle\">\n  <p-button\n    icon=\"pi pi-image\"\n    size=\"small\"\n    ariaLabel=\"Single image mode\"\n    [text]=\"showStack\"\n    pTooltip=\"Single image mode: enables high-def zoom\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"selectStackOption.emit(stackOptions[0])\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-images\"\n    size=\"small\"\n    ariaLabel=\"Stack mode\"\n    [text]=\"!showStack\"\n    pTooltip=\"Stack mode, enables slicing through image frames\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"selectStackOption.emit(stackOptions[1])\"\n  >\n  </p-button>\n</ng-container>\n<!-- The slice bar. Live views swap the slice in place as it moves; the heatmap's single image\n     is re-plotted at the slice the bar settles on (a drag let go, or a pause in key steps). -->\n<ng-container *ngIf=\"liveScrubber || singleImage\">\n  <span class=\"flex align-items-center mx-1 toolbar-text\">Slice</span>\n  <p-slider\n    [ngModel]=\"zIndex\"\n    [min]=\"0\"\n    [max]=\"maxIndex\"\n    ariaLabel=\"Slice\"\n    (pointerdown)=\"dragging = true\"\n    (onChange)=\"onSliceChange($event.value)\"\n    (onSlideEnd)=\"onSliceEnd($event.value)\"\n    [pTooltip]=\"liveScrubber ? 'Slice through the stack (\u2190 / \u2192 keys)' : 'Slice to plot (\u2190 / \u2192 keys)'\"\n    tooltipPosition=\"bottom\"\n    [style]=\"{ width: '16rem' }\"\n    styleClass=\"wand-sensitivity-slider\"\n  ></p-slider>\n  <span class=\"flex align-items-center mx-1 toolbar-text\">{{ zIndex }} of {{ maxIndex }}</span>\n</ng-container>\n", styles: [".toolbar-text{color:var(--primary-color);font-size:.875rem}.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)}.wand-sensitivity-value{min-width:2rem;text-align:right}:host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.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: "ngmodule", type: SliderModule }, { kind: "component", type: i2$1.Slider, selector: "p-slider", inputs: ["animate", "disabled", "min", "max", "orientation", "step", "range", "style", "styleClass", "ariaLabel", "ariaLabelledBy", "tabindex", "autofocus"], outputs: ["onChange", "onSlideEnd"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: StackControlsComponent, isStandalone: true, selector: "toolbar-stack-controls", inputs: { liveScrubber: "liveScrubber", stackToggle: "stackToggle", showStack: "showStack", stackOptions: "stackOptions", zIndex: "zIndex", maxIndex: "maxIndex" }, outputs: { zScrub: "zScrub", zSlide: "zSlide", selectStackOption: "selectStackOption", zIndexInput: "zIndexInput", reloadAndPlot: "reloadAndPlot" }, ngImport: i0, template: "<span class=\"toolbar-separator\"></span>\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=\"stackToggle\">\n  <p-button\n    icon=\"pi pi-image\"\n    size=\"small\"\n    ariaLabel=\"Single image mode\"\n    [text]=\"showStack\"\n    pTooltip=\"Single image mode: enables high-def zoom\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"selectStackOption.emit(stackOptions[0])\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-images\"\n    size=\"small\"\n    ariaLabel=\"Stack mode\"\n    [text]=\"!showStack\"\n    pTooltip=\"Stack mode, enables slicing through image frames\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"selectStackOption.emit(stackOptions[1])\"\n  >\n  </p-button>\n</ng-container>\n<!-- The slice bar. Live views swap the slice in place as it moves; the heatmap's single image\n     is re-plotted at the slice the bar settles on (a drag let go, or a pause in key steps). -->\n<ng-container *ngIf=\"liveScrubber || singleImage\">\n  <span class=\"flex align-items-center mx-1 toolbar-text\">Slice</span>\n  <p-slider\n    [ngModel]=\"zIndex\"\n    [min]=\"0\"\n    [max]=\"maxIndex\"\n    ariaLabel=\"Slice\"\n    (pointerdown)=\"dragging = true\"\n    (onChange)=\"onSliceChange($event.value)\"\n    (onSlideEnd)=\"onSliceEnd($event.value)\"\n    [pTooltip]=\"liveScrubber ? 'Slice through the stack (\u2190 / \u2192 keys)' : 'Slice to plot (\u2190 / \u2192 keys)'\"\n    tooltipPosition=\"bottom\"\n    [style]=\"{ width: '16rem' }\"\n    styleClass=\"wand-sensitivity-slider\"\n  ></p-slider>\n  <span class=\"flex align-items-center mx-1 toolbar-text\">{{ zIndex }} of {{ maxIndex }}</span>\n</ng-container>\n", styles: [".toolbar-text{color:var(--primary-color);font-size:.875rem}.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)}.wand-sensitivity-value{min-width:2rem;text-align:right}:host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.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: "ngmodule", type: SliderModule }, { kind: "component", type: i8.Slider, selector: "p-slider", inputs: ["animate", "disabled", "min", "max", "orientation", "step", "range", "style", "styleClass", "ariaLabel", "ariaLabelledBy", "tabindex", "autofocus"], outputs: ["onChange", "onSlideEnd"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: StackControlsComponent, decorators: [{
             type: Component,
@@ -13329,12 +13348,12 @@ class ViewControlsComponent {
         this.activeDragMode = null;
         /** The 3D camera mode (`turntable` / `orbit` / …). */
         this.activeSurface3dMode = 'turntable';
-        /** A napari-js WebGPU view (axes toggle, napari camera). */
-        this.isNapariMode = false;
         /** The napari-js surface (shows the wireframe toggle). */
         this.isNapariSurfaceMode = false;
         /** A napari-js 3D view (shows the Resolution dropdown). */
         this.isNapari3dMode = false;
+        /** Whether the view draws the 3D axes gizmo (shows its toggle). */
+        this.axesToggle = false;
         /** The napari 3D axes gizmo is shown. */
         this.axesVisible = true;
         /** The napari surface wireframe is on. */
@@ -13361,11 +13380,11 @@ class ViewControlsComponent {
         this.decimateOptions = NAPARI_DECIMATE_OPTIONS;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ViewControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ViewControlsComponent, isStandalone: true, selector: "toolbar-view-controls", inputs: { isHeatmap: "isHeatmap", zoomTools: "zoomTools", isImageView: "isImageView", activeDragMode: "activeDragMode", activeSurface3dMode: "activeSurface3dMode", isNapariMode: "isNapariMode", isNapariSurfaceMode: "isNapariSurfaceMode", isNapari3dMode: "isNapari3dMode", axesVisible: "axesVisible", wireframeActive: "wireframeActive", resolutionScale: "resolutionScale" }, outputs: { toggleDragMode: "toggleDragMode", zoomIn: "zoomIn", zoomOut: "zoomOut", toggleSurface3dMode: "toggleSurface3dMode", resetSurfaceCamera: "resetSurfaceCamera", toggleAxes: "toggleAxes", toggleWireframe: "toggleWireframe", selectResolution: "selectResolution" }, ngImport: i0, template: "<!-- 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 && zoomTools\">\n  <span class=\"toolbar-separator\"></span>\n  <p-button\n    *ngIf=\"!isImageView\"\n    icon=\"pi pi-search\"\n    size=\"small\"\n    [text]=\"activeDragMode !== 'zoom'\"\n    ariaLabel=\"Zoom drag\"\n    pTooltip=\"Zoom drag\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleDragMode.emit('zoom')\"\n  >\n  </p-button>\n  <p-button\n    size=\"small\"\n    [text]=\"activeDragMode !== 'zoomToBox'\"\n    ariaLabel=\"Zoom box\"\n    pTooltip=\"Zoom box (<kbd>b</kbd>)\"\n    [escape]=\"false\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleDragMode.emit('zoomToBox')\"\n  >\n    <img\n      src=\"assets/plotting/zoom-box.svg\"\n      [class]=\"activeDragMode === 'zoomToBox' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n      style=\"width: 1rem\"\n    />\n  </p-button>\n  <p-button\n    icon=\"pi pi-arrows-alt\"\n    size=\"small\"\n    [text]=\"activeDragMode !== 'pan'\"\n    ariaLabel=\"Pan the image\"\n    pTooltip=\"Pan the image (<kbd>p</kbd>)\"\n    [escape]=\"false\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleDragMode.emit('pan')\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-search-plus\"\n    size=\"small\"\n    [text]=\"true\"\n    ariaLabel=\"Zoom in\"\n    pTooltip=\"Zoom in (<kbd>+</kbd>)\"\n    [escape]=\"false\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"zoomIn.emit()\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-search-minus\"\n    size=\"small\"\n    [text]=\"true\"\n    ariaLabel=\"Zoom out\"\n    pTooltip=\"Zoom out (<kbd>-</kbd>)\"\n    [escape]=\"false\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"zoomOut.emit()\"\n  >\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\n    icon=\"pi pi-search\"\n    size=\"small\"\n    [text]=\"activeSurface3dMode !== 'zoom'\"\n    ariaLabel=\"Zoom\"\n    pTooltip=\"Zoom\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleSurface3dMode.emit('zoom')\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-arrows-alt\"\n    size=\"small\"\n    [text]=\"activeSurface3dMode !== 'pan'\"\n    ariaLabel=\"Pan\"\n    pTooltip=\"Pan\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleSurface3dMode.emit('pan')\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-globe\"\n    size=\"small\"\n    [text]=\"activeSurface3dMode !== 'orbit'\"\n    ariaLabel=\"Orbital rotation\"\n    pTooltip=\"Orbital rotation\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleSurface3dMode.emit('orbit')\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-sync\"\n    size=\"small\"\n    [text]=\"activeSurface3dMode !== 'turntable'\"\n    ariaLabel=\"Turntable rotation\"\n    pTooltip=\"Turntable rotation\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleSurface3dMode.emit('turntable')\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-home\"\n    size=\"small\"\n    [text]=\"true\"\n    ariaLabel=\"Reset camera\"\n    pTooltip=\"Reset camera to default\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"resetSurfaceCamera.emit()\"\n  >\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\n    size=\"small\"\n    *ngIf=\"isNapariMode\"\n    styleClass=\"p-button-icon-only\"\n    [text]=\"!axesVisible\"\n    ariaLabel=\"Toggle 3D axes\"\n    pTooltip=\"Toggle 3D axes / scale\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleAxes.emit()\"\n  >\n    <img\n      src=\"assets/plotting/3d-coordinates.svg\"\n      [class]=\"axesVisible ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n      style=\"width: 1rem\"\n    />\n  </p-button>\n  <!-- Surface wireframe toggle (napari-js WebGPU surface only). -->\n  <p-button\n    icon=\"pi pi-share-alt\"\n    size=\"small\"\n    *ngIf=\"isNapariSurfaceMode\"\n    [text]=\"!wireframeActive\"\n    ariaLabel=\"Toggle wireframe\"\n    pTooltip=\"Toggle wireframe\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleWireframe.emit()\"\n  >\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\n      [options]=\"decimateOptions\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      [ngModel]=\"resolutionScale\"\n      appendTo=\"body\"\n      ariaLabel=\"Resolution\"\n      pTooltip=\"Resolution (decimate factor)\"\n      tooltipPosition=\"bottom\"\n      [style]=\"{ 'min-width': '6rem' }\"\n      (onChange)=\"selectResolution.emit($event.value)\"\n    >\n    </p-dropdown>\n  </ng-container>\n</ng-container>\n", styles: [".toolbar-text{color:var(--primary-color);font-size:.875rem}.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)}.wand-sensitivity-value{min-width:2rem;text-align:right}:host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.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: "ngmodule", type: DropdownModule }, { kind: "component", type: i5$2.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: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ViewControlsComponent, isStandalone: true, selector: "toolbar-view-controls", inputs: { isHeatmap: "isHeatmap", zoomTools: "zoomTools", isImageView: "isImageView", activeDragMode: "activeDragMode", activeSurface3dMode: "activeSurface3dMode", isNapariSurfaceMode: "isNapariSurfaceMode", isNapari3dMode: "isNapari3dMode", axesToggle: "axesToggle", axesVisible: "axesVisible", wireframeActive: "wireframeActive", resolutionScale: "resolutionScale" }, outputs: { toggleDragMode: "toggleDragMode", zoomIn: "zoomIn", zoomOut: "zoomOut", toggleSurface3dMode: "toggleSurface3dMode", resetSurfaceCamera: "resetSurfaceCamera", toggleAxes: "toggleAxes", toggleWireframe: "toggleWireframe", selectResolution: "selectResolution" }, ngImport: i0, template: "<!-- 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 && zoomTools\">\n  <span class=\"toolbar-separator\"></span>\n  <p-button\n    *ngIf=\"!isImageView\"\n    icon=\"pi pi-search\"\n    size=\"small\"\n    [text]=\"activeDragMode !== 'zoom'\"\n    ariaLabel=\"Zoom drag\"\n    pTooltip=\"Zoom drag\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleDragMode.emit('zoom')\"\n  >\n  </p-button>\n  <p-button\n    size=\"small\"\n    [text]=\"activeDragMode !== 'zoomToBox'\"\n    ariaLabel=\"Zoom box\"\n    pTooltip=\"Zoom box (<kbd>b</kbd>)\"\n    [escape]=\"false\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleDragMode.emit('zoomToBox')\"\n  >\n    <img\n      src=\"assets/plotting/zoom-box.svg\"\n      [class]=\"activeDragMode === 'zoomToBox' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n      style=\"width: 1rem\"\n    />\n  </p-button>\n  <p-button\n    icon=\"pi pi-arrows-alt\"\n    size=\"small\"\n    [text]=\"activeDragMode !== 'pan'\"\n    ariaLabel=\"Pan the image\"\n    pTooltip=\"Pan the image (<kbd>p</kbd>)\"\n    [escape]=\"false\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleDragMode.emit('pan')\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-search-plus\"\n    size=\"small\"\n    [text]=\"true\"\n    ariaLabel=\"Zoom in\"\n    pTooltip=\"Zoom in (<kbd>+</kbd>)\"\n    [escape]=\"false\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"zoomIn.emit()\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-search-minus\"\n    size=\"small\"\n    [text]=\"true\"\n    ariaLabel=\"Zoom out\"\n    pTooltip=\"Zoom out (<kbd>-</kbd>)\"\n    [escape]=\"false\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"zoomOut.emit()\"\n  >\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\n    icon=\"pi pi-search\"\n    size=\"small\"\n    [text]=\"activeSurface3dMode !== 'zoom'\"\n    ariaLabel=\"Zoom\"\n    pTooltip=\"Zoom\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleSurface3dMode.emit('zoom')\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-arrows-alt\"\n    size=\"small\"\n    [text]=\"activeSurface3dMode !== 'pan'\"\n    ariaLabel=\"Pan\"\n    pTooltip=\"Pan\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleSurface3dMode.emit('pan')\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-globe\"\n    size=\"small\"\n    [text]=\"activeSurface3dMode !== 'orbit'\"\n    ariaLabel=\"Orbital rotation\"\n    pTooltip=\"Orbital rotation\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleSurface3dMode.emit('orbit')\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-sync\"\n    size=\"small\"\n    [text]=\"activeSurface3dMode !== 'turntable'\"\n    ariaLabel=\"Turntable rotation\"\n    pTooltip=\"Turntable rotation\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleSurface3dMode.emit('turntable')\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-home\"\n    size=\"small\"\n    [text]=\"true\"\n    ariaLabel=\"Reset camera\"\n    pTooltip=\"Reset camera to default\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"resetSurfaceCamera.emit()\"\n  >\n  </p-button>\n  <!-- 3D coordinate-axes / scale gizmo toggle (napari-js WebGPU volume/isosurface, and the 3D\n       spatial cloud).\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\n    size=\"small\"\n    *ngIf=\"axesToggle\"\n    styleClass=\"p-button-icon-only\"\n    [text]=\"!axesVisible\"\n    ariaLabel=\"Toggle 3D axes\"\n    pTooltip=\"Toggle 3D axes / scale\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleAxes.emit()\"\n  >\n    <img\n      src=\"assets/plotting/3d-coordinates.svg\"\n      [class]=\"axesVisible ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n      style=\"width: 1rem\"\n    />\n  </p-button>\n  <!-- Surface wireframe toggle (napari-js WebGPU surface only). -->\n  <p-button\n    icon=\"pi pi-share-alt\"\n    size=\"small\"\n    *ngIf=\"isNapariSurfaceMode\"\n    [text]=\"!wireframeActive\"\n    ariaLabel=\"Toggle wireframe\"\n    pTooltip=\"Toggle wireframe\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleWireframe.emit()\"\n  >\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\n      [options]=\"decimateOptions\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      [ngModel]=\"resolutionScale\"\n      appendTo=\"body\"\n      ariaLabel=\"Resolution\"\n      pTooltip=\"Resolution (decimate factor)\"\n      tooltipPosition=\"bottom\"\n      [style]=\"{ 'min-width': '6rem' }\"\n      (onChange)=\"selectResolution.emit($event.value)\"\n    >\n    </p-dropdown>\n  </ng-container>\n</ng-container>\n", styles: [".toolbar-text{color:var(--primary-color);font-size:.875rem}.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)}.wand-sensitivity-value{min-width:2rem;text-align:right}:host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.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: "ngmodule", type: DropdownModule }, { kind: "component", type: i5$2.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: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ViewControlsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'toolbar-view-controls', standalone: true, imports: [CommonModule, FormsModule, ButtonModule, DropdownModule, TooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- 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 && zoomTools\">\n  <span class=\"toolbar-separator\"></span>\n  <p-button\n    *ngIf=\"!isImageView\"\n    icon=\"pi pi-search\"\n    size=\"small\"\n    [text]=\"activeDragMode !== 'zoom'\"\n    ariaLabel=\"Zoom drag\"\n    pTooltip=\"Zoom drag\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleDragMode.emit('zoom')\"\n  >\n  </p-button>\n  <p-button\n    size=\"small\"\n    [text]=\"activeDragMode !== 'zoomToBox'\"\n    ariaLabel=\"Zoom box\"\n    pTooltip=\"Zoom box (<kbd>b</kbd>)\"\n    [escape]=\"false\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleDragMode.emit('zoomToBox')\"\n  >\n    <img\n      src=\"assets/plotting/zoom-box.svg\"\n      [class]=\"activeDragMode === 'zoomToBox' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n      style=\"width: 1rem\"\n    />\n  </p-button>\n  <p-button\n    icon=\"pi pi-arrows-alt\"\n    size=\"small\"\n    [text]=\"activeDragMode !== 'pan'\"\n    ariaLabel=\"Pan the image\"\n    pTooltip=\"Pan the image (<kbd>p</kbd>)\"\n    [escape]=\"false\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleDragMode.emit('pan')\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-search-plus\"\n    size=\"small\"\n    [text]=\"true\"\n    ariaLabel=\"Zoom in\"\n    pTooltip=\"Zoom in (<kbd>+</kbd>)\"\n    [escape]=\"false\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"zoomIn.emit()\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-search-minus\"\n    size=\"small\"\n    [text]=\"true\"\n    ariaLabel=\"Zoom out\"\n    pTooltip=\"Zoom out (<kbd>-</kbd>)\"\n    [escape]=\"false\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"zoomOut.emit()\"\n  >\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\n    icon=\"pi pi-search\"\n    size=\"small\"\n    [text]=\"activeSurface3dMode !== 'zoom'\"\n    ariaLabel=\"Zoom\"\n    pTooltip=\"Zoom\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleSurface3dMode.emit('zoom')\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-arrows-alt\"\n    size=\"small\"\n    [text]=\"activeSurface3dMode !== 'pan'\"\n    ariaLabel=\"Pan\"\n    pTooltip=\"Pan\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleSurface3dMode.emit('pan')\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-globe\"\n    size=\"small\"\n    [text]=\"activeSurface3dMode !== 'orbit'\"\n    ariaLabel=\"Orbital rotation\"\n    pTooltip=\"Orbital rotation\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleSurface3dMode.emit('orbit')\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-sync\"\n    size=\"small\"\n    [text]=\"activeSurface3dMode !== 'turntable'\"\n    ariaLabel=\"Turntable rotation\"\n    pTooltip=\"Turntable rotation\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleSurface3dMode.emit('turntable')\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-home\"\n    size=\"small\"\n    [text]=\"true\"\n    ariaLabel=\"Reset camera\"\n    pTooltip=\"Reset camera to default\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"resetSurfaceCamera.emit()\"\n  >\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\n    size=\"small\"\n    *ngIf=\"isNapariMode\"\n    styleClass=\"p-button-icon-only\"\n    [text]=\"!axesVisible\"\n    ariaLabel=\"Toggle 3D axes\"\n    pTooltip=\"Toggle 3D axes / scale\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleAxes.emit()\"\n  >\n    <img\n      src=\"assets/plotting/3d-coordinates.svg\"\n      [class]=\"axesVisible ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n      style=\"width: 1rem\"\n    />\n  </p-button>\n  <!-- Surface wireframe toggle (napari-js WebGPU surface only). -->\n  <p-button\n    icon=\"pi pi-share-alt\"\n    size=\"small\"\n    *ngIf=\"isNapariSurfaceMode\"\n    [text]=\"!wireframeActive\"\n    ariaLabel=\"Toggle wireframe\"\n    pTooltip=\"Toggle wireframe\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleWireframe.emit()\"\n  >\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\n      [options]=\"decimateOptions\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      [ngModel]=\"resolutionScale\"\n      appendTo=\"body\"\n      ariaLabel=\"Resolution\"\n      pTooltip=\"Resolution (decimate factor)\"\n      tooltipPosition=\"bottom\"\n      [style]=\"{ 'min-width': '6rem' }\"\n      (onChange)=\"selectResolution.emit($event.value)\"\n    >\n    </p-dropdown>\n  </ng-container>\n</ng-container>\n", styles: [".toolbar-text{color:var(--primary-color);font-size:.875rem}.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)}.wand-sensitivity-value{min-width:2rem;text-align:right}:host{display:contents}\n"] }]
+            args: [{ selector: 'toolbar-view-controls', standalone: true, imports: [CommonModule, FormsModule, ButtonModule, DropdownModule, TooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- 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 && zoomTools\">\n  <span class=\"toolbar-separator\"></span>\n  <p-button\n    *ngIf=\"!isImageView\"\n    icon=\"pi pi-search\"\n    size=\"small\"\n    [text]=\"activeDragMode !== 'zoom'\"\n    ariaLabel=\"Zoom drag\"\n    pTooltip=\"Zoom drag\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleDragMode.emit('zoom')\"\n  >\n  </p-button>\n  <p-button\n    size=\"small\"\n    [text]=\"activeDragMode !== 'zoomToBox'\"\n    ariaLabel=\"Zoom box\"\n    pTooltip=\"Zoom box (<kbd>b</kbd>)\"\n    [escape]=\"false\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleDragMode.emit('zoomToBox')\"\n  >\n    <img\n      src=\"assets/plotting/zoom-box.svg\"\n      [class]=\"activeDragMode === 'zoomToBox' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n      style=\"width: 1rem\"\n    />\n  </p-button>\n  <p-button\n    icon=\"pi pi-arrows-alt\"\n    size=\"small\"\n    [text]=\"activeDragMode !== 'pan'\"\n    ariaLabel=\"Pan the image\"\n    pTooltip=\"Pan the image (<kbd>p</kbd>)\"\n    [escape]=\"false\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleDragMode.emit('pan')\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-search-plus\"\n    size=\"small\"\n    [text]=\"true\"\n    ariaLabel=\"Zoom in\"\n    pTooltip=\"Zoom in (<kbd>+</kbd>)\"\n    [escape]=\"false\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"zoomIn.emit()\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-search-minus\"\n    size=\"small\"\n    [text]=\"true\"\n    ariaLabel=\"Zoom out\"\n    pTooltip=\"Zoom out (<kbd>-</kbd>)\"\n    [escape]=\"false\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"zoomOut.emit()\"\n  >\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\n    icon=\"pi pi-search\"\n    size=\"small\"\n    [text]=\"activeSurface3dMode !== 'zoom'\"\n    ariaLabel=\"Zoom\"\n    pTooltip=\"Zoom\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleSurface3dMode.emit('zoom')\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-arrows-alt\"\n    size=\"small\"\n    [text]=\"activeSurface3dMode !== 'pan'\"\n    ariaLabel=\"Pan\"\n    pTooltip=\"Pan\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleSurface3dMode.emit('pan')\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-globe\"\n    size=\"small\"\n    [text]=\"activeSurface3dMode !== 'orbit'\"\n    ariaLabel=\"Orbital rotation\"\n    pTooltip=\"Orbital rotation\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleSurface3dMode.emit('orbit')\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-sync\"\n    size=\"small\"\n    [text]=\"activeSurface3dMode !== 'turntable'\"\n    ariaLabel=\"Turntable rotation\"\n    pTooltip=\"Turntable rotation\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleSurface3dMode.emit('turntable')\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-home\"\n    size=\"small\"\n    [text]=\"true\"\n    ariaLabel=\"Reset camera\"\n    pTooltip=\"Reset camera to default\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"resetSurfaceCamera.emit()\"\n  >\n  </p-button>\n  <!-- 3D coordinate-axes / scale gizmo toggle (napari-js WebGPU volume/isosurface, and the 3D\n       spatial cloud).\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\n    size=\"small\"\n    *ngIf=\"axesToggle\"\n    styleClass=\"p-button-icon-only\"\n    [text]=\"!axesVisible\"\n    ariaLabel=\"Toggle 3D axes\"\n    pTooltip=\"Toggle 3D axes / scale\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleAxes.emit()\"\n  >\n    <img\n      src=\"assets/plotting/3d-coordinates.svg\"\n      [class]=\"axesVisible ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n      style=\"width: 1rem\"\n    />\n  </p-button>\n  <!-- Surface wireframe toggle (napari-js WebGPU surface only). -->\n  <p-button\n    icon=\"pi pi-share-alt\"\n    size=\"small\"\n    *ngIf=\"isNapariSurfaceMode\"\n    [text]=\"!wireframeActive\"\n    ariaLabel=\"Toggle wireframe\"\n    pTooltip=\"Toggle wireframe\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleWireframe.emit()\"\n  >\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\n      [options]=\"decimateOptions\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      [ngModel]=\"resolutionScale\"\n      appendTo=\"body\"\n      ariaLabel=\"Resolution\"\n      pTooltip=\"Resolution (decimate factor)\"\n      tooltipPosition=\"bottom\"\n      [style]=\"{ 'min-width': '6rem' }\"\n      (onChange)=\"selectResolution.emit($event.value)\"\n    >\n    </p-dropdown>\n  </ng-container>\n</ng-container>\n", styles: [".toolbar-text{color:var(--primary-color);font-size:.875rem}.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)}.wand-sensitivity-value{min-width:2rem;text-align:right}:host{display:contents}\n"] }]
         }], propDecorators: { isHeatmap: [{
                 type: Input
             }], zoomTools: [{
@@ -13376,12 +13395,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
                 type: Input
             }], activeSurface3dMode: [{
                 type: Input
-            }], isNapariMode: [{
-                type: Input
             }], isNapariSurfaceMode: [{
                 type: Input
             }], isNapari3dMode: [{
                 type: Input
+            }], axesToggle: [{
+                type: Input
             }], axesVisible: [{
                 type: Input
             }], wireframeActive: [{
@@ -13993,6 +14012,15 @@ class ToolbarComponent {
     get isIsosurfaceMode() {
         return this.effectivePlotType === PlotType.ISOSURFACE || isNapariIsosurface(this.effectivePlotType);
     }
+    /**
+     * The views that draw the 3D axes gizmo (an `Axes3dGizmo`): napari-js's volume, isosurface and
+     * surface, and the 3D spatial cloud. Not every napari-js view: its 2D image and scatter and its
+     * 3D scatter draw none, and a toggle there would do nothing.
+     */
+    get showsAxesToggle() {
+        const type = this.effectivePlotType;
+        return isNapariVolume(type) || isNapariIsosurface(type) || isNapariSurface(type) || isSpatialOmics3d(type);
+    }
     /** The napari-js WebGPU surface — shows the wireframe toggle. */
     get isNapariSurfaceMode() {
         return isNapariSurface(this.effectivePlotType);
@@ -14010,7 +14038,7 @@ 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, isStandalone: true, selector: "plotting-toolbar", inputs: { imageInfo: "imageInfo", hasSpatialDataset: "hasSpatialDataset", plotTypeOptions: "plotTypeOptions", selectedPlotType: "selectedPlotType", basePlotType: "basePlotType", isoRange: "isoRange", maxIndex: "maxIndex", zIndex: "zIndex", isHeatmap: "isHeatmap", is3dRegions: "is3dRegions", isVolumeView: "isVolumeView", sliceEditor: "sliceEditor", 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", toggleSliceEditor: "toggleSliceEditor", 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" }, ngImport: i0, template: "<p-toolbar>\n  <div class=\"p-toolbar-group-start flex-wrap align-items-center gap-1\">\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\n        *ngFor=\"let tool of dialogTools; trackBy: trackToolById\"\n        size=\"small\"\n        [text]=\"openDialogToolId !== tool.id\"\n        [pTooltip]=\"tool.tooltip\"\n        tooltipPosition=\"bottom\"\n        [ariaLabel]=\"tool.label\"\n        [attr.aria-pressed]=\"openDialogToolId === tool.id\"\n        (onClick)=\"toggleDialogTool.emit(tool.id)\"\n      >\n        <img\n          *ngIf=\"tool.icon.src\"\n          [src]=\"tool.icon.src\"\n          style=\"width: 1rem\"\n          [alt]=\"tool.label\"\n          [class]=\"openDialogToolId === tool.id ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n        />\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    <toolbar-plot-type-selector\n      *ngIf=\"showPlotTypes\"\n      [options]=\"plotTypeOptions\"\n      [selected]=\"selectedPlotType\"\n      [isosurface]=\"isIsosurfaceMode\"\n      [isoRange]=\"isoRange\"\n      [intensityLines]=\"isIntensityCapable\"\n      (selectPlotType)=\"selectPlotType.emit($event)\"\n      (isoRangeChange)=\"isoRangeChange.emit($event)\"\n      (addProfileLine)=\"addProfileLine.emit()\"\n    >\n    </toolbar-plot-type-selector>\n    <!-- Channels & Histogram: brightness/contrast, gamma, per-channel display,\n         colormap/reverse/invert \u2014 opens the floating dialog. -->\n    <p-button\n      *ngIf=\"tools.specialTools\"\n      pRipple\n      size=\"small\"\n      [text]=\"true\"\n      ariaLabel=\"Channels &amp; Histogram\"\n      pTooltip=\"Channels &amp; Histogram (brightness/contrast, colormap)\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"openChannelHistogram.emit()\"\n    >\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\n      *ngIf=\"tools.specialTools && isSpatialMode\"\n      pRipple\n      size=\"small\"\n      [text]=\"true\"\n      ariaLabel=\"Spatial omics controls\"\n      pTooltip=\"Spatial omics (colour by column or gene, legend, selection, distributions)\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"openSpatialControls.emit()\"\n    >\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\n      *ngIf=\"tools.specialTools && isImageView\"\n      size=\"small\"\n      [text]=\"!imageSmoothingEnabled\"\n      ariaLabel=\"Smoothen\"\n      pTooltip=\"Smoothen (turn on image smoothing)\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"toggleImageSmoothing.emit()\"\n    >\n      <img\n        src=\"assets/plotting/smooth.svg\"\n        style=\"width: 1rem\"\n        [class]=\"imageSmoothingEnabled ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n      />\n    </p-button>\n\n    <!-- Stack controls -->\n    <toolbar-stack-controls\n      *ngIf=\"imageInfo?.isStack\"\n      [liveScrubber]=\"showsLiveSliceScrubber\"\n      [stackToggle]=\"!showsLiveSliceScrubber && !isNapariMode && !isSpatialMode\"\n      [showStack]=\"!!imageInfo?.showStack\"\n      [stackOptions]=\"stackOptions\"\n      [zIndex]=\"zIndex\"\n      [maxIndex]=\"maxIndex\"\n      (zScrub)=\"zScrub.emit($event)\"\n      (zSlide)=\"zSlide.emit($event)\"\n      (selectStackOption)=\"selectStackOption.emit($event)\"\n      (zIndexInput)=\"zIndexInput.emit($event)\"\n      (reloadAndPlot)=\"reloadAndPlot.emit()\"\n    >\n    </toolbar-stack-controls>\n\n    <!-- Image actions (special tools) -->\n    <ng-container *ngIf=\"tools.specialTools\">\n      <span class=\"toolbar-separator\"></span>\n      <p-button\n        icon=\"pi pi-download\"\n        size=\"small\"\n        [text]=\"true\"\n        ariaLabel=\"Download image as PNG\"\n        pTooltip=\"Download image as PNG\"\n        tooltipPosition=\"bottom\"\n        (onClick)=\"downloadImage.emit()\"\n      >\n      </p-button>\n      <p-button\n        *ngIf=\"isHeatmap\"\n        icon=\"pi pi-window-maximize\"\n        size=\"small\"\n        [text]=\"true\"\n        ariaLabel=\"Fit to view\"\n        pTooltip=\"Fit to view\"\n        tooltipPosition=\"bottom\"\n        (onClick)=\"autoscaleImage.emit()\"\n      >\n      </p-button>\n    </ng-container>\n\n    <toolbar-view-controls\n      [isHeatmap]=\"isHeatmap\"\n      [zoomTools]=\"tools.zoomTools\"\n      [isImageView]=\"isImageView\"\n      [activeDragMode]=\"activeDragMode\"\n      [activeSurface3dMode]=\"activeSurface3dMode\"\n      [isNapariMode]=\"isNapariMode\"\n      [isNapariSurfaceMode]=\"isNapariSurfaceMode\"\n      [isNapari3dMode]=\"isNapari3dMode\"\n      [axesVisible]=\"axesVisible\"\n      [wireframeActive]=\"wireframeActive\"\n      [resolutionScale]=\"resolutionScale\"\n      (toggleDragMode)=\"toggleDragMode.emit($event)\"\n      (zoomIn)=\"zoomIn.emit()\"\n      (zoomOut)=\"zoomOut.emit()\"\n      (toggleSurface3dMode)=\"toggleSurface3dMode.emit($event)\"\n      (resetSurfaceCamera)=\"resetSurfaceCamera.emit()\"\n      (toggleAxes)=\"toggleAxes.emit()\"\n      (toggleWireframe)=\"toggleWireframe.emit()\"\n      (selectResolution)=\"selectResolution.emit($event)\"\n    >\n    </toolbar-view-controls>\n\n    <!-- A volume view draws no regions; the Region Editor shows them in it in 3D, and the\n         selection tool picks their surfaces there. The slice editor splits the view: the slice,\n         with every region tool, beside the 3D view. -->\n    <ng-container *ngIf=\"isVolumeView && !isHeatmap && !is3dRegions && tools.regionTools\">\n      <span class=\"toolbar-separator\"></span>\n      <p-button\n        size=\"small\"\n        [text]=\"!sliceEditor\"\n        ariaLabel=\"Slice editor\"\n        [attr.aria-pressed]=\"sliceEditor\"\n        [pTooltip]=\"\n          sliceEditor\n            ? 'Close the slice editor'\n            : 'Slice editor: the slice and the sections through x and y beside the 3D view'\n        \"\n        tooltipPosition=\"bottom\"\n        (onClick)=\"toggleSliceEditor.emit()\"\n      >\n        <img\n          src=\"assets/plotting/slice.svg\"\n          style=\"width: 1rem\"\n          alt=\"\"\n          [class]=\"sliceEditor ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n        />\n      </p-button>\n      <toolbar-region-tools\n        *ngIf=\"!sliceEditor\"\n        [activeDragMode]=\"activeDragMode\"\n        [selectOnly]=\"true\"\n        [canUndo]=\"canUndo\"\n        [canRedo]=\"canRedo\"\n        (openRegionEditor)=\"openRegionEditor.emit()\"\n        (toggleDragMode)=\"toggleDragMode.emit($event)\"\n        (undoRegion)=\"undoRegion.emit()\"\n        (redoRegion)=\"redoRegion.emit()\"\n        (deleteRegion)=\"deleteRegion.emit()\"\n      >\n      </toolbar-region-tools>\n    </ng-container>\n    <ng-container *ngIf=\"(isHeatmap || is3dRegions || (isVolumeView && sliceEditor)) && tools.regionTools\">\n      <toolbar-region-tools\n        [activeDragMode]=\"activeDragMode\"\n        [is3dRegions]=\"is3dRegions\"\n        [vertexTools]=\"supportsRegionVertexTools || (isVolumeView && sliceEditor)\"\n        [wandSensitivity]=\"wandSensitivity\"\n        [brushSize]=\"brushSize\"\n        [vertexEraserRadius]=\"vertexEraserRadius\"\n        [canUndo]=\"canUndo\"\n        [canRedo]=\"canRedo\"\n        (openRegionEditor)=\"openRegionEditor.emit()\"\n        (toggleDragMode)=\"toggleDragMode.emit($event)\"\n        (undoRegion)=\"undoRegion.emit()\"\n        (redoRegion)=\"redoRegion.emit()\"\n        (deleteRegion)=\"deleteRegion.emit()\"\n        (wandSensitivityChange)=\"wandSensitivityChange.emit($event)\"\n        (brushSizeChange)=\"brushSizeChange.emit($event)\"\n        (vertexEraserRadiusChange)=\"vertexEraserRadiusChange.emit($event)\"\n      >\n      </toolbar-region-tools>\n      <toolbar-segmentation-tools\n        [activeDragMode]=\"activeDragMode\"\n        [samModels]=\"samModels\"\n        [samModelId]=\"samModelId\"\n        [contributedTools]=\"contributedTools\"\n        [toolModelIds]=\"toolModelIds\"\n        (segmentRegions)=\"segmentRegions.emit()\"\n        (segmentCellpose)=\"segmentCellpose.emit()\"\n        (toggleDragMode)=\"toggleDragMode.emit($event)\"\n        (samModelChange)=\"samModelChange.emit($event)\"\n        (runTool)=\"runTool.emit($event)\"\n        (toolModelChange)=\"toolModelChange.emit($event)\"\n        (openToolParams)=\"openToolParams.emit($event)\"\n      >\n      </toolbar-segmentation-tools>\n    </ng-container>\n\n    <ng-container *ngIf=\"tools.help\">\n      <span class=\"toolbar-separator\"></span>\n\n      <!-- Help -->\n      <p-button\n        icon=\"pi pi-question-circle\"\n        size=\"small\"\n        [text]=\"true\"\n        ariaLabel=\"Help\"\n        pTooltip=\"Help\"\n        tooltipPosition=\"bottom\"\n        (onClick)=\"showHelp()\"\n      >\n      </p-button>\n    </ng-container>\n  </div>\n</p-toolbar>\n<toolbar-help-dialog\n  [(visible)]=\"displayHelpDialog\"\n  [contributedTools]=\"contributedTools\"\n  [dialogTools]=\"dialogTools\"\n>\n</toolbar-help-dialog>\n", styles: [".toolbar-text{color:var(--primary-color);font-size:.875rem}.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)}.wand-sensitivity-value{min-width:2rem;text-align:right}:host{display:block}:host ::ng-deep .p-toolbar{padding:.25rem .5rem}::ng-deep .toolbar-input .p-inputtext{color:var(--primary-color);border-color:var(--primary-color)}::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}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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.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: "ngmodule", type: RippleModule }, { kind: "directive", type: i3$1.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: ToolbarModule }, { kind: "component", type: i4$1.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$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: ToolbarHelpDialogComponent, selector: "toolbar-help-dialog", inputs: ["visible", "contributedTools", "dialogTools"], outputs: ["visibleChange"] }, { kind: "component", type: PlotTypeSelectorComponent, selector: "toolbar-plot-type-selector", inputs: ["options", "selected", "isosurface", "isoRange", "intensityLines"], outputs: ["selectPlotType", "isoRangeChange", "addProfileLine"] }, { kind: "component", type: StackControlsComponent, selector: "toolbar-stack-controls", inputs: ["liveScrubber", "stackToggle", "showStack", "stackOptions", "zIndex", "maxIndex"], outputs: ["zScrub", "zSlide", "selectStackOption", "zIndexInput", "reloadAndPlot"] }, { kind: "component", type: ViewControlsComponent, selector: "toolbar-view-controls", inputs: ["isHeatmap", "zoomTools", "isImageView", "activeDragMode", "activeSurface3dMode", "isNapariMode", "isNapariSurfaceMode", "isNapari3dMode", "axesVisible", "wireframeActive", "resolutionScale"], outputs: ["toggleDragMode", "zoomIn", "zoomOut", "toggleSurface3dMode", "resetSurfaceCamera", "toggleAxes", "toggleWireframe", "selectResolution"] }, { kind: "component", type: RegionToolsComponent, selector: "toolbar-region-tools", inputs: ["activeDragMode", "is3dRegions", "selectOnly", "vertexTools", "wandSensitivity", "brushSize", "vertexEraserRadius", "canUndo", "canRedo"], outputs: ["openRegionEditor", "toggleDragMode", "undoRegion", "redoRegion", "deleteRegion", "wandSensitivityChange", "brushSizeChange", "vertexEraserRadiusChange"] }, { kind: "component", type: SegmentationToolsComponent, selector: "toolbar-segmentation-tools", inputs: ["activeDragMode", "samModels", "samModelId", "contributedTools", "toolModelIds"], outputs: ["segmentRegions", "segmentCellpose", "toggleDragMode", "samModelChange", "runTool", "toolModelChange", "openToolParams"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ToolbarComponent, isStandalone: true, selector: "plotting-toolbar", inputs: { imageInfo: "imageInfo", hasSpatialDataset: "hasSpatialDataset", plotTypeOptions: "plotTypeOptions", selectedPlotType: "selectedPlotType", basePlotType: "basePlotType", isoRange: "isoRange", maxIndex: "maxIndex", zIndex: "zIndex", isHeatmap: "isHeatmap", is3dRegions: "is3dRegions", isVolumeView: "isVolumeView", sliceEditor: "sliceEditor", 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", toggleSliceEditor: "toggleSliceEditor", 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" }, ngImport: i0, template: "<p-toolbar>\n  <div class=\"p-toolbar-group-start flex-wrap align-items-center gap-1\">\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\n        *ngFor=\"let tool of dialogTools; trackBy: trackToolById\"\n        size=\"small\"\n        [text]=\"openDialogToolId !== tool.id\"\n        [pTooltip]=\"tool.tooltip\"\n        tooltipPosition=\"bottom\"\n        [ariaLabel]=\"tool.label\"\n        [attr.aria-pressed]=\"openDialogToolId === tool.id\"\n        (onClick)=\"toggleDialogTool.emit(tool.id)\"\n      >\n        <img\n          *ngIf=\"tool.icon.src\"\n          [src]=\"tool.icon.src\"\n          style=\"width: 1rem\"\n          [alt]=\"tool.label\"\n          [class]=\"openDialogToolId === tool.id ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n        />\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    <toolbar-plot-type-selector\n      *ngIf=\"showPlotTypes\"\n      [options]=\"plotTypeOptions\"\n      [selected]=\"selectedPlotType\"\n      [isosurface]=\"isIsosurfaceMode\"\n      [isoRange]=\"isoRange\"\n      [intensityLines]=\"isIntensityCapable\"\n      (selectPlotType)=\"selectPlotType.emit($event)\"\n      (isoRangeChange)=\"isoRangeChange.emit($event)\"\n      (addProfileLine)=\"addProfileLine.emit()\"\n    >\n    </toolbar-plot-type-selector>\n    <!-- Channels & Histogram: brightness/contrast, gamma, per-channel display,\n         colormap/reverse/invert \u2014 opens the floating dialog. -->\n    <p-button\n      *ngIf=\"tools.specialTools\"\n      pRipple\n      size=\"small\"\n      [text]=\"true\"\n      ariaLabel=\"Channels &amp; Histogram\"\n      pTooltip=\"Channels &amp; Histogram (brightness/contrast, colormap)\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"openChannelHistogram.emit()\"\n    >\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\n      *ngIf=\"tools.specialTools && isSpatialMode\"\n      pRipple\n      size=\"small\"\n      [text]=\"true\"\n      ariaLabel=\"Spatial omics controls\"\n      pTooltip=\"Spatial omics (colour by column or gene, legend, selection, distributions)\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"openSpatialControls.emit()\"\n    >\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\n      *ngIf=\"tools.specialTools && isImageView\"\n      size=\"small\"\n      [text]=\"!imageSmoothingEnabled\"\n      ariaLabel=\"Smoothen\"\n      pTooltip=\"Smoothen (turn on image smoothing)\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"toggleImageSmoothing.emit()\"\n    >\n      <img\n        src=\"assets/plotting/smooth.svg\"\n        style=\"width: 1rem\"\n        [class]=\"imageSmoothingEnabled ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n      />\n    </p-button>\n\n    <!-- Stack controls -->\n    <toolbar-stack-controls\n      *ngIf=\"imageInfo?.isStack\"\n      [liveScrubber]=\"showsLiveSliceScrubber\"\n      [stackToggle]=\"!showsLiveSliceScrubber && !isNapariMode && !isSpatialMode\"\n      [showStack]=\"!!imageInfo?.showStack\"\n      [stackOptions]=\"stackOptions\"\n      [zIndex]=\"zIndex\"\n      [maxIndex]=\"maxIndex\"\n      (zScrub)=\"zScrub.emit($event)\"\n      (zSlide)=\"zSlide.emit($event)\"\n      (selectStackOption)=\"selectStackOption.emit($event)\"\n      (zIndexInput)=\"zIndexInput.emit($event)\"\n      (reloadAndPlot)=\"reloadAndPlot.emit()\"\n    >\n    </toolbar-stack-controls>\n\n    <!-- Image actions (special tools) -->\n    <ng-container *ngIf=\"tools.specialTools\">\n      <span class=\"toolbar-separator\"></span>\n      <p-button\n        icon=\"pi pi-download\"\n        size=\"small\"\n        [text]=\"true\"\n        ariaLabel=\"Download image as PNG\"\n        pTooltip=\"Download image as PNG\"\n        tooltipPosition=\"bottom\"\n        (onClick)=\"downloadImage.emit()\"\n      >\n      </p-button>\n      <p-button\n        *ngIf=\"isHeatmap\"\n        icon=\"pi pi-window-maximize\"\n        size=\"small\"\n        [text]=\"true\"\n        ariaLabel=\"Fit to view\"\n        pTooltip=\"Fit to view\"\n        tooltipPosition=\"bottom\"\n        (onClick)=\"autoscaleImage.emit()\"\n      >\n      </p-button>\n    </ng-container>\n\n    <toolbar-view-controls\n      [isHeatmap]=\"isHeatmap\"\n      [zoomTools]=\"tools.zoomTools\"\n      [isImageView]=\"isImageView\"\n      [activeDragMode]=\"activeDragMode\"\n      [activeSurface3dMode]=\"activeSurface3dMode\"\n      [axesToggle]=\"showsAxesToggle\"\n      [isNapariSurfaceMode]=\"isNapariSurfaceMode\"\n      [isNapari3dMode]=\"isNapari3dMode\"\n      [axesVisible]=\"axesVisible\"\n      [wireframeActive]=\"wireframeActive\"\n      [resolutionScale]=\"resolutionScale\"\n      (toggleDragMode)=\"toggleDragMode.emit($event)\"\n      (zoomIn)=\"zoomIn.emit()\"\n      (zoomOut)=\"zoomOut.emit()\"\n      (toggleSurface3dMode)=\"toggleSurface3dMode.emit($event)\"\n      (resetSurfaceCamera)=\"resetSurfaceCamera.emit()\"\n      (toggleAxes)=\"toggleAxes.emit()\"\n      (toggleWireframe)=\"toggleWireframe.emit()\"\n      (selectResolution)=\"selectResolution.emit($event)\"\n    >\n    </toolbar-view-controls>\n\n    <!-- A volume view draws no regions; the Region Editor shows them in it in 3D, and the\n         selection tool picks their surfaces there. The slice editor splits the view: the slice,\n         with every region tool, beside the 3D view. -->\n    <ng-container *ngIf=\"isVolumeView && !isHeatmap && !is3dRegions && tools.regionTools\">\n      <span class=\"toolbar-separator\"></span>\n      <p-button\n        size=\"small\"\n        [text]=\"!sliceEditor\"\n        ariaLabel=\"Slice editor\"\n        [attr.aria-pressed]=\"sliceEditor\"\n        [pTooltip]=\"\n          sliceEditor\n            ? 'Close the slice editor'\n            : 'Slice editor: the slice and the sections through x and y beside the 3D view'\n        \"\n        tooltipPosition=\"bottom\"\n        (onClick)=\"toggleSliceEditor.emit()\"\n      >\n        <img\n          src=\"assets/plotting/slice.svg\"\n          style=\"width: 1rem\"\n          alt=\"\"\n          [class]=\"sliceEditor ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n        />\n      </p-button>\n      <toolbar-region-tools\n        *ngIf=\"!sliceEditor\"\n        [activeDragMode]=\"activeDragMode\"\n        [selectOnly]=\"true\"\n        [canUndo]=\"canUndo\"\n        [canRedo]=\"canRedo\"\n        (openRegionEditor)=\"openRegionEditor.emit()\"\n        (toggleDragMode)=\"toggleDragMode.emit($event)\"\n        (undoRegion)=\"undoRegion.emit()\"\n        (redoRegion)=\"redoRegion.emit()\"\n        (deleteRegion)=\"deleteRegion.emit()\"\n      >\n      </toolbar-region-tools>\n    </ng-container>\n    <ng-container *ngIf=\"(isHeatmap || is3dRegions || (isVolumeView && sliceEditor)) && tools.regionTools\">\n      <toolbar-region-tools\n        [activeDragMode]=\"activeDragMode\"\n        [is3dRegions]=\"is3dRegions\"\n        [vertexTools]=\"supportsRegionVertexTools || (isVolumeView && sliceEditor)\"\n        [wandSensitivity]=\"wandSensitivity\"\n        [brushSize]=\"brushSize\"\n        [vertexEraserRadius]=\"vertexEraserRadius\"\n        [canUndo]=\"canUndo\"\n        [canRedo]=\"canRedo\"\n        (openRegionEditor)=\"openRegionEditor.emit()\"\n        (toggleDragMode)=\"toggleDragMode.emit($event)\"\n        (undoRegion)=\"undoRegion.emit()\"\n        (redoRegion)=\"redoRegion.emit()\"\n        (deleteRegion)=\"deleteRegion.emit()\"\n        (wandSensitivityChange)=\"wandSensitivityChange.emit($event)\"\n        (brushSizeChange)=\"brushSizeChange.emit($event)\"\n        (vertexEraserRadiusChange)=\"vertexEraserRadiusChange.emit($event)\"\n      >\n      </toolbar-region-tools>\n      <toolbar-segmentation-tools\n        [activeDragMode]=\"activeDragMode\"\n        [samModels]=\"samModels\"\n        [samModelId]=\"samModelId\"\n        [contributedTools]=\"contributedTools\"\n        [toolModelIds]=\"toolModelIds\"\n        (segmentRegions)=\"segmentRegions.emit()\"\n        (segmentCellpose)=\"segmentCellpose.emit()\"\n        (toggleDragMode)=\"toggleDragMode.emit($event)\"\n        (samModelChange)=\"samModelChange.emit($event)\"\n        (runTool)=\"runTool.emit($event)\"\n        (toolModelChange)=\"toolModelChange.emit($event)\"\n        (openToolParams)=\"openToolParams.emit($event)\"\n      >\n      </toolbar-segmentation-tools>\n    </ng-container>\n\n    <ng-container *ngIf=\"tools.help\">\n      <span class=\"toolbar-separator\"></span>\n\n      <!-- Help -->\n      <p-button\n        icon=\"pi pi-question-circle\"\n        size=\"small\"\n        [text]=\"true\"\n        ariaLabel=\"Help\"\n        pTooltip=\"Help\"\n        tooltipPosition=\"bottom\"\n        (onClick)=\"showHelp()\"\n      >\n      </p-button>\n    </ng-container>\n  </div>\n</p-toolbar>\n<toolbar-help-dialog\n  [(visible)]=\"displayHelpDialog\"\n  [contributedTools]=\"contributedTools\"\n  [dialogTools]=\"dialogTools\"\n>\n</toolbar-help-dialog>\n", styles: [".toolbar-text{color:var(--primary-color);font-size:.875rem}.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)}.wand-sensitivity-value{min-width:2rem;text-align:right}:host{display:block}:host ::ng-deep .p-toolbar{padding:.25rem .5rem}::ng-deep .toolbar-input .p-inputtext{color:var(--primary-color);border-color:var(--primary-color)}::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}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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.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: "ngmodule", type: RippleModule }, { kind: "directive", type: i3$1.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: ToolbarModule }, { kind: "component", type: i4$1.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$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: ToolbarHelpDialogComponent, selector: "toolbar-help-dialog", inputs: ["visible", "contributedTools", "dialogTools"], outputs: ["visibleChange"] }, { kind: "component", type: PlotTypeSelectorComponent, selector: "toolbar-plot-type-selector", inputs: ["options", "selected", "isosurface", "isoRange", "intensityLines"], outputs: ["selectPlotType", "isoRangeChange", "addProfileLine"] }, { kind: "component", type: StackControlsComponent, selector: "toolbar-stack-controls", inputs: ["liveScrubber", "stackToggle", "showStack", "stackOptions", "zIndex", "maxIndex"], outputs: ["zScrub", "zSlide", "selectStackOption", "zIndexInput", "reloadAndPlot"] }, { kind: "component", type: ViewControlsComponent, selector: "toolbar-view-controls", inputs: ["isHeatmap", "zoomTools", "isImageView", "activeDragMode", "activeSurface3dMode", "isNapariSurfaceMode", "isNapari3dMode", "axesToggle", "axesVisible", "wireframeActive", "resolutionScale"], outputs: ["toggleDragMode", "zoomIn", "zoomOut", "toggleSurface3dMode", "resetSurfaceCamera", "toggleAxes", "toggleWireframe", "selectResolution"] }, { kind: "component", type: RegionToolsComponent, selector: "toolbar-region-tools", inputs: ["activeDragMode", "is3dRegions", "selectOnly", "vertexTools", "wandSensitivity", "brushSize", "vertexEraserRadius", "canUndo", "canRedo"], outputs: ["openRegionEditor", "toggleDragMode", "undoRegion", "redoRegion", "deleteRegion", "wandSensitivityChange", "brushSizeChange", "vertexEraserRadiusChange"] }, { kind: "component", type: SegmentationToolsComponent, selector: "toolbar-segmentation-tools", inputs: ["activeDragMode", "samModels", "samModelId", "contributedTools", "toolModelIds"], outputs: ["segmentRegions", "segmentCellpose", "toggleDragMode", "samModelChange", "runTool", "toolModelChange", "openToolParams"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ToolbarComponent, decorators: [{
             type: Component,
@@ -14026,7 +14054,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
                         ViewControlsComponent,
                         RegionToolsComponent,
                         SegmentationToolsComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-toolbar>\n  <div class=\"p-toolbar-group-start flex-wrap align-items-center gap-1\">\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\n        *ngFor=\"let tool of dialogTools; trackBy: trackToolById\"\n        size=\"small\"\n        [text]=\"openDialogToolId !== tool.id\"\n        [pTooltip]=\"tool.tooltip\"\n        tooltipPosition=\"bottom\"\n        [ariaLabel]=\"tool.label\"\n        [attr.aria-pressed]=\"openDialogToolId === tool.id\"\n        (onClick)=\"toggleDialogTool.emit(tool.id)\"\n      >\n        <img\n          *ngIf=\"tool.icon.src\"\n          [src]=\"tool.icon.src\"\n          style=\"width: 1rem\"\n          [alt]=\"tool.label\"\n          [class]=\"openDialogToolId === tool.id ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n        />\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    <toolbar-plot-type-selector\n      *ngIf=\"showPlotTypes\"\n      [options]=\"plotTypeOptions\"\n      [selected]=\"selectedPlotType\"\n      [isosurface]=\"isIsosurfaceMode\"\n      [isoRange]=\"isoRange\"\n      [intensityLines]=\"isIntensityCapable\"\n      (selectPlotType)=\"selectPlotType.emit($event)\"\n      (isoRangeChange)=\"isoRangeChange.emit($event)\"\n      (addProfileLine)=\"addProfileLine.emit()\"\n    >\n    </toolbar-plot-type-selector>\n    <!-- Channels & Histogram: brightness/contrast, gamma, per-channel display,\n         colormap/reverse/invert \u2014 opens the floating dialog. -->\n    <p-button\n      *ngIf=\"tools.specialTools\"\n      pRipple\n      size=\"small\"\n      [text]=\"true\"\n      ariaLabel=\"Channels &amp; Histogram\"\n      pTooltip=\"Channels &amp; Histogram (brightness/contrast, colormap)\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"openChannelHistogram.emit()\"\n    >\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\n      *ngIf=\"tools.specialTools && isSpatialMode\"\n      pRipple\n      size=\"small\"\n      [text]=\"true\"\n      ariaLabel=\"Spatial omics controls\"\n      pTooltip=\"Spatial omics (colour by column or gene, legend, selection, distributions)\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"openSpatialControls.emit()\"\n    >\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\n      *ngIf=\"tools.specialTools && isImageView\"\n      size=\"small\"\n      [text]=\"!imageSmoothingEnabled\"\n      ariaLabel=\"Smoothen\"\n      pTooltip=\"Smoothen (turn on image smoothing)\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"toggleImageSmoothing.emit()\"\n    >\n      <img\n        src=\"assets/plotting/smooth.svg\"\n        style=\"width: 1rem\"\n        [class]=\"imageSmoothingEnabled ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n      />\n    </p-button>\n\n    <!-- Stack controls -->\n    <toolbar-stack-controls\n      *ngIf=\"imageInfo?.isStack\"\n      [liveScrubber]=\"showsLiveSliceScrubber\"\n      [stackToggle]=\"!showsLiveSliceScrubber && !isNapariMode && !isSpatialMode\"\n      [showStack]=\"!!imageInfo?.showStack\"\n      [stackOptions]=\"stackOptions\"\n      [zIndex]=\"zIndex\"\n      [maxIndex]=\"maxIndex\"\n      (zScrub)=\"zScrub.emit($event)\"\n      (zSlide)=\"zSlide.emit($event)\"\n      (selectStackOption)=\"selectStackOption.emit($event)\"\n      (zIndexInput)=\"zIndexInput.emit($event)\"\n      (reloadAndPlot)=\"reloadAndPlot.emit()\"\n    >\n    </toolbar-stack-controls>\n\n    <!-- Image actions (special tools) -->\n    <ng-container *ngIf=\"tools.specialTools\">\n      <span class=\"toolbar-separator\"></span>\n      <p-button\n        icon=\"pi pi-download\"\n        size=\"small\"\n        [text]=\"true\"\n        ariaLabel=\"Download image as PNG\"\n        pTooltip=\"Download image as PNG\"\n        tooltipPosition=\"bottom\"\n        (onClick)=\"downloadImage.emit()\"\n      >\n      </p-button>\n      <p-button\n        *ngIf=\"isHeatmap\"\n        icon=\"pi pi-window-maximize\"\n        size=\"small\"\n        [text]=\"true\"\n        ariaLabel=\"Fit to view\"\n        pTooltip=\"Fit to view\"\n        tooltipPosition=\"bottom\"\n        (onClick)=\"autoscaleImage.emit()\"\n      >\n      </p-button>\n    </ng-container>\n\n    <toolbar-view-controls\n      [isHeatmap]=\"isHeatmap\"\n      [zoomTools]=\"tools.zoomTools\"\n      [isImageView]=\"isImageView\"\n      [activeDragMode]=\"activeDragMode\"\n      [activeSurface3dMode]=\"activeSurface3dMode\"\n      [isNapariMode]=\"isNapariMode\"\n      [isNapariSurfaceMode]=\"isNapariSurfaceMode\"\n      [isNapari3dMode]=\"isNapari3dMode\"\n      [axesVisible]=\"axesVisible\"\n      [wireframeActive]=\"wireframeActive\"\n      [resolutionScale]=\"resolutionScale\"\n      (toggleDragMode)=\"toggleDragMode.emit($event)\"\n      (zoomIn)=\"zoomIn.emit()\"\n      (zoomOut)=\"zoomOut.emit()\"\n      (toggleSurface3dMode)=\"toggleSurface3dMode.emit($event)\"\n      (resetSurfaceCamera)=\"resetSurfaceCamera.emit()\"\n      (toggleAxes)=\"toggleAxes.emit()\"\n      (toggleWireframe)=\"toggleWireframe.emit()\"\n      (selectResolution)=\"selectResolution.emit($event)\"\n    >\n    </toolbar-view-controls>\n\n    <!-- A volume view draws no regions; the Region Editor shows them in it in 3D, and the\n         selection tool picks their surfaces there. The slice editor splits the view: the slice,\n         with every region tool, beside the 3D view. -->\n    <ng-container *ngIf=\"isVolumeView && !isHeatmap && !is3dRegions && tools.regionTools\">\n      <span class=\"toolbar-separator\"></span>\n      <p-button\n        size=\"small\"\n        [text]=\"!sliceEditor\"\n        ariaLabel=\"Slice editor\"\n        [attr.aria-pressed]=\"sliceEditor\"\n        [pTooltip]=\"\n          sliceEditor\n            ? 'Close the slice editor'\n            : 'Slice editor: the slice and the sections through x and y beside the 3D view'\n        \"\n        tooltipPosition=\"bottom\"\n        (onClick)=\"toggleSliceEditor.emit()\"\n      >\n        <img\n          src=\"assets/plotting/slice.svg\"\n          style=\"width: 1rem\"\n          alt=\"\"\n          [class]=\"sliceEditor ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n        />\n      </p-button>\n      <toolbar-region-tools\n        *ngIf=\"!sliceEditor\"\n        [activeDragMode]=\"activeDragMode\"\n        [selectOnly]=\"true\"\n        [canUndo]=\"canUndo\"\n        [canRedo]=\"canRedo\"\n        (openRegionEditor)=\"openRegionEditor.emit()\"\n        (toggleDragMode)=\"toggleDragMode.emit($event)\"\n        (undoRegion)=\"undoRegion.emit()\"\n        (redoRegion)=\"redoRegion.emit()\"\n        (deleteRegion)=\"deleteRegion.emit()\"\n      >\n      </toolbar-region-tools>\n    </ng-container>\n    <ng-container *ngIf=\"(isHeatmap || is3dRegions || (isVolumeView && sliceEditor)) && tools.regionTools\">\n      <toolbar-region-tools\n        [activeDragMode]=\"activeDragMode\"\n        [is3dRegions]=\"is3dRegions\"\n        [vertexTools]=\"supportsRegionVertexTools || (isVolumeView && sliceEditor)\"\n        [wandSensitivity]=\"wandSensitivity\"\n        [brushSize]=\"brushSize\"\n        [vertexEraserRadius]=\"vertexEraserRadius\"\n        [canUndo]=\"canUndo\"\n        [canRedo]=\"canRedo\"\n        (openRegionEditor)=\"openRegionEditor.emit()\"\n        (toggleDragMode)=\"toggleDragMode.emit($event)\"\n        (undoRegion)=\"undoRegion.emit()\"\n        (redoRegion)=\"redoRegion.emit()\"\n        (deleteRegion)=\"deleteRegion.emit()\"\n        (wandSensitivityChange)=\"wandSensitivityChange.emit($event)\"\n        (brushSizeChange)=\"brushSizeChange.emit($event)\"\n        (vertexEraserRadiusChange)=\"vertexEraserRadiusChange.emit($event)\"\n      >\n      </toolbar-region-tools>\n      <toolbar-segmentation-tools\n        [activeDragMode]=\"activeDragMode\"\n        [samModels]=\"samModels\"\n        [samModelId]=\"samModelId\"\n        [contributedTools]=\"contributedTools\"\n        [toolModelIds]=\"toolModelIds\"\n        (segmentRegions)=\"segmentRegions.emit()\"\n        (segmentCellpose)=\"segmentCellpose.emit()\"\n        (toggleDragMode)=\"toggleDragMode.emit($event)\"\n        (samModelChange)=\"samModelChange.emit($event)\"\n        (runTool)=\"runTool.emit($event)\"\n        (toolModelChange)=\"toolModelChange.emit($event)\"\n        (openToolParams)=\"openToolParams.emit($event)\"\n      >\n      </toolbar-segmentation-tools>\n    </ng-container>\n\n    <ng-container *ngIf=\"tools.help\">\n      <span class=\"toolbar-separator\"></span>\n\n      <!-- Help -->\n      <p-button\n        icon=\"pi pi-question-circle\"\n        size=\"small\"\n        [text]=\"true\"\n        ariaLabel=\"Help\"\n        pTooltip=\"Help\"\n        tooltipPosition=\"bottom\"\n        (onClick)=\"showHelp()\"\n      >\n      </p-button>\n    </ng-container>\n  </div>\n</p-toolbar>\n<toolbar-help-dialog\n  [(visible)]=\"displayHelpDialog\"\n  [contributedTools]=\"contributedTools\"\n  [dialogTools]=\"dialogTools\"\n>\n</toolbar-help-dialog>\n", styles: [".toolbar-text{color:var(--primary-color);font-size:.875rem}.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)}.wand-sensitivity-value{min-width:2rem;text-align:right}:host{display:block}:host ::ng-deep .p-toolbar{padding:.25rem .5rem}::ng-deep .toolbar-input .p-inputtext{color:var(--primary-color);border-color:var(--primary-color)}::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}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}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-toolbar>\n  <div class=\"p-toolbar-group-start flex-wrap align-items-center gap-1\">\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\n        *ngFor=\"let tool of dialogTools; trackBy: trackToolById\"\n        size=\"small\"\n        [text]=\"openDialogToolId !== tool.id\"\n        [pTooltip]=\"tool.tooltip\"\n        tooltipPosition=\"bottom\"\n        [ariaLabel]=\"tool.label\"\n        [attr.aria-pressed]=\"openDialogToolId === tool.id\"\n        (onClick)=\"toggleDialogTool.emit(tool.id)\"\n      >\n        <img\n          *ngIf=\"tool.icon.src\"\n          [src]=\"tool.icon.src\"\n          style=\"width: 1rem\"\n          [alt]=\"tool.label\"\n          [class]=\"openDialogToolId === tool.id ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n        />\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    <toolbar-plot-type-selector\n      *ngIf=\"showPlotTypes\"\n      [options]=\"plotTypeOptions\"\n      [selected]=\"selectedPlotType\"\n      [isosurface]=\"isIsosurfaceMode\"\n      [isoRange]=\"isoRange\"\n      [intensityLines]=\"isIntensityCapable\"\n      (selectPlotType)=\"selectPlotType.emit($event)\"\n      (isoRangeChange)=\"isoRangeChange.emit($event)\"\n      (addProfileLine)=\"addProfileLine.emit()\"\n    >\n    </toolbar-plot-type-selector>\n    <!-- Channels & Histogram: brightness/contrast, gamma, per-channel display,\n         colormap/reverse/invert \u2014 opens the floating dialog. -->\n    <p-button\n      *ngIf=\"tools.specialTools\"\n      pRipple\n      size=\"small\"\n      [text]=\"true\"\n      ariaLabel=\"Channels &amp; Histogram\"\n      pTooltip=\"Channels &amp; Histogram (brightness/contrast, colormap)\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"openChannelHistogram.emit()\"\n    >\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\n      *ngIf=\"tools.specialTools && isSpatialMode\"\n      pRipple\n      size=\"small\"\n      [text]=\"true\"\n      ariaLabel=\"Spatial omics controls\"\n      pTooltip=\"Spatial omics (colour by column or gene, legend, selection, distributions)\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"openSpatialControls.emit()\"\n    >\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\n      *ngIf=\"tools.specialTools && isImageView\"\n      size=\"small\"\n      [text]=\"!imageSmoothingEnabled\"\n      ariaLabel=\"Smoothen\"\n      pTooltip=\"Smoothen (turn on image smoothing)\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"toggleImageSmoothing.emit()\"\n    >\n      <img\n        src=\"assets/plotting/smooth.svg\"\n        style=\"width: 1rem\"\n        [class]=\"imageSmoothingEnabled ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n      />\n    </p-button>\n\n    <!-- Stack controls -->\n    <toolbar-stack-controls\n      *ngIf=\"imageInfo?.isStack\"\n      [liveScrubber]=\"showsLiveSliceScrubber\"\n      [stackToggle]=\"!showsLiveSliceScrubber && !isNapariMode && !isSpatialMode\"\n      [showStack]=\"!!imageInfo?.showStack\"\n      [stackOptions]=\"stackOptions\"\n      [zIndex]=\"zIndex\"\n      [maxIndex]=\"maxIndex\"\n      (zScrub)=\"zScrub.emit($event)\"\n      (zSlide)=\"zSlide.emit($event)\"\n      (selectStackOption)=\"selectStackOption.emit($event)\"\n      (zIndexInput)=\"zIndexInput.emit($event)\"\n      (reloadAndPlot)=\"reloadAndPlot.emit()\"\n    >\n    </toolbar-stack-controls>\n\n    <!-- Image actions (special tools) -->\n    <ng-container *ngIf=\"tools.specialTools\">\n      <span class=\"toolbar-separator\"></span>\n      <p-button\n        icon=\"pi pi-download\"\n        size=\"small\"\n        [text]=\"true\"\n        ariaLabel=\"Download image as PNG\"\n        pTooltip=\"Download image as PNG\"\n        tooltipPosition=\"bottom\"\n        (onClick)=\"downloadImage.emit()\"\n      >\n      </p-button>\n      <p-button\n        *ngIf=\"isHeatmap\"\n        icon=\"pi pi-window-maximize\"\n        size=\"small\"\n        [text]=\"true\"\n        ariaLabel=\"Fit to view\"\n        pTooltip=\"Fit to view\"\n        tooltipPosition=\"bottom\"\n        (onClick)=\"autoscaleImage.emit()\"\n      >\n      </p-button>\n    </ng-container>\n\n    <toolbar-view-controls\n      [isHeatmap]=\"isHeatmap\"\n      [zoomTools]=\"tools.zoomTools\"\n      [isImageView]=\"isImageView\"\n      [activeDragMode]=\"activeDragMode\"\n      [activeSurface3dMode]=\"activeSurface3dMode\"\n      [axesToggle]=\"showsAxesToggle\"\n      [isNapariSurfaceMode]=\"isNapariSurfaceMode\"\n      [isNapari3dMode]=\"isNapari3dMode\"\n      [axesVisible]=\"axesVisible\"\n      [wireframeActive]=\"wireframeActive\"\n      [resolutionScale]=\"resolutionScale\"\n      (toggleDragMode)=\"toggleDragMode.emit($event)\"\n      (zoomIn)=\"zoomIn.emit()\"\n      (zoomOut)=\"zoomOut.emit()\"\n      (toggleSurface3dMode)=\"toggleSurface3dMode.emit($event)\"\n      (resetSurfaceCamera)=\"resetSurfaceCamera.emit()\"\n      (toggleAxes)=\"toggleAxes.emit()\"\n      (toggleWireframe)=\"toggleWireframe.emit()\"\n      (selectResolution)=\"selectResolution.emit($event)\"\n    >\n    </toolbar-view-controls>\n\n    <!-- A volume view draws no regions; the Region Editor shows them in it in 3D, and the\n         selection tool picks their surfaces there. The slice editor splits the view: the slice,\n         with every region tool, beside the 3D view. -->\n    <ng-container *ngIf=\"isVolumeView && !isHeatmap && !is3dRegions && tools.regionTools\">\n      <span class=\"toolbar-separator\"></span>\n      <p-button\n        size=\"small\"\n        [text]=\"!sliceEditor\"\n        ariaLabel=\"Slice editor\"\n        [attr.aria-pressed]=\"sliceEditor\"\n        [pTooltip]=\"\n          sliceEditor\n            ? 'Close the slice editor'\n            : 'Slice editor: the slice and the sections through x and y beside the 3D view'\n        \"\n        tooltipPosition=\"bottom\"\n        (onClick)=\"toggleSliceEditor.emit()\"\n      >\n        <img\n          src=\"assets/plotting/slice.svg\"\n          style=\"width: 1rem\"\n          alt=\"\"\n          [class]=\"sliceEditor ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n        />\n      </p-button>\n      <toolbar-region-tools\n        *ngIf=\"!sliceEditor\"\n        [activeDragMode]=\"activeDragMode\"\n        [selectOnly]=\"true\"\n        [canUndo]=\"canUndo\"\n        [canRedo]=\"canRedo\"\n        (openRegionEditor)=\"openRegionEditor.emit()\"\n        (toggleDragMode)=\"toggleDragMode.emit($event)\"\n        (undoRegion)=\"undoRegion.emit()\"\n        (redoRegion)=\"redoRegion.emit()\"\n        (deleteRegion)=\"deleteRegion.emit()\"\n      >\n      </toolbar-region-tools>\n    </ng-container>\n    <ng-container *ngIf=\"(isHeatmap || is3dRegions || (isVolumeView && sliceEditor)) && tools.regionTools\">\n      <toolbar-region-tools\n        [activeDragMode]=\"activeDragMode\"\n        [is3dRegions]=\"is3dRegions\"\n        [vertexTools]=\"supportsRegionVertexTools || (isVolumeView && sliceEditor)\"\n        [wandSensitivity]=\"wandSensitivity\"\n        [brushSize]=\"brushSize\"\n        [vertexEraserRadius]=\"vertexEraserRadius\"\n        [canUndo]=\"canUndo\"\n        [canRedo]=\"canRedo\"\n        (openRegionEditor)=\"openRegionEditor.emit()\"\n        (toggleDragMode)=\"toggleDragMode.emit($event)\"\n        (undoRegion)=\"undoRegion.emit()\"\n        (redoRegion)=\"redoRegion.emit()\"\n        (deleteRegion)=\"deleteRegion.emit()\"\n        (wandSensitivityChange)=\"wandSensitivityChange.emit($event)\"\n        (brushSizeChange)=\"brushSizeChange.emit($event)\"\n        (vertexEraserRadiusChange)=\"vertexEraserRadiusChange.emit($event)\"\n      >\n      </toolbar-region-tools>\n      <toolbar-segmentation-tools\n        [activeDragMode]=\"activeDragMode\"\n        [samModels]=\"samModels\"\n        [samModelId]=\"samModelId\"\n        [contributedTools]=\"contributedTools\"\n        [toolModelIds]=\"toolModelIds\"\n        (segmentRegions)=\"segmentRegions.emit()\"\n        (segmentCellpose)=\"segmentCellpose.emit()\"\n        (toggleDragMode)=\"toggleDragMode.emit($event)\"\n        (samModelChange)=\"samModelChange.emit($event)\"\n        (runTool)=\"runTool.emit($event)\"\n        (toolModelChange)=\"toolModelChange.emit($event)\"\n        (openToolParams)=\"openToolParams.emit($event)\"\n      >\n      </toolbar-segmentation-tools>\n    </ng-container>\n\n    <ng-container *ngIf=\"tools.help\">\n      <span class=\"toolbar-separator\"></span>\n\n      <!-- Help -->\n      <p-button\n        icon=\"pi pi-question-circle\"\n        size=\"small\"\n        [text]=\"true\"\n        ariaLabel=\"Help\"\n        pTooltip=\"Help\"\n        tooltipPosition=\"bottom\"\n        (onClick)=\"showHelp()\"\n      >\n      </p-button>\n    </ng-container>\n  </div>\n</p-toolbar>\n<toolbar-help-dialog\n  [(visible)]=\"displayHelpDialog\"\n  [contributedTools]=\"contributedTools\"\n  [dialogTools]=\"dialogTools\"\n>\n</toolbar-help-dialog>\n", styles: [".toolbar-text{color:var(--primary-color);font-size:.875rem}.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)}.wand-sensitivity-value{min-width:2rem;text-align:right}:host{display:block}:host ::ng-deep .p-toolbar{padding:.25rem .5rem}::ng-deep .toolbar-input .p-inputtext{color:var(--primary-color);border-color:var(--primary-color)}::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}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}\n"] }]
         }], propDecorators: { imageInfo: [{
                 type: Input
             }], hasSpatialDataset: [{
@@ -15488,7 +15516,7 @@ class SaveMaskDialogComponent {
         this.visibleChange.emit(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SaveMaskDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: SaveMaskDialogComponent, isStandalone: true, selector: "region-save-mask-dialog", inputs: { visible: "visible", filename: "filename", mode: "mode", busy: "busy", progress: "progress", encoding: "encoding" }, outputs: { visibleChange: "visibleChange", filenameChange: "filenameChange", modeChange: "modeChange", confirm: "confirm", cancelExport: "cancelExport" }, ngImport: i0, template: "<p-dialog\n  header=\"Save Mask\"\n  [visible]=\"visible\"\n  (visibleChange)=\"visibleChange.emit($event)\"\n  [modal]=\"true\"\n  appendTo=\"body\"\n  [style]=\"{ width: '30rem' }\"\n  [draggable]=\"false\"\n  [resizable]=\"false\"\n  [closable]=\"!busy\"\n  [closeOnEscape]=\"!busy\"\n>\n  <!-- Idle: filename + mask-type form. -->\n  <div *ngIf=\"!busy\" class=\"flex flex-column gap-3 pt-2\">\n    <label for=\"mask-filename\" class=\"font-medium\">Mask filename</label>\n    <input\n      id=\"mask-filename\"\n      type=\"text\"\n      pInputText\n      [ngModel]=\"filename\"\n      (ngModelChange)=\"filenameChange.emit($event)\"\n      class=\"w-full\"\n    />\n    <span class=\"font-medium\">Mask type</span>\n    <div class=\"flex align-items-center gap-2\">\n      <p-radioButton\n        inputId=\"mask-binary\"\n        name=\"maskMode\"\n        value=\"binary\"\n        [ngModel]=\"mode\"\n        (ngModelChange)=\"modeChange.emit($event)\"\n      ></p-radioButton>\n      <label for=\"mask-binary\">Binary <span class=\"text-color-secondary\">(regions 1, background 0)</span></label>\n    </div>\n    <div class=\"flex align-items-center gap-2\">\n      <p-radioButton\n        inputId=\"mask-multiclass\"\n        name=\"maskMode\"\n        value=\"multiclass\"\n        [ngModel]=\"mode\"\n        (ngModelChange)=\"modeChange.emit($event)\"\n      ></p-radioButton>\n      <label for=\"mask-multiclass\"\n        >Multi-class <span class=\"text-color-secondary\">(unique id per region, background 0)</span></label\n      >\n    </div>\n  </div>\n\n  <!-- Busy: progress while the worker rasterizes + encodes the PNG. -->\n  <div *ngIf=\"busy\" class=\"flex flex-column gap-3 pt-2\">\n    <span>{{ encoding ? 'Encoding PNG\u2026' : 'Rasterizing regions\u2026' }}</span>\n    <p-progressBar\n      [mode]=\"encoding ? 'indeterminate' : 'determinate'\"\n      [value]=\"progress\"\n      [style]=\"{ height: '0.75rem' }\"\n    ></p-progressBar>\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <p-button *ngIf=\"!busy\" label=\"Cancel\" icon=\"pi pi-times\" [text]=\"true\" (onClick)=\"close()\"></p-button>\n    <p-button\n      *ngIf=\"!busy\"\n      label=\"Download\"\n      icon=\"pi pi-download\"\n      [disabled]=\"!filename || !filename.trim()\"\n      (onClick)=\"confirm.emit()\"\n    ></p-button>\n    <p-button\n      *ngIf=\"busy\"\n      label=\"Cancel\"\n      icon=\"pi pi-times\"\n      [text]=\"true\"\n      (onClick)=\"cancelExport.emit()\"\n    ></p-button>\n  </ng-template>\n</p-dialog>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: "ngmodule", type: SharedModule }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.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: "ngmodule", type: DialogModule }, { kind: "component", type: i5.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: "ngmodule", type: InputTextModule }, { kind: "directive", type: i6.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "component", type: i7$1.ProgressBar, selector: "p-progressBar", inputs: ["value", "showValue", "styleClass", "style", "unit", "mode", "color"] }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: i8.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "label", "variant", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: SaveMaskDialogComponent, isStandalone: true, selector: "region-save-mask-dialog", inputs: { visible: "visible", filename: "filename", mode: "mode", busy: "busy", progress: "progress", encoding: "encoding" }, outputs: { visibleChange: "visibleChange", filenameChange: "filenameChange", modeChange: "modeChange", confirm: "confirm", cancelExport: "cancelExport" }, ngImport: i0, template: "<p-dialog\n  header=\"Save Mask\"\n  [visible]=\"visible\"\n  (visibleChange)=\"visibleChange.emit($event)\"\n  [modal]=\"true\"\n  appendTo=\"body\"\n  [style]=\"{ width: '30rem' }\"\n  [draggable]=\"false\"\n  [resizable]=\"false\"\n  [closable]=\"!busy\"\n  [closeOnEscape]=\"!busy\"\n>\n  <!-- Idle: filename + mask-type form. -->\n  <div *ngIf=\"!busy\" class=\"flex flex-column gap-3 pt-2\">\n    <label for=\"mask-filename\" class=\"font-medium\">Mask filename</label>\n    <input\n      id=\"mask-filename\"\n      type=\"text\"\n      pInputText\n      [ngModel]=\"filename\"\n      (ngModelChange)=\"filenameChange.emit($event)\"\n      class=\"w-full\"\n    />\n    <span class=\"font-medium\">Mask type</span>\n    <div class=\"flex align-items-center gap-2\">\n      <p-radioButton\n        inputId=\"mask-binary\"\n        name=\"maskMode\"\n        value=\"binary\"\n        [ngModel]=\"mode\"\n        (ngModelChange)=\"modeChange.emit($event)\"\n      ></p-radioButton>\n      <label for=\"mask-binary\">Binary <span class=\"text-color-secondary\">(regions 1, background 0)</span></label>\n    </div>\n    <div class=\"flex align-items-center gap-2\">\n      <p-radioButton\n        inputId=\"mask-multiclass\"\n        name=\"maskMode\"\n        value=\"multiclass\"\n        [ngModel]=\"mode\"\n        (ngModelChange)=\"modeChange.emit($event)\"\n      ></p-radioButton>\n      <label for=\"mask-multiclass\"\n        >Multi-class <span class=\"text-color-secondary\">(unique id per region, background 0)</span></label\n      >\n    </div>\n  </div>\n\n  <!-- Busy: progress while the worker rasterizes + encodes the PNG. -->\n  <div *ngIf=\"busy\" class=\"flex flex-column gap-3 pt-2\">\n    <span>{{ encoding ? 'Encoding PNG\u2026' : 'Rasterizing regions\u2026' }}</span>\n    <p-progressBar\n      [mode]=\"encoding ? 'indeterminate' : 'determinate'\"\n      [value]=\"progress\"\n      [style]=\"{ height: '0.75rem' }\"\n    ></p-progressBar>\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <p-button *ngIf=\"!busy\" label=\"Cancel\" icon=\"pi pi-times\" [text]=\"true\" (onClick)=\"close()\"></p-button>\n    <p-button\n      *ngIf=\"!busy\"\n      label=\"Download\"\n      icon=\"pi pi-download\"\n      [disabled]=\"!filename || !filename.trim()\"\n      (onClick)=\"confirm.emit()\"\n    ></p-button>\n    <p-button\n      *ngIf=\"busy\"\n      label=\"Cancel\"\n      icon=\"pi pi-times\"\n      [text]=\"true\"\n      (onClick)=\"cancelExport.emit()\"\n    ></p-button>\n  </ng-template>\n</p-dialog>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: "ngmodule", type: SharedModule }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.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: "ngmodule", type: DialogModule }, { kind: "component", type: i5.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: "ngmodule", type: InputTextModule }, { kind: "directive", type: i6.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "component", type: i7$1.ProgressBar, selector: "p-progressBar", inputs: ["value", "showValue", "styleClass", "style", "unit", "mode", "color"] }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: i8$1.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "label", "variant", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SaveMaskDialogComponent, decorators: [{
             type: Component,
@@ -15589,7 +15617,7 @@ class ManageClassesDialogComponent {
         this.draftChange.emit(this.draft);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ManageClassesDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ManageClassesDialogComponent, isStandalone: true, selector: "region-manage-classes-dialog", inputs: { visible: "visible", draft: "draft" }, outputs: { visibleChange: "visibleChange", draftChange: "draftChange", apply: "apply", resetDefaults: "resetDefaults", importFile: "importFile", export: "export" }, ngImport: i0, template: "<p-dialog\n  header=\"Manage annotation classes\"\n  [visible]=\"visible\"\n  (visibleChange)=\"visibleChange.emit($event)\"\n  [modal]=\"true\"\n  appendTo=\"body\"\n  [style]=\"{ width: '34rem' }\"\n  [draggable]=\"true\"\n  [resizable]=\"false\"\n>\n  <div *ngIf=\"draft\" class=\"manage-dialog flex flex-column gap-3 pt-2\">\n    <div class=\"manage-classes flex flex-column gap-2\">\n      <div\n        *ngFor=\"let c of draft.classes; let i = index; trackBy: trackByIndex\"\n        class=\"manage-class-row flex align-items-center gap-2\"\n      >\n        <hex-color-picker [color]=\"c.color\" (colorChange)=\"patchClass(i, { color: $event })\"></hex-color-picker>\n        <input\n          type=\"text\"\n          pInputText\n          class=\"p-inputtext-sm flex-1\"\n          [ngModel]=\"c.name\"\n          (ngModelChange)=\"patchClass(i, { name: $event })\"\n          placeholder=\"Class name\"\n          aria-label=\"Class name\"\n        />\n        <button\n          pButton\n          type=\"button\"\n          icon=\"pi pi-trash\"\n          class=\"p-button-sm p-button-text p-button-warning\"\n          pTooltip=\"Remove class\"\n          tooltipPosition=\"bottom\"\n          aria-label=\"Remove class\"\n          (click)=\"removeClass(i)\"\n        ></button>\n      </div>\n      <button\n        pButton\n        type=\"button\"\n        icon=\"pi pi-plus\"\n        label=\"Add class\"\n        class=\"p-button-sm p-button-text align-self-start\"\n        (click)=\"addClass()\"\n      ></button>\n    </div>\n\n    <div class=\"manage-section flex flex-column gap-2\">\n      <span class=\"section-title font-medium\"\n        >Fallback palette <small class=\"text-color-secondary\">\u2014 colours for classes not listed</small></span\n      >\n      <div class=\"fallback-palette flex align-items-center flex-wrap gap-2\">\n        <span\n          *ngFor=\"let col of draft.fallbackPalette; let i = index; trackBy: trackByIndex\"\n          class=\"fallback-swatch flex align-items-center\"\n        >\n          <hex-color-picker [color]=\"col\" (colorChange)=\"setFallbackColor(i, $event)\"></hex-color-picker>\n          <i\n            class=\"pi pi-times icon-hover ml-1\"\n            pTooltip=\"Remove\"\n            tooltipPosition=\"bottom\"\n            (click)=\"removeFallbackColor(i)\"\n          ></i>\n        </span>\n        <button\n          pButton\n          type=\"button\"\n          icon=\"pi pi-plus\"\n          class=\"p-button-sm p-button-text\"\n          pTooltip=\"Add fallback colour\"\n          tooltipPosition=\"bottom\"\n          aria-label=\"Add fallback colour\"\n          (click)=\"addFallbackColor()\"\n        ></button>\n      </div>\n    </div>\n\n    <div class=\"flex align-items-center gap-2\">\n      <p-checkbox\n        [ngModel]=\"draft.autoPromote\"\n        (ngModelChange)=\"setAutoPromote($event)\"\n        [binary]=\"true\"\n        inputId=\"autoPromote\"\n      ></p-checkbox>\n      <label for=\"autoPromote\">Auto-add detected classes to this list as they appear</label>\n    </div>\n\n    <div class=\"flex align-items-center gap-3\">\n      <span class=\"font-medium\">Label matching</span>\n      <p-selectButton\n        [options]=\"matchModeOptions\"\n        [ngModel]=\"draft.matchMode\"\n        (ngModelChange)=\"setMatchMode($event)\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      ></p-selectButton>\n    </div>\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <div class=\"manage-footer flex align-items-center flex-wrap gap-2 w-full\">\n      <span class=\"flex align-items-center flex-wrap gap-1\">\n        <p-button label=\"Reset\" icon=\"pi pi-refresh\" [text]=\"true\" (onClick)=\"resetDefaults.emit()\"></p-button>\n        <p-button label=\"Import\" icon=\"pi pi-upload\" [text]=\"true\" (onClick)=\"presetFileInput.click()\"></p-button>\n        <input\n          #presetFileInput\n          type=\"file\"\n          accept=\".json,application/json\"\n          hidden\n          (change)=\"importFile.emit($event); presetFileInput.value = ''\"\n        />\n        <p-button label=\"Export\" icon=\"pi pi-download\" [text]=\"true\" (onClick)=\"export.emit()\"></p-button>\n      </span>\n      <span class=\"flex-1\"></span>\n      <!-- Apply persists to the server and closes. -->\n      <p-button label=\"Apply\" icon=\"pi pi-check\" (onClick)=\"apply.emit()\"></p-button>\n    </div>\n  </ng-template>\n</p-dialog>\n", styles: [".manage-dialog .manage-class-row hex-color-picker,.manage-dialog .fallback-palette hex-color-picker{flex:0 0 auto}.manage-dialog .fallback-palette .icon-hover{cursor:pointer;color:var(--text-color-secondary)}.manage-dialog .fallback-palette .icon-hover:hover{color:var(--primary-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: "ngmodule", type: SharedModule }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i3.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: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$2.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: "ngmodule", type: DialogModule }, { kind: "component", type: i5.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: "ngmodule", type: InputTextModule }, { kind: "directive", type: i6.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i8$1.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$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: HexColorPickerComponent, selector: "hex-color-picker", inputs: ["color"], outputs: ["colorChange", "colorInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ManageClassesDialogComponent, isStandalone: true, selector: "region-manage-classes-dialog", inputs: { visible: "visible", draft: "draft" }, outputs: { visibleChange: "visibleChange", draftChange: "draftChange", apply: "apply", resetDefaults: "resetDefaults", importFile: "importFile", export: "export" }, ngImport: i0, template: "<p-dialog\n  header=\"Manage annotation classes\"\n  [visible]=\"visible\"\n  (visibleChange)=\"visibleChange.emit($event)\"\n  [modal]=\"true\"\n  appendTo=\"body\"\n  [style]=\"{ width: '34rem' }\"\n  [draggable]=\"true\"\n  [resizable]=\"false\"\n>\n  <div *ngIf=\"draft\" class=\"manage-dialog flex flex-column gap-3 pt-2\">\n    <div class=\"manage-classes flex flex-column gap-2\">\n      <div\n        *ngFor=\"let c of draft.classes; let i = index; trackBy: trackByIndex\"\n        class=\"manage-class-row flex align-items-center gap-2\"\n      >\n        <hex-color-picker [color]=\"c.color\" (colorChange)=\"patchClass(i, { color: $event })\"></hex-color-picker>\n        <input\n          type=\"text\"\n          pInputText\n          class=\"p-inputtext-sm flex-1\"\n          [ngModel]=\"c.name\"\n          (ngModelChange)=\"patchClass(i, { name: $event })\"\n          placeholder=\"Class name\"\n          aria-label=\"Class name\"\n        />\n        <button\n          pButton\n          type=\"button\"\n          icon=\"pi pi-trash\"\n          class=\"p-button-sm p-button-text p-button-warning\"\n          pTooltip=\"Remove class\"\n          tooltipPosition=\"bottom\"\n          aria-label=\"Remove class\"\n          (click)=\"removeClass(i)\"\n        ></button>\n      </div>\n      <button\n        pButton\n        type=\"button\"\n        icon=\"pi pi-plus\"\n        label=\"Add class\"\n        class=\"p-button-sm p-button-text align-self-start\"\n        (click)=\"addClass()\"\n      ></button>\n    </div>\n\n    <div class=\"manage-section flex flex-column gap-2\">\n      <span class=\"section-title font-medium\"\n        >Fallback palette <small class=\"text-color-secondary\">\u2014 colours for classes not listed</small></span\n      >\n      <div class=\"fallback-palette flex align-items-center flex-wrap gap-2\">\n        <span\n          *ngFor=\"let col of draft.fallbackPalette; let i = index; trackBy: trackByIndex\"\n          class=\"fallback-swatch flex align-items-center\"\n        >\n          <hex-color-picker [color]=\"col\" (colorChange)=\"setFallbackColor(i, $event)\"></hex-color-picker>\n          <i\n            class=\"pi pi-times icon-hover ml-1\"\n            pTooltip=\"Remove\"\n            tooltipPosition=\"bottom\"\n            (click)=\"removeFallbackColor(i)\"\n          ></i>\n        </span>\n        <button\n          pButton\n          type=\"button\"\n          icon=\"pi pi-plus\"\n          class=\"p-button-sm p-button-text\"\n          pTooltip=\"Add fallback colour\"\n          tooltipPosition=\"bottom\"\n          aria-label=\"Add fallback colour\"\n          (click)=\"addFallbackColor()\"\n        ></button>\n      </div>\n    </div>\n\n    <div class=\"flex align-items-center gap-2\">\n      <p-checkbox\n        [ngModel]=\"draft.autoPromote\"\n        (ngModelChange)=\"setAutoPromote($event)\"\n        [binary]=\"true\"\n        inputId=\"autoPromote\"\n      ></p-checkbox>\n      <label for=\"autoPromote\">Auto-add detected classes to this list as they appear</label>\n    </div>\n\n    <div class=\"flex align-items-center gap-3\">\n      <span class=\"font-medium\">Label matching</span>\n      <p-selectButton\n        [options]=\"matchModeOptions\"\n        [ngModel]=\"draft.matchMode\"\n        (ngModelChange)=\"setMatchMode($event)\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n      ></p-selectButton>\n    </div>\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <div class=\"manage-footer flex align-items-center flex-wrap gap-2 w-full\">\n      <span class=\"flex align-items-center flex-wrap gap-1\">\n        <p-button label=\"Reset\" icon=\"pi pi-refresh\" [text]=\"true\" (onClick)=\"resetDefaults.emit()\"></p-button>\n        <p-button label=\"Import\" icon=\"pi pi-upload\" [text]=\"true\" (onClick)=\"presetFileInput.click()\"></p-button>\n        <input\n          #presetFileInput\n          type=\"file\"\n          accept=\".json,application/json\"\n          hidden\n          (change)=\"importFile.emit($event); presetFileInput.value = ''\"\n        />\n        <p-button label=\"Export\" icon=\"pi pi-download\" [text]=\"true\" (onClick)=\"export.emit()\"></p-button>\n      </span>\n      <span class=\"flex-1\"></span>\n      <!-- Apply persists to the server and closes. -->\n      <p-button label=\"Apply\" icon=\"pi pi-check\" (onClick)=\"apply.emit()\"></p-button>\n    </div>\n  </ng-template>\n</p-dialog>\n", styles: [".manage-dialog .manage-class-row hex-color-picker,.manage-dialog .fallback-palette hex-color-picker{flex:0 0 auto}.manage-dialog .fallback-palette .icon-hover{cursor:pointer;color:var(--text-color-secondary)}.manage-dialog .fallback-palette .icon-hover:hover{color:var(--primary-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: "ngmodule", type: SharedModule }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i3.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: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$2.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: "ngmodule", type: DialogModule }, { kind: "component", type: i5.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: "ngmodule", type: InputTextModule }, { kind: "directive", type: i6.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i8$2.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$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: HexColorPickerComponent, selector: "hex-color-picker", inputs: ["color"], outputs: ["colorChange", "colorInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ManageClassesDialogComponent, decorators: [{
             type: Component,
@@ -17374,6 +17402,71 @@ function onePlane(text) {
     }
 }
 
+/** Joins a group path's labels into its key. */
+const SEP = '\u0001';
+/** Whether any channel says which group it is in. */
+function hasChannelGroups(channels) {
+    return channels.some((c) => !!c.group?.length);
+}
+/**
+ * The Channels pane's rows: each group (as the image's metadata groups its channels, outermost
+ * first) followed by what is in it, in channel order — a group where its first channel is — and
+ * the channels in no group where they are. A group in `collapsed` (by key) hides what is in it.
+ */
+function channelTreeRows(channels, collapsed = new Set()) {
+    const root = { label: '', key: '', items: [] };
+    const groups = new Map();
+    for (const ch of channels) {
+        let parent = root;
+        for (const label of ch.group ?? []) {
+            const key = parent.key ? parent.key + SEP + label : label;
+            let node = groups.get(key);
+            if (!node) {
+                node = { label, key, items: [] };
+                groups.set(key, node);
+                parent.items.push(node);
+            }
+            parent = node;
+        }
+        parent.items.push(ch);
+    }
+    const rows = [];
+    const visit = (node, depth) => {
+        for (const item of node.items) {
+            if ('items' in item) {
+                const members = channelsIn(item);
+                rows.push({
+                    kind: 'group',
+                    key: item.key,
+                    label: item.label,
+                    depth,
+                    channels: members.map((c) => c.index),
+                    shown: members.filter((c) => c.visible).length,
+                    expanded: !collapsed.has(item.key),
+                });
+                if (!collapsed.has(item.key))
+                    visit(item, depth + 1);
+            }
+            else {
+                rows.push({ kind: 'channel', key: `channel${SEP}${item.index}`, depth, channel: item });
+            }
+        }
+    };
+    visit(root, 0);
+    return rows;
+}
+/** Every channel below a group, at any depth. */
+function channelsIn(node) {
+    const out = [];
+    for (const item of node.items) {
+        if ('items' in item)
+            out.push(...channelsIn(item));
+        else
+            out.push(item);
+    }
+    return out;
+}
+
 /**
  * Shared intensity helpers (refactoring plan, Step 5). The two backends use
  * two DIFFERENT scalar projections by design — do not unify them:
@@ -17496,7 +17589,11 @@ class ChannelHistogramComponent {
         this.histogramDiv = `channel-histogram-plot-${++nextInstanceId}`;
         this.lutColors = LUT_COLORS;
         this.channels = [];
+        /** The channels as the table lists them: in their groups when the image groups them, else flat. */
+        this.rows = [];
         this.selected = null;
+        /** The groups folded shut, by key; kept across emissions and images with the same groups. */
+        this.collapsed = new Set();
         this.invert = false;
         this.logScale = false;
         /** Bounded retries while the (async) histogram sampling resolves. */
@@ -17540,6 +17637,7 @@ class ChannelHistogramComponent {
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe((channels) => {
             this.channels = channels ?? [];
+            this.rows = channelTreeRows(this.channels, this.collapsed);
             // Keep the selected row (by index) or default to the first channel.
             const keepIdx = this.selected?.index ?? 0;
             this.selected = this.channels.find((c) => c.index === keepIdx) ?? this.channels[0] ?? null;
@@ -17654,6 +17752,36 @@ class ChannelHistogramComponent {
     onVisibleToggle(ch, value) {
         this.api.setChannelState(ch.index, { visible: value });
     }
+    /** The table row of the selected channel, for its highlight. */
+    get selectedRow() {
+        const sel = this.selected;
+        return sel ? (this.rows.find((r) => r.kind === 'channel' && r.channel.index === sel.index) ?? null) : null;
+    }
+    /** A row was selected: a channel's selects the channel (a group's row cannot be). */
+    onRowSelect(row) {
+        if (row?.kind === 'channel')
+            this.selectChannel(row.channel);
+    }
+    /** Fold a group shut, or open it. */
+    toggleGroup(row) {
+        if (this.collapsed.has(row.key))
+            this.collapsed.delete(row.key);
+        else
+            this.collapsed.add(row.key);
+        this.rows = channelTreeRows(this.channels, this.collapsed);
+        this.changed();
+    }
+    /** Show or hide every channel of a group. */
+    onGroupVisibleToggle(row, value) {
+        for (const index of row.channels) {
+            const ch = this.channels.find((c) => c.index === index);
+            if (ch && ch.visible !== value)
+                this.api.setChannelState(index, { visible: value });
+        }
+    }
+    trackRow(_, row) {
+        return row.key;
+    }
     onColorChange(ch, color) {
         this.api.setChannelState(ch.index, { color });
         // The histogram bars are drawn in the selected channel's colour — redraw
@@ -17858,7 +17986,7 @@ class ChannelHistogramComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ChannelHistogramComponent, deps: [{ token: CHANNEL_HISTOGRAM_API }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ChannelHistogramComponent, isStandalone: true, selector: "channel-histogram", inputs: { visible: "visible" }, outputs: { visibleChange: "visibleChange" }, ngImport: i0, template: "<p-dialog\n  header=\"Channels &amp; Histogram\"\n  [visible]=\"visible\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  [modal]=\"false\"\n  [resizable]=\"true\"\n  [draggable]=\"true\"\n  [style]=\"{ width: '30rem' }\"\n  [breakpoints]=\"{ '960px': '90vw' }\"\n  styleClass=\"channel-histogram-dialog\"\n  (onShow)=\"onShow()\"\n>\n  <div class=\"ch-body\">\n    <!-- Channels -->\n    <p-table\n      [value]=\"channels\"\n      selectionMode=\"single\"\n      [(selection)]=\"selected\"\n      dataKey=\"index\"\n      (onRowSelect)=\"selectChannel($event.data)\"\n      styleClass=\"ch-table p-datatable-sm\"\n    >\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th style=\"width: 2.5rem\"></th>\n          <th>Channel</th>\n          <th style=\"width: 3.5rem; text-align: center\">Show</th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\" let-ch>\n        <tr [pSelectableRow]=\"ch\">\n          <td>\n            <hex-color-picker\n              *ngIf=\"multichannel\"\n              [color]=\"ch.color\"\n              (colorChange)=\"onColorChange(ch, $event)\"\n            ></hex-color-picker>\n          </td>\n          <td>{{ ch.name }}</td>\n          <td style=\"text-align: center\">\n            <p-checkbox\n              [binary]=\"true\"\n              [ngModel]=\"ch.visible\"\n              (onChange)=\"onVisibleToggle(ch, $event.checked)\"\n            ></p-checkbox>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n\n    <!-- Pseudo-color presets for the selected channel (multichannel only;\n         grayscale uses the colormap below). -->\n    <div class=\"ch-presets\" *ngIf=\"multichannel && selected\">\n      <span class=\"ch-presets-lbl\">{{ selected.name }} LUT</span>\n      <button\n        *ngFor=\"let p of lutColors\"\n        type=\"button\"\n        class=\"ch-preset\"\n        [style.background]=\"p.color\"\n        [pTooltip]=\"p.name\"\n        tooltipPosition=\"top\"\n        (click)=\"setPreset(selected, p.color)\"\n      ></button>\n    </div>\n\n    <!-- Histogram -->\n    <div class=\"ch-hist-head\">\n      <span>Histogram{{ selected ? ' \u2014 ' + selected.name : '' }}</span>\n      <p-checkbox\n        [binary]=\"true\"\n        [(ngModel)]=\"logScale\"\n        (onChange)=\"toggleLog($event.checked)\"\n        label=\"Log\"\n      ></p-checkbox>\n    </div>\n    <div [id]=\"histogramDiv\" class=\"ch-hist-plot\"></div>\n\n    <!-- Display window / gamma -->\n    <div class=\"ch-sliders\" *ngIf=\"selected\">\n      <!-- Window endpoints are shown/edited in NATIVE units (0..255 for 8-bit,\n           the channel's observed native range for 16-bit). One-way bound to the\n           native getters; the handlers map back to the 8-bit display window. -->\n      <div class=\"ch-row\">\n        <span class=\"ch-lbl\">Min</span>\n        <p-slider\n          [ngModel]=\"minNative\"\n          [min]=\"sliderMin\"\n          [max]=\"sliderMax\"\n          [step]=\"sliderStep\"\n          (onChange)=\"onMinChange($event.value)\"\n          styleClass=\"ch-slider\"\n        ></p-slider>\n        <p-inputNumber\n          [ngModel]=\"minNative\"\n          [min]=\"sliderMin\"\n          [max]=\"sliderMax\"\n          [showButtons]=\"false\"\n          (onInput)=\"onMinChange($event.value)\"\n          styleClass=\"ch-num\"\n        ></p-inputNumber>\n        <span class=\"ch-busy\"\n          ><i *ngIf=\"activeAdjust === 'min'\" class=\"pi pi-spin pi-spinner\" aria-label=\"updating\"></i\n        ></span>\n      </div>\n      <div class=\"ch-row\">\n        <span class=\"ch-lbl\">Max</span>\n        <p-slider\n          [ngModel]=\"maxNative\"\n          [min]=\"sliderMin\"\n          [max]=\"sliderMax\"\n          [step]=\"sliderStep\"\n          (onChange)=\"onMaxChange($event.value)\"\n          styleClass=\"ch-slider\"\n        ></p-slider>\n        <p-inputNumber\n          [ngModel]=\"maxNative\"\n          [min]=\"sliderMin\"\n          [max]=\"sliderMax\"\n          [showButtons]=\"false\"\n          (onInput)=\"onMaxChange($event.value)\"\n          styleClass=\"ch-num\"\n        ></p-inputNumber>\n        <span class=\"ch-busy\"\n          ><i *ngIf=\"activeAdjust === 'max'\" class=\"pi pi-spin pi-spinner\" aria-label=\"updating\"></i\n        ></span>\n      </div>\n      <div class=\"ch-row\">\n        <span class=\"ch-lbl\">Gamma</span>\n        <p-slider\n          [(ngModel)]=\"selected.gamma\"\n          [min]=\"0.1\"\n          [max]=\"5\"\n          [step]=\"0.01\"\n          (onChange)=\"onGammaChange($event.value)\"\n          styleClass=\"ch-slider\"\n        ></p-slider>\n        <p-inputNumber\n          [(ngModel)]=\"selected.gamma\"\n          [min]=\"0.1\"\n          [max]=\"5\"\n          [minFractionDigits]=\"2\"\n          [maxFractionDigits]=\"2\"\n          [showButtons]=\"false\"\n          (onInput)=\"onGammaChange($event.value)\"\n          styleClass=\"ch-num\"\n        ></p-inputNumber>\n        <span class=\"ch-busy\"\n          ><i *ngIf=\"activeAdjust === 'gamma'\" class=\"pi pi-spin pi-spinner\" aria-label=\"updating\"></i\n        ></span>\n      </div>\n      <div class=\"ch-btns\">\n        <p-button label=\"Auto\" size=\"small\" (onClick)=\"auto()\"></p-button>\n        <p-button label=\"Reset\" size=\"small\" [text]=\"true\" (onClick)=\"reset()\"></p-button>\n      </div>\n    </div>\n\n    <!-- LUT / colormap controls. The colormap maps single-channel intensity \u2192\n         colour, so it only applies to grayscale; RGB/multichannel use the\n         per-channel pseudo-colour presets above. -->\n    <div class=\"ch-display\">\n      <p-treeSelect\n        *ngIf=\"!multichannel\"\n        [options]=\"colormapOptions\"\n        [(ngModel)]=\"selectedColormap\"\n        [selectionMode]=\"'single'\"\n        placeholder=\"Colormap\"\n        [scrollHeight]=\"'300px'\"\n        pTooltip=\"Color Lookup Tables\"\n        tooltipPosition=\"bottom\"\n        (onNodeSelect)=\"onColormap($event.node)\"\n      >\n        <ng-template let-node pTemplate=\"default\">\n          <div class=\"flex align-items-center gap-2\">\n            <img *ngIf=\"!node.children\" [src]=\"node.data?.src\" class=\"colormap\" />\n            <div>{{ node.label }}</div>\n          </div>\n        </ng-template>\n      </p-treeSelect>\n      <p-checkbox\n        [binary]=\"true\"\n        [(ngModel)]=\"invert\"\n        (onChange)=\"onInvert($event.checked)\"\n        label=\"Invert\"\n      ></p-checkbox>\n    </div>\n\n    <!-- Exports: an 8-bit publication composite (always), plus a true-16-bit\n         data-preserving TIFF when the image carries >8-bit pixels. -->\n    <div class=\"ch-export\">\n      <p-button\n        label=\"Export composite (PNG)\"\n        icon=\"pi pi-download\"\n        size=\"small\"\n        (onClick)=\"exportComposite()\"\n      ></p-button>\n      <p-button\n        *ngIf=\"is16bit\"\n        label=\"Export 16-bit TIFF\"\n        icon=\"pi pi-download\"\n        size=\"small\"\n        [outlined]=\"true\"\n        pTooltip=\"Data-preserving multi-band TIFF (visible channels, native bit depth)\"\n        tooltipPosition=\"top\"\n        (onClick)=\"exportData()\"\n      ></p-button>\n    </div>\n  </div>\n</p-dialog>\n", styles: [":host ::ng-deep .channel-histogram-dialog.p-dialog{display:flex;flex-direction:column}:host ::ng-deep .channel-histogram-dialog .p-dialog-content{display:flex;flex-direction:column;flex:1 1 auto;overflow:auto}.ch-body{display:flex;flex-direction:column;gap:.5rem;flex:1 1 auto;min-height:0}.ch-table{flex:0 0 auto}.ch-presets{display:flex;align-items:center;gap:4px;margin:.25rem 0}.ch-presets .ch-presets-lbl{font-size:.8rem;margin-right:.25rem}.ch-presets .ch-preset{width:16px;height:16px;padding:0;border:1px solid rgba(0,0,0,.3);border-radius:2px;cursor:pointer}.ch-export{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.25rem}.ch-hist-head{display:flex;align-items:center;justify-content:space-between;font-size:.8rem;font-weight:600;margin-top:.25rem}.ch-hist-plot{flex:1 1 auto;min-height:120px;width:100%}.ch-sliders{display:flex;flex-direction:column;gap:.35rem}.ch-sliders .ch-row{display:flex;align-items:center;gap:.5rem}.ch-sliders .ch-row .ch-lbl{flex:0 0 3rem;font-size:.8rem}.ch-sliders .ch-row p-slider{flex:2 1 0;min-width:0}.ch-sliders .ch-row p-inputnumber{flex:1 1 0;min-width:0}.ch-sliders .ch-row .ch-busy{flex:0 0 1rem;display:inline-flex;align-items:center;justify-content:center;color:#4fa3ff;font-size:.8rem}.ch-sliders .ch-btns{display:flex;gap:.5rem;margin-top:.25rem}.ch-display{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-top:.25rem}.ch-display .colormap{width:60px;height:12px;object-fit:fill}:host ::ng-deep .ch-num .p-inputnumber-input{width:100%}:host ::ng-deep .ch-row p-slider .p-slider{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: SharedModule }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.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: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$2.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: "ngmodule", type: DialogModule }, { kind: "component", type: i5.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: "ngmodule", type: InputNumberModule }, { kind: "component", type: i7$3.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: "ngmodule", type: SliderModule }, { kind: "component", type: i2$1.Slider, selector: "p-slider", inputs: ["animate", "disabled", "min", "max", "orientation", "step", "range", "style", "styleClass", "ariaLabel", "ariaLabelledBy", "tabindex", "autofocus"], outputs: ["onChange", "onSlideEnd"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i9.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i9.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: TreeSelectModule }, { kind: "component", type: i11.TreeSelect, selector: "p-treeSelect", inputs: ["inputId", "scrollHeight", "disabled", "metaKeySelection", "variant", "display", "selectionMode", "tabindex", "ariaLabel", "ariaLabelledBy", "placeholder", "panelClass", "panelStyle", "panelStyleClass", "containerStyle", "containerStyleClass", "labelStyle", "labelStyleClass", "overlayOptions", "emptyMessage", "appendTo", "filter", "filterBy", "filterMode", "filterPlaceholder", "filterLocale", "filterInputAutoFocus", "propagateSelectionDown", "propagateSelectionUp", "showClear", "resetFilterOnHide", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autofocus", "options", "showTransitionOptions", "hideTransitionOptions", "loading"], outputs: ["onNodeExpand", "onNodeCollapse", "onShow", "onHide", "onClear", "onFilter", "onFocus", "onBlur", "onNodeUnselect", "onNodeSelect"] }, { kind: "component", type: HexColorPickerComponent, selector: "hex-color-picker", inputs: ["color"], outputs: ["colorChange", "colorInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ChannelHistogramComponent, isStandalone: true, selector: "channel-histogram", inputs: { visible: "visible" }, outputs: { visibleChange: "visibleChange" }, ngImport: i0, template: "<p-dialog\n  header=\"Channels &amp; Histogram\"\n  [visible]=\"visible\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  [modal]=\"false\"\n  [resizable]=\"true\"\n  [draggable]=\"true\"\n  [style]=\"{ width: '30rem' }\"\n  [breakpoints]=\"{ '960px': '90vw' }\"\n  styleClass=\"channel-histogram-dialog\"\n  (onShow)=\"onShow()\"\n>\n  <div class=\"ch-body\">\n    <!-- Channels -->\n    <p-table\n      [value]=\"rows\"\n      selectionMode=\"single\"\n      [selection]=\"selectedRow\"\n      dataKey=\"key\"\n      (onRowSelect)=\"onRowSelect($event.data)\"\n      [rowTrackBy]=\"trackRow\"\n      styleClass=\"ch-table p-datatable-sm\"\n    >\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th style=\"width: 2.5rem\"></th>\n          <th>Channel</th>\n          <th style=\"width: 3.5rem; text-align: center\">Show</th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\" let-row>\n        <!-- A group: folds open or shut, and shows or hides all its channels. -->\n        <tr *ngIf=\"row.kind === 'group'\" class=\"ch-group-row\">\n          <td colspan=\"2\">\n            <button\n              type=\"button\"\n              class=\"ch-group-toggle\"\n              [style.padding-left.rem]=\"row.depth\"\n              [attr.aria-expanded]=\"row.expanded\"\n              (click)=\"toggleGroup(row)\"\n            >\n              <i class=\"pi\" [ngClass]=\"row.expanded ? 'pi-chevron-down' : 'pi-chevron-right'\"></i>\n              <span class=\"ch-group-label\">{{ row.label }}</span>\n              <span class=\"ch-group-count\">({{ row.channels.length }})</span>\n            </button>\n          </td>\n          <td style=\"text-align: center\">\n            <p-checkbox\n              [binary]=\"true\"\n              [ngModel]=\"row.shown === row.channels.length\"\n              [pTooltip]=\"row.shown + ' of ' + row.channels.length + ' shown'\"\n              tooltipPosition=\"left\"\n              (onChange)=\"onGroupVisibleToggle(row, $event.checked)\"\n            ></p-checkbox>\n          </td>\n        </tr>\n        <tr *ngIf=\"row.kind === 'channel'\" [pSelectableRow]=\"row\">\n          <td>\n            <hex-color-picker\n              *ngIf=\"multichannel\"\n              [color]=\"row.channel.color\"\n              (colorChange)=\"onColorChange(row.channel, $event)\"\n            ></hex-color-picker>\n          </td>\n          <td [style.padding-left.rem]=\"0.5 + row.depth\">{{ row.channel.name }}</td>\n          <td style=\"text-align: center\">\n            <p-checkbox\n              [binary]=\"true\"\n              [ngModel]=\"row.channel.visible\"\n              (onChange)=\"onVisibleToggle(row.channel, $event.checked)\"\n            ></p-checkbox>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n\n    <!-- Pseudo-color presets for the selected channel (multichannel only;\n         grayscale uses the colormap below). -->\n    <div class=\"ch-presets\" *ngIf=\"multichannel && selected\">\n      <span class=\"ch-presets-lbl\">{{ selected.name }} LUT</span>\n      <button\n        *ngFor=\"let p of lutColors\"\n        type=\"button\"\n        class=\"ch-preset\"\n        [style.background]=\"p.color\"\n        [pTooltip]=\"p.name\"\n        tooltipPosition=\"top\"\n        (click)=\"setPreset(selected, p.color)\"\n      ></button>\n    </div>\n\n    <!-- Histogram -->\n    <div class=\"ch-hist-head\">\n      <span>Histogram{{ selected ? ' \u2014 ' + selected.name : '' }}</span>\n      <p-checkbox\n        [binary]=\"true\"\n        [(ngModel)]=\"logScale\"\n        (onChange)=\"toggleLog($event.checked)\"\n        label=\"Log\"\n      ></p-checkbox>\n    </div>\n    <div [id]=\"histogramDiv\" class=\"ch-hist-plot\"></div>\n\n    <!-- Display window / gamma -->\n    <div class=\"ch-sliders\" *ngIf=\"selected\">\n      <!-- Window endpoints are shown/edited in NATIVE units (0..255 for 8-bit,\n           the channel's observed native range for 16-bit). One-way bound to the\n           native getters; the handlers map back to the 8-bit display window. -->\n      <div class=\"ch-row\">\n        <span class=\"ch-lbl\">Min</span>\n        <p-slider\n          [ngModel]=\"minNative\"\n          [min]=\"sliderMin\"\n          [max]=\"sliderMax\"\n          [step]=\"sliderStep\"\n          (onChange)=\"onMinChange($event.value)\"\n          styleClass=\"ch-slider\"\n        ></p-slider>\n        <p-inputNumber\n          [ngModel]=\"minNative\"\n          [min]=\"sliderMin\"\n          [max]=\"sliderMax\"\n          [showButtons]=\"false\"\n          (onInput)=\"onMinChange($event.value)\"\n          styleClass=\"ch-num\"\n        ></p-inputNumber>\n        <span class=\"ch-busy\"\n          ><i *ngIf=\"activeAdjust === 'min'\" class=\"pi pi-spin pi-spinner\" aria-label=\"updating\"></i\n        ></span>\n      </div>\n      <div class=\"ch-row\">\n        <span class=\"ch-lbl\">Max</span>\n        <p-slider\n          [ngModel]=\"maxNative\"\n          [min]=\"sliderMin\"\n          [max]=\"sliderMax\"\n          [step]=\"sliderStep\"\n          (onChange)=\"onMaxChange($event.value)\"\n          styleClass=\"ch-slider\"\n        ></p-slider>\n        <p-inputNumber\n          [ngModel]=\"maxNative\"\n          [min]=\"sliderMin\"\n          [max]=\"sliderMax\"\n          [showButtons]=\"false\"\n          (onInput)=\"onMaxChange($event.value)\"\n          styleClass=\"ch-num\"\n        ></p-inputNumber>\n        <span class=\"ch-busy\"\n          ><i *ngIf=\"activeAdjust === 'max'\" class=\"pi pi-spin pi-spinner\" aria-label=\"updating\"></i\n        ></span>\n      </div>\n      <div class=\"ch-row\">\n        <span class=\"ch-lbl\">Gamma</span>\n        <p-slider\n          [(ngModel)]=\"selected.gamma\"\n          [min]=\"0.1\"\n          [max]=\"5\"\n          [step]=\"0.01\"\n          (onChange)=\"onGammaChange($event.value)\"\n          styleClass=\"ch-slider\"\n        ></p-slider>\n        <p-inputNumber\n          [(ngModel)]=\"selected.gamma\"\n          [min]=\"0.1\"\n          [max]=\"5\"\n          [minFractionDigits]=\"2\"\n          [maxFractionDigits]=\"2\"\n          [showButtons]=\"false\"\n          (onInput)=\"onGammaChange($event.value)\"\n          styleClass=\"ch-num\"\n        ></p-inputNumber>\n        <span class=\"ch-busy\"\n          ><i *ngIf=\"activeAdjust === 'gamma'\" class=\"pi pi-spin pi-spinner\" aria-label=\"updating\"></i\n        ></span>\n      </div>\n      <div class=\"ch-btns\">\n        <p-button label=\"Auto\" size=\"small\" (onClick)=\"auto()\"></p-button>\n        <p-button label=\"Reset\" size=\"small\" [text]=\"true\" (onClick)=\"reset()\"></p-button>\n      </div>\n    </div>\n\n    <!-- LUT / colormap controls. The colormap maps single-channel intensity \u2192\n         colour, so it only applies to grayscale; RGB/multichannel use the\n         per-channel pseudo-colour presets above. -->\n    <div class=\"ch-display\">\n      <p-treeSelect\n        *ngIf=\"!multichannel\"\n        [options]=\"colormapOptions\"\n        [(ngModel)]=\"selectedColormap\"\n        [selectionMode]=\"'single'\"\n        placeholder=\"Colormap\"\n        [scrollHeight]=\"'300px'\"\n        pTooltip=\"Color Lookup Tables\"\n        tooltipPosition=\"bottom\"\n        (onNodeSelect)=\"onColormap($event.node)\"\n      >\n        <ng-template let-node pTemplate=\"default\">\n          <div class=\"flex align-items-center gap-2\">\n            <img *ngIf=\"!node.children\" [src]=\"node.data?.src\" class=\"colormap\" />\n            <div>{{ node.label }}</div>\n          </div>\n        </ng-template>\n      </p-treeSelect>\n      <p-checkbox\n        [binary]=\"true\"\n        [(ngModel)]=\"invert\"\n        (onChange)=\"onInvert($event.checked)\"\n        label=\"Invert\"\n      ></p-checkbox>\n    </div>\n\n    <!-- Exports: an 8-bit publication composite (always), plus a true-16-bit\n         data-preserving TIFF when the image carries >8-bit pixels. -->\n    <div class=\"ch-export\">\n      <p-button\n        label=\"Export composite (PNG)\"\n        icon=\"pi pi-download\"\n        size=\"small\"\n        (onClick)=\"exportComposite()\"\n      ></p-button>\n      <p-button\n        *ngIf=\"is16bit\"\n        label=\"Export 16-bit TIFF\"\n        icon=\"pi pi-download\"\n        size=\"small\"\n        [outlined]=\"true\"\n        pTooltip=\"Data-preserving multi-band TIFF (visible channels, native bit depth)\"\n        tooltipPosition=\"top\"\n        (onClick)=\"exportData()\"\n      ></p-button>\n    </div>\n  </div>\n</p-dialog>\n", styles: [":host ::ng-deep .channel-histogram-dialog.p-dialog{display:flex;flex-direction:column}:host ::ng-deep .channel-histogram-dialog .p-dialog-content{display:flex;flex-direction:column;flex:1 1 auto;overflow:auto}.ch-body{display:flex;flex-direction:column;gap:.5rem;flex:1 1 auto;min-height:0}.ch-table{flex:0 0 auto}.ch-presets{display:flex;align-items:center;gap:4px;margin:.25rem 0}.ch-presets .ch-presets-lbl{font-size:.8rem;margin-right:.25rem}.ch-presets .ch-preset{width:16px;height:16px;padding:0;border:1px solid rgba(0,0,0,.3);border-radius:2px;cursor:pointer}.ch-export{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.25rem}.ch-hist-head{display:flex;align-items:center;justify-content:space-between;font-size:.8rem;font-weight:600;margin-top:.25rem}.ch-hist-plot{flex:1 1 auto;min-height:120px;width:100%}.ch-sliders{display:flex;flex-direction:column;gap:.35rem}.ch-sliders .ch-row{display:flex;align-items:center;gap:.5rem}.ch-sliders .ch-row .ch-lbl{flex:0 0 3rem;font-size:.8rem}.ch-sliders .ch-row p-slider{flex:2 1 0;min-width:0}.ch-sliders .ch-row p-inputnumber{flex:1 1 0;min-width:0}.ch-sliders .ch-row .ch-busy{flex:0 0 1rem;display:inline-flex;align-items:center;justify-content:center;color:#4fa3ff;font-size:.8rem}.ch-sliders .ch-btns{display:flex;gap:.5rem;margin-top:.25rem}.ch-display{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-top:.25rem}.ch-display .colormap{width:60px;height:12px;object-fit:fill}:host ::ng-deep .ch-num .p-inputnumber-input{width:100%}:host ::ng-deep .ch-row p-slider .p-slider{width:100%}.ch-group-row td{background:var(--surface-ground, transparent)}.ch-group-toggle{display:inline-flex;align-items:center;gap:.4rem;border:0;background:none;color:inherit;font:inherit;font-weight:600;cursor:pointer;text-transform:uppercase;font-size:.8rem;letter-spacing:.02em}.ch-group-count{font-weight:400;opacity:.75}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: SharedModule }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.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: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$2.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: "ngmodule", type: DialogModule }, { kind: "component", type: i5.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: "ngmodule", type: InputNumberModule }, { kind: "component", type: i6$1.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: "ngmodule", type: SliderModule }, { kind: "component", type: i8.Slider, selector: "p-slider", inputs: ["animate", "disabled", "min", "max", "orientation", "step", "range", "style", "styleClass", "ariaLabel", "ariaLabelledBy", "tabindex", "autofocus"], outputs: ["onChange", "onSlideEnd"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i9.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i9.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: TreeSelectModule }, { kind: "component", type: i11.TreeSelect, selector: "p-treeSelect", inputs: ["inputId", "scrollHeight", "disabled", "metaKeySelection", "variant", "display", "selectionMode", "tabindex", "ariaLabel", "ariaLabelledBy", "placeholder", "panelClass", "panelStyle", "panelStyleClass", "containerStyle", "containerStyleClass", "labelStyle", "labelStyleClass", "overlayOptions", "emptyMessage", "appendTo", "filter", "filterBy", "filterMode", "filterPlaceholder", "filterLocale", "filterInputAutoFocus", "propagateSelectionDown", "propagateSelectionUp", "showClear", "resetFilterOnHide", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autofocus", "options", "showTransitionOptions", "hideTransitionOptions", "loading"], outputs: ["onNodeExpand", "onNodeCollapse", "onShow", "onHide", "onClear", "onFilter", "onFocus", "onBlur", "onNodeUnselect", "onNodeSelect"] }, { kind: "component", type: HexColorPickerComponent, selector: "hex-color-picker", inputs: ["color"], outputs: ["colorChange", "colorInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ChannelHistogramComponent, decorators: [{
             type: Component,
@@ -17875,7 +18003,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
                         TooltipModule,
                         TreeSelectModule,
                         HexColorPickerComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-dialog\n  header=\"Channels &amp; Histogram\"\n  [visible]=\"visible\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  [modal]=\"false\"\n  [resizable]=\"true\"\n  [draggable]=\"true\"\n  [style]=\"{ width: '30rem' }\"\n  [breakpoints]=\"{ '960px': '90vw' }\"\n  styleClass=\"channel-histogram-dialog\"\n  (onShow)=\"onShow()\"\n>\n  <div class=\"ch-body\">\n    <!-- Channels -->\n    <p-table\n      [value]=\"channels\"\n      selectionMode=\"single\"\n      [(selection)]=\"selected\"\n      dataKey=\"index\"\n      (onRowSelect)=\"selectChannel($event.data)\"\n      styleClass=\"ch-table p-datatable-sm\"\n    >\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th style=\"width: 2.5rem\"></th>\n          <th>Channel</th>\n          <th style=\"width: 3.5rem; text-align: center\">Show</th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\" let-ch>\n        <tr [pSelectableRow]=\"ch\">\n          <td>\n            <hex-color-picker\n              *ngIf=\"multichannel\"\n              [color]=\"ch.color\"\n              (colorChange)=\"onColorChange(ch, $event)\"\n            ></hex-color-picker>\n          </td>\n          <td>{{ ch.name }}</td>\n          <td style=\"text-align: center\">\n            <p-checkbox\n              [binary]=\"true\"\n              [ngModel]=\"ch.visible\"\n              (onChange)=\"onVisibleToggle(ch, $event.checked)\"\n            ></p-checkbox>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n\n    <!-- Pseudo-color presets for the selected channel (multichannel only;\n         grayscale uses the colormap below). -->\n    <div class=\"ch-presets\" *ngIf=\"multichannel && selected\">\n      <span class=\"ch-presets-lbl\">{{ selected.name }} LUT</span>\n      <button\n        *ngFor=\"let p of lutColors\"\n        type=\"button\"\n        class=\"ch-preset\"\n        [style.background]=\"p.color\"\n        [pTooltip]=\"p.name\"\n        tooltipPosition=\"top\"\n        (click)=\"setPreset(selected, p.color)\"\n      ></button>\n    </div>\n\n    <!-- Histogram -->\n    <div class=\"ch-hist-head\">\n      <span>Histogram{{ selected ? ' \u2014 ' + selected.name : '' }}</span>\n      <p-checkbox\n        [binary]=\"true\"\n        [(ngModel)]=\"logScale\"\n        (onChange)=\"toggleLog($event.checked)\"\n        label=\"Log\"\n      ></p-checkbox>\n    </div>\n    <div [id]=\"histogramDiv\" class=\"ch-hist-plot\"></div>\n\n    <!-- Display window / gamma -->\n    <div class=\"ch-sliders\" *ngIf=\"selected\">\n      <!-- Window endpoints are shown/edited in NATIVE units (0..255 for 8-bit,\n           the channel's observed native range for 16-bit). One-way bound to the\n           native getters; the handlers map back to the 8-bit display window. -->\n      <div class=\"ch-row\">\n        <span class=\"ch-lbl\">Min</span>\n        <p-slider\n          [ngModel]=\"minNative\"\n          [min]=\"sliderMin\"\n          [max]=\"sliderMax\"\n          [step]=\"sliderStep\"\n          (onChange)=\"onMinChange($event.value)\"\n          styleClass=\"ch-slider\"\n        ></p-slider>\n        <p-inputNumber\n          [ngModel]=\"minNative\"\n          [min]=\"sliderMin\"\n          [max]=\"sliderMax\"\n          [showButtons]=\"false\"\n          (onInput)=\"onMinChange($event.value)\"\n          styleClass=\"ch-num\"\n        ></p-inputNumber>\n        <span class=\"ch-busy\"\n          ><i *ngIf=\"activeAdjust === 'min'\" class=\"pi pi-spin pi-spinner\" aria-label=\"updating\"></i\n        ></span>\n      </div>\n      <div class=\"ch-row\">\n        <span class=\"ch-lbl\">Max</span>\n        <p-slider\n          [ngModel]=\"maxNative\"\n          [min]=\"sliderMin\"\n          [max]=\"sliderMax\"\n          [step]=\"sliderStep\"\n          (onChange)=\"onMaxChange($event.value)\"\n          styleClass=\"ch-slider\"\n        ></p-slider>\n        <p-inputNumber\n          [ngModel]=\"maxNative\"\n          [min]=\"sliderMin\"\n          [max]=\"sliderMax\"\n          [showButtons]=\"false\"\n          (onInput)=\"onMaxChange($event.value)\"\n          styleClass=\"ch-num\"\n        ></p-inputNumber>\n        <span class=\"ch-busy\"\n          ><i *ngIf=\"activeAdjust === 'max'\" class=\"pi pi-spin pi-spinner\" aria-label=\"updating\"></i\n        ></span>\n      </div>\n      <div class=\"ch-row\">\n        <span class=\"ch-lbl\">Gamma</span>\n        <p-slider\n          [(ngModel)]=\"selected.gamma\"\n          [min]=\"0.1\"\n          [max]=\"5\"\n          [step]=\"0.01\"\n          (onChange)=\"onGammaChange($event.value)\"\n          styleClass=\"ch-slider\"\n        ></p-slider>\n        <p-inputNumber\n          [(ngModel)]=\"selected.gamma\"\n          [min]=\"0.1\"\n          [max]=\"5\"\n          [minFractionDigits]=\"2\"\n          [maxFractionDigits]=\"2\"\n          [showButtons]=\"false\"\n          (onInput)=\"onGammaChange($event.value)\"\n          styleClass=\"ch-num\"\n        ></p-inputNumber>\n        <span class=\"ch-busy\"\n          ><i *ngIf=\"activeAdjust === 'gamma'\" class=\"pi pi-spin pi-spinner\" aria-label=\"updating\"></i\n        ></span>\n      </div>\n      <div class=\"ch-btns\">\n        <p-button label=\"Auto\" size=\"small\" (onClick)=\"auto()\"></p-button>\n        <p-button label=\"Reset\" size=\"small\" [text]=\"true\" (onClick)=\"reset()\"></p-button>\n      </div>\n    </div>\n\n    <!-- LUT / colormap controls. The colormap maps single-channel intensity \u2192\n         colour, so it only applies to grayscale; RGB/multichannel use the\n         per-channel pseudo-colour presets above. -->\n    <div class=\"ch-display\">\n      <p-treeSelect\n        *ngIf=\"!multichannel\"\n        [options]=\"colormapOptions\"\n        [(ngModel)]=\"selectedColormap\"\n        [selectionMode]=\"'single'\"\n        placeholder=\"Colormap\"\n        [scrollHeight]=\"'300px'\"\n        pTooltip=\"Color Lookup Tables\"\n        tooltipPosition=\"bottom\"\n        (onNodeSelect)=\"onColormap($event.node)\"\n      >\n        <ng-template let-node pTemplate=\"default\">\n          <div class=\"flex align-items-center gap-2\">\n            <img *ngIf=\"!node.children\" [src]=\"node.data?.src\" class=\"colormap\" />\n            <div>{{ node.label }}</div>\n          </div>\n        </ng-template>\n      </p-treeSelect>\n      <p-checkbox\n        [binary]=\"true\"\n        [(ngModel)]=\"invert\"\n        (onChange)=\"onInvert($event.checked)\"\n        label=\"Invert\"\n      ></p-checkbox>\n    </div>\n\n    <!-- Exports: an 8-bit publication composite (always), plus a true-16-bit\n         data-preserving TIFF when the image carries >8-bit pixels. -->\n    <div class=\"ch-export\">\n      <p-button\n        label=\"Export composite (PNG)\"\n        icon=\"pi pi-download\"\n        size=\"small\"\n        (onClick)=\"exportComposite()\"\n      ></p-button>\n      <p-button\n        *ngIf=\"is16bit\"\n        label=\"Export 16-bit TIFF\"\n        icon=\"pi pi-download\"\n        size=\"small\"\n        [outlined]=\"true\"\n        pTooltip=\"Data-preserving multi-band TIFF (visible channels, native bit depth)\"\n        tooltipPosition=\"top\"\n        (onClick)=\"exportData()\"\n      ></p-button>\n    </div>\n  </div>\n</p-dialog>\n", styles: [":host ::ng-deep .channel-histogram-dialog.p-dialog{display:flex;flex-direction:column}:host ::ng-deep .channel-histogram-dialog .p-dialog-content{display:flex;flex-direction:column;flex:1 1 auto;overflow:auto}.ch-body{display:flex;flex-direction:column;gap:.5rem;flex:1 1 auto;min-height:0}.ch-table{flex:0 0 auto}.ch-presets{display:flex;align-items:center;gap:4px;margin:.25rem 0}.ch-presets .ch-presets-lbl{font-size:.8rem;margin-right:.25rem}.ch-presets .ch-preset{width:16px;height:16px;padding:0;border:1px solid rgba(0,0,0,.3);border-radius:2px;cursor:pointer}.ch-export{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.25rem}.ch-hist-head{display:flex;align-items:center;justify-content:space-between;font-size:.8rem;font-weight:600;margin-top:.25rem}.ch-hist-plot{flex:1 1 auto;min-height:120px;width:100%}.ch-sliders{display:flex;flex-direction:column;gap:.35rem}.ch-sliders .ch-row{display:flex;align-items:center;gap:.5rem}.ch-sliders .ch-row .ch-lbl{flex:0 0 3rem;font-size:.8rem}.ch-sliders .ch-row p-slider{flex:2 1 0;min-width:0}.ch-sliders .ch-row p-inputnumber{flex:1 1 0;min-width:0}.ch-sliders .ch-row .ch-busy{flex:0 0 1rem;display:inline-flex;align-items:center;justify-content:center;color:#4fa3ff;font-size:.8rem}.ch-sliders .ch-btns{display:flex;gap:.5rem;margin-top:.25rem}.ch-display{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-top:.25rem}.ch-display .colormap{width:60px;height:12px;object-fit:fill}:host ::ng-deep .ch-num .p-inputnumber-input{width:100%}:host ::ng-deep .ch-row p-slider .p-slider{width:100%}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-dialog\n  header=\"Channels &amp; Histogram\"\n  [visible]=\"visible\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  [modal]=\"false\"\n  [resizable]=\"true\"\n  [draggable]=\"true\"\n  [style]=\"{ width: '30rem' }\"\n  [breakpoints]=\"{ '960px': '90vw' }\"\n  styleClass=\"channel-histogram-dialog\"\n  (onShow)=\"onShow()\"\n>\n  <div class=\"ch-body\">\n    <!-- Channels -->\n    <p-table\n      [value]=\"rows\"\n      selectionMode=\"single\"\n      [selection]=\"selectedRow\"\n      dataKey=\"key\"\n      (onRowSelect)=\"onRowSelect($event.data)\"\n      [rowTrackBy]=\"trackRow\"\n      styleClass=\"ch-table p-datatable-sm\"\n    >\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th style=\"width: 2.5rem\"></th>\n          <th>Channel</th>\n          <th style=\"width: 3.5rem; text-align: center\">Show</th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\" let-row>\n        <!-- A group: folds open or shut, and shows or hides all its channels. -->\n        <tr *ngIf=\"row.kind === 'group'\" class=\"ch-group-row\">\n          <td colspan=\"2\">\n            <button\n              type=\"button\"\n              class=\"ch-group-toggle\"\n              [style.padding-left.rem]=\"row.depth\"\n              [attr.aria-expanded]=\"row.expanded\"\n              (click)=\"toggleGroup(row)\"\n            >\n              <i class=\"pi\" [ngClass]=\"row.expanded ? 'pi-chevron-down' : 'pi-chevron-right'\"></i>\n              <span class=\"ch-group-label\">{{ row.label }}</span>\n              <span class=\"ch-group-count\">({{ row.channels.length }})</span>\n            </button>\n          </td>\n          <td style=\"text-align: center\">\n            <p-checkbox\n              [binary]=\"true\"\n              [ngModel]=\"row.shown === row.channels.length\"\n              [pTooltip]=\"row.shown + ' of ' + row.channels.length + ' shown'\"\n              tooltipPosition=\"left\"\n              (onChange)=\"onGroupVisibleToggle(row, $event.checked)\"\n            ></p-checkbox>\n          </td>\n        </tr>\n        <tr *ngIf=\"row.kind === 'channel'\" [pSelectableRow]=\"row\">\n          <td>\n            <hex-color-picker\n              *ngIf=\"multichannel\"\n              [color]=\"row.channel.color\"\n              (colorChange)=\"onColorChange(row.channel, $event)\"\n            ></hex-color-picker>\n          </td>\n          <td [style.padding-left.rem]=\"0.5 + row.depth\">{{ row.channel.name }}</td>\n          <td style=\"text-align: center\">\n            <p-checkbox\n              [binary]=\"true\"\n              [ngModel]=\"row.channel.visible\"\n              (onChange)=\"onVisibleToggle(row.channel, $event.checked)\"\n            ></p-checkbox>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n\n    <!-- Pseudo-color presets for the selected channel (multichannel only;\n         grayscale uses the colormap below). -->\n    <div class=\"ch-presets\" *ngIf=\"multichannel && selected\">\n      <span class=\"ch-presets-lbl\">{{ selected.name }} LUT</span>\n      <button\n        *ngFor=\"let p of lutColors\"\n        type=\"button\"\n        class=\"ch-preset\"\n        [style.background]=\"p.color\"\n        [pTooltip]=\"p.name\"\n        tooltipPosition=\"top\"\n        (click)=\"setPreset(selected, p.color)\"\n      ></button>\n    </div>\n\n    <!-- Histogram -->\n    <div class=\"ch-hist-head\">\n      <span>Histogram{{ selected ? ' \u2014 ' + selected.name : '' }}</span>\n      <p-checkbox\n        [binary]=\"true\"\n        [(ngModel)]=\"logScale\"\n        (onChange)=\"toggleLog($event.checked)\"\n        label=\"Log\"\n      ></p-checkbox>\n    </div>\n    <div [id]=\"histogramDiv\" class=\"ch-hist-plot\"></div>\n\n    <!-- Display window / gamma -->\n    <div class=\"ch-sliders\" *ngIf=\"selected\">\n      <!-- Window endpoints are shown/edited in NATIVE units (0..255 for 8-bit,\n           the channel's observed native range for 16-bit). One-way bound to the\n           native getters; the handlers map back to the 8-bit display window. -->\n      <div class=\"ch-row\">\n        <span class=\"ch-lbl\">Min</span>\n        <p-slider\n          [ngModel]=\"minNative\"\n          [min]=\"sliderMin\"\n          [max]=\"sliderMax\"\n          [step]=\"sliderStep\"\n          (onChange)=\"onMinChange($event.value)\"\n          styleClass=\"ch-slider\"\n        ></p-slider>\n        <p-inputNumber\n          [ngModel]=\"minNative\"\n          [min]=\"sliderMin\"\n          [max]=\"sliderMax\"\n          [showButtons]=\"false\"\n          (onInput)=\"onMinChange($event.value)\"\n          styleClass=\"ch-num\"\n        ></p-inputNumber>\n        <span class=\"ch-busy\"\n          ><i *ngIf=\"activeAdjust === 'min'\" class=\"pi pi-spin pi-spinner\" aria-label=\"updating\"></i\n        ></span>\n      </div>\n      <div class=\"ch-row\">\n        <span class=\"ch-lbl\">Max</span>\n        <p-slider\n          [ngModel]=\"maxNative\"\n          [min]=\"sliderMin\"\n          [max]=\"sliderMax\"\n          [step]=\"sliderStep\"\n          (onChange)=\"onMaxChange($event.value)\"\n          styleClass=\"ch-slider\"\n        ></p-slider>\n        <p-inputNumber\n          [ngModel]=\"maxNative\"\n          [min]=\"sliderMin\"\n          [max]=\"sliderMax\"\n          [showButtons]=\"false\"\n          (onInput)=\"onMaxChange($event.value)\"\n          styleClass=\"ch-num\"\n        ></p-inputNumber>\n        <span class=\"ch-busy\"\n          ><i *ngIf=\"activeAdjust === 'max'\" class=\"pi pi-spin pi-spinner\" aria-label=\"updating\"></i\n        ></span>\n      </div>\n      <div class=\"ch-row\">\n        <span class=\"ch-lbl\">Gamma</span>\n        <p-slider\n          [(ngModel)]=\"selected.gamma\"\n          [min]=\"0.1\"\n          [max]=\"5\"\n          [step]=\"0.01\"\n          (onChange)=\"onGammaChange($event.value)\"\n          styleClass=\"ch-slider\"\n        ></p-slider>\n        <p-inputNumber\n          [(ngModel)]=\"selected.gamma\"\n          [min]=\"0.1\"\n          [max]=\"5\"\n          [minFractionDigits]=\"2\"\n          [maxFractionDigits]=\"2\"\n          [showButtons]=\"false\"\n          (onInput)=\"onGammaChange($event.value)\"\n          styleClass=\"ch-num\"\n        ></p-inputNumber>\n        <span class=\"ch-busy\"\n          ><i *ngIf=\"activeAdjust === 'gamma'\" class=\"pi pi-spin pi-spinner\" aria-label=\"updating\"></i\n        ></span>\n      </div>\n      <div class=\"ch-btns\">\n        <p-button label=\"Auto\" size=\"small\" (onClick)=\"auto()\"></p-button>\n        <p-button label=\"Reset\" size=\"small\" [text]=\"true\" (onClick)=\"reset()\"></p-button>\n      </div>\n    </div>\n\n    <!-- LUT / colormap controls. The colormap maps single-channel intensity \u2192\n         colour, so it only applies to grayscale; RGB/multichannel use the\n         per-channel pseudo-colour presets above. -->\n    <div class=\"ch-display\">\n      <p-treeSelect\n        *ngIf=\"!multichannel\"\n        [options]=\"colormapOptions\"\n        [(ngModel)]=\"selectedColormap\"\n        [selectionMode]=\"'single'\"\n        placeholder=\"Colormap\"\n        [scrollHeight]=\"'300px'\"\n        pTooltip=\"Color Lookup Tables\"\n        tooltipPosition=\"bottom\"\n        (onNodeSelect)=\"onColormap($event.node)\"\n      >\n        <ng-template let-node pTemplate=\"default\">\n          <div class=\"flex align-items-center gap-2\">\n            <img *ngIf=\"!node.children\" [src]=\"node.data?.src\" class=\"colormap\" />\n            <div>{{ node.label }}</div>\n          </div>\n        </ng-template>\n      </p-treeSelect>\n      <p-checkbox\n        [binary]=\"true\"\n        [(ngModel)]=\"invert\"\n        (onChange)=\"onInvert($event.checked)\"\n        label=\"Invert\"\n      ></p-checkbox>\n    </div>\n\n    <!-- Exports: an 8-bit publication composite (always), plus a true-16-bit\n         data-preserving TIFF when the image carries >8-bit pixels. -->\n    <div class=\"ch-export\">\n      <p-button\n        label=\"Export composite (PNG)\"\n        icon=\"pi pi-download\"\n        size=\"small\"\n        (onClick)=\"exportComposite()\"\n      ></p-button>\n      <p-button\n        *ngIf=\"is16bit\"\n        label=\"Export 16-bit TIFF\"\n        icon=\"pi pi-download\"\n        size=\"small\"\n        [outlined]=\"true\"\n        pTooltip=\"Data-preserving multi-band TIFF (visible channels, native bit depth)\"\n        tooltipPosition=\"top\"\n        (onClick)=\"exportData()\"\n      ></p-button>\n    </div>\n  </div>\n</p-dialog>\n", styles: [":host ::ng-deep .channel-histogram-dialog.p-dialog{display:flex;flex-direction:column}:host ::ng-deep .channel-histogram-dialog .p-dialog-content{display:flex;flex-direction:column;flex:1 1 auto;overflow:auto}.ch-body{display:flex;flex-direction:column;gap:.5rem;flex:1 1 auto;min-height:0}.ch-table{flex:0 0 auto}.ch-presets{display:flex;align-items:center;gap:4px;margin:.25rem 0}.ch-presets .ch-presets-lbl{font-size:.8rem;margin-right:.25rem}.ch-presets .ch-preset{width:16px;height:16px;padding:0;border:1px solid rgba(0,0,0,.3);border-radius:2px;cursor:pointer}.ch-export{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.25rem}.ch-hist-head{display:flex;align-items:center;justify-content:space-between;font-size:.8rem;font-weight:600;margin-top:.25rem}.ch-hist-plot{flex:1 1 auto;min-height:120px;width:100%}.ch-sliders{display:flex;flex-direction:column;gap:.35rem}.ch-sliders .ch-row{display:flex;align-items:center;gap:.5rem}.ch-sliders .ch-row .ch-lbl{flex:0 0 3rem;font-size:.8rem}.ch-sliders .ch-row p-slider{flex:2 1 0;min-width:0}.ch-sliders .ch-row p-inputnumber{flex:1 1 0;min-width:0}.ch-sliders .ch-row .ch-busy{flex:0 0 1rem;display:inline-flex;align-items:center;justify-content:center;color:#4fa3ff;font-size:.8rem}.ch-sliders .ch-btns{display:flex;gap:.5rem;margin-top:.25rem}.ch-display{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-top:.25rem}.ch-display .colormap{width:60px;height:12px;object-fit:fill}:host ::ng-deep .ch-num .p-inputnumber-input{width:100%}:host ::ng-deep .ch-row p-slider .p-slider{width:100%}.ch-group-row td{background:var(--surface-ground, transparent)}.ch-group-toggle{display:inline-flex;align-items:center;gap:.4rem;border:0;background:none;color:inherit;font:inherit;font-weight:600;cursor:pointer;text-transform:uppercase;font-size:.8rem;letter-spacing:.02em}.ch-group-count{font-weight:400;opacity:.75}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [CHANNEL_HISTOGRAM_API]
@@ -21333,7 +21461,7 @@ class SpatialChartsComponent {
         await this.draw(buildHeatmapTraces$1(input), heatmapLayout$1(input));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SpatialChartsComponent, deps: [{ token: VISUALIZER }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: SpatialChartsComponent, isStandalone: true, selector: "spatial-charts", inputs: { active: "active" }, ngImport: i0, template: "<div class=\"sx-body\" *ngIf=\"controls\">\n  <!-- The chart follows whatever the map is coloured by, so the two can never\n       disagree about what is being shown. -->\n  <div class=\"sx-head\">\n    <span class=\"sx-subject\" *ngIf=\"subject\">{{ subject }}</span>\n    <span class=\"sx-subject sx-muted\" *ngIf=\"!subject\">nothing selected to chart</span>\n    <span class=\"sx-badge\" *ngIf=\"selectionCount\"> {{ selectionCount | number }} selected </span>\n    <i class=\"pi pi-spin pi-spinner sx-busy\" *ngIf=\"busy\" aria-label=\"loading\"></i>\n  </div>\n\n  <div class=\"sx-controls\">\n    <p-selectButton\n      [options]=\"kindOptions\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      [ngModel]=\"kind\"\n      (ngModelChange)=\"onKind($event)\"\n      styleClass=\"sx-kind\"\n    ></p-selectButton>\n    <p-dropdown\n      [options]=\"groupOptions\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      [ngModel]=\"groupBy\"\n      (ngModelChange)=\"onGroupBy($event)\"\n      placeholder=\"No grouping\"\n      appendTo=\"body\"\n      [disabled]=\"kind === 'histogram'\"\n      [pTooltip]=\"\n        kind === 'heatmap'\n          ? 'The categorical column the heatmap\\'s columns come from'\n          : 'Split a violin or box by a categorical column'\n      \"\n      tooltipPosition=\"top\"\n    ></p-dropdown>\n    <!-- What the chart on screen shows, and what it must NOT be read for. Each of these\n         answers a different question and two are routinely over-read, so the caveat\n         travels with the explanation. -->\n    <i\n      class=\"pi pi-question-circle sx-help\"\n      [pTooltip]=\"kindHelp\"\n      [escape]=\"false\"\n      tooltipPosition=\"left\"\n      tooltipStyleClass=\"sx-help-tip\"\n      [attr.aria-label]=\"'About the ' + kind + ' chart'\"\n      tabindex=\"0\"\n    ></i>\n  </div>\n\n  <spatial-heatmap-controls\n    *ngIf=\"kind === 'heatmap'\"\n    [geneOptions]=\"geneOptions\"\n    [genes]=\"heatmapGenes\"\n    [zScore]=\"heatmapZScore\"\n    (genesChange)=\"onHeatmapGenes($event)\"\n    (filterChange)=\"onGeneFilter($event)\"\n    (zScoreChange)=\"onHeatmapZScore($event)\"\n  ></spatial-heatmap-controls>\n\n  <spatial-embedding-controls\n    [isEmbedding]=\"kind === 'embedding'\"\n    [embeddings]=\"embeddings\"\n    [embedding]=\"embedding\"\n    [computable]=\"isComputable\"\n    [computed]=\"isComputed\"\n    [running]=\"isComputing\"\n    [state]=\"computeState\"\n    [estimateLabel]=\"computeEstimateLabel\"\n    [tooLargeNote]=\"tsneTooLarge ? tsneTooLargeNote : null\"\n    [detached]=\"detached\"\n    (embeddingChange)=\"onEmbedding($event)\"\n    (compute)=\"computeEmbedding()\"\n    (cancel)=\"cancelCompute()\"\n    (detachedToggle)=\"toggleDetached()\"\n  >\n  </spatial-embedding-controls>\n\n  <div [id]=\"chartDiv\" class=\"sx-plot\" *ngIf=\"!detached\"></div>\n\n  <!-- Detached: the chart keeps drawing, in its own window. Says so rather than\n       leaving a blank panel that looks broken. -->\n  <div class=\"sx-detached\" *ngIf=\"detached\">Shown in its own window.</div>\n\n  <ng-container *ngTemplateOutlet=\"hints\"></ng-container>\n</div>\n\n<!-- Declared once and rendered in both the panel and the detached window: the ladder is\n     deliberately not mutually exclusive (a heatmap still needs its grouping prompt), so\n     collapsing it to a single expression would drop a hint rather than move it. -->\n<ng-template #hints>\n  <small class=\"sx-hint\" *ngIf=\"notice\">{{ notice }}</small>\n  <small class=\"sx-hint\" *ngIf=\"!notice && suggestsGrouping\"> Pick a grouping to compare categories. </small>\n  <small class=\"sx-hint\" *ngIf=\"!notice && selectionCount && kind === 'histogram'\">\n    The selection is overlaid on the full distribution.\n  </small>\n  <small class=\"sx-hint\" *ngIf=\"!notice && selectionCount && kind !== 'histogram' && kind !== 'heatmap'\">\n    Showing the selection only.\n  </small>\n  <small class=\"sx-hint\" *ngIf=\"!notice && kind === 'heatmap'\">{{ heatmapNote }}</small>\n  <small class=\"sx-hint\" *ngIf=\"!notice && kind === 'embedding'\">{{ embeddingNote }}</small>\n</ng-template>\n\n<spatial-chart-window\n  *ngIf=\"detached\"\n  [title]=\"detachedTitle\"\n  [divId]=\"detachedDiv\"\n  [fixedHeight]=\"hasFixedHeight\"\n  (closed)=\"toggleDetached()\"\n  (shown)=\"onDetachedWindowShown()\"\n  (resizeEnd)=\"onDetachedResizeEnd()\"\n>\n  <ng-container *ngTemplateOutlet=\"hints\"></ng-container>\n</spatial-chart-window>\n", styles: [".sx-controls{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.sx-controls p-dropdown{flex:1 1 8rem;min-width:0}:host ::ng-deep .sx-controls p-dropdown .p-dropdown{width:100%}.sx-hint{font-size:.75rem;color:var(--text-color-secondary, #6c757d);line-height:1.35}.sx-warn{color:var(--orange-600, #c2410c)}:host ::ng-deep .spatial-charts-dialog .p-dialog-content{padding:.75rem 1rem 1rem}.sx-empty{padding:.5rem 0;font-size:.85rem;color:var(--text-color-secondary, #6c757d);line-height:1.4}.sx-body{display:flex;flex-direction:column;gap:.6rem}.sx-head{display:flex;align-items:center;gap:.5rem;padding-bottom:.4rem;border-bottom:1px solid var(--surface-border, #dee2e6)}.sx-subject{font-weight:600;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sx-muted{font-weight:400;color:var(--text-color-secondary, #6c757d)}.sx-badge{margin-left:auto;padding:.1rem .4rem;border-radius:10px;font-size:.7rem;font-variant-numeric:tabular-nums;background:var(--surface-hover, rgba(213, 94, 0, .12));color:#a8480a;white-space:nowrap}.sx-busy{font-size:.8rem;color:var(--text-color-secondary, #6c757d)}:host ::ng-deep .sx-kind .p-button{padding:.25rem .6rem;font-size:.78rem}.sx-plot{width:100%;min-height:15rem;flex:1}.sx-detached{flex:1;min-height:6rem;display:flex;align-items:center;justify-content:center;font-size:.78rem;color:var(--text-color-secondary, #6c757d)}.sx-help{margin-left:auto;align-self:center;font-size:.95rem;color:var(--text-color-secondary, #6c757d);cursor:help}.sx-help:hover,.sx-help:focus-visible{color:var(--primary-color, #3b82f6)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: DropdownModule }, { kind: "component", type: i5$2.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: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i8$1.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$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: SpatialHeatmapControlsComponent, selector: "spatial-heatmap-controls", inputs: ["geneOptions", "genes", "zScore"], outputs: ["genesChange", "filterChange", "zScoreChange"] }, { kind: "component", type: SpatialEmbeddingControlsComponent, selector: "spatial-embedding-controls", inputs: ["isEmbedding", "embeddings", "embedding", "computable", "computed", "running", "state", "estimateLabel", "tooLargeNote", "detached"], outputs: ["embeddingChange", "compute", "cancel", "detachedToggle"] }, { kind: "component", type: SpatialChartWindowComponent, selector: "spatial-chart-window", inputs: ["title", "divId", "fixedHeight"], outputs: ["closed", "shown", "resizeEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: SpatialChartsComponent, isStandalone: true, selector: "spatial-charts", inputs: { active: "active" }, ngImport: i0, template: "<div class=\"sx-body\" *ngIf=\"controls\">\n  <!-- The chart follows whatever the map is coloured by, so the two can never\n       disagree about what is being shown. -->\n  <div class=\"sx-head\">\n    <span class=\"sx-subject\" *ngIf=\"subject\">{{ subject }}</span>\n    <span class=\"sx-subject sx-muted\" *ngIf=\"!subject\">nothing selected to chart</span>\n    <span class=\"sx-badge\" *ngIf=\"selectionCount\"> {{ selectionCount | number }} selected </span>\n    <i class=\"pi pi-spin pi-spinner sx-busy\" *ngIf=\"busy\" aria-label=\"loading\"></i>\n  </div>\n\n  <div class=\"sx-controls\">\n    <p-selectButton\n      [options]=\"kindOptions\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      [ngModel]=\"kind\"\n      (ngModelChange)=\"onKind($event)\"\n      styleClass=\"sx-kind\"\n    ></p-selectButton>\n    <p-dropdown\n      [options]=\"groupOptions\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      [ngModel]=\"groupBy\"\n      (ngModelChange)=\"onGroupBy($event)\"\n      placeholder=\"No grouping\"\n      appendTo=\"body\"\n      [disabled]=\"kind === 'histogram'\"\n      [pTooltip]=\"\n        kind === 'heatmap'\n          ? 'The categorical column the heatmap\\'s columns come from'\n          : 'Split a violin or box by a categorical column'\n      \"\n      tooltipPosition=\"top\"\n    ></p-dropdown>\n    <!-- What the chart on screen shows, and what it must NOT be read for. Each of these\n         answers a different question and two are routinely over-read, so the caveat\n         travels with the explanation. -->\n    <i\n      class=\"pi pi-question-circle sx-help\"\n      [pTooltip]=\"kindHelp\"\n      [escape]=\"false\"\n      tooltipPosition=\"left\"\n      tooltipStyleClass=\"sx-help-tip\"\n      [attr.aria-label]=\"'About the ' + kind + ' chart'\"\n      tabindex=\"0\"\n    ></i>\n  </div>\n\n  <spatial-heatmap-controls\n    *ngIf=\"kind === 'heatmap'\"\n    [geneOptions]=\"geneOptions\"\n    [genes]=\"heatmapGenes\"\n    [zScore]=\"heatmapZScore\"\n    (genesChange)=\"onHeatmapGenes($event)\"\n    (filterChange)=\"onGeneFilter($event)\"\n    (zScoreChange)=\"onHeatmapZScore($event)\"\n  ></spatial-heatmap-controls>\n\n  <spatial-embedding-controls\n    [isEmbedding]=\"kind === 'embedding'\"\n    [embeddings]=\"embeddings\"\n    [embedding]=\"embedding\"\n    [computable]=\"isComputable\"\n    [computed]=\"isComputed\"\n    [running]=\"isComputing\"\n    [state]=\"computeState\"\n    [estimateLabel]=\"computeEstimateLabel\"\n    [tooLargeNote]=\"tsneTooLarge ? tsneTooLargeNote : null\"\n    [detached]=\"detached\"\n    (embeddingChange)=\"onEmbedding($event)\"\n    (compute)=\"computeEmbedding()\"\n    (cancel)=\"cancelCompute()\"\n    (detachedToggle)=\"toggleDetached()\"\n  >\n  </spatial-embedding-controls>\n\n  <div [id]=\"chartDiv\" class=\"sx-plot\" *ngIf=\"!detached\"></div>\n\n  <!-- Detached: the chart keeps drawing, in its own window. Says so rather than\n       leaving a blank panel that looks broken. -->\n  <div class=\"sx-detached\" *ngIf=\"detached\">Shown in its own window.</div>\n\n  <ng-container *ngTemplateOutlet=\"hints\"></ng-container>\n</div>\n\n<!-- Declared once and rendered in both the panel and the detached window: the ladder is\n     deliberately not mutually exclusive (a heatmap still needs its grouping prompt), so\n     collapsing it to a single expression would drop a hint rather than move it. -->\n<ng-template #hints>\n  <small class=\"sx-hint\" *ngIf=\"notice\">{{ notice }}</small>\n  <small class=\"sx-hint\" *ngIf=\"!notice && suggestsGrouping\"> Pick a grouping to compare categories. </small>\n  <small class=\"sx-hint\" *ngIf=\"!notice && selectionCount && kind === 'histogram'\">\n    The selection is overlaid on the full distribution.\n  </small>\n  <small class=\"sx-hint\" *ngIf=\"!notice && selectionCount && kind !== 'histogram' && kind !== 'heatmap'\">\n    Showing the selection only.\n  </small>\n  <small class=\"sx-hint\" *ngIf=\"!notice && kind === 'heatmap'\">{{ heatmapNote }}</small>\n  <small class=\"sx-hint\" *ngIf=\"!notice && kind === 'embedding'\">{{ embeddingNote }}</small>\n</ng-template>\n\n<spatial-chart-window\n  *ngIf=\"detached\"\n  [title]=\"detachedTitle\"\n  [divId]=\"detachedDiv\"\n  [fixedHeight]=\"hasFixedHeight\"\n  (closed)=\"toggleDetached()\"\n  (shown)=\"onDetachedWindowShown()\"\n  (resizeEnd)=\"onDetachedResizeEnd()\"\n>\n  <ng-container *ngTemplateOutlet=\"hints\"></ng-container>\n</spatial-chart-window>\n", styles: [".sx-controls{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.sx-controls p-dropdown{flex:1 1 8rem;min-width:0}:host ::ng-deep .sx-controls p-dropdown .p-dropdown{width:100%}.sx-hint{font-size:.75rem;color:var(--text-color-secondary, #6c757d);line-height:1.35}.sx-warn{color:var(--orange-600, #c2410c)}:host ::ng-deep .spatial-charts-dialog .p-dialog-content{padding:.75rem 1rem 1rem}.sx-empty{padding:.5rem 0;font-size:.85rem;color:var(--text-color-secondary, #6c757d);line-height:1.4}.sx-body{display:flex;flex-direction:column;gap:.6rem}.sx-head{display:flex;align-items:center;gap:.5rem;padding-bottom:.4rem;border-bottom:1px solid var(--surface-border, #dee2e6)}.sx-subject{font-weight:600;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sx-muted{font-weight:400;color:var(--text-color-secondary, #6c757d)}.sx-badge{margin-left:auto;padding:.1rem .4rem;border-radius:10px;font-size:.7rem;font-variant-numeric:tabular-nums;background:var(--surface-hover, rgba(213, 94, 0, .12));color:#a8480a;white-space:nowrap}.sx-busy{font-size:.8rem;color:var(--text-color-secondary, #6c757d)}:host ::ng-deep .sx-kind .p-button{padding:.25rem .6rem;font-size:.78rem}.sx-plot{width:100%;min-height:15rem;flex:1}.sx-detached{flex:1;min-height:6rem;display:flex;align-items:center;justify-content:center;font-size:.78rem;color:var(--text-color-secondary, #6c757d)}.sx-help{margin-left:auto;align-self:center;font-size:.95rem;color:var(--text-color-secondary, #6c757d);cursor:help}.sx-help:hover,.sx-help:focus-visible{color:var(--primary-color, #3b82f6)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: DropdownModule }, { kind: "component", type: i5$2.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: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i8$2.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$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: SpatialHeatmapControlsComponent, selector: "spatial-heatmap-controls", inputs: ["geneOptions", "genes", "zScore"], outputs: ["genesChange", "filterChange", "zScoreChange"] }, { kind: "component", type: SpatialEmbeddingControlsComponent, selector: "spatial-embedding-controls", inputs: ["isEmbedding", "embeddings", "embedding", "computable", "computed", "running", "state", "estimateLabel", "tooLargeNote", "detached"], outputs: ["embeddingChange", "compute", "cancel", "detachedToggle"] }, { kind: "component", type: SpatialChartWindowComponent, selector: "spatial-chart-window", inputs: ["title", "divId", "fixedHeight"], outputs: ["closed", "shown", "resizeEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SpatialChartsComponent, decorators: [{
             type: Component,
@@ -21374,6 +21502,24 @@ function cellsShown(dataset, view) {
     const available = !!(dataset?.polygonTiles || dataset?.polygons);
     return available && (view.showCells ?? true);
 }
+/**
+ * The boundary sets drawn for the view's `cellSet`: that set when the dataset has it, else the
+ * dataset's default, else its first; for "both", that one with the other set beside it. Null when
+ * the dataset has no set. The renderer and the Cells panel's switches both read it, so a set kept
+ * from another dataset shows as what is actually drawn.
+ */
+function drawnCellSets(tiled, cellSet) {
+    if (!tiled)
+        return null;
+    const both = cellSet === 'both';
+    const set = !both && cellSet && tiled.sets.some((s) => s.name === cellSet)
+        ? cellSet
+        : (tiled.defaultSet ?? tiled.sets[0]?.name);
+    if (!set)
+        return null;
+    const nucleusSet = both ? tiled.sets.find((s) => s.name !== set)?.name : undefined;
+    return nucleusSet ? { set, nucleusSet } : { set };
+}
 /** A column holding a hand-curated cell-type annotation, by naming convention. */
 function isCuratedColumn(name) {
     return /curated/i.test(name);
@@ -22794,6 +22940,12 @@ class SpatialCellsPanelComponent {
          * its buttons whenever the array identity changes — which made them impossible to click.
          */
         this.cellSetOptions = [];
+        /**
+         * The boundary sets, the cells' first, each with a switch when there are at most two (as
+         * CytoCanvas's "Cell Boundaries" and "Nuclear Boundaries"): either, both or neither drawn.
+         * More sets keep the one-of choice.
+         */
+        this.boundarySets = [];
         /** Cell colour modes on offer (Xenium Explorer's "Cell Color"). */
         this.cellColorOptions = [];
         /** The density colour bar, rebuilt only when its colormap changes (a 256-entry LUT). */
@@ -22804,6 +22956,9 @@ class SpatialCellsPanelComponent {
         if (changes['dataset']) {
             const options = tileOptions(this.dataset);
             this.cellSetOptions = options.cellSetOptions;
+            this.boundarySets = [...(this.dataset?.polygonTiles?.sets ?? [])]
+                .sort((a, b) => (a.name === 'cell' ? -1 : b.name === 'cell' ? 1 : 0))
+                .map((set) => ({ name: set.name, label: set.label }));
             this.cellColorOptions = options.cellColorOptions;
         }
         if (this.densityBarFor !== this.view.densityColormap || !this.densityColorBarCss) {
@@ -22815,10 +22970,11 @@ class SpatialCellsPanelComponent {
     get cellsOn() {
         return cellsShown(this.dataset, this.view);
     }
-    /** The boundary set drawn: the view's choice, else the dataset's default, else its first. */
+    /** The boundary set drawn, or "both", as the renderer resolves the view's choice: a set this
+     *  dataset has, else its default, else its first. */
     get activeCellSet() {
-        const tiles = this.dataset?.polygonTiles;
-        return this.view.cellSet ?? tiles?.defaultSet ?? tiles?.sets[0]?.name ?? null;
+        const drawn = drawnCellSets(this.dataset?.polygonTiles, this.view.cellSet);
+        return drawn?.nucleusSet ? 'both' : (drawn?.set ?? null);
     }
     /** Fill opacity as a 0–100 number, for the box beside the slider. */
     get cellOpacityPercent() {
@@ -22830,6 +22986,30 @@ class SpatialCellsPanelComponent {
     onCellSet(set) {
         this.controls?.setViewState({ cellSet: set });
     }
+    /** Whether boundary set `name` is drawn: outlines on, and that set or both. */
+    boundaryOn(name) {
+        if (!this.cellsOn)
+            return false;
+        const drawn = drawnCellSets(this.dataset?.polygonTiles, this.view.cellSet);
+        return drawn?.set === name || drawn?.nucleusSet === name;
+    }
+    /**
+     * A set's switch: on draws it with the other when that one is drawn ("both"), else alone;
+     * off leaves the other drawn, or no outlines at all.
+     */
+    onBoundary(name, on) {
+        const other = this.boundarySets.find((s) => s.name !== name)?.name;
+        const otherOn = !!other && this.boundaryOn(other);
+        if (on) {
+            this.controls?.setViewState({ showCells: true, cellSet: otherOn ? 'both' : name });
+        }
+        else if (otherOn) {
+            this.controls?.setViewState({ cellSet: other });
+        }
+        else {
+            this.controls?.setViewState({ showCells: false });
+        }
+    }
     onCellDraw(draw) {
         this.controls?.setViewState({ cellDraw: draw });
     }
@@ -22855,7 +23035,7 @@ class SpatialCellsPanelComponent {
         this.controls?.setViewState({ cellSingleColor: hex });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SpatialCellsPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: SpatialCellsPanelComponent, isStandalone: true, selector: "spatial-cells-panel", inputs: { controls: "controls", dataset: "dataset", view: "view", genes: "genes", colorBarCss: "colorBarCss", open: "open" }, outputs: { openChange: "openChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"sc-panel\" [class.open]=\"open\">\n  <div class=\"sc-panel-head\" (click)=\"openChange.emit(!open)\">\n    <p-checkbox\n      [binary]=\"true\"\n      [ngModel]=\"cellsOn\"\n      (click)=\"$event.stopPropagation()\"\n      (onChange)=\"onShowCells($event.checked)\"\n    ></p-checkbox>\n    <span class=\"sc-panel-title\">Cells</span>\n    <i class=\"pi\" [class.pi-chevron-down]=\"open\" [class.pi-chevron-right]=\"!open\"></i>\n  </div>\n  <div class=\"sc-panel-body\" *ngIf=\"open\">\n    <ng-container *ngIf=\"cellSetOptions.length > 1\">\n      <div class=\"sc-subhead\">Boundaries</div>\n      <p-selectButton\n        [options]=\"cellSetOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [ngModel]=\"activeCellSet\"\n        (ngModelChange)=\"onCellSet($event)\"\n        [allowEmpty]=\"false\"\n        styleClass=\"sc-buttons\"\n      ></p-selectButton>\n    </ng-container>\n\n    <div class=\"sc-subhead\">Coloring</div>\n    <div class=\"sc-row\">\n      <span class=\"sc-lbl\">Cell Color</span>\n      <p-dropdown\n        [options]=\"cellColorOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [ngModel]=\"view.cellColorMode\"\n        (ngModelChange)=\"onCellColorMode($event)\"\n        appendTo=\"body\"\n      ></p-dropdown>\n    </div>\n    <small class=\"sc-hint\" *ngIf=\"view.cellColorMode === 'group'\">\n      Adjust cell color in the groups section below.\n    </small>\n    <ng-container *ngIf=\"genes?.state$ | async as gene\">\n      <div class=\"sc-row\" *ngIf=\"view.cellColorMode === 'gene' && dataset?.features\">\n        <span class=\"sc-lbl\">Gene</span>\n        <p-dropdown\n          [options]=\"gene.options\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [ngModel]=\"view.cellColorGene\"\n          (ngModelChange)=\"onCellColorGene($event)\"\n          [filter]=\"true\"\n          filterBy=\"label\"\n          [resetFilterOnHide]=\"true\"\n          (onFilter)=\"genes?.onFilter($event.filter)\"\n          (onShow)=\"genes?.ensureList()\"\n          [virtualScroll]=\"gene.options.length > geneVirtualScrollFrom\"\n          [virtualScrollItemSize]=\"30\"\n          appendTo=\"body\"\n          placeholder=\"Search genes\u2026\"\n        ></p-dropdown>\n      </div>\n    </ng-container>\n    <div class=\"sc-row\" *ngIf=\"view.cellColorMode === 'single'\">\n      <span class=\"sc-lbl\">Color</span>\n      <input\n        type=\"color\"\n        class=\"sc-color-input\"\n        [value]=\"view.cellSingleColor\"\n        (change)=\"onCellSingleColor($any($event.target).value)\"\n      />\n    </div>\n    <div *ngIf=\"view.cellColorMode === 'gene' || view.cellColorMode === 'transcriptDensity'\">\n      <div class=\"sc-colorbar\" [style.background]=\"colorBarCss || densityColorBarCss\"></div>\n    </div>\n\n    <spatial-groups-panel [controls]=\"controls\" [dataset]=\"dataset\" [view]=\"view\"></spatial-groups-panel>\n\n    <div class=\"sc-subhead\">Visibility</div>\n    <span class=\"sc-lbl\">View cells as</span>\n    <p-selectButton\n      [options]=\"cellDrawOptions\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      [ngModel]=\"view.cellDraw\"\n      (ngModelChange)=\"onCellDraw($event)\"\n      [allowEmpty]=\"false\"\n      styleClass=\"sc-buttons\"\n    ></p-selectButton>\n    <ng-container *ngIf=\"view.cellDraw !== 'outline'\">\n      <span class=\"sc-lbl\">Cell fill opacity</span>\n      <div class=\"sc-row sc-row-number\">\n        <p-slider\n          [ngModel]=\"view.cellOpacity\"\n          [min]=\"0.05\"\n          [max]=\"1\"\n          [step]=\"0.05\"\n          (onChange)=\"onCellOpacity($event.value)\"\n        ></p-slider>\n        <p-inputNumber\n          [ngModel]=\"cellOpacityPercent\"\n          (ngModelChange)=\"onCellOpacityPercent($event)\"\n          [min]=\"5\"\n          [max]=\"100\"\n          [showButtons]=\"false\"\n          inputStyleClass=\"sc-num\"\n        ></p-inputNumber>\n      </div>\n    </ng-container>\n  </div>\n</div>\n", styles: [".sc-hint{font-size:.75rem;color:var(--text-color-secondary, #6c757d)}.sc-error{color:var(--red-600, #c62828)}.sc-section{display:flex;flex-direction:column;gap:.35rem}.sc-lbl{font-size:.78rem;color:var(--text-color-secondary, #6c757d);white-space:nowrap}.sc-row{display:flex;align-items:center;gap:.6rem}.sc-row p-slider,.sc-row p-dropdown,.sc-row p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row p-slider .p-slider{width:100%}:host ::ng-deep .sc-row p-dropdown .p-dropdown,:host ::ng-deep .sc-row p-treeSelect .p-treeselect{width:100%}.sc-row .sc-lbl{flex:0 0 calc(50% - .6rem);min-width:0;overflow:hidden;text-overflow:ellipsis}.sc-cmap-option{display:inline-flex;align-items:center;gap:.4rem}.sc-cmap-swatch{width:3.5rem;height:.7rem;border-radius:2px;display:block}.sc-val{flex:0 0 4rem;text-align:right;font-size:.78rem;font-variant-numeric:tabular-nums;white-space:nowrap}:host ::ng-deep .sc-full,:host ::ng-deep .sc-full .p-dropdown,:host ::ng-deep .sc-full .p-autocomplete,:host ::ng-deep .sc-full input{width:100%}.sc-colorbar{height:.75rem;border-radius:2px;border:1px solid rgba(0,0,0,.2)}.sc-colorbar-ends{display:flex;justify-content:space-between;font-size:.7rem;color:var(--text-color-secondary, #6c757d);margin-top:.2rem}.sc-panel{border:1px solid var(--surface-border, #dee2e6);border-radius:6px;margin-bottom:.5rem;overflow:hidden}.sc-panel-head{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--surface-100, #f5f6f7)}.sc-panel-head .sc-panel-title{flex:1;font-weight:600}.sc-panel.open>.sc-panel-head{background:var(--primary-color, #2196f3);color:var(--primary-color-text, #fff)}.sc-panel-body{display:flex;flex-direction:column;gap:.45rem;padding:.6rem .75rem .75rem}.sc-subhead{display:flex;align-items:center;gap:.5rem;margin-top:.4rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-color-secondary, #6c757d)}.sc-subhead:after{content:\"\";flex:1;border-top:1px solid var(--surface-border, #dee2e6)}:host ::ng-deep .sc-buttons .p-button{padding:.35rem .75rem;font-size:.85rem}.sc-row-picker p-dropdown,.sc-row-picker p-multiSelect,.sc-row-picker p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row-picker .sc-variant{width:6.5rem}:host ::ng-deep .sc-row-picker p-multiselect .p-multiselect{width:100%}:host ::ng-deep .sc-row-picker p-dropdown:has(.sc-variant){flex:0 0 6.5rem}:host ::ng-deep .sc-row-picker p-treeselect:has(.sc-palette){flex:0 0 3rem}:host ::ng-deep .sc-palette .p-treeselect-label{width:0;padding:0}.sc-icon-btn{flex:0 0 auto;border:0;background:transparent;cursor:pointer;padding:.25rem .35rem;font:inherit;font-size:1.05rem;color:var(--text-color, #333);border-radius:4px}.sc-icon-btn:hover{background:var(--surface-200, #e9ecef)}.sc-icon-btn.active{color:var(--primary-color, #2196f3);font-weight:700}.sc-icon-btn:disabled{opacity:.5;cursor:default}.sc-small-btn{margin-left:auto;border:1px solid var(--surface-border, #ced4da);background:var(--surface-0, #fff);border-radius:4px;padding:.2rem .6rem;font:inherit;font-size:.8rem;cursor:pointer}:host ::ng-deep .sc-group-heading{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.7}.sc-group-list,.sc-gene-tree{max-height:16rem;overflow-y:auto;border:1px solid var(--surface-border, #dee2e6);border-radius:4px;padding:.25rem .4rem}.sc-group-row,.sc-gene-row{display:flex;align-items:center;gap:.45rem;padding:.15rem 0;font-size:.88rem}.sc-group-row .sc-group-label,.sc-gene-row .sc-group-label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-group-all,.sc-gene-root,.sc-gene-group{font-weight:600}.sc-group-all .sc-icon-btn,.sc-gene-root .sc-icon-btn,.sc-gene-group .sc-icon-btn{margin-left:auto;font-size:.85rem}.sc-count{flex:0 0 auto;font-size:.78rem;color:var(--text-color-secondary, #6c757d)}.sc-glyph-option{display:inline-flex;align-items:center;gap:.4rem}.sc-glyph-svg{width:1rem;height:1rem;fill:currentColor}:host ::ng-deep .sc-glyph-pick .p-dropdown-label{padding:.2rem .4rem}.sc-color-input{width:2.5rem;height:1.8rem;border:1px solid var(--surface-border, #ced4da);border-radius:4px;padding:0;background:none}.sc-row-number p-slider,.sc-row-range p-slider{flex:1 1 0;min-width:0}:host ::ng-deep .sc-num{width:4.5rem;padding:.3rem .4rem;text-align:center}:host ::ng-deep .sc-row-number p-inputnumber,:host ::ng-deep .sc-row-range p-inputnumber{flex:0 0 auto}.sc-gene-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1.4rem;height:1.4rem;padding:0;border:1px solid transparent;border-radius:4px;background:transparent;cursor:pointer}.sc-gene-icon:hover,.sc-gene-icon:focus-visible{border-color:var(--surface-border, rgba(0, 0, 0, .2))}:host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$2.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: "ngmodule", type: DropdownModule }, { kind: "component", type: i5$2.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: "ngmodule", type: InputNumberModule }, { kind: "component", type: i7$3.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: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i8$1.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: SliderModule }, { kind: "component", type: i2$1.Slider, selector: "p-slider", inputs: ["animate", "disabled", "min", "max", "orientation", "step", "range", "style", "styleClass", "ariaLabel", "ariaLabelledBy", "tabindex", "autofocus"], outputs: ["onChange", "onSlideEnd"] }, { kind: "component", type: SpatialGroupsPanelComponent, selector: "spatial-groups-panel", inputs: ["controls", "dataset", "view"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: SpatialCellsPanelComponent, isStandalone: true, selector: "spatial-cells-panel", inputs: { controls: "controls", dataset: "dataset", view: "view", genes: "genes", colorBarCss: "colorBarCss", open: "open" }, outputs: { openChange: "openChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"sc-panel\" [class.open]=\"open\">\n  <div class=\"sc-panel-head\" (click)=\"openChange.emit(!open)\">\n    <p-checkbox\n      [binary]=\"true\"\n      [ngModel]=\"cellsOn\"\n      (click)=\"$event.stopPropagation()\"\n      (onChange)=\"onShowCells($event.checked)\"\n    ></p-checkbox>\n    <span class=\"sc-panel-title\">Cells</span>\n    <i class=\"pi\" [class.pi-chevron-down]=\"open\" [class.pi-chevron-right]=\"!open\"></i>\n  </div>\n  <div class=\"sc-panel-body\" *ngIf=\"open\">\n    <ng-container *ngIf=\"boundarySets.length && boundarySets.length <= 2\">\n      <div class=\"sc-subhead\">Boundaries</div>\n      <div class=\"sc-row\" *ngFor=\"let set of boundarySets\">\n        <span class=\"sc-lbl\">{{ set.label }}</span>\n        <p-inputSwitch\n          [ngModel]=\"boundaryOn(set.name)\"\n          (onChange)=\"onBoundary(set.name, $event.checked)\"\n          [attr.aria-label]=\"set.label\"\n        ></p-inputSwitch>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"boundarySets.length > 2\">\n      <div class=\"sc-subhead\">Boundaries</div>\n      <p-selectButton\n        [options]=\"cellSetOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [ngModel]=\"activeCellSet\"\n        (ngModelChange)=\"onCellSet($event)\"\n        [allowEmpty]=\"false\"\n        styleClass=\"sc-buttons\"\n      ></p-selectButton>\n    </ng-container>\n\n    <div class=\"sc-subhead\">Coloring</div>\n    <div class=\"sc-row\">\n      <span class=\"sc-lbl\">Cell Color</span>\n      <p-dropdown\n        [options]=\"cellColorOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [ngModel]=\"view.cellColorMode\"\n        (ngModelChange)=\"onCellColorMode($event)\"\n        appendTo=\"body\"\n      ></p-dropdown>\n    </div>\n    <small class=\"sc-hint\" *ngIf=\"view.cellColorMode === 'group'\">\n      Adjust cell color in the groups section below.\n    </small>\n    <ng-container *ngIf=\"genes?.state$ | async as gene\">\n      <div class=\"sc-row\" *ngIf=\"view.cellColorMode === 'gene' && dataset?.features\">\n        <span class=\"sc-lbl\">Gene</span>\n        <p-dropdown\n          [options]=\"gene.options\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [ngModel]=\"view.cellColorGene\"\n          (ngModelChange)=\"onCellColorGene($event)\"\n          [filter]=\"true\"\n          filterBy=\"label\"\n          [resetFilterOnHide]=\"true\"\n          (onFilter)=\"genes?.onFilter($event.filter)\"\n          (onShow)=\"genes?.ensureList()\"\n          [virtualScroll]=\"gene.options.length > geneVirtualScrollFrom\"\n          [virtualScrollItemSize]=\"30\"\n          appendTo=\"body\"\n          placeholder=\"Search genes\u2026\"\n        ></p-dropdown>\n      </div>\n    </ng-container>\n    <div class=\"sc-row\" *ngIf=\"view.cellColorMode === 'single'\">\n      <span class=\"sc-lbl\">Color</span>\n      <input\n        type=\"color\"\n        class=\"sc-color-input\"\n        [value]=\"view.cellSingleColor\"\n        (change)=\"onCellSingleColor($any($event.target).value)\"\n      />\n    </div>\n    <div *ngIf=\"view.cellColorMode === 'gene' || view.cellColorMode === 'transcriptDensity'\">\n      <div class=\"sc-colorbar\" [style.background]=\"colorBarCss || densityColorBarCss\"></div>\n    </div>\n\n    <spatial-groups-panel [controls]=\"controls\" [dataset]=\"dataset\" [view]=\"view\"></spatial-groups-panel>\n\n    <div class=\"sc-subhead\">Visibility</div>\n    <span class=\"sc-lbl\">View cells as</span>\n    <p-selectButton\n      [options]=\"cellDrawOptions\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      [ngModel]=\"view.cellDraw\"\n      (ngModelChange)=\"onCellDraw($event)\"\n      [allowEmpty]=\"false\"\n      styleClass=\"sc-buttons\"\n    ></p-selectButton>\n    <ng-container *ngIf=\"view.cellDraw !== 'outline'\">\n      <span class=\"sc-lbl\">Cell fill opacity</span>\n      <div class=\"sc-row sc-row-number\">\n        <p-slider\n          [ngModel]=\"view.cellOpacity\"\n          [min]=\"0.05\"\n          [max]=\"1\"\n          [step]=\"0.05\"\n          (onChange)=\"onCellOpacity($event.value)\"\n        ></p-slider>\n        <p-inputNumber\n          [ngModel]=\"cellOpacityPercent\"\n          (ngModelChange)=\"onCellOpacityPercent($event)\"\n          [min]=\"5\"\n          [max]=\"100\"\n          [showButtons]=\"false\"\n          inputStyleClass=\"sc-num\"\n        ></p-inputNumber>\n      </div>\n    </ng-container>\n  </div>\n</div>\n", styles: [".sc-hint{font-size:.75rem;color:var(--text-color-secondary, #6c757d)}.sc-error{color:var(--red-600, #c62828)}.sc-section{display:flex;flex-direction:column;gap:.35rem}.sc-lbl{font-size:.78rem;color:var(--text-color-secondary, #6c757d);white-space:nowrap}.sc-row{display:flex;align-items:center;gap:.6rem}.sc-row p-slider,.sc-row p-dropdown,.sc-row p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row p-slider .p-slider{width:100%}:host ::ng-deep .sc-row p-dropdown .p-dropdown,:host ::ng-deep .sc-row p-treeSelect .p-treeselect{width:100%}.sc-row .sc-lbl{flex:0 0 calc(50% - .6rem);min-width:0;overflow:hidden;text-overflow:ellipsis}.sc-cmap-option{display:inline-flex;align-items:center;gap:.4rem}.sc-cmap-swatch{width:3.5rem;height:.7rem;border-radius:2px;display:block}.sc-val{flex:0 0 4rem;text-align:right;font-size:.78rem;font-variant-numeric:tabular-nums;white-space:nowrap}:host ::ng-deep .sc-full,:host ::ng-deep .sc-full .p-dropdown,:host ::ng-deep .sc-full .p-autocomplete,:host ::ng-deep .sc-full input{width:100%}.sc-colorbar{height:.75rem;border-radius:2px;border:1px solid rgba(0,0,0,.2)}.sc-colorbar-ends{display:flex;justify-content:space-between;font-size:.7rem;color:var(--text-color-secondary, #6c757d);margin-top:.2rem}.sc-panel{border:1px solid var(--surface-border, #dee2e6);border-radius:6px;margin-bottom:.5rem;overflow:hidden}.sc-panel-head{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--surface-100, #f5f6f7)}.sc-panel-head .sc-panel-title{flex:1;font-weight:600}.sc-panel.open>.sc-panel-head{background:var(--primary-color, #2196f3);color:var(--primary-color-text, #fff)}.sc-panel-body{display:flex;flex-direction:column;gap:.45rem;padding:.6rem .75rem .75rem}.sc-subhead{display:flex;align-items:center;gap:.5rem;margin-top:.4rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-color-secondary, #6c757d)}.sc-subhead:after{content:\"\";flex:1;border-top:1px solid var(--surface-border, #dee2e6)}:host ::ng-deep .sc-buttons .p-button{padding:.35rem .75rem;font-size:.85rem}.sc-row-picker p-dropdown,.sc-row-picker p-multiSelect,.sc-row-picker p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row-picker .sc-variant{width:6.5rem}:host ::ng-deep .sc-row-picker p-multiselect .p-multiselect{width:100%}:host ::ng-deep .sc-row-picker p-dropdown:has(.sc-variant){flex:0 0 6.5rem}:host ::ng-deep .sc-row-picker p-treeselect:has(.sc-palette){flex:0 0 3rem}:host ::ng-deep .sc-palette .p-treeselect-label{width:0;padding:0}.sc-icon-btn{flex:0 0 auto;border:0;background:transparent;cursor:pointer;padding:.25rem .35rem;font:inherit;font-size:1.05rem;color:var(--text-color, #333);border-radius:4px}.sc-icon-btn:hover{background:var(--surface-200, #e9ecef)}.sc-icon-btn.active{color:var(--primary-color, #2196f3);font-weight:700}.sc-icon-btn:disabled{opacity:.5;cursor:default}.sc-small-btn{margin-left:auto;border:1px solid var(--surface-border, #ced4da);background:var(--surface-0, #fff);border-radius:4px;padding:.2rem .6rem;font:inherit;font-size:.8rem;cursor:pointer}:host ::ng-deep .sc-group-heading{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.7}.sc-group-list,.sc-gene-tree{max-height:16rem;overflow-y:auto;border:1px solid var(--surface-border, #dee2e6);border-radius:4px;padding:.25rem .4rem}.sc-group-row,.sc-gene-row{display:flex;align-items:center;gap:.45rem;padding:.15rem 0;font-size:.88rem}.sc-group-row .sc-group-label,.sc-gene-row .sc-group-label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-group-all,.sc-gene-root,.sc-gene-group{font-weight:600}.sc-group-all .sc-icon-btn,.sc-gene-root .sc-icon-btn,.sc-gene-group .sc-icon-btn{margin-left:auto;font-size:.85rem}.sc-count{flex:0 0 auto;font-size:.78rem;color:var(--text-color-secondary, #6c757d)}.sc-glyph-option{display:inline-flex;align-items:center;gap:.4rem}.sc-glyph-svg{width:1rem;height:1rem;fill:currentColor}:host ::ng-deep .sc-glyph-pick .p-dropdown-label{padding:.2rem .4rem}.sc-color-input{width:2.5rem;height:1.8rem;border:1px solid var(--surface-border, #ced4da);border-radius:4px;padding:0;background:none}.sc-row-number p-slider,.sc-row-range p-slider{flex:1 1 0;min-width:0}:host ::ng-deep .sc-num{width:4.5rem;padding:.3rem .4rem;text-align:center}:host ::ng-deep .sc-row-number p-inputnumber,:host ::ng-deep .sc-row-range p-inputnumber{flex:0 0 auto}.sc-gene-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1.4rem;height:1.4rem;padding:0;border:1px solid transparent;border-radius:4px;background:transparent;cursor:pointer}.sc-gene-icon:hover,.sc-gene-icon:focus-visible{border-color:var(--surface-border, rgba(0, 0, 0, .2))}:host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$2.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: "ngmodule", type: DropdownModule }, { kind: "component", type: i5$2.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: "ngmodule", type: InputSwitchModule }, { kind: "component", type: i5$3.InputSwitch, selector: "p-inputSwitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i6$1.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: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i8$2.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: SliderModule }, { kind: "component", type: i8.Slider, selector: "p-slider", inputs: ["animate", "disabled", "min", "max", "orientation", "step", "range", "style", "styleClass", "ariaLabel", "ariaLabelledBy", "tabindex", "autofocus"], outputs: ["onChange", "onSlideEnd"] }, { kind: "component", type: SpatialGroupsPanelComponent, selector: "spatial-groups-panel", inputs: ["controls", "dataset", "view"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SpatialCellsPanelComponent, decorators: [{
             type: Component,
@@ -22864,11 +23044,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
                         FormsModule,
                         CheckboxModule,
                         DropdownModule,
+                        InputSwitchModule,
                         InputNumberModule,
                         SelectButtonModule,
                         SliderModule,
                         SpatialGroupsPanelComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sc-panel\" [class.open]=\"open\">\n  <div class=\"sc-panel-head\" (click)=\"openChange.emit(!open)\">\n    <p-checkbox\n      [binary]=\"true\"\n      [ngModel]=\"cellsOn\"\n      (click)=\"$event.stopPropagation()\"\n      (onChange)=\"onShowCells($event.checked)\"\n    ></p-checkbox>\n    <span class=\"sc-panel-title\">Cells</span>\n    <i class=\"pi\" [class.pi-chevron-down]=\"open\" [class.pi-chevron-right]=\"!open\"></i>\n  </div>\n  <div class=\"sc-panel-body\" *ngIf=\"open\">\n    <ng-container *ngIf=\"cellSetOptions.length > 1\">\n      <div class=\"sc-subhead\">Boundaries</div>\n      <p-selectButton\n        [options]=\"cellSetOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [ngModel]=\"activeCellSet\"\n        (ngModelChange)=\"onCellSet($event)\"\n        [allowEmpty]=\"false\"\n        styleClass=\"sc-buttons\"\n      ></p-selectButton>\n    </ng-container>\n\n    <div class=\"sc-subhead\">Coloring</div>\n    <div class=\"sc-row\">\n      <span class=\"sc-lbl\">Cell Color</span>\n      <p-dropdown\n        [options]=\"cellColorOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [ngModel]=\"view.cellColorMode\"\n        (ngModelChange)=\"onCellColorMode($event)\"\n        appendTo=\"body\"\n      ></p-dropdown>\n    </div>\n    <small class=\"sc-hint\" *ngIf=\"view.cellColorMode === 'group'\">\n      Adjust cell color in the groups section below.\n    </small>\n    <ng-container *ngIf=\"genes?.state$ | async as gene\">\n      <div class=\"sc-row\" *ngIf=\"view.cellColorMode === 'gene' && dataset?.features\">\n        <span class=\"sc-lbl\">Gene</span>\n        <p-dropdown\n          [options]=\"gene.options\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [ngModel]=\"view.cellColorGene\"\n          (ngModelChange)=\"onCellColorGene($event)\"\n          [filter]=\"true\"\n          filterBy=\"label\"\n          [resetFilterOnHide]=\"true\"\n          (onFilter)=\"genes?.onFilter($event.filter)\"\n          (onShow)=\"genes?.ensureList()\"\n          [virtualScroll]=\"gene.options.length > geneVirtualScrollFrom\"\n          [virtualScrollItemSize]=\"30\"\n          appendTo=\"body\"\n          placeholder=\"Search genes\u2026\"\n        ></p-dropdown>\n      </div>\n    </ng-container>\n    <div class=\"sc-row\" *ngIf=\"view.cellColorMode === 'single'\">\n      <span class=\"sc-lbl\">Color</span>\n      <input\n        type=\"color\"\n        class=\"sc-color-input\"\n        [value]=\"view.cellSingleColor\"\n        (change)=\"onCellSingleColor($any($event.target).value)\"\n      />\n    </div>\n    <div *ngIf=\"view.cellColorMode === 'gene' || view.cellColorMode === 'transcriptDensity'\">\n      <div class=\"sc-colorbar\" [style.background]=\"colorBarCss || densityColorBarCss\"></div>\n    </div>\n\n    <spatial-groups-panel [controls]=\"controls\" [dataset]=\"dataset\" [view]=\"view\"></spatial-groups-panel>\n\n    <div class=\"sc-subhead\">Visibility</div>\n    <span class=\"sc-lbl\">View cells as</span>\n    <p-selectButton\n      [options]=\"cellDrawOptions\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      [ngModel]=\"view.cellDraw\"\n      (ngModelChange)=\"onCellDraw($event)\"\n      [allowEmpty]=\"false\"\n      styleClass=\"sc-buttons\"\n    ></p-selectButton>\n    <ng-container *ngIf=\"view.cellDraw !== 'outline'\">\n      <span class=\"sc-lbl\">Cell fill opacity</span>\n      <div class=\"sc-row sc-row-number\">\n        <p-slider\n          [ngModel]=\"view.cellOpacity\"\n          [min]=\"0.05\"\n          [max]=\"1\"\n          [step]=\"0.05\"\n          (onChange)=\"onCellOpacity($event.value)\"\n        ></p-slider>\n        <p-inputNumber\n          [ngModel]=\"cellOpacityPercent\"\n          (ngModelChange)=\"onCellOpacityPercent($event)\"\n          [min]=\"5\"\n          [max]=\"100\"\n          [showButtons]=\"false\"\n          inputStyleClass=\"sc-num\"\n        ></p-inputNumber>\n      </div>\n    </ng-container>\n  </div>\n</div>\n", styles: [".sc-hint{font-size:.75rem;color:var(--text-color-secondary, #6c757d)}.sc-error{color:var(--red-600, #c62828)}.sc-section{display:flex;flex-direction:column;gap:.35rem}.sc-lbl{font-size:.78rem;color:var(--text-color-secondary, #6c757d);white-space:nowrap}.sc-row{display:flex;align-items:center;gap:.6rem}.sc-row p-slider,.sc-row p-dropdown,.sc-row p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row p-slider .p-slider{width:100%}:host ::ng-deep .sc-row p-dropdown .p-dropdown,:host ::ng-deep .sc-row p-treeSelect .p-treeselect{width:100%}.sc-row .sc-lbl{flex:0 0 calc(50% - .6rem);min-width:0;overflow:hidden;text-overflow:ellipsis}.sc-cmap-option{display:inline-flex;align-items:center;gap:.4rem}.sc-cmap-swatch{width:3.5rem;height:.7rem;border-radius:2px;display:block}.sc-val{flex:0 0 4rem;text-align:right;font-size:.78rem;font-variant-numeric:tabular-nums;white-space:nowrap}:host ::ng-deep .sc-full,:host ::ng-deep .sc-full .p-dropdown,:host ::ng-deep .sc-full .p-autocomplete,:host ::ng-deep .sc-full input{width:100%}.sc-colorbar{height:.75rem;border-radius:2px;border:1px solid rgba(0,0,0,.2)}.sc-colorbar-ends{display:flex;justify-content:space-between;font-size:.7rem;color:var(--text-color-secondary, #6c757d);margin-top:.2rem}.sc-panel{border:1px solid var(--surface-border, #dee2e6);border-radius:6px;margin-bottom:.5rem;overflow:hidden}.sc-panel-head{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--surface-100, #f5f6f7)}.sc-panel-head .sc-panel-title{flex:1;font-weight:600}.sc-panel.open>.sc-panel-head{background:var(--primary-color, #2196f3);color:var(--primary-color-text, #fff)}.sc-panel-body{display:flex;flex-direction:column;gap:.45rem;padding:.6rem .75rem .75rem}.sc-subhead{display:flex;align-items:center;gap:.5rem;margin-top:.4rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-color-secondary, #6c757d)}.sc-subhead:after{content:\"\";flex:1;border-top:1px solid var(--surface-border, #dee2e6)}:host ::ng-deep .sc-buttons .p-button{padding:.35rem .75rem;font-size:.85rem}.sc-row-picker p-dropdown,.sc-row-picker p-multiSelect,.sc-row-picker p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row-picker .sc-variant{width:6.5rem}:host ::ng-deep .sc-row-picker p-multiselect .p-multiselect{width:100%}:host ::ng-deep .sc-row-picker p-dropdown:has(.sc-variant){flex:0 0 6.5rem}:host ::ng-deep .sc-row-picker p-treeselect:has(.sc-palette){flex:0 0 3rem}:host ::ng-deep .sc-palette .p-treeselect-label{width:0;padding:0}.sc-icon-btn{flex:0 0 auto;border:0;background:transparent;cursor:pointer;padding:.25rem .35rem;font:inherit;font-size:1.05rem;color:var(--text-color, #333);border-radius:4px}.sc-icon-btn:hover{background:var(--surface-200, #e9ecef)}.sc-icon-btn.active{color:var(--primary-color, #2196f3);font-weight:700}.sc-icon-btn:disabled{opacity:.5;cursor:default}.sc-small-btn{margin-left:auto;border:1px solid var(--surface-border, #ced4da);background:var(--surface-0, #fff);border-radius:4px;padding:.2rem .6rem;font:inherit;font-size:.8rem;cursor:pointer}:host ::ng-deep .sc-group-heading{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.7}.sc-group-list,.sc-gene-tree{max-height:16rem;overflow-y:auto;border:1px solid var(--surface-border, #dee2e6);border-radius:4px;padding:.25rem .4rem}.sc-group-row,.sc-gene-row{display:flex;align-items:center;gap:.45rem;padding:.15rem 0;font-size:.88rem}.sc-group-row .sc-group-label,.sc-gene-row .sc-group-label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-group-all,.sc-gene-root,.sc-gene-group{font-weight:600}.sc-group-all .sc-icon-btn,.sc-gene-root .sc-icon-btn,.sc-gene-group .sc-icon-btn{margin-left:auto;font-size:.85rem}.sc-count{flex:0 0 auto;font-size:.78rem;color:var(--text-color-secondary, #6c757d)}.sc-glyph-option{display:inline-flex;align-items:center;gap:.4rem}.sc-glyph-svg{width:1rem;height:1rem;fill:currentColor}:host ::ng-deep .sc-glyph-pick .p-dropdown-label{padding:.2rem .4rem}.sc-color-input{width:2.5rem;height:1.8rem;border:1px solid var(--surface-border, #ced4da);border-radius:4px;padding:0;background:none}.sc-row-number p-slider,.sc-row-range p-slider{flex:1 1 0;min-width:0}:host ::ng-deep .sc-num{width:4.5rem;padding:.3rem .4rem;text-align:center}:host ::ng-deep .sc-row-number p-inputnumber,:host ::ng-deep .sc-row-range p-inputnumber{flex:0 0 auto}.sc-gene-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1.4rem;height:1.4rem;padding:0;border:1px solid transparent;border-radius:4px;background:transparent;cursor:pointer}.sc-gene-icon:hover,.sc-gene-icon:focus-visible{border-color:var(--surface-border, rgba(0, 0, 0, .2))}:host{display:contents}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sc-panel\" [class.open]=\"open\">\n  <div class=\"sc-panel-head\" (click)=\"openChange.emit(!open)\">\n    <p-checkbox\n      [binary]=\"true\"\n      [ngModel]=\"cellsOn\"\n      (click)=\"$event.stopPropagation()\"\n      (onChange)=\"onShowCells($event.checked)\"\n    ></p-checkbox>\n    <span class=\"sc-panel-title\">Cells</span>\n    <i class=\"pi\" [class.pi-chevron-down]=\"open\" [class.pi-chevron-right]=\"!open\"></i>\n  </div>\n  <div class=\"sc-panel-body\" *ngIf=\"open\">\n    <ng-container *ngIf=\"boundarySets.length && boundarySets.length <= 2\">\n      <div class=\"sc-subhead\">Boundaries</div>\n      <div class=\"sc-row\" *ngFor=\"let set of boundarySets\">\n        <span class=\"sc-lbl\">{{ set.label }}</span>\n        <p-inputSwitch\n          [ngModel]=\"boundaryOn(set.name)\"\n          (onChange)=\"onBoundary(set.name, $event.checked)\"\n          [attr.aria-label]=\"set.label\"\n        ></p-inputSwitch>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"boundarySets.length > 2\">\n      <div class=\"sc-subhead\">Boundaries</div>\n      <p-selectButton\n        [options]=\"cellSetOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [ngModel]=\"activeCellSet\"\n        (ngModelChange)=\"onCellSet($event)\"\n        [allowEmpty]=\"false\"\n        styleClass=\"sc-buttons\"\n      ></p-selectButton>\n    </ng-container>\n\n    <div class=\"sc-subhead\">Coloring</div>\n    <div class=\"sc-row\">\n      <span class=\"sc-lbl\">Cell Color</span>\n      <p-dropdown\n        [options]=\"cellColorOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [ngModel]=\"view.cellColorMode\"\n        (ngModelChange)=\"onCellColorMode($event)\"\n        appendTo=\"body\"\n      ></p-dropdown>\n    </div>\n    <small class=\"sc-hint\" *ngIf=\"view.cellColorMode === 'group'\">\n      Adjust cell color in the groups section below.\n    </small>\n    <ng-container *ngIf=\"genes?.state$ | async as gene\">\n      <div class=\"sc-row\" *ngIf=\"view.cellColorMode === 'gene' && dataset?.features\">\n        <span class=\"sc-lbl\">Gene</span>\n        <p-dropdown\n          [options]=\"gene.options\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [ngModel]=\"view.cellColorGene\"\n          (ngModelChange)=\"onCellColorGene($event)\"\n          [filter]=\"true\"\n          filterBy=\"label\"\n          [resetFilterOnHide]=\"true\"\n          (onFilter)=\"genes?.onFilter($event.filter)\"\n          (onShow)=\"genes?.ensureList()\"\n          [virtualScroll]=\"gene.options.length > geneVirtualScrollFrom\"\n          [virtualScrollItemSize]=\"30\"\n          appendTo=\"body\"\n          placeholder=\"Search genes\u2026\"\n        ></p-dropdown>\n      </div>\n    </ng-container>\n    <div class=\"sc-row\" *ngIf=\"view.cellColorMode === 'single'\">\n      <span class=\"sc-lbl\">Color</span>\n      <input\n        type=\"color\"\n        class=\"sc-color-input\"\n        [value]=\"view.cellSingleColor\"\n        (change)=\"onCellSingleColor($any($event.target).value)\"\n      />\n    </div>\n    <div *ngIf=\"view.cellColorMode === 'gene' || view.cellColorMode === 'transcriptDensity'\">\n      <div class=\"sc-colorbar\" [style.background]=\"colorBarCss || densityColorBarCss\"></div>\n    </div>\n\n    <spatial-groups-panel [controls]=\"controls\" [dataset]=\"dataset\" [view]=\"view\"></spatial-groups-panel>\n\n    <div class=\"sc-subhead\">Visibility</div>\n    <span class=\"sc-lbl\">View cells as</span>\n    <p-selectButton\n      [options]=\"cellDrawOptions\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      [ngModel]=\"view.cellDraw\"\n      (ngModelChange)=\"onCellDraw($event)\"\n      [allowEmpty]=\"false\"\n      styleClass=\"sc-buttons\"\n    ></p-selectButton>\n    <ng-container *ngIf=\"view.cellDraw !== 'outline'\">\n      <span class=\"sc-lbl\">Cell fill opacity</span>\n      <div class=\"sc-row sc-row-number\">\n        <p-slider\n          [ngModel]=\"view.cellOpacity\"\n          [min]=\"0.05\"\n          [max]=\"1\"\n          [step]=\"0.05\"\n          (onChange)=\"onCellOpacity($event.value)\"\n        ></p-slider>\n        <p-inputNumber\n          [ngModel]=\"cellOpacityPercent\"\n          (ngModelChange)=\"onCellOpacityPercent($event)\"\n          [min]=\"5\"\n          [max]=\"100\"\n          [showButtons]=\"false\"\n          inputStyleClass=\"sc-num\"\n        ></p-inputNumber>\n      </div>\n    </ng-container>\n  </div>\n</div>\n", styles: [".sc-hint{font-size:.75rem;color:var(--text-color-secondary, #6c757d)}.sc-error{color:var(--red-600, #c62828)}.sc-section{display:flex;flex-direction:column;gap:.35rem}.sc-lbl{font-size:.78rem;color:var(--text-color-secondary, #6c757d);white-space:nowrap}.sc-row{display:flex;align-items:center;gap:.6rem}.sc-row p-slider,.sc-row p-dropdown,.sc-row p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row p-slider .p-slider{width:100%}:host ::ng-deep .sc-row p-dropdown .p-dropdown,:host ::ng-deep .sc-row p-treeSelect .p-treeselect{width:100%}.sc-row .sc-lbl{flex:0 0 calc(50% - .6rem);min-width:0;overflow:hidden;text-overflow:ellipsis}.sc-cmap-option{display:inline-flex;align-items:center;gap:.4rem}.sc-cmap-swatch{width:3.5rem;height:.7rem;border-radius:2px;display:block}.sc-val{flex:0 0 4rem;text-align:right;font-size:.78rem;font-variant-numeric:tabular-nums;white-space:nowrap}:host ::ng-deep .sc-full,:host ::ng-deep .sc-full .p-dropdown,:host ::ng-deep .sc-full .p-autocomplete,:host ::ng-deep .sc-full input{width:100%}.sc-colorbar{height:.75rem;border-radius:2px;border:1px solid rgba(0,0,0,.2)}.sc-colorbar-ends{display:flex;justify-content:space-between;font-size:.7rem;color:var(--text-color-secondary, #6c757d);margin-top:.2rem}.sc-panel{border:1px solid var(--surface-border, #dee2e6);border-radius:6px;margin-bottom:.5rem;overflow:hidden}.sc-panel-head{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--surface-100, #f5f6f7)}.sc-panel-head .sc-panel-title{flex:1;font-weight:600}.sc-panel.open>.sc-panel-head{background:var(--primary-color, #2196f3);color:var(--primary-color-text, #fff)}.sc-panel-body{display:flex;flex-direction:column;gap:.45rem;padding:.6rem .75rem .75rem}.sc-subhead{display:flex;align-items:center;gap:.5rem;margin-top:.4rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-color-secondary, #6c757d)}.sc-subhead:after{content:\"\";flex:1;border-top:1px solid var(--surface-border, #dee2e6)}:host ::ng-deep .sc-buttons .p-button{padding:.35rem .75rem;font-size:.85rem}.sc-row-picker p-dropdown,.sc-row-picker p-multiSelect,.sc-row-picker p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row-picker .sc-variant{width:6.5rem}:host ::ng-deep .sc-row-picker p-multiselect .p-multiselect{width:100%}:host ::ng-deep .sc-row-picker p-dropdown:has(.sc-variant){flex:0 0 6.5rem}:host ::ng-deep .sc-row-picker p-treeselect:has(.sc-palette){flex:0 0 3rem}:host ::ng-deep .sc-palette .p-treeselect-label{width:0;padding:0}.sc-icon-btn{flex:0 0 auto;border:0;background:transparent;cursor:pointer;padding:.25rem .35rem;font:inherit;font-size:1.05rem;color:var(--text-color, #333);border-radius:4px}.sc-icon-btn:hover{background:var(--surface-200, #e9ecef)}.sc-icon-btn.active{color:var(--primary-color, #2196f3);font-weight:700}.sc-icon-btn:disabled{opacity:.5;cursor:default}.sc-small-btn{margin-left:auto;border:1px solid var(--surface-border, #ced4da);background:var(--surface-0, #fff);border-radius:4px;padding:.2rem .6rem;font:inherit;font-size:.8rem;cursor:pointer}:host ::ng-deep .sc-group-heading{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.7}.sc-group-list,.sc-gene-tree{max-height:16rem;overflow-y:auto;border:1px solid var(--surface-border, #dee2e6);border-radius:4px;padding:.25rem .4rem}.sc-group-row,.sc-gene-row{display:flex;align-items:center;gap:.45rem;padding:.15rem 0;font-size:.88rem}.sc-group-row .sc-group-label,.sc-gene-row .sc-group-label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-group-all,.sc-gene-root,.sc-gene-group{font-weight:600}.sc-group-all .sc-icon-btn,.sc-gene-root .sc-icon-btn,.sc-gene-group .sc-icon-btn{margin-left:auto;font-size:.85rem}.sc-count{flex:0 0 auto;font-size:.78rem;color:var(--text-color-secondary, #6c757d)}.sc-glyph-option{display:inline-flex;align-items:center;gap:.4rem}.sc-glyph-svg{width:1rem;height:1rem;fill:currentColor}:host ::ng-deep .sc-glyph-pick .p-dropdown-label{padding:.2rem .4rem}.sc-color-input{width:2.5rem;height:1.8rem;border:1px solid var(--surface-border, #ced4da);border-radius:4px;padding:0;background:none}.sc-row-number p-slider,.sc-row-range p-slider{flex:1 1 0;min-width:0}:host ::ng-deep .sc-num{width:4.5rem;padding:.3rem .4rem;text-align:center}:host ::ng-deep .sc-row-number p-inputnumber,:host ::ng-deep .sc-row-range p-inputnumber{flex:0 0 auto}.sc-gene-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1.4rem;height:1.4rem;padding:0;border:1px solid transparent;border-radius:4px;background:transparent;cursor:pointer}.sc-gene-icon:hover,.sc-gene-icon:focus-visible{border-color:var(--surface-border, rgba(0, 0, 0, .2))}:host{display:contents}\n"] }]
         }], propDecorators: { controls: [{
                 type: Input
             }], dataset: [{
@@ -23200,6 +23381,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
 
 /** Rows of the all-genes list drawn at once; the filter narrows the rest. */
 const ALL_GENES_ROWS = 200;
+/** Names in reading order: case aside, and `G9` before `G10`. */
+const byName = (a, b) => a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' });
 /**
  * The selected transcript genes as Xenium Explorer's tree: the gene groups, then the
  * ungrouped genes, each row with an eye that hides it without deselecting it, its marker
@@ -23208,6 +23391,11 @@ const ALL_GENES_ROWS = 200;
  * expands to every gene of the dataset, each with its eye when the dataset lists its genes
  * in code order (`transcriptTiles.genes`), filtered by name past a few hundred.
  *
+ * Both lists are ordered by name, or by their transcripts in view, most first (the
+ * sort switch, offered once the renderer reports counts). The all-genes list is sorted
+ * before it is cut to its first rows, so by count those are the genes with the most
+ * transcripts in view.
+ *
  * Writes only through `controls.setViewState`.
  */
 class SpatialGeneTreeComponent {
@@ -23227,6 +23415,10 @@ class SpatialGeneTreeComponent {
         /** Swatches in the picker: the categorical palette genes are coloured from by default. */
         /** The tree, rebuilt when the view changes — never per change-detection pass. */
         this.geneTree = [];
+        /** {@link geneTree} with each node's genes in {@link geneSort} order: what the template draws. */
+        this.sortedTree = [];
+        /** The rows' order. By count only while the renderer reports counts (see {@link sortShown}). */
+        this.geneSort = 'name';
         /** Per gene: its eye, swatch, glyph and count — rebuilt with the inputs (and when the
          *  cells' group colours arrive), so the template does no per-row lookups per check. */
         this.rows = new Map();
@@ -23288,8 +23480,30 @@ class SpatialGeneTreeComponent {
             .filter((node) => node.name)
             .map((node) => [node.name, this.areGenesShown(node.genes)]));
         this.rootShown = this.view.transcriptAllGenes ? this.anyOfAllGenesShown() : this.areGenesShown(genes);
+        this.sortedTree = this.geneTree.map((node) => ({ ...node, genes: this.sorted(node.genes) }));
         this.rebuildAllRows();
     }
+    /** Whether the rows are ordered by count: chosen, and counts to order by. */
+    get byCount() {
+        return this.geneSort === 'count' && !!this.geneCounts;
+    }
+    /** The sort switch is offered once there are counts to sort by. */
+    get sortShown() {
+        return !!this.geneCounts;
+    }
+    onGeneSort(sort) {
+        if (sort === this.geneSort)
+            return;
+        this.geneSort = sort;
+        this.rebuildRows();
+    }
+    /** `genes` in the rows' order: by count, most first (ties by name), else by name. */
+    sorted(genes) {
+        if (!this.byCount)
+            return [...genes].sort(byName);
+        const counts = this.geneCounts ?? {};
+        return [...genes].sort((a, b) => (counts[b] ?? 0) - (counts[a] ?? 0) || byName(a, b));
+    }
     /**
      * The all-genes list's rows: the genes matching the filter, up to the cap. Built only while
      * the list is open: the counts in view change with every pan, and the list can be thousands.
@@ -23303,24 +23517,24 @@ class SpatialGeneTreeComponent {
         }
         const needle = this.allGenesFilter.trim().toLowerCase();
         const shown = allGeneShownBy(this.view.transcriptAllGenesHidden);
-        const rows = [];
-        let matched = 0;
+        // Every match, ordered, and only then cut: by count the first rows are the most abundant.
+        const codes = new Map();
         list.forEach((gene, code) => {
             // An empty name is a code no transcript carries (a control probe).
             if (!gene || (needle && !gene.toLowerCase().includes(needle)))
                 return;
-            matched++;
-            if (rows.length >= ALL_GENES_ROWS)
-                return;
-            rows.push({
-                gene,
-                shown: shown(gene),
-                swatch: this.canHideAllGenes ? this.allGeneColorOf(gene, code) : null,
-                count: this.geneCountOf(gene),
-            });
+            if (!codes.has(gene))
+                codes.set(gene, code);
         });
-        this.allRows = rows;
-        this.allGenesMatched = matched;
+        this.allRows = this.sorted([...codes.keys()])
+            .slice(0, ALL_GENES_ROWS)
+            .map((gene) => ({
+            gene,
+            shown: shown(gene),
+            swatch: this.canHideAllGenes ? this.allGeneColorOf(gene, codes.get(gene)) : null,
+            count: this.geneCountOf(gene),
+        }));
+        this.allGenesMatched = codes.size;
     }
     /** Whether "All genes" draws anything: not switched off whole, nor every listed gene hidden. */
     anyOfAllGenesShown() {
@@ -23475,7 +23689,7 @@ class SpatialGeneTreeComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SpatialGeneTreeComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: SpatialGeneTreeComponent, isStandalone: true, selector: "spatial-gene-tree", inputs: { controls: "controls", dataset: "dataset", view: "view", geneCounts: "geneCounts", geneTotal: "geneTotal" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"sc-subhead\">Selected genes</div>\n<div class=\"sc-gene-tree\">\n  <div class=\"sc-gene-row sc-gene-root\">\n    <button\n      type=\"button\"\n      class=\"sc-eye\"\n      (click)=\"\n        view.transcriptAllGenes ? onAllGenesShown(!rootShown) : onGenesShown(view.transcriptGenes, !rootShown)\n      \"\n    >\n      <i class=\"pi\" [class.pi-eye]=\"rootShown\" [class.pi-eye-slash]=\"!rootShown\"></i>\n    </button>\n    <span class=\"sc-group-label\">Genes</span>\n    <span class=\"sc-count\"\n      >({{ (view.transcriptAllGenes ? geneTotal : view.transcriptGenes.length) | number }}/{{\n        geneTotal | number\n      }})</span\n    >\n    <button\n      type=\"button\"\n      class=\"sc-icon-btn\"\n      (click)=\"geneTreeOpen = !geneTreeOpen\"\n      *ngIf=\"!view.transcriptAllGenes && view.transcriptGenes.length\"\n    >\n      <i class=\"pi\" [class.pi-chevron-down]=\"geneTreeOpen\" [class.pi-chevron-right]=\"!geneTreeOpen\"></i>\n    </button>\n    <button\n      type=\"button\"\n      class=\"sc-icon-btn\"\n      (click)=\"toggleAllGenesOpen()\"\n      *ngIf=\"view.transcriptAllGenes && allGeneList?.length\"\n      [attr.aria-label]=\"allGenesOpen ? 'Hide the gene list' : 'Show every gene'\"\n    >\n      <i class=\"pi\" [class.pi-chevron-down]=\"allGenesOpen\" [class.pi-chevron-right]=\"!allGenesOpen\"></i>\n    </button>\n  </div>\n  <!-- \"All genes\": every gene of the dataset, each with its eye when the dataset says which\n       transcripts are whose (its gene list in code order). -->\n  <ng-container *ngIf=\"allGenesOpen && view.transcriptAllGenes && allGeneList?.length\">\n    <input\n      pInputText\n      class=\"sc-gene-filter\"\n      placeholder=\"Filter genes\u2026\"\n      aria-label=\"Filter genes\"\n      [value]=\"allGenesFilter\"\n      (input)=\"onAllGenesFilter($any($event.target).value)\"\n    />\n    <small class=\"sc-hint\" *ngIf=\"!canHideAllGenes\">\n      This dataset does not say which transcripts are whose, so its genes cannot be hidden one by one.\n    </small>\n    <small class=\"sc-hint\" *ngIf=\"canHideAllGenes && view.transcriptMode === 'density'\">\n      The density map draws every gene as one raster: genes are hidden one by one as circles or icons.\n    </small>\n    <div class=\"sc-gene-row sc-gene-leaf nested\" *ngFor=\"let row of allRows; trackBy: trackByAllRow\">\n      <button\n        type=\"button\"\n        class=\"sc-eye\"\n        [disabled]=\"!canHideAllGenes || view.transcriptMode === 'density'\"\n        (click)=\"onAllGeneShown(row.gene, !row.shown)\"\n      >\n        <i class=\"pi\" [class.pi-eye]=\"row.shown\" [class.pi-eye-slash]=\"!row.shown\"></i>\n      </button>\n      <span class=\"sc-gene-icon\" *ngIf=\"row.swatch\" [style.color]=\"row.swatch\" aria-hidden=\"true\">\n        <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\"><circle r=\"0.75\"></circle></svg>\n      </span>\n      <span class=\"sc-group-label\" [title]=\"row.gene\">{{ row.gene }}</span>\n      <span class=\"sc-gene-count\" *ngIf=\"row.count !== null\" title=\"Transcripts in view\">{{\n        row.count | number\n      }}</span>\n    </div>\n    <small class=\"sc-hint\" *ngIf=\"allGenesMatched > allRows.length\">\n      Showing {{ allRows.length | number }} of {{ allGenesMatched | number }} genes: filter to find the others.\n    </small>\n    <small class=\"sc-hint\" *ngIf=\"allGenesMatched === 0\">No gene matches.</small>\n  </ng-container>\n  <ng-container *ngIf=\"geneTreeOpen && !view.transcriptAllGenes\">\n    <ng-container *ngFor=\"let node of geneTree; trackBy: trackByNode\">\n      <div class=\"sc-gene-row sc-gene-group\" *ngIf=\"node.name\">\n        <button type=\"button\" class=\"sc-eye\" (click)=\"onGenesShown(node.genes, !groupShown.get(node.name))\">\n          <i\n            class=\"pi\"\n            [class.pi-eye]=\"groupShown.get(node.name)\"\n            [class.pi-eye-slash]=\"!groupShown.get(node.name)\"\n          ></i>\n        </button>\n        <span class=\"sc-group-label\" [title]=\"node.name\">{{ node.name }}</span>\n        <span class=\"sc-count\">({{ node.genes.length }})</span>\n        <button type=\"button\" class=\"sc-icon-btn\" (click)=\"toggleGeneGroup(node.name)\">\n          <i\n            class=\"pi\"\n            [class.pi-chevron-down]=\"!collapsedGeneGroups.has(node.name)\"\n            [class.pi-chevron-right]=\"collapsedGeneGroups.has(node.name)\"\n          ></i>\n        </button>\n      </div>\n      <ng-container *ngIf=\"!node.name || !collapsedGeneGroups.has(node.name)\">\n        <div\n          class=\"sc-gene-row sc-gene-leaf\"\n          [class.nested]=\"!!node.name\"\n          *ngFor=\"let gene of node.genes; trackBy: trackByLabelString\"\n        >\n          <button type=\"button\" class=\"sc-eye\" (click)=\"onGenesShown([gene], !rows.get(gene)?.shown)\">\n            <i class=\"pi\" [class.pi-eye]=\"rows.get(gene)?.shown\" [class.pi-eye-slash]=\"!rows.get(gene)?.shown\"></i>\n          </button>\n          <!-- The gene's marker, in its colour: its icon in Icons mode, a dot for circles.\n               Clicking it opens the icon and colour picker (as Xenium Explorer does). -->\n          <button\n            type=\"button\"\n            class=\"sc-gene-icon\"\n            [style.color]=\"rows.get(gene)?.swatch\"\n            [attr.aria-label]=\"'Icon and colour for ' + gene\"\n            pTooltip=\"Icon and colour\"\n            tooltipPosition=\"top\"\n            (click)=\"openGeneStyle($event, gene, genePop)\"\n          >\n            <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\">\n              <polygon\n                *ngIf=\"view.transcriptMode === 'glyphs'; else dotIcon\"\n                [attr.points]=\"rows.get(gene)?.points\"\n              ></polygon>\n              <ng-template #dotIcon><circle r=\"0.75\"></circle></ng-template>\n            </svg>\n          </button>\n          <span class=\"sc-group-label\">{{ gene }}</span>\n          <span\n            class=\"sc-gene-count\"\n            *ngIf=\"rows.get(gene)?.count as n; else zeroCount\"\n            title=\"Transcripts in view\"\n            >{{ n | number }}</span\n          >\n          <ng-template #zeroCount>\n            <span class=\"sc-gene-count\" *ngIf=\"geneCounts\" title=\"Transcripts in view\">0</span>\n          </ng-template>\n        </div>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n  <!-- One picker for every gene row, filled for the gene that opened it. -->\n  <p-overlayPanel #genePop styleClass=\"sc-gene-style\" appendTo=\"body\">\n    <ng-template pTemplate=\"content\">\n      <spatial-gene-style\n        *ngIf=\"styleGene as gene\"\n        [gene]=\"gene\"\n        what=\"Transcript\"\n        [color]=\"geneColorOf(gene)\"\n        [glyph]=\"styleGlyph ?? 'circle'\"\n        [iconHint]=\"\n          view.transcriptMode !== 'glyphs' ? 'Icons show when the transcript point style is Icons.' : null\n        \"\n        (colorChange)=\"onGeneColor(gene, $event)\"\n        (glyphChange)=\"onGlyph(gene, $event)\"\n        (resetStyle)=\"resetGeneStyle(gene)\"\n      ></spatial-gene-style>\n    </ng-template>\n  </p-overlayPanel>\n  <div class=\"sc-gene-footer\">\n    {{ (view.transcriptAllGenes ? geneTotal : view.transcriptGenes.length) | number }}/{{ geneTotal | number }}\n    genes selected\n  </div>\n</div>\n", styles: [".sc-hint{font-size:.75rem;color:var(--text-color-secondary, #6c757d)}.sc-error{color:var(--red-600, #c62828)}.sc-section{display:flex;flex-direction:column;gap:.35rem}.sc-lbl{font-size:.78rem;color:var(--text-color-secondary, #6c757d);white-space:nowrap}.sc-row{display:flex;align-items:center;gap:.6rem}.sc-row p-slider,.sc-row p-dropdown,.sc-row p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row p-slider .p-slider{width:100%}:host ::ng-deep .sc-row p-dropdown .p-dropdown,:host ::ng-deep .sc-row p-treeSelect .p-treeselect{width:100%}.sc-row .sc-lbl{flex:0 0 calc(50% - .6rem);min-width:0;overflow:hidden;text-overflow:ellipsis}.sc-cmap-option{display:inline-flex;align-items:center;gap:.4rem}.sc-cmap-swatch{width:3.5rem;height:.7rem;border-radius:2px;display:block}.sc-val{flex:0 0 4rem;text-align:right;font-size:.78rem;font-variant-numeric:tabular-nums;white-space:nowrap}:host ::ng-deep .sc-full,:host ::ng-deep .sc-full .p-dropdown,:host ::ng-deep .sc-full .p-autocomplete,:host ::ng-deep .sc-full input{width:100%}.sc-colorbar{height:.75rem;border-radius:2px;border:1px solid rgba(0,0,0,.2)}.sc-colorbar-ends{display:flex;justify-content:space-between;font-size:.7rem;color:var(--text-color-secondary, #6c757d);margin-top:.2rem}.sc-panel{border:1px solid var(--surface-border, #dee2e6);border-radius:6px;margin-bottom:.5rem;overflow:hidden}.sc-panel-head{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--surface-100, #f5f6f7)}.sc-panel-head .sc-panel-title{flex:1;font-weight:600}.sc-panel.open>.sc-panel-head{background:var(--primary-color, #2196f3);color:var(--primary-color-text, #fff)}.sc-panel-body{display:flex;flex-direction:column;gap:.45rem;padding:.6rem .75rem .75rem}.sc-subhead{display:flex;align-items:center;gap:.5rem;margin-top:.4rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-color-secondary, #6c757d)}.sc-subhead:after{content:\"\";flex:1;border-top:1px solid var(--surface-border, #dee2e6)}:host ::ng-deep .sc-buttons .p-button{padding:.35rem .75rem;font-size:.85rem}.sc-row-picker p-dropdown,.sc-row-picker p-multiSelect,.sc-row-picker p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row-picker .sc-variant{width:6.5rem}:host ::ng-deep .sc-row-picker p-multiselect .p-multiselect{width:100%}:host ::ng-deep .sc-row-picker p-dropdown:has(.sc-variant){flex:0 0 6.5rem}:host ::ng-deep .sc-row-picker p-treeselect:has(.sc-palette){flex:0 0 3rem}:host ::ng-deep .sc-palette .p-treeselect-label{width:0;padding:0}.sc-icon-btn{flex:0 0 auto;border:0;background:transparent;cursor:pointer;padding:.25rem .35rem;font:inherit;font-size:1.05rem;color:var(--text-color, #333);border-radius:4px}.sc-icon-btn:hover{background:var(--surface-200, #e9ecef)}.sc-icon-btn.active{color:var(--primary-color, #2196f3);font-weight:700}.sc-icon-btn:disabled{opacity:.5;cursor:default}.sc-small-btn{margin-left:auto;border:1px solid var(--surface-border, #ced4da);background:var(--surface-0, #fff);border-radius:4px;padding:.2rem .6rem;font:inherit;font-size:.8rem;cursor:pointer}:host ::ng-deep .sc-group-heading{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.7}.sc-group-list,.sc-gene-tree{max-height:16rem;overflow-y:auto;border:1px solid var(--surface-border, #dee2e6);border-radius:4px;padding:.25rem .4rem}.sc-group-row,.sc-gene-row{display:flex;align-items:center;gap:.45rem;padding:.15rem 0;font-size:.88rem}.sc-group-row .sc-group-label,.sc-gene-row .sc-group-label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-group-all,.sc-gene-root,.sc-gene-group{font-weight:600}.sc-group-all .sc-icon-btn,.sc-gene-root .sc-icon-btn,.sc-gene-group .sc-icon-btn{margin-left:auto;font-size:.85rem}.sc-count{flex:0 0 auto;font-size:.78rem;color:var(--text-color-secondary, #6c757d)}.sc-glyph-option{display:inline-flex;align-items:center;gap:.4rem}.sc-glyph-svg{width:1rem;height:1rem;fill:currentColor}:host ::ng-deep .sc-glyph-pick .p-dropdown-label{padding:.2rem .4rem}.sc-color-input{width:2.5rem;height:1.8rem;border:1px solid var(--surface-border, #ced4da);border-radius:4px;padding:0;background:none}.sc-row-number p-slider,.sc-row-range p-slider{flex:1 1 0;min-width:0}:host ::ng-deep .sc-num{width:4.5rem;padding:.3rem .4rem;text-align:center}:host ::ng-deep .sc-row-number p-inputnumber,:host ::ng-deep .sc-row-range p-inputnumber{flex:0 0 auto}.sc-gene-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1.4rem;height:1.4rem;padding:0;border:1px solid transparent;border-radius:4px;background:transparent;cursor:pointer}.sc-gene-icon:hover,.sc-gene-icon:focus-visible{border-color:var(--surface-border, rgba(0, 0, 0, .2))}:host{display:contents}.sc-gene-group,.sc-gene-leaf{padding-left:1rem}.sc-gene-leaf.nested{padding-left:2rem}.sc-eye{flex:0 0 auto;border:0;background:transparent;cursor:pointer;padding:0;color:var(--text-color-secondary, #6c757d)}.sc-eye .pi-eye{color:var(--text-color, #333)}.sc-eye:disabled{cursor:default;opacity:.5}.sc-gene-filter{width:calc(100% - 1rem);margin:.2rem 0 .2rem 1rem;font-size:.8rem;padding:.2rem .4rem}.sc-gene-footer{text-align:right;font-size:.78rem;padding:.2rem 0;color:var(--text-color-secondary, #6c757d)}.sc-gene-count{margin-left:auto;font-variant-numeric:tabular-nums;opacity:.8;padding-left:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i6.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i10.OverlayPanel, selector: "p-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$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: SpatialGeneStyleComponent, selector: "spatial-gene-style", inputs: ["gene", "what", "color", "glyph", "iconHint"], outputs: ["colorChange", "glyphChange", "resetStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: SpatialGeneTreeComponent, isStandalone: true, selector: "spatial-gene-tree", inputs: { controls: "controls", dataset: "dataset", view: "view", geneCounts: "geneCounts", geneTotal: "geneTotal" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"sc-subhead\">Selected genes</div>\n<div class=\"sc-gene-sort\" *ngIf=\"sortShown\" role=\"group\" aria-label=\"Sort genes\">\n  <span class=\"sc-lbl\">Sort by</span>\n  <button\n    type=\"button\"\n    class=\"sc-sort-btn\"\n    [class.active]=\"!byCount\"\n    [attr.aria-pressed]=\"!byCount\"\n    (click)=\"onGeneSort('name')\"\n  >\n    Name\n  </button>\n  <button\n    type=\"button\"\n    class=\"sc-sort-btn\"\n    [class.active]=\"byCount\"\n    [attr.aria-pressed]=\"byCount\"\n    title=\"Transcripts in view, most first\"\n    (click)=\"onGeneSort('count')\"\n  >\n    Count\n  </button>\n</div>\n<div class=\"sc-gene-tree\">\n  <div class=\"sc-gene-row sc-gene-root\">\n    <button\n      type=\"button\"\n      class=\"sc-eye\"\n      (click)=\"\n        view.transcriptAllGenes ? onAllGenesShown(!rootShown) : onGenesShown(view.transcriptGenes, !rootShown)\n      \"\n    >\n      <i class=\"pi\" [class.pi-eye]=\"rootShown\" [class.pi-eye-slash]=\"!rootShown\"></i>\n    </button>\n    <span class=\"sc-group-label\">Genes</span>\n    <span class=\"sc-count\"\n      >({{ (view.transcriptAllGenes ? geneTotal : view.transcriptGenes.length) | number }}/{{\n        geneTotal | number\n      }})</span\n    >\n    <button\n      type=\"button\"\n      class=\"sc-icon-btn\"\n      (click)=\"geneTreeOpen = !geneTreeOpen\"\n      *ngIf=\"!view.transcriptAllGenes && view.transcriptGenes.length\"\n    >\n      <i class=\"pi\" [class.pi-chevron-down]=\"geneTreeOpen\" [class.pi-chevron-right]=\"!geneTreeOpen\"></i>\n    </button>\n    <button\n      type=\"button\"\n      class=\"sc-icon-btn\"\n      (click)=\"toggleAllGenesOpen()\"\n      *ngIf=\"view.transcriptAllGenes && allGeneList?.length\"\n      [attr.aria-label]=\"allGenesOpen ? 'Hide the gene list' : 'Show every gene'\"\n    >\n      <i class=\"pi\" [class.pi-chevron-down]=\"allGenesOpen\" [class.pi-chevron-right]=\"!allGenesOpen\"></i>\n    </button>\n  </div>\n  <!-- \"All genes\": every gene of the dataset, each with its eye when the dataset says which\n       transcripts are whose (its gene list in code order). -->\n  <ng-container *ngIf=\"allGenesOpen && view.transcriptAllGenes && allGeneList?.length\">\n    <input\n      pInputText\n      class=\"sc-gene-filter\"\n      placeholder=\"Filter genes\u2026\"\n      aria-label=\"Filter genes\"\n      [value]=\"allGenesFilter\"\n      (input)=\"onAllGenesFilter($any($event.target).value)\"\n    />\n    <small class=\"sc-hint\" *ngIf=\"!canHideAllGenes\">\n      This dataset does not say which transcripts are whose, so its genes cannot be hidden one by one.\n    </small>\n    <small class=\"sc-hint\" *ngIf=\"canHideAllGenes && view.transcriptMode === 'density'\">\n      The density map draws every gene as one raster: genes are hidden one by one as circles or icons.\n    </small>\n    <div class=\"sc-gene-row sc-gene-leaf nested\" *ngFor=\"let row of allRows; trackBy: trackByAllRow\">\n      <button\n        type=\"button\"\n        class=\"sc-eye\"\n        [disabled]=\"!canHideAllGenes || view.transcriptMode === 'density'\"\n        (click)=\"onAllGeneShown(row.gene, !row.shown)\"\n      >\n        <i class=\"pi\" [class.pi-eye]=\"row.shown\" [class.pi-eye-slash]=\"!row.shown\"></i>\n      </button>\n      <span class=\"sc-gene-icon\" *ngIf=\"row.swatch\" [style.color]=\"row.swatch\" aria-hidden=\"true\">\n        <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\"><circle r=\"0.75\"></circle></svg>\n      </span>\n      <span class=\"sc-group-label\" [title]=\"row.gene\">{{ row.gene }}</span>\n      <span class=\"sc-gene-count\" *ngIf=\"row.count !== null\" title=\"Transcripts in view\">{{\n        row.count | number\n      }}</span>\n    </div>\n    <small class=\"sc-hint\" *ngIf=\"allGenesMatched > allRows.length\">\n      Showing {{ allRows.length | number }} of {{ allGenesMatched | number }} genes: filter to find the others.\n    </small>\n    <small class=\"sc-hint\" *ngIf=\"allGenesMatched === 0\">No gene matches.</small>\n  </ng-container>\n  <ng-container *ngIf=\"geneTreeOpen && !view.transcriptAllGenes\">\n    <ng-container *ngFor=\"let node of sortedTree; trackBy: trackByNode\">\n      <div class=\"sc-gene-row sc-gene-group\" *ngIf=\"node.name\">\n        <button type=\"button\" class=\"sc-eye\" (click)=\"onGenesShown(node.genes, !groupShown.get(node.name))\">\n          <i\n            class=\"pi\"\n            [class.pi-eye]=\"groupShown.get(node.name)\"\n            [class.pi-eye-slash]=\"!groupShown.get(node.name)\"\n          ></i>\n        </button>\n        <span class=\"sc-group-label\" [title]=\"node.name\">{{ node.name }}</span>\n        <span class=\"sc-count\">({{ node.genes.length }})</span>\n        <button type=\"button\" class=\"sc-icon-btn\" (click)=\"toggleGeneGroup(node.name)\">\n          <i\n            class=\"pi\"\n            [class.pi-chevron-down]=\"!collapsedGeneGroups.has(node.name)\"\n            [class.pi-chevron-right]=\"collapsedGeneGroups.has(node.name)\"\n          ></i>\n        </button>\n      </div>\n      <ng-container *ngIf=\"!node.name || !collapsedGeneGroups.has(node.name)\">\n        <div\n          class=\"sc-gene-row sc-gene-leaf\"\n          [class.nested]=\"!!node.name\"\n          *ngFor=\"let gene of node.genes; trackBy: trackByLabelString\"\n        >\n          <button type=\"button\" class=\"sc-eye\" (click)=\"onGenesShown([gene], !rows.get(gene)?.shown)\">\n            <i class=\"pi\" [class.pi-eye]=\"rows.get(gene)?.shown\" [class.pi-eye-slash]=\"!rows.get(gene)?.shown\"></i>\n          </button>\n          <!-- The gene's marker, in its colour: its icon in Icons mode, a dot for circles.\n               Clicking it opens the icon and colour picker (as Xenium Explorer does). -->\n          <button\n            type=\"button\"\n            class=\"sc-gene-icon\"\n            [style.color]=\"rows.get(gene)?.swatch\"\n            [attr.aria-label]=\"'Icon and colour for ' + gene\"\n            pTooltip=\"Icon and colour\"\n            tooltipPosition=\"top\"\n            (click)=\"openGeneStyle($event, gene, genePop)\"\n          >\n            <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\">\n              <polygon\n                *ngIf=\"view.transcriptMode === 'glyphs'; else dotIcon\"\n                [attr.points]=\"rows.get(gene)?.points\"\n              ></polygon>\n              <ng-template #dotIcon><circle r=\"0.75\"></circle></ng-template>\n            </svg>\n          </button>\n          <span class=\"sc-group-label\">{{ gene }}</span>\n          <span\n            class=\"sc-gene-count\"\n            *ngIf=\"rows.get(gene)?.count as n; else zeroCount\"\n            title=\"Transcripts in view\"\n            >{{ n | number }}</span\n          >\n          <ng-template #zeroCount>\n            <span class=\"sc-gene-count\" *ngIf=\"geneCounts\" title=\"Transcripts in view\">0</span>\n          </ng-template>\n        </div>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n  <!-- One picker for every gene row, filled for the gene that opened it. -->\n  <p-overlayPanel #genePop styleClass=\"sc-gene-style\" appendTo=\"body\">\n    <ng-template pTemplate=\"content\">\n      <spatial-gene-style\n        *ngIf=\"styleGene as gene\"\n        [gene]=\"gene\"\n        what=\"Transcript\"\n        [color]=\"geneColorOf(gene)\"\n        [glyph]=\"styleGlyph ?? 'circle'\"\n        [iconHint]=\"\n          view.transcriptMode !== 'glyphs' ? 'Icons show when the transcript point style is Icons.' : null\n        \"\n        (colorChange)=\"onGeneColor(gene, $event)\"\n        (glyphChange)=\"onGlyph(gene, $event)\"\n        (resetStyle)=\"resetGeneStyle(gene)\"\n      ></spatial-gene-style>\n    </ng-template>\n  </p-overlayPanel>\n  <div class=\"sc-gene-footer\">\n    {{ (view.transcriptAllGenes ? geneTotal : view.transcriptGenes.length) | number }}/{{ geneTotal | number }}\n    genes selected\n  </div>\n</div>\n", styles: [".sc-hint{font-size:.75rem;color:var(--text-color-secondary, #6c757d)}.sc-error{color:var(--red-600, #c62828)}.sc-section{display:flex;flex-direction:column;gap:.35rem}.sc-lbl{font-size:.78rem;color:var(--text-color-secondary, #6c757d);white-space:nowrap}.sc-row{display:flex;align-items:center;gap:.6rem}.sc-row p-slider,.sc-row p-dropdown,.sc-row p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row p-slider .p-slider{width:100%}:host ::ng-deep .sc-row p-dropdown .p-dropdown,:host ::ng-deep .sc-row p-treeSelect .p-treeselect{width:100%}.sc-row .sc-lbl{flex:0 0 calc(50% - .6rem);min-width:0;overflow:hidden;text-overflow:ellipsis}.sc-cmap-option{display:inline-flex;align-items:center;gap:.4rem}.sc-cmap-swatch{width:3.5rem;height:.7rem;border-radius:2px;display:block}.sc-val{flex:0 0 4rem;text-align:right;font-size:.78rem;font-variant-numeric:tabular-nums;white-space:nowrap}:host ::ng-deep .sc-full,:host ::ng-deep .sc-full .p-dropdown,:host ::ng-deep .sc-full .p-autocomplete,:host ::ng-deep .sc-full input{width:100%}.sc-colorbar{height:.75rem;border-radius:2px;border:1px solid rgba(0,0,0,.2)}.sc-colorbar-ends{display:flex;justify-content:space-between;font-size:.7rem;color:var(--text-color-secondary, #6c757d);margin-top:.2rem}.sc-panel{border:1px solid var(--surface-border, #dee2e6);border-radius:6px;margin-bottom:.5rem;overflow:hidden}.sc-panel-head{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--surface-100, #f5f6f7)}.sc-panel-head .sc-panel-title{flex:1;font-weight:600}.sc-panel.open>.sc-panel-head{background:var(--primary-color, #2196f3);color:var(--primary-color-text, #fff)}.sc-panel-body{display:flex;flex-direction:column;gap:.45rem;padding:.6rem .75rem .75rem}.sc-subhead{display:flex;align-items:center;gap:.5rem;margin-top:.4rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-color-secondary, #6c757d)}.sc-subhead:after{content:\"\";flex:1;border-top:1px solid var(--surface-border, #dee2e6)}:host ::ng-deep .sc-buttons .p-button{padding:.35rem .75rem;font-size:.85rem}.sc-row-picker p-dropdown,.sc-row-picker p-multiSelect,.sc-row-picker p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row-picker .sc-variant{width:6.5rem}:host ::ng-deep .sc-row-picker p-multiselect .p-multiselect{width:100%}:host ::ng-deep .sc-row-picker p-dropdown:has(.sc-variant){flex:0 0 6.5rem}:host ::ng-deep .sc-row-picker p-treeselect:has(.sc-palette){flex:0 0 3rem}:host ::ng-deep .sc-palette .p-treeselect-label{width:0;padding:0}.sc-icon-btn{flex:0 0 auto;border:0;background:transparent;cursor:pointer;padding:.25rem .35rem;font:inherit;font-size:1.05rem;color:var(--text-color, #333);border-radius:4px}.sc-icon-btn:hover{background:var(--surface-200, #e9ecef)}.sc-icon-btn.active{color:var(--primary-color, #2196f3);font-weight:700}.sc-icon-btn:disabled{opacity:.5;cursor:default}.sc-small-btn{margin-left:auto;border:1px solid var(--surface-border, #ced4da);background:var(--surface-0, #fff);border-radius:4px;padding:.2rem .6rem;font:inherit;font-size:.8rem;cursor:pointer}:host ::ng-deep .sc-group-heading{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.7}.sc-group-list,.sc-gene-tree{max-height:16rem;overflow-y:auto;border:1px solid var(--surface-border, #dee2e6);border-radius:4px;padding:.25rem .4rem}.sc-group-row,.sc-gene-row{display:flex;align-items:center;gap:.45rem;padding:.15rem 0;font-size:.88rem}.sc-group-row .sc-group-label,.sc-gene-row .sc-group-label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-group-all,.sc-gene-root,.sc-gene-group{font-weight:600}.sc-group-all .sc-icon-btn,.sc-gene-root .sc-icon-btn,.sc-gene-group .sc-icon-btn{margin-left:auto;font-size:.85rem}.sc-count{flex:0 0 auto;font-size:.78rem;color:var(--text-color-secondary, #6c757d)}.sc-glyph-option{display:inline-flex;align-items:center;gap:.4rem}.sc-glyph-svg{width:1rem;height:1rem;fill:currentColor}:host ::ng-deep .sc-glyph-pick .p-dropdown-label{padding:.2rem .4rem}.sc-color-input{width:2.5rem;height:1.8rem;border:1px solid var(--surface-border, #ced4da);border-radius:4px;padding:0;background:none}.sc-row-number p-slider,.sc-row-range p-slider{flex:1 1 0;min-width:0}:host ::ng-deep .sc-num{width:4.5rem;padding:.3rem .4rem;text-align:center}:host ::ng-deep .sc-row-number p-inputnumber,:host ::ng-deep .sc-row-range p-inputnumber{flex:0 0 auto}.sc-gene-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1.4rem;height:1.4rem;padding:0;border:1px solid transparent;border-radius:4px;background:transparent;cursor:pointer}.sc-gene-icon:hover,.sc-gene-icon:focus-visible{border-color:var(--surface-border, rgba(0, 0, 0, .2))}:host{display:contents}.sc-gene-group,.sc-gene-leaf{padding-left:1rem}.sc-gene-leaf.nested{padding-left:2rem}.sc-eye{flex:0 0 auto;border:0;background:transparent;cursor:pointer;padding:0;color:var(--text-color-secondary, #6c757d)}.sc-eye .pi-eye{color:var(--text-color, #333)}.sc-eye:disabled{cursor:default;opacity:.5}.sc-gene-sort{display:flex;align-items:center;gap:.25rem;font-size:.8rem}.sc-gene-sort .sc-lbl{margin-right:auto}.sc-sort-btn{border:1px solid var(--surface-border, #ced4da);background:var(--surface-0, #fff);color:var(--text-color, #333);border-radius:4px;padding:.1rem .5rem;font:inherit;cursor:pointer}.sc-sort-btn.active{border-color:var(--primary-color, #2196f3);color:var(--primary-color, #2196f3);font-weight:600}.sc-gene-filter{width:calc(100% - 1rem);margin:.2rem 0 .2rem 1rem;font-size:.8rem;padding:.2rem .4rem}.sc-gene-footer{text-align:right;font-size:.78rem;padding:.2rem 0;color:var(--text-color-secondary, #6c757d)}.sc-gene-count{margin-left:auto;font-variant-numeric:tabular-nums;opacity:.8;padding-left:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i6.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i10.OverlayPanel, selector: "p-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$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: SpatialGeneStyleComponent, selector: "spatial-gene-style", inputs: ["gene", "what", "color", "glyph", "iconHint"], outputs: ["colorChange", "glyphChange", "resetStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SpatialGeneTreeComponent, decorators: [{
             type: Component,
@@ -23486,7 +23700,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
                         OverlayPanelModule,
                         TooltipModule,
                         SpatialGeneStyleComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sc-subhead\">Selected genes</div>\n<div class=\"sc-gene-tree\">\n  <div class=\"sc-gene-row sc-gene-root\">\n    <button\n      type=\"button\"\n      class=\"sc-eye\"\n      (click)=\"\n        view.transcriptAllGenes ? onAllGenesShown(!rootShown) : onGenesShown(view.transcriptGenes, !rootShown)\n      \"\n    >\n      <i class=\"pi\" [class.pi-eye]=\"rootShown\" [class.pi-eye-slash]=\"!rootShown\"></i>\n    </button>\n    <span class=\"sc-group-label\">Genes</span>\n    <span class=\"sc-count\"\n      >({{ (view.transcriptAllGenes ? geneTotal : view.transcriptGenes.length) | number }}/{{\n        geneTotal | number\n      }})</span\n    >\n    <button\n      type=\"button\"\n      class=\"sc-icon-btn\"\n      (click)=\"geneTreeOpen = !geneTreeOpen\"\n      *ngIf=\"!view.transcriptAllGenes && view.transcriptGenes.length\"\n    >\n      <i class=\"pi\" [class.pi-chevron-down]=\"geneTreeOpen\" [class.pi-chevron-right]=\"!geneTreeOpen\"></i>\n    </button>\n    <button\n      type=\"button\"\n      class=\"sc-icon-btn\"\n      (click)=\"toggleAllGenesOpen()\"\n      *ngIf=\"view.transcriptAllGenes && allGeneList?.length\"\n      [attr.aria-label]=\"allGenesOpen ? 'Hide the gene list' : 'Show every gene'\"\n    >\n      <i class=\"pi\" [class.pi-chevron-down]=\"allGenesOpen\" [class.pi-chevron-right]=\"!allGenesOpen\"></i>\n    </button>\n  </div>\n  <!-- \"All genes\": every gene of the dataset, each with its eye when the dataset says which\n       transcripts are whose (its gene list in code order). -->\n  <ng-container *ngIf=\"allGenesOpen && view.transcriptAllGenes && allGeneList?.length\">\n    <input\n      pInputText\n      class=\"sc-gene-filter\"\n      placeholder=\"Filter genes\u2026\"\n      aria-label=\"Filter genes\"\n      [value]=\"allGenesFilter\"\n      (input)=\"onAllGenesFilter($any($event.target).value)\"\n    />\n    <small class=\"sc-hint\" *ngIf=\"!canHideAllGenes\">\n      This dataset does not say which transcripts are whose, so its genes cannot be hidden one by one.\n    </small>\n    <small class=\"sc-hint\" *ngIf=\"canHideAllGenes && view.transcriptMode === 'density'\">\n      The density map draws every gene as one raster: genes are hidden one by one as circles or icons.\n    </small>\n    <div class=\"sc-gene-row sc-gene-leaf nested\" *ngFor=\"let row of allRows; trackBy: trackByAllRow\">\n      <button\n        type=\"button\"\n        class=\"sc-eye\"\n        [disabled]=\"!canHideAllGenes || view.transcriptMode === 'density'\"\n        (click)=\"onAllGeneShown(row.gene, !row.shown)\"\n      >\n        <i class=\"pi\" [class.pi-eye]=\"row.shown\" [class.pi-eye-slash]=\"!row.shown\"></i>\n      </button>\n      <span class=\"sc-gene-icon\" *ngIf=\"row.swatch\" [style.color]=\"row.swatch\" aria-hidden=\"true\">\n        <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\"><circle r=\"0.75\"></circle></svg>\n      </span>\n      <span class=\"sc-group-label\" [title]=\"row.gene\">{{ row.gene }}</span>\n      <span class=\"sc-gene-count\" *ngIf=\"row.count !== null\" title=\"Transcripts in view\">{{\n        row.count | number\n      }}</span>\n    </div>\n    <small class=\"sc-hint\" *ngIf=\"allGenesMatched > allRows.length\">\n      Showing {{ allRows.length | number }} of {{ allGenesMatched | number }} genes: filter to find the others.\n    </small>\n    <small class=\"sc-hint\" *ngIf=\"allGenesMatched === 0\">No gene matches.</small>\n  </ng-container>\n  <ng-container *ngIf=\"geneTreeOpen && !view.transcriptAllGenes\">\n    <ng-container *ngFor=\"let node of geneTree; trackBy: trackByNode\">\n      <div class=\"sc-gene-row sc-gene-group\" *ngIf=\"node.name\">\n        <button type=\"button\" class=\"sc-eye\" (click)=\"onGenesShown(node.genes, !groupShown.get(node.name))\">\n          <i\n            class=\"pi\"\n            [class.pi-eye]=\"groupShown.get(node.name)\"\n            [class.pi-eye-slash]=\"!groupShown.get(node.name)\"\n          ></i>\n        </button>\n        <span class=\"sc-group-label\" [title]=\"node.name\">{{ node.name }}</span>\n        <span class=\"sc-count\">({{ node.genes.length }})</span>\n        <button type=\"button\" class=\"sc-icon-btn\" (click)=\"toggleGeneGroup(node.name)\">\n          <i\n            class=\"pi\"\n            [class.pi-chevron-down]=\"!collapsedGeneGroups.has(node.name)\"\n            [class.pi-chevron-right]=\"collapsedGeneGroups.has(node.name)\"\n          ></i>\n        </button>\n      </div>\n      <ng-container *ngIf=\"!node.name || !collapsedGeneGroups.has(node.name)\">\n        <div\n          class=\"sc-gene-row sc-gene-leaf\"\n          [class.nested]=\"!!node.name\"\n          *ngFor=\"let gene of node.genes; trackBy: trackByLabelString\"\n        >\n          <button type=\"button\" class=\"sc-eye\" (click)=\"onGenesShown([gene], !rows.get(gene)?.shown)\">\n            <i class=\"pi\" [class.pi-eye]=\"rows.get(gene)?.shown\" [class.pi-eye-slash]=\"!rows.get(gene)?.shown\"></i>\n          </button>\n          <!-- The gene's marker, in its colour: its icon in Icons mode, a dot for circles.\n               Clicking it opens the icon and colour picker (as Xenium Explorer does). -->\n          <button\n            type=\"button\"\n            class=\"sc-gene-icon\"\n            [style.color]=\"rows.get(gene)?.swatch\"\n            [attr.aria-label]=\"'Icon and colour for ' + gene\"\n            pTooltip=\"Icon and colour\"\n            tooltipPosition=\"top\"\n            (click)=\"openGeneStyle($event, gene, genePop)\"\n          >\n            <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\">\n              <polygon\n                *ngIf=\"view.transcriptMode === 'glyphs'; else dotIcon\"\n                [attr.points]=\"rows.get(gene)?.points\"\n              ></polygon>\n              <ng-template #dotIcon><circle r=\"0.75\"></circle></ng-template>\n            </svg>\n          </button>\n          <span class=\"sc-group-label\">{{ gene }}</span>\n          <span\n            class=\"sc-gene-count\"\n            *ngIf=\"rows.get(gene)?.count as n; else zeroCount\"\n            title=\"Transcripts in view\"\n            >{{ n | number }}</span\n          >\n          <ng-template #zeroCount>\n            <span class=\"sc-gene-count\" *ngIf=\"geneCounts\" title=\"Transcripts in view\">0</span>\n          </ng-template>\n        </div>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n  <!-- One picker for every gene row, filled for the gene that opened it. -->\n  <p-overlayPanel #genePop styleClass=\"sc-gene-style\" appendTo=\"body\">\n    <ng-template pTemplate=\"content\">\n      <spatial-gene-style\n        *ngIf=\"styleGene as gene\"\n        [gene]=\"gene\"\n        what=\"Transcript\"\n        [color]=\"geneColorOf(gene)\"\n        [glyph]=\"styleGlyph ?? 'circle'\"\n        [iconHint]=\"\n          view.transcriptMode !== 'glyphs' ? 'Icons show when the transcript point style is Icons.' : null\n        \"\n        (colorChange)=\"onGeneColor(gene, $event)\"\n        (glyphChange)=\"onGlyph(gene, $event)\"\n        (resetStyle)=\"resetGeneStyle(gene)\"\n      ></spatial-gene-style>\n    </ng-template>\n  </p-overlayPanel>\n  <div class=\"sc-gene-footer\">\n    {{ (view.transcriptAllGenes ? geneTotal : view.transcriptGenes.length) | number }}/{{ geneTotal | number }}\n    genes selected\n  </div>\n</div>\n", styles: [".sc-hint{font-size:.75rem;color:var(--text-color-secondary, #6c757d)}.sc-error{color:var(--red-600, #c62828)}.sc-section{display:flex;flex-direction:column;gap:.35rem}.sc-lbl{font-size:.78rem;color:var(--text-color-secondary, #6c757d);white-space:nowrap}.sc-row{display:flex;align-items:center;gap:.6rem}.sc-row p-slider,.sc-row p-dropdown,.sc-row p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row p-slider .p-slider{width:100%}:host ::ng-deep .sc-row p-dropdown .p-dropdown,:host ::ng-deep .sc-row p-treeSelect .p-treeselect{width:100%}.sc-row .sc-lbl{flex:0 0 calc(50% - .6rem);min-width:0;overflow:hidden;text-overflow:ellipsis}.sc-cmap-option{display:inline-flex;align-items:center;gap:.4rem}.sc-cmap-swatch{width:3.5rem;height:.7rem;border-radius:2px;display:block}.sc-val{flex:0 0 4rem;text-align:right;font-size:.78rem;font-variant-numeric:tabular-nums;white-space:nowrap}:host ::ng-deep .sc-full,:host ::ng-deep .sc-full .p-dropdown,:host ::ng-deep .sc-full .p-autocomplete,:host ::ng-deep .sc-full input{width:100%}.sc-colorbar{height:.75rem;border-radius:2px;border:1px solid rgba(0,0,0,.2)}.sc-colorbar-ends{display:flex;justify-content:space-between;font-size:.7rem;color:var(--text-color-secondary, #6c757d);margin-top:.2rem}.sc-panel{border:1px solid var(--surface-border, #dee2e6);border-radius:6px;margin-bottom:.5rem;overflow:hidden}.sc-panel-head{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--surface-100, #f5f6f7)}.sc-panel-head .sc-panel-title{flex:1;font-weight:600}.sc-panel.open>.sc-panel-head{background:var(--primary-color, #2196f3);color:var(--primary-color-text, #fff)}.sc-panel-body{display:flex;flex-direction:column;gap:.45rem;padding:.6rem .75rem .75rem}.sc-subhead{display:flex;align-items:center;gap:.5rem;margin-top:.4rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-color-secondary, #6c757d)}.sc-subhead:after{content:\"\";flex:1;border-top:1px solid var(--surface-border, #dee2e6)}:host ::ng-deep .sc-buttons .p-button{padding:.35rem .75rem;font-size:.85rem}.sc-row-picker p-dropdown,.sc-row-picker p-multiSelect,.sc-row-picker p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row-picker .sc-variant{width:6.5rem}:host ::ng-deep .sc-row-picker p-multiselect .p-multiselect{width:100%}:host ::ng-deep .sc-row-picker p-dropdown:has(.sc-variant){flex:0 0 6.5rem}:host ::ng-deep .sc-row-picker p-treeselect:has(.sc-palette){flex:0 0 3rem}:host ::ng-deep .sc-palette .p-treeselect-label{width:0;padding:0}.sc-icon-btn{flex:0 0 auto;border:0;background:transparent;cursor:pointer;padding:.25rem .35rem;font:inherit;font-size:1.05rem;color:var(--text-color, #333);border-radius:4px}.sc-icon-btn:hover{background:var(--surface-200, #e9ecef)}.sc-icon-btn.active{color:var(--primary-color, #2196f3);font-weight:700}.sc-icon-btn:disabled{opacity:.5;cursor:default}.sc-small-btn{margin-left:auto;border:1px solid var(--surface-border, #ced4da);background:var(--surface-0, #fff);border-radius:4px;padding:.2rem .6rem;font:inherit;font-size:.8rem;cursor:pointer}:host ::ng-deep .sc-group-heading{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.7}.sc-group-list,.sc-gene-tree{max-height:16rem;overflow-y:auto;border:1px solid var(--surface-border, #dee2e6);border-radius:4px;padding:.25rem .4rem}.sc-group-row,.sc-gene-row{display:flex;align-items:center;gap:.45rem;padding:.15rem 0;font-size:.88rem}.sc-group-row .sc-group-label,.sc-gene-row .sc-group-label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-group-all,.sc-gene-root,.sc-gene-group{font-weight:600}.sc-group-all .sc-icon-btn,.sc-gene-root .sc-icon-btn,.sc-gene-group .sc-icon-btn{margin-left:auto;font-size:.85rem}.sc-count{flex:0 0 auto;font-size:.78rem;color:var(--text-color-secondary, #6c757d)}.sc-glyph-option{display:inline-flex;align-items:center;gap:.4rem}.sc-glyph-svg{width:1rem;height:1rem;fill:currentColor}:host ::ng-deep .sc-glyph-pick .p-dropdown-label{padding:.2rem .4rem}.sc-color-input{width:2.5rem;height:1.8rem;border:1px solid var(--surface-border, #ced4da);border-radius:4px;padding:0;background:none}.sc-row-number p-slider,.sc-row-range p-slider{flex:1 1 0;min-width:0}:host ::ng-deep .sc-num{width:4.5rem;padding:.3rem .4rem;text-align:center}:host ::ng-deep .sc-row-number p-inputnumber,:host ::ng-deep .sc-row-range p-inputnumber{flex:0 0 auto}.sc-gene-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1.4rem;height:1.4rem;padding:0;border:1px solid transparent;border-radius:4px;background:transparent;cursor:pointer}.sc-gene-icon:hover,.sc-gene-icon:focus-visible{border-color:var(--surface-border, rgba(0, 0, 0, .2))}:host{display:contents}.sc-gene-group,.sc-gene-leaf{padding-left:1rem}.sc-gene-leaf.nested{padding-left:2rem}.sc-eye{flex:0 0 auto;border:0;background:transparent;cursor:pointer;padding:0;color:var(--text-color-secondary, #6c757d)}.sc-eye .pi-eye{color:var(--text-color, #333)}.sc-eye:disabled{cursor:default;opacity:.5}.sc-gene-filter{width:calc(100% - 1rem);margin:.2rem 0 .2rem 1rem;font-size:.8rem;padding:.2rem .4rem}.sc-gene-footer{text-align:right;font-size:.78rem;padding:.2rem 0;color:var(--text-color-secondary, #6c757d)}.sc-gene-count{margin-left:auto;font-variant-numeric:tabular-nums;opacity:.8;padding-left:.5rem}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sc-subhead\">Selected genes</div>\n<div class=\"sc-gene-sort\" *ngIf=\"sortShown\" role=\"group\" aria-label=\"Sort genes\">\n  <span class=\"sc-lbl\">Sort by</span>\n  <button\n    type=\"button\"\n    class=\"sc-sort-btn\"\n    [class.active]=\"!byCount\"\n    [attr.aria-pressed]=\"!byCount\"\n    (click)=\"onGeneSort('name')\"\n  >\n    Name\n  </button>\n  <button\n    type=\"button\"\n    class=\"sc-sort-btn\"\n    [class.active]=\"byCount\"\n    [attr.aria-pressed]=\"byCount\"\n    title=\"Transcripts in view, most first\"\n    (click)=\"onGeneSort('count')\"\n  >\n    Count\n  </button>\n</div>\n<div class=\"sc-gene-tree\">\n  <div class=\"sc-gene-row sc-gene-root\">\n    <button\n      type=\"button\"\n      class=\"sc-eye\"\n      (click)=\"\n        view.transcriptAllGenes ? onAllGenesShown(!rootShown) : onGenesShown(view.transcriptGenes, !rootShown)\n      \"\n    >\n      <i class=\"pi\" [class.pi-eye]=\"rootShown\" [class.pi-eye-slash]=\"!rootShown\"></i>\n    </button>\n    <span class=\"sc-group-label\">Genes</span>\n    <span class=\"sc-count\"\n      >({{ (view.transcriptAllGenes ? geneTotal : view.transcriptGenes.length) | number }}/{{\n        geneTotal | number\n      }})</span\n    >\n    <button\n      type=\"button\"\n      class=\"sc-icon-btn\"\n      (click)=\"geneTreeOpen = !geneTreeOpen\"\n      *ngIf=\"!view.transcriptAllGenes && view.transcriptGenes.length\"\n    >\n      <i class=\"pi\" [class.pi-chevron-down]=\"geneTreeOpen\" [class.pi-chevron-right]=\"!geneTreeOpen\"></i>\n    </button>\n    <button\n      type=\"button\"\n      class=\"sc-icon-btn\"\n      (click)=\"toggleAllGenesOpen()\"\n      *ngIf=\"view.transcriptAllGenes && allGeneList?.length\"\n      [attr.aria-label]=\"allGenesOpen ? 'Hide the gene list' : 'Show every gene'\"\n    >\n      <i class=\"pi\" [class.pi-chevron-down]=\"allGenesOpen\" [class.pi-chevron-right]=\"!allGenesOpen\"></i>\n    </button>\n  </div>\n  <!-- \"All genes\": every gene of the dataset, each with its eye when the dataset says which\n       transcripts are whose (its gene list in code order). -->\n  <ng-container *ngIf=\"allGenesOpen && view.transcriptAllGenes && allGeneList?.length\">\n    <input\n      pInputText\n      class=\"sc-gene-filter\"\n      placeholder=\"Filter genes\u2026\"\n      aria-label=\"Filter genes\"\n      [value]=\"allGenesFilter\"\n      (input)=\"onAllGenesFilter($any($event.target).value)\"\n    />\n    <small class=\"sc-hint\" *ngIf=\"!canHideAllGenes\">\n      This dataset does not say which transcripts are whose, so its genes cannot be hidden one by one.\n    </small>\n    <small class=\"sc-hint\" *ngIf=\"canHideAllGenes && view.transcriptMode === 'density'\">\n      The density map draws every gene as one raster: genes are hidden one by one as circles or icons.\n    </small>\n    <div class=\"sc-gene-row sc-gene-leaf nested\" *ngFor=\"let row of allRows; trackBy: trackByAllRow\">\n      <button\n        type=\"button\"\n        class=\"sc-eye\"\n        [disabled]=\"!canHideAllGenes || view.transcriptMode === 'density'\"\n        (click)=\"onAllGeneShown(row.gene, !row.shown)\"\n      >\n        <i class=\"pi\" [class.pi-eye]=\"row.shown\" [class.pi-eye-slash]=\"!row.shown\"></i>\n      </button>\n      <span class=\"sc-gene-icon\" *ngIf=\"row.swatch\" [style.color]=\"row.swatch\" aria-hidden=\"true\">\n        <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\"><circle r=\"0.75\"></circle></svg>\n      </span>\n      <span class=\"sc-group-label\" [title]=\"row.gene\">{{ row.gene }}</span>\n      <span class=\"sc-gene-count\" *ngIf=\"row.count !== null\" title=\"Transcripts in view\">{{\n        row.count | number\n      }}</span>\n    </div>\n    <small class=\"sc-hint\" *ngIf=\"allGenesMatched > allRows.length\">\n      Showing {{ allRows.length | number }} of {{ allGenesMatched | number }} genes: filter to find the others.\n    </small>\n    <small class=\"sc-hint\" *ngIf=\"allGenesMatched === 0\">No gene matches.</small>\n  </ng-container>\n  <ng-container *ngIf=\"geneTreeOpen && !view.transcriptAllGenes\">\n    <ng-container *ngFor=\"let node of sortedTree; trackBy: trackByNode\">\n      <div class=\"sc-gene-row sc-gene-group\" *ngIf=\"node.name\">\n        <button type=\"button\" class=\"sc-eye\" (click)=\"onGenesShown(node.genes, !groupShown.get(node.name))\">\n          <i\n            class=\"pi\"\n            [class.pi-eye]=\"groupShown.get(node.name)\"\n            [class.pi-eye-slash]=\"!groupShown.get(node.name)\"\n          ></i>\n        </button>\n        <span class=\"sc-group-label\" [title]=\"node.name\">{{ node.name }}</span>\n        <span class=\"sc-count\">({{ node.genes.length }})</span>\n        <button type=\"button\" class=\"sc-icon-btn\" (click)=\"toggleGeneGroup(node.name)\">\n          <i\n            class=\"pi\"\n            [class.pi-chevron-down]=\"!collapsedGeneGroups.has(node.name)\"\n            [class.pi-chevron-right]=\"collapsedGeneGroups.has(node.name)\"\n          ></i>\n        </button>\n      </div>\n      <ng-container *ngIf=\"!node.name || !collapsedGeneGroups.has(node.name)\">\n        <div\n          class=\"sc-gene-row sc-gene-leaf\"\n          [class.nested]=\"!!node.name\"\n          *ngFor=\"let gene of node.genes; trackBy: trackByLabelString\"\n        >\n          <button type=\"button\" class=\"sc-eye\" (click)=\"onGenesShown([gene], !rows.get(gene)?.shown)\">\n            <i class=\"pi\" [class.pi-eye]=\"rows.get(gene)?.shown\" [class.pi-eye-slash]=\"!rows.get(gene)?.shown\"></i>\n          </button>\n          <!-- The gene's marker, in its colour: its icon in Icons mode, a dot for circles.\n               Clicking it opens the icon and colour picker (as Xenium Explorer does). -->\n          <button\n            type=\"button\"\n            class=\"sc-gene-icon\"\n            [style.color]=\"rows.get(gene)?.swatch\"\n            [attr.aria-label]=\"'Icon and colour for ' + gene\"\n            pTooltip=\"Icon and colour\"\n            tooltipPosition=\"top\"\n            (click)=\"openGeneStyle($event, gene, genePop)\"\n          >\n            <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\">\n              <polygon\n                *ngIf=\"view.transcriptMode === 'glyphs'; else dotIcon\"\n                [attr.points]=\"rows.get(gene)?.points\"\n              ></polygon>\n              <ng-template #dotIcon><circle r=\"0.75\"></circle></ng-template>\n            </svg>\n          </button>\n          <span class=\"sc-group-label\">{{ gene }}</span>\n          <span\n            class=\"sc-gene-count\"\n            *ngIf=\"rows.get(gene)?.count as n; else zeroCount\"\n            title=\"Transcripts in view\"\n            >{{ n | number }}</span\n          >\n          <ng-template #zeroCount>\n            <span class=\"sc-gene-count\" *ngIf=\"geneCounts\" title=\"Transcripts in view\">0</span>\n          </ng-template>\n        </div>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n  <!-- One picker for every gene row, filled for the gene that opened it. -->\n  <p-overlayPanel #genePop styleClass=\"sc-gene-style\" appendTo=\"body\">\n    <ng-template pTemplate=\"content\">\n      <spatial-gene-style\n        *ngIf=\"styleGene as gene\"\n        [gene]=\"gene\"\n        what=\"Transcript\"\n        [color]=\"geneColorOf(gene)\"\n        [glyph]=\"styleGlyph ?? 'circle'\"\n        [iconHint]=\"\n          view.transcriptMode !== 'glyphs' ? 'Icons show when the transcript point style is Icons.' : null\n        \"\n        (colorChange)=\"onGeneColor(gene, $event)\"\n        (glyphChange)=\"onGlyph(gene, $event)\"\n        (resetStyle)=\"resetGeneStyle(gene)\"\n      ></spatial-gene-style>\n    </ng-template>\n  </p-overlayPanel>\n  <div class=\"sc-gene-footer\">\n    {{ (view.transcriptAllGenes ? geneTotal : view.transcriptGenes.length) | number }}/{{ geneTotal | number }}\n    genes selected\n  </div>\n</div>\n", styles: [".sc-hint{font-size:.75rem;color:var(--text-color-secondary, #6c757d)}.sc-error{color:var(--red-600, #c62828)}.sc-section{display:flex;flex-direction:column;gap:.35rem}.sc-lbl{font-size:.78rem;color:var(--text-color-secondary, #6c757d);white-space:nowrap}.sc-row{display:flex;align-items:center;gap:.6rem}.sc-row p-slider,.sc-row p-dropdown,.sc-row p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row p-slider .p-slider{width:100%}:host ::ng-deep .sc-row p-dropdown .p-dropdown,:host ::ng-deep .sc-row p-treeSelect .p-treeselect{width:100%}.sc-row .sc-lbl{flex:0 0 calc(50% - .6rem);min-width:0;overflow:hidden;text-overflow:ellipsis}.sc-cmap-option{display:inline-flex;align-items:center;gap:.4rem}.sc-cmap-swatch{width:3.5rem;height:.7rem;border-radius:2px;display:block}.sc-val{flex:0 0 4rem;text-align:right;font-size:.78rem;font-variant-numeric:tabular-nums;white-space:nowrap}:host ::ng-deep .sc-full,:host ::ng-deep .sc-full .p-dropdown,:host ::ng-deep .sc-full .p-autocomplete,:host ::ng-deep .sc-full input{width:100%}.sc-colorbar{height:.75rem;border-radius:2px;border:1px solid rgba(0,0,0,.2)}.sc-colorbar-ends{display:flex;justify-content:space-between;font-size:.7rem;color:var(--text-color-secondary, #6c757d);margin-top:.2rem}.sc-panel{border:1px solid var(--surface-border, #dee2e6);border-radius:6px;margin-bottom:.5rem;overflow:hidden}.sc-panel-head{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--surface-100, #f5f6f7)}.sc-panel-head .sc-panel-title{flex:1;font-weight:600}.sc-panel.open>.sc-panel-head{background:var(--primary-color, #2196f3);color:var(--primary-color-text, #fff)}.sc-panel-body{display:flex;flex-direction:column;gap:.45rem;padding:.6rem .75rem .75rem}.sc-subhead{display:flex;align-items:center;gap:.5rem;margin-top:.4rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-color-secondary, #6c757d)}.sc-subhead:after{content:\"\";flex:1;border-top:1px solid var(--surface-border, #dee2e6)}:host ::ng-deep .sc-buttons .p-button{padding:.35rem .75rem;font-size:.85rem}.sc-row-picker p-dropdown,.sc-row-picker p-multiSelect,.sc-row-picker p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row-picker .sc-variant{width:6.5rem}:host ::ng-deep .sc-row-picker p-multiselect .p-multiselect{width:100%}:host ::ng-deep .sc-row-picker p-dropdown:has(.sc-variant){flex:0 0 6.5rem}:host ::ng-deep .sc-row-picker p-treeselect:has(.sc-palette){flex:0 0 3rem}:host ::ng-deep .sc-palette .p-treeselect-label{width:0;padding:0}.sc-icon-btn{flex:0 0 auto;border:0;background:transparent;cursor:pointer;padding:.25rem .35rem;font:inherit;font-size:1.05rem;color:var(--text-color, #333);border-radius:4px}.sc-icon-btn:hover{background:var(--surface-200, #e9ecef)}.sc-icon-btn.active{color:var(--primary-color, #2196f3);font-weight:700}.sc-icon-btn:disabled{opacity:.5;cursor:default}.sc-small-btn{margin-left:auto;border:1px solid var(--surface-border, #ced4da);background:var(--surface-0, #fff);border-radius:4px;padding:.2rem .6rem;font:inherit;font-size:.8rem;cursor:pointer}:host ::ng-deep .sc-group-heading{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.7}.sc-group-list,.sc-gene-tree{max-height:16rem;overflow-y:auto;border:1px solid var(--surface-border, #dee2e6);border-radius:4px;padding:.25rem .4rem}.sc-group-row,.sc-gene-row{display:flex;align-items:center;gap:.45rem;padding:.15rem 0;font-size:.88rem}.sc-group-row .sc-group-label,.sc-gene-row .sc-group-label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-group-all,.sc-gene-root,.sc-gene-group{font-weight:600}.sc-group-all .sc-icon-btn,.sc-gene-root .sc-icon-btn,.sc-gene-group .sc-icon-btn{margin-left:auto;font-size:.85rem}.sc-count{flex:0 0 auto;font-size:.78rem;color:var(--text-color-secondary, #6c757d)}.sc-glyph-option{display:inline-flex;align-items:center;gap:.4rem}.sc-glyph-svg{width:1rem;height:1rem;fill:currentColor}:host ::ng-deep .sc-glyph-pick .p-dropdown-label{padding:.2rem .4rem}.sc-color-input{width:2.5rem;height:1.8rem;border:1px solid var(--surface-border, #ced4da);border-radius:4px;padding:0;background:none}.sc-row-number p-slider,.sc-row-range p-slider{flex:1 1 0;min-width:0}:host ::ng-deep .sc-num{width:4.5rem;padding:.3rem .4rem;text-align:center}:host ::ng-deep .sc-row-number p-inputnumber,:host ::ng-deep .sc-row-range p-inputnumber{flex:0 0 auto}.sc-gene-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1.4rem;height:1.4rem;padding:0;border:1px solid transparent;border-radius:4px;background:transparent;cursor:pointer}.sc-gene-icon:hover,.sc-gene-icon:focus-visible{border-color:var(--surface-border, rgba(0, 0, 0, .2))}:host{display:contents}.sc-gene-group,.sc-gene-leaf{padding-left:1rem}.sc-gene-leaf.nested{padding-left:2rem}.sc-eye{flex:0 0 auto;border:0;background:transparent;cursor:pointer;padding:0;color:var(--text-color-secondary, #6c757d)}.sc-eye .pi-eye{color:var(--text-color, #333)}.sc-eye:disabled{cursor:default;opacity:.5}.sc-gene-sort{display:flex;align-items:center;gap:.25rem;font-size:.8rem}.sc-gene-sort .sc-lbl{margin-right:auto}.sc-sort-btn{border:1px solid var(--surface-border, #ced4da);background:var(--surface-0, #fff);color:var(--text-color, #333);border-radius:4px;padding:.1rem .5rem;font:inherit;cursor:pointer}.sc-sort-btn.active{border-color:var(--primary-color, #2196f3);color:var(--primary-color, #2196f3);font-weight:600}.sc-gene-filter{width:calc(100% - 1rem);margin:.2rem 0 .2rem 1rem;font-size:.8rem;padding:.2rem .4rem}.sc-gene-footer{text-align:right;font-size:.78rem;padding:.2rem 0;color:var(--text-color-secondary, #6c757d)}.sc-gene-count{margin-left:auto;font-variant-numeric:tabular-nums;opacity:.8;padding-left:.5rem}\n"] }]
         }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { controls: [{
                 type: Input
             }], dataset: [{
@@ -24089,7 +24303,7 @@ class SpatialTranscriptsPanelComponent {
         ];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SpatialTranscriptsPanelComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: SpatialTranscriptsPanelComponent, isStandalone: true, selector: "spatial-transcripts-panel", inputs: { controls: "controls", dataset: "dataset", view: "view", genes: "genes", estimate: "estimate", densityStats: "densityStats", geneCounts: "geneCounts", colormapOptions: "colormapOptions", open: "open" }, outputs: { openChange: "openChange" }, viewQueries: [{ propertyName: "geneGroupFileRef", first: true, predicate: ["geneGroupFile"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"sc-panel\" [class.open]=\"open\">\n  <div class=\"sc-panel-head\" (click)=\"openChange.emit(!open)\">\n    <p-checkbox\n      [binary]=\"true\"\n      [ngModel]=\"view.transcriptMode !== 'off'\"\n      (click)=\"$event.stopPropagation()\"\n      (onChange)=\"onTranscriptsOn($event.checked)\"\n    ></p-checkbox>\n    <span class=\"sc-panel-title\">Transcripts</span>\n    <i class=\"pi\" [class.pi-chevron-down]=\"open\" [class.pi-chevron-right]=\"!open\"></i>\n  </div>\n  <div class=\"sc-panel-body\" *ngIf=\"open\">\n    <div class=\"sc-row sc-row-picker\">\n      <ng-container *ngIf=\"genes?.state$ | async as gene\">\n        <p-multiSelect\n          inputId=\"sc-tx-genes\"\n          [options]=\"gene.options\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [ngModel]=\"view.transcriptGenes\"\n          (onChange)=\"onTranscriptGenes($event.value)\"\n          [filter]=\"true\"\n          filterBy=\"label\"\n          [resetFilterOnHide]=\"true\"\n          (onFilter)=\"genes?.onFilter($event.filter)\"\n          (onPanelShow)=\"genes?.ensureList()\"\n          [virtualScroll]=\"gene.options.length > geneVirtualScrollFrom\"\n          [virtualScrollItemSize]=\"30\"\n          [showToggleAll]=\"false\"\n          [emptyFilterMessage]=\"gene.remote ? 'No match \u2014 keep typing' : 'No match'\"\n          [emptyMessage]=\"gene.remote ? 'Type to search genes' : 'No genes'\"\n          appendTo=\"body\"\n          placeholder=\"Search for genes to visualize\u2026\"\n          [selectedItemsLabel]=\"'{0} genes selected'\"\n          [maxSelectedLabels]=\"0\"\n          styleClass=\"sc-full\"\n        ></p-multiSelect>\n      </ng-container>\n      <button\n        type=\"button\"\n        class=\"sc-icon-btn\"\n        *ngIf=\"canShowAllGenes\"\n        (click)=\"onToggleAllGenes()\"\n        [class.active]=\"view.transcriptAllGenes\"\n        [title]=\"view.transcriptAllGenes ? 'Back to the selected genes' : 'Select all genes'\"\n      >\n        \u00B1\n      </button>\n      <button type=\"button\" class=\"sc-icon-btn\" (click)=\"geneMenuRef.toggle($event)\" title=\"More\">\n        <i class=\"pi pi-ellipsis-v\"></i>\n      </button>\n      <p-menu #geneMenuRef [model]=\"geneMenu\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n      <input\n        #geneGroupFile\n        type=\"file\"\n        accept=\".csv,.tsv,.txt\"\n        hidden\n        (change)=\"onImportGeneGroups(geneGroupFile)\"\n      />\n    </div>\n    <small class=\"sc-hint sc-error\" *ngIf=\"geneGroupError\">{{ geneGroupError }}</small>\n    <small class=\"sc-hint\" *ngIf=\"allGenesPreparing\">{{ allGenesPreparing }}</small>\n\n    <spatial-marker-genes-form\n      [controls]=\"controls\"\n      [dataset]=\"dataset\"\n      [view]=\"view\"\n      [open]=\"markersOpen\"\n      (openChange)=\"markersOpen = $event\"\n    ></spatial-marker-genes-form>\n\n    <spatial-gene-tree\n      [controls]=\"controls\"\n      [dataset]=\"dataset\"\n      [view]=\"view\"\n      [geneCounts]=\"geneCounts\"\n      [geneTotal]=\"geneTotal\"\n    ></spatial-gene-tree>\n\n    <div class=\"sc-subhead\">Transcript controls</div>\n    <span class=\"sc-lbl\">View transcripts as</span>\n    <p-selectButton\n      [options]=\"transcriptModeOptions\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      [ngModel]=\"view.transcriptMode === 'off' ? null : view.transcriptMode\"\n      (ngModelChange)=\"onTranscriptMode($event)\"\n      [allowEmpty]=\"false\"\n      styleClass=\"sc-buttons\"\n    ></p-selectButton>\n\n    <ng-container *ngIf=\"estimate\">\n      <div class=\"sc-row\">\n        <span\n          class=\"sc-lbl\"\n          pTooltip=\"Transcripts of the visible genes estimated to be in view, against the most markers drawn at once\"\n          tooltipPosition=\"top\"\n          >Estimated Transcript Points</span\n        >\n        <button type=\"button\" class=\"sc-small-btn\" (click)=\"editingMax = !editingMax\">Edit Max</button>\n      </div>\n      <div class=\"sc-meter\">\n        <div class=\"sc-meter-fill\" [class.over]=\"estimateOverMax\" [style.width.%]=\"estimatePercent\"></div>\n      </div>\n      <div class=\"sc-meter-ends\">\n        <span>{{ estimate.points | number }} points</span>\n        <span>{{ estimate.max | number }} max{{ estimateOverMax ? ' reached' : '' }}</span>\n      </div>\n      <div class=\"sc-row\" *ngIf=\"editingMax\">\n        <span class=\"sc-lbl\">Max markers</span>\n        <p-dropdown\n          [options]=\"budgetOptions\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [ngModel]=\"view.transcriptBudget\"\n          (ngModelChange)=\"onTranscriptBudget($event)\"\n          appendTo=\"body\"\n        ></p-dropdown>\n      </div>\n      <small class=\"sc-hint\" *ngIf=\"estimateOverMax && view.transcriptMode !== 'density'\">\n        Max points reached: transcripts are grouped by area, circles sized by how many they hold. Zoom in or select\n        fewer genes to see individual points.\n      </small>\n    </ng-container>\n\n    <!-- The density raster and the grouped markers drawn from it carry no cells, so they\n         cannot follow the Observations gene filter: they are not drawn while it is on. -->\n    <small class=\"sc-hint\" *ngIf=\"observationsFiltered && view.transcriptMode === 'density'\">\n      Observations are filtered by gene, and the density map sums every cell's transcripts, so it is hidden. Use\n      Circles or Icons to see the transcripts of the observations shown.\n    </small>\n    <small\n      class=\"sc-hint\"\n      *ngIf=\"observationsFiltered && (view.transcriptMode === 'circles' || view.transcriptMode === 'glyphs')\"\n    >\n      Observations are filtered by gene: only the transcripts of the observations shown are drawn. Transcripts\n      grouped by area when zoomed out carry no cells, so they are hidden; zoom in to see them.\n    </small>\n\n    <ng-container *ngIf=\"view.transcriptMode === 'circles' || view.transcriptMode === 'glyphs'\">\n      <div class=\"sc-row\">\n        <span class=\"sc-lbl\">Colour by</span>\n        <p-selectButton\n          [options]=\"transcriptColorOptions\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [ngModel]=\"transcriptColorShown\"\n          (ngModelChange)=\"onTranscriptColorBy($event)\"\n          [allowEmpty]=\"false\"\n          styleClass=\"sc-buttons\"\n        ></p-selectButton>\n      </div>\n      <ng-container *ngIf=\"view.transcriptAllGenes && estimateOverMax\">\n        <small class=\"sc-hint\" *ngIf=\"hasCellTypes && transcriptColorShown !== 'cellType'\">\n          Grouped markers mix genes, so they are coloured by cell type until you zoom in to individual transcripts.\n        </small>\n        <small class=\"sc-hint\" *ngIf=\"!hasCellTypes\">\n          Grouped markers mix genes and this dataset has no cell types, so they are drawn in one colour until you\n          zoom in to individual transcripts.\n        </small>\n        <small class=\"sc-hint\" *ngIf=\"allGenesSomeHidden\">\n          Grouped markers hold every gene: hidden genes are left out once you zoom in to individual transcripts.\n        </small>\n      </ng-container>\n      <div class=\"sc-row\" *ngIf=\"view.transcriptAllGenes && view.transcriptMode === 'glyphs'\">\n        <span class=\"sc-lbl\">Icon</span>\n        <p-dropdown\n          [options]=\"glyphOptions\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [ngModel]=\"glyphOf('*', 0)\"\n          (ngModelChange)=\"onGlyph('*', $event)\"\n          appendTo=\"body\"\n          styleClass=\"sc-glyph-pick\"\n        >\n          <ng-template let-opt pTemplate=\"item\">\n            <span class=\"sc-glyph-option\">\n              <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\">\n                <polygon [attr.points]=\"opt.points\"></polygon>\n              </svg>\n              {{ opt.label }}\n            </span>\n          </ng-template>\n          <ng-template let-opt pTemplate=\"selectedItem\">\n            <span class=\"sc-glyph-option\">\n              <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\">\n                <polygon [attr.points]=\"opt?.points\"></polygon>\n              </svg>\n            </span>\n          </ng-template>\n        </p-dropdown>\n      </div>\n      <div class=\"sc-row\">\n        <span class=\"sc-lbl\">Size</span>\n        <p-slider\n          [ngModel]=\"view.transcriptScale\"\n          [min]=\"0.5\"\n          [max]=\"3\"\n          [step]=\"0.25\"\n          (onChange)=\"onTranscriptScale($event.value)\"\n        ></p-slider>\n        <span class=\"sc-val\">{{ view.transcriptScale }}\u00D7</span>\n      </div>\n      <div class=\"sc-row\">\n        <span class=\"sc-lbl\">Opacity</span>\n        <p-slider\n          [ngModel]=\"view.transcriptOpacity\"\n          [min]=\"0.1\"\n          [max]=\"1\"\n          [step]=\"0.05\"\n          (onChange)=\"onTranscriptOpacity($event.value)\"\n        ></p-slider>\n        <span class=\"sc-val\">{{ view.transcriptOpacity }}</span>\n      </div>\n      <div class=\"sc-row\" *ngIf=\"!showingAllGenes\">\n        <p-checkbox\n          [binary]=\"true\"\n          [ngModel]=\"view.transcriptQuality === 'all'\"\n          inputId=\"sc-tx-lowq\"\n          (onChange)=\"onTranscriptQuality($event.checked)\"\n        ></p-checkbox>\n        <label class=\"sc-lbl\" for=\"sc-tx-lowq\">Include low-quality calls</label>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"view.transcriptMode === 'density'\">\n      <span class=\"sc-lbl\">Density map opacity</span>\n      <div class=\"sc-row sc-row-number\">\n        <p-slider\n          [ngModel]=\"view.densityOpacity\"\n          [min]=\"0.05\"\n          [max]=\"1\"\n          [step]=\"0.05\"\n          (onChange)=\"onDensityOpacity($event.value)\"\n        ></p-slider>\n        <p-inputNumber\n          [ngModel]=\"densityOpacityPercent\"\n          (ngModelChange)=\"onDensityOpacityPercent($event)\"\n          [min]=\"5\"\n          [max]=\"100\"\n          inputStyleClass=\"sc-num\"\n        ></p-inputNumber>\n      </div>\n      <span class=\"sc-lbl\" pTooltip=\"Edge of each density bin\" tooltipPosition=\"top\">Density map bin size</span>\n      <p-slider\n        [ngModel]=\"densityBinIndex\"\n        [min]=\"0\"\n        [max]=\"3\"\n        [step]=\"1\"\n        (onChange)=\"onDensityBinIndex($event.value)\"\n        styleClass=\"sc-bin-slider\"\n      ></p-slider>\n      <div class=\"sc-ticks\">\n        <span *ngFor=\"let b of densityBins\">{{ b }}\u00D7{{ b }}\u00B5m</span>\n      </div>\n      <span\n        class=\"sc-lbl\"\n        pTooltip=\"Transcripts per \u00B5m\u00B2 at which the colour scale starts and saturates\"\n        tooltipPosition=\"top\"\n        >Density map scale threshold</span\n      >\n      <div class=\"sc-row sc-row-range\">\n        <p-inputNumber\n          [ngModel]=\"densityWindow[0]\"\n          (ngModelChange)=\"onDensityRangeEnd(0, $event)\"\n          mode=\"decimal\"\n          [minFractionDigits]=\"3\"\n          [maxFractionDigits]=\"3\"\n          inputStyleClass=\"sc-num\"\n        ></p-inputNumber>\n        <p-slider\n          [ngModel]=\"densityWindow\"\n          [range]=\"true\"\n          [min]=\"0\"\n          [max]=\"densitySliderMax\"\n          [step]=\"densityStep\"\n          (onChange)=\"onDensityRange($event.values)\"\n        ></p-slider>\n        <p-inputNumber\n          [ngModel]=\"densityWindow[1]\"\n          (ngModelChange)=\"onDensityRangeEnd(1, $event)\"\n          mode=\"decimal\"\n          [minFractionDigits]=\"3\"\n          [maxFractionDigits]=\"3\"\n          inputStyleClass=\"sc-num\"\n        ></p-inputNumber>\n      </div>\n      <div class=\"sc-row\">\n        <small class=\"sc-hint\">{{ view.densityRange ? 'Set by hand.' : 'Derived from the data.' }}</small>\n        <button type=\"button\" class=\"sc-small-btn\" *ngIf=\"view.densityRange\" (click)=\"onDensityAuto()\">\n          Auto\n        </button>\n      </div>\n      <span class=\"sc-lbl\">Density map bin coloring</span>\n      <div class=\"sc-row sc-row-picker\">\n        <div class=\"sc-colorbar sc-full\" [style.background]=\"densityColorBarCss\"></div>\n        <p-treeSelect\n          [options]=\"colormapOptions\"\n          [ngModel]=\"selectedDensityColormapNode\"\n          selectionMode=\"single\"\n          [showClear]=\"true\"\n          placeholder=\"Inferno\"\n          [scrollHeight]=\"'260px'\"\n          appendTo=\"body\"\n          styleClass=\"sc-palette\"\n          (onNodeSelect)=\"onDensityColormap($event.node)\"\n          (onClear)=\"onDensityColormap(null)\"\n        >\n          <ng-template let-node pTemplate=\"default\">\n            <span class=\"sc-cmap-option\">\n              <img *ngIf=\"!node.children && node.data?.src\" [src]=\"node.data.src\" class=\"sc-cmap-swatch\" alt=\"\" />\n              <span>{{ node.label }}</span>\n            </span>\n          </ng-template>\n        </p-treeSelect>\n      </div>\n      <div class=\"sc-colorbar-ends\">\n        <span>{{ densityWindow[0] | number: '1.0-3' }}</span\n        ><span>{{ densityWindow[1] | number: '1.0-3' }}</span>\n      </div>\n    </ng-container>\n  </div>\n</div>\n", styles: [".sc-hint{font-size:.75rem;color:var(--text-color-secondary, #6c757d)}.sc-error{color:var(--red-600, #c62828)}.sc-section{display:flex;flex-direction:column;gap:.35rem}.sc-lbl{font-size:.78rem;color:var(--text-color-secondary, #6c757d);white-space:nowrap}.sc-row{display:flex;align-items:center;gap:.6rem}.sc-row p-slider,.sc-row p-dropdown,.sc-row p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row p-slider .p-slider{width:100%}:host ::ng-deep .sc-row p-dropdown .p-dropdown,:host ::ng-deep .sc-row p-treeSelect .p-treeselect{width:100%}.sc-row .sc-lbl{flex:0 0 calc(50% - .6rem);min-width:0;overflow:hidden;text-overflow:ellipsis}.sc-cmap-option{display:inline-flex;align-items:center;gap:.4rem}.sc-cmap-swatch{width:3.5rem;height:.7rem;border-radius:2px;display:block}.sc-val{flex:0 0 4rem;text-align:right;font-size:.78rem;font-variant-numeric:tabular-nums;white-space:nowrap}:host ::ng-deep .sc-full,:host ::ng-deep .sc-full .p-dropdown,:host ::ng-deep .sc-full .p-autocomplete,:host ::ng-deep .sc-full input{width:100%}.sc-colorbar{height:.75rem;border-radius:2px;border:1px solid rgba(0,0,0,.2)}.sc-colorbar-ends{display:flex;justify-content:space-between;font-size:.7rem;color:var(--text-color-secondary, #6c757d);margin-top:.2rem}.sc-panel{border:1px solid var(--surface-border, #dee2e6);border-radius:6px;margin-bottom:.5rem;overflow:hidden}.sc-panel-head{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--surface-100, #f5f6f7)}.sc-panel-head .sc-panel-title{flex:1;font-weight:600}.sc-panel.open>.sc-panel-head{background:var(--primary-color, #2196f3);color:var(--primary-color-text, #fff)}.sc-panel-body{display:flex;flex-direction:column;gap:.45rem;padding:.6rem .75rem .75rem}.sc-subhead{display:flex;align-items:center;gap:.5rem;margin-top:.4rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-color-secondary, #6c757d)}.sc-subhead:after{content:\"\";flex:1;border-top:1px solid var(--surface-border, #dee2e6)}:host ::ng-deep .sc-buttons .p-button{padding:.35rem .75rem;font-size:.85rem}.sc-row-picker p-dropdown,.sc-row-picker p-multiSelect,.sc-row-picker p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row-picker .sc-variant{width:6.5rem}:host ::ng-deep .sc-row-picker p-multiselect .p-multiselect{width:100%}:host ::ng-deep .sc-row-picker p-dropdown:has(.sc-variant){flex:0 0 6.5rem}:host ::ng-deep .sc-row-picker p-treeselect:has(.sc-palette){flex:0 0 3rem}:host ::ng-deep .sc-palette .p-treeselect-label{width:0;padding:0}.sc-icon-btn{flex:0 0 auto;border:0;background:transparent;cursor:pointer;padding:.25rem .35rem;font:inherit;font-size:1.05rem;color:var(--text-color, #333);border-radius:4px}.sc-icon-btn:hover{background:var(--surface-200, #e9ecef)}.sc-icon-btn.active{color:var(--primary-color, #2196f3);font-weight:700}.sc-icon-btn:disabled{opacity:.5;cursor:default}.sc-small-btn{margin-left:auto;border:1px solid var(--surface-border, #ced4da);background:var(--surface-0, #fff);border-radius:4px;padding:.2rem .6rem;font:inherit;font-size:.8rem;cursor:pointer}:host ::ng-deep .sc-group-heading{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.7}.sc-group-list,.sc-gene-tree{max-height:16rem;overflow-y:auto;border:1px solid var(--surface-border, #dee2e6);border-radius:4px;padding:.25rem .4rem}.sc-group-row,.sc-gene-row{display:flex;align-items:center;gap:.45rem;padding:.15rem 0;font-size:.88rem}.sc-group-row .sc-group-label,.sc-gene-row .sc-group-label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-group-all,.sc-gene-root,.sc-gene-group{font-weight:600}.sc-group-all .sc-icon-btn,.sc-gene-root .sc-icon-btn,.sc-gene-group .sc-icon-btn{margin-left:auto;font-size:.85rem}.sc-count{flex:0 0 auto;font-size:.78rem;color:var(--text-color-secondary, #6c757d)}.sc-glyph-option{display:inline-flex;align-items:center;gap:.4rem}.sc-glyph-svg{width:1rem;height:1rem;fill:currentColor}:host ::ng-deep .sc-glyph-pick .p-dropdown-label{padding:.2rem .4rem}.sc-color-input{width:2.5rem;height:1.8rem;border:1px solid var(--surface-border, #ced4da);border-radius:4px;padding:0;background:none}.sc-row-number p-slider,.sc-row-range p-slider{flex:1 1 0;min-width:0}:host ::ng-deep .sc-num{width:4.5rem;padding:.3rem .4rem;text-align:center}:host ::ng-deep .sc-row-number p-inputnumber,:host ::ng-deep .sc-row-range p-inputnumber{flex:0 0 auto}.sc-gene-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1.4rem;height:1.4rem;padding:0;border:1px solid transparent;border-radius:4px;background:transparent;cursor:pointer}.sc-gene-icon:hover,.sc-gene-icon:focus-visible{border-color:var(--surface-border, rgba(0, 0, 0, .2))}:host{display:contents}.sc-meter{height:.45rem;border-radius:3px;background:var(--surface-200, #e9ecef);overflow:hidden}.sc-meter-fill{height:100%;background:var(--primary-color, #2196f3)}.sc-meter-fill.over{background:var(--orange-500, #f59e0b)}.sc-meter-ends,.sc-ticks{display:flex;justify-content:space-between;font-size:.72rem;font-weight:600;color:var(--text-color-secondary, #6c757d)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: SharedModule }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$2.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: "ngmodule", type: DropdownModule }, { kind: "component", type: i5$2.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: "ngmodule", type: InputNumberModule }, { kind: "component", type: i7$3.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: "ngmodule", type: MenuModule }, { kind: "component", type: i4.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: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i3$2.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i8$1.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: SliderModule }, { kind: "component", type: i2$1.Slider, selector: "p-slider", inputs: ["animate", "disabled", "min", "max", "orientation", "step", "range", "style", "styleClass", "ariaLabel", "ariaLabelledBy", "tabindex", "autofocus"], outputs: ["onChange", "onSlideEnd"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: TreeSelectModule }, { kind: "component", type: i11.TreeSelect, selector: "p-treeSelect", inputs: ["inputId", "scrollHeight", "disabled", "metaKeySelection", "variant", "display", "selectionMode", "tabindex", "ariaLabel", "ariaLabelledBy", "placeholder", "panelClass", "panelStyle", "panelStyleClass", "containerStyle", "containerStyleClass", "labelStyle", "labelStyleClass", "overlayOptions", "emptyMessage", "appendTo", "filter", "filterBy", "filterMode", "filterPlaceholder", "filterLocale", "filterInputAutoFocus", "propagateSelectionDown", "propagateSelectionUp", "showClear", "resetFilterOnHide", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autofocus", "options", "showTransitionOptions", "hideTransitionOptions", "loading"], outputs: ["onNodeExpand", "onNodeCollapse", "onShow", "onHide", "onClear", "onFilter", "onFocus", "onBlur", "onNodeUnselect", "onNodeSelect"] }, { kind: "component", type: SpatialGeneTreeComponent, selector: "spatial-gene-tree", inputs: ["controls", "dataset", "view", "geneCounts", "geneTotal"] }, { kind: "component", type: SpatialMarkerGenesFormComponent, selector: "spatial-marker-genes-form", inputs: ["controls", "dataset", "view", "open"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: SpatialTranscriptsPanelComponent, isStandalone: true, selector: "spatial-transcripts-panel", inputs: { controls: "controls", dataset: "dataset", view: "view", genes: "genes", estimate: "estimate", densityStats: "densityStats", geneCounts: "geneCounts", colormapOptions: "colormapOptions", open: "open" }, outputs: { openChange: "openChange" }, viewQueries: [{ propertyName: "geneGroupFileRef", first: true, predicate: ["geneGroupFile"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"sc-panel\" [class.open]=\"open\">\n  <div class=\"sc-panel-head\" (click)=\"openChange.emit(!open)\">\n    <p-checkbox\n      [binary]=\"true\"\n      [ngModel]=\"view.transcriptMode !== 'off'\"\n      (click)=\"$event.stopPropagation()\"\n      (onChange)=\"onTranscriptsOn($event.checked)\"\n    ></p-checkbox>\n    <span class=\"sc-panel-title\">Transcripts</span>\n    <i class=\"pi\" [class.pi-chevron-down]=\"open\" [class.pi-chevron-right]=\"!open\"></i>\n  </div>\n  <div class=\"sc-panel-body\" *ngIf=\"open\">\n    <div class=\"sc-row sc-row-picker\">\n      <ng-container *ngIf=\"genes?.state$ | async as gene\">\n        <p-multiSelect\n          inputId=\"sc-tx-genes\"\n          [options]=\"gene.options\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [ngModel]=\"view.transcriptGenes\"\n          (onChange)=\"onTranscriptGenes($event.value)\"\n          [filter]=\"true\"\n          filterBy=\"label\"\n          [resetFilterOnHide]=\"true\"\n          (onFilter)=\"genes?.onFilter($event.filter)\"\n          (onPanelShow)=\"genes?.ensureList()\"\n          [virtualScroll]=\"gene.options.length > geneVirtualScrollFrom\"\n          [virtualScrollItemSize]=\"30\"\n          [showToggleAll]=\"false\"\n          [emptyFilterMessage]=\"gene.remote ? 'No match \u2014 keep typing' : 'No match'\"\n          [emptyMessage]=\"gene.remote ? 'Type to search genes' : 'No genes'\"\n          appendTo=\"body\"\n          placeholder=\"Search for genes to visualize\u2026\"\n          [selectedItemsLabel]=\"'{0} genes selected'\"\n          [maxSelectedLabels]=\"0\"\n          styleClass=\"sc-full\"\n        ></p-multiSelect>\n      </ng-container>\n      <button\n        type=\"button\"\n        class=\"sc-icon-btn\"\n        *ngIf=\"canShowAllGenes\"\n        (click)=\"onToggleAllGenes()\"\n        [class.active]=\"view.transcriptAllGenes\"\n        [title]=\"view.transcriptAllGenes ? 'Back to the selected genes' : 'Select all genes'\"\n      >\n        \u00B1\n      </button>\n      <button type=\"button\" class=\"sc-icon-btn\" (click)=\"geneMenuRef.toggle($event)\" title=\"More\">\n        <i class=\"pi pi-ellipsis-v\"></i>\n      </button>\n      <p-menu #geneMenuRef [model]=\"geneMenu\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n      <input\n        #geneGroupFile\n        type=\"file\"\n        accept=\".csv,.tsv,.txt\"\n        hidden\n        (change)=\"onImportGeneGroups(geneGroupFile)\"\n      />\n    </div>\n    <small class=\"sc-hint sc-error\" *ngIf=\"geneGroupError\">{{ geneGroupError }}</small>\n    <small class=\"sc-hint\" *ngIf=\"allGenesPreparing\">{{ allGenesPreparing }}</small>\n\n    <spatial-marker-genes-form\n      [controls]=\"controls\"\n      [dataset]=\"dataset\"\n      [view]=\"view\"\n      [open]=\"markersOpen\"\n      (openChange)=\"markersOpen = $event\"\n    ></spatial-marker-genes-form>\n\n    <spatial-gene-tree\n      [controls]=\"controls\"\n      [dataset]=\"dataset\"\n      [view]=\"view\"\n      [geneCounts]=\"geneCounts\"\n      [geneTotal]=\"geneTotal\"\n    ></spatial-gene-tree>\n\n    <div class=\"sc-subhead\">Transcript controls</div>\n    <span class=\"sc-lbl\">View transcripts as</span>\n    <p-selectButton\n      [options]=\"transcriptModeOptions\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      [ngModel]=\"view.transcriptMode === 'off' ? null : view.transcriptMode\"\n      (ngModelChange)=\"onTranscriptMode($event)\"\n      [allowEmpty]=\"false\"\n      styleClass=\"sc-buttons\"\n    ></p-selectButton>\n\n    <ng-container *ngIf=\"estimate\">\n      <div class=\"sc-row\">\n        <span\n          class=\"sc-lbl\"\n          pTooltip=\"Transcripts of the visible genes estimated to be in view, against the most markers drawn at once\"\n          tooltipPosition=\"top\"\n          >Estimated Transcript Points</span\n        >\n        <button type=\"button\" class=\"sc-small-btn\" (click)=\"editingMax = !editingMax\">Edit Max</button>\n      </div>\n      <div class=\"sc-meter\">\n        <div class=\"sc-meter-fill\" [class.over]=\"estimateOverMax\" [style.width.%]=\"estimatePercent\"></div>\n      </div>\n      <div class=\"sc-meter-ends\">\n        <span>{{ estimate.points | number }} points</span>\n        <span>{{ estimate.max | number }} max{{ estimateOverMax ? ' reached' : '' }}</span>\n      </div>\n      <div class=\"sc-row\" *ngIf=\"editingMax\">\n        <span class=\"sc-lbl\">Max markers</span>\n        <p-dropdown\n          [options]=\"budgetOptions\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [ngModel]=\"view.transcriptBudget\"\n          (ngModelChange)=\"onTranscriptBudget($event)\"\n          appendTo=\"body\"\n        ></p-dropdown>\n      </div>\n      <small class=\"sc-hint\" *ngIf=\"estimateOverMax && view.transcriptMode !== 'density'\">\n        Max points reached: transcripts are grouped by area, circles sized by how many they hold. Zoom in or select\n        fewer genes to see individual points.\n      </small>\n    </ng-container>\n\n    <!-- The density raster and the grouped markers drawn from it carry no cells, so they\n         cannot follow the Observations gene filter: they are not drawn while it is on. -->\n    <small class=\"sc-hint\" *ngIf=\"observationsFiltered && view.transcriptMode === 'density'\">\n      Observations are filtered by gene, and the density map sums every cell's transcripts, so it is hidden. Use\n      Circles or Icons to see the transcripts of the observations shown.\n    </small>\n    <small\n      class=\"sc-hint\"\n      *ngIf=\"observationsFiltered && (view.transcriptMode === 'circles' || view.transcriptMode === 'glyphs')\"\n    >\n      Observations are filtered by gene: only the transcripts of the observations shown are drawn. Transcripts\n      grouped by area when zoomed out carry no cells, so they are hidden; zoom in to see them.\n    </small>\n\n    <ng-container *ngIf=\"view.transcriptMode === 'circles' || view.transcriptMode === 'glyphs'\">\n      <div class=\"sc-row\">\n        <span class=\"sc-lbl\">Colour by</span>\n        <p-selectButton\n          [options]=\"transcriptColorOptions\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [ngModel]=\"transcriptColorShown\"\n          (ngModelChange)=\"onTranscriptColorBy($event)\"\n          [allowEmpty]=\"false\"\n          styleClass=\"sc-buttons\"\n        ></p-selectButton>\n      </div>\n      <ng-container *ngIf=\"view.transcriptAllGenes && estimateOverMax\">\n        <small class=\"sc-hint\" *ngIf=\"hasCellTypes && transcriptColorShown !== 'cellType'\">\n          Grouped markers mix genes, so they are coloured by cell type until you zoom in to individual transcripts.\n        </small>\n        <small class=\"sc-hint\" *ngIf=\"!hasCellTypes\">\n          Grouped markers mix genes and this dataset has no cell types, so they are drawn in one colour until you\n          zoom in to individual transcripts.\n        </small>\n        <small class=\"sc-hint\" *ngIf=\"allGenesSomeHidden\">\n          Grouped markers hold every gene: hidden genes are left out once you zoom in to individual transcripts.\n        </small>\n      </ng-container>\n      <div class=\"sc-row\" *ngIf=\"view.transcriptAllGenes && view.transcriptMode === 'glyphs'\">\n        <span class=\"sc-lbl\">Icon</span>\n        <p-dropdown\n          [options]=\"glyphOptions\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [ngModel]=\"glyphOf('*', 0)\"\n          (ngModelChange)=\"onGlyph('*', $event)\"\n          appendTo=\"body\"\n          styleClass=\"sc-glyph-pick\"\n        >\n          <ng-template let-opt pTemplate=\"item\">\n            <span class=\"sc-glyph-option\">\n              <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\">\n                <polygon [attr.points]=\"opt.points\"></polygon>\n              </svg>\n              {{ opt.label }}\n            </span>\n          </ng-template>\n          <ng-template let-opt pTemplate=\"selectedItem\">\n            <span class=\"sc-glyph-option\">\n              <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\">\n                <polygon [attr.points]=\"opt?.points\"></polygon>\n              </svg>\n            </span>\n          </ng-template>\n        </p-dropdown>\n      </div>\n      <div class=\"sc-row\">\n        <span class=\"sc-lbl\">Size</span>\n        <p-slider\n          [ngModel]=\"view.transcriptScale\"\n          [min]=\"0.5\"\n          [max]=\"3\"\n          [step]=\"0.25\"\n          (onChange)=\"onTranscriptScale($event.value)\"\n        ></p-slider>\n        <span class=\"sc-val\">{{ view.transcriptScale }}\u00D7</span>\n      </div>\n      <div class=\"sc-row\">\n        <span class=\"sc-lbl\">Opacity</span>\n        <p-slider\n          [ngModel]=\"view.transcriptOpacity\"\n          [min]=\"0.1\"\n          [max]=\"1\"\n          [step]=\"0.05\"\n          (onChange)=\"onTranscriptOpacity($event.value)\"\n        ></p-slider>\n        <span class=\"sc-val\">{{ view.transcriptOpacity }}</span>\n      </div>\n      <div class=\"sc-row\" *ngIf=\"!showingAllGenes\">\n        <p-checkbox\n          [binary]=\"true\"\n          [ngModel]=\"view.transcriptQuality === 'all'\"\n          inputId=\"sc-tx-lowq\"\n          (onChange)=\"onTranscriptQuality($event.checked)\"\n        ></p-checkbox>\n        <label class=\"sc-lbl\" for=\"sc-tx-lowq\">Include low-quality calls</label>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"view.transcriptMode === 'density'\">\n      <span class=\"sc-lbl\">Density map opacity</span>\n      <div class=\"sc-row sc-row-number\">\n        <p-slider\n          [ngModel]=\"view.densityOpacity\"\n          [min]=\"0.05\"\n          [max]=\"1\"\n          [step]=\"0.05\"\n          (onChange)=\"onDensityOpacity($event.value)\"\n        ></p-slider>\n        <p-inputNumber\n          [ngModel]=\"densityOpacityPercent\"\n          (ngModelChange)=\"onDensityOpacityPercent($event)\"\n          [min]=\"5\"\n          [max]=\"100\"\n          inputStyleClass=\"sc-num\"\n        ></p-inputNumber>\n      </div>\n      <span class=\"sc-lbl\" pTooltip=\"Edge of each density bin\" tooltipPosition=\"top\">Density map bin size</span>\n      <p-slider\n        [ngModel]=\"densityBinIndex\"\n        [min]=\"0\"\n        [max]=\"3\"\n        [step]=\"1\"\n        (onChange)=\"onDensityBinIndex($event.value)\"\n        styleClass=\"sc-bin-slider\"\n      ></p-slider>\n      <div class=\"sc-ticks\">\n        <span *ngFor=\"let b of densityBins\">{{ b }}\u00D7{{ b }}\u00B5m</span>\n      </div>\n      <span\n        class=\"sc-lbl\"\n        pTooltip=\"Transcripts per \u00B5m\u00B2 at which the colour scale starts and saturates\"\n        tooltipPosition=\"top\"\n        >Density map scale threshold</span\n      >\n      <div class=\"sc-row sc-row-range\">\n        <p-inputNumber\n          [ngModel]=\"densityWindow[0]\"\n          (ngModelChange)=\"onDensityRangeEnd(0, $event)\"\n          mode=\"decimal\"\n          [minFractionDigits]=\"3\"\n          [maxFractionDigits]=\"3\"\n          inputStyleClass=\"sc-num\"\n        ></p-inputNumber>\n        <p-slider\n          [ngModel]=\"densityWindow\"\n          [range]=\"true\"\n          [min]=\"0\"\n          [max]=\"densitySliderMax\"\n          [step]=\"densityStep\"\n          (onChange)=\"onDensityRange($event.values)\"\n        ></p-slider>\n        <p-inputNumber\n          [ngModel]=\"densityWindow[1]\"\n          (ngModelChange)=\"onDensityRangeEnd(1, $event)\"\n          mode=\"decimal\"\n          [minFractionDigits]=\"3\"\n          [maxFractionDigits]=\"3\"\n          inputStyleClass=\"sc-num\"\n        ></p-inputNumber>\n      </div>\n      <div class=\"sc-row\">\n        <small class=\"sc-hint\">{{ view.densityRange ? 'Set by hand.' : 'Derived from the data.' }}</small>\n        <button type=\"button\" class=\"sc-small-btn\" *ngIf=\"view.densityRange\" (click)=\"onDensityAuto()\">\n          Auto\n        </button>\n      </div>\n      <span class=\"sc-lbl\">Density map bin coloring</span>\n      <div class=\"sc-row sc-row-picker\">\n        <div class=\"sc-colorbar sc-full\" [style.background]=\"densityColorBarCss\"></div>\n        <p-treeSelect\n          [options]=\"colormapOptions\"\n          [ngModel]=\"selectedDensityColormapNode\"\n          selectionMode=\"single\"\n          [showClear]=\"true\"\n          placeholder=\"Inferno\"\n          [scrollHeight]=\"'260px'\"\n          appendTo=\"body\"\n          styleClass=\"sc-palette\"\n          (onNodeSelect)=\"onDensityColormap($event.node)\"\n          (onClear)=\"onDensityColormap(null)\"\n        >\n          <ng-template let-node pTemplate=\"default\">\n            <span class=\"sc-cmap-option\">\n              <img *ngIf=\"!node.children && node.data?.src\" [src]=\"node.data.src\" class=\"sc-cmap-swatch\" alt=\"\" />\n              <span>{{ node.label }}</span>\n            </span>\n          </ng-template>\n        </p-treeSelect>\n      </div>\n      <div class=\"sc-colorbar-ends\">\n        <span>{{ densityWindow[0] | number: '1.0-3' }}</span\n        ><span>{{ densityWindow[1] | number: '1.0-3' }}</span>\n      </div>\n    </ng-container>\n  </div>\n</div>\n", styles: [".sc-hint{font-size:.75rem;color:var(--text-color-secondary, #6c757d)}.sc-error{color:var(--red-600, #c62828)}.sc-section{display:flex;flex-direction:column;gap:.35rem}.sc-lbl{font-size:.78rem;color:var(--text-color-secondary, #6c757d);white-space:nowrap}.sc-row{display:flex;align-items:center;gap:.6rem}.sc-row p-slider,.sc-row p-dropdown,.sc-row p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row p-slider .p-slider{width:100%}:host ::ng-deep .sc-row p-dropdown .p-dropdown,:host ::ng-deep .sc-row p-treeSelect .p-treeselect{width:100%}.sc-row .sc-lbl{flex:0 0 calc(50% - .6rem);min-width:0;overflow:hidden;text-overflow:ellipsis}.sc-cmap-option{display:inline-flex;align-items:center;gap:.4rem}.sc-cmap-swatch{width:3.5rem;height:.7rem;border-radius:2px;display:block}.sc-val{flex:0 0 4rem;text-align:right;font-size:.78rem;font-variant-numeric:tabular-nums;white-space:nowrap}:host ::ng-deep .sc-full,:host ::ng-deep .sc-full .p-dropdown,:host ::ng-deep .sc-full .p-autocomplete,:host ::ng-deep .sc-full input{width:100%}.sc-colorbar{height:.75rem;border-radius:2px;border:1px solid rgba(0,0,0,.2)}.sc-colorbar-ends{display:flex;justify-content:space-between;font-size:.7rem;color:var(--text-color-secondary, #6c757d);margin-top:.2rem}.sc-panel{border:1px solid var(--surface-border, #dee2e6);border-radius:6px;margin-bottom:.5rem;overflow:hidden}.sc-panel-head{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--surface-100, #f5f6f7)}.sc-panel-head .sc-panel-title{flex:1;font-weight:600}.sc-panel.open>.sc-panel-head{background:var(--primary-color, #2196f3);color:var(--primary-color-text, #fff)}.sc-panel-body{display:flex;flex-direction:column;gap:.45rem;padding:.6rem .75rem .75rem}.sc-subhead{display:flex;align-items:center;gap:.5rem;margin-top:.4rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-color-secondary, #6c757d)}.sc-subhead:after{content:\"\";flex:1;border-top:1px solid var(--surface-border, #dee2e6)}:host ::ng-deep .sc-buttons .p-button{padding:.35rem .75rem;font-size:.85rem}.sc-row-picker p-dropdown,.sc-row-picker p-multiSelect,.sc-row-picker p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row-picker .sc-variant{width:6.5rem}:host ::ng-deep .sc-row-picker p-multiselect .p-multiselect{width:100%}:host ::ng-deep .sc-row-picker p-dropdown:has(.sc-variant){flex:0 0 6.5rem}:host ::ng-deep .sc-row-picker p-treeselect:has(.sc-palette){flex:0 0 3rem}:host ::ng-deep .sc-palette .p-treeselect-label{width:0;padding:0}.sc-icon-btn{flex:0 0 auto;border:0;background:transparent;cursor:pointer;padding:.25rem .35rem;font:inherit;font-size:1.05rem;color:var(--text-color, #333);border-radius:4px}.sc-icon-btn:hover{background:var(--surface-200, #e9ecef)}.sc-icon-btn.active{color:var(--primary-color, #2196f3);font-weight:700}.sc-icon-btn:disabled{opacity:.5;cursor:default}.sc-small-btn{margin-left:auto;border:1px solid var(--surface-border, #ced4da);background:var(--surface-0, #fff);border-radius:4px;padding:.2rem .6rem;font:inherit;font-size:.8rem;cursor:pointer}:host ::ng-deep .sc-group-heading{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.7}.sc-group-list,.sc-gene-tree{max-height:16rem;overflow-y:auto;border:1px solid var(--surface-border, #dee2e6);border-radius:4px;padding:.25rem .4rem}.sc-group-row,.sc-gene-row{display:flex;align-items:center;gap:.45rem;padding:.15rem 0;font-size:.88rem}.sc-group-row .sc-group-label,.sc-gene-row .sc-group-label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-group-all,.sc-gene-root,.sc-gene-group{font-weight:600}.sc-group-all .sc-icon-btn,.sc-gene-root .sc-icon-btn,.sc-gene-group .sc-icon-btn{margin-left:auto;font-size:.85rem}.sc-count{flex:0 0 auto;font-size:.78rem;color:var(--text-color-secondary, #6c757d)}.sc-glyph-option{display:inline-flex;align-items:center;gap:.4rem}.sc-glyph-svg{width:1rem;height:1rem;fill:currentColor}:host ::ng-deep .sc-glyph-pick .p-dropdown-label{padding:.2rem .4rem}.sc-color-input{width:2.5rem;height:1.8rem;border:1px solid var(--surface-border, #ced4da);border-radius:4px;padding:0;background:none}.sc-row-number p-slider,.sc-row-range p-slider{flex:1 1 0;min-width:0}:host ::ng-deep .sc-num{width:4.5rem;padding:.3rem .4rem;text-align:center}:host ::ng-deep .sc-row-number p-inputnumber,:host ::ng-deep .sc-row-range p-inputnumber{flex:0 0 auto}.sc-gene-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1.4rem;height:1.4rem;padding:0;border:1px solid transparent;border-radius:4px;background:transparent;cursor:pointer}.sc-gene-icon:hover,.sc-gene-icon:focus-visible{border-color:var(--surface-border, rgba(0, 0, 0, .2))}:host{display:contents}.sc-meter{height:.45rem;border-radius:3px;background:var(--surface-200, #e9ecef);overflow:hidden}.sc-meter-fill{height:100%;background:var(--primary-color, #2196f3)}.sc-meter-fill.over{background:var(--orange-500, #f59e0b)}.sc-meter-ends,.sc-ticks{display:flex;justify-content:space-between;font-size:.72rem;font-weight:600;color:var(--text-color-secondary, #6c757d)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: SharedModule }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$2.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: "ngmodule", type: DropdownModule }, { kind: "component", type: i5$2.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: "ngmodule", type: InputNumberModule }, { kind: "component", type: i6$1.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: "ngmodule", type: MenuModule }, { kind: "component", type: i4.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: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i3$2.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i8$2.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: SliderModule }, { kind: "component", type: i8.Slider, selector: "p-slider", inputs: ["animate", "disabled", "min", "max", "orientation", "step", "range", "style", "styleClass", "ariaLabel", "ariaLabelledBy", "tabindex", "autofocus"], outputs: ["onChange", "onSlideEnd"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: TreeSelectModule }, { kind: "component", type: i11.TreeSelect, selector: "p-treeSelect", inputs: ["inputId", "scrollHeight", "disabled", "metaKeySelection", "variant", "display", "selectionMode", "tabindex", "ariaLabel", "ariaLabelledBy", "placeholder", "panelClass", "panelStyle", "panelStyleClass", "containerStyle", "containerStyleClass", "labelStyle", "labelStyleClass", "overlayOptions", "emptyMessage", "appendTo", "filter", "filterBy", "filterMode", "filterPlaceholder", "filterLocale", "filterInputAutoFocus", "propagateSelectionDown", "propagateSelectionUp", "showClear", "resetFilterOnHide", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autofocus", "options", "showTransitionOptions", "hideTransitionOptions", "loading"], outputs: ["onNodeExpand", "onNodeCollapse", "onShow", "onHide", "onClear", "onFilter", "onFocus", "onBlur", "onNodeUnselect", "onNodeSelect"] }, { kind: "component", type: SpatialGeneTreeComponent, selector: "spatial-gene-tree", inputs: ["controls", "dataset", "view", "geneCounts", "geneTotal"] }, { kind: "component", type: SpatialMarkerGenesFormComponent, selector: "spatial-marker-genes-form", inputs: ["controls", "dataset", "view", "open"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SpatialTranscriptsPanelComponent, decorators: [{
             type: Component,
@@ -24463,7 +24677,7 @@ class SpatialObservationsPanelComponent {
         this.controls?.setViewState({ percentileClip: value });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SpatialObservationsPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: SpatialObservationsPanelComponent, isStandalone: true, selector: "spatial-observations-panel", inputs: { controls: "controls", dataset: "dataset", view: "view", genes: "genes", legend: "legend", colorBarCss: "colorBarCss", selection: "selection", selectedCategory: "selectedCategory", colormapOptions: "colormapOptions", is3d: "is3d", open: "open" }, outputs: { openChange: "openChange", categoryClicked: "categoryClicked" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"dataset as ds\">\n  <!-- Observations: one marker per observation (cell centroid, Visium spot), and what\n     colours them. The lead section for datasets without cell outlines. -->\n  <div class=\"sc-panel\" [class.open]=\"open\">\n    <div class=\"sc-panel-head\" (click)=\"openChange.emit(!open)\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"view.showPoints\"\n        (click)=\"$event.stopPropagation()\"\n        (onChange)=\"onShowPoints($event.checked)\"\n      ></p-checkbox>\n      <span class=\"sc-panel-title\">Observations</span>\n      <i class=\"pi\" [class.pi-chevron-down]=\"open\" [class.pi-chevron-right]=\"!open\"></i>\n    </div>\n    <div class=\"sc-panel-body\" *ngIf=\"open\">\n      <small class=\"sc-hint\" *ngIf=\"hasCells && !is3d\">\n        One circle per cell. With cell outlines on, circles are only drawn where cells are too small on screen to\n        outline.\n      </small>\n      <!-- Colour source. Column and gene are mutually exclusive: picking one\n     clears the other, so what drives the colours is never ambiguous. -->\n      <div class=\"sc-section\">\n        <label class=\"sc-lbl\" for=\"sc-column\">Colour by column</label>\n        <p-dropdown\n          inputId=\"sc-column\"\n          [options]=\"columnOptions\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [ngModel]=\"selectedColumn\"\n          (ngModelChange)=\"onColumn($event)\"\n          placeholder=\"None (flat colour)\"\n          appendTo=\"body\"\n          styleClass=\"sc-full\"\n        ></p-dropdown>\n      </div>\n\n      <ng-container *ngIf=\"genes?.state$ | async as gene\">\n        <div class=\"sc-section\" *ngIf=\"ds.features\">\n          <label class=\"sc-lbl\" for=\"sc-gene\">Colour by gene</label>\n          <!-- A filterable dropdown, not a free-text box: the genes are visible before\n       anything is typed, and each keystroke narrows a list the user can see.\n       Virtual-scrolled because a targeted panel runs to a few thousand names. -->\n          <p-dropdown\n            inputId=\"sc-gene\"\n            [options]=\"gene.options\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            [ngModel]=\"selectedGene\"\n            (ngModelChange)=\"onGene($event)\"\n            [filter]=\"true\"\n            filterBy=\"label\"\n            [resetFilterOnHide]=\"true\"\n            (onFilter)=\"genes?.onFilter($event.filter)\"\n            (onShow)=\"genes?.ensureList()\"\n            [showClear]=\"true\"\n            [virtualScroll]=\"gene.options.length > geneVirtualScrollFrom\"\n            [virtualScrollItemSize]=\"30\"\n            [emptyFilterMessage]=\"gene.remote ? 'No match \u2014 keep typing' : 'No match'\"\n            [emptyMessage]=\"gene.remote ? 'Type to search genes' : 'No genes'\"\n            appendTo=\"body\"\n            placeholder=\"Search {{ ds.features.count | number }} genes\u2026\"\n            styleClass=\"sc-full\"\n          ></p-dropdown>\n          <small class=\"sc-hint\" *ngIf=\"gene.failed\">Gene lookup failed.</small>\n        </div>\n\n        <!-- Which observations are drawn at all, by what they express. Several genes at\n       once, unlike the colour, which reads one: picking genes here hides every\n       observation that expresses none of them (or not all of them), and by default\n       colours (and, in 2D, marks) each drawn one by its gene. -->\n        <div class=\"sc-section\" *ngIf=\"ds.features\">\n          <label class=\"sc-lbl\" for=\"sc-show-genes\">Show observations expressing</label>\n          <p-multiSelect\n            inputId=\"sc-show-genes\"\n            [options]=\"gene.options\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            [ngModel]=\"view.observationGenes\"\n            (onChange)=\"onObservationGenes($event.value)\"\n            [filter]=\"true\"\n            filterBy=\"label\"\n            [resetFilterOnHide]=\"true\"\n            (onFilter)=\"genes?.onFilter($event.filter)\"\n            (onPanelShow)=\"genes?.ensureList()\"\n            [virtualScroll]=\"gene.options.length > geneVirtualScrollFrom\"\n            [virtualScrollItemSize]=\"30\"\n            [showToggleAll]=\"false\"\n            [showClear]=\"true\"\n            [emptyFilterMessage]=\"gene.remote ? 'No match \u2014 keep typing' : 'No match'\"\n            [emptyMessage]=\"gene.remote ? 'Type to search genes' : 'No genes'\"\n            appendTo=\"body\"\n            placeholder=\"Any gene (every observation)\"\n            [selectedItemsLabel]=\"'{0} genes'\"\n            [maxSelectedLabels]=\"3\"\n            styleClass=\"sc-full\"\n          >\n            <!-- A picked gene shows its icon in its colour; clicking it edits them. -->\n            <ng-template let-option pTemplate=\"item\">\n              <div class=\"sc-obs-gene-option\">\n                <span class=\"sc-obs-gene-name\">{{ option.label }}</span>\n                <ng-container *ngIf=\"isObservationGene(option.value)\">\n                  <ng-container *ngTemplateOutlet=\"geneMark; context: { $implicit: option.value }\"></ng-container>\n                </ng-container>\n              </div>\n            </ng-template>\n          </p-multiSelect>\n          <p-selectButton\n            *ngIf=\"view.observationGenes.length > 1\"\n            [options]=\"matchOptions\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            [ngModel]=\"view.observationGenesMatch\"\n            (ngModelChange)=\"onObservationGenesMatch($event)\"\n            [allowEmpty]=\"false\"\n            styleClass=\"sc-buttons\"\n          ></p-selectButton>\n          <!-- The picked genes: each one's icon and colour (click to edit), and a way out. -->\n          <div class=\"sc-obs-genes\" *ngIf=\"view.observationGenes.length\">\n            <div class=\"sc-obs-gene-row\" *ngFor=\"let g of view.observationGenes; trackBy: trackByGene\">\n              <ng-container *ngTemplateOutlet=\"geneMark; context: { $implicit: g }\"></ng-container>\n              <span class=\"sc-obs-gene-name\">{{ g }}</span>\n              <button\n                type=\"button\"\n                class=\"sc-icon-btn\"\n                [attr.aria-label]=\"'Stop showing ' + g\"\n                pTooltip=\"Remove\"\n                tooltipPosition=\"top\"\n                (click)=\"removeObservationGene(g)\"\n              >\n                <i class=\"pi pi-times\"></i>\n              </button>\n            </div>\n          </div>\n          <div class=\"sc-row\" *ngIf=\"view.observationGenes.length\">\n            <p-checkbox\n              [binary]=\"true\"\n              [ngModel]=\"view.observationGenesColorBy\"\n              (onChange)=\"onObservationGenesColorBy($event.checked)\"\n              label=\"Colour by these genes\"\n              pTooltip=\"Each observation in the colour (and, in 2D, the icon) of the picked gene it expresses most, relative to that gene's highest value. Off, Colour by column or gene applies.\"\n              tooltipPosition=\"top\"\n            ></p-checkbox>\n          </div>\n          <small class=\"sc-hint\" *ngIf=\"view.observationGenes.length\">{{ geneFilterHint }}</small>\n          <!-- The filter is never dropped silently: a failed expression read keeps the observations\n               as they were drawn, and says so. -->\n          <small class=\"sc-hint sc-error\" *ngIf=\"view.observationGenes.length && (geneFilterFailed$ | async)\">\n            The expression of the picked genes could not be read, so the observations still show the previous\n            filter.\n            <a href=\"\" (click)=\"$event.preventDefault(); retryGeneFilter()\">Try again</a>\n          </small>\n        </div>\n      </ng-container>\n\n      <spatial-key\n        [controls]=\"controls\"\n        [dataset]=\"ds\"\n        [view]=\"view\"\n        [legend]=\"legend\"\n        [colorBarCss]=\"colorBarCss\"\n        [selectedCategory]=\"selectedCategory\"\n        [colormapOptions]=\"colormapOptions\"\n        (categoryClicked)=\"categoryClicked.emit($event)\"\n      ></spatial-key>\n\n      <!-- Display -->\n      <div class=\"sc-section\">\n        <div class=\"sc-row\">\n          <span class=\"sc-lbl\">Point size</span>\n          <p-slider\n            [ngModel]=\"view.pointScale\"\n            [min]=\"0.25\"\n            [max]=\"5\"\n            [step]=\"0.25\"\n            (onChange)=\"onPointScale($event.value)\"\n          ></p-slider>\n          <span class=\"sc-val\">{{ view.pointScale }}\u00D7</span>\n        </div>\n        <div class=\"sc-row\">\n          <span class=\"sc-lbl\">Opacity</span>\n          <p-slider\n            [ngModel]=\"view.opacity\"\n            [min]=\"0.1\"\n            [max]=\"1\"\n            [step]=\"0.05\"\n            (onChange)=\"onOpacity($event.value)\"\n          ></p-slider>\n          <span class=\"sc-val\">{{ view.opacity }}</span>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Only for a gene: the map draws that gene's expression as a field. In 2D\n     it goes under the cells of the displayed plane; in 3D it is one sheet per\n     imaged section, optionally smoothed along z into a volume. -->\n  <div class=\"sc-section\" *ngIf=\"canMapGene\">\n    <div class=\"sc-row\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"view.geneMap\"\n        (onChange)=\"onGeneMap($event.checked)\"\n        label=\"Gene map (expression field)\"\n        [pTooltip]=\"\n          is3d\n            ? 'Draw this gene\\'s expression as one field per imaged section \u2014 an estimate between the cells, empty where nothing was measured'\n            : 'Draw this gene\\'s expression as a smooth field UNDER the cells \u2014 an estimate between them, transparent where nothing was measured'\n        \"\n        tooltipPosition=\"top\"\n      ></p-checkbox>\n    </div>\n    <!-- 3D only: interpolating along z turns the measured sheets into an\n       estimate, so it is its own decision and its own label. -->\n    <div class=\"sc-row\" *ngIf=\"view.geneMap && is3d\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"view.geneMapVolume\"\n        (onChange)=\"onGeneMapVolume($event.checked)\"\n        label=\"Volume rendering (interpolate along z)\"\n        pTooltip=\"Smooth the per-section fields into a continuous volume \u2014 an ESTIMATE between the imaged sections, not measured tissue\"\n        tooltipPosition=\"top\"\n      ></p-checkbox>\n    </div>\n    <!-- Meaningless while interpolating: a volume built from one section would\n       smear that slide through the specimen's whole depth. -->\n    <div class=\"sc-row\" *ngIf=\"view.geneMap && is3d && isSectioned && !view.geneMapVolume\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"geneMapOneSection\"\n        (onChange)=\"onGeneMapOneSection($event.checked)\"\n        label=\"One map section at a time\"\n        pTooltip=\"Draw a single imaged section's field instead of the whole stack of sheets\"\n        tooltipPosition=\"top\"\n      ></p-checkbox>\n    </div>\n    <div class=\"sc-row\" *ngIf=\"view.geneMap && is3d && isSectioned && !view.geneMapVolume && geneMapOneSection\">\n      <span class=\"sc-lbl\">Map section</span>\n      <p-slider\n        [ngModel]=\"view.geneMapSection\"\n        [min]=\"0\"\n        [max]=\"lastSection\"\n        [step]=\"1\"\n        (onChange)=\"onGeneMapSection($event.value)\"\n      ></p-slider>\n      <span class=\"sc-val\">{{ geneMapSectionLabel }}</span>\n    </div>\n    <div class=\"sc-row\" *ngIf=\"view.geneMap\">\n      <span class=\"sc-lbl\">Smoothing</span>\n      <p-slider\n        [ngModel]=\"view.geneMapSmoothing\"\n        [min]=\"0.5\"\n        [max]=\"4\"\n        [step]=\"0.5\"\n        (onChange)=\"onGeneMapSmoothing($event.value)\"\n      ></p-slider>\n      <span class=\"sc-val\">{{ view.geneMapSmoothing }}\u00D7</span>\n    </div>\n    <div class=\"sc-row\" *ngIf=\"view.geneMap\">\n      <span class=\"sc-lbl\">Map opacity</span>\n      <p-slider\n        [ngModel]=\"view.geneMapOpacity\"\n        [min]=\"0.1\"\n        [max]=\"1\"\n        [step]=\"0.05\"\n        (onChange)=\"onGeneMapOpacity($event.value)\"\n      ></p-slider>\n      <span class=\"sc-val\">{{ view.geneMapOpacity }}</span>\n    </div>\n    <div class=\"sc-hint\" *ngIf=\"view.geneMap && !is3d\">\n      Kernel-weighted mean per cell, not a sum \u2014 so a crowded region does not glow for being crowded. Transparent\n      where no cell was measured. Turn the cells' own Opacity down to read the field under them.\n    </div>\n    <div class=\"sc-hint\" *ngIf=\"view.geneMap && is3d\">\n      {{ geneMapVolumeNote }}\n    </div>\n  </div>\n\n  <!-- 3D only: the volume, the cloud and the density volumes occupy the same\n     space, so each hides the others. Independent toggles, because the useful\n     views are the combinations \u2014 the field alone, one section's cells over it,\n     the anatomy alone. -->\n  <div class=\"sc-section\" *ngIf=\"is3d\">\n    <span class=\"sc-lbl\">Show</span>\n    <div class=\"sc-row\" *ngIf=\"ds.volume\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"view.showVolume\"\n        (onChange)=\"onShowVolume($event.checked)\"\n        label=\"Reference volume\"\n        pTooltip=\"The registered anatomy the observations sit in\"\n        tooltipPosition=\"top\"\n      ></p-checkbox>\n    </div>\n    <!-- The backdrop's own opacity: reading the cloud or a density field\n       through the anatomy means turning the anatomy down, not the data. -->\n    <div class=\"sc-row\" *ngIf=\"ds.volume && view.showVolume\">\n      <span class=\"sc-lbl\">Volume opacity</span>\n      <p-slider\n        [ngModel]=\"view.volumeOpacity\"\n        [min]=\"0.05\"\n        [max]=\"1\"\n        [step]=\"0.05\"\n        (onChange)=\"onVolumeOpacity($event.value)\"\n      ></p-slider>\n      <span class=\"sc-val\">{{ view.volumeOpacity }}</span>\n    </div>\n    <div class=\"sc-row\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"view.showPoints\"\n        (onChange)=\"onShowPoints($event.checked)\"\n        label=\"Observations\"\n        pTooltip=\"The measured cells. Hide them to read the density volumes underneath\"\n        tooltipPosition=\"top\"\n      ></p-checkbox>\n    </div>\n    <!-- Only for data that really is sectioned; a continuous z has no sections\n       to step through. -->\n    <div class=\"sc-row\" *ngIf=\"view.showPoints && isSectioned\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"oneSection\"\n        (onChange)=\"onOneSection($event.checked)\"\n        label=\"One section at a time\"\n        pTooltip=\"Draw a single imaged section's cells, so the density volumes between the sections stay visible\"\n        tooltipPosition=\"top\"\n      ></p-checkbox>\n    </div>\n    <div class=\"sc-row\" *ngIf=\"view.showPoints && isSectioned && oneSection\">\n      <span class=\"sc-lbl\">Section</span>\n      <p-slider\n        [ngModel]=\"view.pointSection\"\n        [min]=\"0\"\n        [max]=\"lastSection\"\n        [step]=\"1\"\n        (onChange)=\"onPointSection($event.value)\"\n      ></p-slider>\n      <span class=\"sc-val\">{{ sectionLabel }}</span>\n    </div>\n  </div>\n\n  <div class=\"sc-section\" *ngIf=\"is3d\">\n    <div class=\"sc-row\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"view.densityVolume\"\n        (onChange)=\"onDensityVolume($event.checked)\"\n        label=\"Cluster density volumes\"\n        pTooltip=\"Raymarch each cluster as a smooth density field \u2014 an ESTIMATE between the imaged sections, not measured cells\"\n        tooltipPosition=\"top\"\n      ></p-checkbox>\n    </div>\n    <div class=\"sc-row\" *ngIf=\"view.densityVolume\">\n      <span class=\"sc-lbl\">Smoothing</span>\n      <p-slider\n        [ngModel]=\"view.densitySmoothing\"\n        [min]=\"0.5\"\n        [max]=\"4\"\n        [step]=\"0.5\"\n        (onChange)=\"onDensitySmoothing($event.value)\"\n      ></p-slider>\n      <span class=\"sc-val\">{{ view.densitySmoothing }}\u00D7</span>\n    </div>\n    <div class=\"sc-hint\" *ngIf=\"view.densityVolume\">{{ densityNote }}</div>\n  </div>\n\n  <!-- Continuous-only knobs: meaningless for a categorical palette. -->\n  <div class=\"sc-section\" *ngIf=\"isContinuous\">\n    <div class=\"sc-row\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"view.logScale\"\n        (onChange)=\"onLogScale($event.checked)\"\n        label=\"Log scale\"\n        pTooltip=\"Counts collapse against their outliers on a linear ramp\"\n        tooltipPosition=\"top\"\n      ></p-checkbox>\n    </div>\n    <div class=\"sc-row\">\n      <span class=\"sc-lbl\">Clip outliers</span>\n      <p-dropdown\n        [options]=\"clipOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [ngModel]=\"view.percentileClip\"\n        (ngModelChange)=\"onClip($event)\"\n        appendTo=\"body\"\n        pTooltip=\"Percentile the contrast window is taken at\"\n        tooltipPosition=\"top\"\n      ></p-dropdown>\n      <!-- Reserves the readout column this row has no readout for, so the\n         control's right edge lines up with every slider's. -->\n      <span class=\"sc-val\"></span>\n    </div>\n  </div>\n\n  <!-- A gene's icon in its colour: the button that opens its icon and colour picker. -->\n  <ng-template #geneMark let-g>\n    <button\n      type=\"button\"\n      class=\"sc-gene-icon\"\n      [style.color]=\"geneColorOf(g)\"\n      [attr.aria-label]=\"'Icon and colour for ' + g\"\n      pTooltip=\"Icon and colour\"\n      tooltipPosition=\"top\"\n      (click)=\"openGeneStyle($event, g, genePop)\"\n    >\n      <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\">\n        <polygon [attr.points]=\"glyphPointsOf(g)\"></polygon>\n      </svg>\n    </button>\n  </ng-template>\n  <p-overlayPanel #genePop styleClass=\"sc-gene-style\" appendTo=\"body\">\n    <ng-template pTemplate=\"content\">\n      <spatial-gene-style\n        *ngIf=\"styleGene as g\"\n        [gene]=\"g\"\n        what=\"Observation\"\n        [color]=\"geneColorOf(g)\"\n        [glyph]=\"geneGlyphOf(g)\"\n        iconHint=\"Icons show on the 2D observation markers.\"\n        (colorChange)=\"onGeneColor(g, $event)\"\n        (glyphChange)=\"onGeneGlyph(g, $event)\"\n        (resetStyle)=\"resetGeneStyle(g)\"\n      ></spatial-gene-style>\n    </ng-template>\n  </p-overlayPanel>\n</ng-container>\n", styles: [".sc-hint{font-size:.75rem;color:var(--text-color-secondary, #6c757d)}.sc-error{color:var(--red-600, #c62828)}.sc-section{display:flex;flex-direction:column;gap:.35rem}.sc-lbl{font-size:.78rem;color:var(--text-color-secondary, #6c757d);white-space:nowrap}.sc-row{display:flex;align-items:center;gap:.6rem}.sc-row p-slider,.sc-row p-dropdown,.sc-row p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row p-slider .p-slider{width:100%}:host ::ng-deep .sc-row p-dropdown .p-dropdown,:host ::ng-deep .sc-row p-treeSelect .p-treeselect{width:100%}.sc-row .sc-lbl{flex:0 0 calc(50% - .6rem);min-width:0;overflow:hidden;text-overflow:ellipsis}.sc-cmap-option{display:inline-flex;align-items:center;gap:.4rem}.sc-cmap-swatch{width:3.5rem;height:.7rem;border-radius:2px;display:block}.sc-val{flex:0 0 4rem;text-align:right;font-size:.78rem;font-variant-numeric:tabular-nums;white-space:nowrap}:host ::ng-deep .sc-full,:host ::ng-deep .sc-full .p-dropdown,:host ::ng-deep .sc-full .p-autocomplete,:host ::ng-deep .sc-full input{width:100%}.sc-colorbar{height:.75rem;border-radius:2px;border:1px solid rgba(0,0,0,.2)}.sc-colorbar-ends{display:flex;justify-content:space-between;font-size:.7rem;color:var(--text-color-secondary, #6c757d);margin-top:.2rem}.sc-panel{border:1px solid var(--surface-border, #dee2e6);border-radius:6px;margin-bottom:.5rem;overflow:hidden}.sc-panel-head{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--surface-100, #f5f6f7)}.sc-panel-head .sc-panel-title{flex:1;font-weight:600}.sc-panel.open>.sc-panel-head{background:var(--primary-color, #2196f3);color:var(--primary-color-text, #fff)}.sc-panel-body{display:flex;flex-direction:column;gap:.45rem;padding:.6rem .75rem .75rem}.sc-subhead{display:flex;align-items:center;gap:.5rem;margin-top:.4rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-color-secondary, #6c757d)}.sc-subhead:after{content:\"\";flex:1;border-top:1px solid var(--surface-border, #dee2e6)}:host ::ng-deep .sc-buttons .p-button{padding:.35rem .75rem;font-size:.85rem}.sc-row-picker p-dropdown,.sc-row-picker p-multiSelect,.sc-row-picker p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row-picker .sc-variant{width:6.5rem}:host ::ng-deep .sc-row-picker p-multiselect .p-multiselect{width:100%}:host ::ng-deep .sc-row-picker p-dropdown:has(.sc-variant){flex:0 0 6.5rem}:host ::ng-deep .sc-row-picker p-treeselect:has(.sc-palette){flex:0 0 3rem}:host ::ng-deep .sc-palette .p-treeselect-label{width:0;padding:0}.sc-icon-btn{flex:0 0 auto;border:0;background:transparent;cursor:pointer;padding:.25rem .35rem;font:inherit;font-size:1.05rem;color:var(--text-color, #333);border-radius:4px}.sc-icon-btn:hover{background:var(--surface-200, #e9ecef)}.sc-icon-btn.active{color:var(--primary-color, #2196f3);font-weight:700}.sc-icon-btn:disabled{opacity:.5;cursor:default}.sc-small-btn{margin-left:auto;border:1px solid var(--surface-border, #ced4da);background:var(--surface-0, #fff);border-radius:4px;padding:.2rem .6rem;font:inherit;font-size:.8rem;cursor:pointer}:host ::ng-deep .sc-group-heading{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.7}.sc-group-list,.sc-gene-tree{max-height:16rem;overflow-y:auto;border:1px solid var(--surface-border, #dee2e6);border-radius:4px;padding:.25rem .4rem}.sc-group-row,.sc-gene-row{display:flex;align-items:center;gap:.45rem;padding:.15rem 0;font-size:.88rem}.sc-group-row .sc-group-label,.sc-gene-row .sc-group-label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-group-all,.sc-gene-root,.sc-gene-group{font-weight:600}.sc-group-all .sc-icon-btn,.sc-gene-root .sc-icon-btn,.sc-gene-group .sc-icon-btn{margin-left:auto;font-size:.85rem}.sc-count{flex:0 0 auto;font-size:.78rem;color:var(--text-color-secondary, #6c757d)}.sc-glyph-option{display:inline-flex;align-items:center;gap:.4rem}.sc-glyph-svg{width:1rem;height:1rem;fill:currentColor}:host ::ng-deep .sc-glyph-pick .p-dropdown-label{padding:.2rem .4rem}.sc-color-input{width:2.5rem;height:1.8rem;border:1px solid var(--surface-border, #ced4da);border-radius:4px;padding:0;background:none}.sc-row-number p-slider,.sc-row-range p-slider{flex:1 1 0;min-width:0}:host ::ng-deep .sc-num{width:4.5rem;padding:.3rem .4rem;text-align:center}:host ::ng-deep .sc-row-number p-inputnumber,:host ::ng-deep .sc-row-range p-inputnumber{flex:0 0 auto}.sc-gene-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1.4rem;height:1.4rem;padding:0;border:1px solid transparent;border-radius:4px;background:transparent;cursor:pointer}.sc-gene-icon:hover,.sc-gene-icon:focus-visible{border-color:var(--surface-border, rgba(0, 0, 0, .2))}:host{display:contents}.sc-obs-genes{display:flex;flex-direction:column;gap:.15rem;margin-top:.35rem}.sc-obs-gene-row,.sc-obs-gene-option{display:flex;align-items:center;gap:.4rem;min-width:0}.sc-obs-gene-option{flex:1 1 auto;justify-content:space-between}.sc-obs-gene-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$2.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: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i5$2.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: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i3$2.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i10.OverlayPanel, selector: "p-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i8$1.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: SliderModule }, { kind: "component", type: i2$1.Slider, selector: "p-slider", inputs: ["animate", "disabled", "min", "max", "orientation", "step", "range", "style", "styleClass", "ariaLabel", "ariaLabelledBy", "tabindex", "autofocus"], outputs: ["onChange", "onSlideEnd"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$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: SpatialKeyComponent, selector: "spatial-key", inputs: ["controls", "dataset", "view", "legend", "colorBarCss", "selectedCategory", "colormapOptions"], outputs: ["categoryClicked"] }, { kind: "component", type: SpatialGeneStyleComponent, selector: "spatial-gene-style", inputs: ["gene", "what", "color", "glyph", "iconHint"], outputs: ["colorChange", "glyphChange", "resetStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: SpatialObservationsPanelComponent, isStandalone: true, selector: "spatial-observations-panel", inputs: { controls: "controls", dataset: "dataset", view: "view", genes: "genes", legend: "legend", colorBarCss: "colorBarCss", selection: "selection", selectedCategory: "selectedCategory", colormapOptions: "colormapOptions", is3d: "is3d", open: "open" }, outputs: { openChange: "openChange", categoryClicked: "categoryClicked" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"dataset as ds\">\n  <!-- Observations: one marker per observation (cell centroid, Visium spot), and what\n     colours them. The lead section for datasets without cell outlines. -->\n  <div class=\"sc-panel\" [class.open]=\"open\">\n    <div class=\"sc-panel-head\" (click)=\"openChange.emit(!open)\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"view.showPoints\"\n        (click)=\"$event.stopPropagation()\"\n        (onChange)=\"onShowPoints($event.checked)\"\n      ></p-checkbox>\n      <span class=\"sc-panel-title\">Observations</span>\n      <i class=\"pi\" [class.pi-chevron-down]=\"open\" [class.pi-chevron-right]=\"!open\"></i>\n    </div>\n    <div class=\"sc-panel-body\" *ngIf=\"open\">\n      <small class=\"sc-hint\" *ngIf=\"hasCells && !is3d\">\n        One circle per cell. With cell outlines on, circles are only drawn where cells are too small on screen to\n        outline.\n      </small>\n      <!-- Colour source. Column and gene are mutually exclusive: picking one\n     clears the other, so what drives the colours is never ambiguous. -->\n      <div class=\"sc-section\">\n        <label class=\"sc-lbl\" for=\"sc-column\">Colour by column</label>\n        <p-dropdown\n          inputId=\"sc-column\"\n          [options]=\"columnOptions\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [ngModel]=\"selectedColumn\"\n          (ngModelChange)=\"onColumn($event)\"\n          placeholder=\"None (flat colour)\"\n          appendTo=\"body\"\n          styleClass=\"sc-full\"\n        ></p-dropdown>\n      </div>\n\n      <ng-container *ngIf=\"genes?.state$ | async as gene\">\n        <div class=\"sc-section\" *ngIf=\"ds.features\">\n          <label class=\"sc-lbl\" for=\"sc-gene\">Colour by gene</label>\n          <!-- A filterable dropdown, not a free-text box: the genes are visible before\n       anything is typed, and each keystroke narrows a list the user can see.\n       Virtual-scrolled because a targeted panel runs to a few thousand names. -->\n          <p-dropdown\n            inputId=\"sc-gene\"\n            [options]=\"gene.options\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            [ngModel]=\"selectedGene\"\n            (ngModelChange)=\"onGene($event)\"\n            [filter]=\"true\"\n            filterBy=\"label\"\n            [resetFilterOnHide]=\"true\"\n            (onFilter)=\"genes?.onFilter($event.filter)\"\n            (onShow)=\"genes?.ensureList()\"\n            [showClear]=\"true\"\n            [virtualScroll]=\"gene.options.length > geneVirtualScrollFrom\"\n            [virtualScrollItemSize]=\"30\"\n            [emptyFilterMessage]=\"gene.remote ? 'No match \u2014 keep typing' : 'No match'\"\n            [emptyMessage]=\"gene.remote ? 'Type to search genes' : 'No genes'\"\n            appendTo=\"body\"\n            placeholder=\"Search {{ ds.features.count | number }} genes\u2026\"\n            styleClass=\"sc-full\"\n          ></p-dropdown>\n          <small class=\"sc-hint\" *ngIf=\"gene.failed\">Gene lookup failed.</small>\n        </div>\n\n        <!-- Which observations are drawn at all, by what they express. Several genes at\n       once, unlike the colour, which reads one: picking genes here hides every\n       observation that expresses none of them (or not all of them), and by default\n       colours (and, in 2D, marks) each drawn one by its gene. -->\n        <div class=\"sc-section\" *ngIf=\"ds.features\">\n          <label class=\"sc-lbl\" for=\"sc-show-genes\">Show observations expressing</label>\n          <p-multiSelect\n            inputId=\"sc-show-genes\"\n            [options]=\"gene.options\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            [ngModel]=\"view.observationGenes\"\n            (onChange)=\"onObservationGenes($event.value)\"\n            [filter]=\"true\"\n            filterBy=\"label\"\n            [resetFilterOnHide]=\"true\"\n            (onFilter)=\"genes?.onFilter($event.filter)\"\n            (onPanelShow)=\"genes?.ensureList()\"\n            [virtualScroll]=\"gene.options.length > geneVirtualScrollFrom\"\n            [virtualScrollItemSize]=\"30\"\n            [showToggleAll]=\"false\"\n            [showClear]=\"true\"\n            [emptyFilterMessage]=\"gene.remote ? 'No match \u2014 keep typing' : 'No match'\"\n            [emptyMessage]=\"gene.remote ? 'Type to search genes' : 'No genes'\"\n            appendTo=\"body\"\n            placeholder=\"Any gene (every observation)\"\n            [selectedItemsLabel]=\"'{0} genes'\"\n            [maxSelectedLabels]=\"3\"\n            styleClass=\"sc-full\"\n          >\n            <!-- A picked gene shows its icon in its colour; clicking it edits them. -->\n            <ng-template let-option pTemplate=\"item\">\n              <div class=\"sc-obs-gene-option\">\n                <span class=\"sc-obs-gene-name\">{{ option.label }}</span>\n                <ng-container *ngIf=\"isObservationGene(option.value)\">\n                  <ng-container *ngTemplateOutlet=\"geneMark; context: { $implicit: option.value }\"></ng-container>\n                </ng-container>\n              </div>\n            </ng-template>\n          </p-multiSelect>\n          <p-selectButton\n            *ngIf=\"view.observationGenes.length > 1\"\n            [options]=\"matchOptions\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            [ngModel]=\"view.observationGenesMatch\"\n            (ngModelChange)=\"onObservationGenesMatch($event)\"\n            [allowEmpty]=\"false\"\n            styleClass=\"sc-buttons\"\n          ></p-selectButton>\n          <!-- The picked genes: each one's icon and colour (click to edit), and a way out. -->\n          <div class=\"sc-obs-genes\" *ngIf=\"view.observationGenes.length\">\n            <div class=\"sc-obs-gene-row\" *ngFor=\"let g of view.observationGenes; trackBy: trackByGene\">\n              <ng-container *ngTemplateOutlet=\"geneMark; context: { $implicit: g }\"></ng-container>\n              <span class=\"sc-obs-gene-name\">{{ g }}</span>\n              <button\n                type=\"button\"\n                class=\"sc-icon-btn\"\n                [attr.aria-label]=\"'Stop showing ' + g\"\n                pTooltip=\"Remove\"\n                tooltipPosition=\"top\"\n                (click)=\"removeObservationGene(g)\"\n              >\n                <i class=\"pi pi-times\"></i>\n              </button>\n            </div>\n          </div>\n          <div class=\"sc-row\" *ngIf=\"view.observationGenes.length\">\n            <p-checkbox\n              [binary]=\"true\"\n              [ngModel]=\"view.observationGenesColorBy\"\n              (onChange)=\"onObservationGenesColorBy($event.checked)\"\n              label=\"Colour by these genes\"\n              pTooltip=\"Each observation in the colour (and, in 2D, the icon) of the picked gene it expresses most, relative to that gene's highest value. Off, Colour by column or gene applies.\"\n              tooltipPosition=\"top\"\n            ></p-checkbox>\n          </div>\n          <small class=\"sc-hint\" *ngIf=\"view.observationGenes.length\">{{ geneFilterHint }}</small>\n          <!-- The filter is never dropped silently: a failed expression read keeps the observations\n               as they were drawn, and says so. -->\n          <small class=\"sc-hint sc-error\" *ngIf=\"view.observationGenes.length && (geneFilterFailed$ | async)\">\n            The expression of the picked genes could not be read, so the observations still show the previous\n            filter.\n            <a href=\"\" (click)=\"$event.preventDefault(); retryGeneFilter()\">Try again</a>\n          </small>\n        </div>\n      </ng-container>\n\n      <spatial-key\n        [controls]=\"controls\"\n        [dataset]=\"ds\"\n        [view]=\"view\"\n        [legend]=\"legend\"\n        [colorBarCss]=\"colorBarCss\"\n        [selectedCategory]=\"selectedCategory\"\n        [colormapOptions]=\"colormapOptions\"\n        (categoryClicked)=\"categoryClicked.emit($event)\"\n      ></spatial-key>\n\n      <!-- Display -->\n      <div class=\"sc-section\">\n        <div class=\"sc-row\">\n          <span class=\"sc-lbl\">Point size</span>\n          <p-slider\n            [ngModel]=\"view.pointScale\"\n            [min]=\"0.25\"\n            [max]=\"5\"\n            [step]=\"0.25\"\n            (onChange)=\"onPointScale($event.value)\"\n          ></p-slider>\n          <span class=\"sc-val\">{{ view.pointScale }}\u00D7</span>\n        </div>\n        <div class=\"sc-row\">\n          <span class=\"sc-lbl\">Opacity</span>\n          <p-slider\n            [ngModel]=\"view.opacity\"\n            [min]=\"0.1\"\n            [max]=\"1\"\n            [step]=\"0.05\"\n            (onChange)=\"onOpacity($event.value)\"\n          ></p-slider>\n          <span class=\"sc-val\">{{ view.opacity }}</span>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Only for a gene: the map draws that gene's expression as a field. In 2D\n     it goes under the cells of the displayed plane; in 3D it is one sheet per\n     imaged section, optionally smoothed along z into a volume. -->\n  <div class=\"sc-section\" *ngIf=\"canMapGene\">\n    <div class=\"sc-row\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"view.geneMap\"\n        (onChange)=\"onGeneMap($event.checked)\"\n        label=\"Gene map (expression field)\"\n        [pTooltip]=\"\n          is3d\n            ? 'Draw this gene\\'s expression as one field per imaged section \u2014 an estimate between the cells, empty where nothing was measured'\n            : 'Draw this gene\\'s expression as a smooth field UNDER the cells \u2014 an estimate between them, transparent where nothing was measured'\n        \"\n        tooltipPosition=\"top\"\n      ></p-checkbox>\n    </div>\n    <!-- 3D only: interpolating along z turns the measured sheets into an\n       estimate, so it is its own decision and its own label. -->\n    <div class=\"sc-row\" *ngIf=\"view.geneMap && is3d\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"view.geneMapVolume\"\n        (onChange)=\"onGeneMapVolume($event.checked)\"\n        label=\"Volume rendering (interpolate along z)\"\n        pTooltip=\"Smooth the per-section fields into a continuous volume \u2014 an ESTIMATE between the imaged sections, not measured tissue\"\n        tooltipPosition=\"top\"\n      ></p-checkbox>\n    </div>\n    <!-- Meaningless while interpolating: a volume built from one section would\n       smear that slide through the specimen's whole depth. -->\n    <div class=\"sc-row\" *ngIf=\"view.geneMap && is3d && isSectioned && !view.geneMapVolume\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"geneMapOneSection\"\n        (onChange)=\"onGeneMapOneSection($event.checked)\"\n        label=\"One map section at a time\"\n        pTooltip=\"Draw a single imaged section's field instead of the whole stack of sheets\"\n        tooltipPosition=\"top\"\n      ></p-checkbox>\n    </div>\n    <div class=\"sc-row\" *ngIf=\"view.geneMap && is3d && isSectioned && !view.geneMapVolume && geneMapOneSection\">\n      <span class=\"sc-lbl\">Map section</span>\n      <p-slider\n        [ngModel]=\"view.geneMapSection\"\n        [min]=\"0\"\n        [max]=\"lastSection\"\n        [step]=\"1\"\n        (onChange)=\"onGeneMapSection($event.value)\"\n      ></p-slider>\n      <span class=\"sc-val\">{{ geneMapSectionLabel }}</span>\n    </div>\n    <div class=\"sc-row\" *ngIf=\"view.geneMap\">\n      <span class=\"sc-lbl\">Smoothing</span>\n      <p-slider\n        [ngModel]=\"view.geneMapSmoothing\"\n        [min]=\"0.5\"\n        [max]=\"4\"\n        [step]=\"0.5\"\n        (onChange)=\"onGeneMapSmoothing($event.value)\"\n      ></p-slider>\n      <span class=\"sc-val\">{{ view.geneMapSmoothing }}\u00D7</span>\n    </div>\n    <div class=\"sc-row\" *ngIf=\"view.geneMap\">\n      <span class=\"sc-lbl\">Map opacity</span>\n      <p-slider\n        [ngModel]=\"view.geneMapOpacity\"\n        [min]=\"0.1\"\n        [max]=\"1\"\n        [step]=\"0.05\"\n        (onChange)=\"onGeneMapOpacity($event.value)\"\n      ></p-slider>\n      <span class=\"sc-val\">{{ view.geneMapOpacity }}</span>\n    </div>\n    <div class=\"sc-hint\" *ngIf=\"view.geneMap && !is3d\">\n      Kernel-weighted mean per cell, not a sum \u2014 so a crowded region does not glow for being crowded. Transparent\n      where no cell was measured. Turn the cells' own Opacity down to read the field under them.\n    </div>\n    <div class=\"sc-hint\" *ngIf=\"view.geneMap && is3d\">\n      {{ geneMapVolumeNote }}\n    </div>\n  </div>\n\n  <!-- 3D only: the volume, the cloud and the density volumes occupy the same\n     space, so each hides the others. Independent toggles, because the useful\n     views are the combinations \u2014 the field alone, one section's cells over it,\n     the anatomy alone. -->\n  <div class=\"sc-section\" *ngIf=\"is3d\">\n    <span class=\"sc-lbl\">Show</span>\n    <div class=\"sc-row\" *ngIf=\"ds.volume\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"view.showVolume\"\n        (onChange)=\"onShowVolume($event.checked)\"\n        label=\"Reference volume\"\n        pTooltip=\"The registered anatomy the observations sit in\"\n        tooltipPosition=\"top\"\n      ></p-checkbox>\n    </div>\n    <!-- The backdrop's own opacity: reading the cloud or a density field\n       through the anatomy means turning the anatomy down, not the data. -->\n    <div class=\"sc-row\" *ngIf=\"ds.volume && view.showVolume\">\n      <span class=\"sc-lbl\">Volume opacity</span>\n      <p-slider\n        [ngModel]=\"view.volumeOpacity\"\n        [min]=\"0.05\"\n        [max]=\"1\"\n        [step]=\"0.05\"\n        (onChange)=\"onVolumeOpacity($event.value)\"\n      ></p-slider>\n      <span class=\"sc-val\">{{ view.volumeOpacity }}</span>\n    </div>\n    <div class=\"sc-row\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"view.showPoints\"\n        (onChange)=\"onShowPoints($event.checked)\"\n        label=\"Observations\"\n        pTooltip=\"The measured cells. Hide them to read the density volumes underneath\"\n        tooltipPosition=\"top\"\n      ></p-checkbox>\n    </div>\n    <!-- Only for data that really is sectioned; a continuous z has no sections\n       to step through. -->\n    <div class=\"sc-row\" *ngIf=\"view.showPoints && isSectioned\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"oneSection\"\n        (onChange)=\"onOneSection($event.checked)\"\n        label=\"One section at a time\"\n        pTooltip=\"Draw a single imaged section's cells, so the density volumes between the sections stay visible\"\n        tooltipPosition=\"top\"\n      ></p-checkbox>\n    </div>\n    <div class=\"sc-row\" *ngIf=\"view.showPoints && isSectioned && oneSection\">\n      <span class=\"sc-lbl\">Section</span>\n      <p-slider\n        [ngModel]=\"view.pointSection\"\n        [min]=\"0\"\n        [max]=\"lastSection\"\n        [step]=\"1\"\n        (onChange)=\"onPointSection($event.value)\"\n      ></p-slider>\n      <span class=\"sc-val\">{{ sectionLabel }}</span>\n    </div>\n  </div>\n\n  <div class=\"sc-section\" *ngIf=\"is3d\">\n    <div class=\"sc-row\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"view.densityVolume\"\n        (onChange)=\"onDensityVolume($event.checked)\"\n        label=\"Cluster density volumes\"\n        pTooltip=\"Raymarch each cluster as a smooth density field \u2014 an ESTIMATE between the imaged sections, not measured cells\"\n        tooltipPosition=\"top\"\n      ></p-checkbox>\n    </div>\n    <div class=\"sc-row\" *ngIf=\"view.densityVolume\">\n      <span class=\"sc-lbl\">Smoothing</span>\n      <p-slider\n        [ngModel]=\"view.densitySmoothing\"\n        [min]=\"0.5\"\n        [max]=\"4\"\n        [step]=\"0.5\"\n        (onChange)=\"onDensitySmoothing($event.value)\"\n      ></p-slider>\n      <span class=\"sc-val\">{{ view.densitySmoothing }}\u00D7</span>\n    </div>\n    <div class=\"sc-hint\" *ngIf=\"view.densityVolume\">{{ densityNote }}</div>\n  </div>\n\n  <!-- Continuous-only knobs: meaningless for a categorical palette. -->\n  <div class=\"sc-section\" *ngIf=\"isContinuous\">\n    <div class=\"sc-row\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"view.logScale\"\n        (onChange)=\"onLogScale($event.checked)\"\n        label=\"Log scale\"\n        pTooltip=\"Counts collapse against their outliers on a linear ramp\"\n        tooltipPosition=\"top\"\n      ></p-checkbox>\n    </div>\n    <div class=\"sc-row\">\n      <span class=\"sc-lbl\">Clip outliers</span>\n      <p-dropdown\n        [options]=\"clipOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [ngModel]=\"view.percentileClip\"\n        (ngModelChange)=\"onClip($event)\"\n        appendTo=\"body\"\n        pTooltip=\"Percentile the contrast window is taken at\"\n        tooltipPosition=\"top\"\n      ></p-dropdown>\n      <!-- Reserves the readout column this row has no readout for, so the\n         control's right edge lines up with every slider's. -->\n      <span class=\"sc-val\"></span>\n    </div>\n  </div>\n\n  <!-- A gene's icon in its colour: the button that opens its icon and colour picker. -->\n  <ng-template #geneMark let-g>\n    <button\n      type=\"button\"\n      class=\"sc-gene-icon\"\n      [style.color]=\"geneColorOf(g)\"\n      [attr.aria-label]=\"'Icon and colour for ' + g\"\n      pTooltip=\"Icon and colour\"\n      tooltipPosition=\"top\"\n      (click)=\"openGeneStyle($event, g, genePop)\"\n    >\n      <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\">\n        <polygon [attr.points]=\"glyphPointsOf(g)\"></polygon>\n      </svg>\n    </button>\n  </ng-template>\n  <p-overlayPanel #genePop styleClass=\"sc-gene-style\" appendTo=\"body\">\n    <ng-template pTemplate=\"content\">\n      <spatial-gene-style\n        *ngIf=\"styleGene as g\"\n        [gene]=\"g\"\n        what=\"Observation\"\n        [color]=\"geneColorOf(g)\"\n        [glyph]=\"geneGlyphOf(g)\"\n        iconHint=\"Icons show on the 2D observation markers.\"\n        (colorChange)=\"onGeneColor(g, $event)\"\n        (glyphChange)=\"onGeneGlyph(g, $event)\"\n        (resetStyle)=\"resetGeneStyle(g)\"\n      ></spatial-gene-style>\n    </ng-template>\n  </p-overlayPanel>\n</ng-container>\n", styles: [".sc-hint{font-size:.75rem;color:var(--text-color-secondary, #6c757d)}.sc-error{color:var(--red-600, #c62828)}.sc-section{display:flex;flex-direction:column;gap:.35rem}.sc-lbl{font-size:.78rem;color:var(--text-color-secondary, #6c757d);white-space:nowrap}.sc-row{display:flex;align-items:center;gap:.6rem}.sc-row p-slider,.sc-row p-dropdown,.sc-row p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row p-slider .p-slider{width:100%}:host ::ng-deep .sc-row p-dropdown .p-dropdown,:host ::ng-deep .sc-row p-treeSelect .p-treeselect{width:100%}.sc-row .sc-lbl{flex:0 0 calc(50% - .6rem);min-width:0;overflow:hidden;text-overflow:ellipsis}.sc-cmap-option{display:inline-flex;align-items:center;gap:.4rem}.sc-cmap-swatch{width:3.5rem;height:.7rem;border-radius:2px;display:block}.sc-val{flex:0 0 4rem;text-align:right;font-size:.78rem;font-variant-numeric:tabular-nums;white-space:nowrap}:host ::ng-deep .sc-full,:host ::ng-deep .sc-full .p-dropdown,:host ::ng-deep .sc-full .p-autocomplete,:host ::ng-deep .sc-full input{width:100%}.sc-colorbar{height:.75rem;border-radius:2px;border:1px solid rgba(0,0,0,.2)}.sc-colorbar-ends{display:flex;justify-content:space-between;font-size:.7rem;color:var(--text-color-secondary, #6c757d);margin-top:.2rem}.sc-panel{border:1px solid var(--surface-border, #dee2e6);border-radius:6px;margin-bottom:.5rem;overflow:hidden}.sc-panel-head{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--surface-100, #f5f6f7)}.sc-panel-head .sc-panel-title{flex:1;font-weight:600}.sc-panel.open>.sc-panel-head{background:var(--primary-color, #2196f3);color:var(--primary-color-text, #fff)}.sc-panel-body{display:flex;flex-direction:column;gap:.45rem;padding:.6rem .75rem .75rem}.sc-subhead{display:flex;align-items:center;gap:.5rem;margin-top:.4rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-color-secondary, #6c757d)}.sc-subhead:after{content:\"\";flex:1;border-top:1px solid var(--surface-border, #dee2e6)}:host ::ng-deep .sc-buttons .p-button{padding:.35rem .75rem;font-size:.85rem}.sc-row-picker p-dropdown,.sc-row-picker p-multiSelect,.sc-row-picker p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row-picker .sc-variant{width:6.5rem}:host ::ng-deep .sc-row-picker p-multiselect .p-multiselect{width:100%}:host ::ng-deep .sc-row-picker p-dropdown:has(.sc-variant){flex:0 0 6.5rem}:host ::ng-deep .sc-row-picker p-treeselect:has(.sc-palette){flex:0 0 3rem}:host ::ng-deep .sc-palette .p-treeselect-label{width:0;padding:0}.sc-icon-btn{flex:0 0 auto;border:0;background:transparent;cursor:pointer;padding:.25rem .35rem;font:inherit;font-size:1.05rem;color:var(--text-color, #333);border-radius:4px}.sc-icon-btn:hover{background:var(--surface-200, #e9ecef)}.sc-icon-btn.active{color:var(--primary-color, #2196f3);font-weight:700}.sc-icon-btn:disabled{opacity:.5;cursor:default}.sc-small-btn{margin-left:auto;border:1px solid var(--surface-border, #ced4da);background:var(--surface-0, #fff);border-radius:4px;padding:.2rem .6rem;font:inherit;font-size:.8rem;cursor:pointer}:host ::ng-deep .sc-group-heading{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.7}.sc-group-list,.sc-gene-tree{max-height:16rem;overflow-y:auto;border:1px solid var(--surface-border, #dee2e6);border-radius:4px;padding:.25rem .4rem}.sc-group-row,.sc-gene-row{display:flex;align-items:center;gap:.45rem;padding:.15rem 0;font-size:.88rem}.sc-group-row .sc-group-label,.sc-gene-row .sc-group-label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-group-all,.sc-gene-root,.sc-gene-group{font-weight:600}.sc-group-all .sc-icon-btn,.sc-gene-root .sc-icon-btn,.sc-gene-group .sc-icon-btn{margin-left:auto;font-size:.85rem}.sc-count{flex:0 0 auto;font-size:.78rem;color:var(--text-color-secondary, #6c757d)}.sc-glyph-option{display:inline-flex;align-items:center;gap:.4rem}.sc-glyph-svg{width:1rem;height:1rem;fill:currentColor}:host ::ng-deep .sc-glyph-pick .p-dropdown-label{padding:.2rem .4rem}.sc-color-input{width:2.5rem;height:1.8rem;border:1px solid var(--surface-border, #ced4da);border-radius:4px;padding:0;background:none}.sc-row-number p-slider,.sc-row-range p-slider{flex:1 1 0;min-width:0}:host ::ng-deep .sc-num{width:4.5rem;padding:.3rem .4rem;text-align:center}:host ::ng-deep .sc-row-number p-inputnumber,:host ::ng-deep .sc-row-range p-inputnumber{flex:0 0 auto}.sc-gene-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1.4rem;height:1.4rem;padding:0;border:1px solid transparent;border-radius:4px;background:transparent;cursor:pointer}.sc-gene-icon:hover,.sc-gene-icon:focus-visible{border-color:var(--surface-border, rgba(0, 0, 0, .2))}:host{display:contents}.sc-obs-genes{display:flex;flex-direction:column;gap:.15rem;margin-top:.35rem}.sc-obs-gene-row,.sc-obs-gene-option{display:flex;align-items:center;gap:.4rem;min-width:0}.sc-obs-gene-option{flex:1 1 auto;justify-content:space-between}.sc-obs-gene-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$2.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: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i5$2.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: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i3$2.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i10.OverlayPanel, selector: "p-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i8$2.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: SliderModule }, { kind: "component", type: i8.Slider, selector: "p-slider", inputs: ["animate", "disabled", "min", "max", "orientation", "step", "range", "style", "styleClass", "ariaLabel", "ariaLabelledBy", "tabindex", "autofocus"], outputs: ["onChange", "onSlideEnd"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$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: SpatialKeyComponent, selector: "spatial-key", inputs: ["controls", "dataset", "view", "legend", "colorBarCss", "selectedCategory", "colormapOptions"], outputs: ["categoryClicked"] }, { kind: "component", type: SpatialGeneStyleComponent, selector: "spatial-gene-style", inputs: ["gene", "what", "color", "glyph", "iconHint"], outputs: ["colorChange", "glyphChange", "resetStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SpatialObservationsPanelComponent, decorators: [{
             type: Component,
@@ -26050,7 +26264,7 @@ class VisualizerComponent {
         this.contributions.attachToolDialogSlot(ref?.nativeElement);
     }
     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 }, { token: i0.ElementRef, optional: true }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: VisualizerComponent, isStandalone: true, selector: "visualizer", inputs: { toolbarTools: "toolbarTools", testMode: "testMode" }, outputs: { isStackEvent: "isStackEvent", isGrayscaleEvent: "isGrayscaleEvent" }, viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["cm"], descendants: true }, { propertyName: "plotModePanelSlot", first: true, predicate: ["plotModePanelSlot"], descendants: true }, { propertyName: "inset", first: true, predicate: IntensityInsetComponent, descendants: true, static: 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>{{ segmentation.status || message.detail }}</div>\n      <p-progressBar\n        *ngIf=\"segmentation.downloading\"\n        [value]=\"segmentation.progress\"\n        styleClass=\"mt-2 sam-progress\"\n      ></p-progressBar>\n      <p-progressBar\n        *ngIf=\"segmentation.busy && !segmentation.downloading\"\n        mode=\"indeterminate\"\n        styleClass=\"mt-2\"\n        [style]=\"{ height: '4px' }\"\n      ></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\n  class=\"toolbar-dock\"\n  [class.floating]=\"toolbarFloating\"\n  [style.left.px]=\"toolbarFloating ? toolbarPos.x : null\"\n  [style.top.px]=\"toolbarFloating ? toolbarPos.y : null\"\n>\n  <div\n    class=\"toolbar-drag-handle\"\n    [vizFloatingDrag]=\"toolbarDragOrigin\"\n    (vizFloatingDragMove)=\"toolbarPos = $event\"\n    pTooltip=\"Drag to float the toolbar\"\n    tooltipPosition=\"bottom\"\n  >\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    [isVolumeView]=\"isVolumeView\"\n    [sliceEditor]=\"sliceEditor\"\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]=\"toolParams.toolModelIds\"\n    [vertexEraserRadius]=\"vertexEraserRadius\"\n    [canUndo]=\"regionActions.canUndo\"\n    [canRedo]=\"regionActions.canRedo\"\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    (toggleSliceEditor)=\"toggleSliceEditor()\"\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  >\n    <!-- Host-projected custom toolbar buttons, forwarded into the toolbar. -->\n    <ng-content></ng-content>\n  </plotting-toolbar>\n  <p-button\n    *ngIf=\"toolbarFloating\"\n    class=\"toolbar-dock-btn\"\n    icon=\"pi pi-thumbtack\"\n    size=\"small\"\n    [text]=\"true\"\n    pTooltip=\"Dock to top\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"dockToolbar()\"\n  >\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<!-- The plot, and while a volume view is split, the slice editor's pane on its left (its own\n     viewer, with every region tool) with a divider to resize the two. The plot div keeps its\n     place in the DOM either way: the backends find it by id, and a viewer mounted in it stays. -->\n<div\n  class=\"viz-panes\"\n  [class.viz-quad]=\"sliceEditorShown\"\n  [style.grid-template-columns]=\"sliceEditorShown ? splitX + '% 6px minmax(0, 1fr)' : null\"\n  [style.grid-template-rows]=\"sliceEditorShown ? splitY + '% 6px minmax(0, 1fr)' : null\"\n>\n  <!-- The slice editor: the volume (the plot) top left, the slice being edited (Z) top right,\n       the sections through x and y below, in their axis colours. -->\n  <ng-container *ngIf=\"sliceEditorShown\">\n    <div class=\"viz-cell viz-cell-z\">\n      <div class=\"viz-slice-pane\" [id]=\"sliceDivName\"></div>\n      <span class=\"viz-pane-badge viz-pane-badge-z\">Z \u00B7 slice {{ zIndex }}</span>\n    </div>\n    <div class=\"viz-cell viz-cell-x\">\n      <viz-section-pane axis=\"x\" [view]=\"sections.x\" (pick)=\"onSectionPick('x', $event)\"></viz-section-pane>\n    </div>\n    <div class=\"viz-cell viz-cell-y\">\n      <viz-section-pane axis=\"y\" [view]=\"sections.y\" (pick)=\"onSectionPick('y', $event)\"></viz-section-pane>\n    </div>\n    <div\n      class=\"viz-pane-divider viz-pane-divider-v\"\n      role=\"separator\"\n      aria-orientation=\"vertical\"\n      aria-label=\"Resize the panes across\"\n      [attr.aria-valuenow]=\"splitX\"\n      aria-valuemin=\"20\"\n      aria-valuemax=\"80\"\n      tabindex=\"0\"\n      (pointerdown)=\"startPaneResize($event, 'x')\"\n      (keydown)=\"nudgePaneSize($event, 'x')\"\n    ></div>\n    <div\n      class=\"viz-pane-divider viz-pane-divider-h\"\n      role=\"separator\"\n      aria-orientation=\"horizontal\"\n      aria-label=\"Resize the panes down\"\n      [attr.aria-valuenow]=\"splitY\"\n      aria-valuemin=\"20\"\n      aria-valuemax=\"80\"\n      tabindex=\"0\"\n      (pointerdown)=\"startPaneResize($event, 'y')\"\n      (keydown)=\"nudgePaneSize($event, 'y')\"\n    ></div>\n  </ng-container>\n  <div class=\"w-full relative viz-plot\" [id]=\"plotDivName\">\n    <div *ngIf=\"imgLoading() || stackLoading() || isCaching()\" class=\"loading-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\n        *ngIf=\"stackLoading() || imgLoading()\"\n        class=\"cancel-loading\"\n        label=\"Cancel\"\n        (onClick)=\"cancelLoading()\"\n      >\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=\"render.sharpening && !imgLoading() && !stackLoading() && !isCaching()\" class=\"sharpening-overlay\">\n      <div class=\"spinner\"></div>\n      <span class=\"text-loading\">Sharpening preview...</span>\n    </div>\n  </div>\n</div>\n\n<!-- Floating, draggable intensity-profile inset, shown while any intensity line\n     exists. Kept OUTSIDE the plot div and fixed to the viewport, so it floats over\n     the whole page rather than being clipped to the canvas. -->\n<viz-intensity-inset\n  [divId]=\"intensityInsetDiv\"\n  [plotDivName]=\"plotDivName\"\n  [zIndex]=\"zIndex\"\n  [imageView]=\"isImageView\"\n  [imageInfo]=\"imageInfo\"\n></viz-intensity-inset>\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\n  *ngIf=\"plotModePanel as panel\"\n  [header]=\"panel.title\"\n  [visible]=\"true\"\n  [modal]=\"false\"\n  [closable]=\"false\"\n  [resizable]=\"true\"\n  [draggable]=\"true\"\n  appendTo=\"body\"\n  position=\"right\"\n  styleClass=\"plot-mode-panel\"\n  [style]=\"{ width: '22rem', maxHeight: '85vh' }\"\n  [contentStyle]=\"{ overflow: 'auto' }\"\n>\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\n  *ngIf=\"toolDialog as dlg\"\n  [header]=\"dlg.title\"\n  [visible]=\"true\"\n  (visibleChange)=\"$event || closeDialogTool()\"\n  [modal]=\"false\"\n  [closable]=\"true\"\n  [resizable]=\"true\"\n  [draggable]=\"true\"\n  appendTo=\"body\"\n  position=\"right\"\n  styleClass=\"tool-dialog\"\n  [style]=\"{ width: dlg.width, maxHeight: '85vh' }\"\n  [contentStyle]=\"{ overflow: 'auto' }\"\n>\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\n  header=\"Region Editor\"\n  [(visible)]=\"showRegionEditor\"\n  [modal]=\"false\"\n  [resizable]=\"true\"\n  [draggable]=\"true\"\n  [maximizable]=\"true\"\n  appendTo=\"body\"\n  position=\"right\"\n  [style]=\"{ width: regionEditorWidth, height: '85vh' }\"\n  [contentStyle]=\"{ overflow: 'auto' }\"\n>\n  <region-editor [active]=\"showRegionEditor\"></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\n  header=\"Simplify region(s)\"\n  [(visible)]=\"displaySimplifyDialog\"\n  [modal]=\"true\"\n  [style]=\"{ width: '22rem' }\"\n  [draggable]=\"false\"\n  [resizable]=\"false\"\n>\n  <div class=\"flex flex-column gap-2\">\n    <span\n      >Altitude threshold: <b>{{ regionActions.simplifyThreshold }} px</b></span\n    >\n    <p-slider [(ngModel)]=\"regionActions.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\n      label=\"Apply\"\n      icon=\"pi pi-check\"\n      (onClick)=\"simplifyRegions(regionActions.simplifyThreshold)\"\n    ></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\n  *ngIf=\"toolParams.openParams as open\"\n  [header]=\"open.tool.label + ' parameters'\"\n  [visible]=\"true\"\n  (visibleChange)=\"closeToolParams()\"\n  [modal]=\"true\"\n  [style]=\"{ width: '30rem' }\"\n  [draggable]=\"false\"\n  [resizable]=\"false\"\n  appendTo=\"body\"\n>\n  <div class=\"grid formgrid p-fluid\">\n    <ng-container *ngFor=\"let f of open.fields\">\n      <div class=\"field\" [ngClass]=\"f.spec.type === 'boolean' ? 'col-12' : 'col-6'\">\n        <ng-container *ngIf=\"f.number as n\">\n          <label class=\"text-sm\" [pTooltip]=\"n.tooltip || ''\">{{ n.label }}</label>\n          <p-inputNumber\n            [ngModel]=\"open.values[n.id]\"\n            (ngModelChange)=\"open.values[n.id] = $event\"\n            [min]=\"n.min\"\n            [max]=\"n.max\"\n            [step]=\"n.step\"\n            [minFractionDigits]=\"n.fractionDigits\"\n            [showButtons]=\"true\"\n          ></p-inputNumber>\n        </ng-container>\n\n        <ng-container *ngIf=\"f.select as sel\">\n          <label class=\"text-sm\" [pTooltip]=\"sel.tooltip || ''\">{{ sel.label }}</label>\n          <p-dropdown\n            [options]=\"sel.options\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            [ngModel]=\"open.values[sel.id]\"\n            (ngModelChange)=\"open.values[sel.id] = $event\"\n            appendTo=\"body\"\n          ></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 *ngIf=\"f.spec.type === 'boolean'\" class=\"flex align-items-center gap-2\">\n          <p-checkbox\n            [ngModel]=\"open.values[f.spec.id]\"\n            (ngModelChange)=\"open.values[f.spec.id] = $event\"\n            [binary]=\"true\"\n            [inputId]=\"open.tool.id + '-' + f.spec.id\"\n          ></p-checkbox>\n          <label [for]=\"open.tool.id + '-' + f.spec.id\" class=\"text-sm mb-0\" [pTooltip]=\"f.spec.tooltip || ''\">{{\n            f.spec.label\n          }}</label>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n  <ng-template pTemplate=\"footer\">\n    <p-button\n      label=\"Reset to model defaults\"\n      [text]=\"true\"\n      size=\"small\"\n      (onClick)=\"resetToolParams(open.tool.id)\"\n    ></p-button>\n    <p-button label=\"Close\" size=\"small\" (onClick)=\"closeToolParams()\"></p-button>\n  </ng-template>\n</p-dialog>\n", styles: [":host{display:flex;flex-direction:column;height:100%;overflow:hidden}.viz-panes{flex:1;min-height:0;display:flex}.viz-plot{flex:1 1 0;min-width:0;min-height:0;height:auto!important}.viz-panes.viz-quad{display:grid}.viz-panes.viz-quad>.viz-plot{grid-area:1/1/2/2;min-height:0;overflow:hidden}.viz-cell{position:relative;min-width:0;min-height:0;overflow:hidden}.viz-cell-z{grid-area:1/3/2/4}.viz-cell-x{grid-area:3/1/4/2}.viz-cell-y{grid-area:3/3/4/4}.viz-slice-pane{position:absolute;inset:0}.viz-pane-badge{position:absolute;top:6px;left:6px;z-index:10;padding:1px 8px;border-radius:4px;color:#fff;font:600 12px/1.6 system-ui,sans-serif;pointer-events:none}.viz-pane-badge-z{background:#668cff}.viz-pane-divider{background:var(--surface-border, #cccccc);touch-action:none}.viz-pane-divider:hover,.viz-pane-divider:focus-visible{background:var(--primary-color, #3b82f6);outline:none}.viz-pane-divider-v{grid-area:1/2/4/3;cursor:col-resize}.viz-pane-divider-h{grid-area:2/1/3/4;cursor:row-resize}.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}.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%}.loading-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 .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)}::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%)}:host ::ng-deep .sam-progress .p-progressbar-value{transition:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: SharedModule }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.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: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$2.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: "ngmodule", type: ContextMenuModule }, { kind: "component", type: i11$1.ContextMenu, selector: "p-contextMenu", inputs: ["model", "triggerEvent", "target", "global", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "id", "ariaLabel", "ariaLabelledBy", "pressDelay"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i5.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: "ngmodule", type: DropdownModule }, { kind: "component", type: i5$2.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: "ngmodule", type: InputNumberModule }, { kind: "component", type: i7$3.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: "ngmodule", type: ProgressBarModule }, { kind: "component", type: i7$1.ProgressBar, selector: "p-progressBar", inputs: ["value", "showValue", "styleClass", "style", "unit", "mode", "color"] }, { kind: "ngmodule", type: SliderModule }, { kind: "component", type: i2$1.Slider, selector: "p-slider", inputs: ["animate", "disabled", "min", "max", "orientation", "step", "range", "style", "styleClass", "ariaLabel", "ariaLabelledBy", "tabindex", "autofocus"], outputs: ["onChange", "onSlideEnd"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i18.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: FloatingDragDirective, selector: "[vizFloatingDrag]", inputs: ["vizFloatingDrag"], outputs: ["vizFloatingDragMove"] }, { kind: "component", type: ToolbarComponent, selector: "plotting-toolbar", inputs: ["imageInfo", "hasSpatialDataset", "plotTypeOptions", "selectedPlotType", "basePlotType", "isoRange", "maxIndex", "zIndex", "isHeatmap", "is3dRegions", "isVolumeView", "sliceEditor", "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", "toggleSliceEditor", "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: IntensityInsetComponent, selector: "viz-intensity-inset", inputs: ["divId", "plotDivName", "zIndex", "imageView", "imageInfo"] }, { kind: "component", type: SectionPaneComponent, selector: "viz-section-pane", inputs: ["axis", "view"], outputs: ["pick"] }, { kind: "component", type: ChannelHistogramComponent, selector: "channel-histogram", inputs: ["visible"], outputs: ["visibleChange"] }, { kind: "component", type: SpatialControlsComponent, selector: "spatial-controls", inputs: ["visible", "is3d"], outputs: ["visibleChange"] }, { kind: "component", type: RegionEditorComponent, selector: "region-editor", inputs: ["active"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: VisualizerComponent, isStandalone: true, selector: "visualizer", inputs: { toolbarTools: "toolbarTools", testMode: "testMode" }, outputs: { isStackEvent: "isStackEvent", isGrayscaleEvent: "isGrayscaleEvent" }, viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["cm"], descendants: true }, { propertyName: "plotModePanelSlot", first: true, predicate: ["plotModePanelSlot"], descendants: true }, { propertyName: "inset", first: true, predicate: IntensityInsetComponent, descendants: true, static: 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>{{ segmentation.status || message.detail }}</div>\n      <p-progressBar\n        *ngIf=\"segmentation.downloading\"\n        [value]=\"segmentation.progress\"\n        styleClass=\"mt-2 sam-progress\"\n      ></p-progressBar>\n      <p-progressBar\n        *ngIf=\"segmentation.busy && !segmentation.downloading\"\n        mode=\"indeterminate\"\n        styleClass=\"mt-2\"\n        [style]=\"{ height: '4px' }\"\n      ></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\n  class=\"toolbar-dock\"\n  [class.floating]=\"toolbarFloating\"\n  [style.left.px]=\"toolbarFloating ? toolbarPos.x : null\"\n  [style.top.px]=\"toolbarFloating ? toolbarPos.y : null\"\n>\n  <div\n    class=\"toolbar-drag-handle\"\n    [vizFloatingDrag]=\"toolbarDragOrigin\"\n    (vizFloatingDragMove)=\"toolbarPos = $event\"\n    pTooltip=\"Drag to float the toolbar\"\n    tooltipPosition=\"bottom\"\n  >\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    [isVolumeView]=\"isVolumeView\"\n    [sliceEditor]=\"sliceEditor\"\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]=\"toolParams.toolModelIds\"\n    [vertexEraserRadius]=\"vertexEraserRadius\"\n    [canUndo]=\"regionActions.canUndo\"\n    [canRedo]=\"regionActions.canRedo\"\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    (toggleSliceEditor)=\"toggleSliceEditor()\"\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  >\n    <!-- Host-projected custom toolbar buttons, forwarded into the toolbar. -->\n    <ng-content></ng-content>\n  </plotting-toolbar>\n  <p-button\n    *ngIf=\"toolbarFloating\"\n    class=\"toolbar-dock-btn\"\n    icon=\"pi pi-thumbtack\"\n    size=\"small\"\n    [text]=\"true\"\n    pTooltip=\"Dock to top\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"dockToolbar()\"\n  >\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<!-- The plot, and while a volume view is split, the slice editor's pane on its left (its own\n     viewer, with every region tool) with a divider to resize the two. The plot div keeps its\n     place in the DOM either way: the backends find it by id, and a viewer mounted in it stays. -->\n<div\n  class=\"viz-panes\"\n  [class.viz-quad]=\"sliceEditorShown\"\n  [style.grid-template-columns]=\"sliceEditorShown ? splitX + '% 6px minmax(0, 1fr)' : null\"\n  [style.grid-template-rows]=\"sliceEditorShown ? splitY + '% 6px minmax(0, 1fr)' : null\"\n>\n  <!-- The slice editor: the volume (the plot) top left, the slice being edited (Z) top right,\n       the sections through x and y below, in their axis colours. -->\n  <ng-container *ngIf=\"sliceEditorShown\">\n    <div class=\"viz-cell viz-cell-z\">\n      <div class=\"viz-slice-pane\" [id]=\"sliceDivName\"></div>\n      <span class=\"viz-pane-badge viz-pane-badge-z\">Z \u00B7 slice {{ zIndex }}</span>\n    </div>\n    <div class=\"viz-cell viz-cell-x\">\n      <viz-section-pane axis=\"x\" [view]=\"sections.x\" (pick)=\"onSectionPick('x', $event)\"></viz-section-pane>\n    </div>\n    <div class=\"viz-cell viz-cell-y\">\n      <viz-section-pane axis=\"y\" [view]=\"sections.y\" (pick)=\"onSectionPick('y', $event)\"></viz-section-pane>\n    </div>\n    <div\n      class=\"viz-pane-divider viz-pane-divider-v\"\n      role=\"separator\"\n      aria-orientation=\"vertical\"\n      aria-label=\"Resize the panes across\"\n      [attr.aria-valuenow]=\"splitX\"\n      aria-valuemin=\"20\"\n      aria-valuemax=\"80\"\n      tabindex=\"0\"\n      (pointerdown)=\"startPaneResize($event, 'x')\"\n      (keydown)=\"nudgePaneSize($event, 'x')\"\n    ></div>\n    <div\n      class=\"viz-pane-divider viz-pane-divider-h\"\n      role=\"separator\"\n      aria-orientation=\"horizontal\"\n      aria-label=\"Resize the panes down\"\n      [attr.aria-valuenow]=\"splitY\"\n      aria-valuemin=\"20\"\n      aria-valuemax=\"80\"\n      tabindex=\"0\"\n      (pointerdown)=\"startPaneResize($event, 'y')\"\n      (keydown)=\"nudgePaneSize($event, 'y')\"\n    ></div>\n  </ng-container>\n  <div class=\"w-full relative viz-plot\" [id]=\"plotDivName\">\n    <div *ngIf=\"imgLoading() || stackLoading() || isCaching()\" class=\"loading-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\n        *ngIf=\"stackLoading() || imgLoading()\"\n        class=\"cancel-loading\"\n        label=\"Cancel\"\n        (onClick)=\"cancelLoading()\"\n      >\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=\"render.sharpening && !imgLoading() && !stackLoading() && !isCaching()\" class=\"sharpening-overlay\">\n      <div class=\"spinner\"></div>\n      <span class=\"text-loading\">Sharpening preview...</span>\n    </div>\n  </div>\n</div>\n\n<!-- Floating, draggable intensity-profile inset, shown while any intensity line\n     exists. Kept OUTSIDE the plot div and fixed to the viewport, so it floats over\n     the whole page rather than being clipped to the canvas. -->\n<viz-intensity-inset\n  [divId]=\"intensityInsetDiv\"\n  [plotDivName]=\"plotDivName\"\n  [zIndex]=\"zIndex\"\n  [imageView]=\"isImageView\"\n  [imageInfo]=\"imageInfo\"\n></viz-intensity-inset>\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\n  *ngIf=\"plotModePanel as panel\"\n  [header]=\"panel.title\"\n  [visible]=\"true\"\n  [modal]=\"false\"\n  [closable]=\"false\"\n  [resizable]=\"true\"\n  [draggable]=\"true\"\n  appendTo=\"body\"\n  position=\"right\"\n  styleClass=\"plot-mode-panel\"\n  [style]=\"{ width: '22rem', maxHeight: '85vh' }\"\n  [contentStyle]=\"{ overflow: 'auto' }\"\n>\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\n  *ngIf=\"toolDialog as dlg\"\n  [header]=\"dlg.title\"\n  [visible]=\"true\"\n  (visibleChange)=\"$event || closeDialogTool()\"\n  [modal]=\"false\"\n  [closable]=\"true\"\n  [resizable]=\"true\"\n  [draggable]=\"true\"\n  appendTo=\"body\"\n  position=\"right\"\n  styleClass=\"tool-dialog\"\n  [style]=\"{ width: dlg.width, maxHeight: '85vh' }\"\n  [contentStyle]=\"{ overflow: 'auto' }\"\n>\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\n  header=\"Region Editor\"\n  [(visible)]=\"showRegionEditor\"\n  [modal]=\"false\"\n  [resizable]=\"true\"\n  [draggable]=\"true\"\n  [maximizable]=\"true\"\n  appendTo=\"body\"\n  position=\"right\"\n  [style]=\"{ width: regionEditorWidth, height: '85vh' }\"\n  [contentStyle]=\"{ overflow: 'auto' }\"\n>\n  <region-editor [active]=\"showRegionEditor\"></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\n  header=\"Simplify region(s)\"\n  [(visible)]=\"displaySimplifyDialog\"\n  [modal]=\"true\"\n  [style]=\"{ width: '22rem' }\"\n  [draggable]=\"false\"\n  [resizable]=\"false\"\n>\n  <div class=\"flex flex-column gap-2\">\n    <span\n      >Altitude threshold: <b>{{ regionActions.simplifyThreshold }} px</b></span\n    >\n    <p-slider [(ngModel)]=\"regionActions.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\n      label=\"Apply\"\n      icon=\"pi pi-check\"\n      (onClick)=\"simplifyRegions(regionActions.simplifyThreshold)\"\n    ></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\n  *ngIf=\"toolParams.openParams as open\"\n  [header]=\"open.tool.label + ' parameters'\"\n  [visible]=\"true\"\n  (visibleChange)=\"closeToolParams()\"\n  [modal]=\"true\"\n  [style]=\"{ width: '30rem' }\"\n  [draggable]=\"false\"\n  [resizable]=\"false\"\n  appendTo=\"body\"\n>\n  <div class=\"grid formgrid p-fluid\">\n    <ng-container *ngFor=\"let f of open.fields\">\n      <div class=\"field\" [ngClass]=\"f.spec.type === 'boolean' ? 'col-12' : 'col-6'\">\n        <ng-container *ngIf=\"f.number as n\">\n          <label class=\"text-sm\" [pTooltip]=\"n.tooltip || ''\">{{ n.label }}</label>\n          <p-inputNumber\n            [ngModel]=\"open.values[n.id]\"\n            (ngModelChange)=\"open.values[n.id] = $event\"\n            [min]=\"n.min\"\n            [max]=\"n.max\"\n            [step]=\"n.step\"\n            [minFractionDigits]=\"n.fractionDigits\"\n            [showButtons]=\"true\"\n          ></p-inputNumber>\n        </ng-container>\n\n        <ng-container *ngIf=\"f.select as sel\">\n          <label class=\"text-sm\" [pTooltip]=\"sel.tooltip || ''\">{{ sel.label }}</label>\n          <p-dropdown\n            [options]=\"sel.options\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            [ngModel]=\"open.values[sel.id]\"\n            (ngModelChange)=\"open.values[sel.id] = $event\"\n            appendTo=\"body\"\n          ></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 *ngIf=\"f.spec.type === 'boolean'\" class=\"flex align-items-center gap-2\">\n          <p-checkbox\n            [ngModel]=\"open.values[f.spec.id]\"\n            (ngModelChange)=\"open.values[f.spec.id] = $event\"\n            [binary]=\"true\"\n            [inputId]=\"open.tool.id + '-' + f.spec.id\"\n          ></p-checkbox>\n          <label [for]=\"open.tool.id + '-' + f.spec.id\" class=\"text-sm mb-0\" [pTooltip]=\"f.spec.tooltip || ''\">{{\n            f.spec.label\n          }}</label>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n  <ng-template pTemplate=\"footer\">\n    <p-button\n      label=\"Reset to model defaults\"\n      [text]=\"true\"\n      size=\"small\"\n      (onClick)=\"resetToolParams(open.tool.id)\"\n    ></p-button>\n    <p-button label=\"Close\" size=\"small\" (onClick)=\"closeToolParams()\"></p-button>\n  </ng-template>\n</p-dialog>\n", styles: [":host{display:flex;flex-direction:column;height:100%;overflow:hidden}.viz-panes{flex:1;min-height:0;display:flex}.viz-plot{flex:1 1 0;min-width:0;min-height:0;height:auto!important}.viz-panes.viz-quad{display:grid}.viz-panes.viz-quad>.viz-plot{grid-area:1/1/2/2;min-height:0;overflow:hidden}.viz-cell{position:relative;min-width:0;min-height:0;overflow:hidden}.viz-cell-z{grid-area:1/3/2/4}.viz-cell-x{grid-area:3/1/4/2}.viz-cell-y{grid-area:3/3/4/4}.viz-slice-pane{position:absolute;inset:0}.viz-pane-badge{position:absolute;top:6px;left:6px;z-index:10;padding:1px 8px;border-radius:4px;color:#fff;font:600 12px/1.6 system-ui,sans-serif;pointer-events:none}.viz-pane-badge-z{background:#668cff}.viz-pane-divider{background:var(--surface-border, #cccccc);touch-action:none}.viz-pane-divider:hover,.viz-pane-divider:focus-visible{background:var(--primary-color, #3b82f6);outline:none}.viz-pane-divider-v{grid-area:1/2/4/3;cursor:col-resize}.viz-pane-divider-h{grid-area:2/1/3/4;cursor:row-resize}.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}.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%}.loading-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 .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)}::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%)}:host ::ng-deep .sam-progress .p-progressbar-value{transition:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: SharedModule }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.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: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$2.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: "ngmodule", type: ContextMenuModule }, { kind: "component", type: i11$1.ContextMenu, selector: "p-contextMenu", inputs: ["model", "triggerEvent", "target", "global", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "id", "ariaLabel", "ariaLabelledBy", "pressDelay"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i5.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: "ngmodule", type: DropdownModule }, { kind: "component", type: i5$2.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: "ngmodule", type: InputNumberModule }, { kind: "component", type: i6$1.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: "ngmodule", type: ProgressBarModule }, { kind: "component", type: i7$1.ProgressBar, selector: "p-progressBar", inputs: ["value", "showValue", "styleClass", "style", "unit", "mode", "color"] }, { kind: "ngmodule", type: SliderModule }, { kind: "component", type: i8.Slider, selector: "p-slider", inputs: ["animate", "disabled", "min", "max", "orientation", "step", "range", "style", "styleClass", "ariaLabel", "ariaLabelledBy", "tabindex", "autofocus"], outputs: ["onChange", "onSlideEnd"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i18.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: FloatingDragDirective, selector: "[vizFloatingDrag]", inputs: ["vizFloatingDrag"], outputs: ["vizFloatingDragMove"] }, { kind: "component", type: ToolbarComponent, selector: "plotting-toolbar", inputs: ["imageInfo", "hasSpatialDataset", "plotTypeOptions", "selectedPlotType", "basePlotType", "isoRange", "maxIndex", "zIndex", "isHeatmap", "is3dRegions", "isVolumeView", "sliceEditor", "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", "toggleSliceEditor", "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: IntensityInsetComponent, selector: "viz-intensity-inset", inputs: ["divId", "plotDivName", "zIndex", "imageView", "imageInfo"] }, { kind: "component", type: SectionPaneComponent, selector: "viz-section-pane", inputs: ["axis", "view"], outputs: ["pick"] }, { kind: "component", type: ChannelHistogramComponent, selector: "channel-histogram", inputs: ["visible"], outputs: ["visibleChange"] }, { kind: "component", type: SpatialControlsComponent, selector: "spatial-controls", inputs: ["visible", "is3d"], outputs: ["visibleChange"] }, { kind: "component", type: RegionEditorComponent, selector: "region-editor", inputs: ["active"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: VisualizerComponent, decorators: [{
             type: Component,
@@ -44186,13 +44400,10 @@ class CellLayers {
         let nuclei = null;
         let geometryKey;
         if (tiled) {
-            const both = view.cellSet === 'both';
-            const set = !both && view.cellSet && tiled.sets.some((s) => s.name === view.cellSet)
-                ? view.cellSet
-                : (tiled.defaultSet ?? tiled.sets[0]?.name);
-            if (!set)
+            const drawn = drawnCellSets(tiled, view.cellSet);
+            if (!drawn)
                 return null;
-            const nucleusSet = both ? tiled.sets.find((s) => s.name !== set)?.name : undefined;
+            const { set, nucleusSet } = drawn;
             const keys = tilesInRect(rect, level, tiled.levels, tiled.bounds, MAX_CELL_TILES);
             geometryKey = `${dataset.id}|${set}|${nucleusSet ?? ''}|${hiddenKey}|${keys.map(tileId).join(',')}`;
             if (geometryKey === this.cellGeometryKey && this.currentRings) {
@@ -46590,11 +46801,56 @@ function gatherSymbols(symbols, indices) {
     return Uint8Array.from(indices, (i) => symbols[i]);
 }
 
+/** The least Z stretch: a tenth of the true depth. */
+const SPATIAL_Z_SCALE_MIN = 0.1;
+/** The most Z stretch a cloud allows, at least: the Volume view's. */
+const SPATIAL_Z_SCALE_MAX = 10;
+/** Nor more than this, however thin the cloud is. */
+const SPATIAL_Z_SCALE_CEILING = 1000;
+/**
+ * The most a box's Z may be stretched: until it is twice as deep as it is wide, so even a section
+ * microns thick and millimetres wide can be stood up into a block — but never less than the
+ * Volume view's 10x, nor more than {@link SPATIAL_Z_SCALE_CEILING}.
+ */
+function spatialZScaleMax(box) {
+    const flat = (2 * Math.max(box.width, box.height)) / Math.max(box.depth, 1e-9);
+    return Math.min(SPATIAL_Z_SCALE_CEILING, Math.max(SPATIAL_Z_SCALE_MAX, flat));
+}
+/**
+ * The Z handle's drag (px) per doubling: the Volume view's 180 px, less when the range is wider,
+ * so going from the true depth to the most stretch is about the same drag (~540 px) either way.
+ */
+function spatialZPixelsPerDouble(maxScale) {
+    return Math.max(60, Math.min(180, 540 / Math.log2(Math.max(2, maxScale))));
+}
+/**
+ * The X/Y/Z axis-end labels for a box (as drawn: Z stretched by `zScale`), its true lengths in µm
+ * when the dataset declares `micronsPerUnit`, else in its own units. A stretched Z says by how much,
+ * so its length is never read off the drawing.
+ */
+function spatialAxesLabels(drawn, zScale, micronsPerUnit) {
+    const hx = drawn.width / 2;
+    const hy = drawn.height / 2;
+    const hz = drawn.depth / 2;
+    const mpu = micronsPerUnit && micronsPerUnit > 0 ? micronsPerUnit : 0;
+    const len = (n) => (mpu ? formatLength(n * mpu, 'µm') : `${+n.toPrecision(3)} units`);
+    const stretch = Math.abs(zScale - 1) > 1e-3 ? ` (×${+zScale.toPrecision(3)})` : '';
+    return [
+        { anchor: [hx, -hy, -hz], text: `X · ${len(drawn.width)}`, color: '#ed4545' },
+        { anchor: [-hx, hy, -hz], text: `Y · ${len(drawn.height)}`, color: '#4dd959' },
+        { anchor: [-hx, -hy, hz], text: `Z · ${len(drawn.depth / zScale)}${stretch}`, color: '#668cff' },
+    ];
+}
 /**
  * SPATIAL_OMICS_3D (review Appendix B, cluster K): observations as a 3D point cloud under the
  * orbit camera, with the dataset's reference volume around it, per-cluster density volumes and the
  * 3D gene map.
  *
+ * Everything sits in one box centred on the world origin (see {@link ensureFrame}): the reference
+ * volume's, else the density grid's. The Volume view's axes gizmo and Z-height handle are drawn on
+ * it, and the handle stretches Z: the cloud through its `scale3d`, every volume through its voxel
+ * size, so nothing is re-uploaded while dragging (see {@link setZScale}).
+ *
  * Thinner than the 2D scene: there is no tissue image to render (a registered volume like the
  * Allen CCF has no single reference plane), so no readback and no navigator; the 3D scale bar
  * follows the dataset (see {@link installScaleBar}). The region tools work in SCREEN space through
@@ -46635,6 +46891,14 @@ class Spatial3dScene extends SpatialSceneBase {
         this.geneMapKey = null;
         /** Offset applied to observation coordinates to sit them in the volume's box. */
         this.origin = [0, 0, 0];
+        /** The box everything sits in, before the Z stretch, centred on the origin (see ensureFrame). */
+        this.box = null;
+        this.boxKey = null;
+        /** The axes gizmo on {@link box} and the handle that stretches its Z (see setZScale). */
+        this.gizmo = null;
+        this.zHandle = null;
+        /** Each volume layer's own voxel size, before the Z stretch. */
+        this.baseVoxels = new WeakMap();
         /**
          * napari-js's depth-aware pick over the cloud, and the projection the ROI selection reads. It
          * owns the caching policy: re-project lazily, on the first pick after the camera, the canvas or
@@ -46691,7 +46955,7 @@ class Spatial3dScene extends SpatialSceneBase {
         const [vx, vy, vz] = meta.voxelSize;
         this.regionMeshes.setFrame({
             size: [meta.width, meta.height, meta.depth],
-            world: [meta.width * vx, meta.height * vy, meta.depth * vz],
+            world: [meta.width * vx, meta.height * vy, meta.depth * vz * this.zScale()],
         });
     }
     /**
@@ -46729,6 +46993,63 @@ class Spatial3dScene extends SpatialSceneBase {
     histogram() {
         return null;
     }
+    /** The toolbar's 3D controls, as the Volume view's: drag mode, re-framing and the axes. */
+    surface3dControls() {
+        return surface3dControls(this.ctx, () => this.gizmo);
+    }
+    /**
+     * Stretch Z by `factor` (1 = the data's true proportions), as the Z handle drags it: the cloud
+     * through its `scale3d`, each volume through its voxel size, the axes and the region surfaces
+     * with them — all about the world origin, which the box is centred on, so they stay aligned.
+     * Nothing is re-uploaded. Kept in the settings, so a re-plot keeps it.
+     */
+    setZScale(factor) {
+        const max = this.box ? spatialZScaleMax(this.box) : SPATIAL_Z_SCALE_MAX;
+        this.ctx.settings.spatialZScale = Math.min(max, Math.max(SPATIAL_Z_SCALE_MIN, factor));
+        this.applyZScale();
+    }
+    /** The Z stretch in effect: the setting, within what this box allows. */
+    zScale() {
+        const max = this.box ? spatialZScaleMax(this.box) : SPATIAL_Z_SCALE_MAX;
+        const s = this.ctx.settings.spatialZScale;
+        return Math.min(max, Math.max(SPATIAL_Z_SCALE_MIN, s > 0 ? s : 1));
+    }
+    applyZScale() {
+        const s = this.zScale();
+        if (this.points)
+            this.points.scale3d = [1, 1, s];
+        for (const layer of [this.volume, this.geneMapLayer, ...this.densityLayers]) {
+            const base = layer && this.baseVoxels.get(layer);
+            if (layer && base)
+                layer.voxelSize = [base[0], base[1], base[2] * s];
+        }
+        const dataset = this.session.latest?.[0];
+        if (this.gizmo && this.box) {
+            const drawn = this.drawnBox(this.box);
+            this.gizmo.setDepth(drawn.depth, spatialAxesLabels(drawn, s, dataset?.micronsPerUnit));
+        }
+        this.zHandle?.reposition();
+        if (dataset)
+            this.placeRegionMeshes(dataset);
+        this.ctx.viewer.requestRender();
+    }
+    /** `box` with its Z stretched as drawn. */
+    drawnBox(box) {
+        return { width: box.width, height: box.height, depth: box.depth * this.zScale() };
+    }
+    /**
+     * Add a volume layer with its Z stretched as the rest of the scene is, remembering its own
+     * voxel size so a later stretch can be applied to it.
+     */
+    addVolume(viewer, data, width, height, depth, opts) {
+        const [vx, vy, vz] = opts.voxelSize;
+        const layer = viewer.addVolume(data, width, height, depth, {
+            ...opts,
+            voxelSize: [vx, vy, vz * this.zScale()],
+        });
+        this.baseVoxels.set(layer, [vx, vy, vz]);
+        return layer;
+    }
     /**
      * Every observation's position on the canvas under the current 3D camera (for the ROI
      * selection), indexed by observation with NaN for anything not drawn. Null before the cloud
@@ -46766,6 +47087,7 @@ class Spatial3dScene extends SpatialSceneBase {
         this.geneMapLoads.cancel();
         this.scaleBar?.dispose();
         this.scaleBar = null;
+        this.removeAxes();
         // Drop the cached interleaved coordinates too: holding 3.7M x 3 floats after
         // a teardown is ~45MB of retained heap for a scene that no longer exists.
         this.positions = null;
@@ -46878,8 +47200,9 @@ class Spatial3dScene extends SpatialSceneBase {
         await this.ensureVolume(viewer, dataset, view);
         if (!task())
             return;
-        // Then the cluster density volumes, which can set the centring offset when
-        // there is no reference volume — so before any position is computed from it.
+        // The box everything sits in, before any position is computed from its centring offset.
+        this.ensureFrame(dataset);
+        // Then the cluster density volumes.
         await this.ensureDensityVolumes(viewer, dataset, view, selection);
         if (!task())
             return;
@@ -46938,6 +47261,7 @@ class Spatial3dScene extends SpatialSceneBase {
             this.scalarKey = scalarKey;
             this.points = viewer.addPoints3D(this.positions, valuesFor(), {
                 name: 'observations',
+                scale3d: [1, 1, this.zScale()],
                 colormap,
                 contrastLimits,
                 size,
@@ -47146,7 +47470,7 @@ class Spatial3dScene extends SpatialSceneBase {
         const lo = 0;
         const data = encodeExpressionVolume(field, [lo, hi], { log: view.logScale });
         const lut = this.ctx.display.spatialLut(view);
-        this.geneMapLayer = viewer.addVolume(data, field.width, field.height, field.depth, {
+        this.geneMapLayer = this.addVolume(viewer, data, field.width, field.height, field.depth, {
             name: `gene map · ${gene}${interpolate ? ' · volume' : ''}`,
             colormap: colormapFromLut(`gene-map-${gene}`, lut),
             // The encoding already applied the window, so the layer must not apply a
@@ -47202,21 +47526,10 @@ class Spatial3dScene extends SpatialSceneBase {
         const load = this.densityLoads.next();
         if (!key)
             return;
+        // The density box is the scene's box (ensureFrame), so the cloud already sits in it.
         const grid = densityGrid(dataset);
         if (!grid)
             return;
-        // With no reference volume there is no offset yet, and a VolumeLayer has no
-        // translate — napari centres its box on the world origin. So the POINTS move by
-        // half the density box, exactly as they do for a reference volume, and the
-        // cached geometry is invalidated because that offset just changed.
-        if (!this.volume) {
-            this.origin = [
-                -(grid.width * grid.voxelSize[0]) / 2,
-                -(grid.height * grid.voxelSize[1]) / 2,
-                -(grid.depth * grid.voxelSize[2]) / 2,
-            ];
-            this.layerKey = null;
-        }
         let groups;
         try {
             groups = await this.densityGroups(dataset, column, selection);
@@ -47255,7 +47568,7 @@ class Spatial3dScene extends SpatialSceneBase {
             // A cluster with nothing on the grid draws no layer, rather than an empty box.
             if (!data)
                 return;
-            this.densityLayers.push(viewer.addVolume(data, grid.width, grid.height, grid.depth, {
+            this.densityLayers.push(this.addVolume(viewer, data, grid.width, grid.height, grid.depth, {
                 name: `density · ${group.name}`,
                 colormap: this.ctx.display.channelTintColormap(group.color),
                 invert: this.ctx.display.invert,
@@ -47289,16 +47602,11 @@ class Spatial3dScene extends SpatialSceneBase {
         return rankDensityGroups(column, loaded, dataset.observations.count, selection);
     }
     /**
-     * Add (or keep) the dataset's reference volume, and derive the offset that sits the
-     * observations inside it.
-     *
-     * `VolumeLayer` has no translate: napari-js maps the volume's unit cube to a world box
-     * **centred on the origin**, sized `dims x voxelSize`. The observations, by contract, are in
-     * the volume's own frame with its near corner at the coordinate origin. So the two only line
-     * up if the POINTS move — by half the box — which is what {@link origin} is.
+     * Add (or keep) the dataset's reference volume. The offset that sits the observations inside
+     * it is {@link ensureFrame}'s.
      *
-     * A failed or absent volume is not fatal: the cloud renders on its own, at its own
-     * coordinates, and the camera frames the points instead.
+     * A failed or absent volume is not fatal: the cloud renders on its own, in the same box, and
+     * the camera frames the points instead.
      */
     async ensureVolume(viewer, dataset, view) {
         const meta = dataset.volume;
@@ -47313,7 +47621,6 @@ class Spatial3dScene extends SpatialSceneBase {
         }
         // The surfaces sat in the volume just removed (or there was none): down until one is placed.
         this.regionMeshes.clearFrame();
-        this.origin = [0, 0, 0];
         if (!meta || !port?.getVolume)
             return;
         let voxels;
@@ -47328,7 +47635,7 @@ class Spatial3dScene extends SpatialSceneBase {
             return;
         const [vx, vy, vz] = meta.voxelSize;
         this.volumeKey = key;
-        this.volume = viewer.addVolume(voxels, meta.width, meta.height, meta.depth, {
+        this.volume = this.addVolume(viewer, voxels, meta.width, meta.height, meta.depth, {
             name: 'reference volume',
             colormap: 'gray',
             // MIP would draw the brightest voxel along each ray, which for an averaged
@@ -47341,12 +47648,80 @@ class Spatial3dScene extends SpatialSceneBase {
         });
         if (this.regionsThrough)
             this.volume.blending = 'translucent_no_depth';
-        // Half the box, negated: the observations' origin is the box's near corner,
-        // and the box is centred on the world origin.
-        this.origin = [-(meta.width * vx) / 2, -(meta.height * vy) / 2, -(meta.depth * vz) / 2];
         this.placeRegionMeshes(dataset);
+    }
+    /**
+     * The box everything sits in, centred on the world origin, and the offset that sits the
+     * observations in it; with the axes gizmo and the Z handle on it.
+     *
+     * `VolumeLayer` has no translate: napari-js maps a volume's unit cube to a world box centred on
+     * the origin, sized `dims x voxelSize`. The observations, by contract, are in the reference
+     * volume's frame with its near corner at the coordinate origin, and the density grid is measured
+     * from the coordinate origin the same way (`densityGrid`), so its box is the reference volume's
+     * when there is one. So the POINTS move by half that box — {@link origin} — and every volume, the
+     * reference, the densities and the gene map, lines up with them and with each other. Without a
+     * reference volume this centres the cloud too, which the axes and the Z stretch need: both work
+     * about the origin.
+     */
+    ensureFrame(dataset) {
+        const meta = dataset.volume;
+        const key = `${dataset.id}:${dataset.observations.count}:${meta ? `${meta.width}x${meta.height}x${meta.depth}` : '-'}`;
+        if (key === this.boxKey)
+            return;
+        this.boxKey = key;
+        const grid = densityGrid(dataset);
+        this.box = grid
+            ? {
+                width: grid.width * grid.voxelSize[0],
+                height: grid.height * grid.voxelSize[1],
+                depth: grid.depth * grid.voxelSize[2],
+            }
+            : null;
+        const box = this.box;
+        this.origin = box ? [-box.width / 2, -box.height / 2, -box.depth / 2] : [0, 0, 0];
         // Force a geometry rebuild: the offset changed, so cached positions are stale.
         this.layerKey = null;
+        this.installAxes(dataset);
+        // A stretch chosen for another box may be past what this one allows: draw what is in effect.
+        this.applyZScale();
+    }
+    /**
+     * The Volume view's axes gizmo and Z-height handle, on {@link box}. The handle floats past the
+     * top of the Z axis (the box's min-XY corner, where the blue axis and its label are), by a share
+     * of the box's largest side rather than of its depth, so it clears the label even while a thin
+     * section is drawn flat.
+     */
+    installAxes(dataset) {
+        this.removeAxes();
+        const box = this.box;
+        if (!box)
+            return;
+        const { viewer, host, settings } = this.ctx;
+        const drawn = this.drawnBox(box);
+        this.gizmo = new Axes3dGizmo(viewer, host, drawn, spatialAxesLabels(drawn, this.zScale(), dataset.micronsPerUnit), {
+            visible: settings.axesVisible,
+        });
+        const maxScale = spatialZScaleMax(box);
+        this.zHandle = new NapariVolumeZHandle(host, viewer.camera3d, {
+            topAnchor: () => {
+                const d = this.drawnBox(box);
+                return [-d.width / 2, -d.height / 2, d.depth / 2 + 0.08 * Math.max(d.width, d.height, d.depth)];
+            },
+            getScale: () => this.zScale(),
+            setScale: (s) => this.setZScale(s),
+            minScale: SPATIAL_Z_SCALE_MIN,
+            maxScale,
+            pixelsPerDouble: spatialZPixelsPerDouble(maxScale),
+        });
+    }
+    removeAxes() {
+        if (this.gizmo) {
+            this.ctx.viewer.layers.remove(this.gizmo.layer);
+            this.gizmo.destroy();
+            this.gizmo = null;
+        }
+        this.zHandle?.destroy();
+        this.zHandle = null;
     }
     /** Drop every layer of the cloud (the dataset went away, or has no z). */
     removeLayers(viewer) {
@@ -47368,6 +47743,9 @@ class Spatial3dScene extends SpatialSceneBase {
         this.volume = null;
         this.volumeKey = null;
         this.origin = [0, 0, 0];
+        this.box = null;
+        this.boxKey = null;
+        this.removeAxes();
         this.points = null;
         this.setPicker(null);
         this.layerKey = null;
@@ -47543,6 +47921,7 @@ class NapariVisualizerService extends BaseStoreVisualizer {
             axesVisible: true,
             surfaceWireframe: false,
             volumeZScale: 1,
+            spatialZScale: 1,
         };
         /**
          * Frame loading (volume assembly, surface preload): aborted by {@link reset} AND by
@@ -50043,4 +50422,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
  */
 
 export { SupersededError as $, ALL_GENES as A, Polygon as B, CANVAS_TOOL_IDS as C, DEFAULT_CATEGORICAL_PALETTE as D, ProcessingImage as E, REGION_IO_PORT as F, REGION_SOURCE_MIN_CHARS as G, HexColorPickerComponent as H, IMAGE_STATE_PORT as I, Rectangle as J, Region as K, LUT_COLORS as L, MISSING_COLOR as M, NAPARI_DECIMATE_OPTIONS as N, RegionEditorComponent as O, PLOT_MODE_CONTEXT as P, RoutingVisualizerService as Q, REGION_EDITOR_API as R, SAM_MODELS as S, SEMANTIC_SEGMENTER as T, SPATIAL_DATA_PORT as U, SPATIAL_WIRE_VERSION as V, ShapeSelection as W, SpatialChartsComponent as X, SpatialControlsComponent as Y, SpatialDataHttpService as Z, SpatialSelectionStore as _, runDecoder as a, omicsLayout as a$, TILE_ACCESS_PORT as a0, TOOLBAR_TOOLS as a1, VISUALIZER as a2, VIZ_ALERT_TOAST_KEY as a3, VIZ_CONFIG as a4, VIZ_TOAST_KEY as a5, ViewerFeature as a6, VisualizationModule as a7, VisualizerComponent as a8, assertManifestVersion as a9, hydrateBounds as aA, importFile as aB, isBuiltinPlotType as aC, isCanvasToolId as aD, isCategoricalColumn as aE, isContinuousColumn as aF, isDialogToolContribution as aG, isEmptyPresetSet as aH, isLabelVolumeName as aI, isLittleEndian as aJ, isNapari3d as aK, isNapariIsosurface as aL, isNapariScatter as aM, isNapariScatter3d as aN, isNapariSurface as aO, isNapariVolume as aP, isSamModelReady as aQ, isSpatialOmics as aR, isSpatialOmics3d as aS, isThreeDimensional as aT, isZipName as aU, labelClasses as aV, labelSliceGeoJson as aW, lutFor as aX, markerDiameters as aY, maskToIndices as aZ, mutedFromSelection as a_, benefitsFromGrouping as aa, buildOmicsTraces as ab, capabilitiesOf as ac, clearSamModelCache as ad, contrastWindow as ae, contributedPlotTypeOption as af, countMask as ag, cropImage as ah, datasetFromManifest as ai, decodeColumn as aj, decodeCoords as ak, decodeFeatureVector as al, decodePolygons as am, decodeRadius as an, defaultChannelVisible as ao, defaultPresetSet as ap, dialogToolContributions as aq, emptySelection as ar, encodeCategorical as as, encodeContinuous as at, expandZips as au, findColumnMeta as av, getDefaultSamModelId as aw, getPlotTypeDescriptor as ax, getSamModel as ay, hasZarrMetadata as az, ALL_TOOLBAR_TOOLS as b, openAnnotations as b0, openGeoJsonRegionSource as b1, openHttpRegionSource as b2, parsePresetSet as b3, planRegionImport as b4, pointInRing as b5, provideVisualization as b6, readAnnotationSlices as b7, readLabelVolume as b8, readOmeZarrLabels as b9, readZip as ba, rendererOwnsWheel as bb, resolveCategoryColors as bc, selectByCategory as bd, selectInRegions as be, setDefaultSamModel as bf, setOrtWasmBase as bg, setSamModelUrls as bh, sortToolContributions as bi, visibleToolContributions as bj, ANNOTATION_IMAGE_MAX_DIM as c, CELL_SEGMENTER as d, CHANNEL_HISTOGRAM_API as e, fetchModel as f, getOrtWasmBase as g, CellposeSegmenterService as h, ChannelHistogramComponent as i, DEFAULT_FALLBACK_PALETTE as j, DEFAULT_MUTED_OPACITY as k, DEFAULT_SAM_MODEL_ID as l, DEFAULT_SPATIAL_VIEW as m, DEFAULT_VISIBLE_CHANNELS as n, INSTANCE_SEGMENTER as o, ImageConverterService as p, MultiPolygon as q, runEncoder as r, NAPARI_DEFAULT_DECIMATE as s, NO_CATEGORY as t, NO_OBSERVATION as u, PLOT_MODE_SESSION as v, PLOT_TYPE_CONTRIBUTIONS as w, PLOT_TYPE_DESCRIPTORS as x, PREFERENCES_PORT as y, PlotType as z };
-//# sourceMappingURL=jax-data-science-sci-image-visualizer-jax-data-science-sci-image-visualizer-DvFp1jNH.mjs.map
+//# sourceMappingURL=jax-data-science-sci-image-visualizer-jax-data-science-sci-image-visualizer-CYsPzX3J.mjs.map