dynamical update of VTreeview

[azatslyamov]

Hello Trame team!
I want to use Trame for creating a VTreeview and populate it with new items. I tried a simple thing, but can’t get the webpage to update dynamically. New items only appear after page refresh/on_client_exit. There is a load_children function parameter for VTreeView used for the dynamical load of children, but I couldn’t figure out how to use it. My v_model directive is probably also wrong, but it was the only way for me to have items on the webpage. I was hoping you could help me with this issue. Thank you.

from trame.app import get_server
from trame.ui.vuetify import SinglePageWithDrawerLayout
from trame.widgets import vtk, vuetify, html

# -----------------------------------------------------------------------------
# Trame setup
# -----------------------------------------------------------------------------

server = get_server()
state, ctrl = server.state, server.controller

# -----------------------------------------------------------------------------
# Tree View
# -----------------------------------------------------------------------------

import itertools
newid = itertools.count().__next__
itms=( "treeview_items", [{
                "id": newid(),
                "name": "app",
                "children":
                [
                    {"id": newid(),"name": 'Calendar : app', "children":[] },
                ],
            }
            ])

# -----------------------------------------------------------------------------
# GUI callbacks
# -----------------------------------------------------------------------------

@state.change("Value")
def update_value(Value, **kwargs):
    
    if state.treeview_items is None:
        state.treeview_items = itms

    state.treeview_items.append({"id": newid(), "name": 'Calendar : app ' + str(int(Value)) , "children":[] })

# -----------------------------------------------------------------------------
# GUI
# -----------------------------------------------------------------------------

with SinglePageWithDrawerLayout(server) as layout:
    layout.title.set_text("Tree View")

    with layout.toolbar:
        # toolbar components
        vuetify.VSpacer()
        vuetify.VDivider(vertical=True, classes="mx-2")

    with layout.drawer as drawer:
        # drawer components
        drawer.width = 325
        vuetify.VDivider(classes="mb-2")
        vuetify.VSlider(
            v_model=("Value", 1.0),
            min=0,
            max=100,
            step=1,
            label="Value",
            classes="mt-1",
            hide_details=True,
            dense=True,)

        vuetify.VTreeview( 
            v_model=("treeview_items",),
            items=(itms),
            # load_children = update_value,
            )

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

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

[jourdain]

This discussion is basically the same problem but for the client side (JS). Your problem is on the server side which can be achieved by calling that function.

@state.change("Value")
def update_value(Value, **kwargs):
   
   if state.treeview_items is None:
       state.treeview_items = itms

   state.treeview_items.append({"id": newid(), "name": 'Calendar : app ' + str(int(Value)) , "children":[] })
   state.dirty("treeview_items") # <----- Need to let the state know that "treeview_items" has changed internally

[azatslyamov]

@jourdain Thank you for your quick reply.
I added the state.dirty("treeview_items") to the value update function and now I get the updated item appearing on the web page. However, after releasing the slider the item is disappearing and I don't have any reference to the treeview items any longer. Do you know why it is happening? Thank you!

[jourdain]

For me that code is working

from trame.app import get_server
from trame.ui.vuetify import SinglePageWithDrawerLayout
from trame.widgets import vtk, vuetify, html

# -----------------------------------------------------------------------------
# Trame setup
# -----------------------------------------------------------------------------

server = get_server()
state, ctrl = server.state, server.controller

# -----------------------------------------------------------------------------
# Tree View
# -----------------------------------------------------------------------------

import itertools

newid = itertools.count().__next__
itms = (
    "treeview_items",
    [
        {
            "id": newid(),
            "name": "app",
            "children": [
                {"id": newid(), "name": "Calendar : app", "children": []},
            ],
        }
    ],
)

# -----------------------------------------------------------------------------
# GUI callbacks
# -----------------------------------------------------------------------------


@state.change("Value")
def update_value(Value, **kwargs):
    state.treeview_items.append(
        {"id": newid(), "name": "Calendar : app " + str(int(Value)), "children": []}
    )
    state.dirty("treeview_items")


# -----------------------------------------------------------------------------
# GUI
# -----------------------------------------------------------------------------

with SinglePageWithDrawerLayout(server) as layout:
    layout.title.set_text("Tree View")

    with layout.toolbar:
        # toolbar components
        vuetify.VSpacer()
        vuetify.VDivider(vertical=True, classes="mx-2")

    with layout.drawer as drawer:
        # drawer components
        drawer.width = 325
        vuetify.VDivider(classes="mb-2")
        vuetify.VSlider(
            v_model=("Value", 1.0),
            min=0,
            max=100,
            step=1,
            label="Value",
            classes="mt-1",
            hide_details=True,
            dense=True,
        )

        vuetify.VTreeview(
            items=itms,
        )

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

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

[azatslyamov]

@jourdain. Thanks, it looks like v_model=("treeview_items",), was forcing the state variable to be empty.
On another functionality of the VTreeView, I want to selected an item in the treeview and get its id, similar to this example:
I tried adding update_active parameter, but couldn't figure out how to hook getActiveValue method to it such that is has reference to treeview_items and return the selected item id. Please see below. Thank you!

def getActiveValue():
    pass

and the Treeview element

vuetify.VTreeview( 
    activatable=True,
    selectable = True,
    hoverable=True,
    open_on_click = True,
    items=(itms),
    update_active=getActiveValue,
    )

[jourdain]

def on_active_change(active_items):
    print(active_items)

vuetify.VTreeview( 
    activatable=True,
    selectable = True,
    hoverable=True,
    open_on_click = True,
    items=(itms),
    update_active=(on_active_change, "[$event]"),
    )

[jourdain]

The event/triggers are explained here in the API.