flame.svg

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" width="1200" height="166" onload="init(evt)" viewBox="0 0 1200 166" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Flame graph stack visualization. See https://github.com/brendangregg/FlameGraph for latest version, and http://www.brendangregg.com/flamegraphs.html for examples. -->
<!-- NOTES:  -->
<defs>
	<linearGradient id="background" y1="0" y2="1" x1="0" x2="0" >
		<stop stop-color="#eeeeee" offset="5%" />
		<stop stop-color="#eeeeb0" offset="95%" />
	</linearGradient>
</defs>
<style type="text/css">
	text { font-family:Verdana; font-size:12px; fill:rgb(0,0,0); }
	#search { opacity:0.1; cursor:pointer; }
	#search:hover, #search.show { opacity:1; }
	#subtitle { text-anchor:middle; font-color:rgb(160,160,160); }
	#title { text-anchor:middle; font-size:17px}
	#unzoom { cursor:pointer; }
	#frames > *:hover { stroke:black; stroke-width:0.5; cursor:pointer; }
	.hide { display:none; }
	.parent { opacity:0.5; }
</style>
<script type="text/ecmascript">
<![CDATA[
	"use strict";
	var details, searchbtn, unzoombtn, matchedtxt, svg, searching;
	function init(evt) {
		details = document.getElementById("details").firstChild;
		searchbtn = document.getElementById("search");
		unzoombtn = document.getElementById("unzoom");
		matchedtxt = document.getElementById("matched");
		svg = document.getElementsByTagName("svg")[0];
		searching = 0;
	}

	window.addEventListener("click", function(e) {
		var target = find_group(e.target);
		if (target) {
			if (target.nodeName == "a") {
				if (e.ctrlKey === false) return;
				e.preventDefault();
			}
			if (target.classList.contains("parent")) unzoom();
			zoom(target);
		}
		else if (e.target.id == "unzoom") unzoom();
		else if (e.target.id == "search") search_prompt();
	}, false)

	// mouse-over for info
	// show
	window.addEventListener("mouseover", function(e) {
		var target = find_group(e.target);
		if (target) details.nodeValue = "Function: " + g_to_text(target);
	}, false)

	// clear
	window.addEventListener("mouseout", function(e) {
		var target = find_group(e.target);
		if (target) details.nodeValue = ' ';
	}, false)

	// ctrl-F for search
	window.addEventListener("keydown",function (e) {
		if (e.keyCode === 114 || (e.ctrlKey && e.keyCode === 70)) {
			e.preventDefault();
			search_prompt();
		}
	}, false)

	// functions
	function find_child(node, selector) {
		var children = node.querySelectorAll(selector);
		if (children.length) return children[0];
		return;
	}
	function find_group(node) {
		var parent = node.parentElement;
		if (!parent) return;
		if (parent.id == "frames") return node;
		return find_group(parent);
	}
	function orig_save(e, attr, val) {
		if (e.attributes["_orig_" + attr] != undefined) return;
		if (e.attributes[attr] == undefined) return;
		if (val == undefined) val = e.attributes[attr].value;
		e.setAttribute("_orig_" + attr, val);
	}
	function orig_load(e, attr) {
		if (e.attributes["_orig_"+attr] == undefined) return;
		e.attributes[attr].value = e.attributes["_orig_" + attr].value;
		e.removeAttribute("_orig_"+attr);
	}
	function g_to_text(e) {
		var text = find_child(e, "title").firstChild.nodeValue;
		return (text)
	}
	function g_to_func(e) {
		var func = g_to_text(e);
		// if there's any manipulation we want to do to the function
		// name before it's searched, do it here before returning.
		return (func);
	}
	function update_text(e) {
		var r = find_child(e, "rect");
		var t = find_child(e, "text");
		var w = parseFloat(r.attributes.width.value) -3;
		var txt = find_child(e, "title").textContent.replace(/\([^(]*\)$/,"");
		t.attributes.x.value = parseFloat(r.attributes.x.value) + 3;

		// Smaller than this size won't fit anything
		if (w < 2 * 12 * 0.59) {
			t.textContent = "";
			return;
		}

		t.textContent = txt;
		// Fit in full text width
		if (/^ *$/.test(txt) || t.getSubStringLength(0, txt.length) < w)
			return;

		for (var x = txt.length - 2; x > 0; x--) {
			if (t.getSubStringLength(0, x + 2) <= w) {
				t.textContent = txt.substring(0, x) + "..";
				return;
			}
		}
		t.textContent = "";
	}

	// zoom
	function zoom_reset(e) {
		if (e.attributes != undefined) {
			orig_load(e, "x");
			orig_load(e, "width");
		}
		if (e.childNodes == undefined) return;
		for (var i = 0, c = e.childNodes; i < c.length; i++) {
			zoom_reset(c[i]);
		}
	}
	function zoom_child(e, x, ratio) {
		if (e.attributes != undefined) {
			if (e.attributes.x != undefined) {
				orig_save(e, "x");
				e.attributes.x.value = (parseFloat(e.attributes.x.value) - x - 10) * ratio + 10;
				if (e.tagName == "text")
					e.attributes.x.value = find_child(e.parentNode, "rect[x]").attributes.x.value + 3;
			}
			if (e.attributes.width != undefined) {
				orig_save(e, "width");
				e.attributes.width.value = parseFloat(e.attributes.width.value) * ratio;
			}
		}

		if (e.childNodes == undefined) return;
		for (var i = 0, c = e.childNodes; i < c.length; i++) {
			zoom_child(c[i], x - 10, ratio);
		}
	}
	function zoom_parent(e) {
		if (e.attributes) {
			if (e.attributes.x != undefined) {
				orig_save(e, "x");
				e.attributes.x.value = 10;
			}
			if (e.attributes.width != undefined) {
				orig_save(e, "width");
				e.attributes.width.value = parseInt(svg.width.baseVal.value) - (10 * 2);
			}
		}
		if (e.childNodes == undefined) return;
		for (var i = 0, c = e.childNodes; i < c.length; i++) {
			zoom_parent(c[i]);
		}
	}
	function zoom(node) {
		var attr = find_child(node, "rect").attributes;
		var width = parseFloat(attr.width.value);
		var xmin = parseFloat(attr.x.value);
		var xmax = parseFloat(xmin + width);
		var ymin = parseFloat(attr.y.value);
		var ratio = (svg.width.baseVal.value - 2 * 10) / width;

		// XXX: Workaround for JavaScript float issues (fix me)
		var fudge = 0.0001;

		unzoombtn.classList.remove("hide");

		var el = document.getElementById("frames").children;
		for (var i = 0; i < el.length; i++) {
			var e = el[i];
			var a = find_child(e, "rect").attributes;
			var ex = parseFloat(a.x.value);
			var ew = parseFloat(a.width.value);
			var upstack;
			// Is it an ancestor
			if (0 == 0) {
				upstack = parseFloat(a.y.value) > ymin;
			} else {
				upstack = parseFloat(a.y.value) < ymin;
			}
			if (upstack) {
				// Direct ancestor
				if (ex <= xmin && (ex+ew+fudge) >= xmax) {
					e.classList.add("parent");
					zoom_parent(e);
					update_text(e);
				}
				// not in current path
				else
					e.classList.add("hide");
			}
			// Children maybe
			else {
				// no common path
				if (ex < xmin || ex + fudge >= xmax) {
					e.classList.add("hide");
				}
				else {
					zoom_child(e, xmin, ratio);
					update_text(e);
				}
			}
		}
	}
	function unzoom() {
		unzoombtn.classList.add("hide");
		var el = document.getElementById("frames").children;
		for(var i = 0; i < el.length; i++) {
			el[i].classList.remove("parent");
			el[i].classList.remove("hide");
			zoom_reset(el[i]);
			update_text(el[i]);
		}
	}

	// search
	function reset_search() {
		var el = document.querySelectorAll("#frames rect");
		for (var i = 0; i < el.length; i++) {
			orig_load(el[i], "fill")
		}
	}
	function search_prompt() {
		if (!searching) {
			var term = prompt("Enter a search term (regexp " +
			    "allowed, eg: ^ext4_)", "");
			if (term != null) {
				search(term)
			}
		} else {
			reset_search();
			searching = 0;
			searchbtn.classList.remove("show");
			searchbtn.firstChild.nodeValue = "Search"
			matchedtxt.classList.add("hide");
			matchedtxt.firstChild.nodeValue = ""
		}
	}
	function search(term) {
		var re = new RegExp(term);
		var el = document.getElementById("frames").children;
		var matches = new Object();
		var maxwidth = 0;
		for (var i = 0; i < el.length; i++) {
			var e = el[i];
			var func = g_to_func(e);
			var rect = find_child(e, "rect");
			if (func == null || rect == null)
				continue;

			// Save max width. Only works as we have a root frame
			var w = parseFloat(rect.attributes.width.value);
			if (w > maxwidth)
				maxwidth = w;

			if (func.match(re)) {
				// highlight
				var x = parseFloat(rect.attributes.x.value);
				orig_save(rect, "fill");
				rect.attributes.fill.value = "rgb(230,0,230)";

				// remember matches
				if (matches[x] == undefined) {
					matches[x] = w;
				} else {
					if (w > matches[x]) {
						// overwrite with parent
						matches[x] = w;
					}
				}
				searching = 1;
			}
		}
		if (!searching)
			return;

		searchbtn.classList.add("show");
		searchbtn.firstChild.nodeValue = "Reset Search";

		// calculate percent matched, excluding vertical overlap
		var count = 0;
		var lastx = -1;
		var lastw = 0;
		var keys = Array();
		for (k in matches) {
			if (matches.hasOwnProperty(k))
				keys.push(k);
		}
		// sort the matched frames by their x location
		// ascending, then width descending
		keys.sort(function(a, b){
			return a - b;
		});
		// Step through frames saving only the biggest bottom-up frames
		// thanks to the sort order. This relies on the tree property
		// where children are always smaller than their parents.
		var fudge = 0.0001;	// JavaScript floating point
		for (var k in keys) {
			var x = parseFloat(keys[k]);
			var w = matches[keys[k]];
			if (x >= lastx + lastw - fudge) {
				count += w;
				lastx = x;
				lastw = w;
			}
		}
		// display matched percent
		matchedtxt.classList.remove("hide");
		var pct = 100 * count / maxwidth;
		if (pct != 100) pct = pct.toFixed(1)
		matchedtxt.firstChild.nodeValue = "Matched: " + pct + "%";
	}
]]>
</script>
<rect x="0.0" y="0" width="1200.0" height="166.0" fill="url(#background)"  />
<text id="title" x="600.00" y="24" >Flame Graph</text>
<text id="details" x="10.00" y="149" > </text>
<text id="unzoom" x="10.00" y="24" class="hide">Reset Zoom</text>
<text id="search" x="1090.00" y="24" >Search</text>
<text id="matched" x="1090.00" y="149" > </text>
<g id="frames">
<g >
<title>cat (21 samples, 0.02%)</title><rect x="1183.4" y="101" width="0.2" height="15.0" fill="rgb(250,102,21)" rx="2" ry="2" />
<text  x="1186.36" y="111.5" ></text>
</g>
<g >
<title>[unknown] (19 samples, 0.01%)</title><rect x="18.6" y="53" width="0.2" height="15.0" fill="rgb(229,24,50)" rx="2" ry="2" />
<text  x="21.61" y="63.5" ></text>
</g>
<g >
<title>[unknown] (32 samples, 0.02%)</title><rect x="1184.3" y="69" width="0.3" height="15.0" fill="rgb(232,116,37)" rx="2" ry="2" />
<text  x="1187.29" y="79.5" ></text>
</g>
<g >
<title>__memset_avx2_erms (12,750 samples, 9.66%)</title><rect x="19.9" y="69" width="114.0" height="15.0" fill="rgb(212,64,19)" rx="2" ry="2" />
<text  x="22.93" y="79.5" >__memset_avx2_..</text>
</g>
<g >
<title>gray_convert_glyph (171 samples, 0.13%)</title><rect x="136.1" y="69" width="1.5" height="15.0" fill="rgb(206,5,50)" rx="2" ry="2" />
<text  x="139.12" y="79.5" ></text>
</g>
<g >
<title>[[vdso]] (40 samples, 0.03%)</title><rect x="135.4" y="53" width="0.4" height="15.0" fill="rgb(213,174,27)" rx="2" ry="2" />
<text  x="138.44" y="63.5" ></text>
</g>
<g >
<title>gray_render_line (3,317 samples, 2.51%)</title><rect x="1135.3" y="85" width="29.7" height="15.0" fill="rgb(220,41,41)" rx="2" ry="2" />
<text  x="1138.34" y="95.5" >gr..</text>
</g>
<g >
<title>[[vdso]] (26 samples, 0.02%)</title><rect x="12.8" y="53" width="0.3" height="15.0" fill="rgb(239,137,33)" rx="2" ry="2" />
<text  x="15.84" y="63.5" ></text>
</g>
<g >
<title>gray_set_cell (2,032 samples, 1.54%)</title><rect x="1165.0" y="85" width="18.2" height="15.0" fill="rgb(235,88,24)" rx="2" ry="2" />
<text  x="1168.00" y="95.5" ></text>
</g>
<g >
<title>gray_record_cell (462 samples, 0.35%)</title><rect x="1130.6" y="85" width="4.2" height="15.0" fill="rgb(211,54,23)" rx="2" ry="2" />
<text  x="1133.63" y="95.5" ></text>
</g>
<g >
<title>zsh (640 samples, 0.48%)</title><rect x="1184.3" y="101" width="5.7" height="15.0" fill="rgb(226,170,23)" rx="2" ry="2" />
<text  x="1187.28" y="111.5" ></text>
</g>
<g >
<title>__strcoll_l (53 samples, 0.04%)</title><rect x="1189.0" y="85" width="0.5" height="15.0" fill="rgb(250,75,53)" rx="2" ry="2" />
<text  x="1192.03" y="95.5" ></text>
</g>
<g >
<title>ft_lcd_filter_fir (94,876 samples, 71.90%)</title><rect x="282.1" y="85" width="848.4" height="15.0" fill="rgb(253,197,22)" rx="2" ry="2" />
<text  x="285.09" y="95.5" >ft_lcd_filter_fir</text>
</g>
<g >
<title>epoll_wait (13 samples, 0.01%)</title><rect x="136.0" y="69" width="0.1" height="15.0" fill="rgb(252,24,32)" rx="2" ry="2" />
<text  x="139.00" y="79.5" ></text>
</g>
<g >
<title>[unknown] (43 samples, 0.03%)</title><rect x="19.2" y="69" width="0.4" height="15.0" fill="rgb(227,84,33)" rx="2" ry="2" />
<text  x="22.18" y="79.5" ></text>
</g>
<g >
<title>freetype::library::alloc_library (12 samples, 0.01%)</title><rect x="282.0" y="85" width="0.1" height="15.0" fill="rgb(218,171,45)" rx="2" ry="2" />
<text  x="284.99" y="95.5" ></text>
</g>
<g >
<title>[unknown] (39 samples, 0.03%)</title><rect x="1183.6" y="85" width="0.4" height="15.0" fill="rgb(250,190,4)" rx="2" ry="2" />
<text  x="1186.64" y="95.5" ></text>
</g>
<g >
<title>[zsh] (148 samples, 0.11%)</title><rect x="1186.7" y="85" width="1.3" height="15.0" fill="rgb(227,17,52)" rx="2" ry="2" />
<text  x="1189.72" y="95.5" ></text>
</g>
<g >
<title>__vdso_clock_gettime (23 samples, 0.02%)</title><rect x="135.8" y="53" width="0.2" height="15.0" fill="rgb(226,147,41)" rx="2" ry="2" />
<text  x="138.80" y="63.5" ></text>
</g>
<g >
<title>[libnvidia-tls.so.460.32.03] (12 samples, 0.01%)</title><rect x="19.1" y="69" width="0.1" height="15.0" fill="rgb(220,208,4)" rx="2" ry="2" />
<text  x="22.08" y="79.5" ></text>
</g>
<g >
<title>[unknown] (12 samples, 0.01%)</title><rect x="282.0" y="69" width="0.1" height="15.0" fill="rgb(234,131,41)" rx="2" ry="2" />
<text  x="284.99" y="79.5" ></text>
</g>
<g >
<title>[unknown] (273 samples, 0.21%)</title><rect x="1184.3" y="85" width="2.4" height="15.0" fill="rgb(213,15,16)" rx="2" ry="2" />
<text  x="1187.28" y="95.5" ></text>
</g>
<g >
<title>__sched_yield (24 samples, 0.02%)</title><rect x="18.8" y="53" width="0.2" height="15.0" fill="rgb(210,193,20)" rx="2" ry="2" />
<text  x="21.83" y="63.5" ></text>
</g>
<g >
<title>runtime.goexit (14 samples, 0.01%)</title><rect x="1184.0" y="85" width="0.1" height="15.0" fill="rgb(210,225,30)" rx="2" ry="2" />
<text  x="1187.00" y="95.5" ></text>
</g>
<g >
<title>__sched_yield (25 samples, 0.02%)</title><rect x="281.4" y="85" width="0.3" height="15.0" fill="rgb(211,215,35)" rx="2" ry="2" />
<text  x="284.45" y="95.5" ></text>
</g>
<g >
<title>__clone (29 samples, 0.02%)</title><rect x="19.6" y="69" width="0.3" height="15.0" fill="rgb(205,131,47)" rx="2" ry="2" />
<text  x="22.59" y="79.5" ></text>
</g>
<g >
<title>&lt;crossfont::ft::FreeTypeRasterizer as crossfont::Rasterize&gt;::get_glyph (31 samples, 0.02%)</title><rect x="10.1" y="85" width="0.2" height="15.0" fill="rgb(213,180,13)" rx="2" ry="2" />
<text  x="13.07" y="95.5" ></text>
</g>
<g >
<title>[libnvidia-glcore.so.460.32.03] (290 samples, 0.22%)</title><rect x="10.6" y="85" width="2.6" height="15.0" fill="rgb(249,174,26)" rx="2" ry="2" />
<text  x="13.63" y="95.5" ></text>
</g>
<g >
<title>gray_hline (350 samples, 0.27%)</title><rect x="137.7" y="69" width="3.1" height="15.0" fill="rgb(210,143,44)" rx="2" ry="2" />
<text  x="140.68" y="79.5" ></text>
</g>
<g >
<title>[unknown] (14,278 samples, 10.82%)</title><rect x="13.2" y="85" width="127.7" height="15.0" fill="rgb(219,28,37)" rx="2" ry="2" />
<text  x="16.25" y="95.5" >[unknown]</text>
</g>
<g >
<title>[unknown] (16 samples, 0.01%)</title><rect x="1184.3" y="53" width="0.1" height="15.0" fill="rgb(239,22,13)" rx="2" ry="2" />
<text  x="1187.29" y="63.5" ></text>
</g>
<g >
<title>alacritty (131,209 samples, 99.43%)</title><rect x="10.1" y="101" width="1173.3" height="15.0" fill="rgb(216,133,27)" rx="2" ry="2" />
<text  x="13.07" y="111.5" >alacritty</text>
</g>
<g >
<title>runtime.main (13 samples, 0.01%)</title><rect x="1184.0" y="69" width="0.1" height="15.0" fill="rgb(205,24,4)" rx="2" ry="2" />
<text  x="1187.00" y="79.5" ></text>
</g>
<g >
<title>__memset_avx2_unaligned_erms (114 samples, 0.09%)</title><rect x="133.9" y="69" width="1.1" height="15.0" fill="rgb(212,203,50)" rx="2" ry="2" />
<text  x="136.94" y="79.5" ></text>
</g>
<g >
<title>__clone (24 samples, 0.02%)</title><rect x="1183.7" y="69" width="0.2" height="15.0" fill="rgb(224,30,24)" rx="2" ry="2" />
<text  x="1186.72" y="79.5" ></text>
</g>
<g >
<title>direnv (64 samples, 0.05%)</title><rect x="1183.6" y="101" width="0.5" height="15.0" fill="rgb(239,217,44)" rx="2" ry="2" />
<text  x="1186.56" y="111.5" ></text>
</g>
<g >
<title>clock_gettime@GLIBC_2.2.5 (18 samples, 0.01%)</title><rect x="18.6" y="37" width="0.2" height="15.0" fill="rgb(207,20,47)" rx="2" ry="2" />
<text  x="21.62" y="47.5" ></text>
</g>
<g >
<title>gray_render_conic.isra.0 (64 samples, 0.05%)</title><rect x="1134.8" y="85" width="0.5" height="15.0" fill="rgb(219,110,50)" rx="2" ry="2" />
<text  x="1137.76" y="95.5" ></text>
</g>
<g >
<title>clock_gettime@GLIBC_2.2.5 (70 samples, 0.05%)</title><rect x="135.4" y="69" width="0.6" height="15.0" fill="rgb(227,24,37)" rx="2" ry="2" />
<text  x="138.38" y="79.5" ></text>
</g>
<g >
<title>__libc_fork (85 samples, 0.06%)</title><rect x="1188.1" y="85" width="0.7" height="15.0" fill="rgb(247,94,7)" rx="2" ry="2" />
<text  x="1191.08" y="95.5" ></text>
</g>
<g >
<title>all (131,959 samples, 100%)</title><rect x="10.0" y="117" width="1180.0" height="15.0" fill="rgb(212,46,27)" rx="2" ry="2" />
<text  x="13.00" y="127.5" ></text>
</g>
<g >
<title>clock_gettime@GLIBC_2.2.5 (45 samples, 0.03%)</title><rect x="12.8" y="69" width="0.4" height="15.0" fill="rgb(242,48,2)" rx="2" ry="2" />
<text  x="15.83" y="79.5" ></text>
</g>
<g >
<title>[libnvidia-glcore.so.460.32.03] (590 samples, 0.45%)</title><rect x="13.8" y="69" width="5.3" height="15.0" fill="rgb(250,8,49)" rx="2" ry="2" />
<text  x="16.80" y="79.5" ></text>
</g>
<g >
<title>[libnvidia-glcore.so.460.32.03] (316 samples, 0.24%)</title><rect x="15.8" y="53" width="2.8" height="15.0" fill="rgb(219,159,46)" rx="2" ry="2" />
<text  x="18.79" y="63.5" ></text>
</g>
<g >
<title>__memmove_avx_unaligned_erms (15,688 samples, 11.89%)</title><rect x="141.0" y="85" width="140.3" height="15.0" fill="rgb(245,110,44)" rx="2" ry="2" />
<text  x="144.05" y="95.5" >__memmove_avx_una..</text>
</g>
<g >
<title>[zsh] (38 samples, 0.03%)</title><rect x="1184.6" y="69" width="0.3" height="15.0" fill="rgb(240,22,45)" rx="2" ry="2" />
<text  x="1187.58" y="79.5" ></text>
</g>
<g >
<title>__strcoll_l (86 samples, 0.07%)</title><rect x="1185.0" y="69" width="0.8" height="15.0" fill="rgb(254,222,2)" rx="2" ry="2" />
<text  x="1188.05" y="79.5" ></text>
</g>
<g >
<title>__vdso_clock_gettime (17 samples, 0.01%)</title><rect x="13.1" y="53" width="0.1" height="15.0" fill="rgb(213,134,28)" rx="2" ry="2" />
<text  x="16.08" y="63.5" ></text>
</g>
</g>
</svg>