Resolve a bug related to the Running Node

frontend/src/App.js

@@ -32,6 +32,7 @@ let nodeIdCounter = 0;
 function App() {
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+  const [isRunning, setIsRunning] = useState(false);
   const { addLog } = useContext(LogContext);
 
   const nodeTypes = useMemo(() => ({ 
@@ -271,10 +272,33 @@ function App() {
     }
   };
 
+  // Find all nodes reachable from a starting node (for isolated workflow execution)
+  const findReachableNodes = useCallback((startNodeId) => {
+    const reachableNodes = new Set([startNodeId]);
+    const nodesToProcess = [startNodeId];
+    
+    while (nodesToProcess.length > 0) {
+      const currentNodeId = nodesToProcess.shift();
+      
+      // Find all edges where the current node is the source
+      edges.forEach(edge => {
+        if (edge.source === currentNodeId && !reachableNodes.has(edge.target)) {
+          reachableNodes.add(edge.target);
+          nodesToProcess.push(edge.target);
+        }
+      });
+    }
+    
+    return Array.from(reachableNodes);
+  }, [edges]);
+
   const resetNodeStatuses = () => {
     setNodes(nds => nds.map(n => {
-      const { status, result, ...restData } = n.data;
-      return { ...n, data: restData };
+      if (n.data && ('status' in n.data || 'result' in n.data)) {
+        const { status, result, error, ...restData } = n.data;
+        return { ...n, data: restData };
+      }
+      return n;
     }));
   };
 
@@ -475,22 +499,48 @@ function App() {
     }
   };
 
-  const handleRun = async () => {
-    addLog("================== WORKFLOW RUNNING ==================", 'INFO');
-    resetNodeStatuses();
-
-    const nodesMap = new Map(nodes.map(n => [n.id, n]));
-    const inDegree = new Map(nodes.map(n => [n.id, 0]));
-    edges.forEach(edge => {
-      inDegree.set(edge.target, (inDegree.get(edge.target) || 0) + 1);
-    });
-
-    const executionResults = new Map();
-    const initialNodes = nodes.filter(n => inDegree.get(n.id) === 0);
+  // Function to run workflow from a specific run node
+  const handleRunFromNode = async (startNodeId) => {
+    if (isRunning) {
+      addLog("A workflow is already running. Please wait for it to complete.", 'WARN');
+      return;
+    }
+    
+    setIsRunning(true);
     
-    addLog(`Found ${initialNodes.length} initial node(s) to execute.`);
-    for (const node of initialNodes) {
-      await executeNode(node, executionResults, nodesMap);
+    try {
+      addLog(`================== WORKFLOW RUNNING FROM NODE ${startNodeId} ==================`, 'INFO');
+      resetNodeStatuses();
+      
+      // Get only the nodes reachable from this specific Run Node
+      const reachableNodeIds = findReachableNodes(startNodeId);
+      addLog(`This workflow includes ${reachableNodeIds.length} node(s)`, 'INFO');
+      
+      // Map of all nodes for easier access
+      const nodesMap = new Map(nodes.map(n => [n.id, n]));
+      // Track execution results
+      const executionResults = new Map();
+      
+      // Start execution from the run node
+      await executeNode(nodesMap.get(startNodeId), executionResults, nodesMap);
+      
+      addLog(`================== WORKFLOW COMPLETED ==================`, 'SUCCESS');
+    } catch (error) {
+      addLog(`Workflow execution failed: ${error.message}`, 'ERROR');
+    } finally {
+      setIsRunning(false);
+    }
+  };
+
+  // For backward compatibility or general run
+  const handleRun = async () => {
+    // Find all run nodes
+    const runNodes = nodes.filter(node => node.type === 'runNode');
+    if (runNodes.length > 0) {
+      // Run from the first run node found (for backward compatibility)
+      await handleRunFromNode(runNodes[0].id);
+    } else {
+      addLog("No Run Nodes found in the workflow. Please add a Run Node.", 'WARN');
     }
   };
 
@@ -504,7 +554,7 @@ function App() {
         </div>
       </div>
       <div style={{ flexGrow: 1, position: 'relative' }}>
-        <WorkflowContext.Provider value={{ handleRun }}>
+        <WorkflowContext.Provider value={{ handleRun, handleRunFromNode, isRunning }}>
           <ReactFlow
             nodes={nodes}
             edges={edges}

frontend/src/OutputNode.css

@@ -110,4 +110,54 @@
   display: flex;
   justify-content: flex-end;
   padding: 0 15px 10px 15px;
+}
+
+
+/* Reusable indicator styling */
+.reusable-indicator {
+  display: inline-flex;
+  align-items: center;
+  margin-left: 8px;
+  color: #1a73e8;
+  cursor: help;
+  opacity: 0.7;
+  transition: opacity 0.2s;
+}
+
+.reusable-indicator:hover {
+  opacity: 1;
+}
+
+/* Handle styling for better visibility */
+.react-flow__handle {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background-color: #1a73e8;
+  border: 2px solid white;
+  transition: background-color 0.2s;
+}
+
+.react-flow__handle:hover {
+  background-color: #0d5bdd;
+}
+
+/* Source handle with special styling to indicate it's reusable */
+.react-flow__handle-right {
+  background-color: #34a853;
+}
+
+.react-flow__handle-right:hover {
+  background-color: #2d9249;
+}
+
+/* Enhanced styling for connections */
+.react-flow__edge-path {
+  stroke: #1a73e8;
+  stroke-width: 2;
+}
+
+.react-flow__connection-path {
+  stroke: #34a853;
+  stroke-width: 2;
 }

frontend/src/OutputNode.js

@@ -1,13 +1,19 @@
-import React from 'react';
-import { Handle, Position } from 'reactflow';
+import React, { useEffect } from 'react';
+import { Handle, Position, useUpdateNodeInternals } from 'reactflow';
 import './OutputNode.css';
 
-const OutputNode = ({ data, isConnectable }) => {
+const OutputNode = ({ data, isConnectable, id }) => {
   const { connectedType, label, result } = data;
+  const updateNodeInternals = useUpdateNodeInternals();
 
   // Log the props received by the component for debugging
   console.log(`[OutputNode: ${label}] Received data:`, data);
 
+  // Make sure node internals update when result changes
+  useEffect(() => {
+    updateNodeInternals(id);
+  }, [result, id, updateNodeInternals]);
+
   // Function to download the output content
   const downloadOutput = () => {
     if (!result) return;
@@ -175,6 +181,37 @@ const OutputNode = ({ data, isConnectable }) => {
     </svg>
   );
 
+  // Reuse icon (simple SVG)
+  const ReusableIcon = () => (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M17 2L21 6L17 10" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      <path d="M3 11V9C3 7.89543 3.89543 7 5 7H21" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      <path d="M7 22L3 18L7 14" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      <path d="M21 13V15C21 16.1046 20.1046 17 19 17H3" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+  );
+
+  // Get the correct data type for the source handle
+  const getOutputDataType = () => {
+    switch (connectedType) {
+      case 'textbox':
+      case 'markdown':
+        return 'string';
+      case 'json':
+        return 'object';
+      case 'image':
+        return 'image';
+      case 'audio':
+        return 'audio';
+      case 'video':
+        return 'video';
+      case 'file':
+        return 'file';
+      default:
+        return 'any';
+    }
+  };
+
   return (
     <div className={`output-node ${data.status || ''}`}>
       <Handle
@@ -186,9 +223,15 @@ const OutputNode = ({ data, isConnectable }) => {
       <div className="output-node-header">
         <strong>{label || 'Output'}</strong>
         {data.status && <span className="node-status">{data.status}</span>}
+        {result !== null && result !== undefined && (
+          <span className="reusable-indicator" title="This output can be connected to other nodes">
+            <ReusableIcon />
+          </span>
+        )}
       </div>
       {renderContent()}
-      {/* Only show download button when there's a result */}
+      
+      {/* Action buttons */}
       {result !== null && result !== undefined && (
         <div className="output-actions">
           <button 
@@ -200,11 +243,15 @@ const OutputNode = ({ data, isConnectable }) => {
           </button>
         </div>
       )}
+      
+      {/* Source handle with data type and result */}
       <Handle
         type="source"
         position={Position.Right}
         id="source-result"
         isConnectable={isConnectable}
+        data-type={getOutputDataType()}
+        data-result={typeof result === 'object' ? JSON.stringify(result) : String(result || '')}
       />
     </div>
   );

frontend/src/RunNode.js

@@ -3,8 +3,13 @@ import { Handle, Position } from 'reactflow';
 import { WorkflowContext } from './App'; // Import context from App.js
 import './RunNode.css';
 
-const RunNode = ({ data, isConnectable }) => {
-  const { handleRun } = useContext(WorkflowContext); // Consume the context
+const RunNode = ({ data, isConnectable, id }) => {
+  const { handleRunFromNode, isRunning } = useContext(WorkflowContext); // Get the specific run function and running state
+
+  // Run only this specific workflow branch
+  const runThisWorkflow = () => {
+    handleRunFromNode(id);
+  };
 
   return (
     <div className="run-node">
@@ -13,9 +18,12 @@ const RunNode = ({ data, isConnectable }) => {
       </div>
       <div className="run-node-content">
         <p>Connect this node to the start of your flow and click the button to begin.</p>
-        {/* The button now calls the function directly from the context */}
-        <button onClick={handleRun} className="run-button">
-          &#9658; Run Flow
+        <button 
+          onClick={runThisWorkflow} 
+          className="run-button"
+          disabled={isRunning}
+        >
+          {isRunning ? '⏳ Running...' : '▶ Run Flow'}
         </button>
       </div>
       <Handle
@@ -28,4 +36,4 @@ const RunNode = ({ data, isConnectable }) => {
   );
 };
 
-export default RunNode;
+export default RunNode;