Adding Dynamic Component With Unknown Variables...

[mcaox]

Objectif

I explore the feasibility to migrate a gui from qt to trame.

I have some plugins that define their own version of components /widgets.

These components are mounted at runtime, depending on user actions.

I managed to reproduce this architecture with trame.

Nevertheless as soon as the custom components declare state variables that are not already defined :

• the virtual node (ui.customizable_slot) is not updated in the front

  • the variable has been updated
  • the template sent by ws seems to be ok (The variable is there)
  • but nothing updated on the screen

• it works with a refresh of the page (F5)

Question

• Which trame mechanism does explain this behaviour ?
• How to work around this ? The idea is to keep the principles of unknown variables ?

Front images

no refresh with unknown name

nevertheless correct template in ws response

Source

# -----------------------------------------------------------------------------
# trame
# -----------------------------------------------------------------------------
from trame.app import get_server
from trame.widgets import html
CLIENT_TYPE = "vue3"

if CLIENT_TYPE =="vue2":
    from trame.widgets import vuetify2 as vuetify
    from trame.ui.vuetify2 import SinglePageLayout
else:
    from trame.widgets import vuetify3 as vuetify
    from trame.ui.vuetify3 import SinglePageLayout

server = get_server()
server.client_type = CLIENT_TYPE

state, ui = server.state, server.ui # ui is an instance of VirtualNodeManager

state.demanded_name = "init"
state.my_comp_val_init = 0 # <------------------ COMMENT 1 a known variable (name = init) makes the program work

def my_component(name):
    """Emulate a component that is discovered at runtime"""
    vname = f"my_comp_val_{name}"
    state[vname] = 0
    html.Div(name)
    vuetify.VBtn("{{"+vname+"}}",click=vname+"++")

def udpate_content(**kwargs):
    with ui.customizable_slot as cc:
        cc.clear()
        name = state.demanded_name
        my_component(name)  # <------------------ COMMENT 3 as soons as name != init the front does not refresh. It corresponds to undeclared variable

        vname = f"my_comp_val_{name}"
        state.dirty(vname) # <------------------ COMMENT 2 a call to dirty does not help


# -----------------------------------------------------------------------------
# GUI (Layout)
# -----------------------------------------------------------------------------

# virtualnodes added to layout
with SinglePageLayout(server) as layout:
    with layout.content as content:
        content.clear()
        vuetify.VTextField(v_model="demanded_name")
        vuetify.VBtn("update content",click=udpate_content)
        with html.Div():
            ui.customizable_slot(layout)


# -----------------------------------------------------------------------------
# Main
# -----------------------------------------------------------------------------

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

[jourdain]

So you need to explicitly flush the new state variables before the template (also part of the state) gets flushed. The solution is here and below for convenience.

# -----------------------------------------------------------------------------
# trame
# -----------------------------------------------------------------------------
from trame.app import get_server
from trame.widgets import html

CLIENT_TYPE = "vue3"

if CLIENT_TYPE == "vue2":
    from trame.widgets import vuetify2 as vuetify
    from trame.ui.vuetify2 import SinglePageLayout
else:
    from trame.widgets import vuetify3 as vuetify
    from trame.ui.vuetify3 import SinglePageLayout

server = get_server()
server.client_type = CLIENT_TYPE

state, ui = server.state, server.ui  # ui is an instance of VirtualNodeManager


def my_component(name):
    """Emulate a component that is discovered at runtime"""
    vname = f"my_comp_val_{name}"
    with state:  # Force to update state before template
        state.setdefault(vname, 0)
    html.Div(name)
    vuetify.VBtn("{{" + vname + "}}", click=f"{vname}++")


def udpate_content():
    with ui.customizable_slot.clear():
        my_component(state.demanded_name)


# -----------------------------------------------------------------------------
# GUI (Layout)
# -----------------------------------------------------------------------------

# virtualnodes added to layout
with SinglePageLayout(server) as layout:
    with layout.content as content:
        content.clear()
        vuetify.VTextField(v_model=("demanded_name", "init"))
        vuetify.VBtn("update content", click=udpate_content)
        with html.Div():
            ui.customizable_slot(layout)


# -----------------------------------------------------------------------------
# Main
# -----------------------------------------------------------------------------

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

[mcaox]

Thank you. It is quite direct and easy !

With such an architecture, it would also be mandatory to clean the state as soon as the custom component is dismounted.
With a component designed as a class and a dismount method it would be feasible. Nevertheless this method should delete "its variables" from the state.

When I look api doc or src, I don't see any method that does this.
It may be the purpose of the clean method ? Nevertheless I understand from the explanation that after the clean method the variable is not shared anymore but it remains in the state in the front side.
If so, what would you suggest to delete the variable in both back and frontent ?

[jourdain]

Just set it to None on the server. It won't remove it but it won't take much space on the server/client (just the key).

[mcaox]

Indeed.

Nevertheless this will result in a growth of the state keys. Especially in a desktop app where the socket may stay open a long time.

From a performance point of view it may impacts iterations over these keys (flush,...).

[jourdain]

I don't think it will have any performance impact. The flush only run on a modified set not the full state.

[mcaox]

Thank you
I will put it all together.