VTK colormap bug in panel==1.4.0 after exporting to HTML

[edsaac]

Description of expected behavior and the observed behavior

Panel 1.4.0 breaks visualization of VTK colormaps (aka lookup tables) after HTML export. Colorbars are rendered fine, but VTK objects are given random colors. Not sure if the problem comes from upgrading the vtk.js version or something within the panel component itself. Interestingly, the issue does not appear in Jupyter, it is only evident after saving as HTML.

Screenshots or screencasts of the bug in action

Expected	Current

Another example of the problem can be found in the documentation:

Software version info:

No bug	Bug
panel==1.3.8	panel==1.4.0
bokeh==3.3.4	bokeh==3.4.0
pyvista==0.43.4	pyvista==0.43.3

Tested using Python 3.11.8 and 3.9.18

Example code that reproduces the issue:

import pyvista as pv
import panel as pn
pn.extension('vtk')

## Initialize a plotter object
plotter = pv.Plotter(window_size=[400, 400])

## Create a mesh
mesh = pv.Sphere(radius=1.0, center=(0, 0, 0))

## Associate a scalar field to the mesh
mesh["myscalar"] = mesh.points[:, 2]

## Add mesh to the plotter
plotter.add_mesh(
    mesh, scalars="myscalar", cmap="viridis", show_edges=True, edge_color="#001100"
)

## Some final touches
plotter.background_color = "white"
plotter.view_isometric()
plotter.add_title(f"Using panel=={pn.__version__}")

## Pass a plotter to panel
sphere_pan = pn.panel(plotter.ren_win, width=500, orientation_widget=True)

## Export as a standalone HTML
sphere_pan.save("sphere_pan.html")

Browser JavaScript console output:

[index.js:280:18](webpack://vtk.js/Sources/Rendering/Misc/SynchronizableRenderWindow/ObjectManager/index.js)

Error fetching array {"hash":"ce52d598102e2756143cf4f27a0b5911","vtkClass":"vtkDataArray","name":null,"dataType":"Uint8Array","numberOfComponents":4,"size":1024,"ranges":[{"min":30,"max":253,"component":null},{"min":1,"max":231,"component":null},{"min":24,"max":142,"component":null},{"min":255,"max":255,"component":null},{"min":276.95848064285735,"max":428.5918804643877,"component":null}],"registration":"setTable"} 
TypeError: e["get".concat(...)] is not a function

There are no console errors using panel==1.3.8

• I may be interested in making a pull request to address this

[edsaac]

Reverting vtk.js in the exported HTML file to 20.0.1 seems to fix it. Any vtk.js>20.4.2 breaks the colormaps. I am still unsure whether this is a vtk.js or a panel issue.

- <script type="text/javascript" src="https://cdn.holoviz.org/panel/1.4.0/dist/bundled/abstractvtkplot/[email protected]/vtk.js"></script>
+ <script type="text/javascript" src="https://unpkg.com/[email protected]/vtk.js"></script>

[philippjfr]

I am still unsure whether this is a vtk.js or a panel issue.

Probably just incompatible colormap formats. May have to update it in some way.