Show budget violations in the graph UI

[paulirish]

Problem

I have warning/failing budgets on some of my builds, but looking at the server UI, there's no indication of that. Oooh.. I found it.

eg., on Lighthouse we have these two warning for master branch right now:

⚠️: dist/lightrider/lighthouse-lr-bundle.js failed the gzip budget size limit of 1,464.84 KiB by 388.24 KiB
⚠️: dist/lightrider/report-generator-bundle.js failed the gzip budget size limit of 48.83 KiB by 16.57 KiB

In https://lh-build-tracker.herokuapp.com/ I was looking for evidence of this and just managed to find this:

But that wasn't obvious to me without clicking around quite a bit.

Proposed solution

I was expecting to see something in the graph, especially as this budgettype is SIZE. Perhaps the the area that's above budget could get some diagonal shading to help indicate it's outside expected range?

Not sure how DELTA violations could be visualized... placing a warning/error icon at the top "point" of the area slice?

Another idea: an extra annotation could be added to the hovertooltip in these cases. That has plenty of visibility.

[paularmstrong]

Not sure how DELTA violations could be visualized... placing a warning/error icon at the top "point" of the area slice?

I had these in place in a test and ended up scrapping them because it's really easy to end up with too many warnings. I had implemented it as one icon per warning... you can imagine how overloaded that ended up. Perhaps a single warning icon on each revision on the graph when it occurs? That still comes with two problems:

1. That's still a bit of heavy processing to calculate because we typically only do them per selected comparison.
2. With a sufficient number of builds on the graph, the icons will quickly overlap
3. If using some sort of shaded area, it would become unnoticeable for smaller artifacts or if there are a lot of builds visualized.

I could definitely use some help figuring out a good way to quickly visualize and bring attention on the graph. There's just a lot here already and the tradeoffs are getting difficult.