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 (
{span.duration.toFixed(2)}ms
}
skipWrapper
disableForVisualTest
position="bottom"
>
setActiveTab('network')}
/>