impact-analysis 2.0.6 → 2.0.7
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/dist/report/html-generator.js +128 -25
- package/package.json +1 -1
|
@@ -16,6 +16,8 @@ const HTML_TEMPLATE = `<!DOCTYPE html>
|
|
|
16
16
|
content="Impact Analysis tool for visualizing code dependency changes and risk. Built by Sushant Thorat."/>
|
|
17
17
|
<meta name="author" content="Sushant Thorat" />
|
|
18
18
|
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
|
|
19
|
+
<script src="https://unpkg.com/cytoscape-klay/cytoscape-klay.js"></script>
|
|
20
|
+
<script src="https://unpkg.com/klayjs@0.4.1/klay.js"></script>
|
|
19
21
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
20
22
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
21
23
|
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
@@ -224,7 +226,7 @@ const HTML_TEMPLATE = `<!DOCTYPE html>
|
|
|
224
226
|
});
|
|
225
227
|
|
|
226
228
|
if (elements.length > 0) {
|
|
227
|
-
cytoscape({
|
|
229
|
+
const cy = cytoscape({
|
|
228
230
|
container: document.getElementById('center'),
|
|
229
231
|
elements,
|
|
230
232
|
style: [
|
|
@@ -232,58 +234,159 @@ const HTML_TEMPLATE = `<!DOCTYPE html>
|
|
|
232
234
|
selector: 'node[type="changed"]',
|
|
233
235
|
style: {
|
|
234
236
|
'label': 'data(label)',
|
|
235
|
-
'background-color': '#
|
|
236
|
-
'color': '#
|
|
237
|
+
'background-color': '#ff4444',
|
|
238
|
+
'color': '#ffffff',
|
|
237
239
|
'text-valign': 'center',
|
|
238
240
|
'text-halign': 'center',
|
|
239
|
-
'font-family': '
|
|
240
|
-
'font-size': '
|
|
241
|
+
'font-family': 'Inter, system-ui, sans-serif',
|
|
242
|
+
'font-size': '16px',
|
|
241
243
|
'font-weight': 'bold',
|
|
242
|
-
'width': '
|
|
243
|
-
'height': '
|
|
244
|
-
'border-width':
|
|
245
|
-
'border-color': '#
|
|
244
|
+
'width': '160px',
|
|
245
|
+
'height': '160px',
|
|
246
|
+
'border-width': 5,
|
|
247
|
+
'border-color': '#cc0000',
|
|
246
248
|
'text-wrap': 'wrap',
|
|
247
|
-
'text-max-width': '
|
|
249
|
+
'text-max-width': '130px',
|
|
250
|
+
'border-style': 'solid',
|
|
251
|
+
'shape': 'ellipse'
|
|
248
252
|
}
|
|
249
253
|
},
|
|
250
254
|
{
|
|
251
255
|
selector: 'node[type="impacted"]',
|
|
252
256
|
style: {
|
|
253
257
|
'label': 'data(label)',
|
|
254
|
-
'background-color': '#
|
|
255
|
-
'color': '#
|
|
258
|
+
'background-color': '#4a9eff',
|
|
259
|
+
'color': '#ffffff',
|
|
256
260
|
'text-valign': 'center',
|
|
257
261
|
'text-halign': 'center',
|
|
258
|
-
'font-family': '
|
|
259
|
-
'font-size': '
|
|
260
|
-
'font-weight': '
|
|
261
|
-
'width': '
|
|
262
|
-
'height': '
|
|
263
|
-
'border-width':
|
|
264
|
-
'border-color': '#
|
|
262
|
+
'font-family': 'Inter, system-ui, sans-serif',
|
|
263
|
+
'font-size': '15px',
|
|
264
|
+
'font-weight': '600',
|
|
265
|
+
'width': '140px',
|
|
266
|
+
'height': '140px',
|
|
267
|
+
'border-width': 5,
|
|
268
|
+
'border-color': '#2563eb',
|
|
265
269
|
'text-wrap': 'wrap',
|
|
266
|
-
'text-max-width': '
|
|
270
|
+
'text-max-width': '110px',
|
|
271
|
+
'border-style': 'solid',
|
|
272
|
+
'shape': 'ellipse'
|
|
267
273
|
}
|
|
268
274
|
},
|
|
269
275
|
{
|
|
270
276
|
selector: 'edge',
|
|
271
277
|
style: {
|
|
272
|
-
'width':
|
|
273
|
-
'line-color': '#
|
|
274
|
-
'target-arrow-color': '#
|
|
278
|
+
'width': 4,
|
|
279
|
+
'line-color': '#6366f1',
|
|
280
|
+
'target-arrow-color': '#4f46e5',
|
|
275
281
|
'target-arrow-shape': 'triangle',
|
|
276
282
|
'curve-style': 'bezier',
|
|
277
|
-
'arrow-scale':
|
|
283
|
+
'arrow-scale': 2,
|
|
284
|
+
'line-style': 'solid',
|
|
285
|
+
'opacity': 0.9
|
|
286
|
+
}
|
|
287
|
+
},
|
|
288
|
+
{
|
|
289
|
+
selector: 'node:selected',
|
|
290
|
+
style: {
|
|
291
|
+
'border-width': 4,
|
|
292
|
+
'border-color': '#fbbf24',
|
|
293
|
+
'background-color': '#f59e0b'
|
|
294
|
+
}
|
|
295
|
+
},
|
|
296
|
+
{
|
|
297
|
+
selector: 'edge:selected',
|
|
298
|
+
style: {
|
|
299
|
+
'line-color': '#fbbf24',
|
|
300
|
+
'target-arrow-color': '#f59e0b',
|
|
301
|
+
'width': 4
|
|
278
302
|
}
|
|
279
303
|
}
|
|
280
304
|
],
|
|
281
305
|
layout: {
|
|
282
306
|
name: 'breadthfirst',
|
|
283
307
|
directed: true,
|
|
284
|
-
spacingFactor: 1.
|
|
308
|
+
spacingFactor: 1.75,
|
|
309
|
+
animate: true,
|
|
310
|
+
animationDuration: 1000,
|
|
311
|
+
animationEasing: 'ease-out'
|
|
285
312
|
}
|
|
286
313
|
});
|
|
314
|
+
|
|
315
|
+
// Add zoom controls and interaction animations
|
|
316
|
+
cy.on('tap', 'node', function(evt) {
|
|
317
|
+
const node = evt.target;
|
|
318
|
+
cy.animate({
|
|
319
|
+
fit: {
|
|
320
|
+
eles: node.neighborhood().add(node),
|
|
321
|
+
padding: 80
|
|
322
|
+
},
|
|
323
|
+
duration: 500,
|
|
324
|
+
easing: 'ease-in-out'
|
|
325
|
+
});
|
|
326
|
+
});
|
|
327
|
+
|
|
328
|
+
// Hover effects with animation
|
|
329
|
+
cy.on('mouseover', 'node', function(evt) {
|
|
330
|
+
const node = evt.target;
|
|
331
|
+
node.animate({
|
|
332
|
+
style: {
|
|
333
|
+
'width': parseInt(node.style('width')) + 10,
|
|
334
|
+
'height': parseInt(node.style('height')) + 10
|
|
335
|
+
},
|
|
336
|
+
duration: 200,
|
|
337
|
+
easing: 'ease-out'
|
|
338
|
+
});
|
|
339
|
+
|
|
340
|
+
node.connectedEdges().animate({
|
|
341
|
+
style: { 'width': 5, 'opacity': 1 },
|
|
342
|
+
duration: 200
|
|
343
|
+
});
|
|
344
|
+
});
|
|
345
|
+
|
|
346
|
+
cy.on('mouseout', 'node', function(evt) {
|
|
347
|
+
const node = evt.target;
|
|
348
|
+
const isChanged = node.data('type') === 'changed';
|
|
349
|
+
node.animate({
|
|
350
|
+
style: {
|
|
351
|
+
'width': isChanged ? 160 : 140,
|
|
352
|
+
'height': isChanged ? 160 : 140
|
|
353
|
+
},
|
|
354
|
+
duration: 200,
|
|
355
|
+
easing: 'ease-in'
|
|
356
|
+
});
|
|
357
|
+
|
|
358
|
+
node.connectedEdges().animate({
|
|
359
|
+
style: { 'width': 3, 'opacity': 0.8 },
|
|
360
|
+
duration: 200
|
|
361
|
+
});
|
|
362
|
+
});
|
|
363
|
+
|
|
364
|
+
// Initial layout animation
|
|
365
|
+
cy.ready(function() {
|
|
366
|
+
cy.nodes().forEach((node, index) => {
|
|
367
|
+
node.style('opacity', 0);
|
|
368
|
+
setTimeout(() => {
|
|
369
|
+
node.animate({
|
|
370
|
+
style: { 'opacity': 1 },
|
|
371
|
+
duration: 300,
|
|
372
|
+
easing: 'ease-in'
|
|
373
|
+
});
|
|
374
|
+
}, index * 50);
|
|
375
|
+
});
|
|
376
|
+
|
|
377
|
+
setTimeout(() => {
|
|
378
|
+
cy.edges().forEach((edge, index) => {
|
|
379
|
+
edge.style('opacity', 0);
|
|
380
|
+
setTimeout(() => {
|
|
381
|
+
edge.animate({
|
|
382
|
+
style: { 'opacity': 0.8 },
|
|
383
|
+
duration: 300,
|
|
384
|
+
easing: 'ease-in'
|
|
385
|
+
});
|
|
386
|
+
}, index * 30);
|
|
387
|
+
});
|
|
388
|
+
}, cy.nodes().length * 50);
|
|
389
|
+
});
|
|
287
390
|
} else {
|
|
288
391
|
document.getElementById('center').innerHTML = '<div style="display:flex;align-items:center;justify-content:center;height:100%;color:#8b949e;font-size:18px;font-family:JetBrains Mono,monospace;">No dependencies found</div>';
|
|
289
392
|
}
|