Rethinking Node-RED flow tabs: hierarchical sidebar + grouping

Core Development Feature Requests
,
1

When working with a large number of flows, the default tab system quickly becomes hard to manage and doesn't scale very well.

I experimented with a small client-side script to improve this, with the following features:

  • Moves flow tabs into a vertical panel above the left palette
  • Adds hierarchical grouping using a customizable separator
    • Example:
      Internal >> Bot mail 1.0
      becomes:
      • Group: Internal
      • Flow: Bot mail 1.0
  • Automatically extracts leading emojis and uses them as icons
  • Makes the left sidebar horizontally resizable
  • Makes the flows section vertically resizable
  • Keeps native Node-RED behaviors (add tab, menu, etc.)

image
image361Ă—622 12.9 KB

This is currently a proof of concept (pure DOM/CSS/JS injection), not integrated as a proper Node-RED plugin yet.

Apparently, a related (now closed) discussion already touched on this idea here:

If there's interest, I can package this into a clean module / plugin.

2

A few of us have certainly called for tab-groups in the past. That would be a great addition to Node-RED I believe. Your approach of using naming standards might be interesting though I think that personally I would prefer a full implementation. However, I wouldn't want perfection to get in the way of practical usefulness and I think I would certainly try to use your approach if made available. One of the most annoying parts of Node-RED is having to constantly scroll back-and-forth through the tabs.

I've taken the liberty of moving this thread into the feature requests category. Hope that's OK, move it back if you want but hopefully, Nick and other core devs will see this and comment.

3

Also see https://discourse.nodered.org/t/node-red-5-0-0-beta-6-available/100878/79