Try not to suck so bad at styles...

Author: Robert Jackson

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

@@ -2,25 +2,30 @@
 <label>Group by Plugin Name{{input type="checkbox" checked=groupByPluginName}}</label>
 <button {{action (action (mut pluginNameFilter) '')}}>Clear</button>
 
-<table>
+<table class="table is-striped">
   <thead>
     <tr>
-      <td>Description</td>
+      <td style="width: 65%">Description</td>
       <td>{{if groupByPluginName "Count" "Plugin Name"}}</td>
       <td>Time (ms)</td>
+      <td>&nbsp;</td>
     </tr>
   </thead>
   <tbody>
     {{#each nodes as |node|}}
-      <tr onclick={{action 'focus-node' node}}>
+      <tr>
         <td>{{node.label.name}}</td>
         <td>{{node.label.broccoliPluginName}}</td>
         <td>{{ns-to-ms node._stats.time.plugin}}</td>
+        <td>
+          <button {{action 'focus-node' node}}>Show Graph</button></td>
       </tr>
     {{/each}}
   </tbody>
-</table>
-
-<div>
-  Total: {{ns-to-ms totalTime}}
-</div>
+  <tfoot>
+    <tr>
+      <td colspan=3 class="has-text-right">Total</td>
+      <td>{{ns-to-ms totalTime}}</td>
+    </tr>
+  </tfoot>
+</table>

ember-cli-build.js

@@ -1,12 +1,16 @@
 /*jshint node:true*/
 /* global require, module */
 var EmberApp = require('ember-cli/lib/broccoli/ember-app');
+var MergeTrees = require('broccoli-merge-trees');
 
 module.exports = function(defaults) {
   var app = new EmberApp(defaults, {
     // Add options here
     trees: {
-      vendor: 'node_modules/heimdalljs-graph'
+      vendor: new MergeTrees([
+        'node_modules/heimdalljs-graph',
+        'node_modules/bulma',
+      ], { overwrite: true })
     }
   });
 
@@ -24,6 +28,7 @@ module.exports = function(defaults) {
   // along with the exports of each module as its value.
 
   app.import('vendor/dist/amd/heimdalljs-graph.js');
+  app.import('vendor/css/bulma.css');
 
   return app.toTree();
 };

package.json

@@ -49,6 +49,8 @@
   },
   "private": true,
   "dependencies": {
+    "broccoli-merge-trees": "^1.2.1",
+    "bulma": "^0.3.1",
     "ember-d3": "^0.3.1",
     "ember-network": "^0.3.1",
     "ember-truth-helpers": "^1.2.0",

yarn.lock

@@ -698,7 +698,7 @@ broccoli-lint-eslint@^2.0.0:
     json-stable-stringify "^1.0.1"
     md5-hex "^1.2.1"
 
-broccoli-merge-trees@^1.0.0, broccoli-merge-trees@^1.1.0, broccoli-merge-trees@^1.1.2, broccoli-merge-trees@^1.1.3:
+broccoli-merge-trees@^1.0.0, broccoli-merge-trees@^1.1.0, broccoli-merge-trees@^1.1.2, broccoli-merge-trees@^1.1.3, broccoli-merge-trees@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/broccoli-merge-trees/-/broccoli-merge-trees-1.2.1.tgz#16a7494ed56dbe61611f6c2d4817cfbaad2a3055"
   dependencies:
@@ -837,6 +837,10 @@ [email protected]:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/builtins/-/builtins-0.0.7.tgz#355219cd6cf18dbe7c01cc7fd2dce765cfdc549a"
 
+bulma@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.3.1.tgz#0166be77e7a5f62ede01b0be3f1e77e954978bd2"
+
 bytes@1:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-1.0.0.tgz#3569ede8ba34315fab99c3e92cb04c7220de1fa8"