Further testing

frontend/src/framework/internal/components/Settings/private-components/setting.tsx

@@ -10,6 +10,8 @@ import { CircularProgress } from "@lib/components/CircularProgress";
 import { resolveClassNames } from "@lib/utils/resolveClassNames";
 import { Settings as SettingsIcon } from "@mui/icons-material";
 
+import { Provider } from "jotai";
+
 import { DebugProfiler } from "../../DebugProfiler";
 
 type SettingProps = {
@@ -23,6 +25,7 @@ export const Setting: React.FC<SettingProps> = (props) => {
     const [moduleInstanceState, setModuleInstanceState] = React.useState<ModuleInstanceState>(
         ModuleInstanceState.INITIALIZING
     );
+    const store = props.moduleInstance.getJotaiStore();
 
     React.useEffect(() => {
         setModuleInstanceState(props.moduleInstance.getModuleInstanceState());
@@ -98,13 +101,15 @@ export const Setting: React.FC<SettingProps> = (props) => {
                             statusController={props.moduleInstance.getStatusController()}
                             guiMessageBroker={props.workbench.getGuiMessageBroker()}
                         >
-                            <Settings
-                                moduleContext={props.moduleInstance.getContext()}
-                                workbenchSession={props.workbench.getWorkbenchSession()}
-                                workbenchServices={props.workbench.getWorkbenchServices()}
-                                workbenchSettings={props.workbench.getWorkbenchSettings()}
-                                initialSettings={props.moduleInstance.getInitialSettings() || undefined}
-                            />
+                            <Provider store={store}>
+                                <Settings
+                                    moduleContext={props.moduleInstance.getContext()}
+                                    workbenchSession={props.workbench.getWorkbenchSession()}
+                                    workbenchServices={props.workbench.getWorkbenchServices()}
+                                    workbenchSettings={props.workbench.getWorkbenchSettings()}
+                                    initialSettings={props.moduleInstance.getInitialSettings() || undefined}
+                                />
+                            </Provider>
                         </DebugProfiler>
                     </div>
                 </div>

frontend/src/modules/MyModule2/atoms.ts

@@ -1,3 +1,16 @@
+import { apiService } from "@framework/ApiService";
+import { EnsembleIdent } from "@framework/EnsembleIdent";
+
 import { atom } from "jotai";
+import { atomWithQuery } from "jotai-tanstack-query";
 
-export const stateBasedOnEnsembleSet = atom<string | undefined>(undefined);
+export const selectedEnsembleAtom = atom<EnsembleIdent | null>(null);
+export const vectorsAtom = atomWithQuery((get) => ({
+    queryKey: ["ensembles", get(selectedEnsembleAtom)?.toString()],
+    queryFn: () =>
+        apiService.timeseries.getVectorList(
+            get(selectedEnsembleAtom)?.getCaseUuid() ?? "",
+            get(selectedEnsembleAtom)?.getEnsembleName() ?? ""
+        ),
+}));
+export const atomBasedOnVectors = atom<boolean>((get) => get(vectorsAtom).isFetching);

frontend/src/modules/MyModule2/loadModule.tsx

@@ -1,30 +1,15 @@
 import { ModuleRegistry } from "@framework/ModuleRegistry";
-import { Input } from "@lib/components/Input";
 
+import "./atoms";
+import { Settings } from "./settings";
 import { State } from "./state";
+import { View } from "./view";
 
 const defaultState: State = {
     text: "Hello World",
 };
 
 const module = ModuleRegistry.initModule<State>("MyModule2", defaultState);
 
-module.viewFC = (props) => {
-    const text = props.moduleContext.useStoreValue("text");
-
-    return (
-        <div>
-            <h1>Text: {text as string}</h1>
-        </div>
-    );
-};
-
-module.settingsFC = (props) => {
-    const [text, setText] = props.moduleContext.useStoreState("text");
-
-    return (
-        <div>
-            <Input value={text} onChange={(e) => setText(e.target.value)} />
-        </div>
-    );
-};
+module.viewFC = View;
+module.settingsFC = Settings;

frontend/src/modules/MyModule2/settings.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+
+import { VectorDescription_api } from "@api";
+import { EnsembleIdent } from "@framework/EnsembleIdent";
+import { ModuleFCProps } from "@framework/Module";
+import { useEnsembleSet } from "@framework/WorkbenchSession";
+import { SingleEnsembleSelect } from "@framework/components/SingleEnsembleSelect";
+import { Label } from "@lib/components/Label";
+import { Select, SelectOption } from "@lib/components/Select";
+
+import { useAtom } from "jotai";
+
+import { atomBasedOnVectors, selectedEnsembleAtom, vectorsAtom } from "./atoms";
+import { State } from "./state";
+
+export const Settings = (props: ModuleFCProps<State>) => {
+    const ensembleSet = useEnsembleSet(props.workbenchSession);
+
+    const [selectedEnsemble, setSelectedEnsemble] = useAtom(selectedEnsembleAtom);
+    const [result] = useAtom(vectorsAtom);
+    const [isFetching] = useAtom(atomBasedOnVectors);
+
+    function handleEnsembleSelectionChange(ensembleIdent: EnsembleIdent | null) {
+        setSelectedEnsemble(ensembleIdent);
+    }
+
+    return (
+        <>
+            <Label text="Ensemble">
+                <SingleEnsembleSelect
+                    ensembleSet={ensembleSet}
+                    value={selectedEnsemble}
+                    onChange={handleEnsembleSelectionChange}
+                />
+            </Label>
+            {isFetching ? (
+                <div>Loading...</div>
+            ) : (
+                <Label text="Vector">
+                    <Select options={makeVectorOptionItems(result.data)} filter={true} size={5} />
+                </Label>
+            )}
+        </>
+    );
+};
+
+function makeVectorOptionItems(vectorDescriptionsArr: VectorDescription_api[] | undefined): SelectOption[] {
+    const itemArr: SelectOption[] = [];
+    if (vectorDescriptionsArr) {
+        for (const vec of vectorDescriptionsArr) {
+            itemArr.push({ value: vec.name, label: vec.descriptive_name });
+            //itemArr.push({ value: vec.name, label: vec.descriptive_name + (vec.has_historical ? " (hasHist)" : "") });
+        }
+    }
+    return itemArr;
+}
+
+Settings.displayName = "Settings";

frontend/src/modules/MyModule2/view.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+import { ModuleFCProps } from "@framework/Module";
+
+import { useAtom } from "jotai";
+
+import { atomBasedOnVectors } from "./atoms";
+import { State } from "./state";
+
+export const View = (props: ModuleFCProps<State>) => {
+    const [isFetching] = useAtom(atomBasedOnVectors);
+
+    return (
+        <div className="h-full w-full flex flex-col justify-center items-center">
+            {isFetching ? (
+                <div>Settings is loading...</div>
+            ) : (
+                <div className="text-4xl font-bold">Settings is ready</div>
+            )}
+        </div>
+    );
+};
+
+View.displayName = "View";