From 49cc9266ab573ae77dc6a3dd82acf097f4a1f05c Mon Sep 17 00:00:00 2001
From: jorgenherje <jorgen.herje@ceetronsolutions.com>
Date: Mon, 4 Dec 2023 11:34:08 +0100
Subject: [PATCH 1/5] Replacing ApiStateWrapper and ApiStatesWrapper with
 QueryStateWrapper

Replace state wrappers with a single renamed wrapper which handles both single query and list of queries as prop.

For list of queries, it is possible to configure when to display error state: all queries has error, or at least one query has error.
---
 .../selectEnsemblesDialog.tsx                 |  14 +--
 .../ApiStateWrapper/apiStateWrapper.tsx       |  41 -------
 .../lib/components/ApiStateWrapper/index.ts   |   1 -
 .../ApiStatesWrapper/apiStatesWrapper.tsx     |  41 -------
 .../lib/components/ApiStatesWrapper/index.ts  |   1 -
 .../lib/components/QueryStateWrapper/index.ts |   1 +
 .../QueryStateWrapper/queryStateWrapper.tsx   |  73 ++++++++++++
 frontend/src/modules/Grid3D/settings.tsx      |  10 +-
 .../modules/Grid3DIntersection/settings.tsx   |  54 ++++-----
 .../modules/InplaceVolumetrics/settings.tsx   |   6 +-
 .../src/modules/InplaceVolumetrics/view.tsx   |   6 +-
 frontend/src/modules/Map/MapSettings.tsx      |   6 +-
 frontend/src/modules/Pvt/settings.tsx         | 105 ++++++++----------
 .../modules/SeismicIntersection/settings.tsx  |  10 +-
 .../modules/SimulationTimeSeries/settings.tsx |   6 +-
 .../SimulationTimeSeriesMatrix/settings.tsx   |   9 +-
 .../settings.tsx                              |   6 +-
 .../src/modules/SubsurfaceMap/settings.tsx    |  18 +--
 .../settings.tsx                              |  19 ++--
 19 files changed, 206 insertions(+), 221 deletions(-)
 delete mode 100644 frontend/src/lib/components/ApiStateWrapper/apiStateWrapper.tsx
 delete mode 100644 frontend/src/lib/components/ApiStateWrapper/index.ts
 delete mode 100644 frontend/src/lib/components/ApiStatesWrapper/apiStatesWrapper.tsx
 delete mode 100644 frontend/src/lib/components/ApiStatesWrapper/index.ts
 create mode 100644 frontend/src/lib/components/QueryStateWrapper/index.ts
 create mode 100644 frontend/src/lib/components/QueryStateWrapper/queryStateWrapper.tsx

diff --git a/frontend/src/framework/internal/components/SelectEnsemblesDialog/selectEnsemblesDialog.tsx b/frontend/src/framework/internal/components/SelectEnsemblesDialog/selectEnsemblesDialog.tsx
index 9de302d20..b002b414c 100644
--- a/frontend/src/framework/internal/components/SelectEnsemblesDialog/selectEnsemblesDialog.tsx
+++ b/frontend/src/framework/internal/components/SelectEnsemblesDialog/selectEnsemblesDialog.tsx
@@ -3,7 +3,6 @@ import React from "react";
 import { CaseInfo_api, EnsembleInfo_api } from "@api";
 import { apiService } from "@framework/ApiService";
 import { useAuthProvider } from "@framework/internal/providers/AuthProvider";
-import { ApiStateWrapper } from "@lib/components/ApiStateWrapper";
 import { Button } from "@lib/components/Button";
 import { CircularProgress } from "@lib/components/CircularProgress";
 import { Dialog } from "@lib/components/Dialog";
@@ -11,6 +10,7 @@ import { Dropdown } from "@lib/components/Dropdown";
 import { IconButton } from "@lib/components/IconButton";
 import { Label } from "@lib/components/Label";
 import { Overlay } from "@lib/components/Overlay";
+import { QueryStateWrapper } from "@lib/components/QueryStateWrapper";
 import { Select } from "@lib/components/Select";
 import { Switch } from "@lib/components/Switch";
 import { TableSelect, TableSelectOption } from "@lib/components/TableSelect";
@@ -261,7 +261,7 @@ export const SelectEnsemblesDialog: React.FC<SelectEnsemblesDialogProps> = (prop
                 <div className="flex gap-4 max-w-full">
                     <div className="flex flex-col gap-4 p-4 border-r bg-slate-100 h-full">
                         <Label text="Field">
-                            <ApiStateWrapper
+                            <QueryStateWrapper
                                 apiResult={fieldsQuery}
                                 errorComponent={<div className="text-red-500">Error loading fields</div>}
                                 loadingComponent={<CircularProgress />}
@@ -272,10 +272,10 @@ export const SelectEnsemblesDialog: React.FC<SelectEnsemblesDialogProps> = (prop
                                     onChange={handleFieldChanged}
                                     disabled={fieldOpts.length === 0}
                                 />
-                            </ApiStateWrapper>
+                            </QueryStateWrapper>
                         </Label>
                         <Label text="Case">
-                            <ApiStateWrapper
+                            <QueryStateWrapper
                                 apiResult={casesQuery}
                                 errorComponent={<div className="text-red-500">Error loading cases</div>}
                                 loadingComponent={<CircularProgress />}
@@ -308,10 +308,10 @@ export const SelectEnsemblesDialog: React.FC<SelectEnsemblesDialogProps> = (prop
                                     filter
                                     columnSizesInPercent={[60, 20, 20]}
                                 />
-                            </ApiStateWrapper>
+                            </QueryStateWrapper>
                         </Label>
                         <Label text="Ensemble">
-                            <ApiStateWrapper
+                            <QueryStateWrapper
                                 apiResult={ensemblesQuery}
                                 errorComponent={<div className="text-red-500">Error loading ensembles</div>}
                                 loadingComponent={<CircularProgress />}
@@ -324,7 +324,7 @@ export const SelectEnsemblesDialog: React.FC<SelectEnsemblesDialogProps> = (prop
                                     size={5}
                                     width="100%"
                                 />
-                            </ApiStateWrapper>
+                            </QueryStateWrapper>
                         </Label>
                         <div className="flex justify-end">
                             <Button
diff --git a/frontend/src/lib/components/ApiStateWrapper/apiStateWrapper.tsx b/frontend/src/lib/components/ApiStateWrapper/apiStateWrapper.tsx
deleted file mode 100644
index 1a4f68326..000000000
--- a/frontend/src/lib/components/ApiStateWrapper/apiStateWrapper.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from "react";
-
-import { resolveClassNames } from "@lib/utils/resolveClassNames";
-import { QueryObserverResult } from "@tanstack/react-query";
-
-export type ApiStateWrapperProps = {
-    apiResult: QueryObserverResult;
-    loadingComponent: React.ReactNode;
-    errorComponent: React.ReactNode;
-    className?: string;
-    style?: React.CSSProperties;
-    children: React.ReactNode;
-};
-
-export const ApiStateWrapper: React.FC<ApiStateWrapperProps> = (props: ApiStateWrapperProps) => {
-    return (
-        <div
-            className={resolveClassNames(
-                "relative rounded",
-                { "outline outline-blue-100 outline-offset-2": props.apiResult.isLoading },
-                { "outline outline-red-100 outline-offset-2": props.apiResult.isError },
-                props.className ?? ""
-            )}
-            style={props.style}
-        >
-            {props.apiResult.isLoading && (
-                <div className="absolute left-0 right-0 w-full h-full bg-white bg-opacity-80 flex items-center justify-center z-10">
-                    {props.loadingComponent}
-                </div>
-            )}
-            {props.apiResult.isError && (
-                <div className="absolute left-0 right-0 w-full h-full bg-white bg-opacity-80 flex items-center justify-center z-10">
-                    {props.errorComponent}
-                </div>
-            )}
-            {props.children}
-        </div>
-    );
-};
-
-ApiStateWrapper.displayName = "ApiStateWrapper";
diff --git a/frontend/src/lib/components/ApiStateWrapper/index.ts b/frontend/src/lib/components/ApiStateWrapper/index.ts
deleted file mode 100644
index 4f34730b9..000000000
--- a/frontend/src/lib/components/ApiStateWrapper/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { ApiStateWrapper } from "./apiStateWrapper";
diff --git a/frontend/src/lib/components/ApiStatesWrapper/apiStatesWrapper.tsx b/frontend/src/lib/components/ApiStatesWrapper/apiStatesWrapper.tsx
deleted file mode 100644
index 7d88d7898..000000000
--- a/frontend/src/lib/components/ApiStatesWrapper/apiStatesWrapper.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from "react";
-
-import { resolveClassNames } from "@lib/utils/resolveClassNames";
-import { QueryObserverResult } from "@tanstack/react-query";
-
-export type ApiStatesWrapperProps = {
-    apiResults: QueryObserverResult[];
-    loadingComponent: React.ReactNode;
-    errorComponent: React.ReactNode;
-    className?: string;
-    style?: React.CSSProperties;
-    children: React.ReactNode;
-};
-
-export const ApiStatesWrapper: React.FC<ApiStatesWrapperProps> = (props: ApiStatesWrapperProps) => {
-    return (
-        <div
-            className={resolveClassNames(
-                "relative rounded",
-                { "outline outline-blue-100 outline-offset-2": props.apiResults.some((elm) => elm.isLoading) },
-                { "outline outline-red-100 outline-offset-2": props.apiResults.some((elm) => elm.isError) },
-                props.className ?? ""
-            )}
-            style={props.style}
-        >
-            {props.apiResults.some((elm) => elm.isLoading) && (
-                <div className="absolute left-0 right-0 w-full h-full bg-white bg-opacity-80 flex items-center justify-center z-10">
-                    {props.loadingComponent}
-                </div>
-            )}
-            {props.apiResults.some((elm) => elm.isError) && (
-                <div className="absolute left-0 right-0 w-full h-full bg-white bg-opacity-80 flex items-center justify-center z-10">
-                    {props.errorComponent}
-                </div>
-            )}
-            {props.children}
-        </div>
-    );
-};
-
-ApiStatesWrapper.displayName = "ApiStatesWrapper";
diff --git a/frontend/src/lib/components/ApiStatesWrapper/index.ts b/frontend/src/lib/components/ApiStatesWrapper/index.ts
deleted file mode 100644
index f81343045..000000000
--- a/frontend/src/lib/components/ApiStatesWrapper/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { ApiStatesWrapper } from "./apiStatesWrapper";
diff --git a/frontend/src/lib/components/QueryStateWrapper/index.ts b/frontend/src/lib/components/QueryStateWrapper/index.ts
new file mode 100644
index 000000000..6eb62fba6
--- /dev/null
+++ b/frontend/src/lib/components/QueryStateWrapper/index.ts
@@ -0,0 +1 @@
+export { QueryStateWrapper, QueriesDisplayErrorCriteria as QueriesErrorCriteria } from "./queryStateWrapper";
diff --git a/frontend/src/lib/components/QueryStateWrapper/queryStateWrapper.tsx b/frontend/src/lib/components/QueryStateWrapper/queryStateWrapper.tsx
new file mode 100644
index 000000000..e677c89f7
--- /dev/null
+++ b/frontend/src/lib/components/QueryStateWrapper/queryStateWrapper.tsx
@@ -0,0 +1,73 @@
+import React from "react";
+
+import { resolveClassNames } from "@lib/utils/resolveClassNames";
+import { QueryObserverResult } from "@tanstack/react-query";
+
+// Definition of error criteria for multiple queries
+// - SOME_QUERY: If at least one query has an error, the error component is displayed
+// - EVERY_QUERY: If all queries have an error, the error component is displayed
+export enum QueriesDisplayErrorCriteria {
+    SOME_QUERY = "some_query",
+    EVERY_QUERY = "every_query",
+}
+
+// Base state wrapper props
+export type QueryStateWrapperBaseProps = {
+    loadingComponent: React.ReactNode;
+    errorComponent: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    children: React.ReactNode;
+};
+
+export type QueryStateWrapperProps = QueryStateWrapperBaseProps & {
+    apiResult: QueryObserverResult;
+};
+
+export type QueryStatesWrapperProps = QueryStateWrapperBaseProps & {
+    apiResults: QueryObserverResult[];
+    errorCriteria: QueriesDisplayErrorCriteria;
+};
+
+export const QueryStateWrapper: React.FC<QueryStateWrapperProps | QueryStatesWrapperProps> = (
+    props: QueryStateWrapperProps | QueryStatesWrapperProps
+) => {
+    let showQueryLoading = false;
+    let showQueryError = false;
+    if ("apiResult" in props) {
+        showQueryLoading = props.apiResult.isLoading;
+        showQueryError = props.apiResult.isError;
+    } else {
+        showQueryLoading = props.apiResults.some((elm) => elm.isLoading);
+        if (props.apiResults.length > 0) {
+            showQueryError =
+                props.errorCriteria === QueriesDisplayErrorCriteria.SOME_QUERY
+                    ? props.apiResults.some((elm) => elm.isError)
+                    : props.apiResults.every((elm) => elm.isError);
+        }
+    }
+
+    return (
+        <div
+            className={resolveClassNames(
+                "relative rounded",
+                { "outline outline-blue-100 outline-offset-2": showQueryLoading },
+                { "outline outline-red-100 outline-offset-2": showQueryError },
+                props.className ?? ""
+            )}
+            style={props.style}
+        >
+            {showQueryLoading && (
+                <div className="absolute left-0 right-0 w-full h-full bg-white bg-opacity-80 flex items-center justify-center z-10">
+                    {props.loadingComponent}
+                </div>
+            )}
+            {showQueryError && (
+                <div className="absolute left-0 right-0 w-full h-full bg-white bg-opacity-80 flex items-center justify-center z-10">
+                    {props.errorComponent}
+                </div>
+            )}
+            {props.children}
+        </div>
+    );
+};
diff --git a/frontend/src/modules/Grid3D/settings.tsx b/frontend/src/modules/Grid3D/settings.tsx
index a59e790ad..68180b595 100644
--- a/frontend/src/modules/Grid3D/settings.tsx
+++ b/frontend/src/modules/Grid3D/settings.tsx
@@ -5,12 +5,12 @@ import { ModuleFCProps } from "@framework/Module";
 import { SyncSettingKey, SyncSettingsHelper } from "@framework/SyncSettings";
 import { useEnsembleSet } from "@framework/WorkbenchSession";
 import { fixupEnsembleIdent, maybeAssignFirstSyncedEnsemble } from "@framework/utils/ensembleUiHelpers";
-import { ApiStateWrapper } from "@lib/components/ApiStateWrapper";
 import { Button } from "@lib/components/Button";
 import { Checkbox } from "@lib/components/Checkbox";
 import { CircularProgress } from "@lib/components/CircularProgress";
 import { CollapsibleGroup } from "@lib/components/CollapsibleGroup";
 import { Label } from "@lib/components/Label";
+import { QueryStateWrapper } from "@lib/components/QueryStateWrapper";
 import { Select, SelectOption } from "@lib/components/Select";
 import { useWellHeadersQuery } from "@modules/_shared/WellBore/queryHooks";
 
@@ -110,7 +110,7 @@ export function settings({ moduleContext, workbenchServices, workbenchSession }:
                 {"(Select multiple realizations)"}
             </CollapsibleGroup>
             <CollapsibleGroup expanded={true} title="Grid data">
-                <ApiStateWrapper
+                <QueryStateWrapper
                     apiResult={gridNamesQuery}
                     errorComponent={"Error loading grid models"}
                     loadingComponent={<CircularProgress />}
@@ -134,10 +134,10 @@ export function settings({ moduleContext, workbenchServices, workbenchSession }:
                             size={5}
                         />
                     </Label>
-                </ApiStateWrapper>
+                </QueryStateWrapper>
             </CollapsibleGroup>
             <CollapsibleGroup expanded={true} title="Well data">
-                <ApiStateWrapper
+                <QueryStateWrapper
                     apiResult={wellHeadersQuery}
                     errorComponent={"Error loading wells"}
                     loadingComponent={<CircularProgress />}
@@ -167,7 +167,7 @@ export function settings({ moduleContext, workbenchServices, workbenchSession }:
                             />
                         </>
                     </Label>
-                </ApiStateWrapper>
+                </QueryStateWrapper>
             </CollapsibleGroup>
         </div>
     );
diff --git a/frontend/src/modules/Grid3DIntersection/settings.tsx b/frontend/src/modules/Grid3DIntersection/settings.tsx
index c7541d3b5..44224dda4 100644
--- a/frontend/src/modules/Grid3DIntersection/settings.tsx
+++ b/frontend/src/modules/Grid3DIntersection/settings.tsx
@@ -2,14 +2,15 @@ import React, { useEffect } from "react";
 
 import { ModuleFCProps } from "@framework/Module";
 import { useFirstEnsembleInEnsembleSet } from "@framework/WorkbenchSession";
-import { ApiStateWrapper } from "@lib/components/ApiStateWrapper";
-import { useGridModelNames, useGridParameterNames } from "./queryHooks";
-import { CircularProgress } from "@lib/components/CircularProgress";
 import { Checkbox } from "@lib/components/Checkbox";
+import { CircularProgress } from "@lib/components/CircularProgress";
 import { Label } from "@lib/components/Label";
+import { QueryStateWrapper } from "@lib/components/QueryStateWrapper";
 import { Select, SelectOption } from "@lib/components/Select";
 
+import { useGridModelNames, useGridParameterNames } from "./queryHooks";
 import state from "./state";
+
 //-----------------------------------------------------------------------------------------------------------
 export function settings({ moduleContext, workbenchSession }: ModuleFCProps<state>) {
     // From Workbench
@@ -26,36 +27,37 @@ export function settings({ moduleContext, workbenchSession }: ModuleFCProps<stat
     const firstEnsembleName = firstEnsemble?.getEnsembleName() ?? null;
     const gridNamesQuery = useGridModelNames(firstCaseUuid, firstEnsembleName);
     const parameterNamesQuery = useGridParameterNames(firstCaseUuid, firstEnsembleName, gridName);
- 
+
     // Handle Linked query
     useEffect(() => {
         if (parameterNamesQuery.data) {
-            if (gridName && parameterNamesQuery.data.find(name => name === parameterName)) {
+            if (gridName && parameterNamesQuery.data.find((name) => name === parameterName)) {
                 // New grid has same parameter
             } else {
                 // New grid has different parameter. Set to first
-                setParameterName(parameterNamesQuery.data[0])
+                setParameterName(parameterNamesQuery.data[0]);
             }
         }
-    }, [parameterNamesQuery.data, parameterName])
+    }, [parameterNamesQuery.data, parameterName]);
 
     // If no grid names, stop here
-    if (!gridNamesQuery.data) { return (<div>Select case: upscaled_grids_realistic_no_unc</div>) }
-
-    const parameterNames = parameterNamesQuery.data ? parameterNamesQuery.data : []
-    const allRealizations: string[] = firstEnsemble ? firstEnsemble.getRealizations().map(real => JSON.stringify(real)) : []
+    if (!gridNamesQuery.data) {
+        return <div>Select case: upscaled_grids_realistic_no_unc</div>;
+    }
 
+    const parameterNames = parameterNamesQuery.data ? parameterNamesQuery.data : [];
+    const allRealizations: string[] = firstEnsemble
+        ? firstEnsemble.getRealizations().map((real) => JSON.stringify(real))
+        : [];
 
     return (
         <div>
-            <ApiStateWrapper
+            <QueryStateWrapper
                 apiResult={gridNamesQuery}
                 errorComponent={"Error loading vector names"}
                 loadingComponent={<CircularProgress />}
             >
-                <Label
-                    text="Grid model"
-                >
+                <Label text="Grid model">
                     <Select
                         options={stringToOptions(gridNamesQuery.data)}
                         value={[gridName || gridNamesQuery.data[0]]}
@@ -65,24 +67,19 @@ export function settings({ moduleContext, workbenchSession }: ModuleFCProps<stat
                     />
                 </Label>
 
-                <Label
-                    text="Grid parameter"
-                >
+                <Label text="Grid parameter">
                     <Select
                         options={stringToOptions(parameterNames || [])}
                         value={[parameterName || parameterNames[0]]}
                         onChange={(pnames) => setParameterName(pnames[0])}
                         filter={true}
                         size={5}
-
                     />
                 </Label>
 
-                <Label
-                    text="Realizations"
-                >
+                <Label text="Realizations">
                     <Select
-                        options={stringToOptions(allRealizations as any || [])}
+                        options={stringToOptions((allRealizations as any) || [])}
                         value={realizations ? realizations : [allRealizations[0]]}
                         onChange={(reals) => setRealizations(reals)}
                         filter={true}
@@ -90,14 +87,17 @@ export function settings({ moduleContext, workbenchSession }: ModuleFCProps<stat
                         multiple={useStatistics}
                     />
                 </Label>
-                <Checkbox label="Show mean parameter" checked={useStatistics} onChange={(event: React.ChangeEvent<HTMLInputElement>) => setUseStatistics(event.target.checked)} />
+                <Checkbox
+                    label="Show mean parameter"
+                    checked={useStatistics}
+                    onChange={(event: React.ChangeEvent<HTMLInputElement>) => setUseStatistics(event.target.checked)}
+                />
                 {"(Select multiple realizations)"}
-
-            </ApiStateWrapper>
+            </QueryStateWrapper>
         </div>
     );
 }
 
 const stringToOptions = (strings: string[]): SelectOption[] => {
     return strings.map((string) => ({ label: string, value: string }));
-}
\ No newline at end of file
+};
diff --git a/frontend/src/modules/InplaceVolumetrics/settings.tsx b/frontend/src/modules/InplaceVolumetrics/settings.tsx
index 93e9c8922..dadec0a0b 100644
--- a/frontend/src/modules/InplaceVolumetrics/settings.tsx
+++ b/frontend/src/modules/InplaceVolumetrics/settings.tsx
@@ -6,10 +6,10 @@ import { ModuleFCProps } from "@framework/Module";
 import { useEnsembleSet } from "@framework/WorkbenchSession";
 import { SingleEnsembleSelect } from "@framework/components/SingleEnsembleSelect";
 import { fixupEnsembleIdent } from "@framework/utils/ensembleUiHelpers";
-import { ApiStateWrapper } from "@lib/components/ApiStateWrapper/apiStateWrapper";
 import { CircularProgress } from "@lib/components/CircularProgress";
 import { Dropdown } from "@lib/components/Dropdown";
 import { Label } from "@lib/components/Label";
+import { QueryStateWrapper } from "@lib/components/QueryStateWrapper";
 import { Select } from "@lib/components/Select";
 import { UseQueryResult } from "@tanstack/react-query";
 
@@ -174,7 +174,7 @@ export function settings({ moduleContext, workbenchSession }: ModuleFCProps<Stat
                     onChange={handleEnsembleSelectionChange}
                 />
             </Label>
-            <ApiStateWrapper
+            <QueryStateWrapper
                 apiResult={tableDescriptionsQuery}
                 loadingComponent={<CircularProgress />}
                 errorComponent={"Could not load table descriptions"}
@@ -214,7 +214,7 @@ export function settings({ moduleContext, workbenchSession }: ModuleFCProps<Stat
                         </Label>
                     );
                 })}
-            </ApiStateWrapper>
+            </QueryStateWrapper>
         </>
     );
 }
diff --git a/frontend/src/modules/InplaceVolumetrics/view.tsx b/frontend/src/modules/InplaceVolumetrics/view.tsx
index fb491b3dd..f1ce4a28e 100644
--- a/frontend/src/modules/InplaceVolumetrics/view.tsx
+++ b/frontend/src/modules/InplaceVolumetrics/view.tsx
@@ -5,8 +5,8 @@ import { Body_get_realizations_response_api } from "@api";
 import { BroadcastChannelMeta } from "@framework/Broadcaster";
 import { ModuleFCProps } from "@framework/Module";
 import { useSubscribedValue } from "@framework/WorkbenchServices";
-import { ApiStateWrapper } from "@lib/components/ApiStateWrapper";
 import { CircularProgress } from "@lib/components/CircularProgress";
+import { QueryStateWrapper } from "@lib/components/QueryStateWrapper";
 import { useElementSize } from "@lib/hooks/useElementSize";
 
 import { Layout, PlotData, PlotHoverEvent } from "plotly.js";
@@ -115,7 +115,7 @@ export const view = (props: ModuleFCProps<State>) => {
     };
     return (
         <div className="w-full h-full" ref={wrapperDivRef}>
-            <ApiStateWrapper
+            <QueryStateWrapper
                 apiResult={realizationsResponseQuery}
                 loadingComponent={<CircularProgress />}
                 errorComponent={"feil"}
@@ -127,7 +127,7 @@ export const view = (props: ModuleFCProps<State>) => {
                     onHover={handleHover}
                     onUnhover={handleUnHover}
                 />
-            </ApiStateWrapper>
+            </QueryStateWrapper>
         </div>
     );
 };
diff --git a/frontend/src/modules/Map/MapSettings.tsx b/frontend/src/modules/Map/MapSettings.tsx
index bcf8d71fb..7a6b0cd31 100644
--- a/frontend/src/modules/Map/MapSettings.tsx
+++ b/frontend/src/modules/Map/MapSettings.tsx
@@ -8,11 +8,11 @@ import { SyncSettingKey, SyncSettingsHelper } from "@framework/SyncSettings";
 import { useEnsembleSet } from "@framework/WorkbenchSession";
 import { SingleEnsembleSelect } from "@framework/components/SingleEnsembleSelect";
 import { fixupEnsembleIdent, maybeAssignFirstSyncedEnsemble } from "@framework/utils/ensembleUiHelpers";
-import { ApiStateWrapper } from "@lib/components/ApiStateWrapper";
 import { Checkbox } from "@lib/components/Checkbox";
 import { CircularProgress } from "@lib/components/CircularProgress";
 import { Input } from "@lib/components/Input";
 import { Label } from "@lib/components/Label";
+import { QueryStateWrapper } from "@lib/components/QueryStateWrapper";
 import { RadioGroup } from "@lib/components/RadioGroup";
 import { Select, SelectOption } from "@lib/components/Select";
 import {
@@ -243,7 +243,7 @@ export function MapSettings(props: ModuleFCProps<MapState>) {
                 </div>
             </Label>
 
-            <ApiStateWrapper
+            <QueryStateWrapper
                 apiResult={surfaceDirectoryQuery}
                 errorComponent={"Error loading surface directory"}
                 loadingComponent={<CircularProgress />}
@@ -280,7 +280,7 @@ export function MapSettings(props: ModuleFCProps<MapState>) {
                         />
                     </Label>
                 )}
-            </ApiStateWrapper>
+            </QueryStateWrapper>
             <AggregationDropdown
                 selectedAggregation={aggregation}
                 onAggregationSelectionChange={handleAggregationChanged}
diff --git a/frontend/src/modules/Pvt/settings.tsx b/frontend/src/modules/Pvt/settings.tsx
index 34395fcf4..5ea18f756 100644
--- a/frontend/src/modules/Pvt/settings.tsx
+++ b/frontend/src/modules/Pvt/settings.tsx
@@ -1,31 +1,26 @@
 import React, { useEffect } from "react";
+
 import { ModuleFCProps } from "@framework/Module";
 import { useFirstEnsembleInEnsembleSet } from "@framework/WorkbenchSession";
-import { ApiStateWrapper } from "@lib/components/ApiStateWrapper";
-
-import { usePvtDataQuery } from "./queryHooks";
-
 import { Checkbox } from "@lib/components/Checkbox";
-import { Label } from "@lib/components/Label";
 import { Dropdown, DropdownOption } from "@lib/components/Dropdown";
+import { Label } from "@lib/components/Label";
+import { QueryStateWrapper } from "@lib/components/QueryStateWrapper";
 
+import { PlotOptionType, getAvailablePlotsForPhase } from "./pvtPlotDataAccessor";
+import { PvtQueryDataAccessor } from "./pvtQueryDataAccessor";
+import { usePvtDataQuery } from "./queryHooks";
 import state, { PvtPlotData } from "./state";
 
-import { PvtQueryDataAccessor } from "./pvtQueryDataAccessor";
-import { getAvailablePlotsForPhase, PlotOptionType } from "./pvtPlotDataAccessor";
 //-----------------------------------------------------------------------------------------------------------
 
-
-
-
-
 //Helpers to populate dropdowns
 const stringToOptions = (strings: string[]): DropdownOption[] => {
     return strings.map((string) => ({ label: string, value: string }));
-}
+};
 const numberToOptions = (numbers: number[]): DropdownOption[] => {
     return numbers.map((number) => ({ label: number.toString(), value: number.toString() }));
-}
+};
 
 export function settings({ moduleContext, workbenchSession }: ModuleFCProps<state>) {
     //Just using the first ensemble for now
@@ -46,46 +41,47 @@ export function settings({ moduleContext, workbenchSession }: ModuleFCProps<stat
     const [availablePlots, setAvailablePlots] = React.useState<PlotOptionType[]>([]);
 
     // Queries
-    const pvtDataQuery = usePvtDataQuery(firstEnsemble?.getCaseUuid() ?? null, firstEnsemble?.getEnsembleName() ?? null, activeRealization);
-
+    const pvtDataQuery = usePvtDataQuery(
+        firstEnsemble?.getCaseUuid() ?? null,
+        firstEnsemble?.getEnsembleName() ?? null,
+        activeRealization
+    );
 
     // effect triggered by changing pvtName(phase). Updates available pvtNums, available plots and check if currently selected plots are still valid
     useEffect(() => {
         if (pvtDataQuery.data && activePvtName) {
             // Find the data for the selected phase
-            const pvtDataAccessor = new PvtQueryDataAccessor(pvtDataQuery.data)
+            const pvtDataAccessor = new PvtQueryDataAccessor(pvtDataQuery.data);
 
             // const pvtNameData = pvtDataQuery.data.filter((pvtData) => pvtData.name === activePvtName)[0]
-            const uniquePvtNums = pvtDataAccessor.getPvtNums(activePvtName)
+            const uniquePvtNums = pvtDataAccessor.getPvtNums(activePvtName);
 
             // Set available pvtNums and set activePvtNum to first available pvtNum if the current one is not available
-            setAvailablePvtNums(uniquePvtNums)
-            let newActivePvtNum = activePvtNum
+            setAvailablePvtNums(uniquePvtNums);
+            let newActivePvtNum = activePvtNum;
             if (!newActivePvtNum || !uniquePvtNums.includes(newActivePvtNum)) {
-                newActivePvtNum = uniquePvtNums[0]
+                newActivePvtNum = uniquePvtNums[0];
             }
 
-
             // Set available plots
-            const currentPvtData = pvtDataAccessor.getPvtData(activePvtName, newActivePvtNum)
+            const currentPvtData = pvtDataAccessor.getPvtData(activePvtName, newActivePvtNum);
 
-            const newAvailablePlots = getAvailablePlotsForPhase(currentPvtData.phase)
+            const newAvailablePlots = getAvailablePlotsForPhase(currentPvtData.phase);
             // Check if currently selected plots are still valid. Either filter current selections or set to all available plots if none are selected/valid
-            let newAvailablePlotValues = newAvailablePlots.map((plot) => plot.value)
+            let newAvailablePlotValues = newAvailablePlots.map((plot) => plot.value);
 
-            if (activePvtPlots && !activePvtPlots.every(value => newAvailablePlotValues.includes(value))) {
-                const intersectedPlotValues = activePvtPlots.filter(value => newAvailablePlotValues.includes(value));
+            if (activePvtPlots && !activePvtPlots.every((value) => newAvailablePlotValues.includes(value))) {
+                const intersectedPlotValues = activePvtPlots.filter((value) => newAvailablePlotValues.includes(value));
 
                 if (intersectedPlotValues.length >= 0) {
-                    newAvailablePlotValues = intersectedPlotValues
+                    newAvailablePlotValues = intersectedPlotValues;
                 }
             }
-            setActivePvtNum(newActivePvtNum)
-            setAvailablePlots(newAvailablePlots)
-            setActivePvtPlots(newAvailablePlotValues)
-
+            setActivePvtNum(newActivePvtNum);
+            setAvailablePlots(newAvailablePlots);
+            setActivePvtPlots(newAvailablePlotValues);
         }
-    }, [pvtDataQuery.data, activePvtName])
+    }, [pvtDataQuery.data, activePvtName]);
 
     // effect triggered by changing any setting. Updates list of plot data sent to view
     // Split up? Have in view instead?
@@ -94,44 +90,41 @@ export function settings({ moduleContext, workbenchSession }: ModuleFCProps<stat
             // Find the data for the selected phase
             // const currentPvtData = pvtDataQuery.data.filter((pvtData) => (pvtData.name === activePvtName) && (pvtData.pvtnum === activePvtNum))[0]
 
-            const pvtPlotData: PvtPlotData[] = []
+            const pvtPlotData: PvtPlotData[] = [];
 
             // Loop through each of the active visualizations and add the relevant data for the y-axis to the plot data
             for (const pvtPlot of activePvtPlots) {
-                pvtPlotData.push({ pvtNum: activePvtNum, pvtName: activePvtName, pvtPlot: pvtPlot })
+                pvtPlotData.push({ pvtNum: activePvtNum, pvtName: activePvtName, pvtPlot: pvtPlot });
             }
-            setPvtPlotDataSet(pvtPlotData)
+            setPvtPlotDataSet(pvtPlotData);
         }
-    },
-        [activePvtNum, activePvtName, activePvtPlots, pvtDataQuery.data]
-    )
+    }, [activePvtNum, activePvtName, activePvtPlots, pvtDataQuery.data]);
 
     // Handle failed query
-    if (!pvtDataQuery.data) { return (<div>No pvt data</div>) }
-
+    if (!pvtDataQuery.data) {
+        return <div>No pvt data</div>;
+    }
 
     // Get available PvtNames from query
     // Guess "new" will trigger a re-render?
-    const pvtDataAccessor = new PvtQueryDataAccessor(pvtDataQuery.data)
-
-    const availablePvtNames = pvtDataAccessor.getPvtNames()
+    const pvtDataAccessor = new PvtQueryDataAccessor(pvtDataQuery.data);
 
+    const availablePvtNames = pvtDataAccessor.getPvtNames();
 
     // Handle toggling of visualization checkboxes
     const handleToggledVisualization = (checked: boolean, triggeredPlot: string) => {
         if (!activePvtPlots) {
-            return
+            return;
         }
         if (checked) {
-            setActivePvtPlots([...activePvtPlots, triggeredPlot])
-        }
-        else {
-            setActivePvtPlots(activePvtPlots.filter((plot) => plot !== triggeredPlot))
+            setActivePvtPlots([...activePvtPlots, triggeredPlot]);
+        } else {
+            setActivePvtPlots(activePvtPlots.filter((plot) => plot !== triggeredPlot));
         }
-    }
+    };
     return (
         <div>
-            <ApiStateWrapper
+            <QueryStateWrapper
                 apiResult={pvtDataQuery}
                 errorComponent={"Error loading pvt data"}
                 loadingComponent={"Error loading pvt data"}
@@ -163,18 +156,16 @@ export function settings({ moduleContext, workbenchSession }: ModuleFCProps<stat
                 <Label text="Visualization">
                     <>
                         {availablePlots?.map((plot) => (
-                            <Checkbox key={plot.value}
+                            <Checkbox
+                                key={plot.value}
                                 label={plot.value}
                                 checked={activePvtPlots ? activePvtPlots.includes(plot.value) : false}
                                 onChange={(_, checked) => handleToggledVisualization(checked, plot.value)}
-
-                            />))
-
-                        }
+                            />
+                        ))}
                     </>
                 </Label>
-            </ApiStateWrapper>
+            </QueryStateWrapper>
         </div>
     );
 }
-
diff --git a/frontend/src/modules/SeismicIntersection/settings.tsx b/frontend/src/modules/SeismicIntersection/settings.tsx
index 792ddcd4d..a890706a0 100644
--- a/frontend/src/modules/SeismicIntersection/settings.tsx
+++ b/frontend/src/modules/SeismicIntersection/settings.tsx
@@ -8,11 +8,11 @@ import { Wellbore } from "@framework/Wellbore";
 import { useEnsembleSet } from "@framework/WorkbenchSession";
 import { SingleEnsembleSelect } from "@framework/components/SingleEnsembleSelect";
 import { fixupEnsembleIdent, maybeAssignFirstSyncedEnsemble } from "@framework/utils/ensembleUiHelpers";
-import { ApiStateWrapper } from "@lib/components/ApiStateWrapper";
 import { CircularProgress } from "@lib/components/CircularProgress";
 import { CollapsibleGroup } from "@lib/components/CollapsibleGroup";
 import { Input } from "@lib/components/Input";
 import { Label } from "@lib/components/Label";
+import { QueryStateWrapper } from "@lib/components/QueryStateWrapper";
 import { RadioGroup } from "@lib/components/RadioGroup";
 import { Select, SelectOption } from "@lib/components/Select";
 import { useValidState } from "@lib/hooks/useValidState";
@@ -241,7 +241,7 @@ export function settings({ moduleContext, workbenchSession, workbenchServices }:
                 </div>
             </CollapsibleGroup>
             <CollapsibleGroup expanded={true} title="Well trajectory">
-                <ApiStateWrapper
+                <QueryStateWrapper
                     apiResult={wellHeadersQuery}
                     errorComponent={"Error loading wells"}
                     loadingComponent={<CircularProgress />}
@@ -260,7 +260,7 @@ export function settings({ moduleContext, workbenchSession, workbenchServices }:
                             multiple={true}
                         />
                     </Label>
-                </ApiStateWrapper>
+                </QueryStateWrapper>
             </CollapsibleGroup>
             <CollapsibleGroup title="Seismic specifications">
                 <div className="flex flex-col gap-4 overflow-y-auto">
@@ -294,7 +294,7 @@ export function settings({ moduleContext, workbenchSession, workbenchServices }:
                             onChange={(_, value: string | number) => setSurveyTimeType(value as TimeType)}
                         />
                     </Label>
-                    <ApiStateWrapper
+                    <QueryStateWrapper
                         apiResult={seismicCubeMetaListQuery}
                         errorComponent={"Error loading seismic directory"}
                         loadingComponent={<CircularProgress />}
@@ -317,7 +317,7 @@ export function settings({ moduleContext, workbenchSession, workbenchServices }:
                                 />
                             </Label>
                         </div>
-                    </ApiStateWrapper>
+                    </QueryStateWrapper>
                 </div>
             </CollapsibleGroup>
             <CollapsibleGroup title="Intersection Settings" expanded={false}>
diff --git a/frontend/src/modules/SimulationTimeSeries/settings.tsx b/frontend/src/modules/SimulationTimeSeries/settings.tsx
index f04fc8247..72680c145 100644
--- a/frontend/src/modules/SimulationTimeSeries/settings.tsx
+++ b/frontend/src/modules/SimulationTimeSeries/settings.tsx
@@ -7,12 +7,12 @@ import { SyncSettingKey, SyncSettingsHelper } from "@framework/SyncSettings";
 import { useEnsembleSet } from "@framework/WorkbenchSession";
 import { SingleEnsembleSelect } from "@framework/components/SingleEnsembleSelect";
 import { fixupEnsembleIdent, maybeAssignFirstSyncedEnsemble } from "@framework/utils/ensembleUiHelpers";
-import { ApiStateWrapper } from "@lib/components/ApiStateWrapper";
 import { Checkbox } from "@lib/components/Checkbox";
 import { CircularProgress } from "@lib/components/CircularProgress";
 import { Dropdown, DropdownOption } from "@lib/components/Dropdown";
 import { Input } from "@lib/components/Input";
 import { Label } from "@lib/components/Label";
+import { QueryStateWrapper } from "@lib/components/QueryStateWrapper";
 import { Select, SelectOption } from "@lib/components/Select";
 
 import { sortBy, sortedUniq } from "lodash";
@@ -144,7 +144,7 @@ export function settings({ moduleContext, workbenchSession, workbenchServices }:
                     onChange={handleEnsembleSelectionChange}
                 />
             </Label>
-            <ApiStateWrapper
+            <QueryStateWrapper
                 apiResult={vectorListQuery}
                 errorComponent={"Error loading vector names"}
                 loadingComponent={<CircularProgress />}
@@ -161,7 +161,7 @@ export function settings({ moduleContext, workbenchSession, workbenchServices }:
                         size={5}
                     />
                 </Label>
-            </ApiStateWrapper>
+            </QueryStateWrapper>
             <Label text="Frequency">
                 <Dropdown
                     options={makeFrequencyOptionItems()}
diff --git a/frontend/src/modules/SimulationTimeSeriesMatrix/settings.tsx b/frontend/src/modules/SimulationTimeSeriesMatrix/settings.tsx
index 348a3b7a6..e87ff976e 100644
--- a/frontend/src/modules/SimulationTimeSeriesMatrix/settings.tsx
+++ b/frontend/src/modules/SimulationTimeSeriesMatrix/settings.tsx
@@ -11,12 +11,12 @@ import { MultiEnsembleSelect } from "@framework/components/MultiEnsembleSelect";
 import { ParameterListFilter } from "@framework/components/ParameterListFilter";
 import { VectorSelector, createVectorSelectorDataFromVectors } from "@framework/components/VectorSelector";
 import { fixupEnsembleIdents } from "@framework/utils/ensembleUiHelpers";
-import { ApiStatesWrapper } from "@lib/components/ApiStatesWrapper";
 import { Checkbox } from "@lib/components/Checkbox";
 import { CircularProgress } from "@lib/components/CircularProgress";
 import { CollapsibleGroup } from "@lib/components/CollapsibleGroup";
 import { Dropdown } from "@lib/components/Dropdown";
 import { Label } from "@lib/components/Label";
+import { QueriesErrorCriteria, QueryStateWrapper } from "@lib/components/QueryStateWrapper";
 import { RadioGroup } from "@lib/components/RadioGroup";
 import { Select } from "@lib/components/Select";
 import { SmartNodeSelectorSelection, TreeDataNode } from "@lib/components/SmartNodeSelector";
@@ -359,10 +359,11 @@ export function settings({ moduleContext, workbenchSession }: ModuleFCProps<Stat
                         "pointer-events-none opacity-80": vectorListQueries.some((query) => query.isLoading),
                     })}
                 >
-                    <ApiStatesWrapper
+                    <QueryStateWrapper
                         apiResults={vectorListQueries}
                         loadingComponent={<CircularProgress />}
-                        errorComponent={"Could not load the vectors for selected ensembles"}
+                        errorCriteria={QueriesErrorCriteria.EVERY_QUERY}
+                        errorComponent={"Could not load vectors for selected ensembles"}
                     >
                         <VectorSelector
                             data={vectorSelectorData}
@@ -372,7 +373,7 @@ export function settings({ moduleContext, workbenchSession }: ModuleFCProps<Stat
                             lineBreakAfterTag={true}
                             onChange={handleVectorSelectChange}
                         />
-                    </ApiStatesWrapper>
+                    </QueryStateWrapper>
                 </div>
             </CollapsibleGroup>
             <CollapsibleGroup expanded={false} title="Color realization by parameter">
diff --git a/frontend/src/modules/SimulationTimeSeriesSensitivity/settings.tsx b/frontend/src/modules/SimulationTimeSeriesSensitivity/settings.tsx
index 60f6bdb3e..f06d12791 100644
--- a/frontend/src/modules/SimulationTimeSeriesSensitivity/settings.tsx
+++ b/frontend/src/modules/SimulationTimeSeriesSensitivity/settings.tsx
@@ -8,12 +8,12 @@ import { useEnsembleSet } from "@framework/WorkbenchSession";
 import { SingleEnsembleSelect } from "@framework/components/SingleEnsembleSelect";
 import { VectorSelector, createVectorSelectorDataFromVectors } from "@framework/components/VectorSelector";
 import { fixupEnsembleIdent, maybeAssignFirstSyncedEnsemble } from "@framework/utils/ensembleUiHelpers";
-import { ApiStateWrapper } from "@lib/components/ApiStateWrapper";
 import { Checkbox } from "@lib/components/Checkbox";
 import { CircularProgress } from "@lib/components/CircularProgress";
 import { CollapsibleGroup } from "@lib/components/CollapsibleGroup";
 import { Dropdown, DropdownOption } from "@lib/components/Dropdown";
 import { Label } from "@lib/components/Label";
+import { QueryStateWrapper } from "@lib/components/QueryStateWrapper";
 import { Select, SelectOption } from "@lib/components/Select";
 import { SmartNodeSelectorSelection, TreeDataNode } from "@lib/components/SmartNodeSelector";
 
@@ -155,7 +155,7 @@ export function settings({ moduleContext, workbenchSession, workbenchServices }:
                     onChange={handleEnsembleSelectionChange}
                 />
             </CollapsibleGroup>
-            <ApiStateWrapper
+            <QueryStateWrapper
                 apiResult={vectorsListQuery}
                 loadingComponent={<CircularProgress />}
                 errorComponent={"Could not load the vectors for selected ensembles"}
@@ -183,7 +183,7 @@ export function settings({ moduleContext, workbenchSession, workbenchServices }:
                         </div>
                     </Label>
                 </CollapsibleGroup>
-            </ApiStateWrapper>
+            </QueryStateWrapper>
             <CollapsibleGroup expanded={false} title="Visualization">
                 <Checkbox
                     label="Mean over realizations"
diff --git a/frontend/src/modules/SubsurfaceMap/settings.tsx b/frontend/src/modules/SubsurfaceMap/settings.tsx
index 312d35949..d196c762c 100644
--- a/frontend/src/modules/SubsurfaceMap/settings.tsx
+++ b/frontend/src/modules/SubsurfaceMap/settings.tsx
@@ -7,13 +7,13 @@ import { SyncSettingKey, SyncSettingsHelper } from "@framework/SyncSettings";
 import { useEnsembleSet } from "@framework/WorkbenchSession";
 import { SingleEnsembleSelect } from "@framework/components/SingleEnsembleSelect";
 import { fixupEnsembleIdent, maybeAssignFirstSyncedEnsemble } from "@framework/utils/ensembleUiHelpers";
-import { ApiStateWrapper } from "@lib/components/ApiStateWrapper";
 import { Button } from "@lib/components/Button";
 import { Checkbox } from "@lib/components/Checkbox";
 import { CircularProgress } from "@lib/components/CircularProgress";
 import { CollapsibleGroup } from "@lib/components/CollapsibleGroup";
 import { Input } from "@lib/components/Input";
 import { Label } from "@lib/components/Label";
+import { QueryStateWrapper } from "@lib/components/QueryStateWrapper";
 import { RadioGroup } from "@lib/components/RadioGroup";
 import { Select, SelectOption } from "@lib/components/Select";
 import { PolygonsAddress, PolygonsDirectory, usePolygonsDirectoryQuery } from "@modules/_shared/Polygons";
@@ -470,7 +470,7 @@ export function settings({ moduleContext, workbenchSession, workbenchServices }:
                 )}
             </CollapsibleGroup>
             <CollapsibleGroup expanded={true} title="Depth surface">
-                <ApiStateWrapper
+                <QueryStateWrapper
                     apiResult={meshSurfDirQuery}
                     errorComponent={"Error loading surface directory"}
                     loadingComponent={<CircularProgress />}
@@ -497,7 +497,7 @@ export function settings({ moduleContext, workbenchSession, workbenchServices }:
                             size={5}
                         />
                     </Label>
-                </ApiStateWrapper>
+                </QueryStateWrapper>
             </CollapsibleGroup>
             <CollapsibleGroup expanded={false} title="Property surface (color)">
                 <>
@@ -514,7 +514,7 @@ export function settings({ moduleContext, workbenchSession, workbenchServices }:
                         </div>
                     </Label>
                     {usePropertySurface && (
-                        <ApiStateWrapper
+                        <QueryStateWrapper
                             apiResult={propertySurfDirQuery}
                             errorComponent={"Error loading surface directory"}
                             loadingComponent={<CircularProgress />}
@@ -564,7 +564,7 @@ export function settings({ moduleContext, workbenchSession, workbenchServices }:
                                     />
                                 </Label>
                             )}
-                        </ApiStateWrapper>
+                        </QueryStateWrapper>
                     )}
                 </>
             </CollapsibleGroup>
@@ -579,7 +579,7 @@ export function settings({ moduleContext, workbenchSession, workbenchServices }:
                     </div>
                 </Label>
                 {showPolygon && (
-                    <ApiStateWrapper
+                    <QueryStateWrapper
                         apiResult={polygonsDirectoryQuery}
                         errorComponent={"Error loading polygons directory"}
                         loadingComponent={<CircularProgress />}
@@ -621,11 +621,11 @@ export function settings({ moduleContext, workbenchSession, workbenchServices }:
                                 size={5}
                             />
                         </Label>
-                    </ApiStateWrapper>
+                    </QueryStateWrapper>
                 )}
             </CollapsibleGroup>
             <CollapsibleGroup expanded={false} title="Well data">
-                <ApiStateWrapper
+                <QueryStateWrapper
                     apiResult={wellHeadersQuery}
                     errorComponent={"Error loading wells"}
                     loadingComponent={<CircularProgress />}
@@ -655,7 +655,7 @@ export function settings({ moduleContext, workbenchSession, workbenchServices }:
                             />
                         </>
                     </Label>
-                </ApiStateWrapper>
+                </QueryStateWrapper>
             </CollapsibleGroup>
             <CollapsibleGroup expanded={false} title="View settings">
                 <div>
diff --git a/frontend/src/modules/TimeSeriesParameterDistribution/settings.tsx b/frontend/src/modules/TimeSeriesParameterDistribution/settings.tsx
index ceebc5aac..867c92c8d 100644
--- a/frontend/src/modules/TimeSeriesParameterDistribution/settings.tsx
+++ b/frontend/src/modules/TimeSeriesParameterDistribution/settings.tsx
@@ -8,10 +8,10 @@ import { useEnsembleSet } from "@framework/WorkbenchSession";
 import { SingleEnsembleSelect } from "@framework/components/SingleEnsembleSelect";
 import { fixupEnsembleIdent, maybeAssignFirstSyncedEnsemble } from "@framework/utils/ensembleUiHelpers";
 import { timestampUtcMsToCompactIsoString } from "@framework/utils/timestampUtils";
-import { ApiStateWrapper } from "@lib/components/ApiStateWrapper";
 import { CircularProgress } from "@lib/components/CircularProgress";
 import { Dropdown } from "@lib/components/Dropdown";
 import { Label } from "@lib/components/Label";
+import { QueryStateWrapper } from "@lib/components/QueryStateWrapper";
 import { Select, SelectOption } from "@lib/components/Select";
 
 import { useGetParameterNamesQuery, useTimestampsListQuery, useVectorsQuery } from "./queryHooks";
@@ -35,7 +35,10 @@ export function settings({ moduleContext, workbenchSession, workbenchServices }:
     const computedEnsemble = fixupEnsembleIdent(candidateEnsemble, ensembleSet);
 
     const vectorsQuery = useVectorsQuery(computedEnsemble?.getCaseUuid(), computedEnsemble?.getEnsembleName());
-    const timestampsQuery = useTimestampsListQuery(computedEnsemble?.getCaseUuid(), computedEnsemble?.getEnsembleName());
+    const timestampsQuery = useTimestampsListQuery(
+        computedEnsemble?.getCaseUuid(),
+        computedEnsemble?.getEnsembleName()
+    );
     const parameterNamesQuery = useGetParameterNamesQuery(
         computedEnsemble?.getCaseUuid(),
         computedEnsemble?.getEnsembleName()
@@ -98,7 +101,7 @@ export function settings({ moduleContext, workbenchSession, workbenchServices }:
                     onChange={handleEnsembleSelectionChange}
                 />
             </Label>
-            <ApiStateWrapper
+            <QueryStateWrapper
                 apiResult={vectorsQuery}
                 errorComponent={"Error loading vector names"}
                 loadingComponent={<CircularProgress />}
@@ -115,8 +118,8 @@ export function settings({ moduleContext, workbenchSession, workbenchServices }:
                         size={5}
                     />
                 </Label>
-            </ApiStateWrapper>
-            <ApiStateWrapper
+            </QueryStateWrapper>
+            <QueryStateWrapper
                 apiResult={timestampsQuery}
                 errorComponent={"Error loading timestamps"}
                 loadingComponent={<CircularProgress />}
@@ -128,8 +131,8 @@ export function settings({ moduleContext, workbenchSession, workbenchServices }:
                         onChange={(tsValAsString) => setTimestampUtcMs(Number(tsValAsString))}
                     />
                 </Label>
-            </ApiStateWrapper>
-            <ApiStateWrapper
+            </QueryStateWrapper>
+            <QueryStateWrapper
                 apiResult={parameterNamesQuery}
                 errorComponent={"Error loading parameter names"}
                 loadingComponent={<CircularProgress />}
@@ -141,7 +144,7 @@ export function settings({ moduleContext, workbenchSession, workbenchServices }:
                         onChange={setParameterName}
                     />
                 </Label>
-            </ApiStateWrapper>
+            </QueryStateWrapper>
         </>
     );
 }

From 64e257c4fbe747caee78840a1e9eb22a98541fe7 Mon Sep 17 00:00:00 2001
From: jorgenherje <jorgen.herje@ceetronsolutions.com>
Date: Tue, 5 Dec 2023 09:00:08 +0100
Subject: [PATCH 2/5] Adjust prop name from apiResult to queryResult

---
 .../selectEnsemblesDialog.tsx                  |  6 +++---
 .../QueryStateWrapper/queryStateWrapper.tsx    | 18 +++++++++---------
 frontend/src/modules/Grid3D/settings.tsx       |  4 ++--
 .../modules/Grid3DIntersection/settings.tsx    |  2 +-
 .../modules/InplaceVolumetrics/settings.tsx    |  2 +-
 .../src/modules/InplaceVolumetrics/view.tsx    |  2 +-
 frontend/src/modules/Map/MapSettings.tsx       |  2 +-
 frontend/src/modules/Pvt/settings.tsx          |  2 +-
 .../modules/SeismicIntersection/settings.tsx   |  4 ++--
 .../modules/SimulationTimeSeries/settings.tsx  |  2 +-
 .../SimulationTimeSeriesMatrix/settings.tsx    |  2 +-
 .../settings.tsx                               |  2 +-
 .../src/modules/SubsurfaceMap/settings.tsx     |  8 ++++----
 .../settings.tsx                               |  6 +++---
 14 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/frontend/src/framework/internal/components/SelectEnsemblesDialog/selectEnsemblesDialog.tsx b/frontend/src/framework/internal/components/SelectEnsemblesDialog/selectEnsemblesDialog.tsx
index b002b414c..d8f136125 100644
--- a/frontend/src/framework/internal/components/SelectEnsemblesDialog/selectEnsemblesDialog.tsx
+++ b/frontend/src/framework/internal/components/SelectEnsemblesDialog/selectEnsemblesDialog.tsx
@@ -262,7 +262,7 @@ export const SelectEnsemblesDialog: React.FC<SelectEnsemblesDialogProps> = (prop
                     <div className="flex flex-col gap-4 p-4 border-r bg-slate-100 h-full">
                         <Label text="Field">
                             <QueryStateWrapper
-                                apiResult={fieldsQuery}
+                                queryResult={fieldsQuery}
                                 errorComponent={<div className="text-red-500">Error loading fields</div>}
                                 loadingComponent={<CircularProgress />}
                             >
@@ -276,7 +276,7 @@ export const SelectEnsemblesDialog: React.FC<SelectEnsemblesDialogProps> = (prop
                         </Label>
                         <Label text="Case">
                             <QueryStateWrapper
-                                apiResult={casesQuery}
+                                queryResult={casesQuery}
                                 errorComponent={<div className="text-red-500">Error loading cases</div>}
                                 loadingComponent={<CircularProgress />}
                             >
@@ -312,7 +312,7 @@ export const SelectEnsemblesDialog: React.FC<SelectEnsemblesDialogProps> = (prop
                         </Label>
                         <Label text="Ensemble">
                             <QueryStateWrapper
-                                apiResult={ensemblesQuery}
+                                queryResult={ensemblesQuery}
                                 errorComponent={<div className="text-red-500">Error loading ensembles</div>}
                                 loadingComponent={<CircularProgress />}
                             >
diff --git a/frontend/src/lib/components/QueryStateWrapper/queryStateWrapper.tsx b/frontend/src/lib/components/QueryStateWrapper/queryStateWrapper.tsx
index e677c89f7..58452e4b6 100644
--- a/frontend/src/lib/components/QueryStateWrapper/queryStateWrapper.tsx
+++ b/frontend/src/lib/components/QueryStateWrapper/queryStateWrapper.tsx
@@ -21,11 +21,11 @@ export type QueryStateWrapperBaseProps = {
 };
 
 export type QueryStateWrapperProps = QueryStateWrapperBaseProps & {
-    apiResult: QueryObserverResult;
+    queryResult: QueryObserverResult;
 };
 
 export type QueryStatesWrapperProps = QueryStateWrapperBaseProps & {
-    apiResults: QueryObserverResult[];
+    queryResults: QueryObserverResult[];
     errorCriteria: QueriesDisplayErrorCriteria;
 };
 
@@ -34,16 +34,16 @@ export const QueryStateWrapper: React.FC<QueryStateWrapperProps | QueryStatesWra
 ) => {
     let showQueryLoading = false;
     let showQueryError = false;
-    if ("apiResult" in props) {
-        showQueryLoading = props.apiResult.isLoading;
-        showQueryError = props.apiResult.isError;
+    if ("queryResult" in props) {
+        showQueryLoading = props.queryResult.isLoading;
+        showQueryError = props.queryResult.isError;
     } else {
-        showQueryLoading = props.apiResults.some((elm) => elm.isLoading);
-        if (props.apiResults.length > 0) {
+        showQueryLoading = props.queryResults.some((elm) => elm.isLoading);
+        if (props.queryResults.length > 0) {
             showQueryError =
                 props.errorCriteria === QueriesDisplayErrorCriteria.SOME_QUERY
-                    ? props.apiResults.some((elm) => elm.isError)
-                    : props.apiResults.every((elm) => elm.isError);
+                    ? props.queryResults.some((elm) => elm.isError)
+                    : props.queryResults.every((elm) => elm.isError);
         }
     }
 
diff --git a/frontend/src/modules/Grid3D/settings.tsx b/frontend/src/modules/Grid3D/settings.tsx
index 68180b595..9e22266b0 100644
--- a/frontend/src/modules/Grid3D/settings.tsx
+++ b/frontend/src/modules/Grid3D/settings.tsx
@@ -111,7 +111,7 @@ export function settings({ moduleContext, workbenchServices, workbenchSession }:
             </CollapsibleGroup>
             <CollapsibleGroup expanded={true} title="Grid data">
                 <QueryStateWrapper
-                    apiResult={gridNamesQuery}
+                    queryResult={gridNamesQuery}
                     errorComponent={"Error loading grid models"}
                     loadingComponent={<CircularProgress />}
                 >
@@ -138,7 +138,7 @@ export function settings({ moduleContext, workbenchServices, workbenchSession }:
             </CollapsibleGroup>
             <CollapsibleGroup expanded={true} title="Well data">
                 <QueryStateWrapper
-                    apiResult={wellHeadersQuery}
+                    queryResult={wellHeadersQuery}
                     errorComponent={"Error loading wells"}
                     loadingComponent={<CircularProgress />}
                 >
diff --git a/frontend/src/modules/Grid3DIntersection/settings.tsx b/frontend/src/modules/Grid3DIntersection/settings.tsx
index 44224dda4..e2167f4c0 100644
--- a/frontend/src/modules/Grid3DIntersection/settings.tsx
+++ b/frontend/src/modules/Grid3DIntersection/settings.tsx
@@ -53,7 +53,7 @@ export function settings({ moduleContext, workbenchSession }: ModuleFCProps<stat
     return (
         <div>
             <QueryStateWrapper
-                apiResult={gridNamesQuery}
+                queryResult={gridNamesQuery}
                 errorComponent={"Error loading vector names"}
                 loadingComponent={<CircularProgress />}
             >
diff --git a/frontend/src/modules/InplaceVolumetrics/settings.tsx b/frontend/src/modules/InplaceVolumetrics/settings.tsx
index dadec0a0b..56a6cffc4 100644
--- a/frontend/src/modules/InplaceVolumetrics/settings.tsx
+++ b/frontend/src/modules/InplaceVolumetrics/settings.tsx
@@ -175,7 +175,7 @@ export function settings({ moduleContext, workbenchSession }: ModuleFCProps<Stat
                 />
             </Label>
             <QueryStateWrapper
-                apiResult={tableDescriptionsQuery}
+                queryResult={tableDescriptionsQuery}
                 loadingComponent={<CircularProgress />}
                 errorComponent={"Could not load table descriptions"}
                 className="flex flex-col gap-4"
diff --git a/frontend/src/modules/InplaceVolumetrics/view.tsx b/frontend/src/modules/InplaceVolumetrics/view.tsx
index f1ce4a28e..69e7c4e2c 100644
--- a/frontend/src/modules/InplaceVolumetrics/view.tsx
+++ b/frontend/src/modules/InplaceVolumetrics/view.tsx
@@ -116,7 +116,7 @@ export const view = (props: ModuleFCProps<State>) => {
     return (
         <div className="w-full h-full" ref={wrapperDivRef}>
             <QueryStateWrapper
-                apiResult={realizationsResponseQuery}
+                queryResult={realizationsResponseQuery}
                 loadingComponent={<CircularProgress />}
                 errorComponent={"feil"}
             >
diff --git a/frontend/src/modules/Map/MapSettings.tsx b/frontend/src/modules/Map/MapSettings.tsx
index 7a6b0cd31..23ce5ccb9 100644
--- a/frontend/src/modules/Map/MapSettings.tsx
+++ b/frontend/src/modules/Map/MapSettings.tsx
@@ -244,7 +244,7 @@ export function MapSettings(props: ModuleFCProps<MapState>) {
             </Label>
 
             <QueryStateWrapper
-                apiResult={surfaceDirectoryQuery}
+                queryResult={surfaceDirectoryQuery}
                 errorComponent={"Error loading surface directory"}
                 loadingComponent={<CircularProgress />}
             >
diff --git a/frontend/src/modules/Pvt/settings.tsx b/frontend/src/modules/Pvt/settings.tsx
index 5ea18f756..f4c76606c 100644
--- a/frontend/src/modules/Pvt/settings.tsx
+++ b/frontend/src/modules/Pvt/settings.tsx
@@ -125,7 +125,7 @@ export function settings({ moduleContext, workbenchSession }: ModuleFCProps<stat
     return (
         <div>
             <QueryStateWrapper
-                apiResult={pvtDataQuery}
+                queryResult={pvtDataQuery}
                 errorComponent={"Error loading pvt data"}
                 loadingComponent={"Error loading pvt data"}
             >
diff --git a/frontend/src/modules/SeismicIntersection/settings.tsx b/frontend/src/modules/SeismicIntersection/settings.tsx
index a890706a0..a4851cffd 100644
--- a/frontend/src/modules/SeismicIntersection/settings.tsx
+++ b/frontend/src/modules/SeismicIntersection/settings.tsx
@@ -242,7 +242,7 @@ export function settings({ moduleContext, workbenchSession, workbenchServices }:
             </CollapsibleGroup>
             <CollapsibleGroup expanded={true} title="Well trajectory">
                 <QueryStateWrapper
-                    apiResult={wellHeadersQuery}
+                    queryResult={wellHeadersQuery}
                     errorComponent={"Error loading wells"}
                     loadingComponent={<CircularProgress />}
                 >
@@ -295,7 +295,7 @@ export function settings({ moduleContext, workbenchSession, workbenchServices }:
                         />
                     </Label>
                     <QueryStateWrapper
-                        apiResult={seismicCubeMetaListQuery}
+                        queryResult={seismicCubeMetaListQuery}
                         errorComponent={"Error loading seismic directory"}
                         loadingComponent={<CircularProgress />}
                     >
diff --git a/frontend/src/modules/SimulationTimeSeries/settings.tsx b/frontend/src/modules/SimulationTimeSeries/settings.tsx
index 72680c145..f7a341e88 100644
--- a/frontend/src/modules/SimulationTimeSeries/settings.tsx
+++ b/frontend/src/modules/SimulationTimeSeries/settings.tsx
@@ -145,7 +145,7 @@ export function settings({ moduleContext, workbenchSession, workbenchServices }:
                 />
             </Label>
             <QueryStateWrapper
-                apiResult={vectorListQuery}
+                queryResult={vectorListQuery}
                 errorComponent={"Error loading vector names"}
                 loadingComponent={<CircularProgress />}
             >
diff --git a/frontend/src/modules/SimulationTimeSeriesMatrix/settings.tsx b/frontend/src/modules/SimulationTimeSeriesMatrix/settings.tsx
index e87ff976e..05361bd6c 100644
--- a/frontend/src/modules/SimulationTimeSeriesMatrix/settings.tsx
+++ b/frontend/src/modules/SimulationTimeSeriesMatrix/settings.tsx
@@ -360,7 +360,7 @@ export function settings({ moduleContext, workbenchSession }: ModuleFCProps<Stat
                     })}
                 >
                     <QueryStateWrapper
-                        apiResults={vectorListQueries}
+                        queryResults={vectorListQueries}
                         loadingComponent={<CircularProgress />}
                         errorCriteria={QueriesErrorCriteria.EVERY_QUERY}
                         errorComponent={"Could not load vectors for selected ensembles"}
diff --git a/frontend/src/modules/SimulationTimeSeriesSensitivity/settings.tsx b/frontend/src/modules/SimulationTimeSeriesSensitivity/settings.tsx
index f06d12791..52fd527e1 100644
--- a/frontend/src/modules/SimulationTimeSeriesSensitivity/settings.tsx
+++ b/frontend/src/modules/SimulationTimeSeriesSensitivity/settings.tsx
@@ -156,7 +156,7 @@ export function settings({ moduleContext, workbenchSession, workbenchServices }:
                 />
             </CollapsibleGroup>
             <QueryStateWrapper
-                apiResult={vectorsListQuery}
+                queryResult={vectorsListQuery}
                 loadingComponent={<CircularProgress />}
                 errorComponent={"Could not load the vectors for selected ensembles"}
             >
diff --git a/frontend/src/modules/SubsurfaceMap/settings.tsx b/frontend/src/modules/SubsurfaceMap/settings.tsx
index d196c762c..e62171a9b 100644
--- a/frontend/src/modules/SubsurfaceMap/settings.tsx
+++ b/frontend/src/modules/SubsurfaceMap/settings.tsx
@@ -471,7 +471,7 @@ export function settings({ moduleContext, workbenchSession, workbenchServices }:
             </CollapsibleGroup>
             <CollapsibleGroup expanded={true} title="Depth surface">
                 <QueryStateWrapper
-                    apiResult={meshSurfDirQuery}
+                    queryResult={meshSurfDirQuery}
                     errorComponent={"Error loading surface directory"}
                     loadingComponent={<CircularProgress />}
                 >
@@ -515,7 +515,7 @@ export function settings({ moduleContext, workbenchSession, workbenchServices }:
                     </Label>
                     {usePropertySurface && (
                         <QueryStateWrapper
-                            apiResult={propertySurfDirQuery}
+                            queryResult={propertySurfDirQuery}
                             errorComponent={"Error loading surface directory"}
                             loadingComponent={<CircularProgress />}
                         >
@@ -580,7 +580,7 @@ export function settings({ moduleContext, workbenchSession, workbenchServices }:
                 </Label>
                 {showPolygon && (
                     <QueryStateWrapper
-                        apiResult={polygonsDirectoryQuery}
+                        queryResult={polygonsDirectoryQuery}
                         errorComponent={"Error loading polygons directory"}
                         loadingComponent={<CircularProgress />}
                     >
@@ -626,7 +626,7 @@ export function settings({ moduleContext, workbenchSession, workbenchServices }:
             </CollapsibleGroup>
             <CollapsibleGroup expanded={false} title="Well data">
                 <QueryStateWrapper
-                    apiResult={wellHeadersQuery}
+                    queryResult={wellHeadersQuery}
                     errorComponent={"Error loading wells"}
                     loadingComponent={<CircularProgress />}
                 >
diff --git a/frontend/src/modules/TimeSeriesParameterDistribution/settings.tsx b/frontend/src/modules/TimeSeriesParameterDistribution/settings.tsx
index 867c92c8d..8dda671bd 100644
--- a/frontend/src/modules/TimeSeriesParameterDistribution/settings.tsx
+++ b/frontend/src/modules/TimeSeriesParameterDistribution/settings.tsx
@@ -102,7 +102,7 @@ export function settings({ moduleContext, workbenchSession, workbenchServices }:
                 />
             </Label>
             <QueryStateWrapper
-                apiResult={vectorsQuery}
+                queryResult={vectorsQuery}
                 errorComponent={"Error loading vector names"}
                 loadingComponent={<CircularProgress />}
             >
@@ -120,7 +120,7 @@ export function settings({ moduleContext, workbenchSession, workbenchServices }:
                 </Label>
             </QueryStateWrapper>
             <QueryStateWrapper
-                apiResult={timestampsQuery}
+                queryResult={timestampsQuery}
                 errorComponent={"Error loading timestamps"}
                 loadingComponent={<CircularProgress />}
             >
@@ -133,7 +133,7 @@ export function settings({ moduleContext, workbenchSession, workbenchServices }:
                 </Label>
             </QueryStateWrapper>
             <QueryStateWrapper
-                apiResult={parameterNamesQuery}
+                queryResult={parameterNamesQuery}
                 errorComponent={"Error loading parameter names"}
                 loadingComponent={<CircularProgress />}
             >

From c615f86f3ed50a6ac7d6df90580cafb24320b2cc Mon Sep 17 00:00:00 2001
From: jorgenherje <jorgen.herje@ceetronsolutions.com>
Date: Tue, 5 Dec 2023 10:01:24 +0100
Subject: [PATCH 3/5] Improve statusWriter for non-existing vectors
 SimulationTimeSeriesMatrix

- Add error if every vector list query fails
- Allow update of vectorSelectorData even if queries fail, only await fetching state.
---
 .../SimulationTimeSeriesMatrix/settings.tsx   | 34 +++++++++++++------
 1 file changed, 24 insertions(+), 10 deletions(-)

diff --git a/frontend/src/modules/SimulationTimeSeriesMatrix/settings.tsx b/frontend/src/modules/SimulationTimeSeriesMatrix/settings.tsx
index 05361bd6c..7300c9f79 100644
--- a/frontend/src/modules/SimulationTimeSeriesMatrix/settings.tsx
+++ b/frontend/src/modules/SimulationTimeSeriesMatrix/settings.tsx
@@ -116,19 +116,27 @@ export function settings({ moduleContext, workbenchSession }: ModuleFCProps<Stat
         (item: ParameterIdent) => item.toString(),
     ]);
 
-    // Await update of vectorSelectorData until all vector lists are retrieved
-    const hasVectorListQueriesErrorOrFetching = vectorListQueries.some((query) => query.isFetching || query.isError);
-    if (!hasVectorListQueriesErrorOrFetching && !isEqual(currentVectorSelectorData, vectorSelectorData)) {
+    // Await update of vectorSelectorData until all vector lists are finished fetching
+    const isVectorListQueriesFetching = vectorListQueries.some((query) => query.isFetching);
+    let computedVectorSelectorData = vectorSelectorData;
+    if (!isVectorListQueriesFetching && !isEqual(currentVectorSelectorData, vectorSelectorData)) {
+        computedVectorSelectorData = currentVectorSelectorData;
         setVectorSelectorData(currentVectorSelectorData);
     }
 
-    // Set statistics type for checkbox rendering
-    const computedStatisticsType = computeStatisticsType(statisticsType, visualizationMode);
-    if (statisticsType !== computedStatisticsType) {
-        setStatisticsType(computedStatisticsType);
+    // Set error if all vector list queries fail
+    const hasEveryVectorListQueryError =
+        vectorListQueries.length > 0 && vectorListQueries.every((query) => query.isError);
+    if (hasEveryVectorListQueryError) {
+        let errorMessage = "Could not load vectors for selected ensemble";
+        if (vectorListQueries.length > 1) {
+            errorMessage += "s";
+        }
+        statusWriter.addError(errorMessage);
     }
 
     // Set warning for selected vectors not existing in a selected ensemble
+    // Note: selectedVectorNames is not updated until vectorSelectorData is updated and VectorSelector triggers onChange
     for (const ensembleIdent of selectedEnsembleIdents) {
         const nonExistingVectors = selectedVectorNames.filter(
             (vector) => !ensembleVectorListsHelper.isVectorInEnsemble(ensembleIdent, vector)
@@ -142,6 +150,12 @@ export function settings({ moduleContext, workbenchSession }: ModuleFCProps<Stat
         statusWriter.addWarning(`Vector ${vectorArrayStr} does not exist in ensemble ${ensembleStr}`);
     }
 
+    // Set statistics type for checkbox rendering
+    const computedStatisticsType = computeStatisticsType(statisticsType, visualizationMode);
+    if (statisticsType !== computedStatisticsType) {
+        setStatisticsType(computedStatisticsType);
+    }
+
     React.useEffect(
         function propagateVectorSpecsToView() {
             const newVectorSpecifications: VectorSpec[] = [];
@@ -204,7 +218,7 @@ export function settings({ moduleContext, workbenchSession }: ModuleFCProps<Stat
         setSelectedEnsembleIdents(ensembleIdentArr);
     }
 
-    function handleVectorSelectChange(selection: SmartNodeSelectorSelection) {
+    function handleVectorSelectionChange(selection: SmartNodeSelectorSelection) {
         setSelectedVectorNames(selection.selectedNodes);
     }
 
@@ -366,12 +380,12 @@ export function settings({ moduleContext, workbenchSession }: ModuleFCProps<Stat
                         errorComponent={"Could not load vectors for selected ensembles"}
                     >
                         <VectorSelector
-                            data={vectorSelectorData}
+                            data={computedVectorSelectorData}
                             placeholder="Add new vector..."
                             maxNumSelectedNodes={50}
                             numSecondsUntilSuggestionsAreShown={0.5}
                             lineBreakAfterTag={true}
-                            onChange={handleVectorSelectChange}
+                            onChange={handleVectorSelectionChange}
                         />
                     </QueryStateWrapper>
                 </div>

From 8d9e9cff67a378d89fd2556d4ddb80baf8e0ea8f Mon Sep 17 00:00:00 2001
From: jorgenherje <jorgen.herje@ceetronsolutions.com>
Date: Tue, 5 Dec 2023 15:31:18 +0100
Subject: [PATCH 4/5] Guard -1 index for ensemblesVectorListHelper

---
 .../utils/ensemblesVectorListHelper.ts                         | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/modules/SimulationTimeSeriesMatrix/utils/ensemblesVectorListHelper.ts b/frontend/src/modules/SimulationTimeSeriesMatrix/utils/ensemblesVectorListHelper.ts
index c94644400..8e4d6fdbb 100644
--- a/frontend/src/modules/SimulationTimeSeriesMatrix/utils/ensemblesVectorListHelper.ts
+++ b/frontend/src/modules/SimulationTimeSeriesMatrix/utils/ensemblesVectorListHelper.ts
@@ -54,7 +54,7 @@ export class EnsembleVectorListsHelper {
     isVectorInEnsemble(ensemble: EnsembleIdent, vector: string): boolean {
         const index = this._ensembleIdents.indexOf(ensemble);
 
-        if (!this._queries[index].data) return false;
+        if (index === -1 || !this._queries[index].data) return false;
 
         return this._queries[index].data?.some((vec) => vec.name === vector) ?? false;
     }
@@ -69,6 +69,7 @@ export class EnsembleVectorListsHelper {
         if (!this.isVectorInEnsemble(ensemble, vector)) return false;
 
         const index = this._ensembleIdents.indexOf(ensemble);
+        if (index === -1 || !this._queries[index].data) return false;
 
         return this._queries[index].data?.some((vec) => vec.name === vector && vec.has_historical) ?? false;
     }

From 5e38a51e77cf24d46323d26afb2737521015cfdc Mon Sep 17 00:00:00 2001
From: jorgenherje <jorgen.herje@ceetronsolutions.com>
Date: Fri, 22 Dec 2023 08:16:07 +0100
Subject: [PATCH 5/5] Adjustments according to review

---
 .../lib/components/QueryStateWrapper/index.ts |  2 +-
 .../QueryStateWrapper/queryStateWrapper.tsx   | 19 ++++++++++---------
 .../modules/Grid3DIntersection/settings.tsx   |  4 ++--
 .../SimulationTimeSeriesMatrix/settings.tsx   |  2 +-
 4 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/frontend/src/lib/components/QueryStateWrapper/index.ts b/frontend/src/lib/components/QueryStateWrapper/index.ts
index 6eb62fba6..2904d0e1d 100644
--- a/frontend/src/lib/components/QueryStateWrapper/index.ts
+++ b/frontend/src/lib/components/QueryStateWrapper/index.ts
@@ -1 +1 @@
-export { QueryStateWrapper, QueriesDisplayErrorCriteria as QueriesErrorCriteria } from "./queryStateWrapper";
+export { QueryStateWrapper, QueriesErrorCriteria } from "./queryStateWrapper";
diff --git a/frontend/src/lib/components/QueryStateWrapper/queryStateWrapper.tsx b/frontend/src/lib/components/QueryStateWrapper/queryStateWrapper.tsx
index 58452e4b6..38d3ff6d2 100644
--- a/frontend/src/lib/components/QueryStateWrapper/queryStateWrapper.tsx
+++ b/frontend/src/lib/components/QueryStateWrapper/queryStateWrapper.tsx
@@ -4,11 +4,11 @@ import { resolveClassNames } from "@lib/utils/resolveClassNames";
 import { QueryObserverResult } from "@tanstack/react-query";
 
 // Definition of error criteria for multiple queries
-// - SOME_QUERY: If at least one query has an error, the error component is displayed
-// - EVERY_QUERY: If all queries have an error, the error component is displayed
-export enum QueriesDisplayErrorCriteria {
-    SOME_QUERY = "some_query",
-    EVERY_QUERY = "every_query",
+// - SOME_QUERIES_HAVE_ERROR: If at least one query has an error, the error component is displayed
+// - ALL_QUERIES_HAVE_ERROR: If all queries have an error, the error component is displayed
+export enum QueriesErrorCriteria {
+    SOME_QUERIES_HAVE_ERROR = "some_queries_have_error",
+    ALL_QUERIES_HAVE_ERROR = "all_queries_have_error",
 }
 
 // Base state wrapper props
@@ -26,7 +26,7 @@ export type QueryStateWrapperProps = QueryStateWrapperBaseProps & {
 
 export type QueryStatesWrapperProps = QueryStateWrapperBaseProps & {
     queryResults: QueryObserverResult[];
-    errorCriteria: QueriesDisplayErrorCriteria;
+    showErrorWhen: QueriesErrorCriteria;
 };
 
 export const QueryStateWrapper: React.FC<QueryStateWrapperProps | QueryStatesWrapperProps> = (
@@ -35,13 +35,14 @@ export const QueryStateWrapper: React.FC<QueryStateWrapperProps | QueryStatesWra
     let showQueryLoading = false;
     let showQueryError = false;
     if ("queryResult" in props) {
-        showQueryLoading = props.queryResult.isLoading;
+        showQueryLoading = props.queryResult.isFetching;
         showQueryError = props.queryResult.isError;
     } else {
-        showQueryLoading = props.queryResults.some((elm) => elm.isLoading);
+        // Check to prevent .every() returning true on empty array
         if (props.queryResults.length > 0) {
+            showQueryLoading = props.queryResults.some((elm) => elm.isFetching);
             showQueryError =
-                props.errorCriteria === QueriesDisplayErrorCriteria.SOME_QUERY
+                props.showErrorWhen === QueriesErrorCriteria.SOME_QUERIES_HAVE_ERROR
                     ? props.queryResults.some((elm) => elm.isError)
                     : props.queryResults.every((elm) => elm.isError);
         }
diff --git a/frontend/src/modules/Grid3DIntersection/settings.tsx b/frontend/src/modules/Grid3DIntersection/settings.tsx
index e2167f4c0..31111f002 100644
--- a/frontend/src/modules/Grid3DIntersection/settings.tsx
+++ b/frontend/src/modules/Grid3DIntersection/settings.tsx
@@ -69,7 +69,7 @@ export function settings({ moduleContext, workbenchSession }: ModuleFCProps<stat
 
                 <Label text="Grid parameter">
                     <Select
-                        options={stringToOptions(parameterNames || [])}
+                        options={stringToOptions(parameterNames)}
                         value={[parameterName || parameterNames[0]]}
                         onChange={(pnames) => setParameterName(pnames[0])}
                         filter={true}
@@ -79,7 +79,7 @@ export function settings({ moduleContext, workbenchSession }: ModuleFCProps<stat
 
                 <Label text="Realizations">
                     <Select
-                        options={stringToOptions((allRealizations as any) || [])}
+                        options={stringToOptions(allRealizations)}
                         value={realizations ? realizations : [allRealizations[0]]}
                         onChange={(reals) => setRealizations(reals)}
                         filter={true}
diff --git a/frontend/src/modules/SimulationTimeSeriesMatrix/settings.tsx b/frontend/src/modules/SimulationTimeSeriesMatrix/settings.tsx
index 7300c9f79..15a7bd2eb 100644
--- a/frontend/src/modules/SimulationTimeSeriesMatrix/settings.tsx
+++ b/frontend/src/modules/SimulationTimeSeriesMatrix/settings.tsx
@@ -376,7 +376,7 @@ export function settings({ moduleContext, workbenchSession }: ModuleFCProps<Stat
                     <QueryStateWrapper
                         queryResults={vectorListQueries}
                         loadingComponent={<CircularProgress />}
-                        errorCriteria={QueriesErrorCriteria.EVERY_QUERY}
+                        showErrorWhen={QueriesErrorCriteria.ALL_QUERIES_HAVE_ERROR}
                         errorComponent={"Could not load vectors for selected ensembles"}
                     >
                         <VectorSelector