Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

tweak saturation levels in flame graph

  • Loading branch information...
commit 840b7c8483fc2563349838e30fba232c49189e35 1 parent 5872ce2
@davepacheco davepacheco authored
Showing with 19 additions and 12 deletions.
  1. +0 −4 README.md
  2. +19 −8 lib/output-flamegraph-svg.js
View
4 README.md
@@ -24,10 +24,6 @@ The intended workflow is:
gradient, and time-based. Another possibility is to use hue to denote the
module and saturation to denote the size of a frame relative to others at the
same level of depth.
-- Tweak saturation for the existing time-based coloring: currently, the
- saturation is determined by looking at (nsamples in frame) / (total samples),
- but it would be better if it were (nsamples in frame) / (nsamples in row), as
- this would cause different entries in the same row to stand out better.
- Experiment with more interactive visualizations, such as:
http://bl.ocks.org/1005873
View
27 lib/output-flamegraph-svg.js
@@ -102,9 +102,9 @@ FlameGraphEmitter.prototype.run = function (callback)
*
* With this in mind, we process the stacks in order of the above notion
* of time, which is left-to-right in the final flame graph. The final
- * output is fge_ends, which maps a (frame, depth, start) tuple (which
+ * output is fge_boxes, which maps a (frame, depth, end) tuple (which
* uniquely identifies a particular box in the flame graph) to an
- * integer indicating when that invocation of that frame returned (i.e.
+ * integer indicating when that invocation of that frame started (i.e.
* how wide the box is). As part of constructing this, we also maintain
* fge_starts, which maps a (frame, depth) tuple to an integer
* indicating the start time for the most recent invocation of this
@@ -112,12 +112,18 @@ FlameGraphEmitter.prototype.run = function (callback)
*/
var flow = this.flow.bind(this);
- this.fge_ends = {};
+ this.fge_boxes = {};
this.fge_starts = {};
this.fge_last = [];
this.fge_time = 0;
this.fge_maxdepth = 0;
+ /*
+ * We keep track of the number of samples at each level of depth for
+ * coloring purposes.
+ */
+ this.fge_depthsamples = [];
+
this.fge_stacks.eachStackByStack(flow);
flow([], 0);
@@ -154,7 +160,9 @@ FlameGraphEmitter.prototype.flow = function (frames, count)
*/
starts_key = [ this.fge_last[i], i ].join('--');
ends_key = [ this.fge_last[i], i, this.fge_time ].join('--');
- this.fge_ends[ends_key] = this.fge_starts[starts_key];
+ this.fge_boxes[ends_key] = this.fge_starts[starts_key];
+ this.fge_depthsamples[i] += this.fge_time -
+ this.fge_starts[starts_key];
delete (this.fge_starts[starts_key]);
}
@@ -165,6 +173,9 @@ FlameGraphEmitter.prototype.flow = function (frames, count)
*/
starts_key = [ frames[i], i ].join('--');
this.fge_starts[starts_key] = this.fge_time;
+
+ if (this.fge_depthsamples[i] === undefined)
+ this.fge_depthsamples[i] = 0;
}
this.fge_time += count;
@@ -195,11 +206,11 @@ FlameGraphEmitter.prototype.color = function (depth, samples)
}
var h = 0, hplus = 60;
- var s = 50, splus = 50;
+ var s = 30, splus = 70;
var v = 80, vplus = 20;
var hratio = depth / this.fge_maxdepth;
- var sratio = samples / this.fge_time;
+ var sratio = samples / this.fge_depthsamples[depth];
var rh = h + hratio * hplus;
var rs = (s + sratio * splus) / 100;
@@ -283,13 +294,13 @@ FlameGraphEmitter.prototype.draw = function (callback)
emitString(xml, black, fontface, fontsize, xpad + 60,
height - (ypadbtm / 2), ' ', 'left', { 'id': 'details' });
- for (var ident in this.fge_ends) {
+ for (var ident in this.fge_boxes) {
var parts = ident.split('--');
var func = parts[0];
var depth = parseInt(parts[1], 10);
var endtime = parseInt(parts[2], 10);
- var starttime = this.fge_ends[ident];
+ var starttime = this.fge_boxes[ident];
var nsamples = endtime - starttime;
var x1 = xpad + starttime * widthpersample;
Please sign in to comment.
Something went wrong with that request. Please try again.