node-red-dashboard icon indicating copy to clipboard operation
node-red-dashboard copied to clipboard

UI Theme - Requires Full Deploy

Open jfm-GH opened this issue 2 years ago • 6 comments

Changes to the ui-theme configuration node appear to only take effect after restarting node red (or after doing a Full redeploy) - is the theme intended to work that way? I spent a while looking at the code of ui-theme.html, ui-theme.js and ui-base.js trying to figure out why my theme changes only took effect after restarting node red but could not find an issue in the code (if there even is one). I am new to programming, so I might simply be missing some specific knowledge, but since I cannot find any information on whether or not a full redeploy of all flows is supposed to be required to change the theme, I thought I would ask.

One thing I did notice was in this part of ui-theme.html:

<div class="form-row">
        <label><i class="fa fa-bookmark"></i> Surface</label>
        <label class="color-picker-wrapper" for="node-config-input-primary" style="width: 100px; height: 32px; border-radius: 6px; border: 1px solid #ccc">
            <input type="color" id="node-config-input-surface" style="opacity: 0; width: 100%;"/>
        </label>
</div>`

Should `for="node-config-input-primary"` 
not be equal to the input id ("node-config-input-surface")?

Though that does not seem to be causing any issues.

jfm-GH avatar Nov 11 '23 13:11 jfm-GH

Appreciate it, definitely shouldn't be a requirement to do a restart.

Are you able to upload a screen recording of the problem please?

joepavitt avatar Nov 13 '23 16:11 joepavitt

Sure. I've attached the recording.

https://github.com/FlowFuse/node-red-dashboard/assets/62642457/4df6b521-f1c1-467e-ba31-0c7efcbcc6af

jfm-GH avatar Nov 13 '23 19:11 jfm-GH

Sure. I've attached the recording.

https://github.com/FlowFuse/node-red-dashboard/assets/62642457/4df6b521-f1c1-467e-ba31-0c7efcbcc6af

This is so useful, thanks! Suspect I know where the problem exists.

UI Base Constructor builds that ui-config object, so doing a partial redeploy means that the ui config isn't likely resent, as only the ui-theme updates.

When doing the full redeploy, the ui-base recalculated everything from scratch, so picks up the changes in the sent configuration.

joepavitt avatar Nov 13 '23 19:11 joepavitt

My thoughts about the cause went in the same direction. I just haven't yet been able to put it all together. I'm still trying to understand which values are being stored at what time, etc. - so this helped me understand a little bit better, too 👍

jfm-GH avatar Nov 13 '23 19:11 jfm-GH

Thanks for taking a deeper look @jfm-GH - all assistance is really appreciated.

The core of the Node-RED side revolves around our register function: https://dashboard.flowfuse.com/contributing/guides/registration.html

I also need to update https://dashboard.flowfuse.com/contributing/guides/events.html to reflect that we now also have a "store" server-side, managed inside ui-base which handles the single source of truth state of the Dashboard

joepavitt avatar Nov 14 '23 10:11 joepavitt

Incorrect tagging in #704

joepavitt avatar Mar 27 '24 09:03 joepavitt

Can confirm this is a generalised issue with group, page and theme nodes, linked to how the ui-config is only updated on a call to the ui-base's register() function. If only a config node changes, no register() function is called and so the latest changes are not reflected.

With a "Full Deploy", all nodes are re-registered with the UI, and so the changes are reflected.

joepavitt avatar May 24 '24 11:05 joepavitt