Update src/streamlit_app.py

src/streamlit_app.py

@@ -1,83 +1,39 @@
-import json
-import random
 import streamlit as st
 from st_cytoscape import cytoscape
 
-# --- 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
-
-# --- STREAMLIT UI --------------------------------------------------------------
-st.set_page_config(page_title="Cytoscape + Streamlit Demo", layout="wide")
-st.title("Cytoscape Network Viewer in Streamlit")
+# elements = [
+#     {"data": {"id": "X"}, "selected": True, "selectable": False},
+#     {"data": {"id": "Y"}},
+#     {"data": {"id": "Z"}},
+#     {"data": {"source": "X", "target": "Y", "id": "X➞Y"}},
+#     {"data": {"source": "Z", "target": "Y", "id": "Z➞Y"}},
+#     {"data": {"source": "Z", "target": "X", "id": "Z➞X"}},
+# ]
 
-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()
+import requests
+import json
 
-# --- RENDER CYTOSCAPE ----------------------------------------------------------
-elements = build_cytoscape_elements(n_nodes, n_edges)
+url = "https://raw.githubusercontent.com/cytoscape/cytoscape.js/refs/heads/master/documentation/demos/tokyo-railways/tokyo-railways.json"
+response = requests.get(url)
+data = json.loads(response.text)
+elements = data['elements']['nodes'] + data['elements']['edges']
 
-# Define the stylesheet for nodes and edges
 stylesheet = [
-    {
-        "selector": 'node',
-        "style": {
-            'label': 'data(label)',
-            'background-color': random_rgb(),
-            'text-valign': 'center',
-            'color': '#fff',
-            'font-size': 12
-        }
-    },
-    {
-        "selector": 'edge',
-        "style": {
-            'width': 'mapData(weight, 1, 5, 1, 5)',
-            'line-color': '#bbb',
-            'target-arrow-color': '#bbb',
-            'curve-style': 'bezier',
-            'target-arrow-shape': 'triangle'
-        }
-    }
+    {"selector": "node",
+      "style": {"label": "data(station_name)", "width": 10, "height": 10}},
+    # {
+    #     "selector": "edge",
+    #     "style": {
+    #         "width": 3,
+    #         "curve-style": "bezier",
+    #         "target-arrow-shape": "triangle",
+    #     },
+    # },
 ]
 
-# Render the Cytoscape graph using the st_cytoscape component
-cytoscape(
-    elements=elements,
-    stylesheet=stylesheet,
-    layout={'name': 'dagre', 'rankDir': 'LR'},
-    height=f"{HEIGHT}px",
-    user_zooming_enabled=True,
-    user_panning_enabled=True,
-    selection_type="additive"
-)
+
+selected = cytoscape(elements, stylesheet, width="100%", height="540px", layout={"name": "preset"}, key="graph")
+
+print(selected)
+st.markdown("**Selected nodes**: %s" % (", ".join(selected["nodes"])))
+st.markdown("**Selected edges**: %s" % (", ".join(selected["edges"])))