From ab10a699b1a67e7b7c13f52c7cabbabb3ba57e91 Mon Sep 17 00:00:00 2001
From: palash-signoz <palash@signoz.io>
Date: Thu, 17 Mar 2022 11:56:25 +0530
Subject: [PATCH] feat: timestamp is updated for selected start time (#852)

* feat: timestamp is updated for selected start time

* feat: startTime for the tree is updated
---
 frontend/src/container/Timeline/index.tsx    | 18 +++++++++++++-----
 frontend/src/container/TraceDetail/index.tsx |  5 +++--
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/frontend/src/container/Timeline/index.tsx b/frontend/src/container/Timeline/index.tsx
index 9ce598b679..5f8dbe7ffa 100644
--- a/frontend/src/container/Timeline/index.tsx
+++ b/frontend/src/container/Timeline/index.tsx
@@ -35,7 +35,8 @@ const Timeline = ({
 		for (let idx = 0; idx < INTERVAL_UNITS.length; idx++) {
 			const standard_interval = INTERVAL_UNITS[idx];
 			if (baseSpread * standard_interval.multiplier < 1) {
-				if (idx > 1) intervalUnit = INTERVAL_UNITS[idx - 1];
+				const index = parseInt(idx, 10);
+				if (index > 1) intervalUnit = INTERVAL_UNITS[index - 1];
 				break;
 			}
 		}
@@ -69,9 +70,10 @@ const Timeline = ({
 				{intervals &&
 					intervals.map((interval, index) => (
 						<TimelineInterval
-							transform={`translate(${Timeline_H_Spacing +
+							transform={`translate(${
+								Timeline_H_Spacing +
 								(interval.percentage * (width - 2 * Timeline_H_Spacing)) / 100
-								},0)`}
+							},0)`}
 							key={`${interval.label + interval.percentage + index}`}
 						>
 							<text y={13} fill={isDarkMode ? 'white' : 'black'}>
@@ -91,10 +93,16 @@ const Timeline = ({
 };
 
 interface TimelineProps {
-	traceMetaData: object;
+	traceMetaData: {
+		globalStart: number;
+		globalEnd: number;
+		spread: number;
+		totalSpans: number;
+		levels: number;
+	};
 	globalTraceMetadata: Record<string, number>;
 	intervalUnit: IIntervalUnit;
-	setIntervalUnit: VoidFunction;
+	setIntervalUnit: React.Dispatch<React.SetStateAction<IIntervalUnit>>;
 }
 
 export default Timeline;
diff --git a/frontend/src/container/TraceDetail/index.tsx b/frontend/src/container/TraceDetail/index.tsx
index e89d78530a..59c6162fac 100644
--- a/frontend/src/container/TraceDetail/index.tsx
+++ b/frontend/src/container/TraceDetail/index.tsx
@@ -48,7 +48,8 @@ const TraceDetail = ({ response }: TraceDetailProps): JSX.Element => {
 	);
 
 	const { treeData: tree, ...traceMetaData } = useMemo(() => {
-		return getSpanTreeMetadata(getSortedData(treeData), spanServiceColors);
+		const tree = getSortedData(treeData);
+		return getSpanTreeMetadata(tree, spanServiceColors);
 	}, [treeData, spanServiceColors]);
 
 	const [globalTraceMetadata] = useState<Record<string, number>>({
@@ -119,7 +120,7 @@ const TraceDetail = ({ response }: TraceDetailProps): JSX.Element => {
 							justifyContent: 'center',
 						}}
 					>
-						{dayjs(traceMetaData.globalStart / 1e6).format('hh:mm:ssa MM/DD')}
+						{tree && dayjs(tree.startTime).format('hh:mm:ss a MM/DD')}
 					</StyledCol>
 					<StyledCol flex="auto" styledclass={[styles.timelineContainer]}>
 						<Timeline