[Feature Request] Components Direct Connection: Displaying Connectable Components in Sidebar on Drag Actions

[yamonkjd]

Reasons for Suggestion

Enhancing user experience by providing a visual aid during the component connection process can significantly simplify workflow design. When users drag an input or output of a widget, showing potential connectable components in the sidebar would streamline the design process and reduce the time spent searching for compatible components.

Content of the Proposal

Introduce a feature where, during a drag action of a widget's input or output, the system automatically displays a list of connectable components in the sidebar. Users can then easily select from these options to establish a connection, improving workflow efficiency.

Technical Considerations

• Modify the UI to dynamically update the sidebar with connectable components based on the widget's connection points being dragged.
• Implement logic to filter and display only those components that are compatible with the selected widget's input or output.
• Ensure the interface remains responsive and intuitive under various user interactions.

Potential Use Cases

1. Streamlined Workflow Design: Reduces complexity and time taken to find and connect relevant components within a design environment.
2. Enhanced User Training: New users can quickly learn how to build and modify workflows by easily seeing and connecting compatible components.

to

[yamonkjd]

Even though currently, double-clicking on an available handle displays it in the side menu, many users are more familiar with drag-and-drop actions. It would be beneficial to add this action to the drag functionality as well.

When disconnecting an already connected component, the current method involves selecting the connected handle and releasing it into the air. It might be better to add a hover effect to these handles to make them easier to select and display a more visible button.

Adding a highlight to the line currently being edited when hovered over would also be a great feature. This would enhance the visibility and usability of the editing process.

[yamonkjd]

We primarily use N8N, but honestly, Langflow seems to have more sophisticated design elements, such as the component groups.