Improve UX for loading of well completions data

equinor · Aug 29, 2023 · 921462d · 921462d
1 parent f7a40a5
commit 921462d
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 8 deletions.
diff --git a/frontend/src/modules/WellCompletion/loadModule.tsx b/frontend/src/modules/WellCompletion/loadModule.tsx
@@ -5,6 +5,7 @@ import { State } from "./state";
 import { view } from "./view";
 
 const initialState: State = {
+    dataLoadingStatus: "idle",
     availableTimeSteps: null,
     plotData: null,
 };

diff --git a/frontend/src/modules/WellCompletion/settings.tsx b/frontend/src/modules/WellCompletion/settings.tsx
@@ -29,6 +29,7 @@ enum RealizationSelection {
 export const settings = ({ moduleContext, workbenchSession, workbenchServices }: ModuleFCProps<State>) => {
     const ensembleSet = useEnsembleSet(workbenchSession);
     const [availableTimeSteps, setAvailableTimeSteps] = moduleContext.useStoreState("availableTimeSteps");
+    const setDataLoadingStatus = moduleContext.useSetStoreValue("dataLoadingStatus");
     const setPlotData = moduleContext.useSetStoreValue("plotData");
 
     const [realizationSelection, setRealizationSelection] = React.useState<RealizationSelection>(
@@ -122,6 +123,19 @@ export const settings = ({ moduleContext, workbenchSession, workbenchServices }:
         [wellCompletionQuery.data, selectedTimeStepOptions]
     );
 
+    React.useEffect(
+        function handleQueryStateChange() {
+            if (wellCompletionQuery.status === "loading" && wellCompletionQuery.fetchStatus === "fetching") {
+                setDataLoadingStatus("loading");
+            } else if (wellCompletionQuery.status === "error") {
+                setDataLoadingStatus("error");
+            } else if (wellCompletionQuery.status === "success") {
+                setDataLoadingStatus("idle");
+            }
+        },
+        [wellCompletionQuery.status, wellCompletionQuery.fetchStatus]
+    );
+
     function createAndSetPlotData(
         availableTimeSteps: string[] | null,
         timeStepIndex: number | [number, number] | null,
@@ -261,11 +275,18 @@ export const settings = ({ moduleContext, workbenchSession, workbenchServices }:
                 text="Ensemble:"
                 labelClassName={syncHelper.isSynced(SyncSettingKey.ENSEMBLE) ? "bg-indigo-700 text-white" : ""}
             >
-                <SingleEnsembleSelect
-                    ensembleSet={ensembleSet}
-                    value={computedEnsembleIdent}
-                    onChange={handleEnsembleSelectionChange}
-                />
+                <>
+                    <SingleEnsembleSelect
+                        ensembleSet={ensembleSet}
+                        value={computedEnsembleIdent}
+                        onChange={handleEnsembleSelectionChange}
+                    />
+                    {wellCompletionQuery.isError && (
+                        <div className="text-red-500 text-sm">
+                            Current ensemble does not contain well completions data
+                        </div>
+                    )}
+                </>
             </Label>
             <Label text="Realization selection">
                 <RadioGroup

diff --git a/frontend/src/modules/WellCompletion/state.ts b/frontend/src/modules/WellCompletion/state.ts
@@ -1,6 +1,7 @@
 import { PlotData } from "@webviz/well-completions-plot";
 
 export type State = {
+    dataLoadingStatus: "idle" | "loading" | "error";
     plotData: PlotData | null;
     availableTimeSteps: string[] | null;
 };
diff --git a/frontend/src/modules/WellCompletion/view.tsx b/frontend/src/modules/WellCompletion/view.tsx
@@ -1,18 +1,28 @@
 import { ModuleFCProps } from "@framework/Module";
+import { CircularProgress } from "@lib/components/CircularProgress";
 import { WellCompletionsPlot } from "@webviz/well-completions-plot";
 
 import { State } from "./state";
 
 export const view = ({ moduleContext }: ModuleFCProps<State>) => {
     const plotData = moduleContext.useStoreValue("plotData");
     const availableTimeSteps = moduleContext.useStoreValue("availableTimeSteps");
+    const dataLoadingStatus = moduleContext.useStoreValue("dataLoadingStatus");
 
     return (
         <div className="w-full h-full">
-            {/* NOTE: Use ApiStateWrapper or similar to have "loading" state?
-             Note that the query is not handled here in the view, but in settings. Thus the loading state perhaps has to be set in the state? */}
             {!plotData ? (
-                <div className="w-full h-full flex justify-center items-center">No data for selected ensemble</div>
+                dataLoadingStatus === "error" ? (
+                    <div className="w-full h-full flex justify-center items-center text-red-500">
+                        Error loading well completion data for selected Ensemble and realization
+                    </div>
+                ) : dataLoadingStatus === "loading" ? (
+                    <div className="absolute left-0 right-0 w-full h-full bg-white bg-opacity-80 flex items-center justify-center z-10">
+                        <CircularProgress />
+                    </div>
+                ) : (
+                    <></>
+                )
             ) : (
                 <WellCompletionsPlot id="test_id" timeSteps={availableTimeSteps || []} plotData={plotData} />
             )}