Streamlit-bokeh-events==0.1.3

[BenBen]

From pip you can install streamlit-bokeh-events==0.1.2
On github, there is streamlit-bokeh-events==0.1.3.
I downloaded the 0.1.3 from github and did:

npm run build

and then

pip install .

As it seems to work, when i run example from github, I get the error:

Your app is having trouble loading the streamlit_bokeh_events.streamlit_bokeh_events component.

(The app is attempting to load the component from ****, and hasn’t received its “streamlit:componentReady” message.)

• If this is a development build, have you started the dev server?
• If this is a release build, have you compiled the frontend?

For more troubleshooting help, please see the Streamlit Component docs or visit our forums.

from the webpage.

What should I do to build a component from github ?

Alernatively I tried:

1. 'npm install+npm run start`.
2. then run the server for the _streamlit_bokeh_events= components.declare_component("streamlit_bokeh_events", url="http://localhost:3001") part to run correctly, with npm run start.

import streamlit as st
import pandas as pd
from bokeh.plotting import figure
from bokeh.models import ColumnDataSource, CustomJS
from bokeh.models import DataTable, TableColumn
#from streamlit_bokeh_events import streamlit_bokeh_events
import streamlit.components.v1 as components

_streamlit_bokeh_events = components.declare_component("streamlit_bokeh_events", url="http://localhost:3001") 

df = pd.DataFrame({
        "x": [1, 2, 3, 4],
        "y": [4, 5, 6, 7],
})
# create plot
cds = ColumnDataSource(df)
columns = [
TableColumn(field="x"),
TableColumn(field="y"),
]

# define events
cds.selected.js_on_change(
"indices",
CustomJS(
        args=dict(source=cds),
        code="""
        document.dispatchEvent(
        new CustomEvent("INDEX_SELECT", {detail: {data: source.selected.indices}})
        )
        """
)
)
p = DataTable(source=cds, columns=columns)
result = _streamlit_bokeh_events(bokeh_plot=p, events="INDEX_SELECT", key="foo", refresh_on_update=False, debounce_time=0, override_height=100)
if result:
        if result.get("INDEX_SELECT"):
                st.write(df.iloc[result.get("INDEX_SELECT")["data"]])

With this solution I get the error:
MarshallComponentException: (‘Could not convert component args to JSON’, TypeError(‘Object of type DataTable is not JSON serializable’))

Traceback:

File "/xxxx/my_comp/streamlit-bokeh-events-master/streamlit-bokeh-events-master/test_main.py", line 35, in <module>
    result = _streamlit_bokeh_events(bokeh_plot=p, events="INDEX_SELECT", key="foo", refresh_on_update=False, debounce_time=0, override_height=100)

Thank for your help.