[perf] Hide buttons that apply to highlighted traces.
Only show them if there are highlighted traces.
Change-Id: Iacdd7fef77fde26e75a9f723119731b6e7d31690
Reviewed-on: https://skia-review.googlesource.com/c/buildbot/+/302449
Reviewed-by: Joe Gregorio <jcgregorio@google.com>
diff --git a/perf/modules/explore-sk/explore-sk.scss b/perf/modules/explore-sk/explore-sk.scss
index 5f6f4d3..cc47314 100644
--- a/perf/modules/explore-sk/explore-sk.scss
+++ b/perf/modules/explore-sk/explore-sk.scss
@@ -100,11 +100,11 @@
#traceButtons {
display: flex;
+ align-items: center;
}
button {
padding: 0.4em;
- height: auto;
text-transform: none;
}
diff --git a/perf/modules/explore-sk/explore-sk.ts b/perf/modules/explore-sk/explore-sk.ts
index 78259533..f794095 100644
--- a/perf/modules/explore-sk/explore-sk.ts
+++ b/perf/modules/explore-sk/explore-sk.ts
@@ -138,14 +138,26 @@
<div id=buttons>
<button @click=${ele.openQuery}>Query</button>
<div id=traceButtons ?hide_if_no_data=${!ele.hasData()}>
- <button @click=${() =>
- ele.removeAll(false)} title='Remove all the traces.'>Remove All</button>
- <button @click=${
- ele.removeHighlighted
- } title='Remove all the highlighted traces.'>Remove Highlighted</button>
- <button @click=${
- ele.highlightedOnly
- } title='Remove all but the highlighted traces.'>Highlighted Only</button>
+ <button
+ @click=${() => ele.removeAll(false)}
+ title='Remove all the traces.'>
+ Remove All
+ </button>
+
+ <button
+ @click=${ele.removeHighlighted}
+ ?hidden=${!(ele.plot && ele.plot!.highlight.length)}
+ title='Remove all the highlighted traces.'>
+ Remove Highlighted
+ </button>
+
+ <button
+ @click=${ele.highlightedOnly}
+ ?hidden=${!(ele.plot && ele.plot!.highlight.length)}
+ title='Remove all but the highlighted traces.'>
+ Highlighted Only
+ </button>
+
<span title='Number of commits skipped between each point displayed.' ?hidden=${ele.isZero(
ele._dataframe.skip
)} id=skip>${ele._dataframe.skip}</span>
@@ -613,6 +625,8 @@
paramset[key] = [params[key]];
});
+ this._render();
+
// Request populated commits from the server.
fetch('/_/cid/', {
method: 'POST',
@@ -698,6 +712,7 @@
} else {
this.plot!.highlight = keys;
}
+ this._render();
}
private shiftBoth() {
@@ -978,6 +993,7 @@
this.state.keys = json.id;
this.state.queries = [];
this._stateHasChanged();
+ this._render();
})
.catch(errorMessage);
}
@@ -1066,6 +1082,7 @@
}
});
this.plot!.deleteLines(ids);
+ this.plot!.highlight = [];
this.reShortCut(toShortcut);
}
@@ -1095,6 +1112,7 @@
});
this.plot!.deleteLines(toremove);
+ this.plot!.highlight = [];
this.reShortCut(toShortcut);
}
diff --git a/perf/modules/query-count-sk/query-count-sk.scss b/perf/modules/query-count-sk/query-count-sk.scss
index cf1922d..ee5c737 100644
--- a/perf/modules/query-count-sk/query-count-sk.scss
+++ b/perf/modules/query-count-sk/query-count-sk.scss
@@ -11,7 +11,8 @@
}
spinner-sk {
- width: 12px;
- height: 12px;
+ width: 8px;
+ height: 8px;
+ border-width: 3px;
}
}
diff --git a/perf/modules/themes/themes.scss b/perf/modules/themes/themes.scss
index 4aa02e9..63cf263 100644
--- a/perf/modules/themes/themes.scss
+++ b/perf/modules/themes/themes.scss
@@ -28,7 +28,7 @@
outline: none;
padding: 4px;
margin: 2px;
- height: auto;
+ height: fit-content;
}
multi-select-sk {
