wip

rubenthoms · Apr 30, 2024 · b4e39dd · b4e39dd
1 parent 303a5f1
commit b4e39dd
Show file tree

Hide file tree

Showing 28 changed files with 358 additions and 95 deletions.
diff --git a/frontend/src/lib/components/CollapsibleGroup/collapsibleGroup.tsx b/frontend/src/lib/components/CollapsibleGroup/collapsibleGroup.tsx
@@ -7,7 +7,7 @@ import { BaseComponent, BaseComponentProps } from "../BaseComponent";
 
 export type CollapsibleGroupProps = {
     icon?: React.ReactElement;
-    title: string;
+    titleNode: React.ReactNode;
     children: React.ReactNode;
     expanded?: boolean;
     onChange?: (expanded: boolean) => void;
@@ -39,7 +39,7 @@ export const CollapsibleGroup: React.FC<CollapsibleGroupProps> = (props) => {
                     title={expanded ? "Collapse" : "Expand"}
                 >
                     {props.icon && React.cloneElement(props.icon, { className: "w-4 h-4" })}
-                    <h3 className="text-sm font-semibold flex-grow leading-none">{props.title}</h3>
+                    <h3 className="text-sm font-semibold flex-grow leading-none">{props.titleNode}</h3>
                     {expanded ? <ExpandLess fontSize="small" /> : <ExpandMore fontSize="small" />}
                 </div>
                 <div

diff --git a/frontend/src/lib/components/Slider/slider.tsx b/frontend/src/lib/components/Slider/slider.tsx
@@ -15,7 +15,17 @@ export type SliderProps = {
 } & Omit<SliderUnstyledProps, "valueLabelFormat">;
 
 export const Slider = React.forwardRef((props: SliderProps, ref: React.ForwardedRef<HTMLDivElement>) => {
-    const { valueLabelDisplay, value: propsValue, max, min, valueLabelFormat, orientation, track, ...rest } = props;
+    const {
+        valueLabelDisplay,
+        value: propsValue,
+        max,
+        min,
+        valueLabelFormat,
+        orientation,
+        track,
+        debounceTimeMs,
+        ...rest
+    } = props;
     const debounceTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
 
     const [value, setValue] = React.useState<number | number[]>(propsValue ?? 0);
@@ -158,7 +168,7 @@ export const Slider = React.forwardRef((props: SliderProps, ref: React.Forwarded
         debounceTimerRef.current = setTimeout(() => {
             debounceTimerRef.current = null;
             props.onChange?.(event, value, activeThumb);
-        }, props.debounceTimeMs ?? 0);
+        }, debounceTimeMs ?? 0);
     }
 
     function makeLabel(): React.ReactNode {

diff --git a/frontend/src/modules/DistributionPlot/settings.tsx b/frontend/src/modules/DistributionPlot/settings.tsx
@@ -62,7 +62,7 @@ export function Settings({ settingsContext, initialSettings }: ModuleSettingsPro
 
         if (plotType === PlotType.Histogram) {
             content.push(
-                <CollapsibleGroup title="Plot settings" expanded>
+                <CollapsibleGroup titleNode="Plot settings" expanded>
                     <Label text="Number of bins" key="number-of-bins">
                         <Slider
                             value={numBins}
@@ -78,7 +78,7 @@ export function Settings({ settingsContext, initialSettings }: ModuleSettingsPro
 
         if (plotType === PlotType.BarChart) {
             content.push(
-                <CollapsibleGroup title="Plot settings" expanded>
+                <CollapsibleGroup titleNode="Plot settings" expanded>
                     <Label text="Orientation" key="orientation">
                         <RadioGroup
                             options={[
@@ -104,7 +104,7 @@ export function Settings({ settingsContext, initialSettings }: ModuleSettingsPro
 
     return (
         <div className="flex flex-col gap-2">
-            <CollapsibleGroup title="Plot type" expanded>
+            <CollapsibleGroup titleNode="Plot type" expanded>
                 <Dropdown value={plotType as string} options={plotTypes} onChange={handlePlotTypeChanged} />
             </CollapsibleGroup>
             {makeContent()}

diff --git a/frontend/src/modules/Grid3D/settings/settings.tsx b/frontend/src/modules/Grid3D/settings/settings.tsx
@@ -245,7 +245,7 @@ export function Settings(props: ModuleSettingsProps<State, SettingsToViewInterfa
 
     return (
         <div className="flex flex-col gap-1">
-            <CollapsibleGroup title="Ensemble & realization" expanded>
+            <CollapsibleGroup titleNode="Ensemble & realization" expanded>
                 <Label text="Ensemble">
                     <EnsembleDropdown
                         ensembleSet={ensembleSet}
@@ -261,7 +261,7 @@ export function Settings(props: ModuleSettingsProps<State, SettingsToViewInterfa
                     />
                 </Label>
             </CollapsibleGroup>
-            <CollapsibleGroup title="Grid model" expanded>
+            <CollapsibleGroup titleNode="Grid model" expanded>
                 <div className="flex flex-col gap-2">
                     <Label text="Grid model">
                         <PendingWrapper isPending={gridModelInfos.isFetching} errorMessage={gridModelErrorMessage}>
@@ -302,10 +302,10 @@ export function Settings(props: ModuleSettingsProps<State, SettingsToViewInterfa
                     </Label>
                 </div>
             </CollapsibleGroup>
-            <CollapsibleGroup title="Parameter color scale">
+            <CollapsibleGroup titleNode="Parameter color scale">
                 <ColorScaleSelector workbenchSettings={props.workbenchSettings} onChange={handleColorScaleChange} />
             </CollapsibleGroup>
-            <CollapsibleGroup title="Grid cell filter" expanded>
+            <CollapsibleGroup titleNode="Grid cell filter" expanded>
                 <div className="flex flex-col gap-4">
                     <GridCellIndexFilter
                         labelTitle="I filter"
@@ -333,7 +333,7 @@ export function Settings(props: ModuleSettingsProps<State, SettingsToViewInterfa
                     />
                 </div>
             </CollapsibleGroup>
-            <CollapsibleGroup title="Intersection" expanded>
+            <CollapsibleGroup titleNode="Intersection" expanded>
                 <div className="flex flex-col gap-4 text-sm mb-4">
                     <Radio
                         name="intersectionType"
@@ -392,7 +392,7 @@ export function Settings(props: ModuleSettingsProps<State, SettingsToViewInterfa
                     </div>
                 </div>
             </CollapsibleGroup>
-            <CollapsibleGroup title="Visualization options" expanded>
+            <CollapsibleGroup titleNode="Visualization options" expanded>
                 <Label text="Show grid lines" position="left">
                     <Switch checked={showGridLines} onChange={handleShowGridLinesChange} />
                 </Label>

diff --git a/frontend/src/modules/Intersection/settings/atoms/baseAtoms.ts b/frontend/src/modules/Intersection/settings/atoms/baseAtoms.ts
@@ -1,4 +1,5 @@
 import { EnsembleIdent } from "@framework/EnsembleIdent";
+import { ColorScale } from "@lib/utils/ColorScale";
 import { SeismicDataType, SeismicSurveyType } from "@modules/Intersection/typesAndEnums";
 
 import { atom } from "jotai";

diff --git a/frontend/src/modules/Intersection/settings/atoms/derivedAtoms.ts b/frontend/src/modules/Intersection/settings/atoms/derivedAtoms.ts
@@ -15,6 +15,7 @@ import {
     userSelectedRealizationAtom,
     userSelectedSeismicAttributeAtom,
     userSelectedSeismicDataTypeAtom,
+    userSelectedSeismicDateOrIntervalStringAtom,
     userSelectedSeismicSurveyTypeAtom,
 } from "./baseAtoms";
 import { gridModelInfosQueryAtom, seismicCubeMetaListQueryAtom } from "./queryAtoms";
@@ -242,7 +243,7 @@ export const availableSeismicDateOrIntervalStringsAtom = atom((get) => {
 });
 
 export const selectedSeismicDateOrIntervalStringAtom = atom((get) => {
-    const userSelectedSeismicDateOrIntervalString = get(userSelectedGridModelParameterDateOrIntervalAtom);
+    const userSelectedSeismicDateOrIntervalString = get(userSelectedSeismicDateOrIntervalStringAtom);
     const availableSeismicDateOrIntervalStrings = get(availableSeismicDateOrIntervalStringsAtom);
 
     if (

diff --git a/frontend/src/modules/Intersection/settings/settings.tsx b/frontend/src/modules/Intersection/settings/settings.tsx
@@ -8,6 +8,7 @@ import { SyncSettingKey, SyncSettingsHelper } from "@framework/SyncSettings";
 import { EnsembleDropdown } from "@framework/components/EnsembleDropdown";
 import { Intersection, IntersectionType } from "@framework/types/intersection";
 import { IntersectionPolyline } from "@framework/userCreatedItems/IntersectionPolylines";
+import { Checkbox } from "@lib/components/Checkbox";
 import { CollapsibleGroup } from "@lib/components/CollapsibleGroup";
 import { Dropdown } from "@lib/components/Dropdown";
 import { Input } from "@lib/components/Input";
@@ -16,6 +17,8 @@ import { PendingWrapper } from "@lib/components/PendingWrapper";
 import { Radio, RadioGroup } from "@lib/components/RadioGroup";
 import { Select, SelectOption } from "@lib/components/Select";
 import { Switch } from "@lib/components/Switch";
+import { ColorScale } from "@lib/utils/ColorScale";
+import { ColorScaleSelector } from "@modules/_shared/components/ColorScaleSelector/colorScaleSelector";
 
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import { isEqual } from "lodash";
@@ -78,6 +81,9 @@ export function Settings(
     const [intersectionExtensionLength, setIntersectionExtensionLength] =
         props.settingsContext.useSettingsToViewInterfaceState("intersectionExtensionLength");
     const [epsilon, setEpsilon] = props.settingsContext.useSettingsToViewInterfaceState("curveFittingEpsilon");
+    const [seismicColorScale, setSeismicColorScale] =
+        props.settingsContext.useSettingsToViewInterfaceState("seismicColorScale");
+    const [showSeismic, setShowSeismic] = props.settingsContext.useSettingsToViewInterfaceState("showSeismic");
 
     const [prevSyncedIntersection, setPrevSyncedIntersection] = React.useState<Intersection | null>(null);
     const [prevSyncedEnsembles, setPrevSyncedEnsembles] = React.useState<EnsembleIdent[] | null>(null);
@@ -257,14 +263,24 @@ export function Settings(
         setSelectedSeismicDateOrIntervalString(dateOrInterval.at(0) ?? null);
     }
 
+    function handleSeismicColorScaleChange(colorScale: ColorScale) {
+        setSeismicColorScale(colorScale);
+    }
+
+    function handleToggleShowSeismic(event: React.ChangeEvent<HTMLInputElement>, checked: boolean) {
+        event.preventDefault();
+        event.stopPropagation();
+        setShowSeismic(checked);
+    }
+
     const realizationOptions = makeRealizationOptions(availableRealizations);
     const gridModelInfo = gridModelInfos.data?.find((info) => info.grid_name === selectedGridModelName) ?? null;
     const datesOrIntervalsForSelectedParameter =
         gridModelInfo?.property_info_arr.filter((el) => el.property_name === selectedGridModelParameterName) ?? [];
 
     return (
         <div className="flex flex-col gap-1">
-            <CollapsibleGroup title="Ensemble & realization" expanded>
+            <CollapsibleGroup titleNode="Ensemble & realization" expanded>
                 <Label text="Ensemble">
                     <EnsembleDropdown
                         ensembleSet={ensembleSet}
@@ -280,7 +296,7 @@ export function Settings(
                     />
                 </Label>
             </CollapsibleGroup>
-            <CollapsibleGroup title="Grid model" expanded>
+            <CollapsibleGroup titleNode="Grid model" expanded>
                 <div className="flex flex-col gap-2">
                     <Label text="Grid model">
                         <PendingWrapper isPending={gridModelInfos.isFetching} errorMessage={gridModelErrorMessage}>
@@ -321,7 +337,7 @@ export function Settings(
                     </Label>
                 </div>
             </CollapsibleGroup>
-            <CollapsibleGroup title="Intersection" expanded>
+            <CollapsibleGroup titleNode="Intersection" expanded>
                 <div className="flex flex-col gap-4 text-sm mb-4">
                     <Radio
                         name="intersectionType"
@@ -360,7 +376,14 @@ export function Settings(
                     </div>
                 </div>
             </CollapsibleGroup>
-            <CollapsibleGroup title="Seismic" expanded>
+            <CollapsibleGroup
+                titleNode={
+                    <>
+                        <Checkbox onChange={handleToggleShowSeismic} checked={showSeismic} /> Seismic
+                    </>
+                }
+                expanded
+            >
                 <div className="flex flex-col gap-2">
                     <Label text="Seismic data type">
                         <RadioGroup
@@ -424,9 +447,15 @@ export function Settings(
                             />
                         </PendingWrapper>
                     </Label>
+                    <Label text="Color scale">
+                        <ColorScaleSelector
+                            workbenchSettings={props.workbenchSettings}
+                            onChange={handleSeismicColorScaleChange}
+                        />
+                    </Label>
                 </div>
             </CollapsibleGroup>
-            <CollapsibleGroup title="Visualization options" expanded>
+            <CollapsibleGroup titleNode="Visualization options" expanded>
                 <Label text="Show grid lines" position="left">
                     <Switch checked={showGridLines} onChange={handleShowGridLinesChange} />
                 </Label>

diff --git a/frontend/src/modules/Intersection/settingsToViewInterface.ts b/frontend/src/modules/Intersection/settingsToViewInterface.ts
@@ -2,6 +2,7 @@ import { BoundingBox3d_api } from "@api";
 import { EnsembleIdent } from "@framework/EnsembleIdent";
 import { InterfaceInitialization } from "@framework/UniDirectionalSettingsToViewInterface";
 import { IntersectionType } from "@framework/types/intersection";
+import { ColorScale } from "@lib/utils/ColorScale";
 
 import { userSelectedSeismicDataTypeAtom } from "./settings/atoms/baseAtoms";
 import {
@@ -25,6 +26,8 @@ export type SettingsToViewInterface = {
         intersectionExtensionLength: number;
         intersectionType: IntersectionType;
         curveFittingEpsilon: number;
+        seismicColorScale: ColorScale | null;
+        showSeismic: boolean;
     };
     derivedStates: {
         ensembleIdent: EnsembleIdent | null;
@@ -48,6 +51,8 @@ export const interfaceInitialization: InterfaceInitialization<SettingsToViewInte
         intersectionExtensionLength: 1000,
         intersectionType: IntersectionType.WELLBORE,
         curveFittingEpsilon: 5,
+        seismicColorScale: null,
+        showSeismic: false,
     },
     derivedStates: {
         ensembleIdent: (get) => {

diff --git a/frontend/src/modules/Intersection/sharedAtoms/sharedAtoms.ts b/frontend/src/modules/Intersection/sharedAtoms/sharedAtoms.ts
@@ -1,15 +1,9 @@
 import { EnsembleIdent } from "@framework/EnsembleIdent";
 import { EnsembleSetAtom } from "@framework/GlobalAtoms";
-import { IntersectionType } from "@framework/types/intersection";
-import { IntersectionPolylinesAtom } from "@framework/userCreatedItems/IntersectionPolylines";
 
 import { atom } from "jotai";
 
-import {
-    userSelectedCustomIntersectionPolylineIdAtom,
-    userSelectedEnsembleIdentAtom,
-    userSelectedWellboreUuidAtom,
-} from "../settings/atoms/baseAtoms";
+import { userSelectedEnsembleIdentAtom, userSelectedWellboreUuidAtom } from "../settings/atoms/baseAtoms";
 import { drilledWellboreHeadersQueryAtom } from "../settings/atoms/queryAtoms";
 
 export const selectedEnsembleIdentAtom = atom<EnsembleIdent | null>((get) => {

diff --git a/frontend/src/modules/Intersection/typesAndEnums.ts b/frontend/src/modules/Intersection/typesAndEnums.ts
@@ -1,3 +1,5 @@
+import { ColorScale } from "@lib/utils/ColorScale";
+
 export enum IntersectionType {
     CUSTOM_POLYLINE = "custom-polyline",
     WELLBORE = "wellbore",
@@ -28,3 +30,14 @@ export const SeismicSurveyTypeToStringMapping = {
     [SeismicSurveyType.THREE_D]: "3D",
     [SeismicSurveyType.FOUR_D]: "4D",
 };
+
+export type SeismicSliceImageOptions = {
+    datapoints: number[][];
+    yAxisValues: number[];
+    trajectory: number[][];
+    colorScale: ColorScale;
+};
+
+export type SeismicSliceImageData = SeismicSliceImageOptions & {
+    image: ImageBitmap | null;
+};