Skip to content

Commit 36a4c2a

Browse files
vlascikvlascik
committed
Merge upstream
1 parent f55e031 commit 36a4c2a

File tree

20 files changed

+1098
-39
lines changed

20 files changed

+1098
-39
lines changed

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,5 @@
1515
/libpeerconnection.log
1616
npm-debug.log*
1717
testem.log
18+
/.idea
19+
/*.iml

‎app/components/flame-graph-v3.js

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import Ember from 'ember';
2+
// import require from 'require';
3+
// Import the D3 packages we want to use
4+
// import gFlameGraph from '../../vendor/shims/d3-flame-graphs';
5+
// import gFlameGraph from 'npm:d3-flame-graphs';
6+
// const gFlameGraph = require('d3-flame-graphs/dist/d3-flame-graph');
7+
// import d3 from 'd3';
8+
// import FlameGraph from '../utils/d3-flame-graphs-v4/d3-flame-graph';
9+
10+
const { run, get, inject } = Ember;
11+
12+
export default Ember.Component.extend({
13+
classNames: ['flame-graph1'],
14+
graph: inject.service(),
15+
flameGraph: null,
16+
17+
init() {
18+
this._super(...arguments);
19+
20+
this._graphData = null;
21+
},
22+
23+
didReceiveAttrs() {
24+
this._scheduleDraw();
25+
},
26+
27+
// didInsertElement() {
28+
// this._scheduleDraw();
29+
// },
30+
31+
_scheduleDraw() {
32+
// let graphData = get(this, 'graphData');
33+
let graphData = get(this, 'graph.graph');
34+
35+
if (this._lastGraphData !== graphData && graphData) {
36+
run.schedule('render', this, this.drawFlame, graphData);
37+
38+
this._lastGraphData = graphData;
39+
}
40+
},
41+
42+
convert(rawData) {
43+
let child, node, subTree, _i, _len, _ref;
44+
45+
node = {
46+
value: rawData._stats.time.self,
47+
name: `${rawData._label.name} (${rawData._label.broccoliPluginName})`,
48+
stats: rawData._stats,
49+
children: []
50+
};
51+
if (!rawData._children) {
52+
return node;
53+
}
54+
_ref = rawData._children;
55+
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
56+
child = _ref[_i];
57+
subTree = this.convert(child);
58+
if (subTree) {
59+
node.children.push(subTree);
60+
}
61+
}
62+
return node;
63+
},
64+
65+
drawFlame(data) {
66+
let profile = this.convert(data);
67+
console.log('profile: ', profile);
68+
let indent = 0;
69+
let objToString = function(obj) {
70+
indent++;
71+
let str = '';
72+
for (let p in obj) {
73+
if (obj.hasOwnProperty(p) && p !== 'own') {
74+
if (typeof obj[p] === 'object') {
75+
str += '&nbsp;'.repeat(indent) + p + ': ' + (indent <= 1 ? '<br/>' : '') + objToString(obj[p]);
76+
} else {
77+
str += '&nbsp;'.repeat(indent) + p + ': ' + ((p === 'time' || p === 'self') ? Math.ceil(obj[p] / 1000000) + 'ms' : obj[p]);
78+
str += p !== 'count' ? '<br/>' : '';
79+
}
80+
}
81+
}
82+
indent--;
83+
return str;
84+
};
85+
86+
let tooltip = function(d) {
87+
return "" + d.name + " <br/><br/>" + (d.value / 1000000000).toFixed(3) + "s (" + (((d.value / profile.value) * 100).toFixed(2)) + "% of total)<br/>" +
88+
objToString(d.stats);
89+
};
90+
91+
this.flameGraph = new d3.flameGraph('#d3-flame-graph-v3', profile, true)
92+
.size([1343, 640])
93+
.cellHeight(20)
94+
.zoomEnabled(true)
95+
.zoomAction(function(node, event) {
96+
return console.log(node, event);
97+
}).tooltip(tooltip).render();
98+
}
99+
});

‎app/components/flame-graph.js

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
import Ember from 'ember';
2+
// import require from 'require';
3+
// Import the D3 packages we want to use
4+
// import gFlameGraph from '../../vendor/shims/d3-flame-graphs';
5+
// import gFlameGraph from 'npm:d3-flame-graphs';
6+
// const gFlameGraph = require('d3-flame-graphs/dist/d3-flame-graph');
7+
// import d3 from 'd3';
8+
import FlameGraph from '../utils/d3-flame-graphs-v4/d3-flame-graph';
9+
10+
const { run, get, inject } = Ember;
11+
12+
export default Ember.Component.extend({
13+
classNames: ['flame-graph'],
14+
graph: inject.service(),
15+
flameGraph: null,
16+
17+
init() {
18+
this._super(...arguments);
19+
20+
this._graphData = null;
21+
},
22+
23+
didReceiveAttrs() {
24+
this._scheduleDraw();
25+
},
26+
27+
// didInsertElement() {
28+
// this._scheduleDraw();
29+
// },
30+
31+
_scheduleDraw() {
32+
// let graphData = get(this, 'graphData');
33+
let graphData = get(this, 'graph.graph');
34+
35+
if (this._lastGraphData !== graphData && graphData) {
36+
run.schedule('render', this, this.drawFlame, graphData);
37+
38+
this._lastGraphData = graphData;
39+
}
40+
},
41+
42+
convert(rawData) {
43+
let child, node, subTree, _i, _len, _ref;
44+
45+
node = {
46+
value: rawData._stats.time.self,
47+
treeValue: rawData._stats.time.self,
48+
name: rawData._label.name + (rawData._label.broccoliPluginName ? ' (' + rawData._label.broccoliPluginName + ')' : ''),
49+
stats: rawData._stats,
50+
children: []
51+
};
52+
if (!rawData._children) {
53+
return node;
54+
}
55+
56+
let treeValue = node.treeValue;
57+
_ref = rawData._children;
58+
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
59+
child = _ref[_i];
60+
subTree = this.convert(child);
61+
if (subTree) {
62+
node.children.push(subTree);
63+
}
64+
treeValue += subTree.treeValue;
65+
}
66+
node.treeValue = treeValue;
67+
return node;
68+
},
69+
70+
drawFlame(data) {
71+
let profile = this.convert(data);
72+
console.log('profile: ', profile);
73+
let indent = 0;
74+
75+
let formatTime = function(ms) {
76+
if (ms > 1000000000) {
77+
return (ms / 1000000000).toFixed(3) + 's';
78+
}
79+
return (ms / 1000000).toFixed(1) + 'ms';
80+
};
81+
let objToString = function(obj) {
82+
indent++;
83+
let str = '';
84+
for (let p in obj) {
85+
if (obj.hasOwnProperty(p) && p !== 'own') {
86+
if (typeof obj[p] === 'object') {
87+
str += '&nbsp;'.repeat(indent) + p + ': ' + (indent <= 1 && p !== 'time' ? '<br/>' : '') + objToString(obj[p]);
88+
} else {
89+
str += '&nbsp;'.repeat(indent) + p + ': ' + ((p === 'time' || p === 'self') ? formatTime(obj[p]) : obj[p]);
90+
str += p !== 'count' ? '<br/>' : '';
91+
}
92+
}
93+
}
94+
indent--;
95+
return str;
96+
};
97+
98+
let tooltip = function(d) {
99+
return "" + d.data.name + " <br/><br/>" + formatTime(d.data.treeValue) + " (" + (((d.data.treeValue / profile.treeValue) * 100).toFixed(2)) + "% of total)<br/>" +
100+
objToString(d.data.stats);
101+
};
102+
103+
let clientHeight = document.getElementsByClassName('flame-graph')[0].clientHeight;
104+
let clientWidth = document.getElementsByClassName('flame-graph')[0].clientWidth;
105+
106+
this.flameGraph = new FlameGraph('#d3-flame-graph', profile, true)
107+
// .size([clientWidth, clientHeight - 3])
108+
.size([1343, 640])
109+
.cellHeight(20)
110+
.zoomEnabled(true)
111+
.zoomAction(function(node, event) {
112+
return console.log('ZoomAction: ', node, event);
113+
}).tooltip(tooltip).render();
114+
}
115+
});

‎app/controllers/flame-v3.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import Ember from 'ember';
2+
3+
const {
4+
Controller,
5+
inject
6+
} = Ember;
7+
8+
export default Controller.extend({
9+
graph: inject.service(),
10+
});

‎app/controllers/flame.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import Ember from 'ember';
2+
3+
const {
4+
Controller,
5+
inject
6+
} = Ember;
7+
8+
export default Controller.extend({
9+
graph: inject.service(),
10+
});

‎app/index.html

Lines changed: 24 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,32 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<meta charset="utf-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<title>HeimdalljsVisualizer</title>
7-
<meta name="description" content="">
8-
<meta name="viewport" content="width=device-width, initial-scale=1">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<title>HeimdalljsVisualizer</title>
7+
<meta name="description" content="">
8+
<meta name="viewport" content="width=device-width, initial-scale=1">
99

10-
{{content-for "head"}}
10+
{{content-for "head"}}
1111

12-
<link rel="stylesheet" href="{{rootURL}}assets/vendor.css">
13-
<link rel="stylesheet" href="{{rootURL}}assets/heimdalljs-visualizer.css">
12+
<link rel="stylesheet" href="{{rootURL}}assets/vendor.css">
13+
<link rel="stylesheet" href="{{rootURL}}assets/heimdalljs-visualizer.css">
14+
<!--<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha256-k2/8zcNbxVIh5mnQ52A0r3a6jAgMGxFJFE2707UxGCk= sha512-ZV9KawG2Legkwp3nAlxLIVFudTauWuBpC10uEafMHYL0Sarrz5A7G79kXh5+5+woxQ5HM559XX2UZjMJ36Wplg==" crossorigin="anonymous">-->
15+
<!--<link href="http://cimi.io/d3-flame-graphs/d3-flame-graph.css" rel="stylesheet">-->
1416

15-
{{content-for "head-footer"}}
16-
</head>
17-
<body>
18-
{{content-for "body"}}
17+
{{content-for "head-footer"}}
18+
</head>
19+
<body>
20+
{{content-for "body"}}
1921

20-
<script src="{{rootURL}}assets/vendor.js"></script>
21-
<script src="{{rootURL}}assets/heimdalljs-visualizer.js"></script>
22+
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
23+
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.7/d3-tip.js"></script>
24+
<!--<script src="http://cimi.io/d3-flame-graphs/d3-flame-graph.js"></script>-->
2225

23-
{{content-for "body-footer"}}
24-
</body>
26+
<script src="{{rootURL}}assets/vendor.js"></script>
27+
<script src="{{rootURL}}assets/heimdalljs-visualizer.js"></script>
28+
29+
30+
{{content-for "body-footer"}}
31+
</body>
2532
</html>

‎app/router.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ Router.map(function() {
1212
});
1313

1414
this.route('slow-nodes');
15+
this.route('flame');
16+
this.route('flame-v3');
1517
});
1618

1719
export default Router;

‎app/styles/app.css

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,21 @@
11
body {
2-
margin-top: 3.5rem;
2+
/*margin-top: 3.5rem;*/
3+
}
4+
5+
html,
6+
body {
7+
height: 100%;
8+
/*height: calc(100% - 3.7rem);*/
9+
}
10+
11+
body > [class="ember-view"] {
12+
/*height: calc(100% - 3.7rem);*/
13+
height: 100%;
14+
}
15+
16+
.flame-graph {
17+
/*height: calc(100% - 3.7rem);*/
18+
height: 100%;
319
}
420

521
.global-nav {
@@ -37,7 +53,7 @@ body {
3753
display: inline-block;
3854
position: relative;
3955
width: 100%;
40-
padding-bottom: 100%;
56+
/*padding-bottom: 100%;*/
4157
vertical-align: top;
4258
overflow: hidden;
4359
cursor: move;
@@ -66,3 +82,4 @@ body {
6682
.table-row:hover {
6783
cursor: pointer;
6884
}
85+

‎app/templates/application.hbs

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
<div class="nav-left">
44
{{link-to 'Graph' 'graph' class="nav-item is-tab" activeClass="is-active"}}
55
{{link-to 'Nodes' 'slow-nodes' class="nav-item is-tab" activeClass="is-active"}}
6+
{{link-to 'Flame' 'flame' class="nav-item is-tab" activeClass="is-active"}}
7+
{{link-to 'Flame v3' 'flame-v3' class="nav-item is-tab" activeClass="is-active"}}
68
</div>
79

810
<div class="nav-center">
@@ -35,26 +37,26 @@
3537
<div class="modal-background"></div>
3638
<div class="modal-content">
3739
<div class="box">
38-
<form>
39-
<div class="control is-grouped">
40-
<label class="label">Upload the output of <code>BROCCOLI_VIZ=1 ember build</code>:</label>
41-
<p class="control">
42-
<input name="file-upload" type="file" onchange={{action 'parseFile'}}>
43-
</p>
44-
</div>
45-
<div class="control is-grouped">
46-
<label class="label">Sample File:</label>
47-
<p class="control">
40+
<form>
41+
<div class="control is-grouped">
42+
<label class="label">Upload the output of <code>BROCCOLI_VIZ=1 ember build</code>:</label>
43+
<p class="control">
44+
<input name="file-upload" type="file" onchange={{action 'parseFile'}}>
45+
</p>
46+
</div>
47+
<div class="control is-grouped">
48+
<label class="label">Sample File:</label>
49+
<p class="control">
4850
<span class="select is-small">
4951
<select onchange={{action 'useSample' value="target.value"}}>
5052
<option selected disabled>Choose sample file</option>
5153
<option value="./broccoli-viz-files/initial-build-canary-ember-cli-20170206.json">Empty Project - 2017-02-06</option>
5254
<option value="./broccoli-viz-files/ghost-initial-build-canary-ember-cli-20170206.json">Ghost Admin Client - 2017-02-06</option>
5355
</select>
5456
</span>
55-
</p>
56-
</div>
57-
</form>
57+
</p>
58+
</div>
59+
</form>
5860
</div>
5961
</div>
6062
<button class="modal-close" {{action (action (mut showUploadModal) false)}}></button>

‎app/templates/components/flame-graph-v3.hbs

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<div id="d3-flame-graph-v3">
2+
</div>

0 commit comments

Comments
 (0)