[SOLVED] Bokeh CustomJS Passing Array of Glyphs

Bokeh CustomJS Passing Array of Glyphs

I am trying to create multiple figures that sow various info about countries. On top of that, I am trying to have set of buttons that would hide plots of countries across all figures. When using CustomJS callback, I am trying to pass ColumnDataSource with individual countries as columns with respective glyphs in the column. The ColumnDataSource looks like below:

{'index': array([0, 1], dtype=int64), 'US': array([GlyphRenderer(id='1038', ...), GlyphRenderer(id='1157', ...)], dtype=object), 'United Arab Emirates': array([nan, nan]), 'United Kingdom': array([GlyphRenderer(id='1079', ...), GlyphRenderer(id='1198', ...)]}

I then try to pass into CustomJS like below:

callback = CustomJS(args={'source':source}, code="""..."""

However, console in in google chrome shows following error. I am struggling to understand if it is not iterable, because I have objects in each column, or because columns are strings?

Uncaught (in promise) TypeError: (intermediate value)(intermediate value)(intermediate value) is not iterable

When I pass a column directly, it works as I would expect. However, I am trying to put in many countries.

callback = CustomJS(args={'source':source.data['US']}, code="""..."""

Thank you very much, Tomas

Solution

As pointed in comments, I could've passed dictionaries. Clearly true and I was overthinking the problem by passing ColumnDataSource.

The problem was solved by looping thru all glyphs as in an example below that makes all glyphs invisible.

callback = CustomJS(args={'source':one_line, 'countries': all_countries}, code="""
var arr_glyphs = source;
var arr_countries = countries;
var index;
var index_country;                     

for (index = 0; index < arr_countries.length; ++index) {
    for (index_country = 0; index_country < arr_countries[index].length; ++index_country) {
        arr_glyphs[arr_countries[index]][index_country].visible = false;
    };
};""")

Thank you for your help!