How to Update gridplot contents with callback function

Hi, I have a gridplot which has contents I need to update with a callback function.

I have a set of png images I need displayed. First I’ve created a list of these images using a div and text representing the image via html. This works fine. I appended these divs and associated checkbox as rows to the list referred to previously. I then pass this list to a column/gridplot. Then I store this in a tab.

My problem is I’m not able to update div objects (images) and their associated checkbox objects with a callback function. I tried creating a columndatasource and updating the data instead of just using the previous list, but it’s not working.

image_thumbnails = column(gridplot(images, ncols=5,
plot_height=800, plot_width=1000,
toolbar_location=‘right’),
width=1000, height=700,
css_classes=[‘scroll-col’])

tab2 = Panel(child=image_thumbnails, title=" Thumbnails")

@beder

Details of the errors you experience (or indication about it silently failing to do what you expect) would go a long way to help isolate the root cause. Ideally, a minimum reproducible example that others can run will increase the likelihood of constructive help and lessen the back-and-forth.

From the available information, here are a few things to confirm, rule-out, or explore. I hope these help.

  1. If you are using python callbacks, make sure that you run your bokeh application as a bokeh server.

  2. If the issue is having access to the models within your callback, there are several approaches to that depending on your software architecture, preferences, etc.

2.a An approach I generally prefer is to encapsulate things in classes with models as members of that class, i.e. any Div, checkbox, etc. that you include in your layout and want to have access to is stored in your class.

If your callback function is a method of the class, then it will have access to all of the data within that class to make it possible to manipulate the models.

A key part of all this … Each of the calls to a bokeh model like Div(...) returns a model object that you can preserve via the assignment. In the snippet of code highlighted here, there layout assignments to column and Panel are being saved to variables, but there is no indication that individual Divs are kept track of in this way.

2b. If your application is more lightweight and you don’t want to use a class or classes, the bookkeeping suggestion to keep track of the model(s) in variables is still germane, I think.

Additionally, or alternatively, bokeh models have a name property. If you set these to unique values, you can access them via the bokeh document get_model_by_name() method. Retrieval of the model by its name from within the callback is another way to get the Divs, checkboxes, etc. that you want to modify in response to an event or action that triggers the callback.