modules/yangvisualizer-resources/src/main/resources/yangvisualizer/yangvisualizer.controller.js

   1 define(['app/yangvisualizer/yangvisualizer.module', 'app/yangvisualizer/yangvisualizer.services', 'common/sigmatopology/sigma.directive'], function(yangvisualizer) {
   2
   3   yangvisualizer.register.controller('yangvisualizerCtrl', ['$scope', '$rootScope', '$http', 'YangConfigRestangular','visualizerUtils', 'DesignVisualizerFactory', 'yvConstants',
   4     function ($scope, $rootScope, $http, Restangular, visualizerUtils, DesignVisualizerFactory, yvConstants) {
   5       $rootScope['section_logo'] = 'logo_yangvis';
   6
   7       $scope.currentPath = './assets/views/yangvisualizerCtrl';
   8       $scope.topologyData = { nodes: [], edges: []};
   9       $scope.currentTopologyNode = {};
  10       $scope.filteredNodes = [];
  11       $scope.selectedProperty = null;
  12       $scope.selectedNode = null;
  13       $scope.isSelectedSpecificType = false;
  14       $scope.childrenNodes = {
  15         list: [],
  16         show: true
  17       };
  18       $scope.parentNodes = {
  19         list: [],
  20         show: true
  21       };
  22       $scope.panel = {
  23         show: false
  24       };
  25       $scope.sigma = null;
  26       $scope.triggerResizeSigma = false;
  27       $scope.legend = [];
  28
  29       $scope.sliderValue = 4;
  30       $scope.sliderSettings = yvConstants.sliderSettings;
  31       $scope.clickedNodesHistory = [];
  32
  33       var lastSelectedNode = null,
  34           maxLvlToSHow = 4,
  35           getSlowDownNumFun;
  36
  37       var processingNodesCallback = function() {
  38           $scope.status = {
  39               isWorking: true,
  40               type: 'warning',
  41               msg: 'PROCESSING_NODES'
  42           };
  43       };
  44
  45       var processingNodesSuccessCallback = function() {
  46           $scope.status = {
  47               type: 'success',
  48               msg: 'PROCESSING_NODES_SUCCESS'
  49           };
  50       };
  51
  52       var processingNodesErrorCallback = function(e) {
  53           $scope.status = {
  54               type: 'danger',
  55               msg: 'PROCESSING_NODES_ERROR',
  56               rawMsg: e.toString()
  57           };
  58       };
  59
  60       var expandNodeFunc = function(expandNode, mlts){
  61         var nodeCounter = 0;
  62         expandNode.expand = false;
  63         expandNode.size = expandNode.node.parent !== null ? 7 : 20;
  64         expandNode.label = expandNode.label.substring(expandNode.label.indexOf(']') + 2);
  65         expandNode.node.children.forEach(function(child){
  66           var topoData = visualizerUtils.getTopologyData(child, mlts, false, expandNode.lvl),
  67               edge,
  68               position = -1;
  69
  70           nodeCounter = nodeCounter + topoData.nodes.length;
  71
  72           topoData.nodes.forEach(function(node){
  73             position = -position;
  74             node.x = (expandNode.x + (Math.floor(Math.random() * topoData.nodes.length * 5) + 2)) * position;
  75             node.y = (expandNode.y + (Math.floor(Math.random() * topoData.nodes.length * 5) + 2)) * position;
  76             node.size = node.node.children.length && node.expand ? 12 : 7;
  77             node.parent = child.graphId;
  78             $scope.sigma.graph.addNode(node);
  79           });
  80
  81           edge  = visualizerUtils.getEdge(expandNode.node, child);
  82           $scope.sigma.graph.addEdge(edge);
  83
  84           topoData.links.forEach(function(edge){
  85             $scope.sigma.graph.addEdge(edge);
  86           });
  87         });
  88
  89         var configAtlas = {
  90             adjustSizes: true,
  91             // scalingRatio: 10,
  92             gravity: 1,
  93             slowDown: getSlowDownNumFun(nodeCounter)
  94         };
  95
  96         $scope.sigma.startForceAtlas2(configAtlas);
  97         $scope.setColorScheme(null, $scope.selectedProperty);
  98
  99       };
 100
 101       var collapseNodeFunc = function(collapseNode){
 102         var nodes = $scope.sigma.graph.nodes(),
 103             nodeChildren = visualizerUtils.getAllChildrenArray(collapseNode);
 104
 105
 106             if ( nodeChildren.nodesArray.length ) {
 107               nodeChildren.nodesArray.forEach(function(id){
 108                 $scope.sigma.graph.dropNode(id);
 109               });
 110               collapseNode.expand = true;
 111               collapseNode.label = '['+ nodeChildren.numOfChildren + '] ' + (collapseNode.label.length > 20 ? collapseNode.label.substring(0, 17) + '...' : collapseNode.label);
 112               collapseNode.size = collapseNode.node.parent !== null ? 12 : 20;
 113               collapseNode.labelToShow = collapseNode.label;
 114
 115               var configAtlas = {
 116                   adjustSizes: true,
 117                   // scalingRatio: 10,
 118                   gravity: 1,
 119                   slowDown: getSlowDownNumFun($scope.sigma.graph.nodes().length)
 120               };
 121               $scope.sigma.startForceAtlas2(configAtlas);
 122             }
 123
 124       };
 125
 126       $scope.selectedNodeColor = null;
 127
 128       var selectNode = function(node) {
 129           var selNode = node,
 130               edges = $scope.sigma.graph.edges();
 131           if ( lastSelectedNode ) {
 132               visualizerUtils.clearEdgeColors();
 133               lastSelectedNode.color = $scope.selectedNodeColor ? $scope.selectedNodeColor : lastSelectedNode.color;
 134           }
 135
 136           $scope.selectedNodeColor = selNode.color;
 137           selNode.color = '#ffffff';
 138           lastSelectedNode = selNode;
 139           $scope.selectedNode = selNode.node;
 140           $scope.childrenNodes.list = selNode.node.children.length ? selNode.node.children : [];
 141           $scope.parentNodes.list = visualizerUtils.getParentNodes(selNode.node);
 142           visualizerUtils.updateSelectedEdgesColors(edges, selNode);
 143           selNode.size = selNode.size === 100 ? 100 : selNode.node.parent !== null ? 10 : 20;
 144           $scope.sigma.refresh();
 145           $scope.$apply();
 146       };
 147
 148       var setCameraToNode = function(node){
 149         $scope.sigma.camera.goTo({
 150             x: node['read_cam0:x'],
 151             y: node['read_cam0:y']
 152           });
 153       };
 154
 155
 156       $scope.topologyCustfunc = function(sigmaIstance, getSlowDownNum, dragListener, resize){
 157
 158         if ( resize && lastSelectedNode !== null ) {
 159           lastSelectedNode = visualizerUtils.setDefaultSigmaValues(sigmaIstance, lastSelectedNode);
 160         }
 161
 162         DesignVisualizerFactory.setMainClass();
 163
 164         $scope.sigma = sigmaIstance;
 165         getSlowDownNumFun = getSlowDownNum;
 166
 167         sigmaIstance.bind('clickStage', function(e){
 168           sigmaIstance.killForceAtlas2();
 169         });
 170
 171         sigmaIstance.bind('clickNode', function(e) {
 172             selectNode(e.data.node);
 173             $scope.clickedNodesHistory = [e.data.node.id];
 174         });
 175
 176
 177         sigmaIstance.bind('doubleClickNode', function(e){
 178           var selNode = e.data.node;
 179
 180           $scope.sigma.killForceAtlas2();
 181
 182
 183           setTimeout(function(){
 184             if ( selNode.expand ) {
 185               expandNodeFunc(selNode, $scope.sliderValue);
 186             } else {
 187               collapseNodeFunc(selNode);
 188             }
 189           }, 100);
 190
 191         });
 192
 193         sigmaIstance.bind('overNode', function(e){
 194           var node = e.data.node;
 195
 196           if ( node.labelToShow === null ) {
 197             node.labelToShow = node.label;
 198           }
 199           node.label = node.node.label;
 200           sigmaIstance.refresh();
 201         });
 202
 203         sigmaIstance.bind('outNode', function(e){
 204           var node = e.data.node;
 205
 206           if ( node.labelToShow !== null ) {
 207             if ( !node.expand && node.labelToShow.indexOf(']') ) {
 208               node.label = node.labelToShow.substring(node.labelToShow.indexOf(']') + 1);
 209             } else {
 210               node.label = node.labelToShow;
 211             }
 212
 213           }
 214
 215           node.labelToShow = null;
 216           sigmaIstance.refresh();
 217
 218         });
 219
 220         if ( $scope.selectedProperty ){
 221           $scope.setColorScheme(null, $scope.selectedProperty);
 222         }
 223       };
 224
 225
 226       var updateSliderSettings = function(){
 227         $scope.sliderSettings.to = visualizerUtils.getMaxNodeLvl($scope.currentTopologyNode);
 228         $scope.sliderValue = 4;
 229       };
 230
 231
 232       $scope.loadController = function(){
 233
 234          processingNodesCallback();
 235
 236          visualizerUtils.getAllnodes(function(allNodes){
 237             $scope.filteredNodes = allNodes.filter(function(node){
 238                     return node.nodeType === 1;
 239             });
 240
 241             $scope.currentTopologyNode = $scope.filteredNodes[0];
 242             updateSliderSettings();
 243             $scope.$broadcast('YV_MODEL_CHANGE');
 244
 245             processingNodesSuccessCallback();
 246             $scope.topologyData = visualizerUtils.getTopologyData($scope.currentTopologyNode, $scope.sliderValue);
 247          }, function(e){
 248             processingNodesErrorCallback(e);
 249          });
 250       };
 251
 252
 253
 254       $scope.updateTopologyData = function(mlts, modelChanged){
 255         if ( modelChanged ) {
 256           updateSliderSettings();
 257         }
 258
 259         $scope.topologyData = visualizerUtils.getTopologyData($scope.currentTopologyNode, mlts !== null ? mlts : $scope.sliderValue, true);
 260         $scope.selectedNode = null;
 261         $scope.childrenNodes.list = [];
 262         $scope.parentNodes.list = [];
 263         lastSelectedNode = null;
 264         $scope.expandedNodes = !modelChanged ? $scope.expandedNodes : false;
 265         $scope.legend = [];
 266         $scope.clickedNodesHistory = [];
 267
 268         if ( modelChanged ) {
 269           $scope.selectedProperty = null;
 270           $('.yangVisualizerWrapper div.viewNav li span').removeClass('active').parent().eq(0).find('span').addClass('active');
 271           $scope.$broadcast('YV_MODEL_CHANGE');
 272         }
 273
 274         $scope.isSelectedSpecificType = false;
 275       };
 276
 277       $scope.triggerExpanded = function(nodes,cbk){
 278         if($('#graph-container').hasClass('col-md-12')){
 279             $('#graph-container').removeClass('col-md-12').addClass('col-md-6');
 280         }else{
 281             $('#graph-container').removeClass('col-md-6').addClass('col-md-12');
 282         }
 283
 284         nodes.show = !nodes.show;
 285
 286         if ( angular.isFunction(cbk) ){
 287           cbk();
 288         }
 289       };
 290
 291       $scope.setColorScheme = function(e,property){
 292         $scope.selectedProperty = property !== 'default' ? property : null;
 293
 294         if ( e !== null ) {
 295           $('.yangVisualizerWrapper div.viewNav li span').removeClass('active');
 296           $(e.target).addClass('active');
 297         }
 298
 299         $scope.legend = visualizerUtils.setNodesColor(property, $scope.sigma.graph.nodes(), $scope.currentTopologyNode);
 300         $scope.sigma.refresh();
 301       };
 302
 303       $scope.clickLegend = function(value, key){
 304
 305           if($scope.selectedProperty !== 'default'){
 306               var wasChanged = false;
 307
 308               $scope.sigma.graph.nodes().forEach(function(node){
 309                   if(node.node[$scope.selectedProperty] === key){
 310                       node.size = 100;
 311                       wasChanged = true;
 312                   }else{
 313                       node.size = 10;
 314                   }
 315               });
 316
 317               if(!wasChanged){
 318                   $scope.resetSize();
 319                   $scope.isSelectedSpecificType = false;
 320               }else{
 321                   $scope.isSelectedSpecificType = true;
 322               }
 323
 324               $scope.sigma.refresh();
 325           }
 326       };
 327
 328       $scope.resetSize = function(){
 329           $scope.sigma.graph.nodes().forEach(function(node){
 330               node.size = node.parent === null ? 20 : node.expand ? 12 : 7;
 331           });
 332
 333           $scope.isSelectedSpecificType = false;
 334           $scope.sigma.refresh();
 335       };
 336
 337       $scope.triggerResize = function(){
 338         $scope.triggerResizeSigma = !$scope.triggerResizeSigma;
 339       };
 340
 341       var selectGraphNode = function(node) {
 342           selectNode(node);
 343           setCameraToNode(node);
 344       };
 345
 346       $scope.zoomToNode = function(id){
 347         var nodeToZoom = visualizerUtils.getNodeById($scope.sigma.graph.nodes(), id);
 348         $scope.sigma.killForceAtlas2();
 349
 350         $scope.clickedNodesHistory.push(id);
 351
 352         if( nodeToZoom ) {
 353           selectGraphNode(nodeToZoom);
 354         }
 355       };
 356
 357       $scope.backToNode =  function(){
 358         $scope.clickedNodesHistory.pop();
 359
 360         if ( $scope.clickedNodesHistory.length ){
 361           var nodeId = $scope.clickedNodesHistory[$scope.clickedNodesHistory.length - 1],
 362               nodeObjToBack = visualizerUtils.getNodeById($scope.sigma.graph.nodes(), nodeId);
 363
 364           if ( nodeObjToBack ) {
 365             selectGraphNode(nodeObjToBack);
 366           }
 367         }
 368       };
 369
 370       $scope.expandedNodes = false;
 371       $scope.expandAllNodes = function(){
 372
 373         if ( !$scope.expandedNodes ) {
 374           $scope.updateTopologyData(Infinity);
 375         } else {
 376           $scope.updateTopologyData(null);
 377         }
 378
 379         $scope.expandedNodes = !$scope.expandedNodes;
 380       };
 381
 382       $scope.$on('YV_UPDATE_TOPODATA',function(event, data){
 383         $scope.topologyData = data.topoData;
 384         $scope.sliderValue = data.sv;
 385         console.log('data', data);
 386       });
 387
 388       $scope.$on('YV_UPDATE_CTN', function(event, slider){
 389         visualizerUtils.getTopologyData($scope.currentTopologyNode, slider, true);
 390       });
 391
 392       $scope.loadController();
 393
 394       $scope.__test = {
 395         processingNodesErrorCallback: processingNodesErrorCallback,
 396         processingNodesSuccessCallback: processingNodesSuccessCallback,
 397         processingNodesCallback: processingNodesCallback,
 398         lastSelectedNode: lastSelectedNode,
 399         expandNodeFunc: expandNodeFunc,
 400         collapseNodeFunc: collapseNodeFunc
 401       };
 402
 403   }]);
 404
 405   yangvisualizer.register.controller('layoutCtrl',['$scope', '$rootScope','VizualiserLayoutFactory', function($scope, $rootScope, VizualiserLayoutFactory){
 406
 407     $scope.modelLayout = null;
 408
 409     var configAtlas = {
 410       adjustSizes: true,
 411       gravity: 1
 412     };
 413
 414     $scope.setLayout = function(node){
 415       $scope.modelLayout = VizualiserLayoutFactory.loadLayout($scope.currentTopologyNode);
 416       console.log('$scope.modelLayout', $scope.modelLayout);
 417     };
 418
 419     $scope.saveLayout = function(){
 420       $scope.modelLayout = VizualiserLayoutFactory.saveLayout($scope.currentTopologyNode, $scope.sigma, $scope.sliderValue, $scope.selectedNodeColor);
 421       console.log('$scope.modelLayout', $scope.modelLayout);
 422     };
 423
 424     $scope.loadLayout = function(){
 425       $scope.$emit('YV_UPDATE_CTN', $scope.modelLayout['slider-value']);
 426       var topologyData = VizualiserLayoutFactory.getTopoData($scope.currentTopologyNode, $scope.modelLayout);
 427       $scope.$emit('YV_UPDATE_TOPODATA', { topoData: topologyData, sv: $scope.modelLayout['slider-value'] });
 428     };
 429
 430     $scope.resetLayout = function(){
 431       $scope.sigma.startForceAtlas2(configAtlas);
 432     };
 433
 434     $scope.$on('YV_MODEL_CHANGE', function(){
 435       $scope.setLayout();
 436     });
 437
 438   }]);
 439
 440 });