Tab changes when PWA reconnects

[Paul-Reed]

If I navigate to a tab to perhaps monitor energy usage, my phone/tablet screen times out after 30 seconds, so I touch the screen to wake it up. PWA tells me that it's reconnecting, and goes back to my first tab.
Then of course I have to navigate back to the energy tab to continue monitoring...
Why can't it load again on the same tab?

I'm assuming that it's as a result of #1552 (but of course I could be wrong. If so, apologies @bartbutenaers )

[colinl]

To clarify exactly what you mean by a Tab, have you got the layout set to Tabs for the page?

[Paul-Reed]

Yes, I'm using numerous tabs on the page, as it's easier to navigate on a phone.
Layout = Tabs

[bartbutenaers]

Hi @Paul-Reed,
By rereading your question, I "might" indeed be that my pull-request causes that problem. But I am not familiar with the whole reloading mechanism from the dashboard, so I cannot determine whether my PR is the root cause. Unfortunately I don't have time to digg into the core code, due to the number of tickets that is being registered in this repo (and the zero interest from our community to help here...).

I try to avoid to mention people as much as possible, but I know that @cgjgh has done quite a lot of great refactorings in those parts of the dashboard code. Perhaps he can can give us some ideas about what might cause your issue.

[cgjgh]

@bartbutenaers I’m not aware of any part in the reloading mechanism that would specifically cause this, but will take a more in depth look.

and the zero interest from our community to help here...).

I realize your frustration and my apologies for not being more active on here. At the moment any time I have goes into porting previous projects into D2, building 3rd party D2 nodes if needed. If an issue on here coincides with one I’m facing I do my best to address it. My hope is that everyone who raises an issue on here, also tries their best in contributing and finding the solution.

[bartbutenaers]

@cgjgh thanks a lot to help Paul with this! Really appreciated!! I hope you are aware that I am not referring to you, when I am talking about the near-zero contribution rate in this repo...

[Paul-Reed]

My contribution is unfortunately finding issues..
I wish I had the knowledge and skills to contribute by solving them, but for me it's too late to learn 'old dogs new tricks'.

Thanks @bartbutenaers @cgjgh

[colinl]

In fact this is nothing to do with PWA or mobile devices. It can very easily be seen on a PC if node-red is running on a different machine to that running the browser. Open the dashboard in the browser, select a tab other than the first, and disconnect the network from the machine running the browser. Wait a few seconds for the disconnected message, then reconnect the network. When it reconnects it reverts to showing the first tab.

[cgjgh]

The issue does indeed seem to originate here in Tabs.vue rather than PWA related code.

beforeRouteEnter (to, from, next) {
        next(vm => {
            // Select the first tabsheet every time the user arrives on this page
            if (vm.orderedGroups && vm.orderedGroups.length > 0) {
                    vm.tab = 0
            }
        })
    },

We could make a slight change and check if origin and destination pages are unique before assigning tab 0:

 beforeRouteEnter (to, from, next) {
        next(vm => {
            // Select the first tabsheet every time the user arrives on this page
            if (vm.orderedGroups && vm.orderedGroups.length > 0) {
                // Check if origin and destination pages are unique
                if (to?.name !== from?.name) {
                    vm.tab = 0
                }
            }
        })
    },

This seems to still satisfy the issue @bartbutenaers solved in #1552 and also fixes the one @Paul-Reed found.

[colinl]

That fixes it for me.

[Paul-Reed]

Where is tabs.vue @colinl
I've looked for it to try the fix, but can't locate it.
Ubunto 20.04

[bartbutenaers]

@cgjgh
Really appreciated!!! I would never have found that in my available time.

[colinl]

Where is tabs.vue

It is ui/src/layouts/Tabs.vue, note it is Tabs not tabs. The link that cgjgh provided takes you there.

[colinl]

@Paul-Reed, in case you didn't realise, you can't just hack this in the node_modules folder. You have to clone the dashboard repository, edit it, rebuild it, and install that version into your node-red. See https://dashboard.flowfuse.com/contributing/

[Paul-Reed]

Ah ok. It's my live server, so I'll wait for it to be merged.

Thanks for the speedy fix @cgjgh