feat(visManager): full screen for vis

apps/web/src/app/app.tsx

@@ -59,6 +59,7 @@ export function App(props: App) {
 
   const [authCheck, setAuthCheck] = useState(false);
   const [tab, setTab] = useState<SideNavTab>('Schema');
+  const [visFullSize, setVisFullSize] = useState<boolean>(true);
 
   return (
     <div className="h-screen w-screen overflow-clip">
@@ -114,14 +115,33 @@ export function App(props: App) {
                     </div>
                   ) : null}
                   <div className="h-full w-full flex-grow">
-                    <Resizable divisorSize={3} horizontal={false}>
+                    {visFullSize ? (
                       <div className="w-full h-full border">
-                        <VisualizationPanel manager={manager} />
+                        <VisualizationPanel
+                          manager={manager}
+                          fullSize={() => {
+                            setVisFullSize(!visFullSize);
+                            tab === undefined && setTab('Schema');
+                            tab !== undefined && setTab(undefined);
+                          }}
+                        />
                       </div>
-                      <div className="w-full h-full border">
-                        <QueryBuilder onRunQuery={runQuery} />
-                      </div>
-                    </Resizable>
+                    ) : (
+                      <Resizable divisorSize={3} horizontal={false}>
+                        <div className="w-full h-full border">
+                          <VisualizationPanel
+                            manager={manager}
+                            fullSize={() => {
+                              setVisFullSize(!visFullSize);
+                              setTab(undefined);
+                            }}
+                          />
+                        </div>
+                        <div className="w-full h-full border">
+                          <QueryBuilder onRunQuery={runQuery} />
+                        </div>
+                      </Resizable>
+                    )}
                   </div>
                 </Resizable>
                 <div className="h-full w-60 ml-1">

libs/shared/lib/vis/components/bar.tsx

@@ -9,9 +9,10 @@ import { VisualizationManagerType } from '../hooks';
 
 type Props = {
   manager: VisualizationManagerType;
+  fullSize: () => void;
 };
 
-export default function VisualizationBar({ manager }: Props) {
+export default function VisualizationBar({ manager, fullSize }: Props) {
   const handleDragStart = (e: React.DragEvent<HTMLDivElement>, visId: string) => {
     e.dataTransfer.setData('text/plain', visId);
   };
@@ -97,7 +98,7 @@ export default function VisualizationBar({ manager }: Props) {
           <TooltipProvider delayDuration={0}>
             <Tooltip>
               <TooltipTrigger>
-                <Button type="secondary" variant="ghost" size="xs" iconComponent={<Fullscreen />} onClick={() => {}} />
+                <Button type="secondary" variant="ghost" size="xs" iconComponent={<Fullscreen />} onClick={fullSize} />
               </TooltipTrigger>
               <TooltipContent side={'bottom'}>
                 <p>Full screen</p>

libs/shared/lib/vis/components/panel.tsx

@@ -4,7 +4,7 @@ import VisualizationBar from './bar';
 import { VisualizationManagerType } from '../hooks';
 import { Recommender, NoData, Querying } from '../views';
 
-export const VisualizationPanel = ({ manager }: { manager: VisualizationManagerType }) => {
+export const VisualizationPanel = ({ manager, fullSize }: { manager: VisualizationManagerType; fullSize: () => void }) => {
   const query = useQuerybuilderGraph();
   const graphQueryResult = useGraphQueryResult();
 
@@ -21,7 +21,7 @@ export const VisualizationPanel = ({ manager }: { manager: VisualizationManagerT
 
   return (
     <div className="vis-panel h-full w-full">
-      <VisualizationBar manager={manager} />
+      <VisualizationBar manager={manager} fullSize={fullSize} />
       <div className="h-full w-full overflow-y-auto" style={graphQueryResult.nodes.length === 0 ? { overflow: 'hidden' } : {}}>
         {renderContent()}
       </div>