color theme support

app/components/architecture-viewer.js

 import Ember from 'ember';
+import Themes from './architecture-visualisation-cytoscape/themes';
+
+
 
 export default Ember.Component.extend({
     graph: null,
     layoutAlgorithm: 'cose',
+    theme: Themes[Object.keys(Themes)[0]], // first theme
+    themes: Object.keys(Themes),
     layoutAlgorithms: [
         'cose',
-        // 'cose-bilkent', // broken
+        'cose-bilkent', // broken
         'cola',
         'grid',
         'concentric',
@@ -19,6 +24,9 @@ export default Ember.Component.extend({
         selectLayoutAlgorithm(value) {
             this.debug('value', value);
             this.set('layoutAlgorithm', value);
+        },
+        selectTheme(theme) {
+            this.set('theme', Themes[theme]);
         }
     }
 });

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

@@ -9,6 +9,7 @@ import coseBilkent from 'npm:cytoscape-cose-bilkent';
 coseBilkent(cytoscape); // register
 
 export default Ember.Component.extend({
+    theme: null,
     layoutAlgorithm: 'cose',
     classNames: ['cytoscapeRenderingSpace'],
     init: function() {
@@ -19,33 +20,18 @@ export default Ember.Component.extend({
     willDestroyElement() {
         clearInterval(this.interval);
     },
-    layoutChanged: Ember.observer('layout', function(newLayout) {
+    layoutChanged: function(newLayout) {
         this.debug('layout changed!', newLayout);
-    }),
+    }.observes('layout'),
     renderGraph: function() {
-        this.debug('graph', this.get('graph'));
+        this.debug('graph',this.get('theme'), this.get('graph'));
         this.cytoscape = cytoscape({
           container: this.element,
 
           boxSelectionEnabled: false,
           autounselectify: true,
 
-          style: cytoscapeStyle({
-                  nodeGroupTextColor: '#3399CC',
-                  nodeGroupColor: 'white',
-                  borderColor: '#39588A',
-
-                  nodeColor: '#B4DCED',
-                  nodeTextColor: '#3399CC',
-
-                  serviceColor: '#E8F8FF',
-                  serviceTextColor: '#3399CC',
-
-                  arrowBorderColor: '#3399CC',
-                  arrowColor: '#3399CC',
-                  arrowLabelColor: 'black'
-              }
-          ),
+          style: cytoscapeStyle(this.get('theme')),
 
           elements: _.cloneDeep(this.get('graph')), // TODO!
 
@@ -60,5 +46,5 @@ export default Ember.Component.extend({
 
         window.cy = cytoscape;
         window.cytoscape = this.cytoscape;
-    }.on('didInsertElement').observes('layoutAlgorithm', 'graph')
+    }.on('didInsertElement').observes('layoutAlgorithm', 'graph', 'theme')
 });

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

+export default {
+    'arctic': {
+        nodeGroupTextColor: '#3399CC',
+        nodeGroupColor: 'white',
+        borderColor: '#39588A',
+        nodeColor: '#B4DCED',
+        nodeTextColor: '#3399CC',
+        serviceColor: '#E8F8FF',
+        serviceTextColor: '#3399CC',
+        arrowBorderColor: '#3399CC',
+        arrowColor: '#3399CC',
+        arrowLabelColor: 'black'
+    }
+};
\ 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}}
+        {{architecture-visualisation-cytoscape graph=graph layoutAlgorithm=layoutAlgorithm theme=theme}}
     </div>
     <div class="col-md-2">
         <div class="form-group">
@@ -11,6 +11,14 @@
             {{/each}}
           </select>
         </div>
+        <div class="form-group">
+          <label for="layoutTheme">Theme:</label>
+          <select class="form-control" id="layoutTheme" onchange={{action "selectTheme" value="target.value"}}>
+            {{#each themes as |theme|}}
+                <option>{{theme}}</option>
+            {{/each}}
+          </select>
+        </div>
     </div>
 </div>