From fcc70a8d90eecaaa857ba96d95f87fbe936ccf9f Mon Sep 17 00:00:00 2001
From: Davide Scaini <davide.scaini@alumni.cern>
Date: Tue, 14 Apr 2026 22:48:37 +0200
Subject: [PATCH] fix graph.html: set explicit pixel height for vis.js
 container
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 docs/graph.html      | 66 ++++++++++++++++++++++++++------------------
 scripts/gen_graph.py | 24 ++++++++++++----
 2 files changed, 57 insertions(+), 33 deletions(-)

diff --git a/docs/graph.html b/docs/graph.html
index 5962988..14c6d20 100644
--- a/docs/graph.html
+++ b/docs/graph.html
@@ -6,17 +6,17 @@
 <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>
@@ -999,7 +999,7 @@ const allEdges = [
   },
   {
     "from": 66,
-    "to": 71,
+    "to": 74,
     "arrows": "to"
   },
   {
@@ -1009,12 +1009,7 @@ const allEdges = [
   },
   {
     "from": 66,
-    "to": 67,
-    "arrows": "to"
-  },
-  {
-    "from": 66,
-    "to": 74,
+    "to": 69,
     "arrows": "to"
   },
   {
@@ -1024,7 +1019,7 @@ const allEdges = [
   },
   {
     "from": 66,
-    "to": 69,
+    "to": 71,
     "arrows": "to"
   },
   {
@@ -1032,6 +1027,11 @@ const allEdges = [
     "to": 92,
     "arrows": "to"
   },
+  {
+    "from": 66,
+    "to": 67,
+    "arrows": "to"
+  },
   {
     "from": 70,
     "to": 82,
@@ -1089,12 +1089,12 @@ const allEdges = [
   },
   {
     "from": 87,
-    "to": 82,
+    "to": 77,
     "arrows": "to"
   },
   {
     "from": 87,
-    "to": 77,
+    "to": 76,
     "arrows": "to"
   },
   {
@@ -1104,7 +1104,7 @@ const allEdges = [
   },
   {
     "from": 87,
-    "to": 76,
+    "to": 82,
     "arrows": "to"
   },
   {
@@ -1114,12 +1114,12 @@ const allEdges = [
   },
   {
     "from": 91,
-    "to": 73,
+    "to": 90,
     "arrows": "to"
   },
   {
     "from": 91,
-    "to": 90,
+    "to": 73,
     "arrows": "to"
   },
   {
@@ -1142,6 +1142,11 @@ const allEdges = [
     "to": 85,
     "arrows": "to"
   },
+  {
+    "from": 96,
+    "to": 85,
+    "arrows": "to"
+  },
   {
     "from": 96,
     "to": 82,
@@ -1153,8 +1158,8 @@ const allEdges = [
     "arrows": "to"
   },
   {
-    "from": 96,
-    "to": 85,
+    "from": 97,
+    "to": 96,
     "arrows": "to"
   },
   {
@@ -1164,7 +1169,7 @@ const allEdges = [
   },
   {
     "from": 97,
-    "to": 96,
+    "to": 94,
     "arrows": "to"
   },
   {
@@ -1177,11 +1182,6 @@ const allEdges = [
     "to": 95,
     "arrows": "to"
   },
-  {
-    "from": 97,
-    "to": 94,
-    "arrows": "to"
-  },
   {
     "from": 98,
     "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 edgesDS = new vis.DataSet(allEdges);
 
@@ -1305,6 +1316,7 @@ const options = {
 };
 
 const network = new vis.Network(container, { nodes: nodesDS, edges: edgesDS }, options);
+window._network = network;
 
 // Info count
 document.getElementById('info').textContent =
diff --git a/scripts/gen_graph.py b/scripts/gen_graph.py
index c96932c..262d0ca 100644
--- a/scripts/gen_graph.py
+++ b/scripts/gen_graph.py
@@ -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 =