Spaces:
Sleeping
Sleeping
Upload src/streamlit_app.py with huggingface_hub
Browse files- src/streamlit_app.py +17 -16
src/streamlit_app.py
CHANGED
|
@@ -34,6 +34,7 @@ def build_cytoscape_elements(n_nodes, n_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>
|
|
@@ -43,46 +44,46 @@ def build_html(elements_json, height):
|
|
| 43 |
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dagre.min.js"></script>
|
| 44 |
<script src="https://cdn.jsdelivr.net/npm/[email protected]/cytoscape-dagre.js"></script>
|
| 45 |
<style>
|
| 46 |
-
html, body {{ margin: 0; height: 100%; }}
|
| 47 |
-
#cy {{ width: 100%; height: {height}px; border: 1px solid #ccc; }}
|
| 48 |
</style>
|
| 49 |
</head>
|
| 50 |
<body>
|
| 51 |
<div id="cy"></div>
|
| 52 |
<script>
|
| 53 |
// Register dagre layout extension
|
| 54 |
-
if (typeof cytoscape !== 'undefined' && typeof cytoscape.use === 'function' && typeof dagre !== 'undefined') {
|
| 55 |
cytoscape.use(cytoscapeDagre);
|
| 56 |
-
}
|
| 57 |
const elements = {elements_json};
|
| 58 |
-
const cy = cytoscape({
|
| 59 |
container: document.getElementById('cy'),
|
| 60 |
elements: elements,
|
| 61 |
style: [
|
| 62 |
-
{
|
| 63 |
selector: 'node',
|
| 64 |
-
style: {
|
| 65 |
'label': 'data(label)',
|
| 66 |
-
'background-color': '
|
| 67 |
'text-valign': 'center',
|
| 68 |
'color': '#fff',
|
| 69 |
'font-size': 12
|
| 70 |
-
}
|
| 71 |
-
},
|
| 72 |
-
{
|
| 73 |
selector: 'edge',
|
| 74 |
-
style: {
|
| 75 |
'width': 'mapData(weight, 1, 5, 1, 5)',
|
| 76 |
'line-color': '#bbb',
|
| 77 |
'target-arrow-color': '#bbb',
|
| 78 |
'curve-style': 'bezier',
|
| 79 |
'target-arrow-shape': 'triangle'
|
| 80 |
-
}
|
| 81 |
-
}
|
| 82 |
]
|
| 83 |
-
});
|
| 84 |
// Apply layout after elements are added
|
| 85 |
-
cy.layout({ name: 'dagre', rankDir: 'LR' }).run();
|
| 86 |
|
| 87 |
// Resize handling for Streamlit container
|
| 88 |
window.addEventListener('resize', () => cy.resize());
|
|
|
|
| 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>
|
|
|
|
| 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());
|