Render handles for Model Column only when that column has been select (#1994)

Author: mykalmax

web/client/src/library/components/graph/Graph.tsx

@@ -396,13 +396,15 @@ const ModelColumn = memo(function ModelColumn({
     }
   }
 
+  const showHandles = withHandles && (hasLeft || hasRight)
+
   return (
     <div
       className={clsx(
         isActive
           ? 'bg-secondary-10 dark:bg-primary-900 text-secondary-500 dark:text-neutral-100'
           : 'text-neutral-600 dark:text-neutral-100 hover:bg-neutral-5',
-        withHandles ? 'p-0 mb-1' : 'px-2 rounded-md mb-1',
+        showHandles ? 'p-0 mb-1' : 'px-2 rounded-md mb-1',
         className,
       )}
       onClick={debounceSync(toggleColumnLineage, 500, true)}
@@ -413,7 +415,7 @@ const ModelColumn = memo(function ModelColumn({
           disabled ? 'cursor-not-allowed' : 'cursor-pointer',
         )}
       >
-        {withHandles ? (
+        {showHandles ? (
           <ModelNodeHandles
             id={id}
             nodeId={nodeId}

web/client/src/library/components/graph/ModelLineage.tsx

@@ -209,7 +209,6 @@ function ModelColumnLineage(): JSX.Element {
       withConnected,
       withImpacted,
       withSecondary,
-      withColumns,
     )
     const newEdges = getUpdatedEdges(
       allEdges,
@@ -253,8 +252,6 @@ function ModelColumnLineage(): JSX.Element {
             setIsBuildingLayout(false)
           }, 100)
         }
-
-        setActiveNodes(newActiveNodes)
       })
 
     return () => {
@@ -265,17 +262,6 @@ function ModelColumnLineage(): JSX.Element {
     }
   }, [lineageIndex, withColumns])
 
-  useEffect(() => {
-    const newActiveNodes = getActiveNodes(
-      allEdges,
-      activeEdges,
-      selectedEdges,
-      nodesMap,
-    )
-
-    setActiveNodes(newActiveNodes)
-  }, [nodesMap, activeEdges, selectedEdges])
-
   useEffect(() => {
     if (isNil(mainNode) || isArrayEmpty(nodes)) return
 
@@ -295,7 +281,6 @@ function ModelColumnLineage(): JSX.Element {
       withConnected,
       withImpacted,
       withSecondary,
-      withColumns,
     )
 
     const newEdges = getUpdatedEdges(

web/client/src/library/components/graph/ModelNode.tsx

@@ -1,4 +1,4 @@
-import { isNil, isArrayNotEmpty, isNotNil } from '@utils/index'
+import { isNil, isArrayNotEmpty, isNotNil, toID } from '@utils/index'
 import clsx from 'clsx'
 import { useMemo, useCallback, useState } from 'react'
 import {
@@ -22,10 +22,11 @@ export default function ModelNode({
   data,
   sourcePosition,
   targetPosition,
-}: NodeProps & { data: GraphNodeData }): JSX.Element {
+}: NodeProps): JSX.Element {
+  const nodeData: GraphNodeData = data ?? {}
   const {
+    connections,
     models,
-    withColumns,
     handleClickModel,
     lineage = {},
     selectedNodes,
@@ -99,20 +100,30 @@ export default function ModelNode({
     [setSelectedNodes, highlightedNodeModels],
   )
 
+  const hasSelectedColumns = columns.some(({ name }) =>
+    connections.get(toID(id, name)),
+  )
   const highlighted = Object.keys(highlightedNodes ?? {}).find(key =>
     highlightedNodes[key]!.includes(id),
   )
   const splat = highlightedNodes?.['*']
-  const isInteractive = mainNode !== id && isNotNil(handleClickModel)
-  const isCTE = data.type === EnumLineageNodeModelType.cte
-  const isModelExternal = data.type === EnumLineageNodeModelType.external
-  const isModelSeed = data.type === EnumLineageNodeModelType.seed
-  const isModelPython = data.type === EnumLineageNodeModelType.python
-  const showColumns = (withColumns && isArrayNotEmpty(columns)) || isMouseOver
   const isMainNode = mainNode === id || highlightedNodeModels.includes(id)
+  const isSelected = selectedNodes.has(id)
+  const isInteractive = mainNode !== id && isNotNil(handleClickModel)
+  const isCTE = nodeData.type === EnumLineageNodeModelType.cte
+  const isModelExternal = nodeData.type === EnumLineageNodeModelType.external
+  const isModelSeed = nodeData.type === EnumLineageNodeModelType.seed
+  const isModelPython = nodeData.type === EnumLineageNodeModelType.python
+  const showColumns =
+    (hasSelectedColumns ||
+      nodeData.withColumns ||
+      isMouseOver ||
+      isSelected ||
+      isMainNode) &&
+    isArrayNotEmpty(columns)
   const isActiveNode =
     selectedNodes.size > 0 || activeNodes.size > 0 || withConnected
-      ? selectedNodes.has(id) ||
+      ? isSelected ||
         activeNodes.has(id) ||
         (withConnected && connectedNodes.has(id))
       : connectedNodes.has(id)
@@ -126,23 +137,24 @@ export default function ModelNode({
         isCTE ? 'text-neutral-100' : 'text-secondary-500 dark:text-primary-100',
         (isModelExternal || isModelSeed) &&
           'border-4 border-accent-500 ring-8 ring-accent-200',
-        selectedNodes.has(id) &&
-          'border-4 border-secondary-500 ring-8 ring-secondary-200',
+        isSelected && 'border-4 border-secondary-500 ring-8 ring-secondary-200',
         isMainNode && 'ring-8 ring-brand-200',
         isNil(highlighted) ? splat : highlighted,
         isActiveNode || isMainNode
           ? 'opacity-100'
           : 'opacity-40 hover:opacity-100',
       )}
       style={{
-        maxWidth: isNil(data.width) ? 'auto' : `${data.width as number}px`,
+        maxWidth: isNil(nodeData.width)
+          ? 'auto'
+          : `${nodeData.width as number}px`,
       }}
     >
       <ModelNodeHeaderHandles
         id={id}
-        type={data.type}
-        label={data.label}
-        isSelected={selectedNodes.has(id)}
+        type={nodeData.type}
+        label={nodeData.label}
+        isSelected={isSelected}
         isDraggable={true}
         className={clsx(
           showColumns ? 'rounded-t-md' : 'rounded-lg',
@@ -162,7 +174,7 @@ export default function ModelNode({
         }
         count={columns.length}
       />
-      {showColumns && isArrayNotEmpty(columns) && (
+      {showColumns && (
         <>
           <ModelColumns
             className="max-h-[15rem]"

web/client/src/library/components/graph/help.ts

@@ -19,6 +19,7 @@ import { type ConnectedNode } from '~/workers/lineage'
 export interface GraphNodeData {
   label: string
   type: LineageNodeModelType
+  withColumns: boolean
   [key: string]: any
 }
 
@@ -180,6 +181,7 @@ function getNodeMap({
     const model = models.get(modelName)
     const node = createGraphNode(modelName, {
       label: model?.displayName ?? modelName,
+      withColumns,
       type: isNotNil(model)
         ? (model.type as LineageNodeModelType)
         : // If model name present in lineage but not in global models
@@ -205,7 +207,6 @@ function getNodeMap({
     node.data.height = withColumns
       ? maxHeight + NODE_BALANCE_SPACE * 2
       : NODE_BALANCE_SPACE
-    node.data.withColumns = withColumns
 
     if (isArrayNotEmpty(lineage[node.id]?.models)) {
       node.targetPosition = Position.Left
@@ -664,10 +665,9 @@ function getUpdatedNodes(
   connectedNodes: Set<string>,
   selectedNodes: Set<string>,
   connections: Map<string, Connections>,
-  withConnected: boolean = true,
-  withImpacted: boolean = true,
-  withSecondary: boolean = true,
-  withColumns: boolean = true,
+  withConnected: boolean,
+  withImpacted: boolean,
+  withSecondary: boolean,
 ): Node[] {
   return nodes.map(node => {
     node.hidden = true
@@ -687,7 +687,7 @@ function getUpdatedNodes(
       node.hidden = isFalse(isActiveNode)
     }
 
-    if (node.data.type === EnumLineageNodeModelType.cte && withColumns) {
+    if (node.data.type === EnumLineageNodeModelType.cte) {
       node.hidden = isFalse(activeNodes.has(node.id))
     }