diff --git a/apps/web/src/app/app.tsx b/apps/web/src/app/app.tsx index 4cd4d86721a4ad5abfd53ab1b6fd1d29efc2fd87..ad0430f42057f5dac4f5b58259126d6017b6ce3d 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 27b967512909f1fceab435f07310fe2f88ba228a..4a4f384d4d396a39e938520e01c76fd823ca3b14 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> ); }