Improve timeline selector UI/UX

[Rperry2174]

As of right now when selecting a time range on the timeline on comparison and diff page , it's not completely clear that a user has the ability to interact with the timeline.

I.e. these two arrows point to parts of the flamegraph that a user can interact with:

the image above is from #942 where we also changed the colors of the comparison timelines to distinguish between two separate queries.

I think a much nicer version of this can be seen in this UI with lightstep:

There are two components of the timeline above that we should adopt to improve on two elements of UX with these timelines:

1. To much use of a single color
2. Not clear that timeline is interactable

Fixing too much use of a single color

Lets use the "left" timeline for an example:

there are multiple elements that are pink:

1. The data bars themselves are pink
2. The "end bars" (red text) are pink -- which is kind of confusing compared to the pink bars which also denote actual data
3. The "shaded selected area" is a slightly opaque pink

The same is true for the blue timeline...

In order to fix this I think we should:

1. Leave the data bars themselves as pink
2. make the end bars "dashed" grey (lets make this configurable so we can play with different colors)
3. make the "shaded selected area" a slightly opaque grey

Maybe add a "pink" horizontal bar along the top edge of the selected area similar to the purple horizontal bar in this image:

Fixing making it clear that the timeilne is interact-able

This one is more straight forward. I think we simply need to:

1. Add the "handle" on the left and the right side of the range to make it clear that people can change this
2. Remove the text that says "select left time range" because now hopefully it will be clearer

Considerations

This will likely require us to make these changes via a custom flot plugin similar to what @shaleynikov did in fixing #99 / #730