Run javascript callback when plots render

I have a bokeh page that requires a few seconds to load, and I’d like to display a loading animation until the page is ready to go. I’m running my apps behind Flask, and right now I have a CSS animation baked into the template files. I’m looking for a hook that will run a javascript snippet when bokeh starts to populate the document with plots, widgets, etc, so that I can turn my animation off.

Registering my snippet with document.onload makes it run way before the bokeh ui elements appear… so quickly that my animation doesn’t even show up.

Hacking an onload = ... line into the script returned by autoload_server() unfortunately has a similar effect – it runs when the script is loaded, not when it is finished running.

One possibility would be to have a callback on the server side, but as far as I can tell, the only way to propagate info to the browser would be through a model. So I could have a data source with an associated javascript onchange callback to remove the animation, and have the server put some dummy data in the data source. I’m not sure if the timing of this would work, and it also seems very messy.

I’m not familiar with the internals of Bokeh’s rendering process, but it seems like the solution to my problem is to hook into that somehow. Forgive my ignorance, but it seems like there could be something like: curdoc().add_callback("render", function) – does it exist? If not, could it be created without too much trouble? I’d be happy to do the leg work for a PR, but I suspect it would have to be done in coffeescript, and I don’t know coffeescript (I barely know javascript).

I realize I’m being a little loose with my terms – I’m not too picky if I can run my code after, during, or just before elements appear on the page. I’m also not much of a front-end programmer, so apologies for any incorrect terminology.

Thank you! Bokeh is a wonderful tool and I am grateful for the hard work contributors have put in, and for the excellent community support.

Hi,

This is still an open feature request:

  https://github.com/bokeh/bokeh/issues/4272

However, some recent work for a general events callback mechanism that is landing in 0.12.5 should have laid most of the necessary groundwork for this feature to be implemented fairly easily. I have marked it for the 0.12.6 milestone. If you'd like to take a stab at it yourself, we are happy to help answer any questions, etc.

Thanks,

Bryan

···

On Apr 4, 2017, at 19:49, [email protected] wrote:

I have a bokeh page that requires a few seconds to load, and I'd like to display a loading animation until the page is ready to go. I'm running my apps behind Flask, and right now I have a CSS animation baked into the template files. I'm looking for a hook that will run a javascript snippet when bokeh starts to populate the document with plots, widgets, etc, so that I can turn my animation off.

Registering my snippet with document.onload makes it run way before the bokeh ui elements appear... so quickly that my animation doesn't even show up.

Hacking an `onload = ...` line into the script returned by `autoload_server()` unfortunately has a similar effect -- it runs when the script is loaded, not when it is finished running.

One possibility would be to have a callback on the server side, but as far as I can tell, the only way to propagate info to the browser would be through a model. So I could have a data source with an associated javascript onchange callback to remove the animation, and have the server put some dummy data in the data source. I'm not sure if the timing of this would work, and it also seems very messy.

I'm not familiar with the internals of Bokeh's rendering process, but it seems like the solution to my problem is to hook into that somehow. Forgive my ignorance, but it seems like there could be something like: `curdoc().add_callback("render", function)` -- does it exist? If not, could it be created without too much trouble? I'd be happy to do the leg work for a PR, but I suspect it would have to be done in coffeescript, and I don't know coffeescript (I barely know javascript).

I realize I'm being a little loose with my terms -- I'm not too picky if I can run my code after, during, or just before elements appear on the page. I'm also not much of a front-end programmer, so apologies for any incorrect terminology.

Thank you! Bokeh is a wonderful tool and I am grateful for the hard work contributors have put in, and for the excellent community support.

--
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/200adba3-3295-411e-977a-fc6773bb9709%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Thank you for the prompt reply! Somehow I missed most of those discussions in my searching.

···

On Tuesday, April 4, 2017 at 9:21:35 PM UTC-7, Bryan Van de ven wrote:

Hi,

This is still an open feature request:

    [https://github.com/bokeh/bokeh/issues/4272](https://github.com/bokeh/bokeh/issues/4272)

However, some recent work for a general events callback mechanism that is landing in 0.12.5 should have laid most of the necessary groundwork for this feature to be implemented fairly easily. I have marked it for the 0.12.6 milestone. If you’d like to take a stab at it yourself, we are happy to help answer any questions, etc.

Thanks,

Bryan

On Apr 4, 2017, at 19:49, [email protected] wrote:

I have a bokeh page that requires a few seconds to load, and I’d like to display a loading animation until the page is ready to go. I’m running my apps behind Flask, and right now I have a CSS animation baked into the template files. I’m looking for a hook that will run a javascript snippet when bokeh starts to populate the document with plots, widgets, etc, so that I can turn my animation off.

Registering my snippet with document.onload makes it run way before the bokeh ui elements appear… so quickly that my animation doesn’t even show up.

Hacking an onload = ... line into the script returned by autoload_server() unfortunately has a similar effect – it runs when the script is loaded, not when it is finished running.

One possibility would be to have a callback on the server side, but as far as I can tell, the only way to propagate info to the browser would be through a model. So I could have a data source with an associated javascript onchange callback to remove the animation, and have the server put some dummy data in the data source. I’m not sure if the timing of this would work, and it also seems very messy.

I’m not familiar with the internals of Bokeh’s rendering process, but it seems like the solution to my problem is to hook into that somehow. Forgive my ignorance, but it seems like there could be something like: curdoc().add_callback("render", function) – does it exist? If not, could it be created without too much trouble? I’d be happy to do the leg work for a PR, but I suspect it would have to be done in coffeescript, and I don’t know coffeescript (I barely know javascript).

I realize I’m being a little loose with my terms – I’m not too picky if I can run my code after, during, or just before elements appear on the page. I’m also not much of a front-end programmer, so apologies for any incorrect terminology.

Thank you! Bokeh is a wonderful tool and I am grateful for the hard work contributors have put in, and for the excellent community support.


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/200adba3-3295-411e-977a-fc6773bb9709%40continuum.io.

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