differential flamegraph for comparision view

[YangKeao]

First thanks for the pyroscope. It's really a great project 🍻

I have seen the comparision view in the online demo. It's awesome 👍 . Wouldn't it be better to show as a Differential Flame Graphs, as it's really hard to tell the difference between two flamegraph 😢.

[Rperry2174]

Hi @YangKeao I think this is a great idea actually! Thanks for the resource as well it definitely lays out some of the parts where we got stuck as we were thinking about how to display this data. Just curious what your opinion is on which diff you think is best UI/UX and which one is most useful:

Option 1: Red blue differential

Option 2: Negation

Option 3: Before / After + differential

[YangKeao]

I prefer the first two options 😋 . As described in the article, they are useful for different situations. The best solution may be making it selectable and let the users choose the best fit one.

[petethepig]

First thing we need I think is a Diff function in tree package. It should take 2 trees and subtract values of one tree from the other one. I think it's gonna be pretty similar to the existing merge function:

https://github.com/pyroscope-io/pyroscope/blob/main/pkg/storage/tree/tree.go#L63

[iOliverNguyen]

I think there is another option for drawing diff, as described in this gist by gelisam.

• Option 1: Red/Blue
  Draw the structure with shape and size as the second profile, then use color to display the difference.

• Option 2: Negation
  Draw the structure with shape and size as the first profile, then use color to display the difference.

• Option 4: Red/Blue with sum
  Draw the structure with shape and size as the sum of both profiles, then use color to display the difference.

[Rperry2174]

closed in #289 let us know what you think @YangKeao