added: cytoscape

addon/components/node-overview.js

+import Component from '@ember/component';
+import layout from '../templates/components/node-overview';
+import cytoscape from 'npm:cytoscape';
+
+export default Component.extend({
+  layout,
+
+
+  // @Override
+  /**
+   * This overridden Ember Component lifecycle hook enables calling
+   * custom addon-related setup code
+   *
+   * @method didRender
+   */
+  didRender(){
+    this._super(...arguments);
+    this.initCytoscape();
+  },
+
+
+  /**
+     * This function is called once on the didRender event.
+     * It initializes cytoscape 
+     *
+     * @method initCytoscape
+     */
+    initCytoscape() {
+      // UNTESTED
+
+      var cy = cytoscape({
+        container: document.getElementById('cy'),
+
+        boxSelectionEnabled: false,
+        autounselectify: true,
+
+        style: cytoscape.stylesheet()
+          .selector('node')
+            .css({
+              'content': 'data(id)'
+            })
+          .selector('edge')
+            .css({
+              'curve-style': 'bezier',
+              'target-arrow-shape': 'triangle',
+              'width': 4,
+              'line-color': '#ddd',
+              'target-arrow-color': '#ddd'
+            })
+          .selector('.highlighted')
+            .css({
+              'background-color': '#61bffc',
+              'line-color': '#61bffc',
+              'target-arrow-color': '#61bffc',
+              'transition-property': 'background-color, line-color, target-arrow-color',
+              'transition-duration': '0.5s'
+            }),
+
+        elements: {
+            nodes: [
+              { data: { id: 'a' } },
+              { data: { id: 'b' } },
+              { data: { id: 'c' } },
+              { data: { id: 'd' } },
+              { data: { id: 'e' } }
+            ],
+
+            edges: [
+              { data: { id: 'a"e', weight: 1, source: 'a', target: 'e' } },
+              { data: { id: 'ab', weight: 3, source: 'a', target: 'b' } },
+              { data: { id: 'be', weight: 4, source: 'b', target: 'e' } },
+              { data: { id: 'bc', weight: 5, source: 'b', target: 'c' } },
+              { data: { id: 'ce', weight: 6, source: 'c', target: 'e' } },
+              { data: { id: 'cd', weight: 2, source: 'c', target: 'd' } },
+              { data: { id: 'de', weight: 7, source: 'd', target: 'e' } }
+            ]
+          },
+
+        layout: {
+          name: 'breadthfirst',
+          directed: true,
+          roots: '#a',
+          padding: 10
+        }
+      });
+
+      var bfs = cy.elements().bfs('#a', function(){}, true);
+
+      var i = 0;
+      var highlightNextEle = function(){
+        if( i < bfs.path.length ){
+          bfs.path[i].addClass('highlighted');
+
+          i++;
+          setTimeout(highlightNextEle, 1000);
+        }
+      };
+
+      // kick off first highlight
+      highlightNextEle();
+    }
+});

addon/templates/components/node-overview.hbs

+<div id="cy" class"cytoscape-container"></div>
\ No newline at end of file

app/components/node-overview.js

+export { default } from 'explorviz-frontend-extension-discovery/components/node-overview';
\ No newline at end of file

package.json

@@ -21,6 +21,7 @@
     "test": "ember try:each"
   },
   "dependencies": {
+    "cytoscape": "^3.2.7",
     "ember-cli-babel": "^6.8.1",
     "ember-cli-htmlbars": "^2.0.3",
     "ember-cli-htmlbars-inline-precompile": "^1.0.2"

tests/integration/components/node-overview-test.js

+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('node-overview', 'Integration | Component | node overview', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{node-overview}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#node-overview}}
+      template block text
+    {{/node-overview}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});

vendor/style.css

@@ -5,3 +5,11 @@
 .container-word-wrap {
   word-break: break-word;
 }
+
+.cytoscape-container {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
\ No newline at end of file