basic styling

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

@@ -9,16 +9,18 @@ export default Ember.Component.extend({
     classNames: ['cytoscapeRenderingSpace'],
     dummyGraph: {
         nodes: [
-            { data: { id: 'a', parent: 'b', name: 'Test Service' } },
-            { data: { id: 'b' } },
-            { data: { id: 'c', parent: 'b' } },
-            { data: { id: 'd' } },
-            { data: { id: 'e' } },
-            { data: { id: 'f', parent: 'e' } }
+            { 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' } },
-            { data: { id: 'eb', source: 'e', target: 'b' } }
+            { data: { id: 'ad', source: 'a', target: 'd', weight: 100 } },
         ]
     },
     init: function() {

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

-// you should set syntax highlighting to CSS
+/**
+    you should set syntax highlighting to CSS
+    this is a .js file, because we can then use static imports which ember-cli can properly build.
+    Notice that this is only pseudo-css for cytoscape. See the cytoscape.js docs for more info.
+*/
 export default `
 
+* {
+    font-size: 10pt;
+}
 
-node {
+node { /* all nodes */
     content: data(label);
+    shape: roundrectangle;
     text-valign: center;
     text-halign: center;
 }
 
-$node > node {
+$node > node { /* compounds. "Nodes" in meta model. $ selects the parent node that has a node instead of the node (as css would) */
     padding-top: 10px;
     padding-left: 10px;
     padding-bottom: 10px;
     padding-right: 10px;
     text-valign: top;
     text-halign: center;
-    background-color: #bbb;
+    background-color: #CCC;
+}
+
+[type="red"] {
+    background-color: red;
 }
 
 edge {
-    target-arrow-shape: triangle;
+    label: data(label);
+    target-arrow-shape: triangle-backcurve;
+    curve-style: bezier; /* supports arrows */
+    width: 2px;
 }
 
 :selected {
     background-color: black;
     line-color: black;
     target-arrow-color: black;
-    source-arrow-color: black;
+    source-arrow-color: red;
+}
+
+:touch {
+    border-width: 2px;
 }
 
 
-`;
+`; /* js string end */
\ No newline at end of file

app/serializers/application.js

 import JSONSerializer from 'ember-data/serializers/json';
 
 export default JSONSerializer.extend({
-
+    serialize: function(record, options) {
+        options = options || {};
+        options.includeId = true;
+        return this._super.call(this, record, options); // Get default serialization
+    }
 });
\ No newline at end of file