Special indication on nodes with description

[Steve-Mcl]

May as well throw my hat in:

• adds a g element with the rounded rect and text elements
• adds CSS for the transitioning stroke/fill/y position and cursor.

Thats it

SVG + CSS inside CLICK TO EXPAND

<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>

[marcus-j-davies]

@Steve-Mcl

May as well throw my hat in:

Someone has watched the Limitless film recently

(I like it)

[Steve-Mcl]

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?

[TotallyInformation]

@Steve-Mcl

Rarely (be honest) do folks add docs to their nodes

Speak for yourself!!

[rko]

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

[GogoVega]

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

[TotallyInformation]

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.

[gregorius]

So the solution I was talking about is over here (can be tried out there), it just places a yellow to dot on the node.

the code for the node shows how it's done - adding a new svg circle on the node.

Export the nodes and install where needed.

[kuema]

@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.

[TotallyInformation]

@gregorius

shows how it's done

Can be simplified rather a lot if you want to:

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)

[gregorius]

@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.

[TotallyInformation]

@gregorius

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

I forgot to include that.

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

I think that should do it.

[Martin12]

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

[GogoVega]

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

[TotallyInformation]

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.

[GogoVega]

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.

[TotallyInformation]

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.

[Trying_to_learn]

(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 *)

[Steve-Mcl]

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

[GogoVega]

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.