BokehJS Version Issues

I am trying to get a varea_stack on a react web page. I am using bokeh in python with flask and react for the front end. But I cannot get the varea_stack to work. Whenever I update yarn and pip with the latest version 2.2.3 I get the error:

[bokeh] – “Library versions: JS (1.0.4) / Python (2.2.3)”

So I tried to downgrade bokeh python to 1.0.4 and the error is gone but 1.0.4 doesn’t have varea_stack. It seems my react app is using the wrong version of bokeh? the yarn module says it is at 2.2.3 so I am confused. Here is my python code for reference:

import json

from flask import Flask
import pandas as pd
import numpy as np
from gevent.pywsgi import WSGIServer

from bokeh.resources import CDN
from bokeh.plotting import figure, show
from bokeh.embed import json_item
from bokeh.palettes import brewer

from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/')
def hello_world():
    return 'Hello, World!'

@app.route('/plot1')
def produce_visual():
  N = 10
  df = pd.DataFrame(np.random.randint(10, 100, size=(15, N))).add_prefix('y')
  p = figure(x_range=(0, len(df)-1), y_range=(0, 800))
  p.grid.minor_grid_line_color = '#eeeeee'

  names = ["y%d" % i for i in range(N)]
  p.varea_stack(stackers=names, x='index', color=brewer['Spectral'][N], legend_label=names, source=df)

  p.legend.items.reverse()
  return json.dumps(json_item(p, "visualization"))


# Using WSGI server to allow self contained server
print("Listening on HTTP port 5000")
http_server = WSGIServer(('', 5000), app)
http_server.serve_forever()

What’s in the actual page source? Seems like you just have a hardcoded script load for version 1.0.4 of BokehJS.

Here is the JS Code:

import React, { useEffect } from 'react';
import './App.css';
import Axios from 'axios';

function App(){
   useEffect(() => {
      Axios.get("http://localhost:5000/plot1").then(resp => 
      {
        console.log(resp.data)
        window.Bokeh.embed.embed_item(resp.data, 'testPlot')
      })
    }, [])
  
    return (
      <div className="App-header">
        Hello
        <div id='testPlot' className="bk-root"></div>
      </div>
    );
}

export default App;

It does look like in the source the version is being set as 1.0.4, any idea how to resolve this ?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    
    <!-- Required for Bokeh -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bokeh/1.0.4/bokeh.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bokeh/1.0.4/bokeh-widgets.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bokeh/1.0.4/bokeh-tables.css">
    
    <link rel="shortcut icon" href="/favicon.ico" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

I don’t know how that is generated, so I can’t speculate at all, but that’s definitely the cause of your problem.