Dashboard does not update on deploy via http request

[MxFxM]

Current Behavior

The background color (and other theme options) of the dashboard do not update, when the flows are redeployed via a http request.

Expected Behavior

Nodes and flows are updated when I redeploy the flows file via http request. I expect the background color of the dashboard to update as well.

Steps To Reproduce

1. Create a flow with a dashboard
2. Deploy the flow
3. Copy the flows.json file from ~/.node-red/flows.json
4. Make a modification to the colors of the theme, e.g. change the colors of the light theme (make sure the theme is selected)
5. Make a post request to upload the flows with the modified file
6. Find, that the menu on the editor screen did change the color of the theme, the dashboard itself has not. You can restart the Raspberry or restart Node Red without any effect. The correct colors of the dashboard will load, if you edit a node in a flow e.g. move it, and then redeploy via the web editor.

Example flow

[
    {
        "id": "be9d72fa43478ae3",
        "type": "tab",
        "label": "Flow 1",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "1682d3b5eb19fa05",
        "type": "ui_button",
        "z": "be9d72fa43478ae3",
        "name": "",
        "group": "1054cccc6d7a0bb4",
        "order": 0,
        "width": 0,
        "height": 0,
        "passthru": false,
        "label": "button",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 470,
        "y": 160,
        "wires": [
            []
        ]
    },
    {
        "id": "1054cccc6d7a0bb4",
        "type": "ui_group",
        "name": "Standard",
        "tab": "a1c60ce5fd3bb81d",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "a1c60ce5fd3bb81d",
        "type": "ui_tab",
        "name": "Home",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]

Environment

• Node-RED version: 3.0.2
• Node.js version: v16.17.0
• npm version: 8.15.0
• Platform/OS: mendel linux on google coral dev board
• Browser: firefox on mac os

[knolleary]

Hi @MxFxM

I guess you are referring to the node-red-dashboard nodes here? They are not part of the core of node-red, so not something we can fix in this repo.

I'll transfer this over to the node-red-dashboard repo where it can be looked at.

[MxFxM]

I just noticed, that with the export of the example flow I added above the mentioned dashboard settings are not available. They are only in the full export of all flows... I am talking about this part:

{
        "id": "49e2d8ef8ee6f943",
        "type": "ui_base",
        "theme": {
            "name": "theme-custom",
            "lightTheme": {
                "default": "#006DE1",
                "baseColor": "#006DE1",
                "baseFont": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif",
                "edited": true,
                "reset": false
            },
            "darkTheme": {
                "default": "#006DE1",
                "baseColor": "#006DE1",
                "baseFont": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif",
                "edited": false
            },
            "customTheme": {
                "name": "Untitled Theme 1",
                "default": "#4B7930",
                "baseColor": "#4B7930",
                "baseFont": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif",
                "reset": false
            },
            "themeState": {
                "base-color": {
                    "default": "#4B7930",
                    "value": "#4B7930",
                    "edited": true
                },
                "page-titlebar-backgroundColor": {
                    "value": "#4B7930",
                    "edited": false
                },
                "page-backgroundColor": {
                    "value": "#111111",
                    "edited": false
                },
                "page-sidebar-backgroundColor": {
                    "value": "#333333",
                    "edited": false
                },
                "group-textColor": {
                    "value": "#6db046",
                    "edited": false
                },
                "group-borderColor": {
                    "value": "#555555",
                    "edited": false
                },
                "group-backgroundColor": {
                    "value": "#333333",
                    "edited": false
                },
                "widget-textColor": {
                    "value": "#eeeeee",
                    "edited": false
                },
                "widget-backgroundColor": {
                    "value": "#4b7930",
                    "edited": false
                },
                "widget-borderColor": {
                    "value": "#333333",
                    "edited": false
                },
                "base-font": {
                    "value": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"
                }
            },
            "angularTheme": {
                "primary": "indigo",
                "accents": "blue",
                "warn": "red",
                "background": "grey",
                "palette": "light"
            }
        },
        "site": {
            "name": "Node-RED Dashboard",
            "hideToolbar": "false",
            "allowSwipe": "false",
            "lockMenu": "false",
            "allowTempTheme": "true",
            "dateFormat": "DD.MM.YYYY",
            "sizes": {
                "sx": 48,
                "sy": 48,
                "gx": 6,
                "gy": 6,
                "cx": 6,
                "cy": 6,
                "px": 0,
                "py": 0
            }
        }
    },

When I change to light theme and change the color code and then post the flow via a request, the changes are visible in the web editor, but are not updated on the dashboard itself. Only if I then deploy (the next change) via the web editor.

[dceejay]

Correct - you need to refresh the client (dashboard) browser to reload the settings you have deployed. This is not something that is going to be fixed.

[MxFxM]

Can you please elaborate on what exactly I need to refresh?

I want to setup the dashboard in such a way that a new user (a different person using a different PC) can see the new colors in the dashboard when he first opens it. Or am I misunderstanding and you say the colors are correct if I open them from a new client (aka a different browser of a different person on a different PC)?

[dceejay]

Yes - the second of those... If you open a new browser (Or reload in an existing one (ctl-R)), then the new user should see the new theme.

Just deploying the flow is not enough - the client browser(s) need to refresh their pages, as the theme is only read at load time - not dynamically via the web socket (where data updates happen).