feat: GraphVisualizer

  - enable panOnScroll only when scrolling is needed
  - update Nodes type
  - update calculateNodePositions to account for multiple root nodes
  - DropdownNode - update menuPortalTarget

Author: RohitRaj011

src/Shared/Components/GraphVisualizer/GraphVisualizer.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import {
     applyEdgeChanges,
     applyNodeChanges,
@@ -14,7 +14,7 @@ import {
 import '@xyflow/react/dist/style.css'
 
 import { DEFAULT_VIEWPORT, NODE_TYPES, PADDING_X, PADDING_Y } from './constants'
-import { GraphVisualizerBaseNode, GraphVisualizerProps } from './types'
+import { GraphVisualizerExtendedNode, GraphVisualizerProps } from './types'
 import { processEdges, processNodes } from './utils'
 
 import './styles.scss'
@@ -27,9 +27,11 @@ export const GraphVisualizer = ({
 }: GraphVisualizerProps) => {
     // REFS
     const reactFlowInstanceRef = useRef<ReactFlowInstance>()
+    const graphVisualizerRef = useRef<HTMLDivElement>()
 
     // STATES
     const [viewport, setViewport] = useState<Viewport>()
+    const [panOnScroll, setPanOnScroll] = useState(false)
 
     // MEMOS
     const nodes = useMemo(() => processNodes(initialNodes, initialEdges), [initialNodes])
@@ -59,8 +61,28 @@ export const GraphVisualizer = ({
         return 0
     }, [reactFlowInstanceRef.current, nodes])
 
+    // Enable `panOnScroll` if the total node width exceeds the available width.
+    // When `panOnScroll` is true, it prevents browser scrolling while interacting with the React Flow graph
+    // So we are disabling `panOnScroll` when no scrolling is needed, so as to browser scrolling works.
+    useEffect(() => {
+        if (!graphVisualizerRef.current || !reactFlowInstanceRef.current) return () => {}
+
+        const observer = new ResizeObserver((entries) => {
+            entries.forEach((entry) => {
+                const { width } = entry.contentRect
+                setPanOnScroll(reactFlowInstanceRef.current.getNodesBounds(nodes).width + PADDING_X * 2 > width)
+            })
+        })
+
+        observer.observe(graphVisualizerRef.current)
+
+        return () => {
+            observer.disconnect()
+        }
+    }, [reactFlowInstanceRef.current])
+
     // METHODS
-    const onNodesChange: OnNodesChange<GraphVisualizerBaseNode> = (changes) => {
+    const onNodesChange: OnNodesChange<GraphVisualizerExtendedNode> = (changes) => {
         setNodes((nds) =>
             applyNodeChanges(changes, processNodes(nds, edges)).map((node) => {
                 const _node = node
@@ -81,23 +103,25 @@ export const GraphVisualizer = ({
     }
 
     const onViewportChange = (updatedViewport: Viewport) => {
+        const bounds = reactFlowInstanceRef.current.getNodesBounds(nodes)
         const normalizedViewport = updatedViewport
         normalizedViewport.x = Math.min(updatedViewport.x, DEFAULT_VIEWPORT.x)
+        normalizedViewport.y = Math.abs(bounds.y - PADDING_Y)
         setViewport(normalizedViewport)
     }
 
     const onInit = async (reactFlowInstance: ReactFlowInstance) => {
         reactFlowInstanceRef.current = reactFlowInstance
-        const bounds = reactFlowInstance.getNodesBounds(nodes)
-        await reactFlowInstance.setViewport({
-            ...DEFAULT_VIEWPORT,
-            y: Math.abs(bounds.y - PADDING_Y),
-        })
+        await reactFlowInstance.setViewport(DEFAULT_VIEWPORT)
     }
 
     return (
         <ReactFlowProvider>
-            <div className="graph-visualizer" style={{ height: containerHeight ? `${containerHeight}px` : '100%' }}>
+            <div
+                ref={graphVisualizerRef}
+                className="graph-visualizer"
+                style={{ height: containerHeight ? `${containerHeight}px` : '100%' }}
+            >
                 <ReactFlow
                     className="border__secondary br-8"
                     nodes={nodes}
@@ -108,8 +132,9 @@ export const GraphVisualizer = ({
                     translateExtent={translateExtent}
                     viewport={viewport}
                     onViewportChange={onViewportChange}
-                    panOnScroll
+                    panOnScroll={panOnScroll}
                     panOnScrollMode={PanOnScrollMode.Horizontal}
+                    preventScrolling={panOnScroll}
                     panOnDrag={false}
                     zoomOnDoubleClick={false}
                     zoomOnPinch={false}

src/Shared/Components/GraphVisualizer/components/DropdownNode.tsx

@@ -17,7 +17,7 @@ export const DropdownNode = ({ id, data, isConnectable }: NodeProps<DropdownNode
                 {...data}
                 classNamePrefix="graph-visualizer-dropdown-node"
                 variant={SelectPickerVariantType.BORDER_LESS}
-                menuPosition="absolute"
+                menuPortalTarget={document.querySelector('.graph-visualizer')}
                 menuSize={ComponentSizeType.xs}
                 fullWidth
             />

src/Shared/Components/GraphVisualizer/components/types.ts

@@ -21,7 +21,7 @@ export type TextNodeProps = Node<
 export type DropdownNodeProps = Node<
     Omit<
         SelectPickerProps<string | number, false>,
-        'variant' | 'fullWidth' | 'classNamePrefix' | 'menuPosition' | 'menuSize'
+        'variant' | 'fullWidth' | 'classNamePrefix' | 'menuPosition' | 'menuSize' | 'menuPortalTarget'
     >,
     'dropdownNode'
 >

src/Shared/Components/GraphVisualizer/types.ts

@@ -1,11 +1,14 @@
 import { Dispatch, SetStateAction } from 'react'
-import { BuiltInNode, Edge } from '@xyflow/react'
+import { Edge } from '@xyflow/react'
 
 import { DropdownNodeProps, IconNodeProps, TextNodeProps } from './components'
 
-export type GraphVisualizerBaseNode = IconNodeProps | TextNodeProps | DropdownNodeProps | BuiltInNode
+export type GraphVisualizerExtendedNode = IconNodeProps | TextNodeProps | DropdownNodeProps
 
-export type GraphVisualizerNode = Omit<GraphVisualizerBaseNode, 'position'>
+export type GraphVisualizerNode =
+    | Omit<IconNodeProps, 'position'>
+    | Omit<TextNodeProps, 'position'>
+    | Omit<DropdownNodeProps, 'position'>
 
 export type GraphVisualizerEdge = Omit<Edge, 'type'>
 

src/Shared/Components/GraphVisualizer/utils.ts

@@ -1,7 +1,7 @@
 import { Edge, MarkerType } from '@xyflow/react'
 
 import { NODE_GAP_X, NODE_GAP_Y, NODE_HEIGHT_MAP, NODE_WIDTH_MAP } from './constants'
-import { GraphVisualizerBaseNode, GraphVisualizerNode, GraphVisualizerProps } from './types'
+import { GraphVisualizerExtendedNode, GraphVisualizerNode, GraphVisualizerProps } from './types'
 
 /**
  * Processes edges by assigning a default type and customizing the marker (arrow style).
@@ -29,22 +29,15 @@ export const processEdges = (edges: GraphVisualizerProps['edges']): Edge[] =>
  * @param edges - List of all edges representing parent-child relationships.
  * @returns The root node's ID, or `null` if no root is found.
  */
-const findRootNode = (nodes: GraphVisualizerProps['nodes'], edges: GraphVisualizerProps['edges']): string | null => {
+const findRootNodes = (nodes: GraphVisualizerProps['nodes'], edges: GraphVisualizerProps['edges']) => {
     // Create a set of all node IDs
     const nodeIds = new Set(nodes.map((node) => node.id))
 
     // Create a set of all child node IDs (targets in edges)
     const childIds = new Set(edges.map((edge) => edge.target))
 
-    // The root node is the one that is in nodeIds but not in childIds
-    const rootNodeId = Array.from(nodeIds).find((nodeId) => !childIds.has(nodeId))
-
-    if (rootNodeId) {
-        return rootNodeId
-    }
-
-    // If no root node is found, return null (could indicate a cycle or disconnected nodes)
-    return null
+    // Find all nodes that are NOT a child of any other node (i.e., root nodes)
+    return Array.from(nodeIds).filter((nodeId) => !childIds.has(nodeId))
 }
 
 /**
@@ -56,7 +49,7 @@ const findRootNode = (nodes: GraphVisualizerProps['nodes'], edges: GraphVisualiz
  * @param childrenMap - Map of node ID → child nodes.
  * @param nodeMap - Map of node ID → node data.
  */
-const placeNodes = (
+const placeNode = (
     nodeId: string,
     x: number,
     y: number,
@@ -88,19 +81,13 @@ const placeNodes = (
     // Determine x-position for child nodes
     const childX = x + nodeWidth + NODE_GAP_X
 
-    // Get height values for each child node
-    const childHeights = children.map((id) => NODE_HEIGHT_MAP[nodeMap.get(id).type])
-
-    // Calculate total height required for children (with spacing)
-    const totalHeight = childHeights.reduce((sum, h) => sum + h + NODE_GAP_Y, -NODE_GAP_Y)
-
-    // Start positioning children from the topmost position
-    let startY = y - totalHeight / 2
-
-    children.forEach((child, index) => {
+    // Start placing children **below** the parent
+    let startY = y
+    children.forEach((child) => {
+        const childHeight = NODE_HEIGHT_MAP[nodeMap.get(child).type]
         // Position each child at the calculated coordinates
-        placeNodes(child, childX, startY + childHeights[index] / 2, updatedPositions, childrenMap, nodeMap)
-        startY += childHeights[index] + NODE_GAP_Y // Move Y down for next sibling
+        placeNode(child, childX, startY, updatedPositions, childrenMap, nodeMap)
+        startY += childHeight + NODE_GAP_Y // Move the next sibling below
     })
 }
 
@@ -116,14 +103,19 @@ const calculateNodePositions = (nodes: GraphVisualizerProps['nodes'], edges: Gra
     nodes.forEach((node) => childrenMap.set(node.id, []))
     edges.forEach((edge) => childrenMap.get(edge.source).push(edge.target))
 
-    // Identify the root node (the node that is never a target in edges)
-    const rootNode = findRootNode(nodes, edges)
-    if (!rootNode) {
-        throw new Error('Either cyclic or disconnected nodes are present!')
+    // Identify all the root nodes (the nodes that are never a target in edges)
+    const rootNodes = findRootNodes(nodes, edges)
+    if (!rootNodes.length) {
+        return {}
     }
 
-    // Start recursive positioning from the root node
-    placeNodes(rootNode, 0, 0, positions, childrenMap, nodeMap)
+    // Place multiple root nodes vertically spaced at x = 0
+    let startY = 0
+    rootNodes.forEach((rootId) => {
+        const nodeHeight = NODE_HEIGHT_MAP[nodeMap.get(rootId).type]
+        placeNode(rootId, 0, startY, positions, childrenMap, nodeMap)
+        startY += nodeHeight + NODE_GAP_Y // Move next root node downward
+    })
 
     return positions
 }
@@ -138,7 +130,7 @@ const calculateNodePositions = (nodes: GraphVisualizerProps['nodes'], edges: Gra
 export const processNodes = (
     nodes: GraphVisualizerProps['nodes'],
     edges: GraphVisualizerProps['edges'],
-): GraphVisualizerBaseNode[] => {
+): GraphVisualizerExtendedNode[] => {
     // Compute node positions based on hierarchy
     const positions = calculateNodePositions(nodes, edges)
 
@@ -149,6 +141,6 @@ export const processNodes = (
                 selectable: node.type === 'dropdownNode',
                 // Assign computed position; default to (0,0) if not found (shouldn't happen in a valid tree)
                 position: positions[node.id] ?? { x: 0, y: 0 },
-            }) as GraphVisualizerBaseNode,
+            }) as GraphVisualizerExtendedNode,
     )
 }