@aics/vole-app 2.11.0

package/es/index.js

@@ -0,0 +1,4 @@
+import ImageViewerApp from "./aics-image-viewer/components/App";
+import ViewerStateProvider from "./aics-image-viewer/components/ViewerStateProvider";
+export { ViewMode, RenderMode, ImageType } from "./aics-image-viewer/shared/enums";
+export { ImageViewerApp, ViewerStateProvider };

package/package.json

@@ -0,0 +1,130 @@
+{
+  "name": "@aics/vole-app",
+  "version": "2.11.0",
+  "description": "web view of cell volume images",
+  "repository": "github:allen-cell-animated/vole-app",
+  "main": "es/index.js",
+  "module": "es/index.js",
+  "browser": "es/index.js",
+  "types": "type-declarations",
+  "files": [
+    "es",
+    "type-declarations",
+    "README.md",
+    "package.json"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "scripts": {
+    "start": "webpack serve --config webpack.dev.js  --env env=dev",
+    "gh-build-nightly": "webpack --config webpack.dev.js --env env=production basename=/vole-app/",
+    "gh-build-release": "webpack --config webpack.dev.js --env env=production basename=/website-3d-cell-viewer-release/",
+    "s3-build": "webpack --config webpack.dev.js --env env=production",
+    "docker-build": "webpack --config webpack.common.js --env env=production",
+    "dev": "webpack --config webpack.dev.js --env env=dev",
+    "lint": "eslint --config ./.eslintrc --ignore-path ./.eslintignore --ext .jsx --ext .js --ext .ts --ext .tsx ./",
+    "test": "jest --coverage --passWithNoTests",
+    "test:github-action": "jest --silent --passWithNoTests --ci --coverage --coverageReporters=\"text\" --coverageReporters=\"text-summary\" --outputFile=\"report.json\"",
+    "typeCheck": "tsc -p tsconfig.json --noEmit",
+    "generateTypes": "tsc -p tsconfig.base.json --emitDeclarationOnly",
+    "transpileES": "cross-env TS_NODE_PROJECT=tsconfig.es.json BABEL_ENV=es babel src --out-dir es --extensions \".js,.jsx,.ts,.tsx,.svg\" --ignore src/**/*.test.*",
+    "build": "npm-run-all generateTypes postcss transpileES",
+    "postcss": "postcss src/**/*.css --base src --dir es",
+    "publish-patch": "npm version patch | xargs -I {} sh -c 'git push origin {}'",
+    "postpublish-patch": "git push origin main",
+    "prepare": "cross-env DEPLOYMENT_ENV=production npm run build",
+    "predeploy": "cross-env DEPLOYMENT_ENV=production npm run dev",
+    "deploy": "gh-pages -d imageviewer -t true"
+  },
+  "author": "Megan Riel-Mehan",
+  "license": "ISC",
+  "dependencies": {
+    "@aics/vole-core": "^3.12.4",
+    "@ant-design/icons": "^5.2.5",
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "color-string": "^1.5.3",
+    "d3": "^7.9.0",
+    "fuse.js": "^7.0.0",
+    "lodash": "^4.17.20",
+    "nouislider-react": "^3.4.2",
+    "react-color": "^2.19.3",
+    "react-router-dom": "^6.26.2",
+    "styled-components": "^6.1.13",
+    "usehooks-ts": "^3.1.0"
+  },
+  "peerDependencies": {
+    "antd": "^5.16.2",
+    "react": "18.x",
+    "react-dom": "18.x",
+    "three": "^0.171.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.14.5",
+    "@babel/core": "^7.14.6",
+    "@babel/preset-env": "^7.23.3",
+    "@babel/preset-react": "^7.14.5",
+    "@babel/preset-typescript": "^7.14.5",
+    "@babel/runtime": "^7.14.6",
+    "@dr.pogodin/babel-preset-svgr": "^1.8.0",
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "@types/color-string": "^1.5.2",
+    "@types/d3": "^7.4.3",
+    "@types/jest": "^27.4.0",
+    "@types/lodash": "^4.14.185",
+    "@types/react": "^18.x",
+    "@types/react-color": "^3.0.12",
+    "@types/react-dom": "^18.x",
+    "@types/three": "^0.171.0",
+    "@typescript-eslint/eslint-plugin": "^5.31.0",
+    "@typescript-eslint/parser": "^5.31.0",
+    "antd": "^5.16.2",
+    "axios": "^0.21.1",
+    "babel-loader": "^8.2.2",
+    "babel-plugin-replace-import-extension": "^1.1.3",
+    "clean-webpack-plugin": "^4.0.0-alpha.0",
+    "command-line-args": "^5.1.1",
+    "copy-webpack-plugin": "^11.0.0",
+    "cross-env": "^7.0.3",
+    "css-loader": "^6.2.0",
+    "esbuild": "^0.14.50",
+    "esbuild-jest": "^0.5.0",
+    "eslint": "^8.20.0",
+    "eslint-plugin-react": "^7.30.1",
+    "file-loader": "^6.2.0",
+    "firebase": "^7.x",
+    "gh-pages": "^4.0.0",
+    "html-webpack-plugin": "^5.3.2",
+    "jest": "^27.0.6",
+    "mini-css-extract-plugin": "^2.9.1",
+    "morgan": "^1.9.1",
+    "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.47",
+    "postcss-cli": "^11.0.0",
+    "postcss-discard-comments": "^7.0.3",
+    "postcss-extend-rule": "^4.0.0",
+    "postcss-import": "^16.1.0",
+    "postcss-loader": "^8.1.1",
+    "postcss-mixins": "^11.0.3",
+    "postcss-nested": "^6.2.0",
+    "postcss-simple-vars": "^7.0.1",
+    "postcss-url": "^10.1.3",
+    "prettier": "^3.3.3",
+    "prop-types": "^15.5.10",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "resolve-url-loader": "^5.0.0",
+    "style-loader": "^4.0.0",
+    "ts-jest": "^27.1.2",
+    "typescript": "^4.3.5",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^4.7.2",
+    "webpack-dev-server": "^4.9.3",
+    "webpack-merge": "^5.8.0",
+    "webpack-shell-plugin": "^0.5.0"
+  }
+}

package/type-declarations/aics-image-viewer/assets/icons/index.d.ts

@@ -0,0 +1,14 @@
+declare const _default: {
+    axes: any;
+    boundingBox: any;
+    camera: any;
+    channels: any;
+    closePanel: any;
+    download: any;
+    dropdownArrow: any;
+    metadata: any;
+    preferences: any;
+    resetView: any;
+    turnTable: any;
+};
+export default _default;

package/type-declarations/aics-image-viewer/components/App/ChannelUpdater.d.ts

@@ -0,0 +1,16 @@
+import { View3d, Volume } from "@aics/vole-core";
+import React from "react";
+import { ChannelState } from "../ViewerStateProvider/types";
+interface ChannelUpdaterProps {
+    index: number;
+    channelState: ChannelState;
+    view3d: View3d;
+    image: Volume | null;
+    version: number;
+}
+/**
+ * A component that doesn't render anything, but reacts to the provided `ChannelState`
+ * and keeps it in sync with the viewer.
+ */
+declare const ChannelUpdater: React.FC<ChannelUpdaterProps>;
+export default ChannelUpdater;

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

@@ -0,0 +1,6 @@
+import React from "react";
+import type { AppProps } from "./types";
+import "../../assets/styles/globals.css";
+import "./styles.css";
+declare const App: React.FC<AppProps>;
+export default App;

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

@@ -0,0 +1,45 @@
+import type { RawArrayData, RawArrayInfo, View3d, Volume } from "@aics/vole-core";
+import { MutableRefObject } from "react";
+import type { MetadataRecord } from "../../shared/types";
+import type { ViewerChannelSettings } from "../../shared/utils/viewerChannelSettings";
+import type { ViewerState } from "../ViewerStateProvider/types";
+/** `typeof useEffect`, but the effect handler takes a `Volume` as an argument */
+export type UseImageEffectType = (effect: (image: Volume) => void | (() => void), deps: React.DependencyList) => void;
+type ControlNames = "alphaMaskSlider" | "autoRotateButton" | "axisClipSliders" | "brightnessSlider" | "backgroundColorPicker" | "boundingBoxColorPicker" | "colorPresetsDropdown" | "densitySlider" | "levelsSliders" | "interpolationControl" | "saveSurfaceButtons" | "fovCellSwitchControls" | "viewModeRadioButtons" | "resetCameraButton" | "showAxesButton" | "showBoundingBoxButton" | "metadataViewer";
+/** Show/hide different elements of the UI */
+export type ControlVisibilityFlags = {
+    [K in ControlNames]: boolean;
+};
+export type MultisceneUrls = {
+    scenes: (string | string[])[];
+};
+export interface AppProps {
+    rawData?: RawArrayData;
+    rawDims?: RawArrayInfo;
+    /**
+     * URL(s) from which to fetch the image. You can pass a `string` to load from a single data source, or get fancier:
+     * - Pass an array of strings to assemble a single volume with all sources' channels, in order.
+     * - Pass an object with a key `scenes: (string | string[])[]` to load multiple volumes as a *multi-scene collection*.
+     *   Each string or string array within the `scenes` array is treated as a single volume with one or more sources.
+     */
+    imageUrl: string | MultisceneUrls;
+    parentImageUrl?: string | MultisceneUrls;
+    viewerChannelSettings?: ViewerChannelSettings;
+    appHeight: string;
+    cellId: string;
+    visibleControls?: Partial<ControlVisibilityFlags>;
+    viewerSettings?: Partial<ViewerState>;
+    imageDownloadHref: string;
+    parentImageDownloadHref: string;
+    pixelSize?: [number, number, number];
+    canvasMargin: string;
+    transform?: {
+        translation: [number, number, number];
+        rotation: [number, number, number];
+    };
+    metadata?: MetadataRecord;
+    view3dRef?: MutableRefObject<View3d | null>;
+    metadataFormatter?: (metadata: MetadataRecord) => MetadataRecord;
+    onControlPanelToggle?: (collapsed: boolean) => void;
+}
+export {};

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

@@ -0,0 +1,24 @@
+import { Volume } from "@aics/vole-core";
+import React from "react";
+import { ViewMode } from "../../shared/enums";
+import { AxisName, PerAxis } from "../../shared/types";
+import PlayControls from "../../shared/utils/playControls";
+import { ViewerSettingUpdater } from "../ViewerStateProvider/types";
+import "./styles.css";
+type AxisClipSlidersProps = {
+    mode: ViewMode;
+    image: Volume | null;
+    changeViewerSetting: ViewerSettingUpdater;
+    numSlices: PerAxis<number>;
+    numSlicesLoaded: PerAxis<number>;
+    numScenes: number;
+    region: PerAxis<[number, number]>;
+    slices: PerAxis<number>;
+    numTimesteps: number;
+    time: number;
+    scene: number;
+    playingAxis: AxisName | "t" | null;
+    playControls: PlayControls;
+};
+declare const AxisClipSliders: React.FC<AxisClipSlidersProps>;
+export default AxisClipSliders;

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

@@ -0,0 +1,11 @@
+import React from "react";
+import "./styles.css";
+type BottomPanelProps = {
+    title?: string;
+    onVisibleChange?: (visible: boolean) => void;
+    onVisibleChangeEnd?: (visible: boolean) => void;
+    children?: React.ReactNode;
+    height?: number;
+};
+declare const BottomPanel: React.FC<BottomPanelProps>;
+export default BottomPanel;

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

@@ -0,0 +1,33 @@
+import { View3d, Volume } from "@aics/vole-core";
+import React from "react";
+import { ViewMode } from "../../shared/enums";
+import { AxisName, PerAxis } from "../../shared/types";
+import PlayControls from "../../shared/utils/playControls";
+import { ViewerSettingUpdater } from "../ViewerStateProvider/types";
+import "./styles.css";
+type ViewerWrapperProps = {
+    view3d: View3d;
+    loadingImage: boolean;
+    appHeight: string;
+    image: Volume | null;
+    numSlices: PerAxis<number>;
+    numSlicesLoaded: PerAxis<number>;
+    playControls: PlayControls;
+    playingAxis: AxisName | "t" | null;
+    numTimesteps: number;
+    numScenes: number;
+    visibleControls: {
+        axisClipSliders: boolean;
+    };
+    onClippingPanelVisibleChange?: (panelOpen: boolean, hasTime: boolean, hasScenes: boolean, mode3d: boolean) => void;
+    onClippingPanelVisibleChangeEnd?: (panelOpen: boolean) => void;
+    autorotate: boolean;
+    viewMode: ViewMode;
+    region: PerAxis<[number, number]>;
+    slice: PerAxis<number>;
+    time: number;
+    scene: number;
+    changeViewerSetting: ViewerSettingUpdater;
+};
+declare const _default: React.FC<Omit<ViewerWrapperProps, "viewMode" | "autorotate" | "region" | "slice" | "time" | "scene" | "changeViewerSetting">>;
+export default _default;

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

@@ -0,0 +1,19 @@
+import { Channel } from "@aics/vole-core";
+import React from "react";
+import type { IsosurfaceFormat } from "../shared/types";
+import type { ColorArray, ColorObject } from "../shared/utils/colorRepresentations";
+import type { ChannelGrouping, ViewerChannelSettings } from "../shared/utils/viewerChannelSettings";
+import type { ChannelSettingUpdater, ChannelState } from "./ViewerStateProvider/types";
+export type ChannelsWidgetProps = {
+    channelDataChannels: Channel[] | undefined;
+    channelGroupedByType: ChannelGrouping;
+    viewerChannelSettings?: ViewerChannelSettings;
+    saveIsosurface: (channelIndex: number, type: IsosurfaceFormat) => void;
+    onApplyColorPresets: (presets: ColorArray[]) => void;
+    filterFunc?: (key: string) => boolean;
+    onColorChangeComplete?: (newRGB: ColorObject, oldRGB?: ColorObject, index?: number) => void;
+    channelSettings: ChannelState[];
+    changeChannelSetting: ChannelSettingUpdater;
+};
+declare const _default: React.FC<Omit<ChannelsWidgetProps, "channelSettings" | "changeChannelSetting">>;
+export default _default;

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

@@ -0,0 +1,17 @@
+import { Channel } from "@aics/vole-core";
+import React from "react";
+import { IsosurfaceFormat } from "../../shared/types";
+import { ColorObject } from "../../shared/utils/colorRepresentations";
+import { type ChannelSettingUpdater, type ChannelState } from "../ViewerStateProvider/types";
+import "./styles.css";
+interface ChannelsWidgetRowProps {
+    index: number;
+    name: string;
+    channelState: ChannelState;
+    channelDataForChannel: Channel;
+    changeChannelSetting: ChannelSettingUpdater;
+    saveIsosurface: (channelIndex: number, type: IsosurfaceFormat) => void;
+    onColorChangeComplete?: (newRGB: ColorObject, oldRGB?: ColorObject, index?: number) => void;
+}
+declare const ChannelsWidgetRow: React.FC<ChannelsWidgetRowProps>;
+export default ChannelsWidgetRow;

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

@@ -0,0 +1,13 @@
+import React from "react";
+import { ColorObject } from "../shared/utils/colorRepresentations";
+type ColorChangeHandler = (currentColor: ColorObject, prevColor?: ColorObject, idx?: number) => void;
+interface ColorPickerProps {
+    color: ColorObject;
+    width: number;
+    onColorChange?: ColorChangeHandler;
+    onColorChangeComplete?: ColorChangeHandler;
+    idx?: any;
+    disableAlpha?: boolean;
+}
+declare const ColorPicker: React.FC<ColorPickerProps>;
+export default ColorPicker;

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

@@ -0,0 +1,20 @@
+import React from "react";
+import { MetadataRecord } from "../../shared/types";
+import ChannelsWidget from "../ChannelsWidget";
+import CustomizeWidget, { CustomizeWidgetProps } from "../CustomizeWidget";
+import GlobalVolumeControls, { GlobalVolumeControlsProps } from "../GlobalVolumeControls";
+import "./styles.css";
+type PropsOf<T> = T extends React.ComponentType<infer P> ? P : never;
+interface ControlPanelProps extends PropsOf<typeof ChannelsWidget>, PropsOf<typeof GlobalVolumeControls>, PropsOf<typeof CustomizeWidget> {
+    hasImage: boolean;
+    visibleControls: GlobalVolumeControlsProps["visibleControls"] & CustomizeWidgetProps["visibleControls"] & {
+        colorPresetsDropdown: boolean;
+        metadataViewer: boolean;
+    };
+    getMetadata: () => MetadataRecord;
+    collapsed: boolean;
+    setCollapsed: (value: boolean) => void;
+    resetToDefaultViewerState: () => void;
+}
+declare const _default: React.FC<Omit<ControlPanelProps, "resetToDefaultViewerState">>;
+export default _default;

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

@@ -0,0 +1,15 @@
+import React from "react";
+import { ColorArray } from "../shared/utils/colorRepresentations";
+import { ViewerSettingUpdater } from "./ViewerStateProvider/types";
+export interface CustomizeWidgetProps {
+    visibleControls: {
+        backgroundColorPicker: boolean;
+        boundingBoxColorPicker: boolean;
+    };
+    showBoundingBox: boolean;
+    backgroundColor: ColorArray;
+    boundingBoxColor: ColorArray;
+    changeViewerSetting: ViewerSettingUpdater;
+}
+declare const _default: React.FC<Omit<CustomizeWidgetProps, "showBoundingBox" | "boundingBoxColor" | "backgroundColor" | "changeViewerSetting">>;
+export default _default;

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

@@ -0,0 +1,12 @@
+import React from "react";
+import "./styles.css";
+export type ErrorAlertProps = {
+    errors: unknown;
+    /** The number of times we've seen an error of the type that is currently being displayed before */
+    firstErrorCount?: number;
+    afterClose?: () => void;
+    onSkipError?: () => void;
+};
+declare const ErrorAlert: React.FC<ErrorAlertProps>;
+export declare const useErrorAlert: () => [React.ReactNode, (error: unknown) => void];
+export default ErrorAlert;

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

@@ -0,0 +1,21 @@
+import React from "react";
+import { ViewerSettingUpdater } from "./ViewerStateProvider/types";
+export interface GlobalVolumeControlsProps {
+    imageName: string | undefined;
+    pixelSize: [number, number, number];
+    visibleControls: {
+        alphaMaskSlider: boolean;
+        brightnessSlider: boolean;
+        densitySlider: boolean;
+        levelsSliders: boolean;
+        interpolationControl: boolean;
+    };
+    maskAlpha: number;
+    brightness: number;
+    density: number;
+    levels: [number, number, number];
+    interpolationEnabled: boolean;
+    changeViewerSetting: ViewerSettingUpdater;
+}
+declare const _default: React.FC<Omit<GlobalVolumeControlsProps, "maskAlpha" | "brightness" | "density" | "levels" | "interpolationEnabled" | "changeViewerSetting">>;
+export default _default;

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

@@ -0,0 +1,7 @@
+import React from "react";
+import { MetadataRecord } from "../../shared/types";
+import "./styles.css";
+declare const MetadataViewer: React.FC<{
+    metadata: MetadataRecord;
+}>;
+export default MetadataViewer;

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

@@ -0,0 +1,5 @@
+import { PropsWithChildren, ReactElement } from "react";
+/**
+ * Provides CSS variables and global styling for the image viewer.
+ */
+export default function StyleProvider(props: PropsWithChildren<{}>): ReactElement;

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

@@ -0,0 +1,19 @@
+import { Channel, ControlPoint } from "@aics/vole-core";
+import "nouislider/distribute/nouislider.css";
+import React from "react";
+import type { SingleChannelSettingUpdater } from "../ViewerStateProvider/types";
+import "./styles.css";
+type TfEditorProps = {
+    id: string;
+    width: number;
+    height: number;
+    channelData: Channel;
+    changeChannelSetting: SingleChannelSettingUpdater;
+    colorizeEnabled: boolean;
+    colorizeAlpha: number;
+    useControlPoints: boolean;
+    controlPoints: ControlPoint[];
+    ramp: [number, number];
+};
+declare const TfEditor: React.FC<TfEditorProps>;
+export default TfEditor;

package/type-declarations/aics-image-viewer/components/Toolbar/DownloadButton.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface DownloadButtonProps {
+    cellDownloadHref: string;
+    fovDownloadHref: string;
+    hasFov: boolean;
+}
+declare const DownloadButton: React.FC<DownloadButtonProps>;
+export default DownloadButton;

package/type-declarations/aics-image-viewer/components/Toolbar/ViewModeRadioButtons.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { ViewMode } from "../../shared/enums";
+interface ViewModeRadioButtonsProps {
+    mode: ViewMode;
+    onViewModeChange: (newMode: ViewMode) => void;
+}
+declare const ViewModeRadioButtons: React.FC<ViewModeRadioButtonsProps>;
+export default ViewModeRadioButtons;

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

@@ -0,0 +1,31 @@
+import React from "react";
+import { ViewerSettingUpdater } from "../ViewerStateProvider/types";
+import { ImageType, RenderMode, ViewMode } from "../../shared/enums";
+import "./styles.css";
+type ToolbarProps = {
+    cellDownloadHref: string;
+    fovDownloadHref: string;
+    hasCellId: boolean;
+    hasParentImage: boolean;
+    canPathTrace: boolean;
+    resetCamera: () => void;
+    downloadScreenshot: () => void;
+    visibleControls: {
+        autoRotateButton: boolean;
+        viewModeRadioButtons: boolean;
+        fovCellSwitchControls: boolean;
+        resetCameraButton: boolean;
+        showAxesButton: boolean;
+        showBoundingBoxButton: boolean;
+    };
+    imageType: ImageType;
+    renderMode: RenderMode;
+    viewMode: ViewMode;
+    autorotate: boolean;
+    showAxes: boolean;
+    showBoundingBox: boolean;
+    changeViewerSetting: ViewerSettingUpdater;
+    resetToSavedViewerState: () => void;
+};
+declare const _default: React.FC<Omit<ToolbarProps, "viewMode" | "renderMode" | "imageType" | "showAxes" | "showBoundingBox" | "autorotate" | "changeViewerSetting" | "resetToSavedViewerState">>;
+export default _default;

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

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import { ViewerState, ViewerStateContextType, ResetState } from "./types";
+import { ViewerChannelSettings } from "../../shared/utils/viewerChannelSettings";
+/**
+ * Provides reset functionality for the viewer and channel states.
+ */
+export default class ResetStateProvider implements ResetState {
+    savedViewerState: Partial<ViewerState>;
+    savedViewerChannelSettings: ViewerChannelSettings | undefined;
+    useDefaultViewerChannelSettings: boolean;
+    channelsToReset: Set<number>;
+    channelsToResetOnLoad: Set<number>;
+    ref: React.MutableRefObject<ViewerStateContextType>;
+    constructor(viewerStateRef: React.MutableRefObject<ViewerStateContextType>);
+    setSavedViewerState(state: Partial<ViewerState>): void;
+    setSavedViewerChannelSettings(settings: ViewerChannelSettings | undefined): void;
+    getChannelsAwaitingReset(): Set<number>;
+    getChannelsAwaitingResetOnLoad(): Set<number>;
+    onResetChannel(channelIndex: number): void;
+    /**
+     * Returns the current viewer channel settings that the viewer should use when
+     * resetting channels to an initial state.
+     */
+    getCurrentViewerChannelSettings(): ViewerChannelSettings | undefined;
+    /**
+     * Helper method. Resets the viewer and all channels to the provided state. If new data needs to
+     * be loaded, handles setup so the reset will be applied to each channel as it loads in.
+     */
+    private resetToState;
+    /** Resets to the initial saved state of the viewer, as shown to the user on load. */
+    resetToSavedViewerState(): void;
+    /** Reset to global default viewer state, as if loading the volume with no parameters. */
+    resetToDefaultViewerState(): void;
+}

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

@@ -0,0 +1,33 @@
+import React from "react";
+import type { ViewerState, ViewerStateContextType } from "./types";
+export declare const ALL_VIEWER_STATE_KEYS: (keyof ViewerState | "changeViewerSetting" | "setChannelSettings" | "channelSettings" | "changeChannelSetting" | "applyColorPresets" | keyof import("./types").ResetState)[];
+type NoNull<T> = {
+    [K in keyof T]: NonNullable<T[K]>;
+};
+type ContextRefType = NoNull<React.MutableRefObject<ViewerStateContextType>>;
+export declare const ViewerStateContext: React.Context<{
+    ref: ContextRefType;
+}>;
+/** Provides a central store for the state of the viewer, and the methods to update it. */
+declare const ViewerStateProvider: React.FC<{
+    viewerSettings?: Partial<ViewerState>;
+    children?: React.ReactNode;
+}>;
+/**
+ * Higher-order component that connects a component to the viewer state context.
+ *
+ * Accepts a `component` and an array of `keys` from the viewer state context, and returns a new memoized component
+ * which "subscribes" to only those fields of state, and will not re-render if other fields change. This works by
+ * creating a component which is "split in two" as described
+ * [here](https://react.dev/reference/react/memo#updating-a-memoized-component-using-a-context).
+ *
+ * NOTE that while higher-order components don't seem to be explicitly considered an anti-pattern, they don't appear in
+ * modern documentation because they are "[not commonly used in modern React
+ * code](https://legacy.reactjs.org/docs/higher-order-components.html)." React-redux, which inspired this "connect"
+ * pattern, has also generally moved away from this pattern [in favor of a hooks-based
+ * approach](https://react-redux.js.org/api/hooks). I too would love to use hooks to connect to viewer state, but there
+ * is currently no way to hook into context without agreeing to re-render on every change. I feel okay using a higher-
+ * order component in this case because, analogous to a custom hook, it extends a provided primitive HOC (`memo`).
+ */
+export declare function connectToViewerState<Keys extends keyof ViewerStateContextType, Props extends Pick<ViewerStateContextType, Keys>>(component: React.FC<Props>, keys: Keys[]): React.FC<Omit<Props, Keys>>;
+export default ViewerStateProvider;