LabelSet's text color not updating properly on changing data source

Community Support
1

Please see my code below. LabelSet’s text_color value is not being updated properly when I update the column data source using a callback. Color of the glyphs and arrow annotation seem to be changing properly. Is there something I’m missing? Thanks.
from bokeh.plotting import show, output_file
from bokeh.models import Plot, Label, Circle, ColumnDataSource, DataRange1d, LinearAxis, CustomJS, LabelSet, Select, Triangle, Arrow
from bokeh.layouts import row, widgetbox

output_file(‘gitex.html’)

xdr = DataRange1d()
ydr = DataRange1d()

p = Plot(x_range=xdr, y_range=ydr, plot_width=300, plot_height=300, background_fill_color=’#F0F0F0’)

source = ColumnDataSource(dict(x=[1.0, 2.0, 3.0], y=[2.0, 3.0, 1.0], text=[‘A’, ‘B’, ‘C’], textcol=[’#FF0000’,’#00FF00’,’#0000FF’]))
orig = ColumnDataSource(dict(x=[1.0, 2.0, 3.0], y=[2.0, 3.0, 1.0], text=[‘A’, ‘B’, ‘C’], textcol=[’#FF0000’,’#00FF00’,’#0000FF’]))

xaxis = LinearAxis()
p.add_layout(xaxis, ‘below’)

yaxis = LinearAxis()
p.add_layout(yaxis, ‘left’)

gly = Circle(x=‘x’, y=‘y’, fill_color=‘textcol’, size=15)
p.add_glyph(source, gly)

p.add_layout(LabelSet(x=‘x’, y=‘y’, text=‘text’, text_color=‘textcol’, source=source))

gly2 = Triangle(x=‘x’, y=‘y’, fill_color=‘textcol’, size=15)
p.add_glyph(source, gly2)

p.add_layout(Arrow(x_start=‘x’, y_start=‘y’, x_end=‘y’, y_end=‘x’, line_width=5, line_color=‘textcol’, source=source))

sel = Select(title=“Options:”, value=“All”, options=[“A”, “B”, “C”, “All”])

arg_dct = dict(
filtered_source=source,
original_source=orig,
element_type_select=sel
)

widget_callback_code = “”"
var filtered_data = filtered_source.get(‘data’);
var original_data = original_source.get(‘data’);

var element_type = element_type_select.get(‘value’);

for (var key in original_data) {
filtered_data[key] = ;
for (var i = 0; i < original_data[key].length; ++i) {
if ((element_type === “All” || original_data[“text”][i] === element_type)) {
filtered_data[key].push(original_data[key][i]);
}
console.log(key)
console.log(filtered_data[key])
}
}
filtered_source.trigger(‘change’);
“”"

generic_callback = CustomJS(args=arg_dct, code=widget_callback_code)
sel.callback = generic_callback

show(row(widgetbox(sel), p))

``

2

Seems like a bug, I'd recommend filing a GH issue with this test code.

There's actually definitely a bug in Arrow, this line:

  https://github.com/bokeh/bokeh/blob/master/bokehjs/src/coffee/models/annotations/arrow.coffee#L22

should be "@set_data" (it's missing the "@" now), but I'm not sure that is also the cause of the LabelSet color not updating offhand.

Thanks,

Bryan

···

On Aug 20, 2016, at 10:25 AM, Harshit Khare <[email protected]> wrote:

from bokeh.plotting import show, output_file
from bokeh.models import Plot, Label, Circle, ColumnDataSource, DataRange1d, LinearAxis, CustomJS, LabelSet, Select, Triangle,Arrow
from bokeh.layouts import row, widgetbox

output_file('gitex.html')

xdr = DataRange1d()
ydr = DataRange1d()

p = Plot(x_range=xdr, y_range=ydr, plot_width=300, plot_height=300, background_fill_color='#F0F0F0')

source = ColumnDataSource(dict(x=[1.0, 2.0, 3.0], y=[2.0, 3.0, 1.0], text=['A', 'B', 'C'], textcol=['#FF0000','#00FF00','#0000FF']))
orig = ColumnDataSource(dict(x=[1.0, 2.0, 3.0], y=[2.0, 3.0, 1.0], text=['A', 'B', 'C'], textcol=['#FF0000','#00FF00','#0000FF']))

xaxis = LinearAxis()
p.add_layout(xaxis, 'below')

yaxis = LinearAxis()
p.add_layout(yaxis, 'left')

gly = Circle(x='x', y='y', fill_color='textcol', size=15)
p.add_glyph(source, gly)

p.add_layout(LabelSet(x='x', y='y', text='text', text_color='textcol', source=source))

gly2 = Triangle(x='x', y='y', fill_color='textcol', size=15)
p.add_glyph(source, gly2)

p.add_layout(Arrow(x_start='x', y_start='y', x_end='y', y_end='x', line_width=5, line_color='textcol', source=source))

sel = Select(title="Options:", value="All", options=["A", "B", "C", "All"])

arg_dct = dict(
    filtered_source=source,
    original_source=orig,
    element_type_select=sel
)

widget_callback_code = """
var filtered_data = filtered_source.get('data');
var original_data = original_source.get('data');

var element_type = element_type_select.get('value');

for (var key in original_data) {
    filtered_data[key] = ;
    for (var i = 0; i < original_data[key].length; ++i) {
        if ((element_type === "All" || original_data["text"][i] === element_type)) {
            filtered_data[key].push(original_data[key][i]);
        }
    console.log(key)
    console.log(filtered_data[key])
    }
}
filtered_source.trigger('change');
"""

generic_callback = CustomJS(args=arg_dct, code=widget_callback_code)
sel.callback = generic_callback

show(row(widgetbox(sel), p))