Hugging Face's logo

Spaces:
kozo2
/
streamlit-cytoscape
Sleeping

App Files Community
kozo2 commited on
Commit
d8f6f04
·
verified ·
1 Parent(s): 7aa8120

Upload src/streamlit_app.py with huggingface_hub

Browse files
Files changed (1) hide show
  1. src/streamlit_app.py +97 -38
src/streamlit_app.py CHANGED
@@ -1,40 +1,99 @@
1
- import altair as alt
2
- import numpy as np
3
- import pandas as pd
4
  import streamlit as st
 
5
 
6
- """
7
- # Welcome to Streamlit!
8
-
9
- Edit `/streamlit_app.py` to customize this app to your heart's desire :heart:.
10
- If you have any questions, checkout our [documentation](https://docs.streamlit.io) and [community
11
- forums](https://discuss.streamlit.io).
12
-
13
- In the meantime, below is an example of what you can do with just a few lines of code:
14
- """
15
-
16
- num_points = st.slider("Number of points in spiral", 1, 10000, 1100)
17
- num_turns = st.slider("Number of turns in spiral", 1, 300, 31)
18
-
19
- indices = np.linspace(0, 1, num_points)
20
- theta = 2 * np.pi * num_turns * indices
21
- radius = indices
22
-
23
- x = radius * np.cos(theta)
24
- y = radius * np.sin(theta)
25
-
26
- df = pd.DataFrame({
27
- "x": x,
28
- "y": y,
29
- "idx": indices,
30
- "rand": np.random.randn(num_points),
31
- })
32
-
33
- st.altair_chart(alt.Chart(df, height=700, width=700)
34
- .mark_point(filled=True)
35
- .encode(
36
- x=alt.X("x", axis=None),
37
- y=alt.Y("y", axis=None),
38
- color=alt.Color("idx", legend=None, scale=alt.Scale()),
39
- size=alt.Size("rand", legend=None, scale=alt.Scale(range=[1, 150])),
40
- ))
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import json
2
+ import random
 
3
  import streamlit as st
4
+ import streamlit.components.v1 as components
5
 
6
+ # --- CONFIGURATION -------------------------------------------------------------
7
+ HEIGHT = 600
8
+ DEFAULT_NODES = 10
9
+ DEFAULT_EDGES = 12
10
+
11
+ # --- HELPER FUNCTIONS ----------------------------------------------------------
12
+ def random_rgb():
13
+ return "#{:02x}{:02x}{:02x}".format(
14
+ random.randint(50, 200),
15
+ random.randint(50, 200),
16
+ random.randint(50, 200)
17
+ )
18
+
19
+ def build_cytoscape_elements(n_nodes, n_edges):
20
+ """Return Cytoscape-compatible elements JSON."""
21
+ nodes = [{"data": {"id": str(i), "label": f"Node {i}"}} for i in range(n_nodes)]
22
+ edges = [
23
+ {
24
+ "data": {
25
+ "id": f"{u}-{v}",
26
+ "source": str(u),
27
+ "target": str(v),
28
+ "weight": random.randint(1, 5),
29
+ }
30
+ }
31
+ for u, v in [random.sample(range(n_nodes), 2) for _ in range(n_edges)]
32
+ ]
33
+ return nodes + edges
34
+
35
+ def build_html(elements_json, height):
36
+ """Return complete HTML/JS string for standalone Cytoscape viewer."""
37
+ return f"""
38
+ <!DOCTYPE html>
39
+ <html>
40
+ <head>
41
+ <meta charset="utf-8" />
42
+ <script src="https://unpkg.com/[email protected]/dist/cytoscape.min.js"></script>
43
+ <script src="https://unpkg.com/[email protected]/cytoscape-dagre.js"></script>
44
+ <style>
45
+ html, body {{ margin: 0; height: 100%; }}
46
+ #cy {{ width: 100%; height: {height}px; border: 1px solid #ccc; }}
47
+ </style>
48
+ </head>
49
+ <body>
50
+ <div id="cy"></div>
51
+ <script>
52
+ const elements = {elements_json};
53
+ const cy = cytoscape({{
54
+ container: document.getElementById('cy'),
55
+ elements: elements,
56
+ style: [
57
+ {{
58
+ selector: 'node',
59
+ style: {{
60
+ 'label': 'data(label)',
61
+ 'background-color': '{random_rgb()}',
62
+ 'text-valign': 'center',
63
+ 'color': '#fff',
64
+ 'font-size': 12
65
+ }}
66
+ }},
67
+ {{
68
+ selector: 'edge',
69
+ style: {{
70
+ 'width': 'mapData(weight, 1, 5, 1, 5)',
71
+ 'line-color': '#ccc',
72
+ 'target-arrow-color': '#ccc',
73
+ 'target-arrow-shape': 'triangle'
74
+ }}
75
+ }}
76
+ ],
77
+ layout: {{ name: 'dagre', directed: true }}
78
+ }});
79
+ </script>
80
+ </body>
81
+ </html>
82
+ """
83
+
84
+ # --- STREAMLIT UI --------------------------------------------------------------
85
+ st.set_page_config(page_title="Cytoscape + Streamlit Demo", layout="wide")
86
+ st.title("Cytoscape Network Viewer in Streamlit")
87
+
88
+ with st.sidebar:
89
+ st.header("Controls")
90
+ n_nodes = st.slider("Nodes", 3, 50, DEFAULT_NODES)
91
+ n_edges = st.slider("Edges", max(1, n_nodes - 1), 100, DEFAULT_EDGES)
92
+
93
+ if st.button("Regenerate"):
94
+ st.cache_data.clear()
95
+
96
+ # --- RENDER CYTOSCAPE ----------------------------------------------------------
97
+ elements = build_cytoscape_elements(n_nodes, n_edges)
98
+ html = build_html(json.dumps(elements), HEIGHT)
99
+ components.html(html, height=HEIGHT)