trigger events in q.events

[Far0n]

I think it would be useful to have some information about trigger=True events in q.events. Reason being that it is currently a bit cumbersome to find the source of a "triggered" submit via q.args.

.. or some way to handle "on_change" between q.args.k and q.[client|app|user].k (see comment below)

[Far0n]

Example for when that might come in handy:

@app("/")
async def serve(q: Q):
    if not q.client.initialized:
        q.page['meta'] = ui.meta_card(box='')
        q.client.initialized = True
        q.client.textbox1 = q.client.textbox2 = ""
        await q.page.save()
    
    await handle_on(q)  
        
    q.page['main'] = ui.form_card(
        box='4 2 3 3',
        title='',
        items=[
            ui.textbox(name="textbox1", label="textbox 1", trigger=True, value=q.client.textbox1 or ""),
            ui.textbox(name="textbox2", label="textbox 2", trigger=True, value=q.client.textbox2 or ""),
            ui.text(content=q.client.changed_text or ""),
        ],
    )            
    await q.page.save()
    
#@on("textbox1") # won't trigger when textbox is cleared, because "" is not truthy
@on("textbox1", lambda x: x is not None)
async def ontextbox1(q: Q):
    print("textbox1 changed")
    if q.client.textbox1 != q.args.textbox1:
        q.client.changed_text = f"textbox1 value changed from {q.client.textbox1} to {q.args.textbox1}"
    q.client.textbox1 = q.args.textbox1
            
@on("textbox2", lambda x: x is not None)
async def ontextbox2(q: Q):
    print("textbox2 changed")
    if q.client.textbox2 != q.args.textbox2:
        q.client.changed_text = f"textbox2 value changed from {q.client.textbox2} to {q.args.textbox2}"
    q.client.textbox2 = q.args.textbox2

87YwOOUUWa.mp4

So we need to rewrite this app in order to get the desired behavior (and capture text changes of textbox2). The following would simplify the app a bit and helps with readability imho:

def on_change(arg: str = None, predicate: Optional[Callable] = None, compared_to="client", propagate=False):
    def decorator(on_decorated):
        @on(arg, predicate)
        async def wrapper(q: Q, *args, **kwargs):
            res = None
            async def _propagate():
                val = q.args[arg]
                q.args[arg] = None
                await handle_on(q)
                q.args[arg] = val
            if q.args[arg] == getattr(q, compared_to)[arg]:
                await _propagate()
            else:
                res = await on_decorated(q)
                if propagate:
                    await _propagate()
            return res
        return wrapper
    return decorator

@app("/")
async def serve(q: Q):
    if not q.client.initialized:
        q.page['meta'] = ui.meta_card(box='')
        q.client.initialized = True
        q.client.textbox1 = q.client.textbox2 = ""
        await q.page.save()
    
    await handle_on(q)  
        
    q.page['main'] = ui.form_card(
        box='4 2 3 3',
        title='',
        items=[
            ui.textbox(name="textbox1", label="textbox 1", trigger=True, value=q.client.textbox1 or ""),
            ui.textbox(name="textbox2", label="textbox 2", trigger=True, value=q.client.textbox2 or ""),
            ui.text(content=q.client.changed_text or ""),
        ],
    )            
    await q.page.save()
    
@on_change("textbox1", lambda x: x is not None, compared_to="client")
async def ontextbox1_change(q: Q):
    print("textbox1 changed")
    q.client.changed_text = f"textbox1 value changed from {q.client.textbox1} to {q.args.textbox1}"
    q.client.textbox1 = q.args.textbox1
            
@on_change("textbox2", lambda x: x is not None, compared_to="client")
async def ontextbox2_change(q: Q):
    print("textbox2 changed")
    q.client.changed_text = f"textbox2 value changed from {q.client.textbox2} to {q.args.textbox2}"
    q.client.textbox2 = q.args.textbox2

aQdzgrURAY.mp4

or alternatively with a handle_on_changes_only function:

async def handle_on_changes_only(q, compared_to="client"):
    restore_args = {}
    for k in q.args.__dict__['__kv'].keys():
        if q.args[k] == getattr(q, compared_to)[k]:
            restore_args[k] = q.args[k]
            q.args[k] = None
    await handle_on(q)
    q.args.__dict__['__kv'].update(restore_args)

@app("/")
async def serve(q: Q):
    if not q.client.initialized:
        q.page['meta'] = ui.meta_card(box='')
        q.client.initialized = True
        q.client.textbox1 = q.client.textbox2 = ""
        await q.page.save()
    
    await handle_on_changes_only(q)
        
    q.page['main'] = ui.form_card(
        box='4 2 3 3',
        title='',
        items=[
            ui.textbox(name="textbox1", label="textbox 1", trigger=True, value=q.client.textbox1 or ""),
            ui.textbox(name="textbox2", label="textbox 2", trigger=True, value=q.client.textbox2 or ""),
            ui.text(content=q.client.changed_text or ""),
        ],
    )            
    await q.page.save()
    
@on("textbox1", lambda x: x is not None)
async def ontextbox1_change(q: Q):
    print("textbox1 changed")
    q.client.changed_text = f"textbox1 value changed from {q.client.textbox1} to {q.args.textbox1}"
    q.client.textbox1 = q.args.textbox1
            
@on("textbox2", lambda x: x is not None)
async def ontextbox2_change(q: Q):
    print("textbox2 changed")
    q.client.changed_text = f"textbox2 value changed from {q.client.textbox2} to {q.args.textbox2}"
    q.client.textbox2 = q.args.textbox2

[dulajra]

This is a great workaround. Thanks for sharing!

[lo5]

@Far0n Thanks for the code samples.

In the normal course of operations, if I wanted to identify state changes (deltas) instead of operating on the current state, I'd use q.client to track the last known values of the fields I'm interested in, and compare those fields with the current values.

Your handle_on_changes_only demonstrates exactly that, and it's a compact solution to the problem.

I don't think there's anything we can do at the Wave SDK level for this (since a "call this handler only when this field changes" will end up filling q.client with before values, and not know when to clear (GC) it.

[dulajra]

I am also facing a similar issue due to the same reason.

Event.handling.order.issue.Wave.mov

If the users click on the Project Overview button while the Configuration panel is opened the click is handled by an unexpected handler.

@lo5 Can't we have a solution for this from the SDK side? Can't we include some meta information like the event source of the last event in q state other than setting q.args?

[lo5]

@dulajra Can I get a minimal repro of what's not working? How are the handlers configured? Also, how is it related to trigger=True?

[dulajra]

@lo5 This is not directly related to trigger=True. But for my issues also the reason is the exact same problem that @Far0n is explaining with his sample code.

[dulajra]

@lo5 It's hard to get a minimal repro code because it's in the Model Monitoring app. But I think you will be able understand the issue by looking at these code locations

Expected handler to be called when clicked on Project Overview button - https://github.com/h2oai/wave-model-monitoring/blob/develop/src/views/project_overview.py#L10

But actually, this is called because q.args. bg_monitoring_enabled is not None when the Configuration panel is opened - https://github.com/h2oai/wave-model-monitoring/blob/develop/src/handlers.py#L810

@handler has a higher priority than @on because of how it is configured here - https://github.com/h2oai/wave-model-monitoring/blob/develop/src/app.py#L83

[lo5]

It'll help if I can get an explanation of "what does not work".

The @handler is not part of Wave, so I can't say for sure if that's causing some weird interaction when combined with @on. A minimal repro will help me understand what the actual problem is, otherwise I have to assume that your particular issue happens because of improper/stale client state in conjunction with handler ordering. Hope that's fair.

[dulajra]

@lo5 Hope this code will help.

from h2o_wave import ui, Q, main, app, handle_on, on


@on('#details')
async def details(q: Q):
    q.page['form'] = ui.form_card(
        box='1 1 2 2',
        items=[
            ui.text('Hello!')
        ]
    )


@on('name')
async def handle_name(q: Q):
    q.client.name = q.client.name + '<br>' + q.args.name
    q.page['name'] = ui.form_card(
        box='1 6 5 3',
        items=[
            ui.text(q.client.name)
        ]
    )


@app('/')
async def serve(q: Q):
    if not q.client.name:
        q.client.name = ''

    q.page['form'] = ui.form_card(
        box='1 1 5 5',
        items=[
            ui.textbox('name', trigger=True, value=q.args.name),
            ui.button('#details', 'Go')
        ]
    )

    await handle_on(q)
    await q.page.save()

When there is a text in the textbox the hash router is not working. Instead, the hanlder for textbox is called.

Screen.Recording.2021-08-25.at.19.02.25.mov