Merge pull request #12 from rwjblue/fixes

Fixes

Author: rwjblue

app/components/basic-tree.js

@@ -42,14 +42,14 @@ export default Ember.Component.extend({
     svgContainer.innerHTML = '';
 
     let svg = select(svgContainer)
-        .append("svg")
-        .attr("preserveAspectRatio", "xMinYMin meet")
-        .attr("viewBox", "0 0 300 300")
-        .classed("svg-content", true);
+      .append("svg")
+      .attr("preserveAspectRatio", "xMinYMin meet")
+      .attr("viewBox", "0 0 300 300")
+      .classed("svg-content", true);
 
     let g = svg.append("g");
 
-    let root = hierarchy(graphNode, (node) => {
+    let root = hierarchy(graphNode, node => {
       let children = [];
       for (let child of node.adjacentIterator()) {
         if (this.nodeFilter && !this.nodeFilter(child)) {
@@ -61,41 +61,39 @@ export default Ember.Component.extend({
 
       return children;
     })
-        .sum(d => d._stats.time.self);
+      .sum(d => d._stats.time.self);
 
-    // make debugging easier, this is dumb though
+    // for debugging
     self.root = root;
 
     let graph = cluster()
-        .separation((a,b) => {
-          return a.parent == b.parent ? 4 : 8;
-        })
-        .nodeSize([8, 180]);
+      .separation((a,b) => a.parent == b.parent ? 4 : 8)
+      .nodeSize([8, 180]);
 
     function update(source) {
       graph(root);
       let nodes = root.descendants();
       let links = root.links();
       let node = g
-          .selectAll(".node")
-          .data(nodes, d => d.data.id);
+        .selectAll(".node")
+        .data(nodes, d => d.data.id);
 
       let nodeEnter = node
-          .enter()
-          .append("g")
-          .attr("class", 'node')
-          .attr("transform", d => `translate(${d.y},${d.x})`)
-          .on('click', (d) => {
-            // Toggle children on click.
-            if (d.children) {
-              d._children = d.children;
-              d.children = null;
-            } else {
-              d.children = d._children;
-              d._children = null;
-            }
-            update(d);
-          });
+        .enter()
+        .append("g")
+        .attr("class", 'node')
+        .attr("transform", d => `translate(${d.y},${d.x})`)
+        .on('click', (d) => {
+          // Toggle children on click.
+          if (d.children) {
+            d._children = d.children;
+            d.children = null;
+          } else {
+            d.children = d._children;
+            d._children = null;
+          }
+          update(d);
+        });
 
       // we want to wrap the next few text lines in a rect
       // but alignment is annoying, punting for now...
@@ -150,8 +148,8 @@ export default Ember.Component.extend({
         .remove();
 
       let link = g
-          .selectAll(".link")
-          .data(links, d => d.target.data.id);
+        .selectAll(".link")
+        .data(links, d => d.target.data.id);
 
       link
         .enter()

app/components/flame-graph.js

@@ -40,24 +40,23 @@ export default Ember.Component.extend({
   },
 
   convert(rawData) {
-    let child, node, subTree, _i, _len, _ref;
-
-    node = {
+    let node = {
       value: rawData._stats.time.self,
       treeValue: rawData._stats.time.self,
       name: rawData._label.name + (rawData._label.broccoliPluginName ? ' (' + rawData._label.broccoliPluginName + ')' : ''),
       stats: rawData._stats,
       children: []
     };
+
     if (!rawData._children) {
       return node;
     }
 
     let treeValue = node.treeValue;
-    _ref = rawData._children;
-    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-      child = _ref[_i];
-      subTree = this.convert(child);
+    let _ref = rawData._children;
+    for (let _i = 0, _len = _ref.length; _i < _len; _i++) {
+      let child = _ref[_i];
+      let subTree = this.convert(child);
       if (subTree) {
         node.children.push(subTree);
         treeValue += subTree.treeValue;
@@ -70,11 +69,10 @@ export default Ember.Component.extend({
   },
 
   drawFlame(data) {
-    let _this = this;
     let profile = this.convert(data);
-
     let indent = -1;
-    let objToString = function(obj) {
+
+    let objToString = obj => {
       indent++;
       let str = '';
       let pad = "&nbsp;";
@@ -90,7 +88,7 @@ export default Ember.Component.extend({
               let padded = pad.repeat(5).substring(0, pad.length * 5 - obj[p].toString().length * 6) + obj[p];
               str += padded;
             } else if (p === 'time') {
-              let time = _this.formatTime(obj[p]);
+              let time = this.formatTime(obj[p]);
               let padded = ' ' + pad.repeat(8).substring(0, pad.length * 8 - time.length * 6) + time + '<br/>';
               str += padded;
             }
@@ -101,10 +99,10 @@ export default Ember.Component.extend({
       return str;
     };
 
-    let tooltip = function(d) {
-      let time = _this.formatTime(d.data.treeValue);
-      let percent = " [" + (((d.data.treeValue / _this.get('totalTime')) * 100).toFixed(1)) + "%]";
-      let self = " (self: " + _this.formatTime(d.data.stats.time.self) + ")";
+    let tooltip = d => {
+      let time = this.formatTime(d.data.treeValue);
+      let percent = " [" + (((d.data.treeValue / this.get('totalTime')) * 100).toFixed(1)) + "%]";
+      let self = " (self: " + this.formatTime(d.data.stats.time.self) + ")";
       return d.data.name + "<br/>" + time + percent + self + "<br/>" + objToString(d.data.stats);
     };
 

app/components/slow-node-times.js

@@ -27,14 +27,17 @@ function nodeTime(node) {
 export default Ember.Component.extend({
   graph: inject.service(),
 
-  sortDescending: true,
+  init() {
+    this._super(...arguments);
+    this.sortDescending = true;
+  },
 
   nodes: computed('data', 'filter', 'pluginNameFilter', 'groupByPluginName', function() {
     let data = this.get('data');
-    if (!data) { return []; }
-
     let nodes = [];
 
+    if (!data) { return nodes; }
+
     for (let node of data.dfsIterator()) {
       if (node.label.broccoliNode) {
         nodes.push(node);
@@ -77,25 +80,26 @@ export default Ember.Component.extend({
     }
 
     return nodes;
-  }),
+  }).readOnly(),
 
   sortedNodes: computed('nodes', 'sortDescending', function() {
+    let sortDescending = this.get('sortDescending');
     return this.get('nodes').sort((a, b) => {
-      if (this.get('sortDescending')) {
+      if (sortDescending) {
         return b._stats.time.plugin - a._stats.time.plugin;
       } else {
         return a._stats.time.plugin - b._stats.time.plugin;
       }
     });
-  }),
+  }).readOnly(),
 
   totalTime: computed('nodes', function() {
     let nodes = this.get('nodes');
 
     return nodes.reduce(function(previousValue, node){
       return previousValue + node._stats.time.plugin;
     }, 0);
-  }),
+  }).readOnly(),
 
   actions: {
     'focus-node'(node) {

app/controllers/graph.js

@@ -13,6 +13,7 @@ export default Controller.extend({
   route: computed.alias('router.currentPath'),
 
   init() {
+    this._super(...arguments);
     this.set('router', getOwner(this).lookup('router:main'));
   }
 });

app/controllers/slow-nodes.js

@@ -10,7 +10,7 @@ export default Ember.Controller.extend({
   actions: {
     parseFile(event) {
       let reader = new FileReader();
-      reader.onload = (e) => {
+      reader.onload = e => {
         var contents = e.target.result;
         this.get('graph').setGraph(JSON.parse(contents));
       };

app/styles/app.css

@@ -79,3 +79,6 @@ body > [class="ember-view"],
   cursor: pointer;
 }
 
+.td-time {
+  text-align: right;
+}

app/templates/components/slow-node-times.hbs

@@ -11,7 +11,7 @@
     <div class="level-item">
       <p class="control">
         <label class="checkbox">
-          {{input type="checkbox" checked=groupByPluginName}}
+          <input type="checkbox" checked={{groupByPluginName}} onchange={{action (mut groupByPluginName) value="target.checked"}}>
           Group by Plugin Name
         </label>
       </p>
@@ -24,7 +24,7 @@
     <tr>
       <td style="width: 65%">Description</td>
       <td>{{if groupByPluginName "Count" "Plugin Name"}}</td>
-      <td>
+      <td class="td-time">
         <a href="#" class="nodes-table_toggle" {{action "toggleTime"}}>Time (ms) <i class="fa fa-caret-{{if sortDescending 'down' 'up'}}"></i></a>
       </td>
     </tr>
@@ -34,8 +34,8 @@
     {{#each sortedNodes as |node|}}
       <tr class="table-row" {{action 'toggleDetailsForNode' node}}>
         <td>{{node.label.name}}</td>
-        <td>{{node.label.broccoliPluginName}}</td>
-        <td>{{ns-to-ms node._stats.time.plugin}}</td>
+        <td class="table-row-plugin-name">{{node.label.broccoliPluginName}}</td>
+        <td class="td-time">{{ns-to-ms node._stats.time.plugin}}</td>
       </tr>
       {{#if node.showDetails}}
         <tr>

app/utils/d3-flame-graphs-v4/d3-flame-graph.js

@@ -5,29 +5,28 @@ import d3Tip from 'd3-tip';
 import { partition, hierarchy } from 'd3-hierarchy';
 import 'd3-transition';
 
-let indexOf = [].indexOf || function(item) {
-    for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; }
-    return -1;
-  };
-
-let getClassAndMethodName = function(fqdn) {
-  let tokens;
+function getClassAndMethodName(fqdn) {
   if (!fqdn) {
     return "";
   }
-  tokens = fqdn.split(".");
+  let tokens = fqdn.split(".");
   return tokens.slice(tokens.length - 2).join(".");
-};
+}
 
 // Return a vector (0.0 -> 1.0) that is a hash of the input string.
 // The hash is computed to favor early characters over later ones, so
 // that strings with similar starts have similar vectors. Only the first
 // 6 characters are considered.
-let hash = function(name) {
-  let i, j, maxHash, mod, ref, ref1, result, weight;
-  ref = [0, 0, 1, 10], result = ref[0], maxHash = ref[1], weight = ref[2], mod = ref[3];
+function hash(name) {
+  let ref = [0, 0, 1, 10];
+  let result = ref[0];
+  let maxHash = ref[1];
+  let weight = ref[2];
+  let mod = ref[3];
+
   name = getClassAndMethodName(name).slice(0, 6);
-  for (i = j = 0, ref1 = name.length - 1; 0 <= ref1 ? j <= ref1 : j >= ref1; i = 0 <= ref1 ? ++j : --j) {
+
+  for (let i = 0, j = 0, ref1 = name.length - 1; 0 <= ref1 ? j <= ref1 : j >= ref1; i = 0 <= ref1 ? ++j : --j) {
     result += weight * (name.charCodeAt(i) % mod);
     maxHash += weight * (mod - 1);
     weight *= 0.7;
@@ -37,7 +36,7 @@ let hash = function(name) {
   } else {
     return result;
   }
-};
+}
 
 const FlameGraphUtils = {
   // augments each node in the tree with the maximum distance
@@ -58,9 +57,7 @@ const FlameGraphUtils = {
       node.augmented = true;
       return node;
     }
-    let childSum = children.reduce((function(sum, child) {
-      return sum + child.value;
-    }), 0);
+    let childSum = children.reduce((sum, child) => sum + child.value, 0);
     if (childSum < node.value) {
       children.push({
         value: node.value - childSum,
@@ -72,6 +69,7 @@ const FlameGraphUtils = {
     node.augmented = true;
     return node;
   },
+
   partition(data) {
     let d3partition = partition();
 
@@ -89,6 +87,7 @@ const FlameGraphUtils = {
       });
     return d3partition(root).descendants();
   },
+
   hide(nodes, unhide) {
     if (unhide === null) {
       unhide = false;
@@ -134,7 +133,8 @@ const FlameGraphUtils = {
     });
   }
 };
-class FlameGraph {
+
+export default class FlameGraph {
   constructor(selector, root, debug) {
     this._selector = selector;
     this._generateAccessors(['margin', 'cellHeight', 'zoomEnabled', 'zoomAction', 'tooltip', 'tooltipPlugin', 'color', 'labelFunction']);
@@ -226,7 +226,7 @@ class FlameGraph {
     if (this.tip) {
       this.tip.hide();
     }
-    if (indexOf.call(this._ancestors, node) >= 0) {
+    if (this._ancestors.indexOf(node) >= 0) {
       this._ancestors = this._ancestors.slice(0, this._ancestors.indexOf(node));
     } else {
       this._ancestors.push(this._root);
@@ -399,14 +399,14 @@ class FlameGraph {
       .attr('class', 'label')
       .style('font-size', this.fontSize + "em")
       .transition().attr('dy', (this.fontSize / 2) + "em").attr('x', (function() {
-      return function(d) {
-        return attrs.x(d) + 2;
-      };
-    })(this)).attr('y', (function(_this) {
-      return function(d, idx) {
-        return attrs.y(d, idx) + _this.cellHeight() / 2;
-      };
-    })(this)).text(attrs.text);
+        return function(d) {
+          return attrs.x(d) + 2;
+        };
+      })(this)).attr('y', (function(_this) {
+        return function(d, idx) {
+          return attrs.y(d, idx) + _this.cellHeight() / 2;
+        };
+      })(this)).text(attrs.text);
     return this;
   }
 
@@ -546,5 +546,3 @@ class FlameGraph {
     return results;
   }
 }
-
-export default FlameGraph;