Merge pull request #214 from liam-hq/feat/layerd-option

feat: use org.eclipse.elk.layered in elk.algorithm

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

@@ -15,7 +15,10 @@ type Props = {
 export const RelatedTables: FC<Props> = ({ table }) => {
   const dbStructure = useDBStructureStore()
   const extractedDBStructure = extractDBStructureForTable(table, dbStructure)
-  const { nodes, edges } = convertDBStructureToNodes(extractedDBStructure)
+  const { nodes, edges } = convertDBStructureToNodes({
+    dbStructure: extractedDBStructure,
+    showMode: 'TABLE_NAME',
+  })
 
   return (
     <div className={styles.wrapper}>

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

@@ -1,4 +1,6 @@
+import { useDBStructureStore, useUserEditingStore } from '@/stores'
 import { Table2 } from '@liam-hq/ui'
+import { Handle, Position } from '@xyflow/react'
 import type { FC } from 'react'
 import styles from './TableHeader.module.css'
 
@@ -7,10 +9,30 @@ type Props = {
 }
 
 export const TableHeader: FC<Props> = ({ name }) => {
+  const { showMode } = useUserEditingStore()
+  const { relationships } = useDBStructureStore()
+
+  const isTarget = Object.values(relationships).some(
+    (relationship) => relationship.foreignTableName === name,
+  )
+  const isSource = Object.values(relationships).some(
+    (relationship) => relationship.primaryTableName === name,
+  )
+
   return (
     <div className={styles.wrapper}>
       <Table2 width={16} />
       <span className={styles.name}>{name}</span>
+      {showMode === 'TABLE_NAME' && (
+        <>
+          {isTarget && (
+            <Handle id={name} type="target" position={Position.Left} />
+          )}
+          {isSource && (
+            <Handle id={name} type="source" position={Position.Right} />
+          )}
+        </>
+      )}
     </div>
   )
 }

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

@@ -25,6 +25,8 @@ export const TableNode: FC<Props> = ({ data: { table } }) => {
     active: { tableName },
   } = useUserEditingStore()
   const isActive = tableName === table.name
+  const { showMode } = useUserEditingStore()
+
   const handleClick = useCallback(() => {
     updateActiveTableName(table.name)
   }, [table])
@@ -36,76 +38,78 @@ export const TableNode: FC<Props> = ({ data: { table } }) => {
       onClick={handleClick}
     >
       <TableHeader name={table.name} />
-      <ul>
-        {Object.values(table.columns).map((column) => {
-          const handleId = `${table.name}-${column.name}`
-          const isSource = Object.values(relationships).some(
-            (relationship) =>
-              relationship.primaryTableName === table.name &&
-              relationship.primaryColumnName === column.name,
-          )
-          const isTarget = Object.values(relationships).some(
-            (relationship) =>
-              relationship.foreignTableName === table.name &&
-              relationship.foreignColumnName === column.name,
-          )
+      {showMode === 'ALL_FIELDS' && (
+        <ul>
+          {Object.values(table.columns).map((column) => {
+            const handleId = `${table.name}-${column.name}`
+            const isSource = Object.values(relationships).some(
+              (relationship) =>
+                relationship.primaryTableName === table.name &&
+                relationship.primaryColumnName === column.name,
+            )
+            const isTarget = Object.values(relationships).some(
+              (relationship) =>
+                relationship.foreignTableName === table.name &&
+                relationship.foreignColumnName === column.name,
+            )
 
-          return (
-            <li key={column.name} className={styles.columnWrapper}>
-              {column.primary && (
-                <KeyRound
-                  width={16}
-                  height={16}
-                  className={styles.primaryKeyIcon}
-                  role="img"
-                  aria-label="Primary Key"
-                />
-              )}
-              {!column.primary &&
-                (column.notNull ? (
-                  <DiamondFillIcon
+            return (
+              <li key={column.name} className={styles.columnWrapper}>
+                {column.primary && (
+                  <KeyRound
                     width={16}
                     height={16}
-                    className={styles.diamondIcon}
+                    className={styles.primaryKeyIcon}
                     role="img"
-                    aria-label="Not Null"
+                    aria-label="Primary Key"
                   />
-                ) : (
-                  <DiamondIcon
-                    width={16}
-                    height={16}
-                    className={styles.diamondIcon}
-                    role="img"
-                    aria-label="Nullable"
-                  />
-                ))}
+                )}
+                {!column.primary &&
+                  (column.notNull ? (
+                    <DiamondFillIcon
+                      width={16}
+                      height={16}
+                      className={styles.diamondIcon}
+                      role="img"
+                      aria-label="Not Null"
+                    />
+                  ) : (
+                    <DiamondIcon
+                      width={16}
+                      height={16}
+                      className={styles.diamondIcon}
+                      role="img"
+                      aria-label="Nullable"
+                    />
+                  ))}
 
-              <span className={styles.columnNameWrapper}>
-                <span className={styles.columnName}>{column.name}</span>
-                <span className={styles.columnType}>{column.type}</span>
-              </span>
+                <span className={styles.columnNameWrapper}>
+                  <span className={styles.columnName}>{column.name}</span>
+                  <span className={styles.columnType}>{column.type}</span>
+                </span>
 
-              {isSource && (
-                <Handle
-                  id={handleId}
-                  type="source"
-                  position={Position.Right}
-                  className={styles.handle}
-                />
-              )}
+                {isSource && (
+                  <Handle
+                    id={handleId}
+                    type="source"
+                    position={Position.Right}
+                    className={styles.handle}
+                  />
+                )}
 
-              {isTarget && (
-                <Handle
-                  id={handleId}
-                  type="target"
-                  position={Position.Left}
-                  className={styles.handle}
-                />
-              )}
-            </li>
-          )
-        })}
-      </ul>
+                {isTarget && (
+                  <Handle
+                    id={handleId}
+                    type="target"
+                    position={Position.Left}
+                    className={styles.handle}
+                  />
+                )}
+              </li>
+            )
+          })}
+        </ul>
+      )}
     </button>
   )
 }

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

@@ -1,3 +1,5 @@
+import { type ShowMode, showModeSchema } from '@/schemas/showMode'
+import { updateShowMode, useUserEditingStore } from '@/stores'
 import {
   Button,
   ChevronDown,
@@ -8,27 +10,24 @@ import {
   DropdownMenuRoot,
   DropdownMenuTrigger,
 } from '@liam-hq/ui'
-import { type FC, useCallback, useState } from 'react'
-import { type InferOutput, picklist, safeParse } from 'valibot'
+import { type FC, useCallback } from 'react'
+import { safeParse } from 'valibot'
 import styles from './ShowModeMenu.module.css'
 
-const showModeSchema = picklist(['ALL_FIELDS', 'TABLE_NAME', 'KEY_ONLY'])
-type ShowMode = InferOutput<typeof showModeSchema>
-
 const OPTION_LIST: { value: ShowMode; label: string }[] = [
   { value: 'ALL_FIELDS', label: 'All Fields' },
   { value: 'TABLE_NAME', label: 'Table Name' },
   { value: 'KEY_ONLY', label: 'Key Only' },
 ]
 
 export const ShowModeMenu: FC = () => {
-  const [showMode, setShowMode] = useState<ShowMode>('ALL_FIELDS')
+  const { showMode } = useUserEditingStore()
 
   const handleChangeValue = useCallback((value: string) => {
     const parsed = safeParse(showModeSchema, value)
 
     if (parsed.success) {
-      setShowMode(parsed.output)
+      updateShowMode(parsed.output)
     }
   }, [])
 

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

@@ -7,9 +7,8 @@ import { convertNodesToElkNodes } from './convertNodesToElkNodes'
 
 const elk = new ELK()
 const layoutOptions: LayoutOptions = {
-  'elk.aspectRatio': '1.78', // 16:0
-  'elk.algorithm': 'org.eclipse.elk.force',
-  'elk.force.model': 'EADES',
+  'elk.algorithm': 'org.eclipse.elk.layered',
+  'elk.layered.spacing.baseValue': '32',
 }
 
 type Params = {

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

@@ -11,14 +11,18 @@ import { ERDContent } from './ERDContent'
 import styles from './ERDRenderer.module.css'
 import { LeftPane } from './LeftPane'
 import '@/styles/globals.css'
-import { useDBStructureStore } from '@/stores'
+import { useDBStructureStore, useUserEditingStore } from '@/stores'
 import { TableDetailDrawer, TableDetailDrawerRoot } from './TableDetailDrawer'
 import { convertDBStructureToNodes } from './convertDBStructureToNodes'
 
 export const ERDRenderer: FC = () => {
   const defaultOpen = getSidebarStateFromCookie()
+  const { showMode } = useUserEditingStore()
   const dbStructure = useDBStructureStore()
-  const { nodes, edges } = convertDBStructureToNodes(dbStructure)
+  const { nodes, edges } = convertDBStructureToNodes({
+    dbStructure,
+    showMode,
+  })
 
   return (
     <div className={styles.wrapper}>

frontend/packages/erd-core/src/components/ERDRenderer/convertDBStructureToNodes.ts

@@ -1,76 +1,23 @@
-import type { DBStructure, Table } from '@liam-hq/db-structure'
+import type { ShowMode } from '@/schemas/showMode'
+import type { DBStructure } from '@liam-hq/db-structure'
 import type { Edge, Node } from '@xyflow/react'
 
-type Data = {
-  table: Table
+type Params = {
+  dbStructure: DBStructure
+  showMode: ShowMode
 }
 
-type TableNodeType = Node<Data, 'table'>
-
-const getCategory = (
-  score: { primary: number; foreign: number } | undefined,
-): number => {
-  if (!score) return 4
-  if (score.foreign === 0 && score.primary > 0) return 1
-  if (score.primary > 0) return 2
-  if (score.foreign > 0) return 3
-  return 4
-}
-
-const sortNodes = (
-  nodes: TableNodeType[],
-  dbStructure: DBStructure,
-): TableNodeType[] => {
-  const relationships = Object.values(dbStructure.relationships)
-  const tableScore: Record<string, { primary: number; foreign: number }> = {}
-
-  for (const node of nodes) {
-    tableScore[node.data.table.name] = { primary: 0, foreign: 0 }
-  }
-
-  for (const { primaryTableName, foreignTableName } of relationships) {
-    if (tableScore[primaryTableName]) {
-      tableScore[primaryTableName].primary++
-    }
-    if (tableScore[foreignTableName]) {
-      tableScore[foreignTableName].foreign++
-    }
-  }
-
-  return nodes.sort((a, b) => {
-    const scoreA = tableScore[a.data.table.name]
-    const scoreB = tableScore[b.data.table.name]
-
-    const categoryA = getCategory(scoreA)
-    const categoryB = getCategory(scoreB)
-
-    if (categoryA !== categoryB) {
-      return categoryA - categoryB
-    }
-
-    const primaryA = scoreA?.primary ?? 0
-    const primaryB = scoreB?.primary ?? 0
-    if (primaryA !== primaryB) {
-      return primaryB - primaryA
-    }
-
-    const foreignA = scoreA?.foreign ?? 0
-    const foreignB = scoreB?.foreign ?? 0
-    if (foreignA !== foreignB) {
-      return foreignA - foreignB
-    }
-
-    return a.data.table.name.localeCompare(b.data.table.name)
-  })
-}
-
-export const convertDBStructureToNodes = (
-  dbStructure: DBStructure,
-): { nodes: Node[]; edges: Edge[] } => {
+export const convertDBStructureToNodes = ({
+  dbStructure,
+  showMode,
+}: Params): {
+  nodes: Node[]
+  edges: Edge[]
+} => {
   const tables = Object.values(dbStructure.tables)
   const relationships = Object.values(dbStructure.relationships)
 
-  const nodes: TableNodeType[] = tables.map((table) => {
+  const nodes: Node[] = tables.map((table) => {
     return {
       id: table.name,
       type: 'table',
@@ -83,20 +30,25 @@ export const convertDBStructureToNodes = (
       },
     }
   })
-  const sortedNodes = sortNodes(nodes, dbStructure)
 
-  const edges = relationships.map((rel) => ({
+  const edges: Edge[] = relationships.map((rel) => ({
     id: rel.name,
     type: 'relationship',
     source: rel.primaryTableName,
     target: rel.foreignTableName,
-    sourceHandle: `${rel.primaryTableName}-${rel.primaryColumnName}`,
-    targetHandle: `${rel.foreignTableName}-${rel.foreignColumnName}`,
+    sourceHandle:
+      showMode === 'TABLE_NAME'
+        ? null
+        : `${rel.primaryTableName}-${rel.primaryColumnName}`,
+    targetHandle:
+      showMode === 'TABLE_NAME'
+        ? null
+        : `${rel.foreignTableName}-${rel.foreignColumnName}`,
     data: { relationship: rel },
     style: {
       opacity: 0,
     },
   }))
 
-  return { nodes: sortedNodes, edges }
+  return { nodes, edges }
 }

frontend/packages/erd-core/src/schemas/showMode/index.ts

@@ -0,0 +1,2 @@
+export * from './schemas'
+export * from './types'

frontend/packages/erd-core/src/schemas/showMode/schemas.ts

@@ -0,0 +1,3 @@
+import { picklist } from 'valibot'
+
+export const showModeSchema = picklist(['ALL_FIELDS', 'TABLE_NAME', 'KEY_ONLY'])