[perf] send POST request for commit data when selecting on google chart
Google chart implementation requires users to click on data points
on the older plot-simple-sk for the commit to update into
pointToCommitDetailMap. Only this way could it receive the additional
commit information.
This change adds the POST request as part of selection so that the
commit info gets passed to tooltip. However, setting in
pointTocommitDetailMap doesn't WAI here.
Also, adding a try/catch on selection.row. This is undefined when users
click on the same data point multiple times, so instead of
erroring we'll just console.log and ignore.
Change-Id: I5b150f4aaba9e6e7efba1ba4d141e3e8e5a03ccf
Reviewed-on: https://skia-review.googlesource.com/c/buildbot/+/931897
Reviewed-by: Wenbin Zhang <wenbinzhang@google.com>
Commit-Queue: Jeff Yoon <jeffyoon@google.com>
Reviewed-by: Tony Seaward <seawardt@google.com>
diff --git a/perf/modules/explore-simple-sk/explore-simple-sk.ts b/perf/modules/explore-simple-sk/explore-simple-sk.ts
index 7ef2461..2be5bfa 100644
--- a/perf/modules/explore-simple-sk/explore-simple-sk.ts
+++ b/perf/modules/explore-simple-sk/explore-simple-sk.ts
@@ -1116,17 +1116,56 @@
private onChartSelect(e: CustomEvent) {
const chart = this.googleChartPlot!.value!;
const selection = e.detail.chart.getSelection()[0];
- // TODO(b/370804498): Clicking on the same data point to show tooltip
+ // Clicking on the same data point to show tooltip
// and then clicking on it again to close it will create errors because
// selection.row will be empty. Handle this use case.
+ if (selection === undefined) {
+ return;
+ }
+
const index = {
row: selection.row,
col: selection.column,
};
+ const commitPos = chart.getCommitPosition(index.row);
+
+ fetch('/_/cid/', {
+ method: 'POST',
+ body: JSON.stringify([commitPos]),
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ })
+ .then(jsonOrThrow)
+ .then((json: CIDHandlerResponse) => {
+ const key = JSON.stringify([chart.getTraceName(index.col), commitPos]);
+
+ // TODO(b/355726640) - The purpose of this dict is to ensure that we're not
+ // needing to re-fetch the information, but it's not WAI.
+ this.pointToCommitDetailMap.set(key, json.commitSlice![0]);
+ const position = chart.getPositionByIndex(index);
+
+ this.enableTooltip(
+ {
+ x: index.row - (this.selectedRange?.begin || 0),
+ y: chart.getYValue(index),
+ xPos: position.x,
+ yPos: position.y,
+ name: chart.getTraceName(index.col),
+ },
+ json.commitSlice![0],
+ false,
+ true
+ );
+
+ this.tooltipSelected = true;
+ })
+ .catch(errorMessage);
+
// If traces are rendered and summary bar is enabled, show
// summary for the trace clicked on the graph.
- if (this.summaryOptionsField.value) {
+ if (this.summaryOptionsField.value && this.traceIdSummaryOptionMap.size > 1) {
const traceName = chart.getTraceName(index.col);
const option = this.traceIdSummaryOptionMap.get(traceName) || '';
if (option !== '') {
@@ -1135,26 +1174,6 @@
errorMessage(`Summary bar not properly set for this trace. Trace Name: ${traceName}`);
}
}
-
- const commitPos = chart.getCommitPosition(index.row);
- const position = chart.getPositionByIndex(index);
- const key = JSON.stringify([chart.getTraceName(index.col), commitPos]);
- const commit = this.pointToCommitDetailMap.get(key) || null;
-
- this.enableTooltip(
- {
- x: index.row - (this.selectedRange?.begin || 0),
- y: chart.getYValue(index),
- xPos: position.x,
- yPos: position.y,
- name: chart.getTraceName(index.col),
- },
- commit,
- false,
- true
- );
-
- this.tooltipSelected = true;
}
// if the tooltip is opened and the user is not shift-clicking,
