perf: fix scroll-to glitch for anchors on per-unit dashboard page
Currently commits on the per-unit dashboard page have anchors with IDs
that directly contain the commit hash. Although this hash is always a
valid ID, it may not be a valid CSS selector because it may start with a
digit. Fix this my prepending all anchors with the string "commit" and
updating links.
This also cleans up some logic with commitSelected in addTable.
Change-Id: I6d9a9306406c7778261c97a039bb284f17490f5e
Reviewed-on: https://go-review.googlesource.com/c/build/+/464298
TryBot-Result: Gopher Robot <gobot@golang.org>
Reviewed-by: Michael Pratt <mpratt@google.com>
Run-TryBot: Michael Knyszek <mknyszek@google.com>
Auto-Submit: Michael Knyszek <mknyszek@google.com>
diff --git a/perf/app/dashboard/index.html b/perf/app/dashboard/index.html
index a6f53fe..793018d 100644
--- a/perf/app/dashboard/index.html
+++ b/perf/app/dashboard/index.html
@@ -168,7 +168,7 @@
if ((bench.HigherIsBetter && r.Change < 0) || (bench.HigherIsBetter && r.Change > 0)) {
diffText = "improvement";
}
- p.innerHTML = `${regression}% ${diffText}, ${(r.Delta*100).toFixed(2)}%-point change at <a href="?benchmark=${bench.Name}&unit=${bench.Unit}#${rd.CommitHash}">${shortCommit}</a>.`;
+ p.innerHTML = `${regression}% ${diffText}, ${(r.Delta*100).toFixed(2)}%-point change at <a href="?benchmark=${bench.Name}&unit=${bench.Unit}#${commitToId(rd.CommitHash)}">${shortCommit}</a>.`;
// Add a link to file a bug.
const title = `affected/package: ${regression}% regression in ${bench.Name} ${bench.Unit} at ${shortCommit}`;
@@ -191,8 +191,19 @@
}
}
+function commitToId(commitHash) {
+ return "commit" + commitHash;
+}
+
+function idToCommit(id) {
+ if (id && id.startsWith("commit")) {
+ return id.slice(6);
+ }
+ return null;
+}
+
function addTable(bench, unit, repository) {
- const commitSelected = window.location.hash;
+ let commitSelected = idToCommit(window.location.hash.slice(1));
let dashboard = document.getElementById("dashboard");
removeLoadingMessage();
@@ -263,7 +274,7 @@
// Create a row per value.
const row = document.createElement("tr");
- if (commitSelected && commitSelected.slice(1) === v.CommitHash) {
+ if (commitSelected && commitSelected === v.CommitHash) {
row.classList.add("selected");
}
@@ -277,7 +288,7 @@
const commitHash = createCell("", false);
const commitLink = document.createElement("a");
commitLink.href = "https://go.googlesource.com/" + repository + "/+show/" + v.CommitHash;
- commitLink.id = v.CommitHash;
+ commitLink.id = commitToId(v.CommitHash);
commitLink.textContent = v.CommitHash.slice(0, 7);
commitHash.appendChild(commitLink);
commitHash.classList.add("Dashboard-table-commit")
@@ -296,9 +307,9 @@
// Now that we've generated anchors for every commit, let's scroll to the
// right one. The browser won't do this automatically because the anchors
// don't exist when the page is loaded.
- const anchor = document.querySelector(commitSelected);
+ const anchor = document.querySelector("#" + commitToId(commitSelected));
window.scrollTo({
- top: anchor.getBoundingClientRect().top + window.pageYOffset,
+ top: anchor.getBoundingClientRect().top + window.pageYOffset - 20,
})
}
}
