Xsission Function Visualizer

A Visual Studio Code extension that visualizes JavaScript and TypeScript function dependencies as an interactive graph.

Features

• Function Dependency Visualization: See how functions in your JavaScript/TypeScript code call each other
• Interactive Graph: Zoom, pan, and drag nodes to explore complex relationships
• Physics-Based Visualization: Nodes and connections behave naturally when interacted with, similar to Obsidian's graph view
• Real-time Updates: Visualize your code as you work on it
• Light/Dark Theme Support: Seamlessly integrates with your VS Code theme
• Code Navigation: Click on function nodes to navigate to their definition in the editor
• Automatic Updates: Graph automatically updates when switching between files
• Side-by-Side Integration: Graph appears alongside your code for easy reference
• Performance Optimized: Rust/WASM implementation for handling large codebases efficiently

Installation

From VS Code Marketplace

1. Open VS Code
2. Go to Extensions view (Ctrl+Shift+X / Cmd+Shift+X)
3. Search for "Xsission Function Visualizer"
4. Click Install

Manual Installation

1. Download the .vsix file from the releases page
2. In VS Code, select "Install from VSIX..." from the Extensions view menu
3. Select the downloaded file

Usage

1. Open a JavaScript or TypeScript file in VS Code
2. Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P on macOS)
3. Type "Show Function Dependency Graph" and select the command
4. The dependency graph will open in a panel beside your code
5. Interact with the graph:
   • Drag nodes to rearrange the view
   • Hover over nodes to see function names
   • Click on a node to navigate to that function in the editor
   • Use mouse wheel to zoom in/out
   • Use the control buttons to reset the view
   • Drag the background to pan around

Keyboard Shortcuts

Supported Function Types

The extension recognizes and visualizes the following types of functions:

• Traditional function declarations (function name() {})
• Async functions (async function name() {})
• Generator functions (function* name() {})
• Async generator functions (async function* name() {})
• Arrow functions (const name = () => {})
• Class methods (class { method() {} })
• Static class methods (class { static method() {} })
• Constructor methods (constructor() {})
• Object methods (const obj = { method() {} })
• TypeScript methods with modifiers (public method(): void {})
• TypeScript arrow functions with type annotations
• Getters and setters (get property() {}, set property(value) {})
• Exported functions:
  • Named exports (export function name() {})
  • Default exports (export default function() {})
• Anonymous functions (callbacks, etc.)
• IIFE (Immediately Invoked Function Expressions)
• Functions with computed property names ({ [expression]() {} })

Requirements

• VS Code 1.85.0 or higher
• Works with JavaScript (.js) and TypeScript (.ts) files

Development

This project uses a monorepo structure with the following packages:

• extension: VS Code extension code
• webview: Webview UI code
• rust: Performance-critical components written in Rust

Prerequisites

• Node.js (v14 or higher)
• npm (v7 or higher)
• VS Code (for testing)
• Rust (for WebAssembly compilation)

Getting Started

1. Clone the repository

   git clone https://github.com/xsission/xsission-function-visualizer.git
   cd xsission-function-visualizer
   

2. Install dependencies

   npm install
   

3. Build all packages

   npm run build:all
   

4. Launch the extension in development mode

   npm run dev
   

Project Structure

xsission-function-visualizer/
├── packages/
│   ├── extension/       # VS Code extension code
│   ├── webview/         # Graph visualization UI
│   └── rust/            # Performance-critical Rust code
├── .vscode/             # VS Code configuration
├── images/              # Screenshots and assets
└── README.md

Performance

Optimized to handle large codebases (10,000+ lines) with complex dependency structures while maintaining responsiveness. The Rust/WebAssembly implementation enables efficient parsing and analysis of JavaScript and TypeScript code.

License

MIT

Contributing

Contributions are welcome! Please read our contributing guidelines before submitting a pull request.

Feedback and Issues

If you encounter any problems or have suggestions for improvements, please file an issue.