Spaces:
Sleeping
Sleeping
Update src/streamlit_app.py
Browse files- src/streamlit_app.py +36 -63
src/streamlit_app.py
CHANGED
|
@@ -1,7 +1,7 @@
|
|
| 1 |
import json
|
| 2 |
import random
|
| 3 |
import streamlit as st
|
| 4 |
-
|
| 5 |
|
| 6 |
# --- CONFIGURATION -------------------------------------------------------------
|
| 7 |
HEIGHT = 600
|
|
@@ -32,66 +32,6 @@ def build_cytoscape_elements(n_nodes, 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 |
-
background_color = random_rgb()
|
| 38 |
-
return f"""
|
| 39 |
-
<!DOCTYPE html>
|
| 40 |
-
<html>
|
| 41 |
-
<head>
|
| 42 |
-
<meta charset="utf-8" />
|
| 43 |
-
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cytoscape.min.js"></script>
|
| 44 |
-
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dagre.min.js"></script>
|
| 45 |
-
<script src="https://cdn.jsdelivr.net/npm/[email protected]/cytoscape-dagre.js"></script>
|
| 46 |
-
<style>
|
| 47 |
-
html, body {{{{ margin: 0; height: 100%; }}}}
|
| 48 |
-
#cy {{{{ width: 100%; height: {height}px; border: 1px solid #ccc; }}}}
|
| 49 |
-
</style>
|
| 50 |
-
</head>
|
| 51 |
-
<body>
|
| 52 |
-
<div id="cy"></div>
|
| 53 |
-
<script>
|
| 54 |
-
// Register dagre layout extension
|
| 55 |
-
if (typeof cytoscape !== 'undefined' && typeof cytoscape.use === 'function' && typeof dagre !== 'undefined') {{
|
| 56 |
-
cytoscape.use(cytoscapeDagre);
|
| 57 |
-
}}
|
| 58 |
-
const elements = {elements_json};
|
| 59 |
-
const cy = cytoscape({{
|
| 60 |
-
container: document.getElementById('cy'),
|
| 61 |
-
elements: elements,
|
| 62 |
-
style: [
|
| 63 |
-
{{
|
| 64 |
-
selector: 'node',
|
| 65 |
-
style: {{
|
| 66 |
-
'label': 'data(label)',
|
| 67 |
-
'background-color': '{background_color}',
|
| 68 |
-
'text-valign': 'center',
|
| 69 |
-
'color': '#fff',
|
| 70 |
-
'font-size': 12
|
| 71 |
-
}}
|
| 72 |
-
}},
|
| 73 |
-
{{
|
| 74 |
-
selector: 'edge',
|
| 75 |
-
style: {{
|
| 76 |
-
'width': 'mapData(weight, 1, 5, 1, 5)',
|
| 77 |
-
'line-color': '#bbb',
|
| 78 |
-
'target-arrow-color': '#bbb',
|
| 79 |
-
'curve-style': 'bezier',
|
| 80 |
-
'target-arrow-shape': 'triangle'
|
| 81 |
-
}}
|
| 82 |
-
}}
|
| 83 |
-
]
|
| 84 |
-
}});
|
| 85 |
-
// Apply layout after elements are added
|
| 86 |
-
cy.layout({{ name: 'dagre', rankDir: 'LR' }}).run();
|
| 87 |
-
|
| 88 |
-
// Resize handling for Streamlit container
|
| 89 |
-
window.addEventListener('resize', () => cy.resize());
|
| 90 |
-
</script>
|
| 91 |
-
</body>
|
| 92 |
-
</html>
|
| 93 |
-
"""
|
| 94 |
-
|
| 95 |
# --- STREAMLIT UI --------------------------------------------------------------
|
| 96 |
st.set_page_config(page_title="Cytoscape + Streamlit Demo", layout="wide")
|
| 97 |
st.title("Cytoscape Network Viewer in Streamlit")
|
|
@@ -106,5 +46,38 @@ with st.sidebar:
|
|
| 106 |
|
| 107 |
# --- RENDER CYTOSCAPE ----------------------------------------------------------
|
| 108 |
elements = build_cytoscape_elements(n_nodes, n_edges)
|
| 109 |
-
|
| 110 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
import json
|
| 2 |
import random
|
| 3 |
import streamlit as st
|
| 4 |
+
from st_cytoscape import cytoscape
|
| 5 |
|
| 6 |
# --- CONFIGURATION -------------------------------------------------------------
|
| 7 |
HEIGHT = 600
|
|
|
|
| 32 |
]
|
| 33 |
return nodes + edges
|
| 34 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 35 |
# --- STREAMLIT UI --------------------------------------------------------------
|
| 36 |
st.set_page_config(page_title="Cytoscape + Streamlit Demo", layout="wide")
|
| 37 |
st.title("Cytoscape Network Viewer in Streamlit")
|
|
|
|
| 46 |
|
| 47 |
# --- RENDER CYTOSCAPE ----------------------------------------------------------
|
| 48 |
elements = build_cytoscape_elements(n_nodes, n_edges)
|
| 49 |
+
|
| 50 |
+
# Define the stylesheet for nodes and edges
|
| 51 |
+
stylesheet = [
|
| 52 |
+
{
|
| 53 |
+
"selector": 'node',
|
| 54 |
+
"style": {
|
| 55 |
+
'label': 'data(label)',
|
| 56 |
+
'background-color': random_rgb(),
|
| 57 |
+
'text-valign': 'center',
|
| 58 |
+
'color': '#fff',
|
| 59 |
+
'font-size': 12
|
| 60 |
+
}
|
| 61 |
+
},
|
| 62 |
+
{
|
| 63 |
+
"selector": 'edge',
|
| 64 |
+
"style": {
|
| 65 |
+
'width': 'mapData(weight, 1, 5, 1, 5)',
|
| 66 |
+
'line-color': '#bbb',
|
| 67 |
+
'target-arrow-color': '#bbb',
|
| 68 |
+
'curve-style': 'bezier',
|
| 69 |
+
'target-arrow-shape': 'triangle'
|
| 70 |
+
}
|
| 71 |
+
}
|
| 72 |
+
]
|
| 73 |
+
|
| 74 |
+
# Render the Cytoscape graph using the st_cytoscape component
|
| 75 |
+
cytoscape(
|
| 76 |
+
elements=elements,
|
| 77 |
+
stylesheet=stylesheet,
|
| 78 |
+
layout={'name': 'dagre', 'rankDir': 'LR'},
|
| 79 |
+
height=f"{HEIGHT}px",
|
| 80 |
+
user_zooming_enabled=True,
|
| 81 |
+
user_panning_enabled=True,
|
| 82 |
+
selection_type="additive"
|
| 83 |
+
)
|