[preview] Grouping Nodes

Core Development
1

I've just merged the initial PR to add the ability to group nodes in the editor.

This is similar in concept to how you can group objects in applications like PowerPoint or Keynote. Once grouped, the nodes can be moved as one around the workspace. The group can also be given some basic styling options for its border and background as well as whether to display a label for the group.

Here's what it looks like in action:

groups-one
groups-one913Ă—535 701 KB

And yes, you can nest the groups:

groups-two
groups-two919Ă—608 1.15 MB

The primary use case is to help visually organise your flows. We had some feedback that users wanted to be able to take screenshots of their flows and didn't want to have to spend time annotating them after-the-fact to label the different parts. The Comment node goes someway to adding annotations, but it lacks the ability to clearly show what nodes it is associated with. We hope the new grouping feature will address that.

At the moment, the groups have absolutely no affect on the runtime side of things. But we will be adding the ability to define additional meta-data against each group. That meta-data could be used in the runtime to influence how things are run - but the precise detail of that is for another day.

It has taken me quite a while to get this feature into a good working state At this point I've crossed off all of the major todo items and squashed all the bugs that needed to squashing before I could share it more widely.

This is now in the dev branch on GitHub if you're following along at home and want to have a play. It will eventually be released as part of 1.1.0 - although I don't have a timescale to share on that yet.

Quick Guide

  • Select some nodes. Hit Ctrl-Shift-G (Or select group->group selection menu item) to group them
  • Click on a group border or a node in the group to select it.
  • Double-click on a node in a group to go 'into' the group - its border changes to a dashed line. At this point you can then edit nodes in the group and move them around.
  • Ctrl-Shift-U ungroups (Or select group->ungroup selection menu option)
  • You can merge groups into one - group->merge selection menu option
  • You can remove an item from a group - group->remove from group menu option
  • Double-click on the group border to edit its properties.
  • You can quickly copy the style of a group (fill/stroke/label) by selecting it in the workspace and then hitting Ctrl-Shift-C. Then select the group(s) to apply the style to and hit Ctrl-Shift-V. (There's a bit more work to do around setting default styles and making them reusable)
  • You can drag a node straight into a group - the group border turns dashed whilst you are dragging over it. NB: you can only drag one node in at a time currently...a bit more work needed here.
18 Likes
2

Grouping and colours and titles oh my.

Looks very good Nick, great work as usual.

Much more than expected (always a good thing).

If I wished to try this out, how would I install? Is there some handy instructions on how to pull, compile? Etc?

Cheers.

3

Huzzah! This is a VERY nice addition. My OCD is twitching at the very thought :heart_eyes:

4

This looks awesome (various ideas pop into mind), can I run NR on the same machine with a different port using the dev branch or would that conflict with the running version ? Trying to get a docker container running, but I guess i need to build an image for the dev version ?

I have it running.

I freaking love it. Really nice to drag and drop the groups around without having to select the nodes (and forgetting a few, sounds familiar?) Some idea/suggestions/explorations;

  • Double click anywhere in the within the group to get into the "node edit" mode
  • Stroke width: 1px (or custom by user?)
  • Border radius 5px/8px (or custom by user?)
  • Label: Font size same as node-status ? (10px, or custom by user/limited)
  • Label: perhaps a little padding for breathing ? (not sure)

The first item would be the most important for me, currently it is somewhat counter-intuitive. The node-connections can still be selected within the group, while the nodes cannot. The group should behave like a single object (?). This could make drag/drop also more direct/intuitive (as it is currently done via the border of the group)

5

Mine too. Feels a bit like a bunny's nose...

I haven't had a chance to try it, so can I ask:
Can groups be copied (cut/paste) to make duplicates?
Must a group be entirely on a single tab?
Can comment nodes and multiple (unconnected) flows be included in a group?
How is the group represented in the flows.json file, and will the file be backward compatible with older versions of NR?

6

...as long as you retain your sense of smell... :wink:

cut/paste - yes
single tab - yes they must be on a single tab - it's a drawing feature
odd nodes - yes any nodes can be inside the group
representation - it is represented as a new type of node - so old versions of Node-RED will just have a missing / unknown node type. But Nick has a cunning plan to help mitigate this. (under test)

4 Likes
7

image
image2160Ă—1568 278 KB

20 Likes
8

That wasn’t quite the test I had in mind but. Very impressive

9

Interestingly.... in creating that I have found

  • 1 x bug
  • 3 x usability things to improve

So a good test all round.

4 Likes
10

OK, so we now know what you are doing in your isolation! :sunglasses:

5 Likes
11

That would be even more awesome if it was a bunch of connected nodes that output a mario like game to dashboard.

:thinking:

12

It won't be long before NR has all the over-the-top features we've been demanding for years.

1 Like
13

Collapsing a group into a single block would also be nice :grimacing:

8 Likes
14

that looks like a great way to readably document / comment the logic inside flows. I like the nesting idea!

I also noticed if your flows include lots of steps and repetitive things, you may tend to use sub-flows a lot and you may want to nest them.

Being able to view subflows on an expand/collapsible hierarchical way on the left menu would also be a great addition.

15

There are no plans for that. This isn't a subflow alternative. A group doesn't have any restrictions on the number of links "entering" it and if collapse, would potentially require multiple inputs in its collapsed form.... which we dont do.

1 Like
16

I love it.. Been wishing for this for long. Thanks a lot.

17

This is something I have been hoping for, for ever ! , I know you have said "It will eventually be released as part of 1.1.0 - although I don't have a timescale to share on that yet." and obviously I respect that, I don't want to mess with dev branches, so I am hoping you will release 1.1.0 or just this update soon whilst I am on corona furlough to give me something useful to do, pls.

18

There is more than just that (probably) going into 1.1 - so hopefully we will be out of lockdown before then. If not things will be worse than we thought.

19

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.