Skip to content
Snippets Groups Projects
Commit e590fb2a authored by Mathis Neumann's avatar Mathis Neumann
Browse files

use dummy data for the cola architecture, use css like-syntax

parent 274a42c3
No related branches found
No related tags found
No related merge requests found
......@@ -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
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',
......
// 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
......@@ -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>
......
Hallo Visualisierung {{model}}
\ No newline at end of file
<div class="visualisationContainer">
{{architecture-visualisation-cytoscape graph=model}}
</div>
......@@ -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"
}
}
......@@ -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();
};
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment