Started using new EsvIntersection component in StructUncertainty module

rubenthoms · May 7, 2024 · c4aee25 · c4aee25
1 parent 38b15d2
commit c4aee25
Show file tree

Hide file tree

Showing 12 changed files with 403 additions and 225 deletions.
diff --git a/frontend/src/modules/Intersection/view/components/intersection.tsx b/frontend/src/modules/Intersection/view/components/intersection.tsx
@@ -2,8 +2,6 @@ import React from "react";
 
 import { BoundingBox3d_api, WellboreCasing_api } from "@api";
 import { Casing, IntersectionReferenceSystem, getSeismicInfo, getSeismicOptions } from "@equinor/esv-intersection";
-import { Button } from "@lib/components/Button";
-import { HoldPressedIntervalCallbackButton } from "@lib/components/HoldPressedIntervalCallbackButton/holdPressedIntervalCallbackButton";
 import { useElementBoundingRect } from "@lib/hooks/useElementBoundingRect";
 import { ColorScale, ColorScaleGradientType } from "@lib/utils/ColorScale";
 import { IntersectionType, SeismicSliceImageData } from "@modules/Intersection/typesAndEnums";
@@ -14,18 +12,9 @@ import {
     LayerType,
 } from "@modules/_shared/components/EsvIntersection";
 import { Viewport } from "@modules/_shared/components/EsvIntersection/esvIntersection";
-import {
-    AdditionalInformationKey,
-    HighlightItem,
-    HighlightItemShape,
-    ReadoutItem,
-} from "@modules/_shared/components/EsvIntersection/types";
-import { getColorFromLayerData } from "@modules/_shared/components/EsvIntersection/utils/intersectionConversion";
-import {
-    getAdditionalInformationFromReadoutItem,
-    getLabelFromLayerData,
-} from "@modules/_shared/components/EsvIntersection/utils/readoutItemUtils";
-import { Add, FilterCenterFocus, Remove } from "@mui/icons-material";
+import { HighlightItem, HighlightItemShape, ReadoutItem } from "@modules/_shared/components/EsvIntersection/types";
+import { ReadoutBox } from "@modules/_shared/components/EsvIntersection/utilityComponents/ReadoutBox";
+import { Toolbar } from "@modules/_shared/components/EsvIntersection/utilityComponents/Toolbar";
 
 import { isEqual } from "lodash";
 
@@ -543,125 +532,3 @@ function GradientDef(props: GradientDefProps): React.ReactNode {
         </linearGradient>
     );
 }
-
-export type ReadoutBoxProps = {
-    readoutItems: ReadoutItem[];
-};
-
-function additionalInformationItemToReadableString(key: string, value: unknown): string {
-    switch (key) {
-        case AdditionalInformationKey.CELL_INDEX:
-            return `Cell index: ${(value as number).toFixed(0)}`;
-        case AdditionalInformationKey.PROP_VALUE:
-            return `Property value: ${(value as number).toFixed(2)}`;
-        case AdditionalInformationKey.MD:
-            return `MD: ${(value as number).toFixed(2)}`;
-        case AdditionalInformationKey.MAX:
-            return `Max: ${(value as number).toFixed(2)}`;
-        case AdditionalInformationKey.MIN:
-            return `Min: ${(value as number).toFixed(2)}`;
-        case AdditionalInformationKey.P10:
-            return `P10: ${(value as number).toFixed(2)}`;
-        case AdditionalInformationKey.P90:
-            return `P90: ${(value as number).toFixed(2)}`;
-        case AdditionalInformationKey.P50:
-            return `P50: ${(value as number).toFixed(2)}`;
-        case AdditionalInformationKey.MEAN:
-            return `Mean: ${(value as number).toFixed(2)}`;
-        case AdditionalInformationKey.SCHEMATIC_INFO:
-            return (value as string[]).join(", ");
-        case AdditionalInformationKey.X:
-            return `X: ${(value as number).toFixed(2)}`;
-        case AdditionalInformationKey.Y:
-            return `Y: ${(value as number).toFixed(2)}`;
-        default:
-            return "";
-    }
-}
-
-function makeAdditionalInformation(item: ReadoutItem): React.ReactNode {
-    const additionalInformation = getAdditionalInformationFromReadoutItem(item);
-    return Object.entries(additionalInformation).map(([key, value], index) => {
-        return (
-            <span key={index} className="block">
-                {additionalInformationItemToReadableString(key, value)}
-            </span>
-        );
-    });
-}
-
-function ReadoutBox(props: ReadoutBoxProps): React.ReactNode {
-    if (props.readoutItems.length === 0) {
-        return null;
-    }
-
-    return (
-        <div className="absolute rounded border-2 border-neutral-300 bottom-10 right-20 bg-white bg-opacity-75 p-2 flex flex-col gap-2 text-sm z-50 w-60 pointer-events-none">
-            {props.readoutItems.map((item, index) => (
-                <div key={index} className="flex items-center gap-2">
-                    <div
-                        className="rounded-full w-3 h-3"
-                        style={{ backgroundColor: getColorFromLayerData(item.layer, item.index) }}
-                    />
-                    <div>
-                        <strong>{getLabelFromLayerData(item)}</strong>
-                        <br />
-                        {makeAdditionalInformation(item)}
-                    </div>
-                </div>
-            ))}
-        </div>
-    );
-}
-
-type ToolbarProps = {
-    visible: boolean;
-    zFactor: number;
-    onFitInView: () => void;
-    onVerticalScaleIncrease: () => void;
-    onVerticalScaleDecrease: () => void;
-};
-
-function Toolbar(props: ToolbarProps): React.ReactNode {
-    function handleFitInViewClick() {
-        props.onFitInView();
-    }
-
-    function handleVerticalScaleIncrease() {
-        props.onVerticalScaleIncrease();
-    }
-
-    function handleVerticalScaleDecrease() {
-        props.onVerticalScaleDecrease();
-    }
-
-    if (!props.visible) {
-        return null;
-    }
-
-    return (
-        <div className="absolute left-0 top-0 bg-white p-1 rounded border-gray-300 border shadow z-30 text-sm flex flex-col gap-1 items-center">
-            <Button onClick={handleFitInViewClick} title="Focus top view">
-                <FilterCenterFocus fontSize="inherit" />
-            </Button>
-            <ToolBarDivider />
-            <HoldPressedIntervalCallbackButton
-                onHoldPressedIntervalCallback={handleVerticalScaleIncrease}
-                title="Increase vertical scale"
-            >
-                <Add fontSize="inherit" />
-            </HoldPressedIntervalCallbackButton>
-            <span title="Vertical scale">{props.zFactor.toFixed(2)}</span>
-            <HoldPressedIntervalCallbackButton
-                onHoldPressedIntervalCallback={handleVerticalScaleDecrease}
-                title="Decrease vertical scale"
-            >
-                <Remove fontSize="inherit" />
-            </HoldPressedIntervalCallbackButton>
-        </div>
-    );
-}
-
-function ToolBarDivider(): React.ReactNode {
-    return <div className="w-full h-[1px] bg-gray-300" />;
-}
diff --git a/frontend/src/modules/StructuralUncertaintyIntersection/components/intersectionSettings.tsx b/frontend/src/modules/StructuralUncertaintyIntersection/components/intersectionSettings.tsx
@@ -17,20 +17,11 @@ export const IntersectionSettingsSelect: React.FC<IntersectionSettingsProps> = (
             props.onChange({ ...props.intersectionSettings, extension });
         }
     };
-    const handleZScaleChange = (e: any) => {
-        const zScale = parseInt(e.target.value, 10);
-        if (zScale >= 0) {
-            props.onChange({ ...props.intersectionSettings, zScale });
-        }
-    };
     return (
         <>
             <Label text="Extension">
                 <Input type={"number"} value={props.intersectionSettings.extension} onChange={handleExtensionChange} />
             </Label>
-            <Label text="Z-scale">
-                <Input type={"number"} value={props.intersectionSettings.zScale} onChange={handleZScaleChange} />
-            </Label>
         </>
     );
 };
diff --git a/frontend/src/modules/StructuralUncertaintyIntersection/loadModule.tsx b/frontend/src/modules/StructuralUncertaintyIntersection/loadModule.tsx
@@ -2,15 +2,14 @@ import { ModuleRegistry } from "@framework/ModuleRegistry";
 
 import { Settings } from "./settings";
 import { State } from "./state";
+import { StatisticOption, VisualizationMode } from "./types";
 import { View } from "./view";
-import { VisualizationMode } from "./types";
-import { StatisticFunction_api } from "@api";
 
 const defaultState: State = {
     wellboreAddress: { uwi: "55/33-A-4", uuid: "drogon_horizontal", type: "smda" },
     SurfaceSetAddress: null,
     visualizationMode: VisualizationMode.STATISTICAL_LINES,
-    statisticFunctions: [StatisticFunction_api.MEAN],
+    statisticFunctions: [StatisticOption.MEAN, StatisticOption.MIN_MAX, StatisticOption.P10_P90, StatisticOption.P50],
     stratigraphyColorMap: {},
     intersectionSettings: {
         extension: 1000,

diff --git a/frontend/src/modules/StructuralUncertaintyIntersection/settings.tsx b/frontend/src/modules/StructuralUncertaintyIntersection/settings.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { StatisticFunction_api, SurfaceAttributeType_api } from "@api";
+import { SurfaceAttributeType_api } from "@api";
 import { EnsembleIdent } from "@framework/EnsembleIdent";
 import { ModuleSettingsProps } from "@framework/Module";
 import { useSettingsStatusWriter } from "@framework/StatusWriter";
@@ -29,6 +29,7 @@ import { RealizationsSelect } from "./components/realizationsSelect";
 import { State } from "./state";
 import {
     StatisticFunctionEnumToStringMapping,
+    StatisticOption,
     StratigraphyColorMap,
     SurfaceSetAddress,
     VisualizationMode,
@@ -208,7 +209,7 @@ export function Settings({
         syncHelper.publishValue(SyncSettingKey.WELLBORE, "global.syncValue.wellBore", newWellboreAddress);
     }
     function makeStatisticCheckboxes() {
-        return Object.values(StatisticFunction_api).map((value: StatisticFunction_api) => {
+        return Object.values(StatisticOption).map((value: StatisticOption) => {
             return (
                 <Checkbox
                     key={value}
@@ -222,7 +223,7 @@ export function Settings({
         });
     }
 
-    function handleStatisticsChange(event: React.ChangeEvent<HTMLInputElement>, statistic: StatisticFunction_api) {
+    function handleStatisticsChange(event: React.ChangeEvent<HTMLInputElement>, statistic: StatisticOption) {
         setStatisticFunctions((prev) => {
             if (event.target.checked) {
                 return prev ? [...prev, statistic] : [statistic];

diff --git a/frontend/src/modules/StructuralUncertaintyIntersection/state.ts b/frontend/src/modules/StructuralUncertaintyIntersection/state.ts
@@ -1,13 +1,12 @@
-import { StatisticFunction_api } from "@api";
 import { Wellbore } from "@framework/types/wellbore";
 
-import { IntersectionSettings, SurfaceSetAddress, VisualizationMode } from "./types";
+import { IntersectionSettings, StatisticOption, SurfaceSetAddress, VisualizationMode } from "./types";
 
 export interface State {
     wellboreAddress: Wellbore | null;
     SurfaceSetAddress: SurfaceSetAddress | null;
     visualizationMode: VisualizationMode;
     stratigraphyColorMap: { [name: string]: string };
-    statisticFunctions: StatisticFunction_api[];
+    statisticFunctions: StatisticOption[];
     intersectionSettings: IntersectionSettings;
 }
diff --git a/frontend/src/modules/StructuralUncertaintyIntersection/types.ts b/frontend/src/modules/StructuralUncertaintyIntersection/types.ts
@@ -1,5 +1,3 @@
-import { StatisticFunction_api } from "@api";
-
 export type SeismicAddress = {
     caseUuid: string;
     ensemble: string;
@@ -16,19 +14,23 @@ export type SurfaceSetAddress = {
     realizationNums: number[] | null;
 };
 
-
 export type IntersectionSettings = {
     extension: number;
     zScale: number;
 };
 
+export enum StatisticOption {
+    MEAN = "Mean",
+    MIN_MAX = "Min/Max",
+    P10_P90 = "P10/P90",
+    P50 = "P50",
+}
+
 export const StatisticFunctionEnumToStringMapping = {
-    [StatisticFunction_api.MEAN]: "Mean",
-    [StatisticFunction_api.MIN]: "Min",
-    [StatisticFunction_api.MAX]: "Max",
-    [StatisticFunction_api.P10]: "P10",
-    [StatisticFunction_api.P50]: "P50",
-    [StatisticFunction_api.P90]: "P90",
+    [StatisticOption.MEAN]: "Mean",
+    [StatisticOption.MIN_MAX]: "Min/Max",
+    [StatisticOption.P10_P90]: "P10/P90",
+    [StatisticOption.P50]: "P50",
 };
 
 export enum VisualizationMode {