1. jasonyeo
  2. huluppu
  3. Issues
Issue #2 resolved

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

jasonyeo
repo owner created an issue

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

Comments (1)

  1. jasonyeo reporter

    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.

  2. Log in to comment