| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>{{.Title}}</title> |
| {{template "css" .}} |
| <style type="text/css">{{template "d3flamegraphcss" .}}</style> |
| <style type="text/css"> |
| .flamegraph-content { |
| width: 90%; |
| min-width: 80%; |
| margin-left: 5%; |
| } |
| .flamegraph-details { |
| height: 1.2em; |
| width: 90%; |
| min-width: 90%; |
| margin-left: 5%; |
| padding: 15px 0 35px; |
| } |
| </style> |
| </head> |
| <body> |
| {{template "header" .}} |
| <div id="bodycontainer"> |
| <div id="flamegraphdetails" class="flamegraph-details"></div> |
| <div class="flamegraph-content"> |
| <div id="chart"></div> |
| </div> |
| </div> |
| {{template "script" .}} |
| <script>viewer(new URL(window.location.href), {{.Nodes}});</script> |
| <script>{{template "d3flamegraphscript" .}}</script> |
| <script> |
| {{- /* Deserialize as JSON instead of a JS object literal because the browser's |
| JSON parser can handle larger payloads than its JS parser. */ -}} |
| var data = JSON.parse("{{.FlameGraph}}"); |
| |
| var width = document.getElementById('chart').clientWidth; |
| |
| var flameGraph = flamegraph() |
| .width(width) |
| .cellHeight(18) |
| .minFrameSize(1) |
| .transitionDuration(750) |
| .inverted(true) |
| .sort(true) |
| .title('') |
| .tooltip(false) |
| .setDetailsElement(document.getElementById('flamegraphdetails')); |
| |
| // <full name> (percentage, value) |
| flameGraph.label((d) => d.data.f + ' (' + d.data.p + ', ' + d.data.l + ')'); |
| |
| flameGraph.setColorHue('warm'); |
| |
| select('#chart') |
| .datum(data) |
| .call(flameGraph); |
| |
| function clear() { |
| flameGraph.clear(); |
| } |
| |
| function resetZoom() { |
| flameGraph.resetZoom(); |
| } |
| |
| window.addEventListener('resize', function() { |
| var width = document.getElementById('chart').clientWidth; |
| var graphs = document.getElementsByClassName('d3-flame-graph'); |
| if (graphs.length > 0) { |
| graphs[0].setAttribute('width', width); |
| } |
| flameGraph.width(width); |
| flameGraph.resetZoom(); |
| }, true); |
| |
| var search = document.getElementById('search'); |
| var searchAlarm = null; |
| |
| function selectMatching() { |
| searchAlarm = null; |
| |
| if (search.value != '') { |
| flameGraph.search(search.value); |
| } else { |
| flameGraph.clear(); |
| } |
| } |
| |
| function handleSearch() { |
| // Delay expensive processing so a flurry of key strokes is handled once. |
| if (searchAlarm != null) { |
| clearTimeout(searchAlarm); |
| } |
| searchAlarm = setTimeout(selectMatching, 300); |
| } |
| |
| search.addEventListener('input', handleSearch); |
| </script> |
| </body> |
| </html> |
