geo intergation

libs/shared/lib/schema/panel/schema.tsx

@@ -2,12 +2,9 @@ import { useSchemaGraph, useSchemaSettings, useSearchResultSchema, useSessionCac
 import { AlgorithmToLayoutProvider, AllLayoutAlgorithms, LayoutFactory } from '@graphpolaris/shared/lib/graph-layout';
 import { schemaExpandRelation, schemaGraphology2Reactflow } from '@graphpolaris/shared/lib/schema/schema-utils';
 import { SmartBezierEdge, SmartStepEdge, SmartStraightEdge } from '@tisoap/react-flow-smart-edge';
-
 import { useEffect, useMemo, useRef, useState } from 'react';
 import ReactFlow, { Edge, Node, ReactFlowInstance, ReactFlowProvider, useEdgesState, useNodesState } from 'reactflow';
-
 import 'reactflow/dist/style.css';
-
 import { wsSchemaRequest } from '@graphpolaris/shared/lib/data-access/broker/wsSchema';
 import { ConnectionDragLine, ConnectionLine } from '@graphpolaris/shared/lib/querybuilder/pills';
 import { Button } from '../../components/buttons';
@@ -19,8 +16,10 @@ import SelfEdge from '../pills/edges/self-edge';
 import { EntityNode } from '../pills/nodes/entity/entity-node';
 import { RelationNode } from '../pills/nodes/relation/relation-node';
 import { SchemaDialog } from './schemaDialog';
-import { Fullscreen, Cached, Settings } from '@mui/icons-material';
+import { ExpandMore, ArrowRight } from '@mui/icons-material';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../components/tooltip';
+import { FormControl } from '../../components';
+import Input from '../../components/inputs';
 
 interface Props {
   content?: string;
@@ -45,7 +44,6 @@ const edgeTypes = {
 };
 
 export const Schema = (props: Props) => {
-  const session = useSessionCache();
   const settings = useSchemaSettings();
   const searchResults = useSearchResultSchema();
   const [toggleSchemaSettings, setToggleSchemaSettings] = useState(false);
@@ -53,6 +51,7 @@ export const Schema = (props: Props) => {
   const [edges, setEdges, onEdgesChange] = useEdgesState([] as Edge[]);
   const [firstUserConnection, setFirstUserConnection] = useState<boolean>(true);
   const [auth, setAuth] = useState(props.auth);
+  const [expanded, setExpanded] = useState<boolean>(true);
 
   const reactFlowInstanceRef = useRef<ReactFlowInstance | null>(null);
 
@@ -110,59 +109,7 @@ export const Schema = (props: Props) => {
   }, [searchResults]);
 
   return (
-    <div className="schema-panel w-full h-full">
-      <SchemaDialog open={toggleSchemaSettings} onClose={() => setToggleSchemaSettings(false)} />
-      {/* <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">Schema</h1>
-        <ControlContainer>
-          <TooltipProvider delayDuration={0}>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button type="secondary" variant="ghost" size="xs" iconComponent={<Fullscreen />} onClick={fitView} />
-              </TooltipTrigger>
-              <TooltipContent side={'bottom'}>
-                <p>Fit to screen</p>
-              </TooltipContent>
-            </Tooltip>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  type="secondary"
-                  variant="ghost"
-                  size="xs"
-                  iconComponent={<Cached />}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    if (session.currentSaveState) wsSchemaRequest(session.currentSaveState);
-                    else wsGetStates();
-                  }}
-                />
-              </TooltipTrigger>
-              <TooltipContent side={'bottom'}>
-                <p>Refresh schema</p>
-              </TooltipContent>
-            </Tooltip>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  type="secondary"
-                  variant="ghost"
-                  size="xs"
-                  iconComponent={<Settings />}
-                  additionalClasses="schema-settings"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    setToggleSchemaSettings(!toggleSchemaSettings);
-                  }}
-                />
-              </TooltipTrigger>
-              <TooltipContent side={'bottom'} disabled={toggleSchemaSettings}>
-                <p>Schema settings</p>
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-        </ControlContainer>
-      </div> */}
+    <div className="schema-panel w-full h-full flex flex-col justify-between">
       {nodes.length === 0 ? (
         <p className="text-sm">No Elements</p>
       ) : (
@@ -189,6 +136,22 @@ export const Schema = (props: Props) => {
           </div>
         </ReactFlowProvider>
       )}
+      <div className="relative bottom-0">
+        <div className="w-full py-0 px-2 bg-secondary-50 cursor-pointer border-y flex" onClick={() => setExpanded(!expanded)}>
+          <Button
+            size="2xs"
+            variant="ghost"
+            iconComponent={expanded ? <ExpandMore /> : <ArrowRight />}
+            onClick={() => setExpanded(!expanded)}
+          />
+          <span className="text-xs font-semibold text-secondary-800 ml-2">Schema settings</span>
+        </div>
+        {expanded && (
+          <div className="h-full w-full overflow-y-hidden">
+            <SchemaDialog open={toggleSchemaSettings} onClose={() => setToggleSchemaSettings(false)} />
+          </div>
+        )}
+      </div>
     </div>
   );
 };