From f51b6f0b730b019f2648d73e606107d8d3e74459 Mon Sep 17 00:00:00 2001 From: Christoph Dornieden <cdor@informatik.uni-kiel.de> Date: Thu, 23 Jun 2016 18:30:12 +0200 Subject: [PATCH] added entity information on right sidebar --- app/components/architecture-viewer.js | 2 +- .../style.js | 9 ++++++- app/components/entity-details.js | 17 ++++++++++++- .../architectures/single/details.hbs | 3 +-- app/templates/components/entity-details.hbs | 25 +++++++++++++++---- 5 files changed, 46 insertions(+), 10 deletions(-) diff --git a/app/components/architecture-viewer.js b/app/components/architecture-viewer.js index 060be55..6a50ce4 100644 --- a/app/components/architecture-viewer.js +++ b/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', diff --git a/app/components/architecture-visualisation-cytoscape/style.js b/app/components/architecture-visualisation-cytoscape/style.js index 0d8ddba..5f674cc 100644 --- a/app/components/architecture-visualisation-cytoscape/style.js +++ b/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); } diff --git a/app/components/entity-details.js b/app/components/entity-details.js index bd26aa6..d62d94f 100644 --- a/app/components/entity-details.js +++ b/app/components/entity-details.js @@ -1,5 +1,20 @@ 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') + }); diff --git a/app/templates/architectures/single/details.hbs b/app/templates/architectures/single/details.hbs index f4b648a..d82cf8b 100644 --- a/app/templates/architectures/single/details.hbs +++ b/app/templates/architectures/single/details.hbs @@ -1,2 +1 @@ -Hello Subroute! -{{entity-details entity=model}} \ No newline at end of file +{{entity-details entity=model}} diff --git a/app/templates/components/entity-details.hbs b/app/templates/components/entity-details.hbs index 541c63a..cd49255 100644 --- a/app/templates/components/entity-details.hbs +++ b/app/templates/components/entity-details.hbs @@ -1,6 +1,21 @@ -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> -- GitLab