From 794b8f7caaf7aca9c6ce58702e605263e3bdc171 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=BE=9B=E4=BA=A5?= <xinhai.lyh@alibaba-inc.com>
Date: Thu, 18 Jun 2026 16:58:17 +0800
Subject: [PATCH] fix(visualization): use #graph-svg selector instead of bare
 svg
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

d3.select("svg") returns the first <svg> in document order, which is a
16px legend icon — not the main graph canvas. This caused the entire
force graph to render inside the tiny legend swatch while the full-screen
canvas stayed empty.

Fix: target #graph-svg by id in both template copies. Add id="graph-svg"
to the aggregated-view template's <svg> element (it was missing).

Regression tests verify both full and community templates use the id
selector and contain no bare d3.select("svg").

Closes #523
---
 code_review_graph/visualization.py |  6 ++---
 tests/test_visualization.py        | 36 ++++++++++++++++++++++++++++++
 2 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/code_review_graph/visualization.py b/code_review_graph/visualization.py
index c78b5735..7ca5bd13 100644
--- a/code_review_graph/visualization.py
+++ b/code_review_graph/visualization.py
@@ -856,7 +856,7 @@ def generate_html(
 }
 function hideTooltip() { tooltip.classList.remove("visible"); }
 var W = innerWidth, H = innerHeight;
-var svg = d3.select("svg").attr("viewBox", [0, 0, W, H]);
+var svg = d3.select("#graph-svg").attr("viewBox", [0, 0, W, H]);
 var gRoot = svg.append("g");
 var currentTransform = d3.zoomIdentity;
 var zoomBehavior = d3.zoom()
@@ -1605,7 +1605,7 @@ def generate_html(
 <div id="stats-bar" role="status" aria-label="Graph statistics"></div>
 <div id="tooltip"></div>
 <button id="btn-back" aria-label="Back to overview">&larr; Back to Overview</button>
-<svg role="img" aria-label="Interactive code knowledge graph visualization (aggregated view)."></svg>
+<svg id="graph-svg" role="img" aria-label="Interactive code knowledge graph visualization (aggregated view)."></svg>
 <script>
 "use strict";
 var graphData = __GRAPH_DATA__;
@@ -1756,7 +1756,7 @@ def generate_html(
 
 /* --- SVG setup --- */
 var W = innerWidth, H = innerHeight;
-var svg = d3.select("svg").attr("viewBox", [0, 0, W, H]);
+var svg = d3.select("#graph-svg").attr("viewBox", [0, 0, W, H]);
 var gRoot = svg.append("g");
 var currentTransform = d3.zoomIdentity;
 var zoomBehavior = d3.zoom()
diff --git a/tests/test_visualization.py b/tests/test_visualization.py
index 780fe367..7232128a 100644
--- a/tests/test_visualization.py
+++ b/tests/test_visualization.py
@@ -307,6 +307,42 @@ def test_generate_html_includes_loading_and_empty_state(store_with_data, tmp_pat
     assert "No nodes to display" in content
 
 
+def test_generate_html_uses_id_selector_for_svg(store_with_data, tmp_path):
+    """Regression test for #523: d3.select("svg") selects the legend icon, not the canvas.
+
+    The legend <nav> contains inline <svg> icons that appear before #graph-svg
+    in document order. d3.select("svg") returns the first match — a 16px legend
+    icon — causing the entire force graph to render inside it. The fix targets
+    #graph-svg by id.
+    """
+    from code_review_graph.visualization import generate_html
+
+    output_path = tmp_path / "graph.html"
+    generate_html(store_with_data, output_path)
+    content = output_path.read_text()
+    assert 'd3.select("#graph-svg")' in content, (
+        "HTML should use d3.select('#graph-svg') to target the main canvas, "
+        "not d3.select('svg') which selects the first inline legend icon"
+    )
+    assert 'd3.select("svg")' not in content, (
+        "No bare d3.select('svg') should remain — it selects legend icons"
+    )
+
+
+def test_community_mode_uses_id_selector_for_svg(large_store, tmp_path):
+    """Regression test for #523: community/aggregated template must also use #graph-svg."""
+    from code_review_graph.visualization import generate_html
+
+    output_path = tmp_path / "community.html"
+    generate_html(large_store, output_path, mode="community")
+    content = output_path.read_text()
+    assert 'd3.select("#graph-svg")' in content
+    assert 'd3.select("svg")' not in content
+    assert 'id="graph-svg"' in content, (
+        "Aggregated template's <svg> must have id='graph-svg' for the selector to work"
+    )
+
+
 def test_generate_html_includes_focus_visible(store_with_data, tmp_path):
     """Generated HTML should include :focus-visible styles."""
     from code_review_graph.visualization import generate_html