Component for bi-directional communication with bokeh

[ash2shukla]

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

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

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

[andfanilo]

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

This looks great 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

[ash2shukla]

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

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

[Adrien_Treuille]

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!

[ash2shukla]

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 !

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

[KimmyJimmel]

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.

[AbhiD]

Before Update:

After update:

You can see before the recent update, the selected points used to get highlighted and the remaining points used to get blur and this state was preserved until we select some different set of points, but after the update the selected points are highlighted only for few seconds and then the graph is getting reset (same thing happens when we zoom and select some points, it gets zoom out and no points are selected after few seconds).
Can please help me out with this @ash2shukla.

[ash2shukla]

Hey @AbhiD,

Some state magic should do the job, I whipped up some changes in the example,
The random example that I have given in repo will give weird result because the datasource will change every time the script will re-run, so just make sure you have a static data source.

Checkout this gist: https://gist.github.com/ash2shukla/bfccfdfea0061d63a6ba5ebf06df81e4
This gist has the provide_state decorator that I use: https://gist.github.com/ash2shukla/ff180d7fbe8ec3a0240f19f4452acde7
And this is the data.csv file: https://gist.github.com/ash2shukla/82ba6a264c8ede2d787a7a87a8ccbaf0

Same kind of logic can be applied to retain the zoom as well.

Hope it helps !