Skip to content

FRONTEND_IMPROVEMENTS.md

Latest commit

 

History

History
201 lines (154 loc) · 9 KB

FRONTEND_IMPROVEMENTS.md

File metadata and controls

201 lines (154 loc) · 9 KB

Frontend Diff Comparison Improvements

Summary

Fixed the Next.js frontend to properly leverage the Rust backend's advanced AST-based function matching algorithm, and created a new function-centric view that sorts functions by change magnitude instead of grouping by file.

Problems Identified

  1. Not leveraging the Rust backend properly: The frontend was calling /api/comparison/analyze which used a simplified regex-based function extraction instead of the advanced AST parser
  2. MCP layer was unnecessary: The MCP endpoints were just wrappers that added complexity without benefit for the web UI
  3. File-centric organization: Functions were grouped by file, making it hard to see the most changed functions across the entire codebase
  4. Confusing change detection: Functions that were moved AND modified appeared in multiple categories

Solutions Implemented

1. Enhanced Rust Backend (crates/web-ui/src/handlers.rs)

Changed: analyze_function_changes() function

Before: Used regex patterns to extract functions

// Simple function extraction using regex patterns
let functions = extract_functions_simple(&file.content, language_str, &file.relative_path);

After: Uses proper AST parsing with Hungarian algorithm matching

// Parse files using TreeSitter AST parser
let parser = TreeSitterParser::new(language);
let parse_result = parser.parse(&file.content, Some(&file.path));
source_functions_ast.extend(parse_result.functions);

// Use advanced FunctionMatcher with Hungarian algorithm
let function_matcher = FunctionMatcher::new(similarity_threshold);
let match_result = function_matcher.match_functions(&source_functions_ast, &target_functions_ast);

Benefits:

  • Accurate function extraction across all languages
  • Optimal matching using Hungarian algorithm
  • Proper similarity scoring based on AST structure
  • Correct change type detection (moved, renamed, modified)

2. Improved Change Type Detection (crates/diff-engine/src/changes.rs)

Updated: determine_primary_change_type() function

Key improvement: Clear priority order for change types:

  1. Cross-file move (whether modified or not - similarity score indicates modification level)
  2. Rename (only if high similarity)
  3. Move within file (only if high similarity)
  4. Modification (default)

Result: A function that is moved AND modified is correctly categorized as "moved" with a low similarity score, rather than appearing in both "moved" and "modified" categories.

3. Better Change Summaries (crates/mcp-server/src/comparison/manager.rs)

Enhanced: Diff summaries now clearly indicate combined changes:

  • "Function moved from X to Y and modified (75% similar)"
  • "Function renamed from 'foo' to 'bar' and modified (80% similar)"
  • "Function moved from X to Y (unchanged)"

4. New Function-Centric View Component

Created: nextjs-frontend/src/components/diff/FunctionCentricDiffView.tsx

Features:

  • Sorted by change magnitude: Most changed functions appear first (regardless of file)
  • File path as indicator: Shows source/target file paths as small labels per function
  • Visual change metrics: Color-coded change magnitude and similarity percentages
  • Flexible filtering: Filter by change type (modified, added, deleted, moved, renamed)
  • Multiple sort options: By magnitude, similarity, or name
  • Search: Find functions by name or file path

UI Layout:

┌─────────────────────────────────────────────────────┐
│ [Search] [Filter: Modified ▼] [Sort: Magnitude ▼]  │
├─────────────────────────────────────────────────────┤
│ ┌─────────────────────────────────────────────────┐ │
│ │ functionName()                    [modified]    │ │
│ │ 📄 src/old.rs → src/new.rs                      │ │
│ │ Source: L10-50  Target: L15-55                  │ │
│ │                                   85% changed   │ │
│ │                                   15% similar   │ │
│ └─────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ anotherFunction()                 [moved]       │ │
│ │ 📄 src/utils.rs → src/helpers.rs                │ │
│ │ Source: L100-120  Target: L200-220              │ │
│ │                                   5% changed    │ │
│ │                                   95% similar   │ │
│ └─────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘

5. Enhanced Comparison Component

Created: nextjs-frontend/src/components/diff/EnhancedDiffComparison.tsx

Features:

  • Toggle between function-centric and file-centric views
  • Summary statistics (total, added, deleted, modified, renamed, moved)
  • Direct integration with Rust backend (no MCP middleman)
  • Better error handling and loading states

New page: /enhanced-diff - Try it out!

6. Updated ComparisonService

Removed: MCP-specific methods (analyzeDirectoriesWithMCP, getChangedFunctionsFromMCP)

Enhanced: analyzeDirectories() now:

  • Calls Rust backend's improved /api/comparison/analyze endpoint
  • Calculates changeMagnitude for each function (0.0 = no change, 1.0 = complete change)
  • Properly transforms AST-based results to frontend format

Architecture Clarification

Why NOT use MCP endpoints?

MCP (Model Context Protocol) is designed for AI agents to interact with code, not for web UIs:

  • MCP returns text-based responses that need parsing
  • Adds unnecessary complexity (Next.js API → MCP Server → Rust Backend)
  • Web UI can call Rust backend directly with structured JSON

Better architecture:

Next.js Frontend → Rust Backend (with AST matching)
                    ↓
                    Advanced diff-engine
                    - TreeSitter AST parsing
                    - Hungarian algorithm matching
                    - Tree edit distance
                    - Similarity scoring

MCP is still useful for:

  • AI agents analyzing code changes
  • Claude/GPT integrations
  • Command-line tools
  • Automated code review workflows

Files Changed

Rust Backend

  • crates/web-ui/src/handlers.rs - Use AST-based function matching
  • crates/diff-engine/src/changes.rs - Improved change type detection
  • crates/mcp-server/src/comparison/manager.rs - Better diff summaries

Next.js Frontend

  • nextjs-frontend/src/services/comparisonService.ts - Removed MCP methods, enhanced analyzeDirectories
  • nextjs-frontend/src/components/diff/FunctionCentricDiffView.tsx - NEW: Function-centric view
  • nextjs-frontend/src/components/diff/EnhancedDiffComparison.tsx - NEW: Enhanced comparison UI
  • nextjs-frontend/src/app/enhanced-diff/page.tsx - NEW: Page for enhanced diff

Files to Remove (Optional)

  • nextjs-frontend/src/app/api/mcp/compare-locations/route.ts - Not needed for web UI
  • nextjs-frontend/src/app/api/mcp/list-changed-functions/route.ts - Not needed for web UI

Testing

  1. Start the Rust backend:

    cd crates/web-ui
cargo run --release

  2. Start the Next.js frontend:

    cd nextjs-frontend
npm run dev

  3. Navigate to: http://localhost:3000/enhanced-diff

  4. Test with two directories:

    • Select source and target directories
    • Click "Start Comparison"
    • Toggle between function-centric and file-centric views
    • Try filtering by change type
    • Sort by different criteria

Key Improvements

✅ Accurate function detection - AST parsing instead of regex
✅ Optimal matching - Hungarian algorithm finds best matches
✅ Clear categorization - Functions appear in one category with detailed info
✅ Change magnitude sorting - See most changed functions first
✅ File-agnostic view - Functions sorted by impact, not file organization
✅ Simpler architecture - Direct Rust backend calls, no MCP middleman
✅ Better UX - Visual indicators, search, filtering, multiple views

Next Steps (Optional)

  1. Add detailed diff view: Click a function to see line-by-line AST diff
  2. Persist comparisons: Save comparison results for later review
  3. Export reports: Generate markdown/HTML reports of changes
  4. Batch comparisons: Compare multiple directory pairs
  5. Integration tests: Add tests for the new matching algorithm