Improve DevTools Profiler commit-selector UX

[bvaughn]

This PR makes several small tweaks to the commit selector UI:

1. Replace linear scale for commit durations with log scale. This reduces the impact of one (or few) outlier times on more common smaller durations.
2. Decrease the minimum bar height to make the differences in height more noticeable.
3. Add a background hover highlight to increase contrast.
4. Add hover tooltip with commit duration and timestamp.

Hover tooltips

In addition to this, I think we can improve the overall selection experience with the addition of a tooltip that shows the commit duration and time. Combined with the improved scaling, I think this should make exploring commits a lot easier.

Linear to log scale

A linear scale favors outliers too heavily at the expense of making (more common) smaller commits indistinguishable from empty commits. I think a logarithmic scale could work better here.

Consider the example profile screenshots below. Using a linear scale, an 18ms commit is almost indistinguishable from a 4ms commit or even a 0.6ms commit, but using a log scale each are now distinguishable in size and color. Square root is probably too subtle, but cube root might be a nice compromise.

Using a non-linear scale, would people be surprised to find out that the 18ms commit was only 18ms compared to the much taller (bright yellow) 224ms commit? Using a linear scale, would they be frustrated that an 18ms commit was impossible to find without individually stepping through each commit? Is there a third approach I haven't considered? (I bet there's lots of research here that I'm unaware of.)

[bvaughn]

This was a mistake before. It should have been the duration to begin with. Didn't matter as much with a linear scale though.

[sizebot]

Comparing: c7b4497...07b4155

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js	=	123.32 kB	123.32 kB	=	39.68 kB	39.68 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	=	129.91 kB	129.91 kB	=	41.71 kB	41.71 kB
facebook-www/ReactDOM-prod.classic.js	=	414.24 kB	414.24 kB	=	76.55 kB	76.55 kB
facebook-www/ReactDOM-prod.modern.js	=	402.58 kB	402.58 kB	=	74.66 kB	74.66 kB
facebook-www/ReactDOMForked-prod.classic.js	=	414.25 kB	414.25 kB	=	76.55 kB	76.55 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against 07b4155

[eps1lon]

That's super helpful. Most of the profiles I dealt with were basically just on big one and many small one. Applying a logarithmic scale helps there a lot.

I suspect there are plenty of profile types where the linear scale would make more sense.

Maybe add an option instead (logarithmic vs linear time scales) and also apply this option to e.g. the ranked view? Though to be honest, I'm not sure how the scale for the ranked view even works.

[bgirard]

That’s a big improvement for my workflow. Looks great!

I prefer log. It’s an obvious choice for showing something that covers several different orders of magnitudes.

[bvaughn]

This tweet shared a neat idea too. What if cut off any extreme outliers and just indicated this with some added visual, e.g.

This probably wouldn't be necessary if we stuck with a log scale, but it could be an interesting idea to explore if we went with linear or sqrt.

[bgirard]

Quickly locating the largest commits is important when looking for bottleneck. I think log works better for this problem domain. That suggestion is a good idea when you care about giving resolution between 0..10 over the resolution outside that range. IMO It’s a good idea but in another problem domain.

[bvaughn]

How do we feel about the addition of a tooltip? Sees like a no brainer now.

(This video is using cbrt instead of log.)

[bvaughn]

I think I could add more info to the tooltip too. Like whether the commit was a nested update, and what priority.

[bvaughn]

I pan to build on top of this in a future PR that adds the concept of commit times and nested update flags directly to the Profiler UI. Those will be added to this tooltip as well.

[bvaughn]

Here's one more interesting variation to consider:

What we have now

Natural log for both height and color

Natural log for height, linear for color

[bvaughn]

I think I'm going to move forward with log for height and linear for color. Seems like a reasonable compromise. And the tooltip in this PR adds a really nice benefit.