# 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:** 6

<div class="post-metadata">

### Author: ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)
#### Post date: [5 November 2024 10:31 UTC](https://discourse.nodered.org/t/special-indication-on-nodes-with-description/78646/103 "2024-11-05T10:31:57Z")

</div>

> [@GogoVega](#):
>
> Are we going for a badge or Steve's element?

At this stage - neither. We haven't yet got a proposal that I think gets the design right. Given this is potentially something shown on lots of nodes, it needs to get the balance right between indicating something without causing move visual noise.

---

<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: [5 November 2024 10:35 UTC](https://discourse.nodered.org/t/special-indication-on-nodes-with-description/78646/104 "2024-11-05T10:35:51Z")

</div>

> [@Steve-Mcl](#):
>
> Only something visual and interactive (clickable) will encourage

Have you posted the code behind that yet? I had a quick look in the thread but didn't find anything ....

---

<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:49 UTC](https://discourse.nodered.org/t/special-indication-on-nodes-with-description/78646/105 "2024-11-05T10:49:45Z")

</div>

Change the background color of the node to a Daltons style.  
Change the shape of the node  
Add the badge/icon inside the node

I have no other suggestion 😕

---

<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: [5 November 2024 12:13 UTC](https://discourse.nodered.org/t/special-indication-on-nodes-with-description/78646/106 "2024-11-05T12:13:35Z")

</div>

**Nomenclature**  
Within a node config we have an icon and "Description" not "Docs"  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/b/2ba2b7b5c1807fa5f4cdb12ba99bf4f266c378a4.png)

**Appearance**  
It surely makes sense to use the same icon rather than text or coloured dots in the workspace.  
Text requires translation.

@Steve-Mcl's toast presentation is much less disruptive than extra text or dots around the node, so maybe combine that with the icon? (If it was a CSS class we could customise this).

Not sure if the blue dot/red triangle should overlay the indicator. There is not enough space for all three on a node with the label hidden.

**Interaction**  
Steve shows the "click me" cursor on mouse-over, but is it actually going to be clickable?  
It is outside of the rectangular limits of the node.  
Must be clickable.  
There may be wires running close to the node.  
The popup toast should overlay the wire and clicking this area should not select the wire.

It makes much more sense that clicking the indicator opens the node config on the Description tab rather than showing the contents in the info pane.  
It should be the "preview" view because it may contain markup and mermaids(?)  
The info pane should only ever show the node's built-in help IMHO.

---

<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 12:31 UTC](https://discourse.nodered.org/t/special-indication-on-nodes-with-description/78646/107 "2024-11-05T12:31:40Z")

</div>

> [@jbudd](#):
>
> Within a node config we have an icon and "Description" not "Docs"

Docs = how to use the node (usually written by the node author)  
Description = what the node does

I am for the "Description" mention except for the Subflow which can contain both.

The "file" icon somewhere in the node would be for me the most discreet option (see the initial request).

> [@jbudd](#):
>
> clicking the indicator opens the node config on the Description tab rather than showing the contents in the info pane

The tab is not formatted - it's like an edit mode

> [@jbudd](#):
>
> It should be the "preview" view because it may contain markup and mermaids(?)

In this case I agree, opening the description shows the preview and a button allows you to switch to editing.

---

<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 12:36 UTC](https://discourse.nodered.org/t/special-indication-on-nodes-with-description/78646/108 "2024-11-05T12:36:28Z")

</div>

> [@gregorius](#):
>
> Have you posted the code behind that yet? I had a quick look in the thread but didn't find anything

It's right there in [the thread](https://discourse.nodered.org/t/special-indication-on-nodes-with-description/78646/83).

---

<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: [5 November 2024 12:41 UTC](https://discourse.nodered.org/t/special-indication-on-nodes-with-description/78646/109 "2024-11-05T12:41:31Z")

</div>

> [@Steve-Mcl](#):
>
> It's right there in [the thread](https://discourse.nodered.org/t/special-indication-on-nodes-with-description/78646/83).

I thought that was the pseudo code but I just plugged it into chatgpt and it worked!

---

<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 15:11 UTC](https://discourse.nodered.org/t/special-indication-on-nodes-with-description/78646/110 "2024-11-05T15:11:31Z")

</div>

Given the lack of firm agreement and the mixed requirements - wouldn't this be better done as a plugin? That way, anyone could produce a different version to meet different needs.

---

<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: [5 November 2024 16:05 UTC](https://discourse.nodered.org/t/special-indication-on-nodes-with-description/78646/111 "2024-11-05T16:05:16Z")

</div>

> [@TotallyInformation](#):
>
> done as a plugin?

I've done that [already](https://discourse.nodered.org/t/special-indication-on-nodes-with-description/78646/90) and actually wanted to modify the solution to use @Steve-Mcl solution but the pseudo code only works with chatgpt.

---

<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 16:14 UTC](https://discourse.nodered.org/t/special-indication-on-nodes-with-description/78646/112 "2024-11-05T16:14:47Z")

</div>

> [@gregorius](#):
>
> pseudo code

Hardly pseudo code!?!? It is actual SVG+CSS demonstrating what is possible.

Not sure what chatgpt has to do with this?

Ps. The gif in the post is a recording of it running in a browser 🤷‍♂️

---

<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 16:21 UTC](https://discourse.nodered.org/t/special-indication-on-nodes-with-description/78646/113 "2024-11-05T16:21:46Z")

</div>

[Here](https://codepen.io/Steve-Mcl/pen/ExqevdQ) it is in action (unmodified)

---

<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: [5 November 2024 16:22 UTC](https://discourse.nodered.org/t/special-indication-on-nodes-with-description/78646/114 "2024-11-05T16:22:48Z")

</div>

> [@Steve-Mcl](#):
>
> Ps. The gif in the post is a recording of it running in a browser

Not within Node-RED unfortunately.

> [@Steve-Mcl](#):
>
> - adds a `g` element with the rounded `rect` and `text` elements
> - adds CSS for the `transition`ing `stroke`/`fill`/`y` position and cursor.

There is also a onMouseOver event. Then there is a part that computes the position of the g element (i.e. where is the end of the node) and the CSS (I don't do css). And then the part that defines where in the SVG for the node should all that be added.

But if you didn't add that to a NR node, it's just a mockup.

---

<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: [5 November 2024 16:24 UTC](https://discourse.nodered.org/t/special-indication-on-nodes-with-description/78646/115 "2024-11-05T16:24:38Z")

</div>

> [@Steve-Mcl](#):
>
> [Here](https://codepen.io/Steve-Mcl/pen/ExqevdQ) it is in action (unmodified)

Yes! 👍 That's a lot more than two point description:

```xml
<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: ![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 16:28 UTC](https://discourse.nodered.org/t/special-indication-on-nodes-with-description/78646/116 "2024-11-05T16:28:11Z")

</div>

Do you see the comments inside the demo code? The only thing added is the g element and CSS. And that's what the two comments say.

The rest of it is simulating a node otherwise you wouldn't be able to see it in operation.

Of course it will need to be adapted to work inside of the editor flow. The point is it is possible.

I don't understand your responses at all.

---

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

</div>

> [@Steve-Mcl](#):
>
> I don't understand your responses at all.

I know it's just "SVG" + "CSS" but I can't generate CSS & SVG from an animated gif - so that's why I asked whether the code (i.e. the SVG + CSS code) is online somewhere.

The general idea "_it's just SVG and CSS_" is clear, I wanted to see the code, i.e., the actual SVG and CSS code so that I could _perhaps_ add it to my plugin that already has a solution. I'm not going to sit done and reimplement your animated gif _because_ I can't.

Hence my question.

EDIT: Aaaah sorry, I just clicked on

 ![Screenshot 2024-11-05 at 17.34.23](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/9/c9e4c81a711b2460f2acfd23fd911763fcb12b18.png)

on the "SVG + CSS" "button" and there is the code - Sorry, mea culpa.

---

<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 16:48 UTC](https://discourse.nodered.org/t/special-indication-on-nodes-with-description/78646/118 "2024-11-05T16:48:33Z")

</div>

I think I get what you're saying. No, I did not create a PR or the code needed to generate this extra g element in the node-red source.

Since there is no consensus & is only being discussed, there was little point to actually writing the code. A mock-up was a more beneficial to demonstrate that A: it can be done and B: do people like it?

But the SVG and CSS is usable to whoever integrates this as they would simply check the node has the necessary property and add the extra g element as demonstrated (with the correct coordinates of course).

Lastly, there is the remaining task of hooking up the event handler for on-click so that it opens the info tab at the right place. But there is RED.xxx helper function for that (afk, can't remember exact API)

Note: There should be no need for mouse over events. As I stated in the original comments, it is pure SVG and CSS. If you look at the CSS you can see there is a :hover directive.

  

Edit

Just spotted your edit after posting

> EDIT: Aaaah sorry, I just clicked on

No worries.

---

<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 16:52 UTC](https://discourse.nodered.org/t/special-indication-on-nodes-with-description/78646/119 "2024-11-05T16:52:05Z")

</div>

Unfortunately a user is not going to install a plugin for that. Well I mean to customize it ok but basically it should be in the core.

---

<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 16:58 UTC](https://discourse.nodered.org/t/special-indication-on-nodes-with-description/78646/120 "2024-11-05T16:58:43Z")

</div>

The will if they want it and that's how its packaged! 🙂

While perhaps not ideal, it is better than never getting it because we can't agree. Something can always be better integrated later on.

---

<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: [5 November 2024 17:38 UTC](https://discourse.nodered.org/t/special-indication-on-nodes-with-description/78646/121 "2024-11-05T17:38:21Z")

</div>

> [@Steve-Mcl](#):
>
> But the SVG and CSS is usable to whoever integrates th

I've just added your solution with version 0.9.16 of my [introspection packlage](https://flows.nodered.org/node/@gregoriusrippenstein/node-red-contrib-introspection).

Can be used from the Lint tab of the sidebar:

 ![Screenshot 2024-11-05 at 18.24.44](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/9/c9b3bb2998dfe7183a119700986e41860a7471f7.png)

By clicking on the "undocumented" button, each node that _is_ documented will have this "post-it" note on it:

![undocumented3](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/a/8ae0c25eb559e5f4601ab4f03987c17853d81a11.gif)

Clicking on the post it node will open the edit panel for the node.

---

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

</div>

That works well 😃

It can get a bit crowded up there though

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/b/dbe4b046f01663064497656b37e2f48458b70344.png)

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

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