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

package/lib/spatial-controls/spatial-controls.component.d.ts

@@ -1,7 +1,7 @@
-import { EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { EventEmitter, NgZone, OnDestroy, OnInit } from '@angular/core';
 import { IVisualizer, ISpatialControls } from '../contracts/visualizer.contract';
 import { SpatialDataset } from '../contracts/spatial-dataset.contract';
-import { ColormapNode, SpatialViewState } from '../contracts/display-types';
+import { ColormapNode, SpatialViewState, TranscriptGlyphName } from '../contracts/display-types';
 import { SpatialSelectionMask } from '../spatial/spatial-selection';
 import * as i0 from "@angular/core";
 /** One legend row for a categorical colouring. */
@@ -9,6 +9,14 @@ export interface SpatialLegendEntry {
     label: string;
     color: string;
 }
+/**
+ * `group,gene` rows (CSV or TSV, header optional) → gene groups, in file order.
+ * Exported for tests.
+ */
+export declare function parseGeneGroups(text: string): {
+    name: string;
+    genes: string[];
+}[];
 /**
  * Spatial-omics controls: a non-modal, resizable, draggable dialog for choosing
  * what the observation markers are coloured by, and how they are drawn.
@@ -25,6 +33,7 @@ export interface SpatialLegendEntry {
  */
 export declare class SpatialControlsComponent implements OnInit, OnDestroy {
     private readonly viz;
+    private readonly zone;
     /** The embedded chart, so a dialog resize can re-fit it. */
     private charts?;
     /**
@@ -130,7 +139,7 @@ export declare class SpatialControlsComponent implements OnInit, OnDestroy {
     private geneSearchToken;
     private keyToken;
     private readonly subs;
-    constructor(viz: IVisualizer);
+    constructor(viz: IVisualizer, zone: NgZone);
     ngOnInit(): void;
     ngOnDestroy(): void;
     onVisibleChange(value: boolean): void;
@@ -145,6 +154,23 @@ export declare class SpatialControlsComponent implements OnInit, OnDestroy {
      * hop further away.
      */
     onGeneFilter(query: string): Promise<void>;
+    /**
+     * Opening either gene dropdown — "Colour by gene" or the transcript genes. Both share
+     * one list and one search, so each opens on the head of the full list rather than on
+     * whatever the other was last filtered to.
+     *
+     * A whole-transcriptome dataset does not inline its ~30k names; they are fetched here,
+     * once, on first open — the list is then resident and every keystroke filters locally,
+     * exactly as for a targeted panel. Until it arrives the dropdown falls back to asking
+     * the server per keystroke.
+     */
+    ensureGeneList(): Promise<void>;
+    /** Most names fetched for the lazy list — well above any panel, whole-transcriptome included. */
+    private static readonly GENE_LIST_MAX;
+    private geneListLoading;
+    /** Options for `names`, plus the genes already chosen (a multi-select shows a chip only
+     *  for a value it can find among its options). */
+    private withSelected;
     /** A gene was picked; it supersedes any column selection. */
     onGene(name: string | null): void;
     /** Select every observation inside the drawn regions (their union). */
@@ -221,6 +247,211 @@ export declare class SpatialControlsComponent implements OnInit, OnDestroy {
     /** Mirrors the renderer's cap, for the note only. */
     private static readonly DENSITY_MAX_CLUSTERS;
     onClip(value: [number, number]): void;
+    readonly cellDrawOptions: {
+        label: string;
+        value: string;
+    }[];
+    readonly transcriptColorOptions: {
+        label: string;
+        value: string;
+    }[];
+    readonly glyphOptions: {
+        label: string;
+        value: TranscriptGlyphName;
+        points: string;
+    }[];
+    readonly budgetOptions: {
+        label: string;
+        value: number;
+    }[];
+    /** Boundaries on offer: tiled (level-of-detail) or whole-dataset rings. */
+    get hasCells(): boolean;
+    get hasTranscripts(): boolean;
+    /** Whether outlines are on — the explicit choice, or automatically for data that has them. */
+    get cellsOn(): boolean;
+    get activeCellSet(): string | null;
+    /**
+     * Option lists for the cell/transcript controls. Built once per dataset rather than in
+     * getters: a getter returns a fresh array on every change-detection pass, and PrimeNG
+     * re-renders its buttons whenever the array identity changes — which made them
+     * impossible to click.
+     */
+    cellSetOptions: {
+        label: string;
+        value: string;
+    }[];
+    transcriptModeOptions: {
+        label: string;
+        value: SpatialViewState['transcriptMode'];
+    }[];
+    private buildTileOptions;
+    /** Cell colour modes on offer (Xenium Explorer's "Cell Color"). */
+    cellColorOptions: {
+        label: string;
+        value: SpatialViewState['cellColorMode'];
+    }[];
+    /**
+     * The group picker: categorical columns under their section heading, a family of
+     * variants (k-means at k = 2…10) listed once. Values are a column name, or
+     * `family:<id>` for a family.
+     */
+    groupOptions: {
+        label: string;
+        items: {
+            label: string;
+            value: string;
+        }[];
+    }[];
+    /** Variants of the active family (k = 2…10), when a family is active. */
+    groupVariantOptions: {
+        label: string;
+        value: string;
+    }[];
+    /** The last variant chosen per family, so switching away and back keeps k. */
+    private familyChoice;
+    private buildGroupOptions;
+    /** The picker's value for the active group column. */
+    get activeGroupEntry(): string | null;
+    private refreshVariants;
+    onGroupEntry(value: string): void;
+    onGroupVariant(name: string): void;
+    /** The active grouping's categories with colours and cell counts, largest first. */
+    groupRows: {
+        label: string;
+        color: string;
+        count: number;
+    }[];
+    groupTotal: number;
+    groupsExpanded: boolean;
+    private groupRowsFor;
+    groupImportError: string | null;
+    groupImporting: boolean;
+    private refreshGroups;
+    isGroupShown(label: string): boolean;
+    get allGroupsShown(): boolean;
+    onGroupShown(label: string, on: boolean): void;
+    onAllGroupsShown(on: boolean): void;
+    get canImportGroups(): boolean;
+    /** '+': a CSV/TSV of `cell_id` and group, named after the file. */
+    onImportGroupsFile(input: HTMLInputElement): Promise<void>;
+    get activeCellTypeColumn(): string | null;
+    onShowCells(on: boolean): void;
+    onCellSet(set: string): void;
+    onCellDraw(draw: SpatialViewState['cellDraw']): void;
+    onCellOpacity(value: number | undefined): void;
+    onCellTypeColumn(name: string | null): void;
+    onCellColorMode(mode: SpatialViewState['cellColorMode']): void;
+    onCellColorGene(gene: string | null): void;
+    onCellSingleColor(hex: string): void;
+    /** Fill opacity as a 0–100 number, for the box beside the slider. */
+    onCellOpacityPercent(v: number | null): void;
+    onShowImage(on: boolean): void;
+    onShowAnnotations(on: boolean): void;
+    /** Which collapsible sections are open. Per dialog instance, not persisted. */
+    open: Record<'images' | 'cells' | 'transcripts' | 'annotations' | 'observations', boolean>;
+    toggleSection(name: keyof SpatialControlsComponent['open']): void;
+    /** The mode the section header's switch turns back on. */
+    private lastTranscriptMode;
+    onTranscriptsOn(on: boolean): void;
+    /** Estimated transcripts in view, against the budget — Explorer's points bar. */
+    estimate: {
+        points: number;
+        max: number;
+    } | null;
+    /** The density window in use and its densest bin, for the threshold control. */
+    densityStats: {
+        lo: number;
+        hi: number;
+        max: number;
+    } | null;
+    get estimatePercent(): number;
+    get estimateOverMax(): boolean;
+    editingMax: boolean;
+    /** The selected genes as Explorer's tree: named groups, then the ungrouped ones. */
+    /** Rebuilt when the view changes — never per change-detection pass (see buildTileOptions). */
+    geneTree: {
+        name: string | null;
+        genes: string[];
+    }[];
+    geneMenu: {
+        label: string;
+        icon: string;
+        command: () => void;
+        disabled?: boolean;
+    }[];
+    private buildGeneTree;
+    /** Real genes in the panel — the tree's denominator. */
+    get geneTotal(): number;
+    collapsedGeneGroups: Set<string>;
+    geneTreeOpen: boolean;
+    toggleGeneGroup(name: string): void;
+    isGeneShown(gene: string): boolean;
+    areGenesShown(genes: string[]): boolean;
+    /** The eye toggle: hide or show genes without removing them from the selection. */
+    onGenesShown(genes: string[], on: boolean): void;
+    onGeneColor(gene: string, hex: string): void;
+    /** '±': every gene, or back to the chosen list. */
+    onToggleAllGenes(): void;
+    /** '⋮' menu. */
+    private buildGeneMenu;
+    /** The hidden file input the menu's import opens. */
+    private geneGroupFileRef?;
+    private get geneGroupInput();
+    trackByLabel: (_i: number, row: {
+        label: string;
+    }) => string;
+    trackByNode: (_i: number, node: {
+        name: string | null;
+    }) => string;
+    trackByLabelString: (_i: number, s: string) => string;
+    get cellOpacityPercent(): number;
+    get densityOpacityPercent(): number;
+    geneGroupError: string | null;
+    onNewGeneGroup(): void;
+    /**
+     * Import gene groups: CSV/TSV with a group and a gene column (header optional), e.g.
+     * marker genes per cell type. The genes are added to the selection.
+     */
+    onImportGeneGroups(input: HTMLInputElement): Promise<void>;
+    readonly densityBins: number[];
+    get densityBinIndex(): number;
+    onDensityBinIndex(i: number | undefined): void;
+    onDensityOpacityPercent(v: number | null): void;
+    /**
+     * The threshold window shown: the one set, else the one derived. A stored array, not a
+     * getter: a range slider's `ngModel` given a fresh array every change-detection pass
+     * schedules another pass, forever — which hung the page the moment the density
+     * controls appeared.
+     */
+    densityWindow: [number, number];
+    densitySliderMax: number;
+    densityStep: number;
+    private refreshDensityWindow;
+    onDensityRange(range: [number, number] | number[] | undefined): void;
+    onDensityRangeEnd(which: 0 | 1, v: number | null): void;
+    onDensityAuto(): void;
+    selectedDensityColormapNode: ColormapNode | null;
+    onDensityColormap(node: ColormapNode | null): void;
+    get densityColorBarCss(): string;
+    onTranscriptMode(mode: SpatialViewState['transcriptMode']): void;
+    onTranscriptGenes(genes: string[] | null): void;
+    /** "All genes" needs the grouping pyramid, or at least tiles to draw individually. */
+    get canShowAllGenes(): boolean;
+    /** Why "All genes" is not offered yet, while the server builds its pyramid. */
+    get allGenesPreparing(): string | null;
+    get showingAllGenes(): boolean;
+    onTranscriptAllGenes(on: boolean): void;
+    onTranscriptBudget(n: number): void;
+    onTranscriptColorBy(by: SpatialViewState['transcriptColorBy']): void;
+    onTranscriptScale(value: number | undefined): void;
+    onTranscriptOpacity(value: number | undefined): void;
+    onTranscriptQuality(includeLow: boolean): void;
+    onDensityOpacity(value: number | undefined): void;
+    glyphOf(gene: string, slot: number): TranscriptGlyphName;
+    onGlyph(gene: string, glyph: TranscriptGlyphName): void;
+    /** The colour gene `slot` is drawn in when transcripts are coloured by gene. */
+    geneColor(slot: number): string;
+    geneColorOf(gene: string): string;
     reset(): void;
     /**
      * Description of the active column, when it has one. Surfaced because a

package/lib/toolbar/brush/brush-tool.service.d.ts

@@ -4,6 +4,15 @@ import * as i0 from "@angular/core";
 /** Brush parameters. `size` is the brush *diameter* in matrix (image) pixels. */
 export interface BrushOptions {
     size?: number;
+    /**
+     * Paint as one class. With `label` set, new regions take this label, and the
+     * stroke only adopts or merges regions that already have it, so painting one
+     * class never grows another class's region. `color` colours the painted
+     * regions instead of the toolbar's shape colour. Leave both unset for the
+     * plain toolbar brush.
+     */
+    label?: string;
+    color?: string;
 }
 /**
  * The brush host is identical to the wand's — both need the cached-image
@@ -60,6 +69,8 @@ export declare class BrushToolService {
     private lastMatrix;
     private dragging;
     private size;
+    /** The class being painted ({@link BrushOptions.label} / `color`); null = plain brush. */
+    private paintClass;
     private readonly boundMouseDown;
     private readonly boundMouseMove;
     private readonly boundMouseUp;
@@ -68,6 +79,13 @@ export declare class BrushToolService {
     bindHost(host: BrushToolHost): void;
     /** Toggle the brush on/off. */
     setMode(active: boolean, options?: BrushOptions): void;
+    /**
+     * Update size and/or class while armed. The class changes only when `label`
+     * or `color` is passed (as a key, even `undefined`), so a size-only update
+     * keeps it. Switching class drops the active region, so the next stroke
+     * starts a region of the new class.
+     */
+    setOptions(options?: BrushOptions): void;
     /** Live-update the brush size (matrix-pixel diameter). */
     setSize(size: number): void;
     /** Drop the active brush region so the next stroke starts a new one. */
@@ -102,6 +120,9 @@ export declare class BrushToolService {
      * erase stroke deletes every pixel.
      */
     private dropActiveShape;
+    /** Whether the stroke may adopt or merge `region`: always for the plain brush,
+     *  otherwise only a region of the class being painted. */
+    private paintsInto;
     /** A region's closed-polygon vertices (image/data coords), or null when it
      *  isn't a fillable closed polygon (rectangles, open polylines). */
     private regionVerts;

package/lib/toolbar/toolbar.component.d.ts

@@ -3,7 +3,7 @@ import { MenuItem } from 'primeng/api';
 import { IImageInfo } from '../contracts/image.contract';
 import { PlotType, PlotTypeId } from '../contracts/plot-type';
 import { ToolbarToolVisibility } from '../contracts/toolbar-config';
-import { ToolbarToolContribution } from '../contracts/toolbar-tool.contract';
+import { ToolbarDialogToolContribution, ToolbarToolContribution } from '../contracts/toolbar-tool.contract';
 import { PlotTypeOption } from '../contracts/plot-type-contribution.contract';
 import * as i0 from "@angular/core";
 /**
@@ -90,6 +90,10 @@ export declare class ToolbarComponent implements OnChanges {
      * per-tool parameter state; this component only draws them.
      */
     contributedTools: ToolbarToolContribution[];
+    /** Dialog tools (TOOLBAR_TOOLS, kind: 'dialog'), sorted; shown in the Image view. */
+    dialogTools: ToolbarDialogToolContribution[];
+    /** Id of the dialog tool whose dialog is open, or null. */
+    openDialogToolId: string | null;
     /** Active checkpoint per contributed tool, keyed by tool id. */
     toolModelIds: Record<string, string>;
     selectPlotType: EventEmitter<string>;
@@ -135,6 +139,8 @@ export declare class ToolbarComponent implements OnChanges {
     segmentCellpose: EventEmitter<void>;
     /** Run a contributed tool over the current view, by tool id. */
     runTool: EventEmitter<string>;
+    /** A dialog tool's button was clicked: open its dialog, or close it if open. */
+    toggleDialogTool: EventEmitter<string>;
     /** Pick a contributed tool's checkpoint. */
     toolModelChange: EventEmitter<{
         toolId: string;
@@ -205,7 +211,9 @@ export declare class ToolbarComponent implements OnChanges {
     get contributedToolNames(): string;
     /** Keeps each contributed tool's `p-menu` overlay alive across CD ticks —
      *  re-creating it mid-interaction swallows the click on a menu item. */
-    trackToolById(_index: number, tool: ToolbarToolContribution): string;
+    trackToolById(_index: number, tool: {
+        id: string;
+    }): string;
     /** The built-in type whose tools and controls apply to the current selection. */
     get effectivePlotType(): PlotType;
     /** The Image plot type renders as a natively pan/zoom-able raster, so the
@@ -242,5 +250,5 @@ export declare class ToolbarComponent implements OnChanges {
     get isIntensityCapable(): boolean;
     showHelp(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ToolbarComponent, "plotting-toolbar", never, { "imageInfo": { "alias": "imageInfo"; "required": false; }; "plotTypeOptions": { "alias": "plotTypeOptions"; "required": false; }; "selectedPlotType": { "alias": "selectedPlotType"; "required": false; }; "basePlotType": { "alias": "basePlotType"; "required": false; }; "isoRange": { "alias": "isoRange"; "required": false; }; "maxIndex": { "alias": "maxIndex"; "required": false; }; "zIndex": { "alias": "zIndex"; "required": false; }; "isHeatmap": { "alias": "isHeatmap"; "required": false; }; "is3dRegions": { "alias": "is3dRegions"; "required": false; }; "activeDragMode": { "alias": "activeDragMode"; "required": false; }; "activeSurface3dMode": { "alias": "activeSurface3dMode"; "required": false; }; "axesVisible": { "alias": "axesVisible"; "required": false; }; "wireframeActive": { "alias": "wireframeActive"; "required": false; }; "resolutionScale": { "alias": "resolutionScale"; "required": false; }; "wandSensitivity": { "alias": "wandSensitivity"; "required": false; }; "brushSize": { "alias": "brushSize"; "required": false; }; "vertexEraserRadius": { "alias": "vertexEraserRadius"; "required": false; }; "canUndo": { "alias": "canUndo"; "required": false; }; "canRedo": { "alias": "canRedo"; "required": false; }; "stackOptions": { "alias": "stackOptions"; "required": false; }; "tools": { "alias": "tools"; "required": false; }; "imageSmoothingEnabled": { "alias": "imageSmoothingEnabled"; "required": false; }; "samModels": { "alias": "samModels"; "required": false; }; "samModelId": { "alias": "samModelId"; "required": false; }; "contributedTools": { "alias": "contributedTools"; "required": false; }; "toolModelIds": { "alias": "toolModelIds"; "required": false; }; }, { "selectPlotType": "selectPlotType"; "addProfileLine": "addProfileLine"; "toggleImageSmoothing": "toggleImageSmoothing"; "isoRangeChange": "isoRangeChange"; "openChannelHistogram": "openChannelHistogram"; "openSpatialControls": "openSpatialControls"; "openRegionEditor": "openRegionEditor"; "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"; "toolModelChange": "toolModelChange"; "openToolParams": "openToolParams"; "samModelChange": "samModelChange"; "wandSensitivityChange": "wandSensitivityChange"; "brushSizeChange": "brushSizeChange"; "vertexEraserRadiusChange": "vertexEraserRadiusChange"; }, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToolbarComponent, "plotting-toolbar", never, { "imageInfo": { "alias": "imageInfo"; "required": false; }; "plotTypeOptions": { "alias": "plotTypeOptions"; "required": false; }; "selectedPlotType": { "alias": "selectedPlotType"; "required": false; }; "basePlotType": { "alias": "basePlotType"; "required": false; }; "isoRange": { "alias": "isoRange"; "required": false; }; "maxIndex": { "alias": "maxIndex"; "required": false; }; "zIndex": { "alias": "zIndex"; "required": false; }; "isHeatmap": { "alias": "isHeatmap"; "required": false; }; "is3dRegions": { "alias": "is3dRegions"; "required": false; }; "activeDragMode": { "alias": "activeDragMode"; "required": false; }; "activeSurface3dMode": { "alias": "activeSurface3dMode"; "required": false; }; "axesVisible": { "alias": "axesVisible"; "required": false; }; "wireframeActive": { "alias": "wireframeActive"; "required": false; }; "resolutionScale": { "alias": "resolutionScale"; "required": false; }; "wandSensitivity": { "alias": "wandSensitivity"; "required": false; }; "brushSize": { "alias": "brushSize"; "required": false; }; "vertexEraserRadius": { "alias": "vertexEraserRadius"; "required": false; }; "canUndo": { "alias": "canUndo"; "required": false; }; "canRedo": { "alias": "canRedo"; "required": false; }; "stackOptions": { "alias": "stackOptions"; "required": false; }; "tools": { "alias": "tools"; "required": false; }; "imageSmoothingEnabled": { "alias": "imageSmoothingEnabled"; "required": false; }; "samModels": { "alias": "samModels"; "required": false; }; "samModelId": { "alias": "samModelId"; "required": false; }; "contributedTools": { "alias": "contributedTools"; "required": false; }; "dialogTools": { "alias": "dialogTools"; "required": false; }; "openDialogToolId": { "alias": "openDialogToolId"; "required": false; }; "toolModelIds": { "alias": "toolModelIds"; "required": false; }; }, { "selectPlotType": "selectPlotType"; "addProfileLine": "addProfileLine"; "toggleImageSmoothing": "toggleImageSmoothing"; "isoRangeChange": "isoRangeChange"; "openChannelHistogram": "openChannelHistogram"; "openSpatialControls": "openSpatialControls"; "openRegionEditor": "openRegionEditor"; "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"; }, never, ["*"], false, never>;
 }

package/lib/visualizer.component.d.ts

@@ -14,7 +14,7 @@ import { IVisualizer } from './contracts/visualizer.contract';
 import { SamToolService } from './toolbar/segmentation/sam-tool.service';
 import { SamPointToolService } from './toolbar/segmentation/sam-point-tool.service';
 import { CellSegmentToolService } from './toolbar/segmentation/cell-segment-tool.service';
-import { NumberParamSpec, SelectParamSpec, ToolParamSpec, ToolbarToolContribution } from './contracts/toolbar-tool.contract';
+import { NumberParamSpec, SelectParamSpec, ToolParamSpec, ToolbarContribution, ToolbarDialogToolContribution, ToolbarToolContribution } from './contracts/toolbar-tool.contract';
 import { ToolbarToolVisibility } from './contracts/toolbar-config';
 import { VizConfig } from './contracts/viz-config';
 import { SpatialDataPort } from './contracts/ports/spatial-data.port';
@@ -121,6 +121,8 @@ export declare class VisualizerComponent implements OnInit, OnChanges, AfterView
     wandSensitivity: number;
     /** Brush diameter in image-pixel coordinates (drives the painted disc size). */
     brushSize: number;
+    /** Class the brush paints while a plot mode armed it (PlotModeTools.armBrush); null = plain brush. */
+    private brushClass;
     /** SAM model picker options + current selection (jit-ui#90 P1). Only models
      *  with a hosted ONNX pair (configured via setSamModelUrls at app init) are
      *  offered, so the picker can't select a model that can't run. */
@@ -136,6 +138,22 @@ export declare class VisualizerComponent implements OnInit, OnChanges, AfterView
      * and help dialog simply omit that group.
      */
     contributedTools: ToolbarToolContribution[];
+    /**
+     * Dialog tools registered through {@link TOOLBAR_TOOLS} (`kind: 'dialog'`),
+     * sorted. Their buttons sit with the host's own actions and show in the Image
+     * view only; each opens a floating dialog the tool fills.
+     */
+    dialogTools: ToolbarDialogToolContribution[];
+    /** The dialog tool the user has open (its session may be between renders). */
+    openDialogToolId: string | null;
+    /** The open dialog tool's live dialog, as the template renders it. */
+    toolDialog: {
+        title: string;
+        width: string;
+        host: HTMLElement;
+    } | null;
+    /** Dialog-tool sessions: the same lifecycle and isolation as contributed plot modes. */
+    private readonly toolDialogs;
     /** Active checkpoint per contributed tool. */
     toolModelIds: Record<string, string>;
     /**
@@ -318,7 +336,7 @@ export declare class VisualizerComponent implements OnInit, OnChanges, AfterView
     private wheelListener?;
     /** Debounced z-slice scrubbing (see SliceScrubber — refactoring plan Step 7). */
     private readonly scrubber;
-    constructor(state: ImageStatePort, plotService: IVisualizer, messageService: MessageService, ngZone: NgZone, cdr: ChangeDetectorRef, session: VisualizerStore, samTool: SamToolService, cellSegmentTool: CellSegmentToolService, samPointTool: SamPointToolService, regionOps: RegionOpsService, vizConfig?: VizConfig | undefined, toolContributions?: readonly ToolbarToolContribution[], spatialData?: SpatialDataPort | undefined, plotTypeContributions?: readonly PlotTypeContribution[], injector?: Injector | undefined);
+    constructor(state: ImageStatePort, plotService: IVisualizer, messageService: MessageService, ngZone: NgZone, cdr: ChangeDetectorRef, session: VisualizerStore, samTool: SamToolService, cellSegmentTool: CellSegmentToolService, samPointTool: SamPointToolService, regionOps: RegionOpsService, vizConfig?: VizConfig | undefined, toolContributions?: readonly ToolbarContribution[], spatialData?: SpatialDataPort | undefined, plotTypeContributions?: readonly PlotTypeContribution[], injector?: Injector | undefined);
     /**
      * Plot types offered in the selector for the current image:
      *  - Outside **test mode**, only the curated default set (descriptors with a
@@ -454,6 +472,8 @@ export declare class VisualizerComponent implements OnInit, OnChanges, AfterView
     onToggleImageSmoothing(): void;
     resetAxes(): void;
     toggleDragMode(mode: string): void;
+    /** Arm `mode` (or nothing) across every tool, keeping the toolbar in step. */
+    private applyDragMode;
     /** Region draw/select/edit modes routed through the region overlay. The
      *  The vertex tools (drawpolygon/addpoint/deletepoint/move) are
      *  handled by the OpenSeadragon overlay; Plotly's overlay maps them to no-op. */
@@ -606,6 +626,38 @@ export declare class VisualizerComponent implements OnInit, OnChanges, AfterView
     private fallBackFromPlotMode;
     /** Run change detection; returns what it threw (logged), or null. */
     private detectChangesSafely;
+    /** The toolbar button: open the tool's dialog, or close it if it is open. */
+    toggleDialogTool(id: string): void;
+    /** Close the open dialog tool: its body is torn down, then its session ends. */
+    closeDialogTool(): void;
+    /** Start (or restart, after a re-render) the open dialog tool's session. */
+    private activateOpenDialogTool;
+    /** The live dialog body's teardown, and a pending wait for its host to connect. */
+    private toolDialogTeardown;
+    private toolDialogFrame;
+    /**
+     * The session is live: render the dialog, then mount the tool's body once the host
+     * element is in the document, so `mount()` can measure it and start widgets that need
+     * a connected element.
+     */
+    private showToolDialog;
+    /** How many animation frames to wait for the dialog to attach the body's host. */
+    private static readonly TOOL_DIALOG_ATTACH_FRAMES;
+    /**
+     * Mount `tool`'s body into `host` once it is connected (the dialog may attach it a
+     * frame later, when it moves itself to `<body>`). If it never connects within
+     * {@link TOOL_DIALOG_ATTACH_FRAMES} it is mounted anyway, with a warning, rather than
+     * leaving an empty dialog. A throwing `mount()` fails the session like a failed start.
+     */
+    private mountToolDialogBody;
+    /** The session is about to end: tear the body down first, then drop the dialog. */
+    private hideToolDialog;
+    /** A dialog tool could not start: close it and say so. */
+    private dialogToolFailed;
+    /** Where the open dialog tool's host element is attached once its dialog renders. */
+    set toolDialogSlot(ref: ElementRef<HTMLElement> | undefined);
+    /** Toolbar tools for contributed modes. Calls can come from outside Angular, hence the zone. */
+    private readonly plotModeTools;
     /** Deactivate whatever tool is armed and clear every tool mode. */
     private deactivateActiveTool;
     static ɵfac: i0.ɵɵFactoryDeclaration<VisualizerComponent, [null, null, null, null, null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }]>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jax-data-science/sci-image-visualizer",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "engines": {
     "node": ">=20.9.0"
   },