Adds TypeScript/JavaScript Function Usage Graphs

README.md

@@ -93,6 +93,7 @@ This extension leverages cutting-edge technologies to deliver fast, accurate cod
 > **Note on Language Support:**  
 > - **Function-Level Flowcharts**: Supports Python, TypeScript/JavaScript, Java, C++, C, Rust, Go, and PHP  
 > - **Codebase Dependency Visualization**: Currently supports TypeScript/JavaScript, Python, and PHP (more languages coming soon)  
+> - **Function Usage Graphs**: Currently supports TypeScript/JavaScript only  
 > - **AI-Powered Features**: Available only for Function-Level Flowcharts
 
 #### Function-Level Flowchart Generation
@@ -119,6 +120,16 @@ Analyze and visualize your entire codebase structure, revealing module dependenc
 - **Interactive Navigation**: Zoom, pan, and explore even the largest dependency graphs smoothly
 - **Folder Hierarchy**: Smart subgraphs organized by your directory structure
 
+#### Function Usage Graphs
+
+Trace where a TypeScript/JavaScript function is called across the workspace with an interactive reverse call graph.
+
+**Capabilities:**
+- **Caller Graphs**: Visualize direct and transitive callers for the function under the cursor
+- **Code Navigation**: Click graph nodes to jump to caller definitions
+- **Drill Into Code Flow**: Use the code-flow icon on a caller node to open that function's flowchart without leaving the usage graph
+- **Multi-Window Workflow**: Keep usage graphs and drilled-in flowcharts in linked VS Code editor groups for side-by-side exploration
+
 #### AI-Powered Features (Function Flowcharts)
 
 **Note:** AI features enhance function-level flowcharts only, making complex logic instantly readable.
@@ -161,7 +172,7 @@ Get CodeVisualizer up and running in your VS Code environment in just a few clic
    - Or use Ollama for completely local AI processing
 
 4. **Start Visualizing**
-   - Right-click any function → "CodeVisualizer: Open flowchart in new window"
+   - Right-click any function → "Open Flowchart in New Window"
    - Right-click any folder → "Visualize Codebase Flow"
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
@@ -173,7 +184,7 @@ Get CodeVisualizer up and running in your VS Code environment in just a few clic
 
 1. Open any supported source file in VS Code
 2. Right-click in the editor
-3. Select **"CodeVisualizer: Open flowchart in new window"**
+3. Select **"Open Flowchart in New Window"**
    - Alternatively, use Command Palette (`Ctrl+Shift+P` / `Cmd+Shift+P`) and type "CodeVisualizer"
 4. Explore the interactive flowchart:
    - Click nodes to jump to corresponding code
@@ -192,6 +203,16 @@ Get CodeVisualizer up and running in your VS Code environment in just a few clic
    - Identify circular dependencies
    - Understand your project architecture at a glance
 
+### Visualizing Function Usage
+
+1. Open a TypeScript/JavaScript source file in VS Code
+2. Place the cursor inside a named function
+3. Right-click in the editor and select **"Visualize Function Usage"**
+4. Explore the usage graph:
+   - Click a caller node to jump to its definition
+   - Click the code-flow icon on a caller node to open that caller's function flowchart
+   - Move or split the code-flow panel to keep usage and flow views side by side
+
 ### AI-Enhanced Labels (Function Flowcharts)
 
 1. Enable AI labels in Command Palette (`Ctrl+Shift+P` / `Cmd+Shift+P`) and type "CodeVisualizer: Enable AI Labels"
@@ -226,6 +247,14 @@ Get CodeVisualizer up and running in your VS Code environment in just a few clic
 
 **Planned Support:** Java, C++, C, Rust, Go dependency analysis coming in future releases.
 
+### Function Usage Graphs
+
+| Language | Status | File Extensions |
+|----------|--------|----------------|
+| TypeScript/JavaScript | Supported | `.ts`, `.tsx`, `.js`, `.jsx`, `.mts`, `.cts`, `.mjs`, `.cjs` |
+
+**Planned Support:** Function usage graphs for additional languages are planned for future releases.
+
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
 <!-- HOW IT WORKS -->
@@ -249,6 +278,14 @@ Get CodeVisualizer up and running in your VS Code environment in just a few clic
 6. **Visualization**: Generates Mermaid flowchart with color-coded nodes and edges
 7. **Rendering**: Displays an interactive graph with zoom, pan, and navigation features
 
+### Function Usage Analysis Pipeline
+
+1. **Workspace Scan**: Finds supported TypeScript/JavaScript source files
+2. **Function Indexing**: Extracts named functions, methods, and their call sites
+3. **Reverse Graph Building**: Builds a caller graph for the function under the cursor
+4. **Visualization**: Renders an interactive Mermaid graph with node navigation
+5. **Drill-In Flowcharts**: Opens caller function flowcharts from usage graph nodes for deeper inspection
+
 ### AI Label Generation (Function Flowcharts)
 
 1. **Extraction**: Extracts node labels from generated Mermaid code

package.json

@@ -1,7 +1,7 @@
 {
   "name": "codevisualizer",
   "displayName": "CodeVisualizer",
-  "version": "1.0.6",
+  "version": "1.1.2",
   "publisher": "ducphamngoc",
   "description": "Real-time interactive flowcharts for your code",
   "repository": {
@@ -31,6 +31,23 @@
     "php"
   ],
   "main": "./dist/extension.js",
+  "scripts": {
+    "vscode:prepublish": "npm run package",
+    "clean": "rimraf dist out",
+    "compile": "npm run clean && webpack",
+    "watch": "webpack --watch",
+    "package": "npm run clean && webpack --mode production --devtool hidden-source-map",
+    "compile-tests": "tsc -p . --outDir out",
+    "watch-tests": "tsc -p . -w --outDir out",
+    "pretest": "npm run compile-tests && npm run compile && npm run lint",
+    "lint": "eslint src --ext ts",
+    "lint:fix": "eslint src --ext ts --fix",
+    "test": "vscode-test",
+    "publish:patch": "vsce publish patch",
+    "publish:minor": "vsce publish minor",
+    "publish:major": "vsce publish major",
+    "install:local": "node ./scripts/install-local.js"
+  },
   "activationEvents": [
     "onStartupFinished"
   ],
@@ -57,71 +74,111 @@
     "commands": [
       {
         "command": "codevisualizer.generateFlowchart",
-        "title": "CodeVisualizer: Generate Flowchart",
+        "title": "Generate Flowchart",
+        "category": "CodeVisualizer",
         "icon": "$(graph)"
       },
       {
         "command": "codevisualizer.openFlowchartInPanel",
-        "title": "CodeVisualizer: Open Flowchart in New Window",
+        "title": "Open Flowchart in New Window",
+        "category": "CodeVisualizer",
         "icon": "$(open-preview)"
       },
       {
         "command": "codevisualizer.openFlowchartToSide",
-        "title": "CodeVisualizer: Open Flowchart to the Side",
+        "title": "Open Flowchart to the Side",
+        "category": "CodeVisualizer",
         "icon": "$(split-horizontal)"
       },
       {
         "command": "codevisualizer.openFlowchartInNewColumn",
-        "title": "CodeVisualizer: Open Flowchart in New Column",
+        "title": "Open Flowchart in New Column",
+        "category": "CodeVisualizer",
         "icon": "$(split-vertical)"
       },
       {
         "command": "codevisualizer.maximizeFlowchartPanel",
-        "title": "CodeVisualizer: Maximize Flowchart Panel",
+        "title": "Maximize Flowchart Panel",
+        "category": "CodeVisualizer",
         "icon": "$(screen-full)"
       },
       {
         "command": "codevisualizer.refreshFlowchart",
-        "title": "CodeVisualizer: Refresh Flowchart",
+        "title": "Refresh Flowchart",
+        "category": "CodeVisualizer",
         "icon": "$(refresh)"
       },
       {
         "command": "codevisualizer.exportFlowchart",
-        "title": "CodeVisualizer: Export Flowchart",
+        "title": "Export Flowchart",
+        "category": "CodeVisualizer",
         "icon": "$(export)"
       },
       {
         "command": "codevisualizer.llm.enableLabels",
-        "title": "CodeVisualizer: Enable AI Labels",
+        "title": "Enable AI Labels",
+        "category": "CodeVisualizer",
         "icon": "$(sparkle)"
       },
       {
         "command": "codevisualizer.llm.changeModel",
-        "title": "CodeVisualizer: Change AI Model",
+        "title": "Change AI Model",
+        "category": "CodeVisualizer",
         "icon": "$(settings-gear)"
       },
       {
         "command": "codevisualizer.llm.resetCache",
-        "title": "CodeVisualizer: Reset AI Cache",
+        "title": "Reset AI Cache",
+        "category": "CodeVisualizer",
         "icon": "$(trash)"
       },
       {
         "command": "codevisualizer.visualizeCodebase",
         "title": "Visualize Codebase Flow",
+        "category": "CodeVisualizer",
         "icon": "$(organization)"
+      },
+      {
+        "command": "codevisualizer.visualizeFunctionUsage",
+        "title": "Visualize Function Usage",
+        "category": "CodeVisualizer",
+        "icon": "$(references)"
+      }
+    ],
+    "submenus": [
+      {
+        "id": "codevisualizer.editorContextMenu",
+        "label": "Code Visualizer",
+        "icon": "media/icon.svg"
+      },
+      {
+        "id": "codevisualizer.explorerContextMenu",
+        "label": "Code Visualizer",
+        "icon": "media/icon.svg"
       }
     ],
     "menus": {
       "editor/context": [
+        {
+          "submenu": "codevisualizer.editorContextMenu",
+          "when": "editorTextFocus",
+          "group": "navigation@99"
+        }
+      ],
+      "codevisualizer.editorContextMenu": [
         {
           "command": "codevisualizer.generateFlowchart",
-          "when": "editorTextFocus && editorHasSelection",
-          "group": "navigation@1"
+          "when": "editorHasSelection",
+          "group": "1_flowchart@1"
         },
         {
           "command": "codevisualizer.openFlowchartInPanel",
-          "when": "editorTextFocus",
-          "group": "navigation@2"
+          "group": "1_flowchart@2"
+        },
+        {
+          "command": "codevisualizer.visualizeFunctionUsage",
+          "when": "editorLangId =~ /^(typescript|typescriptreact|javascript|javascriptreact)$/",
+          "group": "1_flowchart@3"
         }
       ],
       "view/title": [
@@ -164,14 +221,25 @@
         },
         {
           "command": "codevisualizer.visualizeCodebase"
+        },
+        {
+          "command": "codevisualizer.visualizeFunctionUsage",
+          "when": "editorLangId =~ /^(typescript|typescriptreact|javascript|javascriptreact)$/"
         }
       ],
       "explorer/context": [
         {
-          "command": "codevisualizer.visualizeCodebase",
+          "submenu": "codevisualizer.explorerContextMenu",
           "when": "explorerResourceIsFolder",
           "group": "navigation@1"
         }
+      ],
+      "codevisualizer.explorerContextMenu": [
+        {
+          "command": "codevisualizer.visualizeCodebase",
+          "when": "explorerResourceIsFolder",
+          "group": "1_flowchart@1"
+        }
       ]
     },
     "configuration": {
@@ -294,22 +362,6 @@
       }
     }
   },
-  "scripts": {
-    "vscode:prepublish": "npm run package",
-    "clean": "rimraf dist out",
-    "compile": "npm run clean && webpack",
-    "watch": "webpack --watch",
-    "package": "npm run clean && webpack --mode production --devtool hidden-source-map",
-    "compile-tests": "tsc -p . --outDir out",
-    "watch-tests": "tsc -p . -w --outDir out",
-    "pretest": "npm run compile-tests && npm run compile && npm run lint",
-    "lint": "eslint src --ext ts",
-    "lint:fix": "eslint src --ext ts --fix",
-    "test": "vscode-test",
-    "publish:patch": "vsce publish patch",
-    "publish:minor": "vsce publish minor",
-    "publish:major": "vsce publish major"
-  },
   "devDependencies": {
     "@types/mocha": "^10.0.10",
     "@types/node": "^20.x",