diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 06fad83bd..c802f7539 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -13,7 +13,7 @@ "@mui/icons-material": "^5.14.9", "@tanstack/react-query": "^4.24.10", "@tanstack/react-query-devtools": "^4.24.12", - "@webviz/subsurface-viewer": "^0.0.2-alpha.9", + "@webviz/subsurface-viewer": "^0.3.1", "@webviz/well-completions-plot": "^0.0.1-alpha.1", "animate.css": "^4.1.1", "axios": "^1.3.0", @@ -3625,6 +3625,18 @@ "url": "https://opencollective.com/turf" } }, + "node_modules/@turf/clean-coords": { + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/@turf/clean-coords/-/clean-coords-6.5.0.tgz", + "integrity": "sha512-EMX7gyZz0WTH/ET7xV8MyrExywfm9qUi0/MY89yNffzGIEHuFfqwhcCqZ8O00rZIPZHUTxpmsxQSTfzJJA1CPw==", + "dependencies": { + "@turf/helpers": "^6.5.0", + "@turf/invariant": "^6.5.0" + }, + "funding": { + "url": "https://opencollective.com/turf" + } + }, "node_modules/@turf/clone": { "version": "6.5.0", "resolved": "https://registry.npmjs.org/@turf/clone/-/clone-6.5.0.tgz", @@ -3909,6 +3921,20 @@ "url": "https://opencollective.com/turf" } }, + "node_modules/@turf/simplify": { + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/@turf/simplify/-/simplify-6.5.0.tgz", + "integrity": "sha512-USas3QqffPHUY184dwQdP8qsvcVH/PWBYdXY5am7YTBACaQOMAlf6AKJs9FT8jiO6fQpxfgxuEtwmox+pBtlOg==", + "dependencies": { + "@turf/clean-coords": "^6.5.0", + "@turf/clone": "^6.5.0", + "@turf/helpers": "^6.5.0", + "@turf/meta": "^6.5.0" + }, + "funding": { + "url": "https://opencollective.com/turf" + } + }, "node_modules/@turf/transform-rotate": { "version": "6.5.0", "resolved": "https://registry.npmjs.org/@turf/transform-rotate/-/transform-rotate-6.5.0.tgz", @@ -4547,9 +4573,9 @@ } }, "node_modules/@webviz/subsurface-viewer": { - "version": "0.0.2-alpha.9", - "resolved": "https://registry.npmjs.org/@webviz/subsurface-viewer/-/subsurface-viewer-0.0.2-alpha.9.tgz", - "integrity": "sha512-IyLZneJYbfr/85MvCfKwXowle6Q236eEZGSjTnlbk1UI9VMizSTADaCUjgxVxdHz/qcGowuQsnRLCG0G7Q47hg==", + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/@webviz/subsurface-viewer/-/subsurface-viewer-0.3.1.tgz", + "integrity": "sha512-1sfL50xZIn+Jub/Xkv9kJ+d2x4rpOzj2rIIoWlV1AI4SVRhT1jseQUtrM9AOnraB53USYeZZl22T7xp94zmNVA==", "dependencies": { "@deck.gl/core": "^8.8.25", "@emerson-eps/color-tables": "^0.4.61", @@ -4557,6 +4583,7 @@ "@equinor/eds-icons": "^0.19.1", "@nebula.gl/layers": "^1.0.4", "@reduxjs/toolkit": "^1.7.2", + "@turf/simplify": "^6.5.0", "@vivaxy/png": "^1.3.0", "@webviz/wsc-common": "*", "ajv": "^7.2.1", diff --git a/frontend/package.json b/frontend/package.json index 50d30eef6..d609be2dc 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -20,7 +20,7 @@ "@mui/icons-material": "^5.14.9", "@tanstack/react-query": "^4.24.10", "@tanstack/react-query-devtools": "^4.24.12", - "@webviz/subsurface-viewer": "^0.0.2-alpha.9", + "@webviz/subsurface-viewer": "^0.3.1", "@webviz/well-completions-plot": "^0.0.1-alpha.1", "animate.css": "^4.1.1", "axios": "^1.3.0", diff --git a/frontend/src/framework/InitialSettings.ts b/frontend/src/framework/InitialSettings.ts index e7fb7e775..6f56b631b 100644 --- a/frontend/src/framework/InitialSettings.ts +++ b/frontend/src/framework/InitialSettings.ts @@ -58,17 +58,20 @@ export class InitialSettings { isSet(settingName: string, type: keyof InitialSettingsSupportedTypes): boolean { return this.get(settingName, type) !== undefined; } +} - applyToStateOnMount( - settingName: string, - type: keyof InitialSettingsSupportedTypes, - stateSetter: (value: any) => void - ): void { - React.useEffect(() => { - const setting = this.get(settingName, type); +export function applyInitialSettingsToState( + initialSettings: InitialSettings | undefined, + settingName: string, + type: keyof InitialSettingsSupportedTypes, + stateSetter: (value: any) => void +): void { + React.useEffect(() => { + if (initialSettings) { + const setting = initialSettings.get(settingName, type); if (setting !== undefined) { stateSetter(setting); } - }, []); - } + } + }, [initialSettings]); } diff --git a/frontend/src/framework/Workbench.ts b/frontend/src/framework/Workbench.ts index 6d20caf8b..ac44d0b55 100644 --- a/frontend/src/framework/Workbench.ts +++ b/frontend/src/framework/Workbench.ts @@ -17,7 +17,6 @@ import { WorkbenchSessionPrivate } from "./internal/WorkbenchSessionPrivate"; export enum WorkbenchEvents { ModuleInstancesChanged = "ModuleInstancesChanged", - FullModuleRerenderRequested = "FullModuleRerenderRequested", } export type LayoutElement = { @@ -142,9 +141,9 @@ export class Workbench { this._broadcaster.unregisterAllChannelsForModuleInstance(moduleInstance.getId()); } this._moduleInstances = []; - this._perModuleRunningInstanceNumber = {}; this._layout = []; - this.notifySubscribers(WorkbenchEvents.FullModuleRerenderRequested); + this._perModuleRunningInstanceNumber = {}; + this.notifySubscribers(WorkbenchEvents.ModuleInstancesChanged); } makeAndAddModuleInstance(moduleName: string, layout: LayoutElement): ModuleInstance { @@ -179,7 +178,6 @@ export class Workbench { setLayout(layout: LayoutElement[]): void { this._layout = layout; - this.notifySubscribers(WorkbenchEvents.FullModuleRerenderRequested); const modifiedLayout = layout.map((el) => { return { ...el, moduleInstanceId: undefined }; diff --git a/frontend/src/framework/components/ChannelSelect/channelSelect.tsx b/frontend/src/framework/components/ChannelSelect/channelSelect.tsx index 9a149080a..fff6d2adc 100644 --- a/frontend/src/framework/components/ChannelSelect/channelSelect.tsx +++ b/frontend/src/framework/components/ChannelSelect/channelSelect.tsx @@ -20,8 +20,14 @@ export type ChannelSelectProps = { export const ChannelSelect: React.FC = (props) => { const { channelKeyCategory, onChange, broadcaster, ...rest } = props; const [channel, setChannel] = React.useState(props.initialChannel ?? ""); + const [prevInitialChannel, setPrevInitialChannel] = React.useState(props.initialChannel); const [channels, setChannels] = React.useState([]); + if (prevInitialChannel !== props.initialChannel) { + setPrevInitialChannel(props.initialChannel); + setChannel(props.initialChannel ?? ""); + } + React.useEffect(() => { const handleChannelsChanged = (channels: BroadcastChannel[]) => { setChannels( @@ -36,6 +42,7 @@ export const ChannelSelect: React.FC = (props) => { if (channels.length === 0 || !channels.find((el) => el.getName() === channel)) { setChannel(""); + if (onChange) { onChange(""); } @@ -45,7 +52,7 @@ export const ChannelSelect: React.FC = (props) => { const unsubscribeFunc = broadcaster.subscribeToChannelsChanges(handleChannelsChanged); return unsubscribeFunc; - }, [channelKeyCategory, onChange, broadcaster]); + }, [channelKeyCategory, onChange, broadcaster, channel]); const handleChannelsChanged = (channel: string) => { setChannel(channel); diff --git a/frontend/src/modules/DistributionPlot/settings.tsx b/frontend/src/modules/DistributionPlot/settings.tsx index c2ab089ad..9455813e0 100644 --- a/frontend/src/modules/DistributionPlot/settings.tsx +++ b/frontend/src/modules/DistributionPlot/settings.tsx @@ -1,6 +1,7 @@ import React, { ChangeEvent } from "react"; import { BroadcastChannelKeyCategory } from "@framework/Broadcaster"; +import { applyInitialSettingsToState } from "@framework/InitialSettings"; import { ModuleFCProps } from "@framework/Module"; import { ChannelSelect } from "@framework/components/ChannelSelect"; import { Dropdown } from "@lib/components/Dropdown"; @@ -62,13 +63,13 @@ export function settings({ moduleContext, workbenchServices, initialSettings }: const [orientation, setOrientation] = moduleContext.useStoreState("orientation"); const [crossPlottingType, setCrossPlottingType] = React.useState(null); - initialSettings?.applyToStateOnMount("channelNameX", "string", setChannelNameX); - initialSettings?.applyToStateOnMount("channelNameY", "string", setChannelNameY); - initialSettings?.applyToStateOnMount("channelNameZ", "string", setChannelNameZ); - initialSettings?.applyToStateOnMount("plotType", "string", setPlotType); - initialSettings?.applyToStateOnMount("numBins", "number", setNumBins); - initialSettings?.applyToStateOnMount("orientation", "string", setOrientation); - initialSettings?.applyToStateOnMount("crossPlottingType", "string", setCrossPlottingType); + applyInitialSettingsToState(initialSettings, "channelNameX", "string", setChannelNameX); + applyInitialSettingsToState(initialSettings, "channelNameY", "string", setChannelNameY); + applyInitialSettingsToState(initialSettings, "channelNameZ", "string", setChannelNameZ); + applyInitialSettingsToState(initialSettings, "plotType", "string", setPlotType); + applyInitialSettingsToState(initialSettings, "numBins", "number", setNumBins); + applyInitialSettingsToState(initialSettings, "orientation", "string", setOrientation); + applyInitialSettingsToState(initialSettings, "crossPlottingType", "string", setCrossPlottingType); const handleChannelXChanged = (channelName: string) => { setChannelNameX(channelName); diff --git a/frontend/src/modules/TornadoChart/settings.tsx b/frontend/src/modules/TornadoChart/settings.tsx index 507badea9..0e69b5357 100644 --- a/frontend/src/modules/TornadoChart/settings.tsx +++ b/frontend/src/modules/TornadoChart/settings.tsx @@ -1,4 +1,5 @@ import { BroadcastChannelKeyCategory } from "@framework/Broadcaster"; +import { applyInitialSettingsToState } from "@framework/InitialSettings"; import { ModuleFCProps } from "@framework/Module"; import { ChannelSelect } from "@framework/components/ChannelSelect"; import { Label } from "@lib/components/Label"; @@ -8,13 +9,17 @@ import { State } from "./state"; export function settings({ moduleContext, workbenchServices, initialSettings }: ModuleFCProps) { const [responseChannelName, setResponseChannelName] = moduleContext.useStoreState("responseChannelName"); - initialSettings?.applyToStateOnMount("responseChannelName", "string", setResponseChannelName); + applyInitialSettingsToState(initialSettings, "responseChannelName", "string", setResponseChannelName); + + function handleResponseChannelNameChange(channelName: string) { + setResponseChannelName(channelName); + } return ( <>