chore(fmt): enable oxfmt

2026-04-22 20:00:29 +01:00 · 2026-04-22 10:57:30 -03:00
625 changed files with 5075 additions and 5415 deletions
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
--- a/frontend/jest.setup.ts
+++ b/frontend/jest.setup.ts
@@ -42,13 +42,13 @@ window.getComputedStyle = function (
 	} catch {
 		// Return a minimal CSSStyleDeclaration so callers (testing-library, Radix UI)
 		// see the element as visible and without animations.
-		return ({
+		return {
 			display: '',
 			visibility: '',
 			opacity: '1',
 			animationName: 'none',
 			getPropertyValue: () => '',
-		} as unknown) as CSSStyleDeclaration;
+		} as unknown as CSSStyleDeclaration;
 	}
 };

--- a/frontend/package.json
+++ b/frontend/package.json
@@ -9,7 +9,7 @@
    "build": "vite build",
    "preview": "vite preview",
    "prettify": "oxfmt",
-    "fmt": "echo 'Disabled due to migration' || oxfmt --check",
+    "fmt": "oxfmt --check",
    "lint": "oxlint ./src && stylelint \"src/**/*.scss\"",
    "lint:js": "oxlint ./src",
    "lint:generated": "oxlint ./src/api/generated --fix",
@@ -241,7 +241,7 @@
  },
  "lint-staged": {
    "*.(js|jsx|ts|tsx)": [
-      "echo 'Disabled due to migration' || oxfmt --check",
+      "oxfmt --check",
      "oxlint --fix",
      "sh scripts/typecheck-staged.sh"
    ]
--- a/frontend/src/api/interceptors.test.ts
+++ b/frontend/src/api/interceptors.test.ts
@@ -39,8 +39,8 @@ jest.mock('axios', () => {
 describe('interceptorRejected', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
-		((axios as unknown) as jest.Mock).mockResolvedValue({ data: 'success' });
-		((axios.isAxiosError as unknown) as jest.Mock).mockReturnValue(true);
+		(axios as unknown as jest.Mock).mockResolvedValue({ data: 'success' });
+		(axios.isAxiosError as unknown as jest.Mock).mockReturnValue(true);
 	});

 	it('should preserve array payload structure when retrying a 401 request', async () => {
@@ -49,7 +49,7 @@ describe('interceptorRejected', () => {
 			{ relation: 'assignee', object: { resource: { name: 'editor' } } },
 		];

-		const error = ({
+		const error = {
 			response: {
 				status: 401,
 				config: {
@@ -67,7 +67,7 @@ describe('interceptorRejected', () => {
 				headers: new AxiosHeaders(),
 				data: JSON.stringify(arrayPayload),
 			},
-		} as unknown) as AxiosResponse;
+		} as unknown as AxiosResponse;

 		try {
 			await interceptorRejected(error);
@@ -75,7 +75,7 @@ describe('interceptorRejected', () => {
 			// Expected to reject after retry
 		}

-		const mockAxiosFn = (axios as unknown) as jest.Mock;
+		const mockAxiosFn = axios as unknown as jest.Mock;
 		expect(mockAxiosFn.mock.calls.length).toBe(1);
 		const retryCallConfig = mockAxiosFn.mock.calls[0][0];
 		expect(Array.isArray(JSON.parse(retryCallConfig.data))).toBe(true);
@@ -85,7 +85,7 @@ describe('interceptorRejected', () => {
 	it('should preserve object payload structure when retrying a 401 request', async () => {
 		const objectPayload = { key: 'value', nested: { data: 123 } };

-		const error = ({
+		const error = {
 			response: {
 				status: 401,
 				config: {
@@ -103,7 +103,7 @@ describe('interceptorRejected', () => {
 				headers: new AxiosHeaders(),
 				data: JSON.stringify(objectPayload),
 			},
-		} as unknown) as AxiosResponse;
+		} as unknown as AxiosResponse;

 		try {
 			await interceptorRejected(error);
@@ -111,14 +111,14 @@ describe('interceptorRejected', () => {
 			// Expected to reject after retry
 		}

-		const mockAxiosFn = (axios as unknown) as jest.Mock;
+		const mockAxiosFn = axios as unknown as jest.Mock;
 		expect(mockAxiosFn.mock.calls.length).toBe(1);
 		const retryCallConfig = mockAxiosFn.mock.calls[0][0];
 		expect(JSON.parse(retryCallConfig.data)).toEqual(objectPayload);
 	});

 	it('should handle undefined data gracefully when retrying', async () => {
-		const error = ({
+		const error = {
 			response: {
 				status: 401,
 				config: {
@@ -136,7 +136,7 @@ describe('interceptorRejected', () => {
 				headers: new AxiosHeaders(),
 				data: undefined,
 			},
-		} as unknown) as AxiosResponse;
+		} as unknown as AxiosResponse;

 		try {
 			await interceptorRejected(error);
@@ -144,7 +144,7 @@ describe('interceptorRejected', () => {
 			// Expected to reject after retry
 		}

-		const mockAxiosFn = (axios as unknown) as jest.Mock;
+		const mockAxiosFn = axios as unknown as jest.Mock;
 		expect(mockAxiosFn.mock.calls.length).toBe(1);
 		const retryCallConfig = mockAxiosFn.mock.calls[0][0];
 		expect(retryCallConfig.data).toBeUndefined();
--- a/frontend/src/api/settings/getRetentionV2.ts
+++ b/frontend/src/api/settings/getRetentionV2.ts
@@ -9,9 +9,8 @@ const getRetentionV2 = async (): Promise<
 	SuccessResponseV2<PayloadProps<'logs'>>
 > => {
 	try {
-		const response = await ApiV2Instance.get<PayloadProps<'logs'>>(
-			`/settings/ttl`,
-		);
+		const response =
+			await ApiV2Instance.get<PayloadProps<'logs'>>(`/settings/ttl`);

 		return {
 			httpStatusCode: response.status,
--- a/frontend/src/api/v5/queryRange/convertV5Response.test.ts
+++ b/frontend/src/api/v5/queryRange/convertV5Response.test.ts
@@ -52,18 +52,18 @@ describe('convertV5ResponseToLegacy', () => {
 					alias: '__result_0',
 					meta: {},
 					series: [
-						({
+						{
 							labels: [
 								{
-									key: ({ name: 'service.name' } as unknown) as TelemetryFieldKey,
+									key: { name: 'service.name' } as unknown as TelemetryFieldKey,
 									value: 'adservice',
 								},
 							],
 							values: [
-								({ timestamp: 1000, value: 10 } as unknown) as TimeSeriesValue,
-								({ timestamp: 2000, value: 12 } as unknown) as TimeSeriesValue,
+								{ timestamp: 1000, value: 10 } as unknown as TimeSeriesValue,
+								{ timestamp: 2000, value: 12 } as unknown as TimeSeriesValue,
 							],
-						} as unknown) as TimeSeries,
+						} as unknown as TimeSeries,
 					],
 				},
 			],
@@ -88,10 +88,8 @@ describe('convertV5ResponseToLegacy', () => {
 			},
 		]);

-		const input: SuccessResponse<
-			MetricRangePayloadV5,
-			QueryRangeRequestV5
-		> = makeBaseSuccess({ data: v5Data }, params);
+		const input: SuccessResponse<MetricRangePayloadV5, QueryRangeRequestV5> =
+			makeBaseSuccess({ data: v5Data }, params);

 		const legendMap = { A: '{{service.name}}' };
 		const result = convertV5ResponseToLegacy(input, legendMap, false);
@@ -121,33 +119,33 @@ describe('convertV5ResponseToLegacy', () => {
 		const scalar: ScalarData = {
 			columns: [
 				// group column
-				({
+				{
 					name: 'service.name',
 					queryName: 'A',
 					aggregationIndex: 0,
 					columnType: 'group',
-				} as unknown) as ScalarData['columns'][number],
+				} as unknown as ScalarData['columns'][number],
 				// aggregation 0
-				({
+				{
 					name: '__result_0',
 					queryName: 'A',
 					aggregationIndex: 0,
 					columnType: 'aggregation',
-				} as unknown) as ScalarData['columns'][number],
+				} as unknown as ScalarData['columns'][number],
 				// aggregation 1
-				({
+				{
 					name: '__result_1',
 					queryName: 'A',
 					aggregationIndex: 1,
 					columnType: 'aggregation',
-				} as unknown) as ScalarData['columns'][number],
+				} as unknown as ScalarData['columns'][number],
 				// formula F1
-				({
+				{
 					name: '__result',
 					queryName: 'F1',
 					aggregationIndex: 0,
 					columnType: 'aggregation',
-				} as unknown) as ScalarData['columns'][number],
+				} as unknown as ScalarData['columns'][number],
 			],
 			data: [['adservice', 606, 1.452, 151.5]],
 		};
@@ -174,17 +172,15 @@ describe('convertV5ResponseToLegacy', () => {
 			},
 			{
 				type: 'builder_formula',
-				spec: ({
+				spec: {
 					name: 'F1',
 					expression: 'A * 0.25',
-				} as unknown) as QueryBuilderFormula,
+				} as unknown as QueryBuilderFormula,
 			},
 		]);

-		const input: SuccessResponse<
-			MetricRangePayloadV5,
-			QueryRangeRequestV5
-		> = makeBaseSuccess({ data: v5Data }, params);
+		const input: SuccessResponse<MetricRangePayloadV5, QueryRangeRequestV5> =
+			makeBaseSuccess({ data: v5Data }, params);
 		const legendMap = { A: '{{service.name}}', F1: '' };
 		const result = convertV5ResponseToLegacy(input, legendMap, false);

@@ -254,10 +250,8 @@ describe('convertV5ResponseToLegacy', () => {
 			},
 		]);

-		const input: SuccessResponse<
-			MetricRangePayloadV5,
-			QueryRangeRequestV5
-		> = makeBaseSuccess({ data: v5Data }, params);
+		const input: SuccessResponse<MetricRangePayloadV5, QueryRangeRequestV5> =
+			makeBaseSuccess({ data: v5Data }, params);
 		const legendMap = { A: '{{service.name}}' };
 		const result = convertV5ResponseToLegacy(input, legendMap, true);

--- a/frontend/src/api/v5/queryRange/convertV5Response.ts
+++ b/frontend/src/api/v5/queryRange/convertV5Response.ts
@@ -93,7 +93,7 @@ function convertTimeSeriesData(
 				labels: series.labels
 					? Object.fromEntries(
 							series.labels.map((label: any) => [label.key.name, label.value]),
-					  )
+						)
 					: {},
 				labelsArray: series.labels
 					? series.labels.map((label: any) => ({ [label.key.name]: label.value }))
@@ -358,16 +358,19 @@ export function convertV5ResponseToLegacy(
 	const aggregationPerQuery =
 		(params as QueryRangeRequestV5)?.compositeQuery?.queries
 			?.filter((query) => query.type === 'builder_query')
-			.reduce((acc, query) => {
-				if (
-					query.type === 'builder_query' &&
-					'aggregations' in query.spec &&
-					query.spec.name
-				) {
-					acc[query.spec.name] = query.spec.aggregations;
-				}
-				return acc;
-			}, {} as Record<string, any>) || {};
+			.reduce(
+				(acc, query) => {
+					if (
+						query.type === 'builder_query' &&
+						'aggregations' in query.spec &&
+						query.spec.name
+					) {
+						acc[query.spec.name] = query.spec.aggregations;
+					}
+					return acc;
+				},
+				{} as Record<string, any>,
+			) || {};

 	// If formatForWeb is true, return as-is (like existing logic)
 	if (formatForWeb && v5Data?.type === 'scalar') {
--- a/frontend/src/api/v5/queryRange/prepareQueryRangePayloadV5.test.ts
+++ b/frontend/src/api/v5/queryRange/prepareQueryRangePayloadV5.test.ts
@@ -713,7 +713,7 @@ describe('prepareQueryRangePayloadV5', () => {
 						baseBuilderQuery({
 							dataSource: DataSource.LOGS,
 							filter: { expression: 'http.status_code >= 500' },
-							filters: (undefined as unknown) as IBuilderQuery['filters'],
+							filters: undefined as unknown as IBuilderQuery['filters'],
 						}),
 					],
 					queryFormulas: [],
@@ -746,7 +746,7 @@ describe('prepareQueryRangePayloadV5', () => {
 					queryData: [
 						baseBuilderQuery({
 							dataSource: DataSource.LOGS,
-							filter: (undefined as unknown) as IBuilderQuery['filter'],
+							filter: undefined as unknown as IBuilderQuery['filter'],
 							filters: {
 								items: [
 									{
@@ -834,8 +834,8 @@ describe('prepareQueryRangePayloadV5', () => {
 					queryData: [
 						baseBuilderQuery({
 							dataSource: DataSource.LOGS,
-							filter: (undefined as unknown) as IBuilderQuery['filter'],
-							filters: (undefined as unknown) as IBuilderQuery['filters'],
+							filter: undefined as unknown as IBuilderQuery['filter'],
+							filters: undefined as unknown as IBuilderQuery['filters'],
 						}),
 					],
 					queryFormulas: [],
--- a/frontend/src/api/v5/queryRange/prepareQueryRangePayloadV5.ts
+++ b/frontend/src/api/v5/queryRange/prepareQueryRangePayloadV5.ts
@@ -139,10 +139,9 @@ function createBaseSpec(
 	requestType: RequestType,
 	panelType?: PANEL_TYPES,
 ): BaseBuilderQuery {
-	const nonEmptySelectColumns = (queryData.selectColumns as (
-		| BaseAutocompleteData
-		| TelemetryFieldKey
-	)[])?.filter((c) => ('key' in c ? c?.key : c?.name));
+	const nonEmptySelectColumns = (
+		queryData.selectColumns as (BaseAutocompleteData | TelemetryFieldKey)[]
+	)?.filter((c) => ('key' in c ? c?.key : c?.name));

 	return {
 		stepInterval: queryData?.stepInterval || null,
@@ -160,7 +159,7 @@ function createBaseSpec(
 							signal: item?.signal,
 							materialized: item?.materialized,
 						}),
-				  )
+					)
 				: undefined,
 		limit:
 			panelType === PANEL_TYPES.TABLE || panelType === PANEL_TYPES.LIST
@@ -179,52 +178,48 @@ function createBaseSpec(
 							},
 							direction: order.order,
 						}),
-				  )
+					)
 				: undefined,
 		legend: isEmpty(queryData.legend) ? undefined : queryData.legend,
 		having: isEmpty(queryData.having) ? undefined : (queryData?.having as Having),
 		functions: isEmpty(queryData.functions)
 			? undefined
-			: queryData.functions.map(
-					(func: QueryFunction): QueryFunction => {
-						// Normalize function name to handle case sensitivity
-						const normalizedName = normalizeFunctionName(func?.name);
-						return {
-							name: normalizedName as FunctionName,
-							args: isEmpty(func.namedArgs)
-								? func.args?.map((arg) => ({
-										value: arg?.value,
-								  }))
-								: Object.entries(func?.namedArgs || {}).map(([name, value]) => ({
-										name,
-										value,
-								  })),
-						};
-					},
-			  ),
+			: queryData.functions.map((func: QueryFunction): QueryFunction => {
+					// Normalize function name to handle case sensitivity
+					const normalizedName = normalizeFunctionName(func?.name);
+					return {
+						name: normalizedName as FunctionName,
+						args: isEmpty(func.namedArgs)
+							? func.args?.map((arg) => ({
+									value: arg?.value,
+								}))
+							: Object.entries(func?.namedArgs || {}).map(([name, value]) => ({
+									name,
+									value,
+								})),
+					};
+				}),
 		selectFields: isEmpty(nonEmptySelectColumns)
 			? undefined
-			: nonEmptySelectColumns?.map(
-					(column: any): TelemetryFieldKey => {
-						const fieldName = column.name ?? column.key;
-						const isDeprecated = isDeprecatedField(fieldName);
+			: nonEmptySelectColumns?.map((column: any): TelemetryFieldKey => {
+					const fieldName = column.name ?? column.key;
+					const isDeprecated = isDeprecatedField(fieldName);

-						const fieldObj: TelemetryFieldKey = {
-							name: fieldName,
-							fieldDataType:
-								column?.fieldDataType ?? (column?.dataType as FieldDataType),
-							signal: column?.signal ?? undefined,
-						};
+					const fieldObj: TelemetryFieldKey = {
+						name: fieldName,
+						fieldDataType:
+							column?.fieldDataType ?? (column?.dataType as FieldDataType),
+						signal: column?.signal ?? undefined,
+					};

-						// Only add fieldContext if the field is NOT deprecated
-						if (!isDeprecated && fieldName !== 'name') {
-							fieldObj.fieldContext =
-								column?.fieldContext ?? (column?.type as FieldContext);
-						}
+					// Only add fieldContext if the field is NOT deprecated
+					if (!isDeprecated && fieldName !== 'name') {
+						fieldObj.fieldContext =
+							column?.fieldContext ?? (column?.type as FieldContext);
+					}

-						return fieldObj;
-					},
-			  ),
+					return fieldObj;
+				}),
 	};
 }

@@ -236,7 +231,8 @@ export function parseAggregations(
 	const result: { expression: string; alias?: string }[] = [];
 	// Matches function calls like "count()" or "sum(field)" with optional alias like "as 'alias'"
 	// Handles quoted ('alias'), dash-separated (field-name), and unquoted values after "as" keyword
-	const regex = /([a-zA-Z0-9_]+\([^)]*\))(?:\s*as\s+((?:'[^']*'|"[^"]*"|[a-zA-Z0-9_-]+)))?/g;
+	const regex =
+		/([a-zA-Z0-9_]+\([^)]*\))(?:\s*as\s+((?:'[^']*'|"[^"]*"|[a-zA-Z0-9_-]+)))?/g;
 	let match = regex.exec(expression);
 	while (match !== null) {
 		const expr = match[1];
@@ -365,10 +361,9 @@ function createTraceOperatorBaseSpec(
 	requestType: RequestType,
 	panelType?: PANEL_TYPES,
 ): BaseBuilderQuery {
-	const nonEmptySelectColumns = (queryData.selectColumns as (
-		| BaseAutocompleteData
-		| TelemetryFieldKey
-	)[])?.filter((c) => ('key' in c ? c?.key : c?.name));
+	const nonEmptySelectColumns = (
+		queryData.selectColumns as (BaseAutocompleteData | TelemetryFieldKey)[]
+	)?.filter((c) => ('key' in c ? c?.key : c?.name));

 	const {
 		stepInterval,
@@ -395,7 +390,7 @@ function createTraceOperatorBaseSpec(
 							signal: item?.signal,
 							materialized: item?.materialized,
 						}),
-				  )
+					)
 				: undefined,
 		limit:
 			panelType === PANEL_TYPES.TABLE || panelType === PANEL_TYPES.LIST
@@ -411,7 +406,7 @@ function createTraceOperatorBaseSpec(
 							},
 							direction: order.order,
 						}),
-				  )
+					)
 				: undefined,
 		legend: isEmpty(legend) ? undefined : legend,
 		having: isEmpty(having) ? undefined : (having as Having),
@@ -425,7 +420,7 @@ function createTraceOperatorBaseSpec(
 						fieldContext: column?.fieldContext ?? (column?.type as FieldContext),
 						signal: column?.signal ?? undefined,
 					}),
-			  ),
+				),
 	};
 }

@@ -507,18 +502,22 @@ export function convertClickHouseQueriesToV5(
 /**
 * Helper function to reduce query arrays to objects
 */
-function reduceQueriesToObject(
-	queryArray: any[],
-): { queries: Record<string, any>; legends: Record<string, string> } {
+function reduceQueriesToObject(queryArray: any[]): {
+	queries: Record<string, any>;
+	legends: Record<string, string>;
+} {
 	const legends: Record<string, string> = {};
-	const queries = queryArray.reduce((acc, queryItem) => {
-		if (!queryItem.query) {
+	const queries = queryArray.reduce(
+		(acc, queryItem) => {
+			if (!queryItem.query) {
+				return acc;
+			}
+			acc[queryItem.name] = queryItem;
+			legends[queryItem.name] = queryItem.legend;
 			return acc;
-		}
-		acc[queryItem.name] = queryItem;
-		legends[queryItem.name] = queryItem.legend;
-		return acc;
-	}, {} as Record<string, any>);
+		},
+		{} as Record<string, any>,
+	);

 	return { queries, legends };
 }
@@ -554,7 +553,7 @@ export const prepareQueryRangePayloadV5 = ({
 				queryTraceOperator && queryTraceOperator.length > 0
 					? queryTraceOperator.filter((traceOperator) =>
 							Boolean(traceOperator.expression.trim()),
-					  )
+						)
 					: [];

 			const currentTraceOperator = mapQueryDataToApi(
@@ -648,15 +647,18 @@ export const prepareQueryRangePayloadV5 = ({
 					: graphType === PANEL_TYPES.TABLE),
 			fillGaps: fillGaps || false,
 		},
-		variables: Object.entries(variables).reduce((acc, [key, value]) => {
-			acc[key] = {
-				value,
-				type: dynamicVariables
-					?.find((v) => v.name === key)
-					?.type?.toLowerCase() as VariableType,
-			};
-			return acc;
-		}, {} as Record<string, VariableItem>),
+		variables: Object.entries(variables).reduce(
+			(acc, [key, value]) => {
+				acc[key] = {
+					value,
+					type: dynamicVariables
+						?.find((v) => v.name === key)
+						?.type?.toLowerCase() as VariableType,
+				};
+				return acc;
+			},
+			{} as Record<string, VariableItem>,
+		),
 	};

 	return { legendMap, queryPayload };
--- a/frontend/src/components/AppLoading/tests/AppLoading.test.tsx
+++ b/frontend/src/components/AppLoading/tests/AppLoading.test.tsx
@@ -9,7 +9,7 @@ jest.mock('../../../api/browser/localstorage/get', () => ({
 }));

 // Access the mocked function
-const mockGet = (getLocal as unknown) as jest.Mock;
+const mockGet = getLocal as unknown as jest.Mock;

 describe('AppLoading', () => {
 	const SIGNOZ_TEXT = 'SigNoz';
--- a/frontend/src/components/CeleryOverview/CeleryOverviewConfigOptions/CeleryOverviewConfigOptions.tsx
+++ b/frontend/src/components/CeleryOverview/CeleryOverviewConfigOptions/CeleryOverviewConfigOptions.tsx
@@ -31,9 +31,8 @@ export function FilterSelect({
 	onChange,
 	isMultiple,
 }: SelectOptionConfig): JSX.Element {
-	const { handleSearch, isFetching, options } = useCeleryFilterOptions(
-		filterType,
-	);
+	const { handleSearch, isFetching, options } =
+		useCeleryFilterOptions(filterType);

 	const urlQuery = useUrlQuery();
 	const history = useHistory();
--- a/frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.tsx
+++ b/frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.tsx
@@ -280,30 +280,28 @@ function getTableData(data: QueueOverviewResponse['data']): RowData[] {
 	];

 	const tableData: RowData[] =
-		data?.map(
-			(row, index: number): RowData => {
-				const rowData: Record<string, string | number> = {};
-				columnOrder.forEach((key) => {
-					const value = row.data[key as keyof typeof row.data];
-					if (typeof value === 'string' || typeof value === 'number') {
-						rowData[key] = value;
-					}
-				});
-				Object.entries(row.data).forEach(([key, value]) => {
-					if (
-						!columnOrder.includes(key) &&
-						(typeof value === 'string' || typeof value === 'number')
-					) {
-						rowData[key] = value;
-					}
-				});
+		data?.map((row, index: number): RowData => {
+			const rowData: Record<string, string | number> = {};
+			columnOrder.forEach((key) => {
+				const value = row.data[key as keyof typeof row.data];
+				if (typeof value === 'string' || typeof value === 'number') {
+					rowData[key] = value;
+				}
+			});
+			Object.entries(row.data).forEach(([key, value]) => {
+				if (
+					!columnOrder.includes(key) &&
+					(typeof value === 'string' || typeof value === 'number')
+				) {
+					rowData[key] = value;
+				}
+			});

-				return {
-					...rowData,
-					key: index,
-				};
-			},
-		) || [];
+			return {
+				...rowData,
+				key: index,
+			};
+		}) || [];

 	return tableData;
 }
@@ -480,10 +478,10 @@ export default function CeleryOverviewTable({
 		[searchText],
 	);

-	const filteredData = useMemo(() => getFilteredData(tableData), [
-		getFilteredData,
-		tableData,
-	]);
+	const filteredData = useMemo(
+		() => getFilteredData(tableData),
+		[getFilteredData, tableData],
+	);

 	const prevTableDataRef = useRef<string>();

--- a/frontend/src/components/CeleryTask/CeleryTaskConfigOptions/CeleryTaskConfigOptions.tsx
+++ b/frontend/src/components/CeleryTask/CeleryTaskConfigOptions/CeleryTaskConfigOptions.tsx
@@ -13,9 +13,8 @@ import { useCeleryFilterOptions } from '../useCeleryFilterOptions';
 import './CeleryTaskConfigOptions.styles.scss';

 function CeleryTaskConfigOptions(): JSX.Element {
-	const { handleSearch, isFetching, options } = useCeleryFilterOptions(
-		'celery.task_name',
-	);
+	const { handleSearch, isFetching, options } =
+		useCeleryFilterOptions('celery.task_name');
 	const history = useHistory();
 	const location = useLocation();

--- a/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphUtils.ts
+++ b/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphUtils.ts
@@ -469,8 +469,7 @@ export const celeryActiveTasksWidgetData = (
 				{
 					aggregateAttribute: {
 						dataType: DataTypes.Float64,
-						id:
-							'flower_worker_number_of_currently_executing_tasks--float64--Gauge--true',
+						id: 'flower_worker_number_of_currently_executing_tasks--float64--Gauge--true',
 						key: 'flower_worker_number_of_currently_executing_tasks',
 						type: 'Gauge',
 					},
--- a/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskLatencyGraph.tsx
+++ b/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskLatencyGraph.tsx
@@ -127,22 +127,17 @@ function CeleryTaskLatencyGraph({
 	const onGraphClickHandler = useGraphClickHandler(handleSetTimeStamp);

 	const onGraphClick = useCallback(
-		(type: string): OnClickPluginOpts['onClick'] => (
-			xValue,
-			yValue,
-			mouseX,
-			mouseY,
-			data,
-		): Promise<void> => {
-			const [firstDataPoint] = Object.entries(data || {});
-			const [entity, value] = firstDataPoint;
-			setEntityData({
-				entity,
-				value,
-			});
+		(type: string): OnClickPluginOpts['onClick'] =>
+			(xValue, yValue, mouseX, mouseY, data): Promise<void> => {
+				const [firstDataPoint] = Object.entries(data || {});
+				const [entity, value] = firstDataPoint;
+				setEntityData({
+					entity,
+					value,
+				});

-			return onGraphClickHandler(xValue, yValue, mouseX, mouseY, type);
-		},
+				return onGraphClickHandler(xValue, yValue, mouseX, mouseY, type);
+			},
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[handleSetTimeStamp],
 	);
--- a/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskStateGraphConfig.tsx
+++ b/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskStateGraphConfig.tsx
@@ -92,10 +92,10 @@ function CeleryTaskStateGraphConfig({
 							{isLoading
 								? '-'
 								: isError
-								? '-'
-								: Number.isNaN(values[index])
-								? '-'
-								: Math.round(Number(values[index]))}
+									? '-'
+									: Number.isNaN(values[index])
+										? '-'
+										: Math.round(Number(values[index]))}
 						</div>
 					</div>
 					{tab.key === barState && <div className="celery-task-states__indicator" />}
--- a/frontend/src/components/CeleryTask/CeleryUtils.ts
+++ b/frontend/src/components/CeleryTask/CeleryUtils.ts
@@ -65,7 +65,7 @@ export function applyCeleryFilterOnWidgetData(
 									items: [...(queryItem.filters?.items || []), ...filters],
 									op: queryItem.filters?.op || 'AND',
 								},
-						  }
+							}
 						: queryItem,
 				),
 			},
--- a/frontend/src/components/CeleryTask/useGetGraphCustomSeries.ts
+++ b/frontend/src/components/CeleryTask/useGetGraphCustomSeries.ts
@@ -9,7 +9,7 @@ import { paths } from './CeleryUtils';

 interface UseGetGraphCustomSeriesProps {
 	isDarkMode: boolean;
-	drawStyle?: typeof drawStyles[keyof typeof drawStyles];
+	drawStyle?: (typeof drawStyles)[keyof typeof drawStyles];
 	colorMapping?: Record<string, string>;
 }

--- a/frontend/src/components/ChangelogModal/ChangelogModal.tsx
+++ b/frontend/src/components/ChangelogModal/ChangelogModal.tsx
@@ -37,9 +37,8 @@ function ChangelogModal({ changelog, onClose }: Props): JSX.Element {
 			preference.name === USER_PREFERENCES.LAST_SEEN_CHANGELOG_VERSION,
 	)?.value as string;

-	const { mutate: updateUserPreferenceMutation } = useMutation(
-		updateUserPreference,
-	);
+	const { mutate: updateUserPreferenceMutation } =
+		useMutation(updateUserPreference);

 	useEffect(() => {
 		// Update the seen version
@@ -60,11 +59,8 @@ function ChangelogModal({ changelog, onClose }: Props): JSX.Element {

 	const checkScroll = useCallback((): void => {
 		if (changelogContentSectionRef.current) {
-			const {
-				scrollHeight,
-				clientHeight,
-				scrollTop,
-			} = changelogContentSectionRef.current;
+			const { scrollHeight, clientHeight, scrollTop } =
+				changelogContentSectionRef.current;
 			const isAtBottom = scrollHeight - clientHeight - scrollTop <= 8;
 			setHasScroll(scrollHeight > clientHeight + 24 && !isAtBottom); // 24px - buffer height to show show more
 		}
--- a/frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx
+++ b/frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx
@@ -13,9 +13,8 @@ import APIError from 'types/api/error';
 export default function ChatSupportGateway(): JSX.Element {
 	const { notifications } = useNotifications();

-	const [isAddCreditCardModalOpen, setIsAddCreditCardModalOpen] = useState(
-		false,
-	);
+	const [isAddCreditCardModalOpen, setIsAddCreditCardModalOpen] =
+		useState(false);

 	const handleBillingOnSuccess = (
 		data: SuccessResponseV2<CheckoutSuccessPayloadProps>,
--- a/frontend/src/components/ClientSideQBSearch/ClientSideQBSearch.tsx
+++ b/frontend/src/components/ClientSideQBSearch/ClientSideQBSearch.tsx
@@ -388,7 +388,7 @@ function ClientSideQBSearch(
 						({
 							label: key.key,
 							value: key,
-						} as Option),
+						}) as Option,
 				) || [],
 			);
 		}
@@ -462,7 +462,7 @@ function ClientSideQBSearch(
 							({
 								label: checkCommaInValue(String(val)),
 								value: val,
-							} as Option),
+							}) as Option,
 					),
 				);
 			} else {
@@ -490,7 +490,7 @@ function ClientSideQBSearch(
 				Array.isArray(tag.value) &&
 				tag.value[tag.value.length - 1] === ''
 					? tag.value?.slice(0, -1)
-					: tag.value ?? '';
+					: (tag.value ?? '');
 			filterTags.items.push({
 				id: tag.id || uuid().slice(0, 8),
 				key: tag.key,
--- a/frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx
+++ b/frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx
@@ -47,25 +47,23 @@ function CreateServiceAccountModal(): JSX.Element {
 		},
 	});

-	const {
-		mutate: createServiceAccount,
-		isLoading: isSubmitting,
-	} = useCreateServiceAccount({
-		mutation: {
-			onSuccess: async () => {
-				toast.success('Service account created successfully');
-				reset();
-				await setIsOpen(null);
-				await invalidateListServiceAccounts(queryClient);
+	const { mutate: createServiceAccount, isLoading: isSubmitting } =
+		useCreateServiceAccount({
+			mutation: {
+				onSuccess: async () => {
+					toast.success('Service account created successfully');
+					reset();
+					await setIsOpen(null);
+					await invalidateListServiceAccounts(queryClient);
+				},
+				onError: (err) => {
+					const errMessage = convertToApiError(
+						err as AxiosError<RenderErrorResponseDTO, unknown> | null,
+					);
+					showErrorModal(errMessage as APIError);
+				},
 			},
-			onError: (err) => {
-				const errMessage = convertToApiError(
-					err as AxiosError<RenderErrorResponseDTO, unknown> | null,
-				);
-				showErrorModal(errMessage as APIError);
-			},
-		},
-	});
+		});

 	function handleClose(): void {
 		reset();
--- a/frontend/src/components/CustomTimePicker/CustomTimePicker.tsx
+++ b/frontend/src/components/CustomTimePicker/CustomTimePicker.tsx
@@ -96,10 +96,8 @@ function CustomTimePicker({
 	maxTime,
 	isModalTimeSelection = false,
 }: CustomTimePickerProps): JSX.Element {
-	const [
-		selectedTimePlaceholderValue,
-		setSelectedTimePlaceholderValue,
-	] = useState('Select / Enter Time Range');
+	const [selectedTimePlaceholderValue, setSelectedTimePlaceholderValue] =
+		useState('Select / Enter Time Range');

 	const [inputValue, setInputValue] = useState('');
 	const [inputStatus, setInputStatus] = useState<CustomTimePickerInputStatus>(
--- a/frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx
+++ b/frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx
@@ -116,9 +116,10 @@ function CustomTimePickerPopoverContent({
 }: CustomTimePickerPopoverContentProps): JSX.Element {
 	const { pathname } = useLocation();

-	const isLogsExplorerPage = useMemo(() => pathname === ROUTES.LOGS_EXPLORER, [
-		pathname,
-	]);
+	const isLogsExplorerPage = useMemo(
+		() => pathname === ROUTES.LOGS_EXPLORER,
+		[pathname],
+	);

 	const url = new URLSearchParams(window.location.search);

@@ -154,8 +155,8 @@ function CustomTimePickerPopoverContent({
 		if (!customDateTimeVisible) {
 			const customTimeRanges = getCustomTimeRanges();

-			const formattedCustomTimeRanges: RecentlyUsedDateTimeRange[] = customTimeRanges.map(
-				(range) => ({
+			const formattedCustomTimeRanges: RecentlyUsedDateTimeRange[] =
+				customTimeRanges.map((range) => ({
 					label: `${dayjs(range.from)
 						.tz(timezone.value)
 						.format(DATE_TIME_FORMATS.DD_MMM_YYYY_HH_MM_SS)} - ${dayjs(range.to)
@@ -165,8 +166,7 @@ function CustomTimePickerPopoverContent({
 					to: range.to,
 					value: range.timestamp,
 					timestamp: range.timestamp,
-				}),
-			);
+				}));

 			setRecentlyUsedTimeRanges(formattedCustomTimeRanges);
 		}
--- a/frontend/src/components/CustomTimePicker/timezoneUtils.ts
+++ b/frontend/src/components/CustomTimePicker/timezoneUtils.ts
@@ -19,7 +19,7 @@ const TIMEZONE_TYPES = {
 	STANDARD: 'STANDARD',
 } as const;

-type TimezoneType = typeof TIMEZONE_TYPES[keyof typeof TIMEZONE_TYPES];
+type TimezoneType = (typeof TIMEZONE_TYPES)[keyof typeof TIMEZONE_TYPES];

 export const UTC_TIMEZONE: Timezone = {
 	name: 'Coordinated Universal Time — UTC, GMT',
--- a/frontend/src/components/DraggableTableRow/index.tsx
+++ b/frontend/src/components/DraggableTableRow/index.tsx
@@ -41,8 +41,7 @@ function DraggableTableRow({
 	);
 }

-interface DraggableTableRowProps
-	extends React.HTMLAttributes<HTMLTableRowElement> {
+interface DraggableTableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
 	index: number;
 	moveRow: (dragIndex: number, hoverIndex: number) => void;
 }
--- a/frontend/src/components/DraggableTableRow/utils.ts
+++ b/frontend/src/components/DraggableTableRow/utils.ts
@@ -6,9 +6,9 @@ export function dropHandler(monitor: DropTargetMonitor): { isOver: boolean } {
 	};
 }

-export function dragHandler(
-	monitor: DragSourceMonitor,
-): { isDragging: boolean } {
+export function dragHandler(monitor: DragSourceMonitor): {
+	isDragging: boolean;
+} {
 	return {
 		isDragging: monitor.isDragging(),
 	};
--- a/frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx
+++ b/frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx
@@ -157,10 +157,8 @@ function EditMemberDrawer({
 		new Date(String(existingToken.expiresAt)) < new Date();

 	// Create/regenerate token mutation
-	const {
-		mutateAsync: createTokenMutation,
-		isLoading: isGeneratingLink,
-	} = useCreateResetPasswordToken();
+	const { mutateAsync: createTokenMutation, isLoading: isGeneratingLink } =
+		useCreateResetPasswordToken();

 	const fetchedDisplayName =
 		fetchedUser?.data?.displayName ?? member?.name ?? '';
@@ -220,22 +218,20 @@ function EditMemberDrawer({
 	});

 	const makeRoleRetry = useCallback(
-		(
-			context: string,
-			rawRetry: () => Promise<void>,
-		) => async (): Promise<void> => {
-			try {
-				await rawRetry();
-				setSaveErrors((prev) => prev.filter((e) => e.context !== context));
-				refetchUser();
-			} catch (err) {
-				setSaveErrors((prev) =>
-					prev.map((e) =>
-						e.context === context ? { ...e, apiError: toSaveApiError(err) } : e,
-					),
-				);
-			}
-		},
+		(context: string, rawRetry: () => Promise<void>) =>
+			async (): Promise<void> => {
+				try {
+					await rawRetry();
+					setSaveErrors((prev) => prev.filter((e) => e.context !== context));
+					refetchUser();
+				} catch (err) {
+					setSaveErrors((prev) =>
+						prev.map((e) =>
+							e.context === context ? { ...e, apiError: toSaveApiError(err) } : e,
+						),
+					);
+				}
+			},
 		[refetchUser],
 	);

@@ -279,7 +275,7 @@ function EditMemberDrawer({
 					: updateUser({
 							pathParams: { id: member.id },
 							data: { displayName: localDisplayName },
-					  })
+						})
 				: Promise.resolve();

 			const [nameResult, rolesResult] = await Promise.allSettled([
@@ -388,7 +384,7 @@ function EditMemberDrawer({
 						? formatTimezoneAdjustedTimestamp(
 								String(response.data.expiresAt),
 								DATE_TIME_FORMATS.DASH_DATETIME,
-						  )
+							)
 						: null,
 				);
 				setHasCopiedResetLink(false);
@@ -497,8 +493,8 @@ function EditMemberDrawer({
 							isRootUser
 								? ROOT_USER_TOOLTIP
 								: isDeleted
-								? undefined
-								: 'You cannot modify your own role'
+									? undefined
+									: 'You cannot modify your own role'
 						}
 					>
 						<div className="edit-member-drawer__input-wrapper edit-member-drawer__input-wrapper--disabled">
@@ -621,13 +617,13 @@ function EditMemberDrawer({
 									{isGeneratingLink
 										? 'Generating...'
 										: isInvited
-										? getInviteButtonLabel(
-												isLoadingTokenStatus,
-												existingToken,
-												isTokenExpired,
-												tokenNotFound,
-										  )
-										: 'Generate Password Reset Link'}
+											? getInviteButtonLabel(
+													isLoadingTokenStatus,
+													existingToken,
+													isTokenExpired,
+													tokenNotFound,
+												)
+											: 'Generate Password Reset Link'}
 								</Button>
 							</span>
 						</Tooltip>
--- a/frontend/src/components/ErrorModal/components/ErrorContent.styles.scss
+++ b/frontend/src/components/ErrorModal/components/ErrorContent.styles.scss
@@ -168,9 +168,12 @@
 		gap: 3px;
 		background: var(--l1-border);
 		border-radius: 20px;
-		box-shadow: 0px 103px 12px 0px rgba(0, 0, 0, 0.01),
-			0px 66px 18px 0px rgba(0, 0, 0, 0.01), 0px 37px 22px 0px rgba(0, 0, 0, 0.03),
-			0px 17px 17px 0px rgba(0, 0, 0, 0.04), 0px 4px 9px 0px rgba(0, 0, 0, 0.04);
+		box-shadow:
+			0px 103px 12px 0px rgba(0, 0, 0, 0.01),
+			0px 66px 18px 0px rgba(0, 0, 0, 0.01),
+			0px 37px 22px 0px rgba(0, 0, 0, 0.03),
+			0px 17px 17px 0px rgba(0, 0, 0, 0.04),
+			0px 4px 9px 0px rgba(0, 0, 0, 0.04);
 	}

 	&__scroll-hint-text {
--- a/frontend/src/components/ErrorModal/components/ErrorContent.tsx
+++ b/frontend/src/components/ErrorModal/components/ErrorContent.tsx
@@ -25,15 +25,14 @@ function ErrorContent({ error, icon }: ErrorContentProps): JSX.Element {
 		errors: errorMessages,
 		code: errorCode,
 		message: errorMessage,
-	} =
-		error && 'error' in error
-			? error?.error?.error || {}
-			: {
-					url: undefined,
-					errors: [],
-					code: error.code || 500,
-					message: error.message || 'Something went wrong',
-			  };
+	} = error && 'error' in error
+		? error?.error?.error || {}
+		: {
+				url: undefined,
+				errors: [],
+				code: error.code || 500,
+				message: error.message || 'Something went wrong',
+			};
 	return (
 		<section className="error-content">
 			{/* Summary Header */}
--- a/frontend/src/components/ExplorerCard/MenuItemGenerator.tsx
+++ b/frontend/src/components/ExplorerCard/MenuItemGenerator.tsx
@@ -23,11 +23,8 @@ function MenuItemGenerator({
 	refetchAllView,
 	sourcePage,
 }: MenuItemLabelGeneratorProps): JSX.Element {
-	const {
-		panelType,
-		redirectWithQueryBuilderData,
-		updateAllQueriesOperators,
-	} = useQueryBuilder();
+	const { panelType, redirectWithQueryBuilderData, updateAllQueriesOperators } =
+		useQueryBuilder();
 	const { handleExplorerTabChange } = useHandleExplorerTabChange();

 	const { notifications } = useNotifications();
--- a/frontend/src/components/ExplorerCard/SaveViewWithName.tsx
+++ b/frontend/src/components/ExplorerCard/SaveViewWithName.tsx
@@ -17,11 +17,8 @@ function SaveViewWithName({
 }: SaveViewWithNameProps): JSX.Element {
 	const [form] = Form.useForm<SaveViewFormProps>();
 	const { t } = useTranslation(['explorer']);
-	const {
-		currentQuery,
-		panelType,
-		redirectWithQueryBuilderData,
-	} = useQueryBuilder();
+	const { currentQuery, panelType, redirectWithQueryBuilderData } =
+		useQueryBuilder();
 	const { notifications } = useNotifications();
 	const compositeQuery = mapCompositeQueryFromQuery(currentQuery, panelType);

--- a/frontend/src/components/ExplorerCard/constants.ts
+++ b/frontend/src/components/ExplorerCard/constants.ts
@@ -1,8 +1,7 @@
 import { QueryParams } from 'constants/query';

 export const ExploreHeaderToolTip = {
-	url:
-		'https://signoz.io/docs/userguide/query-builder/?utm_source=product&utm_medium=new-query-builder',
+	url: 'https://signoz.io/docs/userguide/query-builder/?utm_source=product&utm_medium=new-query-builder',
 	text: 'More details on how to use query builder',
 };

--- a/frontend/src/components/Graph/Plugin/DragSelect.ts
+++ b/frontend/src/components/Graph/Plugin/DragSelect.ts
@@ -55,9 +55,8 @@ function createMousedownHandler(
 			startDragPositionX = right;
 		}

-		const startValuePositionX = chart.scales.x.getValueForPixel(
-			startDragPositionX,
-		);
+		const startValuePositionX =
+			chart.scales.x.getValueForPixel(startDragPositionX);

 		dragData.onDragStart(startDragPositionX, startValuePositionX);
 	};
@@ -109,9 +108,8 @@ function createMouseupHandler(
 			endRelativePostionX = right;
 		}

-		const endValuePositionX = chart.scales.x.getValueForPixel(
-			endRelativePostionX,
-		);
+		const endValuePositionX =
+			chart.scales.x.getValueForPixel(endRelativePostionX);

 		dragData.onDragEnd(endRelativePostionX, endValuePositionX);

--- a/frontend/src/components/Graph/Plugin/IntersectionCursor.ts
+++ b/frontend/src/components/Graph/Plugin/IntersectionCursor.ts
@@ -12,11 +12,12 @@ export type IntersectionCursorPluginOptions = {
 	gapSize?: number;
 };

-export const defaultIntersectionCursorPluginOptions: Required<IntersectionCursorPluginOptions> = {
-	color: 'white',
-	dashSize: 3,
-	gapSize: 3,
-};
+export const defaultIntersectionCursorPluginOptions: Required<IntersectionCursorPluginOptions> =
+	{
+		color: 'white',
+		dashSize: 3,
+		gapSize: 3,
+	};

 export function createIntersectionCursorPluginOptions(
 	isEnabled: boolean,
--- a/frontend/src/components/Graph/Plugin/Legend.ts
+++ b/frontend/src/components/Graph/Plugin/Legend.ts
@@ -52,7 +52,7 @@ export const legend = (id: string, isLonger: boolean): Plugin<ChartType> => ({
 		])
 			? get(chart, ['options', 'plugins', 'legend', 'labels', 'generateLabels'])(
 					chart,
-			  )
+				)
 			: null;

 		items?.forEach((item: Record<any, any>, index: number) => {
--- a/frontend/src/components/Graph/utils.ts
+++ b/frontend/src/components/Graph/utils.ts
@@ -95,7 +95,7 @@ export const getGraphOptions = (
 							},
 						],
 					},
-			  }
+				}
 			: {}),
 		title: {
 			display: title !== undefined,
--- a/frontend/src/components/InviteMembersModal/InviteMembersModal.styles.scss
+++ b/frontend/src/components/InviteMembersModal/InviteMembersModal.styles.scss
@@ -177,7 +177,9 @@
 	color: var(--destructive);
 	opacity: 0.6;
 	padding: 0;
-	transition: background-color 0.2s, opacity 0.2s;
+	transition:
+		background-color 0.2s,
+		opacity 0.2s;
 	box-shadow: none;

 	&:hover {
--- a/frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx
+++ b/frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx
@@ -46,9 +46,8 @@ function LaunchChatSupport({
 		featureFlagsFetchError,
 		isLoggedIn,
 	} = useAppContext();
-	const [isAddCreditCardModalOpen, setIsAddCreditCardModalOpen] = useState(
-		false,
-	);
+	const [isAddCreditCardModalOpen, setIsAddCreditCardModalOpen] =
+		useState(false);

 	const { pathname } = useLocation();

--- a/frontend/src/components/LogDetail/constants.ts
+++ b/frontend/src/components/LogDetail/constants.ts
@@ -5,7 +5,7 @@ export const VIEW_TYPES = {
 	INFRAMETRICS: 'INFRAMETRICS',
 } as const;

-export type VIEWS = typeof VIEW_TYPES[keyof typeof VIEW_TYPES];
+export type VIEWS = (typeof VIEW_TYPES)[keyof typeof VIEW_TYPES];

 export const RESOURCE_KEYS = {
 	CLUSTER_NAME: 'k8s.cluster.name',
--- a/frontend/src/components/LogDetail/index.tsx
+++ b/frontend/src/components/LogDetail/index.tsx
@@ -261,7 +261,7 @@ function LogDetailInner({
 											...query.filter,
 											expression: value,
 										},
-								  }
+									}
 								: query,
 						),
 					},
--- a/frontend/src/components/Logs/AddToQueryHOC.tsx
+++ b/frontend/src/components/Logs/AddToQueryHOC.tsx
@@ -20,9 +20,10 @@ function AddToQueryHOC({
 		onAddToQuery(fieldKey, fieldValue, OPERATORS['='], dataType);
 	};

-	const popOverContent = useMemo(() => <span>Add to query: {fieldKey}</span>, [
-		fieldKey,
-	]);
+	const popOverContent = useMemo(
+		() => <span>Add to query: {fieldKey}</span>,
+		[fieldKey],
+	);

 	return (
 		<div className={cx('addToQueryContainer', fontSize)} onClick={handleQueryAdd}>
--- a/frontend/src/components/Logs/ListLogView/index.tsx
+++ b/frontend/src/components/Logs/ListLogView/index.tsx
@@ -104,7 +104,7 @@ type ListLogViewProps = {
 	selectedFields: IField[];
 	onSetActiveLog: (
 		log: ILog,
-		selectedTab?: typeof VIEW_TYPES[keyof typeof VIEW_TYPES],
+		selectedTab?: (typeof VIEW_TYPES)[keyof typeof VIEW_TYPES],
 	) => void;
 	onAddToQuery: AddToQueryHOCProps['onAddToQuery'];
 	activeLog?: ILog | null;
@@ -166,11 +166,11 @@ function ListLogView({
 				? formatTimezoneAdjustedTimestamp(
 						flattenLogData.timestamp,
 						DATE_TIME_FORMATS.ISO_DATETIME_MS,
-				  )
+					)
 				: formatTimezoneAdjustedTimestamp(
 						flattenLogData.timestamp / 1e6,
 						DATE_TIME_FORMATS.ISO_DATETIME_MS,
-				  ),
+					),
 		[flattenLogData.timestamp, formatTimezoneAdjustedTimestamp],
 	);

--- a/frontend/src/components/Logs/ListLogView/styles.ts
+++ b/frontend/src/components/Logs/ListLogView/styles.ts
@@ -24,10 +24,10 @@ export const Container = styled(Card)<{
 		fontSize === FontSize.SMALL
 			? `margin-bottom:0.1rem;`
 			: fontSize === FontSize.MEDIUM
-			? `margin-bottom: 0.2rem;`
-			: fontSize === FontSize.LARGE
-			? `margin-bottom:0.3rem;`
-			: ``}
+				? `margin-bottom: 0.2rem;`
+				: fontSize === FontSize.LARGE
+					? `margin-bottom:0.3rem;`
+					: ``}
 	cursor: pointer;

 	&:not(:hover) .log-line-action-buttons {
@@ -41,10 +41,10 @@ export const Container = styled(Card)<{
 			fontSize === FontSize.SMALL
 				? `padding:0.1rem 0.6rem;`
 				: fontSize === FontSize.MEDIUM
-				? `padding: 0.2rem 0.6rem;`
-				: fontSize === FontSize.LARGE
-				? `padding:0.3rem 0.6rem;`
-				: ``}
+					? `padding: 0.2rem 0.6rem;`
+					: fontSize === FontSize.LARGE
+						? `padding:0.3rem 0.6rem;`
+						: ``}

 		${({ $isActiveLog, $isDarkMode, $logType }): string =>
 			getActiveLogBackground($isActiveLog, $isDarkMode, $logType)}
@@ -65,8 +65,8 @@ export const LogContainer = styled.div<LogContainerProps>`
 		fontSize === FontSize.SMALL
 			? `gap: 2px;`
 			: fontSize === FontSize.MEDIUM
-			? ` gap:4px;`
-			: `gap:6px;`}
+				? ` gap:4px;`
+				: `gap:6px;`}
 `;

 export const LogText = styled.div<LogTextProps>`
--- a/frontend/src/components/Logs/RawLogView/index.tsx
+++ b/frontend/src/components/Logs/RawLogView/index.tsx
@@ -88,11 +88,11 @@ function RawLogView({
 					? formatTimezoneAdjustedTimestamp(
 							data.timestamp,
 							DATE_TIME_FORMATS.ISO_DATETIME_MS,
-					  )
+						)
 					: formatTimezoneAdjustedTimestamp(
 							data.timestamp / 1e6,
 							DATE_TIME_FORMATS.ISO_DATETIME_MS,
-					  );
+						);
 			parts.push(date);
 		}

--- a/frontend/src/components/Logs/RawLogView/styles.ts
+++ b/frontend/src/components/Logs/RawLogView/styles.ts
@@ -39,22 +39,22 @@ export const RawLogViewContainer = styled(Row)<{
 			fontSize === FontSize.SMALL
 				? `margin: 1px 0;`
 				: fontSize === FontSize.MEDIUM
-				? `margin: 1px 0;`
-				: `margin: 2px 0;`}
+					? `margin: 1px 0;`
+					: `margin: 2px 0;`}
 	}

 	${({ $isReadOnly, $isActiveLog, $isDarkMode, $logType }): string =>
 		$isActiveLog
 			? getActiveLogBackground($isActiveLog, $isDarkMode, $logType)
 			: !$isReadOnly
-			? `&:hover { ${getActiveLogBackground(true, $isDarkMode, $logType)} }`
-			: ''}
+				? `&:hover { ${getActiveLogBackground(true, $isDarkMode, $logType)} }`
+				: ''}

 	${({ $isHightlightedLog, $isDarkMode }): string =>
 		$isHightlightedLog
 			? `background-color: ${
 					$isDarkMode ? Color.BG_ROBIN_600 : Color.BG_VANILLA_400
-			  };
+				};
 			  transition: background-color 2s ease-in;`
 			: ''}

@@ -104,8 +104,8 @@ export const RawLogContent = styled.div<RawLogContentProps>`
 		fontSize === FontSize.SMALL
 			? `font-size:11px; line-height:16px; padding:1px;`
 			: fontSize === FontSize.MEDIUM
-			? `font-size:13px; line-height:20px; padding:1px;`
-			: `font-size:14px; line-height:24px; padding:2px;`}
+				? `font-size:13px; line-height:20px; padding:1px;`
+				: `font-size:14px; line-height:24px; padding:2px;`}

 	cursor: ${({ $isActiveLog, $isReadOnly }): string =>
 		$isActiveLog || $isReadOnly ? 'initial' : 'pointer'};
--- a/frontend/src/components/Logs/RawLogView/types.ts
+++ b/frontend/src/components/Logs/RawLogView/types.ts
@@ -19,7 +19,7 @@ export interface RawLogViewProps {
 	handleChangeSelectedView?: ChangeViewFunctionType;
 	onSetActiveLog?: (
 		log: ILog,
-		selectedTab?: typeof VIEW_TYPES[keyof typeof VIEW_TYPES],
+		selectedTab?: (typeof VIEW_TYPES)[keyof typeof VIEW_TYPES],
 	) => void;
 	onClearActiveLog?: () => void;
 }
--- a/frontend/src/components/Logs/TableView/styles.ts
+++ b/frontend/src/components/Logs/TableView/styles.ts
@@ -27,6 +27,6 @@ export const TableBodyContent = styled.div<TableBodyContentProps>`
 		fontSize === FontSize.SMALL
 			? `font-size:11px; line-height:16px;`
 			: fontSize === FontSize.MEDIUM
-			? `font-size:13px; line-height:20px;`
-			: `font-size:14px; line-height:24px;`}
+				? `font-size:13px; line-height:20px;`
+				: `font-size:14px; line-height:24px;`}
 `;
--- a/frontend/src/components/Logs/TableView/useTableView.tsx
+++ b/frontend/src/components/Logs/TableView/useTableView.tsx
@@ -34,9 +34,10 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {

 	const isDarkMode = useIsDarkMode();

-	const flattenLogData = useMemo(() => logs.map((log) => FlatLogData(log)), [
-		logs,
-	]);
+	const flattenLogData = useMemo(
+		() => logs.map((log) => FlatLogData(log)),
+		[logs],
+	);

 	const { formatTimezoneAdjustedTimestamp } = useTimezone();

@@ -115,11 +116,11 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 										? formatTimezoneAdjustedTimestamp(
 												field,
 												DATE_TIME_FORMATS.ISO_DATETIME_MS,
-										  )
+											)
 										: formatTimezoneAdjustedTimestamp(
 												field / 1e6,
 												DATE_TIME_FORMATS.ISO_DATETIME_MS,
-										  );
+											);
 								return {
 									children: (
 										<div className="table-timestamp">
@@ -129,7 +130,7 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 								};
 							},
 						},
-				  ]
+					]
 				: []),
 			...(appendTo === 'center' ? fieldColumns : []),
 			...(fields.some((field) => field.name === 'body')
@@ -160,7 +161,7 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 								),
 							}),
 						},
-				  ]
+					]
 				: []),
 			...(appendTo === 'end' ? fieldColumns : []),
 		];
--- a/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx
+++ b/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx
@@ -35,13 +35,11 @@ function OptionsMenu({
 	const [fontSizeValue, setFontSizeValue] = useState<FontSize>(
 		fontSize?.value || FontSize.SMALL,
 	);
-	const [isFontSizeOptionsOpen, setIsFontSizeOptionsOpen] = useState<boolean>(
-		false,
-	);
+	const [isFontSizeOptionsOpen, setIsFontSizeOptionsOpen] =
+		useState<boolean>(false);

-	const [showAddNewColumnContainer, setShowAddNewColumnContainer] = useState(
-		false,
-	);
+	const [showAddNewColumnContainer, setShowAddNewColumnContainer] =
+		useState(false);

 	const [selectedValue, setSelectedValue] = useState<string | null>(null);
 	const listRef = useRef<HTMLDivElement>(null);
--- a/frontend/src/components/NewSelect/CustomMultiSelect.tsx
+++ b/frontend/src/components/NewSelect/CustomMultiSelect.tsx
@@ -260,23 +260,28 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	/**
 	 * Separates section and non-section options
 	 */
-	const splitOptions = useCallback((options: OptionData[]): {
-		sectionOptions: OptionData[];
-		nonSectionOptions: OptionData[];
-	} => {
-		const sectionOptions: OptionData[] = [];
-		const nonSectionOptions: OptionData[] = [];
+	const splitOptions = useCallback(
+		(
+			options: OptionData[],
+		): {
+			sectionOptions: OptionData[];
+			nonSectionOptions: OptionData[];
+		} => {
+			const sectionOptions: OptionData[] = [];
+			const nonSectionOptions: OptionData[] = [];

-		options.forEach((option) => {
-			if ('options' in option && Array.isArray(option.options)) {
-				sectionOptions.push(option);
-			} else {
-				nonSectionOptions.push(option);
-			}
-		});
+			options.forEach((option) => {
+				if ('options' in option && Array.isArray(option.options)) {
+					sectionOptions.push(option);
+				} else {
+					nonSectionOptions.push(option);
+				}
+			});

-		return { sectionOptions, nonSectionOptions };
-	}, []);
+			return { sectionOptions, nonSectionOptions };
+		},
+		[],
+	);

 	/**
 	 * Apply search filtering to options
@@ -1629,7 +1634,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 							}}
 							data={enhancedNonSectionOptions}
 							itemContent={(index, item): React.ReactNode =>
-								(mapOptions([item]) as unknown) as React.ReactElement
+								mapOptions([item]) as unknown as React.ReactElement
 							}
 							totalCount={enhancedNonSectionOptions.length}
 							itemSize={(): number => 40}
@@ -1671,7 +1676,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 										}}
 										data={section.options || []}
 										itemContent={(index, item): React.ReactNode =>
-											(mapOptions([item]) as unknown) as React.ReactElement
+											mapOptions([item]) as unknown as React.ReactElement
 										}
 										totalCount={section.options?.length || 0}
 										itemSize={(): number => 40}
@@ -1936,7 +1941,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 								? {
 										borderColor: Color.BG_ROBIN_500,
 										backgroundColor: Color.BG_SLATE_400,
-								  }
+									}
 								: undefined
 						}
 					>
--- a/frontend/src/components/NewSelect/CustomSelect.tsx
+++ b/frontend/src/components/NewSelect/CustomSelect.tsx
@@ -112,23 +112,28 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 	/**
 	 * Separates section and non-section options
 	 */
-	const splitOptions = useCallback((options: OptionData[]): {
-		sectionOptions: OptionData[];
-		nonSectionOptions: OptionData[];
-	} => {
-		const sectionOptions: OptionData[] = [];
-		const nonSectionOptions: OptionData[] = [];
+	const splitOptions = useCallback(
+		(
+			options: OptionData[],
+		): {
+			sectionOptions: OptionData[];
+			nonSectionOptions: OptionData[];
+		} => {
+			const sectionOptions: OptionData[] = [];
+			const nonSectionOptions: OptionData[] = [];

-		options.forEach((option) => {
-			if ('options' in option && Array.isArray(option.options)) {
-				sectionOptions.push(option);
-			} else {
-				nonSectionOptions.push(option);
-			}
-		});
+			options.forEach((option) => {
+				if ('options' in option && Array.isArray(option.options)) {
+					sectionOptions.push(option);
+				} else {
+					nonSectionOptions.push(option);
+				}
+			});

-		return { sectionOptions, nonSectionOptions };
-	}, []);
+			return { sectionOptions, nonSectionOptions };
+		},
+		[],
+	);

 	/**
 	 * Apply search filtering to options
@@ -322,9 +327,8 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 						processedOptions = filterOptionsBySearch(processedOptions, searchText);
 					}

-					const { sectionOptions, nonSectionOptions } = splitOptions(
-						processedOptions,
-					);
+					const { sectionOptions, nonSectionOptions } =
+						splitOptions(processedOptions);

 					// Add custom option if needed
 					if (
--- a/frontend/src/components/NewSelect/test/CustomMultiSelect.test.tsx
+++ b/frontend/src/components/NewSelect/test/CustomMultiSelect.test.tsx
@@ -336,7 +336,7 @@ describe('CustomMultiSelect Component', () => {
 			renderWithVirtuoso(
 				<CustomMultiSelect
 					options={mockGroupedOptions}
-					value={('__ALL__' as unknown) as string[]}
+					value={'__ALL__' as unknown as string[]}
 				/>,
 			);

--- a/frontend/src/components/NewSelect/styles.scss
+++ b/frontend/src/components/NewSelect/styles.scss
@@ -180,7 +180,9 @@ $custom-border-color: #2c3044;
 .custom-multiselect-dropdown-container {
 	z-index: 1050 !important;
 	padding: 0;
-	box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.5), 0 6px 16px 0 rgba(0, 0, 0, 0.4),
+	box-shadow:
+		0 3px 6px -4px rgba(0, 0, 0, 0.5),
+		0 6px 16px 0 rgba(0, 0, 0, 0.4),
 		0 9px 28px 8px rgba(0, 0, 0, 0.3);
 	background-color: var(--l2-background);
 	border: 1px solid var(--l1-border);
@@ -804,8 +806,10 @@ $custom-border-color: #2c3044;
 	.custom-multiselect-dropdown-container {
 		background-color: var(--l1-background);
 		border: 1px solid var(--l1-border);
-		box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
-			0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+		box-shadow:
+			0 3px 6px -4px rgba(0, 0, 0, 0.12),
+			0 6px 16px 0 rgba(0, 0, 0, 0.08),
+			0 9px 28px 8px rgba(0, 0, 0, 0.05);

 		.empty-message {
 			color: var(--l2-foreground);
@@ -976,7 +980,9 @@ $custom-border-color: #2c3044;
 			font-weight: 500;
 			z-index: 2;
 			pointer-events: none;
-			transition: opacity 0.2s ease, visibility 0.2s ease;
+			transition:
+				opacity 0.2s ease,
+				visibility 0.2s ease;

 			.lightMode & {
 				color: rgba(0, 0, 0, 0.85);
--- a/frontend/src/components/NewSelect/types.ts
+++ b/frontend/src/components/NewSelect/types.ts
@@ -40,8 +40,10 @@ export interface CustomTagProps {
 	onClose: () => void;
 }

-export interface CustomMultiSelectProps
-	extends Omit<SelectProps<string[] | string>, 'options'> {
+export interface CustomMultiSelectProps extends Omit<
+	SelectProps<string[] | string>,
+	'options'
+> {
 	placeholder?: string;
 	className?: string;
 	loading?: boolean;
--- a/frontend/src/components/OverlayScrollbar/OverlayScrollbar.tsx
+++ b/frontend/src/components/OverlayScrollbar/OverlayScrollbar.tsx
@@ -26,7 +26,7 @@ function OverlayScrollbar({
 					theme: isDarkMode ? 'os-theme-light' : 'os-theme-dark',
 				},
 				...(customOptions || {}),
-			} as PartialOptions),
+			}) as PartialOptions,
 		[customOptions, isDarkMode],
 	);

--- a/frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss
+++ b/frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss
@@ -10,8 +10,14 @@
 	border-bottom: 1px solid var(--l1-border);
 	border-top: 1px solid var(--l1-border);

-	font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-		'Helvetica Neue', sans-serif;
+	font-family:
+		Inter,
+		-apple-system,
+		BlinkMacSystemFont,
+		'Segoe UI',
+		Roboto,
+		'Helvetica Neue',
+		sans-serif;

 	border-right: none;
 	border-left: none;
--- a/frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx
@@ -76,32 +76,34 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 		[showTraceOperator, isListViewPanel],
 	);

-	const listViewLogFilterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(() => {
-		const config: QueryBuilderProps['filterConfigs'] = {
-			stepInterval: { isHidden: true, isDisabled: true },
-			having: { isHidden: true, isDisabled: true },
-			filters: {
-				customKey: 'body',
-				customOp: OPERATORS.CONTAINS,
-			},
-		};
+	const listViewLogFilterConfigs: QueryBuilderProps['filterConfigs'] =
+		useMemo(() => {
+			const config: QueryBuilderProps['filterConfigs'] = {
+				stepInterval: { isHidden: true, isDisabled: true },
+				having: { isHidden: true, isDisabled: true },
+				filters: {
+					customKey: 'body',
+					customOp: OPERATORS.CONTAINS,
+				},
+			};

-		return config;
-	}, []);
+			return config;
+		}, []);

-	const listViewTracesFilterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(() => {
-		const config: QueryBuilderProps['filterConfigs'] = {
-			stepInterval: { isHidden: true, isDisabled: true },
-			having: { isHidden: true, isDisabled: true },
-			limit: { isHidden: true, isDisabled: true },
-			filters: {
-				customKey: 'body',
-				customOp: OPERATORS.CONTAINS,
-			},
-		};
+	const listViewTracesFilterConfigs: QueryBuilderProps['filterConfigs'] =
+		useMemo(() => {
+			const config: QueryBuilderProps['filterConfigs'] = {
+				stepInterval: { isHidden: true, isDisabled: true },
+				having: { isHidden: true, isDisabled: true },
+				limit: { isHidden: true, isDisabled: true },
+				filters: {
+					customKey: 'body',
+					customOp: OPERATORS.CONTAINS,
+				},
+			};

-		return config;
-	}, []);
+			return config;
+		}, []);

 	const queryFilterConfigs = useMemo(() => {
 		if (isListViewPanel) {
--- a/frontend/src/components/QueryBuilderV2/QueryV2/MetricsSelect/MetricsSelect.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/MetricsSelect/MetricsSelect.tsx
@@ -49,11 +49,8 @@ export const MetricsSelect = memo(function MetricsSelect({
 		entityVersion: version,
 	});

-	const {
-		updateAllQueriesOperators,
-		handleSetQueryData,
-		panelType,
-	} = useQueryBuilder();
+	const { updateAllQueriesOperators, handleSetQueryData, panelType } =
+		useQueryBuilder();

 	const source = useMemo(
 		() => (signalSource === 'meter' ? 'meter' : 'metrics'),
@@ -123,9 +120,8 @@ export const MetricsSelect = memo(function MetricsSelect({
 				signalSource: newSignalSource,
 				panelType: panelType || '',
 			});
-			const savedQuery: IBuilderQuery | null = getPreviousQueryFromKey(
-				newQueryKey,
-			);
+			const savedQuery: IBuilderQuery | null =
+				getPreviousQueryFromKey(newQueryKey);

 			// remove the new query key from session storage
 			removeKeyFromPreviousQuery(newQueryKey);
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.tsx
@@ -464,36 +464,37 @@ function QueryAddOns({
 						</div>
 					)}

-					{selectedViews.find((view) => view.key === 'reduce_to') && showReduceTo && (
-						<div className="add-on-content" data-testid="reduce-to-content">
-							<div className="periscope-input-with-label">
-								<Tooltip
-									title={
-										<TooltipContent
-											label="Reduce to"
-											description="Apply mathematical operations like sum, average, min, max, or percentiles to reduce multiple time series into a single value."
-											docLink="https://signoz.io/docs/userguide/query-builder-v5/#reduce-operations"
-										/>
-									}
-									placement="top"
-									mouseEnterDelay={0.5}
-								>
-									<div className="label" style={{ cursor: 'help' }}>
-										Reduce to
+					{selectedViews.find((view) => view.key === 'reduce_to') &&
+						showReduceTo && (
+							<div className="add-on-content" data-testid="reduce-to-content">
+								<div className="periscope-input-with-label">
+									<Tooltip
+										title={
+											<TooltipContent
+												label="Reduce to"
+												description="Apply mathematical operations like sum, average, min, max, or percentiles to reduce multiple time series into a single value."
+												docLink="https://signoz.io/docs/userguide/query-builder-v5/#reduce-operations"
+											/>
+										}
+										placement="top"
+										mouseEnterDelay={0.5}
+									>
+										<div className="label" style={{ cursor: 'help' }}>
+											Reduce to
+										</div>
+									</Tooltip>
+									<div className="input">
+										<ReduceToFilter query={query} onChange={handleChangeReduceToV5} />
 									</div>
-								</Tooltip>
-								<div className="input">
-									<ReduceToFilter query={query} onChange={handleChangeReduceToV5} />
-								</div>

-								<Button
-									className="close-btn periscope-btn ghost"
-									icon={<ChevronUp size={16} />}
-									onClick={(): void => handleRemoveView('reduce_to')}
-								/>
+									<Button
+										className="close-btn periscope-btn ghost"
+										icon={<ChevronUp size={16} />}
+										onClick={(): void => handleRemoveView('reduce_to')}
+									/>
+								</div>
 							</div>
-						</div>
-					)}
+						)}

 					{selectedViews.find((view) => view.key === 'legend_format') && (
 						<div className="add-on-content" data-testid="legend-format-content">
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregationSelect.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregationSelect.tsx
@@ -290,12 +290,12 @@ function QueryAggregationSelect({
 			}

 			const regex = /([a-zA-Z_][\w]*)\s*\(([^)]*)\)/g;
-			const oldMatches = [
-				...tr.startState.doc.toString().matchAll(regex),
-			].filter((match) => validFunctions.includes(match[1].toLowerCase()));
-			const newMatches = [
-				...tr.newDoc.toString().matchAll(regex),
-			].filter((match) => validFunctions.includes(match[1].toLowerCase()));
+			const oldMatches = [...tr.startState.doc.toString().matchAll(regex)].filter(
+				(match) => validFunctions.includes(match[1].toLowerCase()),
+			);
+			const newMatches = [...tr.newDoc.toString().matchAll(regex)].filter(
+				(match) => validFunctions.includes(match[1].toLowerCase()),
+			);

 			if (
 				newMatches.length > oldMatches.length &&
@@ -558,7 +558,7 @@ function QueryAggregationSelect({
 									? availableSuggestions
 									: availableSuggestions.filter((suggestion) =>
 											suggestion.label.toLowerCase().includes(inputText.toLowerCase()),
-									  );
+										);

 							return {
 								from: startOfArg,
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.styles.scss
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.styles.scss
@@ -5,8 +5,14 @@
 	display: flex;
 	flex-direction: column;
 	gap: 8px;
-	font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-		'Helvetica Neue', sans-serif;
+	font-family:
+		Inter,
+		-apple-system,
+		BlinkMacSystemFont,
+		'Segoe UI',
+		Roboto,
+		'Helvetica Neue',
+		sans-serif;

 	.query-where-clause-editor-container {
 		position: relative;
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx
@@ -194,10 +194,8 @@ function QuerySearch({

 	const [cursorPos, setCursorPos] = useState({ line: 0, ch: 0 });

-	const [
-		isFetchingCompleteValuesList,
-		setIsFetchingCompleteValuesList,
-	] = useState<boolean>(false);
+	const [isFetchingCompleteValuesList, setIsFetchingCompleteValuesList] =
+		useState<boolean>(false);

 	const lastPosRef = useRef<{ line: number; ch: number }>({ line: 0, ch: 0 });

--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx
@@ -93,9 +93,10 @@ export const QueryV2 = forwardRef(function QueryV2(
 		[dataSource, panelType],
 	);

-	const showSpanScopeSelector = useMemo(() => dataSource === DataSource.TRACES, [
-		dataSource,
-	]);
+	const showSpanScopeSelector = useMemo(
+		() => dataSource === DataSource.TRACES,
+		[dataSource],
+	);

 	const showInlineQuerySearch = useMemo(() => {
 		if (!showTraceOperator) {
@@ -212,7 +213,7 @@ export const QueryV2 = forwardRef(function QueryV2(
 															icon: <Trash size={14} />,
 															onClick: handleDeleteQuery,
 														},
-												  ]
+													]
 												: []),
 										],
 									}}
--- a/frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/tests/utils.test.ts
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/tests/utils.test.ts
@@ -3,7 +3,7 @@ import { IBuilderTraceOperator } from 'types/api/queryBuilder/queryBuilderData';
 import { getInvolvedQueriesInTraceOperator } from '../utils/utils';

 const makeTraceOperator = (expression: string): IBuilderTraceOperator =>
-	(({ expression } as unknown) as IBuilderTraceOperator);
+	({ expression }) as unknown as IBuilderTraceOperator;

 describe('getInvolvedQueriesInTraceOperator', () => {
 	it('returns empty array for empty input', () => {
--- a/frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/utils/traceOperatorContextUtils.ts
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/utils/traceOperatorContextUtils.ts
@@ -98,9 +98,7 @@ export function createTraceOperatorContext(
 }

 // Helper to determine token context
-function determineTraceTokenContext(
-	token: IToken,
-): {
+function determineTraceTokenContext(token: IToken): {
 	isInAtom: boolean;
 	isInOperator: boolean;
 	isInParenthesis: boolean;
--- a/frontend/src/components/QueryBuilderV2/QueryV2/tests/QuerySearch.test.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/tests/QuerySearch.test.tsx
@@ -36,14 +36,14 @@ beforeAll(() => {
 		const mockRange = {
 			// CodeMirror uses these for text measurement
 			getClientRects: (): DOMRectList =>
-				(({
+				({
 					length: 1,
 					item: (index: number): DOMRect | null => (index === 0 ? mockRect : null),
 					0: mockRect,
 					*[Symbol.iterator](): Generator<DOMRect> {
 						yield mockRect;
 					},
-				} as unknown) as DOMRectList),
+				}) as unknown as DOMRectList,
 			getBoundingClientRect: (): DOMRect => mockRect,
 			// CodeMirror calls these to set up text ranges
 			setStart: (node: Node, offset: number): void => {
@@ -72,7 +72,7 @@ beforeAll(() => {
 			},
 			commonAncestorContainer: document.body,
 		};
-		return (mockRange as unknown) as Range;
+		return mockRange as unknown as Range;
 	};

 	// Mock document.createRange to return a new Range instance each time
--- a/frontend/src/components/QueryBuilderV2/QueryV2/tests/QueryV2.test.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/tests/QueryV2.test.tsx
@@ -94,13 +94,12 @@ describe('QueryBuilderV2 + QueryV2 - base render', () => {
 			},
 		};

-		const updateAllQueriesOperators: QueryBuilderContextType['updateAllQueriesOperators'] = (
-			q,
-		) => q;
+		const updateAllQueriesOperators: QueryBuilderContextType['updateAllQueriesOperators'] =
+			(q) => q;
 		const updateQueriesData: QueryBuilderContextType['updateQueriesData'] = (q) =>
 			q;

-		const baseContext = ({
+		const baseContext = {
 			currentQuery: currentQueryObj,
 			stagedQuery: null,
 			lastUsedQuery: null,
@@ -133,7 +132,7 @@ describe('QueryBuilderV2 + QueryV2 - base render', () => {
 			initQueryBuilderData: jest.fn(),
 			isStagedQueryUpdated: jest.fn(() => false),
 			isDefaultQuery: jest.fn(() => false),
-		} as unknown) as QueryBuilderContextType;
+		} as unknown as QueryBuilderContextType;

 		baseQBContext = baseContext;
 		mockedUseQueryBuilder.mockReturnValue(baseQBContext);
@@ -149,7 +148,8 @@ describe('QueryBuilderV2 + QueryV2 - base render', () => {
 			handleChangeAggregatorAttribute: jest.fn(),
 			handleChangeDataSource: jest.fn(),
 			handleDeleteQuery: jest.fn(),
-			handleChangeQueryData: (jest.fn() as unknown) as ReturnType<UseQueryOperations>['handleChangeQueryData'],
+			handleChangeQueryData:
+				jest.fn() as unknown as ReturnType<UseQueryOperations>['handleChangeQueryData'],
 			handleChangeFormulaData: jest.fn(),
 			handleQueryFunctionsUpdates: handleQueryFunctionsUpdatesMock,
 			listOfAdditionalFormulaFilters: [],
--- a/frontend/src/components/QueryBuilderV2/tests/QueryBuilder.PrevQuery.test.tsx
+++ b/frontend/src/components/QueryBuilderV2/tests/QueryBuilder.PrevQuery.test.tsx
@@ -57,7 +57,7 @@ describe('MetricsSelect - signal source switching (standalone)', () => {

 	beforeEach(() => {
 		clearPreviousQuery();
-		handleSetQueryDataMock = (jest.fn() as unknown) as jest.MockedFunction<
+		handleSetQueryDataMock = jest.fn() as unknown as jest.MockedFunction<
 			(index: number, q: IBuilderQuery) => void
 		>;

@@ -222,7 +222,7 @@ describe('DataSource change - Logs to Traces', () => {

 	beforeEach(() => {
 		clearPreviousQuery();
-		handleSetQueryDataMock = (jest.fn() as unknown) as jest.MockedFunction<
+		handleSetQueryDataMock = jest.fn() as unknown as jest.MockedFunction<
 			(i: number, q: IBuilderQuery) => void
 		>;

--- a/frontend/src/components/QueryBuilderV2/tests/utils.test.ts
+++ b/frontend/src/components/QueryBuilderV2/tests/utils.test.ts
@@ -947,7 +947,7 @@ describe('convertAggregationToExpression', () => {
 	it('should handle undefined aggregateAttribute parameter with traces', () => {
 		const result = convertAggregationToExpression({
 			aggregateOperator: 'noop',
-			aggregateAttribute: (undefined as unknown) as BaseAutocompleteData,
+			aggregateAttribute: undefined as unknown as BaseAutocompleteData,
 			dataSource: DataSource.TRACES,
 		});

@@ -961,7 +961,7 @@ describe('convertAggregationToExpression', () => {
 	it('should handle undefined aggregateAttribute parameter with logs', () => {
 		const result = convertAggregationToExpression({
 			aggregateOperator: 'noop',
-			aggregateAttribute: (undefined as unknown) as BaseAutocompleteData,
+			aggregateAttribute: undefined as unknown as BaseAutocompleteData,
 			dataSource: DataSource.LOGS,
 		});

--- a/frontend/src/components/QueryBuilderV2/utils.ts
+++ b/frontend/src/components/QueryBuilderV2/utils.ts
@@ -210,8 +210,8 @@ export const convertExpressionToFilters = (
 				type: '',
 			},
 			value: pair.isMultiValue
-				? formatValuesForFilter(pair.valueList as string[]) ?? []
-				: formatValuesForFilter(pair.value as string) ?? '',
+				? (formatValuesForFilter(pair.valueList as string[]) ?? [])
+				: (formatValuesForFilter(pair.value as string) ?? ''),
 		});
 	});

@@ -469,8 +469,8 @@ export const convertFiltersToExpressionWithExistingQuery = (
 					type: '',
 				},
 				value: pair.isMultiValue
-					? formatValuesForFilter(pair.valueList as string[]) ?? ''
-					: formatValuesForFilter(pair.value as string) ?? '',
+					? (formatValuesForFilter(pair.valueList as string[]) ?? '')
+					: (formatValuesForFilter(pair.value as string) ?? ''),
 			});
 		}
 	});
@@ -554,7 +554,7 @@ export const removeKeysFromExpression = (
 							}
 							const value = pair.value?.toString().trim();
 							return value && value.includes('$');
-					  })
+						})
 					: existingQueryPairs;

 				// Build a map for quick lookup of query pairs by their lowercase trimmed keys
@@ -744,15 +744,18 @@ export function getQueryLabelWithAggregation(
 	const labels: { label: string; value: string }[] = [];

 	const aggregationPerQuery =
-		queryData.reduce((acc, query) => {
-			if (query.queryName && query.aggregations?.length) {
-				acc[query.queryName] = createAggregation(query).map((a: any) => ({
-					alias: a.alias,
-					expression: a.expression,
-				}));
-			}
-			return acc;
-		}, {} as Record<string, any>) || {};
+		queryData.reduce(
+			(acc, query) => {
+				if (query.queryName && query.aggregations?.length) {
+					acc[query.queryName] = createAggregation(query).map((a: any) => ({
+						alias: a.alias,
+						expression: a.expression,
+					}));
+				}
+				return acc;
+			},
+			{} as Record<string, any>,
+		) || {};

 	Object.entries(aggregationPerQuery).forEach(([queryName, aggregations]) => {
 		const isMultipleAggregations = aggregations.length > 1;
--- a/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.test.tsx
+++ b/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.test.tsx
@@ -83,7 +83,7 @@ const createMockQueryBuilderData = (hasActiveFilters = false): any => ({
 										op: 'in',
 										value: [OTEL_DEMO, SAMPLE_FLASK],
 									},
-							  ]
+								]
 							: [],
 					},
 				},
@@ -99,7 +99,7 @@ describe('CheckboxFilter - User Flows', () => {
 		jest.clearAllMocks();

 		// Default mock implementations for useGetAggregateValues
-		mockUseGetAggregateValues.mockReturnValue(({
+		mockUseGetAggregateValues.mockReturnValue({
 			data: {
 				payload: {
 					stringAttributeValues: MOCK_SERVICE_NAMES,
@@ -107,7 +107,7 @@ describe('CheckboxFilter - User Flows', () => {
 			},
 			isLoading: false,
 			refetch: jest.fn(),
-		} as unknown) as UseQueryResult<SuccessResponse<IAttributeValuesResponse>>);
+		} as unknown as UseQueryResult<SuccessResponse<IAttributeValuesResponse>>);

 		// Default mock implementations for useGetQueryKeyValueSuggestions
 		// Returns data in the format expected by the hook
--- a/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx
+++ b/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx
@@ -82,10 +82,8 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 	// Check if this filter has active filters in the query
 	const isSomeFilterPresentForCurrentAttribute = useMemo(
 		() =>
-			currentQuery.builder.queryData?.[
-				activeQueryIndex
-			]?.filters?.items?.some((item) =>
-				isKeyMatch(item.key?.key, filter.attributeKey.key),
+			currentQuery.builder.queryData?.[activeQueryIndex]?.filters?.items?.some(
+				(item) => isKeyMatch(item.key?.key, filter.attributeKey.key),
 			),
 		[currentQuery.builder.queryData, activeQueryIndex, filter.attributeKey.key],
 	);
@@ -126,18 +124,16 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 		},
 	);

-	const {
-		data: keyValueSuggestions,
-		isLoading: isLoadingKeyValueSuggestions,
-	} = useGetQueryKeyValueSuggestions({
-		key: filter.attributeKey.key,
-		signal: filter.dataSource || DataSource.LOGS,
-		signalSource: 'meter',
-		options: {
-			enabled: isOpen && source === QuickFiltersSource.METER_EXPLORER,
-			keepPreviousData: true,
-		},
-	});
+	const { data: keyValueSuggestions, isLoading: isLoadingKeyValueSuggestions } =
+		useGetQueryKeyValueSuggestions({
+			key: filter.attributeKey.key,
+			signal: filter.dataSource || DataSource.LOGS,
+			signalSource: 'meter',
+			options: {
+				enabled: isOpen && source === QuickFiltersSource.METER_EXPLORER,
+				keepPreviousData: true,
+			},
+		});

 	const attributeValues: string[] = useMemo(() => {
 		const dataType = filter.attributeKey.dataType || DataTypes.String;
@@ -282,7 +278,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 							idx === activeQueryIndex
 								? item.filters?.items?.filter(
 										(fil) => !isKeyMatch(fil.key?.key, filter.attributeKey.key),
-								  ) || []
+									) || []
 								: [...(item.filters?.items || [])],
 						op: item.filters?.op || 'AND',
 					},
--- a/frontend/src/components/QuickFilters/FilterRenderers/Duration/Duration.tsx
+++ b/frontend/src/components/QuickFilters/FilterRenderers/Duration/Duration.tsx
@@ -36,12 +36,13 @@ function Duration({
 	onFilterChange?: (query: Query) => void;
 	source?: QuickFiltersSource;
 }): JSX.Element {
-	const [selectedFilters, setSelectedFilters] = useState<
-		Record<
-			AllTraceFilterKeys,
-			{ values: string[] | string; keys: BaseAutocompleteData }
-		>
-	>();
+	const [selectedFilters, setSelectedFilters] =
+		useState<
+			Record<
+				AllTraceFilterKeys,
+				{ values: string[] | string; keys: BaseAutocompleteData }
+			>
+		>();
 	const [activeKeys, setActiveKeys] = useState<string[]>([
 		filter.defaultOpen ? 'durationNano' : '',
 	]);
--- a/frontend/src/components/QuickFilters/QuickFiltersSettings/AddedFilters.tsx
+++ b/frontend/src/components/QuickFilters/QuickFiltersSettings/AddedFilters.tsx
@@ -30,13 +30,8 @@ function SortableFilter({
 	allowDrag: boolean;
 	allowRemove: boolean;
 }): JSX.Element {
-	const {
-		attributes,
-		listeners,
-		setNodeRef,
-		transform,
-		transition,
-	} = useSortable({ id: filter.key });
+	const { attributes, listeners, setNodeRef, transform, transition } =
+		useSortable({ id: filter.key });

 	const style = {
 		transform: CSS.Transform.toString(transform),
--- a/frontend/src/components/QuickFilters/QuickFiltersSettings/OtherFilters.tsx
+++ b/frontend/src/components/QuickFilters/QuickFiltersSettings/OtherFilters.tsx
@@ -48,52 +48,46 @@ function OtherFilters({
 		[signal],
 	);

-	const {
-		data: suggestionsData,
-		isFetching: isFetchingSuggestions,
-	} = useGetAttributeSuggestions(
-		{
-			searchText: inputValue,
-			dataSource: SIGNAL_DATA_SOURCE_MAP[signal as SignalType],
-			filters: {} as TagFilter,
-		},
-		{
-			queryKey: [REACT_QUERY_KEY.GET_OTHER_FILTERS, inputValue],
-			enabled: !!signal && isLogDataSource,
-		},
-	);
+	const { data: suggestionsData, isFetching: isFetchingSuggestions } =
+		useGetAttributeSuggestions(
+			{
+				searchText: inputValue,
+				dataSource: SIGNAL_DATA_SOURCE_MAP[signal as SignalType],
+				filters: {} as TagFilter,
+			},
+			{
+				queryKey: [REACT_QUERY_KEY.GET_OTHER_FILTERS, inputValue],
+				enabled: !!signal && isLogDataSource,
+			},
+		);

-	const {
-		data: aggregateKeysData,
-		isFetching: isFetchingAggregateKeys,
-	} = useGetAggregateKeys(
-		{
-			searchText: inputValue,
-			dataSource: SIGNAL_DATA_SOURCE_MAP[signal as SignalType],
-			aggregateOperator: 'noop',
-			aggregateAttribute: '',
-			tagType: '',
-		},
-		{
-			queryKey: [REACT_QUERY_KEY.GET_OTHER_FILTERS, inputValue],
-			enabled: !!signal && !isLogDataSource && !isMeterDataSource,
-		},
-	);
+	const { data: aggregateKeysData, isFetching: isFetchingAggregateKeys } =
+		useGetAggregateKeys(
+			{
+				searchText: inputValue,
+				dataSource: SIGNAL_DATA_SOURCE_MAP[signal as SignalType],
+				aggregateOperator: 'noop',
+				aggregateAttribute: '',
+				tagType: '',
+			},
+			{
+				queryKey: [REACT_QUERY_KEY.GET_OTHER_FILTERS, inputValue],
+				enabled: !!signal && !isLogDataSource && !isMeterDataSource,
+			},
+		);

-	const {
-		data: fieldKeysData,
-		isLoading: isLoadingFieldKeys,
-	} = useGetQueryKeySuggestions(
-		{
-			searchText: inputValue,
-			signal: SIGNAL_DATA_SOURCE_MAP[signal as SignalType],
-			signalSource: 'meter',
-		},
-		{
-			queryKey: [REACT_QUERY_KEY.GET_OTHER_FILTERS, inputValue],
-			enabled: !!signal && isMeterDataSource,
-		},
-	);
+	const { data: fieldKeysData, isLoading: isLoadingFieldKeys } =
+		useGetQueryKeySuggestions(
+			{
+				searchText: inputValue,
+				signal: SIGNAL_DATA_SOURCE_MAP[signal as SignalType],
+				signalSource: 'meter',
+			},
+			{
+				queryKey: [REACT_QUERY_KEY.GET_OTHER_FILTERS, inputValue],
+				enabled: !!signal && isMeterDataSource,
+			},
+		);

 	const otherFilters = useMemo(() => {
 		let filterAttributes;
@@ -110,7 +104,7 @@ function OtherFilters({
 						dataType: attr.fieldDataType,
 						type: attr.fieldContext,
 						signal: attr.signal,
-					} as BaseAutocompleteData),
+					}) as BaseAutocompleteData,
 			);
 		} else {
 			filterAttributes = aggregateKeysData?.payload?.attributeKeys || [];
--- a/frontend/src/components/QuickFilters/QuickFiltersSettings/hooks/useQuickFilterSettings.tsx
+++ b/frontend/src/components/QuickFilters/QuickFiltersSettings/hooks/useQuickFilterSettings.tsx
@@ -40,28 +40,26 @@ const useQuickFilterSettings = ({
 	const [addedFilters, setAddedFilters] = useState<FilterType[]>(customFilters);
 	const { notifications } = useNotifications();

-	const {
-		mutate: updateCustomFilters,
-		isLoading: isUpdatingCustomFilters,
-	} = useMutation(updateCustomFiltersAPI, {
-		onSuccess: () => {
-			setIsSettingsOpen(false);
-			refetchCustomFilters();
-			logEvent('Quick Filters Settings: changes saved', {
-				addedFilters,
-			});
-			notifications.success({
-				message: 'Quick filters updated successfully',
-				placement: 'bottomRight',
-			});
-		},
-		onError: (error: AxiosError) => {
-			notifications.error({
-				message: axios.isAxiosError(error) ? error.message : SOMETHING_WENT_WRONG,
-				placement: 'bottomRight',
-			});
-		},
-	});
+	const { mutate: updateCustomFilters, isLoading: isUpdatingCustomFilters } =
+		useMutation(updateCustomFiltersAPI, {
+			onSuccess: () => {
+				setIsSettingsOpen(false);
+				refetchCustomFilters();
+				logEvent('Quick Filters Settings: changes saved', {
+					addedFilters,
+				});
+				notifications.success({
+					message: 'Quick filters updated successfully',
+					placement: 'bottomRight',
+				});
+			},
+			onError: (error: AxiosError) => {
+				notifications.error({
+					message: axios.isAxiosError(error) ? error.message : SOMETHING_WENT_WRONG,
+					placement: 'bottomRight',
+				});
+			},
+		});
 	const debouncedUpdate = useDebouncedFn((value) => {
 		setDebouncedInputValue(value as string);
 	}, 400);
--- a/frontend/src/components/QuickFilters/hooks/useFilterConfig.tsx
+++ b/frontend/src/components/QuickFilters/hooks/useFilterConfig.tsx
@@ -38,9 +38,10 @@ const useFilterConfig = ({
 		},
 	);

-	const isDynamicFilters = useMemo(() => customFilters.length > 0, [
-		customFilters,
-	]);
+	const isDynamicFilters = useMemo(
+		() => customFilters.length > 0,
+		[customFilters],
+	);

 	const filterConfig = useMemo(
 		() => getFilterConfig(signal, customFilters, config),
--- a/frontend/src/components/QuickFilters/utils.tsx
+++ b/frontend/src/components/QuickFilters/utils.tsx
@@ -55,6 +55,6 @@ export const getFilterConfig = (
 					type: att.type,
 				},
 				defaultOpen: index < 2,
-			} as IQuickFiltersConfig),
+			}) as IQuickFiltersConfig,
 	);
 };
--- a/frontend/src/components/ResizeTable/DynamicColumnTable.tsx
+++ b/frontend/src/components/ResizeTable/DynamicColumnTable.tsx
@@ -52,39 +52,38 @@ function DynamicColumnTable({
 						...prevColumns.slice(0, prevColumns.length - 1),
 						...visibleColumns,
 						prevColumns[prevColumns.length - 1],
-				  ]
+					]
 				: undefined,
 		);
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [columns, dynamicColumns]);

-	const onToggleHandler = (
-		index: number,
-		column: ColumnGroupType<any> | ColumnType<any>,
-	) => (checked: boolean, event: React.MouseEvent<HTMLButtonElement>): void => {
-		event.stopPropagation();
+	const onToggleHandler =
+		(index: number, column: ColumnGroupType<any> | ColumnType<any>) =>
+		(checked: boolean, event: React.MouseEvent<HTMLButtonElement>): void => {
+			event.stopPropagation();

-		if (shouldSendAlertsLogEvent) {
-			logEvent('Alert: Column toggled', {
-				column: column?.title,
-				action: checked ? 'Enable' : 'Disable',
-			});
-		}
-		setVisibleColumns({
-			tablesource,
-			dynamicColumns,
-			index,
-			checked,
-		});
-		setColumnsData((prevColumns) =>
-			getNewColumnData({
-				checked,
-				index,
-				prevColumns,
+			if (shouldSendAlertsLogEvent) {
+				logEvent('Alert: Column toggled', {
+					column: column?.title,
+					action: checked ? 'Enable' : 'Disable',
+				});
+			}
+			setVisibleColumns({
+				tablesource,
 				dynamicColumns,
-			}),
-		);
-	};
+				index,
+				checked,
+			});
+			setColumnsData((prevColumns) =>
+				getNewColumnData({
+					checked,
+					index,
+					prevColumns,
+					dynamicColumns,
+				}),
+			);
+		};

 	const items: MenuProps['items'] =
 		dynamicColumns?.map((column, index) => ({
--- a/frontend/src/components/ResizeTable/ResizeTable.tsx
+++ b/frontend/src/components/ResizeTable/ResizeTable.tsx
@@ -45,20 +45,18 @@ function ResizeTable({
 	}, [onColumnWidthsChange]);

 	const handleResize = useCallback(
-		(index: number) => (
-			e: SyntheticEvent<Element>,
-			{ size }: ResizeCallbackData,
-		): void => {
-			e.preventDefault();
-			e.stopPropagation();
+		(index: number) =>
+			(e: SyntheticEvent<Element>, { size }: ResizeCallbackData): void => {
+				e.preventDefault();
+				e.stopPropagation();

-			const newColumns = [...columnsData];
-			newColumns[index] = {
-				...newColumns[index],
-				width: size.width,
-			};
-			setColumns(newColumns);
-		},
+				const newColumns = [...columnsData];
+				newColumns[index] = {
+					...newColumns[index],
+					width: size.width,
+				};
+				setColumns(newColumns);
+			},
 		[columnsData],
 	);

--- a/frontend/src/components/ResizeTable/types.ts
+++ b/frontend/src/components/ResizeTable/types.ts
@@ -27,7 +27,7 @@ export interface ResizeTableProps extends TableProps<any> {
 	onColumnWidthsChange?: (widths: ColumnWidths) => void;
 }
 export interface DynamicColumnTableProps extends TableProps<any> {
-	tablesource: typeof TableDataSource[keyof typeof TableDataSource];
+	tablesource: (typeof TableDataSource)[keyof typeof TableDataSource];
 	dynamicColumns: TableProps<any>['columns'];
 	onDragColumn?: (fromIndex: number, toIndex: number) => void;
 	facingIssueBtn?: LaunchChatSupportProps;
@@ -40,7 +40,7 @@ export type GetVisibleColumnsFunction = (
 ) => (ColumnGroupType<any> | ColumnType<any>)[];

 export type GetVisibleColumnProps = {
-	tablesource: typeof TableDataSource[keyof typeof TableDataSource];
+	tablesource: (typeof TableDataSource)[keyof typeof TableDataSource];
 	dynamicColumns?: ColumnsType<any>;
 	columnsData?: ColumnsType;
 };
@@ -48,7 +48,7 @@ export type GetVisibleColumnProps = {
 export type SetVisibleColumnsProps = {
 	checked: boolean;
 	index: number;
-	tablesource: typeof TableDataSource[keyof typeof TableDataSource];
+	tablesource: (typeof TableDataSource)[keyof typeof TableDataSource];
 	dynamicColumns?: ColumnsType<any>;
 };

--- a/frontend/src/components/ResizeTable/utils.ts
+++ b/frontend/src/components/ResizeTable/utils.ts
@@ -68,7 +68,7 @@ export const getNewColumnData: GetNewColumnDataFunction = ({
 					...prevColumns.slice(0, prevColumns.length - 1),
 					dynamicColumns[index],
 					prevColumns[prevColumns.length - 1],
-			  ]
+				]
 			: undefined;
 	}
 	return prevColumns && dynamicColumns
--- a/frontend/src/components/ServiceAccountDrawer/AddKeyModal/index.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/AddKeyModal/index.tsx
@@ -37,10 +37,8 @@ function AddKeyModal(): JSX.Element {
 	const open = isAddKeyOpen && !!accountId;

 	const [phase, setPhase] = useState<Phase>(Phase.FORM);
-	const [
-		createdKey,
-		setCreatedKey,
-	] = useState<ServiceaccounttypesGettableFactorAPIKeyWithKeyDTO | null>(null);
+	const [createdKey, setCreatedKey] =
+		useState<ServiceaccounttypesGettableFactorAPIKeyWithKeyDTO | null>(null);
 	const [hasCopied, setHasCopied] = useState(false);

 	const {
@@ -67,30 +65,28 @@ function AddKeyModal(): JSX.Element {
 		}
 	}, [open, reset]);

-	const {
-		mutate: createKey,
-		isLoading: isSubmitting,
-	} = useCreateServiceAccountKey({
-		mutation: {
-			onSuccess: async (response) => {
-				const keyData = response?.data;
-				if (keyData) {
-					setCreatedKey(keyData);
-					setPhase(Phase.CREATED);
-					if (accountId) {
-						await invalidateListServiceAccountKeys(queryClient, { id: accountId });
+	const { mutate: createKey, isLoading: isSubmitting } =
+		useCreateServiceAccountKey({
+			mutation: {
+				onSuccess: async (response) => {
+					const keyData = response?.data;
+					if (keyData) {
+						setCreatedKey(keyData);
+						setPhase(Phase.CREATED);
+						if (accountId) {
+							await invalidateListServiceAccountKeys(queryClient, { id: accountId });
+						}
 					}
-				}
+				},
+				onError: (error) => {
+					showErrorModal(
+						convertToApiError(
+							error as AxiosError<RenderErrorResponseDTO, unknown> | null,
+						) as APIError,
+					);
+				},
 			},
-			onError: (error) => {
-				showErrorModal(
-					convertToApiError(
-						error as AxiosError<RenderErrorResponseDTO, unknown> | null,
-					) as APIError,
-				);
-			},
-		},
-	});
+		});

 	function handleCreate({
 		keyName,
--- a/frontend/src/components/ServiceAccountDrawer/DeleteAccountModal.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/DeleteAccountModal.tsx
@@ -30,30 +30,28 @@ function DeleteAccountModal(): JSX.Element {
 	const cachedAccount = accountId
 		? queryClient.getQueryData<{
 				data: ServiceaccounttypesServiceAccountDTO;
-		  }>(getGetServiceAccountQueryKey({ id: accountId }))
+			}>(getGetServiceAccountQueryKey({ id: accountId }))
 		: null;
 	const accountName = cachedAccount?.data?.name;

-	const {
-		mutate: deleteAccount,
-		isLoading: isDeleting,
-	} = useDeleteServiceAccount({
-		mutation: {
-			onSuccess: async () => {
-				toast.success('Service account deleted');
-				await setIsDeleteOpen(null);
-				await setAccountId(null);
-				await invalidateListServiceAccounts(queryClient);
+	const { mutate: deleteAccount, isLoading: isDeleting } =
+		useDeleteServiceAccount({
+			mutation: {
+				onSuccess: async () => {
+					toast.success('Service account deleted');
+					await setIsDeleteOpen(null);
+					await setAccountId(null);
+					await invalidateListServiceAccounts(queryClient);
+				},
+				onError: (error) => {
+					showErrorModal(
+						convertToApiError(
+							error as AxiosError<RenderErrorResponseDTO, unknown> | null,
+						) as APIError,
+					);
+				},
 			},
-			onError: (error) => {
-				showErrorModal(
-					convertToApiError(
-						error as AxiosError<RenderErrorResponseDTO, unknown> | null,
-					) as APIError,
-				);
-			},
-		},
-	});
+		});

 	function handleConfirm(): void {
 		if (!accountId) {
--- a/frontend/src/components/ServiceAccountDrawer/EditKeyModal/index.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/EditKeyModal/index.tsx
@@ -89,31 +89,29 @@ function EditKeyModal({ keyItem }: EditKeyModalProps): JSX.Element {
 		},
 	});

-	const {
-		mutate: revokeKey,
-		isLoading: isRevoking,
-	} = useRevokeServiceAccountKey({
-		mutation: {
-			onSuccess: async () => {
-				toast.success('Key revoked successfully');
-				setIsRevokeConfirmOpen(false);
-				await setEditKeyId(null);
-				if (selectedAccountId) {
-					await invalidateListServiceAccountKeys(queryClient, {
-						id: selectedAccountId,
-					});
-				}
+	const { mutate: revokeKey, isLoading: isRevoking } =
+		useRevokeServiceAccountKey({
+			mutation: {
+				onSuccess: async () => {
+					toast.success('Key revoked successfully');
+					setIsRevokeConfirmOpen(false);
+					await setEditKeyId(null);
+					if (selectedAccountId) {
+						await invalidateListServiceAccountKeys(queryClient, {
+							id: selectedAccountId,
+						});
+					}
+				},
+				// eslint-disable-next-line sonarjs/no-identical-functions
+				onError: (error) => {
+					showErrorModal(
+						convertToApiError(
+							error as AxiosError<RenderErrorResponseDTO, unknown> | null,
+						) as APIError,
+					);
+				},
 			},
-			// eslint-disable-next-line sonarjs/no-identical-functions
-			onError: (error) => {
-				showErrorModal(
-					convertToApiError(
-						error as AxiosError<RenderErrorResponseDTO, unknown> | null,
-					) as APIError,
-				);
-			},
-		},
-	});
+		});

 	function handleClose(): void {
 		setEditKeyId(null);
--- a/frontend/src/components/ServiceAccountDrawer/RevokeKeyModal.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/RevokeKeyModal.tsx
@@ -67,31 +67,29 @@ function RevokeKeyModal(): JSX.Element {
 	const cachedKeys = accountId
 		? queryClient.getQueryData<{
 				data: ServiceaccounttypesGettableFactorAPIKeyDTO[];
-		  }>(getListServiceAccountKeysQueryKey({ id: accountId }))
+			}>(getListServiceAccountKeysQueryKey({ id: accountId }))
 		: null;
 	const keyName = cachedKeys?.data?.find((k) => k.id === revokeKeyId)?.name;

-	const {
-		mutate: revokeKey,
-		isLoading: isRevoking,
-	} = useRevokeServiceAccountKey({
-		mutation: {
-			onSuccess: async () => {
-				toast.success('Key revoked successfully');
-				await setRevokeKeyId(null);
-				if (accountId) {
-					await invalidateListServiceAccountKeys(queryClient, { id: accountId });
-				}
+	const { mutate: revokeKey, isLoading: isRevoking } =
+		useRevokeServiceAccountKey({
+			mutation: {
+				onSuccess: async () => {
+					toast.success('Key revoked successfully');
+					await setRevokeKeyId(null);
+					if (accountId) {
+						await invalidateListServiceAccountKeys(queryClient, { id: accountId });
+					}
+				},
+				onError: (error) => {
+					showErrorModal(
+						convertToApiError(
+							error as AxiosError<RenderErrorResponseDTO, unknown> | null,
+						) as APIError,
+					);
+				},
 			},
-			onError: (error) => {
-				showErrorModal(
-					convertToApiError(
-						error as AxiosError<RenderErrorResponseDTO, unknown> | null,
-					) as APIError,
-				);
-			},
-		},
-	});
+		});

 	function handleConfirm(): void {
 		if (!revokeKeyId || !accountId) {
--- a/frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx
@@ -231,21 +231,19 @@ function ServiceAccountDrawer({
 	}, []);

 	const makeRoleRetry = useCallback(
-		(
-			context: string,
-			rawRetry: () => Promise<void>,
-		) => async (): Promise<void> => {
-			try {
-				await rawRetry();
-				setSaveErrors((prev) => prev.filter((e) => e.context !== context));
-			} catch (err) {
-				setSaveErrors((prev) =>
-					prev.map((e) =>
-						e.context === context ? { ...e, apiError: toSaveApiError(err) } : e,
-					),
-				);
-			}
-		},
+		(context: string, rawRetry: () => Promise<void>) =>
+			async (): Promise<void> => {
+				try {
+					await rawRetry();
+					setSaveErrors((prev) => prev.filter((e) => e.context !== context));
+				} catch (err) {
+					setSaveErrors((prev) =>
+						prev.map((e) =>
+							e.context === context ? { ...e, apiError: toSaveApiError(err) } : e,
+						),
+					);
+				}
+			},
 		[],
 	);

@@ -302,7 +300,7 @@ function ServiceAccountDrawer({
 					? updateMutateAsync({
 							pathParams: { id: account.id },
 							data: { name: localName },
-					  })
+						})
 					: Promise.resolve();

 			const [nameResult, rolesResult] = await Promise.allSettled([
--- a/frontend/src/components/ServiceAccountsTable/ServiceAccountsTable.tsx
+++ b/frontend/src/components/ServiceAccountsTable/ServiceAccountsTable.tsx
@@ -52,7 +52,7 @@ function ServiceAccountsTable({
 								showSizeChanger: false,
 								onChange: (page: number): void => void setPage(page),
 								className: 'sa-table-pagination',
-						  }
+							}
 						: false
 				}
 				rowClassName={(_, index): string =>
--- a/frontend/src/components/SpanHoverCard/SpanHoverCard.tsx
+++ b/frontend/src/components/SpanHoverCard/SpanHoverCard.tsx
@@ -26,18 +26,15 @@ function SpanHoverCard({
 	children,
 }: SpanHoverCardProps): JSX.Element {
 	const duration = span.durationNano / 1e6; // Convert nanoseconds to milliseconds
-	const { time: formattedDuration, timeUnitName } = convertTimeToRelevantUnit(
-		duration,
-	);
+	const { time: formattedDuration, timeUnitName } =
+		convertTimeToRelevantUnit(duration);

 	const { timezone } = useTimezone();

 	// Calculate relative start time from trace start
 	const relativeStartTime = span.timestamp - traceMetadata.startTime;
-	const {
-		time: relativeTime,
-		timeUnitName: relativeTimeUnit,
-	} = convertTimeToRelevantUnit(relativeStartTime);
+	const { time: relativeTime, timeUnitName: relativeTimeUnit } =
+		convertTimeToRelevantUnit(relativeStartTime);

 	// Format absolute start time
 	const startTimeFormatted = dayjs(span.timestamp)
--- a/frontend/src/components/TimelineV2/utils.ts
+++ b/frontend/src/components/TimelineV2/utils.ts
@@ -71,7 +71,7 @@ export function getIntervals(
 		intervalSpread < 1.0
 			? intervalSpread
 			: Math.floor(Number(integerPartString) / 10 ** (integerPartLength - 1)) *
-			  10 ** (integerPartLength - 1);
+				10 ** (integerPartLength - 1);

 	let intervalUnit = INTERVAL_UNITS[0];
 	for (let idx = INTERVAL_UNITS.length - 1; idx >= 0; idx -= 1) {
--- a/frontend/src/components/ValueGraph/tests/ValueGraph.test.tsx
+++ b/frontend/src/components/ValueGraph/tests/ValueGraph.test.tsx
@@ -12,9 +12,10 @@ jest.mock('../utils', () => ({
 	})),
 }));

-const mockGetBackgroundColorAndThresholdCheck = getBackgroundColorAndThresholdCheck as jest.MockedFunction<
-	typeof getBackgroundColorAndThresholdCheck
->;
+const mockGetBackgroundColorAndThresholdCheck =
+	getBackgroundColorAndThresholdCheck as jest.MockedFunction<
+		typeof getBackgroundColorAndThresholdCheck
+	>;

 const TEST_ID_VALUE_GRAPH_TEXT = 'value-graph-text';
 const TEST_ID_VALUE_GRAPH_PREFIX_UNIT = 'value-graph-prefix-unit';
--- a/frontend/src/components/ValueGraph/index.tsx
+++ b/frontend/src/components/ValueGraph/index.tsx
@@ -85,10 +85,8 @@ function ValueGraph({
 		};
 	}, []);

-	const {
-		threshold,
-		isConflictingThresholds,
-	} = getBackgroundColorAndThresholdCheck(thresholds, rawValue, yAxisUnit);
+	const { threshold, isConflictingThresholds } =
+		getBackgroundColorAndThresholdCheck(thresholds, rawValue, yAxisUnit);

 	return (
 		<div
--- a/frontend/src/components/WarningPopover/WarningPopover.styles.scss
+++ b/frontend/src/components/WarningPopover/WarningPopover.styles.scss
@@ -169,9 +169,12 @@
 		gap: 3px;
 		background: var(--l1-border);
 		border-radius: 20px;
-		box-shadow: 0px 103px 12px 0px rgba(0, 0, 0, 0.01),
-			0px 66px 18px 0px rgba(0, 0, 0, 0.01), 0px 37px 22px 0px rgba(0, 0, 0, 0.03),
-			0px 17px 17px 0px rgba(0, 0, 0, 0.04), 0px 4px 9px 0px rgba(0, 0, 0, 0.04);
+		box-shadow:
+			0px 103px 12px 0px rgba(0, 0, 0, 0.01),
+			0px 66px 18px 0px rgba(0, 0, 0, 0.01),
+			0px 37px 22px 0px rgba(0, 0, 0, 0.03),
+			0px 17px 17px 0px rgba(0, 0, 0, 0.04),
+			0px 4px 9px 0px rgba(0, 0, 0, 0.04);
 	}

 	&__scroll-hint-text {
--- a/frontend/src/components/YAxisUnitSelector/YAxisUnitSelector.tsx
+++ b/frontend/src/components/YAxisUnitSelector/YAxisUnitSelector.tsx
@@ -34,9 +34,8 @@ function YAxisUnitSelector({
 		const initialUniversalUnit = mapMetricUnitToUniversalUnit(initialValue);
 		const currentUniversalUnit = mapMetricUnitToUniversalUnit(value);
 		if (initialUniversalUnit !== currentUniversalUnit) {
-			const initialUniversalUnitName = getUniversalNameFromMetricUnit(
-				initialValue,
-			);
+			const initialUniversalUnitName =
+				getUniversalNameFromMetricUnit(initialValue);
 			const currentUniversalUnitName = getUniversalNameFromMetricUnit(value);
 			return `Unit mismatch. The metric was sent with unit ${initialUniversalUnitName}, but ${currentUniversalUnitName} is selected.`;
 		}
--- a/frontend/src/components/createGuardedRoute/createGuardedRoute.test.tsx
+++ b/frontend/src/components/createGuardedRoute/createGuardedRoute.test.tsx
@@ -57,8 +57,8 @@ describe('createGuardedRoute', () => {
 		const props = {
 			testProp: 'test-value',
 			match: mockMatch,
-			location: ({} as unknown) as RouteComponentProps['location'],
-			history: ({} as unknown) as RouteComponentProps['history'],
+			location: {} as unknown as RouteComponentProps['location'],
+			history: {} as unknown as RouteComponentProps['history'],
 		};

 		render(<GuardedComponent {...props} />);
@@ -92,8 +92,8 @@ describe('createGuardedRoute', () => {
 		const props = {
 			testProp: 'test-value',
 			match: mockMatch,
-			location: ({} as unknown) as RouteComponentProps['location'],
-			history: ({} as unknown) as RouteComponentProps['history'],
+			location: {} as unknown as RouteComponentProps['location'],
+			history: {} as unknown as RouteComponentProps['history'],
 		};

 		render(<GuardedComponent {...props} />);
@@ -144,8 +144,8 @@ describe('createGuardedRoute', () => {
 		const props = {
 			testProp: 'test-value',
 			match: mockMatch,
-			location: ({} as unknown) as RouteComponentProps['location'],
-			history: ({} as unknown) as RouteComponentProps['history'],
+			location: {} as unknown as RouteComponentProps['location'],
+			history: {} as unknown as RouteComponentProps['history'],
 		};

 		render(<GuardedComponent {...props} />);
@@ -179,8 +179,8 @@ describe('createGuardedRoute', () => {
 		const props = {
 			testProp: 'test-value',
 			match: mockMatch,
-			location: ({} as unknown) as RouteComponentProps['location'],
-			history: ({} as unknown) as RouteComponentProps['history'],
+			location: {} as unknown as RouteComponentProps['location'],
+			history: {} as unknown as RouteComponentProps['history'],
 		};

 		render(<GuardedComponent {...props} />);
@@ -217,8 +217,8 @@ describe('createGuardedRoute', () => {
 		const props = {
 			testProp: 'test-value',
 			match: mockMatch,
-			location: ({} as unknown) as RouteComponentProps['location'],
-			history: ({} as unknown) as RouteComponentProps['history'],
+			location: {} as unknown as RouteComponentProps['location'],
+			history: {} as unknown as RouteComponentProps['history'],
 		};

 		render(<GuardedComponent {...props} />);
@@ -252,8 +252,8 @@ describe('createGuardedRoute', () => {
 		const props = {
 			testProp: 'test-value',
 			match: mockMatch,
-			location: ({} as unknown) as RouteComponentProps['location'],
-			history: ({} as unknown) as RouteComponentProps['history'],
+			location: {} as unknown as RouteComponentProps['location'],
+			history: {} as unknown as RouteComponentProps['history'],
 		};

 		render(<GuardedComponent {...props} />);
@@ -291,8 +291,8 @@ describe('createGuardedRoute', () => {
 		const props = {
 			testProp: 'test-value',
 			match: mockMatch,
-			location: ({} as unknown) as RouteComponentProps['location'],
-			history: ({} as unknown) as RouteComponentProps['history'],
+			location: {} as unknown as RouteComponentProps['location'],
+			history: {} as unknown as RouteComponentProps['history'],
 		};

 		render(<GuardedComponent {...props} />);
@@ -350,8 +350,8 @@ describe('createGuardedRoute', () => {
 			prop2: 42,
 			prop3: true,
 			match: mockMatch,
-			location: ({} as unknown) as RouteComponentProps['location'],
-			history: ({} as unknown) as RouteComponentProps['history'],
+			location: {} as unknown as RouteComponentProps['location'],
+			history: {} as unknown as RouteComponentProps['history'],
 		};

 		render(<GuardedComponent {...props} />);
@@ -396,8 +396,8 @@ describe('createGuardedRoute', () => {
 		const props1 = {
 			testProp: 'test-value-1',
 			match: mockMatch1,
-			location: ({} as unknown) as RouteComponentProps['location'],
-			history: ({} as unknown) as RouteComponentProps['history'],
+			location: {} as unknown as RouteComponentProps['location'],
+			history: {} as unknown as RouteComponentProps['history'],
 		};

 		const { unmount } = render(<GuardedComponent {...props1} />);
@@ -421,8 +421,8 @@ describe('createGuardedRoute', () => {
 		const props2 = {
 			testProp: 'test-value-2',
 			match: mockMatch2,
-			location: ({} as unknown) as RouteComponentProps['location'],
-			history: ({} as unknown) as RouteComponentProps['history'],
+			location: {} as unknown as RouteComponentProps['location'],
+			history: {} as unknown as RouteComponentProps['history'],
 		};

 		render(<GuardedComponent {...props2} />);
@@ -459,8 +459,8 @@ describe('createGuardedRoute', () => {
 		const props = {
 			testProp: 'test-value',
 			match: mockMatch,
-			location: ({} as unknown) as RouteComponentProps['location'],
-			history: ({} as unknown) as RouteComponentProps['history'],
+			location: {} as unknown as RouteComponentProps['location'],
+			history: {} as unknown as RouteComponentProps['history'],
 		};

 		render(<GuardedComponent {...props} />);
--- a/frontend/src/constants/queryBuilder.ts
+++ b/frontend/src/constants/queryBuilder.ts
@@ -267,10 +267,11 @@ export const initialFormulaBuilderFormValues: IBuilderFormula = {
 	legend: '',
 };

-export const initialQueryBuilderFormTraceOperatorValues: IBuilderTraceOperator = {
-	...initialQueryBuilderFormTracesValues,
-	queryName: TRACE_OPERATOR_QUERY_NAME,
-};
+export const initialQueryBuilderFormTraceOperatorValues: IBuilderTraceOperator =
+	{
+		...initialQueryBuilderFormTracesValues,
+		queryName: TRACE_OPERATOR_QUERY_NAME,
+	};

 export const initialQueryPromQLData: IPromQLQuery = {
 	name: createNewBuilderItemName({ existNames: [], sourceNames: alphabet }),
--- a/frontend/src/container/AlertHistory/Statistics/StatsCard/StatsCard.tsx
+++ b/frontend/src/container/AlertHistory/Statistics/StatsCard/StatsCard.tsx
@@ -98,9 +98,8 @@ function StatsCard({
 	if (!displayTime) {
 		displayTime = '';
 	}
-	const formattedStartTimeForTooltip = convertTimestampToLocaleDateString(
-		startTime,
-	);
+	const formattedStartTimeForTooltip =
+		convertTimestampToLocaleDateString(startTime);
 	const formattedEndTimeForTooltip = convertTimestampToLocaleDateString(endTime);

 	return (
--- a/frontend/src/container/AlertHistory/Statistics/StatsCardsRenderer/StatsCardsRenderer.tsx
+++ b/frontend/src/container/AlertHistory/Statistics/StatsCardsRenderer/StatsCardsRenderer.tsx
@@ -28,14 +28,8 @@ type StatsCardsRendererProps = {
 function StatsCardsRenderer({
 	setTotalCurrentTriggers,
 }: StatsCardsRendererProps): JSX.Element {
-	const {
-		isLoading,
-		isRefetching,
-		isError,
-		data,
-		isValidRuleId,
-		ruleId,
-	} = useGetAlertRuleDetailsStats();
+	const { isLoading, isRefetching, isError, data, isValidRuleId, ruleId } =
+		useGetAlertRuleDetailsStats();

 	useEffect(() => {
 		if (data?.payload?.data?.totalCurrentTriggers !== undefined) {
--- a/frontend/src/container/AlertHistory/Statistics/TopContributorsRenderer/TopContributorsRenderer.tsx
+++ b/frontend/src/container/AlertHistory/Statistics/TopContributorsRenderer/TopContributorsRenderer.tsx
@@ -11,14 +11,8 @@ type TopContributorsRendererProps = {
 function TopContributorsRenderer({
 	totalCurrentTriggers,
 }: TopContributorsRendererProps): JSX.Element {
-	const {
-		isLoading,
-		isRefetching,
-		isError,
-		data,
-		isValidRuleId,
-		ruleId,
-	} = useGetAlertRuleDetailsTopContributors();
+	const { isLoading, isRefetching, isError, data, isValidRuleId, ruleId } =
+		useGetAlertRuleDetailsTopContributors();
 	const response = data?.payload?.data;

 	// TODO(shaheer): render the DataStateRenderer inside the TopContributorsCard, it should display the title and view all
--- a/Show More
+++ b/Show More