feat(visManager): config to right

apps/web/src/app/app.tsx

@@ -20,8 +20,9 @@ import { URLParams, setParam } from '@graphpolaris/shared/lib/data-access/api/ur
 import { Schema } from '@graphpolaris/shared/lib/schema/panel';
 import { VisualizationPanel } from '@graphpolaris/shared/lib/vis';
 import { QueryBuilder } from '@graphpolaris/shared/lib/querybuilder';
-import InfoPanel from '@graphpolaris/shared/lib/info/infoPanel';
+import DataViewer from '@graphpolaris/shared/lib/data-viewer';
 import { useVisualizationManager } from '@graphpolaris/shared/lib/vis/manager';
+import ConfigPanel from '@graphpolaris/shared/lib/vis/configuration';
 // const Schema = React.lazy(() => import('@graphpolaris/shared/lib/schema/panel'));
 // const VisualizationPanel = React.lazy(() => import('@graphpolaris/shared/lib/vis'));
 // const QueryBuilder = React.lazy(() => import('@graphpolaris/shared/lib/querybuilder'));
@@ -78,7 +79,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">
-                    <InfoPanel auth={authCheck} manager={manager} />
+                    <DataViewer auth={authCheck} manager={manager} />
                   </div>
                   <div className="h-full w-full">
                     <Resizable divisorSize={3} horizontal={false}>
@@ -91,6 +92,9 @@ export function App(props: App) {
                     </Resizable>
                   </div>
                 </Resizable>
+                <div className="h-full w-56 ml-1">
+                  <ConfigPanel manager={manager} />
+                </div>
               </main>
             </div>
           </div>

libs/shared/lib/info/infoPanel.tsx → libs/shared/lib/data-viewer/index.tsx

@@ -6,8 +6,9 @@ import Searchbar from './search/searchbar';
 import Settings from './settings';
 import ColorMode from '../components/color-mode';
 
-export default function InfoPanel({ auth, manager }: { auth: boolean; manager: any }) {
+export default function DataViewer({ auth, manager }: { auth: boolean; manager: any }) {
   const [tab, setTab] = useState('Schema');
+  const [showDialog, setShowDialog] = useState<boolean>(true);
 
   return (
     <div className="info-panel w-full h-full flex">
@@ -21,7 +22,14 @@ export default function InfoPanel({ auth, manager }: { auth: boolean; manager: a
                   variant="ghost"
                   size="md"
                   iconComponent={<SearchIcon />}
-                  onClick={() => setTab('Search')}
+                  onClick={() => {
+                    if (!showDialog) {
+                      setShowDialog(true);
+                    } else if (tab === 'Search') {
+                      setShowDialog(false);
+                    }
+                    setTab('Search');
+                  }}
                   additionalClasses={tab === 'Search' ? 'bg-secondary-100' : ''}
                 />
               </TooltipTrigger>
@@ -34,37 +42,32 @@ export default function InfoPanel({ auth, manager }: { auth: boolean; manager: a
                   variant="ghost"
                   size="md"
                   iconComponent={<SchemaIcon />}
-                  onClick={() => setTab('Schema')}
+                  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>
-            <Tooltip>
-              <TooltipTrigger>
-                <Button
-                  type="secondary"
-                  variant="ghost"
-                  size="md"
-                  iconComponent={<Addchart />}
-                  onClick={() => setTab('Visualization')}
-                  additionalClasses={tab === 'Visualization' ? 'bg-secondary-100' : ''}
-                />
-              </TooltipTrigger>
-              <TooltipContent side={'right'}>Visualization settings</TooltipContent>
-            </Tooltip>
           </TooltipProvider>
         </div>
         <ColorMode />
       </div>
-      <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>
+      {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} />}
         </div>
-        {tab === 'Search' && <Searchbar />}
-        {tab === 'Schema' && <Schema auth={auth} />}
-        {tab === 'Visualization' && <Settings manager={manager} />}
-      </div>
+      )}
     </div>
   );
 }

libs/shared/lib/vis/bar.tsx

@@ -110,14 +110,6 @@ export default function VisualizationBar({ manager }: Props) {
                 <p>Full screen</p>
               </TooltipContent>
             </Tooltip>
-            <Tooltip disabled={showVisSettings}>
-              <TooltipTrigger>
-                <Button type="secondary" variant="ghost" size="xs" iconComponent={<SettingsInputComponent />} onClick={() => {}} />
-              </TooltipTrigger>
-              <TooltipContent side={'bottom'} disabled={showVisSettings}>
-                <p>Visualization settings</p>
-              </TooltipContent>
-            </Tooltip>
           </TooltipProvider>
         </ControlContainer>
       </div>

libs/shared/lib/vis/configuration/index.tsx

+import React from 'react';
+import { Button } from '../../components';
+import { Delete } from '@mui/icons-material';
+import Input from '../../components/inputs';
+
+type Props = {
+  manager: any;
+};
+
+export default function ConfigPanel({ manager }: Props) {
+  return (
+    <div className="w-full h-full flex flex-col border">
+      <div className="border-b border-secondary-200 py-2">
+        <div className="flex justify-between items-center px-4 py-2">
+          <span className="text-xs font-bold">Visualisation</span>
+          <Button
+            type="secondary"
+            variant="ghost"
+            size="xs"
+            iconComponent={<Delete />}
+            onClick={() => {
+              manager.deleteVisualization(manager.active);
+            }}
+          />
+        </div>
+        <div className="flex justify-between items-center px-4 py-1">
+          <span className="text-xs font-normal">Type</span>
+          <div className="w-36">
+            <Input type="dropdown" size="xs" options={[]} value={manager.activeType} onChange={() => {}} />
+          </div>
+        </div>
+        <div className="flex justify-between items-center px-4 py-1">
+          <span className="text-xs font-normal">Name</span>
+          <input type="text" className="border rouded w-36" value={manager.active} onChange={() => {}} />
+        </div>
+      </div>
+      <div className="border-b border-secondary-200 py-2">{manager.renderSettings()}</div>
+    </div>
+  );
+}