[diff flame graph view] Clarify what the user has to do to see the diff flame graph

[grafakus]

Feature description

Is your feature request related to a problem? Please describe.

When landing on the "Diff flame graph view", it's not 100% clear which selections have to be made in order to view a diff flame graph, some users might end up in a situation like:

Without understanding that they haven't selected the flame graph ranges on the time series:

Describe the solution you'd like

1. Improve the info message "Select both the baseline and the comparison flame graph time ranges to view the diff flame graph."
   Suggestion: "In Flame graph mode, select both the baseline and the comparison flame graph time range, using your mouse, to view the diff flame graph."
2. Add an animated GIF to show the user how to select the flame graph ranges
3. Add an "Auto diff" button which, once clicked, would select two areas with the biggest variance

Alternatives considered

Describe alternatives you've considered

-

Additional context

Slack conversation: https://raintank-corp.slack.com/archives/C03NCLB4GG7/p1729081997377229 (cc @adamquan)

[Rperry2174]

I think we should do the following... we should consider two states:

1. If the user has never selected anything and is just now landing on the diff page
2. If a user has landed on the diff page but is now selecting a new time range

https://github.com/user-attachments/assets/c5f19fcc-fdbd-4aac-8fee-be025ad3c47b

User has never selected anything and is just now landing on a "blank" diff page

I believe in this case we need to teach the user that they need to select something on the timeline. We can do this via two options:

1. The user can autoselect something using our button. I think this button should pick the 5 minutes on either side of the lowest point on the baseline graph as the baseline.. the button should pick the 5 minutes on either side of the highest pint for the comparison
2. The user can select something on the graph as instructed by the gif. See the image below for how a user should select something

If we anted to get really fancy maybe we could even highlight the border of the line graphs panel until a user has selected something on the pink one and then highlight the border on the blue line graph panel until a user has selected both (we could also change the gif to be pink or blue depending on what they have / have not highlighted)

User has landed on the diff page but is now selecting a new time range

The whole point of us not automatically showing a flamegraph is so that we can change the time ranges independently from the flamegraph calculation.

If a user changes the time range... Let's say from "last 30 minutes" to "last 7 days" we should not automatically calculate the flamegraph. Instead we should again show the same gif as above that instructs the user to select the time ranges and then only after that should we calculate the flamegraph.

What does this solve

What this solves is:

1. if the time range is short / reasonable it always gives a user a "quick" way to autoselect something for the diff
2. If the time range is long it gives the user a way to adjust the time range independent from calculating the flamegraph and only when the user is ready does the backend send the diff flamegraph

[grafakus]

Hi Ryan, sorry for the late answer but I think we covered this face to face... Note that the time range and flame graph range selections are independent: when you select a new time range with the time picker, the flame graph range is not modified.

I hope that the 2 new CTAs and the presets will help our users. And I'm also convinced that #242 will do too, based on internal feedback. Let's iterate!