feat: add single, comparison, diff tabs to heatmap page

[dogfrogfog]

Brief

• Add single, comparison, diff tabs to heatmap page #1561

Changes

• add tabs with single/comparison/diff flamegraphs
• rename TimelineTitle component to ChartTitle
• add new props to ChartTitle component

demo link: https://pr-1672.pyroscope.io/exemplars/single?query=rideshare-app-golang.cpu%7B%7D

Screen.Recording.2022-11-09.at.15.14.12.mov

adhoc tabs

Concerns

[github-actions]

size-limit report 📦

Path	Size	Loading time (3g)	Running time (snapdragon)	Total time
webapp/public/assets/app.js	487.98 KB (+0.28% 🔺)	9.8 s (+0.28% 🔺)	4 s (+13.12% 🔺)	13.7 s
webapp/public/assets/app.css	18.77 KB (+0.77% 🔺)	376 ms (+0.77% 🔺)	0 ms (+100% 🔺)	376 ms
webapp/public/assets/styles.css	9.54 KB (0%)	191 ms (0%)	0 ms (+100% 🔺)	191 ms
packages/pyroscope-flamegraph/dist/index.js	130.03 KB (0%)	2.7 s (0%)	1.8 s (+17.22% 🔺)	4.4 s
packages/pyroscope-flamegraph/dist/index.node.js	130.74 KB (0%)	2.7 s (0%)	680 ms (+3.95% 🔺)	3.3 s
packages/pyroscope-flamegraph/dist/index.css	7.88 KB (0%)	158 ms (0%)	0 ms (+100% 🔺)	158 ms

[codecov]

Codecov Report

Base: 66.68% // Head: 66.18% // Decreases project coverage by -0.51% ⚠️

Coverage data is based on head (f1347e7) compared to base (6f77f29).
Patch coverage: 66.00% of modified lines in pull request are covered.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1672      +/-   ##
==========================================
- Coverage   66.68%   66.18%   -0.50%     
==========================================
  Files         156      166      +10     
  Lines        5285     5457     +172     
  Branches     1208     1227      +19     
==========================================
+ Hits         3524     3611      +87     
- Misses       1755     1840      +85     
  Partials        6        6              

Impacted Files	Coverage Δ
...ph/src/FlameGraph/FlameGraphComponent/LogoLink.tsx	100.00% <ø> (ø)
...kages/pyroscope-flamegraph/src/convert/testData.ts	100.00% <ø> (ø)
webapp/javascript/services/render.ts	16.99% <ø> (ø)
webapp/javascript/redux/reducers/tracing.ts	20.62% <6.25%> (+1.17%)	⬆️
...ope-flamegraph/src/convert/sandwichViewProfiles.ts	51.52% <60.00%> (ø)
...scope-flamegraph/src/convert/flamebearersToTree.ts	100.00% <100.00%> (ø)
webapp/javascript/services/tags.ts	30.44% <0.00%> (-2.89%)	⬇️
... and 13 more

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

[dogfrogfog]

/create-server

[eh-am]

A nit, but I would call it outer or difference (borrowing from set theory).
Subtraction was the method we used to get the result, but it's not the defying characteristic of that data IMO.

To give a stupid example, imagine following code

const herAge = 30;
const hisAge = 20;

What would we call herAge - hisAge? subtractedAge or ageDifference? Latter express the relationship much better IMO.

[dogfrogfog]

great call !

[eh-am]

Looks good! Added a small comment, but nothing major.

[Rperry2174]

For comparison tab have a few styling tweaks. I do think it's hard to understand what's going on to someone who is new to the page so I added a couple of elements to hopefully help with that. We can continue to refine these over time, but for now:

• Added titles "Selection-included exemplar flamegraph" and "Selection-excluded exemplar flamegraph"
• Added svg squares to go next to the titles (included at bottom of this comment)
• Added "info" buttons to help explain what each of those titles mean in more detail
• Added tootltip with info explanation (on hover of the "info") buttons

[Rperry2174]

For diff page we should also add a similar notice:

[eh-am]

/create-server