Embedding animated plot into Angular application (or any other SPA framework)

Community Support
1

Hi guys!
I started using bokeh few weeks ago, it’s great! I like the idea of not dealing with JS for plotting, but it feels a bit like I’m breaking something.
I understand that this maybe is not a designed use case for bokeh and I’m wiling to put some effort (and contribute some code) to make it work.
This is scenario from user’s point of view:
Given there is a form with some input fields
And form is partially generated based on data from a REST endpoint
And there is a submit button
When user clicks on submit button
Then new job gets started on server side
and results are streamed into bokeh data source
and results are streamed through websocket
and presented to user.
Here are some approaches I tried by now:
I considered using bokeh server for serving whole application but I need some REST-like endpoints for building web frontend elements in mentioned form. I didn’t find any nice way for adding new endpoints to bokeh application so I abandoned this approach.
I also considered approach where I use flask for servirng REST content and extending bokeh server (well, subclassing it and using it from flask), but I find this approach too cumbersome and too complicated for maintenance.
Finally, I settled down with using combination of both flask and bokeh serve on backend side.
I see two ways of embedding plots on client side:

  1. using components() from bokeh.embed:
    Using components() resulted with nicely embeded plots but it wasn’t interactive (there was no communication through websocket).

  2. using autoload_server():
    Using autoload_server() it wasn’t so easy to embed and re-execute scripot afterwards because script tag has unique attributes and I have to treat it as part of HTML code, not as pure JavaScript code.
    I managed to run it, but now CSS seems to be broken (toolbar icons are huge, not styled and in the wrong place). Also, websocket connection seems to be opened but I don’t see any plots.
    I have to mention that backend side is probably fine because I can serve it with bokeh serve. It streams and plots new data as expected.
    So, my questions are:

  3. What’s recommended approach for embeding plots into single page application, like Angular based application?

  4. Is it expected that streaming doesn’t work when I embed tags generated with components() function?

  5. Any suggestions how to make this whole thing less hacky? What about merging backend into one process? I don’t like idea of running both flask and bokeh serve, but I can live with that.

Feel free to ask me to provide relevant parts of code. I wasn’t sure what could be of help.

Thank you in advance!
Atlantic777 (Nikola Hardi)

2

Ok, I’m answering to myself but maybe someone will find this useful, too.

It looks like I have to use autoload_server for embedding streaming plots.
Broken CSS was related to this issue: Autoload_static seems to be broken in version 0.12 · Issue #4926 · bokeh/bokeh · GitHub

So, the answers to the questions:

  1. autoload_server() can serve the purpose. When adding a tag node into the DOM, use jQuery to append. Nothing special, just add ("#someting").append((html))
  2. It looks like it’s expected for components() to not work with streaming plots because components() will try to embed the data, too.
  3. Running both bokeh serve from a pythonn process is now a work in progress. I see some solutions on mailing since I posted my question. :slight_smile:

One more tip, I was missing session.loop_until_closed() on the backend side. That’s the reason why even autoload_server() thingy didn’t show any data.

Thanks for the great project, it’s becoming better each day!

Atlantic777 (Nikola Hardi)

среда, 20. јул 2016. 15.13.31 UTC+2, Nikola Hardi је написао/ла:

···

Hi guys!
I started using bokeh few weeks ago, it’s great! I like the idea of not dealing with JS for plotting, but it feels a bit like I’m breaking something.
I understand that this maybe is not a designed use case for bokeh and I’m wiling to put some effort (and contribute some code) to make it work.
This is scenario from user’s point of view:
Given there is a form with some input fields
And form is partially generated based on data from a REST endpoint
And there is a submit button
When user clicks on submit button
Then new job gets started on server side
and results are streamed into bokeh data source
and results are streamed through websocket
and presented to user.
Here are some approaches I tried by now:
I considered using bokeh server for serving whole application but I need some REST-like endpoints for building web frontend elements in mentioned form. I didn’t find any nice way for adding new endpoints to bokeh application so I abandoned this approach.
I also considered approach where I use flask for servirng REST content and extending bokeh server (well, subclassing it and using it from flask), but I find this approach too cumbersome and too complicated for maintenance.
Finally, I settled down with using combination of both flask and bokeh serve on backend side.
I see two ways of embedding plots on client side:

  1. using components() from bokeh.embed:
    Using components() resulted with nicely embeded plots but it wasn’t interactive (there was no communication through websocket).

  2. using autoload_server():
    Using autoload_server() it wasn’t so easy to embed and re-execute scripot afterwards because script tag has unique attributes and I have to treat it as part of HTML code, not as pure JavaScript code.
    I managed to run it, but now CSS seems to be broken (toolbar icons are huge, not styled and in the wrong place). Also, websocket connection seems to be opened but I don’t see any plots.
    I have to mention that backend side is probably fine because I can serve it with bokeh serve. It streams and plots new data as expected.
    So, my questions are:

  3. What’s recommended approach for embeding plots into single page application, like Angular based application?

  4. Is it expected that streaming doesn’t work when I embed tags generated with components() function?

  5. Any suggestions how to make this whole thing less hacky? What about merging backend into one process? I don’t like idea of running both flask and bokeh serve, but I can live with that.

Feel free to ask me to provide relevant parts of code. I wasn’t sure what could be of help.

Thank you in advance!
Atlantic777 (Nikola Hardi)

3

I’m glad you’re getting
there, Nikola.

      Thanks so much for

sharing - this w ill definitely
help others , as others who’ve
helped before have improved Bokeh to where it is now.

                  Really appreciate

contributions like this.

···

On 8/17/16 6:37 AM, Nikola Hardi wrote:

    Ok, I'm answering to myself but maybe someone will

find this useful, too.

    It looks like I have to use autoload_server for embedding

streaming plots.

    Broken CSS was related to this issue:

So, the answers to the questions:

  1. autoload_server() can serve the purpose. When adding a
tag node into the DOM, use jQuery to append. Nothing special, just add $("#someting").append($(html)) 2) It looks like it's expected for components() to not work with streaming plots because components() will try to embed the data, too. 3) Running both bokeh serve from a pythonn process is now a work in progress. I see some solutions on mailing since I posted my question. :) One more tip, I was missing session.loop_until_closed() on the backend side. That's the reason why even autoload_server() thingy didn't show any data. Thanks for the great project, it's becoming better each day! Atlantic777 (Nikola Hardi) среда, 20. јул 2016. 15.13.31 UTC+2, Nikola Hardi је написао/ла:

–

  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/ff7e4bca-15db-493e-b9b7-18f6403c307d%40continuum.io](https://groups.google.com/a/continuum.io/d/msgid/bokeh/ff7e4bca-15db-493e-b9b7-18f6403c307d%40continuum.io?utm_medium=email&utm_source=footer).

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

–
Sarah Bird
Developer, Bokeh

    [
      ![Continuum Analytics](http://docs.continuum.io/_static/img/ContinuumWordmark.png)
    ](http://continuum.io)

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

Hi guys!

        I started using bokeh few weeks ago, it's great! I like the

idea of not dealing with JS for plotting, but it feels a bit
like I’m breaking something.
I understand that this maybe is not a designed use case for
bokeh and I’m wiling to put some effort (and contribute some
code) to make it work.

        This is **scenario** from user's point of view:

        Given there is a form with some input fields
        And form is partially generated based on data from a REST

endpoint
And there is a submit button

        When user clicks on submit button

        Then new job gets started on server side
        and results are streamed into bokeh data source
        and results are streamed through websocket
        and presented to user.



        Here are **some approaches I tried** by now:

        I considered using bokeh server for serving whole

application but I need some REST-like endpoints for building
web frontend elements in mentioned form. I didn’t find any
nice way for adding new endpoints to bokeh application so I
abandoned this approach.
I also considered approach where I use flask for servirng
REST content and extending bokeh server (well, subclassing
it and using it from flask), but I find this approach too
cumbersome and too complicated for maintenance.
Finally, I settled down with using combination of both flask
and bokeh serve on backend side.

        I see two ways of **embedding plots on client side**:

        1) using components() from bokeh.embed:
        Using components() resulted with nicely embeded plots but it

wasn’t interactive (there was no communication through
websocket).

        2) using autoload_server():
        Using autoload_server() it wasn't so easy to embed and

re-execute scripot afterwards because script tag has unique
attributes and I have to treat it as part of HTML code, not
as pure JavaScript code.
I managed to run it, but now CSS seems to be broken (toolbar
icons are huge, not styled and in the wrong place). Also,
websocket connection seems to be opened but I don’t see any
plots.

        I have to mention that backend side is probably fine because

I can serve it with bokeh serve. It streams and plots new
data as expected.

        So, **my questions are**:



        1) What's recommended approach for embeding plots into

single page application, like Angular based application?

        2) Is it expected that streaming doesn't work when I embed

tags generated with components() function?

        3) Any suggestions how to make this whole thing less hacky?

What about merging backend into one process? I don’t like
idea of running both flask and bokeh serve, but I can live
with that.

        Feel free to ask me to provide relevant parts of code. I

wasn’t sure what could be of help.

        Thank you in advance!

        Atlantic777 (Nikola Hardi)