Problem with Bokeh ‘3.3.4’ for plotting image, with AjaxDataSource

Community Support
1

Hi,

I have some problem with Bokeh ‘3.3.4’ for plotting image, with AjaxDataSource.
The same code works with Bokeh ‘2.4.3’.

image

Data in the data table are updated, but data in the image are kept to the initial value and are not updated.
Getting the following error in Chrome:

Uncaught (in promise) Error: expected a 2D array, not undefinedDote

The code

from flask import Flask
from jinja2 import Template
import numpy as np
from bokeh.plotting import figure
from bokeh.embed import components
from bokeh.resources import INLINE
from bokeh.models import AjaxDataSource, LinearColorMapper
from bokeh.core.json_encoder import serialize_json
from bokeh.models.widgets import DataTable, TableColumn
from bokeh.layouts import column
from bokeh.palettes import Greys256

page = Template("""
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Ajax data source</title>
        {{ resources|indent(4)|safe }}        
        {{ script|indent(4)|safe }}
    </head>
    <body>
        <div class="bokeh-plot">
            {{ div|indent(4)|safe }}
        </div>
    </body>
</html>
""")

# Initialize the Flask application
app = Flask(__name__)
@app.route('/')
def index():
    im = np.array([[10, 80],
                  [160, 250]]) 
    source = AjaxDataSource(data_url="http://127.0.0.1/profile_data", polling_interval=1000, mode='replace', max_size=3)
    source.data = dict(im=[im]) 
    
    color_mapper = LinearColorMapper(palette=Greys256, low=0, high=255)
    fig = figure(width=500, height=200)
    fig.image(image='im', x=0, y=0, dw=2, dh=2, source=source, color_mapper=color_mapper)

    columns = [TableColumn(field='im', title='Data table')]
    data_table = DataTable(source=source, columns=columns, width=400, height=100)    
   
    col = column(fig, data_table)

    script, div = components(col, INLINE)
    return page.render(resources=INLINE.render(), div=div, script=script)

@app.route('/profile_data', methods=['GET','POST'])
def Profile():
    im = np.random.randint(0, 255, size=(2, 2))
    return serialize_json(dict(im=[im.tolist()]))

if __name__ == '__main__':
    app.run('0.0.0.0', port=80, debug=True)

Thanks in advance

2

This appears to be relevant:

Javascript Error Using AjaxDataSource With Image Data

An issue with a current working approach is here: