Replacing ApiStateWrapper and ApiStatesWrapper with QueryStateWrapper

frontend/src/framework/internal/components/SelectEnsemblesDialog/selectEnsemblesDialog.tsx

@@ -3,14 +3,14 @@ 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";
 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,8 +261,8 @@ 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
-                                apiResult={fieldsQuery}
+                            <QueryStateWrapper
+                                queryResult={fieldsQuery}
                                 errorComponent={<div className="text-red-500">Error loading fields</div>}
                                 loadingComponent={<CircularProgress />}
                             >
@@ -272,11 +272,11 @@ export const SelectEnsemblesDialog: React.FC<SelectEnsemblesDialogProps> = (prop
                                     onChange={handleFieldChanged}
                                     disabled={fieldOpts.length === 0}
                                 />
-                            </ApiStateWrapper>
+                            </QueryStateWrapper>
                         </Label>
                         <Label text="Case">
-                            <ApiStateWrapper
-                                apiResult={casesQuery}
+                            <QueryStateWrapper
+                                queryResult={casesQuery}
                                 errorComponent={<div className="text-red-500">Error loading cases</div>}
                                 loadingComponent={<CircularProgress />}
                             >
@@ -308,11 +308,11 @@ export const SelectEnsemblesDialog: React.FC<SelectEnsemblesDialogProps> = (prop
                                     filter
                                     columnSizesInPercent={[60, 20, 20]}
                                 />
-                            </ApiStateWrapper>
+                            </QueryStateWrapper>
                         </Label>
                         <Label text="Ensemble">
-                            <ApiStateWrapper
-                                apiResult={ensemblesQuery}
+                            <QueryStateWrapper
+                                queryResult={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

frontend/src/lib/components/QueryStateWrapper/index.ts

@@ -0,0 +1 @@
+export { QueryStateWrapper, QueriesErrorCriteria } from "./queryStateWrapper";

frontend/src/lib/components/QueryStateWrapper/queryStateWrapper.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+
+import { resolveClassNames } from "@lib/utils/resolveClassNames";
+import { QueryObserverResult } from "@tanstack/react-query";
+
+// Definition of error criteria for multiple queries
+// - 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
+export type QueryStateWrapperBaseProps = {
+    loadingComponent: React.ReactNode;
+    errorComponent: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    children: React.ReactNode;
+};
+
+export type QueryStateWrapperProps = QueryStateWrapperBaseProps & {
+    queryResult: QueryObserverResult;
+};
+
+export type QueryStatesWrapperProps = QueryStateWrapperBaseProps & {
+    queryResults: QueryObserverResult[];
+    showErrorWhen: QueriesErrorCriteria;
+};
+
+export const QueryStateWrapper: React.FC<QueryStateWrapperProps | QueryStatesWrapperProps> = (
+    props: QueryStateWrapperProps | QueryStatesWrapperProps
+) => {
+    let showQueryLoading = false;
+    let showQueryError = false;
+    if ("queryResult" in props) {
+        showQueryLoading = props.queryResult.isFetching;
+        showQueryError = props.queryResult.isError;
+    } else {
+        // Check to prevent .every() returning true on empty array
+        if (props.queryResults.length > 0) {
+            showQueryLoading = props.queryResults.some((elm) => elm.isFetching);
+            showQueryError =
+                props.showErrorWhen === QueriesErrorCriteria.SOME_QUERIES_HAVE_ERROR
+                    ? props.queryResults.some((elm) => elm.isError)
+                    : props.queryResults.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>
+    );
+};

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,8 +110,8 @@ export function Settings({ moduleContext, workbenchServices, workbenchSession }:
                 {"(Select multiple realizations)"}
             </CollapsibleGroup>
             <CollapsibleGroup expanded={true} title="Grid data">
-                <ApiStateWrapper
-                    apiResult={gridNamesQuery}
+                <QueryStateWrapper
+                    queryResult={gridNamesQuery}
                     errorComponent={"Error loading grid models"}
                     loadingComponent={<CircularProgress />}
                 >
@@ -134,11 +134,11 @@ export function Settings({ moduleContext, workbenchServices, workbenchSession }:
                             size={5}
                         />
                     </Label>
-                </ApiStateWrapper>
+                </QueryStateWrapper>
             </CollapsibleGroup>
             <CollapsibleGroup expanded={true} title="Well data">
-                <ApiStateWrapper
-                    apiResult={wellHeadersQuery}
+                <QueryStateWrapper
+                    queryResult={wellHeadersQuery}
                     errorComponent={"Error loading wells"}
                     loadingComponent={<CircularProgress />}
                 >
@@ -167,7 +167,7 @@ export function Settings({ moduleContext, workbenchServices, workbenchSession }:
                             />
                         </>
                     </Label>
-                </ApiStateWrapper>
+                </QueryStateWrapper>
             </CollapsibleGroup>
         </div>
     );

frontend/src/modules/Grid3DIntersection/settings.tsx

@@ -2,10 +2,10 @@ import React from "react";
 
 import { ModuleFCProps } from "@framework/Module";
 import { useFirstEnsembleInEnsembleSet } from "@framework/WorkbenchSession";
-import { ApiStateWrapper } from "@lib/components/ApiStateWrapper";
 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";
@@ -52,8 +52,8 @@ export function Settings({ moduleContext, workbenchSession }: ModuleFCProps<stat
 
     return (
         <div>
-            <ApiStateWrapper
-                apiResult={gridNamesQuery}
+            <QueryStateWrapper
+                queryResult={gridNamesQuery}
                 errorComponent={"Error loading vector names"}
                 loadingComponent={<CircularProgress />}
             >
@@ -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}
@@ -93,7 +93,7 @@ export function Settings({ moduleContext, workbenchSession }: ModuleFCProps<stat
                     onChange={(event: React.ChangeEvent<HTMLInputElement>) => setUseStatistics(event.target.checked)}
                 />
                 {"(Select multiple realizations)"}
-            </ApiStateWrapper>
+            </QueryStateWrapper>
         </div>
     );
 }

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";
 
@@ -172,8 +172,8 @@ export function Settings({ moduleContext, workbenchSession }: ModuleFCProps<Stat
                     onChange={handleEnsembleSelectionChange}
                 />
             </Label>
-            <ApiStateWrapper
-                apiResult={tableDescriptionsQuery}
+            <QueryStateWrapper
+                queryResult={tableDescriptionsQuery}
                 loadingComponent={<CircularProgress />}
                 errorComponent={"Could not load table descriptions"}
                 className="flex flex-col gap-4"
@@ -212,7 +212,7 @@ export function Settings({ moduleContext, workbenchSession }: ModuleFCProps<Stat
                         </Label>
                     );
                 })}
-            </ApiStateWrapper>
+            </QueryStateWrapper>
         </>
     );
 }

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,8 +115,8 @@ export const View = (props: ModuleFCProps<State>) => {
     };
     return (
         <div className="w-full h-full" ref={wrapperDivRef}>
-            <ApiStateWrapper
-                apiResult={realizationsResponseQuery}
+            <QueryStateWrapper
+                queryResult={realizationsResponseQuery}
                 loadingComponent={<CircularProgress />}
                 errorComponent={"feil"}
             >
@@ -127,7 +127,7 @@ export const View = (props: ModuleFCProps<State>) => {
                     onHover={handleHover}
                     onUnhover={handleUnHover}
                 />
-            </ApiStateWrapper>
+            </QueryStateWrapper>
         </div>
     );
 };