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

make objects in graph clickable which will trigger detail subroute and sidebar content

parent 02f255de
Branches
No related tags found
No related merge requests found
......@@ -7,7 +7,7 @@ import UrlTemplates from "ember-data-url-templates";
* @return {Adapter} adapter that is used for all metamodel models
*/
export default BaseAdapter.extend(UrlTemplates, {
urlTemplate: '{+host}/{+namespace}/systems{/systemId}/{pathForType}/{/id}',
urlTemplate: '{+host}/{+namespace}/{pathForType}{/id}',
findAllUrlTemplate: '{+host}/{+namespace}/systems{/systemId}/{pathForType}/{?query*}',
urlSegments: {
......
......@@ -9,8 +9,8 @@ import coseBilkent from 'npm:cytoscape-cose-bilkent';
coseBilkent(cytoscape); // register
export default Ember.Component.extend({
theme: null,
layoutAlgorithm: 'cose',
theme: null, // set by architecture-viewer
layoutAlgorithm: null, // set by architecture-viewer
classNames: ['cytoscapeRenderingSpace'],
init: function() {
cycola( cytoscape, window.cola );
......@@ -37,10 +37,10 @@ export default Ember.Component.extend({
layout: {
name: this.get('layoutAlgorithm'),
maxSimulationTime: 1000,
padding: 6,
ungrabifyWhileSimulating: true,
infinite: false
// maxSimulationTime: 1000,
// padding: 6,
// ungrabifyWhileSimulating: true,
// infinite: false
}
});
......
import Ember from 'ember';
export default Ember.Component.extend({
entity: null
});
......@@ -8,7 +8,9 @@ const Router = Ember.Router.extend({
Router.map(function() {
this.route('home', {path: '/'});
this.route('architectures', function() {
this.route('single', {path: '/:systemId'});
this.route('single', {path: '/:systemId'}, function() {
this.route('details', {path: '/:entityType/:entityId'}); // use model properties for automatic matching
});
});
});
......
......@@ -28,5 +28,22 @@ export default Ember.Route.extend({
this.set('loading', false);
return graph;
});
},
actions: {
loadDetails(rawEntity) {
this.debug('loadDetails action', rawEntity);
const entityType = rawEntity.type.toLowerCase();
const entityId = rawEntity.id;
/* I would love to not generate the url first, but there seem to be unknown (to me) assumptions about
* passing object parameters to transitionTo which break with the current path variables.
*/
const url = this.router.generate('architectures.single.details', {
systemId: this.get('session.systemId'),
entityType,
entityId
});
this.transitionTo(url);
}
}
});
import Ember from 'ember';
export default Ember.Route.extend({
model(params) {
return this.store.findRecord(params.entityType.toLowerCase(), params.entityId); // TODO: match entity.type with model names
}
});
{{architecture-viewer graph=model}}
\ No newline at end of file
{{#architecture-viewer graph=model}}
{{!-- show entity details in sidebar if subroute (details) is used --}}
{{outlet}}
{{/architecture-viewer}}
\ No newline at end of file
Hello Subroute!
{{entity-details entity=model}}
\ No newline at end of file
<div class="row">
<div class="col-md-10 visualisationContainer">
{{architecture-visualisation-cytoscape graph=graph layoutAlgorithm=layoutAlgorithm theme=theme select=(action "graphClick")}}
{{architecture-visualisation-cytoscape graph=graph layoutAlgorithm=layoutAlgorithm theme=theme select=(route-action 'loadDetails')}}
</div>
<div class="col-md-2 visualistaionSidebar">
<div class="col-md-2 visualisationSidebar">
<div class="form-group">
<label for="layoutAlgorithm">Layout:</label>
<select class="form-control" id="layoutAlgorithm" onchange={{action "selectLayoutAlgorithm" value="target.value"}}>
......@@ -20,10 +20,8 @@
</select>
</div>
{{#if entityDetails}}
<h3>Details</h3>
{{entityDetails.type}}
{{/if}}
{{!-- this component can be used as a block, show content --}}
{{yield}}
</div>
</div>
id: {{entity.id}}
name: {{entity.name}}
type: {{entity.type}}
systemId: {{entity.systemId}}
{{log 'entity-details' entity}}
import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';
moduleForComponent('entity-details', 'Integration | Component | entity details', {
integration: true
});
test('it renders', function(assert) {
// Set any properties with this.set('myProperty', 'value');
// Handle any actions with this.on('myAction', function(val) { ... });
this.render(hbs`{{entity-details}}`);
assert.equal(this.$().text().trim(), '');
// Template block usage:
this.render(hbs`
{{#entity-details}}
template block text
{{/entity-details}}
`);
assert.equal(this.$().text().trim(), 'template block text');
});
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment