Larger label font. workaround jit bug where old tooltip is still shown

[p5sagit/Devel-Size.git] / static / public / tm.js

diff --git a/static/public/tm.js b/static/public/tm.js
index bd689cd..b294728 100644 (file)
--- a/static/public/tm.js
+++ b/static/public/tm.js
@@ -13,6 +13,7 @@ var labelType, useGradients, nativeTextSupport, animate;
   nativeTextSupport = labelType == 'Native';
   useGradients = nativeCanvasSupport;
   animate = !(iStuff || !nativeCanvasSupport);
+  console.log({ "labelType":labelType, "useGradients":useGradients, "nativeTextSupport":nativeTextSupport });
 })();
 
 var Log = {
@@ -25,18 +26,42 @@ var Log = {
   }
 };
 
+// http://stackoverflow.com/questions/5199901/how-to-sort-an-associative-array-by-its-values-in-javascript
+function bySortedValue(obj, comparitor, callback, context) {
+    var tuples = [];
+    for (var key in obj) {
+        if (obj.hasOwnProperty(key)) {
+            tuples.push([key, obj[key]]);
+        }
+    }
+
+    tuples.sort(comparitor);
+
+    if (callback) {
+        var length = tuples.length;
+        while (length--) callback.call(context, tuples[length][0], tuples[length][1]);
+    }
+    return tuples;
+}
+
+
+
+function request_jit_tree(nodeId, level, depth, onComplete){
+    var params = { logarea: 0 };
+    jQuery.getJSON('jit_tree/'+nodeId+'/'+depth, params, onComplete);
+}
+
 
 function init(){
-  //init data
-  //end
+  var levelsToShow = 2;
   //init TreeMap
   var tm = new $jit.TM.Squarified({
     //where to inject the visualization
     injectInto: 'infovis',
     //show only one tree level
-    levelsToShow: 1,
+    levelsToShow: levelsToShow,
     //parent box title heights
-    titleHeight: 11,
+    titleHeight: 14,
     //enable animations
     animate: animate,
     //box offsets
@@ -44,7 +69,7 @@ function init(){
     //use canvas text
     Label: {
       type: labelType,
-      size: 9,
+      size: 10,
       family: 'Tahoma, Verdana, Arial'
     },
     //enable specific canvas styles
@@ -96,19 +121,41 @@ function init(){
       //add content to the tooltip when a node
       //is hovered
       onShow: function(tip, node, isLeaf, domElement) {
-        var html = "<div class=\"tip-title\">" + node.name 
-          + "</div><div class=\"tip-text\">";
         var data = node.data;
+        var html = "<div class=\"tip-title\">"
+          + (data.title ? data.title : "")
+          + " " + data.name
+          + "</div><div class=\"tip-text\">";
 
+        html += "<br />";
         html += sprintf("Size: %d (%d + %d)<br />", data.self_size+data.kids_size, data.self_size, data.kids_size);
+
+        if (data.self_size) {
+            html += sprintf("Memory usage:<br />");
+            bySortedValue(data.leaves,
+                function(a, b) { return a[1] - b[1] },
+                function(k, v) { html += sprintf(" %10s: %5d<br />", k, v);
+            });
+            html += "<br />";
+        }
+
+
+        html += sprintf("Attributes:<br />");
+        bySortedValue(data.attr,
+            function(a, b) { return a[0] > b[0] ? 1 : a[0] < b[0] ? -1 : 0 },
+            function(k, v) { html += sprintf(" %10s: %5d<br />", k, v);
+        });
+        html += "<br />";
+
         if (data.child_count) {
             html += sprintf("Children: %d of %d<br />", data.child_count, data.kids_node_count);
         }
+        html += sprintf("Id: %s%s<br />", node.id, data._ids_merged ? data._ids_merged : "");
         html += sprintf("Depth: %d<br />", data.depth);
         html += sprintf("Parent: %d<br />", data.parent_id);
-        html += sprintf("Id: %s%s<br />", node.id, data._ids_merged ? data._ids_merged : "");
-        html += JSON.stringify(data.attr, undefined, 4) + "<br />";
-        html += JSON.stringify(data.leaves, undefined, 4) + "<br />";
+
+        html += JSON.stringify(data.attr, undefined, 4);
+        //html += JSON.stringify(data, undefined, 4);
 
         tip.innerHTML =  html; 
       }  
@@ -119,46 +166,44 @@ function init(){
     //call for the requested subtree. When completed, the onComplete   
     //callback method should be called.  
     request: function(nodeId, level, onComplete){  
-        if (true) {
-            jQuery.getJSON('jit_tree/'+nodeId+'/1', function(data) {
-                console.log("Node "+nodeId);
+            request_jit_tree(nodeId, level, levelsToShow, function(data) {
+                console.log("Fetched node "+nodeId);
                 console.log(data);
                 onComplete.onComplete(nodeId, data);  
             });
-        }
-        else {
-            var tree = memnodes[0];
-            var subtree = $jit.json.getSubtree(tree, nodeId);  
-            $jit.json.prune(subtree, 2);  
-            onComplete.onComplete(nodeId, subtree);  
-        }
+            // XXX workaround jit bug where old tooltip is still shown till the
+            // mouse moves
+            jQuery("#_tooltip").fadeOut("fast");
     },
     //Add the name of the node in the corresponding label
     //This method is called once, on label creation and only for DOM labels.
     onCreateLabel: function(domElement, node){
         domElement.innerHTML = node.name;
+
+        // this doesn't work with Label:{} above
+        var style = domElement.style;  
+        style.display = '';  
+        style.border = '1px solid transparent';  
+        domElement.onmouseover = function() {  
+            style.border = '1px solid #9FD4FF';  
+        };  
+        domElement.onmouseout = function() {  
+            style.border = '1px solid transparent';  
+        };  
+
     }
   });
-  
-if(true) {
-    jQuery.getJSON('jit_tree/1/1', function(data) {
+
+  request_jit_tree(1, 0, levelsToShow, function(data) {
         console.log(data);
         tm.loadJSON(data);
         tm.refresh();
     });
-}
-else {
-  //var pjson = eval('(' + json + ')');  
-  var pjson = memnodes[0];
-  $jit.json.prune(pjson, 2);
-  console.log(pjson);
-  tm.loadJSON(pjson);
-  tm.refresh();
-}
 
-  //add event to the back button
-  var back = $jit.id('back');
-  $jit.util.addEvent(back, 'click', function() {
-    tm.out();
-  });
+    //add event to buttons
+    $jit.util.addEvent($jit.id('back'), 'click', function() { tm.out() });
+    $jit.util.addEvent($jit.id('logarea'), 'onchange', function() { tm.refresh() });
+
 }
+
+