Merge pull request #221 from liam-hq/enhance-the-highlighting-of-rela…

…ted-table-nodes-when-hovering

Apply hover effect to related tables when hovered or active

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

@@ -1,3 +1,5 @@
+import { useDBStructureStore } from '@/stores'
+import type { Relationships } from '@liam-hq/db-structure'
 import {
   Background,
   BackgroundVariant,
@@ -34,13 +36,31 @@ 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 ERDContent: FC<Props> = ({
   nodes: _nodes,
   edges: _edges,
   enabledFeatures,
 }) => {
   const [nodes, setNodes, onNodesChange] = useNodesState<Node>([])
   const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([])
+  const { relationships } = useDBStructureStore()
 
   useEffect(() => {
     setNodes(_nodes)
@@ -65,7 +85,7 @@ export const ERDContent: FC<Props> = ({
       )
 
       const updatedNodes = nodes.map((node) => {
-        if (node.id === id) {
+        if (node.id === id || isRelatedToTable(relationships, node.id, id)) {
           return { ...node, data: { ...node.data, isHighlighted: true } }
         }
 
@@ -90,7 +110,7 @@ export const ERDContent: FC<Props> = ({
       setEdges(updatedEdges)
       setNodes(updatedNodes)
     },
-    [edges, nodes, setNodes, setEdges],
+    [edges, nodes, setNodes, setEdges, relationships],
   )
 
   const handleMouseLeaveNode: NodeMouseHandler<Node> = useCallback(
@@ -106,7 +126,7 @@ export const ERDContent: FC<Props> = ({
       )
 
       const updatedNodes = nodes.map((node) => {
-        if (node.id === id) {
+        if (node.id === id || isRelatedToTable(relationships, node.id, id)) {
           return {
             ...node,
             data: {
@@ -128,7 +148,7 @@ export const ERDContent: FC<Props> = ({
       setEdges(updatedEdges)
       setNodes(updatedNodes)
     },
-    [edges, nodes, setNodes, setEdges],
+    [edges, nodes, setNodes, setEdges, relationships],
   )
 
   const handleMouseEnterEdge: EdgeMouseHandler<Edge> = useCallback(

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

@@ -6,6 +6,7 @@
     300ms var(--default-timing-function);
 }
 
+.wrapperHover,
 .wrapper:hover {
   border: 1px solid var(--primary-accent);
   box-shadow: 0px 0px 20px 0px rgba(29, 237, 131, 0.4);

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

@@ -16,6 +16,7 @@ import { Handle, type Node, type NodeProps, Position } from '@xyflow/react'
 import clsx from 'clsx'
 import { type FC, useCallback } from 'react'
 import { match } from 'ts-pattern'
+import { isRelatedToTable } from '../ERDContent'
 import { TableHeader } from './TableHeader'
 import styles from './TableNode.module.css'
 
@@ -36,7 +37,12 @@ export const TableNode: FC<Props> = ({
   const {
     active: { tableName },
   } = useUserEditingStore()
+
   const isActive = tableName === table.name
+
+  const isRelated =
+    isHighlighted || isRelatedToTable(relationships, table.name, tableName)
+
   const { showMode } = useUserEditingStore()
 
   const handleClick = useCallback(() => {
@@ -46,7 +52,11 @@ export const TableNode: FC<Props> = ({
   return (
     <button
       type="button"
-      className={clsx(styles.wrapper, isActive && styles.wrapperActive)}
+      className={clsx(
+        styles.wrapper,
+        isRelated && styles.wrapperHover,
+        isActive && styles.wrapperActive,
+      )}
       onClick={handleClick}
     >
       <TableHeader name={table.name} />