@jax-data-science/sci-image-visualizer 0.9.0 → 0.10.0

package/lib/visualizer/volume-sections.d.ts

@@ -0,0 +1,64 @@
+import { Observable } from 'rxjs';
+import type { IChannelState } from '../contracts/channel-histogram-api.contract';
+import type { Colormap } from 'napari-js';
+import type { SectionAxis, SectionViews } from '../contracts/section-view.contract';
+import type { SliceOutlines } from '../geometry/reconstruct';
+import type { VolumeVoxelsOnScreen } from '../implementations/napari-js/napari-scene';
+import type { SlicePlanes } from '../implementations/napari-js/napari-volume-slice-planes';
+/** What the sections are cut from and shown with. */
+export interface VolumeSectionsDeps {
+    /** The volume on screen as assembled, or null (not a volume view, or not assembled yet). */
+    volume(): VolumeVoxelsOnScreen | null;
+    /** The image the volume is of: another one drops the outlines read and puts the planes back. */
+    image(): string | undefined;
+    /** Show the planes in the volume (null: hide one). */
+    showPlanes(planes: SlicePlanes): void;
+    /** Every class's outlines on every slice (see RegionStore.outlinesByClass). */
+    outlinesByClass(level: number): Promise<Map<string, SliceOutlines[]>>;
+    isClassHidden(label: string): boolean;
+    colorOf(label: string): string;
+    channelStates(): IChannelState[];
+    /** The colormap the 3D view draws a channel with: its tint in a multichannel volume, else the volume's. */
+    colormap(channel: IChannelState | undefined, multichannel: boolean): Colormap;
+    invert(): boolean;
+    /** The slice shown and edited. */
+    slice(): number;
+}
+/**
+ * The sections beside a split volume view: the planes x = const and y = const (image px), each cut
+ * from the assembled volume as an image, displayed like the 2D view displays a slice (the channel
+ * windows, tints and invert), with every class's outlines cut by the same plane and the other two
+ * planes as a crosshair. Recut when a plane moves, the slice changes, the regions or their
+ * visibility change, the display changes or the volume is assembled again — once per frame at most.
+ */
+export declare class VolumeSections {
+    private readonly deps;
+    private readonly views$;
+    private open;
+    private planes;
+    /** The image the planes and outlines are of. */
+    private image;
+    /** Every class's outlines at a level, read and indexed once until the regions change. */
+    private outlines;
+    private scheduled;
+    /** Bumped per cut, so a cut that waited on the outlines is dropped when a newer one starts. */
+    private request;
+    constructor(deps: VolumeSectionsDeps);
+    /** Both sections as they are cut; nulls while closed. */
+    getViews$(): Observable<SectionViews>;
+    /** Show the sections (their planes through the middle of the image at first). */
+    start(): void;
+    stop(): void;
+    /** Move a section's plane to `at` (image px; clamped into the image). */
+    setPlane(axis: SectionAxis, at: number): void;
+    /** The planes as they are (image px), the z plane being the slice. */
+    getPlanes(): SlicePlanes;
+    /** The regions changed (an edit): their outlines are read again, once the edits pause. */
+    regionsChanged(): void;
+    /** Something the sections show changed (the slice, the display, the visible classes, the volume). */
+    schedule(): void;
+    private cut;
+    private view;
+    /** The volume's channels as displayed now. */
+    private voxels;
+}

package/lib/visualizer.component.d.ts

@@ -26,6 +26,7 @@ import { RegionActions } from './visualizer/region-actions';
 import { ToolModes } from './visualizer/tool-modes';
 import { FloatingPos } from './visualizer/floating-drag.directive';
 import { IntensityInsetComponent } from './intensity-inset/intensity-inset.component';
+import type { SectionAxis, SectionViews } from './contracts/section-view.contract';
 import { SpatialDatasetBinder } from './visualizer/spatial-dataset-binder';
 import * as i0 from "@angular/core";
 /**
@@ -245,6 +246,36 @@ export declare class VisualizerComponent implements OnInit, OnChanges, AfterView
      *  selection there: region tools are screen-space, and against an orbiting
      *  camera a drawn rectangle has no fixed meaning in the data. */
     protected get isSpatial3dMode(): boolean;
+    /** True in a napari volume or isosurface view, where the Region Editor shows regions in 3D. */
+    protected get isVolumeView(): boolean;
+    /** Whether the user split the volume view with the slice editor (off by default; kept while
+     *  the view shows other plot types, so a volume view opens split again). */
+    protected sliceEditor: boolean;
+    /** The slice editor's pane: the displayed slice, with every region tool, top right. */
+    protected readonly sliceDivName: string;
+    /** The left column's and the top row's shares of the slice editor (%). */
+    protected splitX: number;
+    protected splitY: number;
+    /** The sections through x and y shown below (nulls until the volume is cut). */
+    protected sections: SectionViews;
+    protected get sliceEditorShown(): boolean;
+    /**
+     * Split the volume view with the slice editor, or close it. The editor opens on the displayed
+     * slice and takes the drawing tools; closing it leaves the selection tool armed (it picks the
+     * surfaces in 3D) and disarms any other.
+     */
+    protected toggleSliceEditor(): Promise<void>;
+    /** A point picked in a section: the slice and the other section's plane move there. */
+    protected onSectionPick(axis: SectionAxis, at: {
+        u: number;
+        v: number;
+    }): void;
+    /** Drag a divider of the slice editor: the vertical one sets the columns, the horizontal one the rows. */
+    protected startPaneResize(event: PointerEvent, axis: 'x' | 'y'): void;
+    /** A divider's keyboard: ← → move the vertical one, ↑ ↓ the horizontal one, by 5%. */
+    protected nudgePaneSize(event: KeyboardEvent, axis: 'x' | 'y'): void;
+    private setSplit;
+    private relayoutFrame;
     /** True for the Image plot type, which renders as a natively pan/zoom-able
      *  raster — so the backend-agnostic zoom/pan toolbar tools are hidden. The
      *  component drives this off the plot type, not the active backend. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jax-data-science/sci-image-visualizer",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "engines": {
     "node": ">=20.9.0"
   },
@@ -39,7 +39,7 @@
   "dependencies": {
     "cellpose-js": "^0.6.0",
     "fast-png": "^6.4.0",
-    "napari-js": "^0.15.0",
+    "napari-js": "^0.18.0",
     "openseadragon": "^6.0.2",
     "plotly.js-dist-min": "^3.0.1",
     "tslib": "^2.3.0"

package/src/lib/assets/slice.svg

@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
+  <!-- A volume (a cube) with a slab sliced off it by a scalpel: the slice editor. -->
+  <defs>
+    <mask id="slice-cut" maskUnits="userSpaceOnUse" x="-64" y="-64" width="192" height="192">
+      <rect x="-64" y="-64" width="192" height="192" fill="#fff"/>
+      <!-- The cube's lines stop short of the scalpel, so it reads at toolbar size. -->
+      <path d="M27.4 19.4 Q20.5 29.3 24.9 42.6 L34.1 21.4 Z" fill="#000" stroke="#000" stroke-width="5" stroke-linejoin="round"/>
+      <path d="M31.8 19.1 L34.2 11.0 M31.4 20.6 L31.8 19.1" stroke="#000" stroke-width="12" stroke-linecap="round"/>
+    </mask>
+  </defs>
+  <g transform="translate(4.89 -8.48) scale(1.1566)">
+  <g fill="none" stroke="#000" stroke-width="4.6" stroke-linejoin="round" stroke-linecap="round" mask="url(#slice-cut)">
+    <path d="M22.0 59.0 L30.3 54.2 L30.3 35.7 L14.3 26.4 L6.0 31.2 L6.0 49.8 Z M22.0 40.5 L22.0 59.0 M22.0 40.5 L30.3 35.7 M22.0 40.5 L6.0 31.2"/>
+    <path d="M35.5 51.2 L40.9 48.1 L40.9 29.6 L24.9 20.3 L19.4 23.5 L19.4 42.0 Z M35.5 32.7 L35.5 51.2 M35.5 32.7 L40.9 29.6 M35.5 32.7 L19.4 23.5"/>
+    <!-- The slab's cut face: the section the slice shows. -->
+    <path d="M35.5 51.2 L35.5 32.7 L19.4 23.5 L19.4 42.0 Z" fill="#000"/>
+  </g>
+  <path d="M27.4 19.4 Q20.5 29.3 24.9 42.6 L34.1 21.4 Z" fill="#000"/>
+  <path d="M31.8 19.1 L34.2 11.0" stroke="#000" stroke-width="7.5" stroke-linecap="round"/>
+  <path d="M31.4 20.6 L31.8 19.1" stroke="#000" stroke-width="3.5" stroke-linecap="round"/>
+  </g>
+</svg>
+