stackprof 0.2.10 → 0.2.11

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: afa4ecbd5eba7e06625bb12c770da033682539f4
-  data.tar.gz: fc0f0ad1bcc0e1d726c82437a57aa6c0beb8b3e2
+  metadata.gz: 88f62f89ebff2c249b7eaabcb330f12997f09120
+  data.tar.gz: 629071b6584701d830b827e5d4b9b0951eaa0282
 SHA512:
-  metadata.gz: ddb8ed15ef2275231790a475a770a72753fe87aee98fc77d2c7a19d9405228f72832b76f941c84db94bf62fd5a445fb9d3b8e3521f2bc016f6dc170229d56a0e
-  data.tar.gz: b911543ceb1e019086adda7780aa72b48dc6bede83ee99cf746b5cac557f5f9a395c5f88ac3a5f34414e1c1dc8f56c5559e770e8eb355cc9a0c9f7071bb144fe
+  metadata.gz: d02684e9bd77e2b561f626a69a897e1ec2c89b870b30ef54709165cc1debb966a56127f3053d7a27e81cc7c3c62fef50865ebd5bcbfd6d2b28630add6280e479
+  data.tar.gz: 2d5d70aaa53080112d8f794d1d5412cd8225f451f43431f30209e42854b5de8246ff77347ef39496c2b55b447d6cf114116b81dc2eb458adea16a5d9ce03606e

data/.travis.yml

@@ -1,8 +1,8 @@
+sudo: false
 language: ruby
 rvm:
-  - 2.1.8
-  - 2.2.4
-  - 2.3.0
+  - 2.1
+  - 2.2
+  - 2.3
+  - 2.4
   - ruby-head
-script: "bundle exec rake test"
-sudo: false

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    stackprof (0.2.9)
+    stackprof (0.2.11)
 
 GEM
   remote: https://rubygems.org/
@@ -22,3 +22,6 @@ DEPENDENCIES
   mocha (~> 0.14)
   rake-compiler (~> 0.9)
   stackprof!
+
+BUNDLED WITH
+   1.15.4

data/README.md

@@ -318,6 +318,7 @@ Option      | Meaning
 `interval`  | mode-relative sample rate [c.f.](#sampling)
 `aggregate` | defaults: `true` - if `false` disables [aggregation](#aggregation)
 `raw`       | defaults `false` - if `true` collects the extra data required by the `--flamegraph` and `--stackcollapse` report types
+`save_every`| (rack middleware only) write the target file after this many requests
 
 ### todo
 

data/bin/stackprof

@@ -12,7 +12,8 @@ parser = OptionParser.new(ARGV) do |o|
   o.on('--limit [num]', Integer, 'Limit --text, --files, or --graphviz output to N entries'){ |n| options[:limit] = n }
   o.on('--sort-total', "Sort --text or --files output on total samples\n\n"){ options[:sort] = true }
   o.on('--method [grep]', 'Zoom into specified method'){ |f| options[:format] = :method; options[:filter] = f }
-  o.on('--file [grep]', "Show annotated code for specified file\n\n"){ |f| options[:format] = :file; options[:filter] = f }
+  o.on('--file [grep]', "Show annotated code for specified file"){ |f| options[:format] = :file; options[:filter] = f }
+  o.on('--walk', "Walk the stacktrace interactively\n\n"){ |f| options[:walk] = true }
   o.on('--callgrind', 'Callgrind output (use with kcachegrind, stackprof-gprof2dot.py)'){ options[:format] = :callgrind }
   o.on('--graphviz', "Graphviz output (use with dot)"){ options[:format] = :graphviz }
   o.on('--node-fraction [frac]', OptionParser::DecimalNumeric, 'Drop nodes representing less than [frac] fraction of samples'){ |n| options[:node_fraction] = n }
@@ -74,7 +75,7 @@ when :stackcollapse
 when :flamegraph
   report.print_flamegraph
 when :method
-  report.print_method(options[:filter])
+  options[:walk] ? report.walk_method(options[:filter]) : report.print_method(options[:filter])
 when :file
   report.print_file(options[:filter])
 when :files

data/ext/stackprof/stackprof.c

@@ -20,6 +20,7 @@
 typedef struct {
     size_t total_samples;
     size_t caller_samples;
+    int already_accounted_in_total;
     st_table *edges;
     st_table *lines;
 } frame_data_t;
@@ -38,18 +39,27 @@ static struct {
     size_t raw_samples_capa;
     size_t raw_sample_index;
 
+    struct timeval last_sample_at;
+    int *raw_timestamp_deltas;
+    size_t raw_timestamp_deltas_len;
+    size_t raw_timestamp_deltas_capa;
+
     size_t overall_signals;
     size_t overall_samples;
     size_t during_gc;
+    size_t unrecorded_gc_samples;
     st_table *frames;
 
+    VALUE fake_gc_frame;
+    VALUE fake_gc_frame_name;
+    VALUE empty_string;
     VALUE frames_buffer[BUF_SIZE];
     int lines_buffer[BUF_SIZE];
 } _stackprof;
 
 static VALUE sym_object, sym_wall, sym_cpu, sym_custom, sym_name, sym_file, sym_line;
 static VALUE sym_samples, sym_total_samples, sym_missed_samples, sym_edges, sym_lines;
-static VALUE sym_version, sym_mode, sym_interval, sym_raw, sym_frames, sym_out, sym_aggregate;
+static VALUE sym_version, sym_mode, sym_interval, sym_raw, sym_frames, sym_out, sym_aggregate, sym_raw_timestamp_deltas;
 static VALUE sym_gc_samples, objtracer;
 static VALUE gc_hook;
 static VALUE rb_mStackProf;
@@ -120,6 +130,10 @@ stackprof_start(int argc, VALUE *argv, VALUE self)
     _stackprof.interval = interval;
     _stackprof.out = out;
 
+    if (raw) {
+	gettimeofday(&_stackprof.last_sample_at, NULL);
+    }
+
     return Qtrue;
 }
 
@@ -187,16 +201,24 @@ frame_i(st_data_t key, st_data_t val, st_data_t arg)
 
     rb_hash_aset(results, rb_obj_id(frame), details);
 
-    name = rb_profile_frame_full_label(frame);
-    rb_hash_aset(details, sym_name, name);
+    if (frame == _stackprof.fake_gc_frame) {
+	name = _stackprof.fake_gc_frame_name;
+	file = _stackprof.empty_string;
+	line = INT2FIX(0);
+    } else {
+	name = rb_profile_frame_full_label(frame);
 
-    file = rb_profile_frame_absolute_path(frame);
-    if (NIL_P(file))
-	file = rb_profile_frame_path(frame);
-    rb_hash_aset(details, sym_file, file);
+	file = rb_profile_frame_absolute_path(frame);
+	if (NIL_P(file))
+	    file = rb_profile_frame_path(frame);
+	line = rb_profile_frame_first_lineno(frame);
+    }
 
-    if ((line = rb_profile_frame_first_lineno(frame)) != INT2FIX(0))
+    rb_hash_aset(details, sym_name, name);
+    rb_hash_aset(details, sym_file, file);
+    if (line != INT2FIX(0)) {
 	rb_hash_aset(details, sym_line, line);
+    }
 
     rb_hash_aset(details, sym_total_samples, SIZET2NUM(frame_data->total_samples));
     rb_hash_aset(details, sym_samples, SIZET2NUM(frame_data->caller_samples));
@@ -230,7 +252,7 @@ stackprof_results(int argc, VALUE *argv, VALUE self)
 	return Qnil;
 
     results = rb_hash_new();
-    rb_hash_aset(results, sym_version, DBL2NUM(1.1));
+    rb_hash_aset(results, sym_version, DBL2NUM(1.2));
     rb_hash_aset(results, sym_mode, _stackprof.mode);
     rb_hash_aset(results, sym_interval, _stackprof.interval);
     rb_hash_aset(results, sym_samples, SIZET2NUM(_stackprof.overall_samples));
@@ -262,9 +284,23 @@ stackprof_results(int argc, VALUE *argv, VALUE self)
 	_stackprof.raw_samples_len = 0;
 	_stackprof.raw_samples_capa = 0;
 	_stackprof.raw_sample_index = 0;
-	_stackprof.raw = 0;
 
 	rb_hash_aset(results, sym_raw, raw_samples);
+
+	VALUE raw_timestamp_deltas = rb_ary_new_capa(_stackprof.raw_timestamp_deltas_len);
+
+	for (n = 0; n < _stackprof.raw_timestamp_deltas_len; n++) {
+	    rb_ary_push(raw_timestamp_deltas, INT2FIX(_stackprof.raw_timestamp_deltas[n]));
+	}
+
+	free(_stackprof.raw_timestamp_deltas);
+	_stackprof.raw_timestamp_deltas = NULL;
+	_stackprof.raw_timestamp_deltas_len = 0;
+	_stackprof.raw_timestamp_deltas_capa = 0;
+
+	rb_hash_aset(results, sym_raw_timestamp_deltas, raw_timestamp_deltas);
+
+	_stackprof.raw = 0;
     }
 
     if (argc == 1)
@@ -340,13 +376,12 @@ st_numtable_increment(st_table *table, st_data_t key, size_t increment)
 }
 
 void
-stackprof_record_sample()
+stackprof_record_sample_for_stack(int num, int timestamp_delta)
 {
-    int num, i, n;
+    int i, n;
     VALUE prev_frame = Qnil;
 
     _stackprof.overall_samples++;
-    num = rb_profile_frames(0, sizeof(_stackprof.frames_buffer) / sizeof(VALUE), _stackprof.frames_buffer, _stackprof.lines_buffer);
 
     if (_stackprof.raw) {
 	int found = 0;
@@ -356,7 +391,7 @@ stackprof_record_sample()
 	    _stackprof.raw_samples = malloc(sizeof(VALUE) * _stackprof.raw_samples_capa);
 	}
 
-	if (_stackprof.raw_samples_capa <= _stackprof.raw_samples_len + num) {
+	while (_stackprof.raw_samples_capa <= _stackprof.raw_samples_len + (num + 2)) {
 	    _stackprof.raw_samples_capa *= 2;
 	    _stackprof.raw_samples = realloc(_stackprof.raw_samples, sizeof(VALUE) * _stackprof.raw_samples_capa);
 	}
@@ -382,6 +417,24 @@ stackprof_record_sample()
 	    }
 	    _stackprof.raw_samples[_stackprof.raw_samples_len++] = (VALUE)1;
 	}
+
+	if (!_stackprof.raw_timestamp_deltas) {
+	    _stackprof.raw_timestamp_deltas_capa = 100;
+	    _stackprof.raw_timestamp_deltas = malloc(sizeof(int) * _stackprof.raw_timestamp_deltas_capa);
+	    _stackprof.raw_timestamp_deltas_len = 0;
+	}
+
+	while (_stackprof.raw_timestamp_deltas_capa <= _stackprof.raw_timestamp_deltas_len + 1) {
+	    _stackprof.raw_timestamp_deltas_capa *= 2;
+	    _stackprof.raw_timestamp_deltas = realloc(_stackprof.raw_timestamp_deltas, sizeof(int) * _stackprof.raw_timestamp_deltas_capa);
+	}
+
+	_stackprof.raw_timestamp_deltas[_stackprof.raw_timestamp_deltas_len++] = timestamp_delta;
+    }
+
+    for (i = 0; i < num; i++) {
+	VALUE frame = _stackprof.frames_buffer[i];
+	sample_for(frame)->already_accounted_in_total = 0;
     }
 
     for (i = 0; i < num; i++) {
@@ -389,7 +442,9 @@ stackprof_record_sample()
 	VALUE frame = _stackprof.frames_buffer[i];
 	frame_data_t *frame_data = sample_for(frame);
 
-	frame_data->total_samples++;
+	if (!frame_data->already_accounted_in_total)
+	    frame_data->total_samples++;
+	frame_data->already_accounted_in_total = 1;
 
 	if (i == 0) {
 	    frame_data->caller_samples++;
@@ -409,6 +464,68 @@ stackprof_record_sample()
 
 	prev_frame = frame;
     }
+
+    if (_stackprof.raw) {
+	gettimeofday(&_stackprof.last_sample_at, NULL);
+    }
+}
+
+void
+stackprof_record_sample()
+{
+    int timestamp_delta = 0;
+    if (_stackprof.raw) {
+	struct timeval t;
+	gettimeofday(&t, NULL);
+	struct timeval diff;
+	timersub(&t, &_stackprof.last_sample_at, &diff);
+	timestamp_delta = (1000 * diff.tv_sec) + diff.tv_usec;
+    }
+    int num = rb_profile_frames(0, sizeof(_stackprof.frames_buffer) / sizeof(VALUE), _stackprof.frames_buffer, _stackprof.lines_buffer);
+    stackprof_record_sample_for_stack(num, timestamp_delta);
+}
+
+void
+stackprof_record_gc_samples()
+{
+    int delta_to_first_unrecorded_gc_sample = 0;
+    if (_stackprof.raw) {
+	struct timeval t;
+	gettimeofday(&t, NULL);
+	struct timeval diff;
+	timersub(&t, &_stackprof.last_sample_at, &diff);
+
+	// We don't know when the GC samples were actually marked, so let's
+	// assume that they were marked at a perfectly regular interval.
+	delta_to_first_unrecorded_gc_sample = (1000 * diff.tv_sec + diff.tv_usec) - (_stackprof.unrecorded_gc_samples - 1) * _stackprof.interval;
+	if (delta_to_first_unrecorded_gc_sample < 0) {
+	    delta_to_first_unrecorded_gc_sample = 0;
+	}
+    }
+
+    int i;
+
+    _stackprof.frames_buffer[0] = _stackprof.fake_gc_frame;
+    _stackprof.lines_buffer[0] = 0;
+
+    for (i = 0; i < _stackprof.unrecorded_gc_samples; i++) {
+	int timestamp_delta = i == 0 ? delta_to_first_unrecorded_gc_sample : _stackprof.interval;
+	stackprof_record_sample_for_stack(1, timestamp_delta);
+    }
+    _stackprof.during_gc += _stackprof.unrecorded_gc_samples;
+    _stackprof.unrecorded_gc_samples = 0;
+}
+
+static void
+stackprof_gc_job_handler(void *data)
+{
+    static int in_signal_handler = 0;
+    if (in_signal_handler) return;
+    if (!_stackprof.running) return;
+
+    in_signal_handler++;
+    stackprof_record_gc_samples();
+    in_signal_handler--;
 }
 
 static void
@@ -427,10 +544,12 @@ static void
 stackprof_signal_handler(int sig, siginfo_t *sinfo, void *ucontext)
 {
     _stackprof.overall_signals++;
-    if (rb_during_gc())
-	_stackprof.during_gc++, _stackprof.overall_samples++;
-    else
-	rb_postponed_job_register_one(0, stackprof_job_handler, 0);
+    if (rb_during_gc()) {
+	_stackprof.unrecorded_gc_samples++;
+	rb_postponed_job_register_one(0, stackprof_gc_job_handler, (void*)0);
+    } else {
+	rb_postponed_job_register_one(0, stackprof_job_handler, (void*)0);
+    }
 }
 
 static void
@@ -524,6 +643,7 @@ Init_stackprof(void)
     S(mode);
     S(interval);
     S(raw);
+    S(raw_timestamp_deltas);
     S(out);
     S(frames);
     S(aggregate);
@@ -532,6 +652,21 @@ Init_stackprof(void)
     gc_hook = Data_Wrap_Struct(rb_cObject, stackprof_gc_mark, NULL, &_stackprof);
     rb_global_variable(&gc_hook);
 
+    _stackprof.raw_samples = NULL;
+    _stackprof.raw_samples_len = 0;
+    _stackprof.raw_samples_capa = 0;
+    _stackprof.raw_sample_index = 0;
+
+    _stackprof.raw_timestamp_deltas = NULL;
+    _stackprof.raw_timestamp_deltas_len = 0;
+    _stackprof.raw_timestamp_deltas_capa = 0;
+
+    _stackprof.fake_gc_frame = INT2FIX(0x9C);
+    _stackprof.empty_string = rb_str_new_cstr("");
+    _stackprof.fake_gc_frame_name = rb_str_new_cstr("(garbage collection)");
+    rb_global_variable(&_stackprof.fake_gc_frame_name);
+    rb_global_variable(&_stackprof.empty_string);
+
     rb_mStackProf = rb_define_module("StackProf");
     rb_define_singleton_method(rb_mStackProf, "running?", stackprof_running_p, 0);
     rb_define_singleton_method(rb_mStackProf, "run", stackprof_run, -1);

data/lib/stackprof/flamegraph/flamegraph.js

@@ -1,357 +1,983 @@
-var guessGem = function(frame) {
-  var split = frame.split('/gems/');
-  if(split.length == 1) {
-    split = frame.split('/app/');
-    if(split.length == 1) {
-      split = frame.split('/lib/');
-    } else {
-      return split[split.length-1].split('/')[0]
+if (typeof Element.prototype.matches !== 'function') {
+  Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.mozMatchesSelector || Element.prototype.webkitMatchesSelector || function matches(selector) {
+    var element = this
+    var elements = (element.document || element.ownerDocument).querySelectorAll(selector)
+    var index = 0
+
+    while (elements[index] && elements[index] !== element) {
+      ++index
     }
 
-    split = split[Math.max(split.length-2,0)].split('/');
-    return split[split.length-1].split(':')[0];
-  }
-  else
-  {
-    return split[split.length -1].split('/')[0].split('-', 2)[0];
+    return Boolean(elements[index])
   }
 }
 
-var color = function() {
-  var r = parseInt(205 + Math.random() * 50);
-  var g = parseInt(Math.random() * 230);
-  var b = parseInt(Math.random() * 55);
-  return "rgb(" + r + "," + g + "," + b + ")";
+if (typeof Element.prototype.closest !== 'function') {
+  Element.prototype.closest = function closest(selector) {
+    var element = this
+
+    while (element && element.nodeType === 1) {
+      if (element.matches(selector)) {
+        return element
+      }
+
+      element = element.parentNode
+    }
+
+    return null
+  }
 }
 
-// http://stackoverflow.com/a/7419630
-var rainbow = function(numOfSteps, step) {
-    // This function generates vibrant, "evenly spaced" colours (i.e. no clustering). This is ideal for creating easily distiguishable vibrant markers in Google Maps and other apps.
-    // Adam Cole, 2011-Sept-14
-    // HSV to RBG adapted from: http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript
-    var r, g, b;
-    var h = step / numOfSteps;
-    var i = ~~(h * 6);
-    var f = h * 6 - i;
-    var q = 1 - f;
-    switch(i % 6){
-        case 0: r = 1, g = f, b = 0; break;
-        case 1: r = q, g = 1, b = 0; break;
-        case 2: r = 0, g = 1, b = f; break;
-        case 3: r = 0, g = q, b = 1; break;
-        case 4: r = f, g = 0, b = 1; break;
-        case 5: r = 1, g = 0, b = q; break;
+if (typeof Object.assign !== 'function') {
+  (function() {
+    Object.assign = function(target) {
+      'use strict'
+      // We must check against these specific cases.
+      if (target === undefined || target === null) {
+        throw new TypeError('Cannot convert undefined or null to object')
+      }
+
+      var output = Object(target)
+      for (var index = 1; index < arguments.length; index++) {
+        var source = arguments[index]
+        if (source !== undefined && source !== null) {
+          for (var nextKey in source) {
+            if (source.hasOwnProperty(nextKey)) {
+              output[nextKey] = source[nextKey]
+            }
+          }
+        }
+      }
+      return output
     }
-    var c = "#" + ("00" + (~ ~(r * 255)).toString(16)).slice(-2) + ("00" + (~ ~(g * 255)).toString(16)).slice(-2) + ("00" + (~ ~(b * 255)).toString(16)).slice(-2);
-    return (c);
+  })()
 }
 
-// http://stackoverflow.com/questions/1960473/unique-values-in-an-array
-var getUnique = function(orig) {
-    var o = {}, a = []
-    for (var i = 0; i < orig.length; i++) o[orig[i]] = 1
-    for (var e in o) a.push(e)
-    return a
+function EventSource() {
+  var self = this
+
+  self.eventListeners = {}
 }
 
-function flamegraph(data) {
-  var maxX = 0;
-  var maxY = 0;
-  var minY = 10000;
-  $.each(data, function(){
-     maxX = Math.max(maxX, this.x + this.width);
-     maxY = Math.max(maxY, this.y);
-     minY = Math.min(minY, this.y);
-  });
-
-  // normalize Y
-  if (minY > 0) {
-    $.each(data, function(){
-      this.y -= minY
+EventSource.prototype.on = function(name, callback) {
+  var self = this
+
+  var listeners = self.eventListeners[name]
+  if (!listeners)
+    listeners = self.eventListeners[name] = []
+  listeners.push(callback)
+}
+
+EventSource.prototype.dispatch = function(name, data) {
+  var self = this
+
+  var listeners = self.eventListeners[name] || []
+  listeners.forEach(function(c) {
+    requestAnimationFrame(function() { c(data) })
+  })
+}
+
+function CanvasView(canvas) {
+  var self = this
+
+  self.canvas = canvas
+}
+
+CanvasView.prototype.setDimensions = function(width, height) {
+  var self = this
+
+  if (self.resizeRequestID)
+    cancelAnimationFrame(self.resizeRequestID)
+
+  self.resizeRequestID = requestAnimationFrame(self.setDimensionsNow.bind(self, width, height))
+}
+
+CanvasView.prototype.setDimensionsNow = function(width, height) {
+  var self = this
+
+  if (width === self.width && height === self.height)
+    return
+
+  self.width = width
+  self.height = height
+
+  self.canvas.style.width = width
+  self.canvas.style.height = height
+
+  var ratio = window.devicePixelRatio || 1
+  self.canvas.width = width * ratio
+  self.canvas.height = height * ratio
+
+  var ctx = self.canvas.getContext('2d')
+  ctx.setTransform(1, 0, 0, 1, 0, 0)
+  ctx.scale(ratio, ratio)
+
+  self.repaintNow()
+}
+
+CanvasView.prototype.paint = function() {
+}
+
+CanvasView.prototype.scheduleRepaint = function() {
+  var self = this
+
+  if (self.repaintRequestID)
+    return
+
+  self.repaintRequestID = requestAnimationFrame(function() {
+    self.repaintRequestID = null
+    self.repaintNow()
+  })
+}
+
+CanvasView.prototype.repaintNow = function() {
+  var self = this
+
+  self.canvas.getContext('2d').clearRect(0, 0, self.width, self.height)
+  self.paint()
+
+  if (self.repaintRequestID) {
+    cancelAnimationFrame(self.repaintRequestID)
+    self.repaintRequestID = null
+  }
+}
+
+function Flamechart(canvas, data, dataRange, info) {
+  var self = this
+
+  CanvasView.call(self, canvas)
+  EventSource.call(self)
+
+  self.canvas = canvas
+  self.data = data
+  self.dataRange = dataRange
+  self.info = info
+
+  self.viewport = {
+    x: dataRange.minX,
+    y: dataRange.minY,
+    width: dataRange.maxX - dataRange.minX,
+    height: dataRange.maxY - dataRange.minY,
+  }
+}
+
+Flamechart.prototype = Object.create(CanvasView.prototype)
+Flamechart.prototype.constructor = Flamechart
+Object.assign(Flamechart.prototype, EventSource.prototype)
+
+Flamechart.prototype.xScale = function(x) {
+  var self = this
+  return self.widthScale(x - self.viewport.x)
+}
+
+Flamechart.prototype.yScale = function(y) {
+  var self = this
+  return self.heightScale(y - self.viewport.y)
+}
+
+Flamechart.prototype.widthScale = function(width) {
+  var self = this
+  return width * self.width / self.viewport.width
+}
+
+Flamechart.prototype.heightScale = function(height) {
+  var self = this
+  return height * self.height / self.viewport.height
+}
+
+Flamechart.prototype.frameRect = function(f) {
+  return {
+    x: f.x,
+    y: f.y,
+    width: f.width,
+    height: 1,
+  }
+}
+
+Flamechart.prototype.dataToCanvas = function(r) {
+  var self = this
+
+  return {
+    x: self.xScale(r.x),
+    y: self.yScale(r.y),
+    width: self.widthScale(r.width),
+    height: self.heightScale(r.height),
+  }
+}
+
+Flamechart.prototype.setViewport = function(viewport) {
+  var self = this
+
+  if (self.viewport.x === viewport.x &&
+      self.viewport.y === viewport.y &&
+      self.viewport.width === viewport.width &&
+      self.viewport.height === viewport.height)
+    return
+
+  self.viewport = viewport
+
+  self.scheduleRepaint()
+
+  self.dispatch('viewportchanged', { current: viewport })
+}
+
+Flamechart.prototype.paint = function(opacity, frames, gemName) {
+  var self = this
+
+  var ctx = self.canvas.getContext('2d')
+
+  ctx.strokeStyle = 'rgba(0, 0, 0, 0.2)'
+
+  if (self.showLabels) {
+    ctx.textBaseline = 'middle'
+    ctx.font = '11px ' + getComputedStyle(this.canvas).fontFamily
+    // W tends to be one of the widest characters (and if the font is truly
+    // fixed-width then any character will do).
+    var characterWidth = ctx.measureText('WWWW').width / 4
+  }
+
+  if (typeof opacity === 'undefined')
+    opacity = 1
+
+  frames = frames || self.data
+
+  var blocksByColor = {}
+
+  frames.forEach(function(f) {
+    if (gemName && f.gemName !== gemName)
+      return
+
+    var r = self.dataToCanvas(self.frameRect(f))
+
+    if (r.x >= self.width ||
+        r.y >= self.height ||
+        (r.x + r.width) <= 0 ||
+        (r.y + r.height) <= 0) {
+      return
+    }
+
+    var i = self.info[f.frame_id]
+    var color = colorString(i.color, opacity)
+    var colorBlocks = blocksByColor[color]
+    if (!colorBlocks)
+      colorBlocks = blocksByColor[color] = []
+    colorBlocks.push({ rect: r, text: f.frame })
+  })
+
+  var textBlocks = []
+
+  Object.keys(blocksByColor).forEach(function(color) {
+    ctx.fillStyle = color
+
+    blocksByColor[color].forEach(function(block) {
+      if (opacity < 1)
+        ctx.clearRect(block.rect.x, block.rect.y, block.rect.width, block.rect.height)
+
+      ctx.fillRect(block.rect.x, block.rect.y, block.rect.width, block.rect.height)
+
+      if (block.rect.width > 4 && block.rect.height > 4)
+        ctx.strokeRect(block.rect.x, block.rect.y, block.rect.width, block.rect.height)
+
+      if (!self.showLabels || block.rect.width / characterWidth < 4)
+        return
+
+      textBlocks.push(block)
     })
-    maxY -= minY
-    minY = 0
+  })
+
+  ctx.fillStyle = '#000'
+  textBlocks.forEach(function(block) {
+    var text = block.text
+    var textRect = Object.assign({}, block.rect)
+    textRect.x += 1
+    textRect.width -= 2
+    if (textRect.width < text.length * characterWidth * 0.75)
+      text = centerTruncate(block.text, Math.floor(textRect.width / characterWidth))
+    ctx.fillText(text, textRect.x, textRect.y + textRect.height / 2, textRect.width)
+  })
+}
+
+Flamechart.prototype.frameAtPoint = function(x, y) {
+  var self = this
+
+  return self.data.find(function(d) {
+    var r = self.dataToCanvas(self.frameRect(d))
+
+    return r.x <= x
+      && r.x + r.width >= x
+      && r.y <= y
+      && r.y + r.height >= y
+  })
+}
+
+function MainFlamechart(canvas, data, dataRange, info) {
+  var self = this
+
+  Flamechart.call(self, canvas, data, dataRange, info)
+
+  self.showLabels = true
+
+  self.canvas.addEventListener('mousedown', self.onMouseDown.bind(self))
+  self.canvas.addEventListener('mousemove', self.onMouseMove.bind(self))
+  self.canvas.addEventListener('mouseout', self.onMouseOut.bind(self))
+  self.canvas.addEventListener('wheel', self.onWheel.bind(self))
+}
+
+MainFlamechart.prototype = Object.create(Flamechart.prototype)
+
+MainFlamechart.prototype.setDimensionsNow = function(width, height) {
+  var self = this
+
+  var viewport = Object.assign({}, self.viewport)
+  viewport.height = height / 16
+  self.setViewport(viewport)
+
+  CanvasView.prototype.setDimensionsNow.call(self, width, height)
+}
+
+MainFlamechart.prototype.onMouseDown = function(e) {
+  var self = this
+
+  if (e.button !== 0)
+    return
+
+  captureMouse({
+    mouseup: self.onMouseUp.bind(self),
+    mousemove: self.onMouseMove.bind(self),
+  })
+
+  var clientRect = self.canvas.getBoundingClientRect()
+  var currentX = e.clientX - clientRect.left
+  var currentY = e.clientY - clientRect.top
+
+  self.dragging = true
+  self.dragInfo = {
+    mouse: { x: currentX, y: currentY },
+    viewport: { x: self.viewport.x, y: self.viewport.y },
+  }
+
+  e.preventDefault()
+}
+
+MainFlamechart.prototype.onMouseUp = function(e) {
+  var self = this
+
+  if (!self.dragging)
+    return
+
+  releaseCapture()
+
+  self.dragging = false
+  e.preventDefault()
+}
+
+MainFlamechart.prototype.onMouseMove = function(e) {
+  var self = this
+
+  var clientRect = self.canvas.getBoundingClientRect()
+  var currentX = e.clientX - clientRect.left
+  var currentY = e.clientY - clientRect.top
+
+  if (self.dragging) {
+    var viewport = Object.assign({}, self.viewport)
+    viewport.x = self.dragInfo.viewport.x - (currentX - self.dragInfo.mouse.x) * viewport.width / self.width
+    viewport.y = self.dragInfo.viewport.y - (currentY - self.dragInfo.mouse.y) * viewport.height / self.height
+    viewport.x = Math.min(self.dataRange.maxX - viewport.width, Math.max(self.dataRange.minX, viewport.x))
+    viewport.y = Math.min(self.dataRange.maxY - viewport.height, Math.max(self.dataRange.minY, viewport.y))
+    self.setViewport(viewport)
+    return
   }
 
+  var frame = self.frameAtPoint(currentX, currentY)
+  self.setHoveredFrame(frame)
+}
+
+MainFlamechart.prototype.onMouseOut = function() {
+  var self = this
+
+  if (self.dragging)
+    return
+
+  self.setHoveredFrame(null)
+}
+
+MainFlamechart.prototype.onWheel = function(e) {
+  var self = this
+
+  var deltaX = e.deltaX
+  var deltaY = e.deltaY
+
+  if (e.deltaMode == WheelEvent.prototype.DOM_DELTA_LINE) {
+    deltaX *= 11
+    deltaY *= 11
+  }
+
+  if (e.shiftKey) {
+    if ('webkitDirectionInvertedFromDevice' in e) {
+      if (e.webkitDirectionInvertedFromDevice)
+        deltaY *= -1
+    } else if (/Mac OS X/.test(navigator.userAgent)) {
+      // Assume that most Mac users have "Scroll direction: Natural" enabled.
+      deltaY *= -1
+    }
+
+    var mouseWheelZoomSpeed = 1 / 120
+    self.handleZoomGesture(Math.pow(1.2, -(deltaY || deltaX) * mouseWheelZoomSpeed), e.offsetX)
+    e.preventDefault()
+    return
+  }
+
+  var viewport = Object.assign({}, self.viewport)
+  viewport.x += deltaX * viewport.width / (self.dataRange.maxX - self.dataRange.minX)
+  viewport.x = Math.min(self.dataRange.maxX - viewport.width, Math.max(self.dataRange.minX, viewport.x))
+  viewport.y += (deltaY / 8) * viewport.height / (self.dataRange.maxY - self.dataRange.minY)
+  viewport.y = Math.min(self.dataRange.maxY - viewport.height, Math.max(self.dataRange.minY, viewport.y))
+  self.setViewport(viewport)
+  e.preventDefault()
+}
+
+MainFlamechart.prototype.handleZoomGesture = function(zoom, originX) {
+  var self = this
+
+  var viewport = Object.assign({}, self.viewport)
+  var ratioX = originX / self.width
+
+  var newWidth = Math.min(viewport.width / zoom, self.dataRange.maxX - self.dataRange.minX)
+  viewport.x = Math.max(self.dataRange.minX, viewport.x + (viewport.width - newWidth) * ratioX)
+  viewport.width = Math.min(newWidth, self.dataRange.maxX - viewport.x)
+
+  self.setViewport(viewport)
+}
+
+MainFlamechart.prototype.setHoveredFrame = function(frame) {
+  var self = this
+
+  if (frame === self.hoveredFrame)
+    return
+
+  var previous = self.hoveredFrame
+  self.hoveredFrame = frame
+
+  self.dispatch('hoveredframechanged', { previous: previous, current: self.hoveredFrame })
+}
+
+function OverviewFlamechart(container, viewportOverlay, data, dataRange, info) {
+  var self = this
+
+  Flamechart.call(self, container.querySelector('.overview'), data, dataRange, info)
+
+  self.container = container
+
+  self.showLabels = false
+
+  self.viewportOverlay = viewportOverlay
+
+  self.canvas.addEventListener('mousedown', self.onMouseDown.bind(self))
+  self.viewportOverlay.addEventListener('mousedown', self.onOverlayMouseDown.bind(self))
+}
+
+OverviewFlamechart.prototype = Object.create(Flamechart.prototype)
+
+OverviewFlamechart.prototype.setViewportOverlayRect = function(r) {
+  var self = this
+
+  self.viewportOverlayRect = r
+
+  r = self.dataToCanvas(r)
+  r.width = Math.max(2, r.width)
+  r.height = Math.max(2, r.height)
+
+  if ('transform' in self.viewportOverlay.style) {
+    self.viewportOverlay.style.transform = 'translate(' + r.x + 'px, ' + r.y + 'px) scale(' + r.width + ', ' + r.height + ')'
+  } else {
+    self.viewportOverlay.style.left = r.x
+    self.viewportOverlay.style.top = r.y
+    self.viewportOverlay.style.width = r.width
+    self.viewportOverlay.style.height = r.height
+  }
+}
+
+OverviewFlamechart.prototype.onMouseDown = function(e) {
+  var self = this
+
+  captureMouse({
+    mouseup: self.onMouseUp.bind(self),
+    mousemove: self.onMouseMove.bind(self),
+  })
+
+  self.dragging = true
+  self.dragStartX = e.clientX - self.canvas.getBoundingClientRect().left
+
+  self.handleDragGesture(e)
+
+  e.preventDefault()
+}
+
+OverviewFlamechart.prototype.onMouseUp = function(e) {
+  var self = this
+
+  if (!self.dragging)
+    return
+
+  releaseCapture()
+
+  self.dragging = false
+
+  self.handleDragGesture(e)
+
+  e.preventDefault()
+}
+
+OverviewFlamechart.prototype.onMouseMove = function(e) {
+  var self = this
+
+  if (!self.dragging)
+    return
+
+  self.handleDragGesture(e)
+
+  e.preventDefault()
+}
+
+OverviewFlamechart.prototype.handleDragGesture = function(e) {
+  var self = this
+
+  var clientRect = self.canvas.getBoundingClientRect()
+  var currentX = e.clientX - clientRect.left
+  var currentY = e.clientY - clientRect.top
+
+  if (self.dragCurrentX === currentX)
+    return
+
+  self.dragCurrentX = currentX
+
+  var minX = Math.min(self.dragStartX, self.dragCurrentX)
+  var maxX = Math.max(self.dragStartX, self.dragCurrentX)
+
+  var rect = Object.assign({}, self.viewportOverlayRect)
+  rect.x = minX / self.width * self.viewport.width + self.viewport.x
+  rect.width = Math.max(self.viewport.width / 1000, (maxX - minX) / self.width * self.viewport.width)
+
+  rect.y = Math.max(self.viewport.y, Math.min(self.viewport.height - self.viewport.y, currentY / self.height * self.viewport.height + self.viewport.y - rect.height / 2))
+
+  self.setViewportOverlayRect(rect)
+  self.dispatch('overlaychanged', { current: self.viewportOverlayRect })
+}
+
+OverviewFlamechart.prototype.onOverlayMouseDown = function(e) {
+  var self = this
+
+  captureMouse({
+    mouseup: self.onOverlayMouseUp.bind(self),
+    mousemove: self.onOverlayMouseMove.bind(self),
+  })
+
+  self.overlayDragging = true
+  self.overlayDragInfo = {
+    mouse: { x: e.clientX, y: e.clientY },
+    rect: Object.assign({}, self.viewportOverlayRect),
+  }
+  self.viewportOverlay.classList.add('moving')
+
+  self.handleOverlayDragGesture(e)
+
+  e.preventDefault()
+}
+
+OverviewFlamechart.prototype.onOverlayMouseUp = function(e) {
+  var self = this
+
+  if (!self.overlayDragging)
+    return
+
+  releaseCapture()
+
+  self.overlayDragging = false
+  self.viewportOverlay.classList.remove('moving')
+
+  self.handleOverlayDragGesture(e)
+
+  e.preventDefault()
+}
+
+OverviewFlamechart.prototype.onOverlayMouseMove = function(e) {
+  var self = this
+
+  if (!self.overlayDragging)
+    return
+
+  self.handleOverlayDragGesture(e)
+
+  e.preventDefault()
+}
+
+OverviewFlamechart.prototype.handleOverlayDragGesture = function(e) {
+  var self = this
+
+  var deltaX = (e.clientX - self.overlayDragInfo.mouse.x) / self.width * self.viewport.width
+  var deltaY = (e.clientY - self.overlayDragInfo.mouse.y) / self.height * self.viewport.height
+
+  var rect = Object.assign({}, self.overlayDragInfo.rect)
+  rect.x += deltaX
+  rect.y += deltaY
+  rect.x = Math.max(self.viewport.x, Math.min(self.viewport.x + self.viewport.width - rect.width, rect.x))
+  rect.y = Math.max(self.viewport.y, Math.min(self.viewport.y + self.viewport.height - rect.height, rect.y))
+
+  self.setViewportOverlayRect(rect)
+  self.dispatch('overlaychanged', { current: self.viewportOverlayRect })
+}
+
+function FlamegraphView(data, info, sortedGems) {
+  var self = this
+
+  self.data = data
+  self.info = info
+
+  self.dataRange = self.computeDataRange()
+
+  self.mainChart = new MainFlamechart(document.querySelector('.flamegraph'), data, self.dataRange, info)
+  self.overview = new OverviewFlamechart(document.querySelector('.overview-container'), document.querySelector('.overview-viewport-overlay'), data, self.dataRange, info)
+  self.infoElement = document.querySelector('.info')
+
+  self.mainChart.on('hoveredframechanged', self.onHoveredFrameChanged.bind(self))
+  self.mainChart.on('viewportchanged', self.onViewportChanged.bind(self))
+  self.overview.on('overlaychanged', self.onOverlayChanged.bind(self))
+
+  var legend = document.querySelector('.legend')
+  self.renderLegend(legend, sortedGems)
+
+  legend.addEventListener('mousemove', self.onLegendMouseMove.bind(self))
+  legend.addEventListener('mouseout', self.onLegendMouseOut.bind(self))
+
+  window.addEventListener('resize', self.updateDimensions.bind(self))
+
+  self.updateDimensions()
+}
+
+FlamegraphView.prototype.updateDimensions = function() {
+  var self = this
+
   var margin = {top: 10, right: 10, bottom: 10, left: 10}
-  var width = $(window).width() - 200 - margin.left - margin.right;
-  var height = $(window).height() * 0.70 - margin.top - margin.bottom;
-  var height2 = $(window).height() * 0.30 - 60 - margin.top - margin.bottom;
-
-  $('.flamegraph').width(width + margin.left + margin.right).height(height + margin.top + margin.bottom);
-  $('.zoom').width(width + margin.left + margin.right).height(height2 + margin.top + margin.bottom);
-
-  var xScale = d3.scale.linear()
-    .domain([0, maxX])
-    .range([0, width]);
-
-  var xScale2 = d3.scale.linear()
-    .domain([0, maxX])
-    .range([0, width])
-
-  var yScale = d3.scale.linear()
-      .domain([0, maxY])
-      .range([0,height]);
-
-  var yScale2 = d3.scale.linear()
-      .domain([0, maxY])
-      .range([0,height2]);
-
-  var zoomXRatio = 1
-  var zoomed = function() {
-    svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + (zoomXRatio*d3.event.scale) + "," + d3.event.scale + ")");
-
-    var x = xScale.domain(), y = yScale.domain()
-    brush.extent([ [x[0]/zoomXRatio, y[0]], [x[1]/zoomXRatio, y[1]] ])
-    if (x[1] == maxX && y[1] == maxY)
-      brush.clear()
-    svg2.select('g.brush').call(brush)
+  var width = window.innerWidth - 200 - margin.left - margin.right
+  var mainChartHeight = Math.ceil(window.innerHeight * 0.80) - margin.top - margin.bottom
+  var overviewHeight = Math.floor(window.innerHeight * 0.20) - 60 - margin.top - margin.bottom
+
+  self.mainChart.setDimensions(width + margin.left + margin.right, mainChartHeight + margin.top + margin.bottom)
+  self.overview.setDimensions(width + margin.left + margin.right, overviewHeight + margin.top + margin.bottom)
+  self.overview.setViewportOverlayRect(self.mainChart.viewport)
+}
+
+FlamegraphView.prototype.computeDataRange = function() {
+  var self = this
+
+  var range = { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity }
+  self.data.forEach(function(d) {
+    range.minX = Math.min(range.minX, d.x)
+    range.minY = Math.min(range.minY, d.y)
+    range.maxX = Math.max(range.maxX, d.x + d.width)
+    range.maxY = Math.max(range.maxY, d.y + 1)
+  })
+
+  return range
+}
+
+FlamegraphView.prototype.onHoveredFrameChanged = function(data) {
+  var self = this
+
+  self.updateInfo(data.current)
+
+  if (data.previous)
+    self.repaintFrames(1, self.info[data.previous.frame_id].frames)
+
+  if (data.current)
+    self.repaintFrames(0.5, self.info[data.current.frame_id].frames)
+}
+
+FlamegraphView.prototype.repaintFrames = function(opacity, frames) {
+  var self = this
+
+  self.mainChart.paint(opacity, frames)
+  self.overview.paint(opacity, frames)
+}
+
+FlamegraphView.prototype.updateInfo = function(frame) {
+  var self = this
+
+  if (!frame) {
+    self.infoElement.style.backgroundColor = ''
+    self.infoElement.querySelector('.frame').textContent = ''
+    self.infoElement.querySelector('.file').textContent = ''
+    self.infoElement.querySelector('.samples').textContent = ''
+    self.infoElement.querySelector('.exclusive').textContent = ''
+    return
   }
 
-  var zoom = d3.behavior.zoom().x(xScale).y(yScale).scaleExtent([1, 14]).on('zoom', zoomed)
-
-  var svg2 = d3.select('.zoom').append('svg').attr('width', '100%').attr('height', '100%').append('svg:g')
-                      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
-                      .append('g').attr('class', 'graph')
-
-  var svg = d3.select(".flamegraph")
-                      .append("svg")
-                      .attr("width", "100%")
-                      .attr("height", "100%")
-                      .attr("pointer-events", "all")
-                      .append('svg:g')
-                      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
-                      .call(zoom)
-                      .append('svg:g').attr('class', 'graph');
-
-  // so zoom works everywhere
-  svg.append("rect")
-      .attr("x",function(d) { return xScale(0); })
-      .attr("y",function(d) { return yScale(0);})
-      .attr("width", function(d){return xScale(maxX);})
-      .attr("height", yScale(maxY))
-      .attr("fill", "white");
-
-  var samplePercentRaw = function(samples, exclusive) {
-    var ret = [samples, ((samples / maxX) * 100).toFixed(2)]
-    if (exclusive)
-      ret = ret.concat([exclusive, ((exclusive / maxX) * 100).toFixed(2)])
-    return ret;
+  var i = self.info[frame.frame_id]
+  var shortFile = frame.file.replace(/^.+\/(gems|app|lib|config|jobs)/, '$1')
+  var sData = self.samplePercentRaw(i.samples.length, frame.topFrame ? frame.topFrame.exclusiveCount : 0)
+
+  self.infoElement.style.backgroundColor = colorString(i.color, 1)
+  self.infoElement.querySelector('.frame').textContent = frame.frame
+  self.infoElement.querySelector('.file').textContent = shortFile
+  self.infoElement.querySelector('.samples').textContent = sData[0] + ' samples (' + sData[1] + '%)'
+  if (sData[3])
+    self.infoElement.querySelector('.exclusive').textContent = sData[2] + ' exclusive (' + sData[3] + '%)'
+  else
+    self.infoElement.querySelector('.exclusive').textContent = ''
+}
+
+FlamegraphView.prototype.samplePercentRaw = function(samples, exclusive) {
+  var self = this
+
+  var ret = [samples, ((samples / self.dataRange.maxX) * 100).toFixed(2)]
+  if (exclusive)
+    ret = ret.concat([exclusive, ((exclusive / self.dataRange.maxX) * 100).toFixed(2)])
+  return ret
+}
+
+FlamegraphView.prototype.onViewportChanged = function(data) {
+  var self = this
+
+  self.overview.setViewportOverlayRect(data.current)
+}
+
+FlamegraphView.prototype.onOverlayChanged = function(data) {
+  var self = this
+
+  self.mainChart.setViewport(data.current)
+}
+
+FlamegraphView.prototype.renderLegend = function(element, sortedGems) {
+  var self = this
+
+  var fragment = document.createDocumentFragment()
+
+  sortedGems.forEach(function(gem) {
+    var sData = self.samplePercentRaw(gem.samples.length)
+    var node = document.createElement('div')
+    node.className = 'legend-gem'
+    node.setAttribute('data-gem-name', gem.name)
+    node.style.backgroundColor = colorString(gem.color, 1)
+
+    var span = document.createElement('span')
+    span.style.float = 'right'
+    span.textContent = sData[0] + 'x'
+    span.appendChild(document.createElement('br'))
+    span.appendChild(document.createTextNode(sData[1] + '%'))
+    node.appendChild(span)
+
+    var name = document.createElement('div')
+    name.className = 'name'
+    name.textContent = gem.name
+    name.appendChild(document.createElement('br'))
+    name.appendChild(document.createTextNode('\u00a0'))
+    node.appendChild(name)
+
+    fragment.appendChild(node)
+  })
+
+  element.appendChild(fragment)
+}
+
+FlamegraphView.prototype.onLegendMouseMove = function(e) {
+  var self = this
+
+  var gemElement = e.target.closest('.legend-gem')
+  var gemName = gemElement.getAttribute('data-gem-name')
+
+  if (self.hoveredGemName === gemName)
+    return
+
+  if (self.hoveredGemName) {
+    self.mainChart.paint(1, null, self.hoveredGemName)
+    self.overview.paint(1, null, self.hoveredGemName)
+  }
+
+  self.hoveredGemName = gemName
+
+  self.mainChart.paint(0.5, null, self.hoveredGemName)
+  self.overview.paint(0.5, null, self.hoveredGemName)
+}
+
+FlamegraphView.prototype.onLegendMouseOut = function() {
+  var self = this
+
+  if (!self.hoveredGemName)
+    return
+
+  self.mainChart.paint(1, null, self.hoveredGemName)
+  self.overview.paint(1, null, self.hoveredGemName)
+  self.hoveredGemName = null
+}
+
+var capturingListeners = null
+function captureMouse(listeners) {
+  if (capturingListeners)
+    releaseCapture()
+
+  for (var name in listeners)
+    document.addEventListener(name, listeners[name], true)
+  capturingListeners = listeners
+}
+
+function releaseCapture() {
+  if (!capturingListeners)
+    return
+
+  for (var name in capturingListeners)
+    document.removeEventListener(name, capturingListeners[name], true)
+  capturingListeners = null
+}
+
+function guessGem(frame) {
+  var split = frame.split('/gems/')
+  if (split.length === 1) {
+    split = frame.split('/app/')
+    if (split.length === 1) {
+      split = frame.split('/lib/')
+    } else {
+      return split[split.length - 1].split('/')[0]
+    }
+
+    split = split[Math.max(split.length - 2, 0)].split('/')
+    return split[split.length - 1].split(':')[0]
+  }
+  else
+  {
+    return split[split.length - 1].split('/')[0].split('-', 2)[0]
   }
+}
 
-  var samplePercent = function(samples, exclusive) {
-    var info = samplePercentRaw(samples, exclusive)
-    var samplesPct = info[1], exclusivePct = info[3]
-    var ret = " (" + samples + " sample" + (samples == 1 ? "" : "s") + " - " + samplesPct + "%) ";
-    if (exclusive)
-      ret += " (" + exclusive + " exclusive - " + exclusivePct + "%) ";
-    return ret;
+function color() {
+  var r = parseInt(205 + Math.random() * 50)
+  var g = parseInt(Math.random() * 230)
+  var b = parseInt(Math.random() * 55)
+  return [r, g, b]
+}
+
+// http://stackoverflow.com/a/7419630
+function rainbow(numOfSteps, step) {
+    // This function generates vibrant, "evenly spaced" colours (i.e. no clustering). This is ideal for creating easily distiguishable vibrant markers in Google Maps and other apps.
+    // Adam Cole, 2011-Sept-14
+    // HSV to RBG adapted from: http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript
+  var r, g, b
+  var h = step / numOfSteps
+  var i = ~~(h * 6)
+  var f = h * 6 - i
+  var q = 1 - f
+  switch (i % 6) {
+    case 0: r = 1, g = f, b = 0; break
+    case 1: r = q, g = 1, b = 0; break
+    case 2: r = 0, g = 1, b = f; break
+    case 3: r = 0, g = q, b = 1; break
+    case 4: r = f, g = 0, b = 1; break
+    case 5: r = 1, g = 0, b = q; break
   }
+  return [Math.floor(r * 255), Math.floor(g * 255), Math.floor(b * 255)]
+}
 
-  var info = {};
+function colorString(color, opacity) {
+  if (typeof opacity === 'undefined')
+    opacity = 1
+  return 'rgba(' + color.join(',') + ',' + opacity + ')'
+}
 
-  var mouseover =  function(d) {
-    var i = info[d.frame_id];
-    var shortFile = d.file.replace(/^.+\/(gems|app|lib|config|jobs)/, '$1')
-    var data = samplePercentRaw(i.samples.length, d.topFrame ? d.topFrame.exclusiveCount : 0)
+// http://stackoverflow.com/questions/1960473/unique-values-in-an-array
+function getUnique(orig) {
+  var o = {}
+  for (var i = 0; i < orig.length; i++) o[orig[i]] = 1
+  return Object.keys(o)
+}
 
-    $('.info')
-      .css('background-color', i.color)
-      .find('.frame').text(d.frame).end()
-      .find('.file').text(shortFile).end()
-      .find('.samples').text(data[0] + ' samples ('+data[1]+'%)').end()
-      .find('.exclusive').text('')
+function centerTruncate(text, maxLength) {
+  var charactersToKeep = maxLength - 1
+  if (charactersToKeep <= 0)
+    return ''
+  if (text.length <= charactersToKeep)
+    return text
 
-    if (data[3])
-      $('.info .exclusive').text(data[2] + ' exclusive ('+data[3]+'%)')
+  var prefixLength = Math.ceil(charactersToKeep / 2)
+  var suffixLength = charactersToKeep - prefixLength
+  var prefix = text.substr(0, prefixLength)
+  var suffix = suffixLength > 0 ? text.substr(-suffixLength) : ''
 
-    d3.selectAll(i.nodes)
-       .attr('opacity',0.5);
-  };
+  return [prefix, '\u2026', suffix].join('')
+}
 
-  var mouseout = function(d) {
-    var i = info[d.frame_id];
-    $('.info').css('background-color', 'none').find('.frame, .file, .samples, .exclusive').text('')
+function flamegraph(data) {
+  var info = {}
+  data.forEach(function(d) {
+    var i = info[d.frame_id]
+    if (!i)
+      info[d.frame_id] = i = {frames: [], samples: [], color: color()}
+    i.frames.push(d)
+    for (var j = 0; j < d.width; j++) {
+      i.samples.push(d.x + j)
+    }
+  })
 
-    d3.selectAll(i.nodes)
-       .attr('opacity',1);
-  };
+  // Samples may overlap on the same line
+  for (var r in info) {
+    if (info[r].samples) {
+      info[r].samples = getUnique(info[r].samples)
+    }
+  }
 
   // assign some colors, analyze samples per gem
   var gemStats = {}
   var topFrames = {}
   var lastFrame = {frame: 'd52e04d-df28-41ed-a215-b6ec840a8ea5', x: -1}
 
-  $.each(data, function(){
-    var gem = guessGem(this.file);
-    var stat = gemStats[gem];
-    this.gemName = gem
+  data.forEach(function(d) {
+    var gem = guessGem(d.file)
+    var stat = gemStats[gem]
+    d.gemName = gem
 
-    if(!stat) {
-      gemStats[gem] = stat = {name: gem, samples: [], frames: [], nodes:[]};
+    if (!stat) {
+      gemStats[gem] = stat = {name: gem, samples: [], frames: []}
     }
 
-    stat.frames.push(this.frame_id);
-    for(var j=0; j < this.width; j++){
-      stat.samples.push(this.x + j);
+    stat.frames.push(d.frame_id)
+    for (var j = 0; j < d.width; j++) {
+      stat.samples.push(d.x + j)
     }
     // This assumes the traversal is in order
-    if (lastFrame.x != this.x) {
+    if (lastFrame.x !== d.x) {
       var topFrame = topFrames[lastFrame.frame_id]
       if (!topFrame) {
         topFrames[lastFrame.frame_id] = topFrame = {exclusiveCount: 0}
       }
-      topFrame.exclusiveCount += 1;
-      lastFrame.topFrame = topFrame;
+      topFrame.exclusiveCount += 1
+      lastFrame.topFrame = topFrame
     }
-    lastFrame = this;
-
-  });
+    lastFrame = d
+  })
 
   var topFrame = topFrames[lastFrame.frame_id]
   if (!topFrame) {
     topFrames[lastFrame.frame_id] = topFrame = {exclusiveCount: 0}
   }
-  topFrame.exclusiveCount += 1;
-  lastFrame.topFrame = topFrame;
-
-  var totalGems = 0;
-  $.each(gemStats, function(k,stat){
-    totalGems++;
-    stat.samples = getUnique(stat.samples);
-  });
-
-  var gemsSorted = $.map(gemStats, function(v, k){ return v })
-  gemsSorted.sort(function(a, b){ return b.samples.length - a.samples.length })
-
-  var currentIndex = 0;
-  $.each(gemsSorted, function(k,stat){
-    stat.color = rainbow(totalGems, currentIndex);
-    currentIndex += 1;
-
-    for(var x=0; x < stat.frames.length; x++) {
-      info[stat.frames[x]] = {nodes: [], samples: [], color: stat.color};
-    }
-  });
-
-  function drawData(svg, data, xScale, yScale, mini) {
-  svg.selectAll("g.flames")
-    .data(data)
-    .enter()
-      .append("g")
-      .attr('class', 'flames')
-      .each(function(d){
-        gemStats[d.gemName].nodes.push(this)
-
-        var r = d3.select(this)
-        .append("rect")
-        .attr("x",function(d) { return xScale(d.x); })
-        .attr("y",function(d) { return yScale(maxY - d.y);})
-        .attr("width", function(d){return xScale(d.width);})
-        .attr("height", yScale(1))
-        .attr("fill", function(d){
-          var i = info[d.frame_id];
-          if(!i) {
-            info[d.frame_id] = i = {nodes: [], samples: [], color: color()};
-          }
-          i.nodes.push(this);
-          if (!mini)
-            for(var j=0; j < d.width; j++){
-              i.samples.push(d.x + j);
-            }
-          return i.color;
-        })
-
-        if (!mini)
-          r
-          .on("mouseover", mouseover)
-          .on("mouseout", mouseout);
-
-        if (!mini)
-          d3.select(this)
-            .append('foreignObject')
-            .classed('label-body', true)
-            .attr("x",function(d) { return xScale(d.x); })
-            .attr("y",function(d) { return yScale(maxY - d.y);})
-            .attr("width", function(d){return xScale(d.width);})
-            .attr("height", yScale(1))
-            .attr("line-height", yScale(1))
-            .attr("font-size", yScale(0.42) + 'px')
-            .attr('pointer-events', 'none')
-            .append('xhtml:span')
-            .style("height", yScale(1))
-            .classed('label', true)
-            .text(function(d){ return d.frame })
-      });
-  }
+  topFrame.exclusiveCount += 1
+  lastFrame.topFrame = topFrame
 
-  drawData(svg, data, xScale, yScale, 0)
-  drawData(svg2, data, xScale2, yScale2, 1)
-
-  var brushed = function(){
-    if (brush.empty()) {
-      svg.attr('transform', '')
-      zoomXRatio = 1
-      zoom.scale(1).translate([0,0])
-      svg.selectAll('.label-body')
-         .attr('transform', 'scale(1,1)')
-         .attr("x",function(d) { return xScale(d.x)*zoomXRatio; })
-         .attr("width", function(d){return xScale(d.width)*zoomXRatio;})
-    } else {
-      var e = brush.extent()
-      var x = [e[0][0],e[1][0]], y = [e[0][1],e[1][1]]
-
-      xScale.domain([0, maxX])
-      yScale.domain([0, maxY])
-
-      var w = width, h = height2
-      var dx = xScale2(1.0*x[1]-x[0]), dy = yScale2(1.0*y[1]-y[0])
-      var sx = w/dx, sy = h/dy
-      var trlx = -xScale(x[0])*sx, trly = -yScale(y[0])*sy
-      var transform = "translate(" + trlx + ',' + trly + ")" + " scale(" + sx + ',' + sy + ")"
-
-      zoomXRatio = sx/sy
-
-      svg.selectAll('.label-body')
-         .attr("x",function(d) { return xScale(d.x)*zoomXRatio; })
-         .attr("width", function(d){return xScale(d.width)*zoomXRatio;})
-         .attr('transform', function(d){
-           var x = xScale(d.x)
-           return "scale("+(1.0/zoomXRatio)+",1)"
-         })
-
-      svg.attr("transform", transform)
-      zoom.translate([trlx, trly]).scale(sy)
-    }
+  var totalGems = 0
+  for (var k in gemStats) {
+    totalGems++
+    gemStats[k].samples = getUnique(gemStats[k].samples)
   }
 
-  var brush = d3.svg.brush()
-      .x(xScale2)
-      .y(yScale2)
-      .on("brush", brushed);
+  var gemsSorted = Object.keys(gemStats).map(function(k) { return gemStats[k] })
+  gemsSorted.sort(function(a, b) { return b.samples.length - a.samples.length })
 
-  svg2.append("g")
-        .attr("class", "brush")
-        .call(brush)
+  var currentIndex = 0
+  gemsSorted.forEach(function(stat) {
+    stat.color = rainbow(totalGems, currentIndex)
+    currentIndex += 1
 
-  // Samples may overlap on the same line
-  for (var r in info) {
-    if (info[r].samples) {
-      info[r].samples = getUnique(info[r].samples);
+    for (var x = 0; x < stat.frames.length; x++) {
+      info[stat.frames[x]].color = stat.color
     }
-  };
-
-  // render the legend
-  $.each(gemsSorted, function(k,gem){
-    var data = samplePercentRaw(gem.samples.length)
-    var node = $("<div class='"+gem.name+"'></div>")
-      .css("background-color", gem.color)
-      .html("<span style='float: right'>" + data[0] + 'x<br>' + data[1] + '%' + '</span>' + '<div class="name">'+gem.name+'<br>&nbsp;</div>');
-
-    node.on('mouseenter mouseleave', function(e){
-      d3.selectAll(gemStats[gem.name].nodes).classed('highlighted', e.type == 'mouseenter')
-    })
+  })
 
-    $('.legend').append(node);
-  });
+  new FlamegraphView(data, info, gemsSorted)
 }