Merge pull request #350 from liam-hq/refactor-table-node-4

refactor: Remove unused isRelatedToTable function and simplify TableNode component logic

frontend/.changeset/gold-singers-move.md

@@ -0,0 +1,6 @@
+---
+"@liam-hq/erd-core": patch
+"@liam-hq/cli": patch
+---
+
+refactor: Remove unused isRelatedToTable function and simplify TableNode component logic

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

@@ -2,7 +2,6 @@ import { selectTableLogEvent } from '@/features/gtm/utils'
 import { repositionTableLogEvent } from '@/features/gtm/utils/repositionTableLogEvent'
 import { useCliVersion } from '@/providers'
 import { updateActiveTableName, useUserEditingActiveStore } from '@/stores'
-import type { Relationships } from '@liam-hq/db-structure'
 import {
   Background,
   BackgroundVariant,
@@ -47,23 +46,6 @@ type Props = {
     | undefined
 }
 
-export const isRelatedToTable = (
-  relationships: Relationships,
-  tableName: string,
-  targetTableName: string | undefined,
-) => {
-  if (!targetTableName) {
-    return false
-  }
-  return Object.values(relationships).some(
-    (relationship) =>
-      (relationship.primaryTableName === tableName ||
-        relationship.foreignTableName === tableName) &&
-      (relationship.primaryTableName === targetTableName ||
-        relationship.foreignTableName === targetTableName),
-  )
-}
-
 export const ERDContentInner: FC<Props> = ({
   nodes: _nodes,
   edges: _edges,
@@ -151,13 +133,7 @@ export const ERDContentInner: FC<Props> = ({
     <div className={styles.wrapper} data-loading={loading}>
       {loading && <Spinner className={styles.loading} />}
       <ReactFlow
-        nodes={nodes.map((node) => ({
-          ...node,
-          data: {
-            ...node.data,
-            onClick: handleNodeClick,
-          },
-        }))}
+        nodes={nodes}
         edges={edges}
         nodeTypes={nodeTypes}
         edgeTypes={edgeTypes}

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

@@ -1,8 +1,7 @@
-import { useDBStructureStore, useUserEditingStore } from '@/stores'
+import { useUserEditingStore } from '@/stores'
 import type { Node, NodeProps } from '@xyflow/react'
 import clsx from 'clsx'
 import type { FC } from 'react'
-import { isRelatedToTable } from '../ERDContent'
 import { TableColumnList } from './TableColumnList'
 import { TableHeader } from './TableHeader'
 import styles from './TableNode.module.css'
@@ -14,27 +13,16 @@ export const isTableNode = (node: Node): node is TableNodeType =>
 type Props = NodeProps<TableNodeType>
 
 export const TableNode: FC<Props> = ({ data }) => {
-  const { relationships } = useDBStructureStore()
-  const {
-    active: { tableName },
-    showMode,
-  } = useUserEditingStore()
-
-  // TODO: remove tableName and isRelatedToTable() from here
-  const isActive = data.isActiveHighlighted || tableName === data.table.name
-
-  const isTableHighlighted =
-    data.isHighlighted ||
-    isRelatedToTable(relationships, data.table.name, tableName)
+  const { showMode } = useUserEditingStore()
 
   return (
     <div
       className={clsx(
         styles.wrapper,
-        isTableHighlighted && styles.wrapperHighlighted,
-        isActive && styles.wrapperActive,
+        data.isHighlighted && styles.wrapperHighlighted,
+        data.isActiveHighlighted && styles.wrapperActive,
       )}
-      data-erd={isTableHighlighted && 'table-node-highlighted'}
+      data-erd={data.isHighlighted && 'table-node-highlighted'}
     >
       <TableHeader data={data} />
       {showMode === 'ALL_FIELDS' && <TableColumnList data={data} />}