wip

python/package.json

@@ -28,7 +28,8 @@
         "validate": "npm run typecheck && npm run lint"
     },
     "dependencies": {
-        "@deck.gl/core": "^8.9.35",
+        "@deck.gl/core": "^9.0.36",
+        "@deck.gl/react": "^9.0.36",
         "@emerson-eps/color-tables": "^0.4.85",
         "@equinor/eds-core-react": "0.33.0",
         "@equinor/eds-icons": "^0.19.1",

python/src/components/SubsurfaceViewer/SubsurfaceViewer.tsx

@@ -4,7 +4,7 @@ import {
     SubsurfaceViewerProps,
     ViewStateType,
 } from "@webviz/subsurface-viewer";
-import { DeckGLRef, View } from "@deck.gl/core";
+import { DeckGLRef } from "@deck.gl/react";
 import { useMultiViewPicking } from "@webviz/subsurface-viewer/src/hooks/useMultiViewPicking";
 import { useMultiViewCursorTracking } from "@webviz/subsurface-viewer/src/hooks/useMultiViewCursorTracking";
 import { isEqual } from "lodash";
@@ -19,22 +19,22 @@ const SubsurfaceViewerComponent = React.lazy(() =>
 );
 
 const SubsurfaceViewer: React.FC<SubsurfaceViewerProps> = (props) => {
-    const { children, ...rest } = props;
+    const { views, children, ...rest } = props;
 
-    if (!props.views) {
+    if (!views) {
         return (
             <React.Suspense fallback={<div>Loading...</div>}>
                 <SubsurfaceViewerComponent {...rest}>
-                    {children ? mapAnnotation(children) : null}
+                    {children}
                 </SubsurfaceViewerComponent>
             </React.Suspense>
         );
     }
 
     return (
         <React.Suspense fallback={<div>Loading...</div>}>
-            <MultiViewSubsurfaceViewer {...rest} views={props.views}>
-                {children ? mapAnnotation(children) : null}
+            <MultiViewSubsurfaceViewer {...rest} views={views}>
+                {children}
             </MultiViewSubsurfaceViewer>
         </React.Suspense>
     );
@@ -64,7 +64,7 @@ function MultiViewSubsurfaceViewer(
         useMultiViewPicking({
             deckGlRef,
             multiPicking: true,
-            pickDepth: 2,
+            pickDepth: 1,
         });
 
     const handleMouseEvent = React.useCallback(
@@ -128,18 +128,6 @@ function MultiViewSubsurfaceViewer(
     );
 }
 
-function mapAnnotation(annotationContainers: React.ReactNode) {
-    return React.Children.map(annotationContainers, (annotationContainer) => {
-        const viewId = (annotationContainer as React.ReactElement).key;
-        return (
-            // @ts-expect-error This is proven to work in JavaScript
-            <View key={viewId} id={viewId}>
-                {annotationContainer}
-            </View>
-        );
-    });
-}
-
 SubsurfaceViewer.displayName = "SubsurfaceViewer";
 
 export default SubsurfaceViewer;

python/webpack.config.js

@@ -125,7 +125,7 @@ module.exports = function (env, argv) {
             ],
         },
         optimization: {
-            minimize: true,
+            minimize: false,
             splitChunks: {
                 name: "[name].js",
                 cacheGroups: {

typescript/packages/subsurface-viewer/src/components/View.tsx

@@ -0,0 +1,29 @@
+import { Deck, Viewport, View } from "@deck.gl/core";
+import { DeckGLRef } from "@deck.gl/react";
+import React from "react";
+
+export type ViewProps = {
+    id: string;
+    deckGlRef: React.RefObject<DeckGLRef | null>;
+    children?: React.ReactNode;
+};
+
+export function ViewContent(props: ViewProps): React.ReactNode {
+    const deckRef = React.useRef<Deck | null>(null);
+
+    React.useEffect(
+        function onMount() {
+            if (props.deckGlRef.current) {
+                deckRef.current = props.deckGlRef.current.deck ?? null;
+                if (deckRef.current) {
+                    const views = deckRef.current.getViews();
+                    const view = views.find((v) => v.id === props.id);
+                    if (view) {
+                        deckRef.current.props.onViewStateChange 
+                    }
+                }
+            }
+        },
+        [props.deckGlRef]
+    );
+}

typescript/packages/subsurface-viewer/src/hooks/useMultiViewCursorTracking/useMultiViewCursorTracking.ts

@@ -1,8 +1,10 @@
 import React from "react";
-import { CrosshairLayer, CrosshairLayerProps } from "../../layers";
-import { ViewportType } from "../../views/viewport";
-import { TLayerDefinition } from "../../SubsurfaceViewer";
 import { v4 } from "uuid";
+import { CrosshairLayer } from "../../layers";
+
+import type { CrosshairLayerProps } from "../../layers";
+import type { ViewportType } from "../../views/viewport";
+import type { TLayerDefinition } from "../../SubsurfaceViewer";
 
 export type UseMultiViewCursorTrackingProps = {
     worldCoordinates: number[] | null;
@@ -22,12 +24,17 @@ export function useMultiViewCursorTracking(
 ): UseMultiViewCursorTrackingReturnType {
     const id = React.useRef<string>(`crosshair-${v4()}`);
 
-    const worldCoordinates: [number, number, number] | null =
-        props.worldCoordinates?.length === 3
-            ? (props.worldCoordinates as [number, number, number])
-            : props.worldCoordinates?.length === 2
-              ? ([...props.worldCoordinates, 0] as [number, number, number])
-              : null;
+    let worldCoordinates: [number, number, number] | null = null;
+    if (props.worldCoordinates?.length === 3) {
+        worldCoordinates = props.worldCoordinates as [number, number, number];
+    }
+    if (props.worldCoordinates?.length === 2) {
+        worldCoordinates = [...props.worldCoordinates, 0] as [
+            number,
+            number,
+            number,
+        ];
+    }
 
     const crosshairLayer = new CrosshairLayer({
         id: id.current,

typescript/packages/subsurface-viewer/src/hooks/useMultiViewPicking/useMultiViewPicking.ts

@@ -1,10 +1,10 @@
-import { DeckGLRef } from "@deck.gl/react";
-import {
-    MultiViewPickingInfoAssembler,
-    PickingInfoPerView,
-} from "./MultiViewPickingInfoAssembler";
 import React from "react";
-import { MapMouseEvent } from "../../SubsurfaceViewer";
+
+import { MultiViewPickingInfoAssembler } from "./MultiViewPickingInfoAssembler";
+
+import type { DeckGLRef } from "@deck.gl/react";
+import type { PickingInfoPerView } from "./MultiViewPickingInfoAssembler";
+import type { MapMouseEvent } from "../../SubsurfaceViewer";
 
 export type UseMultiViewPickingProps = {
     deckGlRef: React.RefObject<DeckGLRef | null>;