Skip to content

[Feature]: Build Real-Time Architecture Dependency Graph Engine with Dead Code Elimination & Auto-Refactoring #268

Description

@S0412-2007

Before submitting

  • I have searched existing issues and discussions to make sure this idea is not already covered.
  • I have read the contribution guidelines.

Problem statement

As codebases scale, architectural decay sets in. Developers struggle to visualize how modules and functions are interconnected, making refactoring highly risky. Furthermore, dead code (unused functions, exports, and variables) accumulates over time, increasing bundle sizes and codebase complexity. Current tools only show static file-level imports, lacking the granular function-level dependency mapping needed to safely delete dead code or understand the true blast radius of modifying a core utility function.

Proposed solution

I propose implementing a 3-layer intelligent system:

  1. Granular Dependency Engine (Backend): Implement an AST (Abstract Syntax Tree) parser using Babel to map function-to-function and variable-to-variable dependencies across files. Calculate the "Blast Radius" (number of dependent files/functions) for every exported module.

  2. Interactive Architecture Graph (Frontend): Build an interactive, force-directed graph visualization using D3.js or Cytoscape.js. Render modules as clusters and dependencies as edges. Color-code nodes based on Blast Radius (Red = highly coupled, Green = isolated). Allow developers to click a node to highlight its upstream/downstream dependency chain.

  3. Dead Code Elimination & Auto-Refactoring Engine: Cross-reference the dependency tree with actual usage to identify "Orphaned Nodes" (dead code). Provide an AST-assisted "Safe Delete" feature that automatically removes the dead export and cleans up any dangling imports in dependent files, generating a PR-style diff preview before applying changes.

Alternative solutions considered

  1. IDE "Find Usages": Manual and doesn't provide a holistic architectural overview.
  2. Static File-Import Graphs (like Madge): Too high-level. A file might be imported for just 1 function, while the other 5 exports in that file are dead. Granular AST-level mapping is the only way to safely automate dead code elimination without breaking the app.
  3. Regex-based dead code detection: Highly prone to false positives and cannot understand code context or execution flow.

Use case or motivation

This feature transforms CodeLens from a simple analysis tool into a critical architectural guardian.

  • Tech Leads can visualize the actual codebase structure and identify highly coupled modules.
  • Developers can safely eliminate technical debt by removing dead code with confidence.
  • DevOps can reduce production bundle sizes by stripping unused exports.
    The "Blast Radius" visualization alone will prevent countless regression bugs during refactoring by showing exactly what breaks if a utility is modified.

References or mockups

1. Architecture Dependency Graph
| 🕸️ CodeLens - Architecture Dependency Map |
| |
| [authModule] ---------> [jwtMiddleware] |
| (🔴 High) (🟢 Low) |
| | |
| v |
| [userController] -----> [validateEmail] |
| (🟡 Med) |
| |
| * Red = High Blast Radius (10+ dependents) * |
| * Click node to see impact analysis * |

2. Dead Code Elimination UI

=========================================================
|  🧹 CodeLens - Dead Code Eliminator                   |
=========================================================
|  Orphaned Nodes Detected: 14                          |
|                                                       |
|  ☐ utils/formatDate.js (0 usages)                     |
|  ☐ helpers/deprecatedAPI.js (0 usages)                |
|  ☑ utils/oldParser.js (0 usages)                      |
|                                                       |
|  --- Auto-Refactor Preview ---                        |
|  - import oldParser from './utils/oldParser';         |
|  - export const oldParser = () => {}                  |
|                                                       |
|  Blast Radius Check: ✅ Safe to delete                |
|                                                       |
|  [❌ Cancel]    [✅ Generate Refactor Diff]            |


### Additional context

**Files to Create/Modify:**

*Backend:*
- `services/astParser.js` (Babel/AST parsing engine)
- `services/dependencyMapper.js` (Builds the connection tree)
- `services/blastRadiusCalculator.js` (Computes impact scores)
- `services/autoRefactorEngine.js` (Generates safe deletion diffs)
- `controllers/dependencyController.js`
- `routes/dependencyRoutes.js`

*Frontend:*
- `pages/ArchitectureGraph/GraphPage.jsx` (Main DAG container)
- `pages/ArchitectureGraph/NodeInspectPanel.jsx` (Blast radius details)
- `components/RefactorUI/DeadCodeList.jsx`
- `components/RefactorUI/DiffViewer.jsx` (Preview code deletions)
- `components/RefactorUI/SafeDeleteButton.jsx`

**Acceptance Criteria:**
- [ ] AST Parser successfully maps granular function-to-function dependencies
- [ ] Force-directed graph renders interactively with ≥100 nodes without lag
- [ ] Blast Radius accurately calculates the number of downstream dependents
- [ ] Dead code scanner identifies unused exports with 0 false positives
- [ ] Auto-refactor engine generates valid git-diff format for safe deletion
- [ ] API response time for graph generation < 3s for mid-sized repos
- [ ] Unit tests with ≥85% coverage for the AST Parser and Dependency Mapper

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions