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
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>
<style>
* {{ 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; }}
#toolbar {{ display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #1e293b; border-bottom: 1px solid #334155; flex-shrink: 0; flex-wrap: wrap; }}
body {{ background: #0f172a; color: #e2e8f0; font-family: system-ui, sans-serif; overflow: hidden; }}
#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; }}
.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: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::placeholder {{ color: #475569; }}
#info {{ margin-left: auto; font-size: 11px; color: #64748b; }}
#graph {{ flex: 1; }}
#info {{ margin-left: auto; font-size: 11px; color: #64748b; white-space: nowrap; }}
#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; }}
</style>
</head>
@@ -418,6 +418,17 @@ const allNodes = {json.dumps(nodes, indent=2)};
const allEdges = {json.dumps(edges, 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 edgesDS = new vis.DataSet(allEdges);
@@ -451,6 +462,7 @@ const options = {{
}};
const network = new vis.Network(container, {{ nodes: nodesDS, edges: edgesDS }}, options);
window._network = network;
// Info count
document.getElementById('info').textContent =