Visualization of user's network is not interactive when logged in as research profile

[Jason Yeo]

fix the Research Profile so that the visualization of the user's network is interactive

[Jason Yeo]

Fixed. The js code for http://gsnapwebtest.huluppu.net/page/home ( http://gsnapwebtest.huluppu.net/javascripts/_visualization_util.js ) is using a different js code from http://gsnapwebtest.huluppu.net/papers ( http://gsnapwebtest.huluppu.net/javascripts/force_directed.js ).

Therefore both graphs are generated differently and their behaviors on both pages are different. Attached is the diff file for _visualization_util.js

diff --git a/gsnapwebsite/public/javascripts/_visualization_util.js b/gsnapwebsite/public/javascripts/_visualization_util.js
index 3a9131f..f6470f7 100644
--- a/gsnapwebsite/public/javascripts/_visualization_util.js
+++ b/gsnapwebsite/public/javascripts/_visualization_util.js
@@ -1,34 +1,34 @@
 function load_profile_visualization() {
-
-	if (document.getElementById('query')) {
-		init_profile_visualization();
-		show_profile();
-	}
+  if (document.getElementById('query')) {
+    init_profile_visualization();
+    show_profile();
+  }
 }
 
 
 function show_profile() {
-     var term  = document.getElementById('query').value;
-
-   //show waiting icon
-   document.getElementById('infovis').className  = 'waiting';
+  var term  = document.getElementById('query').value;
 
-     new Ajax.Request('/papers/query',{ method:'post',parameters:{q:term}, requestHeaders: {Accept: 'application/json'},  onSuccess: function(data) {
+  //show waiting icon
+  document.getElementById('infovis').className  = 'waiting';
 
-         var json = data.responseText.evalJSON(true);
-         drawNetwork(json);
-        
-        }, onFailure: function(error) {
-		alert('Server error');
-	 }
+  new Ajax.Request('/papers/query',{ 
+    method:'post',
+    parameters:{q:term}, 
+    requestHeaders: {Accept: 'application/json'},
+    onSuccess: function(data) {
+      var json = data.responseText.evalJSON(true);
+      drawNetwork(json);
+    }, 
+    onFailure: function(error) {
+    alert('Server error');
+    }
   });
-
-
 }
 
 function init_profile_visualization(){
   // init ForceDirected
   fd = new $jit.ForceDirected({
     //id of the visualization container
     injectInto: 'infovis',
     //Enable zooming and panning
@@ -63,28 +63,93 @@ function init_profile_visualization(){
       onMouseEnter: function() {
         fd.canvas.getElement().style.cursor = 'move';
       },
       onMouseLeave: function() {
         fd.canvas.getElement().style.cursor = '';
       },
       //Update node positions when dragged
       onDragMove: function(node, eventInfo, e) {
-	if (node.id) {
-	        var pos = eventInfo.getPos();
-	        node.pos.setc(pos.x, pos.y);
-	        fd.plot();
-	}
+        if (node.id) {
+          var pos = eventInfo.getPos();
+          node.pos.setc(pos.x, pos.y);
+          fd.plot();
+        }
       },
       //Implement the same handler for touchscreens
       onTouchMove: function(node, eventInfo, e) {
         $jit.util.event.stop(e); //stop default touchmove event
         this.onDragMove(node, eventInfo, e);
-      }      
-   },
+      },
+      onClick: function (node, eventInfo, e) {
+        //we want to update the #edit-panel div below the graph
+        //with details of the co-authored paper when the edge is 
+        //clicked
+        var edgeIsClicked = node.nodeFrom && node.nodeTo
+        if (edgeIsClicked) {
+          node1 = node.nodeFrom;
+          node2 = node.nodeTo;
+          //reset all nodes and edges first
+          fd.graph.eachNode( function(n) {
+            n.setData('dim', 7, 'end');
+            n.eachAdjacency(function(adj) {
+              if (adj.nodeFrom != node1 && adj.nodeTo != node2) {
+                adj.setDataset('end', {
+                  lineWidth: 0.4,
+                  color: '#23a4ff'
+                });
+                delete adj.selected;
+              } else {
+                if (!node.selected) {
+                  node.setDataset('end', {
+                    lineWidth: 3,
+                    color: '#36acfb'
+                  });
+                  node.selected = true;
+                } else {
+                  delete node.selected;
+                }
+              }
+            });       
+          });
+
+          fd.fx.animate({
+            modes: ['node-property:dim', 
+              'edge-property:lineWidth:color'],
+              duration: 500
+          });
+
+          var pairspan = document.getElementById('pairspan');
+          pairspan.innerHTML = '';
+          var link1 = document.createElement('a');
+          link1.appendChild(document.createTextNode(node1.name));
+          link1.onclick = node1.nameContainer.onclick;
+          
+          var link2 = document.createElement('a');
+          link2.appendChild(document.createTextNode(node2.name));
+          link2.onclick= node2.nameContainer.onclick;
+
+          pairspan.appendChild(document.createTextNode(" of "));
+          pairspan.appendChild(link1);
+          pairspan.appendChild(document.createTextNode(" , "));
+          pairspan.appendChild(link2);
+          pairspan.appendChild(document.createTextNode(" "));
+                      
+          var node_pubs = node.data.publications; //papers id
+          document.getElementById('edit-panel').innerHTML = '';
+          var editpanel = document.getElementById('edit-panel');
+
+          var sorted_pubs = getSortedPublication(node_pubs);
+          generatePublication(editpanel, sorted_pubs, node1, node2);
+
+          //switch tab to co-author edge tab
+          fireClickEvent('a5');     
+        }
+      }
+    },
     //Number of iterations for the FD algorithm
     iterations: 200,
     //Edge length
     levelDistance: 200,
     // This method is only triggered
     // on label creation and only for DOM labels (not native canvas ones).
     onCreateLabel: function(domElement, node){
       // Create a 'name' and 'close' buttons and add them
@@ -96,65 +161,63 @@ function init_profile_visualization(){
       nameContainer.innerHTML = node.name;
       closeButton.className = 'close';
       closeButton.innerHTML = 'x';
       domElement.appendChild(nameContainer);
       //domElement.appendChild(closeButton);
       style.fontSize = "0.8em";
       style.color = "#ddd";
 
-            //Toggle a node selection when clicking
+      node.nameContainer = nameContainer;
+
+      //Toggle a node selection when clicking
       //its name. This is done by animating some
       //node styles like its dimension and the color
       //and lineWidth of its adjacencies.
       nameContainer.onclick = function() {
         //set final styles
-
+        showAuthorDetail(node)
         fd.graph.eachNode(function(n) {
           if(n.id != node.id) { 
-		delete n.selected;
-	  }
+            delete n.selected;
+          }
           n.setData('dim', 7, 'end');
           //set edge property
           n.eachAdjacency(function(adj) {
             adj.setDataset('end', {
               lineWidth: 0.4,
               color: '#23a4ff'
             });
           });
         });
         if(!node.selected) {
           node.selected = true;
-
-		
           node.setData('dim', 17, 'end');
           node.eachAdjacency(function(adj) {
             adj.setDataset('end', {
               lineWidth: 3,
               color: '#36acfb'
             });
             
             n1 = adj.nodeTo;
 
             node.eachAdjacency (function(adj2) {
-                 n2 = adj2.nodeTo;
-                 if (n2.id != n1.id) {
-                     n1.eachAdjacency(function(adj3) {
-                     n3 = adj3.nodeTo;
-                      if (n3.id == n2.id) { 
-                          adj3.setDataset('end', {
-                               lineWidth: 3,
-                               color: '#36acfb'
-                          });
-                      }
-                    });
-
-                 }
-           });
-             
+              n2 = adj2.nodeTo;
+              if (n2.id != n1.id) {
+                n1.eachAdjacency(function(adj3) {
+                  n3 = adj3.nodeTo;
+                    if (n3.id == n2.id) { 
+                      adj3.setDataset('end', {
+                        lineWidth: 3,
+                        color: '#36acfb'
+                      });
+                    }
+                });
+              }
+            });
           });
         } else {
           delete node.selected;
         }
         //trigger animation to final styles
         fd.fx.animate({
           modes: ['node-property:dim',
                   'edge-property:lineWidth:color'],
@@ -164,16 +227,19 @@ function init_profile_visualization(){
         // This is done by traversing the clicked node connections.
         var html = "<h4>" + node.name + "</h4><p> coauthors: ",
             list = [];
         node.eachAdjacency(function(adj){
           if(adj.getData('alpha')) list.push("[" + adj.nodeTo.name + "]");
         });
         //append connections information
         //$jit.id('inner-details').innerHTML = html + list.join(",") + "</p>";
+        
+        //switch tab to author profile tab
+        fireClickEvent('a6');
       };
     },
     // Change node styles when DOM labels are placed
     // or moved.
     onPlaceLabel: function(domElement, node){
       var style = domElement.style;
       var left = parseInt(style.left);
       var top = parseInt(style.top);

I have also made some changes to home.erb. To interact with the graph, we need three more tabs, Co-Author edge tab and the Author Details tab and the Paper Details tab.