Local vs Server Rendering

[Rmelikyan]

Describe the bug, what's wrong, and what you expected.

While running through the Pyvista Trame Tutorials, specifically Control Scalar Arrays

I came across 2 potential bugs or unintended results.

1. Activating the Log Scale button in local rendering mode does not modify the scalar bar whatsoever. I played around with this extensively and am sure that the function is being executed. If I modify the function to instead change the colormap of the Lookup Table, that does make the expected change, but the changes expected with setting the log-scale flag do not occur on local rendering. When you switch to server rendering, the scalar bar location moves and the expected log-scaling is applied (or not) with the button press.
2. Playing with Vue2 vs Vue3 I find that the fancy menu that is present in your base jupyter-trame examples is also present in the browser based trame app only when using Vue2. If I switch to Vue3 (trame.ui.vuetify2 -> trame.ui.vuetify3, trame.widgets.vuetify2 -> trame.widgets.vuetify3, and get_server(client_type='vue2') -> get_server(client_type='vue3')), then this nice toolbar goes away and one can no-longer switch between local/server rendering and the other useful tools.

Steps to reproduce the bug.

Here's a modified version of c_trame_scalars.py originally from here

"""
Control Scalar Array
~~~~~~~~~~~~~~~~~~~~

Extending our simple example to have a dropdown menu to control which
scalar array is used to color the mesh.

original: https://tutorial.pyvista.org/tutorial/09_trame/c_trame_scalars.html
Modified by Rmelikyan: 01/12/24
"""
client_type='vue3'

import pyvista as pv
from pyvista import examples
from pyvista.trame.ui import plotter_ui
from trame.app import get_server
if client_type == 'vue2':
    from trame.ui.vuetify2 import SinglePageLayout
    from trame.widgets import vuetify2 as vuetify
elif client_type == 'vue3':
    from trame.ui.vuetify3 import SinglePageLayout
    from trame.widgets import vuetify3 as vuetify

pv.OFF_SCREEN = True
server = get_server(client_type=client_type)
state, ctrl = server.state, server.controller

mesh = examples.download_antarctica_velocity()

pl = pv.Plotter()
actor = pl.add_mesh(mesh)
pl.view_xy()


@state.change("scalars")
def set_scalars(scalars=mesh.active_scalars_name, **kwargs):
    actor.mapper.array_name = scalars
    actor.mapper.scalar_range = mesh.get_data_range(scalars)
    ctrl.view_update()


@state.change("log_scale")
def set_log_scale(log_scale=False, **kwargs):
    actor.mapper.lookup_table.log_scale = log_scale
    ctrl.view_update()


with SinglePageLayout(server) as layout:
    layout.title.set_text(client_type)
    with layout.toolbar:
        vuetify.VSpacer()
        vuetify.VCheckbox(
            label="Log Scale",
            v_model=("log_scale", False),
            hide_details=True,
            dense=True,
            outlined=True,
        )
        vuetify.VSelect(
            label="Scalars",
            v_model=("scalars", mesh.active_scalars_name),
            items=("array_list", list(mesh.point_data.keys())),
            hide_details=True,
            dense=True,
            outlined=True,
            classes="pt-1 ml-2",
            style="max-width: 250px",
        )

    with layout.content:
        with vuetify.VContainer(
            fluid=True,
            classes="pa-0 fill-height",
        ):
            # Use PyVista UI template for Plotters
            view = plotter_ui(pl, default_server_rendering=False)
            ctrl.view_update = view.update

if client_type == 'vue2':
    server.start(8082)
elif client_type == 'vue3':
    server.start()

Running the script as is starts the trame app in a remote rendering state. You'll see that the log-scale button works at the moment. If you switch to local and try the log-scale button again, you'll see that nothing is modified.

If one changes client_type='vue2' ->client_type='vue3' then you will find that the trame app launches in local rendering mode and without the menu bar that allows for users to switch from local to remote (one would have to the default_server_rendering=True (which I think is the default) flag to the plotter_ui function to use server rendering). And, same as in vue2, while in local rendering mode, the log-scale button does not update the mesh color/scalar values.

Attached screenshots show:

1. vue2 app with menu and remote rendering with log-scale activated and scalar bar horizontal
2. vue2 app with menu and local rendering with log-scale activated (notice that scalar bar is linear scale) and scalar bar vertical
3. vue3 app with NO menu and local rendering with log-scale activated (notice that scalar bar is linear scale) and scalar bar vertical

System Information

--------------------------------------------------------------------------------
  Date: Fri Jan 12 14:47:28 2024 MST

                OS : Darwin
            CPU(s) : 16
           Machine : x86_64
      Architecture : 64bit
               RAM : 64.0 GiB
       Environment : Python
       File system : apfs
        GPU Vendor : ATI Technologies Inc.
      GPU Renderer : AMD Radeon Pro 5500M OpenGL Engine
       GPU Version : 4.1 ATI-4.6.21
  MathText Support : True

  Python 3.9.17 (main, Jun 20 2023, 17:03:39)  [Clang 13.0.0
  (clang-1300.0.29.30)]

           pyvista : 0.43.1
               vtk : 9.3.0
             numpy : 1.23.3
        matplotlib : 3.7.2
            scooby : 0.7.4
             pooch : v1.6.0
            pillow : 9.2.0
           IPython : 8.5.0
        ipywidgets : 8.1.1
             scipy : 1.9.1
              tqdm : 4.64.1
             trame : 3.5.0
      trame_client : 2.14.2
      trame_server : 2.14.0
         trame_vtk : 2.6.3
     trame_vuetify : 2.3.1
      nest_asyncio : 1.5.6
--------------------------------------------------------------------------------

Screenshots

[jourdain]

The vue2/vue3 menu issue has been fixed and merged but not available as a release.

For the log scale, this is an issue with vtk.js. Either it is not implemented yet or we don't pass that flag properly.

[Rmelikyan]

Thanks for the info!

Do you know if the issue with vtk.js is confined to this log-scale issue or should I expect to find other property and mapper updates behaving poorly while on local rendering? Just curious. Server rendering is good for now.

[jourdain]

Local Rendering with vtk.js will be behind the VTK/C++ one. It works well for the mainstream structures/viz we tend to do and need, but only some things have been implemented (categorical color, log scale, multi-blocks...). Those could be added when the need meets funding. In general, we are looking at a more long-term solution that should fix those discrepancies in capabilities. Either way, it will come naturally to trame with no code change on your side.

[Rmelikyan]

Thanks for the info. I'll leave this open in case others run across this and go searching.