[WIP] frontend: Upgrade d3.flameGraph to latest, and upgrade D3 to 4.x

### d3.flameGraph

Originally added in May 2016 as:
- d3.flameGraph [v0.4.2]
- d3.tip [v0.6.7] (its dependency)

At that time, d3.flameGraph required v3.x of d3, which XHGui
already bundled.
The latest version of d3.flameGraph requires v4.x of d4.

Update to:
- d3.flameGraph [v1.0.11-dev]
- d3.tip [v0.7.1] (its dependency)

Preserving two patches:
- d3.flameGraph.js: Override offset to 24px for d3.tip().
- d3.flameGraph.css: Omit d3-flame-graph-tip styles, we have our own.

Change inline script to account for upstream changes:
* Remove redundant 'height' override (matches the default: depth * cellHeight).
* Remove redundant 'sort' override (matches the default: by name ASC).
* Set digits=0 for Xhgui.formatNumber() instead of default digits=2,
  given that the digits are always ".00". This matches the way microsecond
  values are rendered elsewhere in XHGui.

## d3.js

Upgrade to 4.x (v4.0.8 exactly, same as d3.flameGraph uses now).

Apply changes required for D3 version 4 per
<https://github.com/d3/d3/blob/v4.6.0/CHANGES.md>

### xhgui-charts.js
* d3.layout.pie > d3.pie
* d3.time.format > d3.timeFormat

### flamegraph.twig
* 'cubic-in-out' > d3.easeCubic
* tip() html callback: 'name' and 'value are now in d.data.
* tip() html callback: d.dx replaced with d.x0 and d.x1

src/templates/runs/flamegraph.twig

@@ -44,15 +44,14 @@
 <script src="{{ static('js/d3.flameGraph.js') }}"></script>
 <script type="text/javascript">
 
-var width = parseInt($('#chart').css('width'), 10);
+var width = $('#chart').width();
 var cellHeight = 18;
 
 var flameGraph = d3.flameGraph()
-    .height(540)
     .width(width)
     .cellHeight(cellHeight)
     .transitionDuration(750)
-    .transitionEase('cubic-in-out')
+    .transitionEase(d3.easeCubic)
     .sort(true);
 
 var tip = d3.tip()
@@ -61,7 +60,7 @@ var tip = d3.tip()
     .attr('class', 'd3-flame-graph-tip')
     .html(function(d) {
         var units = 'µs';
-        return d.name + " &mdash; " + Xhgui.formatNumber(d.value) + units + ' (' + Math.round(100 * d.dx, 3) + '%)';
+        return d.data.name + " &mdash; " + Xhgui.formatNumber(d.data.value, 0) + units + ' (' + Math.round(100 * (d.x1 - d.x0), 3) + '%)';
     });
 
 flameGraph.tooltip(tip);
@@ -71,12 +70,6 @@ d3.json("{{ url('run.flamegraph.data', {id: profile.id|trim }) }}", function(err
         return console.warn(error);
     }
 
-    flameGraph.height(getDepth(data.data) * cellHeight);
-
-    flameGraph.sort(function (a, b) {
-        return data.sort[a.name] - data.sort[b.name];
-    });
-
     d3.select("#chart")
         .datum(data.data)
         .call(flameGraph);
@@ -102,18 +95,5 @@ $('#flamegraph-reset').on('click', function () {
     flameGraph.resetZoom();
 });
 
-function getDepth (obj) {
-    var depth = 0;
-    if (obj.children) {
-        obj.children.forEach(function (d) {
-            var tmpDepth = getDepth(d)
-            if (tmpDepth > depth) {
-                depth = tmpDepth
-            }
-        })
-    }
-    return 1 + depth
-}
-
 </script>
 {% endblock %}

webroot/css/d3.flameGraph.css

@@ -9,7 +9,7 @@
   cursor: pointer;
 }
 
-.d3-flame-graph .label {
+.d3-flame-graph-label {
   pointer-events: none;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -34,10 +34,6 @@
   font-family: Verdana;
 }
 
-.d3-flame-graph .label {
-  background: transparent;
-}
-
 /**
  * PATCH(xhgui): Remove all .d3-flame-graph-tip styles
  * We have our own tip styles in xhgui.css instead.

webroot/css/xhgui.css

@@ -389,7 +389,7 @@ body .d3-flame-graph rect:hover {
     stroke-width: 1px;
 }
 /* Instead of stroke, change text color on hover */
-body .d3-flame-graph .frame:hover .label {
+body .d3-flame-graph .frame:hover .d3-flame-graph-label {
     color: #fff;
 }
 

webroot/js/d3-tip-index.js

@@ -9,10 +9,8 @@
     define(['d3'], factory)
   } else if (typeof module === 'object' && module.exports) {
     // CommonJS
-    module.exports = function(d3) {
-      d3.tip = factory(d3)
-      return d3.tip
-    }
+    var d3 = require('d3')
+    module.exports = factory(d3)
   } else {
     // Browser global.
     root.d3.tip = factory(root.d3)
@@ -54,24 +52,23 @@
           scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
 
       nodel.html(content)
-        .style({ opacity: 1, 'pointer-events': 'all' })
+        .style('opacity', 1).style('pointer-events', 'all')
 
       while(i--) nodel.classed(directions[i], false)
       coords = direction_callbacks.get(dir).apply(this)
-      nodel.classed(dir, true).style({
-        top: (coords.top +  poffset[0]) + scrollTop + 'px',
-        left: (coords.left + poffset[1]) + scrollLeft + 'px'
-      })
+      nodel.classed(dir, true)
+        .style('top', (coords.top +  poffset[0]) + scrollTop + 'px')
+        .style('left', (coords.left + poffset[1]) + scrollLeft + 'px')
 
-      return tip
-    }
+      return tip;
+    };
 
     // Public - hide the tooltip
     //
     // Returns a tip
     tip.hide = function() {
       var nodel = getNodeEl()
-      nodel.style({ opacity: 0, 'pointer-events': 'none' })
+      nodel.style('opacity', 0).style('pointer-events', 'none')
       return tip
     }
 
@@ -102,7 +99,7 @@
       if (arguments.length < 2 && typeof n === 'string') {
         return getNodeEl().style(n)
       } else {
-        var args =  Array.prototype.slice.call(arguments)
+        var args = Array.prototype.slice.call(arguments)
         d3.selection.prototype.style.apply(getNodeEl(), args)
       }
 
@@ -117,7 +114,7 @@
     // Returns tip or direction
     tip.direction = function(v) {
       if (!arguments.length) return direction
-      direction = v == null ? v : d3.functor(v)
+      direction = v == null ? v : functor(v)
 
       return tip
     }
@@ -129,7 +126,7 @@
     // Returns offset or
     tip.offset = function(v) {
       if (!arguments.length) return offset
-      offset = v == null ? v : d3.functor(v)
+      offset = v == null ? v : functor(v)
 
       return tip
     }
@@ -141,7 +138,7 @@
     // Returns html value or tip
     tip.html = function(v) {
       if (!arguments.length) return html
-      html = v == null ? v : d3.functor(v)
+      html = v == null ? v : functor(v)
 
       return tip
     }
@@ -239,14 +236,9 @@
     }
 
     function initNode() {
-      var node = d3.select(document.createElement('div'))
-      node.style({
-        position: 'absolute',
-        top: 0,
-        opacity: 0,
-        'pointer-events': 'none',
-        'box-sizing': 'border-box'
-      })
+      var node = d3.select(document.createElement('div'));
+      node.style('position', 'absolute').style('top', 0).style('opacity', 0)
+        .style('pointer-events', 'none').style('box-sizing', 'border-box')
 
       return node.node()
     }
@@ -317,6 +309,13 @@
 
       return bbox
     }
+
+    // Private - replace D3JS 3.X d3.functor() function
+    function functor(v) {
+      return typeof v === "function" ? v : function() {
+        return v
+      }
+    }
 
     return tip
   };