Update glyph color from DataTable

loikisan · May 9, 2020, 9:33pm

Hi guys,

I am really puzzled by the code below. The goal is to plot different quads depending on the rows that are selected in a DataTable. The shapes of the rectangles look perfectly fine, but I can’t understand the behavior of the quad colors that is pretty random — illustrated in some screenshots below.

I would appreciate any enlightenment and work around about this issue.

Cheers.

import bokeh.layouts as bl
import bokeh.models as bm
import bokeh.plotting as bp

data = {"left": [-1, -2, -3], "right": [1, 2, 3], "color": ["red", "green", "blue"]}

source = bm.ColumnDataSource(data)
index_filter = bm.IndexFilter([])
view = bm.CDSView(source=source, filters=[index_filter])

data_table = bm.DataTable(
    source=source,
    height=120,
    columns=[
        bm.TableColumn(field="left", title="Left"),
        bm.TableColumn(field="right", title="Right"),
        bm.TableColumn(field="color", title="Color"),
    ],
)

p = bp.figure(x_range=(-4, 4), y_range=(-1, 1))
r = p.quad(
    bottom=p.y_range.start,
    top=p.y_range.end,
    left="left",
    right="right",
    fill_color="color",
    line_color=None,
    source=source,
    view=view,
)
p.y_range.js_link("start", r.glyph, "bottom")
p.y_range.js_link("end", r.glyph, "top")

callback = bm.CustomJS(
    args={"source": source, "index_filter": index_filter},
    code="""
    index_filter.indices = source.selected.indices;
    source.change.emit();
    """,
)
source.selected.js_on_change("indices", callback)

bp.show(bl.column(data_table, p))

Bryan · May 9, 2020, 11:28pm

I think you are running in to

github.com/bokeh/bokeh

color mapping in legend does not take current view (CDSView) into account and color mapping in circle fill is wrong after subsampling with box_select from another plot

opened 02:07AM - 19 Jun 18 UTC

JenniferShelton

type: bug tag: component: bokehjs

#### ALL software version info (bokeh, python, notebook, OS, browser, any other …relevant packages) bokeh 0.12.16 python 3.6.5 notebook 5.5.0 OSX 10.11.6 browser safari or chrome pandas 0.23.0 #### Description of expected behavior and the observed behavior Here is a small dataset: x_values y_values fruit animal 1 1 apple cat 2 0 pear cat 3 1 apple dog 4 0 apple bird 5 1 kiwi cat I would expect that if I view a subset of the data using CDSView the legend will still match the colors to the unique list of factors. I would also expect that if a plot like plot B (created from a CDSView) was filtered using the box_select tool in plot A the color mapping would adjust and still reflect the correct color. In the example below the legend is only correct when the data is not a CDSView subset of the full ColumnDataSource. The legend is only correct in plots A and C. <img width="618" alt="screen shot 2018-06-18 at 10 02 14 pm" src="https://user-images.githubusercontent.com/14060349/41571893-5696b062-7343-11e8-9059-762cbe100090.png"> Also in the example below if I use box select on figure A then the color mapping shifts in figure B. <img width="636" alt="screen shot 2018-06-18 at 10 02 26 pm" src="https://user-images.githubusercontent.com/14060349/41571901-5927ad4a-7343-11e8-9634-b51f703c073b.png"> #### Complete, minimal, self-contained example code that reproduces the issue ``` from bokeh.plotting import figure from bokeh.models import ColumnDataSource, CDSView, BooleanFilter, CategoricalColorMapper from bokeh.layouts import gridplot from bokeh.io import show data = {'x_values': [1, 2, 3, 4, 5], 'y_values': [1, 0, 1, 0, 1], 'fruit' : ['apple', 'pear', 'apple', 'apple', 'kiwi'], 'animal' : ['cat', 'cat', 'dog', 'bird', 'cat']} color_mapper = CategoricalColorMapper(factors=['apple', 'pear', 'kiwi'], palette=['#ffd92f', '#20b2aa', '#e78ac3']) color_mapper2 = CategoricalColorMapper(factors=['cat', 'dog', 'bird'], palette=['red', 'black', 'yellow']) source = ColumnDataSource(data=data) booleans = [True if val == 1 else False for val in source.data['y_values']] view1 = CDSView(source=source, filters=[BooleanFilter(booleans)]) # Figure to select ColumnDataSource rows from woth box_select tools = ["box_select", "reset"] p1=figure(tools=tools, plot_width=400, plot_height=400, title="A. Correct fill colors and legend") p1.circle("x_values","y_values", legend='fruit', fill_color={'field': 'fruit', 'transform': color_mapper}, size=20, source=source) # Figure that is a CDS view of the source data p=figure(plot_width=400, plot_height=400, title="B. Good fill colors until box_select is used and bad legend") p.circle("x_values", "y_values", size=20, source=source, view=view1, legend='animal', fill_color={'field': 'animal', 'transform': color_mapper2},) # Figure that includes all the source data (no view) p_full=figure(plot_width=400, plot_height=400, title="C. Correct fill colors and legend even after box_select") p_full.circle("x_values", "y_values", size=20, source=source, legend='animal', fill_color={'field': 'animal', 'transform': color_mapper2},) p1.legend.location = 'center_right' p_full.legend.location = 'center_right' show(gridplot([[p1,p], [p_full]])) ``` #### Stack traceback and/or browser JavaScript console output #### Screenshots or screencasts of the bug in action

Unortunately I don’t have a workaround to suggest at present except to re-work without CDSView (e.g. you could set alpha=1 for selected indices and alpha=0 for unselected indices (either with an explicit alpha column or by actually setting a selection and using selected/nonselected glyph properties)

loikisan · May 10, 2020, 8:43am

Thanks for the info. I therefore used a solution with two sources.
Cheers

import bokeh.layouts as bl
import bokeh.models as bm
import bokeh.plotting as bp

data = {"left": [-1, -2, -3], "right": [1, 2, 3], "color": ["red", "green", "blue"]}


source = bm.ColumnDataSource(data)

data_table = bm.DataTable(
    source=source,
    height=120,
    columns=[
        bm.TableColumn(field="left", title="Left"),
        bm.TableColumn(field="right", title="Right"),
        bm.TableColumn(field="color", title="Color"),
    ],
)

quad_data = {"left": [], "right": [], "color": []}
quad_source = bm.ColumnDataSource(quad_data)

p = bp.figure(x_range=(-4, 4), y_range=(-1, 1))
r = p.quad(
    bottom=p.y_range.start,
    top=p.y_range.end,
    left="left",
    right="right",
    fill_color="color",
    line_color=None,
    source=quad_source,
)
p.y_range.js_link("start", r.glyph, "bottom")
p.y_range.js_link("end", r.glyph, "top")

callback = bm.CustomJS(
    args={"source": source, "quad_source": quad_source},
    code="""
    let indices = source.selected.indices;

    for (let field of ["left", "right", "color"]){
        quad_source.data[field] = indices.map(i => source.data[field][i]);
    }
    quad_source.change.emit();
    """,
)
source.selected.js_on_change("indices", callback)

bp.show(bl.column(data_table, p))