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

Fix graph interactivity: use NiceGUI element ref and requestAnimationFrame

Browse Source 
The click handlers weren't attaching because getElementById couldn't
find the container — Python's id() generated IDs that didn't survive
NiceGUI's DOM rendering. Now uses getElement() with the NiceGUI
element ID and defers JS via requestAnimationFrame to ensure the
DOM is ready.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ethanfel
2026-02-28 00:15:56 +01:00
parent 16ed81f0db
commit 6e01cab5cd
1 changed files with 14 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
tab_timeline_ng.py
View File

@@ -428,28 +428,30 @@ def _render_graphviz(dot_source: str, selected_node_id: str | None = None):
svg = src.pipe(format='svg').decode('utf-8') svg = src.pipe(format='svg').decode('utf-8')
# (a) Keep SVG at natural size, let scroll container handle overflow # (a) Keep SVG at natural size, let scroll container handle overflow
container_id = f'graph-{id(dot_source)}' html_el = ui.html(
html_content = ( f'<div style="overflow: auto; max-height: 500px; width: 100%;">'
f'<div id="{container_id}" '
f'style="overflow: auto; max-height: 500px; width: 100%;">'
f'{svg}</div>' f'{svg}</div>'
) )
ui.html(html_content)
# (b) + (c) JS click handlers + visual feedback # (b) + (c) JS click handlers + visual feedback
# Use NiceGUI's element ID (getElement) for reliable DOM lookup
sel_escaped = selected_node_id.replace("'", "\\'") if selected_node_id else '' sel_escaped = selected_node_id.replace("'", "\\'") if selected_node_id else ''
ui.run_javascript(f''' ui.run_javascript(f'''
(function() {{ requestAnimationFrame(() => {{
const container = document.getElementById('{container_id}'); const wrapper = getElement({html_el.id});
if (!wrapper) return;
const container = wrapper.querySelector('div');
if (!container) return; if (!container) return;
// CSS for interactivity // CSS for interactivity
const style = document.createElement('style'); const style = document.createElement('style');
const uid = 'graph-' + {html_el.id};
container.id = uid;
style.textContent = ` style.textContent = `
#{container_id} g.node {{ cursor: pointer; }} #${{uid}} g.node {{ cursor: pointer; }}
#{container_id} g.node:hover {{ filter: brightness(1.3); }} #${{uid}} g.node:hover {{ filter: brightness(1.3); }}
#{container_id} g.node.selected ellipse, #${{uid}} g.node.selected ellipse,
#{container_id} g.node.selected polygon[stroke]:not([stroke="none"]) {{ #${{uid}} g.node.selected polygon[stroke]:not([stroke="none"]) {{
stroke: #f59e0b !important; stroke: #f59e0b !important;
stroke-width: 3px !important; stroke-width: 3px !important;
}} }}
@@ -462,7 +464,6 @@ def _render_graphviz(dot_source: str, selected_node_id: str | None = None):
const title = g.querySelector('title'); const title = g.querySelector('title');
if (title) {{ if (title) {{
window.graphSelectedNode = title.textContent.trim(); window.graphSelectedNode = title.textContent.trim();
// Visual: remove old selection, add new
container.querySelectorAll('g.node.selected').forEach( container.querySelectorAll('g.node.selected').forEach(
el => el.classList.remove('selected')); el => el.classList.remove('selected'));
g.classList.add('selected'); g.classList.add('selected');
@@ -480,7 +481,7 @@ def _render_graphviz(dot_source: str, selected_node_id: str | None = None):
}} }}
}}); }});
}} }}
}})(); }});
''') ''')
except ImportError: except ImportError:
ui.label('Install graphviz Python package for graph rendering.').classes('text-warning') ui.label('Install graphviz Python package for graph rendering.').classes('text-warning')