refactor: GraphVisualizer - code optimization

Author: RohitRaj011

src/Shared/Components/GraphVisualizer/GraphVisualizer.tsx

@@ -68,10 +68,12 @@ export const GraphVisualizer = ({
         if (!graphVisualizerRef.current || !reactFlowInstanceRef.current) return () => {}
 
         const observer = new ResizeObserver((entries) => {
+            let shouldPanOnScroll = false
             entries.forEach((entry) => {
                 const { width } = entry.contentRect
-                setPanOnScroll(reactFlowInstanceRef.current.getNodesBounds(nodes).width + PADDING_X * 2 > width)
+                shouldPanOnScroll = reactFlowInstanceRef.current.getNodesBounds(nodes).width + PADDING_X * 2 > width
             })
+            setPanOnScroll(shouldPanOnScroll)
         })
 
         observer.observe(graphVisualizerRef.current)
@@ -84,22 +86,16 @@ export const GraphVisualizer = ({
     // METHODS
     const onNodesChange: OnNodesChange<GraphVisualizerExtendedNode> = (changes) => {
         setNodes((nds) =>
-            applyNodeChanges(changes, processNodes(nds, edges)).map((node) => {
-                const _node = node
-                delete _node.position
-                return _node
-            }),
+            applyNodeChanges(changes, processNodes(nds, edges)).map(
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                ({ position, ...node }) => node,
+            ),
         )
     }
 
     const onEdgesChange: OnEdgesChange = (changes) => {
-        setEdges((eds) =>
-            applyEdgeChanges(changes, processEdges(eds)).map((edge) => {
-                const _edge = edge
-                delete _edge.type
-                return _edge
-            }),
-        )
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        setEdges((eds) => applyEdgeChanges(changes, processEdges(eds)).map(({ type, ...edge }) => edge))
     }
 
     const onViewportChange = (updatedViewport: Viewport) => {

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

@@ -0,0 +1,24 @@
+import { useMemo } from 'react'
+import { Handle, Position, useEdges } from '@xyflow/react'
+
+import { BaseNodeProps } from './types'
+
+export const BaseNode = ({ id, className, isConnectable, children }: BaseNodeProps) => {
+    const edges = useEdges()
+
+    const { hasSource, hasTarget } = useMemo(
+        () => ({
+            hasSource: edges.some(({ source }) => source === id),
+            hasTarget: edges.some(({ target }) => target === id),
+        }),
+        [edges],
+    )
+
+    return (
+        <div className={className}>
+            {children}
+            {hasSource && <Handle type="source" position={Position.Right} isConnectable={isConnectable} />}
+            {hasTarget && <Handle type="target" position={Position.Left} isConnectable={isConnectable} />}
+        </div>
+    )
+}

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

@@ -1,19 +1,20 @@
-import { Handle, NodeProps, Position, useEdges } from '@xyflow/react'
+import { NodeProps } from '@xyflow/react'
 
 import { ComponentSizeType } from '@Shared/constants'
 
 import { SelectPicker, SelectPickerVariantType } from '../../SelectPicker'
 import { DropdownNodeProps } from './types'
+import { BaseNode } from './BaseNode'
 
 export const DropdownNode = ({ id, data, isConnectable }: NodeProps<DropdownNodeProps>) => {
     const { isError, ...restData } = data
-    const edges = useEdges()
-
-    const hasSource = edges.some(({ source }) => source === id)
-    const hasTarget = edges.some(({ target }) => target === id)
 
     return (
-        <div className={`bg__primary border__primary br-6 dc__inline-flex w-180 ${isError ? 'er-5' : ''}`}>
+        <BaseNode
+            id={id}
+            className={`bg__primary border__primary br-6 dc__inline-flex w-180 ${isError ? 'er-5' : ''}`}
+            isConnectable={isConnectable}
+        >
             <SelectPicker<string | number, false>
                 {...restData}
                 classNamePrefix="graph-visualizer-dropdown-node"
@@ -22,8 +23,6 @@ export const DropdownNode = ({ id, data, isConnectable }: NodeProps<DropdownNode
                 menuSize={ComponentSizeType.xs}
                 fullWidth
             />
-            {hasSource && <Handle type="source" position={Position.Right} isConnectable={isConnectable} />}
-            {hasTarget && <Handle type="target" position={Position.Left} isConnectable={isConnectable} />}
-        </div>
+        </BaseNode>
     )
 }

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

@@ -1,19 +1,18 @@
-import { Handle, NodeProps, Position, useEdges } from '@xyflow/react'
+import { NodeProps } from '@xyflow/react'
 
 import { IconNodeProps } from './types'
+import { BaseNode } from './BaseNode'
 
 export const IconNode = ({ data, id, isConnectable }: NodeProps<IconNodeProps>) => {
     const { icon } = data
-    const edges = useEdges()
-
-    const hasSource = edges.some(({ source }) => source === id)
-    const hasTarget = edges.some(({ target }) => target === id)
 
     return (
-        <div className="bg__primary border__primary br-6 dc__inline-flex p-7">
+        <BaseNode
+            id={id}
+            isConnectable={isConnectable}
+            className="bg__primary border__primary br-6 dc__inline-flex p-7"
+        >
             <span className="dc__no-shrink flex dc__fill-available-space icon-dim-20">{icon}</span>
-            {hasSource && <Handle type="source" position={Position.Right} isConnectable={isConnectable} />}
-            {hasTarget && <Handle type="target" position={Position.Left} isConnectable={isConnectable} />}
-        </div>
+        </BaseNode>
     )
 }

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

@@ -1,24 +1,23 @@
-import { Handle, NodeProps, Position, useEdges } from '@xyflow/react'
+import { NodeProps } from '@xyflow/react'
 
 import { Tooltip } from '@Common/Tooltip'
 
 import { TextNodeProps } from './types'
+import { BaseNode } from './BaseNode'
 
 export const TextNode = ({ id, data, isConnectable }: NodeProps<TextNodeProps>) => {
     const { icon, text } = data
-    const edges = useEdges()
-
-    const hasSource = edges.some(({ source }) => source === id)
-    const hasTarget = edges.some(({ target }) => target === id)
 
     return (
-        <div className="bg__primary border__primary br-6 p-7 dc__inline-flex dc__align-items-center dc__gap-8 w-180">
+        <BaseNode
+            id={id}
+            className="bg__primary border__primary br-6 p-7 dc__inline-flex dc__align-items-center dc__gap-8 w-180"
+            isConnectable={isConnectable}
+        >
             {!!icon && <span className="dc__no-shrink flex dc__fill-available-space icon-dim-20">{icon}</span>}
             <Tooltip content={text}>
-                <p className="m-0 fs-12 lh-20 fw-6 cn-9 dc__ellipsis-right">{text}</p>
+                <p className="m-0 fs-12 lh-20 fw-6 cn-9 dc__truncate">{text}</p>
             </Tooltip>
-            {hasSource && <Handle type="source" position={Position.Right} isConnectable={isConnectable} />}
-            {hasTarget && <Handle type="target" position={Position.Left} isConnectable={isConnectable} />}
-        </div>
+        </BaseNode>
     )
 }

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

@@ -1,8 +1,15 @@
-import { ReactElement } from 'react'
+import { ReactElement, ReactNode } from 'react'
 import { Node } from '@xyflow/react'
 
 import { SelectPickerProps } from '../../SelectPicker'
 
+export interface BaseNodeProps {
+    id: string
+    className?: string
+    isConnectable: boolean
+    children: ReactNode
+}
+
 export type IconNodeProps = Node<
     {
         icon: ReactElement

src/Shared/Components/GraphVisualizer/styles.scss

@@ -1,3 +1,11 @@
+// REACT FLOW
+.graph-visualizer {
+    .react-flow {
+        --xy-edge-stroke-default: var(--N200);
+        --xy-background-color-default: var(--bg-secondary);
+    }
+}
+
 .graph-visualizer-dropdown-node {
     &__control {
         gap: 8px !important;

src/Shared/Components/GraphVisualizer/utils.ts

@@ -1,4 +1,4 @@
-import { Edge, MarkerType } from '@xyflow/react'
+import { Edge, MarkerType, Viewport } from '@xyflow/react'
 
 import { NODE_GAP_X, NODE_GAP_Y, NODE_HEIGHT_MAP, NODE_WIDTH_MAP } from './constants'
 import { GraphVisualizerExtendedNode, GraphVisualizerNode, GraphVisualizerProps } from './types'
@@ -53,7 +53,7 @@ const placeNode = (
     nodeId: string,
     x: number,
     y: number,
-    positions: Record<string, { x: number; y: number }>,
+    positions: Record<string, Pick<Viewport, 'x' | 'y'>>,
     childrenMap: Map<string, string[]>,
     nodeMap: Map<string, GraphVisualizerNode>,
 ) => {
@@ -93,7 +93,7 @@ const placeNode = (
 
 const calculateNodePositions = (nodes: GraphVisualizerProps['nodes'], edges: GraphVisualizerProps['edges']) => {
     // Store calculated positions for each node
-    const positions: Record<string, { x: number; y: number }> = {}
+    const positions: Record<string, Pick<Viewport, 'x' | 'y'>> = {}
 
     // Map to store parent-child relationships
     const childrenMap = new Map<string, string[]>()