Refactor visibility handling in ERDRenderer components

liam-hq · Dec 16, 2024 · ed41c2e · ed41c2e
1 parent d086741
commit ed41c2e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/...c/components/ERDRenderer/ERDContent/TableNode/TableColumnList/TableColumn/TableColumn.tsx b/...c/components/ERDRenderer/ERDContent/TableNode/TableColumnList/TableColumn/TableColumn.tsx
@@ -1,3 +1,4 @@
+import { useHiddenNodesStore } from '@/stores/hiddenNodes'
 import type { Column, Relationships, Table } from '@liam-hq/db-structure'
 import { DiamondFillIcon, DiamondIcon, KeyRound } from '@liam-hq/ui'
 import { Handle, Position } from '@xyflow/react'
@@ -25,14 +26,19 @@ export const TableColumn: FC<TableColumnProps> = ({
 }) => {
   const handleId = `${table.name}-${column.name}`
 
-  const isSource = Object.values(relationships).some(
+  const hiddenNodes = useHiddenNodesStore()
+
+  const isVisibleSourceCardinality = Object.values(relationships).some(
     (relationship) =>
       relationship.primaryTableName === table.name &&
-      relationship.primaryColumnName === column.name,
+      relationship.primaryColumnName === column.name &&
+      !hiddenNodes.includes(relationship.foreignTableName),
   )
   const targetCardinality = Object.values(relationships).find(
-    ({ foreignTableName, foreignColumnName }) =>
-      foreignTableName === table.name && foreignColumnName === column.name,
+    ({ foreignTableName, foreignColumnName, primaryTableName }) =>
+      foreignTableName === table.name &&
+      foreignColumnName === column.name &&
+      !hiddenNodes.includes(primaryTableName),
   )?.cardinality
 
   return (
@@ -70,7 +76,7 @@ export const TableColumn: FC<TableColumnProps> = ({
         <span className={styles.columnType}>{column.type}</span>
       </span>
 
-      {isSource && (
+      {isVisibleSourceCardinality && (
         <>
           <Handle
             id={handleId}

diff --git a/...ges/erd-core/src/components/ERDRenderer/LeftPane/TableNameMenuButton/VisibilityButton.tsx b/...ges/erd-core/src/components/ERDRenderer/LeftPane/TableNameMenuButton/VisibilityButton.tsx
@@ -1,3 +1,4 @@
+import { addHiddenNode, removeHiddenNode } from '@/stores/hiddenNodes'
 import { Eye, EyeClosed, SidebarMenuAction } from '@liam-hq/ui'
 import { useReactFlow } from '@xyflow/react'
 import { type FC, type MouseEvent, useCallback } from 'react'
@@ -14,9 +15,10 @@ export const VisibilityButton: FC<Props> = ({ tableName, hidden }) => {
   const handleClick = useCallback(
     (event: MouseEvent) => {
       event.stopPropagation()
+      !hidden ? addHiddenNode(tableName) : removeHiddenNode(tableName)
       updateNode(tableName, (node) => ({ ...node, hidden: !node.hidden }))
     },
-    [updateNode, tableName],
+    [updateNode, tableName, hidden],
   )
 
   return (