giswqs / streamlit-timeline

Streamlit component for rendering vis.js timeline
https://timeline.streamlitapp.com
MIT License
93 stars 11 forks source link

Editing item position does not change start or end time #11

Open neldivad opened 1 month ago

neldivad commented 1 month ago

Doing anything else keeps refreshing the timeline to its initial state.

A fix would be releasing or deleting any items will update the state.

EDIT: Solved it with st.experimental. But clicking the updated position from UI still doesn't return the updated values for start and end.

@st.experimental_fragment
def timeline_part():
    """
    """
    core_colors = ['#ec008c', '#68217a', '#00188f', '#00bcf2', '#00b294', '#009e49', '#bad80a', '#fff100', '#ff8c00', '#e81123']

    items = [] 
    groups = []
    i_counter = 0
    g_counter = 0
    start_time = 1
    instrument_dict = {}

    # loop through tracks and add to items and groups
    for k,v in state['track_db'].items():
        instrument_id = v['instrument']

        # add instrument to groups if not already added
        if instrument_id not in instrument_dict:
            instrument_dict[v['instrument']] = g_counter
            groups.append({
                "id": g_counter,
                "content": mp.database.reverse_instruments[instrument_id],
                "style": f"color: black; background-color: {core_colors[(g_counter-1) % len(core_colors)]};", # color cycling
            })
            g_counter += 1

        # add track to items
        items.append({
            "id": i_counter,
            'track_id': v['track_id'],
            "content": v['name'],
            "start": start_time,
            "end": start_time + v['bars'],
            "group": instrument_dict[instrument_id],
            "editable": True,
            "selectable": True,
        })
        i_counter += 1

    # create timeline obj in frontend
    timeline = st_timeline(items, groups=groups, options={}, height="300px")
    st.subheader("Selected item")
    st.write(timeline)

    print(items)
    print(groups)
    print(timeline)

>>>
[{'id': 0, 'track_id': '2lI5Tpyo', 'content': '090 S09 Outro', 'start': 1, 'end': 9, 'group': 0, 'editable': True, 'selectable': True}, {'id': 1, 'track_id': 'LjgWhimi', 'content': '090 S09 Verse F3', 'start': 1, 'end': 9, 'group': 0, 'editable': True, 'selectable': True}, {'id': 2, 'track_id': 'DlPX7fv4', 'content': '090 S09 Verse Fill 04', 'start': 1, 'end': 2, 'group': 0, 'editable': True, 'selectable': True}, {'id': 3, 'track_id': 'fXEwzinj', 'content': '090 S09 Verse Ride', 'start': 1, 'end': 9, 'group': 0, 'editable': True, 'selectable': True}]
[{'id': 0, 'content': 'Acoustic Grand Piano', 'style': 'color: black; background-color: #e81123;'}]
{'id': 2, 'track_id': 'DlPX7fv4', 'content': '090 S09 Verse Fill 04', 'start': 1, 'end': 2, 'group': 0, 'editable': True, 'selectable': True}