Merge pull request #63 from CoderAllan/dependencyInjectionGraph

Dependency injection graph

Author: CoderAllan

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change Log
 
+## Version 1.6.0
+
+- Added Dependency injection graph command that visualizes what services are injected into the components. Graph also include all the inputs, outputs, viewchild, viewchildren, contentchild and contentchildren of each component.
+
 ## Version 1.5.1
 
 - Now using webpack to reduce size of extension.

README.md

@@ -11,6 +11,7 @@ Find it on the [Visual Studio Code marketplace](https://marketplace.visualstudio
 ## Features
 
 * Show the module hierarchy
+* Show the dependency injection graph
 * Show the component hierarchy
 * Generate DGML graph of project component hierarchy
 * Summarizes all the Angular modules
@@ -34,6 +35,14 @@ In the visualization the classes will be colored depending on the class decorato
 
 ![Show module hierarchy](https://github.com/CoderAllan/vscode-angulartools/raw/main/images/ShowModuleHierarchy.gif)
 
+### Show the dependency injection graph [#](#show-dependency-injection-graph- 'Show the dependency injection graph')
+
+The 'Show a graph representing the components and the injected dependencies' command generates a directed graph representing the components and the services injected into the components of an Angular application. The command scans all *.ts files of the application and for each class decorated with the @Component decorator, it analyses the constructor and each field in the class to identify all injected classes and to identify all the fields decorated with the Input, Output, ViewChild, ViewChildren, ContentChild and ContentChildren decorators.
+
+In the visualization the components will by default be colored dark blue and the injected classes will be colored light blue.
+
+![Show dependency injection graph](https://github.com/CoderAllan/vscode-angulartools/raw/main/images/ShowDependencyInjectionGraph.gif)
+
 ### Show the component hierarchy [#](#show-component-hierarchy- 'Show the component hierarchy')
 
 The 'Show the component hierarchy' command is used for visualizing the component hierarchy and Angular application. It analyses all the *.component.ts files and all the corresponding template files to determine how the component use each other and then generates a directed graph showing the component hierarchy.

images/ShowDependencyInjectionGraph.gif

@@ -4,15 +4,15 @@
   "displayName": "AngularTools",
   "description": "AngularTools is a collection of tools for exploring an Angular project, help you with documenting, reverse engineering a project or help when refactoring.",
   "icon": "logo.png",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "license": "MIT",
   "repository": "https://github.com/CoderAllan/vscode-angulartools",
   "author": {
     "name": "Allan Simonsen",
     "url": "https://github.com/CoderAllan"
   },
   "engines": {
-    "vscode": "^1.53.0"
+    "vscode": "^1.54.0"
   },
   "categories": [
     "Other",
@@ -33,7 +33,8 @@
     "onCommand:angulartools.packageJsonToMarkdown",
     "onCommand:angulartools.showComponentHierarchy",
     "onCommand:angulartools.showModuleHierarchy",
-    "onCommand:angulartools.componentHierarchyMarkdown"
+    "onCommand:angulartools.componentHierarchyMarkdown",
+    "onCommand:angulartools.generateDependencyInjectionGraph"
   ],
   "main": "./dist/extension.js",
   "contributes": {
@@ -69,6 +70,10 @@
       {
         "command": "angulartools.componentHierarchyMarkdown",
         "title": "AngularTools: Generate a directed graph in Mermaid Markdown format."
+      },
+      {
+        "command": "angulartools.generateDependencyInjectionGraph",
+        "title": "AngularTools: Show a graph representing the components and the injected dependencies."
       }
     ],
     "configuration": {

package.json

@@ -0,0 +1,109 @@
+import { Node, Edge, ShowHierarchyBase, NodeType, ArrowType } from './showHierarchyBase';
+import { ModuleManager } from '@src';
+import { Component, Project } from '@model';
+import * as fs from 'fs';
+import * as path from 'path';
+import * as vscode from 'vscode';
+
+export class GenerateDependencyInjectionGraph extends ShowHierarchyBase {
+  static get commandName() { return 'generateDependencyInjectionGraph'; }
+  public execute(webview: vscode.Webview) {
+    this.checkForOpenWorkspace();
+    webview.onDidReceiveMessage(
+      message => {
+        switch (message.command) {
+          case 'saveAsPng':
+            this.saveAsPng('DependencyInjectionGraph.png', message.text);
+            return;
+        }
+      },
+      undefined,
+      this.extensionContext.subscriptions
+    );
+    var workspaceFolder = this.fsUtils.getWorkspaceFolder();
+    const errors: string[] = [];
+    const project: Project = ModuleManager.scanProject(workspaceFolder, errors, this.isTypescriptFile);
+
+    this.nodes = [];
+    this.edges = [];
+    this.addNodesAndEdges(project, this.appendNodes, this.appendEdges);
+    const nodesJson = this.nodes
+      .map((node, index, arr) => { return node.toJsonString(); })
+      .join(',\n');
+    const edgesJson = this.edges
+      .map((edge, index, arr) => { return edge.toJsonString(); })
+      .join(',\n');
+    
+      try {
+      const jsContent = this.generateJavascriptContent(nodesJson, edgesJson);
+      const outputJsFilename = this.showModuleHierarchyJsFilename;
+      let htmlContent = this.generateHtmlContent(webview, this.showModuleHierarchyJsFilename);
+      //this.fsUtils.writeFile(this.extensionContext?.asAbsolutePath(path.join('out', ShowComponentHierarchy.Name + '.html')), htmlContent, () => { }); // For debugging
+      this.fsUtils.writeFile(
+        this.extensionContext?.asAbsolutePath(path.join('.', outputJsFilename)),
+        jsContent,
+        () => {
+          webview.html = htmlContent;
+        }
+      );
+    }
+    catch (ex) {
+      console.log('Angular Tools Exception:' + ex);
+    }
+    if (errors.length > 0) {
+      this.showErrors(errors, `Parsing of ${errors.length > 1 ? 'some' : 'one'} of the project files failed.\n`);
+    }
+  }
+
+  generatedComponentNode(component: Component): string {
+    let nodeContent: string = '';
+    nodeContent = `<b>${component.name}</b>`;
+    if(component.inputs.length > 0) {
+      const inputs = component.inputs.join(", ");
+      nodeContent += `\\n<b>Inputs:</b> ${inputs}`;
+    }
+    if(component.outputs.length > 0) {
+      const outputs = component.outputs.join(", ");
+      nodeContent += `\\n<b>Outputs:</b> ${outputs}`;
+    }
+    if(component.viewchilds.length > 0) {
+      const viewchilds = component.viewchilds.join(", ");
+      nodeContent += `\\n<b>Viewchilds:</b> ${viewchilds}`;
+    }
+    if(component.viewchildren.length > 0) {
+      const viewchildren = component.viewchildren.join(", ");
+      nodeContent += `\\n<b>Viewchildren:</b> ${viewchildren}`;
+    }
+    if(component.contentchilds.length > 0) {
+      const contentchilds = component.contentchilds.join(", ");
+      nodeContent += `\\n<b>Contentchilds:</b> ${contentchilds}`;
+    }
+    if(component.contentchildren.length > 0) {
+      const contentchildren = component.contentchildren.join(", ");
+      nodeContent += `\\n<b>Contentchildren:</b> ${contentchildren}`;
+    }
+    return nodeContent;
+  }
+
+  addNodesAndEdges(project: Project, appendNodes: (nodeList: Node[]) => void, appendEdges: (edgeList: Edge[]) => void) {
+    project.components.forEach(component => {
+      appendNodes([new Node(component.name, this.generatedComponentNode(component), false, NodeType.component)]);
+      component.dependencyInjections.forEach(injectable => {
+        appendNodes([new Node(injectable, injectable, false, NodeType.injectable)]);
+        appendEdges([new Edge((this.edges.length + 1).toString(), injectable, component.name, ArrowType.injectable)]);
+      });
+    });
+  }
+
+  generateJavascriptContent(nodesJson: string, edgesJson: string) {
+    let template = fs.readFileSync(this.extensionContext?.asAbsolutePath(path.join('templates', this.templateJsFilename)), 'utf8');
+    let jsContent = template.replace('var nodes = new vis.DataSet([]);', `var nodes = new vis.DataSet([${nodesJson}]);`);
+    jsContent = jsContent.replace('var edges = new vis.DataSet([]);', `var edges = new vis.DataSet([${edgesJson}]);`);
+    jsContent = jsContent.replace('type: "triangle" // edge arrow to type', `type: "${this.config.visEdgeArrowToType}" // edge arrow to type}`);
+    jsContent = jsContent.replace('ctx.strokeStyle = \'blue\'; // graph selection guideline color', `ctx.strokeStyle = '${this.config.graphSelectionGuidelineColor}'; // graph selection guideline color`);
+    jsContent = jsContent.replace('ctx.lineWidth = 1; // graph selection guideline width', `ctx.lineWidth = ${this.config.graphSelectionGuidelineWidth}; // graph selection guideline width`);
+    jsContent = jsContent.replace('selectionCanvasContext.strokeStyle = \'red\';', `selectionCanvasContext.strokeStyle = '${this.config.graphSelectionColor}';`);
+    jsContent = jsContent.replace('selectionCanvasContext.lineWidth = 2;', `selectionCanvasContext.lineWidth = ${this.config.graphSelectionWidth};`);
+    return jsContent;
+  }
+}

src/commands/generateDependencyInjectionGraph.ts

@@ -7,3 +7,4 @@ export * from './projectDirectoryStructure';
 export * from './showComponentHierarchy';
 export * from './showModuleHierarchy';
 export * from './componentHierarchyMarkdown';
+export * from './generateDependencyInjectionGraph';

src/commands/index.ts

@@ -1,8 +1,8 @@
 import * as vscode from 'vscode';
 import * as path from 'path';
-import { ArrayUtils, Config, FileSystemUtils, NgModule, Project } from '@src';
+import { ArrayUtils, Config, FileSystemUtils, ModuleManager, NgModule } from '@src';
 import { CommandBase } from '@commands';
-import { ModuleManager } from '@src';
+import { Project } from '@model';
 
 export class ModulesToMarkdown extends CommandBase {
   private config = new Config();

src/commands/modulesToMarkdown.ts

@@ -4,14 +4,16 @@ import { Base64 } from 'js-base64';
 import * as fs from 'fs';
 import * as path from 'path';
 import * as vscode from 'vscode';
+import { Project } from '@model';
 
 export enum NodeType {
   none,
-  rootNode,
   component,
+  directive,
+  injectable,
   module,
   pipe,
-  directive
+  rootNode
 }
 export class Node {
   private config: Config = new Config();
@@ -48,15 +50,36 @@ export class Node {
         nodeColorAttr = '';
         break;
     }
-    const label = this.name.length > this.config.maximumNodeLabelLength ? this.name.substr(0, this.config.maximumNodeLabelLength) + '...' : this.name;
+    const label = this.config.maximumNodeLabelLength !== -1 && this.name.length > this.config.maximumNodeLabelLength ? this.name.substr(0, this.config.maximumNodeLabelLength) + '...' : this.name;
     return `{id: "${this.id}", label: "${label}" ${nodeColorAttr}}`;
   }
+
+  public static getNodeType(project: Project, className: string) {
+    let nodeType = NodeType.none;
+    if (project.moduleNames.has(className) || className.endsWith('Module') || className.includes("Module.")) {
+      nodeType = NodeType.module;
+    }
+    else if (project.components.has(className) || className.endsWith('Component')) {
+      nodeType = NodeType.component;
+    }
+    else if (project.directives.has(className) || className.endsWith('Directive')) {
+      nodeType = NodeType.directive;
+    }
+    else if (project.pipes.has(className) || className.endsWith('Pipe')) {
+      nodeType = NodeType.pipe;
+    }
+    else if (project.injectables.has(className)) {
+      nodeType = NodeType.injectable;
+    }
+    return nodeType;
+  }
 }
 
 export enum ArrowType {
   none = 0,
   import = 1,
-  export = 2
+  export = 2,
+  injectable = 3
 }
 
 export class Edge {
@@ -164,4 +187,13 @@ export class ShowHierarchyBase extends CommandBase {
     htmlContent = htmlContent.replace('showHierarchy.js', jsUri.toString());
     return htmlContent;
   }
+
+  protected showErrors(errors: string[], errorMessage: string) {
+    const angularToolsOutput = vscode.window.createOutputChannel(this.config.angularToolsOutputChannel);
+    angularToolsOutput.clear();
+    angularToolsOutput.appendLine(errorMessage);
+    angularToolsOutput.appendLine('Below is a list of the errors.');
+    angularToolsOutput.appendLine(errors.join('\n'));
+    angularToolsOutput.show();
+  }
 }

src/commands/showHierarchyBase.ts

@@ -1,5 +1,6 @@
 import { Node, Edge, ShowHierarchyBase, NodeType, ArrowType } from './showHierarchyBase';
-import { ModuleManager, Project } from '@src';
+import { ModuleManager } from '@src';
+import { Project } from '@model';
 import * as fs from 'fs';
 import * as path from 'path';
 import * as vscode from 'vscode';
@@ -50,40 +51,24 @@ export class ShowModuleHierarchy extends ShowHierarchyBase {
       console.log('Angular Tools Exception:' + ex);
     }
     if (errors.length > 0) {
-      this.showErrors(errors);
+      this.showErrors(errors, `Parsing of ${errors.length > 1 ? 'some' : 'one'} of the modules failed.\n`);
     }
   }
   addNodesAndEdges(project: Project, appendNodes: (nodeList: Node[]) => void, appendEdges: (edgeList: Edge[]) => void) {
     project.modules.forEach(module => {
       appendNodes([new Node(module.moduleName, module.moduleName, false, NodeType.module)]);
       module.imports.forEach(_import => {
-        const nodeType = this.getNodeType(project, _import);
+        const nodeType = Node.getNodeType(project, _import);
         appendNodes([new Node(_import, _import, false, nodeType)]);
         appendEdges([new Edge((this.edges.length + 1).toString(), _import, module.moduleName, ArrowType.import)]);
       });
       module.exports.forEach(_export => {
-        const nodeType = this.getNodeType(project, _export);
+        const nodeType = Node.getNodeType(project, _export);
         appendNodes([new Node(_export, _export, false, nodeType)]);
         appendEdges([new Edge((this.edges.length + 1).toString(), module.moduleName, _export, ArrowType.export)]);
       });
     });
   }
-  getNodeType(project: Project, className: string) {
-    let nodeType = NodeType.none;
-    if (project.moduleNames.has(className) || className.endsWith('Module') || className.includes("Module.")) {
-      nodeType = NodeType.module;
-    }
-    else if (project.components.has(className) || className.endsWith('Component')) {
-      nodeType = NodeType.component;
-    }
-    else if (project.directives.has(className) || className.endsWith('Directive')) {
-      nodeType = NodeType.directive;
-    }
-    else if (project.pipes.has(className) || className.endsWith('Pipe')) {
-      nodeType = NodeType.pipe;
-    }
-    return nodeType;
-  }
   generateJavascriptContent(nodesJson: string, edgesJson: string) {
     let template = fs.readFileSync(this.extensionContext?.asAbsolutePath(path.join('templates', this.templateJsFilename)), 'utf8');
     let jsContent = template.replace('var nodes = new vis.DataSet([]);', `var nodes = new vis.DataSet([${nodesJson}]);`);
@@ -95,13 +80,4 @@ export class ShowModuleHierarchy extends ShowHierarchyBase {
     jsContent = jsContent.replace('selectionCanvasContext.lineWidth = 2;', `selectionCanvasContext.lineWidth = ${this.config.graphSelectionWidth};`);
     return jsContent;
   }
-
-  showErrors(errors: string[]) {
-    const angularToolsOutput = vscode.window.createOutputChannel(this.config.angularToolsOutputChannel);
-    angularToolsOutput.clear();
-    angularToolsOutput.appendLine(`Parsing of ${errors.length > 1 ? 'some' : 'one'} of the modules failed.\n`);
-    angularToolsOutput.appendLine('Below is a list of the errors.');
-    angularToolsOutput.appendLine(errors.join('\n'));
-    angularToolsOutput.show();
-  }
 }

src/commands/showModuleHierarchy.ts

@@ -56,7 +56,7 @@ export class Config {
   public get directiveNodeShape(): string { return this.getSetting<string>('showModuleHierarchy.directiveNodeShape', 'box'); }
   public get importEdgeColor(): string { return this.getSetting<string>('showModuleHierarchy.importEdgeColor', '#43a047'); }
   public get exportEdgeColor(): string { return this.getSetting<string>('showModuleHierarchy.exportEdgeColor', '#0288d1'); }
-  public get maximumNodeLabelLength(): number { return this.getSetting<number>('showModuleHierarchy.maximumNodeLabelLength', 40); }
+  public get maximumNodeLabelLength(): number { return this.getSetting<number>('showModuleHierarchy.maximumNodeLabelLength', -1); }
 
   // ComponentHierarchyMarkdown
   public get componentHierarchyMarkdownFilename(): string { return this.getSetting<string>('componentHierarchyMarkdownFilename', 'ComponentHierarchy.md'); }