Code Editor for app.py

import streamlit as st
from streamlit_flow import streamlit_flow
from streamlit_flow.elements import StreamlitFlowNode, StreamlitFlowEdge
from streamlit_flow.state import StreamlitFlowState
from streamlit_flow.layouts import RadialLayout
import networkx as nx

# Set page config and title
st.set_page_config(layout="wide", page_title="Interactive Flow Diagram")
st.title("Interactive Flow Network Visualization")

# Sidebar controls
st.sidebar.header("Network Controls")
num_nodes = st.sidebar.slider("Number of Nodes", min_value=3, max_value=10, value=5)
layout_radius = st.sidebar.slider("Layout Radius", min_value=100, max_value=500, value=200)

# Create nodes and edges
nodes = []
edges = []

# Create nodes with different colors
colors = ['#FF9999', '#99FF99', '#9999FF', '#FFFF99', '#FF99FF', '#99FFFF', 
          '#FFB366', '#66FFB3', '#B366FF', '#66B3FF']

for i in range(num_nodes):
    nodes.append(
        StreamlitFlowNode(
            id=f"node_{i}",
            data={
                "label": f"Node {i}",
                "style": {
                    "background": colors[i],
                    "border": "2px solid #666",
                    "borderRadius": "10px",
                    "padding": "10px",
                    "fontSize": "16px",
                    "width": "100px",
                    "height": "50px",
                    "display": "flex",
                    "alignItems": "center",
                    "justifyContent": "center"
                }
            }
        )
    )

# Create circular connections between nodes
for i in range(num_nodes):
    next_node = (i + 1) % num_nodes
    edges.append(
        StreamlitFlowEdge(
            id=f"edge_{i}_{next_node}",
            source=f"node_{i}",
            target=f"node_{next_node}",
            data={
                "style": {
                    "stroke": "#666",
                    "strokeWidth": 2,
                }
            }
        )
    )

# Create layout
layout = RadialLayout(radius=layout_radius)

# Initialize flow state
flow_state = StreamlitFlowState(
    nodes=nodes,
    edges=edges,
    layout=layout
)

# Display instructions
st.write("""
### Instructions:
- Drag nodes to reposition them
- Use the sidebar controls to adjust the network
- Click on nodes to select them
""")

# Create columns for the visualization and info panel
col1, col2 = st.columns([3, 1])

with col1:
    # Render the flow diagram
    result = streamlit_flow(
        flow_state,
        key="flow1",
        height=600,
        style={
            "background": "#f5f5f5",
            "border": "1px solid #ddd",
            "borderRadius": "10px",
        }
    )

with col2:
    # Display interaction information
    st.subheader("Interaction Info")
    
    if result.selected_nodes:
        st.write("Selected Nodes:")
        for node in result.selected_nodes:
            st.write(f"- {node}")
    else:
        st.write("No nodes selected")

    if result.selected_edges:
        st.write("Selected Edges:")
        for edge in result.selected_edges:
            st.write(f"- {edge}")
    else:
        st.write("No edges selected")

    # Add some network metrics
    st.subheader("Network Metrics")
    st.write(f"Total Nodes: {num_nodes}")
    st.write(f"Total Edges: {len(edges)}")
    
    # Create a simple graph for metrics calculation
    G = nx.Graph()
    G.add_nodes_from([node.id for node in nodes])
    G.add_edges_from([(edge.source, edge.target) for edge in edges])
    
    density = nx.density(G)
    st.write(f"Network Density: {density:.2f}")
    
    avg_degree = sum(dict(G.degree()).values()) / len(G)
    st.write(f"Average Degree: {avg_degree:.2f}")