impact-analysis 1.0.3 → 1.0.5
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.
- package/package.json +1 -1
- package/impact-analysis.html +0 -295
- package/index.zip +0 -0
package/package.json
CHANGED
package/impact-analysis.html
DELETED
|
@@ -1,295 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
<!DOCTYPE html>
|
|
3
|
-
<html lang="en">
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="UTF-8">
|
|
6
|
-
<title>Impact Analysis</title>
|
|
7
|
-
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
|
|
8
|
-
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
9
|
-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
10
|
-
<link href="https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
|
|
11
|
-
<style>
|
|
12
|
-
body { font-family: "Exo 2", serif; background-color: #282828; color: #fff; overflow-x: hidden;
|
|
13
|
-
font-optical-sizing: auto; margin: 0; padding: 0; text-align: center; font-weight: 400;}
|
|
14
|
-
svg { width: 100%; height: 100vh; }
|
|
15
|
-
circle { cursor: pointer; }
|
|
16
|
-
text { font-size: 12px; fill: #fff; }
|
|
17
|
-
line { stroke: #fefefe; stroke-opacity: 0.6; }
|
|
18
|
-
#tooltip { position: absolute; background: #fff;color: #000; padding: 8px; border: 1px solid #ddd; display: none; }
|
|
19
|
-
.svg-wrapper{ padding: 10px; }
|
|
20
|
-
.impact-file-list {
|
|
21
|
-
display: list-item;
|
|
22
|
-
list-style: number;
|
|
23
|
-
text-align: left;
|
|
24
|
-
padding-left: 7px;
|
|
25
|
-
}
|
|
26
|
-
.impact-analysis-table {
|
|
27
|
-
width: 100%; border-collapse: collapse;
|
|
28
|
-
}
|
|
29
|
-
.impact-analysis-table td {
|
|
30
|
-
padding: 10px 20px;
|
|
31
|
-
}
|
|
32
|
-
th {
|
|
33
|
-
padding: 10px;
|
|
34
|
-
}
|
|
35
|
-
td:first-child {
|
|
36
|
-
background: #91fd9117;
|
|
37
|
-
}
|
|
38
|
-
.btn-theme {
|
|
39
|
-
min-width: 142px;
|
|
40
|
-
padding: 12px 16px;
|
|
41
|
-
font-size: 14px;
|
|
42
|
-
border-radius: 100px;
|
|
43
|
-
border: 1px solid #565454;
|
|
44
|
-
outline: none;
|
|
45
|
-
box-shadow: none;
|
|
46
|
-
cursor: pointer;
|
|
47
|
-
transition: all .3s ease-in-out;
|
|
48
|
-
text-decoration: none;
|
|
49
|
-
display: inline-flex;
|
|
50
|
-
align-items: center;
|
|
51
|
-
font-family: "Exo 2", serif;
|
|
52
|
-
background: #222;
|
|
53
|
-
color: #fff;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
.btn-active {
|
|
57
|
-
background: #1f4afe;
|
|
58
|
-
background: linear-gradient(90deg,#1f4afe 35%,#167cfc);
|
|
59
|
-
color: #fff
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
.btn-svg path {
|
|
63
|
-
fill: #fefefe;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
.btn-active:hover svg path {
|
|
67
|
-
fill: #1f4afe;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
.btn-theme:hover svg path {
|
|
71
|
-
fill: #1f4afe;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
.btn-theme:hover {
|
|
75
|
-
background: #fff;
|
|
76
|
-
color: #1f4afe;
|
|
77
|
-
border: 1px solid #1F4AFE
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
.btn-svg {
|
|
81
|
-
width: 20px;
|
|
82
|
-
height: 20px;
|
|
83
|
-
margin-right: 10px;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
th {
|
|
87
|
-
background: #1f4afe;
|
|
88
|
-
background: linear-gradient(90deg,#1f4afe 35%,#167cfc);
|
|
89
|
-
width: 50%;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
th:last-child {
|
|
93
|
-
background: #1f4afe;
|
|
94
|
-
background: linear-gradient(-90deg,#1f4afe 35%,#167cfc);
|
|
95
|
-
}
|
|
96
|
-
</style>
|
|
97
|
-
</head>
|
|
98
|
-
<body>
|
|
99
|
-
<h1>Impact Analysis</h1>
|
|
100
|
-
<div id="tooltip"></div>
|
|
101
|
-
<div style="text-align: center; margin-bottom: 10px;">
|
|
102
|
-
<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">
|
|
103
|
-
<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>
|
|
104
|
-
</svg> Graph View</button>
|
|
105
|
-
<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">
|
|
106
|
-
</defs>
|
|
107
|
-
<g id="64px-Line" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
108
|
-
<g id="db-table">
|
|
109
|
-
|
|
110
|
-
</g>
|
|
111
|
-
<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">
|
|
112
|
-
|
|
113
|
-
</path>
|
|
114
|
-
</g>
|
|
115
|
-
</svg> Table View</button>
|
|
116
|
-
</div>
|
|
117
|
-
|
|
118
|
-
<div id="graphView" style="display: block;">
|
|
119
|
-
<svg id="svgGraph" width="1000" height="600"></svg>
|
|
120
|
-
</div>
|
|
121
|
-
|
|
122
|
-
<div id="tableView" style="display: none;padding: 20px;">
|
|
123
|
-
<table class="impact-analysis-table" border="1">
|
|
124
|
-
<thead>
|
|
125
|
-
<tr>
|
|
126
|
-
<th>Changed File</th>
|
|
127
|
-
<th>Impacted Files</th>
|
|
128
|
-
</tr>
|
|
129
|
-
</thead>
|
|
130
|
-
<tbody id="tableBody"></tbody>
|
|
131
|
-
</table>
|
|
132
|
-
</div>
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
<script>
|
|
136
|
-
const impactData = [];
|
|
137
|
-
function getFileName(path) {
|
|
138
|
-
return path.split(/[/\\\\]/).pop();
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
const nodesMap = new Map();
|
|
142
|
-
impactData.forEach(d => {
|
|
143
|
-
nodesMap.set(d.changedFile, { id: d.changedFile, name: getFileName(d.changedFile), isChangedFile: true });
|
|
144
|
-
d.impactsTo.forEach(target => {
|
|
145
|
-
nodesMap.set(target, { id: target, name: getFileName(target), isChangedFile: false });
|
|
146
|
-
});
|
|
147
|
-
});
|
|
148
|
-
const nodes = Array.from(nodesMap.values());
|
|
149
|
-
const links = [];
|
|
150
|
-
const impactMap = new Map();
|
|
151
|
-
|
|
152
|
-
impactData.forEach(d => {
|
|
153
|
-
d.impactsTo.forEach(target => {
|
|
154
|
-
links.push({ source: d.changedFile, target });
|
|
155
|
-
if (!impactMap.has(target)) impactMap.set(target, new Set());
|
|
156
|
-
impactMap.get(target).add(d.changedFile);
|
|
157
|
-
});
|
|
158
|
-
});
|
|
159
|
-
|
|
160
|
-
impactMap.forEach((sources, target) => {
|
|
161
|
-
sources.forEach(source1 => {
|
|
162
|
-
sources.forEach(source2 => {
|
|
163
|
-
if (source1 !== source2) {
|
|
164
|
-
links.push({ source: source1, target: source2 });
|
|
165
|
-
}
|
|
166
|
-
});
|
|
167
|
-
});
|
|
168
|
-
});
|
|
169
|
-
|
|
170
|
-
const graph = { nodes, links };
|
|
171
|
-
|
|
172
|
-
const width = window.innerWidth;
|
|
173
|
-
const height = window.innerHeight - 100;
|
|
174
|
-
|
|
175
|
-
const svg = d3.select("#svgGraph")
|
|
176
|
-
.attr("width", width)
|
|
177
|
-
.attr("height", height);
|
|
178
|
-
|
|
179
|
-
const simulation = d3.forceSimulation(graph.nodes)
|
|
180
|
-
.force("link", d3.forceLink(graph.links)
|
|
181
|
-
.id(d => d.id)
|
|
182
|
-
.distance(80) // Reduce distance for a more compact layout
|
|
183
|
-
)
|
|
184
|
-
.force("charge", d3.forceManyBody()
|
|
185
|
-
.strength(-50) // Decrease negative strength to reduce spacing
|
|
186
|
-
)
|
|
187
|
-
.force("center", d3.forceCenter(width / 2, height / 2))
|
|
188
|
-
.force("collision", d3.forceCollide()
|
|
189
|
-
.radius(35) // Adjust radius to ensure nodes don't overlap but are closer
|
|
190
|
-
)
|
|
191
|
-
.on("tick", ticked);
|
|
192
|
-
|
|
193
|
-
const link = svg.append("g")
|
|
194
|
-
.selectAll("line")
|
|
195
|
-
.data(graph.links)
|
|
196
|
-
.enter().append("line")
|
|
197
|
-
.attr("stroke", "#aaa");
|
|
198
|
-
|
|
199
|
-
const nodeGroup = svg.append("g")
|
|
200
|
-
.selectAll("g")
|
|
201
|
-
.data(graph.nodes)
|
|
202
|
-
.enter().append("g")
|
|
203
|
-
.call(d3.drag()
|
|
204
|
-
.on("start", dragStarted)
|
|
205
|
-
.on("drag", dragged)
|
|
206
|
-
.on("end", dragEnded));
|
|
207
|
-
|
|
208
|
-
const node = nodeGroup.append("circle")
|
|
209
|
-
.attr("r", 10)
|
|
210
|
-
.attr("fill", d => d.isChangedFile ? "red" : "steelblue");
|
|
211
|
-
|
|
212
|
-
const labels = nodeGroup.append("text")
|
|
213
|
-
.attr("x", 12)
|
|
214
|
-
.attr("y", 5)
|
|
215
|
-
.text(d => d.name);
|
|
216
|
-
|
|
217
|
-
simulation.on("tick", () => {
|
|
218
|
-
link.attr("x1", d => d.source.x)
|
|
219
|
-
.attr("y1", d => d.source.y)
|
|
220
|
-
.attr("x2", d => d.target.x)
|
|
221
|
-
.attr("y2", d => d.target.y);
|
|
222
|
-
|
|
223
|
-
nodeGroup.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
|
|
224
|
-
});
|
|
225
|
-
|
|
226
|
-
function dragStarted(event, d) {
|
|
227
|
-
if (!event.active) simulation.alphaTarget(0.3).restart();
|
|
228
|
-
d.fx = d.x;
|
|
229
|
-
d.fy = d.y;
|
|
230
|
-
}
|
|
231
|
-
|
|
232
|
-
function dragged(event, d) {
|
|
233
|
-
d.fx = event.x;
|
|
234
|
-
d.fy = event.y;
|
|
235
|
-
}
|
|
236
|
-
|
|
237
|
-
function dragEnded(event, d) {
|
|
238
|
-
if (!event.active) simulation.alphaTarget(0);
|
|
239
|
-
d.fx = null;
|
|
240
|
-
d.fy = null;
|
|
241
|
-
}
|
|
242
|
-
|
|
243
|
-
document.getElementById("graphViewBtn").addEventListener("click", function () {
|
|
244
|
-
document.getElementById("graphView").style.display = "block";
|
|
245
|
-
document.getElementById("tableView").style.display = "none";
|
|
246
|
-
setActiveButton(this);
|
|
247
|
-
});
|
|
248
|
-
|
|
249
|
-
document.getElementById("tableViewBtn").addEventListener("click", function () {
|
|
250
|
-
document.getElementById("graphView").style.display = "none";
|
|
251
|
-
document.getElementById("tableView").style.display = "block";
|
|
252
|
-
setActiveButton(this);
|
|
253
|
-
generateTableView(impactData);
|
|
254
|
-
});
|
|
255
|
-
|
|
256
|
-
function setActiveButton(activeBtn) {
|
|
257
|
-
document.querySelectorAll(".btn-theme").forEach(button => {
|
|
258
|
-
button.classList.remove("btn-active");
|
|
259
|
-
});
|
|
260
|
-
activeBtn.classList.add("btn-active");
|
|
261
|
-
}
|
|
262
|
-
|
|
263
|
-
function generateTableView(data) {
|
|
264
|
-
const tableBody = document.getElementById("tableBody");
|
|
265
|
-
tableBody.innerHTML = "";
|
|
266
|
-
|
|
267
|
-
data.forEach(row => {
|
|
268
|
-
const tr = document.createElement("tr");
|
|
269
|
-
|
|
270
|
-
const tdFile = document.createElement("td");
|
|
271
|
-
tdFile.textContent = row.changedFile;
|
|
272
|
-
tr.appendChild(tdFile);
|
|
273
|
-
|
|
274
|
-
const tdImpact = document.createElement("td");
|
|
275
|
-
tdImpact.textContent = row.impactsTo.length ? row.impactsTo.join(", ") : "None";
|
|
276
|
-
tr.appendChild(tdImpact);
|
|
277
|
-
|
|
278
|
-
tableBody.appendChild(tr);
|
|
279
|
-
});
|
|
280
|
-
}
|
|
281
|
-
function ticked() {
|
|
282
|
-
node.attr("cx", d => d.x = Math.max(20, Math.min(width - 20, d.x)))
|
|
283
|
-
.attr("cy", d => d.y = Math.max(20, Math.min(height - 20, d.y)));
|
|
284
|
-
|
|
285
|
-
link.attr("x1", d => d.source.x)
|
|
286
|
-
.attr("y1", d => d.source.y)
|
|
287
|
-
.attr("x2", d => d.target.x)
|
|
288
|
-
.attr("y2", d => d.target.y);
|
|
289
|
-
}
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
</script>
|
|
294
|
-
</body>
|
|
295
|
-
</html>
|
package/index.zip
DELETED
|
Binary file
|