removed comments and minor changes to push to main

Author: JunInton

.gitignore

@@ -1,4 +1,5 @@
 node_modules
 dist/
 .vscode-test/
-out/
+out/
+coverage/

CHANGELOG.md

@@ -1,9 +1,51 @@
 # Change Log
 
-All notable changes to the "nextFlow" extension will be documented in this file.
+All notable changes to the "NextFlow" extension will be documented in this file.
 
-Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
+Check [Keep a Changelog]() for recommendations on how to structure this file.
 
 ## [Unreleased]
 
-- Initial release
+- Initial release
+
+[0.2.3] - February 5, 2025
+
+Implemented testing with Jest
+
+[0.2.2] - February 1, 2025
+
+Improved efficiency of parsing script
+
+
+
+[0.0.2] - November 27, 2024
+
+Switched to webpack configuration
+
+[0.0.3] - November 29, 2024
+
+D3 Tree Hierarchy updates (element, text and etc)
+
+[0.0.4] - December 5, 2024
+
+Switched to VS Code extension configuration
+
+[0.0.5] - December 7, 2024
+
+Bundled D3 with extension rather than using CDN
+
+[0.1.5] - December 11, 2024
+
+Added the parsing script to the extension.ts file
+
+[0.2.0] - December 11, 2024
+
+Fixed formatting issues and receiving issues, extension MVP is working as intended
+[0.2.1] - January 18, 2025
+
+Made parsing script more robust
+
+Added mouseover event to nodes
+
+
+

README.md

@@ -18,32 +18,16 @@ NextFlow is a Next.js middleware visualizer for VS Code.
 
 Flow Diagram: Visualize middleware execution across different routes.
 
-Performance Metric Panel:
+Performance Metric Panel: 
 
 VS Code Integration: View middleware behavior directly in the editor.
 
 ## 📦 Installation
 
-### Clone this repository:
-
-```bash
-git clone https://github.com/oslabs-beta/NextFlow
-cd nextflow
-``` 
-### Install dependencies:
-```bash
-npm install
-```
- ### Build the extension:
-```bash
-npm run build
-```
-### Load it into VS Code:
-```bash
-Open VS Code.
-Go to Extensions (Ctrl + Shift + X).
-```
-Click on Load Extension and select the dist folder.
+1. Open VS Code.
+2. Go to the Extensions view (Ctrl+Shift+X).
+3. Search for "Reactive".
+4. Click Install.
 
 ## 🛠 Usage
 
@@ -56,6 +40,7 @@ Click on Load Extension and select the dist folder.
 ### How to contribute
 We welcome contributions! Feel free to submit issues and pull requests.
 
+-Go to https://github.com/oslabs-beta/NextFlow/<br>
 -Fork the project<br>
 -Create your feature branch (git checkout -b feature/AmazingFeature)<br>
 -Commit your changes (git commit -m 'Add some AmazingFeature')<br>
@@ -67,7 +52,7 @@ We welcome contributions! Feel free to submit issues and pull requests.
 #### Jun Inton - [Github](https://github.com/JunInton)
 #### Anthony Noyola - [Github](https://github.com/antwonasn)
 #### Sung Jung - [Github](https://github.com/sungguk85)
-#### Carolina Robinson - [Github](https://github.com/CaroSaFe)
+#### Carolina Robson - [Github](https://github.com/CaroSaFe)
 #### Brendan Hoskins - [Github](https://github.com/BrendanHoskins)
 
 ## 📬 Contact

package.json

@@ -1,8 +1,8 @@
 {
-  "name": "nextFlow",
-  "displayName": "nextFlow",
-  "description": "next.js middleware visualizer",
-  "version": "0.0.1",
+  "name": "NextFlow",
+  "displayName": "NextFlow",
+  "description": "Next.js middleware visualizer",
+  "version": "1.0.0",
   "engines": {
     "vscode": "^1.92.2"
   },
@@ -14,19 +14,9 @@
   "contributes": {
     "commands": [
       {
-        "command": "nextFlow.helloWorld",
-        "title": "Hello World",
-        "category": "Testing"
-      },
-      {
-        "command": "catCoding.start",
-        "title": "Start a new cat coding session",
-        "category": "Cat Coding"
-      },
-      {
-        "command": "nextFlow.start",
+        "command": "NextFlow.start",
         "title": "Display middleware dendrogram",
-        "category": "nextFlow"
+        "category": "NextFlow"
       }
     ]
   },

src/extension.ts

@@ -1,22 +1,12 @@
-// The module 'vscode' contains the VS Code extensibility API
-// Import the module and reference it with the alias vscode in your code below
 import * as vscode from 'vscode';
 import * as path from 'path';
 import parsingScript from './webview/parsingScript';
 
-// This method is called when your extension is activated
-// Your extension is activated the very first time the command is executed
 export function activate(context: vscode.ExtensionContext) {
-  // Use the console to output diagnostic information (console.log) and errors (console.error)
-  // This line of code will only be executed once when your extension is activated
-  console.log('Congratulations, your extension "nextFlow" is now active!');
 
-  // The command has been defined in the package.json file
-  // Now provide the implementation of the command with registerCommand
-  // The commandId parameter must match the command field in package.json
-  const d3 = vscode.commands.registerCommand('nextFlow.start', async () => {
+  const d3 = vscode.commands.registerCommand('NextFlow.start', async () => {
     const panel = vscode.window.createWebviewPanel(
-      'nextFlow',
+      'NextFlow',
       'NextFlow',
       vscode.ViewColumn.One,
       {
@@ -43,26 +33,17 @@ export function activate(context: vscode.ExtensionContext) {
               TypeScript: ['ts'],
             },
           };
-          // console.log(message.text);
           const fileUri = await vscode.window.showOpenDialog(options);
-          // console.log('fileUri: ', fileUri);
           if (fileUri && fileUri[0]) {
             const filePath = fileUri[0].fsPath;
-            // console.log('filePath in extension.ts: ', filePath);
             try {
               const startCpu = process.cpuUsage();
               const startMemory = process.memoryUsage();
-              // console.log('start', startCpu, startMemory);
 
               const flare = await parsingScript(filePath);
 
               const endCpu = process.cpuUsage(startCpu);
               const endMemory = process.memoryUsage();
-              // console.log(
-              //   'Difference time from start to end',
-              //   endCpu,
-              //   endMemory
-              // );
 
               const cpuUsage = {
                 user: endCpu.user,
@@ -93,24 +74,8 @@ export function activate(context: vscode.ExtensionContext) {
                 },
               };
 
-              // const flare = {
-              //   name: "app",
-              //   children: [
-              //     {
-              //       name: "/home",
-              //       children: [{ name: "/about",
-              //         children:[{ name: ":path*", children: [{name: ":/a"}, {name: ":/b"}, {name: ":/c"}] }]
-              //         },
-              //     { name: "/order", children: [{ name: '/order/:id', children: [{ name: ':item'}]}, { name: ':item' }]}]
-              //     },
-              //     { name: "/dashboard",
-              //       children:[{ name: "/dashboard/user", children: [{name: "/dashboard/user/settings"}, {name: "/dashboard/user/config"}] }]
-              //       }
-              //   ],
-              // };
-              // console.log('flare in extension.ts: ', flare);
               const baseDir = path.dirname(filePath);
-              // console.log('baseDir: ', baseDir);
+
               const compName = path.parse(filePath).base;
               panel.webview.postMessage({
                 command: 'filePicked',
@@ -126,9 +91,7 @@ export function activate(context: vscode.ExtensionContext) {
           break;
 
         case 'openMetricsPanel':
-          // if (metricsData) {
 
-          // }
           const metricsPanel = vscode.window.createWebviewPanel(
             'metrics',
             'NextFlow Metrics',
@@ -283,5 +246,4 @@ function getWebviewContent(uri: vscode.Uri) {
       </html>`;
 }
 
-// This method is called when your extension is deactivated
 export function deactivate() {}

src/test/d3Chart.test.ts

@@ -1,7 +1,4 @@
 import {createChart} from '../webview/d3Chart.js';
-// import * as d3 from 'd3';
-// const createChart = require('../webview/d3Chart.js');
-// const d3 = require('d3');
 
 const mockFlareObject = {
   name: "app",
@@ -19,17 +16,13 @@ const mockFlareObject = {
   ],
 };
 
-// jest.mock('d3');
 
 describe('D3 Tests', () => {
   test('creates an SVG element', () => {
     const chart = createChart(mockFlareObject);
-    console.log(chart);
     const chartContainer = document.createElement('div');
     chartContainer.id = 'chart';
 
-    // document.body.appendChild(chart);
-
     expect(chart).toBeDefined();
 
   });

src/test/extension.test.ts

@@ -71,7 +71,6 @@ describe ('NextFlow Extension Test', () => {
 		describe('activate', () => {
 			test('should register the nextFlow.start command',  () => {
 			  activate(context);
-			//   console.log(context);
 			  // Check that the 'nextFlow.start' command is registered
 			  expect(vscode.commands.registerCommand).toHaveBeenCalledWith(
 				'nextFlow.start',
@@ -112,7 +111,6 @@ describe ('NextFlow Extension Test', () => {
 				  );
 
 				activate(context);
-				// console.log(context.subscriptions[1].dispose);
 
 				// Mock createWebviewPanel
 				const createWebviewPanelSpy = jest.spyOn(vscode.window, 'createWebviewPanel');
@@ -127,11 +125,6 @@ describe ('NextFlow Extension Test', () => {
 					vscode.ViewColumn.Two,
 					expect.objectContaining({ enableScripts: true, retainContextWhenHidden: true })
 				);
-					
-					// test('should call correct file path', () => {
-					// 	expect(asWebviewUriMock.mock.calls.length).toBe(1)
-					// });
-				
 			});	
 	});
 });

src/test/parsingScript.test.ts

@@ -34,10 +34,7 @@ jest.mock('fs', () => {
 
 describe('Parsing script', () => {
   test('should return a finalObject in the correct format for D3', async () => {
-    // const input = mockFilePath;
-    // console.log('mockFilePath', input);
     const result = await parsingScript(mockFilePath);
-    // console.log('result', result);
     expect(result).toEqual(mockFinalObject);
   });
 });