create-appraisejs 0.1.7 → 0.1.8

package/templates/default/src/components/diagram/flow-diagram.tsx

@@ -1,470 +1,470 @@
-'use client'
-
-import {
-  addEdge,
-  Background,
-  ConnectionMode,
-  Controls,
-  Edge,
-  Node,
-  NodeProps,
-  OnConnect,
-  ReactFlow,
-  useEdgesState,
-  useNodesState,
-  Connection,
-} from '@xyflow/react'
-import '@xyflow/react/dist/style.css'
-import { useCallback, useState, useEffect, useMemo, memo, useRef } from 'react'
-import { Button } from '@/components/ui/button'
-import ButtonEdge from './button-edge'
-import { Plus } from 'lucide-react'
-import OptionsHeaderNode from './options-header-node'
-import NodeForm from './node-form'
-import { NodeData } from '@/constants/form-opts/diagram/node-form'
-import { NodeOrderMap, TemplateTestCaseNodeData, TemplateTestCaseNodeOrderMap } from '@/types/diagram/diagram'
-import { Locator, TemplateStep, TemplateStepParameter, StepParameterType, LocatorGroup } from '@prisma/client'
-import { checkMissingMandatoryParams } from '@/lib/utils/node-param-validation'
-
-const edgeTypes = {
-  buttonEdge: ButtonEdge,
-}
-
-const FlowDiagram = ({
-  nodeOrder,
-  templateStepParams,
-  templateSteps,
-  locators,
-  locatorGroups,
-  onNodeOrderChange,
-  defaultValueInput = false,
-}: {
-  nodeOrder: NodeOrderMap | TemplateTestCaseNodeOrderMap
-  templateStepParams: TemplateStepParameter[]
-  templateSteps: TemplateStep[]
-  locators: Locator[]
-  locatorGroups: LocatorGroup[]
-  defaultValueInput?: boolean
-  onNodeOrderChange: (nodeOrder: NodeOrderMap | TemplateTestCaseNodeOrderMap) => void
-}) => {
-  const handleEditNodeRef = useRef<(nodeId: string) => void>(() => {})
-
-  const generateInitialNodesAndEdges = useCallback(
-    (nodeOrder: NodeOrderMap | TemplateTestCaseNodeOrderMap) => {
-      const nodes: Node[] = []
-      const edges: Edge[] = []
-
-      // Sort entries by order value
-      const sortedEntries = Object.entries(nodeOrder).sort(
-        ([, nodeDataA], [, nodeDataB]) => nodeDataA.order - nodeDataB.order,
-      )
-
-      // Create nodes
-      sortedEntries.forEach(([id, nodeData], index) => {
-        const baseNodeData = {
-          label: nodeData.label,
-          gherkinStep: nodeData.gherkinStep ?? '',
-          isFirstNode: nodeData.isFirstNode ?? false,
-          icon: nodeData.icon ?? '',
-          parameters: (nodeData.parameters ?? []).map(
-            (p: NodeData['parameters'][number] | TemplateTestCaseNodeData['parameters'][number]) => ({
-              name: p.name,
-              value: 'value' in p ? p.value : p.defaultValue,
-              type: p.type ?? StepParameterType.STRING,
-              order: p.order,
-            }),
-          ),
-          templateStepId: nodeData.templateStepId ?? '',
-        }
-
-        // Check for missing mandatory parameters (only when defaultValueInput is false)
-        const isMissingParams = checkMissingMandatoryParams(
-          {
-            parameters: baseNodeData.parameters,
-            templateStepId: baseNodeData.templateStepId,
-          },
-          templateStepParams,
-          defaultValueInput,
-        )
-
-        const nodeDataWithValidation = {
-          ...baseNodeData,
-          ...(isMissingParams ? { isMissingParams: true } : {}),
-        }
-
-        // Skip isolated nodes (order === -1)
-        if (nodeData.order === -1) {
-          nodes.push({
-            id,
-            data: nodeDataWithValidation,
-            position: { x: 0, y: index * 100 }, // Stack isolated nodes vertically
-            type: 'optionsHeaderNode',
-          })
-          return
-        }
-
-        nodes.push({
-          id,
-          data: nodeDataWithValidation,
-          position: { x: nodeData.order * 500, y: 0 }, // Space nodes horizontally based on order
-          type: 'optionsHeaderNode',
-        })
-
-        // Create edges between consecutive nodes
-        if (index < sortedEntries.length - 1) {
-          const nextEntry = sortedEntries[index + 1]
-          // Only create edge if both nodes have valid orders (not -1)
-          if (nodeData.order !== -1 && nextEntry[1].order !== -1 && nodeData.order === nextEntry[1].order - 1) {
-            edges.push({
-              id: `${id}-${nextEntry[0]}`,
-              source: id,
-              target: nextEntry[0],
-              type: 'buttonEdge',
-            })
-          }
-        }
-      })
-
-      return { nodes, edges }
-    },
-    [templateStepParams, defaultValueInput],
-  )
-
-  const { nodes: initialNodes, edges: initialEdges } = useMemo(
-    () => generateInitialNodesAndEdges(nodeOrder),
-    [nodeOrder, generateInitialNodesAndEdges],
-  )
-
-  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes)
-  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges)
-  const [showAddNodeDialog, setShowAddNodeDialog] = useState(false)
-  const [showEditNodeDialog, setShowEditNodeDialog] = useState(false)
-  const [editNodeId, setEditNodeId] = useState<string | null>(null)
-  const [editNodeData, setEditNodeData] = useState<NodeData | null>(null)
-
-  const handleEditNode = useCallback(
-    (nodeId: string) => {
-      const node = nodes.find(node => node.id === nodeId)
-      setEditNodeData({
-        ...(node?.data as NodeData),
-        gherkinStep: (node?.data as NodeData)?.gherkinStep ?? '',
-        parameters: ((node?.data as NodeData)?.parameters ?? []).map(p => ({
-          name: p.name,
-          value: p.value,
-          type: p.type ?? StepParameterType.STRING,
-          order: p.order,
-        })),
-        templateStepId: (node?.data as NodeData)?.templateStepId ?? '',
-      })
-      setEditNodeId(nodeId)
-      setShowEditNodeDialog(true)
-    },
-    [nodes],
-  )
-
-  // Update the ref whenever handleEditNode changes
-  useEffect(() => {
-    handleEditNodeRef.current = handleEditNode
-  }, [handleEditNode])
-
-  const addNode = useCallback(
-    (formData: NodeData) => {
-      // Lookup the icon from the template step
-      const templateStep = templateSteps.find(ts => ts.id === formData.templateStepId)
-      const icon = templateStep?.icon ?? 'MOUSE'
-
-      // Check for missing mandatory parameters (only when defaultValueInput is false)
-      const isMissingParams = checkMissingMandatoryParams(
-        {
-          parameters: formData.parameters,
-          templateStepId: formData.templateStepId,
-        },
-        templateStepParams,
-        defaultValueInput,
-      )
-
-      const newNode: Node = {
-        id: crypto.randomUUID(),
-        data: {
-          ...formData,
-          icon, // Add icon here
-          isFirstNode: nodes.length === 0,
-          ...(isMissingParams ? { isMissingParams: true } : {}),
-        },
-        position: { x: 0, y: 0 },
-        type: 'optionsHeaderNode',
-      }
-      setNodes(nds => nds.concat(newNode))
-      setShowAddNodeDialog(false)
-    },
-    [setNodes, setShowAddNodeDialog, nodes, templateSteps, templateStepParams, defaultValueInput],
-  )
-
-  const handleEditNodeSubmit = useCallback(
-    (formData: NodeData) => {
-      if (!editNodeId) return
-      const templateStep = templateSteps.find(ts => ts.id === formData.templateStepId)
-      const icon = templateStep?.icon ?? 'MOUSE'
-
-      // Check for missing mandatory parameters (only when defaultValueInput is false)
-      const isMissingParams = checkMissingMandatoryParams(
-        {
-          parameters: formData.parameters,
-          templateStepId: formData.templateStepId,
-        },
-        templateStepParams,
-        defaultValueInput,
-      )
-
-      setNodes(nds =>
-        nds.map(node =>
-          node.id === editNodeId
-            ? {
-                ...node,
-                data: {
-                  ...node.data,
-                  ...formData,
-                  icon, // Update icon here
-                  // Remove isMissingParams if all params are present, add it if missing
-                  ...(isMissingParams ? { isMissingParams: true } : { isMissingParams: false }),
-                },
-              }
-            : node,
-        ),
-      )
-      setShowEditNodeDialog(false)
-    },
-    [editNodeId, setNodes, setShowEditNodeDialog, templateSteps, templateStepParams, defaultValueInput],
-  )
-
-  const determineNodeOrders = useCallback((nodes: Node[], edges: Edge[]) => {
-    // Create adjacency list
-    const graph: Record<string, string[]> = {}
-    const inDegree: Record<string, number> = {}
-    const hasConnections: Record<string, boolean> = {}
-    const nodeIds = new Set(nodes.map(node => node.id))
-
-    // Initialize graph, inDegree, and hasConnections
-    nodes.forEach(node => {
-      graph[node.id] = []
-      inDegree[node.id] = 0
-      hasConnections[node.id] = false
-    })
-
-    // Build graph - only include edges where both source and target nodes exist
-    edges.forEach(edge => {
-      if (edge.source && edge.target && nodeIds.has(edge.source) && nodeIds.has(edge.target)) {
-        graph[edge.source].push(edge.target)
-        inDegree[edge.target] = (inDegree[edge.target] || 0) + 1
-        hasConnections[edge.source] = true
-        hasConnections[edge.target] = true
-      }
-    })
-
-    // Find nodes with no incoming edges
-    const queue = nodes.map(node => node.id).filter(id => inDegree[id] === 0 && hasConnections[id])
-
-    const orders: NodeOrderMap = {}
-    let orderNum = 1
-
-    // First mark all isolated nodes with -1
-    nodes.forEach(node => {
-      if (!hasConnections[node.id]) {
-        orders[node.id] = {
-          order: -1,
-          label: node.data.label as string,
-          gherkinStep: (node.data.gherkinStep as string) ?? '',
-          isFirstNode: (node.data.isFirstNode as boolean) ?? false,
-          icon: (node.data.icon as string) ?? '',
-          parameters: ((node.data.parameters as NodeData['parameters']) ?? []).map(p => ({
-            name: p.name,
-            value: p.value,
-            type: p.type ?? StepParameterType.STRING,
-            order: p.order,
-          })),
-          templateStepId: (node.data.templateStepId as string) ?? '',
-        }
-      }
-    })
-
-    // Process queue
-    while (queue.length > 0) {
-      const currentId = queue.shift()!
-      const currentNode = nodes.find(node => node.id === currentId)!
-      orders[currentId] = {
-        order: orderNum++,
-        label: currentNode.data.label as string,
-        gherkinStep: (currentNode.data.gherkinStep as string) ?? '',
-        isFirstNode: (currentNode.data.isFirstNode as boolean) ?? false,
-        icon: (currentNode.data.icon as string) ?? '',
-        parameters: ((currentNode.data.parameters as NodeData['parameters']) ?? []).map(p => ({
-          name: p.name,
-          value: p.value,
-          type: p.type ?? StepParameterType.STRING,
-          order: p.order,
-        })),
-        templateStepId: (currentNode.data.templateStepId as string) ?? '',
-      }
-
-      // Process neighbors
-      graph[currentId].forEach(neighborId => {
-        inDegree[neighborId]--
-        if (inDegree[neighborId] === 0) {
-          queue.push(neighborId)
-        }
-      })
-    }
-
-    // Handle any remaining nodes (cycles)
-    nodes.forEach(node => {
-      if (!orders[node.id]) {
-        orders[node.id] = {
-          order: orderNum++,
-          label: node.data.label as string,
-          gherkinStep: (node.data.gherkinStep as string) ?? '',
-          isFirstNode: (node.data.isFirstNode as boolean) ?? false,
-          icon: (node.data.icon as string) ?? '',
-          parameters: ((node.data.parameters as NodeData['parameters']) ?? []).map(p => ({
-            name: p.name,
-            value: p.value,
-            type: p.type ?? StepParameterType.STRING,
-            order: p.order,
-          })),
-          templateStepId: (node.data.templateStepId as string) ?? '',
-        }
-      }
-    })
-
-    return orders
-  }, [])
-
-  useEffect(() => {
-    const orders = determineNodeOrders(nodes, edges)
-    onNodeOrderChange(orders)
-  }, [nodes, edges, determineNodeOrders, onNodeOrderChange])
-
-  // Clean up orphaned edges when nodes are deleted
-  useEffect(() => {
-    const nodeIds = new Set(nodes.map(node => node.id))
-    const orphanedEdges = edges.filter(edge => !nodeIds.has(edge.source) || !nodeIds.has(edge.target))
-
-    if (orphanedEdges.length > 0) {
-      setEdges(prevEdges => prevEdges.filter(edge => nodeIds.has(edge.source) && nodeIds.has(edge.target)))
-    }
-  }, [nodes, edges, setEdges])
-
-  const isValidConnection = useCallback(
-    (connection: Connection | Edge) => {
-      // Check if source node already has an outgoing connection
-      const hasSourceConnection = edges.some(edge => edge.source === connection.source)
-
-      // Check if target node already has an incoming connection
-      const hasTargetConnection = edges.some(edge => edge.target === connection.target)
-
-      // Allow reconnection if we're connecting the same nodes
-      const isReconnecting = edges.some(edge => edge.source === connection.source && edge.target === connection.target)
-
-      return isReconnecting || (!hasSourceConnection && !hasTargetConnection)
-    },
-    [edges],
-  )
-
-  const onConnect: OnConnect = useCallback(
-    params => {
-      if (isValidConnection(params)) {
-        setEdges(eds => addEdge(params, eds))
-      }
-    },
-    [setEdges, isValidConnection],
-  )
-
-  const memoizedTemplateSteps = useMemo(() => templateSteps, [templateSteps])
-  const memoizedTemplateStepParams = useMemo(() => templateStepParams, [templateStepParams])
-  const memoizedLocators = useMemo(() => locators, [locators])
-
-  // Memoize nodeTypes to prevent recreation
-  const nodeTypes = useMemo(
-    () => ({
-      optionsHeaderNode: (props: NodeProps) => (
-        <OptionsHeaderNode {...props} onEdit={nodeId => handleEditNodeRef.current(nodeId)} />
-      ),
-    }),
-    [], // Empty dependency array - now stable since we use ref
-  )
-
-  return (
-    <>
-      <div className="h-[400px] w-full">
-        <div className="mb-8">
-          <Button onClick={() => setShowAddNodeDialog(true)}>
-            <span className="flex items-center">
-              <Plus className="mr-2 h-4 w-4" />
-              Add Node
-            </span>
-          </Button>
-        </div>
-        <ReactFlow
-          nodes={nodes}
-          onNodesChange={onNodesChange}
-          edges={edges}
-          onEdgesChange={onEdgesChange}
-          onConnect={onConnect}
-          fitView
-          colorMode="dark"
-          connectionMode={ConnectionMode.Loose}
-          edgeTypes={edgeTypes}
-          nodeTypes={nodeTypes}
-          defaultEdgeOptions={{
-            type: 'buttonEdge',
-          }}
-          connectOnClick={false}
-          isValidConnection={isValidConnection}
-          proOptions={{ hideAttribution: true }}
-        >
-          <Background />
-          <Controls />
-        </ReactFlow>
-      </div>
-
-      {showAddNodeDialog && (
-        <NodeForm
-          onSubmitAction={addNode}
-          initialValues={{
-            label: '',
-            gherkinStep: '',
-            templateStepId: '',
-            parameters: [],
-          }}
-          templateSteps={memoizedTemplateSteps}
-          templateStepParams={memoizedTemplateStepParams}
-          showAddNodeDialog={showAddNodeDialog}
-          setShowAddNodeDialog={setShowAddNodeDialog}
-          locators={memoizedLocators}
-          defaultValueInput={defaultValueInput}
-          locatorGroups={locatorGroups}
-        />
-      )}
-
-      {showEditNodeDialog && (
-        <NodeForm
-          onSubmitAction={handleEditNodeSubmit}
-          initialValues={{
-            label: editNodeData?.label ?? '',
-            gherkinStep: editNodeData?.gherkinStep ?? '',
-            templateStepId: editNodeData?.templateStepId ?? '',
-            parameters: editNodeData?.parameters ?? [],
-          }}
-          templateSteps={memoizedTemplateSteps}
-          templateStepParams={memoizedTemplateStepParams}
-          showAddNodeDialog={showEditNodeDialog}
-          setShowAddNodeDialog={setShowEditNodeDialog}
-          locators={memoizedLocators}
-          defaultValueInput={defaultValueInput}
-          locatorGroups={locatorGroups}
-        />
-      )}
-    </>
-  )
-}
-
-export default memo(FlowDiagram)
+'use client'
+
+import {
+  addEdge,
+  Background,
+  ConnectionMode,
+  Controls,
+  Edge,
+  Node,
+  NodeProps,
+  OnConnect,
+  ReactFlow,
+  useEdgesState,
+  useNodesState,
+  Connection,
+} from '@xyflow/react'
+import '@xyflow/react/dist/style.css'
+import { useCallback, useState, useEffect, useMemo, memo, useRef } from 'react'
+import { Button } from '@/components/ui/button'
+import ButtonEdge from './button-edge'
+import { Plus } from 'lucide-react'
+import OptionsHeaderNode from './options-header-node'
+import NodeForm from './node-form'
+import { NodeData } from '@/constants/form-opts/diagram/node-form'
+import { NodeOrderMap, TemplateTestCaseNodeData, TemplateTestCaseNodeOrderMap } from '@/types/diagram/diagram'
+import { Locator, TemplateStep, TemplateStepParameter, StepParameterType, LocatorGroup } from '@prisma/client'
+import { checkMissingMandatoryParams } from '@/lib/utils/node-param-validation'
+
+const edgeTypes = {
+  buttonEdge: ButtonEdge,
+}
+
+const FlowDiagram = ({
+  nodeOrder,
+  templateStepParams,
+  templateSteps,
+  locators,
+  locatorGroups,
+  onNodeOrderChange,
+  defaultValueInput = false,
+}: {
+  nodeOrder: NodeOrderMap | TemplateTestCaseNodeOrderMap
+  templateStepParams: TemplateStepParameter[]
+  templateSteps: TemplateStep[]
+  locators: Locator[]
+  locatorGroups: LocatorGroup[]
+  defaultValueInput?: boolean
+  onNodeOrderChange: (nodeOrder: NodeOrderMap | TemplateTestCaseNodeOrderMap) => void
+}) => {
+  const handleEditNodeRef = useRef<(nodeId: string) => void>(() => {})
+
+  const generateInitialNodesAndEdges = useCallback(
+    (nodeOrder: NodeOrderMap | TemplateTestCaseNodeOrderMap) => {
+      const nodes: Node[] = []
+      const edges: Edge[] = []
+
+      // Sort entries by order value
+      const sortedEntries = Object.entries(nodeOrder).sort(
+        ([, nodeDataA], [, nodeDataB]) => nodeDataA.order - nodeDataB.order,
+      )
+
+      // Create nodes
+      sortedEntries.forEach(([id, nodeData], index) => {
+        const baseNodeData = {
+          label: nodeData.label,
+          gherkinStep: nodeData.gherkinStep ?? '',
+          isFirstNode: nodeData.isFirstNode ?? false,
+          icon: nodeData.icon ?? '',
+          parameters: (nodeData.parameters ?? []).map(
+            (p: NodeData['parameters'][number] | TemplateTestCaseNodeData['parameters'][number]) => ({
+              name: p.name,
+              value: 'value' in p ? p.value : p.defaultValue,
+              type: p.type ?? StepParameterType.STRING,
+              order: p.order,
+            }),
+          ),
+          templateStepId: nodeData.templateStepId ?? '',
+        }
+
+        // Check for missing mandatory parameters (only when defaultValueInput is false)
+        const isMissingParams = checkMissingMandatoryParams(
+          {
+            parameters: baseNodeData.parameters,
+            templateStepId: baseNodeData.templateStepId,
+          },
+          templateStepParams,
+          defaultValueInput,
+        )
+
+        const nodeDataWithValidation = {
+          ...baseNodeData,
+          ...(isMissingParams ? { isMissingParams: true } : {}),
+        }
+
+        // Skip isolated nodes (order === -1)
+        if (nodeData.order === -1) {
+          nodes.push({
+            id,
+            data: nodeDataWithValidation,
+            position: { x: 0, y: index * 100 }, // Stack isolated nodes vertically
+            type: 'optionsHeaderNode',
+          })
+          return
+        }
+
+        nodes.push({
+          id,
+          data: nodeDataWithValidation,
+          position: { x: nodeData.order * 500, y: 0 }, // Space nodes horizontally based on order
+          type: 'optionsHeaderNode',
+        })
+
+        // Create edges between consecutive nodes
+        if (index < sortedEntries.length - 1) {
+          const nextEntry = sortedEntries[index + 1]
+          // Only create edge if both nodes have valid orders (not -1)
+          if (nodeData.order !== -1 && nextEntry[1].order !== -1 && nodeData.order === nextEntry[1].order - 1) {
+            edges.push({
+              id: `${id}-${nextEntry[0]}`,
+              source: id,
+              target: nextEntry[0],
+              type: 'buttonEdge',
+            })
+          }
+        }
+      })
+
+      return { nodes, edges }
+    },
+    [templateStepParams, defaultValueInput],
+  )
+
+  const { nodes: initialNodes, edges: initialEdges } = useMemo(
+    () => generateInitialNodesAndEdges(nodeOrder),
+    [nodeOrder, generateInitialNodesAndEdges],
+  )
+
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes)
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges)
+  const [showAddNodeDialog, setShowAddNodeDialog] = useState(false)
+  const [showEditNodeDialog, setShowEditNodeDialog] = useState(false)
+  const [editNodeId, setEditNodeId] = useState<string | null>(null)
+  const [editNodeData, setEditNodeData] = useState<NodeData | null>(null)
+
+  const handleEditNode = useCallback(
+    (nodeId: string) => {
+      const node = nodes.find(node => node.id === nodeId)
+      setEditNodeData({
+        ...(node?.data as NodeData),
+        gherkinStep: (node?.data as NodeData)?.gherkinStep ?? '',
+        parameters: ((node?.data as NodeData)?.parameters ?? []).map(p => ({
+          name: p.name,
+          value: p.value,
+          type: p.type ?? StepParameterType.STRING,
+          order: p.order,
+        })),
+        templateStepId: (node?.data as NodeData)?.templateStepId ?? '',
+      })
+      setEditNodeId(nodeId)
+      setShowEditNodeDialog(true)
+    },
+    [nodes],
+  )
+
+  // Update the ref whenever handleEditNode changes
+  useEffect(() => {
+    handleEditNodeRef.current = handleEditNode
+  }, [handleEditNode])
+
+  const addNode = useCallback(
+    (formData: NodeData) => {
+      // Lookup the icon from the template step
+      const templateStep = templateSteps.find(ts => ts.id === formData.templateStepId)
+      const icon = templateStep?.icon ?? 'MOUSE'
+
+      // Check for missing mandatory parameters (only when defaultValueInput is false)
+      const isMissingParams = checkMissingMandatoryParams(
+        {
+          parameters: formData.parameters,
+          templateStepId: formData.templateStepId,
+        },
+        templateStepParams,
+        defaultValueInput,
+      )
+
+      const newNode: Node = {
+        id: crypto.randomUUID(),
+        data: {
+          ...formData,
+          icon, // Add icon here
+          isFirstNode: nodes.length === 0,
+          ...(isMissingParams ? { isMissingParams: true } : {}),
+        },
+        position: { x: 0, y: 0 },
+        type: 'optionsHeaderNode',
+      }
+      setNodes(nds => nds.concat(newNode))
+      setShowAddNodeDialog(false)
+    },
+    [setNodes, setShowAddNodeDialog, nodes, templateSteps, templateStepParams, defaultValueInput],
+  )
+
+  const handleEditNodeSubmit = useCallback(
+    (formData: NodeData) => {
+      if (!editNodeId) return
+      const templateStep = templateSteps.find(ts => ts.id === formData.templateStepId)
+      const icon = templateStep?.icon ?? 'MOUSE'
+
+      // Check for missing mandatory parameters (only when defaultValueInput is false)
+      const isMissingParams = checkMissingMandatoryParams(
+        {
+          parameters: formData.parameters,
+          templateStepId: formData.templateStepId,
+        },
+        templateStepParams,
+        defaultValueInput,
+      )
+
+      setNodes(nds =>
+        nds.map(node =>
+          node.id === editNodeId
+            ? {
+                ...node,
+                data: {
+                  ...node.data,
+                  ...formData,
+                  icon, // Update icon here
+                  // Remove isMissingParams if all params are present, add it if missing
+                  ...(isMissingParams ? { isMissingParams: true } : { isMissingParams: false }),
+                },
+              }
+            : node,
+        ),
+      )
+      setShowEditNodeDialog(false)
+    },
+    [editNodeId, setNodes, setShowEditNodeDialog, templateSteps, templateStepParams, defaultValueInput],
+  )
+
+  const determineNodeOrders = useCallback((nodes: Node[], edges: Edge[]) => {
+    // Create adjacency list
+    const graph: Record<string, string[]> = {}
+    const inDegree: Record<string, number> = {}
+    const hasConnections: Record<string, boolean> = {}
+    const nodeIds = new Set(nodes.map(node => node.id))
+
+    // Initialize graph, inDegree, and hasConnections
+    nodes.forEach(node => {
+      graph[node.id] = []
+      inDegree[node.id] = 0
+      hasConnections[node.id] = false
+    })
+
+    // Build graph - only include edges where both source and target nodes exist
+    edges.forEach(edge => {
+      if (edge.source && edge.target && nodeIds.has(edge.source) && nodeIds.has(edge.target)) {
+        graph[edge.source].push(edge.target)
+        inDegree[edge.target] = (inDegree[edge.target] || 0) + 1
+        hasConnections[edge.source] = true
+        hasConnections[edge.target] = true
+      }
+    })
+
+    // Find nodes with no incoming edges
+    const queue = nodes.map(node => node.id).filter(id => inDegree[id] === 0 && hasConnections[id])
+
+    const orders: NodeOrderMap = {}
+    let orderNum = 1
+
+    // First mark all isolated nodes with -1
+    nodes.forEach(node => {
+      if (!hasConnections[node.id]) {
+        orders[node.id] = {
+          order: -1,
+          label: node.data.label as string,
+          gherkinStep: (node.data.gherkinStep as string) ?? '',
+          isFirstNode: (node.data.isFirstNode as boolean) ?? false,
+          icon: (node.data.icon as string) ?? '',
+          parameters: ((node.data.parameters as NodeData['parameters']) ?? []).map(p => ({
+            name: p.name,
+            value: p.value,
+            type: p.type ?? StepParameterType.STRING,
+            order: p.order,
+          })),
+          templateStepId: (node.data.templateStepId as string) ?? '',
+        }
+      }
+    })
+
+    // Process queue
+    while (queue.length > 0) {
+      const currentId = queue.shift()!
+      const currentNode = nodes.find(node => node.id === currentId)!
+      orders[currentId] = {
+        order: orderNum++,
+        label: currentNode.data.label as string,
+        gherkinStep: (currentNode.data.gherkinStep as string) ?? '',
+        isFirstNode: (currentNode.data.isFirstNode as boolean) ?? false,
+        icon: (currentNode.data.icon as string) ?? '',
+        parameters: ((currentNode.data.parameters as NodeData['parameters']) ?? []).map(p => ({
+          name: p.name,
+          value: p.value,
+          type: p.type ?? StepParameterType.STRING,
+          order: p.order,
+        })),
+        templateStepId: (currentNode.data.templateStepId as string) ?? '',
+      }
+
+      // Process neighbors
+      graph[currentId].forEach(neighborId => {
+        inDegree[neighborId]--
+        if (inDegree[neighborId] === 0) {
+          queue.push(neighborId)
+        }
+      })
+    }
+
+    // Handle any remaining nodes (cycles)
+    nodes.forEach(node => {
+      if (!orders[node.id]) {
+        orders[node.id] = {
+          order: orderNum++,
+          label: node.data.label as string,
+          gherkinStep: (node.data.gherkinStep as string) ?? '',
+          isFirstNode: (node.data.isFirstNode as boolean) ?? false,
+          icon: (node.data.icon as string) ?? '',
+          parameters: ((node.data.parameters as NodeData['parameters']) ?? []).map(p => ({
+            name: p.name,
+            value: p.value,
+            type: p.type ?? StepParameterType.STRING,
+            order: p.order,
+          })),
+          templateStepId: (node.data.templateStepId as string) ?? '',
+        }
+      }
+    })
+
+    return orders
+  }, [])
+
+  useEffect(() => {
+    const orders = determineNodeOrders(nodes, edges)
+    onNodeOrderChange(orders)
+  }, [nodes, edges, determineNodeOrders, onNodeOrderChange])
+
+  // Clean up orphaned edges when nodes are deleted
+  useEffect(() => {
+    const nodeIds = new Set(nodes.map(node => node.id))
+    const orphanedEdges = edges.filter(edge => !nodeIds.has(edge.source) || !nodeIds.has(edge.target))
+
+    if (orphanedEdges.length > 0) {
+      setEdges(prevEdges => prevEdges.filter(edge => nodeIds.has(edge.source) && nodeIds.has(edge.target)))
+    }
+  }, [nodes, edges, setEdges])
+
+  const isValidConnection = useCallback(
+    (connection: Connection | Edge) => {
+      // Check if source node already has an outgoing connection
+      const hasSourceConnection = edges.some(edge => edge.source === connection.source)
+
+      // Check if target node already has an incoming connection
+      const hasTargetConnection = edges.some(edge => edge.target === connection.target)
+
+      // Allow reconnection if we're connecting the same nodes
+      const isReconnecting = edges.some(edge => edge.source === connection.source && edge.target === connection.target)
+
+      return isReconnecting || (!hasSourceConnection && !hasTargetConnection)
+    },
+    [edges],
+  )
+
+  const onConnect: OnConnect = useCallback(
+    params => {
+      if (isValidConnection(params)) {
+        setEdges(eds => addEdge(params, eds))
+      }
+    },
+    [setEdges, isValidConnection],
+  )
+
+  const memoizedTemplateSteps = useMemo(() => templateSteps, [templateSteps])
+  const memoizedTemplateStepParams = useMemo(() => templateStepParams, [templateStepParams])
+  const memoizedLocators = useMemo(() => locators, [locators])
+
+  // Memoize nodeTypes to prevent recreation
+  const nodeTypes = useMemo(
+    () => ({
+      optionsHeaderNode: (props: NodeProps) => (
+        <OptionsHeaderNode {...props} onEdit={nodeId => handleEditNodeRef.current(nodeId)} />
+      ),
+    }),
+    [], // Empty dependency array - now stable since we use ref
+  )
+
+  return (
+    <>
+      <div className="h-[400px] w-full">
+        <div className="mb-8">
+          <Button onClick={() => setShowAddNodeDialog(true)}>
+            <span className="flex items-center">
+              <Plus className="mr-2 h-4 w-4" />
+              Add Node
+            </span>
+          </Button>
+        </div>
+        <ReactFlow
+          nodes={nodes}
+          onNodesChange={onNodesChange}
+          edges={edges}
+          onEdgesChange={onEdgesChange}
+          onConnect={onConnect}
+          fitView
+          colorMode="dark"
+          connectionMode={ConnectionMode.Loose}
+          edgeTypes={edgeTypes}
+          nodeTypes={nodeTypes}
+          defaultEdgeOptions={{
+            type: 'buttonEdge',
+          }}
+          connectOnClick={false}
+          isValidConnection={isValidConnection}
+          proOptions={{ hideAttribution: true }}
+        >
+          <Background />
+          <Controls />
+        </ReactFlow>
+      </div>
+
+      {showAddNodeDialog && (
+        <NodeForm
+          onSubmitAction={addNode}
+          initialValues={{
+            label: '',
+            gherkinStep: '',
+            templateStepId: '',
+            parameters: [],
+          }}
+          templateSteps={memoizedTemplateSteps}
+          templateStepParams={memoizedTemplateStepParams}
+          showAddNodeDialog={showAddNodeDialog}
+          setShowAddNodeDialog={setShowAddNodeDialog}
+          locators={memoizedLocators}
+          defaultValueInput={defaultValueInput}
+          locatorGroups={locatorGroups}
+        />
+      )}
+
+      {showEditNodeDialog && (
+        <NodeForm
+          onSubmitAction={handleEditNodeSubmit}
+          initialValues={{
+            label: editNodeData?.label ?? '',
+            gherkinStep: editNodeData?.gherkinStep ?? '',
+            templateStepId: editNodeData?.templateStepId ?? '',
+            parameters: editNodeData?.parameters ?? [],
+          }}
+          templateSteps={memoizedTemplateSteps}
+          templateStepParams={memoizedTemplateStepParams}
+          showAddNodeDialog={showEditNodeDialog}
+          setShowAddNodeDialog={setShowEditNodeDialog}
+          locators={memoizedLocators}
+          defaultValueInput={defaultValueInput}
+          locatorGroups={locatorGroups}
+        />
+      )}
+    </>
+  )
+}
+
+export default memo(FlowDiagram)