Merge branch 'main' into implement-module-state

rubenthoms · Oct 13, 2023 · 81dece1 · 81dece1
2 parents b56e4b6 + 1fb813b
commit 81dece1
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 29 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git 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
@@ -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
@@ -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<any> {
@@ -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
@@ -20,8 +20,14 @@ export type ChannelSelectProps = {
 export const ChannelSelect: React.FC<ChannelSelectProps> = (props) => {
     const { channelKeyCategory, onChange, broadcaster, ...rest } = props;
     const [channel, setChannel] = React.useState<string>(props.initialChannel ?? "");
+    const [prevInitialChannel, setPrevInitialChannel] = React.useState<string | undefined>(props.initialChannel);
     const [channels, setChannels] = React.useState<string[]>([]);
 
+    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<ChannelSelectProps> = (props) => {
 
             if (channels.length === 0 || !channels.find((el) => el.getName() === channel)) {
                 setChannel("");
+
                 if (onChange) {
                     onChange("");
                 }
@@ -45,7 +52,7 @@ export const ChannelSelect: React.FC<ChannelSelectProps> = (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
@@ -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<BroadcastChannelKeyCategory | null>(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
@@ -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<State>) {
     const [responseChannelName, setResponseChannelName] = moduleContext.useStoreState("responseChannelName");
 
-    initialSettings?.applyToStateOnMount("responseChannelName", "string", setResponseChannelName);
+    applyInitialSettingsToState(initialSettings, "responseChannelName", "string", setResponseChannelName);
+
+    function handleResponseChannelNameChange(channelName: string) {
+        setResponseChannelName(channelName);
+    }
 
     return (
         <>
             <Label text="Data channel" key="data-channel-x-axis">
                 <ChannelSelect
-                    onChange={setResponseChannelName}
+                    onChange={handleResponseChannelNameChange}
                     channelKeyCategory={BroadcastChannelKeyCategory.Realization}
                     initialChannel={responseChannelName || undefined}
                     broadcaster={workbenchServices.getBroadcaster()}

diff --git a/frontend/src/templates/oatTimeSeries.ts b/frontend/src/templates/oatTimeSeries.ts
@@ -20,7 +20,7 @@ const template: Template = {
             syncedSettings: [SyncSettingKey.ENSEMBLE],
         },
         {
-            instanceRef: "TorandoChartInstance",
+            instanceRef: "TornadoChartInstance",
             moduleName: "TornadoChart",
             layout: {
                 relHeight: 0.5,