import streamlit as st
from st_cytoscape import cytoscape

# 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"}},
# ]

import requests
import json

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']

stylesheet = [
    {"selector": "node",
      "style": {"label": "data(station_name)", "width": 10, "height": 10}},
    # {
    #     "selector": "edge",
    #     "style": {
    #         "width": 3,
    #         "curve-style": "bezier",
    #         "target-arrow-shape": "triangle",
    #     },
    # },
]


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"])))