(613) Puppet Node Graph Feature Rewrite

This commit replaces the viz.js Node Graph Vizualizer with a
cytoscape.js based version. All existing command ids and workflow were
kept, only the presenation logic was changed.

The cytoscape.js module is a full featured data vizualizer that allows
us to display the puppet node graph in a multitude of formats and
presentations. While this commit only replaces existing functionality,
cytoscape has alot of potential for displaying the node graph in
interesting formats since it was designed to handle very large
scientific data sets.

The latest version of the viz.js module changed it's api to a pattern
we could not use reliably in the async language server call, and the
proejct itself has been archived in github and there hasn't been a new
version in several months.

w

Author: jpogran

CHANGELOG.md

@@ -6,6 +6,10 @@ Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how
 
 ## [Unreleased]
 
+### Changed
+
+- ([GH-614](https://github.com/lingua-pupuli/puppet-vscode/issues/614)) Puppet Node Graph Feature Rewrite
+
 ## [0.24.0] - 2020-02-28
 
 ### Fixed

assets/css/main.css

@@ -0,0 +1,13 @@
+#cy {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+}
+
+
+body{
+  overflow-x: hidden;
+  height: 100%;
+}

assets/js/main.js

@@ -0,0 +1,112 @@
+var cy;
+
+function generate_cy_stylesheet(cy) {
+  // This is a bit of a hack but it works
+  html_style = document.getElementsByTagName('html')[0].style;
+
+  // From https://js.cytoscape.org/#core/style
+  cy.style()
+    .fromJson([
+      {
+        selector: 'node',
+        style: {
+          label: "data(id)",
+          shape: "round-rectangle",
+          "background-color": html_style.getPropertyValue('--vscode-button-background'),
+          "background-width": "90%",
+          "background-height": "90%",
+          width: "228",
+          height: "128",
+          "border-width": "0",
+        }
+      },
+      {
+        selector: 'label',
+        style: {
+          color: html_style.getPropertyValue('--vscode-button-foreground'),
+          'font-family': '"Segoe UI", Arial, Helvetica, sans-serif',
+          'font-size': '28vh',
+          'text-valign': 'center',
+          'text-halign': 'center'
+        }
+      },
+      {
+        selector: ':selected',
+        style: {
+          'border-width': '4',
+          'border-color': html_style.getPropertyValue('--vscode-editor-hoverHighlightBackground'),
+          'background-color': html_style.getPropertyValue('--vscode-button-hoverBackground'),
+          'line-color': html_style.getPropertyValue('--vscode-minimap-errorHighlight'),
+          'target-arrow-color': html_style.getPropertyValue('--vscode-minimap-errorHighlight'),
+          'source-arrow-color': html_style.getPropertyValue('--vscode-minimap-errorHighlight')
+        }
+      },
+      {
+        selector: 'edge',
+        style: {
+          'target-arrow-shape': 'triangle',
+          'curve-style': 'bezier',
+          'control-point-step-size': 40,
+          width: 10
+        }
+      }
+    ])
+    .update(); // indicate the end of your new stylesheet so that it can be updated on elements
+}
+
+function init() {
+  vscode = acquireVsCodeApi();
+
+  cy = cytoscape({
+    container: document.getElementById('cy'),
+    wheelSensitivity: 0.15,
+    maxZoom: 5,
+    minZoom: 0.2,
+    selectionType: 'single'
+  });
+
+  generate_cy_stylesheet(cy);
+
+  vscode.postMessage({ command: 'initialized' });
+}
+
+window.addEventListener('message', event => {
+  const message = event.data;
+  if(message.redraw == true){
+    cy.remove('*');
+  }
+
+  nodeGraph = message.content;
+
+  try {  
+    nodeGraph.vertices.forEach(element => {
+      cy.add({
+        data: { id: element.label }
+      });
+    });
+
+    nodeGraph.edges.forEach(element => {
+      cy.add({
+        data: {
+          id: element.source + element.target,
+          source: element.source,
+          target: element.target
+        }
+      });
+    });
+  } catch (error) {
+    vscode.postMessage({
+      command: 'error',
+      errorMsg: `Error building node graph from json graph data: ${error}`
+    });
+  }
+
+  cy.layout({
+    avoidOverlap: true,
+    name: 'breadthfirst',
+    circle: false,
+    nodeDimensionsIncludeLabels: true,
+    spacingFactor: 1.5,
+    animate: true
+  }).run();
+});

package-lock.json

@@ -42,7 +42,7 @@
     }
   ],
   "engines": {
-    "vscode": "^1.30.0"
+    "vscode": "^1.38.0"
   },
   "categories": [
     "Linters",
@@ -68,7 +68,6 @@
     "onCommand:extension.puppetShowConnectionMenu",
     "onCommand:extension.puppetLint",
     "onCommand:extension.puppetParserValidate",
-    "onCommand:extension.puppetShowNodeGraphToSide",
     "onCommand:extension.puppetResource",
     "onCommand:extension.pdkNewModule",
     "onCommand:extension.pdkNewClass",
@@ -186,7 +185,7 @@
         "title": "Puppet Resource"
       },
       {
-        "command": "extension.puppetShowNodeGraphToSide",
+        "command": "puppet.puppetShowNodeGraphToSide",
         "title": "Open Node Graph to the Side",
         "category": "Puppet",
         "icon": {
@@ -230,7 +229,7 @@
           "when": "editorLangId == 'puppet'"
         },
         {
-          "command": "extension.puppetShowNodeGraphToSide",
+          "command": "puppet.puppetShowNodeGraphToSide",
           "when": "editorLangId == 'puppet'"
         }
       ],
@@ -262,7 +261,7 @@
         },
         {
           "when": "editorLangId == 'puppet'",
-          "command": "extension.puppetShowNodeGraphToSide",
+          "command": "puppet.puppetShowNodeGraphToSide",
           "group": "puppet"
         },
         {
@@ -294,7 +293,7 @@
         },
         {
           "when": "editorLangId == 'puppet'",
-          "command": "extension.puppetShowNodeGraphToSide",
+          "command": "puppet.puppetShowNodeGraphToSide",
           "group": "puppet"
         },
         {
@@ -535,13 +534,14 @@
     "@types/glob": "^7.1.1",
     "@types/mocha": "^5.2.7",
     "@types/node": "^12.0.8",
-    "@types/vscode": "^1.30.0",
+    "@types/vscode": "^1.38.0",
     "glob": "^7.1.4",
     "mocha": "^6.2.2",
     "tslint": "^5.17.0",
     "typescript": "^3.5.2",
     "vsce": "^1.63.0",
-    "vscode-test": "^1.0.2"
+    "vscode-test": "^1.0.2",
+    "cytoscape": "3.14.0"
   },
   "dependencies": {
     "jsonc-parser": "~2.1.0",

package.json

@@ -89,6 +89,12 @@ task VendorEditorSyntax {
   Invoke-RestMethod -Uri $uri -OutFile $syntaxFilePath -ErrorAction Stop 
 }
 
+task VendorCytoscape {
+  $cyto = Join-Path $PSScriptRoot 'node_modules\cytoscape\dist'
+  $vendorCytoPath = (Join-Path $PSScriptRoot 'vendor\cytoscape')
+  Copy-Item -Path $cyto -Recurse -Destination $vendorCytoPath
+}
+
 task CompileTypeScript {
   exec { tsc -p ./ }
 }
@@ -97,7 +103,7 @@ task Bump {
   exec { npm version --no-git-tag-version $packageVersion }
 }
 
-task Vendor -depends VendorEditorServices, VendorEditorSyntax
+task Vendor -depends VendorEditorServices, VendorEditorSyntax, VendorCytoscape
 
 task Build -depends Clean, Vendor, CompileTypeScript
 

psakefile.ps1

@@ -143,7 +143,7 @@ export class AggregateConfiguration implements IAggregateConfiguration {
         if (settings.editorService.tcp.address === '127.0.0.1' ||
             settings.editorService.tcp.address === 'localhost' ||
             settings.editorService.tcp.address === '') {
-          return ConnectionType.Local;
+              return ConnectionType.Remote;
         } else {
           return ConnectionType.Remote;
         }

src/configuration.ts

@@ -7,7 +7,6 @@ import { IFeature } from './feature';
 import { BoltFeature } from './feature/BoltFeature';
 import { DebuggingFeature } from './feature/DebuggingFeature';
 import { FormatDocumentFeature } from './feature/FormatDocumentFeature';
-import { NodeGraphFeature } from './feature/NodeGraphFeature';
 import { UpdateConfigurationFeature } from './feature/UpdateConfigurationFeature';
 import { PDKFeature } from './feature/PDKFeature';
 import { PuppetResourceFeature } from './feature/PuppetResourceFeature';
@@ -21,6 +20,7 @@ import { OutputChannelLogger } from './logging/outputchannel';
 import { legacySettings, SettingsFromWorkspace } from './settings';
 import { reporter } from './telemetry';
 import { PuppetModuleHoverFeature } from './feature/PuppetModuleHoverFeature';
+import { PuppetNodeGraphFeature } from './feature/PuppetNodeGraphFeature';
 
 const axios = require('axios');
 
@@ -72,6 +72,7 @@ export function activate(context: vscode.ExtensionContext) {
     return;
   }
 
+  
   if (checkInstallDirectory(configSettings, logger) === false){
     // If this returns false, then we needed a local directory
     // but did not find it, so we should abort here
@@ -96,7 +97,7 @@ export function activate(context: vscode.ExtensionContext) {
   }
 
   extensionFeatures.push(new FormatDocumentFeature(puppetLangID, connectionHandler, configSettings, logger, extContext));
-  extensionFeatures.push(new NodeGraphFeature(puppetLangID, connectionHandler, logger, extContext));
+  extensionFeatures.push(new PuppetNodeGraphFeature(puppetLangID, connectionHandler, logger, extContext));
   extensionFeatures.push(new PuppetResourceFeature(extContext, connectionHandler, logger));
   extensionFeatures.push(new DebuggingFeature(debugType, configSettings, extContext, logger));