feat: implement tidy up button

frontend/.changeset/heavy-dingos-dream.md

@@ -0,0 +1,6 @@
+---
+"@liam-hq/erd-core": patch
+"@liam-hq/cli": patch
+---
+
+`Tidy up` button now allows layout adjustments for only the currently displayed nodes

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/ERDContent.tsx

@@ -17,8 +17,8 @@ import styles from './ERDContent.module.css'
 import { RelationshipEdge } from './RelationshipEdge'
 import { TableNode } from './TableNode'
 import { useActiveTableNameFromUrl } from './useActiveTableNameFromUrl'
-import { useAutoLayout } from './useAutoLayout'
 import { useFitViewWhenActiveTableChange } from './useFitViewWhenActiveTableChange'
+import { useInitialAutoLayout } from './useInitialAutoLayout'
 
 const nodeTypes = {
   table: TableNode,
@@ -70,7 +70,7 @@ export const ERDContent: FC<Props> = ({
     setEdges(_edges)
   }, [_nodes, _edges, setNodes, setEdges])
 
-  useAutoLayout()
+  useInitialAutoLayout()
   useActiveTableNameFromUrl()
   useFitViewWhenActiveTableChange(
     enabledFeatures?.fitViewWhenActiveTableChange ?? true,

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Toolbar/TidyUpButton/TidyUpButton.tsx

@@ -1,12 +1,18 @@
 import { IconButton, TidyUpIcon } from '@liam-hq/ui'
 import { ToolbarButton } from '@radix-ui/react-toolbar'
 import type { FC } from 'react'
+import { useAutoLayout } from '../../useAutoLayout'
 
 export const TidyUpButton: FC = () => {
+  const { handleLayout } = useAutoLayout()
+
   return (
-    // TODO: Implement a button click logic
     <ToolbarButton asChild>
-      <IconButton icon={<TidyUpIcon />} tooltipContent="Tidy up" />
+      <IconButton
+        icon={<TidyUpIcon />}
+        tooltipContent="Tidy up"
+        onClick={handleLayout}
+      />
     </ToolbarButton>
   )
 }

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/useAutoLayout/useAutoLayout.ts

@@ -1,27 +1,31 @@
-import { useNodesInitialized, useReactFlow } from '@xyflow/react'
-import { useCallback, useEffect } from 'react'
+import { useReactFlow } from '@xyflow/react'
+import type { Node } from '@xyflow/react'
+import { useCallback } from 'react'
 import { getElkLayout } from './getElkLayout'
 
 export const useAutoLayout = () => {
-  const nodesInitialized = useNodesInitialized()
   const { getNodes, setNodes, getEdges, fitView } = useReactFlow()
 
   const handleLayout = useCallback(async () => {
     const nodes = getNodes()
     const edges = getEdges()
+    const visibleNodes: Node[] = nodes.filter((node) => !node.hidden)
+    const hiddenNodes: Node[] = nodes.filter((node) => node.hidden)
+
+    // NOTE: Only include edges where both the source and target are in the nodes
+    const nodeMap = new Map(visibleNodes.map((node) => [node.id, node]))
+    const visibleEdges = edges.filter((edge) => {
+      return nodeMap.get(edge.source) && nodeMap.get(edge.target)
+    })
 
     const newNodes = await getElkLayout({
-      nodes,
-      edges,
+      nodes: visibleNodes,
+      edges: visibleEdges,
     })
 
-    setNodes(newNodes)
+    setNodes([...hiddenNodes, ...newNodes])
     setTimeout(() => fitView(), 0)
   }, [getNodes, setNodes, getEdges, fitView])
 
-  useEffect(() => {
-    if (nodesInitialized) {
-      handleLayout()
-    }
-  }, [nodesInitialized, handleLayout])
+  return { handleLayout }
 }

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/useInitialAutoLayout.ts

@@ -0,0 +1,14 @@
+import { useNodesInitialized } from '@xyflow/react'
+import { useEffect } from 'react'
+import { useAutoLayout } from './useAutoLayout'
+
+export const useInitialAutoLayout = () => {
+  const nodesInitialized = useNodesInitialized()
+  const { handleLayout } = useAutoLayout()
+
+  useEffect(() => {
+    if (nodesInitialized) {
+      handleLayout()
+    }
+  }, [nodesInitialized, handleLayout])
+}