Published
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.
Learn more