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 different 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.

[SebastianZ]

Excuse the long delay for a response!

I saw the graph is actually implemented at https://github.com/web-platform-tests/wpt.fyi/blob/7f985fa419b373d30b89ca8eb535dca169ca95d5/webapp/components/interop-feature-chart.js.

• 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.

Allowing to toggle the grid-item-graph div into fullscreen mode is probably the easiest way to achieve this.

Alternatively, clicking the icon could change the size of the graph inline or open it in a lightbox.

See also https://developers.google.com/chart/interactive/docs/animation#changing-the-chart-size.

• 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)

You obviously already react to legend item clicks.

Regarding the UI I see different options again:

• Replace the existing logic of highlighting the line with the toggling logic
• Add a checkbox besides each legend item to toggle it on or off.

The actual toggle logic should be smartly filter the lines similar to how the network panel filters in the browser devtools work.

So there should be an option to toggle all on and clicking one of the legend items one the line for that item should be shown. Clicking another legend item then displays its related line in addition to the previously toggled line. Clicking the legend item again removes the line from the graph again.
In my opinion that offers the best UX.

• 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.

According to different accessiblity guides like https://accessibility.huit.harvard.edu/data-viz-charts-graphs, colors alone are not sufficient.

• show a vertical line when hovering the graph and show the different 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.

It seems to me, crosshairs with vertical orientation are the option that comes nearest. It might be done via an overlay instead, but that requires some more work.

Asking ChatGPT, it also suggests to use the crosshair functionality in combination with manually highlighting the data points of the different types on hover. The example actually isn't far off. It just needs some fixing regarding the display of the tooltip.

• 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.

Right, that's something that should probably be controllable for the whole page and not only the graph. So you can compare the values across the page.
I need to think about that a little more.

Sebastian