@jax-data-science/sci-image-visualizer 0.12.0 → 0.13.0

package/fesm2022/{jax-data-science-sci-image-visualizer-jax-data-science-sci-image-visualizer-a68Hw5rw.mjs → jax-data-science-sci-image-visualizer-jax-data-science-sci-image-visualizer-DURPqs5a.mjs}

@@ -5,8 +5,8 @@ import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { LruCache, Colormap, buildLut, parseColor as parseColor$1, worldViewport, luminance8, WHEEL_DELTA_CLAMP, bitmapToScalar, decodeImageRGBA, readLevel, chooseStitchLevel, assembleVolume, colormapFromLut, tintColormap, reverseColormap, histogramScalar, MultiChannelImageView, projectPoint, MultiChannelVolumeView, heightField, pointSymbolCode, PointPicker, Viewer, windowGamma, resolveColormap } from 'napari-js';
 import { BehaviorSubject, firstValueFrom, Subject, Subscription, of, Observable, combineLatest, defer, from, EMPTY, merge } from 'rxjs';
 import { timeout, debounceTime, takeUntil, switchMap, catchError, startWith, map } from 'rxjs/operators';
-import * as ort from 'onnxruntime-web';
 import { smoothMesh, surfaceNets, pointInRing as pointInRing$2, ringArea as ringArea$1, traceContours, rasterizePolygon as rasterizePolygon$1, floodFill } from 'napari-js/geometry';
+import * as ort from 'onnxruntime-web';
 import { encode } from 'fast-png';
 import { decompress } from 'fzstd';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -2927,6 +2927,457 @@ function spatialContinuousLut(colormapValue, reverse = false, override) {
     return isGrayscaleLut(lut) ? buildColormapLut('Viridis', reverse) : lut;
 }
 
+/** Points per line at most: the longest line is resampled at about one point per `step` px. */
+const MAX_POINTS = 2048;
+/** Points per line when matching lines across slices. */
+const MATCH_POINTS = 32;
+/**
+ * The sheet through `slices`' lines, in image pixels (x, y) and slice indices (z: slice k's line at
+ * z = k). Every line is resampled at the same number of points, evenly along its length (about one
+ * per `step` px of the longest), so a line shared by the strips above and below it is one row of
+ * vertices. Lines are matched between neighbouring slices closest first, each at most once, and only
+ * when their boxes overlap; a line without a match ends the sheet there. Empty without two slices
+ * with lines.
+ */
+function loftLines(slices, step = 1) {
+    const stack = slices
+        .map((s) => ({ z: s.z, lines: s.lines.filter((l) => l.length >= 4) }))
+        .filter((s) => s.lines.length)
+        .sort((a, b) => a.z - b.z);
+    if (stack.length < 2)
+        return { vertices: new Float32Array(0), faces: new Uint32Array(0) };
+    let longest = 0;
+    for (const s of stack)
+        for (const l of s.lines)
+            longest = Math.max(longest, lineLength(l));
+    const n = Math.min(MAX_POINTS, Math.max(2, Math.ceil(longest / Math.max(step, 1e-6)) + 1));
+    // Each line's resampled points, once: rows of n vertices.
+    const rows = [];
+    const verts = [];
+    for (const s of stack) {
+        rows.push(s.lines.map((l) => {
+            const first = verts.length / 3;
+            const pts = resample(l, n);
+            for (let i = 0; i < n; i++)
+                verts.push(pts[2 * i], pts[2 * i + 1], s.z);
+            return { first, probe: resample(l, MATCH_POINTS), box: lineBox(l) };
+        }));
+    }
+    const faces = [];
+    for (let k = 0; k + 1 < rows.length; k++) {
+        for (const { a, b, reversed } of matchLines(rows[k], rows[k + 1])) {
+            const at = (i) => b.first + (reversed ? n - 1 - i : i);
+            for (let i = 0; i + 1 < n; i++) {
+                const a0 = a.first + i, a1 = a0 + 1, b0 = at(i), b1 = at(i + 1);
+                faces.push(a0, b0, a1, a1, b0, b1);
+            }
+        }
+    }
+    if (!faces.length)
+        return { vertices: new Float32Array(0), faces: new Uint32Array(0) };
+    return { vertices: Float32Array.from(verts), faces: Uint32Array.from(faces) };
+}
+/** Pairs of lines of two neighbouring slices: closest first (mean distance, either direction), each once. */
+function matchLines(as, bs) {
+    const pairs = [];
+    as.forEach((a, i) => bs.forEach((b, j) => {
+        if (!boxesOverlap(a.box, b.box))
+            return;
+        const forward = meanDistance(a.probe, b.probe, false);
+        const backward = meanDistance(a.probe, b.probe, true);
+        pairs.push({ a: i, b: j, cost: Math.min(forward, backward), reversed: backward < forward });
+    }));
+    pairs.sort((p, q) => p.cost - q.cost);
+    const usedA = new Set();
+    const usedB = new Set();
+    const out = [];
+    for (const p of pairs) {
+        if (usedA.has(p.a) || usedB.has(p.b))
+            continue;
+        usedA.add(p.a);
+        usedB.add(p.b);
+        out.push({ a: as[p.a], b: bs[p.b], reversed: p.reversed });
+    }
+    return out;
+}
+function meanDistance(a, b, reversed) {
+    const n = a.length >> 1;
+    let sum = 0;
+    for (let i = 0; i < n; i++) {
+        const j = reversed ? n - 1 - i : i;
+        sum += Math.hypot(a[2 * i] - b[2 * j], a[2 * i + 1] - b[2 * j + 1]);
+    }
+    return sum / n;
+}
+/** `n` points evenly spaced along the polyline, both ends kept. */
+function resample(line, n) {
+    const m = line.length >> 1;
+    const cumulative = new Float64Array(m);
+    for (let i = 1; i < m; i++) {
+        cumulative[i] =
+            cumulative[i - 1] + Math.hypot(line[2 * i] - line[2 * i - 2], line[2 * i + 1] - line[2 * i - 1]);
+    }
+    const total = cumulative[m - 1];
+    const out = new Float64Array(2 * n);
+    let seg = 1;
+    for (let i = 0; i < n; i++) {
+        const d = n === 1 ? 0 : (total * i) / (n - 1);
+        while (seg < m - 1 && cumulative[seg] < d)
+            seg++;
+        const span = cumulative[seg] - cumulative[seg - 1];
+        const t = span > 0 ? Math.min(1, Math.max(0, (d - cumulative[seg - 1]) / span)) : 0;
+        out[2 * i] = line[2 * seg - 2] + t * (line[2 * seg] - line[2 * seg - 2]);
+        out[2 * i + 1] = line[2 * seg - 1] + t * (line[2 * seg + 1] - line[2 * seg - 1]);
+    }
+    return out;
+}
+function lineLength(line) {
+    let len = 0;
+    for (let i = 2; i + 1 < line.length; i += 2)
+        len += Math.hypot(line[i] - line[i - 2], line[i + 1] - line[i - 1]);
+    return len;
+}
+function lineBox(line) {
+    const box = [Infinity, Infinity, -Infinity, -Infinity];
+    for (let i = 0; i + 1 < line.length; i += 2) {
+        box[0] = Math.min(box[0], line[i]);
+        box[1] = Math.min(box[1], line[i + 1]);
+        box[2] = Math.max(box[2], line[i]);
+        box[3] = Math.max(box[3], line[i + 1]);
+    }
+    return box;
+}
+/** Whether the boxes overlap, each grown by a tenth of its larger side (a flat line has a thin box). */
+function boxesOverlap(a, b) {
+    const ga = 0.1 * Math.max(a[2] - a[0], a[3] - a[1]);
+    const gb = 0.1 * Math.max(b[2] - b[0], b[3] - b[1]);
+    const g = ga + gb;
+    return a[0] - g <= b[2] && b[0] - g <= a[2] && a[1] - g <= b[3] && b[1] - g <= a[3];
+}
+
+/**
+ * The 3D reconstruction of a region from its outlines on a stack of slices: each slice's outlines
+ * filled (each feature even-odd, the features as their union) into a voxel mask, the mask's
+ * boundary meshed by surface nets and smoothed; and its open lines lofted into a sheet.
+ *
+ * Pure: usable from workers.
+ */
+/**
+ * The mesh of the region outlined by `slices`, in image pixels (x, y) and slice indices (z: slice
+ * k's plane at z = k): the filled outlines' surface, and the sheet through the lines (see
+ * {@link loftLines}). Empty when no slice has an area and no two slices have lines.
+ */
+function reconstruct(slices, opts = {}) {
+    const filled = fill(slices, opts);
+    const lines = slices.filter((s) => s.lines?.length);
+    if (!lines.length)
+        return filled;
+    const sheet = loftLines(lines.map((s) => ({ z: s.z, lines: s.lines ?? [] })), opts.pixelStep ?? 1);
+    return mergeMeshes(filled, sheet);
+}
+/** The surface of the filled outlines. */
+function fill(slices, opts) {
+    let x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity, z0 = Infinity, z1 = -Infinity;
+    for (const s of slices) {
+        for (const r of s.rings) {
+            for (let i = 0; i + 1 < r.length; i += 2) {
+                if (r[i] < x0)
+                    x0 = r[i];
+                if (r[i] > x1)
+                    x1 = r[i];
+                if (r[i + 1] < y0)
+                    y0 = r[i + 1];
+                if (r[i + 1] > y1)
+                    y1 = r[i + 1];
+            }
+        }
+        if (s.rings.length) {
+            z0 = Math.min(z0, s.z);
+            z1 = Math.max(z1, s.z);
+        }
+    }
+    if (!(x1 > x0) || !(y1 > y0))
+        return { vertices: new Float32Array(0), faces: new Uint32Array(0) };
+    const nz = z1 - z0 + 1;
+    const maxVoxels = opts.maxVoxels ?? 32_000_000;
+    let step = Math.max(opts.pixelStep ?? 1, 1e-6);
+    while (Math.ceil((x1 - x0) / step) * Math.ceil((y1 - y0) / step) * nz > maxVoxels)
+        step *= 1.25;
+    const nx = Math.max(1, Math.ceil((x1 - x0) / step));
+    const ny = Math.max(1, Math.ceil((y1 - y0) / step));
+    const mask = new Uint8Array(nx * ny * nz);
+    for (const s of slices) {
+        for (const rings of featureRings(s.rings, s.ringGroups)) {
+            fillSlice(mask, nx, ny, (s.z - z0) * nx * ny, rings, x0, y0, step);
+        }
+    }
+    // Voxel i spanning [i, i + 1) (napari-js centres it on i): the scaling below maps cell edges to px.
+    const mesh = smoothMesh(surfaceNets(mask, [nx, ny, nz], { origin: [0.5, 0.5, 0.5] }), {
+        iterations: opts.smooth ?? 2,
+    });
+    const v = mesh.vertices;
+    for (let i = 0; i < v.length; i += 3) {
+        v[i] = x0 + v[i] * step;
+        v[i + 1] = y0 + v[i + 1] * step;
+        // Voxel k spans [k, k+1) with its centre (the slice) at k + 0.5.
+        v[i + 2] = z0 + v[i + 2] - 0.5;
+    }
+    return mesh;
+}
+/**
+ * Fill one slice's outlines into `mask`, a `width × height` grid of image px (pixel i spanning
+ * [i, i + 1)), as the reconstruction fills them: each feature even-odd, the features as their
+ * union, sampled at pixel centres. Cells already set stay set. Open lines enclose nothing.
+ */
+function fillOutlines(mask, width, height, outlines) {
+    for (const rings of featureRings(outlines.rings, outlines.ringGroups)) {
+        fillSlice(mask, width, height, 0, rings, 0, 0, 1);
+    }
+}
+/** `a` and `b` as one mesh. */
+function mergeMeshes(a, b) {
+    if (!b.faces.length)
+        return a;
+    if (!a.faces.length)
+        return b;
+    const vertices = new Float32Array(a.vertices.length + b.vertices.length);
+    vertices.set(a.vertices);
+    vertices.set(b.vertices, a.vertices.length);
+    const faces = new Uint32Array(a.faces.length + b.faces.length);
+    faces.set(a.faces);
+    const offset = a.vertices.length / 3;
+    for (let i = 0; i < b.faces.length; i++)
+        faces[a.faces.length + i] = b.faces[i] + offset;
+    return { vertices, faces };
+}
+/**
+ * Fill one feature into one slice of the mask: even-odd over its `rings`, sampled at voxel
+ * centres. Cells already set stay set, so the features of a slice fill as their union.
+ */
+function fillSlice(mask, nx, ny, offset, rings, x0, y0, step) {
+    const crossings = [];
+    // Only the rows the feature spans.
+    let top = Infinity, bottom = -Infinity;
+    for (const r of rings) {
+        for (let i = 1; i < r.length; i += 2) {
+            if (r[i] < top)
+                top = r[i];
+            if (r[i] > bottom)
+                bottom = r[i];
+        }
+    }
+    const j0 = Math.max(0, Math.floor((top - y0) / step - 0.5));
+    const j1 = Math.min(ny - 1, Math.ceil((bottom - y0) / step - 0.5));
+    for (let j = j0; j <= j1; j++) {
+        const y = y0 + (j + 0.5) * step;
+        crossings.length = 0;
+        for (const r of rings) {
+            const n = r.length >> 1;
+            for (let i = 0, k = n - 1; i < n; k = i++) {
+                const ya = r[2 * i + 1], yb = r[2 * k + 1];
+                if (ya > y !== yb > y) {
+                    const xa = r[2 * i], xb = r[2 * k];
+                    crossings.push(xa + ((y - ya) * (xb - xa)) / (yb - ya));
+                }
+            }
+        }
+        if (crossings.length < 2)
+            continue;
+        crossings.sort((a, b) => a - b);
+        const row = offset + j * nx;
+        for (let c = 0; c + 1 < crossings.length; c += 2) {
+            const from = Math.max(0, Math.ceil((crossings[c] - x0) / step - 0.5));
+            const to = Math.min(nx - 1, Math.floor((crossings[c + 1] - x0) / step - 0.5));
+            for (let i = from; i <= to; i++)
+                mask[row + i] = 1;
+        }
+    }
+}
+/**
+ * The area inside `rings` (interleaved `x, y`), even-odd: a ring inside an odd number of others is
+ * a hole. Exact for rings that do not cross (a polygon set's exteriors and holes).
+ */
+function ringsArea(rings) {
+    const boxes = rings.map(ringBox);
+    let area = 0;
+    for (let i = 0; i < rings.length; i++) {
+        const r = rings[i];
+        if (r.length < 6)
+            continue;
+        const x = r[0], y = r[1];
+        let depth = 0;
+        for (let j = 0; j < rings.length; j++) {
+            if (j === i)
+                continue;
+            const b = boxes[j];
+            if (x < b[0] || x > b[2] || y < b[1] || y > b[3])
+                continue;
+            if (pointInRing$2(x, y, rings[j]))
+                depth++;
+        }
+        area += (depth % 2 ? -1 : 1) * Math.abs(ringArea$1(r));
+    }
+    return Math.max(0, area);
+}
+/**
+ * The rings of each feature (see {@link SliceOutlines.ringGroups}), in the order first met; one
+ * feature of every ring without `groups`.
+ */
+function featureRings(rings, groups) {
+    if (!groups || !rings.length)
+        return rings.length ? [rings.slice()] : [];
+    const byGroup = new Map();
+    rings.forEach((r, i) => {
+        const g = groups[i] ?? 0;
+        const feature = byGroup.get(g);
+        if (feature)
+            feature.push(r);
+        else
+            byGroup.set(g, [r]);
+    });
+    return [...byGroup.values()];
+}
+/**
+ * The area of a slice's outlines (px²): each feature's (even-odd, see {@link ringsArea}), the
+ * features as their union, so a feature inside or over another of the slice adds only what it
+ * covers beyond it. Features whose extents overlap are measured together, by the length of their
+ * union along each row, exact between the rows through their vertices where no outline crosses
+ * another (and refined where one does).
+ */
+function outlinesArea(rings, groups) {
+    const features = featureRings(rings, groups).map((f) => ({ rings: f, box: featureBox(f) }));
+    if (features.length < 2)
+        return features.length ? ringsArea(features[0].rings) : 0;
+    // Features whose extents overlap, joined (by x, so a feature meets only those it can overlap).
+    features.sort((a, b) => a.box[0] - b.box[0]);
+    const parent = features.map((_, i) => i);
+    const root = (i) => (parent[i] === i ? i : (parent[i] = root(parent[i])));
+    for (let i = 0; i < features.length; i++) {
+        const a = features[i].box;
+        for (let j = i + 1; j < features.length && features[j].box[0] < a[2]; j++) {
+            const b = features[j].box;
+            if (b[1] < a[3] && a[1] < b[3])
+                parent[root(j)] = root(i);
+        }
+    }
+    const clusters = new Map();
+    features.forEach((f, i) => {
+        const r = root(i);
+        const cluster = clusters.get(r);
+        if (cluster)
+            cluster.push(f.rings);
+        else
+            clusters.set(r, [f.rings]);
+    });
+    let area = 0;
+    for (const cluster of clusters.values())
+        area += cluster.length === 1 ? ringsArea(cluster[0]) : unionArea(cluster);
+    return area;
+}
+/**
+ * The volume of the region outlined by `slices`, in px² × slices (one slice thick per outline):
+ * the sum of each slice's area (see {@link outlinesArea}; Cavalieri's estimator). Times µm per px²
+ * and per slice, µm³.
+ */
+function outlinedVolume(slices) {
+    let v = 0;
+    for (const s of slices)
+        v += outlinesArea(s.rings, s.ringGroups);
+    return v;
+}
+/** The area of the union of `features` (each even-odd over its rings), row band by row band. */
+function unionArea(features) {
+    const ys = [];
+    for (const f of features)
+        for (const r of f)
+            for (let i = 1; i < r.length; i += 2)
+                ys.push(r[i]);
+    ys.sort((a, b) => a - b);
+    let area = 0;
+    for (let k = 0; k + 1 < ys.length; k++)
+        if (ys[k + 1] > ys[k])
+            area += bandArea(features, ys[k], ys[k + 1], 0);
+    return area;
+}
+/**
+ * The union's area between rows `a` and `b`. Between two vertices' rows its width along a row is
+ * linear in y unless outlines cross there: then the band is halved until it is (or thin enough).
+ */
+function bandArea(features, a, b, depth) {
+    const h = b - a;
+    const at = (t) => unionWidth(features, a + t * h);
+    const mid = at(0.5);
+    if (depth >= 10)
+        return h * mid;
+    const e = 1e-6;
+    const tol = 1e-9 * (1 + Math.abs(mid));
+    const linear = Math.abs(at(0.25) + at(0.75) - 2 * mid) <= tol && Math.abs(at(e) + at(1 - e) - 2 * mid) <= tol;
+    if (linear)
+        return h * mid;
+    const m = a + h / 2;
+    return bandArea(features, a, m, depth + 1) + bandArea(features, m, b, depth + 1);
+}
+/** The length of the union of `features` along the row `y`. */
+function unionWidth(features, y) {
+    const spans = [];
+    const xs = [];
+    for (const f of features) {
+        xs.length = 0;
+        for (const r of f) {
+            const n = r.length >> 1;
+            for (let i = 0, k = n - 1; i < n; k = i++) {
+                const ya = r[2 * i + 1], yb = r[2 * k + 1];
+                if (ya > y !== yb > y)
+                    xs.push(r[2 * i] + ((y - ya) * (r[2 * k] - r[2 * i])) / (yb - ya));
+            }
+        }
+        xs.sort((p, q) => p - q);
+        for (let c = 0; c + 1 < xs.length; c += 2)
+            spans.push([xs[c], xs[c + 1]]);
+    }
+    spans.sort((p, q) => p[0] - q[0]);
+    let width = 0, from = -Infinity, to = -Infinity;
+    for (const [s0, s1] of spans) {
+        if (s0 > to) {
+            if (to > from)
+                width += to - from;
+            from = s0;
+            to = s1;
+        }
+        else if (s1 > to)
+            to = s1;
+    }
+    if (to > from)
+        width += to - from;
+    return width;
+}
+/** The extent of a feature's rings. */
+function featureBox(rings) {
+    const box = [Infinity, Infinity, -Infinity, -Infinity];
+    for (const r of rings) {
+        const [x0, y0, x1, y1] = ringBox(r);
+        box[0] = Math.min(box[0], x0);
+        box[1] = Math.min(box[1], y0);
+        box[2] = Math.max(box[2], x1);
+        box[3] = Math.max(box[3], y1);
+    }
+    return box;
+}
+function ringBox(r) {
+    let x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
+    for (let i = 0; i + 1 < r.length; i += 2) {
+        if (r[i] < x0)
+            x0 = r[i];
+        if (r[i] > x1)
+            x1 = r[i];
+        if (r[i + 1] < y0)
+            y0 = r[i + 1];
+        if (r[i + 1] > y1)
+            y1 = r[i + 1];
+    }
+    return [x0, y0, x1, y1];
+}
+
 /**
  * Pure ring (closed polyline) helpers: bounds, containment, vertex dropping and
  * simplification. No DOM, no Angular, no `this` — usable from workers.
@@ -3344,6 +3795,74 @@ function selectInRegionsProjected(screen, count, regions) {
     }
     return { mask, count: hits };
 }
+/**
+ * Observations inside the VOLUME a stack of outlines encloses: a region class (an
+ * atlas structure with its substructures) through every section of the dataset's
+ * reference volume, as its 3D reconstruction shows it.
+ *
+ * The outlines are in the volume's own grid — x, y in voxels, z the slice — which
+ * is where regions imported onto the volume's stack sit. An observation is in voxel
+ * `(⌊x / vx⌋, ⌊y / vy⌋, ⌊z / vz⌋)` (see `volumeImageRef`), and selected when its
+ * slice's outlines cover that voxel, filled as the reconstruction fills them. One
+ * slice is rasterised at a time, so a structure through the whole brain costs one
+ * slice's mask, not the volume's. An observation outside the volume, or without a
+ * z, is never selected.
+ */
+function selectInClassVolumes(observations, volume, slices) {
+    const n = observations.count;
+    const mask = new Uint8Array(n);
+    const z = observations.z;
+    const { width, height, depth } = volume;
+    const [vx, vy, vz] = volume.voxelSize;
+    const bySlice = new Map();
+    for (const s of slices) {
+        if (!s.rings.length || s.z < 0 || s.z >= depth)
+            continue;
+        const list = bySlice.get(s.z);
+        if (list)
+            list.push(s);
+        else
+            bySlice.set(s.z, [s]);
+    }
+    if (!z || !bySlice.size)
+        return { mask, count: 0 };
+    // The observations of each outlined slice (a counting sort by slice).
+    const sliceOf = new Int32Array(n).fill(-1);
+    const counts = new Uint32Array(depth + 1);
+    for (let i = 0; i < n; i++) {
+        const k = Math.floor(z[i] / vz);
+        if (!bySlice.has(k))
+            continue;
+        sliceOf[i] = k;
+        counts[k + 1]++;
+    }
+    for (let k = 0; k < depth; k++)
+        counts[k + 1] += counts[k];
+    const order = new Uint32Array(counts[depth]);
+    const at = counts.slice(0, depth);
+    for (let i = 0; i < n; i++)
+        if (sliceOf[i] >= 0)
+            order[at[sliceOf[i]]++] = i;
+    const plane = new Uint8Array(width * height);
+    let count = 0;
+    for (const [k, outlines] of bySlice) {
+        plane.fill(0);
+        for (const s of outlines)
+            fillOutlines(plane, width, height, s);
+        for (let o = counts[k]; o < counts[k + 1]; o++) {
+            const i = order[o];
+            const px = Math.floor(observations.x[i] / vx);
+            const py = Math.floor(observations.y[i] / vy);
+            if (px < 0 || py < 0 || px >= width || py >= height)
+                continue;
+            if (plane[py * width + px]) {
+                mask[i] = 1;
+                count++;
+            }
+        }
+    }
+    return { mask, count };
+}
 /**
  * Whether two selections hold exactly the same observations.
  *
@@ -3389,6 +3908,16 @@ function selectByCategory(codes, code) {
 class SpatialSelectionStore {
     constructor() {
         this.selection$ = new BehaviorSubject(emptySelection());
+        /** Bumped by every write, a clear of nothing included (see {@link revision}). */
+        this.writes = 0;
+    }
+    /**
+     * How many times the selection was written (set or cleared, by any writer). A selection
+     * computed asynchronously compares it before publishing: a newer write — a Clear, a legend
+     * click, a linked chart's brush — supersedes it.
+     */
+    revision() {
+        return this.writes;
     }
     /** Emits on every change, including a clear. */
     getSelection$() {
@@ -3406,9 +3935,11 @@ class SpatialSelectionStore {
      *  "selected nothing" ROI visibly clears rather than silently keeping the
      *  previous selection on screen. */
     set(selection) {
+        this.writes++;
         this.selection$.next(selection);
     }
     clear() {
+        this.writes++;
         if (this.selection$.value.count === 0 && this.selection$.value.mask.length === 0)
             return;
         this.selection$.next(emptySelection());
@@ -4135,447 +4666,6 @@ function abortable(promise, signal) {
     });
 }
 
-/** Points per line at most: the longest line is resampled at about one point per `step` px. */
-const MAX_POINTS = 2048;
-/** Points per line when matching lines across slices. */
-const MATCH_POINTS = 32;
-/**
- * The sheet through `slices`' lines, in image pixels (x, y) and slice indices (z: slice k's line at
- * z = k). Every line is resampled at the same number of points, evenly along its length (about one
- * per `step` px of the longest), so a line shared by the strips above and below it is one row of
- * vertices. Lines are matched between neighbouring slices closest first, each at most once, and only
- * when their boxes overlap; a line without a match ends the sheet there. Empty without two slices
- * with lines.
- */
-function loftLines(slices, step = 1) {
-    const stack = slices
-        .map((s) => ({ z: s.z, lines: s.lines.filter((l) => l.length >= 4) }))
-        .filter((s) => s.lines.length)
-        .sort((a, b) => a.z - b.z);
-    if (stack.length < 2)
-        return { vertices: new Float32Array(0), faces: new Uint32Array(0) };
-    let longest = 0;
-    for (const s of stack)
-        for (const l of s.lines)
-            longest = Math.max(longest, lineLength(l));
-    const n = Math.min(MAX_POINTS, Math.max(2, Math.ceil(longest / Math.max(step, 1e-6)) + 1));
-    // Each line's resampled points, once: rows of n vertices.
-    const rows = [];
-    const verts = [];
-    for (const s of stack) {
-        rows.push(s.lines.map((l) => {
-            const first = verts.length / 3;
-            const pts = resample(l, n);
-            for (let i = 0; i < n; i++)
-                verts.push(pts[2 * i], pts[2 * i + 1], s.z);
-            return { first, probe: resample(l, MATCH_POINTS), box: lineBox(l) };
-        }));
-    }
-    const faces = [];
-    for (let k = 0; k + 1 < rows.length; k++) {
-        for (const { a, b, reversed } of matchLines(rows[k], rows[k + 1])) {
-            const at = (i) => b.first + (reversed ? n - 1 - i : i);
-            for (let i = 0; i + 1 < n; i++) {
-                const a0 = a.first + i, a1 = a0 + 1, b0 = at(i), b1 = at(i + 1);
-                faces.push(a0, b0, a1, a1, b0, b1);
-            }
-        }
-    }
-    if (!faces.length)
-        return { vertices: new Float32Array(0), faces: new Uint32Array(0) };
-    return { vertices: Float32Array.from(verts), faces: Uint32Array.from(faces) };
-}
-/** Pairs of lines of two neighbouring slices: closest first (mean distance, either direction), each once. */
-function matchLines(as, bs) {
-    const pairs = [];
-    as.forEach((a, i) => bs.forEach((b, j) => {
-        if (!boxesOverlap(a.box, b.box))
-            return;
-        const forward = meanDistance(a.probe, b.probe, false);
-        const backward = meanDistance(a.probe, b.probe, true);
-        pairs.push({ a: i, b: j, cost: Math.min(forward, backward), reversed: backward < forward });
-    }));
-    pairs.sort((p, q) => p.cost - q.cost);
-    const usedA = new Set();
-    const usedB = new Set();
-    const out = [];
-    for (const p of pairs) {
-        if (usedA.has(p.a) || usedB.has(p.b))
-            continue;
-        usedA.add(p.a);
-        usedB.add(p.b);
-        out.push({ a: as[p.a], b: bs[p.b], reversed: p.reversed });
-    }
-    return out;
-}
-function meanDistance(a, b, reversed) {
-    const n = a.length >> 1;
-    let sum = 0;
-    for (let i = 0; i < n; i++) {
-        const j = reversed ? n - 1 - i : i;
-        sum += Math.hypot(a[2 * i] - b[2 * j], a[2 * i + 1] - b[2 * j + 1]);
-    }
-    return sum / n;
-}
-/** `n` points evenly spaced along the polyline, both ends kept. */
-function resample(line, n) {
-    const m = line.length >> 1;
-    const cumulative = new Float64Array(m);
-    for (let i = 1; i < m; i++) {
-        cumulative[i] =
-            cumulative[i - 1] + Math.hypot(line[2 * i] - line[2 * i - 2], line[2 * i + 1] - line[2 * i - 1]);
-    }
-    const total = cumulative[m - 1];
-    const out = new Float64Array(2 * n);
-    let seg = 1;
-    for (let i = 0; i < n; i++) {
-        const d = n === 1 ? 0 : (total * i) / (n - 1);
-        while (seg < m - 1 && cumulative[seg] < d)
-            seg++;
-        const span = cumulative[seg] - cumulative[seg - 1];
-        const t = span > 0 ? Math.min(1, Math.max(0, (d - cumulative[seg - 1]) / span)) : 0;
-        out[2 * i] = line[2 * seg - 2] + t * (line[2 * seg] - line[2 * seg - 2]);
-        out[2 * i + 1] = line[2 * seg - 1] + t * (line[2 * seg + 1] - line[2 * seg - 1]);
-    }
-    return out;
-}
-function lineLength(line) {
-    let len = 0;
-    for (let i = 2; i + 1 < line.length; i += 2)
-        len += Math.hypot(line[i] - line[i - 2], line[i + 1] - line[i - 1]);
-    return len;
-}
-function lineBox(line) {
-    const box = [Infinity, Infinity, -Infinity, -Infinity];
-    for (let i = 0; i + 1 < line.length; i += 2) {
-        box[0] = Math.min(box[0], line[i]);
-        box[1] = Math.min(box[1], line[i + 1]);
-        box[2] = Math.max(box[2], line[i]);
-        box[3] = Math.max(box[3], line[i + 1]);
-    }
-    return box;
-}
-/** Whether the boxes overlap, each grown by a tenth of its larger side (a flat line has a thin box). */
-function boxesOverlap(a, b) {
-    const ga = 0.1 * Math.max(a[2] - a[0], a[3] - a[1]);
-    const gb = 0.1 * Math.max(b[2] - b[0], b[3] - b[1]);
-    const g = ga + gb;
-    return a[0] - g <= b[2] && b[0] - g <= a[2] && a[1] - g <= b[3] && b[1] - g <= a[3];
-}
-
-/**
- * The 3D reconstruction of a region from its outlines on a stack of slices: each slice's outlines
- * filled (each feature even-odd, the features as their union) into a voxel mask, the mask's
- * boundary meshed by surface nets and smoothed; and its open lines lofted into a sheet.
- *
- * Pure: usable from workers.
- */
-/**
- * The mesh of the region outlined by `slices`, in image pixels (x, y) and slice indices (z: slice
- * k's plane at z = k): the filled outlines' surface, and the sheet through the lines (see
- * {@link loftLines}). Empty when no slice has an area and no two slices have lines.
- */
-function reconstruct(slices, opts = {}) {
-    const filled = fill(slices, opts);
-    const lines = slices.filter((s) => s.lines?.length);
-    if (!lines.length)
-        return filled;
-    const sheet = loftLines(lines.map((s) => ({ z: s.z, lines: s.lines ?? [] })), opts.pixelStep ?? 1);
-    return mergeMeshes(filled, sheet);
-}
-/** The surface of the filled outlines. */
-function fill(slices, opts) {
-    let x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity, z0 = Infinity, z1 = -Infinity;
-    for (const s of slices) {
-        for (const r of s.rings) {
-            for (let i = 0; i + 1 < r.length; i += 2) {
-                if (r[i] < x0)
-                    x0 = r[i];
-                if (r[i] > x1)
-                    x1 = r[i];
-                if (r[i + 1] < y0)
-                    y0 = r[i + 1];
-                if (r[i + 1] > y1)
-                    y1 = r[i + 1];
-            }
-        }
-        if (s.rings.length) {
-            z0 = Math.min(z0, s.z);
-            z1 = Math.max(z1, s.z);
-        }
-    }
-    if (!(x1 > x0) || !(y1 > y0))
-        return { vertices: new Float32Array(0), faces: new Uint32Array(0) };
-    const nz = z1 - z0 + 1;
-    const maxVoxels = opts.maxVoxels ?? 32_000_000;
-    let step = Math.max(opts.pixelStep ?? 1, 1e-6);
-    while (Math.ceil((x1 - x0) / step) * Math.ceil((y1 - y0) / step) * nz > maxVoxels)
-        step *= 1.25;
-    const nx = Math.max(1, Math.ceil((x1 - x0) / step));
-    const ny = Math.max(1, Math.ceil((y1 - y0) / step));
-    const mask = new Uint8Array(nx * ny * nz);
-    for (const s of slices) {
-        for (const rings of featureRings(s.rings, s.ringGroups)) {
-            fillSlice(mask, nx, ny, (s.z - z0) * nx * ny, rings, x0, y0, step);
-        }
-    }
-    // Voxel i spanning [i, i + 1) (napari-js centres it on i): the scaling below maps cell edges to px.
-    const mesh = smoothMesh(surfaceNets(mask, [nx, ny, nz], { origin: [0.5, 0.5, 0.5] }), {
-        iterations: opts.smooth ?? 2,
-    });
-    const v = mesh.vertices;
-    for (let i = 0; i < v.length; i += 3) {
-        v[i] = x0 + v[i] * step;
-        v[i + 1] = y0 + v[i + 1] * step;
-        // Voxel k spans [k, k+1) with its centre (the slice) at k + 0.5.
-        v[i + 2] = z0 + v[i + 2] - 0.5;
-    }
-    return mesh;
-}
-/** `a` and `b` as one mesh. */
-function mergeMeshes(a, b) {
-    if (!b.faces.length)
-        return a;
-    if (!a.faces.length)
-        return b;
-    const vertices = new Float32Array(a.vertices.length + b.vertices.length);
-    vertices.set(a.vertices);
-    vertices.set(b.vertices, a.vertices.length);
-    const faces = new Uint32Array(a.faces.length + b.faces.length);
-    faces.set(a.faces);
-    const offset = a.vertices.length / 3;
-    for (let i = 0; i < b.faces.length; i++)
-        faces[a.faces.length + i] = b.faces[i] + offset;
-    return { vertices, faces };
-}
-/**
- * Fill one feature into one slice of the mask: even-odd over its `rings`, sampled at voxel
- * centres. Cells already set stay set, so the features of a slice fill as their union.
- */
-function fillSlice(mask, nx, ny, offset, rings, x0, y0, step) {
-    const crossings = [];
-    // Only the rows the feature spans.
-    let top = Infinity, bottom = -Infinity;
-    for (const r of rings) {
-        for (let i = 1; i < r.length; i += 2) {
-            if (r[i] < top)
-                top = r[i];
-            if (r[i] > bottom)
-                bottom = r[i];
-        }
-    }
-    const j0 = Math.max(0, Math.floor((top - y0) / step - 0.5));
-    const j1 = Math.min(ny - 1, Math.ceil((bottom - y0) / step - 0.5));
-    for (let j = j0; j <= j1; j++) {
-        const y = y0 + (j + 0.5) * step;
-        crossings.length = 0;
-        for (const r of rings) {
-            const n = r.length >> 1;
-            for (let i = 0, k = n - 1; i < n; k = i++) {
-                const ya = r[2 * i + 1], yb = r[2 * k + 1];
-                if (ya > y !== yb > y) {
-                    const xa = r[2 * i], xb = r[2 * k];
-                    crossings.push(xa + ((y - ya) * (xb - xa)) / (yb - ya));
-                }
-            }
-        }
-        if (crossings.length < 2)
-            continue;
-        crossings.sort((a, b) => a - b);
-        const row = offset + j * nx;
-        for (let c = 0; c + 1 < crossings.length; c += 2) {
-            const from = Math.max(0, Math.ceil((crossings[c] - x0) / step - 0.5));
-            const to = Math.min(nx - 1, Math.floor((crossings[c + 1] - x0) / step - 0.5));
-            for (let i = from; i <= to; i++)
-                mask[row + i] = 1;
-        }
-    }
-}
-/**
- * The area inside `rings` (interleaved `x, y`), even-odd: a ring inside an odd number of others is
- * a hole. Exact for rings that do not cross (a polygon set's exteriors and holes).
- */
-function ringsArea(rings) {
-    const boxes = rings.map(ringBox);
-    let area = 0;
-    for (let i = 0; i < rings.length; i++) {
-        const r = rings[i];
-        if (r.length < 6)
-            continue;
-        const x = r[0], y = r[1];
-        let depth = 0;
-        for (let j = 0; j < rings.length; j++) {
-            if (j === i)
-                continue;
-            const b = boxes[j];
-            if (x < b[0] || x > b[2] || y < b[1] || y > b[3])
-                continue;
-            if (pointInRing$2(x, y, rings[j]))
-                depth++;
-        }
-        area += (depth % 2 ? -1 : 1) * Math.abs(ringArea$1(r));
-    }
-    return Math.max(0, area);
-}
-/**
- * The rings of each feature (see {@link SliceOutlines.ringGroups}), in the order first met; one
- * feature of every ring without `groups`.
- */
-function featureRings(rings, groups) {
-    if (!groups || !rings.length)
-        return rings.length ? [rings.slice()] : [];
-    const byGroup = new Map();
-    rings.forEach((r, i) => {
-        const g = groups[i] ?? 0;
-        const feature = byGroup.get(g);
-        if (feature)
-            feature.push(r);
-        else
-            byGroup.set(g, [r]);
-    });
-    return [...byGroup.values()];
-}
-/**
- * The area of a slice's outlines (px²): each feature's (even-odd, see {@link ringsArea}), the
- * features as their union, so a feature inside or over another of the slice adds only what it
- * covers beyond it. Features whose extents overlap are measured together, by the length of their
- * union along each row, exact between the rows through their vertices where no outline crosses
- * another (and refined where one does).
- */
-function outlinesArea(rings, groups) {
-    const features = featureRings(rings, groups).map((f) => ({ rings: f, box: featureBox(f) }));
-    if (features.length < 2)
-        return features.length ? ringsArea(features[0].rings) : 0;
-    // Features whose extents overlap, joined (by x, so a feature meets only those it can overlap).
-    features.sort((a, b) => a.box[0] - b.box[0]);
-    const parent = features.map((_, i) => i);
-    const root = (i) => (parent[i] === i ? i : (parent[i] = root(parent[i])));
-    for (let i = 0; i < features.length; i++) {
-        const a = features[i].box;
-        for (let j = i + 1; j < features.length && features[j].box[0] < a[2]; j++) {
-            const b = features[j].box;
-            if (b[1] < a[3] && a[1] < b[3])
-                parent[root(j)] = root(i);
-        }
-    }
-    const clusters = new Map();
-    features.forEach((f, i) => {
-        const r = root(i);
-        const cluster = clusters.get(r);
-        if (cluster)
-            cluster.push(f.rings);
-        else
-            clusters.set(r, [f.rings]);
-    });
-    let area = 0;
-    for (const cluster of clusters.values())
-        area += cluster.length === 1 ? ringsArea(cluster[0]) : unionArea(cluster);
-    return area;
-}
-/**
- * The volume of the region outlined by `slices`, in px² × slices (one slice thick per outline):
- * the sum of each slice's area (see {@link outlinesArea}; Cavalieri's estimator). Times µm per px²
- * and per slice, µm³.
- */
-function outlinedVolume(slices) {
-    let v = 0;
-    for (const s of slices)
-        v += outlinesArea(s.rings, s.ringGroups);
-    return v;
-}
-/** The area of the union of `features` (each even-odd over its rings), row band by row band. */
-function unionArea(features) {
-    const ys = [];
-    for (const f of features)
-        for (const r of f)
-            for (let i = 1; i < r.length; i += 2)
-                ys.push(r[i]);
-    ys.sort((a, b) => a - b);
-    let area = 0;
-    for (let k = 0; k + 1 < ys.length; k++)
-        if (ys[k + 1] > ys[k])
-            area += bandArea(features, ys[k], ys[k + 1], 0);
-    return area;
-}
-/**
- * The union's area between rows `a` and `b`. Between two vertices' rows its width along a row is
- * linear in y unless outlines cross there: then the band is halved until it is (or thin enough).
- */
-function bandArea(features, a, b, depth) {
-    const h = b - a;
-    const at = (t) => unionWidth(features, a + t * h);
-    const mid = at(0.5);
-    if (depth >= 10)
-        return h * mid;
-    const e = 1e-6;
-    const tol = 1e-9 * (1 + Math.abs(mid));
-    const linear = Math.abs(at(0.25) + at(0.75) - 2 * mid) <= tol && Math.abs(at(e) + at(1 - e) - 2 * mid) <= tol;
-    if (linear)
-        return h * mid;
-    const m = a + h / 2;
-    return bandArea(features, a, m, depth + 1) + bandArea(features, m, b, depth + 1);
-}
-/** The length of the union of `features` along the row `y`. */
-function unionWidth(features, y) {
-    const spans = [];
-    const xs = [];
-    for (const f of features) {
-        xs.length = 0;
-        for (const r of f) {
-            const n = r.length >> 1;
-            for (let i = 0, k = n - 1; i < n; k = i++) {
-                const ya = r[2 * i + 1], yb = r[2 * k + 1];
-                if (ya > y !== yb > y)
-                    xs.push(r[2 * i] + ((y - ya) * (r[2 * k] - r[2 * i])) / (yb - ya));
-            }
-        }
-        xs.sort((p, q) => p - q);
-        for (let c = 0; c + 1 < xs.length; c += 2)
-            spans.push([xs[c], xs[c + 1]]);
-    }
-    spans.sort((p, q) => p[0] - q[0]);
-    let width = 0, from = -Infinity, to = -Infinity;
-    for (const [s0, s1] of spans) {
-        if (s0 > to) {
-            if (to > from)
-                width += to - from;
-            from = s0;
-            to = s1;
-        }
-        else if (s1 > to)
-            to = s1;
-    }
-    if (to > from)
-        width += to - from;
-    return width;
-}
-/** The extent of a feature's rings. */
-function featureBox(rings) {
-    const box = [Infinity, Infinity, -Infinity, -Infinity];
-    for (const r of rings) {
-        const [x0, y0, x1, y1] = ringBox(r);
-        box[0] = Math.min(box[0], x0);
-        box[1] = Math.min(box[1], y0);
-        box[2] = Math.max(box[2], x1);
-        box[3] = Math.max(box[3], y1);
-    }
-    return box;
-}
-function ringBox(r) {
-    let x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
-    for (let i = 0; i + 1 < r.length; i += 2) {
-        if (r[i] < x0)
-            x0 = r[i];
-        if (r[i] > x1)
-            x1 = r[i];
-        if (r[i + 1] < y0)
-            y0 = r[i + 1];
-        if (r[i + 1] > y1)
-            y1 = r[i + 1];
-    }
-    return [x0, y0, x1, y1];
-}
-
 /**
  * Where to put a label inside a polygon: its pole of inaccessibility, the inside point farthest
  * from every edge (Garcia-Castellanos & Lombardo's grid search, as in Mapbox's polylabel). Unlike
@@ -10399,7 +10489,7 @@ function frameToRgba(cached, frameIndex) {
 /** Lazy-import so onnxruntime-web is never pulled into unit tests or the
  *  initial bundle — only when segmentation actually runs. */
 const onnxSessionFactory = async () => {
-    const { OnnxSamSession } = await import('./jax-data-science-sci-image-visualizer-onnx-sam-session-CvadfzjS.mjs');
+    const { OnnxSamSession } = await import('./jax-data-science-sci-image-visualizer-onnx-sam-session-D0IQ6PjZ.mjs');
     return new OnnxSamSession();
 };
 /** Thrown inside a load that a model switch superseded. */
@@ -12902,11 +12992,11 @@ class ToolbarHelpDialogComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ToolbarHelpDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ToolbarHelpDialogComponent, isStandalone: true, selector: "toolbar-help-dialog", inputs: { visible: "visible", contributedTools: "contributedTools", dialogTools: "dialogTools" }, outputs: { visibleChange: "visibleChange" }, usesOnChanges: true, ngImport: i0, template: "<p-dialog\n  header=\"Plotting help\"\n  [visible]=\"visible\"\n  (visibleChange)=\"visibleChange.emit($event)\"\n  [modal]=\"true\"\n  [style]=\"{ width: '50vw' }\"\n  [maximizable]=\"true\"\n  [draggable]=\"false\"\n  [resizable]=\"false\"\n>\n  <p>\n    Click a file in the left-hand tree to display it. By default it opens in the <b>Image</b> view \u2014 a natively\n    tiled, deeply zoomable raster (OpenSeadragon) with a navigator minimap and a physical-units scale bar.\n    <b>Click the image to zoom</b> toward the clicked point; scroll to zoom and drag to pan. When a stack is open,\n    a slice slider (Image view) or image-mode toggle (other views) appears. Regions can also be edited in the\n    <b>Region Editor</b>, opened with the\n    <img src=\"assets/plotting/region-editor.svg\" width=\"14\" height=\"14\" alt=\"Region Editor\" />\n    toolbar button as a floating dialog. Drag the <i class=\"pi pi-bars\"></i> handle to detach this toolbar into a\n    floating window.\n  </p>\n\n  <h3>Plot-type dropdown</h3>\n  <p>\n    The <b>plot-type dropdown</b> switches how the file is visualized: <b>Image</b>, <b>Heatmap</b>,\n    <b>Contour</b>, <b>Surface</b>, <b>Volume</b>, <b>Isosurface</b>, and \u2014 when a spatial-omics dataset is open \u2014\n    <b>Spatial omics</b> and <b>Spatial omics 3D</b>.\n  </p>\n  <p>\n    <b>Only the modes the data can actually support are offered</b>, so the list changes with what is loaded rather\n    than showing entries that would come up blank:\n  </p>\n  <ul>\n    <li>\n      <b>Contour</b>, <b>Volume</b> and <b>Isosurface</b> need a grayscale image; the two 3D ones also need a\n      z-stack.\n    </li>\n    <li>\n      <b>Spatial omics</b> needs a published dataset, and <b>Spatial omics 3D</b> needs one whose coordinates carry\n      a z.\n    </li>\n    <li>\n      The pixel modes (<b>Image</b>, <b>Heatmap</b>, <b>Surface</b>) are withheld for a dataset that brings no\n      tissue image \u2014 seqFISH records coordinates and no section, so there is nothing for them to draw.\n    </li>\n  </ul>\n  <ul>\n    <li>\n      \"<b>Isosurface band</b>\" slider (Isosurface): sets the intensity band the surfaces are drawn for, mapped onto\n      the volume's real intensity range.\n    </li>\n    <li>\n      \"<b>3D camera</b>\" (Surface / Scatter 3D / Isosurface): zoom <i class=\"pi pi-search\"></i>, pan\n      <i class=\"pi pi-arrows-alt\"></i>, orbit <i class=\"pi pi-globe\"></i>, turntable <i class=\"pi pi-sync\"></i>,\n      and reset camera <i class=\"pi pi-home\"></i>; scroll to zoom the 3D scene.\n    </li>\n  </ul>\n\n  <h3>Image manipulation tools</h3>\n  <ul>\n    <li>\n      \"<b>Region Editor</b>\" <img src=\"assets/plotting/region-editor.svg\" width=\"15\" height=\"15\" />: opens the\n      Region Editor as a floating, draggable dialog \u2014 a per-image table of every region (class, colour, area) with\n      bulk select/label/colour/delete and GeoJSON import/export. It stays in sync with the image, so you can keep\n      it open while drawing.\n    </li>\n    <li>\n      \"<b>Intensity profile lines</b>\" <img src=\"assets/plotting/spline-chart.svg\" width=\"15\" height=\"15\" /> (<i\n        >work in progress \u2014 not yet stable</i\n      >): adds a coloured line ROI; a floating inset chart plots intensity along each line, updates live as you\n      drag it, and re-samples at the current zoom resolution. Each added line gets its own colour; select a line\n      and use the trash tool <i class=\"pi pi-trash\"></i> to remove it (and its trace).\n    </li>\n    <li>\n      \"<b>Channels &amp; Histogram</b>\" <img src=\"assets/plotting/invert.svg\" width=\"15\" height=\"15\" />: opens a\n      floating dialog for brightness/contrast, gamma, and per-channel display, plus the\n      <b>colormap / LUT</b> controls (grayscale only) \u2014 a <b>reverse</b> toggle and a colormap dropdown (default:\n      inverted greys).\n    </li>\n    <li>\n      \"<b>Smoothen</b>\" <img src=\"assets/plotting/smooth.svg\" width=\"15\" height=\"15\" /> (Image view only): the\n      image opens showing <b>raw pixels</b> (nearest-neighbour), so zooming in renders crisp blocks for pixel\n      inspection. Toggle this on for bilinear smoothing; the icon turns white while smoothing is active.\n    </li>\n  </ul>\n\n  <h3>Download &amp; view tools</h3>\n  <ul>\n    <li>\"<b>Download</b>\" <i class=\"pi pi-download\"></i>: download the current image as a PNG.</li>\n    <li>\n      \"<b>Fit to view</b>\" / autoscale <i class=\"pi pi-window-maximize\"></i>: resets the image to its original\n      dimensions. In stack mode it also resets to single-image mode.\n    </li>\n  </ul>\n\n  <h3>Zoom tools</h3>\n  <ul>\n    <li>\n      \"<b>Zoom box</b>\" <img src=\"assets/plotting/zoom-box.svg\" width=\"15\" height=\"15\" /> (<kbd>b</kbd>): drag a\n      box to select an area to zoom into.\n    </li>\n    <li>\"<b>Pan</b>\" <i class=\"pi pi-arrows-alt\"></i> (<kbd>p</kbd>): drag to pan the image.</li>\n    <li>\"<b>Zoom in</b>\" <i class=\"pi pi-search-plus\"></i> (<kbd>+</kbd>): zoom in one step.</li>\n    <li>\n      \"<b>Zoom out</b>\" <i class=\"pi pi-search-minus\"></i> (<kbd>-</kbd>): zoom out one step, stopping at the\n      original image dimensions.\n    </li>\n  </ul>\n\n  <h3>Region tools</h3>\n  <p>\n    By default no tool is selected (all greyed-out); selecting a tool highlights it. The vertex-editing tools\n    (polygon, add/delete vertex, move, B\u00E9zier conversions) are available in the <b>Image</b> view only. On a\n    <b>donut</b> (a region with a hole), the inner-ring vertices are editable too \u2014 drag, add, and delete them just\n    like the outer ring.\n  </p>\n  <ul>\n    <li>\n      \"<b>Selection</b>\" <i class=\"pi pi-arrow-up-right\"></i> (<kbd>s</kbd>): a neutral mode that turns off\n      whatever drawing tool was active (wand, vertex eraser, rectangle, etc.). Use it to step out of editing\n      without picking another tool.\n    </li>\n    <li>\n      \"<b>Rectangular region</b>\" <i class=\"pi pi-stop\"></i> (<kbd>r</kbd>): click and drag to create a rectangular\n      region.\n    </li>\n    <li>\n      \"<b>Polyline</b>\" <img src=\"assets/plotting/polyline.svg\" width=\"14\" height=\"14\" /> (<kbd>l</kbd>): draw an\n      open (non-closed) polyline by clicking and dragging. Polylines can be edited and exported to GeoJSON as a\n      <code>LineString</code> feature.\n    </li>\n    <li>\n      \"<b>Freeform region</b>\" <i class=\"pi pi-pencil\"></i> (<kbd>f</kbd>): click and drag to draw a closed\n      freeform polygon.\n    </li>\n    <li>\n      \"<b>Brush</b>\" <img src=\"assets/plotting/paintbrush.svg\" width=\"15\" height=\"15\" />: click and drag to paint a\n      region with a circular brush \u2014 the painted stroke is the region. A <b>Size</b> slider (brush diameter, in\n      image pixels) appears in the toolbar while the brush is active. Hold <kbd>Shift</kbd> while painting to\n      <b>erase</b> (subtract) from a region instead. Painting over an existing region extends it; brushing across\n      two regions merges them. Painting a closed ring (or shift-erasing an interior pocket) leaves the enclosed\n      area empty \u2014 a <b>donut</b> (Image view).\n    </li>\n    <li>\n      \"<b>Polygon</b>\" <img src=\"assets/plotting/polygon-vertices.svg\" width=\"15\" height=\"15\" />: click to place\n      each vertex; click the first point to close the polygon.\n    </li>\n    <li>\n      \"<b>Add vertex</b>\" <img src=\"assets/plotting/vertex-add.svg\" width=\"15\" height=\"15\" />: click an edge of the\n      selected polygon to insert a new vertex.\n    </li>\n    <li>\n      \"<b>Delete vertex</b>\" <img src=\"assets/plotting/vertex-delete.svg\" width=\"15\" height=\"15\" />: click a vertex\n      of the selected polygon to remove it.\n    </li>\n    <li>\n      <b>Moving a region</b> <img src=\"assets/plotting/region-move.svg\" width=\"15\" height=\"15\" />: with the Select\n      tool, drag the selected region's body (or a rectangle's handles to resize it).\n    </li>\n    <li>\n      <b>Convert to B\u00E9zier</b> <img src=\"assets/plotting/to-bezier.svg\" width=\"15\" height=\"15\" /> /\n      <b>Convert to polygon</b> <img src=\"assets/plotting/to-polygon.svg\" width=\"15\" height=\"15\" /> (Image view):\n      right-click the selected region and pick the conversion in the context menu to turn it into a smooth B\u00E9zier\n      curve, or back into a straight-edged polygon.\n    </li>\n    <li>\n      \"<b>Wand</b>\" <img src=\"assets/plotting/wand.svg\" width=\"15\" height=\"15\" /> (<kbd>w</kbd>): click to grow a\n      region from pixels with similar values around the click point. Hold <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> for an\n      exact-match flood fill; drag to keep extending the selection while moving; hold <kbd>Shift</kbd> while\n      clicking or dragging on an existing region to <b>erase</b> pixels from it. Use the <b>Sens.</b> slider that\n      appears to make the wand stricter (higher = smaller selection) or looser. Subsequent clicks keep extending\n      the same region; clicking inside an existing region adopts it, and growing into another region merges them.\n    </li>\n    <li>\n      \"<b>Vertex eraser</b>\" <i class=\"pi pi-eraser\"></i> (<kbd>e</kbd>): click or click-and-drag to remove polygon\n      vertices that fall inside the cursor circle from any region, including a region's inner rings (donut holes).\n      Use the <b>Radius</b> slider to set the eraser size in image pixels. Polygons reduced below 3 vertices (or\n      polylines below 2) are deleted entirely; a hole reduced below 3 vertices is removed.\n    </li>\n    <li>\n      \"<b>Undo</b>\" <img src=\"assets/plotting/undo.svg\" width=\"15\" height=\"15\" />\n      (<kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Z</kbd>): reverts the last region action (draw, delete, edit, wand/brush\n      stroke, segmentation, \u2026). Up to the last\n      <b>10</b> actions can be undone; the button greys out when there's nothing left to undo.\n    </li>\n    <li>\n      \"<b>Redo</b>\"\n      <img src=\"assets/plotting/redo.svg\" width=\"15\" height=\"15\" />\n      (<kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd> or\n      <kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Y</kbd>): re-applies the most recently undone action. Performing a new\n      region action clears what can be redone.\n    </li>\n    <li>\n      \"<b>Delete region</b>\" <i class=\"pi pi-trash\"></i> (<kbd>Del</kbd>): deletes the selected region. This can\n      also be done from the Region Editor.\n    </li>\n  </ul>\n\n  <h3>Region actions (right-click the image)</h3>\n  <p>\n    Right-click a region \u2014 or the current multi-selection \u2014 to open the \"<b>Selected region(s)</b>\" group at the\n    top of the context menu. These act immediately on the selection (they're not drawing modes) and are fully\n    undo/redo-able:\n  </p>\n  <ul>\n    <li>\n      \"<b>Select all regions</b>\" <i class=\"pi pi-check-square\"></i>: select every region on the image (also in the\n      Region Editor toolbar).\n    </li>\n    <li>\n      \"<b>Merge / group</b>\": combine 2+ selected regions into one. If the pieces don't touch, the result is a\n      single multi-part region (sparse \"bits\").\n    </li>\n    <li>\"<b>Ungroup</b>\": split a multi-part region back into one region per piece.</li>\n    <li>\n      \"<b>Inverse</b>\": replace the selection with everything <i>outside</i> it \u2014 the image rectangle with the\n      selected regions punched out as holes. Works at any image size.\n    </li>\n    <li>\n      \"<b>Simplify</b>\": reduce a region's vertex count (Douglas\u2013Peucker) by an altitude threshold in pixels \u2014 pick\n      <b>Light</b> (1&nbsp;px), <b>Medium</b> (3&nbsp;px), <b>Strong</b> (8&nbsp;px), or <b>Custom\u2026</b> for a\n      slider. Applies to the exterior and any holes (and every part of a multi-part region).\n    </li>\n    <li>\n      \"<b>Convert to B\u00E9zier</b>\" / \"<b>Convert to polygon</b>\" (Image view) and \"<b>Delete</b>\" also live in this\n      group; the conversions are only here, not in the toolbar.\n    </li>\n  </ul>\n\n  <h3>Segmentation &amp; detection tools</h3>\n  <p>\n    AI-assisted segmentation and detection that run entirely in the browser. The first run of any model downloads\n    it (a progress toast is shown); it's then cached.\n  </p>\n  <p>\n    Two shapes of tool: the <b>prompted</b> ones (Segment, Point prompts, Cellpose) act on rectangles you draw, and\n    generated regions inherit the color of the rectangle they came from<span *ngIf=\"contributedTools.length\"\n      >; the <b>no-prompt</b> ones ({{ contributedToolNames }}) sweep the whole current view, so there is nothing\n      to draw first</span\n    >.\n  </p>\n  <p>\n    Each model dropdown <i class=\"pi pi-chevron-down\"></i> lists the available checkpoints with a\n    <i class=\"pi pi-info-circle\"></i> beside each one \u2014 hover it for that model's size, speed, training domain and\n    accuracy, so you can pick without leaving the toolbar.\n  </p>\n  <ul>\n    <li>\n      \"<b>Segment</b>\" <img src=\"assets/plotting/sam-box-prompt.svg\" width=\"15\" height=\"15\" /> (box prompt): draw\n      one or more <b>Rectangular regions</b> around the objects of interest, then click Segment. Each rectangle is\n      replaced by the SAM mask of the object inside it.\n    </li>\n    <li>\n      \"<b>Point prompts</b>\" <img src=\"assets/plotting/sam-point-prompt.svg\" width=\"15\" height=\"15\" />: click\n      directly on an object to segment it as a <b>new</b> region. Each click starts a fresh object \u2014 clicking\n      another object won't grow the previous one. <kbd>Shift</kbd>/<kbd>Alt</kbd>-click adds an\n      <i>exclude</i> point that refines the current object; <kbd>Esc</kbd> undoes it, <kbd>Enter</kbd> commits it.\n    </li>\n    <li>\n      \"<b>Model picker</b>\" <i class=\"pi pi-chevron-down\"></i>: the dropdown attached to the Segment button chooses\n      the SAM model \u2014 <b>micro-sam ViT-T</b> (default; small, fast) or <b>micro-sam ViT-B</b> (larger, highest\n      accuracy) for light microscopy, or <b>patho-sam ViT-B</b> for histopathology (H&amp;E / stained tissue). All\n      are promptable Segment Anything models finetuned for biomedical images; they differ in the\n      <i>image encoder</i> (the heavy once-per-image step) and the training domain \u2014 box and point prompting behave\n      the same. The choice applies to <i>both</i> the box and point tools, which share one loaded model and image\n      encoding, so the first run after switching models (or images) downloads and encodes once for both.\n    </li>\n    <li>\n      \"<b>Cellpose</b>\" <img src=\"assets/plotting/cells.svg\" width=\"15\" height=\"15\" />: draw rectangles, then click\n      Cellpose to automatically segment every cell inside each rectangle (client-side cellpose-SAM) \u2014 one region\n      per detected cell. No clicking on individual cells needed.\n    </li>\n    <!-- Contributed tools describe themselves. This library ships none, so an\n         open build's help lists only the prompted tools above \u2014 the text no\n         longer promises buttons that are not there. -->\n    <ng-container *ngFor=\"let tool of contributedTools\">\n      <li *ngIf=\"tool.help\" [innerHTML]=\"tool.help.body\"></li>\n    </ng-container>\n    <ng-container *ngFor=\"let tool of dialogTools\">\n      <li *ngIf=\"tool.help\" [innerHTML]=\"tool.help.body\"></li>\n    </ng-container>\n  </ul>\n\n  <h3>Spatial omics</h3>\n  <p>\n    In <b>Spatial omics</b> mode each observation \u2014 a cell or a Visium spot \u2014 is drawn at its own coordinates, over\n    the tissue image where the dataset registers onto one. The\n    <img src=\"assets/plotting/spatial-omics.svg\" width=\"14\" height=\"14\" alt=\"Spatial omics\" />\n    panel colours them by a <b>column</b> (a cell type, a cluster) or by a <b>gene</b>, and the two are exclusive\n    so what drives the colours is never ambiguous.\n  </p>\n  <ul>\n    <li>\n      \"<b>Select from ROIs</b>\": turns the regions you have drawn into a selection of observations. Everything else\n      then follows that selection.\n    </li>\n    <li>\"<b>Point size</b>\" / \"<b>Opacity</b>\": how the markers are drawn, not what is selected.</li>\n  </ul>\n\n  <h3>Distribution charts</h3>\n  <p>\n    The <b>Distribution</b> section of the spatial-omics panel charts whatever the map is coloured by, so the two\n    can never disagree. Each tab answers a different question, and the <i class=\"pi pi-question-circle\"></i> beside\n    them explains the one on screen \u2014 including what it must <em>not</em> be read for.\n  </p>\n  <ul>\n    <li>\n      \"<b>Counts</b>\": how many observations per category. A category is a label, not a magnitude, so a frequency\n      is the only distribution it has.\n    </li>\n    <li>\n      \"<b>Histogram</b>\" / \"<b>Violin</b>\" / \"<b>Box</b>\": how a continuous value is distributed \u2014 over everything,\n      or split by a grouping column.\n    </li>\n    <li>\n      \"<b>Heatmap</b>\": mean expression of the genes you pick within each group. Z-scored per gene by default, so a\n      colour means \"above or below this gene's own average\" rather than \"highly expressed\".\n    </li>\n    <li>\n      \"<b>Embedding</b>\": a UMAP, PCA or t-SNE over the same cells. <b>Lasso it to select on the map</b> \u2014 both\n      views read the same selection. Only PCA labels its axes with a percentage, because only its axes explain a\n      measurable share of the variance; UMAP and t-SNE coordinates are arbitrary, so distance between distant\n      clusters should not be read.\n    </li>\n    <li>\n      \"<b>Detach</b>\": moves the charts into their own window so they can sit beside the map instead of inside the\n      panel. Switching tabs keeps the window where it is.\n    </li>\n  </ul>\n\n  <h3>Help</h3>\n  <p>\"<b>Help</b>\" <i class=\"pi pi-question-circle\"></i>: opens this dialog.</p>\n\n  <h3>Keyboard shortcuts</h3>\n  <table class=\"shortcuts-table\">\n    <tr>\n      <td><kbd>+</kbd> / <kbd>=</kbd></td>\n      <td>Zoom in</td>\n    </tr>\n    <tr>\n      <td><kbd>-</kbd></td>\n      <td>Zoom out</td>\n    </tr>\n    <tr>\n      <td><kbd>b</kbd></td>\n      <td>Toggle zoom box mode</td>\n    </tr>\n    <tr>\n      <td><kbd>p</kbd></td>\n      <td>Toggle pan mode</td>\n    </tr>\n    <tr>\n      <td><kbd>f</kbd></td>\n      <td>Toggle freeform region drawing</td>\n    </tr>\n    <tr>\n      <td><kbd>l</kbd></td>\n      <td>Toggle polyline drawing</td>\n    </tr>\n    <tr>\n      <td><kbd>r</kbd></td>\n      <td>Toggle rectangular region drawing</td>\n    </tr>\n    <tr>\n      <td><kbd>w</kbd></td>\n      <td>Toggle wand tool</td>\n    </tr>\n    <tr>\n      <td>Wand + <kbd>Shift</kbd></td>\n      <td>Erase pixels from the active region</td>\n    </tr>\n    <tr>\n      <td>Wand + <kbd>Ctrl</kbd>/<kbd>Cmd</kbd></td>\n      <td>Exact-match flood fill (no smoothing)</td>\n    </tr>\n    <tr>\n      <td><kbd>e</kbd></td>\n      <td>Toggle vertex eraser</td>\n    </tr>\n    <tr>\n      <td><kbd>s</kbd></td>\n      <td>Selection mode (deactivates drawing tools)</td>\n    </tr>\n    <tr>\n      <td>Point prompt + <kbd>Shift</kbd>/<kbd>Alt</kbd></td>\n      <td>Add an exclude point (refine the current object)</td>\n    </tr>\n    <tr>\n      <td><kbd>Enter</kbd></td>\n      <td>Commit the current SAM point object</td>\n    </tr>\n    <tr>\n      <td><kbd>Esc</kbd></td>\n      <td>Undo the current SAM point object</td>\n    </tr>\n    <tr>\n      <td><kbd>Del</kbd> / <kbd>\u232B</kbd></td>\n      <td>Delete selected region</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Z</kbd></td>\n      <td>Undo the last region action (up to 10)</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd> / <kbd>Ctrl</kbd>+<kbd>Y</kbd></td>\n      <td>Redo the last undone region action</td>\n    </tr>\n  </table>\n\n  <ng-template pTemplate=\"footer\">\n    <p-button icon=\"pi pi-check\" (click)=\"visibleChange.emit(false)\" label=\"Ok\" styleClass=\"p-button-text\">\n    </p-button>\n  </ng-template>\n</p-dialog>\n", styles: ["kbd{background:#e8e8e8;border:1px solid #bbb;border-radius:3px;padding:1px 5px;font-family:monospace;font-size:.85em}.shortcuts-table{border-collapse:collapse}.shortcuts-table td{padding:.25rem .75rem .25rem 0;vertical-align:middle}.shortcuts-table td:first-child{white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i5.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ToolbarHelpDialogComponent, isStandalone: true, selector: "toolbar-help-dialog", inputs: { visible: "visible", contributedTools: "contributedTools", dialogTools: "dialogTools" }, outputs: { visibleChange: "visibleChange" }, usesOnChanges: true, ngImport: i0, template: "<p-dialog\n  header=\"Plotting help\"\n  [visible]=\"visible\"\n  (visibleChange)=\"visibleChange.emit($event)\"\n  [modal]=\"true\"\n  [style]=\"{ width: '50vw' }\"\n  [maximizable]=\"true\"\n  [draggable]=\"false\"\n  [resizable]=\"false\"\n>\n  <p>\n    Click a file in the left-hand tree to display it. By default it opens in the <b>Image</b> view \u2014 a natively\n    tiled, deeply zoomable raster (OpenSeadragon) with a navigator minimap and a physical-units scale bar.\n    <b>Click the image to zoom</b> toward the clicked point; scroll to zoom and drag to pan. When a stack is open,\n    a slice slider (Image view) or image-mode toggle (other views) appears. Regions can also be edited in the\n    <b>Region Editor</b>, opened with the\n    <img src=\"assets/plotting/region-editor.svg\" width=\"14\" height=\"14\" alt=\"Region Editor\" />\n    toolbar button as a floating dialog. Drag the <i class=\"pi pi-bars\"></i> handle to detach this toolbar into a\n    floating window.\n  </p>\n\n  <h3>Plot-type dropdown</h3>\n  <p>\n    The <b>plot-type dropdown</b> switches how the file is visualized: <b>Image</b>, <b>Heatmap</b>,\n    <b>Contour</b>, <b>Surface</b>, <b>Volume</b>, <b>Isosurface</b>, and \u2014 when a spatial-omics dataset is open \u2014\n    <b>Spatial omics</b> and <b>Spatial omics 3D</b>.\n  </p>\n  <p>\n    <b>Only the modes the data can actually support are offered</b>, so the list changes with what is loaded rather\n    than showing entries that would come up blank:\n  </p>\n  <ul>\n    <li>\n      <b>Contour</b>, <b>Volume</b> and <b>Isosurface</b> need a grayscale image; the two 3D ones also need a\n      z-stack.\n    </li>\n    <li>\n      <b>Spatial omics</b> needs a published dataset, and <b>Spatial omics 3D</b> needs one whose coordinates carry\n      a z.\n    </li>\n    <li>\n      The pixel modes (<b>Image</b>, <b>Heatmap</b>, <b>Surface</b>) are withheld for a dataset that brings no\n      tissue image \u2014 seqFISH records coordinates and no section, so there is nothing for them to draw.\n    </li>\n  </ul>\n  <ul>\n    <li>\n      \"<b>Isosurface band</b>\" slider (Isosurface): sets the intensity band the surfaces are drawn for, mapped onto\n      the volume's real intensity range.\n    </li>\n    <li>\n      \"<b>3D camera</b>\" (Surface / Scatter 3D / Isosurface): zoom <i class=\"pi pi-search\"></i>, pan\n      <i class=\"pi pi-arrows-alt\"></i>, orbit <i class=\"pi pi-globe\"></i>, turntable <i class=\"pi pi-sync\"></i>,\n      and reset camera <i class=\"pi pi-home\"></i>; scroll to zoom the 3D scene.\n    </li>\n  </ul>\n\n  <h3>Image manipulation tools</h3>\n  <ul>\n    <li>\n      \"<b>Region Editor</b>\" <img src=\"assets/plotting/region-editor.svg\" width=\"15\" height=\"15\" />: opens the\n      Region Editor as a floating, draggable dialog \u2014 a per-image table of every region (class, colour, area) with\n      bulk select/label/colour/delete and GeoJSON import/export. It stays in sync with the image, so you can keep\n      it open while drawing.\n    </li>\n    <li>\n      \"<b>Intensity profile lines</b>\" <img src=\"assets/plotting/spline-chart.svg\" width=\"15\" height=\"15\" /> (<i\n        >work in progress \u2014 not yet stable</i\n      >): adds a coloured line ROI; a floating inset chart plots intensity along each line, updates live as you\n      drag it, and re-samples at the current zoom resolution. Each added line gets its own colour; select a line\n      and use the trash tool <i class=\"pi pi-trash\"></i> to remove it (and its trace).\n    </li>\n    <li>\n      \"<b>Channels &amp; Histogram</b>\" <img src=\"assets/plotting/invert.svg\" width=\"15\" height=\"15\" />: opens a\n      floating dialog for brightness/contrast, gamma, and per-channel display, plus the\n      <b>colormap / LUT</b> controls (grayscale only) \u2014 a <b>reverse</b> toggle and a colormap dropdown (default:\n      inverted greys).\n    </li>\n    <li>\n      \"<b>Smoothen</b>\" <img src=\"assets/plotting/smooth.svg\" width=\"15\" height=\"15\" /> (Image view only): the\n      image opens showing <b>raw pixels</b> (nearest-neighbour), so zooming in renders crisp blocks for pixel\n      inspection. Toggle this on for bilinear smoothing; the icon turns white while smoothing is active.\n    </li>\n  </ul>\n\n  <h3>Download &amp; view tools</h3>\n  <ul>\n    <li>\"<b>Download</b>\" <i class=\"pi pi-download\"></i>: download the current image as a PNG.</li>\n    <li>\n      \"<b>Fit to view</b>\" / autoscale <i class=\"pi pi-window-maximize\"></i>: resets the image to its original\n      dimensions. In stack mode it also resets to single-image mode.\n    </li>\n  </ul>\n\n  <h3>Zoom tools</h3>\n  <ul>\n    <li>\n      \"<b>Zoom box</b>\" <img src=\"assets/plotting/zoom-box.svg\" width=\"15\" height=\"15\" /> (<kbd>b</kbd>): drag a\n      box to select an area to zoom into.\n    </li>\n    <li>\"<b>Pan</b>\" <i class=\"pi pi-arrows-alt\"></i> (<kbd>p</kbd>): drag to pan the image.</li>\n    <li>\"<b>Zoom in</b>\" <i class=\"pi pi-search-plus\"></i> (<kbd>+</kbd>): zoom in one step.</li>\n    <li>\n      \"<b>Zoom out</b>\" <i class=\"pi pi-search-minus\"></i> (<kbd>-</kbd>): zoom out one step, stopping at the\n      original image dimensions.\n    </li>\n  </ul>\n\n  <h3>Region tools</h3>\n  <p>\n    By default no tool is selected (all greyed-out); selecting a tool highlights it. The vertex-editing tools\n    (polygon, add/delete vertex, move, B\u00E9zier conversions) are available in the <b>Image</b> view only. On a\n    <b>donut</b> (a region with a hole), the inner-ring vertices are editable too \u2014 drag, add, and delete them just\n    like the outer ring.\n  </p>\n  <ul>\n    <li>\n      \"<b>Selection</b>\" <i class=\"pi pi-arrow-up-right\"></i> (<kbd>s</kbd>): a neutral mode that turns off\n      whatever drawing tool was active (wand, vertex eraser, rectangle, etc.). Use it to step out of editing\n      without picking another tool.\n    </li>\n    <li>\n      \"<b>Rectangular region</b>\" <i class=\"pi pi-stop\"></i> (<kbd>r</kbd>): click and drag to create a rectangular\n      region.\n    </li>\n    <li>\n      \"<b>Polyline</b>\" <img src=\"assets/plotting/polyline.svg\" width=\"14\" height=\"14\" /> (<kbd>l</kbd>): draw an\n      open (non-closed) polyline by clicking and dragging. Polylines can be edited and exported to GeoJSON as a\n      <code>LineString</code> feature.\n    </li>\n    <li>\n      \"<b>Freeform region</b>\" <i class=\"pi pi-pencil\"></i> (<kbd>f</kbd>): click and drag to draw a closed\n      freeform polygon.\n    </li>\n    <li>\n      \"<b>Brush</b>\" <img src=\"assets/plotting/paintbrush.svg\" width=\"15\" height=\"15\" />: click and drag to paint a\n      region with a circular brush \u2014 the painted stroke is the region. A <b>Size</b> slider (brush diameter, in\n      image pixels) appears in the toolbar while the brush is active. Hold <kbd>Shift</kbd> while painting to\n      <b>erase</b> (subtract) from a region instead. Painting over an existing region extends it; brushing across\n      two regions merges them. Painting a closed ring (or shift-erasing an interior pocket) leaves the enclosed\n      area empty \u2014 a <b>donut</b> (Image view).\n    </li>\n    <li>\n      \"<b>Polygon</b>\" <img src=\"assets/plotting/polygon-vertices.svg\" width=\"15\" height=\"15\" />: click to place\n      each vertex; click the first point to close the polygon.\n    </li>\n    <li>\n      \"<b>Add vertex</b>\" <img src=\"assets/plotting/vertex-add.svg\" width=\"15\" height=\"15\" />: click an edge of the\n      selected polygon to insert a new vertex.\n    </li>\n    <li>\n      \"<b>Delete vertex</b>\" <img src=\"assets/plotting/vertex-delete.svg\" width=\"15\" height=\"15\" />: click a vertex\n      of the selected polygon to remove it.\n    </li>\n    <li>\n      <b>Moving a region</b> <img src=\"assets/plotting/region-move.svg\" width=\"15\" height=\"15\" />: with the Select\n      tool, drag the selected region's body (or a rectangle's handles to resize it).\n    </li>\n    <li>\n      <b>Convert to B\u00E9zier</b> <img src=\"assets/plotting/to-bezier.svg\" width=\"15\" height=\"15\" /> /\n      <b>Convert to polygon</b> <img src=\"assets/plotting/to-polygon.svg\" width=\"15\" height=\"15\" /> (Image view):\n      right-click the selected region and pick the conversion in the context menu to turn it into a smooth B\u00E9zier\n      curve, or back into a straight-edged polygon.\n    </li>\n    <li>\n      \"<b>Wand</b>\" <img src=\"assets/plotting/wand.svg\" width=\"15\" height=\"15\" /> (<kbd>w</kbd>): click to grow a\n      region from pixels with similar values around the click point. Hold <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> for an\n      exact-match flood fill; drag to keep extending the selection while moving; hold <kbd>Shift</kbd> while\n      clicking or dragging on an existing region to <b>erase</b> pixels from it. Use the <b>Sens.</b> slider that\n      appears to make the wand stricter (higher = smaller selection) or looser. Subsequent clicks keep extending\n      the same region; clicking inside an existing region adopts it, and growing into another region merges them.\n    </li>\n    <li>\n      \"<b>Vertex eraser</b>\" <i class=\"pi pi-eraser\"></i> (<kbd>e</kbd>): click or click-and-drag to remove polygon\n      vertices that fall inside the cursor circle from any region, including a region's inner rings (donut holes).\n      Use the <b>Radius</b> slider to set the eraser size in image pixels. Polygons reduced below 3 vertices (or\n      polylines below 2) are deleted entirely; a hole reduced below 3 vertices is removed.\n    </li>\n    <li>\n      \"<b>Undo</b>\" <img src=\"assets/plotting/undo.svg\" width=\"15\" height=\"15\" />\n      (<kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Z</kbd>): reverts the last region action (draw, delete, edit, wand/brush\n      stroke, segmentation, \u2026). Up to the last\n      <b>10</b> actions can be undone; the button greys out when there's nothing left to undo.\n    </li>\n    <li>\n      \"<b>Redo</b>\"\n      <img src=\"assets/plotting/redo.svg\" width=\"15\" height=\"15\" />\n      (<kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd> or\n      <kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Y</kbd>): re-applies the most recently undone action. Performing a new\n      region action clears what can be redone.\n    </li>\n    <li>\n      \"<b>Delete region</b>\" <i class=\"pi pi-trash\"></i> (<kbd>Del</kbd>): deletes the selected region. This can\n      also be done from the Region Editor.\n    </li>\n  </ul>\n\n  <h3>Region actions (right-click the image)</h3>\n  <p>\n    Right-click a region \u2014 or the current multi-selection \u2014 to open the \"<b>Selected region(s)</b>\" group at the\n    top of the context menu. These act immediately on the selection (they're not drawing modes) and are fully\n    undo/redo-able:\n  </p>\n  <ul>\n    <li>\n      \"<b>Select all regions</b>\" <i class=\"pi pi-check-square\"></i>: select every region on the image (also in the\n      Region Editor toolbar).\n    </li>\n    <li>\n      \"<b>Merge / group</b>\": combine 2+ selected regions into one. If the pieces don't touch, the result is a\n      single multi-part region (sparse \"bits\").\n    </li>\n    <li>\"<b>Ungroup</b>\": split a multi-part region back into one region per piece.</li>\n    <li>\n      \"<b>Inverse</b>\": replace the selection with everything <i>outside</i> it \u2014 the image rectangle with the\n      selected regions punched out as holes. Works at any image size.\n    </li>\n    <li>\n      \"<b>Simplify</b>\": reduce a region's vertex count (Douglas\u2013Peucker) by an altitude threshold in pixels \u2014 pick\n      <b>Light</b> (1&nbsp;px), <b>Medium</b> (3&nbsp;px), <b>Strong</b> (8&nbsp;px), or <b>Custom\u2026</b> for a\n      slider. Applies to the exterior and any holes (and every part of a multi-part region).\n    </li>\n    <li>\n      \"<b>Convert to B\u00E9zier</b>\" / \"<b>Convert to polygon</b>\" (Image view) and \"<b>Delete</b>\" also live in this\n      group; the conversions are only here, not in the toolbar.\n    </li>\n  </ul>\n\n  <h3>Segmentation &amp; detection tools</h3>\n  <p>\n    AI-assisted segmentation and detection that run entirely in the browser. The first run of any model downloads\n    it (a progress toast is shown); it's then cached.\n  </p>\n  <p>\n    Two shapes of tool: the <b>prompted</b> ones (Segment, Point prompts, Cellpose) act on rectangles you draw, and\n    generated regions inherit the color of the rectangle they came from<span *ngIf=\"contributedTools.length\"\n      >; the <b>no-prompt</b> ones ({{ contributedToolNames }}) sweep the whole current view, so there is nothing\n      to draw first</span\n    >.\n  </p>\n  <p>\n    Each model dropdown <i class=\"pi pi-chevron-down\"></i> lists the available checkpoints with a\n    <i class=\"pi pi-info-circle\"></i> beside each one \u2014 hover it for that model's size, speed, training domain and\n    accuracy, so you can pick without leaving the toolbar.\n  </p>\n  <ul>\n    <li>\n      \"<b>Segment</b>\" <img src=\"assets/plotting/sam-box-prompt.svg\" width=\"15\" height=\"15\" /> (box prompt): draw\n      one or more <b>Rectangular regions</b> around the objects of interest, then click Segment. Each rectangle is\n      replaced by the SAM mask of the object inside it.\n    </li>\n    <li>\n      \"<b>Point prompts</b>\" <img src=\"assets/plotting/sam-point-prompt.svg\" width=\"15\" height=\"15\" />: click\n      directly on an object to segment it as a <b>new</b> region. Each click starts a fresh object \u2014 clicking\n      another object won't grow the previous one. <kbd>Shift</kbd>/<kbd>Alt</kbd>-click adds an\n      <i>exclude</i> point that refines the current object; <kbd>Esc</kbd> undoes it, <kbd>Enter</kbd> commits it.\n    </li>\n    <li>\n      \"<b>Model picker</b>\" <i class=\"pi pi-chevron-down\"></i>: the dropdown attached to the Segment button chooses\n      the SAM model \u2014 <b>micro-sam ViT-T</b> (default; small, fast) or <b>micro-sam ViT-B</b> (larger, highest\n      accuracy) for light microscopy, or <b>patho-sam ViT-B</b> for histopathology (H&amp;E / stained tissue). All\n      are promptable Segment Anything models finetuned for biomedical images; they differ in the\n      <i>image encoder</i> (the heavy once-per-image step) and the training domain \u2014 box and point prompting behave\n      the same. The choice applies to <i>both</i> the box and point tools, which share one loaded model and image\n      encoding, so the first run after switching models (or images) downloads and encodes once for both.\n    </li>\n    <li>\n      \"<b>Cellpose</b>\" <img src=\"assets/plotting/cells.svg\" width=\"15\" height=\"15\" />: draw rectangles, then click\n      Cellpose to automatically segment every cell inside each rectangle (client-side cellpose-SAM) \u2014 one region\n      per detected cell. No clicking on individual cells needed.\n    </li>\n    <!-- Contributed tools describe themselves. This library ships none, so an\n         open build's help lists only the prompted tools above \u2014 the text no\n         longer promises buttons that are not there. -->\n    <ng-container *ngFor=\"let tool of contributedTools\">\n      <li *ngIf=\"tool.help\" [innerHTML]=\"tool.help.body\"></li>\n    </ng-container>\n    <ng-container *ngFor=\"let tool of dialogTools\">\n      <li *ngIf=\"tool.help\" [innerHTML]=\"tool.help.body\"></li>\n    </ng-container>\n  </ul>\n\n  <h3>Spatial omics</h3>\n  <p>\n    In <b>Spatial omics</b> mode each observation \u2014 a cell or a Visium spot \u2014 is drawn at its own coordinates, over\n    the tissue image where the dataset registers onto one. The\n    <img src=\"assets/plotting/spatial-omics.svg\" width=\"14\" height=\"14\" alt=\"Spatial omics\" />\n    panel colours them by a <b>column</b> (a cell type, a cluster) or by a <b>gene</b>, and the two are exclusive\n    so what drives the colours is never ambiguous.\n  </p>\n  <ul>\n    <li>\n      \"<b>Select from ROIs</b>\": turns the regions you have drawn into a selection of observations. Everything else\n      then follows that selection. In 3D, with classes picked in the Region Editor's class tree (or their surfaces\n      clicked), it selects the observations inside those classes' volumes.\n    </li>\n    <li>\"<b>Point size</b>\" / \"<b>Opacity</b>\": how the markers are drawn, not what is selected.</li>\n  </ul>\n\n  <h3>Distribution charts</h3>\n  <p>\n    The <b>Distribution</b> section of the spatial-omics panel charts whatever the map is coloured by, so the two\n    can never disagree. Each tab answers a different question, and the <i class=\"pi pi-question-circle\"></i> beside\n    them explains the one on screen \u2014 including what it must <em>not</em> be read for.\n  </p>\n  <ul>\n    <li>\n      \"<b>Counts</b>\": how many observations per category. A category is a label, not a magnitude, so a frequency\n      is the only distribution it has.\n    </li>\n    <li>\n      \"<b>Histogram</b>\" / \"<b>Violin</b>\" / \"<b>Box</b>\": how a continuous value is distributed \u2014 over everything,\n      or split by a grouping column.\n    </li>\n    <li>\n      \"<b>Heatmap</b>\": mean expression of the genes you pick within each group. Z-scored per gene by default, so a\n      colour means \"above or below this gene's own average\" rather than \"highly expressed\".\n    </li>\n    <li>\n      \"<b>Embedding</b>\": a UMAP, PCA or t-SNE over the same cells. <b>Lasso it to select on the map</b> \u2014 both\n      views read the same selection. Only PCA labels its axes with a percentage, because only its axes explain a\n      measurable share of the variance; UMAP and t-SNE coordinates are arbitrary, so distance between distant\n      clusters should not be read.\n    </li>\n    <li>\n      \"<b>Detach</b>\": moves the charts into their own window so they can sit beside the map instead of inside the\n      panel. Switching tabs keeps the window where it is.\n    </li>\n  </ul>\n\n  <h3>Help</h3>\n  <p>\"<b>Help</b>\" <i class=\"pi pi-question-circle\"></i>: opens this dialog.</p>\n\n  <h3>Keyboard shortcuts</h3>\n  <table class=\"shortcuts-table\">\n    <tr>\n      <td><kbd>+</kbd> / <kbd>=</kbd></td>\n      <td>Zoom in</td>\n    </tr>\n    <tr>\n      <td><kbd>-</kbd></td>\n      <td>Zoom out</td>\n    </tr>\n    <tr>\n      <td><kbd>b</kbd></td>\n      <td>Toggle zoom box mode</td>\n    </tr>\n    <tr>\n      <td><kbd>p</kbd></td>\n      <td>Toggle pan mode</td>\n    </tr>\n    <tr>\n      <td><kbd>f</kbd></td>\n      <td>Toggle freeform region drawing</td>\n    </tr>\n    <tr>\n      <td><kbd>l</kbd></td>\n      <td>Toggle polyline drawing</td>\n    </tr>\n    <tr>\n      <td><kbd>r</kbd></td>\n      <td>Toggle rectangular region drawing</td>\n    </tr>\n    <tr>\n      <td><kbd>w</kbd></td>\n      <td>Toggle wand tool</td>\n    </tr>\n    <tr>\n      <td>Wand + <kbd>Shift</kbd></td>\n      <td>Erase pixels from the active region</td>\n    </tr>\n    <tr>\n      <td>Wand + <kbd>Ctrl</kbd>/<kbd>Cmd</kbd></td>\n      <td>Exact-match flood fill (no smoothing)</td>\n    </tr>\n    <tr>\n      <td><kbd>e</kbd></td>\n      <td>Toggle vertex eraser</td>\n    </tr>\n    <tr>\n      <td><kbd>s</kbd></td>\n      <td>Selection mode (deactivates drawing tools)</td>\n    </tr>\n    <tr>\n      <td>Point prompt + <kbd>Shift</kbd>/<kbd>Alt</kbd></td>\n      <td>Add an exclude point (refine the current object)</td>\n    </tr>\n    <tr>\n      <td><kbd>Enter</kbd></td>\n      <td>Commit the current SAM point object</td>\n    </tr>\n    <tr>\n      <td><kbd>Esc</kbd></td>\n      <td>Undo the current SAM point object</td>\n    </tr>\n    <tr>\n      <td><kbd>Del</kbd> / <kbd>\u232B</kbd></td>\n      <td>Delete selected region</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Z</kbd></td>\n      <td>Undo the last region action (up to 10)</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd> / <kbd>Ctrl</kbd>+<kbd>Y</kbd></td>\n      <td>Redo the last undone region action</td>\n    </tr>\n  </table>\n\n  <ng-template pTemplate=\"footer\">\n    <p-button icon=\"pi pi-check\" (click)=\"visibleChange.emit(false)\" label=\"Ok\" styleClass=\"p-button-text\">\n    </p-button>\n  </ng-template>\n</p-dialog>\n", styles: ["kbd{background:#e8e8e8;border:1px solid #bbb;border-radius:3px;padding:1px 5px;font-family:monospace;font-size:.85em}.shortcuts-table{border-collapse:collapse}.shortcuts-table td{padding:.25rem .75rem .25rem 0;vertical-align:middle}.shortcuts-table td:first-child{white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i5.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ToolbarHelpDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'toolbar-help-dialog', standalone: true, imports: [CommonModule, SharedModule, ButtonModule, DialogModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-dialog\n  header=\"Plotting help\"\n  [visible]=\"visible\"\n  (visibleChange)=\"visibleChange.emit($event)\"\n  [modal]=\"true\"\n  [style]=\"{ width: '50vw' }\"\n  [maximizable]=\"true\"\n  [draggable]=\"false\"\n  [resizable]=\"false\"\n>\n  <p>\n    Click a file in the left-hand tree to display it. By default it opens in the <b>Image</b> view \u2014 a natively\n    tiled, deeply zoomable raster (OpenSeadragon) with a navigator minimap and a physical-units scale bar.\n    <b>Click the image to zoom</b> toward the clicked point; scroll to zoom and drag to pan. When a stack is open,\n    a slice slider (Image view) or image-mode toggle (other views) appears. Regions can also be edited in the\n    <b>Region Editor</b>, opened with the\n    <img src=\"assets/plotting/region-editor.svg\" width=\"14\" height=\"14\" alt=\"Region Editor\" />\n    toolbar button as a floating dialog. Drag the <i class=\"pi pi-bars\"></i> handle to detach this toolbar into a\n    floating window.\n  </p>\n\n  <h3>Plot-type dropdown</h3>\n  <p>\n    The <b>plot-type dropdown</b> switches how the file is visualized: <b>Image</b>, <b>Heatmap</b>,\n    <b>Contour</b>, <b>Surface</b>, <b>Volume</b>, <b>Isosurface</b>, and \u2014 when a spatial-omics dataset is open \u2014\n    <b>Spatial omics</b> and <b>Spatial omics 3D</b>.\n  </p>\n  <p>\n    <b>Only the modes the data can actually support are offered</b>, so the list changes with what is loaded rather\n    than showing entries that would come up blank:\n  </p>\n  <ul>\n    <li>\n      <b>Contour</b>, <b>Volume</b> and <b>Isosurface</b> need a grayscale image; the two 3D ones also need a\n      z-stack.\n    </li>\n    <li>\n      <b>Spatial omics</b> needs a published dataset, and <b>Spatial omics 3D</b> needs one whose coordinates carry\n      a z.\n    </li>\n    <li>\n      The pixel modes (<b>Image</b>, <b>Heatmap</b>, <b>Surface</b>) are withheld for a dataset that brings no\n      tissue image \u2014 seqFISH records coordinates and no section, so there is nothing for them to draw.\n    </li>\n  </ul>\n  <ul>\n    <li>\n      \"<b>Isosurface band</b>\" slider (Isosurface): sets the intensity band the surfaces are drawn for, mapped onto\n      the volume's real intensity range.\n    </li>\n    <li>\n      \"<b>3D camera</b>\" (Surface / Scatter 3D / Isosurface): zoom <i class=\"pi pi-search\"></i>, pan\n      <i class=\"pi pi-arrows-alt\"></i>, orbit <i class=\"pi pi-globe\"></i>, turntable <i class=\"pi pi-sync\"></i>,\n      and reset camera <i class=\"pi pi-home\"></i>; scroll to zoom the 3D scene.\n    </li>\n  </ul>\n\n  <h3>Image manipulation tools</h3>\n  <ul>\n    <li>\n      \"<b>Region Editor</b>\" <img src=\"assets/plotting/region-editor.svg\" width=\"15\" height=\"15\" />: opens the\n      Region Editor as a floating, draggable dialog \u2014 a per-image table of every region (class, colour, area) with\n      bulk select/label/colour/delete and GeoJSON import/export. It stays in sync with the image, so you can keep\n      it open while drawing.\n    </li>\n    <li>\n      \"<b>Intensity profile lines</b>\" <img src=\"assets/plotting/spline-chart.svg\" width=\"15\" height=\"15\" /> (<i\n        >work in progress \u2014 not yet stable</i\n      >): adds a coloured line ROI; a floating inset chart plots intensity along each line, updates live as you\n      drag it, and re-samples at the current zoom resolution. Each added line gets its own colour; select a line\n      and use the trash tool <i class=\"pi pi-trash\"></i> to remove it (and its trace).\n    </li>\n    <li>\n      \"<b>Channels &amp; Histogram</b>\" <img src=\"assets/plotting/invert.svg\" width=\"15\" height=\"15\" />: opens a\n      floating dialog for brightness/contrast, gamma, and per-channel display, plus the\n      <b>colormap / LUT</b> controls (grayscale only) \u2014 a <b>reverse</b> toggle and a colormap dropdown (default:\n      inverted greys).\n    </li>\n    <li>\n      \"<b>Smoothen</b>\" <img src=\"assets/plotting/smooth.svg\" width=\"15\" height=\"15\" /> (Image view only): the\n      image opens showing <b>raw pixels</b> (nearest-neighbour), so zooming in renders crisp blocks for pixel\n      inspection. Toggle this on for bilinear smoothing; the icon turns white while smoothing is active.\n    </li>\n  </ul>\n\n  <h3>Download &amp; view tools</h3>\n  <ul>\n    <li>\"<b>Download</b>\" <i class=\"pi pi-download\"></i>: download the current image as a PNG.</li>\n    <li>\n      \"<b>Fit to view</b>\" / autoscale <i class=\"pi pi-window-maximize\"></i>: resets the image to its original\n      dimensions. In stack mode it also resets to single-image mode.\n    </li>\n  </ul>\n\n  <h3>Zoom tools</h3>\n  <ul>\n    <li>\n      \"<b>Zoom box</b>\" <img src=\"assets/plotting/zoom-box.svg\" width=\"15\" height=\"15\" /> (<kbd>b</kbd>): drag a\n      box to select an area to zoom into.\n    </li>\n    <li>\"<b>Pan</b>\" <i class=\"pi pi-arrows-alt\"></i> (<kbd>p</kbd>): drag to pan the image.</li>\n    <li>\"<b>Zoom in</b>\" <i class=\"pi pi-search-plus\"></i> (<kbd>+</kbd>): zoom in one step.</li>\n    <li>\n      \"<b>Zoom out</b>\" <i class=\"pi pi-search-minus\"></i> (<kbd>-</kbd>): zoom out one step, stopping at the\n      original image dimensions.\n    </li>\n  </ul>\n\n  <h3>Region tools</h3>\n  <p>\n    By default no tool is selected (all greyed-out); selecting a tool highlights it. The vertex-editing tools\n    (polygon, add/delete vertex, move, B\u00E9zier conversions) are available in the <b>Image</b> view only. On a\n    <b>donut</b> (a region with a hole), the inner-ring vertices are editable too \u2014 drag, add, and delete them just\n    like the outer ring.\n  </p>\n  <ul>\n    <li>\n      \"<b>Selection</b>\" <i class=\"pi pi-arrow-up-right\"></i> (<kbd>s</kbd>): a neutral mode that turns off\n      whatever drawing tool was active (wand, vertex eraser, rectangle, etc.). Use it to step out of editing\n      without picking another tool.\n    </li>\n    <li>\n      \"<b>Rectangular region</b>\" <i class=\"pi pi-stop\"></i> (<kbd>r</kbd>): click and drag to create a rectangular\n      region.\n    </li>\n    <li>\n      \"<b>Polyline</b>\" <img src=\"assets/plotting/polyline.svg\" width=\"14\" height=\"14\" /> (<kbd>l</kbd>): draw an\n      open (non-closed) polyline by clicking and dragging. Polylines can be edited and exported to GeoJSON as a\n      <code>LineString</code> feature.\n    </li>\n    <li>\n      \"<b>Freeform region</b>\" <i class=\"pi pi-pencil\"></i> (<kbd>f</kbd>): click and drag to draw a closed\n      freeform polygon.\n    </li>\n    <li>\n      \"<b>Brush</b>\" <img src=\"assets/plotting/paintbrush.svg\" width=\"15\" height=\"15\" />: click and drag to paint a\n      region with a circular brush \u2014 the painted stroke is the region. A <b>Size</b> slider (brush diameter, in\n      image pixels) appears in the toolbar while the brush is active. Hold <kbd>Shift</kbd> while painting to\n      <b>erase</b> (subtract) from a region instead. Painting over an existing region extends it; brushing across\n      two regions merges them. Painting a closed ring (or shift-erasing an interior pocket) leaves the enclosed\n      area empty \u2014 a <b>donut</b> (Image view).\n    </li>\n    <li>\n      \"<b>Polygon</b>\" <img src=\"assets/plotting/polygon-vertices.svg\" width=\"15\" height=\"15\" />: click to place\n      each vertex; click the first point to close the polygon.\n    </li>\n    <li>\n      \"<b>Add vertex</b>\" <img src=\"assets/plotting/vertex-add.svg\" width=\"15\" height=\"15\" />: click an edge of the\n      selected polygon to insert a new vertex.\n    </li>\n    <li>\n      \"<b>Delete vertex</b>\" <img src=\"assets/plotting/vertex-delete.svg\" width=\"15\" height=\"15\" />: click a vertex\n      of the selected polygon to remove it.\n    </li>\n    <li>\n      <b>Moving a region</b> <img src=\"assets/plotting/region-move.svg\" width=\"15\" height=\"15\" />: with the Select\n      tool, drag the selected region's body (or a rectangle's handles to resize it).\n    </li>\n    <li>\n      <b>Convert to B\u00E9zier</b> <img src=\"assets/plotting/to-bezier.svg\" width=\"15\" height=\"15\" /> /\n      <b>Convert to polygon</b> <img src=\"assets/plotting/to-polygon.svg\" width=\"15\" height=\"15\" /> (Image view):\n      right-click the selected region and pick the conversion in the context menu to turn it into a smooth B\u00E9zier\n      curve, or back into a straight-edged polygon.\n    </li>\n    <li>\n      \"<b>Wand</b>\" <img src=\"assets/plotting/wand.svg\" width=\"15\" height=\"15\" /> (<kbd>w</kbd>): click to grow a\n      region from pixels with similar values around the click point. Hold <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> for an\n      exact-match flood fill; drag to keep extending the selection while moving; hold <kbd>Shift</kbd> while\n      clicking or dragging on an existing region to <b>erase</b> pixels from it. Use the <b>Sens.</b> slider that\n      appears to make the wand stricter (higher = smaller selection) or looser. Subsequent clicks keep extending\n      the same region; clicking inside an existing region adopts it, and growing into another region merges them.\n    </li>\n    <li>\n      \"<b>Vertex eraser</b>\" <i class=\"pi pi-eraser\"></i> (<kbd>e</kbd>): click or click-and-drag to remove polygon\n      vertices that fall inside the cursor circle from any region, including a region's inner rings (donut holes).\n      Use the <b>Radius</b> slider to set the eraser size in image pixels. Polygons reduced below 3 vertices (or\n      polylines below 2) are deleted entirely; a hole reduced below 3 vertices is removed.\n    </li>\n    <li>\n      \"<b>Undo</b>\" <img src=\"assets/plotting/undo.svg\" width=\"15\" height=\"15\" />\n      (<kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Z</kbd>): reverts the last region action (draw, delete, edit, wand/brush\n      stroke, segmentation, \u2026). Up to the last\n      <b>10</b> actions can be undone; the button greys out when there's nothing left to undo.\n    </li>\n    <li>\n      \"<b>Redo</b>\"\n      <img src=\"assets/plotting/redo.svg\" width=\"15\" height=\"15\" />\n      (<kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd> or\n      <kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Y</kbd>): re-applies the most recently undone action. Performing a new\n      region action clears what can be redone.\n    </li>\n    <li>\n      \"<b>Delete region</b>\" <i class=\"pi pi-trash\"></i> (<kbd>Del</kbd>): deletes the selected region. This can\n      also be done from the Region Editor.\n    </li>\n  </ul>\n\n  <h3>Region actions (right-click the image)</h3>\n  <p>\n    Right-click a region \u2014 or the current multi-selection \u2014 to open the \"<b>Selected region(s)</b>\" group at the\n    top of the context menu. These act immediately on the selection (they're not drawing modes) and are fully\n    undo/redo-able:\n  </p>\n  <ul>\n    <li>\n      \"<b>Select all regions</b>\" <i class=\"pi pi-check-square\"></i>: select every region on the image (also in the\n      Region Editor toolbar).\n    </li>\n    <li>\n      \"<b>Merge / group</b>\": combine 2+ selected regions into one. If the pieces don't touch, the result is a\n      single multi-part region (sparse \"bits\").\n    </li>\n    <li>\"<b>Ungroup</b>\": split a multi-part region back into one region per piece.</li>\n    <li>\n      \"<b>Inverse</b>\": replace the selection with everything <i>outside</i> it \u2014 the image rectangle with the\n      selected regions punched out as holes. Works at any image size.\n    </li>\n    <li>\n      \"<b>Simplify</b>\": reduce a region's vertex count (Douglas\u2013Peucker) by an altitude threshold in pixels \u2014 pick\n      <b>Light</b> (1&nbsp;px), <b>Medium</b> (3&nbsp;px), <b>Strong</b> (8&nbsp;px), or <b>Custom\u2026</b> for a\n      slider. Applies to the exterior and any holes (and every part of a multi-part region).\n    </li>\n    <li>\n      \"<b>Convert to B\u00E9zier</b>\" / \"<b>Convert to polygon</b>\" (Image view) and \"<b>Delete</b>\" also live in this\n      group; the conversions are only here, not in the toolbar.\n    </li>\n  </ul>\n\n  <h3>Segmentation &amp; detection tools</h3>\n  <p>\n    AI-assisted segmentation and detection that run entirely in the browser. The first run of any model downloads\n    it (a progress toast is shown); it's then cached.\n  </p>\n  <p>\n    Two shapes of tool: the <b>prompted</b> ones (Segment, Point prompts, Cellpose) act on rectangles you draw, and\n    generated regions inherit the color of the rectangle they came from<span *ngIf=\"contributedTools.length\"\n      >; the <b>no-prompt</b> ones ({{ contributedToolNames }}) sweep the whole current view, so there is nothing\n      to draw first</span\n    >.\n  </p>\n  <p>\n    Each model dropdown <i class=\"pi pi-chevron-down\"></i> lists the available checkpoints with a\n    <i class=\"pi pi-info-circle\"></i> beside each one \u2014 hover it for that model's size, speed, training domain and\n    accuracy, so you can pick without leaving the toolbar.\n  </p>\n  <ul>\n    <li>\n      \"<b>Segment</b>\" <img src=\"assets/plotting/sam-box-prompt.svg\" width=\"15\" height=\"15\" /> (box prompt): draw\n      one or more <b>Rectangular regions</b> around the objects of interest, then click Segment. Each rectangle is\n      replaced by the SAM mask of the object inside it.\n    </li>\n    <li>\n      \"<b>Point prompts</b>\" <img src=\"assets/plotting/sam-point-prompt.svg\" width=\"15\" height=\"15\" />: click\n      directly on an object to segment it as a <b>new</b> region. Each click starts a fresh object \u2014 clicking\n      another object won't grow the previous one. <kbd>Shift</kbd>/<kbd>Alt</kbd>-click adds an\n      <i>exclude</i> point that refines the current object; <kbd>Esc</kbd> undoes it, <kbd>Enter</kbd> commits it.\n    </li>\n    <li>\n      \"<b>Model picker</b>\" <i class=\"pi pi-chevron-down\"></i>: the dropdown attached to the Segment button chooses\n      the SAM model \u2014 <b>micro-sam ViT-T</b> (default; small, fast) or <b>micro-sam ViT-B</b> (larger, highest\n      accuracy) for light microscopy, or <b>patho-sam ViT-B</b> for histopathology (H&amp;E / stained tissue). All\n      are promptable Segment Anything models finetuned for biomedical images; they differ in the\n      <i>image encoder</i> (the heavy once-per-image step) and the training domain \u2014 box and point prompting behave\n      the same. The choice applies to <i>both</i> the box and point tools, which share one loaded model and image\n      encoding, so the first run after switching models (or images) downloads and encodes once for both.\n    </li>\n    <li>\n      \"<b>Cellpose</b>\" <img src=\"assets/plotting/cells.svg\" width=\"15\" height=\"15\" />: draw rectangles, then click\n      Cellpose to automatically segment every cell inside each rectangle (client-side cellpose-SAM) \u2014 one region\n      per detected cell. No clicking on individual cells needed.\n    </li>\n    <!-- Contributed tools describe themselves. This library ships none, so an\n         open build's help lists only the prompted tools above \u2014 the text no\n         longer promises buttons that are not there. -->\n    <ng-container *ngFor=\"let tool of contributedTools\">\n      <li *ngIf=\"tool.help\" [innerHTML]=\"tool.help.body\"></li>\n    </ng-container>\n    <ng-container *ngFor=\"let tool of dialogTools\">\n      <li *ngIf=\"tool.help\" [innerHTML]=\"tool.help.body\"></li>\n    </ng-container>\n  </ul>\n\n  <h3>Spatial omics</h3>\n  <p>\n    In <b>Spatial omics</b> mode each observation \u2014 a cell or a Visium spot \u2014 is drawn at its own coordinates, over\n    the tissue image where the dataset registers onto one. The\n    <img src=\"assets/plotting/spatial-omics.svg\" width=\"14\" height=\"14\" alt=\"Spatial omics\" />\n    panel colours them by a <b>column</b> (a cell type, a cluster) or by a <b>gene</b>, and the two are exclusive\n    so what drives the colours is never ambiguous.\n  </p>\n  <ul>\n    <li>\n      \"<b>Select from ROIs</b>\": turns the regions you have drawn into a selection of observations. Everything else\n      then follows that selection.\n    </li>\n    <li>\"<b>Point size</b>\" / \"<b>Opacity</b>\": how the markers are drawn, not what is selected.</li>\n  </ul>\n\n  <h3>Distribution charts</h3>\n  <p>\n    The <b>Distribution</b> section of the spatial-omics panel charts whatever the map is coloured by, so the two\n    can never disagree. Each tab answers a different question, and the <i class=\"pi pi-question-circle\"></i> beside\n    them explains the one on screen \u2014 including what it must <em>not</em> be read for.\n  </p>\n  <ul>\n    <li>\n      \"<b>Counts</b>\": how many observations per category. A category is a label, not a magnitude, so a frequency\n      is the only distribution it has.\n    </li>\n    <li>\n      \"<b>Histogram</b>\" / \"<b>Violin</b>\" / \"<b>Box</b>\": how a continuous value is distributed \u2014 over everything,\n      or split by a grouping column.\n    </li>\n    <li>\n      \"<b>Heatmap</b>\": mean expression of the genes you pick within each group. Z-scored per gene by default, so a\n      colour means \"above or below this gene's own average\" rather than \"highly expressed\".\n    </li>\n    <li>\n      \"<b>Embedding</b>\": a UMAP, PCA or t-SNE over the same cells. <b>Lasso it to select on the map</b> \u2014 both\n      views read the same selection. Only PCA labels its axes with a percentage, because only its axes explain a\n      measurable share of the variance; UMAP and t-SNE coordinates are arbitrary, so distance between distant\n      clusters should not be read.\n    </li>\n    <li>\n      \"<b>Detach</b>\": moves the charts into their own window so they can sit beside the map instead of inside the\n      panel. Switching tabs keeps the window where it is.\n    </li>\n  </ul>\n\n  <h3>Help</h3>\n  <p>\"<b>Help</b>\" <i class=\"pi pi-question-circle\"></i>: opens this dialog.</p>\n\n  <h3>Keyboard shortcuts</h3>\n  <table class=\"shortcuts-table\">\n    <tr>\n      <td><kbd>+</kbd> / <kbd>=</kbd></td>\n      <td>Zoom in</td>\n    </tr>\n    <tr>\n      <td><kbd>-</kbd></td>\n      <td>Zoom out</td>\n    </tr>\n    <tr>\n      <td><kbd>b</kbd></td>\n      <td>Toggle zoom box mode</td>\n    </tr>\n    <tr>\n      <td><kbd>p</kbd></td>\n      <td>Toggle pan mode</td>\n    </tr>\n    <tr>\n      <td><kbd>f</kbd></td>\n      <td>Toggle freeform region drawing</td>\n    </tr>\n    <tr>\n      <td><kbd>l</kbd></td>\n      <td>Toggle polyline drawing</td>\n    </tr>\n    <tr>\n      <td><kbd>r</kbd></td>\n      <td>Toggle rectangular region drawing</td>\n    </tr>\n    <tr>\n      <td><kbd>w</kbd></td>\n      <td>Toggle wand tool</td>\n    </tr>\n    <tr>\n      <td>Wand + <kbd>Shift</kbd></td>\n      <td>Erase pixels from the active region</td>\n    </tr>\n    <tr>\n      <td>Wand + <kbd>Ctrl</kbd>/<kbd>Cmd</kbd></td>\n      <td>Exact-match flood fill (no smoothing)</td>\n    </tr>\n    <tr>\n      <td><kbd>e</kbd></td>\n      <td>Toggle vertex eraser</td>\n    </tr>\n    <tr>\n      <td><kbd>s</kbd></td>\n      <td>Selection mode (deactivates drawing tools)</td>\n    </tr>\n    <tr>\n      <td>Point prompt + <kbd>Shift</kbd>/<kbd>Alt</kbd></td>\n      <td>Add an exclude point (refine the current object)</td>\n    </tr>\n    <tr>\n      <td><kbd>Enter</kbd></td>\n      <td>Commit the current SAM point object</td>\n    </tr>\n    <tr>\n      <td><kbd>Esc</kbd></td>\n      <td>Undo the current SAM point object</td>\n    </tr>\n    <tr>\n      <td><kbd>Del</kbd> / <kbd>\u232B</kbd></td>\n      <td>Delete selected region</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Z</kbd></td>\n      <td>Undo the last region action (up to 10)</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd> / <kbd>Ctrl</kbd>+<kbd>Y</kbd></td>\n      <td>Redo the last undone region action</td>\n    </tr>\n  </table>\n\n  <ng-template pTemplate=\"footer\">\n    <p-button icon=\"pi pi-check\" (click)=\"visibleChange.emit(false)\" label=\"Ok\" styleClass=\"p-button-text\">\n    </p-button>\n  </ng-template>\n</p-dialog>\n", styles: ["kbd{background:#e8e8e8;border:1px solid #bbb;border-radius:3px;padding:1px 5px;font-family:monospace;font-size:.85em}.shortcuts-table{border-collapse:collapse}.shortcuts-table td{padding:.25rem .75rem .25rem 0;vertical-align:middle}.shortcuts-table td:first-child{white-space:nowrap}\n"] }]
+            args: [{ selector: 'toolbar-help-dialog', standalone: true, imports: [CommonModule, SharedModule, ButtonModule, DialogModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-dialog\n  header=\"Plotting help\"\n  [visible]=\"visible\"\n  (visibleChange)=\"visibleChange.emit($event)\"\n  [modal]=\"true\"\n  [style]=\"{ width: '50vw' }\"\n  [maximizable]=\"true\"\n  [draggable]=\"false\"\n  [resizable]=\"false\"\n>\n  <p>\n    Click a file in the left-hand tree to display it. By default it opens in the <b>Image</b> view \u2014 a natively\n    tiled, deeply zoomable raster (OpenSeadragon) with a navigator minimap and a physical-units scale bar.\n    <b>Click the image to zoom</b> toward the clicked point; scroll to zoom and drag to pan. When a stack is open,\n    a slice slider (Image view) or image-mode toggle (other views) appears. Regions can also be edited in the\n    <b>Region Editor</b>, opened with the\n    <img src=\"assets/plotting/region-editor.svg\" width=\"14\" height=\"14\" alt=\"Region Editor\" />\n    toolbar button as a floating dialog. Drag the <i class=\"pi pi-bars\"></i> handle to detach this toolbar into a\n    floating window.\n  </p>\n\n  <h3>Plot-type dropdown</h3>\n  <p>\n    The <b>plot-type dropdown</b> switches how the file is visualized: <b>Image</b>, <b>Heatmap</b>,\n    <b>Contour</b>, <b>Surface</b>, <b>Volume</b>, <b>Isosurface</b>, and \u2014 when a spatial-omics dataset is open \u2014\n    <b>Spatial omics</b> and <b>Spatial omics 3D</b>.\n  </p>\n  <p>\n    <b>Only the modes the data can actually support are offered</b>, so the list changes with what is loaded rather\n    than showing entries that would come up blank:\n  </p>\n  <ul>\n    <li>\n      <b>Contour</b>, <b>Volume</b> and <b>Isosurface</b> need a grayscale image; the two 3D ones also need a\n      z-stack.\n    </li>\n    <li>\n      <b>Spatial omics</b> needs a published dataset, and <b>Spatial omics 3D</b> needs one whose coordinates carry\n      a z.\n    </li>\n    <li>\n      The pixel modes (<b>Image</b>, <b>Heatmap</b>, <b>Surface</b>) are withheld for a dataset that brings no\n      tissue image \u2014 seqFISH records coordinates and no section, so there is nothing for them to draw.\n    </li>\n  </ul>\n  <ul>\n    <li>\n      \"<b>Isosurface band</b>\" slider (Isosurface): sets the intensity band the surfaces are drawn for, mapped onto\n      the volume's real intensity range.\n    </li>\n    <li>\n      \"<b>3D camera</b>\" (Surface / Scatter 3D / Isosurface): zoom <i class=\"pi pi-search\"></i>, pan\n      <i class=\"pi pi-arrows-alt\"></i>, orbit <i class=\"pi pi-globe\"></i>, turntable <i class=\"pi pi-sync\"></i>,\n      and reset camera <i class=\"pi pi-home\"></i>; scroll to zoom the 3D scene.\n    </li>\n  </ul>\n\n  <h3>Image manipulation tools</h3>\n  <ul>\n    <li>\n      \"<b>Region Editor</b>\" <img src=\"assets/plotting/region-editor.svg\" width=\"15\" height=\"15\" />: opens the\n      Region Editor as a floating, draggable dialog \u2014 a per-image table of every region (class, colour, area) with\n      bulk select/label/colour/delete and GeoJSON import/export. It stays in sync with the image, so you can keep\n      it open while drawing.\n    </li>\n    <li>\n      \"<b>Intensity profile lines</b>\" <img src=\"assets/plotting/spline-chart.svg\" width=\"15\" height=\"15\" /> (<i\n        >work in progress \u2014 not yet stable</i\n      >): adds a coloured line ROI; a floating inset chart plots intensity along each line, updates live as you\n      drag it, and re-samples at the current zoom resolution. Each added line gets its own colour; select a line\n      and use the trash tool <i class=\"pi pi-trash\"></i> to remove it (and its trace).\n    </li>\n    <li>\n      \"<b>Channels &amp; Histogram</b>\" <img src=\"assets/plotting/invert.svg\" width=\"15\" height=\"15\" />: opens a\n      floating dialog for brightness/contrast, gamma, and per-channel display, plus the\n      <b>colormap / LUT</b> controls (grayscale only) \u2014 a <b>reverse</b> toggle and a colormap dropdown (default:\n      inverted greys).\n    </li>\n    <li>\n      \"<b>Smoothen</b>\" <img src=\"assets/plotting/smooth.svg\" width=\"15\" height=\"15\" /> (Image view only): the\n      image opens showing <b>raw pixels</b> (nearest-neighbour), so zooming in renders crisp blocks for pixel\n      inspection. Toggle this on for bilinear smoothing; the icon turns white while smoothing is active.\n    </li>\n  </ul>\n\n  <h3>Download &amp; view tools</h3>\n  <ul>\n    <li>\"<b>Download</b>\" <i class=\"pi pi-download\"></i>: download the current image as a PNG.</li>\n    <li>\n      \"<b>Fit to view</b>\" / autoscale <i class=\"pi pi-window-maximize\"></i>: resets the image to its original\n      dimensions. In stack mode it also resets to single-image mode.\n    </li>\n  </ul>\n\n  <h3>Zoom tools</h3>\n  <ul>\n    <li>\n      \"<b>Zoom box</b>\" <img src=\"assets/plotting/zoom-box.svg\" width=\"15\" height=\"15\" /> (<kbd>b</kbd>): drag a\n      box to select an area to zoom into.\n    </li>\n    <li>\"<b>Pan</b>\" <i class=\"pi pi-arrows-alt\"></i> (<kbd>p</kbd>): drag to pan the image.</li>\n    <li>\"<b>Zoom in</b>\" <i class=\"pi pi-search-plus\"></i> (<kbd>+</kbd>): zoom in one step.</li>\n    <li>\n      \"<b>Zoom out</b>\" <i class=\"pi pi-search-minus\"></i> (<kbd>-</kbd>): zoom out one step, stopping at the\n      original image dimensions.\n    </li>\n  </ul>\n\n  <h3>Region tools</h3>\n  <p>\n    By default no tool is selected (all greyed-out); selecting a tool highlights it. The vertex-editing tools\n    (polygon, add/delete vertex, move, B\u00E9zier conversions) are available in the <b>Image</b> view only. On a\n    <b>donut</b> (a region with a hole), the inner-ring vertices are editable too \u2014 drag, add, and delete them just\n    like the outer ring.\n  </p>\n  <ul>\n    <li>\n      \"<b>Selection</b>\" <i class=\"pi pi-arrow-up-right\"></i> (<kbd>s</kbd>): a neutral mode that turns off\n      whatever drawing tool was active (wand, vertex eraser, rectangle, etc.). Use it to step out of editing\n      without picking another tool.\n    </li>\n    <li>\n      \"<b>Rectangular region</b>\" <i class=\"pi pi-stop\"></i> (<kbd>r</kbd>): click and drag to create a rectangular\n      region.\n    </li>\n    <li>\n      \"<b>Polyline</b>\" <img src=\"assets/plotting/polyline.svg\" width=\"14\" height=\"14\" /> (<kbd>l</kbd>): draw an\n      open (non-closed) polyline by clicking and dragging. Polylines can be edited and exported to GeoJSON as a\n      <code>LineString</code> feature.\n    </li>\n    <li>\n      \"<b>Freeform region</b>\" <i class=\"pi pi-pencil\"></i> (<kbd>f</kbd>): click and drag to draw a closed\n      freeform polygon.\n    </li>\n    <li>\n      \"<b>Brush</b>\" <img src=\"assets/plotting/paintbrush.svg\" width=\"15\" height=\"15\" />: click and drag to paint a\n      region with a circular brush \u2014 the painted stroke is the region. A <b>Size</b> slider (brush diameter, in\n      image pixels) appears in the toolbar while the brush is active. Hold <kbd>Shift</kbd> while painting to\n      <b>erase</b> (subtract) from a region instead. Painting over an existing region extends it; brushing across\n      two regions merges them. Painting a closed ring (or shift-erasing an interior pocket) leaves the enclosed\n      area empty \u2014 a <b>donut</b> (Image view).\n    </li>\n    <li>\n      \"<b>Polygon</b>\" <img src=\"assets/plotting/polygon-vertices.svg\" width=\"15\" height=\"15\" />: click to place\n      each vertex; click the first point to close the polygon.\n    </li>\n    <li>\n      \"<b>Add vertex</b>\" <img src=\"assets/plotting/vertex-add.svg\" width=\"15\" height=\"15\" />: click an edge of the\n      selected polygon to insert a new vertex.\n    </li>\n    <li>\n      \"<b>Delete vertex</b>\" <img src=\"assets/plotting/vertex-delete.svg\" width=\"15\" height=\"15\" />: click a vertex\n      of the selected polygon to remove it.\n    </li>\n    <li>\n      <b>Moving a region</b> <img src=\"assets/plotting/region-move.svg\" width=\"15\" height=\"15\" />: with the Select\n      tool, drag the selected region's body (or a rectangle's handles to resize it).\n    </li>\n    <li>\n      <b>Convert to B\u00E9zier</b> <img src=\"assets/plotting/to-bezier.svg\" width=\"15\" height=\"15\" /> /\n      <b>Convert to polygon</b> <img src=\"assets/plotting/to-polygon.svg\" width=\"15\" height=\"15\" /> (Image view):\n      right-click the selected region and pick the conversion in the context menu to turn it into a smooth B\u00E9zier\n      curve, or back into a straight-edged polygon.\n    </li>\n    <li>\n      \"<b>Wand</b>\" <img src=\"assets/plotting/wand.svg\" width=\"15\" height=\"15\" /> (<kbd>w</kbd>): click to grow a\n      region from pixels with similar values around the click point. Hold <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> for an\n      exact-match flood fill; drag to keep extending the selection while moving; hold <kbd>Shift</kbd> while\n      clicking or dragging on an existing region to <b>erase</b> pixels from it. Use the <b>Sens.</b> slider that\n      appears to make the wand stricter (higher = smaller selection) or looser. Subsequent clicks keep extending\n      the same region; clicking inside an existing region adopts it, and growing into another region merges them.\n    </li>\n    <li>\n      \"<b>Vertex eraser</b>\" <i class=\"pi pi-eraser\"></i> (<kbd>e</kbd>): click or click-and-drag to remove polygon\n      vertices that fall inside the cursor circle from any region, including a region's inner rings (donut holes).\n      Use the <b>Radius</b> slider to set the eraser size in image pixels. Polygons reduced below 3 vertices (or\n      polylines below 2) are deleted entirely; a hole reduced below 3 vertices is removed.\n    </li>\n    <li>\n      \"<b>Undo</b>\" <img src=\"assets/plotting/undo.svg\" width=\"15\" height=\"15\" />\n      (<kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Z</kbd>): reverts the last region action (draw, delete, edit, wand/brush\n      stroke, segmentation, \u2026). Up to the last\n      <b>10</b> actions can be undone; the button greys out when there's nothing left to undo.\n    </li>\n    <li>\n      \"<b>Redo</b>\"\n      <img src=\"assets/plotting/redo.svg\" width=\"15\" height=\"15\" />\n      (<kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd> or\n      <kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Y</kbd>): re-applies the most recently undone action. Performing a new\n      region action clears what can be redone.\n    </li>\n    <li>\n      \"<b>Delete region</b>\" <i class=\"pi pi-trash\"></i> (<kbd>Del</kbd>): deletes the selected region. This can\n      also be done from the Region Editor.\n    </li>\n  </ul>\n\n  <h3>Region actions (right-click the image)</h3>\n  <p>\n    Right-click a region \u2014 or the current multi-selection \u2014 to open the \"<b>Selected region(s)</b>\" group at the\n    top of the context menu. These act immediately on the selection (they're not drawing modes) and are fully\n    undo/redo-able:\n  </p>\n  <ul>\n    <li>\n      \"<b>Select all regions</b>\" <i class=\"pi pi-check-square\"></i>: select every region on the image (also in the\n      Region Editor toolbar).\n    </li>\n    <li>\n      \"<b>Merge / group</b>\": combine 2+ selected regions into one. If the pieces don't touch, the result is a\n      single multi-part region (sparse \"bits\").\n    </li>\n    <li>\"<b>Ungroup</b>\": split a multi-part region back into one region per piece.</li>\n    <li>\n      \"<b>Inverse</b>\": replace the selection with everything <i>outside</i> it \u2014 the image rectangle with the\n      selected regions punched out as holes. Works at any image size.\n    </li>\n    <li>\n      \"<b>Simplify</b>\": reduce a region's vertex count (Douglas\u2013Peucker) by an altitude threshold in pixels \u2014 pick\n      <b>Light</b> (1&nbsp;px), <b>Medium</b> (3&nbsp;px), <b>Strong</b> (8&nbsp;px), or <b>Custom\u2026</b> for a\n      slider. Applies to the exterior and any holes (and every part of a multi-part region).\n    </li>\n    <li>\n      \"<b>Convert to B\u00E9zier</b>\" / \"<b>Convert to polygon</b>\" (Image view) and \"<b>Delete</b>\" also live in this\n      group; the conversions are only here, not in the toolbar.\n    </li>\n  </ul>\n\n  <h3>Segmentation &amp; detection tools</h3>\n  <p>\n    AI-assisted segmentation and detection that run entirely in the browser. The first run of any model downloads\n    it (a progress toast is shown); it's then cached.\n  </p>\n  <p>\n    Two shapes of tool: the <b>prompted</b> ones (Segment, Point prompts, Cellpose) act on rectangles you draw, and\n    generated regions inherit the color of the rectangle they came from<span *ngIf=\"contributedTools.length\"\n      >; the <b>no-prompt</b> ones ({{ contributedToolNames }}) sweep the whole current view, so there is nothing\n      to draw first</span\n    >.\n  </p>\n  <p>\n    Each model dropdown <i class=\"pi pi-chevron-down\"></i> lists the available checkpoints with a\n    <i class=\"pi pi-info-circle\"></i> beside each one \u2014 hover it for that model's size, speed, training domain and\n    accuracy, so you can pick without leaving the toolbar.\n  </p>\n  <ul>\n    <li>\n      \"<b>Segment</b>\" <img src=\"assets/plotting/sam-box-prompt.svg\" width=\"15\" height=\"15\" /> (box prompt): draw\n      one or more <b>Rectangular regions</b> around the objects of interest, then click Segment. Each rectangle is\n      replaced by the SAM mask of the object inside it.\n    </li>\n    <li>\n      \"<b>Point prompts</b>\" <img src=\"assets/plotting/sam-point-prompt.svg\" width=\"15\" height=\"15\" />: click\n      directly on an object to segment it as a <b>new</b> region. Each click starts a fresh object \u2014 clicking\n      another object won't grow the previous one. <kbd>Shift</kbd>/<kbd>Alt</kbd>-click adds an\n      <i>exclude</i> point that refines the current object; <kbd>Esc</kbd> undoes it, <kbd>Enter</kbd> commits it.\n    </li>\n    <li>\n      \"<b>Model picker</b>\" <i class=\"pi pi-chevron-down\"></i>: the dropdown attached to the Segment button chooses\n      the SAM model \u2014 <b>micro-sam ViT-T</b> (default; small, fast) or <b>micro-sam ViT-B</b> (larger, highest\n      accuracy) for light microscopy, or <b>patho-sam ViT-B</b> for histopathology (H&amp;E / stained tissue). All\n      are promptable Segment Anything models finetuned for biomedical images; they differ in the\n      <i>image encoder</i> (the heavy once-per-image step) and the training domain \u2014 box and point prompting behave\n      the same. The choice applies to <i>both</i> the box and point tools, which share one loaded model and image\n      encoding, so the first run after switching models (or images) downloads and encodes once for both.\n    </li>\n    <li>\n      \"<b>Cellpose</b>\" <img src=\"assets/plotting/cells.svg\" width=\"15\" height=\"15\" />: draw rectangles, then click\n      Cellpose to automatically segment every cell inside each rectangle (client-side cellpose-SAM) \u2014 one region\n      per detected cell. No clicking on individual cells needed.\n    </li>\n    <!-- Contributed tools describe themselves. This library ships none, so an\n         open build's help lists only the prompted tools above \u2014 the text no\n         longer promises buttons that are not there. -->\n    <ng-container *ngFor=\"let tool of contributedTools\">\n      <li *ngIf=\"tool.help\" [innerHTML]=\"tool.help.body\"></li>\n    </ng-container>\n    <ng-container *ngFor=\"let tool of dialogTools\">\n      <li *ngIf=\"tool.help\" [innerHTML]=\"tool.help.body\"></li>\n    </ng-container>\n  </ul>\n\n  <h3>Spatial omics</h3>\n  <p>\n    In <b>Spatial omics</b> mode each observation \u2014 a cell or a Visium spot \u2014 is drawn at its own coordinates, over\n    the tissue image where the dataset registers onto one. The\n    <img src=\"assets/plotting/spatial-omics.svg\" width=\"14\" height=\"14\" alt=\"Spatial omics\" />\n    panel colours them by a <b>column</b> (a cell type, a cluster) or by a <b>gene</b>, and the two are exclusive\n    so what drives the colours is never ambiguous.\n  </p>\n  <ul>\n    <li>\n      \"<b>Select from ROIs</b>\": turns the regions you have drawn into a selection of observations. Everything else\n      then follows that selection. In 3D, with classes picked in the Region Editor's class tree (or their surfaces\n      clicked), it selects the observations inside those classes' volumes.\n    </li>\n    <li>\"<b>Point size</b>\" / \"<b>Opacity</b>\": how the markers are drawn, not what is selected.</li>\n  </ul>\n\n  <h3>Distribution charts</h3>\n  <p>\n    The <b>Distribution</b> section of the spatial-omics panel charts whatever the map is coloured by, so the two\n    can never disagree. Each tab answers a different question, and the <i class=\"pi pi-question-circle\"></i> beside\n    them explains the one on screen \u2014 including what it must <em>not</em> be read for.\n  </p>\n  <ul>\n    <li>\n      \"<b>Counts</b>\": how many observations per category. A category is a label, not a magnitude, so a frequency\n      is the only distribution it has.\n    </li>\n    <li>\n      \"<b>Histogram</b>\" / \"<b>Violin</b>\" / \"<b>Box</b>\": how a continuous value is distributed \u2014 over everything,\n      or split by a grouping column.\n    </li>\n    <li>\n      \"<b>Heatmap</b>\": mean expression of the genes you pick within each group. Z-scored per gene by default, so a\n      colour means \"above or below this gene's own average\" rather than \"highly expressed\".\n    </li>\n    <li>\n      \"<b>Embedding</b>\": a UMAP, PCA or t-SNE over the same cells. <b>Lasso it to select on the map</b> \u2014 both\n      views read the same selection. Only PCA labels its axes with a percentage, because only its axes explain a\n      measurable share of the variance; UMAP and t-SNE coordinates are arbitrary, so distance between distant\n      clusters should not be read.\n    </li>\n    <li>\n      \"<b>Detach</b>\": moves the charts into their own window so they can sit beside the map instead of inside the\n      panel. Switching tabs keeps the window where it is.\n    </li>\n  </ul>\n\n  <h3>Help</h3>\n  <p>\"<b>Help</b>\" <i class=\"pi pi-question-circle\"></i>: opens this dialog.</p>\n\n  <h3>Keyboard shortcuts</h3>\n  <table class=\"shortcuts-table\">\n    <tr>\n      <td><kbd>+</kbd> / <kbd>=</kbd></td>\n      <td>Zoom in</td>\n    </tr>\n    <tr>\n      <td><kbd>-</kbd></td>\n      <td>Zoom out</td>\n    </tr>\n    <tr>\n      <td><kbd>b</kbd></td>\n      <td>Toggle zoom box mode</td>\n    </tr>\n    <tr>\n      <td><kbd>p</kbd></td>\n      <td>Toggle pan mode</td>\n    </tr>\n    <tr>\n      <td><kbd>f</kbd></td>\n      <td>Toggle freeform region drawing</td>\n    </tr>\n    <tr>\n      <td><kbd>l</kbd></td>\n      <td>Toggle polyline drawing</td>\n    </tr>\n    <tr>\n      <td><kbd>r</kbd></td>\n      <td>Toggle rectangular region drawing</td>\n    </tr>\n    <tr>\n      <td><kbd>w</kbd></td>\n      <td>Toggle wand tool</td>\n    </tr>\n    <tr>\n      <td>Wand + <kbd>Shift</kbd></td>\n      <td>Erase pixels from the active region</td>\n    </tr>\n    <tr>\n      <td>Wand + <kbd>Ctrl</kbd>/<kbd>Cmd</kbd></td>\n      <td>Exact-match flood fill (no smoothing)</td>\n    </tr>\n    <tr>\n      <td><kbd>e</kbd></td>\n      <td>Toggle vertex eraser</td>\n    </tr>\n    <tr>\n      <td><kbd>s</kbd></td>\n      <td>Selection mode (deactivates drawing tools)</td>\n    </tr>\n    <tr>\n      <td>Point prompt + <kbd>Shift</kbd>/<kbd>Alt</kbd></td>\n      <td>Add an exclude point (refine the current object)</td>\n    </tr>\n    <tr>\n      <td><kbd>Enter</kbd></td>\n      <td>Commit the current SAM point object</td>\n    </tr>\n    <tr>\n      <td><kbd>Esc</kbd></td>\n      <td>Undo the current SAM point object</td>\n    </tr>\n    <tr>\n      <td><kbd>Del</kbd> / <kbd>\u232B</kbd></td>\n      <td>Delete selected region</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Z</kbd></td>\n      <td>Undo the last region action (up to 10)</td>\n    </tr>\n    <tr>\n      <td><kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd> / <kbd>Ctrl</kbd>+<kbd>Y</kbd></td>\n      <td>Redo the last undone region action</td>\n    </tr>\n  </table>\n\n  <ng-template pTemplate=\"footer\">\n    <p-button icon=\"pi pi-check\" (click)=\"visibleChange.emit(false)\" label=\"Ok\" styleClass=\"p-button-text\">\n    </p-button>\n  </ng-template>\n</p-dialog>\n", styles: ["kbd{background:#e8e8e8;border:1px solid #bbb;border-radius:3px;padding:1px 5px;font-family:monospace;font-size:.85em}.shortcuts-table{border-collapse:collapse}.shortcuts-table td{padding:.25rem .75rem .25rem 0;vertical-align:middle}.shortcuts-table td:first-child{white-space:nowrap}\n"] }]
         }], propDecorators: { visible: [{
                 type: Input
             }], visibleChange: [{
@@ -15963,6 +16053,18 @@ class RegionEditorComponent {
             .getRegionPicked3d$?.()
             ?.pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(({ key, additive }) => this.onPicked3d(key, additive));
+        // Another selection replaced the class tree's pick (a region drawn or clicked on the canvas).
+        this.regionApi
+            .getPickedRegionClasses$?.()
+            ?.pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((classes) => {
+            if (classes.length || !this.pickedClasses.length)
+                return;
+            this.pickedClass = null;
+            this.pickedClasses = [];
+            this.updateSelectionHighlight();
+            this.changed();
+        });
         this.persistence
             .fileExists(this.saveAsCheck$)
             .pipe(takeUntilDestroyed(this.destroyRef))
@@ -23767,6 +23869,12 @@ class SpatialControlsComponent {
         /** An ROI selection that matched nothing, so the UI can say so rather than
          *  looking like the button did nothing. */
         this.selectionMissed = false;
+        /** The mode of the selection that {@link selectionMissed}: what it found nothing inside. */
+        this.missedMode = 'regions';
+        /** The region classes picked in the Region Editor: in 3D, "Select from ROIs" selects inside them. */
+        this.pickedClasses = [];
+        /** While "Select from ROIs" reads the picked classes' outlines. */
+        this.selectingFromRegions = false;
         /**
          * Whether the Distribution section is expanded. Collapsed by default: the
          * panel's primary job is the colour controls, and the chart roughly doubles
@@ -23845,12 +23953,19 @@ class SpatialControlsComponent {
         this.controls
             .getSelection$()
             .pipe(untilDestroyed())
-            .subscribe((selection) => {
+            .subscribe((selection) => 
+        // Set from outside the zone too: a selection from the region classes' volumes.
+        this.runAndMark(() => {
             this.selection = selection;
             if (selection.count === 0)
                 this.selectedCategory = null;
-            this.cdr.markForCheck();
-        });
+        }));
+        this.controls
+            .getPickedRegionClasses$?.()
+            ?.pipe(untilDestroyed())
+            .subscribe((classes) => this.runAndMark(() => {
+            this.pickedClasses = classes;
+        }));
         // The colour bar must use the colormap the renderer is using.
         combineLatest([this.viz.getColormap(), this.viz.getReverseScale()])
             .pipe(untilDestroyed())
@@ -23881,11 +23996,40 @@ class SpatialControlsComponent {
         return this.genes.ensureList();
     }
     // ── selection ───────────────────────────────────────────────────────────
-    /** Select every observation inside the drawn regions (their union). */
-    selectFromRegions() {
-        const count = this.controls?.selectFromRegions() ?? 0;
-        this.selectedCategory = null;
-        this.selectionMissed = count === 0;
+    /** Select every observation inside the drawn regions (their union) — in 3D, inside the
+     *  picked classes' volumes. */
+    async selectFromRegions() {
+        if (!this.controls || this.selectingFromRegions)
+            return;
+        this.selectingFromRegions = true;
+        // The mode the selection runs in (decided as it starts), for what a miss says it missed.
+        const mode = this.roiSelectionMode;
+        this.cdr.markForCheck();
+        let count = 0;
+        try {
+            count = await this.controls.selectFromRegions();
+        }
+        catch (err) {
+            console.warn('[spatial] could not select from the regions', err);
+        }
+        // The classes' outlines are read in a worker, whose answer lands outside the zone.
+        this.runAndMark(() => {
+            this.selectingFromRegions = false;
+            // Superseded (null): a newer selection stands, and says what it is itself.
+            if (count === null)
+                return;
+            this.selectedCategory = null;
+            this.selectionMissed = count === 0;
+            this.missedMode = mode;
+        });
+    }
+    /** In 3D with classes picked, "Select from ROIs" selects inside their volumes. */
+    get selectsClassVolumes() {
+        return this.roiSelectionMode === 'class-volumes';
+    }
+    /** How "Select from ROIs" selects now: the controls' own rule, the one the selection runs by. */
+    get roiSelectionMode() {
+        return this.controls?.roiSelectionMode?.() ?? 'regions';
     }
     /** Legend click: select one category. Clicking the active row clears it, so a
      *  second click is an undo rather than a no-op. */
@@ -23977,7 +24121,7 @@ class SpatialControlsComponent {
         return this.key.refresh(this.controls, this.dataset, this.view, this.colormap, this.reverse);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SpatialControlsComponent, deps: [{ token: VISUALIZER }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: SpatialControlsComponent, isStandalone: true, selector: "spatial-controls", inputs: { visible: "visible", is3d: "is3d" }, outputs: { visibleChange: "visibleChange" }, viewQueries: [{ propertyName: "charts", first: true, predicate: SpatialChartsComponent, descendants: true }], ngImport: i0, template: "<p-dialog\n  header=\"Spatial omics\"\n  [visible]=\"visible\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  [modal]=\"false\"\n  [resizable]=\"true\"\n  [draggable]=\"true\"\n  position=\"left\"\n  (onResizeEnd)=\"onResizeEnd()\"\n  [style]=\"{ width: '30rem' }\"\n  [breakpoints]=\"{ '960px': '90vw' }\"\n  styleClass=\"spatial-controls-dialog\"\n>\n  <!-- No port bound: say why rather than showing controls that do nothing. -->\n  <div class=\"sc-empty\" *ngIf=\"!controls\">\n    No spatial-omics data source is configured. A host provides one by binding\n    <code>SPATIAL_DATA_PORT</code>.\n  </div>\n\n  <div class=\"sc-empty\" *ngIf=\"controls && !dataset\">No dataset is loaded.</div>\n\n  <div class=\"sc-body\" *ngIf=\"controls && dataset as ds\">\n    <div class=\"sc-dataset\">\n      <span class=\"sc-dataset-name\">{{ ds.name }}</span>\n      <span class=\"sc-dataset-count\">{{ ds.observations.count | number }} observations</span>\n    </div>\n\n    <!-- Organised as Xenium Explorer's side panel: one collapsible section per layer,\n         each with its own on/off switch in the header. -->\n\n    <!-- Images -->\n    <div class=\"sc-panel\" *ngIf=\"ds.imageRef && !is3d\" [class.open]=\"open.images\">\n      <div class=\"sc-panel-head\" (click)=\"toggleSection('images')\">\n        <p-checkbox\n          [binary]=\"true\"\n          [ngModel]=\"view.showImage\"\n          (click)=\"$event.stopPropagation()\"\n          (onChange)=\"onShowImage($event.checked)\"\n        ></p-checkbox>\n        <span class=\"sc-panel-title\">Images</span>\n        <i class=\"pi\" [class.pi-chevron-down]=\"open.images\" [class.pi-chevron-right]=\"!open.images\"></i>\n      </div>\n      <div class=\"sc-panel-body\" *ngIf=\"open.images\">\n        <small class=\"sc-hint\"> Channels, colours and contrast are in the Channels &amp; Histogram dialog. </small>\n      </div>\n    </div>\n\n    <!-- Cells -->\n    <spatial-cells-panel\n      *ngIf=\"hasCells && !is3d\"\n      [controls]=\"controls\"\n      [dataset]=\"ds\"\n      [view]=\"view\"\n      [genes]=\"genes\"\n      [colorBarCss]=\"colorBarCss\"\n      [open]=\"open.cells\"\n      (openChange)=\"setOpen('cells', $event)\"\n    ></spatial-cells-panel>\n\n    <!-- Transcripts -->\n    <spatial-transcripts-panel\n      *ngIf=\"hasTranscripts && !is3d\"\n      [controls]=\"controls\"\n      [dataset]=\"ds\"\n      [view]=\"view\"\n      [genes]=\"genes\"\n      [estimate]=\"estimate\"\n      [densityStats]=\"densityStats\"\n      [geneCounts]=\"geneCounts\"\n      [colormapOptions]=\"colormapOptions\"\n      [open]=\"open.transcripts\"\n      (openChange)=\"setOpen('transcripts', $event)\"\n    >\n    </spatial-transcripts-panel>\n\n    <!-- Annotations: the drawn regions, and selecting what they enclose. -->\n    <div class=\"sc-panel\" [class.open]=\"open.annotations\">\n      <div class=\"sc-panel-head\" (click)=\"toggleSection('annotations')\">\n        <p-checkbox\n          [binary]=\"true\"\n          [ngModel]=\"view.showAnnotations !== false\"\n          (click)=\"$event.stopPropagation()\"\n          (onChange)=\"onShowAnnotations($event.checked)\"\n          pTooltip=\"Show the drawn regions\"\n          tooltipPosition=\"top\"\n        ></p-checkbox>\n        <span class=\"sc-panel-title\">Annotations</span>\n        <i class=\"pi\" [class.pi-chevron-down]=\"open.annotations\" [class.pi-chevron-right]=\"!open.annotations\"></i>\n      </div>\n      <div class=\"sc-panel-body\" *ngIf=\"open.annotations\">\n        <div class=\"sc-row\">\n          <p-button\n            label=\"Select from ROIs\"\n            icon=\"pi pi-object-group\"\n            size=\"small\"\n            [outlined]=\"true\"\n            (onClick)=\"selectFromRegions()\"\n            pTooltip=\"Select every observation inside the drawn regions\"\n            tooltipPosition=\"top\"\n          ></p-button>\n          <p-button\n            *ngIf=\"hasSelection\"\n            label=\"Clear\"\n            size=\"small\"\n            [text]=\"true\"\n            (onClick)=\"clearSelection()\"\n          ></p-button>\n        </div>\n        <small class=\"sc-hint\" *ngIf=\"hasSelection\">\n          {{ selection.count | number }} of {{ ds.observations.count | number }} selected \u2014 the rest are muted.\n        </small>\n        <small class=\"sc-hint\" *ngIf=\"selectionMissed\"> No observations fell inside the drawn regions. </small>\n        <small class=\"sc-hint\" *ngIf=\"is3d\">\n          In 3D a region cuts through the cloud's full depth. Orbit and draw again to cut from another angle.\n        </small>\n      </div>\n    </div>\n\n    <!-- Observations, then what else draws them: the gene map, the 3D scene, and the\n         continuous-only knobs. -->\n    <spatial-observations-panel\n      [controls]=\"controls\"\n      [dataset]=\"ds\"\n      [view]=\"view\"\n      [genes]=\"genes\"\n      [legend]=\"legend\"\n      [colorBarCss]=\"colorBarCss\"\n      [selection]=\"selection\"\n      [selectedCategory]=\"selectedCategory\"\n      [colormapOptions]=\"colormapOptions\"\n      [is3d]=\"is3d\"\n      [open]=\"open.observations\"\n      (openChange)=\"setOpen('observations', $event)\"\n      (categoryClicked)=\"selectCategory($event)\"\n    ></spatial-observations-panel>\n\n    <!-- Distributions of whatever the map is coloured by. In the SAME dialog as\n         the colour controls on purpose: changing the gene and watching the\n         distribution move is one action, and two floating windows made that\n         harder to see rather than easier. -->\n    <div class=\"sc-section sc-charts\">\n      <button\n        type=\"button\"\n        class=\"sc-disclosure\"\n        (click)=\"toggleCharts()\"\n        [attr.aria-expanded]=\"chartsOpen\"\n        [attr.aria-controls]=\"chartsBodyId\"\n      >\n        <i class=\"pi\" [class.pi-chevron-right]=\"!chartsOpen\" [class.pi-chevron-down]=\"chartsOpen\"></i>\n        <span>Distribution</span>\n        <small *ngIf=\"!chartsOpen && view.colorBy\">of {{ colorByLabel }}</small>\n      </button>\n      <!-- Kept MOUNTED when collapsed, only hidden: destroying it would throw\n           away the chart kind and grouping the user picked. `active` is what\n           stops it drawing while it has no size. -->\n      <div [id]=\"chartsBodyId\" [hidden]=\"!chartsOpen\">\n        <spatial-charts [active]=\"visible && chartsOpen\"></spatial-charts>\n      </div>\n    </div>\n\n    <div class=\"sc-btns\">\n      <p-button label=\"Reset\" size=\"small\" [text]=\"true\" (onClick)=\"reset()\"></p-button>\n    </div>\n  </div>\n</p-dialog>\n", styles: [".sc-hint{font-size:.75rem;color:var(--text-color-secondary, #6c757d)}.sc-error{color:var(--red-600, #c62828)}.sc-section{display:flex;flex-direction:column;gap:.35rem}.sc-lbl{font-size:.78rem;color:var(--text-color-secondary, #6c757d);white-space:nowrap}.sc-row{display:flex;align-items:center;gap:.6rem}.sc-row p-slider,.sc-row p-dropdown,.sc-row p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row p-slider .p-slider{width:100%}:host ::ng-deep .sc-row p-dropdown .p-dropdown,:host ::ng-deep .sc-row p-treeSelect .p-treeselect{width:100%}.sc-row .sc-lbl{flex:0 0 calc(50% - .6rem);min-width:0;overflow:hidden;text-overflow:ellipsis}.sc-cmap-option{display:inline-flex;align-items:center;gap:.4rem}.sc-cmap-swatch{width:3.5rem;height:.7rem;border-radius:2px;display:block}.sc-val{flex:0 0 4rem;text-align:right;font-size:.78rem;font-variant-numeric:tabular-nums;white-space:nowrap}:host ::ng-deep .sc-full,:host ::ng-deep .sc-full .p-dropdown,:host ::ng-deep .sc-full .p-autocomplete,:host ::ng-deep .sc-full input{width:100%}.sc-colorbar{height:.75rem;border-radius:2px;border:1px solid rgba(0,0,0,.2)}.sc-colorbar-ends{display:flex;justify-content:space-between;font-size:.7rem;color:var(--text-color-secondary, #6c757d);margin-top:.2rem}.sc-panel{border:1px solid var(--surface-border, #dee2e6);border-radius:6px;margin-bottom:.5rem;overflow:hidden}.sc-panel-head{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--surface-100, #f5f6f7)}.sc-panel-head .sc-panel-title{flex:1;font-weight:600}.sc-panel.open>.sc-panel-head{background:var(--primary-color, #2196f3);color:var(--primary-color-text, #fff)}.sc-panel-body{display:flex;flex-direction:column;gap:.45rem;padding:.6rem .75rem .75rem}.sc-subhead{display:flex;align-items:center;gap:.5rem;margin-top:.4rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-color-secondary, #6c757d)}.sc-subhead:after{content:\"\";flex:1;border-top:1px solid var(--surface-border, #dee2e6)}:host ::ng-deep .sc-buttons .p-button{padding:.35rem .75rem;font-size:.85rem}.sc-row-picker p-dropdown,.sc-row-picker p-multiSelect,.sc-row-picker p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row-picker .sc-variant{width:6.5rem}:host ::ng-deep .sc-row-picker p-multiselect .p-multiselect{width:100%}:host ::ng-deep .sc-row-picker p-dropdown:has(.sc-variant){flex:0 0 6.5rem}:host ::ng-deep .sc-row-picker p-treeselect:has(.sc-palette){flex:0 0 3rem}:host ::ng-deep .sc-palette .p-treeselect-label{width:0;padding:0}.sc-icon-btn{flex:0 0 auto;border:0;background:transparent;cursor:pointer;padding:.25rem .35rem;font:inherit;font-size:1.05rem;color:var(--text-color, #333);border-radius:4px}.sc-icon-btn:hover{background:var(--surface-200, #e9ecef)}.sc-icon-btn.active{color:var(--primary-color, #2196f3);font-weight:700}.sc-icon-btn:disabled{opacity:.5;cursor:default}.sc-small-btn{margin-left:auto;border:1px solid var(--surface-border, #ced4da);background:var(--surface-0, #fff);border-radius:4px;padding:.2rem .6rem;font:inherit;font-size:.8rem;cursor:pointer}:host ::ng-deep .sc-group-heading{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.7}.sc-group-list,.sc-gene-tree{max-height:16rem;overflow-y:auto;border:1px solid var(--surface-border, #dee2e6);border-radius:4px;padding:.25rem .4rem}.sc-group-row,.sc-gene-row{display:flex;align-items:center;gap:.45rem;padding:.15rem 0;font-size:.88rem}.sc-group-row .sc-group-label,.sc-gene-row .sc-group-label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-group-all,.sc-gene-root,.sc-gene-group{font-weight:600}.sc-group-all .sc-icon-btn,.sc-gene-root .sc-icon-btn,.sc-gene-group .sc-icon-btn{margin-left:auto;font-size:.85rem}.sc-count{flex:0 0 auto;font-size:.78rem;color:var(--text-color-secondary, #6c757d)}.sc-glyph-option{display:inline-flex;align-items:center;gap:.4rem}.sc-glyph-svg{width:1rem;height:1rem;fill:currentColor}:host ::ng-deep .sc-glyph-pick .p-dropdown-label{padding:.2rem .4rem}.sc-color-input{width:2.5rem;height:1.8rem;border:1px solid var(--surface-border, #ced4da);border-radius:4px;padding:0;background:none}.sc-row-number p-slider,.sc-row-range p-slider{flex:1 1 0;min-width:0}:host ::ng-deep .sc-num{width:4.5rem;padding:.3rem .4rem;text-align:center}:host ::ng-deep .sc-row-number p-inputnumber,:host ::ng-deep .sc-row-range p-inputnumber{flex:0 0 auto}:host ::ng-deep .spatial-controls-dialog .p-dialog-content{padding:.75rem 1rem 1rem}.sc-empty{padding:.5rem 0;font-size:.85rem;color:var(--text-color-secondary, #6c757d);line-height:1.4}.sc-empty code{font-size:.8rem}.sc-body{display:flex;flex-direction:column;gap:.85rem}.sc-dataset{display:flex;flex-direction:column;gap:.1rem;padding-bottom:.5rem;border-bottom:1px solid var(--surface-border, #dee2e6)}.sc-dataset-name{font-weight:600;font-size:.9rem}.sc-dataset-count{font-size:.75rem;color:var(--text-color-secondary, #6c757d)}.sc-btns{display:flex;justify-content:flex-end}.sc-charts{padding-top:.5rem;border-top:1px solid var(--surface-border, #dee2e6);gap:0}.sc-disclosure{display:flex;align-items:center;gap:.4rem;width:100%;padding:.2rem 0;font:inherit;font-size:.82rem;font-weight:600;text-align:left;background:none;border:0;cursor:pointer;color:inherit}.sc-disclosure i{font-size:.7rem;color:var(--text-color-secondary, #6c757d)}.sc-disclosure small{font-weight:400;color:var(--text-color-secondary, #6c757d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-disclosure:hover{color:var(--primary-color, #3b82f6)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$3.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i5.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: SpatialCellsPanelComponent, selector: "spatial-cells-panel", inputs: ["controls", "dataset", "view", "genes", "colorBarCss", "open"], outputs: ["openChange"] }, { kind: "component", type: SpatialTranscriptsPanelComponent, selector: "spatial-transcripts-panel", inputs: ["controls", "dataset", "view", "genes", "estimate", "densityStats", "geneCounts", "colormapOptions", "open"], outputs: ["openChange"] }, { kind: "component", type: SpatialObservationsPanelComponent, selector: "spatial-observations-panel", inputs: ["controls", "dataset", "view", "genes", "legend", "colorBarCss", "selection", "selectedCategory", "colormapOptions", "is3d", "open"], outputs: ["openChange", "categoryClicked"] }, { kind: "component", type: SpatialChartsComponent, selector: "spatial-charts", inputs: ["active"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: SpatialControlsComponent, isStandalone: true, selector: "spatial-controls", inputs: { visible: "visible", is3d: "is3d" }, outputs: { visibleChange: "visibleChange" }, viewQueries: [{ propertyName: "charts", first: true, predicate: SpatialChartsComponent, descendants: true }], ngImport: i0, template: "<p-dialog\n  header=\"Spatial omics\"\n  [visible]=\"visible\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  [modal]=\"false\"\n  [resizable]=\"true\"\n  [draggable]=\"true\"\n  position=\"left\"\n  (onResizeEnd)=\"onResizeEnd()\"\n  [style]=\"{ width: '30rem' }\"\n  [breakpoints]=\"{ '960px': '90vw' }\"\n  styleClass=\"spatial-controls-dialog\"\n>\n  <!-- No port bound: say why rather than showing controls that do nothing. -->\n  <div class=\"sc-empty\" *ngIf=\"!controls\">\n    No spatial-omics data source is configured. A host provides one by binding\n    <code>SPATIAL_DATA_PORT</code>.\n  </div>\n\n  <div class=\"sc-empty\" *ngIf=\"controls && !dataset\">No dataset is loaded.</div>\n\n  <div class=\"sc-body\" *ngIf=\"controls && dataset as ds\">\n    <div class=\"sc-dataset\">\n      <span class=\"sc-dataset-name\">{{ ds.name }}</span>\n      <span class=\"sc-dataset-count\">{{ ds.observations.count | number }} observations</span>\n    </div>\n\n    <!-- Organised as Xenium Explorer's side panel: one collapsible section per layer,\n         each with its own on/off switch in the header. -->\n\n    <!-- Images -->\n    <div class=\"sc-panel\" *ngIf=\"ds.imageRef && !is3d\" [class.open]=\"open.images\">\n      <div class=\"sc-panel-head\" (click)=\"toggleSection('images')\">\n        <p-checkbox\n          [binary]=\"true\"\n          [ngModel]=\"view.showImage\"\n          (click)=\"$event.stopPropagation()\"\n          (onChange)=\"onShowImage($event.checked)\"\n        ></p-checkbox>\n        <span class=\"sc-panel-title\">Images</span>\n        <i class=\"pi\" [class.pi-chevron-down]=\"open.images\" [class.pi-chevron-right]=\"!open.images\"></i>\n      </div>\n      <div class=\"sc-panel-body\" *ngIf=\"open.images\">\n        <small class=\"sc-hint\"> Channels, colours and contrast are in the Channels &amp; Histogram dialog. </small>\n      </div>\n    </div>\n\n    <!-- Cells -->\n    <spatial-cells-panel\n      *ngIf=\"hasCells && !is3d\"\n      [controls]=\"controls\"\n      [dataset]=\"ds\"\n      [view]=\"view\"\n      [genes]=\"genes\"\n      [colorBarCss]=\"colorBarCss\"\n      [open]=\"open.cells\"\n      (openChange)=\"setOpen('cells', $event)\"\n    ></spatial-cells-panel>\n\n    <!-- Transcripts -->\n    <spatial-transcripts-panel\n      *ngIf=\"hasTranscripts && !is3d\"\n      [controls]=\"controls\"\n      [dataset]=\"ds\"\n      [view]=\"view\"\n      [genes]=\"genes\"\n      [estimate]=\"estimate\"\n      [densityStats]=\"densityStats\"\n      [geneCounts]=\"geneCounts\"\n      [colormapOptions]=\"colormapOptions\"\n      [open]=\"open.transcripts\"\n      (openChange)=\"setOpen('transcripts', $event)\"\n    >\n    </spatial-transcripts-panel>\n\n    <!-- Annotations: the drawn regions, and selecting what they enclose. -->\n    <div class=\"sc-panel\" [class.open]=\"open.annotations\">\n      <div class=\"sc-panel-head\" (click)=\"toggleSection('annotations')\">\n        <p-checkbox\n          [binary]=\"true\"\n          [ngModel]=\"view.showAnnotations !== false\"\n          (click)=\"$event.stopPropagation()\"\n          (onChange)=\"onShowAnnotations($event.checked)\"\n          pTooltip=\"Show the drawn regions\"\n          tooltipPosition=\"top\"\n        ></p-checkbox>\n        <span class=\"sc-panel-title\">Annotations</span>\n        <i class=\"pi\" [class.pi-chevron-down]=\"open.annotations\" [class.pi-chevron-right]=\"!open.annotations\"></i>\n      </div>\n      <div class=\"sc-panel-body\" *ngIf=\"open.annotations\">\n        <div class=\"sc-row\">\n          <p-button\n            label=\"Select from ROIs\"\n            icon=\"pi pi-object-group\"\n            size=\"small\"\n            [outlined]=\"true\"\n            [loading]=\"selectingFromRegions\"\n            (onClick)=\"selectFromRegions()\"\n            [pTooltip]=\"\n              selectsClassVolumes\n                ? 'Select every observation inside the volumes of the classes picked in the Region Editor'\n                : 'Select every observation inside the drawn regions'\n            \"\n            tooltipPosition=\"top\"\n          ></p-button>\n          <p-button\n            *ngIf=\"hasSelection\"\n            label=\"Clear\"\n            size=\"small\"\n            [text]=\"true\"\n            (onClick)=\"clearSelection()\"\n          ></p-button>\n        </div>\n        <small class=\"sc-hint\" *ngIf=\"hasSelection\">\n          {{ selection.count | number }} of {{ ds.observations.count | number }} selected \u2014 the rest are muted.\n        </small>\n        <small class=\"sc-hint\" *ngIf=\"selectionMissed\">\n          No observations fell inside the\n          {{ missedMode === 'class-volumes' ? 'picked classes' : 'drawn regions' }}.\n        </small>\n        <small class=\"sc-hint\" *ngIf=\"selectsClassVolumes\">\n          Selects inside the volume of {{ pickedClasses[0]\n          }}{{ pickedClasses.length > 1 ? ' and ' + (pickedClasses.length - 1 | number) + ' more classes' : '' }},\n          picked in the Region Editor. Draw a region to select by it instead.\n        </small>\n        <small class=\"sc-hint\" *ngIf=\"is3d && !selectsClassVolumes && pickedClasses.length\">\n          The classes picked in the Region Editor are not on the reference volume shown here, so this selects by\n          the regions drawn over the cloud instead.\n        </small>\n        <small class=\"sc-hint\" *ngIf=\"is3d && !selectsClassVolumes\">\n          In 3D a region cuts through the cloud's full depth. Orbit and draw again to cut from another angle.\n          <ng-container *ngIf=\"!pickedClasses.length\">\n            Pick classes in the Region Editor's class tree to select inside their volumes.\n          </ng-container>\n        </small>\n      </div>\n    </div>\n\n    <!-- Observations, then what else draws them: the gene map, the 3D scene, and the\n         continuous-only knobs. -->\n    <spatial-observations-panel\n      [controls]=\"controls\"\n      [dataset]=\"ds\"\n      [view]=\"view\"\n      [genes]=\"genes\"\n      [legend]=\"legend\"\n      [colorBarCss]=\"colorBarCss\"\n      [selection]=\"selection\"\n      [selectedCategory]=\"selectedCategory\"\n      [colormapOptions]=\"colormapOptions\"\n      [is3d]=\"is3d\"\n      [open]=\"open.observations\"\n      (openChange)=\"setOpen('observations', $event)\"\n      (categoryClicked)=\"selectCategory($event)\"\n    ></spatial-observations-panel>\n\n    <!-- Distributions of whatever the map is coloured by. In the SAME dialog as\n         the colour controls on purpose: changing the gene and watching the\n         distribution move is one action, and two floating windows made that\n         harder to see rather than easier. -->\n    <div class=\"sc-section sc-charts\">\n      <button\n        type=\"button\"\n        class=\"sc-disclosure\"\n        (click)=\"toggleCharts()\"\n        [attr.aria-expanded]=\"chartsOpen\"\n        [attr.aria-controls]=\"chartsBodyId\"\n      >\n        <i class=\"pi\" [class.pi-chevron-right]=\"!chartsOpen\" [class.pi-chevron-down]=\"chartsOpen\"></i>\n        <span>Distribution</span>\n        <small *ngIf=\"!chartsOpen && view.colorBy\">of {{ colorByLabel }}</small>\n      </button>\n      <!-- Kept MOUNTED when collapsed, only hidden: destroying it would throw\n           away the chart kind and grouping the user picked. `active` is what\n           stops it drawing while it has no size. -->\n      <div [id]=\"chartsBodyId\" [hidden]=\"!chartsOpen\">\n        <spatial-charts [active]=\"visible && chartsOpen\"></spatial-charts>\n      </div>\n    </div>\n\n    <div class=\"sc-btns\">\n      <p-button label=\"Reset\" size=\"small\" [text]=\"true\" (onClick)=\"reset()\"></p-button>\n    </div>\n  </div>\n</p-dialog>\n", styles: [".sc-hint{font-size:.75rem;color:var(--text-color-secondary, #6c757d)}.sc-error{color:var(--red-600, #c62828)}.sc-section{display:flex;flex-direction:column;gap:.35rem}.sc-lbl{font-size:.78rem;color:var(--text-color-secondary, #6c757d);white-space:nowrap}.sc-row{display:flex;align-items:center;gap:.6rem}.sc-row p-slider,.sc-row p-dropdown,.sc-row p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row p-slider .p-slider{width:100%}:host ::ng-deep .sc-row p-dropdown .p-dropdown,:host ::ng-deep .sc-row p-treeSelect .p-treeselect{width:100%}.sc-row .sc-lbl{flex:0 0 calc(50% - .6rem);min-width:0;overflow:hidden;text-overflow:ellipsis}.sc-cmap-option{display:inline-flex;align-items:center;gap:.4rem}.sc-cmap-swatch{width:3.5rem;height:.7rem;border-radius:2px;display:block}.sc-val{flex:0 0 4rem;text-align:right;font-size:.78rem;font-variant-numeric:tabular-nums;white-space:nowrap}:host ::ng-deep .sc-full,:host ::ng-deep .sc-full .p-dropdown,:host ::ng-deep .sc-full .p-autocomplete,:host ::ng-deep .sc-full input{width:100%}.sc-colorbar{height:.75rem;border-radius:2px;border:1px solid rgba(0,0,0,.2)}.sc-colorbar-ends{display:flex;justify-content:space-between;font-size:.7rem;color:var(--text-color-secondary, #6c757d);margin-top:.2rem}.sc-panel{border:1px solid var(--surface-border, #dee2e6);border-radius:6px;margin-bottom:.5rem;overflow:hidden}.sc-panel-head{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--surface-100, #f5f6f7)}.sc-panel-head .sc-panel-title{flex:1;font-weight:600}.sc-panel.open>.sc-panel-head{background:var(--primary-color, #2196f3);color:var(--primary-color-text, #fff)}.sc-panel-body{display:flex;flex-direction:column;gap:.45rem;padding:.6rem .75rem .75rem}.sc-subhead{display:flex;align-items:center;gap:.5rem;margin-top:.4rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-color-secondary, #6c757d)}.sc-subhead:after{content:\"\";flex:1;border-top:1px solid var(--surface-border, #dee2e6)}:host ::ng-deep .sc-buttons .p-button{padding:.35rem .75rem;font-size:.85rem}.sc-row-picker p-dropdown,.sc-row-picker p-multiSelect,.sc-row-picker p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row-picker .sc-variant{width:6.5rem}:host ::ng-deep .sc-row-picker p-multiselect .p-multiselect{width:100%}:host ::ng-deep .sc-row-picker p-dropdown:has(.sc-variant){flex:0 0 6.5rem}:host ::ng-deep .sc-row-picker p-treeselect:has(.sc-palette){flex:0 0 3rem}:host ::ng-deep .sc-palette .p-treeselect-label{width:0;padding:0}.sc-icon-btn{flex:0 0 auto;border:0;background:transparent;cursor:pointer;padding:.25rem .35rem;font:inherit;font-size:1.05rem;color:var(--text-color, #333);border-radius:4px}.sc-icon-btn:hover{background:var(--surface-200, #e9ecef)}.sc-icon-btn.active{color:var(--primary-color, #2196f3);font-weight:700}.sc-icon-btn:disabled{opacity:.5;cursor:default}.sc-small-btn{margin-left:auto;border:1px solid var(--surface-border, #ced4da);background:var(--surface-0, #fff);border-radius:4px;padding:.2rem .6rem;font:inherit;font-size:.8rem;cursor:pointer}:host ::ng-deep .sc-group-heading{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.7}.sc-group-list,.sc-gene-tree{max-height:16rem;overflow-y:auto;border:1px solid var(--surface-border, #dee2e6);border-radius:4px;padding:.25rem .4rem}.sc-group-row,.sc-gene-row{display:flex;align-items:center;gap:.45rem;padding:.15rem 0;font-size:.88rem}.sc-group-row .sc-group-label,.sc-gene-row .sc-group-label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-group-all,.sc-gene-root,.sc-gene-group{font-weight:600}.sc-group-all .sc-icon-btn,.sc-gene-root .sc-icon-btn,.sc-gene-group .sc-icon-btn{margin-left:auto;font-size:.85rem}.sc-count{flex:0 0 auto;font-size:.78rem;color:var(--text-color-secondary, #6c757d)}.sc-glyph-option{display:inline-flex;align-items:center;gap:.4rem}.sc-glyph-svg{width:1rem;height:1rem;fill:currentColor}:host ::ng-deep .sc-glyph-pick .p-dropdown-label{padding:.2rem .4rem}.sc-color-input{width:2.5rem;height:1.8rem;border:1px solid var(--surface-border, #ced4da);border-radius:4px;padding:0;background:none}.sc-row-number p-slider,.sc-row-range p-slider{flex:1 1 0;min-width:0}:host ::ng-deep .sc-num{width:4.5rem;padding:.3rem .4rem;text-align:center}:host ::ng-deep .sc-row-number p-inputnumber,:host ::ng-deep .sc-row-range p-inputnumber{flex:0 0 auto}:host ::ng-deep .spatial-controls-dialog .p-dialog-content{padding:.75rem 1rem 1rem}.sc-empty{padding:.5rem 0;font-size:.85rem;color:var(--text-color-secondary, #6c757d);line-height:1.4}.sc-empty code{font-size:.8rem}.sc-body{display:flex;flex-direction:column;gap:.85rem}.sc-dataset{display:flex;flex-direction:column;gap:.1rem;padding-bottom:.5rem;border-bottom:1px solid var(--surface-border, #dee2e6)}.sc-dataset-name{font-weight:600;font-size:.9rem}.sc-dataset-count{font-size:.75rem;color:var(--text-color-secondary, #6c757d)}.sc-btns{display:flex;justify-content:flex-end}.sc-charts{padding-top:.5rem;border-top:1px solid var(--surface-border, #dee2e6);gap:0}.sc-disclosure{display:flex;align-items:center;gap:.4rem;width:100%;padding:.2rem 0;font:inherit;font-size:.82rem;font-weight:600;text-align:left;background:none;border:0;cursor:pointer;color:inherit}.sc-disclosure i{font-size:.7rem;color:var(--text-color-secondary, #6c757d)}.sc-disclosure small{font-weight:400;color:var(--text-color-secondary, #6c757d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-disclosure:hover{color:var(--primary-color, #3b82f6)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$3.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i5.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: SpatialCellsPanelComponent, selector: "spatial-cells-panel", inputs: ["controls", "dataset", "view", "genes", "colorBarCss", "open"], outputs: ["openChange"] }, { kind: "component", type: SpatialTranscriptsPanelComponent, selector: "spatial-transcripts-panel", inputs: ["controls", "dataset", "view", "genes", "estimate", "densityStats", "geneCounts", "colormapOptions", "open"], outputs: ["openChange"] }, { kind: "component", type: SpatialObservationsPanelComponent, selector: "spatial-observations-panel", inputs: ["controls", "dataset", "view", "genes", "legend", "colorBarCss", "selection", "selectedCategory", "colormapOptions", "is3d", "open"], outputs: ["openChange", "categoryClicked"] }, { kind: "component", type: SpatialChartsComponent, selector: "spatial-charts", inputs: ["active"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SpatialControlsComponent, decorators: [{
             type: Component,
@@ -23992,7 +24136,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
                         SpatialTranscriptsPanelComponent,
                         SpatialObservationsPanelComponent,
                         SpatialChartsComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-dialog\n  header=\"Spatial omics\"\n  [visible]=\"visible\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  [modal]=\"false\"\n  [resizable]=\"true\"\n  [draggable]=\"true\"\n  position=\"left\"\n  (onResizeEnd)=\"onResizeEnd()\"\n  [style]=\"{ width: '30rem' }\"\n  [breakpoints]=\"{ '960px': '90vw' }\"\n  styleClass=\"spatial-controls-dialog\"\n>\n  <!-- No port bound: say why rather than showing controls that do nothing. -->\n  <div class=\"sc-empty\" *ngIf=\"!controls\">\n    No spatial-omics data source is configured. A host provides one by binding\n    <code>SPATIAL_DATA_PORT</code>.\n  </div>\n\n  <div class=\"sc-empty\" *ngIf=\"controls && !dataset\">No dataset is loaded.</div>\n\n  <div class=\"sc-body\" *ngIf=\"controls && dataset as ds\">\n    <div class=\"sc-dataset\">\n      <span class=\"sc-dataset-name\">{{ ds.name }}</span>\n      <span class=\"sc-dataset-count\">{{ ds.observations.count | number }} observations</span>\n    </div>\n\n    <!-- Organised as Xenium Explorer's side panel: one collapsible section per layer,\n         each with its own on/off switch in the header. -->\n\n    <!-- Images -->\n    <div class=\"sc-panel\" *ngIf=\"ds.imageRef && !is3d\" [class.open]=\"open.images\">\n      <div class=\"sc-panel-head\" (click)=\"toggleSection('images')\">\n        <p-checkbox\n          [binary]=\"true\"\n          [ngModel]=\"view.showImage\"\n          (click)=\"$event.stopPropagation()\"\n          (onChange)=\"onShowImage($event.checked)\"\n        ></p-checkbox>\n        <span class=\"sc-panel-title\">Images</span>\n        <i class=\"pi\" [class.pi-chevron-down]=\"open.images\" [class.pi-chevron-right]=\"!open.images\"></i>\n      </div>\n      <div class=\"sc-panel-body\" *ngIf=\"open.images\">\n        <small class=\"sc-hint\"> Channels, colours and contrast are in the Channels &amp; Histogram dialog. </small>\n      </div>\n    </div>\n\n    <!-- Cells -->\n    <spatial-cells-panel\n      *ngIf=\"hasCells && !is3d\"\n      [controls]=\"controls\"\n      [dataset]=\"ds\"\n      [view]=\"view\"\n      [genes]=\"genes\"\n      [colorBarCss]=\"colorBarCss\"\n      [open]=\"open.cells\"\n      (openChange)=\"setOpen('cells', $event)\"\n    ></spatial-cells-panel>\n\n    <!-- Transcripts -->\n    <spatial-transcripts-panel\n      *ngIf=\"hasTranscripts && !is3d\"\n      [controls]=\"controls\"\n      [dataset]=\"ds\"\n      [view]=\"view\"\n      [genes]=\"genes\"\n      [estimate]=\"estimate\"\n      [densityStats]=\"densityStats\"\n      [geneCounts]=\"geneCounts\"\n      [colormapOptions]=\"colormapOptions\"\n      [open]=\"open.transcripts\"\n      (openChange)=\"setOpen('transcripts', $event)\"\n    >\n    </spatial-transcripts-panel>\n\n    <!-- Annotations: the drawn regions, and selecting what they enclose. -->\n    <div class=\"sc-panel\" [class.open]=\"open.annotations\">\n      <div class=\"sc-panel-head\" (click)=\"toggleSection('annotations')\">\n        <p-checkbox\n          [binary]=\"true\"\n          [ngModel]=\"view.showAnnotations !== false\"\n          (click)=\"$event.stopPropagation()\"\n          (onChange)=\"onShowAnnotations($event.checked)\"\n          pTooltip=\"Show the drawn regions\"\n          tooltipPosition=\"top\"\n        ></p-checkbox>\n        <span class=\"sc-panel-title\">Annotations</span>\n        <i class=\"pi\" [class.pi-chevron-down]=\"open.annotations\" [class.pi-chevron-right]=\"!open.annotations\"></i>\n      </div>\n      <div class=\"sc-panel-body\" *ngIf=\"open.annotations\">\n        <div class=\"sc-row\">\n          <p-button\n            label=\"Select from ROIs\"\n            icon=\"pi pi-object-group\"\n            size=\"small\"\n            [outlined]=\"true\"\n            (onClick)=\"selectFromRegions()\"\n            pTooltip=\"Select every observation inside the drawn regions\"\n            tooltipPosition=\"top\"\n          ></p-button>\n          <p-button\n            *ngIf=\"hasSelection\"\n            label=\"Clear\"\n            size=\"small\"\n            [text]=\"true\"\n            (onClick)=\"clearSelection()\"\n          ></p-button>\n        </div>\n        <small class=\"sc-hint\" *ngIf=\"hasSelection\">\n          {{ selection.count | number }} of {{ ds.observations.count | number }} selected \u2014 the rest are muted.\n        </small>\n        <small class=\"sc-hint\" *ngIf=\"selectionMissed\"> No observations fell inside the drawn regions. </small>\n        <small class=\"sc-hint\" *ngIf=\"is3d\">\n          In 3D a region cuts through the cloud's full depth. Orbit and draw again to cut from another angle.\n        </small>\n      </div>\n    </div>\n\n    <!-- Observations, then what else draws them: the gene map, the 3D scene, and the\n         continuous-only knobs. -->\n    <spatial-observations-panel\n      [controls]=\"controls\"\n      [dataset]=\"ds\"\n      [view]=\"view\"\n      [genes]=\"genes\"\n      [legend]=\"legend\"\n      [colorBarCss]=\"colorBarCss\"\n      [selection]=\"selection\"\n      [selectedCategory]=\"selectedCategory\"\n      [colormapOptions]=\"colormapOptions\"\n      [is3d]=\"is3d\"\n      [open]=\"open.observations\"\n      (openChange)=\"setOpen('observations', $event)\"\n      (categoryClicked)=\"selectCategory($event)\"\n    ></spatial-observations-panel>\n\n    <!-- Distributions of whatever the map is coloured by. In the SAME dialog as\n         the colour controls on purpose: changing the gene and watching the\n         distribution move is one action, and two floating windows made that\n         harder to see rather than easier. -->\n    <div class=\"sc-section sc-charts\">\n      <button\n        type=\"button\"\n        class=\"sc-disclosure\"\n        (click)=\"toggleCharts()\"\n        [attr.aria-expanded]=\"chartsOpen\"\n        [attr.aria-controls]=\"chartsBodyId\"\n      >\n        <i class=\"pi\" [class.pi-chevron-right]=\"!chartsOpen\" [class.pi-chevron-down]=\"chartsOpen\"></i>\n        <span>Distribution</span>\n        <small *ngIf=\"!chartsOpen && view.colorBy\">of {{ colorByLabel }}</small>\n      </button>\n      <!-- Kept MOUNTED when collapsed, only hidden: destroying it would throw\n           away the chart kind and grouping the user picked. `active` is what\n           stops it drawing while it has no size. -->\n      <div [id]=\"chartsBodyId\" [hidden]=\"!chartsOpen\">\n        <spatial-charts [active]=\"visible && chartsOpen\"></spatial-charts>\n      </div>\n    </div>\n\n    <div class=\"sc-btns\">\n      <p-button label=\"Reset\" size=\"small\" [text]=\"true\" (onClick)=\"reset()\"></p-button>\n    </div>\n  </div>\n</p-dialog>\n", styles: [".sc-hint{font-size:.75rem;color:var(--text-color-secondary, #6c757d)}.sc-error{color:var(--red-600, #c62828)}.sc-section{display:flex;flex-direction:column;gap:.35rem}.sc-lbl{font-size:.78rem;color:var(--text-color-secondary, #6c757d);white-space:nowrap}.sc-row{display:flex;align-items:center;gap:.6rem}.sc-row p-slider,.sc-row p-dropdown,.sc-row p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row p-slider .p-slider{width:100%}:host ::ng-deep .sc-row p-dropdown .p-dropdown,:host ::ng-deep .sc-row p-treeSelect .p-treeselect{width:100%}.sc-row .sc-lbl{flex:0 0 calc(50% - .6rem);min-width:0;overflow:hidden;text-overflow:ellipsis}.sc-cmap-option{display:inline-flex;align-items:center;gap:.4rem}.sc-cmap-swatch{width:3.5rem;height:.7rem;border-radius:2px;display:block}.sc-val{flex:0 0 4rem;text-align:right;font-size:.78rem;font-variant-numeric:tabular-nums;white-space:nowrap}:host ::ng-deep .sc-full,:host ::ng-deep .sc-full .p-dropdown,:host ::ng-deep .sc-full .p-autocomplete,:host ::ng-deep .sc-full input{width:100%}.sc-colorbar{height:.75rem;border-radius:2px;border:1px solid rgba(0,0,0,.2)}.sc-colorbar-ends{display:flex;justify-content:space-between;font-size:.7rem;color:var(--text-color-secondary, #6c757d);margin-top:.2rem}.sc-panel{border:1px solid var(--surface-border, #dee2e6);border-radius:6px;margin-bottom:.5rem;overflow:hidden}.sc-panel-head{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--surface-100, #f5f6f7)}.sc-panel-head .sc-panel-title{flex:1;font-weight:600}.sc-panel.open>.sc-panel-head{background:var(--primary-color, #2196f3);color:var(--primary-color-text, #fff)}.sc-panel-body{display:flex;flex-direction:column;gap:.45rem;padding:.6rem .75rem .75rem}.sc-subhead{display:flex;align-items:center;gap:.5rem;margin-top:.4rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-color-secondary, #6c757d)}.sc-subhead:after{content:\"\";flex:1;border-top:1px solid var(--surface-border, #dee2e6)}:host ::ng-deep .sc-buttons .p-button{padding:.35rem .75rem;font-size:.85rem}.sc-row-picker p-dropdown,.sc-row-picker p-multiSelect,.sc-row-picker p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row-picker .sc-variant{width:6.5rem}:host ::ng-deep .sc-row-picker p-multiselect .p-multiselect{width:100%}:host ::ng-deep .sc-row-picker p-dropdown:has(.sc-variant){flex:0 0 6.5rem}:host ::ng-deep .sc-row-picker p-treeselect:has(.sc-palette){flex:0 0 3rem}:host ::ng-deep .sc-palette .p-treeselect-label{width:0;padding:0}.sc-icon-btn{flex:0 0 auto;border:0;background:transparent;cursor:pointer;padding:.25rem .35rem;font:inherit;font-size:1.05rem;color:var(--text-color, #333);border-radius:4px}.sc-icon-btn:hover{background:var(--surface-200, #e9ecef)}.sc-icon-btn.active{color:var(--primary-color, #2196f3);font-weight:700}.sc-icon-btn:disabled{opacity:.5;cursor:default}.sc-small-btn{margin-left:auto;border:1px solid var(--surface-border, #ced4da);background:var(--surface-0, #fff);border-radius:4px;padding:.2rem .6rem;font:inherit;font-size:.8rem;cursor:pointer}:host ::ng-deep .sc-group-heading{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.7}.sc-group-list,.sc-gene-tree{max-height:16rem;overflow-y:auto;border:1px solid var(--surface-border, #dee2e6);border-radius:4px;padding:.25rem .4rem}.sc-group-row,.sc-gene-row{display:flex;align-items:center;gap:.45rem;padding:.15rem 0;font-size:.88rem}.sc-group-row .sc-group-label,.sc-gene-row .sc-group-label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-group-all,.sc-gene-root,.sc-gene-group{font-weight:600}.sc-group-all .sc-icon-btn,.sc-gene-root .sc-icon-btn,.sc-gene-group .sc-icon-btn{margin-left:auto;font-size:.85rem}.sc-count{flex:0 0 auto;font-size:.78rem;color:var(--text-color-secondary, #6c757d)}.sc-glyph-option{display:inline-flex;align-items:center;gap:.4rem}.sc-glyph-svg{width:1rem;height:1rem;fill:currentColor}:host ::ng-deep .sc-glyph-pick .p-dropdown-label{padding:.2rem .4rem}.sc-color-input{width:2.5rem;height:1.8rem;border:1px solid var(--surface-border, #ced4da);border-radius:4px;padding:0;background:none}.sc-row-number p-slider,.sc-row-range p-slider{flex:1 1 0;min-width:0}:host ::ng-deep .sc-num{width:4.5rem;padding:.3rem .4rem;text-align:center}:host ::ng-deep .sc-row-number p-inputnumber,:host ::ng-deep .sc-row-range p-inputnumber{flex:0 0 auto}:host ::ng-deep .spatial-controls-dialog .p-dialog-content{padding:.75rem 1rem 1rem}.sc-empty{padding:.5rem 0;font-size:.85rem;color:var(--text-color-secondary, #6c757d);line-height:1.4}.sc-empty code{font-size:.8rem}.sc-body{display:flex;flex-direction:column;gap:.85rem}.sc-dataset{display:flex;flex-direction:column;gap:.1rem;padding-bottom:.5rem;border-bottom:1px solid var(--surface-border, #dee2e6)}.sc-dataset-name{font-weight:600;font-size:.9rem}.sc-dataset-count{font-size:.75rem;color:var(--text-color-secondary, #6c757d)}.sc-btns{display:flex;justify-content:flex-end}.sc-charts{padding-top:.5rem;border-top:1px solid var(--surface-border, #dee2e6);gap:0}.sc-disclosure{display:flex;align-items:center;gap:.4rem;width:100%;padding:.2rem 0;font:inherit;font-size:.82rem;font-weight:600;text-align:left;background:none;border:0;cursor:pointer;color:inherit}.sc-disclosure i{font-size:.7rem;color:var(--text-color-secondary, #6c757d)}.sc-disclosure small{font-weight:400;color:var(--text-color-secondary, #6c757d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-disclosure:hover{color:var(--primary-color, #3b82f6)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-dialog\n  header=\"Spatial omics\"\n  [visible]=\"visible\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  [modal]=\"false\"\n  [resizable]=\"true\"\n  [draggable]=\"true\"\n  position=\"left\"\n  (onResizeEnd)=\"onResizeEnd()\"\n  [style]=\"{ width: '30rem' }\"\n  [breakpoints]=\"{ '960px': '90vw' }\"\n  styleClass=\"spatial-controls-dialog\"\n>\n  <!-- No port bound: say why rather than showing controls that do nothing. -->\n  <div class=\"sc-empty\" *ngIf=\"!controls\">\n    No spatial-omics data source is configured. A host provides one by binding\n    <code>SPATIAL_DATA_PORT</code>.\n  </div>\n\n  <div class=\"sc-empty\" *ngIf=\"controls && !dataset\">No dataset is loaded.</div>\n\n  <div class=\"sc-body\" *ngIf=\"controls && dataset as ds\">\n    <div class=\"sc-dataset\">\n      <span class=\"sc-dataset-name\">{{ ds.name }}</span>\n      <span class=\"sc-dataset-count\">{{ ds.observations.count | number }} observations</span>\n    </div>\n\n    <!-- Organised as Xenium Explorer's side panel: one collapsible section per layer,\n         each with its own on/off switch in the header. -->\n\n    <!-- Images -->\n    <div class=\"sc-panel\" *ngIf=\"ds.imageRef && !is3d\" [class.open]=\"open.images\">\n      <div class=\"sc-panel-head\" (click)=\"toggleSection('images')\">\n        <p-checkbox\n          [binary]=\"true\"\n          [ngModel]=\"view.showImage\"\n          (click)=\"$event.stopPropagation()\"\n          (onChange)=\"onShowImage($event.checked)\"\n        ></p-checkbox>\n        <span class=\"sc-panel-title\">Images</span>\n        <i class=\"pi\" [class.pi-chevron-down]=\"open.images\" [class.pi-chevron-right]=\"!open.images\"></i>\n      </div>\n      <div class=\"sc-panel-body\" *ngIf=\"open.images\">\n        <small class=\"sc-hint\"> Channels, colours and contrast are in the Channels &amp; Histogram dialog. </small>\n      </div>\n    </div>\n\n    <!-- Cells -->\n    <spatial-cells-panel\n      *ngIf=\"hasCells && !is3d\"\n      [controls]=\"controls\"\n      [dataset]=\"ds\"\n      [view]=\"view\"\n      [genes]=\"genes\"\n      [colorBarCss]=\"colorBarCss\"\n      [open]=\"open.cells\"\n      (openChange)=\"setOpen('cells', $event)\"\n    ></spatial-cells-panel>\n\n    <!-- Transcripts -->\n    <spatial-transcripts-panel\n      *ngIf=\"hasTranscripts && !is3d\"\n      [controls]=\"controls\"\n      [dataset]=\"ds\"\n      [view]=\"view\"\n      [genes]=\"genes\"\n      [estimate]=\"estimate\"\n      [densityStats]=\"densityStats\"\n      [geneCounts]=\"geneCounts\"\n      [colormapOptions]=\"colormapOptions\"\n      [open]=\"open.transcripts\"\n      (openChange)=\"setOpen('transcripts', $event)\"\n    >\n    </spatial-transcripts-panel>\n\n    <!-- Annotations: the drawn regions, and selecting what they enclose. -->\n    <div class=\"sc-panel\" [class.open]=\"open.annotations\">\n      <div class=\"sc-panel-head\" (click)=\"toggleSection('annotations')\">\n        <p-checkbox\n          [binary]=\"true\"\n          [ngModel]=\"view.showAnnotations !== false\"\n          (click)=\"$event.stopPropagation()\"\n          (onChange)=\"onShowAnnotations($event.checked)\"\n          pTooltip=\"Show the drawn regions\"\n          tooltipPosition=\"top\"\n        ></p-checkbox>\n        <span class=\"sc-panel-title\">Annotations</span>\n        <i class=\"pi\" [class.pi-chevron-down]=\"open.annotations\" [class.pi-chevron-right]=\"!open.annotations\"></i>\n      </div>\n      <div class=\"sc-panel-body\" *ngIf=\"open.annotations\">\n        <div class=\"sc-row\">\n          <p-button\n            label=\"Select from ROIs\"\n            icon=\"pi pi-object-group\"\n            size=\"small\"\n            [outlined]=\"true\"\n            [loading]=\"selectingFromRegions\"\n            (onClick)=\"selectFromRegions()\"\n            [pTooltip]=\"\n              selectsClassVolumes\n                ? 'Select every observation inside the volumes of the classes picked in the Region Editor'\n                : 'Select every observation inside the drawn regions'\n            \"\n            tooltipPosition=\"top\"\n          ></p-button>\n          <p-button\n            *ngIf=\"hasSelection\"\n            label=\"Clear\"\n            size=\"small\"\n            [text]=\"true\"\n            (onClick)=\"clearSelection()\"\n          ></p-button>\n        </div>\n        <small class=\"sc-hint\" *ngIf=\"hasSelection\">\n          {{ selection.count | number }} of {{ ds.observations.count | number }} selected \u2014 the rest are muted.\n        </small>\n        <small class=\"sc-hint\" *ngIf=\"selectionMissed\">\n          No observations fell inside the\n          {{ missedMode === 'class-volumes' ? 'picked classes' : 'drawn regions' }}.\n        </small>\n        <small class=\"sc-hint\" *ngIf=\"selectsClassVolumes\">\n          Selects inside the volume of {{ pickedClasses[0]\n          }}{{ pickedClasses.length > 1 ? ' and ' + (pickedClasses.length - 1 | number) + ' more classes' : '' }},\n          picked in the Region Editor. Draw a region to select by it instead.\n        </small>\n        <small class=\"sc-hint\" *ngIf=\"is3d && !selectsClassVolumes && pickedClasses.length\">\n          The classes picked in the Region Editor are not on the reference volume shown here, so this selects by\n          the regions drawn over the cloud instead.\n        </small>\n        <small class=\"sc-hint\" *ngIf=\"is3d && !selectsClassVolumes\">\n          In 3D a region cuts through the cloud's full depth. Orbit and draw again to cut from another angle.\n          <ng-container *ngIf=\"!pickedClasses.length\">\n            Pick classes in the Region Editor's class tree to select inside their volumes.\n          </ng-container>\n        </small>\n      </div>\n    </div>\n\n    <!-- Observations, then what else draws them: the gene map, the 3D scene, and the\n         continuous-only knobs. -->\n    <spatial-observations-panel\n      [controls]=\"controls\"\n      [dataset]=\"ds\"\n      [view]=\"view\"\n      [genes]=\"genes\"\n      [legend]=\"legend\"\n      [colorBarCss]=\"colorBarCss\"\n      [selection]=\"selection\"\n      [selectedCategory]=\"selectedCategory\"\n      [colormapOptions]=\"colormapOptions\"\n      [is3d]=\"is3d\"\n      [open]=\"open.observations\"\n      (openChange)=\"setOpen('observations', $event)\"\n      (categoryClicked)=\"selectCategory($event)\"\n    ></spatial-observations-panel>\n\n    <!-- Distributions of whatever the map is coloured by. In the SAME dialog as\n         the colour controls on purpose: changing the gene and watching the\n         distribution move is one action, and two floating windows made that\n         harder to see rather than easier. -->\n    <div class=\"sc-section sc-charts\">\n      <button\n        type=\"button\"\n        class=\"sc-disclosure\"\n        (click)=\"toggleCharts()\"\n        [attr.aria-expanded]=\"chartsOpen\"\n        [attr.aria-controls]=\"chartsBodyId\"\n      >\n        <i class=\"pi\" [class.pi-chevron-right]=\"!chartsOpen\" [class.pi-chevron-down]=\"chartsOpen\"></i>\n        <span>Distribution</span>\n        <small *ngIf=\"!chartsOpen && view.colorBy\">of {{ colorByLabel }}</small>\n      </button>\n      <!-- Kept MOUNTED when collapsed, only hidden: destroying it would throw\n           away the chart kind and grouping the user picked. `active` is what\n           stops it drawing while it has no size. -->\n      <div [id]=\"chartsBodyId\" [hidden]=\"!chartsOpen\">\n        <spatial-charts [active]=\"visible && chartsOpen\"></spatial-charts>\n      </div>\n    </div>\n\n    <div class=\"sc-btns\">\n      <p-button label=\"Reset\" size=\"small\" [text]=\"true\" (onClick)=\"reset()\"></p-button>\n    </div>\n  </div>\n</p-dialog>\n", styles: [".sc-hint{font-size:.75rem;color:var(--text-color-secondary, #6c757d)}.sc-error{color:var(--red-600, #c62828)}.sc-section{display:flex;flex-direction:column;gap:.35rem}.sc-lbl{font-size:.78rem;color:var(--text-color-secondary, #6c757d);white-space:nowrap}.sc-row{display:flex;align-items:center;gap:.6rem}.sc-row p-slider,.sc-row p-dropdown,.sc-row p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row p-slider .p-slider{width:100%}:host ::ng-deep .sc-row p-dropdown .p-dropdown,:host ::ng-deep .sc-row p-treeSelect .p-treeselect{width:100%}.sc-row .sc-lbl{flex:0 0 calc(50% - .6rem);min-width:0;overflow:hidden;text-overflow:ellipsis}.sc-cmap-option{display:inline-flex;align-items:center;gap:.4rem}.sc-cmap-swatch{width:3.5rem;height:.7rem;border-radius:2px;display:block}.sc-val{flex:0 0 4rem;text-align:right;font-size:.78rem;font-variant-numeric:tabular-nums;white-space:nowrap}:host ::ng-deep .sc-full,:host ::ng-deep .sc-full .p-dropdown,:host ::ng-deep .sc-full .p-autocomplete,:host ::ng-deep .sc-full input{width:100%}.sc-colorbar{height:.75rem;border-radius:2px;border:1px solid rgba(0,0,0,.2)}.sc-colorbar-ends{display:flex;justify-content:space-between;font-size:.7rem;color:var(--text-color-secondary, #6c757d);margin-top:.2rem}.sc-panel{border:1px solid var(--surface-border, #dee2e6);border-radius:6px;margin-bottom:.5rem;overflow:hidden}.sc-panel-head{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--surface-100, #f5f6f7)}.sc-panel-head .sc-panel-title{flex:1;font-weight:600}.sc-panel.open>.sc-panel-head{background:var(--primary-color, #2196f3);color:var(--primary-color-text, #fff)}.sc-panel-body{display:flex;flex-direction:column;gap:.45rem;padding:.6rem .75rem .75rem}.sc-subhead{display:flex;align-items:center;gap:.5rem;margin-top:.4rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-color-secondary, #6c757d)}.sc-subhead:after{content:\"\";flex:1;border-top:1px solid var(--surface-border, #dee2e6)}:host ::ng-deep .sc-buttons .p-button{padding:.35rem .75rem;font-size:.85rem}.sc-row-picker p-dropdown,.sc-row-picker p-multiSelect,.sc-row-picker p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row-picker .sc-variant{width:6.5rem}:host ::ng-deep .sc-row-picker p-multiselect .p-multiselect{width:100%}:host ::ng-deep .sc-row-picker p-dropdown:has(.sc-variant){flex:0 0 6.5rem}:host ::ng-deep .sc-row-picker p-treeselect:has(.sc-palette){flex:0 0 3rem}:host ::ng-deep .sc-palette .p-treeselect-label{width:0;padding:0}.sc-icon-btn{flex:0 0 auto;border:0;background:transparent;cursor:pointer;padding:.25rem .35rem;font:inherit;font-size:1.05rem;color:var(--text-color, #333);border-radius:4px}.sc-icon-btn:hover{background:var(--surface-200, #e9ecef)}.sc-icon-btn.active{color:var(--primary-color, #2196f3);font-weight:700}.sc-icon-btn:disabled{opacity:.5;cursor:default}.sc-small-btn{margin-left:auto;border:1px solid var(--surface-border, #ced4da);background:var(--surface-0, #fff);border-radius:4px;padding:.2rem .6rem;font:inherit;font-size:.8rem;cursor:pointer}:host ::ng-deep .sc-group-heading{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.7}.sc-group-list,.sc-gene-tree{max-height:16rem;overflow-y:auto;border:1px solid var(--surface-border, #dee2e6);border-radius:4px;padding:.25rem .4rem}.sc-group-row,.sc-gene-row{display:flex;align-items:center;gap:.45rem;padding:.15rem 0;font-size:.88rem}.sc-group-row .sc-group-label,.sc-gene-row .sc-group-label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-group-all,.sc-gene-root,.sc-gene-group{font-weight:600}.sc-group-all .sc-icon-btn,.sc-gene-root .sc-icon-btn,.sc-gene-group .sc-icon-btn{margin-left:auto;font-size:.85rem}.sc-count{flex:0 0 auto;font-size:.78rem;color:var(--text-color-secondary, #6c757d)}.sc-glyph-option{display:inline-flex;align-items:center;gap:.4rem}.sc-glyph-svg{width:1rem;height:1rem;fill:currentColor}:host ::ng-deep .sc-glyph-pick .p-dropdown-label{padding:.2rem .4rem}.sc-color-input{width:2.5rem;height:1.8rem;border:1px solid var(--surface-border, #ced4da);border-radius:4px;padding:0;background:none}.sc-row-number p-slider,.sc-row-range p-slider{flex:1 1 0;min-width:0}:host ::ng-deep .sc-num{width:4.5rem;padding:.3rem .4rem;text-align:center}:host ::ng-deep .sc-row-number p-inputnumber,:host ::ng-deep .sc-row-range p-inputnumber{flex:0 0 auto}:host ::ng-deep .spatial-controls-dialog .p-dialog-content{padding:.75rem 1rem 1rem}.sc-empty{padding:.5rem 0;font-size:.85rem;color:var(--text-color-secondary, #6c757d);line-height:1.4}.sc-empty code{font-size:.8rem}.sc-body{display:flex;flex-direction:column;gap:.85rem}.sc-dataset{display:flex;flex-direction:column;gap:.1rem;padding-bottom:.5rem;border-bottom:1px solid var(--surface-border, #dee2e6)}.sc-dataset-name{font-weight:600;font-size:.9rem}.sc-dataset-count{font-size:.75rem;color:var(--text-color-secondary, #6c757d)}.sc-btns{display:flex;justify-content:flex-end}.sc-charts{padding-top:.5rem;border-top:1px solid var(--surface-border, #dee2e6);gap:0}.sc-disclosure{display:flex;align-items:center;gap:.4rem;width:100%;padding:.2rem 0;font:inherit;font-size:.82rem;font-weight:600;text-align:left;background:none;border:0;cursor:pointer;color:inherit}.sc-disclosure i{font-size:.7rem;color:var(--text-color-secondary, #6c757d)}.sc-disclosure small{font-weight:400;color:var(--text-color-secondary, #6c757d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-disclosure:hover{color:var(--primary-color, #3b82f6)}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [VISUALIZER]
@@ -28953,13 +29097,26 @@ class RegionHistory {
  * owner calls {@link sync} once the region array it projects onto is final,
  * which prunes ids that no longer exist and emits {@link indices$} only when
  * the index set changed.
+ *
+ * A selection made by picking classes (the class tree, a surface in 3D) also
+ * holds those classes: a class is a volume through the whole stack, whether or
+ * not it has a region on the slice. Any other selection drops them; an edit
+ * ({@link retain}, {@link sync}) keeps them.
  */
 class RegionSelection {
     constructor() {
         this.selected = [];
+        this.picked = [];
         this.indicesSubject = new BehaviorSubject([]);
+        this.classesSubject = new BehaviorSubject([]);
         /** The selected regions' current array indices (emits on change only). */
         this.indices$ = this.indicesSubject.asObservable();
+        /** The classes the selection was picked as ([] for any other selection; emits on change only). */
+        this.classes$ = this.classesSubject.asObservable();
+    }
+    /** The classes the selection was picked as, as last emitted by {@link sync}. */
+    get classes() {
+        return this.classesSubject.value;
     }
     /** The selected indices as last projected by {@link sync}. */
     get indices() {
@@ -28969,9 +29126,10 @@ class RegionSelection {
     get ids() {
         return this.selected;
     }
-    /** Replace the selected ids (no emit until {@link sync}). */
-    replace(ids) {
+    /** Replace the selected ids, picked as `classes` if they were (no emit until {@link sync}). */
+    replace(ids, classes = []) {
         this.selected = ids.slice();
+        this.picked = classes.slice();
     }
     /** Keep only the ids `keep` accepts (no emit until {@link sync}). */
     retain(keep) {
@@ -28994,10 +29152,11 @@ class RegionSelection {
             }
         }
         this.selected = ids;
+        this.picked = [];
         this.sync(regions);
     }
     /** Project the selected ids onto `regions`, pruning ids it no longer holds,
-     *  and emit if the index set changed. */
+     *  and emit if the index set (or the picked classes) changed. */
     sync(regions) {
         const indexOf = new Map();
         regions.forEach((r, i) => {
@@ -29016,6 +29175,8 @@ class RegionSelection {
         this.selected = live;
         if (!sameIndices(this.indicesSubject.value, indices))
             this.indicesSubject.next(indices);
+        if (!sameIndices(this.classesSubject.value, this.picked))
+            this.classesSubject.next(this.picked);
     }
 }
 function sameIndices(a, b) {
@@ -30879,7 +31040,8 @@ class RegionStore {
     /**
      * Select every region of these classes on the slice — the regions', and the region source's,
      * which are taken into the regions (at most {@link SELECT_CLASSES_LIMIT} of them). Added to the
-     * selection with `additive`. Resolves the selected region ids.
+     * selection with `additive`. The selection holds the classes too (see {@link getPickedClasses}).
+     * Resolves the selected region ids.
      */
     async selectClasses(classes, additive = false) {
         const wanted = new Set(classes);
@@ -30895,10 +31057,28 @@ class RegionStore {
                 await this.takeSourceFeatures(page.rows.map((r) => r.id));
         }
         const ids = this.regions.filter((r) => !r.isProfile?.() && r.label && wanted.has(r.label)).map((r) => r.id);
-        this.selection.replace(additive ? [...new Set([...this.selection.ids, ...ids])] : ids);
+        this.selection.replace(additive ? [...new Set([...this.selection.ids, ...ids])] : ids, additive ? [...new Set([...this.selection.classes, ...classes])] : classes);
         this.emitSelection();
         return ids;
     }
+    /**
+     * The classes the selection was picked as by {@link selectClasses} (a class tree node with its
+     * subclasses, a surface clicked in 3D); [] once anything else selected. Each is a volume through
+     * the whole stack, whether or not it has a region on the slice.
+     */
+    getPickedClasses() {
+        return this.selection.classes;
+    }
+    getPickedClasses$() {
+        return this.selection.classes$;
+    }
+    /**
+     * Every slice's exact outlines of these classes, the region sources' and the regions' (as the
+     * 3D reconstruction reads them at the stack's own resolution): what is inside their volume.
+     */
+    classSliceOutlines(classes) {
+        return this.classOutlines(classes, 0);
+    }
     /**
      * The 3D reconstruction of each group of classes over every slice of the stack (an atlas
      * structure with its substructures, say): the outlines of the regions of those classes on every
@@ -38144,9 +38324,11 @@ class SpatialControlsFacade {
     constructor(port, ctx) {
         this.port = port;
         this.ctx = ctx;
-        /** Latest dataset, mirrored so `selectFromRegions()` can answer synchronously — it
-         *  runs from a button click and must not await a round-trip. */
+        /** Latest dataset, mirrored so `selectFromRegions()` answers from the dataset on
+         *  screen — it runs from a button click and must not await a round-trip. */
         this.dataset = null;
+        /** Bumped per class-volume selection (and on dispose): only the latest may publish. */
+        this.roiRequest = 0;
         // Mirror the dataset (and drop a stale selection when it changes — the masks are
         // index-based, so they are meaningless against different observations).
         this.sub = port.getDataset$().subscribe((dataset) => {
@@ -38167,6 +38349,23 @@ class SpatialControlsFacade {
     /** Release the port subscription (the router's injector is being destroyed). */
     dispose() {
         this.sub.unsubscribe();
+        // A class-volume selection still reading its outlines publishes nothing.
+        this.roiRequest++;
+    }
+    /**
+     * How "Select from ROIs" selects now — the one rule its executor and the panel's description
+     * share: inside the picked classes' volumes in the 3D cloud, when the dataset has a reference
+     * volume (and no tissue image) and the plotted image is that volume's stack, so the regions sit
+     * in its grid; by the drawn regions otherwise.
+     */
+    roiSelectionMode() {
+        const dataset = this.dataset;
+        const eligible = !!dataset?.volume &&
+            !dataset.imageRef &&
+            isSpatialOmics3d(this.ctx.plotType()) &&
+            this.ctx.regionStore.getPickedClasses().length > 0 &&
+            this.ctx.napari.regionVoxelStep() !== null;
+        return eligible ? 'class-volumes' : 'regions';
     }
     build() {
         const port = this.port;
@@ -38261,31 +38460,62 @@ class SpatialControlsFacade {
                 return obs ? sectionsOf(obs) : null;
             },
             getSelection$: () => this.ctx.selectionStore.getSelection$(),
-            selectFromRegions: () => {
+            selectFromRegions: async () => {
                 const dataset = this.dataset;
                 if (!dataset)
                     return 0;
-                const regions = this.ctx.regionStore.getRegions();
-                // The union of every drawn region — so every ROI tool the library
-                // already has doubles as a spatial selection tool.
+                const is3d = isSpatialOmics3d(this.ctx.plotType());
+                const volume = !dataset.imageRef ? dataset.volume : undefined;
+                // In the 3D cloud, region classes picked in the Region Editor (a class
+                // tree node with its subclasses, a surface clicked in 3D) select the
+                // cells inside their volumes — the structures shown among the cells.
+                if (volume && this.roiSelectionMode() === 'class-volumes') {
+                    const classes = this.ctx.regionStore.getPickedClasses();
+                    const request = ++this.roiRequest;
+                    const revision = this.ctx.selectionStore.revision();
+                    const outlines = await this.ctx.regionStore.classSliceOutlines(classes);
+                    // Superseded while the outlines were read: a newer request, any newer selection
+                    // (a Clear, a legend click, a linked chart's brush), another dataset, view or pick,
+                    // or the facade disposed. Its mask would overwrite what the user did since.
+                    const current = this.ctx.regionStore.getPickedClasses();
+                    if (request !== this.roiRequest ||
+                        revision !== this.ctx.selectionStore.revision() ||
+                        this.dataset !== dataset ||
+                        this.roiSelectionMode() !== 'class-volumes' ||
+                        current.length !== classes.length ||
+                        current.some((c, i) => c !== classes[i])) {
+                        return null;
+                    }
+                    const selection = selectInClassVolumes(dataset.observations, volume, outlines);
+                    this.ctx.selectionStore.set(selection);
+                    return selection.count;
+                }
+                // Otherwise the union of every drawn region — so every ROI tool the
+                // library already has doubles as a spatial selection tool.
                 //
                 // In the 3D cloud there is no data-space affine to push a drawn shape
                 // through, so the observations are projected to canvas pixels by the
-                // renderer (which owns the camera) and tested in screen space instead.
-                // Falls back to the 2D path whenever the cloud is not mounted.
-                const projected = isSpatialOmics3d(this.ctx.plotType())
-                    ? this.ctx.napari.getSpatialScreenProjection(dataset.observations)
-                    : null;
-                // In the 2D view of a volume-backed dataset the shape was drawn over ONE
-                // section, in the volume's pixel grid: it selects the cells of that
-                // section, not the whole depth of brain standing behind them.
-                const volume = !dataset.imageRef ? dataset.volume : undefined;
-                const selection = projected
-                    ? selectInRegionsProjected(projected, dataset.observations.count, regions)
-                    : selectInRegions(dataset.observations, volume ? volumeImageRef(volume, dataset.micronsPerUnit) : dataset.imageRef, regions, volume ? observationsInSlice(dataset.observations, volume, this.ctx.zIndex()) : undefined);
+                // renderer (which owns the camera) and tested in screen space instead —
+                // against the lassos drawn there only: every other region is in image
+                // space. Falls back to the 2D path whenever the cloud is not mounted.
+                const projected = is3d ? this.ctx.napari.getSpatialScreenProjection(dataset.observations) : null;
+                let selection;
+                if (projected) {
+                    const lassos = new Set(this.ctx.napari.getSpatialLassoIds());
+                    const regions = this.ctx.regionStore.getRegions().filter((r) => lassos.has(r.id));
+                    selection = selectInRegionsProjected(projected, dataset.observations.count, regions);
+                }
+                else {
+                    // In the 2D view of a volume-backed dataset the shape was drawn over ONE
+                    // section, in the volume's pixel grid: it selects the cells of that
+                    // section, not the whole depth of brain standing behind them.
+                    selection = selectInRegions(dataset.observations, volume ? volumeImageRef(volume, dataset.micronsPerUnit) : dataset.imageRef, this.ctx.regionStore.getRegions(), volume ? observationsInSlice(dataset.observations, volume, this.ctx.zIndex()) : undefined);
+                }
                 this.ctx.selectionStore.set(selection);
                 return selection.count;
             },
+            roiSelectionMode: () => this.roiSelectionMode(),
+            getPickedRegionClasses$: () => this.ctx.regionStore.getPickedClasses$(),
             selectCategory: async (column, categoryIndex) => {
                 const loaded = await port.getColumn(column);
                 if (!isCategoricalColumn(loaded)) {
@@ -39235,16 +39465,21 @@ const HANDLE_SIZE = 7;
  * the draft being drawn and the rubber-band marquee.
  */
 class NapariRegionSvgRenderer {
-    constructor(svg, store) {
+    /**
+     * @param draws which regions are this overlay's to draw (default: every one); the others are
+     *        left out of the shapes and handles, keeping the store's indices
+     */
+    constructor(svg, store, draws = () => true) {
         this.svg = svg;
         this.store = store;
+        this.draws = draws;
         /** Dedicated marquee rect element, updated directly during the drag (no full region redraw). */
         this.marqueeEl = null;
         this.renderer = new SvgRegionRenderer(svg, {
             rectElement: 'rect',
             styleShape: (el, region, selected) => this.style(el, this.strokeOf(region), selected),
             decorate: (region, _i, _selected, layer) => this.drawLabel(region, layer),
-            skip: (region) => !!region.isProfile?.() || store.isClassHidden(region.label),
+            skip: (region) => !!region.isProfile?.() || store.isClassHidden(region.label) || !draws(region),
         });
     }
     /** Follow the camera: one transform attribute plus the screen-space elements. */
@@ -39260,7 +39495,7 @@ class NapariRegionSvgRenderer {
         this.renderer.renderOverlay((layer) => {
             for (const i of selected) {
                 const region = regions[i];
-                if (region && !region.isProfile?.())
+                if (region && !region.isProfile?.() && this.draws(region))
                     this.drawHandles(region, layer);
             }
             this.drawDraft(draft, layer);
@@ -39802,6 +40037,7 @@ class NapariRegionOverlay {
                 this.commitPolygon(pts, true);
             this.redraw();
         };
+        this.own = opts.screenSpace ? new Set() : null;
         if (getComputedStyle(host).position === 'static')
             host.style.position = 'relative';
         this.svg = document.createElementNS(SVG_NS, 'svg');
@@ -39815,7 +40051,7 @@ class NapariRegionOverlay {
             touchAction: 'none',
         });
         this.host.appendChild(this.svg);
-        this.renderer = new NapariRegionSvgRenderer(this.svg, this.store);
+        this.renderer = new NapariRegionSvgRenderer(this.svg, this.store, (r) => this.draws(r));
         this.projection = new OverlayProjection(this.svg, this.viewer);
         this.sourceLayer =
             opts.regionSource === false ? null : new RegionSourceLayer(this.svg, this.store.getRegionSourceView$());
@@ -39948,11 +40184,20 @@ class NapariRegionOverlay {
             this.draftPath.push([ix, iy]);
         }
     }
-    /** The currently-selected region (single selection), or null. */
+    /** The currently-selected region (single selection) this overlay draws, or null. */
     selectedRegion() {
         const regions = this.store.getRegions();
         const i = this.selected[0];
-        return i != null && i >= 0 && i < regions.length ? regions[i] : null;
+        const region = i != null && i >= 0 && i < regions.length ? regions[i] : null;
+        return region && this.draws(region) ? region : null;
+    }
+    /** Whether this overlay draws (and lets the pointer pick) `region`: see {@link own}. */
+    draws(region) {
+        return !this.own || this.own.has(region.id);
+    }
+    /** The regions this overlay drew in screen space (the 3D view's lassos); [] in image space. */
+    ownRegionIds() {
+        return this.own ? [...this.own] : [];
     }
     /**
      * Start a select/move interaction: grab a handle (rectangle corner) or vertex of the already-
@@ -39975,7 +40220,7 @@ class NapariRegionOverlay {
         const regions = this.store.getRegions();
         const [wx, wy] = this.projection.toWorld(e.clientX, e.clientY);
         for (let i = regions.length - 1; i >= 0; i--) {
-            if (this.store.isClassHidden(regions[i].label))
+            if (this.store.isClassHidden(regions[i].label) || !this.draws(regions[i]))
                 continue;
             if (regionContains(regions[i], wx, wy, { toScreen: this.projection.toScreen, tolPx: OPEN_PATH_HIT_PX })) {
                 this.store.selectRegion(regions[i]);
@@ -40056,7 +40301,7 @@ class NapariRegionOverlay {
         const regions = this.store.getRegions();
         this.store.setSelectedShapeIndices(regionsInRect(regions, x0, y0, x1, y1, {
             skipProfiles: true,
-            skip: (r) => this.store.isClassHidden(r.label),
+            skip: (r) => this.store.isClassHidden(r.label) || !this.draws(r),
         }));
         const features = this.sourceLayer?.featuresInRect(x0, y0, x1, y1) ?? [];
         if (features.length) {
@@ -40074,6 +40319,7 @@ class NapariRegionOverlay {
         region.bounds = rect;
         region.color = this.store.getShapeColor();
         this.store.addRegion(region);
+        this.own?.add(region.id);
     }
     commitPolygon(points, closed) {
         const poly = new Polygon();
@@ -40087,6 +40333,7 @@ class NapariRegionOverlay {
         region.color = this.store.getShapeColor();
         region.label = 'Region';
         this.store.addRegion(region);
+        this.own?.add(region.id);
     }
     // ── rendering ─────────────────────────────────────────────────────────────
     /** Show or hide the drawn regions. A region being drawn stays visible either way. */
@@ -40228,27 +40475,38 @@ class NapariToolBridge {
      * A screen-space shape stops meaning anything the moment the camera moves, so an orbit clears
      * the regions drawn in this view (and only those). The SELECTION they produced is kept: that is
      * the durable artefact, and the highlighted points stay highlighted from every angle.
+     *
+     * Every other region in the store is in image space - the image's own, an imported set,
+     * structures a tree click took from a region source - so the overlay neither draws nor picks it
+     * (it would lie flat at canvas pixels over the cloud), and an orbit leaves it alone: they show
+     * in 3D as their reconstructions instead.
      */
     install3dInteraction(viewer, host) {
         const { regionStore } = this.deps;
         // World here is the canvas, not the image: no region source to draw.
-        this.regionOverlay = new NapariRegionOverlay(host, this.screenSpaceViewer(viewer), regionStore, {
+        const overlay = new NapariRegionOverlay(host, this.screenSpaceViewer(viewer), regionStore, {
             regionSource: false,
+            screenSpace: true,
         });
+        this.regionOverlay = overlay;
         this.buildCoordinateTransform();
-        // Regions already in the shared store when the 3D view mounted (the image's own, say) are
-        // not screen-space shapes and must survive an orbit; only those drawn here are cleared.
         // (No mid-gesture case to guard: the overlay disables the camera controls while drawing.)
-        const foreign = new Set(regionStore.getRegions().map((r) => r.id));
-        this.cameraOff = viewer.camera3d.changed.connect(() => {
-            const drawn = regionStore
-                .getRegions()
-                .filter((r) => !foreign.has(r.id))
-                .map((r) => r.id);
-            // Not an edit of the user's: no undo step (NAPARI-SVC-11).
-            if (drawn.length)
-                this.host.inZone(() => regionStore.removeRegions(drawn, { recordUndo: false }));
-        });
+        this.cameraOff = viewer.camera3d.changed.connect(() => this.clearOwnLassos());
+    }
+    /**
+     * Remove the regions the 3D overlay drew in screen space (only those) from the store: a lasso
+     * means nothing once the camera it was drawn under moves or the scene goes. Not an edit of the
+     * user's: no undo step (NAPARI-SVC-11).
+     */
+    clearOwnLassos() {
+        const overlay = this.regionOverlay;
+        if (!overlay)
+            return;
+        const { regionStore } = this.deps;
+        const present = new Set(regionStore.getRegions().map((r) => r.id));
+        const drawn = overlay.ownRegionIds().filter((id) => present.has(id));
+        if (drawn.length)
+            this.host.inZone(() => regionStore.removeRegions(drawn, { recordUndo: false }));
     }
     /**
      * The {@link OverlayViewer} the 3D region overlay draws through: "world" is the canvas, in
@@ -40270,6 +40528,10 @@ class NapariToolBridge {
     /** End the scene's interaction: the overlay, the camera hook, the pending timers and the
      *  pixels read from the old canvas. The armed tool and the pixel-tool set persist. */
     teardown() {
+        // The overlay's record of its lassos goes with it: remove them first, or they would stay in
+        // the store unowned - hidden by the next 3D overlay, beyond an orbit's reach, and still
+        // feeding "Select from ROIs" with screen coordinates of a camera that is gone.
+        this.clearOwnLassos();
         this.regionOverlay?.destroy();
         this.regionOverlay = null;
         this.cachedImage = null;
@@ -46743,6 +47005,11 @@ class NapariVisualizerService extends BaseStoreVisualizer {
     getSpatialScreenProjection(obs) {
         return this.scene?.screenProjection?.(obs) ?? null;
     }
+    /** The ids of the regions drawn over the 3D cloud in screen space (its lassos); [] in 2D. Every
+     *  other region in the store is in image space, and means nothing at canvas pixels. */
+    getSpatialLassoIds() {
+        return this.tools.regionOverlay?.ownRegionIds() ?? [];
+    }
     fitCameraSoon() {
         const run = () => {
             if (this.viewer && this.canvas && this.imageW > 0 && this.imageH > 0) {
@@ -48522,6 +48789,9 @@ class RoutingVisualizerService {
     async selectRegionClasses(classes, additive) {
         await this.regionStore.selectClasses(classes, additive);
     }
+    getPickedRegionClasses$() {
+        return this.regionStore.getPickedClasses$();
+    }
     getGeoJsonStringWithSource(regions, slice) {
         return this.regionStore.getGeoJsonWithSource(regions, slice);
     }
@@ -49027,4 +49297,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
  */
 
 export { TILE_ACCESS_PORT as $, ALL_GENES as A, ProcessingImage as B, CANVAS_TOOL_IDS as C, DEFAULT_CATEGORICAL_PALETTE as D, REGION_IO_PORT as E, REGION_SOURCE_MIN_CHARS as F, Rectangle as G, HexColorPickerComponent as H, IMAGE_STATE_PORT as I, Region as J, RegionEditorComponent as K, LUT_COLORS as L, MISSING_COLOR as M, NAPARI_DECIMATE_OPTIONS as N, RoutingVisualizerService as O, PLOT_MODE_CONTEXT as P, SEMANTIC_SEGMENTER as Q, REGION_EDITOR_API as R, SAM_MODELS as S, SPATIAL_DATA_PORT as T, SPATIAL_WIRE_VERSION as U, ShapeSelection as V, SpatialChartsComponent as W, SpatialControlsComponent as X, SpatialDataHttpService as Y, SpatialSelectionStore as Z, SupersededError as _, runDecoder as a, openGeoJsonRegionSource as a$, TOOLBAR_TOOLS as a0, VISUALIZER as a1, VIZ_ALERT_TOAST_KEY as a2, VIZ_CONFIG as a3, VIZ_TOAST_KEY as a4, ViewerFeature as a5, VisualizationModule as a6, VisualizerComponent as a7, assertManifestVersion as a8, benefitsFromGrouping as a9, isBuiltinPlotType as aA, isCanvasToolId as aB, isCategoricalColumn as aC, isContinuousColumn as aD, isDialogToolContribution as aE, isEmptyPresetSet as aF, isLabelVolumeName as aG, isLittleEndian as aH, isNapari3d as aI, isNapariIsosurface as aJ, isNapariScatter as aK, isNapariScatter3d as aL, isNapariSurface as aM, isNapariVolume as aN, isSamModelReady as aO, isSpatialOmics as aP, isSpatialOmics3d as aQ, isThreeDimensional as aR, isZipName as aS, labelClasses as aT, labelSliceGeoJson as aU, lutFor as aV, markerDiameters as aW, maskToIndices as aX, mutedFromSelection as aY, omicsLayout as aZ, openAnnotations as a_, buildOmicsTraces as aa, capabilitiesOf as ab, clearSamModelCache as ac, contrastWindow as ad, contributedPlotTypeOption as ae, countMask as af, cropImage as ag, datasetFromManifest as ah, decodeColumn as ai, decodeCoords as aj, decodeFeatureVector as ak, decodePolygons as al, decodeRadius as am, defaultPresetSet as an, dialogToolContributions as ao, emptySelection as ap, encodeCategorical as aq, encodeContinuous as ar, expandZips as as, findColumnMeta as at, getDefaultSamModelId as au, getPlotTypeDescriptor as av, getSamModel as aw, hasZarrMetadata as ax, hydrateBounds as ay, importFile as az, ALL_TOOLBAR_TOOLS as b, openHttpRegionSource as b0, parsePresetSet as b1, planRegionImport as b2, pointInRing as b3, provideVisualization as b4, readAnnotationSlices as b5, readLabelVolume as b6, readOmeZarrLabels as b7, readZip as b8, rendererOwnsWheel as b9, resolveCategoryColors as ba, selectByCategory as bb, selectInRegions as bc, setDefaultSamModel as bd, setOrtWasmBase as be, setSamModelUrls as bf, sortToolContributions as bg, visibleToolContributions as bh, ANNOTATION_IMAGE_MAX_DIM as c, CELL_SEGMENTER as d, CHANNEL_HISTOGRAM_API as e, fetchModel as f, getOrtWasmBase as g, CellposeSegmenterService as h, ChannelHistogramComponent as i, DEFAULT_FALLBACK_PALETTE as j, DEFAULT_MUTED_OPACITY as k, DEFAULT_SAM_MODEL_ID as l, DEFAULT_SPATIAL_VIEW as m, INSTANCE_SEGMENTER as n, ImageConverterService as o, MultiPolygon as p, NAPARI_DEFAULT_DECIMATE as q, runEncoder as r, NO_CATEGORY as s, NO_OBSERVATION as t, PLOT_MODE_SESSION as u, PLOT_TYPE_CONTRIBUTIONS as v, PLOT_TYPE_DESCRIPTORS as w, PREFERENCES_PORT as x, PlotType as y, Polygon as z };
-//# sourceMappingURL=jax-data-science-sci-image-visualizer-jax-data-science-sci-image-visualizer-a68Hw5rw.mjs.map
+//# sourceMappingURL=jax-data-science-sci-image-visualizer-jax-data-science-sci-image-visualizer-DURPqs5a.mjs.map