From 46088c7ee56945f491ec0dc95fd202e73af2aed4 Mon Sep 17 00:00:00 2001
From: Ruben Thoms <ruben.thoms@ceetronsolutions.com>
Date: Mon, 30 Oct 2023 22:03:41 +0100
Subject: [PATCH] Further implementation

---
 frontend/src/framework/Workbench.ts           |  2 +-
 .../internal/WorkbenchSessionPrivate.ts       |  2 --
 frontend/src/main.tsx                         |  4 +++
 .../components/filterSelect.tsx               | 33 +++++++++++++++++++
 .../useTableNameAndMetadataFilterOptions.ts   |  6 +++-
 .../InplaceVolumetricsNew/settings.tsx        | 28 ++++++----------
 frontend/src/modules/registerAllModules.ts    |  1 +
 frontend/vite.config.ts                       |  3 ++
 8 files changed, 57 insertions(+), 22 deletions(-)
 create mode 100644 frontend/src/modules/InplaceVolumetricsNew/components/filterSelect.tsx

diff --git a/frontend/src/framework/Workbench.ts b/frontend/src/framework/Workbench.ts
index 555d8fde7..9c8e6a084 100644
--- a/frontend/src/framework/Workbench.ts
+++ b/frontend/src/framework/Workbench.ts
@@ -227,8 +227,8 @@ export class Workbench {
         this._workbenchSession.setEnsembleSetLoadingState(true);
         const newEnsembleSet = await loadEnsembleSetMetadataFromBackend(queryClient, ensembleIdentsToLoad);
         console.debug("loadAndSetupEnsembleSetInSession - loading done");
-
         console.debug("loadAndSetupEnsembleSetInSession - publishing");
+        this._workbenchSession.setEnsembleSetLoadingState(false);
         return this._workbenchSession.setEnsembleSet(newEnsembleSet);
     }
 
diff --git a/frontend/src/framework/internal/WorkbenchSessionPrivate.ts b/frontend/src/framework/internal/WorkbenchSessionPrivate.ts
index d0c9fb782..5b8e01f8d 100644
--- a/frontend/src/framework/internal/WorkbenchSessionPrivate.ts
+++ b/frontend/src/framework/internal/WorkbenchSessionPrivate.ts
@@ -13,7 +13,5 @@ export class WorkbenchSessionPrivate extends WorkbenchSession {
     setEnsembleSet(newEnsembleSet: EnsembleSet): void {
         this._ensembleSet = newEnsembleSet;
         this.notifySubscribers(WorkbenchSessionEvent.EnsembleSetChanged);
-        // Whenever a new ensemble set is set, we assume that the loading state has changed to false
-        this.notifySubscribers(WorkbenchSessionEvent.EnsembleSetLoadingStateChanged, { isLoading: false });
     }
 }
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 86e1f2ce4..a935f229c 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -8,6 +8,10 @@ import { CustomQueryClientProvider } from "@framework/internal/providers/QueryCl
 import App from "./App";
 import { GlobalErrorBoundary } from "./GlobalErrorBoundary";
 
+if (import.meta.hot) {
+    import.meta.hot.accept();
+}
+
 /*
     If the `cleanStart` query parameter is given, 
     the application will clear all local storage before rendering the application.
diff --git a/frontend/src/modules/InplaceVolumetricsNew/components/filterSelect.tsx b/frontend/src/modules/InplaceVolumetricsNew/components/filterSelect.tsx
new file mode 100644
index 000000000..66421a8f9
--- /dev/null
+++ b/frontend/src/modules/InplaceVolumetricsNew/components/filterSelect.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+
+import { Label } from "@lib/components/Label";
+import { Select, SelectOption } from "@lib/components/Select";
+import { useValidState } from "@lib/hooks/useValidState";
+
+export type FilterSelectProps = {
+    name: string;
+    options: string[];
+    size: number;
+    onChange?: (value: string) => void;
+};
+
+export const FilterSelect: React.FC<FilterSelectProps> = (props) => {
+    const [value, setValue] = useValidState<string>("", props.options);
+
+    const selectOptions = props.options.map((option) => ({ value: `${option}`, label: `${option}` }));
+
+    function handleSelectionChange(values: string[]) {
+        setValue(values[0]);
+        if (props.onChange) {
+            props.onChange(values[0]);
+        }
+    }
+
+    return (
+        <Label text={props.name}>
+            <Select options={selectOptions} size={props.size} value={[value]} onChange={handleSelectionChange} />
+        </Label>
+    );
+};
+
+export default FilterSelect;
diff --git a/frontend/src/modules/InplaceVolumetricsNew/hooks/useTableNameAndMetadataFilterOptions.ts b/frontend/src/modules/InplaceVolumetricsNew/hooks/useTableNameAndMetadataFilterOptions.ts
index 75fc7fb0a..9da59b539 100644
--- a/frontend/src/modules/InplaceVolumetricsNew/hooks/useTableNameAndMetadataFilterOptions.ts
+++ b/frontend/src/modules/InplaceVolumetricsNew/hooks/useTableNameAndMetadataFilterOptions.ts
@@ -11,7 +11,7 @@ export type TableNameAndMetadataFilterOptions = {
     categories: Record<string, (string | number)[]>;
 };
 
-const fluidZoneRegExp = /^\w+_(?<fluidZone>\w+)$/;
+const fluidZoneRegExp = /^(?<response>\w+)_(?<fluidZone>\w+)$/;
 
 export function useTableNameAndMetadataFilterOptions(
     tableNamesAndMetadata: TableNamesAndMetaData
@@ -62,6 +62,10 @@ export function useTableNameAndMetadataFilterOptions(
                         if (fluidZone && !newReducedTableNamesAndMetadata.fluidZones.includes(fluidZone)) {
                             newReducedTableNamesAndMetadata.fluidZones.push(fluidZone);
                         }
+                        const response = match.groups?.response;
+                        if (response && !newReducedTableNamesAndMetadata.responses.includes(response)) {
+                            newReducedTableNamesAndMetadata.responses.push(response);
+                        }
                     }
                 }
             }
diff --git a/frontend/src/modules/InplaceVolumetricsNew/settings.tsx b/frontend/src/modules/InplaceVolumetricsNew/settings.tsx
index 86e322a0d..ead4d4497 100644
--- a/frontend/src/modules/InplaceVolumetricsNew/settings.tsx
+++ b/frontend/src/modules/InplaceVolumetricsNew/settings.tsx
@@ -10,8 +10,9 @@ import { CollapsibleGroup } from "@lib/components/CollapsibleGroup";
 import { Label } from "@lib/components/Label";
 import { Select } from "@lib/components/Select";
 import { LoadingStateWrapper } from "@lib/components/StateWrapper/stateWrapper";
-import { FilterAlt } from "@mui/icons-material";
+import { BubbleChart, FilterAlt } from "@mui/icons-material";
 
+import FilterSelect from "./components/filterSelect";
 import { useTableNameAndMetadataFilterOptions } from "./hooks/useTableNameAndMetadataFilterOptions";
 import { useTableNamesAndMetadata } from "./hooks/useTableNamesAndMetadata";
 import { State } from "./state";
@@ -31,21 +32,16 @@ export const settings = ({ workbenchSession, moduleContext }: ModuleFCProps<Stat
     }
 
     function makeCategoricalSelect(categoryName: string, options: (string | number)[]) {
-        const selectOptions = options.map((option) => ({ value: `${option}`, label: `${option}` }));
-        return (
-            <Label text={categoryName}>
-                <Select options={selectOptions} size={5} />
-            </Label>
-        );
+        const stringifiedOptions = options.map((option) => `${option}`);
+        return <FilterSelect key={categoryName} name={categoryName} options={stringifiedOptions} size={5} />;
     }
 
-    const fluidZoneOptions =
-        filterOptions?.fluidZones.map((fluidZone) => ({ value: fluidZone, label: fluidZone })) ?? [];
-    const sourceOptions = filterOptions?.sources.map((source) => ({ value: source, label: source })) ?? [];
-
     return (
         <div className="w-full h-full flex flex-col gap-4">
-            <CollapsibleGroup title="Filter" icon={<FilterAlt fontSize="small" />}>
+            <CollapsibleGroup title="Volume response" icon={<BubbleChart fontSize="small" />} expanded>
+                <FilterSelect name="Response" options={filterOptions?.responses || []} size={5} />
+            </CollapsibleGroup>
+            <CollapsibleGroup title="Filter" icon={<FilterAlt fontSize="small" />} expanded>
                 <div className="flex flex-col gap-2">
                     <Label text="Ensemble">
                         <LoadingStateWrapper isLoading={isEnsembleSetLoading} loadingComponent={<CircularProgress />}>
@@ -63,12 +59,8 @@ export const settings = ({ workbenchSession, moduleContext }: ModuleFCProps<Stat
                         loadingComponent={<CircularProgress />}
                         className="flex flex-col gap-2"
                     >
-                        <Label text="Fluid zone">
-                            <Select options={fluidZoneOptions} size={2} />
-                        </Label>
-                        <Label text="Source">
-                            <Select options={sourceOptions} size={2} />
-                        </Label>
+                        <FilterSelect name="Fluid zone" options={filterOptions?.fluidZones || []} size={2} />
+                        <FilterSelect name="Source" options={filterOptions?.sources || []} size={2} />
                         {filterOptions &&
                             Object.entries(filterOptions.categories).map(([category, values]) =>
                                 makeCategoricalSelect(category, values)
diff --git a/frontend/src/modules/registerAllModules.ts b/frontend/src/modules/registerAllModules.ts
index c003e352f..24567f7ad 100644
--- a/frontend/src/modules/registerAllModules.ts
+++ b/frontend/src/modules/registerAllModules.ts
@@ -7,6 +7,7 @@ import "./Grid3DIntersection/registerModule";
 import "./Grid3DIntersection/registerModule";
 import "./InplaceVolumetrics/registerModule";
 import "./InplaceVolumetricsNew/registerModule";
+import "./InplaceVolumetricsNew/loadModule";
 import "./Map/registerModule";
 import "./Pvt/registerModule";
 import "./SimulationTimeSeries/registerModule";
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index d85972eca..4f4f67d98 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -55,6 +55,9 @@ export default defineConfig(({ mode }) => {
                     rewrite: (path) => path.replace(/^\/api/, ""),
                 },
             },
+            watch: {
+                usePolling: true,
+            },
         },
     };
 });