listen to clicks on objects in the visualisation

app/components/architecture-viewer.js

@@ -5,6 +5,7 @@ import Themes from './architecture-visualisation-cytoscape/themes';
 
 export default Ember.Component.extend({
     graph: null,
+    entityDetails: null,
     layoutAlgorithm: 'cose',
     theme: Themes[Object.keys(Themes)[0]], // first theme
     themes: Object.keys(Themes),
@@ -27,6 +28,9 @@ export default Ember.Component.extend({
         },
         selectTheme(theme) {
             this.set('theme', Themes[theme]);
+        },
+        graphClick(rawEntity) {
+            this.set('entityDetails', rawEntity);
         }
     }
 });

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

@@ -44,6 +44,23 @@ export default Ember.Component.extend({
           }
         });
 
+        this.rendering.on('click', (event) => {
+            const target = event.cyTarget;
+            const data = target && target.data && target.data();
+            if(data && data.id) {
+                this.debug('clicked on element in graph', data, event);
+                const action = this.get('select');
+                if(action) {
+                    action(data);
+                } else {
+                    this.debug('select action not set, ignoring click');
+                }
+            } else {
+                this.debug('clicked on non-selectable entity', event);
+            }
+
+        });
+
         // just for development purposes - TODO: remove
         window.cy = cytoscape;
         window.cytoscape = this.rendering;

app/templates/components/architecture-viewer.hbs

 <div class="row">
     <div class="col-md-10 visualisationContainer">
-        {{architecture-visualisation-cytoscape graph=graph layoutAlgorithm=layoutAlgorithm theme=theme}}
+        {{architecture-visualisation-cytoscape graph=graph layoutAlgorithm=layoutAlgorithm theme=theme select=(action "graphClick")}}
     </div>
-    <div class="col-md-2">
+    <div class="col-md-2 visualistaionSidebar">
         <div class="form-group">
           <label for="layoutAlgorithm">Layout:</label>
           <select class="form-control" id="layoutAlgorithm" onchange={{action "selectLayoutAlgorithm" value="target.value"}}>
@@ -19,6 +19,11 @@
             {{/each}}
           </select>
         </div>
+
+        {{#if entityDetails}}
+            <h3>Details</h3>
+            {{entityDetails.type}}
+        {{/if}}
     </div>
 </div>