On the expectations of refreshable + user storage

[ruisilvestre-snapp]

Description

I came across a behaviour and I believe it's not immediately clear how it should work. It took me a while to narrow this down to a small example. Here it is:

@ui.refreshable
def show_clicks():
    ui.label(f"Clicks: {app.storage.user.get('clicks', 0)}")

@ui.page("/")
def main():
    def update_storage():
        app.storage.user["clicks"] = app.storage.user.get("clicks", 0) + 1
        show_clicks.refresh()

    ui.button("Click me", on_click=update_storage)
    show_clicks()

ui.run(reload=True, storage_secret="some secret key")

My expectation is that when I open multiple different sessions (safari, chrome, incognito etc) each individual user should get their own number of clicks, which partially happens when each user presses their own button.

But in reality, when I press the button in one of the windows, that change is propagated to all users. Then, when I click on another button in another browser it increments it's own counter correctly but propagates is to the other users. I also checked the .nicegui folder for the per-user storage and the values inside are correct for each user, so the issue seems to be about the refreshable triggering for all users.

Forcing reload of the web page returns the clicks to their expected/current value, discarding the value propagated from the other window.

My first instinct was to try putting the refreshable function inside main() and that made it work as expected i.e. each user has it's own counter, still I believe the way I set it up initially with show_clicks outside the page function was also correct (and it's a nice way to break down the UI into small components without cramming everything in the page function.

Triggering refresh using app.storage.user.on_change(lambda: show_clicks.refresh()) declared inside the page function has the same behaviour.

My interpretation is that since the refreshable function is defined outside a page function it will impact all users since it's a "shared server state". It's not clear to me this is a bug or not, or what internal mechanisms in refreshable are making it act like this, but not fully clear from the docs how it should work. I'm new to nicegui so this might also be a lack of interacting with the framework.

[ruisilvestre-snapp]

Ok... after giving this a bit more thought maybe the behaviour can be summarised as:

• top level refreshable function updates are 'pushed' to all clients
• the storage.user values are collected from the client that triggers the refresh and so all clients see the same value.

So, what is the best way to declare these refreshable functions? all inside the page function? My project has many of these at the moment 😄 any suggestions?

[falkoschindler]

Hi @ruisilvestre-snapp,

I think you ran into a pretty common problem with ui.refreshable. You want to keep the refreshable implementation separate from the page using it. But by moving the decorated function into global scope, it shares state with other instances using this function.

Here is a solution inspired by discussion #2535:

class ClickUI:

    @ui.refreshable
    def show(self):
        ui.label(f"Clicks: {app.storage.user.get('clicks', 0)}")

@ui.page("/")
def main():
    click_ui = ClickUI()

    def update_storage():
        app.storage.user["clicks"] = app.storage.user.get("clicks", 0) + 1
        click_ui.show.refresh()

    ui.button("Click me", on_click=update_storage)
    click_ui.show()

By moving the function definition into a class, its state is tied to the instance click_ui.

An alternative is to wrap the function explicitly rather than using ui.refreshable as a decorator:

def show():
    ui.label(f"Clicks: {app.storage.user.get('clicks', 0)}")

@ui.page("/")
def main():
    refreshable_show = ui.refreshable(show)

    def update_storage():
        app.storage.user["clicks"] = app.storage.user.get("clicks", 0) + 1
        refreshable_show.refresh()

    ui.button("Click me", on_click=update_storage)
    refreshable_show()

I tend to like this solution better than introducing a meaningless class. What do you think?

[ruisilvestre-snapp]

Hi @falkoschindler, I did look for refreshable on the issues tracker but at the time didn't associate that issue you linked with the problem I was having (I didn't even know how to describe this)... anyway this feels more like my lack of knowledge of nicegui patterns.

Thanks for providing these examples, I explored a few alternatives at the time and ended up using the 'closure' based approach you suggest, which was the closer to how I have my code structured. Both solutions here make sense, it's more about how your code is structured that will dictate what to use.

Do you think this is something that needs documenting better? I double checked the refreshable docs and all examples declare the refreshable at the top-level and there is no reference to this use case (which I still feel can be quite common specially for people starting out in the framework).

There is also an example on Modularisation https://github.com/zauberzeug/nicegui/tree/main/examples/modularization that could maybe be adapted to show how to use refreshable correctly in these cases?

Thanks for all the hard work on this library, kudos!

[tmlmt]

Thanks for this thread guys, I ran into a similar issue. Further to this, how can one transfer the user-specific state from one page to the other (reached with navigate.to())?

It seems that using app.storage.browser["id"] as suggested in #3203 or uuid64 as in the chat example as suggested in #1836 enables to get a user specific ID but not sure how to pass the user data. Storing and loading state in/from app.storage or a global variable on each page? Or is there a way to pass the Client() instance when navigating?

[rodja]

I'm not quite sure what you mean @tmlmt. Everything you store in app.storage.user should also be available on the next loaded page. Please create a new question if the problem persists. It is quite different from this topic here.

[arunmp25]

This is a common issue, and the solution provided helps us use the ui.refreshable very easily across pages, please do consider updating the documentation with the approach and solution

[falkoschindler]

I just created PR #3279 to add four explanatory demos to the documentation.