1 var labelType, useGradients, nativeTextSupport, animate;
4 var ua = navigator.userAgent,
5 iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
6 typeOfCanvas = typeof HTMLCanvasElement,
7 nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
8 textSupport = nativeCanvasSupport
9 && (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
10 //I'm setting this based on the fact that ExCanvas provides text support for IE
11 //and that as of today iPhone/iPad current text support is lame
12 labelType = (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML';
13 nativeTextSupport = labelType == 'Native';
14 useGradients = nativeCanvasSupport;
15 animate = !(iStuff || !nativeCanvasSupport);
16 console.log({ "labelType":labelType, "useGradients":useGradients, "nativeTextSupport":nativeTextSupport });
21 write: function(text){
23 this.elem = document.getElementById('log');
24 this.elem.innerHTML = text;
25 this.elem.style.left = (500 - this.elem.offsetWidth / 2) + 'px';
29 // http://stackoverflow.com/questions/5199901/how-to-sort-an-associative-array-by-its-values-in-javascript
30 function bySortedValue(obj, comparitor, callback, context) {
32 for (var key in obj) {
33 if (obj.hasOwnProperty(key)) {
34 tuples.push([key, obj[key]]);
38 tuples.sort(comparitor);
41 var length = tuples.length;
42 while (length--) callback.call(context, tuples[length][0], tuples[length][1]);
49 function request_jit_tree(nodeId, level, depth, onComplete){
50 var params = { logarea: 0 };
51 jQuery.getJSON('jit_tree/'+nodeId+'/'+depth, params, onComplete);
58 var tm = new $jit.TM.Squarified({
59 //where to inject the visualization
60 injectInto: 'infovis',
61 //show only one tree level
62 levelsToShow: levelsToShow,
63 //parent box title heights
73 family: 'Tahoma, Verdana, Arial'
75 //enable specific canvas styles
76 //when rendering nodes
83 //Attach left and right click events
86 onClick: function(node) {
87 if(node) tm.enter(node);
89 onRightClick: function() {
92 //change node styles and canvas styles
93 //when hovering a node
94 onMouseEnter: function(node, eventInfo) {
96 //add node selected styles and replot node
97 node.setCanvasStyle('shadowBlur', 7);
98 node.setData('color', '#888');
99 tm.fx.plotNode(node, tm.canvas);
100 tm.labels.plotLabel(tm.canvas, node);
103 onMouseLeave: function(node) {
105 node.removeData('color');
106 node.removeCanvasStyle('shadowBlur');
111 //duration of the animations
117 //add positioning offsets
120 //implement the onShow method to
121 //add content to the tooltip when a node
123 onShow: function(tip, node, isLeaf, domElement) {
124 var data = node.data;
125 var html = "<div class=\"tip-title\">"
126 + (data.title ? data.title : "")
128 + "</div><div class=\"tip-text\">";
131 html += sprintf("Size: %d (%d + %d)<br />", data.self_size+data.kids_size, data.self_size, data.kids_size);
133 if (data.self_size) {
134 html += sprintf("Memory usage:<br />");
135 bySortedValue(data.leaves,
136 function(a, b) { return a[1] - b[1] },
137 function(k, v) { html += sprintf(" %10s: %5d<br />", k, v);
143 html += sprintf("Attributes:<br />");
144 bySortedValue(data.attr,
145 function(a, b) { return a[0] > b[0] ? 1 : a[0] < b[0] ? -1 : 0 },
146 function(k, v) { html += sprintf(" %10s: %5d<br />", k, v);
150 if (data.child_count) {
151 html += sprintf("Children: %d of %d<br />", data.child_count, data.kids_node_count);
153 html += sprintf("Id: %s%s<br />", node.id, data._ids_merged ? data._ids_merged : "");
154 html += sprintf("Depth: %d<br />", data.depth);
155 html += sprintf("Parent: %d<br />", data.parent_id);
157 html += JSON.stringify(data.attr, undefined, 4);
158 //html += JSON.stringify(data, undefined, 4);
160 tip.innerHTML = html;
163 //Implement this method for retrieving a requested
164 //subtree that has as root a node with id = nodeId,
165 //and level as depth. This method could also make a server-side
166 //call for the requested subtree. When completed, the onComplete
167 //callback method should be called.
168 request: function(nodeId, level, onComplete){
169 request_jit_tree(nodeId, level, levelsToShow, function(data) {
170 console.log("Fetched node "+nodeId);
172 onComplete.onComplete(nodeId, data);
174 // XXX workaround jit bug where old tooltip is still shown till the
176 jQuery("#_tooltip").fadeOut("fast");
178 //Add the name of the node in the corresponding label
179 //This method is called once, on label creation and only for DOM labels.
180 onCreateLabel: function(domElement, node){
181 domElement.innerHTML = node.name;
183 // this doesn't work with Label:{} above
184 var style = domElement.style;
186 style.border = '1px solid transparent';
187 domElement.onmouseover = function() {
188 style.border = '1px solid #9FD4FF';
190 domElement.onmouseout = function() {
191 style.border = '1px solid transparent';
197 request_jit_tree(1, 0, levelsToShow, function(data) {
203 //add event to buttons
204 $jit.util.addEvent($jit.id('back'), 'click', function() { tm.out() });
205 $jit.util.addEvent($jit.id('logarea'), 'onchange', function() { tm.refresh() });