Platform
Resources
Pricing
Sign in
Contact us
Jed Fox
Workspace
Fork
Published
Tools
By
Jed Fox
Edited
Aug 2, 2020
1 star
Insert cell
Insert cell
viewof
profile
=
dropZone
(
{
message
:
'File must have the .cpuprofile extension'
,
validate
:
item
=>
item
.
kind
===
'file'
&&
item
.
getAsFile
(
)
.
name
.
match
(
/^profile-[\dT]+\.json$/i
)
,
process
:
item
=>
readBlob
(
item
.
getAsFile
(
)
)
.
then
(
JSON
.
parse
)
}
)
Insert cell
{
const
sorted
=
[
...
frames
.
entries
(
)
]
.
filter
(
(
[
name
,
value
]
)
=>
value
)
.
sort
(
(
a
,
b
)
=>
b
[
1
]
-
a
[
1
]
)
return
html
`
<table>
<thead><tr>
<th>Name</th>
<th>Time</th>
</tr></thead>
<tbody>${
sorted
.
map
(
(
[
name
,
value
]
)
=>
{
return
html
`<tr>
<td>${
name
}</td>
<td>${
value
}</td>
</tr>`
}
)
}</tbody>
</table>
`
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
flameGraph
=
{
const
graph
=
converter
.
convertToMergedFlameGraph
(
profile
)
graph
.
children
=
graph
.
children
.
slice
(
0
,
-
1
)
return
graph
}
Insert cell
Insert cell
Insert cell
flamegraph
=
require
(
"d3-flame-graph@2.1.8/dist/d3-flamegraph.js"
)
Insert cell
d3
=
require
(
'd3@5'
)
Insert cell
converter
=
{
globalThis
.
exports
=
{
}
;
await
import
(
'https://unpkg.com/cpuprofile-to-flamegraph@1.0.0/dist/index.js'
)
.
catch
(
(
)
=>
null
)
;
const
{
exports
}
=
globalThis
;
delete
globalThis
.
exports
;
return
exports
;
}
Insert cell
Insert cell
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Try it for free
Learn more
Fork
View
Export
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
profile
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
frames
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
graph
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
depth
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
flameGraph
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
readBlob
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
flamegraph
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
d3
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
converter
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML