Rendering BarChart in vtkRemoteView

Web vtk.js
1

I am working on web client which connects to a paraview server using vtk.js vtkRemoteView class. I use pvbatch with a python script to spawn the paraview server. Right now it connects and displays the render view and I can add and delete sources with RPCalls of proxyManager.

When I try to connect to a BarChartView instead of RenderView by setting the viewId of BarChartView in vtkViewStream I see the view getting blank. There are no images sent to client. I know that the paraview server is setting the active view as the BarChartView since I can save its screenshot.

I am stuck at this point. Which part of my code should I share to make this clearer to understand? Any help would be greatly appreciated.

2

Technically what you are trying to do, should work. But I haven’t tested Chart rendering remotely with the current stack. Something can be wrong, but for that I would need to investigate.

Maybe having a simple trame example just doing chart rendering would speed things up quite a bit.

3

I tried to run this example with the following stack

paraview 5.10.0
python 3.9.12
trame 2.4.2

This worked as expected. I modified it further to display an empty bar chart which also worked well. Here’s the code

activate_this_file = "D:\\work\\chart-view-test\\.pvenv\\Scripts\\activate_this.py"
exec(open(activate_this_file).read(), {'__file__': activate_this_file})

from trame.app import get_server
from trame.widgets import vuetify, paraview
from trame.ui.vuetify import SinglePageLayout

from paraview import simple

# -----------------------------------------------------------------------------
# Trame setup
# -----------------------------------------------------------------------------

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

# -----------------------------------------------------------------------------
# ParaView code
# -----------------------------------------------------------------------------

histogram = simple.Histogram()
representation = simple.Show(histogram)
view = simple.Render()

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

state.trame__title = "Empty Bar Chart"

with SinglePageLayout(server) as layout:
    layout.icon.click = ctrl.view_reset_camera
    layout.title.set_text("Empty Bar Chart")

    with layout.toolbar:
        vuetify.VSpacer()
        vuetify.VDivider(vertical=True, classes="mx-2")

    with layout.content:
        with vuetify.VContainer(fluid=True, classes="pa-0 fill-height"):
            html_view = paraview.VtkRemoteView(view, ref="view")
            ctrl.view_reset_camera = html_view.reset_camera
            ctrl.view_update = html_view.update

# -----------------------------------------------------------------------------
# Main
# -----------------------------------------------------------------------------

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

This does not have the issue I am facing. I’ll try to get an example running with vtk.js + Paraview (the stack I am using) in hopes of reproducing the issue.

4

I tried an example with React + vtk.js + Paraview to display an empty histogram and it worked perfectly. Looks like the issue I am facing is in my application itself. I’ll try investigate further and share insights.

Thanks for the help @Sebastien_Jourdain.

Here’s the example I ran for reference.
react: 18.2.0
vtk.js: 25.15.1
paraview: 5.10.0

pvw.py (2.3 KB)
App.jsx (4.3 KB)

5

Glad it is working and thanks for sharing a trame example.