ref(replay): Replay timeline gaps using timestamp (#74406)

Refactors replay timeline gaps to use frame timestamps and styles `left`
and `width` instead of frame columns. Using timestamps instead of the
frame column makes it line up with breadcrumbs better. Switching to
styling `left` and `width` instead of the range of frames also fixed the
gap bug when zooming in on the timeline.

Also modified the gap logic:
When there's a background frame, a gap is created until the next frame
that's not a background frame or error frame. In most cases it will be
the foreground frame, but in cases of bad data it could be any other
replay frame.

Before:

![image](https://github.com/user-attachments/assets/51ad1b87-74f8-4c03-8274-b5409e5bac75)

After:

![image](https://github.com/user-attachments/assets/bbf19677-99e9-46d3-96aa-036f086542dc)
The gap is now a consistent `div` so there's no weird spots that the gap
doesn't cover. Additionally, the gap ends as soon as there's a frame
even if it isn't a foreground frame, which is more accurate.

Relates to #71665

static/app/components/replays/breadcrumbs/replayTimeline.tsx

@@ -40,7 +40,6 @@ export default function ReplayTimeline() {
   const durationMs = replay.getDurationMs();
   const startTimestampMs = replay.getStartTimestampMs();
   const chapterFrames = replay.getChapterFrames();
-  const appFrames = replay.getAppFrames();
 
   // timeline is in the middle
   const initialTranslate = 0.5 / timelineScale;
@@ -74,9 +73,8 @@ export default function ReplayTimeline() {
         {organization.features.includes('session-replay-timeline-gap') ? (
           <TimelineGaps
             durationMs={durationMs}
-            frames={appFrames}
-            totalFrames={chapterFrames.length}
-            width={width}
+            startTimestampMs={startTimestampMs}
+            frames={chapterFrames}
           />
         ) : null}
         <TimelineEventsContainer>

static/app/components/replays/breadcrumbs/timelineGaps.tsx

@@ -1,88 +1,86 @@
+import {Fragment} from 'react';
 import styled from '@emotion/styled';
 
-import * as Timeline from 'sentry/components/replays/breadcrumbs/timeline';
-import {getFramesByColumn} from 'sentry/components/replays/utils';
 import {Tooltip} from 'sentry/components/tooltip';
 import {t} from 'sentry/locale';
+import toPercent from 'sentry/utils/number/toPercent';
 import {
   isBackgroundFrame,
-  isForegroundFrame,
+  isErrorFrame,
   type ReplayFrame,
 } from 'sentry/utils/replays/types';
 
 interface Props {
   durationMs: number;
   frames: ReplayFrame[];
-  totalFrames: number;
-  width: number;
+  startTimestampMs: number;
 }
 
 // create gaps in the timeline by finding all columns between a background frame and foreground frame
 // or background frame to end of replay
-export default function TimelineGaps({durationMs, frames, totalFrames, width}: Props) {
-  const markerWidth = totalFrames < 200 ? 4 : totalFrames < 500 ? 6 : 10;
-  const totalColumns = Math.floor(width / markerWidth);
-  const framesByCol = getFramesByColumn(durationMs, frames, totalColumns);
+export default function TimelineGaps({durationMs, startTimestampMs, frames}: Props) {
+  const ranges: Array<{left: string; width: string}> = [];
 
-  // returns all numbers in the range, exclusive of start and inclusive of stop
-  const range = (start, stop) =>
-    Array.from({length: stop - start}, (_, i) => start + i + 1);
+  let start = -1;
+  let end = -1;
 
-  const gapCol: number[] = [];
-
-  const gapFrames = framesByCol.entries();
-  let currFrame = gapFrames.next();
-
-  while (!currFrame.done) {
-    let start = -1;
-    let end = -1;
-
-    // iterate through all frames until we have a start (background frame) and end (foreground frame) of gap or no more frames
-    while ((start === -1 || end === -1) && !currFrame.done) {
-      const [column, colFrame] = currFrame.value;
-      for (const frame of colFrame) {
-        // only considered start of gap if background frame hasn't been found yet
-        if (start === -1 && isBackgroundFrame(frame)) {
-          start = column;
-        }
-        // gap only ends if background frame has been found
-        if (start !== -1 && isForegroundFrame(frame)) {
-          end = column;
-        }
-      }
-      currFrame = gapFrames.next();
+  for (const currFrame of frames) {
+    // only considered start of gap if background frame hasn't been found yet
+    if (start === -1 && isBackgroundFrame(currFrame)) {
+      start = currFrame.timestampMs - startTimestampMs;
+    }
+    // gap only ends if a frame that's not a background frame or error frame has been found
+    if (start !== -1 && !isBackgroundFrame(currFrame) && !isErrorFrame(currFrame)) {
+      end = currFrame.timestampMs - startTimestampMs;
     }
 
-    // create gap if we found have start (background frame) and end (foreground frame)
+    // create gap if we found have start (background frame) and end (another frame)
     if (start !== -1 && end !== -1) {
-      gapCol.push(...range(start, end));
-    }
-    // if we have start but no end, that means we have a gap until end of replay
-    if (start !== -1 && end === -1) {
-      gapCol.push(...range(start, totalColumns));
+      ranges.push({
+        left: toPercent(start / durationMs),
+        width: toPercent((end - start) / durationMs),
+      });
+      start = -1;
+      end = -1;
     }
   }
 
+  // create gap if we still have start (background frame) until end of replay
+  if (start !== -1) {
+    ranges.push({
+      left: toPercent(start / durationMs),
+      width: toPercent((durationMs - start) / durationMs),
+    });
+  }
+
+  // TODO: Fix tooltip position to follow mouse (it currently goes off the timeline when zoomed too much)
   return (
-    <Timeline.Columns totalColumns={totalColumns} remainder={0}>
-      {gapCol.map(column => (
-        <Column key={column} column={column}>
-          <Tooltip title={t('App is suspended')} isHoverable containerDisplayMode="grid">
-            <Gap style={{width: `${markerWidth}px`}} />
-          </Tooltip>
-        </Column>
-      ))}
-    </Timeline.Columns>
+    <Fragment>
+      {ranges.map(rangeCss => {
+        return (
+          <Range key={`${rangeCss.left}-${rangeCss.width}`} style={rangeCss}>
+            <Tooltip
+              title={t('App is suspended')}
+              isHoverable
+              containerDisplayMode="block"
+              position="top"
+            >
+              <Gap />
+            </Tooltip>
+          </Range>
+        );
+      })}
+    </Fragment>
   );
 }
 
-const Column = styled(Timeline.Col)<{column: number}>`
-  grid-column: ${p => p.column};
-  line-height: 14px;
+const Range = styled('div')`
+  position: absolute;
 `;
 
-const Gap = styled('span')`
+const Gap = styled('div')`
   background: ${p => p.theme.gray400};
   opacity: 16%;
   height: 20px;
+  width: 100%;
 `;

static/app/utils/replays/replayReader.tsx

@@ -35,10 +35,8 @@ import {
   BreadcrumbCategories,
   EventType,
   IncrementalSource,
-  isBackgroundFrame,
   isDeadClick,
   isDeadRageClick,
-  isForegroundFrame,
   isPaintFrame,
   isWebVitalFrame,
 } from 'sentry/utils/replays/types';
@@ -555,12 +553,6 @@ export default class ReplayReader {
     return [];
   });
 
-  getAppFrames = memoize(() => {
-    return this._sortedBreadcrumbFrames.filter(
-      frame => isBackgroundFrame(frame) || isForegroundFrame(frame)
-    );
-  });
-
   getVideoEvents = () => this._videoEvents;
 
   getPaintFrames = memoize(() => this._sortedSpanFrames.filter(isPaintFrame));