Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement state for zoom and search #198

Merged
merged 13 commits into from
Aug 31, 2021
Merged

Implement state for zoom and search #198

Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
3acba28
Implement zoom state
versable Feb 18, 2019
68999a1
Implement a more robust js GET URI solution
versable Feb 18, 2019
0311b99
Add state for search queries
versable Feb 18, 2019
c9e69e5
Completely clear the URI component when possible
versable Feb 18, 2019
8404f5c
Use a more natural order of the x and y GET params
versable Feb 18, 2019
3792bcd
Simplify attribute check for zoom state
versable Feb 18, 2019
85a5cae
Do not encode the search term twice
versable Feb 18, 2019
fd1f817
Encode GET parameters in a more sensible place, add comments
versable Feb 19, 2019
6b6e7a1
Fix search state for changes introduced in 2278e4cd
versable Mar 2, 2020
6b77cef
Collapse event listener for keydown events
versable Mar 4, 2020
2c1291e
Simplify JS search function
versable Mar 4, 2020
aea09c5
Remove useless return statement
versable Mar 4, 2020
23b23ad
Properly reset zoom on zooming on root element
versable Mar 4, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 62 additions & 14 deletions flamegraph.pl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -756,8 +756,15 @@ sub flow {
svg = document.getElementsByTagName("svg")[0];
searching = 0;
currentSearchTerm = null;

// use GET parameters to restore a flamegraphs state.
var params = get_params();
if (params.x && params.y)
zoom(find_group(document.querySelector('[x="' + params.x + '"][y="' + params.y + '"]')));
if (params.s) search(params.s);
}

// event listeners
window.addEventListener("click", function(e) {
var target = find_group(e.target);
if (target) {
Expand All @@ -767,8 +774,21 @@ sub flow {
}
if (target.classList.contains("parent")) unzoom();
zoom(target);
if (!document.querySelector('.parent')) {
clearzoom();
return;
}

// set parameters for zoom state
var el = target.querySelector("rect");
if (el && el.attributes && el.attributes.y && el.attributes._orig_x) {
var params = get_params()
params.x = el.attributes._orig_x.value;
params.y = el.attributes.y.value;
history.replaceState(null, null, parse_params(params));
}
}
else if (e.target.id == "unzoom") unzoom();
else if (e.target.id == "unzoom") clearzoom();
else if (e.target.id == "search") search_prompt();
else if (e.target.id == "ignorecase") toggle_ignorecase();
}, false)
Expand All @@ -787,26 +807,43 @@ sub flow {
}, false)

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

// ctrl-I to toggle case-sensitive search
window.addEventListener("keydown",function (e) {
if (e.ctrlKey && e.keyCode === 73) {
else if (e.ctrlKey && e.keyCode === 73) {
e.preventDefault();
toggle_ignorecase();
}
}, false)

// functions
function get_params() {
var params = {};
var paramsarr = window.location.search.substr(1).split('&');
for (var i = 0; i < paramsarr.length; ++i) {
var tmp = paramsarr[i].split("=");
if (!tmp[0] || !tmp[1]) continue;
params[tmp[0]] = decodeURIComponent(tmp[1]);
}
return params;
}
function parse_params(params) {
var uri = "?";
for (var key in params) {
uri += key + '=' + encodeURIComponent(params[key]) + '&';
}
if (uri.slice(-1) == "&")
uri = uri.substring(0, uri.length - 1);
if (uri == '?')
uri = window.location.href.split('?')[0];
return uri;
}
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;
Expand Down Expand Up @@ -970,6 +1007,15 @@ sub flow {
}
search();
}
function clearzoom() {
unzoom();

// remove zoom state
var params = get_params();
if (params.x) delete params.x;
if (params.y) delete params.y;
history.replaceState(null, null, parse_params(params));
}

// search
function toggle_ignorecase() {
Expand All @@ -987,17 +1033,17 @@ sub flow {
for (var i = 0; i < el.length; i++) {
orig_load(el[i], "fill")
}
var params = get_params();
delete params.s;
history.replaceState(null, null, parse_params(params));
}
function search_prompt() {
if (!searching) {
var term = prompt("Enter a search term (regexp " +
"allowed, eg: ^ext4_)"
+ (ignorecase ? ", ignoring case" : "")
+ "\\nPress Ctrl-i to toggle case sensitivity", "");
if (term != null) {
currentSearchTerm = term;
search();
}
if (term != null) search(term);
} else {
reset_search();
searching = 0;
Expand All @@ -1009,10 +1055,9 @@ sub flow {
}
}
function search(term) {
if (currentSearchTerm === null) return;
var term = currentSearchTerm;
if (term) currentSearchTerm = term;

var re = new RegExp(term, ignorecase ? 'i' : '');
var re = new RegExp(currentSearchTerm, ignorecase ? 'i' : '');
var el = document.getElementById("frames").children;
var matches = new Object();
var maxwidth = 0;
Expand Down Expand Up @@ -1048,6 +1093,9 @@ sub flow {
}
if (!searching)
return;
var params = get_params();
params.s = currentSearchTerm;
history.replaceState(null, null, parse_params(params));

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