fix: trace detail events error handling

frontend/src/container/Timeline/index.tsx

@@ -49,7 +49,8 @@ const Timeline = ({
 			}
 		}
 
-		setIntervalUnit(intervalUnit);
+		debugger;
+		intervalUnit = intervalUnit || INTERVAL_UNITS[0]
 		setIntervals(
 			getIntervals({
 				baseInterval,
@@ -58,6 +59,7 @@ const Timeline = ({
 				intervalUnit,
 			}),
 		);
+		setIntervalUnit(intervalUnit);
 	}, [traceMetaData, globalTraceMetadata]);
 
 	return (
@@ -79,8 +81,7 @@ 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)`}
 							className={styles['timeline-tick']}

frontend/src/container/Timeline/utils.ts

@@ -46,6 +46,7 @@ export const getIntervals = ({
 	intervalSpreadNormalized,
 	intervalUnit,
 }) => {
+	debugger
 	const intervals: Interval[] = [
 		{
 			label: `${toFixed(resolveTimeFromInterval(baseInterval, intervalUnit), 2)}${
@@ -68,7 +69,7 @@ export const getIntervals = ({
 			tempBaseSpread -= intervalSpreadNormalized;
 		}
 		elapsedIntervals = interval_time;
-
+		debugger;
 		const interval: Interval = {
 			label: `${toFixed(
 				resolveTimeFromInterval(interval_time + baseInterval, intervalUnit),

frontend/src/container/TraceDetail/SelectedSpanDetails/ErrorTag.tsx

@@ -1,7 +1,9 @@
-import { Button, Modal, Collapse } from 'antd';
+import { Button, Collapse, Modal } from 'antd';
 import useThemeMode from 'hooks/useThemeMode';
+import { keys, map } from 'lodash-es';
 import React, { useRef, useState } from 'react';
 import { ITraceTree } from 'types/api/trace/getTraceItem';
+
 import { CustomSubText, CustomSubTitle } from './styles';
 // import Editor from 'components/Editor';
 
@@ -23,9 +25,8 @@ const ErrorTag = ({ event }: ErrorTagProps) => {
 
 	return (
 		<>
-			{event?.map(({ attributeMap, name }) => {
-				const attributes = Object.keys(attributeMap);
-
+			{map(event, ({ attributeMap, name }) => {
+				const attributes = keys(attributeMap);
 				return (
 					<Collapse
 						defaultActiveKey={[name || attributeMap.event]}
@@ -35,7 +36,7 @@ const ErrorTag = ({ event }: ErrorTagProps) => {
 							header={name || attributeMap?.event}
 							key={name || attributeMap.event}
 						>
-							{attributes.map((event) => {
+							{map(attributes, (event) => {
 								const value = attributeMap[event];
 								const isEllipsed = value.length > 24;
 
@@ -62,8 +63,6 @@ const ErrorTag = ({ event }: ErrorTagProps) => {
 												</Button>
 											)}
 										</CustomSubText>
-
-
 									</>
 								);
 							})}

frontend/src/container/TraceDetail/index.tsx

@@ -17,8 +17,9 @@ import styles from './TraceGraph.module.css';
 import history from 'lib/history';
 import { SPAN_DETAILS_LEFT_COL_WIDTH } from 'pages/TraceDetail/constants';
 import { INTERVAL_UNITS } from './utils';
-
+import { Mock_Response } from './MockResponse'
 const TraceDetail = ({ response }: TraceDetailProps): JSX.Element => {
+	response = Mock_Response
 	const spanServiceColors = useMemo(
 		() => spanServiceNameToColorMapping(response[0].events),
 		[response],