Rangeslider for holomap of heatmaps

Panel
1

Description

I am creating a holomap of heatmaps and I want to add a rangeslider which controls the color mapper of the colorbar.
I am using panel to create the rangeslider. I already got it to link with the color mapper of the colorbar. However, when I choose a new heatmap through the select button and the new heatmap has a new color range, the rangeslider doens’t update with it. I would like that the rangeslider start and end values are updated when the select button is changed.

Here is a simple example:

Example

import pandas as pd
import holoviews as hv
import panel as pn

x1 = [1,1,2,2]
y1 = [1,2,1,2]
z1 = [1,2,3,4]
df1 = pd.DataFrame(list(zip(x1, y1, z1)),columns =['x', 'y', 'z'])
p1 = hv.HeatMap(df1).opts(colorbar=True)

x2 = [1,1,2,2]
y2 = [1,2,1,2]
z2 = [5,6,7,8]
df2 = pd.DataFrame(list(zip(x2, y2, z2)),columns =['x', 'y', 'z'])
p2 = hv.HeatMap(df2).opts(colorbar=True)

p3 = hv.HoloMap({'1':p1, '2':p2}, kdims='select').opts(framewise=True)

range_widget = pn.widgets.RangeSlider(value=(1, 4), 
                                      start=1, 
                                      end=4, 
                                      name='color range')

code = """
color_mapper.low = source.value[0]
color_mapper.high = source.value[1]
"""
            
range_widget.jslink(p3, code={'value': code})

p = pn.Row(range_widget, p3)

Trial

I tried to add a jscallback on the select button, but I don’t fully know which syntax to use to get it to work. (see the following code).
I think that the “holomap.color_mapper.low” is wrong in the following code, but I don’t know what it should be.

p3_panel = pn.panel(p3)
select_button = p3_panel[1][0][0]
holomap = p3_panel[0]

code = """
range_widget.value[0] = holomap.color_mapper.low
range_widget.value[1] = holomap.color_mapper.high
"""
            
select_button.jscallback(value=code, args={'range_widget': range_widget, 'holomap':holomap})

Notice: I already posted this topic under the label “Holoviews” but I think it might fit better for “Panel”. I didn’t find how you could add a label to an existing topic, therefore I’ve created this new topic.

1 Like