Interactive arrows do not update

Hello.
This is my first time using Bokeh.
I am attempting to create an interactive plot, in which the user can visualize vector addition. The user enters a number through a spinner and that updates the size and the ending point of the arrow. Here is my code:

source = ColumnDataSource(data=dict(x=[1,0,1], y=[0,1,1]))

plot = figure(width=400, height=400)
plot.circle('x', 'y', source=source, line_width=3, line_alpha=0.6)

arrowSource = ColumnDataSource(data=dict(x_end = [1], y_end = [1]))
plot.add_layout(Arrow(x_start = 0, x_end = 'x_end', y_start = 0, y_end = 0, source = arrowSource ))
plot.add_layout(Arrow(x_start = 0, x_end = 0, y_start = 0, y_end = 'y_end', source = arrowSource ))
plot.add_layout(Arrow(x_start = 0, x_end = 'x_end', y_start = 0, y_end = 'y_end', source = arrowSource))

spinner1 = Spinner(value=1, step = 1, width=80, title="Escalar 1")
spinner2 = Spinner(value=1, step = 1, width=80, title="Escalar 2")

update_tamanho = CustomJS(args=dict(source=source, spinner1=spinner1, spinner2=spinner2), code="""
    source.data['x'] = [spinner1.value, 0, spinner1.value]
    source.data['y'] = [0, spinner2.value, spinner2.value]
    source.change.emit()
""")

spinner2.js_on_change('value', update_tamanho)
spinner1.js_on_change('value', update_tamanho)

update_arrow = CustomJS(args=dict(source=arrowSource, spinner1=spinner1, spinner2=spinner2), code="""
    arrowSource.data['x_end'] = [spinner1.value]
    arrowSource.data['y_end'] = [spinner2.value]
    arrowSource.change.emit()
""")

spinner2.js_on_change('value', update_arrow)
spinner1.js_on_change('value', update_arrow)

show(column(spinner1, spinner2, plot))

The strategy used for the circles worked perfectly. I created a ColumnDataSource for the coordinates of the circles, which are updated through a CostumJS function. However, when I tried to apply the same strategy for the arrows, it didn’t work. The arrows stay stuck on the initial coordinates defined in the arrowSource (ColumnDataSource).
How can I fix this?
Thank you.

Here you say source=arrowSource in your args dict. That means in the JS code you can refer to arrowSource with source. So in the JS code you say arrowSource.data['.... the CustomJS has no idea what arrowSource is. So either change your args dict to arrowSource=arrowSource or replace all arrowSource in the JS code with source .

My recommendation is to always look at the browser console for the produced html → that combined with console.log(something you are interested in looking at/testing/checking) in the JS code allows for infinitely easier debugging.

1 Like

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.