From 06e9d2b4541c76ebfd04aa744f1adb996f11c232 Mon Sep 17 00:00:00 2001
From: Etienne Perot <eperot@google.com>
Date: Mon, 1 Jul 2024 16:27:49 -0700
Subject: [PATCH] Metrics visualization: Link all charts' X axis together.

This makes it such that hovering over the X axis on one chart shows the same
point on the other charts, and that zooming in on one chart zooms in on all
the others as well.

Sadly this setting doesn't seem to be exposed in the Go bindings of echarts,
so this works by injecting JavaScript code that sets the linkage.

PiperOrigin-RevId: 648519357
---
 test/metricsviz/metricsviz.go | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/test/metricsviz/metricsviz.go b/test/metricsviz/metricsviz.go
index 2c049e798..a98106c0d 100644
--- a/test/metricsviz/metricsviz.go
+++ b/test/metricsviz/metricsviz.go
@@ -351,7 +351,7 @@ func (c *chart) Charter() (components.Charter, error) {
 		}),
 		charts.WithDataZoomOpts(opts.DataZoom{Type: "inside", XAxisIndex: 0}),
 		charts.WithDataZoomOpts(opts.DataZoom{Type: "slider", XAxisIndex: 0}),
-		charts.WithDataZoomOpts(opts.DataZoom{Type: "inside", YAxisIndex: 0}),
+		charts.WithDataZoomOpts(opts.DataZoom{Type: "inside", YAxisIndex: []int{}}),
 		charts.WithTooltipOpts(opts.Tooltip{Show: true, Trigger: "axis"}),
 		charts.WithToolboxOpts(opts.Toolbox{
 			Show: true,
@@ -364,6 +364,21 @@ func (c *chart) Charter() (components.Charter, error) {
 	return lineChart, nil
 }
 
+const connectAllChartsJavascript = `
+<script type="text/javascript">
+let all_charts = [];
+document.querySelectorAll('canvas, div').forEach(function(element) {
+	const maybe_chart = echarts.getInstanceByDom(element);
+	if (maybe_chart) {
+		all_charts.push(maybe_chart);
+	}
+});
+if (all_charts.length > 1) {
+	echarts.connect(all_charts);
+}
+</script>
+`
+
 // ToHTML generates an HTML page with charts of the metrics data.
 func (d *Data) ToHTML(opts HTMLOptions) (string, error) {
 	page := components.NewPage()
@@ -454,6 +469,15 @@ func (d *Data) ToHTML(opts HTMLOptions) (string, error) {
 	}
 	headTagFinishIndex := headTagIndex + len(headTag)
 	html = html[:headTagFinishIndex] + "\n<!--\n" + htmlRawLogsPrefix + "\n" + d.rawLogs + "\n" + htmlRawLogsSuffix + "\n-->\n" + html[headTagFinishIndex:]
+
+	// Insert a script to link the charts' X axis together.
+	const endBodyTag = "</body>"
+	endBodyTagIndex := strings.Index(html, endBodyTag)
+	if endBodyTagIndex == -1 {
+		return "", fmt.Errorf("no </body> tag found in HTML")
+	}
+	html = html[:endBodyTagIndex] + connectAllChartsJavascript + html[endBodyTagIndex:]
+
 	return html, nil
 }