diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index 61ba66967..4e029f702 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -83,7 +83,6 @@ export default function GenericNode({ }, [data, data.node]); // State for outline color - const sseData = useFlowStore((state) => state.sseData); const isBuilding = useFlowStore((state) => state.isBuilding); useEffect(() => { diff --git a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx index 9f649a77c..de9182d59 100644 --- a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx +++ b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx @@ -3,7 +3,6 @@ import { useState } from "react"; import Loading from "../../../components/ui/loading"; import { postBuildInit } from "../../../controllers/API"; import { FlowType } from "../../../types/flow"; - import useAlertStore from "../../../stores/alertStore"; import useFlowStore from "../../../stores/flowStore"; import { parsedDataType } from "../../../types/components"; @@ -18,7 +17,6 @@ export default function BuildTrigger({ open: boolean; flow: FlowType; }): JSX.Element { - const updateSSEData = useFlowStore((state) => state.updateSSEData); const isBuilding = useFlowStore((state) => state.isBuilding); const setIsBuilding = useFlowStore((state) => state.setIsBuilding); const nodes = useFlowStore((state) => state.nodes); @@ -47,84 +45,16 @@ export default function BuildTrigger({ const startTime = Date.now(); setIsBuilding(true); - const allNodesValid = await streamNodeData(flow); + await enforceMinimumLoadingTime(startTime, minimumLoadingTime); - if (!allNodesValid) { - setErrorData({ - title: "Oops! Looks like you missed something", - list: [ - "Check components and retry. Hover over component status icon 🔴 to inspect.", - ], - }); - } - if (errors.length === 0 && allNodesValid) { - setSuccessData({ - title: "Flow is ready to run", - }); - } } catch (error) { console.error("Error:", error); } finally { setIsBuilding(false); } } - async function streamNodeData(flow: FlowType) { - // Step 1: Make a POST request to send the flow data and receive a unique session ID - const response = await postBuildInit(flow); - const { flowId } = response.data; - // Step 2: Use the session ID to establish an SSE connection using EventSource - let validationResults: boolean[] = []; - const apiUrl = `/api/v1/build/stream/${flowId}`; - return new Promise((resolve, reject) => { - const eventSource = new EventSource(apiUrl); - eventSource.onmessage = (event) => { - // If the event is parseable, return - if (!event.data) { - return; - } - const parsedData = JSON.parse(event.data); - // if the event is the end of the stream, close the connection - if (parsedData.end_of_stream) { - eventSource.close(); - resolve(validationResults.every((result) => result)); - } else if (parsedData.log) { - // If the event is a log, log it - setSuccessData({ title: parsedData.log }); - } else if (parsedData.input_keys !== undefined) { - setFlowState(parsedData); - } else { - // Otherwise, process the data - const isValid = processStreamResult(parsedData); - setProgress(parsedData.progress); - validationResults.push(isValid); - } - }; - eventSource.onerror = (error: any) => { - console.error("EventSource failed:", error); - - if (error.data) { - const parsedData = JSON.parse(error.data); - setErrorData({ title: parsedData.error }); - setIsBuilding(false); - } - eventSource.close(); - reject(new Error("Streaming failed")); - }; - }); - } - - function processStreamResult(parsedData: parsedDataType) { - // Process each chunk of data here - // Parse the chunk and update the context - try { - updateSSEData({ [parsedData.id]: parsedData }); - } catch (err) { - console.log("Error parsing stream data: ", err); - } - return parsedData.valid; - } async function enforceMinimumLoadingTime( startTime: number, diff --git a/src/frontend/src/stores/flowStore.ts b/src/frontend/src/stores/flowStore.ts index ed98f229e..84557b459 100644 --- a/src/frontend/src/stores/flowStore.ts +++ b/src/frontend/src/stores/flowStore.ts @@ -31,7 +31,6 @@ import useFlowsManagerStore from "./flowsManagerStore"; // this is our useStore hook that we can use in our components to get parts of the store and call actions const useFlowStore = create((set, get) => ({ - sseData: {}, flowState: undefined, nodes: [], edges: [], @@ -67,14 +66,10 @@ const useFlowStore = create((set, get) => ({ nodes, edges, flowState: undefined, - sseData: {}, isBuilt: false, }); get().reactFlowInstance!.setViewport(viewport); }, - updateSSEData: (sseData) => { - set((state) => ({ sseData: { ...state.sseData, ...sseData } })); - }, setIsBuilding: (isBuilding) => { set({ isBuilding }); }, @@ -113,7 +108,6 @@ const useFlowStore = create((set, get) => ({ nodes: newChange, flowState: undefined, isBuilt: false, - sseData: {}, }); const flowsManager = useFlowsManagerStore.getState(); @@ -131,7 +125,6 @@ const useFlowStore = create((set, get) => ({ edges: newChange, flowState: undefined, isBuilt: false, - sseData: {}, }); const flowsManager = useFlowsManagerStore.getState(); @@ -293,7 +286,6 @@ const useFlowStore = create((set, get) => ({ nodes: [], edges: [], flowState: undefined, - sseData: {}, isBuilt: false, getFilterEdge: [], }); diff --git a/src/frontend/src/types/zustand/flow/index.ts b/src/frontend/src/types/zustand/flow/index.ts index 1e86bce6e..07c4a6e10 100644 --- a/src/frontend/src/types/zustand/flow/index.ts +++ b/src/frontend/src/types/zustand/flow/index.ts @@ -42,8 +42,6 @@ export type FlowStoreType = { setFlowPool: (flowPool: FlowPoolType) => void; addDataToFlowPool: (data: any, nodeId: string) => void; CleanFlowPool: () => void; - updateSSEData: (sseData: object) => void; - sseData: object; isBuilding: boolean; isPending: boolean; setIsBuilding: (isBuilding: boolean) => void;