add bootstrap, navbar and layout selection for architecture view

app/components/architecture-viewer.js

+import Ember from 'ember';
+
+export default Ember.Component.extend({
+    graph: null,
+    layoutAlgorithm: 'cose',
+    layoutAlgorithms: [
+        "cose",
+        "cola"
+    ],
+    init() {
+        this._super();
+        this.debug('init!', this.get('graph'), this.get('layoutAlgorithm'));
+    },
+    actions: {
+        selectLayoutAlgorithm(value) {
+            this.debug('value', value);
+            this.set('layoutAlgorithm', value);
+        }
+    }
+});

app/components/architecture-visualisation-cytoscape/component.js

@@ -6,57 +6,21 @@ import cytoscapeStyle from './style';
 import _ from 'npm:lodash';
 
 export default Ember.Component.extend({
+    layoutAlgorithm: 'cose',
     classNames: ['cytoscapeRenderingSpace'],
-    dummyGraph: {
-        nodes: [
-            { data: { id: 'nodeWebnode', label: 'Webnode', type: 'node' } },
-            { data: { id: 'nodeLogicnode', label: 'Logicnode', type: 'node' } },
-            { data: { id: 'nodeAdapter', label: 'Adapter', type: 'node' } },
-            { data: { id: 'nodeDatabase', label: 'Database', type: 'node' } },
-            { data: { id: 'serviceInstanceFrontEnd', label: 'Database', type: 'serviceInstance', parent: 'nodeWebnode' } },
-            { data: { id: 'serviceInstanceCashDesk', label: 'CashDesk', type: 'serviceInstance', parent: 'nodeLogicnode' } },
-            { data: { id: 'serviceInstanceInventory', label: 'Inventory', type: 'serviceInstance' }, parent: 'nodeLogicnode' },
-            { data: { id: 'serviceInstanceData', label: 'Data', type: 'serviceInstance', parent: 'nodeLogicnode' } },
-            { data: { id: 'serviceInstancePostgresSQL', label: 'PostgresSQL', type: 'serviceInstance', parent: 'nodeDatabase' } },
-        ],
-        edges: [
-            { data: { id: 'ad', source: 'a', target: 'd', weight: 100 } },
-        ]
-    },
     init: function() {
-        cycola( cytoscape, cola );
-
+        cycola( cytoscape, window.cola );
         this._super();
-        const self = this;
-        const log = self.debug.bind(self);
-        log('loaded');
-        // this.interval = setInterval(function() {
-        //     const graph = self.get('graph');
-
-        //     log('update interval called', graph);
-
-        //     if(!graph) {
-        //         return; // eventual consistent
-        //     }
-        //     const edges = graph.edges || [];
-        //     const index = Math.floor(Math.random()*edges.length);
-        //     if(Math.random() > 0.5) {
-        //         edges.splice(index, 1);
-        //     } else { // FIXME: does not render updates
-        //         const children = _.get(graph, 'children', []);
-        //         const randomNodeIndex = Math.floor(Math.random()*children.length);
-        //         const randomNodeId = children[randomNodeIndex].id;
-        //         graph.edges = _.set(edges, `${index}.target`, randomNodeId);
-        //         log(`updating random edge (${index}) to target a random node id ${randomNodeId}`, randomNodeIndex, edges);
-        //     }
-        //     self.set('graph', graph);
-        //     self.renderGraph();
-        // }, 1000);
+        this.debug('loaded', this.get('graph'));
     },
     willDestroyElement() {
         clearInterval(this.interval);
     },
-    didInsertElement: function() {
+    layoutChanged: Ember.observer('layout', function(newLayout) {
+        this.debug('layout changed!', newLayout);
+    }),
+    renderGraph: function() {
+        this.debug('graph', this.get('graph'));
         this.cytoscape = cytoscape({
           container: this.element,
 
@@ -65,13 +29,18 @@ export default Ember.Component.extend({
 
           style: cytoscapeStyle,
 
-          elements: this.get('graph'), // TODO!
+          elements: _.cloneDeep(this.get('graph')), // TODO!
 
           layout: {
-            name: 'cola',
-            padding: 5,
-            maxSimulationTime: 1000
+            name: this.get('layoutAlgorithm'),
+            maxSimulationTime: 1000,
+            padding: 6,
+            ungrabifyWhileSimulating: true,
+            infinite: false
           }
         });
-    }
+
+        window.cy = cytoscape;
+        window.cytoscape = this.cytoscape;
+    }.on('didInsertElement').observes('layoutAlgorithm', 'graph')
 });

app/services/graphing-service.js

@@ -47,10 +47,10 @@ export default Ember.Service.extend({
 
     communicationInstances.forEach(instance => {
         const data = instance.toJSON({includeId: true});
-        data.label = data.name;
         data.source = data.sourceId;
         data.target = data.targetId;
         data.technology = instance.store.peekRecord('communication', data.communicationId).get('technology');
+        data.label = data.technology;
         this.debug('technology', data.technology);
 
       network.edges.push({

app/styles/_custom_bootstrap.scss

+/*!
+ * Bootstrap v3.3.6 (http://getbootstrap.com)
+ * Copyright 2011-2015 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+
+// Core variables and mixins
+@import "bootstrap/variables";
+@import "bootstrap/mixins";
+
+// Reset and dependencies
+@import "bootstrap/normalize";
+@import "bootstrap/print";
+@import "bootstrap/glyphicons";
+
+// Core CSS
+@import "bootstrap/scaffolding";
+@import "bootstrap/type";
+@import "bootstrap/code";
+@import "bootstrap/grid";
+@import "bootstrap/tables";
+@import "bootstrap/forms";
+@import "bootstrap/buttons";
+
+// Components
+// @import "bootstrap/component-animations";
+// @import "bootstrap/dropdowns";
+// @import "bootstrap/button-groups";
+// @import "bootstrap/input-groups";
+@import "bootstrap/navs";
+@import "bootstrap/navbar";
+// @import "bootstrap/breadcrumbs";
+// @import "bootstrap/pagination";
+// @import "bootstrap/pager";
+@import "bootstrap/labels";
+// @import "bootstrap/badges";
+// @import "bootstrap/jumbotron";
+// @import "bootstrap/thumbnails";
+@import "bootstrap/alerts";
+// @import "bootstrap/progress-bars";
+// @import "bootstrap/media";
+// @import "bootstrap/list-group";
+// @import "bootstrap/panels";
+// @import "bootstrap/responsive-embed";
+// @import "bootstrap/wells";
+// @import "bootstrap/close";
+
+// Components w/ JavaScript
+// @import "bootstrap/modals";
+// @import "bootstrap/tooltip";
+// @import "bootstrap/popovers";
+// @import "bootstrap/carousel";
+
+// Utility classes
+@import "bootstrap/utilities";
+@import "bootstrap/responsive-utilities";
\ No newline at end of file

app/styles/app.scss

-body {
-    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
-}
 
 @import "components/_architecture";
 @import "components/_cytoscape";
 
+$navbar-default-bg: #312312;
+$light-orange: #ff8c00;
+$navbar-default-color: $light-orange;
+
+@import "custom_bootstrap";
\ No newline at end of file

app/styles/components/_cytoscape.scss

 .cytoscapeRenderingSpace {
-  height: 100%;
+  height: 720px;
+  max-height: 100%;
   width: 100%;
-  position: absolute;
   left: 0;
   top: 0;
+  border: solid 1px #ccc;
 }
\ No newline at end of file

app/templates/application.hbs

 {{loading-slider isLoading=loading duration=250}}
-<h2 id="title">Welcome to Ember</h2>
-<ul>
-    <li>Go to {{#link-to 'home'}}Home{{/link-to}}</li>
-    <li>Go to {{#link-to 'architectures'}}Architekturen{{/link-to}}</li>
+
+<nav class="navbar">
+  <div class="container">
+    <div class="navbar-header">
+      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+      {{#link-to 'home' class="navbar-brand"}}iObserve{{/link-to}}
+    </div>
+    <div id="navbar" class="navbar-collapse collapse">
+      <ul class="nav navbar-nav">
+        {{#link-to 'home' tagName='li'}}
+            {{#link-to 'home'}}Startseite{{/link-to}}
+        {{/link-to}}
+        {{#link-to 'architectures' tagName='li'}}
+            {{#link-to 'architectures'}}Architekturen{{/link-to}}
+        {{/link-to}}
       </ul>
+    </div><!--/.nav-collapse -->
+  </div>
+</nav>
 
 {{outlet}}

app/templates/architectures/single.hbs

-<div class="visualisationContainer">
-    {{architecture-visualisation-cytoscape graph=model}}
-</div>
+{{architecture-viewer graph=model}}
\ No newline at end of file

app/templates/components/architecture-viewer.hbs

+<div class="row">
+    <div class="col-md-10 visualisationContainer">
+        {{architecture-visualisation-cytoscape graph=graph layoutAlgorithm=layoutAlgorithm}}
+    </div>
+    <div class="col-md-2">
+        <div class="form-group">
+          <label for="layoutAlgorithm">Layout:</label>
+          <select class="form-control" id="layoutAlgorithm" onchange={{action "selectLayoutAlgorithm" value="target.value"}}>
+            {{#each layoutAlgorithms as |algorithm|}}
+                <option>{{algorithm}}</option>
+            {{/each}}
+          </select>
+        </div>
+    </div>
+</div>
+

bower.json

@@ -7,6 +7,7 @@
     "ember-qunit-notifications": "0.1.0",
     "d3": "^3.5.16",
     "visionmedia-debug": "2.2",
-    "webcola": "^3.1.3"
+    "webcola": "^3.1.3",
+    "bootstrap-sass": "^3.3.6"
   }
 }

ember-cli-build.js

@@ -5,6 +5,9 @@ var EmberApp = require('ember-cli/lib/broccoli/ember-app');
 module.exports = function(defaults) {
   var app = new EmberApp(defaults, {
     // Add options here
+    'ember-cli-bootstrap-sassy': {
+        'js': []
+    }
   });
 
   // Use `app.import` to add additional libraries to the generated

package.json

@@ -25,6 +25,7 @@
     "ember-cli": "2.4.2",
     "ember-cli-app-version": "^1.0.0",
     "ember-cli-babel": "^5.1.5",
+    "ember-cli-bootstrap-sassy": "0.5.3",
     "ember-cli-d3": "1.1.6",
     "ember-cli-dependency-checker": "^1.2.0",
     "ember-cli-htmlbars": "^1.0.1",
@@ -46,7 +47,8 @@
     "ember-load-initializers": "^0.5.0",
     "ember-resolver": "^2.0.3",
     "loader.js": "^4.0.0",
-    "lodash": "^4.11.1"
+    "lodash": "^4.11.1",
+    "node-sass": "^3.8.0"
   },
   "dependencies": {
     "cytoscape": "^2.6.12",

tests/integration/components/architecture-viewer-test.js

+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('architecture-viewer', 'Integration | Component | architecture viewer', {
+  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`{{architecture-viewer}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#architecture-viewer}}
+      template block text
+    {{/architecture-viewer}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});