feat(replays): Implement isHovered states for DOM and Network tabs (#42558)

This change adds logic to render isCurrent and isHovered lines in the
DOM and Network tabs on the Replay Details page.

There's also some cleanup of internal variables and things to make each
tab more similar to each other.

The DOM tab has subtle ui changes, when you're hovering something the
gray200 line appears. The network tab has some other changes to match
what's in the latest figma:
https://www.figma.com/file/OPFnT04z0uy8BEUms9OU4f/Specs%3A-Details-v3?node-id=604%3A17755&t=372r9SfA2ONS8RXR-0

| Before | After |
| --- | --- |
| <img width="766" alt="SCR-20221221-ikg"
src="https://user-images.githubusercontent.com/187460/208976581-5a999467-e298-453b-8913-972dbca46766.png">
| <img width="769" alt="SCR-20221221-ijy"
src="https://user-images.githubusercontent.com/187460/208976589-f0afe18d-1945-4b69-aca9-ef472b8642a7.png">
|
| <img width="564" alt="SCR-20221221-in2"
src="https://user-images.githubusercontent.com/187460/208977051-ce0e1231-3ae2-41a8-983f-7a159f8f1052.png">
| <img width="563" alt="SCR-20221221-imy"
src="https://user-images.githubusercontent.com/187460/208977075-2146dc3e-4952-4a58-8334-e4eb12753fab.png">
|

Relates to #38948

Author: ryan953

static/app/utils/replays/hooks/useCrumbHandlers.tsx

@@ -4,6 +4,7 @@ import {useReplayContext} from 'sentry/components/replays/replayContext';
 import {relativeTimeInMs} from 'sentry/components/replays/utils';
 import {BreadcrumbType, Crumb} from 'sentry/types/breadcrumbs';
 import useActiveReplayTab from 'sentry/utils/replays/hooks/useActiveReplayTab';
+import type {NetworkSpan} from 'sentry/views/replays/types';
 
 function useCrumbHandlers(startTimestampMs: number = 0) {
   const {
@@ -16,7 +17,7 @@ function useCrumbHandlers(startTimestampMs: number = 0) {
   const {setActiveTab} = useActiveReplayTab();
 
   const handleMouseEnter = useCallback(
-    (item: Crumb) => {
+    (item: Crumb | NetworkSpan) => {
       if (startTimestampMs) {
         setCurrentHoverTime(relativeTimeInMs(item.timestamp ?? '', startTimestampMs));
       }
@@ -32,7 +33,7 @@ function useCrumbHandlers(startTimestampMs: number = 0) {
   );
 
   const handleMouseLeave = useCallback(
-    (item: Crumb) => {
+    (item: Crumb | NetworkSpan) => {
       setCurrentHoverTime(undefined);
 
       if (item.data && 'nodeId' in item.data) {
@@ -43,21 +44,23 @@ function useCrumbHandlers(startTimestampMs: number = 0) {
   );
 
   const handleClick = useCallback(
-    (crumb: Crumb) => {
+    (crumb: Crumb | NetworkSpan) => {
       if (crumb.timestamp !== undefined) {
         setCurrentTime(relativeTimeInMs(crumb.timestamp, startTimestampMs));
       }
 
-      switch (crumb.type) {
-        case BreadcrumbType.NAVIGATION:
-          setActiveTab('network');
-          break;
-        case BreadcrumbType.UI:
-          setActiveTab('dom');
-          break;
-        default:
-          setActiveTab('console');
-          break;
+      if ('type' in crumb) {
+        switch (crumb.type) {
+          case BreadcrumbType.NAVIGATION:
+            setActiveTab('network');
+            break;
+          case BreadcrumbType.UI:
+            setActiveTab('dom');
+            break;
+          default:
+            setActiveTab('console');
+            break;
+        }
       }
     },
     [setCurrentTime, startTimestampMs, setActiveTab]

static/app/views/replays/detail/domMutations/index.tsx

@@ -29,26 +29,36 @@ import useVirtualizedList from 'sentry/views/replays/detail/useVirtualizedList';
 
 type Props = {
   replay: null | ReplayReader;
+  startTimestampMs: number;
 };
 
-function DomMutations({replay}: Props) {
-  const startTimestampMs = replay?.getReplay()?.startedAt?.getTime() || 0;
-  const {currentTime} = useReplayContext();
+function DomMutations({replay, startTimestampMs}: Props) {
+  const {currentTime, currentHoverTime} = useReplayContext();
   const {isLoading, actions} = useExtractedCrumbHtml({replay});
 
   const filterProps = useDomFilters({actions: actions || []});
   const {items, setSearchTerm} = filterProps;
   const clearSearchTerm = () => setSearchTerm('');
 
-  const currentDomMutation = getPrevReplayEvent({
-    items: items.map(mutation => mutation.crumb),
+  const {handleMouseEnter, handleMouseLeave, handleClick} =
+    useCrumbHandlers(startTimestampMs);
+
+  const crumbs = items.map(mutation => mutation.crumb);
+  const current = getPrevReplayEvent({
+    items: crumbs,
     targetTimestampMs: startTimestampMs + currentTime,
     allowEqual: true,
     allowExact: true,
   });
 
-  const {handleMouseEnter, handleMouseLeave, handleClick} =
-    useCrumbHandlers(startTimestampMs);
+  const hovered = currentHoverTime
+    ? getPrevReplayEvent({
+        items: crumbs,
+        targetTimestampMs: startTimestampMs + currentHoverTime,
+        allowEqual: true,
+        allowExact: true,
+      })
+    : null;
 
   const listRef = useRef<ReactVirtualizedList>(null);
   const {cache} = useVirtualizedList({
@@ -80,7 +90,8 @@ function DomMutations({replay}: Props) {
           onMouseEnter={() => handleMouseEnter(crumb)}
           onMouseLeave={() => handleMouseLeave(crumb)}
           style={style}
-          isCurrent={crumb.id === currentDomMutation?.id}
+          isCurrent={crumb.id === current?.id}
+          isHovered={crumb.id === hovered?.id}
         >
           <IconWrapper color={crumb.color} hasOccurred={hasOccurred}>
             <BreadcrumbIcon type={crumb.type} />
@@ -193,13 +204,16 @@ const IconWrapper = styled('div')<
   z-index: 2;
 `;
 
-const MutationListItem = styled('li')<{isCurrent?: boolean}>`
+const MutationListItem = styled('li')<{isCurrent: boolean; isHovered: boolean}>`
   display: flex;
   gap: ${space(1)};
   flex-grow: 1;
   padding: ${space(1)} ${space(1.5)};
   position: relative;
-  border-bottom: 1px solid ${p => (p.isCurrent ? p.theme.purple300 : 'transparent')};
+  border-bottom: 1px solid
+    ${p =>
+      p.isCurrent ? p.theme.purple300 : p.isHovered ? p.theme.purple200 : 'transparent'};
+
   &:hover {
     background-color: ${p => p.theme.backgroundSecondary};
   }

static/app/views/replays/detail/focusArea.tsx

@@ -28,8 +28,8 @@ function FocusArea({}: Props) {
     case 'network':
       return (
         <NetworkList
-          replayRecord={replay?.getReplay()}
           networkSpans={replay?.getNetworkSpans()}
+          startTimestampMs={replay?.getReplay()?.startedAt?.getTime() || 0}
         />
       );
     case 'trace':
@@ -48,7 +48,12 @@ function FocusArea({}: Props) {
         />
       );
     case 'dom':
-      return <DomMutations replay={replay} />;
+      return (
+        <DomMutations
+          replay={replay}
+          startTimestampMs={replay?.getReplay()?.startedAt?.getTime() || 0}
+        />
+      );
     case 'memory':
       return (
         <MemoryChart