Unable to Get selected.js_on_change to Fire; Better Way to Get Padding?

Community Support
1

I am attempting to modify the range_tool.py ( range_tool.py — Bokeh 2.4.2 Documentation ) example from the Bokeh gallery so that when the user chooses a range with the Select figure, the p figure displays a wider, instead of the exact, range selected. The p figure uses a Range1d object for x_range, and it seems I cannot substitute a DataRange1d object ( which has padding ) in its place.

So, I am trying to roll my own functionality by having a range selection in the Select.line change the x_range of the p.line with up to 10% padding. However, I cannot figure out why my callback is not firing when I drag in the Select figure. My two figures display and I can drag a selection box in both, but when I do so in the Select figure, my very simple callback does not appear to fire.

Questions:

  1. What am I doing wrong with the callback in this case ( code below )?
  2. Is there a better/simple way to get the padding functionality I am looking for, rather than having a change in the select_source.selected indices of the “Range Tool” graph change the range ( with additional padding ) of the “Display” graph?
from bokeh.io import show
from bokeh.layouts import column
from bokeh.models import ColumnDataSource, Range1d, CustomJS
from bokeh.plotting import figure
import pandas as pd

df = pd.read_csv('input_data.csv', usecols=[0, 3])
df_len = len(df)
quarter = df_len // 4
start = df['Date'][quarter]
end = df['Date'][(int(quarter * 3))]
x_range=Range1d(start=start, end=end)

source = ColumnDataSource(df)
select_source = ColumnDataSource(df)

p = figure(plot_height=400, plot_width=900,
           x_axis_location="above",
           background_fill_color="#efefef", x_range=x_range,
           tools=['wheel_zoom', 'box_zoom', 'reset', 'xpan', 'xbox_select'],
           toolbar_location="below", active_drag="xbox_select")

p.line('Date', 'VDD_APC0_Sense', selection_color="red", source=source)
p.yaxis.axis_label = 'Power(W)'

select = figure(title="Drag the middle and edges of the selection box to change the range above",
                plot_height=130, plot_width=800, y_range=p.y_range,
                x_axis_type="datetime", y_axis_type=None,
                 background_fill_color="#efefef",
                tools=['wheel_zoom', 'box_zoom', 'reset', 'xpan', 'xbox_select'],
                toolbar_location="below", active_drag="xbox_select")

select.line('Date', 'VDD_APC0_Sense', source=select_source, selection_color="orange")
select.ygrid.grid_line_color = None

select_source.selected.js_on_change('indices', CustomJS(args=dict(source=source, select_source=select_source), code="""
        alert('A');
    """))

show(column(p, select))