feat: label dependency relations in charts

sandworm-hq · Aug 24, 2023 · 98fc1e8 · 98fc1e8
1 parent 040051d
commit 98fc1e8
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 14 deletions.
diff --git a/src/charts/tree.js b/src/charts/tree.js
@@ -84,6 +84,18 @@ const buildTree = (
     }
     return 'black';
   };
+  const lineDashStyle = (target) => {
+    switch (target.data.rel) {
+      case 'optional':
+        return '4 6';
+      case 'peer':
+        return '4 1';
+      case 'dev':
+        return '5 10';
+      default:
+        return undefined;
+    }
+  };
 
   // Compute the layout.
   const padding = 1;
@@ -130,7 +142,8 @@ const buildTree = (
         .x((d) => d.y)
         .y((d) => d.x),
     )
-    .attr('stroke', ({source, target}) => lineColor(source, target));
+    .attr('stroke', ({source, target}) => lineColor(source, target))
+    .attr('stroke-dasharray', ({target}) => lineDashStyle(target));
 
   const node = svg
     .append('g')
@@ -163,7 +176,7 @@ const buildTree = (
     .attr('fill', textColor)
     .attr('stroke-width', 3)
     .attr('stroke', strokeColor)
-    .text((d) => (showVersions ? getModuleName(d) : d.data.name));
+    .text((d) => getModuleName(d, showVersions));
 
   addTooltips(svg);
 

diff --git a/src/charts/utils.js b/src/charts/utils.js
@@ -8,7 +8,15 @@ const getUid = (type) => {
   return {id: uid, href: `url(#${uid})`};
 };
 
-const getModuleName = (d) => `${d.data.name}@${d.data.version}`;
+const moduleNamePrefix = {
+  optional: '🅞 ',
+  peer: '🅟 ',
+  dev: '🅓 ',
+  bundled: '🅑 ',
+};
+
+const getModuleName = (d, showVersion = true) =>
+  `${moduleNamePrefix[d.data.rel] || ''}${d.data.name}${showVersion ? `@${d.data.version}` : ''}`;
 
 const humanFileSize = (size) => {
   const i = size === 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
@@ -86,20 +94,29 @@ const aggregateDependencies = (node, includeDev = false) => [
   ...(includeDev ? Object.values(node.devDependencies || {}) : []),
 ];
 
-const processGraph = (node, options = {}, depth = 0, history = []) => {
+const aggregateDependenciesWithType = (node, includeDev = false) => [
+  ...Object.values(node.dependencies || {}).map((dep) => ['prod', dep]),
+  ...Object.values(node.optionalDependencies || {}).map((dep) => ['optional', dep]),
+  ...Object.values(node.peerDependencies || {}).map((dep) => ['peer', dep]),
+  ...Object.values(node.bundledDependencies || {}).map((dep) => ['bundled', dep]),
+  ...(includeDev ? Object.values(node.devDependencies || {}).map((dep) => ['dev', dep]) : []),
+];
+
+const processGraph = (node, options = {}, depth = 0, history = [], rel = null) => {
   const {maxDepth = Infinity, includeDev = false, postprocess = (n) => n} = options;
   const dependencies =
     depth >= maxDepth
       ? []
-      : aggregateDependencies(node, includeDev)
-          .filter((n) => !history.includes(n))
-          .map((n) => processGraph(n, options, depth + 1, [...history, node]));
+      : aggregateDependenciesWithType(node, includeDev)
+          .filter(([, n]) => !history.includes(n))
+          .map(([r, n]) => processGraph(n, options, depth + 1, [...history, node], r));
 
   return postprocess({
     name: node.name,
     version: node.version,
     license: node.license,
     size: node.size,
+    rel,
     children: dependencies,
   });
 };
@@ -142,6 +159,7 @@ module.exports = {
   addIssues,
   addLicenseData,
   aggregateDependencies,
+  aggregateDependenciesWithType,
   processGraph,
   getReportsForNode,
   getIssueLevel,

diff --git a/src/graph/utils.js b/src/graph/utils.js
@@ -1,4 +1,5 @@
 const semverLib = require('semver');
+const {aggregateDependenciesWithType} = require('../charts/utils');
 
 const SEMVER_REGEXP =
   /(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-([0-9A-Za-z-]+(?:\.[0-9A-Za-z-]+)*))?(?:\+([0-9A-Za-z-]+(?:\.[0-9A-Za-z-]+)*))?/;
@@ -169,13 +170,7 @@ const postProcessGraph = ({root, processedNodes = [], flags = {}, depth = 0}) =>
     // Flags may mutate during the recursive processing
     // Make a copy of the flags before we start
     const rootFlags = {...root.flags};
-    [
-      ...Object.values(root.dependencies || {}).map((dep) => ['prod', dep]),
-      ...Object.values(root.devDependencies || {}).map((dep) => ['dev', dep]),
-      ...Object.values(root.optionalDependencies || {}).map((dep) => ['optional', dep]),
-      ...Object.values(root.peerDependencies || {}).map((dep) => ['peer', dep]),
-      ...Object.values(root.bundledDependencies || {}).map((dep) => ['bundled', dep]),
-    ].forEach(([rel, dep]) => {
+    aggregateDependenciesWithType(root, true).forEach(([rel, dep]) => {
       const newFlags = {
         ...(rootFlags.prod && {prod: true}),
         ...((rootFlags.dev || rel === 'dev') && {dev: true}),