Hi,
I’m trying to understand how to get the updated value from a SelectEditor cell in a datatable using a CustomJS and notify the change to the ColumnDataSource immediately (to reflect the change in the plot).
In the example below, if I click on a cell of the column color and update the value, the js_on_change("patching", ...)
is not triggered and the plot is not updated. Only when I click another cell that the callback is called and the plot updated.
How to trigger a js callback and get the plot updated as soon as the value of a SelectEditor cell is changed?
from bokeh.layouts import column
from bokeh.models import (
ColumnDataSource,
CustomJS,
DataTable,
IntEditor,
SelectEditor,
TableColumn,
)
from bokeh.plotting import curdoc, figure
# Data
COLORS = ["blue", "red", "green", "purple", "navy"]
data = dict(
x=[1, 2, 3],
y=[1, 2, 3],
z=[1, 2, 3],
size=[20, 20, 30],
color=["blue", "red", "green"],
)
# Event callback
cjs_patching = CustomJS(
code="""
console.log("patching in table", cb_obj.data);
"""
)
# ColumnDataSource
source = ColumnDataSource(data=data)
source.js_on_change("patching", cjs_patching)
# Plot
plot = figure(title="Plot 1")
plot.xaxis.axis_label = "x"
plot.yaxis.axis_label = "y"
plot.scatter("x", "y", source=source, fill_alpha=0.4, size="size", color="color")
plot.legend.location = "top_left"
# Table
columns = [
TableColumn(field="x", title="x"),
TableColumn(field="y", title="y"),
TableColumn(field="z", title="z"),
TableColumn(field="size", title="size", editor=IntEditor()),
TableColumn(field="color", title="color", editor=SelectEditor(options=COLORS)),
]
data_table = DataTable(
source=source,
columns=columns,
width=400,
editable=True,
auto_edit=True,
)
curdoc().add_root(column(plot, data_table))
Any help would be appreciated. Thanks.