Update image title and metadata on scene switch

src/aics-image-viewer/components/App/index.tsx

@@ -143,7 +143,7 @@ const App: React.FC<AppProps> = (props) => {
     getChannelsAwaitingReset,
     onResetChannel,
   } = viewerState.current;
-  const { onControlPanelToggle, onImageTitleChange, metadata, metadataFormatter } = props;
+  const { onControlPanelToggle, onImageTitleChange, metadataFormatter } = props;
 
   useMemo(() => {
     if (props.viewerChannelSettings) {
@@ -244,10 +244,18 @@ const App: React.FC<AppProps> = (props) => {
         }),
       });
 
-      onImageTitleChange?.(newImage.imageInfo.imageInfo.name);
       view3d.updateActiveChannels(newImage);
     },
-    [view3d, viewerState, onImageTitleChange, changeChannelSetting, getCurrentViewerChannelSettings]
+    [view3d, viewerState, changeChannelSetting, getCurrentViewerChannelSettings]
+  );
+
+  const [loadedScene, setLoadedScene] = useState<number | undefined>(undefined);
+  const onChangeScene = useCallback(
+    (image: Volume, sceneIndex: number) => {
+      onImageTitleChange?.(image.imageInfo.imageInfo.name);
+      setLoadedScene(sceneIndex);
+    },
+    [onImageTitleChange]
   );
 
   const onChannelLoaded = useCallback(
@@ -321,6 +329,7 @@ const App: React.FC<AppProps> = (props) => {
   const volume = useVolume(scenes, {
     onCreateImage,
     onChannelLoaded,
+    onChangeScene,
     onError,
     maskChannelName,
   });
@@ -360,30 +369,31 @@ const App: React.FC<AppProps> = (props) => {
     });
   }, [view3d]);
 
-  const getMetadata = useCallback((): MetadataRecord => {
+  const metadata = useMemo((): MetadataRecord => {
     let imageMetadata = image?.imageMetadata as MetadataRecord;
     if (imageMetadata && metadataFormatter) {
       imageMetadata = metadataFormatter(imageMetadata);
     }
+    const propsMetadata = props.metadata;
 
     let sceneMeta: MetadataRecord | undefined;
-    if (Array.isArray(metadata)) {
+    if (Array.isArray(propsMetadata)) {
       // If metadata is an array, try to index it by scene
-      if (metadata.length >= numScenes) {
-        sceneMeta = metadata[viewerState.current.scene];
+      if (propsMetadata.length >= numScenes && loadedScene !== undefined) {
+        sceneMeta = propsMetadata[loadedScene];
       } else {
-        sceneMeta = metadata[0];
+        sceneMeta = propsMetadata[0];
       }
     } else {
-      sceneMeta = metadata;
+      sceneMeta = propsMetadata;
     }
 
     if (imageMetadata && Object.keys(imageMetadata).length > 0) {
       return { Image: imageMetadata, ...sceneMeta };
     } else {
       return sceneMeta ?? {};
     }
-  }, [metadata, metadataFormatter, image, numScenes, viewerState]);
+  }, [props.metadata, metadataFormatter, image, loadedScene, numScenes]);
 
   useEffect((): void => {
     const hasTime = numTimesteps > 1;
@@ -659,7 +669,7 @@ const App: React.FC<AppProps> = (props) => {
             saveIsosurface={saveIsosurface}
             onApplyColorPresets={applyColorPresets}
             viewerChannelSettings={props.viewerChannelSettings}
-            getMetadata={getMetadata}
+            metadata={metadata}
           />
         </Sider>
         <Layout className="cell-viewer-wrapper" style={{ margin: props.canvasMargin }}>

src/aics-image-viewer/components/ControlPanel/index.tsx

@@ -26,7 +26,7 @@ interface ControlPanelProps
       colorPresetsDropdown: boolean;
       metadataViewer: boolean;
     };
-  getMetadata: () => MetadataRecord;
+  metadata: MetadataRecord;
   collapsed: boolean;
   setCollapsed: (value: boolean) => void;
   resetToDefaultViewerState: () => void;
@@ -168,7 +168,7 @@ function ControlPanel(props: ControlPanelProps): React.ReactElement {
               />
             )}
             {tab === ControlTab.Advanced && renderAdvancedSettings()}
-            {tab === ControlTab.Metadata && <MetadataViewer metadata={props.getMetadata()} />}
+            {tab === ControlTab.Metadata && <MetadataViewer metadata={props.metadata} />}
           </div>
         )}
       </div>

src/aics-image-viewer/components/useVolume.ts

@@ -21,8 +21,10 @@ import type { ChannelState } from "./ViewerStateProvider/types";
 import { ViewerStateContext } from "./ViewerStateProvider";
 
 export type UseVolumeOptions = {
-  /** Callback for when the volume is created. */
+  /** Callback called just once when the volume is created. */
   onCreateImage?: (image: Volume) => void;
+  /** Callback called on any scene change, including the initial image load. */
+  onChangeScene?: (image: Volume, sceneIndex: number) => void;
   /** Callback for when a single channel of the volume has loaded. */
   onChannelLoaded?: (image: Volume, channelIndex: number, isInitialLoad: boolean) => void;
   /** Callback for when image loading encounters an error. */
@@ -98,6 +100,7 @@ const useVolume = (
   const viewerStateRef = useContext(ViewerStateContext).ref;
   const onErrorRef = useEffectEventRef(options?.onError);
   const onChannelLoadedRef = useEffectEventRef(options?.onChannelLoaded);
+  const onChangeSceneRef = useEffectEventRef(options?.onChangeScene);
   const onCreateImageRef = useEffectEventRef(options?.onCreateImage);
   const maskChannelName = options?.maskChannelName;
 
@@ -292,14 +295,16 @@ const useVolume = (
 
       // initiate loading only after setting up new channel settings,
       // in case the loader callback fires before the state is set
-      sceneLoader.loadScene(scene, aimg, requiredLoadSpec).catch(onError);
+      const onCreateScene = onChangeSceneRef.current;
+      sceneLoader.loadScene(scene, aimg, requiredLoadSpec, { onCreateScene }).catch(onError);
     };
 
     openImage();
   }, [
     sceneLoader,
     onError,
     onCreateImageRef,
+    onChangeSceneRef,
     onChannelLoadedRef,
     viewerStateRef,
     channelVersionsRef,
@@ -313,21 +318,22 @@ const useVolume = (
   const setTime = useCallback(
     (view3d: View3d, time: number): void => {
       if (image && !inInitialLoadRef.current) {
-        view3d.setTime(image, time, onChannelDataLoaded).catch(onError);
+        view3d.setTime(image, time).catch(onError);
         setIsLoading();
       }
     },
-    [image, onError, setIsLoading, inInitialLoadRef, onChannelDataLoaded]
+    [image, onError, setIsLoading, inInitialLoadRef]
   );
 
   const setScene = useCallback(
     (scene: number): void => {
       if (image && !inInitialLoadRef.current) {
-        sceneLoader.loadScene(scene, image, undefined, onChannelDataLoaded).catch(onError);
+        const onCreateScene = onChangeSceneRef.current;
+        sceneLoader.loadScene(scene, image, undefined, { onCreateScene }).catch(onError);
         setIsLoading();
       }
     },
-    [image, onError, sceneLoader, setIsLoading, inInitialLoadRef, onChannelDataLoaded]
+    [image, onError, sceneLoader, setIsLoading, inInitialLoadRef, onChangeSceneRef]
   );
 
   return useMemo(

src/aics-image-viewer/shared/utils/sceneStore.ts

@@ -1,7 +1,6 @@
 import type {
   CreateLoaderOptions,
   LoadSpec,
-  PerChannelCallback,
   PrefetchDirection,
   RawArrayLoaderOptions,
   Volume,
@@ -10,6 +9,11 @@ import type {
 import { VolumeFileFormat } from "@aics/vole-core";
 import type { ThreadableVolumeLoader } from "@aics/vole-core/es/types/loaders/IVolumeLoader";
 
+export type LoadSceneOptions = {
+  onCreateScene?: (volume: Volume, sceneIndex: number) => void;
+  onChannelLoaded?: (volume: Volume, channelIndex: number) => void;
+};
+
 export default class SceneStore {
   context: VolumeLoaderContext;
   loaders: (ThreadableVolumeLoader | undefined)[];
@@ -48,21 +52,21 @@ export default class SceneStore {
     return loader;
   }
 
-  public async loadScene(
-    scene: number,
-    image: Volume,
-    loadSpec?: LoadSpec,
-    onChannelLoaded?: PerChannelCallback
-  ): Promise<void> {
+  public async loadScene(scene: number, image: Volume, loadSpec?: LoadSpec, options?: LoadSceneOptions): Promise<void> {
     const loader = await this.getLoader(scene);
     const spec = loadSpec ?? image.loadSpecRequired;
 
     image.loader = loader;
     image.imageInfo.imageInfo = (await loader.createImageInfo(spec)).imageInfo;
-    loader.loadVolumeData(image, spec, onChannelLoaded);
+    options?.onCreateScene?.(image, scene);
+    loader.loadVolumeData(image, spec, options?.onChannelLoaded);
   }
 
-  public async createVolume(scene: number, loadSpec: LoadSpec, onChannelLoaded?: PerChannelCallback): Promise<Volume> {
+  public async createVolume(
+    scene: number,
+    loadSpec: LoadSpec,
+    onChannelLoaded?: (volume: Volume, channelIndex: number) => void
+  ): Promise<Volume> {
     const loader = await this.getLoader(scene);
     return loader.createVolume(loadSpec, onChannelLoaded);
   }