diff --git a/apps/web/.env.development b/apps/web/.env.development
new file mode 100644
index 0000000000000000000000000000000000000000..ae8b069cf2c08ba17439ff02331a1cd821f24f10
--- /dev/null
+++ b/apps/web/.env.development
@@ -0,0 +1,7 @@
+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
diff --git a/apps/web/src/app/panels/Visualization.tsx b/apps/web/src/app/panels/Visualization.tsx
index 4aa79b6b35e74a415da7e570a2dfe7ea141453ac..c13d286dacfaa3bf7994c327120db1d473017313 100644
--- a/apps/web/src/app/panels/Visualization.tsx
+++ b/apps/web/src/app/panels/Visualization.tsx
@@ -1,11 +1,13 @@
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>
);
diff --git a/apps/web/src/components/navbar/navbar.tsx b/apps/web/src/components/navbar/navbar.tsx
index 4afff02392582cd12b6f6741398ebc245cb2a43d..74d3efd9832ea1ed74dfc894479a26039e6c9924 100644
--- a/apps/web/src/components/navbar/navbar.tsx
+++ b/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
diff --git a/libs/shared/lib/data-access/store/hooks.ts b/libs/shared/lib/data-access/store/hooks.ts
index 3288c7c469cfcc9c6b1c0a0645854d3fe5770031..35aca4601667e5691a8490a99395dff726f360b2 100644
--- a/libs/shared/lib/data-access/store/hooks.ts
+++ b/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);
diff --git a/libs/shared/lib/data-access/store/store.ts b/libs/shared/lib/data-access/store/store.ts
index ce9f4f555cde3ae83b004730c77bc11f39c1c5d0..f54cdc8d2d1e58e42a5a7d590e72752e7f28e21d 100644
--- a/libs/shared/lib/data-access/store/store.ts
+++ b/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({
diff --git a/libs/shared/lib/data-access/store/visualisationSlice.ts b/libs/shared/lib/data-access/store/visualisationSlice.ts
new file mode 100644
index 0000000000000000000000000000000000000000..75d27ae7604946c34bb0345b9f2847c08cc39b97
--- /dev/null
+++ b/libs/shared/lib/data-access/store/visualisationSlice.ts
@@ -0,0 +1,36 @@
+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;