Merge pull request #301 from allen-cell-animated/feature/lower-scale-…

…playback Lower scale level during playback
allen-cell-animated · Aug 8, 2024 · 416ece2 · 416ece2
2 parents a078808 + c4c006a
commit 416ece2
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 6 deletions.
diff --git a/src/aics-image-viewer/components/App/index.tsx b/src/aics-image-viewer/components/App/index.tsx
@@ -277,6 +277,16 @@ const App: React.FC<AppProps> = (props) => {
   playControls.onPlayingAxisChanged = (axis) => {
     loader.current?.setPrefetchPriority(axis ? [axisToLoaderPriority[axis]] : []);
     loader.current?.syncMultichannelLoading(axis ? true : false);
+    if (image) {
+      if (axis === null) {
+        // Playback has stopped - reset scale level bias
+        view3d.setScaleLevelBias(image, 0);
+      } else {
+        // Playback has started - unless entire axis is in memory (typical in X and Y), downlevel to speed things up
+        const shouldDownlevel = axis === "t" || numSlices[axis] !== numSlicesLoaded[axis];
+        view3d.setScaleLevelBias(image, shouldDownlevel ? 1 : 0);
+      }
+    }
     setPlayingAxis(axis);
   };
 
@@ -782,7 +792,7 @@ const App: React.FC<AppProps> = (props) => {
             />
             <CellViewerCanvasWrapper
               view3d={view3d}
-              hasImage={!!image}
+              image={image}
               loadingImage={sendingQueryRequest}
               numSlices={numSlices}
               numSlicesLoaded={numSlicesLoaded}

diff --git a/src/aics-image-viewer/components/AxisClipSliders/index.tsx b/src/aics-image-viewer/components/AxisClipSliders/index.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { Button, Tooltip } from "antd";
 import { CaretRightOutlined, PauseOutlined } from "@ant-design/icons";
+import { Volume } from "@aics/volume-viewer";
 
 import NumericInput from "../shared/NumericInput";
 import SmarterSlider from "../shared/SmarterSlider";
@@ -163,6 +164,7 @@ const PlaySliderRow: React.FC<PlaySliderRowProps> = (props) => {
 
 type AxisClipSlidersProps = {
   mode: ViewMode;
+  image: Volume | null;
   changeViewerSetting: ViewerSettingUpdater;
   numSlices: PerAxis<number>;
   numSlicesLoaded: PerAxis<number>;
@@ -206,7 +208,7 @@ const AxisClipSliders: React.FC<AxisClipSlidersProps> = (props) => {
   };
 
   // Pause when view mode or volume size has changed
-  useEffect(() => props.playControls.pause(), [props.mode, ...Object.values(props.numSlices)]);
+  useEffect(() => props.playControls.pause(), [props.mode, props.image]);
 
   const handlePlayPause = (axis: AxisName | "t", willPlay: boolean): void => {
     if (willPlay) {

diff --git a/src/aics-image-viewer/components/CellViewerCanvasWrapper/index.tsx b/src/aics-image-viewer/components/CellViewerCanvasWrapper/index.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { View3d } from "@aics/volume-viewer";
+import { View3d, Volume } from "@aics/volume-viewer";
 import { LoadingOutlined } from "@ant-design/icons";
 
 import { AxisName, PerAxis, Styles } from "../../shared/types";
@@ -18,7 +18,7 @@ interface ViewerWrapperProps {
   view3d: View3d;
   loadingImage: boolean;
   appHeight: string;
-  hasImage: boolean;
+  image: Volume | null;
   numSlices: PerAxis<number>;
   numSlicesLoaded: PerAxis<number>;
   playControls: PlayControls;
@@ -68,7 +68,7 @@ class ViewerWrapper extends React.Component<ViewerWrapperProps, ViewerWrapperSta
     ) : null;
 
     const noImageText =
-      !this.props.loadingImage && !this.props.hasImage ? <div style={STYLES.noImage}>No image selected</div> : null;
+      !this.props.loadingImage && !this.props.image ? <div style={STYLES.noImage}>No image selected</div> : null;
     if (!!noImageText && this.props.view3d) {
       this.props.view3d.removeAllVolumes();
     }
@@ -87,9 +87,10 @@ class ViewerWrapper extends React.Component<ViewerWrapperProps, ViewerWrapperSta
           onVisibleChange={(visible) => this.props.onClippingPanelVisibleChange?.(visible, numTimesteps > 1)}
           onVisibleChangeEnd={this.props.onClippingPanelVisibleChangeEnd}
         >
-          {visibleControls.axisClipSliders && this.props.hasImage && (
+          {visibleControls.axisClipSliders && !!this.props.image && (
             <AxisClipSliders
               mode={viewMode}
+              image={this.props.image}
               changeViewerSetting={changeViewerSetting}
               numSlices={numSlices}
               numSlicesLoaded={this.props.numSlicesLoaded}