@jax-data-science/sci-image-visualizer 0.15.0 → 0.17.0

package/fesm2022/{jax-data-science-sci-image-visualizer-jax-data-science-sci-image-visualizer-qUeMuBb0.mjs → jax-data-science-sci-image-visualizer-jax-data-science-sci-image-visualizer-DHrHO2ay.mjs}

@@ -729,6 +729,7 @@ const DEFAULT_SPATIAL_VIEW = {
     transcriptGenes: [],
     transcriptHiddenGenes: [],
     transcriptGeneColors: {},
+    groupColors: {},
     transcriptGeneGroups: [],
     transcriptAllGenes: false,
     transcriptAllGenesHidden: [],
@@ -2831,6 +2832,23 @@ function resolveCategoryColors(meta, palette = DEFAULT_CATEGORICAL_PALETTE) {
         return fallbackColorFor(name, palette);
     });
 }
+/**
+ * Categorical column `column`'s colours ({@link resolveCategoryColors}) with the user's choices
+ * for its groups over them. Every place a grouping is coloured goes through this, so a group
+ * recoloured in the list is that colour on the cells, the markers, the legend and the charts.
+ */
+function categoryColorsFor(column, meta, overrides) {
+    const base = resolveCategoryColors(meta);
+    const own = overrides?.[column];
+    if (!own)
+        return base;
+    return meta.categories.map((name, i) => own[name] || base[i]);
+}
+/** What a cache keyed on a grouping's colours must include of the user's choices for it. */
+function groupColorsKey(column, overrides) {
+    const own = column ? overrides?.[column] : undefined;
+    return own ? JSON.stringify(own) : '';
+}
 /** Categorical column → flat per-point RGBA (length `4 * codes.length`). */
 function encodeCategorical(codes, opts) {
     const n = codes.length;
@@ -10580,7 +10598,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-U1ODcfYD.mjs');
+    const { OnnxSamSession } = await import('./jax-data-science-sci-image-visualizer-onnx-sam-session-CKEUwNta.mjs');
     return new OnnxSamSession();
 };
 /** Thrown inside a load that a model switch superseded. */
@@ -13348,12 +13366,12 @@ class ViewControlsComponent {
         this.activeDragMode = null;
         /** The 3D camera mode (`turntable` / `orbit` / …). */
         this.activeSurface3dMode = 'turntable';
-        /** A napari-js WebGPU view (axes toggle, napari camera). */
-        this.isNapariMode = false;
         /** The napari-js surface (shows the wireframe toggle). */
         this.isNapariSurfaceMode = false;
         /** A napari-js 3D view (shows the Resolution dropdown). */
         this.isNapari3dMode = false;
+        /** Whether the view draws the 3D axes gizmo (shows its toggle). */
+        this.axesToggle = false;
         /** The napari 3D axes gizmo is shown. */
         this.axesVisible = true;
         /** The napari surface wireframe is on. */
@@ -13380,11 +13398,11 @@ class ViewControlsComponent {
         this.decimateOptions = NAPARI_DECIMATE_OPTIONS;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ViewControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ViewControlsComponent, isStandalone: true, selector: "toolbar-view-controls", inputs: { isHeatmap: "isHeatmap", zoomTools: "zoomTools", isImageView: "isImageView", activeDragMode: "activeDragMode", activeSurface3dMode: "activeSurface3dMode", isNapariMode: "isNapariMode", isNapariSurfaceMode: "isNapariSurfaceMode", isNapari3dMode: "isNapari3dMode", axesVisible: "axesVisible", wireframeActive: "wireframeActive", resolutionScale: "resolutionScale" }, outputs: { toggleDragMode: "toggleDragMode", zoomIn: "zoomIn", zoomOut: "zoomOut", toggleSurface3dMode: "toggleSurface3dMode", resetSurfaceCamera: "resetSurfaceCamera", toggleAxes: "toggleAxes", toggleWireframe: "toggleWireframe", selectResolution: "selectResolution" }, ngImport: i0, template: "<!-- Zoom tools. Plotly rubber-band drag-zoom: on OpenSeadragon the box-zoom\n     covers this and a bare drag pans natively, so it's hidden in image view. -->\n<ng-container *ngIf=\"isHeatmap && zoomTools\">\n  <span class=\"toolbar-separator\"></span>\n  <p-button\n    *ngIf=\"!isImageView\"\n    icon=\"pi pi-search\"\n    size=\"small\"\n    [text]=\"activeDragMode !== 'zoom'\"\n    ariaLabel=\"Zoom drag\"\n    pTooltip=\"Zoom drag\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleDragMode.emit('zoom')\"\n  >\n  </p-button>\n  <p-button\n    size=\"small\"\n    [text]=\"activeDragMode !== 'zoomToBox'\"\n    ariaLabel=\"Zoom box\"\n    pTooltip=\"Zoom box (<kbd>b</kbd>)\"\n    [escape]=\"false\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleDragMode.emit('zoomToBox')\"\n  >\n    <img\n      src=\"assets/plotting/zoom-box.svg\"\n      [class]=\"activeDragMode === 'zoomToBox' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n      style=\"width: 1rem\"\n    />\n  </p-button>\n  <p-button\n    icon=\"pi pi-arrows-alt\"\n    size=\"small\"\n    [text]=\"activeDragMode !== 'pan'\"\n    ariaLabel=\"Pan the image\"\n    pTooltip=\"Pan the image (<kbd>p</kbd>)\"\n    [escape]=\"false\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleDragMode.emit('pan')\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-search-plus\"\n    size=\"small\"\n    [text]=\"true\"\n    ariaLabel=\"Zoom in\"\n    pTooltip=\"Zoom in (<kbd>+</kbd>)\"\n    [escape]=\"false\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"zoomIn.emit()\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-search-minus\"\n    size=\"small\"\n    [text]=\"true\"\n    ariaLabel=\"Zoom out\"\n    pTooltip=\"Zoom out (<kbd>-</kbd>)\"\n    [escape]=\"false\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"zoomOut.emit()\"\n  >\n  </p-button>\n</ng-container>\n\n<!-- Surface 3D controls -->\n<ng-container *ngIf=\"!isHeatmap\">\n  <span class=\"toolbar-separator\"></span>\n  <p-button\n    icon=\"pi pi-search\"\n    size=\"small\"\n    [text]=\"activeSurface3dMode !== 'zoom'\"\n    ariaLabel=\"Zoom\"\n    pTooltip=\"Zoom\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleSurface3dMode.emit('zoom')\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-arrows-alt\"\n    size=\"small\"\n    [text]=\"activeSurface3dMode !== 'pan'\"\n    ariaLabel=\"Pan\"\n    pTooltip=\"Pan\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleSurface3dMode.emit('pan')\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-globe\"\n    size=\"small\"\n    [text]=\"activeSurface3dMode !== 'orbit'\"\n    ariaLabel=\"Orbital rotation\"\n    pTooltip=\"Orbital rotation\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleSurface3dMode.emit('orbit')\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-sync\"\n    size=\"small\"\n    [text]=\"activeSurface3dMode !== 'turntable'\"\n    ariaLabel=\"Turntable rotation\"\n    pTooltip=\"Turntable rotation\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleSurface3dMode.emit('turntable')\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-home\"\n    size=\"small\"\n    [text]=\"true\"\n    ariaLabel=\"Reset camera\"\n    pTooltip=\"Reset camera to default\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"resetSurfaceCamera.emit()\"\n  >\n  </p-button>\n  <!-- 3D coordinate-axes / scale gizmo toggle (napari-js WebGPU volume/isosurface only).\n       `p-button-icon-only` gives the same square sizing as the neighbouring pi-icon buttons\n       (the projected <img> doesn't trigger PrimeNG's automatic icon-only sizing). -->\n  <p-button\n    size=\"small\"\n    *ngIf=\"isNapariMode\"\n    styleClass=\"p-button-icon-only\"\n    [text]=\"!axesVisible\"\n    ariaLabel=\"Toggle 3D axes\"\n    pTooltip=\"Toggle 3D axes / scale\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleAxes.emit()\"\n  >\n    <img\n      src=\"assets/plotting/3d-coordinates.svg\"\n      [class]=\"axesVisible ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n      style=\"width: 1rem\"\n    />\n  </p-button>\n  <!-- Surface wireframe toggle (napari-js WebGPU surface only). -->\n  <p-button\n    icon=\"pi pi-share-alt\"\n    size=\"small\"\n    *ngIf=\"isNapariSurfaceMode\"\n    [text]=\"!wireframeActive\"\n    ariaLabel=\"Toggle wireframe\"\n    pTooltip=\"Toggle wireframe\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleWireframe.emit()\"\n  >\n  </p-button>\n  <!-- Resolution (decimate factor) for the napari 3D types \u2014 reloads at coarser/finer sampling. -->\n  <ng-container *ngIf=\"isNapari3dMode\">\n    <span class=\"flex align-items-center mx-1 toolbar-text\">Res</span>\n    <p-dropdown\n      [options]=\"decimateOptions\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      [ngModel]=\"resolutionScale\"\n      appendTo=\"body\"\n      ariaLabel=\"Resolution\"\n      pTooltip=\"Resolution (decimate factor)\"\n      tooltipPosition=\"bottom\"\n      [style]=\"{ 'min-width': '6rem' }\"\n      (onChange)=\"selectResolution.emit($event.value)\"\n    >\n    </p-dropdown>\n  </ng-container>\n</ng-container>\n", styles: [".toolbar-text{color:var(--primary-color);font-size:.875rem}.toolbar-separator{border-left:1px solid var(--surface-border);height:1.5rem;margin:0 .25rem;align-self:center}.toolbar-icon-dark{filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}.toolbar-icon-active{filter:brightness(0) invert(1)}.wand-sensitivity-value{min-width:2rem;text-align:right}:host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i5$2.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "autoShowPanelOnPrintableCharacterKeyDown", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ViewControlsComponent, isStandalone: true, selector: "toolbar-view-controls", inputs: { isHeatmap: "isHeatmap", zoomTools: "zoomTools", isImageView: "isImageView", activeDragMode: "activeDragMode", activeSurface3dMode: "activeSurface3dMode", isNapariSurfaceMode: "isNapariSurfaceMode", isNapari3dMode: "isNapari3dMode", axesToggle: "axesToggle", axesVisible: "axesVisible", wireframeActive: "wireframeActive", resolutionScale: "resolutionScale" }, outputs: { toggleDragMode: "toggleDragMode", zoomIn: "zoomIn", zoomOut: "zoomOut", toggleSurface3dMode: "toggleSurface3dMode", resetSurfaceCamera: "resetSurfaceCamera", toggleAxes: "toggleAxes", toggleWireframe: "toggleWireframe", selectResolution: "selectResolution" }, ngImport: i0, template: "<!-- Zoom tools. Plotly rubber-band drag-zoom: on OpenSeadragon the box-zoom\n     covers this and a bare drag pans natively, so it's hidden in image view. -->\n<ng-container *ngIf=\"isHeatmap && zoomTools\">\n  <span class=\"toolbar-separator\"></span>\n  <p-button\n    *ngIf=\"!isImageView\"\n    icon=\"pi pi-search\"\n    size=\"small\"\n    [text]=\"activeDragMode !== 'zoom'\"\n    ariaLabel=\"Zoom drag\"\n    pTooltip=\"Zoom drag\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleDragMode.emit('zoom')\"\n  >\n  </p-button>\n  <p-button\n    size=\"small\"\n    [text]=\"activeDragMode !== 'zoomToBox'\"\n    ariaLabel=\"Zoom box\"\n    pTooltip=\"Zoom box (<kbd>b</kbd>)\"\n    [escape]=\"false\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleDragMode.emit('zoomToBox')\"\n  >\n    <img\n      src=\"assets/plotting/zoom-box.svg\"\n      [class]=\"activeDragMode === 'zoomToBox' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n      style=\"width: 1rem\"\n    />\n  </p-button>\n  <p-button\n    icon=\"pi pi-arrows-alt\"\n    size=\"small\"\n    [text]=\"activeDragMode !== 'pan'\"\n    ariaLabel=\"Pan the image\"\n    pTooltip=\"Pan the image (<kbd>p</kbd>)\"\n    [escape]=\"false\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleDragMode.emit('pan')\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-search-plus\"\n    size=\"small\"\n    [text]=\"true\"\n    ariaLabel=\"Zoom in\"\n    pTooltip=\"Zoom in (<kbd>+</kbd>)\"\n    [escape]=\"false\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"zoomIn.emit()\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-search-minus\"\n    size=\"small\"\n    [text]=\"true\"\n    ariaLabel=\"Zoom out\"\n    pTooltip=\"Zoom out (<kbd>-</kbd>)\"\n    [escape]=\"false\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"zoomOut.emit()\"\n  >\n  </p-button>\n</ng-container>\n\n<!-- Surface 3D controls -->\n<ng-container *ngIf=\"!isHeatmap\">\n  <span class=\"toolbar-separator\"></span>\n  <p-button\n    icon=\"pi pi-search\"\n    size=\"small\"\n    [text]=\"activeSurface3dMode !== 'zoom'\"\n    ariaLabel=\"Zoom\"\n    pTooltip=\"Zoom\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleSurface3dMode.emit('zoom')\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-arrows-alt\"\n    size=\"small\"\n    [text]=\"activeSurface3dMode !== 'pan'\"\n    ariaLabel=\"Pan\"\n    pTooltip=\"Pan\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleSurface3dMode.emit('pan')\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-globe\"\n    size=\"small\"\n    [text]=\"activeSurface3dMode !== 'orbit'\"\n    ariaLabel=\"Orbital rotation\"\n    pTooltip=\"Orbital rotation\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleSurface3dMode.emit('orbit')\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-sync\"\n    size=\"small\"\n    [text]=\"activeSurface3dMode !== 'turntable'\"\n    ariaLabel=\"Turntable rotation\"\n    pTooltip=\"Turntable rotation\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleSurface3dMode.emit('turntable')\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-home\"\n    size=\"small\"\n    [text]=\"true\"\n    ariaLabel=\"Reset camera\"\n    pTooltip=\"Reset camera to default\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"resetSurfaceCamera.emit()\"\n  >\n  </p-button>\n  <!-- 3D coordinate-axes / scale gizmo toggle (napari-js WebGPU volume/isosurface, and the 3D\n       spatial cloud).\n       `p-button-icon-only` gives the same square sizing as the neighbouring pi-icon buttons\n       (the projected <img> doesn't trigger PrimeNG's automatic icon-only sizing). -->\n  <p-button\n    size=\"small\"\n    *ngIf=\"axesToggle\"\n    styleClass=\"p-button-icon-only\"\n    [text]=\"!axesVisible\"\n    ariaLabel=\"Toggle 3D axes\"\n    pTooltip=\"Toggle 3D axes / scale\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleAxes.emit()\"\n  >\n    <img\n      src=\"assets/plotting/3d-coordinates.svg\"\n      [class]=\"axesVisible ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n      style=\"width: 1rem\"\n    />\n  </p-button>\n  <!-- Surface wireframe toggle (napari-js WebGPU surface only). -->\n  <p-button\n    icon=\"pi pi-share-alt\"\n    size=\"small\"\n    *ngIf=\"isNapariSurfaceMode\"\n    [text]=\"!wireframeActive\"\n    ariaLabel=\"Toggle wireframe\"\n    pTooltip=\"Toggle wireframe\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleWireframe.emit()\"\n  >\n  </p-button>\n  <!-- Resolution (decimate factor) for the napari 3D types \u2014 reloads at coarser/finer sampling. -->\n  <ng-container *ngIf=\"isNapari3dMode\">\n    <span class=\"flex align-items-center mx-1 toolbar-text\">Res</span>\n    <p-dropdown\n      [options]=\"decimateOptions\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      [ngModel]=\"resolutionScale\"\n      appendTo=\"body\"\n      ariaLabel=\"Resolution\"\n      pTooltip=\"Resolution (decimate factor)\"\n      tooltipPosition=\"bottom\"\n      [style]=\"{ 'min-width': '6rem' }\"\n      (onChange)=\"selectResolution.emit($event.value)\"\n    >\n    </p-dropdown>\n  </ng-container>\n</ng-container>\n", styles: [".toolbar-text{color:var(--primary-color);font-size:.875rem}.toolbar-separator{border-left:1px solid var(--surface-border);height:1.5rem;margin:0 .25rem;align-self:center}.toolbar-icon-dark{filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}.toolbar-icon-active{filter:brightness(0) invert(1)}.wand-sensitivity-value{min-width:2rem;text-align:right}:host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i5$2.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "autoShowPanelOnPrintableCharacterKeyDown", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ViewControlsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'toolbar-view-controls', standalone: true, imports: [CommonModule, FormsModule, ButtonModule, DropdownModule, TooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Zoom tools. Plotly rubber-band drag-zoom: on OpenSeadragon the box-zoom\n     covers this and a bare drag pans natively, so it's hidden in image view. -->\n<ng-container *ngIf=\"isHeatmap && zoomTools\">\n  <span class=\"toolbar-separator\"></span>\n  <p-button\n    *ngIf=\"!isImageView\"\n    icon=\"pi pi-search\"\n    size=\"small\"\n    [text]=\"activeDragMode !== 'zoom'\"\n    ariaLabel=\"Zoom drag\"\n    pTooltip=\"Zoom drag\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleDragMode.emit('zoom')\"\n  >\n  </p-button>\n  <p-button\n    size=\"small\"\n    [text]=\"activeDragMode !== 'zoomToBox'\"\n    ariaLabel=\"Zoom box\"\n    pTooltip=\"Zoom box (<kbd>b</kbd>)\"\n    [escape]=\"false\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleDragMode.emit('zoomToBox')\"\n  >\n    <img\n      src=\"assets/plotting/zoom-box.svg\"\n      [class]=\"activeDragMode === 'zoomToBox' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n      style=\"width: 1rem\"\n    />\n  </p-button>\n  <p-button\n    icon=\"pi pi-arrows-alt\"\n    size=\"small\"\n    [text]=\"activeDragMode !== 'pan'\"\n    ariaLabel=\"Pan the image\"\n    pTooltip=\"Pan the image (<kbd>p</kbd>)\"\n    [escape]=\"false\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleDragMode.emit('pan')\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-search-plus\"\n    size=\"small\"\n    [text]=\"true\"\n    ariaLabel=\"Zoom in\"\n    pTooltip=\"Zoom in (<kbd>+</kbd>)\"\n    [escape]=\"false\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"zoomIn.emit()\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-search-minus\"\n    size=\"small\"\n    [text]=\"true\"\n    ariaLabel=\"Zoom out\"\n    pTooltip=\"Zoom out (<kbd>-</kbd>)\"\n    [escape]=\"false\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"zoomOut.emit()\"\n  >\n  </p-button>\n</ng-container>\n\n<!-- Surface 3D controls -->\n<ng-container *ngIf=\"!isHeatmap\">\n  <span class=\"toolbar-separator\"></span>\n  <p-button\n    icon=\"pi pi-search\"\n    size=\"small\"\n    [text]=\"activeSurface3dMode !== 'zoom'\"\n    ariaLabel=\"Zoom\"\n    pTooltip=\"Zoom\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleSurface3dMode.emit('zoom')\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-arrows-alt\"\n    size=\"small\"\n    [text]=\"activeSurface3dMode !== 'pan'\"\n    ariaLabel=\"Pan\"\n    pTooltip=\"Pan\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleSurface3dMode.emit('pan')\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-globe\"\n    size=\"small\"\n    [text]=\"activeSurface3dMode !== 'orbit'\"\n    ariaLabel=\"Orbital rotation\"\n    pTooltip=\"Orbital rotation\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleSurface3dMode.emit('orbit')\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-sync\"\n    size=\"small\"\n    [text]=\"activeSurface3dMode !== 'turntable'\"\n    ariaLabel=\"Turntable rotation\"\n    pTooltip=\"Turntable rotation\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleSurface3dMode.emit('turntable')\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-home\"\n    size=\"small\"\n    [text]=\"true\"\n    ariaLabel=\"Reset camera\"\n    pTooltip=\"Reset camera to default\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"resetSurfaceCamera.emit()\"\n  >\n  </p-button>\n  <!-- 3D coordinate-axes / scale gizmo toggle (napari-js WebGPU volume/isosurface only).\n       `p-button-icon-only` gives the same square sizing as the neighbouring pi-icon buttons\n       (the projected <img> doesn't trigger PrimeNG's automatic icon-only sizing). -->\n  <p-button\n    size=\"small\"\n    *ngIf=\"isNapariMode\"\n    styleClass=\"p-button-icon-only\"\n    [text]=\"!axesVisible\"\n    ariaLabel=\"Toggle 3D axes\"\n    pTooltip=\"Toggle 3D axes / scale\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleAxes.emit()\"\n  >\n    <img\n      src=\"assets/plotting/3d-coordinates.svg\"\n      [class]=\"axesVisible ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n      style=\"width: 1rem\"\n    />\n  </p-button>\n  <!-- Surface wireframe toggle (napari-js WebGPU surface only). -->\n  <p-button\n    icon=\"pi pi-share-alt\"\n    size=\"small\"\n    *ngIf=\"isNapariSurfaceMode\"\n    [text]=\"!wireframeActive\"\n    ariaLabel=\"Toggle wireframe\"\n    pTooltip=\"Toggle wireframe\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleWireframe.emit()\"\n  >\n  </p-button>\n  <!-- Resolution (decimate factor) for the napari 3D types \u2014 reloads at coarser/finer sampling. -->\n  <ng-container *ngIf=\"isNapari3dMode\">\n    <span class=\"flex align-items-center mx-1 toolbar-text\">Res</span>\n    <p-dropdown\n      [options]=\"decimateOptions\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      [ngModel]=\"resolutionScale\"\n      appendTo=\"body\"\n      ariaLabel=\"Resolution\"\n      pTooltip=\"Resolution (decimate factor)\"\n      tooltipPosition=\"bottom\"\n      [style]=\"{ 'min-width': '6rem' }\"\n      (onChange)=\"selectResolution.emit($event.value)\"\n    >\n    </p-dropdown>\n  </ng-container>\n</ng-container>\n", styles: [".toolbar-text{color:var(--primary-color);font-size:.875rem}.toolbar-separator{border-left:1px solid var(--surface-border);height:1.5rem;margin:0 .25rem;align-self:center}.toolbar-icon-dark{filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}.toolbar-icon-active{filter:brightness(0) invert(1)}.wand-sensitivity-value{min-width:2rem;text-align:right}:host{display:contents}\n"] }]
+            args: [{ selector: 'toolbar-view-controls', standalone: true, imports: [CommonModule, FormsModule, ButtonModule, DropdownModule, TooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Zoom tools. Plotly rubber-band drag-zoom: on OpenSeadragon the box-zoom\n     covers this and a bare drag pans natively, so it's hidden in image view. -->\n<ng-container *ngIf=\"isHeatmap && zoomTools\">\n  <span class=\"toolbar-separator\"></span>\n  <p-button\n    *ngIf=\"!isImageView\"\n    icon=\"pi pi-search\"\n    size=\"small\"\n    [text]=\"activeDragMode !== 'zoom'\"\n    ariaLabel=\"Zoom drag\"\n    pTooltip=\"Zoom drag\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleDragMode.emit('zoom')\"\n  >\n  </p-button>\n  <p-button\n    size=\"small\"\n    [text]=\"activeDragMode !== 'zoomToBox'\"\n    ariaLabel=\"Zoom box\"\n    pTooltip=\"Zoom box (<kbd>b</kbd>)\"\n    [escape]=\"false\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleDragMode.emit('zoomToBox')\"\n  >\n    <img\n      src=\"assets/plotting/zoom-box.svg\"\n      [class]=\"activeDragMode === 'zoomToBox' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n      style=\"width: 1rem\"\n    />\n  </p-button>\n  <p-button\n    icon=\"pi pi-arrows-alt\"\n    size=\"small\"\n    [text]=\"activeDragMode !== 'pan'\"\n    ariaLabel=\"Pan the image\"\n    pTooltip=\"Pan the image (<kbd>p</kbd>)\"\n    [escape]=\"false\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleDragMode.emit('pan')\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-search-plus\"\n    size=\"small\"\n    [text]=\"true\"\n    ariaLabel=\"Zoom in\"\n    pTooltip=\"Zoom in (<kbd>+</kbd>)\"\n    [escape]=\"false\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"zoomIn.emit()\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-search-minus\"\n    size=\"small\"\n    [text]=\"true\"\n    ariaLabel=\"Zoom out\"\n    pTooltip=\"Zoom out (<kbd>-</kbd>)\"\n    [escape]=\"false\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"zoomOut.emit()\"\n  >\n  </p-button>\n</ng-container>\n\n<!-- Surface 3D controls -->\n<ng-container *ngIf=\"!isHeatmap\">\n  <span class=\"toolbar-separator\"></span>\n  <p-button\n    icon=\"pi pi-search\"\n    size=\"small\"\n    [text]=\"activeSurface3dMode !== 'zoom'\"\n    ariaLabel=\"Zoom\"\n    pTooltip=\"Zoom\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleSurface3dMode.emit('zoom')\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-arrows-alt\"\n    size=\"small\"\n    [text]=\"activeSurface3dMode !== 'pan'\"\n    ariaLabel=\"Pan\"\n    pTooltip=\"Pan\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleSurface3dMode.emit('pan')\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-globe\"\n    size=\"small\"\n    [text]=\"activeSurface3dMode !== 'orbit'\"\n    ariaLabel=\"Orbital rotation\"\n    pTooltip=\"Orbital rotation\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleSurface3dMode.emit('orbit')\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-sync\"\n    size=\"small\"\n    [text]=\"activeSurface3dMode !== 'turntable'\"\n    ariaLabel=\"Turntable rotation\"\n    pTooltip=\"Turntable rotation\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleSurface3dMode.emit('turntable')\"\n  >\n  </p-button>\n  <p-button\n    icon=\"pi pi-home\"\n    size=\"small\"\n    [text]=\"true\"\n    ariaLabel=\"Reset camera\"\n    pTooltip=\"Reset camera to default\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"resetSurfaceCamera.emit()\"\n  >\n  </p-button>\n  <!-- 3D coordinate-axes / scale gizmo toggle (napari-js WebGPU volume/isosurface, and the 3D\n       spatial cloud).\n       `p-button-icon-only` gives the same square sizing as the neighbouring pi-icon buttons\n       (the projected <img> doesn't trigger PrimeNG's automatic icon-only sizing). -->\n  <p-button\n    size=\"small\"\n    *ngIf=\"axesToggle\"\n    styleClass=\"p-button-icon-only\"\n    [text]=\"!axesVisible\"\n    ariaLabel=\"Toggle 3D axes\"\n    pTooltip=\"Toggle 3D axes / scale\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleAxes.emit()\"\n  >\n    <img\n      src=\"assets/plotting/3d-coordinates.svg\"\n      [class]=\"axesVisible ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n      style=\"width: 1rem\"\n    />\n  </p-button>\n  <!-- Surface wireframe toggle (napari-js WebGPU surface only). -->\n  <p-button\n    icon=\"pi pi-share-alt\"\n    size=\"small\"\n    *ngIf=\"isNapariSurfaceMode\"\n    [text]=\"!wireframeActive\"\n    ariaLabel=\"Toggle wireframe\"\n    pTooltip=\"Toggle wireframe\"\n    tooltipPosition=\"bottom\"\n    (onClick)=\"toggleWireframe.emit()\"\n  >\n  </p-button>\n  <!-- Resolution (decimate factor) for the napari 3D types \u2014 reloads at coarser/finer sampling. -->\n  <ng-container *ngIf=\"isNapari3dMode\">\n    <span class=\"flex align-items-center mx-1 toolbar-text\">Res</span>\n    <p-dropdown\n      [options]=\"decimateOptions\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      [ngModel]=\"resolutionScale\"\n      appendTo=\"body\"\n      ariaLabel=\"Resolution\"\n      pTooltip=\"Resolution (decimate factor)\"\n      tooltipPosition=\"bottom\"\n      [style]=\"{ 'min-width': '6rem' }\"\n      (onChange)=\"selectResolution.emit($event.value)\"\n    >\n    </p-dropdown>\n  </ng-container>\n</ng-container>\n", styles: [".toolbar-text{color:var(--primary-color);font-size:.875rem}.toolbar-separator{border-left:1px solid var(--surface-border);height:1.5rem;margin:0 .25rem;align-self:center}.toolbar-icon-dark{filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}.toolbar-icon-active{filter:brightness(0) invert(1)}.wand-sensitivity-value{min-width:2rem;text-align:right}:host{display:contents}\n"] }]
         }], propDecorators: { isHeatmap: [{
                 type: Input
             }], zoomTools: [{
@@ -13395,12 +13413,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
                 type: Input
             }], activeSurface3dMode: [{
                 type: Input
-            }], isNapariMode: [{
-                type: Input
             }], isNapariSurfaceMode: [{
                 type: Input
             }], isNapari3dMode: [{
                 type: Input
+            }], axesToggle: [{
+                type: Input
             }], axesVisible: [{
                 type: Input
             }], wireframeActive: [{
@@ -14012,6 +14030,15 @@ class ToolbarComponent {
     get isIsosurfaceMode() {
         return this.effectivePlotType === PlotType.ISOSURFACE || isNapariIsosurface(this.effectivePlotType);
     }
+    /**
+     * The views that draw the 3D axes gizmo (an `Axes3dGizmo`): napari-js's volume, isosurface and
+     * surface, and the 3D spatial cloud. Not every napari-js view: its 2D image and scatter and its
+     * 3D scatter draw none, and a toggle there would do nothing.
+     */
+    get showsAxesToggle() {
+        const type = this.effectivePlotType;
+        return isNapariVolume(type) || isNapariIsosurface(type) || isNapariSurface(type) || isSpatialOmics3d(type);
+    }
     /** The napari-js WebGPU surface — shows the wireframe toggle. */
     get isNapariSurfaceMode() {
         return isNapariSurface(this.effectivePlotType);
@@ -14029,7 +14056,7 @@ class ToolbarComponent {
         this.displayHelpDialog = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ToolbarComponent, isStandalone: true, selector: "plotting-toolbar", inputs: { imageInfo: "imageInfo", hasSpatialDataset: "hasSpatialDataset", plotTypeOptions: "plotTypeOptions", selectedPlotType: "selectedPlotType", basePlotType: "basePlotType", isoRange: "isoRange", maxIndex: "maxIndex", zIndex: "zIndex", isHeatmap: "isHeatmap", is3dRegions: "is3dRegions", isVolumeView: "isVolumeView", sliceEditor: "sliceEditor", activeDragMode: "activeDragMode", activeSurface3dMode: "activeSurface3dMode", axesVisible: "axesVisible", wireframeActive: "wireframeActive", resolutionScale: "resolutionScale", wandSensitivity: "wandSensitivity", brushSize: "brushSize", vertexEraserRadius: "vertexEraserRadius", canUndo: "canUndo", canRedo: "canRedo", stackOptions: "stackOptions", tools: "tools", imageSmoothingEnabled: "imageSmoothingEnabled", samModels: "samModels", samModelId: "samModelId", contributedTools: "contributedTools", dialogTools: "dialogTools", openDialogToolId: "openDialogToolId", toolModelIds: "toolModelIds" }, outputs: { selectPlotType: "selectPlotType", addProfileLine: "addProfileLine", toggleImageSmoothing: "toggleImageSmoothing", isoRangeChange: "isoRangeChange", openChannelHistogram: "openChannelHistogram", openSpatialControls: "openSpatialControls", openRegionEditor: "openRegionEditor", toggleSliceEditor: "toggleSliceEditor", selectStackOption: "selectStackOption", zScrub: "zScrub", zSlide: "zSlide", zIndexInput: "zIndexInput", reloadAndPlot: "reloadAndPlot", downloadImage: "downloadImage", autoscaleImage: "autoscaleImage", toggleDragMode: "toggleDragMode", zoomIn: "zoomIn", zoomOut: "zoomOut", toggleSurface3dMode: "toggleSurface3dMode", resetSurfaceCamera: "resetSurfaceCamera", toggleAxes: "toggleAxes", toggleWireframe: "toggleWireframe", selectResolution: "selectResolution", deleteRegion: "deleteRegion", undoRegion: "undoRegion", redoRegion: "redoRegion", segmentRegions: "segmentRegions", segmentCellpose: "segmentCellpose", runTool: "runTool", toggleDialogTool: "toggleDialogTool", toolModelChange: "toolModelChange", openToolParams: "openToolParams", samModelChange: "samModelChange", wandSensitivityChange: "wandSensitivityChange", brushSizeChange: "brushSizeChange", vertexEraserRadiusChange: "vertexEraserRadiusChange" }, ngImport: i0, template: "<p-toolbar>\n  <div class=\"p-toolbar-group-start flex-wrap align-items-center gap-1\">\n    <!-- Host-provided custom toolbar buttons, shown first (e.g. app-specific\n         actions the visualization view itself doesn't own). -->\n    <ng-content></ng-content>\n\n    <!-- Contributed dialog tools (TOOLBAR_TOOLS, kind: 'dialog'): app-level actions\n         like the host's own buttons above, so they sit right beside them. Image view\n         only, the view their dialog draws over. Highlighted while the dialog is open. -->\n    <ng-container *ngIf=\"isImageView\">\n      <p-button\n        *ngFor=\"let tool of dialogTools; trackBy: trackToolById\"\n        size=\"small\"\n        [text]=\"openDialogToolId !== tool.id\"\n        [pTooltip]=\"tool.tooltip\"\n        tooltipPosition=\"bottom\"\n        [ariaLabel]=\"tool.label\"\n        [attr.aria-pressed]=\"openDialogToolId === tool.id\"\n        (onClick)=\"toggleDialogTool.emit(tool.id)\"\n      >\n        <img\n          *ngIf=\"tool.icon.src\"\n          [src]=\"tool.icon.src\"\n          style=\"width: 1rem\"\n          [alt]=\"tool.label\"\n          [class]=\"openDialogToolId === tool.id ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n        />\n        <i *ngIf=\"tool.icon.pi\" class=\"pi {{ tool.icon.pi }}\"></i>\n      </p-button>\n    </ng-container>\n\n    <!-- Plot type: available for any image (grayscale or RGB), and for a spatial dataset\n         that brings none (its spatial modes are still a choice). -->\n    <toolbar-plot-type-selector\n      *ngIf=\"showPlotTypes\"\n      [options]=\"plotTypeOptions\"\n      [selected]=\"selectedPlotType\"\n      [isosurface]=\"isIsosurfaceMode\"\n      [isoRange]=\"isoRange\"\n      [intensityLines]=\"isIntensityCapable\"\n      (selectPlotType)=\"selectPlotType.emit($event)\"\n      (isoRangeChange)=\"isoRangeChange.emit($event)\"\n      (addProfileLine)=\"addProfileLine.emit()\"\n    >\n    </toolbar-plot-type-selector>\n    <!-- Channels & Histogram: brightness/contrast, gamma, per-channel display,\n         colormap/reverse/invert \u2014 opens the floating dialog. -->\n    <p-button\n      *ngIf=\"tools.specialTools\"\n      pRipple\n      size=\"small\"\n      [text]=\"true\"\n      ariaLabel=\"Channels &amp; Histogram\"\n      pTooltip=\"Channels &amp; Histogram (brightness/contrast, colormap)\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"openChannelHistogram.emit()\"\n    >\n      <img src=\"assets/plotting/invert.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\" />\n    </p-button>\n\n    <!-- Spatial-omics controls. Only meaningful in the spatial mode, which is\n         itself only offered while a dataset is loaded \u2014 so this button appears\n         exactly when there is something for it to control. -->\n    <p-button\n      *ngIf=\"tools.specialTools && isSpatialMode\"\n      pRipple\n      size=\"small\"\n      [text]=\"true\"\n      ariaLabel=\"Spatial omics controls\"\n      pTooltip=\"Spatial omics (colour by column or gene, legend, selection, distributions)\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"openSpatialControls.emit()\"\n    >\n      <img src=\"assets/plotting/spatial-omics.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\" />\n    </p-button>\n\n    <!-- Smoothen toggle: bilinear smoothing vs nearest-neighbour raw pixels (Image\n         view only \u2014 it's an OpenSeadragon drawer setting). Highlighted when smoothing on. -->\n    <p-button\n      *ngIf=\"tools.specialTools && isImageView\"\n      size=\"small\"\n      [text]=\"!imageSmoothingEnabled\"\n      ariaLabel=\"Smoothen\"\n      pTooltip=\"Smoothen (turn on image smoothing)\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"toggleImageSmoothing.emit()\"\n    >\n      <img\n        src=\"assets/plotting/smooth.svg\"\n        style=\"width: 1rem\"\n        [class]=\"imageSmoothingEnabled ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n      />\n    </p-button>\n\n    <!-- Stack controls -->\n    <toolbar-stack-controls\n      *ngIf=\"imageInfo?.isStack\"\n      [liveScrubber]=\"showsLiveSliceScrubber\"\n      [stackToggle]=\"!showsLiveSliceScrubber && !isNapariMode && !isSpatialMode\"\n      [showStack]=\"!!imageInfo?.showStack\"\n      [stackOptions]=\"stackOptions\"\n      [zIndex]=\"zIndex\"\n      [maxIndex]=\"maxIndex\"\n      (zScrub)=\"zScrub.emit($event)\"\n      (zSlide)=\"zSlide.emit($event)\"\n      (selectStackOption)=\"selectStackOption.emit($event)\"\n      (zIndexInput)=\"zIndexInput.emit($event)\"\n      (reloadAndPlot)=\"reloadAndPlot.emit()\"\n    >\n    </toolbar-stack-controls>\n\n    <!-- Image actions (special tools) -->\n    <ng-container *ngIf=\"tools.specialTools\">\n      <span class=\"toolbar-separator\"></span>\n      <p-button\n        icon=\"pi pi-download\"\n        size=\"small\"\n        [text]=\"true\"\n        ariaLabel=\"Download image as PNG\"\n        pTooltip=\"Download image as PNG\"\n        tooltipPosition=\"bottom\"\n        (onClick)=\"downloadImage.emit()\"\n      >\n      </p-button>\n      <p-button\n        *ngIf=\"isHeatmap\"\n        icon=\"pi pi-window-maximize\"\n        size=\"small\"\n        [text]=\"true\"\n        ariaLabel=\"Fit to view\"\n        pTooltip=\"Fit to view\"\n        tooltipPosition=\"bottom\"\n        (onClick)=\"autoscaleImage.emit()\"\n      >\n      </p-button>\n    </ng-container>\n\n    <toolbar-view-controls\n      [isHeatmap]=\"isHeatmap\"\n      [zoomTools]=\"tools.zoomTools\"\n      [isImageView]=\"isImageView\"\n      [activeDragMode]=\"activeDragMode\"\n      [activeSurface3dMode]=\"activeSurface3dMode\"\n      [isNapariMode]=\"isNapariMode\"\n      [isNapariSurfaceMode]=\"isNapariSurfaceMode\"\n      [isNapari3dMode]=\"isNapari3dMode\"\n      [axesVisible]=\"axesVisible\"\n      [wireframeActive]=\"wireframeActive\"\n      [resolutionScale]=\"resolutionScale\"\n      (toggleDragMode)=\"toggleDragMode.emit($event)\"\n      (zoomIn)=\"zoomIn.emit()\"\n      (zoomOut)=\"zoomOut.emit()\"\n      (toggleSurface3dMode)=\"toggleSurface3dMode.emit($event)\"\n      (resetSurfaceCamera)=\"resetSurfaceCamera.emit()\"\n      (toggleAxes)=\"toggleAxes.emit()\"\n      (toggleWireframe)=\"toggleWireframe.emit()\"\n      (selectResolution)=\"selectResolution.emit($event)\"\n    >\n    </toolbar-view-controls>\n\n    <!-- A volume view draws no regions; the Region Editor shows them in it in 3D, and the\n         selection tool picks their surfaces there. The slice editor splits the view: the slice,\n         with every region tool, beside the 3D view. -->\n    <ng-container *ngIf=\"isVolumeView && !isHeatmap && !is3dRegions && tools.regionTools\">\n      <span class=\"toolbar-separator\"></span>\n      <p-button\n        size=\"small\"\n        [text]=\"!sliceEditor\"\n        ariaLabel=\"Slice editor\"\n        [attr.aria-pressed]=\"sliceEditor\"\n        [pTooltip]=\"\n          sliceEditor\n            ? 'Close the slice editor'\n            : 'Slice editor: the slice and the sections through x and y beside the 3D view'\n        \"\n        tooltipPosition=\"bottom\"\n        (onClick)=\"toggleSliceEditor.emit()\"\n      >\n        <img\n          src=\"assets/plotting/slice.svg\"\n          style=\"width: 1rem\"\n          alt=\"\"\n          [class]=\"sliceEditor ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n        />\n      </p-button>\n      <toolbar-region-tools\n        *ngIf=\"!sliceEditor\"\n        [activeDragMode]=\"activeDragMode\"\n        [selectOnly]=\"true\"\n        [canUndo]=\"canUndo\"\n        [canRedo]=\"canRedo\"\n        (openRegionEditor)=\"openRegionEditor.emit()\"\n        (toggleDragMode)=\"toggleDragMode.emit($event)\"\n        (undoRegion)=\"undoRegion.emit()\"\n        (redoRegion)=\"redoRegion.emit()\"\n        (deleteRegion)=\"deleteRegion.emit()\"\n      >\n      </toolbar-region-tools>\n    </ng-container>\n    <ng-container *ngIf=\"(isHeatmap || is3dRegions || (isVolumeView && sliceEditor)) && tools.regionTools\">\n      <toolbar-region-tools\n        [activeDragMode]=\"activeDragMode\"\n        [is3dRegions]=\"is3dRegions\"\n        [vertexTools]=\"supportsRegionVertexTools || (isVolumeView && sliceEditor)\"\n        [wandSensitivity]=\"wandSensitivity\"\n        [brushSize]=\"brushSize\"\n        [vertexEraserRadius]=\"vertexEraserRadius\"\n        [canUndo]=\"canUndo\"\n        [canRedo]=\"canRedo\"\n        (openRegionEditor)=\"openRegionEditor.emit()\"\n        (toggleDragMode)=\"toggleDragMode.emit($event)\"\n        (undoRegion)=\"undoRegion.emit()\"\n        (redoRegion)=\"redoRegion.emit()\"\n        (deleteRegion)=\"deleteRegion.emit()\"\n        (wandSensitivityChange)=\"wandSensitivityChange.emit($event)\"\n        (brushSizeChange)=\"brushSizeChange.emit($event)\"\n        (vertexEraserRadiusChange)=\"vertexEraserRadiusChange.emit($event)\"\n      >\n      </toolbar-region-tools>\n      <toolbar-segmentation-tools\n        [activeDragMode]=\"activeDragMode\"\n        [samModels]=\"samModels\"\n        [samModelId]=\"samModelId\"\n        [contributedTools]=\"contributedTools\"\n        [toolModelIds]=\"toolModelIds\"\n        (segmentRegions)=\"segmentRegions.emit()\"\n        (segmentCellpose)=\"segmentCellpose.emit()\"\n        (toggleDragMode)=\"toggleDragMode.emit($event)\"\n        (samModelChange)=\"samModelChange.emit($event)\"\n        (runTool)=\"runTool.emit($event)\"\n        (toolModelChange)=\"toolModelChange.emit($event)\"\n        (openToolParams)=\"openToolParams.emit($event)\"\n      >\n      </toolbar-segmentation-tools>\n    </ng-container>\n\n    <ng-container *ngIf=\"tools.help\">\n      <span class=\"toolbar-separator\"></span>\n\n      <!-- Help -->\n      <p-button\n        icon=\"pi pi-question-circle\"\n        size=\"small\"\n        [text]=\"true\"\n        ariaLabel=\"Help\"\n        pTooltip=\"Help\"\n        tooltipPosition=\"bottom\"\n        (onClick)=\"showHelp()\"\n      >\n      </p-button>\n    </ng-container>\n  </div>\n</p-toolbar>\n<toolbar-help-dialog\n  [(visible)]=\"displayHelpDialog\"\n  [contributedTools]=\"contributedTools\"\n  [dialogTools]=\"dialogTools\"\n>\n</toolbar-help-dialog>\n", styles: [".toolbar-text{color:var(--primary-color);font-size:.875rem}.toolbar-separator{border-left:1px solid var(--surface-border);height:1.5rem;margin:0 .25rem;align-self:center}.toolbar-icon-dark{filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}.toolbar-icon-active{filter:brightness(0) invert(1)}.wand-sensitivity-value{min-width:2rem;text-align:right}:host{display:block}:host ::ng-deep .p-toolbar{padding:.25rem .5rem}::ng-deep .toolbar-input .p-inputtext{color:var(--primary-color);border-color:var(--primary-color)}::ng-deep .p-menu.model-menu{width:auto;min-width:12.5rem}::ng-deep .model-menu-item{display:flex;align-items:center;gap:.5rem}::ng-deep .model-menu-item .p-menuitem-text{flex:1 1 auto;white-space:nowrap}::ng-deep .model-menu-item .model-info-icon{flex:0 0 auto;font-size:.875rem;opacity:.55;cursor:help;appearance:none;background:none;border:0;padding:0;margin:0;color:inherit;line-height:1}::ng-deep .model-menu-item .model-info-icon:hover{opacity:1}::ng-deep .model-menu-item .model-info-icon:focus-visible{opacity:1;outline:2px solid var(--primary-color, #2196f3);outline-offset:2px;border-radius:2px}::ng-deep .model-info-tooltip .p-tooltip-text{min-width:18rem;max-width:24rem;line-height:1.4}::ng-deep .wand-sensitivity-slider{width:8rem;align-self:center;margin:0 .25rem}span.colormap{width:50px;height:auto;display:inline-block}img.colormap{width:50px;height:auto}.colormap{background:no-repeat;background-size:100%;vertical-align:middle}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i3$1.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: ToolbarModule }, { kind: "component", type: i4$1.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: ToolbarHelpDialogComponent, selector: "toolbar-help-dialog", inputs: ["visible", "contributedTools", "dialogTools"], outputs: ["visibleChange"] }, { kind: "component", type: PlotTypeSelectorComponent, selector: "toolbar-plot-type-selector", inputs: ["options", "selected", "isosurface", "isoRange", "intensityLines"], outputs: ["selectPlotType", "isoRangeChange", "addProfileLine"] }, { kind: "component", type: StackControlsComponent, selector: "toolbar-stack-controls", inputs: ["liveScrubber", "stackToggle", "showStack", "stackOptions", "zIndex", "maxIndex"], outputs: ["zScrub", "zSlide", "selectStackOption", "zIndexInput", "reloadAndPlot"] }, { kind: "component", type: ViewControlsComponent, selector: "toolbar-view-controls", inputs: ["isHeatmap", "zoomTools", "isImageView", "activeDragMode", "activeSurface3dMode", "isNapariMode", "isNapariSurfaceMode", "isNapari3dMode", "axesVisible", "wireframeActive", "resolutionScale"], outputs: ["toggleDragMode", "zoomIn", "zoomOut", "toggleSurface3dMode", "resetSurfaceCamera", "toggleAxes", "toggleWireframe", "selectResolution"] }, { kind: "component", type: RegionToolsComponent, selector: "toolbar-region-tools", inputs: ["activeDragMode", "is3dRegions", "selectOnly", "vertexTools", "wandSensitivity", "brushSize", "vertexEraserRadius", "canUndo", "canRedo"], outputs: ["openRegionEditor", "toggleDragMode", "undoRegion", "redoRegion", "deleteRegion", "wandSensitivityChange", "brushSizeChange", "vertexEraserRadiusChange"] }, { kind: "component", type: SegmentationToolsComponent, selector: "toolbar-segmentation-tools", inputs: ["activeDragMode", "samModels", "samModelId", "contributedTools", "toolModelIds"], outputs: ["segmentRegions", "segmentCellpose", "toggleDragMode", "samModelChange", "runTool", "toolModelChange", "openToolParams"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ToolbarComponent, isStandalone: true, selector: "plotting-toolbar", inputs: { imageInfo: "imageInfo", hasSpatialDataset: "hasSpatialDataset", plotTypeOptions: "plotTypeOptions", selectedPlotType: "selectedPlotType", basePlotType: "basePlotType", isoRange: "isoRange", maxIndex: "maxIndex", zIndex: "zIndex", isHeatmap: "isHeatmap", is3dRegions: "is3dRegions", isVolumeView: "isVolumeView", sliceEditor: "sliceEditor", activeDragMode: "activeDragMode", activeSurface3dMode: "activeSurface3dMode", axesVisible: "axesVisible", wireframeActive: "wireframeActive", resolutionScale: "resolutionScale", wandSensitivity: "wandSensitivity", brushSize: "brushSize", vertexEraserRadius: "vertexEraserRadius", canUndo: "canUndo", canRedo: "canRedo", stackOptions: "stackOptions", tools: "tools", imageSmoothingEnabled: "imageSmoothingEnabled", samModels: "samModels", samModelId: "samModelId", contributedTools: "contributedTools", dialogTools: "dialogTools", openDialogToolId: "openDialogToolId", toolModelIds: "toolModelIds" }, outputs: { selectPlotType: "selectPlotType", addProfileLine: "addProfileLine", toggleImageSmoothing: "toggleImageSmoothing", isoRangeChange: "isoRangeChange", openChannelHistogram: "openChannelHistogram", openSpatialControls: "openSpatialControls", openRegionEditor: "openRegionEditor", toggleSliceEditor: "toggleSliceEditor", selectStackOption: "selectStackOption", zScrub: "zScrub", zSlide: "zSlide", zIndexInput: "zIndexInput", reloadAndPlot: "reloadAndPlot", downloadImage: "downloadImage", autoscaleImage: "autoscaleImage", toggleDragMode: "toggleDragMode", zoomIn: "zoomIn", zoomOut: "zoomOut", toggleSurface3dMode: "toggleSurface3dMode", resetSurfaceCamera: "resetSurfaceCamera", toggleAxes: "toggleAxes", toggleWireframe: "toggleWireframe", selectResolution: "selectResolution", deleteRegion: "deleteRegion", undoRegion: "undoRegion", redoRegion: "redoRegion", segmentRegions: "segmentRegions", segmentCellpose: "segmentCellpose", runTool: "runTool", toggleDialogTool: "toggleDialogTool", toolModelChange: "toolModelChange", openToolParams: "openToolParams", samModelChange: "samModelChange", wandSensitivityChange: "wandSensitivityChange", brushSizeChange: "brushSizeChange", vertexEraserRadiusChange: "vertexEraserRadiusChange" }, ngImport: i0, template: "<p-toolbar>\n  <div class=\"p-toolbar-group-start flex-wrap align-items-center gap-1\">\n    <!-- Host-provided custom toolbar buttons, shown first (e.g. app-specific\n         actions the visualization view itself doesn't own). -->\n    <ng-content></ng-content>\n\n    <!-- Contributed dialog tools (TOOLBAR_TOOLS, kind: 'dialog'): app-level actions\n         like the host's own buttons above, so they sit right beside them. Image view\n         only, the view their dialog draws over. Highlighted while the dialog is open. -->\n    <ng-container *ngIf=\"isImageView\">\n      <p-button\n        *ngFor=\"let tool of dialogTools; trackBy: trackToolById\"\n        size=\"small\"\n        [text]=\"openDialogToolId !== tool.id\"\n        [pTooltip]=\"tool.tooltip\"\n        tooltipPosition=\"bottom\"\n        [ariaLabel]=\"tool.label\"\n        [attr.aria-pressed]=\"openDialogToolId === tool.id\"\n        (onClick)=\"toggleDialogTool.emit(tool.id)\"\n      >\n        <img\n          *ngIf=\"tool.icon.src\"\n          [src]=\"tool.icon.src\"\n          style=\"width: 1rem\"\n          [alt]=\"tool.label\"\n          [class]=\"openDialogToolId === tool.id ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n        />\n        <i *ngIf=\"tool.icon.pi\" class=\"pi {{ tool.icon.pi }}\"></i>\n      </p-button>\n    </ng-container>\n\n    <!-- Plot type: available for any image (grayscale or RGB), and for a spatial dataset\n         that brings none (its spatial modes are still a choice). -->\n    <toolbar-plot-type-selector\n      *ngIf=\"showPlotTypes\"\n      [options]=\"plotTypeOptions\"\n      [selected]=\"selectedPlotType\"\n      [isosurface]=\"isIsosurfaceMode\"\n      [isoRange]=\"isoRange\"\n      [intensityLines]=\"isIntensityCapable\"\n      (selectPlotType)=\"selectPlotType.emit($event)\"\n      (isoRangeChange)=\"isoRangeChange.emit($event)\"\n      (addProfileLine)=\"addProfileLine.emit()\"\n    >\n    </toolbar-plot-type-selector>\n    <!-- Channels & Histogram: brightness/contrast, gamma, per-channel display,\n         colormap/reverse/invert \u2014 opens the floating dialog. -->\n    <p-button\n      *ngIf=\"tools.specialTools\"\n      pRipple\n      size=\"small\"\n      [text]=\"true\"\n      ariaLabel=\"Channels &amp; Histogram\"\n      pTooltip=\"Channels &amp; Histogram (brightness/contrast, colormap)\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"openChannelHistogram.emit()\"\n    >\n      <img src=\"assets/plotting/invert.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\" />\n    </p-button>\n\n    <!-- Spatial-omics controls. Only meaningful in the spatial mode, which is\n         itself only offered while a dataset is loaded \u2014 so this button appears\n         exactly when there is something for it to control. -->\n    <p-button\n      *ngIf=\"tools.specialTools && isSpatialMode\"\n      pRipple\n      size=\"small\"\n      [text]=\"true\"\n      ariaLabel=\"Spatial omics controls\"\n      pTooltip=\"Spatial omics (colour by column or gene, legend, selection, distributions)\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"openSpatialControls.emit()\"\n    >\n      <img src=\"assets/plotting/spatial-omics.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\" />\n    </p-button>\n\n    <!-- Smoothen toggle: bilinear smoothing vs nearest-neighbour raw pixels (Image\n         view only \u2014 it's an OpenSeadragon drawer setting). Highlighted when smoothing on. -->\n    <p-button\n      *ngIf=\"tools.specialTools && isImageView\"\n      size=\"small\"\n      [text]=\"!imageSmoothingEnabled\"\n      ariaLabel=\"Smoothen\"\n      pTooltip=\"Smoothen (turn on image smoothing)\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"toggleImageSmoothing.emit()\"\n    >\n      <img\n        src=\"assets/plotting/smooth.svg\"\n        style=\"width: 1rem\"\n        [class]=\"imageSmoothingEnabled ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n      />\n    </p-button>\n\n    <!-- Stack controls -->\n    <toolbar-stack-controls\n      *ngIf=\"imageInfo?.isStack\"\n      [liveScrubber]=\"showsLiveSliceScrubber\"\n      [stackToggle]=\"!showsLiveSliceScrubber && !isNapariMode && !isSpatialMode\"\n      [showStack]=\"!!imageInfo?.showStack\"\n      [stackOptions]=\"stackOptions\"\n      [zIndex]=\"zIndex\"\n      [maxIndex]=\"maxIndex\"\n      (zScrub)=\"zScrub.emit($event)\"\n      (zSlide)=\"zSlide.emit($event)\"\n      (selectStackOption)=\"selectStackOption.emit($event)\"\n      (zIndexInput)=\"zIndexInput.emit($event)\"\n      (reloadAndPlot)=\"reloadAndPlot.emit()\"\n    >\n    </toolbar-stack-controls>\n\n    <!-- Image actions (special tools) -->\n    <ng-container *ngIf=\"tools.specialTools\">\n      <span class=\"toolbar-separator\"></span>\n      <p-button\n        icon=\"pi pi-download\"\n        size=\"small\"\n        [text]=\"true\"\n        ariaLabel=\"Download image as PNG\"\n        pTooltip=\"Download image as PNG\"\n        tooltipPosition=\"bottom\"\n        (onClick)=\"downloadImage.emit()\"\n      >\n      </p-button>\n      <p-button\n        *ngIf=\"isHeatmap\"\n        icon=\"pi pi-window-maximize\"\n        size=\"small\"\n        [text]=\"true\"\n        ariaLabel=\"Fit to view\"\n        pTooltip=\"Fit to view\"\n        tooltipPosition=\"bottom\"\n        (onClick)=\"autoscaleImage.emit()\"\n      >\n      </p-button>\n    </ng-container>\n\n    <toolbar-view-controls\n      [isHeatmap]=\"isHeatmap\"\n      [zoomTools]=\"tools.zoomTools\"\n      [isImageView]=\"isImageView\"\n      [activeDragMode]=\"activeDragMode\"\n      [activeSurface3dMode]=\"activeSurface3dMode\"\n      [axesToggle]=\"showsAxesToggle\"\n      [isNapariSurfaceMode]=\"isNapariSurfaceMode\"\n      [isNapari3dMode]=\"isNapari3dMode\"\n      [axesVisible]=\"axesVisible\"\n      [wireframeActive]=\"wireframeActive\"\n      [resolutionScale]=\"resolutionScale\"\n      (toggleDragMode)=\"toggleDragMode.emit($event)\"\n      (zoomIn)=\"zoomIn.emit()\"\n      (zoomOut)=\"zoomOut.emit()\"\n      (toggleSurface3dMode)=\"toggleSurface3dMode.emit($event)\"\n      (resetSurfaceCamera)=\"resetSurfaceCamera.emit()\"\n      (toggleAxes)=\"toggleAxes.emit()\"\n      (toggleWireframe)=\"toggleWireframe.emit()\"\n      (selectResolution)=\"selectResolution.emit($event)\"\n    >\n    </toolbar-view-controls>\n\n    <!-- A volume view draws no regions; the Region Editor shows them in it in 3D, and the\n         selection tool picks their surfaces there. The slice editor splits the view: the slice,\n         with every region tool, beside the 3D view. -->\n    <ng-container *ngIf=\"isVolumeView && !isHeatmap && !is3dRegions && tools.regionTools\">\n      <span class=\"toolbar-separator\"></span>\n      <p-button\n        size=\"small\"\n        [text]=\"!sliceEditor\"\n        ariaLabel=\"Slice editor\"\n        [attr.aria-pressed]=\"sliceEditor\"\n        [pTooltip]=\"\n          sliceEditor\n            ? 'Close the slice editor'\n            : 'Slice editor: the slice and the sections through x and y beside the 3D view'\n        \"\n        tooltipPosition=\"bottom\"\n        (onClick)=\"toggleSliceEditor.emit()\"\n      >\n        <img\n          src=\"assets/plotting/slice.svg\"\n          style=\"width: 1rem\"\n          alt=\"\"\n          [class]=\"sliceEditor ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n        />\n      </p-button>\n      <toolbar-region-tools\n        *ngIf=\"!sliceEditor\"\n        [activeDragMode]=\"activeDragMode\"\n        [selectOnly]=\"true\"\n        [canUndo]=\"canUndo\"\n        [canRedo]=\"canRedo\"\n        (openRegionEditor)=\"openRegionEditor.emit()\"\n        (toggleDragMode)=\"toggleDragMode.emit($event)\"\n        (undoRegion)=\"undoRegion.emit()\"\n        (redoRegion)=\"redoRegion.emit()\"\n        (deleteRegion)=\"deleteRegion.emit()\"\n      >\n      </toolbar-region-tools>\n    </ng-container>\n    <ng-container *ngIf=\"(isHeatmap || is3dRegions || (isVolumeView && sliceEditor)) && tools.regionTools\">\n      <toolbar-region-tools\n        [activeDragMode]=\"activeDragMode\"\n        [is3dRegions]=\"is3dRegions\"\n        [vertexTools]=\"supportsRegionVertexTools || (isVolumeView && sliceEditor)\"\n        [wandSensitivity]=\"wandSensitivity\"\n        [brushSize]=\"brushSize\"\n        [vertexEraserRadius]=\"vertexEraserRadius\"\n        [canUndo]=\"canUndo\"\n        [canRedo]=\"canRedo\"\n        (openRegionEditor)=\"openRegionEditor.emit()\"\n        (toggleDragMode)=\"toggleDragMode.emit($event)\"\n        (undoRegion)=\"undoRegion.emit()\"\n        (redoRegion)=\"redoRegion.emit()\"\n        (deleteRegion)=\"deleteRegion.emit()\"\n        (wandSensitivityChange)=\"wandSensitivityChange.emit($event)\"\n        (brushSizeChange)=\"brushSizeChange.emit($event)\"\n        (vertexEraserRadiusChange)=\"vertexEraserRadiusChange.emit($event)\"\n      >\n      </toolbar-region-tools>\n      <toolbar-segmentation-tools\n        [activeDragMode]=\"activeDragMode\"\n        [samModels]=\"samModels\"\n        [samModelId]=\"samModelId\"\n        [contributedTools]=\"contributedTools\"\n        [toolModelIds]=\"toolModelIds\"\n        (segmentRegions)=\"segmentRegions.emit()\"\n        (segmentCellpose)=\"segmentCellpose.emit()\"\n        (toggleDragMode)=\"toggleDragMode.emit($event)\"\n        (samModelChange)=\"samModelChange.emit($event)\"\n        (runTool)=\"runTool.emit($event)\"\n        (toolModelChange)=\"toolModelChange.emit($event)\"\n        (openToolParams)=\"openToolParams.emit($event)\"\n      >\n      </toolbar-segmentation-tools>\n    </ng-container>\n\n    <ng-container *ngIf=\"tools.help\">\n      <span class=\"toolbar-separator\"></span>\n\n      <!-- Help -->\n      <p-button\n        icon=\"pi pi-question-circle\"\n        size=\"small\"\n        [text]=\"true\"\n        ariaLabel=\"Help\"\n        pTooltip=\"Help\"\n        tooltipPosition=\"bottom\"\n        (onClick)=\"showHelp()\"\n      >\n      </p-button>\n    </ng-container>\n  </div>\n</p-toolbar>\n<toolbar-help-dialog\n  [(visible)]=\"displayHelpDialog\"\n  [contributedTools]=\"contributedTools\"\n  [dialogTools]=\"dialogTools\"\n>\n</toolbar-help-dialog>\n", styles: [".toolbar-text{color:var(--primary-color);font-size:.875rem}.toolbar-separator{border-left:1px solid var(--surface-border);height:1.5rem;margin:0 .25rem;align-self:center}.toolbar-icon-dark{filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}.toolbar-icon-active{filter:brightness(0) invert(1)}.wand-sensitivity-value{min-width:2rem;text-align:right}:host{display:block}:host ::ng-deep .p-toolbar{padding:.25rem .5rem}::ng-deep .toolbar-input .p-inputtext{color:var(--primary-color);border-color:var(--primary-color)}::ng-deep .p-menu.model-menu{width:auto;min-width:12.5rem}::ng-deep .model-menu-item{display:flex;align-items:center;gap:.5rem}::ng-deep .model-menu-item .p-menuitem-text{flex:1 1 auto;white-space:nowrap}::ng-deep .model-menu-item .model-info-icon{flex:0 0 auto;font-size:.875rem;opacity:.55;cursor:help;appearance:none;background:none;border:0;padding:0;margin:0;color:inherit;line-height:1}::ng-deep .model-menu-item .model-info-icon:hover{opacity:1}::ng-deep .model-menu-item .model-info-icon:focus-visible{opacity:1;outline:2px solid var(--primary-color, #2196f3);outline-offset:2px;border-radius:2px}::ng-deep .model-info-tooltip .p-tooltip-text{min-width:18rem;max-width:24rem;line-height:1.4}::ng-deep .wand-sensitivity-slider{width:8rem;align-self:center;margin:0 .25rem}span.colormap{width:50px;height:auto;display:inline-block}img.colormap{width:50px;height:auto}.colormap{background:no-repeat;background-size:100%;vertical-align:middle}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i3$1.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: ToolbarModule }, { kind: "component", type: i4$1.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: ToolbarHelpDialogComponent, selector: "toolbar-help-dialog", inputs: ["visible", "contributedTools", "dialogTools"], outputs: ["visibleChange"] }, { kind: "component", type: PlotTypeSelectorComponent, selector: "toolbar-plot-type-selector", inputs: ["options", "selected", "isosurface", "isoRange", "intensityLines"], outputs: ["selectPlotType", "isoRangeChange", "addProfileLine"] }, { kind: "component", type: StackControlsComponent, selector: "toolbar-stack-controls", inputs: ["liveScrubber", "stackToggle", "showStack", "stackOptions", "zIndex", "maxIndex"], outputs: ["zScrub", "zSlide", "selectStackOption", "zIndexInput", "reloadAndPlot"] }, { kind: "component", type: ViewControlsComponent, selector: "toolbar-view-controls", inputs: ["isHeatmap", "zoomTools", "isImageView", "activeDragMode", "activeSurface3dMode", "isNapariSurfaceMode", "isNapari3dMode", "axesToggle", "axesVisible", "wireframeActive", "resolutionScale"], outputs: ["toggleDragMode", "zoomIn", "zoomOut", "toggleSurface3dMode", "resetSurfaceCamera", "toggleAxes", "toggleWireframe", "selectResolution"] }, { kind: "component", type: RegionToolsComponent, selector: "toolbar-region-tools", inputs: ["activeDragMode", "is3dRegions", "selectOnly", "vertexTools", "wandSensitivity", "brushSize", "vertexEraserRadius", "canUndo", "canRedo"], outputs: ["openRegionEditor", "toggleDragMode", "undoRegion", "redoRegion", "deleteRegion", "wandSensitivityChange", "brushSizeChange", "vertexEraserRadiusChange"] }, { kind: "component", type: SegmentationToolsComponent, selector: "toolbar-segmentation-tools", inputs: ["activeDragMode", "samModels", "samModelId", "contributedTools", "toolModelIds"], outputs: ["segmentRegions", "segmentCellpose", "toggleDragMode", "samModelChange", "runTool", "toolModelChange", "openToolParams"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ToolbarComponent, decorators: [{
             type: Component,
@@ -14045,7 +14072,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
                         ViewControlsComponent,
                         RegionToolsComponent,
                         SegmentationToolsComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-toolbar>\n  <div class=\"p-toolbar-group-start flex-wrap align-items-center gap-1\">\n    <!-- Host-provided custom toolbar buttons, shown first (e.g. app-specific\n         actions the visualization view itself doesn't own). -->\n    <ng-content></ng-content>\n\n    <!-- Contributed dialog tools (TOOLBAR_TOOLS, kind: 'dialog'): app-level actions\n         like the host's own buttons above, so they sit right beside them. Image view\n         only, the view their dialog draws over. Highlighted while the dialog is open. -->\n    <ng-container *ngIf=\"isImageView\">\n      <p-button\n        *ngFor=\"let tool of dialogTools; trackBy: trackToolById\"\n        size=\"small\"\n        [text]=\"openDialogToolId !== tool.id\"\n        [pTooltip]=\"tool.tooltip\"\n        tooltipPosition=\"bottom\"\n        [ariaLabel]=\"tool.label\"\n        [attr.aria-pressed]=\"openDialogToolId === tool.id\"\n        (onClick)=\"toggleDialogTool.emit(tool.id)\"\n      >\n        <img\n          *ngIf=\"tool.icon.src\"\n          [src]=\"tool.icon.src\"\n          style=\"width: 1rem\"\n          [alt]=\"tool.label\"\n          [class]=\"openDialogToolId === tool.id ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n        />\n        <i *ngIf=\"tool.icon.pi\" class=\"pi {{ tool.icon.pi }}\"></i>\n      </p-button>\n    </ng-container>\n\n    <!-- Plot type: available for any image (grayscale or RGB), and for a spatial dataset\n         that brings none (its spatial modes are still a choice). -->\n    <toolbar-plot-type-selector\n      *ngIf=\"showPlotTypes\"\n      [options]=\"plotTypeOptions\"\n      [selected]=\"selectedPlotType\"\n      [isosurface]=\"isIsosurfaceMode\"\n      [isoRange]=\"isoRange\"\n      [intensityLines]=\"isIntensityCapable\"\n      (selectPlotType)=\"selectPlotType.emit($event)\"\n      (isoRangeChange)=\"isoRangeChange.emit($event)\"\n      (addProfileLine)=\"addProfileLine.emit()\"\n    >\n    </toolbar-plot-type-selector>\n    <!-- Channels & Histogram: brightness/contrast, gamma, per-channel display,\n         colormap/reverse/invert \u2014 opens the floating dialog. -->\n    <p-button\n      *ngIf=\"tools.specialTools\"\n      pRipple\n      size=\"small\"\n      [text]=\"true\"\n      ariaLabel=\"Channels &amp; Histogram\"\n      pTooltip=\"Channels &amp; Histogram (brightness/contrast, colormap)\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"openChannelHistogram.emit()\"\n    >\n      <img src=\"assets/plotting/invert.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\" />\n    </p-button>\n\n    <!-- Spatial-omics controls. Only meaningful in the spatial mode, which is\n         itself only offered while a dataset is loaded \u2014 so this button appears\n         exactly when there is something for it to control. -->\n    <p-button\n      *ngIf=\"tools.specialTools && isSpatialMode\"\n      pRipple\n      size=\"small\"\n      [text]=\"true\"\n      ariaLabel=\"Spatial omics controls\"\n      pTooltip=\"Spatial omics (colour by column or gene, legend, selection, distributions)\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"openSpatialControls.emit()\"\n    >\n      <img src=\"assets/plotting/spatial-omics.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\" />\n    </p-button>\n\n    <!-- Smoothen toggle: bilinear smoothing vs nearest-neighbour raw pixels (Image\n         view only \u2014 it's an OpenSeadragon drawer setting). Highlighted when smoothing on. -->\n    <p-button\n      *ngIf=\"tools.specialTools && isImageView\"\n      size=\"small\"\n      [text]=\"!imageSmoothingEnabled\"\n      ariaLabel=\"Smoothen\"\n      pTooltip=\"Smoothen (turn on image smoothing)\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"toggleImageSmoothing.emit()\"\n    >\n      <img\n        src=\"assets/plotting/smooth.svg\"\n        style=\"width: 1rem\"\n        [class]=\"imageSmoothingEnabled ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n      />\n    </p-button>\n\n    <!-- Stack controls -->\n    <toolbar-stack-controls\n      *ngIf=\"imageInfo?.isStack\"\n      [liveScrubber]=\"showsLiveSliceScrubber\"\n      [stackToggle]=\"!showsLiveSliceScrubber && !isNapariMode && !isSpatialMode\"\n      [showStack]=\"!!imageInfo?.showStack\"\n      [stackOptions]=\"stackOptions\"\n      [zIndex]=\"zIndex\"\n      [maxIndex]=\"maxIndex\"\n      (zScrub)=\"zScrub.emit($event)\"\n      (zSlide)=\"zSlide.emit($event)\"\n      (selectStackOption)=\"selectStackOption.emit($event)\"\n      (zIndexInput)=\"zIndexInput.emit($event)\"\n      (reloadAndPlot)=\"reloadAndPlot.emit()\"\n    >\n    </toolbar-stack-controls>\n\n    <!-- Image actions (special tools) -->\n    <ng-container *ngIf=\"tools.specialTools\">\n      <span class=\"toolbar-separator\"></span>\n      <p-button\n        icon=\"pi pi-download\"\n        size=\"small\"\n        [text]=\"true\"\n        ariaLabel=\"Download image as PNG\"\n        pTooltip=\"Download image as PNG\"\n        tooltipPosition=\"bottom\"\n        (onClick)=\"downloadImage.emit()\"\n      >\n      </p-button>\n      <p-button\n        *ngIf=\"isHeatmap\"\n        icon=\"pi pi-window-maximize\"\n        size=\"small\"\n        [text]=\"true\"\n        ariaLabel=\"Fit to view\"\n        pTooltip=\"Fit to view\"\n        tooltipPosition=\"bottom\"\n        (onClick)=\"autoscaleImage.emit()\"\n      >\n      </p-button>\n    </ng-container>\n\n    <toolbar-view-controls\n      [isHeatmap]=\"isHeatmap\"\n      [zoomTools]=\"tools.zoomTools\"\n      [isImageView]=\"isImageView\"\n      [activeDragMode]=\"activeDragMode\"\n      [activeSurface3dMode]=\"activeSurface3dMode\"\n      [isNapariMode]=\"isNapariMode\"\n      [isNapariSurfaceMode]=\"isNapariSurfaceMode\"\n      [isNapari3dMode]=\"isNapari3dMode\"\n      [axesVisible]=\"axesVisible\"\n      [wireframeActive]=\"wireframeActive\"\n      [resolutionScale]=\"resolutionScale\"\n      (toggleDragMode)=\"toggleDragMode.emit($event)\"\n      (zoomIn)=\"zoomIn.emit()\"\n      (zoomOut)=\"zoomOut.emit()\"\n      (toggleSurface3dMode)=\"toggleSurface3dMode.emit($event)\"\n      (resetSurfaceCamera)=\"resetSurfaceCamera.emit()\"\n      (toggleAxes)=\"toggleAxes.emit()\"\n      (toggleWireframe)=\"toggleWireframe.emit()\"\n      (selectResolution)=\"selectResolution.emit($event)\"\n    >\n    </toolbar-view-controls>\n\n    <!-- A volume view draws no regions; the Region Editor shows them in it in 3D, and the\n         selection tool picks their surfaces there. The slice editor splits the view: the slice,\n         with every region tool, beside the 3D view. -->\n    <ng-container *ngIf=\"isVolumeView && !isHeatmap && !is3dRegions && tools.regionTools\">\n      <span class=\"toolbar-separator\"></span>\n      <p-button\n        size=\"small\"\n        [text]=\"!sliceEditor\"\n        ariaLabel=\"Slice editor\"\n        [attr.aria-pressed]=\"sliceEditor\"\n        [pTooltip]=\"\n          sliceEditor\n            ? 'Close the slice editor'\n            : 'Slice editor: the slice and the sections through x and y beside the 3D view'\n        \"\n        tooltipPosition=\"bottom\"\n        (onClick)=\"toggleSliceEditor.emit()\"\n      >\n        <img\n          src=\"assets/plotting/slice.svg\"\n          style=\"width: 1rem\"\n          alt=\"\"\n          [class]=\"sliceEditor ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n        />\n      </p-button>\n      <toolbar-region-tools\n        *ngIf=\"!sliceEditor\"\n        [activeDragMode]=\"activeDragMode\"\n        [selectOnly]=\"true\"\n        [canUndo]=\"canUndo\"\n        [canRedo]=\"canRedo\"\n        (openRegionEditor)=\"openRegionEditor.emit()\"\n        (toggleDragMode)=\"toggleDragMode.emit($event)\"\n        (undoRegion)=\"undoRegion.emit()\"\n        (redoRegion)=\"redoRegion.emit()\"\n        (deleteRegion)=\"deleteRegion.emit()\"\n      >\n      </toolbar-region-tools>\n    </ng-container>\n    <ng-container *ngIf=\"(isHeatmap || is3dRegions || (isVolumeView && sliceEditor)) && tools.regionTools\">\n      <toolbar-region-tools\n        [activeDragMode]=\"activeDragMode\"\n        [is3dRegions]=\"is3dRegions\"\n        [vertexTools]=\"supportsRegionVertexTools || (isVolumeView && sliceEditor)\"\n        [wandSensitivity]=\"wandSensitivity\"\n        [brushSize]=\"brushSize\"\n        [vertexEraserRadius]=\"vertexEraserRadius\"\n        [canUndo]=\"canUndo\"\n        [canRedo]=\"canRedo\"\n        (openRegionEditor)=\"openRegionEditor.emit()\"\n        (toggleDragMode)=\"toggleDragMode.emit($event)\"\n        (undoRegion)=\"undoRegion.emit()\"\n        (redoRegion)=\"redoRegion.emit()\"\n        (deleteRegion)=\"deleteRegion.emit()\"\n        (wandSensitivityChange)=\"wandSensitivityChange.emit($event)\"\n        (brushSizeChange)=\"brushSizeChange.emit($event)\"\n        (vertexEraserRadiusChange)=\"vertexEraserRadiusChange.emit($event)\"\n      >\n      </toolbar-region-tools>\n      <toolbar-segmentation-tools\n        [activeDragMode]=\"activeDragMode\"\n        [samModels]=\"samModels\"\n        [samModelId]=\"samModelId\"\n        [contributedTools]=\"contributedTools\"\n        [toolModelIds]=\"toolModelIds\"\n        (segmentRegions)=\"segmentRegions.emit()\"\n        (segmentCellpose)=\"segmentCellpose.emit()\"\n        (toggleDragMode)=\"toggleDragMode.emit($event)\"\n        (samModelChange)=\"samModelChange.emit($event)\"\n        (runTool)=\"runTool.emit($event)\"\n        (toolModelChange)=\"toolModelChange.emit($event)\"\n        (openToolParams)=\"openToolParams.emit($event)\"\n      >\n      </toolbar-segmentation-tools>\n    </ng-container>\n\n    <ng-container *ngIf=\"tools.help\">\n      <span class=\"toolbar-separator\"></span>\n\n      <!-- Help -->\n      <p-button\n        icon=\"pi pi-question-circle\"\n        size=\"small\"\n        [text]=\"true\"\n        ariaLabel=\"Help\"\n        pTooltip=\"Help\"\n        tooltipPosition=\"bottom\"\n        (onClick)=\"showHelp()\"\n      >\n      </p-button>\n    </ng-container>\n  </div>\n</p-toolbar>\n<toolbar-help-dialog\n  [(visible)]=\"displayHelpDialog\"\n  [contributedTools]=\"contributedTools\"\n  [dialogTools]=\"dialogTools\"\n>\n</toolbar-help-dialog>\n", styles: [".toolbar-text{color:var(--primary-color);font-size:.875rem}.toolbar-separator{border-left:1px solid var(--surface-border);height:1.5rem;margin:0 .25rem;align-self:center}.toolbar-icon-dark{filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}.toolbar-icon-active{filter:brightness(0) invert(1)}.wand-sensitivity-value{min-width:2rem;text-align:right}:host{display:block}:host ::ng-deep .p-toolbar{padding:.25rem .5rem}::ng-deep .toolbar-input .p-inputtext{color:var(--primary-color);border-color:var(--primary-color)}::ng-deep .p-menu.model-menu{width:auto;min-width:12.5rem}::ng-deep .model-menu-item{display:flex;align-items:center;gap:.5rem}::ng-deep .model-menu-item .p-menuitem-text{flex:1 1 auto;white-space:nowrap}::ng-deep .model-menu-item .model-info-icon{flex:0 0 auto;font-size:.875rem;opacity:.55;cursor:help;appearance:none;background:none;border:0;padding:0;margin:0;color:inherit;line-height:1}::ng-deep .model-menu-item .model-info-icon:hover{opacity:1}::ng-deep .model-menu-item .model-info-icon:focus-visible{opacity:1;outline:2px solid var(--primary-color, #2196f3);outline-offset:2px;border-radius:2px}::ng-deep .model-info-tooltip .p-tooltip-text{min-width:18rem;max-width:24rem;line-height:1.4}::ng-deep .wand-sensitivity-slider{width:8rem;align-self:center;margin:0 .25rem}span.colormap{width:50px;height:auto;display:inline-block}img.colormap{width:50px;height:auto}.colormap{background:no-repeat;background-size:100%;vertical-align:middle}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-toolbar>\n  <div class=\"p-toolbar-group-start flex-wrap align-items-center gap-1\">\n    <!-- Host-provided custom toolbar buttons, shown first (e.g. app-specific\n         actions the visualization view itself doesn't own). -->\n    <ng-content></ng-content>\n\n    <!-- Contributed dialog tools (TOOLBAR_TOOLS, kind: 'dialog'): app-level actions\n         like the host's own buttons above, so they sit right beside them. Image view\n         only, the view their dialog draws over. Highlighted while the dialog is open. -->\n    <ng-container *ngIf=\"isImageView\">\n      <p-button\n        *ngFor=\"let tool of dialogTools; trackBy: trackToolById\"\n        size=\"small\"\n        [text]=\"openDialogToolId !== tool.id\"\n        [pTooltip]=\"tool.tooltip\"\n        tooltipPosition=\"bottom\"\n        [ariaLabel]=\"tool.label\"\n        [attr.aria-pressed]=\"openDialogToolId === tool.id\"\n        (onClick)=\"toggleDialogTool.emit(tool.id)\"\n      >\n        <img\n          *ngIf=\"tool.icon.src\"\n          [src]=\"tool.icon.src\"\n          style=\"width: 1rem\"\n          [alt]=\"tool.label\"\n          [class]=\"openDialogToolId === tool.id ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n        />\n        <i *ngIf=\"tool.icon.pi\" class=\"pi {{ tool.icon.pi }}\"></i>\n      </p-button>\n    </ng-container>\n\n    <!-- Plot type: available for any image (grayscale or RGB), and for a spatial dataset\n         that brings none (its spatial modes are still a choice). -->\n    <toolbar-plot-type-selector\n      *ngIf=\"showPlotTypes\"\n      [options]=\"plotTypeOptions\"\n      [selected]=\"selectedPlotType\"\n      [isosurface]=\"isIsosurfaceMode\"\n      [isoRange]=\"isoRange\"\n      [intensityLines]=\"isIntensityCapable\"\n      (selectPlotType)=\"selectPlotType.emit($event)\"\n      (isoRangeChange)=\"isoRangeChange.emit($event)\"\n      (addProfileLine)=\"addProfileLine.emit()\"\n    >\n    </toolbar-plot-type-selector>\n    <!-- Channels & Histogram: brightness/contrast, gamma, per-channel display,\n         colormap/reverse/invert \u2014 opens the floating dialog. -->\n    <p-button\n      *ngIf=\"tools.specialTools\"\n      pRipple\n      size=\"small\"\n      [text]=\"true\"\n      ariaLabel=\"Channels &amp; Histogram\"\n      pTooltip=\"Channels &amp; Histogram (brightness/contrast, colormap)\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"openChannelHistogram.emit()\"\n    >\n      <img src=\"assets/plotting/invert.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\" />\n    </p-button>\n\n    <!-- Spatial-omics controls. Only meaningful in the spatial mode, which is\n         itself only offered while a dataset is loaded \u2014 so this button appears\n         exactly when there is something for it to control. -->\n    <p-button\n      *ngIf=\"tools.specialTools && isSpatialMode\"\n      pRipple\n      size=\"small\"\n      [text]=\"true\"\n      ariaLabel=\"Spatial omics controls\"\n      pTooltip=\"Spatial omics (colour by column or gene, legend, selection, distributions)\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"openSpatialControls.emit()\"\n    >\n      <img src=\"assets/plotting/spatial-omics.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\" />\n    </p-button>\n\n    <!-- Smoothen toggle: bilinear smoothing vs nearest-neighbour raw pixels (Image\n         view only \u2014 it's an OpenSeadragon drawer setting). Highlighted when smoothing on. -->\n    <p-button\n      *ngIf=\"tools.specialTools && isImageView\"\n      size=\"small\"\n      [text]=\"!imageSmoothingEnabled\"\n      ariaLabel=\"Smoothen\"\n      pTooltip=\"Smoothen (turn on image smoothing)\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"toggleImageSmoothing.emit()\"\n    >\n      <img\n        src=\"assets/plotting/smooth.svg\"\n        style=\"width: 1rem\"\n        [class]=\"imageSmoothingEnabled ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n      />\n    </p-button>\n\n    <!-- Stack controls -->\n    <toolbar-stack-controls\n      *ngIf=\"imageInfo?.isStack\"\n      [liveScrubber]=\"showsLiveSliceScrubber\"\n      [stackToggle]=\"!showsLiveSliceScrubber && !isNapariMode && !isSpatialMode\"\n      [showStack]=\"!!imageInfo?.showStack\"\n      [stackOptions]=\"stackOptions\"\n      [zIndex]=\"zIndex\"\n      [maxIndex]=\"maxIndex\"\n      (zScrub)=\"zScrub.emit($event)\"\n      (zSlide)=\"zSlide.emit($event)\"\n      (selectStackOption)=\"selectStackOption.emit($event)\"\n      (zIndexInput)=\"zIndexInput.emit($event)\"\n      (reloadAndPlot)=\"reloadAndPlot.emit()\"\n    >\n    </toolbar-stack-controls>\n\n    <!-- Image actions (special tools) -->\n    <ng-container *ngIf=\"tools.specialTools\">\n      <span class=\"toolbar-separator\"></span>\n      <p-button\n        icon=\"pi pi-download\"\n        size=\"small\"\n        [text]=\"true\"\n        ariaLabel=\"Download image as PNG\"\n        pTooltip=\"Download image as PNG\"\n        tooltipPosition=\"bottom\"\n        (onClick)=\"downloadImage.emit()\"\n      >\n      </p-button>\n      <p-button\n        *ngIf=\"isHeatmap\"\n        icon=\"pi pi-window-maximize\"\n        size=\"small\"\n        [text]=\"true\"\n        ariaLabel=\"Fit to view\"\n        pTooltip=\"Fit to view\"\n        tooltipPosition=\"bottom\"\n        (onClick)=\"autoscaleImage.emit()\"\n      >\n      </p-button>\n    </ng-container>\n\n    <toolbar-view-controls\n      [isHeatmap]=\"isHeatmap\"\n      [zoomTools]=\"tools.zoomTools\"\n      [isImageView]=\"isImageView\"\n      [activeDragMode]=\"activeDragMode\"\n      [activeSurface3dMode]=\"activeSurface3dMode\"\n      [axesToggle]=\"showsAxesToggle\"\n      [isNapariSurfaceMode]=\"isNapariSurfaceMode\"\n      [isNapari3dMode]=\"isNapari3dMode\"\n      [axesVisible]=\"axesVisible\"\n      [wireframeActive]=\"wireframeActive\"\n      [resolutionScale]=\"resolutionScale\"\n      (toggleDragMode)=\"toggleDragMode.emit($event)\"\n      (zoomIn)=\"zoomIn.emit()\"\n      (zoomOut)=\"zoomOut.emit()\"\n      (toggleSurface3dMode)=\"toggleSurface3dMode.emit($event)\"\n      (resetSurfaceCamera)=\"resetSurfaceCamera.emit()\"\n      (toggleAxes)=\"toggleAxes.emit()\"\n      (toggleWireframe)=\"toggleWireframe.emit()\"\n      (selectResolution)=\"selectResolution.emit($event)\"\n    >\n    </toolbar-view-controls>\n\n    <!-- A volume view draws no regions; the Region Editor shows them in it in 3D, and the\n         selection tool picks their surfaces there. The slice editor splits the view: the slice,\n         with every region tool, beside the 3D view. -->\n    <ng-container *ngIf=\"isVolumeView && !isHeatmap && !is3dRegions && tools.regionTools\">\n      <span class=\"toolbar-separator\"></span>\n      <p-button\n        size=\"small\"\n        [text]=\"!sliceEditor\"\n        ariaLabel=\"Slice editor\"\n        [attr.aria-pressed]=\"sliceEditor\"\n        [pTooltip]=\"\n          sliceEditor\n            ? 'Close the slice editor'\n            : 'Slice editor: the slice and the sections through x and y beside the 3D view'\n        \"\n        tooltipPosition=\"bottom\"\n        (onClick)=\"toggleSliceEditor.emit()\"\n      >\n        <img\n          src=\"assets/plotting/slice.svg\"\n          style=\"width: 1rem\"\n          alt=\"\"\n          [class]=\"sliceEditor ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n        />\n      </p-button>\n      <toolbar-region-tools\n        *ngIf=\"!sliceEditor\"\n        [activeDragMode]=\"activeDragMode\"\n        [selectOnly]=\"true\"\n        [canUndo]=\"canUndo\"\n        [canRedo]=\"canRedo\"\n        (openRegionEditor)=\"openRegionEditor.emit()\"\n        (toggleDragMode)=\"toggleDragMode.emit($event)\"\n        (undoRegion)=\"undoRegion.emit()\"\n        (redoRegion)=\"redoRegion.emit()\"\n        (deleteRegion)=\"deleteRegion.emit()\"\n      >\n      </toolbar-region-tools>\n    </ng-container>\n    <ng-container *ngIf=\"(isHeatmap || is3dRegions || (isVolumeView && sliceEditor)) && tools.regionTools\">\n      <toolbar-region-tools\n        [activeDragMode]=\"activeDragMode\"\n        [is3dRegions]=\"is3dRegions\"\n        [vertexTools]=\"supportsRegionVertexTools || (isVolumeView && sliceEditor)\"\n        [wandSensitivity]=\"wandSensitivity\"\n        [brushSize]=\"brushSize\"\n        [vertexEraserRadius]=\"vertexEraserRadius\"\n        [canUndo]=\"canUndo\"\n        [canRedo]=\"canRedo\"\n        (openRegionEditor)=\"openRegionEditor.emit()\"\n        (toggleDragMode)=\"toggleDragMode.emit($event)\"\n        (undoRegion)=\"undoRegion.emit()\"\n        (redoRegion)=\"redoRegion.emit()\"\n        (deleteRegion)=\"deleteRegion.emit()\"\n        (wandSensitivityChange)=\"wandSensitivityChange.emit($event)\"\n        (brushSizeChange)=\"brushSizeChange.emit($event)\"\n        (vertexEraserRadiusChange)=\"vertexEraserRadiusChange.emit($event)\"\n      >\n      </toolbar-region-tools>\n      <toolbar-segmentation-tools\n        [activeDragMode]=\"activeDragMode\"\n        [samModels]=\"samModels\"\n        [samModelId]=\"samModelId\"\n        [contributedTools]=\"contributedTools\"\n        [toolModelIds]=\"toolModelIds\"\n        (segmentRegions)=\"segmentRegions.emit()\"\n        (segmentCellpose)=\"segmentCellpose.emit()\"\n        (toggleDragMode)=\"toggleDragMode.emit($event)\"\n        (samModelChange)=\"samModelChange.emit($event)\"\n        (runTool)=\"runTool.emit($event)\"\n        (toolModelChange)=\"toolModelChange.emit($event)\"\n        (openToolParams)=\"openToolParams.emit($event)\"\n      >\n      </toolbar-segmentation-tools>\n    </ng-container>\n\n    <ng-container *ngIf=\"tools.help\">\n      <span class=\"toolbar-separator\"></span>\n\n      <!-- Help -->\n      <p-button\n        icon=\"pi pi-question-circle\"\n        size=\"small\"\n        [text]=\"true\"\n        ariaLabel=\"Help\"\n        pTooltip=\"Help\"\n        tooltipPosition=\"bottom\"\n        (onClick)=\"showHelp()\"\n      >\n      </p-button>\n    </ng-container>\n  </div>\n</p-toolbar>\n<toolbar-help-dialog\n  [(visible)]=\"displayHelpDialog\"\n  [contributedTools]=\"contributedTools\"\n  [dialogTools]=\"dialogTools\"\n>\n</toolbar-help-dialog>\n", styles: [".toolbar-text{color:var(--primary-color);font-size:.875rem}.toolbar-separator{border-left:1px solid var(--surface-border);height:1.5rem;margin:0 .25rem;align-self:center}.toolbar-icon-dark{filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}.toolbar-icon-active{filter:brightness(0) invert(1)}.wand-sensitivity-value{min-width:2rem;text-align:right}:host{display:block}:host ::ng-deep .p-toolbar{padding:.25rem .5rem}::ng-deep .toolbar-input .p-inputtext{color:var(--primary-color);border-color:var(--primary-color)}::ng-deep .p-menu.model-menu{width:auto;min-width:12.5rem}::ng-deep .model-menu-item{display:flex;align-items:center;gap:.5rem}::ng-deep .model-menu-item .p-menuitem-text{flex:1 1 auto;white-space:nowrap}::ng-deep .model-menu-item .model-info-icon{flex:0 0 auto;font-size:.875rem;opacity:.55;cursor:help;appearance:none;background:none;border:0;padding:0;margin:0;color:inherit;line-height:1}::ng-deep .model-menu-item .model-info-icon:hover{opacity:1}::ng-deep .model-menu-item .model-info-icon:focus-visible{opacity:1;outline:2px solid var(--primary-color, #2196f3);outline-offset:2px;border-radius:2px}::ng-deep .model-info-tooltip .p-tooltip-text{min-width:18rem;max-width:24rem;line-height:1.4}::ng-deep .wand-sensitivity-slider{width:8rem;align-self:center;margin:0 .25rem}span.colormap{width:50px;height:auto;display:inline-block}img.colormap{width:50px;height:auto}.colormap{background:no-repeat;background-size:100%;vertical-align:middle}\n"] }]
         }], propDecorators: { imageInfo: [{
                 type: Input
             }], hasSpatialDataset: [{
@@ -20970,6 +20997,8 @@ class SpatialChartsComponent {
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(([view, selection]) => {
             const sourceChanged = view.colorBy?.kind !== this.view.colorBy?.kind || view.colorBy?.name !== this.view.colorBy?.name;
+            // A group recoloured in the Cells panel: the categories are fetched again in their new colours.
+            const groupColorsChanged = this.primed && JSON.stringify(view.groupColors) !== JSON.stringify(this.view.groupColors);
             this.view = view;
             this.colorBy = view.colorBy;
             this.selection = selection;
@@ -20978,9 +21007,11 @@ class SpatialChartsComponent {
             // needs its vector fetched first. The FIRST emission always reloads:
             // otherwise `null -> null` reads as "unchanged" and the component sits
             // with no data and no explanation until something else moves.
-            if (!this.primed || sourceChanged) {
+            if (!this.primed || sourceChanged || groupColorsChanged) {
                 this.primed = true;
                 void this.reload();
+                if (groupColorsChanged && this.groupBy)
+                    void this.onGroupBy(this.groupBy);
             }
             else {
                 // A selection or log-scale change needs only a redraw of the same vector.
@@ -22715,13 +22746,72 @@ function colormapNodeFor(options, value) {
     return null;
 }
 
+/**
+ * One gene's icon and colour: the icon grid, a colour picker with its hex value, presets, and
+ * a reset — the content of a popover its host opens on the gene's swatch. Writes nothing itself:
+ * it reports the choice, and the host stores it where it belongs.
+ */
+class SpatialGeneStyleComponent {
+    constructor() {
+        /** The gene, for the controls' labels. */
+        this.gene = '';
+        /** What the icons and colour are of ("Observation", "Transcript"), for the titles. */
+        this.what = '';
+        /** The gene's colour, `#rrggbb`. */
+        this.color = '#ffffff';
+        /** The gene's icon. */
+        this.glyph = 'circle';
+        /** A note under the icons, e.g. where they show; none when null. */
+        this.iconHint = null;
+        /** False for a colour alone (a cell group, or every gene drawn with one icon): no icon grid. */
+        this.showIcons = true;
+        this.colorChange = new EventEmitter();
+        this.glyphChange = new EventEmitter();
+        /** Back to the gene's default icon and colour. */
+        this.resetStyle = new EventEmitter();
+        this.glyphOptions = GLYPH_OPTIONS;
+        this.colorPresets = DEFAULT_CATEGORICAL_PALETTE.slice(0, 10).map((c) => c.toLowerCase());
+    }
+    /** A typed hex colour, accepted as `#rrggbb` or `rrggbb`; anything else is ignored. */
+    onHex(text) {
+        const t = text.trim();
+        const rgb = /^#?[0-9a-f]{6}$/i.test(t) ? parseCssColor(t) : null;
+        if (rgb)
+            this.colorChange.emit(rgbToHex(rgb));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SpatialGeneStyleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: SpatialGeneStyleComponent, isStandalone: true, selector: "spatial-gene-style", inputs: { gene: "gene", what: "what", color: "color", glyph: "glyph", iconHint: "iconHint", showIcons: "showIcons" }, outputs: { colorChange: "colorChange", glyphChange: "glyphChange", resetStyle: "resetStyle" }, ngImport: i0, template: "<div class=\"sc-style-pop\">\n  <ng-container *ngIf=\"showIcons\">\n    <div class=\"sc-style-title\">{{ what }} Icon</div>\n    <div class=\"sc-style-icons\" role=\"radiogroup\" [attr.aria-label]=\"'Icon for ' + gene\">\n      <button\n        type=\"button\"\n        *ngFor=\"let opt of glyphOptions\"\n        class=\"sc-style-icon\"\n        role=\"radio\"\n        [attr.aria-checked]=\"opt.value === glyph\"\n        [class.active]=\"opt.value === glyph\"\n        [title]=\"opt.label\"\n        (click)=\"glyphChange.emit(opt.value)\"\n      >\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      </button>\n    </div>\n    <small class=\"sc-hint\" *ngIf=\"iconHint\">{{ iconHint }}</small>\n  </ng-container>\n  <div class=\"sc-style-title\">{{ what }} Color</div>\n  <div class=\"sc-style-color\">\n    <label class=\"sc-style-swatch\" [style.background]=\"color\" title=\"Pick a colour\">\n      <input type=\"color\" [value]=\"color\" (change)=\"colorChange.emit($any($event.target).value)\" />\n    </label>\n    <input\n      pInputText\n      class=\"sc-style-hex\"\n      [value]=\"color\"\n      maxlength=\"7\"\n      [attr.aria-label]=\"'Hex colour for ' + gene\"\n      (change)=\"onHex($any($event.target).value)\"\n      (keydown.enter)=\"onHex($any($event.target).value)\"\n    />\n  </div>\n  <div class=\"sc-style-title sc-style-sub\">Presets</div>\n  <div class=\"sc-style-presets\">\n    <button\n      type=\"button\"\n      *ngFor=\"let c of colorPresets\"\n      class=\"sc-style-preset\"\n      [style.background]=\"c\"\n      [class.active]=\"c === color.toLowerCase()\"\n      [title]=\"c\"\n      [attr.aria-label]=\"'Colour ' + c\"\n      (click)=\"colorChange.emit(c)\"\n    ></button>\n  </div>\n  <p-button\n    label=\"Reset to default\"\n    icon=\"pi pi-refresh\"\n    size=\"small\"\n    [text]=\"true\"\n    styleClass=\"sc-style-reset\"\n    (onClick)=\"resetStyle.emit()\"\n  ></p-button>\n</div>\n", styles: ["::ng-deep .sc-gene-style .p-overlaypanel-content{padding:.75rem}.sc-style-pop{display:flex;flex-direction:column;gap:.5rem;width:15rem}.sc-style-title{font-weight:600;font-size:.9rem}.sc-style-sub{font-size:.75rem;text-transform:uppercase;opacity:.7}.sc-style-icons,.sc-style-presets{display:grid;grid-template-columns:repeat(5,1fr);gap:.35rem}.sc-style-icon{display:inline-flex;align-items:center;justify-content:center;height:1.9rem;border:1px solid var(--surface-border, rgba(0, 0, 0, .15));border-radius:4px;background:transparent;color:var(--text-color, inherit);cursor:pointer}.sc-style-icon .sc-glyph-svg{width:1.1rem;height:1.1rem}.sc-style-icon.active{border-color:var(--primary-color, #3b82f6);background:var(--highlight-bg, rgba(59, 130, 246, .12))}.sc-style-color{display:flex;gap:.5rem;align-items:center}.sc-style-swatch{position:relative;flex:0 0 3rem;height:2rem;border-radius:4px;border:1px solid rgba(0,0,0,.2);cursor:pointer}.sc-style-swatch input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}.sc-style-hex{flex:1 1 auto;min-width:0;font-family:monospace}.sc-style-preset{width:1.4rem;height:1.4rem;justify-self:center;border-radius:50%;border:2px solid transparent;cursor:pointer}.sc-style-preset.active{border-color:var(--text-color, #000)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i6.InputText, selector: "[pInputText]", inputs: ["variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SpatialGeneStyleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spatial-gene-style', standalone: true, imports: [CommonModule, ButtonModule, InputTextModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sc-style-pop\">\n  <ng-container *ngIf=\"showIcons\">\n    <div class=\"sc-style-title\">{{ what }} Icon</div>\n    <div class=\"sc-style-icons\" role=\"radiogroup\" [attr.aria-label]=\"'Icon for ' + gene\">\n      <button\n        type=\"button\"\n        *ngFor=\"let opt of glyphOptions\"\n        class=\"sc-style-icon\"\n        role=\"radio\"\n        [attr.aria-checked]=\"opt.value === glyph\"\n        [class.active]=\"opt.value === glyph\"\n        [title]=\"opt.label\"\n        (click)=\"glyphChange.emit(opt.value)\"\n      >\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      </button>\n    </div>\n    <small class=\"sc-hint\" *ngIf=\"iconHint\">{{ iconHint }}</small>\n  </ng-container>\n  <div class=\"sc-style-title\">{{ what }} Color</div>\n  <div class=\"sc-style-color\">\n    <label class=\"sc-style-swatch\" [style.background]=\"color\" title=\"Pick a colour\">\n      <input type=\"color\" [value]=\"color\" (change)=\"colorChange.emit($any($event.target).value)\" />\n    </label>\n    <input\n      pInputText\n      class=\"sc-style-hex\"\n      [value]=\"color\"\n      maxlength=\"7\"\n      [attr.aria-label]=\"'Hex colour for ' + gene\"\n      (change)=\"onHex($any($event.target).value)\"\n      (keydown.enter)=\"onHex($any($event.target).value)\"\n    />\n  </div>\n  <div class=\"sc-style-title sc-style-sub\">Presets</div>\n  <div class=\"sc-style-presets\">\n    <button\n      type=\"button\"\n      *ngFor=\"let c of colorPresets\"\n      class=\"sc-style-preset\"\n      [style.background]=\"c\"\n      [class.active]=\"c === color.toLowerCase()\"\n      [title]=\"c\"\n      [attr.aria-label]=\"'Colour ' + c\"\n      (click)=\"colorChange.emit(c)\"\n    ></button>\n  </div>\n  <p-button\n    label=\"Reset to default\"\n    icon=\"pi pi-refresh\"\n    size=\"small\"\n    [text]=\"true\"\n    styleClass=\"sc-style-reset\"\n    (onClick)=\"resetStyle.emit()\"\n  ></p-button>\n</div>\n", styles: ["::ng-deep .sc-gene-style .p-overlaypanel-content{padding:.75rem}.sc-style-pop{display:flex;flex-direction:column;gap:.5rem;width:15rem}.sc-style-title{font-weight:600;font-size:.9rem}.sc-style-sub{font-size:.75rem;text-transform:uppercase;opacity:.7}.sc-style-icons,.sc-style-presets{display:grid;grid-template-columns:repeat(5,1fr);gap:.35rem}.sc-style-icon{display:inline-flex;align-items:center;justify-content:center;height:1.9rem;border:1px solid var(--surface-border, rgba(0, 0, 0, .15));border-radius:4px;background:transparent;color:var(--text-color, inherit);cursor:pointer}.sc-style-icon .sc-glyph-svg{width:1.1rem;height:1.1rem}.sc-style-icon.active{border-color:var(--primary-color, #3b82f6);background:var(--highlight-bg, rgba(59, 130, 246, .12))}.sc-style-color{display:flex;gap:.5rem;align-items:center}.sc-style-swatch{position:relative;flex:0 0 3rem;height:2rem;border-radius:4px;border:1px solid rgba(0,0,0,.2);cursor:pointer}.sc-style-swatch input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}.sc-style-hex{flex:1 1 auto;min-width:0;font-family:monospace}.sc-style-preset{width:1.4rem;height:1.4rem;justify-self:center;border-radius:50%;border:2px solid transparent;cursor:pointer}.sc-style-preset.active{border-color:var(--text-color, #000)}\n"] }]
+        }], propDecorators: { gene: [{
+                type: Input
+            }], what: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], glyph: [{
+                type: Input
+            }], iconHint: [{
+                type: Input
+            }], showIcons: [{
+                type: Input
+            }], colorChange: [{
+                type: Output
+            }], glyphChange: [{
+                type: Output
+            }], resetStyle: [{
+                type: Output
+            }] } });
+
 /**
  * The cells' grouping, as Xenium Explorer's Groups section: the group picker (columns under
  * their section heading, a k-means family once, with its k beside it), CSV import of a new
- * grouping, and the grouping's categories with their colours, cell counts and show/hide
- * switches.
+ * grouping, and the grouping's categories with their colours (each one's swatch opens a colour
+ * picker), cell counts and show/hide switches.
  *
- * Writes only through `controls.setViewState` (`cellTypeColumn`, `hiddenGroups`).
+ * Writes only through `controls.setViewState` (`cellTypeColumn`, `hiddenGroups`, `groupColors`).
  */
 class SpatialGroupsPanelComponent {
     constructor(zone, cdr) {
@@ -22754,6 +22844,8 @@ class SpatialGroupsPanelComponent {
         this.groupRowsLoad = new Supersede();
         this.groupImportError = null;
         this.groupImporting = false;
+        /** The group the open colour picker edits. */
+        this.styleGroup = null;
         /** {@link SpatialViewState.hiddenGroups} as a set, for the per-row checks. */
         this.hiddenGroups = new Set();
         this.trackByLabel = (_i, row) => row.label;
@@ -22808,6 +22900,43 @@ class SpatialGroupsPanelComponent {
     onAllGroupsShown(on) {
         this.controls?.setViewState({ hiddenGroups: on ? [] : this.groupRows.map((r) => r.label) });
     }
+    // ── per-group colour picker ──────────────────────────────────────────────
+    openGroupStyle(event, label, panel) {
+        if (this.styleGroup === label) {
+            panel.toggle(event);
+            return;
+        }
+        this.styleGroup = label;
+        panel.hide();
+        // Re-open anchored on the row that was clicked, once the panel has closed.
+        setTimeout(() => panel.toggle(event));
+    }
+    /** The colour group `label` is drawn in now (the user's, else the column's or the palette's). */
+    groupColorOf(label) {
+        return this.groupRows.find((r) => r.label === label)?.color ?? '#999999';
+    }
+    onGroupColor(label, hex) {
+        const column = this.activeCellTypeColumn;
+        if (!column)
+            return;
+        const all = this.view.groupColors ?? {};
+        this.controls?.setViewState({ groupColors: { ...all, [column]: { ...all[column], [label]: hex } } });
+    }
+    /** Back to the group's own colour (the column's, else the palette's). */
+    resetGroupColor(label) {
+        const column = this.activeCellTypeColumn;
+        const own = column ? this.view.groupColors?.[column] : undefined;
+        if (!column || !own || !(label in own))
+            return;
+        const rest = { ...own };
+        delete rest[label];
+        const all = { ...this.view.groupColors };
+        if (Object.keys(rest).length)
+            all[column] = rest;
+        else
+            delete all[column];
+        this.controls?.setViewState({ groupColors: all });
+    }
     get canImportGroups() {
         return !!this.controls?.importGroups;
     }
@@ -22850,9 +22979,11 @@ class SpatialGroupsPanelComponent {
             this.groupRowsFor = null;
             return;
         }
-        if (name === this.groupRowsFor)
+        // The user's colours for the grouping are part of what the rows show.
+        const key = `${name}\u0001${groupColorsKey(name, this.view.groupColors)}`;
+        if (key === this.groupRowsFor)
             return;
-        this.groupRowsFor = name;
+        this.groupRowsFor = key;
         const task = this.groupRowsLoad.next();
         try {
             const v = await this.controls.categoricalView(name);
@@ -22879,11 +23010,19 @@ class SpatialGroupsPanelComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SpatialGroupsPanelComponent, 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: SpatialGroupsPanelComponent, isStandalone: true, selector: "spatial-groups-panel", inputs: { controls: "controls", dataset: "dataset", view: "view" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"groupOptions.length\">\n  <div class=\"sc-subhead\">Groups</div>\n  <div class=\"sc-row sc-row-picker\">\n    <p-dropdown\n      [options]=\"groupOptions\"\n      [group]=\"true\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      optionGroupLabel=\"label\"\n      optionGroupChildren=\"items\"\n      [ngModel]=\"activeGroupEntry\"\n      (ngModelChange)=\"onGroupEntry($event)\"\n      appendTo=\"body\"\n      styleClass=\"sc-full\"\n    >\n      <ng-template let-group pTemplate=\"group\">\n        <span class=\"sc-group-heading\">{{ group.label }}</span>\n      </ng-template>\n    </p-dropdown>\n    <p-dropdown\n      *ngIf=\"groupVariantOptions.length\"\n      [options]=\"groupVariantOptions\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      styleClass=\"sc-variant\"\n      [ngModel]=\"activeCellTypeColumn\"\n      (ngModelChange)=\"onGroupVariant($event)\"\n      appendTo=\"body\"\n    ></p-dropdown>\n    <button\n      *ngIf=\"canImportGroups\"\n      type=\"button\"\n      class=\"sc-icon-btn\"\n      [disabled]=\"groupImporting\"\n      (click)=\"groupFile.click()\"\n      title=\"Import cell groups (CSV of cell_id, group)\"\n    >\n      <i\n        class=\"pi\"\n        [class.pi-plus-circle]=\"!groupImporting\"\n        [class.pi-spin]=\"groupImporting\"\n        [class.pi-spinner]=\"groupImporting\"\n      ></i>\n    </button>\n    <input #groupFile type=\"file\" accept=\".csv,.tsv,.txt\" hidden (change)=\"onImportGroupsFile(groupFile)\" />\n  </div>\n  <small class=\"sc-hint sc-error\" *ngIf=\"groupImportError\">{{ groupImportError }}</small>\n\n  <div class=\"sc-group-list\" *ngIf=\"groupRows.length\">\n    <div class=\"sc-group-row sc-group-all\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"allGroupsShown\"\n        (onChange)=\"onAllGroupsShown($event.checked)\"\n      ></p-checkbox>\n      <span class=\"sc-group-label\">All groups</span>\n      <span class=\"sc-count\">({{ groupTotal | number }})</span>\n      <button type=\"button\" class=\"sc-icon-btn\" (click)=\"groupsExpanded = !groupsExpanded\">\n        <i class=\"pi\" [class.pi-chevron-down]=\"groupsExpanded\" [class.pi-chevron-right]=\"!groupsExpanded\"></i>\n      </button>\n    </div>\n    <ng-container *ngIf=\"groupsExpanded\">\n      <div class=\"sc-group-row\" *ngFor=\"let row of groupRows; trackBy: trackByLabel\">\n        <p-checkbox\n          [binary]=\"true\"\n          [ngModel]=\"isGroupShown(row.label)\"\n          (onChange)=\"onGroupShown(row.label, $event.checked)\"\n        ></p-checkbox>\n        <span class=\"sc-dot\" [style.background]=\"row.color\"></span>\n        <span class=\"sc-group-label\" [title]=\"row.label\">{{ row.label }}</span>\n        <span class=\"sc-count\">({{ row.count | number }})</span>\n      </div>\n    </ng-container>\n  </div>\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-dot{flex:0 0 auto;width:.7rem;height:.7rem;border-radius:50%;border:1px solid rgba(0,0,0,.2)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "ngmodule", type: 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: SpatialGroupsPanelComponent, isStandalone: true, selector: "spatial-groups-panel", inputs: { controls: "controls", dataset: "dataset", view: "view" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"groupOptions.length\">\n  <div class=\"sc-subhead\">Groups</div>\n  <div class=\"sc-row sc-row-picker\">\n    <p-dropdown\n      [options]=\"groupOptions\"\n      [group]=\"true\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      optionGroupLabel=\"label\"\n      optionGroupChildren=\"items\"\n      [ngModel]=\"activeGroupEntry\"\n      (ngModelChange)=\"onGroupEntry($event)\"\n      appendTo=\"body\"\n      styleClass=\"sc-full\"\n    >\n      <ng-template let-group pTemplate=\"group\">\n        <span class=\"sc-group-heading\">{{ group.label }}</span>\n      </ng-template>\n    </p-dropdown>\n    <p-dropdown\n      *ngIf=\"groupVariantOptions.length\"\n      [options]=\"groupVariantOptions\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      styleClass=\"sc-variant\"\n      [ngModel]=\"activeCellTypeColumn\"\n      (ngModelChange)=\"onGroupVariant($event)\"\n      appendTo=\"body\"\n    ></p-dropdown>\n    <button\n      *ngIf=\"canImportGroups\"\n      type=\"button\"\n      class=\"sc-icon-btn\"\n      [disabled]=\"groupImporting\"\n      (click)=\"groupFile.click()\"\n      title=\"Import cell groups (CSV of cell_id, group)\"\n    >\n      <i\n        class=\"pi\"\n        [class.pi-plus-circle]=\"!groupImporting\"\n        [class.pi-spin]=\"groupImporting\"\n        [class.pi-spinner]=\"groupImporting\"\n      ></i>\n    </button>\n    <input #groupFile type=\"file\" accept=\".csv,.tsv,.txt\" hidden (change)=\"onImportGroupsFile(groupFile)\" />\n  </div>\n  <small class=\"sc-hint sc-error\" *ngIf=\"groupImportError\">{{ groupImportError }}</small>\n\n  <div class=\"sc-group-list\" *ngIf=\"groupRows.length\">\n    <div class=\"sc-group-row sc-group-all\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"allGroupsShown\"\n        (onChange)=\"onAllGroupsShown($event.checked)\"\n      ></p-checkbox>\n      <span class=\"sc-group-label\">All groups</span>\n      <span class=\"sc-count\">({{ groupTotal | number }})</span>\n      <button type=\"button\" class=\"sc-icon-btn\" (click)=\"groupsExpanded = !groupsExpanded\">\n        <i class=\"pi\" [class.pi-chevron-down]=\"groupsExpanded\" [class.pi-chevron-right]=\"!groupsExpanded\"></i>\n      </button>\n    </div>\n    <ng-container *ngIf=\"groupsExpanded\">\n      <div class=\"sc-group-row\" *ngFor=\"let row of groupRows; trackBy: trackByLabel\">\n        <p-checkbox\n          [binary]=\"true\"\n          [ngModel]=\"isGroupShown(row.label)\"\n          (onChange)=\"onGroupShown(row.label, $event.checked)\"\n        ></p-checkbox>\n        <!-- The group's colour; clicking it opens the colour picker. -->\n        <button\n          type=\"button\"\n          class=\"sc-dot sc-dot-btn\"\n          [style.background]=\"row.color\"\n          [attr.aria-label]=\"'Colour for ' + row.label\"\n          title=\"Colour\"\n          (click)=\"openGroupStyle($event, row.label, groupPop)\"\n        ></button>\n        <span class=\"sc-group-label\" [title]=\"row.label\">{{ row.label }}</span>\n        <span class=\"sc-count\">({{ row.count | number }})</span>\n      </div>\n    </ng-container>\n  </div>\n  <!-- One picker for every group row, filled for the group that opened it. -->\n  <p-overlayPanel #groupPop styleClass=\"sc-gene-style\" appendTo=\"body\">\n    <ng-template pTemplate=\"content\">\n      <spatial-gene-style\n        *ngIf=\"styleGroup as group\"\n        [gene]=\"group\"\n        what=\"Group\"\n        [color]=\"groupColorOf(group)\"\n        [showIcons]=\"false\"\n        (colorChange)=\"onGroupColor(group, $event)\"\n        (resetStyle)=\"resetGroupColor(group)\"\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-dot{flex:0 0 auto;width:.7rem;height:.7rem;border-radius:50%;border:1px solid rgba(0,0,0,.2)}.sc-dot-btn{padding:0;cursor:pointer}.sc-dot-btn:hover,.sc-dot-btn:focus-visible{outline:2px solid var(--surface-border, rgba(0, 0, 0, .35));outline-offset:1px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "ngmodule", type: 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: 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: "component", type: SpatialGeneStyleComponent, selector: "spatial-gene-style", inputs: ["gene", "what", "color", "glyph", "iconHint", "showIcons"], outputs: ["colorChange", "glyphChange", "resetStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SpatialGroupsPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spatial-groups-panel', standalone: true, imports: [CommonModule, FormsModule, SharedModule, CheckboxModule, DropdownModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"groupOptions.length\">\n  <div class=\"sc-subhead\">Groups</div>\n  <div class=\"sc-row sc-row-picker\">\n    <p-dropdown\n      [options]=\"groupOptions\"\n      [group]=\"true\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      optionGroupLabel=\"label\"\n      optionGroupChildren=\"items\"\n      [ngModel]=\"activeGroupEntry\"\n      (ngModelChange)=\"onGroupEntry($event)\"\n      appendTo=\"body\"\n      styleClass=\"sc-full\"\n    >\n      <ng-template let-group pTemplate=\"group\">\n        <span class=\"sc-group-heading\">{{ group.label }}</span>\n      </ng-template>\n    </p-dropdown>\n    <p-dropdown\n      *ngIf=\"groupVariantOptions.length\"\n      [options]=\"groupVariantOptions\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      styleClass=\"sc-variant\"\n      [ngModel]=\"activeCellTypeColumn\"\n      (ngModelChange)=\"onGroupVariant($event)\"\n      appendTo=\"body\"\n    ></p-dropdown>\n    <button\n      *ngIf=\"canImportGroups\"\n      type=\"button\"\n      class=\"sc-icon-btn\"\n      [disabled]=\"groupImporting\"\n      (click)=\"groupFile.click()\"\n      title=\"Import cell groups (CSV of cell_id, group)\"\n    >\n      <i\n        class=\"pi\"\n        [class.pi-plus-circle]=\"!groupImporting\"\n        [class.pi-spin]=\"groupImporting\"\n        [class.pi-spinner]=\"groupImporting\"\n      ></i>\n    </button>\n    <input #groupFile type=\"file\" accept=\".csv,.tsv,.txt\" hidden (change)=\"onImportGroupsFile(groupFile)\" />\n  </div>\n  <small class=\"sc-hint sc-error\" *ngIf=\"groupImportError\">{{ groupImportError }}</small>\n\n  <div class=\"sc-group-list\" *ngIf=\"groupRows.length\">\n    <div class=\"sc-group-row sc-group-all\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"allGroupsShown\"\n        (onChange)=\"onAllGroupsShown($event.checked)\"\n      ></p-checkbox>\n      <span class=\"sc-group-label\">All groups</span>\n      <span class=\"sc-count\">({{ groupTotal | number }})</span>\n      <button type=\"button\" class=\"sc-icon-btn\" (click)=\"groupsExpanded = !groupsExpanded\">\n        <i class=\"pi\" [class.pi-chevron-down]=\"groupsExpanded\" [class.pi-chevron-right]=\"!groupsExpanded\"></i>\n      </button>\n    </div>\n    <ng-container *ngIf=\"groupsExpanded\">\n      <div class=\"sc-group-row\" *ngFor=\"let row of groupRows; trackBy: trackByLabel\">\n        <p-checkbox\n          [binary]=\"true\"\n          [ngModel]=\"isGroupShown(row.label)\"\n          (onChange)=\"onGroupShown(row.label, $event.checked)\"\n        ></p-checkbox>\n        <span class=\"sc-dot\" [style.background]=\"row.color\"></span>\n        <span class=\"sc-group-label\" [title]=\"row.label\">{{ row.label }}</span>\n        <span class=\"sc-count\">({{ row.count | number }})</span>\n      </div>\n    </ng-container>\n  </div>\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-dot{flex:0 0 auto;width:.7rem;height:.7rem;border-radius:50%;border:1px solid rgba(0,0,0,.2)}\n"] }]
+            args: [{ selector: 'spatial-groups-panel', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        SharedModule,
+                        CheckboxModule,
+                        DropdownModule,
+                        OverlayPanelModule,
+                        SpatialGeneStyleComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"groupOptions.length\">\n  <div class=\"sc-subhead\">Groups</div>\n  <div class=\"sc-row sc-row-picker\">\n    <p-dropdown\n      [options]=\"groupOptions\"\n      [group]=\"true\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      optionGroupLabel=\"label\"\n      optionGroupChildren=\"items\"\n      [ngModel]=\"activeGroupEntry\"\n      (ngModelChange)=\"onGroupEntry($event)\"\n      appendTo=\"body\"\n      styleClass=\"sc-full\"\n    >\n      <ng-template let-group pTemplate=\"group\">\n        <span class=\"sc-group-heading\">{{ group.label }}</span>\n      </ng-template>\n    </p-dropdown>\n    <p-dropdown\n      *ngIf=\"groupVariantOptions.length\"\n      [options]=\"groupVariantOptions\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      styleClass=\"sc-variant\"\n      [ngModel]=\"activeCellTypeColumn\"\n      (ngModelChange)=\"onGroupVariant($event)\"\n      appendTo=\"body\"\n    ></p-dropdown>\n    <button\n      *ngIf=\"canImportGroups\"\n      type=\"button\"\n      class=\"sc-icon-btn\"\n      [disabled]=\"groupImporting\"\n      (click)=\"groupFile.click()\"\n      title=\"Import cell groups (CSV of cell_id, group)\"\n    >\n      <i\n        class=\"pi\"\n        [class.pi-plus-circle]=\"!groupImporting\"\n        [class.pi-spin]=\"groupImporting\"\n        [class.pi-spinner]=\"groupImporting\"\n      ></i>\n    </button>\n    <input #groupFile type=\"file\" accept=\".csv,.tsv,.txt\" hidden (change)=\"onImportGroupsFile(groupFile)\" />\n  </div>\n  <small class=\"sc-hint sc-error\" *ngIf=\"groupImportError\">{{ groupImportError }}</small>\n\n  <div class=\"sc-group-list\" *ngIf=\"groupRows.length\">\n    <div class=\"sc-group-row sc-group-all\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"allGroupsShown\"\n        (onChange)=\"onAllGroupsShown($event.checked)\"\n      ></p-checkbox>\n      <span class=\"sc-group-label\">All groups</span>\n      <span class=\"sc-count\">({{ groupTotal | number }})</span>\n      <button type=\"button\" class=\"sc-icon-btn\" (click)=\"groupsExpanded = !groupsExpanded\">\n        <i class=\"pi\" [class.pi-chevron-down]=\"groupsExpanded\" [class.pi-chevron-right]=\"!groupsExpanded\"></i>\n      </button>\n    </div>\n    <ng-container *ngIf=\"groupsExpanded\">\n      <div class=\"sc-group-row\" *ngFor=\"let row of groupRows; trackBy: trackByLabel\">\n        <p-checkbox\n          [binary]=\"true\"\n          [ngModel]=\"isGroupShown(row.label)\"\n          (onChange)=\"onGroupShown(row.label, $event.checked)\"\n        ></p-checkbox>\n        <!-- The group's colour; clicking it opens the colour picker. -->\n        <button\n          type=\"button\"\n          class=\"sc-dot sc-dot-btn\"\n          [style.background]=\"row.color\"\n          [attr.aria-label]=\"'Colour for ' + row.label\"\n          title=\"Colour\"\n          (click)=\"openGroupStyle($event, row.label, groupPop)\"\n        ></button>\n        <span class=\"sc-group-label\" [title]=\"row.label\">{{ row.label }}</span>\n        <span class=\"sc-count\">({{ row.count | number }})</span>\n      </div>\n    </ng-container>\n  </div>\n  <!-- One picker for every group row, filled for the group that opened it. -->\n  <p-overlayPanel #groupPop styleClass=\"sc-gene-style\" appendTo=\"body\">\n    <ng-template pTemplate=\"content\">\n      <spatial-gene-style\n        *ngIf=\"styleGroup as group\"\n        [gene]=\"group\"\n        what=\"Group\"\n        [color]=\"groupColorOf(group)\"\n        [showIcons]=\"false\"\n        (colorChange)=\"onGroupColor(group, $event)\"\n        (resetStyle)=\"resetGroupColor(group)\"\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-dot{flex:0 0 auto;width:.7rem;height:.7rem;border-radius:50%;border:1px solid rgba(0,0,0,.2)}.sc-dot-btn{padding:0;cursor:pointer}.sc-dot-btn:hover,.sc-dot-btn:focus-visible{outline:2px solid var(--surface-border, rgba(0, 0, 0, .35));outline-offset:1px}\n"] }]
         }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { controls: [{
                 type: Input
             }], dataset: [{
@@ -23315,63 +23454,10 @@ function clusterMarkers(rasters, slots, bin, area) {
     };
 }
 
-/**
- * One gene's icon and colour: the icon grid, a colour picker with its hex value, presets, and
- * a reset — the content of a popover its host opens on the gene's swatch. Writes nothing itself:
- * it reports the choice, and the host stores it where it belongs.
- */
-class SpatialGeneStyleComponent {
-    constructor() {
-        /** The gene, for the controls' labels. */
-        this.gene = '';
-        /** What the icons and colour are of ("Observation", "Transcript"), for the titles. */
-        this.what = '';
-        /** The gene's colour, `#rrggbb`. */
-        this.color = '#ffffff';
-        /** The gene's icon. */
-        this.glyph = 'circle';
-        /** A note under the icons, e.g. where they show; none when null. */
-        this.iconHint = null;
-        this.colorChange = new EventEmitter();
-        this.glyphChange = new EventEmitter();
-        /** Back to the gene's default icon and colour. */
-        this.resetStyle = new EventEmitter();
-        this.glyphOptions = GLYPH_OPTIONS;
-        this.colorPresets = DEFAULT_CATEGORICAL_PALETTE.slice(0, 10).map((c) => c.toLowerCase());
-    }
-    /** A typed hex colour, accepted as `#rrggbb` or `rrggbb`; anything else is ignored. */
-    onHex(text) {
-        const t = text.trim();
-        const rgb = /^#?[0-9a-f]{6}$/i.test(t) ? parseCssColor(t) : null;
-        if (rgb)
-            this.colorChange.emit(rgbToHex(rgb));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SpatialGeneStyleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: SpatialGeneStyleComponent, isStandalone: true, selector: "spatial-gene-style", inputs: { gene: "gene", what: "what", color: "color", glyph: "glyph", iconHint: "iconHint" }, outputs: { colorChange: "colorChange", glyphChange: "glyphChange", resetStyle: "resetStyle" }, ngImport: i0, template: "<div class=\"sc-style-pop\">\n  <div class=\"sc-style-title\">{{ what }} Icon</div>\n  <div class=\"sc-style-icons\" role=\"radiogroup\" [attr.aria-label]=\"'Icon for ' + gene\">\n    <button\n      type=\"button\"\n      *ngFor=\"let opt of glyphOptions\"\n      class=\"sc-style-icon\"\n      role=\"radio\"\n      [attr.aria-checked]=\"opt.value === glyph\"\n      [class.active]=\"opt.value === glyph\"\n      [title]=\"opt.label\"\n      (click)=\"glyphChange.emit(opt.value)\"\n    >\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    </button>\n  </div>\n  <small class=\"sc-hint\" *ngIf=\"iconHint\">{{ iconHint }}</small>\n  <div class=\"sc-style-title\">{{ what }} Color</div>\n  <div class=\"sc-style-color\">\n    <label class=\"sc-style-swatch\" [style.background]=\"color\" title=\"Pick a colour\">\n      <input type=\"color\" [value]=\"color\" (change)=\"colorChange.emit($any($event.target).value)\" />\n    </label>\n    <input\n      pInputText\n      class=\"sc-style-hex\"\n      [value]=\"color\"\n      maxlength=\"7\"\n      [attr.aria-label]=\"'Hex colour for ' + gene\"\n      (change)=\"onHex($any($event.target).value)\"\n      (keydown.enter)=\"onHex($any($event.target).value)\"\n    />\n  </div>\n  <div class=\"sc-style-title sc-style-sub\">Presets</div>\n  <div class=\"sc-style-presets\">\n    <button\n      type=\"button\"\n      *ngFor=\"let c of colorPresets\"\n      class=\"sc-style-preset\"\n      [style.background]=\"c\"\n      [class.active]=\"c === color.toLowerCase()\"\n      [title]=\"c\"\n      [attr.aria-label]=\"'Colour ' + c\"\n      (click)=\"colorChange.emit(c)\"\n    ></button>\n  </div>\n  <p-button\n    label=\"Reset to default\"\n    icon=\"pi pi-refresh\"\n    size=\"small\"\n    [text]=\"true\"\n    styleClass=\"sc-style-reset\"\n    (onClick)=\"resetStyle.emit()\"\n  ></p-button>\n</div>\n", styles: ["::ng-deep .sc-gene-style .p-overlaypanel-content{padding:.75rem}.sc-style-pop{display:flex;flex-direction:column;gap:.5rem;width:15rem}.sc-style-title{font-weight:600;font-size:.9rem}.sc-style-sub{font-size:.75rem;text-transform:uppercase;opacity:.7}.sc-style-icons,.sc-style-presets{display:grid;grid-template-columns:repeat(5,1fr);gap:.35rem}.sc-style-icon{display:inline-flex;align-items:center;justify-content:center;height:1.9rem;border:1px solid var(--surface-border, rgba(0, 0, 0, .15));border-radius:4px;background:transparent;color:var(--text-color, inherit);cursor:pointer}.sc-style-icon .sc-glyph-svg{width:1.1rem;height:1.1rem}.sc-style-icon.active{border-color:var(--primary-color, #3b82f6);background:var(--highlight-bg, rgba(59, 130, 246, .12))}.sc-style-color{display:flex;gap:.5rem;align-items:center}.sc-style-swatch{position:relative;flex:0 0 3rem;height:2rem;border-radius:4px;border:1px solid rgba(0,0,0,.2);cursor:pointer}.sc-style-swatch input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}.sc-style-hex{flex:1 1 auto;min-width:0;font-family:monospace}.sc-style-preset{width:1.4rem;height:1.4rem;justify-self:center;border-radius:50%;border:2px solid transparent;cursor:pointer}.sc-style-preset.active{border-color:var(--text-color, #000)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i6.InputText, selector: "[pInputText]", inputs: ["variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SpatialGeneStyleComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'spatial-gene-style', standalone: true, imports: [CommonModule, ButtonModule, InputTextModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sc-style-pop\">\n  <div class=\"sc-style-title\">{{ what }} Icon</div>\n  <div class=\"sc-style-icons\" role=\"radiogroup\" [attr.aria-label]=\"'Icon for ' + gene\">\n    <button\n      type=\"button\"\n      *ngFor=\"let opt of glyphOptions\"\n      class=\"sc-style-icon\"\n      role=\"radio\"\n      [attr.aria-checked]=\"opt.value === glyph\"\n      [class.active]=\"opt.value === glyph\"\n      [title]=\"opt.label\"\n      (click)=\"glyphChange.emit(opt.value)\"\n    >\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    </button>\n  </div>\n  <small class=\"sc-hint\" *ngIf=\"iconHint\">{{ iconHint }}</small>\n  <div class=\"sc-style-title\">{{ what }} Color</div>\n  <div class=\"sc-style-color\">\n    <label class=\"sc-style-swatch\" [style.background]=\"color\" title=\"Pick a colour\">\n      <input type=\"color\" [value]=\"color\" (change)=\"colorChange.emit($any($event.target).value)\" />\n    </label>\n    <input\n      pInputText\n      class=\"sc-style-hex\"\n      [value]=\"color\"\n      maxlength=\"7\"\n      [attr.aria-label]=\"'Hex colour for ' + gene\"\n      (change)=\"onHex($any($event.target).value)\"\n      (keydown.enter)=\"onHex($any($event.target).value)\"\n    />\n  </div>\n  <div class=\"sc-style-title sc-style-sub\">Presets</div>\n  <div class=\"sc-style-presets\">\n    <button\n      type=\"button\"\n      *ngFor=\"let c of colorPresets\"\n      class=\"sc-style-preset\"\n      [style.background]=\"c\"\n      [class.active]=\"c === color.toLowerCase()\"\n      [title]=\"c\"\n      [attr.aria-label]=\"'Colour ' + c\"\n      (click)=\"colorChange.emit(c)\"\n    ></button>\n  </div>\n  <p-button\n    label=\"Reset to default\"\n    icon=\"pi pi-refresh\"\n    size=\"small\"\n    [text]=\"true\"\n    styleClass=\"sc-style-reset\"\n    (onClick)=\"resetStyle.emit()\"\n  ></p-button>\n</div>\n", styles: ["::ng-deep .sc-gene-style .p-overlaypanel-content{padding:.75rem}.sc-style-pop{display:flex;flex-direction:column;gap:.5rem;width:15rem}.sc-style-title{font-weight:600;font-size:.9rem}.sc-style-sub{font-size:.75rem;text-transform:uppercase;opacity:.7}.sc-style-icons,.sc-style-presets{display:grid;grid-template-columns:repeat(5,1fr);gap:.35rem}.sc-style-icon{display:inline-flex;align-items:center;justify-content:center;height:1.9rem;border:1px solid var(--surface-border, rgba(0, 0, 0, .15));border-radius:4px;background:transparent;color:var(--text-color, inherit);cursor:pointer}.sc-style-icon .sc-glyph-svg{width:1.1rem;height:1.1rem}.sc-style-icon.active{border-color:var(--primary-color, #3b82f6);background:var(--highlight-bg, rgba(59, 130, 246, .12))}.sc-style-color{display:flex;gap:.5rem;align-items:center}.sc-style-swatch{position:relative;flex:0 0 3rem;height:2rem;border-radius:4px;border:1px solid rgba(0,0,0,.2);cursor:pointer}.sc-style-swatch input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}.sc-style-hex{flex:1 1 auto;min-width:0;font-family:monospace}.sc-style-preset{width:1.4rem;height:1.4rem;justify-self:center;border-radius:50%;border:2px solid transparent;cursor:pointer}.sc-style-preset.active{border-color:var(--text-color, #000)}\n"] }]
-        }], propDecorators: { gene: [{
-                type: Input
-            }], what: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], glyph: [{
-                type: Input
-            }], iconHint: [{
-                type: Input
-            }], colorChange: [{
-                type: Output
-            }], glyphChange: [{
-                type: Output
-            }], resetStyle: [{
-                type: Output
-            }] } });
-
 /** Rows of the all-genes list drawn at once; the filter narrows the rest. */
 const ALL_GENES_ROWS = 200;
+/** Names in reading order: case aside, and `G9` before `G10`. */
+const byName = (a, b) => a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' });
 /**
  * The selected transcript genes as Xenium Explorer's tree: the gene groups, then the
  * ungrouped genes, each row with an eye that hides it without deselecting it, its marker
@@ -23380,6 +23466,11 @@ const ALL_GENES_ROWS = 200;
  * expands to every gene of the dataset, each with its eye when the dataset lists its genes
  * in code order (`transcriptTiles.genes`), filtered by name past a few hundred.
  *
+ * Both lists are ordered by name, or by their transcripts in view, most first (the
+ * sort switch, offered once the renderer reports counts). The all-genes list is sorted
+ * before it is cut to its first rows, so by count those are the genes with the most
+ * transcripts in view.
+ *
  * Writes only through `controls.setViewState`.
  */
 class SpatialGeneTreeComponent {
@@ -23399,6 +23490,10 @@ class SpatialGeneTreeComponent {
         /** Swatches in the picker: the categorical palette genes are coloured from by default. */
         /** The tree, rebuilt when the view changes — never per change-detection pass. */
         this.geneTree = [];
+        /** {@link geneTree} with each node's genes in {@link geneSort} order: what the template draws. */
+        this.sortedTree = [];
+        /** The rows' order. By count only while the renderer reports counts (see {@link sortShown}). */
+        this.geneSort = 'name';
         /** Per gene: its eye, swatch, glyph and count — rebuilt with the inputs (and when the
          *  cells' group colours arrive), so the template does no per-row lookups per check. */
         this.rows = new Map();
@@ -23460,8 +23555,30 @@ class SpatialGeneTreeComponent {
             .filter((node) => node.name)
             .map((node) => [node.name, this.areGenesShown(node.genes)]));
         this.rootShown = this.view.transcriptAllGenes ? this.anyOfAllGenesShown() : this.areGenesShown(genes);
+        this.sortedTree = this.geneTree.map((node) => ({ ...node, genes: this.sorted(node.genes) }));
         this.rebuildAllRows();
     }
+    /** Whether the rows are ordered by count: chosen, and counts to order by. */
+    get byCount() {
+        return this.geneSort === 'count' && !!this.geneCounts;
+    }
+    /** The sort switch is offered once there are counts to sort by. */
+    get sortShown() {
+        return !!this.geneCounts;
+    }
+    onGeneSort(sort) {
+        if (sort === this.geneSort)
+            return;
+        this.geneSort = sort;
+        this.rebuildRows();
+    }
+    /** `genes` in the rows' order: by count, most first (ties by name), else by name. */
+    sorted(genes) {
+        if (!this.byCount)
+            return [...genes].sort(byName);
+        const counts = this.geneCounts ?? {};
+        return [...genes].sort((a, b) => (counts[b] ?? 0) - (counts[a] ?? 0) || byName(a, b));
+    }
     /**
      * The all-genes list's rows: the genes matching the filter, up to the cap. Built only while
      * the list is open: the counts in view change with every pan, and the list can be thousands.
@@ -23475,24 +23592,25 @@ class SpatialGeneTreeComponent {
         }
         const needle = this.allGenesFilter.trim().toLowerCase();
         const shown = allGeneShownBy(this.view.transcriptAllGenesHidden);
-        const rows = [];
-        let matched = 0;
+        // Every match, ordered, and only then cut: by count the first rows are the most abundant.
+        const codes = new Map();
         list.forEach((gene, code) => {
             // An empty name is a code no transcript carries (a control probe).
             if (!gene || (needle && !gene.toLowerCase().includes(needle)))
                 return;
-            matched++;
-            if (rows.length >= ALL_GENES_ROWS)
-                return;
-            rows.push({
-                gene,
-                shown: shown(gene),
-                swatch: this.canHideAllGenes ? this.allGeneColorOf(gene, code) : null,
-                count: this.geneCountOf(gene),
-            });
+            if (!codes.has(gene))
+                codes.set(gene, code);
         });
-        this.allRows = rows;
-        this.allGenesMatched = matched;
+        this.allRows = this.sorted([...codes.keys()])
+            .slice(0, ALL_GENES_ROWS)
+            .map((gene) => ({
+            gene,
+            shown: shown(gene),
+            swatch: this.canHideAllGenes ? this.allGeneColorOf(gene, codes.get(gene)) : null,
+            code: codes.get(gene),
+            count: this.geneCountOf(gene),
+        }));
+        this.allGenesMatched = codes.size;
     }
     /** Whether "All genes" draws anything: not switched off whole, nor every listed gene hidden. */
     anyOfAllGenesShown() {
@@ -23594,6 +23712,18 @@ class SpatialGeneTreeComponent {
     geneColorOf(gene) {
         return this.geneColor(Math.max(0, this.view.transcriptGenes.indexOf(gene)));
     }
+    /**
+     * The colour the open picker shows: with "All genes", the gene's colour among every gene (its
+     * chosen one, else the palette's by its code), as its row and its markers have it.
+     */
+    styleColorOf(gene) {
+        if (this.view.transcriptAllGenes) {
+            const row = this.allRows.find((r) => r.gene === gene);
+            if (row)
+                return this.allGeneColorOf(gene, row.code);
+        }
+        return this.geneColorOf(gene);
+    }
     /** In Cluster colouring, a gene's swatch is its cluster's colour, as its markers are. */
     geneSwatchOf(gene) {
         if (this.view.transcriptColorBy !== 'cluster')
@@ -23619,9 +23749,11 @@ class SpatialGeneTreeComponent {
     }
     async refreshCellGroupColors() {
         const column = this.dataset ? cellTypeColumnFor(this.dataset, this.view) : null;
-        if (column === this.cellGroupColorsFor)
+        // The user's colours for the grouping are part of what the cluster swatches show.
+        const key = column === null ? null : `${column}\u0001${groupColorsKey(column, this.view.groupColors)}`;
+        if (key === this.cellGroupColorsFor)
             return;
-        this.cellGroupColorsFor = column;
+        this.cellGroupColorsFor = key;
         const task = this.cellGroupColorsLoad.next();
         const map = new Map();
         const meta = column ? this.dataset?.columns.find((c) => c.name === column) : null;
@@ -23647,7 +23779,7 @@ class SpatialGeneTreeComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SpatialGeneTreeComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: SpatialGeneTreeComponent, isStandalone: true, selector: "spatial-gene-tree", inputs: { controls: "controls", dataset: "dataset", view: "view", geneCounts: "geneCounts", geneTotal: "geneTotal" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"sc-subhead\">Selected genes</div>\n<div class=\"sc-gene-tree\">\n  <div class=\"sc-gene-row sc-gene-root\">\n    <button\n      type=\"button\"\n      class=\"sc-eye\"\n      (click)=\"\n        view.transcriptAllGenes ? onAllGenesShown(!rootShown) : onGenesShown(view.transcriptGenes, !rootShown)\n      \"\n    >\n      <i class=\"pi\" [class.pi-eye]=\"rootShown\" [class.pi-eye-slash]=\"!rootShown\"></i>\n    </button>\n    <span class=\"sc-group-label\">Genes</span>\n    <span class=\"sc-count\"\n      >({{ (view.transcriptAllGenes ? geneTotal : view.transcriptGenes.length) | number }}/{{\n        geneTotal | number\n      }})</span\n    >\n    <button\n      type=\"button\"\n      class=\"sc-icon-btn\"\n      (click)=\"geneTreeOpen = !geneTreeOpen\"\n      *ngIf=\"!view.transcriptAllGenes && view.transcriptGenes.length\"\n    >\n      <i class=\"pi\" [class.pi-chevron-down]=\"geneTreeOpen\" [class.pi-chevron-right]=\"!geneTreeOpen\"></i>\n    </button>\n    <button\n      type=\"button\"\n      class=\"sc-icon-btn\"\n      (click)=\"toggleAllGenesOpen()\"\n      *ngIf=\"view.transcriptAllGenes && allGeneList?.length\"\n      [attr.aria-label]=\"allGenesOpen ? 'Hide the gene list' : 'Show every gene'\"\n    >\n      <i class=\"pi\" [class.pi-chevron-down]=\"allGenesOpen\" [class.pi-chevron-right]=\"!allGenesOpen\"></i>\n    </button>\n  </div>\n  <!-- \"All genes\": every gene of the dataset, each with its eye when the dataset says which\n       transcripts are whose (its gene list in code order). -->\n  <ng-container *ngIf=\"allGenesOpen && view.transcriptAllGenes && allGeneList?.length\">\n    <input\n      pInputText\n      class=\"sc-gene-filter\"\n      placeholder=\"Filter genes\u2026\"\n      aria-label=\"Filter genes\"\n      [value]=\"allGenesFilter\"\n      (input)=\"onAllGenesFilter($any($event.target).value)\"\n    />\n    <small class=\"sc-hint\" *ngIf=\"!canHideAllGenes\">\n      This dataset does not say which transcripts are whose, so its genes cannot be hidden one by one.\n    </small>\n    <small class=\"sc-hint\" *ngIf=\"canHideAllGenes && view.transcriptMode === 'density'\">\n      The density map draws every gene as one raster: genes are hidden one by one as circles or icons.\n    </small>\n    <div class=\"sc-gene-row sc-gene-leaf nested\" *ngFor=\"let row of allRows; trackBy: trackByAllRow\">\n      <button\n        type=\"button\"\n        class=\"sc-eye\"\n        [disabled]=\"!canHideAllGenes || view.transcriptMode === 'density'\"\n        (click)=\"onAllGeneShown(row.gene, !row.shown)\"\n      >\n        <i class=\"pi\" [class.pi-eye]=\"row.shown\" [class.pi-eye-slash]=\"!row.shown\"></i>\n      </button>\n      <span class=\"sc-gene-icon\" *ngIf=\"row.swatch\" [style.color]=\"row.swatch\" aria-hidden=\"true\">\n        <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\"><circle r=\"0.75\"></circle></svg>\n      </span>\n      <span class=\"sc-group-label\" [title]=\"row.gene\">{{ row.gene }}</span>\n      <span class=\"sc-gene-count\" *ngIf=\"row.count !== null\" title=\"Transcripts in view\">{{\n        row.count | number\n      }}</span>\n    </div>\n    <small class=\"sc-hint\" *ngIf=\"allGenesMatched > allRows.length\">\n      Showing {{ allRows.length | number }} of {{ allGenesMatched | number }} genes: filter to find the others.\n    </small>\n    <small class=\"sc-hint\" *ngIf=\"allGenesMatched === 0\">No gene matches.</small>\n  </ng-container>\n  <ng-container *ngIf=\"geneTreeOpen && !view.transcriptAllGenes\">\n    <ng-container *ngFor=\"let node of geneTree; trackBy: trackByNode\">\n      <div class=\"sc-gene-row sc-gene-group\" *ngIf=\"node.name\">\n        <button type=\"button\" class=\"sc-eye\" (click)=\"onGenesShown(node.genes, !groupShown.get(node.name))\">\n          <i\n            class=\"pi\"\n            [class.pi-eye]=\"groupShown.get(node.name)\"\n            [class.pi-eye-slash]=\"!groupShown.get(node.name)\"\n          ></i>\n        </button>\n        <span class=\"sc-group-label\" [title]=\"node.name\">{{ node.name }}</span>\n        <span class=\"sc-count\">({{ node.genes.length }})</span>\n        <button type=\"button\" class=\"sc-icon-btn\" (click)=\"toggleGeneGroup(node.name)\">\n          <i\n            class=\"pi\"\n            [class.pi-chevron-down]=\"!collapsedGeneGroups.has(node.name)\"\n            [class.pi-chevron-right]=\"collapsedGeneGroups.has(node.name)\"\n          ></i>\n        </button>\n      </div>\n      <ng-container *ngIf=\"!node.name || !collapsedGeneGroups.has(node.name)\">\n        <div\n          class=\"sc-gene-row sc-gene-leaf\"\n          [class.nested]=\"!!node.name\"\n          *ngFor=\"let gene of node.genes; trackBy: trackByLabelString\"\n        >\n          <button type=\"button\" class=\"sc-eye\" (click)=\"onGenesShown([gene], !rows.get(gene)?.shown)\">\n            <i class=\"pi\" [class.pi-eye]=\"rows.get(gene)?.shown\" [class.pi-eye-slash]=\"!rows.get(gene)?.shown\"></i>\n          </button>\n          <!-- The gene's marker, in its colour: its icon in Icons mode, a dot for circles.\n               Clicking it opens the icon and colour picker (as Xenium Explorer does). -->\n          <button\n            type=\"button\"\n            class=\"sc-gene-icon\"\n            [style.color]=\"rows.get(gene)?.swatch\"\n            [attr.aria-label]=\"'Icon and colour for ' + gene\"\n            pTooltip=\"Icon and colour\"\n            tooltipPosition=\"top\"\n            (click)=\"openGeneStyle($event, gene, genePop)\"\n          >\n            <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\">\n              <polygon\n                *ngIf=\"view.transcriptMode === 'glyphs'; else dotIcon\"\n                [attr.points]=\"rows.get(gene)?.points\"\n              ></polygon>\n              <ng-template #dotIcon><circle r=\"0.75\"></circle></ng-template>\n            </svg>\n          </button>\n          <span class=\"sc-group-label\">{{ gene }}</span>\n          <span\n            class=\"sc-gene-count\"\n            *ngIf=\"rows.get(gene)?.count as n; else zeroCount\"\n            title=\"Transcripts in view\"\n            >{{ n | number }}</span\n          >\n          <ng-template #zeroCount>\n            <span class=\"sc-gene-count\" *ngIf=\"geneCounts\" title=\"Transcripts in view\">0</span>\n          </ng-template>\n        </div>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n  <!-- One picker for every gene row, filled for the gene that opened it. -->\n  <p-overlayPanel #genePop styleClass=\"sc-gene-style\" appendTo=\"body\">\n    <ng-template pTemplate=\"content\">\n      <spatial-gene-style\n        *ngIf=\"styleGene as gene\"\n        [gene]=\"gene\"\n        what=\"Transcript\"\n        [color]=\"geneColorOf(gene)\"\n        [glyph]=\"styleGlyph ?? 'circle'\"\n        [iconHint]=\"\n          view.transcriptMode !== 'glyphs' ? 'Icons show when the transcript point style is Icons.' : null\n        \"\n        (colorChange)=\"onGeneColor(gene, $event)\"\n        (glyphChange)=\"onGlyph(gene, $event)\"\n        (resetStyle)=\"resetGeneStyle(gene)\"\n      ></spatial-gene-style>\n    </ng-template>\n  </p-overlayPanel>\n  <div class=\"sc-gene-footer\">\n    {{ (view.transcriptAllGenes ? geneTotal : view.transcriptGenes.length) | number }}/{{ geneTotal | number }}\n    genes selected\n  </div>\n</div>\n", styles: [".sc-hint{font-size:.75rem;color:var(--text-color-secondary, #6c757d)}.sc-error{color:var(--red-600, #c62828)}.sc-section{display:flex;flex-direction:column;gap:.35rem}.sc-lbl{font-size:.78rem;color:var(--text-color-secondary, #6c757d);white-space:nowrap}.sc-row{display:flex;align-items:center;gap:.6rem}.sc-row p-slider,.sc-row p-dropdown,.sc-row p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row p-slider .p-slider{width:100%}:host ::ng-deep .sc-row p-dropdown .p-dropdown,:host ::ng-deep .sc-row p-treeSelect .p-treeselect{width:100%}.sc-row .sc-lbl{flex:0 0 calc(50% - .6rem);min-width:0;overflow:hidden;text-overflow:ellipsis}.sc-cmap-option{display:inline-flex;align-items:center;gap:.4rem}.sc-cmap-swatch{width:3.5rem;height:.7rem;border-radius:2px;display:block}.sc-val{flex:0 0 4rem;text-align:right;font-size:.78rem;font-variant-numeric:tabular-nums;white-space:nowrap}:host ::ng-deep .sc-full,:host ::ng-deep .sc-full .p-dropdown,:host ::ng-deep .sc-full .p-autocomplete,:host ::ng-deep .sc-full input{width:100%}.sc-colorbar{height:.75rem;border-radius:2px;border:1px solid rgba(0,0,0,.2)}.sc-colorbar-ends{display:flex;justify-content:space-between;font-size:.7rem;color:var(--text-color-secondary, #6c757d);margin-top:.2rem}.sc-panel{border:1px solid var(--surface-border, #dee2e6);border-radius:6px;margin-bottom:.5rem;overflow:hidden}.sc-panel-head{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--surface-100, #f5f6f7)}.sc-panel-head .sc-panel-title{flex:1;font-weight:600}.sc-panel.open>.sc-panel-head{background:var(--primary-color, #2196f3);color:var(--primary-color-text, #fff)}.sc-panel-body{display:flex;flex-direction:column;gap:.45rem;padding:.6rem .75rem .75rem}.sc-subhead{display:flex;align-items:center;gap:.5rem;margin-top:.4rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-color-secondary, #6c757d)}.sc-subhead:after{content:\"\";flex:1;border-top:1px solid var(--surface-border, #dee2e6)}:host ::ng-deep .sc-buttons .p-button{padding:.35rem .75rem;font-size:.85rem}.sc-row-picker p-dropdown,.sc-row-picker p-multiSelect,.sc-row-picker p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row-picker .sc-variant{width:6.5rem}:host ::ng-deep .sc-row-picker p-multiselect .p-multiselect{width:100%}:host ::ng-deep .sc-row-picker p-dropdown:has(.sc-variant){flex:0 0 6.5rem}:host ::ng-deep .sc-row-picker p-treeselect:has(.sc-palette){flex:0 0 3rem}:host ::ng-deep .sc-palette .p-treeselect-label{width:0;padding:0}.sc-icon-btn{flex:0 0 auto;border:0;background:transparent;cursor:pointer;padding:.25rem .35rem;font:inherit;font-size:1.05rem;color:var(--text-color, #333);border-radius:4px}.sc-icon-btn:hover{background:var(--surface-200, #e9ecef)}.sc-icon-btn.active{color:var(--primary-color, #2196f3);font-weight:700}.sc-icon-btn:disabled{opacity:.5;cursor:default}.sc-small-btn{margin-left:auto;border:1px solid var(--surface-border, #ced4da);background:var(--surface-0, #fff);border-radius:4px;padding:.2rem .6rem;font:inherit;font-size:.8rem;cursor:pointer}:host ::ng-deep .sc-group-heading{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.7}.sc-group-list,.sc-gene-tree{max-height:16rem;overflow-y:auto;border:1px solid var(--surface-border, #dee2e6);border-radius:4px;padding:.25rem .4rem}.sc-group-row,.sc-gene-row{display:flex;align-items:center;gap:.45rem;padding:.15rem 0;font-size:.88rem}.sc-group-row .sc-group-label,.sc-gene-row .sc-group-label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-group-all,.sc-gene-root,.sc-gene-group{font-weight:600}.sc-group-all .sc-icon-btn,.sc-gene-root .sc-icon-btn,.sc-gene-group .sc-icon-btn{margin-left:auto;font-size:.85rem}.sc-count{flex:0 0 auto;font-size:.78rem;color:var(--text-color-secondary, #6c757d)}.sc-glyph-option{display:inline-flex;align-items:center;gap:.4rem}.sc-glyph-svg{width:1rem;height:1rem;fill:currentColor}:host ::ng-deep .sc-glyph-pick .p-dropdown-label{padding:.2rem .4rem}.sc-color-input{width:2.5rem;height:1.8rem;border:1px solid var(--surface-border, #ced4da);border-radius:4px;padding:0;background:none}.sc-row-number p-slider,.sc-row-range p-slider{flex:1 1 0;min-width:0}:host ::ng-deep .sc-num{width:4.5rem;padding:.3rem .4rem;text-align:center}:host ::ng-deep .sc-row-number p-inputnumber,:host ::ng-deep .sc-row-range p-inputnumber{flex:0 0 auto}.sc-gene-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1.4rem;height:1.4rem;padding:0;border:1px solid transparent;border-radius:4px;background:transparent;cursor:pointer}.sc-gene-icon:hover,.sc-gene-icon:focus-visible{border-color:var(--surface-border, rgba(0, 0, 0, .2))}:host{display:contents}.sc-gene-group,.sc-gene-leaf{padding-left:1rem}.sc-gene-leaf.nested{padding-left:2rem}.sc-eye{flex:0 0 auto;border:0;background:transparent;cursor:pointer;padding:0;color:var(--text-color-secondary, #6c757d)}.sc-eye .pi-eye{color:var(--text-color, #333)}.sc-eye:disabled{cursor:default;opacity:.5}.sc-gene-filter{width:calc(100% - 1rem);margin:.2rem 0 .2rem 1rem;font-size:.8rem;padding:.2rem .4rem}.sc-gene-footer{text-align:right;font-size:.78rem;padding:.2rem 0;color:var(--text-color-secondary, #6c757d)}.sc-gene-count{margin-left:auto;font-variant-numeric:tabular-nums;opacity:.8;padding-left:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i6.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i10.OverlayPanel, selector: "p-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: SpatialGeneStyleComponent, selector: "spatial-gene-style", inputs: ["gene", "what", "color", "glyph", "iconHint"], outputs: ["colorChange", "glyphChange", "resetStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: SpatialGeneTreeComponent, isStandalone: true, selector: "spatial-gene-tree", inputs: { controls: "controls", dataset: "dataset", view: "view", geneCounts: "geneCounts", geneTotal: "geneTotal" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"sc-subhead\">Selected genes</div>\n<div class=\"sc-gene-sort\" *ngIf=\"sortShown\" role=\"group\" aria-label=\"Sort genes\">\n  <span class=\"sc-lbl\">Sort by</span>\n  <button\n    type=\"button\"\n    class=\"sc-sort-btn\"\n    [class.active]=\"!byCount\"\n    [attr.aria-pressed]=\"!byCount\"\n    (click)=\"onGeneSort('name')\"\n  >\n    Name\n  </button>\n  <button\n    type=\"button\"\n    class=\"sc-sort-btn\"\n    [class.active]=\"byCount\"\n    [attr.aria-pressed]=\"byCount\"\n    title=\"Transcripts in view, most first\"\n    (click)=\"onGeneSort('count')\"\n  >\n    Count\n  </button>\n</div>\n<div class=\"sc-gene-tree\">\n  <div class=\"sc-gene-row sc-gene-root\">\n    <button\n      type=\"button\"\n      class=\"sc-eye\"\n      (click)=\"\n        view.transcriptAllGenes ? onAllGenesShown(!rootShown) : onGenesShown(view.transcriptGenes, !rootShown)\n      \"\n    >\n      <i class=\"pi\" [class.pi-eye]=\"rootShown\" [class.pi-eye-slash]=\"!rootShown\"></i>\n    </button>\n    <span class=\"sc-group-label\">Genes</span>\n    <span class=\"sc-count\"\n      >({{ (view.transcriptAllGenes ? geneTotal : view.transcriptGenes.length) | number }}/{{\n        geneTotal | number\n      }})</span\n    >\n    <button\n      type=\"button\"\n      class=\"sc-icon-btn\"\n      (click)=\"geneTreeOpen = !geneTreeOpen\"\n      *ngIf=\"!view.transcriptAllGenes && view.transcriptGenes.length\"\n    >\n      <i class=\"pi\" [class.pi-chevron-down]=\"geneTreeOpen\" [class.pi-chevron-right]=\"!geneTreeOpen\"></i>\n    </button>\n    <button\n      type=\"button\"\n      class=\"sc-icon-btn\"\n      (click)=\"toggleAllGenesOpen()\"\n      *ngIf=\"view.transcriptAllGenes && allGeneList?.length\"\n      [attr.aria-label]=\"allGenesOpen ? 'Hide the gene list' : 'Show every gene'\"\n    >\n      <i class=\"pi\" [class.pi-chevron-down]=\"allGenesOpen\" [class.pi-chevron-right]=\"!allGenesOpen\"></i>\n    </button>\n  </div>\n  <!-- \"All genes\": every gene of the dataset, each with its eye when the dataset says which\n       transcripts are whose (its gene list in code order). -->\n  <ng-container *ngIf=\"allGenesOpen && view.transcriptAllGenes && allGeneList?.length\">\n    <input\n      pInputText\n      class=\"sc-gene-filter\"\n      placeholder=\"Filter genes\u2026\"\n      aria-label=\"Filter genes\"\n      [value]=\"allGenesFilter\"\n      (input)=\"onAllGenesFilter($any($event.target).value)\"\n    />\n    <small class=\"sc-hint\" *ngIf=\"!canHideAllGenes\">\n      This dataset does not say which transcripts are whose, so its genes cannot be hidden one by one.\n    </small>\n    <small class=\"sc-hint\" *ngIf=\"canHideAllGenes && view.transcriptMode === 'density'\">\n      The density map draws every gene as one raster: genes are hidden one by one as circles or icons.\n    </small>\n    <div class=\"sc-gene-row sc-gene-leaf nested\" *ngFor=\"let row of allRows; trackBy: trackByAllRow\">\n      <button\n        type=\"button\"\n        class=\"sc-eye\"\n        [disabled]=\"!canHideAllGenes || view.transcriptMode === 'density'\"\n        (click)=\"onAllGeneShown(row.gene, !row.shown)\"\n      >\n        <i class=\"pi\" [class.pi-eye]=\"row.shown\" [class.pi-eye-slash]=\"!row.shown\"></i>\n      </button>\n      <!-- The gene's colour among every gene; clicking it opens the colour picker. -->\n      <button\n        type=\"button\"\n        class=\"sc-gene-icon\"\n        *ngIf=\"row.swatch\"\n        [style.color]=\"row.swatch\"\n        [attr.aria-label]=\"'Colour for ' + row.gene\"\n        pTooltip=\"Colour\"\n        tooltipPosition=\"top\"\n        (click)=\"openGeneStyle($event, row.gene, genePop)\"\n      >\n        <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\"><circle r=\"0.75\"></circle></svg>\n      </button>\n      <span class=\"sc-group-label\" [title]=\"row.gene\">{{ row.gene }}</span>\n      <span class=\"sc-gene-count\" *ngIf=\"row.count !== null\" title=\"Transcripts in view\">{{\n        row.count | number\n      }}</span>\n    </div>\n    <small class=\"sc-hint\" *ngIf=\"allGenesMatched > allRows.length\">\n      Showing {{ allRows.length | number }} of {{ allGenesMatched | number }} genes: filter to find the others.\n    </small>\n    <small class=\"sc-hint\" *ngIf=\"allGenesMatched === 0\">No gene matches.</small>\n  </ng-container>\n  <ng-container *ngIf=\"geneTreeOpen && !view.transcriptAllGenes\">\n    <ng-container *ngFor=\"let node of sortedTree; trackBy: trackByNode\">\n      <div class=\"sc-gene-row sc-gene-group\" *ngIf=\"node.name\">\n        <button type=\"button\" class=\"sc-eye\" (click)=\"onGenesShown(node.genes, !groupShown.get(node.name))\">\n          <i\n            class=\"pi\"\n            [class.pi-eye]=\"groupShown.get(node.name)\"\n            [class.pi-eye-slash]=\"!groupShown.get(node.name)\"\n          ></i>\n        </button>\n        <span class=\"sc-group-label\" [title]=\"node.name\">{{ node.name }}</span>\n        <span class=\"sc-count\">({{ node.genes.length }})</span>\n        <button type=\"button\" class=\"sc-icon-btn\" (click)=\"toggleGeneGroup(node.name)\">\n          <i\n            class=\"pi\"\n            [class.pi-chevron-down]=\"!collapsedGeneGroups.has(node.name)\"\n            [class.pi-chevron-right]=\"collapsedGeneGroups.has(node.name)\"\n          ></i>\n        </button>\n      </div>\n      <ng-container *ngIf=\"!node.name || !collapsedGeneGroups.has(node.name)\">\n        <div\n          class=\"sc-gene-row sc-gene-leaf\"\n          [class.nested]=\"!!node.name\"\n          *ngFor=\"let gene of node.genes; trackBy: trackByLabelString\"\n        >\n          <button type=\"button\" class=\"sc-eye\" (click)=\"onGenesShown([gene], !rows.get(gene)?.shown)\">\n            <i class=\"pi\" [class.pi-eye]=\"rows.get(gene)?.shown\" [class.pi-eye-slash]=\"!rows.get(gene)?.shown\"></i>\n          </button>\n          <!-- The gene's marker, in its colour: its icon in Icons mode, a dot for circles.\n               Clicking it opens the icon and colour picker (as Xenium Explorer does). -->\n          <button\n            type=\"button\"\n            class=\"sc-gene-icon\"\n            [style.color]=\"rows.get(gene)?.swatch\"\n            [attr.aria-label]=\"'Icon and colour for ' + gene\"\n            pTooltip=\"Icon and colour\"\n            tooltipPosition=\"top\"\n            (click)=\"openGeneStyle($event, gene, genePop)\"\n          >\n            <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\">\n              <polygon\n                *ngIf=\"view.transcriptMode === 'glyphs'; else dotIcon\"\n                [attr.points]=\"rows.get(gene)?.points\"\n              ></polygon>\n              <ng-template #dotIcon><circle r=\"0.75\"></circle></ng-template>\n            </svg>\n          </button>\n          <span class=\"sc-group-label\">{{ gene }}</span>\n          <span\n            class=\"sc-gene-count\"\n            *ngIf=\"rows.get(gene)?.count as n; else zeroCount\"\n            title=\"Transcripts in view\"\n            >{{ n | number }}</span\n          >\n          <ng-template #zeroCount>\n            <span class=\"sc-gene-count\" *ngIf=\"geneCounts\" title=\"Transcripts in view\">0</span>\n          </ng-template>\n        </div>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n  <!-- One picker for every gene row, filled for the gene that opened it. -->\n  <p-overlayPanel #genePop styleClass=\"sc-gene-style\" appendTo=\"body\">\n    <ng-template pTemplate=\"content\">\n      <spatial-gene-style\n        *ngIf=\"styleGene as gene\"\n        [gene]=\"gene\"\n        what=\"Transcript\"\n        [color]=\"styleColorOf(gene)\"\n        [glyph]=\"styleGlyph ?? 'circle'\"\n        [showIcons]=\"!view.transcriptAllGenes\"\n        [iconHint]=\"\n          view.transcriptMode !== 'glyphs' ? 'Icons show when the transcript point style is Icons.' : null\n        \"\n        (colorChange)=\"onGeneColor(gene, $event)\"\n        (glyphChange)=\"onGlyph(gene, $event)\"\n        (resetStyle)=\"resetGeneStyle(gene)\"\n      ></spatial-gene-style>\n    </ng-template>\n  </p-overlayPanel>\n  <div class=\"sc-gene-footer\">\n    {{ (view.transcriptAllGenes ? geneTotal : view.transcriptGenes.length) | number }}/{{ geneTotal | number }}\n    genes selected\n  </div>\n</div>\n", styles: [".sc-hint{font-size:.75rem;color:var(--text-color-secondary, #6c757d)}.sc-error{color:var(--red-600, #c62828)}.sc-section{display:flex;flex-direction:column;gap:.35rem}.sc-lbl{font-size:.78rem;color:var(--text-color-secondary, #6c757d);white-space:nowrap}.sc-row{display:flex;align-items:center;gap:.6rem}.sc-row p-slider,.sc-row p-dropdown,.sc-row p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row p-slider .p-slider{width:100%}:host ::ng-deep .sc-row p-dropdown .p-dropdown,:host ::ng-deep .sc-row p-treeSelect .p-treeselect{width:100%}.sc-row .sc-lbl{flex:0 0 calc(50% - .6rem);min-width:0;overflow:hidden;text-overflow:ellipsis}.sc-cmap-option{display:inline-flex;align-items:center;gap:.4rem}.sc-cmap-swatch{width:3.5rem;height:.7rem;border-radius:2px;display:block}.sc-val{flex:0 0 4rem;text-align:right;font-size:.78rem;font-variant-numeric:tabular-nums;white-space:nowrap}:host ::ng-deep .sc-full,:host ::ng-deep .sc-full .p-dropdown,:host ::ng-deep .sc-full .p-autocomplete,:host ::ng-deep .sc-full input{width:100%}.sc-colorbar{height:.75rem;border-radius:2px;border:1px solid rgba(0,0,0,.2)}.sc-colorbar-ends{display:flex;justify-content:space-between;font-size:.7rem;color:var(--text-color-secondary, #6c757d);margin-top:.2rem}.sc-panel{border:1px solid var(--surface-border, #dee2e6);border-radius:6px;margin-bottom:.5rem;overflow:hidden}.sc-panel-head{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--surface-100, #f5f6f7)}.sc-panel-head .sc-panel-title{flex:1;font-weight:600}.sc-panel.open>.sc-panel-head{background:var(--primary-color, #2196f3);color:var(--primary-color-text, #fff)}.sc-panel-body{display:flex;flex-direction:column;gap:.45rem;padding:.6rem .75rem .75rem}.sc-subhead{display:flex;align-items:center;gap:.5rem;margin-top:.4rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-color-secondary, #6c757d)}.sc-subhead:after{content:\"\";flex:1;border-top:1px solid var(--surface-border, #dee2e6)}:host ::ng-deep .sc-buttons .p-button{padding:.35rem .75rem;font-size:.85rem}.sc-row-picker p-dropdown,.sc-row-picker p-multiSelect,.sc-row-picker p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row-picker .sc-variant{width:6.5rem}:host ::ng-deep .sc-row-picker p-multiselect .p-multiselect{width:100%}:host ::ng-deep .sc-row-picker p-dropdown:has(.sc-variant){flex:0 0 6.5rem}:host ::ng-deep .sc-row-picker p-treeselect:has(.sc-palette){flex:0 0 3rem}:host ::ng-deep .sc-palette .p-treeselect-label{width:0;padding:0}.sc-icon-btn{flex:0 0 auto;border:0;background:transparent;cursor:pointer;padding:.25rem .35rem;font:inherit;font-size:1.05rem;color:var(--text-color, #333);border-radius:4px}.sc-icon-btn:hover{background:var(--surface-200, #e9ecef)}.sc-icon-btn.active{color:var(--primary-color, #2196f3);font-weight:700}.sc-icon-btn:disabled{opacity:.5;cursor:default}.sc-small-btn{margin-left:auto;border:1px solid var(--surface-border, #ced4da);background:var(--surface-0, #fff);border-radius:4px;padding:.2rem .6rem;font:inherit;font-size:.8rem;cursor:pointer}:host ::ng-deep .sc-group-heading{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.7}.sc-group-list,.sc-gene-tree{max-height:16rem;overflow-y:auto;border:1px solid var(--surface-border, #dee2e6);border-radius:4px;padding:.25rem .4rem}.sc-group-row,.sc-gene-row{display:flex;align-items:center;gap:.45rem;padding:.15rem 0;font-size:.88rem}.sc-group-row .sc-group-label,.sc-gene-row .sc-group-label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-group-all,.sc-gene-root,.sc-gene-group{font-weight:600}.sc-group-all .sc-icon-btn,.sc-gene-root .sc-icon-btn,.sc-gene-group .sc-icon-btn{margin-left:auto;font-size:.85rem}.sc-count{flex:0 0 auto;font-size:.78rem;color:var(--text-color-secondary, #6c757d)}.sc-glyph-option{display:inline-flex;align-items:center;gap:.4rem}.sc-glyph-svg{width:1rem;height:1rem;fill:currentColor}:host ::ng-deep .sc-glyph-pick .p-dropdown-label{padding:.2rem .4rem}.sc-color-input{width:2.5rem;height:1.8rem;border:1px solid var(--surface-border, #ced4da);border-radius:4px;padding:0;background:none}.sc-row-number p-slider,.sc-row-range p-slider{flex:1 1 0;min-width:0}:host ::ng-deep .sc-num{width:4.5rem;padding:.3rem .4rem;text-align:center}:host ::ng-deep .sc-row-number p-inputnumber,:host ::ng-deep .sc-row-range p-inputnumber{flex:0 0 auto}.sc-gene-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1.4rem;height:1.4rem;padding:0;border:1px solid transparent;border-radius:4px;background:transparent;cursor:pointer}.sc-gene-icon:hover,.sc-gene-icon:focus-visible{border-color:var(--surface-border, rgba(0, 0, 0, .2))}:host{display:contents}.sc-gene-group,.sc-gene-leaf{padding-left:1rem}.sc-gene-leaf.nested{padding-left:2rem}.sc-eye{flex:0 0 auto;border:0;background:transparent;cursor:pointer;padding:0;color:var(--text-color-secondary, #6c757d)}.sc-eye .pi-eye{color:var(--text-color, #333)}.sc-eye:disabled{cursor:default;opacity:.5}.sc-gene-sort{display:flex;align-items:center;gap:.25rem;font-size:.8rem}.sc-gene-sort .sc-lbl{margin-right:auto}.sc-sort-btn{border:1px solid var(--surface-border, #ced4da);background:var(--surface-0, #fff);color:var(--text-color, #333);border-radius:4px;padding:.1rem .5rem;font:inherit;cursor:pointer}.sc-sort-btn.active{border-color:var(--primary-color, #2196f3);color:var(--primary-color, #2196f3);font-weight:600}.sc-gene-filter{width:calc(100% - 1rem);margin:.2rem 0 .2rem 1rem;font-size:.8rem;padding:.2rem .4rem}.sc-gene-footer{text-align:right;font-size:.78rem;padding:.2rem 0;color:var(--text-color-secondary, #6c757d)}.sc-gene-count{margin-left:auto;font-variant-numeric:tabular-nums;opacity:.8;padding-left:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i6.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i10.OverlayPanel, selector: "p-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: SpatialGeneStyleComponent, selector: "spatial-gene-style", inputs: ["gene", "what", "color", "glyph", "iconHint", "showIcons"], outputs: ["colorChange", "glyphChange", "resetStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SpatialGeneTreeComponent, decorators: [{
             type: Component,
@@ -23658,7 +23790,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
                         OverlayPanelModule,
                         TooltipModule,
                         SpatialGeneStyleComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sc-subhead\">Selected genes</div>\n<div class=\"sc-gene-tree\">\n  <div class=\"sc-gene-row sc-gene-root\">\n    <button\n      type=\"button\"\n      class=\"sc-eye\"\n      (click)=\"\n        view.transcriptAllGenes ? onAllGenesShown(!rootShown) : onGenesShown(view.transcriptGenes, !rootShown)\n      \"\n    >\n      <i class=\"pi\" [class.pi-eye]=\"rootShown\" [class.pi-eye-slash]=\"!rootShown\"></i>\n    </button>\n    <span class=\"sc-group-label\">Genes</span>\n    <span class=\"sc-count\"\n      >({{ (view.transcriptAllGenes ? geneTotal : view.transcriptGenes.length) | number }}/{{\n        geneTotal | number\n      }})</span\n    >\n    <button\n      type=\"button\"\n      class=\"sc-icon-btn\"\n      (click)=\"geneTreeOpen = !geneTreeOpen\"\n      *ngIf=\"!view.transcriptAllGenes && view.transcriptGenes.length\"\n    >\n      <i class=\"pi\" [class.pi-chevron-down]=\"geneTreeOpen\" [class.pi-chevron-right]=\"!geneTreeOpen\"></i>\n    </button>\n    <button\n      type=\"button\"\n      class=\"sc-icon-btn\"\n      (click)=\"toggleAllGenesOpen()\"\n      *ngIf=\"view.transcriptAllGenes && allGeneList?.length\"\n      [attr.aria-label]=\"allGenesOpen ? 'Hide the gene list' : 'Show every gene'\"\n    >\n      <i class=\"pi\" [class.pi-chevron-down]=\"allGenesOpen\" [class.pi-chevron-right]=\"!allGenesOpen\"></i>\n    </button>\n  </div>\n  <!-- \"All genes\": every gene of the dataset, each with its eye when the dataset says which\n       transcripts are whose (its gene list in code order). -->\n  <ng-container *ngIf=\"allGenesOpen && view.transcriptAllGenes && allGeneList?.length\">\n    <input\n      pInputText\n      class=\"sc-gene-filter\"\n      placeholder=\"Filter genes\u2026\"\n      aria-label=\"Filter genes\"\n      [value]=\"allGenesFilter\"\n      (input)=\"onAllGenesFilter($any($event.target).value)\"\n    />\n    <small class=\"sc-hint\" *ngIf=\"!canHideAllGenes\">\n      This dataset does not say which transcripts are whose, so its genes cannot be hidden one by one.\n    </small>\n    <small class=\"sc-hint\" *ngIf=\"canHideAllGenes && view.transcriptMode === 'density'\">\n      The density map draws every gene as one raster: genes are hidden one by one as circles or icons.\n    </small>\n    <div class=\"sc-gene-row sc-gene-leaf nested\" *ngFor=\"let row of allRows; trackBy: trackByAllRow\">\n      <button\n        type=\"button\"\n        class=\"sc-eye\"\n        [disabled]=\"!canHideAllGenes || view.transcriptMode === 'density'\"\n        (click)=\"onAllGeneShown(row.gene, !row.shown)\"\n      >\n        <i class=\"pi\" [class.pi-eye]=\"row.shown\" [class.pi-eye-slash]=\"!row.shown\"></i>\n      </button>\n      <span class=\"sc-gene-icon\" *ngIf=\"row.swatch\" [style.color]=\"row.swatch\" aria-hidden=\"true\">\n        <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\"><circle r=\"0.75\"></circle></svg>\n      </span>\n      <span class=\"sc-group-label\" [title]=\"row.gene\">{{ row.gene }}</span>\n      <span class=\"sc-gene-count\" *ngIf=\"row.count !== null\" title=\"Transcripts in view\">{{\n        row.count | number\n      }}</span>\n    </div>\n    <small class=\"sc-hint\" *ngIf=\"allGenesMatched > allRows.length\">\n      Showing {{ allRows.length | number }} of {{ allGenesMatched | number }} genes: filter to find the others.\n    </small>\n    <small class=\"sc-hint\" *ngIf=\"allGenesMatched === 0\">No gene matches.</small>\n  </ng-container>\n  <ng-container *ngIf=\"geneTreeOpen && !view.transcriptAllGenes\">\n    <ng-container *ngFor=\"let node of geneTree; trackBy: trackByNode\">\n      <div class=\"sc-gene-row sc-gene-group\" *ngIf=\"node.name\">\n        <button type=\"button\" class=\"sc-eye\" (click)=\"onGenesShown(node.genes, !groupShown.get(node.name))\">\n          <i\n            class=\"pi\"\n            [class.pi-eye]=\"groupShown.get(node.name)\"\n            [class.pi-eye-slash]=\"!groupShown.get(node.name)\"\n          ></i>\n        </button>\n        <span class=\"sc-group-label\" [title]=\"node.name\">{{ node.name }}</span>\n        <span class=\"sc-count\">({{ node.genes.length }})</span>\n        <button type=\"button\" class=\"sc-icon-btn\" (click)=\"toggleGeneGroup(node.name)\">\n          <i\n            class=\"pi\"\n            [class.pi-chevron-down]=\"!collapsedGeneGroups.has(node.name)\"\n            [class.pi-chevron-right]=\"collapsedGeneGroups.has(node.name)\"\n          ></i>\n        </button>\n      </div>\n      <ng-container *ngIf=\"!node.name || !collapsedGeneGroups.has(node.name)\">\n        <div\n          class=\"sc-gene-row sc-gene-leaf\"\n          [class.nested]=\"!!node.name\"\n          *ngFor=\"let gene of node.genes; trackBy: trackByLabelString\"\n        >\n          <button type=\"button\" class=\"sc-eye\" (click)=\"onGenesShown([gene], !rows.get(gene)?.shown)\">\n            <i class=\"pi\" [class.pi-eye]=\"rows.get(gene)?.shown\" [class.pi-eye-slash]=\"!rows.get(gene)?.shown\"></i>\n          </button>\n          <!-- The gene's marker, in its colour: its icon in Icons mode, a dot for circles.\n               Clicking it opens the icon and colour picker (as Xenium Explorer does). -->\n          <button\n            type=\"button\"\n            class=\"sc-gene-icon\"\n            [style.color]=\"rows.get(gene)?.swatch\"\n            [attr.aria-label]=\"'Icon and colour for ' + gene\"\n            pTooltip=\"Icon and colour\"\n            tooltipPosition=\"top\"\n            (click)=\"openGeneStyle($event, gene, genePop)\"\n          >\n            <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\">\n              <polygon\n                *ngIf=\"view.transcriptMode === 'glyphs'; else dotIcon\"\n                [attr.points]=\"rows.get(gene)?.points\"\n              ></polygon>\n              <ng-template #dotIcon><circle r=\"0.75\"></circle></ng-template>\n            </svg>\n          </button>\n          <span class=\"sc-group-label\">{{ gene }}</span>\n          <span\n            class=\"sc-gene-count\"\n            *ngIf=\"rows.get(gene)?.count as n; else zeroCount\"\n            title=\"Transcripts in view\"\n            >{{ n | number }}</span\n          >\n          <ng-template #zeroCount>\n            <span class=\"sc-gene-count\" *ngIf=\"geneCounts\" title=\"Transcripts in view\">0</span>\n          </ng-template>\n        </div>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n  <!-- One picker for every gene row, filled for the gene that opened it. -->\n  <p-overlayPanel #genePop styleClass=\"sc-gene-style\" appendTo=\"body\">\n    <ng-template pTemplate=\"content\">\n      <spatial-gene-style\n        *ngIf=\"styleGene as gene\"\n        [gene]=\"gene\"\n        what=\"Transcript\"\n        [color]=\"geneColorOf(gene)\"\n        [glyph]=\"styleGlyph ?? 'circle'\"\n        [iconHint]=\"\n          view.transcriptMode !== 'glyphs' ? 'Icons show when the transcript point style is Icons.' : null\n        \"\n        (colorChange)=\"onGeneColor(gene, $event)\"\n        (glyphChange)=\"onGlyph(gene, $event)\"\n        (resetStyle)=\"resetGeneStyle(gene)\"\n      ></spatial-gene-style>\n    </ng-template>\n  </p-overlayPanel>\n  <div class=\"sc-gene-footer\">\n    {{ (view.transcriptAllGenes ? geneTotal : view.transcriptGenes.length) | number }}/{{ geneTotal | number }}\n    genes selected\n  </div>\n</div>\n", styles: [".sc-hint{font-size:.75rem;color:var(--text-color-secondary, #6c757d)}.sc-error{color:var(--red-600, #c62828)}.sc-section{display:flex;flex-direction:column;gap:.35rem}.sc-lbl{font-size:.78rem;color:var(--text-color-secondary, #6c757d);white-space:nowrap}.sc-row{display:flex;align-items:center;gap:.6rem}.sc-row p-slider,.sc-row p-dropdown,.sc-row p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row p-slider .p-slider{width:100%}:host ::ng-deep .sc-row p-dropdown .p-dropdown,:host ::ng-deep .sc-row p-treeSelect .p-treeselect{width:100%}.sc-row .sc-lbl{flex:0 0 calc(50% - .6rem);min-width:0;overflow:hidden;text-overflow:ellipsis}.sc-cmap-option{display:inline-flex;align-items:center;gap:.4rem}.sc-cmap-swatch{width:3.5rem;height:.7rem;border-radius:2px;display:block}.sc-val{flex:0 0 4rem;text-align:right;font-size:.78rem;font-variant-numeric:tabular-nums;white-space:nowrap}:host ::ng-deep .sc-full,:host ::ng-deep .sc-full .p-dropdown,:host ::ng-deep .sc-full .p-autocomplete,:host ::ng-deep .sc-full input{width:100%}.sc-colorbar{height:.75rem;border-radius:2px;border:1px solid rgba(0,0,0,.2)}.sc-colorbar-ends{display:flex;justify-content:space-between;font-size:.7rem;color:var(--text-color-secondary, #6c757d);margin-top:.2rem}.sc-panel{border:1px solid var(--surface-border, #dee2e6);border-radius:6px;margin-bottom:.5rem;overflow:hidden}.sc-panel-head{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--surface-100, #f5f6f7)}.sc-panel-head .sc-panel-title{flex:1;font-weight:600}.sc-panel.open>.sc-panel-head{background:var(--primary-color, #2196f3);color:var(--primary-color-text, #fff)}.sc-panel-body{display:flex;flex-direction:column;gap:.45rem;padding:.6rem .75rem .75rem}.sc-subhead{display:flex;align-items:center;gap:.5rem;margin-top:.4rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-color-secondary, #6c757d)}.sc-subhead:after{content:\"\";flex:1;border-top:1px solid var(--surface-border, #dee2e6)}:host ::ng-deep .sc-buttons .p-button{padding:.35rem .75rem;font-size:.85rem}.sc-row-picker p-dropdown,.sc-row-picker p-multiSelect,.sc-row-picker p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row-picker .sc-variant{width:6.5rem}:host ::ng-deep .sc-row-picker p-multiselect .p-multiselect{width:100%}:host ::ng-deep .sc-row-picker p-dropdown:has(.sc-variant){flex:0 0 6.5rem}:host ::ng-deep .sc-row-picker p-treeselect:has(.sc-palette){flex:0 0 3rem}:host ::ng-deep .sc-palette .p-treeselect-label{width:0;padding:0}.sc-icon-btn{flex:0 0 auto;border:0;background:transparent;cursor:pointer;padding:.25rem .35rem;font:inherit;font-size:1.05rem;color:var(--text-color, #333);border-radius:4px}.sc-icon-btn:hover{background:var(--surface-200, #e9ecef)}.sc-icon-btn.active{color:var(--primary-color, #2196f3);font-weight:700}.sc-icon-btn:disabled{opacity:.5;cursor:default}.sc-small-btn{margin-left:auto;border:1px solid var(--surface-border, #ced4da);background:var(--surface-0, #fff);border-radius:4px;padding:.2rem .6rem;font:inherit;font-size:.8rem;cursor:pointer}:host ::ng-deep .sc-group-heading{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.7}.sc-group-list,.sc-gene-tree{max-height:16rem;overflow-y:auto;border:1px solid var(--surface-border, #dee2e6);border-radius:4px;padding:.25rem .4rem}.sc-group-row,.sc-gene-row{display:flex;align-items:center;gap:.45rem;padding:.15rem 0;font-size:.88rem}.sc-group-row .sc-group-label,.sc-gene-row .sc-group-label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-group-all,.sc-gene-root,.sc-gene-group{font-weight:600}.sc-group-all .sc-icon-btn,.sc-gene-root .sc-icon-btn,.sc-gene-group .sc-icon-btn{margin-left:auto;font-size:.85rem}.sc-count{flex:0 0 auto;font-size:.78rem;color:var(--text-color-secondary, #6c757d)}.sc-glyph-option{display:inline-flex;align-items:center;gap:.4rem}.sc-glyph-svg{width:1rem;height:1rem;fill:currentColor}:host ::ng-deep .sc-glyph-pick .p-dropdown-label{padding:.2rem .4rem}.sc-color-input{width:2.5rem;height:1.8rem;border:1px solid var(--surface-border, #ced4da);border-radius:4px;padding:0;background:none}.sc-row-number p-slider,.sc-row-range p-slider{flex:1 1 0;min-width:0}:host ::ng-deep .sc-num{width:4.5rem;padding:.3rem .4rem;text-align:center}:host ::ng-deep .sc-row-number p-inputnumber,:host ::ng-deep .sc-row-range p-inputnumber{flex:0 0 auto}.sc-gene-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1.4rem;height:1.4rem;padding:0;border:1px solid transparent;border-radius:4px;background:transparent;cursor:pointer}.sc-gene-icon:hover,.sc-gene-icon:focus-visible{border-color:var(--surface-border, rgba(0, 0, 0, .2))}:host{display:contents}.sc-gene-group,.sc-gene-leaf{padding-left:1rem}.sc-gene-leaf.nested{padding-left:2rem}.sc-eye{flex:0 0 auto;border:0;background:transparent;cursor:pointer;padding:0;color:var(--text-color-secondary, #6c757d)}.sc-eye .pi-eye{color:var(--text-color, #333)}.sc-eye:disabled{cursor:default;opacity:.5}.sc-gene-filter{width:calc(100% - 1rem);margin:.2rem 0 .2rem 1rem;font-size:.8rem;padding:.2rem .4rem}.sc-gene-footer{text-align:right;font-size:.78rem;padding:.2rem 0;color:var(--text-color-secondary, #6c757d)}.sc-gene-count{margin-left:auto;font-variant-numeric:tabular-nums;opacity:.8;padding-left:.5rem}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sc-subhead\">Selected genes</div>\n<div class=\"sc-gene-sort\" *ngIf=\"sortShown\" role=\"group\" aria-label=\"Sort genes\">\n  <span class=\"sc-lbl\">Sort by</span>\n  <button\n    type=\"button\"\n    class=\"sc-sort-btn\"\n    [class.active]=\"!byCount\"\n    [attr.aria-pressed]=\"!byCount\"\n    (click)=\"onGeneSort('name')\"\n  >\n    Name\n  </button>\n  <button\n    type=\"button\"\n    class=\"sc-sort-btn\"\n    [class.active]=\"byCount\"\n    [attr.aria-pressed]=\"byCount\"\n    title=\"Transcripts in view, most first\"\n    (click)=\"onGeneSort('count')\"\n  >\n    Count\n  </button>\n</div>\n<div class=\"sc-gene-tree\">\n  <div class=\"sc-gene-row sc-gene-root\">\n    <button\n      type=\"button\"\n      class=\"sc-eye\"\n      (click)=\"\n        view.transcriptAllGenes ? onAllGenesShown(!rootShown) : onGenesShown(view.transcriptGenes, !rootShown)\n      \"\n    >\n      <i class=\"pi\" [class.pi-eye]=\"rootShown\" [class.pi-eye-slash]=\"!rootShown\"></i>\n    </button>\n    <span class=\"sc-group-label\">Genes</span>\n    <span class=\"sc-count\"\n      >({{ (view.transcriptAllGenes ? geneTotal : view.transcriptGenes.length) | number }}/{{\n        geneTotal | number\n      }})</span\n    >\n    <button\n      type=\"button\"\n      class=\"sc-icon-btn\"\n      (click)=\"geneTreeOpen = !geneTreeOpen\"\n      *ngIf=\"!view.transcriptAllGenes && view.transcriptGenes.length\"\n    >\n      <i class=\"pi\" [class.pi-chevron-down]=\"geneTreeOpen\" [class.pi-chevron-right]=\"!geneTreeOpen\"></i>\n    </button>\n    <button\n      type=\"button\"\n      class=\"sc-icon-btn\"\n      (click)=\"toggleAllGenesOpen()\"\n      *ngIf=\"view.transcriptAllGenes && allGeneList?.length\"\n      [attr.aria-label]=\"allGenesOpen ? 'Hide the gene list' : 'Show every gene'\"\n    >\n      <i class=\"pi\" [class.pi-chevron-down]=\"allGenesOpen\" [class.pi-chevron-right]=\"!allGenesOpen\"></i>\n    </button>\n  </div>\n  <!-- \"All genes\": every gene of the dataset, each with its eye when the dataset says which\n       transcripts are whose (its gene list in code order). -->\n  <ng-container *ngIf=\"allGenesOpen && view.transcriptAllGenes && allGeneList?.length\">\n    <input\n      pInputText\n      class=\"sc-gene-filter\"\n      placeholder=\"Filter genes\u2026\"\n      aria-label=\"Filter genes\"\n      [value]=\"allGenesFilter\"\n      (input)=\"onAllGenesFilter($any($event.target).value)\"\n    />\n    <small class=\"sc-hint\" *ngIf=\"!canHideAllGenes\">\n      This dataset does not say which transcripts are whose, so its genes cannot be hidden one by one.\n    </small>\n    <small class=\"sc-hint\" *ngIf=\"canHideAllGenes && view.transcriptMode === 'density'\">\n      The density map draws every gene as one raster: genes are hidden one by one as circles or icons.\n    </small>\n    <div class=\"sc-gene-row sc-gene-leaf nested\" *ngFor=\"let row of allRows; trackBy: trackByAllRow\">\n      <button\n        type=\"button\"\n        class=\"sc-eye\"\n        [disabled]=\"!canHideAllGenes || view.transcriptMode === 'density'\"\n        (click)=\"onAllGeneShown(row.gene, !row.shown)\"\n      >\n        <i class=\"pi\" [class.pi-eye]=\"row.shown\" [class.pi-eye-slash]=\"!row.shown\"></i>\n      </button>\n      <!-- The gene's colour among every gene; clicking it opens the colour picker. -->\n      <button\n        type=\"button\"\n        class=\"sc-gene-icon\"\n        *ngIf=\"row.swatch\"\n        [style.color]=\"row.swatch\"\n        [attr.aria-label]=\"'Colour for ' + row.gene\"\n        pTooltip=\"Colour\"\n        tooltipPosition=\"top\"\n        (click)=\"openGeneStyle($event, row.gene, genePop)\"\n      >\n        <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\"><circle r=\"0.75\"></circle></svg>\n      </button>\n      <span class=\"sc-group-label\" [title]=\"row.gene\">{{ row.gene }}</span>\n      <span class=\"sc-gene-count\" *ngIf=\"row.count !== null\" title=\"Transcripts in view\">{{\n        row.count | number\n      }}</span>\n    </div>\n    <small class=\"sc-hint\" *ngIf=\"allGenesMatched > allRows.length\">\n      Showing {{ allRows.length | number }} of {{ allGenesMatched | number }} genes: filter to find the others.\n    </small>\n    <small class=\"sc-hint\" *ngIf=\"allGenesMatched === 0\">No gene matches.</small>\n  </ng-container>\n  <ng-container *ngIf=\"geneTreeOpen && !view.transcriptAllGenes\">\n    <ng-container *ngFor=\"let node of sortedTree; trackBy: trackByNode\">\n      <div class=\"sc-gene-row sc-gene-group\" *ngIf=\"node.name\">\n        <button type=\"button\" class=\"sc-eye\" (click)=\"onGenesShown(node.genes, !groupShown.get(node.name))\">\n          <i\n            class=\"pi\"\n            [class.pi-eye]=\"groupShown.get(node.name)\"\n            [class.pi-eye-slash]=\"!groupShown.get(node.name)\"\n          ></i>\n        </button>\n        <span class=\"sc-group-label\" [title]=\"node.name\">{{ node.name }}</span>\n        <span class=\"sc-count\">({{ node.genes.length }})</span>\n        <button type=\"button\" class=\"sc-icon-btn\" (click)=\"toggleGeneGroup(node.name)\">\n          <i\n            class=\"pi\"\n            [class.pi-chevron-down]=\"!collapsedGeneGroups.has(node.name)\"\n            [class.pi-chevron-right]=\"collapsedGeneGroups.has(node.name)\"\n          ></i>\n        </button>\n      </div>\n      <ng-container *ngIf=\"!node.name || !collapsedGeneGroups.has(node.name)\">\n        <div\n          class=\"sc-gene-row sc-gene-leaf\"\n          [class.nested]=\"!!node.name\"\n          *ngFor=\"let gene of node.genes; trackBy: trackByLabelString\"\n        >\n          <button type=\"button\" class=\"sc-eye\" (click)=\"onGenesShown([gene], !rows.get(gene)?.shown)\">\n            <i class=\"pi\" [class.pi-eye]=\"rows.get(gene)?.shown\" [class.pi-eye-slash]=\"!rows.get(gene)?.shown\"></i>\n          </button>\n          <!-- The gene's marker, in its colour: its icon in Icons mode, a dot for circles.\n               Clicking it opens the icon and colour picker (as Xenium Explorer does). -->\n          <button\n            type=\"button\"\n            class=\"sc-gene-icon\"\n            [style.color]=\"rows.get(gene)?.swatch\"\n            [attr.aria-label]=\"'Icon and colour for ' + gene\"\n            pTooltip=\"Icon and colour\"\n            tooltipPosition=\"top\"\n            (click)=\"openGeneStyle($event, gene, genePop)\"\n          >\n            <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\">\n              <polygon\n                *ngIf=\"view.transcriptMode === 'glyphs'; else dotIcon\"\n                [attr.points]=\"rows.get(gene)?.points\"\n              ></polygon>\n              <ng-template #dotIcon><circle r=\"0.75\"></circle></ng-template>\n            </svg>\n          </button>\n          <span class=\"sc-group-label\">{{ gene }}</span>\n          <span\n            class=\"sc-gene-count\"\n            *ngIf=\"rows.get(gene)?.count as n; else zeroCount\"\n            title=\"Transcripts in view\"\n            >{{ n | number }}</span\n          >\n          <ng-template #zeroCount>\n            <span class=\"sc-gene-count\" *ngIf=\"geneCounts\" title=\"Transcripts in view\">0</span>\n          </ng-template>\n        </div>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n  <!-- One picker for every gene row, filled for the gene that opened it. -->\n  <p-overlayPanel #genePop styleClass=\"sc-gene-style\" appendTo=\"body\">\n    <ng-template pTemplate=\"content\">\n      <spatial-gene-style\n        *ngIf=\"styleGene as gene\"\n        [gene]=\"gene\"\n        what=\"Transcript\"\n        [color]=\"styleColorOf(gene)\"\n        [glyph]=\"styleGlyph ?? 'circle'\"\n        [showIcons]=\"!view.transcriptAllGenes\"\n        [iconHint]=\"\n          view.transcriptMode !== 'glyphs' ? 'Icons show when the transcript point style is Icons.' : null\n        \"\n        (colorChange)=\"onGeneColor(gene, $event)\"\n        (glyphChange)=\"onGlyph(gene, $event)\"\n        (resetStyle)=\"resetGeneStyle(gene)\"\n      ></spatial-gene-style>\n    </ng-template>\n  </p-overlayPanel>\n  <div class=\"sc-gene-footer\">\n    {{ (view.transcriptAllGenes ? geneTotal : view.transcriptGenes.length) | number }}/{{ geneTotal | number }}\n    genes selected\n  </div>\n</div>\n", styles: [".sc-hint{font-size:.75rem;color:var(--text-color-secondary, #6c757d)}.sc-error{color:var(--red-600, #c62828)}.sc-section{display:flex;flex-direction:column;gap:.35rem}.sc-lbl{font-size:.78rem;color:var(--text-color-secondary, #6c757d);white-space:nowrap}.sc-row{display:flex;align-items:center;gap:.6rem}.sc-row p-slider,.sc-row p-dropdown,.sc-row p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row p-slider .p-slider{width:100%}:host ::ng-deep .sc-row p-dropdown .p-dropdown,:host ::ng-deep .sc-row p-treeSelect .p-treeselect{width:100%}.sc-row .sc-lbl{flex:0 0 calc(50% - .6rem);min-width:0;overflow:hidden;text-overflow:ellipsis}.sc-cmap-option{display:inline-flex;align-items:center;gap:.4rem}.sc-cmap-swatch{width:3.5rem;height:.7rem;border-radius:2px;display:block}.sc-val{flex:0 0 4rem;text-align:right;font-size:.78rem;font-variant-numeric:tabular-nums;white-space:nowrap}:host ::ng-deep .sc-full,:host ::ng-deep .sc-full .p-dropdown,:host ::ng-deep .sc-full .p-autocomplete,:host ::ng-deep .sc-full input{width:100%}.sc-colorbar{height:.75rem;border-radius:2px;border:1px solid rgba(0,0,0,.2)}.sc-colorbar-ends{display:flex;justify-content:space-between;font-size:.7rem;color:var(--text-color-secondary, #6c757d);margin-top:.2rem}.sc-panel{border:1px solid var(--surface-border, #dee2e6);border-radius:6px;margin-bottom:.5rem;overflow:hidden}.sc-panel-head{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--surface-100, #f5f6f7)}.sc-panel-head .sc-panel-title{flex:1;font-weight:600}.sc-panel.open>.sc-panel-head{background:var(--primary-color, #2196f3);color:var(--primary-color-text, #fff)}.sc-panel-body{display:flex;flex-direction:column;gap:.45rem;padding:.6rem .75rem .75rem}.sc-subhead{display:flex;align-items:center;gap:.5rem;margin-top:.4rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-color-secondary, #6c757d)}.sc-subhead:after{content:\"\";flex:1;border-top:1px solid var(--surface-border, #dee2e6)}:host ::ng-deep .sc-buttons .p-button{padding:.35rem .75rem;font-size:.85rem}.sc-row-picker p-dropdown,.sc-row-picker p-multiSelect,.sc-row-picker p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row-picker .sc-variant{width:6.5rem}:host ::ng-deep .sc-row-picker p-multiselect .p-multiselect{width:100%}:host ::ng-deep .sc-row-picker p-dropdown:has(.sc-variant){flex:0 0 6.5rem}:host ::ng-deep .sc-row-picker p-treeselect:has(.sc-palette){flex:0 0 3rem}:host ::ng-deep .sc-palette .p-treeselect-label{width:0;padding:0}.sc-icon-btn{flex:0 0 auto;border:0;background:transparent;cursor:pointer;padding:.25rem .35rem;font:inherit;font-size:1.05rem;color:var(--text-color, #333);border-radius:4px}.sc-icon-btn:hover{background:var(--surface-200, #e9ecef)}.sc-icon-btn.active{color:var(--primary-color, #2196f3);font-weight:700}.sc-icon-btn:disabled{opacity:.5;cursor:default}.sc-small-btn{margin-left:auto;border:1px solid var(--surface-border, #ced4da);background:var(--surface-0, #fff);border-radius:4px;padding:.2rem .6rem;font:inherit;font-size:.8rem;cursor:pointer}:host ::ng-deep .sc-group-heading{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.7}.sc-group-list,.sc-gene-tree{max-height:16rem;overflow-y:auto;border:1px solid var(--surface-border, #dee2e6);border-radius:4px;padding:.25rem .4rem}.sc-group-row,.sc-gene-row{display:flex;align-items:center;gap:.45rem;padding:.15rem 0;font-size:.88rem}.sc-group-row .sc-group-label,.sc-gene-row .sc-group-label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-group-all,.sc-gene-root,.sc-gene-group{font-weight:600}.sc-group-all .sc-icon-btn,.sc-gene-root .sc-icon-btn,.sc-gene-group .sc-icon-btn{margin-left:auto;font-size:.85rem}.sc-count{flex:0 0 auto;font-size:.78rem;color:var(--text-color-secondary, #6c757d)}.sc-glyph-option{display:inline-flex;align-items:center;gap:.4rem}.sc-glyph-svg{width:1rem;height:1rem;fill:currentColor}:host ::ng-deep .sc-glyph-pick .p-dropdown-label{padding:.2rem .4rem}.sc-color-input{width:2.5rem;height:1.8rem;border:1px solid var(--surface-border, #ced4da);border-radius:4px;padding:0;background:none}.sc-row-number p-slider,.sc-row-range p-slider{flex:1 1 0;min-width:0}:host ::ng-deep .sc-num{width:4.5rem;padding:.3rem .4rem;text-align:center}:host ::ng-deep .sc-row-number p-inputnumber,:host ::ng-deep .sc-row-range p-inputnumber{flex:0 0 auto}.sc-gene-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1.4rem;height:1.4rem;padding:0;border:1px solid transparent;border-radius:4px;background:transparent;cursor:pointer}.sc-gene-icon:hover,.sc-gene-icon:focus-visible{border-color:var(--surface-border, rgba(0, 0, 0, .2))}:host{display:contents}.sc-gene-group,.sc-gene-leaf{padding-left:1rem}.sc-gene-leaf.nested{padding-left:2rem}.sc-eye{flex:0 0 auto;border:0;background:transparent;cursor:pointer;padding:0;color:var(--text-color-secondary, #6c757d)}.sc-eye .pi-eye{color:var(--text-color, #333)}.sc-eye:disabled{cursor:default;opacity:.5}.sc-gene-sort{display:flex;align-items:center;gap:.25rem;font-size:.8rem}.sc-gene-sort .sc-lbl{margin-right:auto}.sc-sort-btn{border:1px solid var(--surface-border, #ced4da);background:var(--surface-0, #fff);color:var(--text-color, #333);border-radius:4px;padding:.1rem .5rem;font:inherit;cursor:pointer}.sc-sort-btn.active{border-color:var(--primary-color, #2196f3);color:var(--primary-color, #2196f3);font-weight:600}.sc-gene-filter{width:calc(100% - 1rem);margin:.2rem 0 .2rem 1rem;font-size:.8rem;padding:.2rem .4rem}.sc-gene-footer{text-align:right;font-size:.78rem;padding:.2rem 0;color:var(--text-color-secondary, #6c757d)}.sc-gene-count{margin-left:auto;font-variant-numeric:tabular-nums;opacity:.8;padding-left:.5rem}\n"] }]
         }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { controls: [{
                 type: Input
             }], dataset: [{
@@ -24635,7 +24767,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$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 }); }
+    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, at every zoom. Cell outlines are drawn over the circles once cells are big enough on\n        screen to 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", "showIcons"], 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,
@@ -24651,7 +24783,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
                         TooltipModule,
                         SpatialKeyComponent,
                         SpatialGeneStyleComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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, at every zoom. Cell outlines are drawn over the circles once cells are big enough on\n        screen to 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"] }]
         }], propDecorators: { controls: [{
                 type: Input
             }], dataset: [{
@@ -24984,6 +25116,10 @@ class SpatialControlsComponent {
     get hasTranscripts() {
         return !!this.dataset?.transcriptTiles || !!this.dataset?.density;
     }
+    /** Whether the 3D cloud can draw the transcripts too: they carry z (a MERFISH volume's do). */
+    get hasTranscripts3d() {
+        return !!this.dataset?.transcriptTiles?.hasZ;
+    }
     onShowImage(on) {
         this.controls?.setViewState({ showImage: on });
     }
@@ -25019,7 +25155,7 @@ class SpatialControlsComponent {
         return this.key.refresh(this.controls, this.dataset, this.view, this.colormap, this.reverse);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SpatialControlsComponent, deps: [{ token: VISUALIZER }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: SpatialControlsComponent, isStandalone: true, selector: "spatial-controls", inputs: { visible: "visible", is3d: "is3d" }, outputs: { visibleChange: "visibleChange" }, viewQueries: [{ propertyName: "charts", first: true, predicate: SpatialChartsComponent, descendants: true }], ngImport: i0, template: "<p-dialog\n  header=\"Spatial omics\"\n  [visible]=\"visible\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  [modal]=\"false\"\n  [resizable]=\"true\"\n  [draggable]=\"true\"\n  position=\"left\"\n  (onResizeEnd)=\"onResizeEnd()\"\n  [style]=\"{ width: '30rem' }\"\n  [breakpoints]=\"{ '960px': '90vw' }\"\n  styleClass=\"spatial-controls-dialog\"\n>\n  <!-- No port bound: say why rather than showing controls that do nothing. -->\n  <div class=\"sc-empty\" *ngIf=\"!controls\">\n    No spatial-omics data source is configured. A host provides one by binding\n    <code>SPATIAL_DATA_PORT</code>.\n  </div>\n\n  <div class=\"sc-empty\" *ngIf=\"controls && !dataset\">No dataset is loaded.</div>\n\n  <div class=\"sc-body\" *ngIf=\"controls && dataset as ds\">\n    <div class=\"sc-dataset\">\n      <span class=\"sc-dataset-name\">{{ ds.name }}</span>\n      <span class=\"sc-dataset-count\">{{ ds.observations.count | number }} observations</span>\n    </div>\n\n    <!-- Organised as Xenium Explorer's side panel: one collapsible section per layer,\n         each with its own on/off switch in the header. -->\n\n    <!-- Images -->\n    <div class=\"sc-panel\" *ngIf=\"ds.imageRef && !is3d\" [class.open]=\"open.images\">\n      <div class=\"sc-panel-head\" (click)=\"toggleSection('images')\">\n        <p-checkbox\n          [binary]=\"true\"\n          [ngModel]=\"view.showImage\"\n          (click)=\"$event.stopPropagation()\"\n          (onChange)=\"onShowImage($event.checked)\"\n        ></p-checkbox>\n        <span class=\"sc-panel-title\">Images</span>\n        <i class=\"pi\" [class.pi-chevron-down]=\"open.images\" [class.pi-chevron-right]=\"!open.images\"></i>\n      </div>\n      <div class=\"sc-panel-body\" *ngIf=\"open.images\">\n        <small class=\"sc-hint\"> Channels, colours and contrast are in the Channels &amp; Histogram dialog. </small>\n      </div>\n    </div>\n\n    <!-- Cells -->\n    <spatial-cells-panel\n      *ngIf=\"hasCells && !is3d\"\n      [controls]=\"controls\"\n      [dataset]=\"ds\"\n      [view]=\"view\"\n      [genes]=\"genes\"\n      [colorBarCss]=\"colorBarCss\"\n      [open]=\"open.cells\"\n      (openChange)=\"setOpen('cells', $event)\"\n    ></spatial-cells-panel>\n\n    <!-- Transcripts -->\n    <spatial-transcripts-panel\n      *ngIf=\"hasTranscripts && !is3d\"\n      [controls]=\"controls\"\n      [dataset]=\"ds\"\n      [view]=\"view\"\n      [genes]=\"genes\"\n      [estimate]=\"estimate\"\n      [densityStats]=\"densityStats\"\n      [geneCounts]=\"geneCounts\"\n      [colormapOptions]=\"colormapOptions\"\n      [open]=\"open.transcripts\"\n      (openChange)=\"setOpen('transcripts', $event)\"\n    >\n    </spatial-transcripts-panel>\n\n    <!-- Annotations: the drawn regions, and selecting what they enclose. -->\n    <div class=\"sc-panel\" [class.open]=\"open.annotations\">\n      <div class=\"sc-panel-head\" (click)=\"toggleSection('annotations')\">\n        <p-checkbox\n          [binary]=\"true\"\n          [ngModel]=\"view.showAnnotations !== false\"\n          (click)=\"$event.stopPropagation()\"\n          (onChange)=\"onShowAnnotations($event.checked)\"\n          pTooltip=\"Show the drawn regions\"\n          tooltipPosition=\"top\"\n        ></p-checkbox>\n        <span class=\"sc-panel-title\">Annotations</span>\n        <i class=\"pi\" [class.pi-chevron-down]=\"open.annotations\" [class.pi-chevron-right]=\"!open.annotations\"></i>\n      </div>\n      <div class=\"sc-panel-body\" *ngIf=\"open.annotations\">\n        <div class=\"sc-row\">\n          <p-button\n            label=\"Select from ROIs\"\n            icon=\"pi pi-object-group\"\n            size=\"small\"\n            [outlined]=\"true\"\n            [loading]=\"selectingFromRegions\"\n            (onClick)=\"selectFromRegions()\"\n            [pTooltip]=\"\n              selectsClassVolumes\n                ? 'Select every observation inside the volumes of the classes picked in the Region Editor'\n                : 'Select every observation inside the drawn regions'\n            \"\n            tooltipPosition=\"top\"\n          ></p-button>\n          <p-button\n            *ngIf=\"hasSelection\"\n            label=\"Clear\"\n            size=\"small\"\n            [text]=\"true\"\n            (onClick)=\"clearSelection()\"\n          ></p-button>\n        </div>\n        <small class=\"sc-hint\" *ngIf=\"hasSelection\">\n          {{ selection.count | number }} of {{ ds.observations.count | number }} selected \u2014 the rest are muted.\n        </small>\n        <small class=\"sc-hint\" *ngIf=\"selectionMissed\">\n          No observations fell inside the\n          {{ missedMode === 'class-volumes' ? 'picked classes' : 'drawn regions' }}.\n        </small>\n        <small class=\"sc-hint\" *ngIf=\"selectsClassVolumes\">\n          Selects inside the volume of {{ pickedClasses[0]\n          }}{{ pickedClasses.length > 1 ? ' and ' + (pickedClasses.length - 1 | number) + ' more classes' : '' }},\n          picked in the Region Editor. Draw a region to select by it instead.\n        </small>\n        <small class=\"sc-hint\" *ngIf=\"is3d && !selectsClassVolumes && pickedClasses.length\">\n          The classes picked in the Region Editor are not on the reference volume shown here, so this selects by\n          the regions drawn over the cloud instead.\n        </small>\n        <small class=\"sc-hint\" *ngIf=\"is3d && !selectsClassVolumes\">\n          In 3D a region cuts through the cloud's full depth. Orbit and draw again to cut from another angle.\n          <ng-container *ngIf=\"!pickedClasses.length\">\n            Pick classes in the Region Editor's class tree to select inside their volumes.\n          </ng-container>\n        </small>\n      </div>\n    </div>\n\n    <!-- Observations, then what else draws them: the gene map, the 3D scene, and the\n         continuous-only knobs. -->\n    <spatial-observations-panel\n      [controls]=\"controls\"\n      [dataset]=\"ds\"\n      [view]=\"view\"\n      [genes]=\"genes\"\n      [legend]=\"legend\"\n      [colorBarCss]=\"colorBarCss\"\n      [selection]=\"selection\"\n      [selectedCategory]=\"selectedCategory\"\n      [colormapOptions]=\"colormapOptions\"\n      [is3d]=\"is3d\"\n      [open]=\"open.observations\"\n      (openChange)=\"setOpen('observations', $event)\"\n      (categoryClicked)=\"selectCategory($event)\"\n    ></spatial-observations-panel>\n\n    <!-- Distributions of whatever the map is coloured by. In the SAME dialog as\n         the colour controls on purpose: changing the gene and watching the\n         distribution move is one action, and two floating windows made that\n         harder to see rather than easier. -->\n    <div class=\"sc-section sc-charts\">\n      <button\n        type=\"button\"\n        class=\"sc-disclosure\"\n        (click)=\"toggleCharts()\"\n        [attr.aria-expanded]=\"chartsOpen\"\n        [attr.aria-controls]=\"chartsBodyId\"\n      >\n        <i class=\"pi\" [class.pi-chevron-right]=\"!chartsOpen\" [class.pi-chevron-down]=\"chartsOpen\"></i>\n        <span>Distribution</span>\n        <small *ngIf=\"!chartsOpen && view.colorBy\">of {{ colorByLabel }}</small>\n      </button>\n      <!-- Kept MOUNTED when collapsed, only hidden: destroying it would throw\n           away the chart kind and grouping the user picked. `active` is what\n           stops it drawing while it has no size. -->\n      <div [id]=\"chartsBodyId\" [hidden]=\"!chartsOpen\">\n        <spatial-charts [active]=\"visible && chartsOpen\"></spatial-charts>\n      </div>\n    </div>\n\n    <div class=\"sc-btns\">\n      <p-button label=\"Reset\" size=\"small\" [text]=\"true\" (onClick)=\"reset()\"></p-button>\n    </div>\n  </div>\n</p-dialog>\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 ::ng-deep .spatial-controls-dialog .p-dialog-content{padding:.75rem 1rem 1rem}.sc-empty{padding:.5rem 0;font-size:.85rem;color:var(--text-color-secondary, #6c757d);line-height:1.4}.sc-empty code{font-size:.8rem}.sc-body{display:flex;flex-direction:column;gap:.85rem}.sc-dataset{display:flex;flex-direction:column;gap:.1rem;padding-bottom:.5rem;border-bottom:1px solid var(--surface-border, #dee2e6)}.sc-dataset-name{font-weight:600;font-size:.9rem}.sc-dataset-count{font-size:.75rem;color:var(--text-color-secondary, #6c757d)}.sc-btns{display:flex;justify-content:flex-end}.sc-charts{padding-top:.5rem;border-top:1px solid var(--surface-border, #dee2e6);gap:0}.sc-disclosure{display:flex;align-items:center;gap:.4rem;width:100%;padding:.2rem 0;font:inherit;font-size:.82rem;font-weight:600;text-align:left;background:none;border:0;cursor:pointer;color:inherit}.sc-disclosure i{font-size:.7rem;color:var(--text-color-secondary, #6c757d)}.sc-disclosure small{font-weight:400;color:var(--text-color-secondary, #6c757d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-disclosure:hover{color:var(--primary-color, #3b82f6)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: 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: 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: SpatialCellsPanelComponent, selector: "spatial-cells-panel", inputs: ["controls", "dataset", "view", "genes", "colorBarCss", "open"], outputs: ["openChange"] }, { kind: "component", type: SpatialTranscriptsPanelComponent, selector: "spatial-transcripts-panel", inputs: ["controls", "dataset", "view", "genes", "estimate", "densityStats", "geneCounts", "colormapOptions", "open"], outputs: ["openChange"] }, { kind: "component", type: SpatialObservationsPanelComponent, selector: "spatial-observations-panel", inputs: ["controls", "dataset", "view", "genes", "legend", "colorBarCss", "selection", "selectedCategory", "colormapOptions", "is3d", "open"], outputs: ["openChange", "categoryClicked"] }, { kind: "component", type: SpatialChartsComponent, selector: "spatial-charts", inputs: ["active"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: SpatialControlsComponent, isStandalone: true, selector: "spatial-controls", inputs: { visible: "visible", is3d: "is3d" }, outputs: { visibleChange: "visibleChange" }, viewQueries: [{ propertyName: "charts", first: true, predicate: SpatialChartsComponent, descendants: true }], ngImport: i0, template: "<p-dialog\n  header=\"Spatial omics\"\n  [visible]=\"visible\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  [modal]=\"false\"\n  [resizable]=\"true\"\n  [draggable]=\"true\"\n  position=\"left\"\n  (onResizeEnd)=\"onResizeEnd()\"\n  [style]=\"{ width: '30rem' }\"\n  [breakpoints]=\"{ '960px': '90vw' }\"\n  styleClass=\"spatial-controls-dialog\"\n>\n  <!-- No port bound: say why rather than showing controls that do nothing. -->\n  <div class=\"sc-empty\" *ngIf=\"!controls\">\n    No spatial-omics data source is configured. A host provides one by binding\n    <code>SPATIAL_DATA_PORT</code>.\n  </div>\n\n  <div class=\"sc-empty\" *ngIf=\"controls && !dataset\">No dataset is loaded.</div>\n\n  <div class=\"sc-body\" *ngIf=\"controls && dataset as ds\">\n    <div class=\"sc-dataset\">\n      <span class=\"sc-dataset-name\">{{ ds.name }}</span>\n      <span class=\"sc-dataset-count\">{{ ds.observations.count | number }} observations</span>\n    </div>\n\n    <!-- Organised as Xenium Explorer's side panel: one collapsible section per layer,\n         each with its own on/off switch in the header. -->\n\n    <!-- Images -->\n    <div class=\"sc-panel\" *ngIf=\"ds.imageRef && !is3d\" [class.open]=\"open.images\">\n      <div class=\"sc-panel-head\" (click)=\"toggleSection('images')\">\n        <p-checkbox\n          [binary]=\"true\"\n          [ngModel]=\"view.showImage\"\n          (click)=\"$event.stopPropagation()\"\n          (onChange)=\"onShowImage($event.checked)\"\n        ></p-checkbox>\n        <span class=\"sc-panel-title\">Images</span>\n        <i class=\"pi\" [class.pi-chevron-down]=\"open.images\" [class.pi-chevron-right]=\"!open.images\"></i>\n      </div>\n      <div class=\"sc-panel-body\" *ngIf=\"open.images\">\n        <small class=\"sc-hint\"> Channels, colours and contrast are in the Channels &amp; Histogram dialog. </small>\n      </div>\n    </div>\n\n    <!-- Cells -->\n    <spatial-cells-panel\n      *ngIf=\"hasCells && !is3d\"\n      [controls]=\"controls\"\n      [dataset]=\"ds\"\n      [view]=\"view\"\n      [genes]=\"genes\"\n      [colorBarCss]=\"colorBarCss\"\n      [open]=\"open.cells\"\n      (openChange)=\"setOpen('cells', $event)\"\n    ></spatial-cells-panel>\n\n    <!-- Transcripts -->\n    <spatial-transcripts-panel\n      *ngIf=\"hasTranscripts && (!is3d || hasTranscripts3d)\"\n      [controls]=\"controls\"\n      [dataset]=\"ds\"\n      [view]=\"view\"\n      [genes]=\"genes\"\n      [estimate]=\"estimate\"\n      [densityStats]=\"densityStats\"\n      [geneCounts]=\"geneCounts\"\n      [colormapOptions]=\"colormapOptions\"\n      [open]=\"open.transcripts\"\n      (openChange)=\"setOpen('transcripts', $event)\"\n    >\n    </spatial-transcripts-panel>\n\n    <!-- Annotations: the drawn regions, and selecting what they enclose. -->\n    <div class=\"sc-panel\" [class.open]=\"open.annotations\">\n      <div class=\"sc-panel-head\" (click)=\"toggleSection('annotations')\">\n        <p-checkbox\n          [binary]=\"true\"\n          [ngModel]=\"view.showAnnotations !== false\"\n          (click)=\"$event.stopPropagation()\"\n          (onChange)=\"onShowAnnotations($event.checked)\"\n          pTooltip=\"Show the drawn regions\"\n          tooltipPosition=\"top\"\n        ></p-checkbox>\n        <span class=\"sc-panel-title\">Annotations</span>\n        <i class=\"pi\" [class.pi-chevron-down]=\"open.annotations\" [class.pi-chevron-right]=\"!open.annotations\"></i>\n      </div>\n      <div class=\"sc-panel-body\" *ngIf=\"open.annotations\">\n        <div class=\"sc-row\">\n          <p-button\n            label=\"Select from ROIs\"\n            icon=\"pi pi-object-group\"\n            size=\"small\"\n            [outlined]=\"true\"\n            [loading]=\"selectingFromRegions\"\n            (onClick)=\"selectFromRegions()\"\n            [pTooltip]=\"\n              selectsClassVolumes\n                ? 'Select every observation inside the volumes of the classes picked in the Region Editor'\n                : 'Select every observation inside the drawn regions'\n            \"\n            tooltipPosition=\"top\"\n          ></p-button>\n          <p-button\n            *ngIf=\"hasSelection\"\n            label=\"Clear\"\n            size=\"small\"\n            [text]=\"true\"\n            (onClick)=\"clearSelection()\"\n          ></p-button>\n        </div>\n        <small class=\"sc-hint\" *ngIf=\"hasSelection\">\n          {{ selection.count | number }} of {{ ds.observations.count | number }} selected \u2014 the rest are muted.\n        </small>\n        <small class=\"sc-hint\" *ngIf=\"selectionMissed\">\n          No observations fell inside the\n          {{ missedMode === 'class-volumes' ? 'picked classes' : 'drawn regions' }}.\n        </small>\n        <small class=\"sc-hint\" *ngIf=\"selectsClassVolumes\">\n          Selects inside the volume of {{ pickedClasses[0]\n          }}{{ pickedClasses.length > 1 ? ' and ' + (pickedClasses.length - 1 | number) + ' more classes' : '' }},\n          picked in the Region Editor. Draw a region to select by it instead.\n        </small>\n        <small class=\"sc-hint\" *ngIf=\"is3d && !selectsClassVolumes && pickedClasses.length\">\n          The classes picked in the Region Editor are not on the reference volume shown here, so this selects by\n          the regions drawn over the cloud instead.\n        </small>\n        <small class=\"sc-hint\" *ngIf=\"is3d && !selectsClassVolumes\">\n          In 3D a region cuts through the cloud's full depth. Orbit and draw again to cut from another angle.\n          <ng-container *ngIf=\"!pickedClasses.length\">\n            Pick classes in the Region Editor's class tree to select inside their volumes.\n          </ng-container>\n        </small>\n      </div>\n    </div>\n\n    <!-- Observations, then what else draws them: the gene map, the 3D scene, and the\n         continuous-only knobs. -->\n    <spatial-observations-panel\n      [controls]=\"controls\"\n      [dataset]=\"ds\"\n      [view]=\"view\"\n      [genes]=\"genes\"\n      [legend]=\"legend\"\n      [colorBarCss]=\"colorBarCss\"\n      [selection]=\"selection\"\n      [selectedCategory]=\"selectedCategory\"\n      [colormapOptions]=\"colormapOptions\"\n      [is3d]=\"is3d\"\n      [open]=\"open.observations\"\n      (openChange)=\"setOpen('observations', $event)\"\n      (categoryClicked)=\"selectCategory($event)\"\n    ></spatial-observations-panel>\n\n    <!-- Distributions of whatever the map is coloured by. In the SAME dialog as\n         the colour controls on purpose: changing the gene and watching the\n         distribution move is one action, and two floating windows made that\n         harder to see rather than easier. -->\n    <div class=\"sc-section sc-charts\">\n      <button\n        type=\"button\"\n        class=\"sc-disclosure\"\n        (click)=\"toggleCharts()\"\n        [attr.aria-expanded]=\"chartsOpen\"\n        [attr.aria-controls]=\"chartsBodyId\"\n      >\n        <i class=\"pi\" [class.pi-chevron-right]=\"!chartsOpen\" [class.pi-chevron-down]=\"chartsOpen\"></i>\n        <span>Distribution</span>\n        <small *ngIf=\"!chartsOpen && view.colorBy\">of {{ colorByLabel }}</small>\n      </button>\n      <!-- Kept MOUNTED when collapsed, only hidden: destroying it would throw\n           away the chart kind and grouping the user picked. `active` is what\n           stops it drawing while it has no size. -->\n      <div [id]=\"chartsBodyId\" [hidden]=\"!chartsOpen\">\n        <spatial-charts [active]=\"visible && chartsOpen\"></spatial-charts>\n      </div>\n    </div>\n\n    <div class=\"sc-btns\">\n      <p-button label=\"Reset\" size=\"small\" [text]=\"true\" (onClick)=\"reset()\"></p-button>\n    </div>\n  </div>\n</p-dialog>\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 ::ng-deep .spatial-controls-dialog .p-dialog-content{padding:.75rem 1rem 1rem}.sc-empty{padding:.5rem 0;font-size:.85rem;color:var(--text-color-secondary, #6c757d);line-height:1.4}.sc-empty code{font-size:.8rem}.sc-body{display:flex;flex-direction:column;gap:.85rem}.sc-dataset{display:flex;flex-direction:column;gap:.1rem;padding-bottom:.5rem;border-bottom:1px solid var(--surface-border, #dee2e6)}.sc-dataset-name{font-weight:600;font-size:.9rem}.sc-dataset-count{font-size:.75rem;color:var(--text-color-secondary, #6c757d)}.sc-btns{display:flex;justify-content:flex-end}.sc-charts{padding-top:.5rem;border-top:1px solid var(--surface-border, #dee2e6);gap:0}.sc-disclosure{display:flex;align-items:center;gap:.4rem;width:100%;padding:.2rem 0;font:inherit;font-size:.82rem;font-weight:600;text-align:left;background:none;border:0;cursor:pointer;color:inherit}.sc-disclosure i{font-size:.7rem;color:var(--text-color-secondary, #6c757d)}.sc-disclosure small{font-weight:400;color:var(--text-color-secondary, #6c757d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-disclosure:hover{color:var(--primary-color, #3b82f6)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: 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: 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: SpatialCellsPanelComponent, selector: "spatial-cells-panel", inputs: ["controls", "dataset", "view", "genes", "colorBarCss", "open"], outputs: ["openChange"] }, { kind: "component", type: SpatialTranscriptsPanelComponent, selector: "spatial-transcripts-panel", inputs: ["controls", "dataset", "view", "genes", "estimate", "densityStats", "geneCounts", "colormapOptions", "open"], outputs: ["openChange"] }, { kind: "component", type: SpatialObservationsPanelComponent, selector: "spatial-observations-panel", inputs: ["controls", "dataset", "view", "genes", "legend", "colorBarCss", "selection", "selectedCategory", "colormapOptions", "is3d", "open"], outputs: ["openChange", "categoryClicked"] }, { kind: "component", type: SpatialChartsComponent, selector: "spatial-charts", inputs: ["active"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SpatialControlsComponent, decorators: [{
             type: Component,
@@ -25034,7 +25170,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
                         SpatialTranscriptsPanelComponent,
                         SpatialObservationsPanelComponent,
                         SpatialChartsComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-dialog\n  header=\"Spatial omics\"\n  [visible]=\"visible\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  [modal]=\"false\"\n  [resizable]=\"true\"\n  [draggable]=\"true\"\n  position=\"left\"\n  (onResizeEnd)=\"onResizeEnd()\"\n  [style]=\"{ width: '30rem' }\"\n  [breakpoints]=\"{ '960px': '90vw' }\"\n  styleClass=\"spatial-controls-dialog\"\n>\n  <!-- No port bound: say why rather than showing controls that do nothing. -->\n  <div class=\"sc-empty\" *ngIf=\"!controls\">\n    No spatial-omics data source is configured. A host provides one by binding\n    <code>SPATIAL_DATA_PORT</code>.\n  </div>\n\n  <div class=\"sc-empty\" *ngIf=\"controls && !dataset\">No dataset is loaded.</div>\n\n  <div class=\"sc-body\" *ngIf=\"controls && dataset as ds\">\n    <div class=\"sc-dataset\">\n      <span class=\"sc-dataset-name\">{{ ds.name }}</span>\n      <span class=\"sc-dataset-count\">{{ ds.observations.count | number }} observations</span>\n    </div>\n\n    <!-- Organised as Xenium Explorer's side panel: one collapsible section per layer,\n         each with its own on/off switch in the header. -->\n\n    <!-- Images -->\n    <div class=\"sc-panel\" *ngIf=\"ds.imageRef && !is3d\" [class.open]=\"open.images\">\n      <div class=\"sc-panel-head\" (click)=\"toggleSection('images')\">\n        <p-checkbox\n          [binary]=\"true\"\n          [ngModel]=\"view.showImage\"\n          (click)=\"$event.stopPropagation()\"\n          (onChange)=\"onShowImage($event.checked)\"\n        ></p-checkbox>\n        <span class=\"sc-panel-title\">Images</span>\n        <i class=\"pi\" [class.pi-chevron-down]=\"open.images\" [class.pi-chevron-right]=\"!open.images\"></i>\n      </div>\n      <div class=\"sc-panel-body\" *ngIf=\"open.images\">\n        <small class=\"sc-hint\"> Channels, colours and contrast are in the Channels &amp; Histogram dialog. </small>\n      </div>\n    </div>\n\n    <!-- Cells -->\n    <spatial-cells-panel\n      *ngIf=\"hasCells && !is3d\"\n      [controls]=\"controls\"\n      [dataset]=\"ds\"\n      [view]=\"view\"\n      [genes]=\"genes\"\n      [colorBarCss]=\"colorBarCss\"\n      [open]=\"open.cells\"\n      (openChange)=\"setOpen('cells', $event)\"\n    ></spatial-cells-panel>\n\n    <!-- Transcripts -->\n    <spatial-transcripts-panel\n      *ngIf=\"hasTranscripts && !is3d\"\n      [controls]=\"controls\"\n      [dataset]=\"ds\"\n      [view]=\"view\"\n      [genes]=\"genes\"\n      [estimate]=\"estimate\"\n      [densityStats]=\"densityStats\"\n      [geneCounts]=\"geneCounts\"\n      [colormapOptions]=\"colormapOptions\"\n      [open]=\"open.transcripts\"\n      (openChange)=\"setOpen('transcripts', $event)\"\n    >\n    </spatial-transcripts-panel>\n\n    <!-- Annotations: the drawn regions, and selecting what they enclose. -->\n    <div class=\"sc-panel\" [class.open]=\"open.annotations\">\n      <div class=\"sc-panel-head\" (click)=\"toggleSection('annotations')\">\n        <p-checkbox\n          [binary]=\"true\"\n          [ngModel]=\"view.showAnnotations !== false\"\n          (click)=\"$event.stopPropagation()\"\n          (onChange)=\"onShowAnnotations($event.checked)\"\n          pTooltip=\"Show the drawn regions\"\n          tooltipPosition=\"top\"\n        ></p-checkbox>\n        <span class=\"sc-panel-title\">Annotations</span>\n        <i class=\"pi\" [class.pi-chevron-down]=\"open.annotations\" [class.pi-chevron-right]=\"!open.annotations\"></i>\n      </div>\n      <div class=\"sc-panel-body\" *ngIf=\"open.annotations\">\n        <div class=\"sc-row\">\n          <p-button\n            label=\"Select from ROIs\"\n            icon=\"pi pi-object-group\"\n            size=\"small\"\n            [outlined]=\"true\"\n            [loading]=\"selectingFromRegions\"\n            (onClick)=\"selectFromRegions()\"\n            [pTooltip]=\"\n              selectsClassVolumes\n                ? 'Select every observation inside the volumes of the classes picked in the Region Editor'\n                : 'Select every observation inside the drawn regions'\n            \"\n            tooltipPosition=\"top\"\n          ></p-button>\n          <p-button\n            *ngIf=\"hasSelection\"\n            label=\"Clear\"\n            size=\"small\"\n            [text]=\"true\"\n            (onClick)=\"clearSelection()\"\n          ></p-button>\n        </div>\n        <small class=\"sc-hint\" *ngIf=\"hasSelection\">\n          {{ selection.count | number }} of {{ ds.observations.count | number }} selected \u2014 the rest are muted.\n        </small>\n        <small class=\"sc-hint\" *ngIf=\"selectionMissed\">\n          No observations fell inside the\n          {{ missedMode === 'class-volumes' ? 'picked classes' : 'drawn regions' }}.\n        </small>\n        <small class=\"sc-hint\" *ngIf=\"selectsClassVolumes\">\n          Selects inside the volume of {{ pickedClasses[0]\n          }}{{ pickedClasses.length > 1 ? ' and ' + (pickedClasses.length - 1 | number) + ' more classes' : '' }},\n          picked in the Region Editor. Draw a region to select by it instead.\n        </small>\n        <small class=\"sc-hint\" *ngIf=\"is3d && !selectsClassVolumes && pickedClasses.length\">\n          The classes picked in the Region Editor are not on the reference volume shown here, so this selects by\n          the regions drawn over the cloud instead.\n        </small>\n        <small class=\"sc-hint\" *ngIf=\"is3d && !selectsClassVolumes\">\n          In 3D a region cuts through the cloud's full depth. Orbit and draw again to cut from another angle.\n          <ng-container *ngIf=\"!pickedClasses.length\">\n            Pick classes in the Region Editor's class tree to select inside their volumes.\n          </ng-container>\n        </small>\n      </div>\n    </div>\n\n    <!-- Observations, then what else draws them: the gene map, the 3D scene, and the\n         continuous-only knobs. -->\n    <spatial-observations-panel\n      [controls]=\"controls\"\n      [dataset]=\"ds\"\n      [view]=\"view\"\n      [genes]=\"genes\"\n      [legend]=\"legend\"\n      [colorBarCss]=\"colorBarCss\"\n      [selection]=\"selection\"\n      [selectedCategory]=\"selectedCategory\"\n      [colormapOptions]=\"colormapOptions\"\n      [is3d]=\"is3d\"\n      [open]=\"open.observations\"\n      (openChange)=\"setOpen('observations', $event)\"\n      (categoryClicked)=\"selectCategory($event)\"\n    ></spatial-observations-panel>\n\n    <!-- Distributions of whatever the map is coloured by. In the SAME dialog as\n         the colour controls on purpose: changing the gene and watching the\n         distribution move is one action, and two floating windows made that\n         harder to see rather than easier. -->\n    <div class=\"sc-section sc-charts\">\n      <button\n        type=\"button\"\n        class=\"sc-disclosure\"\n        (click)=\"toggleCharts()\"\n        [attr.aria-expanded]=\"chartsOpen\"\n        [attr.aria-controls]=\"chartsBodyId\"\n      >\n        <i class=\"pi\" [class.pi-chevron-right]=\"!chartsOpen\" [class.pi-chevron-down]=\"chartsOpen\"></i>\n        <span>Distribution</span>\n        <small *ngIf=\"!chartsOpen && view.colorBy\">of {{ colorByLabel }}</small>\n      </button>\n      <!-- Kept MOUNTED when collapsed, only hidden: destroying it would throw\n           away the chart kind and grouping the user picked. `active` is what\n           stops it drawing while it has no size. -->\n      <div [id]=\"chartsBodyId\" [hidden]=\"!chartsOpen\">\n        <spatial-charts [active]=\"visible && chartsOpen\"></spatial-charts>\n      </div>\n    </div>\n\n    <div class=\"sc-btns\">\n      <p-button label=\"Reset\" size=\"small\" [text]=\"true\" (onClick)=\"reset()\"></p-button>\n    </div>\n  </div>\n</p-dialog>\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 ::ng-deep .spatial-controls-dialog .p-dialog-content{padding:.75rem 1rem 1rem}.sc-empty{padding:.5rem 0;font-size:.85rem;color:var(--text-color-secondary, #6c757d);line-height:1.4}.sc-empty code{font-size:.8rem}.sc-body{display:flex;flex-direction:column;gap:.85rem}.sc-dataset{display:flex;flex-direction:column;gap:.1rem;padding-bottom:.5rem;border-bottom:1px solid var(--surface-border, #dee2e6)}.sc-dataset-name{font-weight:600;font-size:.9rem}.sc-dataset-count{font-size:.75rem;color:var(--text-color-secondary, #6c757d)}.sc-btns{display:flex;justify-content:flex-end}.sc-charts{padding-top:.5rem;border-top:1px solid var(--surface-border, #dee2e6);gap:0}.sc-disclosure{display:flex;align-items:center;gap:.4rem;width:100%;padding:.2rem 0;font:inherit;font-size:.82rem;font-weight:600;text-align:left;background:none;border:0;cursor:pointer;color:inherit}.sc-disclosure i{font-size:.7rem;color:var(--text-color-secondary, #6c757d)}.sc-disclosure small{font-weight:400;color:var(--text-color-secondary, #6c757d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-disclosure:hover{color:var(--primary-color, #3b82f6)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-dialog\n  header=\"Spatial omics\"\n  [visible]=\"visible\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  [modal]=\"false\"\n  [resizable]=\"true\"\n  [draggable]=\"true\"\n  position=\"left\"\n  (onResizeEnd)=\"onResizeEnd()\"\n  [style]=\"{ width: '30rem' }\"\n  [breakpoints]=\"{ '960px': '90vw' }\"\n  styleClass=\"spatial-controls-dialog\"\n>\n  <!-- No port bound: say why rather than showing controls that do nothing. -->\n  <div class=\"sc-empty\" *ngIf=\"!controls\">\n    No spatial-omics data source is configured. A host provides one by binding\n    <code>SPATIAL_DATA_PORT</code>.\n  </div>\n\n  <div class=\"sc-empty\" *ngIf=\"controls && !dataset\">No dataset is loaded.</div>\n\n  <div class=\"sc-body\" *ngIf=\"controls && dataset as ds\">\n    <div class=\"sc-dataset\">\n      <span class=\"sc-dataset-name\">{{ ds.name }}</span>\n      <span class=\"sc-dataset-count\">{{ ds.observations.count | number }} observations</span>\n    </div>\n\n    <!-- Organised as Xenium Explorer's side panel: one collapsible section per layer,\n         each with its own on/off switch in the header. -->\n\n    <!-- Images -->\n    <div class=\"sc-panel\" *ngIf=\"ds.imageRef && !is3d\" [class.open]=\"open.images\">\n      <div class=\"sc-panel-head\" (click)=\"toggleSection('images')\">\n        <p-checkbox\n          [binary]=\"true\"\n          [ngModel]=\"view.showImage\"\n          (click)=\"$event.stopPropagation()\"\n          (onChange)=\"onShowImage($event.checked)\"\n        ></p-checkbox>\n        <span class=\"sc-panel-title\">Images</span>\n        <i class=\"pi\" [class.pi-chevron-down]=\"open.images\" [class.pi-chevron-right]=\"!open.images\"></i>\n      </div>\n      <div class=\"sc-panel-body\" *ngIf=\"open.images\">\n        <small class=\"sc-hint\"> Channels, colours and contrast are in the Channels &amp; Histogram dialog. </small>\n      </div>\n    </div>\n\n    <!-- Cells -->\n    <spatial-cells-panel\n      *ngIf=\"hasCells && !is3d\"\n      [controls]=\"controls\"\n      [dataset]=\"ds\"\n      [view]=\"view\"\n      [genes]=\"genes\"\n      [colorBarCss]=\"colorBarCss\"\n      [open]=\"open.cells\"\n      (openChange)=\"setOpen('cells', $event)\"\n    ></spatial-cells-panel>\n\n    <!-- Transcripts -->\n    <spatial-transcripts-panel\n      *ngIf=\"hasTranscripts && (!is3d || hasTranscripts3d)\"\n      [controls]=\"controls\"\n      [dataset]=\"ds\"\n      [view]=\"view\"\n      [genes]=\"genes\"\n      [estimate]=\"estimate\"\n      [densityStats]=\"densityStats\"\n      [geneCounts]=\"geneCounts\"\n      [colormapOptions]=\"colormapOptions\"\n      [open]=\"open.transcripts\"\n      (openChange)=\"setOpen('transcripts', $event)\"\n    >\n    </spatial-transcripts-panel>\n\n    <!-- Annotations: the drawn regions, and selecting what they enclose. -->\n    <div class=\"sc-panel\" [class.open]=\"open.annotations\">\n      <div class=\"sc-panel-head\" (click)=\"toggleSection('annotations')\">\n        <p-checkbox\n          [binary]=\"true\"\n          [ngModel]=\"view.showAnnotations !== false\"\n          (click)=\"$event.stopPropagation()\"\n          (onChange)=\"onShowAnnotations($event.checked)\"\n          pTooltip=\"Show the drawn regions\"\n          tooltipPosition=\"top\"\n        ></p-checkbox>\n        <span class=\"sc-panel-title\">Annotations</span>\n        <i class=\"pi\" [class.pi-chevron-down]=\"open.annotations\" [class.pi-chevron-right]=\"!open.annotations\"></i>\n      </div>\n      <div class=\"sc-panel-body\" *ngIf=\"open.annotations\">\n        <div class=\"sc-row\">\n          <p-button\n            label=\"Select from ROIs\"\n            icon=\"pi pi-object-group\"\n            size=\"small\"\n            [outlined]=\"true\"\n            [loading]=\"selectingFromRegions\"\n            (onClick)=\"selectFromRegions()\"\n            [pTooltip]=\"\n              selectsClassVolumes\n                ? 'Select every observation inside the volumes of the classes picked in the Region Editor'\n                : 'Select every observation inside the drawn regions'\n            \"\n            tooltipPosition=\"top\"\n          ></p-button>\n          <p-button\n            *ngIf=\"hasSelection\"\n            label=\"Clear\"\n            size=\"small\"\n            [text]=\"true\"\n            (onClick)=\"clearSelection()\"\n          ></p-button>\n        </div>\n        <small class=\"sc-hint\" *ngIf=\"hasSelection\">\n          {{ selection.count | number }} of {{ ds.observations.count | number }} selected \u2014 the rest are muted.\n        </small>\n        <small class=\"sc-hint\" *ngIf=\"selectionMissed\">\n          No observations fell inside the\n          {{ missedMode === 'class-volumes' ? 'picked classes' : 'drawn regions' }}.\n        </small>\n        <small class=\"sc-hint\" *ngIf=\"selectsClassVolumes\">\n          Selects inside the volume of {{ pickedClasses[0]\n          }}{{ pickedClasses.length > 1 ? ' and ' + (pickedClasses.length - 1 | number) + ' more classes' : '' }},\n          picked in the Region Editor. Draw a region to select by it instead.\n        </small>\n        <small class=\"sc-hint\" *ngIf=\"is3d && !selectsClassVolumes && pickedClasses.length\">\n          The classes picked in the Region Editor are not on the reference volume shown here, so this selects by\n          the regions drawn over the cloud instead.\n        </small>\n        <small class=\"sc-hint\" *ngIf=\"is3d && !selectsClassVolumes\">\n          In 3D a region cuts through the cloud's full depth. Orbit and draw again to cut from another angle.\n          <ng-container *ngIf=\"!pickedClasses.length\">\n            Pick classes in the Region Editor's class tree to select inside their volumes.\n          </ng-container>\n        </small>\n      </div>\n    </div>\n\n    <!-- Observations, then what else draws them: the gene map, the 3D scene, and the\n         continuous-only knobs. -->\n    <spatial-observations-panel\n      [controls]=\"controls\"\n      [dataset]=\"ds\"\n      [view]=\"view\"\n      [genes]=\"genes\"\n      [legend]=\"legend\"\n      [colorBarCss]=\"colorBarCss\"\n      [selection]=\"selection\"\n      [selectedCategory]=\"selectedCategory\"\n      [colormapOptions]=\"colormapOptions\"\n      [is3d]=\"is3d\"\n      [open]=\"open.observations\"\n      (openChange)=\"setOpen('observations', $event)\"\n      (categoryClicked)=\"selectCategory($event)\"\n    ></spatial-observations-panel>\n\n    <!-- Distributions of whatever the map is coloured by. In the SAME dialog as\n         the colour controls on purpose: changing the gene and watching the\n         distribution move is one action, and two floating windows made that\n         harder to see rather than easier. -->\n    <div class=\"sc-section sc-charts\">\n      <button\n        type=\"button\"\n        class=\"sc-disclosure\"\n        (click)=\"toggleCharts()\"\n        [attr.aria-expanded]=\"chartsOpen\"\n        [attr.aria-controls]=\"chartsBodyId\"\n      >\n        <i class=\"pi\" [class.pi-chevron-right]=\"!chartsOpen\" [class.pi-chevron-down]=\"chartsOpen\"></i>\n        <span>Distribution</span>\n        <small *ngIf=\"!chartsOpen && view.colorBy\">of {{ colorByLabel }}</small>\n      </button>\n      <!-- Kept MOUNTED when collapsed, only hidden: destroying it would throw\n           away the chart kind and grouping the user picked. `active` is what\n           stops it drawing while it has no size. -->\n      <div [id]=\"chartsBodyId\" [hidden]=\"!chartsOpen\">\n        <spatial-charts [active]=\"visible && chartsOpen\"></spatial-charts>\n      </div>\n    </div>\n\n    <div class=\"sc-btns\">\n      <p-button label=\"Reset\" size=\"small\" [text]=\"true\" (onClick)=\"reset()\"></p-button>\n    </div>\n  </div>\n</p-dialog>\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 ::ng-deep .spatial-controls-dialog .p-dialog-content{padding:.75rem 1rem 1rem}.sc-empty{padding:.5rem 0;font-size:.85rem;color:var(--text-color-secondary, #6c757d);line-height:1.4}.sc-empty code{font-size:.8rem}.sc-body{display:flex;flex-direction:column;gap:.85rem}.sc-dataset{display:flex;flex-direction:column;gap:.1rem;padding-bottom:.5rem;border-bottom:1px solid var(--surface-border, #dee2e6)}.sc-dataset-name{font-weight:600;font-size:.9rem}.sc-dataset-count{font-size:.75rem;color:var(--text-color-secondary, #6c757d)}.sc-btns{display:flex;justify-content:flex-end}.sc-charts{padding-top:.5rem;border-top:1px solid var(--surface-border, #dee2e6);gap:0}.sc-disclosure{display:flex;align-items:center;gap:.4rem;width:100%;padding:.2rem 0;font:inherit;font-size:.82rem;font-weight:600;text-align:left;background:none;border:0;cursor:pointer;color:inherit}.sc-disclosure i{font-size:.7rem;color:var(--text-color-secondary, #6c757d)}.sc-disclosure small{font-weight:400;color:var(--text-color-secondary, #6c757d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-disclosure:hover{color:var(--primary-color, #3b82f6)}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [VISUALIZER]
@@ -39247,6 +39383,9 @@ class SpatialControlsFacade {
             // The gene filter names the old dataset's genes: kept, it could hide every observation.
             if (current.observationGenes?.length)
                 ctx.store.setSpatialView({ observationGenes: [] });
+            // Group colours are chosen for this dataset's groupings; another's same-named column is not them.
+            if (Object.keys(current.groupColors ?? {}).length)
+                ctx.store.setSpatialView({ groupColors: {} });
         });
         this.controls = this.build();
     }
@@ -39329,7 +39468,7 @@ class SpatialControlsFacade {
                 }
                 // Resolved by the SAME function the renderer uses, so a legend swatch
                 // can never disagree with the colour on screen.
-                return resolveCategoryColors(column.meta);
+                return categoryColorsFor(name, column.meta, this.ctx.store.currentSpatialView().groupColors);
             },
             continuousValues: async (source) => {
                 if (source.kind === 'feature')
@@ -39348,7 +39487,7 @@ class SpatialControlsFacade {
                 return {
                     name,
                     categories: column.meta.categories,
-                    colors: resolveCategoryColors(column.meta),
+                    colors: categoryColorsFor(name, column.meta, this.ctx.store.currentSpatialView().groupColors),
                     codes: column.codes,
                 };
             },
@@ -42440,8 +42579,10 @@ const REGION_MESH_DIMMED_OPACITY = 0.12;
 /**
  * The region reconstructions shown in a volume view: one translucent surface per region, in its
  * colour, placed in the volume's world box (pixel x, y and slice z mapped onto it the way the
- * volume maps its voxels) and re-placed when the volume's Z is stretched. A surface is updated in
- * place (`setData`, `color`) rather than added again, and picked by napari-js (`pickSurface`).
+ * volume maps its voxels). The box's Z stretch is the surfaces' `scale3d` (a uniform), so a stretch
+ * alone changes no geometry; a new box re-places them. A surface is updated in place (`setData`,
+ * `color`, `scale3d`) rather than added again, and picked by napari-js (`pickSurface`), which
+ * picks it where it is drawn.
  *
  * Highlighting is focus + context: the highlighted surfaces turn near opaque and the others fade
  * to a ghost, so the selection stands out while staying in place among its neighbours.
@@ -42461,13 +42602,30 @@ class VolumeRegionMeshes {
         this.wanted = meshes;
         this.sync();
     }
-    /** Follow the volume's frame (it opened, or its Z was stretched): re-place every surface. */
+    /**
+     * Follow the volume's frame. A new box (it opened, another volume) re-places every surface; a Z
+     * stretch of the same box only sets their `scale3d`, so nothing is re-uploaded while dragging.
+     */
     setFrame(frame) {
+        const placed = this.frame ? baseFrame(this.frame) : null;
+        const next = baseFrame(frame);
+        const sameBox = !!placed &&
+            placed.size.every((v, i) => v === next.size[i]) &&
+            placed.world.every((v, i) => Math.abs(v - next.world[i]) <= 1e-9 * Math.max(1, Math.abs(v)));
         this.frame = frame;
-        for (const e of this.layers.values())
-            e.layer.setData(toWorld(e.mesh.vertices, frame), e.mesh.faces);
+        const scale = this.scale3d();
+        for (const e of this.layers.values()) {
+            if (!sameBox)
+                e.layer.setData(toWorld(e.mesh.vertices, next), e.mesh.faces);
+            e.layer.scale3d = scale;
+        }
         this.sync();
     }
+    /** The surfaces' GPU scale: the frame's Z stretch. */
+    scale3d() {
+        const s = this.frame?.zScale;
+        return [1, 1, s && s > 0 ? s : 1];
+    }
     /** Highlight the surfaces of these keys (none: every surface as usual). */
     setHighlight(keys) {
         this.highlighted = new Set(keys);
@@ -42519,7 +42677,7 @@ class VolumeRegionMeshes {
             }
             // Rebuilt or recoloured: the same surface, updated in place.
             if (want.vertices !== e.mesh.vertices && this.frame) {
-                e.layer.setData(toWorld(want.vertices, this.frame), want.faces);
+                e.layer.setData(toWorld(want.vertices, baseFrame(this.frame)), want.faces);
             }
             if (want.color !== e.mesh.color)
                 e.layer.color = want.color;
@@ -42534,8 +42692,9 @@ class VolumeRegionMeshes {
     }
     add(mesh) {
         const frame = this.frame;
-        const layer = this.viewer.addSurface(toWorld(mesh.vertices, frame), mesh.faces, undefined, {
+        const layer = this.viewer.addSurface(toWorld(mesh.vertices, baseFrame(frame)), mesh.faces, undefined, {
             name: `region ${mesh.key}`,
+            scale3d: this.scale3d(),
             color: mesh.color,
             opacity: this.opacityOf(mesh.key),
             blending: 'translucent',
@@ -42554,6 +42713,11 @@ class VolumeRegionMeshes {
         this.layers.delete(key);
     }
 }
+/** `frame` without its Z stretch: the box the surfaces' geometry is placed in. */
+function baseFrame(frame) {
+    const s = frame.zScale && frame.zScale > 0 ? frame.zScale : 1;
+    return s === 1 ? frame : { size: frame.size, world: [frame.world[0], frame.world[1], frame.world[2] / s] };
+}
 /**
  * Image px / slice coordinates → the volume's centred world box: pixel x of a `w`-wide image
  * spans the box's width, slice k sits at the middle of its share of the box's depth.
@@ -42800,7 +42964,11 @@ class VolumeScene {
         if (!base || !this.fullSize)
             return;
         const depth = base.depth * this.ctx.settings.volumeZScale;
-        const frame = { size: this.fullSize, world: [base.width, base.height, depth] };
+        const frame = {
+            size: this.fullSize,
+            world: [base.width, base.height, depth],
+            zScale: this.ctx.settings.volumeZScale,
+        };
         this.regionMeshes.setFrame(frame);
         this.slicePlanes.setFrame(frame);
     }
@@ -43491,6 +43659,13 @@ const SPATIAL_FALLBACK_RADIUS = 4;
  *  40 µm/px template, so drawing them to scale would put every cell a fifth of a pixel wide
  *  and the section would come up empty. The point-size control scales up from this floor. */
 const SPATIAL_SLICE_MIN_DIAMETER_PX = 1.5;
+/**
+ * Smallest drawn marker diameter in the 2D view, in SCREEN pixels, at any zoom. A marker's size is
+ * the cell's own (data units), so zoomed out over a whole Cytos plate or Xenium section every cell
+ * fell below a pixel and the observations vanished; with the floor they stay a dense field of
+ * dots, coloured as they are, at every zoom (the GPU applies it per frame: no rebuild on zoom).
+ */
+const SPATIAL_MARKER_MIN_SCREEN_PX = 2;
 /** Longest side of the gene-map raster, in field pixels. A gene map is a smooth
  *  field read as territory, so it gains nothing from matching a 2 Gpx slide's
  *  resolution — and the estimate costs one pass over this many pixels. */
@@ -43658,9 +43833,9 @@ function totalDensityGroup(selection) {
  * {@link DENSITY_MAX_CLUSTERS}, each with its legend colour — restricted to the selection when
  * there is one, so "select a region, check the box" answers which clusters live there.
  */
-function rankDensityGroups(columnName, column, count, selection) {
+function rankDensityGroups(columnName, column, count, selection, groupColors) {
     const inSelection = selection.count > 0 ? selection.mask : null;
-    const colors = resolveCategoryColors(column.meta);
+    const colors = categoryColorsFor(columnName, column.meta, groupColors);
     const counts = new Uint32Array(column.meta.categories.length);
     for (let i = 0; i < count; i++) {
         if (inSelection && !inSelection[i])
@@ -44187,7 +44362,7 @@ class CellLayers {
          *  value, and a selection or opacity change recolours with the vector unchanged (SPATIAL-12). */
         this.contrastWindows = new ContrastWindowCache();
     }
-    /** True while outlines are on screen — the service hides its dots then. */
+    /** True while outlines are on screen. */
     get outlinesShown() {
         return this.polygonsShown;
     }
@@ -44237,6 +44412,8 @@ class CellLayers {
             JSON.stringify(view.continuousColormap),
             view.cellDraw,
             view.cellOpacity,
+            // Any grouping's: the cells may be coloured by segmentation method rather than the cell type.
+            JSON.stringify(view.groupColors),
         ].join('|');
         const present = ['cellFill', 'cellOutline', 'nucleusOutline'].some((g) => this.groups.shown(g));
         if (!geometryChanged && styleKey === this.cellStyleKey && present) {
@@ -44334,8 +44511,8 @@ class CellLayers {
             ? 'segmentation_method'
             : cellTypeColumnFor(dataset, view);
         const codes = name ? await this.lookup.codes(name) : null;
-        const palette = categoryRgba(codes?.meta ?? null);
-        const missing = rgba01(MISSING_COLOR);
+        const palette = categoryRgba(name, codes?.meta ?? null, view.groupColors);
+        const missing = rgba01$1(MISSING_COLOR);
         // One RGBA per shape (napari Shapes' `face_color`): any number of categories keeps its own
         // colour, where a colormap band per category ran out of LUT entries past ~127.
         const faceColor = new Float32Array(owners.length * 4);
@@ -44415,13 +44592,15 @@ class CellLayers {
     }
 }
 /** An 8-bit RGB as an opaque 0..1 RGBA. */
-function rgba01([r, g, b]) {
+function rgba01$1([r, g, b]) {
     return [r / 255, g / 255, b / 255, 1];
 }
 /** A grouping's category colours, as 0..1 RGBA by category code (one default without a grouping). */
-function categoryRgba(meta) {
-    const hex = meta && meta.kind === 'categorical' ? resolveCategoryColors(meta) : [DEFAULT_CATEGORICAL_PALETTE[0]];
-    return hex.map((h) => rgba01(parseHex(h)));
+function categoryRgba(name, meta, overrides) {
+    const hex = name && meta && meta.kind === 'categorical'
+        ? categoryColorsFor(name, meta, overrides)
+        : [DEFAULT_CATEGORICAL_PALETTE[0]];
+    return hex.map((h) => rgba01$1(parseHex(h)));
 }
 
 /**
@@ -45416,6 +45595,7 @@ function transcriptPlanKey(dataset, view, job, pxPerUnit) {
         view.transcriptAllGenesHidden.join(','),
         JSON.stringify(view.transcriptGeneColors),
         JSON.stringify(view.transcriptGeneGroups),
+        groupColorsKey(cellTypeColumnFor(dataset, view), view.groupColors),
     ].join('|');
 }
 /** The view the markers are coloured by, for what was loaded. */
@@ -45434,7 +45614,7 @@ function colorViewFor(view, kind, clustered, hasCellTypes) {
     }
     return view;
 }
-const UNASSIGNED_RGBA = [0.62, 0.62, 0.62, 0.55];
+const UNASSIGNED_RGBA$1 = [0.62, 0.62, 0.62, 0.55];
 /**
  * The transcript markers of the 2D spatial view: runs the planner's job, drops hidden groups
  * and genes, groups a selection under the marker budget, colours the entries and draws them as
@@ -45636,8 +45816,8 @@ class TranscriptLayers {
             const name = cellTypeColumnFor(dataset, view);
             const codes = name ? await this.lookup.codes(name).catch(() => null) : null;
             const cellColor = new Map();
-            if (codes?.meta.kind === 'categorical') {
-                const colors = resolveCategoryColors(codes.meta);
+            if (name && codes?.meta.kind === 'categorical') {
+                const colors = categoryColorsFor(name, codes.meta, view.groupColors);
                 codes.meta.categories.forEach((c, k) => cellColor.set(c, colors[k]));
             }
             const colors = clusterColorMap(view.transcriptGenes, view.transcriptGeneGroups, cellColor, DEFAULT_CATEGORICAL_PALETTE);
@@ -45672,7 +45852,10 @@ class TranscriptLayers {
         else {
             const name = cellTypeColumnFor(dataset, view);
             const codes = name ? await this.lookup.codes(name) : null;
-            rgb = codes?.meta.kind === 'categorical' ? resolveCategoryColors(codes.meta).map(parseHex) : [];
+            rgb =
+                name && codes?.meta.kind === 'categorical'
+                    ? categoryColorsFor(name, codes.meta, view.groupColors).map(parseHex)
+                    : [];
             codeOf = (i) => {
                 const o = t.observation[i];
                 if (!codes || o === NO_OBSERVATION)
@@ -45685,7 +45868,7 @@ class TranscriptLayers {
         const tuples = rgb.map(([r, g, b]) => [r / 255, g / 255, b / 255, 1]);
         for (let i = 0; i < t.count; i++) {
             const c = codeOf(i);
-            rgba.set(c < 0 ? UNASSIGNED_RGBA : tuples[c], i * 4);
+            rgba.set(c < 0 ? UNASSIGNED_RGBA$1 : tuples[c], i * 4);
         }
         return rgba;
     }
@@ -45718,11 +45901,10 @@ const MAX_TILE_RETRIES = 3;
  * -----------
  * Cell fill, cell outline, nucleus outline, the transcript density, then transcripts on top
  * ({@link TILE_LAYER_ORDER}); a plan restores the order once, after all its groups are in
- * place. The service's observation markers sit under all of them; while outlines are drawn the
- * markers are hidden (a cell is its outline then, not a dot), so the cells never have to
- * be ordered against them. The density goes OVER the markers on purpose: under 10^5
- * dots it would only show in the gaps between cells. {@link afterObservations} restores
- * the order after the service re-adds its markers.
+ * place. The service's observation markers sit under all of them, drawn at every zoom: once
+ * cells are big enough to outline, their outlines go over their markers. The density goes
+ * OVER the markers on purpose: under 10^5 dots it would only show in the gaps between cells.
+ * {@link afterObservations} restores the order after the service re-adds its markers.
  *
  * ONE LAYER PER GROUP
  * -------------------
@@ -45794,7 +45976,7 @@ class NapariSpatialTileLayers {
     owns(layer) {
         return this.groups.owns(layer);
     }
-    /** True while outlines are on screen — the service hides its dots then. */
+    /** True while outlines are on screen. */
     get outlinesShown() {
         return this.cells.outlinesShown;
     }
@@ -46200,13 +46382,13 @@ class Spatial2dScene extends SpatialSceneBase {
         return this.drawn ? this.drawn[k] : k;
     }
     /**
-     * Whether the markers are drawn: when the user wants them, and not while cell outlines are on
-     * screen — then a cell IS its outline, and a circle on top of it is noise. Zoomed out past the
-     * outline threshold, the circles stand in for the cells.
+     * Whether the markers are drawn: whenever the user wants them, at every zoom. Cell outlines come
+     * and go with the zoom (their level of detail follows it) and are drawn over the markers; the
+     * observations themselves never disappear with them.
      */
     pointsVisible() {
         const view = this.session.latest?.[1];
-        return (view?.showPoints ?? true) && !this.session.tiles?.outlinesShown;
+        return view?.showPoints ?? true;
     }
     /**
      * Redraw the markers over a freshly rendered image. Two reasons, both invisible from the
@@ -46355,6 +46537,8 @@ class Spatial2dScene extends SpatialSceneBase {
             scale: ref?.scale ?? [1, 1],
             translate: ref?.translate ?? [0, 0],
             visible: this.pointsVisible(),
+            // Never under a couple of screen pixels, so the observations stay visible zoomed out.
+            minScreenSize: SPATIAL_MARKER_MIN_SCREEN_PX,
         });
         // Outlines, density and transcripts go back over the markers just added.
         this.session.tiles?.afterObservations();
@@ -46674,7 +46858,7 @@ class Spatial2dScene extends SpatialSceneBase {
             const column = await port.getColumn(colorBy.name);
             if (isCategoricalColumn(column)) {
                 const rgba = encodeCategorical(column.codes, {
-                    colors: resolveCategoryColors(column.meta),
+                    colors: categoryColorsFor(colorBy.name, column.meta, view.groupColors),
                     opacity: view.opacity,
                     muted,
                 });
@@ -46759,11 +46943,317 @@ function gatherSymbols(symbols, indices) {
     return Uint8Array.from(indices, (i) => symbols[i]);
 }
 
+/** Most transcripts drawn in the 3D view: past it, every k-th one is drawn (and the console says so). */
+const TRANSCRIPTS_3D_MAX = 2_000_000;
+/** Most level-0 tiles read for the 3D view: a dataset needing more is too large to draw whole. */
+const TRANSCRIPTS_3D_MAX_TILES = 4096;
+/** Tile reads in flight at once. */
+const CONCURRENCY = 8;
+/** A transcript's marker in the 3D view, in screen pixels at a transcript scale of 1. */
+const TRANSCRIPT_3D_BASE_SIZE = 2;
+/** A transcript with no colour by cell type (in no cell, or a cell in no group), as the 2D markers. */
+const UNASSIGNED_RGBA = [0.62, 0.62, 0.62, 0.55];
+/** The genes a view draws in 3D, as the tile query takes them, or null when it draws none. */
+function transcripts3dGenes(dataset, view) {
+    if (view.transcriptMode === 'off')
+        return null;
+    if (view.transcriptAllGenes) {
+        if (allGenesHidden(view))
+            return null;
+        return { query: [ALL_GENES], allGenes: true };
+    }
+    const hidden = new Set(view.transcriptHiddenGenes);
+    const genes = view.transcriptGenes.filter((g) => !hidden.has(g));
+    return genes.length ? { query: genes, allGenes: false } : null;
+}
+/**
+ * Each loaded transcript's colour, packed RGBA, as the 2D markers colour them by gene: a gene's
+ * chosen colour, else the palette's by its slot (the selection's order, or with "All genes" the
+ * dataset's gene code).
+ */
+function transcripts3dColors(view, names, gene, count) {
+    const n = names ? names.length : DEFAULT_CATEGORICAL_PALETTE.length;
+    const table = Array.from({ length: n }, (_g, i) => rgba01((names && view.transcriptGeneColors[names[i]]) ||
+        DEFAULT_CATEGORICAL_PALETTE[i % DEFAULT_CATEGORICAL_PALETTE.length]));
+    return packed(count, (i) => table[names ? gene[i] : gene[i] % n]);
+}
+/**
+ * How the panel's "Colour by" applies in 3D, as it does to the 2D markers (`colorViewFor`): by
+ * cell type when the dataset has one (else by gene), by cluster for the selected genes (with "All
+ * genes" a cluster is its gene), by gene otherwise.
+ */
+function transcripts3dColorBy(dataset, view, allGenes) {
+    const by = view.transcriptColorBy;
+    if (by === 'cellType')
+        return cellTypeColumnFor(dataset, view) ? 'cellType' : 'gene';
+    if (by === 'cluster' && !allGenes)
+        return 'cluster';
+    return 'gene';
+}
+/** The colours the cells' grouping gives its groups, by name (none without a grouping). */
+async function cellGroupColors(dataset, view, port) {
+    const name = cellTypeColumnFor(dataset, view);
+    if (!name)
+        return null;
+    const column = await port.getColumn(name);
+    if (!isCategoricalColumn(column))
+        return null;
+    const hex = categoryColorsFor(name, column.meta, view.groupColors);
+    const byName = new Map(column.meta.categories.map((c, k) => [c, hex[k]]));
+    return { codes: column.codes, colors: hex.map(rgba01), byName };
+}
+/** `#rrggbb` as an opaque 0..1 RGBA. */
+function rgba01(hex) {
+    const [r, g, b] = parseHex(hex);
+    return [r / 255, g / 255, b / 255, 1];
+}
+/** `count` colours packed RGBA, unassigned where `at` has none. */
+function packed(count, at) {
+    const out = new Float32Array(count * 4);
+    for (let i = 0; i < count; i++)
+        out.set(at(i) ?? UNASSIGNED_RGBA, i * 4);
+    return out;
+}
+/**
+ * The transcripts of the 3D spatial view: every molecule of the genes the Transcripts panel draws
+ * (its selected genes, or "All genes"), at its own x, y and z, in the cloud's box and Z stretch.
+ *
+ * The 2D view reads transcripts by level of detail for the camera; a 3D orbit has no such window,
+ * so this reads the whole level 0 once per gene selection (a few hundred thousand molecules for a
+ * MERFISH section) and only restyles after that. Drawn only for a dataset whose transcripts carry z.
+ */
+class Spatial3dTranscripts {
+    constructor(viewer, begin) {
+        this.viewer = viewer;
+        this.begin = begin;
+        this.layer = null;
+        /** What {@link layer} was loaded from (dataset, genes, quality), and styled with. */
+        this.loadKey = null;
+        this.styleKey = null;
+        this.loaded = null;
+        this.loads = new Supersede();
+    }
+    /** The layer drawn, if any (for tests and the scene's Z stretch). */
+    get drawn() {
+        return this.layer;
+    }
+    /** Draw what `view` asks for, loading the molecules when the genes changed. */
+    async sync(dataset, view, port, frame) {
+        const meta = dataset.transcriptTiles;
+        const genes = meta?.hasZ && port?.getTranscriptTile ? transcripts3dGenes(dataset, view) : null;
+        if (!meta || !genes || !port) {
+            this.remove();
+            return;
+        }
+        if (genes.allGenes && (meta.count ?? 0) > TRANSCRIPTS_3D_MAX) {
+            console.warn(`[napari-js] ${meta.count} transcripts are too many to draw in 3D: select genes to see theirs`);
+            this.remove();
+            return;
+        }
+        const quality = view.transcriptQuality === 'all' ? 'all' : 'high';
+        const loadKey = `${dataset.id}|${genes.query.join('\u0001')}|${quality}`;
+        if (loadKey !== this.loadKey) {
+            const task = this.loads.next();
+            const [x0, y0, x1, y1] = meta.bounds;
+            const keys = tilesInRect({ x0, y0, x1: x1 + 1e-6, y1: y1 + 1e-6 }, 0, meta.levels, meta.bounds);
+            if (keys.length > TRANSCRIPTS_3D_MAX_TILES) {
+                console.warn(`[napari-js] ${keys.length} transcript tiles are too many to read for the 3D view`);
+                this.remove();
+                return;
+            }
+            const end = this.begin('Transcripts');
+            let tiles;
+            try {
+                tiles = await pooled(keys, CONCURRENCY, (k) => port.getTranscriptTile(0, k.gx, k.gy, { genes: genes.query, quality }));
+            }
+            catch (err) {
+                console.warn('[napari-js] transcripts for the 3D view could not be read', err);
+                // The panel asked for other transcripts than those drawn: take them down rather than leave
+                // the old selection up as if it were the new one; the next change reads again. Only the
+                // current load may: a superseded one must not tear down what a newer one drew.
+                if (task())
+                    this.clearLayer();
+                return;
+            }
+            finally {
+                end();
+            }
+            if (!task())
+                return;
+            this.loadKey = loadKey;
+            this.styleKey = null;
+            this.loaded = { tiles, names: genes.allGenes ? (meta.genes ?? null) : genes.query };
+        }
+        await this.draw(dataset, view, port, frame, genes.allGenes);
+    }
+    /** Follow the scene's Z stretch (nothing is re-uploaded). */
+    setZScale(s) {
+        if (this.layer)
+            this.layer.scale3d = [1, 1, s];
+    }
+    /** Take the layer down and forget what it showed. */
+    remove() {
+        this.loads.cancel();
+        this.clearLayer();
+    }
+    clearLayer() {
+        if (this.layer)
+            this.viewer.layers.remove(this.layer);
+        this.layer = null;
+        this.loadKey = null;
+        this.styleKey = null;
+        this.loaded = null;
+    }
+    async draw(dataset, view, port, frame, allGenes) {
+        const loaded = this.loaded;
+        if (!loaded)
+            return;
+        const by = transcripts3dColorBy(dataset, view, allGenes);
+        const styleKey = [
+            frame.origin.join(','),
+            by,
+            by === 'gene' ? JSON.stringify(view.transcriptGeneColors) : '',
+            by !== 'gene' ? `${cellTypeColumnFor(dataset, view)}|${JSON.stringify(view.groupColors)}` : '',
+            by === 'cluster' ? JSON.stringify(view.transcriptGeneGroups) : '',
+            allGenes ? view.transcriptAllGenesHidden.join(',') : '',
+        ].join('|');
+        const size = TRANSCRIPT_3D_BASE_SIZE * (view.transcriptScale > 0 ? view.transcriptScale : 1);
+        if (this.layer && styleKey === this.styleKey) {
+            this.layer.size = size;
+            this.layer.opacity = view.transcriptOpacity;
+            this.layer.scale3d = [1, 1, frame.zScale];
+            return;
+        }
+        const { names } = loaded;
+        const shown = allGenes && names ? allGeneShownBy(view.transcriptAllGenesHidden) : null;
+        const keep = shown && names ? (g) => !!names[g] && shown(names[g]) : () => true;
+        const total = loaded.tiles.reduce((n, t) => n + t.count, 0);
+        const stride = Math.max(1, Math.ceil(total / TRANSCRIPTS_3D_MAX));
+        if (stride > 1)
+            console.warn(`[napari-js] drawing every ${stride}th of ${total} transcripts in 3D`);
+        const [ox, oy, oz] = frame.origin;
+        const positions = [];
+        const genes = [];
+        const cells = [];
+        let seen = 0;
+        for (const t of loaded.tiles) {
+            for (let i = 0; i < t.count; i++) {
+                if (!keep(t.gene[i]) || seen++ % stride)
+                    continue;
+                positions.push(t.x[i] + ox, t.y[i] + oy, t.z[i] + oz);
+                genes.push(t.gene[i]);
+                cells.push(t.observation[i]);
+            }
+        }
+        const count = genes.length;
+        let colors;
+        if (by === 'gene') {
+            colors = transcripts3dColors(view, names, Uint16Array.from(genes), count);
+        }
+        else {
+            const groups = await cellGroupColors(dataset, view, port).catch((err) => {
+                console.warn('[napari-js] the cells grouping for the 3D transcripts could not be read', err);
+                return null;
+            });
+            // A newer draw (another style, or the layer taken down) won while the column loaded.
+            if (this.loaded !== loaded)
+                return;
+            if (by === 'cellType') {
+                colors = packed(count, (i) => {
+                    const o = cells[i];
+                    const code = !groups || o === NO_OBSERVATION ? NO_CATEGORY : groups.codes[o];
+                    return code === NO_CATEGORY ? undefined : groups.colors[code];
+                });
+            }
+            else {
+                // A cluster named like a group of the cells' grouping takes that group's colour, as in 2D.
+                const byCluster = clusterColorMap(view.transcriptGenes, view.transcriptGeneGroups, groups?.byName ?? new Map(), DEFAULT_CATEGORICAL_PALETTE);
+                const table = (names ?? []).map((gene) => {
+                    const hex = byCluster.get(clusterOfGene(gene, view.transcriptGeneGroups));
+                    return hex ? rgba01(hex) : undefined;
+                });
+                colors = packed(count, (i) => table[genes[i]]);
+            }
+        }
+        if (this.layer)
+            this.viewer.layers.remove(this.layer);
+        this.layer = null;
+        this.styleKey = styleKey;
+        if (!count)
+            return;
+        this.layer = this.viewer.addPoints3D(Float32Array.from(positions), new Float32Array(count), {
+            name: 'transcripts',
+            size,
+            opacity: view.transcriptOpacity,
+            scale3d: [1, 1, frame.zScale],
+            colors,
+        });
+    }
+}
+/** `work` over `items`, at most `limit` at once, results in order. */
+async function pooled(items, limit, work) {
+    const out = new Array(items.length);
+    let next = 0;
+    const run = async () => {
+        while (next < items.length) {
+            const i = next++;
+            out[i] = await work(items[i]);
+        }
+    };
+    await Promise.all(Array.from({ length: Math.min(limit, items.length) }, run));
+    return out;
+}
+
+/** The least Z stretch: a tenth of the true depth. */
+const SPATIAL_Z_SCALE_MIN = 0.1;
+/** The most Z stretch a cloud allows, at least: the Volume view's. */
+const SPATIAL_Z_SCALE_MAX = 10;
+/** Nor more than this, however thin the cloud is. */
+const SPATIAL_Z_SCALE_CEILING = 1000;
+/**
+ * The most a box's Z may be stretched: until it is twice as deep as it is wide, so even a section
+ * microns thick and millimetres wide can be stood up into a block — but never less than the
+ * Volume view's 10x, nor more than {@link SPATIAL_Z_SCALE_CEILING}.
+ */
+function spatialZScaleMax(box) {
+    const flat = (2 * Math.max(box.width, box.height)) / Math.max(box.depth, 1e-9);
+    return Math.min(SPATIAL_Z_SCALE_CEILING, Math.max(SPATIAL_Z_SCALE_MAX, flat));
+}
+/**
+ * The Z handle's drag (px) per doubling: the Volume view's 180 px, less when the range is wider,
+ * so going from the true depth to the most stretch is about the same drag (~540 px) either way.
+ */
+function spatialZPixelsPerDouble(maxScale) {
+    return Math.max(60, Math.min(180, 540 / Math.log2(Math.max(2, maxScale))));
+}
+/**
+ * The X/Y/Z axis-end labels for a box (as drawn: Z stretched by `zScale`), its true lengths in µm
+ * when the dataset declares `micronsPerUnit`, else in its own units. A stretched Z says by how much,
+ * so its length is never read off the drawing.
+ */
+function spatialAxesLabels(drawn, zScale, micronsPerUnit) {
+    const hx = drawn.width / 2;
+    const hy = drawn.height / 2;
+    const hz = drawn.depth / 2;
+    const mpu = micronsPerUnit && micronsPerUnit > 0 ? micronsPerUnit : 0;
+    const len = (n) => (mpu ? formatLength(n * mpu, 'µm') : `${+n.toPrecision(3)} units`);
+    const stretch = Math.abs(zScale - 1) > 1e-3 ? ` (×${+zScale.toPrecision(3)})` : '';
+    return [
+        { anchor: [hx, -hy, -hz], text: `X · ${len(drawn.width)}`, color: '#ed4545' },
+        { anchor: [-hx, hy, -hz], text: `Y · ${len(drawn.height)}`, color: '#4dd959' },
+        { anchor: [-hx, -hy, hz], text: `Z · ${len(drawn.depth / zScale)}${stretch}`, color: '#668cff' },
+    ];
+}
 /**
  * SPATIAL_OMICS_3D (review Appendix B, cluster K): observations as a 3D point cloud under the
  * orbit camera, with the dataset's reference volume around it, per-cluster density volumes and the
  * 3D gene map.
  *
+ * Everything sits in one box centred on the world origin (see {@link ensureFrame}): the reference
+ * volume's, else the density grid's. The Volume view's axes gizmo and Z-height handle are drawn on
+ * it, and the handle stretches Z: the cloud through its `scale3d`, every volume through its voxel
+ * size, so nothing is re-uploaded while dragging (see {@link setZScale}).
+ *
  * Thinner than the 2D scene: there is no tissue image to render (a registered volume like the
  * Allen CCF has no single reference plane), so no readback and no navigator; the 3D scale bar
  * follows the dataset (see {@link installScaleBar}). The region tools work in SCREEN space through
@@ -46804,6 +47294,14 @@ class Spatial3dScene extends SpatialSceneBase {
         this.geneMapKey = null;
         /** Offset applied to observation coordinates to sit them in the volume's box. */
         this.origin = [0, 0, 0];
+        /** The box everything sits in, before the Z stretch, centred on the origin (see ensureFrame). */
+        this.box = null;
+        this.boxKey = null;
+        /** The axes gizmo on {@link box} and the handle that stretches its Z (see setZScale). */
+        this.gizmo = null;
+        this.zHandle = null;
+        /** Each volume layer's own voxel size, before the Z stretch. */
+        this.baseVoxels = new WeakMap();
         /**
          * napari-js's depth-aware pick over the cloud, and the projection the ROI selection reads. It
          * owns the caching policy: re-project lazily, on the first pick after the camera, the canvas or
@@ -46825,6 +47323,7 @@ class Spatial3dScene extends SpatialSceneBase {
          *  this scene carries it). */
         this.invertSub = null;
         this.regionMeshes = new VolumeRegionMeshes(ctx.viewer);
+        this.transcripts3d = new Spatial3dTranscripts(ctx.viewer, (label) => ctx.badge.begin(label));
     }
     /** Show these region reconstructions with the cloud (replacing the ones shown). */
     setRegionMeshes(meshes) {
@@ -46860,7 +47359,8 @@ class Spatial3dScene extends SpatialSceneBase {
         const [vx, vy, vz] = meta.voxelSize;
         this.regionMeshes.setFrame({
             size: [meta.width, meta.height, meta.depth],
-            world: [meta.width * vx, meta.height * vy, meta.depth * vz],
+            world: [meta.width * vx, meta.height * vy, meta.depth * vz * this.zScale()],
+            zScale: this.zScale(),
         });
     }
     /**
@@ -46898,6 +47398,64 @@ class Spatial3dScene extends SpatialSceneBase {
     histogram() {
         return null;
     }
+    /** The toolbar's 3D controls, as the Volume view's: drag mode, re-framing and the axes. */
+    surface3dControls() {
+        return surface3dControls(this.ctx, () => this.gizmo);
+    }
+    /**
+     * Stretch Z by `factor` (1 = the data's true proportions), as the Z handle drags it: the cloud
+     * through its `scale3d`, each volume through its voxel size, the axes and the region surfaces
+     * with them — all about the world origin, which the box is centred on, so they stay aligned.
+     * Nothing is re-uploaded. Kept in the settings, so a re-plot keeps it.
+     */
+    setZScale(factor) {
+        const max = this.box ? spatialZScaleMax(this.box) : SPATIAL_Z_SCALE_MAX;
+        this.ctx.settings.spatialZScale = Math.min(max, Math.max(SPATIAL_Z_SCALE_MIN, factor));
+        this.applyZScale();
+    }
+    /** The Z stretch in effect: the setting, within what this box allows. */
+    zScale() {
+        const max = this.box ? spatialZScaleMax(this.box) : SPATIAL_Z_SCALE_MAX;
+        const s = this.ctx.settings.spatialZScale;
+        return Math.min(max, Math.max(SPATIAL_Z_SCALE_MIN, s > 0 ? s : 1));
+    }
+    applyZScale() {
+        const s = this.zScale();
+        if (this.points)
+            this.points.scale3d = [1, 1, s];
+        this.transcripts3d.setZScale(s);
+        for (const layer of [this.volume, this.geneMapLayer, ...this.densityLayers]) {
+            const base = layer && this.baseVoxels.get(layer);
+            if (layer && base)
+                layer.voxelSize = [base[0], base[1], base[2] * s];
+        }
+        const dataset = this.session.latest?.[0];
+        if (this.gizmo && this.box) {
+            const drawn = this.drawnBox(this.box);
+            this.gizmo.setDepth(drawn.depth, spatialAxesLabels(drawn, s, dataset?.micronsPerUnit));
+        }
+        this.zHandle?.reposition();
+        if (dataset)
+            this.placeRegionMeshes(dataset);
+        this.ctx.viewer.requestRender();
+    }
+    /** `box` with its Z stretched as drawn. */
+    drawnBox(box) {
+        return { width: box.width, height: box.height, depth: box.depth * this.zScale() };
+    }
+    /**
+     * Add a volume layer with its Z stretched as the rest of the scene is, remembering its own
+     * voxel size so a later stretch can be applied to it.
+     */
+    addVolume(viewer, data, width, height, depth, opts) {
+        const [vx, vy, vz] = opts.voxelSize;
+        const layer = viewer.addVolume(data, width, height, depth, {
+            ...opts,
+            voxelSize: [vx, vy, vz * this.zScale()],
+        });
+        this.baseVoxels.set(layer, [vx, vy, vz]);
+        return layer;
+    }
     /**
      * Every observation's position on the canvas under the current 3D camera (for the ROI
      * selection), indexed by observation with NaN for anything not drawn. Null before the cloud
@@ -46928,6 +47486,7 @@ class Spatial3dScene extends SpatialSceneBase {
     }
     dispose() {
         this.regionMeshes.clear();
+        this.transcripts3d.remove();
         this.disposeSpatial();
         this.invertSub?.unsubscribe();
         this.invertSub = null;
@@ -46935,6 +47494,7 @@ class Spatial3dScene extends SpatialSceneBase {
         this.geneMapLoads.cancel();
         this.scaleBar?.dispose();
         this.scaleBar = null;
+        this.removeAxes();
         // Drop the cached interleaved coordinates too: holding 3.7M x 3 floats after
         // a teardown is ~45MB of retained heap for a scene that no longer exists.
         this.positions = null;
@@ -47047,8 +47607,9 @@ class Spatial3dScene extends SpatialSceneBase {
         await this.ensureVolume(viewer, dataset, view);
         if (!task())
             return;
-        // Then the cluster density volumes, which can set the centring offset when
-        // there is no reference volume — so before any position is computed from it.
+        // The box everything sits in, before any position is computed from its centring offset.
+        this.ensureFrame(dataset);
+        // Then the cluster density volumes.
         await this.ensureDensityVolumes(viewer, dataset, view, selection);
         if (!task())
             return;
@@ -47071,6 +47632,11 @@ class Spatial3dScene extends SpatialSceneBase {
             this.volume.opacity = view.volumeOpacity;
         }
         this.drawCloud(viewer, dataset, view, selection, enc, geneShown);
+        // The transcripts last: they sit in the box the cloud fixed, and their first read can take a while.
+        await this.transcripts3d.sync(dataset, view, this.session.port, {
+            origin: this.origin,
+            zScale: this.zScale(),
+        });
     }
     /**
      * Draw the point cloud: a new layer for new geometry (a dataset or a section), the colour
@@ -47107,6 +47673,7 @@ class Spatial3dScene extends SpatialSceneBase {
             this.scalarKey = scalarKey;
             this.points = viewer.addPoints3D(this.positions, valuesFor(), {
                 name: 'observations',
+                scale3d: [1, 1, this.zScale()],
                 colormap,
                 contrastLimits,
                 size,
@@ -47315,7 +47882,7 @@ class Spatial3dScene extends SpatialSceneBase {
         const lo = 0;
         const data = encodeExpressionVolume(field, [lo, hi], { log: view.logScale });
         const lut = this.ctx.display.spatialLut(view);
-        this.geneMapLayer = viewer.addVolume(data, field.width, field.height, field.depth, {
+        this.geneMapLayer = this.addVolume(viewer, data, field.width, field.height, field.depth, {
             name: `gene map · ${gene}${interpolate ? ' · volume' : ''}`,
             colormap: colormapFromLut(`gene-map-${gene}`, lut),
             // The encoding already applied the window, so the layer must not apply a
@@ -47360,7 +47927,13 @@ class Spatial3dScene extends SpatialSceneBase {
         // holding the same number of cells would otherwise look like the same key and
         // leave the previous ROI's fields on screen.
         const key = on
-            ? [dataset.id, column ?? 'all', smoothing, this.session.selectionRev(selection)].join('|')
+            ? [
+                dataset.id,
+                column ?? 'all',
+                smoothing,
+                this.session.selectionRev(selection),
+                groupColorsKey(column, view.groupColors),
+            ].join('|')
             : null;
         if (key === this.densityKey)
             return;
@@ -47371,24 +47944,13 @@ class Spatial3dScene extends SpatialSceneBase {
         const load = this.densityLoads.next();
         if (!key)
             return;
+        // The density box is the scene's box (ensureFrame), so the cloud already sits in it.
         const grid = densityGrid(dataset);
         if (!grid)
             return;
-        // With no reference volume there is no offset yet, and a VolumeLayer has no
-        // translate — napari centres its box on the world origin. So the POINTS move by
-        // half the density box, exactly as they do for a reference volume, and the
-        // cached geometry is invalidated because that offset just changed.
-        if (!this.volume) {
-            this.origin = [
-                -(grid.width * grid.voxelSize[0]) / 2,
-                -(grid.height * grid.voxelSize[1]) / 2,
-                -(grid.depth * grid.voxelSize[2]) / 2,
-            ];
-            this.layerKey = null;
-        }
         let groups;
         try {
-            groups = await this.densityGroups(dataset, column, selection);
+            groups = await this.densityGroups(dataset, column, selection, view);
         }
         catch (err) {
             console.warn('[napari-js] density volumes: column unavailable', err);
@@ -47424,7 +47986,7 @@ class Spatial3dScene extends SpatialSceneBase {
             // A cluster with nothing on the grid draws no layer, rather than an empty box.
             if (!data)
                 return;
-            this.densityLayers.push(viewer.addVolume(data, grid.width, grid.height, grid.depth, {
+            this.densityLayers.push(this.addVolume(viewer, data, grid.width, grid.height, grid.depth, {
                 name: `density · ${group.name}`,
                 colormap: this.ctx.display.channelTintColormap(group.color),
                 invert: this.ctx.display.invert,
@@ -47447,7 +48009,7 @@ class Spatial3dScene extends SpatialSceneBase {
      * which is a real question on its own ("where is the tissue dense?") and the honest thing to
      * show when the view is not encoding a taxonomy.
      */
-    async densityGroups(dataset, column, selection) {
+    async densityGroups(dataset, column, selection, view) {
         const port = this.session.port;
         const meta = column ? findColumnMeta(dataset, column) : undefined;
         if (!port || !column || !meta || meta.kind !== 'categorical')
@@ -47455,19 +48017,14 @@ class Spatial3dScene extends SpatialSceneBase {
         const loaded = await port.getColumn(column);
         if (!isCategoricalColumn(loaded))
             return [];
-        return rankDensityGroups(column, loaded, dataset.observations.count, selection);
+        return rankDensityGroups(column, loaded, dataset.observations.count, selection, view.groupColors);
     }
     /**
-     * Add (or keep) the dataset's reference volume, and derive the offset that sits the
-     * observations inside it.
-     *
-     * `VolumeLayer` has no translate: napari-js maps the volume's unit cube to a world box
-     * **centred on the origin**, sized `dims x voxelSize`. The observations, by contract, are in
-     * the volume's own frame with its near corner at the coordinate origin. So the two only line
-     * up if the POINTS move — by half the box — which is what {@link origin} is.
+     * Add (or keep) the dataset's reference volume. The offset that sits the observations inside
+     * it is {@link ensureFrame}'s.
      *
-     * A failed or absent volume is not fatal: the cloud renders on its own, at its own
-     * coordinates, and the camera frames the points instead.
+     * A failed or absent volume is not fatal: the cloud renders on its own, in the same box, and
+     * the camera frames the points instead.
      */
     async ensureVolume(viewer, dataset, view) {
         const meta = dataset.volume;
@@ -47482,7 +48039,6 @@ class Spatial3dScene extends SpatialSceneBase {
         }
         // The surfaces sat in the volume just removed (or there was none): down until one is placed.
         this.regionMeshes.clearFrame();
-        this.origin = [0, 0, 0];
         if (!meta || !port?.getVolume)
             return;
         let voxels;
@@ -47497,7 +48053,7 @@ class Spatial3dScene extends SpatialSceneBase {
             return;
         const [vx, vy, vz] = meta.voxelSize;
         this.volumeKey = key;
-        this.volume = viewer.addVolume(voxels, meta.width, meta.height, meta.depth, {
+        this.volume = this.addVolume(viewer, voxels, meta.width, meta.height, meta.depth, {
             name: 'reference volume',
             colormap: 'gray',
             // MIP would draw the brightest voxel along each ray, which for an averaged
@@ -47510,16 +48066,85 @@ class Spatial3dScene extends SpatialSceneBase {
         });
         if (this.regionsThrough)
             this.volume.blending = 'translucent_no_depth';
-        // Half the box, negated: the observations' origin is the box's near corner,
-        // and the box is centred on the world origin.
-        this.origin = [-(meta.width * vx) / 2, -(meta.height * vy) / 2, -(meta.depth * vz) / 2];
         this.placeRegionMeshes(dataset);
+    }
+    /**
+     * The box everything sits in, centred on the world origin, and the offset that sits the
+     * observations in it; with the axes gizmo and the Z handle on it.
+     *
+     * `VolumeLayer` has no translate: napari-js maps a volume's unit cube to a world box centred on
+     * the origin, sized `dims x voxelSize`. The observations, by contract, are in the reference
+     * volume's frame with its near corner at the coordinate origin, and the density grid is measured
+     * from the coordinate origin the same way (`densityGrid`), so its box is the reference volume's
+     * when there is one. So the POINTS move by half that box — {@link origin} — and every volume, the
+     * reference, the densities and the gene map, lines up with them and with each other. Without a
+     * reference volume this centres the cloud too, which the axes and the Z stretch need: both work
+     * about the origin.
+     */
+    ensureFrame(dataset) {
+        const meta = dataset.volume;
+        const key = `${dataset.id}:${dataset.observations.count}:${meta ? `${meta.width}x${meta.height}x${meta.depth}` : '-'}`;
+        if (key === this.boxKey)
+            return;
+        this.boxKey = key;
+        const grid = densityGrid(dataset);
+        this.box = grid
+            ? {
+                width: grid.width * grid.voxelSize[0],
+                height: grid.height * grid.voxelSize[1],
+                depth: grid.depth * grid.voxelSize[2],
+            }
+            : null;
+        const box = this.box;
+        this.origin = box ? [-box.width / 2, -box.height / 2, -box.depth / 2] : [0, 0, 0];
         // Force a geometry rebuild: the offset changed, so cached positions are stale.
         this.layerKey = null;
+        this.installAxes(dataset);
+        // A stretch chosen for another box may be past what this one allows: draw what is in effect.
+        this.applyZScale();
+    }
+    /**
+     * The Volume view's axes gizmo and Z-height handle, on {@link box}. The handle floats past the
+     * top of the Z axis (the box's min-XY corner, where the blue axis and its label are), by a share
+     * of the box's largest side rather than of its depth, so it clears the label even while a thin
+     * section is drawn flat.
+     */
+    installAxes(dataset) {
+        this.removeAxes();
+        const box = this.box;
+        if (!box)
+            return;
+        const { viewer, host, settings } = this.ctx;
+        const drawn = this.drawnBox(box);
+        this.gizmo = new Axes3dGizmo(viewer, host, drawn, spatialAxesLabels(drawn, this.zScale(), dataset.micronsPerUnit), {
+            visible: settings.axesVisible,
+        });
+        const maxScale = spatialZScaleMax(box);
+        this.zHandle = new NapariVolumeZHandle(host, viewer.camera3d, {
+            topAnchor: () => {
+                const d = this.drawnBox(box);
+                return [-d.width / 2, -d.height / 2, d.depth / 2 + 0.08 * Math.max(d.width, d.height, d.depth)];
+            },
+            getScale: () => this.zScale(),
+            setScale: (s) => this.setZScale(s),
+            minScale: SPATIAL_Z_SCALE_MIN,
+            maxScale,
+            pixelsPerDouble: spatialZPixelsPerDouble(maxScale),
+        });
+    }
+    removeAxes() {
+        if (this.gizmo) {
+            this.ctx.viewer.layers.remove(this.gizmo.layer);
+            this.gizmo.destroy();
+            this.gizmo = null;
+        }
+        this.zHandle?.destroy();
+        this.zHandle = null;
     }
     /** Drop every layer of the cloud (the dataset went away, or has no z). */
     removeLayers(viewer) {
         this.regionMeshes.clearFrame();
+        this.transcripts3d.remove();
         for (const layer of [this.points, this.volume, this.geneMapLayer, ...this.densityLayers]) {
             if (layer)
                 viewer.layers.remove(layer);
@@ -47537,6 +48162,9 @@ class Spatial3dScene extends SpatialSceneBase {
         this.volume = null;
         this.volumeKey = null;
         this.origin = [0, 0, 0];
+        this.box = null;
+        this.boxKey = null;
+        this.removeAxes();
         this.points = null;
         this.setPicker(null);
         this.layerKey = null;
@@ -47569,7 +48197,7 @@ class Spatial3dScene extends SpatialSceneBase {
         if (colorBy.kind === 'column') {
             const column = await port.getColumn(colorBy.name);
             if (isCategoricalColumn(column)) {
-                return encodeSpatial3dCategorical(column.codes, resolveCategoryColors(column.meta));
+                return encodeSpatial3dCategorical(column.codes, categoryColorsFor(colorBy.name, column.meta, view.groupColors));
             }
             return this.encodeContinuous(column.values, view);
         }
@@ -47606,6 +48234,7 @@ function cloudSubset(dataset, view, geneShown = null) {
     const scalarKey = [
         key,
         view.colorBy ? `${view.colorBy.kind}:${view.colorBy.name}` : 'flat',
+        groupColorsKey(view.colorBy?.kind === 'column' ? view.colorBy.name : null, view.groupColors),
         observationGeneStyleKey(view),
         view.logScale ? 'log' : 'lin',
         clip.join(','),
@@ -47712,6 +48341,7 @@ class NapariVisualizerService extends BaseStoreVisualizer {
             axesVisible: true,
             surfaceWireframe: false,
             volumeZScale: 1,
+            spatialZScale: 1,
         };
         /**
          * Frame loading (volume assembly, surface preload): aborted by {@link reset} AND by
@@ -50212,4 +50842,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-qUeMuBb0.mjs.map
+//# sourceMappingURL=jax-data-science-sci-image-visualizer-jax-data-science-sci-image-visualizer-DHrHO2ay.mjs.map