Graph View Frontend Component

[ElioNeto]

Graph View Frontend Component

Build an interactive graph visualization component for the Angular frontend, showing note connections as an interactive node-link diagram.

Features

Visualization

• Force-directed graph layout (D3.js force simulation or vis.js)
• Nodes represent notes, edges represent [[wikilinks]]
• Node size proportional to number of connections (degree)
• Color-coded nodes by tag/category
• Smooth transitions on layout changes
• Zoom and pan controls
• Drag nodes to rearrange (temporary)

Interaction

• Click node → navigate to that note in the editor
• Hover node → show note title and connection count
• Right-click → context menu (open, open in new tab, copy path)
• Shift+click → select multiple nodes (highlight paths)
• Mouse wheel zoom
• Tap-and-hold on mobile

Controls

• Depth slider (1-hop, 2-hop, 3-hop)
• Filter by tag (show only notes with selected tags)
• Filter by search query (highlight matching nodes)
• Toggle show orphans (notes with no connections)
• Toggle show attachments
• Reset view button
• Export as image (PNG/SVG)
• Full-screen mode

Performance

• Virtual rendering for > 500 nodes
• WebWorker for layout computation
• Throttled animations during interaction
• Cached layout positions

Technical Requirements

• Angular 17 component
• D3.js v7 or vis.js for force layout
• Canvas rendering for large graphs (optional, SVG fallback)
• RxJS for data flow from API
• Responsive (sidebar graph + full-screen graph)

API Endpoint Consumed

GET /notes/{path}/graph?depth=2&include_tags=true

Mock Data for Development

{
  "nodes": [
    { "id": "project-overview", "label": "Project Overview", "group": "documentation", "size": 8 },
    { "id": "architecture", "label": "Architecture", "group": "technical", "size": 6 },
    { "id": "api-reference", "label": "API Reference", "group": "technical", "size": 5 }
  ],
  "edges": [
    { "source": "project-overview", "target": "architecture", "weight": 1 },
    { "source": "architecture", "target": "api-reference", "weight": 1 }
  ]
}

Acceptance Criteria

• Graph renders with correct nodes and edges from API
• Clicking a node navigates to the correct note
• Depth filter controls connectivity range
• Tag filter highlights/removes nodes correctly
• Zoom and pan work smoothly
• Performance: 500 nodes at 30+ FPS
• Unit tests for graph data transformation
• Integration tests with mock API

Parent Epic

#275

[ElioNeto]

Resolved via feat/notes-engine-v2 branch (PR #321)