From 96943e2b4f49cdd8f74612009959e8ab2d37d640 Mon Sep 17 00:00:00 2001
From: MH4GF <h.miyagi.cnw@gmail.com>
Date: Tue, 17 Dec 2024 14:31:47 +0900
Subject: [PATCH 1/3] refactor: Unified showmode invocation

---
 .../components/ERDRenderer/ERDContent/TableNode/TableNode.tsx  | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

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 aa259449..90a3d216 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
@@ -21,6 +21,7 @@ export const TableNode: FC<Props> = ({ data }) => {
   const { relationships } = useDBStructureStore()
   const {
     active: { tableName },
+    showMode,
   } = useUserEditingStore()
 
   const isActive = tableName === data.table.name
@@ -29,8 +30,6 @@ export const TableNode: FC<Props> = ({ data }) => {
     data.isRelated ||
     isRelatedToTable(relationships, data.table.name, tableName)
 
-  const { showMode } = useUserEditingStore()
-
   const handleClick = useCallback(() => {
     updateActiveTableName(data.table.name)
   }, [data])

From f540ae6d7ade1304f789a8a08faf2a4a3f177d5c Mon Sep 17 00:00:00 2001
From: MH4GF <h.miyagi.cnw@gmail.com>
Date: Tue, 17 Dec 2024 14:40:18 +0900
Subject: [PATCH 2/3] refactor: Extract edge highlighting logic into reusable
 functions

---
 .../ERDRenderer/ERDContent/ERDContent.tsx     | 50 +++++++------------
 1 file changed, 17 insertions(+), 33 deletions(-)

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 14461f63..50c63cad 100644
--- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/ERDContent.tsx
+++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/ERDContent.tsx
@@ -36,6 +36,18 @@ type Props = {
     | undefined
 }
 
+const highlightEdge = (edge: Edge): Edge => ({
+  ...edge,
+  animated: true,
+  data: { ...edge.data, isHighlighted: true },
+})
+
+const unhighlightEdge = (edge: Edge): Edge => ({
+  ...edge,
+  animated: false,
+  data: { ...edge.data, isHighlighted: false },
+})
+
 export const isRelatedToTable = (
   relationships: Relationships,
   tableName: string,
@@ -80,13 +92,7 @@ export const ERDContentInner: FC<Props> = ({
       )
 
       const updatedEdges = edges.map((e) =>
-        relatedEdges.includes(e)
-          ? { ...e, animated: true, data: { ...e.data, isHighlighted: true } }
-          : {
-              ...e,
-              animated: false,
-              data: { ...e.data, isHighlighted: false },
-            },
+        relatedEdges.includes(e) ? highlightEdge(e) : unhighlightEdge(e),
       )
 
       const updatedNodes = nodes.map((node) => {
@@ -136,11 +142,7 @@ export const ERDContentInner: FC<Props> = ({
   const handlePaneClick = useCallback(() => {
     setActiveNodeId(null)
 
-    const updatedEdges = edges.map((e) => ({
-      ...e,
-      animated: false,
-      data: { ...e.data, isHighlighted: false },
-    }))
+    const updatedEdges = edges.map(unhighlightEdge)
 
     const updatedNodes = nodes.map((node) => ({
       ...node,
@@ -163,9 +165,7 @@ export const ERDContentInner: FC<Props> = ({
       )
 
       const updatedEdges = edges.map((e) =>
-        relatedEdges.includes(e)
-          ? { ...e, animated: true, data: { ...e.data, isHighlighted: true } }
-          : e,
+        relatedEdges.includes(e) ? highlightEdge(e) : e,
       )
 
       const updatedNodes = nodes.map((node) => {
@@ -212,17 +212,7 @@ export const ERDContentInner: FC<Props> = ({
           (e) => e.source === activeNodeId || e.target === activeNodeId,
         )
         const updatedEdges = edges.map((e) =>
-          relatedEdges.includes(e)
-            ? {
-                ...e,
-                animated: true,
-                data: { ...e.data, isHighlighted: true },
-              }
-            : {
-                ...e,
-                animated: false,
-                data: { ...e.data, isHighlighted: false },
-              },
+          relatedEdges.includes(e) ? highlightEdge(e) : unhighlightEdge(e),
         )
         setEdges(updatedEdges)
 
@@ -277,13 +267,7 @@ export const ERDContentInner: FC<Props> = ({
         setNodes(updatedNodes)
       } else {
         const updatedEdges = edges.map((e) =>
-          e.source === id || e.target === id
-            ? {
-                ...e,
-                animated: false,
-                data: { ...e.data, isHighlighted: false },
-              }
-            : e,
+          e.source === id || e.target === id ? unhighlightEdge(e) : e,
         )
         setEdges(updatedEdges)
 

From b4b76d69b72489595f9a4e008fccfb6fc8487fff Mon Sep 17 00:00:00 2001
From: MH4GF <h.miyagi.cnw@gmail.com>
Date: Tue, 17 Dec 2024 14:44:19 +0900
Subject: [PATCH 3/3] maintenace: add changeset

---
 frontend/.changeset/unlucky-cycles-reflect.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 frontend/.changeset/unlucky-cycles-reflect.md

diff --git a/frontend/.changeset/unlucky-cycles-reflect.md b/frontend/.changeset/unlucky-cycles-reflect.md
new file mode 100644
index 00000000..d2696f05
--- /dev/null
+++ b/frontend/.changeset/unlucky-cycles-reflect.md
@@ -0,0 +1,6 @@
+---
+"@liam-hq/erd-core": patch
+"@liam-hq/cli": patch
+---
+
+Minor refactoring of ERDContent