Merge pull request #227 from liam-hq/highlight_target_node_cardinalities

Add highlighting logic for target cardinalities
liam-hq · Dec 12, 2024 · 038cd9b · 038cd9b
2 parents 58f22d2 + a279f21
commit 038cd9b
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 31 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
@@ -55,42 +55,81 @@ export const ERDContent: FC<Props> = ({
 
   const handleMouseEnterNode: NodeMouseHandler<Node> = useCallback(
     (_, { id }) => {
-      setEdges((edges) =>
-        edges.map((e) =>
-          e.source === id || e.target === id
-            ? { ...e, animated: true, data: { ...e.data, isHighlighted: true } }
-            : e,
-        ),
+      const relatedEdges = edges.filter(
+        (e) => e.source === id || e.target === id,
       )
-      setNodes((nodes) =>
-        nodes.map((n) =>
-          n.id === id ? { ...n, data: { ...n.data, isHighlighted: true } } : n,
-        ),
+
+      const updatedEdges = edges.map((e) =>
+        relatedEdges.includes(e)
+          ? { ...e, animated: true, data: { ...e.data, isHighlighted: true } }
+          : e,
       )
+
+      const updatedNodes = nodes.map((node) => {
+        if (node.id === id) {
+          return { ...node, data: { ...node.data, isHighlighted: true } }
+        }
+
+        const highlightedTargetHandles = relatedEdges
+          .filter((edge) => edge.source === id && edge.target === node.id)
+          .map((edge) => edge.targetHandle)
+
+        const highlightedSourceHandles = relatedEdges
+          .filter((edge) => edge.target === id && edge.source === node.id)
+          .map((edge) => edge.sourceHandle)
+
+        return {
+          ...node,
+          data: {
+            ...node.data,
+            highlightedHandles:
+              highlightedTargetHandles.concat(highlightedSourceHandles) || [],
+          },
+        }
+      })
+
+      setEdges(updatedEdges)
+      setNodes(updatedNodes)
     },
-    [setNodes, setEdges],
+    [edges, nodes, setNodes, setEdges],
   )
 
   const handleMouseLeaveNode: NodeMouseHandler<Node> = useCallback(
     (_, { id }) => {
-      setEdges((edges) =>
-        edges.map((e) =>
-          e.source === id || e.target === id
-            ? {
-                ...e,
-                animated: false,
-                data: { ...e.data, isHighlighted: false },
-              }
-            : e,
-        ),
-      )
-      setNodes((nodes) =>
-        nodes.map((n) =>
-          n.id === id ? { ...n, data: { ...n.data, isHighlighted: false } } : n,
-        ),
+      const updatedEdges = edges.map((e) =>
+        e.source === id || e.target === id
+          ? {
+              ...e,
+              animated: false,
+              data: { ...e.data, isHighlighted: false },
+            }
+          : e,
       )
+
+      const updatedNodes = nodes.map((node) => {
+        if (node.id === id) {
+          return {
+            ...node,
+            data: {
+              ...node.data,
+              isHighlighted: false,
+            },
+          }
+        }
+
+        return {
+          ...node,
+          data: {
+            ...node.data,
+            highlightedHandles: [],
+          },
+        }
+      })
+
+      setEdges(updatedEdges)
+      setNodes(updatedNodes)
     },
-    [setNodes, setEdges],
+    [edges, nodes, setNodes, setEdges],
   )
 
   const handleMouseEnterEdge: EdgeMouseHandler<Edge> = useCallback(

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
@@ -22,13 +22,16 @@ import styles from './TableNode.module.css'
 type Data = {
   table: Table
   isHighlighted: boolean
+  highlightedHandles: string[]
 }
 
 type TableNodeType = Node<Data, 'Table'>
 
 type Props = NodeProps<TableNodeType>
 
-export const TableNode: FC<Props> = ({ data: { table, isHighlighted } }) => {
+export const TableNode: FC<Props> = ({
+  data: { table, isHighlighted, highlightedHandles },
+}) => {
   const { relationships } = useDBStructureStore()
   const {
     active: { tableName },
@@ -109,7 +112,9 @@ export const TableNode: FC<Props> = ({ data: { table, isHighlighted } }) => {
                       className={clsx([
                         styles.handleCardinality,
                         styles.handleCardinalityRight,
-                        isHighlighted && styles.handleCardinalityHighlighted,
+                        (isHighlighted ||
+                          highlightedHandles?.includes(handleId)) &&
+                          styles.handleCardinalityHighlighted,
                       ])}
                     />
                   </>
@@ -129,7 +134,8 @@ export const TableNode: FC<Props> = ({ data: { table, isHighlighted } }) => {
                           className={clsx([
                             styles.handleCardinality,
                             styles.handleCardinalityLeft,
-                            isHighlighted &&
+                            (isHighlighted ||
+                              highlightedHandles?.includes(handleId)) &&
                               styles.handleCardinalityHighlighted,
                           ])}
                         />
@@ -139,7 +145,8 @@ export const TableNode: FC<Props> = ({ data: { table, isHighlighted } }) => {
                           className={clsx([
                             styles.handleCardinality,
                             styles.handleCardinalityLeft,
-                            isHighlighted &&
+                            (isHighlighted ||
+                              highlightedHandles?.includes(handleId)) &&
                               styles.handleCardinalityHighlighted,
                           ])}
                         />