Streamlit.bokeh_chart() throwing JS error: "Model 'DateSlider' does not exist"

🎈 Using Streamlit
1

I also posted this issue in the Bokeh forum, but suspect this is more a streamlit issue.

Briefly, the code below does not display the Bokeh DateSlider widget when I call st.bokeh_chart(date_slider), though bokeh.show(date_slider) DOES display it.

st.bokeh_chart(date_slider) throws the following, from the console (CTRL-SHIFT-I)

6737.20dd8dd6.chunk.js:2 Uncaught (in promise) Error: Model ‘DateSlider’ does not exist. This could be due to a widget or a custom model not being registered before first usage.

from datetime import date

from bokeh.io import show
from bokeh.models import CustomJS, DateSlider
import streamlit as st
electrical_demand_blurb = '''
a blurb to test that streamlit is running
        '''
st.markdown(electrical_demand_blurb)

with st.container():
    date_slider = DateSlider(value=date(2016, 1, 1),
    start=date(2015, 1, 1),
    end=date(2017, 12, 31))
    date_slider.js_on_change("value", CustomJS(code="""
    console.log('date_slider: value=' + this.value, this.toString())
    """))
    
    st.markdown('## Another blurb to test streamlit')
    st.bokeh_chart(date_slider)

I uninstalled streamlit, then re-installed/upgraded it; now I have 1.25.0. Bokeh version 2.4.3. Still throws the same JS error.

Other bokeh charts, that do not use bokeh.models, display no problem with st.bokeh_chart().

A commenter on the bokeh forum says there must be a way that st handles js manually, but the weird thing is this used to work with no issues.

Any ideas how to fix this?

2

Hi @steveA

Library interdependencies can be a tricky issue that may cause an app to stop working.

Have you experimented with downgrading all libraries involved? Perhaps estimate approximately when that the app used to work and try using that version. Once it works, then work your way up to more recent versions, which may help to pinpoint which particular versions may have caused it to stop working.

Hope this helps!

3

I’m having a similar issue with Bokeh’s toggle js callback. Have you figured out a solution to the above?