feat(fix): clear schema and QB on new db

If the database changes, schema and qb are cleared

apps/web/src/components/navbar/DatabaseManagement/DatabaseSelector.tsx

@@ -6,6 +6,8 @@ import { SettingsForm } from './forms/settings';
 import { NewDatabaseForm } from './forms/AddDatabase/newdatabase';
 import { LoadingSpinner } from '@graphpolaris/shared/lib/components/LoadingSpinner';
 import { addError } from '@graphpolaris/shared/lib/data-access/store/configSlice';
+import { clearQB } from '@graphpolaris/shared/lib/data-access/store/querybuilderSlice';
+import { clearSchema } from '@graphpolaris/shared/lib/data-access/store/schemaSlice';
 
 export default function DatabaseSelector({}) {
   const dispatch = useAppDispatch();
@@ -42,7 +44,9 @@ export default function DatabaseSelector({}) {
       timeoutId = setTimeout(() => {
         dispatch(addError("Couldn't establish connection"));
         setConnecting(false);
-        dispatch(updateCurrentDatabase(''));
+        dispatch(updateCurrentDatabase(undefined));
+        dispatch(clearQB());
+        dispatch(clearSchema());
       }, 10000);
     }
 
@@ -74,7 +78,10 @@ export default function DatabaseSelector({}) {
       >
         <div
           className="flex w-full px-4 py-2 hover:bg-slate-200 transition-colors duration-300"
-          onClick={() => setDbSelectionMenuOpen(!dbSelectionMenuOpen)}
+          onClick={() => {
+            if (session.databases?.length === 0) setAddDatabaseFormOpen(true);
+            else setDbSelectionMenuOpen(!dbSelectionMenuOpen);
+          }}
         >
           <div className="flex items-center w-full shrink-0">
             {connecting ? (
@@ -93,11 +100,15 @@ export default function DatabaseSelector({}) {
                   {session.currentDatabase}
                 </p>
               </>
-            ) : session.databases.length == 0 ? (
+            ) : session.databases === undefined ? (
               <>
                 <LoadingSpinner />
                 <p className="ml-2">Retrieving databases</p>
               </>
+            ) : session.databases?.length === 0 ? (
+              <>
+                <p className="ml-2">Add your first Database</p>
+              </>
             ) : (
               <>
                 <div className="h-2 w-2 rounded-full bg-slate-500" />
@@ -107,7 +118,7 @@ export default function DatabaseSelector({}) {
           </div>
           <ArrowDropDown />
         </div>
-        {dbSelectionMenuOpen && (
+        {dbSelectionMenuOpen && session.databases && (
           <div className="absolute w-full top-11 z-50 bg-slate-100 border">
             <div
               className="flex items-center p-2 hover:bg-slate-200"
@@ -119,7 +130,7 @@ export default function DatabaseSelector({}) {
               }}
               title="Add new database"
             >
-              {session.databases.length == 0 ? (
+              {session.databases.length === 0 ? (
                 <>
                   <Add />
                   <p className="ml-2">Add your first database</p>
@@ -141,6 +152,8 @@ export default function DatabaseSelector({}) {
                     setDbSelectionMenuOpen(false);
                     setConnecting(true);
                     dispatch(updateCurrentDatabase(db.Name));
+                    dispatch(clearQB());
+                    dispatch(clearSchema());
                   } else {
                     setDbSelectionMenuOpen(false);
                   }
@@ -174,7 +187,9 @@ export default function DatabaseSelector({}) {
                       className="text-slate-700 hover:text-slate-400 transition-colors duration-300"
                       onClick={(e) => {
                         e.preventDefault();
-                        dispatch(updateCurrentDatabase(''));
+                        dispatch(updateCurrentDatabase(undefined));
+                        dispatch(clearQB());
+                        dispatch(clearSchema());
                         api.DeleteDatabase(db.Name);
                       }}
                       title="Delete database"

libs/shared/lib/data-access/api/database.ts

@@ -2,6 +2,8 @@
 
 import { useAuth } from '../authorization';
 import { useAppDispatch, useSessionCache } from '../store';
+import { clearQB } from '../store/querybuilderSlice';
+import { clearSchema } from '../store/schemaSlice';
 import { updateCurrentDatabase, updateDatabaseList } from '../store/sessionSlice';
 
 export enum DatabaseType {
@@ -69,7 +71,11 @@ export const useDatabaseAPI = () => {
           if (!response.ok) {
             reject(response.statusText);
           }
-          if (setAsCurrent) dispatch(updateCurrentDatabase(request.name));
+          if (setAsCurrent){ 
+            dispatch(updateCurrentDatabase(request.name));
+            dispatch(clearQB());
+            dispatch(clearSchema());
+          }
           if (updateDatabaseCache) GetAllDatabases({ updateSessionCache: true }).catch(reject);
 
           resolve();

libs/shared/lib/data-access/store/schemaSlice.ts

@@ -27,49 +27,17 @@ export const initialState: schemaSliceI = {
 };
 export const schemaSlice = createSlice({
   name: 'schema',
-  // `createSlice` will infer the state type from the `initialState` argument
   initialState,
   reducers: {
     setSchema: (state, action: PayloadAction<SchemaGraph>) => {
-      console.log('setSchema', action);
       state.graph = action.payload;
     },
+    clearSchema: (state) => {
+      state.graph = new SchemaGraphology().export();
+    },
 
     readInSchemaFromBackend: (state, action: PayloadAction<SchemaFromBackend>) => {
       state.graph = SchemaUtils.schemaBackend2Graphology(action.payload).export();
-      // console.log('Updated schema from backend');
-      // The graph schema needs a node for each node AND edge. These need then be connected
-
-      // nodes.forEach((node) => {
-      //   schema.addNode(node.name, {
-      //     name: node.name,
-      //     attributes: node.attributes,
-      //     x: 0,
-      //     y: 0,
-      //   });
-      // });
-
-      // // The name of the edge will be name + from + to, since edge names are not unique
-      // edges.forEach((edge) => {
-      //   const edgeID = edge.name + edge.from + edge.to;
-
-      //   // This node is the actual edge
-      //   schema.addNode(edgeID, {
-      //     name: edge.name,
-      //     attributes: edge.attributes,
-      //     from: edge.from,
-      //     to: edge.to,
-      //     collection: edge.collection,
-      //     x: 0,
-      //     y: 0,
-      //   });
-
-      //   // These lines are simply for keeping the schema together
-      //   schema.addDirectedEdgeWithKey(edgeID + 'f', edge.from, edgeID);
-      //   schema.addDirectedEdgeWithKey(edgeID + 't', edgeID, edge.to);
-      // });
-
-      // state.graphologySerialized = schema.export();
     },
 
     setSchemaSettings: (state, action: PayloadAction<SchemaSettings>) => {
@@ -77,7 +45,7 @@ export const schemaSlice = createSlice({
     },
   },
 });
-export const { readInSchemaFromBackend, setSchema, setSchemaSettings } = schemaSlice.actions;
+export const { readInSchemaFromBackend, setSchema, setSchemaSettings, clearSchema } = schemaSlice.actions;
 
 export const schemaSettingsState = (state: RootState) => state.schema.settings;
 

libs/shared/lib/data-access/store/sessionSlice.ts

@@ -12,13 +12,13 @@ export type ErrorMessage = {
 /** Cache type */
 export type SessionCacheI = {
   currentDatabase?: string;
-  databases: DatabaseInfo[];
+  databases: DatabaseInfo[] | undefined;
 };
 
 // Define the initial state using that type
 export const initialState: SessionCacheI = {
   currentDatabase: undefined,
-  databases: [],
+  databases: undefined,
 };
 
 export const sessionSlice = createSlice({
@@ -26,9 +26,7 @@ export const sessionSlice = createSlice({
   // `createSlice` will infer the state type from the `initialState` argument
   initialState,
   reducers: {
-    updateCurrentDatabase(state, action: PayloadAction<string>) {
-      console.log('Updating current database', state.currentDatabase, action.payload);
-      
+    updateCurrentDatabase(state, action: PayloadAction<string|undefined>) {
       state.currentDatabase = action.payload;
     },
     updateDatabaseList(state, action: PayloadAction<DatabaseInfo[]>) {