Use v_show with a Vtk or Pyvista Viewer

[mcaox]

Objectif

I tried to toogle the visibility of a viewer. I wrapped it in a html.Div and use v-if or v-show.

Issues

Nevertheless as soon as the viewer is a child of a div it does not appear anymore. And this with the directive v-if or v-show

In the example below, only CASE 1 and 4 work.

CASE 4 is far from trame API.

What is the fundamental difference with this example where CASE 2 seems to work ?

Source

from trame.app import get_server
from trame.widgets import vtk as vtk_widgets,html

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

from vtkmodules.vtkFiltersSources import vtkSphereSource
from vtkmodules.vtkRenderingCore import (
    vtkRenderer,
    vtkRenderWindow,
    vtkPolyDataMapper,
    vtkActor,
)

CLIENT_TYPE = "vue3"
CASE = 3
if CLIENT_TYPE == "vue2":
    from trame.widgets import vuetify2 as vuetify
    from trame.ui.vuetify2 import SinglePageLayout
else:
    from trame.widgets import vuetify3 as vuetify
    from trame.ui.vuetify3 import SinglePageLayout


class TestViewer:
    def __init__(self, *args, **kwargs) -> None:
    
        self.renderer = vtkRenderer()
        self.renderWindow = vtkRenderWindow()
        self.renderWindow.AddRenderer(self.renderer)
        src = vtkSphereSource()
        mapper = vtkPolyDataMapper()
        mapper.SetInputConnection(src.GetOutputPort())
        actor = vtkActor()
        actor.SetMapper(mapper)
        self.renderer.AddActor(actor)


class App:
    def __init__(self, server=None):
        self.server = get_server(server, client_type=CLIENT_TYPE)
        self.my_viewer = TestViewer()
        self.ui()

    @property
    def ctrl(self):
        return self.server.controller

    @property
    def state(self):
        return self.server.state

    def ui(self):
        with SinglePageLayout(self.server) as layout:
            self.layout = layout
            
            with layout.content:

                if CASE==1:
                    vtk_widgets.VtkLocalView(self.my_viewer.renderWindow)
                elif CASE==2:
                    with html.Div():
                        vtk_widgets.VtkLocalView(self.my_viewer.renderWindow)
                elif CASE==3:
                    with html.Div():
                        with vtk_widgets.VtkLocalView(self.my_viewer.renderWindow):
                            pass
                elif CASE==4:
                    html.Div(
                        (vtk_widgets.VtkLocalView(self.my_viewer.renderWindow),)
                    )
                
                
                
                


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

[jourdain]

Just make sure your Div has a height. By default it will be 0 since Vtk___View will take the size of its parent. You can add classes="fill-height" to your div.