brut/bincio-activity
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

fix graph.html: set explicit pixel height for vis.js container

Browse Source 
vis.js requires a pixel-sized container — flex:1 is ignored.
Use position:fixed toolbar + JS-measured height for the graph div,
stored as window._network for resize handling.
This commit is contained in:
Davide Scaini
2026-04-14 22:48:37 +02:00
parent a14cee8710
commit fcc70a8d90
2 changed files with 57 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/graph.html
+39 -27
View File
@@ -6,17 +6,17 @@
<script src="https://unpkg.com/vis-network@9.1.9/standalone/umd/vis-network.min.js"></script> <script src="https://unpkg.com/vis-network@9.1.9/standalone/umd/vis-network.min.js"></script>
<style> <style>
* { box-sizing: border-box; margin: 0; padding: 0; } * { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #0f172a; color: #e2e8f0; font-family: system-ui, sans-serif; height: 100vh; display: flex; flex-direction: column; } body { background: #0f172a; color: #e2e8f0; font-family: system-ui, sans-serif; overflow: hidden; }
#toolbar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #1e293b; border-bottom: 1px solid #334155; flex-shrink: 0; flex-wrap: wrap; } #toolbar { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #1e293b; border-bottom: 1px solid #334155; flex-wrap: wrap; }
#toolbar h1 { font-size: 14px; font-weight: 600; color: #94a3b8; margin-right: 8px; } #toolbar h1 { font-size: 14px; font-weight: 600; color: #94a3b8; margin-right: 8px; }
.filter-group { display: flex; gap: 6px; } .filter-group { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-group label { display: flex; align-items: center; gap: 4px; font-size: 12px; cursor: pointer; padding: 3px 8px; border-radius: 4px; border: 1px solid #334155; } .filter-group label { display: flex; align-items: center; gap: 4px; font-size: 12px; cursor: pointer; padding: 3px 8px; border-radius: 4px; border: 1px solid #334155; }
.filter-group label:hover { background: #334155; } .filter-group label:hover { background: #334155; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
#search { background: #0f172a; border: 1px solid #334155; color: #e2e8f0; padding: 4px 10px; border-radius: 6px; font-size: 12px; width: 180px; } #search { background: #0f172a; border: 1px solid #334155; color: #e2e8f0; padding: 4px 10px; border-radius: 6px; font-size: 12px; width: 180px; }
#search::placeholder { color: #475569; } #search::placeholder { color: #475569; }
#info { margin-left: auto; font-size: 11px; color: #64748b; } #info { margin-left: auto; font-size: 11px; color: #64748b; white-space: nowrap; }
#graph { flex: 1; } #graph { position: fixed; left: 0; right: 0; bottom: 0; }
#tooltip { position: fixed; background: #1e293b; border: 1px solid #334155; border-radius: 6px; padding: 8px 12px; font-size: 12px; color: #e2e8f0; pointer-events: none; display: none; max-width: 320px; z-index: 100; } #tooltip { position: fixed; background: #1e293b; border: 1px solid #334155; border-radius: 6px; padding: 8px 12px; font-size: 12px; color: #e2e8f0; pointer-events: none; display: none; max-width: 320px; z-index: 100; }
</style> </style>
</head> </head>
@@ -999,7 +999,7 @@ const allEdges = [
}, },
{ {
"from": 66, "from": 66,
"to": 71, "to": 74,
"arrows": "to" "arrows": "to"
}, },
{ {
@@ -1009,12 +1009,7 @@ const allEdges = [
}, },
{ {
"from": 66, "from": 66,
"to": 67, "to": 69,
"arrows": "to"
},
{
"from": 66,
"to": 74,
"arrows": "to" "arrows": "to"
}, },
{ {
@@ -1024,7 +1019,7 @@ const allEdges = [
}, },
{ {
"from": 66, "from": 66,
"to": 69, "to": 71,
"arrows": "to" "arrows": "to"
}, },
{ {
@@ -1032,6 +1027,11 @@ const allEdges = [
"to": 92, "to": 92,
"arrows": "to" "arrows": "to"
}, },
{
"from": 66,
"to": 67,
"arrows": "to"
},
{ {
"from": 70, "from": 70,
"to": 82, "to": 82,
@@ -1089,12 +1089,12 @@ const allEdges = [
}, },
{ {
"from": 87, "from": 87,
"to": 82, "to": 77,
"arrows": "to" "arrows": "to"
}, },
{ {
"from": 87, "from": 87,
"to": 77, "to": 76,
"arrows": "to" "arrows": "to"
}, },
{ {
@@ -1104,7 +1104,7 @@ const allEdges = [
}, },
{ {
"from": 87, "from": 87,
"to": 76, "to": 82,
"arrows": "to" "arrows": "to"
}, },
{ {
@@ -1114,12 +1114,12 @@ const allEdges = [
}, },
{ {
"from": 91, "from": 91,
"to": 73, "to": 90,
"arrows": "to" "arrows": "to"
}, },
{ {
"from": 91, "from": 91,
"to": 90, "to": 73,
"arrows": "to" "arrows": "to"
}, },
{ {
@@ -1142,6 +1142,11 @@ const allEdges = [
"to": 85, "to": 85,
"arrows": "to" "arrows": "to"
}, },
{
"from": 96,
"to": 85,
"arrows": "to"
},
{ {
"from": 96, "from": 96,
"to": 82, "to": 82,
@@ -1153,8 +1158,8 @@ const allEdges = [
"arrows": "to" "arrows": "to"
}, },
{ {
"from": 96, "from": 97,
"to": 85, "to": 96,
"arrows": "to" "arrows": "to"
}, },
{ {
@@ -1164,7 +1169,7 @@ const allEdges = [
}, },
{ {
"from": 97, "from": 97,
"to": 96, "to": 94,
"arrows": "to" "arrows": "to"
}, },
{ {
@@ -1177,11 +1182,6 @@ const allEdges = [
"to": 95, "to": 95,
"arrows": "to" "arrows": "to"
}, },
{
"from": 97,
"to": 94,
"arrows": "to"
},
{ {
"from": 98, "from": 98,
"to": 82, "to": 82,
@@ -1272,6 +1272,17 @@ const groups = {
} }
}; };
// Size the graph container to fill below the toolbar
function sizeGraph() {
const tb = document.getElementById('toolbar');
const g = document.getElementById('graph');
const h = tb.getBoundingClientRect().height;
g.style.top = h + 'px';
g.style.height = (window.innerHeight - h) + 'px';
}
sizeGraph();
window.addEventListener('resize', () => { sizeGraph(); if (window._network) window._network.redraw(); });
const nodesDS = new vis.DataSet(allNodes); const nodesDS = new vis.DataSet(allNodes);
const edgesDS = new vis.DataSet(allEdges); const edgesDS = new vis.DataSet(allEdges);
@@ -1305,6 +1316,7 @@ const options = {
}; };
const network = new vis.Network(container, { nodes: nodesDS, edges: edgesDS }, options); const network = new vis.Network(container, { nodes: nodesDS, edges: edgesDS }, options);
window._network = network;
// Info count // Info count
document.getElementById('info').textContent = document.getElementById('info').textContent =
scripts/gen_graph.py
+18 -6
View File
@@ -380,17 +380,17 @@ def write_visjs(data: dict) -> Path:
<script src="https://unpkg.com/vis-network@9.1.9/standalone/umd/vis-network.min.js"></script> <script src="https://unpkg.com/vis-network@9.1.9/standalone/umd/vis-network.min.js"></script>
<style> <style>
* {{ box-sizing: border-box; margin: 0; padding: 0; }} * {{ box-sizing: border-box; margin: 0; padding: 0; }}
body {{ background: #0f172a; color: #e2e8f0; font-family: system-ui, sans-serif; height: 100vh; display: flex; flex-direction: column; }} body {{ background: #0f172a; color: #e2e8f0; font-family: system-ui, sans-serif; overflow: hidden; }}
#toolbar {{ display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #1e293b; border-bottom: 1px solid #334155; flex-shrink: 0; flex-wrap: wrap; }} #toolbar {{ position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #1e293b; border-bottom: 1px solid #334155; flex-wrap: wrap; }}
#toolbar h1 {{ font-size: 14px; font-weight: 600; color: #94a3b8; margin-right: 8px; }} #toolbar h1 {{ font-size: 14px; font-weight: 600; color: #94a3b8; margin-right: 8px; }}
.filter-group {{ display: flex; gap: 6px; }} .filter-group {{ display: flex; gap: 6px; flex-wrap: wrap; }}
.filter-group label {{ display: flex; align-items: center; gap: 4px; font-size: 12px; cursor: pointer; padding: 3px 8px; border-radius: 4px; border: 1px solid #334155; }} .filter-group label {{ display: flex; align-items: center; gap: 4px; font-size: 12px; cursor: pointer; padding: 3px 8px; border-radius: 4px; border: 1px solid #334155; }}
.filter-group label:hover {{ background: #334155; }} .filter-group label:hover {{ background: #334155; }}
.dot {{ width: 10px; height: 10px; border-radius: 50%; display: inline-block; }} .dot {{ width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }}
#search {{ background: #0f172a; border: 1px solid #334155; color: #e2e8f0; padding: 4px 10px; border-radius: 6px; font-size: 12px; width: 180px; }} #search {{ background: #0f172a; border: 1px solid #334155; color: #e2e8f0; padding: 4px 10px; border-radius: 6px; font-size: 12px; width: 180px; }}
#search::placeholder {{ color: #475569; }} #search::placeholder {{ color: #475569; }}
#info {{ margin-left: auto; font-size: 11px; color: #64748b; }} #info {{ margin-left: auto; font-size: 11px; color: #64748b; white-space: nowrap; }}
#graph {{ flex: 1; }} #graph {{ position: fixed; left: 0; right: 0; bottom: 0; }}
#tooltip {{ position: fixed; background: #1e293b; border: 1px solid #334155; border-radius: 6px; padding: 8px 12px; font-size: 12px; color: #e2e8f0; pointer-events: none; display: none; max-width: 320px; z-index: 100; }} #tooltip {{ position: fixed; background: #1e293b; border: 1px solid #334155; border-radius: 6px; padding: 8px 12px; font-size: 12px; color: #e2e8f0; pointer-events: none; display: none; max-width: 320px; z-index: 100; }}
</style> </style>
</head> </head>
@@ -418,6 +418,17 @@ const allNodes = {json.dumps(nodes, indent=2)};
const allEdges = {json.dumps(edges, indent=2)}; const allEdges = {json.dumps(edges, indent=2)};
const groups = {json.dumps(groups, indent=2)}; const groups = {json.dumps(groups, indent=2)};
// Size the graph container to fill below the toolbar
function sizeGraph() {{
const tb = document.getElementById('toolbar');
const g = document.getElementById('graph');
const h = tb.getBoundingClientRect().height;
g.style.top = h + 'px';
g.style.height = (window.innerHeight - h) + 'px';
}}
sizeGraph();
window.addEventListener('resize', () => {{ sizeGraph(); if (window._network) window._network.redraw(); }});
const nodesDS = new vis.DataSet(allNodes); const nodesDS = new vis.DataSet(allNodes);
const edgesDS = new vis.DataSet(allEdges); const edgesDS = new vis.DataSet(allEdges);
@@ -451,6 +462,7 @@ const options = {{
}}; }};
const network = new vis.Network(container, {{ nodes: nodesDS, edges: edgesDS }}, options); const network = new vis.Network(container, {{ nodes: nodesDS, edges: edgesDS }}, options);
window._network = network;
// Info count // Info count
document.getElementById('info').textContent = document.getElementById('info').textContent =