Refactor to use graph service, and heimdalljs-graph.

Author: Robert Jackson

app/components/basic-tree.js

@@ -5,54 +5,39 @@ import { select, event } from 'd3-selection';
 import { tree, cluster, hierarchy } from 'd3-hierarchy';
 import { zoom, zoomIdentity } from 'd3-zoom';
 
-const { run, get } = Ember;
+const { run, get, inject } = Ember;
 
 const DURATION = 500;
 
 // copied these functions temporarily from `broccoli-viz` here:
 // https://github.com/ember-cli/broccoli-viz/blob/master/lib/node-by-id.js
-function nodesById(nodes) {
-  var result = new Array(nodes.length);
-  nodes.forEach(function(node) {
-    result[node.id] = node;
-  });
-  return result;
-}
 
 export default Ember.Component.extend({
   classNames: ['basic-tree'],
 
+  graph: inject.service(),
+
   init() {
     this._super(...arguments);
 
-    this._lastGraphPath = null;
     this._graphData = null;
   },
 
   didReceiveAttrs() {
     let graphData = get(this, 'graphData');
 
     if (this._lastGraphData !== graphData && graphData) {
-      this.processRawData(graphData);
+      run.schedule('render', this, this.drawTree, graphData);
 
       this._lastGraphData = graphData;
     }
   },
 
-  processRawData(response) {
-    this._graphData = {
-      nodesById: nodesById(response.nodes),
-      nodes: response.nodes
-    };
-
-    run.schedule('render', this, this.drawTree, this._graphData);
-  },
-
   nodeFilter(node) {
     return node.label.broccoliNode;
   },
 
-  drawTree(data) {
+  drawTree(graphNode) {
     let svgContainer = this.element.querySelector('.svg-container');
     svgContainer.innerHTML = '';
 
@@ -64,12 +49,19 @@ export default Ember.Component.extend({
 
     let g = svg.append("g");
 
-    let root = hierarchy(data.nodes[0], (node) => {
-      return node.children
-        .map((childId) => data.nodesById[childId])
-        .filter(this.nodeFilter);
+    let root = hierarchy(graphNode, (node) => {
+      let children = [];
+      for (let child of node.adjacentIterator()) {
+        if (this.nodeFilter && !this.nodeFilter(child)) {
+          continue;
+        }
+
+        children.push(child);
+      }
+
+      return children;
     })
-        .sum(d => d.stats.time.self);
+        .sum(d => d._stats.time.self);
 
     // make debugging easier, this is dumb though
     self.root = root;
@@ -122,7 +114,7 @@ export default Ember.Component.extend({
         .attr("dy", '0.0em')
         .style("text-anchor", function(d) { return d.children ? "end" : "start"; })
         .text(function(d) {
-          return d.data.label.name;
+          return `${d.data.label.name} (${d.data._id})`;
         });
 
       nodeEnter
@@ -138,7 +130,7 @@ export default Ember.Component.extend({
         .attr("dy", '2.1em')
         .style("text-anchor", function(d) { return d.children ? "end" : "start"; })
         .text(function(d) {
-          return `self: ${(d.data.stats.time.self / 1000000).toFixed(2)}`;
+          return `self: ${(d.data._stats.time.self / 1000000).toFixed(2)}`;
         });
 
       // update exiting node locations

app/components/slow-node-times.js

@@ -1,8 +1,9 @@
 import Ember from 'ember';
-import heimdallGraph from 'heimdalljs-graph';
 
 const {
-  computed
+  computed,
+  getOwner,
+  inject
 } = Ember;
 
 function selfTime(node) {
@@ -23,54 +24,57 @@ function nodeTime(node) {
 }
 
 export default Ember.Component.extend({
+  graph: inject.service(),
+
   nodes: computed('data', 'filter', 'pluginNameFilter', 'groupByPluginName', function() {
     let data = this.get('data');
     if (!data) { return []; }
 
     let nodes = [];
-    let graph = heimdallGraph.loadFromJSON(data);
 
-    for (let node of graph.dfsIterator()) {
+    for (let node of data.dfsIterator()) {
       if (node.label.broccoliNode) {
-        nodes.push({
-          label: node.label,
-          time: nodeTime(node)
-        })
+        nodes.push(node);
+        if (!node._stats.time.plugin) {
+          node._stats.time.plugin = nodeTime(node);
+        }
       }
     }
 
-    //let groupByPluginName = this.get('groupByPluginName');
-    //let pluginName = this.get('pluginNameFilter');
-    // nodes = data.nodes.filter((node) => {
-    //   if (!node.label.broccoliNode) { return false; }
-    //   if (pluginName && node.label.broccoliPluginName !== pluginName) { return false; }
-
-    //   return true;
-    // })
-
-    // if (groupByPluginName) {
-    //   let pluginNameMap = nodes.reduce((memo, node) => {
-    //     let pluginName = node.label.broccoliPluginName;
-    //     memo[pluginName] = memo[pluginName] || { count: 0, time: 0 };
-    //     memo[pluginName].time += node.stats.time.self;
-    //     memo[pluginName].count++;
-    //     return memo;
-    //   }, {})
-
-    //   nodes = [];
-    //   for (let pluginName in pluginNameMap) {
-    //     nodes.push({
-    //       label: { name: pluginName, broccoliPluginName: pluginNameMap[pluginName].count },
-    //       stats: {
-    //         time: { self: pluginNameMap[pluginName].time}
-    //       }
-    //     });
-    //   }
-    // }
+    let pluginNameFilter = this.get('pluginNameFilter');
+    if (pluginNameFilter) {
+      nodes = nodes.filter((node) => {
+        if (!node.label.broccoliNode) { return false; }
+        if (node.label.broccoliPluginName !== pluginNameFilter) { return false; }
+
+        return true;
+      });
+    }
+
+    let groupByPluginName = this.get('groupByPluginName');
+    if (groupByPluginName) {
+      let pluginNameMap = nodes.reduce((memo, node) => {
+        let pluginName = node.label.broccoliPluginName;
+        memo[pluginName] = memo[pluginName] || { count: 0, time: 0 };
+        memo[pluginName].time += node._stats.time.plugin;
+        memo[pluginName].count++;
+        return memo;
+      }, {})
+
+      nodes = [];
+      for (let pluginName in pluginNameMap) {
+        nodes.push({
+          label: { name: pluginName, broccoliPluginName: pluginNameMap[pluginName].count },
+          _stats: {
+            time: { plugin: pluginNameMap[pluginName].time }
+          }
+        });
+      }
+    }
 
     let sortedNodes = nodes
         .sort((a, b) => {
-          return b.time - a.time;
+          return b._stats.time.plugin - a._stats.time.plugin;
         });
 
     return sortedNodes;
@@ -80,10 +84,13 @@ export default Ember.Component.extend({
     let nodes = this.get('nodes');
 
     return nodes.reduce(function(previousValue, node){
-      return previousValue + node.time;
+      return previousValue + node._stats.time.plugin;
     }, 0);
   }),
 
   actions: {
+    'focus-node'(node) {
+      this.get('graph').selectNode(node);
+    }
   }
 });

app/controllers/index.js

@@ -2,19 +2,19 @@ import Ember from 'ember';
 import fetch from "ember-network/fetch";
 import config from '../config/environment';
 
-export default Ember.Controller.extend({
-  init() {
-    this._super(...arguments);
+const {
+  inject
+} = Ember;
 
-    this.graphData = null;
-  },
+export default Ember.Controller.extend({
+  graph: inject.service(),
 
   actions: {
     parseFile(event) {
       let reader = new FileReader();
       reader.onload = (e) => {
         var contents = e.target.result;
-        this.set('graphData', JSON.parse(contents));
+        this.get('graph').setGraph(JSON.parse(contents));
       };
 
       reader.readAsText(event.target.files[0]);
@@ -26,7 +26,7 @@ export default Ember.Controller.extend({
           return response.json();
         })
         .then((response) => {
-          this.set('graphData', response);
+          this.get('graph').setGraph(JSON.parse(contents));
         });
     }
   }

app/controllers/selected-node.js

@@ -0,0 +1,9 @@
+import Ember from 'ember';
+
+const {
+  inject
+} = Ember;
+
+export default Ember.Controller.extend({
+  graph: inject.service()
+})

app/controllers/slow-nodes.js

@@ -1,17 +1,18 @@
 import Ember from 'ember';
 
+const {
+  inject
+} = Ember;
+
 export default Ember.Controller.extend({
-  init() {
-    this._super(...arguments);
-    this.data = null;
-  },
+  graph: inject.service(),
 
   actions: {
     parseFile(event) {
       let reader = new FileReader();
       reader.onload = (e) => {
         var contents = e.target.result;
-        this.set('data', JSON.parse(contents));
+        this.get('graph').setGraph(JSON.parse(contents));
       };
 
       reader.readAsText(event.target.files[0]);

app/router.js

@@ -7,6 +7,7 @@ const Router = Ember.Router.extend({
 });
 
 Router.map(function() {
+  this.route('selected-node');
   this.route('slow-nodes');
 });
 

app/services/graph.js

@@ -0,0 +1,20 @@
+import Ember from 'ember';
+import heimdallGraph from 'heimdalljs-graph';
+
+const {
+  getOwner
+} = Ember;
+
+export default Ember.Service.extend({
+  setGraph(data) {
+    let graph = heimdallGraph.loadFromJSON(data);
+
+    this.set('data', data);
+    this.set('graph', graph);
+  },
+
+  selectNode(node) {
+    this.set('selectedNode', node);
+    getOwner(this).lookup('router:main').transitionTo('selected-node');
+  }
+});

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

@@ -5,17 +5,17 @@
 <table>
   <thead>
     <tr>
-      <td>Annotation</td>
-      <td>Additional Details</td>
-      <td>Time</td>
+      <td>Description</td>
+      <td>{{if groupByPluginName "Count" "Plugin Name"}}</td>
+      <td>Time (ms)</td>
     </tr>
   </thead>
   <tbody>
     {{#each nodes as |node|}}
-      <tr>
+      <tr onclick={{action 'focus-node' node}}>
         <td>{{node.label.name}}</td>
         <td>{{node.label.broccoliPluginName}}</td>
-        <td>{{ns-to-ms node.time}}</td>
+        <td>{{ns-to-ms node._stats.time.plugin}}</td>
       </tr>
     {{/each}}
   </tbody>

app/templates/index.hbs

@@ -15,4 +15,4 @@
 {{! basic-tree graphData=graphData}}
 
 {{! useful for testing... }}
-{{ basic-tree graphData=graphData}}
+{{basic-tree graphData=graph.graph}}

app/templates/selected-node.hbs

@@ -0,0 +1 @@
+{{basic-tree graphData=graph.selectedNode nodeFilter=null}}