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>''' </style>'''
html_el = ui.html( ui.html(
f'{css}<div class="timeline-graph"' f'{css}<div class="timeline-graph"'
f' style="overflow: auto; max-height: 500px; width: 100%;">' f' style="overflow: auto; max-height: 500px; width: 100%;">'
f'{svg}</div>' f'{svg}</div>'
) )
# Use NiceGUI element id → DOM id "c{id}" with retry for Vue render # Find container by class with retry for Vue async render
nicegui_id = f'c{html_el.id}'
ui.run_javascript(f''' ui.run_javascript(f'''
(function attempt(tries) {{ (function attempt(tries) {{
var wrapper = document.getElementById('{nicegui_id}'); var container = document.querySelector('.timeline-graph');
var container = wrapper && wrapper.querySelector('.timeline-graph'); if (!container || !container.querySelector('g.node')) {{
if (!container) {{ if (tries < 20) setTimeout(function() {{ attempt(tries + 1); }}, 100);
if (tries < 10) setTimeout(function() {{ attempt(tries + 1); }}, 50);
return; return;
}} }}
container.querySelectorAll('g.node').forEach(function(g) {{ container.querySelectorAll('g.node').forEach(function(g) {{