langflow
langflow copied to clipboard
feat: Outputs UX improvements
This pull request introduces significant updates to the GenericNode component and its related subcomponents, focusing on enhancing output handling and improving code structure. The changes include adding support for selecting outputs via a dropdown menu, refactoring how outputs are rendered, and simplifying some callback implementations.
Enhancements to Output Handling:
- Added a new dropdown menu in the
OutputComponentto allow users to select from multiple outputs when available. This includes integratingDropdownMenuandDropdownMenuItemcomponents and handling output selection logic via a newhandleSelectOutputcallback. ([[1]](diffhunk://#diff-9397f4f42c11a4775373f20f3b7cb69a46b89eb0bf6c9df358a621c7f0181e68R1-R8),[[2]](diffhunk://#diff-9397f4f42c11a4775373f20f3b7cb69a46b89eb0bf6c9df358a621c7f0181e68R49-R83)) - Updated
NodeOutputFieldandOutputParametercomponents to accept new props (outputsandhandleSelectOutput) for managing and rendering output selections. ([[1]](diffhunk://#diff-6cf29bf7d5d0de35976d99de64389f928f8848a839cf22fa6965dfa2beeef099R9),[[2]](diffhunk://#diff-6cf29bf7d5d0de35976d99de64389f928f8848a839cf22fa6965dfa2beeef099R57-R58),[[3]](diffhunk://#diff-4742b353430022eb88d35ab987d50925c592f35702319e1d476e2d53818cd795R169-R176),[[4]](diffhunk://#diff-4742b353430022eb88d35ab987d50925c592f35702319e1d476e2d53818cd795R423))
Refactoring and Code Simplification:
- Refactored the
GenericNodecomponent to use memoized render functions for subcomponents likeNodeIcon,NodeName, andNodeStatus, improving readability and performance. ([src/frontend/src/CustomNodes/GenericNode/index.tsxL366-R603](diffhunk://#diff-b6793e0279f94c374aae18db97958c0af6befc2b49b7ce30e0294f9c80ba0d0eL366-R603)) - Replaced the previous manual filtering logic for
shownOutputsandhiddenOutputswith a more conciseuseMemoimplementation. ([src/frontend/src/CustomNodes/GenericNode/index.tsxL248-R389](diffhunk://#diff-b6793e0279f94c374aae18db97958c0af6befc2b49b7ce30e0294f9c80ba0d0eL248-R389)) - Simplified callback implementations such as
getValidationStatusandhandleUpdateCodeby removing unnecessaryuseCallbackwrappers. ([[1]](diffhunk://#diff-b6793e0279f94c374aae18db97958c0af6befc2b49b7ce30e0294f9c80ba0d0eL106-R115),[[2]](diffhunk://#diff-b6793e0279f94c374aae18db97958c0af6befc2b49b7ce30e0294f9c80ba0d0eL397-R628))
Additional Changes:
- Removed the
HideShowButtonfrom theNodeOutputFieldcomponent, as its functionality is now integrated into the dropdown-based output selection. ([src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsxL397-L403](diffhunk://#diff-4742b353430022eb88d35ab987d50925c592f35702319e1d476e2d53818cd795L397-L403)) - Introduced
cloneDeepfrom Lodash for safely updating node data when handling output selections. ([[1]](diffhunk://#diff-b6793e0279f94c374aae18db97958c0af6befc2b49b7ce30e0294f9c80ba0d0eR9),[[2]](diffhunk://#diff-b6793e0279f94c374aae18db97958c0af6befc2b49b7ce30e0294f9c80ba0d0eL248-R389))