[3D viewer]: Persistence of view state and vertical scale

frontend/src/modules/2DViewer/view/view.tsx

@@ -35,6 +35,7 @@ export function View(props: ModuleViewProps<Interfaces>): React.ReactNode {
             workbenchSession={props.workbenchSession}
             workbenchSettings={props.workbenchSettings}
             workbenchServices={props.workbenchServices}
+            initialVerticalScale={1}
         />
     );
 }

frontend/src/modules/3DViewer/view/atoms/baseAtoms.ts

@@ -2,3 +2,4 @@ import type { ViewStateType } from "@webviz/subsurface-viewer";
 import { atom } from "jotai";
 
 export const viewStateAtom = atom<ViewStateType | null>(null);
+export const verticalScaleAtom = atom<number>(10);

frontend/src/modules/3DViewer/view/persistence.ts

@@ -5,7 +5,7 @@ import { setIfDefined } from "@framework/utils/atomUtils";
 import type { Vec3 } from "@lib/utils/vec3";
 import { SchemaBuilder } from "@modules/_shared/jtd-schemas/SchemaBuilder";
 
-import { viewStateAtom } from "./atoms/baseAtoms";
+import { verticalScaleAtom, viewStateAtom } from "./atoms/baseAtoms";
 
 type PersistableViewState = {
     rotationOrbit: number;
@@ -25,6 +25,7 @@ type ExtendedViewStateType = ViewStateType & {
 
 export type SerializedView = {
     viewState: PersistableViewState | null;
+    verticalScale: number;
 };
 
 const schemaBuilder = new SchemaBuilder<SerializedView>(({ inject }) => ({
@@ -44,20 +45,25 @@ const schemaBuilder = new SchemaBuilder<SerializedView>(({ inject }) => ({
             },
             nullable: true,
         },
+        verticalScale: { type: "float64" },
     },
 }));
 
 export const SERIALIZED_VIEW = schemaBuilder.build();
 
 export const serializeView: SerializeStateFunction<SerializedView> = (get) => {
     const viewState = get(viewStateAtom);
+    const verticalScale = get(verticalScaleAtom);
+
     return {
         viewState: viewState ? convertToPersistableViewState(viewState) : null,
+        verticalScale,
     };
 };
 
 export const deserializeView: DeserializeStateFunction<SerializedView> = (raw, set) => {
     setIfDefined(set, viewStateAtom, raw.viewState ? convertFromPersistableViewState(raw.viewState) : null);
+    setIfDefined(set, verticalScaleAtom, raw.verticalScale);
 };
 
 function convertToPersistableViewState(viewState: ExtendedViewStateType): PersistableViewState {

frontend/src/modules/3DViewer/view/view.tsx

@@ -1,16 +1,22 @@
 import type React from "react";
 
+import { useAtom } from "jotai";
+
 import type { ModuleViewProps } from "@framework/Module";
 
 import type { Interfaces } from "../interfaces";
 
+import { verticalScaleAtom, viewStateAtom } from "./atoms/baseAtoms";
 import { DataProvidersWrapper } from "./components/VisualizationAssemblerWrapper";
 
 export function View(props: ModuleViewProps<Interfaces>): React.ReactNode {
     const preferredViewLayout = props.viewContext.useSettingsToViewInterfaceValue("preferredViewLayout");
     const dataProviderManager = props.viewContext.useSettingsToViewInterfaceValue("dataProviderManager");
     const fieldId = props.viewContext.useSettingsToViewInterfaceValue("fieldId");
 
+    const [verticalScale, setVerticalScale] = useAtom(verticalScaleAtom);
+    const [viewState, setViewState] = useAtom(viewStateAtom);
+
     if (!dataProviderManager) {
         return null;
     }
@@ -30,6 +36,10 @@ export function View(props: ModuleViewProps<Interfaces>): React.ReactNode {
             workbenchSession={props.workbenchSession}
             workbenchSettings={props.workbenchSettings}
             workbenchServices={props.workbenchServices}
+            initialVerticalScale={verticalScale}
+            onVerticalScaleChange={setVerticalScale}
+            onViewStateChange={setViewState}
+            viewState={viewState ?? undefined}
         />
     );
 }

frontend/src/modules/_shared/components/SubsurfaceViewer/DpfSubsurfaceViewerWrapper.tsx

@@ -26,7 +26,9 @@ import { PreferredViewLayout } from "./typesAndEnums";
 export type DpfSubsurfaceViewerContextType = {
     visualizationMode: "2D" | "3D";
     viewState?: ViewStateType;
+    initialVerticalScale: number;
     onViewStateChange?: (viewState: ViewStateType) => void;
+    onVerticalScaleChange?: (verticalScale: number) => void;
     visualizationAssemblerProduct: AssemblerProduct<any>;
     preferredViewLayout: PreferredViewLayout;
     bounds: BoundingBox2D | undefined;
@@ -50,7 +52,9 @@ export function useDpfSubsurfaceViewerContext() {
 export type DpfSubsurfaceViewerWrapperProps = {
     visualizationMode: "2D" | "3D";
     viewState?: ViewStateType;
+    initialVerticalScale: number;
     onViewStateChange?: (viewState: ViewStateType) => void;
+    onVerticalScaleChange?: (verticalScale: number) => void;
     fieldId: string;
     visualizationAssemblerProduct: AssemblerProduct<VisualizationTarget.DECK_GL, any, any>;
     viewContext: ViewContext<any>;

frontend/src/modules/_shared/components/SubsurfaceViewer/_components/InteractionWrapper.tsx

@@ -56,12 +56,14 @@ function convertPolylinesToIntersectionPolylines(polylines: Polyline[], fieldId:
 
 export function InteractionWrapper(props: InteractionWrapperProps): React.ReactNode {
     const context = useDpfSubsurfaceViewerContext();
+    const { onVerticalScaleChange } = context;
+
     const deckGlRef = React.useRef<DeckGLRef>(null);
     const intersectionPolylines = useIntersectionPolylines(context.workbenchSession);
 
     const [triggerHomeCounter, setTriggerHomeCounter] = React.useState<number>(0);
     const [gridVisible, setGridVisible] = React.useState<boolean>(false);
-    const [verticalScale, setVerticalScale] = React.useState<number>(context.visualizationMode === "2D" ? 1 : 10);
+    const [verticalScale, setVerticalScale] = React.useState<number>(context.initialVerticalScale);
     const [activePolylineName, setActivePolylineName] = React.useState<string | undefined>(undefined);
 
     const deckGlManagerRef = React.useRef<DeckGlInstanceManager>(new DeckGlInstanceManager(deckGlRef.current));
@@ -97,6 +99,13 @@ export function InteractionWrapper(props: InteractionWrapperProps): React.ReactN
         [props.usedPolylineIds],
     );
 
+    React.useEffect(
+        function notifyAboutVerticalScaleChangeEffect() {
+            onVerticalScaleChange?.(verticalScale);
+        },
+        [verticalScale, onVerticalScaleChange],
+    );
+
     React.useLayoutEffect(
         function setupDeckGlManager() {
             // Imperative Deck.gl plugin setup — must happen before paint and before useEffect runs