[feat] Reset board state on exit (#2956)

src/aimcore/web/ui/public/aim_ui_core.py

@@ -2,7 +2,7 @@
 # Bindings for fetching Aim Objects
 ####################
 
-from js import search, runFunction, localStorage
+from js import search, runFunction
 import json
 import hashlib
 
@@ -239,14 +239,8 @@ def group(name, data, options, key=None):
 
 current_layout = []
 
-
-saved_state_str = localStorage.getItem("app_state")
-
 state = {}
 
-if saved_state_str:
-    state = json.loads(saved_state_str)
-
 
 def set_state(update, board_path, persist=False):
     from js import setState
@@ -256,6 +250,10 @@ def set_state(update, board_path, persist=False):
 
     state[board_path].update(update)
 
+    for key in state[board_path]:
+        if state[board_path][key] is None:
+            del state[board_path][key]
+
     setState(state, board_path, persist)
 
 
@@ -1615,12 +1613,17 @@ def __init__(self, path, state={}, block=None, key=None):
 
         self.data = path
 
-        set_state(state or {}, path)
+        self.board_state = state
+
+        self.callbacks = {"on_mount": self.on_mount}
 
         self.render()
 
     def get_state(self):
         return state[self.data] if self.data in state else None
+
+    def on_mount(self):
+        set_state(self.board_state or {}, self.data)
 
 
 class BoardLink(Component):

src/aimcore/web/ui/src/pages/Board/Board.tsx

@@ -21,6 +21,7 @@ import {
   getQueryResultsCacheMap,
   clearQueryResultsCache,
   clearPendingQueriesMap,
+  resetBoardState,
 } from 'services/pyodide/pyodide';
 
 // import SaveBoard from './components/SaveBoard';
@@ -275,6 +276,7 @@ def set_session_state(state_slice):
         }
       },
     );
+
     return () => {
       window.clearTimeout(timerId.current);
       clearDataCache();
@@ -283,6 +285,7 @@ def set_session_state(state_slice):
       }
       unsubscribeFromBoardUpdates();
       clearPendingQueriesMap(boardPath);
+      resetBoardState(boardPath);
     };
   }, [boardPath]);
 

src/aimcore/web/ui/src/pages/Board/components/VisualizationElements/BoardVizElement.tsx

@@ -21,6 +21,10 @@ function BoardVizElement(props: any) {
     }
   }, [code, boards]);
 
+  React.useEffect(() => {
+    props.callbacks.on_mount();
+  }, []);
+
   return (
     <div
       className='VizComponentContainer'

src/aimcore/web/ui/src/services/pyodide/pyodide.ts

@@ -64,6 +64,17 @@ export function clearPendingQueriesMap(boardPath: string) {
   }
 }
 
+export function resetBoardState(boardPath: string) {
+  let pyodide = pyodideEngine.getPyodideCurrent();
+  let namespace = pyodideEngine.getPyodideNamespace();
+
+  if (pyodide) {
+    pyodide.runPython(`state.pop('${boardPath}', None)`, {
+      globals: namespace,
+    });
+  }
+}
+
 let layoutUpdateTimer: number;
 let prevBoardPath: undefined | string;