From d2d7a34e7fd287b36fc2c1272ff80d4b940a32eb Mon Sep 17 00:00:00 2001
From: 2427021 <s.a.vink@students.uu.nl>
Date: Tue, 26 Mar 2024 12:57:01 +0100
Subject: [PATCH] feat(visManager): config to right
---
apps/web/src/app/app.tsx | 8 ++-
.../infoPanel.tsx => data-viewer/index.tsx} | 49 ++++++++++---------
.../search/searchbar.tsx | 0
.../search/similarity.ts | 0
.../lib/{info => data-viewer}/settings.tsx | 0
libs/shared/lib/vis/bar.tsx | 8 ---
libs/shared/lib/vis/configuration/index.tsx | 40 +++++++++++++++
7 files changed, 72 insertions(+), 33 deletions(-)
rename libs/shared/lib/{info/infoPanel.tsx => data-viewer/index.tsx} (58%)
rename libs/shared/lib/{info => data-viewer}/search/searchbar.tsx (100%)
rename libs/shared/lib/{info => data-viewer}/search/similarity.ts (100%)
rename libs/shared/lib/{info => data-viewer}/settings.tsx (100%)
create mode 100644 libs/shared/lib/vis/configuration/index.tsx
diff --git a/apps/web/src/app/app.tsx b/apps/web/src/app/app.tsx
index 3108f27db..4cd4d8672 100644
--- a/apps/web/src/app/app.tsx
+++ b/apps/web/src/app/app.tsx
@@ -20,8 +20,9 @@ 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 DataViewer from '@graphpolaris/shared/lib/data-viewer';
import { useVisualizationManager } from '@graphpolaris/shared/lib/vis/manager';
+import ConfigPanel from '@graphpolaris/shared/lib/vis/configuration';
// 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'));
@@ -78,7 +79,7 @@ export function App(props: App) {
<main className="flex w-screen h-[calc(100%-4.2rem)]">
<Resizable divisorSize={3} horizontal={true} defaultProportion={0.33}>
<div className="h-full w-full">
- <InfoPanel auth={authCheck} manager={manager} />
+ <DataViewer auth={authCheck} manager={manager} />
</div>
<div className="h-full w-full">
<Resizable divisorSize={3} horizontal={false}>
@@ -91,6 +92,9 @@ export function App(props: App) {
</Resizable>
</div>
</Resizable>
+ <div className="h-full w-56 ml-1">
+ <ConfigPanel manager={manager} />
+ </div>
</main>
</div>
</div>
diff --git a/libs/shared/lib/info/infoPanel.tsx b/libs/shared/lib/data-viewer/index.tsx
similarity index 58%
rename from libs/shared/lib/info/infoPanel.tsx
rename to libs/shared/lib/data-viewer/index.tsx
index 7ff321647..27b967512 100644
--- a/libs/shared/lib/info/infoPanel.tsx
+++ b/libs/shared/lib/data-viewer/index.tsx
@@ -6,8 +6,9 @@ import Searchbar from './search/searchbar';
import Settings from './settings';
import ColorMode from '../components/color-mode';
-export default function InfoPanel({ auth, manager }: { auth: boolean; manager: any }) {
+export default function DataViewer({ auth, manager }: { auth: boolean; manager: any }) {
const [tab, setTab] = useState('Schema');
+ const [showDialog, setShowDialog] = useState<boolean>(true);
return (
<div className="info-panel w-full h-full flex">
@@ -21,7 +22,14 @@ export default function InfoPanel({ auth, manager }: { auth: boolean; manager: a
variant="ghost"
size="md"
iconComponent={<SearchIcon />}
- onClick={() => setTab('Search')}
+ onClick={() => {
+ if (!showDialog) {
+ setShowDialog(true);
+ } else if (tab === 'Search') {
+ setShowDialog(false);
+ }
+ setTab('Search');
+ }}
additionalClasses={tab === 'Search' ? 'bg-secondary-100' : ''}
/>
</TooltipTrigger>
@@ -34,37 +42,32 @@ export default function InfoPanel({ auth, manager }: { auth: boolean; manager: a
variant="ghost"
size="md"
iconComponent={<SchemaIcon />}
- onClick={() => setTab('Schema')}
+ onClick={() => {
+ if (!showDialog) {
+ setShowDialog(true);
+ } else if (tab === 'Schema') {
+ setShowDialog(false);
+ }
+ setTab('Schema');
+ }}
additionalClasses={tab === 'Schema' ? 'bg-secondary-100' : ''}
/>
</TooltipTrigger>
<TooltipContent side={'right'}>Database schema</TooltipContent>
</Tooltip>
- <Tooltip>
- <TooltipTrigger>
- <Button
- type="secondary"
- variant="ghost"
- size="md"
- iconComponent={<Addchart />}
- onClick={() => setTab('Visualization')}
- additionalClasses={tab === 'Visualization' ? 'bg-secondary-100' : ''}
- />
- </TooltipTrigger>
- <TooltipContent side={'right'}>Visualization settings</TooltipContent>
- </Tooltip>
</TooltipProvider>
</div>
<ColorMode />
</div>
- <div className="flex-1 border border-secondary-200 overflow-hidden">
- <div className="relative flex items-center justify-between z-[2] py-0 px-2 bg-secondary-100 border-b border-secondary-200">
- <h1 className="text-xs font-semibold text-secondary-800">{tab}</h1>
+ {showDialog && (
+ <div className="flex-1 border border-secondary-200 overflow-hidden">
+ <div className="relative flex items-center justify-between z-[2] py-0 px-2 bg-secondary-100 border-b border-secondary-200">
+ <h1 className="text-xs font-semibold text-secondary-800">{tab}</h1>
+ </div>
+ {tab === 'Search' && <Searchbar />}
+ {tab === 'Schema' && <Schema auth={auth} />}
</div>
- {tab === 'Search' && <Searchbar />}
- {tab === 'Schema' && <Schema auth={auth} />}
- {tab === 'Visualization' && <Settings manager={manager} />}
- </div>
+ )}
</div>
);
}
diff --git a/libs/shared/lib/info/search/searchbar.tsx b/libs/shared/lib/data-viewer/search/searchbar.tsx
similarity index 100%
rename from libs/shared/lib/info/search/searchbar.tsx
rename to libs/shared/lib/data-viewer/search/searchbar.tsx
diff --git a/libs/shared/lib/info/search/similarity.ts b/libs/shared/lib/data-viewer/search/similarity.ts
similarity index 100%
rename from libs/shared/lib/info/search/similarity.ts
rename to libs/shared/lib/data-viewer/search/similarity.ts
diff --git a/libs/shared/lib/info/settings.tsx b/libs/shared/lib/data-viewer/settings.tsx
similarity index 100%
rename from libs/shared/lib/info/settings.tsx
rename to libs/shared/lib/data-viewer/settings.tsx
diff --git a/libs/shared/lib/vis/bar.tsx b/libs/shared/lib/vis/bar.tsx
index 896d78e32..6b3db8716 100644
--- a/libs/shared/lib/vis/bar.tsx
+++ b/libs/shared/lib/vis/bar.tsx
@@ -110,14 +110,6 @@ export default function VisualizationBar({ manager }: Props) {
<p>Full screen</p>
</TooltipContent>
</Tooltip>
- <Tooltip disabled={showVisSettings}>
- <TooltipTrigger>
- <Button type="secondary" variant="ghost" size="xs" iconComponent={<SettingsInputComponent />} onClick={() => {}} />
- </TooltipTrigger>
- <TooltipContent side={'bottom'} disabled={showVisSettings}>
- <p>Visualization settings</p>
- </TooltipContent>
- </Tooltip>
</TooltipProvider>
</ControlContainer>
</div>
diff --git a/libs/shared/lib/vis/configuration/index.tsx b/libs/shared/lib/vis/configuration/index.tsx
new file mode 100644
index 000000000..8ec320447
--- /dev/null
+++ b/libs/shared/lib/vis/configuration/index.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { Button } from '../../components';
+import { Delete } from '@mui/icons-material';
+import Input from '../../components/inputs';
+
+type Props = {
+ manager: any;
+};
+
+export default function ConfigPanel({ manager }: Props) {
+ return (
+ <div className="w-full h-full flex flex-col border">
+ <div className="border-b border-secondary-200 py-2">
+ <div className="flex justify-between items-center px-4 py-2">
+ <span className="text-xs font-bold">Visualisation</span>
+ <Button
+ type="secondary"
+ variant="ghost"
+ size="xs"
+ iconComponent={<Delete />}
+ onClick={() => {
+ manager.deleteVisualization(manager.active);
+ }}
+ />
+ </div>
+ <div className="flex justify-between items-center px-4 py-1">
+ <span className="text-xs font-normal">Type</span>
+ <div className="w-36">
+ <Input type="dropdown" size="xs" options={[]} value={manager.activeType} onChange={() => {}} />
+ </div>
+ </div>
+ <div className="flex justify-between items-center px-4 py-1">
+ <span className="text-xs font-normal">Name</span>
+ <input type="text" className="border rouded w-36" value={manager.active} onChange={() => {}} />
+ </div>
+ </div>
+ <div className="border-b border-secondary-200 py-2">{manager.renderSettings()}</div>
+ </div>
+ );
+}
--
GitLab