Merge pull request #15 from dcombslinkedin/master

Reformatting nodes and links to use lines instead of curves between n…

Author: rwjblue

app/components/basic-tree.js

@@ -9,6 +9,11 @@ const { run, get, inject } = Ember;
 
 const DURATION = 500;
 
+// The offset amount (in px) from the left or right side of a node
+// box to offset lines between nodes, so the lines don't come right
+// up to the edge of the box.
+const NODE_OFFSET_SIZE = 50; 
+
 // copied these functions temporarily from `broccoli-viz` here:
 // https://github.com/ember-cli/broccoli-viz/blob/master/lib/node-by-id.js
 
@@ -49,6 +54,25 @@ export default Ember.Component.extend({
 
     let g = svg.append("g");
 
+    // Compute the width of a line of text. For now we'll fake it
+    // by assuming a constant char width. Add 20 for 'padding'.
+    // TODO: convert to the real line size based on the real characters.
+    function computeLineWidth(str) {
+      const CHAR_WIDTH = 5;
+      let val = str.length * CHAR_WIDTH + 20;
+      return val;
+    }
+
+    // Given a node, compute the width of the box needed to hold
+    // the text of the element, by computing the max of the widths
+    // of all the text lines.
+    function computeNodeWidth(d) {
+      return Math.max(computeLineWidth(d.data.label.name),
+                      computeLineWidth(`total: ${(d.value / 1000000).toFixed(2)}`),
+                      computeLineWidth(`self: ${(d.data._stats.time.self / 1000000).toFixed(2)}`),
+                      computeLineWidth(`node id: ${d.data._id}`));
+    }
+
     let root = hierarchy(graphNode, node => {
       let children = [];
       for (let child of node.adjacentIterator()) {
@@ -61,14 +85,47 @@ export default Ember.Component.extend({
 
       return children;
     })
-      .sum(d => d._stats.time.self);
+    .sum(d => d._stats.time.self)
+    .each(d => d.computedWidth = computeNodeWidth(d));
+
+    // For each node height (distance above leaves, which are height = 0)
+    // keep track of the maximum cell width at that height and then use that
+    // to compute the desired X position for all the nodes at that height.
+    let nodeHeightData = [];
+
+    root.each((d) => {
+      let heightData = nodeHeightData[d.height];
+      if (heightData === undefined) {
+        heightData = {maxWidth: d.computedWidth, x: 0 }
+        nodeHeightData[d.height] = heightData;
+      } else if (heightData.maxWidth < d.computedWidth) {
+        heightData.maxWidth = d.computedWidth;
+      }
+    });
+
+    // Now that we have the maxWidth data for all the heights, compute
+    // the X position for all the cells at each height.
+    // Each height except the root will have NODE_OFFSET_SIZE on the front.
+    // Each height except the leaves (height=0) will have NODE_OFFSET_SIZE after it.
+    // We have to iterate through the list in reverse, since height 0
+    // has its X value calculated last.
+    let currX = 0;
+
+    for (let i = nodeHeightData.length - 1; i >= 0; i--) {
+      let item = nodeHeightData[i];
+      item.x = currX;
+      currX = currX + item.maxWidth + (2 * NODE_OFFSET_SIZE);
+    }
 
     // for debugging
     self.root = root;
 
+    // Create the graph. The nodeSize() is [8,280] (width, height) because we 
+    // want to change the orientation of the graph from top-down to left-right.
+    // To do that we reverse X and Y for calculations and translations.
     let graph = cluster()
-      .separation((a,b) => a.parent == b.parent ? 4 : 8)
-      .nodeSize([8, 180]);
+      .separation(() => 8)
+      .nodeSize([9, 280]);
 
     function update(source) {
       graph(root);
@@ -78,6 +135,18 @@ export default Ember.Component.extend({
         .selectAll(".node")
         .data(nodes, d => d.data.id);
 
+      // The graph is laid out by graph() as vertically oriented
+      // (the root is at the top). We want to show it as horizontally
+      // oriented (the root is at the left). In addition, we want
+      // each 'row' of nodes to show up as a column with the cells
+      // aligned on their left edge at the cell's 0 point.
+      // To do all this, we'll flip the d.x and d.y values when translating
+      // the node to its position.
+      root.each(d => d.y = nodeHeightData[d.height].x);
+
+      // For the 'enter' set, create a node for each entry.
+      // Move the node to the computed node point (remembering
+      // that X and Y are reversed so we get a horizontal graph).
       let nodeEnter = node
         .enter()
         .append("g")
@@ -95,42 +164,69 @@ export default Ember.Component.extend({
           update(d);
         });
 
-      // we want to wrap the next few text lines in a rect
-      // but alignment is annoying, punting for now...
-      //
-      // nodeEnter.append("rect")
-      //   .attr('x', '-75')
-      //   .attr('y', '-1.5em')
-      //   .attr('width', '75px')
-      //   .attr('height', "3em")
-      //   .attr('stroke', "black")
-      //   .attr('stroke-width', 1)
-      //   .style('fill', "#fff");
+      // Draw the node in a box
+      nodeEnter.append("rect")
+         .attr('x', 0)
+         .attr('y', '-2em')
+         .attr('width', function(d) {
+            return d.computedWidth;
+         })
+         .attr('height', "4em")
+         .attr('stroke', "black")
+         .attr('stroke-width', 1)
+         .style('fill', "#fff");
+
+      // Draw a box in a separate color for the first line as
+      // a 'title'. 
+      nodeEnter.append("rect")
+         .attr('x', 0)
+         .attr('y', '-2em')
+         .attr('width', function(d) {
+            return d.computedWidth;
+         })
+         .attr('height', "1em")
+         .attr('stroke', "black")
+         .attr('stroke-width', 1)
+         .style('fill', "#000000");
 
       nodeEnter
         .append("text")
-        .attr("dy", '0.0em')
-        .style("text-anchor", function(d) { return d.children ? "end" : "start"; })
+        .attr('text-anchor', 'middle')
+        .attr("x", d => d.computedWidth/2)
+        .attr("y", '-1.7em')
+        .attr("class", "nodetitle")
+        .attr("font-weight", "bold")
         .text(function(d) {
-          return `${d.data.label.name} (${d.data._id})`;
+          return `${d.data.label.name}`;
         });
 
       nodeEnter
         .append("text")
-        .attr("dy", '1.1em')
-        .style("text-anchor", function(d) { return d.children ? "end" : "start"; })
+        .attr('text-anchor', 'middle')
+        .attr("x", d => d.computedWidth/2)
+        .attr("y", '-0.4em')
         .text(function(d) {
           return `total: ${(d.value / 1000000).toFixed(2)}`;
         });
 
       nodeEnter
         .append("text")
-        .attr("dy", '2.1em')
-        .style("text-anchor", function(d) { return d.children ? "end" : "start"; })
+        .attr('text-anchor', 'middle')
+        .attr("x", d => d.computedWidth/2)
+        .attr("y", '0.8em')
         .text(function(d) {
           return `self: ${(d.data._stats.time.self / 1000000).toFixed(2)}`;
         });
 
+      nodeEnter
+        .append("text")
+        .attr('text-anchor', 'middle')
+        .attr("x", d => d.computedWidth/2)
+        .attr("y", '2.0em')
+        .text(function(d) {
+          return `node id: ${d.data._id}`;
+        });
+
       // update exiting node locations
       node
         .transition()
@@ -147,6 +243,10 @@ export default Ember.Component.extend({
         })
         .remove();
 
+      // Create all the links between the various nodes. Each node
+      // will have the link from an earlier node (higher height)
+      // come into the 0 point for the node, and the links to lower
+      // height nodes start at the right edge of the node (+ NODE_OFFSET_SIZE).
       let link = g
         .selectAll(".link")
         .data(links, d => d.target.data.id);
@@ -156,20 +256,28 @@ export default Ember.Component.extend({
         .append("path")
         .attr("class", "link")
         .attr("d", function(d) {
+          let sourceExitY = d.source.y + d.source.computedWidth + NODE_OFFSET_SIZE;
+          let targetEntranceY = d.target.y - NODE_OFFSET_SIZE;
+          
           return "M" + d.target.y + "," + d.target.x
-            + "C" + (d.source.y + 50) + "," + d.target.x
-            + " " + (d.source.y + 50) + "," + d.source.x
-            + " " + d.source.y + "," + d.source.x;
+            + "L" + targetEntranceY + "," + d.target.x
+            + " " + sourceExitY + "," + d.target.x
+            + " " + sourceExitY + "," + d.source.x
+            + " " + (sourceExitY - NODE_OFFSET_SIZE) + "," + d.source.x;
         });
 
       link
         .transition()
         .duration(DURATION)
         .attr("d", function(d) {
+          let sourceExitY = d.source.y + d.source.computedWidth + NODE_OFFSET_SIZE;
+          let targetEntranceY = d.target.y - NODE_OFFSET_SIZE;
+          
           return "M" + d.target.y + "," + d.target.x
-            + "C" + (d.source.y + 50) + "," + d.target.x
-            + " " + (d.source.y + 50) + "," + d.source.x
-            + " " + d.source.y + "," + d.source.x;
+            + "L" + targetEntranceY + "," + d.target.x
+            + " " + sourceExitY + "," + d.target.x
+            + " " + sourceExitY + "," + d.source.x
+            + " " + (sourceExitY - NODE_OFFSET_SIZE) + "," + d.source.x;
         });
 
       // update exiting link locations

app/components/slow-node-times.js

@@ -13,17 +13,31 @@ function selfTime(node) {
       return value;
     }
   }
+  return 0;
 }
 
-function nodeTime(node) {
-  let nodeTotal = 0;
-  for (let childNode of node.dfsIterator((n) => n.label.broccoliNode)) {
-    nodeTotal += selfTime(childNode);
+// Given a node, compute the total time taken by the node
+// and its children (by summing the total time of the children
+// and adding the self time of the node). Return that value,
+// and assign it to the _stats.time.plugin attribute of the node.
+// Note: we skip the non-broccoliNodes except at the beginning
+// (the root of the tree is not a broccoliNode, but we want to
+// proceed to its children
+function computeNodeTimes(node) {
+  var total = selfTime(node);
+
+  for (let childNode of node.adjacentIterator()) {
+    if (childNode.label.broccoliNode) {
+      total += computeNodeTimes(childNode);
+    }
   }
 
-  return nodeTotal;
+  Ember.set(node._stats.time, 'plugin', total);
+
+  return total;
 }
 
+
 export default Ember.Component.extend({
   graph: inject.service(),
 
@@ -34,29 +48,32 @@ export default Ember.Component.extend({
 
   nodes: computed('data', 'filter', 'pluginNameFilter', 'groupByPluginName', function() {
     let data = this.get('data');
+
     let nodes = [];
 
-    if (!data) { return nodes; }
+    if (!data) {
+      return nodes;
+    }
+
+    computeNodeTimes(data);  // start at root node of tree (which is not a broccoliNode)
 
     for (let node of data.dfsIterator()) {
       if (node.label.broccoliNode) {
         nodes.push(node);
-        if (!node._stats.time.plugin) {
-          node._stats.time.plugin = nodeTime(node);
-        }
       }
     }
 
     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;
+        return (node.label.broccoliNode &&
+                (pluginNameFilter === node.label.broccoliPluginName ||
+                 pluginNameFilter === 'undefined' && node.label.broccoliPluginName === undefined));
       });
     }
 
+    // Note: the following is also gathering stats for the items that
+    // have no broccoliPluginName (the 'name' is undefined).
     let groupByPluginName = this.get('groupByPluginName');
     if (groupByPluginName) {
       let pluginNameMap = nodes.reduce((memo, node) => {
@@ -65,9 +82,10 @@ export default Ember.Component.extend({
         memo[pluginName].time += node._stats.time.plugin;
         memo[pluginName].count++;
         return memo;
-      }, {})
+      }, {});
 
       nodes = [];
+      
       for (let pluginName in pluginNameMap) {
         nodes.push({
           groupedByPluginName: true,
@@ -82,6 +100,36 @@ export default Ember.Component.extend({
     return nodes;
   }).readOnly(),
 
+  pluginNames: computed('nodes', function() {
+    let nodes = this.get('nodes');
+
+    if (!nodes || nodes.length === 0) {
+      return [];
+    }
+
+    // If the first item in the list is an object with
+    // 'groupedByPluginName' = true, we just need to pull
+    // off the label as the plugin name. If not, we need
+    // to create a map of the plugin names and return that.
+    let pluginNames = [];
+    
+    if (nodes[0].groupedByPluginName === true) {
+      pluginNames = nodes.map(node => node.label.name);
+    } else {
+      let pluginNameMap = nodes.reduce((memo, node) => {
+        let pluginName = node.label.broccoliPluginName;
+        memo[pluginName] = pluginName;
+        return memo;
+      }, {});
+
+      pluginNames = Object.keys(pluginNameMap);
+    }
+
+    pluginNames.sort();
+
+    return pluginNames;
+  }).readOnly(),
+
   sortedNodes: computed('nodes', 'sortDescending', function() {
     let sortDescending = this.get('sortDescending');
     return this.get('nodes').sort((a, b) => {
@@ -118,6 +166,10 @@ export default Ember.Component.extend({
 
     toggleTime() {
       this.toggleProperty('sortDescending');
+    },
+
+    selectFilter(value) {
+      this.set('pluginNameFilter', (value === 'clearFilter' ? undefined : value));
     }
   }
 });