Enhance Visuals: 'Remove Slot' Vs 'Rename Slot' In Subgraphs

by Viktoria Ivanova 61 views

Is there an existing issue for this?

  • [x] I have searched the existing issues and checked the recent builds/commits

What problem are you experiencing?

When right-clicking on SubgraphInputNode or SubgraphOutputNode slots, the context menu shows "Remove Slot" and "Rename Slot" options that look nearly identical and are placed right next to each other. This similarity causes accidental slot deletions when users intend to rename.

Removing a slot is a destructive action that disconnects all connections and can cause significant workflow disruption, while renaming is a safe action. The visual similarity between these options leads to costly mistakes that require rebuilding connections.

When does this problem occur?

  • When managing inputs/outputs on subgraphs
  • During workflow organization and cleanup
  • When working quickly and right-clicking multiple slots to rename them
  • Especially problematic when working with complex subgraphs with many connections

How often do you encounter this problem?

Several times per week

How much does this problem affect your workflow?

Causes moderate inconvenience

Current workarounds

Currently, I have to be extremely careful when selecting from the context menu, slowing down my workflow. When I accidentally delete a slot instead of renaming it, I need to:

  • Recreate the slot
  • Reconnect all the connections that were lost
  • Ensure the slot configuration matches what was deleted

Ideas for solutions (Optional)

The "Remove Slot" option could be styled with red text (similar to how dangerous actions are shown in many UIs) to clearly distinguish it from the safe "Rename Slot" option. This would follow common UX patterns where destructive actions are visually distinct.

Alternatively:

  • Add a separator line between the two options
  • Use an icon (like a trash can) next to "Remove Slot"
  • Add a confirmation dialog for slot removal
  • Move "Remove Slot" to the bottom of the menu with a separator

Additional context

The current implementation in SubgraphIONodeBase.ts shows these menu options are created in the #getSlotMenuOptions method:

options.push(
  { content: 'Remove Slot', value: 'remove' },
  { content: 'Rename Slot', value: 'rename' }
)

The context menu system supports custom styling through the IContextMenuValue interface, which could potentially support color or style properties for individual menu items.