Confused about vuetify layout in drawer

[fdinhSG]

I'm trying to build a web app using trame with data viz using pyvista.

What I'm expecting to get:

What I'm actually getting:

And this is my code:

from trame.app import get_server
from trame.ui.vuetify import SinglePageWithDrawerLayout
from trame.widgets import vuetify

import pyvista as pv
from pyvista.trame.ui import plotter_ui

# -----------------------------------------------------------------------------
# Trame initialization
# -----------------------------------------------------------------------------

pv.OFF_SCREEN = True

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

state.trame__title = "My App"
ctrl.on_server_ready.add(ctrl.view_update)


# -----------------------------------------------------------------------------
# Plotting
# -----------------------------------------------------------------------------

pl = pv.Plotter()
mesh_actor = None


def create_mesh(solid):
    global pl, mesh_actor
    if mesh_actor is not None:
        pl.remove_actor(mesh_actor)
    if solid == 'sphere':
        mesh_actor = pl.add_mesh(pv.Sphere())
    elif solid == 'cube':
        mesh_actor = pl.add_mesh(pv.Cube())
    pl.reset_camera()


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


with SinglePageWithDrawerLayout(server) as layout:
    layout.title.set_text(state.trame__title)

    with layout.drawer as drawer:
        with vuetify.VRow():
            btn_save = vuetify.VBtn('SAVE', click=lambda: print('save'), disabled=True)
            btn_load = vuetify.VBtn('LOAD', click=lambda: print('load'))
            btn_solve = vuetify.VBtn('SOLVE', click=lambda: print('solve'), disabled=True)
            btn_snack = vuetify.VBtn("SNACK", click=lambda: vuetify.VSnackbar('hi'))

        with vuetify.VRow():
            vuetify.VSelect(
                label="Choose 3",
                v_model=("Choose3", 0),
                items=(
                    "choose3",
                    [
                        {"text": "choice 1", "value": 0},
                        {"text": "choice 2", "value": 1},
                        {"text": "choice 3", "value": 2},
                    ],
                ),
            )
            vuetify.VSelect(
                label="Choose 2",
                v_model=("Choose2", 0),
                items=(
                    "choose2",
                    [
                        {"text": "choice 1", "value": 0},
                        {"text": "choice 2", "value": 1},
                    ],
                ),
            )
        
        update_bounds = lambda: print(f'Pmin={state.Pmin}, Pmax={state.Pmax}')
        with vuetify.VRow():
            vuetify.VTextField(label='Text', v_model=('Test','test'))
            vuetify.VTextField(label='Min P', v_model=('Pmin', 0), type='number', single_line=True, change=update_bounds) 
            vuetify.VTextField(label='Max P', v_model=('Pmax', 0), type='number', single_line=True, change=update_bounds) 

    with layout.toolbar:
        vuetify.VSpacer()

        vuetify.VBtn("Sphere", click=lambda: create_mesh("sphere"))

        vuetify.VBtn("Cube", click=lambda: create_mesh("cube"))

    with layout.content:
        with vuetify.VContainer(
            fluid=True,
            classes="pa-0 fill-height",
        ):
            # Use PyVista UI template for Plotters
            view = plotter_ui(pl)
            ctrl.view_update = view.update

server.start()

I'm mostly confused about what's going on inside the drawer, in lines 48-84. Specifically:

• Why are all the elements seemingly outside of the borders of the drawer?
• Why aren't the two VSelect stacking horizontally inside the VRow?
• Same for the three VTextField below
• Why is the label applying for the textual VTextField, but not for the two numeric ones?
• How can I make the VSnackbar work? I'd like a popup notification to come out, as explained in this section, but I'm not sure I'm getting the grammar right. The only thing I'm getting is a JS Error => [object Object]

Thank you!

[jourdain]

Welcome to trame!

• First of all Container/Row/Col are supposed to be used together to properly handle their negative margin.
• You can read more about their grid system here.
• If you want to play and figure out the layout you can use Play Vuetify. Technically, you just need to nest your widgets in VCol like in that full example.

Then for the last question, you can not create a detached widget (Snackbar) as a callback. The UI should be created once and rely on the shared state to show/hide/enable UI element.
In short you are looking at doing something like.

with layout:
   vuetify.VBtn("ToggleSnack", click="show_snack = !show_snack")
   vuetify.VSnackbar("Hello world", v_model=("show_snack", False))

That part is documented here.

[fdinhSG]

Thank you for your reply! Adding the VContainer solved my layout issues :)

Do you know why the labels aren't appearing to the numeric VTextField? If I define one as vuetify.VTextField(label='Min P', v_model=('Pmin', 0), type='number', single_line=True, change=update_bounds) the label isn't appearing on top of it like when I'm not using type='number':

Regarding the VSnackbar, do I need to import html in my script? If I do so, the following error message appears: AttributeError: module 'html' has no attribute 'Div'

And thanks again!

[fdinhSG]

@jourdain never mind about the label, I had to remove single_line=True! I'm still kinda puzzled about html.Div though

[jourdain]

What about single_line=True?

If you want to use the html elements, then yes. (from trame.widgets import html)

[jourdain]

BTW, I've edited my response to not have any external dependency by just inlining the text content... Just look at the discussion not your email...

[fdinhSG]

Thank you! Everything is working properly now :)