feat(visManager): toolbar

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}>

libs/shared/lib/data-viewer/index.tsx

 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>
   );
 }