diff --git a/app/components/architecture-visualisation-cytoscape/component.js b/app/components/architecture-visualisation-cytoscape/component.js index 13f1216af7108022cd7d238c7ef87c40126707da..afef77cd001e8e2846ab7c8e920106333152169c 100644 --- a/app/components/architecture-visualisation-cytoscape/component.js +++ b/app/components/architecture-visualisation-cytoscape/component.js @@ -9,16 +9,18 @@ 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' } } + { data: { id: 'nodeWebnode', label: 'Webnode', type: 'node' } }, + { data: { id: 'nodeLogicnode', label: 'Logicnode', type: 'node' } }, + { data: { id: 'nodeAdapter', label: 'Adapter', type: 'node' } }, + { data: { id: 'nodeDatabase', label: 'Database', type: 'node' } }, + { data: { id: 'serviceInstanceFrontEnd', label: 'Database', type: 'serviceInstance', parent: 'nodeWebnode' } }, + { data: { id: 'serviceInstanceCashDesk', label: 'CashDesk', type: 'serviceInstance', parent: 'nodeLogicnode' } }, + { data: { id: 'serviceInstanceInventory', label: 'Inventory', type: 'serviceInstance' }, parent: 'nodeLogicnode' }, + { data: { id: 'serviceInstanceData', label: 'Data', type: 'serviceInstance', parent: 'nodeLogicnode' } }, + { data: { id: 'serviceInstancePostgresSQL', label: 'PostgresSQL', type: 'serviceInstance', parent: 'nodeDatabase' } }, ], edges: [ - { data: { id: 'ad', source: 'a', target: 'd' } }, - { data: { id: 'eb', source: 'e', target: 'b' } } + { data: { id: 'ad', source: 'a', target: 'd', weight: 100 } }, ] }, init: function()Â { diff --git a/app/components/architecture-visualisation-cytoscape/style.js b/app/components/architecture-visualisation-cytoscape/style.js index 32526168528edfd03604c5dc9f8f4cd223917147..4b08443913db03d277bac02c22190d2860cb79ae 100644 --- a/app/components/architecture-visualisation-cytoscape/style.js +++ b/app/components/architecture-visualisation-cytoscape/style.js @@ -1,33 +1,52 @@ -// you should set syntax highlighting to CSS +/** + you should set syntax highlighting to CSS + this is a .js file, because we can then use static imports which ember-cli can properly build. + Notice that this is only pseudo-css for cytoscape. See the cytoscape.js docs for more info. +*/ export default ` +* { + font-size: 10pt; +} -node { +node { /* all nodes */ content: data(label); + shape: roundrectangle; text-valign: center; text-halign: center; } -$node > node { +$node > node { /* compounds. "Nodes" in meta model. $ selects the parent node that has a node instead of the node (as css would) */ padding-top: 10px; padding-left: 10px; padding-bottom: 10px; padding-right: 10px; text-valign: top; text-halign: center; - background-color: #bbb; + background-color: #CCC; +} + +[type="red"] { + background-color: red; } edge { - target-arrow-shape: triangle; + label: data(label); + target-arrow-shape: triangle-backcurve; + curve-style: bezier; /* supports arrows */ + width: 2px; } :selected { background-color: black; line-color: black; target-arrow-color: black; - source-arrow-color: black; + source-arrow-color: red; +} + +:touch { + border-width: 2px; } -`; +`; /* js string end */ \ No newline at end of file diff --git a/app/serializers/application.js b/app/serializers/application.js index 2e9a06231808046b5719d23a385e1cbd3de0b979..06794343772dbde2115f45246ae77d4346ba77e6 100644 --- a/app/serializers/application.js +++ b/app/serializers/application.js @@ -1,5 +1,9 @@ import JSONSerializer from 'ember-data/serializers/json'; export default JSONSerializer.extend({ - + serialize: function(record, options) { + options = options ||Â {}; + options.includeId = true; + return this._super.call(this, record, options); // Get default serialization + } }); \ No newline at end of file