impact-analysis 1.0.5 → 2.0.0

package/README.md

@@ -1,21 +1,126 @@
-# Impact Analysis Tool
+# Impact Analysis
 
-**Impact Analysis** is a tool that analyzes file dependencies in a code repository. It identifies the impact of code changes by generating a dependency tree and presenting the results in both tabular and graphical formats.
-
----
+Analyze the real impact of code changes in JavaScript, TypeScript, React, Vue, and Angular projects.
 
 ## Features
 
-- **Impact Analysis:** Identifies dependent files for each changed file.
-- **Interactive Graph View:** Visualizes dependencies with an interactive graph.
-- **Table View:** Displays results in a clear tabular format.
-- **User-Friendly UI:** Toggle between Graph View and Table View.
-
----
+- **Smart Dependency Analysis**
+- **Visual Reports** - Beautiful HTML reports with interactive dependency graphs
+- **Fast with Caching** - Caches dependency graphs for quick re-analysis
+- **AI Explanations** (Optional) - Get AI-powered insights using Google Gemini
+- **React Support** - Full support for .js, .jsx, .ts, .tsx files
+- **Angular Support** - Supports TypeScript components
+- **Vue Support** - Full support for Vue SFCs including `<script>` and `<script setup>`
+- **Risk Scoring** - Automatic LOW/MEDIUM/HIGH risk classification
 
 ## Installation
 
-Install globally using npm:
+```bash
+npm install -g impact-analysis
+```
+
+Or use locally in a project:
+```bash
+npm install --save-dev impact-analysis
+```
+
+## Usage
+
+### Basic Analysis
 
 ```bash
+# Analyze changes compared to main branch
+impact-analysis
+
+# Compare against a different branch
+impact-analysis develop
+
+# Open HTML report in browser
+impact-analysis --html
+
+# Clear cache and rebuild dependency graph
+impact-analysis --clear-cache
+```
+
+### AI Explanations (If you really want to get an AI powered analysis)
+
+To enable AI-powered impact explanations:
+
+1. Get a free API key from [Google AI Studio](https://aistudio.google.com/app/apikey)
+2. Create a `.env` file in your project root:
+   ```bash
+   GEMINI_API_KEY=your-api-key-here
+   ```
+3. Run with `--ai` flag:
+   ```bash
+   impact-analysis --ai
+   ```
+
+Note: AI features are completely optional. The tool works perfectly without an API key.
+
+## How It Works
+
+1. **Scans** your repository for all `.js`, `.ts`, and `.vue` files
+2. **Builds** a dependency graph using AST parsing
+3. **Detects** changed files using Git diff
+4. **Analyzes** which files import the changed files
+5. **Generates** an HTML report with interactive visualization
+
+## Supported Import Formats
+
+- ES6 imports: `import x from './module'`
+- Dynamic imports: `import('./module')`
+- CommonJS: `require('./module')`
+- Export from: `export { x } from './module'`
+- Export all: `export * from './module'`
+- Path aliases: `@/`, `~/`, `#`, tsconfig paths
+
+## Path Alias Support
+
+The tool automatically resolves:
+- `@/components/Header` → `components/Header`
+- `~/utils/helper` → `utils/helper`
+- `#components/Footer` → `components/Footer`
+- Custom tsconfig paths
+
+## Output
+
+### Console Output
+```
+Scanning repository...
+Building dependency graph from 850 files...
+Dependency graph built: 543 files with dependencies
+Getting changed files against main...
+Found 2 changed files. Analyzing impact...
+
+--- Impact Analysis Results ---
+
+1. GlobalNavNuxt.vue
+   Risk: HIGH
+   Impacted files: 12
+     - Header.vue
+     - Layout.vue
+     - NavBar.vue
+     ... and 9 more
+
+Generating HTML report...
+Report saved: impact-analysis.html
+```
+
+### HTML Report
+
+Interactive visualization with:
+- **Graph View**: Visual dependency network
+- **Table View**: Detailed file-by-file breakdown
+- Clickable nodes and expandable lists
+
+## Requirements
+
+- Node.js 18+
+- Git (for change detection)
+- A Git repository
+
+## License
+
+MITbash
 npm install -g impact-analysis

package/git/core/analyzer.ts

@@ -0,0 +1,28 @@
+import path from 'path';
+
+export interface ImpactResult {
+  changedFile: string;
+  impactedFiles: string[];
+  risk: 'LOW' | 'MEDIUM' | 'HIGH';
+}
+
+export function analyzeImpact(
+  changedFiles: string[],
+  dependencyMap: Record<string, string[]>
+): ImpactResult[] {
+  return changedFiles.map(changed => {
+    const impacted = Object.entries(dependencyMap)
+      .filter(([, deps]) => deps.includes(changed))
+      .map(([file]) => file);
+
+    let risk: ImpactResult['risk'] = 'LOW';
+    if (impacted.length > 5) risk = 'HIGH';
+    else if (impacted.length > 2) risk = 'MEDIUM';
+
+    return {
+      changedFile: changed,
+      impactedFiles: impacted,
+      risk
+    };
+  });
+}

package/git/getChangedFiles.ts

@@ -0,0 +1,15 @@
+import simpleGit from "simple-git";
+import path from "path";
+
+export async function getChangedFiles(base: string): Promise<string[]> {
+  try {
+    const git = simpleGit();
+    const diff = await git.diff(["--name-only", base]);
+    return diff
+      .split("\n")
+      .filter(f => /\.(js|jsx|ts|tsx|vue)$/.test(f))
+      .map(f => path.resolve(process.cwd(), f));
+  } catch (error) {
+    throw new Error(`Failed to get changed files. Make sure Git is installed and you're in a Git repository. Base branch: ${base}`);
+  }
+}

package/index.mjs

@@ -149,7 +149,7 @@ function generateGraphData(dependencyData) {
           if (!nodes.has(impactedFile)) {
               nodes.set(impactedFile, { id: impactedFileName, path: impactedFile,  isChangedFile: false });
           }
-          links.push({ id: changedFile, source: changedFile, target: impactedFileName });
+          links.push({ source: changedFile, target: impactedFileName });
       });
   });
 
@@ -160,6 +160,7 @@ function generateGraphData(dependencyData) {
 }
 
 const graphData = generateGraphData(results);
+
 const htmlContent = `
 <!DOCTYPE html>
 <html lang="en">
@@ -196,23 +197,23 @@ const htmlContent = `
       }
       td:first-child {
         background: #91fd9117;
-      }
-      .btn-theme {
-        min-width: 142px;
-        padding: 12px 16px;
-        font-size: 14px;
-        border-radius: 100px;
-        border: 1px solid #565454;
-        outline: none;
-        box-shadow: none;
-        cursor: pointer;
-        transition: all .3s ease-in-out;
-        text-decoration: none;
-        display: inline-flex;
-        align-items: center;
-        font-family: "Exo 2", serif;
-        background: #222;
-        color: #fff;
+        }
+        .btn-theme {
+          min-width: 142px;
+          padding: 12px 16px;
+          font-size: 14px;
+          border-radius: 100px;
+          border: 1px solid #565454;
+          outline: none;
+          box-shadow: none;
+          cursor: pointer;
+          transition: all .3s ease-in-out;
+          text-decoration: none;
+          display: inline-flex;
+          align-items: center;
+          font-family: "Exo 2", serif;
+          background: #222;
+          color: #fff;
       }
 
       .btn-active {
@@ -221,40 +222,36 @@ const htmlContent = `
           color: #fff
       }
 
-      .btn-svg path {
-        fill: #fefefe;
-      }
-
       .btn-active:hover svg path {
         fill: #1f4afe;
       }
 
-      .btn-theme:hover svg path {
-        fill: #1f4afe;
-      }
-
       .btn-theme:hover {
         background: #fff;
         color: #1f4afe;
         border: 1px solid #1F4AFE
-      }
+    }
 
-      .btn-svg {
-        width: 20px;
-        height: 20px;
-        margin-right: 10px;
-      }
+    .btn-svg {
+      width: 20px;
+      height: 20px;
+      margin-right: 10px;
+    }
 
-      th {
-        background: #1f4afe;
-        background: linear-gradient(90deg,#1f4afe 35%,#167cfc);
-        width: 50%;
-      }
+    .btn-svg path {
+      fill: #fefefe;
+    }
+
+    th {
+      background: #1f4afe;
+      background: linear-gradient(90deg,#1f4afe 35%,#167cfc);
+    }
+
+    th:last-child {
+      background: #1f4afe;
+      background: linear-gradient(-90deg,#1f4afe 35%,#167cfc);
+    }
 
-      th:last-child {
-        background: #1f4afe;
-        background: linear-gradient(-90deg,#1f4afe 35%,#167cfc);
-      }
   </style>
 </head>
 <body>
@@ -295,161 +292,159 @@ const htmlContent = `
 
 
   <script>
-  const impactData = ${JSON.stringify(dependencyJson)};
-  function getFileName(path) {
-    return path.split(/[/\\\\\\\\]/).pop();
-}
-
-  const nodesMap = new Map();
-        impactData.forEach(d => {
-            nodesMap.set(d.changedFile, { id: d.changedFile, name: getFileName(d.changedFile), isChangedFile: true });
-            d.impactsTo.forEach(target => {
-                nodesMap.set(target, { id: target, name: getFileName(target), isChangedFile: false });
-            });
-        });
-        const nodes = Array.from(nodesMap.values());
-        const links = [];
-        const impactMap = new Map();
-
-        impactData.forEach(d => {
-            d.impactsTo.forEach(target => {
-                links.push({ source: d.changedFile, target });
-                if (!impactMap.has(target)) impactMap.set(target, new Set());
-                impactMap.get(target).add(d.changedFile);
-            });
-        });
-
-        impactMap.forEach((sources, target) => {
-            sources.forEach(source1 => {
-                sources.forEach(source2 => {
-                    if (source1 !== source2) {
-                        links.push({ source: source1, target: source2 });
-                    }
-                });
-            });
-        });
+  const graph = ${JSON.stringify(graphData)};
+
+  const width = window.innerWidth;
+  const height = window.innerHeight - 100;
+
+  const svg = d3.select("#svgGraph")
+      .attr("width", width)
+      .attr("height", height);
+
+  const simulation = d3.forceSimulation(graph.nodes)
+      .force("link", d3.forceLink(graph.links).id(d => d.id).distance(150))  // Increased distance for better spacing
+      .force("charge", d3.forceManyBody().strength(-200))  // Stronger repulsion to avoid overlap
+      .force("center", d3.forceCenter(width / 2, height / 2))  // Centering the graph
+      .force("collision", d3.forceCollide().radius(20))  // Prevents overlap
+      .on("tick", ticked);
+
+  const link = svg.selectAll("line")
+      .data(graph.links)
+      .enter().append("line");
+
+  const node = svg.selectAll("circle")
+      .data(graph.nodes)
+      .enter().append("circle")
+      .attr("r", d => d.isChangedFile ? 18 : 12)  // Slightly larger nodes
+      .attr("fill", d => d.isChangedFile ? "#ff4500" : "#007bff")  // Bright orange for changedFile, blue for others
+      .style("stroke", "#fff")  // White border for clarity
+      .style("stroke-width", 2)
+      .call(drag(simulation));
+
+  const tooltip = d3.select("#tooltip");
+
+  node.on("mouseover", (event, d) => {
+      tooltip.style("display", "block")
+          .html(\`<strong>\${d.isChangedFile ? d.id : d.path}</strong>\`)
+          .style("left", (event.pageX + 10) + "px")
+          .style("top", (event.pageY - 10) + "px");
+  }).on("mouseout", () => tooltip.style("display", "none"));
+
+  svg.selectAll("text")
+      .data(graph.nodes)
+      .enter().append("text")
+      .attr("dy", 4)
+      .attr("x", 12)
+      .text(d => d.isChangedFile ? d.name : d.id);
+
+  simulation.on("tick", () => {
+      link.attr("x1", d => clamp(d.source.x, 0, width))
+          .attr("y1", d => clamp(d.source.y, 0, height))
+          .attr("x2", d => clamp(d.target.x, 0, width))
+          .attr("y2", d => clamp(d.target.y, 0, height));
+
+      node.attr("cx", d => clamp(d.x, 10, width - 10))
+          .attr("cy", d => clamp(d.y, 10, height - 10));
+
+      svg.selectAll("text")
+          .attr("x", d => clamp(d.x + 20, 10, width - 10))
+          .attr("y", d => clamp(d.y + 6, 10, height - 10));
+  });
 
-        const graph = { nodes, links };
-
-        const width = window.innerWidth;
-        const height = window.innerHeight - 100;
-
-        const svg = d3.select("#svgGraph")
-            .attr("width", width)
-            .attr("height", height);
-
-        const simulation = d3.forceSimulation(graph.nodes)
-            .force("link", d3.forceLink(graph.links)
-                .id(d => d.id)
-                .distance(80)
-            )
-            .force("charge", d3.forceManyBody()
-                .strength(-50)
-            )
-            .force("center", d3.forceCenter(width / 2, height / 2))
-            .force("collision", d3.forceCollide()
-                .radius(35)
-            )
-            .on("tick", ticked);
-
-        const link = svg.append("g")
-            .selectAll("line")
-            .data(graph.links)
-            .enter().append("line")
-            .attr("stroke", "#aaa");
-
-        const nodeGroup = svg.append("g")
-            .selectAll("g")
-            .data(graph.nodes)
-            .enter().append("g")
-            .call(d3.drag()
-                .on("start", dragStarted)
-                .on("drag", dragged)
-                .on("end", dragEnded));
-
-        const node = nodeGroup.append("circle")
-            .attr("r", 10)
-            .attr("fill", d => d.isChangedFile ? "red" : "steelblue");
-
-        const labels = nodeGroup.append("text")
-            .attr("x", 12)
-            .attr("y", 5)
-            .text(d => d.name);
-
-        simulation.on("tick", () => {
-              link.attr("x1", d => d.source.x)
-                  .attr("y1", d => d.source.y)
-                  .attr("x2", d => d.target.x)
-                  .attr("y2", d => d.target.y);
-  
-              nodeGroup.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
-          });
-
-        function dragStarted(event, d) {
-            if (!event.active) simulation.alphaTarget(0.3).restart();
-            d.fx = d.x;
-            d.fy = d.y;
-        }
+  // Helper function to keep nodes within boundaries
+  function clamp(value, min, max) {
+      return Math.max(min, Math.min(max, value));
+  }
 
-        function dragged(event, d) {
-            d.fx = event.x;
-            d.fy = event.y;
-        }
+  function drag(simulation) {
+      function dragstarted(event, d) {
+          if (!event.active) simulation.alphaTarget(0.3).restart();
+          d.fx = d.x;
+          d.fy = d.y;
+      }
 
-        function dragEnded(event, d) {
-            if (!event.active) simulation.alphaTarget(0);
-            d.fx = null;
-            d.fy = null;
-        }
+      function dragged(event, d) {
+          d.fx = clamp(event.x, 10, width - 10);
+          d.fy = clamp(event.y, 10, height - 10);
+      }
 
-        document.getElementById("graphViewBtn").addEventListener("click", function () {
-            document.getElementById("graphView").style.display = "block";
-            document.getElementById("tableView").style.display = "none";
-            setActiveButton(this);
-        });
+      function dragended(event, d) {
+          if (!event.active) simulation.alphaTarget(0);
+          d.fx = null;
+          d.fy = null;
+      }
 
-        document.getElementById("tableViewBtn").addEventListener("click", function () {
-            document.getElementById("graphView").style.display = "none";
-            document.getElementById("tableView").style.display = "block";
-            setActiveButton(this);
-            generateTableView(impactData);
-        });
+      return d3.drag()
+          .on("start", dragstarted)
+          .on("drag", dragged)
+          .on("end", dragended);
+  }
+  function ticked() {
+    link
+        .attr("x1", d => d.source.x)
+        .attr("y1", d => d.source.y)
+        .attr("x2", d => d.target.x)
+        .attr("y2", d => d.target.y);
+
+    node
+        .attr("cx", d => d.x)
+        .attr("cy", d => d.y);
+
+    label
+        .attr("x", d => d.x + 10)
+        .attr("y", d => d.y + 5);
+}
 
-        function setActiveButton(activeBtn) {
-            document.querySelectorAll(".btn-theme").forEach(button => {
-                button.classList.remove("btn-active");
-            });
-            activeBtn.classList.add("btn-active");
-        }
+document.getElementById("graphViewBtn").addEventListener("click", function () {
+  document.getElementById("graphView").style.display = "block";
+  document.getElementById("tableView").style.display = "none";
+  setActiveButton(this);
+});
+
+document.getElementById("tableViewBtn").addEventListener("click", function () {
+  document.getElementById("graphView").style.display = "none";
+  document.getElementById("tableView").style.display = "block";
+  setActiveButton(this);
+  generateTableView(${JSON.stringify(dependencyJson)});
+});
+
+// Function to highlight the active button
+function setActiveButton(activeBtn) {
+  document.querySelectorAll(".btn-theme").forEach(button => {
+      button.classList.remove("btn-active");
+  });
+  activeBtn.classList.add("btn-active");
+}
 
-        function generateTableView(data) {
-            const tableBody = document.getElementById("tableBody");
-            tableBody.innerHTML = "";
+// Function to generate the table
+function generateTableView(data) {
+  const tableData = data;
+  var tableBody = document.getElementById("tableBody");
+  tableBody.innerHTML = "";  // Clear previous content
 
-            data.forEach(row => {
-                const tr = document.createElement("tr");
+  // Ensure tableData is an array
+  if (!Array.isArray(tableData) || tableData.length === 0) {
+      tableBody.innerHTML = '<tr><td colspan="2">No data available</td></tr>';
+      return;
+  }
 
-                const tdFile = document.createElement("td");
-                tdFile.textContent = row.changedFile;
-                tr.appendChild(tdFile);
+  // Populate table
+  tableData.forEach(function (result) {
+      var row = document.createElement("tr");
 
-                const tdImpact = document.createElement("td");
-                tdImpact.textContent = row.impactsTo.length ? row.impactsTo.join(", ") : "No Impact";
-                tr.appendChild(tdImpact);
+      var changedFileCell = document.createElement("td");
+      changedFileCell.textContent = result.changedFile;
 
-                tableBody.appendChild(tr);
-            });
-        }
-        function ticked() {
-          node.attr("cx", d => d.x = Math.max(20, Math.min(width - 20, d.x)))
-              .attr("cy", d => d.y = Math.max(20, Math.min(height - 20, d.y)));
-      
-          link.attr("x1", d => d.source.x)
-              .attr("y1", d => d.source.y)
-              .attr("x2", d => d.target.x)
-              .attr("y2", d => d.target.y);
-      }
+      var impactsToCell = document.createElement("td");
+      impactsToCell.innerHTML = result.impactsTo.map(function (file) {
+          return '<div class="impact-file-list">' + file + '</div>';
+      }).join("");
 
+      row.appendChild(changedFileCell);
+      row.appendChild(impactsToCell);
+      tableBody.appendChild(row);
+  });
+}
 
 
   </script>
@@ -457,5 +452,6 @@ const htmlContent = `
 </html>
 `;
 
+// Write HTML file
 fs.writeFileSync('impact-analysis.html', htmlContent);
 console.log('✅ Dependency graph generated: impact-analysis.html');

package/package.json

@@ -1,23 +1,31 @@
 {
   "name": "impact-analysis",
-  "version": "1.0.5",
-  "description": "Tool to analyze code impact based on changed files and dependencies.",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
+  "version": "2.0.0",
+  "description": "Analyze real impact of code changes using dependency graphs",
   "bin": {
-    "impact-analysis": "./index.mjs"
+    "impact-analysis": "dist/cli.js"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "dev": "ts-node src/cli.ts"
   },
-  "keywords": [
-    "impact",
-    "analysis",
-    "dependency",
-    "npm"
-  ],
-  "author": "Sushant Keshav Thorat",
   "license": "MIT",
   "dependencies": {
-    "simple-git": "^3.27.0"
+    "@babel/parser": "^7.24.0",
+    "@babel/traverse": "^7.24.0",
+    "@google/generative-ai": "^0.24.1",
+    "@vue/compiler-sfc": "^3.4.0",
+    "commander": "^11.0.0",
+    "dotenv": "^17.2.3",
+    "fast-glob": "^3.3.2",
+    "simple-git": "^3.22.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.0",
+    "parse-json": "^8.3.0",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.4.0"
   }
 }