Skip to content

fix(visualization): use #graph-svg selector instead of bare svg#564

Open
itxaiohanglover wants to merge 1 commit into
tirth8205:mainfrom
itxaiohanglover:fix/issue-523-svg-selector
Open

fix(visualization): use #graph-svg selector instead of bare svg#564
itxaiohanglover wants to merge 1 commit into
tirth8205:mainfrom
itxaiohanglover:fix/issue-523-svg-selector

Conversation

@itxaiohanglover

Copy link
Copy Markdown

Summary

  • d3.select("svg") returns the first <svg> in document order, which is a 16px legend icon — not the main #graph-svg 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 (full mode + aggregated/community mode).
  • Added id="graph-svg" to the aggregated-view template's <svg> element (it was missing).

Root cause

In visualization.py, the legend <nav> is emitted before #graph-svg and its first child is an inline <svg> icon:

<svg width="16" height="16" viewBox="-8 -8 16 16" aria-hidden="true">...</svg>

d3.select("svg") matches this 16px icon, so gRoot + all nodes/links get appended into it (viewBox -8 -8 16 16), producing a microscopic graph in the legend and an empty canvas.

Fix

// Before
var svg = d3.select("svg").attr("viewBox", [0, 0, W, H]);

// After
var svg = d3.select("#graph-svg").attr("viewBox", [0, 0, W, H]);

Applied to both template copies. The aggregated-view template's <svg> also gets id="graph-svg" added (it was missing).

Test plan

  • test_generate_html_uses_id_selector_for_svg — verifies full-mode HTML uses d3.select("#graph-svg") and contains no bare d3.select("svg")
  • test_community_mode_uses_id_selector_for_svg — verifies community-mode HTML uses d3.select("#graph-svg"), has no bare d3.select("svg"), and the <svg> has id="graph-svg"
  • All 22 existing visualization tests still pass
  • ruff check passes

Closes #523

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 tirth8205#523
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

graph.html renders into legend icon, not #graph-svg — d3.select("svg") selects wrong element (tiny graph, top-left)

1 participant