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

[steveA]

totally weird issue. Figured I’d ask here since it seems to relate to another one discussed in this forum.

Briefly, a DateSlider example copy/pasted from this Bokeh page works with show(date_slider) but not with streamlit.bokeh_chart(date_slider).

The latter, streamlit, throws a JS console error “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.”

Here’s the code:

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)

As mentioned, I thought I’d post in this forum because of the similar issue linked to above. Because it works perfectly fine with bokeh.show() but not with st.bokeh_chart() it might be a streamlit issue, but I wasn’t able to find another issue in the streamlit community referring to the JS console error.

Any ideas what’s the issue here?

[Bryan]

That means the separate bokeh-widgets.js bundle that contains the implementation for Bokeh’s widgets is not loaded. Bokeh handles including that bundle automatically whenever it is needed in its own output. I’ve never used streamlit but presumably there is some mechanism to include JS script loads manually.

[steveA]

thanks – I’ll try to track it down with streamlit and will report back

[Adam_Gilbert]

Any solution here @steveA