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!!
Robert