From b0a7d68d98305547a5522f01f952eb3ecebca4d1 Mon Sep 17 00:00:00 2001
From: 2427021 <s.a.vink@students.uu.nl>
Date: Sun, 24 Mar 2024 21:40:13 +0100
Subject: [PATCH] feat(visManager): visbar tabs
---
apps/web/src/app/app.tsx | 9 +-
.../dbConnectionSelector.tsx | 2 +-
apps/web/src/components/navbar/navbar.tsx | 2 +-
pnpm-lock.yaml | 108 +++++++++++++++---
4 files changed, 102 insertions(+), 19 deletions(-)
diff --git a/apps/web/src/app/app.tsx b/apps/web/src/app/app.tsx
index 882fb72c8..3108f27db 100644
--- a/apps/web/src/app/app.tsx
+++ b/apps/web/src/app/app.tsx
@@ -20,6 +20,8 @@ import { URLParams, setParam } from '@graphpolaris/shared/lib/data-access/api/ur
import { Schema } from '@graphpolaris/shared/lib/schema/panel';
import { VisualizationPanel } from '@graphpolaris/shared/lib/vis';
import { QueryBuilder } from '@graphpolaris/shared/lib/querybuilder';
+import InfoPanel from '@graphpolaris/shared/lib/info/infoPanel';
+import { useVisualizationManager } from '@graphpolaris/shared/lib/vis/manager';
// const Schema = React.lazy(() => import('@graphpolaris/shared/lib/schema/panel'));
// const VisualizationPanel = React.lazy(() => import('@graphpolaris/shared/lib/vis'));
// const QueryBuilder = React.lazy(() => import('@graphpolaris/shared/lib/querybuilder'));
@@ -35,6 +37,7 @@ export function App(props: App) {
const session = useSessionCache();
const dispatch = useAppDispatch();
const queryBuilderSettings = useQuerybuilderSettings();
+ const manager = useVisualizationManager();
const runQuery = () => {
if (session?.currentSaveState && query) {
@@ -74,13 +77,13 @@ export function App(props: App) {
</aside>
<main className="flex w-screen h-[calc(100%-4.2rem)]">
<Resizable divisorSize={3} horizontal={true} defaultProportion={0.33}>
- <div className="h-full w-full panel">
- <Schema auth={authCheck} />
+ <div className="h-full w-full">
+ <InfoPanel auth={authCheck} manager={manager} />
</div>
<div className="h-full w-full">
<Resizable divisorSize={3} horizontal={false}>
<div className="w-full h-full panel">
- <VisualizationPanel />
+ <VisualizationPanel manager={manager} />
</div>
<div className="w-full h-full panel">
<QueryBuilder onRunQuery={runQuery} />
diff --git a/apps/web/src/components/navbar/DatabaseManagement/dbConnectionSelector.tsx b/apps/web/src/components/navbar/DatabaseManagement/dbConnectionSelector.tsx
index a61340226..e592fa58e 100644
--- a/apps/web/src/components/navbar/DatabaseManagement/dbConnectionSelector.tsx
+++ b/apps/web/src/components/navbar/DatabaseManagement/dbConnectionSelector.tsx
@@ -104,7 +104,7 @@ export default function DatabaseSelector({}) {
className={`h-2 w-2 rounded-full ${session.testedSaveState[session.currentSaveState] === DatabaseStatus.tested ? 'bg-success-500' : 'bg-danger-500'}`}
/>
</div>
- <p className="ml-2 truncate">Connected DB: {session.saveStates[session.currentSaveState].name}</p>
+ <p className="ml-2 truncate">{session.saveStates[session.currentSaveState].name}</p>
</div>
) : session.saveStates === undefined ? (
<>
diff --git a/apps/web/src/components/navbar/navbar.tsx b/apps/web/src/components/navbar/navbar.tsx
index 20ec0cf82..585ac8b82 100644
--- a/apps/web/src/components/navbar/navbar.tsx
+++ b/apps/web/src/components/navbar/navbar.tsx
@@ -52,7 +52,7 @@ export const Navbar = () => {
<div>
{/* <SearchBar /> */}
- {/* <ColorMode /> */}
+ <ColorMode />
<div className="w-fit" ref={dropdownRef}>
<div
className="relative inline-flex items-center justify-center w-8 h-8 overflow-hidden bg-secondary-500 rounded-full hover:bg-secondary-600 transition-colors duration-150 ease-in-out cursor-pointer"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cce9a2689..8edaf1eed 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -244,6 +244,9 @@ importers:
'@pixi-essentials/cull':
specifier: ^2.0.0
version: 2.0.0(@pixi/display@7.4.0)(@pixi/math@7.4.0)
+ '@radix-ui/react-dropdown-menu':
+ specifier: ^2.0.6
+ version: 2.0.6(@types/react-dom@18.2.22)(@types/react@18.2.65)(react-dom@18.2.0)(react@18.2.0)
'@radix-ui/react-tooltip':
specifier: ^1.0.7
version: 1.0.7(@types/react-dom@18.2.22)(@types/react@18.2.65)(react-dom@18.2.0)(react@18.2.0)
@@ -5902,7 +5905,6 @@ packages:
'@types/react-dom': 18.2.22
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
- dev: true
/@radix-ui/react-compose-refs@1.0.1(@types/react@18.2.65)(react@18.2.0):
resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==}
@@ -5942,7 +5944,6 @@ packages:
'@babel/runtime': 7.24.0
'@types/react': 18.2.65
react: 18.2.0
- dev: true
/@radix-ui/react-dismissable-layer@1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.65)(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-7UpBa/RKMoHJYjie1gkF1DlK8l1fdU/VKDpoS3rCCo8YBJR294GwcEHyxHw72yvphJ7ld0AXEcSLAzY2F/WyCg==}
@@ -5994,6 +5995,33 @@ packages:
react-dom: 18.2.0(react@18.2.0)
dev: false
+ /@radix-ui/react-dropdown-menu@2.0.6(@types/react-dom@18.2.22)(@types/react@18.2.65)(react-dom@18.2.0)(react@18.2.0):
+ resolution: {integrity: sha512-i6TuFOoWmLWq+M/eCLGd/bQ2HfAX1RJgvrBQ6AQLmzfvsLdefxbWu8G9zczcPFfcSPehz9GcpF6K9QYreFV8hA==}
+ peerDependencies:
+ '@types/react': '*'
+ '@types/react-dom': '*'
+ react: ^16.8 || ^17.0 || ^18.0
+ react-dom: ^16.8 || ^17.0 || ^18.0
+ peerDependenciesMeta:
+ '@types/react':
+ optional: true
+ '@types/react-dom':
+ optional: true
+ dependencies:
+ '@babel/runtime': 7.24.0
+ '@radix-ui/primitive': 1.0.1
+ '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.65)(react@18.2.0)
+ '@radix-ui/react-context': 1.0.1(@types/react@18.2.65)(react@18.2.0)
+ '@radix-ui/react-id': 1.0.1(@types/react@18.2.65)(react@18.2.0)
+ '@radix-ui/react-menu': 2.0.6(@types/react-dom@18.2.22)(@types/react@18.2.65)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.65)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.65)(react@18.2.0)
+ '@types/react': 18.2.65
+ '@types/react-dom': 18.2.22
+ react: 18.2.0
+ react-dom: 18.2.0(react@18.2.0)
+ dev: false
+
/@radix-ui/react-focus-guards@1.0.1(@types/react@18.2.65)(react@18.2.0):
resolution: {integrity: sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==}
peerDependencies:
@@ -6006,7 +6034,6 @@ packages:
'@babel/runtime': 7.24.0
'@types/react': 18.2.65
react: 18.2.0
- dev: true
/@radix-ui/react-focus-scope@1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.65)(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-upXdPfqI4islj2CslyfUBNlaJCPybbqRHAi1KER7Isel9Q2AtSJ0zRBZv8mWQiFXD2nyAJ4BhC3yXgZ6kMBSrQ==}
@@ -6031,6 +6058,29 @@ packages:
react-dom: 18.2.0(react@18.2.0)
dev: true
+ /@radix-ui/react-focus-scope@1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.65)(react-dom@18.2.0)(react@18.2.0):
+ resolution: {integrity: sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==}
+ peerDependencies:
+ '@types/react': '*'
+ '@types/react-dom': '*'
+ react: ^16.8 || ^17.0 || ^18.0
+ react-dom: ^16.8 || ^17.0 || ^18.0
+ peerDependenciesMeta:
+ '@types/react':
+ optional: true
+ '@types/react-dom':
+ optional: true
+ dependencies:
+ '@babel/runtime': 7.24.0
+ '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.65)(react@18.2.0)
+ '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.65)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.65)(react@18.2.0)
+ '@types/react': 18.2.65
+ '@types/react-dom': 18.2.22
+ react: 18.2.0
+ react-dom: 18.2.0(react@18.2.0)
+ dev: false
+
/@radix-ui/react-id@1.0.1(@types/react@18.2.65)(react@18.2.0):
resolution: {integrity: sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==}
peerDependencies:
@@ -6045,6 +6095,44 @@ packages:
'@types/react': 18.2.65
react: 18.2.0
+ /@radix-ui/react-menu@2.0.6(@types/react-dom@18.2.22)(@types/react@18.2.65)(react-dom@18.2.0)(react@18.2.0):
+ resolution: {integrity: sha512-BVkFLS+bUC8HcImkRKPSiVumA1VPOOEC5WBMiT+QAVsPzW1FJzI9KnqgGxVDPBcql5xXrHkD3JOVoXWEXD8SYA==}
+ peerDependencies:
+ '@types/react': '*'
+ '@types/react-dom': '*'
+ react: ^16.8 || ^17.0 || ^18.0
+ react-dom: ^16.8 || ^17.0 || ^18.0
+ peerDependenciesMeta:
+ '@types/react':
+ optional: true
+ '@types/react-dom':
+ optional: true
+ dependencies:
+ '@babel/runtime': 7.24.0
+ '@radix-ui/primitive': 1.0.1
+ '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.65)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.65)(react@18.2.0)
+ '@radix-ui/react-context': 1.0.1(@types/react@18.2.65)(react@18.2.0)
+ '@radix-ui/react-direction': 1.0.1(@types/react@18.2.65)(react@18.2.0)
+ '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@18.2.22)(@types/react@18.2.65)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.2.65)(react@18.2.0)
+ '@radix-ui/react-focus-scope': 1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.65)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-id': 1.0.1(@types/react@18.2.65)(react@18.2.0)
+ '@radix-ui/react-popper': 1.1.3(@types/react-dom@18.2.22)(@types/react@18.2.65)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-portal': 1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.65)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.22)(@types/react@18.2.65)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.65)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-roving-focus': 1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.65)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-slot': 1.0.2(@types/react@18.2.65)(react@18.2.0)
+ '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.65)(react@18.2.0)
+ '@types/react': 18.2.65
+ '@types/react-dom': 18.2.22
+ aria-hidden: 1.2.3
+ react: 18.2.0
+ react-dom: 18.2.0(react@18.2.0)
+ react-remove-scroll: 2.5.5(@types/react@18.2.65)(react@18.2.0)
+ dev: false
+
/@radix-ui/react-popper@1.1.2(@types/react-dom@18.2.22)(@types/react@18.2.65)(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-1CnGGfFi/bbqtJZZ0P/NQY20xdG3E0LALJaLUEoKwPLwl6PPPfbeiCqMVQnhoFRAxjJj4RpBRJzDmUgsex2tSg==}
peerDependencies:
@@ -6216,7 +6304,6 @@ packages:
'@types/react-dom': 18.2.22
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
- dev: true
/@radix-ui/react-select@1.2.2(@types/react-dom@18.2.22)(@types/react@18.2.65)(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-zI7McXr8fNaSrUY9mZe4x/HC0jTLY9fWNhO1oLWYMQGDXuV4UCivIGTxwioSzO0ZCYX9iSLyWmAh/1TOmX3Cnw==}
@@ -9954,7 +10041,6 @@ packages:
engines: {node: '>=10'}
dependencies:
tslib: 2.6.2
- dev: true
/aria-query@5.1.3:
resolution: {integrity: sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==}
@@ -10621,7 +10707,7 @@ packages:
engines: {node: '>=10.0.0'}
requiresBuild: true
dependencies:
- '@babel/runtime': 7.21.0
+ '@babel/runtime': 7.24.0
'@types/raf': 3.4.0
core-js: 3.36.0
raf: 3.4.1
@@ -12135,7 +12221,6 @@ packages:
/detect-node-es@1.1.0:
resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
- dev: true
/detect-package-manager@2.0.1:
resolution: {integrity: sha512-j/lJHyoLlWi6G1LDdLgvUtz60Zo5GEj+sVYtTVXnYLDPuzgC3llMxonXym9zIwhhUII8vjdw0LXxavpLqTbl1A==}
@@ -13796,7 +13881,6 @@ packages:
/get-nonce@1.0.1:
resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
engines: {node: '>=6'}
- dev: true
/get-npm-tarball-url@2.1.0:
resolution: {integrity: sha512-ro+DiMu5DXgRBabqXupW38h7WPZ9+Ad8UjwhvsmmN8w1sU7ab0nzAXvVZ4kqYg57OrqomRtJvepX5/xvFKNtjA==}
@@ -17875,7 +17959,7 @@ packages:
peerDependencies:
react: '>=16.13.1'
dependencies:
- '@babel/runtime': 7.21.0
+ '@babel/runtime': 7.24.0
react: 18.2.0
dev: true
@@ -18244,6 +18328,7 @@ packages:
/react-remove-scroll-bar@2.3.5(@types/react@18.2.65)(react@18.2.0):
resolution: {integrity: sha512-3cqjOqg6s0XbOjWvmasmqHch+RLxIEk2r/70rzGXuz3iIGQsQheEQyqYCBb5EECoD01Vo2SIbDqW4paLeLTASw==}
engines: {node: '>=10'}
+ deprecated: please update to the following version as this contains a bug (https://github.com/theKashey/react-remove-scroll-bar/issues/57)
peerDependencies:
'@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
react: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -18255,7 +18340,6 @@ packages:
react: 18.2.0
react-style-singleton: 2.2.1(@types/react@18.2.65)(react@18.2.0)
tslib: 2.6.2
- dev: true
/react-remove-scroll@2.5.5(@types/react@18.2.65)(react@18.2.0):
resolution: {integrity: sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==}
@@ -18274,7 +18358,6 @@ packages:
tslib: 2.6.2
use-callback-ref: 1.3.1(@types/react@18.2.65)(react@18.2.0)
use-sidecar: 1.1.2(@types/react@18.2.65)(react@18.2.0)
- dev: true
/react-resizable@3.0.5(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-vKpeHhI5OZvYn82kXOs1bC8aOXktGU5AmKAgaZS4F5JPburCtbmDPqE7Pzp+1kN4+Wb81LlF33VpGwWwtXem+w==}
@@ -18349,7 +18432,6 @@ packages:
invariant: 2.2.4
react: 18.2.0
tslib: 2.6.2
- dev: true
/react-test-renderer@18.2.0(react@18.2.0):
resolution: {integrity: sha512-JWD+aQ0lh2gvh4NM3bBM42Kx+XybOxCpgYK7F8ugAlpaTSnWsX+39Z4XkOykGZAHrjwwTZT3x3KxswVWxHPUqA==}
@@ -20807,7 +20889,6 @@ packages:
'@types/react': 18.2.65
react: 18.2.0
tslib: 2.6.2
- dev: true
/use-composed-ref@1.3.0(react@18.2.0):
resolution: {integrity: sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==}
@@ -20879,7 +20960,6 @@ packages:
detect-node-es: 1.1.0
react: 18.2.0
tslib: 2.6.2
- dev: true
/use-sync-external-store@1.2.0(react@18.2.0):
resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==}
--
GitLab