@jax-data-science/sci-image-visualizer 0.4.0 → 0.6.0

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

@@ -1,9 +1,10 @@
 import { EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
 import { MenuItem } from 'primeng/api';
 import { IImageInfo } from '../contracts/image.contract';
-import { PlotType, PlotTypeDescriptor } from '../contracts/plot-type';
+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";
 /**
  * Presentational toolbar for the plotting viewport.
@@ -20,9 +21,18 @@ import * as i0 from "@angular/core";
 export declare class ToolbarComponent implements OnChanges {
     /** Current image (gates which control groups are shown). */
     imageInfo: IImageInfo | undefined;
-    /** Plot types the active backend advertises. */
-    plotTypeOptions: PlotTypeDescriptor[];
-    selectedPlotType: PlotType;
+    /** Plot types the active backend advertises, then any contributed modes. */
+    plotTypeOptions: PlotTypeOption[];
+    /** The selector's value: a built-in type or a contributed mode's id. */
+    selectedPlotType: PlotTypeId;
+    /**
+     * The built-in type that renders {@link selectedPlotType} — its `baseType`
+     * for a contributed mode. Every tool/control decision below reads
+     * {@link effectivePlotType}, so a contributed mode gets exactly its base
+     * type's toolbar. When unbound, a built-in selection is its own base and
+     * anything else is treated as the default Image view.
+     */
+    basePlotType: PlotType | null;
     /** Isosurface band as a 0–255 slider position (mapped onto the volume's real
      *  intensity range by the renderer). Defaults to the full range. */
     isoRange: number[];
@@ -80,9 +90,13 @@ 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<PlotType>;
+    selectPlotType: EventEmitter<string>;
     /** Intensity (LINE) mode: add another colored line ROI + inset trace. */
     addProfileLine: EventEmitter<void>;
     /** Toggle image smoothing (bilinear) vs nearest-neighbour (crisp pixels). */
@@ -125,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;
@@ -195,7 +211,11 @@ 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
      *  generic zoom/pan tools are hidden. */
     get isImageView(): boolean;
@@ -230,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; }; "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

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, AfterViewInit, EventEmitter, NgZone, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { ChangeDetectorRef, AfterViewInit, ElementRef, EventEmitter, Injector, NgZone, OnChanges, OnDestroy, OnInit, SimpleChanges, Type } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { MenuItem, MessageService, TreeNode } from 'primeng/api';
 import { ContextMenu } from 'primeng/contextmenu';
@@ -7,12 +7,14 @@ import { ImageStatePort } from './contracts/ports/image-state.port';
 import { Polygon } from './models/region';
 import { RegionOpsService } from './region-ops.service';
 import { VisualizerStore } from './store/visualizer-store.service';
-import { PlotType, PlotTypeDescriptor } from './contracts/plot-type';
+import { PlotType, PlotTypeDescriptor, PlotTypeId } from './contracts/plot-type';
+import { PlotTypeContribution, PlotTypeOption } from './contracts/plot-type-contribution.contract';
+import { PlotModeController } from './plot-mode/plot-mode-controller';
 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';
@@ -30,6 +32,7 @@ export declare class VisualizerComponent implements OnInit, OnChanges, AfterView
     private regionOps;
     private vizConfig?;
     private spatialData?;
+    private injector?;
     /** Per-instance toast key. MessageService is a global singleton, so two live
      *  `<visualizer>` instances (main viewer + pipeline-dialog preview) sharing
      *  one key would each render the same message — a duplicate toast. A unique
@@ -118,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. */
@@ -133,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>;
     /**
@@ -204,9 +225,48 @@ export declare class VisualizerComponent implements OnInit, OnChanges, AfterView
     wireframeActive: boolean;
     /** napari 3D decimate factor (1 = Full … 8 = ⅛; default ½); changing it re-plots. */
     resolutionScale: number;
-    /** Plot types the active backend advertises (3D gated by capability). */
+    /** The selector's entries: the built-in plot types the active backend
+     *  advertises (3D gated by capability), then any contributed modes
+     *  ({@link PLOT_TYPE_CONTRIBUTIONS}). */
+    plotTypeMenu: PlotTypeOption[];
+    /**
+     * The built-in plot types on offer — {@link plotTypeMenu} without contributed
+     * modes. Kept with its original type so existing readers are unaffected.
+     */
     plotTypeOptions: PlotTypeDescriptor[];
-    selectedPlotType: PlotType;
+    /**
+     * What the selector shows: a built-in type or a contributed mode's id. Every
+     * rendering and tool decision goes through {@link basePlotType} instead, so a
+     * contributed mode behaves exactly like the built-in type it rides on.
+     */
+    selectedPlotTypeId: PlotTypeId;
+    /**
+     * The built-in plot type being rendered. With no contributed mode active this
+     * is the selection itself; during one it is the mode's `baseType`. Kept with its
+     * original `PlotType` type for existing readers — use {@link selectedPlotTypeId}
+     * for the selector's id. Assigning selects that built-in type.
+     */
+    get selectedPlotType(): PlotType;
+    set selectedPlotType(type: PlotType);
+    /** Contributed plot modes and their single live session. */
+    readonly plotModes: PlotModeController;
+    /**
+     * The live contributed mode's side panel, as the template renders it: an
+     * Angular component with its own injector, or a plain host element a `mount`
+     * panel rendered into. Null while no contributed session is live.
+     */
+    plotModePanel: {
+        title: string;
+        component: Type<unknown> | null;
+        injector: Injector | null;
+        host: HTMLElement | null;
+    } | null;
+    private destroying;
+    /** Where a `mount` panel's host element is attached once the dialog renders. */
+    set plotModePanelSlot(ref: ElementRef<HTMLElement> | undefined);
+    /** The built-in type actually rendered for {@link selectedPlotTypeId}: itself
+     *  for a built-in type, `baseType` for a contributed mode. */
+    get basePlotType(): PlotType;
     /** Floating intensity-profile inset (LINE mode). */
     readonly intensityInsetDiv = "intensity-inset-plot";
     profilePanelPos: {
@@ -276,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);
+    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
@@ -412,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. */
@@ -544,9 +606,60 @@ export declare class VisualizerComponent implements OnInit, OnChanges, AfterView
      * the toolbar/context-menu logic relies on, deactivates 2D-only tools when
      * moving to a 3D type, then re-plots.
      */
-    onSelectPlotType(type: PlotType): void;
+    onSelectPlotType(selected: PlotTypeId): void;
+    /**
+     * Start the selected contributed mode's session, once its base view has
+     * plotted. No-op for a built-in type, or when the base on screen is not the
+     * one the mode rides on. A backend that cannot provide a viewport for it
+     * (e.g. OSD fell back to Plotly) counts as a failed activation.
+     */
+    private activateSelectedPlotMode;
+    /** Render the live mode's panel. Activation can resolve outside Angular (an
+     *  OSD callback, a contribution's own promise), hence the zone re-entry. */
+    private showPlotModePanel;
+    /** Drop the panel (destroying a component panel) before the session ends. */
+    private hidePlotModePanel;
+    /**
+     * A contributed mode could not start. Its base type is already on screen —
+     * the base plotted first — so just select it: nothing needs to re-plot.
+     */
+    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; }]>;
+    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; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<VisualizerComponent, "visualizer", never, { "toolbarTools": { "alias": "toolbarTools"; "required": false; }; "testMode": { "alias": "testMode"; "required": false; }; }, { "isStackEvent": "isStackEvent"; "isGrayscaleEvent": "isGrayscaleEvent"; }, never, ["*"], false, never>;
 }

package/package.json

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