Dynamic Properties - Ensure consistency on how dynamic classes (and other props) are set

[joepavitt]

Description

Lots more work in here than originally planned:

• Update how we manage dynamic properties, moving away from the topic/payload structure we'd previously defined whereby topic had to be ui-property:<property> - this was limiting to a single property each message, and prevented the use of topic for other functionality.
• Updated all documentation to reflect the widgets that support dynamic classes, for both online docs and in-editor docs
• Fix dynamic classes on all layouts for all widgets
• Ensure the statestore is properly updated when dynamic properties are set, and that the returned .state object in a Widget is accurate, and not a hardcoded set of defaults
• Update in-Editor help tooltip for dynamic class
• Add in tests (and ensure support) for dynamic disabled/enabled widget states

Related Issue(s)

Closes #259
Closes #352

Checklist

• I have read the contribution guidelines
• Suitable unit/system level tests have been added and they pass

[colin-grierson]

This update seems to have broken things and I can't make the dynamic properties work either :-(

Broken:
I was using a number of Vuetify widgets, now almost all do not display

• This is how it looks now
  
• Unfortunately I do not have a before image so I have to describe -
  At the bottom of each group should be a vuetify text box for entering a date and time with a 'Clear' icon to the left and a 'Search' icon to the right. Now all we see is the 'Clear' icon. The rest appears to be awol, not just hiding, as I cannot find the associated text in the html while I can find the text for the 'Clear icon'
  The ASP usage group should display a vuetify circular progress bar. Now all we see is the numeric component of this - '72'
  The html for this group is below, in the image for the text field properties

Trying to make the new control work
A text field, with dynamic properties, that was previously displaying correctly.

• I changed the code to set msg.class instead of msg.payload and msg.topic
• The code appears to be working because I see my class 'nr-metric-RED' in the HTML after other class names
• But the text is not red
  Here is what I see in the inspect window
  

Thanks for your help
Colin

[joepavitt]

Hi @colin-grierson - so sorry for the inconvenience. I'm not working today, but at least wanted to do some information gathering before I work on this properly tomorrow.

Were the ui-template elements ever driven by dynamic visibility from your code at all?

For the dynamic class, am I right in saying that the CSS class is being added, but your custom CSS definitions are not being loaded at all?

These do have a common feature... the ui-template node. I have dozens of test templates that I run locally before pushing, and they're all working, so will need some more details from you if you're able to share back and forth as we investigate.

[joepavitt]

DO you see anything in the "Console" Tab of the developer tools, or in the Node-RED logs when you first start Node-RED?

[joepavitt]

A quick test flow for the dynamic classes that's working for me in a new NR instance and with 0.11.6:

[
    {
        "id": "217f5470279801a8",
        "type": "ui-template",
        "z": "9392247661c4fd86",
        "group": "",
        "page": "",
        "ui": "ac76fc604d0aa66e",
        "name": "",
        "order": 0,
        "width": 0,
        "height": 0,
        "head": "",
        "format": ".test-class .nrdb-ui-text {\n    color: red;\n}",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "site:style",
        "className": "",
        "x": 140,
        "y": 60,
        "wires": [
            []
        ]
    },
    {
        "id": "81e6cfc8ef2f900e",
        "type": "ui-text",
        "z": "9392247661c4fd86",
        "group": "913bf6dec8b2a204",
        "order": 0,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "text",
        "format": "{{msg.payload}}",
        "layout": "row-spread",
        "style": false,
        "font": "",
        "fontSize": 16,
        "color": "#717171",
        "className": "",
        "x": 310,
        "y": 140,
        "wires": []
    },
    {
        "id": "593c64c94aeae2f2",
        "type": "inject",
        "z": "9392247661c4fd86",
        "name": "",
        "props": [
            {
                "p": "class",
                "v": "test-class",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "x": 130,
        "y": 140,
        "wires": [
            [
                "81e6cfc8ef2f900e"
            ]
        ]
    },
    {
        "id": "913bf6dec8b2a204",
        "type": "ui-group",
        "name": "Dynamic Class on UI Text",
        "page": "b06261546cb829cb",
        "width": "6",
        "height": "1",
        "order": -1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false"
    }
]

can you import that and try it out please? You will need to assign the imported group to a page within your Dashboard.

Something to note is that for the custom CSS class, I'm needing to over-define the scope with:

.test-class .nrdb-ui-text { ... }

so that it overrides the underlying Vuetify class since our dynamic classes actually get injected one layer higher, on a container, rather than on the widget itself. This hasn't changed in any recent update though, so shouldn't have been different.

[colin-grierson]

Hi Joe Don’t stress about this on my behalf, for me this is a research and learning project when I have time available. Not mission critical. Was I using dynamic properties before – yes, controlling the colour of text elements. I was waiting for the fix to dynamic properties on buttons so I could replace my text boxes with buttons and gain an extra control function without taking more space. … customer CSS definitions not loaded at all? Correct, at least I tried but could not find them – it’s possible I did not know where to look. Thanks again Colin

[colin-grierson]

The console messages appeared normal. I did not look in the “Console” tab of the developer tools… If you want me to do this please tell me where it is.

[colin-grierson]

Will do when I am at work tomorrow. 1am and bedtime here now – your messages are worth staying up a bit later for 😊

[joepavitt]

Which version of Node-RED are you using @colin-grierson?

Can you try a method I've proposed here please: https://discourse.nodered.org/t/dashboard-2-ui-template-config-error/84785/4?u=joepavitt

Appreciate it'll be a pain with lots of ui-template nodes, but want to check if that is the same issue.

[colin-grierson]

Hi Joe Sorry I was not quicker to get to do this. - Your example works - Your template has been loaded into the heading section of the html – I do not see my template there - Why does the class definition in the template have two names – ‘.test-class’ and ‘.nrdb-ui-text’? My class definitions have just one name, for example ‘.nr-metric-RED’ - ‘nrdb-ui-text’ appears in the html for each text widget? I changed my style template to have two class names as in your example, deployed and now see colour :-) - My template is now present in the HTML - This seems to mean we may have to define a style multiple times, once for every widget type it is used on. Not elegant – but certainly can be lived with. The vuetify widgets still do not appear – moving to your second email now Cheers, Colin Colin Grierson | Development & Integration Consultant Systems Advisory Services 520 Great South Road, Greenlane, Auckland, New Zealand | PO Box 17‑268 Greenlane Phone +64 9 525 7353 | DDI +64 9 580 8745 | Email ***@***.***| Web www.sasit.co.nz We develop, integrate and manage mission critical systems From: Joe Pavitt ***@***.***> Sent: Monday, January 22, 2024 9:37 PM To: FlowFuse/node-red-dashboard ***@***.***> Cc: Colin Grierson ***@***.***>; Mention ***@***.***> Subject: Re: [FlowFuse/node-red-dashboard] Dynamic Properties - Ensure consistency on how dynamic classes (and other props) are set (PR #497) A quick test flow for the dynamic classes that's working for me in a new NR instance and with 0.11.6: [ { "id": "217f5470279801a8", "type": "ui-template", "z": "9392247661c4fd86", "group": "", "page": "", "ui": "ac76fc604d0aa66e", "name": "", "order": 0, "width": 0, "height": 0, "head": "", "format": ".test-class .nrdb-ui-text {\n color: red;\n}", "storeOutMessages": true, "passthru": true, "resendOnRefresh": true, "templateScope": "site:style", "className": "", "x": 140, "y": 60, "wires": [ [] ] }, { "id": "81e6cfc8ef2f900e", "type": "ui-text", "z": "9392247661c4fd86", "group": "913bf6dec8b2a204", "order": 0, "width": 0, "height": 0, "name": "", "label": "text", "format": "{{msg.payload}}", "layout": "row-spread", "style": false, "font": "", "fontSize": 16, "color": "#717171", "className": "", "x": 310, "y": 140, "wires": [] }, { "id": "593c64c94aeae2f2", "type": "inject", "z": "9392247661c4fd86", "name": "", "props": [ { "p": "class", "v": "test-class", "vt": "str" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "", "x": 130, "y": 140, "wires": [ [ "81e6cfc8ef2f900e" ] ] }, { "id": "913bf6dec8b2a204", "type": "ui-group", "name": "Dynamic Class on UI Text", "page": "b06261546cb829cb", "width": "6", "height": "1", "order": -1, "showTitle": true, "className": "", "visible": "true", "disabled": "false" } ] can you import that and try it out please? You will need to assign the group to a page within your Dashboard — Reply to this email directly, view it on GitHub<#497 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AJ3QPHMOXGM43ZR6IPAF6WDYPYQJ5AVCNFSM6AAAAABCAVAQKGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMBTGQ4TGOBSG4>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[colin-grierson]

Hi Joe Dashboard V2 version? I loaded the latest version on Monday, 0.11.6

Can you try a method I've proposed here?

Do you mean turning off the ‘Pass through’ option? Alas, still no widget … actually not true – a small part of the widget appears Here is the definition of the circular progress bar ```html <div class="text-center"> <v-progress-circular :size="200" :width="30" :model-value="value" color="teal"> <template v-slot:default> {{ value }} % </template> </v-progress-circular> </div> ``` This is what makes it to the HTML, just a grid and the numeric value - 72% ``` <div data-v-fc34581d="" id="nrdb-ui-widget-50df2acad2995251" class="nrdb-ui-widget nrdb-ui-template" style="display: grid; grid-template-rows: repeat(5, minmax(45px, auto)); grid-column-end: span 5;">72 % </div> ``` Here is the definition of my response widget, which should have: - A reset button - An ignore until date/time entry box - An investigate button. Only the reset button appears on the dashboard now. ```html <!-- omitting hint from the v-field definition as it breaks the widget. hint="Enter your password to access this website" --> <v-container> <v-row> <v-col cols="15"> <v-text-field v-model="value" label="Ignore until" model-value=Date() clearable type="datetime-local"> <template v-slot:prepend> <v-tooltip location="bottom"> <template v-slot:activator="{ props }"> <v-icon v-bind="props" icon="mdi-close-circle-outline" @click="send({payload: 'metricReset'})"></v-icon> </template> Clear status </v-tooltip> </template> <template v-slot:append-inner> <v-btn class="ma-2" color="primary" dark @click="send({payload: value})">Confirm</v-btn> </template> <template v-slot:append> <v-tooltip location="bottom"> <template v-slot:activator="{ props }"> <v-icon v-bind="props" icon="mdi-magnify" @click="send({payload: 'Investigate'})"></v-icon> </template> Investigate </v-tooltip> </template> </v-text-field> </v-col> </v-row> </v-container> ``` This is what I see in the HTML: ```html <div data-v-fc34581d="" id="nrdb-ui-widget-7d72c724f7f40c7f" class="nrdb-ui-widget nrdb-ui-template" style="display: grid; grid-column-end: span 6;"><i class="mdi-close-circle-outline mdi v-icon notranslate v-theme--nrdb v-icon--size-default v-icon--clickable" role="button" aria-hidden="false" targetref="[object Object]" aria-describedby="v-tooltip-114"></i></div> ``` `v-tooltip-114` is defined later as ‘Clear status’ I’m guessing that whatever prevented my template from being loaded when the widget class name was not present is also preventing the vuetify templates from loading properly? You say “I'm needing to over-define the scope with: .test-class .nrdb-ui-text { ... } so that it overrides the underlying Vuetify class… so shouldn't have been different” But what I seem to be seeing is without the widget class name the template is not being copied to the HTML at all Regards, Colin

[joepavitt]

Dashboard V2 version? I loaded the latest version on Monday, 0.11.6

Hoping to find out which version of Node-RED you're running actually, was chatting with Nick yesterday about these ui-template problems, and there seems to be a verification bug in 3.1.3 that is causing us some grief.

[joepavitt]

Here is the definition of the circular progress bar

Very odd indeed, I copied that example exactly, and tried it out:

[joepavitt]

Wait, no I didn't copy it exactly, I surrounded it in <template><!-- your content here --></template> which is prescribed in the docs

If I remove the <template/> then I see the exact same behaviour as you do.

Not sure which version you were updating from? I think we used to support it without <template> back in 0.9.x, but when I introduced the new ui-template structure in 0.10.0, and the ability to define a full Vue component, it required the <template>, although I have to confess I thought it should have still worked without.

[joepavitt]

To address this too:

Why does the class definition in the template have two names – ‘.test-class’ and ‘.nrdb-ui-text’? My class definitions have just one name, for example ‘.nr-metric-RED’. I changed my style template to have two class names as in your example, deployed and now see colour :-)

In CSS you can define different layers of style, for example:

.my-class p {
   color: blue;
}```

would apply to all `<p>` elements inside your `.my-class`. Because it has two layers of depth to it's definition, if any styles clash, for example there was also a:

```css
p {
   color: red;
}

Then the "most defined" class wins - in this case, the paragraphs would render blue.

Vuetify, the library we are using to render a lot of our components provides a base set of styles and definitions, when we inject our own classes, we are actually injecting them into the parents of the widgets, not the widgets themselves, hence to need to "over define".

The more I think about it though, even though this will be more painful from a development effort, having to over-define is not intuitive at all, and will undoubtedly cause more headaches in the future for others. I'll see if I can fix that today.

[colin-grierson]

Hi Joe Thanks again for your help. I agree with your decision on the CSS class names, much better not having to add a magic ingredient. I also see ui-control is now available – cool! I’d been waiting for this :-) 1. I added `<template>` & `</template>` to my templates and now the widgets display :-) Should is add `<template>` & `</template>` to my style templates? - Appears not, the editor shows an error and if I implement anyway – it is weird. My RED text class does not work – but subsequent classes do??? Sometimes not all classes in the template get found… 2. I am using N-R v 3.1.0 3. I want to highlight things that require attention on my dashboard. Ideally this would be a dynamic control affecting the group name for the group displaying the particular attribute but we don’t have dynamic controls for this – or do we? - When I display the manual for ui-group I see “If a Class is specified, it will be added to the parent card. This way you can style the card and the elements inside it with custom CSS. The Class can be set at runtime by setting a msg.className string property.” But there is no dynamic class icon and the help on your website (https://dashboard.flowfuse.com/nodes/config/ui-group.html) does not mention dynamic classes. Which is correct? 4. I have text widgets as my group headings as I can highlight them when required. I want a button to provide a reload function. It may as well also be the heading to reduce the number of items displayed and size required. But the Dynamic CSS that works for text widgets is not working for Buttons. Everything seems to be okay to me, but our class does not appear in the inheritance list for the button text properties. In my template I have: ```css .nr-metric-RED .nrdb-ui-text { color: Black !important; background-color:Tomato !important; font-size: 1.25rem; nr-metric-RED .nrdb-ui-button { color: Black !important; background-color:Tomato !important; font-size: 1.25rem; ``` This works for the text widgets but not the buttons. Inspecting the HTML I see - The template /* Red, Orange and "Green" styles for highlighting where an issue exists - text widgets */ .nr-metric-RED .nrdb-ui-text { color: Black !important; background-color:Tomato !important; font-size: 1.25rem; } .nr-metric-ORANGE .nrdb-ui-text { color: Black !important; background-color:Orange !important; font-size: 0.75rem; } .nr-metric-NORMAL .nrdb-ui-text { background-color:White !important; } /* Red, Orange and "Green" styles for highlighting where an issue exists - buttons */ .nr-metric-RED .nrdb-ui-button { color: Black !important; background-color:Tomato !important; font-size: 1.25rem; } .nr-metric-ORANGE .nrdb-ui-button { color: Black !important; background-color:Orange !important; } .nr-metric-NORMAL .nrdb-ui-button { background-color:White !important; } ``` For my text widget: ```html <div data-v-fc34581d="" id="nrdb-ui-widget-5b21965dbf681454" class="nrdb-ui-widget nrdb-ui-text nr-metric-RED" style="display: grid; grid-template-rows: repeat(1, minmax(45px, auto)); grid-column-end: span 6;"><div data-v-219cb57e="" data-v-fc34581d="" class="nrdb-ui-text nrdb-ui-text--row-spread" state="[object Object]" style="grid-row-end: span 1;"><label data-v-219cb57e="" class="nrdb-ui-text-label">ASP Usage</label><span data-v-219cb57e="" class="nrdb-ui-text-value"></span></div></div> ``` For my button much the same: ``` <div data-v-fc34581d="" id="nrdb-ui-widget-752e706fdbb2333d" class="nrdb-ui-widget nrdb-ui-button nr-metric-RED" style="display: grid; grid-column-end: span 6;"><button data-v-fc34581d="" type="button" class="v-btn v-btn--block v-theme--nrdb v-btn--density-default v-btn--size-default v-btn--variant-flat"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span><!----><span class="v-btn__content" data-no-activator="">Jobs Waiting on Message Reply</span><!----><!----></button></div> ``` Looking at the attribute inheritance for the Text widget text I see our class ```css .nr-metric-RED .nrdb-ui-text { color: Black !important; background-color: Tomato !important; font-size: 1.25rem; } ``` Looking at the attribute inheritance for the button text - our classes are not in the list 6. Getting even further into CSS. Tell me to RTFM if you want. Specifying a custom class for the button works – but only partly… I don’t seem to be able to control text size. ```css .nr-metric-button-heading { justify-self: left; font-size: 1.25rem !important; }``` Looking at the inheritance I see ```css .nr-metric-button-heading { justify-self: left; font-size: 1.25rem !important; }``` Justify takes effect but font-size does not. Earlier in the inheritance chain I see ```css .v-btn--size-default { --v-btn-size: .875rem; --v-btn-height: 36px; font-size: var(--v-btn-size); min-width: 64px; padding: 0 16px; } ``` The –v-btn-size spec here takes precedence – even though this is only a ‘default’. Specifying -v-btn-size in my class does not help either, not even with !important. If in the browser styles I disable .`v-btn--size-default { --v-btn-size: .875rem;}` then I see my control take effect, so the problem is precedence not that my control is faulty. **7. Problem with UI-Control** … Nope, my problem. I loath case sensitive systems – why make it so easy to make hard to spot errors? Took me 20 minutes :-( It seems a very bad decision to me. You don’t need to answer this one! I want to automatically switch to a new page if a user clicks the ‘Investigate’ button. On the new page I have a button to return to the front page. The first worked, the second did not. Investigate… - This two line function works msg.payload = {"page":"IBMi Status Dashboard"}; return [msg]; - This button does not ***@***.*** - Debug 50 is from the button – and does not work. Debug 52 is from the function – and does work ***@***.*** Sorry to be a pain Cheers, Colin

[joepavitt]

Could I be a pain and ask you to open some posts onto https://discourse.nodered.org/tag/dashboard-2 please for each of the topics? That way, each topic can be focussed into a thread, and it puts it into a public forums where others can see the problems if they're facing similar issues.

The only thing I will quickly points out, but this may just be a copy+paste error, is that you're missing a closing } after your .nr-metric-RED .nrdb-ui-text class declaration, but before the nr-metric-RED .nrdb-ui-button, which may be why the latter is not loaded into the declarations.