feat: WLV callback to reset component to given props (#1993) (#2047)

Co-authored-by: DShamakin <[email protected]> Co-authored-by: t0oF <[email protected]> Co-authored-by: Vladimir-Kokin <[email protected]>
equinor · May 28, 2024 · 18ea7cb · 18ea7cb
1 parent 603d3a1
commit 18ea7cb
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 7 deletions.
diff --git a/typescript/packages/well-log-viewer/src/SyncLogViewer.stories.tsx b/typescript/packages/well-log-viewer/src/SyncLogViewer.stories.tsx
@@ -10,6 +10,7 @@ const wellpick = require("../../../../example-data/wellpicks.json");// eslint-di
 import { ToggleButton } from "@mui/material";
 
 import SyncLogViewer, { argTypesSyncLogViewerProp } from "./SyncLogViewer";
+import type { WellLogController } from "./components/WellLogView";
 
 const ComponentCode =
     '<SyncLogViewer id="SyncLogViewer" \r\n' +
@@ -156,10 +157,17 @@ const Template = (args) => {
     const setInfo = function (info) {
         if (infoRef.current) infoRef.current.innerHTML = info;
     };
+
     const [controller, setController] = React.useState(null); // the first WellLog
+    const [controllers, setControllers] = React.useState<WellLogController[]>(
+        []
+    ); // all WellLogs
+
     const onCreateController = React.useCallback(
         (iWellLog, controller) => {
             if (iWellLog === 0) setController(controller);
+
+            setControllers((prev) => [...prev, controller]);
         },
         [controller]
     );
@@ -175,6 +183,13 @@ const Template = (args) => {
         },
         [controller]
     );
+    const handleClick = function () {
+        for (const ctrl of controllers) {
+            if (ctrl) {
+                ctrl.setControllerDefaultZoom();
+            }
+        }
+    };
 
     return (
         <div
@@ -190,7 +205,12 @@ const Template = (args) => {
                 />
             </div>
             {/* Print info for the first WellLog */}
-            <div ref={infoRef} style={{ width: "100%", flex: 0 }}></div>
+            <div style={{ display: "flex", flexDirection: "row" }}>
+                <div ref={infoRef}></div>
+                <button onClick={handleClick} style={{ marginLeft: 10 }}>
+                    Reset
+                </button>
+            </div>
         </div>
     );
 };
@@ -472,6 +492,14 @@ const TemplateWithSelection = (args) => {
     const [showWell2, setShowWell2] = React.useState(true);
     const [showWell3, setShowWell3] = React.useState(true);
 
+    const [controllers, setControllers] = React.useState<WellLogController[]>(
+        []
+    ); // all WellLogs
+
+    const onCreateController = React.useCallback((iWellLog, controller) => {
+        setControllers((prev) => [...prev, controller]);
+    }, []);
+
     const filtered: WellLog[] = [];
     if (showWell1) {
         filtered.push(args.welllogs[0]);
@@ -482,6 +510,13 @@ const TemplateWithSelection = (args) => {
     if (showWell3) {
         filtered.push(args.welllogs[2]);
     }
+    const handleClick = function () {
+        for (const ctrl of controllers) {
+            if (ctrl) {
+                ctrl.setControllerDefaultZoom();
+            }
+        }
+    };
 
     const argsWithSelection = {
         ...args,
@@ -520,9 +555,16 @@ const TemplateWithSelection = (args) => {
                 >
                     Well 3
                 </ToggleButton>
+                <button onClick={handleClick} style={{ float: "right" }}>
+                    Reset
+                </button>
             </div>
             <div style={{ width: "100%", height: "100%", flex: 1 }}>
-                <SyncLogViewer id="SyncLogViewer" {...argsWithSelection} />
+                <SyncLogViewer
+                    id="SyncLogViewer"
+                    {...argsWithSelection}
+                    onCreateController={onCreateController}
+                />
             </div>
         </div>
     );

diff --git a/typescript/packages/well-log-viewer/src/WellLogViewer.stories.tsx b/typescript/packages/well-log-viewer/src/WellLogViewer.stories.tsx
@@ -127,12 +127,15 @@ const StoryTemplate = (args) => {
     const onContentSelection = React.useCallback(() => {
         setInfo(fillInfo(controller));
     }, [controller]);
+    const handleClick = () => {
+        if (controller) {
+            controller.setControllerDefaultZoom();
+        }
+    };
 
     return (
-        <div
-            style={{ height: "92vh", display: "flex", flexDirection: "column" }}
-        >
-            <div style={{ width: "100%", height: "100%", flex: 1 }}>
+        <div>
+            <div style={{ height: "92vh", width: "100%" }}>
                 <WellLogViewer
                     id="WellLogViewer"
                     {...args}
@@ -141,7 +144,12 @@ const StoryTemplate = (args) => {
                     onContentSelection={onContentSelection}
                 />
             </div>
-            <div ref={infoRef} style={{ width: "100%", flex: 0 }}></div>
+            <div style={{ display: "inline-flex" }}>
+                <div ref={infoRef}></div>
+                <button onClick={handleClick} style={{ marginLeft: 10 }}>
+                    Reset
+                </button>
+            </div>
         </div>
     );
 };

diff --git a/...wer/src/__image_snapshots__/welllogviewer-demo-synclogviewer--custom-layout.png b/...wer/src/__image_snapshots__/welllogviewer-demo-synclogviewer--custom-layout.png
diff --git a/...wer/src/__image_snapshots__/welllogviewer-demo-synclogviewer--discrete-logs.png b/...wer/src/__image_snapshots__/welllogviewer-demo-synclogviewer--discrete-logs.png
diff --git a/...og-viewer/src/__image_snapshots__/welllogviewer-demo-welllogviewer--default.png b/...og-viewer/src/__image_snapshots__/welllogviewer-demo-welllogviewer--default.png
diff --git a/...g-viewer/src/__image_snapshots__/welllogviewer-demo-welllogviewer--discrete.png b/...g-viewer/src/__image_snapshots__/welllogviewer-demo-welllogviewer--discrete.png
diff --git a/...viewer/src/__image_snapshots__/welllogviewer-demo-welllogviewer--horizontal.png b/...viewer/src/__image_snapshots__/welllogviewer-demo-welllogviewer--horizontal.png
diff --git a/typescript/packages/well-log-viewer/src/components/WellLogView.tsx b/typescript/packages/well-log-viewer/src/components/WellLogView.tsx
@@ -1528,6 +1528,10 @@ class WellLogView
     setControllerSelection(): void {
         if (this.props.selection) this.selectContent(this.props.selection);
     }
+    setControllerDefaultZoom(): void {
+        if (this.props.domain) this.zoomContentTo(this.props.domain);
+        else this.zoomContentTo(this.getContentBaseDomain());
+    }
 
     /**
       Display current state of track scrolling