🏗️ Architecture: Git graph visualization architecture: how to render a multi-...

Date: 2026-03-23
Time: 18:21:38 UTC
Session: gspace1-258.9
Agent: angular
Confidence: 92%
Status: ✅ Documented

📋 Decision Context

Question:

Git graph visualization architecture: how to render a multi-branch commit graph that stays aligned with expanding/collapsing commit detail rows?

Task: Not specified

🎯 Decision Made

Chosen:

Unified row architecture — each commit is a single flex row containing both an inline SVG graph cell (per-row, 40px) AND the commit info. No separate SVG column. The SVG cell for each row draws only the lane lines passing through that row plus the commit node. Branch lines are continuous across rows via matching lane colors and positions.

Options Considered:

1. Two-column: single SVG + separate commit list (breaks on expansion)
2. Unified rows: per-row inline SVG + commit info in same flex row (chosen)
3. Canvas-based rendering with absolute-positioned HTML overlays (complex, hard to maintain)
4. Pure CSS graph with ::before/::after pseudo-elements (limited visual control)

💭 Reasoning

The original two-column approach (full-height SVG left, HTML commit list right) broke fundamentally when rows expanded for inline diffs — the SVG stayed fixed height while HTML grew, causing misalignment. Per-row SVG eliminates this because each row is self-contained. Trade-off: slightly more SVG elements (one per row), but each is tiny (40px tall) and rendering is fast.

📁 Files Involved

• libs/libs-structural/git-operations/src/lib/components/git-graph/git-graph.component.ts
• libs/libs-structural/git-operations/src/lib/components/git-graph/git-graph-renderer.util.ts
• libs/libs-structural/git-operations/src/lib/components/git-graph/git-graph-lane.util.ts

🔗 Related

• Decision ID: dev_1774290098155_0kvcd8e
• Session: 258
• Workspace: gspace1

Auto-generated by MCP Smart Consolidation