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

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

@@ -954,6 +954,7 @@ function datasetFromManifest(manifest, coords, extras = {}) {
         ...(manifest.transcriptTiles ? { transcriptTiles: manifest.transcriptTiles } : {}),
         ...(manifest.density ? { density: manifest.density } : {}),
         ...(manifest.transcriptBins ? { transcriptBins: manifest.transcriptBins } : {}),
+        ...(manifest.transcriptGeneBins ? { transcriptGeneBins: manifest.transcriptGeneBins } : {}),
         ...(manifest.transcriptBinsStatus ? { transcriptBinsStatus: manifest.transcriptBinsStatus } : {}),
     };
 }
@@ -1183,6 +1184,12 @@ class SpatialDataHttpService {
             + `?genes=${genes}&quality=${query.quality ?? 'high'}${box}`;
         return this.cachedTile(path, () => this.getBinary(path).then(decodeTranscriptTile));
     }
+    getTranscriptGeneBins(level, tx, ty, genes) {
+        const manifest = this.requireManifest();
+        const path = `spatial/${encodeURIComponent(manifest.id)}/gene-bins/${level}/${tx}/${ty}`
+            + `?genes=${genes.map(encodeURIComponent).join(',')}`;
+        return this.cachedTile(path, () => this.getBinary(path).then(decodeTranscriptTile));
+    }
     getTranscriptBins(level, tx, ty) {
         const manifest = this.requireManifest();
         if (!manifest.transcriptBins) {
@@ -1245,6 +1252,11 @@ class SpatialDataHttpService {
         }
         return { column, matched: body.matched };
     }
+    getMarkerGenes(column, perGroup = 5) {
+        const manifest = this.requireManifest();
+        // No per-request timeout: the first computation is a pass over the whole matrix.
+        return firstValueFrom(this.http.get(`${this.baseUrl}spatial/${encodeURIComponent(manifest.id)}/markers/${encodeURIComponent(column)}?n=${perGroup}`));
+    }
     getTranscriptCounts(genes) {
         const manifest = this.requireManifest();
         return this.getJson(`spatial/${encodeURIComponent(manifest.id)}/transcript-counts?genes=${genes.map(encodeURIComponent).join(',')}`);
@@ -11320,6 +11332,149 @@ function transcriptLevelFor(pxPerUnit, levels, targetTilePx = 512) {
     }
     return best;
 }
+/**
+ * The bin a selection of genes is grouped into at this zoom, in observation units, or null
+ * to draw every transcript. Bins follow the all-gene pyramid's ladder (`baseBin` × 2^m) so a
+ * gene selection and "all genes" group alike: the finest bin whose markers land at least
+ * `spacingPx` apart on screen. Once the finest bin is that wide, transcripts are drawn as
+ * themselves.
+ */
+function geneBinSize(pxPerUnit, baseBin, levels = 7, spacingPx = GROUP_MIN_SPACING_PX) {
+    if (!(pxPerUnit > 0) || !(baseBin > 0))
+        return null;
+    if (baseBin * pxPerUnit >= spacingPx)
+        return null;
+    for (let m = 1; m < levels; m++) {
+        const bin = baseBin * 2 ** m;
+        if (bin * pxPerUnit >= spacingPx)
+            return bin;
+    }
+    return baseBin * 2 ** (levels - 1);
+}
+/** The entries of `t` inside `rect` (observation units). */
+function clipTranscripts(t, rect) {
+    const keep = [];
+    for (let i = 0; i < t.count; i++) {
+        if (t.x[i] >= rect.x0 && t.x[i] <= rect.x1 && t.y[i] >= rect.y0 && t.y[i] <= rect.y1)
+            keep.push(i);
+    }
+    if (keep.length === t.count)
+        return t;
+    const pick = (a) => {
+        const out = new a.constructor(keep.length);
+        keep.forEach((src, i) => { out[i] = a[src]; });
+        return out;
+    };
+    return {
+        count: keep.length, aggregated: t.aggregated,
+        x: pick(t.x), y: pick(t.y), z: pick(t.z), weight: pick(t.weight), observation: pick(t.observation),
+        gene: pick(t.gene),
+    };
+}
+/**
+ * Group transcripts into `bin`-wide squares of a grid anchored at the origin (so a pan does
+ * not move them), one entry per (group, square): `groupOf(gene slot)` says which group a gene
+ * is in — its cluster in the gene tree, or itself. Each entry sits at its transcripts'
+ * centroid, weighted by how many each stands for; it takes the gene and the cell holding most
+ * of them, each summed over all its transcripts in the entry. `group[i]` is entry i's group.
+ */
+function groupTranscripts(t, bin, groupOf = (g) => g) {
+    const index = new Map();
+    const sx = [];
+    const sy = [];
+    const sz = [];
+    const w = [];
+    const grp = [];
+    // Per entry, how many transcripts of each gene (the dominant one gives the icon and colour)
+    // and in each cell (the dominant one is the entry's cell).
+    const geneW = [];
+    const obsW = [];
+    for (let i = 0; i < t.count; i++) {
+        const gk = groupOf(t.gene[i]);
+        const key = `${gk}|${Math.floor(t.x[i] / bin)}|${Math.floor(t.y[i] / bin)}`;
+        let k = index.get(key);
+        const wi = t.weight[i] || 1;
+        if (k === undefined) {
+            k = w.length;
+            index.set(key, k);
+            sx.push(0);
+            sy.push(0);
+            sz.push(0);
+            w.push(0);
+            grp.push(gk);
+            geneW.push(new Map());
+            obsW.push(new Map());
+        }
+        sx[k] += t.x[i] * wi;
+        sy[k] += t.y[i] * wi;
+        sz[k] += t.z[i] * wi;
+        w[k] += wi;
+        geneW[k].set(t.gene[i], (geneW[k].get(t.gene[i]) ?? 0) + wi);
+        obsW[k].set(t.observation[i], (obsW[k].get(t.observation[i]) ?? 0) + wi);
+    }
+    const n = w.length;
+    const tile = {
+        count: n, aggregated: true,
+        x: new Float32Array(n), y: new Float32Array(n), z: new Float32Array(n),
+        weight: new Uint32Array(n), observation: new Uint32Array(n), gene: new Uint16Array(n),
+    };
+    const group = new Int32Array(n);
+    for (let k = 0; k < n; k++) {
+        tile.x[k] = sx[k] / w[k];
+        tile.y[k] = sy[k] / w[k];
+        tile.z[k] = sz[k] / w[k];
+        tile.weight[k] = w[k];
+        tile.observation[k] = dominant(obsW[k]);
+        tile.gene[k] = dominant(geneW[k]);
+        group[k] = grp[k];
+    }
+    return { tile, group };
+}
+/** The key with the largest total; the first seen on a tie. */
+function dominant(totals) {
+    let best = 0;
+    let top = -1;
+    for (const [key, v] of totals)
+        if (v > top) {
+            top = v;
+            best = key;
+        }
+    return best;
+}
+/**
+ * The colour of each gene-tree cluster of a selection, for colouring transcripts by cluster: a
+ * cluster named like a group of the cells' grouping takes that group's colour (its cells and its
+ * transcripts agree); the others take palette colours in tree order. Clusters are the tree's
+ * groups holding a selected gene, then each ungrouped selected gene on its own. Every gene of a
+ * cluster gets the same colour — the tree's swatches and the markers use this one map.
+ */
+function clusterColorMap(genes, groups, cellColors, palette) {
+    const chosen = new Set(genes);
+    const names = [];
+    const grouped = new Set();
+    for (const g of groups) {
+        const mine = g.genes.filter((x) => chosen.has(x) && !grouped.has(x));
+        if (!mine.length)
+            continue;
+        mine.forEach((x) => grouped.add(x));
+        names.push(g.name);
+    }
+    for (const gene of genes)
+        if (!grouped.has(gene))
+            names.push(gene);
+    const out = new Map();
+    let k = 0;
+    for (const name of names) {
+        if (out.has(name))
+            continue;
+        out.set(name, cellColors.get(name) ?? palette[k++ % palette.length]);
+    }
+    return out;
+}
+/** The cluster a selected gene is in: its first gene-tree group holding it, else itself. */
+function clusterOfGene(gene, groups) {
+    return groups.find((g) => g.genes.includes(gene))?.name ?? gene;
+}
 /** Smallest and largest transcript marker, in canvas pixels. */
 const TRANSCRIPT_MIN_PX = 4;
 const TRANSCRIPT_MAX_PX = 32;
@@ -11820,7 +11975,7 @@ class SpatialControlsComponent {
             { label: 'Fill', value: 'fill' }, { label: 'Outline', value: 'outline' }, { label: 'Both', value: 'both' },
         ];
         this.transcriptColorOptions = [
-            { label: 'Cell type', value: 'cellType' }, { label: 'Gene', value: 'gene' },
+            { label: 'Cluster', value: 'cluster' }, { label: 'Cell type', value: 'cellType' }, { label: 'Gene', value: 'gene' },
         ];
         this.glyphOptions = GLYPH_OPTIONS;
         this.budgetOptions = [25_000, 50_000, 100_000, 200_000, 400_000]
@@ -11872,10 +12027,27 @@ class SpatialControlsComponent {
         this.geneMenu = [];
         this.collapsedGeneGroups = new Set();
         this.geneTreeOpen = true;
+        // ── per-gene icon and colour picker ──────────────────────────────────────
+        /** Swatches in the picker: the categorical palette genes are coloured from by default. */
+        this.colorPresets = DEFAULT_CATEGORICAL_PALETTE.slice(0, 10).map((c) => c.toLowerCase());
+        /** The gene the open picker edits. */
+        this.styleGene = null;
         this.trackByLabel = (_i, row) => row.label;
         this.trackByNode = (_i, node) => node.name ?? '';
         this.trackByLabelString = (_i, s) => s;
         this.geneGroupError = null;
+        // ── per-gene counts in view ─────────────────────────────────────────────
+        /** Transcripts of each selected gene in the current view, from the renderer. */
+        this.geneCounts = null;
+        // ── marker genes of clusters, as gene groups ────────────────────────────
+        this.markersOpen = false;
+        this.markerColumn = null;
+        this.markerPerGroup = 5;
+        this.markerPerGroupOptions = [3, 5, 10, 20].map((n) => ({ label: `${n} genes`, value: n }));
+        this.markerClusters = [];
+        this.markerClusterOptions = [];
+        this.markerLoading = false;
+        this.markerError = null;
         // density
         this.densityBins = [10, 20, 40, 80];
         /**
@@ -11888,6 +12060,9 @@ class SpatialControlsComponent {
         this.densitySliderMax = 1;
         this.densityStep = 0.005;
         this.selectedDensityColormapNode = null;
+        /** Colours of the cells' groups, by name — what a cluster of the same name is drawn in. */
+        this.cellGroupColors = new Map();
+        this.cellGroupColorsFor = null;
     }
     ngOnInit() {
         this.controls = this.viz.getSpatialControls?.() ?? null;
@@ -11928,10 +12103,14 @@ class SpatialControlsComponent {
             this.refreshDensityWindow();
             void this.refreshKey();
             void this.refreshGroups();
+            void this.refreshCellGroupColors();
         }));
         const estimate$ = this.controls.getTranscriptEstimate$?.();
         if (estimate$)
             this.subs.add(estimate$.subscribe((e) => this.zone.run(() => { this.estimate = e; })));
+        const counts$ = this.controls.getGeneCountsInView$?.();
+        if (counts$)
+            this.subs.add(counts$.subscribe((c) => this.zone.run(() => { this.geneCounts = c; })));
         const density$ = this.controls.getDensityStats$?.();
         if (density$) {
             this.subs.add(density$.subscribe((d) => this.zone.run(() => {
@@ -12567,6 +12746,38 @@ class SpatialControlsComponent {
     onGeneColor(gene, hex) {
         this.controls?.setViewState({ transcriptGeneColors: { ...this.view.transcriptGeneColors, [gene]: hex } });
     }
+    openGeneStyle(event, gene, panel) {
+        if (this.styleGene === gene) {
+            panel.toggle(event);
+            return;
+        }
+        this.styleGene = gene;
+        panel.hide();
+        // Re-open anchored on the row that was clicked, once the panel has closed.
+        setTimeout(() => panel.toggle(event));
+    }
+    /** The icon the open picker shows as chosen. */
+    get styleGlyph() {
+        const gene = this.styleGene;
+        return gene ? this.glyphOf(gene, Math.max(0, this.view.transcriptGenes.indexOf(gene))) : null;
+    }
+    glyphPoints(glyph) {
+        return GLYPH_OPTIONS.find((o) => o.value === glyph)?.points ?? '';
+    }
+    /** A typed hex colour, accepted as `#rrggbb` or `rrggbb`; anything else is ignored. */
+    onGeneHex(gene, text) {
+        const m = /^#?([0-9a-f]{6})$/i.exec(text.trim());
+        if (m)
+            this.onGeneColor(gene, `#${m[1].toLowerCase()}`);
+    }
+    /** Back to the gene's default icon and colour (by its position in the list). */
+    resetGeneStyle(gene) {
+        const colors = { ...this.view.transcriptGeneColors };
+        const glyphs = { ...this.view.transcriptGlyphs };
+        delete colors[gene];
+        delete glyphs[gene];
+        this.controls?.setViewState({ transcriptGeneColors: colors, transcriptGlyphs: glyphs });
+    }
     /** '±': every gene, or back to the chosen list. */
     onToggleAllGenes() {
         if (!this.canShowAllGenes)
@@ -12576,6 +12787,10 @@ class SpatialControlsComponent {
     /** '⋮' menu. */
     buildGeneMenu() {
         return [
+            {
+                label: 'Add marker genes of clusters…', icon: 'pi pi-sitemap',
+                disabled: !this.canAddMarkers, command: () => this.openMarkers(),
+            },
             {
                 label: 'New group from selected genes', icon: 'pi pi-folder-plus',
                 disabled: !this.view.transcriptGenes.length, command: () => this.onNewGeneGroup(),
@@ -12601,6 +12816,104 @@ class SpatialControlsComponent {
     get densityOpacityPercent() {
         return Math.round(this.view.densityOpacity * 100);
     }
+    geneCountOf(gene) {
+        return this.geneCounts ? (this.geneCounts[gene] ?? 0) : null;
+    }
+    get canAddMarkers() {
+        return !!this.controls?.markerGenes && this.markerColumnOptions.length > 0;
+    }
+    /** Every categorical column but the segmentation method, which says nothing about genes. */
+    get markerColumnOptions() {
+        return (this.dataset?.columns ?? [])
+            .filter((c) => c.kind === 'categorical' && c.name !== 'segmentation_method')
+            .map((c) => ({ label: c.description && c.section ? c.description : this.columnLabel(c), value: c.name }));
+    }
+    openMarkers() {
+        const options = this.markerColumnOptions;
+        const active = this.activeCellTypeColumn;
+        if (!this.markerColumn || !options.some((o) => o.value === this.markerColumn)) {
+            this.markerColumn = active && options.some((o) => o.value === active) ? active : options[0]?.value ?? null;
+        }
+        this.markerError = null;
+        this.refreshMarkerClusters();
+        this.markersOpen = true;
+        this.open = { ...this.open, transcripts: true };
+    }
+    onMarkerColumn(column) {
+        this.markerColumn = column;
+        this.refreshMarkerClusters();
+    }
+    /** The clusters of the chosen column, all picked to start with. */
+    refreshMarkerClusters() {
+        const col = this.dataset?.columns.find((c) => c.name === this.markerColumn);
+        const categories = col && col.kind === 'categorical' ? col.categories : [];
+        this.markerClusterOptions = categories.map((c) => ({ label: c, value: c }));
+        this.markerClusters = [...categories];
+    }
+    /**
+     * Add each picked cluster's top marker genes as a gene group named after it, and select
+     * them. A gene that marks several clusters goes to the one it is most specific to, so the
+     * tree lists it once.
+     */
+    async addMarkerGenes() {
+        const column = this.markerColumn;
+        const markerGenes = this.controls?.markerGenes;
+        if (!column || !markerGenes || !this.markerClusters.length)
+            return;
+        // The form stays editable while the scan runs: apply what was picked when it was asked.
+        const picked = new Set(this.markerClusters);
+        this.markerLoading = true;
+        this.markerError = null;
+        try {
+            const result = await markerGenes(column, this.markerPerGroup);
+            this.zone.run(() => {
+                const best = new Map();
+                for (const g of result.groups) {
+                    if (!picked.has(g.name))
+                        continue;
+                    for (const gene of g.genes) {
+                        const prev = best.get(gene.name);
+                        if (!prev || gene.score > prev.score)
+                            best.set(gene.name, { group: g.name, score: gene.score });
+                    }
+                }
+                const groups = result.groups
+                    .filter((g) => picked.has(g.name))
+                    .map((g) => ({
+                    name: g.name,
+                    genes: g.genes.map((x) => x.name).filter((n) => best.get(n)?.group === g.name),
+                }))
+                    .filter((g) => g.genes.length);
+                if (!groups.length) {
+                    this.markerError = 'No marker genes passed the filter for the chosen clusters.';
+                    return;
+                }
+                const names = new Set(groups.map((g) => g.name));
+                const genes = [...this.view.transcriptGenes];
+                for (const g of groups)
+                    for (const n of g.genes)
+                        if (!genes.includes(n))
+                            genes.push(n);
+                this.controls?.setViewState({
+                    transcriptGeneGroups: [...this.view.transcriptGeneGroups.filter((g) => !names.has(g.name)), ...groups],
+                    transcriptGenes: genes,
+                    // Marker groups are clusters: colour the transcripts by them, as their cells are.
+                    transcriptColorBy: 'cluster',
+                    ...(this.view.transcriptMode === 'off' ? { transcriptMode: 'circles' } : {}),
+                });
+                this.markersOpen = false;
+            });
+        }
+        catch (err) {
+            this.zone.run(() => {
+                const e = err;
+                this.markerError = e?.error?.error ?? e?.message ?? 'Could not compute marker genes.';
+            });
+        }
+        finally {
+            this.zone.run(() => { this.markerLoading = false; });
+        }
+    }
     onNewGeneGroup() {
         const name = (globalThis.prompt?.('Name for this gene group', 'Gene group') ?? '').trim();
         if (!name)
@@ -12748,6 +13061,35 @@ class SpatialControlsComponent {
         return (gene && this.view.transcriptGeneColors[gene])
             || DEFAULT_CATEGORICAL_PALETTE[slot % DEFAULT_CATEGORICAL_PALETTE.length];
     }
+    async refreshCellGroupColors() {
+        const column = this.activeCellTypeColumn;
+        if (column === this.cellGroupColorsFor)
+            return;
+        this.cellGroupColorsFor = column;
+        const map = new Map();
+        const meta = column ? this.dataset?.columns.find((c) => c.name === column) : null;
+        if (meta && meta.kind === 'categorical' && this.controls) {
+            try {
+                const colors = await this.controls.categoryColors(column);
+                meta.categories.forEach((c, k) => { if (colors[k])
+                    map.set(c, colors[k]); });
+            }
+            catch {
+                // No colours: palette colours, as the markers fall back to.
+            }
+        }
+        // The cells' grouping changed while the colours loaded: the newer request applies its own.
+        if (this.cellGroupColorsFor !== column)
+            return;
+        this.zone.run(() => { this.cellGroupColors = map; });
+    }
+    /** In Cluster colouring, a gene's swatch is its cluster's colour, as its markers are. */
+    geneSwatchOf(gene) {
+        if (this.view.transcriptColorBy !== 'cluster')
+            return this.geneColorOf(gene);
+        const colors = clusterColorMap(this.view.transcriptGenes, this.view.transcriptGeneGroups, this.cellGroupColors, DEFAULT_CATEGORICAL_PALETTE);
+        return colors.get(clusterOfGene(gene, this.view.transcriptGeneGroups)) ?? this.geneColorOf(gene);
+    }
     geneColorOf(gene) {
         return this.geneColor(Math.max(0, this.view.transcriptGenes.indexOf(gene)));
     }
@@ -12872,11 +13214,11 @@ class SpatialControlsComponent {
         return `linear-gradient(to right, ${stops.join(', ')})`;
     }
     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, selector: "spatial-controls", inputs: { visible: "visible", is3d: "is3d" }, outputs: { visibleChange: "visibleChange" }, viewQueries: [{ propertyName: "charts", first: true, predicate: SpatialChartsComponent, descendants: true }, { propertyName: "geneGroupFileRef", first: true, predicate: ["geneGroupFile"], descendants: true }], ngImport: i0, template: "<p-dialog header=\"Spatial omics\"\n          [visible]=\"visible\" (visibleChange)=\"onVisibleChange($event)\"\n          [modal]=\"false\" [resizable]=\"true\" [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\">\n    No dataset is loaded.\n  </div>\n\n  <div class=\"sc-body\" *ngIf=\"controls && dataset as ds\">\n\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 [binary]=\"true\" [ngModel]=\"view.showImage\" (click)=\"$event.stopPropagation()\"\n                    (onChange)=\"onShowImage($event.checked)\"></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\">\n          Channels, colours and contrast are in the Channels &amp; Histogram dialog.\n        </small>\n      </div>\n    </div>\n\n    <!-- Cells -->\n    <div class=\"sc-panel\" *ngIf=\"hasCells && !is3d\" [class.open]=\"open.cells\">\n      <div class=\"sc-panel-head\" (click)=\"toggleSection('cells')\">\n        <p-checkbox [binary]=\"true\" [ngModel]=\"cellsOn\" (click)=\"$event.stopPropagation()\"\n                    (onChange)=\"onShowCells($event.checked)\"></p-checkbox>\n        <span class=\"sc-panel-title\">Cells</span>\n        <i class=\"pi\" [class.pi-chevron-down]=\"open.cells\" [class.pi-chevron-right]=\"!open.cells\"></i>\n      </div>\n      <div class=\"sc-panel-body\" *ngIf=\"open.cells\">\n        <ng-container *ngIf=\"cellSetOptions.length > 1\">\n          <div class=\"sc-subhead\">Boundaries</div>\n          <p-selectButton [options]=\"cellSetOptions\" optionLabel=\"label\" optionValue=\"value\"\n                          [ngModel]=\"activeCellSet\" (ngModelChange)=\"onCellSet($event)\"\n                          [allowEmpty]=\"false\" styleClass=\"sc-buttons\"></p-selectButton>\n        </ng-container>\n\n        <div class=\"sc-subhead\">Coloring</div>\n        <div class=\"sc-row\">\n          <span class=\"sc-lbl\">Cell Color</span>\n          <p-dropdown [options]=\"cellColorOptions\" optionLabel=\"label\" optionValue=\"value\"\n                      [ngModel]=\"view.cellColorMode\" (ngModelChange)=\"onCellColorMode($event)\"\n                      appendTo=\"body\"></p-dropdown>\n        </div>\n        <small class=\"sc-hint\" *ngIf=\"view.cellColorMode === 'group'\">\n          Adjust cell color in the groups section below.\n        </small>\n        <div class=\"sc-row\" *ngIf=\"view.cellColorMode === 'gene' && ds.features\">\n          <span class=\"sc-lbl\">Gene</span>\n          <p-dropdown [options]=\"geneOptions\" optionLabel=\"label\" optionValue=\"value\"\n                      [ngModel]=\"view.cellColorGene\" (ngModelChange)=\"onCellColorGene($event)\"\n                      [filter]=\"true\" filterBy=\"label\" [resetFilterOnHide]=\"true\"\n                      (onFilter)=\"onGeneFilter($event.filter)\" (onShow)=\"ensureGeneList()\"\n                      [virtualScroll]=\"geneOptions.length > geneVirtualScrollFrom\"\n                      [virtualScrollItemSize]=\"30\" appendTo=\"body\"\n                      placeholder=\"Search genes\u2026\"></p-dropdown>\n        </div>\n        <div class=\"sc-row\" *ngIf=\"view.cellColorMode === 'single'\">\n          <span class=\"sc-lbl\">Color</span>\n          <input type=\"color\" class=\"sc-color-input\" [value]=\"view.cellSingleColor\"\n                 (change)=\"onCellSingleColor($any($event.target).value)\" />\n        </div>\n        <div *ngIf=\"view.cellColorMode === 'gene' || view.cellColorMode === 'transcriptDensity'\">\n          <div class=\"sc-colorbar\" [style.background]=\"colorBarCss || densityColorBarCss\"></div>\n        </div>\n\n        <ng-container *ngIf=\"groupOptions.length\">\n          <div class=\"sc-subhead\">Groups</div>\n          <div class=\"sc-row sc-row-picker\">\n            <p-dropdown [options]=\"groupOptions\" [group]=\"true\" optionLabel=\"label\" optionValue=\"value\"\n                        optionGroupLabel=\"label\" optionGroupChildren=\"items\"\n                        [ngModel]=\"activeGroupEntry\" (ngModelChange)=\"onGroupEntry($event)\"\n                        appendTo=\"body\" styleClass=\"sc-full\">\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 *ngIf=\"groupVariantOptions.length\" [options]=\"groupVariantOptions\"\n                        optionLabel=\"label\" optionValue=\"value\" styleClass=\"sc-variant\"\n                        [ngModel]=\"activeCellTypeColumn\" (ngModelChange)=\"onGroupVariant($event)\"\n                        appendTo=\"body\"></p-dropdown>\n            <button *ngIf=\"canImportGroups\" type=\"button\" class=\"sc-icon-btn\" [disabled]=\"groupImporting\"\n                    (click)=\"groupFile.click()\" title=\"Import cell groups (CSV of cell_id, group)\">\n              <i class=\"pi\" [class.pi-plus-circle]=\"!groupImporting\" [class.pi-spin]=\"groupImporting\"\n                 [class.pi-spinner]=\"groupImporting\"></i>\n            </button>\n            <input #groupFile type=\"file\" accept=\".csv,.tsv,.txt\" hidden\n                   (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 [binary]=\"true\" [ngModel]=\"allGroupsShown\"\n                          (onChange)=\"onAllGroupsShown($event.checked)\"></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 [binary]=\"true\" [ngModel]=\"isGroupShown(row.label)\"\n                            (onChange)=\"onGroupShown(row.label, $event.checked)\"></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\n        <div class=\"sc-subhead\">Visibility</div>\n        <span class=\"sc-lbl\">View cells as</span>\n        <p-selectButton [options]=\"cellDrawOptions\" optionLabel=\"label\" optionValue=\"value\"\n                        [ngModel]=\"view.cellDraw\" (ngModelChange)=\"onCellDraw($event)\"\n                        [allowEmpty]=\"false\" styleClass=\"sc-buttons\"></p-selectButton>\n        <ng-container *ngIf=\"view.cellDraw !== 'outline'\">\n          <span class=\"sc-lbl\">Cell fill opacity</span>\n          <div class=\"sc-row sc-row-number\">\n            <p-slider [ngModel]=\"view.cellOpacity\" [min]=\"0.05\" [max]=\"1\" [step]=\"0.05\"\n                      (onChange)=\"onCellOpacity($event.value)\"></p-slider>\n            <p-inputNumber [ngModel]=\"cellOpacityPercent\" (ngModelChange)=\"onCellOpacityPercent($event)\"\n                           [min]=\"5\" [max]=\"100\" [showButtons]=\"false\" inputStyleClass=\"sc-num\"></p-inputNumber>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Transcripts -->\n    <div class=\"sc-panel\" *ngIf=\"hasTranscripts && !is3d\" [class.open]=\"open.transcripts\">\n      <div class=\"sc-panel-head\" (click)=\"toggleSection('transcripts')\">\n        <p-checkbox [binary]=\"true\" [ngModel]=\"view.transcriptMode !== 'off'\" (click)=\"$event.stopPropagation()\"\n                    (onChange)=\"onTranscriptsOn($event.checked)\"></p-checkbox>\n        <span class=\"sc-panel-title\">Transcripts</span>\n        <i class=\"pi\" [class.pi-chevron-down]=\"open.transcripts\" [class.pi-chevron-right]=\"!open.transcripts\"></i>\n      </div>\n      <div class=\"sc-panel-body\" *ngIf=\"open.transcripts\">\n        <div class=\"sc-row sc-row-picker\">\n          <p-multiSelect inputId=\"sc-tx-genes\" [options]=\"geneOptions\"\n                         optionLabel=\"label\" optionValue=\"value\"\n                         [ngModel]=\"view.transcriptGenes\" (onChange)=\"onTranscriptGenes($event.value)\"\n                         [filter]=\"true\" filterBy=\"label\" [resetFilterOnHide]=\"true\"\n                         (onFilter)=\"onGeneFilter($event.filter)\" (onPanelShow)=\"ensureGeneList()\"\n                         [virtualScroll]=\"geneOptions.length > geneVirtualScrollFrom\"\n                         [virtualScrollItemSize]=\"30\" [showToggleAll]=\"false\"\n                         [emptyFilterMessage]=\"genesAreRemote ? 'No match \u2014 keep typing' : 'No match'\"\n                         [emptyMessage]=\"genesAreRemote ? 'Type to search genes' : 'No genes'\"\n                         appendTo=\"body\" placeholder=\"Search for genes to visualize\u2026\"\n                         [selectedItemsLabel]=\"'{0} genes selected'\" [maxSelectedLabels]=\"0\"\n                         styleClass=\"sc-full\"></p-multiSelect>\n          <button type=\"button\" class=\"sc-icon-btn\" *ngIf=\"canShowAllGenes\" (click)=\"onToggleAllGenes()\"\n                  [class.active]=\"view.transcriptAllGenes\"\n                  [title]=\"view.transcriptAllGenes ? 'Back to the selected genes' : 'Select all genes'\">\u00B1</button>\n          <button type=\"button\" class=\"sc-icon-btn\" (click)=\"geneMenuRef.toggle($event)\" title=\"More\">\n            <i class=\"pi pi-ellipsis-v\"></i>\n          </button>\n          <p-menu #geneMenuRef [model]=\"geneMenu\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n          <input #geneGroupFile type=\"file\" accept=\".csv,.tsv,.txt\" hidden\n                 (change)=\"onImportGeneGroups(geneGroupFile)\" />\n        </div>\n        <small class=\"sc-hint sc-error\" *ngIf=\"geneGroupError\">{{ geneGroupError }}</small>\n        <small class=\"sc-hint\" *ngIf=\"allGenesPreparing\">{{ allGenesPreparing }}</small>\n\n        <div class=\"sc-subhead\">Selected genes</div>\n        <div class=\"sc-gene-tree\">\n          <div class=\"sc-gene-row sc-gene-root\">\n            <button type=\"button\" class=\"sc-eye\"\n                    (click)=\"view.transcriptAllGenes ? onToggleAllGenes() : onGenesShown(view.transcriptGenes, !areGenesShown(view.transcriptGenes))\">\n              <i class=\"pi\" [class.pi-eye]=\"view.transcriptAllGenes || areGenesShown(view.transcriptGenes)\"\n                 [class.pi-eye-slash]=\"!view.transcriptAllGenes && !areGenesShown(view.transcriptGenes)\"></i>\n            </button>\n            <span class=\"sc-group-label\">Genes</span>\n            <span class=\"sc-count\">({{ (view.transcriptAllGenes ? geneTotal : view.transcriptGenes.length) | number }}/{{ geneTotal | number }})</span>\n            <button type=\"button\" class=\"sc-icon-btn\" (click)=\"geneTreeOpen = !geneTreeOpen\"\n                    *ngIf=\"!view.transcriptAllGenes && view.transcriptGenes.length\">\n              <i class=\"pi\" [class.pi-chevron-down]=\"geneTreeOpen\" [class.pi-chevron-right]=\"!geneTreeOpen\"></i>\n            </button>\n          </div>\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, !areGenesShown(node.genes))\">\n                  <i class=\"pi\" [class.pi-eye]=\"areGenesShown(node.genes)\" [class.pi-eye-slash]=\"!areGenesShown(node.genes)\"></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 class=\"pi\" [class.pi-chevron-down]=\"!collapsedGeneGroups.has(node.name)\"\n                     [class.pi-chevron-right]=\"collapsedGeneGroups.has(node.name)\"></i>\n                </button>\n              </div>\n              <ng-container *ngIf=\"!node.name || !collapsedGeneGroups.has(node.name)\">\n                <div class=\"sc-gene-row sc-gene-leaf\" [class.nested]=\"!!node.name\"\n                     *ngFor=\"let gene of node.genes; trackBy: trackByLabelString\">\n                  <button type=\"button\" class=\"sc-eye\" (click)=\"onGenesShown([gene], !isGeneShown(gene))\">\n                    <i class=\"pi\" [class.pi-eye]=\"isGeneShown(gene)\" [class.pi-eye-slash]=\"!isGeneShown(gene)\"></i>\n                  </button>\n                  <label class=\"sc-dot sc-dot-pick\" [style.background]=\"geneColorOf(gene)\" title=\"Colour\">\n                    <input type=\"color\" [value]=\"geneColorOf(gene)\" (change)=\"onGeneColor(gene, $any($event.target).value)\" />\n                  </label>\n                  <span class=\"sc-group-label\">{{ gene }}</span>\n                  <p-dropdown *ngIf=\"view.transcriptMode === 'glyphs'\"\n                              [options]=\"glyphOptions\" optionLabel=\"label\" optionValue=\"value\"\n                              [ngModel]=\"glyphOf(gene, view.transcriptGenes.indexOf(gene))\"\n                              (ngModelChange)=\"onGlyph(gene, $event)\"\n                              appendTo=\"body\" styleClass=\"sc-glyph-pick\">\n                      <ng-template let-opt pTemplate=\"item\">\n                        <span class=\"sc-glyph-option\">\n                          <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\"><polygon [attr.points]=\"opt.points\"></polygon></svg>\n                          {{ opt.label }}\n                        </span>\n                      </ng-template>\n                      <ng-template let-opt pTemplate=\"selectedItem\">\n                        <span class=\"sc-glyph-option\">\n                          <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\"><polygon [attr.points]=\"opt?.points\"></polygon></svg>\n                        </span>\n                      </ng-template>\n                  </p-dropdown>\n                </div>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n          <div class=\"sc-gene-footer\">\n            {{ (view.transcriptAllGenes ? geneTotal : view.transcriptGenes.length) | number }}/{{ geneTotal | number }} genes selected\n          </div>\n        </div>\n\n        <div class=\"sc-subhead\">Transcript controls</div>\n        <span class=\"sc-lbl\">View transcripts as</span>\n        <p-selectButton [options]=\"transcriptModeOptions\" optionLabel=\"label\" optionValue=\"value\"\n                        [ngModel]=\"view.transcriptMode === 'off' ? null : view.transcriptMode\"\n                        (ngModelChange)=\"onTranscriptMode($event)\"\n                        [allowEmpty]=\"false\" styleClass=\"sc-buttons\"></p-selectButton>\n\n        <ng-container *ngIf=\"estimate\">\n          <div class=\"sc-row\">\n            <span class=\"sc-lbl\" pTooltip=\"Transcripts of the visible genes estimated to be in view, against the most markers drawn at once\"\n                  tooltipPosition=\"top\">Estimated Transcript Points</span>\n            <button type=\"button\" class=\"sc-small-btn\" (click)=\"editingMax = !editingMax\">Edit Max</button>\n          </div>\n          <div class=\"sc-meter\"><div class=\"sc-meter-fill\" [class.over]=\"estimateOverMax\" [style.width.%]=\"estimatePercent\"></div></div>\n          <div class=\"sc-meter-ends\">\n            <span>{{ estimate.points | number }} points</span>\n            <span>{{ estimate.max | number }} max{{ estimateOverMax ? ' reached' : '' }}</span>\n          </div>\n          <div class=\"sc-row\" *ngIf=\"editingMax\">\n            <span class=\"sc-lbl\">Max markers</span>\n            <p-dropdown [options]=\"budgetOptions\" optionLabel=\"label\" optionValue=\"value\"\n                        [ngModel]=\"view.transcriptBudget\" (ngModelChange)=\"onTranscriptBudget($event)\"\n                        appendTo=\"body\"></p-dropdown>\n          </div>\n          <small class=\"sc-hint\" *ngIf=\"estimateOverMax && view.transcriptMode !== 'density'\">\n            Max points reached: transcripts are grouped by area, circles sized by how many they hold.\n            Zoom in or select fewer genes to see individual points.\n          </small>\n        </ng-container>\n\n        <ng-container *ngIf=\"view.transcriptMode === 'circles' || view.transcriptMode === 'glyphs'\">\n          <div class=\"sc-row\">\n            <span class=\"sc-lbl\">Colour by</span>\n            <p-selectButton [options]=\"transcriptColorOptions\" optionLabel=\"label\" optionValue=\"value\"\n                            [ngModel]=\"view.transcriptColorBy\" (ngModelChange)=\"onTranscriptColorBy($event)\"\n                            [allowEmpty]=\"false\" styleClass=\"sc-buttons\"></p-selectButton>\n          </div>\n          <small class=\"sc-hint\" *ngIf=\"view.transcriptAllGenes && view.transcriptColorBy === 'gene' && estimateOverMax\">\n            Grouped markers mix genes, so they are coloured by cell type until you zoom in to individual transcripts.\n          </small>\n          <div class=\"sc-row\" *ngIf=\"view.transcriptAllGenes && view.transcriptMode === 'glyphs'\">\n            <span class=\"sc-lbl\">Icon</span>\n            <p-dropdown [options]=\"glyphOptions\" optionLabel=\"label\" optionValue=\"value\"\n                        [ngModel]=\"glyphOf('*', 0)\" (ngModelChange)=\"onGlyph('*', $event)\"\n                        appendTo=\"body\" styleClass=\"sc-glyph-pick\">\n              <ng-template let-opt pTemplate=\"item\">\n                        <span class=\"sc-glyph-option\">\n                          <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\"><polygon [attr.points]=\"opt.points\"></polygon></svg>\n                          {{ opt.label }}\n                        </span>\n                      </ng-template>\n                      <ng-template let-opt pTemplate=\"selectedItem\">\n                        <span class=\"sc-glyph-option\">\n                          <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\"><polygon [attr.points]=\"opt?.points\"></polygon></svg>\n                        </span>\n                      </ng-template>\n            </p-dropdown>\n          </div>\n          <div class=\"sc-row\">\n            <span class=\"sc-lbl\">Size</span>\n            <p-slider [ngModel]=\"view.transcriptScale\" [min]=\"0.5\" [max]=\"3\" [step]=\"0.25\"\n                      (onChange)=\"onTranscriptScale($event.value)\"></p-slider>\n            <span class=\"sc-val\">{{ view.transcriptScale }}\u00D7</span>\n          </div>\n          <div class=\"sc-row\">\n            <span class=\"sc-lbl\">Opacity</span>\n            <p-slider [ngModel]=\"view.transcriptOpacity\" [min]=\"0.1\" [max]=\"1\" [step]=\"0.05\"\n                      (onChange)=\"onTranscriptOpacity($event.value)\"></p-slider>\n            <span class=\"sc-val\">{{ view.transcriptOpacity }}</span>\n          </div>\n          <div class=\"sc-row\" *ngIf=\"!showingAllGenes\">\n            <p-checkbox [binary]=\"true\" [ngModel]=\"view.transcriptQuality === 'all'\" inputId=\"sc-tx-lowq\"\n                        (onChange)=\"onTranscriptQuality($event.checked)\"></p-checkbox>\n            <label class=\"sc-lbl\" for=\"sc-tx-lowq\">Include low-quality calls</label>\n          </div>\n        </ng-container>\n\n        <ng-container *ngIf=\"view.transcriptMode === 'density'\">\n          <span class=\"sc-lbl\">Density map opacity</span>\n          <div class=\"sc-row sc-row-number\">\n            <p-slider [ngModel]=\"view.densityOpacity\" [min]=\"0.05\" [max]=\"1\" [step]=\"0.05\"\n                      (onChange)=\"onDensityOpacity($event.value)\"></p-slider>\n            <p-inputNumber [ngModel]=\"densityOpacityPercent\" (ngModelChange)=\"onDensityOpacityPercent($event)\"\n                           [min]=\"5\" [max]=\"100\" inputStyleClass=\"sc-num\"></p-inputNumber>\n          </div>\n          <span class=\"sc-lbl\" pTooltip=\"Edge of each density bin\" tooltipPosition=\"top\">Density map bin size</span>\n          <p-slider [ngModel]=\"densityBinIndex\" [min]=\"0\" [max]=\"3\" [step]=\"1\"\n                    (onChange)=\"onDensityBinIndex($event.value)\" styleClass=\"sc-bin-slider\"></p-slider>\n          <div class=\"sc-ticks\">\n            <span *ngFor=\"let b of densityBins\">{{ b }}\u00D7{{ b }}\u00B5m</span>\n          </div>\n          <span class=\"sc-lbl\" pTooltip=\"Transcripts per \u00B5m\u00B2 at which the colour scale starts and saturates\"\n                tooltipPosition=\"top\">Density map scale threshold</span>\n          <div class=\"sc-row sc-row-range\">\n            <p-inputNumber [ngModel]=\"densityWindow[0]\" (ngModelChange)=\"onDensityRangeEnd(0, $event)\"\n                           mode=\"decimal\" [minFractionDigits]=\"3\" [maxFractionDigits]=\"3\"\n                           inputStyleClass=\"sc-num\"></p-inputNumber>\n            <p-slider [ngModel]=\"densityWindow\" [range]=\"true\" [min]=\"0\" [max]=\"densitySliderMax\"\n                      [step]=\"densityStep\" (onChange)=\"onDensityRange($event.values)\"></p-slider>\n            <p-inputNumber [ngModel]=\"densityWindow[1]\" (ngModelChange)=\"onDensityRangeEnd(1, $event)\"\n                           mode=\"decimal\" [minFractionDigits]=\"3\" [maxFractionDigits]=\"3\"\n                           inputStyleClass=\"sc-num\"></p-inputNumber>\n          </div>\n          <div class=\"sc-row\">\n            <small class=\"sc-hint\">{{ view.densityRange ? 'Set by hand.' : 'Derived from the data.' }}</small>\n            <button type=\"button\" class=\"sc-small-btn\" *ngIf=\"view.densityRange\" (click)=\"onDensityAuto()\">Auto</button>\n          </div>\n          <span class=\"sc-lbl\">Density map bin coloring</span>\n          <div class=\"sc-row sc-row-picker\">\n            <div class=\"sc-colorbar sc-full\" [style.background]=\"densityColorBarCss\"></div>\n            <p-treeSelect [options]=\"colormapOptions\" [ngModel]=\"selectedDensityColormapNode\"\n                          selectionMode=\"single\" [showClear]=\"true\" placeholder=\"Inferno\"\n                          [scrollHeight]=\"'260px'\" appendTo=\"body\" styleClass=\"sc-palette\"\n                          (onNodeSelect)=\"onDensityColormap($event.node)\" (onClear)=\"onDensityColormap(null)\">\n              <ng-template let-node pTemplate=\"default\">\n                <span class=\"sc-cmap-option\">\n                  <img *ngIf=\"!node.children && node.data?.src\" [src]=\"node.data.src\" class=\"sc-cmap-swatch\" alt=\"\" />\n                  <span>{{ node.label }}</span>\n                </span>\n              </ng-template>\n            </p-treeSelect>\n          </div>\n          <div class=\"sc-colorbar-ends\"><span>{{ densityWindow[0] | number: '1.0-3' }}</span><span>{{ densityWindow[1] | number: '1.0-3' }}</span></div>\n        </ng-container>\n      </div>\n    </div>\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 [binary]=\"true\" [ngModel]=\"view.showAnnotations !== false\" (click)=\"$event.stopPropagation()\"\n                    (onChange)=\"onShowAnnotations($event.checked)\" pTooltip=\"Show the drawn regions\"\n                    tooltipPosition=\"top\"></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 label=\"Select from ROIs\" icon=\"pi pi-object-group\" size=\"small\"\n                    [outlined]=\"true\" (onClick)=\"selectFromRegions()\"\n                    pTooltip=\"Select every observation inside the drawn regions\"\n                    tooltipPosition=\"top\"></p-button>\n          <p-button *ngIf=\"hasSelection\" label=\"Clear\" size=\"small\" [text]=\"true\"\n                    (onClick)=\"clearSelection()\"></p-button>\n        </div>\n        <small class=\"sc-hint\" *ngIf=\"hasSelection\">\n          {{ selection.count | number }} of {{ ds.observations.count | number }} selected \u2014\n          the rest are muted.\n        </small>\n        <small class=\"sc-hint\" *ngIf=\"selectionMissed\">\n          No observations fell inside the drawn regions.\n        </small>\n        <small class=\"sc-hint\" *ngIf=\"is3d\">\n          In 3D a region cuts through the cloud's full depth. Orbit and draw again\n          to cut from another angle.\n        </small>\n      </div>\n    </div>\n\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.observations\">\n      <div class=\"sc-panel-head\" (click)=\"toggleSection('observations')\">\n        <p-checkbox [binary]=\"true\" [ngModel]=\"view.showPoints\" (click)=\"$event.stopPropagation()\"\n                    (onChange)=\"onShowPoints($event.checked)\"></p-checkbox>\n        <span class=\"sc-panel-title\">Observations</span>\n        <i class=\"pi\" [class.pi-chevron-down]=\"open.observations\" [class.pi-chevron-right]=\"!open.observations\"></i>\n      </div>\n      <div class=\"sc-panel-body\" *ngIf=\"open.observations\">\n        <small class=\"sc-hint\" *ngIf=\"hasCells && !is3d\">\n          One circle per cell. With cell outlines on, circles are only drawn where cells\n          are too small on 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 inputId=\"sc-column\" [options]=\"columnOptions\"\n                  optionLabel=\"label\" optionValue=\"value\"\n                  [ngModel]=\"selectedColumn\" (ngModelChange)=\"onColumn($event)\"\n                  placeholder=\"None (flat colour)\" appendTo=\"body\"\n                  styleClass=\"sc-full\"></p-dropdown>\n    </div>\n\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 inputId=\"sc-gene\" [options]=\"geneOptions\"\n                  optionLabel=\"label\" optionValue=\"value\"\n                  [ngModel]=\"selectedGene\" (ngModelChange)=\"onGene($event)\"\n                  [filter]=\"true\" filterBy=\"label\" [resetFilterOnHide]=\"true\"\n                  (onFilter)=\"onGeneFilter($event.filter)\" (onShow)=\"ensureGeneList()\"\n                  [showClear]=\"true\"\n                  [virtualScroll]=\"geneOptions.length > geneVirtualScrollFrom\"\n                  [virtualScrollItemSize]=\"30\"\n                  [emptyFilterMessage]=\"genesAreRemote ? 'No match \u2014 keep typing' : 'No match'\"\n                  [emptyMessage]=\"genesAreRemote ? 'Type to search genes' : 'No genes'\"\n                  appendTo=\"body\"\n                  placeholder=\"Search {{ ds.features.count | number }} genes\u2026\"\n                  styleClass=\"sc-full\"></p-dropdown>\n      <small class=\"sc-hint\" *ngIf=\"geneSearchFailed\">Gene lookup failed.</small>\n    </div>\n\n    <!-- Key: categorical legend or a continuous colour bar, built from the same\n         functions the renderer uses so it cannot disagree with the canvas. -->\n    <div class=\"sc-section sc-key\" *ngIf=\"view.colorBy\">\n      <span class=\"sc-lbl\">{{ colorByLabel }}</span>\n      <!-- Derived columns say so, so they are not mistaken for measured data. -->\n      <small class=\"sc-hint\" *ngIf=\"activeDescription\">{{ activeDescription }}</small>\n\n      <!-- Legend rows are buttons: clicking one selects that category, clicking\n           it again clears \u2014 so a click is always reversible. -->\n      <ul class=\"sc-legend\" *ngIf=\"isCategorical\">\n        <li *ngFor=\"let entry of legend; index as i\">\n          <button type=\"button\" class=\"sc-legend-btn\"\n                  [class.selected]=\"selectedCategory === i\"\n                  (click)=\"selectCategory(i)\"\n                  [title]=\"'Select ' + entry.label\">\n            <span class=\"sc-swatch\" [style.background]=\"entry.color\"></span>\n            <span class=\"sc-legend-label\">{{ entry.label }}</span>\n          </button>\n        </li>\n      </ul>\n\n      <div *ngIf=\"isContinuous\">\n        <div class=\"sc-colorbar\" [style.background]=\"colorBarCss\"></div>\n        <div class=\"sc-colorbar-ends\">\n          <span>low</span>\n          <span class=\"sc-hint\">window from percentiles</span>\n          <span>high</span>\n        </div>\n        <!-- The gradient this bar and the map are drawn with. Sits under the bar\n             it controls, with the same swatch previews the image's colormap picker\n             uses: which gradient reads best is a visual judgement, so a list of\n             names would be the wrong control. Cleared = follow the image's. -->\n        <div class=\"sc-row\">\n          <span class=\"sc-lbl\">Colormap</span>\n          <p-treeSelect [options]=\"colormapOptions\" [ngModel]=\"selectedColormapNode\"\n                        selectionMode=\"single\" [showClear]=\"true\"\n                        placeholder=\"Match the image\" [scrollHeight]=\"'260px'\"\n                        appendTo=\"body\"\n                        pTooltip=\"Colour scale for gene and numeric values \u2014 the markers, the gene map and this bar. Clear it to follow the image's colormap\"\n                        tooltipPosition=\"top\"\n                        (onNodeSelect)=\"onContinuousColormap($event.node)\"\n                        (onClear)=\"onContinuousColormap(null)\">\n            <ng-template let-node pTemplate=\"default\">\n              <span class=\"sc-cmap-option\">\n                <img *ngIf=\"!node.children && node.data?.src\" [src]=\"node.data.src\"\n                     class=\"sc-cmap-swatch\" alt=\"\" />\n                <span>{{ node.label }}</span>\n              </span>\n            </ng-template>\n          </p-treeSelect>\n          <span class=\"sc-val\"></span>\n        </div>\n      </div>\n    </div>\n\n    <!-- Display -->\n    <div class=\"sc-section\">\n      <div class=\"sc-row\">\n        <span class=\"sc-lbl\">Point size</span>\n        <p-slider [ngModel]=\"view.pointScale\" [min]=\"0.25\" [max]=\"5\" [step]=\"0.25\"\n                  (onChange)=\"onPointScale($event.value)\"></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 [ngModel]=\"view.opacity\" [min]=\"0.1\" [max]=\"1\" [step]=\"0.05\"\n                  (onChange)=\"onOpacity($event.value)\"></p-slider>\n        <span class=\"sc-val\">{{ view.opacity }}</span>\n      </div>\n    </div>\n\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 [binary]=\"true\" [ngModel]=\"view.geneMap\"\n                    (onChange)=\"onGeneMap($event.checked)\"\n                    label=\"Gene map (expression field)\"\n                    [pTooltip]=\"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                    tooltipPosition=\"top\"></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 [binary]=\"true\" [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\"></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 [binary]=\"true\" [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\"></p-checkbox>\n      </div>\n      <div class=\"sc-row\"\n           *ngIf=\"view.geneMap && is3d && isSectioned && !view.geneMapVolume && geneMapOneSection\">\n        <span class=\"sc-lbl\">Map section</span>\n        <p-slider [ngModel]=\"view.geneMapSection\" [min]=\"0\" [max]=\"lastSection\" [step]=\"1\"\n                  (onChange)=\"onGeneMapSection($event.value)\"></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 [ngModel]=\"view.geneMapSmoothing\" [min]=\"0.5\" [max]=\"4\" [step]=\"0.5\"\n                  (onChange)=\"onGeneMapSmoothing($event.value)\"></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 [ngModel]=\"view.geneMapOpacity\" [min]=\"0.1\" [max]=\"1\" [step]=\"0.05\"\n                  (onChange)=\"onGeneMapOpacity($event.value)\"></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\n        for being crowded. Transparent where no cell was measured. Turn the cells'\n        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 [binary]=\"true\" [ngModel]=\"view.showVolume\"\n                    (onChange)=\"onShowVolume($event.checked)\"\n                    label=\"Reference volume\"\n                    pTooltip=\"The registered anatomy the observations sit in\"\n                    tooltipPosition=\"top\"></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 [ngModel]=\"view.volumeOpacity\" [min]=\"0.05\" [max]=\"1\" [step]=\"0.05\"\n                  (onChange)=\"onVolumeOpacity($event.value)\"></p-slider>\n        <span class=\"sc-val\">{{ view.volumeOpacity }}</span>\n      </div>\n      <div class=\"sc-row\">\n        <p-checkbox [binary]=\"true\" [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\"></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 [binary]=\"true\" [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\"></p-checkbox>\n      </div>\n      <div class=\"sc-row\" *ngIf=\"view.showPoints && isSectioned && oneSection\">\n        <span class=\"sc-lbl\">Section</span>\n        <p-slider [ngModel]=\"view.pointSection\" [min]=\"0\" [max]=\"lastSection\" [step]=\"1\"\n                  (onChange)=\"onPointSection($event.value)\"></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-hint\" *ngIf=\"exceedsCloudPalette\">\n        {{ legend?.length }} categories is past the {{ cloudPaletteLimit }} the 3D cloud's\n        colour LUT can keep apart, so the points draw flat for this column. The density\n        volumes below render it, and so does the 2D Spatial omics view.\n      </div>\n      <div class=\"sc-row\">\n        <p-checkbox [binary]=\"true\" [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\"></p-checkbox>\n      </div>\n      <div class=\"sc-row\" *ngIf=\"view.densityVolume\">\n        <span class=\"sc-lbl\">Smoothing</span>\n        <p-slider [ngModel]=\"view.densitySmoothing\" [min]=\"0.5\" [max]=\"4\" [step]=\"0.5\"\n                  (onChange)=\"onDensitySmoothing($event.value)\"></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 [binary]=\"true\" [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\"></p-checkbox>\n      </div>\n      <div class=\"sc-row\">\n        <span class=\"sc-lbl\">Clip outliers</span>\n        <p-dropdown [options]=\"clipOptions\" optionLabel=\"label\" optionValue=\"value\"\n                    [ngModel]=\"view.percentileClip\" (ngModelChange)=\"onClip($event)\"\n                    appendTo=\"body\"\n                    pTooltip=\"Percentile the contrast window is taken at\"\n                    tooltipPosition=\"top\"></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    <!-- 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 type=\"button\" class=\"sc-disclosure\" (click)=\"toggleCharts()\"\n              [attr.aria-expanded]=\"chartsOpen\" [attr.aria-controls]=\"chartsBodyId\">\n        <i class=\"pi\" [class.pi-chevron-right]=\"!chartsOpen\"\n           [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\n  </div>\n</p-dialog>\n", styles: ["@charset \"UTF-8\";: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,.sc-hint{font-size:.75rem;color:var(--text-color-secondary, #6c757d)}.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-key{padding:.5rem 0;border-top:1px solid var(--surface-border, #dee2e6);border-bottom:1px solid var(--surface-border, #dee2e6)}.sc-legend{list-style:none;margin:0;padding:0;max-height:11rem;overflow-y:auto;display:flex;flex-direction:column;gap:.2rem}.sc-legend li{display:flex}.sc-legend-btn{display:flex;align-items:center;gap:.45rem;width:100%;padding:.15rem .3rem;font:inherit;font-size:.8rem;text-align:left;background:none;border:1px solid transparent;border-radius:3px;cursor:pointer;color:inherit}.sc-legend-btn:hover{background:var(--surface-hover, rgba(0, 0, 0, .04))}.sc-legend-btn.selected{border-color:var(--primary-color, #3b82f6);background:var(--surface-hover, rgba(59, 130, 246, .08));font-weight:600}.sc-selection .sc-row{gap:.4rem}.sc-swatch{width:.85rem;height:.85rem;flex:0 0 auto;border-radius:2px;border:1px solid rgba(0,0,0,.2)}.sc-legend-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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-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)}.sc-legend-static{cursor:default}.sc-tx-gene{display:flex;align-items:center;gap:.5rem}.sc-tx-gene .sc-legend-label{flex:1}:host ::ng-deep .sc-glyph-pick .p-dropdown-label{padding:.2rem .4rem}.sc-glyph-option{display:inline-flex;align-items:center;gap:.4rem}.sc-glyph-svg{width:1rem;height:1rem;fill:currentColor}:host ::ng-deep .sc-row-buttons .p-selectbutton .p-button{padding:.35rem .6rem;font-size:.85rem}:host ::ng-deep .sc-row-buttons .p-selectbutton{display:flex;flex-wrap:nowrap}.sc-row-wide .sc-lbl{flex:0 0 auto}.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-gene-group,.sc-gene-leaf{padding-left:1rem}.sc-gene-leaf.nested{padding-left:2rem}.sc-count{flex:0 0 auto;font-size:.78rem;color:var(--text-color-secondary, #6c757d)}.sc-dot{flex:0 0 auto;width:.7rem;height:.7rem;border-radius:50%;border:1px solid rgba(0,0,0,.2)}.sc-dot-pick{position:relative;cursor:pointer}.sc-dot-pick input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}.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-gene-footer{text-align:right;font-size:.78rem;padding:.2rem 0;color:var(--text-color-secondary, #6c757d)}.sc-color-input{width:2.5rem;height:1.8rem;border:1px solid var(--surface-border, #ced4da);border-radius:4px;padding:0;background:none}.sc-meter{height:.45rem;border-radius:3px;background:var(--surface-200, #e9ecef);overflow:hidden}.sc-meter-fill{height:100%;background:var(--primary-color, #2196f3)}.sc-meter-fill.over{background:var(--orange-500, #f59e0b)}.sc-meter-ends,.sc-ticks{display:flex;justify-content:space-between;font-size:.72rem;font-weight:600;color:var(--text-color-secondary, #6c757d)}.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-error{color:var(--red-600, #c62828)}\n"], dependencies: [{ 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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i6.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "directive", type: i6$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i7.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "autoShowPanelOnPrintableCharacterKeyDown", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i9.Slider, selector: "p-slider", inputs: ["animate", "disabled", "min", "max", "orientation", "step", "range", "style", "styleClass", "ariaLabel", "ariaLabelledBy", "tabindex", "autofocus"], outputs: ["onChange", "onSlideEnd"] }, { kind: "component", type: i7$1.TreeSelect, selector: "p-treeSelect", inputs: ["inputId", "scrollHeight", "disabled", "metaKeySelection", "variant", "display", "selectionMode", "tabindex", "ariaLabel", "ariaLabelledBy", "placeholder", "panelClass", "panelStyle", "panelStyleClass", "containerStyle", "containerStyleClass", "labelStyle", "labelStyleClass", "overlayOptions", "emptyMessage", "appendTo", "filter", "filterBy", "filterMode", "filterPlaceholder", "filterLocale", "filterInputAutoFocus", "propagateSelectionDown", "propagateSelectionUp", "showClear", "resetFilterOnHide", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autofocus", "options", "showTransitionOptions", "hideTransitionOptions", "loading"], outputs: ["onNodeExpand", "onNodeCollapse", "onShow", "onHide", "onClear", "onFilter", "onFocus", "onBlur", "onNodeUnselect", "onNodeSelect"] }, { kind: "component", type: i10.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: i11.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: i16.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: i9$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: "component", type: i18.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "component", type: SpatialChartsComponent, selector: "spatial-charts", inputs: ["active"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: SpatialControlsComponent, selector: "spatial-controls", inputs: { visible: "visible", is3d: "is3d" }, outputs: { visibleChange: "visibleChange" }, viewQueries: [{ propertyName: "charts", first: true, predicate: SpatialChartsComponent, descendants: true }, { propertyName: "geneGroupFileRef", first: true, predicate: ["geneGroupFile"], descendants: true }], ngImport: i0, template: "<p-dialog header=\"Spatial omics\"\n          [visible]=\"visible\" (visibleChange)=\"onVisibleChange($event)\"\n          [modal]=\"false\" [resizable]=\"true\" [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\">\n    No dataset is loaded.\n  </div>\n\n  <div class=\"sc-body\" *ngIf=\"controls && dataset as ds\">\n\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 [binary]=\"true\" [ngModel]=\"view.showImage\" (click)=\"$event.stopPropagation()\"\n                    (onChange)=\"onShowImage($event.checked)\"></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\">\n          Channels, colours and contrast are in the Channels &amp; Histogram dialog.\n        </small>\n      </div>\n    </div>\n\n    <!-- Cells -->\n    <div class=\"sc-panel\" *ngIf=\"hasCells && !is3d\" [class.open]=\"open.cells\">\n      <div class=\"sc-panel-head\" (click)=\"toggleSection('cells')\">\n        <p-checkbox [binary]=\"true\" [ngModel]=\"cellsOn\" (click)=\"$event.stopPropagation()\"\n                    (onChange)=\"onShowCells($event.checked)\"></p-checkbox>\n        <span class=\"sc-panel-title\">Cells</span>\n        <i class=\"pi\" [class.pi-chevron-down]=\"open.cells\" [class.pi-chevron-right]=\"!open.cells\"></i>\n      </div>\n      <div class=\"sc-panel-body\" *ngIf=\"open.cells\">\n        <ng-container *ngIf=\"cellSetOptions.length > 1\">\n          <div class=\"sc-subhead\">Boundaries</div>\n          <p-selectButton [options]=\"cellSetOptions\" optionLabel=\"label\" optionValue=\"value\"\n                          [ngModel]=\"activeCellSet\" (ngModelChange)=\"onCellSet($event)\"\n                          [allowEmpty]=\"false\" styleClass=\"sc-buttons\"></p-selectButton>\n        </ng-container>\n\n        <div class=\"sc-subhead\">Coloring</div>\n        <div class=\"sc-row\">\n          <span class=\"sc-lbl\">Cell Color</span>\n          <p-dropdown [options]=\"cellColorOptions\" optionLabel=\"label\" optionValue=\"value\"\n                      [ngModel]=\"view.cellColorMode\" (ngModelChange)=\"onCellColorMode($event)\"\n                      appendTo=\"body\"></p-dropdown>\n        </div>\n        <small class=\"sc-hint\" *ngIf=\"view.cellColorMode === 'group'\">\n          Adjust cell color in the groups section below.\n        </small>\n        <div class=\"sc-row\" *ngIf=\"view.cellColorMode === 'gene' && ds.features\">\n          <span class=\"sc-lbl\">Gene</span>\n          <p-dropdown [options]=\"geneOptions\" optionLabel=\"label\" optionValue=\"value\"\n                      [ngModel]=\"view.cellColorGene\" (ngModelChange)=\"onCellColorGene($event)\"\n                      [filter]=\"true\" filterBy=\"label\" [resetFilterOnHide]=\"true\"\n                      (onFilter)=\"onGeneFilter($event.filter)\" (onShow)=\"ensureGeneList()\"\n                      [virtualScroll]=\"geneOptions.length > geneVirtualScrollFrom\"\n                      [virtualScrollItemSize]=\"30\" appendTo=\"body\"\n                      placeholder=\"Search genes\u2026\"></p-dropdown>\n        </div>\n        <div class=\"sc-row\" *ngIf=\"view.cellColorMode === 'single'\">\n          <span class=\"sc-lbl\">Color</span>\n          <input type=\"color\" class=\"sc-color-input\" [value]=\"view.cellSingleColor\"\n                 (change)=\"onCellSingleColor($any($event.target).value)\" />\n        </div>\n        <div *ngIf=\"view.cellColorMode === 'gene' || view.cellColorMode === 'transcriptDensity'\">\n          <div class=\"sc-colorbar\" [style.background]=\"colorBarCss || densityColorBarCss\"></div>\n        </div>\n\n        <ng-container *ngIf=\"groupOptions.length\">\n          <div class=\"sc-subhead\">Groups</div>\n          <div class=\"sc-row sc-row-picker\">\n            <p-dropdown [options]=\"groupOptions\" [group]=\"true\" optionLabel=\"label\" optionValue=\"value\"\n                        optionGroupLabel=\"label\" optionGroupChildren=\"items\"\n                        [ngModel]=\"activeGroupEntry\" (ngModelChange)=\"onGroupEntry($event)\"\n                        appendTo=\"body\" styleClass=\"sc-full\">\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 *ngIf=\"groupVariantOptions.length\" [options]=\"groupVariantOptions\"\n                        optionLabel=\"label\" optionValue=\"value\" styleClass=\"sc-variant\"\n                        [ngModel]=\"activeCellTypeColumn\" (ngModelChange)=\"onGroupVariant($event)\"\n                        appendTo=\"body\"></p-dropdown>\n            <button *ngIf=\"canImportGroups\" type=\"button\" class=\"sc-icon-btn\" [disabled]=\"groupImporting\"\n                    (click)=\"groupFile.click()\" title=\"Import cell groups (CSV of cell_id, group)\">\n              <i class=\"pi\" [class.pi-plus-circle]=\"!groupImporting\" [class.pi-spin]=\"groupImporting\"\n                 [class.pi-spinner]=\"groupImporting\"></i>\n            </button>\n            <input #groupFile type=\"file\" accept=\".csv,.tsv,.txt\" hidden\n                   (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 [binary]=\"true\" [ngModel]=\"allGroupsShown\"\n                          (onChange)=\"onAllGroupsShown($event.checked)\"></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 [binary]=\"true\" [ngModel]=\"isGroupShown(row.label)\"\n                            (onChange)=\"onGroupShown(row.label, $event.checked)\"></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\n        <div class=\"sc-subhead\">Visibility</div>\n        <span class=\"sc-lbl\">View cells as</span>\n        <p-selectButton [options]=\"cellDrawOptions\" optionLabel=\"label\" optionValue=\"value\"\n                        [ngModel]=\"view.cellDraw\" (ngModelChange)=\"onCellDraw($event)\"\n                        [allowEmpty]=\"false\" styleClass=\"sc-buttons\"></p-selectButton>\n        <ng-container *ngIf=\"view.cellDraw !== 'outline'\">\n          <span class=\"sc-lbl\">Cell fill opacity</span>\n          <div class=\"sc-row sc-row-number\">\n            <p-slider [ngModel]=\"view.cellOpacity\" [min]=\"0.05\" [max]=\"1\" [step]=\"0.05\"\n                      (onChange)=\"onCellOpacity($event.value)\"></p-slider>\n            <p-inputNumber [ngModel]=\"cellOpacityPercent\" (ngModelChange)=\"onCellOpacityPercent($event)\"\n                           [min]=\"5\" [max]=\"100\" [showButtons]=\"false\" inputStyleClass=\"sc-num\"></p-inputNumber>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Transcripts -->\n    <div class=\"sc-panel\" *ngIf=\"hasTranscripts && !is3d\" [class.open]=\"open.transcripts\">\n      <div class=\"sc-panel-head\" (click)=\"toggleSection('transcripts')\">\n        <p-checkbox [binary]=\"true\" [ngModel]=\"view.transcriptMode !== 'off'\" (click)=\"$event.stopPropagation()\"\n                    (onChange)=\"onTranscriptsOn($event.checked)\"></p-checkbox>\n        <span class=\"sc-panel-title\">Transcripts</span>\n        <i class=\"pi\" [class.pi-chevron-down]=\"open.transcripts\" [class.pi-chevron-right]=\"!open.transcripts\"></i>\n      </div>\n      <div class=\"sc-panel-body\" *ngIf=\"open.transcripts\">\n        <div class=\"sc-row sc-row-picker\">\n          <p-multiSelect inputId=\"sc-tx-genes\" [options]=\"geneOptions\"\n                         optionLabel=\"label\" optionValue=\"value\"\n                         [ngModel]=\"view.transcriptGenes\" (onChange)=\"onTranscriptGenes($event.value)\"\n                         [filter]=\"true\" filterBy=\"label\" [resetFilterOnHide]=\"true\"\n                         (onFilter)=\"onGeneFilter($event.filter)\" (onPanelShow)=\"ensureGeneList()\"\n                         [virtualScroll]=\"geneOptions.length > geneVirtualScrollFrom\"\n                         [virtualScrollItemSize]=\"30\" [showToggleAll]=\"false\"\n                         [emptyFilterMessage]=\"genesAreRemote ? 'No match \u2014 keep typing' : 'No match'\"\n                         [emptyMessage]=\"genesAreRemote ? 'Type to search genes' : 'No genes'\"\n                         appendTo=\"body\" placeholder=\"Search for genes to visualize\u2026\"\n                         [selectedItemsLabel]=\"'{0} genes selected'\" [maxSelectedLabels]=\"0\"\n                         styleClass=\"sc-full\"></p-multiSelect>\n          <button type=\"button\" class=\"sc-icon-btn\" *ngIf=\"canShowAllGenes\" (click)=\"onToggleAllGenes()\"\n                  [class.active]=\"view.transcriptAllGenes\"\n                  [title]=\"view.transcriptAllGenes ? 'Back to the selected genes' : 'Select all genes'\">\u00B1</button>\n          <button type=\"button\" class=\"sc-icon-btn\" (click)=\"geneMenuRef.toggle($event)\" title=\"More\">\n            <i class=\"pi pi-ellipsis-v\"></i>\n          </button>\n          <p-menu #geneMenuRef [model]=\"geneMenu\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n          <input #geneGroupFile type=\"file\" accept=\".csv,.tsv,.txt\" hidden\n                 (change)=\"onImportGeneGroups(geneGroupFile)\" />\n        </div>\n        <small class=\"sc-hint sc-error\" *ngIf=\"geneGroupError\">{{ geneGroupError }}</small>\n        <small class=\"sc-hint\" *ngIf=\"allGenesPreparing\">{{ allGenesPreparing }}</small>\n\n        <!-- Marker genes of each cluster, added as gene groups named after the clusters. -->\n        <div class=\"sc-markers\" *ngIf=\"markersOpen\">\n          <div class=\"sc-row\">\n            <span class=\"sc-lbl\">Clusters from</span>\n            <p-dropdown [options]=\"markerColumnOptions\" optionLabel=\"label\" optionValue=\"value\"\n                        [ngModel]=\"markerColumn\" (ngModelChange)=\"onMarkerColumn($event)\"\n                        appendTo=\"body\" [filter]=\"markerColumnOptions.length > 8\"></p-dropdown>\n          </div>\n          <div class=\"sc-row\">\n            <span class=\"sc-lbl\">Per cluster</span>\n            <p-dropdown [options]=\"markerPerGroupOptions\" optionLabel=\"label\" optionValue=\"value\"\n                        [(ngModel)]=\"markerPerGroup\" appendTo=\"body\"></p-dropdown>\n          </div>\n          <div class=\"sc-row\">\n            <span class=\"sc-lbl\">Clusters</span>\n            <p-multiSelect [options]=\"markerClusterOptions\" optionLabel=\"label\" optionValue=\"value\"\n                           [(ngModel)]=\"markerClusters\" appendTo=\"body\" [filter]=\"true\"\n                           selectedItemsLabel=\"{0} clusters\" [maxSelectedLabels]=\"2\"\n                           placeholder=\"Pick clusters\"></p-multiSelect>\n          </div>\n          <small class=\"sc-hint\" *ngIf=\"markerLoading\">\n            Finding marker genes\u2026 the first time for a grouping reads the whole expression matrix,\n            which can take a minute.\n          </small>\n          <small class=\"sc-hint sc-error\" *ngIf=\"markerError\">{{ markerError }}</small>\n          <div class=\"sc-row sc-markers-actions\">\n            <p-button label=\"Add marker genes\" icon=\"pi pi-sitemap\" size=\"small\"\n                      [loading]=\"markerLoading\" [disabled]=\"!markerClusters.length\"\n                      (onClick)=\"addMarkerGenes()\"></p-button>\n            <p-button label=\"Cancel\" size=\"small\" [text]=\"true\" [disabled]=\"markerLoading\"\n                      (onClick)=\"markersOpen = false\"></p-button>\n          </div>\n        </div>\n\n        <div class=\"sc-subhead\">Selected genes</div>\n        <div class=\"sc-gene-tree\">\n          <div class=\"sc-gene-row sc-gene-root\">\n            <button type=\"button\" class=\"sc-eye\"\n                    (click)=\"view.transcriptAllGenes ? onToggleAllGenes() : onGenesShown(view.transcriptGenes, !areGenesShown(view.transcriptGenes))\">\n              <i class=\"pi\" [class.pi-eye]=\"view.transcriptAllGenes || areGenesShown(view.transcriptGenes)\"\n                 [class.pi-eye-slash]=\"!view.transcriptAllGenes && !areGenesShown(view.transcriptGenes)\"></i>\n            </button>\n            <span class=\"sc-group-label\">Genes</span>\n            <span class=\"sc-count\">({{ (view.transcriptAllGenes ? geneTotal : view.transcriptGenes.length) | number }}/{{ geneTotal | number }})</span>\n            <button type=\"button\" class=\"sc-icon-btn\" (click)=\"geneTreeOpen = !geneTreeOpen\"\n                    *ngIf=\"!view.transcriptAllGenes && view.transcriptGenes.length\">\n              <i class=\"pi\" [class.pi-chevron-down]=\"geneTreeOpen\" [class.pi-chevron-right]=\"!geneTreeOpen\"></i>\n            </button>\n          </div>\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, !areGenesShown(node.genes))\">\n                  <i class=\"pi\" [class.pi-eye]=\"areGenesShown(node.genes)\" [class.pi-eye-slash]=\"!areGenesShown(node.genes)\"></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 class=\"pi\" [class.pi-chevron-down]=\"!collapsedGeneGroups.has(node.name)\"\n                     [class.pi-chevron-right]=\"collapsedGeneGroups.has(node.name)\"></i>\n                </button>\n              </div>\n              <ng-container *ngIf=\"!node.name || !collapsedGeneGroups.has(node.name)\">\n                <div class=\"sc-gene-row sc-gene-leaf\" [class.nested]=\"!!node.name\"\n                     *ngFor=\"let gene of node.genes; trackBy: trackByLabelString\">\n                  <button type=\"button\" class=\"sc-eye\" (click)=\"onGenesShown([gene], !isGeneShown(gene))\">\n                    <i class=\"pi\" [class.pi-eye]=\"isGeneShown(gene)\" [class.pi-eye-slash]=\"!isGeneShown(gene)\"></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 type=\"button\" class=\"sc-gene-icon\" [style.color]=\"geneSwatchOf(gene)\"\n                          [attr.aria-label]=\"'Icon and colour for ' + gene\" pTooltip=\"Icon and colour\"\n                          tooltipPosition=\"top\" (click)=\"openGeneStyle($event, gene, genePop)\">\n                    <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\">\n                      <polygon *ngIf=\"view.transcriptMode === 'glyphs'; else dotIcon\"\n                               [attr.points]=\"glyphPoints(glyphOf(gene, view.transcriptGenes.indexOf(gene)))\"></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 class=\"sc-gene-count\" *ngIf=\"geneCountOf(gene) as n; else zeroCount\"\n                        title=\"Transcripts in view\">{{ n | number }}</span>\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              <div class=\"sc-style-pop\" *ngIf=\"styleGene as gene\">\n                <div class=\"sc-style-title\">Transcript Icon</div>\n                <div class=\"sc-style-icons\" role=\"radiogroup\" [attr.aria-label]=\"'Icon for ' + gene\">\n                  <button type=\"button\" *ngFor=\"let opt of glyphOptions\" class=\"sc-style-icon\"\n                          role=\"radio\" [attr.aria-checked]=\"opt.value === styleGlyph\"\n                          [class.active]=\"opt.value === styleGlyph\" [title]=\"opt.label\"\n                          (click)=\"onGlyph(gene, opt.value)\">\n                    <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\"><polygon [attr.points]=\"opt.points\"></polygon></svg>\n                  </button>\n                </div>\n                <small class=\"sc-hint\" *ngIf=\"view.transcriptMode !== 'glyphs'\">\n                  Icons show when the transcript point style is Icons.\n                </small>\n                <div class=\"sc-style-title\">Transcript Color</div>\n                <div class=\"sc-style-color\">\n                  <label class=\"sc-style-swatch\" [style.background]=\"geneColorOf(gene)\" title=\"Pick a colour\">\n                    <input type=\"color\" [value]=\"geneColorOf(gene)\" (change)=\"onGeneColor(gene, $any($event.target).value)\" />\n                  </label>\n                  <input pInputText class=\"sc-style-hex\" [value]=\"geneColorOf(gene)\" maxlength=\"7\"\n                         [attr.aria-label]=\"'Hex colour for ' + gene\"\n                         (change)=\"onGeneHex(gene, $any($event.target).value)\"\n                         (keydown.enter)=\"onGeneHex(gene, $any($event.target).value)\" />\n                </div>\n                <div class=\"sc-style-title sc-style-sub\">Presets</div>\n                <div class=\"sc-style-presets\">\n                  <button type=\"button\" *ngFor=\"let c of colorPresets\" class=\"sc-style-preset\"\n                          [style.background]=\"c\" [class.active]=\"c === geneColorOf(gene).toLowerCase()\"\n                          [title]=\"c\" [attr.aria-label]=\"'Colour ' + c\" (click)=\"onGeneColor(gene, c)\"></button>\n                </div>\n                <p-button label=\"Reset to default\" icon=\"pi pi-refresh\" size=\"small\" [text]=\"true\"\n                          styleClass=\"sc-style-reset\" (onClick)=\"resetGeneStyle(gene)\"></p-button>\n              </div>\n            </ng-template>\n          </p-overlayPanel>\n          <div class=\"sc-gene-footer\">\n            {{ (view.transcriptAllGenes ? geneTotal : view.transcriptGenes.length) | number }}/{{ geneTotal | number }} genes selected\n          </div>\n        </div>\n\n        <div class=\"sc-subhead\">Transcript controls</div>\n        <span class=\"sc-lbl\">View transcripts as</span>\n        <p-selectButton [options]=\"transcriptModeOptions\" optionLabel=\"label\" optionValue=\"value\"\n                        [ngModel]=\"view.transcriptMode === 'off' ? null : view.transcriptMode\"\n                        (ngModelChange)=\"onTranscriptMode($event)\"\n                        [allowEmpty]=\"false\" styleClass=\"sc-buttons\"></p-selectButton>\n\n        <ng-container *ngIf=\"estimate\">\n          <div class=\"sc-row\">\n            <span class=\"sc-lbl\" pTooltip=\"Transcripts of the visible genes estimated to be in view, against the most markers drawn at once\"\n                  tooltipPosition=\"top\">Estimated Transcript Points</span>\n            <button type=\"button\" class=\"sc-small-btn\" (click)=\"editingMax = !editingMax\">Edit Max</button>\n          </div>\n          <div class=\"sc-meter\"><div class=\"sc-meter-fill\" [class.over]=\"estimateOverMax\" [style.width.%]=\"estimatePercent\"></div></div>\n          <div class=\"sc-meter-ends\">\n            <span>{{ estimate.points | number }} points</span>\n            <span>{{ estimate.max | number }} max{{ estimateOverMax ? ' reached' : '' }}</span>\n          </div>\n          <div class=\"sc-row\" *ngIf=\"editingMax\">\n            <span class=\"sc-lbl\">Max markers</span>\n            <p-dropdown [options]=\"budgetOptions\" optionLabel=\"label\" optionValue=\"value\"\n                        [ngModel]=\"view.transcriptBudget\" (ngModelChange)=\"onTranscriptBudget($event)\"\n                        appendTo=\"body\"></p-dropdown>\n          </div>\n          <small class=\"sc-hint\" *ngIf=\"estimateOverMax && view.transcriptMode !== 'density'\">\n            Max points reached: transcripts are grouped by area, circles sized by how many they hold.\n            Zoom in or select fewer genes to see individual points.\n          </small>\n        </ng-container>\n\n        <ng-container *ngIf=\"view.transcriptMode === 'circles' || view.transcriptMode === 'glyphs'\">\n          <div class=\"sc-row\">\n            <span class=\"sc-lbl\">Colour by</span>\n            <p-selectButton [options]=\"transcriptColorOptions\" optionLabel=\"label\" optionValue=\"value\"\n                            [ngModel]=\"view.transcriptColorBy\" (ngModelChange)=\"onTranscriptColorBy($event)\"\n                            [allowEmpty]=\"false\" styleClass=\"sc-buttons\"></p-selectButton>\n          </div>\n          <small class=\"sc-hint\" *ngIf=\"view.transcriptAllGenes && view.transcriptColorBy === 'gene' && estimateOverMax\">\n            Grouped markers mix genes, so they are coloured by cell type until you zoom in to individual transcripts.\n          </small>\n          <div class=\"sc-row\" *ngIf=\"view.transcriptAllGenes && view.transcriptMode === 'glyphs'\">\n            <span class=\"sc-lbl\">Icon</span>\n            <p-dropdown [options]=\"glyphOptions\" optionLabel=\"label\" optionValue=\"value\"\n                        [ngModel]=\"glyphOf('*', 0)\" (ngModelChange)=\"onGlyph('*', $event)\"\n                        appendTo=\"body\" styleClass=\"sc-glyph-pick\">\n              <ng-template let-opt pTemplate=\"item\">\n                        <span class=\"sc-glyph-option\">\n                          <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\"><polygon [attr.points]=\"opt.points\"></polygon></svg>\n                          {{ opt.label }}\n                        </span>\n                      </ng-template>\n                      <ng-template let-opt pTemplate=\"selectedItem\">\n                        <span class=\"sc-glyph-option\">\n                          <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\"><polygon [attr.points]=\"opt?.points\"></polygon></svg>\n                        </span>\n                      </ng-template>\n            </p-dropdown>\n          </div>\n          <div class=\"sc-row\">\n            <span class=\"sc-lbl\">Size</span>\n            <p-slider [ngModel]=\"view.transcriptScale\" [min]=\"0.5\" [max]=\"3\" [step]=\"0.25\"\n                      (onChange)=\"onTranscriptScale($event.value)\"></p-slider>\n            <span class=\"sc-val\">{{ view.transcriptScale }}\u00D7</span>\n          </div>\n          <div class=\"sc-row\">\n            <span class=\"sc-lbl\">Opacity</span>\n            <p-slider [ngModel]=\"view.transcriptOpacity\" [min]=\"0.1\" [max]=\"1\" [step]=\"0.05\"\n                      (onChange)=\"onTranscriptOpacity($event.value)\"></p-slider>\n            <span class=\"sc-val\">{{ view.transcriptOpacity }}</span>\n          </div>\n          <div class=\"sc-row\" *ngIf=\"!showingAllGenes\">\n            <p-checkbox [binary]=\"true\" [ngModel]=\"view.transcriptQuality === 'all'\" inputId=\"sc-tx-lowq\"\n                        (onChange)=\"onTranscriptQuality($event.checked)\"></p-checkbox>\n            <label class=\"sc-lbl\" for=\"sc-tx-lowq\">Include low-quality calls</label>\n          </div>\n        </ng-container>\n\n        <ng-container *ngIf=\"view.transcriptMode === 'density'\">\n          <span class=\"sc-lbl\">Density map opacity</span>\n          <div class=\"sc-row sc-row-number\">\n            <p-slider [ngModel]=\"view.densityOpacity\" [min]=\"0.05\" [max]=\"1\" [step]=\"0.05\"\n                      (onChange)=\"onDensityOpacity($event.value)\"></p-slider>\n            <p-inputNumber [ngModel]=\"densityOpacityPercent\" (ngModelChange)=\"onDensityOpacityPercent($event)\"\n                           [min]=\"5\" [max]=\"100\" inputStyleClass=\"sc-num\"></p-inputNumber>\n          </div>\n          <span class=\"sc-lbl\" pTooltip=\"Edge of each density bin\" tooltipPosition=\"top\">Density map bin size</span>\n          <p-slider [ngModel]=\"densityBinIndex\" [min]=\"0\" [max]=\"3\" [step]=\"1\"\n                    (onChange)=\"onDensityBinIndex($event.value)\" styleClass=\"sc-bin-slider\"></p-slider>\n          <div class=\"sc-ticks\">\n            <span *ngFor=\"let b of densityBins\">{{ b }}\u00D7{{ b }}\u00B5m</span>\n          </div>\n          <span class=\"sc-lbl\" pTooltip=\"Transcripts per \u00B5m\u00B2 at which the colour scale starts and saturates\"\n                tooltipPosition=\"top\">Density map scale threshold</span>\n          <div class=\"sc-row sc-row-range\">\n            <p-inputNumber [ngModel]=\"densityWindow[0]\" (ngModelChange)=\"onDensityRangeEnd(0, $event)\"\n                           mode=\"decimal\" [minFractionDigits]=\"3\" [maxFractionDigits]=\"3\"\n                           inputStyleClass=\"sc-num\"></p-inputNumber>\n            <p-slider [ngModel]=\"densityWindow\" [range]=\"true\" [min]=\"0\" [max]=\"densitySliderMax\"\n                      [step]=\"densityStep\" (onChange)=\"onDensityRange($event.values)\"></p-slider>\n            <p-inputNumber [ngModel]=\"densityWindow[1]\" (ngModelChange)=\"onDensityRangeEnd(1, $event)\"\n                           mode=\"decimal\" [minFractionDigits]=\"3\" [maxFractionDigits]=\"3\"\n                           inputStyleClass=\"sc-num\"></p-inputNumber>\n          </div>\n          <div class=\"sc-row\">\n            <small class=\"sc-hint\">{{ view.densityRange ? 'Set by hand.' : 'Derived from the data.' }}</small>\n            <button type=\"button\" class=\"sc-small-btn\" *ngIf=\"view.densityRange\" (click)=\"onDensityAuto()\">Auto</button>\n          </div>\n          <span class=\"sc-lbl\">Density map bin coloring</span>\n          <div class=\"sc-row sc-row-picker\">\n            <div class=\"sc-colorbar sc-full\" [style.background]=\"densityColorBarCss\"></div>\n            <p-treeSelect [options]=\"colormapOptions\" [ngModel]=\"selectedDensityColormapNode\"\n                          selectionMode=\"single\" [showClear]=\"true\" placeholder=\"Inferno\"\n                          [scrollHeight]=\"'260px'\" appendTo=\"body\" styleClass=\"sc-palette\"\n                          (onNodeSelect)=\"onDensityColormap($event.node)\" (onClear)=\"onDensityColormap(null)\">\n              <ng-template let-node pTemplate=\"default\">\n                <span class=\"sc-cmap-option\">\n                  <img *ngIf=\"!node.children && node.data?.src\" [src]=\"node.data.src\" class=\"sc-cmap-swatch\" alt=\"\" />\n                  <span>{{ node.label }}</span>\n                </span>\n              </ng-template>\n            </p-treeSelect>\n          </div>\n          <div class=\"sc-colorbar-ends\"><span>{{ densityWindow[0] | number: '1.0-3' }}</span><span>{{ densityWindow[1] | number: '1.0-3' }}</span></div>\n        </ng-container>\n      </div>\n    </div>\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 [binary]=\"true\" [ngModel]=\"view.showAnnotations !== false\" (click)=\"$event.stopPropagation()\"\n                    (onChange)=\"onShowAnnotations($event.checked)\" pTooltip=\"Show the drawn regions\"\n                    tooltipPosition=\"top\"></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 label=\"Select from ROIs\" icon=\"pi pi-object-group\" size=\"small\"\n                    [outlined]=\"true\" (onClick)=\"selectFromRegions()\"\n                    pTooltip=\"Select every observation inside the drawn regions\"\n                    tooltipPosition=\"top\"></p-button>\n          <p-button *ngIf=\"hasSelection\" label=\"Clear\" size=\"small\" [text]=\"true\"\n                    (onClick)=\"clearSelection()\"></p-button>\n        </div>\n        <small class=\"sc-hint\" *ngIf=\"hasSelection\">\n          {{ selection.count | number }} of {{ ds.observations.count | number }} selected \u2014\n          the rest are muted.\n        </small>\n        <small class=\"sc-hint\" *ngIf=\"selectionMissed\">\n          No observations fell inside the drawn regions.\n        </small>\n        <small class=\"sc-hint\" *ngIf=\"is3d\">\n          In 3D a region cuts through the cloud's full depth. Orbit and draw again\n          to cut from another angle.\n        </small>\n      </div>\n    </div>\n\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.observations\">\n      <div class=\"sc-panel-head\" (click)=\"toggleSection('observations')\">\n        <p-checkbox [binary]=\"true\" [ngModel]=\"view.showPoints\" (click)=\"$event.stopPropagation()\"\n                    (onChange)=\"onShowPoints($event.checked)\"></p-checkbox>\n        <span class=\"sc-panel-title\">Observations</span>\n        <i class=\"pi\" [class.pi-chevron-down]=\"open.observations\" [class.pi-chevron-right]=\"!open.observations\"></i>\n      </div>\n      <div class=\"sc-panel-body\" *ngIf=\"open.observations\">\n        <small class=\"sc-hint\" *ngIf=\"hasCells && !is3d\">\n          One circle per cell. With cell outlines on, circles are only drawn where cells\n          are too small on 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 inputId=\"sc-column\" [options]=\"columnOptions\"\n                  optionLabel=\"label\" optionValue=\"value\"\n                  [ngModel]=\"selectedColumn\" (ngModelChange)=\"onColumn($event)\"\n                  placeholder=\"None (flat colour)\" appendTo=\"body\"\n                  styleClass=\"sc-full\"></p-dropdown>\n    </div>\n\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 inputId=\"sc-gene\" [options]=\"geneOptions\"\n                  optionLabel=\"label\" optionValue=\"value\"\n                  [ngModel]=\"selectedGene\" (ngModelChange)=\"onGene($event)\"\n                  [filter]=\"true\" filterBy=\"label\" [resetFilterOnHide]=\"true\"\n                  (onFilter)=\"onGeneFilter($event.filter)\" (onShow)=\"ensureGeneList()\"\n                  [showClear]=\"true\"\n                  [virtualScroll]=\"geneOptions.length > geneVirtualScrollFrom\"\n                  [virtualScrollItemSize]=\"30\"\n                  [emptyFilterMessage]=\"genesAreRemote ? 'No match \u2014 keep typing' : 'No match'\"\n                  [emptyMessage]=\"genesAreRemote ? 'Type to search genes' : 'No genes'\"\n                  appendTo=\"body\"\n                  placeholder=\"Search {{ ds.features.count | number }} genes\u2026\"\n                  styleClass=\"sc-full\"></p-dropdown>\n      <small class=\"sc-hint\" *ngIf=\"geneSearchFailed\">Gene lookup failed.</small>\n    </div>\n\n    <!-- Key: categorical legend or a continuous colour bar, built from the same\n         functions the renderer uses so it cannot disagree with the canvas. -->\n    <div class=\"sc-section sc-key\" *ngIf=\"view.colorBy\">\n      <span class=\"sc-lbl\">{{ colorByLabel }}</span>\n      <!-- Derived columns say so, so they are not mistaken for measured data. -->\n      <small class=\"sc-hint\" *ngIf=\"activeDescription\">{{ activeDescription }}</small>\n\n      <!-- Legend rows are buttons: clicking one selects that category, clicking\n           it again clears \u2014 so a click is always reversible. -->\n      <ul class=\"sc-legend\" *ngIf=\"isCategorical\">\n        <li *ngFor=\"let entry of legend; index as i\">\n          <button type=\"button\" class=\"sc-legend-btn\"\n                  [class.selected]=\"selectedCategory === i\"\n                  (click)=\"selectCategory(i)\"\n                  [title]=\"'Select ' + entry.label\">\n            <span class=\"sc-swatch\" [style.background]=\"entry.color\"></span>\n            <span class=\"sc-legend-label\">{{ entry.label }}</span>\n          </button>\n        </li>\n      </ul>\n\n      <div *ngIf=\"isContinuous\">\n        <div class=\"sc-colorbar\" [style.background]=\"colorBarCss\"></div>\n        <div class=\"sc-colorbar-ends\">\n          <span>low</span>\n          <span class=\"sc-hint\">window from percentiles</span>\n          <span>high</span>\n        </div>\n        <!-- The gradient this bar and the map are drawn with. Sits under the bar\n             it controls, with the same swatch previews the image's colormap picker\n             uses: which gradient reads best is a visual judgement, so a list of\n             names would be the wrong control. Cleared = follow the image's. -->\n        <div class=\"sc-row\">\n          <span class=\"sc-lbl\">Colormap</span>\n          <p-treeSelect [options]=\"colormapOptions\" [ngModel]=\"selectedColormapNode\"\n                        selectionMode=\"single\" [showClear]=\"true\"\n                        placeholder=\"Match the image\" [scrollHeight]=\"'260px'\"\n                        appendTo=\"body\"\n                        pTooltip=\"Colour scale for gene and numeric values \u2014 the markers, the gene map and this bar. Clear it to follow the image's colormap\"\n                        tooltipPosition=\"top\"\n                        (onNodeSelect)=\"onContinuousColormap($event.node)\"\n                        (onClear)=\"onContinuousColormap(null)\">\n            <ng-template let-node pTemplate=\"default\">\n              <span class=\"sc-cmap-option\">\n                <img *ngIf=\"!node.children && node.data?.src\" [src]=\"node.data.src\"\n                     class=\"sc-cmap-swatch\" alt=\"\" />\n                <span>{{ node.label }}</span>\n              </span>\n            </ng-template>\n          </p-treeSelect>\n          <span class=\"sc-val\"></span>\n        </div>\n      </div>\n    </div>\n\n    <!-- Display -->\n    <div class=\"sc-section\">\n      <div class=\"sc-row\">\n        <span class=\"sc-lbl\">Point size</span>\n        <p-slider [ngModel]=\"view.pointScale\" [min]=\"0.25\" [max]=\"5\" [step]=\"0.25\"\n                  (onChange)=\"onPointScale($event.value)\"></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 [ngModel]=\"view.opacity\" [min]=\"0.1\" [max]=\"1\" [step]=\"0.05\"\n                  (onChange)=\"onOpacity($event.value)\"></p-slider>\n        <span class=\"sc-val\">{{ view.opacity }}</span>\n      </div>\n    </div>\n\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 [binary]=\"true\" [ngModel]=\"view.geneMap\"\n                    (onChange)=\"onGeneMap($event.checked)\"\n                    label=\"Gene map (expression field)\"\n                    [pTooltip]=\"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                    tooltipPosition=\"top\"></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 [binary]=\"true\" [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\"></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 [binary]=\"true\" [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\"></p-checkbox>\n      </div>\n      <div class=\"sc-row\"\n           *ngIf=\"view.geneMap && is3d && isSectioned && !view.geneMapVolume && geneMapOneSection\">\n        <span class=\"sc-lbl\">Map section</span>\n        <p-slider [ngModel]=\"view.geneMapSection\" [min]=\"0\" [max]=\"lastSection\" [step]=\"1\"\n                  (onChange)=\"onGeneMapSection($event.value)\"></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 [ngModel]=\"view.geneMapSmoothing\" [min]=\"0.5\" [max]=\"4\" [step]=\"0.5\"\n                  (onChange)=\"onGeneMapSmoothing($event.value)\"></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 [ngModel]=\"view.geneMapOpacity\" [min]=\"0.1\" [max]=\"1\" [step]=\"0.05\"\n                  (onChange)=\"onGeneMapOpacity($event.value)\"></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\n        for being crowded. Transparent where no cell was measured. Turn the cells'\n        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 [binary]=\"true\" [ngModel]=\"view.showVolume\"\n                    (onChange)=\"onShowVolume($event.checked)\"\n                    label=\"Reference volume\"\n                    pTooltip=\"The registered anatomy the observations sit in\"\n                    tooltipPosition=\"top\"></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 [ngModel]=\"view.volumeOpacity\" [min]=\"0.05\" [max]=\"1\" [step]=\"0.05\"\n                  (onChange)=\"onVolumeOpacity($event.value)\"></p-slider>\n        <span class=\"sc-val\">{{ view.volumeOpacity }}</span>\n      </div>\n      <div class=\"sc-row\">\n        <p-checkbox [binary]=\"true\" [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\"></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 [binary]=\"true\" [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\"></p-checkbox>\n      </div>\n      <div class=\"sc-row\" *ngIf=\"view.showPoints && isSectioned && oneSection\">\n        <span class=\"sc-lbl\">Section</span>\n        <p-slider [ngModel]=\"view.pointSection\" [min]=\"0\" [max]=\"lastSection\" [step]=\"1\"\n                  (onChange)=\"onPointSection($event.value)\"></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-hint\" *ngIf=\"exceedsCloudPalette\">\n        {{ legend?.length }} categories is past the {{ cloudPaletteLimit }} the 3D cloud's\n        colour LUT can keep apart, so the points draw flat for this column. The density\n        volumes below render it, and so does the 2D Spatial omics view.\n      </div>\n      <div class=\"sc-row\">\n        <p-checkbox [binary]=\"true\" [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\"></p-checkbox>\n      </div>\n      <div class=\"sc-row\" *ngIf=\"view.densityVolume\">\n        <span class=\"sc-lbl\">Smoothing</span>\n        <p-slider [ngModel]=\"view.densitySmoothing\" [min]=\"0.5\" [max]=\"4\" [step]=\"0.5\"\n                  (onChange)=\"onDensitySmoothing($event.value)\"></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 [binary]=\"true\" [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\"></p-checkbox>\n      </div>\n      <div class=\"sc-row\">\n        <span class=\"sc-lbl\">Clip outliers</span>\n        <p-dropdown [options]=\"clipOptions\" optionLabel=\"label\" optionValue=\"value\"\n                    [ngModel]=\"view.percentileClip\" (ngModelChange)=\"onClip($event)\"\n                    appendTo=\"body\"\n                    pTooltip=\"Percentile the contrast window is taken at\"\n                    tooltipPosition=\"top\"></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    <!-- 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 type=\"button\" class=\"sc-disclosure\" (click)=\"toggleCharts()\"\n              [attr.aria-expanded]=\"chartsOpen\" [attr.aria-controls]=\"chartsBodyId\">\n        <i class=\"pi\" [class.pi-chevron-right]=\"!chartsOpen\"\n           [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\n  </div>\n</p-dialog>\n", styles: ["@charset \"UTF-8\";: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,.sc-hint{font-size:.75rem;color:var(--text-color-secondary, #6c757d)}.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-key{padding:.5rem 0;border-top:1px solid var(--surface-border, #dee2e6);border-bottom:1px solid var(--surface-border, #dee2e6)}.sc-legend{list-style:none;margin:0;padding:0;max-height:11rem;overflow-y:auto;display:flex;flex-direction:column;gap:.2rem}.sc-legend li{display:flex}.sc-legend-btn{display:flex;align-items:center;gap:.45rem;width:100%;padding:.15rem .3rem;font:inherit;font-size:.8rem;text-align:left;background:none;border:1px solid transparent;border-radius:3px;cursor:pointer;color:inherit}.sc-legend-btn:hover{background:var(--surface-hover, rgba(0, 0, 0, .04))}.sc-legend-btn.selected{border-color:var(--primary-color, #3b82f6);background:var(--surface-hover, rgba(59, 130, 246, .08));font-weight:600}.sc-selection .sc-row{gap:.4rem}.sc-swatch{width:.85rem;height:.85rem;flex:0 0 auto;border-radius:2px;border:1px solid rgba(0,0,0,.2)}.sc-legend-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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-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)}.sc-legend-static{cursor:default}.sc-tx-gene{display:flex;align-items:center;gap:.5rem}.sc-tx-gene .sc-legend-label{flex:1}:host ::ng-deep .sc-glyph-pick .p-dropdown-label{padding:.2rem .4rem}.sc-glyph-option{display:inline-flex;align-items:center;gap:.4rem}.sc-glyph-svg{width:1rem;height:1rem;fill:currentColor}:host ::ng-deep .sc-row-buttons .p-selectbutton .p-button{padding:.35rem .6rem;font-size:.85rem}:host ::ng-deep .sc-row-buttons .p-selectbutton{display:flex;flex-wrap:nowrap}.sc-row-wide .sc-lbl{flex:0 0 auto}.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-gene-group,.sc-gene-leaf{padding-left:1rem}.sc-gene-leaf.nested{padding-left:2rem}.sc-count{flex:0 0 auto;font-size:.78rem;color:var(--text-color-secondary, #6c757d)}.sc-dot{flex:0 0 auto;width:.7rem;height:.7rem;border-radius:50%;border:1px solid rgba(0,0,0,.2)}.sc-dot-pick{position:relative;cursor:pointer}.sc-dot-pick input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}.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-gene-footer{text-align:right;font-size:.78rem;padding:.2rem 0;color:var(--text-color-secondary, #6c757d)}.sc-color-input{width:2.5rem;height:1.8rem;border:1px solid var(--surface-border, #ced4da);border-radius:4px;padding:0;background:none}.sc-meter{height:.45rem;border-radius:3px;background:var(--surface-200, #e9ecef);overflow:hidden}.sc-meter-fill{height:100%;background:var(--primary-color, #2196f3)}.sc-meter-fill.over{background:var(--orange-500, #f59e0b)}.sc-meter-ends,.sc-ticks{display:flex;justify-content:space-between;font-size:.72rem;font-weight:600;color:var(--text-color-secondary, #6c757d)}.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-error{color:var(--red-600, #c62828)}.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))}::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)}.sc-gene-count{margin-left:auto;font-variant-numeric:tabular-nums;opacity:.8;padding-left:.5rem}.sc-markers{display:flex;flex-direction:column;gap:.4rem;padding:.5rem;margin:.25rem 0 .5rem;border:1px solid var(--surface-border, rgba(0, 0, 0, .15));border-radius:6px}.sc-markers-actions{gap:.5rem}\n"], dependencies: [{ 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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i6.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "directive", type: i6$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i7.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "autoShowPanelOnPrintableCharacterKeyDown", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i9.Slider, selector: "p-slider", inputs: ["animate", "disabled", "min", "max", "orientation", "step", "range", "style", "styleClass", "ariaLabel", "ariaLabelledBy", "tabindex", "autofocus"], outputs: ["onChange", "onSlideEnd"] }, { kind: "component", type: i7$1.TreeSelect, selector: "p-treeSelect", inputs: ["inputId", "scrollHeight", "disabled", "metaKeySelection", "variant", "display", "selectionMode", "tabindex", "ariaLabel", "ariaLabelledBy", "placeholder", "panelClass", "panelStyle", "panelStyleClass", "containerStyle", "containerStyleClass", "labelStyle", "labelStyleClass", "overlayOptions", "emptyMessage", "appendTo", "filter", "filterBy", "filterMode", "filterPlaceholder", "filterLocale", "filterInputAutoFocus", "propagateSelectionDown", "propagateSelectionUp", "showClear", "resetFilterOnHide", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autofocus", "options", "showTransitionOptions", "hideTransitionOptions", "loading"], outputs: ["onNodeExpand", "onNodeCollapse", "onShow", "onHide", "onClear", "onFilter", "onFocus", "onBlur", "onNodeUnselect", "onNodeSelect"] }, { kind: "component", type: i10.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: i11.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: i13.OverlayPanel, selector: "p-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i15.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "component", type: i16.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: i9$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: "component", type: i18.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "component", type: SpatialChartsComponent, selector: "spatial-charts", inputs: ["active"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SpatialControlsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spatial-controls', template: "<p-dialog header=\"Spatial omics\"\n          [visible]=\"visible\" (visibleChange)=\"onVisibleChange($event)\"\n          [modal]=\"false\" [resizable]=\"true\" [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\">\n    No dataset is loaded.\n  </div>\n\n  <div class=\"sc-body\" *ngIf=\"controls && dataset as ds\">\n\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 [binary]=\"true\" [ngModel]=\"view.showImage\" (click)=\"$event.stopPropagation()\"\n                    (onChange)=\"onShowImage($event.checked)\"></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\">\n          Channels, colours and contrast are in the Channels &amp; Histogram dialog.\n        </small>\n      </div>\n    </div>\n\n    <!-- Cells -->\n    <div class=\"sc-panel\" *ngIf=\"hasCells && !is3d\" [class.open]=\"open.cells\">\n      <div class=\"sc-panel-head\" (click)=\"toggleSection('cells')\">\n        <p-checkbox [binary]=\"true\" [ngModel]=\"cellsOn\" (click)=\"$event.stopPropagation()\"\n                    (onChange)=\"onShowCells($event.checked)\"></p-checkbox>\n        <span class=\"sc-panel-title\">Cells</span>\n        <i class=\"pi\" [class.pi-chevron-down]=\"open.cells\" [class.pi-chevron-right]=\"!open.cells\"></i>\n      </div>\n      <div class=\"sc-panel-body\" *ngIf=\"open.cells\">\n        <ng-container *ngIf=\"cellSetOptions.length > 1\">\n          <div class=\"sc-subhead\">Boundaries</div>\n          <p-selectButton [options]=\"cellSetOptions\" optionLabel=\"label\" optionValue=\"value\"\n                          [ngModel]=\"activeCellSet\" (ngModelChange)=\"onCellSet($event)\"\n                          [allowEmpty]=\"false\" styleClass=\"sc-buttons\"></p-selectButton>\n        </ng-container>\n\n        <div class=\"sc-subhead\">Coloring</div>\n        <div class=\"sc-row\">\n          <span class=\"sc-lbl\">Cell Color</span>\n          <p-dropdown [options]=\"cellColorOptions\" optionLabel=\"label\" optionValue=\"value\"\n                      [ngModel]=\"view.cellColorMode\" (ngModelChange)=\"onCellColorMode($event)\"\n                      appendTo=\"body\"></p-dropdown>\n        </div>\n        <small class=\"sc-hint\" *ngIf=\"view.cellColorMode === 'group'\">\n          Adjust cell color in the groups section below.\n        </small>\n        <div class=\"sc-row\" *ngIf=\"view.cellColorMode === 'gene' && ds.features\">\n          <span class=\"sc-lbl\">Gene</span>\n          <p-dropdown [options]=\"geneOptions\" optionLabel=\"label\" optionValue=\"value\"\n                      [ngModel]=\"view.cellColorGene\" (ngModelChange)=\"onCellColorGene($event)\"\n                      [filter]=\"true\" filterBy=\"label\" [resetFilterOnHide]=\"true\"\n                      (onFilter)=\"onGeneFilter($event.filter)\" (onShow)=\"ensureGeneList()\"\n                      [virtualScroll]=\"geneOptions.length > geneVirtualScrollFrom\"\n                      [virtualScrollItemSize]=\"30\" appendTo=\"body\"\n                      placeholder=\"Search genes\u2026\"></p-dropdown>\n        </div>\n        <div class=\"sc-row\" *ngIf=\"view.cellColorMode === 'single'\">\n          <span class=\"sc-lbl\">Color</span>\n          <input type=\"color\" class=\"sc-color-input\" [value]=\"view.cellSingleColor\"\n                 (change)=\"onCellSingleColor($any($event.target).value)\" />\n        </div>\n        <div *ngIf=\"view.cellColorMode === 'gene' || view.cellColorMode === 'transcriptDensity'\">\n          <div class=\"sc-colorbar\" [style.background]=\"colorBarCss || densityColorBarCss\"></div>\n        </div>\n\n        <ng-container *ngIf=\"groupOptions.length\">\n          <div class=\"sc-subhead\">Groups</div>\n          <div class=\"sc-row sc-row-picker\">\n            <p-dropdown [options]=\"groupOptions\" [group]=\"true\" optionLabel=\"label\" optionValue=\"value\"\n                        optionGroupLabel=\"label\" optionGroupChildren=\"items\"\n                        [ngModel]=\"activeGroupEntry\" (ngModelChange)=\"onGroupEntry($event)\"\n                        appendTo=\"body\" styleClass=\"sc-full\">\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 *ngIf=\"groupVariantOptions.length\" [options]=\"groupVariantOptions\"\n                        optionLabel=\"label\" optionValue=\"value\" styleClass=\"sc-variant\"\n                        [ngModel]=\"activeCellTypeColumn\" (ngModelChange)=\"onGroupVariant($event)\"\n                        appendTo=\"body\"></p-dropdown>\n            <button *ngIf=\"canImportGroups\" type=\"button\" class=\"sc-icon-btn\" [disabled]=\"groupImporting\"\n                    (click)=\"groupFile.click()\" title=\"Import cell groups (CSV of cell_id, group)\">\n              <i class=\"pi\" [class.pi-plus-circle]=\"!groupImporting\" [class.pi-spin]=\"groupImporting\"\n                 [class.pi-spinner]=\"groupImporting\"></i>\n            </button>\n            <input #groupFile type=\"file\" accept=\".csv,.tsv,.txt\" hidden\n                   (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 [binary]=\"true\" [ngModel]=\"allGroupsShown\"\n                          (onChange)=\"onAllGroupsShown($event.checked)\"></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 [binary]=\"true\" [ngModel]=\"isGroupShown(row.label)\"\n                            (onChange)=\"onGroupShown(row.label, $event.checked)\"></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\n        <div class=\"sc-subhead\">Visibility</div>\n        <span class=\"sc-lbl\">View cells as</span>\n        <p-selectButton [options]=\"cellDrawOptions\" optionLabel=\"label\" optionValue=\"value\"\n                        [ngModel]=\"view.cellDraw\" (ngModelChange)=\"onCellDraw($event)\"\n                        [allowEmpty]=\"false\" styleClass=\"sc-buttons\"></p-selectButton>\n        <ng-container *ngIf=\"view.cellDraw !== 'outline'\">\n          <span class=\"sc-lbl\">Cell fill opacity</span>\n          <div class=\"sc-row sc-row-number\">\n            <p-slider [ngModel]=\"view.cellOpacity\" [min]=\"0.05\" [max]=\"1\" [step]=\"0.05\"\n                      (onChange)=\"onCellOpacity($event.value)\"></p-slider>\n            <p-inputNumber [ngModel]=\"cellOpacityPercent\" (ngModelChange)=\"onCellOpacityPercent($event)\"\n                           [min]=\"5\" [max]=\"100\" [showButtons]=\"false\" inputStyleClass=\"sc-num\"></p-inputNumber>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Transcripts -->\n    <div class=\"sc-panel\" *ngIf=\"hasTranscripts && !is3d\" [class.open]=\"open.transcripts\">\n      <div class=\"sc-panel-head\" (click)=\"toggleSection('transcripts')\">\n        <p-checkbox [binary]=\"true\" [ngModel]=\"view.transcriptMode !== 'off'\" (click)=\"$event.stopPropagation()\"\n                    (onChange)=\"onTranscriptsOn($event.checked)\"></p-checkbox>\n        <span class=\"sc-panel-title\">Transcripts</span>\n        <i class=\"pi\" [class.pi-chevron-down]=\"open.transcripts\" [class.pi-chevron-right]=\"!open.transcripts\"></i>\n      </div>\n      <div class=\"sc-panel-body\" *ngIf=\"open.transcripts\">\n        <div class=\"sc-row sc-row-picker\">\n          <p-multiSelect inputId=\"sc-tx-genes\" [options]=\"geneOptions\"\n                         optionLabel=\"label\" optionValue=\"value\"\n                         [ngModel]=\"view.transcriptGenes\" (onChange)=\"onTranscriptGenes($event.value)\"\n                         [filter]=\"true\" filterBy=\"label\" [resetFilterOnHide]=\"true\"\n                         (onFilter)=\"onGeneFilter($event.filter)\" (onPanelShow)=\"ensureGeneList()\"\n                         [virtualScroll]=\"geneOptions.length > geneVirtualScrollFrom\"\n                         [virtualScrollItemSize]=\"30\" [showToggleAll]=\"false\"\n                         [emptyFilterMessage]=\"genesAreRemote ? 'No match \u2014 keep typing' : 'No match'\"\n                         [emptyMessage]=\"genesAreRemote ? 'Type to search genes' : 'No genes'\"\n                         appendTo=\"body\" placeholder=\"Search for genes to visualize\u2026\"\n                         [selectedItemsLabel]=\"'{0} genes selected'\" [maxSelectedLabels]=\"0\"\n                         styleClass=\"sc-full\"></p-multiSelect>\n          <button type=\"button\" class=\"sc-icon-btn\" *ngIf=\"canShowAllGenes\" (click)=\"onToggleAllGenes()\"\n                  [class.active]=\"view.transcriptAllGenes\"\n                  [title]=\"view.transcriptAllGenes ? 'Back to the selected genes' : 'Select all genes'\">\u00B1</button>\n          <button type=\"button\" class=\"sc-icon-btn\" (click)=\"geneMenuRef.toggle($event)\" title=\"More\">\n            <i class=\"pi pi-ellipsis-v\"></i>\n          </button>\n          <p-menu #geneMenuRef [model]=\"geneMenu\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n          <input #geneGroupFile type=\"file\" accept=\".csv,.tsv,.txt\" hidden\n                 (change)=\"onImportGeneGroups(geneGroupFile)\" />\n        </div>\n        <small class=\"sc-hint sc-error\" *ngIf=\"geneGroupError\">{{ geneGroupError }}</small>\n        <small class=\"sc-hint\" *ngIf=\"allGenesPreparing\">{{ allGenesPreparing }}</small>\n\n        <div class=\"sc-subhead\">Selected genes</div>\n        <div class=\"sc-gene-tree\">\n          <div class=\"sc-gene-row sc-gene-root\">\n            <button type=\"button\" class=\"sc-eye\"\n                    (click)=\"view.transcriptAllGenes ? onToggleAllGenes() : onGenesShown(view.transcriptGenes, !areGenesShown(view.transcriptGenes))\">\n              <i class=\"pi\" [class.pi-eye]=\"view.transcriptAllGenes || areGenesShown(view.transcriptGenes)\"\n                 [class.pi-eye-slash]=\"!view.transcriptAllGenes && !areGenesShown(view.transcriptGenes)\"></i>\n            </button>\n            <span class=\"sc-group-label\">Genes</span>\n            <span class=\"sc-count\">({{ (view.transcriptAllGenes ? geneTotal : view.transcriptGenes.length) | number }}/{{ geneTotal | number }})</span>\n            <button type=\"button\" class=\"sc-icon-btn\" (click)=\"geneTreeOpen = !geneTreeOpen\"\n                    *ngIf=\"!view.transcriptAllGenes && view.transcriptGenes.length\">\n              <i class=\"pi\" [class.pi-chevron-down]=\"geneTreeOpen\" [class.pi-chevron-right]=\"!geneTreeOpen\"></i>\n            </button>\n          </div>\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, !areGenesShown(node.genes))\">\n                  <i class=\"pi\" [class.pi-eye]=\"areGenesShown(node.genes)\" [class.pi-eye-slash]=\"!areGenesShown(node.genes)\"></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 class=\"pi\" [class.pi-chevron-down]=\"!collapsedGeneGroups.has(node.name)\"\n                     [class.pi-chevron-right]=\"collapsedGeneGroups.has(node.name)\"></i>\n                </button>\n              </div>\n              <ng-container *ngIf=\"!node.name || !collapsedGeneGroups.has(node.name)\">\n                <div class=\"sc-gene-row sc-gene-leaf\" [class.nested]=\"!!node.name\"\n                     *ngFor=\"let gene of node.genes; trackBy: trackByLabelString\">\n                  <button type=\"button\" class=\"sc-eye\" (click)=\"onGenesShown([gene], !isGeneShown(gene))\">\n                    <i class=\"pi\" [class.pi-eye]=\"isGeneShown(gene)\" [class.pi-eye-slash]=\"!isGeneShown(gene)\"></i>\n                  </button>\n                  <label class=\"sc-dot sc-dot-pick\" [style.background]=\"geneColorOf(gene)\" title=\"Colour\">\n                    <input type=\"color\" [value]=\"geneColorOf(gene)\" (change)=\"onGeneColor(gene, $any($event.target).value)\" />\n                  </label>\n                  <span class=\"sc-group-label\">{{ gene }}</span>\n                  <p-dropdown *ngIf=\"view.transcriptMode === 'glyphs'\"\n                              [options]=\"glyphOptions\" optionLabel=\"label\" optionValue=\"value\"\n                              [ngModel]=\"glyphOf(gene, view.transcriptGenes.indexOf(gene))\"\n                              (ngModelChange)=\"onGlyph(gene, $event)\"\n                              appendTo=\"body\" styleClass=\"sc-glyph-pick\">\n                      <ng-template let-opt pTemplate=\"item\">\n                        <span class=\"sc-glyph-option\">\n                          <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\"><polygon [attr.points]=\"opt.points\"></polygon></svg>\n                          {{ opt.label }}\n                        </span>\n                      </ng-template>\n                      <ng-template let-opt pTemplate=\"selectedItem\">\n                        <span class=\"sc-glyph-option\">\n                          <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\"><polygon [attr.points]=\"opt?.points\"></polygon></svg>\n                        </span>\n                      </ng-template>\n                  </p-dropdown>\n                </div>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n          <div class=\"sc-gene-footer\">\n            {{ (view.transcriptAllGenes ? geneTotal : view.transcriptGenes.length) | number }}/{{ geneTotal | number }} genes selected\n          </div>\n        </div>\n\n        <div class=\"sc-subhead\">Transcript controls</div>\n        <span class=\"sc-lbl\">View transcripts as</span>\n        <p-selectButton [options]=\"transcriptModeOptions\" optionLabel=\"label\" optionValue=\"value\"\n                        [ngModel]=\"view.transcriptMode === 'off' ? null : view.transcriptMode\"\n                        (ngModelChange)=\"onTranscriptMode($event)\"\n                        [allowEmpty]=\"false\" styleClass=\"sc-buttons\"></p-selectButton>\n\n        <ng-container *ngIf=\"estimate\">\n          <div class=\"sc-row\">\n            <span class=\"sc-lbl\" pTooltip=\"Transcripts of the visible genes estimated to be in view, against the most markers drawn at once\"\n                  tooltipPosition=\"top\">Estimated Transcript Points</span>\n            <button type=\"button\" class=\"sc-small-btn\" (click)=\"editingMax = !editingMax\">Edit Max</button>\n          </div>\n          <div class=\"sc-meter\"><div class=\"sc-meter-fill\" [class.over]=\"estimateOverMax\" [style.width.%]=\"estimatePercent\"></div></div>\n          <div class=\"sc-meter-ends\">\n            <span>{{ estimate.points | number }} points</span>\n            <span>{{ estimate.max | number }} max{{ estimateOverMax ? ' reached' : '' }}</span>\n          </div>\n          <div class=\"sc-row\" *ngIf=\"editingMax\">\n            <span class=\"sc-lbl\">Max markers</span>\n            <p-dropdown [options]=\"budgetOptions\" optionLabel=\"label\" optionValue=\"value\"\n                        [ngModel]=\"view.transcriptBudget\" (ngModelChange)=\"onTranscriptBudget($event)\"\n                        appendTo=\"body\"></p-dropdown>\n          </div>\n          <small class=\"sc-hint\" *ngIf=\"estimateOverMax && view.transcriptMode !== 'density'\">\n            Max points reached: transcripts are grouped by area, circles sized by how many they hold.\n            Zoom in or select fewer genes to see individual points.\n          </small>\n        </ng-container>\n\n        <ng-container *ngIf=\"view.transcriptMode === 'circles' || view.transcriptMode === 'glyphs'\">\n          <div class=\"sc-row\">\n            <span class=\"sc-lbl\">Colour by</span>\n            <p-selectButton [options]=\"transcriptColorOptions\" optionLabel=\"label\" optionValue=\"value\"\n                            [ngModel]=\"view.transcriptColorBy\" (ngModelChange)=\"onTranscriptColorBy($event)\"\n                            [allowEmpty]=\"false\" styleClass=\"sc-buttons\"></p-selectButton>\n          </div>\n          <small class=\"sc-hint\" *ngIf=\"view.transcriptAllGenes && view.transcriptColorBy === 'gene' && estimateOverMax\">\n            Grouped markers mix genes, so they are coloured by cell type until you zoom in to individual transcripts.\n          </small>\n          <div class=\"sc-row\" *ngIf=\"view.transcriptAllGenes && view.transcriptMode === 'glyphs'\">\n            <span class=\"sc-lbl\">Icon</span>\n            <p-dropdown [options]=\"glyphOptions\" optionLabel=\"label\" optionValue=\"value\"\n                        [ngModel]=\"glyphOf('*', 0)\" (ngModelChange)=\"onGlyph('*', $event)\"\n                        appendTo=\"body\" styleClass=\"sc-glyph-pick\">\n              <ng-template let-opt pTemplate=\"item\">\n                        <span class=\"sc-glyph-option\">\n                          <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\"><polygon [attr.points]=\"opt.points\"></polygon></svg>\n                          {{ opt.label }}\n                        </span>\n                      </ng-template>\n                      <ng-template let-opt pTemplate=\"selectedItem\">\n                        <span class=\"sc-glyph-option\">\n                          <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\"><polygon [attr.points]=\"opt?.points\"></polygon></svg>\n                        </span>\n                      </ng-template>\n            </p-dropdown>\n          </div>\n          <div class=\"sc-row\">\n            <span class=\"sc-lbl\">Size</span>\n            <p-slider [ngModel]=\"view.transcriptScale\" [min]=\"0.5\" [max]=\"3\" [step]=\"0.25\"\n                      (onChange)=\"onTranscriptScale($event.value)\"></p-slider>\n            <span class=\"sc-val\">{{ view.transcriptScale }}\u00D7</span>\n          </div>\n          <div class=\"sc-row\">\n            <span class=\"sc-lbl\">Opacity</span>\n            <p-slider [ngModel]=\"view.transcriptOpacity\" [min]=\"0.1\" [max]=\"1\" [step]=\"0.05\"\n                      (onChange)=\"onTranscriptOpacity($event.value)\"></p-slider>\n            <span class=\"sc-val\">{{ view.transcriptOpacity }}</span>\n          </div>\n          <div class=\"sc-row\" *ngIf=\"!showingAllGenes\">\n            <p-checkbox [binary]=\"true\" [ngModel]=\"view.transcriptQuality === 'all'\" inputId=\"sc-tx-lowq\"\n                        (onChange)=\"onTranscriptQuality($event.checked)\"></p-checkbox>\n            <label class=\"sc-lbl\" for=\"sc-tx-lowq\">Include low-quality calls</label>\n          </div>\n        </ng-container>\n\n        <ng-container *ngIf=\"view.transcriptMode === 'density'\">\n          <span class=\"sc-lbl\">Density map opacity</span>\n          <div class=\"sc-row sc-row-number\">\n            <p-slider [ngModel]=\"view.densityOpacity\" [min]=\"0.05\" [max]=\"1\" [step]=\"0.05\"\n                      (onChange)=\"onDensityOpacity($event.value)\"></p-slider>\n            <p-inputNumber [ngModel]=\"densityOpacityPercent\" (ngModelChange)=\"onDensityOpacityPercent($event)\"\n                           [min]=\"5\" [max]=\"100\" inputStyleClass=\"sc-num\"></p-inputNumber>\n          </div>\n          <span class=\"sc-lbl\" pTooltip=\"Edge of each density bin\" tooltipPosition=\"top\">Density map bin size</span>\n          <p-slider [ngModel]=\"densityBinIndex\" [min]=\"0\" [max]=\"3\" [step]=\"1\"\n                    (onChange)=\"onDensityBinIndex($event.value)\" styleClass=\"sc-bin-slider\"></p-slider>\n          <div class=\"sc-ticks\">\n            <span *ngFor=\"let b of densityBins\">{{ b }}\u00D7{{ b }}\u00B5m</span>\n          </div>\n          <span class=\"sc-lbl\" pTooltip=\"Transcripts per \u00B5m\u00B2 at which the colour scale starts and saturates\"\n                tooltipPosition=\"top\">Density map scale threshold</span>\n          <div class=\"sc-row sc-row-range\">\n            <p-inputNumber [ngModel]=\"densityWindow[0]\" (ngModelChange)=\"onDensityRangeEnd(0, $event)\"\n                           mode=\"decimal\" [minFractionDigits]=\"3\" [maxFractionDigits]=\"3\"\n                           inputStyleClass=\"sc-num\"></p-inputNumber>\n            <p-slider [ngModel]=\"densityWindow\" [range]=\"true\" [min]=\"0\" [max]=\"densitySliderMax\"\n                      [step]=\"densityStep\" (onChange)=\"onDensityRange($event.values)\"></p-slider>\n            <p-inputNumber [ngModel]=\"densityWindow[1]\" (ngModelChange)=\"onDensityRangeEnd(1, $event)\"\n                           mode=\"decimal\" [minFractionDigits]=\"3\" [maxFractionDigits]=\"3\"\n                           inputStyleClass=\"sc-num\"></p-inputNumber>\n          </div>\n          <div class=\"sc-row\">\n            <small class=\"sc-hint\">{{ view.densityRange ? 'Set by hand.' : 'Derived from the data.' }}</small>\n            <button type=\"button\" class=\"sc-small-btn\" *ngIf=\"view.densityRange\" (click)=\"onDensityAuto()\">Auto</button>\n          </div>\n          <span class=\"sc-lbl\">Density map bin coloring</span>\n          <div class=\"sc-row sc-row-picker\">\n            <div class=\"sc-colorbar sc-full\" [style.background]=\"densityColorBarCss\"></div>\n            <p-treeSelect [options]=\"colormapOptions\" [ngModel]=\"selectedDensityColormapNode\"\n                          selectionMode=\"single\" [showClear]=\"true\" placeholder=\"Inferno\"\n                          [scrollHeight]=\"'260px'\" appendTo=\"body\" styleClass=\"sc-palette\"\n                          (onNodeSelect)=\"onDensityColormap($event.node)\" (onClear)=\"onDensityColormap(null)\">\n              <ng-template let-node pTemplate=\"default\">\n                <span class=\"sc-cmap-option\">\n                  <img *ngIf=\"!node.children && node.data?.src\" [src]=\"node.data.src\" class=\"sc-cmap-swatch\" alt=\"\" />\n                  <span>{{ node.label }}</span>\n                </span>\n              </ng-template>\n            </p-treeSelect>\n          </div>\n          <div class=\"sc-colorbar-ends\"><span>{{ densityWindow[0] | number: '1.0-3' }}</span><span>{{ densityWindow[1] | number: '1.0-3' }}</span></div>\n        </ng-container>\n      </div>\n    </div>\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 [binary]=\"true\" [ngModel]=\"view.showAnnotations !== false\" (click)=\"$event.stopPropagation()\"\n                    (onChange)=\"onShowAnnotations($event.checked)\" pTooltip=\"Show the drawn regions\"\n                    tooltipPosition=\"top\"></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 label=\"Select from ROIs\" icon=\"pi pi-object-group\" size=\"small\"\n                    [outlined]=\"true\" (onClick)=\"selectFromRegions()\"\n                    pTooltip=\"Select every observation inside the drawn regions\"\n                    tooltipPosition=\"top\"></p-button>\n          <p-button *ngIf=\"hasSelection\" label=\"Clear\" size=\"small\" [text]=\"true\"\n                    (onClick)=\"clearSelection()\"></p-button>\n        </div>\n        <small class=\"sc-hint\" *ngIf=\"hasSelection\">\n          {{ selection.count | number }} of {{ ds.observations.count | number }} selected \u2014\n          the rest are muted.\n        </small>\n        <small class=\"sc-hint\" *ngIf=\"selectionMissed\">\n          No observations fell inside the drawn regions.\n        </small>\n        <small class=\"sc-hint\" *ngIf=\"is3d\">\n          In 3D a region cuts through the cloud's full depth. Orbit and draw again\n          to cut from another angle.\n        </small>\n      </div>\n    </div>\n\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.observations\">\n      <div class=\"sc-panel-head\" (click)=\"toggleSection('observations')\">\n        <p-checkbox [binary]=\"true\" [ngModel]=\"view.showPoints\" (click)=\"$event.stopPropagation()\"\n                    (onChange)=\"onShowPoints($event.checked)\"></p-checkbox>\n        <span class=\"sc-panel-title\">Observations</span>\n        <i class=\"pi\" [class.pi-chevron-down]=\"open.observations\" [class.pi-chevron-right]=\"!open.observations\"></i>\n      </div>\n      <div class=\"sc-panel-body\" *ngIf=\"open.observations\">\n        <small class=\"sc-hint\" *ngIf=\"hasCells && !is3d\">\n          One circle per cell. With cell outlines on, circles are only drawn where cells\n          are too small on 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 inputId=\"sc-column\" [options]=\"columnOptions\"\n                  optionLabel=\"label\" optionValue=\"value\"\n                  [ngModel]=\"selectedColumn\" (ngModelChange)=\"onColumn($event)\"\n                  placeholder=\"None (flat colour)\" appendTo=\"body\"\n                  styleClass=\"sc-full\"></p-dropdown>\n    </div>\n\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 inputId=\"sc-gene\" [options]=\"geneOptions\"\n                  optionLabel=\"label\" optionValue=\"value\"\n                  [ngModel]=\"selectedGene\" (ngModelChange)=\"onGene($event)\"\n                  [filter]=\"true\" filterBy=\"label\" [resetFilterOnHide]=\"true\"\n                  (onFilter)=\"onGeneFilter($event.filter)\" (onShow)=\"ensureGeneList()\"\n                  [showClear]=\"true\"\n                  [virtualScroll]=\"geneOptions.length > geneVirtualScrollFrom\"\n                  [virtualScrollItemSize]=\"30\"\n                  [emptyFilterMessage]=\"genesAreRemote ? 'No match \u2014 keep typing' : 'No match'\"\n                  [emptyMessage]=\"genesAreRemote ? 'Type to search genes' : 'No genes'\"\n                  appendTo=\"body\"\n                  placeholder=\"Search {{ ds.features.count | number }} genes\u2026\"\n                  styleClass=\"sc-full\"></p-dropdown>\n      <small class=\"sc-hint\" *ngIf=\"geneSearchFailed\">Gene lookup failed.</small>\n    </div>\n\n    <!-- Key: categorical legend or a continuous colour bar, built from the same\n         functions the renderer uses so it cannot disagree with the canvas. -->\n    <div class=\"sc-section sc-key\" *ngIf=\"view.colorBy\">\n      <span class=\"sc-lbl\">{{ colorByLabel }}</span>\n      <!-- Derived columns say so, so they are not mistaken for measured data. -->\n      <small class=\"sc-hint\" *ngIf=\"activeDescription\">{{ activeDescription }}</small>\n\n      <!-- Legend rows are buttons: clicking one selects that category, clicking\n           it again clears \u2014 so a click is always reversible. -->\n      <ul class=\"sc-legend\" *ngIf=\"isCategorical\">\n        <li *ngFor=\"let entry of legend; index as i\">\n          <button type=\"button\" class=\"sc-legend-btn\"\n                  [class.selected]=\"selectedCategory === i\"\n                  (click)=\"selectCategory(i)\"\n                  [title]=\"'Select ' + entry.label\">\n            <span class=\"sc-swatch\" [style.background]=\"entry.color\"></span>\n            <span class=\"sc-legend-label\">{{ entry.label }}</span>\n          </button>\n        </li>\n      </ul>\n\n      <div *ngIf=\"isContinuous\">\n        <div class=\"sc-colorbar\" [style.background]=\"colorBarCss\"></div>\n        <div class=\"sc-colorbar-ends\">\n          <span>low</span>\n          <span class=\"sc-hint\">window from percentiles</span>\n          <span>high</span>\n        </div>\n        <!-- The gradient this bar and the map are drawn with. Sits under the bar\n             it controls, with the same swatch previews the image's colormap picker\n             uses: which gradient reads best is a visual judgement, so a list of\n             names would be the wrong control. Cleared = follow the image's. -->\n        <div class=\"sc-row\">\n          <span class=\"sc-lbl\">Colormap</span>\n          <p-treeSelect [options]=\"colormapOptions\" [ngModel]=\"selectedColormapNode\"\n                        selectionMode=\"single\" [showClear]=\"true\"\n                        placeholder=\"Match the image\" [scrollHeight]=\"'260px'\"\n                        appendTo=\"body\"\n                        pTooltip=\"Colour scale for gene and numeric values \u2014 the markers, the gene map and this bar. Clear it to follow the image's colormap\"\n                        tooltipPosition=\"top\"\n                        (onNodeSelect)=\"onContinuousColormap($event.node)\"\n                        (onClear)=\"onContinuousColormap(null)\">\n            <ng-template let-node pTemplate=\"default\">\n              <span class=\"sc-cmap-option\">\n                <img *ngIf=\"!node.children && node.data?.src\" [src]=\"node.data.src\"\n                     class=\"sc-cmap-swatch\" alt=\"\" />\n                <span>{{ node.label }}</span>\n              </span>\n            </ng-template>\n          </p-treeSelect>\n          <span class=\"sc-val\"></span>\n        </div>\n      </div>\n    </div>\n\n    <!-- Display -->\n    <div class=\"sc-section\">\n      <div class=\"sc-row\">\n        <span class=\"sc-lbl\">Point size</span>\n        <p-slider [ngModel]=\"view.pointScale\" [min]=\"0.25\" [max]=\"5\" [step]=\"0.25\"\n                  (onChange)=\"onPointScale($event.value)\"></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 [ngModel]=\"view.opacity\" [min]=\"0.1\" [max]=\"1\" [step]=\"0.05\"\n                  (onChange)=\"onOpacity($event.value)\"></p-slider>\n        <span class=\"sc-val\">{{ view.opacity }}</span>\n      </div>\n    </div>\n\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 [binary]=\"true\" [ngModel]=\"view.geneMap\"\n                    (onChange)=\"onGeneMap($event.checked)\"\n                    label=\"Gene map (expression field)\"\n                    [pTooltip]=\"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                    tooltipPosition=\"top\"></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 [binary]=\"true\" [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\"></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 [binary]=\"true\" [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\"></p-checkbox>\n      </div>\n      <div class=\"sc-row\"\n           *ngIf=\"view.geneMap && is3d && isSectioned && !view.geneMapVolume && geneMapOneSection\">\n        <span class=\"sc-lbl\">Map section</span>\n        <p-slider [ngModel]=\"view.geneMapSection\" [min]=\"0\" [max]=\"lastSection\" [step]=\"1\"\n                  (onChange)=\"onGeneMapSection($event.value)\"></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 [ngModel]=\"view.geneMapSmoothing\" [min]=\"0.5\" [max]=\"4\" [step]=\"0.5\"\n                  (onChange)=\"onGeneMapSmoothing($event.value)\"></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 [ngModel]=\"view.geneMapOpacity\" [min]=\"0.1\" [max]=\"1\" [step]=\"0.05\"\n                  (onChange)=\"onGeneMapOpacity($event.value)\"></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\n        for being crowded. Transparent where no cell was measured. Turn the cells'\n        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 [binary]=\"true\" [ngModel]=\"view.showVolume\"\n                    (onChange)=\"onShowVolume($event.checked)\"\n                    label=\"Reference volume\"\n                    pTooltip=\"The registered anatomy the observations sit in\"\n                    tooltipPosition=\"top\"></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 [ngModel]=\"view.volumeOpacity\" [min]=\"0.05\" [max]=\"1\" [step]=\"0.05\"\n                  (onChange)=\"onVolumeOpacity($event.value)\"></p-slider>\n        <span class=\"sc-val\">{{ view.volumeOpacity }}</span>\n      </div>\n      <div class=\"sc-row\">\n        <p-checkbox [binary]=\"true\" [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\"></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 [binary]=\"true\" [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\"></p-checkbox>\n      </div>\n      <div class=\"sc-row\" *ngIf=\"view.showPoints && isSectioned && oneSection\">\n        <span class=\"sc-lbl\">Section</span>\n        <p-slider [ngModel]=\"view.pointSection\" [min]=\"0\" [max]=\"lastSection\" [step]=\"1\"\n                  (onChange)=\"onPointSection($event.value)\"></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-hint\" *ngIf=\"exceedsCloudPalette\">\n        {{ legend?.length }} categories is past the {{ cloudPaletteLimit }} the 3D cloud's\n        colour LUT can keep apart, so the points draw flat for this column. The density\n        volumes below render it, and so does the 2D Spatial omics view.\n      </div>\n      <div class=\"sc-row\">\n        <p-checkbox [binary]=\"true\" [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\"></p-checkbox>\n      </div>\n      <div class=\"sc-row\" *ngIf=\"view.densityVolume\">\n        <span class=\"sc-lbl\">Smoothing</span>\n        <p-slider [ngModel]=\"view.densitySmoothing\" [min]=\"0.5\" [max]=\"4\" [step]=\"0.5\"\n                  (onChange)=\"onDensitySmoothing($event.value)\"></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 [binary]=\"true\" [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\"></p-checkbox>\n      </div>\n      <div class=\"sc-row\">\n        <span class=\"sc-lbl\">Clip outliers</span>\n        <p-dropdown [options]=\"clipOptions\" optionLabel=\"label\" optionValue=\"value\"\n                    [ngModel]=\"view.percentileClip\" (ngModelChange)=\"onClip($event)\"\n                    appendTo=\"body\"\n                    pTooltip=\"Percentile the contrast window is taken at\"\n                    tooltipPosition=\"top\"></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    <!-- 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 type=\"button\" class=\"sc-disclosure\" (click)=\"toggleCharts()\"\n              [attr.aria-expanded]=\"chartsOpen\" [attr.aria-controls]=\"chartsBodyId\">\n        <i class=\"pi\" [class.pi-chevron-right]=\"!chartsOpen\"\n           [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\n  </div>\n</p-dialog>\n", styles: ["@charset \"UTF-8\";: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,.sc-hint{font-size:.75rem;color:var(--text-color-secondary, #6c757d)}.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-key{padding:.5rem 0;border-top:1px solid var(--surface-border, #dee2e6);border-bottom:1px solid var(--surface-border, #dee2e6)}.sc-legend{list-style:none;margin:0;padding:0;max-height:11rem;overflow-y:auto;display:flex;flex-direction:column;gap:.2rem}.sc-legend li{display:flex}.sc-legend-btn{display:flex;align-items:center;gap:.45rem;width:100%;padding:.15rem .3rem;font:inherit;font-size:.8rem;text-align:left;background:none;border:1px solid transparent;border-radius:3px;cursor:pointer;color:inherit}.sc-legend-btn:hover{background:var(--surface-hover, rgba(0, 0, 0, .04))}.sc-legend-btn.selected{border-color:var(--primary-color, #3b82f6);background:var(--surface-hover, rgba(59, 130, 246, .08));font-weight:600}.sc-selection .sc-row{gap:.4rem}.sc-swatch{width:.85rem;height:.85rem;flex:0 0 auto;border-radius:2px;border:1px solid rgba(0,0,0,.2)}.sc-legend-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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-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)}.sc-legend-static{cursor:default}.sc-tx-gene{display:flex;align-items:center;gap:.5rem}.sc-tx-gene .sc-legend-label{flex:1}:host ::ng-deep .sc-glyph-pick .p-dropdown-label{padding:.2rem .4rem}.sc-glyph-option{display:inline-flex;align-items:center;gap:.4rem}.sc-glyph-svg{width:1rem;height:1rem;fill:currentColor}:host ::ng-deep .sc-row-buttons .p-selectbutton .p-button{padding:.35rem .6rem;font-size:.85rem}:host ::ng-deep .sc-row-buttons .p-selectbutton{display:flex;flex-wrap:nowrap}.sc-row-wide .sc-lbl{flex:0 0 auto}.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-gene-group,.sc-gene-leaf{padding-left:1rem}.sc-gene-leaf.nested{padding-left:2rem}.sc-count{flex:0 0 auto;font-size:.78rem;color:var(--text-color-secondary, #6c757d)}.sc-dot{flex:0 0 auto;width:.7rem;height:.7rem;border-radius:50%;border:1px solid rgba(0,0,0,.2)}.sc-dot-pick{position:relative;cursor:pointer}.sc-dot-pick input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}.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-gene-footer{text-align:right;font-size:.78rem;padding:.2rem 0;color:var(--text-color-secondary, #6c757d)}.sc-color-input{width:2.5rem;height:1.8rem;border:1px solid var(--surface-border, #ced4da);border-radius:4px;padding:0;background:none}.sc-meter{height:.45rem;border-radius:3px;background:var(--surface-200, #e9ecef);overflow:hidden}.sc-meter-fill{height:100%;background:var(--primary-color, #2196f3)}.sc-meter-fill.over{background:var(--orange-500, #f59e0b)}.sc-meter-ends,.sc-ticks{display:flex;justify-content:space-between;font-size:.72rem;font-weight:600;color:var(--text-color-secondary, #6c757d)}.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-error{color:var(--red-600, #c62828)}\n"] }]
+            args: [{ selector: 'spatial-controls', template: "<p-dialog header=\"Spatial omics\"\n          [visible]=\"visible\" (visibleChange)=\"onVisibleChange($event)\"\n          [modal]=\"false\" [resizable]=\"true\" [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\">\n    No dataset is loaded.\n  </div>\n\n  <div class=\"sc-body\" *ngIf=\"controls && dataset as ds\">\n\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 [binary]=\"true\" [ngModel]=\"view.showImage\" (click)=\"$event.stopPropagation()\"\n                    (onChange)=\"onShowImage($event.checked)\"></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\">\n          Channels, colours and contrast are in the Channels &amp; Histogram dialog.\n        </small>\n      </div>\n    </div>\n\n    <!-- Cells -->\n    <div class=\"sc-panel\" *ngIf=\"hasCells && !is3d\" [class.open]=\"open.cells\">\n      <div class=\"sc-panel-head\" (click)=\"toggleSection('cells')\">\n        <p-checkbox [binary]=\"true\" [ngModel]=\"cellsOn\" (click)=\"$event.stopPropagation()\"\n                    (onChange)=\"onShowCells($event.checked)\"></p-checkbox>\n        <span class=\"sc-panel-title\">Cells</span>\n        <i class=\"pi\" [class.pi-chevron-down]=\"open.cells\" [class.pi-chevron-right]=\"!open.cells\"></i>\n      </div>\n      <div class=\"sc-panel-body\" *ngIf=\"open.cells\">\n        <ng-container *ngIf=\"cellSetOptions.length > 1\">\n          <div class=\"sc-subhead\">Boundaries</div>\n          <p-selectButton [options]=\"cellSetOptions\" optionLabel=\"label\" optionValue=\"value\"\n                          [ngModel]=\"activeCellSet\" (ngModelChange)=\"onCellSet($event)\"\n                          [allowEmpty]=\"false\" styleClass=\"sc-buttons\"></p-selectButton>\n        </ng-container>\n\n        <div class=\"sc-subhead\">Coloring</div>\n        <div class=\"sc-row\">\n          <span class=\"sc-lbl\">Cell Color</span>\n          <p-dropdown [options]=\"cellColorOptions\" optionLabel=\"label\" optionValue=\"value\"\n                      [ngModel]=\"view.cellColorMode\" (ngModelChange)=\"onCellColorMode($event)\"\n                      appendTo=\"body\"></p-dropdown>\n        </div>\n        <small class=\"sc-hint\" *ngIf=\"view.cellColorMode === 'group'\">\n          Adjust cell color in the groups section below.\n        </small>\n        <div class=\"sc-row\" *ngIf=\"view.cellColorMode === 'gene' && ds.features\">\n          <span class=\"sc-lbl\">Gene</span>\n          <p-dropdown [options]=\"geneOptions\" optionLabel=\"label\" optionValue=\"value\"\n                      [ngModel]=\"view.cellColorGene\" (ngModelChange)=\"onCellColorGene($event)\"\n                      [filter]=\"true\" filterBy=\"label\" [resetFilterOnHide]=\"true\"\n                      (onFilter)=\"onGeneFilter($event.filter)\" (onShow)=\"ensureGeneList()\"\n                      [virtualScroll]=\"geneOptions.length > geneVirtualScrollFrom\"\n                      [virtualScrollItemSize]=\"30\" appendTo=\"body\"\n                      placeholder=\"Search genes\u2026\"></p-dropdown>\n        </div>\n        <div class=\"sc-row\" *ngIf=\"view.cellColorMode === 'single'\">\n          <span class=\"sc-lbl\">Color</span>\n          <input type=\"color\" class=\"sc-color-input\" [value]=\"view.cellSingleColor\"\n                 (change)=\"onCellSingleColor($any($event.target).value)\" />\n        </div>\n        <div *ngIf=\"view.cellColorMode === 'gene' || view.cellColorMode === 'transcriptDensity'\">\n          <div class=\"sc-colorbar\" [style.background]=\"colorBarCss || densityColorBarCss\"></div>\n        </div>\n\n        <ng-container *ngIf=\"groupOptions.length\">\n          <div class=\"sc-subhead\">Groups</div>\n          <div class=\"sc-row sc-row-picker\">\n            <p-dropdown [options]=\"groupOptions\" [group]=\"true\" optionLabel=\"label\" optionValue=\"value\"\n                        optionGroupLabel=\"label\" optionGroupChildren=\"items\"\n                        [ngModel]=\"activeGroupEntry\" (ngModelChange)=\"onGroupEntry($event)\"\n                        appendTo=\"body\" styleClass=\"sc-full\">\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 *ngIf=\"groupVariantOptions.length\" [options]=\"groupVariantOptions\"\n                        optionLabel=\"label\" optionValue=\"value\" styleClass=\"sc-variant\"\n                        [ngModel]=\"activeCellTypeColumn\" (ngModelChange)=\"onGroupVariant($event)\"\n                        appendTo=\"body\"></p-dropdown>\n            <button *ngIf=\"canImportGroups\" type=\"button\" class=\"sc-icon-btn\" [disabled]=\"groupImporting\"\n                    (click)=\"groupFile.click()\" title=\"Import cell groups (CSV of cell_id, group)\">\n              <i class=\"pi\" [class.pi-plus-circle]=\"!groupImporting\" [class.pi-spin]=\"groupImporting\"\n                 [class.pi-spinner]=\"groupImporting\"></i>\n            </button>\n            <input #groupFile type=\"file\" accept=\".csv,.tsv,.txt\" hidden\n                   (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 [binary]=\"true\" [ngModel]=\"allGroupsShown\"\n                          (onChange)=\"onAllGroupsShown($event.checked)\"></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 [binary]=\"true\" [ngModel]=\"isGroupShown(row.label)\"\n                            (onChange)=\"onGroupShown(row.label, $event.checked)\"></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\n        <div class=\"sc-subhead\">Visibility</div>\n        <span class=\"sc-lbl\">View cells as</span>\n        <p-selectButton [options]=\"cellDrawOptions\" optionLabel=\"label\" optionValue=\"value\"\n                        [ngModel]=\"view.cellDraw\" (ngModelChange)=\"onCellDraw($event)\"\n                        [allowEmpty]=\"false\" styleClass=\"sc-buttons\"></p-selectButton>\n        <ng-container *ngIf=\"view.cellDraw !== 'outline'\">\n          <span class=\"sc-lbl\">Cell fill opacity</span>\n          <div class=\"sc-row sc-row-number\">\n            <p-slider [ngModel]=\"view.cellOpacity\" [min]=\"0.05\" [max]=\"1\" [step]=\"0.05\"\n                      (onChange)=\"onCellOpacity($event.value)\"></p-slider>\n            <p-inputNumber [ngModel]=\"cellOpacityPercent\" (ngModelChange)=\"onCellOpacityPercent($event)\"\n                           [min]=\"5\" [max]=\"100\" [showButtons]=\"false\" inputStyleClass=\"sc-num\"></p-inputNumber>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Transcripts -->\n    <div class=\"sc-panel\" *ngIf=\"hasTranscripts && !is3d\" [class.open]=\"open.transcripts\">\n      <div class=\"sc-panel-head\" (click)=\"toggleSection('transcripts')\">\n        <p-checkbox [binary]=\"true\" [ngModel]=\"view.transcriptMode !== 'off'\" (click)=\"$event.stopPropagation()\"\n                    (onChange)=\"onTranscriptsOn($event.checked)\"></p-checkbox>\n        <span class=\"sc-panel-title\">Transcripts</span>\n        <i class=\"pi\" [class.pi-chevron-down]=\"open.transcripts\" [class.pi-chevron-right]=\"!open.transcripts\"></i>\n      </div>\n      <div class=\"sc-panel-body\" *ngIf=\"open.transcripts\">\n        <div class=\"sc-row sc-row-picker\">\n          <p-multiSelect inputId=\"sc-tx-genes\" [options]=\"geneOptions\"\n                         optionLabel=\"label\" optionValue=\"value\"\n                         [ngModel]=\"view.transcriptGenes\" (onChange)=\"onTranscriptGenes($event.value)\"\n                         [filter]=\"true\" filterBy=\"label\" [resetFilterOnHide]=\"true\"\n                         (onFilter)=\"onGeneFilter($event.filter)\" (onPanelShow)=\"ensureGeneList()\"\n                         [virtualScroll]=\"geneOptions.length > geneVirtualScrollFrom\"\n                         [virtualScrollItemSize]=\"30\" [showToggleAll]=\"false\"\n                         [emptyFilterMessage]=\"genesAreRemote ? 'No match \u2014 keep typing' : 'No match'\"\n                         [emptyMessage]=\"genesAreRemote ? 'Type to search genes' : 'No genes'\"\n                         appendTo=\"body\" placeholder=\"Search for genes to visualize\u2026\"\n                         [selectedItemsLabel]=\"'{0} genes selected'\" [maxSelectedLabels]=\"0\"\n                         styleClass=\"sc-full\"></p-multiSelect>\n          <button type=\"button\" class=\"sc-icon-btn\" *ngIf=\"canShowAllGenes\" (click)=\"onToggleAllGenes()\"\n                  [class.active]=\"view.transcriptAllGenes\"\n                  [title]=\"view.transcriptAllGenes ? 'Back to the selected genes' : 'Select all genes'\">\u00B1</button>\n          <button type=\"button\" class=\"sc-icon-btn\" (click)=\"geneMenuRef.toggle($event)\" title=\"More\">\n            <i class=\"pi pi-ellipsis-v\"></i>\n          </button>\n          <p-menu #geneMenuRef [model]=\"geneMenu\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n          <input #geneGroupFile type=\"file\" accept=\".csv,.tsv,.txt\" hidden\n                 (change)=\"onImportGeneGroups(geneGroupFile)\" />\n        </div>\n        <small class=\"sc-hint sc-error\" *ngIf=\"geneGroupError\">{{ geneGroupError }}</small>\n        <small class=\"sc-hint\" *ngIf=\"allGenesPreparing\">{{ allGenesPreparing }}</small>\n\n        <!-- Marker genes of each cluster, added as gene groups named after the clusters. -->\n        <div class=\"sc-markers\" *ngIf=\"markersOpen\">\n          <div class=\"sc-row\">\n            <span class=\"sc-lbl\">Clusters from</span>\n            <p-dropdown [options]=\"markerColumnOptions\" optionLabel=\"label\" optionValue=\"value\"\n                        [ngModel]=\"markerColumn\" (ngModelChange)=\"onMarkerColumn($event)\"\n                        appendTo=\"body\" [filter]=\"markerColumnOptions.length > 8\"></p-dropdown>\n          </div>\n          <div class=\"sc-row\">\n            <span class=\"sc-lbl\">Per cluster</span>\n            <p-dropdown [options]=\"markerPerGroupOptions\" optionLabel=\"label\" optionValue=\"value\"\n                        [(ngModel)]=\"markerPerGroup\" appendTo=\"body\"></p-dropdown>\n          </div>\n          <div class=\"sc-row\">\n            <span class=\"sc-lbl\">Clusters</span>\n            <p-multiSelect [options]=\"markerClusterOptions\" optionLabel=\"label\" optionValue=\"value\"\n                           [(ngModel)]=\"markerClusters\" appendTo=\"body\" [filter]=\"true\"\n                           selectedItemsLabel=\"{0} clusters\" [maxSelectedLabels]=\"2\"\n                           placeholder=\"Pick clusters\"></p-multiSelect>\n          </div>\n          <small class=\"sc-hint\" *ngIf=\"markerLoading\">\n            Finding marker genes\u2026 the first time for a grouping reads the whole expression matrix,\n            which can take a minute.\n          </small>\n          <small class=\"sc-hint sc-error\" *ngIf=\"markerError\">{{ markerError }}</small>\n          <div class=\"sc-row sc-markers-actions\">\n            <p-button label=\"Add marker genes\" icon=\"pi pi-sitemap\" size=\"small\"\n                      [loading]=\"markerLoading\" [disabled]=\"!markerClusters.length\"\n                      (onClick)=\"addMarkerGenes()\"></p-button>\n            <p-button label=\"Cancel\" size=\"small\" [text]=\"true\" [disabled]=\"markerLoading\"\n                      (onClick)=\"markersOpen = false\"></p-button>\n          </div>\n        </div>\n\n        <div class=\"sc-subhead\">Selected genes</div>\n        <div class=\"sc-gene-tree\">\n          <div class=\"sc-gene-row sc-gene-root\">\n            <button type=\"button\" class=\"sc-eye\"\n                    (click)=\"view.transcriptAllGenes ? onToggleAllGenes() : onGenesShown(view.transcriptGenes, !areGenesShown(view.transcriptGenes))\">\n              <i class=\"pi\" [class.pi-eye]=\"view.transcriptAllGenes || areGenesShown(view.transcriptGenes)\"\n                 [class.pi-eye-slash]=\"!view.transcriptAllGenes && !areGenesShown(view.transcriptGenes)\"></i>\n            </button>\n            <span class=\"sc-group-label\">Genes</span>\n            <span class=\"sc-count\">({{ (view.transcriptAllGenes ? geneTotal : view.transcriptGenes.length) | number }}/{{ geneTotal | number }})</span>\n            <button type=\"button\" class=\"sc-icon-btn\" (click)=\"geneTreeOpen = !geneTreeOpen\"\n                    *ngIf=\"!view.transcriptAllGenes && view.transcriptGenes.length\">\n              <i class=\"pi\" [class.pi-chevron-down]=\"geneTreeOpen\" [class.pi-chevron-right]=\"!geneTreeOpen\"></i>\n            </button>\n          </div>\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, !areGenesShown(node.genes))\">\n                  <i class=\"pi\" [class.pi-eye]=\"areGenesShown(node.genes)\" [class.pi-eye-slash]=\"!areGenesShown(node.genes)\"></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 class=\"pi\" [class.pi-chevron-down]=\"!collapsedGeneGroups.has(node.name)\"\n                     [class.pi-chevron-right]=\"collapsedGeneGroups.has(node.name)\"></i>\n                </button>\n              </div>\n              <ng-container *ngIf=\"!node.name || !collapsedGeneGroups.has(node.name)\">\n                <div class=\"sc-gene-row sc-gene-leaf\" [class.nested]=\"!!node.name\"\n                     *ngFor=\"let gene of node.genes; trackBy: trackByLabelString\">\n                  <button type=\"button\" class=\"sc-eye\" (click)=\"onGenesShown([gene], !isGeneShown(gene))\">\n                    <i class=\"pi\" [class.pi-eye]=\"isGeneShown(gene)\" [class.pi-eye-slash]=\"!isGeneShown(gene)\"></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 type=\"button\" class=\"sc-gene-icon\" [style.color]=\"geneSwatchOf(gene)\"\n                          [attr.aria-label]=\"'Icon and colour for ' + gene\" pTooltip=\"Icon and colour\"\n                          tooltipPosition=\"top\" (click)=\"openGeneStyle($event, gene, genePop)\">\n                    <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\">\n                      <polygon *ngIf=\"view.transcriptMode === 'glyphs'; else dotIcon\"\n                               [attr.points]=\"glyphPoints(glyphOf(gene, view.transcriptGenes.indexOf(gene)))\"></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 class=\"sc-gene-count\" *ngIf=\"geneCountOf(gene) as n; else zeroCount\"\n                        title=\"Transcripts in view\">{{ n | number }}</span>\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              <div class=\"sc-style-pop\" *ngIf=\"styleGene as gene\">\n                <div class=\"sc-style-title\">Transcript Icon</div>\n                <div class=\"sc-style-icons\" role=\"radiogroup\" [attr.aria-label]=\"'Icon for ' + gene\">\n                  <button type=\"button\" *ngFor=\"let opt of glyphOptions\" class=\"sc-style-icon\"\n                          role=\"radio\" [attr.aria-checked]=\"opt.value === styleGlyph\"\n                          [class.active]=\"opt.value === styleGlyph\" [title]=\"opt.label\"\n                          (click)=\"onGlyph(gene, opt.value)\">\n                    <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\"><polygon [attr.points]=\"opt.points\"></polygon></svg>\n                  </button>\n                </div>\n                <small class=\"sc-hint\" *ngIf=\"view.transcriptMode !== 'glyphs'\">\n                  Icons show when the transcript point style is Icons.\n                </small>\n                <div class=\"sc-style-title\">Transcript Color</div>\n                <div class=\"sc-style-color\">\n                  <label class=\"sc-style-swatch\" [style.background]=\"geneColorOf(gene)\" title=\"Pick a colour\">\n                    <input type=\"color\" [value]=\"geneColorOf(gene)\" (change)=\"onGeneColor(gene, $any($event.target).value)\" />\n                  </label>\n                  <input pInputText class=\"sc-style-hex\" [value]=\"geneColorOf(gene)\" maxlength=\"7\"\n                         [attr.aria-label]=\"'Hex colour for ' + gene\"\n                         (change)=\"onGeneHex(gene, $any($event.target).value)\"\n                         (keydown.enter)=\"onGeneHex(gene, $any($event.target).value)\" />\n                </div>\n                <div class=\"sc-style-title sc-style-sub\">Presets</div>\n                <div class=\"sc-style-presets\">\n                  <button type=\"button\" *ngFor=\"let c of colorPresets\" class=\"sc-style-preset\"\n                          [style.background]=\"c\" [class.active]=\"c === geneColorOf(gene).toLowerCase()\"\n                          [title]=\"c\" [attr.aria-label]=\"'Colour ' + c\" (click)=\"onGeneColor(gene, c)\"></button>\n                </div>\n                <p-button label=\"Reset to default\" icon=\"pi pi-refresh\" size=\"small\" [text]=\"true\"\n                          styleClass=\"sc-style-reset\" (onClick)=\"resetGeneStyle(gene)\"></p-button>\n              </div>\n            </ng-template>\n          </p-overlayPanel>\n          <div class=\"sc-gene-footer\">\n            {{ (view.transcriptAllGenes ? geneTotal : view.transcriptGenes.length) | number }}/{{ geneTotal | number }} genes selected\n          </div>\n        </div>\n\n        <div class=\"sc-subhead\">Transcript controls</div>\n        <span class=\"sc-lbl\">View transcripts as</span>\n        <p-selectButton [options]=\"transcriptModeOptions\" optionLabel=\"label\" optionValue=\"value\"\n                        [ngModel]=\"view.transcriptMode === 'off' ? null : view.transcriptMode\"\n                        (ngModelChange)=\"onTranscriptMode($event)\"\n                        [allowEmpty]=\"false\" styleClass=\"sc-buttons\"></p-selectButton>\n\n        <ng-container *ngIf=\"estimate\">\n          <div class=\"sc-row\">\n            <span class=\"sc-lbl\" pTooltip=\"Transcripts of the visible genes estimated to be in view, against the most markers drawn at once\"\n                  tooltipPosition=\"top\">Estimated Transcript Points</span>\n            <button type=\"button\" class=\"sc-small-btn\" (click)=\"editingMax = !editingMax\">Edit Max</button>\n          </div>\n          <div class=\"sc-meter\"><div class=\"sc-meter-fill\" [class.over]=\"estimateOverMax\" [style.width.%]=\"estimatePercent\"></div></div>\n          <div class=\"sc-meter-ends\">\n            <span>{{ estimate.points | number }} points</span>\n            <span>{{ estimate.max | number }} max{{ estimateOverMax ? ' reached' : '' }}</span>\n          </div>\n          <div class=\"sc-row\" *ngIf=\"editingMax\">\n            <span class=\"sc-lbl\">Max markers</span>\n            <p-dropdown [options]=\"budgetOptions\" optionLabel=\"label\" optionValue=\"value\"\n                        [ngModel]=\"view.transcriptBudget\" (ngModelChange)=\"onTranscriptBudget($event)\"\n                        appendTo=\"body\"></p-dropdown>\n          </div>\n          <small class=\"sc-hint\" *ngIf=\"estimateOverMax && view.transcriptMode !== 'density'\">\n            Max points reached: transcripts are grouped by area, circles sized by how many they hold.\n            Zoom in or select fewer genes to see individual points.\n          </small>\n        </ng-container>\n\n        <ng-container *ngIf=\"view.transcriptMode === 'circles' || view.transcriptMode === 'glyphs'\">\n          <div class=\"sc-row\">\n            <span class=\"sc-lbl\">Colour by</span>\n            <p-selectButton [options]=\"transcriptColorOptions\" optionLabel=\"label\" optionValue=\"value\"\n                            [ngModel]=\"view.transcriptColorBy\" (ngModelChange)=\"onTranscriptColorBy($event)\"\n                            [allowEmpty]=\"false\" styleClass=\"sc-buttons\"></p-selectButton>\n          </div>\n          <small class=\"sc-hint\" *ngIf=\"view.transcriptAllGenes && view.transcriptColorBy === 'gene' && estimateOverMax\">\n            Grouped markers mix genes, so they are coloured by cell type until you zoom in to individual transcripts.\n          </small>\n          <div class=\"sc-row\" *ngIf=\"view.transcriptAllGenes && view.transcriptMode === 'glyphs'\">\n            <span class=\"sc-lbl\">Icon</span>\n            <p-dropdown [options]=\"glyphOptions\" optionLabel=\"label\" optionValue=\"value\"\n                        [ngModel]=\"glyphOf('*', 0)\" (ngModelChange)=\"onGlyph('*', $event)\"\n                        appendTo=\"body\" styleClass=\"sc-glyph-pick\">\n              <ng-template let-opt pTemplate=\"item\">\n                        <span class=\"sc-glyph-option\">\n                          <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\"><polygon [attr.points]=\"opt.points\"></polygon></svg>\n                          {{ opt.label }}\n                        </span>\n                      </ng-template>\n                      <ng-template let-opt pTemplate=\"selectedItem\">\n                        <span class=\"sc-glyph-option\">\n                          <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\"><polygon [attr.points]=\"opt?.points\"></polygon></svg>\n                        </span>\n                      </ng-template>\n            </p-dropdown>\n          </div>\n          <div class=\"sc-row\">\n            <span class=\"sc-lbl\">Size</span>\n            <p-slider [ngModel]=\"view.transcriptScale\" [min]=\"0.5\" [max]=\"3\" [step]=\"0.25\"\n                      (onChange)=\"onTranscriptScale($event.value)\"></p-slider>\n            <span class=\"sc-val\">{{ view.transcriptScale }}\u00D7</span>\n          </div>\n          <div class=\"sc-row\">\n            <span class=\"sc-lbl\">Opacity</span>\n            <p-slider [ngModel]=\"view.transcriptOpacity\" [min]=\"0.1\" [max]=\"1\" [step]=\"0.05\"\n                      (onChange)=\"onTranscriptOpacity($event.value)\"></p-slider>\n            <span class=\"sc-val\">{{ view.transcriptOpacity }}</span>\n          </div>\n          <div class=\"sc-row\" *ngIf=\"!showingAllGenes\">\n            <p-checkbox [binary]=\"true\" [ngModel]=\"view.transcriptQuality === 'all'\" inputId=\"sc-tx-lowq\"\n                        (onChange)=\"onTranscriptQuality($event.checked)\"></p-checkbox>\n            <label class=\"sc-lbl\" for=\"sc-tx-lowq\">Include low-quality calls</label>\n          </div>\n        </ng-container>\n\n        <ng-container *ngIf=\"view.transcriptMode === 'density'\">\n          <span class=\"sc-lbl\">Density map opacity</span>\n          <div class=\"sc-row sc-row-number\">\n            <p-slider [ngModel]=\"view.densityOpacity\" [min]=\"0.05\" [max]=\"1\" [step]=\"0.05\"\n                      (onChange)=\"onDensityOpacity($event.value)\"></p-slider>\n            <p-inputNumber [ngModel]=\"densityOpacityPercent\" (ngModelChange)=\"onDensityOpacityPercent($event)\"\n                           [min]=\"5\" [max]=\"100\" inputStyleClass=\"sc-num\"></p-inputNumber>\n          </div>\n          <span class=\"sc-lbl\" pTooltip=\"Edge of each density bin\" tooltipPosition=\"top\">Density map bin size</span>\n          <p-slider [ngModel]=\"densityBinIndex\" [min]=\"0\" [max]=\"3\" [step]=\"1\"\n                    (onChange)=\"onDensityBinIndex($event.value)\" styleClass=\"sc-bin-slider\"></p-slider>\n          <div class=\"sc-ticks\">\n            <span *ngFor=\"let b of densityBins\">{{ b }}\u00D7{{ b }}\u00B5m</span>\n          </div>\n          <span class=\"sc-lbl\" pTooltip=\"Transcripts per \u00B5m\u00B2 at which the colour scale starts and saturates\"\n                tooltipPosition=\"top\">Density map scale threshold</span>\n          <div class=\"sc-row sc-row-range\">\n            <p-inputNumber [ngModel]=\"densityWindow[0]\" (ngModelChange)=\"onDensityRangeEnd(0, $event)\"\n                           mode=\"decimal\" [minFractionDigits]=\"3\" [maxFractionDigits]=\"3\"\n                           inputStyleClass=\"sc-num\"></p-inputNumber>\n            <p-slider [ngModel]=\"densityWindow\" [range]=\"true\" [min]=\"0\" [max]=\"densitySliderMax\"\n                      [step]=\"densityStep\" (onChange)=\"onDensityRange($event.values)\"></p-slider>\n            <p-inputNumber [ngModel]=\"densityWindow[1]\" (ngModelChange)=\"onDensityRangeEnd(1, $event)\"\n                           mode=\"decimal\" [minFractionDigits]=\"3\" [maxFractionDigits]=\"3\"\n                           inputStyleClass=\"sc-num\"></p-inputNumber>\n          </div>\n          <div class=\"sc-row\">\n            <small class=\"sc-hint\">{{ view.densityRange ? 'Set by hand.' : 'Derived from the data.' }}</small>\n            <button type=\"button\" class=\"sc-small-btn\" *ngIf=\"view.densityRange\" (click)=\"onDensityAuto()\">Auto</button>\n          </div>\n          <span class=\"sc-lbl\">Density map bin coloring</span>\n          <div class=\"sc-row sc-row-picker\">\n            <div class=\"sc-colorbar sc-full\" [style.background]=\"densityColorBarCss\"></div>\n            <p-treeSelect [options]=\"colormapOptions\" [ngModel]=\"selectedDensityColormapNode\"\n                          selectionMode=\"single\" [showClear]=\"true\" placeholder=\"Inferno\"\n                          [scrollHeight]=\"'260px'\" appendTo=\"body\" styleClass=\"sc-palette\"\n                          (onNodeSelect)=\"onDensityColormap($event.node)\" (onClear)=\"onDensityColormap(null)\">\n              <ng-template let-node pTemplate=\"default\">\n                <span class=\"sc-cmap-option\">\n                  <img *ngIf=\"!node.children && node.data?.src\" [src]=\"node.data.src\" class=\"sc-cmap-swatch\" alt=\"\" />\n                  <span>{{ node.label }}</span>\n                </span>\n              </ng-template>\n            </p-treeSelect>\n          </div>\n          <div class=\"sc-colorbar-ends\"><span>{{ densityWindow[0] | number: '1.0-3' }}</span><span>{{ densityWindow[1] | number: '1.0-3' }}</span></div>\n        </ng-container>\n      </div>\n    </div>\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 [binary]=\"true\" [ngModel]=\"view.showAnnotations !== false\" (click)=\"$event.stopPropagation()\"\n                    (onChange)=\"onShowAnnotations($event.checked)\" pTooltip=\"Show the drawn regions\"\n                    tooltipPosition=\"top\"></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 label=\"Select from ROIs\" icon=\"pi pi-object-group\" size=\"small\"\n                    [outlined]=\"true\" (onClick)=\"selectFromRegions()\"\n                    pTooltip=\"Select every observation inside the drawn regions\"\n                    tooltipPosition=\"top\"></p-button>\n          <p-button *ngIf=\"hasSelection\" label=\"Clear\" size=\"small\" [text]=\"true\"\n                    (onClick)=\"clearSelection()\"></p-button>\n        </div>\n        <small class=\"sc-hint\" *ngIf=\"hasSelection\">\n          {{ selection.count | number }} of {{ ds.observations.count | number }} selected \u2014\n          the rest are muted.\n        </small>\n        <small class=\"sc-hint\" *ngIf=\"selectionMissed\">\n          No observations fell inside the drawn regions.\n        </small>\n        <small class=\"sc-hint\" *ngIf=\"is3d\">\n          In 3D a region cuts through the cloud's full depth. Orbit and draw again\n          to cut from another angle.\n        </small>\n      </div>\n    </div>\n\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.observations\">\n      <div class=\"sc-panel-head\" (click)=\"toggleSection('observations')\">\n        <p-checkbox [binary]=\"true\" [ngModel]=\"view.showPoints\" (click)=\"$event.stopPropagation()\"\n                    (onChange)=\"onShowPoints($event.checked)\"></p-checkbox>\n        <span class=\"sc-panel-title\">Observations</span>\n        <i class=\"pi\" [class.pi-chevron-down]=\"open.observations\" [class.pi-chevron-right]=\"!open.observations\"></i>\n      </div>\n      <div class=\"sc-panel-body\" *ngIf=\"open.observations\">\n        <small class=\"sc-hint\" *ngIf=\"hasCells && !is3d\">\n          One circle per cell. With cell outlines on, circles are only drawn where cells\n          are too small on 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 inputId=\"sc-column\" [options]=\"columnOptions\"\n                  optionLabel=\"label\" optionValue=\"value\"\n                  [ngModel]=\"selectedColumn\" (ngModelChange)=\"onColumn($event)\"\n                  placeholder=\"None (flat colour)\" appendTo=\"body\"\n                  styleClass=\"sc-full\"></p-dropdown>\n    </div>\n\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 inputId=\"sc-gene\" [options]=\"geneOptions\"\n                  optionLabel=\"label\" optionValue=\"value\"\n                  [ngModel]=\"selectedGene\" (ngModelChange)=\"onGene($event)\"\n                  [filter]=\"true\" filterBy=\"label\" [resetFilterOnHide]=\"true\"\n                  (onFilter)=\"onGeneFilter($event.filter)\" (onShow)=\"ensureGeneList()\"\n                  [showClear]=\"true\"\n                  [virtualScroll]=\"geneOptions.length > geneVirtualScrollFrom\"\n                  [virtualScrollItemSize]=\"30\"\n                  [emptyFilterMessage]=\"genesAreRemote ? 'No match \u2014 keep typing' : 'No match'\"\n                  [emptyMessage]=\"genesAreRemote ? 'Type to search genes' : 'No genes'\"\n                  appendTo=\"body\"\n                  placeholder=\"Search {{ ds.features.count | number }} genes\u2026\"\n                  styleClass=\"sc-full\"></p-dropdown>\n      <small class=\"sc-hint\" *ngIf=\"geneSearchFailed\">Gene lookup failed.</small>\n    </div>\n\n    <!-- Key: categorical legend or a continuous colour bar, built from the same\n         functions the renderer uses so it cannot disagree with the canvas. -->\n    <div class=\"sc-section sc-key\" *ngIf=\"view.colorBy\">\n      <span class=\"sc-lbl\">{{ colorByLabel }}</span>\n      <!-- Derived columns say so, so they are not mistaken for measured data. -->\n      <small class=\"sc-hint\" *ngIf=\"activeDescription\">{{ activeDescription }}</small>\n\n      <!-- Legend rows are buttons: clicking one selects that category, clicking\n           it again clears \u2014 so a click is always reversible. -->\n      <ul class=\"sc-legend\" *ngIf=\"isCategorical\">\n        <li *ngFor=\"let entry of legend; index as i\">\n          <button type=\"button\" class=\"sc-legend-btn\"\n                  [class.selected]=\"selectedCategory === i\"\n                  (click)=\"selectCategory(i)\"\n                  [title]=\"'Select ' + entry.label\">\n            <span class=\"sc-swatch\" [style.background]=\"entry.color\"></span>\n            <span class=\"sc-legend-label\">{{ entry.label }}</span>\n          </button>\n        </li>\n      </ul>\n\n      <div *ngIf=\"isContinuous\">\n        <div class=\"sc-colorbar\" [style.background]=\"colorBarCss\"></div>\n        <div class=\"sc-colorbar-ends\">\n          <span>low</span>\n          <span class=\"sc-hint\">window from percentiles</span>\n          <span>high</span>\n        </div>\n        <!-- The gradient this bar and the map are drawn with. Sits under the bar\n             it controls, with the same swatch previews the image's colormap picker\n             uses: which gradient reads best is a visual judgement, so a list of\n             names would be the wrong control. Cleared = follow the image's. -->\n        <div class=\"sc-row\">\n          <span class=\"sc-lbl\">Colormap</span>\n          <p-treeSelect [options]=\"colormapOptions\" [ngModel]=\"selectedColormapNode\"\n                        selectionMode=\"single\" [showClear]=\"true\"\n                        placeholder=\"Match the image\" [scrollHeight]=\"'260px'\"\n                        appendTo=\"body\"\n                        pTooltip=\"Colour scale for gene and numeric values \u2014 the markers, the gene map and this bar. Clear it to follow the image's colormap\"\n                        tooltipPosition=\"top\"\n                        (onNodeSelect)=\"onContinuousColormap($event.node)\"\n                        (onClear)=\"onContinuousColormap(null)\">\n            <ng-template let-node pTemplate=\"default\">\n              <span class=\"sc-cmap-option\">\n                <img *ngIf=\"!node.children && node.data?.src\" [src]=\"node.data.src\"\n                     class=\"sc-cmap-swatch\" alt=\"\" />\n                <span>{{ node.label }}</span>\n              </span>\n            </ng-template>\n          </p-treeSelect>\n          <span class=\"sc-val\"></span>\n        </div>\n      </div>\n    </div>\n\n    <!-- Display -->\n    <div class=\"sc-section\">\n      <div class=\"sc-row\">\n        <span class=\"sc-lbl\">Point size</span>\n        <p-slider [ngModel]=\"view.pointScale\" [min]=\"0.25\" [max]=\"5\" [step]=\"0.25\"\n                  (onChange)=\"onPointScale($event.value)\"></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 [ngModel]=\"view.opacity\" [min]=\"0.1\" [max]=\"1\" [step]=\"0.05\"\n                  (onChange)=\"onOpacity($event.value)\"></p-slider>\n        <span class=\"sc-val\">{{ view.opacity }}</span>\n      </div>\n    </div>\n\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 [binary]=\"true\" [ngModel]=\"view.geneMap\"\n                    (onChange)=\"onGeneMap($event.checked)\"\n                    label=\"Gene map (expression field)\"\n                    [pTooltip]=\"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                    tooltipPosition=\"top\"></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 [binary]=\"true\" [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\"></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 [binary]=\"true\" [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\"></p-checkbox>\n      </div>\n      <div class=\"sc-row\"\n           *ngIf=\"view.geneMap && is3d && isSectioned && !view.geneMapVolume && geneMapOneSection\">\n        <span class=\"sc-lbl\">Map section</span>\n        <p-slider [ngModel]=\"view.geneMapSection\" [min]=\"0\" [max]=\"lastSection\" [step]=\"1\"\n                  (onChange)=\"onGeneMapSection($event.value)\"></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 [ngModel]=\"view.geneMapSmoothing\" [min]=\"0.5\" [max]=\"4\" [step]=\"0.5\"\n                  (onChange)=\"onGeneMapSmoothing($event.value)\"></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 [ngModel]=\"view.geneMapOpacity\" [min]=\"0.1\" [max]=\"1\" [step]=\"0.05\"\n                  (onChange)=\"onGeneMapOpacity($event.value)\"></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\n        for being crowded. Transparent where no cell was measured. Turn the cells'\n        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 [binary]=\"true\" [ngModel]=\"view.showVolume\"\n                    (onChange)=\"onShowVolume($event.checked)\"\n                    label=\"Reference volume\"\n                    pTooltip=\"The registered anatomy the observations sit in\"\n                    tooltipPosition=\"top\"></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 [ngModel]=\"view.volumeOpacity\" [min]=\"0.05\" [max]=\"1\" [step]=\"0.05\"\n                  (onChange)=\"onVolumeOpacity($event.value)\"></p-slider>\n        <span class=\"sc-val\">{{ view.volumeOpacity }}</span>\n      </div>\n      <div class=\"sc-row\">\n        <p-checkbox [binary]=\"true\" [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\"></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 [binary]=\"true\" [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\"></p-checkbox>\n      </div>\n      <div class=\"sc-row\" *ngIf=\"view.showPoints && isSectioned && oneSection\">\n        <span class=\"sc-lbl\">Section</span>\n        <p-slider [ngModel]=\"view.pointSection\" [min]=\"0\" [max]=\"lastSection\" [step]=\"1\"\n                  (onChange)=\"onPointSection($event.value)\"></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-hint\" *ngIf=\"exceedsCloudPalette\">\n        {{ legend?.length }} categories is past the {{ cloudPaletteLimit }} the 3D cloud's\n        colour LUT can keep apart, so the points draw flat for this column. The density\n        volumes below render it, and so does the 2D Spatial omics view.\n      </div>\n      <div class=\"sc-row\">\n        <p-checkbox [binary]=\"true\" [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\"></p-checkbox>\n      </div>\n      <div class=\"sc-row\" *ngIf=\"view.densityVolume\">\n        <span class=\"sc-lbl\">Smoothing</span>\n        <p-slider [ngModel]=\"view.densitySmoothing\" [min]=\"0.5\" [max]=\"4\" [step]=\"0.5\"\n                  (onChange)=\"onDensitySmoothing($event.value)\"></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 [binary]=\"true\" [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\"></p-checkbox>\n      </div>\n      <div class=\"sc-row\">\n        <span class=\"sc-lbl\">Clip outliers</span>\n        <p-dropdown [options]=\"clipOptions\" optionLabel=\"label\" optionValue=\"value\"\n                    [ngModel]=\"view.percentileClip\" (ngModelChange)=\"onClip($event)\"\n                    appendTo=\"body\"\n                    pTooltip=\"Percentile the contrast window is taken at\"\n                    tooltipPosition=\"top\"></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    <!-- 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 type=\"button\" class=\"sc-disclosure\" (click)=\"toggleCharts()\"\n              [attr.aria-expanded]=\"chartsOpen\" [attr.aria-controls]=\"chartsBodyId\">\n        <i class=\"pi\" [class.pi-chevron-right]=\"!chartsOpen\"\n           [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\n  </div>\n</p-dialog>\n", styles: ["@charset \"UTF-8\";: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,.sc-hint{font-size:.75rem;color:var(--text-color-secondary, #6c757d)}.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-key{padding:.5rem 0;border-top:1px solid var(--surface-border, #dee2e6);border-bottom:1px solid var(--surface-border, #dee2e6)}.sc-legend{list-style:none;margin:0;padding:0;max-height:11rem;overflow-y:auto;display:flex;flex-direction:column;gap:.2rem}.sc-legend li{display:flex}.sc-legend-btn{display:flex;align-items:center;gap:.45rem;width:100%;padding:.15rem .3rem;font:inherit;font-size:.8rem;text-align:left;background:none;border:1px solid transparent;border-radius:3px;cursor:pointer;color:inherit}.sc-legend-btn:hover{background:var(--surface-hover, rgba(0, 0, 0, .04))}.sc-legend-btn.selected{border-color:var(--primary-color, #3b82f6);background:var(--surface-hover, rgba(59, 130, 246, .08));font-weight:600}.sc-selection .sc-row{gap:.4rem}.sc-swatch{width:.85rem;height:.85rem;flex:0 0 auto;border-radius:2px;border:1px solid rgba(0,0,0,.2)}.sc-legend-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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-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)}.sc-legend-static{cursor:default}.sc-tx-gene{display:flex;align-items:center;gap:.5rem}.sc-tx-gene .sc-legend-label{flex:1}:host ::ng-deep .sc-glyph-pick .p-dropdown-label{padding:.2rem .4rem}.sc-glyph-option{display:inline-flex;align-items:center;gap:.4rem}.sc-glyph-svg{width:1rem;height:1rem;fill:currentColor}:host ::ng-deep .sc-row-buttons .p-selectbutton .p-button{padding:.35rem .6rem;font-size:.85rem}:host ::ng-deep .sc-row-buttons .p-selectbutton{display:flex;flex-wrap:nowrap}.sc-row-wide .sc-lbl{flex:0 0 auto}.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-gene-group,.sc-gene-leaf{padding-left:1rem}.sc-gene-leaf.nested{padding-left:2rem}.sc-count{flex:0 0 auto;font-size:.78rem;color:var(--text-color-secondary, #6c757d)}.sc-dot{flex:0 0 auto;width:.7rem;height:.7rem;border-radius:50%;border:1px solid rgba(0,0,0,.2)}.sc-dot-pick{position:relative;cursor:pointer}.sc-dot-pick input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}.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-gene-footer{text-align:right;font-size:.78rem;padding:.2rem 0;color:var(--text-color-secondary, #6c757d)}.sc-color-input{width:2.5rem;height:1.8rem;border:1px solid var(--surface-border, #ced4da);border-radius:4px;padding:0;background:none}.sc-meter{height:.45rem;border-radius:3px;background:var(--surface-200, #e9ecef);overflow:hidden}.sc-meter-fill{height:100%;background:var(--primary-color, #2196f3)}.sc-meter-fill.over{background:var(--orange-500, #f59e0b)}.sc-meter-ends,.sc-ticks{display:flex;justify-content:space-between;font-size:.72rem;font-weight:600;color:var(--text-color-secondary, #6c757d)}.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-error{color:var(--red-600, #c62828)}.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))}::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)}.sc-gene-count{margin-left:auto;font-variant-numeric:tabular-nums;opacity:.8;padding-left:.5rem}.sc-markers{display:flex;flex-direction:column;gap:.4rem;padding:.5rem;margin:.25rem 0 .5rem;border:1px solid var(--surface-border, rgba(0, 0, 0, .15));border-radius:6px}.sc-markers-actions{gap:.5rem}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [VISUALIZER]
@@ -24172,6 +24514,13 @@ class OpenSeadragonVisualizerService extends BaseStoreVisualizer {
             // following `frame$.subscribe(redraw)` would stay blank until the next pan/zoom.
             frame$: this.withCurrentRect(this.frame$, ready),
             settled$: this.withCurrentRect(this.viewportChange$, ready),
+            fitBounds: (rect, options) => {
+                const viewer = this.viewer;
+                if (!viewer || !ready() || !(rect.width > 0) || !(rect.height > 0))
+                    return;
+                const vpRect = imageRectToViewport(viewer, rect.x, rect.y, rect.width, rect.height);
+                viewer.viewport.fitBoundsWithConstraints(vpRect, !!options?.immediately);
+            },
         };
         return this.plotModeViewport;
     }
@@ -25434,6 +25783,13 @@ class NapariSpatialTooltip {
     }
 }
 
+/** The all-gene pyramid's finest bin (250 µm source tiles / 128) and default level count, used
+ *  to group a gene selection on the same ladder when a dataset has no pyramid. */
+const PYRAMID_BASE_BIN_UM = 250 / 128;
+const PYRAMID_LEVELS = 7;
+/** Icons get a dark rim only while there are at most this many, at least this big (px). */
+const GLYPH_OUTLINE_MAX = 20_000;
+const GLYPH_OUTLINE_MIN_PX = 8;
 const ORDER = [
     'cellFill', 'cellOutline', 'nucleusOutline', 'density', 'transcripts', 'transcriptOutline',
 ];
@@ -25472,6 +25828,12 @@ class NapariSpatialTileLayers {
         /** Selection identity → revision, so a change key can name a selection cheaply. */
         this.lastSelection = null;
         this.selectionRevision = 0;
+        /** µm per observation unit of the drawn dataset, for describing a grouped marker's area. */
+        this.micronsPerUnit = null;
+        /** Loads in flight, per layer label, for the loading badge. */
+        this.loading = new Map();
+        /** The loaded per-gene transcripts the in-view counts are taken from. */
+        this.countSource = null;
         // ── hover ─────────────────────────────────────────────────────────────────────────
         this.drawn = null;
         this.hoverTypes = null;
@@ -25479,6 +25841,7 @@ class NapariSpatialTileLayers {
         this.hoverCache = new Map();
         this.hoverKey = null;
         this.hoverTimer = null;
+        this.densityCache = new Map();
         this.countsCache = null;
         /** The density window in use and the densest bin, for the panel's threshold control. */
         this.densityStats = null;
@@ -25491,6 +25854,81 @@ class NapariSpatialTileLayers {
         this.viewer = viewer;
         this.cameraOff = viewer.camera.changed.connect(() => this.schedule());
     }
+    /**
+     * Group a gene selection for the zoom: one marker per gene-tree cluster (a gene in no
+     * cluster is its own) per bin of the pyramid ladder, starting at the finest bin whose
+     * markers are 14 px apart and stepping up while the markers would exceed the budget.
+     * Null to draw every transcript: zoomed in, with the selection within the budget.
+     */
+    groupSelection(t, view, ladder, pxPerUnit) {
+        const budget = Math.max(1, view.transcriptBudget);
+        const genes = view.transcriptGenes;
+        const groups = view.transcriptGeneGroups;
+        const names = [...groups.map((g) => g.name), ...genes];
+        const clusterOf = genes.map((gene, slot) => {
+            const g = groups.findIndex((x) => x.genes.includes(gene));
+            return g >= 0 ? g : groups.length + slot;
+        });
+        const keyOf = (slot) => clusterOf[slot] ?? groups.length + slot;
+        let bin = ladder.start;
+        if (bin === null) {
+            // Every transcript, if they fit the max and none was cut off at the cap.
+            if (t.count <= budget && t.count < MAX_TRANSCRIPTS)
+                return null;
+            bin = ladder.baseBin;
+        }
+        const top = ladder.baseBin * 2 ** (ladder.levels - 1);
+        let grouped = groupTranscripts(t, bin, keyOf);
+        // Over the max: combine into larger markers, a level at a time.
+        while (grouped.tile.count > budget && bin < top) {
+            bin *= 2;
+            grouped = groupTranscripts(t, bin, keyOf);
+        }
+        const refCount = quantileOf(grouped.tile.weight, 0.95);
+        const binPx = bin * pxPerUnit;
+        const px = new Float32Array(grouped.tile.count);
+        for (let i = 0; i < grouped.tile.count; i++) {
+            px[i] = groupedMarkerPx(grouped.tile.weight[i], refCount, binPx, view.transcriptScale);
+        }
+        return { merged: grouped.tile, px, bin, group: grouped.group, names };
+    }
+    /** Report `label` loading while `work` is in flight. */
+    async track(label, work) {
+        this.loading.set(label, (this.loading.get(label) ?? 0) + 1);
+        this.host.loadingChanged?.([...this.loading.keys()]);
+        try {
+            return await work;
+        }
+        finally {
+            const n = (this.loading.get(label) ?? 1) - 1;
+            if (n > 0)
+                this.loading.set(label, n);
+            else
+                this.loading.delete(label);
+            this.host.loadingChanged?.([...this.loading.keys()]);
+        }
+    }
+    /**
+     * Transcripts of each selected gene inside `rect`: each entry counts for the transcripts it
+     * stands for (an aggregate at a coarse level holds several). Null without per-gene data.
+     */
+    geneCountsIn(rect) {
+        const src = this.countSource;
+        if (!src)
+            return null;
+        const out = {};
+        for (const g of src.genes)
+            out[g] = 0;
+        const { x, y, weight, gene } = src.merged;
+        for (let i = 0; i < src.merged.count; i++) {
+            if (x[i] < rect.x0 || x[i] > rect.x1 || y[i] < rect.y0 || y[i] > rect.y1)
+                continue;
+            const name = src.genes[gene[i]];
+            if (name !== undefined)
+                out[name] += weight[i];
+        }
+        return out;
+    }
     /** Whether `layer` is one of the overlays drawn here (density, cells, transcripts). */
     owns(layer) {
         for (const l of this.layers.values())
@@ -25510,6 +25948,9 @@ class NapariSpatialTileLayers {
         this.timer = null;
         this.token++;
         this.tileRetries = 0;
+        this.countSource = null;
+        this.loading.clear();
+        this.host.loadingChanged?.([]);
         if (this.viewer) {
             for (const layer of this.layers.values()) {
                 if (this.viewer.layers.items.includes(layer))
@@ -25581,6 +26022,7 @@ class NapariSpatialTileLayers {
         ]);
         if (stale())
             return;
+        this.host.geneCountsChanged?.(this.geneCountsIn(rect));
         // A tile that failed left a hole the cache keys do not record, so try the same view
         // again, backing off, a bounded number of times.
         if (!this.planIncomplete) {
@@ -25612,7 +26054,9 @@ class NapariSpatialTileLayers {
         const hidden = await this.hiddenCodes(dataset, view);
         if (stale())
             return;
-        const geometry = await this.cellGeometry(dataset, view, rect, level, hidden, stale);
+        const label = view.cellSet === 'both' ? 'Cells and nuclei'
+            : view.cellSet === 'nucleus' ? 'Nuclei' : 'Cells';
+        const geometry = await this.track(label, this.cellGeometry(dataset, view, rect, level, hidden, stale));
         if (!geometry)
             return;
         const { rings, nuclei, geometryKey } = geometry;
@@ -25796,7 +26240,8 @@ class NapariSpatialTileLayers {
     // ── transcripts ───────────────────────────────────────────────────────────────────
     async planTranscripts(dataset, view, rect, pxPerUnit, stale) {
         const mode = view.transcriptMode;
-        const job = (mode === 'circles' || mode === 'glyphs') && this.port.getTranscriptTile
+        const job = (mode === 'circles' || mode === 'glyphs')
+            && (this.port.getTranscriptTile || (this.port.getTranscriptGeneBins && dataset.transcriptGeneBins))
             ? (view.transcriptAllGenes
                 ? this.allGenesJob(dataset, view, rect, pxPerUnit)
                 : this.geneJob(dataset, view, rect, pxPerUnit))
@@ -25805,6 +26250,7 @@ class NapariSpatialTileLayers {
             this.drop('transcripts');
             this.drop('transcriptOutline');
             this.drawn = null;
+            this.countSource = null;
             return;
         }
         // Marker sizes follow the zoom, so the zoom is part of the key; a pan that keeps
@@ -25813,25 +26259,49 @@ class NapariSpatialTileLayers {
             dataset.id, mode, job.key, view.transcriptColorBy, this.cellTypeColumnName(dataset, view),
             view.transcriptScale, view.transcriptOpacity, JSON.stringify(view.transcriptGlyphs),
             pxPerUnit.toPrecision(4), view.hiddenGroups.join('\u0001'), view.transcriptHiddenGenes.join(','),
-            JSON.stringify(view.transcriptGeneColors),
+            JSON.stringify(view.transcriptGeneColors), JSON.stringify(view.transcriptGeneGroups),
         ].join('|');
         const current = this.layers.get('transcripts');
         if (planKey === this.keys.get('transcripts') && current && this.viewer.layers.items.includes(current)) {
             return;
         }
-        const loaded = await job.load();
+        const loaded = await this.track('Transcripts', job.load());
         if (stale())
             return;
+        // Per-gene counts in view come from what was loaded, before hidden genes are dropped:
+        // a hidden gene still has transcripts there. Summed density grids (no per-gene levels,
+        // zoomed out) hold clusters, not genes: no per-gene counts there, rather than a guess.
+        this.countSource = (loaded.kind ?? job.kind) === 'genes' && !loaded.clustered
+            ? { merged: loaded.merged, genes: [...view.transcriptGenes] } : null;
         const hidden = await this.hiddenCodes(dataset, view);
         if (stale())
             return;
-        const { merged, px } = filterTranscripts(loaded.merged, loaded.px, hidden, (loaded.kind ?? job.kind) === 'genes' ? hiddenGeneSlots(view) : null);
+        // Density-grid markers carry no cells and were built from the visible genes only.
+        const filtered = loaded.clustered ? { merged: loaded.merged, px: loaded.px }
+            : filterTranscripts(loaded.merged, loaded.px, hidden, (loaded.kind ?? job.kind) === 'genes' ? hiddenGeneSlots(view) : null);
+        let { merged, px } = filtered;
+        let selectionBin = loaded.clustered?.bin ?? null;
+        let entryGroup = loaded.clustered?.group ?? null;
+        let groupNames = loaded.clustered?.names ?? null;
+        if (loaded.ladder) {
+            const g = this.groupSelection(merged, view, loaded.ladder, pxPerUnit);
+            if (g)
+                ({ merged, px, bin: selectionBin, group: entryGroup, names: groupNames } = g);
+        }
         // A bin of the all-gene pyramid mixes genes and carries none, so it cannot be coloured
         // by gene: colour it by its dominant cell's type until individual transcripts show.
         const kind = loaded.kind ?? job.kind;
-        const colorView = kind === 'bins' && view.transcriptColorBy === 'gene'
-            ? { ...view, transcriptColorBy: 'cellType' } : view;
-        const faces = await this.transcriptColors(dataset, colorView, merged);
+        const colorView = kind === 'bins' && view.transcriptColorBy !== 'cellType'
+            ? { ...view, transcriptColorBy: 'cellType' }
+            // Density-grid markers have no cell to take a type from: they take their cluster's colour.
+            : loaded.clustered && view.transcriptColorBy === 'cellType'
+                ? { ...view, transcriptColorBy: 'cluster' } : view;
+        // Each entry's cluster: its marker's group, or the gene-tree group its gene is in.
+        const geneCluster = view.transcriptGenes.map((g) => view.transcriptGeneGroups.find((x) => x.genes.includes(g))?.name ?? g);
+        const clusterOf = (i) => (entryGroup && groupNames
+            ? groupNames[entryGroup[i]] ?? null
+            : geneCluster[merged.gene[i]] ?? null);
+        const faces = await this.transcriptColors(dataset, colorView, merged, kind === 'genes' ? clusterOf : undefined);
         if (stale())
             return;
         if (this.planIncomplete)
@@ -25840,11 +26310,16 @@ class NapariSpatialTileLayers {
             this.keys.set('transcripts', planKey);
         const diam = px.map((d) => d / pxPerUnit);
         this.drawn = {
-            kind: loaded.kind ?? job.kind, bin: loaded.kind ? loaded.bin : job.bin,
+            kind: loaded.kind ?? job.kind,
+            bin: selectionBin ? { size: selectionBin, origin: loaded.clustered?.origin ?? [0, 0] }
+                : (loaded.kind ? loaded.bin : job.bin),
             merged, radius: diam.map((d) => d / 2),
             genes: [...view.transcriptGenes], ref: dataset.imageRef ?? null, grid: null,
+            ...(entryGroup && groupNames ? { entryGroup, groupNames } : {}),
+            ...(loaded.clustered ? { groupGenes: loaded.clustered.genes } : {}),
         };
         this.hoverCache.clear();
+        this.micronsPerUnit = dataset.micronsPerUnit ?? null;
         const typeColumn = this.cellTypeColumnName(dataset, view);
         this.hoverTypes = typeColumn ? await this.categoricalCodes(typeColumn).catch(() => null) : null;
         if (stale())
@@ -25856,7 +26331,7 @@ class NapariSpatialTileLayers {
             this.drawTranscriptCircles(merged, diam, faces.rgba, view, place);
         }
         else {
-            this.drawTranscriptGlyphs(merged, diam, faces, view, place);
+            this.drawTranscriptGlyphs(merged, diam, faces, view, place, pxPerUnit);
         }
     }
     /** One sized circle per entry, the size saying how many transcripts it stands for. */
@@ -25880,7 +26355,7 @@ class NapariSpatialTileLayers {
         });
         this.replace('transcripts', layer);
     }
-    drawTranscriptGlyphs(merged, diam, faces, view, { scale, translate }) {
+    drawTranscriptGlyphs(merged, diam, faces, view, { scale, translate }, pxPerUnit) {
         // Glyphs: each entry becomes its gene's icon polygon, filled through a discrete
         // colormap and outlined dark so small icons stay readable over the tissue. With every
         // gene drawn there is one icon for all of them — 18,000 shapes would say nothing.
@@ -25903,6 +26378,13 @@ class NapariSpatialTileLayers {
             translate,
         });
         this.replace('transcripts', fill);
+        // A dark rim keeps a few large icons readable over the tissue; on many small ones the
+        // rims merge into a solid dark sheet that hides every colour, so they are left off.
+        const medianPx = median(diam) * pxPerUnit;
+        if (merged.count > GLYPH_OUTLINE_MAX || medianPx < GLYPH_OUTLINE_MIN_PX) {
+            this.drop('transcriptOutline');
+            return;
+        }
         const edge = this.viewer.addShapes(coords, offsets, {
             name: 'transcript outlines',
             draw: 'outline',
@@ -25954,7 +26436,7 @@ class NapariSpatialTileLayers {
         const obs = d.merged.observation[i];
         const cells = obs === NO_OBSERVATION ? [] : [obs];
         let box;
-        if (d.kind === 'bins' && d.bin) {
+        if ((d.kind === 'bins' || d.kind === 'genes') && d.bin) {
             const { size, origin } = d.bin;
             const bx = Math.floor((d.merged.x[i] - origin[0]) / size);
             const by = Math.floor((d.merged.y[i] - origin[1]) / size);
@@ -25966,8 +26448,9 @@ class NapariSpatialTileLayers {
             const e = 0.02;
             box = [d.merged.x[i] - e, d.merged.y[i] - e, d.merged.x[i] + e, d.merged.y[i] + e];
         }
+        const genes = d.groupGenes && d.entryGroup ? d.groupGenes[d.entryGroup[i]] : undefined;
         try {
-            const summary = await this.port.getTranscriptSummary({ box, cells });
+            const summary = await this.port.getTranscriptSummary({ box, cells, ...(genes ? { genes } : {}) });
             const lines = this.describe(d, i, summary);
             this.hoverCache.set(key, lines);
             if (this.hoverKey === key)
@@ -26022,6 +26505,19 @@ class NapariSpatialTileLayers {
             ];
         }
         const gene = d.genes[t.gene[i]] ?? 'transcript';
+        if (d.bin) {
+            const um = d.bin.size * (this.micronsPerUnit ?? 1);
+            const group = d.entryGroup && d.groupNames ? d.groupNames[d.entryGroup[i]] : gene;
+            const top = s?.topGenes?.length
+                ? [s.topGenes.slice(0, 6).map((g) => `${g.name} ${fmt(g.count)}`).join(', ')] : [];
+            return [
+                `${group} · ${fmt(n)} transcript${n === 1 ? '' : 's'}`,
+                ...(d.groupGenes ? top : group !== gene ? [`mostly ${gene}`] : []),
+                `${um.toFixed(1)} × ${um.toFixed(1)} µm area · zoom in to split`,
+                ...(obs === NO_OBSERVATION && d.groupGenes ? [] : [cellLine(obs, 'mostly cell')]),
+                ...(!s && d.groupGenes && this.port.getTranscriptSummary ? ['loading details…'] : []),
+            ];
+        }
         return n > 1
             ? [`${gene} · ${fmt(n)} transcripts`, 'grouped: zoom in to split', cellLine(obs, 'near cell')]
             : [`${gene} transcript`, cellLine(obs, 'in cell')];
@@ -26043,24 +26539,182 @@ class NapariSpatialTileLayers {
         const keysAt = (l) => tilesInRect(rect, l, meta.levels, meta.bounds, MAX_TRANSCRIPT_TILES);
         const query = { genes, quality: view.transcriptQuality };
         const pxPerMicron = this.pxPerMicron(dataset, pxPerUnit);
+        const mx = (rect.x1 - rect.x0) * 0.25;
+        const my = (rect.y1 - rect.y0) * 0.25;
+        const around = { x0: rect.x0 - mx, y0: rect.y0 - my, x1: rect.x1 + mx, y1: rect.y1 + my };
+        // Zoomed out, each gene's transcripts are grouped on the all-gene pyramid's bin ladder,
+        // so a gene selection reads like "all genes" does: one marker per gene per area, sized
+        // by how many it holds; zoomed in far enough, every transcript is its own marker.
+        const ladder = dataset.transcriptBins?.levels;
+        const baseBin = ladder?.[0]?.binSize
+            ?? (dataset.micronsPerUnit ? PYRAMID_BASE_BIN_UM / dataset.micronsPerUnit : 0);
+        const bin = geneBinSize(pxPerUnit, baseBin, ladder?.length ?? PYRAMID_LEVELS);
+        // Zoomed out to bins as wide as the density grid, a selection is drawn from the per-gene
+        // density grids — one cached request per cluster — rather than 10x's coarse per-gene
+        // tiles, which take minutes for a few hundred genes.
+        // With the pyramid's per-gene levels, every zoom of a selection reads them: the level the
+        // zoom calls for, coarser while the markers would exceed the max.
+        // Both are built from high-quality calls only: with low-quality calls included, the
+        // quality-aware tiles below serve every zoom (as long as there are tiles to serve).
+        const highOnly = view.transcriptQuality !== 'all' || !this.port.getTranscriptTile;
+        const geneBins = dataset.transcriptGeneBins;
+        const fromGeneBins = highOnly && geneBins && this.port.getTranscriptGeneBins;
+        if (fromGeneBins && (bin !== null || !this.port.getTranscriptTile)) {
+            return this.geneBinsJob(dataset, view, around, geneBins, bin ?? geneBins.levels[0].binSize, mx, my, rect);
+        }
+        const grid = dataset.density?.gridSize[0] ?? 0;
+        if (highOnly && bin !== null && grid > 0 && this.port.getDensity && bin >= grid * 0.75) {
+            return this.clusterDensityJob(dataset, view, around, pxPerUnit, Math.max(bin, grid), mx, my, rect);
+        }
         return {
             kind: 'genes',
-            key: `genes|${genes.join(',')}|${view.transcriptQuality}|${view.transcriptBudget}|${keysAt(first).map(tileId)}`,
+            // The clip window, in quarter-view steps: a pan past the margin re-clips.
+            key: `genes|${genes.join(',')}|${view.transcriptQuality}|${view.transcriptBudget}|${bin ?? 'each'}|`
+                + `${Math.floor(rect.x0 / (mx || 1))},${Math.floor(rect.y0 / (my || 1))}|${keysAt(first).map(tileId)}`,
             load: async () => {
-                let level = first;
-                let merged;
-                for (;;) {
-                    const tiles = await this.fetchAll(keysAt(level), (k) => this.port.getTranscriptTile(k.level, k.gx, k.gy, query));
-                    merged = mergeTranscriptTiles(tiles, MAX_TRANSCRIPTS);
-                    if (merged.count <= view.transcriptBudget || level >= meta.levels.length - 1)
-                        break;
-                    level++;
-                }
+                // The zoom's own level only: over the budget, the transcripts are combined into
+                // larger markers (groupSelection), never fetched from slower coarse levels.
+                const tiles = await this.fetchAll(keysAt(first), (k) => this.port.getTranscriptTile(k.level, k.gx, k.gy, query));
+                // Only what is on screen (and a margin, so a small pan needs nothing new) counts
+                // against the budget and the cap; a tile reaches far past the view.
+                const merged = mergeTranscriptTiles(tiles.map((t) => clipTranscripts(t, around)), MAX_TRANSCRIPTS);
                 const px = new Float32Array(merged.count);
                 for (let i = 0; i < merged.count; i++) {
                     px[i] = transcriptMarkerPx(merged.weight[i], view.transcriptScale, pxPerMicron);
                 }
-                return { merged, px };
+                return baseBin > 0
+                    ? { merged, px, ladder: { baseBin, levels: ladder?.length ?? PYRAMID_LEVELS, start: bin } }
+                    : { merged, px };
+            },
+        };
+    }
+    /**
+     * A gene selection from the pyramid's per-gene levels: starting at the level whose bins are
+     * `startBin`, fetch the view's tiles for the selected genes and step to a coarser level while
+     * one marker per cluster per bin would exceed the max. Hidden genes are fetched too (their
+     * counts in view still show) and dropped before drawing; grouping by cluster happens there.
+     */
+    geneBinsJob(dataset, view, around, meta, startBin, mx, my, rect) {
+        const genes = view.transcriptGenes;
+        const levels = meta.levels;
+        let first = levels.findIndex((l) => l.binSize >= startBin * 0.999);
+        if (first < 0)
+            first = levels.length - 1;
+        const budget = Math.max(1, view.transcriptBudget);
+        const hidden = new Set(view.transcriptHiddenGenes);
+        const clusters = this.selectionClusters(view);
+        const clusterOf = new Map();
+        clusters.forEach((c, ci) => c.genes.forEach((g) => clusterOf.set(genes.indexOf(g), ci)));
+        const keysAt = (m) => tilesInRectFrom(meta.origin, around, m, levels.map((l) => ({ tileSize: l.tileSize })), null, MAX_BIN_TILES);
+        return {
+            kind: 'genes',
+            key: `gene-bins|${genes.join(',')}|${budget}|${first}|${JSON.stringify(view.transcriptGeneGroups)}|`
+                + `${Math.floor(rect.x0 / (mx || 1))},${Math.floor(rect.y0 / (my || 1))}`,
+            load: async () => {
+                let m = first;
+                for (;;) {
+                    const tiles = await this.fetchAll(keysAt(m), (k) => this.port.getTranscriptGeneBins(k.level, k.gx, k.gy, genes));
+                    const clipped = tiles.map((t) => clipTranscripts(t, around));
+                    // Past the cap a merge would drop whole genes (the tail of every tile): go coarser.
+                    if (clipped.reduce((n, t) => n + t.count, 0) > MAX_TRANSCRIPTS && m < levels.length - 1) {
+                        m++;
+                        continue;
+                    }
+                    const merged = mergeTranscriptTiles(clipped, MAX_TRANSCRIPTS);
+                    // Markers this level would draw: one per (visible cluster, bin).
+                    const seen = new Set();
+                    const bin = levels[m].binSize;
+                    for (let i = 0; i < merged.count; i++) {
+                        if (hidden.has(genes[merged.gene[i]]))
+                            continue;
+                        const c = clusterOf.get(merged.gene[i]);
+                        if (c === undefined)
+                            continue;
+                        seen.add(`${c}|${Math.floor(merged.x[i] / bin)}|${Math.floor(merged.y[i] / bin)}`);
+                    }
+                    if (seen.size <= budget || m >= levels.length - 1) {
+                        return { merged, px: new Float32Array(merged.count), ladder: { baseBin: bin, levels: 1, start: bin } };
+                    }
+                    m++;
+                }
+            },
+        };
+    }
+    /** The selection's clusters: each gene-tree group's visible genes, then each ungrouped gene. */
+    selectionClusters(view) {
+        const hidden = new Set(view.transcriptHiddenGenes);
+        const slots = new Map(view.transcriptGenes.map((g, i) => [g, i]));
+        const taken = new Set();
+        const out = [];
+        for (const g of view.transcriptGeneGroups) {
+            const genes = g.genes.filter((x) => slots.has(x) && !hidden.has(x) && !taken.has(x));
+            genes.forEach((x) => taken.add(x));
+            if (genes.length)
+                out.push({ name: g.name, genes, slot: slots.get(genes[0]) });
+        }
+        for (const gene of view.transcriptGenes) {
+            if (!taken.has(gene) && !hidden.has(gene))
+                out.push({ name: gene, genes: [gene], slot: slots.get(gene) });
+        }
+        return out;
+    }
+    /**
+     * Per-gene density grids summed for `genes`, cached (a cluster is asked for once per bin).
+     * Keyed by dataset too: this manager outlives a dataset, and another may share gene names.
+     */
+    densityFor(dataset, genes, bin) {
+        const key = `${dataset}|${bin}|${genes.join(',')}`;
+        let p = this.densityCache.get(key);
+        if (!p) {
+            p = this.port.getDensity(genes, bin);
+            p.catch(() => this.densityCache.delete(key));
+            this.densityCache.set(key, p);
+            if (this.densityCache.size > 256)
+                this.densityCache.delete(this.densityCache.keys().next().value);
+        }
+        return p;
+    }
+    /**
+     * A gene selection zoomed out: one marker per cluster per bin, from the per-gene density
+     * grids. The bin starts where markers are 14 px apart and doubles until the markers fit the
+     * max; each marker sits at the count-weighted centre of the finer grid inside it, so markers
+     * follow the tissue rather than a lattice.
+     */
+    clusterDensityJob(dataset, view, around, pxPerUnit, startBin, mx, my, rect) {
+        const grid = dataset.density.gridSize[0];
+        const clusters = this.selectionClusters(view);
+        let first = grid;
+        while (first < startBin * 0.999)
+            first *= 2;
+        const budget = Math.max(1, view.transcriptBudget);
+        return {
+            kind: 'genes',
+            key: `clusters|${clusters.map((c) => `${c.name}:${c.genes.join('+')}`).join(';')}|${budget}|${first}|`
+                + `${Math.floor(rect.x0 / (mx || 1))},${Math.floor(rect.y0 / (my || 1))}`,
+            load: async () => {
+                let bin = first;
+                for (;;) {
+                    // The finer grid gives each marker its centre; the server bins 1, 2, 4 or 8 cells.
+                    const fine = Math.min(bin >= grid * 2 ? bin / 2 : bin, grid * 8);
+                    const rasters = await Promise.all(clusters.map((c) => this.densityFor(dataset.id, c.genes, fine)));
+                    const out = clusterMarkers(rasters, clusters.map((c) => c.slot), bin, around);
+                    if (out.tile.count <= budget || bin >= grid * 2 ** 12) {
+                        const refCount = quantileOf(out.tile.weight, 0.95);
+                        const binPx = bin * pxPerUnit;
+                        const px = new Float32Array(out.tile.count);
+                        for (let i = 0; i < out.tile.count; i++) {
+                            px[i] = groupedMarkerPx(out.tile.weight[i], refCount, binPx, view.transcriptScale);
+                        }
+                        return {
+                            merged: out.tile, px, kind: 'genes',
+                            clustered: {
+                                group: out.group, names: clusters.map((c) => c.name), genes: clusters.map((c) => c.genes), bin,
+                                origin: rasters[0]?.meta.origin ?? [0, 0],
+                            },
+                        };
+                    }
+                    bin *= 2;
+                }
             },
         };
     }
@@ -26145,10 +26799,40 @@ class NapariSpatialTileLayers {
         };
     }
     /** Per-entry colours both as RGBA (points) and as colormap values (glyph shapes). */
-    async transcriptColors(dataset, view, t) {
+    async transcriptColors(dataset, view, t, clusterOf) {
         let rgb;
         let codeOf;
-        if (view.transcriptColorBy === 'gene') {
+        if (view.transcriptColorBy === 'cluster' && clusterOf) {
+            // A cluster named like a group of the cells' grouping takes that group's colour, so a
+            // cluster's transcripts and its cells agree; any other cluster takes a palette colour.
+            const name = this.cellTypeColumnName(dataset, view);
+            const codes = name ? await this.categoricalCodes(name).catch(() => null) : null;
+            const cellColor = new Map();
+            if (codes?.meta.kind === 'categorical') {
+                const colors = resolveCategoryColors(codes.meta);
+                codes.meta.categories.forEach((c, k) => cellColor.set(c, colors[k]));
+            }
+            const colors = clusterColorMap(view.transcriptGenes, view.transcriptGeneGroups, cellColor, DEFAULT_CATEGORICAL_PALETTE);
+            const index = new Map();
+            const hex = [];
+            const codeFor = (cluster) => {
+                let k = index.get(cluster);
+                if (k === undefined) {
+                    k = hex.length;
+                    index.set(cluster, k);
+                    hex.push(colors.get(cluster) ?? cellColor.get(cluster) ?? DEFAULT_CATEGORICAL_PALETTE[0]);
+                }
+                return k;
+            };
+            const code = new Int32Array(t.count);
+            for (let i = 0; i < t.count; i++) {
+                const c = clusterOf(i);
+                code[i] = c === null ? -1 : codeFor(c);
+            }
+            rgb = hex.map(parseHex);
+            codeOf = (i) => code[i];
+        }
+        else if (view.transcriptColorBy === 'gene' || view.transcriptColorBy === 'cluster') {
             // All genes: codes are the dataset's gene indices, folded onto the palette.
             const n = view.transcriptAllGenes ? DEFAULT_CATEGORICAL_PALETTE.length : view.transcriptGenes.length;
             rgb = Array.from({ length: n }, (_g, i) => parseHex((!view.transcriptAllGenes && view.transcriptGeneColors[view.transcriptGenes[i]])
@@ -26194,7 +26878,7 @@ class NapariSpatialTileLayers {
             JSON.stringify(view.densityRange), JSON.stringify(view.densityColormap)].join('|');
         if (key === this.keys.get('density') && this.layers.has('density'))
             return;
-        const raster = await this.port.getDensity(genes, view.densityBin);
+        const raster = await this.track('Transcript density', this.port.getDensity(genes, view.densityBin));
         if (stale())
             return;
         // Bins drawn as squares, as Xenium Explorer does; the window is in transcripts/µm².
@@ -26526,6 +27210,60 @@ function mergeTranscriptTiles(tiles, limit = Infinity) {
     }
     return out;
 }
+/**
+ * One marker per (cluster, `bin` square) from per-cluster density grids: the counts of the grid
+ * cells inside `area` summed per square, at their count-weighted centre. `slots[c]` is the gene
+ * slot whose icon cluster c's markers take.
+ */
+function clusterMarkers(rasters, slots, bin, area) {
+    const x = [];
+    const y = [];
+    const w = [];
+    const gene = [];
+    const group = [];
+    rasters.forEach((r, c) => {
+        const [cw, ch] = r.meta.gridSize;
+        const [ox, oy] = r.meta.origin;
+        const { rows, cols } = r.meta;
+        const c0 = Math.max(0, Math.floor((area.x0 - ox) / cw));
+        const c1 = Math.min(cols - 1, Math.floor((area.x1 - ox) / cw));
+        const r0 = Math.max(0, Math.floor((area.y0 - oy) / ch));
+        const r1 = Math.min(rows - 1, Math.floor((area.y1 - oy) / ch));
+        const squares = new Map();
+        for (let row = r0; row <= r1; row++) {
+            for (let col = c0; col <= c1; col++) {
+                const v = r.values[row * cols + col];
+                if (!(v > 0))
+                    continue;
+                const cx = ox + (col + 0.5) * cw;
+                const cy = oy + (row + 0.5) * ch;
+                const key = Math.floor((cy - oy) / bin) * 1e6 + Math.floor((cx - ox) / bin);
+                const s = squares.get(key) ?? { n: 0, sx: 0, sy: 0 };
+                s.n += v;
+                s.sx += v * cx;
+                s.sy += v * cy;
+                squares.set(key, s);
+            }
+        }
+        for (const s of squares.values()) {
+            x.push(s.sx / s.n);
+            y.push(s.sy / s.n);
+            w.push(Math.round(s.n));
+            gene.push(slots[c]);
+            group.push(c);
+        }
+    });
+    const n = w.length;
+    return {
+        tile: {
+            count: n, aggregated: true,
+            x: Float32Array.from(x), y: Float32Array.from(y), z: new Float32Array(n),
+            weight: Uint32Array.from(w), observation: new Uint32Array(n).fill(NO_OBSERVATION),
+            gene: Uint16Array.from(gene),
+        },
+        group: Int32Array.from(group),
+    };
+}
 
 /**
  * Overview navigator (minimap) for the napari-js 2D views, mirroring the OSD backend's
@@ -26722,6 +27460,79 @@ function stop(e) {
         e.preventDefault();
 }
 
+/**
+ * "Transcripts reloading…" at the bottom of the canvas while a layer's data is in flight: one
+ * line naming every layer still loading, on a semi-opaque backing so it reads over any tissue.
+ *
+ * Shown only once something has been loading for {@link SHOW_AFTER_MS}, so a redraw served from
+ * cache does not flash it.
+ */
+const SHOW_AFTER_MS = 150;
+class NapariLoadingBadge {
+    constructor(host) {
+        this.host = host;
+        this.names = [];
+        this.timer = null;
+        if (getComputedStyle(host).position === 'static')
+            host.style.position = 'relative';
+        this.el = document.createElement('div');
+        this.el.className = 'napari-loading-badge';
+        this.el.setAttribute('role', 'status');
+        this.el.setAttribute('aria-live', 'polite');
+        Object.assign(this.el.style, {
+            position: 'absolute',
+            left: '50%',
+            bottom: '12px',
+            transform: 'translateX(-50%)',
+            padding: '4px 12px',
+            borderRadius: '12px',
+            background: 'rgba(0, 0, 0, 0.6)',
+            color: '#fff',
+            font: '12px/1.4 system-ui, sans-serif',
+            whiteSpace: 'nowrap',
+            pointerEvents: 'none',
+            zIndex: '5',
+            display: 'none',
+        });
+        host.appendChild(this.el);
+    }
+    /** The layers loading now; empty hides the badge. */
+    set(names) {
+        this.names = [...new Set(names)];
+        if (!this.names.length) {
+            if (this.timer)
+                clearTimeout(this.timer);
+            this.timer = null;
+            this.el.style.display = 'none';
+            return;
+        }
+        this.el.textContent = `${listOf(this.names)} reloading…`;
+        if (this.el.style.display === 'block' || this.timer)
+            return;
+        this.timer = setTimeout(() => {
+            this.timer = null;
+            if (this.names.length)
+                this.el.style.display = 'block';
+        }, SHOW_AFTER_MS);
+    }
+    /** The text currently set (shown or about to be). */
+    get text() {
+        return this.names.length ? this.el.textContent ?? '' : '';
+    }
+    destroy() {
+        if (this.timer)
+            clearTimeout(this.timer);
+        this.el.remove();
+    }
+}
+/** "A", "A and B", "A, B and C" — the first capitalised, the rest as they are. */
+function listOf(names) {
+    const [first, ...rest] = names;
+    const lower = rest.map((n) => n.charAt(0).toLowerCase() + n.slice(1));
+    const all = [first, ...lower];
+    return all.length === 1 ? all[0] : `${all.slice(0, -1).join(', ')} and ${all[all.length - 1]}`;
+}
+
 /**
  * Wheel-zoom sensitivity for the napari-js backend, as `exp(-delta * speed)` per normalized,
  * clamped wheel-delta unit.
@@ -28472,6 +29283,8 @@ class NapariVisualizerService extends BaseStoreVisualizer {
         this.spatialTilesMgr = null;
         /** For the panel: the transcripts-in-view estimate and the density window in use. */
         this.transcriptEstimate$ = new BehaviorSubject(null);
+        /** Transcripts of each selected gene in view (see NapariSpatialTileLayers.geneCountsIn). */
+        this.geneCountsInView$ = new BehaviorSubject(null);
         this.densityStats$ = new BehaviorSubject(null);
         /** Latest (dataset, view, selection) the spatial subscription saw, so a slice
          *  change can rebuild the markers for the new plane. */
@@ -28483,6 +29296,10 @@ class NapariVisualizerService extends BaseStoreVisualizer {
          *  round-trip, so a fast sequence of colour-by changes can resolve out of
          *  order. Only the newest rebuild is allowed to touch the layer. */
         this.spatialRebuildToken = 0;
+        /** "x reloading…" at the bottom of the canvas: the tile layers' loads and the observations'. */
+        this.loadingBadge = null;
+        this.tileLoading = [];
+        this.observationsLoading = 0;
         /** Monotonic load generation. Bumped by {@link reset} and {@link cancelLoading}; the frame-loading
          *  loops (volume assembly, surface preload) capture it and bail when it changes, so a Cancel (or a
          *  new plot) actually stops fetching frames instead of running to completion in the background. */
@@ -29279,6 +30096,12 @@ class NapariVisualizerService extends BaseStoreVisualizer {
      * The overview navigator for a 2D view with an image: a coarse thumbnail of the whole
      * image with the viewport on it; click or drag to pan at the current zoom (as OSD).
      */
+    showLoading() {
+        if (!this.host)
+            return;
+        this.loadingBadge ??= new NapariLoadingBadge(this.host);
+        this.loadingBadge.set([...(this.observationsLoading > 0 ? ['Observations'] : []), ...this.tileLoading]);
+    }
     installNavigator(z) {
         this.navigator?.destroy();
         this.navigator = null;
@@ -29794,6 +30617,11 @@ class NapariVisualizerService extends BaseStoreVisualizer {
                 return spatialContinuousLut(node?.data?.value, this.currentReverse, view.continuousColormap);
             },
             estimateChanged: (e) => this.transcriptEstimate$.next(e),
+            geneCountsChanged: (c) => this.geneCountsInView$.next(c),
+            loadingChanged: (layers) => {
+                this.tileLoading = layers;
+                this.showLoading();
+            },
             densityChanged: (d) => this.densityStats$.next(d),
             polygonsShownChanged: () => {
                 if (this.spatialPoints)
@@ -30290,6 +31118,8 @@ class NapariVisualizerService extends BaseStoreVisualizer {
         // Resolve colours BEFORE touching the scene: a gene fetch can fail or be
         // superseded, and dropping the existing layer first would blank the view.
         let faceColor;
+        this.observationsLoading++;
+        this.showLoading();
         try {
             faceColor = dataset
                 ? await this.spatialFaceColors(dataset, view, selection)
@@ -30299,6 +31129,10 @@ class NapariVisualizerService extends BaseStoreVisualizer {
             console.warn('[napari-js] spatial colouring failed — falling back to a flat colour', err);
             faceColor = NapariVisualizerService.SPATIAL_NEUTRAL_COLOR;
         }
+        finally {
+            this.observationsLoading--;
+            this.showLoading();
+        }
         // A newer rebuild (or a teardown) started while the vector was in flight.
         if (token !== this.spatialRebuildToken || this.viewer !== viewer)
             return;
@@ -30725,6 +31559,8 @@ class NapariVisualizerService extends BaseStoreVisualizer {
         // layer first would blank the view.
         let enc = null;
         if (dataset) {
+            this.observationsLoading++;
+            this.showLoading();
             try {
                 enc = await this.spatialScalar3d(dataset, view);
             }
@@ -30732,6 +31568,10 @@ class NapariVisualizerService extends BaseStoreVisualizer {
                 console.warn('[napari-js] spatial 3D colouring failed — falling back to a flat colour', err);
                 enc = null;
             }
+            finally {
+                this.observationsLoading--;
+                this.showLoading();
+            }
         }
         if (token !== this.spatialRebuildToken || this.viewer !== viewer)
             return;
@@ -31798,6 +32638,10 @@ class NapariVisualizerService extends BaseStoreVisualizer {
         this.scaleBar = null;
         this.navigator?.destroy();
         this.navigator = null;
+        this.loadingBadge?.destroy();
+        this.loadingBadge = null;
+        this.tileLoading = [];
+        this.observationsLoading = 0;
         this.regionOverlay?.destroy();
         this.regionOverlay = null;
         this.axesLabels?.destroy();
@@ -33122,7 +33966,11 @@ class RoutingVisualizerService {
             ...(port.getTranscriptCounts ? {
                 transcriptCounts: (genes) => port.getTranscriptCounts(genes),
             } : {}),
+            ...(port.getMarkerGenes ? {
+                markerGenes: (column, perGroup) => port.getMarkerGenes(column, perGroup),
+            } : {}),
             getTranscriptEstimate$: () => this.napari.transcriptEstimate$.asObservable(),
+            getGeneCountsInView$: () => this.napari.geneCountsInView$.asObservable(),
             getDensityStats$: () => this.napari.densityStats$.asObservable(),
             categoryColors: async (name) => {
                 const column = await port.getColumn(name);