extracted network graph to root level

vipra-ui/app/html/articles/index.html

@@ -4,7 +4,7 @@
 
 <ul class="list-unstyled">
   <li ng-repeat="article in articles">
-    <a ui-sref="articles.detail.show({id: article.id})" ng-bind="::article.title"></a>
+    <a ui-sref="articles.show({id: article.id})" ng-bind="::article.title"></a>
   </li>
 </ul>
 

vipra-ui/app/html/articles/detail/show.html → vipra-ui/app/html/articles/show.html

@@ -37,7 +37,7 @@
     <tr>
       <th>Links</th>
       <td>
-        <a ui-sref="articles.detail.network({id:article.id})">Network graph</a>
+        <a ui-sref="network({type:'articles', id:article.id})">Network graph</a>
       </td>
     </tr>
   </tbody>

vipra-ui/app/html/index.html

@@ -11,7 +11,7 @@
       <h4>Latest articles</h4>
       <ul class="list-unstyled">
         <li class="ellipsize" ng-repeat="article in latestArticles">
-          <a ui-sref="articles.detail.show({id:article.id})" ng-bind="article.title"></a>
+          <a ui-sref="articles.show({id:article.id})" ng-bind="article.title"></a>
         </li>
       </ul>
     </div>
@@ -50,7 +50,7 @@
       <h4>Results <query-time/></h4>
       <ul class="list-unstyled search-results">
         <li class="search-result" ng-repeat="article in searchResults">
-          <a ui-sref="articles.detail.show({id:article.id})" ng-bind="article.title"></a>
+          <a ui-sref="articles.show({id:article.id})" ng-bind="article.title"></a>
           <p>
             <span class="text" ng-bind="article.text"></span>
             <br>

vipra-ui/app/html/articles/detail/network.html → vipra-ui/app/html/network.html

-<div class="graph"
-    vis-graph
-    vis-type="article"
-    ng-model="article">
-
+<div class="fullsize navpadding" vis-graph vis-type="type" ng-model="model">
     <div class="graph-legend">
       <span style="color:#BBC9D2">Articles</span><br>
       <span style="color:#DBB234">Topics</span><br>

vipra-ui/app/html/topics/show.html

@@ -18,6 +18,12 @@
       <th>Last modified</th>
       <td ng-bind="::topic.modified"></td>
     </tr>
+    <tr>
+      <th>Links</th>
+      <td>
+        <a ui-sref="network({type:'topics', id:topic.id})">Network graph</a>
+      </td>
+    </tr>
   </tbody>
 </table>
 

vipra-ui/app/js/app.js

@@ -29,6 +29,12 @@
       controller: 'IndexController'
     });
 
+    $stateProvider.state('network', {
+      url: '/network/:type/:id',
+      templateUrl: tplBase + '/network.html',
+      controller: 'NetworkController'
+    });
+
     // states: articles
 
     $stateProvider.state('articles', {
@@ -43,24 +49,12 @@
       controller: 'ArticlesIndexController'
     });
 
-    $stateProvider.state('articles.detail', {
+    $stateProvider.state('articles.show', {
       url: '/:id',
-      abstract: true,
-      template: '<ui-view/>'
-    });
-
-    $stateProvider.state('articles.detail.show', {
-      url: '',
-      templateUrl: tplBase + '/articles/detail/show.html',
+      templateUrl: tplBase + '/articles/show.html',
       controller: 'ArticlesShowController'
     });
 
-    $stateProvider.state('articles.detail.network', {
-      url: '/network',
-      templateUrl: tplBase + '/articles/detail/network.html',
-      controller: 'ArticlesNetworkController'
-    });
-
     // states: topics
 
     $stateProvider.state('topics', {

vipra-ui/app/js/controllers.js

@@ -48,6 +48,27 @@
 
   }]);
 
+  app.controller('NetworkController', ['$scope', '$state', '$stateParams', 'ArticleFactory', 'TopicFactory',
+    function($scope, $state, $stateParams, ArticleFactory, TopicFactory) {
+
+    $scope.type = $stateParams.type;
+
+    var factory;
+    if($stateParams.type === 'articles')
+      factory = ArticleFactory;
+    else if($stateParams.type === 'topics')
+      factory = TopicFactory;
+    else {
+      console.log('unknown network type');
+      return;
+    }
+
+    factory.get({id: $stateParams.id}, function(response) {
+      $scope.model = response.data;
+    });
+
+  }]);
+
   /*
    * Article Controllers
    */
@@ -83,15 +104,6 @@
 
   }]);
 
-  app.controller('ArticlesNetworkController', ['$scope', '$state', '$stateParams', 'ArticleFactory', 'TopicFactory',
-    function($scope, $state, $stateParams, ArticleFactory, TopicFactory) {
-
-    ArticleFactory.get({id: $stateParams.id}, function(response) {
-      $scope.article = response.data;
-    });
-
-  }]);
-
   /*
    * Topic Controllers
    */

vipra-ui/app/js/directives.js

@@ -30,7 +30,7 @@
       restrict: 'E',
       replace: true,
       transclude: true,
-      template: '<a class="article-link" ui-sref="articles.detail.show({id:article.id})"><span ng-bind="article.title"></span><ng-transclude/></a>'
+      template: '<a class="article-link" ui-sref="articles.show({id:article.id})"><span ng-bind="article.title"></span><ng-transclude/></a>'
     }
   });
 
@@ -56,18 +56,18 @@
     };
   });
 
-  app.directive('visGraph', ['$state', 'ArticleFactory', 'TopicFactory',
-    function($state, ArticleFactory, TopicFactory) {
+  app.directive('visGraph', ['$state', '$timeout', 'ArticleFactory', 'TopicFactory',
+    function($state, $timeout, ArticleFactory, TopicFactory) {
 
     return {
       scope: {
         ngModel: '=',
-        visType: '@',
+        visType: '=',
         visData: '=',
         visOptions: '='
       },
       transclude: true,
-      template: '<ng-transclude/><div class="graph" id="visgraph"></div>',
+      template: '<ng-transclude/><div class="fullsize navpadding" id="visgraph"></div>',
       link: function($scope, $element) {
         var id = 0,
             ids = {},
@@ -130,7 +130,10 @@
         };
         
         // on node select
+        var selectTimeout;
         $scope.select = function(props) {
+          $timeout.cancel(selectTimeout);
+          selectTimeout = $timeout(function() {
             var node = $scope.nodes.get(props.nodes[0]);
             if(node && !node.loaded) {
               if(node.type === 'article') {
@@ -181,13 +184,15 @@
               node.loaded = true;
               $scope.nodes.update(node);
             }
+          }, 500);
         };
 
         // on node open
         $scope.open = function(props) {
+          $timeout.cancel(selectTimeout);
           var node = $scope.nodes.get(props.nodes[0]);
           if(node.type === 'article')
-            $state.transitionTo('articles.detail.show', {id:node.article});
+            $state.transitionTo('articles.show', {id:node.article});
           else
             $state.transitionTo('topics.show', {id:node.topic});
         };
@@ -197,7 +202,7 @@
           if(!newVal) return;
 
           // root node
-          if($scope.visType === 'article')
+          if($scope.visType === 'articles')
             nodes.push(articleNode($scope.ngModel));
           else
             nodes.push(topicNode($scope.ngModel));

vipra-ui/app/less/app.less

@@ -101,7 +101,7 @@ body {
 
 .graph {
   position: absolute;
-  top: 10px;
+  top: 50px;
   left: 0;
   right: 0;
   bottom: 50px;
@@ -126,6 +126,19 @@ body {
   cursor: default;
 }
 
+.fullsize {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.navpadding {
+  padding-top: 50px;
+  padding-bottom: 50px;
+}
+
 @-moz-keyframes spin { 100% { -moz-transform: rotateY(360deg); } }
 @-webkit-keyframes spin { 100% { -webkit-transform: rotateY(360deg); } }
 @keyframes spin { 100% { -webkit-transform: rotateY(360deg); transform:rotateY(360deg); } }
\ No newline at end of file