# Special indication on nodes with description

**URL:** <https://discourse.nodered.org/t/special-indication-on-nodes-with-description/78646>\
**Category:** Feature Requests\
**Tags:** feature-request\
**Created:** [23 May 2023 16:03 UTC](https://discourse.nodered.org/t/special-indication-on-nodes-with-description/78646 "2023-05-23T16:03:23Z")\
**Posts on this page:** 20\
**Page:** 5

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [26 January 2024 22:01 UTC](https://discourse.nodered.org/t/special-indication-on-nodes-with-description/78646/83 "2024-01-26T22:01:01Z")

</div>

May as well throw my hat in:

![chrome_CLiKAZHXCW](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/6/f6292cb529256a3d4b83d5511c8d45216ba0da3b.gif)

- adds a `g` element with the rounded `rect` and `text` elements
- adds CSS for the `transition`ing `stroke`/`fill`/`y` position and cursor.

Thats it 😉

> **SVG + CSS inside CLICK TO EXPAND**
>
> ```auto
> <svg viewBox="-50 -50 380 380">
> <!-- a typical node-->
> <g class="red-ui-flow-node red-ui-flow-node-group" id="fb202240615b9c7f" transform="translate(20,10)">
> <!-- the below g is added to the top of the node group -->
> <g class="tip" fill="lightyellow" >
> <rect width="30" height="20" x="95" y="-5" rx="2" />
> <text class="" x="100" y="4">docs</text>
> </g>
> <!-- everything else is the existing node content -->
> <rect class="red-ui-flow-node " rx="5" ry="5" fill="#fdd0a2" width="140" height="30"></rect>
> <g class="red-ui-flow-port-input" transform="translate(-5,10)">
> <rect class="red-ui-flow-port" rx="3" ry="3" width="10" height="10"></rect>
> </g>
> <g class="red-ui-flow-port-output" transform="translate(135,10)">
> <rect rx="3" ry="3" width="10" height="10" class="red-ui-flow-port"></rect>
> </g>
> </g>
> </svg>
> 
> <style>
> svg g.tip {
> transition: transform 0.3s ease, fill-opacity 0.3s ease, stroke-opacity 0.3s ease;
> fill-opacity: 0.3;
> stroke-opacity: 0.3;
> cursor: pointer;
> }
>     
> svg g.tip text {
> font-style="normal";
> font-size: 8px;
> font-family: sans-serif;
> stroke-width: 0.0;
> fill: #000;
> color: #000;
> }
>     
> svg .tip rect {
> fill: lightyellow;
> stroke-width: 0.5;
> stroke: #000;
> }
>     
> svg:hover g.tip:hover {
> transform: translatey(-6px);
> fill-opacity: 1;
> stroke-opacity: 1;
> }
> </style>
> 
> ```

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [26 January 2024 22:02 UTC](https://discourse.nodered.org/t/special-indication-on-nodes-with-description/78646/84 "2024-01-26T22:02:51Z")

</div>

> [@Steve-Mcl](#):
>
> May as well throw my hat in:

Someone has watched the Limitless film recently 😃

(I like it)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [26 January 2024 22:11 UTC](https://discourse.nodered.org/t/special-indication-on-nodes-with-description/78646/85 "2024-01-26T22:11:18Z")

</div>

I totally understand the desire not to pollute the workspace but lets not forget: Rarely (be honest) do folks add docs to their nodes. If they do, it is typically the function node or a subflow.

So long as it is subtle (low opacity, can reveal on hover etc) I think we can make this work?

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [26 January 2024 23:41 UTC](https://discourse.nodered.org/t/special-indication-on-nodes-with-description/78646/86 "2024-01-26T23:41:09Z")

</div>

> [@Steve-Mcl](#):
>
> Rarely (be honest) do folks add docs to their nodes

Speak for yourself!! 😀

---

<div class="post-metadata">

**Author:** ![rko](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rko/32/45807_2.png) [@rko](https://discourse.nodered.org/u/rko)\
**Post date:** [26 January 2024 23:57 UTC](https://discourse.nodered.org/t/special-indication-on-nodes-with-description/78646/87 "2024-01-26T23:57:23Z")

</div>

Once the search allows to filter nodes with description, I can give you numbers 🙃

---

<div class="post-metadata">

**Author:** ![GogoVega](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gogovega/32/71313_2.png) [@GogoVega](https://discourse.nodered.org/u/GogoVega)\
**Post date:** [27 January 2024 08:30 UTC](https://discourse.nodered.org/t/special-indication-on-nodes-with-description/78646/88 "2024-01-27T08:30:04Z")

</div>

Marcus, Julian and Me are good students (boys) 😇 - all three of us added descriptions.  
It would be interesting to see the numbers 🤪

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [27 January 2024 11:45 UTC](https://discourse.nodered.org/t/special-indication-on-nodes-with-description/78646/89 "2024-01-27T11:45:12Z")

</div>

I abused my previous experiment to count the number of nodes (admittedly only in my test instance) having descriptions. 179 though a couple of those were just tests. That's out of 1279 nodes in total.

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [27 January 2024 13:47 UTC](https://discourse.nodered.org/t/special-indication-on-nodes-with-description/78646/90 "2024-01-27T13:47:04Z")

</div>

So the solution I was talking about is [over here](https://cdn.flowhub.org/?t=0&fhid=864df4104ed3c1e1#group/3240a48b35078f5f) (can be tried out there), it just places a yellow to dot on the node.

![Screen Shot 2024-01-27 at 14.44.27](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/5/55ffb801c9ffdacad6a5a093c980e051edf7d55b.png)

the [code for the node](https://cdn.flowhub.org/?t=0&fhid=864df4104ed3c1e1#node/9bd2d5655a2a94e5/edit) shows how it's done - adding a new svg circle on the node.

Export the nodes and install where needed.

---

<div class="post-metadata">

**Author:** ![kuema](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kuema/32/6542_2.png) [@kuema](https://discourse.nodered.org/u/kuema)\
**Post date:** [27 January 2024 14:32 UTC](https://discourse.nodered.org/t/special-indication-on-nodes-with-description/78646/91 "2024-01-27T14:32:03Z")

</div>

> [@rko](#):
>
> Once the search allows to filter nodes with description, I can give you numbers 🙃

Or just read the flows.json using a JS script or function node, and count all nodes with a description property. 🙂

One may even go as far as generating a flow documentation from that. Did that once for a larger project to get a an overview of specific node types and their docs. 🧐 😅

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [27 January 2024 16:03 UTC](https://discourse.nodered.org/t/special-indication-on-nodes-with-description/78646/92 "2024-01-27T16:03:00Z")

</div>

> [@gregorius](#):
>
> shows how it's done

Can be simplified rather a lot if you want to:

```auto
if ( n.info ) {
    $(`#${n.id}`).append('<g class="red-ui-flow-node-jkinfo" transform="translate(5,5)"><circle cx="5" cy="5" r="5"></circle></g>')
    // NB: You have to re-render the container (ref: https://stackoverflow.com/a/36305466/1309986):
    $(`#${n.id}`).html($(`#${n.id}`).html())
}

```

(Obviously amend to different appearances as desired)

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [27 January 2024 16:29 UTC](https://discourse.nodered.org/t/special-indication-on-nodes-with-description/78646/93 "2024-01-27T16:29:12Z")

</div>

> [@TotallyInformation](#):
>
> `$(`#${n.id}`).html($(`#${n.id}`).html())`

Thanks for that, the line that escaped me was the re-rendering thing - SVG content needs re-rendering, normal HTML is updated automagically. Hence I used the createElementNS since that updates the SVG automagically.

In the browser, everything looks like XML.

Btw `if (n.info)...` has the disadvantage that a `" "` info is true, hence my trim() thing.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [27 January 2024 19:36 UTC](https://discourse.nodered.org/t/special-indication-on-nodes-with-description/78646/94 "2024-01-27T19:36:39Z")

</div>

> [@gregorius](#):
>
> Btw `if (n.info)...` has the disadvantage that a `" "` info is true, hence my trim() thing.

I forgot to include that.

```auto
if (n.info && n.info.trim() ) ...

```

I think that should do it.

---

<div class="post-metadata">

**Author:** ![Martin12](https://avatars.discourse-cdn.com/v4/letter/m/e47c2d/32.png) [@Martin12](https://discourse.nodered.org/u/Martin12)\
**Post date:** [9 August 2024 07:11 UTC](https://discourse.nodered.org/t/special-indication-on-nodes-with-description/78646/95 "2024-08-09T07:11:54Z")

</div>

I really like this approach, but it looks like the topic has fallen asleep. In my opinion, if someone really takes the time to document the functionality of a node so that they don't have to familiarize themselves with it again (years?) later, I think it's definitely worth some space in the workspace for an additional icon to ensure that this information is read again later.

How (hidden) the documentation to a node is implemented right now, I will keep doing my workaround and simply add an additional 'comment'-node right above the node that I want to leave a comment. This is really polluting the workspace but otherwise I am pretty sure that I won't find my comments later again 😅

---

<div class="post-metadata">

**Author:** ![GogoVega](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gogovega/32/71313_2.png) [@GogoVega](https://discourse.nodered.org/u/GogoVega)\
**Post date:** [4 November 2024 21:51 UTC](https://discourse.nodered.org/t/special-indication-on-nodes-with-description/78646/96 "2024-11-04T21:51:11Z")

</div>

I know I'm straying from the original request but maybe a new filter would solve the problem. Something like `has:info`.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [4 November 2024 21:58 UTC](https://discourse.nodered.org/t/special-indication-on-nodes-with-description/78646/97 "2024-11-04T21:58:36Z")

</div>

That's not a bad idea but doesn't really resolve the original request which I agree with. Some (possibly optional) method of knowing that a node/group/tab has some additional data would be a good thing I think.

---

<div class="post-metadata">

**Author:** ![GogoVega](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gogovega/32/71313_2.png) [@GogoVega](https://discourse.nodered.org/u/GogoVega)\
**Post date:** [5 November 2024 08:56 UTC](https://discourse.nodered.org/t/special-indication-on-nodes-with-description/78646/98 "2024-11-05T08:56:49Z")

</div>

Otherwise, play with the label style so as not to modify the node. Whether it's bold, underline, add a `(i)` as a superscript...

Of course, the filter is an all-encompassing solution.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [5 November 2024 09:30 UTC](https://discourse.nodered.org/t/special-indication-on-nodes-with-description/78646/99 "2024-11-05T09:30:19Z")

</div>

I'd be happy if there were an easy(ish) way to identify whether something had notes using a CSS Selector - that would be good enough for me since, as you say, you could then put your own CSS in place to show things however you want.

---

<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:** [5 November 2024 09:33 UTC](https://discourse.nodered.org/t/special-indication-on-nodes-with-description/78646/100 "2024-11-05T09:33:32Z")

</div>

(Wow, long read)

No, I haven't read them all.

What I do if a node has comments is put a ` *` at the end of it's name.  
(That's a space then the `*`)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [5 November 2024 09:56 UTC](https://discourse.nodered.org/t/special-indication-on-nodes-with-description/78646/101 "2024-11-05T09:56:11Z")

</div>

I don't think styling the text or adding an asterisk will inform or encourage users to go read the helpful info we are trying to point them to.

IMO, Only something visual and interactive (clickable) will encourage users to both know and goto the extra info. Something like:

> [@Steve-Mcl](#):
>
> ![chrome_CLiKAZHXCW](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/6/f6292cb529256a3d4b83d5511c8d45216ba0da3b.gif)

---

<div class="post-metadata">

**Author:** ![GogoVega](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gogovega/32/71313_2.png) [@GogoVega](https://discourse.nodered.org/u/GogoVega)\
**Post date:** [5 November 2024 10:25 UTC](https://discourse.nodered.org/t/special-indication-on-nodes-with-description/78646/102 "2024-11-05T10:25:40Z")

</div>

Are we going for a badge or Steve's element?

For the badge, it would be either an "i" icon or a "file" icon representation.

[Previous page](https://discourse.nodered.org/t/special-indication-on-nodes-with-description/78646.md?page=4)

[Next page](https://discourse.nodered.org/t/special-indication-on-nodes-with-description/78646.md?page=6)