From 24f9b7d955b6c8b27c6ae41fc7f061693ecc93a0 Mon Sep 17 00:00:00 2001
From: Ethanfel <ethan.fel@ts-pc.fr>
Date: Sat, 28 Feb 2026 00:27:00 +0100
Subject: [PATCH] Fix graph interactivity: use querySelector instead of NiceGUI
 DOM ID

The c{id} DOM ID pattern was wrong. Use document.querySelector with
the timeline-graph class instead, with retries until g.node elements
are present in the DOM.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 tab_timeline_ng.py | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/tab_timeline_ng.py b/tab_timeline_ng.py
index d5950fc..daaf460 100644
--- a/tab_timeline_ng.py
+++ b/tab_timeline_ng.py
@@ -440,20 +440,18 @@ def _render_graphviz(dot_source: str, selected_node_id: str | None = None):
             }
         </style>'''
 
-        html_el = ui.html(
+        ui.html(
             f'{css}<div class="timeline-graph"'
             f' style="overflow: auto; max-height: 500px; width: 100%;">'
             f'{svg}</div>'
         )
 
-        # Use NiceGUI element id → DOM id "c{id}" with retry for Vue render
-        nicegui_id = f'c{html_el.id}'
+        # Find container by class with retry for Vue async render
         ui.run_javascript(f'''
         (function attempt(tries) {{
-            var wrapper = document.getElementById('{nicegui_id}');
-            var container = wrapper && wrapper.querySelector('.timeline-graph');
-            if (!container) {{
-                if (tries < 10) setTimeout(function() {{ attempt(tries + 1); }}, 50);
+            var container = document.querySelector('.timeline-graph');
+            if (!container || !container.querySelector('g.node')) {{
+                if (tries < 20) setTimeout(function() {{ attempt(tries + 1); }}, 100);
                 return;
             }}
             container.querySelectorAll('g.node').forEach(function(g) {{