Improve UX of interop diagram

[SebastianZ]

The diagram at the Interop Dashboard is currently a little hard to use. To improve its UX I suggest to

• make it bigger (or add an option to do so like a zoom feature), as it is sometimes hard to see the chart lines.
• allow to toggle individual chart lines on and off to make it easier (or even just possible) to distinguish the individual lines as they often overlap.
• Show the date of the test run and/or the exact version number of the browser in the tooltip to make it easier to distinguish individual builds.
• link to the related test run ‒ and the individual branch of tests if a specific feature is selected ‒ from within the tooltip, if possible, allowing to compare specific test runs.
• add (optional) markers or add different types of lines in addition to the colors to improve the graph's accessibility.
• show a vertical line when hovering the graph and show the diffent progresses of the browsers at that specific date, making it easy to see the status at a specific point in time.
• add an option to display both chart lines for the stable and experimental implementations to allow to compare them.

Please let me know if I should file individual issues for each of the features!

Sebastian

[foolip]

Thank you for suggesting these improvements, @SebastianZ, I've wanted some of these things too!

The library we use is https://developers.google.com/chart but I'm not sure which of these things it can easily do and which are harder.

[jcscottiii]

• make it bigger (or add an option to do so like a zoom feature), as it is sometimes hard to see the chart lines.

We could probably add an open in full icon and close full screen icon depending on the state to the top of the grid-item-graph div. And when a user clicks on the icon, change the size. We might have to redraw the chart too though.

• allow to toggle individual chart lines on and off to make it easier (or even just possible) to distinguish the individual lines as they often overlap.

Seems like we need to add event listeners and manually re draw the chart without it. (Source from Google Chart Group)

• Show the date of the test run and/or the exact version number of the browser in the tooltip to make it easier to distinguish individual builds.

The charts use the data from https://raw.githubusercontent.com/web-platform-tests/results-analysis/gh-pages/data/interop-2025/interop-2025-stable-v2.csv and https://raw.githubusercontent.com/web-platform-tests/results-analysis/gh-pages/data/interop-2025/interop-2025-experimental-v2.csv. This information would need to come from the process in https://github.com/web-platform-tests/results-analysis

• link to the related test run ‒ and the individual branch of tests if a specific feature is selected ‒ from within the tooltip, if possible, allowing to compare specific test runs.

Similar to the previous point. We need that data. But we can do it once we have it. It will get more complex with the individual feature selection though.

• add (optional) markers or add different types of lines in addition to the colors to improve the graph's accessibility.

We can do a lot of different things. But I'm not sure the best way for the lines. I think we want to keep the same type of line for everyone. But maybe we should do different colors? For the markers for each data point, we can custom them per line too.

• show a vertical line when hovering the graph and show the diffent progresses of the browsers at that specific date, making it easy to see the status at a specific point in time.

I know there are crosshairs. But that looks like it focuses on one point per chart. So I don't think this is easily possible to highlight all the nearest points across all series. But I need to verify.

• add an option to display both chart lines for the stable and experimental implementations to allow to compare them.

This can be done but I'm worried that we should tackle allow to toggle individual chart lines on and off to make it easier (or even just possible) to distinguish the individual lines as they often overlap first. I can see the number of lines becoming overwhelming. We need to talk about the UI for this. Since we already have stable and experimental tabs that impact the full page. Having a combined tab that impacts the rest of the page's information may not be desirable.

[foolip]

Of the suggestions here, I think that toggling individual lines on and off is the one I've had the biggest need for personally. It can sometimes be hard to see what's going on because lines overlap.