From 8e4f987cf6d62fdd5753e943c9fd02cf829a2aae Mon Sep 17 00:00:00 2001
From: Palash gupta <palash@signoz.io>
Date: Sun, 6 Mar 2022 12:02:21 +0530
Subject: [PATCH 1/2] bug: timeline interval is updated

---
 frontend/src/container/Timeline/index.tsx | 36 ++++++++++-------------
 1 file changed, 16 insertions(+), 20 deletions(-)

diff --git a/frontend/src/container/Timeline/index.tsx b/frontend/src/container/Timeline/index.tsx
index c729ac15f0..0c20e35a60 100644
--- a/frontend/src/container/Timeline/index.tsx
+++ b/frontend/src/container/Timeline/index.tsx
@@ -1,36 +1,25 @@
-import React, { useState, useMemo } from 'react';
-import { isEqual } from 'lodash-es';
+import React, { useState, useMemo, useEffect } from 'react';
 import styles from './style.module.css';
 import { useMeasure } from 'react-use';
-import { toFixed } from 'utils/toFixed';
-import {
-	INTERVAL_UNITS,
-	resolveTimeFromInterval,
-} from 'container/TraceDetail/utils';
+import { INTERVAL_UNITS } from 'container/TraceDetail/utils';
 import useThemeMode from 'hooks/useThemeMode';
 import { Interval } from './types';
 import { getIntervalSpread, getIntervals } from './utils';
-interface TimelineProps {
-	traceMetaData: object;
-	globalTraceMetadata: object;
-	intervalUnit: object;
-	setIntervalUnit: Function;
-}
+
+const Timeline_Height = 22;
+const Timeline_H_Spacing = 0;
+
 const Timeline = ({
 	traceMetaData,
 	globalTraceMetadata,
-	intervalUnit,
 	setIntervalUnit,
 }: TimelineProps) => {
 	const [ref, { width }] = useMeasure<HTMLDivElement>();
 	const { isDarkMode } = useThemeMode();
 
-	const Timeline_Height = 22;
-	const Timeline_H_Spacing = 0;
-
 	const [intervals, setIntervals] = useState<Interval[] | null>(null);
 
-	useMemo(() => {
+	useEffect(() => {
 		const {
 			baseInterval,
 			baseSpread,
@@ -44,7 +33,7 @@ const Timeline = ({
 		for (const idx in INTERVAL_UNITS) {
 			const standard_interval = INTERVAL_UNITS[idx];
 			if (baseSpread * standard_interval.multiplier < 1) {
-				intervalUnit = INTERVAL_UNITS[idx - 1];
+				intervalUnit = INTERVAL_UNITS[idx];
 				break;
 			}
 		}
@@ -58,7 +47,7 @@ const Timeline = ({
 				intervalUnit,
 			}),
 		);
-	}, [traceMetaData, globalTraceMetadata]);
+	}, []);
 
 	return (
 		<div ref={ref} style={{ flex: 1, overflow: 'inherit' }}>
@@ -102,4 +91,11 @@ const Timeline = ({
 	);
 };
 
+interface TimelineProps {
+	traceMetaData: object;
+	globalTraceMetadata: object;
+	intervalUnit: object;
+	setIntervalUnit: Function;
+}
+
 export default Timeline;

From c04c0284dcb230a7b8793d4f5344b90c8c450715 Mon Sep 17 00:00:00 2001
From: Pranshu Chittora <pranshu@signoz.io>
Date: Mon, 7 Mar 2022 16:08:37 +0530
Subject: [PATCH 2/2] fix: add if condition for timeline interval

---
 frontend/src/container/Timeline/index.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/frontend/src/container/Timeline/index.tsx b/frontend/src/container/Timeline/index.tsx
index 0c20e35a60..8f25f5c290 100644
--- a/frontend/src/container/Timeline/index.tsx
+++ b/frontend/src/container/Timeline/index.tsx
@@ -33,7 +33,7 @@ const Timeline = ({
 		for (const idx in INTERVAL_UNITS) {
 			const standard_interval = INTERVAL_UNITS[idx];
 			if (baseSpread * standard_interval.multiplier < 1) {
-				intervalUnit = INTERVAL_UNITS[idx];
+				if (idx > 1) intervalUnit = INTERVAL_UNITS[idx - 1];
 				break;
 			}
 		}
@@ -68,10 +68,9 @@ const Timeline = ({
 				{intervals &&
 					intervals.map((interval, index) => (
 						<g
-							transform={`translate(${
-								Timeline_H_Spacing +
+							transform={`translate(${Timeline_H_Spacing +
 								(interval.percentage * (width - 2 * Timeline_H_Spacing)) / 100
-							},0)`}
+								},0)`}
 							className={styles['timeline-tick']}
 							key={interval.label + interval.percentage + index}
 						>