From c8123903d3f13864e3167072bf9f9b3c524ebde6 Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Thu, 30 Jan 2025 11:23:32 -0800
Subject: [PATCH] Added comments to workflow

---
 .../workflow-canvas/workflow-canvas.tsx         | 17 +++++++++++++++--
 app/w/[id]/workflow.tsx                         |  9 +++++++++
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/app/w/[id]/components/workflow-canvas/workflow-canvas.tsx b/app/w/[id]/components/workflow-canvas/workflow-canvas.tsx
index 3c1ae18602..91ea5bef73 100644
--- a/app/w/[id]/components/workflow-canvas/workflow-canvas.tsx
+++ b/app/w/[id]/components/workflow-canvas/workflow-canvas.tsx
@@ -17,15 +17,18 @@ import { WorkflowNode } from '../workflow-node/workflow-node'
 import { CustomEdge } from '../custom-edge/custom-edge'
 import { initializeStateLogger } from '@/stores/workflow/state-logger'
 
+// Define custom node and edge types for ReactFlow
 const nodeTypes: NodeTypes = { workflowBlock: WorkflowNode }
 const edgeTypes: EdgeTypes = { custom: CustomEdge }
 
 export function WorkflowCanvas() {
+  // Track selected elements in the workflow
   const [selectedBlockId, setSelectedBlockId] = useState<string | null>(null)
   const [selectedEdgeId, setSelectedEdgeId] = useState<string | null>(null)
+
+  // Store references and state management hooks
   const { isExecuting, executionResult, handleRunWorkflow } =
     useWorkflowExecution()
-
   const {
     blocks,
     edges,
@@ -41,7 +44,7 @@ export function WorkflowCanvas() {
   const { addNotification } = useNotificationStore()
   const { project } = useReactFlow()
 
-  // Convert blocks to ReactFlow nodes
+  // Transform blocks into ReactFlow node format
   const nodes = Object.values(blocks).map((block) => ({
     id: block.id,
     type: 'workflowBlock',
@@ -55,6 +58,7 @@ export function WorkflowCanvas() {
     },
   }))
 
+  // Handle node position updates during drag operations
   const onNodesChange = useCallback(
     (changes: any) => {
       changes.forEach((change: any) => {
@@ -66,6 +70,7 @@ export function WorkflowCanvas() {
     [updateBlockPosition]
   )
 
+  // Handle edge removal and updates
   const onEdgesChange = useCallback(
     (changes: any) => {
       changes.forEach((change: any) => {
@@ -77,6 +82,7 @@ export function WorkflowCanvas() {
     [removeEdge]
   )
 
+  // Create new edges when nodes are connected
   const onConnect = useCallback(
     (connection: any) => {
       addEdge({
@@ -88,6 +94,7 @@ export function WorkflowCanvas() {
     [addEdge]
   )
 
+  // Handle new block creation from toolbar drag and drop
   const onDrop = useCallback(
     (event: React.DragEvent) => {
       event.preventDefault()
@@ -121,21 +128,25 @@ export function WorkflowCanvas() {
     [project, blocks, addBlock]
   )
 
+  // Update selection state when clicking nodes
   const onNodeClick = useCallback((event: React.MouseEvent, node: any) => {
     event.stopPropagation()
     setSelectedBlockId(node.id)
     setSelectedEdgeId(null)
   }, [])
 
+  // Clear selection when clicking on the canvas
   const onPaneClick = useCallback(() => {
     setSelectedBlockId(null)
     setSelectedEdgeId(null)
   }, [])
 
+  // Update selected edge when clicking on connections
   const onEdgeClick = useCallback((event: React.MouseEvent, edge: any) => {
     setSelectedEdgeId(edge.id)
   }, [])
 
+  // Handle keyboard shortcuts for edge deletion
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       if (
@@ -151,10 +162,12 @@ export function WorkflowCanvas() {
     return () => window.removeEventListener('keydown', handleKeyDown)
   }, [selectedEdgeId, removeEdge])
 
+  // Initialize state logging for debugging
   useEffect(() => {
     initializeStateLogger()
   }, [])
 
+  // Add selection data to edges for visual feedback
   const edgesWithSelection = edges.map((edge) => ({
     ...edge,
     data: {
diff --git a/app/w/[id]/workflow.tsx b/app/w/[id]/workflow.tsx
index d7ab7d3046..9854931d47 100644
--- a/app/w/[id]/workflow.tsx
+++ b/app/w/[id]/workflow.tsx
@@ -8,11 +8,14 @@ import { useParams, useRouter } from 'next/navigation'
 import { WorkflowCanvas } from './components/workflow-canvas/workflow-canvas'
 
 export default function Workflow() {
+  // Get URL parameters and routing functionality
   const params = useParams()
   const router = useRouter()
   const { workflows, setActiveWorkflow, addWorkflow } = useWorkflowRegistry()
+  // Track if initial data loading is complete
   const [isInitialized, setIsInitialized] = useState(false)
 
+  // Load saved workflows from localStorage on component mount
   useEffect(() => {
     if (typeof window !== 'undefined') {
       const savedRegistry = localStorage.getItem('workflow-registry')
@@ -23,9 +26,11 @@ export default function Workflow() {
     }
   }, [])
 
+  // Handle workflow initialization and navigation
   useEffect(() => {
     if (!isInitialized) return
 
+    // Create a new workflow with default values
     const createInitialWorkflow = () => {
       const id = crypto.randomUUID()
       const newWorkflow = {
@@ -39,16 +44,19 @@ export default function Workflow() {
       return id
     }
 
+    // Ensure valid workflow ID and redirect if necessary
     const validateAndNavigate = () => {
       const workflowIds = Object.keys(workflows)
       const currentId = params.id as string
 
+      // Create first workflow if none exist
       if (workflowIds.length === 0) {
         const newId = createInitialWorkflow()
         router.replace(`/w/${newId}`)
         return
       }
 
+      // Redirect to first workflow if current ID is invalid
       if (!workflows[currentId]) {
         router.replace(`/w/${workflowIds[0]}`)
         return
@@ -67,6 +75,7 @@ export default function Workflow() {
     isInitialized,
   ])
 
+  // Don't render until initial data is loaded
   if (!isInitialized) {
     return null
   }