npm - impact-analysis - Versions diffs - 1.0.2 → 1.0.4 - Mend

impact-analysis 1.0.2 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/index.mjs CHANGED Viewed

@@ -149,7 +149,7 @@ function generateGraphData(dependencyData) {
           if (!nodes.has(impactedFile)) {
               nodes.set(impactedFile, { id: impactedFileName, path: impactedFile,  isChangedFile: false });
           }
-          links.push({ source: changedFile, target: impactedFileName });
+          links.push({ id: changedFile, source: changedFile, target: impactedFileName });
       });
   });
@@ -160,7 +160,6 @@ function generateGraphData(dependencyData) {
 }
 const graphData = generateGraphData(results);
 const htmlContent = `
 <!DOCTYPE html>
 <html lang="en">
@@ -249,6 +248,7 @@ const htmlContent = `
       th {
         background: #1f4afe;
         background: linear-gradient(90deg,#1f4afe 35%,#167cfc);
+        width: 50%;
       }
       th:last-child {
@@ -295,151 +295,161 @@ const htmlContent = `
   <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));
-  });
-  function clamp(value, min, max) {
-      return Math.max(min, Math.min(max, value));
-  }
+  const impactData = ${JSON.stringify(dependencyJson)};
+  function getFileName(path) {
+    return path.split(/[/\\\\\\\\]/).pop();
+}
-  function drag(simulation) {
-      function dragstarted(event, d) {
-          if (!event.active) simulation.alphaTarget(0.3).restart();
-          d.fx = d.x;
-          d.fy = d.y;
-      }
+  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);
+            });
+        });
-      function dragged(event, d) {
-          d.fx = clamp(event.x, 10, width - 10);
-          d.fy = clamp(event.y, 10, height - 10);
-      }
+        impactMap.forEach((sources, target) => {
+            sources.forEach(source1 => {
+                sources.forEach(source2 => {
+                    if (source1 !== source2) {
+                        links.push({ source: source1, target: source2 });
+                    }
+                });
+            });
+        });
-      function dragended(event, d) {
-          if (!event.active) simulation.alphaTarget(0);
-          d.fx = null;
-          d.fy = null;
-      }
+        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;
+        }
-      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 dragged(event, d) {
+            d.fx = event.x;
+            d.fy = event.y;
+        }
-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 setActiveButton(activeBtn) {
-  document.querySelectorAll(".btn-theme").forEach(button => {
-      button.classList.remove("btn-active");
-  });
-  activeBtn.classList.add("btn-active");
-}
+        function dragEnded(event, d) {
+            if (!event.active) simulation.alphaTarget(0);
+            d.fx = null;
+            d.fy = null;
+        }
-function generateTableView(data) {
-  const tableData = data;
-  var tableBody = document.getElementById("tableBody");
-  tableBody.innerHTML = "";
-  if (!Array.isArray(tableData) || tableData.length === 0) {
-      tableBody.innerHTML = '<tr><td colspan="2">No data available</td></tr>';
-      return;
-  }
-  tableData.forEach(function (result) {
-      var row = document.createElement("tr");
+        document.getElementById("graphViewBtn").addEventListener("click", function () {
+            document.getElementById("graphView").style.display = "block";
+            document.getElementById("tableView").style.display = "none";
+            setActiveButton(this);
+        });
-      var changedFileCell = document.createElement("td");
-      changedFileCell.textContent = result.changedFile;
+        document.getElementById("tableViewBtn").addEventListener("click", function () {
+            document.getElementById("graphView").style.display = "none";
+            document.getElementById("tableView").style.display = "block";
+            setActiveButton(this);
+            generateTableView(impactData);
+        });
-      var impactsToCell = document.createElement("td");
-      impactsToCell.innerHTML = result.impactsTo.map(function (file) {
-          return '<div class="impact-file-list">' + file + '</div>';
-      }).join("");
+        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 = "";
+            data.forEach(row => {
+                const tr = document.createElement("tr");
+                const tdFile = document.createElement("td");
+                tdFile.textContent = row.changedFile;
+                tr.appendChild(tdFile);
+                const tdImpact = document.createElement("td");
+                tdImpact.textContent = row.impactsTo.length ? row.impactsTo.join(", ") : "No Impact";
+                tr.appendChild(tdImpact);
+                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);
+      }
-      row.appendChild(changedFileCell);
-      row.appendChild(impactsToCell);
-      tableBody.appendChild(row);
-  });
-}
   </script>

package/index.zip ADDED Viewed

Binary file

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "impact-analysis",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Tool to analyze code impact based on changed files and dependencies.",
   "main": "index.js",
   "scripts": {