Add a way to change the value of ValueElement without triggering handlers

[flonou]

In my application, I sometimes need to create the UI and set the data afterwards.
Doing so will trigger value changed handlers.
Unless I missed something, there is no way to silently change a value.
Something like : ui_element.set_value_without_notify(value)
My current workaround is to remove all change handlers temporarily but I feel a simpler way should exist (or maybe it does and I missed it ? )

# disable value change handlers temporarily
handlers=  ui_element._change_handlers
ui_element._change_handlers = []
ui_element.set_value(value)
ui_element._change_handlers = handlers

[falkoschindler]

Hi @flonou,

You could add event handlers once the data is initialized. Does that help in your case?

age = ui.number(label='Age')

def initialize_data():
    age.value = 10
    age.on_value_change(lambda: ui.notify(f'Age changed to {age.value}'))

ui.button('Initialize Data', on_click=initialize_data)

Adding a set_value_without_notify method sounds like a lot of additional code and API (same for set_text, set_content and so on) just to serve a rather niche purpose. That's why I'm a bit reluctant to add it.

Maybe disabling change handlers could be done like this:

with age.change_handlers_disabled:
    age.value = 10

But the consequence is a bit unclear. What if you call age.value = 10 (same value) afterwards? Would this trigger the change handler? The value doesn't really change, but it does relative to the last triggered change event. Either way, I can imagine the application getting into a weird inconsistent state.

[flonou]

Hi,
Adding the handlers after the initialization works if we only initialize once (You may want to reuse the controls to load different data, turns out that's my use case for now).
Another approach would be to recreate the UI every time, but I do not know if this is the mindset behind nicegui to work that way.

Disabling the handlers could be a nice solution with clear intent from the developer to not trigger anything

One could argue that it could roughly be the same as

def set_value_without_notify (self, new_value):
 with self.change_handlers_disabled:
   self.value = new_value

I also guess there is some confusion between some_ui.set_value(value) and some_ui.value=value. From what I understand, they both result in the same trigger of handlers if the new value is different from the previous one ?

[falkoschindler]

Re-creating UI elements is often a reasonable solution. It's probably simpler than resetting existing elements. See ui.refreshable, which heavily relies on this strategy.

some_ui.set_value(value) and some_ui.value = value are basically synonyms. The set_value method is handy to be called in lambda statements, which some_ui.value = value can be slightly more readable elsewhere.

[MLaurenceFournier]

I was about to make the same suggestion as @flonou. It took me a while to find this conversation. I hope I'm not too late to add some input.

Some months ago I wrote a custom annotation tool for my employer using NiceGUI. I know it was probably not really idiomatic, but I quickly realize that defining my UI components as classes was the most ergonomic for me. Instead of relying on binding (which introduce a lot of hardcoded string) or using refreshable (which I didn't know at the time), I explicitly wrote update statements using set_value (and similar methods).

To prevent circular triggering, I used a boolean flag to disable my handlers when necessary. Eventually, the flag bookkeeping was extracted into three helpers functions where my past self left a TODO, asking me to revisit the question. Here is the bookkeeping code with a simple example of "class component".

from __future__ import annotations

import dataclasses
from contextlib import contextmanager
from typing import Any, TypeVar

from nicegui import ui

####################################################################################################
# Callback disabling (bookkeeping previously mentioned)

# When using nicegui, it's easy to create callback loops looking like this
#
#   value change in client -> callback -> elem.set_value(...) -> callback -> ...
#
# When writing ui components as classes, an easy workaround is to return early in callback methods
# based on a boolean attribute. Hence, the following decorators and context manager.
# TODO: Continue investigations on whether nicegui already provides something similar.

_MethodType = TypeVar("_MethodType")
_hidden_attribute = "__callbacks_disabled"


def callback(method: _MethodType) -> _MethodType:
    def wrapper(self, *args, **kwargs):
        if getattr(self, _hidden_attribute, False):
            return
        return method(self, *args, **kwargs)

    return wrapper


@contextmanager
def disable_callbacks(instance: Any) -> None:
    if getattr(instance, _hidden_attribute, False):
        yield
    else:
        setattr(instance, _hidden_attribute, True)
        yield
        setattr(instance, _hidden_attribute, False)


def disable_callbacks_for_method(method: _MethodType) -> _MethodType:
    def wrapper(self, *args, **kwargs):
        with disable_callbacks(self):
            result = method(self, *args, **kwargs)
        return result

    return wrapper


####################################################################################################
# Example of UI defined as a class


@dataclasses.dataclass
class State:
    a: int
    b: bool


name_to_state = {
    "bob": State(a=55, b=True),
    "alice": State(a=48, b=False),
}


class Example:
    def __init__(self) -> None:
        self.name_picker = ui.select(options=list(name_to_state.keys()), on_change=self.select)
        self.a = ui.number(on_change=self.update)
        self.b = ui.switch(on_change=self.update)

        self.name_picker.set_value("bob")  # will trigger select

    @disable_callbacks_for_method
    def select(self) -> None:
        print("select")
        state = name_to_state[self.name_picker.value]
        self.a.set_value(state.a)
        self.b.set_value(state.b)

    @callback
    def update(self) -> None:
        print("update")
        state = name_to_state[self.name_picker.value]
        state.a = self.a.value
        state.b = self.b.value


Example()

ui.run(reload=False)

@falkoschindler does this "class style" appears like a bad idea to you? Personally, I like having all the layout stuff in the __init__ function and the handlers being methods which can access the nicegui element as attributes. As you can see, having a way to temporarily ask set_value (and similar) to update the client without triggering back the handler on the server would be equivalent and more efficient to my current flag solution.

[thetableman]

@MLaurenceFournier I have a similar scenario and queried this in #4217.

As it stands, there isn't a direct way to do so in the api, so yours is as good as any.