feat(navbar): modify to select visualizations

solves #DEV-106, #DEV-48

apps/web/.env.development

+VITE_BACKEND_URL=http://localhost
+VITE_BACKEND_WSS_URL=ws://localhost:3001/
+VITE_STAGING=dev
+VITE_SKIP_LOGIN=true
+VITE_BACKEND_USER=:3000
+VITE_BACKEND_QUERY=:3003
+VITE_BACKEND_SCHEMA=:3002

apps/web/src/app/panels/Visualization.tsx

 import React from 'react';
 import { RawJSONVis, NodeLinkVis, PaohVis, SemanticSubstrates } from '@graphpolaris/shared/lib/vis';
-import { assignNewGraphQueryResult, useAppDispatch } from '@graphpolaris/shared/lib/data-access';
+import { useVisualizationCache } from '@graphpolaris/shared/lib/data-access';
 
 export const VisualizationPanel = () => {
+  const vis = useVisualizationCache()
   return (
     <div className="h-full w-full overflow-y-auto">
       <h1>Visualization Panel</h1>
+      <p className='text-sm'>{vis.visual}</p>
       {/* <div>
         <button
           onClick={() =>
@@ -32,15 +34,23 @@ export const VisualizationPanel = () => {
           Remove mock result
         </button>
       </div> */}
-
       {/* width: '83%',
           height: '95vh', */}
       <div className="w-full h-[calc(100%-2rem)]">
-        {/* <RawJSONVis /> */}
-        {/* <PaohVis rowHeight={30} hyperedgeColumnWidth={30} gapBetweenRanges={3} /> */}
-        <NodeLinkVis />
-        {/* <SemanticSubstrates /> */}
+        <div id="NodeLinkVis" className='tabContent'>
+          {vis.visual === "NodeLinkVis" ? <><NodeLinkVis /></> : null}
+        </div>
+        <div id="RawJSONVis" className='tabContent'>
+          {vis.visual === "RawJSONVis" ? <><RawJSONVis /></> : null}
+        </div>
+        <div id="PaohVis" className='tabContent'>
+          {vis.visual === "PaohVis" ? <><PaohVis rowHeight={30} hyperedgeColumnWidth={30} gapBetweenRanges={3} /></> : null}
+        </div>
+        {/* <div id="SemSubVis" className='tabContent'>
+          <SemanticSubstrates />
+        </div> */}
       </div>
+
       {/* <div /> */}
     </div>
   );

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

@@ -21,6 +21,7 @@ import {
   useDatabaseAPI,
   useSchemaAPI,
   useSessionCache,
+  useVisualizationCache,
 } from '@graphpolaris/shared/lib/data-access';
 import { DatabaseMenu } from './databasemenu';
 import { NewDatabaseForm } from './AddDatabaseForm/newdatabaseform';
@@ -28,6 +29,7 @@ import { addError } from '@graphpolaris/shared/lib/data-access/store/configSlice
 import { SearchBar } from './search/SearchBar';
 
 /** NavbarComponentProps is an interface containing the NavbarViewModel. */
+import { setVisual } from '@graphpolaris/shared/lib/data-access/store/visualisationSlice';
 export interface NavbarComponentProps {
   // changeColourPalette: () => void; FIXME move to redux
 }
@@ -52,6 +54,7 @@ export interface NavbarSubComponentState {
 export const Navbar = (props: NavbarComponentProps) => {
   const auth = useAuthorizationCache();
   const session = useSessionCache();
+  const vis = useVisualizationCache();
   const api = useDatabaseAPI();
   const schemaApi = useSchemaAPI();
   const dispatch = useAppDispatch();
@@ -77,6 +80,115 @@ export const Navbar = (props: NavbarComponentProps) => {
           <img src={currentLogo} />
         </a>
         <SearchBar />
+        <div className="dropdown">
+          <label tabIndex={0} className="s-1">
+            Vis
+          </label>
+          <ul tabIndex={0} className="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
+            <li
+              onClick={() => {
+                dispatch(setVisual('NodeLinkVis'));
+              }}
+            >
+              <a>Node Link</a>
+            </li>
+            <li
+              onClick={() => {
+                dispatch(setVisual('PaohVis'));
+              }}
+            >
+              <a>PaohVis</a>
+            </li>
+            <li
+              onClick={() => {
+                dispatch(setVisual('RawJSONVis'));
+              }}
+            >
+              <a>JSON Structure</a>
+            </li>
+            {/* <li><a>Semantic Substrates</a></li> */}
+          </ul>
+        </div>
+        <div className="dropdown">
+          <label tabIndex={1} className="btn s-1">
+            Data
+          </label>
+          <ul tabIndex={1} className="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
+            <li>
+              <button
+                onClick={() => {
+                  setAddDatabaseFormOpen(true);
+                  setMenuOpen(false);
+                  setSubMenuOpen(undefined);
+                }}
+              >
+                Add database
+              </button>
+            </li>
+            <li>
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setSubMenuOpen(subMenuOpen === 'changeDb' ? undefined : 'changeDb');
+                }}
+                className={`${session.databases.length === 0 ? 'btn-disabled' : ''} ${subMenuOpen === 'changeDb' ? 'btn-active' : ''}`}
+              >
+                Change Database
+              </button>
+              {subMenuOpen === 'changeDb' && (
+                <DatabaseMenu
+                  onClick={(db) => {
+                    if (session.currentDatabase != db) {
+                      dispatch(updateCurrentDatabase(db));
+                    }
+                    setSubMenuOpen(undefined);
+                    setMenuOpen(false);
+                  }}
+                />
+              )}
+            </li>
+            <li>
+              <button
+                onClick={() => setSubMenuOpen(subMenuOpen === 'deleteDb' ? undefined : 'deleteDb')}
+                className={`${session.databases.length === 0 ? 'btn-disabled' : ''} ${subMenuOpen === 'deleteDb' ? 'btn-active' : ''}`}
+              >
+                Delete Database
+              </button>
+              {subMenuOpen === 'deleteDb' && (
+                <DatabaseMenu
+                  onClick={(db) => {
+                    if (session.currentDatabase === db) {
+                      dispatch(updateCurrentDatabase(''));
+                    }
+                    api.DeleteDatabase(db);
+                    setSubMenuOpen(undefined);
+                    setMenuOpen(false);
+                  }}
+                />
+              )}
+            </li>
+          </ul>
+        </div>
+        <div className="dropdown">
+          <label tabIndex={2} className="btn s-1">
+            Adv
+          </label>
+          <ul tabIndex={2} className="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52"></ul>
+        </div>
+        <div className="dropdown">
+          <label tabIndex={3} className="btn s-1">
+            Share
+          </label>
+          <ul tabIndex={3} className="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
+            <li>
+              <a>Visual</a>
+            </li>
+            <li>
+              <a>Knowledge Base</a>
+            </li>
+          </ul>
+        </div>
+
         <div className="w-fit">
           <div className="">
             <button

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

@@ -10,6 +10,7 @@ import {
 } from '@graphpolaris/shared/lib/data-access/store/querybuilderSlice';
 import { sessionCacheState } from './sessionSlice';
 import { authState } from './authSlice';
+import { visualState } from './visualisationSlice';
 import { allMLEnabled, selectML } from './mlSlice';
 import { searchResultState, searchResultData, searchResultSchema, searchResultQB } from './searchResultSlice';
 
@@ -35,6 +36,7 @@ export const useQuerybuilderSettings = () => useAppSelector(queryBuilderSettings
 export const useConfig = () => useAppSelector(configState);
 export const useSessionCache = () => useAppSelector(sessionCacheState);
 export const useAuthorizationCache = () => useAppSelector(authState);
+export const useVisualizationCache = () =>useAppSelector(visualState);
 
 // Machine Learning Slices
 export const useML = () => useAppSelector(selectML);

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

@@ -7,6 +7,7 @@ import sessionSlice from './sessionSlice';
 import authSlice from './authSlice';
 import mlSlice from './mlSlice';
 import searchResultSlice from './searchResultSlice';
+import visualisationSlice from './visualisationSlice';
 
 export const store = configureStore({
   reducer: {
@@ -18,6 +19,7 @@ export const store = configureStore({
     config: configSlice,
     ml: mlSlice,
     searchResults: searchResultSlice,
+    visualize: visualisationSlice
   },
   middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware({

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

+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import type { RootState } from './store';
+import { dispatch } from 'd3';
+
+// Define the initial state using that type
+export const initialState = {
+  visual: 'NodeLinkVis',
+  tab: 'NodeLinkTab'
+
+};
+
+export const visualisationSlice = createSlice({
+  name: 'visualisation',
+  // `createSlice` will infer the state type from the `initialState` argument
+  initialState,
+  reducers: {
+    setVisualTab: (state, action) => {
+      state.visual = action.payload[0]
+      state.tab = action.payload[1]
+    },
+    setTab: (state, action) => {
+      state.tab=action.payload
+    },
+    setVisual: (state,action) => {
+      state.visual=action.payload
+    }
+    }
+  },
+);
+
+export const {setVisualTab, setTab, setVisual} = visualisationSlice.actions;
+
+// Other code such as selectors can use the imported `RootState` type
+// export const configState = (state: RootState) => state.config;
+export const visualState = (state:RootState)=> state.visualize;
+export default visualisationSlice.reducer;