From 0537a1b938cf8928e2f94050d7b6df01777ce2e1 Mon Sep 17 00:00:00 2001
From: 2427021 <s.a.vink@students.uu.nl>
Date: Tue, 26 Mar 2024 13:07:58 +0100
Subject: [PATCH] feat(visManager): toolbar
---
apps/web/src/app/app.tsx | 3 +-
libs/shared/lib/data-viewer/index.tsx | 56 +++++++++++++++++++--------
2 files changed, 40 insertions(+), 19 deletions(-)
diff --git a/apps/web/src/app/app.tsx b/apps/web/src/app/app.tsx
index 4cd4d8672..ad0430f42 100644
--- a/apps/web/src/app/app.tsx
+++ b/apps/web/src/app/app.tsx
@@ -17,7 +17,6 @@ import Onboarding from '../components/onboarding/onboarding';
import { wsQueryRequest } from '@graphpolaris/shared/lib/data-access/broker';
import { URLParams, setParam } from '@graphpolaris/shared/lib/data-access/api/url';
-import { Schema } from '@graphpolaris/shared/lib/schema/panel';
import { VisualizationPanel } from '@graphpolaris/shared/lib/vis';
import { QueryBuilder } from '@graphpolaris/shared/lib/querybuilder';
import DataViewer from '@graphpolaris/shared/lib/data-viewer';
@@ -79,7 +78,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">
- <DataViewer auth={authCheck} manager={manager} />
+ <DataViewer auth={authCheck} />
</div>
<div className="h-full w-full">
<Resizable divisorSize={3} horizontal={false}>
diff --git a/libs/shared/lib/data-viewer/index.tsx b/libs/shared/lib/data-viewer/index.tsx
index 27b967512..4a4f384d4 100644
--- a/libs/shared/lib/data-viewer/index.tsx
+++ b/libs/shared/lib/data-viewer/index.tsx
@@ -1,20 +1,20 @@
import React, { useState } from 'react';
import { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../components';
-import { Addchart, Schema as SchemaIcon, Search as SearchIcon } from '@mui/icons-material';
+import { Fullscreen, Schema as SchemaIcon, Search as SearchIcon } from '@mui/icons-material';
import Schema from '../schema/panel';
import Searchbar from './search/searchbar';
-import Settings from './settings';
import ColorMode from '../components/color-mode';
+import ControlContainer from '../components/controls';
-export default function DataViewer({ auth, manager }: { auth: boolean; manager: any }) {
+export default function DataViewer({ auth }: { auth: boolean }) {
const [tab, setTab] = useState('Schema');
const [showDialog, setShowDialog] = useState<boolean>(true);
return (
<div className="info-panel w-full h-full flex">
- <div className="w-12 flex flex-col items-center justify-between">
- <div>
- <TooltipProvider delayDuration={100}>
+ <TooltipProvider delayDuration={100}>
+ <div className="w-12 flex flex-col items-center justify-between">
+ <div>
<Tooltip>
<TooltipTrigger>
<Button
@@ -55,19 +55,41 @@ export default function DataViewer({ auth, manager }: { auth: boolean; manager:
</TooltipTrigger>
<TooltipContent side={'right'}>Database schema</TooltipContent>
</Tooltip>
- </TooltipProvider>
- </div>
- <ColorMode />
- </div>
- {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} />}
+ <ColorMode />
</div>
- )}
+ {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>
+ <ControlContainer>
+ {tab === 'Schema' && (
+ <Tooltip>
+ <TooltipTrigger asChild>
+ <Button type="secondary" variant="ghost" size="xs" iconComponent={<Fullscreen />} onClick={() => {}} />
+ </TooltipTrigger>
+ <TooltipContent side={'bottom'}>
+ <p>Fit to screen</p>
+ </TooltipContent>
+ </Tooltip>
+ )}
+ {tab === 'Search' && (
+ <Tooltip>
+ <TooltipTrigger asChild>
+ <Button type="secondary" variant="ghost" size="xs" iconComponent={<Fullscreen />} onClick={() => {}} />
+ </TooltipTrigger>
+ <TooltipContent side={'bottom'}>
+ <p>Mock icon</p>
+ </TooltipContent>
+ </Tooltip>
+ )}
+ </ControlContainer>
+ </div>
+ {tab === 'Search' && <Searchbar />}
+ {tab === 'Schema' && <Schema auth={auth} />}
+ </div>
+ )}
+ </TooltipProvider>
</div>
);
}
--
GitLab