(Async) multiple input for nodes*

[jbudd]

That looks really good @Robert0, I think it's how node groups should work in the core.

I particularly like that you can pin junctions to the boundary line as the inputs/outputs, and give them a label.

In your original proposal you had the two inputs closer together, similar spacing as the multiple outputs of a switch node. Would that still be possible with this generation of the code?
Might there be difficulties on a cramped flow viewing the expanded contents, possibly overflowing the surrounding nodes?

What does the + button do?

How would you handle existing wires when grouping two nodes, for example these two functions

Do you automatically create inputs and outputs (junctions) on the group edges? How many?

I think the group looks a bit stark white when the enclosed nodes are not shown, should it have a distinctive background colour by default?

[TotallyInformation]

Now this is starting to look really good! and much more in keeping with the aesthetics of Node-RED.

@gregorius

1. storing in the flows.json

Yes, this would, I think be necessary for it to be adopted to core?

[Robert0]

@gregorius

Are the inputs on the left and outputs on the right - because you label one left junction node as "cheese out" - I assume that's a label not semantic meaning?

The left is considered input and right is the output. The default naming is set for which ever side you connect a wire first. I see that I accidently misnamed one of the inputs.

@gregorius

1. storing in the flows.json - how does that get stored there or are the junctions (which get stored in flows.json) automatically associated with the group (in the editor) based on proximity.

All data, custom data and visual data are stored under the group type in the flows.json. So based on this, during a node red start it will read these junctions and snap them to the edges.

@gregorius

here I've laid out for a wider groups - if they get collapsed (this doesn't take into consideration how this might be laid out with group ports):

Not sure what you mean, but collapsing a group and then expanding it, will bring it back to its original layout and size. It is true that there might be issues when you collapse a group, bring closer all external nodes and then when you expand to edit something, you overflow your group on top of other nodes. I am not yet sure what we can do regarding this, however its not a either this or that situation.

@gregorius

Here the layout depends on a "longish" group because other nodes are placed accordingly. In the top groups, I would probably be using the output ports of the groups instead of having extra junction nodes - something that alters the wiring when collapsed.

Good one, I think once collapsed, it will be very easy to read. However as I mentioned before. Expanding the group back to what it was comes at a price. I am not sure if I should make the external nodes transparent or not when viewing the full group.

Note that the expanding and collapsing node feature ONLY becomes available when you add atleast 1 in or output to any edge. Removing them makes your group a normal group.

So even with this plugin, you can decide to collapse them, expand them or have them show as a regular group.

[gregorius]

@Robert0

So based on this, during a node red start it will read these junctions and snap them to the edges.

Sweet

@Robert0

I am not yet sure what we can do regarding this, however its not a either this or that situation.

@Robert0

Not sure what you mean,

You covered what I meant, the changes that happen when collapsing are hard to predict and therefore difficult to counter. I layout according to the size of the group, if a group shrinks, then that layout breaks. But that's the price one pays for collapsibility!

I guess it is important to have consistent collapsibility - i.e. groups collapse in the same way all the time. That would allow a certain "flexibility" or "predictability" in the laying out of flows.

But, having said that, who knows what will happen once groups are collapsible. My concerns might well be non-concerns simply because we haven't tried it out yet.

@Robert0

So even with this plugin, you can decide to collapse them, expand them or have them show as a regular group.

That's probably a very good thing Is the plugin online? Have you thought of putting it up over at flows.nodered.org? Makes installing and testing simpler than clone a git repo ... I can understand if you don't want to do that since it requires an NPMjs account ....

[cymplecy]

Is there a link to try this out? I couldn't see one in the thread

[Robert0]

@jbudd

In your original proposal you had the two inputs closer together, similar spacing as the multiple outputs of a switch node. Would that still be possible with this generation of the code?

Yes, its a variable that is not easy to find but set in my html. I can make it editable by anyone or set them to a smaller default. This also applies to the following:

Group width

• Space between group border and most left/right node is increased when a edge junction with name is added.
• Collapsed group width has a minimum width if no input and output names are set.
• Collapsed group width has a minimum width to fit the name of the group if set.

@jbudd

Might there be difficulties on a cramped flow viewing the expanded contents, possibly overflowing the surrounding nodes?

Certainly, I have not yet found a good solution on how to avoid overflowing when you build your flow around your collapsed group. I can hide any other node, but I do not know if we want this.

@jbudd

What does the + button do?

If collapsed, it opens the group back to its original size with all nodes in their previous respected location.

@jbudd

How would you handle existing wires when grouping two nodes, for example these two functions

Good one, currently I ignore this. My plan was to force create the edge junctions for you and name the in/outputs. Currently you actually keep the wire connections and they dissapear when you collapse the group. Not ideal, but for now to avoid losing any connections.

@jbudd

Do you automatically create inputs and outputs (junctions) on the group edges? How many?

No, regular existing or new groups are exactly like any other group. You can keep your groups seperate from the plugin ones. Only when you drag from a external or internal node, a wire, to one of the edges; it will create the in/output. See GIF
This also applies to the + and - button, only visible if you have atleast 1 in/output.

@jbudd

I think the group looks a bit stark white when the enclosed nodes are not shown, should it have a distinctive background colour by default?

Maybe, currently I follow the colour coding and appearance of your original group (background, group border, label location, label colour).

[Robert0]

@gregorius

But, having said that, who knows what will happen once groups are collapsible. My concerns might well be non-concerns simply because we haven't tried it out yet.

Collapsing is currently hiding the node from the workplace. As mentioned before, if you were to uninstall the plugin, it will run normally. This is because the plugin works as a layer over the workplace. Its not fiddling with any runtime core of NR.

This applies to regular groups too. The group data in flows.json only store what item is in the group, what size the group is, location, colour, name, etc. This plugin has no more than storing new data for when the group is collapsed and a plugin that is displaying the collapsed group, besides some animations.

Currently I tested the nesting of groups, works great. No limits.
I just have issues with copying and pasting collapsed and extended groups with edge junctions. Visually they break, but after placing them and refreshing they show fine. So i need to fine tune that.

[TotallyInformation]

@Robert0

Yes, its a variable that is not easy to find but set in my html. I can make it editable by anyone or set them to a smaller default.

Can you expose that as an "environment" variable since groups already have this feature and a UI to edit them?

@Robert0

Certainly, I have not yet found a good solution on how to avoid overflowing when you build your flow around your collapsed group

Hmm, I don't think there is an easy answer to that.

My first thought was that if you've collapsed a group, later expanding it should expose it effectively as a pop-over, ideally a draggable dialog-type "box". Therefore side-stepping the issue completely.

[Robert0]

@TotallyInformation

Can you expose that as an "environment" variable since groups already have this feature and a UI to edit them?

I guess I can, however I dont know how much people will change this. Might be better if I decrease the value myself to a good minimum.

@TotallyInformation

later expanding it should expose it effectively as a pop-over, ideally a draggable dialog-type "box".

I had this before I had the localflow design. However that would remove itself from the design of the workplace. I noticed with that version that it would be useful to still drag in or out certain nodes. Using a popup, you can no longer drag things in and out.

With larger groups, you obviously want a complete workplace popup to zoom in, pan, drag palletes in, or other workspace specific things.

Example of how it looks currently:

[Robert0]

The current release is visually broken when nesting groups. However I can share the link with you as soon as I manage to fix the bugs.

[gregorius]

@Robert0

I guess I can, however I dont know how much people will change this.

If this is an editor-only feature, then env variables might be hard to access (since they live on the server).

Perhaps as alternative having something in the RED scope inside the browser, for example RED.events.DEBUG = true can be set in the browser console to change behaviour, i.e. debug the events being generated by the editor.

[Robert0]

I think accessing the environments is possible. I managed before with the folders plugin to store all data inside a global env. So it was stored inside the flows.json.

I will have a look though.

[jbudd]

It occurs to me that if you also allow connectors on the top and bottom edges of the group, it might make your plugin popular with those who wish Node-red looked more like a flow chart, with top down flow.

There is actually an extension (is it a plugin?) to do this. It's currently 4901 commits behind the NR master though so perhaps it doesn't work any more.

[Robert0]

Maybe, however for now it would clash with the groupname and input/output text names.

Give it a try if you want and let me know:
node-red-contrib-groupflow
Compare the pallete manager version to the version on the node-red page. Make sure you use the latest one.

Before we start adding more things, I need to make sure this build is okay and somewhat stable.

[gregorius]

Good stuff, just trying it out - two quick comments:

• I can't unname the output/input ports - if I delete the name, it comes back as "output ...":

It would probably be nicer if it were "onmouseover' just as with the switch node.

• Alignment isn't supported unfortunately

Can I turn off the "snap to grid" on moving the junction node along the group side?

Super that I can use existing junction nodes and just drag them over group edge and they become the output/input ports - great reuse and integration

EDIT:

sorry one more question:

a highlighted junction node is blue and an input port junction is also blue:

Would it be possible to make the input colour green-ish instead of blue-ish?

[gregorius]

Another observations, the output ports are moved to the bottom if I move the collapsed group:

Notice how the output ports bunch up in the corner when I move the un-collapsed group back into place...

[Robert0]

@gregorius

• I can't unname the output/input ports - if I delete the name, it comes back as "output ...":

Good one, I will take care of that.

@gregorius

• Alignment isn't supported unfortunately

Hmm, recently it was possible. However you were able to allign the edge junction on any pixel. I wanted to disallow that by turning the grid on. I guess I have to fix that now. Although when collapsed its different entirely.

@gregorius

Would it be possible to make the input colour green-ish instead of blue-ish?

Sure, i can also make it a custom value anyone can change.

@gregorius

Another observations, the output ports are moved to the bottom if I move the collapsed group:

Do you know at what exact moment this happens? Always or?

[gregorius]

@Robert0

Always or?

indeed, always. I did it several times to get the gif right and it was always the same steps:

1. place fullsize group
2. collapse group
3. move group
4. un-collapse group
5. move group

Very consistent fortunately!

@Robert0

Good one, I will take care of that

It would be really cool to have the labels appear only on mouse over when the group is expanded. This saves the space required for showing the label. When the group is collapsed, have the labels shown to make it clear what the inputs and outputs are.

The extra "buffer" in the group for the labels is kind of wasted when using default labels like "output 1" ...

Thanks for all the good work

[Robert0]

Great ideas, Im writing them down. I tried to replicate your setup, but I cant get this to occur. Could you maybe share a simplified flow, that has the bug, which I can copy to test and debug?

What version were you on?

[gregorius]

@Robert0

What version were you on?

I'm using v5.0.0 - FROM nodered/node-red:5.0.0 - docker

@Robert0

I cant get this to occur.

Not sure what but this is a flow for the gif:

[{"id":"ddea3dc15b732da0","type":"junction","z":"764acaa01ca567f6","x":938.8037697414181,"y":740,"wires":[[]],"info":"Output 1"},{"id":"d8fe5eb1b7494df5","type":"junction","z":"764acaa01ca567f6","x":938.8037697414181,"y":800,"wires":[[]],"info":"Output 2"},{"id":"04d990c5e7821927","type":"junction","z":"764acaa01ca567f6","x":938.8037697414181,"y":680,"wires":[[]],"info":"Output 3"},{"id":"89ccde350d365bf7","type":"junction","z":"764acaa01ca567f6","x":563.5704361537718,"y":740,"wires":[["2a3977bdbf605991"]],"info":"Input 1"},{"id":"9abb3327e375a8ce","type":"junction","z":"764acaa01ca567f6","x":563.5704361537718,"y":740,"wires":[["b10ab26246f9b8e4"]],"info":"Input 2"},{"id":"005f97b343d99604","type":"group","z":"764acaa01ca567f6","style":{"stroke":"#999999","stroke-opacity":"1","fill":"none","fill-opacity":"1","label":true,"label-position":"nw","color":"#767676","groupflow":{"version":5,"collapsed":false,"expanded":{"w":375.23333358764637,"h":215.0188679245282},"collapsedPosition":{"x":560.7402359584593,"y":591.0754561514225},"junctions":[{"id":"ddea3dc15b732da0","side":"right","ratio":0.5916988818676443,"offset":127.22642373139001,"direction":"output","name":"Output 1"},{"id":"d8fe5eb1b7494df5","side":"right","ratio":0.8707441609129235,"offset":187.22642373139,"direction":"output","name":"Output 2"},{"id":"04d990c5e7821927","side":"right","ratio":0.3126536028223651,"offset":67.22642373139001,"direction":"output","name":"Output 3"},{"id":"89ccde350d365bf7","side":"left","ratio":0.5916988818676443,"offset":127.22642373139001,"direction":"input","name":"Input 1"},{"id":"9abb3327e375a8ce","side":"left","ratio":0.5916988818676443,"offset":127.22642373139001,"direction":"input","name":"Input 2"}]}},"nodes":["2b532a5176d170ca","b10ab26246f9b8e4","2a3977bdbf605991"],"x":563.5704361537718,"y":612.77357626861,"w":375.23333358764637,"h":215.0188679245282},{"id":"2b532a5176d170ca","type":"function","z":"764acaa01ca567f6","g":"005f97b343d99604","name":"function 34","func":"\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":706.6037689784788,"y":653.77357626861,"wires":[["ddea3dc15b732da0"]]},{"id":"b10ab26246f9b8e4","type":"function","z":"764acaa01ca567f6","g":"005f97b343d99604","name":"function 35","func":"\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":746.2264104879127,"y":724.528293249742,"wires":[["d8fe5eb1b7494df5"]]},{"id":"2a3977bdbf605991","type":"switch","z":"764acaa01ca567f6","g":"005f97b343d99604","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"","vt":"str"}],"checkall":"true","repair":false,"outputs":1,"x":806.6037689784787,"y":786.7924441931382,"wires":[["04d990c5e7821927"]]}]

(the green inputs is something I did locally)