Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@rubenthoms
rubenthoms committed May 7, 2024
1 parent 7468328 commit 38b15d2
Show file tree
Hide file tree
Showing 6 changed files with 96 additions and 73 deletions.
2 changes: 1 addition & 1 deletion frontend/src/framework/WorkbenchSettings.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,7 @@ export class WorkbenchSettings {
this._selectedColorPalettes = {
[ColorPaletteType.Categorical]: defaultColorPalettes[0].getId(),
[ColorPaletteType.ContinuousSequential]: defaultContinuousSequentialColorPalettes[0].getId(),
[ColorPaletteType.ContinuousDiverging]: defaultContinuousDivergingColorPalettes[0].getId(),
[ColorPaletteType.ContinuousDiverging]: defaultContinuousDivergingColorPalettes[1].getId(),
};

this._steps = {
Expand Down
113 changes: 58 additions & 55 deletions frontend/src/modules/Intersection/settings/settings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ 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 { ColorScale, ColorScaleGradientType } from "@lib/utils/ColorScale";
import { ColorScaleSelector } from "@modules/_shared/components/ColorScaleSelector/colorScaleSelector";

import { useAtom, useAtomValue, useSetAtom } from "jotai";
Expand Down Expand Up @@ -84,6 +84,7 @@ export function Settings(
const [seismicColorScale, setSeismicColorScale] =
props.settingsContext.useSettingsToViewInterfaceState("seismicColorScale");
const [showSeismic, setShowSeismic] = props.settingsContext.useSettingsToViewInterfaceState("showSeismic");
const [showGrid, setShowGrid] = props.settingsContext.useSettingsToViewInterfaceState("showGrid");

const [prevSyncedIntersection, setPrevSyncedIntersection] = React.useState<Intersection | null>(null);
const [prevSyncedEnsembles, setPrevSyncedEnsembles] = React.useState<EnsembleIdent[] | null>(null);
Expand Down Expand Up @@ -267,10 +268,12 @@ export function Settings(
setSeismicColorScale(colorScale);
}

function handleToggleShowSeismic(event: React.ChangeEvent<HTMLInputElement>, checked: boolean) {
event.preventDefault();
event.stopPropagation();
setShowSeismic(checked);
function handleToggleShowSeismic(event: React.ChangeEvent<HTMLInputElement>) {
setShowSeismic(event.target.checked);
}

function handleToggleShowGrid(event: React.ChangeEvent<HTMLInputElement>) {
setShowGrid(event.target.checked);
}

const realizationOptions = makeRealizationOptions(availableRealizations);
Expand All @@ -280,7 +283,7 @@ export function Settings(

return (
<div className="flex flex-col gap-1">
<CollapsibleGroup titleNode="Ensemble & realization" expanded>
<CollapsibleGroup title="Ensemble & realization" expanded>
<Label text="Ensemble">
<EnsembleDropdown
ensembleSet={ensembleSet}
Expand All @@ -296,8 +299,50 @@ export function Settings(
/>
</Label>
</CollapsibleGroup>
<CollapsibleGroup titleNode="Grid model" expanded>
<CollapsibleGroup title="Intersection" expanded>
<div className="flex flex-col gap-4 text-sm mb-4">
<Radio
name="intersectionType"
value={intersectionType}
checked={intersectionType === IntersectionType.WELLBORE}
onChange={() => handleIntersectionTypeChange(IntersectionType.WELLBORE)}
label={<strong>Use wellbore</strong>}
/>
<PendingWrapper isPending={wellHeaders.isFetching} errorMessage={wellHeadersErrorMessage}>
<Select
options={makeWellHeaderOptions(wellHeaders.data ?? [])}
value={selectedWellboreHeader ? [selectedWellboreHeader.uuid] : []}
onChange={handleWellHeaderSelectionChange}
size={5}
filter
debounceTimeMs={600}
disabled={intersectionType !== IntersectionType.WELLBORE}
/>
</PendingWrapper>
<div className="flex flex-col gap-2">
<Radio
name="intersectionType"
value={intersectionType}
checked={intersectionType === IntersectionType.CUSTOM_POLYLINE}
onChange={() => handleIntersectionTypeChange(IntersectionType.CUSTOM_POLYLINE)}
label={<strong>Use custom polyline</strong>}
/>
<Select
options={makeCustomIntersectionPolylineOptions(availableUserCreatedIntersectionPolylines)}
value={selectedCustomIntersectionPolylineId ? [selectedCustomIntersectionPolylineId] : []}
onChange={handleCustomPolylineSelectionChange}
size={5}
disabled={intersectionType !== IntersectionType.CUSTOM_POLYLINE || polylineAddModeActive}
placeholder="No custom polylines"
/>
</div>
</div>
</CollapsibleGroup>
<CollapsibleGroup title="Grid" expanded>
<div className="flex flex-col gap-2">
<Label position="left" text="Show grid">
<Switch checked={showGrid} onChange={handleToggleShowGrid} />
</Label>
<Label text="Grid model">
<PendingWrapper isPending={gridModelInfos.isFetching} errorMessage={gridModelErrorMessage}>
<Select
Expand Down Expand Up @@ -337,54 +382,11 @@ export function Settings(
</Label>
</div>
</CollapsibleGroup>
<CollapsibleGroup titleNode="Intersection" expanded>
<div className="flex flex-col gap-4 text-sm mb-4">
<Radio
name="intersectionType"
value={intersectionType}
checked={intersectionType === IntersectionType.WELLBORE}
onChange={() => handleIntersectionTypeChange(IntersectionType.WELLBORE)}
label={<strong>Use wellbore</strong>}
/>
<PendingWrapper isPending={wellHeaders.isFetching} errorMessage={wellHeadersErrorMessage}>
<Select
options={makeWellHeaderOptions(wellHeaders.data ?? [])}
value={selectedWellboreHeader ? [selectedWellboreHeader.uuid] : []}
onChange={handleWellHeaderSelectionChange}
size={5}
filter
debounceTimeMs={600}
disabled={intersectionType !== IntersectionType.WELLBORE}
/>
</PendingWrapper>
<div className="flex flex-col gap-2">
<Radio
name="intersectionType"
value={intersectionType}
checked={intersectionType === IntersectionType.CUSTOM_POLYLINE}
onChange={() => handleIntersectionTypeChange(IntersectionType.CUSTOM_POLYLINE)}
label={<strong>Use custom polyline</strong>}
/>
<Select
options={makeCustomIntersectionPolylineOptions(availableUserCreatedIntersectionPolylines)}
value={selectedCustomIntersectionPolylineId ? [selectedCustomIntersectionPolylineId] : []}
onChange={handleCustomPolylineSelectionChange}
size={5}
disabled={intersectionType !== IntersectionType.CUSTOM_POLYLINE || polylineAddModeActive}
placeholder="No custom polylines"
/>
</div>
</div>
</CollapsibleGroup>
<CollapsibleGroup
titleNode={
<>
<Checkbox onChange={handleToggleShowSeismic} checked={showSeismic} /> Seismic
</>
}
expanded
>
<CollapsibleGroup title="Seismic" expanded>
<div className="flex flex-col gap-2">
<Label position="left" text="Show seismic">
<Switch checked={showSeismic} onChange={handleToggleShowSeismic} />
</Label>
<Label text="Seismic data type">
<RadioGroup
options={[
Expand Down Expand Up @@ -450,12 +452,13 @@ export function Settings(
<Label text="Color scale">
<ColorScaleSelector
workbenchSettings={props.workbenchSettings}
gradientType={ColorScaleGradientType.Diverging}
onChange={handleSeismicColorScaleChange}
/>
</Label>
</div>
</CollapsibleGroup>
<CollapsibleGroup titleNode="Visualization options" expanded>
<CollapsibleGroup title="Visualization options" expanded>
<Label text="Show grid lines" position="left">
<Switch checked={showGridLines} onChange={handleShowGridLinesChange} />
</Label>
Expand Down
2 changes: 2 additions & 0 deletions frontend/src/modules/Intersection/settingsToViewInterface.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ export type SettingsToViewInterface = {
curveFittingEpsilon: number;
seismicColorScale: ColorScale | null;
showSeismic: boolean;
showGrid: boolean;
};
derivedStates: {
ensembleIdent: EnsembleIdent | null;
Expand All @@ -53,6 +54,7 @@ export const interfaceInitialization: InterfaceInitialization<SettingsToViewInte
curveFittingEpsilon: 5,
seismicColorScale: null,
showSeismic: false,
showGrid: false,
},
derivedStates: {
ensembleIdent: (get) => {
Expand Down
39 changes: 26 additions & 13 deletions frontend/src/modules/Intersection/view/components/intersection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ export type IntersectionProps = {
intersectionType: IntersectionType;
verticalScale?: number;
viewport?: Viewport;
boundingBox3d?: BoundingBox3d_api;
};

export function Intersection(props: IntersectionProps): React.ReactNode {
Expand Down Expand Up @@ -127,7 +128,7 @@ export function Intersection(props: IntersectionProps): React.ReactNode {
order: 2,
},
});
const colorScale = ColorScaleWithName.fromColorScale(props.colorScale, "Intersection");
const colorScale = ColorScaleWithName.fromColorScale(props.colorScale, "Grid");
colorScale.setRange(
props.polylineIntersectionData.min_grid_prop_value,
props.polylineIntersectionData.max_grid_prop_value
Expand Down Expand Up @@ -202,7 +203,21 @@ export function Intersection(props: IntersectionProps): React.ReactNode {
}

let newViewport: [number, number, number] = [0, 0, 2000];
if (props.viewport === undefined && props.referenceSystem) {
if (props.viewport !== undefined) {
newViewport = props.viewport;
} else if (props.referenceSystem && props.boundingBox3d) {
const firstPoint = props.referenceSystem.projectedPath[0];
const lastPoint = props.referenceSystem.projectedPath[props.referenceSystem.projectedPath.length - 1];
const xMax = Math.max(firstPoint[0], lastPoint[0]);
const xMin = Math.min(firstPoint[0], lastPoint[0]);

const yMax = props.boundingBox3d.zmax;
const yMin = props.boundingBox3d.zmin;

newViewport[0] = xMin + (xMax - xMin) / 2;
newViewport[1] = yMin + (yMax - yMin) / 2;
newViewport[2] = Math.max(xMax - xMin + 2 * props.intersectionExtensionLength, yMax - yMin) * 2;
} else if (props.referenceSystem) {
const firstPoint = props.referenceSystem.projectedPath[0];
const lastPoint = props.referenceSystem.projectedPath[props.referenceSystem.projectedPath.length - 1];
const xMax = Math.max(firstPoint[0], lastPoint[0]);
Expand All @@ -212,9 +227,7 @@ export function Intersection(props: IntersectionProps): React.ReactNode {

newViewport[0] = xMin + (xMax - xMin) / 2;
newViewport[1] = yMin + (yMax - yMin) / 2;
newViewport[2] = 2000; // Math.max(xMax - xMin, yMax - yMin) * 5;
} else {
newViewport = props.viewport ?? newViewport;
newViewport[2] = Math.max(xMax - xMin + 2 * props.intersectionExtensionLength, yMax - yMin) * 2;
}

const handleReadoutItemsChange = React.useCallback(
Expand Down Expand Up @@ -296,7 +309,7 @@ export function Intersection(props: IntersectionProps): React.ReactNode {
onVerticalScaleIncrease={handleVerticalScaleIncrease}
onVerticalScaleDecrease={handleVerticalScaleDecrease}
/>
<ColorLegendsContainer colorScales={colorScales} height={divSize.height / 2} />
<ColorLegendsContainer colorScales={colorScales} height={divSize.height - 300} />
</div>
);
}
Expand Down Expand Up @@ -330,7 +343,7 @@ function ColorLegendsContainer(props: ColorLegendsContainerProps): React.ReactNo
const nameWidth = 10;
const minHeight = 100 + 2 * offset;

const numRows = Math.floor(props.height / minHeight);
const numRows = Math.min(Math.floor(props.height / minHeight), props.colorScales.length);
const numCols = Math.ceil(props.colorScales.length / numRows);
const height = Math.max(minHeight, props.height / numRows - (numRows - 1) * legendGap);

Expand Down Expand Up @@ -359,7 +372,7 @@ function ColorLegendsContainer(props: ColorLegendsContainerProps): React.ReactNo
const markers: React.ReactNode[] = [];
markers.push(
<line
key="div-mid-point"
key="max"
x1={left + width + nameWidth + textGap}
y1={top + offset}
x2={left + width + lineWidth + nameWidth + textGap}
Expand All @@ -370,7 +383,7 @@ function ColorLegendsContainer(props: ColorLegendsContainerProps): React.ReactNo
);
markers.push(
<text
key="max"
key="max-text"
x={left + width + lineWidth + textGap + nameWidth + textGap}
y={top + offset + 3}
fontSize="10"
Expand All @@ -385,7 +398,7 @@ function ColorLegendsContainer(props: ColorLegendsContainerProps): React.ReactNo
(colorScale.getMax() - colorScale.getMin());
markers.push(
<line
key="div-mid-point"
key="mid-line"
x1={left + width + nameWidth + textGap}
y1={top + y * height + offset}
x2={left + width + lineWidth + nameWidth + textGap}
Expand All @@ -396,7 +409,7 @@ function ColorLegendsContainer(props: ColorLegendsContainerProps): React.ReactNo
);
markers.push(
<text
key="min"
key="mid"
x={left + width + lineWidth + textGap + nameWidth + textGap}
y={top + y * height + offset + 3}
fontSize="10"
Expand All @@ -410,7 +423,7 @@ function ColorLegendsContainer(props: ColorLegendsContainerProps): React.ReactNo
const value = colorScale.getMin() + (colorScale.getMax() - colorScale.getMin()) * y;
markers.push(
<line
key="div-mid-point"
key="mid-line"
x1={left + width + nameWidth + textGap}
y1={top + y * height + offset}
x2={left + width + lineWidth + nameWidth + textGap}
Expand All @@ -434,7 +447,7 @@ function ColorLegendsContainer(props: ColorLegendsContainerProps): React.ReactNo

markers.push(
<line
key="div-mid-point"
key="min-line"
x1={left + width + nameWidth + textGap}
y1={top + height + offset}
x2={left + width + lineWidth + nameWidth + textGap}
Expand Down
8 changes: 5 additions & 3 deletions frontend/src/modules/Intersection/view/view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,8 @@ export function View(

const ensembleIdent = props.viewContext.useSettingsToViewInterfaceValue("ensembleIdent");
const showSeismic = props.viewContext.useSettingsToViewInterfaceValue("showSeismic");
const showGrid = props.viewContext.useSettingsToViewInterfaceValue("showGrid");
const gridModelBoundingBox3d = props.viewContext.useSettingsToViewInterfaceValue("gridModelBoundingBox3d");
const intersectionReferenceSystem = props.viewContext.useViewAtomValue("intersectionReferenceSystemAtom");
const seismicFenceDataQuery = props.viewContext.useViewAtomValue("seismicFenceDataQueryAtom");
const wellboreHeader = useAtomValue(selectedWellboreAtom);
Expand Down Expand Up @@ -72,7 +74,6 @@ export function View(

const realization = props.viewContext.useSettingsToViewInterfaceValue("realization");
const gridModelName = props.viewContext.useSettingsToViewInterfaceValue("gridModelName");
const gridModelBoundingBox3d = props.viewContext.useSettingsToViewInterfaceValue("gridModelBoundingBox3d");
const gridModelParameterName = props.viewContext.useSettingsToViewInterfaceValue("gridModelParameterName");
const gridModelParameterDateOrInterval = props.viewContext.useSettingsToViewInterfaceValue(
"gridModelParameterDateOrInterval"
Expand Down Expand Up @@ -138,7 +139,7 @@ export function View(
props.viewContext.getInstanceIdString()
);
},
[props.workbenchServices, wellboreHeader, props.viewContext.getInstanceIdString(), props.viewContext]
[props.workbenchServices, wellboreHeader, props.viewContext]
);

const handleCameraPositionChange = React.useCallback(
Expand Down Expand Up @@ -170,7 +171,7 @@ export function View(
<div className="w-full h-full">
<Intersection
referenceSystem={intersectionReferenceSystem}
polylineIntersectionData={polylineIntersectionQuery.data ?? null}
polylineIntersectionData={showGrid ? polylineIntersectionQuery.data ?? null : null}
wellboreCasingData={wellboreCasingQuery.data ?? null}
seismicSliceImageData={showSeismic ? seismicSliceImageData : null}
gridBoundingBox3d={gridModelBoundingBox3d}
Expand All @@ -184,6 +185,7 @@ export function View(
intersectionType={intersectionType}
viewport={syncedCameraPosition ?? undefined}
verticalScale={syncedVerticalScale ?? undefined}
boundingBox3d={gridModelBoundingBox3d ?? undefined}
/>
</div>
);
Expand Down
5 changes: 4 additions & 1 deletion frontend/src/modules/_shared/components/ColorScaleSelector/colorScaleSelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { isEqual } from "lodash";

export type ColorScaleSelectorProps = {
workbenchSettings: WorkbenchSettings;
gradientType?: ColorScaleGradientType;
colorScale?: ColorScale;
onChange: (colorScale: ColorScale) => void;
};
Expand All @@ -22,7 +23,9 @@ export function ColorScaleSelector(props: ColorScaleSelectorProps): React.ReactN
const { onChange } = props;

const [colorScale, setColorScale] = React.useState<ColorScale>(
props.workbenchSettings.useContinuousColorScale({ gradientType: ColorScaleGradientType.Sequential })
props.workbenchSettings.useContinuousColorScale({
gradientType: props.gradientType ?? ColorScaleGradientType.Sequential,
})
);

const [prevColorScale, setPrevColorScale] = React.useState<ColorScale | undefined>(undefined);
Expand Down

0 comments on commit 38b15d2

Please sign in to comment.