log.push() not working

[smojef]

I don't understand why log.push() is not working:

from nicegui import ui

def process():
    with ui_container:
        ui.label("Begin process...")
        log = ui.log() 
        for i in range(10):
            log.push(f"process {i}")  # This does not work
        ui.label("End process")

ui.label('Testing process')
ui.button("Process", on_click=process).props('icon=start')
ui_container = ui.column()
    
ui.run(port=8888)

After pressing the button, the labels are shown before and after, and the log is shown. But the log entries are not.

[falkoschindler]

The ui.log component has been designed to solve the following problem: The app generates various messages throughout its runtime. The client should be able to see a current history of messages without retransmitting the whole history again and again. (The latter would be the case if we would simply append lines in a label.)

Because we had applications in mind, where only the most recent messages are of any use, we decided not to hold any state in Python but only in JavaScript on the client side. So if a client connects, the log is empty at first and gets filled line by line as new messages get pushed into the log.

In your example a new log is created. And before it gets transmitted to the client, multiple lines are pushed. But since the element did not reach the client yet, the lines get lost.

We should probably rethink this design. We could easily keep a copy of the last max_lines lines on the server. When sending a new log element to a client or sending a log element to a new client, these lines should be included.

[smojef]

I actually found a workaround:

import asyncio
from nicegui import ui

async def process():
    with ui_container:
        ui.label("Begin process...")
        log = ui.log() 
        await asyncio.sleep(0.01)  # This actually waits for the log to be created
        for i in range(10):
            log.push(f"process {i}")  # So this works now
        ui.label("End process")

ui.label('Testing process')
ui.button("Process", on_click=process).props('icon=start')
ui_container = ui.column()
    
ui.run()

[falkoschindler]

I created PR #292 to improve ui.log.

[rodja]

I just merged your branch!