Multiple graph instances

On this page

• Use unique keys
• Keep state separate
• Update options safely
• Complete pattern

Use unique keys

Every graph on a page needs a stable and unique key. The component encodes the key into a Streamlit-safe internal identifier without collapsing similar values such as case__left and case--left.

Keep state separate

Use separate element dictionaries, command queues, event timestamps, and saved viewports for each graph. Do not route both on_change callbacks through a single unqualified session-state key.

Update options safely

Selection modes, zoom bounds, heights, and custom event listeners can update on one live graph without changing the other. Initialization-only changes should remount only the intended graph by changing that graph's key.

Complete pattern

import streamlit as st

from st_graph_workbench import graph_workbench

left_elements = {
    "nodes": [{"data": {"id": "ABC123", "label": "VEHICLE"}}],
    "edges": [],
}
right_elements = {
    "nodes": [{"data": {"id": "camera-7", "label": "LOCATION"}}],
    "edges": [],
}

left, right = st.columns(2)

with left:
    left_event = graph_workbench(
        left_elements,
        selection_mode="multiple",
        return_selection=True,
        key="case-left",
    )

with right:
    right_event = graph_workbench(
        right_elements,
        selection_mode="single",
        return_selection=True,
        key="case-right",
    )

st.write({"left": left_event, "right": right_event})

This is useful for comparing two cases, a full network and focused subgraph, or current and historical observations. Each returned dictionary remains tied to its own component instance.

Conclusion

Component keys are part of application state design. Name them by durable view identity, not by transient layout or selection values.