Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(insights): Use GlobalDrawer instead of detail panels #82534

Open
wants to merge 28 commits into
base: master
Choose a base branch
from

Conversation

gggritso
Copy link
Member

@gggritso gggritso commented Dec 23, 2024

Closes #81273

Replaces all Insights side panels with new GlobalDrawer implementations that match the drawers in Issues. The visual changes are minimal

  1. Slightly different animations
  2. A "Close" button on the top left of the drawer
  3. Scroll bars on the left of the drawer
  4. Tighter padding
  5. Panel doesn't re-animate as often on clicking another transaction

There are small feature changes!

  • no more docking bottom or right. Docking is to the right only
  • panels now have closing animations

Before:
Screenshot 2024-12-23 at 11 42 33 AM
Screenshot 2024-12-23 at 11 42 44 AM
Screenshot 2024-12-23 at 11 43 07 AM

After:
Screenshot 2024-12-23 at 11 43 19 AM
Screenshot 2024-12-23 at 11 43 55 AM
Screenshot 2024-12-23 at 11 44 44 AM
Screenshot 2024-12-23 at 12 04 50 PM

Code Changes

GlobalDrawer is invoked with a hook, rather than rendered inline. So, I had to make some changes.

Before:

  • rendering panels mostly unconditionally like <CacheSamplesPanel />
  • each sample panel checks the URL to see if it's supposed to be open
  • if open, renders itself, otherwise stays invisible
  • on close, updates the URL, which re-renders and hides

This is problematic for a bunch of reasons:

  1. When components can decide to not render themselves, the code flow is confusing. Parents should generally decide when to render children
  2. When a component is rendered but hidden, it runs its side effects. This means that in our case, network requests were sometimes going out, even though the panel isn't visible

After:

  • the panel is rendered using a useEffect, the effect detects a necessary URL parameter or state, and open the panel if necessary. All conditions that the panel used to check for itself are pulled up into the parent
  • the panel is rendered straight, it doesn't have any conditionals to check if it's supposed to be open
  • on close, the panel hides itself, and tells the parent to update the URL or state as necessary

This is tidier, avoids component side-effects, and preserves closing animations! Plus, this means I can re-use a header component, make the analytics tracking consistent, etc.


This only leaves a small handful of users of DetailPanel, mostly in the trace view.

@github-actions github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Dec 23, 2024
Copy link

codecov bot commented Dec 23, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

✅ All tests successful. No failed tests found.

Additional details and impacted files
@@             Coverage Diff             @@
##           master   #82534       +/-   ##
===========================================
- Coverage   86.70%   80.44%    -6.27%     
===========================================
  Files        9414     7316     -2098     
  Lines      538327   322560   -215767     
  Branches    21047    21036       -11     
===========================================
- Hits       466745   259472   -207273     
+ Misses      71175    62681     -8494     
  Partials      407      407               

@gggritso gggritso marked this pull request as ready for review December 23, 2024 17:56
@gggritso gggritso requested a review from a team as a code owner December 23, 2024 17:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Scope: Frontend Automatically applied to PRs that change frontend components
Projects
None yet
Development

Successfully merging this pull request may close these issues.

style: implement new flyout for Insights exemplar spans
1 participant