Using @state.change with Multiple Fields in Trame

[proy30]

Hello, I’m wondering if the following logic (modified from the cheatsheet) is possible:

@state.change("var_name", "var_name_1")
def change_detected(**kwargs):
    print(f"{state_name} is modified to {state_name_value}")

My goal is to use a single @state.change decorator to identify which field triggered the callback. While it’s certainly possible to use individual decorators for each state, this becomes cumbersome with a large amount of state values which need the same action (printing change or calling a function). A single decorator for this use case would be ideal.

Thank you in advance for any help and apologies if I have overlooked a past discussion of similar question.

[resammc]

This is something that I'm also missing. It would be great to have something like triggered_id in Dash:
https://dash.plotly.com/determining-which-callback-input-changed

[jourdain]

Yes you should be able to do

@state.change(*VAR_NAMES)
def change_detected(**_):
    modified_names = [n for n in VAR_NAMES if state.is_dirty(n)]
    print(f"Triggerd because {modified_names} changed")
    for n in modified_names:
       print(f"{n} = {state[n]}")

[proy30]

Thank you.

I am attempting to make the following work but no success - I am receiving "Triggered because [] changed" on any change.

from trame.app import get_server
from trame.ui.vuetify import SinglePageLayout
from trame.widgets import vuetify2 as vuetify

server = get_server(client_type="vue2")
state, ctrl = server.state, server.controller

state.field1 = 1
state.field2 = 2
state.field3 = 3

VAR_NAMES = ["field1", "field2", "field3"]

@state.change(*VAR_NAMES)
def change_detected(**_):
    modified_names = [n for n in VAR_NAMES if state.is_dirty(n)]
    print(f"Triggerd because {modified_names} changed")
    for n in modified_names:
       print(f"{n} = {state[n]}")

with SinglePageLayout(server) as layout:
    with layout.content:
        with vuetify.VContainer(
            fluid=True,
            classes="d-flex justify-center align-center",
            style="height: 100%;",
        ):
            with vuetify.VCard(style="max-width: 400px;"):
                vuetify.VCardTitle("VCard")
                with vuetify.VCardText():
                    vuetify.VTextField(
                        v_model=("field1",),
                        label="Field 1",
                        outlined=True,
                    )
                    vuetify.VTextField(
                        v_model=("field2",),
                        label="Field 2",
                        outlined=True,
                    )
                    vuetify.VTextField(
                        v_model=("field3",),
                        label="Field 3",
                        outlined=True,
                    )

server.start()

[jourdain]

Ok thanks for providing an example, I'll see if I can provide a work around or an API update to help in that matter.

[proy30]

Thank you very much, I appreciate the time and effort.

[jourdain]

Fixed with trame-server>=3.3 with the following example.

[proy30]

Thank you! On initial launch, I am receiving the following:

Triggered because ['trame__favicon', 'field2', 'trame__client_only', 'trame__title', 'trame__vue_use', 'trame__scripts', 'field1', 'field3', 'trame__mousetrap', 'trame__styles', 'trame__module_scripts', 'trame__busy', 'trame__template_main'] changed
trame__favicon = None
field2 = 2
trame__client_only = ['trame__busy']
trame__title = Trame
trame__vue_use = ['trame_vuetify']
trame__scripts = ['__trame_vuetify/trame-vuetify.umd.min.js']
field1 = 1
field3 = 3
trame__mousetrap = []
trame__styles = ['__trame_vuetify/trame-vuetify.css']
trame__module_scripts = []
trame__busy = 1
trame__template_main = <v-app id="app">
<v-app-bar app>
<v-app-bar-nav-icon  />
<v-toolbar-title >
Trame application
</v-toolbar-title>
</v-app-bar>
<v-main >
<v-container class="d-flex justify-center align-center" style="height: 100%;" fluid>
<v-card style="max-width: 400px;">
<v-card-title >
VCard
</v-card-title>
<v-card-text >
<v-text-field v-model="field1" label="Field 1" outlined />
<v-text-field v-model="field2" label="Field 2" outlined />
<v-text-field v-model="field3" label="Field 3" outlined />
</v-card-text>
</v-card>
</v-container>
</v-main>
<v-footer class="my-0 py-0" app>
<v-progress-circular class="ml-n3 mr-1" color="#04a94d" :indeterminate="!!trame__busy" size="16" width="3" />
<a href="https://kitware.github.io/trame/" class="grey--text lighten-1--text text-caption text-decoration-none" target="_blank">Powered by trame</a>
<v-spacer  />
<v-tooltip top>
<template v-slot:activator="{on, attrs}">
<v-icon v-bind="attrs" v-on="on" class="mr-4" x-small>
mdi-help-circle
</v-icon>
</template>
<pre >
server == 3.3.0
client == 3.5.1
xterm == 0.2.1
matplotlib == 2.0.3
vuetify == 2.7.0
vtk == 2.8.12
trame == 3.7.6
simput == 2.4.3
router == 2.3.0
plotly == 3.0.2
</pre>
</v-tooltip>
<a href="https://www.kitware.com/" class="grey--text lighten-1--text text-caption text-decoration-none" target="_blank">© 2021 Kitware Inc.</a>
</v-footer>
</v-app>

Is this intended on initialization instead of just

field2 = 2
field1 = 1
field3 = 3

? The functionality works cleanly afterward.

[jourdain]

yes, if you want to filter the modified keys by only the one you care just do state.modified_keys & set(VAR_NAMES)

[proy30]

I see now. This works great, thank you!