diff --git a/frontend/src/components/Graph/Plugin/Legend.ts b/frontend/src/components/Graph/Plugin/Legend.ts
index 2f03db40ac..b8ec2facf9 100644
--- a/frontend/src/components/Graph/Plugin/Legend.ts
+++ b/frontend/src/components/Graph/Plugin/Legend.ts
@@ -1,5 +1,6 @@
 import { Chart, ChartType, Plugin } from 'chart.js';
 import { colors } from 'lib/getRandomColor';
+import { get } from 'lodash-es';
 
 const getOrCreateLegendList = (
 	chart: Chart,
@@ -40,9 +41,20 @@ export const legend = (id: string, isLonger: boolean): Plugin<ChartType> => {
 			}
 
 			// Reuse the built-in legendItems generator
-			const items = chart?.options?.plugins?.legend?.labels?.generateLabels(chart);
+			const items = get(chart, [
+				'options',
+				'plugins',
+				'legend',
+				'labels',
+				'generateLabels',
+			])
+				? get(chart, ['options', 'plugins', 'legend', 'labels', 'generateLabels'])(
+						chart,
+				  )
+				: null;
 
-			items?.forEach((item, index) => {
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			items?.forEach((item: Record<any, any>, index: number) => {
 				const li = document.createElement('li');
 				li.style.alignItems = 'center';
 				li.style.cursor = 'pointer';
@@ -66,8 +78,8 @@ export const legend = (id: string, isLonger: boolean): Plugin<ChartType> => {
 
 				// Color box
 				const boxSpan = document.createElement('span');
-				boxSpan.style.background = item.strokeStyle || colors[0];
-				boxSpan.style.borderColor = item?.strokeStyle;
+				boxSpan.style.background = `${item.strokeStyle}` || `${colors[0]}`;
+				boxSpan.style.borderColor = `${item?.strokeStyle}`;
 				boxSpan.style.borderWidth = `${item.lineWidth}px`;
 				boxSpan.style.display = 'inline-block';
 				boxSpan.style.minHeight = '20px';
diff --git a/frontend/src/components/NotFound/NotFound.test.tsx b/frontend/src/components/NotFound/NotFound.test.tsx
index e00ecc939f..c8aab78ef7 100644
--- a/frontend/src/components/NotFound/NotFound.test.tsx
+++ b/frontend/src/components/NotFound/NotFound.test.tsx
@@ -1,3 +1,4 @@
+import { expect } from '@jest/globals';
 import { render } from '@testing-library/react';
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
diff --git a/frontend/src/components/Styled/index.ts b/frontend/src/components/Styled/index.ts
index 317a0f660e..ffa3fbccc0 100644
--- a/frontend/src/components/Styled/index.ts
+++ b/frontend/src/components/Styled/index.ts
@@ -6,8 +6,8 @@ import styled, { FlattenSimpleInterpolation } from 'styled-components';
 
 import { IStyledClass } from './types';
 
-const styledClass = (props: IStyledClass): FlattenSimpleInterpolation =>
-	props.styledclass;
+const styledClass = (props: IStyledClass): FlattenSimpleInterpolation | null =>
+	props.styledclass || null;
 
 type TStyledCol = AntD.ColProps & IStyledClass;
 const StyledCol = styled(AntD.Col)<TStyledCol>`
diff --git a/frontend/src/components/Styled/styles.ts b/frontend/src/components/Styled/styles.ts
index 8425beae07..9ff0b54146 100644
--- a/frontend/src/components/Styled/styles.ts
+++ b/frontend/src/components/Styled/styles.ts
@@ -1,6 +1,7 @@
 import { css, FlattenSimpleInterpolation } from 'styled-components';
 
-const cssProprty = (key: string, value): FlattenSimpleInterpolation =>
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const cssProperty = (key: any, value: any): FlattenSimpleInterpolation =>
 	key &&
 	value &&
 	css`
@@ -15,8 +16,8 @@ export const Flex = ({
 	flexDirection,
 	flex,
 }: IFlexProps): FlattenSimpleInterpolation => css`
-	${cssProprty('flex-direction', flexDirection)}
-	${cssProprty('flex', flex)}
+	${cssProperty('flex-direction', flexDirection)}
+	${cssProperty('flex', flex)}
 `;
 
 interface IDisplayProps {
@@ -25,7 +26,7 @@ interface IDisplayProps {
 export const Display = ({
 	display,
 }: IDisplayProps): FlattenSimpleInterpolation => css`
-	${cssProprty('display', display)}
+	${cssProperty('display', display)}
 `;
 
 interface ISpacingProps {
@@ -36,6 +37,6 @@ export const Spacing = ({
 	margin,
 	padding,
 }: ISpacingProps): FlattenSimpleInterpolation => css`
-	${cssProprty('margin', margin)}
-	${cssProprty('padding', padding)}
+	${cssProperty('margin', margin)}
+	${cssProperty('padding', padding)}
 `;
diff --git a/frontend/src/container/AllAlertChannels/Delete.tsx b/frontend/src/container/AllAlertChannels/Delete.tsx
index 6f767d8bd1..4501c916c8 100644
--- a/frontend/src/container/AllAlertChannels/Delete.tsx
+++ b/frontend/src/container/AllAlertChannels/Delete.tsx
@@ -30,7 +30,7 @@ function Delete({ notifications, setChannels, id }: DeleteProps): JSX.Element {
 		} catch (error) {
 			notifications.error({
 				message: 'Error',
-				description: error.toString() || 'Something went wrong',
+				description: error instanceof Error ? error.toString() : 'Something went wrong',
 			});
 			setLoading(false);
 		}
diff --git a/frontend/src/container/GantChart/SpanLength/index.tsx b/frontend/src/container/GantChart/SpanLength/index.tsx
index 4ee15a9332..4e27e6e624 100644
--- a/frontend/src/container/GantChart/SpanLength/index.tsx
+++ b/frontend/src/container/GantChart/SpanLength/index.tsx
@@ -33,7 +33,7 @@ function SpanLength(props: SpanLengthProps): JSX.Element {
 				leftOffset={leftOffset}
 				width={width}
 			/>
-			<SpanText leftOffset={leftOffset}>{`${toFixed(
+			<SpanText isDarkMode={isDarkMode} leftOffset={leftOffset}>{`${toFixed(
 				resolveTimeFromInterval(inMsCount, intervalUnit),
 				2,
 			)} ${intervalUnit.name}`}</SpanText>
diff --git a/frontend/src/container/GridGraphLayout/Graph/FullView/EmptyGraph.tsx b/frontend/src/container/GridGraphLayout/Graph/FullView/EmptyGraph.tsx
index de4d563acb..c284d83b7c 100644
--- a/frontend/src/container/GridGraphLayout/Graph/FullView/EmptyGraph.tsx
+++ b/frontend/src/container/GridGraphLayout/Graph/FullView/EmptyGraph.tsx
@@ -60,6 +60,7 @@ function EmptyGraph({
 
 	return (
 		<Graph
+			name=""
 			{...{
 				type: 'line',
 				onClickHandler,
diff --git a/frontend/src/container/GridGraphLayout/index.tsx b/frontend/src/container/GridGraphLayout/index.tsx
index 046c9473ad..e5676c8f7b 100644
--- a/frontend/src/container/GridGraphLayout/index.tsx
+++ b/frontend/src/container/GridGraphLayout/index.tsx
@@ -154,7 +154,8 @@ function GridGraph(): JSX.Element {
 					});
 				} catch (error) {
 					notification.error({
-						message: error.toString() || 'Something went wrong',
+						message:
+							error instanceof Error ? error.toString() : 'Something went wrong',
 					});
 				}
 			}
diff --git a/frontend/src/container/NewWidget/LeftContainer/QuerySection/Query.tsx b/frontend/src/container/NewWidget/LeftContainer/QuerySection/Query.tsx
index 42b22fe206..97aa24d180 100644
--- a/frontend/src/container/NewWidget/LeftContainer/QuerySection/Query.tsx
+++ b/frontend/src/container/NewWidget/LeftContainer/QuerySection/Query.tsx
@@ -2,8 +2,8 @@ import { Button, Divider } from 'antd';
 import Input from 'components/Input';
 import TextToolTip from 'components/TextToolTip';
 import { timePreferance } from 'container/NewWidget/RightContainer/timeItems';
-import React, { useCallback, useState } from 'react';
-import { connect } from 'react-redux';
+import React, { useCallback, useMemo, useState } from 'react';
+import { connect, useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { bindActionCreators, Dispatch } from 'redux';
 import { ThunkDispatch } from 'redux-thunk';
@@ -12,8 +12,11 @@ import {
 	UpdateQuery,
 	UpdateQueryProps,
 } from 'store/actions/dashboard/updateQuery';
+import { AppState } from 'store/reducers';
 import AppActions from 'types/actions';
 import { DeleteQueryProps } from 'types/actions/dashboard';
+import { Widgets } from 'types/api/dashboard/getAll';
+import DashboardReducer from 'types/reducer/dashboards';
 
 import {
 	ButtonContainer,
@@ -32,10 +35,27 @@ function Query({
 	const [promqlQuery, setPromqlQuery] = useState(preQuery);
 	const [legendFormat, setLegendFormat] = useState(preLegend);
 	const { search } = useLocation();
+	const { dashboards } = useSelector<AppState, DashboardReducer>(
+		(state) => state.dashboards,
+	);
+
+	const [selectedDashboards] = dashboards;
+	const { widgets } = selectedDashboards.data;
 
 	const query = new URLSearchParams(search);
 	const widgetId = query.get('widgetId') || '';
 
+	const urlQuery = useMemo(() => {
+		return new URLSearchParams(search);
+	}, [search]);
+
+	const getWidget = useCallback(() => {
+		const widgetId = urlQuery.get('widgetId');
+		return widgets?.find((e) => e.id === widgetId);
+	}, [widgets, urlQuery]);
+
+	const selectedWidget = getWidget() as Widgets;
+
 	const onChangeHandler = useCallback(
 		(setFunc: React.Dispatch<React.SetStateAction<string>>, value: string) => {
 			setFunc(value);
@@ -49,6 +69,7 @@ function Query({
 			legend: legendFormat,
 			query: promqlQuery,
 			widgetId,
+			yAxisUnit: selectedWidget.yAxisUnit,
 		});
 	};
 
diff --git a/frontend/src/container/NewWidget/RightContainer/YAxisUnitSelector.tsx b/frontend/src/container/NewWidget/RightContainer/YAxisUnitSelector.tsx
index 0401069b2e..c93c2e8e20 100644
--- a/frontend/src/container/NewWidget/RightContainer/YAxisUnitSelector.tsx
+++ b/frontend/src/container/NewWidget/RightContainer/YAxisUnitSelector.tsx
@@ -19,11 +19,11 @@ function YAxisUnitSelector({
 	fieldLabel,
 }: {
 	defaultValue: string;
-	onSelect: (e: string | undefined) => void;
+	onSelect: React.Dispatch<React.SetStateAction<string>>;
 	fieldLabel: string;
 }): JSX.Element {
 	const onSelectHandler = (selectedValue: string): void => {
-		onSelect(findCategoryByName(selectedValue)?.id);
+		onSelect(findCategoryByName(selectedValue)?.id || '');
 	};
 	const options = flattenedCategories.map((options) => ({
 		value: options.name,
diff --git a/frontend/src/container/Timeline/index.tsx b/frontend/src/container/Timeline/index.tsx
index a8a12927bb..1ecea1f59f 100644
--- a/frontend/src/container/Timeline/index.tsx
+++ b/frontend/src/container/Timeline/index.tsx
@@ -1,4 +1,5 @@
 import { StyledDiv } from 'components/Styled';
+import { ITraceMetaData } from 'container/GantChart';
 import { IIntervalUnit, INTERVAL_UNITS } from 'container/TraceDetail/utils';
 import useThemeMode from 'hooks/useThemeMode';
 import React, { useEffect, useRef, useState } from 'react';
@@ -74,10 +75,9 @@ function Timeline({
 				{intervals &&
 					intervals.map((interval, index) => (
 						<TimelineInterval
-							transform={`translate(${
-								TimelineHSpacing +
+							transform={`translate(${TimelineHSpacing +
 								(interval.percentage * (width - 2 * TimelineHSpacing)) / 100
-							},0)`}
+								},0)`}
 							key={`${interval.label + interval.percentage + index}`}
 						>
 							<text y={13} fill={isDarkMode ? 'white' : 'black'}>
@@ -104,7 +104,7 @@ interface TimelineProps {
 		totalSpans: number;
 		levels: number;
 	};
-	globalTraceMetadata: Record<string, number>;
+	globalTraceMetadata: ITraceMetaData;
 	setIntervalUnit: React.Dispatch<React.SetStateAction<IIntervalUnit>>;
 }
 
diff --git a/frontend/src/container/Timeline/utils.ts b/frontend/src/container/Timeline/utils.ts
index 60bec06331..1f4367c88e 100644
--- a/frontend/src/container/Timeline/utils.ts
+++ b/frontend/src/container/Timeline/utils.ts
@@ -1,3 +1,4 @@
+import { ITraceMetaData } from 'container/GantChart';
 import {
 	IIntervalUnit,
 	resolveTimeFromInterval,
@@ -7,14 +8,12 @@ import { toFixed } from 'utils/toFixed';
 
 import { Interval } from './types';
 
-type TMetaDataType = Record<string, never>;
-
 export const getIntervalSpread = ({
 	localTraceMetaData,
 	globalTraceMetadata,
 }: {
-	localTraceMetaData: TMetaDataType;
-	globalTraceMetadata: TMetaDataType;
+	localTraceMetaData: ITraceMetaData;
+	globalTraceMetadata: ITraceMetaData;
 }): {
 	baseInterval: number;
 	baseSpread: number;
diff --git a/frontend/src/container/Trace/Graph/config.ts b/frontend/src/container/Trace/Graph/config.ts
index de6408354c..ed0f383d9c 100644
--- a/frontend/src/container/Trace/Graph/config.ts
+++ b/frontend/src/container/Trace/Graph/config.ts
@@ -69,6 +69,8 @@ export const getChartDataforGroupBy = (
 	const allGroupBy = Object.keys(items).map((e) => items[e].groupBy);
 
 	keys(allGroupBy).forEach((e: string): void => {
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-ignore
 		const { length } = keys(allGroupBy[e]);
 
 		if (length >= max) {
diff --git a/frontend/src/container/Trace/Graph/index.tsx b/frontend/src/container/Trace/Graph/index.tsx
index 01630d4711..179ff792de 100644
--- a/frontend/src/container/Trace/Graph/index.tsx
+++ b/frontend/src/container/Trace/Graph/index.tsx
@@ -43,7 +43,7 @@ function TraceGraph(): JSX.Element {
 	}
 
 	return (
-		<Container ref={ref}>
+		<Container ref={ref as never}>
 			<Graph
 				animate={false}
 				data={ChartData}
diff --git a/frontend/src/container/TraceDetail/index.tsx b/frontend/src/container/TraceDetail/index.tsx
index 3207feee73..489eaa4f26 100644
--- a/frontend/src/container/TraceDetail/index.tsx
+++ b/frontend/src/container/TraceDetail/index.tsx
@@ -9,7 +9,7 @@ import {
 	StyledTypography,
 } from 'components/Styled';
 import * as StyledStyles from 'components/Styled/styles';
-import GanttChart from 'container/GantChart';
+import GanttChart, { ITraceMetaData } from 'container/GantChart';
 import { getNodeById } from 'container/GantChart/utils';
 import Timeline from 'container/Timeline';
 import TraceFlameGraph from 'container/TraceFlameGraph';
@@ -55,7 +55,7 @@ function TraceDetail({ response }: TraceDetailProps): JSX.Element {
 		/* eslint-enable */
 	}, [treeData, spanServiceColors]);
 
-	const [globalTraceMetadata] = useState<Record<string, number>>({
+	const [globalTraceMetadata] = useState<ITraceMetaData>({
 		...traceMetaData,
 	});
 
@@ -129,7 +129,6 @@ function TraceDetail({ response }: TraceDetailProps): JSX.Element {
 						<Timeline
 							globalTraceMetadata={globalTraceMetadata}
 							traceMetaData={traceMetaData}
-							intervalUnit={intervalUnit}
 							setIntervalUnit={setIntervalUnit}
 						/>
 					</StyledCol>
diff --git a/frontend/src/container/TraceFlameGraph/__tests__/TraceFlameGraph.test.tsx b/frontend/src/container/TraceFlameGraph/__tests__/TraceFlameGraph.test.tsx
index 7a8e1381d0..f97e41764c 100644
--- a/frontend/src/container/TraceFlameGraph/__tests__/TraceFlameGraph.test.tsx
+++ b/frontend/src/container/TraceFlameGraph/__tests__/TraceFlameGraph.test.tsx
@@ -1,9 +1,42 @@
 import { expect } from '@jest/globals';
 import { render } from '@testing-library/react';
 import TraceFlameGraph from 'container/TraceFlameGraph';
-import React from 'react';
+import React, { useState } from 'react';
 
-test('loads and displays greeting', async () => {
-	const { asFragment } = render(<TraceFlameGraph />);
+test('loads and displays greeting', () => {
+	const onSpanHover = useState('');
+
+	const { asFragment } = render(
+		<TraceFlameGraph
+			{...{
+				hoveredSpanId: '',
+				intervalUnit: { multiplier: 0, name: 'm' },
+				onSpanHover: onSpanHover[1],
+				onSpanSelect: (): void => {},
+				selectedSpanId: '',
+				traceMetaData: {
+					globalEnd: 0,
+					globalStart: 0,
+					levels: 0,
+					spread: 0,
+					totalSpans: 0,
+				},
+				treeData: {
+					children: [],
+					id: '',
+					name: '',
+					serviceColour: '',
+					serviceName: '',
+					startTime: 0,
+					tags: [],
+					time: 0,
+					value: 0,
+					event: [],
+					hasError: false,
+					parent: undefined,
+				},
+			}}
+		/>,
+	);
 	expect(asFragment()).toMatchSnapshot();
 });
diff --git a/frontend/src/container/TraceFlameGraph/index.tsx b/frontend/src/container/TraceFlameGraph/index.tsx
index 6490a4c435..08a998fe77 100644
--- a/frontend/src/container/TraceFlameGraph/index.tsx
+++ b/frontend/src/container/TraceFlameGraph/index.tsx
@@ -173,6 +173,8 @@ function TraceFlameGraph(props: {
 				onSpanSelect={onSpanSelect}
 				hoveredSpanId={hoveredSpanId}
 				selectedSpanId={selectedSpanId}
+				level={0}
+				parentLeftOffset={0}
 			/>
 		</TraceFlameGraphContainer>
 	);
diff --git a/frontend/src/hooks/useFetch.ts b/frontend/src/hooks/useFetch.ts
index f996627e86..7d67ff2a34 100644
--- a/frontend/src/hooks/useFetch.ts
+++ b/frontend/src/hooks/useFetch.ts
@@ -56,7 +56,7 @@ function useFetch<PayloadProps, FunctionParams>(
 				loading: false,
 				success: false,
 				error: true,
-				errorMessage: error,
+				errorMessage: error as string,
 			});
 		}
 		return (): void => {
diff --git a/frontend/src/lib/__tests__/getStep.test.ts b/frontend/src/lib/__tests__/getStep.test.ts
index 638c21cf4e..399f0cfbc6 100644
--- a/frontend/src/lib/__tests__/getStep.test.ts
+++ b/frontend/src/lib/__tests__/getStep.test.ts
@@ -1,3 +1,4 @@
+import { expect } from '@jest/globals';
 import dayjs from 'dayjs';
 import getStep, { DefaultStepSize } from 'lib/getStep';
 
diff --git a/frontend/src/modules/Usage/UsageExplorer.tsx b/frontend/src/modules/Usage/UsageExplorer.tsx
index 1790343210..502ae0294b 100644
--- a/frontend/src/modules/Usage/UsageExplorer.tsx
+++ b/frontend/src/modules/Usage/UsageExplorer.tsx
@@ -5,6 +5,7 @@ import { Select, Space } from 'antd';
 import Graph from 'components/Graph';
 import React, { useEffect, useState } from 'react';
 import { connect, useSelector } from 'react-redux';
+import { withRouter } from 'react-router-dom';
 import { GetService, getUsageData, UsageDataItem } from 'store/actions';
 import { AppState } from 'store/reducers';
 import { GlobalTime } from 'types/actions/globalTime';
@@ -213,7 +214,9 @@ const mapStateToProps = (
 	};
 };
 
-export const UsageExplorer = connect(mapStateToProps, {
-	getUsageData,
-	getServicesList: GetService,
-})(_UsageExplorer);
+export const UsageExplorer = withRouter(
+	connect(mapStateToProps, {
+		getUsageData,
+		getServicesList: GetService,
+	})(_UsageExplorer),
+);
diff --git a/frontend/src/pages/DashboardWidget/index.tsx b/frontend/src/pages/DashboardWidget/index.tsx
index e4eedd4b24..7e9f4e8f73 100644
--- a/frontend/src/pages/DashboardWidget/index.tsx
+++ b/frontend/src/pages/DashboardWidget/index.tsx
@@ -74,7 +74,12 @@ function DashboardWidget({ getDashboard }: NewDashboardProps): JSX.Element {
 		);
 	}
 
-	return <NewWidget selectedGraph={selectedGraph} />;
+	return (
+		<NewWidget
+			yAxisUnit={selectedWidget.yAxisUnit}
+			selectedGraph={selectedGraph}
+		/>
+	);
 }
 
 export interface DashboardWidgetPageParams {
diff --git a/frontend/src/store/actions/dashboard/deleteDashboard.ts b/frontend/src/store/actions/dashboard/deleteDashboard.ts
index 100970eeec..29115f395b 100644
--- a/frontend/src/store/actions/dashboard/deleteDashboard.ts
+++ b/frontend/src/store/actions/dashboard/deleteDashboard.ts
@@ -31,7 +31,8 @@ export const DeleteDashboard = ({
 			dispatch({
 				type: 'DELETE_DASHBOARD_ERROR',
 				payload: {
-					errorMessage: error.toString() || 'Something went wrong',
+					errorMessage:
+						error instanceof Error ? error.toString() : 'Something went wrong',
 				},
 			});
 		}
diff --git a/frontend/src/store/actions/dashboard/getDashboard.ts b/frontend/src/store/actions/dashboard/getDashboard.ts
index b219e3978d..917365049e 100644
--- a/frontend/src/store/actions/dashboard/getDashboard.ts
+++ b/frontend/src/store/actions/dashboard/getDashboard.ts
@@ -64,7 +64,8 @@ export const GetDashboard = ({
 			dispatch({
 				type: 'GET_DASHBOARD_ERROR',
 				payload: {
-					errorMessage: error.toString() || 'Something went wrong',
+					errorMessage:
+						error instanceof Error ? error.toString() : 'Something went wrong',
 				},
 			});
 		}
diff --git a/frontend/src/store/actions/dashboard/updateDashboardTitle.ts b/frontend/src/store/actions/dashboard/updateDashboardTitle.ts
index e60e01d345..dc1b24fb96 100644
--- a/frontend/src/store/actions/dashboard/updateDashboardTitle.ts
+++ b/frontend/src/store/actions/dashboard/updateDashboardTitle.ts
@@ -42,7 +42,8 @@ export const UpdateDashboardTitleDescriptionTags = ({
 			dispatch({
 				type: 'UPDATE_TITLE_DESCRIPTION_TAGS_ERROR',
 				payload: {
-					errorMessage: error.toString() || 'Something went wrong',
+					errorMessage:
+						error instanceof Error ? error.toString() : 'Something went wrong',
 				},
 			});
 		}
diff --git a/frontend/src/store/actions/trace/selectTraceFilter.ts b/frontend/src/store/actions/trace/selectTraceFilter.ts
index 7b1cd16729..f23a361f0a 100644
--- a/frontend/src/store/actions/trace/selectTraceFilter.ts
+++ b/frontend/src/store/actions/trace/selectTraceFilter.ts
@@ -46,6 +46,7 @@ export const SelectedTraceFilter = (props: {
 			traces.selectedTags,
 			traces.filter,
 			traces.isFilterExclude,
+			traces.userSelectedFilter,
 		);
 	};
 };
diff --git a/frontend/src/typings/chartjs-adapter-date-fns.ts b/frontend/src/typings/chartjs-adapter-date-fns.d.ts
similarity index 100%
rename from frontend/src/typings/chartjs-adapter-date-fns.ts
rename to frontend/src/typings/chartjs-adapter-date-fns.d.ts
diff --git a/frontend/src/typings/d3-tip.ts b/frontend/src/typings/d3-tip.d.ts
similarity index 100%
rename from frontend/src/typings/d3-tip.ts
rename to frontend/src/typings/d3-tip.d.ts