Cards linked to gittree nodes created by user

[peterjwilson]

Hello Trame wizards 🧙 ,

I currently have an app with a gittree, 3D window and geometry import/creation tools. As geometry is created, the gittree is populated, and a graphical selection of a 3D actor highlights the corresponding gittree node. Conversely, selecting the gittree node of a 3D actor highlights it in the 3D viewer. The active_ui name and actor name are identical and unique for each actor. Next step is to have a properties card of each actor also appear when it is selected, however, the created property cards persist after changing ui selection. A small example is below, any suggestions would be greatly appreciated.

from trame.app import get_server
from trame.ui.vuetify import SinglePageLayout
from trame.widgets import vtk, vuetify, trame

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




def actives_change(ids):
    if len(ids) > 0:
        active_id = ids[0]
        for node in state.pipeline:
            if node["id"] == active_id:
                state.active_ui = node["name"]


def import_sphere():
    id = len(state.pipeline)+1
    sphere_name = "sphere" + str(id)
    state.pipeline.append(
        {"id": str(id), "parent": str(id-1), "visible": 1, "name": sphere_name},
        )
    state.dirty("pipeline")
    layout.content.add_child(sphere_card(sphere_name,sphere_name))
    layout.flush_content()
    state.active_ui = sphere_name



def import_box():
    id = len(state.pipeline)+1
    box_name = "box" + str(id)
    state.pipeline.append(
        {"id": str(id), "parent": str(id-1), "visible": 1, "name": box_name},
        )
    state.dirty("pipeline")
    layout.content.add_child(sphere_card(box_name,box_name))
    layout.flush_content()
    state.active_ui = box_name




def ui_card(title, ui_name):
    with vuetify.VCard(v_show=f"active_ui == '{ui_name}'"):
        vuetify.VCardTitle(
            title,
            classes="grey lighten-1 py-1 grey--text text--darken-3",
            style="user-select: none; cursor: pointer",
            hide_details=True,
            dense=True,
        )
        content = vuetify.VCardText(classes="py-2")
    return content


def mesh_card():
    with ui_card(title="Mesh", ui_name="Mesh"):
        vuetify.VBtn("Mesh card data")


def sphere_card(card_title : str, geometry_name : str):
    primitive_card = ui_card(title=card_title, ui_name=geometry_name)
    with primitive_card:
        vuetify.VBtn(geometry_name + "-specific data")
        vuetify.VBtn("general sphere data")
    return primitive_card


def box_card(card_title : str, geometry_name : str):
    primitive_card = ui_card(title=card_title, ui_name=geometry_name)
    with primitive_card:
        vuetify.VBtn(geometry_name + "-specific data")
        vuetify.VBtn("general box data")
    return primitive_card




with SinglePageLayout(server) as layout:
    with layout.content:
        vuetify.VBtn("Import sphere",click=import_sphere)
        vuetify.VBtn("Import box",click=import_box)
        vuetify.VDivider(classes="mb-2")
        trame.GitTree(
            sources=(
                "pipeline",
            [
                {"id": "1", "parent": "0", "visible": 1, "name": "Mesh"},
            ],
        ),
        actives_change=(actives_change, "[$event]"),
    )
        vuetify.VDivider(classes="mb-2")
        mesh_card()



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

[jourdain]

The UI should be generated once at startup, and you should let the JS code decide which piece should be visible or templated on.

In your example you never call box_card or sphere_card. Therefore they are not part of your UI.

[jourdain]

Another way to debug your setup for understanding why the current mesh card does not disapear is to do 2 things.

1. Display the value of active_ui in your ui. (html.Div("{{ active_ui }}"))
2. Validate the generated vue template by printing it.

with SinglePageLayout(server) as layout:
    ....
    print(layout)

[peterjwilson]

Thanks for the pointer and your patience @jourdain , I managed to get things working! Not sure if it's the most elegant, but I just added state.active_card which equals state.active_ui for "usual" gittree nodes and the geometry type for primitive geometry nodes.

from trame.app import get_server
from trame.ui.vuetify import SinglePageLayout
from trame.widgets import vtk, vuetify, trame

server = get_server(client_type = "vue2")
state, ctrl, ui = server.state, server.controller, server.ui
state.setdefault("active_ui", None)
state.setdefault("active_card", None)
state.setdefault("active_primitive", None)
state.actors = []
state.primitive_types = ["sphere","box"]


def add_actor(actor,actor_name:str,actor_type:str):
    if actor_type in state.primitive_types:
        state.actors.append({"name": actor_name, "object": actor, "type":actor_type})


def actives_change(ids):
    if len(ids) > 0:
        active_id = ids[0]
        for node in state.pipeline:
            if node["id"] == active_id:
                # typical node, where ui name = card name
                name = node["name"]
                state.active_ui = name
                state.active_card = name
                state.active_primitive = None

                # geometry node, where ui name != card name
                for actor in state.actors:
                    if actor["name"] == name and actor["type"] in state.primitive_types:
                        state.active_primitive = name
                        state.active_card = actor["type"] + "_primitive_card" # call a sphere or box card
                        break


def import_sphere():
    id = len(state.pipeline)+1
    sphere_name = "sphere" + str(id)
    add_actor("dummy_actor_object",sphere_name,"sphere")
    state.pipeline.append({"id": str(id), "parent": str(id-1), "visible": 1, "name": sphere_name})
    state.dirty("pipeline")
    actives_change([str(id)])


def import_box():
    id = len(state.pipeline)+1
    box_name = "box" + str(id)
    add_actor("dummy_actor_object",box_name,"box")
    state.pipeline.append({"id": str(id), "parent": str(id-1), "visible": 1, "name": box_name})
    state.dirty("pipeline")
    actives_change([str(id)])


def ui_card(title, card_name):
    with vuetify.VCard(v_show=f"active_card == '{card_name}'"):
        vuetify.VCardTitle(
            title,
            classes="grey lighten-1 py-1 grey--text text--darken-3",
            style="user-select: none; cursor: pointer",
            hide_details=True,
            dense=True,
        )
        content = vuetify.VCardText(classes="py-2")
    return content


# typical card where card ui_name = gittree node name
def mesh_card():
    with ui_card(title="Mesh", card_name="Mesh"):
        vuetify.VBtn("Mesh card data")


# generic sphere card where card ui_name != gittree node name
def sphere_card():
    with ui_card("{{active_primitive}}","sphere_primitive_card"):
        vuetify.VListItem("general sphere data",classes="text-h6")
        vuetify.VListItem("some data")
        vuetify.VListItem("{{active_primitive}} specific data",classes="text-h6")
        vuetify.VListItem("some more data")


# generic box card where card ui_name != gittree node name
def box_card():
    with ui_card("{{active_primitive}}","box_primitive_card"):
        vuetify.VListItem("general box data",classes="text-h6")
        vuetify.VListItem("some data")
        vuetify.VListItem("{{active_primitive}} specific data",classes="text-h6")
        vuetify.VListItem("some more data")


with SinglePageLayout(server) as layout:
    with layout.content:
        vuetify.VBtn("Import sphere",click=import_sphere)
        vuetify.VBtn("Import box",click=import_box)
        vuetify.VDivider(classes="mb-2")
        trame.GitTree(
            sources=(
                "pipeline",
            [
                {"id": "1", "parent": "0", "visible": 1, "name": "Mesh"},
            ],
        ),
        actives_change=(actives_change, "[$event]"),
    )
        vuetify.VDivider(classes="mb-2")
        mesh_card()
        sphere_card()
        box_card()


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