@jax-data-science/sci-image-visualizer 0.14.0 → 0.15.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-qUeMuBb0.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-U1ODcfYD.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,
@@ -15488,7 +15507,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 +15608,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 +17393,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 +17580,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 +17628,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 +17743,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 +17977,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 +17994,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 +21452,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 +21493,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 +22931,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 +22947,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 +22961,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 +22977,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 +23026,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 +23035,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: [{
@@ -24089,7 +24261,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 +24635,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 +26222,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 +44358,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) {
@@ -50043,4 +50212,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-qUeMuBb0.mjs.map