Reduce load time of trace page by deferring critical path tooltip

[DamianMaslanka5]

I am opening this PR without an issue, I understand that is might not be an acceptable change, feel free to close this PR if you don't agree with this change.

Improve performance (~300ms for 500 spans) by loading tooltip only on hover

• Related issue in antd repo Bad performance when rendering Tooltips ant-design/ant-design#48468
• My other changes which improve performance related to critical path Improve performance when expanding/collapsing span details #2716
• Towards UI is extremely slow for traces with > 2000 spans #645, to improve general performance with large amount of spans

Before

After

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.79%. Comparing base (6356d5b) to head (ef0fc70).
Report is 5 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #2718   +/-   ##
=======================================
  Coverage   96.78%   96.79%           
=======================================
  Files         256      256           
  Lines        7937     7944    +7     
  Branches     2045     1994   -51     
=======================================
+ Hits         7682     7689    +7     
- Misses        254      255    +1     
+ Partials        1        0    -1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[yurishkuro]

I understand what you're trying to do (effectively reduce the size of the DOM), but the resulting behavior is unintuitive, from a user perspective the tooltip would work or not "randomly" (unless they know about 500 spans threshold).

Isn't there another mechanism in React where the tooltip doesn't need to be physically added to the DOM but still can be shown dynamically?

[DamianMaslanka5]

I understand what you're trying to do (effectively reduce the size of the DOM), but the resulting behavior is unintuitive, from a user perspective the tooltip would work or not "randomly" (unless they know about 500 spans threshold).

I agree this is not perfect.

Isn't there another mechanism in React where the tooltip doesn't need to be physically added to the DOM but still can be shown dynamically?

Thanks for the question, it made me think a bit more. Tbh I am not very familiar with react, so I am open to all suggestions.

---

I made changes to create the tooltip only on hover 41ef333, I just added another commit, and removed previous changes in the same commit, just remember to squash the commits when merging (or I can squash this locally and force push), I am not sure if you squash all commits by default, on merge

Render time in profiler looks good

Tooltips work correctly

[DamianMaslanka5]

@yurishkuro, I updated this branch

1. I added test to avoid reducing code coverage
2. I removed the initial commit, which disabled the tooltip when 500 spans existed. Now tooltip is loaded only when hovering mouse over critical path.

[yurishkuro]

can we avoid duplicating this code segment?

[DamianMaslanka5]

Yes, see #2718 (comment)

I will change this tomorrow

[DamianMaslanka5]

in ef0fc70 I moved the duplicated code to const criticalPath