Hi I'm receving this error:

2021-09-02 16:00:51.015 ComponentRequestHandler: GET streamlit_bokeh_events.streamlit_bokeh_events/bootstrap.min.css.map read error Traceback (most recent call last):

FileNotFoundError: [Errno 2] No such file or directory: 'c:\users\borg7803\anaconda3\envs\streamlit\lib\site-packages\streamlit_bokeh_events\frontend\build\bootstrap.min.css.map'

Hi, This is my code:

from bokeh.models import ColumnDataSource, CustomJS
from bokeh.palettes import Category20
from bokeh.plotting import figure
from bokeh.transform import linear_cmap
import numpy as np
import pandas as pd
import streamlit as st
st.set_page_config(layout="wide")

from streamlit_bokeh_events import streamlit_bokeh_events

@st.cache
def load_data():
    # ....

df = load_data()

st.title("Clustering")
st.subheader("Umap Embedding")

col1, col2 = st.beta_columns([2,1])

with col1:
    p1 = figure(sizing_mode="stretch_both",
                tools="pan,box_select,lasso_select,wheel_zoom,reset", 
                active_drag="lasso_select",
                active_scroll="wheel_zoom")

    cmap = linear_cmap("label", palette=Category20[20], low=df["label"].min(), high=df["label"].max())
    cds = ColumnDataSource(df)
    p1.circle("x", "y", source=cds, color=cmap, line_color=cmap)

    cds.selected.js_on_change("indices", CustomJS(args=dict(source=cds),
            code="""
            document.dispatchEvent(new CustomEvent("select_event", {detail: cb_obj.indices}))
            """
        )
    )
    event_result = streamlit_bokeh_events(p1, "select_event", key="select_event")

with col2:
    if event_result is not None:
        st.dataframe(df.iloc[event_result["select_event"]])

So I have a scatter plot on the left and a dataframe on the right. When I select a number of points in the scatter plot using the lasso tool, I want the dataframe on the right to update. This is working fine.

However, when something was selected, all the not selected points should have a high alpha value, and should retain their high alpha value. This is not working. Apparently, the scatter plot is redrawn and even though the table shows the correct selection, all points in the plot have the same alpha value. I have also a screen capture of this behavior.

Also, the zoom level and the whole plot resets (Not shown in the gif).

Is there something I can do about that?

Thank you, Flo

Summary

Transpilation of typescript code fails due to two issues stemming from react-scripts version 3.4.1.

1. react-scripts=3.4.1's babel config does not support nullish coalescing operator (??).
2. react-scripts=3.4.1's babel config does not support export namespace from semantics (i.e. export * as embed from "./embed";)

Issue Description

react-scripts's nullish coalescing operator issue is well described and recounted in create-react-app #9468. The gist is, the currently configured browserslist key in package.json fails because some browsers (<10%) do not support the nullish coalescing operator. See caniuse for the current breakdown. In short, the nullish coalescing operator (??) is supported by > 90% of browsers. ~2.5% of ~10% unsupported browsers are old versions of Chrome and Safari on IOS. I don't see this being a huge issue, but it might be worth mentioning in documentation (if the changes are accepted). However, others may disagree. If that is the case, using react-scripts eject is likely the only viable solution.

create-react-app #9468's proposed solution is to change package.json's browserlist key from this,

"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },

to this,

"browserslist": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],

I've verified that this change removes the

Failed to compile.

./node_modules/@bokeh/bokehjs/build/js/lib/models/expressions/stack.js 10:35
Module parse failed: Unexpected token (10:35)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| 
|   _v_compute(source) {
>     const n = source.get_length() ?? 0;
|     const result = new Float64Array(n);
|

transpilation error.

However, after changing the browserlist key, an error related to export namespace semantics is raised. See below:

Failed to compile.

./node_modules/@bokeh/bokehjs/build/js/lib/index.js 3:9
Module parse failed: Unexpected token (3:9)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| export { version } from "./version";
| export { index } from "./embed";
> export * as embed from "./embed";
| export * as protocol from "./protocol";
| export * as _testing from "./testing";

I tried bumping the react-scripts version to 3.4.4, but the error persisted. However, bumping react-scripts to 4.0.3 resolved the issue. Here are the create-react-app v4.X change logs. At a glance, I did not see anything referencing adding support for export namespace's, so I assume it is a product of a downstream babel plugin update.

Recreate

1. clone repo
2. git checkout a67ca746960ab13e40cc660a8b53d6fa792c0582
3. cd streamlit_bokeh_events/frontend/
4. rm package-lock.json
5. yarn
6. yarn start

Changes

• browser target constraints lessened to avoid nullish coalescence issue. some browsers are no longer supported. see caniuse to see if you are affected.
• react-scripts version bumped to 4.0.3.
• package-lock.json removed and no longer tracked.

Hey, I used normal ColumnDataSource, with columns

I see your reply here: https://discuss.streamlit.io/t/make-streamlit-table-results-hyperlinks-or-add-radio-buttons-to-table/7883/2

And wondered how can I clear the selection?

result = streamlit_bokeh_events(bokeh_plot=p, events="INDEX_SELECT", key="foo", refresh_on_update=False, debounce_time=0)

Bumps url-parse from 1.4.7 to 1.5.10.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps url-parse from 1.4.7 to 1.5.7.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps follow-redirects from 1.12.1 to 1.14.8.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps follow-redirects from 1.12.1 to 1.14.7.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps path-parse from 1.0.6 to 1.0.7.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps tmpl from 1.0.4 to 1.0.5.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps ws from 5.2.2 to 5.2.3.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Hello! Couldn't install version 0.1.3 using pip - only 0.1.2. I'm using macOS Monterey 12.1 and Python 3.8.2 in venv pip install not working. I thing that is because there is no wheel file in the pypi repository for the new version Thank you in advance

pip install streamlit-bokeh-events==0.1.3

ERROR: Could not find a version that satisfies the requirement streamlit-bokeh-events==0.1.3 (from versions: 0.1.0, 0.1.1, 0.1.2) ERROR: No matching distribution found for streamlit-bokeh-events==0.1.3

When I use Spinner Widget in Bokeh, nothing appear on streamlit-bokeh-events. On the other hand, st.bokeh_chart draw Bokeh graph properly. After I replaced Spinner to Slider, it worked on streamlit-bokeh-event. So, Spinner may do something bad. I tried some versions for streamlit, bokeh, and streamlit-bokeh-events, but not improved.

streamlit==1.3.0 streamlit-bokeh-events==0.1.2 bokeh==2.4.1

When running the example widget_with_plot.py the scatter plot does not appear. It seems that a call to st.bokeh_chart(plot, use_container_width=False) is missing

After adding this the plot appears but the lasso select event does not seem to trigger anything on the streamlit side. The selection on the table seems to work fine.

Tried to install streamlit from git repo and get the following error StreamlitAPIException: No such component directory: '/home/mat/anaconda3/envs/koz_viewer/lib/python3.7/site-packages/streamlit_bokeh_events/frontend/build'

I am guessing I am missing some build command?

Hi, I found your great package and am trying to use it also to interact with images. This does not seem to work immediately, or at least I didn't figure out how. The main point is the current functionality is based on a source = ColumnDataSource(df) which is not present if I am just plotting an image with p.image(image)

What I would like to do is to tap on a point and/or select a region of the image and get out the coordinates for further processing.

Is there an easy way of doing this? Thanks a lot!!!

Hi, I am new to bokeh applications with streamlit. I am trying to use customJS callback to update my plot if there is any change in the select widgets. I made up the following code and unfortunately plot is not updating after the change in select value. here is the minimal working example code:

import pandas as pd
import streamlit as st
from copy import deepcopy
import numpy as np
from state import provide_state
import bokeh
from streamlit_bokeh_events import streamlit_bokeh_events
from bokeh.layouts import column, row
from bokeh.models import Slider, TextInput,Dropdown,Select,Button
from bokeh.plotting import figure
from bokeh.models import ColumnDataSource, CDSView, annotations, BooleanFilter, CustomJS, HoverTool
from colorcet import glasbey

def get_sizer(X, min_size, max_size):
    X_std = (X - X.min(axis=0)) / (X.max(axis=0) - X.min(axis=0))
    X_scaled = X_std * (max_size - min_size) + min_size
    return X_scaled.fillna(min_size)

my_data = {  'group_1':['cat','dog','cat','dog','bull','bull','cat','rat'],
'group_2':['lion','tiger','deer','tiger','deer','deer','lion','lion'],
'group_3':['grass','bush','flower','leaf','grass','leaf','bush','grass'],
'length':[5,6,5,6,4,3,7,3],
'length_1':[25,36,45,36,54,43,76,37],
'width':[1,2,4,3,4,2,4,5],
'width_1':[11,12,14,13,14,12,14,15],
'size_1': [10,23,45,12,10,45,43,29]
}

st.set_page_config(
    layout="wide",
    page_title="Reference Search",
)
st.write('''# Animal category search''')
st.session_state.data = my_data.copy()
plot_data = pd.DataFrame(st.session_state.data )

coloring = Select(title="Select for coloring:", value="group_1", options=['group_1','group_2','group_3'])
color_label = coloring.value
sizing = Select(title="Select for sizing:", value="size_1", options=['length','length_1','width','width_1','size_1'])
sizing_label = sizing.value

palette = glasbey[:len(plot_data[color_label].unique())]
color_map = bokeh.models.CategoricalColorMapper(factors=plot_data[color_label].unique(),palette=palette)
plot_data['Size'] = get_sizer(plot_data[sizing_label], 10, 40)
plot_data['Half_Size'] = plot_data['Size']/1000

source = ColumnDataSource(plot_data.reset_index().rename(columns={'index':'Animal'}))
print(source.data)
p = figure( plot_width=800, plot_height=600,
    title = 'animal categories',
    tools='''pan,lasso_select,box_select,wheel_zoom,reset''',
    active_scroll = 'wheel_zoom',active_inspect = None,
    toolbar_location = 'above'
)
p.add_layout(annotations.Legend(), 'right')
p.legend.click_policy = 'hide'

p.scatter(x='length',y='width',
          color={'field': color_label, 'transform': color_map},
          legend=color_label, source=source)

callback = CustomJS(args=dict(source=source,plot=p,coloring=coloring,sizing=sizing), code="""
    var data = source.data
    var a =coloring.value;
    var s = sizing.value;
    var palette = glasbey[:len(data[a].unique())];
    var color_map = bokeh.models.CategoricalColorMapper(factors=data[a].unique(),palette=palette)
    plot.color={'field': color_cat_label, 'transform': color_map}
    plot.legend=color_cat_label
    plot.change.emit()
    """)
coloring.js_on_change('value', callback)
sizing.js_on_change('value', callback)

streamlit_bokeh_events(
    events="SelectEvent",
    bokeh_plot=column(row(coloring,sizing,width=800),p),
    key="foo2",
     #refresh_on_update=True,
    debounce_time=0,
)

It is able to produce a scatter plot with colourmap based on grouping initially, but not updating the plot once the grouping parameters for colourmap has changed through a select widget. initially let’s only concentrate on colouring widget, I am working on functionality to update my plot besed on select widgets colour group categories. To be precise, I am not able to write proper CustomJS callback to update my plot. when we only stick to coring widget change, there is no change in the source data x and y values. so, please do help me in writing proper CustomJS callback.

I see that it's possible to override the plot height but I don't see an option for overriding the width. When using streamlit's wide layout (i.e. st.set_page_config(layout="wide")) the map width does not fill to fit the container width. The standard bokeh_chart has this ability (e.g. use_container_width=False, is it possible to add this?