@jax-data-science/sci-image-visualizer 0.15.0 → 0.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/implementations/napari-js/napari-scene.mjs +1 -1
- package/esm2022/lib/implementations/napari-js/napari-spatial-3d-scene.mjs +202 -33
- package/esm2022/lib/implementations/napari-js/napari-visualizer.service.mjs +2 -1
- package/esm2022/lib/spatial-controls/spatial-gene-tree/spatial-gene-tree.component.mjs +49 -16
- package/esm2022/lib/toolbar/toolbar.component.mjs +13 -4
- package/esm2022/lib/toolbar/view-controls/view-controls.component.mjs +7 -7
- package/fesm2022/{jax-data-science-sci-image-visualizer-jax-data-science-sci-image-visualizer-qUeMuBb0.mjs → jax-data-science-sci-image-visualizer-jax-data-science-sci-image-visualizer-CYsPzX3J.mjs} +266 -56
- package/fesm2022/jax-data-science-sci-image-visualizer-jax-data-science-sci-image-visualizer-CYsPzX3J.mjs.map +1 -0
- package/fesm2022/{jax-data-science-sci-image-visualizer-onnx-sam-session-U1ODcfYD.mjs → jax-data-science-sci-image-visualizer-onnx-sam-session-DaZVXq1s.mjs} +2 -2
- package/fesm2022/{jax-data-science-sci-image-visualizer-onnx-sam-session-U1ODcfYD.mjs.map → jax-data-science-sci-image-visualizer-onnx-sam-session-DaZVXq1s.mjs.map} +1 -1
- package/fesm2022/jax-data-science-sci-image-visualizer.mjs +1 -1
- package/lib/implementations/napari-js/napari-scene.d.ts +2 -0
- package/lib/implementations/napari-js/napari-spatial-3d-scene.d.ts +80 -9
- package/lib/spatial-controls/spatial-gene-tree/spatial-gene-tree.component.d.ts +18 -0
- package/lib/toolbar/toolbar.component.d.ts +6 -0
- package/lib/toolbar/view-controls/view-controls.component.d.ts +3 -3
- package/package.json +2 -2
- package/fesm2022/jax-data-science-sci-image-visualizer-jax-data-science-sci-image-visualizer-qUeMuBb0.mjs.map +0 -1
|
@@ -10580,7 +10580,7 @@ function frameToRgba(cached, frameIndex) {
|
|
|
10580
10580
|
/** Lazy-import so onnxruntime-web is never pulled into unit tests or the
|
|
10581
10581
|
* initial bundle — only when segmentation actually runs. */
|
|
10582
10582
|
const onnxSessionFactory = async () => {
|
|
10583
|
-
const { OnnxSamSession } = await import('./jax-data-science-sci-image-visualizer-onnx-sam-session-
|
|
10583
|
+
const { OnnxSamSession } = await import('./jax-data-science-sci-image-visualizer-onnx-sam-session-DaZVXq1s.mjs');
|
|
10584
10584
|
return new OnnxSamSession();
|
|
10585
10585
|
};
|
|
10586
10586
|
/** Thrown inside a load that a model switch superseded. */
|
|
@@ -13348,12 +13348,12 @@ class ViewControlsComponent {
|
|
|
13348
13348
|
this.activeDragMode = null;
|
|
13349
13349
|
/** The 3D camera mode (`turntable` / `orbit` / …). */
|
|
13350
13350
|
this.activeSurface3dMode = 'turntable';
|
|
13351
|
-
/** A napari-js WebGPU view (axes toggle, napari camera). */
|
|
13352
|
-
this.isNapariMode = false;
|
|
13353
13351
|
/** The napari-js surface (shows the wireframe toggle). */
|
|
13354
13352
|
this.isNapariSurfaceMode = false;
|
|
13355
13353
|
/** A napari-js 3D view (shows the Resolution dropdown). */
|
|
13356
13354
|
this.isNapari3dMode = false;
|
|
13355
|
+
/** Whether the view draws the 3D axes gizmo (shows its toggle). */
|
|
13356
|
+
this.axesToggle = false;
|
|
13357
13357
|
/** The napari 3D axes gizmo is shown. */
|
|
13358
13358
|
this.axesVisible = true;
|
|
13359
13359
|
/** The napari surface wireframe is on. */
|
|
@@ -13380,11 +13380,11 @@ class ViewControlsComponent {
|
|
|
13380
13380
|
this.decimateOptions = NAPARI_DECIMATE_OPTIONS;
|
|
13381
13381
|
}
|
|
13382
13382
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ViewControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13383
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ViewControlsComponent, isStandalone: true, selector: "toolbar-view-controls", inputs: { isHeatmap: "isHeatmap", zoomTools: "zoomTools", isImageView: "isImageView", activeDragMode: "activeDragMode", activeSurface3dMode: "activeSurface3dMode",
|
|
13383
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ViewControlsComponent, isStandalone: true, selector: "toolbar-view-controls", inputs: { isHeatmap: "isHeatmap", zoomTools: "zoomTools", isImageView: "isImageView", activeDragMode: "activeDragMode", activeSurface3dMode: "activeSurface3dMode", isNapariSurfaceMode: "isNapariSurfaceMode", isNapari3dMode: "isNapari3dMode", axesToggle: "axesToggle", axesVisible: "axesVisible", wireframeActive: "wireframeActive", resolutionScale: "resolutionScale" }, outputs: { toggleDragMode: "toggleDragMode", zoomIn: "zoomIn", zoomOut: "zoomOut", toggleSurface3dMode: "toggleSurface3dMode", resetSurfaceCamera: "resetSurfaceCamera", toggleAxes: "toggleAxes", toggleWireframe: "toggleWireframe", selectResolution: "selectResolution" }, ngImport: i0, template: "<!-- Zoom tools. Plotly rubber-band drag-zoom: on OpenSeadragon the box-zoom\n covers this and a bare drag pans natively, so it's hidden in image view. -->\n<ng-container *ngIf=\"isHeatmap && zoomTools\">\n <span class=\"toolbar-separator\"></span>\n <p-button\n *ngIf=\"!isImageView\"\n icon=\"pi pi-search\"\n size=\"small\"\n [text]=\"activeDragMode !== 'zoom'\"\n ariaLabel=\"Zoom drag\"\n pTooltip=\"Zoom drag\"\n tooltipPosition=\"bottom\"\n (onClick)=\"toggleDragMode.emit('zoom')\"\n >\n </p-button>\n <p-button\n size=\"small\"\n [text]=\"activeDragMode !== 'zoomToBox'\"\n ariaLabel=\"Zoom box\"\n pTooltip=\"Zoom box (<kbd>b</kbd>)\"\n [escape]=\"false\"\n tooltipPosition=\"bottom\"\n (onClick)=\"toggleDragMode.emit('zoomToBox')\"\n >\n <img\n src=\"assets/plotting/zoom-box.svg\"\n [class]=\"activeDragMode === 'zoomToBox' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n style=\"width: 1rem\"\n />\n </p-button>\n <p-button\n icon=\"pi pi-arrows-alt\"\n size=\"small\"\n [text]=\"activeDragMode !== 'pan'\"\n ariaLabel=\"Pan the image\"\n pTooltip=\"Pan the image (<kbd>p</kbd>)\"\n [escape]=\"false\"\n tooltipPosition=\"bottom\"\n (onClick)=\"toggleDragMode.emit('pan')\"\n >\n </p-button>\n <p-button\n icon=\"pi pi-search-plus\"\n size=\"small\"\n [text]=\"true\"\n ariaLabel=\"Zoom in\"\n pTooltip=\"Zoom in (<kbd>+</kbd>)\"\n [escape]=\"false\"\n tooltipPosition=\"bottom\"\n (onClick)=\"zoomIn.emit()\"\n >\n </p-button>\n <p-button\n icon=\"pi pi-search-minus\"\n size=\"small\"\n [text]=\"true\"\n ariaLabel=\"Zoom out\"\n pTooltip=\"Zoom out (<kbd>-</kbd>)\"\n [escape]=\"false\"\n tooltipPosition=\"bottom\"\n (onClick)=\"zoomOut.emit()\"\n >\n </p-button>\n</ng-container>\n\n<!-- Surface 3D controls -->\n<ng-container *ngIf=\"!isHeatmap\">\n <span class=\"toolbar-separator\"></span>\n <p-button\n icon=\"pi pi-search\"\n size=\"small\"\n [text]=\"activeSurface3dMode !== 'zoom'\"\n ariaLabel=\"Zoom\"\n pTooltip=\"Zoom\"\n tooltipPosition=\"bottom\"\n (onClick)=\"toggleSurface3dMode.emit('zoom')\"\n >\n </p-button>\n <p-button\n icon=\"pi pi-arrows-alt\"\n size=\"small\"\n [text]=\"activeSurface3dMode !== 'pan'\"\n ariaLabel=\"Pan\"\n pTooltip=\"Pan\"\n tooltipPosition=\"bottom\"\n (onClick)=\"toggleSurface3dMode.emit('pan')\"\n >\n </p-button>\n <p-button\n icon=\"pi pi-globe\"\n size=\"small\"\n [text]=\"activeSurface3dMode !== 'orbit'\"\n ariaLabel=\"Orbital rotation\"\n pTooltip=\"Orbital rotation\"\n tooltipPosition=\"bottom\"\n (onClick)=\"toggleSurface3dMode.emit('orbit')\"\n >\n </p-button>\n <p-button\n icon=\"pi pi-sync\"\n size=\"small\"\n [text]=\"activeSurface3dMode !== 'turntable'\"\n ariaLabel=\"Turntable rotation\"\n pTooltip=\"Turntable rotation\"\n tooltipPosition=\"bottom\"\n (onClick)=\"toggleSurface3dMode.emit('turntable')\"\n >\n </p-button>\n <p-button\n icon=\"pi pi-home\"\n size=\"small\"\n [text]=\"true\"\n ariaLabel=\"Reset camera\"\n pTooltip=\"Reset camera to default\"\n tooltipPosition=\"bottom\"\n (onClick)=\"resetSurfaceCamera.emit()\"\n >\n </p-button>\n <!-- 3D coordinate-axes / scale gizmo toggle (napari-js WebGPU volume/isosurface, and the 3D\n spatial cloud).\n `p-button-icon-only` gives the same square sizing as the neighbouring pi-icon buttons\n (the projected <img> doesn't trigger PrimeNG's automatic icon-only sizing). -->\n <p-button\n size=\"small\"\n *ngIf=\"axesToggle\"\n styleClass=\"p-button-icon-only\"\n [text]=\"!axesVisible\"\n ariaLabel=\"Toggle 3D axes\"\n pTooltip=\"Toggle 3D axes / scale\"\n tooltipPosition=\"bottom\"\n (onClick)=\"toggleAxes.emit()\"\n >\n <img\n src=\"assets/plotting/3d-coordinates.svg\"\n [class]=\"axesVisible ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n style=\"width: 1rem\"\n />\n </p-button>\n <!-- Surface wireframe toggle (napari-js WebGPU surface only). -->\n <p-button\n icon=\"pi pi-share-alt\"\n size=\"small\"\n *ngIf=\"isNapariSurfaceMode\"\n [text]=\"!wireframeActive\"\n ariaLabel=\"Toggle wireframe\"\n pTooltip=\"Toggle wireframe\"\n tooltipPosition=\"bottom\"\n (onClick)=\"toggleWireframe.emit()\"\n >\n </p-button>\n <!-- Resolution (decimate factor) for the napari 3D types \u2014 reloads at coarser/finer sampling. -->\n <ng-container *ngIf=\"isNapari3dMode\">\n <span class=\"flex align-items-center mx-1 toolbar-text\">Res</span>\n <p-dropdown\n [options]=\"decimateOptions\"\n optionLabel=\"label\"\n optionValue=\"value\"\n [ngModel]=\"resolutionScale\"\n appendTo=\"body\"\n ariaLabel=\"Resolution\"\n pTooltip=\"Resolution (decimate factor)\"\n tooltipPosition=\"bottom\"\n [style]=\"{ 'min-width': '6rem' }\"\n (onChange)=\"selectResolution.emit($event.value)\"\n >\n </p-dropdown>\n </ng-container>\n</ng-container>\n", styles: [".toolbar-text{color:var(--primary-color);font-size:.875rem}.toolbar-separator{border-left:1px solid var(--surface-border);height:1.5rem;margin:0 .25rem;align-self:center}.toolbar-icon-dark{filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}.toolbar-icon-active{filter:brightness(0) invert(1)}.wand-sensitivity-value{min-width:2rem;text-align:right}:host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i5$2.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "autoShowPanelOnPrintableCharacterKeyDown", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13384
13384
|
}
|
|
13385
13385
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ViewControlsComponent, decorators: [{
|
|
13386
13386
|
type: Component,
|
|
13387
|
-
args: [{ selector: 'toolbar-view-controls', standalone: true, imports: [CommonModule, FormsModule, ButtonModule, DropdownModule, TooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Zoom tools. Plotly rubber-band drag-zoom: on OpenSeadragon the box-zoom\n covers this and a bare drag pans natively, so it's hidden in image view. -->\n<ng-container *ngIf=\"isHeatmap && zoomTools\">\n <span class=\"toolbar-separator\"></span>\n <p-button\n *ngIf=\"!isImageView\"\n icon=\"pi pi-search\"\n size=\"small\"\n [text]=\"activeDragMode !== 'zoom'\"\n ariaLabel=\"Zoom drag\"\n pTooltip=\"Zoom drag\"\n tooltipPosition=\"bottom\"\n (onClick)=\"toggleDragMode.emit('zoom')\"\n >\n </p-button>\n <p-button\n size=\"small\"\n [text]=\"activeDragMode !== 'zoomToBox'\"\n ariaLabel=\"Zoom box\"\n pTooltip=\"Zoom box (<kbd>b</kbd>)\"\n [escape]=\"false\"\n tooltipPosition=\"bottom\"\n (onClick)=\"toggleDragMode.emit('zoomToBox')\"\n >\n <img\n src=\"assets/plotting/zoom-box.svg\"\n [class]=\"activeDragMode === 'zoomToBox' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n style=\"width: 1rem\"\n />\n </p-button>\n <p-button\n icon=\"pi pi-arrows-alt\"\n size=\"small\"\n [text]=\"activeDragMode !== 'pan'\"\n ariaLabel=\"Pan the image\"\n pTooltip=\"Pan the image (<kbd>p</kbd>)\"\n [escape]=\"false\"\n tooltipPosition=\"bottom\"\n (onClick)=\"toggleDragMode.emit('pan')\"\n >\n </p-button>\n <p-button\n icon=\"pi pi-search-plus\"\n size=\"small\"\n [text]=\"true\"\n ariaLabel=\"Zoom in\"\n pTooltip=\"Zoom in (<kbd>+</kbd>)\"\n [escape]=\"false\"\n tooltipPosition=\"bottom\"\n (onClick)=\"zoomIn.emit()\"\n >\n </p-button>\n <p-button\n icon=\"pi pi-search-minus\"\n size=\"small\"\n [text]=\"true\"\n ariaLabel=\"Zoom out\"\n pTooltip=\"Zoom out (<kbd>-</kbd>)\"\n [escape]=\"false\"\n tooltipPosition=\"bottom\"\n (onClick)=\"zoomOut.emit()\"\n >\n </p-button>\n</ng-container>\n\n<!-- Surface 3D controls -->\n<ng-container *ngIf=\"!isHeatmap\">\n <span class=\"toolbar-separator\"></span>\n <p-button\n icon=\"pi pi-search\"\n size=\"small\"\n [text]=\"activeSurface3dMode !== 'zoom'\"\n ariaLabel=\"Zoom\"\n pTooltip=\"Zoom\"\n tooltipPosition=\"bottom\"\n (onClick)=\"toggleSurface3dMode.emit('zoom')\"\n >\n </p-button>\n <p-button\n icon=\"pi pi-arrows-alt\"\n size=\"small\"\n [text]=\"activeSurface3dMode !== 'pan'\"\n ariaLabel=\"Pan\"\n pTooltip=\"Pan\"\n tooltipPosition=\"bottom\"\n (onClick)=\"toggleSurface3dMode.emit('pan')\"\n >\n </p-button>\n <p-button\n icon=\"pi pi-globe\"\n size=\"small\"\n [text]=\"activeSurface3dMode !== 'orbit'\"\n ariaLabel=\"Orbital rotation\"\n pTooltip=\"Orbital rotation\"\n tooltipPosition=\"bottom\"\n (onClick)=\"toggleSurface3dMode.emit('orbit')\"\n >\n </p-button>\n <p-button\n icon=\"pi pi-sync\"\n size=\"small\"\n [text]=\"activeSurface3dMode !== 'turntable'\"\n ariaLabel=\"Turntable rotation\"\n pTooltip=\"Turntable rotation\"\n tooltipPosition=\"bottom\"\n (onClick)=\"toggleSurface3dMode.emit('turntable')\"\n >\n </p-button>\n <p-button\n icon=\"pi pi-home\"\n size=\"small\"\n [text]=\"true\"\n ariaLabel=\"Reset camera\"\n pTooltip=\"Reset camera to default\"\n tooltipPosition=\"bottom\"\n (onClick)=\"resetSurfaceCamera.emit()\"\n >\n </p-button>\n <!-- 3D coordinate-axes / scale gizmo toggle (napari-js WebGPU volume/isosurface
|
|
13387
|
+
args: [{ selector: 'toolbar-view-controls', standalone: true, imports: [CommonModule, FormsModule, ButtonModule, DropdownModule, TooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Zoom tools. Plotly rubber-band drag-zoom: on OpenSeadragon the box-zoom\n covers this and a bare drag pans natively, so it's hidden in image view. -->\n<ng-container *ngIf=\"isHeatmap && zoomTools\">\n <span class=\"toolbar-separator\"></span>\n <p-button\n *ngIf=\"!isImageView\"\n icon=\"pi pi-search\"\n size=\"small\"\n [text]=\"activeDragMode !== 'zoom'\"\n ariaLabel=\"Zoom drag\"\n pTooltip=\"Zoom drag\"\n tooltipPosition=\"bottom\"\n (onClick)=\"toggleDragMode.emit('zoom')\"\n >\n </p-button>\n <p-button\n size=\"small\"\n [text]=\"activeDragMode !== 'zoomToBox'\"\n ariaLabel=\"Zoom box\"\n pTooltip=\"Zoom box (<kbd>b</kbd>)\"\n [escape]=\"false\"\n tooltipPosition=\"bottom\"\n (onClick)=\"toggleDragMode.emit('zoomToBox')\"\n >\n <img\n src=\"assets/plotting/zoom-box.svg\"\n [class]=\"activeDragMode === 'zoomToBox' ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n style=\"width: 1rem\"\n />\n </p-button>\n <p-button\n icon=\"pi pi-arrows-alt\"\n size=\"small\"\n [text]=\"activeDragMode !== 'pan'\"\n ariaLabel=\"Pan the image\"\n pTooltip=\"Pan the image (<kbd>p</kbd>)\"\n [escape]=\"false\"\n tooltipPosition=\"bottom\"\n (onClick)=\"toggleDragMode.emit('pan')\"\n >\n </p-button>\n <p-button\n icon=\"pi pi-search-plus\"\n size=\"small\"\n [text]=\"true\"\n ariaLabel=\"Zoom in\"\n pTooltip=\"Zoom in (<kbd>+</kbd>)\"\n [escape]=\"false\"\n tooltipPosition=\"bottom\"\n (onClick)=\"zoomIn.emit()\"\n >\n </p-button>\n <p-button\n icon=\"pi pi-search-minus\"\n size=\"small\"\n [text]=\"true\"\n ariaLabel=\"Zoom out\"\n pTooltip=\"Zoom out (<kbd>-</kbd>)\"\n [escape]=\"false\"\n tooltipPosition=\"bottom\"\n (onClick)=\"zoomOut.emit()\"\n >\n </p-button>\n</ng-container>\n\n<!-- Surface 3D controls -->\n<ng-container *ngIf=\"!isHeatmap\">\n <span class=\"toolbar-separator\"></span>\n <p-button\n icon=\"pi pi-search\"\n size=\"small\"\n [text]=\"activeSurface3dMode !== 'zoom'\"\n ariaLabel=\"Zoom\"\n pTooltip=\"Zoom\"\n tooltipPosition=\"bottom\"\n (onClick)=\"toggleSurface3dMode.emit('zoom')\"\n >\n </p-button>\n <p-button\n icon=\"pi pi-arrows-alt\"\n size=\"small\"\n [text]=\"activeSurface3dMode !== 'pan'\"\n ariaLabel=\"Pan\"\n pTooltip=\"Pan\"\n tooltipPosition=\"bottom\"\n (onClick)=\"toggleSurface3dMode.emit('pan')\"\n >\n </p-button>\n <p-button\n icon=\"pi pi-globe\"\n size=\"small\"\n [text]=\"activeSurface3dMode !== 'orbit'\"\n ariaLabel=\"Orbital rotation\"\n pTooltip=\"Orbital rotation\"\n tooltipPosition=\"bottom\"\n (onClick)=\"toggleSurface3dMode.emit('orbit')\"\n >\n </p-button>\n <p-button\n icon=\"pi pi-sync\"\n size=\"small\"\n [text]=\"activeSurface3dMode !== 'turntable'\"\n ariaLabel=\"Turntable rotation\"\n pTooltip=\"Turntable rotation\"\n tooltipPosition=\"bottom\"\n (onClick)=\"toggleSurface3dMode.emit('turntable')\"\n >\n </p-button>\n <p-button\n icon=\"pi pi-home\"\n size=\"small\"\n [text]=\"true\"\n ariaLabel=\"Reset camera\"\n pTooltip=\"Reset camera to default\"\n tooltipPosition=\"bottom\"\n (onClick)=\"resetSurfaceCamera.emit()\"\n >\n </p-button>\n <!-- 3D coordinate-axes / scale gizmo toggle (napari-js WebGPU volume/isosurface, and the 3D\n spatial cloud).\n `p-button-icon-only` gives the same square sizing as the neighbouring pi-icon buttons\n (the projected <img> doesn't trigger PrimeNG's automatic icon-only sizing). -->\n <p-button\n size=\"small\"\n *ngIf=\"axesToggle\"\n styleClass=\"p-button-icon-only\"\n [text]=\"!axesVisible\"\n ariaLabel=\"Toggle 3D axes\"\n pTooltip=\"Toggle 3D axes / scale\"\n tooltipPosition=\"bottom\"\n (onClick)=\"toggleAxes.emit()\"\n >\n <img\n src=\"assets/plotting/3d-coordinates.svg\"\n [class]=\"axesVisible ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n style=\"width: 1rem\"\n />\n </p-button>\n <!-- Surface wireframe toggle (napari-js WebGPU surface only). -->\n <p-button\n icon=\"pi pi-share-alt\"\n size=\"small\"\n *ngIf=\"isNapariSurfaceMode\"\n [text]=\"!wireframeActive\"\n ariaLabel=\"Toggle wireframe\"\n pTooltip=\"Toggle wireframe\"\n tooltipPosition=\"bottom\"\n (onClick)=\"toggleWireframe.emit()\"\n >\n </p-button>\n <!-- Resolution (decimate factor) for the napari 3D types \u2014 reloads at coarser/finer sampling. -->\n <ng-container *ngIf=\"isNapari3dMode\">\n <span class=\"flex align-items-center mx-1 toolbar-text\">Res</span>\n <p-dropdown\n [options]=\"decimateOptions\"\n optionLabel=\"label\"\n optionValue=\"value\"\n [ngModel]=\"resolutionScale\"\n appendTo=\"body\"\n ariaLabel=\"Resolution\"\n pTooltip=\"Resolution (decimate factor)\"\n tooltipPosition=\"bottom\"\n [style]=\"{ 'min-width': '6rem' }\"\n (onChange)=\"selectResolution.emit($event.value)\"\n >\n </p-dropdown>\n </ng-container>\n</ng-container>\n", styles: [".toolbar-text{color:var(--primary-color);font-size:.875rem}.toolbar-separator{border-left:1px solid var(--surface-border);height:1.5rem;margin:0 .25rem;align-self:center}.toolbar-icon-dark{filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}.toolbar-icon-active{filter:brightness(0) invert(1)}.wand-sensitivity-value{min-width:2rem;text-align:right}:host{display:contents}\n"] }]
|
|
13388
13388
|
}], propDecorators: { isHeatmap: [{
|
|
13389
13389
|
type: Input
|
|
13390
13390
|
}], zoomTools: [{
|
|
@@ -13395,12 +13395,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
|
|
|
13395
13395
|
type: Input
|
|
13396
13396
|
}], activeSurface3dMode: [{
|
|
13397
13397
|
type: Input
|
|
13398
|
-
}], isNapariMode: [{
|
|
13399
|
-
type: Input
|
|
13400
13398
|
}], isNapariSurfaceMode: [{
|
|
13401
13399
|
type: Input
|
|
13402
13400
|
}], isNapari3dMode: [{
|
|
13403
13401
|
type: Input
|
|
13402
|
+
}], axesToggle: [{
|
|
13403
|
+
type: Input
|
|
13404
13404
|
}], axesVisible: [{
|
|
13405
13405
|
type: Input
|
|
13406
13406
|
}], wireframeActive: [{
|
|
@@ -14012,6 +14012,15 @@ class ToolbarComponent {
|
|
|
14012
14012
|
get isIsosurfaceMode() {
|
|
14013
14013
|
return this.effectivePlotType === PlotType.ISOSURFACE || isNapariIsosurface(this.effectivePlotType);
|
|
14014
14014
|
}
|
|
14015
|
+
/**
|
|
14016
|
+
* The views that draw the 3D axes gizmo (an `Axes3dGizmo`): napari-js's volume, isosurface and
|
|
14017
|
+
* surface, and the 3D spatial cloud. Not every napari-js view: its 2D image and scatter and its
|
|
14018
|
+
* 3D scatter draw none, and a toggle there would do nothing.
|
|
14019
|
+
*/
|
|
14020
|
+
get showsAxesToggle() {
|
|
14021
|
+
const type = this.effectivePlotType;
|
|
14022
|
+
return isNapariVolume(type) || isNapariIsosurface(type) || isNapariSurface(type) || isSpatialOmics3d(type);
|
|
14023
|
+
}
|
|
14015
14024
|
/** The napari-js WebGPU surface — shows the wireframe toggle. */
|
|
14016
14025
|
get isNapariSurfaceMode() {
|
|
14017
14026
|
return isNapariSurface(this.effectivePlotType);
|
|
@@ -14029,7 +14038,7 @@ class ToolbarComponent {
|
|
|
14029
14038
|
this.displayHelpDialog = true;
|
|
14030
14039
|
}
|
|
14031
14040
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14032
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ToolbarComponent, isStandalone: true, selector: "plotting-toolbar", inputs: { imageInfo: "imageInfo", hasSpatialDataset: "hasSpatialDataset", plotTypeOptions: "plotTypeOptions", selectedPlotType: "selectedPlotType", basePlotType: "basePlotType", isoRange: "isoRange", maxIndex: "maxIndex", zIndex: "zIndex", isHeatmap: "isHeatmap", is3dRegions: "is3dRegions", isVolumeView: "isVolumeView", sliceEditor: "sliceEditor", activeDragMode: "activeDragMode", activeSurface3dMode: "activeSurface3dMode", axesVisible: "axesVisible", wireframeActive: "wireframeActive", resolutionScale: "resolutionScale", wandSensitivity: "wandSensitivity", brushSize: "brushSize", vertexEraserRadius: "vertexEraserRadius", canUndo: "canUndo", canRedo: "canRedo", stackOptions: "stackOptions", tools: "tools", imageSmoothingEnabled: "imageSmoothingEnabled", samModels: "samModels", samModelId: "samModelId", contributedTools: "contributedTools", dialogTools: "dialogTools", openDialogToolId: "openDialogToolId", toolModelIds: "toolModelIds" }, outputs: { selectPlotType: "selectPlotType", addProfileLine: "addProfileLine", toggleImageSmoothing: "toggleImageSmoothing", isoRangeChange: "isoRangeChange", openChannelHistogram: "openChannelHistogram", openSpatialControls: "openSpatialControls", openRegionEditor: "openRegionEditor", toggleSliceEditor: "toggleSliceEditor", selectStackOption: "selectStackOption", zScrub: "zScrub", zSlide: "zSlide", zIndexInput: "zIndexInput", reloadAndPlot: "reloadAndPlot", downloadImage: "downloadImage", autoscaleImage: "autoscaleImage", toggleDragMode: "toggleDragMode", zoomIn: "zoomIn", zoomOut: "zoomOut", toggleSurface3dMode: "toggleSurface3dMode", resetSurfaceCamera: "resetSurfaceCamera", toggleAxes: "toggleAxes", toggleWireframe: "toggleWireframe", selectResolution: "selectResolution", deleteRegion: "deleteRegion", undoRegion: "undoRegion", redoRegion: "redoRegion", segmentRegions: "segmentRegions", segmentCellpose: "segmentCellpose", runTool: "runTool", toggleDialogTool: "toggleDialogTool", toolModelChange: "toolModelChange", openToolParams: "openToolParams", samModelChange: "samModelChange", wandSensitivityChange: "wandSensitivityChange", brushSizeChange: "brushSizeChange", vertexEraserRadiusChange: "vertexEraserRadiusChange" }, ngImport: i0, template: "<p-toolbar>\n <div class=\"p-toolbar-group-start flex-wrap align-items-center gap-1\">\n <!-- Host-provided custom toolbar buttons, shown first (e.g. app-specific\n actions the visualization view itself doesn't own). -->\n <ng-content></ng-content>\n\n <!-- Contributed dialog tools (TOOLBAR_TOOLS, kind: 'dialog'): app-level actions\n like the host's own buttons above, so they sit right beside them. Image view\n only, the view their dialog draws over. Highlighted while the dialog is open. -->\n <ng-container *ngIf=\"isImageView\">\n <p-button\n *ngFor=\"let tool of dialogTools; trackBy: trackToolById\"\n size=\"small\"\n [text]=\"openDialogToolId !== tool.id\"\n [pTooltip]=\"tool.tooltip\"\n tooltipPosition=\"bottom\"\n [ariaLabel]=\"tool.label\"\n [attr.aria-pressed]=\"openDialogToolId === tool.id\"\n (onClick)=\"toggleDialogTool.emit(tool.id)\"\n >\n <img\n *ngIf=\"tool.icon.src\"\n [src]=\"tool.icon.src\"\n style=\"width: 1rem\"\n [alt]=\"tool.label\"\n [class]=\"openDialogToolId === tool.id ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n />\n <i *ngIf=\"tool.icon.pi\" class=\"pi {{ tool.icon.pi }}\"></i>\n </p-button>\n </ng-container>\n\n <!-- Plot type: available for any image (grayscale or RGB), and for a spatial dataset\n that brings none (its spatial modes are still a choice). -->\n <toolbar-plot-type-selector\n *ngIf=\"showPlotTypes\"\n [options]=\"plotTypeOptions\"\n [selected]=\"selectedPlotType\"\n [isosurface]=\"isIsosurfaceMode\"\n [isoRange]=\"isoRange\"\n [intensityLines]=\"isIntensityCapable\"\n (selectPlotType)=\"selectPlotType.emit($event)\"\n (isoRangeChange)=\"isoRangeChange.emit($event)\"\n (addProfileLine)=\"addProfileLine.emit()\"\n >\n </toolbar-plot-type-selector>\n <!-- Channels & Histogram: brightness/contrast, gamma, per-channel display,\n colormap/reverse/invert \u2014 opens the floating dialog. -->\n <p-button\n *ngIf=\"tools.specialTools\"\n pRipple\n size=\"small\"\n [text]=\"true\"\n ariaLabel=\"Channels & Histogram\"\n pTooltip=\"Channels & Histogram (brightness/contrast, colormap)\"\n tooltipPosition=\"bottom\"\n (onClick)=\"openChannelHistogram.emit()\"\n >\n <img src=\"assets/plotting/invert.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\" />\n </p-button>\n\n <!-- Spatial-omics controls. Only meaningful in the spatial mode, which is\n itself only offered while a dataset is loaded \u2014 so this button appears\n exactly when there is something for it to control. -->\n <p-button\n *ngIf=\"tools.specialTools && isSpatialMode\"\n pRipple\n size=\"small\"\n [text]=\"true\"\n ariaLabel=\"Spatial omics controls\"\n pTooltip=\"Spatial omics (colour by column or gene, legend, selection, distributions)\"\n tooltipPosition=\"bottom\"\n (onClick)=\"openSpatialControls.emit()\"\n >\n <img src=\"assets/plotting/spatial-omics.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\" />\n </p-button>\n\n <!-- Smoothen toggle: bilinear smoothing vs nearest-neighbour raw pixels (Image\n view only \u2014 it's an OpenSeadragon drawer setting). Highlighted when smoothing on. -->\n <p-button\n *ngIf=\"tools.specialTools && isImageView\"\n size=\"small\"\n [text]=\"!imageSmoothingEnabled\"\n ariaLabel=\"Smoothen\"\n pTooltip=\"Smoothen (turn on image smoothing)\"\n tooltipPosition=\"bottom\"\n (onClick)=\"toggleImageSmoothing.emit()\"\n >\n <img\n src=\"assets/plotting/smooth.svg\"\n style=\"width: 1rem\"\n [class]=\"imageSmoothingEnabled ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n />\n </p-button>\n\n <!-- Stack controls -->\n <toolbar-stack-controls\n *ngIf=\"imageInfo?.isStack\"\n [liveScrubber]=\"showsLiveSliceScrubber\"\n [stackToggle]=\"!showsLiveSliceScrubber && !isNapariMode && !isSpatialMode\"\n [showStack]=\"!!imageInfo?.showStack\"\n [stackOptions]=\"stackOptions\"\n [zIndex]=\"zIndex\"\n [maxIndex]=\"maxIndex\"\n (zScrub)=\"zScrub.emit($event)\"\n (zSlide)=\"zSlide.emit($event)\"\n (selectStackOption)=\"selectStackOption.emit($event)\"\n (zIndexInput)=\"zIndexInput.emit($event)\"\n (reloadAndPlot)=\"reloadAndPlot.emit()\"\n >\n </toolbar-stack-controls>\n\n <!-- Image actions (special tools) -->\n <ng-container *ngIf=\"tools.specialTools\">\n <span class=\"toolbar-separator\"></span>\n <p-button\n icon=\"pi pi-download\"\n size=\"small\"\n [text]=\"true\"\n ariaLabel=\"Download image as PNG\"\n pTooltip=\"Download image as PNG\"\n tooltipPosition=\"bottom\"\n (onClick)=\"downloadImage.emit()\"\n >\n </p-button>\n <p-button\n *ngIf=\"isHeatmap\"\n icon=\"pi pi-window-maximize\"\n size=\"small\"\n [text]=\"true\"\n ariaLabel=\"Fit to view\"\n pTooltip=\"Fit to view\"\n tooltipPosition=\"bottom\"\n (onClick)=\"autoscaleImage.emit()\"\n >\n </p-button>\n </ng-container>\n\n <toolbar-view-controls\n [isHeatmap]=\"isHeatmap\"\n [zoomTools]=\"tools.zoomTools\"\n [isImageView]=\"isImageView\"\n [activeDragMode]=\"activeDragMode\"\n [activeSurface3dMode]=\"activeSurface3dMode\"\n [isNapariMode]=\"isNapariMode\"\n [isNapariSurfaceMode]=\"isNapariSurfaceMode\"\n [isNapari3dMode]=\"isNapari3dMode\"\n [axesVisible]=\"axesVisible\"\n [wireframeActive]=\"wireframeActive\"\n [resolutionScale]=\"resolutionScale\"\n (toggleDragMode)=\"toggleDragMode.emit($event)\"\n (zoomIn)=\"zoomIn.emit()\"\n (zoomOut)=\"zoomOut.emit()\"\n (toggleSurface3dMode)=\"toggleSurface3dMode.emit($event)\"\n (resetSurfaceCamera)=\"resetSurfaceCamera.emit()\"\n (toggleAxes)=\"toggleAxes.emit()\"\n (toggleWireframe)=\"toggleWireframe.emit()\"\n (selectResolution)=\"selectResolution.emit($event)\"\n >\n </toolbar-view-controls>\n\n <!-- A volume view draws no regions; the Region Editor shows them in it in 3D, and the\n selection tool picks their surfaces there. The slice editor splits the view: the slice,\n with every region tool, beside the 3D view. -->\n <ng-container *ngIf=\"isVolumeView && !isHeatmap && !is3dRegions && tools.regionTools\">\n <span class=\"toolbar-separator\"></span>\n <p-button\n size=\"small\"\n [text]=\"!sliceEditor\"\n ariaLabel=\"Slice editor\"\n [attr.aria-pressed]=\"sliceEditor\"\n [pTooltip]=\"\n sliceEditor\n ? 'Close the slice editor'\n : 'Slice editor: the slice and the sections through x and y beside the 3D view'\n \"\n tooltipPosition=\"bottom\"\n (onClick)=\"toggleSliceEditor.emit()\"\n >\n <img\n src=\"assets/plotting/slice.svg\"\n style=\"width: 1rem\"\n alt=\"\"\n [class]=\"sliceEditor ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n />\n </p-button>\n <toolbar-region-tools\n *ngIf=\"!sliceEditor\"\n [activeDragMode]=\"activeDragMode\"\n [selectOnly]=\"true\"\n [canUndo]=\"canUndo\"\n [canRedo]=\"canRedo\"\n (openRegionEditor)=\"openRegionEditor.emit()\"\n (toggleDragMode)=\"toggleDragMode.emit($event)\"\n (undoRegion)=\"undoRegion.emit()\"\n (redoRegion)=\"redoRegion.emit()\"\n (deleteRegion)=\"deleteRegion.emit()\"\n >\n </toolbar-region-tools>\n </ng-container>\n <ng-container *ngIf=\"(isHeatmap || is3dRegions || (isVolumeView && sliceEditor)) && tools.regionTools\">\n <toolbar-region-tools\n [activeDragMode]=\"activeDragMode\"\n [is3dRegions]=\"is3dRegions\"\n [vertexTools]=\"supportsRegionVertexTools || (isVolumeView && sliceEditor)\"\n [wandSensitivity]=\"wandSensitivity\"\n [brushSize]=\"brushSize\"\n [vertexEraserRadius]=\"vertexEraserRadius\"\n [canUndo]=\"canUndo\"\n [canRedo]=\"canRedo\"\n (openRegionEditor)=\"openRegionEditor.emit()\"\n (toggleDragMode)=\"toggleDragMode.emit($event)\"\n (undoRegion)=\"undoRegion.emit()\"\n (redoRegion)=\"redoRegion.emit()\"\n (deleteRegion)=\"deleteRegion.emit()\"\n (wandSensitivityChange)=\"wandSensitivityChange.emit($event)\"\n (brushSizeChange)=\"brushSizeChange.emit($event)\"\n (vertexEraserRadiusChange)=\"vertexEraserRadiusChange.emit($event)\"\n >\n </toolbar-region-tools>\n <toolbar-segmentation-tools\n [activeDragMode]=\"activeDragMode\"\n [samModels]=\"samModels\"\n [samModelId]=\"samModelId\"\n [contributedTools]=\"contributedTools\"\n [toolModelIds]=\"toolModelIds\"\n (segmentRegions)=\"segmentRegions.emit()\"\n (segmentCellpose)=\"segmentCellpose.emit()\"\n (toggleDragMode)=\"toggleDragMode.emit($event)\"\n (samModelChange)=\"samModelChange.emit($event)\"\n (runTool)=\"runTool.emit($event)\"\n (toolModelChange)=\"toolModelChange.emit($event)\"\n (openToolParams)=\"openToolParams.emit($event)\"\n >\n </toolbar-segmentation-tools>\n </ng-container>\n\n <ng-container *ngIf=\"tools.help\">\n <span class=\"toolbar-separator\"></span>\n\n <!-- Help -->\n <p-button\n icon=\"pi pi-question-circle\"\n size=\"small\"\n [text]=\"true\"\n ariaLabel=\"Help\"\n pTooltip=\"Help\"\n tooltipPosition=\"bottom\"\n (onClick)=\"showHelp()\"\n >\n </p-button>\n </ng-container>\n </div>\n</p-toolbar>\n<toolbar-help-dialog\n [(visible)]=\"displayHelpDialog\"\n [contributedTools]=\"contributedTools\"\n [dialogTools]=\"dialogTools\"\n>\n</toolbar-help-dialog>\n", styles: [".toolbar-text{color:var(--primary-color);font-size:.875rem}.toolbar-separator{border-left:1px solid var(--surface-border);height:1.5rem;margin:0 .25rem;align-self:center}.toolbar-icon-dark{filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}.toolbar-icon-active{filter:brightness(0) invert(1)}.wand-sensitivity-value{min-width:2rem;text-align:right}:host{display:block}:host ::ng-deep .p-toolbar{padding:.25rem .5rem}::ng-deep .toolbar-input .p-inputtext{color:var(--primary-color);border-color:var(--primary-color)}::ng-deep .p-menu.model-menu{width:auto;min-width:12.5rem}::ng-deep .model-menu-item{display:flex;align-items:center;gap:.5rem}::ng-deep .model-menu-item .p-menuitem-text{flex:1 1 auto;white-space:nowrap}::ng-deep .model-menu-item .model-info-icon{flex:0 0 auto;font-size:.875rem;opacity:.55;cursor:help;appearance:none;background:none;border:0;padding:0;margin:0;color:inherit;line-height:1}::ng-deep .model-menu-item .model-info-icon:hover{opacity:1}::ng-deep .model-menu-item .model-info-icon:focus-visible{opacity:1;outline:2px solid var(--primary-color, #2196f3);outline-offset:2px;border-radius:2px}::ng-deep .model-info-tooltip .p-tooltip-text{min-width:18rem;max-width:24rem;line-height:1.4}::ng-deep .wand-sensitivity-slider{width:8rem;align-self:center;margin:0 .25rem}span.colormap{width:50px;height:auto;display:inline-block}img.colormap{width:50px;height:auto}.colormap{background:no-repeat;background-size:100%;vertical-align:middle}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i3$1.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: ToolbarModule }, { kind: "component", type: i4$1.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: ToolbarHelpDialogComponent, selector: "toolbar-help-dialog", inputs: ["visible", "contributedTools", "dialogTools"], outputs: ["visibleChange"] }, { kind: "component", type: PlotTypeSelectorComponent, selector: "toolbar-plot-type-selector", inputs: ["options", "selected", "isosurface", "isoRange", "intensityLines"], outputs: ["selectPlotType", "isoRangeChange", "addProfileLine"] }, { kind: "component", type: StackControlsComponent, selector: "toolbar-stack-controls", inputs: ["liveScrubber", "stackToggle", "showStack", "stackOptions", "zIndex", "maxIndex"], outputs: ["zScrub", "zSlide", "selectStackOption", "zIndexInput", "reloadAndPlot"] }, { kind: "component", type: ViewControlsComponent, selector: "toolbar-view-controls", inputs: ["isHeatmap", "zoomTools", "isImageView", "activeDragMode", "activeSurface3dMode", "isNapariMode", "isNapariSurfaceMode", "isNapari3dMode", "axesVisible", "wireframeActive", "resolutionScale"], outputs: ["toggleDragMode", "zoomIn", "zoomOut", "toggleSurface3dMode", "resetSurfaceCamera", "toggleAxes", "toggleWireframe", "selectResolution"] }, { kind: "component", type: RegionToolsComponent, selector: "toolbar-region-tools", inputs: ["activeDragMode", "is3dRegions", "selectOnly", "vertexTools", "wandSensitivity", "brushSize", "vertexEraserRadius", "canUndo", "canRedo"], outputs: ["openRegionEditor", "toggleDragMode", "undoRegion", "redoRegion", "deleteRegion", "wandSensitivityChange", "brushSizeChange", "vertexEraserRadiusChange"] }, { kind: "component", type: SegmentationToolsComponent, selector: "toolbar-segmentation-tools", inputs: ["activeDragMode", "samModels", "samModelId", "contributedTools", "toolModelIds"], outputs: ["segmentRegions", "segmentCellpose", "toggleDragMode", "samModelChange", "runTool", "toolModelChange", "openToolParams"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
14041
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ToolbarComponent, isStandalone: true, selector: "plotting-toolbar", inputs: { imageInfo: "imageInfo", hasSpatialDataset: "hasSpatialDataset", plotTypeOptions: "plotTypeOptions", selectedPlotType: "selectedPlotType", basePlotType: "basePlotType", isoRange: "isoRange", maxIndex: "maxIndex", zIndex: "zIndex", isHeatmap: "isHeatmap", is3dRegions: "is3dRegions", isVolumeView: "isVolumeView", sliceEditor: "sliceEditor", activeDragMode: "activeDragMode", activeSurface3dMode: "activeSurface3dMode", axesVisible: "axesVisible", wireframeActive: "wireframeActive", resolutionScale: "resolutionScale", wandSensitivity: "wandSensitivity", brushSize: "brushSize", vertexEraserRadius: "vertexEraserRadius", canUndo: "canUndo", canRedo: "canRedo", stackOptions: "stackOptions", tools: "tools", imageSmoothingEnabled: "imageSmoothingEnabled", samModels: "samModels", samModelId: "samModelId", contributedTools: "contributedTools", dialogTools: "dialogTools", openDialogToolId: "openDialogToolId", toolModelIds: "toolModelIds" }, outputs: { selectPlotType: "selectPlotType", addProfileLine: "addProfileLine", toggleImageSmoothing: "toggleImageSmoothing", isoRangeChange: "isoRangeChange", openChannelHistogram: "openChannelHistogram", openSpatialControls: "openSpatialControls", openRegionEditor: "openRegionEditor", toggleSliceEditor: "toggleSliceEditor", selectStackOption: "selectStackOption", zScrub: "zScrub", zSlide: "zSlide", zIndexInput: "zIndexInput", reloadAndPlot: "reloadAndPlot", downloadImage: "downloadImage", autoscaleImage: "autoscaleImage", toggleDragMode: "toggleDragMode", zoomIn: "zoomIn", zoomOut: "zoomOut", toggleSurface3dMode: "toggleSurface3dMode", resetSurfaceCamera: "resetSurfaceCamera", toggleAxes: "toggleAxes", toggleWireframe: "toggleWireframe", selectResolution: "selectResolution", deleteRegion: "deleteRegion", undoRegion: "undoRegion", redoRegion: "redoRegion", segmentRegions: "segmentRegions", segmentCellpose: "segmentCellpose", runTool: "runTool", toggleDialogTool: "toggleDialogTool", toolModelChange: "toolModelChange", openToolParams: "openToolParams", samModelChange: "samModelChange", wandSensitivityChange: "wandSensitivityChange", brushSizeChange: "brushSizeChange", vertexEraserRadiusChange: "vertexEraserRadiusChange" }, ngImport: i0, template: "<p-toolbar>\n <div class=\"p-toolbar-group-start flex-wrap align-items-center gap-1\">\n <!-- Host-provided custom toolbar buttons, shown first (e.g. app-specific\n actions the visualization view itself doesn't own). -->\n <ng-content></ng-content>\n\n <!-- Contributed dialog tools (TOOLBAR_TOOLS, kind: 'dialog'): app-level actions\n like the host's own buttons above, so they sit right beside them. Image view\n only, the view their dialog draws over. Highlighted while the dialog is open. -->\n <ng-container *ngIf=\"isImageView\">\n <p-button\n *ngFor=\"let tool of dialogTools; trackBy: trackToolById\"\n size=\"small\"\n [text]=\"openDialogToolId !== tool.id\"\n [pTooltip]=\"tool.tooltip\"\n tooltipPosition=\"bottom\"\n [ariaLabel]=\"tool.label\"\n [attr.aria-pressed]=\"openDialogToolId === tool.id\"\n (onClick)=\"toggleDialogTool.emit(tool.id)\"\n >\n <img\n *ngIf=\"tool.icon.src\"\n [src]=\"tool.icon.src\"\n style=\"width: 1rem\"\n [alt]=\"tool.label\"\n [class]=\"openDialogToolId === tool.id ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n />\n <i *ngIf=\"tool.icon.pi\" class=\"pi {{ tool.icon.pi }}\"></i>\n </p-button>\n </ng-container>\n\n <!-- Plot type: available for any image (grayscale or RGB), and for a spatial dataset\n that brings none (its spatial modes are still a choice). -->\n <toolbar-plot-type-selector\n *ngIf=\"showPlotTypes\"\n [options]=\"plotTypeOptions\"\n [selected]=\"selectedPlotType\"\n [isosurface]=\"isIsosurfaceMode\"\n [isoRange]=\"isoRange\"\n [intensityLines]=\"isIntensityCapable\"\n (selectPlotType)=\"selectPlotType.emit($event)\"\n (isoRangeChange)=\"isoRangeChange.emit($event)\"\n (addProfileLine)=\"addProfileLine.emit()\"\n >\n </toolbar-plot-type-selector>\n <!-- Channels & Histogram: brightness/contrast, gamma, per-channel display,\n colormap/reverse/invert \u2014 opens the floating dialog. -->\n <p-button\n *ngIf=\"tools.specialTools\"\n pRipple\n size=\"small\"\n [text]=\"true\"\n ariaLabel=\"Channels & Histogram\"\n pTooltip=\"Channels & Histogram (brightness/contrast, colormap)\"\n tooltipPosition=\"bottom\"\n (onClick)=\"openChannelHistogram.emit()\"\n >\n <img src=\"assets/plotting/invert.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\" />\n </p-button>\n\n <!-- Spatial-omics controls. Only meaningful in the spatial mode, which is\n itself only offered while a dataset is loaded \u2014 so this button appears\n exactly when there is something for it to control. -->\n <p-button\n *ngIf=\"tools.specialTools && isSpatialMode\"\n pRipple\n size=\"small\"\n [text]=\"true\"\n ariaLabel=\"Spatial omics controls\"\n pTooltip=\"Spatial omics (colour by column or gene, legend, selection, distributions)\"\n tooltipPosition=\"bottom\"\n (onClick)=\"openSpatialControls.emit()\"\n >\n <img src=\"assets/plotting/spatial-omics.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\" />\n </p-button>\n\n <!-- Smoothen toggle: bilinear smoothing vs nearest-neighbour raw pixels (Image\n view only \u2014 it's an OpenSeadragon drawer setting). Highlighted when smoothing on. -->\n <p-button\n *ngIf=\"tools.specialTools && isImageView\"\n size=\"small\"\n [text]=\"!imageSmoothingEnabled\"\n ariaLabel=\"Smoothen\"\n pTooltip=\"Smoothen (turn on image smoothing)\"\n tooltipPosition=\"bottom\"\n (onClick)=\"toggleImageSmoothing.emit()\"\n >\n <img\n src=\"assets/plotting/smooth.svg\"\n style=\"width: 1rem\"\n [class]=\"imageSmoothingEnabled ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n />\n </p-button>\n\n <!-- Stack controls -->\n <toolbar-stack-controls\n *ngIf=\"imageInfo?.isStack\"\n [liveScrubber]=\"showsLiveSliceScrubber\"\n [stackToggle]=\"!showsLiveSliceScrubber && !isNapariMode && !isSpatialMode\"\n [showStack]=\"!!imageInfo?.showStack\"\n [stackOptions]=\"stackOptions\"\n [zIndex]=\"zIndex\"\n [maxIndex]=\"maxIndex\"\n (zScrub)=\"zScrub.emit($event)\"\n (zSlide)=\"zSlide.emit($event)\"\n (selectStackOption)=\"selectStackOption.emit($event)\"\n (zIndexInput)=\"zIndexInput.emit($event)\"\n (reloadAndPlot)=\"reloadAndPlot.emit()\"\n >\n </toolbar-stack-controls>\n\n <!-- Image actions (special tools) -->\n <ng-container *ngIf=\"tools.specialTools\">\n <span class=\"toolbar-separator\"></span>\n <p-button\n icon=\"pi pi-download\"\n size=\"small\"\n [text]=\"true\"\n ariaLabel=\"Download image as PNG\"\n pTooltip=\"Download image as PNG\"\n tooltipPosition=\"bottom\"\n (onClick)=\"downloadImage.emit()\"\n >\n </p-button>\n <p-button\n *ngIf=\"isHeatmap\"\n icon=\"pi pi-window-maximize\"\n size=\"small\"\n [text]=\"true\"\n ariaLabel=\"Fit to view\"\n pTooltip=\"Fit to view\"\n tooltipPosition=\"bottom\"\n (onClick)=\"autoscaleImage.emit()\"\n >\n </p-button>\n </ng-container>\n\n <toolbar-view-controls\n [isHeatmap]=\"isHeatmap\"\n [zoomTools]=\"tools.zoomTools\"\n [isImageView]=\"isImageView\"\n [activeDragMode]=\"activeDragMode\"\n [activeSurface3dMode]=\"activeSurface3dMode\"\n [axesToggle]=\"showsAxesToggle\"\n [isNapariSurfaceMode]=\"isNapariSurfaceMode\"\n [isNapari3dMode]=\"isNapari3dMode\"\n [axesVisible]=\"axesVisible\"\n [wireframeActive]=\"wireframeActive\"\n [resolutionScale]=\"resolutionScale\"\n (toggleDragMode)=\"toggleDragMode.emit($event)\"\n (zoomIn)=\"zoomIn.emit()\"\n (zoomOut)=\"zoomOut.emit()\"\n (toggleSurface3dMode)=\"toggleSurface3dMode.emit($event)\"\n (resetSurfaceCamera)=\"resetSurfaceCamera.emit()\"\n (toggleAxes)=\"toggleAxes.emit()\"\n (toggleWireframe)=\"toggleWireframe.emit()\"\n (selectResolution)=\"selectResolution.emit($event)\"\n >\n </toolbar-view-controls>\n\n <!-- A volume view draws no regions; the Region Editor shows them in it in 3D, and the\n selection tool picks their surfaces there. The slice editor splits the view: the slice,\n with every region tool, beside the 3D view. -->\n <ng-container *ngIf=\"isVolumeView && !isHeatmap && !is3dRegions && tools.regionTools\">\n <span class=\"toolbar-separator\"></span>\n <p-button\n size=\"small\"\n [text]=\"!sliceEditor\"\n ariaLabel=\"Slice editor\"\n [attr.aria-pressed]=\"sliceEditor\"\n [pTooltip]=\"\n sliceEditor\n ? 'Close the slice editor'\n : 'Slice editor: the slice and the sections through x and y beside the 3D view'\n \"\n tooltipPosition=\"bottom\"\n (onClick)=\"toggleSliceEditor.emit()\"\n >\n <img\n src=\"assets/plotting/slice.svg\"\n style=\"width: 1rem\"\n alt=\"\"\n [class]=\"sliceEditor ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n />\n </p-button>\n <toolbar-region-tools\n *ngIf=\"!sliceEditor\"\n [activeDragMode]=\"activeDragMode\"\n [selectOnly]=\"true\"\n [canUndo]=\"canUndo\"\n [canRedo]=\"canRedo\"\n (openRegionEditor)=\"openRegionEditor.emit()\"\n (toggleDragMode)=\"toggleDragMode.emit($event)\"\n (undoRegion)=\"undoRegion.emit()\"\n (redoRegion)=\"redoRegion.emit()\"\n (deleteRegion)=\"deleteRegion.emit()\"\n >\n </toolbar-region-tools>\n </ng-container>\n <ng-container *ngIf=\"(isHeatmap || is3dRegions || (isVolumeView && sliceEditor)) && tools.regionTools\">\n <toolbar-region-tools\n [activeDragMode]=\"activeDragMode\"\n [is3dRegions]=\"is3dRegions\"\n [vertexTools]=\"supportsRegionVertexTools || (isVolumeView && sliceEditor)\"\n [wandSensitivity]=\"wandSensitivity\"\n [brushSize]=\"brushSize\"\n [vertexEraserRadius]=\"vertexEraserRadius\"\n [canUndo]=\"canUndo\"\n [canRedo]=\"canRedo\"\n (openRegionEditor)=\"openRegionEditor.emit()\"\n (toggleDragMode)=\"toggleDragMode.emit($event)\"\n (undoRegion)=\"undoRegion.emit()\"\n (redoRegion)=\"redoRegion.emit()\"\n (deleteRegion)=\"deleteRegion.emit()\"\n (wandSensitivityChange)=\"wandSensitivityChange.emit($event)\"\n (brushSizeChange)=\"brushSizeChange.emit($event)\"\n (vertexEraserRadiusChange)=\"vertexEraserRadiusChange.emit($event)\"\n >\n </toolbar-region-tools>\n <toolbar-segmentation-tools\n [activeDragMode]=\"activeDragMode\"\n [samModels]=\"samModels\"\n [samModelId]=\"samModelId\"\n [contributedTools]=\"contributedTools\"\n [toolModelIds]=\"toolModelIds\"\n (segmentRegions)=\"segmentRegions.emit()\"\n (segmentCellpose)=\"segmentCellpose.emit()\"\n (toggleDragMode)=\"toggleDragMode.emit($event)\"\n (samModelChange)=\"samModelChange.emit($event)\"\n (runTool)=\"runTool.emit($event)\"\n (toolModelChange)=\"toolModelChange.emit($event)\"\n (openToolParams)=\"openToolParams.emit($event)\"\n >\n </toolbar-segmentation-tools>\n </ng-container>\n\n <ng-container *ngIf=\"tools.help\">\n <span class=\"toolbar-separator\"></span>\n\n <!-- Help -->\n <p-button\n icon=\"pi pi-question-circle\"\n size=\"small\"\n [text]=\"true\"\n ariaLabel=\"Help\"\n pTooltip=\"Help\"\n tooltipPosition=\"bottom\"\n (onClick)=\"showHelp()\"\n >\n </p-button>\n </ng-container>\n </div>\n</p-toolbar>\n<toolbar-help-dialog\n [(visible)]=\"displayHelpDialog\"\n [contributedTools]=\"contributedTools\"\n [dialogTools]=\"dialogTools\"\n>\n</toolbar-help-dialog>\n", styles: [".toolbar-text{color:var(--primary-color);font-size:.875rem}.toolbar-separator{border-left:1px solid var(--surface-border);height:1.5rem;margin:0 .25rem;align-self:center}.toolbar-icon-dark{filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}.toolbar-icon-active{filter:brightness(0) invert(1)}.wand-sensitivity-value{min-width:2rem;text-align:right}:host{display:block}:host ::ng-deep .p-toolbar{padding:.25rem .5rem}::ng-deep .toolbar-input .p-inputtext{color:var(--primary-color);border-color:var(--primary-color)}::ng-deep .p-menu.model-menu{width:auto;min-width:12.5rem}::ng-deep .model-menu-item{display:flex;align-items:center;gap:.5rem}::ng-deep .model-menu-item .p-menuitem-text{flex:1 1 auto;white-space:nowrap}::ng-deep .model-menu-item .model-info-icon{flex:0 0 auto;font-size:.875rem;opacity:.55;cursor:help;appearance:none;background:none;border:0;padding:0;margin:0;color:inherit;line-height:1}::ng-deep .model-menu-item .model-info-icon:hover{opacity:1}::ng-deep .model-menu-item .model-info-icon:focus-visible{opacity:1;outline:2px solid var(--primary-color, #2196f3);outline-offset:2px;border-radius:2px}::ng-deep .model-info-tooltip .p-tooltip-text{min-width:18rem;max-width:24rem;line-height:1.4}::ng-deep .wand-sensitivity-slider{width:8rem;align-self:center;margin:0 .25rem}span.colormap{width:50px;height:auto;display:inline-block}img.colormap{width:50px;height:auto}.colormap{background:no-repeat;background-size:100%;vertical-align:middle}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i3$1.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: ToolbarModule }, { kind: "component", type: i4$1.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: ToolbarHelpDialogComponent, selector: "toolbar-help-dialog", inputs: ["visible", "contributedTools", "dialogTools"], outputs: ["visibleChange"] }, { kind: "component", type: PlotTypeSelectorComponent, selector: "toolbar-plot-type-selector", inputs: ["options", "selected", "isosurface", "isoRange", "intensityLines"], outputs: ["selectPlotType", "isoRangeChange", "addProfileLine"] }, { kind: "component", type: StackControlsComponent, selector: "toolbar-stack-controls", inputs: ["liveScrubber", "stackToggle", "showStack", "stackOptions", "zIndex", "maxIndex"], outputs: ["zScrub", "zSlide", "selectStackOption", "zIndexInput", "reloadAndPlot"] }, { kind: "component", type: ViewControlsComponent, selector: "toolbar-view-controls", inputs: ["isHeatmap", "zoomTools", "isImageView", "activeDragMode", "activeSurface3dMode", "isNapariSurfaceMode", "isNapari3dMode", "axesToggle", "axesVisible", "wireframeActive", "resolutionScale"], outputs: ["toggleDragMode", "zoomIn", "zoomOut", "toggleSurface3dMode", "resetSurfaceCamera", "toggleAxes", "toggleWireframe", "selectResolution"] }, { kind: "component", type: RegionToolsComponent, selector: "toolbar-region-tools", inputs: ["activeDragMode", "is3dRegions", "selectOnly", "vertexTools", "wandSensitivity", "brushSize", "vertexEraserRadius", "canUndo", "canRedo"], outputs: ["openRegionEditor", "toggleDragMode", "undoRegion", "redoRegion", "deleteRegion", "wandSensitivityChange", "brushSizeChange", "vertexEraserRadiusChange"] }, { kind: "component", type: SegmentationToolsComponent, selector: "toolbar-segmentation-tools", inputs: ["activeDragMode", "samModels", "samModelId", "contributedTools", "toolModelIds"], outputs: ["segmentRegions", "segmentCellpose", "toggleDragMode", "samModelChange", "runTool", "toolModelChange", "openToolParams"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
14033
14042
|
}
|
|
14034
14043
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ToolbarComponent, decorators: [{
|
|
14035
14044
|
type: Component,
|
|
@@ -14045,7 +14054,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
|
|
|
14045
14054
|
ViewControlsComponent,
|
|
14046
14055
|
RegionToolsComponent,
|
|
14047
14056
|
SegmentationToolsComponent,
|
|
14048
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-toolbar>\n <div class=\"p-toolbar-group-start flex-wrap align-items-center gap-1\">\n <!-- Host-provided custom toolbar buttons, shown first (e.g. app-specific\n actions the visualization view itself doesn't own). -->\n <ng-content></ng-content>\n\n <!-- Contributed dialog tools (TOOLBAR_TOOLS, kind: 'dialog'): app-level actions\n like the host's own buttons above, so they sit right beside them. Image view\n only, the view their dialog draws over. Highlighted while the dialog is open. -->\n <ng-container *ngIf=\"isImageView\">\n <p-button\n *ngFor=\"let tool of dialogTools; trackBy: trackToolById\"\n size=\"small\"\n [text]=\"openDialogToolId !== tool.id\"\n [pTooltip]=\"tool.tooltip\"\n tooltipPosition=\"bottom\"\n [ariaLabel]=\"tool.label\"\n [attr.aria-pressed]=\"openDialogToolId === tool.id\"\n (onClick)=\"toggleDialogTool.emit(tool.id)\"\n >\n <img\n *ngIf=\"tool.icon.src\"\n [src]=\"tool.icon.src\"\n style=\"width: 1rem\"\n [alt]=\"tool.label\"\n [class]=\"openDialogToolId === tool.id ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n />\n <i *ngIf=\"tool.icon.pi\" class=\"pi {{ tool.icon.pi }}\"></i>\n </p-button>\n </ng-container>\n\n <!-- Plot type: available for any image (grayscale or RGB), and for a spatial dataset\n that brings none (its spatial modes are still a choice). -->\n <toolbar-plot-type-selector\n *ngIf=\"showPlotTypes\"\n [options]=\"plotTypeOptions\"\n [selected]=\"selectedPlotType\"\n [isosurface]=\"isIsosurfaceMode\"\n [isoRange]=\"isoRange\"\n [intensityLines]=\"isIntensityCapable\"\n (selectPlotType)=\"selectPlotType.emit($event)\"\n (isoRangeChange)=\"isoRangeChange.emit($event)\"\n (addProfileLine)=\"addProfileLine.emit()\"\n >\n </toolbar-plot-type-selector>\n <!-- Channels & Histogram: brightness/contrast, gamma, per-channel display,\n colormap/reverse/invert \u2014 opens the floating dialog. -->\n <p-button\n *ngIf=\"tools.specialTools\"\n pRipple\n size=\"small\"\n [text]=\"true\"\n ariaLabel=\"Channels & Histogram\"\n pTooltip=\"Channels & Histogram (brightness/contrast, colormap)\"\n tooltipPosition=\"bottom\"\n (onClick)=\"openChannelHistogram.emit()\"\n >\n <img src=\"assets/plotting/invert.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\" />\n </p-button>\n\n <!-- Spatial-omics controls. Only meaningful in the spatial mode, which is\n itself only offered while a dataset is loaded \u2014 so this button appears\n exactly when there is something for it to control. -->\n <p-button\n *ngIf=\"tools.specialTools && isSpatialMode\"\n pRipple\n size=\"small\"\n [text]=\"true\"\n ariaLabel=\"Spatial omics controls\"\n pTooltip=\"Spatial omics (colour by column or gene, legend, selection, distributions)\"\n tooltipPosition=\"bottom\"\n (onClick)=\"openSpatialControls.emit()\"\n >\n <img src=\"assets/plotting/spatial-omics.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\" />\n </p-button>\n\n <!-- Smoothen toggle: bilinear smoothing vs nearest-neighbour raw pixels (Image\n view only \u2014 it's an OpenSeadragon drawer setting). Highlighted when smoothing on. -->\n <p-button\n *ngIf=\"tools.specialTools && isImageView\"\n size=\"small\"\n [text]=\"!imageSmoothingEnabled\"\n ariaLabel=\"Smoothen\"\n pTooltip=\"Smoothen (turn on image smoothing)\"\n tooltipPosition=\"bottom\"\n (onClick)=\"toggleImageSmoothing.emit()\"\n >\n <img\n src=\"assets/plotting/smooth.svg\"\n style=\"width: 1rem\"\n [class]=\"imageSmoothingEnabled ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n />\n </p-button>\n\n <!-- Stack controls -->\n <toolbar-stack-controls\n *ngIf=\"imageInfo?.isStack\"\n [liveScrubber]=\"showsLiveSliceScrubber\"\n [stackToggle]=\"!showsLiveSliceScrubber && !isNapariMode && !isSpatialMode\"\n [showStack]=\"!!imageInfo?.showStack\"\n [stackOptions]=\"stackOptions\"\n [zIndex]=\"zIndex\"\n [maxIndex]=\"maxIndex\"\n (zScrub)=\"zScrub.emit($event)\"\n (zSlide)=\"zSlide.emit($event)\"\n (selectStackOption)=\"selectStackOption.emit($event)\"\n (zIndexInput)=\"zIndexInput.emit($event)\"\n (reloadAndPlot)=\"reloadAndPlot.emit()\"\n >\n </toolbar-stack-controls>\n\n <!-- Image actions (special tools) -->\n <ng-container *ngIf=\"tools.specialTools\">\n <span class=\"toolbar-separator\"></span>\n <p-button\n icon=\"pi pi-download\"\n size=\"small\"\n [text]=\"true\"\n ariaLabel=\"Download image as PNG\"\n pTooltip=\"Download image as PNG\"\n tooltipPosition=\"bottom\"\n (onClick)=\"downloadImage.emit()\"\n >\n </p-button>\n <p-button\n *ngIf=\"isHeatmap\"\n icon=\"pi pi-window-maximize\"\n size=\"small\"\n [text]=\"true\"\n ariaLabel=\"Fit to view\"\n pTooltip=\"Fit to view\"\n tooltipPosition=\"bottom\"\n (onClick)=\"autoscaleImage.emit()\"\n >\n </p-button>\n </ng-container>\n\n <toolbar-view-controls\n [isHeatmap]=\"isHeatmap\"\n [zoomTools]=\"tools.zoomTools\"\n [isImageView]=\"isImageView\"\n [activeDragMode]=\"activeDragMode\"\n [activeSurface3dMode]=\"activeSurface3dMode\"\n [isNapariMode]=\"isNapariMode\"\n [isNapariSurfaceMode]=\"isNapariSurfaceMode\"\n [isNapari3dMode]=\"isNapari3dMode\"\n [axesVisible]=\"axesVisible\"\n [wireframeActive]=\"wireframeActive\"\n [resolutionScale]=\"resolutionScale\"\n (toggleDragMode)=\"toggleDragMode.emit($event)\"\n (zoomIn)=\"zoomIn.emit()\"\n (zoomOut)=\"zoomOut.emit()\"\n (toggleSurface3dMode)=\"toggleSurface3dMode.emit($event)\"\n (resetSurfaceCamera)=\"resetSurfaceCamera.emit()\"\n (toggleAxes)=\"toggleAxes.emit()\"\n (toggleWireframe)=\"toggleWireframe.emit()\"\n (selectResolution)=\"selectResolution.emit($event)\"\n >\n </toolbar-view-controls>\n\n <!-- A volume view draws no regions; the Region Editor shows them in it in 3D, and the\n selection tool picks their surfaces there. The slice editor splits the view: the slice,\n with every region tool, beside the 3D view. -->\n <ng-container *ngIf=\"isVolumeView && !isHeatmap && !is3dRegions && tools.regionTools\">\n <span class=\"toolbar-separator\"></span>\n <p-button\n size=\"small\"\n [text]=\"!sliceEditor\"\n ariaLabel=\"Slice editor\"\n [attr.aria-pressed]=\"sliceEditor\"\n [pTooltip]=\"\n sliceEditor\n ? 'Close the slice editor'\n : 'Slice editor: the slice and the sections through x and y beside the 3D view'\n \"\n tooltipPosition=\"bottom\"\n (onClick)=\"toggleSliceEditor.emit()\"\n >\n <img\n src=\"assets/plotting/slice.svg\"\n style=\"width: 1rem\"\n alt=\"\"\n [class]=\"sliceEditor ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n />\n </p-button>\n <toolbar-region-tools\n *ngIf=\"!sliceEditor\"\n [activeDragMode]=\"activeDragMode\"\n [selectOnly]=\"true\"\n [canUndo]=\"canUndo\"\n [canRedo]=\"canRedo\"\n (openRegionEditor)=\"openRegionEditor.emit()\"\n (toggleDragMode)=\"toggleDragMode.emit($event)\"\n (undoRegion)=\"undoRegion.emit()\"\n (redoRegion)=\"redoRegion.emit()\"\n (deleteRegion)=\"deleteRegion.emit()\"\n >\n </toolbar-region-tools>\n </ng-container>\n <ng-container *ngIf=\"(isHeatmap || is3dRegions || (isVolumeView && sliceEditor)) && tools.regionTools\">\n <toolbar-region-tools\n [activeDragMode]=\"activeDragMode\"\n [is3dRegions]=\"is3dRegions\"\n [vertexTools]=\"supportsRegionVertexTools || (isVolumeView && sliceEditor)\"\n [wandSensitivity]=\"wandSensitivity\"\n [brushSize]=\"brushSize\"\n [vertexEraserRadius]=\"vertexEraserRadius\"\n [canUndo]=\"canUndo\"\n [canRedo]=\"canRedo\"\n (openRegionEditor)=\"openRegionEditor.emit()\"\n (toggleDragMode)=\"toggleDragMode.emit($event)\"\n (undoRegion)=\"undoRegion.emit()\"\n (redoRegion)=\"redoRegion.emit()\"\n (deleteRegion)=\"deleteRegion.emit()\"\n (wandSensitivityChange)=\"wandSensitivityChange.emit($event)\"\n (brushSizeChange)=\"brushSizeChange.emit($event)\"\n (vertexEraserRadiusChange)=\"vertexEraserRadiusChange.emit($event)\"\n >\n </toolbar-region-tools>\n <toolbar-segmentation-tools\n [activeDragMode]=\"activeDragMode\"\n [samModels]=\"samModels\"\n [samModelId]=\"samModelId\"\n [contributedTools]=\"contributedTools\"\n [toolModelIds]=\"toolModelIds\"\n (segmentRegions)=\"segmentRegions.emit()\"\n (segmentCellpose)=\"segmentCellpose.emit()\"\n (toggleDragMode)=\"toggleDragMode.emit($event)\"\n (samModelChange)=\"samModelChange.emit($event)\"\n (runTool)=\"runTool.emit($event)\"\n (toolModelChange)=\"toolModelChange.emit($event)\"\n (openToolParams)=\"openToolParams.emit($event)\"\n >\n </toolbar-segmentation-tools>\n </ng-container>\n\n <ng-container *ngIf=\"tools.help\">\n <span class=\"toolbar-separator\"></span>\n\n <!-- Help -->\n <p-button\n icon=\"pi pi-question-circle\"\n size=\"small\"\n [text]=\"true\"\n ariaLabel=\"Help\"\n pTooltip=\"Help\"\n tooltipPosition=\"bottom\"\n (onClick)=\"showHelp()\"\n >\n </p-button>\n </ng-container>\n </div>\n</p-toolbar>\n<toolbar-help-dialog\n [(visible)]=\"displayHelpDialog\"\n [contributedTools]=\"contributedTools\"\n [dialogTools]=\"dialogTools\"\n>\n</toolbar-help-dialog>\n", styles: [".toolbar-text{color:var(--primary-color);font-size:.875rem}.toolbar-separator{border-left:1px solid var(--surface-border);height:1.5rem;margin:0 .25rem;align-self:center}.toolbar-icon-dark{filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}.toolbar-icon-active{filter:brightness(0) invert(1)}.wand-sensitivity-value{min-width:2rem;text-align:right}:host{display:block}:host ::ng-deep .p-toolbar{padding:.25rem .5rem}::ng-deep .toolbar-input .p-inputtext{color:var(--primary-color);border-color:var(--primary-color)}::ng-deep .p-menu.model-menu{width:auto;min-width:12.5rem}::ng-deep .model-menu-item{display:flex;align-items:center;gap:.5rem}::ng-deep .model-menu-item .p-menuitem-text{flex:1 1 auto;white-space:nowrap}::ng-deep .model-menu-item .model-info-icon{flex:0 0 auto;font-size:.875rem;opacity:.55;cursor:help;appearance:none;background:none;border:0;padding:0;margin:0;color:inherit;line-height:1}::ng-deep .model-menu-item .model-info-icon:hover{opacity:1}::ng-deep .model-menu-item .model-info-icon:focus-visible{opacity:1;outline:2px solid var(--primary-color, #2196f3);outline-offset:2px;border-radius:2px}::ng-deep .model-info-tooltip .p-tooltip-text{min-width:18rem;max-width:24rem;line-height:1.4}::ng-deep .wand-sensitivity-slider{width:8rem;align-self:center;margin:0 .25rem}span.colormap{width:50px;height:auto;display:inline-block}img.colormap{width:50px;height:auto}.colormap{background:no-repeat;background-size:100%;vertical-align:middle}\n"] }]
|
|
14057
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-toolbar>\n <div class=\"p-toolbar-group-start flex-wrap align-items-center gap-1\">\n <!-- Host-provided custom toolbar buttons, shown first (e.g. app-specific\n actions the visualization view itself doesn't own). -->\n <ng-content></ng-content>\n\n <!-- Contributed dialog tools (TOOLBAR_TOOLS, kind: 'dialog'): app-level actions\n like the host's own buttons above, so they sit right beside them. Image view\n only, the view their dialog draws over. Highlighted while the dialog is open. -->\n <ng-container *ngIf=\"isImageView\">\n <p-button\n *ngFor=\"let tool of dialogTools; trackBy: trackToolById\"\n size=\"small\"\n [text]=\"openDialogToolId !== tool.id\"\n [pTooltip]=\"tool.tooltip\"\n tooltipPosition=\"bottom\"\n [ariaLabel]=\"tool.label\"\n [attr.aria-pressed]=\"openDialogToolId === tool.id\"\n (onClick)=\"toggleDialogTool.emit(tool.id)\"\n >\n <img\n *ngIf=\"tool.icon.src\"\n [src]=\"tool.icon.src\"\n style=\"width: 1rem\"\n [alt]=\"tool.label\"\n [class]=\"openDialogToolId === tool.id ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n />\n <i *ngIf=\"tool.icon.pi\" class=\"pi {{ tool.icon.pi }}\"></i>\n </p-button>\n </ng-container>\n\n <!-- Plot type: available for any image (grayscale or RGB), and for a spatial dataset\n that brings none (its spatial modes are still a choice). -->\n <toolbar-plot-type-selector\n *ngIf=\"showPlotTypes\"\n [options]=\"plotTypeOptions\"\n [selected]=\"selectedPlotType\"\n [isosurface]=\"isIsosurfaceMode\"\n [isoRange]=\"isoRange\"\n [intensityLines]=\"isIntensityCapable\"\n (selectPlotType)=\"selectPlotType.emit($event)\"\n (isoRangeChange)=\"isoRangeChange.emit($event)\"\n (addProfileLine)=\"addProfileLine.emit()\"\n >\n </toolbar-plot-type-selector>\n <!-- Channels & Histogram: brightness/contrast, gamma, per-channel display,\n colormap/reverse/invert \u2014 opens the floating dialog. -->\n <p-button\n *ngIf=\"tools.specialTools\"\n pRipple\n size=\"small\"\n [text]=\"true\"\n ariaLabel=\"Channels & Histogram\"\n pTooltip=\"Channels & Histogram (brightness/contrast, colormap)\"\n tooltipPosition=\"bottom\"\n (onClick)=\"openChannelHistogram.emit()\"\n >\n <img src=\"assets/plotting/invert.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\" />\n </p-button>\n\n <!-- Spatial-omics controls. Only meaningful in the spatial mode, which is\n itself only offered while a dataset is loaded \u2014 so this button appears\n exactly when there is something for it to control. -->\n <p-button\n *ngIf=\"tools.specialTools && isSpatialMode\"\n pRipple\n size=\"small\"\n [text]=\"true\"\n ariaLabel=\"Spatial omics controls\"\n pTooltip=\"Spatial omics (colour by column or gene, legend, selection, distributions)\"\n tooltipPosition=\"bottom\"\n (onClick)=\"openSpatialControls.emit()\"\n >\n <img src=\"assets/plotting/spatial-omics.svg\" class=\"toolbar-icon-dark\" style=\"width: 1rem\" />\n </p-button>\n\n <!-- Smoothen toggle: bilinear smoothing vs nearest-neighbour raw pixels (Image\n view only \u2014 it's an OpenSeadragon drawer setting). Highlighted when smoothing on. -->\n <p-button\n *ngIf=\"tools.specialTools && isImageView\"\n size=\"small\"\n [text]=\"!imageSmoothingEnabled\"\n ariaLabel=\"Smoothen\"\n pTooltip=\"Smoothen (turn on image smoothing)\"\n tooltipPosition=\"bottom\"\n (onClick)=\"toggleImageSmoothing.emit()\"\n >\n <img\n src=\"assets/plotting/smooth.svg\"\n style=\"width: 1rem\"\n [class]=\"imageSmoothingEnabled ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n />\n </p-button>\n\n <!-- Stack controls -->\n <toolbar-stack-controls\n *ngIf=\"imageInfo?.isStack\"\n [liveScrubber]=\"showsLiveSliceScrubber\"\n [stackToggle]=\"!showsLiveSliceScrubber && !isNapariMode && !isSpatialMode\"\n [showStack]=\"!!imageInfo?.showStack\"\n [stackOptions]=\"stackOptions\"\n [zIndex]=\"zIndex\"\n [maxIndex]=\"maxIndex\"\n (zScrub)=\"zScrub.emit($event)\"\n (zSlide)=\"zSlide.emit($event)\"\n (selectStackOption)=\"selectStackOption.emit($event)\"\n (zIndexInput)=\"zIndexInput.emit($event)\"\n (reloadAndPlot)=\"reloadAndPlot.emit()\"\n >\n </toolbar-stack-controls>\n\n <!-- Image actions (special tools) -->\n <ng-container *ngIf=\"tools.specialTools\">\n <span class=\"toolbar-separator\"></span>\n <p-button\n icon=\"pi pi-download\"\n size=\"small\"\n [text]=\"true\"\n ariaLabel=\"Download image as PNG\"\n pTooltip=\"Download image as PNG\"\n tooltipPosition=\"bottom\"\n (onClick)=\"downloadImage.emit()\"\n >\n </p-button>\n <p-button\n *ngIf=\"isHeatmap\"\n icon=\"pi pi-window-maximize\"\n size=\"small\"\n [text]=\"true\"\n ariaLabel=\"Fit to view\"\n pTooltip=\"Fit to view\"\n tooltipPosition=\"bottom\"\n (onClick)=\"autoscaleImage.emit()\"\n >\n </p-button>\n </ng-container>\n\n <toolbar-view-controls\n [isHeatmap]=\"isHeatmap\"\n [zoomTools]=\"tools.zoomTools\"\n [isImageView]=\"isImageView\"\n [activeDragMode]=\"activeDragMode\"\n [activeSurface3dMode]=\"activeSurface3dMode\"\n [axesToggle]=\"showsAxesToggle\"\n [isNapariSurfaceMode]=\"isNapariSurfaceMode\"\n [isNapari3dMode]=\"isNapari3dMode\"\n [axesVisible]=\"axesVisible\"\n [wireframeActive]=\"wireframeActive\"\n [resolutionScale]=\"resolutionScale\"\n (toggleDragMode)=\"toggleDragMode.emit($event)\"\n (zoomIn)=\"zoomIn.emit()\"\n (zoomOut)=\"zoomOut.emit()\"\n (toggleSurface3dMode)=\"toggleSurface3dMode.emit($event)\"\n (resetSurfaceCamera)=\"resetSurfaceCamera.emit()\"\n (toggleAxes)=\"toggleAxes.emit()\"\n (toggleWireframe)=\"toggleWireframe.emit()\"\n (selectResolution)=\"selectResolution.emit($event)\"\n >\n </toolbar-view-controls>\n\n <!-- A volume view draws no regions; the Region Editor shows them in it in 3D, and the\n selection tool picks their surfaces there. The slice editor splits the view: the slice,\n with every region tool, beside the 3D view. -->\n <ng-container *ngIf=\"isVolumeView && !isHeatmap && !is3dRegions && tools.regionTools\">\n <span class=\"toolbar-separator\"></span>\n <p-button\n size=\"small\"\n [text]=\"!sliceEditor\"\n ariaLabel=\"Slice editor\"\n [attr.aria-pressed]=\"sliceEditor\"\n [pTooltip]=\"\n sliceEditor\n ? 'Close the slice editor'\n : 'Slice editor: the slice and the sections through x and y beside the 3D view'\n \"\n tooltipPosition=\"bottom\"\n (onClick)=\"toggleSliceEditor.emit()\"\n >\n <img\n src=\"assets/plotting/slice.svg\"\n style=\"width: 1rem\"\n alt=\"\"\n [class]=\"sliceEditor ? 'toolbar-icon-active' : 'toolbar-icon-dark'\"\n />\n </p-button>\n <toolbar-region-tools\n *ngIf=\"!sliceEditor\"\n [activeDragMode]=\"activeDragMode\"\n [selectOnly]=\"true\"\n [canUndo]=\"canUndo\"\n [canRedo]=\"canRedo\"\n (openRegionEditor)=\"openRegionEditor.emit()\"\n (toggleDragMode)=\"toggleDragMode.emit($event)\"\n (undoRegion)=\"undoRegion.emit()\"\n (redoRegion)=\"redoRegion.emit()\"\n (deleteRegion)=\"deleteRegion.emit()\"\n >\n </toolbar-region-tools>\n </ng-container>\n <ng-container *ngIf=\"(isHeatmap || is3dRegions || (isVolumeView && sliceEditor)) && tools.regionTools\">\n <toolbar-region-tools\n [activeDragMode]=\"activeDragMode\"\n [is3dRegions]=\"is3dRegions\"\n [vertexTools]=\"supportsRegionVertexTools || (isVolumeView && sliceEditor)\"\n [wandSensitivity]=\"wandSensitivity\"\n [brushSize]=\"brushSize\"\n [vertexEraserRadius]=\"vertexEraserRadius\"\n [canUndo]=\"canUndo\"\n [canRedo]=\"canRedo\"\n (openRegionEditor)=\"openRegionEditor.emit()\"\n (toggleDragMode)=\"toggleDragMode.emit($event)\"\n (undoRegion)=\"undoRegion.emit()\"\n (redoRegion)=\"redoRegion.emit()\"\n (deleteRegion)=\"deleteRegion.emit()\"\n (wandSensitivityChange)=\"wandSensitivityChange.emit($event)\"\n (brushSizeChange)=\"brushSizeChange.emit($event)\"\n (vertexEraserRadiusChange)=\"vertexEraserRadiusChange.emit($event)\"\n >\n </toolbar-region-tools>\n <toolbar-segmentation-tools\n [activeDragMode]=\"activeDragMode\"\n [samModels]=\"samModels\"\n [samModelId]=\"samModelId\"\n [contributedTools]=\"contributedTools\"\n [toolModelIds]=\"toolModelIds\"\n (segmentRegions)=\"segmentRegions.emit()\"\n (segmentCellpose)=\"segmentCellpose.emit()\"\n (toggleDragMode)=\"toggleDragMode.emit($event)\"\n (samModelChange)=\"samModelChange.emit($event)\"\n (runTool)=\"runTool.emit($event)\"\n (toolModelChange)=\"toolModelChange.emit($event)\"\n (openToolParams)=\"openToolParams.emit($event)\"\n >\n </toolbar-segmentation-tools>\n </ng-container>\n\n <ng-container *ngIf=\"tools.help\">\n <span class=\"toolbar-separator\"></span>\n\n <!-- Help -->\n <p-button\n icon=\"pi pi-question-circle\"\n size=\"small\"\n [text]=\"true\"\n ariaLabel=\"Help\"\n pTooltip=\"Help\"\n tooltipPosition=\"bottom\"\n (onClick)=\"showHelp()\"\n >\n </p-button>\n </ng-container>\n </div>\n</p-toolbar>\n<toolbar-help-dialog\n [(visible)]=\"displayHelpDialog\"\n [contributedTools]=\"contributedTools\"\n [dialogTools]=\"dialogTools\"\n>\n</toolbar-help-dialog>\n", styles: [".toolbar-text{color:var(--primary-color);font-size:.875rem}.toolbar-separator{border-left:1px solid var(--surface-border);height:1.5rem;margin:0 .25rem;align-self:center}.toolbar-icon-dark{filter:brightness(0) invert(47%) sepia(98%) saturate(567%) hue-rotate(181deg) brightness(103%) contrast(98%)}.toolbar-icon-active{filter:brightness(0) invert(1)}.wand-sensitivity-value{min-width:2rem;text-align:right}:host{display:block}:host ::ng-deep .p-toolbar{padding:.25rem .5rem}::ng-deep .toolbar-input .p-inputtext{color:var(--primary-color);border-color:var(--primary-color)}::ng-deep .p-menu.model-menu{width:auto;min-width:12.5rem}::ng-deep .model-menu-item{display:flex;align-items:center;gap:.5rem}::ng-deep .model-menu-item .p-menuitem-text{flex:1 1 auto;white-space:nowrap}::ng-deep .model-menu-item .model-info-icon{flex:0 0 auto;font-size:.875rem;opacity:.55;cursor:help;appearance:none;background:none;border:0;padding:0;margin:0;color:inherit;line-height:1}::ng-deep .model-menu-item .model-info-icon:hover{opacity:1}::ng-deep .model-menu-item .model-info-icon:focus-visible{opacity:1;outline:2px solid var(--primary-color, #2196f3);outline-offset:2px;border-radius:2px}::ng-deep .model-info-tooltip .p-tooltip-text{min-width:18rem;max-width:24rem;line-height:1.4}::ng-deep .wand-sensitivity-slider{width:8rem;align-self:center;margin:0 .25rem}span.colormap{width:50px;height:auto;display:inline-block}img.colormap{width:50px;height:auto}.colormap{background:no-repeat;background-size:100%;vertical-align:middle}\n"] }]
|
|
14049
14058
|
}], propDecorators: { imageInfo: [{
|
|
14050
14059
|
type: Input
|
|
14051
14060
|
}], hasSpatialDataset: [{
|
|
@@ -23372,6 +23381,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
|
|
|
23372
23381
|
|
|
23373
23382
|
/** Rows of the all-genes list drawn at once; the filter narrows the rest. */
|
|
23374
23383
|
const ALL_GENES_ROWS = 200;
|
|
23384
|
+
/** Names in reading order: case aside, and `G9` before `G10`. */
|
|
23385
|
+
const byName = (a, b) => a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' });
|
|
23375
23386
|
/**
|
|
23376
23387
|
* The selected transcript genes as Xenium Explorer's tree: the gene groups, then the
|
|
23377
23388
|
* ungrouped genes, each row with an eye that hides it without deselecting it, its marker
|
|
@@ -23380,6 +23391,11 @@ const ALL_GENES_ROWS = 200;
|
|
|
23380
23391
|
* expands to every gene of the dataset, each with its eye when the dataset lists its genes
|
|
23381
23392
|
* in code order (`transcriptTiles.genes`), filtered by name past a few hundred.
|
|
23382
23393
|
*
|
|
23394
|
+
* Both lists are ordered by name, or by their transcripts in view, most first (the
|
|
23395
|
+
* sort switch, offered once the renderer reports counts). The all-genes list is sorted
|
|
23396
|
+
* before it is cut to its first rows, so by count those are the genes with the most
|
|
23397
|
+
* transcripts in view.
|
|
23398
|
+
*
|
|
23383
23399
|
* Writes only through `controls.setViewState`.
|
|
23384
23400
|
*/
|
|
23385
23401
|
class SpatialGeneTreeComponent {
|
|
@@ -23399,6 +23415,10 @@ class SpatialGeneTreeComponent {
|
|
|
23399
23415
|
/** Swatches in the picker: the categorical palette genes are coloured from by default. */
|
|
23400
23416
|
/** The tree, rebuilt when the view changes — never per change-detection pass. */
|
|
23401
23417
|
this.geneTree = [];
|
|
23418
|
+
/** {@link geneTree} with each node's genes in {@link geneSort} order: what the template draws. */
|
|
23419
|
+
this.sortedTree = [];
|
|
23420
|
+
/** The rows' order. By count only while the renderer reports counts (see {@link sortShown}). */
|
|
23421
|
+
this.geneSort = 'name';
|
|
23402
23422
|
/** Per gene: its eye, swatch, glyph and count — rebuilt with the inputs (and when the
|
|
23403
23423
|
* cells' group colours arrive), so the template does no per-row lookups per check. */
|
|
23404
23424
|
this.rows = new Map();
|
|
@@ -23460,8 +23480,30 @@ class SpatialGeneTreeComponent {
|
|
|
23460
23480
|
.filter((node) => node.name)
|
|
23461
23481
|
.map((node) => [node.name, this.areGenesShown(node.genes)]));
|
|
23462
23482
|
this.rootShown = this.view.transcriptAllGenes ? this.anyOfAllGenesShown() : this.areGenesShown(genes);
|
|
23483
|
+
this.sortedTree = this.geneTree.map((node) => ({ ...node, genes: this.sorted(node.genes) }));
|
|
23463
23484
|
this.rebuildAllRows();
|
|
23464
23485
|
}
|
|
23486
|
+
/** Whether the rows are ordered by count: chosen, and counts to order by. */
|
|
23487
|
+
get byCount() {
|
|
23488
|
+
return this.geneSort === 'count' && !!this.geneCounts;
|
|
23489
|
+
}
|
|
23490
|
+
/** The sort switch is offered once there are counts to sort by. */
|
|
23491
|
+
get sortShown() {
|
|
23492
|
+
return !!this.geneCounts;
|
|
23493
|
+
}
|
|
23494
|
+
onGeneSort(sort) {
|
|
23495
|
+
if (sort === this.geneSort)
|
|
23496
|
+
return;
|
|
23497
|
+
this.geneSort = sort;
|
|
23498
|
+
this.rebuildRows();
|
|
23499
|
+
}
|
|
23500
|
+
/** `genes` in the rows' order: by count, most first (ties by name), else by name. */
|
|
23501
|
+
sorted(genes) {
|
|
23502
|
+
if (!this.byCount)
|
|
23503
|
+
return [...genes].sort(byName);
|
|
23504
|
+
const counts = this.geneCounts ?? {};
|
|
23505
|
+
return [...genes].sort((a, b) => (counts[b] ?? 0) - (counts[a] ?? 0) || byName(a, b));
|
|
23506
|
+
}
|
|
23465
23507
|
/**
|
|
23466
23508
|
* The all-genes list's rows: the genes matching the filter, up to the cap. Built only while
|
|
23467
23509
|
* the list is open: the counts in view change with every pan, and the list can be thousands.
|
|
@@ -23475,24 +23517,24 @@ class SpatialGeneTreeComponent {
|
|
|
23475
23517
|
}
|
|
23476
23518
|
const needle = this.allGenesFilter.trim().toLowerCase();
|
|
23477
23519
|
const shown = allGeneShownBy(this.view.transcriptAllGenesHidden);
|
|
23478
|
-
|
|
23479
|
-
|
|
23520
|
+
// Every match, ordered, and only then cut: by count the first rows are the most abundant.
|
|
23521
|
+
const codes = new Map();
|
|
23480
23522
|
list.forEach((gene, code) => {
|
|
23481
23523
|
// An empty name is a code no transcript carries (a control probe).
|
|
23482
23524
|
if (!gene || (needle && !gene.toLowerCase().includes(needle)))
|
|
23483
23525
|
return;
|
|
23484
|
-
|
|
23485
|
-
|
|
23486
|
-
return;
|
|
23487
|
-
rows.push({
|
|
23488
|
-
gene,
|
|
23489
|
-
shown: shown(gene),
|
|
23490
|
-
swatch: this.canHideAllGenes ? this.allGeneColorOf(gene, code) : null,
|
|
23491
|
-
count: this.geneCountOf(gene),
|
|
23492
|
-
});
|
|
23526
|
+
if (!codes.has(gene))
|
|
23527
|
+
codes.set(gene, code);
|
|
23493
23528
|
});
|
|
23494
|
-
this.allRows =
|
|
23495
|
-
|
|
23529
|
+
this.allRows = this.sorted([...codes.keys()])
|
|
23530
|
+
.slice(0, ALL_GENES_ROWS)
|
|
23531
|
+
.map((gene) => ({
|
|
23532
|
+
gene,
|
|
23533
|
+
shown: shown(gene),
|
|
23534
|
+
swatch: this.canHideAllGenes ? this.allGeneColorOf(gene, codes.get(gene)) : null,
|
|
23535
|
+
count: this.geneCountOf(gene),
|
|
23536
|
+
}));
|
|
23537
|
+
this.allGenesMatched = codes.size;
|
|
23496
23538
|
}
|
|
23497
23539
|
/** Whether "All genes" draws anything: not switched off whole, nor every listed gene hidden. */
|
|
23498
23540
|
anyOfAllGenesShown() {
|
|
@@ -23647,7 +23689,7 @@ class SpatialGeneTreeComponent {
|
|
|
23647
23689
|
});
|
|
23648
23690
|
}
|
|
23649
23691
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SpatialGeneTreeComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
23650
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: SpatialGeneTreeComponent, isStandalone: true, selector: "spatial-gene-tree", inputs: { controls: "controls", dataset: "dataset", view: "view", geneCounts: "geneCounts", geneTotal: "geneTotal" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"sc-subhead\">Selected genes</div>\n<div class=\"sc-gene-tree\">\n <div class=\"sc-gene-row sc-gene-root\">\n <button\n type=\"button\"\n class=\"sc-eye\"\n (click)=\"\n view.transcriptAllGenes ? onAllGenesShown(!rootShown) : onGenesShown(view.transcriptGenes, !rootShown)\n \"\n >\n <i class=\"pi\" [class.pi-eye]=\"rootShown\" [class.pi-eye-slash]=\"!rootShown\"></i>\n </button>\n <span class=\"sc-group-label\">Genes</span>\n <span class=\"sc-count\"\n >({{ (view.transcriptAllGenes ? geneTotal : view.transcriptGenes.length) | number }}/{{\n geneTotal | number\n }})</span\n >\n <button\n type=\"button\"\n class=\"sc-icon-btn\"\n (click)=\"geneTreeOpen = !geneTreeOpen\"\n *ngIf=\"!view.transcriptAllGenes && view.transcriptGenes.length\"\n >\n <i class=\"pi\" [class.pi-chevron-down]=\"geneTreeOpen\" [class.pi-chevron-right]=\"!geneTreeOpen\"></i>\n </button>\n <button\n type=\"button\"\n class=\"sc-icon-btn\"\n (click)=\"toggleAllGenesOpen()\"\n *ngIf=\"view.transcriptAllGenes && allGeneList?.length\"\n [attr.aria-label]=\"allGenesOpen ? 'Hide the gene list' : 'Show every gene'\"\n >\n <i class=\"pi\" [class.pi-chevron-down]=\"allGenesOpen\" [class.pi-chevron-right]=\"!allGenesOpen\"></i>\n </button>\n </div>\n <!-- \"All genes\": every gene of the dataset, each with its eye when the dataset says which\n transcripts are whose (its gene list in code order). -->\n <ng-container *ngIf=\"allGenesOpen && view.transcriptAllGenes && allGeneList?.length\">\n <input\n pInputText\n class=\"sc-gene-filter\"\n placeholder=\"Filter genes\u2026\"\n aria-label=\"Filter genes\"\n [value]=\"allGenesFilter\"\n (input)=\"onAllGenesFilter($any($event.target).value)\"\n />\n <small class=\"sc-hint\" *ngIf=\"!canHideAllGenes\">\n This dataset does not say which transcripts are whose, so its genes cannot be hidden one by one.\n </small>\n <small class=\"sc-hint\" *ngIf=\"canHideAllGenes && view.transcriptMode === 'density'\">\n The density map draws every gene as one raster: genes are hidden one by one as circles or icons.\n </small>\n <div class=\"sc-gene-row sc-gene-leaf nested\" *ngFor=\"let row of allRows; trackBy: trackByAllRow\">\n <button\n type=\"button\"\n class=\"sc-eye\"\n [disabled]=\"!canHideAllGenes || view.transcriptMode === 'density'\"\n (click)=\"onAllGeneShown(row.gene, !row.shown)\"\n >\n <i class=\"pi\" [class.pi-eye]=\"row.shown\" [class.pi-eye-slash]=\"!row.shown\"></i>\n </button>\n <span class=\"sc-gene-icon\" *ngIf=\"row.swatch\" [style.color]=\"row.swatch\" aria-hidden=\"true\">\n <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\"><circle r=\"0.75\"></circle></svg>\n </span>\n <span class=\"sc-group-label\" [title]=\"row.gene\">{{ row.gene }}</span>\n <span class=\"sc-gene-count\" *ngIf=\"row.count !== null\" title=\"Transcripts in view\">{{\n row.count | number\n }}</span>\n </div>\n <small class=\"sc-hint\" *ngIf=\"allGenesMatched > allRows.length\">\n Showing {{ allRows.length | number }} of {{ allGenesMatched | number }} genes: filter to find the others.\n </small>\n <small class=\"sc-hint\" *ngIf=\"allGenesMatched === 0\">No gene matches.</small>\n </ng-container>\n <ng-container *ngIf=\"geneTreeOpen && !view.transcriptAllGenes\">\n <ng-container *ngFor=\"let node of geneTree; trackBy: trackByNode\">\n <div class=\"sc-gene-row sc-gene-group\" *ngIf=\"node.name\">\n <button type=\"button\" class=\"sc-eye\" (click)=\"onGenesShown(node.genes, !groupShown.get(node.name))\">\n <i\n class=\"pi\"\n [class.pi-eye]=\"groupShown.get(node.name)\"\n [class.pi-eye-slash]=\"!groupShown.get(node.name)\"\n ></i>\n </button>\n <span class=\"sc-group-label\" [title]=\"node.name\">{{ node.name }}</span>\n <span class=\"sc-count\">({{ node.genes.length }})</span>\n <button type=\"button\" class=\"sc-icon-btn\" (click)=\"toggleGeneGroup(node.name)\">\n <i\n class=\"pi\"\n [class.pi-chevron-down]=\"!collapsedGeneGroups.has(node.name)\"\n [class.pi-chevron-right]=\"collapsedGeneGroups.has(node.name)\"\n ></i>\n </button>\n </div>\n <ng-container *ngIf=\"!node.name || !collapsedGeneGroups.has(node.name)\">\n <div\n class=\"sc-gene-row sc-gene-leaf\"\n [class.nested]=\"!!node.name\"\n *ngFor=\"let gene of node.genes; trackBy: trackByLabelString\"\n >\n <button type=\"button\" class=\"sc-eye\" (click)=\"onGenesShown([gene], !rows.get(gene)?.shown)\">\n <i class=\"pi\" [class.pi-eye]=\"rows.get(gene)?.shown\" [class.pi-eye-slash]=\"!rows.get(gene)?.shown\"></i>\n </button>\n <!-- The gene's marker, in its colour: its icon in Icons mode, a dot for circles.\n Clicking it opens the icon and colour picker (as Xenium Explorer does). -->\n <button\n type=\"button\"\n class=\"sc-gene-icon\"\n [style.color]=\"rows.get(gene)?.swatch\"\n [attr.aria-label]=\"'Icon and colour for ' + gene\"\n pTooltip=\"Icon and colour\"\n tooltipPosition=\"top\"\n (click)=\"openGeneStyle($event, gene, genePop)\"\n >\n <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\">\n <polygon\n *ngIf=\"view.transcriptMode === 'glyphs'; else dotIcon\"\n [attr.points]=\"rows.get(gene)?.points\"\n ></polygon>\n <ng-template #dotIcon><circle r=\"0.75\"></circle></ng-template>\n </svg>\n </button>\n <span class=\"sc-group-label\">{{ gene }}</span>\n <span\n class=\"sc-gene-count\"\n *ngIf=\"rows.get(gene)?.count as n; else zeroCount\"\n title=\"Transcripts in view\"\n >{{ n | number }}</span\n >\n <ng-template #zeroCount>\n <span class=\"sc-gene-count\" *ngIf=\"geneCounts\" title=\"Transcripts in view\">0</span>\n </ng-template>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n <!-- One picker for every gene row, filled for the gene that opened it. -->\n <p-overlayPanel #genePop styleClass=\"sc-gene-style\" appendTo=\"body\">\n <ng-template pTemplate=\"content\">\n <spatial-gene-style\n *ngIf=\"styleGene as gene\"\n [gene]=\"gene\"\n what=\"Transcript\"\n [color]=\"geneColorOf(gene)\"\n [glyph]=\"styleGlyph ?? 'circle'\"\n [iconHint]=\"\n view.transcriptMode !== 'glyphs' ? 'Icons show when the transcript point style is Icons.' : null\n \"\n (colorChange)=\"onGeneColor(gene, $event)\"\n (glyphChange)=\"onGlyph(gene, $event)\"\n (resetStyle)=\"resetGeneStyle(gene)\"\n ></spatial-gene-style>\n </ng-template>\n </p-overlayPanel>\n <div class=\"sc-gene-footer\">\n {{ (view.transcriptAllGenes ? geneTotal : view.transcriptGenes.length) | number }}/{{ geneTotal | number }}\n genes selected\n </div>\n</div>\n", styles: [".sc-hint{font-size:.75rem;color:var(--text-color-secondary, #6c757d)}.sc-error{color:var(--red-600, #c62828)}.sc-section{display:flex;flex-direction:column;gap:.35rem}.sc-lbl{font-size:.78rem;color:var(--text-color-secondary, #6c757d);white-space:nowrap}.sc-row{display:flex;align-items:center;gap:.6rem}.sc-row p-slider,.sc-row p-dropdown,.sc-row p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row p-slider .p-slider{width:100%}:host ::ng-deep .sc-row p-dropdown .p-dropdown,:host ::ng-deep .sc-row p-treeSelect .p-treeselect{width:100%}.sc-row .sc-lbl{flex:0 0 calc(50% - .6rem);min-width:0;overflow:hidden;text-overflow:ellipsis}.sc-cmap-option{display:inline-flex;align-items:center;gap:.4rem}.sc-cmap-swatch{width:3.5rem;height:.7rem;border-radius:2px;display:block}.sc-val{flex:0 0 4rem;text-align:right;font-size:.78rem;font-variant-numeric:tabular-nums;white-space:nowrap}:host ::ng-deep .sc-full,:host ::ng-deep .sc-full .p-dropdown,:host ::ng-deep .sc-full .p-autocomplete,:host ::ng-deep .sc-full input{width:100%}.sc-colorbar{height:.75rem;border-radius:2px;border:1px solid rgba(0,0,0,.2)}.sc-colorbar-ends{display:flex;justify-content:space-between;font-size:.7rem;color:var(--text-color-secondary, #6c757d);margin-top:.2rem}.sc-panel{border:1px solid var(--surface-border, #dee2e6);border-radius:6px;margin-bottom:.5rem;overflow:hidden}.sc-panel-head{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--surface-100, #f5f6f7)}.sc-panel-head .sc-panel-title{flex:1;font-weight:600}.sc-panel.open>.sc-panel-head{background:var(--primary-color, #2196f3);color:var(--primary-color-text, #fff)}.sc-panel-body{display:flex;flex-direction:column;gap:.45rem;padding:.6rem .75rem .75rem}.sc-subhead{display:flex;align-items:center;gap:.5rem;margin-top:.4rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-color-secondary, #6c757d)}.sc-subhead:after{content:\"\";flex:1;border-top:1px solid var(--surface-border, #dee2e6)}:host ::ng-deep .sc-buttons .p-button{padding:.35rem .75rem;font-size:.85rem}.sc-row-picker p-dropdown,.sc-row-picker p-multiSelect,.sc-row-picker p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row-picker .sc-variant{width:6.5rem}:host ::ng-deep .sc-row-picker p-multiselect .p-multiselect{width:100%}:host ::ng-deep .sc-row-picker p-dropdown:has(.sc-variant){flex:0 0 6.5rem}:host ::ng-deep .sc-row-picker p-treeselect:has(.sc-palette){flex:0 0 3rem}:host ::ng-deep .sc-palette .p-treeselect-label{width:0;padding:0}.sc-icon-btn{flex:0 0 auto;border:0;background:transparent;cursor:pointer;padding:.25rem .35rem;font:inherit;font-size:1.05rem;color:var(--text-color, #333);border-radius:4px}.sc-icon-btn:hover{background:var(--surface-200, #e9ecef)}.sc-icon-btn.active{color:var(--primary-color, #2196f3);font-weight:700}.sc-icon-btn:disabled{opacity:.5;cursor:default}.sc-small-btn{margin-left:auto;border:1px solid var(--surface-border, #ced4da);background:var(--surface-0, #fff);border-radius:4px;padding:.2rem .6rem;font:inherit;font-size:.8rem;cursor:pointer}:host ::ng-deep .sc-group-heading{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.7}.sc-group-list,.sc-gene-tree{max-height:16rem;overflow-y:auto;border:1px solid var(--surface-border, #dee2e6);border-radius:4px;padding:.25rem .4rem}.sc-group-row,.sc-gene-row{display:flex;align-items:center;gap:.45rem;padding:.15rem 0;font-size:.88rem}.sc-group-row .sc-group-label,.sc-gene-row .sc-group-label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-group-all,.sc-gene-root,.sc-gene-group{font-weight:600}.sc-group-all .sc-icon-btn,.sc-gene-root .sc-icon-btn,.sc-gene-group .sc-icon-btn{margin-left:auto;font-size:.85rem}.sc-count{flex:0 0 auto;font-size:.78rem;color:var(--text-color-secondary, #6c757d)}.sc-glyph-option{display:inline-flex;align-items:center;gap:.4rem}.sc-glyph-svg{width:1rem;height:1rem;fill:currentColor}:host ::ng-deep .sc-glyph-pick .p-dropdown-label{padding:.2rem .4rem}.sc-color-input{width:2.5rem;height:1.8rem;border:1px solid var(--surface-border, #ced4da);border-radius:4px;padding:0;background:none}.sc-row-number p-slider,.sc-row-range p-slider{flex:1 1 0;min-width:0}:host ::ng-deep .sc-num{width:4.5rem;padding:.3rem .4rem;text-align:center}:host ::ng-deep .sc-row-number p-inputnumber,:host ::ng-deep .sc-row-range p-inputnumber{flex:0 0 auto}.sc-gene-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1.4rem;height:1.4rem;padding:0;border:1px solid transparent;border-radius:4px;background:transparent;cursor:pointer}.sc-gene-icon:hover,.sc-gene-icon:focus-visible{border-color:var(--surface-border, rgba(0, 0, 0, .2))}:host{display:contents}.sc-gene-group,.sc-gene-leaf{padding-left:1rem}.sc-gene-leaf.nested{padding-left:2rem}.sc-eye{flex:0 0 auto;border:0;background:transparent;cursor:pointer;padding:0;color:var(--text-color-secondary, #6c757d)}.sc-eye .pi-eye{color:var(--text-color, #333)}.sc-eye:disabled{cursor:default;opacity:.5}.sc-gene-filter{width:calc(100% - 1rem);margin:.2rem 0 .2rem 1rem;font-size:.8rem;padding:.2rem .4rem}.sc-gene-footer{text-align:right;font-size:.78rem;padding:.2rem 0;color:var(--text-color-secondary, #6c757d)}.sc-gene-count{margin-left:auto;font-variant-numeric:tabular-nums;opacity:.8;padding-left:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i6.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i10.OverlayPanel, selector: "p-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: SpatialGeneStyleComponent, selector: "spatial-gene-style", inputs: ["gene", "what", "color", "glyph", "iconHint"], outputs: ["colorChange", "glyphChange", "resetStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
23692
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: SpatialGeneTreeComponent, isStandalone: true, selector: "spatial-gene-tree", inputs: { controls: "controls", dataset: "dataset", view: "view", geneCounts: "geneCounts", geneTotal: "geneTotal" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"sc-subhead\">Selected genes</div>\n<div class=\"sc-gene-sort\" *ngIf=\"sortShown\" role=\"group\" aria-label=\"Sort genes\">\n <span class=\"sc-lbl\">Sort by</span>\n <button\n type=\"button\"\n class=\"sc-sort-btn\"\n [class.active]=\"!byCount\"\n [attr.aria-pressed]=\"!byCount\"\n (click)=\"onGeneSort('name')\"\n >\n Name\n </button>\n <button\n type=\"button\"\n class=\"sc-sort-btn\"\n [class.active]=\"byCount\"\n [attr.aria-pressed]=\"byCount\"\n title=\"Transcripts in view, most first\"\n (click)=\"onGeneSort('count')\"\n >\n Count\n </button>\n</div>\n<div class=\"sc-gene-tree\">\n <div class=\"sc-gene-row sc-gene-root\">\n <button\n type=\"button\"\n class=\"sc-eye\"\n (click)=\"\n view.transcriptAllGenes ? onAllGenesShown(!rootShown) : onGenesShown(view.transcriptGenes, !rootShown)\n \"\n >\n <i class=\"pi\" [class.pi-eye]=\"rootShown\" [class.pi-eye-slash]=\"!rootShown\"></i>\n </button>\n <span class=\"sc-group-label\">Genes</span>\n <span class=\"sc-count\"\n >({{ (view.transcriptAllGenes ? geneTotal : view.transcriptGenes.length) | number }}/{{\n geneTotal | number\n }})</span\n >\n <button\n type=\"button\"\n class=\"sc-icon-btn\"\n (click)=\"geneTreeOpen = !geneTreeOpen\"\n *ngIf=\"!view.transcriptAllGenes && view.transcriptGenes.length\"\n >\n <i class=\"pi\" [class.pi-chevron-down]=\"geneTreeOpen\" [class.pi-chevron-right]=\"!geneTreeOpen\"></i>\n </button>\n <button\n type=\"button\"\n class=\"sc-icon-btn\"\n (click)=\"toggleAllGenesOpen()\"\n *ngIf=\"view.transcriptAllGenes && allGeneList?.length\"\n [attr.aria-label]=\"allGenesOpen ? 'Hide the gene list' : 'Show every gene'\"\n >\n <i class=\"pi\" [class.pi-chevron-down]=\"allGenesOpen\" [class.pi-chevron-right]=\"!allGenesOpen\"></i>\n </button>\n </div>\n <!-- \"All genes\": every gene of the dataset, each with its eye when the dataset says which\n transcripts are whose (its gene list in code order). -->\n <ng-container *ngIf=\"allGenesOpen && view.transcriptAllGenes && allGeneList?.length\">\n <input\n pInputText\n class=\"sc-gene-filter\"\n placeholder=\"Filter genes\u2026\"\n aria-label=\"Filter genes\"\n [value]=\"allGenesFilter\"\n (input)=\"onAllGenesFilter($any($event.target).value)\"\n />\n <small class=\"sc-hint\" *ngIf=\"!canHideAllGenes\">\n This dataset does not say which transcripts are whose, so its genes cannot be hidden one by one.\n </small>\n <small class=\"sc-hint\" *ngIf=\"canHideAllGenes && view.transcriptMode === 'density'\">\n The density map draws every gene as one raster: genes are hidden one by one as circles or icons.\n </small>\n <div class=\"sc-gene-row sc-gene-leaf nested\" *ngFor=\"let row of allRows; trackBy: trackByAllRow\">\n <button\n type=\"button\"\n class=\"sc-eye\"\n [disabled]=\"!canHideAllGenes || view.transcriptMode === 'density'\"\n (click)=\"onAllGeneShown(row.gene, !row.shown)\"\n >\n <i class=\"pi\" [class.pi-eye]=\"row.shown\" [class.pi-eye-slash]=\"!row.shown\"></i>\n </button>\n <span class=\"sc-gene-icon\" *ngIf=\"row.swatch\" [style.color]=\"row.swatch\" aria-hidden=\"true\">\n <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\"><circle r=\"0.75\"></circle></svg>\n </span>\n <span class=\"sc-group-label\" [title]=\"row.gene\">{{ row.gene }}</span>\n <span class=\"sc-gene-count\" *ngIf=\"row.count !== null\" title=\"Transcripts in view\">{{\n row.count | number\n }}</span>\n </div>\n <small class=\"sc-hint\" *ngIf=\"allGenesMatched > allRows.length\">\n Showing {{ allRows.length | number }} of {{ allGenesMatched | number }} genes: filter to find the others.\n </small>\n <small class=\"sc-hint\" *ngIf=\"allGenesMatched === 0\">No gene matches.</small>\n </ng-container>\n <ng-container *ngIf=\"geneTreeOpen && !view.transcriptAllGenes\">\n <ng-container *ngFor=\"let node of sortedTree; trackBy: trackByNode\">\n <div class=\"sc-gene-row sc-gene-group\" *ngIf=\"node.name\">\n <button type=\"button\" class=\"sc-eye\" (click)=\"onGenesShown(node.genes, !groupShown.get(node.name))\">\n <i\n class=\"pi\"\n [class.pi-eye]=\"groupShown.get(node.name)\"\n [class.pi-eye-slash]=\"!groupShown.get(node.name)\"\n ></i>\n </button>\n <span class=\"sc-group-label\" [title]=\"node.name\">{{ node.name }}</span>\n <span class=\"sc-count\">({{ node.genes.length }})</span>\n <button type=\"button\" class=\"sc-icon-btn\" (click)=\"toggleGeneGroup(node.name)\">\n <i\n class=\"pi\"\n [class.pi-chevron-down]=\"!collapsedGeneGroups.has(node.name)\"\n [class.pi-chevron-right]=\"collapsedGeneGroups.has(node.name)\"\n ></i>\n </button>\n </div>\n <ng-container *ngIf=\"!node.name || !collapsedGeneGroups.has(node.name)\">\n <div\n class=\"sc-gene-row sc-gene-leaf\"\n [class.nested]=\"!!node.name\"\n *ngFor=\"let gene of node.genes; trackBy: trackByLabelString\"\n >\n <button type=\"button\" class=\"sc-eye\" (click)=\"onGenesShown([gene], !rows.get(gene)?.shown)\">\n <i class=\"pi\" [class.pi-eye]=\"rows.get(gene)?.shown\" [class.pi-eye-slash]=\"!rows.get(gene)?.shown\"></i>\n </button>\n <!-- The gene's marker, in its colour: its icon in Icons mode, a dot for circles.\n Clicking it opens the icon and colour picker (as Xenium Explorer does). -->\n <button\n type=\"button\"\n class=\"sc-gene-icon\"\n [style.color]=\"rows.get(gene)?.swatch\"\n [attr.aria-label]=\"'Icon and colour for ' + gene\"\n pTooltip=\"Icon and colour\"\n tooltipPosition=\"top\"\n (click)=\"openGeneStyle($event, gene, genePop)\"\n >\n <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\">\n <polygon\n *ngIf=\"view.transcriptMode === 'glyphs'; else dotIcon\"\n [attr.points]=\"rows.get(gene)?.points\"\n ></polygon>\n <ng-template #dotIcon><circle r=\"0.75\"></circle></ng-template>\n </svg>\n </button>\n <span class=\"sc-group-label\">{{ gene }}</span>\n <span\n class=\"sc-gene-count\"\n *ngIf=\"rows.get(gene)?.count as n; else zeroCount\"\n title=\"Transcripts in view\"\n >{{ n | number }}</span\n >\n <ng-template #zeroCount>\n <span class=\"sc-gene-count\" *ngIf=\"geneCounts\" title=\"Transcripts in view\">0</span>\n </ng-template>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n <!-- One picker for every gene row, filled for the gene that opened it. -->\n <p-overlayPanel #genePop styleClass=\"sc-gene-style\" appendTo=\"body\">\n <ng-template pTemplate=\"content\">\n <spatial-gene-style\n *ngIf=\"styleGene as gene\"\n [gene]=\"gene\"\n what=\"Transcript\"\n [color]=\"geneColorOf(gene)\"\n [glyph]=\"styleGlyph ?? 'circle'\"\n [iconHint]=\"\n view.transcriptMode !== 'glyphs' ? 'Icons show when the transcript point style is Icons.' : null\n \"\n (colorChange)=\"onGeneColor(gene, $event)\"\n (glyphChange)=\"onGlyph(gene, $event)\"\n (resetStyle)=\"resetGeneStyle(gene)\"\n ></spatial-gene-style>\n </ng-template>\n </p-overlayPanel>\n <div class=\"sc-gene-footer\">\n {{ (view.transcriptAllGenes ? geneTotal : view.transcriptGenes.length) | number }}/{{ geneTotal | number }}\n genes selected\n </div>\n</div>\n", styles: [".sc-hint{font-size:.75rem;color:var(--text-color-secondary, #6c757d)}.sc-error{color:var(--red-600, #c62828)}.sc-section{display:flex;flex-direction:column;gap:.35rem}.sc-lbl{font-size:.78rem;color:var(--text-color-secondary, #6c757d);white-space:nowrap}.sc-row{display:flex;align-items:center;gap:.6rem}.sc-row p-slider,.sc-row p-dropdown,.sc-row p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row p-slider .p-slider{width:100%}:host ::ng-deep .sc-row p-dropdown .p-dropdown,:host ::ng-deep .sc-row p-treeSelect .p-treeselect{width:100%}.sc-row .sc-lbl{flex:0 0 calc(50% - .6rem);min-width:0;overflow:hidden;text-overflow:ellipsis}.sc-cmap-option{display:inline-flex;align-items:center;gap:.4rem}.sc-cmap-swatch{width:3.5rem;height:.7rem;border-radius:2px;display:block}.sc-val{flex:0 0 4rem;text-align:right;font-size:.78rem;font-variant-numeric:tabular-nums;white-space:nowrap}:host ::ng-deep .sc-full,:host ::ng-deep .sc-full .p-dropdown,:host ::ng-deep .sc-full .p-autocomplete,:host ::ng-deep .sc-full input{width:100%}.sc-colorbar{height:.75rem;border-radius:2px;border:1px solid rgba(0,0,0,.2)}.sc-colorbar-ends{display:flex;justify-content:space-between;font-size:.7rem;color:var(--text-color-secondary, #6c757d);margin-top:.2rem}.sc-panel{border:1px solid var(--surface-border, #dee2e6);border-radius:6px;margin-bottom:.5rem;overflow:hidden}.sc-panel-head{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--surface-100, #f5f6f7)}.sc-panel-head .sc-panel-title{flex:1;font-weight:600}.sc-panel.open>.sc-panel-head{background:var(--primary-color, #2196f3);color:var(--primary-color-text, #fff)}.sc-panel-body{display:flex;flex-direction:column;gap:.45rem;padding:.6rem .75rem .75rem}.sc-subhead{display:flex;align-items:center;gap:.5rem;margin-top:.4rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-color-secondary, #6c757d)}.sc-subhead:after{content:\"\";flex:1;border-top:1px solid var(--surface-border, #dee2e6)}:host ::ng-deep .sc-buttons .p-button{padding:.35rem .75rem;font-size:.85rem}.sc-row-picker p-dropdown,.sc-row-picker p-multiSelect,.sc-row-picker p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row-picker .sc-variant{width:6.5rem}:host ::ng-deep .sc-row-picker p-multiselect .p-multiselect{width:100%}:host ::ng-deep .sc-row-picker p-dropdown:has(.sc-variant){flex:0 0 6.5rem}:host ::ng-deep .sc-row-picker p-treeselect:has(.sc-palette){flex:0 0 3rem}:host ::ng-deep .sc-palette .p-treeselect-label{width:0;padding:0}.sc-icon-btn{flex:0 0 auto;border:0;background:transparent;cursor:pointer;padding:.25rem .35rem;font:inherit;font-size:1.05rem;color:var(--text-color, #333);border-radius:4px}.sc-icon-btn:hover{background:var(--surface-200, #e9ecef)}.sc-icon-btn.active{color:var(--primary-color, #2196f3);font-weight:700}.sc-icon-btn:disabled{opacity:.5;cursor:default}.sc-small-btn{margin-left:auto;border:1px solid var(--surface-border, #ced4da);background:var(--surface-0, #fff);border-radius:4px;padding:.2rem .6rem;font:inherit;font-size:.8rem;cursor:pointer}:host ::ng-deep .sc-group-heading{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.7}.sc-group-list,.sc-gene-tree{max-height:16rem;overflow-y:auto;border:1px solid var(--surface-border, #dee2e6);border-radius:4px;padding:.25rem .4rem}.sc-group-row,.sc-gene-row{display:flex;align-items:center;gap:.45rem;padding:.15rem 0;font-size:.88rem}.sc-group-row .sc-group-label,.sc-gene-row .sc-group-label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-group-all,.sc-gene-root,.sc-gene-group{font-weight:600}.sc-group-all .sc-icon-btn,.sc-gene-root .sc-icon-btn,.sc-gene-group .sc-icon-btn{margin-left:auto;font-size:.85rem}.sc-count{flex:0 0 auto;font-size:.78rem;color:var(--text-color-secondary, #6c757d)}.sc-glyph-option{display:inline-flex;align-items:center;gap:.4rem}.sc-glyph-svg{width:1rem;height:1rem;fill:currentColor}:host ::ng-deep .sc-glyph-pick .p-dropdown-label{padding:.2rem .4rem}.sc-color-input{width:2.5rem;height:1.8rem;border:1px solid var(--surface-border, #ced4da);border-radius:4px;padding:0;background:none}.sc-row-number p-slider,.sc-row-range p-slider{flex:1 1 0;min-width:0}:host ::ng-deep .sc-num{width:4.5rem;padding:.3rem .4rem;text-align:center}:host ::ng-deep .sc-row-number p-inputnumber,:host ::ng-deep .sc-row-range p-inputnumber{flex:0 0 auto}.sc-gene-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1.4rem;height:1.4rem;padding:0;border:1px solid transparent;border-radius:4px;background:transparent;cursor:pointer}.sc-gene-icon:hover,.sc-gene-icon:focus-visible{border-color:var(--surface-border, rgba(0, 0, 0, .2))}:host{display:contents}.sc-gene-group,.sc-gene-leaf{padding-left:1rem}.sc-gene-leaf.nested{padding-left:2rem}.sc-eye{flex:0 0 auto;border:0;background:transparent;cursor:pointer;padding:0;color:var(--text-color-secondary, #6c757d)}.sc-eye .pi-eye{color:var(--text-color, #333)}.sc-eye:disabled{cursor:default;opacity:.5}.sc-gene-sort{display:flex;align-items:center;gap:.25rem;font-size:.8rem}.sc-gene-sort .sc-lbl{margin-right:auto}.sc-sort-btn{border:1px solid var(--surface-border, #ced4da);background:var(--surface-0, #fff);color:var(--text-color, #333);border-radius:4px;padding:.1rem .5rem;font:inherit;cursor:pointer}.sc-sort-btn.active{border-color:var(--primary-color, #2196f3);color:var(--primary-color, #2196f3);font-weight:600}.sc-gene-filter{width:calc(100% - 1rem);margin:.2rem 0 .2rem 1rem;font-size:.8rem;padding:.2rem .4rem}.sc-gene-footer{text-align:right;font-size:.78rem;padding:.2rem 0;color:var(--text-color-secondary, #6c757d)}.sc-gene-count{margin-left:auto;font-variant-numeric:tabular-nums;opacity:.8;padding-left:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i6.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i10.OverlayPanel, selector: "p-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: SpatialGeneStyleComponent, selector: "spatial-gene-style", inputs: ["gene", "what", "color", "glyph", "iconHint"], outputs: ["colorChange", "glyphChange", "resetStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
23651
23693
|
}
|
|
23652
23694
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SpatialGeneTreeComponent, decorators: [{
|
|
23653
23695
|
type: Component,
|
|
@@ -23658,7 +23700,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
|
|
|
23658
23700
|
OverlayPanelModule,
|
|
23659
23701
|
TooltipModule,
|
|
23660
23702
|
SpatialGeneStyleComponent,
|
|
23661
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sc-subhead\">Selected genes</div>\n<div class=\"sc-gene-tree\">\n <div class=\"sc-gene-row sc-gene-root\">\n <button\n type=\"button\"\n class=\"sc-eye\"\n (click)=\"\n view.transcriptAllGenes ? onAllGenesShown(!rootShown) : onGenesShown(view.transcriptGenes, !rootShown)\n \"\n >\n <i class=\"pi\" [class.pi-eye]=\"rootShown\" [class.pi-eye-slash]=\"!rootShown\"></i>\n </button>\n <span class=\"sc-group-label\">Genes</span>\n <span class=\"sc-count\"\n >({{ (view.transcriptAllGenes ? geneTotal : view.transcriptGenes.length) | number }}/{{\n geneTotal | number\n }})</span\n >\n <button\n type=\"button\"\n class=\"sc-icon-btn\"\n (click)=\"geneTreeOpen = !geneTreeOpen\"\n *ngIf=\"!view.transcriptAllGenes && view.transcriptGenes.length\"\n >\n <i class=\"pi\" [class.pi-chevron-down]=\"geneTreeOpen\" [class.pi-chevron-right]=\"!geneTreeOpen\"></i>\n </button>\n <button\n type=\"button\"\n class=\"sc-icon-btn\"\n (click)=\"toggleAllGenesOpen()\"\n *ngIf=\"view.transcriptAllGenes && allGeneList?.length\"\n [attr.aria-label]=\"allGenesOpen ? 'Hide the gene list' : 'Show every gene'\"\n >\n <i class=\"pi\" [class.pi-chevron-down]=\"allGenesOpen\" [class.pi-chevron-right]=\"!allGenesOpen\"></i>\n </button>\n </div>\n <!-- \"All genes\": every gene of the dataset, each with its eye when the dataset says which\n transcripts are whose (its gene list in code order). -->\n <ng-container *ngIf=\"allGenesOpen && view.transcriptAllGenes && allGeneList?.length\">\n <input\n pInputText\n class=\"sc-gene-filter\"\n placeholder=\"Filter genes\u2026\"\n aria-label=\"Filter genes\"\n [value]=\"allGenesFilter\"\n (input)=\"onAllGenesFilter($any($event.target).value)\"\n />\n <small class=\"sc-hint\" *ngIf=\"!canHideAllGenes\">\n This dataset does not say which transcripts are whose, so its genes cannot be hidden one by one.\n </small>\n <small class=\"sc-hint\" *ngIf=\"canHideAllGenes && view.transcriptMode === 'density'\">\n The density map draws every gene as one raster: genes are hidden one by one as circles or icons.\n </small>\n <div class=\"sc-gene-row sc-gene-leaf nested\" *ngFor=\"let row of allRows; trackBy: trackByAllRow\">\n <button\n type=\"button\"\n class=\"sc-eye\"\n [disabled]=\"!canHideAllGenes || view.transcriptMode === 'density'\"\n (click)=\"onAllGeneShown(row.gene, !row.shown)\"\n >\n <i class=\"pi\" [class.pi-eye]=\"row.shown\" [class.pi-eye-slash]=\"!row.shown\"></i>\n </button>\n <span class=\"sc-gene-icon\" *ngIf=\"row.swatch\" [style.color]=\"row.swatch\" aria-hidden=\"true\">\n <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\"><circle r=\"0.75\"></circle></svg>\n </span>\n <span class=\"sc-group-label\" [title]=\"row.gene\">{{ row.gene }}</span>\n <span class=\"sc-gene-count\" *ngIf=\"row.count !== null\" title=\"Transcripts in view\">{{\n row.count | number\n }}</span>\n </div>\n <small class=\"sc-hint\" *ngIf=\"allGenesMatched > allRows.length\">\n Showing {{ allRows.length | number }} of {{ allGenesMatched | number }} genes: filter to find the others.\n </small>\n <small class=\"sc-hint\" *ngIf=\"allGenesMatched === 0\">No gene matches.</small>\n </ng-container>\n <ng-container *ngIf=\"geneTreeOpen && !view.transcriptAllGenes\">\n <ng-container *ngFor=\"let node of geneTree; trackBy: trackByNode\">\n <div class=\"sc-gene-row sc-gene-group\" *ngIf=\"node.name\">\n <button type=\"button\" class=\"sc-eye\" (click)=\"onGenesShown(node.genes, !groupShown.get(node.name))\">\n <i\n class=\"pi\"\n [class.pi-eye]=\"groupShown.get(node.name)\"\n [class.pi-eye-slash]=\"!groupShown.get(node.name)\"\n ></i>\n </button>\n <span class=\"sc-group-label\" [title]=\"node.name\">{{ node.name }}</span>\n <span class=\"sc-count\">({{ node.genes.length }})</span>\n <button type=\"button\" class=\"sc-icon-btn\" (click)=\"toggleGeneGroup(node.name)\">\n <i\n class=\"pi\"\n [class.pi-chevron-down]=\"!collapsedGeneGroups.has(node.name)\"\n [class.pi-chevron-right]=\"collapsedGeneGroups.has(node.name)\"\n ></i>\n </button>\n </div>\n <ng-container *ngIf=\"!node.name || !collapsedGeneGroups.has(node.name)\">\n <div\n class=\"sc-gene-row sc-gene-leaf\"\n [class.nested]=\"!!node.name\"\n *ngFor=\"let gene of node.genes; trackBy: trackByLabelString\"\n >\n <button type=\"button\" class=\"sc-eye\" (click)=\"onGenesShown([gene], !rows.get(gene)?.shown)\">\n <i class=\"pi\" [class.pi-eye]=\"rows.get(gene)?.shown\" [class.pi-eye-slash]=\"!rows.get(gene)?.shown\"></i>\n </button>\n <!-- The gene's marker, in its colour: its icon in Icons mode, a dot for circles.\n Clicking it opens the icon and colour picker (as Xenium Explorer does). -->\n <button\n type=\"button\"\n class=\"sc-gene-icon\"\n [style.color]=\"rows.get(gene)?.swatch\"\n [attr.aria-label]=\"'Icon and colour for ' + gene\"\n pTooltip=\"Icon and colour\"\n tooltipPosition=\"top\"\n (click)=\"openGeneStyle($event, gene, genePop)\"\n >\n <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\">\n <polygon\n *ngIf=\"view.transcriptMode === 'glyphs'; else dotIcon\"\n [attr.points]=\"rows.get(gene)?.points\"\n ></polygon>\n <ng-template #dotIcon><circle r=\"0.75\"></circle></ng-template>\n </svg>\n </button>\n <span class=\"sc-group-label\">{{ gene }}</span>\n <span\n class=\"sc-gene-count\"\n *ngIf=\"rows.get(gene)?.count as n; else zeroCount\"\n title=\"Transcripts in view\"\n >{{ n | number }}</span\n >\n <ng-template #zeroCount>\n <span class=\"sc-gene-count\" *ngIf=\"geneCounts\" title=\"Transcripts in view\">0</span>\n </ng-template>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n <!-- One picker for every gene row, filled for the gene that opened it. -->\n <p-overlayPanel #genePop styleClass=\"sc-gene-style\" appendTo=\"body\">\n <ng-template pTemplate=\"content\">\n <spatial-gene-style\n *ngIf=\"styleGene as gene\"\n [gene]=\"gene\"\n what=\"Transcript\"\n [color]=\"geneColorOf(gene)\"\n [glyph]=\"styleGlyph ?? 'circle'\"\n [iconHint]=\"\n view.transcriptMode !== 'glyphs' ? 'Icons show when the transcript point style is Icons.' : null\n \"\n (colorChange)=\"onGeneColor(gene, $event)\"\n (glyphChange)=\"onGlyph(gene, $event)\"\n (resetStyle)=\"resetGeneStyle(gene)\"\n ></spatial-gene-style>\n </ng-template>\n </p-overlayPanel>\n <div class=\"sc-gene-footer\">\n {{ (view.transcriptAllGenes ? geneTotal : view.transcriptGenes.length) | number }}/{{ geneTotal | number }}\n genes selected\n </div>\n</div>\n", styles: [".sc-hint{font-size:.75rem;color:var(--text-color-secondary, #6c757d)}.sc-error{color:var(--red-600, #c62828)}.sc-section{display:flex;flex-direction:column;gap:.35rem}.sc-lbl{font-size:.78rem;color:var(--text-color-secondary, #6c757d);white-space:nowrap}.sc-row{display:flex;align-items:center;gap:.6rem}.sc-row p-slider,.sc-row p-dropdown,.sc-row p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row p-slider .p-slider{width:100%}:host ::ng-deep .sc-row p-dropdown .p-dropdown,:host ::ng-deep .sc-row p-treeSelect .p-treeselect{width:100%}.sc-row .sc-lbl{flex:0 0 calc(50% - .6rem);min-width:0;overflow:hidden;text-overflow:ellipsis}.sc-cmap-option{display:inline-flex;align-items:center;gap:.4rem}.sc-cmap-swatch{width:3.5rem;height:.7rem;border-radius:2px;display:block}.sc-val{flex:0 0 4rem;text-align:right;font-size:.78rem;font-variant-numeric:tabular-nums;white-space:nowrap}:host ::ng-deep .sc-full,:host ::ng-deep .sc-full .p-dropdown,:host ::ng-deep .sc-full .p-autocomplete,:host ::ng-deep .sc-full input{width:100%}.sc-colorbar{height:.75rem;border-radius:2px;border:1px solid rgba(0,0,0,.2)}.sc-colorbar-ends{display:flex;justify-content:space-between;font-size:.7rem;color:var(--text-color-secondary, #6c757d);margin-top:.2rem}.sc-panel{border:1px solid var(--surface-border, #dee2e6);border-radius:6px;margin-bottom:.5rem;overflow:hidden}.sc-panel-head{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--surface-100, #f5f6f7)}.sc-panel-head .sc-panel-title{flex:1;font-weight:600}.sc-panel.open>.sc-panel-head{background:var(--primary-color, #2196f3);color:var(--primary-color-text, #fff)}.sc-panel-body{display:flex;flex-direction:column;gap:.45rem;padding:.6rem .75rem .75rem}.sc-subhead{display:flex;align-items:center;gap:.5rem;margin-top:.4rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-color-secondary, #6c757d)}.sc-subhead:after{content:\"\";flex:1;border-top:1px solid var(--surface-border, #dee2e6)}:host ::ng-deep .sc-buttons .p-button{padding:.35rem .75rem;font-size:.85rem}.sc-row-picker p-dropdown,.sc-row-picker p-multiSelect,.sc-row-picker p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row-picker .sc-variant{width:6.5rem}:host ::ng-deep .sc-row-picker p-multiselect .p-multiselect{width:100%}:host ::ng-deep .sc-row-picker p-dropdown:has(.sc-variant){flex:0 0 6.5rem}:host ::ng-deep .sc-row-picker p-treeselect:has(.sc-palette){flex:0 0 3rem}:host ::ng-deep .sc-palette .p-treeselect-label{width:0;padding:0}.sc-icon-btn{flex:0 0 auto;border:0;background:transparent;cursor:pointer;padding:.25rem .35rem;font:inherit;font-size:1.05rem;color:var(--text-color, #333);border-radius:4px}.sc-icon-btn:hover{background:var(--surface-200, #e9ecef)}.sc-icon-btn.active{color:var(--primary-color, #2196f3);font-weight:700}.sc-icon-btn:disabled{opacity:.5;cursor:default}.sc-small-btn{margin-left:auto;border:1px solid var(--surface-border, #ced4da);background:var(--surface-0, #fff);border-radius:4px;padding:.2rem .6rem;font:inherit;font-size:.8rem;cursor:pointer}:host ::ng-deep .sc-group-heading{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.7}.sc-group-list,.sc-gene-tree{max-height:16rem;overflow-y:auto;border:1px solid var(--surface-border, #dee2e6);border-radius:4px;padding:.25rem .4rem}.sc-group-row,.sc-gene-row{display:flex;align-items:center;gap:.45rem;padding:.15rem 0;font-size:.88rem}.sc-group-row .sc-group-label,.sc-gene-row .sc-group-label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-group-all,.sc-gene-root,.sc-gene-group{font-weight:600}.sc-group-all .sc-icon-btn,.sc-gene-root .sc-icon-btn,.sc-gene-group .sc-icon-btn{margin-left:auto;font-size:.85rem}.sc-count{flex:0 0 auto;font-size:.78rem;color:var(--text-color-secondary, #6c757d)}.sc-glyph-option{display:inline-flex;align-items:center;gap:.4rem}.sc-glyph-svg{width:1rem;height:1rem;fill:currentColor}:host ::ng-deep .sc-glyph-pick .p-dropdown-label{padding:.2rem .4rem}.sc-color-input{width:2.5rem;height:1.8rem;border:1px solid var(--surface-border, #ced4da);border-radius:4px;padding:0;background:none}.sc-row-number p-slider,.sc-row-range p-slider{flex:1 1 0;min-width:0}:host ::ng-deep .sc-num{width:4.5rem;padding:.3rem .4rem;text-align:center}:host ::ng-deep .sc-row-number p-inputnumber,:host ::ng-deep .sc-row-range p-inputnumber{flex:0 0 auto}.sc-gene-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1.4rem;height:1.4rem;padding:0;border:1px solid transparent;border-radius:4px;background:transparent;cursor:pointer}.sc-gene-icon:hover,.sc-gene-icon:focus-visible{border-color:var(--surface-border, rgba(0, 0, 0, .2))}:host{display:contents}.sc-gene-group,.sc-gene-leaf{padding-left:1rem}.sc-gene-leaf.nested{padding-left:2rem}.sc-eye{flex:0 0 auto;border:0;background:transparent;cursor:pointer;padding:0;color:var(--text-color-secondary, #6c757d)}.sc-eye .pi-eye{color:var(--text-color, #333)}.sc-eye:disabled{cursor:default;opacity:.5}.sc-gene-filter{width:calc(100% - 1rem);margin:.2rem 0 .2rem 1rem;font-size:.8rem;padding:.2rem .4rem}.sc-gene-footer{text-align:right;font-size:.78rem;padding:.2rem 0;color:var(--text-color-secondary, #6c757d)}.sc-gene-count{margin-left:auto;font-variant-numeric:tabular-nums;opacity:.8;padding-left:.5rem}\n"] }]
|
|
23703
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sc-subhead\">Selected genes</div>\n<div class=\"sc-gene-sort\" *ngIf=\"sortShown\" role=\"group\" aria-label=\"Sort genes\">\n <span class=\"sc-lbl\">Sort by</span>\n <button\n type=\"button\"\n class=\"sc-sort-btn\"\n [class.active]=\"!byCount\"\n [attr.aria-pressed]=\"!byCount\"\n (click)=\"onGeneSort('name')\"\n >\n Name\n </button>\n <button\n type=\"button\"\n class=\"sc-sort-btn\"\n [class.active]=\"byCount\"\n [attr.aria-pressed]=\"byCount\"\n title=\"Transcripts in view, most first\"\n (click)=\"onGeneSort('count')\"\n >\n Count\n </button>\n</div>\n<div class=\"sc-gene-tree\">\n <div class=\"sc-gene-row sc-gene-root\">\n <button\n type=\"button\"\n class=\"sc-eye\"\n (click)=\"\n view.transcriptAllGenes ? onAllGenesShown(!rootShown) : onGenesShown(view.transcriptGenes, !rootShown)\n \"\n >\n <i class=\"pi\" [class.pi-eye]=\"rootShown\" [class.pi-eye-slash]=\"!rootShown\"></i>\n </button>\n <span class=\"sc-group-label\">Genes</span>\n <span class=\"sc-count\"\n >({{ (view.transcriptAllGenes ? geneTotal : view.transcriptGenes.length) | number }}/{{\n geneTotal | number\n }})</span\n >\n <button\n type=\"button\"\n class=\"sc-icon-btn\"\n (click)=\"geneTreeOpen = !geneTreeOpen\"\n *ngIf=\"!view.transcriptAllGenes && view.transcriptGenes.length\"\n >\n <i class=\"pi\" [class.pi-chevron-down]=\"geneTreeOpen\" [class.pi-chevron-right]=\"!geneTreeOpen\"></i>\n </button>\n <button\n type=\"button\"\n class=\"sc-icon-btn\"\n (click)=\"toggleAllGenesOpen()\"\n *ngIf=\"view.transcriptAllGenes && allGeneList?.length\"\n [attr.aria-label]=\"allGenesOpen ? 'Hide the gene list' : 'Show every gene'\"\n >\n <i class=\"pi\" [class.pi-chevron-down]=\"allGenesOpen\" [class.pi-chevron-right]=\"!allGenesOpen\"></i>\n </button>\n </div>\n <!-- \"All genes\": every gene of the dataset, each with its eye when the dataset says which\n transcripts are whose (its gene list in code order). -->\n <ng-container *ngIf=\"allGenesOpen && view.transcriptAllGenes && allGeneList?.length\">\n <input\n pInputText\n class=\"sc-gene-filter\"\n placeholder=\"Filter genes\u2026\"\n aria-label=\"Filter genes\"\n [value]=\"allGenesFilter\"\n (input)=\"onAllGenesFilter($any($event.target).value)\"\n />\n <small class=\"sc-hint\" *ngIf=\"!canHideAllGenes\">\n This dataset does not say which transcripts are whose, so its genes cannot be hidden one by one.\n </small>\n <small class=\"sc-hint\" *ngIf=\"canHideAllGenes && view.transcriptMode === 'density'\">\n The density map draws every gene as one raster: genes are hidden one by one as circles or icons.\n </small>\n <div class=\"sc-gene-row sc-gene-leaf nested\" *ngFor=\"let row of allRows; trackBy: trackByAllRow\">\n <button\n type=\"button\"\n class=\"sc-eye\"\n [disabled]=\"!canHideAllGenes || view.transcriptMode === 'density'\"\n (click)=\"onAllGeneShown(row.gene, !row.shown)\"\n >\n <i class=\"pi\" [class.pi-eye]=\"row.shown\" [class.pi-eye-slash]=\"!row.shown\"></i>\n </button>\n <span class=\"sc-gene-icon\" *ngIf=\"row.swatch\" [style.color]=\"row.swatch\" aria-hidden=\"true\">\n <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\"><circle r=\"0.75\"></circle></svg>\n </span>\n <span class=\"sc-group-label\" [title]=\"row.gene\">{{ row.gene }}</span>\n <span class=\"sc-gene-count\" *ngIf=\"row.count !== null\" title=\"Transcripts in view\">{{\n row.count | number\n }}</span>\n </div>\n <small class=\"sc-hint\" *ngIf=\"allGenesMatched > allRows.length\">\n Showing {{ allRows.length | number }} of {{ allGenesMatched | number }} genes: filter to find the others.\n </small>\n <small class=\"sc-hint\" *ngIf=\"allGenesMatched === 0\">No gene matches.</small>\n </ng-container>\n <ng-container *ngIf=\"geneTreeOpen && !view.transcriptAllGenes\">\n <ng-container *ngFor=\"let node of sortedTree; trackBy: trackByNode\">\n <div class=\"sc-gene-row sc-gene-group\" *ngIf=\"node.name\">\n <button type=\"button\" class=\"sc-eye\" (click)=\"onGenesShown(node.genes, !groupShown.get(node.name))\">\n <i\n class=\"pi\"\n [class.pi-eye]=\"groupShown.get(node.name)\"\n [class.pi-eye-slash]=\"!groupShown.get(node.name)\"\n ></i>\n </button>\n <span class=\"sc-group-label\" [title]=\"node.name\">{{ node.name }}</span>\n <span class=\"sc-count\">({{ node.genes.length }})</span>\n <button type=\"button\" class=\"sc-icon-btn\" (click)=\"toggleGeneGroup(node.name)\">\n <i\n class=\"pi\"\n [class.pi-chevron-down]=\"!collapsedGeneGroups.has(node.name)\"\n [class.pi-chevron-right]=\"collapsedGeneGroups.has(node.name)\"\n ></i>\n </button>\n </div>\n <ng-container *ngIf=\"!node.name || !collapsedGeneGroups.has(node.name)\">\n <div\n class=\"sc-gene-row sc-gene-leaf\"\n [class.nested]=\"!!node.name\"\n *ngFor=\"let gene of node.genes; trackBy: trackByLabelString\"\n >\n <button type=\"button\" class=\"sc-eye\" (click)=\"onGenesShown([gene], !rows.get(gene)?.shown)\">\n <i class=\"pi\" [class.pi-eye]=\"rows.get(gene)?.shown\" [class.pi-eye-slash]=\"!rows.get(gene)?.shown\"></i>\n </button>\n <!-- The gene's marker, in its colour: its icon in Icons mode, a dot for circles.\n Clicking it opens the icon and colour picker (as Xenium Explorer does). -->\n <button\n type=\"button\"\n class=\"sc-gene-icon\"\n [style.color]=\"rows.get(gene)?.swatch\"\n [attr.aria-label]=\"'Icon and colour for ' + gene\"\n pTooltip=\"Icon and colour\"\n tooltipPosition=\"top\"\n (click)=\"openGeneStyle($event, gene, genePop)\"\n >\n <svg viewBox=\"-1.2 -1.2 2.4 2.4\" class=\"sc-glyph-svg\">\n <polygon\n *ngIf=\"view.transcriptMode === 'glyphs'; else dotIcon\"\n [attr.points]=\"rows.get(gene)?.points\"\n ></polygon>\n <ng-template #dotIcon><circle r=\"0.75\"></circle></ng-template>\n </svg>\n </button>\n <span class=\"sc-group-label\">{{ gene }}</span>\n <span\n class=\"sc-gene-count\"\n *ngIf=\"rows.get(gene)?.count as n; else zeroCount\"\n title=\"Transcripts in view\"\n >{{ n | number }}</span\n >\n <ng-template #zeroCount>\n <span class=\"sc-gene-count\" *ngIf=\"geneCounts\" title=\"Transcripts in view\">0</span>\n </ng-template>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n <!-- One picker for every gene row, filled for the gene that opened it. -->\n <p-overlayPanel #genePop styleClass=\"sc-gene-style\" appendTo=\"body\">\n <ng-template pTemplate=\"content\">\n <spatial-gene-style\n *ngIf=\"styleGene as gene\"\n [gene]=\"gene\"\n what=\"Transcript\"\n [color]=\"geneColorOf(gene)\"\n [glyph]=\"styleGlyph ?? 'circle'\"\n [iconHint]=\"\n view.transcriptMode !== 'glyphs' ? 'Icons show when the transcript point style is Icons.' : null\n \"\n (colorChange)=\"onGeneColor(gene, $event)\"\n (glyphChange)=\"onGlyph(gene, $event)\"\n (resetStyle)=\"resetGeneStyle(gene)\"\n ></spatial-gene-style>\n </ng-template>\n </p-overlayPanel>\n <div class=\"sc-gene-footer\">\n {{ (view.transcriptAllGenes ? geneTotal : view.transcriptGenes.length) | number }}/{{ geneTotal | number }}\n genes selected\n </div>\n</div>\n", styles: [".sc-hint{font-size:.75rem;color:var(--text-color-secondary, #6c757d)}.sc-error{color:var(--red-600, #c62828)}.sc-section{display:flex;flex-direction:column;gap:.35rem}.sc-lbl{font-size:.78rem;color:var(--text-color-secondary, #6c757d);white-space:nowrap}.sc-row{display:flex;align-items:center;gap:.6rem}.sc-row p-slider,.sc-row p-dropdown,.sc-row p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row p-slider .p-slider{width:100%}:host ::ng-deep .sc-row p-dropdown .p-dropdown,:host ::ng-deep .sc-row p-treeSelect .p-treeselect{width:100%}.sc-row .sc-lbl{flex:0 0 calc(50% - .6rem);min-width:0;overflow:hidden;text-overflow:ellipsis}.sc-cmap-option{display:inline-flex;align-items:center;gap:.4rem}.sc-cmap-swatch{width:3.5rem;height:.7rem;border-radius:2px;display:block}.sc-val{flex:0 0 4rem;text-align:right;font-size:.78rem;font-variant-numeric:tabular-nums;white-space:nowrap}:host ::ng-deep .sc-full,:host ::ng-deep .sc-full .p-dropdown,:host ::ng-deep .sc-full .p-autocomplete,:host ::ng-deep .sc-full input{width:100%}.sc-colorbar{height:.75rem;border-radius:2px;border:1px solid rgba(0,0,0,.2)}.sc-colorbar-ends{display:flex;justify-content:space-between;font-size:.7rem;color:var(--text-color-secondary, #6c757d);margin-top:.2rem}.sc-panel{border:1px solid var(--surface-border, #dee2e6);border-radius:6px;margin-bottom:.5rem;overflow:hidden}.sc-panel-head{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--surface-100, #f5f6f7)}.sc-panel-head .sc-panel-title{flex:1;font-weight:600}.sc-panel.open>.sc-panel-head{background:var(--primary-color, #2196f3);color:var(--primary-color-text, #fff)}.sc-panel-body{display:flex;flex-direction:column;gap:.45rem;padding:.6rem .75rem .75rem}.sc-subhead{display:flex;align-items:center;gap:.5rem;margin-top:.4rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-color-secondary, #6c757d)}.sc-subhead:after{content:\"\";flex:1;border-top:1px solid var(--surface-border, #dee2e6)}:host ::ng-deep .sc-buttons .p-button{padding:.35rem .75rem;font-size:.85rem}.sc-row-picker p-dropdown,.sc-row-picker p-multiSelect,.sc-row-picker p-treeSelect{flex:1 1 0;min-width:0}:host ::ng-deep .sc-row-picker .sc-variant{width:6.5rem}:host ::ng-deep .sc-row-picker p-multiselect .p-multiselect{width:100%}:host ::ng-deep .sc-row-picker p-dropdown:has(.sc-variant){flex:0 0 6.5rem}:host ::ng-deep .sc-row-picker p-treeselect:has(.sc-palette){flex:0 0 3rem}:host ::ng-deep .sc-palette .p-treeselect-label{width:0;padding:0}.sc-icon-btn{flex:0 0 auto;border:0;background:transparent;cursor:pointer;padding:.25rem .35rem;font:inherit;font-size:1.05rem;color:var(--text-color, #333);border-radius:4px}.sc-icon-btn:hover{background:var(--surface-200, #e9ecef)}.sc-icon-btn.active{color:var(--primary-color, #2196f3);font-weight:700}.sc-icon-btn:disabled{opacity:.5;cursor:default}.sc-small-btn{margin-left:auto;border:1px solid var(--surface-border, #ced4da);background:var(--surface-0, #fff);border-radius:4px;padding:.2rem .6rem;font:inherit;font-size:.8rem;cursor:pointer}:host ::ng-deep .sc-group-heading{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.7}.sc-group-list,.sc-gene-tree{max-height:16rem;overflow-y:auto;border:1px solid var(--surface-border, #dee2e6);border-radius:4px;padding:.25rem .4rem}.sc-group-row,.sc-gene-row{display:flex;align-items:center;gap:.45rem;padding:.15rem 0;font-size:.88rem}.sc-group-row .sc-group-label,.sc-gene-row .sc-group-label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-group-all,.sc-gene-root,.sc-gene-group{font-weight:600}.sc-group-all .sc-icon-btn,.sc-gene-root .sc-icon-btn,.sc-gene-group .sc-icon-btn{margin-left:auto;font-size:.85rem}.sc-count{flex:0 0 auto;font-size:.78rem;color:var(--text-color-secondary, #6c757d)}.sc-glyph-option{display:inline-flex;align-items:center;gap:.4rem}.sc-glyph-svg{width:1rem;height:1rem;fill:currentColor}:host ::ng-deep .sc-glyph-pick .p-dropdown-label{padding:.2rem .4rem}.sc-color-input{width:2.5rem;height:1.8rem;border:1px solid var(--surface-border, #ced4da);border-radius:4px;padding:0;background:none}.sc-row-number p-slider,.sc-row-range p-slider{flex:1 1 0;min-width:0}:host ::ng-deep .sc-num{width:4.5rem;padding:.3rem .4rem;text-align:center}:host ::ng-deep .sc-row-number p-inputnumber,:host ::ng-deep .sc-row-range p-inputnumber{flex:0 0 auto}.sc-gene-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1.4rem;height:1.4rem;padding:0;border:1px solid transparent;border-radius:4px;background:transparent;cursor:pointer}.sc-gene-icon:hover,.sc-gene-icon:focus-visible{border-color:var(--surface-border, rgba(0, 0, 0, .2))}:host{display:contents}.sc-gene-group,.sc-gene-leaf{padding-left:1rem}.sc-gene-leaf.nested{padding-left:2rem}.sc-eye{flex:0 0 auto;border:0;background:transparent;cursor:pointer;padding:0;color:var(--text-color-secondary, #6c757d)}.sc-eye .pi-eye{color:var(--text-color, #333)}.sc-eye:disabled{cursor:default;opacity:.5}.sc-gene-sort{display:flex;align-items:center;gap:.25rem;font-size:.8rem}.sc-gene-sort .sc-lbl{margin-right:auto}.sc-sort-btn{border:1px solid var(--surface-border, #ced4da);background:var(--surface-0, #fff);color:var(--text-color, #333);border-radius:4px;padding:.1rem .5rem;font:inherit;cursor:pointer}.sc-sort-btn.active{border-color:var(--primary-color, #2196f3);color:var(--primary-color, #2196f3);font-weight:600}.sc-gene-filter{width:calc(100% - 1rem);margin:.2rem 0 .2rem 1rem;font-size:.8rem;padding:.2rem .4rem}.sc-gene-footer{text-align:right;font-size:.78rem;padding:.2rem 0;color:var(--text-color-secondary, #6c757d)}.sc-gene-count{margin-left:auto;font-variant-numeric:tabular-nums;opacity:.8;padding-left:.5rem}\n"] }]
|
|
23662
23704
|
}], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { controls: [{
|
|
23663
23705
|
type: Input
|
|
23664
23706
|
}], dataset: [{
|
|
@@ -46759,11 +46801,56 @@ function gatherSymbols(symbols, indices) {
|
|
|
46759
46801
|
return Uint8Array.from(indices, (i) => symbols[i]);
|
|
46760
46802
|
}
|
|
46761
46803
|
|
|
46804
|
+
/** The least Z stretch: a tenth of the true depth. */
|
|
46805
|
+
const SPATIAL_Z_SCALE_MIN = 0.1;
|
|
46806
|
+
/** The most Z stretch a cloud allows, at least: the Volume view's. */
|
|
46807
|
+
const SPATIAL_Z_SCALE_MAX = 10;
|
|
46808
|
+
/** Nor more than this, however thin the cloud is. */
|
|
46809
|
+
const SPATIAL_Z_SCALE_CEILING = 1000;
|
|
46810
|
+
/**
|
|
46811
|
+
* The most a box's Z may be stretched: until it is twice as deep as it is wide, so even a section
|
|
46812
|
+
* microns thick and millimetres wide can be stood up into a block — but never less than the
|
|
46813
|
+
* Volume view's 10x, nor more than {@link SPATIAL_Z_SCALE_CEILING}.
|
|
46814
|
+
*/
|
|
46815
|
+
function spatialZScaleMax(box) {
|
|
46816
|
+
const flat = (2 * Math.max(box.width, box.height)) / Math.max(box.depth, 1e-9);
|
|
46817
|
+
return Math.min(SPATIAL_Z_SCALE_CEILING, Math.max(SPATIAL_Z_SCALE_MAX, flat));
|
|
46818
|
+
}
|
|
46819
|
+
/**
|
|
46820
|
+
* The Z handle's drag (px) per doubling: the Volume view's 180 px, less when the range is wider,
|
|
46821
|
+
* so going from the true depth to the most stretch is about the same drag (~540 px) either way.
|
|
46822
|
+
*/
|
|
46823
|
+
function spatialZPixelsPerDouble(maxScale) {
|
|
46824
|
+
return Math.max(60, Math.min(180, 540 / Math.log2(Math.max(2, maxScale))));
|
|
46825
|
+
}
|
|
46826
|
+
/**
|
|
46827
|
+
* The X/Y/Z axis-end labels for a box (as drawn: Z stretched by `zScale`), its true lengths in µm
|
|
46828
|
+
* when the dataset declares `micronsPerUnit`, else in its own units. A stretched Z says by how much,
|
|
46829
|
+
* so its length is never read off the drawing.
|
|
46830
|
+
*/
|
|
46831
|
+
function spatialAxesLabels(drawn, zScale, micronsPerUnit) {
|
|
46832
|
+
const hx = drawn.width / 2;
|
|
46833
|
+
const hy = drawn.height / 2;
|
|
46834
|
+
const hz = drawn.depth / 2;
|
|
46835
|
+
const mpu = micronsPerUnit && micronsPerUnit > 0 ? micronsPerUnit : 0;
|
|
46836
|
+
const len = (n) => (mpu ? formatLength(n * mpu, 'µm') : `${+n.toPrecision(3)} units`);
|
|
46837
|
+
const stretch = Math.abs(zScale - 1) > 1e-3 ? ` (×${+zScale.toPrecision(3)})` : '';
|
|
46838
|
+
return [
|
|
46839
|
+
{ anchor: [hx, -hy, -hz], text: `X · ${len(drawn.width)}`, color: '#ed4545' },
|
|
46840
|
+
{ anchor: [-hx, hy, -hz], text: `Y · ${len(drawn.height)}`, color: '#4dd959' },
|
|
46841
|
+
{ anchor: [-hx, -hy, hz], text: `Z · ${len(drawn.depth / zScale)}${stretch}`, color: '#668cff' },
|
|
46842
|
+
];
|
|
46843
|
+
}
|
|
46762
46844
|
/**
|
|
46763
46845
|
* SPATIAL_OMICS_3D (review Appendix B, cluster K): observations as a 3D point cloud under the
|
|
46764
46846
|
* orbit camera, with the dataset's reference volume around it, per-cluster density volumes and the
|
|
46765
46847
|
* 3D gene map.
|
|
46766
46848
|
*
|
|
46849
|
+
* Everything sits in one box centred on the world origin (see {@link ensureFrame}): the reference
|
|
46850
|
+
* volume's, else the density grid's. The Volume view's axes gizmo and Z-height handle are drawn on
|
|
46851
|
+
* it, and the handle stretches Z: the cloud through its `scale3d`, every volume through its voxel
|
|
46852
|
+
* size, so nothing is re-uploaded while dragging (see {@link setZScale}).
|
|
46853
|
+
*
|
|
46767
46854
|
* Thinner than the 2D scene: there is no tissue image to render (a registered volume like the
|
|
46768
46855
|
* Allen CCF has no single reference plane), so no readback and no navigator; the 3D scale bar
|
|
46769
46856
|
* follows the dataset (see {@link installScaleBar}). The region tools work in SCREEN space through
|
|
@@ -46804,6 +46891,14 @@ class Spatial3dScene extends SpatialSceneBase {
|
|
|
46804
46891
|
this.geneMapKey = null;
|
|
46805
46892
|
/** Offset applied to observation coordinates to sit them in the volume's box. */
|
|
46806
46893
|
this.origin = [0, 0, 0];
|
|
46894
|
+
/** The box everything sits in, before the Z stretch, centred on the origin (see ensureFrame). */
|
|
46895
|
+
this.box = null;
|
|
46896
|
+
this.boxKey = null;
|
|
46897
|
+
/** The axes gizmo on {@link box} and the handle that stretches its Z (see setZScale). */
|
|
46898
|
+
this.gizmo = null;
|
|
46899
|
+
this.zHandle = null;
|
|
46900
|
+
/** Each volume layer's own voxel size, before the Z stretch. */
|
|
46901
|
+
this.baseVoxels = new WeakMap();
|
|
46807
46902
|
/**
|
|
46808
46903
|
* napari-js's depth-aware pick over the cloud, and the projection the ROI selection reads. It
|
|
46809
46904
|
* owns the caching policy: re-project lazily, on the first pick after the camera, the canvas or
|
|
@@ -46860,7 +46955,7 @@ class Spatial3dScene extends SpatialSceneBase {
|
|
|
46860
46955
|
const [vx, vy, vz] = meta.voxelSize;
|
|
46861
46956
|
this.regionMeshes.setFrame({
|
|
46862
46957
|
size: [meta.width, meta.height, meta.depth],
|
|
46863
|
-
world: [meta.width * vx, meta.height * vy, meta.depth * vz],
|
|
46958
|
+
world: [meta.width * vx, meta.height * vy, meta.depth * vz * this.zScale()],
|
|
46864
46959
|
});
|
|
46865
46960
|
}
|
|
46866
46961
|
/**
|
|
@@ -46898,6 +46993,63 @@ class Spatial3dScene extends SpatialSceneBase {
|
|
|
46898
46993
|
histogram() {
|
|
46899
46994
|
return null;
|
|
46900
46995
|
}
|
|
46996
|
+
/** The toolbar's 3D controls, as the Volume view's: drag mode, re-framing and the axes. */
|
|
46997
|
+
surface3dControls() {
|
|
46998
|
+
return surface3dControls(this.ctx, () => this.gizmo);
|
|
46999
|
+
}
|
|
47000
|
+
/**
|
|
47001
|
+
* Stretch Z by `factor` (1 = the data's true proportions), as the Z handle drags it: the cloud
|
|
47002
|
+
* through its `scale3d`, each volume through its voxel size, the axes and the region surfaces
|
|
47003
|
+
* with them — all about the world origin, which the box is centred on, so they stay aligned.
|
|
47004
|
+
* Nothing is re-uploaded. Kept in the settings, so a re-plot keeps it.
|
|
47005
|
+
*/
|
|
47006
|
+
setZScale(factor) {
|
|
47007
|
+
const max = this.box ? spatialZScaleMax(this.box) : SPATIAL_Z_SCALE_MAX;
|
|
47008
|
+
this.ctx.settings.spatialZScale = Math.min(max, Math.max(SPATIAL_Z_SCALE_MIN, factor));
|
|
47009
|
+
this.applyZScale();
|
|
47010
|
+
}
|
|
47011
|
+
/** The Z stretch in effect: the setting, within what this box allows. */
|
|
47012
|
+
zScale() {
|
|
47013
|
+
const max = this.box ? spatialZScaleMax(this.box) : SPATIAL_Z_SCALE_MAX;
|
|
47014
|
+
const s = this.ctx.settings.spatialZScale;
|
|
47015
|
+
return Math.min(max, Math.max(SPATIAL_Z_SCALE_MIN, s > 0 ? s : 1));
|
|
47016
|
+
}
|
|
47017
|
+
applyZScale() {
|
|
47018
|
+
const s = this.zScale();
|
|
47019
|
+
if (this.points)
|
|
47020
|
+
this.points.scale3d = [1, 1, s];
|
|
47021
|
+
for (const layer of [this.volume, this.geneMapLayer, ...this.densityLayers]) {
|
|
47022
|
+
const base = layer && this.baseVoxels.get(layer);
|
|
47023
|
+
if (layer && base)
|
|
47024
|
+
layer.voxelSize = [base[0], base[1], base[2] * s];
|
|
47025
|
+
}
|
|
47026
|
+
const dataset = this.session.latest?.[0];
|
|
47027
|
+
if (this.gizmo && this.box) {
|
|
47028
|
+
const drawn = this.drawnBox(this.box);
|
|
47029
|
+
this.gizmo.setDepth(drawn.depth, spatialAxesLabels(drawn, s, dataset?.micronsPerUnit));
|
|
47030
|
+
}
|
|
47031
|
+
this.zHandle?.reposition();
|
|
47032
|
+
if (dataset)
|
|
47033
|
+
this.placeRegionMeshes(dataset);
|
|
47034
|
+
this.ctx.viewer.requestRender();
|
|
47035
|
+
}
|
|
47036
|
+
/** `box` with its Z stretched as drawn. */
|
|
47037
|
+
drawnBox(box) {
|
|
47038
|
+
return { width: box.width, height: box.height, depth: box.depth * this.zScale() };
|
|
47039
|
+
}
|
|
47040
|
+
/**
|
|
47041
|
+
* Add a volume layer with its Z stretched as the rest of the scene is, remembering its own
|
|
47042
|
+
* voxel size so a later stretch can be applied to it.
|
|
47043
|
+
*/
|
|
47044
|
+
addVolume(viewer, data, width, height, depth, opts) {
|
|
47045
|
+
const [vx, vy, vz] = opts.voxelSize;
|
|
47046
|
+
const layer = viewer.addVolume(data, width, height, depth, {
|
|
47047
|
+
...opts,
|
|
47048
|
+
voxelSize: [vx, vy, vz * this.zScale()],
|
|
47049
|
+
});
|
|
47050
|
+
this.baseVoxels.set(layer, [vx, vy, vz]);
|
|
47051
|
+
return layer;
|
|
47052
|
+
}
|
|
46901
47053
|
/**
|
|
46902
47054
|
* Every observation's position on the canvas under the current 3D camera (for the ROI
|
|
46903
47055
|
* selection), indexed by observation with NaN for anything not drawn. Null before the cloud
|
|
@@ -46935,6 +47087,7 @@ class Spatial3dScene extends SpatialSceneBase {
|
|
|
46935
47087
|
this.geneMapLoads.cancel();
|
|
46936
47088
|
this.scaleBar?.dispose();
|
|
46937
47089
|
this.scaleBar = null;
|
|
47090
|
+
this.removeAxes();
|
|
46938
47091
|
// Drop the cached interleaved coordinates too: holding 3.7M x 3 floats after
|
|
46939
47092
|
// a teardown is ~45MB of retained heap for a scene that no longer exists.
|
|
46940
47093
|
this.positions = null;
|
|
@@ -47047,8 +47200,9 @@ class Spatial3dScene extends SpatialSceneBase {
|
|
|
47047
47200
|
await this.ensureVolume(viewer, dataset, view);
|
|
47048
47201
|
if (!task())
|
|
47049
47202
|
return;
|
|
47050
|
-
//
|
|
47051
|
-
|
|
47203
|
+
// The box everything sits in, before any position is computed from its centring offset.
|
|
47204
|
+
this.ensureFrame(dataset);
|
|
47205
|
+
// Then the cluster density volumes.
|
|
47052
47206
|
await this.ensureDensityVolumes(viewer, dataset, view, selection);
|
|
47053
47207
|
if (!task())
|
|
47054
47208
|
return;
|
|
@@ -47107,6 +47261,7 @@ class Spatial3dScene extends SpatialSceneBase {
|
|
|
47107
47261
|
this.scalarKey = scalarKey;
|
|
47108
47262
|
this.points = viewer.addPoints3D(this.positions, valuesFor(), {
|
|
47109
47263
|
name: 'observations',
|
|
47264
|
+
scale3d: [1, 1, this.zScale()],
|
|
47110
47265
|
colormap,
|
|
47111
47266
|
contrastLimits,
|
|
47112
47267
|
size,
|
|
@@ -47315,7 +47470,7 @@ class Spatial3dScene extends SpatialSceneBase {
|
|
|
47315
47470
|
const lo = 0;
|
|
47316
47471
|
const data = encodeExpressionVolume(field, [lo, hi], { log: view.logScale });
|
|
47317
47472
|
const lut = this.ctx.display.spatialLut(view);
|
|
47318
|
-
this.geneMapLayer =
|
|
47473
|
+
this.geneMapLayer = this.addVolume(viewer, data, field.width, field.height, field.depth, {
|
|
47319
47474
|
name: `gene map · ${gene}${interpolate ? ' · volume' : ''}`,
|
|
47320
47475
|
colormap: colormapFromLut(`gene-map-${gene}`, lut),
|
|
47321
47476
|
// The encoding already applied the window, so the layer must not apply a
|
|
@@ -47371,21 +47526,10 @@ class Spatial3dScene extends SpatialSceneBase {
|
|
|
47371
47526
|
const load = this.densityLoads.next();
|
|
47372
47527
|
if (!key)
|
|
47373
47528
|
return;
|
|
47529
|
+
// The density box is the scene's box (ensureFrame), so the cloud already sits in it.
|
|
47374
47530
|
const grid = densityGrid(dataset);
|
|
47375
47531
|
if (!grid)
|
|
47376
47532
|
return;
|
|
47377
|
-
// With no reference volume there is no offset yet, and a VolumeLayer has no
|
|
47378
|
-
// translate — napari centres its box on the world origin. So the POINTS move by
|
|
47379
|
-
// half the density box, exactly as they do for a reference volume, and the
|
|
47380
|
-
// cached geometry is invalidated because that offset just changed.
|
|
47381
|
-
if (!this.volume) {
|
|
47382
|
-
this.origin = [
|
|
47383
|
-
-(grid.width * grid.voxelSize[0]) / 2,
|
|
47384
|
-
-(grid.height * grid.voxelSize[1]) / 2,
|
|
47385
|
-
-(grid.depth * grid.voxelSize[2]) / 2,
|
|
47386
|
-
];
|
|
47387
|
-
this.layerKey = null;
|
|
47388
|
-
}
|
|
47389
47533
|
let groups;
|
|
47390
47534
|
try {
|
|
47391
47535
|
groups = await this.densityGroups(dataset, column, selection);
|
|
@@ -47424,7 +47568,7 @@ class Spatial3dScene extends SpatialSceneBase {
|
|
|
47424
47568
|
// A cluster with nothing on the grid draws no layer, rather than an empty box.
|
|
47425
47569
|
if (!data)
|
|
47426
47570
|
return;
|
|
47427
|
-
this.densityLayers.push(
|
|
47571
|
+
this.densityLayers.push(this.addVolume(viewer, data, grid.width, grid.height, grid.depth, {
|
|
47428
47572
|
name: `density · ${group.name}`,
|
|
47429
47573
|
colormap: this.ctx.display.channelTintColormap(group.color),
|
|
47430
47574
|
invert: this.ctx.display.invert,
|
|
@@ -47458,16 +47602,11 @@ class Spatial3dScene extends SpatialSceneBase {
|
|
|
47458
47602
|
return rankDensityGroups(column, loaded, dataset.observations.count, selection);
|
|
47459
47603
|
}
|
|
47460
47604
|
/**
|
|
47461
|
-
* Add (or keep) the dataset's reference volume
|
|
47462
|
-
*
|
|
47605
|
+
* Add (or keep) the dataset's reference volume. The offset that sits the observations inside
|
|
47606
|
+
* it is {@link ensureFrame}'s.
|
|
47463
47607
|
*
|
|
47464
|
-
*
|
|
47465
|
-
*
|
|
47466
|
-
* the volume's own frame with its near corner at the coordinate origin. So the two only line
|
|
47467
|
-
* up if the POINTS move — by half the box — which is what {@link origin} is.
|
|
47468
|
-
*
|
|
47469
|
-
* A failed or absent volume is not fatal: the cloud renders on its own, at its own
|
|
47470
|
-
* coordinates, and the camera frames the points instead.
|
|
47608
|
+
* A failed or absent volume is not fatal: the cloud renders on its own, in the same box, and
|
|
47609
|
+
* the camera frames the points instead.
|
|
47471
47610
|
*/
|
|
47472
47611
|
async ensureVolume(viewer, dataset, view) {
|
|
47473
47612
|
const meta = dataset.volume;
|
|
@@ -47482,7 +47621,6 @@ class Spatial3dScene extends SpatialSceneBase {
|
|
|
47482
47621
|
}
|
|
47483
47622
|
// The surfaces sat in the volume just removed (or there was none): down until one is placed.
|
|
47484
47623
|
this.regionMeshes.clearFrame();
|
|
47485
|
-
this.origin = [0, 0, 0];
|
|
47486
47624
|
if (!meta || !port?.getVolume)
|
|
47487
47625
|
return;
|
|
47488
47626
|
let voxels;
|
|
@@ -47497,7 +47635,7 @@ class Spatial3dScene extends SpatialSceneBase {
|
|
|
47497
47635
|
return;
|
|
47498
47636
|
const [vx, vy, vz] = meta.voxelSize;
|
|
47499
47637
|
this.volumeKey = key;
|
|
47500
|
-
this.volume =
|
|
47638
|
+
this.volume = this.addVolume(viewer, voxels, meta.width, meta.height, meta.depth, {
|
|
47501
47639
|
name: 'reference volume',
|
|
47502
47640
|
colormap: 'gray',
|
|
47503
47641
|
// MIP would draw the brightest voxel along each ray, which for an averaged
|
|
@@ -47510,12 +47648,80 @@ class Spatial3dScene extends SpatialSceneBase {
|
|
|
47510
47648
|
});
|
|
47511
47649
|
if (this.regionsThrough)
|
|
47512
47650
|
this.volume.blending = 'translucent_no_depth';
|
|
47513
|
-
// Half the box, negated: the observations' origin is the box's near corner,
|
|
47514
|
-
// and the box is centred on the world origin.
|
|
47515
|
-
this.origin = [-(meta.width * vx) / 2, -(meta.height * vy) / 2, -(meta.depth * vz) / 2];
|
|
47516
47651
|
this.placeRegionMeshes(dataset);
|
|
47652
|
+
}
|
|
47653
|
+
/**
|
|
47654
|
+
* The box everything sits in, centred on the world origin, and the offset that sits the
|
|
47655
|
+
* observations in it; with the axes gizmo and the Z handle on it.
|
|
47656
|
+
*
|
|
47657
|
+
* `VolumeLayer` has no translate: napari-js maps a volume's unit cube to a world box centred on
|
|
47658
|
+
* the origin, sized `dims x voxelSize`. The observations, by contract, are in the reference
|
|
47659
|
+
* volume's frame with its near corner at the coordinate origin, and the density grid is measured
|
|
47660
|
+
* from the coordinate origin the same way (`densityGrid`), so its box is the reference volume's
|
|
47661
|
+
* when there is one. So the POINTS move by half that box — {@link origin} — and every volume, the
|
|
47662
|
+
* reference, the densities and the gene map, lines up with them and with each other. Without a
|
|
47663
|
+
* reference volume this centres the cloud too, which the axes and the Z stretch need: both work
|
|
47664
|
+
* about the origin.
|
|
47665
|
+
*/
|
|
47666
|
+
ensureFrame(dataset) {
|
|
47667
|
+
const meta = dataset.volume;
|
|
47668
|
+
const key = `${dataset.id}:${dataset.observations.count}:${meta ? `${meta.width}x${meta.height}x${meta.depth}` : '-'}`;
|
|
47669
|
+
if (key === this.boxKey)
|
|
47670
|
+
return;
|
|
47671
|
+
this.boxKey = key;
|
|
47672
|
+
const grid = densityGrid(dataset);
|
|
47673
|
+
this.box = grid
|
|
47674
|
+
? {
|
|
47675
|
+
width: grid.width * grid.voxelSize[0],
|
|
47676
|
+
height: grid.height * grid.voxelSize[1],
|
|
47677
|
+
depth: grid.depth * grid.voxelSize[2],
|
|
47678
|
+
}
|
|
47679
|
+
: null;
|
|
47680
|
+
const box = this.box;
|
|
47681
|
+
this.origin = box ? [-box.width / 2, -box.height / 2, -box.depth / 2] : [0, 0, 0];
|
|
47517
47682
|
// Force a geometry rebuild: the offset changed, so cached positions are stale.
|
|
47518
47683
|
this.layerKey = null;
|
|
47684
|
+
this.installAxes(dataset);
|
|
47685
|
+
// A stretch chosen for another box may be past what this one allows: draw what is in effect.
|
|
47686
|
+
this.applyZScale();
|
|
47687
|
+
}
|
|
47688
|
+
/**
|
|
47689
|
+
* The Volume view's axes gizmo and Z-height handle, on {@link box}. The handle floats past the
|
|
47690
|
+
* top of the Z axis (the box's min-XY corner, where the blue axis and its label are), by a share
|
|
47691
|
+
* of the box's largest side rather than of its depth, so it clears the label even while a thin
|
|
47692
|
+
* section is drawn flat.
|
|
47693
|
+
*/
|
|
47694
|
+
installAxes(dataset) {
|
|
47695
|
+
this.removeAxes();
|
|
47696
|
+
const box = this.box;
|
|
47697
|
+
if (!box)
|
|
47698
|
+
return;
|
|
47699
|
+
const { viewer, host, settings } = this.ctx;
|
|
47700
|
+
const drawn = this.drawnBox(box);
|
|
47701
|
+
this.gizmo = new Axes3dGizmo(viewer, host, drawn, spatialAxesLabels(drawn, this.zScale(), dataset.micronsPerUnit), {
|
|
47702
|
+
visible: settings.axesVisible,
|
|
47703
|
+
});
|
|
47704
|
+
const maxScale = spatialZScaleMax(box);
|
|
47705
|
+
this.zHandle = new NapariVolumeZHandle(host, viewer.camera3d, {
|
|
47706
|
+
topAnchor: () => {
|
|
47707
|
+
const d = this.drawnBox(box);
|
|
47708
|
+
return [-d.width / 2, -d.height / 2, d.depth / 2 + 0.08 * Math.max(d.width, d.height, d.depth)];
|
|
47709
|
+
},
|
|
47710
|
+
getScale: () => this.zScale(),
|
|
47711
|
+
setScale: (s) => this.setZScale(s),
|
|
47712
|
+
minScale: SPATIAL_Z_SCALE_MIN,
|
|
47713
|
+
maxScale,
|
|
47714
|
+
pixelsPerDouble: spatialZPixelsPerDouble(maxScale),
|
|
47715
|
+
});
|
|
47716
|
+
}
|
|
47717
|
+
removeAxes() {
|
|
47718
|
+
if (this.gizmo) {
|
|
47719
|
+
this.ctx.viewer.layers.remove(this.gizmo.layer);
|
|
47720
|
+
this.gizmo.destroy();
|
|
47721
|
+
this.gizmo = null;
|
|
47722
|
+
}
|
|
47723
|
+
this.zHandle?.destroy();
|
|
47724
|
+
this.zHandle = null;
|
|
47519
47725
|
}
|
|
47520
47726
|
/** Drop every layer of the cloud (the dataset went away, or has no z). */
|
|
47521
47727
|
removeLayers(viewer) {
|
|
@@ -47537,6 +47743,9 @@ class Spatial3dScene extends SpatialSceneBase {
|
|
|
47537
47743
|
this.volume = null;
|
|
47538
47744
|
this.volumeKey = null;
|
|
47539
47745
|
this.origin = [0, 0, 0];
|
|
47746
|
+
this.box = null;
|
|
47747
|
+
this.boxKey = null;
|
|
47748
|
+
this.removeAxes();
|
|
47540
47749
|
this.points = null;
|
|
47541
47750
|
this.setPicker(null);
|
|
47542
47751
|
this.layerKey = null;
|
|
@@ -47712,6 +47921,7 @@ class NapariVisualizerService extends BaseStoreVisualizer {
|
|
|
47712
47921
|
axesVisible: true,
|
|
47713
47922
|
surfaceWireframe: false,
|
|
47714
47923
|
volumeZScale: 1,
|
|
47924
|
+
spatialZScale: 1,
|
|
47715
47925
|
};
|
|
47716
47926
|
/**
|
|
47717
47927
|
* Frame loading (volume assembly, surface preload): aborted by {@link reset} AND by
|
|
@@ -50212,4 +50422,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
|
|
|
50212
50422
|
*/
|
|
50213
50423
|
|
|
50214
50424
|
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 };
|
|
50215
|
-
//# sourceMappingURL=jax-data-science-sci-image-visualizer-jax-data-science-sci-image-visualizer-
|
|
50425
|
+
//# sourceMappingURL=jax-data-science-sci-image-visualizer-jax-data-science-sci-image-visualizer-CYsPzX3J.mjs.map
|