feat(issues): Add overlays to each trace row

[scttcper]

Currently, we have one big overlay that hijacks any interaction and links you to the trace view. Now each row will have its own overlay and link you to that specific span.

video of the new hover behavior

CleanShot.2025-03-18.at.16.37.51.mp4

[codecov]

❌ 1 Tests Failed:

Tests completed	Failed	Passed	Skipped
9955	1	9954	4

View the top 1 failed test(s) by shortest run time

EventTraceView renders a trace

Stack Traces | 0.528s run time

Error: Expected test not to call console.error().

If the error is expected, test for it explicitly by mocking it out using jest.spyOn(console, 'error').mockImplementation() and test that the warning occurs.

Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.
    at a
    at onClick (.../node_modules/react-router-dom/index.tsx:949:7)
    at BaseLink (.../components/links/link.tsx:21:3)
    at .../sentry/sentry/node_modules/@.../react/dist/emotion-element-25f9958c.browser.cjs.js:56:23
    at a
    at onClick (.../node_modules/react-router-dom/index.tsx:949:7)
    at BaseLink (.../components/links/link.tsx:21:3)
    at .../sentry/sentry/node_modules/@.../react/dist/emotion-element-25f9958c.browser.cjs.js:56:23
    at IssueTraceWaterfallOverlay (.../performance/newTraceDetails/issuesTraceWaterfallOverlay.tsx:31:3)
    at div
    at .../sentry/sentry/node_modules/@.../react/dist/emotion-element-25f9958c.browser.cjs.js:56:23
    at div
    at .../sentry/sentry/node_modules/@.../react/dist/emotion-element-25f9958c.browser.cjs.js:56:23
    at IssuesTraceWaterfall (.../performance/newTraceDetails/issuesTraceWaterfall.tsx:40:32)
    at div
    at .../sentry/sentry/node_modules/@.../react/dist/emotion-element-25f9958c.browser.cjs.js:56:23
    at TraceStateProvider (.../newTraceDetails/traceState/traceStateProvider.tsx:51:64)
    at EventTraceViewInner (.../interfaces/performance/eventTraceView.tsx:57:3)
    at div
    at .../sentry/sentry/node_modules/@.../react/dist/emotion-element-25f9958c.browser.cjs.js:56:23
    at div
    at .../sentry/sentry/node_modules/@.../react/dist/emotion-element-25f9958c.browser.cjs.js:56:23
    at EventDataSection (.../components/events/eventDataSection.tsx:36:3)
    at InterimSection (.../issueDetails/streamline/interimSection.tsx:18:3)
    at EventTraceView (.../interfaces/performance/eventTraceView.tsx:142:3)
    at GlobalDrawer (.../components/globalDrawer/index.tsx:25:3)
    at $4068a0fae83b6d84$export$323e4fc2fa4753fb (.../sentry/sentry/node_modules/@.../utils/dist/packages/@.../utils/src/openLink.tsx:41:8)
    at ProvideAriaRouter (.../app/utils/provideAriaRouter.tsx:17:3)
    at QueryClientProvider (.../sentry/sentry/node_modules/@.../react-query/src/QueryClientProvider.tsx:30:3)
    at ThemeProvider (.../sentry/sentry/node_modules/@.../react/dist/emotion-element-25f9958c.browser.cjs.js:83:32)
    at .../js/sentry-test/reactTestingLibrary.tsx:114:5
    at routeContext (.../sentry/sentry/node_modules/react-router/lib/hooks.tsx:658:26)
    at RenderErrorBoundary (.../sentry/sentry/node_modules/react-router/lib/hooks.tsx:584:5)
    at routes (.../sentry/sentry/node_modules/react-router-dom/index.tsx:760:3)
    at basenameProp (.../sentry/sentry/node_modules/react-router/lib/components.tsx:413:13)
    at fallbackElement (.../sentry/sentry/node_modules/react-router-dom/index.tsx:487:3)
    at console.captureMessage [as error] (.../sentry/sentry/node_modules/jest-fail-on-console/index.js:83:25)
    at printWarning (.../sentry/sentry/node_modules/react-dom/cjs/react-dom.development.js:86:30)
    at error (.../sentry/sentry/node_modules/react-dom/cjs/react-dom.development.js:60:7)
    at validateDOMNesting (.../sentry/sentry/node_modules/react-dom/cjs/react-dom.development.js:10849:7)
    at createInstance (.../sentry/sentry/node_modules/react-dom/cjs/react-dom.development.js:10930:5)
    at completeWork (.../sentry/sentry/node_modules/react-dom/cjs/react-dom.development.js:22226:28)
    at completeUnitOfWork (.../sentry/sentry/node_modules/react-dom/cjs/react-dom.development.js:26632:16)
    at performUnitOfWork (.../sentry/sentry/node_modules/react-dom/cjs/react-dom.development.js:26607:5)
    at workLoopSync (.../sentry/sentry/node_modules/react-dom/cjs/react-dom.development.js:26505:5)
    at renderRootSync (.../sentry/sentry/node_modules/react-dom/cjs/react-dom.development.js:26473:7)
    at performConcurrentWorkOnRoot (.../sentry/sentry/node_modules/react-dom/cjs/react-dom.development.js:25777:74)
    at flushActQueue (.../sentry/sentry/node_modules/react/cjs/react.development.js:2667:24)
    at act (.../sentry/sentry/node_modules/react/cjs/react.development.js:2582:11)
    at .../sentry/sentry/node_modules/@.../react/dist/act-compat.js:47:25
    at renderRoot (.../sentry/sentry/node_modules/@.../react/dist/pure.js:188:26)
    at Object.render (.../sentry/sentry/node_modules/@.../react/dist/pure.js:287:10)
    at render (.../js/sentry-test/reactTestingLibrary.tsx:272:28)
    at Object.<anonymous> (.../interfaces/performance/eventTraceView.spec.tsx:112:37)
    at Promise.then.completed (.../sentry/sentry/node_modules/jest-circus/build/utils.js:298:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (.../sentry/sentry/node_modules/jest-circus/build/utils.js:231:10)
    at _callCircusTest (.../sentry/sentry/node_modules/jest-circus/build/run.js:316:40)
    at processTicksAndRejections (node:internal/process/task_queues:105:5)
    at _runTest (.../sentry/sentry/node_modules/jest-circus/build/run.js:252:3)
    at _runTestsForDescribeBlock (.../sentry/sentry/node_modules/jest-circus/build/run.js:126:9)
    at _runTestsForDescribeBlock (.../sentry/sentry/node_modules/jest-circus/build/run.js:121:9)
    at run (.../sentry/sentry/node_modules/jest-circus/build/run.js:71:3)
    at runAndTransformResultsToJestFormat (.../sentry/sentry/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
    at jestAdapter (.../sentry/sentry/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
    at runTestInternal (.../sentry/sentry/node_modules/jest-runner/build/runTest.js:367:16)
    at runTest (.../sentry/sentry/node_modules/jest-runner/build/runTest.js:444:34)
    at Object.worker (.../sentry/sentry/node_modules/jest-runner/build/testWorker.js:106:12)
    at flushUnexpectedConsoleCalls (.../sentry/sentry/node_modules/jest-fail-on-console/index.js:48:13)
    at Object.<anonymous> (.../sentry/sentry/node_modules/jest-fail-on-console/index.js:139:7)
    at Promise.then.completed (.../sentry/sentry/node_modules/jest-circus/build/utils.js:298:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (.../sentry/sentry/node_modules/jest-circus/build/utils.js:231:10)
    at _callCircusHook (.../sentry/sentry/node_modules/jest-circus/build/run.js:281:40)
    at _runTest (.../sentry/sentry/node_modules/jest-circus/build/run.js:254:5)
    at _runTestsForDescribeBlock (.../sentry/sentry/node_modules/jest-circus/build/run.js:126:9)
    at _runTestsForDescribeBlock (.../sentry/sentry/node_modules/jest-circus/build/run.js:121:9)
    at run (.../sentry/sentry/node_modules/jest-circus/build/run.js:71:3)
    at runAndTransformResultsToJestFormat (.../sentry/sentry/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
    at jestAdapter (.../sentry/sentry/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
    at runTestInternal (.../sentry/sentry/node_modules/jest-runner/build/runTest.js:367:16)
    at runTest (.../sentry/sentry/node_modules/jest-runner/build/runTest.js:444:34)
    at Object.worker (.../sentry/sentry/node_modules/jest-runner/build/testWorker.js:106:12)

To view more test analytics, go to the Test Analytics Dashboard
_{📋 Got 3 mins? Take this short survey to help us improve Test Analytics.}

[JoshFerge]

amazing <3