A popup is now shown when the mouse pointer is hovered above an edge or a node.

CoderAllan · CoderAllan · commit 4c73ed455630 · 2021-06-16T04:55:39.000+02:00
It is now possible to click a node in the graphs to open the file the node is associated with.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Change Log
 
+## Version 1.8.3
+
+- When edges have the same source and target the edges no longer overlap.
+- A popup is now shown when the mouse pointer is hovered above an edge or a node.
+- It is now possible to click a node in the graphs to open the file the node is associated with.
+
 ## Version 1.8.2
 
 - The state of the checkbox and the dropdown boxes are now persisted.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "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.8.2",
+  "version": "1.8.3",
   "license": "MIT",
   "repository": "https://github.com/CoderAllan/vscode-angulartools",
   "author": {
@@ -391,6 +391,11 @@
           "type": "string",
           "default": "Modules.md",
           "description": "The default name used when saving the project module to a markdown file."
+        },
+        "angularTools.showPopupsOverNodesAndEdges": {
+          "type": "boolean",
+          "default": true,
+          "description": "When the setting is set to true a popup with various information from node or edge will be shown when the mouse pointer hovers over nodes and edges."
         }
       }
     }
diff --git a/src/commands/generateDependencyInjectionGraph.ts b/src/commands/generateDependencyInjectionGraph.ts
@@ -31,6 +31,15 @@ export class GenerateDependencyInjectionGraph extends ShowHierarchyBase {
             this.addNodesAndEdges(project, this.appendNodes, this.appendEdges);
             this.generateAndSaveJavascriptContent(() => { });
             return;
+          case 'openFile':
+            const filename = message.text;
+            if (this.fsUtils.fileExists(filename)) {
+              var openPath = vscode.Uri.parse("file:///" + filename);
+              vscode.workspace.openTextDocument(openPath).then(doc => {
+                vscode.window.showTextDocument(doc);
+              });
+            }
+            return;
         }
       },
       undefined,
@@ -106,10 +115,10 @@ export class GenerateDependencyInjectionGraph extends ShowHierarchyBase {
       let componentFilename = component.filename.replace(this.workspaceDirectory, '.');
       componentFilename = componentFilename.split('\\').join('/');
       const componentPosition = this.graphState.nodePositions[component.name];
-      appendNodes([new Node(component.name, this.generatedComponentNode(component), componentFilename, false, NodeType.component, componentPosition)]);
+      appendNodes([new Node(component.name, this.generatedComponentNode(component), componentFilename, component.filename, false, NodeType.component, componentPosition)]);
       component.dependencyInjections.forEach(injectable => {
         const injectablePosition = this.graphState.nodePositions[injectable.name];
-        appendNodes([new Node(injectable.name, injectable.name, injectable.filename.replace(this.workspaceDirectory, ''), false, NodeType.injectable, injectablePosition)]);
+        appendNodes([new Node(injectable.name, injectable.name, injectable.filename.replace(this.workspaceDirectory, ''), component.filename, false, NodeType.injectable, injectablePosition)]);
         appendEdges([new Edge((this.edges.length + 1).toString(), injectable.name, component.name, ArrowType.injectable)]);
       });
     });
diff --git a/src/commands/showComponentHierarchy.ts b/src/commands/showComponentHierarchy.ts
@@ -34,6 +34,15 @@ export class ShowComponentHierarchy extends ShowHierarchyBase {
             this.addNodesAndEdges(components, this.appendNodes, this.appendEdges);
             this.generateAndSaveJavascriptContent(() => { });
             return;
+          case 'openFile':
+            const filename = message.text;
+            if (this.fsUtils.fileExists(filename)) {
+              var openPath = vscode.Uri.parse("file:///" + filename);
+              vscode.workspace.openTextDocument(openPath).then(doc => {
+                vscode.window.showTextDocument(doc);
+              });
+            }
+            return;
         }
       },
       undefined,
@@ -88,7 +97,7 @@ export class ShowComponentHierarchy extends ShowHierarchyBase {
     let componentFilename = component.tsFilename.replace(this.directoryPath, '.');
     componentFilename = componentFilename.split('\\').join('/');
     const componentPosition = this.graphState.nodePositions[component.selector];
-    appendNodes([new Node(component.selector, component.selector, componentFilename, isRoot, isRoot ? NodeType.rootNode : NodeType.component, componentPosition)]);
+    appendNodes([new Node(component.selector, component.selector, componentFilename, component.tsFilename, isRoot, isRoot ? NodeType.rootNode : NodeType.component, componentPosition)]);
     if (components.length > 0) {
       components.forEach((subComponent) => {
         if (parentSelector !== subComponent.selector) {
diff --git a/src/commands/showHierarchyBase.ts b/src/commands/showHierarchyBase.ts
@@ -36,19 +36,22 @@ export class ShowHierarchyBase extends CommandBase {
   }
   protected appendNodes = (nodeList: Node[]) => {
     nodeList.forEach(newNode => {
+      newNode.showPopupsOverNodesAndEdges = this.config.showPopupsOverNodesAndEdges;
       if (!this.nodes.some(node => node.id === newNode.id)) {
         this.nodes.push(newNode);
       }
       else {
         const existingNode = this.nodes.find(node => node.id === newNode.id);
         if (existingNode && (!existingNode.tsFilename || existingNode.tsFilename?.length === 0) && newNode.tsFilename && newNode.tsFilename.length > 0) {
           existingNode.tsFilename = newNode.tsFilename;
+          existingNode.filename = newNode.filename;
         }
       }
     });
   };
   protected appendEdges = (edgeList: Edge[]) => {
     edgeList.forEach(newEdge => {
+      newEdge.showPopupsOverNodesAndEdges = this.config.showPopupsOverNodesAndEdges;
       const mutualEdges = this.edges.filter(edge => edge.target === newEdge.source && edge. source=== newEdge.target);
       if (mutualEdges.length > 0) {
         newEdge.mutualEdgeCount += 1;
@@ -158,6 +161,11 @@ export class ShowHierarchyBase extends CommandBase {
     cssUri = webview.asWebviewUri(cssPath);
     htmlContent = htmlContent.replace(this.fontAwesomeCssFilename, cssUri.toString());
 
+    const visJsMinCss = 'vis-network.min.css';
+    const visCssPath = vscode.Uri.joinPath(this.extensionContext.extensionUri, 'stylesheet', visJsMinCss);
+    const visCssUri = webview.asWebviewUri(visCssPath);
+    htmlContent = htmlContent.replace(visJsMinCss, visCssUri.toString());
+
     const nonce = this.getNonce();
     htmlContent = htmlContent.replace('nonce-nonce', `nonce-${nonce}`);
     htmlContent = htmlContent.replace(/<script /g, `<script nonce="${nonce}" `);
diff --git a/src/commands/showModuleHierarchy.ts b/src/commands/showModuleHierarchy.ts
@@ -31,6 +31,15 @@ export class ShowModuleHierarchy extends ShowHierarchyBase {
             this.addNodesAndEdges(project, this.appendNodes, this.appendEdges);
             this.generateAndSaveJavascriptContent(() => { });
             return;
+          case 'openFile':
+            const filename = message.text;
+            if (this.fsUtils.fileExists(filename)) {
+              var openPath = vscode.Uri.parse("file:///" + filename);
+              vscode.workspace.openTextDocument(openPath).then(doc => {
+                vscode.window.showTextDocument(doc);
+              });
+            }
+            return;
         }
       },
       undefined,
@@ -75,19 +84,21 @@ export class ShowModuleHierarchy extends ShowHierarchyBase {
   private addNodesAndEdges(project: Project, appendNodes: (nodeList: Node[]) => void, appendEdges: (edgeList: Edge[]) => void) {
     project.modules.forEach(module => {
       let moduleFilename = module.filename.replace(this.workspaceDirectory, '.');
-      moduleFilename = moduleFilename.split('\\').join('/');
+      moduleFilename = moduleFilename.replace(/\\/g, '/');
       const modulePosition = this.graphState.nodePositions[module.moduleName];
-      appendNodes([new Node(module.moduleName, module.moduleName, moduleFilename, false, NodeType.module, modulePosition)]);
+      appendNodes([new Node(module.moduleName, module.moduleName, moduleFilename, module.filename, false, NodeType.module, modulePosition)]);
       module.imports.forEach(_import => {
         const nodeType = Node.getNodeType(project, _import);
         const importPosition = this.graphState.nodePositions[_import];
-        appendNodes([new Node(_import, _import, this.getNodeFilename(_import, nodeType, project), false, nodeType, importPosition)]);
+        const nodeFilename = this.getNodeFilename(_import, nodeType, project);
+        appendNodes([new Node(_import, _import, nodeFilename?.replace(this.workspaceDirectory, ''), nodeFilename, false, nodeType, importPosition)]);
         appendEdges([new Edge((this.edges.length + 1).toString(), _import, module.moduleName, ArrowType.import)]);
       });
       module.exports.forEach(_export => {
         const nodeType = Node.getNodeType(project, _export);
         const exportPosition = this.graphState.nodePositions[_export];
-        appendNodes([new Node(_export, _export, this.getNodeFilename(_export, nodeType, project), false, nodeType, exportPosition)]);
+        const nodeFilename = this.getNodeFilename(_export, nodeType, project);
+        appendNodes([new Node(_export, _export, nodeFilename?.replace(this.workspaceDirectory, ''), nodeFilename, false, nodeType, exportPosition)]);
         appendEdges([new Edge((this.edges.length + 1).toString(), module.moduleName, _export, ArrowType.export)]);
       });
     });
@@ -105,8 +116,10 @@ export class ShowModuleHierarchy extends ShowHierarchyBase {
       case (NodeType.component):
         nodeFilename = project.components.get(nodeName)?.filename;
         break;
+      default:
+        nodeFilename = '';
     }
-    return nodeFilename?.replace(this.workspaceDirectory, '');
+    return nodeFilename;
   }
 
   private generateJavascriptContent(nodesJson: string, edgesJson: string) {
diff --git a/src/config.ts b/src/config.ts
@@ -71,6 +71,9 @@ export class Config {
   public get injectableEdgeColor(): string { return this.getSetting<string>('edges.exportEdgeColor', '#0288d1'); }
   public get usesEdgeColor(): string { return this.getSetting<string>('edges.exportEdgeColor', '#0288d1'); }
 
+  // Popups
+  public get showPopupsOverNodesAndEdges(): boolean { return this.getSetting<boolean>('showPopupsOverNodesAndEdges', true); }
+
   // PackageJsonToMarkdown
   public get packageJsonMarkdownFilename(): string { return this.getSetting<string>('packageJsonMarkdownFilename', 'ReadMe-PackagesJson.md'); }
 
diff --git a/src/filesystemUtils.ts b/src/filesystemUtils.ts
@@ -25,6 +25,14 @@ export class FileSystemUtils {
     return files;
   }
 
+  public fileExists(filename: string): boolean {
+    try{
+      return fs.lstatSync(filename).isFile();
+    } catch {
+      return false;
+    }
+  }
+  
   private isDirectory(directoryName: any): boolean {
     return fs.lstatSync(directoryName).isDirectory();
   };
diff --git a/src/model/Edge.ts b/src/model/Edge.ts
@@ -14,6 +14,7 @@ export class Edge {
   public target: string;
   public arrowType: ArrowType;
   public mutualEdgeCount: number = 1;
+  public showPopupsOverNodesAndEdges: boolean = true;
 
   public toJsonString(): string {
     let arrowColorAttr = `, color: "${this.getEdgeTypeColor(this.arrowType)}"`;
@@ -27,6 +28,24 @@ export class Edge {
     } else {
       jsStringProperties.push(`smooth: false`);
     }
+    if (this.showPopupsOverNodesAndEdges) {
+      switch (this.arrowType) {
+        case ArrowType.injectable:
+          jsStringProperties.push(`title: "${this.source} injected into ${this.target}"`);
+          break;
+        case ArrowType.import:
+          jsStringProperties.push(`title: "${this.target} imports ${this.source}"`);
+          break;
+        case ArrowType.export:
+          jsStringProperties.push(`title: "${this.source} exports ${this.target}"`);
+          break;
+        case ArrowType.uses:
+          jsStringProperties.push(`title: "${this.source} uses ${this.target}"`);
+          break;
+        default:
+          break;
+      }
+    }
     return `{${jsStringProperties.join(', ')}}`;
   }
 
diff --git a/src/model/Node.ts b/src/model/Node.ts
@@ -3,10 +3,20 @@ import { Config } from "@src";
 
 export class Node {
   private config: Config = new Config();
-  constructor(id: string, name: string, filename: string | undefined, isRoot: boolean, nodeType: NodeType = NodeType.none, position: Position | undefined = undefined, boundingBox: BoundingBox | undefined = undefined, attributes: Attribute[] = []) {
+  constructor(
+    id: string,
+    name: string,
+    tsFilename: string | undefined,
+    filename: string | undefined,
+    isRoot: boolean,
+    nodeType: NodeType = NodeType.none,
+    position: Position | undefined = undefined,
+    boundingBox: BoundingBox | undefined = undefined,
+    attributes: Attribute[] = []) {
     this.id = id;
     this.name = name;
-    this.tsFilename = filename;
+    this.tsFilename = tsFilename;
+    this.filename = filename;
     this.isRoot = isRoot;
     this.nodeType = nodeType;
     this.position = position;
@@ -15,12 +25,14 @@ export class Node {
   }
   public id: string;
   public name: string;
+  public filename: string | undefined;
   public tsFilename: string | undefined;
   public isRoot: boolean;
   public position: Position | undefined;
   public boundingBox: BoundingBox | undefined;
   public nodeType: NodeType;
   public attributes: Attribute[];
+  public showPopupsOverNodesAndEdges: boolean = true;
 
   public toJsonString(): string {
     const jsStringProperties: string[] = [];
@@ -50,6 +62,17 @@ export class Node {
       default:
         break;
     }
+    if (this.showPopupsOverNodesAndEdges) {
+      const name = this.name.replace(/<b>|<\/b>/ig, '');
+      const filename = this.tsFilename ? `\\nFilename: ${this.tsFilename?.replace(/\\/g, '/')}` : '';
+
+      jsStringProperties.push(`title: "Name: ${name}\\nType: ${this.getNodeTypeTitle()}${filename}"`);
+    }
+
+    if (this.filename) {
+      const filename = this.filename?.replace(/\\/g, '/');
+      jsStringProperties.push(`filepath: "${filename}"`);
+    }
     if (this.position !== undefined && this.position.x !== undefined && this.position.y !== undefined) { jsStringProperties.push(`x: ${this.position.x}, y: ${this.position.y}, fixed: { x: true, y: true}`); }
     return `{ ${jsStringProperties.join(', ')} }`;
   }
@@ -125,4 +148,22 @@ export class Node {
     }
     return nodeType;
   }
+  public getNodeTypeTitle() {
+    switch (this.nodeType) {
+      case NodeType.component:
+        return 'Component';
+      case NodeType.directive:
+        return 'Directive';
+      case NodeType.injectable:
+        return 'Injectable';
+      case NodeType.module:
+        return 'Module';
+      case NodeType.pipe:
+        return 'Pipe';
+      case NodeType.rootNode:
+        return 'Root node';
+      default:
+        return '';
+    }
+  }
 }
diff --git a/stylesheet/vis-network.min.css b/stylesheet/vis-network.min.css
diff --git a/templates/showHierarchy_Template.html b/templates/showHierarchy_Template.html
@@ -7,7 +7,8 @@
 
   <link href="showHierarchy.css" rel="stylesheet">
   <link href="all.min.css" rel="stylesheet">
-
+  <link href="vis-network.min.css" rel="stylesheet">
+  
   <script type="text/javascript" src="vis-network.min.js"></script>
 
 </head>
diff --git a/templates/showHierarchy_Template.js b/templates/showHierarchy_Template.js
