Maintain camera zoom when switching dataset

axelboc · axelboc · commit be7e78a00496 · 2026-01-08T16:43:24.000+01:00
diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
@@ -1,5 +1,6 @@
-import '@h5web/lib'; // make sure lib styles come first in CSS bundle
+import '@h5web/lib'; // eslint-disable-line import/no-duplicates -- make sure lib styles come first in CSS bundle
 
+import { KeepZoomProvider } from '@h5web/lib'; // eslint-disable-line import/no-duplicates
 import { useToggle } from '@react-hookz/web';
 import { Suspense, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
@@ -85,23 +86,25 @@ function App(props: Props) {
           />
           <VisConfigProvider>
             <DimMappingProvider>
-              <ErrorBoundary
-                resetKeys={[selectedPath, isInspecting]}
-                FallbackComponent={ErrorFallback}
-              >
-                <Suspense
-                  fallback={<EntityLoader isInspecting={isInspecting} />}
+              <KeepZoomProvider>
+                <ErrorBoundary
+                  resetKeys={[selectedPath, isInspecting]}
+                  FallbackComponent={ErrorFallback}
                 >
-                  {isInspecting ? (
-                    <MetadataViewer
-                      path={selectedPath}
-                      onSelectPath={onSelectPath}
-                    />
-                  ) : (
-                    <Visualizer path={selectedPath} />
-                  )}
-                </Suspense>
-              </ErrorBoundary>
+                  <Suspense
+                    fallback={<EntityLoader isInspecting={isInspecting} />}
+                  >
+                    {isInspecting ? (
+                      <MetadataViewer
+                        path={selectedPath}
+                        onSelectPath={onSelectPath}
+                      />
+                    ) : (
+                      <Visualizer path={selectedPath} />
+                    )}
+                  </Suspense>
+                </ErrorBoundary>
+              </KeepZoomProvider>
             </DimMappingProvider>
           </VisConfigProvider>
         </ReflexElement>
diff --git a/packages/app/src/vis-packs/core/complex/MappedComplexHeatmapVis.tsx b/packages/app/src/vis-packs/core/complex/MappedComplexHeatmapVis.tsx
@@ -1,6 +1,7 @@
 import {
   type DimensionMapping,
   HeatmapVis,
+  KeepZoom,
   useDomain,
   useSafeDomain,
   useSlicedDimsAndMapping,
@@ -20,6 +21,7 @@ import { type HeatmapConfig } from '../heatmap/config';
 import HeatmapToolbar from '../heatmap/HeatmapToolbar';
 import { useMappedArray, useToNumArrays } from '../hooks';
 import { DEFAULT_DOMAIN } from '../utils';
+import { Vis } from '../visualizations';
 import { usePhaseAmplitude } from './hooks';
 import { COMPLEX_VIS_TYPE_LABELS } from './utils';
 
@@ -115,7 +117,9 @@ function MappedComplexHeatmapVis(props: Props) {
               }
             : undefined
         }
-      />
+      >
+        <KeepZoom visKey={Vis.Heatmap} />
+      </HeatmapVis>
     </>
   );
 }
diff --git a/packages/app/src/vis-packs/core/complex/MappedComplexLineVis.tsx b/packages/app/src/vis-packs/core/complex/MappedComplexLineVis.tsx
@@ -1,6 +1,7 @@
 import {
   ComplexVisType,
   type DimensionMapping,
+  KeepZoom,
   LineVis,
   useCombinedDomain,
   useDomains,
@@ -22,6 +23,7 @@ import { useMappedArrays, useToNumArrays } from '../hooks';
 import { type LineConfig } from '../line/config';
 import LineToolbar from '../line/LineToolbar';
 import { DEFAULT_DOMAIN } from '../utils';
+import { Vis } from '../visualizations';
 import { usePhaseAmplitudeArrays } from './hooks';
 import { COMPLEX_VIS_TYPE_LABELS } from './utils';
 
@@ -140,7 +142,9 @@ function MappedComplexLineVis(props: Props) {
         visible={valueVisible}
         interpolation={interpolation}
         testid={dimMapping.toString()}
-      />
+      >
+        <KeepZoom visKey={Vis.Line} />
+      </LineVis>
     </>
   );
 }
diff --git a/packages/app/src/vis-packs/core/heatmap/MappedHeatmapVis.tsx b/packages/app/src/vis-packs/core/heatmap/MappedHeatmapVis.tsx
@@ -3,6 +3,7 @@ import {
   getSliceSelection,
   HeatmapVis,
   type IgnoreValue,
+  KeepZoom,
   useDomain,
   useSafeDomain,
   useSlicedDimsAndMapping,
@@ -26,6 +27,7 @@ import {
   useToNumArrays,
 } from '../hooks';
 import { DEFAULT_DOMAIN, formatNumLikeType } from '../utils';
+import { Vis } from '../visualizations';
 import { type HeatmapConfig } from './config';
 import HeatmapToolbar from './HeatmapToolbar';
 
@@ -118,7 +120,9 @@ function MappedHeatmapVis(props: Props) {
         flipXAxis={flipXAxis}
         flipYAxis={flipYAxis}
         ignoreValue={ignoreValue}
-      />
+      >
+        <KeepZoom visKey={Vis.Heatmap} />
+      </HeatmapVis>
     </>
   );
 }
diff --git a/packages/app/src/vis-packs/core/line/MappedLineVis.tsx b/packages/app/src/vis-packs/core/line/MappedLineVis.tsx
@@ -2,6 +2,7 @@ import {
   type DimensionMapping,
   getSliceSelection,
   type IgnoreValue,
+  KeepZoom,
   LineVis,
   useCombinedDomain,
   useDomain,
@@ -32,6 +33,7 @@ import {
   useToNumArrays,
 } from '../hooks';
 import { DEFAULT_DOMAIN, formatNumLikeType, toNumArray } from '../utils';
+import { Vis } from '../visualizations';
 import { type LineConfig } from './config';
 import LineToolbar from './LineToolbar';
 import { generateCsv } from './utils';
@@ -191,7 +193,9 @@ function MappedLineVis(props: Props) {
         interpolation={interpolation}
         visible={valueVisible}
         testid={dimMapping.toString()}
-      />
+      >
+        <KeepZoom visKey={Vis.Line} />
+      </LineVis>
     </>
   );
 }
diff --git a/packages/app/src/vis-packs/core/rgb/MappedRgbVis.tsx b/packages/app/src/vis-packs/core/rgb/MappedRgbVis.tsx
@@ -1,5 +1,6 @@
 import {
   type DimensionMapping,
+  KeepZoom,
   RgbVis,
   useSlicedDimsAndMapping,
 } from '@h5web/lib';
@@ -14,6 +15,7 @@ import { createPortal } from 'react-dom';
 
 import visualizerStyles from '../../../visualizer/Visualizer.module.css';
 import { useMappedArray, useToNumArray, useToNumArrays } from '../hooks';
+import { Vis } from '../visualizations';
 import { type RgbVisConfig } from './config';
 import RgbToolbar from './RgbToolbar';
 
@@ -73,7 +75,9 @@ function MappedRgbVis(props: Props) {
         }}
         flipXAxis={flipXAxis}
         flipYAxis={flipYAxis}
-      />
+      >
+        <KeepZoom visKey={Vis.RGB} />
+      </RgbVis>
     </>
   );
 }
diff --git a/packages/app/src/vis-packs/core/scatter/MappedScatterVis.tsx b/packages/app/src/vis-packs/core/scatter/MappedScatterVis.tsx
@@ -1,12 +1,20 @@
-import { ScatterVis, useDomain, useSafeDomain, useVisDomain } from '@h5web/lib';
+import {
+  KeepZoom,
+  ScatterVis,
+  useDomain,
+  useSafeDomain,
+  useVisDomain,
+} from '@h5web/lib';
 import { assertDefined } from '@h5web/shared/guards';
 import { type ArrayValue, type NumericType } from '@h5web/shared/hdf5-models';
 import { type AxisMapping } from '@h5web/shared/nexus-models';
 import { createPortal } from 'react-dom';
 
 import visualizerStyles from '../../../visualizer/Visualizer.module.css';
+import { NxDataVis } from '../../nexus/visualizations';
 import { useBaseArray, useToNumArray, useToNumArrays } from '../hooks';
 import { DEFAULT_DOMAIN } from '../utils';
+import { Vis } from '../visualizations';
 import { type ScatterConfig } from './config';
 import ScatterToolbar from './ScatterToolbar';
 
@@ -64,7 +72,9 @@ function MappedScatterVis(props: Props) {
         scaleType={scaleType}
         showGrid={showGrid}
         title={title}
-      />
+      >
+        <KeepZoom visKey={NxDataVis.NxScatter} />
+      </ScatterVis>
     </>
   );
 }
diff --git a/packages/lib/src/index.ts b/packages/lib/src/index.ts
@@ -83,6 +83,8 @@ export { default as AxialSelectToZoom } from './interactions/AxialSelectToZoom';
 export { default as SelectionTool } from './interactions/SelectionTool';
 export { default as AxialSelectionTool } from './interactions/AxialSelectionTool';
 export { default as PreventDefaultContextMenu } from './interactions/PreventDefaultContextMenu';
+export { default as KeepZoom } from './interactions/KeepZoom';
+export { KeepZoomProvider } from './interactions/keep-zoom-store';
 export type { PanProps } from './interactions/Pan';
 export type { ZoomProps } from './interactions/Zoom';
 export type { XAxisZoomProps } from './interactions/XAxisZoom';
diff --git a/packages/lib/src/interactions/KeepZoom.tsx b/packages/lib/src/interactions/KeepZoom.tsx
@@ -0,0 +1,47 @@
+import { useDebouncedCallback, useSyncedRef } from '@react-hookz/web';
+import { useFrame, useThree } from '@react-three/fiber';
+import { useLayoutEffect } from 'react';
+import { useStore } from 'zustand';
+
+import { useVisCanvasContext } from '../vis/shared/VisCanvasProvider';
+import { useMoveCameraTo } from './hooks';
+import { useKeepZoomStore } from './keep-zoom-store';
+
+interface Props {
+  visKey: string;
+}
+
+function KeepZoom(props: Props) {
+  const { visKey } = props;
+  const { abscissaConfig, ordinateConfig } = useVisCanvasContext();
+  const keyRef = useSyncedRef(
+    `${visKey}_${abscissaConfig.visDomain.toString()}_${ordinateConfig.visDomain.toString()}`,
+  );
+
+  const store = useKeepZoomStore();
+  const setState = useStore(store, (state) => state.setState);
+  const setStateDebounced = useDebouncedCallback(setState, [setState], 100);
+
+  const camera = useThree((state) => state.camera);
+  const moveCameraToRef = useSyncedRef(useMoveCameraTo());
+
+  /* Restore camera position and scale on mount if current key matches persisted key from store.
+   * Synced refs are to ensure that the effect runs only on mount and not when the axis domains change. */
+  useLayoutEffect(() => {
+    const { key, scale, position } = store.getState(); // non-reactive state to avoid render loop
+
+    if (keyRef.current === key) {
+      camera.scale.copy(scale);
+      moveCameraToRef.current(position);
+    }
+  }, [keyRef, moveCameraToRef, camera, store]);
+
+  // Save camera position and scale on change
+  useFrame(() => {
+    setStateDebounced(keyRef.current, camera.position, camera.scale);
+  });
+
+  return null;
+}
+
+export default KeepZoom;
diff --git a/packages/lib/src/interactions/keep-zoom-store.tsx b/packages/lib/src/interactions/keep-zoom-store.tsx
@@ -0,0 +1,52 @@
+import { type NoProps } from '@h5web/shared/vis-models';
+import {
+  createContext,
+  type PropsWithChildren,
+  useContext,
+  useState,
+} from 'react';
+import { Vector3 } from 'three';
+import { createStore, type StoreApi } from 'zustand';
+
+import { CAMERA_Z } from '../vis/utils';
+
+interface KeepZoomState {
+  key: string | undefined;
+  position: Vector3;
+  scale: Vector3;
+  setState: (key: string, position: Vector3, scale: Vector3) => void;
+}
+
+function createKeepZoomStore() {
+  return createStore<KeepZoomState>()(
+    (set): KeepZoomState => ({
+      key: undefined,
+      position: new Vector3(0, 0, CAMERA_Z),
+      scale: new Vector3(1, 1, 1),
+
+      setState: (key, position, scale) => {
+        set(() => ({
+          key,
+          position: position.clone(),
+          scale: scale.clone(),
+        }));
+      },
+    }),
+  );
+}
+
+const StoreContext = createContext({} as StoreApi<KeepZoomState>);
+
+export function KeepZoomProvider(props: PropsWithChildren<NoProps>) {
+  const { children } = props;
+
+  const [store] = useState(createKeepZoomStore);
+
+  return (
+    <StoreContext.Provider value={store}>{children}</StoreContext.Provider>
+  );
+}
+
+export function useKeepZoomStore() {
+  return useContext(StoreContext);
+}
diff --git a/packages/lib/src/toolbar/floating/FloatingControl.module.css b/packages/lib/src/toolbar/floating/FloatingControl.module.css
diff --git a/packages/lib/src/toolbar/floating/ResetZoomButton.tsx b/packages/lib/src/toolbar/floating/ResetZoomButton.tsx
@@ -2,7 +2,7 @@ import { useThree } from '@react-three/fiber';
 
 import { useCameraState } from '../../vis/hooks';
 import FloatingControl from './FloatingControl';
-import styles from './ResetZoomButton.module.css';
+import styles from './FloatingControl.module.css';
 
 function ResetZoomButton() {
   const camera = useThree((state) => state.camera);
diff --git a/packages/lib/src/vis/shared/RatioEnforcer.tsx b/packages/lib/src/vis/shared/RatioEnforcer.tsx
@@ -1,5 +1,5 @@
 import { useThree } from '@react-three/fiber';
-import { useEffect } from 'react';
+import { useLayoutEffect } from 'react';
 
 import { useMoveCameraTo } from '../../interactions/hooks';
 import { useVisCanvasContext } from './VisCanvasProvider';
@@ -9,8 +9,8 @@ function RatioEnforcer() {
   const camera = useThree((state) => state.camera);
   const moveCameraTo = useMoveCameraTo();
 
-  useEffect(() => {
-    if (!visRatio || camera.scale.x === camera.scale.y) {
+  useLayoutEffect(() => {
+    if (visRatio === undefined || camera.scale.x === camera.scale.y) {
       return;
     }
 
diff --git a/packages/lib/src/vis/tiles/store.ts b/packages/lib/src/vis/tiles/store.ts
@@ -7,8 +7,5 @@ interface TooltipStore {
 
 export const useTooltipStore = create<TooltipStore>((set) => ({
   val: undefined,
-  setTooltipValue: (x: number, y: number, v: number) =>
-    set(() => ({
-      val: { x, y, v },
-    })),
+  setTooltipValue: (x, y, v) => set(() => ({ val: { x, y, v } })),
 }));
