Plot figure not retaining its state ( zoom and selected points )

[r0f1]

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

[ash2shukla]

Hey,

Thanks for opening the issue. I have addressed it earlier in this thread, https://discuss.streamlit.io/t/component-for-bi-directional-communication-with-bokeh/4338/8?u=ash2shukla

The issue is that graph requires a re-render on componentDidUpdate to show changes in case you want to update the data source. But as a side-effect it also resets the plot state. An easy way to work around this is to use Session state to hold graph state.

I added a sample for you in this gist. https://gist.github.com/ash2shukla/659bb5cb68def18a99c462364cbc556c
Add this module to your codebase to get @provide_state decorator. https://gist.github.com/ash2shukla/ff180d7fbe8ec3a0240f19f4452acde7

Hope it helps !

[r0f1]

This is awesome!! Thank you. Just now tried it and it worked :)

[ash2shukla]

@r0f1 Added a fix in 0.1.2 if you dont want to modify the datasource at runtime set refresh_on_update=False. Find examples here https://github.com/ash2shukla/streamlit-bokeh-events/blob/master/example/widget_with_plot.py

[r0f1]

Thanks, I will check it out!