Replace Intersection and 3D viewer readout boxes with shared comp (#707)

Co-authored-by: Ruben Thoms <[email protected]>
Co-authored-by: Øyvind Lind-Johansen <[email protected]>
Co-authored-by: Ruben Thoms <[email protected]>

Author: 3 people

frontend/src/framework/WorkbenchServices.ts

@@ -1,13 +1,12 @@
 import React from "react";
 
-import { Viewport } from "@framework/components/EsvIntersection/esvIntersection";
-
 import { isEqual } from "lodash";
 
 import { EnsembleIdent } from "./EnsembleIdent";
 import { Workbench } from "./Workbench";
 import { InplaceVolumetricsFilter } from "./types/inplaceVolumetricsFilter";
 import { Intersection } from "./types/intersection";
+import { Viewport } from "./types/viewport";
 import { Wellbore } from "./types/wellbore";
 
 export type NavigatorTopicDefinitions = {

frontend/src/framework/components/EsvIntersection/utilityComponents/ReadoutBox.tsx

@@ -0,0 +1 @@
+export type Viewport = [number, number, number];

frontend/src/framework/types/viewport.ts

@@ -346,6 +346,7 @@ export function Select<TValue = string>(props: SelectProps<TValue>) {
 
         setCurrentFocusIndex(newCurrentKeyboardFocusIndex);
         setVirtualizationStartIndex(newVirtualizationStartIndex);
+        setSelectionAnchor(newFilteredOptions.findIndex((option) => option.value === selectedOptionValues[0]));
     }
 
     function handleFilterChange(event: React.ChangeEvent<HTMLInputElement>) {

frontend/src/lib/components/Select/select.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+import _ from "lodash";
+
+/**
+ * Deeply compares a variable with it's previous state, and returns a stable refference if the object is equivalent.
+ * Useful for ensuring stable refferences when effects or memos depends on objects/arrays from props.
+ * @param value Any variable, though this helper is only relevant for objects and arrays.
+ * @returns A stable referrence to the object, and a boolean flag showing if the ref actually changed
+ */
+export function useStableProp<T>(value: T): [prop: T, propDidChange: boolean] {
+    const [prevInternalValue, setPrevInternalValue] = React.useState<T>(value);
+
+    if (_.isEqual(value, prevInternalValue)) {
+        return [prevInternalValue, false];
+    }
+
+    setPrevInternalValue(value);
+    return [value, true];
+}