feat: increase limit

* fix: add missing filtering for ip address for scalar data

In domain listing api for external api monitoring,
we have option to filter out the IP address but
it only handles timeseries and raw type data while
domain list handler returns scalar data.

* fix: switch to new derived attributes for ip filtering

---------

Co-authored-by: Nityananda Gohain <nityanandagohain@gmail.com>

deploy/docker-swarm/otel-collector-config.yaml

@@ -82,12 +82,6 @@ exporters:
     timeout: 45s
     sending_queue:
       enabled: false
-  metadataexporter:
-    cache:
-      provider: in_memory
-    dsn: tcp://clickhouse:9000/signoz_metadata
-    enabled: true
-    timeout: 45s
 service:
   telemetry:
     logs:
@@ -99,19 +93,19 @@ service:
     traces:
       receivers: [otlp]
       processors: [signozspanmetrics/delta, batch]
-      exporters: [clickhousetraces, metadataexporter, signozmeter]
+      exporters: [clickhousetraces, signozmeter]
     metrics:
       receivers: [otlp]
       processors: [batch]
-      exporters: [signozclickhousemetrics, metadataexporter, signozmeter]
+      exporters: [signozclickhousemetrics, signozmeter]
     metrics/prometheus:
       receivers: [prometheus]
       processors: [batch]
-      exporters: [signozclickhousemetrics, metadataexporter, signozmeter]
+      exporters: [signozclickhousemetrics, signozmeter]
     logs:
       receivers: [otlp]
       processors: [batch]
-      exporters: [clickhouselogsexporter, metadataexporter, signozmeter]
+      exporters: [clickhouselogsexporter, signozmeter]
     metrics/meter:
       receivers: [signozmeter]
       processors: [batch/meter]

deploy/docker/otel-collector-config.yaml

@@ -82,12 +82,6 @@ exporters:
     timeout: 45s
     sending_queue:
       enabled: false
-  metadataexporter:
-    cache:
-      provider: in_memory
-    dsn: tcp://clickhouse:9000/signoz_metadata
-    enabled: true
-    timeout: 45s
 service:
   telemetry:
     logs:
@@ -99,19 +93,19 @@ service:
     traces:
       receivers: [otlp]
       processors: [signozspanmetrics/delta, batch]
-      exporters: [clickhousetraces, metadataexporter, signozmeter]
+      exporters: [clickhousetraces, signozmeter]
     metrics:
       receivers: [otlp]
       processors: [batch]
-      exporters: [signozclickhousemetrics, metadataexporter, signozmeter]
+      exporters: [signozclickhousemetrics, signozmeter]
     metrics/prometheus:
       receivers: [prometheus]
       processors: [batch]
-      exporters: [signozclickhousemetrics, metadataexporter, signozmeter]
+      exporters: [signozclickhousemetrics, signozmeter]
     logs:
       receivers: [otlp]
       processors: [batch]
-      exporters: [clickhouselogsexporter, metadataexporter, signozmeter]
+      exporters: [clickhouselogsexporter, signozmeter]
     metrics/meter:
       receivers: [signozmeter]
       processors: [batch/meter]

frontend/__mocks__/useSafeNavigate.ts

@@ -2,8 +2,6 @@
 interface SafeNavigateOptions {
 	replace?: boolean;
 	state?: unknown;
-	newTab?: boolean;
-	event?: MouseEvent | React.MouseEvent;
 }
 
 interface SafeNavigateTo {
@@ -22,7 +20,9 @@ interface UseSafeNavigateReturn {
 
 export const useSafeNavigate = (): UseSafeNavigateReturn => ({
 	safeNavigate: jest.fn(
-		(_to: SafeNavigateToType, _options?: SafeNavigateOptions) => {},
+		(to: SafeNavigateToType, options?: SafeNavigateOptions) => {
+			console.log(`Mock safeNavigate called with:`, to, options);
+		},
 	) as jest.MockedFunction<
 		(to: SafeNavigateToType, options?: SafeNavigateOptions) => void
 	>,

frontend/src/AppRoutes/pageComponents.ts

@@ -308,15 +308,3 @@ export const PublicDashboardPage = Loadable(
 			/* webpackChunkName: "Public Dashboard Page" */ 'pages/PublicDashboard'
 		),
 );
-
-export const AlertTypeSelectionPage = Loadable(
-	() =>
-		import(
-			/* webpackChunkName: "Alert Type Selection Page" */ 'pages/AlertTypeSelection'
-		),
-);
-
-export const MeterExplorerPage = Loadable(
-	() =>
-		import(/* webpackChunkName: "Meter Explorer Page" */ 'pages/MeterExplorer'),
-);

frontend/src/AppRoutes/routes.ts

@@ -1,10 +1,12 @@
 import { RouteProps } from 'react-router-dom';
 import ROUTES from 'constants/routes';
+import AlertTypeSelectionPage from 'pages/AlertTypeSelection';
+import MessagingQueues from 'pages/MessagingQueues';
+import MeterExplorer from 'pages/MeterExplorer';
 
 import {
 	AlertHistory,
 	AlertOverview,
-	AlertTypeSelectionPage,
 	AllAlertChannels,
 	AllErrors,
 	ApiMonitoring,
@@ -27,8 +29,6 @@ import {
 	LogsExplorer,
 	LogsIndexToFields,
 	LogsSaveViews,
-	MessagingQueuesMainPage,
-	MeterExplorerPage,
 	MetricsExplorer,
 	OldLogsExplorer,
 	Onboarding,
@@ -399,28 +399,28 @@ const routes: AppRoutes[] = [
 	{
 		path: ROUTES.MESSAGING_QUEUES_KAFKA,
 		exact: true,
-		component: MessagingQueuesMainPage,
+		component: MessagingQueues,
 		key: 'MESSAGING_QUEUES_KAFKA',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.MESSAGING_QUEUES_CELERY_TASK,
 		exact: true,
-		component: MessagingQueuesMainPage,
+		component: MessagingQueues,
 		key: 'MESSAGING_QUEUES_CELERY_TASK',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.MESSAGING_QUEUES_OVERVIEW,
 		exact: true,
-		component: MessagingQueuesMainPage,
+		component: MessagingQueues,
 		key: 'MESSAGING_QUEUES_OVERVIEW',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.MESSAGING_QUEUES_KAFKA_DETAIL,
 		exact: true,
-		component: MessagingQueuesMainPage,
+		component: MessagingQueues,
 		key: 'MESSAGING_QUEUES_KAFKA_DETAIL',
 		isPrivate: true,
 	},
@@ -463,21 +463,21 @@ const routes: AppRoutes[] = [
 	{
 		path: ROUTES.METER,
 		exact: true,
-		component: MeterExplorerPage,
+		component: MeterExplorer,
 		key: 'METER',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.METER_EXPLORER,
 		exact: true,
-		component: MeterExplorerPage,
+		component: MeterExplorer,
 		key: 'METER_EXPLORER',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.METER_EXPLORER_VIEWS,
 		exact: true,
-		component: MeterExplorerPage,
+		component: MeterExplorer,
 		key: 'METER_EXPLORER_VIEWS',
 		isPrivate: true,
 	},

frontend/src/components/LogDetail/index.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable sonarjs/cognitive-complexity */
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useCopyToClipboard, useLocation } from 'react-use';
 import { Color, Spacing } from '@signozhq/design-tokens';
@@ -214,7 +214,7 @@ function LogDetailInner({
 	};
 
 	// Go to logs explorer page with the log data
-	const handleOpenInExplorer = (e?: React.MouseEvent): void => {
+	const handleOpenInExplorer = (): void => {
 		const queryParams = {
 			[QueryParams.activeLogId]: `"${log?.id}"`,
 			[QueryParams.startTime]: minTime?.toString() || '',
@@ -227,9 +227,7 @@ function LogDetailInner({
 				),
 			),
 		};
-		safeNavigate(`${ROUTES.LOGS_EXPLORER}?${createQueryParams(queryParams)}`, {
-			event: e,
-		});
+		safeNavigate(`${ROUTES.LOGS_EXPLORER}?${createQueryParams(queryParams)}`);
 	};
 
 	const handleQueryExpressionChange = useCallback(

frontend/src/components/Logs/TableView/config.ts

@@ -21,7 +21,7 @@ export function getDefaultCellStyle(isDarkMode?: boolean): CSSProperties {
 
 export const defaultTableStyle: CSSProperties = {
 	minWidth: '40rem',
-	maxWidth: '90rem',
+	maxWidth: '60rem',
 };
 
 export const defaultListViewPanelStyle: CSSProperties = {

frontend/src/components/TimelineV2/TimelineV2.tsx

@@ -14,10 +14,16 @@ interface ITimelineV2Props {
 	startTimestamp: number;
 	endTimestamp: number;
 	timelineHeight: number;
+	offsetTimestamp: number;
 }
 
 function TimelineV2(props: ITimelineV2Props): JSX.Element {
-	const { startTimestamp, endTimestamp, timelineHeight } = props;
+	const {
+		startTimestamp,
+		endTimestamp,
+		timelineHeight,
+		offsetTimestamp,
+	} = props;
 	const [intervals, setIntervals] = useState<Interval[]>([]);
 	const [ref, { width }] = useMeasure<HTMLDivElement>();
 	const isDarkMode = useIsDarkMode();
@@ -30,8 +36,10 @@ function TimelineV2(props: ITimelineV2Props): JSX.Element {
 
 		const minIntervals = getMinimumIntervalsBasedOnWidth(width);
 		const intervalisedSpread = (spread / minIntervals) * 1.0;
-		setIntervals(getIntervals(intervalisedSpread, spread));
-	}, [startTimestamp, endTimestamp, width]);
+		const intervals = getIntervals(intervalisedSpread, spread, offsetTimestamp);
+
+		setIntervals(intervals);
+	}, [startTimestamp, endTimestamp, width, offsetTimestamp]);
 
 	if (endTimestamp < startTimestamp) {
 		console.error(

frontend/src/components/TimelineV2/utils.ts

@@ -64,6 +64,71 @@ export const resolveTimeFromInterval = (
 export function getIntervals(
 	intervalSpread: number,
 	baseSpread: number,
+	offsetTimestamp: number, // ms offset from trace start (e.g. viewStart - traceStart)
+): Interval[] {
+	const integerPartString = intervalSpread.toString().split('.')[0];
+	const integerPartLength = integerPartString.length;
+
+	const intervalSpreadNormalized =
+		intervalSpread < 1.0
+			? intervalSpread
+			: Math.floor(Number(integerPartString) / 10 ** (integerPartLength - 1)) *
+			  10 ** (integerPartLength - 1);
+
+	let intervalUnit = INTERVAL_UNITS[0];
+	for (let idx = INTERVAL_UNITS.length - 1; idx >= 0; idx -= 1) {
+		const standardInterval = INTERVAL_UNITS[idx];
+		if (intervalSpread * standardInterval.multiplier >= 1) {
+			intervalUnit = INTERVAL_UNITS[idx];
+			break;
+		}
+	}
+
+	const intervals: Interval[] = [
+		{
+			// ✅ start label should reflect window start offset (relative to trace start)
+			label: `${toFixed(
+				resolveTimeFromInterval(offsetTimestamp, intervalUnit),
+				2,
+			)}${intervalUnit.name}`,
+			percentage: 0,
+		},
+	];
+
+	let tempBaseSpread = baseSpread;
+	let elapsedIntervals = 0;
+
+	while (tempBaseSpread && intervals.length < 20) {
+		let intervalTime: number;
+
+		if (tempBaseSpread <= 1.5 * intervalSpreadNormalized) {
+			intervalTime = elapsedIntervals + tempBaseSpread;
+			tempBaseSpread = 0;
+		} else {
+			intervalTime = elapsedIntervals + intervalSpreadNormalized;
+			tempBaseSpread -= intervalSpreadNormalized;
+		}
+
+		elapsedIntervals = intervalTime;
+
+		// ✅ label time = window offset + elapsed time inside window
+		const labelTime = offsetTimestamp + intervalTime;
+
+		intervals.push({
+			label: `${toFixed(resolveTimeFromInterval(labelTime, intervalUnit), 2)}${
+				intervalUnit.name
+			}`,
+			percentage: (intervalTime / baseSpread) * 100,
+		});
+	}
+
+	return intervals;
+}
+
+export function getIntervalsOld(
+	intervalSpread: number,
+	baseSpread: number,
+	offsetTimestamp: number,
 ): Interval[] {
 	const integerPartString = intervalSpread.toString().split('.')[0];
 	const integerPartLength = integerPartString.length;
@@ -106,9 +171,10 @@ export function getIntervals(
 		}
 		elapsedIntervals = intervalTime;
 		const interval: Interval = {
-			label: `${toFixed(resolveTimeFromInterval(intervalTime, intervalUnit), 2)}${
-				intervalUnit.name
-			}`,
+			label: `${toFixed(
+				resolveTimeFromInterval(intervalTime + offsetTimestamp, intervalUnit),
+				2,
+			)}${intervalUnit.name}`,
 			percentage: (intervalTime / baseSpread) * 100,
 		};
 		intervals.push(interval);

frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx

@@ -70,8 +70,8 @@ function SelectAlertType({ onSelect }: SelectAlertTypeProps): JSX.Element {
 								</Tag>
 							) : undefined
 						}
-						onClick={(e): void => {
-							onSelect(option.selection, e);
+						onClick={(): void => {
+							onSelect(option.selection);
 						}}
 						data-testid={`alert-type-card-${option.selection}`}
 					>
@@ -108,7 +108,7 @@ function SelectAlertType({ onSelect }: SelectAlertTypeProps): JSX.Element {
 }
 
 interface SelectAlertTypeProps {
-	onSelect: (type: AlertTypes, event?: React.MouseEvent) => void;
+	onSelect: (typ: AlertTypes) => void;
 }
 
 export default SelectAlertType;

frontend/src/container/CreateAlertV2/Footer/Footer.tsx

@@ -33,9 +33,9 @@ function Footer(): JSX.Element {
 	const { currentQuery } = useQueryBuilder();
 	const { safeNavigate } = useSafeNavigate();
 
-	const handleDiscard = (e: React.MouseEvent): void => {
+	const handleDiscard = (): void => {
 		discardAlertRule();
-		safeNavigate('/alerts', { event: e });
+		safeNavigate('/alerts');
 	};
 
 	const alertValidationMessage = useMemo(

frontend/src/container/DashboardContainer/DashboardDescription/__tests__/DashboardDescription.test.tsx

@@ -161,7 +161,6 @@ describe('Dashboard landing page actions header tests', () => {
 		// Verify navigation was called with correct URL
 		expect(mockSafeNavigate).toHaveBeenCalledWith(
 			'/dashboard?columnKey=updatedAt&order=descend&page=1&search=',
-			expect.objectContaining({ event: expect.any(Object) }),
 		);
 
 		// Ensure the URL contains only essential dashboard list params

frontend/src/container/DashboardContainer/components/DashboardHeader/DashboardBreadcrumbs.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { Button } from 'antd';
 import ROUTES from 'constants/routes';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
@@ -23,19 +23,16 @@ function DashboardBreadcrumbs(): JSX.Element {
 
 	const { title = '', image = Base64Icons[0] } = selectedData || {};
 
-	const goToListPage = useCallback(
-		(e?: React.MouseEvent) => {
-			const urlParams = new URLSearchParams();
-			urlParams.set('columnKey', listSortOrder.columnKey as string);
-			urlParams.set('order', listSortOrder.order as string);
-			urlParams.set('page', listSortOrder.pagination as string);
-			urlParams.set('search', listSortOrder.search as string);
+	const goToListPage = useCallback(() => {
+		const urlParams = new URLSearchParams();
+		urlParams.set('columnKey', listSortOrder.columnKey as string);
+		urlParams.set('order', listSortOrder.order as string);
+		urlParams.set('page', listSortOrder.pagination as string);
+		urlParams.set('search', listSortOrder.search as string);
 
-			const generatedUrl = `${ROUTES.ALL_DASHBOARD}?${urlParams.toString()}`;
-			safeNavigate(generatedUrl, { event: e });
-		},
-		[listSortOrder, safeNavigate],
-	);
+		const generatedUrl = `${ROUTES.ALL_DASHBOARD}?${urlParams.toString()}`;
+		safeNavigate(generatedUrl);
+	}, [listSortOrder, safeNavigate]);
 
 	return (
 		<div className="dashboard-breadcrumbs">

frontend/src/container/ErrorDetails/index.tsx

@@ -16,7 +16,6 @@ import { isUndefined } from 'lodash-es';
 import { urlKey } from 'pages/ErrorDetails/utils';
 import { useTimezone } from 'providers/Timezone';
 import { PayloadProps as GetByErrorTypeAndServicePayload } from 'types/api/errors/getByErrorTypeAndService';
-import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { keyToExclude } from './config';
 import { DashedContainer, EditorContainer, EventContainer } from './styles';
@@ -112,19 +111,14 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
 			value: errorDetail[key as keyof GetByErrorTypeAndServicePayload],
 		}));
 
-	const onClickTraceHandler = (event: React.MouseEvent): void => {
+	const onClickTraceHandler = (): void => {
 		logEvent('Exception: Navigate to trace detail page', {
 			groupId: errorDetail?.groupID,
 			spanId: errorDetail.spanID,
 			traceId: errorDetail.traceID,
 			exceptionId: errorDetail?.errorId,
 		});
-		const path = `/trace/${errorDetail.traceID}?spanId=${errorDetail.spanID}`;
-		if (isModifierKeyPressed(event)) {
-			openInNewTab(path);
-		} else {
-			history.push(path);
-		}
+		history.push(`/trace/${errorDetail.traceID}?spanId=${errorDetail.spanID}`);
 	};
 
 	const logEventCalledRef = useRef(false);

frontend/src/container/FormAlertRules/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQueryClient } from 'react-query';
 import { useSelector } from 'react-redux';
@@ -329,18 +329,13 @@ function FormAlertRules({
 		}
 	}, [alertDef, currentQuery?.queryType, queryOptions]);
 
-	const onCancelHandler = useCallback(
-		(e?: React.MouseEvent) => {
-			urlQuery.delete(QueryParams.compositeQuery);
-			urlQuery.delete(QueryParams.panelTypes);
-			urlQuery.delete(QueryParams.ruleId);
-			urlQuery.delete(QueryParams.relativeTime);
-			safeNavigate(`${ROUTES.LIST_ALL_ALERT}?${urlQuery.toString()}`, {
-				event: e,
-			});
-		},
-		[safeNavigate, urlQuery],
-	);
+	const onCancelHandler = useCallback(() => {
+		urlQuery.delete(QueryParams.compositeQuery);
+		urlQuery.delete(QueryParams.panelTypes);
+		urlQuery.delete(QueryParams.ruleId);
+		urlQuery.delete(QueryParams.relativeTime);
+		safeNavigate(`${ROUTES.LIST_ALL_ALERT}?${urlQuery.toString()}`);
+	}, [safeNavigate, urlQuery]);
 
 	// onQueryCategoryChange handles changes to query category
 	// in state as well as sets additional defaults

frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx

@@ -1,11 +1,5 @@
 /* eslint-disable sonarjs/cognitive-complexity */
-import React, {
-	useCallback,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-} from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 import {
 	LoadingOutlined,
@@ -285,9 +279,9 @@ function FullView({
 											<Button
 												className="switch-edit-btn"
 												disabled={response.isFetching || response.isLoading}
-												onClick={(e: React.MouseEvent): void => {
+												onClick={(): void => {
 													if (dashboardEditView) {
-														safeNavigate(dashboardEditView, { event: e });
+														safeNavigate(dashboardEditView);
 													}
 												}}
 											>

frontend/src/container/Home/Home.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable sonarjs/no-duplicate-string */
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useMutation, useQuery } from 'react-query';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Popover } from 'antd';
@@ -28,7 +28,6 @@ import { UserPreference } from 'types/api/preferences/preference';
 import { DataSource } from 'types/common/queryBuilder';
 import { USER_ROLES } from 'types/roles';
 import { isIngestionActive } from 'utils/app';
-import { navigateToPage } from 'utils/navigation';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import AlertRules from './AlertRules/AlertRules';
@@ -414,12 +413,12 @@ export default function Home(): JSX.Element {
 											role="button"
 											tabIndex={0}
 											className="active-ingestion-card-actions"
-											onClick={(e: React.MouseEvent): void => {
+											onClick={(): void => {
 												// eslint-disable-next-line sonarjs/no-duplicate-string
 												logEvent('Homepage: Ingestion Active Explore clicked', {
 													source: 'Logs',
 												});
-												navigateToPage(ROUTES.LOGS_EXPLORER, history.push, e);
+												history.push(ROUTES.LOGS_EXPLORER);
 											}}
 											onKeyDown={(e): void => {
 												if (e.key === 'Enter') {
@@ -456,11 +455,11 @@ export default function Home(): JSX.Element {
 											className="active-ingestion-card-actions"
 											role="button"
 											tabIndex={0}
-											onClick={(e: React.MouseEvent): void => {
+											onClick={(): void => {
 												logEvent('Homepage: Ingestion Active Explore clicked', {
 													source: 'Traces',
 												});
-												navigateToPage(ROUTES.TRACES_EXPLORER, history.push, e);
+												history.push(ROUTES.TRACES_EXPLORER);
 											}}
 											onKeyDown={(e): void => {
 												if (e.key === 'Enter') {
@@ -497,11 +496,11 @@ export default function Home(): JSX.Element {
 											className="active-ingestion-card-actions"
 											role="button"
 											tabIndex={0}
-											onClick={(e: React.MouseEvent): void => {
+											onClick={(): void => {
 												logEvent('Homepage: Ingestion Active Explore clicked', {
 													source: 'Metrics',
 												});
-												navigateToPage(ROUTES.METRICS_EXPLORER, history.push, e);
+												history.push(ROUTES.METRICS_EXPLORER);
 											}}
 											onKeyDown={(e): void => {
 												if (e.key === 'Enter') {
@@ -551,11 +550,11 @@ export default function Home(): JSX.Element {
 												type="default"
 												className="periscope-btn secondary"
 												icon={<Wrench size={14} />}
-												onClick={(e: React.MouseEvent): void => {
+												onClick={(): void => {
 													logEvent('Homepage: Explore clicked', {
 														source: 'Logs',
 													});
-													navigateToPage(ROUTES.LOGS_EXPLORER, history.push, e);
+													history.push(ROUTES.LOGS_EXPLORER);
 												}}
 											>
 												Open Logs Explorer
@@ -565,11 +564,11 @@ export default function Home(): JSX.Element {
 												type="default"
 												className="periscope-btn secondary"
 												icon={<Wrench size={14} />}
-												onClick={(e: React.MouseEvent): void => {
+												onClick={(): void => {
 													logEvent('Homepage: Explore clicked', {
 														source: 'Traces',
 													});
-													navigateToPage(ROUTES.TRACES_EXPLORER, history.push, e);
+													history.push(ROUTES.TRACES_EXPLORER);
 												}}
 											>
 												Open Traces Explorer
@@ -579,11 +578,11 @@ export default function Home(): JSX.Element {
 												type="default"
 												className="periscope-btn secondary"
 												icon={<Wrench size={14} />}
-												onClick={(e: React.MouseEvent): void => {
+												onClick={(): void => {
 													logEvent('Homepage: Explore clicked', {
 														source: 'Metrics',
 													});
-													navigateToPage(ROUTES.METRICS_EXPLORER_EXPLORER, history.push, e);
+													history.push(ROUTES.METRICS_EXPLORER_EXPLORER);
 												}}
 											>
 												Open Metrics Explorer
@@ -620,11 +619,11 @@ export default function Home(): JSX.Element {
 												type="default"
 												className="periscope-btn secondary"
 												icon={<Plus size={14} />}
-												onClick={(e: React.MouseEvent): void => {
+												onClick={(): void => {
 													logEvent('Homepage: Explore clicked', {
 														source: 'Dashboards',
 													});
-													navigateToPage(ROUTES.ALL_DASHBOARD, history.push, e);
+													history.push(ROUTES.ALL_DASHBOARD);
 												}}
 											>
 												Create dashboard
@@ -662,11 +661,11 @@ export default function Home(): JSX.Element {
 												type="default"
 												className="periscope-btn secondary"
 												icon={<Plus size={14} />}
-												onClick={(e: React.MouseEvent): void => {
+												onClick={(): void => {
 													logEvent('Homepage: Explore clicked', {
 														source: 'Alerts',
 													});
-													navigateToPage(ROUTES.ALERTS_NEW, history.push, e);
+													history.push(ROUTES.ALERTS_NEW);
 												}}
 											>
 												Create an alert

frontend/src/container/Home/Services/ServiceMetrics.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { QueryKey } from 'react-query';
 import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
@@ -116,7 +116,7 @@ const ServicesListTable = memo(
 		onRowClick,
 	}: {
 		services: ServicesList[];
-		onRowClick: (record: ServicesList, event: React.MouseEvent) => void;
+		onRowClick: (record: ServicesList) => void;
 	}): JSX.Element => (
 		<div className="services-list-container home-data-item-container metrics-services-list">
 			<div className="services-list">
@@ -125,8 +125,8 @@ const ServicesListTable = memo(
 					dataSource={services}
 					pagination={false}
 					className="services-table"
-					onRow={(record: ServicesList): Record<string, unknown> => ({
-						onClick: (event: React.MouseEvent): void => onRowClick(record, event),
+					onRow={(record): { onClick: () => void } => ({
+						onClick: (): void => onRowClick(record),
 					})}
 				/>
 			</div>
@@ -284,11 +284,11 @@ function ServiceMetrics({
 	}, [onUpdateChecklistDoneItem, loadingUserPreferences, servicesExist]);
 
 	const handleRowClick = useCallback(
-		(record: ServicesList, event: React.MouseEvent) => {
+		(record: ServicesList) => {
 			logEvent('Homepage: Service clicked', {
 				serviceName: record.serviceName,
 			});
-			safeNavigate(`${ROUTES.APPLICATION}/${record.serviceName}`, { event });
+			safeNavigate(`${ROUTES.APPLICATION}/${record.serviceName}`);
 		},
 		[safeNavigate],
 	);

frontend/src/container/Home/Services/ServiceTraces.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { Button, Select, Skeleton, Table } from 'antd';
@@ -172,13 +172,13 @@ export default function ServiceTraces({
 						dataSource={top5Services}
 						pagination={false}
 						className="services-table"
-						onRow={(record: ServicesList): Record<string, unknown> => ({
-							onClick: (event: React.MouseEvent): void => {
+						onRow={(record): { onClick: () => void } => ({
+							onClick: (): void => {
 								logEvent('Homepage: Service clicked', {
 									serviceName: record.serviceName,
 								});
 
-								safeNavigate(`${ROUTES.APPLICATION}/${record.serviceName}`, { event });
+								safeNavigate(`${ROUTES.APPLICATION}/${record.serviceName}`);
 							},
 						})}
 					/>

frontend/src/container/InfraMonitoringHosts/HostsListTable.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { LoadingOutlined } from '@ant-design/icons';
 import {
 	Skeleton,
@@ -11,7 +11,6 @@ import {
 import { SorterResult } from 'antd/es/table/interface';
 import logEvent from 'api/common/logEvent';
 import { InfraMonitoringEvents } from 'constants/events';
-import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import HostsEmptyOrIncorrectMetrics from './HostsEmptyOrIncorrectMetrics';
 import {
@@ -77,16 +76,7 @@ export default function HostsListTable({
 		[],
 	);
 
-	const handleRowClick = (
-		record: HostRowData,
-		event: React.MouseEvent,
-	): void => {
-		if (isModifierKeyPressed(event)) {
-			const params = new URLSearchParams(window.location.search);
-			params.set('hostName', record.hostName);
-			openInNewTab(`${window.location.pathname}?${params.toString()}`);
-			return;
-		}
+	const handleRowClick = (record: HostRowData): void => {
 		onHostClick(record.hostName);
 		logEvent(InfraMonitoringEvents.ItemClicked, {
 			entity: InfraMonitoringEvents.HostEntity,
@@ -192,8 +182,8 @@ export default function HostsListTable({
 				(record as HostRowData & { key: string }).key ?? record.hostName
 			}
 			onChange={handleTableChange}
-			onRow={(record: HostRowData): Record<string, unknown> => ({
-				onClick: (event: React.MouseEvent): void => handleRowClick(record, event),
+			onRow={(record): { onClick: () => void; className: string } => ({
+				onClick: (): void => handleRowClick(record),
 				className: 'clickable-row',
 			})}
 		/>

frontend/src/container/InfraMonitoringK8s/Clusters/K8sClustersList.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { LoadingOutlined } from '@ant-design/icons';
@@ -24,7 +24,6 @@ import { ChevronDown, ChevronRight } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
@@ -452,19 +451,7 @@ function K8sClustersList({
 		);
 	}, [selectedClusterName, groupBy.length, clustersData, nestedClustersData]);
 
-	const handleRowClick = (
-		record: K8sClustersRowData,
-		event: React.MouseEvent,
-	): void => {
-		if (event && isModifierKeyPressed(event)) {
-			const newParams = new URLSearchParams(searchParams);
-			newParams.set(
-				INFRA_MONITORING_K8S_PARAMS_KEYS.CLUSTER_NAME,
-				record.clusterUID,
-			);
-			openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
-			return;
-		}
+	const handleRowClick = (record: K8sClustersRowData): void => {
 		if (groupBy.length === 0) {
 			setSelectedRowData(null);
 			setselectedClusterName(record.clusterUID);
@@ -528,19 +515,8 @@ function K8sClustersList({
 							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 						}}
 						showHeader={false}
-						onRow={(
-							record,
-						): { onClick: (event: React.MouseEvent) => void; className: string } => ({
-							onClick: (event: React.MouseEvent): void => {
-								if (event && isModifierKeyPressed(event)) {
-									const newParams = new URLSearchParams(searchParams);
-									newParams.set(
-										INFRA_MONITORING_K8S_PARAMS_KEYS.CLUSTER_NAME,
-										record.clusterUID,
-									);
-									openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
-									return;
-								}
+						onRow={(record): { onClick: () => void; className: string } => ({
+							onClick: (): void => {
 								setselectedClusterName(record.clusterUID);
 							},
 							className: 'expanded-clickable-row',
@@ -731,10 +707,8 @@ function K8sClustersList({
 				}}
 				tableLayout="fixed"
 				onChange={handleTableChange}
-				onRow={(
-					record,
-				): { onClick: (event: React.MouseEvent) => void; className: string } => ({
-					onClick: (event: React.MouseEvent): void => handleRowClick(record, event),
+				onRow={(record): { onClick: () => void; className: string } => ({
+					onClick: (): void => handleRowClick(record),
 					className: 'clickable-row',
 				})}
 				expandable={{

frontend/src/container/InfraMonitoringK8s/DaemonSets/K8sDaemonSetsList.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { LoadingOutlined } from '@ant-design/icons';
@@ -25,7 +25,6 @@ import { ChevronDown, ChevronRight } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
@@ -458,19 +457,7 @@ function K8sDaemonSetsList({
 		nestedDaemonSetsData,
 	]);
 
-	const handleRowClick = (
-		record: K8sDaemonSetsRowData,
-		event?: React.MouseEvent,
-	): void => {
-		if (event && isModifierKeyPressed(event)) {
-			const newParams = new URLSearchParams(searchParams);
-			newParams.set(
-				INFRA_MONITORING_K8S_PARAMS_KEYS.DAEMONSET_UID,
-				record.daemonsetUID,
-			);
-			openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
-			return;
-		}
+	const handleRowClick = (record: K8sDaemonSetsRowData): void => {
 		if (groupBy.length === 0) {
 			setSelectedRowData(null);
 			setSelectedDaemonSetUID(record.daemonsetUID);
@@ -534,19 +521,8 @@ function K8sDaemonSetsList({
 							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 						}}
 						showHeader={false}
-						onRow={(
-							record,
-						): { onClick: (event: React.MouseEvent) => void; className: string } => ({
-							onClick: (event: React.MouseEvent): void => {
-								if (event && isModifierKeyPressed(event)) {
-									const newParams = new URLSearchParams(searchParams);
-									newParams.set(
-										INFRA_MONITORING_K8S_PARAMS_KEYS.DAEMONSET_UID,
-										record.daemonsetUID,
-									);
-									openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
-									return;
-								}
+						onRow={(record): { onClick: () => void; className: string } => ({
+							onClick: (): void => {
 								setSelectedDaemonSetUID(record.daemonsetUID);
 							},
 							className: 'expanded-clickable-row',
@@ -739,10 +715,8 @@ function K8sDaemonSetsList({
 				}}
 				tableLayout="fixed"
 				onChange={handleTableChange}
-				onRow={(
-					record,
-				): { onClick: (event: React.MouseEvent) => void; className: string } => ({
-					onClick: (event: React.MouseEvent): void => handleRowClick(record, event),
+				onRow={(record): { onClick: () => void; className: string } => ({
+					onClick: (): void => handleRowClick(record),
 					className: 'clickable-row',
 				})}
 				expandable={{

frontend/src/container/InfraMonitoringK8s/Deployments/K8sDeploymentsList.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { LoadingOutlined } from '@ant-design/icons';
@@ -25,7 +25,6 @@ import { ChevronDown, ChevronRight } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
@@ -464,19 +463,7 @@ function K8sDeploymentsList({
 		nestedDeploymentsData,
 	]);
 
-	const handleRowClick = (
-		record: K8sDeploymentsRowData,
-		event?: React.MouseEvent,
-	): void => {
-		if (event && isModifierKeyPressed(event)) {
-			const newParams = new URLSearchParams(searchParams);
-			newParams.set(
-				INFRA_MONITORING_K8S_PARAMS_KEYS.DEPLOYMENT_UID,
-				record.deploymentUID,
-			);
-			openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
-			return;
-		}
+	const handleRowClick = (record: K8sDeploymentsRowData): void => {
 		if (groupBy.length === 0) {
 			setSelectedRowData(null);
 			setselectedDeploymentUID(record.deploymentUID);
@@ -540,19 +527,8 @@ function K8sDeploymentsList({
 							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 						}}
 						showHeader={false}
-						onRow={(
-							record,
-						): { onClick: (event: React.MouseEvent) => void; className: string } => ({
-							onClick: (event: React.MouseEvent): void => {
-								if (event && isModifierKeyPressed(event)) {
-									const newParams = new URLSearchParams(searchParams);
-									newParams.set(
-										INFRA_MONITORING_K8S_PARAMS_KEYS.DEPLOYMENT_UID,
-										record.deploymentUID,
-									);
-									openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
-									return;
-								}
+						onRow={(record): { onClick: () => void; className: string } => ({
+							onClick: (): void => {
 								setselectedDeploymentUID(record.deploymentUID);
 							},
 							className: 'expanded-clickable-row',
@@ -746,10 +722,8 @@ function K8sDeploymentsList({
 				}}
 				tableLayout="fixed"
 				onChange={handleTableChange}
-				onRow={(
-					record,
-				): { onClick: (event: React.MouseEvent) => void; className: string } => ({
-					onClick: (event: React.MouseEvent): void => handleRowClick(record, event),
+				onRow={(record): { onClick: () => void; className: string } => ({
+					onClick: (): void => handleRowClick(record),
 					className: 'clickable-row',
 				})}
 				expandable={{

frontend/src/container/InfraMonitoringK8s/Jobs/K8sJobsList.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { LoadingOutlined } from '@ant-design/icons';
@@ -25,7 +25,6 @@ import { ChevronDown, ChevronRight } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
@@ -429,16 +428,7 @@ function K8sJobsList({
 		return jobsData.find((job) => job.jobName === selectedJobUID) || null;
 	}, [selectedJobUID, groupBy.length, jobsData, nestedJobsData]);
 
-	const handleRowClick = (
-		record: K8sJobsRowData,
-		event: React.MouseEvent,
-	): void => {
-		if (event && isModifierKeyPressed(event)) {
-			const newParams = new URLSearchParams(searchParams);
-			newParams.set(INFRA_MONITORING_K8S_PARAMS_KEYS.JOB_UID, record.jobUID);
-			openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
-			return;
-		}
+	const handleRowClick = (record: K8sJobsRowData): void => {
 		if (groupBy.length === 0) {
 			setSelectedRowData(null);
 			setselectedJobUID(record.jobUID);
@@ -502,16 +492,8 @@ function K8sJobsList({
 							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 						}}
 						showHeader={false}
-						onRow={(
-							record,
-						): { onClick: (event: React.MouseEvent) => void; className: string } => ({
-							onClick: (event: React.MouseEvent): void => {
-								if (event && isModifierKeyPressed(event)) {
-									const newParams = new URLSearchParams(searchParams);
-									newParams.set(INFRA_MONITORING_K8S_PARAMS_KEYS.JOB_UID, record.jobUID);
-									openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
-									return;
-								}
+						onRow={(record): { onClick: () => void; className: string } => ({
+							onClick: (): void => {
 								setselectedJobUID(record.jobUID);
 							},
 							className: 'expanded-clickable-row',
@@ -702,10 +684,8 @@ function K8sJobsList({
 				}}
 				tableLayout="fixed"
 				onChange={handleTableChange}
-				onRow={(
-					record,
-				): { onClick: (event: React.MouseEvent) => void; className: string } => ({
-					onClick: (event: React.MouseEvent): void => handleRowClick(record, event),
+				onRow={(record): { onClick: () => void; className: string } => ({
+					onClick: (): void => handleRowClick(record),
 					className: 'clickable-row',
 				})}
 				expandable={{

frontend/src/container/InfraMonitoringK8s/Namespaces/K8sNamespacesList.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { LoadingOutlined } from '@ant-design/icons';
@@ -24,7 +24,6 @@ import { ChevronDown, ChevronRight } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
@@ -460,19 +459,7 @@ function K8sNamespacesList({
 		nestedNamespacesData,
 	]);
 
-	const handleRowClick = (
-		record: K8sNamespacesRowData,
-		event: React.MouseEvent,
-	): void => {
-		if (event && isModifierKeyPressed(event)) {
-			const newParams = new URLSearchParams(searchParams);
-			newParams.set(
-				INFRA_MONITORING_K8S_PARAMS_KEYS.NAMESPACE_UID,
-				record.namespaceUID,
-			);
-			openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
-			return;
-		}
+	const handleRowClick = (record: K8sNamespacesRowData): void => {
 		if (groupBy.length === 0) {
 			setSelectedRowData(null);
 			setselectedNamespaceUID(record.namespaceUID);
@@ -536,19 +523,8 @@ function K8sNamespacesList({
 							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 						}}
 						showHeader={false}
-						onRow={(
-							record,
-						): { onClick: (event: React.MouseEvent) => void; className: string } => ({
-							onClick: (event: React.MouseEvent): void => {
-								if (isModifierKeyPressed(event)) {
-									const newParams = new URLSearchParams(searchParams);
-									newParams.set(
-										INFRA_MONITORING_K8S_PARAMS_KEYS.NAMESPACE_UID,
-										record.namespaceUID,
-									);
-									openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
-									return;
-								}
+						onRow={(record): { onClick: () => void; className: string } => ({
+							onClick: (): void => {
 								setselectedNamespaceUID(record.namespaceUID);
 							},
 							className: 'expanded-clickable-row',
@@ -740,10 +716,8 @@ function K8sNamespacesList({
 				}}
 				tableLayout="fixed"
 				onChange={handleTableChange}
-				onRow={(
-					record,
-				): { onClick: (event: React.MouseEvent) => void; className: string } => ({
-					onClick: (event: React.MouseEvent): void => handleRowClick(record, event),
+				onRow={(record): { onClick: () => void; className: string } => ({
+					onClick: (): void => handleRowClick(record),
 					className: 'clickable-row',
 				})}
 				expandable={{

frontend/src/container/InfraMonitoringK8s/Nodes/K8sNodesList.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { LoadingOutlined } from '@ant-design/icons';
@@ -24,7 +24,6 @@ import { ChevronDown, ChevronRight } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
@@ -439,16 +438,7 @@ function K8sNodesList({
 		return nodesData.find((node) => node.nodeUID === selectedNodeUID) || null;
 	}, [selectedNodeUID, groupBy.length, nodesData, nestedNodesData]);
 
-	const handleRowClick = (
-		record: K8sNodesRowData,
-		event: React.MouseEvent,
-	): void => {
-		if (event && isModifierKeyPressed(event)) {
-			const newParams = new URLSearchParams(searchParams);
-			newParams.set(INFRA_MONITORING_K8S_PARAMS_KEYS.NODE_UID, record.nodeUID);
-			openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
-			return;
-		}
+	const handleRowClick = (record: K8sNodesRowData): void => {
 		if (groupBy.length === 0) {
 			setSelectedRowData(null);
 			setSelectedNodeUID(record.nodeUID);
@@ -513,19 +503,8 @@ function K8sNodesList({
 							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 						}}
 						showHeader={false}
-						onRow={(
-							record,
-						): { onClick: (event: React.MouseEvent) => void; className: string } => ({
-							onClick: (event: React.MouseEvent): void => {
-								if (isModifierKeyPressed(event)) {
-									const newParams = new URLSearchParams(searchParams);
-									newParams.set(
-										INFRA_MONITORING_K8S_PARAMS_KEYS.NODE_UID,
-										record.nodeUID,
-									);
-									openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
-									return;
-								}
+						onRow={(record): { onClick: () => void; className: string } => ({
+							onClick: (): void => {
 								setSelectedNodeUID(record.nodeUID);
 							},
 							className: 'expanded-clickable-row',
@@ -716,10 +695,8 @@ function K8sNodesList({
 				}}
 				tableLayout="fixed"
 				onChange={handleTableChange}
-				onRow={(
-					record,
-				): { onClick: (event: React.MouseEvent) => void; className: string } => ({
-					onClick: (event: React.MouseEvent): void => handleRowClick(record, event),
+				onRow={(record): { onClick: () => void; className: string } => ({
+					onClick: (): void => handleRowClick(record),
 					className: 'clickable-row',
 				})}
 				expandable={{

frontend/src/container/InfraMonitoringK8s/Pods/K8sPodLists.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-restricted-syntax */
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { LoadingOutlined } from '@ant-design/icons';
@@ -26,7 +26,6 @@ import { ChevronDown, ChevronRight, CornerDownRight } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
@@ -496,16 +495,7 @@ function K8sPodsList({
 		}
 	}, [selectedRowData, fetchGroupedByRowData]);
 
-	const handleRowClick = (
-		record: K8sPodsRowData,
-		event: React.MouseEvent,
-	): void => {
-		if (event && isModifierKeyPressed(event)) {
-			const newParams = new URLSearchParams(searchParams);
-			newParams.set(INFRA_MONITORING_K8S_PARAMS_KEYS.POD_UID, record.podUID);
-			openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
-			return;
-		}
+	const handleRowClick = (record: K8sPodsRowData): void => {
 		if (groupBy.length === 0) {
 			setSelectedPodUID(record.podUID);
 			setSearchParams({
@@ -625,14 +615,8 @@ function K8sPodsList({
 							spinning: isFetchingGroupedByRowData || isLoadingGroupedByRowData,
 							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 						}}
-						onRow={(record: K8sPodsRowData): Record<string, unknown> => ({
-							onClick: (event: React.MouseEvent): void => {
-								if (isModifierKeyPressed(event)) {
-									const newParams = new URLSearchParams(searchParams);
-									newParams.set(INFRA_MONITORING_K8S_PARAMS_KEYS.POD_UID, record.podUID);
-									openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
-									return;
-								}
+						onRow={(record): { onClick: () => void; className: string } => ({
+							onClick: (): void => {
 								setSelectedPodUID(record.podUID);
 							},
 							className: 'expanded-clickable-row',
@@ -768,8 +752,8 @@ function K8sPodsList({
 				scroll={{ x: true }}
 				tableLayout="fixed"
 				onChange={handleTableChange}
-				onRow={(record: K8sPodsRowData): Record<string, unknown> => ({
-					onClick: (event: React.MouseEvent): void => handleRowClick(record, event),
+				onRow={(record): { onClick: () => void; className: string } => ({
+					onClick: (): void => handleRowClick(record),
 					className: 'clickable-row',
 				})}
 				expandable={{

frontend/src/container/InfraMonitoringK8s/StatefulSets/K8sStatefulSetsList.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { LoadingOutlined } from '@ant-design/icons';
@@ -25,7 +25,6 @@ import { ChevronDown, ChevronRight } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
@@ -461,19 +460,7 @@ function K8sStatefulSetsList({
 		nestedStatefulSetsData,
 	]);
 
-	const handleRowClick = (
-		record: K8sStatefulSetsRowData,
-		event: React.MouseEvent,
-	): void => {
-		if (event && isModifierKeyPressed(event)) {
-			const newParams = new URLSearchParams(searchParams);
-			newParams.set(
-				INFRA_MONITORING_K8S_PARAMS_KEYS.STATEFULSET_UID,
-				record.statefulsetUID,
-			);
-			openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
-			return;
-		}
+	const handleRowClick = (record: K8sStatefulSetsRowData): void => {
 		if (groupBy.length === 0) {
 			setSelectedRowData(null);
 			setselectedStatefulSetUID(record.statefulsetUID);
@@ -537,19 +524,8 @@ function K8sStatefulSetsList({
 							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 						}}
 						showHeader={false}
-						onRow={(
-							record,
-						): { onClick: (event: React.MouseEvent) => void; className: string } => ({
-							onClick: (event: React.MouseEvent): void => {
-								if (event && isModifierKeyPressed(event)) {
-									const newParams = new URLSearchParams(searchParams);
-									newParams.set(
-										INFRA_MONITORING_K8S_PARAMS_KEYS.STATEFULSET_UID,
-										record.statefulsetUID,
-									);
-									openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
-									return;
-								}
+						onRow={(record): { onClick: () => void; className: string } => ({
+							onClick: (): void => {
 								setselectedStatefulSetUID(record.statefulsetUID);
 							},
 							className: 'expanded-clickable-row',
@@ -742,8 +718,8 @@ function K8sStatefulSetsList({
 				}}
 				tableLayout="fixed"
 				onChange={handleTableChange}
-				onRow={(record) => ({
-					onClick: (event: React.MouseEvent): void => handleRowClick(record, event),
+				onRow={(record): { onClick: () => void; className: string } => ({
+					onClick: (): void => handleRowClick(record),
 					className: 'clickable-row',
 				})}
 				expandable={{

frontend/src/container/InfraMonitoringK8s/Volumes/K8sVolumesList.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { LoadingOutlined } from '@ant-design/icons';
@@ -25,7 +25,6 @@ import { ChevronDown, ChevronRight } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
@@ -391,16 +390,7 @@ function K8sVolumesList({
 		);
 	}, [selectedVolumeUID, volumesData, groupBy.length, nestedVolumesData]);
 
-	const handleRowClick = (
-		record: K8sVolumesRowData,
-		event: React.MouseEvent,
-	): void => {
-		if (event && isModifierKeyPressed(event)) {
-			const newParams = new URLSearchParams(searchParams);
-			newParams.set(INFRA_MONITORING_K8S_PARAMS_KEYS.VOLUME_UID, record.volumeUID);
-			openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
-			return;
-		}
+	const handleRowClick = (record: K8sVolumesRowData): void => {
 		if (groupBy.length === 0) {
 			setSelectedRowData(null);
 			setselectedVolumeUID(record.volumeUID);
@@ -464,19 +454,8 @@ function K8sVolumesList({
 							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 						}}
 						showHeader={false}
-						onRow={(
-							record,
-						): { onClick: (event: React.MouseEvent) => void; className: string } => ({
-							onClick: (event: React.MouseEvent): void => {
-								if (event && isModifierKeyPressed(event)) {
-									const newParams = new URLSearchParams(searchParams);
-									newParams.set(
-										INFRA_MONITORING_K8S_PARAMS_KEYS.VOLUME_UID,
-										record.volumeUID,
-									);
-									openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
-									return;
-								}
+						onRow={(record): { onClick: () => void; className: string } => ({
+							onClick: (): void => {
 								setselectedVolumeUID(record.volumeUID);
 							},
 							className: 'expanded-clickable-row',
@@ -662,10 +641,8 @@ function K8sVolumesList({
 				}}
 				tableLayout="fixed"
 				onChange={handleTableChange}
-				onRow={(
-					record,
-				): { onClick: (event: React.MouseEvent) => void; className: string } => ({
-					onClick: (event: React.MouseEvent): void => handleRowClick(record, event),
+				onRow={(record): { onClick: () => void; className: string } => ({
+					onClick: (): void => handleRowClick(record),
 					className: 'clickable-row',
 				})}
 				expandable={{

frontend/src/container/ListAlertRules/AlertsEmptyState/AlertsEmptyState.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { PlusOutlined } from '@ant-design/icons';
 import { Button, Divider, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
@@ -7,7 +7,6 @@ import useComponentPermission from 'hooks/useComponentPermission';
 import history from 'lib/history';
 import { useAppContext } from 'providers/App/App';
 import { DataSource } from 'types/common/queryBuilder';
-import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import AlertInfoCard from './AlertInfoCard';
 import { ALERT_CARDS, ALERT_INFO_LINKS } from './alertLinks';
@@ -37,13 +36,9 @@ export function AlertsEmptyState(): JSX.Element {
 
 	const [loading, setLoading] = useState(false);
 
-	const onClickNewAlertHandler = useCallback((e: React.MouseEvent) => {
+	const onClickNewAlertHandler = useCallback(() => {
 		setLoading(false);
-		if (isModifierKeyPressed(e)) {
-			openInNewTab(ROUTES.ALERTS_NEW);
-		} else {
-			history.push(ROUTES.ALERTS_NEW);
-		}
+		history.push(ROUTES.ALERTS_NEW);
 	}, []);
 
 	return (

frontend/src/container/ListAlertRules/ListAlert.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/display-name */
-import React, { useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { UseQueryResult } from 'react-query';
 import { PlusOutlined } from '@ant-design/icons';
@@ -100,22 +100,16 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 		});
 	}, [notificationsApi, t]);
 
-	const onClickNewAlertHandler = useCallback(
-		(e: React.MouseEvent): void => {
-			logEvent('Alert: New alert button clicked', {
-				number: allAlertRules?.length,
-				layout: 'new',
-			});
-			safeNavigate(ROUTES.ALERT_TYPE_SELECTION, { event: e });
-		},
+	const onClickNewAlertHandler = useCallback(() => {
+		logEvent('Alert: New alert button clicked', {
+			number: allAlertRules?.length,
+			layout: 'new',
+		});
+		safeNavigate(ROUTES.ALERT_TYPE_SELECTION);
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[],
-	);
+	}, []);
 
-	const onEditHandler = (
-		record: GettableAlert,
-		options?: { event?: React.MouseEvent; newTab?: boolean },
-	): void => {
+	const onEditHandler = (record: GettableAlert, openInNewTab: boolean): void => {
 		const compositeQuery = sanitizeDefaultAlertQuery(
 			mapQueryDataFromApi(record.condition.compositeQuery),
 			record.alertType as AlertTypes,
@@ -131,10 +125,11 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 
 		setEditLoader(false);
 
-		safeNavigate(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`, {
-			event: options?.event,
-			newTab: options?.newTab,
-		});
+		if (openInNewTab) {
+			window.open(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`, '_blank');
+		} else {
+			safeNavigate(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`);
+		}
 	};
 
 	const onCloneHandler = (
@@ -271,7 +266,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 				const onClickHandler = (e: React.MouseEvent<HTMLElement>): void => {
 					e.stopPropagation();
 					e.preventDefault();
-					onEditHandler(record, { event: e });
+					onEditHandler(record, e.metaKey || e.ctrlKey);
 				};
 
 				return <Typography.Link onClick={onClickHandler}>{value}</Typography.Link>;
@@ -336,9 +331,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 							/>,
 							<ColumnButton
 								key="2"
-								onClick={(e: React.MouseEvent): void =>
-									onEditHandler(record, { event: e })
-								}
+								onClick={(): void => onEditHandler(record, false)}
 								type="link"
 								loading={editLoader}
 							>
@@ -346,7 +339,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 							</ColumnButton>,
 							<ColumnButton
 								key="3"
-								onClick={(): void => onEditHandler(record, { newTab: true })}
+								onClick={(): void => onEditHandler(record, true)}
 								type="link"
 								loading={editLoader}
 							>

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -416,7 +416,11 @@ function DashboardsList(): JSX.Element {
 
 				const onClickHandler = (event: React.MouseEvent<HTMLElement>): void => {
 					event.stopPropagation();
-					safeNavigate(getLink(), { event });
+					if (event.metaKey || event.ctrlKey) {
+						window.open(getLink(), '_blank');
+					} else {
+						safeNavigate(getLink());
+					}
 					logEvent('Dashboard List: Clicked on dashboard', {
 						dashboardId: dashboard.id,
 						dashboardName: dashboard.name,

frontend/src/container/LogDetailedView/Overview.tsx

@@ -1,7 +1,6 @@
-import { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
+import { ReactNode, useState } from 'react';
 import MEditor, { EditorProps, Monaco } from '@monaco-editor/react';
 import { Color } from '@signozhq/design-tokens';
-import type { InputRef } from 'antd';
 import {
 	Button,
 	Collapse,
@@ -47,23 +46,12 @@ function Overview({
 	handleChangeSelectedView,
 }: Props): JSX.Element {
 	const [isWrapWord, setIsWrapWord] = useState<boolean>(true);
-	const [isSearchVisible, setIsSearchVisible] = useState<boolean>(true);
+	const [isSearchVisible, setIsSearchVisible] = useState<boolean>(false);
 	const [isAttributesExpanded, setIsAttributesExpanded] = useState<boolean>(
 		true,
 	);
 	const [fieldSearchInput, setFieldSearchInput] = useState<string>('');
 
-	const focusTimerRef = useRef<ReturnType<typeof setTimeout>>();
-
-	const searchInputRef = useCallback((node: InputRef | null) => {
-		clearTimeout(focusTimerRef.current);
-		if (node) {
-			focusTimerRef.current = setTimeout(() => node.focus(), 100);
-		}
-	}, []);
-
-	useEffect(() => (): void => clearTimeout(focusTimerRef.current), []);
-
 	const isDarkMode = useIsDarkMode();
 
 	const options: EditorProps['options'] = {
@@ -208,7 +196,7 @@ function Overview({
 							<>
 								{isSearchVisible && (
 									<Input
-										ref={searchInputRef}
+										autoFocus
 										placeholder="Search for a field..."
 										className="search-input"
 										value={fieldSearchInput}

frontend/src/container/LogsExplorerChart/__tests__/frequencyGraphColor.test.ts

@@ -1,34 +0,0 @@
-import { Color } from '@signozhq/design-tokens';
-
-import { getColorsForSeverityLabels, isRedLike } from '../utils';
-
-describe('getColorsForSeverityLabels', () => {
-	it('should return slate for blank labels', () => {
-		expect(getColorsForSeverityLabels('', 0)).toBe(Color.BG_SLATE_300);
-		expect(getColorsForSeverityLabels('   ', 0)).toBe(Color.BG_SLATE_300);
-	});
-
-	it('should return correct colors for known severity variants', () => {
-		expect(getColorsForSeverityLabels('INFO', 0)).toBe(Color.BG_ROBIN_600);
-		expect(getColorsForSeverityLabels('ERROR', 0)).toBe(Color.BG_CHERRY_600);
-		expect(getColorsForSeverityLabels('WARN', 0)).toBe(Color.BG_AMBER_600);
-		expect(getColorsForSeverityLabels('DEBUG', 0)).toBe(Color.BG_AQUA_600);
-		expect(getColorsForSeverityLabels('TRACE', 0)).toBe(Color.BG_FOREST_600);
-		expect(getColorsForSeverityLabels('FATAL', 0)).toBe(Color.BG_SAKURA_600);
-	});
-
-	it('should return non-red colors for unrecognized labels at any index', () => {
-		for (let i = 0; i < 30; i++) {
-			const color = getColorsForSeverityLabels('4', i);
-			expect(isRedLike(color)).toBe(false);
-		}
-	});
-
-	it('should return non-red colors for numeric severity text', () => {
-		const numericLabels = ['1', '2', '4', '9', '13', '17', '21'];
-		numericLabels.forEach((label) => {
-			const color = getColorsForSeverityLabels(label, 0);
-			expect(isRedLike(color)).toBe(false);
-		});
-	});
-});

frontend/src/container/LogsExplorerChart/utils.ts

@@ -1,16 +1,7 @@
 import { Color } from '@signozhq/design-tokens';
+import { themeColors } from 'constants/theme';
 import { colors } from 'lib/getRandomColor';
 
-// Function to determine if a color is "red-like" based on its RGB values
-export function isRedLike(hex: string): boolean {
-	const r = parseInt(hex.slice(1, 3), 16);
-	const g = parseInt(hex.slice(3, 5), 16);
-	const b = parseInt(hex.slice(5, 7), 16);
-	return r > 180 && r > g * 1.4 && r > b * 1.4;
-}
-
-const SAFE_FALLBACK_COLORS = colors.filter((c) => !isRedLike(c));
-
 const SEVERITY_VARIANT_COLORS: Record<string, string> = {
 	TRACE: Color.BG_FOREST_600,
 	Trace: Color.BG_FOREST_500,
@@ -76,13 +67,8 @@ export function getColorsForSeverityLabels(
 	label: string,
 	index: number,
 ): string {
-	const trimmed = label.trim();
-
-	if (!trimmed) {
-		return Color.BG_SLATE_300;
-	}
-
-	const variantColor = SEVERITY_VARIANT_COLORS[trimmed];
+	// Check if we have a direct mapping for this severity variant
+	const variantColor = SEVERITY_VARIANT_COLORS[label.trim()];
 	if (variantColor) {
 		return variantColor;
 	}
@@ -117,8 +103,5 @@ export function getColorsForSeverityLabels(
 		return Color.BG_SAKURA_500;
 	}
 
-	return (
-		SAFE_FALLBACK_COLORS[index % SAFE_FALLBACK_COLORS.length] ||
-		Color.BG_SLATE_400
-	);
+	return colors[index % colors.length] || themeColors.red;
 }

frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx

@@ -111,19 +111,23 @@ const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 		);
 
 		const itemContent = useCallback(
-			(index: number, log: Record<string, unknown>): JSX.Element => (
-				<TableRow
-					tableColumns={tableColumns}
-					index={index}
-					log={log}
-					logs={tableViewProps.logs}
-					hasActions
-					fontSize={tableViewProps.fontSize}
-					onShowLogDetails={onSetActiveLog}
-					isActiveLog={activeLog?.id === log.id}
-					onClearActiveLog={onCloseActiveLog}
-				/>
-			),
+			(index: number, log: Record<string, unknown>): JSX.Element => {
+				return (
+					<div key={log.id as string}>
+						<TableRow
+							tableColumns={tableColumns}
+							index={index}
+							log={log}
+							logs={tableViewProps.logs}
+							hasActions
+							fontSize={tableViewProps.fontSize}
+							onShowLogDetails={onSetActiveLog}
+							isActiveLog={activeLog?.id === log.id}
+							onClearActiveLog={onCloseActiveLog}
+						/>
+					</div>
+				);
+			},
 			[
 				tableColumns,
 				onSetActiveLog,
@@ -139,8 +143,7 @@ const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 					{tableColumns
 						.filter((column) => column.key)
 						.map((column) => {
-							const isDragColumn =
-								column.key !== 'expand' && column.key !== 'state-indicator';
+							const isDragColumn = column.key !== 'expand';
 
 							return (
 								<TableHeaderCellStyled

frontend/src/container/MetricsApplication/Tabs/Overview.tsx

@@ -31,7 +31,6 @@ import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 import { secondsToMilliseconds } from 'utils/timeUtils';
 import { v4 as uuid } from 'uuid';
 
@@ -236,7 +235,7 @@ function Application(): JSX.Element {
 			timestamp: number,
 			apmToTraceQuery: Query,
 			isViewLogsClicked?: boolean,
-		): ((e: React.MouseEvent) => void) => (e: React.MouseEvent): void => {
+		): (() => void) => (): void => {
 			const endTime = secondsToMilliseconds(timestamp);
 			const startTime = secondsToMilliseconds(timestamp - stepInterval);
 
@@ -260,11 +259,7 @@ function Application(): JSX.Element {
 				queryString,
 			);
 
-			if (isModifierKeyPressed(e)) {
-				openInNewTab(newPath);
-			} else {
-				history.push(newPath);
-			}
+			history.push(newPath);
 		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[stepInterval],

frontend/src/container/MetricsApplication/Tabs/Overview/GraphControlsPanel/GraphControlsPanel.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Color } from '@signozhq/design-tokens';
 import { Button } from 'antd';
 import { Binoculars, DraftingCompass, ScrollText } from 'lucide-react';
@@ -7,9 +6,9 @@ import './GraphControlsPanel.styles.scss';
 
 interface GraphControlsPanelProps {
 	id: string;
-	onViewLogsClick?: (e: React.MouseEvent) => void;
-	onViewTracesClick: (e: React.MouseEvent) => void;
-	onViewAPIMonitoringClick?: (e: React.MouseEvent) => void;
+	onViewLogsClick?: () => void;
+	onViewTracesClick: () => void;
+	onViewAPIMonitoringClick?: () => void;
 }
 
 function GraphControlsPanel({

frontend/src/container/MetricsApplication/Tabs/util.ts

@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction, useMemo, useRef } from 'react';
+import { Dispatch, SetStateAction, useMemo, useRef } from 'react';
 import { QueryParams } from 'constants/query';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
@@ -42,10 +42,7 @@ interface OnViewTracePopupClickProps {
 	apmToTraceQuery: Query;
 	isViewLogsClicked?: boolean;
 	stepInterval?: number;
-	safeNavigate: (
-		url: string,
-		options?: { event?: React.MouseEvent | MouseEvent },
-	) => void;
+	safeNavigate: (url: string) => void;
 }
 
 interface OnViewAPIMonitoringPopupClickProps {
@@ -54,10 +51,8 @@ interface OnViewAPIMonitoringPopupClickProps {
 	stepInterval?: number;
 	domainName: string;
 	isError: boolean;
-	safeNavigate: (
-		url: string,
-		options?: { event?: React.MouseEvent | MouseEvent },
-	) => void;
+
+	safeNavigate: (url: string) => void;
 }
 
 export function generateExplorerPath(
@@ -98,8 +93,8 @@ export function onViewTracePopupClick({
 	isViewLogsClicked,
 	stepInterval,
 	safeNavigate,
-}: OnViewTracePopupClickProps): (e?: React.MouseEvent) => void {
-	return (e?: React.MouseEvent): void => {
+}: OnViewTracePopupClickProps): VoidFunction {
+	return (): void => {
 		const endTime = secondsToMilliseconds(timestamp);
 		const startTime = secondsToMilliseconds(timestamp - (stepInterval || 60));
 
@@ -123,7 +118,7 @@ export function onViewTracePopupClick({
 			queryString,
 		);
 
-		safeNavigate(newPath, { event: e });
+		safeNavigate(newPath);
 	};
 }
 
@@ -154,8 +149,8 @@ export function onViewAPIMonitoringPopupClick({
 	isError,
 	stepInterval,
 	safeNavigate,
-}: OnViewAPIMonitoringPopupClickProps): (e?: React.MouseEvent) => void {
-	return (e?: React.MouseEvent): void => {
+}: OnViewAPIMonitoringPopupClickProps): VoidFunction {
+	return (): void => {
 		const endTime = timestamp + (stepInterval || 60);
 		const startTime = timestamp - (stepInterval || 60);
 		const filters = {
@@ -195,7 +190,7 @@ export function onViewAPIMonitoringPopupClick({
 			filters,
 		);
 
-		safeNavigate(newPath, { event: e });
+		safeNavigate(newPath);
 	};
 }
 

frontend/src/container/MetricsExplorer/MetricDetails/DashboardsAndAlertsPopover.tsx

@@ -8,7 +8,6 @@ import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import history from 'lib/history';
 import { Bell, Grid } from 'lucide-react';
-import { navigateToPage } from 'utils/navigation';
 
 import { DashboardsAndAlertsPopoverProps } from './types';
 
@@ -26,10 +25,9 @@ function DashboardsAndAlertsPopover({
 				label: (
 					<Typography.Link
 						key={alert.alert_id}
-						onClick={(e): void => {
+						onClick={(): void => {
 							params.set(QueryParams.ruleId, alert.alert_id);
-							const path = `${ROUTES.ALERT_OVERVIEW}?${params.toString()}`;
-							navigateToPage(path, history.push, e);
+							history.push(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`);
 						}}
 						className="dashboards-popover-content-item"
 					>
@@ -57,12 +55,11 @@ function DashboardsAndAlertsPopover({
 				label: (
 					<Typography.Link
 						key={dashboard.dashboard_id}
-						onClick={(e): void => {
+						onClick={(): void => {
 							safeNavigate(
 								generatePath(ROUTES.DASHBOARD, {
 									dashboardId: dashboard.dashboard_id,
 								}),
-								{ event: e },
 							);
 						}}
 						className="dashboards-popover-content-item"

frontend/src/container/MetricsExplorer/MetricDetails/__tests__/DashboardsAndAlertsPopover.test.tsx

@@ -118,7 +118,6 @@ describe('DashboardsAndAlertsPopover', () => {
 		// Should navigate to the dashboard
 		expect(mockSafeNavigate).toHaveBeenCalledWith(
 			`/dashboard/${mockDashboard1.dashboard_id}`,
-			expect.objectContaining({ event: expect.any(Object) }),
 		);
 	});
 

frontend/src/container/MetricsExplorer/Summary/MetricsTable.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { LoadingOutlined } from '@ant-design/icons';
 import {
 	Spin,
@@ -107,9 +107,8 @@ function MetricsTable({
 					onChange: onPaginationChange,
 					total: totalCount,
 				}}
-				onRow={(record: MetricsListItemRowData): Record<string, unknown> => ({
-					onClick: (event: React.MouseEvent): void =>
-						openMetricDetails(record.key, 'list', event),
+				onRow={(record): { onClick: () => void; className: string } => ({
+					onClick: (): void => openMetricDetails(record.key, 'list'),
 					className: 'clickable-row',
 				})}
 			/>

frontend/src/container/MetricsExplorer/Summary/Summary.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-nested-ternary */
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import * as Sentry from '@sentry/react';
@@ -14,7 +14,6 @@ import { AppState } from 'store/reducers';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { MetricsExplorerEventKeys, MetricsExplorerEvents } from '../events';
 import InspectModal from '../Inspect';
@@ -210,15 +209,7 @@ function Summary(): JSX.Element {
 	const openMetricDetails = (
 		metricName: string,
 		view: 'list' | 'treemap',
-		event?: React.MouseEvent,
 	): void => {
-		if (event && isModifierKeyPressed(event)) {
-			const newParams = new URLSearchParams(searchParams);
-			newParams.set(IS_METRIC_DETAILS_OPEN_KEY, 'true');
-			newParams.set(SELECTED_METRIC_NAME_KEY, metricName);
-			openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
-			return;
-		}
 		setSelectedMetricName(metricName);
 		setIsMetricDetailsOpen(true);
 		setSearchParams({

frontend/src/container/MetricsExplorer/Summary/__tests__/MetricsTable.test.tsx

@@ -194,11 +194,7 @@ describe('MetricsTable', () => {
 		);
 
 		fireEvent.click(screen.getByText('Metric 1'));
-		expect(mockOpenMetricDetails).toHaveBeenCalledWith(
-			'metric1',
-			'list',
-			expect.any(Object),
-		);
+		expect(mockOpenMetricDetails).toHaveBeenCalledWith('metric1', 'list');
 	});
 
 	it('calls setOrderBy when column header is clicked', () => {

frontend/src/container/MetricsExplorer/Summary/types.ts

@@ -14,11 +14,7 @@ export interface MetricsTableProps {
 	onPaginationChange: (page: number, pageSize: number) => void;
 	setOrderBy: (orderBy: OrderByPayload) => void;
 	totalCount: number;
-	openMetricDetails: (
-		metricName: string,
-		view: 'list' | 'treemap',
-		event?: React.MouseEvent,
-	) => void;
+	openMetricDetails: (metricName: string, view: 'list' | 'treemap') => void;
 	queryFilters: TagFilter;
 }
 
@@ -32,11 +28,7 @@ export interface MetricsTreemapProps {
 	isLoading: boolean;
 	isError: boolean;
 	viewType: TreemapViewType;
-	openMetricDetails: (
-		metricName: string,
-		view: 'list' | 'treemap',
-		event?: React.MouseEvent,
-	) => void;
+	openMetricDetails: (metricName: string, view: 'list' | 'treemap') => void;
 	setHeatmapView: (value: TreemapViewType) => void;
 }
 

frontend/src/container/NewExplorerCTA/index.tsx

@@ -1,10 +1,9 @@
-import React, { useCallback, useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
 import { Badge, Button } from 'antd';
 import ROUTES from 'constants/routes';
 import history from 'lib/history';
 import { Undo } from 'lucide-react';
-import { navigateToPage } from 'utils/navigation';
 
 import { buttonText, RIBBON_STYLES } from './config';
 
@@ -22,30 +21,23 @@ function NewExplorerCTA(): JSX.Element | null {
 		[location.pathname],
 	);
 
-	const onClickHandler = useCallback(
-		(e?: React.MouseEvent): void => {
-			let targetPath: string;
-			if (location.pathname === ROUTES.LOGS_EXPLORER) {
-				targetPath = ROUTES.OLD_LOGS_EXPLORER;
-			} else if (location.pathname === ROUTES.TRACE) {
-				targetPath = ROUTES.TRACES_EXPLORER;
-			} else if (location.pathname === ROUTES.OLD_LOGS_EXPLORER) {
-				targetPath = ROUTES.LOGS_EXPLORER;
-			} else if (location.pathname === ROUTES.TRACES_EXPLORER) {
-				targetPath = ROUTES.TRACE;
-			} else {
-				return;
-			}
-			navigateToPage(targetPath, history.push, e);
-		},
-		[location.pathname],
-	);
+	const onClickHandler = useCallback((): void => {
+		if (location.pathname === ROUTES.LOGS_EXPLORER) {
+			history.push(ROUTES.OLD_LOGS_EXPLORER);
+		} else if (location.pathname === ROUTES.TRACE) {
+			history.push(ROUTES.TRACES_EXPLORER);
+		} else if (location.pathname === ROUTES.OLD_LOGS_EXPLORER) {
+			history.push(ROUTES.LOGS_EXPLORER);
+		} else if (location.pathname === ROUTES.TRACES_EXPLORER) {
+			history.push(ROUTES.TRACE);
+		}
+	}, [location.pathname]);
 
 	const button = useMemo(
 		() => (
 			<Button
 				icon={<Undo size={16} />}
-				onClick={(e): void => onClickHandler(e)}
+				onClick={onClickHandler}
 				data-testid="newExplorerCTA"
 				type="text"
 				className="periscope-btn link"

frontend/src/container/OnboardingContainer/OnboardingContainer.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from 'react-query';
 import { useEffectOnce } from 'react-use';
@@ -17,7 +17,6 @@ import { InviteMemberFormValues } from 'container/OrganizationSettings/PendingIn
 import history from 'lib/history';
 import { UserPlus } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
-import { navigateToPage } from 'utils/navigation';
 
 import ModuleStepsContainer from './common/ModuleStepsContainer/ModuleStepsContainer';
 import { stepsMap } from './constants/stepsConfig';
@@ -253,13 +252,9 @@ export default function Onboarding(): JSX.Element {
 		}
 	};
 
-	const handleNext = (e?: React.MouseEvent): void => {
+	const handleNext = (): void => {
 		if (activeStep <= 3) {
-			navigateToPage(
-				moduleRouteMap[selectedModule.id as ModulesMap],
-				history.push,
-				e,
-			);
+			history.push(moduleRouteMap[selectedModule.id as ModulesMap]);
 		}
 	};
 
@@ -322,9 +317,9 @@ export default function Onboarding(): JSX.Element {
 			{activeStep === 1 && (
 				<div className="onboarding-page">
 					<div
-						onClick={(e): void => {
+						onClick={(): void => {
 							logEvent('Onboarding V2: Skip Button Clicked', {});
-							navigateToPage(ROUTES.APPLICATION, history.push, e);
+							history.push(ROUTES.APPLICATION);
 						}}
 						className="skip-to-console"
 					>
@@ -360,11 +355,7 @@ export default function Onboarding(): JSX.Element {
 						</div>
 					</div>
 					<div className="continue-to-next-step">
-						<Button
-							type="primary"
-							icon={<ArrowRightOutlined />}
-							onClick={(e): void => handleNext(e)}
-						>
+						<Button type="primary" icon={<ArrowRightOutlined />} onClick={handleNext}>
 							{t('get_started')}
 						</Button>
 					</div>
@@ -395,16 +386,17 @@ export default function Onboarding(): JSX.Element {
 			{activeStep > 1 && (
 				<div className="stepsContainer">
 					<ModuleStepsContainer
-						onReselectModule={(e?: React.MouseEvent): void => {
+						onReselectModule={(): void => {
 							setCurrent(current - 1);
 							setActiveStep(activeStep - 1);
 							setSelectedModule(useCases.APM);
 							resetProgress();
 
-							const path = isOnboardingV3Enabled
-								? ROUTES.GET_STARTED_WITH_CLOUD
-								: ROUTES.GET_STARTED;
-							navigateToPage(path, history.push, e);
+							if (isOnboardingV3Enabled) {
+								history.push(ROUTES.GET_STARTED_WITH_CLOUD);
+							} else {
+								history.push(ROUTES.GET_STARTED);
+							}
 						}}
 						selectedModule={selectedModule}
 						selectedModuleSteps={selectedModuleSteps}

frontend/src/container/OnboardingContainer/Steps/DataSource/DataSource.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
 import { LoadingOutlined } from '@ant-design/icons';
@@ -23,7 +23,6 @@ import {
 import { useNotifications } from 'hooks/useNotifications';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { Blocks, Check } from 'lucide-react';
-import { navigateToPage } from 'utils/navigation';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import './DataSource.styles.scss';
@@ -142,13 +141,13 @@ export default function DataSource(): JSX.Element {
 		}
 	};
 
-	const goToIntegrationsPage = (e?: React.MouseEvent): void => {
+	const goToIntegrationsPage = (): void => {
 		logEvent('Onboarding V2: Go to integrations', {
 			module: selectedModule?.id,
 			dataSource: selectedDataSource?.name,
 			framework: selectedFramework,
 		});
-		navigateToPage(ROUTES.INTEGRATIONS, history.push, e);
+		history.push(ROUTES.INTEGRATIONS);
 	};
 
 	return (
@@ -250,7 +249,7 @@ export default function DataSource(): JSX.Element {
 								page which allows more sources of sending data
 							</Typography.Text>
 							<Button
-								onClick={(e): void => goToIntegrationsPage(e)}
+								onClick={goToIntegrationsPage}
 								icon={<Blocks size={14} />}
 								className="navigate-integrations-page-btn"
 							>

frontend/src/container/OnboardingContainer/common/ModuleStepsContainer/ModuleStepsContainer.tsx

@@ -2,7 +2,7 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable react/jsx-no-comment-textnodes */
 /* eslint-disable sonarjs/prefer-single-boolean-return */
-import React, { SetStateAction, useState } from 'react';
+import { SetStateAction, useState } from 'react';
 import {
 	ArrowLeftOutlined,
 	ArrowRightOutlined,
@@ -19,7 +19,6 @@ import { hasFrameworks } from 'container/OnboardingContainer/utils/dataSourceUti
 import history from 'lib/history';
 import { isEmpty, isNull } from 'lodash-es';
 import { UserPlus } from 'lucide-react';
-import { navigateToPage } from 'utils/navigation';
 
 import { useOnboardingContext } from '../../context/OnboardingContext';
 import {
@@ -143,7 +142,7 @@ export default function ModuleStepsContainer({
 		return true;
 	};
 
-	const redirectToModules = (event?: React.MouseEvent): void => {
+	const redirectToModules = (): void => {
 		logEvent('Onboarding V2 Complete', {
 			module: selectedModule.id,
 			dataSource: selectedDataSource?.id,
@@ -153,28 +152,26 @@ export default function ModuleStepsContainer({
 			serviceName,
 		});
 
-		let targetPath: string;
 		if (selectedModule.id === ModulesMap.APM) {
-			targetPath = ROUTES.APPLICATION;
+			history.push(ROUTES.APPLICATION);
 		} else if (selectedModule.id === ModulesMap.LogsManagement) {
-			targetPath = ROUTES.LOGS_EXPLORER;
+			history.push(ROUTES.LOGS_EXPLORER);
 		} else if (selectedModule.id === ModulesMap.InfrastructureMonitoring) {
-			targetPath = ROUTES.APPLICATION;
+			history.push(ROUTES.APPLICATION);
 		} else if (selectedModule.id === ModulesMap.AwsMonitoring) {
-			targetPath = ROUTES.APPLICATION;
+			history.push(ROUTES.APPLICATION);
 		} else {
-			targetPath = ROUTES.APPLICATION;
+			history.push(ROUTES.APPLICATION);
 		}
-		navigateToPage(targetPath, history.push, event);
 	};
 
-	const handleNext = (event?: React.MouseEvent): void => {
+	const handleNext = (): void => {
 		const isValid = isValidForm();
 
 		if (isValid) {
 			if (current === lastStepIndex) {
 				resetProgress();
-				redirectToModules(event);
+				redirectToModules();
 				return;
 			}
 
@@ -382,8 +379,8 @@ export default function ModuleStepsContainer({
 		}
 	};
 
-	const handleLogoClick = (e: React.MouseEvent): void => {
-		navigateToPage('/home', history.push, e);
+	const handleLogoClick = (): void => {
+		history.push('/home');
 	};
 
 	return (
@@ -403,7 +400,7 @@ export default function ModuleStepsContainer({
 							style={{ display: 'flex', alignItems: 'center' }}
 							type="default"
 							icon={<LeftCircleOutlined />}
-							onClick={(e): void => onReselectModule(e)}
+							onClick={onReselectModule}
 						>
 							{selectedModule.title}
 						</Button>
@@ -473,11 +470,7 @@ export default function ModuleStepsContainer({
 					>
 						Back
 					</Button>
-					<Button
-						onClick={(e): void => handleNext(e)}
-						type="primary"
-						icon={<ArrowRightOutlined />}
-					>
+					<Button onClick={handleNext} type="primary" icon={<ArrowRightOutlined />}>
 						{current < lastStepIndex ? 'Continue to next step' : 'Done'}
 					</Button>
 					<LaunchChatSupport

frontend/src/container/OnboardingV2Container/AddDataSource/AddDataSource.tsx

@@ -21,7 +21,6 @@ import history from 'lib/history';
 import { isEmpty } from 'lodash-es';
 import { CheckIcon, Goal, UserPlus, X } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
-import { navigateToPage } from 'utils/navigation';
 
 import OnboardingIngestionDetails from '../IngestionDetails/IngestionDetails';
 import InviteTeamMembers from '../InviteTeamMembers/InviteTeamMembers';
@@ -414,10 +413,7 @@ function OnboardingAddDataSource(): JSX.Element {
 		]);
 	}, [org]);
 
-	const handleUpdateCurrentStep = (
-		step: number,
-		event?: React.MouseEvent,
-	): void => {
+	const handleUpdateCurrentStep = (step: number): void => {
 		setCurrentStep(step);
 
 		if (step === 1) {
@@ -447,45 +443,43 @@ function OnboardingAddDataSource(): JSX.Element {
 				...setupStepItemsBase.slice(2),
 			]);
 		} else if (step === 3) {
-			let targetPath: string;
 			switch (selectedDataSource?.module) {
 				case 'apm':
-					targetPath = ROUTES.APPLICATION;
+					history.push(ROUTES.APPLICATION);
 					break;
 				case 'logs':
-					targetPath = ROUTES.LOGS;
+					history.push(ROUTES.LOGS);
 					break;
 				case 'metrics':
-					targetPath = ROUTES.METRICS_EXPLORER;
+					history.push(ROUTES.METRICS_EXPLORER);
 					break;
 				case 'dashboards':
-					targetPath = ROUTES.ALL_DASHBOARD;
+					history.push(ROUTES.ALL_DASHBOARD);
 					break;
 				case 'infra-monitoring-hosts':
-					targetPath = ROUTES.INFRASTRUCTURE_MONITORING_HOSTS;
+					history.push(ROUTES.INFRASTRUCTURE_MONITORING_HOSTS);
 					break;
 				case 'infra-monitoring-k8s':
-					targetPath = ROUTES.INFRASTRUCTURE_MONITORING_KUBERNETES;
+					history.push(ROUTES.INFRASTRUCTURE_MONITORING_KUBERNETES);
 					break;
 				case 'messaging-queues-kafka':
-					targetPath = ROUTES.MESSAGING_QUEUES_KAFKA;
+					history.push(ROUTES.MESSAGING_QUEUES_KAFKA);
 					break;
 				case 'messaging-queues-celery':
-					targetPath = ROUTES.MESSAGING_QUEUES_CELERY_TASK;
+					history.push(ROUTES.MESSAGING_QUEUES_CELERY_TASK);
 					break;
 				case 'integrations':
-					targetPath = ROUTES.INTEGRATIONS;
+					history.push(ROUTES.INTEGRATIONS);
 					break;
 				case 'home':
-					targetPath = ROUTES.HOME;
+					history.push(ROUTES.HOME);
 					break;
 				case 'api-monitoring':
-					targetPath = ROUTES.API_MONITORING;
+					history.push(ROUTES.API_MONITORING);
 					break;
 				default:
-					targetPath = ROUTES.APPLICATION;
+					history.push(ROUTES.APPLICATION);
 			}
-			navigateToPage(targetPath, history.push, event);
 		}
 	};
 
@@ -634,7 +628,7 @@ function OnboardingAddDataSource(): JSX.Element {
 							<X
 								size={14}
 								className="onboarding-header-container-close-icon"
-								onClick={(e): void => {
+								onClick={(): void => {
 									logEvent(
 										`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.CLOSE_ONBOARDING_CLICKED}`,
 										{
@@ -642,7 +636,7 @@ function OnboardingAddDataSource(): JSX.Element {
 										},
 									);
 
-									navigateToPage(ROUTES.HOME, history.push, e);
+									history.push(ROUTES.HOME);
 								}}
 							/>
 							<Typography.Text>Get Started (2/4)</Typography.Text>
@@ -969,7 +963,7 @@ function OnboardingAddDataSource(): JSX.Element {
 													type="primary"
 													disabled={!selectedDataSource}
 													shape="round"
-													onClick={(e): void => {
+													onClick={(): void => {
 														logEvent(
 															`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.CONFIGURED_PRODUCT}`,
 															{
@@ -983,7 +977,7 @@ function OnboardingAddDataSource(): JSX.Element {
 															selectedEnvironment || selectedFramework || selectedDataSource;
 
 														if (currentEntity?.internalRedirect && currentEntity?.link) {
-															navigateToPage(currentEntity.link, history.push, e);
+															history.push(currentEntity.link);
 														} else {
 															handleUpdateCurrentStep(2);
 														}
@@ -1054,7 +1048,7 @@ function OnboardingAddDataSource(): JSX.Element {
 									<Button
 										type="primary"
 										shape="round"
-										onClick={(e): void => {
+										onClick={(): void => {
 											logEvent(
 												`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.CONTINUE_BUTTON_CLICKED}`,
 												{
@@ -1066,7 +1060,7 @@ function OnboardingAddDataSource(): JSX.Element {
 											);
 
 											handleFilterByCategory('All');
-											handleUpdateCurrentStep(3, e);
+											handleUpdateCurrentStep(3);
 										}}
 									>
 										Continue

frontend/src/container/PaginatedTraceFlamegraph/FLAMEGRAPH_CANVAS_POC_NOTES.md

@@ -0,0 +1,88 @@
+# Flamegraph Canvas POC Notes
+
+## Overview
+This document tracks the proof-of-concept (POC) implementation of a canvas-based flamegraph rendering system, replacing the previous DOM-based approach.
+
+## Implementation Status
+
+### ✅ Completed Features
+
+1. **Canvas-based Rendering**
+   - Replaced DOM elements (`react-virtuoso` and `div.span-item`) with a single HTML5 Canvas
+   - Implemented `drawFlamegraph` function to render all spans as rectangles on canvas
+   - Added device pixel ratio (DPR) support for crisp rendering
+
+2. **Time-window-based Zoom**
+   - Replaced pixel-based zoom/pan with time-window-based approach (`viewStartTs`, `viewEndTs`)
+   - Prevents pixelation by redrawing from data with new time bounds
+   - Zoom anchors to cursor position
+   - Horizontal zoom works correctly (min: 1/100th of trace, max: full trace)
+
+3. **Drag to Pan**
+   - Implemented drag-to-pan functionality for navigating the canvas
+   - Differentiates between click (span selection) and drag (panning) based on distance moved
+   - Prevents unwanted window zoom
+
+4. **Minimap with 2D Navigation**
+   - Canvas-based minimap showing density histogram (time × levels)
+   - 2D brush overlay for both horizontal (time) and vertical (levels) navigation
+   - Draggable brush to pan both dimensions
+   - Bidirectional synchronization between main canvas and minimap
+
+5. **Timeline Synchronization**
+   - `TimelineV2` component synchronized with visible time window
+   - Updates correctly during zoom and pan operations
+
+6. **Hit Testing**
+   - Implemented span rectangle tracking for click detection
+   - Tooltip on hover
+   - Span selection via click
+
+### ❌ Known Issues / Not Working
+
+1. **Vertical Zoom - NOT WORKING**
+   - **Status**: Attempted implementation but not functioning correctly
+   - **Issue**: When horizontal zoom reaches maximum (full trace width), vertical zoom cannot continue to zoom out further
+   - **Attempted Solution**: Added `rowHeightScale` state to control vertical row spacing, but the implementation does not work as expected
+   - **Impact**: Users cannot fully zoom out vertically to see all levels when horizontal zoom is at maximum
+   - **Next Steps**: Needs further investigation and alternative approach
+
+2. **Timeline Scale Alignment - NOT WORKING PROPERLY**
+   - **Status**: Issue identified but not fully resolved
+   - **Issue**: The timeline scale does not align properly when dragging/panning the canvas. The timeline aligns correctly during zoom operations, but not during drag/pan operations.
+   - **Impact**: Timeline may show incorrect time values while dragging the canvas
+   - **Attempted Solution**: Used refs (`viewStartTsRef`, `viewEndTsRef`) to track current time window and incremental delta calculation, but issue persists
+   - **Next Steps**: Needs further investigation to ensure timeline stays synchronized during all interaction types
+
+### 🔄 Pending / Future Work
+
+1. **Performance Optimization**
+   - Consider adding an interaction layer (separate canvas on top) for better performance
+   - Optimize rendering for large traces
+
+2. **Code Quality**
+   - Reduce cognitive complexity of `drawFlamegraph` function (currently 26, target: 15)
+   - Reduce cognitive complexity of `drawMinimap` function (currently 30, target: 15)
+
+3. **Additional Features**
+   - Keyboard shortcuts for navigation
+   - Better zoom controls
+   - Export functionality
+
+## Technical Details
+
+### Key Files Modified
+- `frontend/src/container/PaginatedTraceFlamegraph/TraceFlamegraphStates/Success/Success.tsx` - Main rendering component
+- `frontend/src/container/PaginatedTraceFlamegraph/TraceFlamegraphStates/Success/Success.styles.scss` - Styles for canvas and minimap
+- `frontend/src/components/TimelineV2/TimelineV2.tsx` - Timeline synchronization
+
+### Key Concepts
+- **Time-window-based zoom**: Instead of scaling canvas bitmap, redraw from data with new time bounds
+- **Device Pixel Ratio**: Render at DPR resolution for crisp display on high-DPI screens
+- **2D Minimap**: Shows density heatmap across both time (horizontal) and levels (vertical) dimensions
+- **Brush Navigation**: Draggable rectangle overlay for panning both dimensions
+
+## Notes
+- This is a POC implementation - code quality and optimization can be improved after validation
+- Some linting warnings (cognitive complexity) are acceptable for POC phase
+- All changes should be validated before production use

frontend/src/container/PaginatedTraceFlamegraph/PaginatedTraceFlamegraph.tsx

@@ -1,3 +1,5 @@
+// @ts-nocheck
+/* eslint-disable */
 import { useEffect, useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { Progress, Skeleton, Tooltip, Typography } from 'antd';
@@ -13,8 +15,13 @@ import { Span } from 'types/api/trace/getTraceV2';
 import { TraceFlamegraphStates } from './constants';
 import Error from './TraceFlamegraphStates/Error/Error';
 import NoData from './TraceFlamegraphStates/NoData/NoData';
-import Success from './TraceFlamegraphStates/Success/Success';
+// import Success from './TraceFlamegraphStates/Success/SuccessV2';
+// import Success from './TraceFlamegraphStates/Success/SuccessV3_without_minimap_best';
+import Success from './TraceFlamegraphStates/Success/Success_zoom';
 
+// import Success from './TraceFlamegraphStates/Success/Success_zoom_api';
+// import Success from './TraceFlamegraphStates/Success/SuccessCursor';
+// import Success from './TraceFlamegraphStates/Success/Success';
 import './PaginatedTraceFlamegraph.styles.scss';
 
 interface ITraceFlamegraphProps {
@@ -38,7 +45,6 @@ function TraceFlamegraph(props: ITraceFlamegraphProps): JSX.Element {
 	const [firstSpanAtFetchLevel, setFirstSpanAtFetchLevel] = useState<string>(
 		urlQuery.get('spanId') || '',
 	);
-
 	useEffect(() => {
 		setFirstSpanAtFetchLevel(urlQuery.get('spanId') || '');
 	}, [urlQuery]);
@@ -46,6 +52,9 @@ function TraceFlamegraph(props: ITraceFlamegraphProps): JSX.Element {
 	const { data, isFetching, error } = useGetTraceFlamegraph({
 		traceId,
 		selectedSpanId: firstSpanAtFetchLevel,
+		limit: 100001,
+		// boundaryStartTsMilli: 0,
+		// boundarEndTsMilli: 10000,
 	});
 
 	// get the current state of trace flamegraph based on the API lifecycle

frontend/src/container/PaginatedTraceFlamegraph/TraceFlamegraphStates/Success/Success.styles.scss

@@ -3,6 +3,11 @@
 	overflow-x: hidden;
 	overflow-y: auto;
 
+	&.trace-flamegraph-canvas {
+		overflow: hidden;
+		position: relative;
+	}
+
 	.trace-flamegraph-virtuoso {
 		overflow-x: hidden;
 

frontend/src/container/PaginatedTraceFlamegraph/TraceFlamegraphStates/Success/Success.tsx

@@ -1,3 +1,6 @@
+// @ts-nocheck
+/* eslint-disable */
+
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import {
@@ -23,6 +26,12 @@ import { toFixed } from 'utils/toFixed';
 
 import './Success.styles.scss';
 
+// Constants for rendering
+const ROW_HEIGHT = 24; // 18px height + 6px padding
+const SPAN_BAR_HEIGHT = 12;
+const EVENT_DOT_SIZE = 6;
+const SPAN_BAR_Y_OFFSET = 3; //
+
 interface ITraceMetadata {
 	startTime: number;
 	endTime: number;
@@ -35,6 +44,14 @@ interface ISuccessProps {
 	traceMetadata: ITraceMetadata;
 	selectedSpan: Span | undefined;
 }
+interface SpanRect {
+	span: FlamegraphSpan;
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+	level: number;
+}
 
 function Success(props: ISuccessProps): JSX.Element {
 	const {
@@ -48,6 +65,28 @@ function Success(props: ISuccessProps): JSX.Element {
 	const history = useHistory();
 	const isDarkMode = useIsDarkMode();
 	const virtuosoRef = useRef<VirtuosoHandle>(null);
+
+	const baseCanvasRef = useRef<HTMLCanvasElement>(null);
+	const interactionCanvasRef = useRef<HTMLCanvasElement>(null);
+	const minimapRef = useRef<HTMLCanvasElement>(null);
+	const containerRef = useRef<HTMLDivElement>(null);
+
+	console.log('spans.length', spans.length);
+	// Calculate total canvas height. this is coming less
+	const totalHeight = spans.length * ROW_HEIGHT;
+
+	// Build a flat array of span rectangles for hit testing.
+	// consider per level buckets to improve hit testing
+	const spanRects = useRef<SpanRect[]>([]);
+
+	// Time window state (instead of zoom/pan in pixel space)
+	const [viewStartTs, setViewStartTs] = useState<number>(
+		traceMetadata.startTime,
+	);
+	const [viewEndTs, setViewEndTs] = useState<number>(traceMetadata.endTime);
+
+	const [scrollTop, setScrollTop] = useState<number>(0);
+
 	const [hoveredSpanId, setHoveredSpanId] = useState<string>('');
 	const renderSpanLevel = useCallback(
 		(_: number, spans: FlamegraphSpan[]): JSX.Element => (
@@ -157,16 +196,305 @@ function Success(props: ISuccessProps): JSX.Element {
 		});
 	}, [firstSpanAtFetchLevel, spans]);
 
+	// Draw a single event dot
+	const drawEventDot = useCallback(
+		(
+			ctx: CanvasRenderingContext2D,
+			x: number,
+			y: number,
+			isError: boolean,
+		): void => {
+			// could be optimized:
+			// ctx.beginPath();
+			// ctx.moveTo(x, y - size/2);
+			// ctx.lineTo(x + size/2, y);
+			// ctx.lineTo(x, y + size/2);
+			// ctx.lineTo(x - size/2, y);
+			// ctx.closePath();
+			// ctx.fill();
+			// ctx.stroke();
+			ctx.save();
+			ctx.translate(x, y);
+			ctx.rotate(Math.PI / 4); // 45 degrees
+
+			if (isError) {
+				ctx.fillStyle = isDarkMode ? 'rgb(239, 68, 68)' : 'rgb(220, 38, 38)';
+				ctx.strokeStyle = isDarkMode ? 'rgb(185, 28, 28)' : 'rgb(153, 27, 27)';
+			} else {
+				ctx.fillStyle = isDarkMode ? 'rgb(14, 165, 233)' : 'rgb(6, 182, 212)';
+				ctx.strokeStyle = isDarkMode ? 'rgb(2, 132, 199)' : 'rgb(8, 145, 178)';
+			}
+
+			ctx.lineWidth = 1;
+			ctx.fillRect(
+				-EVENT_DOT_SIZE / 2,
+				-EVENT_DOT_SIZE / 2,
+				EVENT_DOT_SIZE,
+				EVENT_DOT_SIZE,
+			);
+			ctx.strokeRect(
+				-EVENT_DOT_SIZE / 2,
+				-EVENT_DOT_SIZE / 2,
+				EVENT_DOT_SIZE,
+				EVENT_DOT_SIZE,
+			);
+			ctx.restore();
+		},
+		[isDarkMode],
+	);
+
+	// Get CSS color value from color string or CSS variable
+	// const getColorValue = useCallback((color: string): string => {
+	// 	// if (color.startsWith('var(')) {
+	// 	// 	// For CSS variables, we need to get computed value
+	// 	// 	const tempDiv = document.createElement('div');
+	// 	// 	tempDiv.style.color = color;
+	// 	// 	document.body.appendChild(tempDiv);
+	// 	// 	const computedColor = window.getComputedStyle(tempDiv).color;
+	// 	// 	document.body.removeChild(tempDiv);
+	// 	// 	return computedColor;
+	// 	// }
+	// 	return color;
+	// }, []);
+
+	// Get span color based on service, error state, and selection
+	// separate this when introducing interaction canvas
+	const getSpanColor = useCallback(
+		(span: FlamegraphSpan): string => {
+			let color = generateColor(span.serviceName, themeColors.traceDetailColors);
+
+			if (span.hasError) {
+				color = isDarkMode ? 'rgb(239, 68, 68)' : 'rgb(220, 38, 38)';
+			}
+			// else {
+			// 	color = getColorValue(color);
+			// }
+
+			// Apply selection/hover highlight
+			//hover/selection highlight in getSpanColor forces base redraw. clipping necessary.
+			if (selectedSpan?.spanId === span.spanId || hoveredSpanId === span.spanId) {
+				const colorObj = Color(color);
+				color = isDarkMode
+					? colorObj.lighten(0.7).hex()
+					: colorObj.darken(0.7).hex();
+			}
+
+			return color;
+		},
+		[isDarkMode, selectedSpan, hoveredSpanId],
+	);
+
+	// Draw a single span and its events
+	const drawSpan = useCallback(
+		(
+			ctx: CanvasRenderingContext2D,
+			span: FlamegraphSpan,
+			x: number,
+			y: number,
+			width: number,
+			levelIndex: number,
+			spanRectsArray: SpanRect[],
+		): void => {
+			const color = getSpanColor(span); // do not depend on hover/clicks
+			const spanY = y + SPAN_BAR_Y_OFFSET;
+
+			// Draw span rectangle
+			ctx.fillStyle = color;
+			ctx.beginPath();
+			// see if we can avoid roundRect as it is performance intensive
+			ctx.roundRect(x, spanY, width, SPAN_BAR_HEIGHT, 6);
+			ctx.fill();
+
+			// Store rect for hit testing
+			// consider per level buckets to improve hit testing
+			// So hover can:
+			// compute level from y
+			// search only within that row
+			spanRectsArray.push({
+				span,
+				x,
+				y: spanY,
+				width,
+				height: SPAN_BAR_HEIGHT,
+				level: levelIndex,
+			});
+
+			// Draw events
+			// think about optimizing this.
+			// if span is too small to draw events, skip drawing events???
+			span.event?.forEach((event) => {
+				const eventTimeMs = event.timeUnixNano / 1e6;
+				const eventOffsetPercent =
+					((eventTimeMs - span.timestamp) / (span.durationNano / 1e6)) * 100;
+				const clampedOffset = Math.max(1, Math.min(eventOffsetPercent, 99));
+				const eventX = x + (clampedOffset / 100) * width;
+				const eventY = spanY + SPAN_BAR_HEIGHT / 2;
+				// LOD guard: skip events if span too narrow
+				// if (width < EVENT_DOT_SIZE) {
+				// 	return;
+				// }
+				drawEventDot(ctx, eventX, eventY, event.isError);
+			});
+		},
+		[getSpanColor, drawEventDot],
+	);
+
+	const drawFlamegraph = useCallback(() => {
+		const canvas = baseCanvasRef.current;
+		const container = containerRef.current;
+		if (!canvas || !container) {
+			return;
+		}
+
+		const ctx = canvas.getContext('2d');
+		if (!ctx) {
+			return;
+		}
+
+		const dpr = window.devicePixelRatio || 1;
+		ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+
+		const timeSpan = viewEndTs - viewStartTs;
+		if (timeSpan <= 0) {
+			return;
+		}
+
+		const cssWidth = canvas.width / dpr;
+
+		// ---- Vertical clipping window ----
+		const viewportHeight = container.clientHeight;
+		const overscan = 4;
+
+		const firstLevel = Math.max(0, Math.floor(scrollTop / ROW_HEIGHT) - overscan);
+		const visibleLevelCount =
+			Math.ceil(viewportHeight / ROW_HEIGHT) + 2 * overscan;
+		const lastLevel = Math.min(spans.length - 1, firstLevel + visibleLevelCount);
+
+		// ---- Clear only visible region (recommended) ----
+		const clearTop = firstLevel * ROW_HEIGHT;
+		const clearHeight = (lastLevel - firstLevel + 1) * ROW_HEIGHT;
+		ctx.clearRect(0, clearTop, cssWidth, clearHeight);
+
+		const spanRectsArray: SpanRect[] = [];
+
+		// ---- Draw only visible levels ----
+		for (let levelIndex = firstLevel; levelIndex <= lastLevel; levelIndex++) {
+			const levelSpans = spans[levelIndex];
+			if (!levelSpans) {
+				continue;
+			}
+
+			const y = levelIndex * ROW_HEIGHT;
+
+			for (let i = 0; i < levelSpans.length; i++) {
+				const span = levelSpans[i];
+
+				const spanStartMs = span.timestamp;
+				const spanEndMs = span.timestamp + span.durationNano / 1e6;
+
+				// Time culling (already correct)
+				if (spanEndMs < viewStartTs || spanStartMs > viewEndTs) {
+					continue;
+				}
+
+				const leftOffset = ((spanStartMs - viewStartTs) / timeSpan) * cssWidth;
+				const rightEdge = ((spanEndMs - viewStartTs) / timeSpan) * cssWidth;
+				let width = rightEdge - leftOffset;
+
+				// Clamp to visible x-range
+				if (leftOffset < 0) {
+					width += leftOffset;
+					if (width <= 0) {
+						continue;
+					}
+				}
+				if (rightEdge > cssWidth) {
+					width = cssWidth - Math.max(0, leftOffset);
+					if (width <= 0) {
+						continue;
+					}
+				}
+
+				// Optional: minimum 1px width
+				if (width > 0 && width < 1) {
+					width = 1;
+				}
+
+				drawSpan(
+					ctx,
+					span,
+					Math.max(0, leftOffset),
+					y,
+					width,
+					levelIndex,
+					spanRectsArray,
+				);
+			}
+		}
+
+		spanRects.current = spanRectsArray;
+	}, [spans, viewStartTs, viewEndTs, scrollTop, drawSpan]);
+
+	// Handle canvas resize with device pixel ratio
+	useEffect(() => {
+		const canvas = baseCanvasRef.current;
+		const container = containerRef.current;
+		if (!canvas || !container) {
+			return;
+		}
+
+		const updateCanvasSize = (): void => {
+			const rect = container.getBoundingClientRect();
+			const dpr = window.devicePixelRatio || 1;
+
+			// Set CSS size
+			canvas.style.width = `${rect.width}px`;
+			canvas.style.height = `${totalHeight}px`;
+
+			// Set actual pixel size (accounting for DPR)
+			// Only update if size actually changed to prevent unnecessary redraws
+			const newWidth = Math.floor(rect.width * dpr);
+			const newHeight = Math.floor(totalHeight * dpr);
+
+			if (canvas.width !== newWidth || canvas.height !== newHeight) {
+				canvas.width = newWidth;
+				canvas.height = newHeight;
+				// Redraw with current time window (preserves zoom/pan)
+				drawFlamegraph();
+			}
+		};
+
+		const resizeObserver = new ResizeObserver(updateCanvasSize);
+		resizeObserver.observe(container);
+
+		// Initial size
+		updateCanvasSize();
+
+		// Handle DPR changes (e.g., moving window between screens)
+		const handleDPRChange = (): void => {
+			updateCanvasSize();
+		};
+		window
+			.matchMedia('(resolution: 1dppx)')
+			.addEventListener('change', handleDPRChange);
+
+		return (): void => {
+			resizeObserver.disconnect();
+			window
+				.matchMedia('(resolution: 1dppx)')
+				.removeEventListener('change', handleDPRChange);
+		};
+	}, [drawFlamegraph, totalHeight]);
+
+	// Re-draw when data changes
+	useEffect(() => {
+		drawFlamegraph();
+	}, [drawFlamegraph]);
+
 	return (
 		<>
-			<div className="trace-flamegraph">
-				<Virtuoso
-					ref={virtuosoRef}
-					className="trace-flamegraph-virtuoso"
-					data={spans}
-					itemContent={renderSpanLevel}
-					rangeChanged={handleRangeChanged}
-				/>
+			<div ref={containerRef} className="trace-flamegraph trace-flamegraph-canvas">
+				<canvas ref={baseCanvasRef}></canvas>
 			</div>
 			<TimelineV2
 				startTimestamp={traceMetadata.startTime}

frontend/src/container/PaginatedTraceFlamegraph/TraceFlamegraphStates/Success/SuccessV3_without_minimap_best.tsx

@@ -0,0 +1,890 @@
+// @ts-nocheck
+/* eslint-disable */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import {
+	Dispatch,
+	SetStateAction,
+	useCallback,
+	useEffect,
+	useRef,
+	useState,
+} from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import { Button } from 'antd';
+import Color from 'color';
+import TimelineV2 from 'components/TimelineV2/TimelineV2';
+import { themeColors } from 'constants/theme';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { generateColor } from 'lib/uPlotLib/utils/generateColor';
+import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+import { Span } from 'types/api/trace/getTraceV2';
+
+import './Success.styles.scss';
+
+interface ITraceMetadata {
+	startTime: number;
+	endTime: number;
+}
+
+interface ISuccessProps {
+	spans: FlamegraphSpan[][];
+	firstSpanAtFetchLevel: string;
+	setFirstSpanAtFetchLevel: Dispatch<SetStateAction<string>>;
+	traceMetadata: ITraceMetadata;
+	selectedSpan: Span | undefined;
+}
+
+// Constants for rendering
+const ROW_HEIGHT = 24; // 18px height + 6px padding
+const SPAN_BAR_HEIGHT = 12;
+const EVENT_DOT_SIZE = 6;
+const SPAN_BAR_Y_OFFSET = 3; // Center the 12px bar in 18px row
+
+interface SpanRect {
+	span: FlamegraphSpan;
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+	level: number;
+}
+
+function Success(props: ISuccessProps): JSX.Element {
+	const {
+		spans,
+		setFirstSpanAtFetchLevel,
+		traceMetadata,
+		firstSpanAtFetchLevel,
+		selectedSpan,
+	} = props;
+	const { search } = useLocation();
+	const history = useHistory();
+	const isDarkMode = useIsDarkMode();
+	const canvasRef = useRef<HTMLCanvasElement>(null);
+	const containerRef = useRef<HTMLDivElement>(null);
+	const [hoveredSpanId, setHoveredSpanId] = useState<string>('');
+	const [tooltipContent, setTooltipContent] = useState<{
+		content: string;
+		x: number;
+		y: number;
+	} | null>(null);
+	const [scrollTop, setScrollTop] = useState<number>(0);
+
+	// Time window state (instead of zoom/pan in pixel space)
+	const [viewStartTs, setViewStartTs] = useState<number>(
+		traceMetadata.startTime,
+	);
+	const [viewEndTs, setViewEndTs] = useState<number>(traceMetadata.endTime);
+	const [isSpacePressed, setIsSpacePressed] = useState<boolean>(false);
+
+	// Refs to avoid stale state during rapid wheel events and dragging
+	const viewStartRef = useRef(viewStartTs);
+	const viewEndRef = useRef(viewEndTs);
+
+	useEffect(() => {
+		viewStartRef.current = viewStartTs;
+		viewEndRef.current = viewEndTs;
+	}, [viewStartTs, viewEndTs]);
+
+	// Drag state in refs to avoid re-renders during drag
+	const isDraggingRef = useRef(false);
+	const dragStartRef = useRef<{ x: number; y: number } | null>(null);
+	const dragDistanceRef = useRef(0);
+	const suppressClickRef = useRef(false);
+
+	// Scroll ref to avoid recreating getCanvasPointer on every scroll
+	const scrollTopRef = useRef(0);
+
+	useEffect(() => {
+		scrollTopRef.current = scrollTop;
+	}, [scrollTop]);
+
+	// Build a flat array of span rectangles for hit testing
+	const spanRects = useRef<SpanRect[]>([]);
+
+	// Get span color based on service, error state, and selection
+	const getSpanColor = useCallback(
+		(span: FlamegraphSpan): string => {
+			let color = generateColor(span.serviceName, themeColors.traceDetailColors);
+
+			if (span.hasError) {
+				color = isDarkMode ? 'rgb(239, 68, 68)' : 'rgb(220, 38, 38)';
+			}
+
+			// Apply selection/hover highlight
+			if (selectedSpan?.spanId === span.spanId || hoveredSpanId === span.spanId) {
+				const colorObj = Color(color);
+				color = isDarkMode
+					? colorObj.lighten(0.7).hex()
+					: colorObj.darken(0.7).hex();
+			}
+
+			return color;
+		},
+		[isDarkMode, selectedSpan, hoveredSpanId],
+	);
+
+	// Draw a single event dot
+	const drawEventDot = useCallback(
+		(
+			ctx: CanvasRenderingContext2D,
+			x: number,
+			y: number,
+			isError: boolean,
+		): void => {
+			// could be optimized:
+			// ctx.beginPath();
+			// ctx.moveTo(x, y - size/2);
+			// ctx.lineTo(x + size/2, y);
+			// ctx.lineTo(x, y + size/2);
+			// ctx.lineTo(x - size/2, y);
+			// ctx.closePath();
+			// ctx.fill();
+			// ctx.stroke();
+			ctx.save();
+			ctx.translate(x, y);
+			ctx.rotate(Math.PI / 4); // 45 degrees
+
+			if (isError) {
+				ctx.fillStyle = isDarkMode ? 'rgb(239, 68, 68)' : 'rgb(220, 38, 38)';
+				ctx.strokeStyle = isDarkMode ? 'rgb(185, 28, 28)' : 'rgb(153, 27, 27)';
+			} else {
+				ctx.fillStyle = isDarkMode ? 'rgb(14, 165, 233)' : 'rgb(6, 182, 212)';
+				ctx.strokeStyle = isDarkMode ? 'rgb(2, 132, 199)' : 'rgb(8, 145, 178)';
+			}
+
+			ctx.lineWidth = 1;
+			ctx.fillRect(
+				-EVENT_DOT_SIZE / 2,
+				-EVENT_DOT_SIZE / 2,
+				EVENT_DOT_SIZE,
+				EVENT_DOT_SIZE,
+			);
+			ctx.strokeRect(
+				-EVENT_DOT_SIZE / 2,
+				-EVENT_DOT_SIZE / 2,
+				EVENT_DOT_SIZE,
+				EVENT_DOT_SIZE,
+			);
+			ctx.restore();
+		},
+		[isDarkMode],
+	);
+
+	// Draw a single span and its events
+	const drawSpan = useCallback(
+		(
+			ctx: CanvasRenderingContext2D,
+			span: FlamegraphSpan,
+			x: number,
+			y: number,
+			width: number,
+			levelIndex: number,
+			spanRectsArray: SpanRect[],
+		): void => {
+			const color = getSpanColor(span); // do not depend on hover/clicks
+			const spanY = y + SPAN_BAR_Y_OFFSET;
+
+			// Draw span rectangle
+			ctx.fillStyle = color;
+			ctx.beginPath();
+			ctx.roundRect(x, spanY, width, SPAN_BAR_HEIGHT, 6);
+			ctx.fill();
+
+			// Store rect for hit testing
+			// consider per level buckets to improve hit testing
+			// So hover can:
+			// compute level from y
+			// search only within that row
+			spanRectsArray.push({
+				span,
+				x,
+				y: spanY,
+				width,
+				height: SPAN_BAR_HEIGHT,
+				level: levelIndex,
+			});
+
+			// Draw events
+			// think about optimizing this.
+			// if span is too small to draw events, skip drawing events???
+			span.event?.forEach((event) => {
+				const eventTimeMs = event.timeUnixNano / 1e6;
+				const eventOffsetPercent =
+					((eventTimeMs - span.timestamp) / (span.durationNano / 1e6)) * 100;
+				const clampedOffset = Math.max(1, Math.min(eventOffsetPercent, 99));
+				const eventX = x + (clampedOffset / 100) * width;
+				const eventY = spanY + SPAN_BAR_HEIGHT / 2;
+
+				drawEventDot(ctx, eventX, eventY, event.isError);
+			});
+		},
+		[getSpanColor, drawEventDot],
+	);
+
+	// Draw the flamegraph on canvas
+	const drawFlamegraph = useCallback(() => {
+		const canvas = canvasRef.current;
+		const container = containerRef.current;
+		if (!canvas || !container) {
+			return;
+		}
+
+		const ctx = canvas.getContext('2d');
+		if (!ctx) {
+			return;
+		}
+
+		const dpr = window.devicePixelRatio || 1;
+		ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+
+		const timeSpan = viewEndTs - viewStartTs;
+		if (timeSpan <= 0) {
+			return;
+		}
+
+		const cssWidth = canvas.width / dpr;
+
+		// ---- Vertical clipping window ----
+		const viewportHeight = container.clientHeight;
+		const overscan = 4;
+
+		const firstLevel = Math.max(0, Math.floor(scrollTop / ROW_HEIGHT) - overscan);
+		const visibleLevelCount =
+			Math.ceil(viewportHeight / ROW_HEIGHT) + 2 * overscan;
+		const lastLevel = Math.min(spans.length - 1, firstLevel + visibleLevelCount);
+
+		// ---- Clear only visible region (recommended) ----
+		const clearTop = firstLevel * ROW_HEIGHT;
+		const clearHeight = (lastLevel - firstLevel + 1) * ROW_HEIGHT;
+		ctx.clearRect(0, clearTop, cssWidth, clearHeight);
+
+		const spanRectsArray: SpanRect[] = [];
+
+		// ---- Draw only visible levels ----
+		for (let levelIndex = firstLevel; levelIndex <= lastLevel; levelIndex++) {
+			const levelSpans = spans[levelIndex];
+			if (!levelSpans) {
+				continue;
+			}
+
+			const y = levelIndex * ROW_HEIGHT;
+
+			for (let i = 0; i < levelSpans.length; i++) {
+				const span = levelSpans[i];
+
+				const spanStartMs = span.timestamp;
+				const spanEndMs = span.timestamp + span.durationNano / 1e6;
+
+				// Time culling (already correct)
+				if (spanEndMs < viewStartTs || spanStartMs > viewEndTs) {
+					continue;
+				}
+
+				const leftOffset = ((spanStartMs - viewStartTs) / timeSpan) * cssWidth;
+				const rightEdge = ((spanEndMs - viewStartTs) / timeSpan) * cssWidth;
+				let width = rightEdge - leftOffset;
+
+				// Clamp to visible x-range
+				if (leftOffset < 0) {
+					width += leftOffset;
+					if (width <= 0) {
+						continue;
+					}
+				}
+				if (rightEdge > cssWidth) {
+					width = cssWidth - Math.max(0, leftOffset);
+					if (width <= 0) {
+						continue;
+					}
+				}
+
+				// Optional: minimum 1px width
+				if (width > 0 && width < 1) {
+					width = 1;
+				}
+
+				drawSpan(
+					ctx,
+					span,
+					Math.max(0, leftOffset),
+					y,
+					width,
+					levelIndex,
+					spanRectsArray,
+				);
+			}
+		}
+
+		spanRects.current = spanRectsArray;
+	}, [spans, viewStartTs, viewEndTs, scrollTop, drawSpan]);
+
+	// Calculate total canvas height
+	const totalHeight = spans.length * ROW_HEIGHT;
+
+	console.log('time: ', {
+		start: traceMetadata.startTime,
+		end: traceMetadata.endTime,
+	});
+
+	// Initialize time window when trace metadata changes (only if not already set)
+	useEffect(() => {
+		// Only reset if we're at the default view (full trace)
+		// This prevents resetting zoom/pan when metadata updates
+		if (
+			viewStartTs === traceMetadata.startTime &&
+			viewEndTs === traceMetadata.endTime
+		) {
+			// Already at default, no need to update
+			return;
+		}
+		// Only reset if the trace bounds have actually changed significantly
+		const currentSpan = viewEndTs - viewStartTs;
+		const fullSpan = traceMetadata.endTime - traceMetadata.startTime;
+		// If we're zoomed in, preserve the zoom level relative to new bounds
+		if (currentSpan < fullSpan * 0.99) {
+			// We're zoomed in, adjust the window proportionally
+			const ratio = currentSpan / fullSpan;
+			const newSpan = (traceMetadata.endTime - traceMetadata.startTime) * ratio;
+			const center = (viewStartTs + viewEndTs) / 2;
+			const newStart = Math.max(
+				traceMetadata.startTime,
+				Math.min(center - newSpan / 2, traceMetadata.endTime - newSpan),
+			);
+			setViewStartTs(newStart);
+			setViewEndTs(newStart + newSpan);
+		} else {
+			// We're at full view, reset to new full view
+			setViewStartTs(traceMetadata.startTime);
+			setViewEndTs(traceMetadata.endTime);
+		}
+	}, [traceMetadata.startTime, traceMetadata.endTime, viewStartTs, viewEndTs]);
+
+	// Handle canvas resize with device pixel ratio
+	useEffect(() => {
+		const canvas = canvasRef.current;
+		const container = containerRef.current;
+		if (!canvas || !container) {
+			return;
+		}
+
+		const updateCanvasSize = (): void => {
+			const rect = container.getBoundingClientRect();
+			const dpr = window.devicePixelRatio || 1;
+
+			// Set CSS size
+			canvas.style.width = `${rect.width}px`;
+			canvas.style.height = `${totalHeight}px`;
+
+			// Set actual pixel size (accounting for DPR)
+			// Only update if size actually changed to prevent unnecessary redraws
+			const newWidth = Math.floor(rect.width * dpr);
+			const newHeight = Math.floor(totalHeight * dpr);
+
+			if (canvas.width !== newWidth || canvas.height !== newHeight) {
+				canvas.width = newWidth;
+				canvas.height = newHeight;
+				// Redraw with current time window (preserves zoom/pan)
+				drawFlamegraph();
+			}
+		};
+
+		const resizeObserver = new ResizeObserver(updateCanvasSize);
+		resizeObserver.observe(container);
+
+		// Initial size
+		updateCanvasSize();
+
+		// Handle DPR changes (e.g., moving window between screens)
+		const handleDPRChange = (): void => {
+			updateCanvasSize();
+		};
+		window
+			.matchMedia('(resolution: 1dppx)')
+			.addEventListener('change', handleDPRChange);
+
+		return (): void => {
+			resizeObserver.disconnect();
+			window
+				.matchMedia('(resolution: 1dppx)')
+				.removeEventListener('change', handleDPRChange);
+		};
+	}, [drawFlamegraph, totalHeight]);
+
+	// Re-draw when data changes
+	useEffect(() => {
+		drawFlamegraph();
+	}, [drawFlamegraph]);
+
+	// Find span at given canvas coordinates
+	const findSpanAtPosition = useCallback((x: number, y: number):
+		| SpanRect
+		| undefined => {
+		return spanRects.current.find(
+			(spanRect) =>
+				x >= spanRect.x &&
+				x <= spanRect.x + spanRect.width &&
+				y >= spanRect.y &&
+				y <= spanRect.y + spanRect.height,
+		);
+	}, []);
+
+	// Utility to convert client coordinates to CSS canvas coordinates
+	const getCanvasPointer = useCallback((clientX: number, clientY: number): {
+		cssX: number;
+		cssY: number;
+		cssWidth: number;
+	} | null => {
+		const canvas = canvasRef.current;
+		if (!canvas) {
+			return null;
+		}
+
+		const rect = canvas.getBoundingClientRect();
+		const dpr = window.devicePixelRatio || 1;
+
+		const cssWidth = canvas.width / dpr;
+
+		const cssX = (clientX - rect.left) * (cssWidth / rect.width);
+
+		const cssY = clientY - rect.top + scrollTopRef.current;
+
+		return { cssX, cssY, cssWidth };
+	}, []);
+
+	// Handle mouse move for hover and dragging
+	const handleMouseMove = useCallback(
+		(event: React.MouseEvent<HTMLCanvasElement>) => {
+			const canvas = canvasRef.current;
+			if (!canvas) {
+				return;
+			}
+
+			const rect = canvas.getBoundingClientRect();
+
+			console.log('event', { clientX: event.clientX, clientY: event.clientY });
+
+			// ---- Dragging (pan in time space) ----
+			if (isDraggingRef.current && dragStartRef.current) {
+				const deltaX = event.clientX - dragStartRef.current.x;
+				const deltaY = event.clientY - dragStartRef.current.y;
+
+				console.log('delta', { deltaY, deltaX });
+
+				const totalDistance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+				dragDistanceRef.current = totalDistance;
+
+				const timeSpan = viewEndRef.current - viewStartRef.current;
+				const deltaTime = (deltaX / rect.width) * timeSpan;
+
+				const newStart = viewStartRef.current - deltaTime;
+
+				const clampedStart = Math.max(
+					traceMetadata.startTime,
+					Math.min(newStart, traceMetadata.endTime - timeSpan),
+				);
+
+				const clampedEnd = clampedStart + timeSpan;
+
+				setViewStartTs(clampedStart);
+				setViewEndTs(clampedEnd);
+
+				dragStartRef.current = {
+					x: event.clientX,
+					y: event.clientY,
+				};
+
+				return;
+			}
+
+			// ---- Hover ----
+			const pointer = getCanvasPointer(event.clientX, event.clientY);
+
+			if (!pointer) {
+				return;
+			}
+
+			const { cssX, cssY } = pointer;
+			const hoveredSpan = findSpanAtPosition(cssX, cssY);
+
+			if (hoveredSpan) {
+				setHoveredSpanId(hoveredSpan.span.spanId);
+				setTooltipContent({
+					content: hoveredSpan.span.name,
+					x: event.clientX,
+					y: event.clientY,
+				});
+				canvas.style.cursor = 'pointer';
+			} else {
+				setHoveredSpanId('');
+				setTooltipContent(null);
+				// Set cursor based on space key state when not hovering
+				canvas.style.cursor = isSpacePressed ? 'grab' : 'default';
+			}
+		},
+		[findSpanAtPosition, traceMetadata, getCanvasPointer, isSpacePressed],
+	);
+
+	// Handle key down for space key
+	useEffect(() => {
+		const handleKeyDown = (event: KeyboardEvent): void => {
+			if (event.code === 'Space') {
+				event.preventDefault();
+				setIsSpacePressed(true);
+			}
+		};
+
+		const handleKeyUp = (event: KeyboardEvent): void => {
+			if (event.code === 'Space') {
+				event.preventDefault();
+				setIsSpacePressed(false);
+			}
+		};
+
+		window.addEventListener('keydown', handleKeyDown);
+		window.addEventListener('keyup', handleKeyUp);
+
+		return (): void => {
+			window.removeEventListener('keydown', handleKeyDown);
+			window.removeEventListener('keyup', handleKeyUp);
+		};
+	}, []);
+
+	const handleMouseDown = useCallback(
+		(event: React.MouseEvent<HTMLCanvasElement>) => {
+			if (event.button !== 0) {
+				return;
+			} // left click only
+
+			event.preventDefault();
+
+			isDraggingRef.current = true;
+			dragStartRef.current = {
+				x: event.clientX,
+				y: event.clientY,
+			};
+			dragDistanceRef.current = 0;
+
+			const canvas = canvasRef.current;
+			if (canvas) {
+				canvas.style.cursor = 'grabbing';
+			}
+		},
+		[],
+	);
+
+	const handleMouseUp = useCallback(() => {
+		const wasDrag = dragDistanceRef.current > 5;
+
+		suppressClickRef.current = wasDrag; // 👈 key fix: suppress click after drag
+
+		isDraggingRef.current = false;
+		dragStartRef.current = null;
+		dragDistanceRef.current = 0;
+
+		const canvas = canvasRef.current;
+		if (canvas) {
+			canvas.style.cursor = 'grab';
+		}
+
+		return wasDrag;
+	}, []);
+
+	const handleMouseLeave = useCallback(() => {
+		isOverFlamegraphRef.current = false;
+
+		setHoveredSpanId('');
+		setTooltipContent(null);
+
+		isDraggingRef.current = false;
+		dragStartRef.current = null;
+		dragDistanceRef.current = 0;
+
+		const canvas = canvasRef.current;
+		if (canvas) {
+			canvas.style.cursor = 'grab';
+		}
+	}, []);
+
+	const handleClick = useCallback(
+		(event: React.MouseEvent<HTMLCanvasElement>) => {
+			// Prevent click after drag
+			if (suppressClickRef.current) {
+				suppressClickRef.current = false; // reset after suppressing once
+				return;
+			}
+
+			const pointer = getCanvasPointer(event.clientX, event.clientY);
+
+			if (!pointer) {
+				return;
+			}
+
+			const { cssX, cssY } = pointer;
+			const clickedSpan = findSpanAtPosition(cssX, cssY);
+
+			if (!clickedSpan) {
+				return;
+			}
+
+			const searchParams = new URLSearchParams(search);
+			const currentSpanId = searchParams.get('spanId');
+
+			if (currentSpanId !== clickedSpan.span.spanId) {
+				searchParams.set('spanId', clickedSpan.span.spanId);
+				history.replace({ search: searchParams.toString() });
+			}
+		},
+		[search, history, findSpanAtPosition, getCanvasPointer],
+	);
+
+	const isOverFlamegraphRef = useRef(false);
+
+	useEffect(() => {
+		const onWheel = (e: WheelEvent) => {
+			// Pinch zoom on trackpads often comes as ctrl+wheel
+			if (isOverFlamegraphRef.current && e.ctrlKey) {
+				e.preventDefault(); // stops browser zoom
+			}
+		};
+
+		// capture:true ensures we intercept early
+		window.addEventListener('wheel', onWheel, { passive: false, capture: true });
+
+		return () => {
+			window.removeEventListener(
+				'wheel',
+				onWheel as any,
+				{ capture: true } as any,
+			);
+		};
+	}, []);
+
+	const wheelDeltaRef = useRef(0);
+	const rafRef = useRef<number | null>(null);
+	const lastCursorXRef = useRef(0);
+	const lastCssWidthRef = useRef(1);
+	const lastIsPinchRef = useRef(false);
+
+	const applyWheelZoom = useCallback(() => {
+		rafRef.current = null;
+
+		const cssWidth = lastCssWidthRef.current || 1;
+		const cursorX = lastCursorXRef.current;
+
+		const fullSpan = traceMetadata.endTime - traceMetadata.startTime;
+		const oldSpan = viewEndRef.current - viewStartRef.current;
+
+		// ✅ Different intensity for pinch vs scroll
+		const zoomIntensityScroll = 0.0015;
+		const zoomIntensityPinch = 0.01; // pinch needs stronger response
+		const zoomIntensity = lastIsPinchRef.current
+			? zoomIntensityPinch
+			: zoomIntensityScroll;
+
+		const deltaY = wheelDeltaRef.current;
+		wheelDeltaRef.current = 0;
+
+		// ✅ Smooth zoom using delta magnitude
+		const zoomFactor = Math.exp(deltaY * zoomIntensity);
+		const newSpan = oldSpan * zoomFactor;
+
+		console.log('newSpan', { cssWidth, newSpan, zoomFactor, oldSpan });
+
+		// ✅ Better minSpan clamp (absolute + pixel-based)
+		const absoluteMinSpan = 5; // ms
+		const pixelMinSpan = fullSpan / cssWidth; // ~1px of time
+		const minSpan = Math.max(absoluteMinSpan, pixelMinSpan);
+		const maxSpan = fullSpan;
+
+		const clampedSpan = Math.max(minSpan, Math.min(maxSpan, newSpan));
+
+		// ✅ Anchor preserving zoom (same as your original logic)
+		const cursorRatio = Math.max(0, Math.min(cursorX / cssWidth, 1));
+		const anchorTs = viewStartRef.current + cursorRatio * oldSpan;
+
+		const newViewStart = anchorTs - cursorRatio * clampedSpan;
+
+		const finalStart = Math.max(
+			traceMetadata.startTime,
+			Math.min(newViewStart, traceMetadata.endTime - clampedSpan),
+		);
+		const finalEnd = finalStart + clampedSpan;
+
+		console.log('finalStart', finalStart);
+		console.log('finalEnd', finalEnd);
+		setViewStartTs(finalStart);
+		setViewEndTs(finalEnd);
+	}, [traceMetadata]);
+
+	const handleWheel = useCallback(
+		(event: React.WheelEvent<HTMLCanvasElement>) => {
+			event.preventDefault();
+
+			const pointer = getCanvasPointer(event.clientX, event.clientY);
+
+			if (!pointer) {
+				return;
+			}
+
+			console.log('pointer', pointer);
+
+			const { cssX: cursorX, cssWidth } = pointer;
+
+			// ✅ Detect pinch on Chrome/Edge: ctrlKey true for trackpad pinch
+			lastIsPinchRef.current = event.ctrlKey;
+
+			lastCssWidthRef.current = cssWidth;
+			lastCursorXRef.current = cursorX;
+
+			// ✅ Accumulate deltas; apply once per frame
+			wheelDeltaRef.current += event.deltaY;
+
+			if (rafRef.current == null) {
+				rafRef.current = requestAnimationFrame(applyWheelZoom);
+			}
+		},
+		[applyWheelZoom, getCanvasPointer],
+	);
+
+	// Reset zoom and pan
+	const handleResetZoom = useCallback(() => {
+		setViewStartTs(traceMetadata.startTime);
+		setViewEndTs(traceMetadata.endTime);
+	}, [traceMetadata]);
+
+	// Handle scroll for pagination
+	const handleScroll = useCallback(
+		(event: React.UIEvent<HTMLDivElement>): void => {
+			const target = event.currentTarget;
+			setScrollTop(target.scrollTop);
+
+			// Pagination logic
+			if (spans.length < 50) {
+				return;
+			}
+
+			const scrollPercentage = target.scrollTop / target.scrollHeight;
+			const totalLevels = spans.length;
+
+			if (scrollPercentage === 0 && spans[0]?.[0]?.level !== 0) {
+				setFirstSpanAtFetchLevel(spans[0][0].spanId);
+			}
+
+			if (scrollPercentage >= 0.95 && spans[totalLevels - 1]?.[0]?.spanId) {
+				setFirstSpanAtFetchLevel(spans[totalLevels - 1][0].spanId);
+			}
+		},
+		[spans, setFirstSpanAtFetchLevel],
+	);
+
+	// Auto-scroll to selected span
+	useEffect(() => {
+		if (!firstSpanAtFetchLevel || !containerRef.current) {
+			return;
+		}
+
+		const levelIndex = spans.findIndex(
+			(level) => level[0]?.spanId === firstSpanAtFetchLevel,
+		);
+
+		if (levelIndex !== -1) {
+			const targetScroll = levelIndex * ROW_HEIGHT;
+			containerRef.current.scrollTop = targetScroll;
+			setScrollTop(targetScroll);
+		}
+	}, [firstSpanAtFetchLevel, spans]);
+
+	return (
+		<>
+			<div
+				ref={containerRef}
+				className="trace-flamegraph trace-flamegraph-canvas"
+				onScroll={handleScroll}
+			>
+				{(viewStartTs !== traceMetadata.startTime ||
+					viewEndTs !== traceMetadata.endTime) && (
+					<Button
+						className="flamegraph-reset-zoom"
+						size="small"
+						onClick={handleResetZoom}
+						title="Reset zoom and pan"
+					>
+						Reset View
+					</Button>
+				)}
+				<canvas
+					ref={canvasRef}
+					style={{
+						display: 'block',
+						width: '100%',
+						height: `${totalHeight}px`,
+					}}
+					onMouseMove={handleMouseMove}
+					onMouseDown={handleMouseDown}
+					onMouseUp={handleMouseUp}
+					onMouseEnter={() => (isOverFlamegraphRef.current = true)}
+					onMouseLeave={handleMouseLeave}
+					onClick={handleClick}
+					onWheel={handleWheel}
+					onContextMenu={(e): void => e.preventDefault()}
+				/>
+				{tooltipContent && (
+					<div
+						style={{
+							position: 'fixed',
+							left: `${tooltipContent.x + 10}px`,
+							top: `${tooltipContent.y - 10}px`,
+							pointerEvents: 'none',
+							zIndex: 1000,
+							backgroundColor: isDarkMode ? '#1f2937' : '#ffffff',
+							color: isDarkMode ? '#ffffff' : '#000000',
+							padding: '4px 8px',
+							borderRadius: '4px',
+							fontSize: '12px',
+							boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+						}}
+					>
+						{tooltipContent.content}
+					</div>
+				)}
+			</div>
+			<TimelineV2
+				startTimestamp={viewStartTs}
+				endTimestamp={viewEndTs}
+				offsetTimestamp={viewStartTs - traceMetadata.startTime}
+				timelineHeight={22}
+			/>
+		</>
+	);
+}
+
+export default Success;
+
+// on drag on click is getting registered as a click
+// zoom and scale not matching
+// check minimap logic
+// use
+// const scrollTopRef = useRef(scrollTop);
+
+// useEffect(() => {
+//   scrollTopRef.current = scrollTop;
+// }, [scrollTop]);
+
+// fix clicks in interaction canvas
+
+// Auto-scroll to selected span else on top(based on default span)
+// time bar line vertical
+// zoom handle vertical and horizontal scroll with proper defined thresholds
+// timeline should be in sync with the flamegraph. test with vertical line of time on event etc.
+// proper working interaction layer for clicks and hovers
+// hit testing should be efficient and accurate without flat spanRect
+
+// Final Priority Order (Clean Summary)
+// ✅ Zoom (Horizontal + Vertical thresholds)
+// ✅ Timeline sync + vertical time dashed line
+// ✅ Minimap brush correctness
+// ✅ Auto-scroll behavior
+// ✅ Interaction layer separation
+// ✅ Efficient hit testing

frontend/src/container/SideNav/SideNav.tsx

@@ -65,7 +65,6 @@ import AppReducer from 'types/reducer/app';
 import { USER_ROLES } from 'types/roles';
 import { checkVersionState } from 'utils/app';
 import { showErrorNotification } from 'utils/error';
-import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { useCmdK } from '../../providers/cmdKProvider';
 import { routeConfig } from './config';
@@ -307,6 +306,8 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 		icon: <Cog size={16} />,
 	};
 
+	const isCtrlMetaKey = (e: MouseEvent): boolean => e.ctrlKey || e.metaKey;
+
 	const isLatestVersion = checkVersionState(currentVersion, latestVersion);
 
 	const [
@@ -435,6 +436,10 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 
 	const isWorkspaceBlocked = trialInfo?.workSpaceBlock || false;
 
+	const openInNewTab = (path: string): void => {
+		window.open(path, '_blank');
+	};
+
 	const onClickGetStarted = (event: MouseEvent): void => {
 		logEvent('Sidebar: Menu clicked', {
 			menuRoute: '/get-started',
@@ -445,7 +450,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 			? ROUTES.GET_STARTED_WITH_CLOUD
 			: ROUTES.GET_STARTED;
 
-		if (isModifierKeyPressed(event)) {
+		if (isCtrlMetaKey(event)) {
 			openInNewTab(onboaringRoute);
 		} else {
 			history.push(onboaringRoute);
@@ -460,7 +465,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 			const queryString = getQueryString(availableParams || [], params);
 
 			if (pathname !== key) {
-				if (event && isModifierKeyPressed(event)) {
+				if (event && isCtrlMetaKey(event)) {
 					openInNewTab(`${key}?${queryString.join('&')}`);
 				} else {
 					history.push(`${key}?${queryString.join('&')}`, {
@@ -659,7 +664,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 
 	const handleMenuItemClick = (event: MouseEvent, item: SidebarItem): void => {
 		if (item.key === ROUTES.SETTINGS) {
-			if (isModifierKeyPressed(event)) {
+			if (isCtrlMetaKey(event)) {
 				openInNewTab(settingsRoute);
 			} else {
 				history.push(settingsRoute);
@@ -837,7 +842,6 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 		}
 	};
 
-	// eslint-disable-next-line sonarjs/cognitive-complexity
 	const handleHelpSupportMenuItemClick = (info: SidebarItem): void => {
 		const item = helpSupportDropdownMenuItems.find(
 			(item) => !('type' in item) && item.key === info.key,
@@ -847,8 +851,6 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 			window.open(item.url, '_blank');
 		}
 
-		const event = (info as SidebarItem & { domEvent?: MouseEvent }).domEvent;
-
 		if (item && !('type' in item)) {
 			logEvent('Help Popover: Item clicked', {
 				menuRoute: item.key,
@@ -857,18 +859,10 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 
 			switch (item.key) {
 				case ROUTES.SHORTCUTS:
-					if (event && isModifierKeyPressed(event)) {
-						openInNewTab(ROUTES.SHORTCUTS);
-					} else {
-						history.push(ROUTES.SHORTCUTS);
-					}
+					history.push(ROUTES.SHORTCUTS);
 					break;
 				case 'invite-collaborators':
-					if (event && isModifierKeyPressed(event)) {
-						openInNewTab(`${ROUTES.ORG_SETTINGS}#invite-team-members`);
-					} else {
-						history.push(`${ROUTES.ORG_SETTINGS}#invite-team-members`);
-					}
+					history.push(`${ROUTES.ORG_SETTINGS}#invite-team-members`);
 					break;
 				case 'chat-support':
 					if (window.pylon) {
@@ -887,7 +881,6 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 		}
 	};
 
-	// eslint-disable-next-line sonarjs/cognitive-complexity
 	const handleSettingsMenuItemClick = (info: SidebarItem): void => {
 		const item = userSettingsDropdownMenuItems.find(
 			(item) => item?.key === info.key,
@@ -905,30 +898,15 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 			menuRoute: item?.key,
 			menuLabel,
 		});
-
-		const event = (info as SidebarItem & { domEvent?: MouseEvent }).domEvent;
-
 		switch (info.key) {
 			case 'account':
-				if (event && isModifierKeyPressed(event)) {
-					openInNewTab(ROUTES.MY_SETTINGS);
-				} else {
-					history.push(ROUTES.MY_SETTINGS);
-				}
+				history.push(ROUTES.MY_SETTINGS);
 				break;
 			case 'workspace':
-				if (event && isModifierKeyPressed(event)) {
-					openInNewTab(ROUTES.SETTINGS);
-				} else {
-					history.push(ROUTES.SETTINGS);
-				}
+				history.push(ROUTES.SETTINGS);
 				break;
 			case 'license':
-				if (event && isModifierKeyPressed(event)) {
-					openInNewTab(ROUTES.LIST_LICENSES);
-				} else {
-					history.push(ROUTES.LIST_LICENSES);
-				}
+				history.push(ROUTES.LIST_LICENSES);
 				break;
 			case 'logout':
 				Logout();

frontend/src/hooks/__tests__/useSafeNavigate.test.ts

@@ -1,106 +0,0 @@
-/**
- * Tests for useSafeNavigate's mock contract.
- *
- * The real useSafeNavigate hook is globally replaced by a mock via
- * jest.config.ts moduleNameMapper, so we cannot test the real
- * implementation here. Instead we verify:
- *
- * 1. The mock accepts the new `event` and `newTab` options without
- *    type errors — ensuring component tests that pass these options
- *    won't break.
- * 2. The shouldOpenNewTab decision logic (extracted inline below)
- *    matches the real hook's behaviour.
- */
-
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import { isModifierKeyPressed } from 'utils/navigation';
-
-/**
- * Mirrors the shouldOpenNewTab logic from the real useSafeNavigate hook.
- * Kept in sync manually — any drift will be caught by integration tests.
- */
-interface NavigateOptions {
-	newTab?: boolean;
-	event?: MouseEvent | React.MouseEvent;
-}
-
-const shouldOpenNewTab = (options?: NavigateOptions): boolean =>
-	Boolean(
-		options?.newTab || (options?.event && isModifierKeyPressed(options.event)),
-	);
-
-describe('useSafeNavigate mock contract', () => {
-	it('mock returns a safeNavigate function', () => {
-		const { safeNavigate } = useSafeNavigate();
-		expect(typeof safeNavigate).toBe('function');
-	});
-
-	it('safeNavigate accepts string path with event option', () => {
-		const { safeNavigate } = useSafeNavigate();
-		const event = { metaKey: true, ctrlKey: false } as MouseEvent;
-
-		expect(() => {
-			safeNavigate('/alerts', { event });
-		}).not.toThrow();
-
-		expect(safeNavigate).toHaveBeenCalledWith('/alerts', { event });
-	});
-
-	it('safeNavigate accepts string path with newTab option', () => {
-		const { safeNavigate } = useSafeNavigate();
-
-		expect(() => {
-			safeNavigate('/dashboard', { newTab: true });
-		}).not.toThrow();
-
-		expect(safeNavigate).toHaveBeenCalledWith('/dashboard', { newTab: true });
-	});
-
-	it('safeNavigate accepts SafeNavigateParams with event option', () => {
-		const { safeNavigate } = useSafeNavigate();
-		const event = { metaKey: false, ctrlKey: true } as MouseEvent;
-
-		expect(() => {
-			safeNavigate({ pathname: '/settings', search: '?tab=general' }, { event });
-		}).not.toThrow();
-
-		expect(safeNavigate).toHaveBeenCalledWith(
-			{ pathname: '/settings', search: '?tab=general' },
-			{ event },
-		);
-	});
-});
-
-describe('shouldOpenNewTab decision logic', () => {
-	it('returns true when newTab is true', () => {
-		expect(shouldOpenNewTab({ newTab: true })).toBe(true);
-	});
-
-	it('returns true when event has metaKey pressed', () => {
-		const event = { metaKey: true, ctrlKey: false } as MouseEvent;
-		expect(shouldOpenNewTab({ event })).toBe(true);
-	});
-
-	it('returns true when event has ctrlKey pressed', () => {
-		const event = { metaKey: false, ctrlKey: true } as MouseEvent;
-		expect(shouldOpenNewTab({ event })).toBe(true);
-	});
-
-	it('returns false when event has no modifier keys', () => {
-		const event = { metaKey: false, ctrlKey: false } as MouseEvent;
-		expect(shouldOpenNewTab({ event })).toBe(false);
-	});
-
-	it('returns false when no options provided', () => {
-		expect(shouldOpenNewTab()).toBe(false);
-		expect(shouldOpenNewTab(undefined)).toBe(false);
-	});
-
-	it('returns false when options provided without event or newTab', () => {
-		expect(shouldOpenNewTab({})).toBe(false);
-	});
-
-	it('newTab takes precedence even without event', () => {
-		expect(shouldOpenNewTab({ newTab: true })).toBe(true);
-	});
-});

frontend/src/hooks/logs/__tests__/useLogDetailHandlers.test.ts

@@ -1,94 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-import { useActiveLog } from 'hooks/logs/useActiveLog';
-import { useIsTextSelected } from 'hooks/useIsTextSelected';
-import { ILog } from 'types/api/logs/log';
-
-import useLogDetailHandlers from '../useLogDetailHandlers';
-
-jest.mock('hooks/logs/useActiveLog');
-jest.mock('hooks/useIsTextSelected');
-
-const mockOnSetActiveLog = jest.fn();
-const mockOnClearActiveLog = jest.fn();
-const mockOnAddToQuery = jest.fn();
-const mockOnGroupByAttribute = jest.fn();
-const mockIsTextSelected = jest.fn();
-
-const mockLog: ILog = {
-	id: 'log-1',
-	timestamp: '2024-01-01T00:00:00Z',
-	date: '2024-01-01',
-	body: 'test log body',
-	severityText: 'INFO',
-	severityNumber: 9,
-	traceFlags: 0,
-	traceId: '',
-	spanID: '',
-	attributesString: {},
-	attributesInt: {},
-	attributesFloat: {},
-	resources_string: {},
-	scope_string: {},
-	attributes_string: {},
-	severity_text: '',
-	severity_number: 0,
-};
-
-beforeEach(() => {
-	jest.clearAllMocks();
-
-	jest.mocked(useIsTextSelected).mockReturnValue(mockIsTextSelected);
-
-	jest.mocked(useActiveLog).mockReturnValue({
-		activeLog: null,
-		onSetActiveLog: mockOnSetActiveLog,
-		onClearActiveLog: mockOnClearActiveLog,
-		onAddToQuery: mockOnAddToQuery,
-		onGroupByAttribute: mockOnGroupByAttribute,
-	});
-});
-
-it('should not open log detail when text is selected', () => {
-	mockIsTextSelected.mockReturnValue(true);
-
-	const { result } = renderHook(() => useLogDetailHandlers());
-
-	act(() => {
-		result.current.handleSetActiveLog(mockLog);
-	});
-
-	expect(mockOnSetActiveLog).not.toHaveBeenCalled();
-});
-
-it('should open log detail when no text is selected', () => {
-	mockIsTextSelected.mockReturnValue(false);
-
-	const { result } = renderHook(() => useLogDetailHandlers());
-
-	act(() => {
-		result.current.handleSetActiveLog(mockLog);
-	});
-
-	expect(mockOnSetActiveLog).toHaveBeenCalledWith(mockLog);
-});
-
-it('should toggle off when clicking the same active log', () => {
-	mockIsTextSelected.mockReturnValue(false);
-
-	jest.mocked(useActiveLog).mockReturnValue({
-		activeLog: mockLog,
-		onSetActiveLog: mockOnSetActiveLog,
-		onClearActiveLog: mockOnClearActiveLog,
-		onAddToQuery: mockOnAddToQuery,
-		onGroupByAttribute: mockOnGroupByAttribute,
-	});
-
-	const { result } = renderHook(() => useLogDetailHandlers());
-
-	act(() => {
-		result.current.handleSetActiveLog(mockLog);
-	});
-
-	expect(mockOnClearActiveLog).toHaveBeenCalled();
-	expect(mockOnSetActiveLog).not.toHaveBeenCalled();
-});

frontend/src/hooks/logs/useLogDetailHandlers.ts

@@ -2,7 +2,6 @@ import { useCallback, useState } from 'react';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import type { UseActiveLog } from 'hooks/logs/types';
 import { useActiveLog } from 'hooks/logs/useActiveLog';
-import { useIsTextSelected } from 'hooks/useIsTextSelected';
 import { ILog } from 'types/api/logs/log';
 
 type SelectedTab = typeof VIEW_TYPES[keyof typeof VIEW_TYPES] | undefined;
@@ -29,13 +28,9 @@ function useLogDetailHandlers({
 		onAddToQuery,
 	} = useActiveLog();
 	const [selectedTab, setSelectedTab] = useState<SelectedTab>(defaultTab);
-	const isTextSelected = useIsTextSelected();
 
 	const handleSetActiveLog = useCallback(
 		(log: ILog, nextTab: SelectedTab = defaultTab): void => {
-			if (isTextSelected()) {
-				return;
-			}
 			if (activeLog?.id === log.id) {
 				onClearActiveLog();
 				setSelectedTab(undefined);
@@ -44,7 +39,7 @@ function useLogDetailHandlers({
 			onSetActiveLog(log);
 			setSelectedTab(nextTab ?? defaultTab);
 		},
-		[activeLog?.id, defaultTab, onClearActiveLog, onSetActiveLog, isTextSelected],
+		[activeLog?.id, defaultTab, onClearActiveLog, onSetActiveLog],
 	);
 
 	const handleCloseLogDetail = useCallback((): void => {

frontend/src/hooks/trace/useGetTraceFlamegraph.tsx

@@ -17,6 +17,9 @@ const useGetTraceFlamegraph = (
 			REACT_QUERY_KEY.GET_TRACE_V2_FLAMEGRAPH,
 			props.traceId,
 			props.selectedSpanId,
+			props.limit,
+			props.boundaryStartTsMilli,
+			props.boundarEndTsMilli,
 		],
 		enabled: !!props.traceId,
 		keepPreviousData: true,

frontend/src/hooks/useIsTextSelected.ts

@@ -1,10 +0,0 @@
-import { useCallback } from 'react';
-
-export function useIsTextSelected(): () => boolean {
-	return useCallback((): boolean => {
-		const selection = window.getSelection();
-		return (
-			!!selection && !selection.isCollapsed && selection.toString().length > 0
-		);
-	}, []);
-}

frontend/src/hooks/useSafeNavigate.ts

@@ -1,13 +1,11 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
 import { cloneDeep, isEqual } from 'lodash-es';
-import { isModifierKeyPressed } from 'utils/navigation';
 
 interface NavigateOptions {
 	replace?: boolean;
 	state?: any;
 	newTab?: boolean;
-	event?: MouseEvent | React.MouseEvent;
 }
 
 interface SafeNavigateParams {
@@ -107,7 +105,6 @@ export const useSafeNavigate = (
 	const location = useLocation();
 
 	const safeNavigate = useCallback(
-		// eslint-disable-next-line sonarjs/cognitive-complexity
 		(to: string | SafeNavigateParams, options?: NavigateOptions) => {
 			const currentUrl = new URL(
 				`${location.pathname}${location.search}`,
@@ -125,10 +122,8 @@ export const useSafeNavigate = (
 				);
 			}
 
-			const shouldOpenNewTab =
-				options?.newTab || (options?.event && isModifierKeyPressed(options.event));
-
-			if (shouldOpenNewTab) {
+			// If newTab is true, open in new tab and return early
+			if (options?.newTab) {
 				const targetPath =
 					typeof to === 'string'
 						? to

frontend/src/pages/AlertDetails/AlertDetails.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import { Breadcrumb, Button, Divider } from 'antd';
@@ -18,7 +18,6 @@ import {
 	NEW_ALERT_SCHEMA_VERSION,
 	PostableAlertRuleV2,
 } from 'types/api/alerts/alertTypesV2';
-import { navigateToPage } from 'utils/navigation';
 
 import AlertHeader from './AlertHeader/AlertHeader';
 import AlertNotFound from './AlertNotFound';
@@ -59,11 +58,11 @@ function BreadCrumbItem({
 	if (isLast) {
 		return <div className="breadcrumb-item breadcrumb-item--last">{title}</div>;
 	}
-	const handleNavigate = (e: React.MouseEvent): void => {
+	const handleNavigate = (): void => {
 		if (!route) {
 			return;
 		}
-		navigateToPage(ROUTES.LIST_ALL_ALERT, history.push, e);
+		history.push(ROUTES.LIST_ALL_ALERT);
 	};
 
 	return (

frontend/src/pages/AlertDetails/AlertNotFound/AlertNotFound.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Button, Typography } from 'antd';
 import ROUTES from 'constants/routes';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
@@ -16,8 +15,8 @@ function AlertNotFound({ isTestAlert }: AlertNotFoundProps): JSX.Element {
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
 	const { safeNavigate } = useSafeNavigate();
 
-	const checkAllRulesHandler = (e?: React.MouseEvent): void => {
-		safeNavigate(ROUTES.LIST_ALL_ALERT, { event: e });
+	const checkAllRulesHandler = (): void => {
+		safeNavigate(ROUTES.LIST_ALL_ALERT);
 	};
 
 	const contactSupportHandler = (): void => {

frontend/src/pages/AlertDetails/__tests__/AlertNotFound.test.tsx

@@ -69,10 +69,7 @@ describe('AlertNotFound', () => {
 		const user = userEvent.setup();
 		render(<AlertNotFound isTestAlert={false} />);
 		await user.click(screen.getByText('Check all rules'));
-		expect(mockSafeNavigate).toHaveBeenCalledWith(
-			ROUTES.LIST_ALL_ALERT,
-			expect.objectContaining({ event: expect.any(Object) }),
-		);
+		expect(mockSafeNavigate).toHaveBeenCalledWith(ROUTES.LIST_ALL_ALERT);
 	});
 
 	it('should navigate to the correct support page for cloud users when button is clicked', async () => {

frontend/src/pages/AlertTypeSelection/AlertTypeSelection.tsx

@@ -18,7 +18,7 @@ function AlertTypeSelectionPage(): JSX.Element {
 	}, []);
 
 	const handleSelectType = useCallback(
-		(type: AlertTypes, event?: React.MouseEvent): void => {
+		(type: AlertTypes): void => {
 			// For anamoly based alert, we need to set the ruleType to anomaly_rule
 			// and alertType to metrics_based_alert
 			if (type === AlertTypes.ANOMALY_BASED_ALERT) {
@@ -41,7 +41,7 @@ function AlertTypeSelectionPage(): JSX.Element {
 				queryParams.set(QueryParams.showClassicCreateAlertsPage, 'true');
 			}
 
-			safeNavigate(`${ROUTES.ALERTS_NEW}?${queryParams.toString()}`, { event });
+			safeNavigate(`${ROUTES.ALERTS_NEW}?${queryParams.toString()}`);
 		},
 		[queryParams, safeNavigate],
 	);

frontend/src/pages/Integrations/Header.tsx

@@ -1,14 +1,14 @@
+import { useHistory } from 'react-router-dom';
 import { Button, Flex, Typography } from 'antd';
 import ROUTES from 'constants/routes';
-import history from 'lib/history';
 import { ArrowRight } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
-import { navigateToPage } from 'utils/navigation';
 import { routePermission } from 'utils/permission';
 
 import './Integrations.styles.scss';
 
 function Header(): JSX.Element {
+	const history = useHistory();
 	const { user } = useAppContext();
 
 	const isGetStartedWithCloudAllowed = routePermission.GET_STARTED_WITH_CLOUD.includes(
@@ -30,9 +30,7 @@ function Header(): JSX.Element {
 					<Button
 						className="periscope-btn primary view-data-sources-btn"
 						type="primary"
-						onClick={(e): void =>
-							navigateToPage(ROUTES.GET_STARTED_WITH_CLOUD, history.push, e)
-						}
+						onClick={(): void => history.push(ROUTES.GET_STARTED_WITH_CLOUD)}
 					>
 						<span>View 150+ Data Sources</span>
 						<ArrowRight size={14} />

frontend/src/pages/MessagingQueues/MQDetailPage/MQDetailPage.tsx

@@ -7,7 +7,6 @@ import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import useUrlQuery from 'hooks/useUrlQuery';
-import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import {
 	MessagingQueuesViewType,
@@ -65,14 +64,8 @@ function MQDetailPage(): JSX.Element {
 		selectedView !== MessagingQueuesViewType.dropRate.value &&
 		selectedView !== MessagingQueuesViewType.metricPage.value;
 
-	const handleBackClick = (
-		event?: React.MouseEvent | React.KeyboardEvent,
-	): void => {
-		if (event && isModifierKeyPressed(event as React.MouseEvent)) {
-			openInNewTab(ROUTES.MESSAGING_QUEUES_KAFKA);
-		} else {
-			history.push(ROUTES.MESSAGING_QUEUES_KAFKA);
-		}
+	const handleBackClick = (): void => {
+		history.push(ROUTES.MESSAGING_QUEUES_KAFKA);
 	};
 
 	return (
@@ -84,7 +77,7 @@ function MQDetailPage(): JSX.Element {
 						className="message-queue-text"
 						onKeyDown={(e): void => {
 							if (e.key === 'Enter' || e.key === ' ') {
-								handleBackClick(e);
+								handleBackClick();
 							}
 						}}
 						role="button"

frontend/src/pages/MessagingQueues/MQDetails/MQTables/MQTables.tsx

@@ -30,7 +30,6 @@ import {
 	setConfigDetail,
 } from 'pages/MessagingQueues/MessagingQueuesUtils';
 import { ErrorResponse, SuccessResponse } from 'types/api';
-import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 import { formatNumericValue } from 'utils/numericUtils';
 
 import { getTableDataForProducerLatencyOverview } from './MQTableUtils';
@@ -81,12 +80,7 @@ export function getColumns(
 								onClick={(e): void => {
 									e.preventDefault();
 									e.stopPropagation();
-									const path = `/services/${encodeURIComponent(text)}`;
-									if (isModifierKeyPressed(e)) {
-										openInNewTab(path);
-									} else {
-										history.push(path);
-									}
+									history.push(`/services/${encodeURIComponent(text)}`);
 								}}
 							>
 								{text}

frontend/src/pages/MessagingQueues/MessagingQueues.tsx

@@ -10,7 +10,6 @@ import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
-import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import {
 	KAFKA_SETUP_DOC_LINK,
@@ -24,40 +23,26 @@ function MessagingQueues(): JSX.Element {
 	const history = useHistory();
 	const { t } = useTranslation('messagingQueuesKafkaOverview');
 
-	const redirectToDetailsPage = (
-		callerView?: string,
-		event?: React.MouseEvent,
-	): void => {
+	const redirectToDetailsPage = (callerView?: string): void => {
 		logEvent('Messaging Queues: View details clicked', {
 			page: 'Messaging Queues Overview',
 			source: callerView,
 		});
 
-		const path = `${ROUTES.MESSAGING_QUEUES_KAFKA_DETAIL}?${QueryParams.mqServiceView}=${callerView}`;
-		if (event && isModifierKeyPressed(event)) {
-			openInNewTab(path);
-		} else {
-			history.push(path);
-		}
+		history.push(
+			`${ROUTES.MESSAGING_QUEUES_KAFKA_DETAIL}?${QueryParams.mqServiceView}=${callerView}`,
+		);
 	};
 
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
 
-	const getStartedRedirect = (
-		link: string,
-		sourceCard: string,
-		event?: React.MouseEvent,
-	): void => {
+	const getStartedRedirect = (link: string, sourceCard: string): void => {
 		logEvent('Messaging Queues: Get started clicked', {
 			source: sourceCard,
 			link: isCloudUserVal ? link : KAFKA_SETUP_DOC_LINK,
 		});
 		if (isCloudUserVal) {
-			if (event && isModifierKeyPressed(event)) {
-				openInNewTab(link);
-			} else {
-				history.push(link);
-			}
+			history.push(link);
 		} else {
 			window.open(KAFKA_SETUP_DOC_LINK, '_blank');
 		}
@@ -94,11 +79,10 @@ function MessagingQueues(): JSX.Element {
 						<div className="button-grp">
 							<Button
 								type="default"
-								onClick={(e): void =>
+								onClick={(): void =>
 									getStartedRedirect(
 										`${ROUTES.GET_STARTED_APPLICATION_MONITORING}?${QueryParams.getStartedSource}=kafka&${QueryParams.getStartedSourceService}=${MessagingQueueHealthCheckService.Consumers}`,
 										'Configure Consumer',
-										e,
 									)
 								}
 							>
@@ -114,11 +98,10 @@ function MessagingQueues(): JSX.Element {
 						<div className="button-grp">
 							<Button
 								type="default"
-								onClick={(e): void =>
+								onClick={(): void =>
 									getStartedRedirect(
 										`${ROUTES.GET_STARTED_APPLICATION_MONITORING}?${QueryParams.getStartedSource}=kafka&${QueryParams.getStartedSourceService}=${MessagingQueueHealthCheckService.Producers}`,
 										'Configure Producer',
-										e,
 									)
 								}
 							>
@@ -134,11 +117,10 @@ function MessagingQueues(): JSX.Element {
 						<div className="button-grp">
 							<Button
 								type="default"
-								onClick={(e): void =>
+								onClick={(): void =>
 									getStartedRedirect(
 										`${ROUTES.GET_STARTED_INFRASTRUCTURE_MONITORING}?${QueryParams.getStartedSource}=kafka&${QueryParams.getStartedSourceService}=${MessagingQueueHealthCheckService.Kafka}`,
 										'Monitor kafka',
-										e,
 									)
 								}
 							>
@@ -161,8 +143,8 @@ function MessagingQueues(): JSX.Element {
 						<div className="button-grp">
 							<Button
 								type="default"
-								onClick={(e): void =>
-									redirectToDetailsPage(MessagingQueuesViewType.consumerLag.value, e)
+								onClick={(): void =>
+									redirectToDetailsPage(MessagingQueuesViewType.consumerLag.value)
 								}
 							>
 								{t('summarySection.viewDetailsButton')}
@@ -179,8 +161,8 @@ function MessagingQueues(): JSX.Element {
 						<div className="button-grp">
 							<Button
 								type="default"
-								onClick={(e): void =>
-									redirectToDetailsPage(MessagingQueuesViewType.producerLatency.value, e)
+								onClick={(): void =>
+									redirectToDetailsPage(MessagingQueuesViewType.producerLatency.value)
 								}
 							>
 								{t('summarySection.viewDetailsButton')}
@@ -197,11 +179,8 @@ function MessagingQueues(): JSX.Element {
 						<div className="button-grp">
 							<Button
 								type="default"
-								onClick={(e): void =>
-									redirectToDetailsPage(
-										MessagingQueuesViewType.partitionLatency.value,
-										e,
-									)
+								onClick={(): void =>
+									redirectToDetailsPage(MessagingQueuesViewType.partitionLatency.value)
 								}
 							>
 								{t('summarySection.viewDetailsButton')}
@@ -218,8 +197,8 @@ function MessagingQueues(): JSX.Element {
 						<div className="button-grp">
 							<Button
 								type="default"
-								onClick={(e): void =>
-									redirectToDetailsPage(MessagingQueuesViewType.dropRate.value, e)
+								onClick={(): void =>
+									redirectToDetailsPage(MessagingQueuesViewType.dropRate.value)
 								}
 							>
 								{t('summarySection.viewDetailsButton')}
@@ -236,8 +215,8 @@ function MessagingQueues(): JSX.Element {
 						<div className="button-grp">
 							<Button
 								type="default"
-								onClick={(e): void =>
-									redirectToDetailsPage(MessagingQueuesViewType.metricPage.value, e)
+								onClick={(): void =>
+									redirectToDetailsPage(MessagingQueuesViewType.metricPage.value)
 								}
 							>
 								{t('summarySection.viewDetailsButton')}

frontend/src/pages/Settings/Settings.tsx

@@ -16,7 +16,6 @@ import history from 'lib/history';
 import { Cog } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { USER_ROLES } from 'types/roles';
-import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { getRoutes } from './utils';
 
@@ -189,6 +188,12 @@ function SettingsPage(): JSX.Element {
 		],
 	);
 
+	const isCtrlMetaKey = (e: MouseEvent): boolean => e.ctrlKey || e.metaKey;
+
+	const openInNewTab = (path: string): void => {
+		window.open(path, '_blank');
+	};
+
 	const onClickHandler = useCallback(
 		(key: string, event: MouseEvent | null) => {
 			const params = new URLSearchParams(search);
@@ -197,7 +202,7 @@ function SettingsPage(): JSX.Element {
 			const queryString = getQueryString(availableParams || [], params);
 
 			if (pathname !== key) {
-				if (event && isModifierKeyPressed(event)) {
+				if (event && isCtrlMetaKey(event)) {
 					openInNewTab(`${key}?${queryString.join('&')}`);
 				} else {
 					history.push(`${key}?${queryString.join('&')}`, {

frontend/src/pages/WorkspaceLocked/WorkspaceLocked.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/no-unescaped-entities */
-import React, { useCallback, useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useMutation } from 'react-query';
 import type { TabsProps } from 'antd';
@@ -27,7 +27,6 @@ import { CircleArrowRight } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import APIError from 'types/api/error';
 import { LicensePlatform } from 'types/api/licensesV3/getActive';
-import { navigateToPage } from 'utils/navigation';
 import { getFormattedDate } from 'utils/timeUtils';
 
 import CustomerStoryCard from './CustomerStoryCard';
@@ -134,10 +133,10 @@ export default function WorkspaceBlocked(): JSX.Element {
 		});
 	};
 
-	const handleViewBilling = (e?: React.MouseEvent): void => {
+	const handleViewBilling = (): void => {
 		logEvent('Workspace Blocked: User Clicked View Billing', {});
 
-		navigateToPage(ROUTES.BILLING, history.push, e);
+		history.push(ROUTES.BILLING);
 	};
 
 	const renderCustomerStories = (
@@ -297,7 +296,7 @@ export default function WorkspaceBlocked(): JSX.Element {
 										type="link"
 										size="small"
 										role="button"
-										onClick={(e): void => handleViewBilling(e)}
+										onClick={handleViewBilling}
 									>
 										View Billing
 									</Button>

frontend/src/types/api/trace/getTraceFlamegraph.ts

@@ -5,6 +5,9 @@ export interface TraceDetailFlamegraphURLProps {
 export interface GetTraceFlamegraphPayloadProps {
 	traceId: string;
 	selectedSpanId: string;
+	limit: number;
+	boundaryStartTsMilli: number;
+	boundarEndTsMilli: number;
 }
 
 export interface Event {
@@ -31,4 +34,6 @@ export interface GetTraceFlamegraphSuccessResponse {
 	spans: FlamegraphSpan[][];
 	startTimestampMillis: number;
 	endTimestampMillis: number;
+	durationNano: number;
+	hasMore: boolean;
 }

frontend/src/utils/__tests__/navigation.test.ts

@@ -1,123 +0,0 @@
-import {
-	isModifierKeyPressed,
-	navigateToPage,
-	openInNewTab,
-} from '../navigation';
-
-describe('navigation utilities', () => {
-	const originalWindowOpen = window.open;
-
-	beforeEach(() => {
-		window.open = jest.fn();
-	});
-
-	afterEach(() => {
-		window.open = originalWindowOpen;
-	});
-
-	describe('isModifierKeyPressed', () => {
-		const createMouseEvent = (overrides: Partial<MouseEvent> = {}): MouseEvent =>
-			({
-				metaKey: false,
-				ctrlKey: false,
-				...overrides,
-			} as MouseEvent);
-
-		it('returns true when metaKey is pressed (Cmd on Mac)', () => {
-			const event = createMouseEvent({ metaKey: true });
-			expect(isModifierKeyPressed(event)).toBe(true);
-		});
-
-		it('returns true when ctrlKey is pressed (Ctrl on Windows/Linux)', () => {
-			const event = createMouseEvent({ ctrlKey: true });
-			expect(isModifierKeyPressed(event)).toBe(true);
-		});
-
-		it('returns true when both metaKey and ctrlKey are pressed', () => {
-			const event = createMouseEvent({ metaKey: true, ctrlKey: true });
-			expect(isModifierKeyPressed(event)).toBe(true);
-		});
-
-		it('returns false when neither modifier key is pressed', () => {
-			const event = createMouseEvent();
-			expect(isModifierKeyPressed(event)).toBe(false);
-		});
-
-		it('returns false when only shiftKey or altKey are pressed', () => {
-			const event = createMouseEvent({
-				shiftKey: true,
-				altKey: true,
-			} as Partial<MouseEvent>);
-			expect(isModifierKeyPressed(event)).toBe(false);
-		});
-	});
-
-	describe('openInNewTab', () => {
-		it('calls window.open with the given path and _blank target', () => {
-			openInNewTab('/dashboard');
-			expect(window.open).toHaveBeenCalledWith('/dashboard', '_blank');
-		});
-
-		it('handles full URLs', () => {
-			openInNewTab('https://example.com/page');
-			expect(window.open).toHaveBeenCalledWith(
-				'https://example.com/page',
-				'_blank',
-			);
-		});
-
-		it('handles paths with query strings', () => {
-			openInNewTab('/alerts?tab=AlertRules&relativeTime=30m');
-			expect(window.open).toHaveBeenCalledWith(
-				'/alerts?tab=AlertRules&relativeTime=30m',
-				'_blank',
-			);
-		});
-	});
-
-	describe('navigateToPage', () => {
-		const mockNavigate = jest.fn() as jest.MockedFunction<(path: string) => void>;
-
-		beforeEach(() => {
-			mockNavigate.mockClear();
-		});
-
-		it('opens new tab when metaKey is pressed', () => {
-			const event = { metaKey: true, ctrlKey: false } as MouseEvent;
-			navigateToPage('/services', mockNavigate, event);
-
-			expect(window.open).toHaveBeenCalledWith('/services', '_blank');
-			expect(mockNavigate).not.toHaveBeenCalled();
-		});
-
-		it('opens new tab when ctrlKey is pressed', () => {
-			const event = { metaKey: false, ctrlKey: true } as MouseEvent;
-			navigateToPage('/services', mockNavigate, event);
-
-			expect(window.open).toHaveBeenCalledWith('/services', '_blank');
-			expect(mockNavigate).not.toHaveBeenCalled();
-		});
-
-		it('calls navigate callback when no modifier key is pressed', () => {
-			const event = { metaKey: false, ctrlKey: false } as MouseEvent;
-			navigateToPage('/services', mockNavigate, event);
-
-			expect(mockNavigate).toHaveBeenCalledWith('/services');
-			expect(window.open).not.toHaveBeenCalled();
-		});
-
-		it('calls navigate callback when no event is provided', () => {
-			navigateToPage('/services', mockNavigate);
-
-			expect(mockNavigate).toHaveBeenCalledWith('/services');
-			expect(window.open).not.toHaveBeenCalled();
-		});
-
-		it('calls navigate callback when event is undefined', () => {
-			navigateToPage('/dashboard', mockNavigate, undefined);
-
-			expect(mockNavigate).toHaveBeenCalledWith('/dashboard');
-			expect(window.open).not.toHaveBeenCalled();
-		});
-	});
-});

frontend/src/utils/navigation.ts

@@ -1,37 +0,0 @@
-import React from 'react';
-
-/**
- * Returns true if the user is holding Cmd (Mac) or Ctrl (Windows/Linux)
- * during a click event — the universal "open in new tab" modifier.
- */
-export const isModifierKeyPressed = (
-	event: MouseEvent | React.MouseEvent,
-): boolean => event.metaKey || event.ctrlKey;
-
-/**
- * Opens the given path in a new browser tab.
- */
-export const openInNewTab = (path: string): void => {
-	window.open(path, '_blank');
-};
-
-/**
- * Navigates to a path, respecting modifier keys. If Cmd/Ctrl is held,
- * the path is opened in a new tab. Otherwise, the provided `navigate`
- * callback is invoked for SPA navigation.
- *
- * @param path - The target URL path
- * @param navigate - SPA navigation callback (e.g. history.push, safeNavigate)
- * @param event - Optional mouse event to check for modifier keys
- */
-export const navigateToPage = (
-	path: string,
-	navigate: (path: string) => void,
-	event?: MouseEvent | React.MouseEvent,
-): void => {
-	if (event && isModifierKeyPressed(event)) {
-		openInNewTab(path);
-	} else {
-		navigate(path);
-	}
-};

pkg/query-service/app/clickhouseReader/reader.go

@@ -1046,7 +1046,19 @@ func (r *ClickHouseReader) GetWaterfallSpansForTraceWithMetadata(ctx context.Con
 	}
 
 	processingPostCache := time.Now()
-	selectedSpans, uncollapsedSpans, rootServiceName, rootServiceEntryPoint := tracedetail.GetSelectedSpans(req.UncollapsedSpans, req.SelectedSpanID, traceRoots, spanIdToSpanNodeMap, req.IsSelectedSpanIDUnCollapsed)
+	limit := min(req.Limit, tracedetail.MaxLimitToSelectAllSpans)
+	selectAllSpans := totalSpans <= uint64(limit)
+
+	var (
+		selectedSpans                          []*model.Span
+		uncollapsedSpans                       []string
+		rootServiceName, rootServiceEntryPoint string
+	)
+	if selectAllSpans {
+		selectedSpans, rootServiceName, rootServiceEntryPoint = tracedetail.GetAllSpans(traceRoots)
+	} else {
+		selectedSpans, uncollapsedSpans, rootServiceName, rootServiceEntryPoint = tracedetail.GetSelectedSpans(req.UncollapsedSpans, req.SelectedSpanID, traceRoots, spanIdToSpanNodeMap, req.IsSelectedSpanIDUnCollapsed)
+	}
 	zap.L().Info("getWaterfallSpansForTraceWithMetadata: processing post cache", zap.Duration("duration", time.Since(processingPostCache)), zap.String("traceID", traceID))
 
 	// convert start timestamp to millis because right now frontend is expecting it in millis
@@ -1059,7 +1071,7 @@ func (r *ClickHouseReader) GetWaterfallSpansForTraceWithMetadata(ctx context.Con
 	}
 
 	response.Spans = selectedSpans
-	response.UncollapsedSpans = uncollapsedSpans
+	response.UncollapsedSpans = uncollapsedSpans // ignoring if all spans are returning
 	response.StartTimestampMillis = startTime / 1000000
 	response.EndTimestampMillis = endTime / 1000000
 	response.TotalSpansCount = totalSpans
@@ -1068,6 +1080,7 @@ func (r *ClickHouseReader) GetWaterfallSpansForTraceWithMetadata(ctx context.Con
 	response.RootServiceEntryPoint = rootServiceEntryPoint
 	response.ServiceNameToTotalDurationMap = serviceNameToTotalDurationMap
 	response.HasMissingSpans = hasMissingSpans
+	response.HasMore = !selectAllSpans
 	return response, nil
 }
 
@@ -1199,7 +1212,7 @@ func (r *ClickHouseReader) GetFlamegraphSpansForTrace(ctx context.Context, orgID
 			}
 		}
 
-		selectedSpans = tracedetail.GetSelectedSpansForFlamegraph(traceRoots, spanIdToSpanNodeMap)
+		selectedSpans = tracedetail.GetAllSpansForFlamegraph(traceRoots, spanIdToSpanNodeMap)
 		traceCache := model.GetFlamegraphSpansForTraceCache{
 			StartTime:     startTime,
 			EndTime:       endTime,
@@ -1216,12 +1229,20 @@ func (r *ClickHouseReader) GetFlamegraphSpansForTrace(ctx context.Context, orgID
 	}
 
 	processingPostCache := time.Now()
-	selectedSpansForRequest := tracedetail.GetSelectedSpansForFlamegraphForRequest(req.SelectedSpanID, selectedSpans, startTime, endTime)
-	zap.L().Info("getFlamegraphSpansForTrace: processing post cache", zap.Duration("duration", time.Since(processingPostCache)), zap.String("traceID", traceID))
+	selectedSpansForRequest := selectedSpans
+	limit := min(req.Limit, tracedetail.MaxLimitWithoutSampling)
+	totalSpanCount := tracedetail.GetTotalSpanCount(selectedSpans)
+	if totalSpanCount > uint64(limit) {
+		boundaryStart, boundaryEnd := utils.MilliToNano(req.BoundaryStartTS), utils.MilliToNano(req.BoundaryEndTS)
+		selectedSpansForRequest = tracedetail.GetSelectedSpansForFlamegraphForRequest(req.SelectedSpanID, selectedSpans, boundaryStart, boundaryEnd)
+	}
+	zap.L().Info("getFlamegraphSpansForTrace: processing post cache", zap.Duration("duration", time.Since(processingPostCache)), zap.String("traceID", traceID),
+		zap.Uint64("totalSpanCount", totalSpanCount))
 
 	trace.Spans = selectedSpansForRequest
 	trace.StartTimestampMillis = startTime / 1000000
 	trace.EndTimestampMillis = endTime / 1000000
+	trace.HasMore = totalSpanCount > uint64(limit)
 	return trace, nil
 }
 

pkg/query-service/app/traces/tracedetail/flamegraph.go

@@ -7,9 +7,11 @@ import (
 )
 
 var (
-	SPAN_LIMIT_PER_REQUEST_FOR_FLAMEGRAPH float64 = 50
-	SPAN_LIMIT_PER_LEVEL                  int     = 100
-	TIMESTAMP_SAMPLING_BUCKET_COUNT       int     = 50
+	flamegraphSpanLevelLimit      float64 = 50
+	flamegraphSpanLimitPerLevel   int     = 1000
+	flamegraphSamplingBucketCount int     = 500
+
+	MaxLimitWithoutSampling uint = 120_000
 )
 
 func ContainsFlamegraphSpan(slice []*model.FlamegraphSpan, item *model.FlamegraphSpan) bool {
@@ -52,7 +54,8 @@ func FindIndexForSelectedSpan(spans [][]*model.FlamegraphSpan, selectedSpanId st
 	return selectedSpanLevel
 }
 
-func GetSelectedSpansForFlamegraph(traceRoots []*model.FlamegraphSpan, spanIdToSpanNodeMap map[string]*model.FlamegraphSpan) [][]*model.FlamegraphSpan {
+// GetAllSpansForFlamegraph groups all spans as per their level
+func GetAllSpansForFlamegraph(traceRoots []*model.FlamegraphSpan, spanIdToSpanNodeMap map[string]*model.FlamegraphSpan) [][]*model.FlamegraphSpan {
 
 	var traceIdLevelledFlamegraph = map[string]map[int64][]*model.FlamegraphSpan{}
 	selectedSpans := [][]*model.FlamegraphSpan{}
@@ -100,7 +103,7 @@ func getLatencyAndTimestampBucketedSpans(spans []*model.FlamegraphSpan, selected
 	})
 
 	// pick the top 5 latency spans
-	for idx := range 5 {
+	for idx := range 100 {
 		sampledSpans = append(sampledSpans, spans[idx])
 	}
 
@@ -110,6 +113,7 @@ func getLatencyAndTimestampBucketedSpans(spans []*model.FlamegraphSpan, selected
 		for _idx, span := range spans {
 			if span.SpanID == selectedSpanID {
 				idx = _idx
+				break
 			}
 		}
 		if idx != -1 {
@@ -117,17 +121,17 @@ func getLatencyAndTimestampBucketedSpans(spans []*model.FlamegraphSpan, selected
 		}
 	}
 
-	bucketSize := (endTime - startTime) / uint64(TIMESTAMP_SAMPLING_BUCKET_COUNT)
+	bucketSize := (endTime - startTime) / uint64(flamegraphSamplingBucketCount)
 	if bucketSize == 0 {
 		bucketSize = 1
 	}
 
-	bucketedSpans := make([][]*model.FlamegraphSpan, 50)
+	bucketedSpans := make([][]*model.FlamegraphSpan, flamegraphSamplingBucketCount)
 
 	for _, span := range spans {
 		if span.TimeUnixNano >= startTime && span.TimeUnixNano <= endTime {
 			bucketIndex := int((span.TimeUnixNano - startTime) / bucketSize)
-			if bucketIndex >= 0 && bucketIndex < 50 {
+			if bucketIndex >= 0 && bucketIndex < flamegraphSamplingBucketCount {
 				bucketedSpans[bucketIndex] = append(bucketedSpans[bucketIndex], span)
 			}
 		}
@@ -156,8 +160,8 @@ func GetSelectedSpansForFlamegraphForRequest(selectedSpanID string, selectedSpan
 		selectedIndex = FindIndexForSelectedSpan(selectedSpans, selectedSpanID)
 	}
 
-	lowerLimit := selectedIndex - int(SPAN_LIMIT_PER_REQUEST_FOR_FLAMEGRAPH*0.4)
-	upperLimit := selectedIndex + int(SPAN_LIMIT_PER_REQUEST_FOR_FLAMEGRAPH*0.6)
+	lowerLimit := selectedIndex - int(flamegraphSpanLevelLimit*0.4)
+	upperLimit := selectedIndex + int(flamegraphSpanLevelLimit*0.6)
 
 	if lowerLimit < 0 {
 		upperLimit = upperLimit - lowerLimit
@@ -174,7 +178,7 @@ func GetSelectedSpansForFlamegraphForRequest(selectedSpanID string, selectedSpan
 	}
 
 	for i := lowerLimit; i < upperLimit; i++ {
-		if len(selectedSpans[i]) > SPAN_LIMIT_PER_LEVEL {
+		if len(selectedSpans[i]) > flamegraphSpanLimitPerLevel {
 			_spans := getLatencyAndTimestampBucketedSpans(selectedSpans[i], selectedSpanID, i == selectedIndex, startTime, endTime)
 			selectedSpansForRequest = append(selectedSpansForRequest, _spans)
 		} else {
@@ -184,3 +188,12 @@ func GetSelectedSpansForFlamegraphForRequest(selectedSpanID string, selectedSpan
 
 	return selectedSpansForRequest
 }
+
+func GetTotalSpanCount(spans [][]*model.FlamegraphSpan) uint64 {
+	levelCount := len(spans)
+	spanCount := uint64(0)
+	for i := range levelCount {
+		spanCount += uint64(len(spans[i]))
+	}
+	return spanCount
+}

pkg/query-service/app/traces/tracedetail/waterfall.go

@@ -9,6 +9,9 @@ import (
 
 var (
 	SPAN_LIMIT_PER_REQUEST_FOR_WATERFALL float64 = 500
+
+	maxDepthForSelectedSpanChildren int  = 5
+	MaxLimitToSelectAllSpans        uint = 10_000
 )
 
 type Interval struct {
@@ -88,8 +91,11 @@ func getPathFromRootToSelectedSpanId(node *model.Span, selectedSpanId string, un
 	return isPresentInSubtreeForTheNode, spansFromRootToNode
 }
 
-func traverseTrace(span *model.Span, uncollapsedSpans []string, level uint64, isPartOfPreOrder bool, hasSibling bool, selectedSpanId string) []*model.Span {
+func traverseTrace(span *model.Span, uncollapsedSpans []string, level uint64, isPartOfPreOrder bool, hasSibling bool, selectedSpanId string,
+	depthFromSelectedSpan int, isSelectedSpanIDUnCollapsed bool, selectAllSpan bool) ([]*model.Span, []string) {
+
 	preOrderTraversal := []*model.Span{}
+	autoExpandedSpans := []string{}
 
 	// sort the children to maintain the order across requests
 	sort.Slice(span.Children, func(i, j int) bool {
@@ -126,15 +132,40 @@ func traverseTrace(span *model.Span, uncollapsedSpans []string, level uint64, is
 		preOrderTraversal = append(preOrderTraversal, &nodeWithoutChildren)
 	}
 
+	nextDepthFromSelectedSpan := -1
+	if span.SpanID == selectedSpanId && isSelectedSpanIDUnCollapsed {
+		nextDepthFromSelectedSpan = 1
+	} else if depthFromSelectedSpan >= 1 && depthFromSelectedSpan < maxDepthForSelectedSpanChildren {
+		nextDepthFromSelectedSpan = depthFromSelectedSpan + 1
+	}
+
 	for index, child := range span.Children {
-		_childTraversal := traverseTrace(child, uncollapsedSpans, level+1, isPartOfPreOrder && slices.Contains(uncollapsedSpans, span.SpanID), index != (len(span.Children)-1), selectedSpanId)
+		// A child is included in the pre-order output if its parent is uncollapsed
+		// OR if the child falls within MAX_DEPTH_FOR_SELECTED_SPAN_CHILDREN levels
+		// below the selected span.
+		isChildWithinMaxDepth := nextDepthFromSelectedSpan >= 1
+		isAlreadyUncollapsed := slices.Contains(uncollapsedSpans, span.SpanID)
+		childIsPartOfPreOrder := isPartOfPreOrder && (isAlreadyUncollapsed || isChildWithinMaxDepth)
+		if selectAllSpan {
+			childIsPartOfPreOrder = true
+		}
+
+		if isPartOfPreOrder && isChildWithinMaxDepth && !isAlreadyUncollapsed {
+			if !slices.Contains(autoExpandedSpans, span.SpanID) {
+				autoExpandedSpans = append(autoExpandedSpans, span.SpanID)
+			}
+		}
+
+		_childTraversal, _autoExpanded := traverseTrace(child, uncollapsedSpans, level+1, childIsPartOfPreOrder, index != (len(span.Children)-1), selectedSpanId,
+			nextDepthFromSelectedSpan, isSelectedSpanIDUnCollapsed, selectAllSpan)
 		preOrderTraversal = append(preOrderTraversal, _childTraversal...)
+		autoExpandedSpans = append(autoExpandedSpans, _autoExpanded...)
 		nodeWithoutChildren.SubTreeNodeCount += child.SubTreeNodeCount + 1
 		span.SubTreeNodeCount += child.SubTreeNodeCount + 1
 	}
 
 	nodeWithoutChildren.SubTreeNodeCount += 1
-	return preOrderTraversal
+	return preOrderTraversal, autoExpandedSpans
 
 }
 
@@ -168,7 +199,13 @@ func GetSelectedSpans(uncollapsedSpans []string, selectedSpanID string, traceRoo
 			_, spansFromRootToNode := getPathFromRootToSelectedSpanId(rootNode, selectedSpanID, updatedUncollapsedSpans, isSelectedSpanIDUnCollapsed)
 			updatedUncollapsedSpans = append(updatedUncollapsedSpans, spansFromRootToNode...)
 
-			_preOrderTraversal := traverseTrace(rootNode, updatedUncollapsedSpans, 0, true, false, selectedSpanID)
+			_preOrderTraversal, _autoExpanded := traverseTrace(rootNode, updatedUncollapsedSpans, 0, true, false, selectedSpanID, -1, isSelectedSpanIDUnCollapsed, false)
+			// Merge auto-expanded spans into updatedUncollapsedSpans for returning in response
+			for _, spanID := range _autoExpanded {
+				if !slices.Contains(updatedUncollapsedSpans, spanID) {
+					updatedUncollapsedSpans = append(updatedUncollapsedSpans, spanID)
+				}
+			}
 			_selectedSpanIndex := findIndexForSelectedSpanFromPreOrder(_preOrderTraversal, selectedSpanID)
 
 			if _selectedSpanIndex != -1 {
@@ -212,3 +249,17 @@ func GetSelectedSpans(uncollapsedSpans []string, selectedSpanID string, traceRoo
 
 	return preOrderTraversal[startIndex:endIndex], updatedUncollapsedSpans, rootServiceName, rootServiceEntryPoint
 }
+
+func GetAllSpans(traceRoots []*model.Span) (spans []*model.Span, rootServiceName, rootEntryPoint string) {
+	for _, root := range traceRoots {
+		childSpans, _ := traverseTrace(root, nil, 0, true, false, "", -1, false, true)
+		spans = append(spans, childSpans...)
+		if rootServiceName == "" {
+			rootServiceName = root.ServiceName
+		}
+		if rootEntryPoint == "" {
+			rootEntryPoint = root.Name
+		}
+	}
+	return
+}

pkg/query-service/model/queryParams.go

@@ -333,10 +333,14 @@ type GetWaterfallSpansForTraceWithMetadataParams struct {
 	SelectedSpanID              string   `json:"selectedSpanId"`
 	IsSelectedSpanIDUnCollapsed bool     `json:"isSelectedSpanIDUnCollapsed"`
 	UncollapsedSpans            []string `json:"uncollapsedSpans"`
+	Limit                       uint     `json:"limit"`
 }
 
 type GetFlamegraphSpansForTraceParams struct {
-	SelectedSpanID string `json:"selectedSpanId"`
+	SelectedSpanID  string `json:"selectedSpanId"`
+	Limit           uint   `json:"limit"`
+	BoundaryStartTS uint64 `json:"boundaryStartTsMilli"`
+	BoundaryEndTS   uint64 `json:"boundarEndTsMilli"`
 }
 
 type SpanFilterParams struct {

pkg/query-service/model/response.go

@@ -329,6 +329,7 @@ type GetWaterfallSpansForTraceWithMetadataResponse struct {
 	HasMissingSpans               bool              `json:"hasMissingSpans"`
 	// this is needed for frontend and query service sync
 	UncollapsedSpans []string `json:"uncollapsedSpans"`
+	HasMore          bool     `json:"hasMore"`
 }
 
 type GetFlamegraphSpansForTraceResponse struct {
@@ -336,6 +337,7 @@ type GetFlamegraphSpansForTraceResponse struct {
 	EndTimestampMillis   uint64              `json:"endTimestampMillis"`
 	DurationNano         uint64              `json:"durationNano"`
 	Spans                [][]*FlamegraphSpan `json:"spans"`
+	HasMore              bool                `json:"hasMore"`
 }
 
 type OtelSpanRef struct {

pkg/query-service/utils/time.go

@@ -17,3 +17,7 @@ func Elapsed(funcName string, args map[string]interface{}) func() {
 		zap.L().Info("Elapsed time", zapFields...)
 	}
 }
+
+func MilliToNano(milliTS uint64) uint64 {
+	return milliTS * 1000_000
+}

pkg/signoz/provider.go

@@ -169,7 +169,6 @@ func NewSQLMigrationProviderFactories(
 		sqlmigration.NewAddAnonymousPublicDashboardTransactionFactory(sqlstore),
 		sqlmigration.NewAddRootUserFactory(sqlstore, sqlschema),
 		sqlmigration.NewAddUserEmailOrgIDIndexFactory(sqlstore, sqlschema),
-		sqlmigration.NewMigrateRulesV4ToV5Factory(sqlstore, telemetryStore),
 	)
 }
 

pkg/sqlmigration/066_migrate_rules_v4_to_v5_post_deprecation.go

@@ -1,209 +0,0 @@
-package sqlmigration
-
-import (
-	"context"
-	"database/sql"
-	"encoding/json"
-	"log/slog"
-
-	"github.com/SigNoz/signoz/pkg/factory"
-	"github.com/SigNoz/signoz/pkg/sqlstore"
-	"github.com/SigNoz/signoz/pkg/telemetrystore"
-	"github.com/SigNoz/signoz/pkg/transition"
-	"github.com/uptrace/bun"
-	"github.com/uptrace/bun/migrate"
-)
-
-type migrateRulesV4ToV5 struct {
-	store          sqlstore.SQLStore
-	telemetryStore telemetrystore.TelemetryStore
-	logger         *slog.Logger
-}
-
-func NewMigrateRulesV4ToV5Factory(
-	store sqlstore.SQLStore,
-	telemetryStore telemetrystore.TelemetryStore,
-) factory.ProviderFactory[SQLMigration, Config] {
-	return factory.NewProviderFactory(
-		factory.MustNewName("migrate_rules_post_deprecation"),
-		func(ctx context.Context, ps factory.ProviderSettings, c Config) (SQLMigration, error) {
-			return &migrateRulesV4ToV5{
-				store:          store,
-				telemetryStore: telemetryStore,
-				logger:         ps.Logger,
-			}, nil
-		})
-}
-
-func (migration *migrateRulesV4ToV5) Register(migrations *migrate.Migrations) error {
-	if err := migrations.Register(migration.Up, migration.Down); err != nil {
-		return err
-	}
-	return nil
-}
-
-func (migration *migrateRulesV4ToV5) getLogDuplicateKeys(ctx context.Context) ([]string, error) {
-	query := `
-		SELECT name
-		FROM (
-			SELECT DISTINCT name FROM signoz_logs.distributed_logs_attribute_keys
-			INTERSECT
-			SELECT DISTINCT name FROM signoz_logs.distributed_logs_resource_keys
-		)
-		ORDER BY name
-	`
-
-	rows, err := migration.telemetryStore.ClickhouseDB().Query(ctx, query)
-	if err != nil {
-		migration.logger.WarnContext(ctx, "failed to query log duplicate keys", "error", err)
-		return nil, nil
-	}
-	defer rows.Close()
-
-	var keys []string
-	for rows.Next() {
-		var key string
-		if err := rows.Scan(&key); err != nil {
-			migration.logger.WarnContext(ctx, "failed to scan log duplicate key", "error", err)
-			continue
-		}
-		keys = append(keys, key)
-	}
-
-	return keys, nil
-}
-
-func (migration *migrateRulesV4ToV5) getTraceDuplicateKeys(ctx context.Context) ([]string, error) {
-	query := `
-		SELECT tagKey
-		FROM signoz_traces.distributed_span_attributes_keys
-		WHERE tagType IN ('tag', 'resource')
-		GROUP BY tagKey
-		HAVING COUNT(DISTINCT tagType) > 1
-		ORDER BY tagKey
-	`
-
-	rows, err := migration.telemetryStore.ClickhouseDB().Query(ctx, query)
-	if err != nil {
-		migration.logger.WarnContext(ctx, "failed to query trace duplicate keys", "error", err)
-		return nil, nil
-	}
-	defer rows.Close()
-
-	var keys []string
-	for rows.Next() {
-		var key string
-		if err := rows.Scan(&key); err != nil {
-			migration.logger.WarnContext(ctx, "failed to scan trace duplicate key", "error", err)
-			continue
-		}
-		keys = append(keys, key)
-	}
-
-	return keys, nil
-}
-
-func (migration *migrateRulesV4ToV5) Up(ctx context.Context, db *bun.DB) error {
-	logsKeys, err := migration.getLogDuplicateKeys(ctx)
-	if err != nil {
-		return err
-	}
-
-	tracesKeys, err := migration.getTraceDuplicateKeys(ctx)
-	if err != nil {
-		return err
-	}
-
-	tx, err := db.BeginTx(ctx, nil)
-	if err != nil {
-		return err
-	}
-
-	defer func() {
-		_ = tx.Rollback()
-	}()
-
-	var rules []struct {
-		ID   string         `bun:"id"`
-		Data map[string]any `bun:"data"`
-	}
-
-	err = tx.NewSelect().
-		Table("rule").
-		Column("id", "data").
-		Scan(ctx, &rules)
-	if err != nil {
-		if err == sql.ErrNoRows {
-			return nil
-		}
-		return err
-	}
-
-	alertsMigrator := transition.NewAlertMigrateV5(migration.logger, logsKeys, tracesKeys)
-
-	count := 0
-
-	for _, rule := range rules {
-		version, _ := rule.Data["version"].(string)
-
-		if version == "v5" {
-			continue
-		}
-
-		if version == "" {
-			migration.logger.WarnContext(ctx, "unexpected empty version for rule", "rule_id", rule.ID)
-		}
-
-		migration.logger.InfoContext(ctx, "migrating rule v4 to v5", "rule_id", rule.ID, "current_version", version)
-
-		// Check if the queries envelope already exists and is non-empty
-		hasQueriesEnvelope := false
-		if condition, ok := rule.Data["condition"].(map[string]any); ok {
-			if compositeQuery, ok := condition["compositeQuery"].(map[string]any); ok {
-				if queries, ok := compositeQuery["queries"].([]any); ok && len(queries) > 0 {
-					hasQueriesEnvelope = true
-				}
-			}
-		}
-
-		if hasQueriesEnvelope {
-			// already has queries envelope, just bump version
-			// this is because user made a mistake of choosing version
-			migration.logger.InfoContext(ctx, "rule already has queries envelope, bumping version", "rule_id", rule.ID)
-			rule.Data["version"] = "v5"
-		} else {
-			// old format, run full migration
-			migration.logger.InfoContext(ctx, "rule has old format, running full migration", "rule_id", rule.ID)
-			updated := alertsMigrator.Migrate(ctx, rule.Data)
-			if !updated {
-				migration.logger.WarnContext(ctx, "expected updated to be true but got false", "rule_id", rule.ID)
-				continue
-			}
-			rule.Data["version"] = "v5"
-		}
-
-		dataJSON, err := json.Marshal(rule.Data)
-		if err != nil {
-			return err
-		}
-
-		_, err = tx.NewUpdate().
-			Table("rule").
-			Set("data = ?", string(dataJSON)).
-			Where("id = ?", rule.ID).
-			Exec(ctx)
-		if err != nil {
-			return err
-		}
-		count++
-	}
-	if count != 0 {
-		migration.logger.InfoContext(ctx, "migrate v4 alerts", "count", count)
-	}
-
-	return tx.Commit()
-}
-
-func (migration *migrateRulesV4ToV5) Down(ctx context.Context, db *bun.DB) error {
-	return nil
-}

pkg/types/ruletypes/api_params.go

@@ -355,10 +355,6 @@ func (r *PostableRule) validate() error {
 		errs = append(errs, signozError.NewInvalidInputf(signozError.CodeInvalidInput, "composite query is required"))
 	}
 
-	if r.Version != "v5" {
-		errs = append(errs, signozError.NewInvalidInputf(signozError.CodeInvalidInput, "only version v5 is supported, got %q", r.Version))
-	}
-
 	if isAllQueriesDisabled(r.RuleCondition.CompositeQuery) {
 		errs = append(errs, signozError.NewInvalidInputf(signozError.CodeInvalidInput, "all queries are disabled in rule condition"))
 	}

pkg/types/ruletypes/api_params_test.go

@@ -108,7 +108,6 @@ func TestParseIntoRule(t *testing.T) {
 				"ruleType": "threshold_rule",
 				"evalWindow": "5m",
 				"frequency": "1m",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",
@@ -151,7 +150,6 @@ func TestParseIntoRule(t *testing.T) {
 			content: []byte(`{
 				"alert": "DefaultsRule",
 				"ruleType": "threshold_rule",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",
@@ -189,7 +187,6 @@ func TestParseIntoRule(t *testing.T) {
 			initRule: PostableRule{},
 			content: []byte(`{
 				"alert": "PromQLRule",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "promql",
@@ -259,7 +256,6 @@ func TestParseIntoRuleSchemaVersioning(t *testing.T) {
 			content: []byte(`{
 				"alert": "SeverityLabelTest",
 				"schemaVersion": "v1",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",
@@ -348,7 +344,6 @@ func TestParseIntoRuleSchemaVersioning(t *testing.T) {
 			content: []byte(`{
 				"alert": "NoLabelsTest",
 				"schemaVersion": "v1",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",
@@ -389,7 +384,6 @@ func TestParseIntoRuleSchemaVersioning(t *testing.T) {
 			content: []byte(`{
 				"alert": "OverwriteTest",
 				"schemaVersion": "v1",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",
@@ -480,7 +474,6 @@ func TestParseIntoRuleSchemaVersioning(t *testing.T) {
 			content: []byte(`{
 				"alert": "V2Test",
 				"schemaVersion": "v2",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",
@@ -524,7 +517,6 @@ func TestParseIntoRuleSchemaVersioning(t *testing.T) {
 			initRule: PostableRule{},
 			content: []byte(`{
 				"alert": "DefaultSchemaTest",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",
@@ -577,7 +569,6 @@ func TestParseIntoRuleSchemaVersioning(t *testing.T) {
 func TestParseIntoRuleThresholdGeneration(t *testing.T) {
 	content := []byte(`{
 		"alert": "TestThresholds",
-		"version": "v5",
 		"condition": {
 			"compositeQuery": {
 				"queryType": "builder",
@@ -648,7 +639,6 @@ func TestParseIntoRuleMultipleThresholds(t *testing.T) {
 		"schemaVersion": "v2",
 		"alert": "MultiThresholdAlert",
 		"ruleType": "threshold_rule",
-		"version": "v5",
 		"condition": {
 			"compositeQuery": {
 				"queryType": "builder",
@@ -742,7 +732,6 @@ func TestAnomalyNegationEval(t *testing.T) {
 			ruleJSON: []byte(`{
 				"alert": "AnomalyBelowTest",
 				"ruleType": "anomaly_rule",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",
@@ -777,7 +766,6 @@ func TestAnomalyNegationEval(t *testing.T) {
 			ruleJSON: []byte(`{
 				"alert": "AnomalyBelowTest",
 				"ruleType": "anomaly_rule",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",
@@ -811,7 +799,6 @@ func TestAnomalyNegationEval(t *testing.T) {
 			ruleJSON: []byte(`{
 				"alert": "AnomalyAboveTest",
 				"ruleType": "anomaly_rule",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",
@@ -846,7 +833,6 @@ func TestAnomalyNegationEval(t *testing.T) {
 			ruleJSON: []byte(`{
 				"alert": "AnomalyAboveTest",
 				"ruleType": "anomaly_rule",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",
@@ -880,7 +866,6 @@ func TestAnomalyNegationEval(t *testing.T) {
 			ruleJSON: []byte(`{
 				"alert": "AnomalyBelowAllTest",
 				"ruleType": "anomaly_rule",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",
@@ -916,7 +901,6 @@ func TestAnomalyNegationEval(t *testing.T) {
 			ruleJSON: []byte(`{
 				"alert": "AnomalyBelowAllTest",
 				"ruleType": "anomaly_rule",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",
@@ -951,7 +935,6 @@ func TestAnomalyNegationEval(t *testing.T) {
 			ruleJSON: []byte(`{
 				"alert": "AnomalyOutOfBoundsTest",
 				"ruleType": "anomaly_rule",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",
@@ -986,7 +969,6 @@ func TestAnomalyNegationEval(t *testing.T) {
 			ruleJSON: []byte(`{
 				"alert": "ThresholdTest",
 				"ruleType": "threshold_rule",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",
@@ -1021,7 +1003,6 @@ func TestAnomalyNegationEval(t *testing.T) {
 			ruleJSON: []byte(`{
 				"alert": "ThresholdTest",
 				"ruleType": "threshold_rule",
-				"version": "v5",
 				"condition": {
 					"compositeQuery": {
 						"queryType": "builder",