possible style

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

@@ -69,7 +69,8 @@ export default Ember.Component.extend({
 
           layout: {
             name: 'cola',
-            padding: 5
+            padding: 5,
+            maxSimulationTime: 1000
           }
         });
     }

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

@@ -3,8 +3,26 @@
     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.
 */
+
+/*https://color.adobe.com/anggo-djago-color-theme-2691053/*/
+const arrowBorderColor = '#002A4A';
+const arrowColor = arrowBorderColor;
+
+
+const nodeTextColor = '#002A4A';
+const nodeColor = '#17607D';
+
+const serviceColor = '#ED8910';
+const serviceTextColor = '#FFFEED';/* '#FFF1CE';*/
+
+const nodeGroupTextColor = nodeTextColor;
+const nodeGroupColor = 'white';
+const borderColor = '#D64700';
+
+
 export default `
 
+
 * {
     font-size: 10pt;
 }
@@ -14,6 +32,10 @@ node { /* all nodes */
     shape: roundrectangle;
     text-valign: center;
     text-halign: center;
+    width: 100px;
+    height: 60px;
+    text-wrap: wrap;
+    text-max-width: 90px;
 }
 
 $node > node { /* compounds. "Nodes" in meta model. $ selects the parent node that has a node instead of the node (as css would) */
@@ -26,14 +48,30 @@ $node > node { /* compounds. "Nodes" in meta model. $ selects the parent node th
 }
 
 [type="node"] {
-    background-color: #CCC;
+    background-color: ${nodeColor};
+    color: ${nodeTextColor};
+    font-weight: bold;
+
+}
+
+[type="serviceInstance"] {
+    background-color: ${serviceColor};
+    color: ${serviceTextColor};
+    font-weight: bold;
+}
+[type="communicationInstance"] {
+    color: #F4EFDC;
+    line-color: ${arrowBorderColor};
+    target-arrow-color: ${arrowColor};
 }
 
 [type="nodeGroup"] {
-    background-color: white;
+    color: ${nodeGroupTextColor};
+    background-color: ${nodeGroupColor};
     border-style: dotted;
-    border-color: #999;
+    border-color: ${borderColor};
     border-width: 2px;
+    font-weight: bold;
 }
 
 edge {
@@ -55,4 +93,4 @@ edge {
 }
 
 
-`; /* js string end */
\ No newline at end of file
+`; /* js string end */