DOCSEARCHbyAlgolia
Submit Docs

Streamlit Flow

repository·master·Indexed 43 days ago

https://github.com/dkapur17/streamlit-flow

A Streamlit component that integrates React Flow to build interactive, customizable flow diagrams. Version 1.6.1 features synchronized state management via the StreamlitFlowState class, supporting various layouts (Layered, Tree, Force, Stress, Radial, Random, Manual) and node content in Markdown and HTML.

Tokens
1.4K
Snippets
4
Records
5
Agent score
6%

What's inside Streamlit Flow

  1. How to manage state with StreamlitFlowState

    master

    Starting from version 1.5.0, Streamlit Flow uses a synchronized state management system. Instead of passing nodes and edges directly to the streamlit_flow function, you must wrap them in a StreamlitFlowState object.

    CRITICAL: To prevent infinite re-renders and app hangs, you must store the StreamlitFlowState object in st.session_state. If you re-initialize the state on every run, the component will re-render infinitely because it synchronizes frontend changes back to the backend.

    Correct Pattern:

    1. Check if the state exists in st.session_state.
    2. If not, initialize StreamlitFlowState(nodes, edges) and save it to st.session_state.
    3. Pass the session state object to streamlit_flow.
    4. Capture the return value of streamlit_flow and update the session state to ensure UI interactions (like moving nodes) are reflected in Python.
    import streamlit as st
from streamlit_flow import streamlit_flow
from streamlit_flow.elements import StreamlitFlowNode, StreamlitFlowEdge
from streamlit_flow.state import StreamlitFlowState
from uuid import uuid4

# 1. Initialize the state in session_state if it doesn't exist
if 'flow_state' not in st.session_state:
    nodes = [...] # Your list of StreamlitFlowNode
    edges = [...] # Your list of StreamlitFlowEdge
    st.session_state.flow_state = StreamlitFlowState(nodes=nodes, edges=edges)

# 2. Example: Programmatically altering state
if st.button("Add node"):
    new_node = StreamlitFlowNode(
        id=str(f"st-flow-node_{uuid4()}"), 
        pos=(0, 0), 
        data={'content': f'Node {len(st.session_state.flow_state.nodes) + 1}'}, 
        node_type='default',
        source_position='right',
        target_position='left'
    )
    st.session_state.flow_state.nodes.append(new_node)
    st.rerun()

# 3. Render and capture updated state from UI interactions
st.session_state.flow_state = streamlit_flow('flow', st.session_state.flow_state)

  3. Run the Streamlit Flow development example

    master

    To run the local development version of the repository with the frontend and backend running simultaneously, follow these steps:

    1. Install dependencies: Clone the repo and install npm dependencies for the frontend.
    2. Run Frontend: Start the React development server.
    3. Run Streamlit: Start the Streamlit application.

    Note: This is intended for developers contributing to the project or testing the component locally.

    # 1. Install dependencies
git clone https://github.com/dkapur17/streamlit-flow.git
cd streamlit-flow
npm install --prefix streamlit_flow/frontend

# 2. Run the frontend (in a new terminal)
cd streamlit_flow/frontend
npm start

# 3. Run the Streamlit app (in a new terminal)
streamlit run example.py

  4. Use StreamlitFlowState for synchronized flow diagrams

    master

    The StreamlitFlowState class manages the synchronization between the React Flow frontend and the Streamlit backend. It allows changes made in the UI (like moving a node or deleting an edge) to be reflected in your Python code, and vice versa.

    from streamlit_flow.state import StreamlitFlowState

# Initialize with nodes and edges
state = StreamlitFlowState(nodes=nodes, edges=edges)

# Pass to the component
streamlit_flow('my_flow', state)

  5. Reference: Streamlit Flow Features

    master

    Streamlit Flow provides the following capabilities:

    • Visualization: Create, edit, and visualize flow diagrams.
    • Interactions: Add nodes/edges, move elements, pan, and zoom.
    • Layouts: Supports Layered, Tree, Force, Stress, Radial, Random, and Manual layouts.
    • Node Content: Supports Markdown and HTML within nodes.
    • Streamlit Integration: Capture clicks on nodes and edges directly in Streamlit.
    • State Sync: Seamlessly sync state between UI and Python.