feat: Add stopNodeId tracking for improved validation and edge control (#9867)

✨ (flowSidebarComponent/index.tsx): Remove unnecessary console.log statement
♻️ (flowStore.ts): Refactor useFlowStore to include a stopNodeId property and setter function for better state management and flow control.

Co-authored-by: Carlos Coelho <80289056+carlosrcoelho@users.noreply.github.com>

Author: 2 people

src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx

@@ -545,17 +545,17 @@ export function FlowSidebarComponent({ isLoading }: FlowSidebarComponentProps) {
 
   const filterDescription =
     getFilterComponent !== ""
-      ? (baseData[category][component]?.display_name ?? "")
-      : (filterType?.type ?? "");
+      ? baseData[category][component]?.display_name ?? ""
+      : filterType?.type ?? "";
 
   const filterName =
     getFilterComponent !== ""
       ? "Component"
       : filterType
-        ? filterType.source
-          ? "Input"
-          : "Output"
-        : "";
+      ? filterType.source
+        ? "Input"
+        : "Output"
+      : "";
 
   const resetFilters = useCallback(() => {
     setFilterEdge([]);

src/frontend/src/stores/flowStore.ts

@@ -687,6 +687,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       nodesToValidate = downstream.nodes;
       edgesToValidate = downstream.edges;
     } else if (stopNodeId) {
+      get().setStopNodeId(stopNodeId);
       const upstream = getConnectedSubgraph(
         stopNodeId,
         get().nodes,
@@ -696,6 +697,9 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       nodesToValidate = upstream.nodes;
       edgesToValidate = upstream.edges;
     }
+    if (!stopNodeId) {
+      get().setStopNodeId(undefined);
+    }
 
     for (const edge of edgesToValidate) {
       const errorsEdge = validateEdge(edge, nodesToValidate, edgesToValidate);
@@ -820,6 +824,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
         get().updateBuildStatus([vertexBuildData.id], status);
       }
     }
+
     await buildFlowVerticesWithFallback({
       session,
       input_value,
@@ -829,7 +834,6 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       stopNodeId,
       onGetOrderSuccess: () => {},
       onBuildComplete: (allNodesValid) => {
-        const _nodeId = startNodeId || stopNodeId;
         if (!silent) {
           if (allNodesValid) {
             get().setBuildInfo({ success: true });
@@ -911,10 +915,12 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
   },
   updateEdgesRunningByNodes: (ids: string[], running: boolean) => {
     const edges = get().edges;
+
     const newEdges = edges.map((edge) => {
       if (
         edge.data?.sourceHandle &&
-        ids.includes(edge.data.sourceHandle.id ?? "")
+        ids.includes(edge.data.sourceHandle.id ?? "") &&
+        edge.data.sourceHandle.id !== get().stopNodeId
       ) {
         edge.animated = running;
         edge.className = running ? "running" : "";
@@ -938,7 +944,6 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       resolve();
     });
   },
-
   updateVerticesBuild: (
     vertices: {
       verticesIds: string[];
@@ -1095,6 +1100,10 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
     set({ newChatOnPlayground: newChat });
   },
   newChatOnPlayground: false,
+  stopNodeId: undefined,
+  setStopNodeId: (nodeId: string | undefined) => {
+    set({ stopNodeId: nodeId });
+  },
 }));
 
 export default useFlowStore;

src/frontend/src/types/zustand/flow/index.ts

@@ -293,4 +293,6 @@ export type FlowStoreType = {
   setHelperLineEnabled: (helperLineEnabled: boolean) => void;
   newChatOnPlayground: boolean;
   setNewChatOnPlayground: (newChat: boolean) => void;
+  stopNodeId: string | undefined;
+  setStopNodeId: (nodeId: string | undefined) => void;
 };