FunctionLens

A sophisticated VSCode extension that provides intelligent multi-language function call visualization and interactive debugging capabilities with cutting-edge user interface features.

✨ Key Features

🔍 Advanced Function Analysis

Real-time function call relationship mapping across multiple programming languages
Intelligent detection of function dependencies and call hierarchies
Parameter flow analysis and async function recognition
Language-specific icons for enhanced visual identification

Reactive Function Search: Real-time filtering with instant visual feedback
Smart Highlighting: Pulsing animations for matching functions with related callers/callees
Auto-Zoom: Automatic focus on single search results for precise navigation
Keyboard Shortcuts: Cmd+F (Mac) / Ctrl+F (Windows/Linux) for instant search access
ESC Key Support: Quick search clearing and interface reset

🖱️ Draggable Interface

Moveable Search Panel: Click and drag the search interface anywhere in the workspace
Boundary Constraints: Automatically keeps interface within window bounds
Visual Feedback: Enhanced shadows and scaling during drag operations
Smart Interaction: Drag only works on container background, preserving button/input functionality

🎨 Modern UI Design

Ultra-Transparent Interface: 10% opacity container with glassmorphism effects
VSCode Native Integration: Original button colors and theme compatibility
Blur Effects: Subtle backdrop filtering for professional appearance
Responsive Design: Adapts to different VSCode themes and window sizes

🌐 Multi-Language Support

JavaScript (with custom JS icon)
TypeScript (with TypeScript logo)
Python (with Python icon)
Java (with Java icon)
Rust (with Rust gear icon)
C (with C icon)

⚠️ Temporarily Disabled Languages

C# - Temporarily disabled while improving visualization system
C++ - Temporarily disabled while improving visualization system
Ruby - Temporarily disabled while improving visualization system

🚀 Quick Start

Install: Add FunctionLens to your VSCode extensions
Open File: Open any supported programming language file
Activate: Use Cmd+9 (Mac) / Ctrl+9 (Windows/Linux) or Command Palette → "FunctionLens Analysis"
Explore:
- Search functions with the transparent search bar
- Drag the interface to your preferred location
- Click nodes to explore dependencies
- Use Reset Zoom to return to overview

🎮 Interactive Features

Search Functionality

Type to Search: Start typing function names for instant filtering
Sequential Navigation: Press Enter to cycle through multiple search results
Visual Highlighting: Matching functions pulse with enhanced effects
Current Match Indicator: Highlighted current result with position counter (e.g., "2/5: functionName")
Context Awareness: Shows related functions (callers and callees) for better understanding
Auto Navigation: Automatic zoom to current search result

Node Interaction

Click Nodes: Highlight function dependencies and relationships
Click Background: Deselect all nodes for clean view
Hover Effects: Enhanced tooltips with function details
Visual Feedback: Smooth animations and transitions

Interface Control

Draggable Panel: Move search interface by dragging the container
Keyboard Navigation: Full keyboard support for power users
Zoom Controls: Reset zoom functionality for overview perspective
Clear Operations: One-click search and view reset

📋 Requirements

Visual Studio Code: v1.60.0 or higher
Supported File Types: JS, TS, PY, JAVA, RS, C files

⚙️ Configuration

FunctionLens works out of the box with no configuration required. The extension automatically:

Detects file language and applies appropriate icons
Adapts to VSCode theme (light/dark mode)
Remembers interface position during session
Provides optimal transparency settings

🔧 Keyboard Shortcuts

Shortcut	Action
`Cmd+9` / `Ctrl+9`	Activate FunctionLens Analysis
`Cmd+F` / `Ctrl+F`	Focus search input
`Enter`	Navigate through multiple search results
`ESC`	Clear search and unfocus

📖 Usage Tips

Search Strategy: Use partial function names for broader results
Multiple Results: Press Enter repeatedly to cycle through all matching functions
Interface Movement: Drag from empty areas, not buttons or input fields
Zoom Management: Use Reset Zoom after searches for better overview
Visual Clarity: The transparent interface allows you to see code behind it
Dependency Exploration: Click nodes to understand function relationships

🛠️ Technical Architecture

D3.js: Advanced graph visualization with interactive features
TypeScript: Robust VSCode extension development
Express.js: Backend analysis engine
Real-time Analysis: Live function relationship detection
Multi-language Parsers: Language-specific analysis engines

🎯 Use Cases

Code Review: Quickly understand function dependencies
Debugging: Trace function call paths and relationships
Refactoring: Identify impact of function changes
Learning: Explore unfamiliar codebases visually
Architecture Analysis: Understand system component interactions

🚫 Known Limitations

Vue files: Show warning message (not supported in main visualizer). Download the 'Vue Lifecycle Radar' extension for Vue.js support!
C#, C++, Ruby: Temporarily disabled while improving visualization system. Support will be restored in future versions.
Very large files may require performance optimization
Complex nested functions may create dense visualizations

🔮 Future Enhancements

Cross-file function relationship tracking
Export functionality for documentation
Advanced filtering options
Performance optimizations for large codebases
Additional language support

👨‍💻 Author

Carlos Miret Fiuza - Creator and Lead Developer of FunctionLens

📞 Support

Author Carlos Miret Fiuza Email: cmiretf@gmail.com LinkedIn: https://www.linkedin.com/in/carlos-miret-fiuza-87026a52

For issues, feature requests, or contributions, please refer to the project repository.

📋 Version History

v0.0.4 - Production Ready Release (August 2025)

✅ Optimized Package Size: Streamlined distribution with comprehensive .vscodeignore exclusions
✅ Enhanced Contact Support: Added direct email and LinkedIn contact information for user assistance
✅ Improved Documentation: Complete version history tracking and enhanced user guidance
✅ Clean Distribution: Removed all development artifacts, test files, and Vue components for focused functionality
✅ Professional Packaging: Optimized for marketplace distribution with minimal file footprint

v0.0.3 - Enhanced Interactive Experience (August 2025)

✅ Node Navigation: Click-to-navigate functionality - clicking nodes redirects to exact function location in source code
✅ Java Position Fix: Improved navigation accuracy for Java files - functions now redirect to precise locations
✅ Draggable Search Interface: Move the search panel anywhere in the workspace
✅ Ultra-Transparent Design: 10% opacity container with glassmorphism effects
✅ TypeScript Logo Support: Dedicated TypeScript visual identification
✅ Enhanced Search: Real-time filtering with visual feedback and keyboard shortcuts
✅ Unified Branding: "FunctionLens Analysis" across all languages
✅ Multi-language Support: JavaScript, TypeScript, Python, Java, Rust, and C
✅ License & Distribution: Added proprietary license and .vscodeignore for clean packaging

v0.0.2 - Multi-Language Foundation (July 2025)

✅ Rust Support: Complete Rust language analysis with custom gear icon
✅ C Language Support: Full C syntax analysis and visualization
✅ C# and C++ Support: Advanced analysis for modern C# and C++ codebases (temporarily disabled)
✅ Function Search: Reactive search functionality with real-time filtering
✅ Visual Enhancements: Language-specific icons and improved UI design

v0.0.1 - Initial Release (June 2025)

✅ Core Functionality: Basic function call visualization for JavaScript and TypeScript
✅ D3.js Integration: Interactive graph visualization with node relationships
✅ VSCode Integration: Extension activation and webview panel
✅ Python & Java Support: Multi-language analysis capabilities

Experience intelligent code visualization with FunctionLens - where function relationships become crystal clear.

Function Lens

Carlos Miret Fiuza