# Hide connections

**URL:** <https://discourse.nodered.org/t/hide-connections/49882>\
**Category:** Feature Requests\
**Created:** [18 August 2021 15:24 UTC](https://discourse.nodered.org/t/hide-connections/49882 "2021-08-18T15:24:39Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![braunku](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/braunku/32/27955_2.png) [@braunku](https://discourse.nodered.org/u/braunku)\
**Post date:** [18 August 2021 15:24 UTC](https://discourse.nodered.org/t/hide-connections/49882/1 "2021-08-18T15:24:40Z")

</div>

On very complicated flows, it would be nice to have the option to hide the node connections. Similar to the hide labels function. Hovering over a node would reveal the connections.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/a/7a64e2d523556a1c8150449eb943b81096a5a500.png)  
This is a simple example but with hundreds of connections, the link in / out is not practical.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [18 August 2021 21:55 UTC](https://discourse.nodered.org/t/hide-connections/49882/2 "2021-08-18T21:55:04Z")

</div>

As much as I can partly understand what you mean, there is a problem with what you suggest.

Node-red is a very visual _system_ and hiding connections would not help the bigger picture.

Slight suggestion:

Make subflows.

They can take a screen full of things and make them a lot tidier.

This is the original code:

 ![Screenshot from 2021-01-07 15-21-09](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/7/a7f9dfbc356fe429c1299e4264ef8a8f365ee6e9.png)

This is with a subflow

![Screenshot from 2021-01-07 15-21-39](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/5/354f31d48c2913d2d6478507078fd624045366a8.png)

Original code:

 ![Screenshot from 2021-01-07 15-21-47](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/6/8637c6ba021f2f2e6688a49a8a269df948a4a5bb.png)

Using a subflow.

![Screenshot from 2021-01-07 15-21-55](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/d/bd8a98117afa0d8e79da4a7ae658735e1187d258.png)

If you don't like/use subflows you can use the `link` node and put the code on other tabs.  
That is basically doing the same thing as subflows, but just on other tabs.

---

<div class="post-metadata">

**Author:** ![braunku](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/braunku/32/27955_2.png) [@braunku](https://discourse.nodered.org/u/braunku)\
**Post date:** [18 August 2021 23:31 UTC](https://discourse.nodered.org/t/hide-connections/49882/3 "2021-08-18T23:31:59Z")

</div>

Some more explanation is needed. The use-case that I am describing is visualizing a very complex state machine that is on another flow.

I am using about 50 function nodes with node.status to visualize the process in realtime. The wires are simply to trigger the global.get in the function nodes. Perhaps a better solution would be if the function node could self trigger.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/0/70b0d18c36a4d25f9ec1e9bffce49e8210412188.png)

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [18 August 2021 23:43 UTC](https://discourse.nodered.org/t/hide-connections/49882/4 "2021-08-18T23:43:41Z")

</div>

What if you used seperate Inject nodes, closer to the Functions that need to be triggered and also disable their label to take less space ?

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/6/a6f9806dce1e212bd165a25bd40d3ca48448e009.png)

PS. visualization of all those status with global.get ? isn't that what dashboards are used for ? hint 😉

Also you may find this [thread](https://discourse.nodered.org/t/list-of-all-global/49567) interesting .. it lists all globals and could make it easier to send it to the dashboard (if you choose that path)

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [19 August 2021 00:36 UTC](https://discourse.nodered.org/t/hide-connections/49882/5 "2021-08-19T00:36:35Z")

</div>

Ok,

So maybe the `link` node/s.

There is an `out` and `in`. They may help clear up the _jungle_ of connections.

and/or restructure the flow.

Rather than horizontal as you have it with the bigger nodes along the top:  
put them vertically and the _child_ nodes to their right.

---

<div class="post-metadata">

**Author:** ![braunku](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/braunku/32/27955_2.png) [@braunku](https://discourse.nodered.org/u/braunku)\
**Post date:** [19 August 2021 01:22 UTC](https://discourse.nodered.org/t/hide-connections/49882/6 "2021-08-19T01:22:14Z")

</div>

I am making extensive use of the dashboard nodes, however this was more a debugging excersize because the position of the nodes is in relation to the process, and I can observe the sequence of events easier than the way dashboard organizes it. I sometimes nest 5 or 6 variables in the node status messages, and it works really well. I guess I could use the ui-svg node but did not want to invest loads of time just for a debugging tool 🙂

Maybe I am not a typical user, I am using NR for industrial applications.

---

<div class="post-metadata">

**Author:** ![braunku](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/braunku/32/27955_2.png) [@braunku](https://discourse.nodered.org/u/braunku)\
**Post date:** [19 August 2021 01:26 UTC](https://discourse.nodered.org/t/hide-connections/49882/7 "2021-08-19T01:26:54Z")

</div>

Thanks for the suggestion. Yes, I tried link nodes but it quickly got tedious matching 100 link nodes, hence a simple toggle would have solved my needs the more I thought about it. The spaghetti wires are not a big deal, it just looks messy and is distracting when you're trying to concentrate on the node status messages to identify problems. Another option is rather than hide connections completely, it could adjust the transparency of the connections so they are barely visible. Maybe this is another feature request idea, but the option to make a flow that is designed this way (function nodes with node status) as a kind of dashboard (that is not editable of course) would be wicked.

Also, if there is the option to hide labels, it seems logical to also implement hiding connections for a similar reason (making complicated flows more visually appealing).

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [19 August 2021 02:42 UTC](https://discourse.nodered.org/t/hide-connections/49882/8 "2021-08-19T02:42:11Z")

</div>

> [@braunku](#):
>
> Another option is rather than hide connections completely, it could adjust the transparency of the connections so they are barely visible. Maybe this is another feature request idea

Hidden, colored or partially transparent is basically same field in this case, so I think it has been requested already.

> [@Multi-select wires and change their colors](https://discourse.nodered.org/t/multi-select-wires-and-change-their-colors/22183):
>
> Hi Guys, Node-RED is really a very impression project. I really enjoy using it. May I request a small feature for a future release (if if you have and it fits into your plan for the product)? Please add the ability to multi-select wires in a flow, and after selecting them (with the mouse of course), add a control-click key which pops up a color picker which permits us to select a color for a one or more wires. This feature would make it easier to read more complex flow diagrams where we ha…

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [19 August 2021 02:58 UTC](https://discourse.nodered.org/t/hide-connections/49882/9 "2021-08-19T02:58:03Z")

</div>

Yes, I hear you. Believe me.

I would still advocate trying putting the 3 big `function` nodes DOWN the screen rather than across.

That ~~will~~ could really make a huge difference on how it is seen.

On the link nodes and that:  
I've found these two tips handy.  
1 - Naming the link nodes. Even if not making their names visible, it helps.  
2 - Showing the names of the `link` nodes. That sometimes helps to make it easier to see.

You have a link out node and it is called something appropriate to what it is doing.

Then when you want to connect to it, you type in its name rather than having to scroll through a huge list of `link` nodes.

RE: hiding the names.... Sorry, I don't think I understand your reasoning there.

(Tangent - sorry)  
You can also _cheat_ and _shrink_ the size of all the nodes to a 1x1 size if you untick the option in their `appearance` window.

 ![Screenshot from 2021-08-19 12-56-37](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/f/2f1cdfdc69879bd2c00102ff274ee0c200dabdea.png)

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [19 August 2021 08:53 UTC](https://discourse.nodered.org/t/hide-connections/49882/10 "2021-08-19T08:53:34Z")

</div>

If you click once anywhere on the node connection wire it will change colour, which should help visualise the route which the flow is taking.

Also, if you select a node, you can then navigate up or down stream in the flow using the arrow keys on your keypad, again which helps visualise complicated flows.

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [19 August 2021 09:52 UTC](https://discourse.nodered.org/t/hide-connections/49882/11 "2021-08-19T09:52:18Z")

</div>

> I am using about 50 function nodes with node.status to visualize the process in realtime. The wires are simply to trigger the global.get in the function nodes. Perhaps a better solution would be if the function node could self trigger.

You seem to repeat a lot of nodes, which can be greatly simpiflied by using array of objects. If this was done just for visualization, this might not be the right tool for it.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [19 August 2021 10:19 UTC](https://discourse.nodered.org/t/hide-connections/49882/12 "2021-08-19T10:19:17Z")

</div>

You can change the colour and thickness of the wires using an editor css file as described at [https://discourse.nodered.org/t/editor-theme-css-file-example/2328](https://discourse.nodered.org/t/editor-theme-css-file-example/2328)

This snapshot has `.red-ui-flow-link-line { stroke: #8ab0d2; stroke-width: 1; } `  
 ![Untitled 1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/0/80df99bf986a7b808c97d307ff25da1ed0aa83f8.jpeg)

---

<div class="post-metadata">

**Author:** ![molesworth](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/molesworth/32/11748_2.png) [@molesworth](https://discourse.nodered.org/u/molesworth)\
**Post date:** [19 August 2021 10:57 UTC](https://discourse.nodered.org/t/hide-connections/49882/13 "2021-08-19T10:57:22Z")

</div>

Looking at the image of your flow, it's maybe just in need of reorganisation to see connections more clearly. My first impression is that you have five main functions, each feeding to several sub-functions (plus a few others connected to the inject node). As @Trying_to_learn said, it might be tidier to arrange these vertically and then arrange the second level functions to the right, again in vertical groups, top to bottom.

My approach, and which is something I've done in a couple of flows, would be to have a link-out from the inject node and then put each top level and sub-function group on a separate tab, fed by a link-in. It means switching tabs to work on each part, but I find that's also helpful to keep sections of logic separated and avoid confusion.

Even with your current layout, just moving the function nodes around would let you tidy it up and remove 90% of the crossing wires.

---

<div class="post-metadata">

**Author:** ![braunku](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/braunku/32/27955_2.png) [@braunku](https://discourse.nodered.org/u/braunku)\
**Post date:** [19 August 2021 14:04 UTC](https://discourse.nodered.org/t/hide-connections/49882/14 "2021-08-19T14:04:45Z")

</div>

Thanks, everyone for the suggestions.

---

<div class="post-metadata">

**Author:** ![drmibell](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/drmibell/32/8424_2.png) [@drmibell](https://discourse.nodered.org/u/drmibell)\
**Post date:** [19 August 2021 18:13 UTC](https://discourse.nodered.org/t/hide-connections/49882/15 "2021-08-19T18:13:49Z")

</div>

> [@braunku](#):
>
> a better solution would be if the function node could self trigger

Challenge accepted. Please do not take this as encouragement to "use the editor as a dashboard." (Search that phrase in the forum.)

```auto
[{"id":"3b0e731e.8ffc0c","type":"inject","z":"3b690bae.7e1914","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"2","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":250,"y":2100,"wires":[["8859d772.9b9c58"]]},{"id":"8859d772.9b9c58","type":"change","z":"3b690bae.7e1914","name":"","rules":[{"t":"set","p":"test","pt":"global","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":420,"y":2100,"wires":[["e6c2b82b.deafc"]]},{"id":"e6c2b82b.deafc","type":"debug","z":"3b690bae.7e1914","name":"","active":true,"tosidebar":true,"console":false,"tostatus":true,"complete":"payload","targetType":"msg","statusVal":"payload","statusType":"auto","x":590,"y":2100,"wires":[]},{"id":"3b0019ff.9337ae","type":"function","z":"3b690bae.7e1914","name":"","func":"\nreturn msg;","outputs":1,"noerr":0,"initialize":"// Code added here will be run once\n// whenever the node is deployed.\nsetInterval(showStatus,1000)\n\nfunction showStatus() {\n node.status({text:global.get('test')})\n}","finalize":"","x":420,"y":2160,"wires":[[]]}]

```

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [19 August 2021 19:21 UTC](https://discourse.nodered.org/t/hide-connections/49882/16 "2021-08-19T19:21:57Z")

</div>

> [@drmibell](#):
>
> Challenge accepted.

Nice! I was working on similar idea (timer in On Start), but used timeouts instead... bad choice, didn't seem to work and I gave up 😊

---

<div class="post-metadata">

**Author:** ![mrdvt92](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mrdvt92/32/33122_2.png) [@mrdvt92](https://discourse.nodered.org/u/mrdvt92)\
**Post date:** [23 August 2021 11:39 UTC](https://discourse.nodered.org/t/hide-connections/49882/17 "2021-08-23T11:39:52Z")

</div>

What I do is smartly place "null" functions to consolidate the wires at different levels. Here's one of my logic flows which reduces the four wires visually to just two.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/f/efcd708a6069a5ac46531207fcfd83014299c8c1.png)

Instead of a null function. You can also use a change node with zero changes.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/c/8cfe0a5f739548f50d4bf2c79dfb976f61dbeadc.png)

---

<div class="post-metadata">

**Author:** ![MarkWalsh](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/markwalsh/32/46664_2.png) [@MarkWalsh](https://discourse.nodered.org/u/MarkWalsh)\
**Post date:** [23 August 2021 12:37 UTC](https://discourse.nodered.org/t/hide-connections/49882/18 "2021-08-23T12:37:38Z")

</div>

🎼 “Who let the dogs stdout?”

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [22 October 2021 12:37 UTC](https://discourse.nodered.org/t/hide-connections/49882/19 "2021-10-22T12:37:54Z")

</div>

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