diff --git a/frontend/src/components/nodes/InputNode.tsx b/frontend/src/components/nodes/InputNode.tsx index 20958af5..621d5dc7 100644 --- a/frontend/src/components/nodes/InputNode.tsx +++ b/frontend/src/components/nodes/InputNode.tsx @@ -13,6 +13,7 @@ import styles from './InputNode.module.css' import { RootState } from '../../store/store' import { isEqual } from 'lodash' import { FlowWorkflowNode } from '../../store/flowSlice' +import NodeOutputDisplay from './NodeOutputDisplay' interface InputNodeProps { id: string @@ -28,6 +29,7 @@ const InputNode: React.FC = ({ id, data, readOnly = false, ...pr const [newFieldValue, setNewFieldValue] = useState('') const [isCollapsed, setIsCollapsed] = useState(false) const [showKeyError, setShowKeyError] = useState(false) + const [showOutput, setShowOutput] = useState(false) const incomingEdges = useSelector( (state: RootState) => state.flow.edges.filter((edge) => edge.target === id), isEqual @@ -341,6 +343,12 @@ const InputNode: React.FC = ({ id, data, readOnly = false, ...pr {renderWorkflowInputs()} {renderAddField()} + + {data.run && ( +
+ +
+ )} ) diff --git a/frontend/src/hooks/useWorkflowExecution.ts b/frontend/src/hooks/useWorkflowExecution.ts index a0d54067..40e5afbf 100644 --- a/frontend/src/hooks/useWorkflowExecution.ts +++ b/frontend/src/hooks/useWorkflowExecution.ts @@ -1,4 +1,4 @@ -import { useState, useEffect } from 'react' +import { useState, useEffect, useRef } from 'react' import { useDispatch, useSelector } from 'react-redux' import { updateNodeDataOnly, resetRun } from '../store/flowSlice' import { getRunStatus, startRun, getWorkflowRuns, validateGoogleAccessToken } from '../utils/api' @@ -26,13 +26,14 @@ export const useWorkflowExecution = ({ onAlert }: UseWorkflowExecutionProps) => const [workflowRuns, setWorkflowRuns] = useState([]) const [isUpdatingStatus, setIsUpdatingStatus] = useState(false) - let currentStatusInterval: NodeJS.Timeout | null = null + // Create array to track all intervals for this run + const statusIntervals = useRef([]) const updateWorkflowStatus = async (runID: string): Promise => { - if (currentStatusInterval) { - clearInterval(currentStatusInterval) - } - currentStatusInterval = setInterval(async () => { + // Clear any existing intervals + statusIntervals.current.forEach((interval) => clearInterval(interval)) + + let currentStatusInterval = setInterval(async () => { try { const statusResponse = await getRunStatus(runID) const tasks = statusResponse.tasks @@ -84,21 +85,30 @@ export const useWorkflowExecution = ({ onAlert }: UseWorkflowExecutionProps) => if (statusResponse.status !== 'RUNNING') { setIsRunning(false) setCompletionPercentage(0) + // Clear all intervals + statusIntervals.current.forEach((interval) => clearInterval(interval)) clearInterval(currentStatusInterval) onAlert('Workflow run completed.', 'success') } if (statusResponse.status === 'FAILED' || tasks.some((task) => task.status === 'FAILED')) { setIsRunning(false) setCompletionPercentage(0) + // Clear all intervals + statusIntervals.current.forEach((interval) => clearInterval(interval)) clearInterval(currentStatusInterval) onAlert('Workflow run failed.', 'danger') return } } catch (error) { console.error('Error fetching workflow status:', error) + // Clear all intervals + statusIntervals.current.forEach((interval) => clearInterval(interval)) clearInterval(currentStatusInterval) } }, 1000) + + // Track the new interval + statusIntervals.current.push(currentStatusInterval) } const executeWorkflow = async (inputValues: Record): Promise => { @@ -132,8 +142,8 @@ export const useWorkflowExecution = ({ onAlert }: UseWorkflowExecutionProps) => const stopWorkflow = (): void => { setIsRunning(false) setCompletionPercentage(0) - if (currentStatusInterval) { - clearInterval(currentStatusInterval) + if (statusIntervals.current.length > 0) { + statusIntervals.current.forEach((interval) => clearInterval(interval)) } onAlert('Workflow run stopped.', 'warning') } diff --git a/frontend/src/store/flowSlice.ts b/frontend/src/store/flowSlice.ts index 9feb53f2..756cc7f8 100644 --- a/frontend/src/store/flowSlice.ts +++ b/frontend/src/store/flowSlice.ts @@ -659,7 +659,7 @@ const flowSlice = createSlice({ resetRun: (state) => { state.nodes = state.nodes.map((node) => ({ ...node, - data: { ...node.data, run: undefined, taskStatus: undefined }, + data: { ...node.data, run: undefined, taskStatus: undefined, error: undefined }, })) },