Skip to content

GRAPH_PERFORMANCE_IMPROVEMENTS.md

Latest commit

 

History

History
99 lines (72 loc) · 2.79 KB

GRAPH_PERFORMANCE_IMPROVEMENTS.md

File metadata and controls

99 lines (72 loc) · 2.79 KB

Graph Performance Improvements Summary

Problem Statement

The D3 force-directed graph visualization was experiencing severe performance issues with large changesets:

  • Nodes spreading infinitely far apart and moving off-screen
  • Extremely slow rendering and interaction
  • High CPU usage
  • Poor user experience with 100+ function changes

Root Causes

  1. Unbounded simulation - No constraints on node positions
  2. O(n²) link creation - Creating all-to-all links within file groups
  3. Fixed force parameters - Same settings for all graph sizes
  4. No alpha decay optimization - Simulation running indefinitely

Solutions Implemented

1. Adaptive Force Parameters

  • Detect large graphs (>50 nodes)
  • Reduce charge strength from -300 to -100 for large graphs
  • Reduce link distance from 100 to 50 for large graphs
  • Reduce collision radius from 30 to 20 for large graphs

2. Optimized Link Creation

  • Small groups (≤10 nodes): Full mesh connectivity (O(n²))
  • Large groups (>10 nodes): Chain connectivity (O(n))
  • Result: 98% reduction in links for 100-node files

3. Boundary Constraints

  • Constrain nodes to viewport with 50px padding
  • Prevents nodes from drifting off-screen
  • Maintains visibility of all nodes

4. Centering Forces

  • Added weak X/Y centering forces (strength: 0.05)
  • Prevents excessive spreading
  • Keeps graph compact and viewable

5. Performance Optimizations

  • Faster alpha decay for large graphs (0.05 vs 0.0228)
  • Distance limiting for charge forces (200px for large graphs)
  • Increased velocity decay (0.4)
  • Stronger collision detection (0.7)

Performance Impact

Before

  • 50 nodes: Slow, nodes spread out
  • 100 nodes: Very slow, nodes off-screen
  • 200+ nodes: Unusable

After

  • 50 nodes: Fast, compact layout
  • 100 nodes: Good performance, stays on-screen
  • 200+ nodes: Usable, settles quickly

Link Count Example (100 functions in one file)

  • Before: 4,950 links
  • After: 99 links
  • Improvement: 98% reduction

Files Modified

  1. nextjs-frontend/src/components/graph/FunctionGraphViewer.tsx
  2. nextjs-frontend/src/components/graph/FunctionGraph.tsx
  3. static/app.js

Testing

To test the improvements:

  1. Load a comparison with 50+ function changes
  2. Verify nodes stay within viewport
  3. Check that simulation settles within 3-5 seconds
  4. Confirm smooth interaction (zoom, pan, drag)
  5. Monitor CPU usage (should drop after settling)

Configuration

The large graph threshold can be adjusted:

const isLargeGraph = nodeCount > 50; // Change this value as needed

Next Steps

For even larger datasets (500+ nodes), consider:

  • Progressive rendering
  • WebGL-based rendering
  • Automatic clustering
  • Level-of-detail rendering

Documentation

See docs/graph-performance-optimizations.md for detailed technical documentation.