Group does not show styling until browser refresh made

General
1

I've had this problem for several weeks, and it only happens with one group repeatedly, every time I open a new browser window.
It occurs with both Chrome Version 106.0.5249.119 (Official Build) (64-bit) & Firefox 105.0.3 (64-bit), and refreshing the browser caches does not resolve it.
Other groups that I have in different tabs load every time without problem.

The issue is that upon opening the browser window, the group has no styling (no colours etc), but if I reload (using F5) then the page reloads and the group is then correctly displayed.
If I then close the browser, and immediately reopen it, again there is no styling :grimacing:

flexdash

Node-RED version: v3.0.2
Node.js version: v16.17.1
Linux 5.10.103-v7+ arm LE
Raspberry Pi 3B+

2

Any errors showing in the browser console?

3

Yes, but I'm not the best at interpreting them...

error

The group config seems to be OK

group

I was about to try ungrouping & re-grouping the selection, but thought I'd post first in case it meant anything to anyone.

4

OK... ungrouped the nodes, deployed, then regrouped the nodes, deployed....
Exactly the same issue!
...reboot, still the same.

Also the same on Microsoft Edge Version 106.0.1370.42 (Official build) (64-bit)

5

@tve this seems somehow related to using a flexdash node (although shouldn't this really be a node-RED issue??)

It can be replicated by importing your example flexdash flow - Hello-world, selecting the imported nodes and Hamburger > Groups > Create group, give it some styling and deploy.

Close your browser, reopen your browser and go to the group created above. For me, all styling is absent until I refresh using F5.

6

@Paul-Reed can you share that example flexdash flow here so I can take a quick look at it without installing the module?

7

Sure, attached.
It appears to be the flexdash nodes (not just the one in the example), and not the flow itself, so unless you install flexdash I suspect that you will not see the issue.

[{"id":"3b12c24e4ba6d995","type":"fd-date-time","z":"8b510289e929426b","fd_container":"69c2e3f5798c3475","fd_cols":"2","fd_rows":1,"fd_array":false,"fd_array_max":10,"name":"","title":"Flow started at","value":"","color":"","start_mode":0,"zoom":100,"low_threshold":"","low_color":"blue","high_threshold":"","high_color":"pink","chip":"false","units":["now","sec","min","hr","days","weeks","months"],"x":300,"y":120,"wires":[]},{"id":"0ead5239ddad1cfd","type":"inject","z":"8b510289e929426b","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":130,"y":120,"wires":[["3b12c24e4ba6d995"]]},{"id":"69c2e3f5798c3475","type":"flexdash container","name":"Energy","kind":"StdGrid","fd_children":",43719d5359575f6b,bb113511ea8e41fd,3a60132d9af9f863,3b12c24e4ba6d995","title":"","tab":"fef6c0f6d48841d6","min_cols":"8","max_cols":10,"parent":"","solid":false,"cols":"1","rows":"1"},{"id":"fef6c0f6d48841d6","type":"flexdash tab","name":"Energy","icon":"mdi-home-lightning-bolt-outline","title":"","fd_children":",69c2e3f5798c3475","fd":"e8f5aea52ab49500"}]

ex

8

Thanks @Paul-Reed - yeah, nothing out of the ordinary about that JSON. Will need looking with flexdash installed. Not really in a place to do that right now.

1 Like
9

I'm flattered that you think I could effect such a misbehavior :star_struck:

Seriously, there's nothing in FlexDash that could cause this, except :drum: :drum: :drum: async loading of node definitions. The FlexDash nodes are generally loaded async, you can see this in your animation where the FD nodes briefly appear in red outline before they fill in. This is also consistent with a refresh fixing it 'cause then a bunch of things are in-cache. There was already a bug in Node-RED with the async loading, I suspect you uncovered another one...

10

@Colin do you see the same issue with your Flexdash dashboard?

11

I don't use groups on my flexdash system, so would not notice if it were happening. I wonder whether it could be related to this issue, which plagues me (from before flexdash appeared on the scene). For me, the theme does not get applied under some circumstances. It may be a timing issue of some sort. Theme not applied on startup on Chrome, Cannot GET /theme/css/theme.min.css · Issue #3482 · node-red/node-red · GitHub

If you ask for the dark theme do you see the problem there too?

12

This will not be related to the CSS theme. It is almost certainly related to the async loading the flexdash nodes do. They are the only nodes I know if that do this type of async loading, so more likely to hit edge cases.

1 Like
13

No @Colin, themes are working fine for me.
As Nick has said, probably a different issue.

14

Issue identified and fix PR'd - Fix group unknown by knolleary · Pull Request #3921 · node-red/node-red · GitHub

1 Like
15

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.