Build custom Widgets to manipulate Plot

Community Support
1

What are you trying to do?
Hey, I want to use some inputs that need to look pretty (with Bootstrap) to change the sources on my bokeh-flask application. I tried many diffrent things to make that work, but didnt manage to do it. How can I use my own inputs to trigger js_callbacks ?

What have you tried that did NOT work as expected?
For now I tried to use the basic inputs from bokeh.models but I realized, that it is hard to style them as I want. An example would be, that I cant use the form-select class on the Select from bokeh.

I did not find any siutable help on the web so I first tried to get a hackie solution for it. I tried to trigger a js_callback by using a js function that manipulates the style-tag of a bokeh Paragraph, but this also didnt work, because the js_callback did not trigger.

The only thing that I didnt try is to generate a custom widget, because when looking at it I didnt understand the example on the Bokeh website and couldnt find any more examples.

I think it is really limiting that you cant manipulate the bokeh plots with your own html and js.

So if you have any tips on that it would be really helpfull. I didnt post any code, because this is a little bit complex and would be more counterproductive. I also thought about posting tis on the Bokeh github or the development section, because this would really help me.

2

For the time being, your best option is probably to define a name for the objects you want to access “outside” Bokeh, and use the window global Bokeh object to look them up. In the Python code do this:

p = figure(..., name="myplot")

Then in the browser, you can do:

Bokeh.documents[0].get_model_by_name("myplot")

Now you have a reference to the plot in JS code (outside Bokeh callbacks) and you can set whatever properties, etc. you want to update it.

This is pretty clunky, probably not very idiomatic for front-end dev, and may even be difficult in some cases (e.g. I think some frameworks make it difficult to access globals?) I’d love for the story here to be better, more below.

Well, the original motivation for creating Bokeh in the beginning was to afford a web visualization tool to Python scientists and data scientists who specifically did not want to do any web development themselves. So if you are looking for a reason this has not been a priority historically, that’s it.

As time passes, users want to user Bokeh for more and more things, which is fine and great, but this is an area where the project could really use new core contributors to provide their experience and vision. I personally don’t like front-end dev, am very bad at front-end dev, and most crucially, don’t have any time or bandwidth to dedicate to working on new directions like this.

I did have an idea about defining “virtual widget interfaces” i.e. a “slider” object that only has the API and properties of a slider but doesn’t actually display anything on its own, and then having an easy mechanism to “hook up” these virtual widgets to whatever real (non-Bokeh) widgets a user might want to use. That seems like it would satisfy cases like this. I have not (and still don’t) have any capacity to spend time on this. But I’d be happy to help anyone work on this, or their own vision for simpler integrations through mentoring or lending my technical knowledge.

3

Thanks Bryan,

So far this is good news for me and I will see if your proposed solution works for me. Regardless I will let you know about the outcome. If I feel like this is not the solution I may look into trying to implement something like this.

4

When I use Bokeh.documents[0].get_model_by_name("myplot") to get the model, how can I modify the source of this model? I didnt find any property that could do that.

5

Every Bokeh model can accept a name property value than can be set in the initializer or by assigning to .name, e.g. here’s the reference for HoverTool.name.