Get started with Jotai

rubenthoms · Jan 22, 2024 · f49a1d0 · f49a1d0
1 parent a191c46
commit f49a1d0
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 13 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -23,18 +23,22 @@
         "@headlessui/react": "^1.7.8",
         "@mui/base": "^5.0.0-beta.3",
         "@mui/icons-material": "^5.14.9",
+        "@tanstack/query-core": "^5.17.19",
         "@tanstack/react-query": "^5.0.5",
         "@tanstack/react-query-devtools": "^5.4.2",
         "@webviz/subsurface-viewer": "^0.3.1",
         "@webviz/well-completions-plot": "^0.0.1-alpha.1",
         "animate.css": "^4.1.1",
         "axios": "^1.6.5",
         "culori": "^3.2.0",
+        "jotai": "^2.6.2",
+        "jotai-tanstack-query": "^0.8.2",
         "lodash": "^4.17.21",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-plotly.js": "^2.6.0",
-        "uuid": "^9.0.0"
+        "uuid": "^9.0.0",
+        "wonka": "^6.3.4"
     },
     "devDependencies": {
         "@playwright/experimental-ct-react": "^1.39.0",

diff --git a/frontend/src/framework/ModuleInstance.ts b/frontend/src/framework/ModuleInstance.ts
@@ -1,5 +1,6 @@
 import { ErrorInfo } from "react";
 
+import { createStore } from "jotai";
 import { cloneDeep } from "lodash";
 
 import { BroadcastChannel, BroadcastChannelsDef, InputBroadcastChannelDef } from "./Broadcaster";
@@ -43,6 +44,8 @@ export class ModuleInstance<StateType extends StateBaseType> {
     private _inputChannels: Record<string, BroadcastChannel> = {};
     private _workbench: Workbench;
 
+    private _jotaiStore: ReturnType<typeof createStore> = createStore();
+
     constructor(
         module: Module<StateType>,
         instanceNumber: number,
@@ -91,6 +94,10 @@ export class ModuleInstance<StateType extends StateBaseType> {
         }
     }
 
+    getJotaiStore(): ReturnType<typeof createStore> {
+        return this._jotaiStore;
+    }
+
     getInputChannelDefs(): InputBroadcastChannelDef[] {
         return this._inputChannelDefs;
     }

diff --git a/...rnal/components/Content/private-components/ViewWrapper/private-components/viewContent.tsx b/...rnal/components/Content/private-components/ViewWrapper/private-components/viewContent.tsx
@@ -8,6 +8,8 @@ import { DebugProfiler } from "@framework/internal/components/DebugProfiler";
 import { ErrorBoundary } from "@framework/internal/components/ErrorBoundary";
 import { CircularProgress } from "@lib/components/CircularProgress";
 
+import { Provider } from "jotai";
+
 import { CrashView } from "./crashView";
 
 type ViewContentProps = {
@@ -21,6 +23,8 @@ export const ViewContent = React.memo((props: ViewContentProps) => {
         ModuleInstanceState.INITIALIZING
     );
 
+    const store = props.moduleInstance.getJotaiStore();
+
     React.useEffect(
         function handleMount() {
             setModuleInstanceState(props.moduleInstance.getModuleInstanceState());
@@ -126,13 +130,15 @@ export const ViewContent = React.memo((props: ViewContentProps) => {
                     source={StatusSource.View}
                     guiMessageBroker={props.workbench.getGuiMessageBroker()}
                 >
-                    <View
-                        moduleContext={props.moduleInstance.getContext()}
-                        workbenchSession={props.workbench.getWorkbenchSession()}
-                        workbenchServices={props.workbench.getWorkbenchServices()}
-                        workbenchSettings={props.workbench.getWorkbenchSettings()}
-                        initialSettings={props.moduleInstance.getInitialSettings() || undefined}
-                    />
+                    <Provider store={store}>
+                        <View
+                            moduleContext={props.moduleInstance.getContext()}
+                            workbenchSession={props.workbench.getWorkbenchSession()}
+                            workbenchServices={props.workbench.getWorkbenchServices()}
+                            workbenchSettings={props.workbench.getWorkbenchSettings()}
+                            initialSettings={props.moduleInstance.getInitialSettings() || undefined}
+                        />
+                    </Provider>
                 </DebugProfiler>
             </div>
         </ErrorBoundary>

diff --git a/frontend/src/modules/MyModule2/atoms.ts b/frontend/src/modules/MyModule2/atoms.ts
@@ -0,0 +1,3 @@
+import { atom } from "jotai";
+
+export const stateBasedOnEnsembleSet = atom<string | undefined>(undefined);
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
@@ -1,5 +1,7 @@
 import react from "@vitejs/plugin-react";
 
+import jotaiDebugLabel from "jotai/babel/plugin-debug-label";
+import jotaiReactRefresh from "jotai/babel/plugin-react-refresh";
 import path from "path";
 import { defineConfig } from "vite";
 import vitePluginChecker from "vite-plugin-checker";
@@ -25,7 +27,14 @@ export default defineConfig(({ mode }) => {
     }
 
     return {
-        plugins: [react(), vitePluginChecker({ typescript: true })],
+        plugins: [
+            react({
+                babel: {
+                    plugins: [jotaiDebugLabel, jotaiReactRefresh],
+                },
+            }),
+            vitePluginChecker({ typescript: true }),
+        ],
         build: {
             rollupOptions: {
                 input: {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { atom } from "jotai";

		export const stateBasedOnEnsembleSet = atom<string \| undefined>(undefined);