Interactive timeline graph: click nodes to select in node manager

Add click-to-select functionality to the graphviz SVG timeline graph.
Clicking a node highlights it with an amber border, auto-switches the
branch selector, and updates the node manager panel. The SVG is now
responsive (100% width, scroll container) instead of fixed-size.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

tab_timeline_ng.py

@@ -1,4 +1,5 @@
 import copy
+import re
 import time
 
 from nicegui import ui
@@ -64,14 +65,16 @@ def _render_selection_picker(all_nodes, htree, state, refresh_fn):
 
 
 def _render_graph_or_log(mode, all_nodes, htree, selected_nodes,
-                         selection_mode_on, toggle_select_fn, restore_fn):
+                         selection_mode_on, toggle_select_fn, restore_fn,
+                         selected=None):
     """Render graph visualization or linear log view."""
     if mode in ('Horizontal', 'Vertical'):
         direction = 'LR' if mode == 'Horizontal' else 'TB'
         with ui.card().classes('w-full q-pa-md'):
             try:
                 graph_dot = htree.generate_graph(direction=direction)
-                _render_graphviz(graph_dot)
+                sel_id = selected.get('node_id') if selected else None
+                _render_graphviz(graph_dot, selected_node_id=sel_id)
             except Exception as e:
                 ui.label(f'Graph Error: {e}').classes('text-negative')
 
@@ -165,28 +168,24 @@ def _find_active_branch(htree):
     return None
 
 
-def _render_node_manager(all_nodes, htree, data, file_path, restore_fn, refresh_fn):
+def _find_branch_for_node(htree, node_id):
+    """Return the branch name whose ancestry contains node_id, or None."""
+    for b_name, tip_id in htree.branches.items():
+        current = tip_id
+        while current and current in htree.nodes:
+            if current == node_id:
+                return b_name
+            current = htree.nodes[current].get('parent')
+    return None
+
+
+def _render_node_manager(all_nodes, htree, data, file_path, restore_fn, refresh_fn,
+                         selected):
     """Render branch-grouped node manager with restore, rename, delete, and preview."""
     ui.label('Manage Version').classes('section-header')
 
-    # --- State that survives @ui.refreshable ---
     active_branch = _find_active_branch(htree)
 
-    # Default branch: active branch, or branch whose ancestry contains HEAD
-    default_branch = active_branch
-    if not default_branch and htree.head_id:
-        for b_name, tip_id in htree.branches.items():
-            for n in _walk_branch_nodes(htree, tip_id):
-                if n['id'] == htree.head_id:
-                    default_branch = b_name
-                    break
-            if default_branch:
-                break
-    if not default_branch and htree.branches:
-        default_branch = next(iter(htree.branches))
-
-    selected = {'node_id': htree.head_id, 'branch': default_branch}
-
     # --- (a) Branch selector ---
     def fmt_branch(b_name):
         count = len(_walk_branch_nodes(htree, htree.branches.get(b_name)))
@@ -331,6 +330,21 @@ def render_timeline_tab(state: AppState):
 
     htree = HistoryTree(tree_data)
 
+    # --- Shared selected-node state (survives refreshes, shared by graph + manager) ---
+    active_branch = _find_active_branch(htree)
+    default_branch = active_branch
+    if not default_branch and htree.head_id:
+        for b_name, tip_id in htree.branches.items():
+            for n in _walk_branch_nodes(htree, tip_id):
+                if n['id'] == htree.head_id:
+                    default_branch = b_name
+                    break
+            if default_branch:
+                break
+    if not default_branch and htree.branches:
+        default_branch = next(iter(htree.branches))
+    selected = {'node_id': htree.head_id, 'branch': default_branch}
+
     if state.restored_indicator:
         ui.label(f'Editing Restored Version: {state.restored_indicator}').classes(
             'text-info q-pa-sm')
@@ -354,7 +368,8 @@ def render_timeline_tab(state: AppState):
 
         _render_graph_or_log(
             view_mode.value, all_nodes, htree, selected_nodes,
-            selection_mode.value, _toggle_select, _restore_and_refresh)
+            selection_mode.value, _toggle_select, _restore_and_refresh,
+            selected=selected)
 
         if selection_mode.value and state.timeline_selected_nodes:
             _render_batch_delete(htree, data, file_path, state, render_timeline.refresh)
@@ -362,7 +377,8 @@ def render_timeline_tab(state: AppState):
         with ui.card().classes('w-full q-pa-md q-mt-md'):
             _render_node_manager(
                 all_nodes, htree, data, file_path,
-                _restore_and_refresh, render_timeline.refresh)
+                _restore_and_refresh, render_timeline.refresh,
+                selected)
 
     def _toggle_select(nid, checked):
         if checked:
@@ -380,14 +396,96 @@ def render_timeline_tab(state: AppState):
     selection_mode.on_value_change(lambda _: render_timeline.refresh())
     render_timeline()
 
+    # --- Poll for graph node clicks (JS → Python bridge) ---
+    async def _poll_graph_click():
+        if view_mode.value == 'Linear Log':
+            return
+        try:
+            result = await ui.run_javascript(
+                'const v = window.graphSelectedNode;'
+                'window.graphSelectedNode = null; v;'
+            )
+        except Exception:
+            return
+        if not result:
+            return
+        node_id = str(result)
+        if node_id not in htree.nodes:
+            return
+        branch = _find_branch_for_node(htree, node_id)
+        if branch:
+            selected['branch'] = branch
+        selected['node_id'] = node_id
+        render_timeline.refresh()
 
-def _render_graphviz(dot_source: str):
+    ui.timer(0.2, _poll_graph_click)
-    """Render graphviz DOT source as SVG using ui.html."""
+
+
+def _render_graphviz(dot_source: str, selected_node_id: str | None = None):
+    """Render graphviz DOT source as interactive SVG with click-to-select."""
     try:
         import graphviz
         src = graphviz.Source(dot_source)
         svg = src.pipe(format='svg').decode('utf-8')
-        ui.html(f'<div style="overflow-x: auto;">{svg}</div>')
+
+        # (a) Responsive SVG sizing — replace fixed width/height with 100%
+        svg = re.sub(r'\bwidth="[^"]*"', 'width="100%"', svg, count=1)
+        svg = re.sub(r'\bheight="[^"]*"', 'height="auto"', svg, count=1)
+
+        container_id = f'graph-{id(dot_source)}'
+        html_content = (
+            f'<div id="{container_id}" '
+            f'style="overflow: auto; max-height: 500px; width: 100%;">'
+            f'{svg}</div>'
+        )
+        ui.html(html_content)
+
+        # (b) + (c) JS click handlers + visual feedback
+        sel_escaped = selected_node_id.replace("'", "\\'") if selected_node_id else ''
+        ui.run_javascript(f'''
+        (function() {{
+            const container = document.getElementById('{container_id}');
+            if (!container) return;
+
+            // CSS for interactivity
+            const style = document.createElement('style');
+            style.textContent = `
+                #{container_id} g.node {{ cursor: pointer; }}
+                #{container_id} g.node:hover {{ filter: brightness(1.3); }}
+                #{container_id} g.node.selected ellipse,
+                #{container_id} g.node.selected polygon[stroke]:not([stroke="none"]) {{
+                    stroke: #f59e0b !important;
+                    stroke-width: 3px !important;
+                }}
+            `;
+            container.appendChild(style);
+
+            // Attach click handlers
+            container.querySelectorAll('g.node').forEach(function(g) {{
+                g.addEventListener('click', function() {{
+                    const title = g.querySelector('title');
+                    if (title) {{
+                        window.graphSelectedNode = title.textContent.trim();
+                        // Visual: remove old selection, add new
+                        container.querySelectorAll('g.node.selected').forEach(
+                            el => el.classList.remove('selected'));
+                        g.classList.add('selected');
+                    }}
+                }});
+            }});
+
+            // Re-apply selected class if we already have a selection
+            const selId = '{sel_escaped}';
+            if (selId) {{
+                container.querySelectorAll('g.node').forEach(function(g) {{
+                    const title = g.querySelector('title');
+                    if (title && title.textContent.trim() === selId) {{
+                        g.classList.add('selected');
+                    }}
+                }});
+            }}
+        }})();
+        ''')
     except ImportError:
         ui.label('Install graphviz Python package for graph rendering.').classes('text-warning')
         ui.code(dot_source).classes('w-full')