From c3353bec37be1c1903929dc54d36105b8a328b0c Mon Sep 17 00:00:00 2001 From: Gabriel Luiz Freitas Almeida Date: Fri, 17 May 2024 15:28:02 -0700 Subject: [PATCH] Fix visited set bug in Graph class and refactor GenericNode component (#1917) * format * chore: Fix visited set bug in Graph class * Refactor GenericNode component to improve build status handling --- src/backend/base/langflow/graph/graph/base.py | 2 +- .../src/customNodes/genericNode/index.tsx | 4 +- src/frontend/src/stores/flowStore.ts | 60 ++++++++++--------- 3 files changed, 35 insertions(+), 31 deletions(-) diff --git a/src/backend/base/langflow/graph/graph/base.py b/src/backend/base/langflow/graph/graph/base.py index 01bbab251..77cf84615 100644 --- a/src/backend/base/langflow/graph/graph/base.py +++ b/src/backend/base/langflow/graph/graph/base.py @@ -468,9 +468,9 @@ class Graph: """Marks a branch of the graph.""" if visited is None: visited = set() - visited.add(vertex_id) if vertex_id in visited: return + visited.add(vertex_id) self.mark_vertex(vertex_id, state) diff --git a/src/frontend/src/customNodes/genericNode/index.tsx b/src/frontend/src/customNodes/genericNode/index.tsx index 044d8cca4..c488d430a 100644 --- a/src/frontend/src/customNodes/genericNode/index.tsx +++ b/src/frontend/src/customNodes/genericNode/index.tsx @@ -303,7 +303,7 @@ export default function GenericNode({ ) => { let isInvalid = validationStatus && !validationStatus.valid; - if (buildStatus === BuildStatus.INACTIVE && isInvalid) { + if (buildStatus === BuildStatus.INACTIVE) { // INACTIVE should have its own class return "inactive-status"; } @@ -329,6 +329,7 @@ export default function GenericNode({ buildStatus, validationStatus ); + const baseBorderClass = getBaseBorderClass(selected); const nodeSizeClass = getNodeSizeClass(showNode); return classNames( @@ -383,7 +384,6 @@ export default function GenericNode({ isOutdated, selected, ]); - return ( <> {memoizedNodeToolbarComponent} diff --git a/src/frontend/src/stores/flowStore.ts b/src/frontend/src/stores/flowStore.ts index 44879aba8..e2c81eff6 100644 --- a/src/frontend/src/stores/flowStore.ts +++ b/src/frontend/src/stores/flowStore.ts @@ -44,7 +44,6 @@ import { getInputsAndOutputs } from "../utils/storeUtils"; import useAlertStore from "./alertStore"; import { useDarkStore } from "./darkStore"; import useFlowsManagerStore from "./flowsManagerStore"; -import FlowPage from "../pages/FlowPage"; // 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) => ({ @@ -80,7 +79,7 @@ const useFlowStore = create((set, get) => ({ updateFlowPool: ( nodeId: string, data: FlowPoolObjectType | ChatOutputType | chatInputType, - buildId?: string, + buildId?: string ) => { let newFlowPool = cloneDeep({ ...get().flowPool }); if (!newFlowPool[nodeId]) { @@ -171,7 +170,7 @@ const useFlowStore = create((set, get) => ({ flowsManager.autoSaveCurrentFlow( newChange, newEdges, - get().reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 }, + get().reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 } ); } }, @@ -187,7 +186,7 @@ const useFlowStore = create((set, get) => ({ flowsManager.autoSaveCurrentFlow( get().nodes, newChange, - get().reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 }, + get().reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 } ); } }, @@ -205,7 +204,7 @@ const useFlowStore = create((set, get) => ({ return newChange; } return node; - }), + }) ); }, getNode: (id: string) => { @@ -216,8 +215,8 @@ const useFlowStore = create((set, get) => ({ get().nodes.filter((node) => typeof nodeId === "string" ? node.id !== nodeId - : !nodeId.includes(node.id), - ), + : !nodeId.includes(node.id) + ) ); }, deleteEdge: (edgeId) => { @@ -225,8 +224,8 @@ const useFlowStore = create((set, get) => ({ get().edges.filter((edge) => typeof edgeId === "string" ? edge.id !== edgeId - : !edgeId.includes(edge.id), - ), + : !edgeId.includes(edge.id) + ) ); }, paste: (selection, position) => { @@ -292,7 +291,7 @@ const useFlowStore = create((set, get) => ({ let source = idsMap[edge.source]; let target = idsMap[edge.target]; const sourceHandleObject: sourceHandleType = scapeJSONParse( - edge.sourceHandle!, + edge.sourceHandle! ); let sourceHandle = scapedJSONStringfy({ ...sourceHandleObject, @@ -302,7 +301,7 @@ const useFlowStore = create((set, get) => ({ edge.data.sourceHandle = sourceHandleObject; const targetHandleObject: targetHandleType = scapeJSONParse( - edge.targetHandle!, + edge.targetHandle! ); let targetHandle = scapedJSONStringfy({ ...targetHandleObject, @@ -323,7 +322,7 @@ const useFlowStore = create((set, get) => ({ className: "stroke-gray-900 ", selected: false, }, - newEdges.map((edge) => ({ ...edge, selected: false })), + newEdges.map((edge) => ({ ...edge, selected: false })) ); }); get().setEdges(newEdges); @@ -342,10 +341,10 @@ const useFlowStore = create((set, get) => ({ }); const newNodes = get().nodes.filter( - (node) => !nodesIdsSelected.includes(node.id), + (node) => !nodesIdsSelected.includes(node.id) ); const newEdges = get().edges.filter( - (edge) => !edgesIdsSelected.includes(edge.id), + (edge) => !edgesIdsSelected.includes(edge.id) ); set({ nodes: newNodes, edges: newEdges }); @@ -403,7 +402,7 @@ const useFlowStore = create((set, get) => ({ style: { stroke: "#555" }, className: "stroke-foreground stroke-connection", }, - oldEdges, + oldEdges ); return newEdges; @@ -413,7 +412,7 @@ const useFlowStore = create((set, get) => ({ .autoSaveCurrentFlow( get().nodes, newEdges, - get().reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 }, + get().reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 } ); }, unselectAll: () => { @@ -444,7 +443,7 @@ const useFlowStore = create((set, get) => ({ function validateSubgraph(nodes: string[]) { const errorsObjs = validateNodes( get().nodes.filter((node) => nodes.includes(node.id)), - get().edges, + get().edges ); const errors = errorsObjs.map((obj) => obj.errors).flat(); @@ -463,10 +462,15 @@ const useFlowStore = create((set, get) => ({ function handleBuildUpdate( vertexBuildData: VertexBuildTypeAPI, status: BuildStatus, - runId: string, + runId: string ) { + console.log("handleBuildUpdate", vertexBuildData, status, runId); if (vertexBuildData && vertexBuildData.inactivated_vertices) { get().removeFromVerticesBuild(vertexBuildData.inactivated_vertices); + get().updateBuildStatus( + vertexBuildData.inactivated_vertices, + BuildStatus.INACTIVE + ); } if (vertexBuildData.next_vertices_ids) { @@ -481,11 +485,14 @@ const useFlowStore = create((set, get) => ({ // next_vertices_ids should be next_vertices_ids without the inactivated vertices const next_vertices_ids = vertexBuildData.next_vertices_ids.filter( - (id) => !vertexBuildData.inactivated_vertices?.includes(id), + (id) => !vertexBuildData.inactivated_vertices?.includes(id) + ); + const top_level_vertices = vertexBuildData.top_level_vertices.filter( + (vertex) => !vertexBuildData.inactivated_vertices?.includes(vertex.id) ); const nextVertices: VertexLayerElementType[] = zip( next_vertices_ids, - vertexBuildData.top_level_vertices, + top_level_vertices ).map(([id, reference]) => ({ id: id!, reference })); const newLayers = [ @@ -502,15 +509,12 @@ const useFlowStore = create((set, get) => ({ runId: runId, verticesToRun: get().verticesBuild!.verticesToRun, }); - get().updateBuildStatus( - vertexBuildData.top_level_vertices, - BuildStatus.TO_BUILD, - ); + get().updateBuildStatus(top_level_vertices, BuildStatus.TO_BUILD); } get().addDataToFlowPool( { ...vertexBuildData, buildId: runId }, - vertexBuildData.id, + vertexBuildData.id ); useFlowStore.getState().updateBuildStatus([vertexBuildData.id], status); @@ -519,7 +523,7 @@ const useFlowStore = create((set, get) => ({ const newFlowBuildStatus = { ...get().flowBuildStatus }; // filter out the vertices that are not status const verticesToUpdate = verticesIds?.filter( - (id) => newFlowBuildStatus[id]?.status !== BuildStatus.BUILT, + (id) => newFlowBuildStatus[id]?.status !== BuildStatus.BUILT ); if (verticesToUpdate) { @@ -584,7 +588,7 @@ const useFlowStore = create((set, get) => ({ verticesLayers: VertexLayerElementType[][]; runId: string; verticesToRun: string[]; - } | null, + } | null ) => { set({ verticesBuild: vertices }); }, @@ -609,7 +613,7 @@ const useFlowStore = create((set, get) => ({ // that are going to be built verticesIds: get().verticesBuild!.verticesIds.filter( // keep the vertices that are not in the list of vertices to remove - (vertex) => !vertices.includes(vertex), + (vertex) => !vertices.includes(vertex) ), }, });