From e590fb2a49103bd96f35cea20933a668735a6f79 Mon Sep 17 00:00:00 2001
From: Mathis Neumann <mathis@simpletechs.net>
Date: Thu, 16 Jun 2016 19:28:59 +0200
Subject: [PATCH] use dummy data for the cola architecture, use css like-syntax
---
app/adapters/_baseAdapter.js | 2 +-
app/components/.gitkeep | 0
.../component.js} | 55 ++++++-------------
.../style.js | 33 +++++++++++
app/index.html | 2 +-
app/templates/architectures/single.hbs | 4 +-
bower.json | 3 +-
ember-cli-build.js | 2 +
8 files changed, 59 insertions(+), 42 deletions(-)
delete mode 100644 app/components/.gitkeep
rename app/components/{architecture-visualisation-cytoscape.js => architecture-visualisation-cytoscape/component.js} (62%)
create mode 100644 app/components/architecture-visualisation-cytoscape/style.js
diff --git a/app/adapters/_baseAdapter.js b/app/adapters/_baseAdapter.js
index 424b82f..a78d44b 100644
--- a/app/adapters/_baseAdapter.js
+++ b/app/adapters/_baseAdapter.js
@@ -2,7 +2,7 @@ import Ember from 'ember';
import RESTAdapter from 'ember-data/adapters/rest';
export default RESTAdapter.extend({
- host: 'http://localhost:8080',
+ host: 'http://localhost:8080', // TODO: replace with live url
namespace: 'v1',
session: Ember.inject.service()
});
\ No newline at end of file
diff --git a/app/components/.gitkeep b/app/components/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/app/components/architecture-visualisation-cytoscape.js b/app/components/architecture-visualisation-cytoscape/component.js
similarity index 62%
rename from app/components/architecture-visualisation-cytoscape.js
rename to app/components/architecture-visualisation-cytoscape/component.js
index e4d7bb5..5858d31 100644
--- a/app/components/architecture-visualisation-cytoscape.js
+++ b/app/components/architecture-visualisation-cytoscape/component.js
@@ -1,11 +1,26 @@
import Ember from 'ember';
import cytoscape from 'npm:cytoscape';
import cycola from 'npm:cytoscape-cola';
+import cytoscapeStyle from './style';
// import cola from 'npm:webcola';
import _ from 'npm:lodash';
export default Ember.Component.extend({
classNames: ['cytoscapeRenderingSpace'],
+ dummyGraph: {
+ nodes: [
+ { data: { id: 'a', parent: 'b', name: 'Test Service' } },
+ { data: { id: 'b' } },
+ { data: { id: 'c', parent: 'b' } },
+ { data: { id: 'd' } },
+ { data: { id: 'e' } },
+ { data: { id: 'f', parent: 'e' } }
+ ],
+ edges: [
+ { data: { id: 'ad', source: 'a', target: 'd' } },
+ { data: { id: 'eb', source: 'e', target: 'b' } }
+ ]
+ },
init: function()Â {
cycola( cytoscape, cola );
@@ -46,45 +61,9 @@ export default Ember.Component.extend({
boxSelectionEnabled: false,
autounselectify: true,
- style: [
- {
- selector: 'node',
- css: {
- 'content': 'data(id)',
- 'text-valign': 'center',
- 'text-halign': 'center'
- }
- },
- {
- selector: '$node > node',
- css: {
- 'padding-top': '10px',
- 'padding-left': '10px',
- 'padding-bottom': '10px',
- 'padding-right': '10px',
- 'text-valign': 'top',
- 'text-halign': 'center',
- 'background-color': '#bbb'
- }
- },
- {
- selector: 'edge',
- css: {
- 'target-arrow-shape': 'triangle'
- }
- },
- {
- selector: ':selected',
- css: {
- 'background-color': 'black',
- 'line-color': 'black',
- 'target-arrow-color': 'black',
- 'source-arrow-color': 'black'
- }
- }
- ],
+ style: cytoscapeStyle,
- elements: this.get('graph'),
+ elements: this.get('dummyGraph'), // TODO!
layout: {
name: 'cola',
diff --git a/app/components/architecture-visualisation-cytoscape/style.js b/app/components/architecture-visualisation-cytoscape/style.js
new file mode 100644
index 0000000..5cfcb8b
--- /dev/null
+++ b/app/components/architecture-visualisation-cytoscape/style.js
@@ -0,0 +1,33 @@
+// you should set syntax highlighting to CSS
+export default `
+
+
+node {
+ content: data(name);
+ text-valign: center;
+ text-halign: center;
+}
+
+$node > node {
+ padding-top: 10px;
+ padding-left: 10px;
+ padding-bottom: 10px;
+ padding-right: 10px;
+ text-valign: top;
+ text-halign: center;
+ background-color: #bbb;
+}
+
+edge {
+ target-arrow-shape: triangle;
+}
+
+:selected {
+ background-color: black;
+ line-color: black;
+ target-arrow-color: black;
+ source-arrow-color: black;
+}
+
+
+`;
\ No newline at end of file
diff --git a/app/index.html b/app/index.html
index 4763ae7..35d1ce4 100644
--- a/app/index.html
+++ b/app/index.html
@@ -11,7 +11,7 @@
<link rel="stylesheet" href="assets/vendor.css">
<link rel="stylesheet" href="assets/frontend-prototype.css">
- <script src="http://marvl.infotech.monash.edu/webcola/cola.v3.min.js"></script>
+ <!-- <script src="http://marvl.infotech.monash.edu/webcola/cola.v3.min.js"></script> -->
{{content-for "head-footer"}}
</head>
diff --git a/app/templates/architectures/single.hbs b/app/templates/architectures/single.hbs
index 63b43e9..f4a058b 100644
--- a/app/templates/architectures/single.hbs
+++ b/app/templates/architectures/single.hbs
@@ -1 +1,3 @@
-Hallo Visualisierung {{model}}
\ No newline at end of file
+<div class="visualisationContainer">
+ {{architecture-visualisation-cytoscape graph=model}}
+</div>
diff --git a/bower.json b/bower.json
index 826579c..d24ee72 100644
--- a/bower.json
+++ b/bower.json
@@ -6,6 +6,7 @@
"ember-cli-test-loader": "0.2.2",
"ember-qunit-notifications": "0.1.0",
"d3": "^3.5.16",
- "visionmedia-debug": "2.2"
+ "visionmedia-debug": "2.2",
+ "webcola": "^3.1.3"
}
}
diff --git a/ember-cli-build.js b/ember-cli-build.js
index 2537ce2..ac770c2 100644
--- a/ember-cli-build.js
+++ b/ember-cli-build.js
@@ -20,5 +20,7 @@ module.exports = function(defaults) {
// please specify an object with the list of modules as keys
// along with the exports of each module as its value.
+ app.import('bower_components/webcola/WebCola/cola.js');
+
return app.toTree();
};
--
GitLab