PyVista with VTab

[jarrah42]

Hi,

I'm trying to work out how to use PyVista in a Trame application that uses VTabs and would appreciate some pointers. I would like to be able to have a different PyVista visualization in each tab.

The application uses SinglePageLayout as follows:

with SinglePageLayout(self.server) as layout:
    with layout.content:
       with vuetify.VCard(...):
           with vuetify.VTabs(... ):
               vuetify.VTab("...", value=1)
               vuetify.VTab("...", value=2)
            with vuetify.VContainer(fluid=True):
                with vuetify.VWindow(v_model="active_tab"):
                    with vuetify.VWindowItem(value=1, reverse_transition="false", transition="false"):
                        with vuetify.VRow(align="center"):
                            plotter_ui(pl, default_server_rendering=False)
                    with vuetify.VWindowItem(value=2, reverse_transition="false", transition="false"):
                         ....

Unfortunately the PyVista view does not show up. Any help appreciated.

[jourdain]

Usually, that is because the parent component has no height. You can use the classes="fill-height" through out the DOM hierarchy by starting on the VContainer.

[jourdain]

But are you using vuetify 3 or vuetify 2? I though your code in trame was using vuetify 2.

[jarrah42]

We're using Vuetify 3 (trying to at least).

[jourdain]

At least you are looking at the right API, so that is good. So really the next thing is just CSS.

[jarrah42]

The problem seems to be the v-window width not height. At least when I use the web inspector it shows the v-container size as 1200x160 but the v-window size is 0x160. I tried adding:

with vuetify.VRow(align="center", classes="flex-grow-1"):
     with vuetify.VCol(cols="12", classes="fill-height"):

to the VWindowItem (tried at every level also) but it doesn't help.

Also, I'm seeing the following error on the console depending on what sequence of calls I use (but not with the above added). Not sure if it is related.

JS Error => error: TypeError: null is not an object (evaluating 'a[0]')

[jarrah42]

We were able to figure it out (thanks Sergey and @jourdain !):

            with layout.content:
                with vuetify.VTabs(
                        v_model=("active_tab", 0),
                        bg_color="primary",
                        slider_color="red"
                ):
                    vuetify.VTab("Tab 1", value=1)
                    vuetify.VTab("Tab 2", value=2)
                with vuetify.VRow(classes="fill-height"):
                    with vuetify.VCol(cols="12"):
                        with vuetify.VWindow(v_model="active_tab", classes="fill-height"):
                            with vuetify.VWindowItem(value=1, reverse_transition="false",
                                                     classes="fill-height", transition="false"):
                                with vuetify.VSheet(classes="pb-8 fill-height"):
                                    view = plotter_ui(self.pl, server=self.server, add_menu=True, mode="client")
                                    self.server.controller.view_update = view.update
                                    self.server.controller.view_reset_camera = view.reset_camera
                  with vuetify.VWindowItem(value=2, reverse_transition="false", transition="false", classes="fill-height"):
                     pass