[Python] Bokeh Colour Sliders Example Rework

Overview of Problem

I'm trying to adapt the Bokeh Colour Slider example found here: https://docs.bokeh.org/en/latest/docs/examples/interaction/js_callbacks/color_sliders.html . The idea is to have two sliders: 'Run Hours' and 'Month'. Changing the values in the slider should display a value similar to the colour hex code in the bokeh gallery example but it should be a Factor entry in the below dataframe.

Dataframe

The underlying dataframe is of the form:



'Factor' Selection

The factor value that should be displayed in the bokeh rectangle for slider values month = M and Run Hours = R should be the value in the Factor column of df where df.Month == M and the largest number of run hours such that df['Runs Hours'] <= R. For example when M=2 and R = 55, the output Factor should be 1.5504635 because 53.8 is the largest number of Run Hours which is less than R=55.

Year Month Import Runs Hours Factor
2024 2 40.0398 41.0 1.0239811
2023 2 37.1329 44.6 1.2010879
2022 2 34.6993 53.8 1.5504635
2021 2 31.9609 73.6 2.3028137

The script so far

I currently have the below which isn't quite right - it produces the two sliders and rectangle/text almost as expected, except it shows all of the Factor values (i.e. the complete column as comma separated lines), and changing the sliders doesn't do anything. If the sliders were at M=2 and R=55, I would expect to see 1.5504635 in the box beside the sliders.

source = ColumnDataSource(data = {'Year':[tuple(df.Year)], 'Month':[tuple(df.Month)], 'Rhours':[tuple(df['Runs Hours'])], 'Factor':[tuple(df.Factor)]})

# create first plot, as a rect() glyph and centered text label, with fill and text color taken from source
p = figure(x_range=(-8, 8), y_range=(-4, 4), width=400, height=300, title='Move sliders to change', tools='')

p.rect(0, 0, width=18, height=10, fill_color=f'{ff.Forsa_Blue[0]}', line_color = 'black', source=source)

p.text(0, 0, text='Factor', text_color='Black', alpha=0.6667, text_font_size='18px', text_baseline='middle', text_align='center', source=source)

rhours = Slider(title = "Run Hours", start = 0, end = 150, value = 30, step = 1)
month = Slider(title = "Month", start = 1, end = 12, value = 1, step = 1)

callback = CustomJS(args=dict(source=source, rhours=rhours, month=month), code="""

const R = rhours.value | 0
const M = month.value | 0

// Utility functions to perform dataframe-like operations:
const select = (source, field) => source.map(row => row[field]);
const max = (source, field) => Math.max(...select(source, field));

function getFactorForMaxRunHours(source, month, rhours) {
source = source.filter(row => row.Month === M && row.RunHours <= R);
const maxRunHours = max(source, "RunHours");
return source.find(row => row.RunHours === maxRunHours)?.Factor;
}

const Factor = getFactorForMaxRunHours(source, month, rhours)

source.data = {Factor:[Factor]}

""")

rhours.js_on_change('value', callback)
month.js_on_change('value', callback)

show(row([p, column([rhours, month])]))


Could anybody please advise what I'm doing wrong?

Continue reading...