fix(app): revert changes on graph layout

flowsint-app/src/components/graphs/index.tsx

@@ -133,7 +133,7 @@ const GraphPanel = ({ graphData, isLoading }: GraphPanelProps) => {
         }
       >
         <>
-          {view === 'graph' && <GraphMain />}
+          {['force', 'hierarchy'].includes(view) && <GraphMain />}
           {view === 'table' && <NodesTable />}
           {view === 'map' && <MapPanel />}
           {view === 'relationships' && <RelationshipsTable />}

flowsint-app/src/components/graphs/toolbar.tsx

@@ -48,7 +48,7 @@ export const ToolbarButton = memo(function ToolbarButton({
             variant="outline"
             size="icon"
             className={cn(
-              'h-8 w-8 relative shadow-none bg-card',
+              'h-8 w-8 relative shadow-none',
               toggled &&
               'bg-primary/30 border-primary text-primary hover:bg-primary/40 hover:text-primary'
             )}
@@ -69,8 +69,6 @@ export const ToolbarButton = memo(function ToolbarButton({
 export const Toolbar = memo(function Toolbar({ isLoading }: { isLoading: boolean }) {
   const view = useGraphControls((s) => s.view)
   const setView = useGraphControls((s) => s.setView)
-  const layoutMode = useGraphControls((s) => s.layoutMode)
-  const setLayoutMode = useGraphControls((s) => s.setLayoutMode)
   const zoomToFit = useGraphControls((s) => s.zoomToFit)
   const zoomIn = useGraphControls((s) => s.zoomIn)
   const zoomOut = useGraphControls((s) => s.zoomOut)
@@ -89,36 +87,30 @@ export const Toolbar = memo(function Toolbar({ isLoading }: { isLoading: boolean
     } catch (error) {
       toast.error('Failed to refresh graph data')
     }
-  }, [refetchGraph])
+  }, [refetchGraph, onLayout])
 
-  // View handlers
-  const handleGraphView = useCallback(() => {
-    setView('graph')
-  }, [setView])
+  const handleForceLayout = useCallback(() => {
+    setView('force')
+    setTimeout(() => zoomToFit(), 500)
+  }, [setView, zoomToFit])
 
-  const handleTableView = useCallback(() => {
+  const handleTableLayout = useCallback(() => {
     setView('table')
   }, [setView])
 
-  const handleMapView = useCallback(() => {
+  const handleMapLayout = useCallback(() => {
     setView('map')
   }, [setView])
 
-  const handleRelationshipsView = useCallback(() => {
+  const handleRelationshipsLayout = useCallback(() => {
     setView('relationships')
   }, [setView])
 
-  // Layout handlers (only active when in graph view)
-  const handleForceLayout = useCallback(() => {
-    setLayoutMode('force')
-    setTimeout(() => zoomToFit(), 500)
-  }, [setLayoutMode, zoomToFit])
-
-  const handleDagreLayout = useCallback(() => {
-    setLayoutMode('dagre')
+  const handleDagreLayoutTB = useCallback(() => {
+    setView('hierarchy')
     onLayout && onLayout('dagre-tb')
     setTimeout(() => zoomToFit(), 200)
-  }, [onLayout, setLayoutMode, zoomToFit])
+  }, [onLayout, setView, zoomToFit])
 
   const handleOpenAddRelationDialog = useCallback(() => {
     setOpenAddRelationDialog(true)
@@ -141,8 +133,8 @@ export const Toolbar = memo(function Toolbar({ isLoading }: { isLoading: boolean
   )
 
   return (
-    <>
-      <div className="absolute top-2 left-2 flex items-center gap-2">
+    <div className="flex w-full justify-between gap-2 items-center">
+      <div className="flex items-center gap-2">
         <TooltipProvider>
           <ToolbarButton
             icon={<GitPullRequestArrow className="h-4 w-4 opacity-70" />}
@@ -162,26 +154,26 @@ export const Toolbar = memo(function Toolbar({ isLoading }: { isLoading: boolean
             icon={<ZoomIn className="h-4 w-4 opacity-70" />}
             tooltip="Zoom In"
             onClick={zoomIn}
-            disabled={view !== 'graph' || isLassoActive}
+            disabled={!['force', 'hierarchy'].includes(view) || isLassoActive}
           />
           <ToolbarButton
             icon={<Minus className="h-4 w-4 opacity-70" />}
             tooltip="Zoom Out"
             onClick={zoomOut}
-            disabled={view !== 'graph' || isLassoActive}
+            disabled={!['force', 'hierarchy'].includes(view) || isLassoActive}
           />
           <ToolbarButton
             icon={<Maximize className="h-4 w-4 opacity-70" />}
             tooltip="Fit to View"
             onClick={zoomToFit}
-            disabled={view !== 'graph' || isLassoActive}
+            disabled={!['force', 'hierarchy'].includes(view) || isLassoActive}
           />
           <ToolbarButton
             icon={<LassoSelect className="h-4 w-4 opacity-70" />}
             tooltip={'Lasso select'}
             onClick={handleLassoSelect}
             toggled={isLassoActive}
-            disabled={view !== 'graph'}
+            disabled={!['force', 'hierarchy'].includes(view)}
           />
           <Filters>
             <ToolbarButton
@@ -199,53 +191,40 @@ export const Toolbar = memo(function Toolbar({ isLoading }: { isLoading: boolean
           />
         </TooltipProvider>
       </div>
-      <div className="absolute top-2 right-2 flex items-center gap-2">
+      <div className="flex items-center gap-2">
         <TooltipProvider>
-          {/* Layout buttons - only visible when in graph view */}
-          {view === 'graph' && (
-            <>
-              <ToolbarButton
-                icon={<GitFork className="h-4 w-4 opacity-70 rotate-180" />}
-                tooltip="Dagre Layout"
-                toggled={layoutMode === 'dagre'}
-                onClick={handleDagreLayout}
-              />
-              <ToolbarButton
-                icon={<Waypoints className="h-4 w-4 opacity-70" />}
-                tooltip="Force Layout"
-                toggled={layoutMode === 'force'}
-                onClick={handleForceLayout}
-              />
-            </>
-          )}
-
-          {/* View buttons */}
+          <ToolbarButton
+            icon={<GitFork className="h-4 w-4 opacity-70 rotate-180" />}
+            tooltip={`Hierarchy`}
+            toggled={['hierarchy'].includes(view)}
+            onClick={handleDagreLayoutTB}
+          />
           <ToolbarButton
             icon={<Waypoints className="h-4 w-4 opacity-70" />}
-            tooltip="Graph view"
-            toggled={view === 'graph'}
-            onClick={handleGraphView}
+            tooltip={'Graph view'}
+            toggled={['force'].includes(view)}
+            onClick={handleForceLayout}
           />
           <ToolbarButton
             icon={<List className="h-4 w-4 opacity-70" />}
-            tooltip="Table view"
-            toggled={view === 'table'}
-            onClick={handleTableView}
+            tooltip={'Table view'}
+            toggled={['table'].includes(view)}
+            onClick={handleTableLayout}
           />
           <ToolbarButton
             icon={<ArrowRightLeft className="h-4 w-4 opacity-70" />}
-            tooltip="Relationships view"
-            toggled={view === 'relationships'}
-            onClick={handleRelationshipsView}
+            tooltip={'Relationships view'}
+            toggled={['relationships'].includes(view)}
+            onClick={handleRelationshipsLayout}
           />
           <ToolbarButton
             icon={<MapPin className="h-4 w-4 opacity-70" />}
-            tooltip="Map view"
-            toggled={view === 'map'}
-            onClick={handleMapView}
+            tooltip={'Map view'}
+            toggled={['map'].includes(view)}
+            onClick={handleMapLayout}
           />
         </TooltipProvider>
       </div>
-    </>
+    </div>
   )
-})
+})

flowsint-app/src/stores/graph-controls-store.ts

@@ -1,7 +1,7 @@
 import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
 
-type ViewType = 'graph' | 'table' | 'map' | 'relationships'
+type ViewType = 'hierarchy' | 'force' | 'table' | 'map' | 'relationships'
 type LayoutMode = 'none' | 'force' | 'dagre'
 
 type GraphControlsStore = {
@@ -22,15 +22,15 @@ type GraphControlsStore = {
 export const useGraphControls = create<GraphControlsStore>()(
   persist(
     (set) => ({
-      view: 'graph',
+      view: 'force',
       layoutMode: 'none',
       isLassoActive: false,
-      zoomToFit: () => {},
-      zoomIn: () => {},
-      zoomOut: () => {},
-      onLayout: () => {},
+      zoomToFit: () => { },
+      zoomIn: () => { },
+      zoomOut: () => { },
+      onLayout: () => { },
       setActions: (actions) => set(actions),
-      refetchGraph: () => {},
+      refetchGraph: () => { },
       setView: (view) => set({ view }),
       setLayoutMode: (mode) => set({ layoutMode: mode }),
       setIsLassoActive: (active) => set({ isLassoActive: active })