Skip to content

4. Add Node class #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
thisduck wants to merge 2 commits into
base: 3_refactor_js_file_includes
Choose a base branch
from
Open

4. Add Node class #4

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
037fb92
Add Node class (replacing data in the code).
thisduck Nov 30, 2018
039f012
Replace shortName with method.
thisduck Nov 30, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
169 changes: 101 additions & 68 deletions lib/flamegraph/flamegraph.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,100 @@ var data = null;
var maxX = 0;
var maxY = 0;

class Node {
constructor({id, data}) {
this._data = data;
this.id = id;
}

get x() {
return this._data.x;
}

get y() {
return this._data.y;
}

get width() {
return this._data.width;
}

get frame() {
return this._data.frame;
}

get gem() {
var frame = this.frame;
var split = frame.split('/gems/');
if(split.length == 1) {
split = frame.split('/app/');
if(split.length == 1) {
split = frame.split('/lib/');
}

split = split[Math.max(split.length-2,0)].split('/');
return split[split.length-1].split(':')[0];
} else {
return split[split.length -1].split('/')[0];
}
}

get method() {
var frame = this.frame;
var split = frame.split('`');
if(split.length == 2) {
var fullMethod = split[1].split("'")[0];
split = fullMethod.split("#");
if(split.length == 2) {
return split[1];
}
return split[0];
}
return '?';
}

get file() {
var frame = this.frame;
var split = frame.split(".rb:");
if(split.length == 2) {
split = split[0].split('/');
return split[split.length - 1];
}
return "";
}

backtrace(nodes) {
for(var i = 0; i < nodes.length; i++){
if(this === nodes[i]){ break; }
}

var trace = [this];
var depth = this.y;

while(i > 0){
if(depth == -1) break;

if(nodes[i].y === depth - 1) {
trace.push(nodes[i]);
depth--;
}

i--;
}

return trace;
}
};

var nodes = [];

for(var i = 0; i < data.length; i++) {
var node = new Node({id: i, data: data[i]})
nodes.push(node);
}

data = null;

debounce = function(func, wait, trickle) {
var timeout;

Expand Down Expand Up @@ -122,51 +216,9 @@ debounce = function(func, wait, trickle) {
};
};


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/');
}

split = split[Math.max(split.length-2,0)].split('/');
return split[split.length-1].split(':')[0];
}
else
{
return split[split.length -1].split('/')[0];
}
}

var guessMethod = function(frame) {
var split = frame.split('`');
if(split.length == 2) {
var fullMethod = split[1].split("'")[0];
split = fullMethod.split("#");
if(split.length == 2) {
return split[1];
}
return split[0];
}
return '?';
}

var guessFile = function(frame) {
var split = frame.split(".rb:");
if(split.length == 2) {
split = split[0].split('/');
return split[split.length - 1];
}
return "";
}

$.each(data, function(){
$.each(nodes, function(){
maxX = Math.max(maxX, this.x + this.width);
maxY = Math.max(maxY, this.y);
this.shortName = guessMethod(this.frame);
});

var width = $(window).width();
Expand Down Expand Up @@ -285,25 +337,6 @@ var getGemNodes = function(gem_name) {
};

var backtrace = function(frame){
for(var i=0; i<data.length; i++){
if(frame === data[i]){ break; }
}

frames = [frame];
var depth = frame.y;

while(i > 0){
if(depth == -1) break;

if(data[i].y === depth-1) {
frames.push(data[i]);
depth--;
}

i--;
}

return frames;
}

$('#frameinfo-wrapper').click(function(d){
Expand All @@ -321,7 +354,7 @@ var click = function(d){
return;
}

var trace = backtrace(d);
var trace = d.backtrace(nodes);

var link = function(path, dest){
return path.replace(/[^\/]+:\d+/, function(x){ return "<a target='_blank' href='"+ dest +"'>" + x + "</a>"})
Expand Down Expand Up @@ -401,9 +434,9 @@ var gemStats = {}
var topFrames = {}
var lastFrame = {frame: 'd52e04d-df28-41ed-a215-b6ec840a8ea5', x: -1}

$.each(data, function(){
$.each(nodes, function(){
var by_method = location.search.match(/[?&]by_method=1\b/);
var group = by_method ? guessMethod(this.frame) : guessGem(this.frame);
var group = by_method ? this.method : this.gem;

var stat = gemStats[group];

Expand Down Expand Up @@ -466,8 +499,8 @@ _.each(gemsSorted, function(stat){
// see: http://bl.ocks.org/mundhradevang/1387786
function fontSize(d,i) {
var size = yScale(1) / 3;
// var words = d.shortName.split(' ');
var word = d.shortName; // words[0];
// var words = d.method.split(' ');
var word = d.method; // words[0];
var width = xScale(d.width+100);
var height = yScale(1);
var length = 0;
Expand All @@ -482,7 +515,7 @@ function fontSize(d,i) {
}

svg.selectAll("g")
.data(data)
.data(nodes)
.enter()
.append("g")
.each(function(){
Expand Down