Improving connection visibility

As my workflows become more complex, the connections have become more difficult to follow. Out-in virtual connections have helped in some places, but they can add more clutter.
I have seen some threads on similar topics and maybe vertical layout would help, but not entirely sure.
Just wanted to throw these out there to see if there is room for improvement:

  1. Ability to colour the connections so that connections from the same node are easier to follow (looks like there have been similar suggestions in the past).
  2. Ability to hide all connections and just hover over a node port to view where those connections go to.
  3. Be able to reverse the ports on a node (left side of node=output, right side of node=input) as it can help avoid running long, stringy connections to the other end of the node.

I haven't searched for the suggestions you mentioned, but here is one I haven't seen before that might help. You may have noticed that if you click on the input or output port of a node, the port is highlighted, and if you move the mouse, all the wires attached to the port are also highlighted and can be moved or deleted together. This lets you visualize the wires, at the risk of accidentally deleting them. If this behaviour could be changed so that shift-clicking on the port would highlight all the connected wires as long as the mouse is held down, I think that would give you what you want, although not permanently.

Of course a quick ctrl-z will undeterred if your finger slips

Hi @notnice,

thanks for the suggestions. We're always open to feedback and ideas to help improve the Node-RED user experience.

You are right there have been suggestions around colouring the wires in the past. The technical objection to that idea still stands - wires don't have properties in the way they are represented in the flow file. To give them colours would require a fundamental change to the flow file format, so not something we'd consider lightly.

Likewise the idea around flipping the direction of some nodes. The main concern there is you then have to work harder to figure out which direction any particular node is oriented - you can't just 'read' it from left to right. There has been discussion around adding arrow heads - and there is some code sat in a branch that does do that - but there are no further plans to allow nodes to be flipped around.

I think there is value in exploring how wires could be highlighted to help see an end-to-end flow. Currently if you shift-click a node it selects all of the connected nodes - but the wires don't get highlighted. Changing that to also highlight any wires between selected nodes might be enough to help here.


Essentially, you would be highlighting all the wires in the flow (in the narrow sense of "flow" as a connected set of nodes). This certainly would help if a tab contained many separate flows. I was suggesting a much narrower view, just visualizing all the wires connected to a particular port as an aid to tracing the local flow of messages. I may not have understood exactly what @notnice was trying to accomplish, but I think this feature could be useful.

This explanation for wire simplification will have to be picture heavy.

I've started using the 'inception' (movie reference) subflow idea to manage complicated wires.

So lets start at the top of the system dashboard tab.

Ignore the pass word hash check stuff Just Look at the wires and how every subflow is talking to each other.

Now we are going into the ethernet subflow. Here Ive used it to contain 2 subflows that need to talk to each other and the subflow above we just looked at.

Here we are in the ethernet DHCP section the bottom of this 'inception' style organization.
notice the outputs. Ive used them to talk organize the flow strings.

This method takes way more time to setup upfront. But when you have to come back to edit stuff Its EZ-er. Try not to build monolithic all in one flow tab. Think about making subflows independent as possible.

Lastly - If I can afford the CPU and ram I like to break up as many things as I can when building. Optimization can come later at the end when you have a finalized version your ready to use. Spread it out and keep stuff simple in as many steps as your fingers can afford. Take the time to write yourself good comments you can understand later when you come back.

Good luck.....hope this helps someone.

Hi all - appreciate the speedy responses and suggestions with various approaches. :slightly_smiling_face: :+1:

  • Got the technical challenge about colouring connections.
  • As pointed out shift-clicking a node and having ability to show connections wouldn't help as it shows all subordinate connected nodes too i.e. too far and wide.
  • Clicking the port and moving the mouse gives the desired effect, but also makes me nervous in spite off Ctrl-Z :wink:
    ** If the above could be done to highlight/unhighlight the connections by say using Ctrl-click as a toggle (so when toggled on you can move your mouse away with connection highlighted, but not move the connections) then that would be really good ** :+1:
  • Get the comment about using sub-flows and that might help. Not sure I want it back-track and redo mine now because as meeki007 says its probably better done from the start, not the end. I'd also have to think about how easy it is to relate linked functions on one flow to its subflow when troubleshooting.

Just for ref, I'm using the flow to provide a simplified wireless controller dashboard. Piccies of the dashboard and flow attached. There is for example a function to clear down all the displayed data and charts manually, or when selecting another domain. That has to connect to a lot of other nodes hence where my questions arose about better ability to trace connections.

I could potentially consolidate some function and http request nodes, but the APIs use different URIs and that makes it difficult for people to follow.

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