Node groups/layers

[bergie]

For a better way of explaining the structure of a graph, we need to support something like node grouping/layering with some textual information added.

The groups could be possible to either hide completely ('show only the templating part of this graph'), or maybe showable as a single node, sort of as 'inline subgraphs'.

Originally opened as meemoo/dataflow#56, see that for older discussion. The NoFlo side of this ticket is noflo/noflo#62

UI mockups

Grouped nodes in a graph:

Group navigator card (which would be in noflo/noflo-ui):

[bergie]

Here is an example of layer controls in PhotoShop:

[alx359]

Technically, layers could be seen just as composite components, but that would be missing the point. I believe one needs to empower, especially FBP newcomers, with as many useful complementary views to a system as possible, to help fight "spagettification" and to enforce patterns/best practices not necessarily related to the execution flow.

Another complementary view to zoom in/out is the tree outline (the way chosen by Tersus to aid model navigation, btw).

Edit:

• Usability tip, for blending of layers and the tree outline. Whatever components we may see in a selected layer, they become bold (colored, etc) in the tree outline. And vice versa: whatever component we may choose in the tree outline, it makes the layer it resides selected.

[forresto]

Basic groups working in http://forresto.github.io/prototyping/react/

[bergie]

Great work @forresto !

I wonder however if the groups could be presented as more complex shapes than just rectangles. Might be interesting if the group would shape itself to "avoid" the non-grouped nodes that it is now overlapping:

[forresto]

I thought about that, but it would be pretty complex and the autolayout algo we're looking at does that first.