simplify layout component

Author: mykalmax

web/common/src/components/Lineage/LineageColumnLevel/FactoryColumn.tsx

@@ -233,7 +233,7 @@ export function FactoryColumn<
             <NodeBadge className="FactoryColumn__NodeBadge">{type}</NodeBadge>
           }
           className={cn(
-            'FactoryColumn__Metadata relative overflow-visible group',
+            'FactoryColumn__Metadata relative overflow-visible',
             isDisabledColumn && 'cursor-not-allowed',
             className,
           )}

web/common/src/components/Lineage/LineageColumnLevel/help.ts

@@ -236,9 +236,9 @@ export function calculateColumnsHeight({
   const hasColumns = columnsCount > 0
   const columnHeight = 24 // tailwind h-6
   const columnsTopSeparator = 1
-  const columnSeparator = 1
+  const columnSeparator = 0
   const columnsContainerPadding = 4
-  const columnsPadding = 4
+  const columnsPadding = 0
   const columnsFilterHeight = hasColumnsFilter && hasColumns ? columnHeight : 0
   const columnsSeparators = columnsCount > 1 ? columnsCount - 1 : 0
 

web/common/src/components/Lineage/LineageContext.ts

@@ -64,7 +64,6 @@ export interface LineageContextValue<
   >
   currentNodeId: TNodeID | null
   selectedNode: LineageNode<TNodeData, TNodeID> | null
-  currentNode: LineageNode<TNodeData, TNodeID> | null
 }
 
 export function getInitial<
@@ -89,7 +88,6 @@ export function getInitial<
     selectedNodeId: null,
     selectedNode: null,
     currentNodeId: null,
-    currentNode: null,
   }
 }
 

web/common/src/components/Lineage/LineageLayout.tsx

@@ -35,14 +35,11 @@ export function LineageLayout<
   edgeTypes,
   className,
   controls,
-  nodesDraggable,
-  nodesConnectable,
   isBuildingLayout,
   useLineage,
   onNodeClick,
   onNodeDoubleClick,
   showControlOnlySelectedNodes,
-  showControlZoomToCurrentNode,
   showControlZoomToSelectedNode,
 }: {
   useLineage: LineageContextHook<
@@ -59,10 +56,7 @@ export function LineageLayout<
   nodeTypes?: NodeTypes
   edgeTypes?: EdgeTypes
   className?: string
-  nodesDraggable?: boolean
-  nodesConnectable?: boolean
   showControlOnlySelectedNodes?: boolean
-  showControlZoomToCurrentNode?: boolean
   showControlZoomToSelectedNode?: boolean
   controls?:
     | React.ReactNode
@@ -85,14 +79,11 @@ export function LineageLayout<
         <LineageLayoutBase
           nodeTypes={nodeTypes}
           edgeTypes={edgeTypes}
-          nodesDraggable={nodesDraggable}
-          nodesConnectable={nodesConnectable}
           controls={controls}
           useLineage={useLineage}
           onNodeClick={onNodeClick}
           onNodeDoubleClick={onNodeDoubleClick}
           showControlOnlySelectedNodes={showControlOnlySelectedNodes}
-          showControlZoomToCurrentNode={showControlZoomToCurrentNode}
           showControlZoomToSelectedNode={showControlZoomToSelectedNode}
         />
       </LineageLayoutContainer>

web/common/src/components/Lineage/LineageLayoutBase.tsx

@@ -2,9 +2,7 @@ import {
   Background,
   BackgroundVariant,
   Controls,
-  type EdgeChange,
   type EdgeTypes,
-  type NodeChange,
   type NodeTypes,
   ReactFlow,
   type SetCenter,
@@ -13,14 +11,12 @@ import {
   getOutgoers,
   useReactFlow,
   useViewport,
-  applyNodeChanges,
-  applyEdgeChanges,
 } from '@xyflow/react'
 
 import '@xyflow/react/dist/style.css'
 import './Lineage.css'
 
-import { CircuitBoard, Crosshair, LocateFixed, RotateCcw } from 'lucide-react'
+import { CircuitBoard, LocateFixed, RotateCcw } from 'lucide-react'
 import React from 'react'
 
 import { type LineageContextHook } from './LineageContext'
@@ -60,13 +56,10 @@ export function LineageLayoutBase<
   edgeTypes,
   className,
   controls,
-  nodesDraggable = false,
-  nodesConnectable = false,
   useLineage,
   onNodeClick,
   onNodeDoubleClick,
   showControlOnlySelectedNodes = true,
-  showControlZoomToCurrentNode = true,
   showControlZoomToSelectedNode = true,
 }: {
   useLineage: LineageContextHook<
@@ -79,17 +72,14 @@ export function LineageLayoutBase<
     TSourceHandleID,
     TTargetHandleID
   >
-  nodesDraggable?: boolean
-  nodesConnectable?: boolean
   nodeTypes?: NodeTypes
   edgeTypes?: EdgeTypes
   className?: string
   showControlOnlySelectedNodes?: boolean
-  showControlZoomToCurrentNode?: boolean
   showControlZoomToSelectedNode?: boolean
   controls?:
-    | React.ReactNode
-    | (({ setCenter }: { setCenter: SetCenter }) => React.ReactNode)
+  | React.ReactNode
+  | (({ setCenter }: { setCenter: SetCenter }) => React.ReactNode)
   onNodeClick?: (
     event: React.MouseEvent<Element, MouseEvent>,
     node: LineageNode<TNodeData, TNodeID>,
@@ -103,74 +93,20 @@ export function LineageLayoutBase<
   const { setCenter } = useReactFlow()
 
   const {
-    currentNode,
     zoom,
-    nodes: initialNodes,
+    nodes,
     edges,
-    setEdges,
     selectedNode,
     showOnlySelectedNodes,
     selectedNodeId,
     setZoom,
-    setSelectedNodeId,
     setShowOnlySelectedNodes,
     setSelectedNodes,
     setSelectedEdges,
   } = useLineage()
 
-  const [nodes, setNodes] =
-    React.useState<LineageNode<TNodeData, TNodeID>[]>(initialNodes)
-
-  const onNodesChange = React.useCallback(
-    (changes: NodeChange<LineageNode<TNodeData, TNodeID>>[]) => {
-      setNodes(applyNodeChanges(changes, nodes))
-    },
-    [nodes],
-  )
-
-  const onEdgesChange = React.useCallback(
-    (
-      changes: EdgeChange<
-        LineageEdge<
-          TEdgeData,
-          TEdgeID,
-          TSourceID,
-          TTargetID,
-          TSourceHandleID,
-          TTargetHandleID
-        >
-      >[],
-    ) => {
-      setEdges(
-        applyEdgeChanges<
-          LineageEdge<
-            TEdgeData,
-            TEdgeID,
-            TSourceID,
-            TTargetID,
-            TSourceHandleID,
-            TTargetHandleID
-          >
-        >(changes, edges),
-      )
-    },
-    [edges],
-  )
-
   const updateZoom = React.useMemo(() => debounce(setZoom, 200), [setZoom])
 
-  const zoomToCurrentNode = React.useCallback(
-    (zoom: number = DEFAULT_ZOOM) => {
-      if (currentNode) {
-        setCenter(currentNode.position.x, currentNode.position.y, {
-          zoom,
-          duration: 0,
-        })
-      }
-    },
-    [currentNode?.position.x, currentNode?.position.y],
-  )
-
   const zoomToSelectedNode = React.useCallback(
     (zoom: number = DEFAULT_ZOOM) => {
       if (selectedNode) {
@@ -195,13 +131,13 @@ export function LineageLayoutBase<
       return Array.from(
         new Set<LineageNode<TNodeData, TNodeID>>([
           node,
-          ...getIncomers(node, initialNodes, edges)
+          ...getIncomers(node, nodes, edges)
             .map(n => getAllIncomers(n, visited))
             .flat(),
         ]),
       )
     },
-    [initialNodes, edges],
+    [nodes, edges],
   )
 
   const getAllOutgoers = React.useCallback(
@@ -216,13 +152,13 @@ export function LineageLayoutBase<
       return Array.from(
         new Set<LineageNode<TNodeData, TNodeID>>([
           node,
-          ...getOutgoers(node, initialNodes, edges)
+          ...getOutgoers(node, nodes, edges)
             .map(n => getAllOutgoers(n, visited))
             .flat(),
         ]),
       )
     },
-    [initialNodes, edges],
+    [nodes, edges],
   )
 
   const connectedNodes = React.useMemo(() => {
@@ -233,12 +169,8 @@ export function LineageLayoutBase<
       ...getAllOutgoers(selectedNode),
     ]
 
-    if (currentNode) {
-      all.push(currentNode)
-    }
-
     return all
-  }, [selectedNode, currentNode, getAllIncomers, getAllOutgoers])
+  }, [selectedNode, getAllIncomers, getAllOutgoers])
 
   const connectedEdges = React.useMemo(() => {
     return getConnectedEdges<
@@ -254,19 +186,11 @@ export function LineageLayoutBase<
     >(connectedNodes, edges)
   }, [connectedNodes, edges])
 
-  React.useEffect(() => {
-    setNodes(initialNodes)
-  }, [initialNodes])
-
   React.useEffect(() => {
     if (selectedNodeId == null) {
       setShowOnlySelectedNodes(false)
       setSelectedNodes(new Set())
       setSelectedEdges(new Set())
-    } else {
-      if (selectedNode == null) {
-        setSelectedNodeId(null)
-      }
     }
   }, [selectedNodeId, selectedNode])
 
@@ -317,17 +241,12 @@ export function LineageLayoutBase<
       edges={edges}
       nodeTypes={nodeTypes}
       edgeTypes={edgeTypes}
-      onNodesChange={onNodesChange}
-      onEdgesChange={onEdgesChange}
-      nodesDraggable={nodesDraggable}
-      nodesConnectable={nodesConnectable}
       zoomOnDoubleClick={false}
       panOnScroll={true}
       zoomOnScroll={true}
       minZoom={nodes.length > NODES_TRESHOLD ? NODES_TRESHOLD_ZOOM : MIN_ZOOM}
       maxZoom={MAX_ZOOM}
       fitView={false}
-      nodeOrigin={[0.5, 0.5]}
       onlyRenderVisibleElements
       onNodeClick={onNodeClick}
       onNodeDoubleClick={onNodeDoubleClick}
@@ -346,14 +265,6 @@ export function LineageLayoutBase<
         position="top-right"
         className="m-1 border-2 border-lineage-control-border rounded-sm overflow-hidden"
       >
-        {currentNode && showControlZoomToCurrentNode && (
-          <LineageControlButton
-            text="Zoom to current node"
-            onClick={() => zoomToCurrentNode(DEFAULT_ZOOM)}
-          >
-            <LineageControlIcon Icon={Crosshair} />
-          </LineageControlButton>
-        )}
         {selectedNodeId && (
           <>
             {showControlOnlySelectedNodes && (

web/common/src/components/Lineage/help.ts

@@ -41,17 +41,17 @@ export function getTransformedNodes<
   adjacencyListKeys: TAdjacencyListKey[],
   lineageDetails: LineageDetails<TAdjacencyListKey, TDetailsNode>,
   transformNode: TransformNodeFn<TDetailsNode, TNodeData, TNodeID>,
+  allNodesMap?: LineageNodesMap<TNodeData, TNodeID>,
 ): LineageNodesMap<TNodeData, TNodeID> {
   const nodesCount = adjacencyListKeys.length
   const nodesMap: LineageNodesMap<TNodeData, TNodeID> = Object.create(null)
 
   for (let i = 0; i < nodesCount; i++) {
     const adjacencyListKey = adjacencyListKeys[i]
-    const encodedNodeId = toNodeID<TNodeID>(adjacencyListKey)
-    nodesMap[encodedNodeId] = transformNode(
-      encodedNodeId,
-      lineageDetails[adjacencyListKey],
-    )
+    const nodeId = toNodeID<TNodeID>(adjacencyListKey)
+    nodesMap[nodeId] =
+      allNodesMap?.[nodeId] ||
+      transformNode(nodeId, lineageDetails[adjacencyListKey])
   }
 
   return nodesMap

web/common/src/components/Lineage/layout/dagreLayout.ts

@@ -21,6 +21,7 @@ export function buildLayout<
 >({
   edges,
   nodesMap,
+  shouldReuseExistingPosition = true,
 }: {
   edges: LineageEdge<
     TEdgeData,
@@ -31,6 +32,7 @@ export function buildLayout<
     TTargetHandleID
   >[]
   nodesMap: LineageNodesMap<TNodeData>
+  shouldReuseExistingPosition?: boolean
 }) {
   const nodes = Object.values(nodesMap)
   const nodeCount = nodes.length
@@ -46,7 +48,7 @@ export function buildLayout<
 
   g.setGraph({
     rankdir: 'LR',
-    nodesep: 0,
+    nodesep: 12,
     ranksep: 48,
     edgesep: 0,
     ranker: 'longest-path',
@@ -78,12 +80,19 @@ export function buildLayout<
     const nodeWithPosition = g.node(nodeId)
     const halfWidth = width / 2
     const halfHeight = height / 2
+    const isDefaultPosition = node.position.x === 0 && node.position.y === 0
 
     nodesMap[nodeId] = {
       ...node,
       position: {
-        x: nodeWithPosition.x - halfWidth,
-        y: nodeWithPosition.y - halfHeight,
+        x:
+          shouldReuseExistingPosition && isDefaultPosition
+            ? nodeWithPosition.x - halfWidth
+            : node.position.x,
+        y:
+          shouldReuseExistingPosition && isDefaultPosition
+            ? nodeWithPosition.y - halfHeight
+            : node.position.y,
       },
     }
   }