chore: fix resizable when empty children

apps/web/src/app/app.tsx

@@ -13,14 +13,19 @@ import { Navbar } from '../components/navbar/navbar';
 import { Resizable } from '@graphpolaris/shared/lib/components/Resizable';
 import { DashboardAlerts } from '@graphpolaris/shared/lib/data-access/authorization/dashboardAlerts';
 import { EventBus } from '@graphpolaris/shared/lib/data-access/api/eventBus';
-import Onboarding from '../components/onboarding/onboarding';
+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 { VisualizationPanel } from '@graphpolaris/shared/lib/vis';
 import { QueryBuilder } from '@graphpolaris/shared/lib/querybuilder';
-import Sidebar from '@graphpolaris/shared/lib/sidebar';
+import { SideNavTab, Sidebar } from '@graphpolaris/shared/lib/sidebar';
 import { useVisualizationManager } from '@graphpolaris/shared/lib/vis/hooks';
 import { ConfigPanel } from '@graphpolaris/shared/lib/vis/components/config';
+import { Tooltip, TooltipTrigger, Button, TooltipContent, TooltipProvider } from '@graphpolaris/shared';
+import ControlContainer from '@graphpolaris/shared/lib/components/controls';
+import Searchbar from '@graphpolaris/shared/lib/sidebar/search/searchbar';
+import Schema from '@graphpolaris/shared/lib/schema/panel';
+import { Fullscreen, Schema as SchemaIcon, Search as SearchIcon } from '@mui/icons-material';
 
 export type App = {
   load?: string;
@@ -53,6 +58,7 @@ export function App(props: App) {
   }, [props]);
 
   const [authCheck, setAuthCheck] = useState(false);
+  const [tab, setTab] = useState<SideNavTab>('Schema');
 
   return (
     <div className="h-screen w-screen overflow-clip">
@@ -71,10 +77,43 @@ export function App(props: App) {
               <aside className="h-auto w-auto">
                 <Navbar />
               </aside>
-              <main className="flex w-screen h-[calc(100%-4.2rem)]">
+              <main className="flex w-screen h-[calc(100%-4.2rem)] flex-row">
+                <Sidebar onTab={(tab) => setTab(tab)} />
                 <Resizable divisorSize={3} horizontal={true} defaultProportion={0.33}>
-                  <Sidebar auth={authCheck} />
-                  <div className="h-full w-full">
+                  {tab !== undefined ? (
+                    <div className="flex-1 border overflow-hidden w-full h-full">
+                      <div className="relative flex items-center justify-between z-[2] py-0 px-2 bg-secondary-100  border-b">
+                        <h1 className="text-xs font-semibold text-secondary-800">{tab}</h1>
+                        <ControlContainer>
+                          <TooltipProvider delayDuration={100}>
+                            {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>
+                            )}
+                          </TooltipProvider>
+                        </ControlContainer>
+                      </div>
+                      {tab === 'Search' && <Searchbar />}
+                      {tab === 'Schema' && <Schema auth={authCheck} />}
+                    </div>
+                  ) : null}
+                  <div className="h-full w-full flex-grow">
                     <Resizable divisorSize={3} horizontal={false}>
                       <div className="w-full h-full border">
                         <VisualizationPanel manager={manager} />

apps/web/src/components/onboarding/onboarding.tsx

@@ -11,7 +11,7 @@ interface OnboardingState {
   stepIndex?: number;
 }
 
-export default function Onboarding({}) {
+export function Onboarding({}) {
   const location = useLocation();
   const auth = useAuthorizationCache();
   const [showWalkthrough, setShowWalkthrough] = useState<boolean>(false);

libs/shared/lib/components/Resizable.tsx

@@ -7,13 +7,25 @@ type Props = {
   horizontal: boolean;
   divisorSize: number;
   defaultProportion?: number;
+  classNameLeft?: string;
+  classNameRight?: string;
 };
 
 function convertRemToPixels(rem: number) {
   return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
 }
 
-export const Resizable = ({ children, className, style, horizontal, divisorSize, defaultProportion, ...props }: Props) => {
+export const Resizable = ({
+  children,
+  className,
+  style,
+  horizontal,
+  divisorSize,
+  defaultProportion,
+  classNameLeft,
+  classNameRight,
+  ...props
+}: Props) => {
   const ref = useRef<HTMLDivElement>(null);
   const children2 = children as React.ReactElement[];
   const [firstSize, setFirstSize] = React.useState<number>(0);
@@ -65,13 +77,24 @@ export const Resizable = ({ children, className, style, horizontal, divisorSize,
     setDragging(false);
   }
 
+  if (!children2[0]) return children2[1];
+  if (!children2[1]) return children2[0];
+
   return (
     <>
       {dragging && <div className="absolute top-0 left-0 w-screen h-screen z-10 cursor-grabbing" onMouseMove={onMouseMove}></div>}
-      <div className={` w-full h-full flex ${horizontal ? 'flex-row' : 'flex-col'} ${className}`} style={style} {...props} ref={ref}>
+      <div
+        className={`w-full h-full flex flex-grow ${horizontal ? 'flex-row' : 'flex-col'} ${className !== undefined ? className : ''} `}
+        style={style}
+        {...props}
+        ref={ref}
+      >
         {firstSize > 0 && (
           <>
-            <div className="h-full w-full" style={horizontal ? { maxWidth: firstSize } : { maxHeight: firstSize }}>
+            <div
+              className={'h-full w-full' + (classNameLeft !== undefined ? classNameLeft : '')}
+              style={horizontal ? { maxWidth: firstSize } : { maxHeight: firstSize }}
+            >
               {children2[0]}
             </div>
             <div
@@ -83,7 +106,10 @@ export const Resizable = ({ children, className, style, horizontal, divisorSize,
               onTouchEnd={onTouchEnd}
               onTouchCancel={onTouchCancel}
             ></div>
-            <div className="h-full w-full" style={horizontal ? { maxWidth: secondSize } : { maxHeight: secondSize }}>
+            <div
+              className={'h-full w-full ' + (classNameRight !== undefined ? classNameRight : '')}
+              style={horizontal ? { maxWidth: secondSize } : { maxHeight: secondSize }}
+            >
               {children2[1]}
             </div>
           </>

libs/shared/lib/sidebar/index.tsx

 import React, { useState } from 'react';
 import { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../components';
 import { Fullscreen, Schema as SchemaIcon, Search as SearchIcon } from '@mui/icons-material';
-import Schema from '../schema/panel';
-import Searchbar from './search/searchbar';
 import ColorMode from '../components/color-mode';
-import ControlContainer from '../components/controls';
 
-export default function Sidebar({ auth }: { auth: boolean }) {
-  const [tab, setTab] = useState('Schema');
-  const [showDialog, setShowDialog] = useState<boolean>(true);
+export type SideNavTab = 'Schema' | 'Search' | undefined;
+const tabs: Array<{
+  name: SideNavTab;
+  icon: JSX.Element;
+}> = [
+  {
+    name: 'Search',
+    icon: <SearchIcon />,
+  },
+  { name: 'Schema', icon: <SchemaIcon /> },
+];
+
+export function Sidebar({ onTab }: { onTab: (tab: SideNavTab) => void }) {
+  const [tab, setTab] = useState<SideNavTab>('Schema');
 
   return (
-    <div className="info-panel w-full h-full flex">
+    <div className="info-panel w-fit h-full flex flex-shrink">
       <TooltipProvider delayDuration={100}>
         <div className="w-12 flex flex-col items-center justify-between">
           <div className="flex flex-col items-center justify-between">
-            <Tooltip>
-              <TooltipTrigger>
-                <Button
-                  type="secondary"
-                  variant="ghost"
-                  size="md"
-                  iconComponent={<SearchIcon />}
-                  onClick={() => {
-                    if (!showDialog) {
-                      setShowDialog(true);
-                    } else if (tab === 'Search') {
-                      setShowDialog(false);
-                    }
-                    setTab('Search');
-                  }}
-                  additionalClasses={tab === 'Search' ? 'bg-secondary-100' : ''}
-                />
-              </TooltipTrigger>
-              <TooltipContent side={'right'}>Search</TooltipContent>
-            </Tooltip>
-            <Tooltip>
-              <TooltipTrigger>
-                <Button
-                  type="secondary"
-                  variant="ghost"
-                  size="md"
-                  iconComponent={<SchemaIcon />}
-                  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>
+            {tabs.map((t) => (
+              <Tooltip key={t.name}>
+                <TooltipTrigger>
+                  <Button
+                    type="secondary"
+                    variant="ghost"
+                    size="md"
+                    iconComponent={t.icon}
+                    onClick={() => {
+                      if (tab === t.name) {
+                        onTab(undefined);
+                        setTab(undefined);
+                      } else {
+                        onTab(t.name);
+                        setTab(t.name);
+                      }
+                    }}
+                    additionalClasses={tab === t.name ? 'bg-secondary-100' : ''}
+                  />
+                </TooltipTrigger>
+                <TooltipContent side={'right'}>{t.name}</TooltipContent>
+              </Tooltip>
+            ))}
           </div>
           <ColorMode />
         </div>
-        {showDialog && (
-          <div className="flex-1 border overflow-hidden">
-            <div className="relative flex items-center justify-between z-[2] py-0 px-2 bg-secondary-100  border-b">
-              <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>
   );