fix(frontend): resolve timeline and flamegraph bugs

frontend/src/components/TimelineV3/TimelineV3.tsx

@@ -50,7 +50,7 @@ function TimelineV3(props: ITimelineV3Props): JSX.Element {
 		return <div />;
 	}
 
-	const strokeColor = isDarkMode ? ' rgb(192,193,195,0.8)' : 'black';
+	const strokeColor = isDarkMode ? 'rgb(192,193,195,0.8)' : 'black';
 
 	return (
 		<div ref={ref as never} className="timeline-v3-container">

frontend/src/components/TimelineV3/utils.ts

@@ -31,9 +31,14 @@ export function getIntervals(
 			  10 ** (integerPartLength - 1);
 
 	let intervalUnit: IIntervalUnit = INTERVAL_UNITS[0];
+	const maxLabelTimeMagnitude = Math.max(
+		intervalSpread,
+		Math.abs(offsetTimestamp),
+		Math.abs(offsetTimestamp + baseSpread),
+	);
 	for (let idx = INTERVAL_UNITS.length - 1; idx >= 0; idx -= 1) {
 		const standardInterval = INTERVAL_UNITS[idx];
-		if (intervalSpread * standardInterval.multiplier >= 1) {
+		if (maxLabelTimeMagnitude * standardInterval.multiplier >= 1) {
 			intervalUnit = INTERVAL_UNITS[idx];
 			break;
 		}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/TraceFlamegraph.tsx

@@ -17,9 +17,6 @@ enum TraceFlamegraphState {
 }
 
 interface TraceFlamegraphProps {
-	serviceExecTime: Record<string, number>;
-	startTime: number;
-	endTime: number;
 	selectedSpan: Span | undefined;
 }
 

frontend/src/pages/TraceDetailsV3/index.tsx

@@ -1,27 +1,16 @@
 import { useState } from 'react';
-import { useParams } from 'react-router-dom';
 import {
 	ResizableHandle,
 	ResizablePanel,
 	ResizablePanelGroup,
 } from '@signozhq/resizable';
-import useGetTraceV2 from 'hooks/trace/useGetTraceV2';
-import { Span, TraceDetailV2URLProps } from 'types/api/trace/getTraceV2';
+import { Span } from 'types/api/trace/getTraceV2';
 
 import TraceDetailsHeader from './TraceDetailsHeader/TraceDetailsHeader';
 import TraceFlamegraph from './TraceFlamegraph/TraceFlamegraph';
 
 function TraceDetailsV3(): JSX.Element {
-	const { id: traceId } = useParams<TraceDetailV2URLProps>();
 	const [selectedSpan, _setSelectedSpan] = useState<Span>();
-	const [uncollapsedNodes] = useState<string[]>([]);
-
-	const { data: traceData } = useGetTraceV2({
-		traceId,
-		uncollapsedSpans: uncollapsedNodes,
-		selectedSpanId: '',
-		isSelectedSpanIDUnCollapsed: false,
-	});
 
 	return (
 		<div
@@ -38,12 +27,7 @@ function TraceDetailsV3(): JSX.Element {
 				style={{ flex: 1 }}
 			>
 				<ResizablePanel defaultSize={40} minSize={20} maxSize={80}>
-					<TraceFlamegraph
-						serviceExecTime={traceData?.payload?.serviceNameToTotalDurationMap || {}}
-						startTime={traceData?.payload?.startTimestampMillis || 0}
-						endTime={traceData?.payload?.endTimestampMillis || 0}
-						selectedSpan={selectedSpan}
-					/>
+					<TraceFlamegraph selectedSpan={selectedSpan} />
 				</ResizablePanel>
 				<ResizableHandle withHandle />
 				<ResizablePanel defaultSize={60} minSize={20}>