Performance improvements

- Tested extensively with C, and Python
- Using language agnostic apis provided by VS code sdk
- Removed file parsing, as implementation needs to be
as simple as possible
- Updated README.md

Author: sirilcodes

.vscode/launch.json

@@ -0,0 +1,21 @@
+// A launch configuration that compiles the extension and then opens it inside a new window
+// Use IntelliSense to learn about possible attributes.
+// Hover to view descriptions of existing attributes.
+// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+{
+	"version": "0.2.1", // Updated version
+	"configurations": [
+		{
+			"name": "Run Extension",
+			"type": "extensionHost",
+			"request": "launch",
+			"args": [
+				"--extensionDevelopmentPath=${workspaceFolder}"
+			],
+			"outFiles": [
+				"${workspaceFolder}/dist/**/*.js" // Ensure this path is correct
+			],
+			"preLaunchTask": "build" // Ensure this matches the label in tasks.json
+		}
+	]
+}

README.md

@@ -2,23 +2,24 @@
 
 ## Introduction 👨‍🏫
 
-Thanks for checking out Code Visualizer! 🎉 This extension helps developers visualize their code by generating flowcharts that represent the call hierarchy of functions and methods in your codebase. It transforms the often complex structure of code into an easy-to-understand visual format, making it simpler to navigate large projects. 🗺️
+Thanks for checking out Code Visualizer! 🎉 This extension helps developers visualize their code by generating a flowchart that represents the call hierarchy of functions and methods in your codebase. It transforms the often complex structure of code into an easy-to-understand visual format, making it simpler to navigate large projects. 🗺️
 
 ## Features 🌟
-- **Flowchart Generation:** 📊 Right-click on any function or method, and select 'Generate Flowchart' to create a visual representation of its call hierarchy.
+- **Flowchart Generation:** 📊 Right-click on any function or method, and select 'Visualize' to create a visual representation of its call hierarchy.
 - **Interactive Visuals:** 🖱️ Zoom in, zoom out, and interact with the flowchart to explore different parts of your code.
 - **Customizable Views:** 🎨 Tailor the flowchart to focus on specific function calls, and adjust the layout for better readability.
+- **Searchable:** 🔍 Search for any function or method in the flowchart to quickly navigate to it.
 - **Multi-Language Support:** 🌐 Currently supports C, C++, Python. 
-  * At least that's the goal of the project. Contributions are welcome! 🤝
+  * At least that's the goal of this project. Contributions are welcome! 🤝
 
 ## How It Works 🛠️
 
-1. Select a function in your code ✅
-2. Run the "Visualize" command 🏃‍♂️
-3. Watch as CodeFlow creates an interactive diagram of function calls 🎭
+1. Install the extension from the VS Code Marketplace.
+2. Right-click on any function or method, and select 'Visualize' to create a visual representation of its call hierarchy.
+3. Watch as the extension creates an interactive diagram of function calls 🎭
 4. Click on nodes to explore deeper into the call hierarchy 🕵️‍♂️
 
-CodeFlow uses VS Code's built-in call hierarchy API, making it language-agnostic and powerful across various programming languages. 💪
+Code Visualizer uses VS Code's built-in call hierarchy API, making it language-agnostic and powerful across various programming languages. 💪
 
 ## Features 🚀
 
@@ -28,7 +29,7 @@ CodeFlow uses VS Code's built-in call hierarchy API, making it language-agnostic
 
 ## How to Contribute 🤝
 
-We're excited to welcome contributors to the CodeFlow project! Here's how you can get involved:
+We're excited to welcome contributors to the Code Visualizer project! Here's how you can get involved:
 
 1. Fork the repository 🍴
 2. Clone your fork: `https://github.com/Ganjai-Labs/code-visualizer.git` 📥
@@ -37,26 +38,30 @@ We're excited to welcome contributors to the CodeFlow project! Here's how you ca
 5. Run tests: `npm test` 🧪
 6. Commit your changes: `git commit -m "Add some feature"` 💾
 7. Push to the branch: `git push origin your-feature-name` 🚀
-8. Submit a pull request 🙏
+8. Submit a pull request with the description of your changes 🙏
 
 Before contributing, please read our [Contributing Guidelines](CONTRIBUTING.md) and [Code of Conduct](CODE_OF_CONDUCT.md). 📚
 
 ## Features to be Implemented 🔮
 
-We're always looking to improve CodeFlow. Here are some features we'd love to see:
+We're always looking to improve Code Visualizer. Here are some features we'd love to see:
 
 1. Detect cycles in the generated diagrams, and highlight them in red 🔴
-2. Conditional highlighting of nodes based on certain conditions 🎨
-3. Export diagrams as images or SVGs 📸
+2. Draw multiple connections between nodes when a function is called multiple times 🔄
+
+3. Export diagrams as images or SVGs. Currently, the generated diargams are html files that are not viewable outside of VS Code. 📸
 4. Integration with version control to show changes in call hierarchy over time 🕰️
 5. Performance optimizations for large codebases ⚡
 6. Enhanced filtering options for complex diagrams 🔍
 
+### Moon shot 🌙
+
+- Conditional highlighting of nodes based on certain conditions 🎨
+- Integration with LLMs to provide more context for the generated diagrams 🤖
+
 Feel free to tackle any of these or propose your own ideas! 💡
 
 ## Get Started 🚀
 
-Ready to dive in? Install CodeFlow from the VS Code Marketplace and start visualizing your code today! 🎊
-
-Join us in making code comprehension a joyful experience. Happy coding! 😊👨‍💻👩‍💻
+Ready to dive in? Install Code Visualizer from the VS Code Marketplace and start visualizing your code today! 😊👨‍💻👩‍💻
 

src/extension.ts

@@ -96,8 +96,13 @@ let nodePositions: Map<number, {x: number, y: number}> = new Map();
 function showFlowDiagram(data: {nodes: any[], edges: any[]}, context: vscode.ExtensionContext) {
     console.log('Creating or updating webview panel');
     if (panel) {
-        console.log('Updating existing panel');
-        panel.webview.postMessage({ command: 'updateDiagram', data: data, positions: Array.from(nodePositions.entries()) });
+        console.log('Updating existing panel with data:', JSON.stringify(data));
+        console.log('Current node positions:', Array.from(nodePositions.entries()));
+        panel.webview.postMessage({ 
+            command: 'updateDiagram', 
+            data: data,
+            positions: Array.from(nodePositions.entries())
+        });
     } else {
         console.log('Creating new panel');
         panel = vscode.window.createWebviewPanel(
@@ -144,111 +149,32 @@ function showFlowDiagram(data: {nodes: any[], edges: any[]}, context: vscode.Ext
 
 // Modify visualizeNode to accept context
 async function visualizeNode(nodeId: number, context: vscode.ExtensionContext) {
-    console.log(`Visualizing node with ID: ${nodeId}`);
     const node = globalData.nodes.find(n => n.id === nodeId);
-    if (!node) {
-        console.log('Node not found in globalData');
-        return;
-    }
-    console.log(`Found node: ${JSON.stringify(node)}`);
-
-    // Check if this node has already been visualized
-    if (node.visualized) {
-        console.log('Node has already been visualized');
-        vscode.window.showInformationMessage('This function has already been visualized.');
-        return;
-    }
+    if (!node) return;
 
     try {
-        // Open all documents that contain the function with the same name
-        const documents = await vscode.workspace.findFiles('**/*.{c,h}');
-        let callHierarchyItems: vscode.CallHierarchyItem[] | undefined;
-
-        for (const docUri of documents) {
-            const document = await vscode.workspace.openTextDocument(docUri);
-            const text = document.getText();
-            const functionRegex = new RegExp(`\\b${node.label}\\s*\\(`);
-            const match = text.match(functionRegex);
-
-            if (match) {
-                const position = document.positionAt(match.index!);
-                callHierarchyItems = await vscode.commands.executeCommand<vscode.CallHierarchyItem[]>(
-                    'vscode.prepareCallHierarchy',
-                    document.uri,
-                    position
-                );
-
-                if (callHierarchyItems && callHierarchyItems.length > 0) {
-                    break;
-                }
-            }
-        }
+        const document = await vscode.workspace.openTextDocument(vscode.Uri.file(node.file));
+        // Instead of showing the document, let's just get the call hierarchy
+        const position = new vscode.Position(node.line, node.character);
+        
+        console.log(`Requesting call hierarchy for node ${nodeId} at ${node.file}:${position.line},${position.character}`);
+        const callHierarchyItems = await vscode.commands.executeCommand<vscode.CallHierarchyItem[]>(
+            'vscode.prepareCallHierarchy',
+            document.uri,
+            position
+        );
 
         if (callHierarchyItems && callHierarchyItems.length > 0) {
-            console.log('Call hierarchy found, generating new flow diagram');
-            
             const incomingCalls = await vscode.commands.executeCommand<vscode.CallHierarchyIncomingCall[]>(
                 'vscode.provideIncomingCalls',
                 callHierarchyItems[0]
             );
 
             const newData = await generateFlowDiagramFromCallHierarchy(callHierarchyItems[0], incomingCalls);
-            console.log(`New data generated: ${JSON.stringify(newData)}`);
 
-            let hasNewConnections = false;
-
-            // Add new nodes to globalData or find existing ones
-            for (const newNode of newData.nodes) {
-                if (newNode.id !== 0) { // Skip the root node as it already exists
-                    const existingNode = globalData.nodes.find(n => n.label === newNode.label && n.file === newNode.file);
-                    if (!existingNode) {
-                        const newNodeId = nextNodeId++;
-                        globalData.nodes.push({
-                            ...newNode,
-                            id: newNodeId,
-                            visualized: false
-                        });
-                        console.log(`Added new node: ${JSON.stringify(globalData.nodes[globalData.nodes.length - 1])}`);
-                        hasNewConnections = true;
-                    }
-                }
-            }
-
-            // Add or update edges in globalData
-            for (const newEdge of newData.edges) {
-                if (newEdge.to === 0) {
-                    // This edge connects to the visualized node
-                    const fromNode = globalData.nodes.find(n => n.label === newData.nodes[newEdge.from].label && n.file === newData.nodes[newEdge.from].file);
-                    if (fromNode) {
-                        const existingEdge = globalData.edges.find(e => e.from === fromNode.id && e.to === nodeId);
-                        if (!existingEdge) {
-                            globalData.edges.push({ from: fromNode.id, to: nodeId, count: newEdge.count || 1 });
-                            console.log(`Added new edge: ${fromNode.id} -> ${nodeId}, count: ${newEdge.count || 1}`);
-                            hasNewConnections = true;
-                        } else {
-                            console.log(`Edge already exists: ${fromNode.id} -> ${nodeId}, count: ${existingEdge.count}`);
-                        }
-                    }
-                }
-            }
-
-            // Mark the current node as visualized
-            node.visualized = true;
-
-            if (hasNewConnections) {
-                if (panel) {
-                    console.log('Sending updated data to webview');
-                    panel.webview.postMessage({ command: 'updateDiagram', data: globalData, positions: Array.from(nodePositions.entries()) });
-                } else {
-                    console.log('Panel is undefined, cannot update diagram');
-                }
-            } else {
-                console.log('No new connections found, diagram not updated');
-                vscode.window.showInformationMessage('No new connections found for this node.');
-            }
-        } else {
-            console.log('No call hierarchy found');
-            vscode.window.showInformationMessage('No call hierarchy found for the selected function');
+            // Merge the new data with existing data and update the diagram
+            mergeFlowData(newData);
+            showFlowDiagram(globalData, context);
         }
     } catch (error) {
         console.error('Error in visualizeNode:', error);
@@ -266,7 +192,7 @@ async function generateFlowDiagramFromCallHierarchy(
         color: getRandomPastelColor(),
         file: item.uri.fsPath,
         line: item.range.start.line,
-        character: item.range.start.character
+        character: item.selectionRange.start.character
     }];
 
     let edges: {from: number, to: number, count: number}[] = [];
@@ -281,13 +207,14 @@ async function generateFlowDiagramFromCallHierarchy(
         let i = 1;
         for (let [key, count] of callCounts) {
             const [fromName] = key.split('-');
+            const caller = incomingCalls.find(call => call.from.name === fromName)!;
             nodes.push({
                 id: i,
                 label: fromName,
                 color: getRandomPastelColor(),
-                file: incomingCalls.find(call => call.from.name === fromName)!.from.uri.fsPath,
-                line: incomingCalls.find(call => call.from.name === fromName)!.from.range.start.line,
-                character: incomingCalls.find(call => call.from.name === fromName)!.from.range.start.character
+                file: caller.from.uri.fsPath,
+                line: caller.from.range.start.line,
+                character: caller.from.selectionRange.start.character
             });
             edges.push({from: i, to: 0, count: count});
             i++;