langflow icon indicating copy to clipboard operation
langflow copied to clipboard

feat: Outputs UX improvements

Open deon-sanchez opened this issue 7 months ago • 0 comments

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 OutputComponent to allow users to select from multiple outputs when available. This includes integrating DropdownMenu and DropdownMenuItem components and handling output selection logic via a new handleSelectOutput callback. ([[1]](diffhunk://#diff-9397f4f42c11a4775373f20f3b7cb69a46b89eb0bf6c9df358a621c7f0181e68R1-R8), [[2]](diffhunk://#diff-9397f4f42c11a4775373f20f3b7cb69a46b89eb0bf6c9df358a621c7f0181e68R49-R83))
  • Updated NodeOutputField and OutputParameter components to accept new props (outputs and handleSelectOutput) 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 GenericNode component to use memoized render functions for subcomponents like NodeIcon, NodeName, and NodeStatus, improving readability and performance. ([src/frontend/src/CustomNodes/GenericNode/index.tsxL366-R603](diffhunk://#diff-b6793e0279f94c374aae18db97958c0af6befc2b49b7ce30e0294f9c80ba0d0eL366-R603))
  • Replaced the previous manual filtering logic for shownOutputs and hiddenOutputs with a more concise useMemo implementation. ([src/frontend/src/CustomNodes/GenericNode/index.tsxL248-R389](diffhunk://#diff-b6793e0279f94c374aae18db97958c0af6befc2b49b7ce30e0294f9c80ba0d0eL248-R389))
  • Simplified callback implementations such as getValidationStatus and handleUpdateCode by removing unnecessary useCallback wrappers. ([[1]](diffhunk://#diff-b6793e0279f94c374aae18db97958c0af6befc2b49b7ce30e0294f9c80ba0d0eL106-R115), [[2]](diffhunk://#diff-b6793e0279f94c374aae18db97958c0af6befc2b49b7ce30e0294f9c80ba0d0eL397-R628))

Additional Changes:

  • Removed the HideShowButton from the NodeOutputField component, 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 cloneDeep from Lodash for safely updating node data when handling output selections. ([[1]](diffhunk://#diff-b6793e0279f94c374aae18db97958c0af6befc2b49b7ce30e0294f9c80ba0d0eR9), [[2]](diffhunk://#diff-b6793e0279f94c374aae18db97958c0af6befc2b49b7ce30e0294f9c80ba0d0eL248-R389))

deon-sanchez avatar May 19 '25 21:05 deon-sanchez