feat(webapp): Annotations flot plugin

[pavelpashkovsky]

Brief

• add annotations plugin for timelines

Changes

• demo screencast:

screencast.2022-10-12.14-33-30.mp4

• demo:
  https://pr-1605.pyroscope.io/?query=rideshare-app-golang.alloc_objects%7B%7D

Concerns

[github-actions]

size-limit report 📦

Path	Size	Loading time (3g)	Running time (snapdragon)	Total time
webapp/public/assets/app.js	445.79 KB (+0.19% 🔺)	9 s (+0.19% 🔺)	4 s (+1.9% 🔺)	12.9 s
webapp/public/assets/app.css	17.95 KB (+0.37% 🔺)	359 ms (+0.37% 🔺)	0 ms (+100% 🔺)	359 ms
webapp/public/assets/styles.css	9.52 KB (+0.17% 🔺)	191 ms (+0.17% 🔺)	0 ms (+100% 🔺)	191 ms
packages/pyroscope-flamegraph/dist/index.js	92.19 KB (0%)	1.9 s (0%)	1.1 s (-20.49% 🔽)	3 s
packages/pyroscope-flamegraph/dist/index.node.js	92.08 KB (0%)	1.9 s (0%)	590 ms (+9.78% 🔺)	2.5 s
packages/pyroscope-flamegraph/dist/index.css	7.4 KB (0%)	148 ms (0%)	0 ms (+100% 🔺)	148 ms

[eh-am]

/create-server

[codecov]

Codecov Report

Base: 66.59% // Head: 66.61% // Increases project coverage by +0.03% 🎉

Coverage data is based on head (528e96d) compared to base (1332ca5).
Patch has no changes to coverable lines.

❗ Current head 528e96d differs from pull request most recent head 3df0a6b. Consider uploading reports for the commit 3df0a6b to get more accurate results

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1605      +/-   ##
==========================================
+ Coverage   66.59%   66.61%   +0.03%     
==========================================
  Files         148      146       -2     
  Lines        5030     4965      -65     
  Branches     1162     1142      -20     
==========================================
- Hits         3349     3307      -42     
+ Misses       1676     1653      -23     
  Partials        5        5              

Impacted Files	Coverage Δ
...pp/javascript/components/TimelineChart/markings.ts	95.46% <ø> (+2.60%)	⬆️
webapp/javascript/util/formatDate.ts	87.33% <0.00%> (-4.22%)	⬇️
webapp/javascript/redux/reducers/continuous.ts	28.70% <0.00%> (+1.47%)	⬆️

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.

[pavelpashkovsky]

/create-server

[Rperry2174]

/create-server

[Rperry2174]

Looks great so far. Let's have the annoatation be a little bit smaller (we can focus on UI / design of it at the end if you'd like)

[pavelpashkovsky]

/create-server

[Rperry2174]

/create-server

[eh-am]

Curious to hear your thoughts on why you preferred to draw on the canvas VS rendering Icons using React.

---

I think shouldStartAnnotationsFunctionality is unnecessary. If it's empty we don't render annotations, if it's not empty we render them. An array either has items or does not has items. Adding a third null state is unnecessary. If we need to control whether the entire plugin is activated or not, then we can create another variable enableAnnotationsPlugin or something, although I don't think this is necessary.

---

I know you have your own preferences, but for consistency let's use function instead of lambda functions.

[pavelpashkovsky]

@eh-am annotation marks (square + icon) moved outside of Flot, now it's React Component. I found a way how to position them over the timeline correctly. it used to be a problem they lost correct positioning when user changes browser window width

[eh-am]

/create-server

[Rperry2174]

Yeah I agree with @eh-am that the "read" modal fields should both have dark backgrounds

https://user-images.githubusercontent.com/6951209/195377738-74f88832-a8ca-4b98-b4c7-a95de64c04e2.png

Maybe eventually we'll add an edit button but that will be separate

[pavelpashkovsky]

@eh-am , @Rperry2174 , made this input dark

[pavelpashkovsky]

/create-server

[eh-am]

RE: Icon covering the title:

Can you increase the margin a little bit? 20px would work I think

[eh-am]

Also is it possible to have visual feedback when hovering over an icon? In cases like the following it's difficult to tell which one I am hovering on.

[eh-am]

That's very interesting, I thought we needed the Provider there since this is rendered outside our normal react app! But it works without it... weird

[pavelpashkovsky]

you need provider if you want to import any kind of redux logic inside of the body of context menu (for example, redux selectors, useDispatch etc.). but in fact it executes functions which are already were initialized in components connected to redux. You can just take a look at webapp/javascript/pages/ContinuousSingleView.tsx. function dispatch was initialized in ContinuousSingleView, you just execute it in ContextMenu "env"

[pavelpashkovsky]

@eh-am sorry, probably I deleted comments accidentally during dev process and then forgot to revert them

[pavelpashkovsky]

/create-server

[Rperry2174]

/create-server

[pavelpashkovsky]

/create-server

[Rperry2174]

lgtm!