Live text update (logs viewer card)

[deadbeef101010]

Hello!

I have a Wave app with a "logs_card" card. The intent of this card is to live load it with log data I get off some application backend websocket or some such means. Currently, I'm using a ui.markdown_card. Here are some questions:

1. Every time I get a new log entry I have to update the "content" of the card (see code below). This feels like it will eventually be a performance bottleneck when the logs get large. Is there a better component to use instead of a ui.markdown_card for this kind of use case?
2. I want to autoscroll the content when a new log is added and stop the autoscroll if the user scrolls up. How can this be done?

Below is my example code I have been testing/playing with.
Thanks.

---

from h2o_wave import main, app, Q, ui
import asyncio

logs = []
global_q = None
lock = asyncio.Lock()
log_number = 0

async def timer_update_logs(interval_seconds):
    global log_number
    while True:
        await asyncio.sleep(interval_seconds)
        await update_logs(f"{log_number:>5}:New log entry")
        log_number = log_number + 1

async def update_logs(log_message):
    async with lock:
        logs.append(log_message)
        log_lines = '\n'.join(logs)
        global_q.page['logs_card'].content = f'```\n{log_lines}\n```'
        global_q.page['logs_card'].title = f'logs ({len(logs):>5})'
        await global_q.page.save()


@app('/')
async def serve(q: Q):
    global global_q
    if not q.client.initialized:
        q.page['logs_card'] = ui.markdown_card(box='1 8 12 4', title='logs', content='', commands = [])
        global_q = q
        asyncio.create_task(timer_update_logs(.55))
        q.client.initialized = True

    await q.page.save()

[mturoci]

Hi @deadbeef101010 (cool name btw).

This seems to be generic enough problem worth solving on Wave level via a dedicated component. API-wise will be very similar to chatbot card that uses buffer as underlying data structure (only deltas are sent instead of full data every time). Please file a feature request.

In the meantime, you can have a look at a hacky implementation of logs feature in our Wave Studio app that uses custom JS.

[deadbeef101010]

Thanks. I will file a feature request.