CodeAtlas Pro 🗺️

Interactive live dependency graph, call-chain explorer, and delete-impact analysis for your codebase — right inside VS Code.

Visualize dependencies • Trace call chains • Understand delete impact • Compare git changes — all with real AST parsing and incremental updates.

Made with ❤️ by Anand Shah for the developer community

✨ Features

🕸️ Live Dependency Graph

• Real-time interactive graph of your entire codebase (JS/TS/JSX/TSX/Python supported)
• Tree-sitter AST parsing (with regex fallback) for accurate import detection
• Path alias resolution (@/utils/foo → real files via tsconfig/jsconfig)
• Collapsible folders & files — perfect for large repositories
• Circular dependency detection with automatic highlighting and cycle paths

🔍 Function-Level Insights

• Toggle to function call graph showing individual methods
• Call Chain Explorer — right-click any function to see full caller/callee tree (powered by VS Code's LSP Call Hierarchy)
• Click to jump to definitions

💥 Delete Impact Analysis

• Right-click any file → see exactly what breaks if you delete it
• Smart test detection — separates production impact from test impact
• Transitive dependency tracing with clear production vs test breakdown

📊 Git-Powered Insights

• Churn overlay — nodes sized by how frequently files change (hotspot detection)
• Compare against any Git ref — see what's changed since a branch, tag, or commit
  • Green = added
  • Dashed ghosts = removed
  • New/resolved circular groups highlighted

⚡ Performance & Caching

• Incremental rebuilds (only changed files are re-parsed)
• Persistent cache across VS Code restarts
• Debounced live updates on save
• Configurable limits for very large repos

🚀 Quick Start

1. Install CodeAtlas from the VS Code Marketplace
2. Open a JavaScript, TypeScript, or Python project
3. Press Ctrl+Shift+P and run "CodeAtlas: Show Dependency Graph"

Pro tips:

• Use the toolbar to toggle File ↔ Function view
• Right-click files/functions in the editor or explorer for specialized views
• Click folder nodes or the collapse button to manage large graphs
• Try "Compare with Ref…" to see how your architecture is evolving

📸 Screenshots

Full project dependency graph with circular dependencies (red) and folder grouping

Function-level call graph with collapsible nodes and call chains

Delete impact analysis showing production vs test file blast radius and transitive dependencies

Additional views available:

• Git comparison mode (green for added files/edges, dashed for removed)
• Churn overlay (node sizes reflect recent git activity)
• Sidebar summaries for cycles, hotspots, and diff changes

Hover nodes for details, click to navigate code, drag to explore.

⚙️ Configuration

Customize via your settings.json:

See DEVELOPMENT.md for advanced configuration and architecture details.

🛠️ Commands

• CodeAtlas: Show Dependency Graph — Open the main interactive panel
• CodeAtlas: Show Call Chain for Function Under Cursor — LSP-powered call hierarchy
• CodeAtlas: Show Impact of Deleting This File — Blast radius analysis
• CodeAtlas: Refresh Graph
• CodeAtlas: Toggle File / Function Graph
• CodeAtlas: Compare Working Tree Against Git Ref…

Available in Command Palette, editor context menu, and explorer context menu.

📖 Documentation

• CHANGELOG — Version history and recent updates
• Contributing — How to report issues or submit improvements
• Development Guide — For developers and contributors (setup, architecture, debugging)

📂 Project Layout

.
├── src/
│   ├── extension.ts          # VS Code extension entry point
│   ├── graphBuilder.ts       # Core graph analysis and caching
│   ├── analyzers/
│   │   ├── treeSitterAnalyzer.ts  # AST-based parsing
│   │   └── regexAnalyzer.ts       # Fallback parser
│   ├── functionGraphBuilder.ts # Function-level graph assembly
│   ├── analysisCache.ts      # Persistent mtime/size-based cache
│   ├── gitDiffGraph.ts       # Git ref comparison and churn
│   ├── testFileDetector.ts   # Smart test vs prod file detection
│   ├── aliasResolver.ts      # tsconfig path alias support
│   └── graphPanel.ts         # Webview panel & message handling
├── media/
│   ├── main.js               # Cytoscape.js rendering, UI, interactions
│   ├── style.css             # Graph and sidebar styling
│   └── icon.png
├── wasm/                     # Tree-sitter language grammars (copied at build)
├── out/                      # Compiled JS (gitignored)
├── scripts/                  # Build helpers for media & wasm
├── CHANGELOG.md
├── README.md
├── DEVELOPMENT.md
├── CONTRIBUTING.md
├── package.json
└── tsconfig.json

Key implementation notes:

• Incremental analysis via analysisCache.ts (only reparse changed files)
• Graph building combines Tree-sitter + regex fallback
• SCC for cycles uses iterative Tarjan algorithm in webview
• Git integration in gitDiffGraph.ts for diff and churn overlay
• Max file safeguard and warning in graphBuilder.ts

See DEVELOPMENT.md for more architecture details.

Known Limitations

• Alias resolution currently reads only root tsconfig.json/jsconfig.json
• Function graph uses heuristic name matching (use "Show Call Chain" for precise results)
• Very large monorepos (>2000 files) may require narrowing your include pattern

⭐ Made with ❤️ by Anand Shah for the developer community

If you find CodeAtlas useful, please star it on GitHub!

Feedback & Support

• 🐛 Bug reports and feature requests: GitHub Issues
• 💡 Ideas or feature requests: Open a discussion or submit a PR
• 📧 Maintained by Anand Shah

This extension uses Cytoscape.js for rendering, web-tree-sitter for accurate parsing, and VS Code's built-in call hierarchy APIs.