Best way to load bokeh content on client

Hi, I’m quite new to this, but what I have are two servers - one Flask backend that does all the data-churning and I have a React based front-end renders the data from fetch using ‘Bokeh.embed.embed_item’. The issues is that I thousands of data points for the heatmap and rendering takes a while.

I have some input options so that the user can filter content, but my webapp has a lot of other components as well.

How should this be architectured? Can I use something like WebGL?

There is not really enough information here to speculate. Does “thousands of points” mean two thousand? or 800 thousand? What specific kinds of Bokeh glyphs are you using? How have you determined that it is rendering, specifically, taking the time?

Hi Bryan,

The heatmap I have has around ~10k points.
I’m just using the regular heatmap chart so I’m assuming there’s no glyph but ‘rect’, which I know is not supported.

Here’s my page performance. Would using bokeh server speed things up?

Screenshot 2021-02-04 151903744×933 37.2 KB

@nelhwong I am afraid more information, and really a Minimal Reproducible Example to actually investigate directly, would be necessary to offer advice. I would not expect only 10k rects to take anywhere near that long .

For reference the following script the displays 10k rects takes make ~1s to show up in a browser on my laptop, and that includes: starting the python interpreter, running the script, writing the HTML file, opening a browser window, and loading the file in a tab.

import numpy as np
from bokeh.plotting import figure, show

x = np.arange(100)
y = np.arange(100)
xx, yy = np.meshgrid(x, y)

p = figure(plot_width=1200, plot_height=1200)
p.rect(x=xx.flatten(), y=yy.flatten(), width=0.8, height=0.8)

show(p)

and only ~240ms in the browser to completely render

Screen Shot 2021-02-04 at 5.31.32 PM1194×144 24.9 KB