How to add initial panels in trame-dockview

[mr-glt]

Hi all,

I’m trying to modify the trame-dockview example to include a default panel when the app starts.

The provided example demonstrates how to create new panels via a button press, but I’d like one to appear automatically on load.

I tried calling self.add_panel() immediately after creating the DockView, but no panel is rendered when the app loads:

def _build_ui(self):
    with SinglePageLayout(self.server, full_height=True) as self.ui:
        self.ui.root.theme = ("theme === 'Light' ? 'light' : 'dark'",)
        with self.ui.toolbar:
            v3.VSpacer()
            v3.VSelect(
                v_model=("theme", "Abyss"),
                items=("themes", THEMES),
                hide_details=True,
                density="compact",
                style="max-width:200px;",
            )
            v3.VBtn(icon="mdi-plus", click=self.add_panel, density="compact")

        with self.ui.content:
            with v3.VContainer(classes="pa-0 ma-0 fill-height", fluid=True):
                dockview.DockView(
                    ctx_name="dock_view",
                    theme=("theme",),
                )
    self.add_panel() # <- Added this line

If I include that line and then manually click the plus button, a new panel does appear, but it has an index of 2, suggesting that the initial panel was registered internally but never displayed.

Is there a better place or method to add an initial panel when the app starts?

[jourdain]

You need to trigger it on_client_connected. Basically, you need the web UI to be up for the method to work.

[mr-glt]

Thanks for the info. That successfully added a panel on load; however, the VTK window seems to be broken. When the UI loads, a new panel (“Panel 1”) appears, but nothing is displayed on it (we should see the cone in a VTK window on the panel):

If I click the plus button, a second panel appears with the VTK window displayed properly. What’s strange is that if I switch back to Panel 1, the render is now fixed on it:

Here’s my code (I removed the self.add_pane() call from _build_ui() that I had earlier):

def __init__(self, server=None):
    super().__init__(server)
    self._panel_count = 0
    self._build_ui()

    self.server.controller.on_client_connected.add(self._on_client_connected)

    # init vtk.js
    vtk_widgets.VtkView(trame_server=server)

def _on_client_connected(self):
    self.add_panel()

Entire demo.py

[jourdain]

Here is a working version

#!/usr/bin/env -S uv run --script
#
# /// script
# requires-python = ">=3.10"
# dependencies = [
#     "trame",
#     "trame-dockview",
#     "trame-vtk",
#     "trame-vuetify",
# ]
#
# ///
from trame.app import TrameApp
from trame.ui.html import DivLayout
from trame.ui.vuetify3 import SinglePageLayout
from trame.widgets import dockview, html
from trame.widgets import vtk as vtk_widgets
from trame.widgets import vuetify3 as v3
from trame_vtk.modules import common as vtk_js

THEMES = [
    "Abyss",
    "AbyssSpaced",
    "Dark",
    "Dracula",
    "Light",
    "LightSpaced",
    "Replit",
    "VisualStudio",
]


class Demo(TrameApp):
    def __init__(self, server=None):
        super().__init__(server)
        self._panel_count = 0
        self._build_ui()

        self.server.controller.on_client_connected.add(self._on_client_connected)

        # init vtk.js
        self.server.enable_module(vtk_js)

    def _on_client_connected(self):
        self.add_panel()

    def _build_ui(self):
        with SinglePageLayout(self.server, full_height=True) as self.ui:
            self.ui.root.theme = ("theme === 'Light' ? 'light' : 'dark'",)
            with self.ui.toolbar:
                v3.VSpacer()
                v3.VSelect(
                    v_model=("theme", "Abyss"),
                    items=("themes", THEMES),
                    hide_details=True,
                    density="compact",
                    style="max-width:200px;",
                )
                v3.VBtn(icon="mdi-plus", click=self.add_panel, density="compact")

            with self.ui.content:
                with v3.VContainer(classes="pa-0 ma-0 fill-height", fluid=True):
                    dockview.DockView(
                        ctx_name="dock_view",
                        theme=("theme",),
                    )

    def add_panel(self):
        self._panel_count += 1
        panel_id = f"panel_{self._panel_count}"
        title = f"Panel {self._panel_count}"
        template_name = f"dock_{panel_id}"
        resolution_key = f"{template_name}_resolution"

        with DivLayout(self.server, template_name) as layout:
            layout.root.style = "height:100%;position:relative;"
            with vtk_widgets.VtkView() as view:
                with html.Div(
                    style="position:absolute;top:1rem;right:1rem;z-index:1;display:flex;flex-align:center;"
                ):
                    html.Input(
                        type="range",
                        v_model_number=(resolution_key, 6),
                        min=3,
                        max=60,
                        step=1,
                    )
                    html.Button(
                        "Reset",
                        style="padding:0 5px;margin:10px;background:white;",
                        click=view.reset_camera,
                    )

                with vtk_widgets.VtkGeometryRepresentation():
                    vtk_widgets.VtkAlgorithm(
                        vtk_class="vtkConeSource",
                        state=(f"{{ resolution: {resolution_key} }}",),
                    )

        # Make sure the template is pushed on the client before
        # the panel gets added.
        self.state.flush()

        # Trigger method call for adding panel
        self.ctx.dock_view.add_panel(panel_id, title, template_name)


def main():
    app = Demo()
    app.server.start()


if __name__ == "__main__":
    main()