@jax-data-science/sci-image-visualizer 0.18.0 → 0.18.1

package/fesm2022/{jax-data-science-sci-image-visualizer-jax-data-science-sci-image-visualizer-CBiLcnE6.mjs → jax-data-science-sci-image-visualizer-jax-data-science-sci-image-visualizer-YrNqv8wH.mjs}

@@ -10749,7 +10749,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-BXHjv4PE.mjs');
+    const { OnnxSamSession } = await import('./jax-data-science-sci-image-visualizer-onnx-sam-session-Dph35S7m.mjs');
     return new OnnxSamSession();
 };
 /** Thrown inside a load that a model switch superseded. */
@@ -25488,7 +25488,7 @@ class SpatialObservationsPanelComponent {
         this.controls?.setViewState({ percentileClip: value });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SpatialObservationsPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: SpatialObservationsPanelComponent, isStandalone: true, selector: "spatial-observations-panel", inputs: { controls: "controls", dataset: "dataset", view: "view", genes: "genes", legend: "legend", colorBarCss: "colorBarCss", selection: "selection", selectedCategory: "selectedCategory", colormapOptions: "colormapOptions", is3d: "is3d", open: "open", cellsAvailable: "cellsAvailable" }, outputs: { openChange: "openChange", categoryClicked: "categoryClicked" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"dataset as ds\">\n  <!-- Observations: one marker per observation (cell centroid, Visium spot), and what\n     colours them. The lead section for datasets without cell outlines. -->\n  <div class=\"sc-panel\" [class.open]=\"open\">\n    <div class=\"sc-panel-head\" (click)=\"openChange.emit(!open)\">\n      <!-- Shows or hides the observations, as whichever the toggle below shows them as. -->\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"observationsShown\"\n        (click)=\"$event.stopPropagation()\"\n        (onChange)=\"onShowObservations($event.checked)\"\n        pTooltip=\"Show the observations\"\n        tooltipPosition=\"top\"\n      ></p-checkbox>\n      <span class=\"sc-panel-title\">Observations</span>\n      <i class=\"pi\" [class.pi-chevron-down]=\"open\" [class.pi-chevron-right]=\"!open\"></i>\n    </div>\n    <div class=\"sc-panel-body\" *ngIf=\"open\">\n      <!-- With a cell segmentation: shown as the markers OR as the cells' own shapes, one at a time.\n           One colouring for either, below. -->\n      <div class=\"sc-row sc-show-as\" *ngIf=\"cellsAvailable\">\n        <span class=\"sc-lbl\">Show as</span>\n        <p-selectButton\n          [options]=\"showAsOptions\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [ngModel]=\"shownAs\"\n          (ngModelChange)=\"onShownAs($event)\"\n          [allowEmpty]=\"false\"\n          styleClass=\"sc-buttons\"\n        ></p-selectButton>\n      </div>\n\n      <spatial-color-by\n        [controls]=\"controls\"\n        [dataset]=\"ds\"\n        [view]=\"view\"\n        [genes]=\"genes\"\n        [legend]=\"legend\"\n        [colorBarCss]=\"colorBarCss\"\n        [selectedCategory]=\"selectedCategory\"\n        [colormapOptions]=\"colormapOptions\"\n        (categoryClicked)=\"categoryClicked.emit($event)\"\n      ></spatial-color-by>\n\n      <ng-container *ngIf=\"genes?.state$ | async as gene\">\n        <!-- Which observations are drawn at all, by what they express. Several genes at\n        once, unlike the colour, which reads one: picking genes here hides every\n        observation that expresses none of them (or not all of them), and by default\n        colours (and, in 2D, marks) each drawn one by its gene. -->\n        <div class=\"sc-section\" *ngIf=\"ds.features\">\n          <label class=\"sc-lbl\" for=\"sc-show-genes\">Show observations expressing</label>\n          <p-multiSelect\n            inputId=\"sc-show-genes\"\n            [options]=\"gene.options\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            [ngModel]=\"view.observationGenes\"\n            (onChange)=\"onObservationGenes($event.value)\"\n            [filter]=\"true\"\n            filterBy=\"label\"\n            [resetFilterOnHide]=\"true\"\n            (onFilter)=\"genes?.onFilter($event.filter)\"\n            (onPanelShow)=\"genes?.ensureList()\"\n            [virtualScroll]=\"gene.options.length > geneVirtualScrollFrom\"\n            [virtualScrollItemSize]=\"30\"\n            [showToggleAll]=\"false\"\n            [showClear]=\"true\"\n            [emptyFilterMessage]=\"gene.remote ? 'No match \u2014 keep typing' : 'No match'\"\n            [emptyMessage]=\"gene.remote ? 'Type to search genes' : 'No genes'\"\n            appendTo=\"body\"\n            placeholder=\"Any gene (every observation)\"\n            [selectedItemsLabel]=\"'{0} genes'\"\n            [maxSelectedLabels]=\"3\"\n            styleClass=\"sc-full\"\n          >\n            <!-- A picked gene shows its icon in its colour; clicking it edits them. -->\n            <ng-template let-option pTemplate=\"item\">\n              <div class=\"sc-obs-gene-option\">\n                <span class=\"sc-obs-gene-name\">{{ option.label }}</span>\n                <ng-container *ngIf=\"isObservationGene(option.value)\">\n                  <ng-container *ngTemplateOutlet=\"geneMark; context: { $implicit: option.value }\"></ng-container>\n                </ng-container>\n              </div>\n            </ng-template>\n          </p-multiSelect>\n          <p-selectButton\n            *ngIf=\"view.observationGenes.length > 1\"\n            [options]=\"matchOptions\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            [ngModel]=\"view.observationGenesMatch\"\n            (ngModelChange)=\"onObservationGenesMatch($event)\"\n            [allowEmpty]=\"false\"\n            styleClass=\"sc-buttons\"\n          ></p-selectButton>\n          <!-- The picked genes: each one's icon and colour (click to edit), and a way out. -->\n          <div class=\"sc-obs-genes\" *ngIf=\"view.observationGenes.length\">\n            <div class=\"sc-obs-gene-row\" *ngFor=\"let g of view.observationGenes; trackBy: trackByGene\">\n              <ng-container *ngTemplateOutlet=\"geneMark; context: { $implicit: g }\"></ng-container>\n              <span class=\"sc-obs-gene-name\">{{ g }}</span>\n              <button\n                type=\"button\"\n                class=\"sc-icon-btn\"\n                [attr.aria-label]=\"'Stop showing ' + g\"\n                pTooltip=\"Remove\"\n                tooltipPosition=\"top\"\n                (click)=\"removeObservationGene(g)\"\n              >\n                <i class=\"pi pi-times\"></i>\n              </button>\n            </div>\n          </div>\n          <div class=\"sc-row\" *ngIf=\"view.observationGenes.length\">\n            <p-checkbox\n              [binary]=\"true\"\n              [ngModel]=\"view.observationGenesColorBy\"\n              (onChange)=\"onObservationGenesColorBy($event.checked)\"\n              label=\"Colour by these genes\"\n              pTooltip=\"Each observation in the colour (and, in 2D, the icon) of the picked gene it expresses most, relative to that gene's highest value. Off, Colour by applies.\"\n              tooltipPosition=\"top\"\n            ></p-checkbox>\n          </div>\n          <small class=\"sc-hint\" *ngIf=\"view.observationGenes.length\">{{ geneFilterHint }}</small>\n          <!-- The filter is never dropped silently: a failed expression read keeps the observations\n                as they were drawn, and says so. -->\n          <small class=\"sc-hint sc-error\" *ngIf=\"view.observationGenes.length && (geneFilterFailed$ | async)\">\n            The expression of the picked genes could not be read, so the observations still show the previous\n            filter.\n            <a href=\"\" (click)=\"$event.preventDefault(); retryGeneFilter()\">Try again</a>\n          </small>\n        </div>\n      </ng-container>\n\n      <!-- Markers: how they are drawn. -->\n      <ng-container *ngIf=\"!cellsAvailable || shownAs === 'markers'\">\n        <div class=\"sc-subhead\">Markers</div>\n        <div class=\"sc-section\">\n          <div class=\"sc-row\">\n            <span class=\"sc-lbl\">Point size</span>\n            <p-slider\n              [ngModel]=\"view.pointScale\"\n              [min]=\"0.25\"\n              [max]=\"5\"\n              [step]=\"0.25\"\n              (onChange)=\"onPointScale($event.value)\"\n            ></p-slider>\n            <span class=\"sc-val\">{{ view.pointScale }}\u00D7</span>\n          </div>\n          <div class=\"sc-row\">\n            <span class=\"sc-lbl\">Opacity</span>\n            <p-slider\n              [ngModel]=\"view.opacity\"\n              [min]=\"0.1\"\n              [max]=\"1\"\n              [step]=\"0.05\"\n              (onChange)=\"onOpacity($event.value)\"\n            ></p-slider>\n            <span class=\"sc-val\">{{ view.opacity }}</span>\n          </div>\n        </div>\n      </ng-container>\n\n      <!-- Cell segmentations: how the cells are drawn, projected by the dialog. -->\n      <ng-container *ngIf=\"cellsAvailable && shownAs === 'cells'\">\n        <ng-content select=\"spatial-cells-panel\"></ng-content>\n      </ng-container>\n\n      <!-- The selected cell's (or cell type's, or region's) observations, by group: through the\n           volume in 3D, on the plane shown in 2D. -->\n      <spatial-selection-observations [controls]=\"controls\" [is3d]=\"is3d\"></spatial-selection-observations>\n    </div>\n  </div>\n\n  <!-- Only for a gene: the map draws that gene's expression as a field. In 2D\n     it goes under the cells of the displayed plane; in 3D it is one sheet per\n     imaged section, optionally smoothed along z into a volume. -->\n  <div class=\"sc-section\" *ngIf=\"canMapGene\">\n    <div class=\"sc-row\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"view.geneMap\"\n        (onChange)=\"onGeneMap($event.checked)\"\n        label=\"Gene map (expression field)\"\n        [pTooltip]=\"\n          is3d\n            ? 'Draw this gene\\'s expression as one field per imaged section \u2014 an estimate between the cells, empty where nothing was measured'\n            : 'Draw this gene\\'s expression as a smooth field UNDER the cells \u2014 an estimate between them, transparent where nothing was measured'\n        \"\n        tooltipPosition=\"top\"\n      ></p-checkbox>\n    </div>\n    <!-- 3D only: interpolating along z turns the measured sheets into an\n       estimate, so it is its own decision and its own label. -->\n    <div class=\"sc-row\" *ngIf=\"view.geneMap && is3d\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"view.geneMapVolume\"\n        (onChange)=\"onGeneMapVolume($event.checked)\"\n        label=\"Volume rendering (interpolate along z)\"\n        pTooltip=\"Smooth the per-section fields into a continuous volume \u2014 an ESTIMATE between the imaged sections, not measured tissue\"\n        tooltipPosition=\"top\"\n      ></p-checkbox>\n    </div>\n    <!-- Meaningless while interpolating: a volume built from one section would\n       smear that slide through the specimen's whole depth. -->\n    <div class=\"sc-row\" *ngIf=\"view.geneMap && is3d && isSectioned && !view.geneMapVolume\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"geneMapOneSection\"\n        (onChange)=\"onGeneMapOneSection($event.checked)\"\n        label=\"One map section at a time\"\n        pTooltip=\"Draw a single imaged section's field instead of the whole stack of sheets\"\n        tooltipPosition=\"top\"\n      ></p-checkbox>\n    </div>\n    <div class=\"sc-row\" *ngIf=\"view.geneMap && is3d && isSectioned && !view.geneMapVolume && geneMapOneSection\">\n      <span class=\"sc-lbl\">Map section</span>\n      <p-slider\n        [ngModel]=\"view.geneMapSection\"\n        [min]=\"0\"\n        [max]=\"lastSection\"\n        [step]=\"1\"\n        (onChange)=\"onGeneMapSection($event.value)\"\n      ></p-slider>\n      <span class=\"sc-val\">{{ geneMapSectionLabel }}</span>\n    </div>\n    <div class=\"sc-row\" *ngIf=\"view.geneMap\">\n      <span class=\"sc-lbl\">Smoothing</span>\n      <p-slider\n        [ngModel]=\"view.geneMapSmoothing\"\n        [min]=\"0.5\"\n        [max]=\"4\"\n        [step]=\"0.5\"\n        (onChange)=\"onGeneMapSmoothing($event.value)\"\n      ></p-slider>\n      <span class=\"sc-val\">{{ view.geneMapSmoothing }}\u00D7</span>\n    </div>\n    <div class=\"sc-row\" *ngIf=\"view.geneMap\">\n      <span class=\"sc-lbl\">Map opacity</span>\n      <p-slider\n        [ngModel]=\"view.geneMapOpacity\"\n        [min]=\"0.1\"\n        [max]=\"1\"\n        [step]=\"0.05\"\n        (onChange)=\"onGeneMapOpacity($event.value)\"\n      ></p-slider>\n      <span class=\"sc-val\">{{ view.geneMapOpacity }}</span>\n    </div>\n    <div class=\"sc-hint\" *ngIf=\"view.geneMap && !is3d\">\n      Kernel-weighted mean per cell, not a sum \u2014 so a crowded region does not glow for being crowded. Transparent\n      where no cell was measured. Turn the cells' own Opacity down to read the field under them.\n    </div>\n    <div class=\"sc-hint\" *ngIf=\"view.geneMap && is3d\">\n      {{ geneMapVolumeNote }}\n    </div>\n  </div>\n\n  <!-- 3D only: the volume, the cloud and the density volumes occupy the same\n     space, so each hides the others. Independent toggles, because the useful\n     views are the combinations \u2014 the field alone, one section's cells over it,\n     the anatomy alone. -->\n  <div class=\"sc-section\" *ngIf=\"is3d\">\n    <span class=\"sc-lbl\">Show</span>\n    <!-- The reference volume is the Volume section's, the observations this section's own header\n       checkbox. -->\n    <!-- Only for data that really is sectioned; a continuous z has no sections\n       to step through. -->\n    <div class=\"sc-row\" *ngIf=\"view.showPoints && isSectioned\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"oneSection\"\n        (onChange)=\"onOneSection($event.checked)\"\n        label=\"One section at a time\"\n        pTooltip=\"Draw a single imaged section's cells, so the density volumes between the sections stay visible\"\n        tooltipPosition=\"top\"\n      ></p-checkbox>\n    </div>\n    <div class=\"sc-row\" *ngIf=\"view.showPoints && isSectioned && oneSection\">\n      <span class=\"sc-lbl\">Section</span>\n      <p-slider\n        [ngModel]=\"view.pointSection\"\n        [min]=\"0\"\n        [max]=\"lastSection\"\n        [step]=\"1\"\n        (onChange)=\"onPointSection($event.value)\"\n      ></p-slider>\n      <span class=\"sc-val\">{{ sectionLabel }}</span>\n    </div>\n  </div>\n\n  <div class=\"sc-section\" *ngIf=\"is3d\">\n    <div class=\"sc-row\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"view.densityVolume\"\n        (onChange)=\"onDensityVolume($event.checked)\"\n        label=\"Cluster density volumes\"\n        pTooltip=\"Raymarch each cluster as a smooth density field \u2014 an ESTIMATE between the imaged sections, not measured cells\"\n        tooltipPosition=\"top\"\n      ></p-checkbox>\n    </div>\n    <div class=\"sc-row\" *ngIf=\"view.densityVolume\">\n      <span class=\"sc-lbl\">Smoothing</span>\n      <p-slider\n        [ngModel]=\"view.densitySmoothing\"\n        [min]=\"0.5\"\n        [max]=\"4\"\n        [step]=\"0.5\"\n        (onChange)=\"onDensitySmoothing($event.value)\"\n      ></p-slider>\n      <span class=\"sc-val\">{{ view.densitySmoothing }}\u00D7</span>\n    </div>\n    <div class=\"sc-hint\" *ngIf=\"view.densityVolume\">{{ densityNote }}</div>\n  </div>\n\n  <!-- Continuous-only knobs: meaningless for a categorical palette. -->\n  <div class=\"sc-section\" *ngIf=\"isContinuous\">\n    <div class=\"sc-row\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"view.logScale\"\n        (onChange)=\"onLogScale($event.checked)\"\n        label=\"Log scale\"\n        pTooltip=\"Counts collapse against their outliers on a linear ramp\"\n        tooltipPosition=\"top\"\n      ></p-checkbox>\n    </div>\n    <div class=\"sc-row\">\n      <span class=\"sc-lbl\">Clip outliers</span>\n      <p-dropdown\n        [options]=\"clipOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [ngModel]=\"view.percentileClip\"\n        (ngModelChange)=\"onClip($event)\"\n        appendTo=\"body\"\n        pTooltip=\"Percentile the contrast window is taken at\"\n        tooltipPosition=\"top\"\n      ></p-dropdown>\n      <!-- Reserves the readout column this row has no readout for, so the\n         control's right edge lines up with every slider's. -->\n      <span class=\"sc-val\"></span>\n    </div>\n  </div>\n\n  <!-- A gene's icon in its colour: the button that opens its icon and colour picker. -->\n  <ng-template #geneMark let-g>\n    <button\n      type=\"button\"\n      class=\"sc-gene-icon\"\n      [style.color]=\"geneColorOf(g)\"\n      [attr.aria-label]=\"'Icon and colour for ' + g\"\n      pTooltip=\"Icon and colour\"\n      tooltipPosition=\"top\"\n      (click)=\"openGeneStyle($event, g, genePop)\"\n    >\n      <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\">\n        <polygon [attr.points]=\"glyphPointsOf(g)\"></polygon>\n      </svg>\n    </button>\n  </ng-template>\n  <p-overlayPanel #genePop styleClass=\"sc-gene-style\" appendTo=\"body\">\n    <ng-template pTemplate=\"content\">\n      <spatial-gene-style\n        *ngIf=\"styleGene as g\"\n        [gene]=\"g\"\n        what=\"Observation\"\n        [color]=\"geneColorOf(g)\"\n        [glyph]=\"geneGlyphOf(g)\"\n        iconHint=\"Icons show on the 2D observation markers.\"\n        (colorChange)=\"onGeneColor(g, $event)\"\n        (glyphChange)=\"onGeneGlyph(g, $event)\"\n        (resetStyle)=\"resetGeneStyle(g)\"\n      ></spatial-gene-style>\n    </ng-template>\n  </p-overlayPanel>\n</ng-container>\n", styles: [".sc-hint{font-size:.75rem;color:var(--text-color-secondary, #6c757d)}.sc-error{color:var(--red-600, #c62828)}.sc-section{display:flex;flex-direction:column;gap:.35rem}.sc-lbl{font-size:.78rem;color:var(--text-color-secondary, #6c757d);white-space:nowrap}.sc-row{display:flex;align-items:center;gap:.6rem}.sc-row p-slider,.sc-row p-dropdown,.sc-row p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row p-slider .p-slider{width:100%}:host ::ng-deep .sc-row p-dropdown .p-dropdown,:host ::ng-deep .sc-row p-treeSelect .p-treeselect{width:100%}.sc-row .sc-lbl{flex:0 0 calc(50% - .6rem);min-width:0;overflow:hidden;text-overflow:ellipsis}.sc-cmap-option{display:inline-flex;align-items:center;gap:.4rem}.sc-cmap-swatch{width:3.5rem;height:.7rem;border-radius:2px;display:block}.sc-val{flex:0 0 4rem;text-align:right;font-size:.78rem;font-variant-numeric:tabular-nums;white-space:nowrap}:host ::ng-deep .sc-full,:host ::ng-deep .sc-full .p-dropdown,:host ::ng-deep .sc-full .p-autocomplete,:host ::ng-deep .sc-full input{width:100%}.sc-colorbar{height:.75rem;border-radius:2px;border:1px solid rgba(0,0,0,.2)}.sc-colorbar-ends{display:flex;justify-content:space-between;font-size:.7rem;color:var(--text-color-secondary, #6c757d);margin-top:.2rem}.sc-panel{border:1px solid var(--surface-border, #dee2e6);border-radius:6px;margin-bottom:.5rem;overflow:hidden}.sc-panel-head{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--surface-100, #f5f6f7)}.sc-panel-head .sc-panel-title{flex:1;font-weight:600}.sc-panel.open>.sc-panel-head{background:var(--primary-color, #2196f3);color:var(--primary-color-text, #fff)}.sc-panel-body{display:flex;flex-direction:column;gap:.45rem;padding:.6rem .75rem .75rem}.sc-subhead{display:flex;align-items:center;gap:.5rem;margin-top:.4rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-color-secondary, #6c757d)}.sc-subhead:after{content:\"\";flex:1;border-top:1px solid var(--surface-border, #dee2e6)}.sc-subsection{display:flex;flex-direction:column;gap:.45rem}.sc-subsection-head{cursor:pointer;-webkit-user-select:none;user-select:none}.sc-subsection-head i{font-size:.65rem}.sc-subsection-head:hover .sc-subsection-title{color:var(--primary-color, #3b82f6)}.sc-subsection-body{display:flex;flex-direction:column;gap:.45rem;padding-left:.6rem;border-left:2px solid var(--surface-border, #dee2e6)}:host ::ng-deep .sc-buttons .p-button{padding:.35rem .75rem;font-size:.85rem}.sc-row-picker p-dropdown,.sc-row-picker p-multiSelect,.sc-row-picker p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row-picker .sc-variant{width:6.5rem}:host ::ng-deep .sc-row-picker p-multiselect .p-multiselect{width:100%}:host ::ng-deep .sc-row-picker p-dropdown:has(.sc-variant){flex:0 0 6.5rem}:host ::ng-deep .sc-row-picker p-treeselect:has(.sc-palette){flex:0 0 3rem}:host ::ng-deep .sc-palette .p-treeselect-label{width:0;padding:0}.sc-icon-btn{flex:0 0 auto;border:0;background:transparent;cursor:pointer;padding:.25rem .35rem;font:inherit;font-size:1.05rem;color:var(--text-color, #333);border-radius:4px}.sc-icon-btn:hover{background:var(--surface-200, #e9ecef)}.sc-icon-btn.active{color:var(--primary-color, #2196f3);font-weight:700}.sc-icon-btn:disabled{opacity:.5;cursor:default}.sc-small-btn{margin-left:auto;border:1px solid var(--surface-border, #ced4da);background:var(--surface-0, #fff);border-radius:4px;padding:.2rem .6rem;font:inherit;font-size:.8rem;cursor:pointer}:host ::ng-deep .sc-group-heading{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.7}.sc-group-list,.sc-gene-tree{max-height:16rem;overflow-y:auto;border:1px solid var(--surface-border, #dee2e6);border-radius:4px;padding:.25rem .4rem}.sc-group-row,.sc-gene-row{display:flex;align-items:center;gap:.45rem;padding:.15rem 0;font-size:.88rem}.sc-group-row .sc-group-label,.sc-gene-row .sc-group-label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-group-all,.sc-gene-root,.sc-gene-group{font-weight:600}.sc-group-all .sc-icon-btn,.sc-gene-root .sc-icon-btn,.sc-gene-group .sc-icon-btn{margin-left:auto;font-size:.85rem}.sc-count{flex:0 0 auto;font-size:.78rem;color:var(--text-color-secondary, #6c757d)}.sc-glyph-option{display:inline-flex;align-items:center;gap:.4rem}.sc-glyph-svg{width:1rem;height:1rem;fill:currentColor}:host ::ng-deep .sc-glyph-pick .p-dropdown-label{padding:.2rem .4rem}.sc-color-input{width:2.5rem;height:1.8rem;border:1px solid var(--surface-border, #ced4da);border-radius:4px;padding:0;background:none}.sc-row-number p-slider,.sc-row-range p-slider{flex:1 1 0;min-width:0}:host ::ng-deep .sc-num{width:4.5rem;padding:.3rem .4rem;text-align:center}:host ::ng-deep .sc-row-number p-inputnumber,:host ::ng-deep .sc-row-range p-inputnumber{flex:0 0 auto}.sc-gene-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1.4rem;height:1.4rem;padding:0;border:1px solid transparent;border-radius:4px;background:transparent;cursor:pointer}.sc-gene-icon:hover,.sc-gene-icon:focus-visible{border-color:var(--surface-border, rgba(0, 0, 0, .2))}.sc-seltx-toggle{width:100%;padding:0;background:none;border:0;cursor:pointer;font-family:inherit;text-align:left}.sc-seltx-toggle i{font-size:.65rem}.sc-seltx-toggle:hover{color:var(--primary-color, #3b82f6)}.sc-seltx{display:flex;flex-direction:column;gap:.35rem}.sc-seltx-head{display:flex;align-items:baseline;gap:.5rem;min-width:0}.sc-seltx-label{font-size:.82rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-seltx-summary{display:flex;align-items:center;justify-content:space-between;font-size:.78rem}.sc-seltx-list{list-style:none;margin:0;padding:0;max-height:16rem;overflow-y:auto;font-size:.78rem}.sc-seltx-list.stale{opacity:.55}.sc-seltx-list li{display:grid;grid-template-columns:minmax(4rem,7rem) 1fr auto;align-items:center;gap:.5rem;padding:.1rem 0}.sc-seltx-gene{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-seltx-bar{height:.45rem;border-radius:2px;background:var(--surface-200, #e9ecef);overflow:hidden}.sc-seltx-bar span{display:block;height:100%;background:var(--primary-color, #3b82f6)}.sc-seltx-count{font-variant-numeric:tabular-nums;text-align:right;min-width:3rem}.sc-seltx-swatch{display:inline-block;width:.6rem;height:.6rem;margin-right:.35rem;border-radius:2px;vertical-align:baseline}.sc-seltx-measures{display:grid;grid-template-columns:minmax(4rem,1fr) auto;gap:.1rem .75rem;margin:0;font-size:.78rem}.sc-seltx-measures dt{color:var(--text-color-secondary, #6c757d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-seltx-measures dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}:host{display:contents}.sc-obs-genes{display:flex;flex-direction:column;gap:.15rem;margin-top:.35rem}.sc-obs-gene-row,.sc-obs-gene-option{display:flex;align-items:center;gap:.4rem;min-width:0}.sc-obs-gene-option{flex:1 1 auto;justify-content:space-between}.sc-obs-gene-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$2.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i5$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "autoShowPanelOnPrintableCharacterKeyDown", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i3$2.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i10.OverlayPanel, selector: "p-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i4$3.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: SliderModule }, { kind: "component", type: i2$1.Slider, selector: "p-slider", inputs: ["animate", "disabled", "min", "max", "orientation", "step", "range", "style", "styleClass", "ariaLabel", "ariaLabelledBy", "tabindex", "autofocus"], outputs: ["onChange", "onSlideEnd"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.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: SpatialColorByComponent, selector: "spatial-color-by", inputs: ["controls", "dataset", "view", "genes", "legend", "colorBarCss", "selectedCategory", "colormapOptions"], outputs: ["categoryClicked"] }, { kind: "component", type: SpatialGeneStyleComponent, selector: "spatial-gene-style", inputs: ["gene", "what", "color", "glyph", "iconHint", "showIcons"], outputs: ["colorChange", "glyphChange", "resetStyle"] }, { kind: "component", type: SpatialSelectionObservationsComponent, selector: "spatial-selection-observations", inputs: ["controls", "is3d"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: SpatialObservationsPanelComponent, isStandalone: true, selector: "spatial-observations-panel", inputs: { controls: "controls", dataset: "dataset", view: "view", genes: "genes", legend: "legend", colorBarCss: "colorBarCss", selection: "selection", selectedCategory: "selectedCategory", colormapOptions: "colormapOptions", is3d: "is3d", open: "open", cellsAvailable: "cellsAvailable" }, outputs: { openChange: "openChange", categoryClicked: "categoryClicked" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"dataset as ds\">\n  <!-- Observations: one marker per observation (cell centroid, Visium spot), and what\n     colours them. The lead section for datasets without cell outlines. -->\n  <div class=\"sc-panel\" [class.open]=\"open\">\n    <div class=\"sc-panel-head\" (click)=\"openChange.emit(!open)\">\n      <!-- Shows or hides the observations, as whichever the toggle below shows them as. -->\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"observationsShown\"\n        (click)=\"$event.stopPropagation()\"\n        (onChange)=\"onShowObservations($event.checked)\"\n        pTooltip=\"Show the observations\"\n        tooltipPosition=\"top\"\n      ></p-checkbox>\n      <span class=\"sc-panel-title\">Observations</span>\n      <i class=\"pi\" [class.pi-chevron-down]=\"open\" [class.pi-chevron-right]=\"!open\"></i>\n    </div>\n    <div class=\"sc-panel-body\" *ngIf=\"open\">\n      <!-- With a cell segmentation: shown as the markers OR as the cells' own shapes, one at a time.\n           One colouring for either, below. -->\n      <div class=\"sc-row sc-show-as\" *ngIf=\"cellsAvailable\">\n        <span class=\"sc-lbl\">Show as</span>\n        <p-selectButton\n          [options]=\"showAsOptions\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [ngModel]=\"shownAs\"\n          (ngModelChange)=\"onShownAs($event)\"\n          [allowEmpty]=\"false\"\n          styleClass=\"sc-buttons\"\n        ></p-selectButton>\n      </div>\n\n      <spatial-color-by\n        [controls]=\"controls\"\n        [dataset]=\"ds\"\n        [view]=\"view\"\n        [genes]=\"genes\"\n        [legend]=\"legend\"\n        [colorBarCss]=\"colorBarCss\"\n        [selectedCategory]=\"selectedCategory\"\n        [colormapOptions]=\"colormapOptions\"\n        (categoryClicked)=\"categoryClicked.emit($event)\"\n      ></spatial-color-by>\n\n      <ng-container *ngIf=\"genes?.state$ | async as gene\">\n        <!-- Which observations are drawn at all, by what they express. Several genes at\n        once, unlike the colour, which reads one: picking genes here hides every\n        observation that expresses none of them (or not all of them), and by default\n        colours (and, in 2D, marks) each drawn one by its gene. -->\n        <div class=\"sc-section\" *ngIf=\"ds.features\">\n          <label class=\"sc-lbl\" for=\"sc-show-genes\">Show observations expressing</label>\n          <p-multiSelect\n            inputId=\"sc-show-genes\"\n            [options]=\"gene.options\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            [ngModel]=\"view.observationGenes\"\n            (onChange)=\"onObservationGenes($event.value)\"\n            [filter]=\"true\"\n            filterBy=\"label\"\n            [resetFilterOnHide]=\"true\"\n            (onFilter)=\"genes?.onFilter($event.filter)\"\n            (onPanelShow)=\"genes?.ensureList()\"\n            [virtualScroll]=\"gene.options.length > geneVirtualScrollFrom\"\n            [virtualScrollItemSize]=\"30\"\n            [showToggleAll]=\"false\"\n            [showClear]=\"true\"\n            [emptyFilterMessage]=\"gene.remote ? 'No match \u2014 keep typing' : 'No match'\"\n            [emptyMessage]=\"gene.remote ? 'Type to search genes' : 'No genes'\"\n            appendTo=\"body\"\n            placeholder=\"Any gene (every observation)\"\n            [selectedItemsLabel]=\"'{0} genes'\"\n            [maxSelectedLabels]=\"3\"\n            styleClass=\"sc-full\"\n          >\n            <!-- A picked gene shows its icon in its colour; clicking it edits them. -->\n            <ng-template let-option pTemplate=\"item\">\n              <div class=\"sc-obs-gene-option\">\n                <span class=\"sc-obs-gene-name\">{{ option.label }}</span>\n                <ng-container *ngIf=\"isObservationGene(option.value)\">\n                  <ng-container *ngTemplateOutlet=\"geneMark; context: { $implicit: option.value }\"></ng-container>\n                </ng-container>\n              </div>\n            </ng-template>\n          </p-multiSelect>\n          <p-selectButton\n            *ngIf=\"view.observationGenes.length > 1\"\n            [options]=\"matchOptions\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            [ngModel]=\"view.observationGenesMatch\"\n            (ngModelChange)=\"onObservationGenesMatch($event)\"\n            [allowEmpty]=\"false\"\n            styleClass=\"sc-buttons\"\n          ></p-selectButton>\n          <!-- The picked genes: each one's icon and colour (click to edit), and a way out. -->\n          <div class=\"sc-obs-genes\" *ngIf=\"view.observationGenes.length\">\n            <div class=\"sc-obs-gene-row\" *ngFor=\"let g of view.observationGenes; trackBy: trackByGene\">\n              <ng-container *ngTemplateOutlet=\"geneMark; context: { $implicit: g }\"></ng-container>\n              <span class=\"sc-obs-gene-name\">{{ g }}</span>\n              <button\n                type=\"button\"\n                class=\"sc-icon-btn\"\n                [attr.aria-label]=\"'Stop showing ' + g\"\n                pTooltip=\"Remove\"\n                tooltipPosition=\"top\"\n                (click)=\"removeObservationGene(g)\"\n              >\n                <i class=\"pi pi-times\"></i>\n              </button>\n            </div>\n          </div>\n          <div class=\"sc-row\" *ngIf=\"view.observationGenes.length\">\n            <p-checkbox\n              [binary]=\"true\"\n              [ngModel]=\"view.observationGenesColorBy\"\n              (onChange)=\"onObservationGenesColorBy($event.checked)\"\n              label=\"Colour by these genes\"\n              pTooltip=\"Each observation in the colour (and, in 2D, the icon) of the picked gene it expresses most, relative to that gene's highest value. Off, Colour by applies.\"\n              tooltipPosition=\"top\"\n            ></p-checkbox>\n          </div>\n          <small class=\"sc-hint\" *ngIf=\"view.observationGenes.length\">{{ geneFilterHint }}</small>\n          <!-- The filter is never dropped silently: a failed expression read keeps the observations\n                as they were drawn, and says so. -->\n          <small class=\"sc-hint sc-error\" *ngIf=\"view.observationGenes.length && (geneFilterFailed$ | async)\">\n            The expression of the picked genes could not be read, so the observations still show the previous\n            filter.\n            <a href=\"\" (click)=\"$event.preventDefault(); retryGeneFilter()\">Try again</a>\n          </small>\n        </div>\n      </ng-container>\n\n      <!-- Markers: how they are drawn. -->\n      <ng-container *ngIf=\"!cellsAvailable || shownAs === 'markers'\">\n        <div class=\"sc-subhead\">Markers</div>\n        <div class=\"sc-section\">\n          <div class=\"sc-row\">\n            <span class=\"sc-lbl\">Point size</span>\n            <p-slider\n              [ngModel]=\"view.pointScale\"\n              [min]=\"0.25\"\n              [max]=\"5\"\n              [step]=\"0.25\"\n              (onChange)=\"onPointScale($event.value)\"\n            ></p-slider>\n            <span class=\"sc-val\">{{ view.pointScale }}\u00D7</span>\n          </div>\n          <div class=\"sc-row\">\n            <span class=\"sc-lbl\">Opacity</span>\n            <p-slider\n              [ngModel]=\"view.opacity\"\n              [min]=\"0.1\"\n              [max]=\"1\"\n              [step]=\"0.05\"\n              (onChange)=\"onOpacity($event.value)\"\n            ></p-slider>\n            <span class=\"sc-val\">{{ view.opacity }}</span>\n          </div>\n        </div>\n      </ng-container>\n\n      <!-- Cell segmentations: how the cells are drawn, projected by the dialog. -->\n      <ng-container *ngIf=\"cellsAvailable && shownAs === 'cells'\">\n        <ng-content select=\"spatial-cells-panel\"></ng-content>\n      </ng-container>\n\n      <!-- The selected cell's (or cell type's, or region's) observations, by group: through the\n           volume in 3D, on the plane shown in 2D. -->\n      <spatial-selection-observations [controls]=\"controls\" [is3d]=\"is3d\"></spatial-selection-observations>\n    </div>\n  </div>\n\n  <!-- Only for a gene: the map draws that gene's expression as a field. In 2D\n     it goes under the cells of the displayed plane; in 3D it is one sheet per\n     imaged section, optionally smoothed along z into a volume. -->\n  <div class=\"sc-section\" *ngIf=\"canMapGene\">\n    <div class=\"sc-row\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"view.geneMap\"\n        (onChange)=\"onGeneMap($event.checked)\"\n        label=\"Gene map (expression field)\"\n        [pTooltip]=\"\n          is3d\n            ? 'Draw this gene\\'s expression as one field per imaged section \u2014 an estimate between the cells, empty where nothing was measured'\n            : 'Draw this gene\\'s expression as a smooth field UNDER the cells \u2014 an estimate between them, transparent where nothing was measured'\n        \"\n        tooltipPosition=\"top\"\n      ></p-checkbox>\n    </div>\n    <!-- 3D only: interpolating along z turns the measured sheets into an\n       estimate, so it is its own decision and its own label. -->\n    <div class=\"sc-row\" *ngIf=\"view.geneMap && is3d\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"view.geneMapVolume\"\n        (onChange)=\"onGeneMapVolume($event.checked)\"\n        label=\"Volume rendering (interpolate along z)\"\n        pTooltip=\"Smooth the per-section fields into a continuous volume \u2014 an ESTIMATE between the imaged sections, not measured tissue\"\n        tooltipPosition=\"top\"\n      ></p-checkbox>\n    </div>\n    <!-- Meaningless while interpolating: a volume built from one section would\n       smear that slide through the specimen's whole depth. -->\n    <div class=\"sc-row\" *ngIf=\"view.geneMap && is3d && isSectioned && !view.geneMapVolume\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"geneMapOneSection\"\n        (onChange)=\"onGeneMapOneSection($event.checked)\"\n        label=\"One map section at a time\"\n        pTooltip=\"Draw a single imaged section's field instead of the whole stack of sheets\"\n        tooltipPosition=\"top\"\n      ></p-checkbox>\n    </div>\n    <div class=\"sc-row\" *ngIf=\"view.geneMap && is3d && isSectioned && !view.geneMapVolume && geneMapOneSection\">\n      <span class=\"sc-lbl\">Map section</span>\n      <p-slider\n        [ngModel]=\"view.geneMapSection\"\n        [min]=\"0\"\n        [max]=\"lastSection\"\n        [step]=\"1\"\n        (onChange)=\"onGeneMapSection($event.value)\"\n      ></p-slider>\n      <span class=\"sc-val\">{{ geneMapSectionLabel }}</span>\n    </div>\n    <div class=\"sc-row\" *ngIf=\"view.geneMap\">\n      <span class=\"sc-lbl\">Smoothing</span>\n      <p-slider\n        [ngModel]=\"view.geneMapSmoothing\"\n        [min]=\"0.5\"\n        [max]=\"4\"\n        [step]=\"0.5\"\n        (onChange)=\"onGeneMapSmoothing($event.value)\"\n      ></p-slider>\n      <span class=\"sc-val\">{{ view.geneMapSmoothing }}\u00D7</span>\n    </div>\n    <div class=\"sc-row\" *ngIf=\"view.geneMap\">\n      <span class=\"sc-lbl\">Map opacity</span>\n      <p-slider\n        [ngModel]=\"view.geneMapOpacity\"\n        [min]=\"0.1\"\n        [max]=\"1\"\n        [step]=\"0.05\"\n        (onChange)=\"onGeneMapOpacity($event.value)\"\n      ></p-slider>\n      <span class=\"sc-val\">{{ view.geneMapOpacity }}</span>\n    </div>\n    <div class=\"sc-hint\" *ngIf=\"view.geneMap && !is3d\">\n      Kernel-weighted mean per cell, not a sum \u2014 so a crowded region does not glow for being crowded. Transparent\n      where no cell was measured. Turn the cells' own Opacity down to read the field under them.\n    </div>\n    <div class=\"sc-hint\" *ngIf=\"view.geneMap && is3d\">\n      {{ geneMapVolumeNote }}\n    </div>\n  </div>\n\n  <!-- 3D only: the volume, the cloud and the density volumes occupy the same\n     space, so each hides the others. Independent toggles, because the useful\n     views are the combinations \u2014 the field alone, one section's cells over it,\n     the anatomy alone. -->\n  <div class=\"sc-section\" *ngIf=\"is3d\">\n    <span class=\"sc-lbl\">Show</span>\n    <!-- The reference volume is the Volume section's, the observations this section's own header\n       checkbox. -->\n    <!-- Only for data that really is sectioned; a continuous z has no sections\n       to step through. -->\n    <div class=\"sc-row\" *ngIf=\"view.showPoints && isSectioned\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"oneSection\"\n        (onChange)=\"onOneSection($event.checked)\"\n        label=\"One section at a time\"\n        pTooltip=\"Draw a single imaged section's cells, so the density volumes between the sections stay visible\"\n        tooltipPosition=\"top\"\n      ></p-checkbox>\n    </div>\n    <div class=\"sc-row\" *ngIf=\"view.showPoints && isSectioned && oneSection\">\n      <span class=\"sc-lbl\">Section</span>\n      <p-slider\n        [ngModel]=\"view.pointSection\"\n        [min]=\"0\"\n        [max]=\"lastSection\"\n        [step]=\"1\"\n        (onChange)=\"onPointSection($event.value)\"\n      ></p-slider>\n      <span class=\"sc-val\">{{ sectionLabel }}</span>\n    </div>\n  </div>\n\n  <div class=\"sc-section\" *ngIf=\"is3d\">\n    <div class=\"sc-row\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"view.densityVolume\"\n        (onChange)=\"onDensityVolume($event.checked)\"\n        label=\"Cluster density volumes\"\n        pTooltip=\"Raymarch each cluster as a smooth density field \u2014 an ESTIMATE between the imaged sections, not measured cells\"\n        tooltipPosition=\"top\"\n      ></p-checkbox>\n    </div>\n    <div class=\"sc-row\" *ngIf=\"view.densityVolume\">\n      <span class=\"sc-lbl\">Smoothing</span>\n      <p-slider\n        [ngModel]=\"view.densitySmoothing\"\n        [min]=\"0.5\"\n        [max]=\"4\"\n        [step]=\"0.5\"\n        (onChange)=\"onDensitySmoothing($event.value)\"\n      ></p-slider>\n      <span class=\"sc-val\">{{ view.densitySmoothing }}\u00D7</span>\n    </div>\n    <div class=\"sc-hint\" *ngIf=\"view.densityVolume\">{{ densityNote }}</div>\n  </div>\n\n  <!-- Continuous-only knobs: meaningless for a categorical palette. -->\n  <div class=\"sc-section\" *ngIf=\"isContinuous\">\n    <div class=\"sc-row\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"view.logScale\"\n        (onChange)=\"onLogScale($event.checked)\"\n        label=\"Log scale\"\n        pTooltip=\"Counts collapse against their outliers on a linear ramp\"\n        tooltipPosition=\"top\"\n      ></p-checkbox>\n    </div>\n    <div class=\"sc-row\">\n      <span class=\"sc-lbl\">Clip outliers</span>\n      <p-dropdown\n        [options]=\"clipOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [ngModel]=\"view.percentileClip\"\n        (ngModelChange)=\"onClip($event)\"\n        appendTo=\"body\"\n        pTooltip=\"Percentile the contrast window is taken at\"\n        tooltipPosition=\"top\"\n      ></p-dropdown>\n      <!-- Reserves the readout column this row has no readout for, so the\n         control's right edge lines up with every slider's. -->\n      <span class=\"sc-val\"></span>\n    </div>\n  </div>\n\n  <!-- A gene's icon in its colour: the button that opens its icon and colour picker. -->\n  <ng-template #geneMark let-g>\n    <button\n      type=\"button\"\n      class=\"sc-gene-icon\"\n      [style.color]=\"geneColorOf(g)\"\n      [attr.aria-label]=\"'Icon and colour for ' + g\"\n      pTooltip=\"Icon and colour\"\n      tooltipPosition=\"top\"\n      (click)=\"openGeneStyle($event, g, genePop)\"\n    >\n      <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\">\n        <polygon [attr.points]=\"glyphPointsOf(g)\"></polygon>\n      </svg>\n    </button>\n  </ng-template>\n  <p-overlayPanel #genePop styleClass=\"sc-gene-style\" appendTo=\"body\">\n    <ng-template pTemplate=\"content\">\n      <spatial-gene-style\n        *ngIf=\"styleGene as g\"\n        [gene]=\"g\"\n        what=\"Observation\"\n        [color]=\"geneColorOf(g)\"\n        [glyph]=\"geneGlyphOf(g)\"\n        iconHint=\"Icons show on the 2D observation markers.\"\n        (colorChange)=\"onGeneColor(g, $event)\"\n        (glyphChange)=\"onGeneGlyph(g, $event)\"\n        (resetStyle)=\"resetGeneStyle(g)\"\n      ></spatial-gene-style>\n    </ng-template>\n  </p-overlayPanel>\n</ng-container>\n", styles: [".sc-hint{font-size:.75rem;color:var(--text-color-secondary, #6c757d)}.sc-error{color:var(--red-600, #c62828)}.sc-section{display:flex;flex-direction:column;gap:.35rem}.sc-lbl{font-size:.78rem;color:var(--text-color-secondary, #6c757d);white-space:nowrap}.sc-row{display:flex;align-items:center;gap:.6rem}.sc-row p-slider,.sc-row p-dropdown,.sc-row p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row p-slider .p-slider{width:100%}:host ::ng-deep .sc-row p-dropdown .p-dropdown,:host ::ng-deep .sc-row p-treeSelect .p-treeselect{width:100%}.sc-row .sc-lbl{flex:0 0 calc(50% - .6rem);min-width:0;overflow:hidden;text-overflow:ellipsis}.sc-cmap-option{display:inline-flex;align-items:center;gap:.4rem}.sc-cmap-swatch{width:3.5rem;height:.7rem;border-radius:2px;display:block}.sc-val{flex:0 0 4rem;text-align:right;font-size:.78rem;font-variant-numeric:tabular-nums;white-space:nowrap}:host ::ng-deep .sc-full,:host ::ng-deep .sc-full .p-dropdown,:host ::ng-deep .sc-full .p-autocomplete,:host ::ng-deep .sc-full input{width:100%}.sc-colorbar{height:.75rem;border-radius:2px;border:1px solid rgba(0,0,0,.2)}.sc-colorbar-ends{display:flex;justify-content:space-between;font-size:.7rem;color:var(--text-color-secondary, #6c757d);margin-top:.2rem}.sc-panel{border:1px solid var(--surface-border, #dee2e6);border-radius:6px;margin-bottom:.5rem;overflow:hidden}.sc-panel-head{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--surface-100, #f5f6f7)}.sc-panel-head .sc-panel-title{flex:1;font-weight:600}.sc-panel.open>.sc-panel-head{background:var(--primary-color, #2196f3);color:var(--primary-color-text, #fff)}.sc-panel-body{display:flex;flex-direction:column;gap:.45rem;padding:.6rem .75rem .75rem}.sc-subhead{display:flex;align-items:center;gap:.5rem;margin-top:.4rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-color-secondary, #6c757d)}.sc-subhead:after{content:\"\";flex:1;border-top:1px solid var(--surface-border, #dee2e6)}.sc-subsection{display:flex;flex-direction:column;gap:.45rem}.sc-subsection-head{cursor:pointer;-webkit-user-select:none;user-select:none}.sc-subsection-head i{font-size:.65rem}.sc-subsection-head:hover .sc-subsection-title{color:var(--primary-color, #3b82f6)}.sc-subsection-body{display:flex;flex-direction:column;gap:.45rem;padding-left:.6rem;border-left:2px solid var(--surface-border, #dee2e6)}:host ::ng-deep .sc-buttons .p-button{padding:.35rem .75rem;font-size:.85rem}.sc-row-picker p-dropdown,.sc-row-picker p-multiSelect,.sc-row-picker p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row-picker .sc-variant{width:6.5rem}:host ::ng-deep .sc-row-picker p-multiselect .p-multiselect{width:100%}:host ::ng-deep .sc-row-picker p-dropdown:has(.sc-variant){flex:0 0 6.5rem}:host ::ng-deep .sc-row-picker p-treeselect:has(.sc-palette){flex:0 0 3rem}:host ::ng-deep .sc-palette .p-treeselect-label{width:0;padding:0}.sc-icon-btn{flex:0 0 auto;border:0;background:transparent;cursor:pointer;padding:.25rem .35rem;font:inherit;font-size:1.05rem;color:var(--text-color, #333);border-radius:4px}.sc-icon-btn:hover{background:var(--surface-200, #e9ecef)}.sc-icon-btn.active{color:var(--primary-color, #2196f3);font-weight:700}.sc-icon-btn:disabled{opacity:.5;cursor:default}.sc-small-btn{margin-left:auto;border:1px solid var(--surface-border, #ced4da);background:var(--surface-0, #fff);border-radius:4px;padding:.2rem .6rem;font:inherit;font-size:.8rem;cursor:pointer}:host ::ng-deep .sc-group-heading{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.7}.sc-group-list,.sc-gene-tree{max-height:16rem;overflow-y:auto;border:1px solid var(--surface-border, #dee2e6);border-radius:4px;padding:.25rem .4rem}.sc-group-row,.sc-gene-row{display:flex;align-items:center;gap:.45rem;padding:.15rem 0;font-size:.88rem}.sc-group-row .sc-group-label,.sc-gene-row .sc-group-label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-group-all,.sc-gene-root,.sc-gene-group{font-weight:600}.sc-group-all .sc-icon-btn,.sc-gene-root .sc-icon-btn,.sc-gene-group .sc-icon-btn{margin-left:auto;font-size:.85rem}.sc-count{flex:0 0 auto;font-size:.78rem;color:var(--text-color-secondary, #6c757d)}.sc-glyph-option{display:inline-flex;align-items:center;gap:.4rem}.sc-glyph-svg{width:1rem;height:1rem;fill:currentColor}:host ::ng-deep .sc-glyph-pick .p-dropdown-label{padding:.2rem .4rem}.sc-color-input{width:2.5rem;height:1.8rem;border:1px solid var(--surface-border, #ced4da);border-radius:4px;padding:0;background:none}.sc-row-number p-slider,.sc-row-range p-slider{flex:1 1 0;min-width:0}:host ::ng-deep .sc-num{width:4.5rem;padding:.3rem .4rem;text-align:center}:host ::ng-deep .sc-row-number p-inputnumber,:host ::ng-deep .sc-row-range p-inputnumber{flex:0 0 auto}.sc-gene-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1.4rem;height:1.4rem;padding:0;border:1px solid transparent;border-radius:4px;background:transparent;cursor:pointer}.sc-gene-icon:hover,.sc-gene-icon:focus-visible{border-color:var(--surface-border, rgba(0, 0, 0, .2))}.sc-seltx-toggle{width:100%;padding:0;background:none;border:0;cursor:pointer;font-family:inherit;text-align:left}.sc-seltx-toggle i{font-size:.65rem}.sc-seltx-toggle:hover{color:var(--primary-color, #3b82f6)}.sc-seltx{display:flex;flex-direction:column;gap:.35rem}.sc-seltx-head{display:flex;align-items:baseline;gap:.5rem;min-width:0}.sc-seltx-label{font-size:.82rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-seltx-summary{display:flex;align-items:center;justify-content:space-between;font-size:.78rem}.sc-seltx-list{list-style:none;margin:0;padding:0;max-height:16rem;overflow-y:auto;font-size:.78rem}.sc-seltx-list.stale{opacity:.55}.sc-seltx-list li{display:grid;grid-template-columns:minmax(4rem,7rem) 1fr auto;align-items:center;gap:.5rem;padding:.1rem 0}.sc-seltx-gene{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-seltx-bar{height:.45rem;border-radius:2px;background:var(--surface-200, #e9ecef);overflow:hidden}.sc-seltx-bar span{display:block;height:100%;background:var(--primary-color, #3b82f6)}.sc-seltx-count{font-variant-numeric:tabular-nums;text-align:right;min-width:3rem}.sc-seltx-swatch{display:inline-block;width:.6rem;height:.6rem;margin-right:.35rem;border-radius:2px;vertical-align:baseline}.sc-seltx-measures{display:grid;grid-template-columns:minmax(4rem,1fr) auto;gap:.1rem .75rem;margin:0;font-size:.78rem}.sc-seltx-measures dt{color:var(--text-color-secondary, #6c757d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-seltx-measures dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}:host{display:contents}.sc-obs-genes{display:flex;flex-direction:column;gap:.15rem;margin-top:.35rem}.sc-obs-gene-row,.sc-obs-gene-option{display:flex;align-items:center;gap:.4rem;min-width:0}.sc-obs-gene-option{flex:1 1 auto;justify-content:space-between}.sc-obs-gene-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-show-as .sc-lbl{flex:0 0 auto}:host ::ng-deep .sc-show-as .p-selectbutton{display:flex;flex-wrap:nowrap}:host ::ng-deep .sc-show-as .p-button{white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$2.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i5$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "autoShowPanelOnPrintableCharacterKeyDown", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i3$2.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i10.OverlayPanel, selector: "p-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i4$3.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: SliderModule }, { kind: "component", type: i2$1.Slider, selector: "p-slider", inputs: ["animate", "disabled", "min", "max", "orientation", "step", "range", "style", "styleClass", "ariaLabel", "ariaLabelledBy", "tabindex", "autofocus"], outputs: ["onChange", "onSlideEnd"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.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: SpatialColorByComponent, selector: "spatial-color-by", inputs: ["controls", "dataset", "view", "genes", "legend", "colorBarCss", "selectedCategory", "colormapOptions"], outputs: ["categoryClicked"] }, { kind: "component", type: SpatialGeneStyleComponent, selector: "spatial-gene-style", inputs: ["gene", "what", "color", "glyph", "iconHint", "showIcons"], outputs: ["colorChange", "glyphChange", "resetStyle"] }, { kind: "component", type: SpatialSelectionObservationsComponent, selector: "spatial-selection-observations", inputs: ["controls", "is3d"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SpatialObservationsPanelComponent, decorators: [{
             type: Component,
@@ -25505,7 +25505,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
                         SpatialColorByComponent,
                         SpatialGeneStyleComponent,
                         SpatialSelectionObservationsComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"dataset as ds\">\n  <!-- Observations: one marker per observation (cell centroid, Visium spot), and what\n     colours them. The lead section for datasets without cell outlines. -->\n  <div class=\"sc-panel\" [class.open]=\"open\">\n    <div class=\"sc-panel-head\" (click)=\"openChange.emit(!open)\">\n      <!-- Shows or hides the observations, as whichever the toggle below shows them as. -->\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"observationsShown\"\n        (click)=\"$event.stopPropagation()\"\n        (onChange)=\"onShowObservations($event.checked)\"\n        pTooltip=\"Show the observations\"\n        tooltipPosition=\"top\"\n      ></p-checkbox>\n      <span class=\"sc-panel-title\">Observations</span>\n      <i class=\"pi\" [class.pi-chevron-down]=\"open\" [class.pi-chevron-right]=\"!open\"></i>\n    </div>\n    <div class=\"sc-panel-body\" *ngIf=\"open\">\n      <!-- With a cell segmentation: shown as the markers OR as the cells' own shapes, one at a time.\n           One colouring for either, below. -->\n      <div class=\"sc-row sc-show-as\" *ngIf=\"cellsAvailable\">\n        <span class=\"sc-lbl\">Show as</span>\n        <p-selectButton\n          [options]=\"showAsOptions\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [ngModel]=\"shownAs\"\n          (ngModelChange)=\"onShownAs($event)\"\n          [allowEmpty]=\"false\"\n          styleClass=\"sc-buttons\"\n        ></p-selectButton>\n      </div>\n\n      <spatial-color-by\n        [controls]=\"controls\"\n        [dataset]=\"ds\"\n        [view]=\"view\"\n        [genes]=\"genes\"\n        [legend]=\"legend\"\n        [colorBarCss]=\"colorBarCss\"\n        [selectedCategory]=\"selectedCategory\"\n        [colormapOptions]=\"colormapOptions\"\n        (categoryClicked)=\"categoryClicked.emit($event)\"\n      ></spatial-color-by>\n\n      <ng-container *ngIf=\"genes?.state$ | async as gene\">\n        <!-- Which observations are drawn at all, by what they express. Several genes at\n        once, unlike the colour, which reads one: picking genes here hides every\n        observation that expresses none of them (or not all of them), and by default\n        colours (and, in 2D, marks) each drawn one by its gene. -->\n        <div class=\"sc-section\" *ngIf=\"ds.features\">\n          <label class=\"sc-lbl\" for=\"sc-show-genes\">Show observations expressing</label>\n          <p-multiSelect\n            inputId=\"sc-show-genes\"\n            [options]=\"gene.options\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            [ngModel]=\"view.observationGenes\"\n            (onChange)=\"onObservationGenes($event.value)\"\n            [filter]=\"true\"\n            filterBy=\"label\"\n            [resetFilterOnHide]=\"true\"\n            (onFilter)=\"genes?.onFilter($event.filter)\"\n            (onPanelShow)=\"genes?.ensureList()\"\n            [virtualScroll]=\"gene.options.length > geneVirtualScrollFrom\"\n            [virtualScrollItemSize]=\"30\"\n            [showToggleAll]=\"false\"\n            [showClear]=\"true\"\n            [emptyFilterMessage]=\"gene.remote ? 'No match \u2014 keep typing' : 'No match'\"\n            [emptyMessage]=\"gene.remote ? 'Type to search genes' : 'No genes'\"\n            appendTo=\"body\"\n            placeholder=\"Any gene (every observation)\"\n            [selectedItemsLabel]=\"'{0} genes'\"\n            [maxSelectedLabels]=\"3\"\n            styleClass=\"sc-full\"\n          >\n            <!-- A picked gene shows its icon in its colour; clicking it edits them. -->\n            <ng-template let-option pTemplate=\"item\">\n              <div class=\"sc-obs-gene-option\">\n                <span class=\"sc-obs-gene-name\">{{ option.label }}</span>\n                <ng-container *ngIf=\"isObservationGene(option.value)\">\n                  <ng-container *ngTemplateOutlet=\"geneMark; context: { $implicit: option.value }\"></ng-container>\n                </ng-container>\n              </div>\n            </ng-template>\n          </p-multiSelect>\n          <p-selectButton\n            *ngIf=\"view.observationGenes.length > 1\"\n            [options]=\"matchOptions\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            [ngModel]=\"view.observationGenesMatch\"\n            (ngModelChange)=\"onObservationGenesMatch($event)\"\n            [allowEmpty]=\"false\"\n            styleClass=\"sc-buttons\"\n          ></p-selectButton>\n          <!-- The picked genes: each one's icon and colour (click to edit), and a way out. -->\n          <div class=\"sc-obs-genes\" *ngIf=\"view.observationGenes.length\">\n            <div class=\"sc-obs-gene-row\" *ngFor=\"let g of view.observationGenes; trackBy: trackByGene\">\n              <ng-container *ngTemplateOutlet=\"geneMark; context: { $implicit: g }\"></ng-container>\n              <span class=\"sc-obs-gene-name\">{{ g }}</span>\n              <button\n                type=\"button\"\n                class=\"sc-icon-btn\"\n                [attr.aria-label]=\"'Stop showing ' + g\"\n                pTooltip=\"Remove\"\n                tooltipPosition=\"top\"\n                (click)=\"removeObservationGene(g)\"\n              >\n                <i class=\"pi pi-times\"></i>\n              </button>\n            </div>\n          </div>\n          <div class=\"sc-row\" *ngIf=\"view.observationGenes.length\">\n            <p-checkbox\n              [binary]=\"true\"\n              [ngModel]=\"view.observationGenesColorBy\"\n              (onChange)=\"onObservationGenesColorBy($event.checked)\"\n              label=\"Colour by these genes\"\n              pTooltip=\"Each observation in the colour (and, in 2D, the icon) of the picked gene it expresses most, relative to that gene's highest value. Off, Colour by applies.\"\n              tooltipPosition=\"top\"\n            ></p-checkbox>\n          </div>\n          <small class=\"sc-hint\" *ngIf=\"view.observationGenes.length\">{{ geneFilterHint }}</small>\n          <!-- The filter is never dropped silently: a failed expression read keeps the observations\n                as they were drawn, and says so. -->\n          <small class=\"sc-hint sc-error\" *ngIf=\"view.observationGenes.length && (geneFilterFailed$ | async)\">\n            The expression of the picked genes could not be read, so the observations still show the previous\n            filter.\n            <a href=\"\" (click)=\"$event.preventDefault(); retryGeneFilter()\">Try again</a>\n          </small>\n        </div>\n      </ng-container>\n\n      <!-- Markers: how they are drawn. -->\n      <ng-container *ngIf=\"!cellsAvailable || shownAs === 'markers'\">\n        <div class=\"sc-subhead\">Markers</div>\n        <div class=\"sc-section\">\n          <div class=\"sc-row\">\n            <span class=\"sc-lbl\">Point size</span>\n            <p-slider\n              [ngModel]=\"view.pointScale\"\n              [min]=\"0.25\"\n              [max]=\"5\"\n              [step]=\"0.25\"\n              (onChange)=\"onPointScale($event.value)\"\n            ></p-slider>\n            <span class=\"sc-val\">{{ view.pointScale }}\u00D7</span>\n          </div>\n          <div class=\"sc-row\">\n            <span class=\"sc-lbl\">Opacity</span>\n            <p-slider\n              [ngModel]=\"view.opacity\"\n              [min]=\"0.1\"\n              [max]=\"1\"\n              [step]=\"0.05\"\n              (onChange)=\"onOpacity($event.value)\"\n            ></p-slider>\n            <span class=\"sc-val\">{{ view.opacity }}</span>\n          </div>\n        </div>\n      </ng-container>\n\n      <!-- Cell segmentations: how the cells are drawn, projected by the dialog. -->\n      <ng-container *ngIf=\"cellsAvailable && shownAs === 'cells'\">\n        <ng-content select=\"spatial-cells-panel\"></ng-content>\n      </ng-container>\n\n      <!-- The selected cell's (or cell type's, or region's) observations, by group: through the\n           volume in 3D, on the plane shown in 2D. -->\n      <spatial-selection-observations [controls]=\"controls\" [is3d]=\"is3d\"></spatial-selection-observations>\n    </div>\n  </div>\n\n  <!-- Only for a gene: the map draws that gene's expression as a field. In 2D\n     it goes under the cells of the displayed plane; in 3D it is one sheet per\n     imaged section, optionally smoothed along z into a volume. -->\n  <div class=\"sc-section\" *ngIf=\"canMapGene\">\n    <div class=\"sc-row\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"view.geneMap\"\n        (onChange)=\"onGeneMap($event.checked)\"\n        label=\"Gene map (expression field)\"\n        [pTooltip]=\"\n          is3d\n            ? 'Draw this gene\\'s expression as one field per imaged section \u2014 an estimate between the cells, empty where nothing was measured'\n            : 'Draw this gene\\'s expression as a smooth field UNDER the cells \u2014 an estimate between them, transparent where nothing was measured'\n        \"\n        tooltipPosition=\"top\"\n      ></p-checkbox>\n    </div>\n    <!-- 3D only: interpolating along z turns the measured sheets into an\n       estimate, so it is its own decision and its own label. -->\n    <div class=\"sc-row\" *ngIf=\"view.geneMap && is3d\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"view.geneMapVolume\"\n        (onChange)=\"onGeneMapVolume($event.checked)\"\n        label=\"Volume rendering (interpolate along z)\"\n        pTooltip=\"Smooth the per-section fields into a continuous volume \u2014 an ESTIMATE between the imaged sections, not measured tissue\"\n        tooltipPosition=\"top\"\n      ></p-checkbox>\n    </div>\n    <!-- Meaningless while interpolating: a volume built from one section would\n       smear that slide through the specimen's whole depth. -->\n    <div class=\"sc-row\" *ngIf=\"view.geneMap && is3d && isSectioned && !view.geneMapVolume\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"geneMapOneSection\"\n        (onChange)=\"onGeneMapOneSection($event.checked)\"\n        label=\"One map section at a time\"\n        pTooltip=\"Draw a single imaged section's field instead of the whole stack of sheets\"\n        tooltipPosition=\"top\"\n      ></p-checkbox>\n    </div>\n    <div class=\"sc-row\" *ngIf=\"view.geneMap && is3d && isSectioned && !view.geneMapVolume && geneMapOneSection\">\n      <span class=\"sc-lbl\">Map section</span>\n      <p-slider\n        [ngModel]=\"view.geneMapSection\"\n        [min]=\"0\"\n        [max]=\"lastSection\"\n        [step]=\"1\"\n        (onChange)=\"onGeneMapSection($event.value)\"\n      ></p-slider>\n      <span class=\"sc-val\">{{ geneMapSectionLabel }}</span>\n    </div>\n    <div class=\"sc-row\" *ngIf=\"view.geneMap\">\n      <span class=\"sc-lbl\">Smoothing</span>\n      <p-slider\n        [ngModel]=\"view.geneMapSmoothing\"\n        [min]=\"0.5\"\n        [max]=\"4\"\n        [step]=\"0.5\"\n        (onChange)=\"onGeneMapSmoothing($event.value)\"\n      ></p-slider>\n      <span class=\"sc-val\">{{ view.geneMapSmoothing }}\u00D7</span>\n    </div>\n    <div class=\"sc-row\" *ngIf=\"view.geneMap\">\n      <span class=\"sc-lbl\">Map opacity</span>\n      <p-slider\n        [ngModel]=\"view.geneMapOpacity\"\n        [min]=\"0.1\"\n        [max]=\"1\"\n        [step]=\"0.05\"\n        (onChange)=\"onGeneMapOpacity($event.value)\"\n      ></p-slider>\n      <span class=\"sc-val\">{{ view.geneMapOpacity }}</span>\n    </div>\n    <div class=\"sc-hint\" *ngIf=\"view.geneMap && !is3d\">\n      Kernel-weighted mean per cell, not a sum \u2014 so a crowded region does not glow for being crowded. Transparent\n      where no cell was measured. Turn the cells' own Opacity down to read the field under them.\n    </div>\n    <div class=\"sc-hint\" *ngIf=\"view.geneMap && is3d\">\n      {{ geneMapVolumeNote }}\n    </div>\n  </div>\n\n  <!-- 3D only: the volume, the cloud and the density volumes occupy the same\n     space, so each hides the others. Independent toggles, because the useful\n     views are the combinations \u2014 the field alone, one section's cells over it,\n     the anatomy alone. -->\n  <div class=\"sc-section\" *ngIf=\"is3d\">\n    <span class=\"sc-lbl\">Show</span>\n    <!-- The reference volume is the Volume section's, the observations this section's own header\n       checkbox. -->\n    <!-- Only for data that really is sectioned; a continuous z has no sections\n       to step through. -->\n    <div class=\"sc-row\" *ngIf=\"view.showPoints && isSectioned\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"oneSection\"\n        (onChange)=\"onOneSection($event.checked)\"\n        label=\"One section at a time\"\n        pTooltip=\"Draw a single imaged section's cells, so the density volumes between the sections stay visible\"\n        tooltipPosition=\"top\"\n      ></p-checkbox>\n    </div>\n    <div class=\"sc-row\" *ngIf=\"view.showPoints && isSectioned && oneSection\">\n      <span class=\"sc-lbl\">Section</span>\n      <p-slider\n        [ngModel]=\"view.pointSection\"\n        [min]=\"0\"\n        [max]=\"lastSection\"\n        [step]=\"1\"\n        (onChange)=\"onPointSection($event.value)\"\n      ></p-slider>\n      <span class=\"sc-val\">{{ sectionLabel }}</span>\n    </div>\n  </div>\n\n  <div class=\"sc-section\" *ngIf=\"is3d\">\n    <div class=\"sc-row\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"view.densityVolume\"\n        (onChange)=\"onDensityVolume($event.checked)\"\n        label=\"Cluster density volumes\"\n        pTooltip=\"Raymarch each cluster as a smooth density field \u2014 an ESTIMATE between the imaged sections, not measured cells\"\n        tooltipPosition=\"top\"\n      ></p-checkbox>\n    </div>\n    <div class=\"sc-row\" *ngIf=\"view.densityVolume\">\n      <span class=\"sc-lbl\">Smoothing</span>\n      <p-slider\n        [ngModel]=\"view.densitySmoothing\"\n        [min]=\"0.5\"\n        [max]=\"4\"\n        [step]=\"0.5\"\n        (onChange)=\"onDensitySmoothing($event.value)\"\n      ></p-slider>\n      <span class=\"sc-val\">{{ view.densitySmoothing }}\u00D7</span>\n    </div>\n    <div class=\"sc-hint\" *ngIf=\"view.densityVolume\">{{ densityNote }}</div>\n  </div>\n\n  <!-- Continuous-only knobs: meaningless for a categorical palette. -->\n  <div class=\"sc-section\" *ngIf=\"isContinuous\">\n    <div class=\"sc-row\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"view.logScale\"\n        (onChange)=\"onLogScale($event.checked)\"\n        label=\"Log scale\"\n        pTooltip=\"Counts collapse against their outliers on a linear ramp\"\n        tooltipPosition=\"top\"\n      ></p-checkbox>\n    </div>\n    <div class=\"sc-row\">\n      <span class=\"sc-lbl\">Clip outliers</span>\n      <p-dropdown\n        [options]=\"clipOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [ngModel]=\"view.percentileClip\"\n        (ngModelChange)=\"onClip($event)\"\n        appendTo=\"body\"\n        pTooltip=\"Percentile the contrast window is taken at\"\n        tooltipPosition=\"top\"\n      ></p-dropdown>\n      <!-- Reserves the readout column this row has no readout for, so the\n         control's right edge lines up with every slider's. -->\n      <span class=\"sc-val\"></span>\n    </div>\n  </div>\n\n  <!-- A gene's icon in its colour: the button that opens its icon and colour picker. -->\n  <ng-template #geneMark let-g>\n    <button\n      type=\"button\"\n      class=\"sc-gene-icon\"\n      [style.color]=\"geneColorOf(g)\"\n      [attr.aria-label]=\"'Icon and colour for ' + g\"\n      pTooltip=\"Icon and colour\"\n      tooltipPosition=\"top\"\n      (click)=\"openGeneStyle($event, g, genePop)\"\n    >\n      <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\">\n        <polygon [attr.points]=\"glyphPointsOf(g)\"></polygon>\n      </svg>\n    </button>\n  </ng-template>\n  <p-overlayPanel #genePop styleClass=\"sc-gene-style\" appendTo=\"body\">\n    <ng-template pTemplate=\"content\">\n      <spatial-gene-style\n        *ngIf=\"styleGene as g\"\n        [gene]=\"g\"\n        what=\"Observation\"\n        [color]=\"geneColorOf(g)\"\n        [glyph]=\"geneGlyphOf(g)\"\n        iconHint=\"Icons show on the 2D observation markers.\"\n        (colorChange)=\"onGeneColor(g, $event)\"\n        (glyphChange)=\"onGeneGlyph(g, $event)\"\n        (resetStyle)=\"resetGeneStyle(g)\"\n      ></spatial-gene-style>\n    </ng-template>\n  </p-overlayPanel>\n</ng-container>\n", styles: [".sc-hint{font-size:.75rem;color:var(--text-color-secondary, #6c757d)}.sc-error{color:var(--red-600, #c62828)}.sc-section{display:flex;flex-direction:column;gap:.35rem}.sc-lbl{font-size:.78rem;color:var(--text-color-secondary, #6c757d);white-space:nowrap}.sc-row{display:flex;align-items:center;gap:.6rem}.sc-row p-slider,.sc-row p-dropdown,.sc-row p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row p-slider .p-slider{width:100%}:host ::ng-deep .sc-row p-dropdown .p-dropdown,:host ::ng-deep .sc-row p-treeSelect .p-treeselect{width:100%}.sc-row .sc-lbl{flex:0 0 calc(50% - .6rem);min-width:0;overflow:hidden;text-overflow:ellipsis}.sc-cmap-option{display:inline-flex;align-items:center;gap:.4rem}.sc-cmap-swatch{width:3.5rem;height:.7rem;border-radius:2px;display:block}.sc-val{flex:0 0 4rem;text-align:right;font-size:.78rem;font-variant-numeric:tabular-nums;white-space:nowrap}:host ::ng-deep .sc-full,:host ::ng-deep .sc-full .p-dropdown,:host ::ng-deep .sc-full .p-autocomplete,:host ::ng-deep .sc-full input{width:100%}.sc-colorbar{height:.75rem;border-radius:2px;border:1px solid rgba(0,0,0,.2)}.sc-colorbar-ends{display:flex;justify-content:space-between;font-size:.7rem;color:var(--text-color-secondary, #6c757d);margin-top:.2rem}.sc-panel{border:1px solid var(--surface-border, #dee2e6);border-radius:6px;margin-bottom:.5rem;overflow:hidden}.sc-panel-head{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--surface-100, #f5f6f7)}.sc-panel-head .sc-panel-title{flex:1;font-weight:600}.sc-panel.open>.sc-panel-head{background:var(--primary-color, #2196f3);color:var(--primary-color-text, #fff)}.sc-panel-body{display:flex;flex-direction:column;gap:.45rem;padding:.6rem .75rem .75rem}.sc-subhead{display:flex;align-items:center;gap:.5rem;margin-top:.4rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-color-secondary, #6c757d)}.sc-subhead:after{content:\"\";flex:1;border-top:1px solid var(--surface-border, #dee2e6)}.sc-subsection{display:flex;flex-direction:column;gap:.45rem}.sc-subsection-head{cursor:pointer;-webkit-user-select:none;user-select:none}.sc-subsection-head i{font-size:.65rem}.sc-subsection-head:hover .sc-subsection-title{color:var(--primary-color, #3b82f6)}.sc-subsection-body{display:flex;flex-direction:column;gap:.45rem;padding-left:.6rem;border-left:2px solid var(--surface-border, #dee2e6)}:host ::ng-deep .sc-buttons .p-button{padding:.35rem .75rem;font-size:.85rem}.sc-row-picker p-dropdown,.sc-row-picker p-multiSelect,.sc-row-picker p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row-picker .sc-variant{width:6.5rem}:host ::ng-deep .sc-row-picker p-multiselect .p-multiselect{width:100%}:host ::ng-deep .sc-row-picker p-dropdown:has(.sc-variant){flex:0 0 6.5rem}:host ::ng-deep .sc-row-picker p-treeselect:has(.sc-palette){flex:0 0 3rem}:host ::ng-deep .sc-palette .p-treeselect-label{width:0;padding:0}.sc-icon-btn{flex:0 0 auto;border:0;background:transparent;cursor:pointer;padding:.25rem .35rem;font:inherit;font-size:1.05rem;color:var(--text-color, #333);border-radius:4px}.sc-icon-btn:hover{background:var(--surface-200, #e9ecef)}.sc-icon-btn.active{color:var(--primary-color, #2196f3);font-weight:700}.sc-icon-btn:disabled{opacity:.5;cursor:default}.sc-small-btn{margin-left:auto;border:1px solid var(--surface-border, #ced4da);background:var(--surface-0, #fff);border-radius:4px;padding:.2rem .6rem;font:inherit;font-size:.8rem;cursor:pointer}:host ::ng-deep .sc-group-heading{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.7}.sc-group-list,.sc-gene-tree{max-height:16rem;overflow-y:auto;border:1px solid var(--surface-border, #dee2e6);border-radius:4px;padding:.25rem .4rem}.sc-group-row,.sc-gene-row{display:flex;align-items:center;gap:.45rem;padding:.15rem 0;font-size:.88rem}.sc-group-row .sc-group-label,.sc-gene-row .sc-group-label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-group-all,.sc-gene-root,.sc-gene-group{font-weight:600}.sc-group-all .sc-icon-btn,.sc-gene-root .sc-icon-btn,.sc-gene-group .sc-icon-btn{margin-left:auto;font-size:.85rem}.sc-count{flex:0 0 auto;font-size:.78rem;color:var(--text-color-secondary, #6c757d)}.sc-glyph-option{display:inline-flex;align-items:center;gap:.4rem}.sc-glyph-svg{width:1rem;height:1rem;fill:currentColor}:host ::ng-deep .sc-glyph-pick .p-dropdown-label{padding:.2rem .4rem}.sc-color-input{width:2.5rem;height:1.8rem;border:1px solid var(--surface-border, #ced4da);border-radius:4px;padding:0;background:none}.sc-row-number p-slider,.sc-row-range p-slider{flex:1 1 0;min-width:0}:host ::ng-deep .sc-num{width:4.5rem;padding:.3rem .4rem;text-align:center}:host ::ng-deep .sc-row-number p-inputnumber,:host ::ng-deep .sc-row-range p-inputnumber{flex:0 0 auto}.sc-gene-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1.4rem;height:1.4rem;padding:0;border:1px solid transparent;border-radius:4px;background:transparent;cursor:pointer}.sc-gene-icon:hover,.sc-gene-icon:focus-visible{border-color:var(--surface-border, rgba(0, 0, 0, .2))}.sc-seltx-toggle{width:100%;padding:0;background:none;border:0;cursor:pointer;font-family:inherit;text-align:left}.sc-seltx-toggle i{font-size:.65rem}.sc-seltx-toggle:hover{color:var(--primary-color, #3b82f6)}.sc-seltx{display:flex;flex-direction:column;gap:.35rem}.sc-seltx-head{display:flex;align-items:baseline;gap:.5rem;min-width:0}.sc-seltx-label{font-size:.82rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-seltx-summary{display:flex;align-items:center;justify-content:space-between;font-size:.78rem}.sc-seltx-list{list-style:none;margin:0;padding:0;max-height:16rem;overflow-y:auto;font-size:.78rem}.sc-seltx-list.stale{opacity:.55}.sc-seltx-list li{display:grid;grid-template-columns:minmax(4rem,7rem) 1fr auto;align-items:center;gap:.5rem;padding:.1rem 0}.sc-seltx-gene{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-seltx-bar{height:.45rem;border-radius:2px;background:var(--surface-200, #e9ecef);overflow:hidden}.sc-seltx-bar span{display:block;height:100%;background:var(--primary-color, #3b82f6)}.sc-seltx-count{font-variant-numeric:tabular-nums;text-align:right;min-width:3rem}.sc-seltx-swatch{display:inline-block;width:.6rem;height:.6rem;margin-right:.35rem;border-radius:2px;vertical-align:baseline}.sc-seltx-measures{display:grid;grid-template-columns:minmax(4rem,1fr) auto;gap:.1rem .75rem;margin:0;font-size:.78rem}.sc-seltx-measures dt{color:var(--text-color-secondary, #6c757d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-seltx-measures dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}:host{display:contents}.sc-obs-genes{display:flex;flex-direction:column;gap:.15rem;margin-top:.35rem}.sc-obs-gene-row,.sc-obs-gene-option{display:flex;align-items:center;gap:.4rem;min-width:0}.sc-obs-gene-option{flex:1 1 auto;justify-content:space-between}.sc-obs-gene-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"dataset as ds\">\n  <!-- Observations: one marker per observation (cell centroid, Visium spot), and what\n     colours them. The lead section for datasets without cell outlines. -->\n  <div class=\"sc-panel\" [class.open]=\"open\">\n    <div class=\"sc-panel-head\" (click)=\"openChange.emit(!open)\">\n      <!-- Shows or hides the observations, as whichever the toggle below shows them as. -->\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"observationsShown\"\n        (click)=\"$event.stopPropagation()\"\n        (onChange)=\"onShowObservations($event.checked)\"\n        pTooltip=\"Show the observations\"\n        tooltipPosition=\"top\"\n      ></p-checkbox>\n      <span class=\"sc-panel-title\">Observations</span>\n      <i class=\"pi\" [class.pi-chevron-down]=\"open\" [class.pi-chevron-right]=\"!open\"></i>\n    </div>\n    <div class=\"sc-panel-body\" *ngIf=\"open\">\n      <!-- With a cell segmentation: shown as the markers OR as the cells' own shapes, one at a time.\n           One colouring for either, below. -->\n      <div class=\"sc-row sc-show-as\" *ngIf=\"cellsAvailable\">\n        <span class=\"sc-lbl\">Show as</span>\n        <p-selectButton\n          [options]=\"showAsOptions\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [ngModel]=\"shownAs\"\n          (ngModelChange)=\"onShownAs($event)\"\n          [allowEmpty]=\"false\"\n          styleClass=\"sc-buttons\"\n        ></p-selectButton>\n      </div>\n\n      <spatial-color-by\n        [controls]=\"controls\"\n        [dataset]=\"ds\"\n        [view]=\"view\"\n        [genes]=\"genes\"\n        [legend]=\"legend\"\n        [colorBarCss]=\"colorBarCss\"\n        [selectedCategory]=\"selectedCategory\"\n        [colormapOptions]=\"colormapOptions\"\n        (categoryClicked)=\"categoryClicked.emit($event)\"\n      ></spatial-color-by>\n\n      <ng-container *ngIf=\"genes?.state$ | async as gene\">\n        <!-- Which observations are drawn at all, by what they express. Several genes at\n        once, unlike the colour, which reads one: picking genes here hides every\n        observation that expresses none of them (or not all of them), and by default\n        colours (and, in 2D, marks) each drawn one by its gene. -->\n        <div class=\"sc-section\" *ngIf=\"ds.features\">\n          <label class=\"sc-lbl\" for=\"sc-show-genes\">Show observations expressing</label>\n          <p-multiSelect\n            inputId=\"sc-show-genes\"\n            [options]=\"gene.options\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            [ngModel]=\"view.observationGenes\"\n            (onChange)=\"onObservationGenes($event.value)\"\n            [filter]=\"true\"\n            filterBy=\"label\"\n            [resetFilterOnHide]=\"true\"\n            (onFilter)=\"genes?.onFilter($event.filter)\"\n            (onPanelShow)=\"genes?.ensureList()\"\n            [virtualScroll]=\"gene.options.length > geneVirtualScrollFrom\"\n            [virtualScrollItemSize]=\"30\"\n            [showToggleAll]=\"false\"\n            [showClear]=\"true\"\n            [emptyFilterMessage]=\"gene.remote ? 'No match \u2014 keep typing' : 'No match'\"\n            [emptyMessage]=\"gene.remote ? 'Type to search genes' : 'No genes'\"\n            appendTo=\"body\"\n            placeholder=\"Any gene (every observation)\"\n            [selectedItemsLabel]=\"'{0} genes'\"\n            [maxSelectedLabels]=\"3\"\n            styleClass=\"sc-full\"\n          >\n            <!-- A picked gene shows its icon in its colour; clicking it edits them. -->\n            <ng-template let-option pTemplate=\"item\">\n              <div class=\"sc-obs-gene-option\">\n                <span class=\"sc-obs-gene-name\">{{ option.label }}</span>\n                <ng-container *ngIf=\"isObservationGene(option.value)\">\n                  <ng-container *ngTemplateOutlet=\"geneMark; context: { $implicit: option.value }\"></ng-container>\n                </ng-container>\n              </div>\n            </ng-template>\n          </p-multiSelect>\n          <p-selectButton\n            *ngIf=\"view.observationGenes.length > 1\"\n            [options]=\"matchOptions\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            [ngModel]=\"view.observationGenesMatch\"\n            (ngModelChange)=\"onObservationGenesMatch($event)\"\n            [allowEmpty]=\"false\"\n            styleClass=\"sc-buttons\"\n          ></p-selectButton>\n          <!-- The picked genes: each one's icon and colour (click to edit), and a way out. -->\n          <div class=\"sc-obs-genes\" *ngIf=\"view.observationGenes.length\">\n            <div class=\"sc-obs-gene-row\" *ngFor=\"let g of view.observationGenes; trackBy: trackByGene\">\n              <ng-container *ngTemplateOutlet=\"geneMark; context: { $implicit: g }\"></ng-container>\n              <span class=\"sc-obs-gene-name\">{{ g }}</span>\n              <button\n                type=\"button\"\n                class=\"sc-icon-btn\"\n                [attr.aria-label]=\"'Stop showing ' + g\"\n                pTooltip=\"Remove\"\n                tooltipPosition=\"top\"\n                (click)=\"removeObservationGene(g)\"\n              >\n                <i class=\"pi pi-times\"></i>\n              </button>\n            </div>\n          </div>\n          <div class=\"sc-row\" *ngIf=\"view.observationGenes.length\">\n            <p-checkbox\n              [binary]=\"true\"\n              [ngModel]=\"view.observationGenesColorBy\"\n              (onChange)=\"onObservationGenesColorBy($event.checked)\"\n              label=\"Colour by these genes\"\n              pTooltip=\"Each observation in the colour (and, in 2D, the icon) of the picked gene it expresses most, relative to that gene's highest value. Off, Colour by applies.\"\n              tooltipPosition=\"top\"\n            ></p-checkbox>\n          </div>\n          <small class=\"sc-hint\" *ngIf=\"view.observationGenes.length\">{{ geneFilterHint }}</small>\n          <!-- The filter is never dropped silently: a failed expression read keeps the observations\n                as they were drawn, and says so. -->\n          <small class=\"sc-hint sc-error\" *ngIf=\"view.observationGenes.length && (geneFilterFailed$ | async)\">\n            The expression of the picked genes could not be read, so the observations still show the previous\n            filter.\n            <a href=\"\" (click)=\"$event.preventDefault(); retryGeneFilter()\">Try again</a>\n          </small>\n        </div>\n      </ng-container>\n\n      <!-- Markers: how they are drawn. -->\n      <ng-container *ngIf=\"!cellsAvailable || shownAs === 'markers'\">\n        <div class=\"sc-subhead\">Markers</div>\n        <div class=\"sc-section\">\n          <div class=\"sc-row\">\n            <span class=\"sc-lbl\">Point size</span>\n            <p-slider\n              [ngModel]=\"view.pointScale\"\n              [min]=\"0.25\"\n              [max]=\"5\"\n              [step]=\"0.25\"\n              (onChange)=\"onPointScale($event.value)\"\n            ></p-slider>\n            <span class=\"sc-val\">{{ view.pointScale }}\u00D7</span>\n          </div>\n          <div class=\"sc-row\">\n            <span class=\"sc-lbl\">Opacity</span>\n            <p-slider\n              [ngModel]=\"view.opacity\"\n              [min]=\"0.1\"\n              [max]=\"1\"\n              [step]=\"0.05\"\n              (onChange)=\"onOpacity($event.value)\"\n            ></p-slider>\n            <span class=\"sc-val\">{{ view.opacity }}</span>\n          </div>\n        </div>\n      </ng-container>\n\n      <!-- Cell segmentations: how the cells are drawn, projected by the dialog. -->\n      <ng-container *ngIf=\"cellsAvailable && shownAs === 'cells'\">\n        <ng-content select=\"spatial-cells-panel\"></ng-content>\n      </ng-container>\n\n      <!-- The selected cell's (or cell type's, or region's) observations, by group: through the\n           volume in 3D, on the plane shown in 2D. -->\n      <spatial-selection-observations [controls]=\"controls\" [is3d]=\"is3d\"></spatial-selection-observations>\n    </div>\n  </div>\n\n  <!-- Only for a gene: the map draws that gene's expression as a field. In 2D\n     it goes under the cells of the displayed plane; in 3D it is one sheet per\n     imaged section, optionally smoothed along z into a volume. -->\n  <div class=\"sc-section\" *ngIf=\"canMapGene\">\n    <div class=\"sc-row\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"view.geneMap\"\n        (onChange)=\"onGeneMap($event.checked)\"\n        label=\"Gene map (expression field)\"\n        [pTooltip]=\"\n          is3d\n            ? 'Draw this gene\\'s expression as one field per imaged section \u2014 an estimate between the cells, empty where nothing was measured'\n            : 'Draw this gene\\'s expression as a smooth field UNDER the cells \u2014 an estimate between them, transparent where nothing was measured'\n        \"\n        tooltipPosition=\"top\"\n      ></p-checkbox>\n    </div>\n    <!-- 3D only: interpolating along z turns the measured sheets into an\n       estimate, so it is its own decision and its own label. -->\n    <div class=\"sc-row\" *ngIf=\"view.geneMap && is3d\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"view.geneMapVolume\"\n        (onChange)=\"onGeneMapVolume($event.checked)\"\n        label=\"Volume rendering (interpolate along z)\"\n        pTooltip=\"Smooth the per-section fields into a continuous volume \u2014 an ESTIMATE between the imaged sections, not measured tissue\"\n        tooltipPosition=\"top\"\n      ></p-checkbox>\n    </div>\n    <!-- Meaningless while interpolating: a volume built from one section would\n       smear that slide through the specimen's whole depth. -->\n    <div class=\"sc-row\" *ngIf=\"view.geneMap && is3d && isSectioned && !view.geneMapVolume\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"geneMapOneSection\"\n        (onChange)=\"onGeneMapOneSection($event.checked)\"\n        label=\"One map section at a time\"\n        pTooltip=\"Draw a single imaged section's field instead of the whole stack of sheets\"\n        tooltipPosition=\"top\"\n      ></p-checkbox>\n    </div>\n    <div class=\"sc-row\" *ngIf=\"view.geneMap && is3d && isSectioned && !view.geneMapVolume && geneMapOneSection\">\n      <span class=\"sc-lbl\">Map section</span>\n      <p-slider\n        [ngModel]=\"view.geneMapSection\"\n        [min]=\"0\"\n        [max]=\"lastSection\"\n        [step]=\"1\"\n        (onChange)=\"onGeneMapSection($event.value)\"\n      ></p-slider>\n      <span class=\"sc-val\">{{ geneMapSectionLabel }}</span>\n    </div>\n    <div class=\"sc-row\" *ngIf=\"view.geneMap\">\n      <span class=\"sc-lbl\">Smoothing</span>\n      <p-slider\n        [ngModel]=\"view.geneMapSmoothing\"\n        [min]=\"0.5\"\n        [max]=\"4\"\n        [step]=\"0.5\"\n        (onChange)=\"onGeneMapSmoothing($event.value)\"\n      ></p-slider>\n      <span class=\"sc-val\">{{ view.geneMapSmoothing }}\u00D7</span>\n    </div>\n    <div class=\"sc-row\" *ngIf=\"view.geneMap\">\n      <span class=\"sc-lbl\">Map opacity</span>\n      <p-slider\n        [ngModel]=\"view.geneMapOpacity\"\n        [min]=\"0.1\"\n        [max]=\"1\"\n        [step]=\"0.05\"\n        (onChange)=\"onGeneMapOpacity($event.value)\"\n      ></p-slider>\n      <span class=\"sc-val\">{{ view.geneMapOpacity }}</span>\n    </div>\n    <div class=\"sc-hint\" *ngIf=\"view.geneMap && !is3d\">\n      Kernel-weighted mean per cell, not a sum \u2014 so a crowded region does not glow for being crowded. Transparent\n      where no cell was measured. Turn the cells' own Opacity down to read the field under them.\n    </div>\n    <div class=\"sc-hint\" *ngIf=\"view.geneMap && is3d\">\n      {{ geneMapVolumeNote }}\n    </div>\n  </div>\n\n  <!-- 3D only: the volume, the cloud and the density volumes occupy the same\n     space, so each hides the others. Independent toggles, because the useful\n     views are the combinations \u2014 the field alone, one section's cells over it,\n     the anatomy alone. -->\n  <div class=\"sc-section\" *ngIf=\"is3d\">\n    <span class=\"sc-lbl\">Show</span>\n    <!-- The reference volume is the Volume section's, the observations this section's own header\n       checkbox. -->\n    <!-- Only for data that really is sectioned; a continuous z has no sections\n       to step through. -->\n    <div class=\"sc-row\" *ngIf=\"view.showPoints && isSectioned\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"oneSection\"\n        (onChange)=\"onOneSection($event.checked)\"\n        label=\"One section at a time\"\n        pTooltip=\"Draw a single imaged section's cells, so the density volumes between the sections stay visible\"\n        tooltipPosition=\"top\"\n      ></p-checkbox>\n    </div>\n    <div class=\"sc-row\" *ngIf=\"view.showPoints && isSectioned && oneSection\">\n      <span class=\"sc-lbl\">Section</span>\n      <p-slider\n        [ngModel]=\"view.pointSection\"\n        [min]=\"0\"\n        [max]=\"lastSection\"\n        [step]=\"1\"\n        (onChange)=\"onPointSection($event.value)\"\n      ></p-slider>\n      <span class=\"sc-val\">{{ sectionLabel }}</span>\n    </div>\n  </div>\n\n  <div class=\"sc-section\" *ngIf=\"is3d\">\n    <div class=\"sc-row\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"view.densityVolume\"\n        (onChange)=\"onDensityVolume($event.checked)\"\n        label=\"Cluster density volumes\"\n        pTooltip=\"Raymarch each cluster as a smooth density field \u2014 an ESTIMATE between the imaged sections, not measured cells\"\n        tooltipPosition=\"top\"\n      ></p-checkbox>\n    </div>\n    <div class=\"sc-row\" *ngIf=\"view.densityVolume\">\n      <span class=\"sc-lbl\">Smoothing</span>\n      <p-slider\n        [ngModel]=\"view.densitySmoothing\"\n        [min]=\"0.5\"\n        [max]=\"4\"\n        [step]=\"0.5\"\n        (onChange)=\"onDensitySmoothing($event.value)\"\n      ></p-slider>\n      <span class=\"sc-val\">{{ view.densitySmoothing }}\u00D7</span>\n    </div>\n    <div class=\"sc-hint\" *ngIf=\"view.densityVolume\">{{ densityNote }}</div>\n  </div>\n\n  <!-- Continuous-only knobs: meaningless for a categorical palette. -->\n  <div class=\"sc-section\" *ngIf=\"isContinuous\">\n    <div class=\"sc-row\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"view.logScale\"\n        (onChange)=\"onLogScale($event.checked)\"\n        label=\"Log scale\"\n        pTooltip=\"Counts collapse against their outliers on a linear ramp\"\n        tooltipPosition=\"top\"\n      ></p-checkbox>\n    </div>\n    <div class=\"sc-row\">\n      <span class=\"sc-lbl\">Clip outliers</span>\n      <p-dropdown\n        [options]=\"clipOptions\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [ngModel]=\"view.percentileClip\"\n        (ngModelChange)=\"onClip($event)\"\n        appendTo=\"body\"\n        pTooltip=\"Percentile the contrast window is taken at\"\n        tooltipPosition=\"top\"\n      ></p-dropdown>\n      <!-- Reserves the readout column this row has no readout for, so the\n         control's right edge lines up with every slider's. -->\n      <span class=\"sc-val\"></span>\n    </div>\n  </div>\n\n  <!-- A gene's icon in its colour: the button that opens its icon and colour picker. -->\n  <ng-template #geneMark let-g>\n    <button\n      type=\"button\"\n      class=\"sc-gene-icon\"\n      [style.color]=\"geneColorOf(g)\"\n      [attr.aria-label]=\"'Icon and colour for ' + g\"\n      pTooltip=\"Icon and colour\"\n      tooltipPosition=\"top\"\n      (click)=\"openGeneStyle($event, g, genePop)\"\n    >\n      <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\">\n        <polygon [attr.points]=\"glyphPointsOf(g)\"></polygon>\n      </svg>\n    </button>\n  </ng-template>\n  <p-overlayPanel #genePop styleClass=\"sc-gene-style\" appendTo=\"body\">\n    <ng-template pTemplate=\"content\">\n      <spatial-gene-style\n        *ngIf=\"styleGene as g\"\n        [gene]=\"g\"\n        what=\"Observation\"\n        [color]=\"geneColorOf(g)\"\n        [glyph]=\"geneGlyphOf(g)\"\n        iconHint=\"Icons show on the 2D observation markers.\"\n        (colorChange)=\"onGeneColor(g, $event)\"\n        (glyphChange)=\"onGeneGlyph(g, $event)\"\n        (resetStyle)=\"resetGeneStyle(g)\"\n      ></spatial-gene-style>\n    </ng-template>\n  </p-overlayPanel>\n</ng-container>\n", styles: [".sc-hint{font-size:.75rem;color:var(--text-color-secondary, #6c757d)}.sc-error{color:var(--red-600, #c62828)}.sc-section{display:flex;flex-direction:column;gap:.35rem}.sc-lbl{font-size:.78rem;color:var(--text-color-secondary, #6c757d);white-space:nowrap}.sc-row{display:flex;align-items:center;gap:.6rem}.sc-row p-slider,.sc-row p-dropdown,.sc-row p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row p-slider .p-slider{width:100%}:host ::ng-deep .sc-row p-dropdown .p-dropdown,:host ::ng-deep .sc-row p-treeSelect .p-treeselect{width:100%}.sc-row .sc-lbl{flex:0 0 calc(50% - .6rem);min-width:0;overflow:hidden;text-overflow:ellipsis}.sc-cmap-option{display:inline-flex;align-items:center;gap:.4rem}.sc-cmap-swatch{width:3.5rem;height:.7rem;border-radius:2px;display:block}.sc-val{flex:0 0 4rem;text-align:right;font-size:.78rem;font-variant-numeric:tabular-nums;white-space:nowrap}:host ::ng-deep .sc-full,:host ::ng-deep .sc-full .p-dropdown,:host ::ng-deep .sc-full .p-autocomplete,:host ::ng-deep .sc-full input{width:100%}.sc-colorbar{height:.75rem;border-radius:2px;border:1px solid rgba(0,0,0,.2)}.sc-colorbar-ends{display:flex;justify-content:space-between;font-size:.7rem;color:var(--text-color-secondary, #6c757d);margin-top:.2rem}.sc-panel{border:1px solid var(--surface-border, #dee2e6);border-radius:6px;margin-bottom:.5rem;overflow:hidden}.sc-panel-head{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--surface-100, #f5f6f7)}.sc-panel-head .sc-panel-title{flex:1;font-weight:600}.sc-panel.open>.sc-panel-head{background:var(--primary-color, #2196f3);color:var(--primary-color-text, #fff)}.sc-panel-body{display:flex;flex-direction:column;gap:.45rem;padding:.6rem .75rem .75rem}.sc-subhead{display:flex;align-items:center;gap:.5rem;margin-top:.4rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-color-secondary, #6c757d)}.sc-subhead:after{content:\"\";flex:1;border-top:1px solid var(--surface-border, #dee2e6)}.sc-subsection{display:flex;flex-direction:column;gap:.45rem}.sc-subsection-head{cursor:pointer;-webkit-user-select:none;user-select:none}.sc-subsection-head i{font-size:.65rem}.sc-subsection-head:hover .sc-subsection-title{color:var(--primary-color, #3b82f6)}.sc-subsection-body{display:flex;flex-direction:column;gap:.45rem;padding-left:.6rem;border-left:2px solid var(--surface-border, #dee2e6)}:host ::ng-deep .sc-buttons .p-button{padding:.35rem .75rem;font-size:.85rem}.sc-row-picker p-dropdown,.sc-row-picker p-multiSelect,.sc-row-picker p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row-picker .sc-variant{width:6.5rem}:host ::ng-deep .sc-row-picker p-multiselect .p-multiselect{width:100%}:host ::ng-deep .sc-row-picker p-dropdown:has(.sc-variant){flex:0 0 6.5rem}:host ::ng-deep .sc-row-picker p-treeselect:has(.sc-palette){flex:0 0 3rem}:host ::ng-deep .sc-palette .p-treeselect-label{width:0;padding:0}.sc-icon-btn{flex:0 0 auto;border:0;background:transparent;cursor:pointer;padding:.25rem .35rem;font:inherit;font-size:1.05rem;color:var(--text-color, #333);border-radius:4px}.sc-icon-btn:hover{background:var(--surface-200, #e9ecef)}.sc-icon-btn.active{color:var(--primary-color, #2196f3);font-weight:700}.sc-icon-btn:disabled{opacity:.5;cursor:default}.sc-small-btn{margin-left:auto;border:1px solid var(--surface-border, #ced4da);background:var(--surface-0, #fff);border-radius:4px;padding:.2rem .6rem;font:inherit;font-size:.8rem;cursor:pointer}:host ::ng-deep .sc-group-heading{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.7}.sc-group-list,.sc-gene-tree{max-height:16rem;overflow-y:auto;border:1px solid var(--surface-border, #dee2e6);border-radius:4px;padding:.25rem .4rem}.sc-group-row,.sc-gene-row{display:flex;align-items:center;gap:.45rem;padding:.15rem 0;font-size:.88rem}.sc-group-row .sc-group-label,.sc-gene-row .sc-group-label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-group-all,.sc-gene-root,.sc-gene-group{font-weight:600}.sc-group-all .sc-icon-btn,.sc-gene-root .sc-icon-btn,.sc-gene-group .sc-icon-btn{margin-left:auto;font-size:.85rem}.sc-count{flex:0 0 auto;font-size:.78rem;color:var(--text-color-secondary, #6c757d)}.sc-glyph-option{display:inline-flex;align-items:center;gap:.4rem}.sc-glyph-svg{width:1rem;height:1rem;fill:currentColor}:host ::ng-deep .sc-glyph-pick .p-dropdown-label{padding:.2rem .4rem}.sc-color-input{width:2.5rem;height:1.8rem;border:1px solid var(--surface-border, #ced4da);border-radius:4px;padding:0;background:none}.sc-row-number p-slider,.sc-row-range p-slider{flex:1 1 0;min-width:0}:host ::ng-deep .sc-num{width:4.5rem;padding:.3rem .4rem;text-align:center}:host ::ng-deep .sc-row-number p-inputnumber,:host ::ng-deep .sc-row-range p-inputnumber{flex:0 0 auto}.sc-gene-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1.4rem;height:1.4rem;padding:0;border:1px solid transparent;border-radius:4px;background:transparent;cursor:pointer}.sc-gene-icon:hover,.sc-gene-icon:focus-visible{border-color:var(--surface-border, rgba(0, 0, 0, .2))}.sc-seltx-toggle{width:100%;padding:0;background:none;border:0;cursor:pointer;font-family:inherit;text-align:left}.sc-seltx-toggle i{font-size:.65rem}.sc-seltx-toggle:hover{color:var(--primary-color, #3b82f6)}.sc-seltx{display:flex;flex-direction:column;gap:.35rem}.sc-seltx-head{display:flex;align-items:baseline;gap:.5rem;min-width:0}.sc-seltx-label{font-size:.82rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-seltx-summary{display:flex;align-items:center;justify-content:space-between;font-size:.78rem}.sc-seltx-list{list-style:none;margin:0;padding:0;max-height:16rem;overflow-y:auto;font-size:.78rem}.sc-seltx-list.stale{opacity:.55}.sc-seltx-list li{display:grid;grid-template-columns:minmax(4rem,7rem) 1fr auto;align-items:center;gap:.5rem;padding:.1rem 0}.sc-seltx-gene{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-seltx-bar{height:.45rem;border-radius:2px;background:var(--surface-200, #e9ecef);overflow:hidden}.sc-seltx-bar span{display:block;height:100%;background:var(--primary-color, #3b82f6)}.sc-seltx-count{font-variant-numeric:tabular-nums;text-align:right;min-width:3rem}.sc-seltx-swatch{display:inline-block;width:.6rem;height:.6rem;margin-right:.35rem;border-radius:2px;vertical-align:baseline}.sc-seltx-measures{display:grid;grid-template-columns:minmax(4rem,1fr) auto;gap:.1rem .75rem;margin:0;font-size:.78rem}.sc-seltx-measures dt{color:var(--text-color-secondary, #6c757d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-seltx-measures dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}:host{display:contents}.sc-obs-genes{display:flex;flex-direction:column;gap:.15rem;margin-top:.35rem}.sc-obs-gene-row,.sc-obs-gene-option{display:flex;align-items:center;gap:.4rem;min-width:0}.sc-obs-gene-option{flex:1 1 auto;justify-content:space-between}.sc-obs-gene-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-show-as .sc-lbl{flex:0 0 auto}:host ::ng-deep .sc-show-as .p-selectbutton{display:flex;flex-wrap:nowrap}:host ::ng-deep .sc-show-as .p-button{white-space:nowrap}\n"] }]
         }], propDecorators: { controls: [{
                 type: Input
             }], dataset: [{
@@ -54604,4 +54604,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
  */
 
 export { SupersededError as $, ALL_GENES as A, Polygon as B, CANVAS_TOOL_IDS as C, DEFAULT_CATEGORICAL_PALETTE as D, ProcessingImage as E, REGION_IO_PORT as F, REGION_SOURCE_MIN_CHARS as G, HexColorPickerComponent as H, IMAGE_STATE_PORT as I, Rectangle as J, Region as K, LUT_COLORS as L, MISSING_COLOR as M, NAPARI_DECIMATE_OPTIONS as N, RegionEditorComponent as O, PLOT_MODE_CONTEXT as P, RoutingVisualizerService as Q, REGION_EDITOR_API as R, SAM_MODELS as S, SEMANTIC_SEGMENTER as T, SPATIAL_DATA_PORT as U, SPATIAL_WIRE_VERSION as V, ShapeSelection as W, SpatialChartsComponent as X, SpatialControlsComponent as Y, SpatialDataHttpService as Z, SpatialSelectionStore as _, runDecoder as a, omicsLayout as a$, TILE_ACCESS_PORT as a0, TOOLBAR_TOOLS as a1, VISUALIZER as a2, VIZ_ALERT_TOAST_KEY as a3, VIZ_CONFIG as a4, VIZ_TOAST_KEY as a5, ViewerFeature as a6, VisualizationModule as a7, VisualizerComponent as a8, assertManifestVersion as a9, hydrateBounds as aA, importFile as aB, isBuiltinPlotType as aC, isCanvasToolId as aD, isCategoricalColumn as aE, isContinuousColumn as aF, isDialogToolContribution as aG, isEmptyPresetSet as aH, isLabelVolumeName as aI, isLittleEndian as aJ, isNapari3d as aK, isNapariIsosurface as aL, isNapariScatter as aM, isNapariScatter3d as aN, isNapariSurface as aO, isNapariVolume as aP, isSamModelReady as aQ, isSpatialOmics as aR, isSpatialOmics3d as aS, isThreeDimensional as aT, isZipName as aU, labelClasses as aV, labelSliceGeoJson as aW, lutFor as aX, markerDiameters as aY, maskToIndices as aZ, mutedFromSelection as a_, benefitsFromGrouping as aa, buildOmicsTraces as ab, capabilitiesOf as ac, clearSamModelCache as ad, contrastWindow as ae, contributedPlotTypeOption as af, countMask as ag, cropImage as ah, datasetFromManifest as ai, decodeColumn as aj, decodeCoords as ak, decodeFeatureVector as al, decodePolygons as am, decodeRadius as an, defaultChannelVisible as ao, defaultPresetSet as ap, dialogToolContributions as aq, emptySelection as ar, encodeCategorical as as, encodeContinuous as at, expandZips as au, findColumnMeta as av, getDefaultSamModelId as aw, getPlotTypeDescriptor as ax, getSamModel as ay, hasZarrMetadata as az, ALL_TOOLBAR_TOOLS as b, openAnnotations as b0, openGeoJsonRegionSource as b1, openHttpRegionSource as b2, parsePresetSet as b3, planRegionImport as b4, pointInRing as b5, provideVisualization as b6, readAnnotationSlices as b7, readLabelVolume as b8, readOmeZarrLabels as b9, readZip as ba, rendererOwnsWheel as bb, resolveCategoryColors as bc, selectByCategory as bd, selectInRegions as be, setDefaultSamModel as bf, setOrtWasmBase as bg, setSamModelUrls as bh, sortToolContributions as bi, visibleToolContributions as bj, ANNOTATION_IMAGE_MAX_DIM as c, CELL_SEGMENTER as d, CHANNEL_HISTOGRAM_API as e, fetchModel as f, getOrtWasmBase as g, CellposeSegmenterService as h, ChannelHistogramComponent as i, DEFAULT_FALLBACK_PALETTE as j, DEFAULT_MUTED_OPACITY as k, DEFAULT_SAM_MODEL_ID as l, DEFAULT_SPATIAL_VIEW as m, DEFAULT_VISIBLE_CHANNELS as n, INSTANCE_SEGMENTER as o, ImageConverterService as p, MultiPolygon as q, runEncoder as r, NAPARI_DEFAULT_DECIMATE as s, NO_CATEGORY as t, NO_OBSERVATION as u, PLOT_MODE_SESSION as v, PLOT_TYPE_CONTRIBUTIONS as w, PLOT_TYPE_DESCRIPTORS as x, PREFERENCES_PORT as y, PlotType as z };
-//# sourceMappingURL=jax-data-science-sci-image-visualizer-jax-data-science-sci-image-visualizer-CBiLcnE6.mjs.map
+//# sourceMappingURL=jax-data-science-sci-image-visualizer-jax-data-science-sci-image-visualizer-YrNqv8wH.mjs.map