Refresh only current client

[Daemo00]

Hi all,
I've been using nicegui for a few months now and it is great, thanks to whoever is contributing and maintaining it.

My typical use-case is showing a table that can be filtered, and its elements can be added, edited, removed.. The usual stuff.
About filtering, #1029 helped a lot.

What still bothered me is that when one client was filtering their table, all of the clients' tables were being refreshed too.
Of course I'm ok with the refresh happening when adding/editing/removing elements: live update is great, but it shouldn't happen for filters.

Very much simplified, the code looked like:

names = ['Alice', 'Bob', 'Charlie']

def handle_new_name(name: str) -> None:
    names.append(name)
    name_list.refresh()

@ui.refreshable
def name_list(ui_state: dict) -> None:
    ui.notify(f"Refreshing client {ui.context.client.id}")
    for name in names:
        ui.label(name.upper() if ui_state['uppercase'] else name.lower())

@ui.page('/')
def main():
    ui_state = {'uppercase': False}
    name_list(ui_state)
    ui.switch('Uppercase', on_change=name_list.refresh).bind_value_to(ui_state, 'uppercase')

    name = ui.input('New name')
    ui.button('Add name', on_click=lambda: handle_new_name(name.value))

(taken from #1029 (comment) and slightly edited)
Here we are not filtering but the point is the same: you will notice that when switching "Uppercase", all the clients get updated.

I went through the source code (thanks Open Source!) and ended up implementing the following:

class RefreshCurrentClient:
    def __init__(self, func: ui.refreshable):
        self.func = func
    
    def __call__(self):
        all_targets = self.func.targets

        # Assign only the targets of current client to `self.func`
        current_client = ui.context.client
        targets_in_this_client = []
        for target in all_targets:
            if target.container.client == current_client:
                targets_in_this_client.append(target)
        self.func.targets = targets_in_this_client

        self.func.refresh()

        # Restore original targets
        self.func.targets = all_targets

This is not battle tested yet, but it allows to refresh only the client that is asking for the refresh.
The only change needed to use this class is:

-    ui.switch('Uppercase', on_change=name_list.refresh).bind_value_to(ui_state, 'uppercase')
+    ui.switch('Uppercase', on_change=RefreshCurrentClient(name_list)).bind_value_to(ui_state, 'uppercase')

so the full code becomes:

from time import sleep
from nicegui import ui

class RefreshCurrentClient:
    def __init__(self, func: ui.refreshable):
        self.func = func
    
    def __call__(self):
        all_targets = self.func.targets

        current_client = ui.context.client
        targets_in_this_client = []
        for target in all_targets:
            if target.container.client == current_client:
                targets_in_this_client.append(target)
        self.func.targets = targets_in_this_client

        self.func.refresh()

        self.func.targets = all_targets

names = ['Alice', 'Bob', 'Charlie']

def handle_new_name(name: str) -> None:
    names.append(name)
    name_list.refresh()

@ui.refreshable
def name_list(ui_state: dict) -> None:
    ui.notify(f"Refreshing client {ui.context.client.id}")
    for name in names:
        ui.label(name.upper() if ui_state['uppercase'] else name.lower())

@ui.page('/')
def main():
    ui_state = {'uppercase': False}
    name_list(ui_state)
    ui.switch('Uppercase', on_change=RefreshCurrentClient(name_list)).bind_value_to(ui_state, 'uppercase')

    name = ui.input('New name')
    ui.button('Add name', on_click=lambda: handle_new_name(name.value))

ui.run()

Here you will notice that when switching "Uppercase", only one client is updated.
On the other hand, when adding a new element, all the clients get updated and retain their "Uppercase" state.

It would be nice to have this feature implemented, or maybe that's only me showing off, or maybe there other ways to achieve this, feel free to move the discussion in the appropriate section.

Let me know what you think!

[evnchn]

That's interesting, but if I remember correctly, that you can use the local scope version of ui.refreshable if you always want to refresh only the client who, say, clicked a button.

https://nicegui.io/documentation/refreshable
Local scope variant A B C

However, this is an interesting possibility, though.

---

Not sure when it would be useful, since the state which should be uniform across all clients in a global scope ui.refreshable falls apart with your approach, so do you want a uniform global state or independent state after all 😅

[Daemo00]

ok this works as expected too, thanks!
So I still have to use a refreshable, but it is inside the page so it is somehow only linked to the current page.
And there is an external storage that we listen to and call show_names.refresh whenever it changes.

What is not clear to me is why calling the same show_names.refresh behaves differently:

• when called in

  app.storage.general.on_change(show_names.refresh)

  it updates all the clients
• when called in toggle_uppercase, updates only the current client

Could you please clarify that?
I thought it was not possible and it is basically the point of this discussion.

[evnchn]

Your original code have the @ui.refreshable in the "outside world" outside of @ui.page page definition. That means you are using refreshable in a global scope where it is synced between all clients as a default, and your implementation of RefreshCurrentClient is a way to "add on" the ability to refresh single client.

Rodja's code have @ui.refreshable in the "inside world" inside of @ui.page page definition. This means he is using refreshable in a local scope (variant A, to be exact) where all clients are independent, and app.storage.general.on_change(show_names.refresh) is a way to "add on" the ability to refresh all clients upon data change.

[evnchn]

In short, it matters where you put it.

[Daemo00]

That is more clear thanks, so in Rodja's code the refresh methods are local (one for each client) BUT thay all are registered as callbacks of any change of app.storage.general, and thus are all called when it changes.

[evnchn]

Yep

[rodja]

Ok. I guess we can close this discussion: there is no new feature to be implemented.

[Daemo00]

Understood, in order to refresh only the current client, everything must be in the same ui.page.

Adding some sort of API in ui.refreshable to select the clients to be refreshed could be interesting, but I can't think of any use-case for it so it's ok to close this.