From ea4aedce3acd82e77acec46df9fee2bacce3a18f Mon Sep 17 00:00:00 2001
From: Mathis Neumann <mathis@simpletechs.net>
Date: Tue, 21 Jun 2016 13:18:49 +0200
Subject: [PATCH] listen to clicks on objects in the visualisation
---
app/components/architecture-viewer.js | 4 ++++
.../component.js | 17 +++++++++++++++++
.../components/architecture-viewer.hbs | 9 +++++++--
3 files changed, 28 insertions(+), 2 deletions(-)
diff --git a/app/components/architecture-viewer.js b/app/components/architecture-viewer.js
index be2f110..1396d9f 100644
--- a/app/components/architecture-viewer.js
+++ b/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);
}
}
});
diff --git a/app/components/architecture-visualisation-cytoscape/component.js b/app/components/architecture-visualisation-cytoscape/component.js
index 86f6755..e0de2b8 100644
--- a/app/components/architecture-visualisation-cytoscape/component.js
+++ b/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;
diff --git a/app/templates/components/architecture-viewer.hbs b/app/templates/components/architecture-viewer.hbs
index ce7d54b..f780a96 100644
--- a/app/templates/components/architecture-viewer.hbs
+++ b/app/templates/components/architecture-viewer.hbs
@@ -1,8 +1,8 @@
<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>
--
GitLab