Usability proposals : connected connectors

General
1

Hi everybody!

Lastly I had serious trouble figuring out why things didn't work as I thought they had to.

I had something like this in my flow:

image
image1178×504 30.5 KB

Do you SEE the difference? I don't.

What is wrong? The upper change change node actually sits on top of the connection between inject & debug. There is only one wire connecting input & debug.
The lower change node is really properly connected. There are two wires.

Proposal: A node connector on the left or right side of a node should / may indicate whether it is connected or not. The colour of the little rounded grey square could do that.

A similar thing hits me often when I use link in / link out nodes. At time I copy a node, all connections are copied. I have to click it to see some details, I have to edit it to see all the details.

Here I would like to see if a link out node ist actually connected to a link in and vice versa. Should be easy w/ colour as above. And if: How many outgoing /incoming connections are there? This needs a little text.

One more thing: I use links a lot to visually declutter how a flow is shown. I give in / out link nodes proper names. I have MANY of them.

When editing link node properties the order they are listed seem "oldest first". I'd really like to have it sorted alphabetically.

What do you think?

Cheers, Uwe

PS Here the upper change node got moved slightly …

image
image1178×504 33.3 KB

1 Like
2

have you tried nr-lint?

3

Showing not connected links would be definitely nice.

I installed linter. What do I have to do to enable this particular feature? I don't find it in the rules. So far, my linter does not complain.

image
image1122×558 38.7 KB

I still think the original proposal would help during flow development: Avoid errors by easily spotting them.

  • Provide the number of incoming / outgoing links to/from a link node
  • Provide a visual feedback when a connection of a node is actually wired
  • Sort the list of linked from / linked to link nodes alphabetically

Cheers, Uwe

4

Hi Uwe,

We have an open issue for this - Lack of Visual Differentiation Between Connected and Wire-Overlapping Nodes in the Editor · Issue #5092 · node-red/node-red · GitHub

I made a start on it at the time, but it need some design inspiration for how to visually distinguish the ports and then progress stalled.

5

I am not an UI expert.
No yelling color. Not a breaking change. A hint. But easily discernible.

An unconnected node gets a dark border and a white center. No need to change the pallette.

connectors
connectors1456×706 89.5 KB

Cheers, Uwe

6

... and something like this, perhaps

link
link1114×518 30.4 KB