Merge branch 'main' of github.com:liam-hq/liam into add-key-only-view

frontend/.changeset/forty-berries-hammer.md

@@ -0,0 +1,6 @@
+---
+"@liam-hq/erd-core": patch
+"@liam-hq/cli": patch
+---
+
+Resolving the issue of remaining highlights

frontend/.changeset/pink-drinks-applaud.md

@@ -0,0 +1,6 @@
+---
+"@liam-hq/erd-core": patch
+"@liam-hq/cli": patch
+---
+
+Refactoring and testing of highlights on active tables

frontend/.changeset/tricky-comics-raise.md

@@ -0,0 +1,6 @@
+---
+"@liam-hq/erd-core": patch
+"@liam-hq/cli": patch
+---
+
+refactor Integrated `isRelated` into `isHighlighted`

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

@@ -16,6 +16,7 @@ import { ERDContentProvider, useERDContentContext } from './ERDContentContext'
 import { RelationshipEdge } from './RelationshipEdge'
 import { Spinner } from './Spinner'
 import { TableNode } from './TableNode'
+import { highlightNodesAndEdges } from './highlightNodesAndEdges'
 import { useFitViewWhenActiveTableChange } from './useFitViewWhenActiveTableChange'
 import { useInitialAutoLayout } from './useInitialAutoLayout'
 import { useUpdateNodeCardinalities } from './useUpdateNodeCardinalities'
@@ -67,6 +68,22 @@ export const isRelatedToTable = (
   )
 }
 
+const getHighlightedHandles = (
+  edges: Edge[],
+  targetId: string,
+  nodeId: string,
+) => {
+  const highlightedTargetHandles = edges
+    .filter((edge) => edge.source === targetId && edge.target === nodeId)
+    .map((edge) => edge.targetHandle)
+
+  const highlightedSourceHandles = edges
+    .filter((edge) => edge.target === targetId && edge.source === nodeId)
+    .map((edge) => edge.sourceHandle)
+
+  return highlightedTargetHandles.concat(highlightedSourceHandles) || []
+}
+
 export const ERDContentInner: FC<Props> = ({
   nodes: _nodes,
   edges: _edges,
@@ -99,64 +116,29 @@ export const ERDContentInner: FC<Props> = ({
         relatedEdges.includes(e) ? highlightEdge(e) : unhighlightEdge(e),
       )
 
-      const updatedNodes = nodes.map((node) => {
-        if (node.id === nodeId) {
-          return { ...node, data: { ...node.data, isHighlighted: true } }
-        }
-
-        const isRelated = isRelatedToTable(relationships, node.id, nodeId)
-
-        if (isRelated) {
-          const highlightedTargetHandles = relatedEdges
-            .filter((edge) => edge.source === nodeId && edge.target === node.id)
-            .map((edge) => edge.targetHandle)
-
-          const highlightedSourceHandles = relatedEdges
-            .filter((edge) => edge.target === nodeId && edge.source === node.id)
-            .map((edge) => edge.sourceHandle)
-
-          return {
-            ...node,
-            data: {
-              ...node.data,
-              isRelated: isRelated,
-              highlightedHandles:
-                highlightedTargetHandles.concat(highlightedSourceHandles) || [],
-            },
-          }
-        }
-
-        return {
-          ...node,
-          data: {
-            ...node.data,
-            isRelated: false,
-            isHighlighted: false,
-            highlightedHandles: [],
-          },
-        }
-      })
+      const { nodes: updatedNodes } = highlightNodesAndEdges(
+        nodes,
+        edges,
+        nodeId,
+      )
 
       setEdges(updatedEdges)
       setNodes(updatedNodes)
     },
-    [edges, nodes, setNodes, setEdges, relationships],
+    [edges, nodes, setNodes, setEdges],
   )
 
   const handlePaneClick = useCallback(() => {
     setActiveNodeId(null)
+    updateActiveTableName(undefined)
 
     const updatedEdges = edges.map(unhighlightEdge)
 
-    const updatedNodes = nodes.map((node) => ({
-      ...node,
-      data: {
-        ...node.data,
-        isRelated: false,
-        highlightedHandles: [],
-        isHighlighted: false,
-      },
-    }))
+    const { nodes: updatedNodes } = highlightNodesAndEdges(
+      nodes,
+      edges,
+      undefined,
+    )
 
     setEdges(updatedEdges)
     setNodes(updatedNodes)
@@ -168,44 +150,79 @@ export const ERDContentInner: FC<Props> = ({
         (e) => e.source === id || e.target === id,
       )
 
-      const updatedEdges = edges.map((e) =>
-        relatedEdges.includes(e) ? highlightEdge(e) : e,
+      const relatedToActiveNodeEdges = edges.filter(
+        (e) => e.source === activeNodeId || e.target === activeNodeId,
       )
 
+      const updatedEdges = edges.map((e) => {
+        if (relatedEdges.includes(e)) {
+          return highlightEdge(e)
+        }
+        if (relatedToActiveNodeEdges.includes(e)) {
+          return highlightEdge(e)
+        }
+        return unhighlightEdge(e)
+      })
+
       const updatedNodes = nodes.map((node) => {
         if (node.id === id) {
           return { ...node, data: { ...node.data, isHighlighted: true } }
         }
 
         const isRelated = isRelatedToTable(relationships, node.id, id)
+        const isRelatedToActiveNode =
+          activeNodeId && isRelatedToTable(relationships, node.id, activeNodeId)
 
         if (isRelated) {
-          const highlightedTargetHandles = relatedEdges
-            .filter((edge) => edge.source === id && edge.target === node.id)
-            .map((edge) => edge.targetHandle)
+          let highlightedHandles = getHighlightedHandles(edges, id, node.id)
+          if (isRelatedToActiveNode) {
+            highlightedHandles = highlightedHandles.concat(
+              getHighlightedHandles(edges, activeNodeId, node.id),
+            )
+          }
 
-          const highlightedSourceHandles = relatedEdges
-            .filter((edge) => edge.target === id && edge.source === node.id)
-            .map((edge) => edge.sourceHandle)
+          return {
+            ...node,
+            data: {
+              ...node.data,
+              isHighlighted: true,
+              highlightedHandles: highlightedHandles,
+            },
+          }
+        }
+        if (isRelatedToActiveNode) {
+          const highlightedHandles = getHighlightedHandles(
+            edges,
+            activeNodeId,
+            node.id,
+          ).concat(getHighlightedHandles(edges, id, node.id))
+
+          const isHighlighted = node.id === activeNodeId
 
           return {
             ...node,
             data: {
               ...node.data,
-              isRelated: isRelated,
-              highlightedHandles:
-                highlightedTargetHandles.concat(highlightedSourceHandles) || [],
+              isHighlighted: isHighlighted,
+              highlightedHandles: highlightedHandles,
             },
           }
         }
 
-        return node
+        return {
+          ...node,
+          data: {
+            ...node.data,
+            isHighlighted: false,
+            highlightedHandles: [],
+          },
+        }
       })
 
       setEdges(updatedEdges)
       setNodes(updatedNodes)
     },
-    [edges, nodes, setNodes, setEdges, relationships],
+    [edges, nodes, setNodes, setEdges, relationships, activeNodeId],
   )
 
   const handleMouseLeaveNode: NodeMouseHandler<Node> = useCallback(
@@ -228,31 +245,20 @@ export const ERDContentInner: FC<Props> = ({
           )
 
           if (node.id === activeNodeId || isRelated) {
-            const highlightedTargetHandles = relatedEdges
-              .filter(
-                (edge) =>
-                  edge.source === activeNodeId && edge.target === node.id,
-              )
-              .map((edge) => edge.targetHandle)
-
-            const highlightedSourceHandles = relatedEdges
-              .filter(
-                (edge) =>
-                  edge.target === activeNodeId && edge.source === node.id,
-              )
-              .map((edge) => edge.sourceHandle)
+            const highlightedHandles = getHighlightedHandles(
+              edges,
+              activeNodeId,
+              node.id,
+            )
 
             const isHighlighted = node.id === activeNodeId
 
             return {
               ...node,
               data: {
                 ...node.data,
-                isRelated: isRelated,
-                isHighlighted: isHighlighted,
-                highlightedHandles:
-                  highlightedTargetHandles.concat(highlightedSourceHandles) ||
-                  [],
+                isHighlighted,
+                highlightedHandles: highlightedHandles,
               },
             }
           }
@@ -261,7 +267,6 @@ export const ERDContentInner: FC<Props> = ({
             ...node,
             data: {
               ...node.data,
-              isRelated: false,
               isHighlighted: false,
               highlightedHandles: [],
             },
@@ -279,7 +284,6 @@ export const ERDContentInner: FC<Props> = ({
           ...node,
           data: {
             ...node.data,
-            isRelated: false,
             highlightedHandles: [],
             isHighlighted: false,
           },

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

@@ -12,7 +12,7 @@
   opacity: 0;
 }
 
-.wrapperHover,
+.wrapperHighlighted,
 .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

@@ -22,15 +22,15 @@ export const TableNode: FC<Props> = ({ data }) => {
 
   const isActive = tableName === data.table.name
 
-  const isTableRelated =
-    data.isRelated ||
+  const isTableHighlighted =
+    data.isHighlighted ||
     isRelatedToTable(relationships, data.table.name, tableName)
 
   return (
     <div
       className={clsx(
         styles.wrapper,
-        isTableRelated && styles.wrapperHover,
+        isTableHighlighted && styles.wrapperHighlighted,
         isActive && styles.wrapperActive,
       )}
       data-erd="table-node"

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

@@ -3,8 +3,8 @@ import type { Node } from '@xyflow/react'
 
 export type Data = {
   table: Table
+  isActiveHighlighted: boolean
   isHighlighted: boolean
-  isRelated: boolean
   highlightedHandles: string[]
   sourceColumnName: string | undefined
   targetColumnCardinalities?: