import json
import random
import streamlit as st
import streamlit.components.v1 as components
# --- CONFIGURATION -------------------------------------------------------------
HEIGHT = 600
DEFAULT_NODES = 10
DEFAULT_EDGES = 12
# --- HELPER FUNCTIONS ----------------------------------------------------------
def random_rgb():
return "#{:02x}{:02x}{:02x}".format(
random.randint(50, 200),
random.randint(50, 200),
random.randint(50, 200)
)
def build_cytoscape_elements(n_nodes, n_edges):
"""Return Cytoscape-compatible elements JSON."""
nodes = [{"data": {"id": str(i), "label": f"Node {i}"}} for i in range(n_nodes)]
edges = [
{
"data": {
"id": f"{u}-{v}",
"source": str(u),
"target": str(v),
"weight": random.randint(1, 5),
}
}
for u, v in [random.sample(range(n_nodes), 2) for _ in range(n_edges)]
]
return nodes + edges
def build_html(elements_json, height):
"""Return complete HTML/JS string for standalone Cytoscape viewer."""
return f"""
oscape-dagre@2.5.0/cytoscape-dagre.js">
"""
# --- STREAMLIT UI --------------------------------------------------------------
st.set_page_config(page_title="Cytoscape + Streamlit Demo", layout="wide")
st.title("Cytoscape Network Viewer in Streamlit")
with st.sidebar:
st.header("Controls")
n_nodes = st.slider("Nodes", 3, 50, DEFAULT_NODES)
n_edges = st.slider("Edges", max(1, n_nodes - 1), 100, DEFAULT_EDGES)
if st.button("Regenerate"):
st.cache_data.clear()
# --- RENDER CYTOSCAPE ----------------------------------------------------------
elements = build_cytoscape_elements(n_nodes, n_edges)
html = build_html(json.dumps(elements), HEIGHT)
components.html(html, height=HEIGHT)