Merge pull request #614 from jpogran/cytoscape

(613) Puppet Node Graph Feature Rewrite

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));