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.
1 Like
Have you posted the code behind that yet? I had a quick look in the thread but didn't find anything ....
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 
Nomenclature
Within a node config we have an icon and "Description" not "Docs"
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.
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).
The tab is not formatted - it's like an edit mode
In this case I agree, opening the description shows the preview and a button allows you to switch to editing.
It's right there in the thread.
I thought that was the pseudo code but I just plugged it into chatgpt and it worked!
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.
I've done that already and actually wanted to modify the solution to use @Steve-Mcl solution but the pseudo code only works with chatgpt.
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 
Here it is in action (unmodified)
Not within Node-RED unfortunately.
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.
Yes! 
That's a lot more than two point description:
<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>
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.
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
on the "SVG + CSS" "button" and there is the code - Sorry, mea culpa.
1 Like
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.
2 Likes
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.
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.
1 Like
I've just added your solution with version 0.9.16 of my introspection packlage.
Can be used from the Lint tab of the sidebar:
By clicking on the "undocumented" button, each node that is documented will have this "post-it" note on it:
Clicking on the post it node will open the edit panel for the node.
3 Likes
