Node-RED v5 panels UX

Long time user of Node-RED, but somehow this is my first post here. I really appreciate NR and it's developers and I hope you don't mind some constructive criticism :grinning_face:

Yesterday I upgraded to v5 and other than a bit more memory usage (15-20mb) it seems to have gone fine. I appreciate the hard work people have put into it, but I want to address the new UX a bit here. Overall it definitely looks cleaner/more polished, but I feel some compromises have been made that maybe shouldn't have been made.

My main issue is with the panel selection bar being in the bottom right and non-movable. With all the menus and flow tabs on the top, it's really strange to suddenly have to go to the bottom right for something that's used pretty often.

I think I know why it was done this way (to avoid accidentally dragging the top right panel) and that's actually another issue I have. It's nice to be able to move panels around if needed, but having a permanent draggable title bar just takes up real estate and makes unintentional dragging a thing.

A solution might be to have a UI-editing-mode that adds the handlebars to drag the panels when needed. That way the normal UI is even more clean, you don't need constant drag event listeners and a panel selection bar at the top won't interfere with a handle bar.

I hope this post is useful feedback for the developers and that you keep up the good work you're doing :+1:

Hi, and welcome to the forum.

I'm having some issues adapting to the new layout myself, truth be told.

Now you've mentioned it. I can see that some of the panels could easily be compacted slightly as you suggest. However, some cannot such as the palette and Explorer panels.

For myself, I would, I think, having used the new layout for a while, have preferred there to still be a status bar at the bottom of the flows centre panel with all of the buttons for both the panel layouts and zoom, updates, etc separated by flexible spacers. With the sidebars extending down to the bottom of the viewport since they need the most vertical space.

I would also personally have preferred to have the icons draggable to change the sidebar panel layouts and not the panels themselves (though they could also still be draggable of course).


 โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
 โ”‚                                                                                 โ”‚
 โ”‚โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”‚โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”‚โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€
 โ”‚         โ”‚                                                               โ”‚       โ”‚
 โ”‚         โ”‚                                                               โ”‚       โ”‚
 โ”‚         โ”‚                                                               โ”‚       โ”‚
 โ”‚         โ”‚                                                               โ”‚       โ”‚
 โ”‚         โ”‚                                                               โ”‚       โ”‚
 โ”‚         โ”‚                                                               โ”‚       โ”‚
 โ”‚โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€                                                               โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€
 โ”‚         โ”‚                                                               โ”‚       โ”‚
 โ”‚         โ”‚                                                               โ”‚       โ”‚
 โ”‚         โ”‚                                                               โ”‚       โ”‚
 โ”‚         โ”‚                                                               โ”‚       โ”‚
 โ”‚         โ”‚                                                               โ”‚       โ”‚
 โ”‚         โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”‚โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”‚โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€       โ”‚
 โ”‚         โ”‚ left         โ”‚       Other controls           โ”‚       right   โ”‚       โ”‚
 โ”‚         โ”‚ sidebar      โ”‚                                โ”‚       sidebar โ”‚       โ”‚
 โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”‚โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”‚โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”‚โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”‚โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜

Thanks for welcoming me.

I feel like you might be reading more into my post than I may have intended.
Basically, I commented on 2 things:

  • Panel selection bar (=toggle for all panels) being fixed in the lower right corner
  • Panels having a drag handle(bar) all the time, instead of just when you want to rearrange the panels (which can make the first point easier to adjust)

I think you misinterpreted here. I only suggested to remove the titlebar (=drag handle) for panels when not in editing mode. That's not compacting the panels by much at all.
In earlier Node-RED versions the panels had no title bars at the top and the main reason for having them now is because you need a handle to drag them around.

My suggestion is to create a "UI editing mode" which you can toggle on/off, which would enable dragging panels (or icons/tabs/whatever) only when activated, leaving normal interaction with the UI to not need handle bars or drag event listeners.

I got what you were saying. I just didn't quite agree. :smiley:

Personally, I don't like the idea of having to go into a special mode to change the layout, this would break my train of thought.

It's OK to disagree sometimes :grinning_face:

My main thought about the UI editing mode is that most users will probably configure their user interface once or at most a couple of times. After it's set to their liking, they still have unnecessary drag bars and event listeners taking up space and resources.

But there's a reason the panel selection bar being fixed in the lower right corner is my first point. It's basically still a tabs bar like before (apparently making tabs "modern" is turning them into buttons :wink:), but it moved to the bottom. With all other important tabs/menus on the top, I find that a strange/inconsistent choice.

Clearly, I do not fall into the "most" category! :smiley: I regularly swap panels around depending on what I'm doing at the time.

I don't really like it either to be honest. Though, as I say, I'd be happy enough to have it as 1 "status" bar across the bottom between the 2 sidebar areas.

At the moment, it is already slightly lopsided since the left area is taller than the right.

Also, I mostly find the need to have the debug panel full height to see the details.

I believe in previous feedback, I expressed the preference that, if you are going to have lots of panels, we should be working towards a more full-featured arrangement such as you see in any IDE. Where panels can be tabbed, split, moved and even torn out to new windows. This is a very common and well used UX.

It is especially hard for those of us using multiple monitors to have to live with everything forced onto a single monitor.

However, I am sure that this suggested feature set is not especially easy to program. But it would allow everyone's needs to be met.

I used the word "probably" in that sentence to avoid seeming like I actually know how most users behave. But considering your gripe with the UI editing mode I suggested: what is wrong with just leaving the mode to ON in your case? :thinking:

What?! And not use one of the features that someone has carefully and loving crafted into Node-RED! I'm shocked you should suggest such a thing!

:joy: