added entity information on right sidebar

app/components/architecture-viewer.js

@@ -9,7 +9,7 @@ export default Ember.Component.extend({
     themes: Object.keys(Themes),
     layoutAlgorithms: [
         'cose',
-        //'cose-bilkent', // broken - see https://github.com/cytoscape/cytoscape.js-cose-bilkent/issues/18
+        // 'cose-bilkent', // broken - see https://github.com/cytoscape/cytoscape.js-cose-bilkent/issues/18
         'cola',
         'grid',
         'concentric',

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

@@ -42,6 +42,7 @@ $node > node { /* compounds. "Nodes" in meta model. $ selects the parent node th
     color: ${theme.nodeTextColor};
     border-color: ${theme.nodeBorderColor};
     font-weight: bold;
+    z-index: 100;
 
 }
 
@@ -64,6 +65,7 @@ $node > node { /* compounds. "Nodes" in meta model. $ selects the parent node th
     line-color: ${theme.arrowColor};
     target-arrow-color: ${theme.arrowColor};
     text-background-color: ${theme.arrowLineColor};
+    text-outline-color:${theme.arrowLineColor};
     text-background-opacity: 1;
     text-background-shape: roundrectangle;
     font-size: 12pt;
@@ -76,6 +78,7 @@ $node > node { /* compounds. "Nodes" in meta model. $ selects the parent node th
     border-color: ${theme.nodeGroupBorderColor};
     border-width: 2px;
     font-weight: bold;
+    z-index: 100;
 }
 
 edge {
@@ -83,7 +86,11 @@ edge {
     color: ${theme.arrowLabelColor};
     font-weight: bold;
     target-arrow-shape: triangle-backcurve;
-    curve-style: bezier; /* supports arrows */
+    curve-style: bezier;/* supports arrow heads*/
+    edge-distances: node-position;
+    z-index: 0;
+
+
     width: data(workload);
 
 }

app/components/entity-details.js

 import Ember from 'ember';
 
 export default Ember.Component.extend({
-    entity: null
+    entity: null,
+
+    filteredProperties: function(){
+        this.debug('entity', this.get('entity'));
+        const properties = [];
+        const entity = this.get('entity');
+        this.get('entity').eachAttribute(
+            (property) => {
+                if(!(property.indexOf('Id') >= 0)){
+                    properties.push({key: property, value: entity.get(property)});
+                }
+                });
+        this.debug('properties', properties);
+        return properties;
+    }.property('entity')
+
 });

app/templates/architectures/single/details.hbs

-Hello Subroute!
-{{entity-details entity=model}}
+{{entity-details entity=model}}
\ No newline at end of file

app/templates/components/entity-details.hbs

-id: {{entity.id}}
-name: {{entity.name}}
-type: {{entity.type}}
-systemId: {{entity.systemId}}
 
-{{log 'entity-details' entity}}
+<table class="table table-hover table-striped">
+  <thead>
+    <tr>
+      <th>Property</th>
+      <th>Value</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+        <td>id</td>
+        <td>{{entity.id}}</td>
+    </tr>
+    {{#each filteredProperties as |property|}}
+    <tr>
+      <td>{{property.key}}</td>
+      <td>{{property.value}}</td>
+    </tr>
+    {{/each}}
+  </tbody>
+</table>