[Issue #270] tweaks to tooltip behaviours; made dots more clickable

data/clock.js

@@ -363,6 +363,58 @@ function updateTime(){
 }
 
 
+/* Visual Effect ===================================== */
+
+/* ********************
+*   When a node in the clock visualization is clicked,
+*       all instances of the same node across the day should be highlighted
+*       all colluded nodes should also be highlighted (differently)
+*/
+document.querySelector('#content').addEventListener('click', function(event){
+    if ( currentVisualization.name == "clock" ){
+        // click could happen on .node or an element inside of .node
+        if (event.target.mozMatchesSelector('.node, .node *')){
+            var node = event.target;
+            while(node.mozMatchesSelector('.node *')){
+                node = node.parentElement;
+            }
+            console.log(node);
+            applyHighlightingEffect(node.getAttribute("data-name"));
+        }
+    }
+},false);
+
+function highlightColludedNode(selection){
+    selection.each(function(){
+        var colludedNode = d3.select(this);
+        if ( colludedNode.classed("source") ){  // this instance of colluded node is a source node
+            colludedNode.classed("colluded-source", true);
+        }
+        if ( colludedNode.classed("target") ){ // this instance of colluded node is a target node
+            colludedNode.classed("colluded-target", true);
+        }
+    });
+}
+
+function applyHighlightingEffect(clickedNodeName){
+    // reset styling effect
+    d3.selectAll("g.node").classed("clicked-node", false)
+                          .classed("colluded-source", false)
+                          .classed("colluded-target", false);
+
+    // highlight all instances of the clicked node(both source and target)
+    d3.selectAll("g[data-name='" + clickedNodeName +"']")
+            .classed("clicked-node", true);
+
+    // find all the colluded sites and highlight all instances of them
+    for ( var key in aggregate.nodeForKey( clickedNodeName ) ){
+        if ( key != clickedNodeName ){
+            d3.selectAll("g[data-name='"+ key +"']").call(highlightColludedNode);
+        }
+    }
+
+}
+
 
 /* for Highlighting and Colouring -------------------- */
 

data/tooltip.js

@@ -13,8 +13,9 @@ function showTooltip(event){
     tooltip.innerHTML = event.target.getAttribute(["data-name"]);
     var rect = event.target.getClientRects()[0];
     var tooltipWidth = tooltip.offsetWidth;
-    tooltip.style.top = (rect.top - 40) + 'px';
+    tooltip.style.top = (rect.top - 45) + 'px';
     tooltip.style.left = (rect.left + (rect.width / 2) - (tooltipWidth / 2)) + 'px';
+    setTooltipTimeout();
     return false;
 }
 
@@ -28,7 +29,7 @@ function d3ShowTooltip(node, idx){
     tooltip.innerHTML = node.name + '<span class="howMany">(&times;' + node.howMany + ')</span>';
     var rect = this.getClientRects()[0];
     var tooltipWidth = tooltip.offsetWidth;
-    tooltip.style.top = (rect.top - 50) + 'px';
+    tooltip.style.top = (rect.top - 55) + 'px';
     tooltip.style.left = (rect.left + (rect.width / 2) - (tooltipWidth / 2)) + 'px';
     return false;
 }
@@ -49,7 +50,7 @@ function timeoutTooltip(){
 }
 
 function hideTooltip(){
-    setTooltipTimeout();
+    timeoutTooltip();
     return false;
 }
 

data/ui.js

@@ -205,7 +205,7 @@ function setZoom(box,canvas){
 */
 var graphZoomInLimit   = { x:300, y:300, w:200, h:300 };
 var graphZoomOutLimit  = { w:4000, h:4000 };
-var clockZoomInLimit   = { w:560, h:400 };
+var clockZoomInLimit   = { w:350, h:250 };
 var clockZoomOutLimit  = { w:2800, h:2800 };
 var mapZoomInLimit     = { w:(2711.3/5), h:(1196.7/5) };
 var mapZoomOutLimit    = { w:2711.3, h:1196.7 };
@@ -314,58 +314,6 @@ document.querySelector(".stage").addEventListener("mouseleave",function(event){
 },false);
 
 
-/* Clock View ===================================== */
-
-function highlightColludedNode(selection){
-    selection.each(function(){
-        var colludedNode = d3.select(this);
-        if ( colludedNode.classed("source") ){  // this instance of colluded node is a source node
-            colludedNode.classed("colluded-source", true);
-        }
-        if ( colludedNode.classed("target") ){ // this instance of colluded node is a target node
-            colludedNode.classed("colluded-target", true);
-        }
-    });
-}
-
-function applyHighlightingEffect(clickedNodeName){
-    // reset styling effect
-    d3.selectAll("g.node").classed("clicked-node", false)
-                          .classed("colluded-source", false)
-                          .classed("colluded-target", false);
-
-    // highlight all instances of the clicked node(both source and target)
-    d3.selectAll("g[data-name='" + clickedNodeName +"']")
-            .classed("clicked-node", true);
-
-    // find all the colluded sites and highlight all instances of them
-    for ( var key in aggregate.nodeForKey( clickedNodeName ) ){
-        if ( key != clickedNodeName ){
-            d3.selectAll("g[data-name='"+ key +"']").call(highlightColludedNode);
-        }
-    }
-
-}
-
-document.querySelector('#content').addEventListener('click', function(event){
-    /*
-    *   When a node in the clock visualization is clicked,
-    *       all instances of the same node across the day should be highlighted
-    *       all colluded nodes should also be highlighted (differently)
-    */
-    if ( currentVisualization.name == "clock" ){
-        // click could happen on .node or an element inside of .node
-        if (event.target.mozMatchesSelector('.node, .node *')){
-            var node = event.target;
-            while(node.mozMatchesSelector('.node *')){
-                node = node.parentElement;
-            }
-            applyHighlightingEffect(node.getAttribute("data-name"));
-        }
-    }
-},false);
-
-
 /* Export ========== */
 
 function exportFormat(connections){
@@ -430,3 +378,6 @@ function legendBtnClickHandler(legendElm){
         }
     });
 }
+
+
+/* Help Section ===================================== */