Component for bi-directional communication with bokeh

Show the Community!
#1

I was working on a ML project with streamlit and I absolutely love it ! But one major drawback I found was that there’s literally no possible way/workaround to have bi-directional communication with bokeh graphs. It becomes really a bottleneck when you are dealing with geo-data and you want the user to draw a polygon or something and process the selected data. I came across this issue last night and have managed to put together a component that does just that, its far from optimal solution and just a workaround but it sure does the job. I hope someone finds it useful :slight_smile:

demo
demo1280×686 2.68 MB

Checkout the code example. And give the repo a star if you find it nice. :smile: https://github.com/ash2shukla/streamlit-bokeh-events

EDIT: changed repo link, package name to streamlit-bokeh-events, added debounce for event dispatch, added example.

5 Likes
Streamlit Components - Community Tracker
#2

Hey @ash2shukla, welcome to the community ! Short workaround code that does the job is my jam :llama: and you took the extra time to publish it that’s awesome.

This looks great :smiley: I will definitely look into this ! Especially the bokeh.model.CustomJS part, I use a similar trick in my echarts component to pass JS code as string, and wonder about the difference between the CustomJS and my JsCode.

BTW, I think you should remove the event listeners on the componentDidUnmount just in case someone regularly recreates Bokeh Components.

I’ve quickly written on doing this for Plotly.js and I’d love to have a written comparison somewhere between JS events between Plotly.js and Bokeh.js to help people write their components as fast as you did.

Fanilo

#3

wonder about the difference between the CustomJS and my JsCode .

I think with CustomJS we can pass bokeh data sources as arguments and play with them more easily in JS code. I am not sure though. I am by no means a JS expert :slight_smile:

BTW, I think you should remove the event listeners on the componentDidUnmount just in case someone regularly recreates Bokeh Components.

Yes, definitely will do it.

I’d love to have a written comparison somewhere between JS events between Plotly.js and Bokeh.js

That’s a great idea ! I will try to write a comparison between them, as I had to do some digging around myself to find this workaround, such write-up can save someone’s precious time.

Thanks for your feedback @andfanilo :smiley:

1 Like
#4

Dear @ash2shukla,

This is awesome!

Have you considered packaging it and adding it to the components library? I would love to play with this and I’m sure other community members would too! Also, we’d love feedback on how that publishing process goes and how we could make it easier / more rewarding.

Thanks for creating this! :pray: :balloon:

2 Likes
#5

Hey @Adrien_Treuille thanks for the feedback !
I had already packaged and published the same under name bokeh-plot-events in pypi. probably a better name is required ? Not sure how can I add it to the components library though. It will be awesome if you can share the process ?

For feed back on publishing: it was super smooth. Thanks for the awesome work you guys do ! :slight_smile:

EDIT: made changes as per instructions at Streamlit Components Launch 🚀

#6

What great timing! I just encountered what I think is a prime use-case for this!

I have two charts, one built in plotly and the other in bokeh. The bokeh is a scatterplot of the latest snapshot of an entire population, while the plotly is a historical view of a single constituent. Obviously I’d like people to be able to select a point in bokeh and use that ID to draw the plotly chart.

I was thinking it would be easier to just rebuild the plotly chart in bokeh, but now it looks like maybe I don’t have to.

Well done.

Edit: Forgot to mention that I would have needed to build the bokeh chart with the full history of the entire population! Now I can load the history only as it becomes relevant.

4 Likes