Streamlit timeline component - prevent rerun while selecting items in timeline

Hi Streamlit community!

I am using the Streamlit timeline component provided from Qiusheng: Timeline component

The component is a vis js implementation and it offers certain standard features such as selection or multiselection. Due to Streamlits logic of always rerunning the whole script with any change I dont get these features to work properly and I would appreciate if someone has an idea how to tackle this.

This is a simple code example and it creates a timeline with 4 items in two different groups:

import streamlit as st
from streamlit_timeline import st_timeline

items = ({"id": "1", "content": "item1", "start": "2022-12-19T08:00", "end": "2022-12-19T14:00", "group": "1"},
         {"id": "2", "content": "item1", "start": "2022-12-19T16:00", "end": "2022-12-19T19:00", "group": "1"},
         {"id": "3", "content": "item1", "start": "2022-12-20T08:00", "end": "2022-12-20T14:00", "group": "2"},
         {"id": "4", "content": "item1", "start": "2022-12-20T16:00", "end": "2022-12-20T19:00", "group": "2"})

groups = ({"id": "1", "content": "Group 1", "style": "color: black; background-color: white;"},
          {"id": "2", "content": "Group 2", "style": "color: black; background-color: white;"})

# @st.cache(suppress_st_warning=True)
def create_timeline(items, groups):
    timeline = st_timeline(items=items, groups=groups, options={"selectable": True,
                                                      "multiselect": True, 
                                                      "zoomable": True, 
                                                      "stack": False, 
                                                      "height": 154, 
                                                      "margin": {"axis": 5}, 
                                                      "groupHeightMode": "auto", 
                                                      "orientation": {"axis": "top", "item": "top"}}, 
                                                      style="color: red")

    return timeline                                                

timeline = create_timeline(items, groups)

Right now if you click on an item it quickly selects is and the due to the rerun looses the selection. My goal is, that the user can select an item, it keeps beeing selected (colored yellow) and that the script does not rerun. I tried caching the timeline creation function but this lead to weird results.

Does anybody has an idea?

As always, thanks so much in advance for your help!!


@giswqs would probably be the best person to ask about this

Thatโ€™s a limitation caused by the rerun. I donโ€™t have a solution for this yet.