Reload graph on clicking on a vertex.

Close #1.
mattdee123 · Jan 25, 2015 · 3f5ded0 · 3f5ded0
1 parent 2bf9425
commit 3f5ded0
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 114 deletions.
diff --git a/src/main/resources/static/js/app.js b/src/main/resources/static/js/app.js
@@ -6,73 +6,60 @@ WG.filter('urlencode', function() {
 
 WG.config(function($routeProvider) {
   $routeProvider
-  .when('/graph', {
-    templateUrl: '/js/views/graph.html',
-    controller: 'GraphController',
-    reloadOnSearch: false
-  })
-  .when('/algos', {
-    templateUrl: '/js/views/algos.html',
-    controller: 'AlgosController'
-  })
-  .when('/links', {
-    templateUrl: '/js/views/links.html',
-    controller: 'LinksController'
-  })
-  .otherwise({
-    redirectTo: '/algos'
-  });
+    .when('/graph', {
+      templateUrl: '/js/views/graph.html',
+      controller: 'GraphController',
+      reloadOnSearch: false
+    })
+    .when('/algos', {
+      templateUrl: '/js/views/algos.html',
+      controller: 'AlgosController'
+    })
+    .when('/links', {
+      templateUrl: '/js/views/links.html',
+      controller: 'LinksController'
+    })
+    .otherwise({
+      redirectTo: '/algos'
+    });
 });
 
 WG.run(function($rootScope) {
   $rootScope.$on('$routeChangeSuccess', function(event, newRoute) {
-    $rootScope.currentController = newRoute.$$route.controller;
+    if (newRoute && newRoute.$$route) {
+      $rootScope.currentController = newRoute.$$route.controller;
+    }
   });
 });
 
 WG.service('Fetch', function($http) {
   var Fetch = {};
 
-  Fetch.getGraph = function(form, successCallback, errorCallback) {
-    successCallback = successCallback || function() {};
-    errorCallback = errorCallback || function() {};
-    var result = $http({
+  Fetch.getGraph = function(form) {
+    return $http({
       url: '/graph',
       method: 'GET',
       params: form
-    })
-    .success(successCallback)
-    .error(errorCallback);
-    return result;
+    });
   };
 
-  Fetch.getLinks = function(form, successCallback, errorCallback) {
-    successCallback = successCallback || function() {};
-    errorCallback = errorCallback || function() {};
-    var result = $http({
+  Fetch.getLinks = function(form) {
+    return $http({
       url: '/links',
       method: 'GET',
       params: form
     })
-    .success(successCallback)
-    .error(errorCallback);
-    return result;
   };
 
-  Fetch.getShortestPath = function(start, end, successCallback, errorCallback) {
-    successCallback = successCallback || function() {};
-    errorCallback = errorCallback || function() {};
-    var result = $http({
+  Fetch.getShortestPath = function(start, end) {
+    return $http({
       url: '/path',
       method: 'GET',
       params: {
         start: start,
         end: end
       }
-    })
-    .success(successCallback)
-    .error(errorCallback);
-    return result;
+    });
   };
 
   return Fetch;
@@ -81,34 +68,30 @@ WG.service('Fetch', function($http) {
 WG.service('Graph', function() {
   var Graph = {};
 
-  Graph.refresh = function(data) {
+  Graph.refresh = function(data, onBeforeCompute) {
     $('#graph-canvaswidget').remove();
 
     if (!data) {
       return;
     }
 
-    var rgraph = new $jit.RGraph({
+    var rGraph = new $jit.RGraph({
       injectInto: 'graph',
-
       background: {
         numberOfCircles: 100,
         CanvasStyles: {
           strokeStyle: '#555'
         }
       },
-
       Navigation: {
         enable: true,
         zooming: 10,
         panning: true
       },
-
       Node: {
         color: '#0099dd',
         dim: 3
       },
-
       Tips: {
         enable: true,
         type: 'Native',
@@ -118,26 +101,23 @@ WG.service('Graph', function() {
           tip.innerHTML = node.name;
         }
       },
-
       Edge: {
         color: '#0099dd',
         lineWidth: 0.5
       },
-
       Events: {
         enable: true,
         type: 'Native',
         onClick: function(node, eventInfo, e) {
           if (!node || node.nodeFrom) {
             return;
           }
-          rgraph.onClick(node.id, {
+          rGraph.onClick(node.id, {
             duration: 400,
             transition: $jit.Trans.Quad.easeInOut
           });
         }
       },
-
       onPlaceLabel: function(domElement, node) {
         var style = domElement.style;
         style.display = '';
@@ -153,16 +133,17 @@ WG.service('Graph', function() {
         var left = parseInt(style.left, 10);
         var w = domElement.offsetWidth;
         style.left = (left - w / 2) + 'px';
-      }
+      },
+      onBeforeCompute: onBeforeCompute
     });
 
-    rgraph.loadJSON(data);
-    rgraph.graph.eachNode(function (n) {
+    rGraph.loadJSON(data);
+    rGraph.graph.eachNode(function(n) {
       n.getPos().setc(-200, -200);
     });
-    rgraph.compute('end');
-    rgraph.refresh();
-    rgraph.canvas.scale(2, 2);
+    rGraph.compute('end');
+    rGraph.refresh();
+    rGraph.canvas.scale(2, 2);
   };
 
   return Graph;
@@ -172,7 +153,7 @@ WG.directive('tooltip', function() {
   var dir = {};
   dir.restrict = 'A';
   dir.link = function(scope, elem) {
-    $(elem).tooltip({container: 'body', placement: 'right'});
+    elem.tooltip({container: 'body', placement: 'right'});
   };
   return dir;
 });
diff --git a/src/main/resources/static/js/controllers/algos_controller.js b/src/main/resources/static/js/controllers/algos_controller.js
@@ -1,8 +1,4 @@
-/**
- * Algorithms controller. Used on the #/algos page.
- */
-
-WG.controller('AlgosController', function ($scope, $location, $routeParams, $http, Fetch) {
+WG.controller('AlgosController', function($scope, $location, $routeParams, $http, Fetch) {
   $scope.shortestPath = {
     loading: false,
     error: null,
@@ -14,18 +10,16 @@ WG.controller('AlgosController', function ($scope, $location, $routeParams, $htt
   $scope.shortestPath.fetch = function() {
     $scope.shortestPath.loading = true;
     $scope.shortestPath.error = null;
-    Fetch.getShortestPath($scope.shortestPath.start, $scope.shortestPath.end,
-      function(result) {
+    Fetch.getShortestPath($scope.shortestPath.start, $scope.shortestPath.end)
+      .then(function(result) {
         $scope.shortestPath.loading = false;
         $scope.shortestPath.error = null;
-        $scope.shortestPath.result = result;
-      },
-      function(error) {
+        $scope.shortestPath.result = result.data;
+      }, function(error) {
         $scope.shortestPath.loading = false;
-        $scope.shortestPath.error = error;
+        $scope.shortestPath.error = error.data;
         $scope.shortestPath.result = [];
-      }
-    );
+      });
   };
 
   if ($scope.shortestPath.start && $scope.shortestPath.end) {
@@ -53,10 +47,10 @@ WG.controller('AlgosController', function ($scope, $location, $routeParams, $htt
       method: 'GET',
       url: '/api/randomArticle?count=2', // Prevents Angular caching the random article.
     })
-    .success(function(articles) {
-      $scope.shortestPath.start = articles[0];
-      $scope.shortestPath.end = articles[1];
-      $scope.shortestPath.submit();
-    });
+      .success(function(articles) {
+        $scope.shortestPath.start = articles[0];
+        $scope.shortestPath.end = articles[1];
+        $scope.shortestPath.submit();
+      });
   };
 });
diff --git a/src/main/resources/static/js/controllers/graph_controller.js b/src/main/resources/static/js/controllers/graph_controller.js
@@ -13,28 +13,31 @@ WG.controller('GraphController', function($scope, $routeParams, $location, Fetch
     maxArticles: parseInt($routeParams.maxArticles, 10) || 100
   };
 
-  var getGraph = function() {
-    $scope.data.loading = true;
-    $scope.data.basePage = $scope.form.page;
+  var refreshGraph = function(result) {
+    $scope.data.loading = false;
+    $scope.data.graph = result.data;
     $scope.data.error = false;
+    Graph.refresh($scope.data.graph, function(node) {
+      $scope.form.page = node.name;
+      $scope.refresh();
+    });
+  };
+
+  var refreshGraphError = function() {
+    $scope.data.loading = false;
+    $scope.data.graph = {};
+    $scope.data.error = true;
+  };
 
-    Fetch.getGraph($scope.form,
-      function(result) {
-        $scope.data.loading = false;
-        $scope.data.graph = result;
-        $scope.data.error = false;
-        Graph.refresh($scope.data.graph);
-      },
-      function(result) {
-        $scope.data.loading = false;
-        $scope.data.graph = {};
-        $scope.data.error = true;
-      }
-    );
+  var getGraph = function(form) {
+    $scope.data.loading = true;
+    $scope.data.basePage = form.page;
+    $scope.data.error = false;
+    Fetch.getGraph(form).then(refreshGraph, refreshGraphError);
   };
 
   if ($scope.form.page) {
-    getGraph();
+    getGraph($scope.form);
   }
 
   $scope.refresh = function() {
@@ -45,6 +48,6 @@ WG.controller('GraphController', function($scope, $routeParams, $location, Fetch
     $location.search('maxDepth', $scope.form.maxDepth);
     $location.search('maxDegree', $scope.form.maxDegree);
     $location.search('maxArticles', $scope.form.maxArticles);
-    getGraph();
+    getGraph($scope.form);
   };
 });
diff --git a/src/main/resources/static/js/controllers/links_controller.js b/src/main/resources/static/js/controllers/links_controller.js
@@ -1,4 +1,4 @@
-WG.controller('LinksController', function BaseController($scope, $routeParams, $location, Fetch, Graph) {
+WG.controller('LinksController', function BaseController($scope, $routeParams, $location, Fetch) {
   $scope.data = {};
   $scope.form = $scope.form || {};
 
@@ -12,18 +12,16 @@ WG.controller('LinksController', function BaseController($scope, $routeParams, $
     $scope.data.basePage = $scope.form.page;
     $scope.data.error = false;
 
-    Fetch.getLinks($scope.form,
-      function(result) {
+    Fetch.getLinks($scope.form)
+      .then(function(result) {
         $scope.data.loading = false;
-        $scope.data.links = result;
+        $scope.data.links = result.data;
         $scope.data.error = false;
-      },
-      function(result) {
+      }, function(result) {
         $scope.data.loading = false;
         $scope.data.links = {};
-        $scope.data.error = result;
-      }
-    );
+        $scope.data.error = result.data;
+      });
   };
 
   if ($routeParams.page) {
@@ -32,18 +30,17 @@ WG.controller('LinksController', function BaseController($scope, $routeParams, $
     $scope.data.basePage = $scope.form.page;
     $scope.data.error = false;
 
-    Fetch.getLinks($scope.form,
-      function(result) {
+    Fetch.getLinks($scope.form)
+      .then(function(result) {
         $scope.data.loading = false;
-        $scope.data.links = result;
+        $scope.data.links = result.data;
         $scope.data.error = false;
       },
       function(result) {
         $scope.data.loading = false;
         $scope.data.links = {};
-        $scope.data.error = result;
-      }
-    );
+        $scope.data.error = result.data;
+      });
   } else {
     $scope.form.page = '';
     $scope.data.links = {};