Highlighting chart elements on click
diff --git a/gui/ngXosViews/serviceTopology/bower.json b/gui/ngXosViews/serviceTopology/bower.json
index d942aad..edf419d 100644
--- a/gui/ngXosViews/serviceTopology/bower.json
+++ b/gui/ngXosViews/serviceTopology/bower.json
@@ -16,7 +16,8 @@
],
"dependencies": {
"d3": "~3.5.13",
- "lodash": "~4.0.0"
+ "lodash": "~4.0.0",
+ "angular-animate": "~1.4.9"
},
"devDependencies": {
"jquery": "~2.1.4",
diff --git a/gui/ngXosViews/serviceTopology/src/css/serviceTopology.css b/gui/ngXosViews/serviceTopology/src/css/serviceTopology.css
index c233858..bc952f6 100644
--- a/gui/ngXosViews/serviceTopology/src/css/serviceTopology.css
+++ b/gui/ngXosViews/serviceTopology/src/css/serviceTopology.css
@@ -29,4 +29,73 @@
position: absolute;
top: 20px;
right: 20px;
+}
+
+/* when showing the thing */
+
+.animate.ng-hide-remove {
+ animation:0.5s bounceInRight ease;
+}
+
+/* when hiding the picture */
+.animate.ng-hide-add {
+ animation:0.5s bounceOutRight ease;
+}
+
+/* ANIMATIONS */
+
+@keyframes bounceInRight {
+ from, 60%, 75%, 90%, to {
+ animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+ }
+
+ from {
+ opacity: 0;
+ transform: translate3d(3000px, 0, 0);
+ }
+
+ 60% {
+ opacity: 1;
+ transform: translate3d(-25px, 0, 0);
+ }
+
+ 75% {
+ transform: translate3d(10px, 0, 0);
+ }
+
+ 90% {
+ transform: translate3d(-5px, 0, 0);
+ }
+
+ to {
+ transform: none;
+ }
+}
+
+@keyframes bounceInLeft {
+ from, 60%, 75%, 90%, to {
+ animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+ }
+
+ 0% {
+ opacity: 0;
+ transform: translate3d(-3000px, 0, 0);
+ }
+
+ 60% {
+ opacity: 1;
+ transform: translate3d(25px, 0, 0);
+ }
+
+ 75% {
+ transform: translate3d(-10px, 0, 0);
+ }
+
+ 90% {
+ transform: translate3d(5px, 0, 0);
+ }
+
+ to {
+ transform: none;
+ }
}
\ No newline at end of file
diff --git a/gui/ngXosViews/serviceTopology/src/index.html b/gui/ngXosViews/serviceTopology/src/index.html
index 1312a76..d2f95db 100644
--- a/gui/ngXosViews/serviceTopology/src/index.html
+++ b/gui/ngXosViews/serviceTopology/src/index.html
@@ -14,8 +14,9 @@
<!-- bower:js -->
<script src="vendor/d3/d3.js"></script>
<script src="vendor/lodash/lodash.js"></script>
-<script src="vendor/jquery/dist/jquery.js"></script>
<script src="vendor/angular/angular.js"></script>
+<script src="vendor/angular-animate/angular-animate.js"></script>
+<script src="vendor/jquery/dist/jquery.js"></script>
<script src="vendor/angular-mocks/angular-mocks.js"></script>
<script src="vendor/angular-ui-router/release/angular-ui-router.js"></script>
<script src="vendor/angular-cookies/angular-cookies.js"></script>
diff --git a/gui/ngXosViews/serviceTopology/src/js/main.js b/gui/ngXosViews/serviceTopology/src/js/main.js
index 3a46d61..5fe1896 100644
--- a/gui/ngXosViews/serviceTopology/src/js/main.js
+++ b/gui/ngXosViews/serviceTopology/src/js/main.js
@@ -4,6 +4,7 @@
'ngResource',
'ngCookies',
'ngLodash',
+ 'ngAnimate',
'ui.router',
'xos.helpers'
])
@@ -19,4 +20,4 @@
})
.factory('_', function($window){
return window._;
-});
\ No newline at end of file
+});
diff --git a/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js b/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js
index d0e86b3..b7d1be8 100644
--- a/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js
+++ b/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js
@@ -79,9 +79,7 @@
// Normalize for fixed-depth.
nodes.forEach(function(d) {
- console.log(d);
- // 180 should be based on window.width and max node depth
-
+ // position the child node horizontally
d.y = d.depth * (($window.innerWidth - (serviceTopologyConfig.widthMargin * 2)) / maxDepth);
console.log(d.x);
});
@@ -96,12 +94,12 @@
.attr('transform', function(d) {
// this is the starting position
return 'translate(' + source.y0 + ',' + source.x0 + ')';
- })
- .on('click', click);
+ });
nodeEnter.append('circle')
.attr('r', 1e-6)
- .style('fill', function(d) { return d._children ? 'lightsteelblue' : '#fff'; });
+ .style('fill', function(d) { return d._children ? 'lightsteelblue' : '#fff'; })
+ .on('click', click);
nodeEnter.append('text')
.attr('x', function(d) { return d.children || d._children ? -13 : 13; })
@@ -175,16 +173,22 @@
});
}
- const click = (d) => {
- console.log(d);
- this.selectedService = {
+ this.instances = [];
+ this.slices = [];
+
+ var _this = this;
+ const click = function(d) {
+
+ d3.select(this).attr('r', 30);
+
+ _this.selectedService = {
id: d.id,
name: d.name
};
Slice.query({service: d.id}).$promise
.then(slices => {
- this.instances = null;
- this.slices = slices;
+ _this.instances = [];
+ _this.slices = slices;
})
};
diff --git a/gui/ngXosViews/serviceTopology/src/templates/topology_canvas.tpl.html b/gui/ngXosViews/serviceTopology/src/templates/topology_canvas.tpl.html
index 7806733..afe76eb 100644
--- a/gui/ngXosViews/serviceTopology/src/templates/topology_canvas.tpl.html
+++ b/gui/ngXosViews/serviceTopology/src/templates/topology_canvas.tpl.html
@@ -1,5 +1,5 @@
<div class="service-details">
- <div ng-show="vm.slices.length > 0" class="service-slices">
+ <div class="service-slices animate" ng-hide="vm.slices.length == 0">
<div class="panel panel-info">
<div class="panel-heading">
Slices for service:
@@ -12,7 +12,7 @@
</ul>
</div>
</div>
- <div class="service-instances" ng-show="vm.instances.length > 0">
+ <div class="service-instances animate" ng-hide="vm.instances.length == 0">
<div class="panel panel-warning">
<div class="panel-heading">
Instances: