impact-analysis 1.0.0

package/README.md

@@ -0,0 +1,21 @@
+# Impact Analysis Tool
+
+**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.
+
+---
+
+## 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.
+
+---
+
+## Installation
+
+Install globally using npm:
+
+```bash
+npm install -g impact-analysis

package/index.mjs

@@ -0,0 +1,457 @@
+#!/usr/bin/env node
+import fs from 'fs';
+import path from 'path';
+import simpleGit from 'simple-git';
+
+const git = simpleGit();
+
+function readFile(filePath) {
+  return fs.readFileSync(filePath, 'utf8');
+}
+
+function extractDependencies(content, filePath, baseDir) {
+  const dependencies = [];
+  const importRegex = /import\s+.*\s+from\s+['"]([^'"]+)['"]/g;
+
+  let match;
+  while ((match = importRegex.exec(content))) {
+    const importPath = match[1];
+    const resolvedPath = resolveImportPath(importPath, filePath, baseDir);
+    if (resolvedPath) {
+      dependencies.push(resolvedPath);
+    }
+  }
+
+  return dependencies;
+}
+
+function resolveImportPath(importPath, filePath, baseDir) {
+  if (importPath.startsWith('@/')) {
+    return path.resolve(baseDir, importPath.substring(2));
+  }
+  if (importPath.startsWith('./') || importPath.startsWith('../')) {
+    return path.resolve(path.dirname(filePath), importPath);
+  }
+  const absolutePath = path.resolve(baseDir, importPath);
+  if (fs.existsSync(absolutePath)) {
+    return absolutePath;
+  }
+  return null;
+}
+
+function getAllFiles(dirPath, arrayOfFiles = []) {
+  const files = fs.readdirSync(dirPath);
+
+  files.forEach(file => {
+    const fullPath = path.join(dirPath, file);
+    if (fs.statSync(fullPath).isDirectory()) {
+      getAllFiles(fullPath, arrayOfFiles);
+    } else if (/\.(js|ts|vue)$/.test(file)) {
+      arrayOfFiles.push(fullPath);
+    }
+  });
+
+  return arrayOfFiles;
+}
+
+async function buildDependencyMap(baseDir) {
+  const dependencyMap = {};
+
+  try {
+    const allFiles = getAllFiles(baseDir);
+
+    for (const file of allFiles) {
+      const code = readFile(file);
+      const dependencies = extractDependencies(code, file, baseDir);
+      dependencyMap[file] = dependencies;
+    }
+
+    return dependencyMap;
+  } catch (error) {
+    console.error('Error building dependency map:', error);
+    throw error;
+  }
+}
+
+async function generateImpactList(baseDir) {
+  const impactMap = {};
+
+  try {
+    const dependencyMap = await buildDependencyMap(baseDir);
+
+    const status = await git.status();
+    const changedFiles = status.modified
+      .map(file => path.resolve(baseDir, file))
+      .filter(file => /\.(js|ts|vue)$/.test(file));
+
+    const reverseDependencyMap = {};
+    Object.keys(dependencyMap).forEach(file => {
+      dependencyMap[file].forEach(importPath => {
+        if (!reverseDependencyMap[importPath]) {
+          reverseDependencyMap[importPath] = new Set();
+        }
+        reverseDependencyMap[importPath].add(file);
+      });
+    });
+    changedFiles.forEach(changedFile => {
+        impactMap[changedFile] = [];
+        for (const [file, dependencies] of Object.entries(dependencyMap)) {
+          if (dependencies.includes(changedFile)) {
+            impactMap[changedFile].push(file);
+          }
+        }
+      });
+      const createImpactJson = (changedFiles, dependencyMap) => {
+        const result = {};
+
+        const getLastPart = (path) => path.split('\\').pop().split('/').pop().replace(/\.[^/.]+$/, "");
+
+        changedFiles.forEach(changedFile => {
+          const changedFileName = getLastPart(changedFile);
+          result[changedFile] = [];
+
+          for (const [file, dependencies] of Object.entries(dependencyMap)) {
+            if (dependencies.some(dep => getLastPart(dep) === changedFileName)) {
+              if (!result[changedFile].includes(file)) {
+                result[changedFile].push(file);
+              }
+            }
+          }
+        });
+
+        return Object.entries(result).map(([changedFile, impactsTo]) => ({
+          changedFile,
+          impactsTo
+        }));
+      };
+
+      const impactJson = createImpactJson(changedFiles, dependencyMap);
+      return impactJson;
+  } catch (error) {
+    console.error('Error generating impact list:', error);
+  }
+}
+
+const baseDir = process.cwd();
+const dependencyJson = await generateImpactList(baseDir);
+let results = dependencyJson;
+function generateGraphData(dependencyData) {
+  const nodes = new Map();
+  const links = [];
+
+  dependencyData.forEach(({ changedFile, impactsTo }) => {
+      const changedFileName = path.basename(changedFile);
+      if (!nodes.has(changedFile)) {
+          nodes.set(changedFile, { id: changedFile, name: changedFileName, isChangedFile: true });
+      }
+      impactsTo.forEach(impactedFile => {
+        const impactedFileName = path.basename(impactedFile);
+          if (!nodes.has(impactedFile)) {
+              nodes.set(impactedFile, { id: impactedFileName, path: impactedFile,  isChangedFile: false });
+          }
+          links.push({ source: changedFile, target: impactedFileName });
+      });
+  });
+
+  return {
+      nodes: Array.from(nodes.values()),
+      links
+  };
+}
+
+const graphData = generateGraphData(results);
+
+const htmlContent = `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Impact Analysis</title>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+  <style>
+      body { font-family: "Exo 2", serif; background-color: #282828; color: #fff; overflow-x: hidden;
+      font-optical-sizing: auto; margin: 0; padding: 0; text-align: center; font-weight: 400;}
+      svg { width: 100%; height: 100vh; }
+      circle { cursor: pointer; }
+      text { font-size: 12px; fill: #fff; }
+      line { stroke: #fefefe; stroke-opacity: 0.6; }
+      #tooltip { position: absolute; background: #fff;color: #000; padding: 8px; border: 1px solid #ddd; display: none; }
+      .svg-wrapper{ padding: 10px; }
+      .impact-file-list {
+        display: list-item;
+        list-style: number;
+        text-align: left;
+        padding-left: 7px;
+      }
+      .impact-analysis-table {
+        width: 100%; border-collapse: collapse;
+      }
+      .impact-analysis-table td {
+        padding: 10px 20px;
+      }
+      th {
+        padding: 10px;
+      }
+      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-active {
+          background: #1f4afe;
+          background: linear-gradient(90deg,#1f4afe 35%,#167cfc);
+          color: #fff
+      }
+
+      .btn-active: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 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);
+    }
+
+  </style>
+</head>
+<body>
+  <h1>Impact Analysis</h1>
+  <div id="tooltip"></div>
+  <div style="text-align: center; margin-bottom: 10px;">
+      <button id="graphViewBtn" class="btn-theme btn-active"><svg class="btn-svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve">
+      <g><g><path fill="#000000" d="M224.5,7.9c-11.8,0-21.5,9.6-21.5,21.5c0,7.4,3.8,14,9.6,17.9l-40.5,106.9c-1.1-0.2-2.3-0.3-3.4-0.3c-5.2,0-9.8,1.9-13.5,4.9l-40.6-33.5c1.6-3,2.6-6.4,2.6-10c0-11.8-9.6-21.5-21.5-21.5c-11.8,0-21.5,9.6-21.5,21.5c0,6.4,2.9,12.1,7.3,16l-43.3,75.3c-2.2-0.7-4.5-1.3-6.9-1.3c-11.8,0-21.5,9.6-21.5,21.5c0,11.8,9.6,21.5,21.5,21.5c11.8,0,21.5-9.6,21.5-21.5c0-6.3-2.8-11.9-7.1-15.8l43.3-75.4c2.1,0.7,4.3,1.2,6.7,1.2c5.1,0,9.7-1.9,13.4-4.8l40.6,33.6c-1.6,3-2.5,6.3-2.5,9.9c0,11.8,9.6,21.5,21.5,21.5c11.8,0,21.5-9.6,21.5-21.5c0-7.6-4-14.3-10-18.1l40.5-106.7c1.3,0.2,2.6,0.4,3.9,0.4c11.8,0,21.5-9.6,21.5-21.5C246,17.5,236.4,7.9,224.5,7.9L224.5,7.9z M31.5,239.6c-7.1,0-12.9-5.8-12.9-12.9c0-7.1,5.8-12.9,12.9-12.9c7.1,0,12.9,5.8,12.9,12.9C44.3,233.8,38.6,239.6,31.5,239.6z M95.7,128c-7.1,0-12.9-5.8-12.9-12.9c0-7.1,5.8-12.9,12.9-12.9c7.1,0,12.9,5.8,12.9,12.9C108.6,122.3,102.8,128,95.7,128z M168.7,188.1c-7.1,0-12.9-5.8-12.9-12.9c0-7.1,5.8-12.9,12.9-12.9c7.1,0,12.9,5.8,12.9,12.9C181.6,182.3,175.8,188.1,168.7,188.1L168.7,188.1z M224.5,42.2c-7.1,0-12.9-5.8-12.9-12.9c0-7.1,5.8-12.9,12.9-12.9c7.1,0,12.9,5.8,12.9,12.9C237.4,36.5,231.6,42.2,224.5,42.2L224.5,42.2z"/></g></g>
+      </svg> Graph View</button>
+      <button id="tableViewBtn" class="btn-theme"><svg class="btn-svg" width="12px" height="12px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      </defs>
+          <g id="64px-Line" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+              <g id="db-table">
+
+      </g>
+              <path d="M56,12 C56,9.794 54.206,8 52,8 L10,8 C7.794,8 6,9.794 6,12 L6,54 C6,56.206 7.794,58 10,58 L52,58 C54.206,58 56,56.206 56,54 L56,12 L56,12 Z M30,22 L30,32 L20,32 L20,22 L30,22 L30,22 Z M42,22 L42,32 L32,32 L32,22 L42,22 L42,22 Z M54,22 L54,32 L44,32 L44,22 L54,22 L54,22 Z M18,32 L8,32 L8,22 L18,22 L18,32 L18,32 Z M8,34 L18,34 L18,44 L8,44 L8,34 L8,34 Z M20,34 L30,34 L30,44 L20,44 L20,34 L20,34 Z M30,46 L30,56 L20,56 L20,46 L30,46 L30,46 Z M32,46 L42,46 L42,56 L32,56 L32,46 L32,46 Z M32,44 L32,34 L42,34 L42,44 L32,44 L32,44 Z M44,34 L54,34 L54,44 L44,44 L44,34 L44,34 Z M10,10 L52,10 C53.103,10 54,10.897 54,12 L54,20 L8,20 L8,12 C8,10.897 8.897,10 10,10 L10,10 Z M8,54 L8,46 L18,46 L18,56 L10,56 C8.897,56 8,55.103 8,54 L8,54 Z M52,56 L44,56 L44,46 L54,46 L54,54 C54,55.103 53.103,56 52,56 L52,56 Z" id="Shape" fill="#000000">
+
+      </path>
+          </g>
+      </svg> Table View</button>
+  </div>
+
+  <div id="graphView" style="display: block;">
+      <svg id="svgGraph" width="1000" height="600"></svg>
+  </div>
+
+  <div id="tableView" style="display: none;padding: 20px;">
+      <table class="impact-analysis-table" border="1">
+          <thead>
+              <tr>
+                  <th>Changed File</th>
+                  <th>Impacted Files</th>
+              </tr>
+          </thead>
+          <tbody id="tableBody"></tbody>
+      </table>
+  </div>
+
+
+  <script>
+  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));
+  });
+
+  // Helper function to keep nodes within boundaries
+  function clamp(value, min, max) {
+      return Math.max(min, Math.min(max, value));
+  }
+
+  function drag(simulation) {
+      function dragstarted(event, d) {
+          if (!event.active) simulation.alphaTarget(0.3).restart();
+          d.fx = d.x;
+          d.fy = d.y;
+      }
+
+      function dragged(event, d) {
+          d.fx = clamp(event.x, 10, width - 10);
+          d.fy = clamp(event.y, 10, height - 10);
+      }
+
+      function dragended(event, d) {
+          if (!event.active) simulation.alphaTarget(0);
+          d.fx = null;
+          d.fy = null;
+      }
+
+      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);
+}
+
+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 to generate the table
+function generateTableView(data) {
+  const tableData = data;
+  var tableBody = document.getElementById("tableBody");
+  tableBody.innerHTML = "";  // Clear previous content
+
+  // Ensure tableData is an array
+  if (!Array.isArray(tableData) || tableData.length === 0) {
+      tableBody.innerHTML = '<tr><td colspan="2">No data available</td></tr>';
+      return;
+  }
+
+  // Populate table
+  tableData.forEach(function (result) {
+      var row = document.createElement("tr");
+
+      var changedFileCell = document.createElement("td");
+      changedFileCell.textContent = result.changedFile;
+
+      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>
+</body>
+</html>
+`;
+
+// Write HTML file
+fs.writeFileSync('impact-analysis.html', htmlContent);
+console.log('✅ Dependency graph generated: impact-analysis.html');

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "impact-analysis",
+  "version": "1.0.0",
+  "description": "Tool to analyze code impact based on changed files and dependencies.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "bin": {
+    "impact-analysis": "./index.mjs"
+  },
+  "keywords": [
+    "impact",
+    "analysis",
+    "dependency",
+    "npm"
+  ],
+  "author": "Sushant Keshav Thorat",
+  "license": "ISC",
+  "dependencies": {
+    "simple-git": "^3.27.0"
+  }
+}