Streamlit_bokeh_events: Partial refresh

Custom Components
1

streamlit_bokeh_events:
streamlit_bokeh_events is very interesting library. Unfortunately I get it only half working:

With the following code, I am ploting 3 points and a curve.
When user drag a point it should update the point location and the curve.
Stragely it is working when using st.bokeh_chart() to plot instead of streamlit_bokeh_events.

import numpy as np

from bokeh.layouts import column, row
from bokeh.models import CustomJS, Slider
from bokeh.plotting import ColumnDataSource, figure, output_file, show
from bokeh.plotting import figure, output_file, show, Column
from bokeh.models import DataTable, TableColumn, PointDrawTool, ColumnDataSource
from streamlit_bokeh_events import streamlit_bokeh_events

import streamlit as st



p = figure(x_range=(0, 10), y_range=(0, 10), tools=[], title="Point Draw Tool")

source_param = ColumnDataSource(
    {"x": [1, 5, 9], "y": [1, 5, 9], "color": ["red", "green", "yellow"]}
)

source_curve = ColumnDataSource(
    {"x": np.arange(0,100,0.1), "y": np.arange(0,100,0.1)}
)

renderer = p.scatter(x="x", y="y", source=source_param, color="color", size=10)
columns = [
    TableColumn(field="x", title="a"),
    TableColumn(field="y", title="b"),
    TableColumn(field="color", title="c"),
]
table = DataTable(source=source_param, columns=columns, editable=True, height=200)

draw_tool = PointDrawTool(renderers=[renderer], empty_value="black", add=False)
p.add_tools(draw_tool)

line2 = p.line(y='y', x='x', source=source_curve)
p.toolbar.active_tap = draw_tool


callback = CustomJS(
    args=dict(user_source=source_param, display_xy=source_curve),
    code="""
    var data = user_source.data;
    var curve = display_xy.data;
    const n = data['y'][0]
    const r1 = data['x'][1]
    const t1 = data['y'][1]

    var r2 = data['x'][2]
    var r = r1/r2
    var t2 = data['y'][2]
    data['x'][0] = 0
    if (t1>t2){
        t2 = t1
        data['y'][2] =  t2
    }
    
    for (var i = 0; i < display_xy.length; i++) {
        var x = curve.x[i];
        if (x>r2) {
            curve.y[i] =  t2 ;
        }
        else if (x>  r1) {
            curve.y[i] = r1**2+r2**2;  
        } else {
                curve.y[i] =0
        };
    };

    display_xy.change.emit();
    user_source.change.emit();
    """
)
source_curve.js_on_change("data", callback)

source_param.js_on_change("data", callback)
event_result = streamlit_bokeh_events(p, key="foo", events="DATA_CHANGED", refresh_on_update=False, debounce_time=0)
2

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.