This document explains how the Langflow frontend detects when components in a flow are outdated, have breaking changes, or have been user-edited. It details the implementation of the detection logic, the data flow through Zustand stores, and the UI mechanisms for notifying and updating components.
For information about the GenericNode component structure, see GenericNode Component(). For details on node toolbar actions, see Node Actions and Toolbar().
The component update detection system tracks when components in a flow have newer versions available in the component registry, identifies breaking changes between versions, and distinguishes user-modified components from unmodified ones. This enables users to keep their flows up-to-date while preserving custom modifications and ensuring graph integrity during updates.
The system tracks four distinct states for each component:
| State | Property | Description |
|---|---|---|
| Outdated | outdated | Component has a newer version available in the registry based on code/template comparison. |
| Blocked | blocked | Component update is blocked (e.g., custom components disabled by environment settings). |
| Breaking Change | breakingChange | The new version contains changes that would break existing connections or parameters. |
| User Edited | userEdited | User has manually modified the component code, making it a "Custom Component". |
These states are defined in the ComponentsToUpdateType interface.
Sources: src/frontend/src/types/zustand/flow/index.ts56-64
The detection process bridges the gap between the static component registry (registry space) and the active flow canvas (instance space).
Title: Component Update State Determination
The detection process occurs automatically when flows are loaded or nodes change. The updateComponentsToUpdate function iterates through nodes and uses the checkCodeValidity utility to compare the current node's template against the latest version stored in useTypesStore.
Sources: src/frontend/src/stores/flowStore.ts143-168 src/frontend/src/stores/flowStore.ts12
The updateComponentsToUpdate function in useFlowStore scans all nodes in the current flow and compares them against the component registry. It populates the componentsToUpdate array, which the UI subscribes to.
This function is triggered during node updates and when the application state requires re-validation of components.
Sources: src/frontend/src/stores/flowStore.ts143-168 src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx103-104
To prevent race conditions where a user might try to run a flow while components are still validating/updating, Langflow uses a pendingNodeUpdates map. The buildFlow engine awaits these promises before execution via waitForNodeUpdates.
| Function | Role |
|---|---|
registerNodeUpdate(nodeId) | Adds a node ID to the pendingNodeUpdates map with a new promise. src/frontend/src/stores/flowStore.ts68-76 |
completeNodeUpdate(nodeId) | Resolves the promise and removes the ID from the map. src/frontend/src/stores/flowStore.ts78-84 |
waitForNodeUpdates(timeout) | Awaits all pending promises in the map (default 10s timeout). src/frontend/src/stores/flowStore.ts86-110 |
Sources: src/frontend/src/stores/flowStore.ts61-110
Each GenericNode retrieves its specific update state from the store. This ensures that only the affected node re-renders when its update status changes.
Sources: src/frontend/src/CustomNodes/GenericNode/index.tsx145-161
When a user initiates an update, Langflow performs code validation. If a breakingChange is detected, an UpdateComponentModal is presented to warn the user before proceeding.
Title: Component Update Sequence
Sources: src/frontend/src/CustomNodes/GenericNode/index.tsx163-168 src/frontend/src/stores/flowStore.ts68-84
The NodeToolbarComponent dynamically adjusts its options based on the update state. If a component is outdated or has a breakingChange, the toolbar provides visual indicators and specific update triggers via the isOutdated, isUserEdited, and hasBreakingChange props.
Sources: src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx56-58 src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx61-63
When updating or editing code via the CodeAreaModal, the system must merge the new template from the backend while preserving existing user-defined values for parameters. This is handled in processDynamicField.
Sources: src/frontend/src/modals/codeAreaModal/index.tsx115-150
Updating a component often changes its available inputs or outputs. The cleanEdges utility is responsible for removing broken connections after an update. It checks if the sourceNode and targetNode still exist in the graph and validates handle existence and type compatibility.
Title: Edge Validation Logic
Sources: src/frontend/src/utils/reactflowUtils.ts74-124 src/frontend/src/utils/reactflowUtils.ts195-201
Refresh this wiki
This wiki was recently refreshed. Please wait 5 days to refresh again.