Get interval selection for a Vega-Altair plot (or plotly for that matter) in streamlit

🎈 Using Streamlit
, ,
1

How can I get the selected datapoints for a Vega-Altair plot publihsed using Streamlit?

I am defining the box selection for selecting datapoints, and it works well. However i am unable to get the selected datapoints for further processing.

  box_selection = alt.selection_interval(name="interval")

I can get the selected datapoints in jupiter notebooks by using jChart = alt.JupyterChart like described here JupyterChart Interactivity — Vega-Altair 5.2.0 documentation and it work wonderfully. But my charts are published in streamlit and jChart = alt.JupyterChart does not seems to retain the chart state and is not doing the trick.

I am trying to use the session state to get chart state which I think is not correct as the state of the chart when updated will not be updated in session state, so need some bridge to cover this gap.

Any ideas?

Complete graph generation code below:

import altair as alt
import streamlit as st

def generate_chart(df,xcol,ycol,lbl='off',color='basic',title='', tooltip=['DataPoint','Ccontent']):
  
  legendSelection = alt.selection_point(fields=['Data'], bind='legend')
  zoompan = alt.selection_interval(bind='scales',
                                          # on="[mousedown[event.altKey], mouseup] > mousemove",
                                          translate="[mousedown[event.altKey], mouseup] > mousemove!",
                                          zoom="wheel![event.altKey]"
                                          )
  # Box selection for highlighting or filtering data points
  box_selection = alt.selection_interval(name="interval")
  
  chart = alt.Chart(df).mark_circle(size=150, stroke='#666', strokeWidth=0.8, opacity=1).encode(
    x=
    alt.X(xcol,
        scale=alt.Scale(zero=False),
        axis=alt.Axis(labels=False, ticks=False, domain=False)
    ),

    y=
    alt.Y(ycol,
        scale=alt.Scale(zero=False),
        axis=alt.Axis(labels=False, ticks=False, domain=False)
    ),

    color=alt.condition(box_selection, 'Data:N', alt.value('lightgray'),  # Update color based on selection
                          legend=alt.Legend(columns=1, symbolLimit=0, labelFontSize=14)),        
    tooltip=tooltip,
    opacity=alt.condition(legendSelection, alt.value(1), alt.value(0.2)),  # Use selection to control opacity
    ).add_params(
    box_selection, zoompan, legendSelection
    )
  
  if lbl == 'on':
    text = chart.mark_text(align='left', baseline='middle',dx=15, size=13,color='black').encode(text=tooltip[0], color= alt.value('black'))
  else:
    text = chart.mark_text(align='left', baseline='middle',dx=10).encode()

  result = (chart + text).configure(background="#FFFFFF"
        ).properties(
        # width=800,
        height=700,
        title=title
       ).configure_legend(
          orient='bottom',  
          labelLimit=0,
          titleFontSize=14,
          labelFontSize=14,
          symbolStrokeWidth=0.8
         )
  jchart = alt.JupyterChart(result)
  st.session_state["jchart"] = jchart # For getting selection of points, but does not look like this will work as the object will not get dynamically updated in session state.
  return result #.interactive()