Spaces:
Sleeping
Sleeping
Upload src/streamlit_app.py with huggingface_hub
Browse files- src/streamlit_app.py +27 -17
src/streamlit_app.py
CHANGED
|
@@ -39,8 +39,9 @@ def build_html(elements_json, height):
|
|
| 39 |
<html>
|
| 40 |
<head>
|
| 41 |
<meta charset="utf-8" />
|
| 42 |
-
<script src="https://
|
| 43 |
-
<script src="https://
|
|
|
|
| 44 |
<style>
|
| 45 |
html, body {{ margin: 0; height: 100%; }}
|
| 46 |
#cy {{ width: 100%; height: {height}px; border: 1px solid #ccc; }}
|
|
@@ -49,33 +50,42 @@ def build_html(elements_json, height):
|
|
| 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': '
|
| 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': '#
|
| 72 |
-
'target-arrow-color': '#
|
|
|
|
| 73 |
'target-arrow-shape': 'triangle'
|
| 74 |
-
}
|
| 75 |
-
}
|
| 76 |
-
]
|
| 77 |
-
|
| 78 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
| 79 |
</script>
|
| 80 |
</body>
|
| 81 |
</html>
|
|
|
|
| 39 |
<html>
|
| 40 |
<head>
|
| 41 |
<meta charset="utf-8" />
|
| 42 |
+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cytoscape.min.js"></script>
|
| 43 |
+
<script src="https://cdn.jsdelivr.net/npm/dagre@0.8.5/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; }}
|
|
|
|
| 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': '#4E79A7',
|
| 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());
|
| 89 |
</script>
|
| 90 |
</body>
|
| 91 |
</html>
|