Flow Tab properties

[smcgann99]

Just a thought that I had today (I don't have many)

Could the flow tabs in the editor have other properties than the name ?

Colour settings similar to the group options, for fill and font colour would be really helpful for identifying the flow TABs more easily. An optional icon would be the icing on the cake

[jbudd]

Also there is a blue indicator "led" on tabs with undeployed changes.
It would be nice to be able to trigger this (or similar in a different corner of the tab) from within the flow with a chosen colour, eg to indicate some error condition.

[GogoVega]

I like the idea of having a red bubble to indicate which flow has a node in error.

[gregorius]

You all are going to hate me but:

$('#red-ui-tab-d9450c0f08a45cfa').find('circle').css('fill', 'red')

where d945...cfa is the flow Id.

Combine that line with the ClientCode node and you can change the color all the time:

[{"id":"0e710fe5d053391c","type":"ClientCode","z":"864df4104ed3c1e1","name":"","clientcode":"$('#red-ui-tab-' + msg.flowid).find('circle').css('fill', msg.color)","format":"javascript","x":2399.9999999999995,"y":1229.9999999999998,"wires":[[]]},{"id":"6d97573977674ead","type":"change","z":"864df4104ed3c1e1","name":"","rules":[{"t":"set","p":"flowid","pt":"msg","to":"d9450c0f08a45cfa","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":2117,"y":1231,"wires":[["0e710fe5d053391c"]]},{"id":"ec9c248c0d44d0f2","type":"inject","z":"864df4104ed3c1e1","name":"red","props":[{"p":"color","v":"red","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":1718,"y":1162,"wires":[["6d97573977674ead"]]},{"id":"ebf91b241b2155e8","type":"inject","z":"864df4104ed3c1e1","name":"blue","props":[{"p":"color","v":"blue","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":1714,"y":1243,"wires":[["6d97573977674ead"]]},{"id":"11502c2c85cc2605","type":"inject","z":"864df4104ed3c1e1","name":"green","props":[{"p":"color","v":"green","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":1720,"y":1315,"wires":[["6d97573977674ead"]]}]

change the flowid in the change node in that flow.

Edit: it can also be generalised so that you don't need to supply the flow id by retrieving the node in the frontend and using its 'z' value (which is the flowid):

[{"id":"0e710fe5d053391c","type":"ClientCode","z":"864df4104ed3c1e1","name":"","clientcode":"let flowid = RED.nodes.node(msg.this_node_id).z || msg.flowid\n\n$('#red-ui-tab-' + flowid).find('circle').css('fill', msg.color)","format":"javascript","x":2508,"y":1350,"wires":[[]]},{"id":"6d97573977674ead","type":"change","z":"864df4104ed3c1e1","name":"","rules":[{"t":"set","p":"flowid","pt":"msg","to":"d9450c0f08a45cfa","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":2116,"y":1256,"wires":[["684a84833ff13f86"]]},{"id":"ec9c248c0d44d0f2","type":"inject","z":"864df4104ed3c1e1","name":"red","props":[{"p":"color","v":"red","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":1718,"y":1162,"wires":[["6d97573977674ead"]]},{"id":"ebf91b241b2155e8","type":"inject","z":"864df4104ed3c1e1","name":"blue","props":[{"p":"color","v":"blue","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":1714,"y":1243,"wires":[["6d97573977674ead"]]},{"id":"11502c2c85cc2605","type":"inject","z":"864df4104ed3c1e1","name":"green","props":[{"p":"color","v":"green","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":1717,"y":1366,"wires":[["6d97573977674ead"]]},{"id":"684a84833ff13f86","type":"function","z":"864df4104ed3c1e1","name":"function 17","func":"\nmsg.this_node_id = node.id\n\n\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":2311,"y":1292,"wires":[["0e710fe5d053391c"]]}]

Edit2: live demonstration

[smcgann99]

Well I don't hate you

But this wasn't my request ! (in any case your idea only works if the dot is already there, i.e. flow has been changed)

[jbudd]

As @smcgann99 says, plus if you set the circle red, a deploy clears it
but moving a node in the editor redraws it, still red. It should now be blue ?

[gregorius]

@smcgann99

Well I don't hate you

"Node-RED is not a dashboard"-hate

@jbudd

it, still red. It should now be blue

Indeed that's because the color is set on the svg element - this isn't a perfect solution, this is a quick hack! I think if you use jQuery, you can clear the color setting again (then it take the original css class, i.e. blue) --> $('#....').find('circle').css('color', '')

Admittedly setting the color directly on the element isn't the NR way, there should be a css class or something. But since that dot doesn't change colour, there isn't a NR-way to do it.

@smcgann99

case your idea only works if the dot is already there,

Indeed, but that seems to be toggleable with:

$('#red-ui-tab-f93e13e54f881a08').removeClass("red-ui-workspace-changed")

and

$('#red-ui-tab-f93e13e54f881a08').addClass("red-ui-workspace-changed")

again f93...a08 being the flow id