Updating glyph style from JavaScript

Community Support
1

Hi,

I am building a dashboard visualization with bokeh 0.9.2 and a flask server.

Currently I am struggling with updating glyph style attributes from JS callback code.
Say I want to update a segment color or alpha from a JS callback of a slider widget.

I have now this:

segment = Segment(…)
alpha_cb = Callback(args=dict(segment=segment), code="""
new_alpha = cb_obj.get(‘value’)
alpha = segment.get(‘line_alpha’)
alpha[‘value’] = new_alpha
segment.set(‘line_alpha’, alpha)
segment.trigger(‘change’)
“”"
alpha_slider = Slider(…, callback=alpha_cb)

I can see the property getting updated through inspector but the segment alpha (or color, similarly) never gets redrawn with the new styling.

What am I doing wrong ?

Thanks in advance and keep up the good work !
Miguel

2

A few notes:

* trigger should not be needed when setting a Backbone property, that will generate a change event on its own. trigger is only needed when "reaching in" to a data source column and changing values in place without a call to .set

* there may be some missing or broken plumbing on the glyph renderer, can you file a GH issue with a minimal complete example? (Edit: yup looks like it: https://github.com/bokeh/bokeh/blob/master/bokehjs/src/coffee/renderer/glyph/glyph_renderer.coffee#L43 Please still file the GH issue)

* As a workaround, you could put the alpha as a column in the data source, and change that. If you have a large number of segments, that's probably not ideal, but should definitely work until the plumbing is fixed.

Bryan

···

On Aug 5, 2015, at 6:08 AM, [email protected] wrote:

Hi,

I am building a dashboard visualization with bokeh 0.9.2 and a flask server.

Currently I am struggling with updating glyph style attributes from JS callback code.
Say I want to update a segment color or alpha from a JS callback of a slider widget.

I have now this:

segment = Segment(...)
alpha_cb = Callback(args=dict(segment=segment), code="""
    new_alpha = cb_obj.get('value')
    alpha = segment.get('line_alpha')
    alpha['value'] = new_alpha
    segment.set('line_alpha', alpha)
    segment.trigger('change')
"""
alpha_slider = Slider(..., callback=alpha_cb)

I can see the property getting updated through inspector but the segment alpha (or color, similarly) never gets redrawn with the new styling.

What am I doing wrong ?

Thanks in advance and keep up the good work !
Miguel

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/8ce58523-d2b0-4fe2-aef4-0c94198371a1%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

3

Thanks for the feedback.

I opened issue 2682 on this.

Also I would like to give a try to the workaround you propose. As I am using AjaxDataSource, how could I avoid to have to push back to the flask server the new value of the alpha?

Unsure if this is clear :smiley:

Rephrasing: say my AjaxDataSource contains columns x, y and now an empty one named alpha. I would prefer some way that the datasource keeps an empty alpha column that gets overriden locally by some code running in the browser. Is this possible ?

···

Le mercredi 5 août 2015 14:21:15 UTC+2, Bryan Van de ven a écrit :

A few notes:

  • trigger should not be needed when setting a Backbone property, that will generate a change event on its own. trigger is only needed when “reaching in” to a data source column and changing values in place without a call to .set

  • there may be some missing or broken plumbing on the glyph renderer, can you file a GH issue with a minimal complete example? (Edit: yup looks like it: https://github.com/bokeh/bokeh/blob/master/bokehjs/src/coffee/renderer/glyph/glyph_renderer.coffee#L43 Please still file the GH issue)

  • As a workaround, you could put the alpha as a column in the data source, and change that. If you have a large number of segments, that’s probably not ideal, but should definitely work until the plumbing is fixed.

Bryan

On Aug 5, 2015, at 6:08 AM, [email protected] wrote:

Hi,

I am building a dashboard visualization with bokeh 0.9.2 and a flask server.

Currently I am struggling with updating glyph style attributes from JS callback code.

Say I want to update a segment color or alpha from a JS callback of a slider widget.

I have now this:

segment = Segment(…)

alpha_cb = Callback(args=dict(segment=segment), code=“”"

new_alpha = cb_obj.get('value')

alpha = segment.get('line_alpha')

alpha['value'] = new_alpha

segment.set('line_alpha', alpha)

segment.trigger('change')

“”"

alpha_slider = Slider(…, callback=alpha_cb)

I can see the property getting updated through inspector but the segment alpha (or color, similarly) never gets redrawn with the new styling.

What am I doing wrong ?

Thanks in advance and keep up the good work !

Miguel

–
You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/8ce58523-d2b0-4fe2-aef4-0c94198371a1%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

4

I’m trying to answer my own question by using the data attribute of RemoteSource, but it seems it has no effect.

The doc says “Additional data to include directly in this data source object. The
columns provided here are merged with those from the Bokeh server.”

But I can’t see them.

···

Le mercredi 5 août 2015 15:39:11 UTC+2, Miguel Dardenne a écrit :

Also I would like to give a try to the workaround you propose. As I am using AjaxDataSource, how could I avoid to have to push back to the flask server the new value of the alpha?

Unsure if this is clear :smiley:

Rephrasing: say my AjaxDataSource contains columns x, y and now an empty one named alpha. I would prefer some way that the datasource keeps an empty alpha column that gets overriden locally by some code running in the browser. Is this possible ?