@aics/vole-app 2.11.0

package/type-declarations/aics-image-viewer/components/ViewerStateProvider/types.d.ts

@@ -0,0 +1,105 @@
+import { CameraState, ControlPoint } from "@aics/vole-core";
+import type { ImageType, RenderMode, ViewMode } from "../../shared/enums";
+import type { PerAxis } from "../../shared/types";
+import type { ColorArray } from "../../shared/utils/colorRepresentations";
+import { ViewerChannelSettings } from "../../shared/utils/viewerChannelSettings";
+/** Global (not per-channel) viewer state which may be changed in the UI */
+export interface ViewerState {
+    viewMode: ViewMode;
+    renderMode: RenderMode;
+    imageType: ImageType;
+    showAxes: boolean;
+    showBoundingBox: boolean;
+    boundingBoxColor: ColorArray;
+    backgroundColor: ColorArray;
+    autorotate: boolean;
+    maskAlpha: number;
+    brightness: number;
+    density: number;
+    levels: [number, number, number];
+    interpolationEnabled: boolean;
+    region: PerAxis<[number, number]>;
+    slice: PerAxis<number>;
+    time: number;
+    scene: number;
+    cameraState: Partial<CameraState> | undefined;
+}
+export type ViewerStateKey = keyof ViewerState;
+/**
+ * If a value in `ViewerState` is an object, we want to allow updates with a partial object. Otherwise, components that
+ * update some but not all of the object's properties have to know the object's current value in order to clone it with
+ * only the key they care about updated, which exposes us to stale closure issues.
+ */
+export type PartialIfObject<T> = T extends Record<string, unknown> ? Partial<T> : T;
+/**
+ * A type which lets us provide a map of optional check functions for certain settings updates, to avoid entering
+ * illegal states. E.g., whenever `renderMode` is changed to pathtrace, make sure `autorotate` is set to false.
+ */
+export type ViewerSettingChangeHandlers = {
+    [K in ViewerStateKey]?: (settings: ViewerState, value: PartialIfObject<ViewerState[K]>) => ViewerState;
+};
+/**
+ * The type of the global settings updater provided by `ViewerStateProvider` and passed down to most UI components.
+ * Looks kind of like redux's `dispatch` if you squint. `key` names the setting to update; `value` is the new
+ * (potentially partial) value.
+ */
+export type ViewerSettingUpdater = <K extends ViewerStateKey>(key: K, value: PartialIfObject<ViewerState[K]>) => void;
+/** Settings for a single channel, as stored internally by the app */
+export interface ChannelState {
+    name: string;
+    displayName: string;
+    volumeEnabled: boolean;
+    isosurfaceEnabled: boolean;
+    isovalue: number;
+    colorizeEnabled: boolean;
+    colorizeAlpha: number;
+    opacity: number;
+    color: ColorArray;
+    ramp: [number, number];
+    useControlPoints: boolean;
+    controlPoints: ControlPoint[];
+}
+export type ChannelStateKey = keyof ChannelState;
+export type ChannelSettingUpdater = <K extends ChannelStateKey>(index: number | number[], value: Partial<Record<K, ChannelState[K]>>) => void;
+export type SingleChannelSettingUpdater = <K extends ChannelStateKey>(value: Partial<Record<K, ChannelState[K]>>) => void;
+export type ResetState = {
+    /**
+     * Sets the initial viewer channel settings that will be applied when calling
+     * `resetToSavedViewerState()`. Initial settings should be set from the viewer props (when embedded)
+     * or the URL parameters.
+     */
+    setSavedViewerChannelSettings: (settings: ViewerChannelSettings | undefined) => void;
+    /**
+     * Returns the current viewer channel settings that should be used when resetting
+     * the channel transfer functions (control points and ramp).
+     */
+    getCurrentViewerChannelSettings: () => ViewerChannelSettings | undefined;
+    /** Channels that should be immediately reset on next render. */
+    getChannelsAwaitingReset: () => Set<number>;
+    /** Channels that should be reset once new data is loaded. */
+    getChannelsAwaitingResetOnLoad: () => Set<number>;
+    /**
+     * Removes the channel from the list of channels to be reset (as given by
+     * `getChannelsAwaitingReset()` or `getChannelsAwaitingResetOnLoad()`).
+     */
+    onResetChannel: (channelIndex: number) => void;
+    /**
+     * Resets the viewer and all channels to a saved initial state, determined
+     * by viewer props.
+     * The initial settings for channels can be set with `setSavedViewerChannelSettings()`.
+     */
+    resetToSavedViewerState: () => void;
+    /**
+     * Resets the viewer and all channels to the default state, as though
+     * loaded from scratch with no initial parameters set.
+     * Uses the default channel settings as given by `getDefaultViewerChannelSettings()`.
+     */
+    resetToDefaultViewerState: () => void;
+};
+export type ViewerStateContextType = ViewerState & ResetState & {
+    channelSettings: ChannelState[];
+    changeViewerSetting: ViewerSettingUpdater;
+    changeChannelSetting: ChannelSettingUpdater;
+    setChannelSettings: (settings: ChannelState[]) => void;
+    applyColorPresets: (presets: ColorArray[]) => void;
+};

package/type-declarations/aics-image-viewer/components/shared/NumericInput/index.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import "./styles.css";
+interface NumericInputProps {
+    value: number;
+    step?: number;
+    precision?: number;
+    min?: number;
+    max?: number;
+    disabled?: boolean;
+    className?: string;
+    onChange: (value: number) => void;
+}
+/**
+ * Fully-controlled numeric input (value must be supplied from state in parent).
+ * Changeable with arrow keys, typing values, or clickable arrows. Inspired by
+ * ant's `InputNumber`, but conforms to our style and behavior expectations.
+ */
+declare const NumericInput: React.FC<NumericInputProps>;
+export default NumericInput;

package/type-declarations/aics-image-viewer/components/shared/SharedCheckBox.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+type SharedCheckboxProps<T> = React.PropsWithChildren<{
+    allOptions: T[];
+    checkedList: T[];
+    onChange: (checked: boolean, checkedList: T[]) => void;
+    style?: React.CSSProperties;
+}>;
+declare const SharedCheckbox: <T>(props: SharedCheckboxProps<T>) => React.ReactElement;
+export default SharedCheckbox;

package/type-declarations/aics-image-viewer/components/shared/SliderRow/index.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { NouisliderProps } from "nouislider-react";
+import "./styles.css";
+type SliderRowProps = {
+    label: React.ReactNode;
+    start?: number | number[];
+    step?: number;
+    formatInteger?: boolean;
+    max?: number;
+    onUpdate?: NouisliderProps["onUpdate"];
+    onChange?: NouisliderProps["onChange"];
+    hideSlider?: boolean;
+    children?: React.ReactNode;
+};
+/** A component to ensure a single unified style across the many labeled slider rows in the control panel */
+declare const SliderRow: React.FC<SliderRowProps>;
+export default SliderRow;

package/type-declarations/aics-image-viewer/components/shared/SmarterSlider.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { NouisliderProps } from "nouislider-react";
+/** A wrapper around `Nouislider` that prevents updates while the slider is being dragged. */
+declare const SmarterSlider: React.FC<NouisliderProps>;
+export default SmarterSlider;

package/type-declarations/aics-image-viewer/components/shared/ViewerIcon.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { IconComponentProps } from "@ant-design/icons/lib/components/Icon";
+import ICONS from "../../assets/icons";
+type ViewerIconProps = {
+    type: keyof typeof ICONS;
+} & Omit<IconComponentProps, "type" | "component" | "ref">;
+/** Wrapper component for easy inclusion of our own custom icons. */
+declare const ViewerIcon: React.FC<ViewerIconProps>;
+export default ViewerIcon;

package/type-declarations/aics-image-viewer/shared/constants.d.ts

@@ -0,0 +1,40 @@
+import { CameraState } from "@aics/vole-core";
+import { ChannelState, ViewerState } from "../components/ViewerStateProvider/types";
+import { ViewMode } from "./enums";
+import { ColorArray } from "./utils/colorRepresentations";
+import { ViewerChannelSettings } from "./utils/viewerChannelSettings";
+export declare const // Control panel will automatically close if viewport is less than this width
+CONTROL_PANEL_CLOSE_WIDTH = 970, CLIPPING_PANEL_HEIGHT_DEFAULT = 200, CLIPPING_PANEL_HEIGHT_TALL = 235, BACKGROUND_COLOR_DEFAULT: ColorArray, BOUNDING_BOX_COLOR_DEFAULT: ColorArray, AXIS_MARGIN_DEFAULT: [number, number], SCALE_BAR_MARGIN_DEFAULT: [number, number], LUT_MIN_PERCENTILE = 0.5, LUT_MAX_PERCENTILE = 0.983, ISOSURFACE_OPACITY_SLIDER_MAX = 255, ALPHA_MASK_SLIDER_DEFAULT = 0, BRIGHTNESS_SLIDER_LEVEL_DEFAULT = 70, DENSITY_SLIDER_LEVEL_DEFAULT = 50, LEVELS_SLIDER_DEFAULT: ColorArray, INTERPOLATION_ENABLED_DEFAULT = true, OTHER_CHANNEL_KEY = "Other", SINGLE_GROUP_CHANNEL_KEY = "Channels";
+export declare const TFEDITOR_DEFAULT_COLOR: ColorArray;
+export declare const TFEDITOR_MAX_BIN = 255;
+export declare const CACHE_MAX_SIZE = 1000000000;
+export declare const QUEUE_MAX_SIZE = 10;
+export declare const QUEUE_MAX_LOW_PRIORITY_SIZE = 4;
+export declare const PRESET_COLORS_1: ColorArray[];
+export declare const PRESET_COLORS_2: ColorArray[];
+export declare const PRESET_COLORS_3: ColorArray[];
+export declare const PRESET_COLORS_0: ColorArray[];
+export declare const PRESET_COLOR_MAP: readonly {
+    colors: ColorArray[];
+    name: string;
+}[];
+/**
+ * Reflects the default camera settings the 3D viewer uses on volume load.
+ * These SHOULD NOT be changed; otherwise, existing shared links that don't specify the
+ * camera settings will use the new defaults and may be in unexpected orientations or positions.
+ */
+export declare const getDefaultCameraState: (viewMode?: ViewMode) => CameraState;
+export declare const getDefaultViewerChannelSettings: () => ViewerChannelSettings;
+/**
+ * Returns the default viewer state as a new object.
+ */
+export declare const getDefaultViewerState: () => ViewerState;
+/** Returns the default color for a channel, by its index. */
+export declare function getDefaultChannelColor(channelIndex: number): ColorArray;
+/**
+ * Returns the default channel state as a new object. If an index is provided, uses the default
+ * color preset for that index.
+ * @param index Optional channel index to use for the color preset.
+ * @returns a default ChannelState object.
+ */
+export declare const getDefaultChannelState: (index?: number) => ChannelState;

package/type-declarations/aics-image-viewer/shared/enums.d.ts

@@ -0,0 +1,15 @@
+export declare enum ViewMode {
+    threeD = "3D",
+    xy = "XY",
+    xz = "XZ",
+    yz = "YZ"
+}
+export declare enum RenderMode {
+    volumetric = "volumetric",
+    maxProject = "maxproject",
+    pathTrace = "pathtrace"
+}
+export declare enum ImageType {
+    segmentedCell = "cell",
+    fullField = "fov"
+}

package/type-declarations/aics-image-viewer/shared/types.d.ts

@@ -0,0 +1,15 @@
+import { CSSProperties } from "react";
+import { ViewMode } from "./enums";
+export type AxisName = "x" | "y" | "z";
+export type PerAxis<T> = Record<AxisName, T>;
+export declare const activeAxisMap: {
+    [A in ViewMode]: AxisName | null;
+};
+export type IsosurfaceFormat = "GLTF" | "STL";
+export type Styles = {
+    [key: string]: CSSProperties;
+};
+export type MetadataEntry = string | number | boolean | MetadataRecord | null | undefined;
+export type MetadataRecord = {
+    [key: string]: MetadataEntry;
+} | MetadataEntry[];

package/type-declarations/aics-image-viewer/shared/utils/colorRepresentations.d.ts

@@ -0,0 +1,10 @@
+export type ColorObject = {
+    r: number;
+    g: number;
+    b: number;
+};
+export type ColorArray = [number, number, number];
+export declare const colorObjectToArray: (obj: ColorObject) => ColorArray;
+export declare const colorArrayToObject: (arr: ColorArray) => ColorObject;
+export declare const colorArrayToFloats: (arr: ColorArray) => ColorArray;
+export declare const colorArrayToString: (arr: ColorArray) => string;

package/type-declarations/aics-image-viewer/shared/utils/controlPointsToLut.d.ts

@@ -0,0 +1,53 @@
+import { Channel, ControlPoint, Histogram, Lut, Volume } from "@aics/vole-core";
+import { ViewerChannelSetting, ViewerChannelSettings } from "./viewerChannelSettings";
+export declare function controlPointsToLut(controlPoints: ControlPoint[]): Lut;
+/** Returns a default lookup table based on a min/max percentile of the current volume's data. */
+export declare function getDefaultLut(histogram: Histogram): Lut;
+/**
+ * Parses a lookup table (LUT) from a `ViewerChannelSetting` object, where the `lut` field is an
+ * array of two alphanumeric strings.
+ *
+ * @returns a Lut object if the `lut` field is valid; otherwise, returns undefined.
+ *
+ * Min and max values are determined as following:
+ * - Plain numbers are direct intensity values.
+ * - `p{n}` represents a percentile, where `n` is a percentile in the [0, 100] range.
+ * - `m{n}` represents the median multiplied by `n / 100`.
+ * - `autoij` in either the min or max fields will use the "auto" algorithm
+ * from ImageJ to select the min AND max.
+ *
+ * @example
+ * ```
+ * "0:255"    // min: intensity 0, max: intensity 255.
+ * "p50:p90"  // min: 50th percentile, max: 90th percentile.
+ * "m1:p75"   // min: median, max: 75th percentile.
+ * "autoij:0" // use Auto-IJ to calculate min and max.
+ * ```
+ */
+export declare function parseLutFromSettings(histogram: Histogram, initSettings: ViewerChannelSetting): Lut | undefined;
+/**
+ * Initializes the lookup table (LUT) that maps from volume intensity values to color + opacity and applies the LUT to the volume.
+ *
+ * @param aimg The loaded volume data.
+ * @param channelIndex The index of the channel to initialize the LUT for.
+ * @param channelSettings The ViewerChannelSettings object that may contain settings for this channel. If relevant
+ * settings are not found, a default LUT will be used.
+ * @returns an object containing the retrieved ramp control points and "advanced mode" control points.
+ *
+ * LUT values will be determined using the following rules:
+ * - If no `lut` is provided in the `channelSettings`, a default LUT is calculated using min/max percentiles of the data.
+ * - Otherwise, `lut` will be parsed as described in `ViewerChannelSettingParams.lut`.
+ * - The `controlPoints` and `ramp` fields in the `channelSettings` will be used to override the returned "advanced mode"
+ * control points and ramp, respectively.
+ *
+ * If `controlPointsEnabled` is set to true in the `channelSettings`, the "advanced mode" control points will be applied
+ * to the volume; otherwise, the ramp will be applied.
+ */
+export declare function initializeLut(aimg: Volume, channelIndex: number, channelSettings?: ViewerChannelSettings): {
+    ramp: ControlPoint[];
+    controlPoints: ControlPoint[];
+};
+export declare function controlPointsToRamp(controlPoints: ControlPoint[]): [number, number];
+export declare function rampToControlPoints([min, max]: [number, number]): ControlPoint[];
+/** Remaps an array of control points from an old range (as a 2-tuple) to a new one (extracted from a `Channel`) */
+export declare function remapControlPointsForChannel(controlPoints: ControlPoint[], oldRange: [number, number] | undefined, { rawMin, rawMax }: Channel): ControlPoint[];

package/type-declarations/aics-image-viewer/shared/utils/hooks.d.ts

@@ -0,0 +1,14 @@
+import { MutableRefObject } from "react";
+/** A `useState` that also creates a getter function for breaking through closures. */
+export declare function useStateWithGetter<T>(initialState: T | (() => T)): [T, (value: T) => void, () => T];
+/**
+ * Wraps a setter function and keeps a ref updated to follow the set value. Useful for making the most up-to-date value
+ * of some state accessible to a closure that might be called after the value is updated.
+ */
+export declare function useRefWithSetter<T>(setter: (value: T) => void): [MutableRefObject<T | undefined>, (value: T) => void];
+export declare function useRefWithSetter<T>(setter: (value: T) => void, init: T): [MutableRefObject<T>, (value: T) => void];
+/**
+ * For objects which are persistent for the lifetime of the component, not
+ * a member of state, and require a constructor to create. Wraps `useRef`.
+ */
+export declare function useConstructor<T>(constructor: () => T): T;

package/type-declarations/aics-image-viewer/shared/utils/playControls.d.ts

@@ -0,0 +1,27 @@
+import { AxisName } from "../types";
+type PlayAxisName = AxisName | "t";
+export default class PlayControls {
+    playingAxis: PlayAxisName | null;
+    playWaitingForLoad: boolean;
+    playHolding: boolean;
+    playTimeoutId: number;
+    getVolumeIsLoaded?: () => boolean;
+    stepAxis?: (axis: PlayAxisName) => void;
+    onPlayingAxisChanged?: (axis: PlayAxisName | null) => void;
+    private setPlayingAxis;
+    private playStep;
+    /** Call whenever new data is loaded to resume playback if it was paused for data loading. */
+    onImageLoaded(): void;
+    /**
+     * Pause playback on the currently playing axis.
+     * `willResume` marks this as a temporary suspension, e.g. while the user is scrubbing along the playing axis.
+     */
+    pause(willResume?: boolean): void;
+    /** Begin playback on `axis`. */
+    play(axis: PlayAxisName): void;
+    /** If `axis` is currently playing, begin a temporary hold on playback while other input is pending. */
+    startHold(axis: PlayAxisName): void;
+    /** If a playback hold is active, end it. */
+    endHold(): void;
+}
+export {};

package/type-declarations/aics-image-viewer/shared/utils/sceneStore.d.ts

@@ -0,0 +1,17 @@
+import { LoadSpec, PerChannelCallback, PrefetchDirection, RawArrayLoaderOptions, Volume, VolumeLoaderContext } from "@aics/vole-core";
+import { ThreadableVolumeLoader } from "@aics/vole-core/es/types/loaders/IVolumeLoader";
+export default class SceneStore {
+    context: VolumeLoaderContext;
+    loaders: (ThreadableVolumeLoader | undefined)[];
+    paths: (string | string[] | RawArrayLoaderOptions)[];
+    currentScene: number;
+    syncChannels: boolean;
+    prefetchPriority: PrefetchDirection[];
+    constructor(context: VolumeLoaderContext, paths: (string | string[] | RawArrayLoaderOptions)[]);
+    /** Get the loader associated with the given scene index, or create it if it doesn't exist */
+    private getLoader;
+    loadScene(scene: number, image: Volume, loadSpec?: LoadSpec, onChannelLoaded?: PerChannelCallback): Promise<void>;
+    createVolume(scene: number, loadSpec: LoadSpec, onChannelLoaded?: PerChannelCallback): Promise<Volume>;
+    syncMultichannelLoading(sync: boolean): void;
+    setPrefetchPriority(priority: PrefetchDirection[]): void;
+}

package/type-declarations/aics-image-viewer/shared/utils/sliderValuesToImageValues.d.ts

@@ -0,0 +1,10 @@
+type ImageValues = {
+    min: number;
+    max: number;
+    scale: number;
+};
+export declare const gammaSliderToImageValues: (sliderValues: [number, number, number]) => ImageValues;
+export declare const densitySliderToImageValue: (sliderValues: number, _isPT: boolean) => number;
+export declare const brightnessSliderToImageValue: (sliderValues: number, _isPT: boolean) => number;
+export declare const alphaSliderToImageValue: (sliderValues: number) => number;
+export {};

package/type-declarations/aics-image-viewer/shared/utils/viewerChannelSettings.d.ts

@@ -0,0 +1,46 @@
+import { ControlPoint } from "@aics/vole-core";
+/** Settings for a single channel, as passed in via props by App users */
+export interface ViewerChannelSetting {
+    match: (string | number)[] | string | number;
+    name?: string;
+    color?: string;
+    enabled?: boolean;
+    surfaceEnabled?: boolean;
+    /**
+     * Min and max values for the intensity lookup table, which maps from raw intensity values
+     * in the volume to opacity and color. Defaults to [0, 255].
+     *
+     * - Plain numbers are treated as direct intensity values.
+     * - `p{n}` represents a percentile, where `n` is a percentile in the [0, 100] range.
+     * - `m{n}` represents the median multiplied by `n / 100`.
+     * - `autoij` in either the min or max fields will use the "auto" algorithm
+     * from ImageJ to select the min and max.
+     */
+    lut?: [string, string];
+    /**
+     * Whether to show control point controls instead of a simpler ramp control.
+     * Defaults to false.
+     */
+    controlPointsEnabled?: boolean;
+    controlPoints?: ControlPoint[];
+    ramp?: [number, number];
+    isovalue?: number;
+    surfaceOpacity?: number;
+    colorizeEnabled?: boolean;
+    colorizeAlpha?: number;
+}
+export interface ViewerChannelGroup {
+    name: string;
+    channels: ViewerChannelSetting[];
+}
+export interface ViewerChannelSettings {
+    maskChannelName?: string;
+    groups: ViewerChannelGroup[];
+}
+export type ChannelGrouping = {
+    [key: string]: number[];
+};
+export declare function matchChannel(channelName: string, channelIndex: number, c: ViewerChannelSetting): boolean;
+export declare function findFirstChannelMatch(channel: string, channelIndex: number, settings: ViewerChannelSettings): ViewerChannelSetting | undefined;
+export declare function getDisplayName(name: string, index: number, settings?: ViewerChannelSettings): string;
+export declare function makeChannelIndexGrouping(channels: string[], settings?: ViewerChannelSettings): ChannelGrouping;

package/type-declarations/aics-image-viewer/shared/utils/viewerState.d.ts

@@ -0,0 +1,10 @@
+import { ChannelState, ViewerSettingUpdater, ViewerState } from "../../components/ViewerStateProvider/types";
+import { ColorArray } from "./colorRepresentations";
+import { ViewerChannelSettings } from "./viewerChannelSettings";
+/** Sets all fields of the viewer state to the values of the `newState`. */
+export declare function overrideViewerState(changeViewerSetting: ViewerSettingUpdater, newState: ViewerState): void;
+export declare function overrideChannelStates(setChannelSettings: (settings: ChannelState[]) => void, currentStates: ChannelState[], newStates: ChannelState[]): void;
+/** Returns the indices of channels that have either the volume or isosurface enabled. */
+export declare function getEnabledChannelIndices(channelSettings: ChannelState[]): number[];
+export declare function colorHexToArray(hex: string): ColorArray | null;
+export declare function initializeOneChannelSetting(channelName: string, index: number, defaultColor: ColorArray, viewerChannelSettings?: ViewerChannelSettings, defaultChannelState?: ChannelState): ChannelState;

package/type-declarations/index.d.ts

@@ -0,0 +1,7 @@
+import ImageViewerApp from "./aics-image-viewer/components/App";
+import ViewerStateProvider from "./aics-image-viewer/components/ViewerStateProvider";
+export type { ViewerChannelSettings, ViewerChannelGroup, ViewerChannelSetting, } from "./aics-image-viewer/shared/utils/viewerChannelSettings";
+export { ViewMode, RenderMode, ImageType } from "./aics-image-viewer/shared/enums";
+export type { AppProps } from "./aics-image-viewer/components/App/types";
+export type { RawArrayData, RawArrayInfo } from "@aics/vole-core";
+export { ImageViewerApp, ViewerStateProvider };