Observables

[frankvp11]

Currently we have the observables.py, which isn't documented and only has support for collection like objects (list, dict, set).
Will there / is there a way that we can add support for singular variables also?
I realize that you can easily just make an observable dict with a 'random' key, and your variable as the value, but this feels uninspired. Perhaps that's how a ObservableVariable class (or otherwise named) might be made, but I think that support for this would also be nice.

With that, I have another 'question' / subject matter: State management.
I am interested in being able to keep track of the state of my program in a better way. For example, sometimes I might have a variable that is kept across various classes, where the classes are UI elements like headers, footers, cards, etc. When I change the variable in one place, I'd like to be able to change the variable in all places right away (or have the option to 'not' change it), without explicitly doing it.
With that, I've created two examples, from which I hope to make improvements. One thing to note is, this example is quite simplistic, so you might not see the use in it right away, but when you have more than 5 components each trying to use the same, persistent variable it get's annoying to do it the second way.

Firstly, I'd like to share my 'mock' API for ObservableVariable (or rather ObservableInt):

class ObservableInt:
    def __init__(self, initial_value: int = 0):
        self._value = initial_value
        self._observers = []

    def set(self, value: int):
        self._value = value
        self._notify_observers()

    def get(self) -> int:
        return self._value

    def _notify_observers(self):
        for observer in self._observers:
            observer(self._value)

    def register_observer(self, observer: Callable[[int], None]):
        self._observers.append(observer)

    def unregister_observer(self, observer: Callable[[int], None]):
        self._observers.remove(observer)

Then, we have the first example, which is using the ObservableInt to automatically update all instances of a variable:

class ValueManager:
    def __init__(self, observable_index: ObservableInt):
        self.observable_index = observable_index
        self.observable_index.register_observer(self._update_selected_value)
        self.selected_value = self.observable_index.get()

    def set_value(self, value: int):
        self.observable_index.set(value)

    def _update_selected_value(self, value: int):
        self.selected_value = value

    def dettach(self):
        self.observable_index.unregister_observer(self._update_selected_value)
        self.observable_index = ObservableInt(self.selected_value)
        self.observable_index.register_observer(self._update_selected_value)

    def attach(self, val: bool = True, index: ObservableInt = ObservableInt(0)):
        self.selected_value = index.get()
        self.observable_index = index
        self.observable_index.register_observer(self._update_selected_value)



class FooterComponent:
    def __init__(self, index):
        self.value_manger = ValueManager(index)
        with ui.footer() as self.footer:
            ui.label().bind_text_from(
                self.value_manger, "selected_value", backward=lambda x: f"Value: {x}"
            )


class HeaderComponent:
    def __init__(self, index):
        self.value_manger = ValueManager(index)
        with ui.header() as self.header:
            ui.label().bind_text_from(
                self.value_manger, "selected_value", backward=lambda x: f"Value: {x}"
            )


class IndexPage:
    def __init__(self):
        self.index = ObservableInt(10)
        self.footer = FooterComponent(self.index)
        self.header = HeaderComponent(self.index)

        ui.button(
            "Previous Value",
            on_click=lambda: self.index.set(self.index.get() - 1),
        )
        ui.button(
            "Next Value",
            on_click=lambda: self.index.set(self.index.get() + 1),
        )

        ui.button("Dettach Footer", on_click=self.dettach_footer_observer)

    def dettach_footer_observer(self):
        self.footer.value_manger.dettach()


@ui.page("/")
def index():
    page = IndexPage()


ui.run()

You can try playing around with the page a bit - notice how the header and footer both change when you increment / decrement without me explicitly saying that it should increment/decrement both. Also, you'll notice the "Detach footer" button. This button makes it so that the footer no longer updates when the variable changes.

Then, there is the 'dummy' way of doing this:

class FooterComponent:
    def __init__(self, index):
        self.index = index
        with ui.footer() as self.footer:
            ui.label().bind_text_from(self, "index", backward=lambda x: f"Value: {x}")


class HeaderComponent:
    def __init__(self, index):
        self.index = index
        with ui.header() as self.header:
            ui.label().bind_text_from(self, "index", backward=lambda x: f"Value: {x}")


class IndexPage:
    def __init__(self):
        self.index = 10
        self.footer = FooterComponent(self.index)
        self.header = HeaderComponent(self.index)
        self.increment_footer = True
        self.increment_header = True

        ui.button(
            "Previous Value",
            on_click=lambda: self.handle_change(-1),
        )
        ui.button(
            "Next Value",
            on_click=lambda: self.handle_change(1),
        )

        ui.button("Dettach Footer", on_click=self.dettach_footer_observer)

    def handle_change(self, value: int):
        self.index += value
        if self.increment_footer:
            self.footer.index = self.index
        if self.increment_header:
            self.header.index = self.index

    def dettach_footer_observer(self):
        self.increment_footer = False


@ui.page("/")
def index():
    page = IndexPage()


ui.run()

So what do I want to come from this?
I'd like to know what the best practice is in managing state across various classes using NiceGUI in a way where I'm not explicitly stating it.

[falkoschindler]

Hi @frankvp11,

Yes, observables.py isn't documented, yet, because it was only meant for internal use. We needed an alternative to binding, which is rather inefficient for large collections. But I think it is rather stable and should be added to the documentation.

Implementing something like ObservableVariable seemed tricky to us, because you can't just override methods like we do for observable collections. You either need to use some heavy Python trickery to detect assignments like i = 42, or - like you did - introduce a new API for interacting with primitive types like int, bool, str and so on. Usually binding works just fine in this case though.

Regarding your use case: How important is it to detach components? Without this requirement you could introduce a simple data model and bind UI elements against it.

@dataclass
class State:
    index: int

    def increment_index(self, step: int):
        self.index += step

class UiComponent:
    def __init__(self, name: str, state: State):
        ui.label().bind_text_from(state, "index", backward=lambda x: f"{name}: {x}")

state = State(index=10)
UiComponent('A', state)
UiComponent('B', state)

ui.button("Previous Value", on_click=lambda: state.increment_index(-1))
ui.button("Next Value", on_click=lambda: state.increment_index(1))

Long story short, I'm not sure if we really need more observables, or if something like "unbinding" elements is what you actually need.

[frankvp11]

You raise a good point, which inspired a new idea for my specific situation.
Firstly, I agree that observables might not have been 'the play' here, and the dataclass situation almost works perfectly, it's just that I did need to be able to unbind elements.
However, the solution that I ended up going with was to create a second variable, because there was only one case where I needed to be able to unbind (as of now). So, I just update that variable in the component that needs to be unbinded.