Large number of bindings will block the main loop

[rodja]

Description

When using a large number of bindings the main loop is blocked significantly. Naturally the actual number depends on the used CPU. On my Apple Silicon M3 MAX the following code blocks the main thread for more than 1 second:

from nicegui import ui

data = {'msg': 'x'}

@ui.page('/')
def index():
    with ui.row().classes('gap-0'):
        for _ in range(100):
            with ui.column().classes('gap-0'):
                for _ in range(10):
                    ui.label().bind_text_from(data, 'msg')

def show_asyncio_debug_infos():
    loop = asyncio.get_running_loop()
    loop.set_debug(True)
    loop.slow_callback_duration = 0.05

app.on_startup(show_asyncio_debug_infos)

ui.run(reconnect_timeout=0)

Which outputs

NiceGUI ready to go on http://localhost:3494, and http://192.168.1.207:3494
WARNING:asyncio:Executing <Task finished name='unnamed task' coro=<page.__call__.<locals>.decorated.<locals>.wait_for_result() done, defined at /Users/rodja/Projects/nicegui/nicegui/page.py:104> result=None created at /Users/rodja/Projects/nicegui/nicegui/background_tasks.py:23> took 0.374 seconds
WARNING:asyncio:Executing <Task finished name='unnamed task' coro=<page.__call__.<locals>.decorated.<locals>.wait_for_result() done, defined at /Users/rodja/Projects/nicegui/nicegui/page.py:104> result=None created at /Users/rodja/Projects/nicegui/nicegui/background_tasks.py:23> took 1.124 seconds

And after some delay also

WARNING:nicegui:binding propagation for 2000 active links took 0.010 s
WARNING:nicegui:binding propagation for 2000 active links took 0.010 s
WARNING:nicegui:binding propagation for 2000 active links took 0.010 s
WARNING:nicegui:binding propagation for 2000 active links took 0.010 s
WARNING:nicegui:binding propagation for 2000 active links took 0.013 s
WARNING:nicegui:binding propagation for 2000 active links took 0.010 s

And when closing the page:

WARNING:asyncio:Executing <Task finished name='unnamed task' coro=<Client.handle_disconnect.<locals>.handle_disconnect() done, defined at /Users/rodja/Projects/nicegui/nicegui/client.py:243> result=None created at /Users/rodja/Projects/nicegui/nicegui/background_tasks.py:23> took 0.071 seconds

[rodja]

By using this ChatGPT optimized version for _propergate in binding.py I'm down to ~700 ms compared to before 1,1 Sec:

def _propagate(source_obj: Any, source_name: str, visited: Optional[Set[int]] = None) -> None:
    if visited is None:
        visited = set()

    source_obj_id = id(source_obj)
    if source_obj_id in visited:
        return
    visited.add(source_obj_id)

    source_attr_exists = _has_attribute(source_obj, source_name)
    source_value = _get_attribute(source_obj, source_name) if source_attr_exists else None

    for _, target_obj, target_name, transform in bindings.get((source_obj_id, source_name), []):
        target_obj_id = id(target_obj)
        if target_obj_id in visited:
            continue

        if source_attr_exists:
            target_value = transform(source_value)
            if not _has_attribute(target_obj, target_name) or _get_attribute(target_obj, target_name) != target_value:
                _set_attribute(target_obj, target_name, target_value)
                _propagate(target_obj, target_name, visited)

And by running each binding on a background_task with an asyncio.sleep(0) at the end to give control back to the main loop I'm down to ~100 ms:

def bind_from(self_obj: Any, self_name: str, other_obj: Any, other_name: str, backward: Callable[[Any], Any]) -> None:
    """Bind the property of one object from the property of another object.

    The binding works one way only, from the second object to the first.

    :param self_obj: The object to bind to.
    :param self_name: The name of the property to bind to.
    :param other_obj: The object to bind from.
    :param other_name: The name of the property to bind from.
    :param backward: A function to apply to the value before applying it.
    """
    async def b():
        bindings[(id(other_obj), other_name)].append((other_obj, self_obj, self_name, backward))
        if (id(other_obj), other_name) not in bindable_properties:
            active_links.append((other_obj, other_name, self_obj, self_name, backward))
        _propagate(other_obj, other_name)
        await asyncio.sleep(0)
    background_tasks.create(b())

[rodja]

Well... instead of using the quite ugly internal creation of background_tasks the user code can also be rewritten to chunk the creation of bindings into smaller parts:

@ui.page('/')
async def index():
    time_label = ui.label('current time')
    ui.timer(0.1, lambda: time_label.set_text(datetime.now().strftime('%H:%M:%S %f')))

    with ui.row().classes('gap-0'):
        for _ in range(100):
            with ui.column().classes('gap-0'):
                await asyncio.sleep(0) # allow other tasks to run on the event loop
                for _ in range(10):
                    ui.label().bind_text_from(data, 'msg')

With this trick, even the _propergation optimization from above is not necessary anymore.

[rodja]

I'll close this issue because it can (and should) be solved individually in the user code.