import {Fragment, memo} from 'react'; import styled from '@emotion/styled'; import {divide, flattenSpans} from 'sentry/components/replays/utils'; import Tooltip from 'sentry/components/tooltip'; import {tn} from 'sentry/locale'; import ConfigStore from 'sentry/stores/configStore'; import space from 'sentry/styles/space'; import useActiveReplayTab from 'sentry/utils/replays/hooks/useActiveReplayTab'; import type {ReplaySpan} from 'sentry/views/replays/types'; type Props = { /** * Duration, in milliseconds, of the timeline */ durationMs: number; /** * The spans to render into the timeline */ spans: ReplaySpan[]; /** * Timestamp when the timeline begins, in milliseconds */ startTimestampMs: number; /** * Extra classNames */ className?: string; }; function ReplayTimelineEvents({className, durationMs, spans, startTimestampMs}: Props) { const flattenedSpans = flattenSpans(spans); const {setActiveTab} = useActiveReplayTab(); return ( {flattenedSpans.map((span, i) => { const sinceStart = span.startTimestamp - startTimestampMs; const startPct = divide(sinceStart, durationMs); const widthPct = divide(span.duration, durationMs); const requestsCount = tn( '%s network request', '%s network requests', span.spanCount ); return ( {requestsCount}
{span.duration.toFixed(2)}ms } skipWrapper disableForVisualTest position="bottom" > setActiveTab('network')} />
); })}
); } const Spans = styled('ul')` /* Reset defaults for