From 34dd3ebca5a0e6ea9376c46e673e55f62d837a74 Mon Sep 17 00:00:00 2001
From: MH4GF <h.miyagi.cnw@gmail.com>
Date: Fri, 20 Dec 2024 19:55:30 +0900
Subject: [PATCH] refactor: Remove unused isRelatedToTable function and
 simplify TableNode component logic

---
 frontend/.changeset/gold-singers-move.md      |  6 +++++
 .../ERDRenderer/ERDContent/ERDContent.tsx     | 26 +------------------
 .../ERDContent/TableNode/TableNode.tsx        | 22 ++++------------
 3 files changed, 12 insertions(+), 42 deletions(-)
 create mode 100644 frontend/.changeset/gold-singers-move.md

diff --git a/frontend/.changeset/gold-singers-move.md b/frontend/.changeset/gold-singers-move.md
new file mode 100644
index 00000000..84b2c5bc
--- /dev/null
+++ b/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
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/ERDContent.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/ERDContent.tsx
index 93ae61a5..0ee95ca0 100644
--- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/ERDContent.tsx
+++ b/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}
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx
index 93b5417c..d33f2dcf 100644
--- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx
+++ b/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} />}