Merge pull request #154 from wafers/ac-sigmaenhance

Sigma enhancements
wafers · Aug 22, 2015 · d34fa61 · d34fa61
2 parents 43a30de + 075af7b
commit d34fa61
Show file tree

Hide file tree

Showing 6 changed files with 184 additions and 27 deletions.
diff --git a/client/app/results/details.html b/client/app/results/details.html
@@ -9,7 +9,7 @@ <h1><strong><a href="{{module.url}}">{{module.name}}</a></strong> - <small>{{mod
       <div class="btn-group graph-type">
         <button type="button" class="btn btn-default" ng-click="drawGraph('downloads')">Downloads</button> 
         <button type="button" class="btn btn-default" ng-click="drawGraph('version')">Version</button>
-        <button type="button" class="btn btn-default" ng-click="drawGraph('dependency')">Dependents</button>
+        <button type="button" class="btn btn-default" ng-click="drawGraph('dependency')">Explore</button>
         <button type="button" class="btn btn-default" ng-click="">Keywords</button>
         <button type="button" class="btn btn-default" ng-if="hasSearchResults()" ui-sref="app.results">Back to Search</button>
       </div>
@@ -108,8 +108,25 @@ <h4>Monthly Downloads.</h4>
             </div>
           </form>
         </div>
-        <div ng-switch-when="dependency">
+        <div class="dependency-switch" ng-switch-when="dependency">
           <h4>Modules that list {{module.name}} as a dependency.</h4>
+          <p><span>Instructions:</span> Left click a node to view information. Right click a node to view its analytics page.</p>
+          <div class="target-stats">
+            <h3 ng-if="!selectedModule.name">Selected Module</h3>
+            <h3 ng-if="selectedModule.name">{{selectedModule.name}}</h3>
+            <dl class="dl-horizontal">
+              <dt>Monthly Downloads</dt>
+              <dd>{{selectedModule.monthlyDownloadSum}}</dd>
+              <dt>Last Update</dt>
+              <dd>{{selectedModule.lastUpdate}}</dd>
+              <dt>Latest Version</dt>
+              <dd>{{selectedModule.latestVersion}}</dd>
+              <dt>Starred</dt>
+              <dd>{{selectedModule.starred}}</dd>
+              <dt># of Dependents</dt>
+              <dd>{{selectedModule.dependentsSize}}</dd>
+            </dl>
+          </div>
         </div>
         <div ng-switch-when="version">
           <h4>Version release history.</h4>

diff --git a/client/app/results/details.js b/client/app/results/details.js
@@ -1,6 +1,7 @@
 angular.module('app')
 .controller('DetailsController', ['Graph','ModulePass', '$showdown', '$scope', '$rootScope', '$stateParams', 'Search', 
 function(Graph, ModulePass, $showdown, $scope, $rootScope, $stateParams, Search){  
+  // View variable declarations
   $scope.module = ModulePass.module;
   $scope.selectedGraph = 'downloads'
   $scope.dlForm = {
@@ -11,27 +12,37 @@ function(Graph, ModulePass, $showdown, $scope, $rootScope, $stateParams, Search)
     filter: 'all'
   }
   $scope.readmeMarkdown = '';
+  $scope.selectedModule = Graph.selectedModule;
+
+  // Module Data watchers
+  $scope.$watch(function(){ return Graph.selectedModule }, function(){
+    $scope.selectedModule = Graph.selectedModule;    
+  });
 
   $scope.$watch(function(){ return ModulePass.module }, function(){
     $scope.module = ModulePass.module;
     if($scope.module.downloads) $scope.drawGraph('downloads');
     $scope.readmeMarkdown = $showdown.makeHtml(ModulePass.module.readme)
   });
 
+  // Draw graph function
   $scope.drawGraph = function(type){
     Graph.clearGraph();
     this.selectedGraph = type;
     var width = document.getElementById('graph-container').offsetWidth-25;
 
     if(type === 'version'){
+      // Draw the version graph
       var options = _.pick(this.dlForm, 'startDate', 'endDate');
       options['width'] = width;
       Graph.lineGraph(this.module, options);
     }
     else if(type === 'dependency'){
+      // Draw the dependency graph
       Graph.sigmaGraph(this.module.name);
     }
     else if(type === 'downloads'){
+      // Draw the downloads graph
       var options = this.dlForm;
       options['width'] = width;
       Graph.downloadGraph(this.module.downloads, options);
@@ -80,6 +91,5 @@ function(Graph, ModulePass, $showdown, $scope, $rootScope, $stateParams, Search)
     var client = new ZeroClipboard( document.getElementById('install-link') );
     var client = new ZeroClipboard( document.getElementById('install-link') );
     Graph.clearGraph();
-
   } 
 }]);
diff --git a/client/app/results/services.js b/client/app/results/services.js
@@ -111,7 +111,7 @@ angular.module('app')
           data.latestVersion = Object.keys(data.time).slice(-3)[0];
         } else {
           data.lastUpdate = moment().fromNow();
-          data[i].time = {}
+          data.time = {}
         }
         if(!data.readme) data.readme = "No readme provided";
        that.module = data;
@@ -122,12 +122,16 @@ angular.module('app')
 }])
 
 // Graph service responsible for drawing the sigma, download, and version graphs
-.service('Graph', ['$http', function($http){
+.service('Graph', ['$http', '$location', function($http, $location){
   var margin = {top: 50, right: 10, bottom: 50, left: 80};
   var height = 500 - margin.top - margin.bottom;
 
+  this.selectedModule = {};
+  var graphService = this;
+
   // Clears out the entire graph container
   this.clearGraph = function() {
+    this.selectedModule = {};
     var myNode = document.getElementById("graph-container");
     while (myNode.firstChild) {
         myNode.removeChild(myNode.firstChild);
@@ -140,16 +144,81 @@ angular.module('app')
     $http.post('/relationships', {"data": moduleName})
     .success(function(data){
       var currentGraph = $('#graph-container').attr('data');
-      if(currentGraph === 'dependency'){
+      if(currentGraph === 'dependency'){  // Check to make sure only to render sigma if the dependency graph is still selected
         s = new sigma({ 
                 graph: data,
-                container: 'graph-container',
+                renderer: {
+                  container: document.getElementById('graph-container'),
+                  type: 'canvas'
+                },
                 settings: {
+                  doubleClickEnabled: false,
                   borderSize: 1,
                   autoRescale: false,
-                  labelThreshold: 6.1
+                  labelThreshold: 6.1,
+
+                  //Edge options
+                  minEdgeSize: 0.5,
+                  maxEdgeSize: 4,
+                  enableEdgeHovering: true,
+                  edgeHoverColor: 'edge',
+                  defaultEdgeColor: "#eee",
+                  defaultEdgeHoverColor: "#000",
+                  edgeHoverSizeRatio: 1,
+                  edgeHoverExtremities: true,
                 }
         });
+
+        // s.bind('overEdge outEdge clickEdge doubleClickEdge rightClickEdge', function(e) {
+        //   console.log(e.type, e.data.edge, e.data.captor);
+        // });
+
+        s.bind('clickNode', function(e) {
+          var data = { data : e.data.node.label };
+          $http.post('/detailedSearch', data)
+            .success(function(data){
+              if (data === 'No results found') data = {name: 'No results found'};
+              if (data.downloads) data.downloads = JSON.parse(data.downloads);
+              if (data.time) {
+                data.time = JSON.parse(data.time);
+                data.lastUpdate = moment(data.time.modified).fromNow();
+                data.latestVersion = Object.keys(data.time).slice(-3)[0];
+              } else {
+                data.lastUpdate = moment().fromNow();
+                data.time = {}
+              }
+              graphService.selectedModule = data;
+            })
+            .error(function(data){ console.log('error', data) })
+
+          // console.log(e.data.node.label);
+          // console.log(e.type, e.data.node.label, e.data.captor);
+        });
+
+        s.bind('rightClickNode', function(e) {
+          var node = e.data.node;
+          window.location = "/#/details/"+node.label; // Redirect to the node double clicked
+        });
+
+        s.bind('clickStage', function(e) {
+          // Show instructions
+          console.log(e.data.captor.clientY);
+          console.log(e.data.captor.clientX);
+
+          // if($('#graph-popover').length === 0){
+          //   $('body').prepend('<span id="graph-popover" data-toggle="popover" data-title="Instructions" data-content="Single click on a node to see details. Double click on a node to redirect to that node\'s details page." data-placement="right" data-trigger="focus"></span>');
+          //   $('#graph-popover').popover('show');
+          //   $('#graph-popover').css({
+          //     top: e.data.captor.clientY + 'px', 
+          //     left: e.data.captor.clientX + 'px'
+          //   });
+            // $("#graph-popover").css('top', e.data.captor.clientY + "px");
+            // $("#graph-popover").css('left', e.data.captor.clientX + "px");
+          // }
+        });
+        // s.bind('doubleClickStage rightClickStage', function(e) {
+        //   console.log(e.type, e.data.captor);
+        // });
       }
     })
     .error(function(data){