|
| 1 | +# Frontend Diff Comparison Improvements |
| 2 | + |
| 3 | +## Summary |
| 4 | + |
| 5 | +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. |
| 6 | + |
| 7 | +## Problems Identified |
| 8 | + |
| 9 | +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 |
| 10 | +2. **MCP layer was unnecessary**: The MCP endpoints were just wrappers that added complexity without benefit for the web UI |
| 11 | +3. **File-centric organization**: Functions were grouped by file, making it hard to see the most changed functions across the entire codebase |
| 12 | +4. **Confusing change detection**: Functions that were moved AND modified appeared in multiple categories |
| 13 | + |
| 14 | +## Solutions Implemented |
| 15 | + |
| 16 | +### 1. Enhanced Rust Backend (`crates/web-ui/src/handlers.rs`) |
| 17 | + |
| 18 | +**Changed**: `analyze_function_changes()` function |
| 19 | + |
| 20 | +**Before**: Used regex patterns to extract functions |
| 21 | +```rust |
| 22 | +// Simple function extraction using regex patterns |
| 23 | +let functions = extract_functions_simple(&file.content, language_str, &file.relative_path); |
| 24 | +``` |
| 25 | + |
| 26 | +**After**: Uses proper AST parsing with Hungarian algorithm matching |
| 27 | +```rust |
| 28 | +// Parse files using TreeSitter AST parser |
| 29 | +let parser = TreeSitterParser::new(language); |
| 30 | +let parse_result = parser.parse(&file.content, Some(&file.path)); |
| 31 | +source_functions_ast.extend(parse_result.functions); |
| 32 | + |
| 33 | +// Use advanced FunctionMatcher with Hungarian algorithm |
| 34 | +let function_matcher = FunctionMatcher::new(similarity_threshold); |
| 35 | +let match_result = function_matcher.match_functions(&source_functions_ast, &target_functions_ast); |
| 36 | +``` |
| 37 | + |
| 38 | +**Benefits**: |
| 39 | +- Accurate function extraction across all languages |
| 40 | +- Optimal matching using Hungarian algorithm |
| 41 | +- Proper similarity scoring based on AST structure |
| 42 | +- Correct change type detection (moved, renamed, modified) |
| 43 | + |
| 44 | +### 2. Improved Change Type Detection (`crates/diff-engine/src/changes.rs`) |
| 45 | + |
| 46 | +**Updated**: `determine_primary_change_type()` function |
| 47 | + |
| 48 | +**Key improvement**: Clear priority order for change types: |
| 49 | +1. Cross-file move (whether modified or not - similarity score indicates modification level) |
| 50 | +2. Rename (only if high similarity) |
| 51 | +3. Move within file (only if high similarity) |
| 52 | +4. Modification (default) |
| 53 | + |
| 54 | +**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. |
| 55 | + |
| 56 | +### 3. Better Change Summaries (`crates/mcp-server/src/comparison/manager.rs`) |
| 57 | + |
| 58 | +**Enhanced**: Diff summaries now clearly indicate combined changes: |
| 59 | +- "Function moved from X to Y and modified (75% similar)" |
| 60 | +- "Function renamed from 'foo' to 'bar' and modified (80% similar)" |
| 61 | +- "Function moved from X to Y (unchanged)" |
| 62 | + |
| 63 | +### 4. New Function-Centric View Component |
| 64 | + |
| 65 | +**Created**: `nextjs-frontend/src/components/diff/FunctionCentricDiffView.tsx` |
| 66 | + |
| 67 | +**Features**: |
| 68 | +- **Sorted by change magnitude**: Most changed functions appear first (regardless of file) |
| 69 | +- **File path as indicator**: Shows source/target file paths as small labels per function |
| 70 | +- **Visual change metrics**: Color-coded change magnitude and similarity percentages |
| 71 | +- **Flexible filtering**: Filter by change type (modified, added, deleted, moved, renamed) |
| 72 | +- **Multiple sort options**: By magnitude, similarity, or name |
| 73 | +- **Search**: Find functions by name or file path |
| 74 | + |
| 75 | +**UI Layout**: |
| 76 | +``` |
| 77 | +┌─────────────────────────────────────────────────────┐ |
| 78 | +│ [Search] [Filter: Modified ▼] [Sort: Magnitude ▼] │ |
| 79 | +├─────────────────────────────────────────────────────┤ |
| 80 | +│ ┌─────────────────────────────────────────────────┐ │ |
| 81 | +│ │ functionName() [modified] │ │ |
| 82 | +│ │ 📄 src/old.rs → src/new.rs │ │ |
| 83 | +│ │ Source: L10-50 Target: L15-55 │ │ |
| 84 | +│ │ 85% changed │ │ |
| 85 | +│ │ 15% similar │ │ |
| 86 | +│ └─────────────────────────────────────────────────┘ │ |
| 87 | +│ ┌─────────────────────────────────────────────────┐ │ |
| 88 | +│ │ anotherFunction() [moved] │ │ |
| 89 | +│ │ 📄 src/utils.rs → src/helpers.rs │ │ |
| 90 | +│ │ Source: L100-120 Target: L200-220 │ │ |
| 91 | +│ │ 5% changed │ │ |
| 92 | +│ │ 95% similar │ │ |
| 93 | +│ └─────────────────────────────────────────────────┘ │ |
| 94 | +└─────────────────────────────────────────────────────┘ |
| 95 | +``` |
| 96 | + |
| 97 | +### 5. Enhanced Comparison Component |
| 98 | + |
| 99 | +**Created**: `nextjs-frontend/src/components/diff/EnhancedDiffComparison.tsx` |
| 100 | + |
| 101 | +**Features**: |
| 102 | +- Toggle between function-centric and file-centric views |
| 103 | +- Summary statistics (total, added, deleted, modified, renamed, moved) |
| 104 | +- Direct integration with Rust backend (no MCP middleman) |
| 105 | +- Better error handling and loading states |
| 106 | + |
| 107 | +**New page**: `/enhanced-diff` - Try it out! |
| 108 | + |
| 109 | +### 6. Updated ComparisonService |
| 110 | + |
| 111 | +**Removed**: MCP-specific methods (`analyzeDirectoriesWithMCP`, `getChangedFunctionsFromMCP`) |
| 112 | + |
| 113 | +**Enhanced**: `analyzeDirectories()` now: |
| 114 | +- Calls Rust backend's improved `/api/comparison/analyze` endpoint |
| 115 | +- Calculates `changeMagnitude` for each function (0.0 = no change, 1.0 = complete change) |
| 116 | +- Properly transforms AST-based results to frontend format |
| 117 | + |
| 118 | +## Architecture Clarification |
| 119 | + |
| 120 | +### Why NOT use MCP endpoints? |
| 121 | + |
| 122 | +**MCP (Model Context Protocol)** is designed for AI agents to interact with code, not for web UIs: |
| 123 | +- MCP returns text-based responses that need parsing |
| 124 | +- Adds unnecessary complexity (Next.js API → MCP Server → Rust Backend) |
| 125 | +- Web UI can call Rust backend directly with structured JSON |
| 126 | + |
| 127 | +**Better architecture**: |
| 128 | +``` |
| 129 | +Next.js Frontend → Rust Backend (with AST matching) |
| 130 | + ↓ |
| 131 | + Advanced diff-engine |
| 132 | + - TreeSitter AST parsing |
| 133 | + - Hungarian algorithm matching |
| 134 | + - Tree edit distance |
| 135 | + - Similarity scoring |
| 136 | +``` |
| 137 | + |
| 138 | +**MCP is still useful for**: |
| 139 | +- AI agents analyzing code changes |
| 140 | +- Claude/GPT integrations |
| 141 | +- Command-line tools |
| 142 | +- Automated code review workflows |
| 143 | + |
| 144 | +## Files Changed |
| 145 | + |
| 146 | +### Rust Backend |
| 147 | +- `crates/web-ui/src/handlers.rs` - Use AST-based function matching |
| 148 | +- `crates/diff-engine/src/changes.rs` - Improved change type detection |
| 149 | +- `crates/mcp-server/src/comparison/manager.rs` - Better diff summaries |
| 150 | + |
| 151 | +### Next.js Frontend |
| 152 | +- `nextjs-frontend/src/services/comparisonService.ts` - Removed MCP methods, enhanced analyzeDirectories |
| 153 | +- `nextjs-frontend/src/components/diff/FunctionCentricDiffView.tsx` - NEW: Function-centric view |
| 154 | +- `nextjs-frontend/src/components/diff/EnhancedDiffComparison.tsx` - NEW: Enhanced comparison UI |
| 155 | +- `nextjs-frontend/src/app/enhanced-diff/page.tsx` - NEW: Page for enhanced diff |
| 156 | + |
| 157 | +### Files to Remove (Optional) |
| 158 | +- `nextjs-frontend/src/app/api/mcp/compare-locations/route.ts` - Not needed for web UI |
| 159 | +- `nextjs-frontend/src/app/api/mcp/list-changed-functions/route.ts` - Not needed for web UI |
| 160 | + |
| 161 | +## Testing |
| 162 | + |
| 163 | +1. **Start the Rust backend**: |
| 164 | + ```bash |
| 165 | + cd crates/web-ui |
| 166 | + cargo run --release |
| 167 | + ``` |
| 168 | + |
| 169 | +2. **Start the Next.js frontend**: |
| 170 | + ```bash |
| 171 | + cd nextjs-frontend |
| 172 | + npm run dev |
| 173 | + ``` |
| 174 | + |
| 175 | +3. **Navigate to**: http://localhost:3000/enhanced-diff |
| 176 | + |
| 177 | +4. **Test with two directories**: |
| 178 | + - Select source and target directories |
| 179 | + - Click "Start Comparison" |
| 180 | + - Toggle between function-centric and file-centric views |
| 181 | + - Try filtering by change type |
| 182 | + - Sort by different criteria |
| 183 | + |
| 184 | +## Key Improvements |
| 185 | + |
| 186 | +✅ **Accurate function detection** - AST parsing instead of regex |
| 187 | +✅ **Optimal matching** - Hungarian algorithm finds best matches |
| 188 | +✅ **Clear categorization** - Functions appear in one category with detailed info |
| 189 | +✅ **Change magnitude sorting** - See most changed functions first |
| 190 | +✅ **File-agnostic view** - Functions sorted by impact, not file organization |
| 191 | +✅ **Simpler architecture** - Direct Rust backend calls, no MCP middleman |
| 192 | +✅ **Better UX** - Visual indicators, search, filtering, multiple views |
| 193 | + |
| 194 | +## Next Steps (Optional) |
| 195 | + |
| 196 | +1. **Add detailed diff view**: Click a function to see line-by-line AST diff |
| 197 | +2. **Persist comparisons**: Save comparison results for later review |
| 198 | +3. **Export reports**: Generate markdown/HTML reports of changes |
| 199 | +4. **Batch comparisons**: Compare multiple directory pairs |
| 200 | +5. **Integration tests**: Add tests for the new matching algorithm |
| 201 | + |
0 commit comments