How to use dictionaries as state variables

[EZoni]

Hi,

I have two questions about how to use a dictionary as state variable in a Trame application.

Here's my code:

import numpy as np

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

# toy model
def model(x_array):
    return np.sum(x_array)

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

# declare inputs
state.params = dict()
state.dirty("params")

# initialize inputs
state.params["a"] = 1
state.params["b"] = 2

# initialize output
params_array = np.array(list(state.params.values()))
state.output = model(params_array)

# update output
@state.change("params")
def params_react(params, **kwargs):
    params_array = np.array(list(params.values()))
    print(f"\nparams_array = {params_array}")
    print(f"old output = {state.output}")
    state.output = model(params_array)
    print(f"new output = {state.output}")

with SinglePageLayout(server) as layout:
    with layout.content:
        with v2.VContainer():
            with v2.VRow():
                with v2.VCol():
                    with v2.VCard(style="width: 500px"):
                        with v2.VCardTitle("Parameters"):
                            with v2.VCardText():
                                for key in state.params.keys():
                                    with v2.VSlider(
                                        v_model=(f"params['{key}']",),
                                        label=f"{key}",
                                        min=0,
                                        max=10,
                                        step=1,
                                        hide_details=True,
                                        classes="align-center",
                                    ):
                                        with v2.Template(
                                            v_slot_append=True,
                                            __properties=[("v_slot_append", "v-slot:append")],
                                        ):
                                            v2.VTextField(
                                                v_model=(f"params['{key}']",),
                                                density="compact",
                                                style="width: 70px",
                                                hide_details=True,
                                                single_line=True,
                                            )
            with v2.VRow():
                with v2.VCol():
                    with v2.VCard(style="width: 500px"):
                        with v2.VCardTitle("Output: a + b"):
                            with v2.VCardText():
                                v2.VTextField(
                                    v_model=("output",),
                                    density="compact",
                                    style="width: 70px",
                                    hide_details=True,
                                    #single_line=True,
                                    readonly=True,
                                )

if __name__ == "__main__":
    server.start()

Here's the output that I'm trying to get (with the output text field reactive to the inputs):

In the code I'm simply trying to define two input parameters stored in a state dictionary, state.params, and compute their sum to be stored in a state output, state.output.

The reason for wanting to make this work with a dictionary is that I'm working on a more complex application where I need to read the number, name and initial value of such input parameters from an external file, without knowing those in advance.

Question 1

The first problem I encounter is that these lines

# initialize output
params_array = np.array(list(state.params.values()))
state.output = model(params_array)

produce the following error:

Error: Skip state value for 'output' since its content is not serializable

Do you know what's wrong with defining state.output in this way, given that model simply returns a scalar?

Question 2

The second problem I encounter (when fixing manually the first one by setting, for example, state.output = 3 so that the application does not crash) is that the function params_react does not get triggered by a change (through the slider or the text field box next to it) in the values of either of the two parameters stored in the dictionary state.params. When I define and initialize state.params I call state.dirty("params"). I think I might be missing a call to state.flush() somewhere, but I couldn't figure out where that call should go. Where should I state.flush() in order to detect changes coming from the slider or the text field box next to it?

Thanks a lot in advance!

[jourdain]

The serialization issue is caused by setting a numpy object onto the state. If you convert the result to a Python float it will be fine.

[jourdain]

The other issue is that you are editing a nested variable in the slider which means you are losing the reactivity client side unless you mark params dirty.

[jourdain]

v2.VSlider(
      v_model=(f"params['{key}']",),
      change="flushState('params')",
)

[EZoni]

Thanks a lot! Converting the NumPy scalar to a Python float worked and adding change="flushState('params')" to the VSlider and VTextField elements fixed the reactivity issue.

[EZoni]

Just one more question on this, sorry.

Given that state.output is a read-only output variable, whose value changes due to the user interaction with other editable elements in the GUI (the input parameters), if state.output was a dictionary as well, say a dictionary with just one item state.output["c"] = model(params_array) in this case (as in, c=a+b), how would I tell Trame that the VTextField box showing state.output["c"] (via v_model="output['c']") should react and display the updated value, whenever state.output["c"] changes due to the user interaction with other elements in the GUI (the input parameters)?

So basically are there commands equivalent to state.dirty('params') and change=flushState('params') when I want to obtain reactivity for a nested output variable whose items change because of editing other nested input variables? In other words, something to force push from the server to the client when the server has updated one item of a state nested object due to a change in other state nested variables, as oppose to force pushing from the client to the server (which I think is what flushState does).

I've tried state.dirty('output') and change=flushState('output') (in the output VSlider) but it doesn't seem to work, if I'm not mistaken. I also tried state.flush(), added manually after state.output["c"] is modified, but this also doesn't seem to work, meaning that the VTextField box showing state.output["c"] does not react. So maybe I'm missing something here.

[EZoni]

Some pseudo-code snippets to explain what I wrote:

...
...
# initialize output dictionary (trivial example with only 1 item)
state.output = dict()
state.dirty("output")
state.output["c"] = model(params)
...
...
# react to parameters change (works)
@state.change("params")
def params_react(params, **kwargs):
    state.output["c"] = model(params)
    state.flush()
...
...
# display updated values in output dictionary (doesn't work)
v2.VTextField(
    v_model=("output['c']",),
    readonly=True,
    ...
...
...

[jourdain]

@state.change("params")
def params_react(params, **kwargs):
    state.output["c"] = model(params)
    state.dirty("output")  # https://trame.readthedocs.io/en/latest/core.state.html#trame_server.state.State.dirty
...
...
# display updated values in output dictionary (doesn't work)
v2.VTextField(
    value=("output['c']",),
    readonly=True,
    ...

[EZoni]

Oh, I thought state.dirty(...) could be called only once and would then "mark" the variable through the rest of the code. Thanks!

[EZoni]

Hi @jourdain, one more quick follow-up question, about using VTextField to display numbers.

If I am dealing with numbers that are very large (as opposed to the 1, 2 and 3 shown in the screenshots above), such as, for example, 123456789.123, shall I use something other than VTextField to display them and be able to choose the format with which the numbers are displayed (e.g., scientific notation, exponential, etc.)?

For instance, I would like the number to be displayed as $1.23456789123e8$, or $1.23456789123 \text{x} 10^8$, or even better $1.23e8$, rather than $123456789.123$, which seems to be the only format I get with VTextField. Am I missing out how to customize the format with VTextField or should I use another widget?

Thanks in advance!

[jourdain]

If you set the type="number" and v_model_number=... it should automatically use those scientific notations. But otherwise something more close the JS may be needed to enable automatic formatting.