pyvista and trame-router not rendering together.

[MouseAndKeyboard]

Hello!

I am trying to build a simple multi-page Trame application. Essentially I want to show a few different 3D models in the one website available at different routes.

To do this I was thinking of using pyvista to actually do the rendering and Trame for the viewer. To render models dependent on route, I found Trame router which, as I understand it, is supposed to allow for conditional rendering of components based on which route the user is at (essentially the same as routers in React or Vue).

I am able to launch / view a single-page pyvista application when not using the router functionality.

Reproducible example:

from trame.app import get_server
from trame.ui.vuetify3 import SinglePageLayout
from trame.ui.router import RouterViewLayout
from trame.widgets import router
from trame.widgets import vuetify3
import pyvista as pv
from pyvista.trame.ui import plotter_ui

server = get_server(client_type="vue3")
state, ctrl = server.state, server.controller

with SinglePageLayout(server, container=True) as layout:
    with layout.content:
        router.RouterView()

with RouterViewLayout(server, "/"):
    pl_home = pv.Plotter(off_screen=True)

    sphere = pv.Sphere()
    pl_home.add_mesh(sphere, color='blue', name='sphere')

    with vuetify3.VContainer(
        fluid=True,
        classes="pa-0 fill-height",
    ):
        view = plotter_ui(pl_home, default_server_rendering=False)
        ctrl.view_update = view.update
        ctrl.view_update_image = view.update_image

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

The above code does not render anything (see attached image)

However, a small modification to the code (basically -- not using the RouterView() ) allows the code to run: Working code (not using router)

from trame.app import get_server
from trame.ui.vuetify3 import SinglePageLayout
from trame.ui.router import RouterViewLayout
from trame.widgets import router
from trame.widgets import vuetify3
import pyvista as pv
from pyvista.trame.ui import plotter_ui

server = get_server(client_type="vue3")
state, ctrl = server.state, server.controller

with SinglePageLayout(server, container=True) as layout:
    with layout.content:
        pl_home = pv.Plotter(off_screen=True)

        sphere = pv.Sphere()
        pl_home.add_mesh(sphere, color='blue', name='sphere')

        with vuetify3.VContainer(
            fluid=True,
            classes="pa-0 fill-height",
        ):
            view = plotter_ui(pl_home, default_server_rendering=False)
            ctrl.view_update = view.update
            ctrl.view_update_image = view.update_image

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

In the above code I just replaced the router.RouterView() with the code I "expected" to be conceptually overridden. This code of course works, but obviously isn't good because I want to use the router:

I suspect my actual misunderstanding is to do with how the render loop actually works. Perhaps I somehow need to "tell" Trame that the component has been reloaded and force the 3D visualisation to be replaced there. Anyway, looking forward to an answer!

Thank you :)

[jourdain]

The issue is with trame.widget.vtk.VtkLocalView. If you use the VtkRemoteView it will work.

You might be able to try server.controller.on_client_connected.add(ctrl.view_update) and see if the state flush happen properly or not.

[MouseAndKeyboard]

When you say that VtkRemoteView will work, I'm assuming you are referring to the option: plotter_ui(pl_home, default_server_rendering=False) When I change this to: plotter_ui(pl_home, mode="server", default_server_rendering=True) I have read the source code for plotter_ui and this ultimately returns a PyVistaRemoteView which inherits from the VtkRemoteView. When I use the server mode option the issue still persists. Additionally, with the server-rendering enabled, I get the following message in my console: python terminal: vtk-remote-view.set_widgets is missing

I can further confirm the following:

with RouterViewLayout(server, "/"):

    with vuetify3.VContainer(
        fluid=True,
        classes="pa-0 fill-height",
    ) as container:
        pl_home = pv.Plotter(off_screen=True)
        sphere = pv.Sphere()
        pl_home.add_mesh(sphere, color='blue', name='sphere')

        view = plotter_ui(pl_home, mode="client", default_server_rendering=True)
        print(view.export_html())

        ctrl.view_update = view.update
        ctrl.view_update_image = view.update_image

The above code crashes at the line print(view.export_html()) with the error: ValueError: No data to write. However, when I use the mode="server" option, it does output some html.

Unfortunately remote view is not ideal for the application since when we experimented it for our usecase it was too slow.

There is no attribute on_client_connected on the server class. However, I just put:

@ctrl.add("on_client_connected")
def client_connects(**args):
    print("client connect")

Into my code and I can confirm that this is being called.

For what it's worth I am using:

trame==3.6.5
trame-client==3.2.5
trame-router==2.3.0
trame-server==3.1.2
trame-vtk==2.8.10
trame-vuetify==2.7.1
...
pyvista==0.44.1

I understand that there are a number of contributors to pyvista, I'm not sure if this is a problem originating in my code, trame, trame-router or pyvista. If it's a problem with pyvista's plotter_ui I can migrate my issue there.

Thank you for your prompt help.

[MouseAndKeyboard]

I should also say, I can confirm that server rendering does work normally, it just also does not work when put inside a RouterViewLayout.

For example, the following code does work:

with SinglePageLayout(server, container=True) as layout:
    with layout.content:
        pl_home = pv.Plotter(off_screen=True)
        sphere = pv.Sphere()
        pl_home.add_mesh(sphere, color='blue', name='sphere')

        view = plotter_ui(pl_home, mode="server", default_server_rendering=True)

        ctrl.view_update = view.update
        ctrl.view_update_image = view.update_image

[jourdain]

Can you show me a picture of the remote rendering not working in the context of the router? I'm asking as I have several apps doing it and they are working fine. Are you sure you don't have a missing reset_camera?

Also why is the remote rendering not good enough? Are you doing it on a server without GPU? What kind of frame rate are you getting?

vtk-remote-view.set_widgets is missing might come from pyvista code base. An issue should be created on PyVista for it.

[MouseAndKeyboard]

Thank you for your comments:

Are you sure you don't have a missing reset_camera?

I have added the line: ctrl.reset_camera = view.reset_camera with no change.

Also why is the remote rendering not good enough?

No GPU on the server, all users are on "good" iPads which we have seen render our visualisations at a good frame rate.

What kind of frame rate are you getting?

I'm not sure how to measure frame rate in Trame. However, running on my (bad) laptop, it's noticeably choppy.

Can you show me a picture of the remote rendering not working in the context of the router?

Sure: I have included 4 things: (1) The output of pip freeze so you can exactly reproduce if needed. (2) A fully copy of my code. (3) My console output after running the python file. (4) A screenshot of remote rendering not functioning.

pip freeze

aiohappyeyeballs==2.4.0
aiohttp==3.10.5
aiosignal==1.3.1
attrs==24.2.0
certifi==2024.8.30
charset-normalizer==3.3.2
contourpy==1.3.0
cycler==0.12.1
fonttools==4.53.1
frozenlist==1.4.1
idna==3.10
kiwisolver==1.4.7
matplotlib==3.9.2
more-itertools==10.5.0
msgpack==1.1.0
multidict==6.1.0
numpy==2.1.1
packaging==24.1
pillow==10.4.0
platformdirs==4.3.6
pooch==1.8.2
pyparsing==3.1.4
python-dateutil==2.9.0.post0
pyvista==0.44.1
requests==2.32.3
scooby==0.10.0
six==1.16.0
trame==3.6.5
trame-client==3.2.5
trame-router==2.3.0
trame-server==3.2.0
trame-vtk==2.8.10
trame-vuetify==2.7.1
typing_extensions==4.12.2
urllib3==2.2.3
vtk==9.3.1
wslink==2.2.1
yarl==1.11.1

Full code copy

from trame.app import get_server
from trame.ui.vuetify3 import SinglePageLayout
from trame.ui.router import RouterViewLayout
from trame.widgets import router
from trame.widgets import vuetify3
import pyvista as pv
from pyvista.trame.ui import plotter_ui

server = get_server(client_type="vue3")
state, ctrl = server.state, server.controller

with SinglePageLayout(server, container=True) as layout:
    with layout.content:
        router.RouterView()

with RouterViewLayout(server, "/"):
    pl_home = pv.Plotter(off_screen=True)
    sphere = pv.Sphere()
    pl_home.add_mesh(sphere, color='blue', name='sphere')

    with vuetify3.VContainer(
        fluid=True,
        classes="pa-0 fill-height",
    ) as container:
        view = plotter_ui(pl_home, mode="server", default_server_rendering=True)
        ctrl.view_update = view.update
        ctrl.view_update_image = view.update_image
        ctrl.reset_camera = view.reset_camera

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

My console output after running the python file

(env) mnef@mnef:~/projects/industry/work/lichen/ghy/Lichen-Viewer$ python3 testapp.py 
vtk-remote-view.set_widgets is missing

App running at:
 - Local:   http://localhost:8080/
 - Network: http://127.0.0.1:8080/

Note that for multi-users you need to use and configure a launcher.
And to prevent your browser from opening, add '--server' to your command line.

A screenshot of remote rendering not functioning

[MouseAndKeyboard]

This issue is not closed, I accidentally thought I fixed the issue (but I did not). @jourdain Would you be able to re-open this issue?

vtk-remote-view.set_widgets is missing might come from pyvista code base. An issue should be created on PyVista for it.

I have also created an issue on the pyvista source for the warning message: https://github.com/pyvista/pyvista/issues/6660

[jourdain]

The issue was that your router view has a height of 0.

The full solution is available here

[MouseAndKeyboard]

Thank you, this has resolved the issue.