Ethanfel/Comfyui-JSON-Manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix graph interactivity: use querySelector instead of NiceGUI DOM ID

Browse Source 
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>
This commit is contained in:
Ethanfel
2026-02-28 00:27:00 +01:00
parent d56f6d8170
commit 24f9b7d955
1 changed files with 5 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
tab_timeline_ng.py
View File

@@ -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) {{