chore: rename vars

* fix: make histogramQuantile function work for devenv setup

* fix: make histogramQuantile function work for integration tests

* test: histogram percentile integration tests

* chore: explicitly mention user_scripts_path

* chore: fail tests if download of UDF fails

.devenv/docker/clickhouse/compose.yaml

@@ -1,4 +1,22 @@
 services:
+  init-clickhouse:
+    image: clickhouse/clickhouse-server:25.5.6
+    container_name: init-clickhouse
+    command:
+      - bash
+      - -c
+      - |
+        version="v0.0.1"
+        node_os=$$(uname -s | tr '[:upper:]' '[:lower:]')
+        node_arch=$$(uname -m | sed s/aarch64/arm64/ | sed s/x86_64/amd64/)
+        echo "Fetching histogram-binary for $${node_os}/$${node_arch}"
+        cd /tmp
+        wget -O histogram-quantile.tar.gz "https://github.com/SigNoz/signoz/releases/download/histogram-quantile%2F$${version}/histogram-quantile_$${node_os}_$${node_arch}.tar.gz"
+        tar -xvzf histogram-quantile.tar.gz
+        mv histogram-quantile /var/lib/clickhouse/user_scripts/histogramQuantile
+    restart: on-failure
+    volumes:
+      - ${PWD}/fs/tmp/var/lib/clickhouse/user_scripts/:/var/lib/clickhouse/user_scripts/
   clickhouse:
     image: clickhouse/clickhouse-server:25.5.6
     container_name: clickhouse
@@ -7,6 +25,7 @@ services:
       - ${PWD}/fs/etc/clickhouse-server/users.d/users.xml:/etc/clickhouse-server/users.d/users.xml
       - ${PWD}/fs/tmp/var/lib/clickhouse/:/var/lib/clickhouse/
       - ${PWD}/fs/tmp/var/lib/clickhouse/user_scripts/:/var/lib/clickhouse/user_scripts/
+      - ${PWD}/../../../deploy/common/clickhouse/custom-function.xml:/etc/clickhouse-server/custom-function.xml
     ports:
       - '127.0.0.1:8123:8123'
       - '127.0.0.1:9000:9000'
@@ -22,7 +41,10 @@ services:
       timeout: 5s
       retries: 3
     depends_on:
-      - zookeeper
+      init-clickhouse:
+        condition: service_completed_successfully
+      zookeeper:
+        condition: service_healthy
     environment:
       - CLICKHOUSE_SKIP_USER_SETUP=1
   zookeeper:

.devenv/docker/clickhouse/fs/etc/clickhouse-server/config.d/config.xml

@@ -44,4 +44,6 @@
         <shard>01</shard>
         <replica>01</replica>
     </macros>
+    <user_defined_executable_functions_config>*function.xml</user_defined_executable_functions_config>
+    <user_scripts_path>/var/lib/clickhouse/user_scripts/</user_scripts_path>
 </clickhouse>

deploy/docker-swarm/docker-compose.ha.yaml

@@ -190,7 +190,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.114.1
+    image: signoz/signoz:v0.115.0
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port

deploy/docker-swarm/docker-compose.yaml

@@ -117,7 +117,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.114.1
+    image: signoz/signoz:v0.115.0
     ports:
       - "8080:8080" # signoz port
     volumes:

deploy/docker/docker-compose.ha.yaml

@@ -181,7 +181,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.114.1}
+    image: signoz/signoz:${VERSION:-v0.115.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

deploy/docker/docker-compose.yaml

@@ -109,7 +109,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.114.1}
+    image: signoz/signoz:${VERSION:-v0.115.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

frontend/src/AppRoutes/Private.tsx

@@ -1,6 +1,6 @@
 import { ReactChild, useCallback, useEffect, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
-import { matchPath, useLocation } from 'react-router-dom';
+import { matchPath, Redirect, useLocation } from 'react-router-dom';
 import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
 import getAll from 'api/v1/user/get';
@@ -236,13 +236,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 	useEffect(() => {
 		// if it is an old route navigate to the new route
 		if (isOldRoute) {
-			const redirectUrl = oldNewRoutesMapping[pathname];
-
-			const newLocation = {
-				...location,
-				pathname: redirectUrl,
-			};
-			history.replace(newLocation);
+			// this will be handled by the redirect component below
 			return;
 		}
 
@@ -296,6 +290,19 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		}
 	}, [isLoggedInState, pathname, user, isOldRoute, currentRoute, location]);
 
+	if (isOldRoute) {
+		const redirectUrl = oldNewRoutesMapping[pathname];
+		return (
+			<Redirect
+				to={{
+					pathname: redirectUrl,
+					search: location.search,
+					hash: location.hash,
+				}}
+			/>
+		);
+	}
+
 	// NOTE: disabling this rule as there is no need to have div
 	return <>{children}</>;
 }

frontend/src/components/CustomTimePicker/CustomTimePicker.styles.scss

@@ -1,6 +1,31 @@
 .custom-time-picker {
 	display: flex;
-	flex-direction: column;
+	flex-direction: row;
+	align-items: center;
+	gap: 4px;
+
+	.zoom-out-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		color: var(--foreground);
+		border: 1px solid var(--border);
+		border-radius: 2px;
+		box-shadow: none;
+		padding: 10px;
+		height: 33px;
+
+		&:hover:not(:disabled) {
+			color: var(--bg-vanilla-100);
+			background: var(--primary);
+		}
+
+		&:disabled {
+			opacity: 0.5;
+			cursor: not-allowed;
+		}
+	}
 
 	.timeSelection-input {
 		&:hover {

frontend/src/components/CustomTimePicker/CustomTimePicker.test.tsx

@@ -16,6 +16,15 @@ jest.mock('react-router-dom', () => {
 	};
 });
 
+jest.mock('react-redux', () => ({
+	...jest.requireActual('react-redux'),
+	useDispatch: jest.fn(() => jest.fn()),
+	useSelector: jest.fn(() => ({
+		minTime: 0,
+		maxTime: Date.now(),
+	})),
+}));
+
 jest.mock('providers/Timezone', () => {
 	const actual = jest.requireActual('providers/Timezone');
 

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -7,9 +7,11 @@ import {
 	useState,
 } from 'react';
 import { useLocation } from 'react-router-dom';
+import { Button } from '@signozhq/button';
 import { Input, InputRef, Popover, Tooltip } from 'antd';
 import cx from 'classnames';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import { QueryParams } from 'constants/query';
 import { DateTimeRangeType } from 'container/TopNav/CustomDateTimeModal';
 import {
 	FixedDurationSuggestionOptions,
@@ -17,9 +19,11 @@ import {
 	RelativeDurationSuggestionOptions,
 } from 'container/TopNav/DateTimeSelectionV2/constants';
 import dayjs from 'dayjs';
+import { useZoomOut } from 'hooks/useZoomOut';
 import { isValidShortHandDateTimeFormat } from 'lib/getMinMax';
+import { isZoomOutDisabled } from 'lib/zoomOutUtils';
 import { defaultTo, isFunction, noop } from 'lodash-es';
-import { ChevronDown, ChevronUp } from 'lucide-react';
+import { ChevronDown, ChevronUp, ZoomOut } from 'lucide-react';
 import { useTimezone } from 'providers/Timezone';
 import { getTimeDifference, validateEpochRange } from 'utils/epochUtils';
 import { popupContainer } from 'utils/selectPopupContainer';
@@ -66,6 +70,8 @@ interface CustomTimePickerProps {
 	showRecentlyUsed?: boolean;
 	minTime: number;
 	maxTime: number;
+	/** When true, zoom-out button is hidden (e.g. in drawer/modal time selection) */
+	isModalTimeSelection?: boolean;
 }
 
 function CustomTimePicker({
@@ -88,6 +94,7 @@ function CustomTimePicker({
 	showRecentlyUsed = true,
 	minTime,
 	maxTime,
+	isModalTimeSelection = false,
 }: CustomTimePickerProps): JSX.Element {
 	const [
 		selectedTimePlaceholderValue,
@@ -116,6 +123,14 @@ function CustomTimePicker({
 
 	const [isOpenedFromFooter, setIsOpenedFromFooter] = useState(false);
 
+	const durationMs = (maxTime - minTime) / 1e6;
+	const zoomOutDisabled = showLiveLogs || isZoomOutDisabled(durationMs);
+
+	const handleZoomOut = useZoomOut({
+		isDisabled: zoomOutDisabled,
+		urlParamsToDelete: [QueryParams.activeLogId],
+	});
+
 	// function to get selected time in Last 1m, Last 2h, Last 3d, Last 4w format
 	// 1m, 2h, 3d, 4w -> Last 1 minute, Last 2 hours, Last 3 days, Last 4 weeks
 	const getSelectedTimeRangeLabelInRelativeFormat = (
@@ -631,6 +646,23 @@ function CustomTimePicker({
 					/>
 				</Popover>
 			</Tooltip>
+			{!showLiveLogs && !isModalTimeSelection && (
+				<Tooltip
+					title={
+						zoomOutDisabled ? 'Zoom out time range is limited to 1 month' : 'Zoom out'
+					}
+				>
+					<span>
+						<Button
+							className="zoom-out-btn"
+							onClick={handleZoomOut}
+							disabled={zoomOutDisabled}
+							data-testid="zoom-out-btn"
+							prefixIcon={<ZoomOut size={14} />}
+						/>
+					</span>
+				</Tooltip>
+			)}
 		</div>
 	);
 }

frontend/src/components/CustomTimePicker/__tests__/customTimePickerZoomOut.test.tsx

@@ -0,0 +1,169 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { QueryParams } from 'constants/query';
+import { GlobalReducer } from 'types/reducer/globalTime';
+
+import CustomTimePicker from '../CustomTimePicker';
+
+const MS_PER_MIN = 60 * 1000;
+const NOW_MS = 1705312800000;
+
+const mockDispatch = jest.fn();
+const mockSafeNavigate = jest.fn();
+const mockUrlQueryDelete = jest.fn();
+const mockUrlQuerySet = jest.fn();
+
+interface MockAppState {
+	globalTime: Pick<GlobalReducer, 'minTime' | 'maxTime'>;
+}
+
+jest.mock('react-redux', () => ({
+	useDispatch: (): jest.Mock => mockDispatch,
+	useSelector: (selector: (state: MockAppState) => unknown): unknown => {
+		const mockState: MockAppState = {
+			globalTime: {
+				minTime: (NOW_MS - 15 * MS_PER_MIN) * 1e6,
+				maxTime: NOW_MS * 1e6,
+			},
+		};
+		return selector(mockState);
+	},
+}));
+
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): { safeNavigate: jest.Mock } => ({
+		safeNavigate: mockSafeNavigate,
+	}),
+}));
+
+interface MockUrlQuery {
+	delete: typeof mockUrlQueryDelete;
+	set: typeof mockUrlQuerySet;
+	get: () => null;
+	toString: () => string;
+}
+
+jest.mock('hooks/useUrlQuery', () => ({
+	__esModule: true,
+	default: (): MockUrlQuery => ({
+		delete: mockUrlQueryDelete,
+		set: mockUrlQuerySet,
+		get: (): null => null,
+		toString: (): string => 'relativeTime=45m',
+	}),
+}));
+
+jest.mock('providers/Timezone', () => ({
+	useTimezone: (): { timezone: { value: string; offset: string } } => ({
+		timezone: { value: 'UTC', offset: 'UTC' },
+	}),
+}));
+
+jest.mock('react-router-dom', () => ({
+	useLocation: (): { pathname: string } => ({ pathname: '/logs-explorer' }),
+}));
+
+const MS_PER_DAY = 24 * 60 * 60 * 1000;
+const now = Date.now();
+const defaultProps = {
+	onSelect: jest.fn(),
+	onError: jest.fn(),
+	selectedValue: '15m',
+	selectedTime: '15m',
+	onValidCustomDateChange: jest.fn(),
+	open: false,
+	setOpen: jest.fn(),
+	items: [
+		{ value: '15m', label: 'Last 15 minutes' },
+		{ value: '1h', label: 'Last 1 hour' },
+	],
+	minTime: (now - 15 * 60 * 1000) * 1e6,
+	maxTime: now * 1e6,
+};
+
+describe('CustomTimePicker - zoom out button', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		jest.spyOn(Date, 'now').mockReturnValue(NOW_MS);
+	});
+
+	afterEach(() => {
+		jest.restoreAllMocks();
+	});
+
+	it('should render zoom out button when showLiveLogs is false', () => {
+		render(<CustomTimePicker {...defaultProps} showLiveLogs={false} />);
+
+		expect(screen.getByTestId('zoom-out-btn')).toBeInTheDocument();
+	});
+
+	it('should not render zoom out button when showLiveLogs is true', () => {
+		render(<CustomTimePicker {...defaultProps} showLiveLogs={true} />);
+
+		expect(screen.queryByTestId('zoom-out-btn')).not.toBeInTheDocument();
+	});
+
+	it('should not render zoom out button when isModalTimeSelection is true', () => {
+		render(
+			<CustomTimePicker
+				{...defaultProps}
+				showLiveLogs={false}
+				isModalTimeSelection={true}
+			/>,
+		);
+
+		expect(screen.queryByTestId('zoom-out-btn')).not.toBeInTheDocument();
+	});
+
+	it('should call handleZoomOut when zoom out button is clicked', async () => {
+		render(<CustomTimePicker {...defaultProps} showLiveLogs={false} />);
+
+		const zoomOutBtn = screen.getByTestId('zoom-out-btn');
+		await userEvent.click(zoomOutBtn);
+
+		expect(mockDispatch).toHaveBeenCalled();
+		expect(mockUrlQuerySet).toHaveBeenCalledWith(QueryParams.relativeTime, '45m');
+		expect(mockSafeNavigate).toHaveBeenCalledWith(
+			expect.stringMatching(/\/logs-explorer\?relativeTime=45m/),
+		);
+	});
+
+	it('should use real ladder logic: 15m range zooms to 45m preset and updates URL', async () => {
+		render(<CustomTimePicker {...defaultProps} showLiveLogs={false} />);
+
+		const zoomOutBtn = screen.getByTestId('zoom-out-btn');
+		await userEvent.click(zoomOutBtn);
+
+		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.startTime);
+		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.endTime);
+		expect(mockUrlQuerySet).toHaveBeenCalledWith(QueryParams.relativeTime, '45m');
+		expect(mockSafeNavigate).toHaveBeenCalledWith(
+			expect.stringMatching(/\/logs-explorer\?relativeTime=45m/),
+		);
+		expect(mockDispatch).toHaveBeenCalled();
+	});
+
+	it('should delete activeLogId when zoom out is clicked', async () => {
+		render(<CustomTimePicker {...defaultProps} showLiveLogs={false} />);
+
+		const zoomOutBtn = screen.getByTestId('zoom-out-btn');
+		await userEvent.click(zoomOutBtn);
+
+		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.activeLogId);
+	});
+
+	it('should disable zoom button when time range is >= 1 month', () => {
+		const now = Date.now();
+		render(
+			<CustomTimePicker
+				{...defaultProps}
+				minTime={(now - 31 * MS_PER_DAY) * 1e6}
+				maxTime={now * 1e6}
+				showLiveLogs={false}
+			/>,
+		);
+
+		const zoomOutBtn = screen.getByTestId('zoom-out-btn');
+		expect(zoomOutBtn).toBeDisabled();
+	});
+});

frontend/src/components/TimelineV3/TimelineV3.styles.scss

@@ -1,4 +0,0 @@
-.timeline-v3-container {
-	// flex: 1;
-	overflow: visible;
-}

frontend/src/components/TimelineV3/TimelineV3.tsx

@@ -1,87 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useMeasure } from 'react-use';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-
-import {
-	getIntervals,
-	getMinimumIntervalsBasedOnWidth,
-	Interval,
-} from './utils';
-
-import './TimelineV3.styles.scss';
-
-interface ITimelineV3Props {
-	startTimestamp: number;
-	endTimestamp: number;
-	timelineHeight: number;
-	offsetTimestamp: number;
-}
-
-function TimelineV3(props: ITimelineV3Props): JSX.Element {
-	const {
-		startTimestamp,
-		endTimestamp,
-		timelineHeight,
-		offsetTimestamp,
-	} = props;
-	const [intervals, setIntervals] = useState<Interval[]>([]);
-	const [ref, { width }] = useMeasure<HTMLDivElement>();
-	const isDarkMode = useIsDarkMode();
-
-	useEffect(() => {
-		const spread = endTimestamp - startTimestamp;
-		if (spread < 0) {
-			return;
-		}
-
-		const minIntervals = getMinimumIntervalsBasedOnWidth(width);
-		const intervalisedSpread = (spread / minIntervals) * 1.0;
-		const intervals = getIntervals(intervalisedSpread, spread, offsetTimestamp);
-
-		setIntervals(intervals);
-	}, [startTimestamp, endTimestamp, width, offsetTimestamp]);
-
-	if (endTimestamp < startTimestamp) {
-		console.error(
-			'endTimestamp cannot be less than startTimestamp',
-			startTimestamp,
-			endTimestamp,
-		);
-		return <div />;
-	}
-
-	const strokeColor = isDarkMode ? ' rgb(192,193,195,0.8)' : 'black';
-
-	return (
-		<div ref={ref as never} className="timeline-v3-container">
-			<svg
-				width={width}
-				height={timelineHeight * 2.5}
-				xmlns="http://www.w3.org/2000/svg"
-				overflow="visible"
-			>
-				{intervals &&
-					intervals.length > 0 &&
-					intervals.map((interval, index) => (
-						<g
-							transform={`translate(${(interval.percentage * width) / 100},0)`}
-							key={`${interval.percentage + interval.label + index}`}
-							textAnchor="middle"
-							fontSize="0.6rem"
-						>
-							<text
-								x={index === intervals.length - 1 ? -10 : 0}
-								y={timelineHeight * 2}
-								fill={strokeColor}
-							>
-								{interval.label}
-							</text>
-							<line y1={0} y2={timelineHeight} stroke={strokeColor} strokeWidth="1" />
-						</g>
-					))}
-			</svg>
-		</div>
-	);
-}
-
-export default TimelineV3;

frontend/src/components/TimelineV3/utils.ts

@@ -1,93 +0,0 @@
-import {
-	IIntervalUnit,
-	Interval,
-	INTERVAL_UNITS,
-	resolveTimeFromInterval,
-} from 'components/TimelineV2/utils';
-import { toFixed } from 'utils/toFixed';
-
-export type { Interval };
-
-/** Fewer intervals than TimelineV2 for a cleaner flamegraph ruler. */
-export function getMinimumIntervalsBasedOnWidth(width: number): number {
-	if (width < 640) {
-		return 3;
-	}
-	if (width < 768) {
-		return 4;
-	}
-	if (width < 1024) {
-		return 5;
-	}
-	return 6;
-}
-
-/**
- * Computes timeline intervals with offset-aware labels.
- * Labels reflect absolute time from trace start (offsetTimestamp + elapsed),
- * so when zoomed into a window, the first tick shows e.g. "50ms" not "0ms".
- */
-export function getIntervals(
-	intervalSpread: number,
-	baseSpread: number,
-	offsetTimestamp: number,
-): 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);
-
-	// Unit must suit both: (1) tick granularity (intervalSpread) and (2) label magnitude
-	// (offsetTimestamp). When zoomed deep into a trace, labels show offsetTimestamp + elapsed,
-	// so we must pick a unit where that value is readable (e.g. "500.00s" not "500000.00ms").
-	const valueForUnitSelection = Math.max(offsetTimestamp, intervalSpread);
-	let intervalUnit: IIntervalUnit = INTERVAL_UNITS[0];
-	for (let idx = INTERVAL_UNITS.length - 1; idx >= 0; idx -= 1) {
-		const standardInterval = INTERVAL_UNITS[idx];
-		if (valueForUnitSelection * standardInterval.multiplier >= 1) {
-			intervalUnit = INTERVAL_UNITS[idx];
-			break;
-		}
-	}
-
-	const intervals: Interval[] = [
-		{
-			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;
-		const labelTime = offsetTimestamp + intervalTime;
-
-		intervals.push({
-			label: `${toFixed(resolveTimeFromInterval(labelTime, intervalUnit), 2)}${
-				intervalUnit.name
-			}`,
-			percentage: (intervalTime / baseSpread) * 100,
-		});
-	}
-
-	return intervals;
-}

frontend/src/constants/theme.ts

@@ -33,125 +33,6 @@ const themeColors = {
 		purple: '#800080',
 		cyan: '#00FFFF',
 	},
-	traceDetailColorsV3: {
-		// Blues
-		dodgerBlue: '#2F80ED',
-		royalBlue: '#3366E6',
-		steelBlue: '#4682B4',
-
-		// Teals / Cyans
-		turquoise: '#00CEC9',
-		lagoon: '#1ABC9C',
-		cyanBright: '#22A6F2',
-
-		// Greens
-		emeraldGreen: '#27AE60',
-		mediumSeaGreen: '#3CB371',
-		limeGreen: '#A3E635',
-
-		// Yellows / Golds
-		festivalYellow: '#F2C94C',
-		sunflower: '#FFD93D',
-		warmAmber: '#FFCA28',
-
-		// Purples / Violets
-		mediumPurple: '#BB6BD9',
-		royalPurple: '#9B51E0',
-		orchid: '#DA77F2',
-
-		// Accent
-		neonViolet: '#C77DFF',
-		electricPurple: '#6C5CE7',
-		arcticBlue: '#48DBFB',
-
-		// Blues extended
-		blue1: '#1F63E0',
-		blue2: '#3A7AED',
-		blue3: '#5A9DF5',
-		blue4: '#2874A6',
-		blue5: '#2E86C1',
-		blue6: '#3498DB',
-
-		// Cyans
-		cyan1: '#00B0AA',
-		cyan2: '#33D6C2',
-		cyan3: '#66E9DA',
-
-		// Greens extended
-		green1: '#1E8449',
-		green2: '#2ECC71',
-		green3: '#58D68D',
-		green4: '#229954',
-		green5: '#27AE60',
-		green6: '#52BE80',
-
-		// Forest
-		forest1: '#27AE60',
-		forest2: '#2ECC71',
-		forest3: '#58D68D',
-
-		// Lime
-		lime1: '#A3E635',
-		lime2: '#B9F18D',
-		lime3: '#D4FFB0',
-
-		// Teals
-		teal1: '#009688',
-		teal2: '#1ABC9C',
-		teal3: '#48C9B0',
-		teal4: '#1ABC9C',
-		teal5: '#48C9B0',
-		teal6: '#76D7C4',
-
-		// Yellows
-		yellow1: '#F1C40F',
-		yellow2: '#F7DC6F',
-		yellow3: '#F9E79F',
-
-		// Gold
-		gold1: '#F39C12',
-		gold2: '#F1C40F',
-		gold3: '#F7DC6F',
-		gold4: '#B7950B',
-		gold5: '#F1C40F',
-		gold6: '#F4D03F',
-
-		// Mustard
-		mustard1: '#F1C40F',
-		mustard2: '#F7DC6F',
-		mustard3: '#F9E79F',
-
-		// Aqua
-		aqua1: '#00BFFF',
-		aqua2: '#1E90FF',
-		aqua3: '#63B8FF',
-
-		// Purple extended
-		purple1: '#8E44AD',
-		purple2: '#9B59B6',
-		purple3: '#BB8FCE',
-
-		violet1: '#8E44AD',
-		violet2: '#9B59B6',
-		violet3: '#BB8FCE',
-		violet4: '#7D3C98',
-		violet5: '#8E44AD',
-		violet6: '#9B59B6',
-
-		// Lavender
-		lavender1: '#9B59B6',
-		lavender2: '#AF7AC5',
-		lavender3: '#C39BD3',
-
-		// Oranges (safe ones, not red-ish)
-		orange4: '#D35400',
-		orange5: '#E67E22',
-		orange6: '#EB984E',
-
-		coral1: '#E67E22',
-		coral2: '#F39C12',
-		coral3: '#F5B041',
-	},
 	chartcolors: {
 		// Blues (3)
 		dodgerBlue: '#2F80ED',

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

@@ -4,8 +4,8 @@ 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);
+		expect(getColorsForSeverityLabels('', 0)).toBe(Color.BG_VANILLA_400);
+		expect(getColorsForSeverityLabels('   ', 0)).toBe(Color.BG_VANILLA_400);
 	});
 
 	it('should return correct colors for known severity variants', () => {

frontend/src/container/LogsExplorerChart/utils.ts

@@ -79,7 +79,7 @@ export function getColorsForSeverityLabels(
 	const trimmed = label.trim();
 
 	if (!trimmed) {
-		return Color.BG_SLATE_300;
+		return Color.BG_VANILLA_400; // Default color for empty labels
 	}
 
 	const variantColor = SEVERITY_VARIANT_COLORS[trimmed];
@@ -119,6 +119,6 @@ export function getColorsForSeverityLabels(
 
 	return (
 		SAFE_FALLBACK_COLORS[index % SAFE_FALLBACK_COLORS.length] ||
-		Color.BG_SLATE_400
+		Color.BG_VANILLA_400
 	);
 }

frontend/src/container/TopNav/DateTimeSelectionV2/index.tsx

@@ -30,6 +30,7 @@ import { AppState } from 'store/reducers';
 import AppActions from 'types/actions';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { addCustomTimeRange } from 'utils/customTimeRangeUtils';
+import { persistTimeDurationForRoute } from 'utils/metricsTimeStorageUtils';
 import { normalizeTimeToMs } from 'utils/timeUtils';
 import { v4 as uuid } from 'uuid';
 
@@ -234,20 +235,7 @@ function DateTimeSelection({
 
 	const updateLocalStorageForRoutes = useCallback(
 		(value: Time | string): void => {
-			const preRoutes = getLocalStorageKey(LOCALSTORAGE.METRICS_TIME_IN_DURATION);
-			if (preRoutes !== null) {
-				const preRoutesObject = JSON.parse(preRoutes);
-
-				const preRoute = {
-					...preRoutesObject,
-				};
-				preRoute[location.pathname] = value;
-
-				setLocalStorageKey(
-					LOCALSTORAGE.METRICS_TIME_IN_DURATION,
-					JSON.stringify(preRoute),
-				);
-			}
+			persistTimeDurationForRoute(location.pathname, String(value));
 		},
 		[location.pathname],
 	);
@@ -738,6 +726,7 @@ function DateTimeSelection({
 						showRecentlyUsed={showRecentlyUsed}
 						minTime={minTimeForDateTimePicker}
 						maxTime={maxTimeForDateTimePicker}
+						isModalTimeSelection={isModalTimeSelection}
 					/>
 
 					{showAutoRefresh && selectedTime !== 'custom' && (

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

@@ -0,0 +1,160 @@
+import { act, renderHook } from '@testing-library/react';
+import { QueryParams } from 'constants/query';
+import { GlobalReducer } from 'types/reducer/globalTime';
+
+import { useZoomOut } from '../useZoomOut';
+
+const mockDispatch = jest.fn();
+const mockSafeNavigate = jest.fn();
+const mockUrlQueryDelete = jest.fn();
+const mockUrlQuerySet = jest.fn();
+const mockUrlQueryToString = jest.fn(() => '');
+
+interface MockAppState {
+	globalTime: Pick<GlobalReducer, 'minTime' | 'maxTime'>;
+}
+
+jest.mock('react-redux', () => ({
+	useDispatch: (): jest.Mock => mockDispatch,
+	useSelector: <T>(selector: (state: MockAppState) => T): T => {
+		const mockState: MockAppState = {
+			globalTime: {
+				minTime: 15 * 60 * 1000 * 1e6, // 15 min in nanoseconds
+				maxTime: 30 * 60 * 1000 * 1e6, // 30 min in nanoseconds (mock for getNextZoomOutRange)
+			},
+		};
+		return selector(mockState);
+	},
+}));
+
+jest.mock('react-router-dom', () => ({
+	useLocation: (): { pathname: string } => ({ pathname: '/logs-explorer' }),
+}));
+
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): { safeNavigate: typeof mockSafeNavigate } => ({
+		safeNavigate: mockSafeNavigate,
+	}),
+}));
+
+interface MockUrlQuery {
+	delete: typeof mockUrlQueryDelete;
+	set: typeof mockUrlQuerySet;
+	get: () => null;
+	toString: typeof mockUrlQueryToString;
+}
+
+jest.mock('hooks/useUrlQuery', () => ({
+	__esModule: true,
+	default: (): MockUrlQuery => ({
+		delete: mockUrlQueryDelete,
+		set: mockUrlQuerySet,
+		get: (): null => null,
+		toString: mockUrlQueryToString,
+	}),
+}));
+
+const mockGetNextZoomOutRange = jest.fn();
+jest.mock('lib/zoomOutUtils', () => ({
+	getNextZoomOutRange: (
+		...args: unknown[]
+	): ReturnType<typeof mockGetNextZoomOutRange> =>
+		mockGetNextZoomOutRange(...args),
+}));
+
+describe('useZoomOut', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockUrlQueryToString.mockReturnValue('relativeTime=45m');
+	});
+
+	it('should do nothing when isDisabled is true', () => {
+		const { result } = renderHook(() => useZoomOut({ isDisabled: true }));
+
+		act(() => {
+			result.current();
+		});
+
+		expect(mockGetNextZoomOutRange).not.toHaveBeenCalled();
+		expect(mockDispatch).not.toHaveBeenCalled();
+		expect(mockSafeNavigate).not.toHaveBeenCalled();
+	});
+
+	it('should do nothing when getNextZoomOutRange returns null', () => {
+		mockGetNextZoomOutRange.mockReturnValue(null);
+
+		const { result } = renderHook(() => useZoomOut());
+
+		act(() => {
+			result.current();
+		});
+
+		expect(mockGetNextZoomOutRange).toHaveBeenCalled();
+		expect(mockDispatch).not.toHaveBeenCalled();
+		expect(mockSafeNavigate).not.toHaveBeenCalled();
+	});
+
+	it('should dispatch preset and update URL when result has preset', () => {
+		mockGetNextZoomOutRange.mockReturnValue({
+			range: [1000, 2000],
+			preset: '45m',
+		});
+
+		const { result } = renderHook(() => useZoomOut());
+
+		act(() => {
+			result.current();
+		});
+
+		expect(mockDispatch).toHaveBeenCalledWith(expect.any(Function));
+		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.startTime);
+		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.endTime);
+		expect(mockUrlQuerySet).toHaveBeenCalledWith(QueryParams.relativeTime, '45m');
+		expect(mockSafeNavigate).toHaveBeenCalledWith(
+			expect.stringContaining('/logs-explorer'),
+		);
+	});
+
+	it('should dispatch custom range and update URL when result has no preset', () => {
+		mockGetNextZoomOutRange.mockReturnValue({
+			range: [1000000, 2000000],
+			preset: null,
+		});
+
+		const { result } = renderHook(() => useZoomOut());
+
+		act(() => {
+			result.current();
+		});
+
+		expect(mockDispatch).toHaveBeenCalledWith(expect.any(Function));
+		expect(mockUrlQuerySet).toHaveBeenCalledWith(
+			QueryParams.startTime,
+			'1000000',
+		);
+		expect(mockUrlQuerySet).toHaveBeenCalledWith(QueryParams.endTime, '2000000');
+		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.relativeTime);
+		expect(mockSafeNavigate).toHaveBeenCalledWith(
+			expect.stringContaining('/logs-explorer'),
+		);
+	});
+
+	it('should delete urlParamsToDelete when provided', () => {
+		mockGetNextZoomOutRange.mockReturnValue({
+			range: [1000, 2000],
+			preset: '45m',
+		});
+
+		const { result } = renderHook(() =>
+			useZoomOut({
+				urlParamsToDelete: [QueryParams.activeLogId],
+			}),
+		);
+
+		act(() => {
+			result.current();
+		});
+
+		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.activeLogId);
+	});
+});

frontend/src/hooks/useZoomOut.ts

@@ -0,0 +1,79 @@
+import { useCallback, useRef } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { useDispatch, useSelector } from 'react-redux';
+import { useLocation } from 'react-router-dom';
+import { QueryParams } from 'constants/query';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import useUrlQuery from 'hooks/useUrlQuery';
+import { getNextZoomOutRange } from 'lib/zoomOutUtils';
+import { UpdateTimeInterval } from 'store/actions';
+import { AppState } from 'store/reducers';
+import { GlobalReducer } from 'types/reducer/globalTime';
+import { persistTimeDurationForRoute } from 'utils/metricsTimeStorageUtils';
+
+export interface UseZoomOutOptions {
+	/** When true, the zoom out handler does nothing (e.g. when live logs are enabled) */
+	isDisabled?: boolean;
+	/** URL params to delete when zooming out (e.g. [QueryParams.activeLogId] for logs) */
+	urlParamsToDelete?: string[];
+}
+
+/**
+ * Reusable hook for zoom-out functionality in explorers (logs, traces, etc.).
+ * Computes the next time range using the zoom-out ladder, updates Redux global time,
+ * and navigates with the new URL params.
+ */
+const EMPTY_PARAMS: string[] = [];
+
+export function useZoomOut(options: UseZoomOutOptions = {}): () => void {
+	const { isDisabled = false, urlParamsToDelete = EMPTY_PARAMS } = options;
+	const urlParamsToDeleteRef = useRef(urlParamsToDelete);
+	urlParamsToDeleteRef.current = urlParamsToDelete;
+
+	const dispatch = useDispatch();
+	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+	const urlQuery = useUrlQuery();
+	const location = useLocation();
+	const { safeNavigate } = useSafeNavigate();
+
+	return useCallback((): void => {
+		if (isDisabled) {
+			return;
+		}
+		const minMs = Math.floor((minTime ?? 0) / 1e6);
+		const maxMs = Math.floor((maxTime ?? 0) / 1e6);
+		const result = getNextZoomOutRange(minMs, maxMs);
+		if (!result) {
+			return;
+		}
+		const [newStartMs, newEndMs] = result.range;
+		const { preset } = result;
+
+		if (preset) {
+			dispatch(UpdateTimeInterval(preset));
+			urlQuery.delete(QueryParams.startTime);
+			urlQuery.delete(QueryParams.endTime);
+			urlQuery.set(QueryParams.relativeTime, preset);
+			persistTimeDurationForRoute(location.pathname, preset);
+		} else {
+			dispatch(UpdateTimeInterval('custom', [newStartMs, newEndMs]));
+			urlQuery.set(QueryParams.startTime, String(newStartMs));
+			urlQuery.set(QueryParams.endTime, String(newEndMs));
+			urlQuery.delete(QueryParams.relativeTime);
+		}
+		for (const param of urlParamsToDeleteRef.current) {
+			urlQuery.delete(param);
+		}
+		safeNavigate(`${location.pathname}?${urlQuery.toString()}`);
+	}, [
+		dispatch,
+		isDisabled,
+		location.pathname,
+		maxTime,
+		minTime,
+		safeNavigate,
+		urlQuery,
+	]);
+}

frontend/src/lib/__tests__/zoomOutUtils.test.ts

@@ -0,0 +1,147 @@
+import {
+	getNextDurationInLadder,
+	getNextZoomOutRange,
+	isZoomOutDisabled,
+	ZoomOutResult,
+} from '../zoomOutUtils';
+
+const MS_PER_MIN = 60 * 1000;
+const MS_PER_HOUR = 60 * MS_PER_MIN;
+const MS_PER_DAY = 24 * MS_PER_HOUR;
+const MS_PER_WEEK = 7 * MS_PER_DAY;
+
+// Fixed "now" for deterministic tests: 2024-01-15 12:00:00 UTC
+const NOW_MS = 1705312800000;
+
+describe('zoomOutUtils', () => {
+	beforeEach(() => {
+		jest.spyOn(Date, 'now').mockReturnValue(NOW_MS);
+	});
+
+	afterEach(() => {
+		jest.restoreAllMocks();
+	});
+
+	describe('getNextDurationInLadder', () => {
+		it('should use 3x zoom out below 15m until reaching 15m', () => {
+			expect(getNextDurationInLadder(1 * MS_PER_MIN)).toBe(3 * MS_PER_MIN);
+			expect(getNextDurationInLadder(2 * MS_PER_MIN)).toBe(6 * MS_PER_MIN);
+			expect(getNextDurationInLadder(3 * MS_PER_MIN)).toBe(9 * MS_PER_MIN);
+			expect(getNextDurationInLadder(4 * MS_PER_MIN)).toBe(12 * MS_PER_MIN);
+			expect(getNextDurationInLadder(5 * MS_PER_MIN)).toBe(15 * MS_PER_MIN); // cap at 15m
+			expect(getNextDurationInLadder(6 * MS_PER_MIN)).toBe(15 * MS_PER_MIN); // 18m capped
+		});
+
+		it('should return next step for each ladder rung from 15m onward', () => {
+			expect(getNextDurationInLadder(10 * MS_PER_MIN)).toBe(15 * MS_PER_MIN);
+			expect(getNextDurationInLadder(15 * MS_PER_MIN)).toBe(45 * MS_PER_MIN);
+			expect(getNextDurationInLadder(45 * MS_PER_MIN)).toBe(2 * MS_PER_HOUR);
+			expect(getNextDurationInLadder(2 * MS_PER_HOUR)).toBe(7 * MS_PER_HOUR);
+			expect(getNextDurationInLadder(7 * MS_PER_HOUR)).toBe(21 * MS_PER_HOUR);
+			expect(getNextDurationInLadder(21 * MS_PER_HOUR)).toBe(1 * MS_PER_DAY);
+			expect(getNextDurationInLadder(1 * MS_PER_DAY)).toBe(2 * MS_PER_DAY);
+			expect(getNextDurationInLadder(2 * MS_PER_DAY)).toBe(3 * MS_PER_DAY);
+			expect(getNextDurationInLadder(3 * MS_PER_DAY)).toBe(1 * MS_PER_WEEK);
+			expect(getNextDurationInLadder(1 * MS_PER_WEEK)).toBe(2 * MS_PER_WEEK);
+			expect(getNextDurationInLadder(2 * MS_PER_WEEK)).toBe(30 * MS_PER_DAY);
+		});
+
+		it('should return MAX when at or past 1 month (no wrap)', () => {
+			expect(getNextDurationInLadder(30 * MS_PER_DAY)).toBe(30 * MS_PER_DAY);
+			expect(getNextDurationInLadder(31 * MS_PER_DAY)).toBe(30 * MS_PER_DAY);
+		});
+
+		it('should return next step for duration between ladder rungs', () => {
+			expect(getNextDurationInLadder(1 * MS_PER_HOUR)).toBe(2 * MS_PER_HOUR);
+			expect(getNextDurationInLadder(5 * MS_PER_HOUR)).toBe(7 * MS_PER_HOUR);
+			expect(getNextDurationInLadder(12 * MS_PER_HOUR)).toBe(21 * MS_PER_HOUR);
+		});
+	});
+
+	describe('getNextZoomOutRange', () => {
+		it('should return null when duration is zero or negative', () => {
+			expect(getNextZoomOutRange(NOW_MS, NOW_MS)).toBeNull();
+			expect(getNextZoomOutRange(NOW_MS, NOW_MS - 1000)).toBeNull();
+		});
+
+		it('should return center-anchored range and preset=null when new end does not exceed now (Phase 1)', () => {
+			// 15m range centered well before now so zoom to 45m keeps end <= now
+			// Center at now-30m: end = center + 22.5m = now - 7.5m <= now
+			const centerMs = NOW_MS - 30 * MS_PER_MIN;
+			const start15m = centerMs - 7.5 * MS_PER_MIN;
+			const end15m = centerMs + 7.5 * MS_PER_MIN;
+			const result = getNextZoomOutRange(start15m, end15m) as ZoomOutResult;
+
+			expect(result).not.toBeNull();
+			expect(result.preset).toBeNull(); // Phase 1: preserve center-anchored range, avoid GetMinMax "last X from now"
+			const [newStart, newEnd] = result.range;
+			expect(newEnd - newStart).toBe(45 * MS_PER_MIN);
+			const newCenter = (newStart + newEnd) / 2;
+			expect(Math.abs(newCenter - centerMs)).toBeLessThan(2000);
+			expect(newEnd).toBeLessThanOrEqual(NOW_MS + 1000);
+		});
+
+		it('should return end-anchored range when new end would exceed now (Phase 2)', () => {
+			// 22hr range ending at now - zoom to 1d (24hr) would push end past now
+			// Next ladder step from 22hr is 1d
+			const start22h = NOW_MS - 22 * MS_PER_HOUR;
+			const end22h = NOW_MS;
+			const result = getNextZoomOutRange(start22h, end22h) as ZoomOutResult;
+
+			expect(result).not.toBeNull();
+			expect(result.preset).toBe('1d');
+			const [newStart, newEnd] = result.range;
+			expect(newEnd).toBe(NOW_MS); // End anchored at now
+			expect(newStart).toBe(NOW_MS - 1 * MS_PER_DAY);
+		});
+
+		it('should return correct preset for each ladder step', () => {
+			const presets: [number, number, string][] = [
+				[15 * MS_PER_MIN, 0, '45m'],
+				[45 * MS_PER_MIN, 0, '2h'],
+				[2 * MS_PER_HOUR, 0, '7h'],
+				[7 * MS_PER_HOUR, 0, '21h'],
+				[21 * MS_PER_HOUR, 0, '1d'],
+				[1 * MS_PER_DAY, 0, '2d'],
+				[2 * MS_PER_DAY, 0, '3d'],
+				[3 * MS_PER_DAY, 0, '1w'],
+				[1 * MS_PER_WEEK, 0, '2w'],
+				[2 * MS_PER_WEEK, 0, '1month'],
+			];
+
+			presets.forEach(([durationMs, offset, expectedPreset]) => {
+				const end = NOW_MS - offset;
+				const start = end - durationMs;
+				const result = getNextZoomOutRange(start, end);
+				expect(result?.preset).toBe(expectedPreset);
+			});
+		});
+
+		it('isZoomOutDisabled returns true when duration >= 1 month', () => {
+			expect(isZoomOutDisabled(30 * MS_PER_DAY)).toBe(true);
+			expect(isZoomOutDisabled(31 * MS_PER_DAY)).toBe(true);
+			expect(isZoomOutDisabled(29 * MS_PER_DAY)).toBe(false);
+			expect(isZoomOutDisabled(15 * MS_PER_MIN)).toBe(false);
+		});
+
+		it('should return null when at 1 month (no zoom out beyond max)', () => {
+			const start1m = NOW_MS - 30 * MS_PER_DAY;
+			const end1m = NOW_MS;
+			const result = getNextZoomOutRange(start1m, end1m);
+
+			expect(result).toBeNull();
+		});
+
+		it('should zoom out 3x from 5m range to 15m then continue with ladder', () => {
+			// 5m range ending at now → 3x = 15m
+			const start5m = NOW_MS - 5 * MS_PER_MIN;
+			const end5m = NOW_MS;
+			const result = getNextZoomOutRange(start5m, end5m) as ZoomOutResult;
+
+			expect(result).not.toBeNull();
+			expect(result.preset).toBe('15m');
+			const [newStart, newEnd] = result.range;
+			expect(newEnd - newStart).toBe(15 * MS_PER_MIN);
+		});
+	});
+});

frontend/src/lib/zoomOutUtils.ts

@@ -0,0 +1,139 @@
+/**
+ * Custom Time Picker zoom-out ladder:
+ * - Until 1 day: 15m → 45m → 2hr → 7hr → 21hr
+ * - Then fixed: 1d → 2d → 3d → 1w → 2w → 1m
+ * - At 1 month: zoom out is disabled (max range)
+ */
+
+import type {
+	CustomTimeType,
+	Time,
+} from 'container/TopNav/DateTimeSelectionV2/types';
+
+const MS_PER_MIN = 60 * 1000;
+const MS_PER_HOUR = 60 * MS_PER_MIN;
+const MS_PER_DAY = 24 * MS_PER_HOUR;
+const MS_PER_WEEK = 7 * MS_PER_DAY;
+
+const ZOOM_OUT_LADDER_MS: number[] = [
+	15 * MS_PER_MIN, // 15m
+	45 * MS_PER_MIN, // 45m
+	2 * MS_PER_HOUR, // 2hr
+	7 * MS_PER_HOUR, // 7hr
+	21 * MS_PER_HOUR, // 21hr
+	1 * MS_PER_DAY, // 1d
+	2 * MS_PER_DAY, // 2d
+	3 * MS_PER_DAY, // 3d
+	1 * MS_PER_WEEK, // 1w
+	2 * MS_PER_WEEK, // 2w
+	30 * MS_PER_DAY, // 1m
+];
+
+const LADDER_LAST_INDEX = ZOOM_OUT_LADDER_MS.length - 1;
+const MAX_DURATION = ZOOM_OUT_LADDER_MS[LADDER_LAST_INDEX];
+const MIN_LADDER_DURATION_MS = ZOOM_OUT_LADDER_MS[0]; // 15m - below this we use 3x
+
+export const MAX_ZOOM_OUT_DURATION_MS = MAX_DURATION;
+
+/** Returns true when zoom out should be disabled (range at or beyond 1 month) */
+export function isZoomOutDisabled(durationMs: number): boolean {
+	return durationMs >= MAX_ZOOM_OUT_DURATION_MS;
+}
+
+/** Preset labels for ladder steps supported by GetMinMax (shows "Last 15 minutes" etc. instead of "Custom") */
+const PRESET_FOR_DURATION_MS: Record<number, Time | CustomTimeType> = {
+	[15 * MS_PER_MIN]: '15m',
+	[45 * MS_PER_MIN]: '45m',
+	[2 * MS_PER_HOUR]: '2h',
+	[7 * MS_PER_HOUR]: '7h',
+	[21 * MS_PER_HOUR]: '21h',
+	[1 * MS_PER_DAY]: '1d',
+	[2 * MS_PER_DAY]: '2d',
+	[3 * MS_PER_DAY]: '3d',
+	[1 * MS_PER_WEEK]: '1w',
+	[2 * MS_PER_WEEK]: '2w',
+	[30 * MS_PER_DAY]: '1month',
+};
+
+/**
+ * Returns the next duration in the zoom-out ladder for the given current duration.
+ * Below 15m: zoom out 3x until we reach 15m, then continue with the ladder.
+ * If at or past 1 month, returns MAX_DURATION (no zoom out - button is disabled).
+ */
+export function getNextDurationInLadder(durationMs: number): number {
+	if (durationMs >= MAX_DURATION) {
+		return MAX_DURATION; // No zoom out beyond 1 month
+	}
+
+	// Below 15m: zoom out 3x until we reach 15m
+	if (durationMs < MIN_LADDER_DURATION_MS) {
+		const next = durationMs * 3;
+		return Math.min(next, MIN_LADDER_DURATION_MS);
+	}
+
+	// At or above 15m: use the fixed ladder
+	for (let i = 0; i < ZOOM_OUT_LADDER_MS.length; i++) {
+		if (ZOOM_OUT_LADDER_MS[i] > durationMs) {
+			return ZOOM_OUT_LADDER_MS[i];
+		}
+	}
+
+	return MAX_DURATION;
+}
+
+export interface ZoomOutResult {
+	range: [number, number];
+	/** Preset key (e.g. '15m') when range matches a preset - use for display instead of "Custom Date Range" */
+	preset: Time | CustomTimeType | null;
+}
+
+/**
+ * Computes the next zoomed-out time range.
+ * Phase 1 (center-anchored): While new end <= now, expand from center.
+ * Phase 2 (end-anchored at now): When new end would exceed now, anchor end at now and move start backward.
+ *
+ * @returns ZoomOutResult with range and preset (or null if no change)
+ */
+export function getNextZoomOutRange(
+	startMs: number,
+	endMs: number,
+): ZoomOutResult | null {
+	const nowMs = Date.now();
+	const durationMs = endMs - startMs;
+
+	if (durationMs <= 0) {
+		return null;
+	}
+
+	const newDurationMs = getNextDurationInLadder(durationMs);
+
+	// No zoom out when already at max (1 month)
+	if (newDurationMs <= durationMs) {
+		return null;
+	}
+	const centerMs = startMs + durationMs / 2;
+	const computedEndMs = centerMs + newDurationMs / 2;
+
+	let newStartMs: number;
+	let newEndMs: number;
+
+	const isPhase1 = computedEndMs <= nowMs;
+	if (isPhase1) {
+		// Phase 1: center-anchored (historical range not ending at now)
+		newStartMs = centerMs - newDurationMs / 2;
+		newEndMs = computedEndMs;
+	} else {
+		// Phase 2: end-anchored at now
+		newStartMs = nowMs - newDurationMs;
+		newEndMs = nowMs;
+	}
+
+	// Phase 2 only: use preset so GetMinMax produces "last X from now".
+	// Phase 1: preset=null so the center-anchored range is preserved (GetMinMax would discard it).
+	const preset = isPhase1 ? null : PRESET_FOR_DURATION_MS[newDurationMs] ?? null;
+
+	return {
+		range: [Math.round(newStartMs), Math.round(newEndMs)],
+		preset,
+	};
+}

frontend/src/pages/TraceDetailV2/index.tsx

@@ -4,11 +4,19 @@ import ROUTES from 'constants/routes';
 import history from 'lib/history';
 import { Compass, Cone, TowerControl } from 'lucide-react';
 
-import TraceDetailsV3 from '../TraceDetailsV3';
+import TraceDetailsV2 from './TraceDetailV2';
 
 import './TraceDetailV2.styles.scss';
 
-function NewTraceDetail(props: any): JSX.Element {
+interface INewTraceDetailProps {
+	items: {
+		label: JSX.Element;
+		key: string;
+		children: JSX.Element;
+	}[];
+}
+
+function NewTraceDetail(props: INewTraceDetailProps): JSX.Element {
 	const { items } = props;
 	return (
 		<div className="traces-module-container">
@@ -42,7 +50,7 @@ export default function TraceDetailsPage(): JSX.Element {
 				</div>
 			),
 			key: 'trace-details',
-			children: <TraceDetailsV3 />,
+			children: <TraceDetailsV2 />,
 		},
 		{
 			label: (

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/TraceDetailsHeader.styles.scss

@@ -1,91 +0,0 @@
-.trace-details-header {
-	display: flex;
-	align-items: center;
-	padding: 0px 16px;
-
-	.previous-btn {
-		display: flex;
-		height: 30px;
-		padding: 6px 8px;
-		align-items: center;
-		gap: 4px;
-		border: 1px solid var(--bg-slate-300);
-		background: var(--bg-slate-500);
-		border-radius: 4px;
-		box-shadow: none;
-	}
-
-	.trace-name {
-		display: flex;
-		padding: 6px 8px;
-		margin-left: 6px;
-		align-items: center;
-		gap: 4px;
-		border: 1px solid var(--bg-slate-300);
-		border-radius: 4px 0px 0px 4px;
-		background: var(--bg-slate-500);
-
-		.drafting {
-			color: white;
-		}
-
-		.trace-id {
-			color: #fff;
-			font-family: Inter;
-			font-size: 13px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 18px;
-			letter-spacing: -0.07px;
-		}
-	}
-
-	.trace-id-value {
-		display: flex;
-		padding: 6px 8px;
-		justify-content: center;
-		align-items: center;
-		gap: 10px;
-		background: var(--bg-slate-400);
-		color: var(--Vanilla-400, #c0c1c3);
-		font-family: Inter;
-		font-size: 13px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 18px;
-		letter-spacing: -0.07px;
-		border: 1px solid var(--bg-slate-300);
-		border-left: unset;
-		border-radius: 0px 4px 4px 0px;
-	}
-}
-
-.lightMode {
-	.trace-details-header {
-		.previous-btn {
-			border: 1px solid var(--bg-vanilla-300);
-			background: var(--bg-vanilla-200);
-		}
-
-		.trace-name {
-			border: 1px solid var(--bg-vanilla-300);
-			background: var(--bg-vanilla-200);
-			border-right: none;
-
-			.drafting {
-				color: var(--bg-ink-100);
-			}
-
-			.trace-id {
-				color: var(--bg-ink-100);
-			}
-		}
-
-		.trace-id-value {
-			background: var(--bg-vanilla-300);
-			color: var(--bg-ink-400);
-			border: 1px solid var(--bg-vanilla-300);
-		}
-	}
-}
-// TODO: move to new css module name system

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/TraceDetailsHeader.tsx

@@ -1,38 +0,0 @@
-import { useCallback } from 'react';
-import { useParams } from 'react-router-dom';
-import { Button, Typography } from 'antd';
-import ROUTES from 'constants/routes';
-import history from 'lib/history';
-import { ArrowLeft } from 'lucide-react';
-import { TraceDetailV2URLProps } from 'types/api/trace/getTraceV2';
-
-import './TraceDetailsHeader.styles.scss';
-
-function TraceDetailsHeader(): JSX.Element {
-	const { id: traceID } = useParams<TraceDetailV2URLProps>();
-
-	const handlePreviousBtnClick = useCallback((): void => {
-		const isSpaNavigate =
-			document.referrer &&
-			new URL(document.referrer).origin === window.location.origin;
-		if (isSpaNavigate) {
-			history.goBack();
-		} else {
-			history.push(ROUTES.TRACES_EXPLORER);
-		}
-	}, []);
-
-	return (
-		<div className="trace-details-header">
-			<Button className="previous-btn" onClick={handlePreviousBtnClick}>
-				<ArrowLeft size={14} />
-			</Button>
-			<div className="trace-name">
-				<Typography.Text className="trace-id">Trace ID</Typography.Text>
-			</div>
-			<Typography.Text className="trace-id-value">{traceID}</Typography.Text>
-		</div>
-	);
-}
-
-export default TraceDetailsHeader;

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/FlamegraphCanvas.tsx

@@ -1,237 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import TimelineV3 from 'components/TimelineV3/TimelineV3';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-
-import { DEFAULT_ROW_HEIGHT } from './constants';
-import { useCanvasSetup } from './hooks/useCanvasSetup';
-import { useFlamegraphDrag } from './hooks/useFlamegraphDrag';
-import { useFlamegraphDraw } from './hooks/useFlamegraphDraw';
-import { useFlamegraphHover } from './hooks/useFlamegraphHover';
-import { useFlamegraphZoom } from './hooks/useFlamegraphZoom';
-import { useScrollToSpan } from './hooks/useScrollToSpan';
-import { FlamegraphCanvasProps, SpanRect } from './types';
-import { formatDuration } from './utils';
-
-function FlamegraphCanvas(props: FlamegraphCanvasProps): JSX.Element {
-	const { spans, traceMetadata, firstSpanAtFetchLevel, onSpanClick } = props;
-
-	const isDarkMode = useIsDarkMode(); //TODO: see if can be removed or use a new hook
-	const canvasRef = useRef<HTMLCanvasElement>(null);
-	const containerRef = useRef<HTMLDivElement>(null);
-	const spanRectsRef = useRef<SpanRect[]>([]);
-
-	const [viewStartTs, setViewStartTs] = useState<number>(
-		traceMetadata.startTime,
-	);
-	const [viewEndTs, setViewEndTs] = useState<number>(traceMetadata.endTime);
-	const [scrollTop, setScrollTop] = useState<number>(0);
-	const [rowHeight, setRowHeight] = useState<number>(DEFAULT_ROW_HEIGHT);
-
-	// Mutable refs for zoom and drag hooks to read during rAF / mouse callbacks
-	const viewStartRef = useRef(viewStartTs);
-	const viewEndRef = useRef(viewEndTs);
-	const rowHeightRef = useRef(rowHeight);
-	const scrollTopRef = useRef(scrollTop);
-
-	useEffect(() => {
-		viewStartRef.current = viewStartTs;
-	}, [viewStartTs]);
-
-	useEffect(() => {
-		viewEndRef.current = viewEndTs;
-	}, [viewEndTs]);
-
-	useEffect(() => {
-		rowHeightRef.current = rowHeight;
-	}, [rowHeight]);
-
-	useEffect(() => {
-		scrollTopRef.current = scrollTop;
-	}, [scrollTop]);
-
-	useEffect(() => {
-		//TODO: see if this can be removed as once loaded the view start and end ts will not change
-		setViewStartTs(traceMetadata.startTime);
-		setViewEndTs(traceMetadata.endTime);
-		viewStartRef.current = traceMetadata.startTime;
-		viewEndRef.current = traceMetadata.endTime;
-	}, [traceMetadata.startTime, traceMetadata.endTime]);
-
-	const totalHeight = spans.length * rowHeight;
-
-	const { isOverFlamegraphRef } = useFlamegraphZoom({
-		canvasRef,
-		traceMetadata,
-		viewStartRef,
-		viewEndRef,
-		rowHeightRef,
-		setViewStartTs,
-		setViewEndTs,
-		setRowHeight,
-	});
-
-	const {
-		handleMouseDown,
-		handleMouseMove: handleDragMouseMove,
-		handleMouseUp,
-		handleDragMouseLeave,
-		suppressClickRef,
-		isDraggingRef,
-	} = useFlamegraphDrag({
-		canvasRef,
-		containerRef,
-		traceMetadata,
-		viewStartRef,
-		viewEndRef,
-		setViewStartTs,
-		setViewEndTs,
-		scrollTopRef,
-		setScrollTop,
-		totalHeight,
-	});
-
-	const {
-		hoveredSpanId,
-		handleHoverMouseMove,
-		handleHoverMouseLeave,
-		handleClick,
-		tooltipContent,
-	} = useFlamegraphHover({
-		canvasRef,
-		spanRectsRef,
-		traceMetadata,
-		viewStartTs,
-		viewEndTs,
-		isDraggingRef,
-		suppressClickRef,
-		onSpanClick,
-		isDarkMode,
-	});
-
-	const { drawFlamegraph } = useFlamegraphDraw({
-		canvasRef,
-		containerRef,
-		spans,
-		viewStartTs,
-		viewEndTs,
-		scrollTop,
-		rowHeight,
-		selectedSpanId: firstSpanAtFetchLevel || undefined,
-		hoveredSpanId: hoveredSpanId ?? '',
-		isDarkMode,
-		spanRectsRef,
-	});
-
-	useScrollToSpan({
-		firstSpanAtFetchLevel,
-		spans,
-		traceMetadata,
-		containerRef,
-		viewStartRef,
-		viewEndRef,
-		scrollTopRef,
-		rowHeight,
-		setViewStartTs,
-		setViewEndTs,
-		setScrollTop,
-	});
-
-	useCanvasSetup(canvasRef, containerRef, drawFlamegraph);
-
-	const handleMouseMove = useCallback(
-		(e: React.MouseEvent): void => {
-			handleDragMouseMove(e);
-			handleHoverMouseMove(e);
-		},
-		[handleDragMouseMove, handleHoverMouseMove],
-	);
-
-	const handleMouseLeave = useCallback((): void => {
-		isOverFlamegraphRef.current = false;
-		handleDragMouseLeave();
-		handleHoverMouseLeave();
-	}, [isOverFlamegraphRef, handleDragMouseLeave, handleHoverMouseLeave]);
-
-	// todo: move to a separate component/utils file
-	const tooltipElement = tooltipContent
-		? createPortal(
-				<div
-					style={{
-						position: 'fixed',
-						left: Math.min(tooltipContent.clientX + 15, window.innerWidth - 220),
-						top: Math.min(tooltipContent.clientY + 15, window.innerHeight - 100),
-						zIndex: 1000,
-						backgroundColor: 'rgba(30, 30, 30, 0.95)',
-						color: '#fff',
-						padding: '8px 12px',
-						borderRadius: 4,
-						fontSize: 12,
-						fontFamily: 'Inter, sans-serif',
-						boxShadow: '0 2px 8px rgba(0,0,0,0.3)',
-						pointerEvents: 'none',
-					}}
-				>
-					<div
-						style={{
-							fontWeight: 600,
-							marginBottom: 4,
-							color: tooltipContent.spanColor,
-						}}
-					>
-						{tooltipContent.spanName}
-					</div>
-					<div>Status: {tooltipContent.status}</div>
-					<div>Start: {tooltipContent.startMs.toFixed(2)} ms</div>
-					<div>Duration: {formatDuration(tooltipContent.durationMs * 1e6)}</div>
-				</div>,
-				document.body,
-		  )
-		: null;
-
-	return (
-		<div
-			style={{
-				display: 'flex',
-				flexDirection: 'column',
-				height: '100%',
-				padding: '0 15px',
-			}}
-		>
-			{tooltipElement}
-			<TimelineV3
-				startTimestamp={viewStartTs}
-				endTimestamp={viewEndTs}
-				offsetTimestamp={viewStartTs - traceMetadata.startTime}
-				timelineHeight={10}
-			/>
-			<div
-				ref={containerRef}
-				style={{
-					flex: 1,
-					overflow: 'hidden',
-					position: 'relative',
-				}}
-				onMouseEnter={(): void => {
-					isOverFlamegraphRef.current = true;
-				}}
-				onMouseLeave={handleMouseLeave}
-			>
-				<canvas
-					ref={canvasRef}
-					style={{
-						display: 'block',
-						width: '100%',
-						cursor: 'grab',
-					}}
-					onMouseDown={handleMouseDown}
-					onMouseMove={handleMouseMove}
-					onMouseUp={handleMouseUp}
-					onClick={handleClick}
-				/>
-			</div>
-		</div>
-	);
-}
-
-export default FlamegraphCanvas;

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/TraceFlamegraph.tsx

@@ -1,107 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useHistory, useLocation, useParams } from 'react-router-dom';
-import useGetTraceFlamegraph from 'hooks/trace/useGetTraceFlamegraph';
-import useUrlQuery from 'hooks/useUrlQuery';
-import { TraceDetailFlamegraphURLProps } from 'types/api/trace/getTraceFlamegraph';
-
-import FlamegraphCanvas from './FlamegraphCanvas';
-
-//TODO: analyse if this is needed or not and move to separate file if needed else delete this enum.
-enum TraceFlamegraphState {
-	LOADING = 'LOADING',
-	SUCCESS = 'SUCCESS',
-	NO_DATA = 'NO_DATA',
-	ERROR = 'ERROR',
-	FETCHING_WITH_OLD_DATA = 'FETCHING_WITH_OLD_DATA',
-}
-
-function TraceFlamegraph(): JSX.Element {
-	const { id: traceId } = useParams<TraceDetailFlamegraphURLProps>();
-	const urlQuery = useUrlQuery();
-	const history = useHistory();
-	const { search } = useLocation();
-	const [firstSpanAtFetchLevel, setFirstSpanAtFetchLevel] = useState<string>(
-		urlQuery.get('spanId') || '',
-	);
-
-	useEffect(() => {
-		setFirstSpanAtFetchLevel(urlQuery.get('spanId') || '');
-	}, [urlQuery]);
-
-	const handleSpanClick = useCallback(
-		(spanId: string): void => {
-			setFirstSpanAtFetchLevel(spanId);
-			const searchParams = new URLSearchParams(search);
-			//tood: use from query params constants
-			if (searchParams.get('spanId') !== spanId) {
-				searchParams.set('spanId', spanId);
-				history.replace({ search: searchParams.toString() });
-			}
-		},
-		[history, search],
-	);
-
-	const { data, isFetching, error } = useGetTraceFlamegraph({
-		traceId,
-		selectedSpanId: firstSpanAtFetchLevel,
-	});
-
-	const flamegraphState = useMemo(() => {
-		if (isFetching) {
-			if (data?.payload?.spans && data.payload.spans.length > 0) {
-				return TraceFlamegraphState.FETCHING_WITH_OLD_DATA;
-			}
-			return TraceFlamegraphState.LOADING;
-		}
-		if (error) {
-			return TraceFlamegraphState.ERROR;
-		}
-		if (data?.payload?.spans && data.payload.spans.length === 0) {
-			return TraceFlamegraphState.NO_DATA;
-		}
-		return TraceFlamegraphState.SUCCESS;
-	}, [error, isFetching, data]);
-
-	const spans = useMemo(() => data?.payload?.spans || [], [
-		data?.payload?.spans,
-	]);
-
-	const content = useMemo(() => {
-		switch (flamegraphState) {
-			case TraceFlamegraphState.LOADING:
-				return <div>Loading...</div>;
-			case TraceFlamegraphState.ERROR:
-				return <div>Error loading flamegraph</div>;
-			case TraceFlamegraphState.NO_DATA:
-				return <div>No data found for trace {traceId}</div>;
-			case TraceFlamegraphState.SUCCESS:
-			case TraceFlamegraphState.FETCHING_WITH_OLD_DATA:
-				return (
-					<FlamegraphCanvas
-						spans={spans}
-						firstSpanAtFetchLevel={firstSpanAtFetchLevel}
-						setFirstSpanAtFetchLevel={setFirstSpanAtFetchLevel}
-						onSpanClick={handleSpanClick}
-						traceMetadata={{
-							startTime: data?.payload?.startTimestampMillis || 0,
-							endTime: data?.payload?.endTimestampMillis || 0,
-						}}
-					/>
-				);
-			default:
-				return <div>Fetching the trace...</div>;
-		}
-	}, [
-		data?.payload?.endTimestampMillis,
-		data?.payload?.startTimestampMillis,
-		firstSpanAtFetchLevel,
-		flamegraphState,
-		spans,
-		traceId,
-		handleSpanClick,
-	]);
-
-	return <>{content}</>;
-}
-
-export default TraceFlamegraph;

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/drawUtils.test.ts

@@ -1,525 +0,0 @@
-import { DASHED_BORDER_LINE_DASH, MIN_WIDTH_FOR_NAME } from '../constants';
-import type { FlamegraphRowMetrics } from '../utils';
-import { getFlamegraphRowMetrics } from '../utils';
-import { drawEventDot, drawSpanBar } from '../utils';
-import { MOCK_SPAN } from './testUtils';
-
-jest.mock('container/TraceDetail/utils', () => ({
-	convertTimeToRelevantUnit: (): { time: number; timeUnitName: string } => ({
-		time: 50,
-		timeUnitName: 'ms',
-	}),
-}));
-
-/** Minimal 2D context for createStripePattern's internal canvas (jsdom getContext often returns null) */
-const mockPatternCanvasCtx = {
-	beginPath: jest.fn(),
-	moveTo: jest.fn(),
-	lineTo: jest.fn(),
-	stroke: jest.fn(),
-	globalAlpha: 1,
-};
-
-const originalCreateElement = document.createElement.bind(document);
-document.createElement = function (
-	tagName: string,
-): ReturnType<typeof originalCreateElement> {
-	const el = originalCreateElement(tagName);
-	if (tagName.toLowerCase() === 'canvas') {
-		(el as HTMLCanvasElement).getContext = (() =>
-			mockPatternCanvasCtx as unknown) as HTMLCanvasElement['getContext'];
-	}
-	return el;
-};
-
-function createMockCtx(): jest.Mocked<CanvasRenderingContext2D> {
-	return ({
-		beginPath: jest.fn(),
-		roundRect: jest.fn(),
-		fill: jest.fn(),
-		stroke: jest.fn(),
-		save: jest.fn(),
-		restore: jest.fn(),
-		translate: jest.fn(),
-		rotate: jest.fn(),
-		fillRect: jest.fn(),
-		strokeRect: jest.fn(),
-		setLineDash: jest.fn(),
-		measureText: jest.fn(
-			(text: string) => ({ width: text.length * 6 } as TextMetrics),
-		),
-		createPattern: jest.fn(() => ({} as CanvasPattern)),
-		clip: jest.fn(),
-		rect: jest.fn(),
-		fillText: jest.fn(),
-		font: '',
-		fillStyle: '',
-		strokeStyle: '',
-		textAlign: '',
-		textBaseline: '',
-		lineWidth: 0,
-		globalAlpha: 1,
-	} as unknown) as jest.Mocked<CanvasRenderingContext2D>;
-}
-
-const METRICS: FlamegraphRowMetrics = getFlamegraphRowMetrics(24);
-
-describe('Canvas Draw Utils', () => {
-	describe('drawSpanBar', () => {
-		it('draws rect + fill for normal span (no selected/hovered)', () => {
-			const ctx = createMockCtx();
-			const spanRectsArray: {
-				span: typeof MOCK_SPAN;
-				x: number;
-				y: number;
-				width: number;
-				height: number;
-				level: number;
-			}[] = [];
-
-			drawSpanBar({
-				ctx,
-				span: { ...MOCK_SPAN, event: [] },
-				x: 10,
-				y: 0,
-				width: 100,
-				levelIndex: 0,
-				spanRectsArray,
-				color: '#1890ff',
-				isDarkMode: false,
-				metrics: METRICS,
-			});
-
-			expect(ctx.beginPath).toHaveBeenCalled();
-			expect(ctx.roundRect).toHaveBeenCalledWith(10, 1, 100, 22, 2);
-			expect(ctx.fill).toHaveBeenCalled();
-			expect(ctx.stroke).not.toHaveBeenCalled();
-			expect(spanRectsArray).toHaveLength(1);
-			expect(spanRectsArray[0]).toMatchObject({
-				x: 10,
-				y: 1,
-				width: 100,
-				height: 22,
-				level: 0,
-			});
-		});
-
-		it('uses stripe pattern + dashed stroke + 2px when selected', () => {
-			const ctx = createMockCtx();
-			const spanRectsArray: {
-				span: typeof MOCK_SPAN;
-				x: number;
-				y: number;
-				width: number;
-				height: number;
-				level: number;
-			}[] = [];
-
-			drawSpanBar({
-				ctx,
-				span: { ...MOCK_SPAN, spanId: 'sel', event: [] },
-				x: 20,
-				y: 0,
-				width: 80,
-				levelIndex: 1,
-				spanRectsArray,
-				color: '#2F80ED',
-				isDarkMode: false,
-				metrics: METRICS,
-				selectedSpanId: 'sel',
-			});
-
-			expect(ctx.createPattern).toHaveBeenCalled();
-			expect(ctx.setLineDash).toHaveBeenCalledWith(DASHED_BORDER_LINE_DASH);
-			expect(ctx.strokeStyle).toBe('#2F80ED');
-			expect(ctx.lineWidth).toBe(2);
-			expect(ctx.stroke).toHaveBeenCalled();
-			expect(ctx.setLineDash).toHaveBeenLastCalledWith([]);
-		});
-
-		it('uses stripe pattern + solid stroke + 1px when hovered (not selected)', () => {
-			const ctx = createMockCtx();
-			const spanRectsArray: {
-				span: typeof MOCK_SPAN;
-				x: number;
-				y: number;
-				width: number;
-				height: number;
-				level: number;
-			}[] = [];
-
-			drawSpanBar({
-				ctx,
-				span: { ...MOCK_SPAN, spanId: 'hov', event: [] },
-				x: 30,
-				y: 0,
-				width: 60,
-				levelIndex: 0,
-				spanRectsArray,
-				color: '#2F80ED',
-				isDarkMode: false,
-				metrics: METRICS,
-				hoveredSpanId: 'hov',
-			});
-
-			expect(ctx.createPattern).toHaveBeenCalled();
-			expect(ctx.setLineDash).not.toHaveBeenCalled();
-			expect(ctx.lineWidth).toBe(1);
-			expect(ctx.stroke).toHaveBeenCalled();
-		});
-
-		it('pushes spanRectsArray with correct dimensions', () => {
-			const ctx = createMockCtx();
-			const spanRectsArray: {
-				span: typeof MOCK_SPAN;
-				x: number;
-				y: number;
-				width: number;
-				height: number;
-				level: number;
-			}[] = [];
-
-			drawSpanBar({
-				ctx,
-				span: { ...MOCK_SPAN, spanId: 'rect-test', event: [] },
-				x: 5,
-				y: 24,
-				width: 200,
-				levelIndex: 2,
-				spanRectsArray,
-				color: '#000',
-				isDarkMode: false,
-				metrics: METRICS,
-			});
-
-			expect(spanRectsArray[0]).toMatchObject({
-				x: 5,
-				y: 25,
-				width: 200,
-				height: 22,
-				level: 2,
-			});
-			expect(spanRectsArray[0].span.spanId).toBe('rect-test');
-		});
-	});
-
-	describe('drawSpanLabel (via drawSpanBar)', () => {
-		it('skips label when width < MIN_WIDTH_FOR_NAME', () => {
-			const ctx = createMockCtx();
-			const spanRectsArray: {
-				span: typeof MOCK_SPAN;
-				x: number;
-				y: number;
-				width: number;
-				height: number;
-				level: number;
-			}[] = [];
-
-			drawSpanBar({
-				ctx,
-				span: { ...MOCK_SPAN, name: 'long-span-name', event: [] },
-				x: 0,
-				y: 0,
-				width: MIN_WIDTH_FOR_NAME - 1,
-				levelIndex: 0,
-				spanRectsArray,
-				color: '#000',
-				isDarkMode: false,
-				metrics: METRICS,
-			});
-
-			expect(ctx.clip).not.toHaveBeenCalled();
-			expect(ctx.fillText).not.toHaveBeenCalled();
-		});
-
-		it('draws name only when width >= MIN_WIDTH_FOR_NAME but < MIN_WIDTH_FOR_NAME_AND_DURATION', () => {
-			const ctx = createMockCtx();
-			ctx.measureText = jest.fn(
-				(t: string) => ({ width: t.length * 6 } as TextMetrics),
-			);
-
-			drawSpanBar({
-				ctx,
-				span: { ...MOCK_SPAN, name: 'foo', event: [] },
-				x: 0,
-				y: 0,
-				width: 50,
-				levelIndex: 0,
-				spanRectsArray: [],
-				color: '#000',
-				isDarkMode: false,
-				metrics: METRICS,
-			});
-
-			expect(ctx.clip).toHaveBeenCalled();
-			expect(ctx.fillText).toHaveBeenCalled();
-			expect(ctx.textAlign).toBe('left');
-		});
-
-		it('draws name + duration when width >= MIN_WIDTH_FOR_NAME_AND_DURATION', () => {
-			const ctx = createMockCtx();
-			ctx.measureText = jest.fn(
-				(t: string) => ({ width: t.length * 6 } as TextMetrics),
-			);
-
-			drawSpanBar({
-				ctx,
-				span: { ...MOCK_SPAN, name: 'my-span', event: [] },
-				x: 0,
-				y: 0,
-				width: 100,
-				levelIndex: 0,
-				spanRectsArray: [],
-				color: '#000',
-				isDarkMode: false,
-				metrics: METRICS,
-			});
-
-			expect(ctx.fillText).toHaveBeenCalledTimes(2);
-			expect(ctx.fillText).toHaveBeenCalledWith(
-				'50ms',
-				expect.any(Number),
-				expect.any(Number),
-			);
-			expect(ctx.fillText).toHaveBeenCalledWith(
-				'my-span',
-				expect.any(Number),
-				expect.any(Number),
-			);
-		});
-	});
-
-	describe('truncateText (via drawSpanBar)', () => {
-		it('uses full text when it fits', () => {
-			const ctx = createMockCtx();
-			ctx.measureText = jest.fn(
-				(t: string) => ({ width: t.length * 4 } as TextMetrics),
-			);
-
-			drawSpanBar({
-				ctx,
-				span: { ...MOCK_SPAN, name: 'short', event: [] },
-				x: 0,
-				y: 0,
-				width: 100,
-				levelIndex: 0,
-				spanRectsArray: [],
-				color: '#000',
-				isDarkMode: false,
-				metrics: METRICS,
-			});
-
-			expect(ctx.fillText).toHaveBeenCalledWith(
-				'short',
-				expect.any(Number),
-				expect.any(Number),
-			);
-		});
-
-		it('truncates text when it exceeds available width', () => {
-			const ctx = createMockCtx();
-			ctx.measureText = jest.fn(
-				(t: string) =>
-					({
-						width: t.includes('...') ? 24 : t.length * 10,
-					} as TextMetrics),
-			);
-
-			drawSpanBar({
-				ctx,
-				span: { ...MOCK_SPAN, name: 'very-long-span-name', event: [] },
-				x: 0,
-				y: 0,
-				width: 50,
-				levelIndex: 0,
-				spanRectsArray: [],
-				color: '#000',
-				isDarkMode: false,
-				metrics: METRICS,
-			});
-
-			const fillTextCalls = (ctx.fillText as jest.Mock).mock.calls;
-			const nameArg = fillTextCalls.find((c) => c[0] !== '50ms')?.[0];
-			expect(nameArg).toBeDefined();
-			expect(nameArg).toMatch(/\.\.\.$/);
-		});
-	});
-
-	describe('drawEventDot', () => {
-		it('uses error styling when isError is true', () => {
-			const ctx = createMockCtx();
-
-			drawEventDot({
-				ctx,
-				x: 50,
-				y: 11,
-				isError: true,
-				isDarkMode: false,
-				eventDotSize: 6,
-			});
-
-			expect(ctx.save).toHaveBeenCalled();
-			expect(ctx.translate).toHaveBeenCalledWith(50, 11);
-			expect(ctx.rotate).toHaveBeenCalledWith(Math.PI / 4);
-			expect(ctx.fillStyle).toBe('rgb(220, 38, 38)');
-			expect(ctx.strokeStyle).toBe('rgb(153, 27, 27)');
-			expect(ctx.fillRect).toHaveBeenCalledWith(-3, -3, 6, 6);
-			expect(ctx.strokeRect).toHaveBeenCalledWith(-3, -3, 6, 6);
-			expect(ctx.restore).toHaveBeenCalled();
-		});
-
-		it('uses normal styling when isError is false', () => {
-			const ctx = createMockCtx();
-
-			drawEventDot({
-				ctx,
-				x: 0,
-				y: 0,
-				isError: false,
-				isDarkMode: false,
-				eventDotSize: 6,
-			});
-
-			expect(ctx.fillStyle).toBe('rgb(6, 182, 212)');
-			expect(ctx.strokeStyle).toBe('rgb(8, 145, 178)');
-		});
-
-		it('uses dark mode colors for error', () => {
-			const ctx = createMockCtx();
-
-			drawEventDot({
-				ctx,
-				x: 0,
-				y: 0,
-				isError: true,
-				isDarkMode: true,
-				eventDotSize: 6,
-			});
-
-			expect(ctx.fillStyle).toBe('rgb(239, 68, 68)');
-			expect(ctx.strokeStyle).toBe('rgb(185, 28, 28)');
-		});
-
-		it('uses dark mode colors for non-error', () => {
-			const ctx = createMockCtx();
-
-			drawEventDot({
-				ctx,
-				x: 0,
-				y: 0,
-				isError: false,
-				isDarkMode: true,
-				eventDotSize: 6,
-			});
-
-			expect(ctx.fillStyle).toBe('rgb(14, 165, 233)');
-			expect(ctx.strokeStyle).toBe('rgb(2, 132, 199)');
-		});
-
-		it('calls save, translate, rotate, restore', () => {
-			const ctx = createMockCtx();
-
-			drawEventDot({
-				ctx,
-				x: 10,
-				y: 20,
-				isError: false,
-				isDarkMode: false,
-				eventDotSize: 4,
-			});
-
-			expect(ctx.save).toHaveBeenCalled();
-			expect(ctx.translate).toHaveBeenCalledWith(10, 20);
-			expect(ctx.rotate).toHaveBeenCalledWith(Math.PI / 4);
-			expect(ctx.restore).toHaveBeenCalled();
-		});
-	});
-
-	describe('createStripePattern (via drawSpanBar)', () => {
-		it('uses pattern when createPattern returns non-null', () => {
-			const ctx = createMockCtx();
-			const mockPattern = {} as CanvasPattern;
-			(ctx.createPattern as jest.Mock).mockReturnValue(mockPattern);
-
-			drawSpanBar({
-				ctx,
-				span: { ...MOCK_SPAN, spanId: 'p', event: [] },
-				x: 0,
-				y: 0,
-				width: MIN_WIDTH_FOR_NAME - 1,
-				levelIndex: 0,
-				spanRectsArray: [],
-				color: '#000',
-				isDarkMode: false,
-				metrics: METRICS,
-				hoveredSpanId: 'p',
-			});
-
-			expect(ctx.createPattern).toHaveBeenCalled();
-			expect(ctx.fillStyle).toBe(mockPattern);
-			expect(ctx.fill).toHaveBeenCalled();
-		});
-
-		it('skips fill when createPattern returns null', () => {
-			const ctx = createMockCtx();
-			(ctx.createPattern as jest.Mock).mockReturnValue(null);
-
-			drawSpanBar({
-				ctx,
-				span: { ...MOCK_SPAN, spanId: 'p', event: [] },
-				x: 0,
-				y: 0,
-				width: MIN_WIDTH_FOR_NAME - 1,
-				levelIndex: 0,
-				spanRectsArray: [],
-				color: '#000',
-				isDarkMode: false,
-				metrics: METRICS,
-				selectedSpanId: 'p',
-			});
-
-			expect(ctx.fill).not.toHaveBeenCalled();
-			expect(ctx.stroke).toHaveBeenCalled();
-		});
-	});
-
-	describe('drawSpanBar with events', () => {
-		it('draws event dots for each span event', () => {
-			const ctx = createMockCtx();
-			const spanWithEvents = {
-				...MOCK_SPAN,
-				event: [
-					{
-						name: 'e1',
-						timeUnixNano: 1_010_000_000,
-						attributeMap: {},
-						isError: false,
-					},
-					{
-						name: 'e2',
-						timeUnixNano: 1_025_000_000,
-						attributeMap: {},
-						isError: true,
-					},
-				],
-			};
-
-			drawSpanBar({
-				ctx,
-				span: spanWithEvents,
-				x: 0,
-				y: 0,
-				width: 100,
-				levelIndex: 0,
-				spanRectsArray: [],
-				color: '#000',
-				isDarkMode: false,
-				metrics: METRICS,
-			});
-
-			expect(ctx.save).toHaveBeenCalledTimes(3);
-			expect(ctx.translate).toHaveBeenCalledTimes(2);
-			expect(ctx.fillRect).toHaveBeenCalledTimes(2);
-		});
-	});
-});

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/testUtils.ts

@@ -1,54 +0,0 @@
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
-
-/** Minimal FlamegraphSpan for unit tests */
-export const MOCK_SPAN: FlamegraphSpan = {
-	timestamp: 1000,
-	durationNano: 50_000_000, // 50ms
-	spanId: 'span-1',
-	parentSpanId: '',
-	traceId: 'trace-1',
-	hasError: false,
-	serviceName: 'test-service',
-	name: 'test-span',
-	level: 0,
-	event: [],
-};
-
-/** Nested spans structure for findSpanById tests */
-export const MOCK_SPANS: FlamegraphSpan[][] = [
-	[
-		{
-			...MOCK_SPAN,
-			spanId: 'root',
-			parentSpanId: '',
-			level: 0,
-		},
-	],
-	[
-		{
-			...MOCK_SPAN,
-			spanId: 'child-a',
-			parentSpanId: 'root',
-			level: 1,
-		},
-		{
-			...MOCK_SPAN,
-			spanId: 'child-b',
-			parentSpanId: 'root',
-			level: 1,
-		},
-	],
-	[
-		{
-			...MOCK_SPAN,
-			spanId: 'grandchild',
-			parentSpanId: 'child-a',
-			level: 2,
-		},
-	],
-];
-
-export const MOCK_TRACE_METADATA = {
-	startTime: 0,
-	endTime: 1000,
-};

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/useFlamegraphDrag.test.ts

@@ -1,196 +0,0 @@
-import React from 'react';
-import { act, renderHook } from '@testing-library/react';
-
-import { useFlamegraphDrag } from '../hooks/useFlamegraphDrag';
-import { MOCK_TRACE_METADATA } from './testUtils';
-
-function createMockCanvas(): HTMLCanvasElement {
-	const canvas = document.createElement('canvas');
-	canvas.getBoundingClientRect = jest.fn(
-		(): DOMRect =>
-			({
-				left: 0,
-				top: 0,
-				width: 800,
-				height: 400,
-				x: 0,
-				y: 0,
-				bottom: 400,
-				right: 800,
-				toJSON: (): Record<string, unknown> => ({}),
-			} as DOMRect),
-	);
-	return canvas;
-}
-
-function createMockContainer(): HTMLDivElement {
-	const div = document.createElement('div');
-	Object.defineProperty(div, 'clientHeight', { value: 400 });
-	return div;
-}
-
-const defaultArgs = {
-	canvasRef: { current: createMockCanvas() },
-	containerRef: { current: createMockContainer() },
-	traceMetadata: MOCK_TRACE_METADATA,
-	viewStartRef: { current: 0 },
-	viewEndRef: { current: 1000 },
-	setViewStartTs: jest.fn(),
-	setViewEndTs: jest.fn(),
-	scrollTopRef: { current: 0 },
-	setScrollTop: jest.fn(),
-	totalHeight: 1000,
-};
-
-describe('useFlamegraphDrag', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		defaultArgs.viewStartRef.current = 0;
-		defaultArgs.viewEndRef.current = 1000;
-		defaultArgs.scrollTopRef.current = 0;
-	});
-
-	it('starts drag state on mousedown', () => {
-		const { result } = renderHook(() => useFlamegraphDrag(defaultArgs));
-
-		act(() => {
-			result.current.handleMouseDown(({
-				button: 0,
-				clientX: 100,
-				clientY: 50,
-				preventDefault: jest.fn(),
-			} as unknown) as React.MouseEvent);
-		});
-
-		expect(result.current.isDraggingRef.current).toBe(true);
-	});
-
-	it('ignores non-left button mousedown', () => {
-		const { result } = renderHook(() => useFlamegraphDrag(defaultArgs));
-
-		act(() => {
-			result.current.handleMouseDown(({
-				button: 1,
-				clientX: 100,
-				clientY: 50,
-				preventDefault: jest.fn(),
-			} as unknown) as React.MouseEvent);
-		});
-
-		expect(result.current.isDraggingRef.current).toBe(false);
-	});
-
-	it('updates pan/scroll on mousemove', () => {
-		const { result } = renderHook(() => useFlamegraphDrag(defaultArgs));
-
-		act(() => {
-			result.current.handleMouseDown(({
-				button: 0,
-				clientX: 100,
-				clientY: 50,
-				preventDefault: jest.fn(),
-			} as unknown) as React.MouseEvent);
-		});
-
-		act(() => {
-			result.current.handleMouseMove(({
-				clientX: 150,
-				clientY: 100,
-			} as unknown) as React.MouseEvent);
-		});
-
-		expect(defaultArgs.setViewStartTs).toHaveBeenCalled();
-		expect(defaultArgs.setViewEndTs).toHaveBeenCalled();
-		expect(defaultArgs.setScrollTop).toHaveBeenCalled();
-	});
-
-	it('does not set suppressClickRef when movement is below threshold', () => {
-		const { result } = renderHook(() => useFlamegraphDrag(defaultArgs));
-
-		act(() => {
-			result.current.handleMouseDown(({
-				button: 0,
-				clientX: 100,
-				clientY: 50,
-				preventDefault: jest.fn(),
-			} as unknown) as React.MouseEvent);
-		});
-
-		act(() => {
-			result.current.handleMouseMove(({
-				clientX: 102,
-				clientY: 51,
-			} as unknown) as React.MouseEvent);
-		});
-
-		act(() => {
-			result.current.handleMouseUp();
-		});
-
-		expect(result.current.suppressClickRef.current).toBe(false);
-	});
-
-	it('sets suppressClickRef when drag exceeds threshold', () => {
-		const { result } = renderHook(() => useFlamegraphDrag(defaultArgs));
-
-		act(() => {
-			result.current.handleMouseDown(({
-				button: 0,
-				clientX: 100,
-				clientY: 50,
-				preventDefault: jest.fn(),
-			} as unknown) as React.MouseEvent);
-		});
-
-		act(() => {
-			result.current.handleMouseMove(({
-				clientX: 150,
-				clientY: 100,
-			} as unknown) as React.MouseEvent);
-		});
-
-		act(() => {
-			result.current.handleMouseUp();
-		});
-
-		expect(result.current.suppressClickRef.current).toBe(true);
-	});
-
-	it('resets drag state on mouseup', () => {
-		const { result } = renderHook(() => useFlamegraphDrag(defaultArgs));
-
-		act(() => {
-			result.current.handleMouseDown(({
-				button: 0,
-				clientX: 100,
-				clientY: 50,
-				preventDefault: jest.fn(),
-			} as unknown) as React.MouseEvent);
-		});
-
-		act(() => {
-			result.current.handleMouseUp();
-		});
-
-		expect(result.current.isDraggingRef.current).toBe(false);
-	});
-
-	it('cancels drag on mouseleave', () => {
-		const { result } = renderHook(() => useFlamegraphDrag(defaultArgs));
-
-		act(() => {
-			result.current.handleMouseDown(({
-				button: 0,
-				clientX: 100,
-				clientY: 50,
-				preventDefault: jest.fn(),
-			} as unknown) as React.MouseEvent);
-		});
-
-		act(() => {
-			result.current.handleDragMouseLeave();
-		});
-
-		expect(result.current.isDraggingRef.current).toBe(false);
-	});
-});

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/useFlamegraphHover.test.ts

@@ -1,174 +0,0 @@
-import type React from 'react';
-import { act, renderHook } from '@testing-library/react';
-
-import { useFlamegraphHover } from '../hooks/useFlamegraphHover';
-import type { SpanRect } from '../types';
-import { MOCK_SPAN, MOCK_TRACE_METADATA } from './testUtils';
-
-function createMockCanvas(): HTMLCanvasElement {
-	const canvas = document.createElement('canvas');
-	canvas.width = 800;
-	canvas.height = 400;
-	canvas.getBoundingClientRect = jest.fn(
-		(): DOMRect =>
-			({
-				left: 0,
-				top: 0,
-				width: 800,
-				height: 400,
-				x: 0,
-				y: 0,
-				bottom: 400,
-				right: 800,
-				toJSON: (): Record<string, unknown> => ({}),
-			} as DOMRect),
-	);
-	return canvas;
-}
-
-const spanRect: SpanRect = {
-	span: { ...MOCK_SPAN, spanId: 'hover-span', name: 'test-span' },
-	x: 100,
-	y: 50,
-	width: 200,
-	height: 22,
-	level: 0,
-};
-
-const defaultArgs = {
-	canvasRef: { current: createMockCanvas() },
-	spanRectsRef: { current: [spanRect] },
-	traceMetadata: MOCK_TRACE_METADATA,
-	viewStartTs: MOCK_TRACE_METADATA.startTime,
-	viewEndTs: MOCK_TRACE_METADATA.endTime,
-	isDraggingRef: { current: false },
-	suppressClickRef: { current: false },
-	onSpanClick: jest.fn(),
-	isDarkMode: false,
-};
-
-describe('useFlamegraphHover', () => {
-	beforeEach(() => {
-		Object.defineProperty(window, 'devicePixelRatio', {
-			configurable: true,
-			value: 1,
-		});
-		jest.clearAllMocks();
-		defaultArgs.spanRectsRef.current = [spanRect];
-		defaultArgs.isDraggingRef.current = false;
-		defaultArgs.suppressClickRef.current = false;
-	});
-
-	it('sets hoveredSpanId and tooltipContent when hovering on span', () => {
-		const { result } = renderHook(() => useFlamegraphHover(defaultArgs));
-
-		act(() => {
-			result.current.handleHoverMouseMove({
-				clientX: 150,
-				clientY: 61,
-			} as React.MouseEvent);
-		});
-
-		expect(result.current.hoveredSpanId).toBe('hover-span');
-		expect(result.current.tooltipContent).not.toBeNull();
-		expect(result.current.tooltipContent?.spanName).toBe('test-span');
-		expect(result.current.tooltipContent?.clientX).toBe(150);
-		expect(result.current.tooltipContent?.clientY).toBe(61);
-	});
-
-	it('clears hover when moving to empty area', () => {
-		const { result } = renderHook(() => useFlamegraphHover(defaultArgs));
-
-		act(() => {
-			result.current.handleHoverMouseMove({
-				clientX: 150,
-				clientY: 61,
-			} as React.MouseEvent);
-		});
-
-		expect(result.current.hoveredSpanId).toBe('hover-span');
-
-		act(() => {
-			result.current.handleHoverMouseMove({
-				clientX: 10,
-				clientY: 10,
-			} as React.MouseEvent);
-		});
-
-		expect(result.current.hoveredSpanId).toBeNull();
-		expect(result.current.tooltipContent).toBeNull();
-	});
-
-	it('clears hover on mouse leave', () => {
-		const { result } = renderHook(() => useFlamegraphHover(defaultArgs));
-
-		act(() => {
-			result.current.handleHoverMouseMove({
-				clientX: 150,
-				clientY: 61,
-			} as React.MouseEvent);
-		});
-
-		act(() => {
-			result.current.handleHoverMouseLeave();
-		});
-
-		expect(result.current.hoveredSpanId).toBeNull();
-		expect(result.current.tooltipContent).toBeNull();
-	});
-
-	it('suppresses click when suppressClickRef is set', () => {
-		const { result } = renderHook(() => useFlamegraphHover(defaultArgs));
-		defaultArgs.suppressClickRef.current = true;
-
-		act(() => {
-			result.current.handleClick({
-				clientX: 150,
-				clientY: 61,
-			} as React.MouseEvent);
-		});
-
-		expect(defaultArgs.onSpanClick).not.toHaveBeenCalled();
-	});
-
-	it('calls onSpanClick when clicking on span', () => {
-		const { result } = renderHook(() => useFlamegraphHover(defaultArgs));
-
-		act(() => {
-			result.current.handleClick({
-				clientX: 150,
-				clientY: 61,
-			} as React.MouseEvent);
-		});
-
-		expect(defaultArgs.onSpanClick).toHaveBeenCalledWith('hover-span');
-	});
-
-	it('uses clientX/clientY for tooltip positioning', () => {
-		const { result } = renderHook(() => useFlamegraphHover(defaultArgs));
-
-		act(() => {
-			result.current.handleHoverMouseMove({
-				clientX: 200,
-				clientY: 60,
-			} as React.MouseEvent);
-		});
-
-		expect(result.current.tooltipContent?.clientX).toBe(200);
-		expect(result.current.tooltipContent?.clientY).toBe(60);
-	});
-
-	it('does not update hover during drag', () => {
-		const { result } = renderHook(() => useFlamegraphHover(defaultArgs));
-		defaultArgs.isDraggingRef.current = true;
-
-		act(() => {
-			result.current.handleHoverMouseMove({
-				clientX: 150,
-				clientY: 61,
-			} as React.MouseEvent);
-		});
-
-		expect(result.current.hoveredSpanId).toBeNull();
-	});
-});

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/useFlamegraphZoom.test.ts

@@ -1,279 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-
-import { DEFAULT_ROW_HEIGHT, MIN_VISIBLE_SPAN_MS } from '../constants';
-import { useFlamegraphZoom } from '../hooks/useFlamegraphZoom';
-import { MOCK_TRACE_METADATA } from './testUtils';
-
-function createMockCanvas(): HTMLCanvasElement {
-	const canvas = document.createElement('canvas');
-	canvas.width = 800;
-	canvas.height = 400;
-	canvas.getBoundingClientRect = jest.fn(
-		(): DOMRect =>
-			({
-				left: 0,
-				top: 0,
-				width: 800,
-				height: 400,
-				x: 0,
-				y: 0,
-				bottom: 400,
-				right: 800,
-				toJSON: (): Record<string, unknown> => ({}),
-			} as DOMRect),
-	);
-	return canvas;
-}
-
-describe('useFlamegraphZoom', () => {
-	const traceMetadata = { ...MOCK_TRACE_METADATA };
-
-	beforeEach(() => {
-		Object.defineProperty(window, 'devicePixelRatio', {
-			configurable: true,
-			value: 1,
-		});
-	});
-
-	it('handleResetZoom restores traceMetadata.startTime/endTime', () => {
-		const setViewStartTs = jest.fn();
-		const setViewEndTs = jest.fn();
-		const setRowHeight = jest.fn();
-		const viewStartRef = { current: 100 };
-		const viewEndRef = { current: 500 };
-		const rowHeightRef = { current: 30 };
-		const canvasRef = { current: createMockCanvas() };
-
-		const { result } = renderHook(() =>
-			useFlamegraphZoom({
-				canvasRef,
-				traceMetadata,
-				viewStartRef,
-				viewEndRef,
-				rowHeightRef,
-				setViewStartTs,
-				setViewEndTs,
-				setRowHeight,
-			}),
-		);
-
-		act(() => {
-			result.current.handleResetZoom();
-		});
-
-		expect(setViewStartTs).toHaveBeenCalledWith(traceMetadata.startTime);
-		expect(setViewEndTs).toHaveBeenCalledWith(traceMetadata.endTime);
-		expect(setRowHeight).toHaveBeenCalledWith(DEFAULT_ROW_HEIGHT);
-		expect(viewStartRef.current).toBe(traceMetadata.startTime);
-		expect(viewEndRef.current).toBe(traceMetadata.endTime);
-		expect(rowHeightRef.current).toBe(DEFAULT_ROW_HEIGHT);
-	});
-
-	it('wheel zoom in decreases visible time range', async () => {
-		const setViewStartTs = jest.fn();
-		const setViewEndTs = jest.fn();
-		const setRowHeight = jest.fn();
-		const viewStartRef = { current: traceMetadata.startTime };
-		const viewEndRef = { current: traceMetadata.endTime };
-		const rowHeightRef = { current: DEFAULT_ROW_HEIGHT };
-		const canvas = createMockCanvas();
-		const canvasRef = { current: canvas };
-
-		renderHook(() =>
-			useFlamegraphZoom({
-				canvasRef,
-				traceMetadata,
-				viewStartRef,
-				viewEndRef,
-				rowHeightRef,
-				setViewStartTs,
-				setViewEndTs,
-				setRowHeight,
-			}),
-		);
-
-		const initialSpan = viewEndRef.current - viewStartRef.current;
-
-		await act(async () => {
-			canvas.dispatchEvent(
-				new WheelEvent('wheel', {
-					clientX: 400,
-					deltaY: -100,
-					bubbles: true,
-				}),
-			);
-		});
-
-		await act(async () => {
-			await new Promise((r) => requestAnimationFrame(r));
-		});
-
-		expect(setViewStartTs).toHaveBeenCalled();
-		expect(setViewEndTs).toHaveBeenCalled();
-		const [newStart] = setViewStartTs.mock.calls[0] ?? [];
-		const [newEnd] = setViewEndTs.mock.calls[0] ?? [];
-		if (newStart != null && newEnd != null) {
-			const newSpan = newEnd - newStart;
-			expect(newSpan).toBeLessThan(initialSpan);
-		}
-	});
-
-	it('wheel zoom out increases visible time range', async () => {
-		const setViewStartTs = jest.fn();
-		const setViewEndTs = jest.fn();
-		const setRowHeight = jest.fn();
-		const halfSpan = (traceMetadata.endTime - traceMetadata.startTime) / 2;
-		const viewStartRef = { current: traceMetadata.startTime + halfSpan * 0.25 };
-		const viewEndRef = { current: traceMetadata.startTime + halfSpan * 0.75 };
-		const rowHeightRef = { current: DEFAULT_ROW_HEIGHT };
-		const canvas = createMockCanvas();
-		const canvasRef = { current: canvas };
-
-		renderHook(() =>
-			useFlamegraphZoom({
-				canvasRef,
-				traceMetadata,
-				viewStartRef,
-				viewEndRef,
-				rowHeightRef,
-				setViewStartTs,
-				setViewEndTs,
-				setRowHeight,
-			}),
-		);
-
-		const initialSpan = viewEndRef.current - viewStartRef.current;
-
-		await act(async () => {
-			canvas.dispatchEvent(
-				new WheelEvent('wheel', {
-					clientX: 400,
-					deltaY: 100,
-					bubbles: true,
-				}),
-			);
-		});
-
-		await act(async () => {
-			await new Promise((r) => requestAnimationFrame(r));
-		});
-
-		expect(setViewStartTs).toHaveBeenCalled();
-		expect(setViewEndTs).toHaveBeenCalled();
-		const [newStart] = setViewStartTs.mock.calls[0] ?? [];
-		const [newEnd] = setViewEndTs.mock.calls[0] ?? [];
-		if (newStart != null && newEnd != null) {
-			const newSpan = newEnd - newStart;
-			expect(newSpan).toBeGreaterThanOrEqual(initialSpan);
-		}
-	});
-
-	it('clamps zoom to MIN_VISIBLE_SPAN_MS', async () => {
-		const setViewStartTs = jest.fn();
-		const setViewEndTs = jest.fn();
-		const setRowHeight = jest.fn();
-		const viewStartRef = { current: traceMetadata.startTime };
-		const viewEndRef = { current: traceMetadata.startTime + 100 };
-		const rowHeightRef = { current: DEFAULT_ROW_HEIGHT };
-		const canvas = createMockCanvas();
-		const canvasRef = { current: canvas };
-
-		renderHook(() =>
-			useFlamegraphZoom({
-				canvasRef,
-				traceMetadata,
-				viewStartRef,
-				viewEndRef,
-				rowHeightRef,
-				setViewStartTs,
-				setViewEndTs,
-				setRowHeight,
-			}),
-		);
-
-		await act(async () => {
-			canvas.dispatchEvent(
-				new WheelEvent('wheel', {
-					clientX: 400,
-					deltaY: 10000,
-					bubbles: true,
-				}),
-			);
-		});
-
-		await act(async () => {
-			await new Promise((r) => requestAnimationFrame(r));
-		});
-
-		const [newStart] = setViewStartTs.mock.calls[0] ?? [];
-		const [newEnd] = setViewEndTs.mock.calls[0] ?? [];
-		if (newStart != null && newEnd != null) {
-			const newSpan = newEnd - newStart;
-			expect(newSpan).toBeGreaterThanOrEqual(MIN_VISIBLE_SPAN_MS);
-		}
-	});
-
-	it('clamps viewStart/viewEnd to trace bounds', async () => {
-		const setViewStartTs = jest.fn();
-		const setViewEndTs = jest.fn();
-		const setRowHeight = jest.fn();
-		const viewStartRef = { current: traceMetadata.startTime };
-		const viewEndRef = { current: traceMetadata.endTime };
-		const rowHeightRef = { current: DEFAULT_ROW_HEIGHT };
-		const canvas = createMockCanvas();
-		const canvasRef = { current: canvas };
-
-		renderHook(() =>
-			useFlamegraphZoom({
-				canvasRef,
-				traceMetadata,
-				viewStartRef,
-				viewEndRef,
-				rowHeightRef,
-				setViewStartTs,
-				setViewEndTs,
-				setRowHeight,
-			}),
-		);
-
-		await act(async () => {
-			canvas.dispatchEvent(
-				new WheelEvent('wheel', {
-					clientX: 400,
-					deltaY: -5000,
-					bubbles: true,
-				}),
-			);
-		});
-
-		await act(async () => {
-			await new Promise((r) => requestAnimationFrame(r));
-		});
-
-		const [newStart] = setViewStartTs.mock.calls[0] ?? [];
-		const [newEnd] = setViewEndTs.mock.calls[0] ?? [];
-		if (newStart != null && newEnd != null) {
-			expect(newStart).toBeGreaterThanOrEqual(traceMetadata.startTime);
-			expect(newEnd).toBeLessThanOrEqual(traceMetadata.endTime);
-		}
-	});
-
-	it('returns isOverFlamegraphRef', () => {
-		const canvasRef = { current: createMockCanvas() };
-		const { result } = renderHook(() =>
-			useFlamegraphZoom({
-				canvasRef,
-				traceMetadata,
-				viewStartRef: { current: 0 },
-				viewEndRef: { current: 1000 },
-				rowHeightRef: { current: 24 },
-				setViewStartTs: jest.fn(),
-				setViewEndTs: jest.fn(),
-				setRowHeight: jest.fn(),
-			}),
-		);
-
-		expect(result.current.isOverFlamegraphRef).toBeDefined();
-		expect(result.current.isOverFlamegraphRef.current).toBe(false);
-	});
-});

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/useScrollToSpan.test.tsx

@@ -1,212 +0,0 @@
-import type { Dispatch, SetStateAction } from 'react';
-import { useRef } from 'react';
-import { act, render, waitFor } from '@testing-library/react';
-
-import { useScrollToSpan } from '../hooks/useScrollToSpan';
-import { MOCK_SPANS, MOCK_TRACE_METADATA } from './testUtils';
-
-function TestWrapper({
-	firstSpanAtFetchLevel,
-	spans,
-	traceMetadata,
-	setViewStartTs,
-	setViewEndTs,
-	setScrollTop,
-}: {
-	firstSpanAtFetchLevel: string;
-	spans: typeof MOCK_SPANS;
-	traceMetadata: typeof MOCK_TRACE_METADATA;
-	setViewStartTs: Dispatch<SetStateAction<number>>;
-	setViewEndTs: Dispatch<SetStateAction<number>>;
-	setScrollTop: Dispatch<SetStateAction<number>>;
-}): JSX.Element {
-	const containerRef = useRef<HTMLDivElement>(null);
-	const viewStartRef = useRef(traceMetadata.startTime);
-	const viewEndRef = useRef(traceMetadata.endTime);
-	const scrollTopRef = useRef(0);
-
-	useScrollToSpan({
-		firstSpanAtFetchLevel,
-		spans,
-		traceMetadata,
-		containerRef,
-		viewStartRef,
-		viewEndRef,
-		scrollTopRef,
-		rowHeight: 24,
-		setViewStartTs,
-		setViewEndTs,
-		setScrollTop,
-	});
-
-	return <div ref={containerRef} data-testid="container" />;
-}
-
-describe('useScrollToSpan', () => {
-	beforeEach(() => {
-		Object.defineProperty(HTMLElement.prototype, 'clientHeight', {
-			configurable: true,
-			value: 400,
-		});
-	});
-
-	it('does not update when firstSpanAtFetchLevel is empty', async () => {
-		const setViewStartTs = jest.fn();
-		const setViewEndTs = jest.fn();
-		const setScrollTop = jest.fn();
-
-		render(
-			<TestWrapper
-				firstSpanAtFetchLevel=""
-				spans={MOCK_SPANS}
-				traceMetadata={MOCK_TRACE_METADATA}
-				setViewStartTs={setViewStartTs}
-				setViewEndTs={setViewEndTs}
-				setScrollTop={setScrollTop}
-			/>,
-		);
-
-		await waitFor(() => {
-			expect(setViewStartTs).not.toHaveBeenCalled();
-			expect(setViewEndTs).not.toHaveBeenCalled();
-			expect(setScrollTop).not.toHaveBeenCalled();
-		});
-	});
-
-	it('does not update when spans are empty', async () => {
-		const setViewStartTs = jest.fn();
-		const setViewEndTs = jest.fn();
-		const setScrollTop = jest.fn();
-
-		render(
-			<TestWrapper
-				firstSpanAtFetchLevel="root"
-				spans={[]}
-				traceMetadata={MOCK_TRACE_METADATA}
-				setViewStartTs={setViewStartTs}
-				setViewEndTs={setViewEndTs}
-				setScrollTop={setScrollTop}
-			/>,
-		);
-
-		await waitFor(() => {
-			expect(setViewStartTs).not.toHaveBeenCalled();
-			expect(setViewEndTs).not.toHaveBeenCalled();
-			expect(setScrollTop).not.toHaveBeenCalled();
-		});
-	});
-
-	it('does not update when target span not found', async () => {
-		const setViewStartTs = jest.fn();
-		const setViewEndTs = jest.fn();
-		const setScrollTop = jest.fn();
-
-		render(
-			<TestWrapper
-				firstSpanAtFetchLevel="nonexistent"
-				spans={MOCK_SPANS}
-				traceMetadata={MOCK_TRACE_METADATA}
-				setViewStartTs={setViewStartTs}
-				setViewEndTs={setViewEndTs}
-				setScrollTop={setScrollTop}
-			/>,
-		);
-
-		await waitFor(() => {
-			expect(setViewStartTs).not.toHaveBeenCalled();
-			expect(setViewEndTs).not.toHaveBeenCalled();
-			expect(setScrollTop).not.toHaveBeenCalled();
-		});
-	});
-
-	it('calls setters when target span found', async () => {
-		const setViewStartTs = jest.fn();
-		const setViewEndTs = jest.fn();
-		const setScrollTop = jest.fn();
-
-		const { getByTestId } = render(
-			<TestWrapper
-				firstSpanAtFetchLevel="grandchild"
-				spans={MOCK_SPANS}
-				traceMetadata={MOCK_TRACE_METADATA}
-				setViewStartTs={setViewStartTs}
-				setViewEndTs={setViewEndTs}
-				setScrollTop={setScrollTop}
-			/>,
-		);
-
-		expect(getByTestId('container')).toBeInTheDocument();
-
-		await waitFor(() => {
-			expect(setViewStartTs).toHaveBeenCalled();
-			expect(setViewEndTs).toHaveBeenCalled();
-			expect(setScrollTop).toHaveBeenCalled();
-		});
-
-		const [viewStart] = setViewStartTs.mock.calls[0];
-		const [viewEnd] = setViewEndTs.mock.calls[0];
-		const [scrollTop] = setScrollTop.mock.calls[0];
-
-		expect(viewEnd - viewStart).toBeGreaterThan(0);
-		expect(viewStart).toBeGreaterThanOrEqual(MOCK_TRACE_METADATA.startTime);
-		expect(viewEnd).toBeLessThanOrEqual(MOCK_TRACE_METADATA.endTime);
-		expect(scrollTop).toBeGreaterThanOrEqual(0);
-	});
-
-	it('centers span vertically (scrollTop centers span row)', async () => {
-		const setScrollTop = jest.fn();
-
-		await act(async () => {
-			render(
-				<TestWrapper
-					firstSpanAtFetchLevel="grandchild"
-					spans={MOCK_SPANS}
-					traceMetadata={MOCK_TRACE_METADATA}
-					setViewStartTs={jest.fn()}
-					setViewEndTs={jest.fn()}
-					setScrollTop={setScrollTop}
-				/>,
-			);
-		});
-
-		await waitFor(() => expect(setScrollTop).toHaveBeenCalled());
-
-		const [scrollTop] = setScrollTop.mock.calls[0];
-		const levelIndex = 2;
-		const rowHeight = 24;
-		const viewportHeight = 400;
-		const expectedCenter =
-			levelIndex * rowHeight - viewportHeight / 2 + rowHeight / 2;
-		expect(scrollTop).toBeCloseTo(Math.max(0, expectedCenter), -1);
-	});
-
-	it('zooms horizontally to span with 2x duration padding', async () => {
-		const setViewStartTs = jest.fn();
-		const setViewEndTs = jest.fn();
-
-		await act(async () => {
-			render(
-				<TestWrapper
-					firstSpanAtFetchLevel="root"
-					spans={MOCK_SPANS}
-					traceMetadata={MOCK_TRACE_METADATA}
-					setViewStartTs={setViewStartTs}
-					setViewEndTs={setViewEndTs}
-					setScrollTop={jest.fn()}
-				/>,
-			);
-		});
-
-		await waitFor(() => {
-			expect(setViewStartTs).toHaveBeenCalled();
-			expect(setViewEndTs).toHaveBeenCalled();
-		});
-
-		const [viewStart] = setViewStartTs.mock.calls[0];
-		const [viewEnd] = setViewEndTs.mock.calls[0];
-		const visibleWindow = viewEnd - viewStart;
-		const rootSpan = MOCK_SPANS[0][0];
-		const spanDurationMs = rootSpan.durationNano / 1e6;
-		expect(visibleWindow).toBeGreaterThanOrEqual(Math.max(spanDurationMs * 2, 5));
-	});
-});

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/utils.math.test.ts

@@ -1,135 +0,0 @@
-import {
-	clamp,
-	findSpanById,
-	formatDuration,
-	getFlamegraphRowMetrics,
-} from '../utils';
-import { MOCK_SPANS } from './testUtils';
-
-jest.mock('container/TraceDetail/utils', () => ({
-	convertTimeToRelevantUnit: (
-		valueMs: number,
-	): { time: number; timeUnitName: string } => {
-		if (valueMs === 0) {
-			return { time: 0, timeUnitName: 'ms' };
-		}
-		if (valueMs < 1) {
-			return { time: valueMs, timeUnitName: 'ms' };
-		}
-		if (valueMs < 1000) {
-			return { time: valueMs, timeUnitName: 'ms' };
-		}
-		if (valueMs < 60_000) {
-			return { time: valueMs / 1000, timeUnitName: 's' };
-		}
-		if (valueMs < 3_600_000) {
-			return { time: valueMs / 60_000, timeUnitName: 'm' };
-		}
-		return { time: valueMs / 3_600_000, timeUnitName: 'hr' };
-	},
-}));
-
-describe('Pure Math and Data Utils', () => {
-	describe('clamp', () => {
-		it('returns value when within range', () => {
-			expect(clamp(5, 0, 10)).toBe(5);
-			expect(clamp(-3, -5, 5)).toBe(-3);
-		});
-
-		it('returns min when value is below min', () => {
-			expect(clamp(-1, 0, 10)).toBe(0);
-			expect(clamp(2, 5, 10)).toBe(5);
-		});
-
-		it('returns max when value is above max', () => {
-			expect(clamp(11, 0, 10)).toBe(10);
-			expect(clamp(100, 0, 50)).toBe(50);
-		});
-
-		it('handles min === max', () => {
-			expect(clamp(5, 7, 7)).toBe(7);
-			expect(clamp(7, 7, 7)).toBe(7);
-		});
-	});
-
-	describe('findSpanById', () => {
-		it('finds span in first level', () => {
-			const result = findSpanById(MOCK_SPANS, 'root');
-			expect(result).not.toBeNull();
-			expect(result?.span.spanId).toBe('root');
-			expect(result?.levelIndex).toBe(0);
-		});
-
-		it('finds span in nested level', () => {
-			const result = findSpanById(MOCK_SPANS, 'grandchild');
-			expect(result).not.toBeNull();
-			expect(result?.span.spanId).toBe('grandchild');
-			expect(result?.levelIndex).toBe(2);
-		});
-
-		it('returns null when span not found', () => {
-			expect(findSpanById(MOCK_SPANS, 'nonexistent')).toBeNull();
-		});
-
-		it('handles empty spans', () => {
-			expect(findSpanById([], 'root')).toBeNull();
-			expect(findSpanById([[], []], 'root')).toBeNull();
-		});
-	});
-
-	describe('getFlamegraphRowMetrics', () => {
-		it('computes normal row height metrics (24px)', () => {
-			const m = getFlamegraphRowMetrics(24);
-			expect(m.ROW_HEIGHT).toBe(24);
-			expect(m.SPAN_BAR_HEIGHT).toBe(22);
-			expect(m.SPAN_BAR_Y_OFFSET).toBe(1);
-			expect(m.EVENT_DOT_SIZE).toBe(6);
-		});
-
-		it('clamps span bar height to max for large row heights', () => {
-			const m = getFlamegraphRowMetrics(100);
-			expect(m.SPAN_BAR_HEIGHT).toBe(22);
-			expect(m.SPAN_BAR_Y_OFFSET).toBe(39);
-		});
-
-		it('clamps span bar height to min for small row heights', () => {
-			const m = getFlamegraphRowMetrics(6);
-			expect(m.SPAN_BAR_HEIGHT).toBe(8);
-			// spanBarYOffset = floor((6-8)/2) = -1 when bar exceeds row height
-			expect(m.SPAN_BAR_Y_OFFSET).toBe(-1);
-		});
-
-		it('clamps event dot size within min/max', () => {
-			const mSmall = getFlamegraphRowMetrics(6);
-			expect(mSmall.EVENT_DOT_SIZE).toBe(4);
-
-			const mLarge = getFlamegraphRowMetrics(24);
-			expect(mLarge.EVENT_DOT_SIZE).toBe(6);
-		});
-	});
-
-	describe('formatDuration', () => {
-		it('formats nanos as ms', () => {
-			// 1e6 nanos = 1ms
-			expect(formatDuration(1_000_000)).toBe('1ms');
-		});
-
-		it('formats larger durations as s/m/hr', () => {
-			// 2e9 nanos = 2000ms = 2s
-			expect(formatDuration(2_000_000_000)).toBe('2s');
-		});
-
-		it('formats zero duration', () => {
-			expect(formatDuration(0)).toBe('0ms');
-		});
-
-		it('formats very small values', () => {
-			// 1000 nanos = 0.001ms → mock returns { time: 0.001, timeUnitName: 'ms' }
-			expect(formatDuration(1000)).toBe('0ms');
-		});
-
-		it('formats decimal seconds correctly', () => {
-			expect(formatDuration(1_500_000_000)).toBe('1.5s');
-		});
-	});
-});

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/utils.presentation.test.ts

@@ -1,67 +0,0 @@
-import { getSpanColor } from '../utils';
-import { MOCK_SPAN } from './testUtils';
-
-const mockGenerateColor = jest.fn();
-
-jest.mock('lib/uPlotLib/utils/generateColor', () => ({
-	generateColor: (key: string, colorMap: Record<string, string>): string =>
-		mockGenerateColor(key, colorMap),
-}));
-
-describe('Presentation / Styling Utils', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		mockGenerateColor.mockReturnValue('#2F80ED');
-	});
-
-	describe('getSpanColor', () => {
-		it('uses generated service color for normal span', () => {
-			mockGenerateColor.mockReturnValue('#1890ff');
-
-			const color = getSpanColor({
-				span: { ...MOCK_SPAN, hasError: false },
-				isDarkMode: false,
-			});
-
-			expect(mockGenerateColor).toHaveBeenCalledWith(
-				MOCK_SPAN.serviceName,
-				expect.any(Object),
-			);
-			expect(color).toBe('#1890ff');
-		});
-
-		it('overrides with error color in light mode when span has error', () => {
-			mockGenerateColor.mockReturnValue('#1890ff');
-
-			const color = getSpanColor({
-				span: { ...MOCK_SPAN, hasError: true },
-				isDarkMode: false,
-			});
-
-			expect(color).toBe('rgb(220, 38, 38)');
-		});
-
-		it('overrides with error color in dark mode when span has error', () => {
-			mockGenerateColor.mockReturnValue('#1890ff');
-
-			const color = getSpanColor({
-				span: { ...MOCK_SPAN, hasError: true },
-				isDarkMode: true,
-			});
-
-			expect(color).toBe('rgb(239, 68, 68)');
-		});
-
-		it('passes serviceName to generateColor', () => {
-			getSpanColor({
-				span: { ...MOCK_SPAN, serviceName: 'my-service' },
-				isDarkMode: false,
-			});
-
-			expect(mockGenerateColor).toHaveBeenCalledWith(
-				'my-service',
-				expect.any(Object),
-			);
-		});
-	});
-});

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/constants.ts

@@ -1,36 +0,0 @@
-export const ROW_HEIGHT = 24;
-export const SPAN_BAR_HEIGHT = 22;
-export const SPAN_BAR_Y_OFFSET = Math.floor((ROW_HEIGHT - SPAN_BAR_HEIGHT) / 2);
-export const EVENT_DOT_SIZE = 6;
-
-// Span bar sizing relative to row height (used by getFlamegraphRowMetrics)
-export const SPAN_BAR_HEIGHT_RATIO = SPAN_BAR_HEIGHT / ROW_HEIGHT;
-export const MIN_SPAN_BAR_HEIGHT = 8;
-export const MAX_SPAN_BAR_HEIGHT = SPAN_BAR_HEIGHT;
-
-// Event dot sizing relative to span bar height
-export const EVENT_DOT_SIZE_RATIO = EVENT_DOT_SIZE / SPAN_BAR_HEIGHT;
-export const MIN_EVENT_DOT_SIZE = 4;
-export const MAX_EVENT_DOT_SIZE = EVENT_DOT_SIZE;
-
-export const LABEL_FONT = '11px Inter, sans-serif';
-export const LABEL_PADDING_X = 8;
-export const MIN_WIDTH_FOR_NAME = 30;
-export const MIN_WIDTH_FOR_NAME_AND_DURATION = 80;
-
-// Dynamic row height (vertical zoom) -- disabled for now (MIN === MAX)
-export const MIN_ROW_HEIGHT = 24;
-export const MAX_ROW_HEIGHT = 24;
-export const DEFAULT_ROW_HEIGHT = MIN_ROW_HEIGHT;
-
-// Zoom intensity -- how fast zoom reacts to wheel/pinch delta
-export const PINCH_ZOOM_INTENSITY_H = 0.01;
-export const SCROLL_ZOOM_INTENSITY_H = 0.0015;
-export const PINCH_ZOOM_INTENSITY_V = 0.008;
-export const SCROLL_ZOOM_INTENSITY_V = 0.001;
-
-// Minimum visible time span in ms (prevents zooming to sub-pixel)
-export const MIN_VISIBLE_SPAN_MS = 5;
-
-// Selected span style (dashed border)
-export const DASHED_BORDER_LINE_DASH = [4, 2];

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useCanvasSetup.ts

@@ -1,55 +0,0 @@
-import { RefObject, useCallback, useEffect } from 'react';
-
-export function useCanvasSetup(
-	canvasRef: RefObject<HTMLCanvasElement>,
-	containerRef: RefObject<HTMLDivElement>,
-	onDraw: () => void,
-): void {
-	const updateCanvasSize = useCallback(() => {
-		const canvas = canvasRef.current;
-		const container = containerRef.current;
-		if (!canvas || !container) {
-			return;
-		}
-
-		const dpr = window.devicePixelRatio || 1;
-		const rect = container.getBoundingClientRect();
-		const viewportHeight = container.clientHeight;
-
-		canvas.style.width = `${rect.width}px`;
-		canvas.style.height = `${viewportHeight}px`;
-
-		const newWidth = Math.floor(rect.width * dpr);
-		const newHeight = Math.floor(viewportHeight * dpr);
-
-		if (canvas.width !== newWidth || canvas.height !== newHeight) {
-			canvas.width = newWidth;
-			canvas.height = newHeight;
-			onDraw();
-		}
-	}, [canvasRef, containerRef, onDraw]);
-
-	useEffect(() => {
-		const container = containerRef.current;
-		if (!container) {
-			return (): void => {};
-		}
-
-		const resizeObserver = new ResizeObserver(updateCanvasSize);
-		resizeObserver.observe(container);
-		updateCanvasSize();
-
-		// when dpr changes, update the canvas size
-		const dprQuery = window.matchMedia('(resolution: 1dppx)');
-		dprQuery.addEventListener('change', updateCanvasSize);
-
-		return (): void => {
-			resizeObserver.disconnect();
-			dprQuery.removeEventListener('change', updateCanvasSize);
-		};
-	}, [containerRef, updateCanvasSize]);
-
-	useEffect(() => {
-		onDraw();
-	}, [onDraw]);
-}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useFlamegraphDrag.ts

@@ -1,178 +0,0 @@
-import {
-	Dispatch,
-	MouseEvent as ReactMouseEvent,
-	MutableRefObject,
-	RefObject,
-	SetStateAction,
-	useCallback,
-	useRef,
-} from 'react';
-
-import { ITraceMetadata } from '../types';
-import { clamp } from '../utils';
-
-interface UseFlamegraphDragArgs {
-	canvasRef: RefObject<HTMLCanvasElement>;
-	containerRef: RefObject<HTMLDivElement>;
-	traceMetadata: ITraceMetadata;
-	viewStartRef: MutableRefObject<number>;
-	viewEndRef: MutableRefObject<number>;
-	setViewStartTs: Dispatch<SetStateAction<number>>;
-	setViewEndTs: Dispatch<SetStateAction<number>>;
-	scrollTopRef: MutableRefObject<number>;
-	setScrollTop: Dispatch<SetStateAction<number>>;
-	totalHeight: number;
-}
-
-interface UseFlamegraphDragResult {
-	handleMouseDown: (e: ReactMouseEvent) => void;
-	handleMouseMove: (e: ReactMouseEvent) => void;
-	handleMouseUp: () => void;
-	handleDragMouseLeave: () => void;
-	suppressClickRef: MutableRefObject<boolean>;
-	isDraggingRef: MutableRefObject<boolean>;
-}
-
-const DRAG_THRESHOLD = 5;
-
-export function useFlamegraphDrag(
-	args: UseFlamegraphDragArgs,
-): UseFlamegraphDragResult {
-	const {
-		canvasRef,
-		containerRef,
-		traceMetadata,
-		viewStartRef,
-		viewEndRef,
-		setViewStartTs,
-		setViewEndTs,
-		scrollTopRef,
-		setScrollTop,
-		totalHeight,
-	} = args;
-
-	const isDraggingRef = useRef(false);
-	const dragStartRef = useRef<{ x: number; y: number } | null>(null);
-	const dragDistanceRef = useRef(0);
-	const suppressClickRef = useRef(false);
-
-	const clampScrollTop = useCallback(
-		(next: number): number => {
-			const container = containerRef.current;
-			if (!container) {
-				return 0;
-			}
-			const viewportHeight = container.clientHeight;
-			const maxScroll = Math.max(0, totalHeight - viewportHeight);
-			return clamp(next, 0, maxScroll);
-		},
-		[containerRef, totalHeight],
-	);
-
-	const handleMouseDown = useCallback(
-		(event: ReactMouseEvent): void => {
-			if (event.button !== 0) {
-				return;
-			}
-			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';
-			}
-		},
-		[canvasRef],
-	);
-
-	const handleMouseMove = useCallback(
-		(event: ReactMouseEvent): void => {
-			if (!isDraggingRef.current || !dragStartRef.current) {
-				return;
-			}
-
-			const canvas = canvasRef.current;
-			if (!canvas) {
-				return;
-			}
-
-			const rect = canvas.getBoundingClientRect();
-			const deltaX = event.clientX - dragStartRef.current.x;
-			const deltaY = event.clientY - dragStartRef.current.y;
-
-			dragDistanceRef.current = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
-
-			// --- Horizontal pan ---
-			const timeSpan = viewEndRef.current - viewStartRef.current;
-			const deltaTime = (deltaX / rect.width) * timeSpan;
-
-			const newStart = viewStartRef.current - deltaTime;
-			const clampedStart = clamp(
-				newStart,
-				traceMetadata.startTime,
-				traceMetadata.endTime - timeSpan,
-			);
-			const clampedEnd = clampedStart + timeSpan;
-
-			viewStartRef.current = clampedStart;
-			viewEndRef.current = clampedEnd;
-			setViewStartTs(clampedStart);
-			setViewEndTs(clampedEnd);
-
-			// --- Vertical scroll pan ---
-			const nextScrollTop = clampScrollTop(scrollTopRef.current - deltaY);
-			scrollTopRef.current = nextScrollTop;
-			setScrollTop(nextScrollTop);
-
-			dragStartRef.current = { x: event.clientX, y: event.clientY };
-		},
-		[
-			canvasRef,
-			traceMetadata,
-			viewStartRef,
-			viewEndRef,
-			setViewStartTs,
-			setViewEndTs,
-			scrollTopRef,
-			setScrollTop,
-			clampScrollTop,
-		],
-	);
-
-	const handleMouseUp = useCallback((): void => {
-		const wasDrag = dragDistanceRef.current > DRAG_THRESHOLD;
-		suppressClickRef.current = wasDrag;
-
-		isDraggingRef.current = false;
-		dragStartRef.current = null;
-		dragDistanceRef.current = 0;
-
-		const canvas = canvasRef.current;
-		if (canvas) {
-			canvas.style.cursor = 'grab';
-		}
-	}, [canvasRef]);
-
-	const handleDragMouseLeave = useCallback((): void => {
-		isDraggingRef.current = false;
-		dragStartRef.current = null;
-		dragDistanceRef.current = 0;
-
-		const canvas = canvasRef.current;
-		if (canvas) {
-			canvas.style.cursor = 'grab';
-		}
-	}, [canvasRef]);
-
-	return {
-		handleMouseDown,
-		handleMouseMove,
-		handleMouseUp,
-		handleDragMouseLeave,
-		suppressClickRef,
-		isDraggingRef,
-	};
-}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useFlamegraphDraw.ts

@@ -1,222 +0,0 @@
-import React, { RefObject, useCallback, useRef } from 'react';
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
-
-import { SpanRect } from '../types';
-import {
-	clamp,
-	drawSpanBar,
-	FlamegraphRowMetrics,
-	getFlamegraphRowMetrics,
-	getSpanColor,
-} from '../utils';
-
-interface UseFlamegraphDrawArgs {
-	canvasRef: RefObject<HTMLCanvasElement>;
-	containerRef: RefObject<HTMLDivElement>;
-	spans: FlamegraphSpan[][];
-	viewStartTs: number;
-	viewEndTs: number;
-	scrollTop: number;
-	rowHeight: number;
-	selectedSpanId: string | undefined;
-	hoveredSpanId: string;
-	isDarkMode: boolean;
-	spanRectsRef?: React.MutableRefObject<SpanRect[]>;
-}
-
-interface UseFlamegraphDrawResult {
-	drawFlamegraph: () => void;
-	spanRectsRef: RefObject<SpanRect[]>;
-}
-
-const OVERSCAN_ROWS = 4;
-
-interface DrawLevelArgs {
-	ctx: CanvasRenderingContext2D;
-	levelSpans: FlamegraphSpan[];
-	levelIndex: number;
-	y: number;
-	viewStartTs: number;
-	timeSpan: number;
-	cssWidth: number;
-	selectedSpanId: string | undefined;
-	hoveredSpanId: string;
-	isDarkMode: boolean;
-	spanRectsArray: SpanRect[];
-	metrics: FlamegraphRowMetrics;
-}
-
-function drawLevel(args: DrawLevelArgs): void {
-	const {
-		ctx,
-		levelSpans,
-		levelIndex,
-		y,
-		viewStartTs,
-		timeSpan,
-		cssWidth,
-		selectedSpanId,
-		hoveredSpanId,
-		isDarkMode,
-		spanRectsArray,
-		metrics,
-	} = args;
-
-	const viewEndTs = viewStartTs + timeSpan;
-
-	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 -- skip spans entirely outside the visible time window
-		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;
-			}
-		}
-
-		// Minimum 1px width so tiny spans remain visible
-		width = clamp(width, 1, Infinity);
-
-		const color = getSpanColor({ span, isDarkMode });
-
-		drawSpanBar({
-			ctx,
-			span,
-			x: Math.max(0, leftOffset),
-			y,
-			width,
-			levelIndex,
-			spanRectsArray,
-			color,
-			isDarkMode,
-			metrics,
-			selectedSpanId,
-			hoveredSpanId,
-		});
-	}
-}
-
-export function useFlamegraphDraw(
-	args: UseFlamegraphDrawArgs,
-): UseFlamegraphDrawResult {
-	const {
-		canvasRef,
-		containerRef,
-		spans,
-		viewStartTs,
-		viewEndTs,
-		scrollTop,
-		rowHeight,
-		selectedSpanId,
-		hoveredSpanId,
-		isDarkMode,
-		spanRectsRef: spanRectsRefProp,
-	} = args;
-
-	const spanRectsRefInternal = useRef<SpanRect[]>([]);
-	const spanRectsRef = spanRectsRefProp ?? spanRectsRefInternal;
-
-	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;
-		const metrics = getFlamegraphRowMetrics(rowHeight);
-
-		// ---- Vertical clipping window ----
-		const viewportHeight = container.clientHeight;
-
-		//starts drawing OVERSCAN_ROWS(4) rows above the visible area.
-		const firstLevel = Math.max(
-			0,
-			Math.floor(scrollTop / metrics.ROW_HEIGHT) - OVERSCAN_ROWS,
-		);
-		// adds 2*OVERSCAN_ROWS extra rows above and below the visible area.
-		const visibleLevelCount =
-			Math.ceil(viewportHeight / metrics.ROW_HEIGHT) + 2 * OVERSCAN_ROWS;
-
-		const lastLevel = Math.min(spans.length - 1, firstLevel + visibleLevelCount);
-
-		ctx.clearRect(0, 0, cssWidth, viewportHeight);
-
-		const spanRectsArray: SpanRect[] = [];
-
-		// ---- Draw only visible levels ----
-		for (let levelIndex = firstLevel; levelIndex <= lastLevel; levelIndex++) {
-			const levelSpans = spans[levelIndex];
-			if (!levelSpans) {
-				continue;
-			}
-
-			drawLevel({
-				ctx,
-				levelSpans,
-				levelIndex,
-				y: levelIndex * metrics.ROW_HEIGHT - scrollTop,
-				viewStartTs,
-				timeSpan,
-				cssWidth,
-				selectedSpanId,
-				hoveredSpanId,
-				isDarkMode,
-				spanRectsArray,
-				metrics,
-			});
-		}
-
-		spanRectsRef.current = spanRectsArray;
-	}, [
-		canvasRef,
-		containerRef,
-		spanRectsRef,
-		spans,
-		viewStartTs,
-		viewEndTs,
-		scrollTop,
-		rowHeight,
-		selectedSpanId,
-		hoveredSpanId,
-		isDarkMode,
-	]);
-
-	// TODO: spanRectsRef is a flat array — hover scans all visible rects O(N).
-	// Upgrade to per-level buckets: spanRects[levelIndex] = [...] so hover can
-	// compute level from mouseY / ROW_HEIGHT and scan only that row.
-	// Further: binary search within a level by x (spans are sorted by start time)
-	// to reduce hover cost from O(N) to O(log N).
-	return { drawFlamegraph, spanRectsRef };
-}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useFlamegraphHover.ts

@@ -1,214 +0,0 @@
-import {
-	Dispatch,
-	MouseEvent as ReactMouseEvent,
-	MutableRefObject,
-	RefObject,
-	SetStateAction,
-	useCallback,
-	useState,
-} from 'react';
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
-
-import { SpanRect } from '../types';
-import { ITraceMetadata } from '../types';
-import { getSpanColor } from '../utils';
-
-function getCanvasPointer(
-	canvas: HTMLCanvasElement,
-	clientX: number,
-	clientY: number,
-): { cssX: number; cssY: number } | null {
-	const rect = canvas.getBoundingClientRect();
-	const dpr = window.devicePixelRatio || 1;
-	const cssWidth = canvas.width / dpr;
-	const cssHeight = canvas.height / dpr;
-	const cssX = (clientX - rect.left) * (cssWidth / rect.width);
-	const cssY = (clientY - rect.top) * (cssHeight / rect.height);
-	return { cssX, cssY };
-}
-
-function findSpanAtPosition(
-	cssX: number,
-	cssY: number,
-	spanRects: SpanRect[],
-): FlamegraphSpan | null {
-	for (let i = spanRects.length - 1; i >= 0; i--) {
-		const r = spanRects[i];
-		if (
-			cssX >= r.x &&
-			cssX <= r.x + r.width &&
-			cssY >= r.y &&
-			cssY <= r.y + r.height
-		) {
-			return r.span;
-		}
-	}
-	return null;
-}
-
-export interface TooltipContent {
-	spanName: string;
-	status: 'ok' | 'warning' | 'error';
-	startMs: number;
-	durationMs: number;
-	clientX: number;
-	clientY: number;
-	spanColor: string;
-}
-
-interface UseFlamegraphHoverArgs {
-	canvasRef: RefObject<HTMLCanvasElement>;
-	spanRectsRef: MutableRefObject<SpanRect[]>;
-	traceMetadata: ITraceMetadata;
-	viewStartTs: number;
-	viewEndTs: number;
-	isDraggingRef: MutableRefObject<boolean>;
-	suppressClickRef: MutableRefObject<boolean>;
-	onSpanClick: (spanId: string) => void;
-	isDarkMode: boolean;
-}
-
-interface UseFlamegraphHoverResult {
-	hoveredSpanId: string | null;
-	setHoveredSpanId: Dispatch<SetStateAction<string | null>>;
-	handleHoverMouseMove: (e: ReactMouseEvent) => void;
-	handleHoverMouseLeave: () => void;
-	handleClick: (e: ReactMouseEvent) => void;
-	tooltipContent: TooltipContent | null;
-}
-
-export function useFlamegraphHover(
-	args: UseFlamegraphHoverArgs,
-): UseFlamegraphHoverResult {
-	const {
-		canvasRef,
-		spanRectsRef,
-		traceMetadata,
-		viewStartTs,
-		viewEndTs,
-		isDraggingRef,
-		suppressClickRef,
-		onSpanClick,
-		isDarkMode,
-	} = args;
-
-	const [hoveredSpanId, setHoveredSpanId] = useState<string | null>(null);
-	const [tooltipContent, setTooltipContent] = useState<TooltipContent | null>(
-		null,
-	);
-
-	const isZoomed =
-		viewStartTs !== traceMetadata.startTime ||
-		viewEndTs !== traceMetadata.endTime;
-
-	const updateCursor = useCallback(
-		(canvas: HTMLCanvasElement, span: FlamegraphSpan | null): void => {
-			if (span) {
-				canvas.style.cursor = 'pointer';
-			} else if (isZoomed) {
-				canvas.style.cursor = 'grab';
-			} else {
-				canvas.style.cursor = 'default';
-			}
-		},
-		[isZoomed],
-	);
-
-	const handleHoverMouseMove = useCallback(
-		(e: ReactMouseEvent): void => {
-			if (isDraggingRef.current) {
-				return;
-			}
-
-			const canvas = canvasRef.current;
-			if (!canvas) {
-				return;
-			}
-
-			const pointer = getCanvasPointer(canvas, e.clientX, e.clientY);
-			if (!pointer) {
-				return;
-			}
-
-			const span = findSpanAtPosition(
-				pointer.cssX,
-				pointer.cssY,
-				spanRectsRef.current,
-			);
-
-			if (span) {
-				setHoveredSpanId(span.spanId);
-				setTooltipContent({
-					spanName: span.name || 'unknown',
-					status: span.hasError ? 'error' : 'ok',
-					startMs: span.timestamp - traceMetadata.startTime,
-					durationMs: span.durationNano / 1e6,
-					clientX: e.clientX,
-					clientY: e.clientY,
-					spanColor: getSpanColor({ span, isDarkMode }),
-				});
-				updateCursor(canvas, span);
-			} else {
-				setHoveredSpanId(null);
-				setTooltipContent(null);
-				updateCursor(canvas, null);
-			}
-		},
-		[
-			canvasRef,
-			spanRectsRef,
-			traceMetadata.startTime,
-			isDraggingRef,
-			updateCursor,
-			isDarkMode,
-		],
-	);
-
-	const handleHoverMouseLeave = useCallback((): void => {
-		setHoveredSpanId(null);
-		setTooltipContent(null);
-
-		const canvas = canvasRef.current;
-		if (canvas) {
-			updateCursor(canvas, null);
-		}
-	}, [canvasRef, updateCursor]);
-
-	const handleClick = useCallback(
-		(e: ReactMouseEvent): void => {
-			if (suppressClickRef.current) {
-				return;
-			}
-
-			const canvas = canvasRef.current;
-			if (!canvas) {
-				return;
-			}
-
-			const pointer = getCanvasPointer(canvas, e.clientX, e.clientY);
-			if (!pointer) {
-				return;
-			}
-
-			const span = findSpanAtPosition(
-				pointer.cssX,
-				pointer.cssY,
-				spanRectsRef.current,
-			);
-
-			if (span) {
-				onSpanClick(span.spanId);
-			}
-		},
-		[canvasRef, spanRectsRef, suppressClickRef, onSpanClick],
-	);
-
-	return {
-		hoveredSpanId,
-		setHoveredSpanId,
-		handleHoverMouseMove,
-		handleHoverMouseLeave,
-		handleClick,
-		tooltipContent,
-	};
-}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useFlamegraphZoom.ts

@@ -1,224 +0,0 @@
-import {
-	Dispatch,
-	MutableRefObject,
-	RefObject,
-	SetStateAction,
-	useCallback,
-	useEffect,
-	useRef,
-} from 'react';
-
-import {
-	DEFAULT_ROW_HEIGHT,
-	MAX_ROW_HEIGHT,
-	MIN_ROW_HEIGHT,
-	MIN_VISIBLE_SPAN_MS,
-	PINCH_ZOOM_INTENSITY_H,
-	PINCH_ZOOM_INTENSITY_V,
-	SCROLL_ZOOM_INTENSITY_H,
-	SCROLL_ZOOM_INTENSITY_V,
-} from '../constants';
-import { ITraceMetadata } from '../types';
-import { clamp } from '../utils';
-
-interface UseFlamegraphZoomArgs {
-	canvasRef: RefObject<HTMLCanvasElement>;
-	traceMetadata: ITraceMetadata;
-	viewStartRef: MutableRefObject<number>;
-	viewEndRef: MutableRefObject<number>;
-	rowHeightRef: MutableRefObject<number>;
-	setViewStartTs: Dispatch<SetStateAction<number>>;
-	setViewEndTs: Dispatch<SetStateAction<number>>;
-	setRowHeight: Dispatch<SetStateAction<number>>;
-}
-
-interface UseFlamegraphZoomResult {
-	handleResetZoom: () => void;
-	isOverFlamegraphRef: MutableRefObject<boolean>;
-}
-
-function getCanvasPointer(
-	canvasRef: RefObject<HTMLCanvasElement>,
-	clientX: number,
-): { cssX: 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);
-
-	return { cssX, cssWidth };
-}
-
-export function useFlamegraphZoom(
-	args: UseFlamegraphZoomArgs,
-): UseFlamegraphZoomResult {
-	const {
-		canvasRef,
-		traceMetadata,
-		viewStartRef,
-		viewEndRef,
-		rowHeightRef,
-		setViewStartTs,
-		setViewEndTs,
-		setRowHeight,
-	} = args;
-
-	const isOverFlamegraphRef = useRef(false);
-	const wheelDeltaRef = useRef(0);
-	const rafRef = useRef<number | null>(null);
-	const lastCursorXRef = useRef(0);
-	const lastCssWidthRef = useRef(1);
-	const lastIsPinchRef = useRef(false);
-	const lastWheelClientXRef = useRef<number | null>(null);
-
-	// Prevent browser zoom when pinching over the flamegraph
-	useEffect(() => {
-		const onWheel = (e: WheelEvent): void => {
-			if (isOverFlamegraphRef.current && e.ctrlKey) {
-				e.preventDefault();
-			}
-		};
-
-		window.addEventListener('wheel', onWheel, { passive: false, capture: true });
-
-		return (): void => {
-			window.removeEventListener('wheel', onWheel, {
-				capture: true,
-			} as EventListenerOptions);
-		};
-	}, []);
-
-	const applyWheelZoom = useCallback(() => {
-		rafRef.current = null;
-
-		const cssWidth = lastCssWidthRef.current || 1;
-		const cursorX = lastCursorXRef.current;
-		const fullSpanMs = traceMetadata.endTime - traceMetadata.startTime;
-
-		const oldStart = viewStartRef.current;
-		const oldEnd = viewEndRef.current;
-		const oldSpan = oldEnd - oldStart;
-
-		const deltaY = wheelDeltaRef.current;
-		wheelDeltaRef.current = 0;
-		if (deltaY === 0) {
-			return;
-		}
-
-		const zoomH = lastIsPinchRef.current
-			? PINCH_ZOOM_INTENSITY_H
-			: SCROLL_ZOOM_INTENSITY_H;
-		const zoomV = lastIsPinchRef.current
-			? PINCH_ZOOM_INTENSITY_V
-			: SCROLL_ZOOM_INTENSITY_V;
-
-		const factorH = Math.exp(deltaY * zoomH);
-		const factorV = Math.exp(deltaY * zoomV);
-
-		// --- Horizontal zoom ---
-		const desiredSpan = oldSpan * factorH;
-		const minSpanMs = Math.max(
-			MIN_VISIBLE_SPAN_MS,
-			oldSpan / Math.max(cssWidth, 1),
-		);
-		const clampedSpan = clamp(desiredSpan, minSpanMs, fullSpanMs);
-
-		const cursorRatio = clamp(cursorX / cssWidth, 0, 1);
-		const anchorTs = oldStart + cursorRatio * oldSpan;
-
-		let nextStart = anchorTs - cursorRatio * clampedSpan;
-		nextStart = clamp(
-			nextStart,
-			traceMetadata.startTime,
-			traceMetadata.endTime - clampedSpan,
-		);
-		const nextEnd = nextStart + clampedSpan;
-
-		// --- Vertical zoom (row height) ---
-		const desiredRow = rowHeightRef.current * (1 / factorV);
-		const nextRow = clamp(desiredRow, MIN_ROW_HEIGHT, MAX_ROW_HEIGHT);
-
-		// Write refs immediately so rapid wheel events read fresh values
-		viewStartRef.current = nextStart;
-		viewEndRef.current = nextEnd;
-		rowHeightRef.current = nextRow;
-
-		setViewStartTs(nextStart);
-		setViewEndTs(nextEnd);
-		setRowHeight(nextRow);
-	}, [
-		traceMetadata,
-		viewStartRef,
-		viewEndRef,
-		rowHeightRef,
-		setViewStartTs,
-		setViewEndTs,
-		setRowHeight,
-	]);
-
-	// Native wheel listener on the canvas (passive: false for reliable preventDefault)
-	useEffect(() => {
-		const canvas = canvasRef.current;
-		if (!canvas) {
-			return (): void => {};
-		}
-
-		const onWheel = (e: WheelEvent): void => {
-			e.preventDefault();
-
-			const pointer = getCanvasPointer(canvasRef, e.clientX);
-			if (!pointer) {
-				return;
-			}
-
-			// Flush accumulated delta if cursor moved significantly
-			if (lastWheelClientXRef.current !== null) {
-				const moved = Math.abs(e.clientX - lastWheelClientXRef.current);
-				if (moved > 6) {
-					wheelDeltaRef.current = 0;
-				}
-			}
-			lastWheelClientXRef.current = e.clientX;
-
-			lastIsPinchRef.current = e.ctrlKey;
-			lastCssWidthRef.current = pointer.cssWidth;
-			lastCursorXRef.current = pointer.cssX;
-			wheelDeltaRef.current += e.deltaY;
-
-			if (rafRef.current == null) {
-				rafRef.current = requestAnimationFrame(applyWheelZoom);
-			}
-		};
-
-		canvas.addEventListener('wheel', onWheel, { passive: false });
-
-		return (): void => {
-			canvas.removeEventListener('wheel', onWheel);
-		};
-	}, [canvasRef, applyWheelZoom]);
-
-	const handleResetZoom = useCallback(() => {
-		viewStartRef.current = traceMetadata.startTime;
-		viewEndRef.current = traceMetadata.endTime;
-		rowHeightRef.current = DEFAULT_ROW_HEIGHT;
-
-		setViewStartTs(traceMetadata.startTime);
-		setViewEndTs(traceMetadata.endTime);
-		setRowHeight(DEFAULT_ROW_HEIGHT);
-	}, [
-		traceMetadata,
-		viewStartRef,
-		viewEndRef,
-		rowHeightRef,
-		setViewStartTs,
-		setViewEndTs,
-		setRowHeight,
-	]);
-
-	return { handleResetZoom, isOverFlamegraphRef };
-}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useScrollToSpan.ts

@@ -1,118 +0,0 @@
-import {
-	Dispatch,
-	MutableRefObject,
-	RefObject,
-	SetStateAction,
-	useEffect,
-} from 'react';
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
-
-import { MIN_VISIBLE_SPAN_MS } from '../constants';
-import { ITraceMetadata } from '../types';
-import { clamp, findSpanById, getFlamegraphRowMetrics } from '../utils';
-
-interface UseScrollToSpanArgs {
-	firstSpanAtFetchLevel: string;
-	spans: FlamegraphSpan[][];
-	traceMetadata: ITraceMetadata;
-	containerRef: RefObject<HTMLDivElement>;
-	viewStartRef: MutableRefObject<number>;
-	viewEndRef: MutableRefObject<number>;
-	scrollTopRef: MutableRefObject<number>;
-	rowHeight: number;
-	setViewStartTs: Dispatch<SetStateAction<number>>;
-	setViewEndTs: Dispatch<SetStateAction<number>>;
-	setScrollTop: Dispatch<SetStateAction<number>>;
-}
-
-/**
- * When firstSpanAtFetchLevel (from URL spanId) changes, scroll and zoom the
- * flamegraph so the selected span is centered in view.
- */
-export function useScrollToSpan(args: UseScrollToSpanArgs): void {
-	const {
-		firstSpanAtFetchLevel,
-		spans,
-		traceMetadata,
-		containerRef,
-		viewStartRef,
-		viewEndRef,
-		scrollTopRef,
-		rowHeight,
-		setViewStartTs,
-		setViewEndTs,
-		setScrollTop,
-	} = args;
-
-	useEffect(() => {
-		if (!firstSpanAtFetchLevel || spans.length === 0) {
-			return;
-		}
-
-		const result = findSpanById(spans, firstSpanAtFetchLevel);
-		if (!result) {
-			return;
-		}
-
-		const { span, levelIndex } = result;
-		const container = containerRef.current;
-		if (!container) {
-			return;
-		}
-
-		const metrics = getFlamegraphRowMetrics(rowHeight);
-		const viewportHeight = container.clientHeight;
-		const totalHeight = spans.length * metrics.ROW_HEIGHT;
-		const maxScroll = Math.max(0, totalHeight - viewportHeight);
-
-		// Vertical: center the span's row in the viewport
-		const targetScrollTop = clamp(
-			levelIndex * metrics.ROW_HEIGHT -
-				viewportHeight / 2 +
-				metrics.ROW_HEIGHT / 2,
-			0,
-			maxScroll,
-		);
-
-		// Horizontal: zoom to span with padding (2x span duration), center it
-		const spanStartMs = span.timestamp;
-		const spanEndMs = span.timestamp + span.durationNano / 1e6;
-		const spanDurationMs = spanEndMs - spanStartMs;
-		const spanCenterMs = (spanStartMs + spanEndMs) / 2;
-
-		const visibleWindowMs = Math.max(spanDurationMs * 2, MIN_VISIBLE_SPAN_MS);
-		const fullSpanMs = traceMetadata.endTime - traceMetadata.startTime;
-		const clampedWindow = clamp(visibleWindowMs, MIN_VISIBLE_SPAN_MS, fullSpanMs);
-
-		let targetViewStart = spanCenterMs - clampedWindow / 2;
-		let targetViewEnd = spanCenterMs + clampedWindow / 2;
-
-		targetViewStart = clamp(
-			targetViewStart,
-			traceMetadata.startTime,
-			traceMetadata.endTime - clampedWindow,
-		);
-		targetViewEnd = targetViewStart + clampedWindow;
-
-		// Apply immediately (instant jump)
-		viewStartRef.current = targetViewStart;
-		viewEndRef.current = targetViewEnd;
-		scrollTopRef.current = targetScrollTop;
-
-		setViewStartTs(targetViewStart);
-		setViewEndTs(targetViewEnd);
-		setScrollTop(targetScrollTop);
-	}, [
-		firstSpanAtFetchLevel,
-		spans,
-		traceMetadata,
-		containerRef,
-		viewStartRef,
-		viewEndRef,
-		scrollTopRef,
-		rowHeight,
-		setViewStartTs,
-		setViewEndTs,
-		setScrollTop,
-	]);
-}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/types.ts

@@ -1,24 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
-
-export interface ITraceMetadata {
-	startTime: number;
-	endTime: number;
-}
-
-export interface FlamegraphCanvasProps {
-	spans: FlamegraphSpan[][];
-	firstSpanAtFetchLevel: string;
-	setFirstSpanAtFetchLevel: Dispatch<SetStateAction<string>>;
-	onSpanClick: (spanId: string) => void;
-	traceMetadata: ITraceMetadata;
-}
-
-export interface SpanRect {
-	span: FlamegraphSpan;
-	x: number;
-	y: number;
-	width: number;
-	height: number;
-	level: number;
-}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/utils.ts

@@ -1,355 +0,0 @@
-import { themeColors } from 'constants/theme';
-import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
-import { generateColor } from 'lib/uPlotLib/utils/generateColor';
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
-
-import {
-	DASHED_BORDER_LINE_DASH,
-	EVENT_DOT_SIZE_RATIO,
-	LABEL_FONT,
-	LABEL_PADDING_X,
-	MAX_EVENT_DOT_SIZE,
-	MAX_SPAN_BAR_HEIGHT,
-	MIN_EVENT_DOT_SIZE,
-	MIN_SPAN_BAR_HEIGHT,
-	MIN_WIDTH_FOR_NAME,
-	MIN_WIDTH_FOR_NAME_AND_DURATION,
-	SPAN_BAR_HEIGHT_RATIO,
-} from './constants';
-import { SpanRect } from './types';
-
-export function clamp(v: number, min: number, max: number): number {
-	return Math.max(min, Math.min(max, v));
-}
-
-/** Create diagonal stripe pattern for selected/hovered span (repeating-linear-gradient -45deg style). */
-function createStripePattern(
-	ctx: CanvasRenderingContext2D,
-	color: string,
-): CanvasPattern | null {
-	const size = 20;
-	const patternCanvas = document.createElement('canvas');
-	patternCanvas.width = size;
-	patternCanvas.height = size;
-	const pCtx = patternCanvas.getContext('2d');
-	if (!pCtx) {
-		return null;
-	}
-
-	// Diagonal stripes at -45deg: 10px transparent, 10px colored (0.04 opacity), repeat
-	pCtx.globalAlpha = 0.04;
-	pCtx.strokeStyle = color;
-	pCtx.lineWidth = 10;
-	pCtx.lineCap = 'butt';
-	for (let i = -size; i < size * 2; i += size) {
-		pCtx.beginPath();
-		pCtx.moveTo(i + size, 0);
-		pCtx.lineTo(i, size);
-		pCtx.stroke();
-	}
-	pCtx.globalAlpha = 1;
-
-	return ctx.createPattern(patternCanvas, 'repeat');
-}
-
-export function findSpanById(
-	spans: FlamegraphSpan[][],
-	spanId: string,
-): { span: FlamegraphSpan; levelIndex: number } | null {
-	for (let levelIndex = 0; levelIndex < spans.length; levelIndex++) {
-		const span = spans[levelIndex]?.find((s) => s.spanId === spanId);
-		if (span) {
-			return { span, levelIndex };
-		}
-	}
-	return null;
-}
-
-export interface FlamegraphRowMetrics {
-	ROW_HEIGHT: number;
-	SPAN_BAR_HEIGHT: number;
-	SPAN_BAR_Y_OFFSET: number;
-	EVENT_DOT_SIZE: number;
-}
-
-export function getFlamegraphRowMetrics(
-	rowHeight: number,
-): FlamegraphRowMetrics {
-	const spanBarHeight = clamp(
-		Math.round(rowHeight * SPAN_BAR_HEIGHT_RATIO),
-		MIN_SPAN_BAR_HEIGHT,
-		MAX_SPAN_BAR_HEIGHT,
-	);
-	const spanBarYOffset = Math.floor((rowHeight - spanBarHeight) / 2);
-	const eventDotSize = clamp(
-		Math.round(spanBarHeight * EVENT_DOT_SIZE_RATIO),
-		MIN_EVENT_DOT_SIZE,
-		MAX_EVENT_DOT_SIZE,
-	);
-
-	return {
-		ROW_HEIGHT: rowHeight,
-		SPAN_BAR_HEIGHT: spanBarHeight,
-		SPAN_BAR_Y_OFFSET: spanBarYOffset,
-		EVENT_DOT_SIZE: eventDotSize,
-	};
-}
-
-interface GetSpanColorArgs {
-	span: FlamegraphSpan;
-	isDarkMode: boolean;
-}
-
-export function getSpanColor(args: GetSpanColorArgs): string {
-	const { span, isDarkMode } = args;
-	let color = generateColor(span.serviceName, themeColors.traceDetailColorsV3);
-
-	if (span.hasError) {
-		color = isDarkMode ? 'rgb(239, 68, 68)' : 'rgb(220, 38, 38)';
-	}
-
-	return color;
-}
-
-interface DrawEventDotArgs {
-	ctx: CanvasRenderingContext2D;
-	x: number;
-	y: number;
-	isError: boolean;
-	isDarkMode: boolean;
-	eventDotSize: number;
-}
-
-export function drawEventDot(args: DrawEventDotArgs): void {
-	const { ctx, x, y, isError, isDarkMode, eventDotSize } = args;
-
-	ctx.save();
-	ctx.translate(x, y);
-	ctx.rotate(Math.PI / 4);
-
-	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;
-	const half = eventDotSize / 2;
-	ctx.fillRect(-half, -half, eventDotSize, eventDotSize);
-	ctx.strokeRect(-half, -half, eventDotSize, eventDotSize);
-	ctx.restore();
-}
-
-interface DrawSpanBarArgs {
-	ctx: CanvasRenderingContext2D;
-	span: FlamegraphSpan;
-	x: number;
-	y: number;
-	width: number;
-	levelIndex: number;
-	spanRectsArray: SpanRect[];
-	color: string;
-	isDarkMode: boolean;
-	metrics: FlamegraphRowMetrics;
-	selectedSpanId?: string | null;
-	hoveredSpanId?: string | null;
-}
-
-export function drawSpanBar(args: DrawSpanBarArgs): void {
-	const {
-		ctx,
-		span,
-		x,
-		y,
-		width,
-		levelIndex,
-		spanRectsArray,
-		color,
-		isDarkMode,
-		metrics,
-		selectedSpanId,
-		hoveredSpanId,
-	} = args;
-
-	const spanY = y + metrics.SPAN_BAR_Y_OFFSET;
-	const isSelected = selectedSpanId === span.spanId;
-	const isHovered = hoveredSpanId === span.spanId;
-	const isSelectedOrHovered = isSelected || isHovered;
-
-	ctx.beginPath();
-	ctx.roundRect(x, spanY, width, metrics.SPAN_BAR_HEIGHT, 2);
-
-	if (isSelectedOrHovered) {
-		// Diagonal stripe pattern (repeating-linear-gradient -45deg style) + border in span color
-		const pattern = createStripePattern(ctx, color);
-		if (pattern) {
-			ctx.fillStyle = pattern;
-			ctx.fill();
-		}
-		if (isSelected) {
-			ctx.setLineDash(DASHED_BORDER_LINE_DASH);
-		}
-		ctx.strokeStyle = color;
-		ctx.lineWidth = isSelected ? 2 : 1;
-		ctx.stroke();
-		if (isSelected) {
-			ctx.setLineDash([]);
-		}
-	} else {
-		ctx.fillStyle = color;
-		ctx.fill();
-	}
-
-	spanRectsArray.push({
-		span,
-		x,
-		y: spanY,
-		width,
-		height: metrics.SPAN_BAR_HEIGHT,
-		level: levelIndex,
-	});
-
-	span.event?.forEach((event) => {
-		const spanDurationMs = span.durationNano / 1e6;
-		if (spanDurationMs <= 0) {
-			return;
-		}
-
-		const eventTimeMs = event.timeUnixNano / 1e6;
-		const eventOffsetPercent =
-			((eventTimeMs - span.timestamp) / spanDurationMs) * 100;
-		const clampedOffset = clamp(eventOffsetPercent, 1, 99);
-		const eventX = x + (clampedOffset / 100) * width;
-		const eventY = spanY + metrics.SPAN_BAR_HEIGHT / 2;
-
-		drawEventDot({
-			ctx,
-			x: eventX,
-			y: eventY,
-			isError: event.isError,
-			isDarkMode,
-			eventDotSize: metrics.EVENT_DOT_SIZE,
-		});
-	});
-
-	drawSpanLabel({
-		ctx,
-		span,
-		x,
-		y: spanY,
-		width,
-		color,
-		isSelectedOrHovered,
-		isDarkMode,
-		spanBarHeight: metrics.SPAN_BAR_HEIGHT,
-	});
-}
-
-export function formatDuration(durationNano: number): string {
-	const durationMs = durationNano / 1e6;
-	const { time, timeUnitName } = convertTimeToRelevantUnit(durationMs);
-	return `${parseFloat(time.toFixed(2))}${timeUnitName}`;
-}
-
-interface DrawSpanLabelArgs {
-	ctx: CanvasRenderingContext2D;
-	span: FlamegraphSpan;
-	x: number;
-	y: number;
-	width: number;
-	color: string;
-	isSelectedOrHovered: boolean;
-	isDarkMode: boolean;
-	spanBarHeight: number;
-}
-
-function drawSpanLabel(args: DrawSpanLabelArgs): void {
-	const {
-		ctx,
-		span,
-		x,
-		y,
-		width,
-		color,
-		isSelectedOrHovered,
-		isDarkMode,
-		spanBarHeight,
-	} = args;
-
-	if (width < MIN_WIDTH_FOR_NAME) {
-		return;
-	}
-
-	const name = span.name;
-
-	ctx.save();
-
-	// Clip text to span bar bounds
-	ctx.beginPath();
-	ctx.rect(x, y, width, spanBarHeight);
-	ctx.clip();
-
-	ctx.font = LABEL_FONT;
-	ctx.fillStyle = isSelectedOrHovered
-		? color
-		: isDarkMode
-		? 'rgba(0, 0, 0, 0.9)'
-		: 'rgba(255, 255, 255, 0.9)';
-	ctx.textBaseline = 'middle';
-
-	const textY = y + spanBarHeight / 2;
-	const leftX = x + LABEL_PADDING_X;
-	const rightX = x + width - LABEL_PADDING_X;
-	const availableWidth = width - LABEL_PADDING_X * 2;
-
-	if (width >= MIN_WIDTH_FOR_NAME_AND_DURATION) {
-		const duration = formatDuration(span.durationNano);
-		const durationWidth = ctx.measureText(duration).width;
-		const minGap = 6;
-		const nameSpace = availableWidth - durationWidth - minGap;
-
-		// Duration right-aligned
-		ctx.textAlign = 'right';
-		ctx.fillText(duration, rightX, textY);
-
-		// Name left-aligned, truncated to fit remaining space
-		if (nameSpace > 20) {
-			ctx.textAlign = 'left';
-			ctx.fillText(truncateText(ctx, name, nameSpace), leftX, textY);
-		}
-	} else {
-		// Name only, truncated to fit
-		ctx.textAlign = 'left';
-		ctx.fillText(truncateText(ctx, name, availableWidth), leftX, textY);
-	}
-
-	ctx.restore();
-}
-
-function truncateText(
-	ctx: CanvasRenderingContext2D,
-	text: string,
-	maxWidth: number,
-): string {
-	const ellipsis = '...';
-	const ellipsisWidth = ctx.measureText(ellipsis).width;
-
-	if (ctx.measureText(text).width <= maxWidth) {
-		return text;
-	}
-
-	let lo = 0;
-	let hi = text.length;
-	while (lo < hi) {
-		const mid = Math.ceil((lo + hi) / 2);
-		if (ctx.measureText(text.slice(0, mid)).width + ellipsisWidth <= maxWidth) {
-			lo = mid;
-		} else {
-			hi = mid - 1;
-		}
-	}
-
-	return lo > 0 ? `${text.slice(0, lo)}${ellipsis}` : ellipsis;
-}

frontend/src/pages/TraceDetailsV3/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal.styles.scss

@@ -1,297 +0,0 @@
-// Modal base styles
-.add-span-to-funnel-modal {
-	&__loading-spinner {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		height: 400px;
-	}
-	&-container {
-		.ant-modal {
-			&-content,
-			&-header {
-				background: var(--bg-ink-500);
-			}
-
-			&-header {
-				border-bottom: none;
-
-				.ant-modal-title {
-					color: var(--bg-vanilla-100);
-				}
-			}
-
-			&-body {
-				padding: 14px 16px !important;
-				padding-bottom: 0 !important;
-				border-bottom-left-radius: 0;
-				border-bottom-right-radius: 0;
-			}
-
-			&-footer {
-				margin-top: 0;
-				background: var(--bg-ink-400);
-				border-top: 1px solid var(--bg-slate-500);
-				padding: 16px !important;
-				.add-span-to-funnel-modal {
-					&__save-button {
-						display: flex;
-						align-items: center;
-						justify-content: center;
-						gap: 4px;
-						color: var(--bg-vanilla-100);
-						font-size: 12px;
-						font-weight: 500;
-						line-height: 24px;
-						width: 135px;
-
-						.ant-btn-icon {
-							display: flex;
-						}
-						&:disabled {
-							color: var(--bg-vanilla-400);
-							.ant-btn-icon {
-								svg {
-									stroke: var(--bg-vanilla-400);
-								}
-							}
-						}
-					}
-					&__discard-button {
-						background: var(--bg-slate-500);
-					}
-				}
-				.ant-btn {
-					border-radius: 2px;
-					padding: 4px 8px;
-					margin: 0 !important;
-					border: none;
-					box-shadow: none;
-				}
-			}
-		}
-	}
-}
-
-// Main modal styles
-.add-span-to-funnel-modal {
-	// Common button styles
-	%button-base {
-		display: flex;
-		align-items: center;
-		font-family: Inter;
-	}
-
-	// Details view styles
-	&--details {
-		.traces-funnel-details {
-			height: unset;
-
-			&__steps-config {
-				width: unset;
-				border: none;
-			}
-
-			.funnel-step-wrapper {
-				gap: 15px;
-			}
-
-			.steps-content {
-				max-height: 500px;
-			}
-		}
-	}
-
-	// Search section
-	&__search {
-		display: flex;
-		gap: 12px;
-		margin-bottom: 14px;
-		align-items: center;
-
-		&-input {
-			flex: 1;
-			padding: 6px 8px;
-			background: var(--bg-ink-300);
-
-			.ant-input-prefix {
-				height: 18px;
-				margin-inline-end: 6px;
-				svg {
-					opacity: 0.4;
-				}
-			}
-
-			&,
-			input {
-				font-family: Inter;
-				font-size: 14px;
-				line-height: 18px;
-				letter-spacing: -0.07px;
-				font-weight: 400;
-				background: var(--bg-ink-300);
-			}
-
-			input::placeholder {
-				color: var(--bg-vanilla-400);
-				opacity: 0.4;
-			}
-		}
-	}
-
-	// Create button
-	&__create-button {
-		@extend %button-base;
-		width: 153px;
-		padding: 4px 8px;
-		justify-content: center;
-		gap: 4px;
-		flex-shrink: 0;
-		border-radius: 2px;
-		background: var(--bg-slate-500);
-		border: none;
-		box-shadow: none;
-		color: var(--bg-vanilla-400);
-		font-size: 12px;
-		font-weight: 500;
-		line-height: 24px;
-	}
-	.funnel-item {
-		padding: 8px 8px 12px 16px;
-		&,
-		&:first-child {
-			border-radius: 6px;
-		}
-
-		&__header {
-			line-height: 20px;
-		}
-		&__details {
-			line-height: 18px;
-		}
-	}
-
-	// List section
-	&__list {
-		max-height: 400px;
-		overflow-y: scroll;
-		.funnels-empty {
-			&__content {
-				padding: 0;
-			}
-		}
-
-		.funnels-list {
-			gap: 8px;
-
-			.funnel-item {
-				padding: 8px 16px 12px;
-
-				&__details {
-					margin-top: 8px;
-				}
-			}
-		}
-	}
-
-	&__spinner {
-		height: 400px;
-	}
-
-	// Back button
-	&__back-button {
-		@extend %button-base;
-		gap: 6px;
-		color: var(--bg-vanilla-400);
-		font-size: 14px;
-		line-height: 20px;
-		margin-bottom: 14px;
-	}
-
-	// Details section
-	&__details {
-		display: flex;
-		flex-direction: column;
-		gap: 24px;
-
-		.funnel-configuration__steps {
-			padding: 0;
-
-			.funnel-step {
-				&__content .filters__service-and-span .ant-select {
-					width: 170px;
-				}
-
-				&__footer .error {
-					width: 25%;
-				}
-			}
-
-			.inter-step-config {
-				width: calc(100% - 104px);
-			}
-		}
-		.funnel-item__actions-popover {
-			display: none;
-		}
-	}
-}
-
-// Light mode styles
-.lightMode {
-	.add-span-to-funnel-modal-container {
-		.ant-modal {
-			&-content,
-			&-header {
-				background: var(--bg-vanilla-100);
-			}
-
-			&-title {
-				color: var(--bg-ink-500);
-			}
-
-			&-footer {
-				border-top-color: var(--bg-vanilla-300);
-				background: var(--bg-vanilla-100);
-				.add-span-to-funnel-modal__discard-button {
-					background: var(--bg-vanilla-200);
-					color: var(--bg-ink-500);
-				}
-			}
-		}
-	}
-
-	.add-span-to-funnel-modal {
-		&__search-input {
-			background: var(--bg-vanilla-100);
-			border: 1px solid var(--bg-vanilla-300);
-			color: var(--bg-ink-500);
-
-			input {
-				color: var(--bg-ink-500);
-				background: var(--bg-vanilla-100);
-
-				&::placeholder {
-					color: var(--bg-ink-400);
-				}
-			}
-		}
-
-		&__create-button {
-			background: var(--bg-vanilla-300);
-			color: var(--bg-ink-400);
-		}
-
-		&__back-button {
-			color: var(--bg-ink-500);
-
-			&:hover {
-				color: var(--bg-ink-400);
-			}
-		}
-
-		&__details h3 {
-			color: var(--bg-ink-500);
-		}
-	}
-}

frontend/src/pages/TraceDetailsV3/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal.tsx

@@ -1,294 +0,0 @@
-import { ChangeEvent, useEffect, useMemo, useState } from 'react';
-import { LoadingOutlined } from '@ant-design/icons';
-import { Button, Input, Spin } from 'antd';
-import cx from 'classnames';
-import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
-import SignozModal from 'components/SignozModal/SignozModal';
-import {
-	useFunnelDetails,
-	useFunnelsList,
-} from 'hooks/TracesFunnels/useFunnels';
-import { isEqual } from 'lodash-es';
-import { ArrowLeft, Check, Plus, Search } from 'lucide-react';
-import FunnelConfiguration from 'pages/TracesFunnelDetails/components/FunnelConfiguration/FunnelConfiguration';
-import { TracesFunnelsContentRenderer } from 'pages/TracesFunnels';
-import CreateFunnel from 'pages/TracesFunnels/components/CreateFunnel/CreateFunnel';
-import { FunnelListItem } from 'pages/TracesFunnels/components/FunnelsList/FunnelsList';
-import {
-	FunnelProvider,
-	useFunnelContext,
-} from 'pages/TracesFunnels/FunnelContext';
-import { filterFunnelsByQuery } from 'pages/TracesFunnels/utils';
-import { Span } from 'types/api/trace/getTraceV2';
-import { FunnelData } from 'types/api/traceFunnels';
-
-import './AddSpanToFunnelModal.styles.scss';
-
-enum ModalView {
-	LIST = 'list',
-	DETAILS = 'details',
-}
-
-function FunnelDetailsView({
-	funnel,
-	span,
-	triggerAutoSave,
-	showNotifications,
-	onChangesDetected,
-	triggerDiscard,
-}: {
-	funnel: FunnelData;
-	span: Span;
-	triggerAutoSave: boolean;
-	showNotifications: boolean;
-	onChangesDetected: (hasChanges: boolean) => void;
-	triggerDiscard: boolean;
-}): JSX.Element {
-	const { handleRestoreSteps, steps } = useFunnelContext();
-
-	// Track changes between current steps and original steps
-	useEffect(() => {
-		const hasChanges = !isEqual(steps, funnel.steps);
-		if (onChangesDetected) {
-			onChangesDetected(hasChanges);
-		}
-	}, [steps, funnel.steps, onChangesDetected]);
-
-	// Handle discard when triggered from parent
-	useEffect(() => {
-		if (triggerDiscard && funnel.steps) {
-			handleRestoreSteps(funnel.steps);
-		}
-	}, [triggerDiscard, funnel.steps, handleRestoreSteps]);
-
-	return (
-		<div className="add-span-to-funnel-modal__details">
-			<FunnelListItem
-				funnel={funnel}
-				shouldRedirectToTracesListOnDeleteSuccess={false}
-				isSpanDetailsPage
-			/>
-			<FunnelConfiguration
-				funnel={funnel}
-				isTraceDetailsPage
-				span={span}
-				triggerAutoSave={triggerAutoSave}
-				showNotifications={showNotifications}
-			/>
-		</div>
-	);
-}
-
-interface AddSpanToFunnelModalProps {
-	isOpen: boolean;
-	onClose: () => void;
-	span: Span;
-}
-
-function AddSpanToFunnelModal({
-	isOpen,
-	onClose,
-	span,
-}: AddSpanToFunnelModalProps): JSX.Element {
-	const [activeView, setActiveView] = useState<ModalView>(ModalView.LIST);
-	const [searchQuery, setSearchQuery] = useState<string>('');
-	const [selectedFunnelId, setSelectedFunnelId] = useState<string | undefined>(
-		undefined,
-	);
-	const [isCreateModalOpen, setIsCreateModalOpen] = useState<boolean>(false);
-	const [triggerSave, setTriggerSave] = useState<boolean>(false);
-	const [isUnsavedChanges, setIsUnsavedChanges] = useState<boolean>(false);
-	const [triggerDiscard, setTriggerDiscard] = useState<boolean>(false);
-	const [isCreatedFromSpan, setIsCreatedFromSpan] = useState<boolean>(false);
-
-	const handleSearch = (e: ChangeEvent<HTMLInputElement>): void => {
-		setSearchQuery(e.target.value);
-	};
-
-	const { data, isLoading, isError, isFetching } = useFunnelsList();
-
-	const filteredData = useMemo(
-		() =>
-			filterFunnelsByQuery(data?.payload || [], searchQuery).sort(
-				(a, b) =>
-					new Date(b.created_at).getTime() - new Date(a.created_at).getTime(),
-			),
-		[data?.payload, searchQuery],
-	);
-
-	const {
-		data: funnelDetails,
-		isLoading: isFunnelDetailsLoading,
-		isFetching: isFunnelDetailsFetching,
-	} = useFunnelDetails({
-		funnelId: selectedFunnelId,
-	});
-
-	const handleFunnelClick = (funnel: FunnelData): void => {
-		setSelectedFunnelId(funnel.funnel_id);
-		setActiveView(ModalView.DETAILS);
-		setIsCreatedFromSpan(false);
-	};
-
-	const handleBack = (): void => {
-		setActiveView(ModalView.LIST);
-		setSelectedFunnelId(undefined);
-		setIsUnsavedChanges(false);
-		setTriggerSave(false);
-		setIsCreatedFromSpan(false);
-	};
-
-	const handleCreateNewClick = (): void => {
-		setIsCreateModalOpen(true);
-	};
-
-	const handleSaveFunnel = (): void => {
-		setTriggerSave(true);
-		// Reset trigger after a brief moment to allow the save to be processed
-		setTimeout(() => {
-			setTriggerSave(false);
-			onClose();
-		}, 100);
-	};
-
-	const handleDiscard = (): void => {
-		setTriggerDiscard(true);
-		// Reset trigger after a brief moment
-		setTimeout(() => {
-			setTriggerDiscard(false);
-			onClose();
-		}, 100);
-	};
-
-	const renderListView = (): JSX.Element => (
-		<div className="add-span-to-funnel-modal">
-			{!!filteredData?.length && (
-				<div className="add-span-to-funnel-modal__search">
-					<Input
-						className="add-span-to-funnel-modal__search-input"
-						placeholder="Search by name, description, or tags..."
-						prefix={<Search size={12} />}
-						value={searchQuery}
-						onChange={handleSearch}
-					/>
-				</div>
-			)}
-			<div className="add-span-to-funnel-modal__list">
-				<OverlayScrollbar>
-					<TracesFunnelsContentRenderer
-						isError={isError}
-						isLoading={isLoading || isFetching}
-						data={filteredData || []}
-						onCreateFunnel={handleCreateNewClick}
-						onFunnelClick={(funnel: FunnelData): void => handleFunnelClick(funnel)}
-						shouldRedirectToTracesListOnDeleteSuccess={false}
-					/>
-				</OverlayScrollbar>
-			</div>
-			<CreateFunnel
-				isOpen={isCreateModalOpen}
-				onClose={(funnelId): void => {
-					if (funnelId) {
-						setSelectedFunnelId(funnelId);
-						setActiveView(ModalView.DETAILS);
-						setIsCreatedFromSpan(true);
-					}
-					setIsCreateModalOpen(false);
-				}}
-				redirectToDetails={false}
-			/>
-		</div>
-	);
-
-	const renderDetailsView = ({ span }: { span: Span }): JSX.Element => (
-		<div className="add-span-to-funnel-modal add-span-to-funnel-modal--details">
-			<Button
-				type="text"
-				className="add-span-to-funnel-modal__back-button"
-				onClick={handleBack}
-			>
-				<ArrowLeft size={14} />
-				All funnels
-			</Button>
-			<div className="traces-funnel-details">
-				<div className="traces-funnel-details__steps-config">
-					<Spin
-						className="add-span-to-funnel-modal__loading-spinner"
-						spinning={isFunnelDetailsLoading || isFunnelDetailsFetching}
-						indicator={<LoadingOutlined spin />}
-					>
-						{selectedFunnelId && funnelDetails?.payload && (
-							<FunnelProvider
-								funnelId={selectedFunnelId}
-								hasSingleStep={isCreatedFromSpan}
-							>
-								<FunnelDetailsView
-									funnel={funnelDetails.payload}
-									span={span}
-									triggerAutoSave={triggerSave}
-									showNotifications
-									onChangesDetected={setIsUnsavedChanges}
-									triggerDiscard={triggerDiscard}
-								/>
-							</FunnelProvider>
-						)}
-					</Spin>
-				</div>
-			</div>
-		</div>
-	);
-
-	return (
-		<SignozModal
-			open={isOpen}
-			onCancel={onClose}
-			width={570}
-			title="Add span to funnel"
-			className={cx('add-span-to-funnel-modal-container', {
-				'add-span-to-funnel-modal-container--details':
-					activeView === ModalView.DETAILS,
-			})}
-			footer={
-				activeView === ModalView.DETAILS
-					? [
-							<Button
-								type="default"
-								key="discard"
-								onClick={handleDiscard}
-								className="add-span-to-funnel-modal__discard-button"
-								disabled={!isUnsavedChanges}
-							>
-								Discard
-							</Button>,
-							<Button
-								key="save"
-								type="primary"
-								className="add-span-to-funnel-modal__save-button"
-								onClick={handleSaveFunnel}
-								disabled={!isUnsavedChanges}
-								icon={<Check size={14} color="var(--bg-vanilla-100)" />}
-							>
-								Save Funnel
-							</Button>,
-					  ]
-					: [
-							<Button
-								key="create"
-								type="default"
-								className="add-span-to-funnel-modal__create-button"
-								onClick={handleCreateNewClick}
-								icon={<Plus size={14} />}
-							>
-								Create new funnel
-							</Button>,
-					  ]
-			}
-		>
-			{activeView === ModalView.LIST
-				? renderListView()
-				: renderDetailsView({ span })}
-		</SignozModal>
-	);
-}
-
-export default AddSpanToFunnelModal;

frontend/src/pages/TraceDetailsV3/TraceWaterfall/SpanLineActionButtons/SpanLineActionButtons.styles.scss

@@ -1,39 +0,0 @@
-.span-line-action-buttons {
-	display: flex;
-	position: absolute;
-	transform: translate(-50%, -50%);
-	top: 50%;
-	right: 0;
-	cursor: pointer;
-	border-radius: 2px;
-	border: 1px solid var(--bg-slate-400);
-	background: var(--bg-ink-400);
-
-	.ant-btn-default {
-		border: none;
-		box-shadow: none;
-		padding: 9px;
-		justify-content: center;
-		align-items: center;
-		display: flex;
-
-		&.active-tab {
-			background-color: var(--bg-slate-400);
-		}
-	}
-
-	.copy-span-btn {
-		border-color: var(--bg-slate-400) !important;
-	}
-}
-
-.lightMode {
-	.span-line-action-buttons {
-		border: 1px solid var(--bg-vanilla-400);
-		background: var(--bg-vanilla-400);
-
-		.copy-span-btn {
-			border-color: var(--bg-vanilla-400) !important;
-		}
-	}
-}

frontend/src/pages/TraceDetailsV3/TraceWaterfall/SpanLineActionButtons/__tests__/SpanLineActionButtons.test.tsx

@@ -1,134 +0,0 @@
-import { fireEvent, screen } from '@testing-library/react';
-import { useCopySpanLink } from 'hooks/trace/useCopySpanLink';
-import { render } from 'tests/test-utils';
-import { Span } from 'types/api/trace/getTraceV2';
-
-import SpanLineActionButtons from '../index';
-
-// Mock the useCopySpanLink hook
-jest.mock('hooks/trace/useCopySpanLink');
-
-const mockSpan: Span = {
-	spanId: 'test-span-id',
-	name: 'test-span',
-	serviceName: 'test-service',
-	durationNano: 1000,
-	timestamp: 1234567890,
-	rootSpanId: 'test-root-span-id',
-	parentSpanId: 'test-parent-span-id',
-	traceId: 'test-trace-id',
-	hasError: false,
-	kind: 0,
-	references: [],
-	tagMap: {},
-	event: [],
-	rootName: 'test-root-name',
-	statusMessage: 'test-status-message',
-	statusCodeString: 'test-status-code-string',
-	spanKind: 'test-span-kind',
-	hasChildren: false,
-	hasSibling: false,
-	subTreeNodeCount: 0,
-	level: 0,
-};
-
-describe('SpanLineActionButtons', () => {
-	beforeEach(() => {
-		// Clear mock before each test
-		jest.clearAllMocks();
-	});
-
-	it('renders copy link button with correct icon', () => {
-		(useCopySpanLink as jest.Mock).mockReturnValue({
-			onSpanCopy: jest.fn(),
-		});
-
-		render(<SpanLineActionButtons span={mockSpan} />);
-
-		// Check if the button is rendered
-		const copyButton = screen.getByRole('button');
-		expect(copyButton).toBeInTheDocument();
-
-		// Check if the link icon is rendered
-		const linkIcon = screen.getByRole('img', { hidden: true });
-		expect(linkIcon).toHaveClass('anticon anticon-link');
-	});
-
-	it('calls onSpanCopy when copy button is clicked', () => {
-		const mockOnSpanCopy = jest.fn();
-		(useCopySpanLink as jest.Mock).mockReturnValue({
-			onSpanCopy: mockOnSpanCopy,
-		});
-
-		render(<SpanLineActionButtons span={mockSpan} />);
-
-		// Click the copy button
-		const copyButton = screen.getByRole('button');
-		fireEvent.click(copyButton);
-
-		// Verify the copy function was called
-		expect(mockOnSpanCopy).toHaveBeenCalledTimes(1);
-	});
-
-	it('applies correct styling classes', () => {
-		(useCopySpanLink as jest.Mock).mockReturnValue({
-			onSpanCopy: jest.fn(),
-		});
-
-		render(<SpanLineActionButtons span={mockSpan} />);
-
-		// Check if the main container has the correct class
-		const container = screen
-			.getByRole('button')
-			.closest('.span-line-action-buttons');
-		expect(container).toHaveClass('span-line-action-buttons');
-
-		// Check if the button has the correct class
-		const copyButton = screen.getByRole('button');
-		expect(copyButton).toHaveClass('copy-span-btn');
-	});
-
-	it('copies span link to clipboard when copy button is clicked', () => {
-		const mockSetCopy = jest.fn();
-		const mockUrlQuery = {
-			delete: jest.fn(),
-			set: jest.fn(),
-			toString: jest.fn().mockReturnValue('spanId=test-span-id'),
-		};
-		const mockPathname = '/test-path';
-		const mockLocation = {
-			origin: 'http://localhost:3000',
-		};
-
-		// Mock window.location
-		Object.defineProperty(window, 'location', {
-			value: mockLocation,
-			writable: true,
-		});
-
-		// Mock useCopySpanLink hook
-		(useCopySpanLink as jest.Mock).mockReturnValue({
-			onSpanCopy: (event: React.MouseEvent) => {
-				event.preventDefault();
-				event.stopPropagation();
-				mockUrlQuery.delete('spanId');
-				mockUrlQuery.set('spanId', mockSpan.spanId);
-				const link = `${
-					window.location.origin
-				}${mockPathname}?${mockUrlQuery.toString()}`;
-				mockSetCopy(link);
-			},
-		});
-
-		render(<SpanLineActionButtons span={mockSpan} />);
-
-		// Click the copy button
-		const copyButton = screen.getByRole('button');
-		fireEvent.click(copyButton);
-
-		// Verify the copy function was called with correct link
-		expect(mockSetCopy).toHaveBeenCalledWith(
-			'http://localhost:3000/test-path?spanId=test-span-id',
-		);
-	});
-});

frontend/src/pages/TraceDetailsV3/TraceWaterfall/SpanLineActionButtons/index.tsx

@@ -1,28 +0,0 @@
-import { LinkOutlined } from '@ant-design/icons';
-import { Button, Tooltip } from 'antd';
-import { useCopySpanLink } from 'hooks/trace/useCopySpanLink';
-import { Span } from 'types/api/trace/getTraceV2';
-
-import './SpanLineActionButtons.styles.scss';
-
-export interface SpanLineActionButtonsProps {
-	span: Span;
-}
-export default function SpanLineActionButtons({
-	span,
-}: SpanLineActionButtonsProps): JSX.Element {
-	const { onSpanCopy } = useCopySpanLink(span);
-
-	return (
-		<div className="span-line-action-buttons">
-			<Tooltip title="Copy Span Link">
-				<Button
-					size="small"
-					icon={<LinkOutlined size={14} />}
-					onClick={onSpanCopy}
-					className="copy-span-btn"
-				/>
-			</Tooltip>
-		</div>
-	);
-}

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfall.styles.scss

@@ -1,9 +0,0 @@
-.trace-waterfall {
-	height: calc(70vh - 236px);
-
-	.loading-skeleton {
-		justify-content: center;
-		align-items: center;
-		padding: 20px;
-	}
-}

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfall.tsx

@@ -1,136 +0,0 @@
-import { Dispatch, SetStateAction, useMemo } from 'react';
-import { Skeleton } from 'antd';
-import { AxiosError } from 'axios';
-import Spinner from 'components/Spinner';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { GetTraceV2SuccessResponse, Span } from 'types/api/trace/getTraceV2';
-
-import { TraceWaterfallStates } from './constants';
-import Error from './TraceWaterfallStates/Error/Error';
-import NoData from './TraceWaterfallStates/NoData/NoData';
-import Success from './TraceWaterfallStates/Success/Success';
-
-import './TraceWaterfall.styles.scss';
-
-export interface IInterestedSpan {
-	spanId: string;
-	isUncollapsed: boolean;
-}
-
-interface ITraceWaterfallProps {
-	traceId: string;
-	uncollapsedNodes: string[];
-	traceData:
-		| SuccessResponse<GetTraceV2SuccessResponse, unknown>
-		| ErrorResponse
-		| undefined;
-	isFetchingTraceData: boolean;
-	errorFetchingTraceData: unknown;
-	interestedSpanId: IInterestedSpan;
-	setInterestedSpanId: Dispatch<SetStateAction<IInterestedSpan>>;
-	setTraceFlamegraphStatsWidth: Dispatch<SetStateAction<number>>;
-	selectedSpan: Span | undefined;
-	setSelectedSpan: Dispatch<SetStateAction<Span | undefined>>;
-}
-
-function TraceWaterfall(props: ITraceWaterfallProps): JSX.Element {
-	const {
-		traceData,
-		isFetchingTraceData,
-		errorFetchingTraceData,
-		interestedSpanId,
-		traceId,
-		uncollapsedNodes,
-		setInterestedSpanId,
-		setTraceFlamegraphStatsWidth,
-		setSelectedSpan,
-		selectedSpan,
-	} = props;
-	// get the current state of trace waterfall based on the API lifecycle
-	const traceWaterfallState = useMemo(() => {
-		if (isFetchingTraceData) {
-			if (
-				traceData &&
-				traceData.payload &&
-				traceData.payload.spans &&
-				traceData.payload.spans.length > 0
-			) {
-				return TraceWaterfallStates.FETCHING_WITH_OLD_DATA_PRESENT;
-			}
-			return TraceWaterfallStates.LOADING;
-		}
-		if (errorFetchingTraceData) {
-			return TraceWaterfallStates.ERROR;
-		}
-		if (
-			traceData &&
-			traceData.payload &&
-			traceData.payload.spans &&
-			traceData.payload.spans.length === 0
-		) {
-			return TraceWaterfallStates.NO_DATA;
-		}
-
-		return TraceWaterfallStates.SUCCESS;
-	}, [errorFetchingTraceData, isFetchingTraceData, traceData]);
-
-	// capture the spans from the response, since we do not need to do any manipulation on the same we will keep this as a simple constant [ memoized ]
-	const spans = useMemo(() => traceData?.payload?.spans || [], [
-		traceData?.payload?.spans,
-	]);
-
-	// get the content based on the current state of the trace waterfall
-	const getContent = useMemo(() => {
-		switch (traceWaterfallState) {
-			case TraceWaterfallStates.LOADING:
-				return (
-					<div className="loading-skeleton">
-						<Skeleton active paragraph={{ rows: 6 }} />
-					</div>
-				);
-			case TraceWaterfallStates.ERROR:
-				return <Error error={errorFetchingTraceData as AxiosError} />;
-			case TraceWaterfallStates.NO_DATA:
-				return <NoData id={traceId} />;
-			case TraceWaterfallStates.SUCCESS:
-			case TraceWaterfallStates.FETCHING_WITH_OLD_DATA_PRESENT:
-				return (
-					<Success
-						spans={spans}
-						traceMetadata={{
-							traceId,
-							startTime: traceData?.payload?.startTimestampMillis || 0,
-							endTime: traceData?.payload?.endTimestampMillis || 0,
-							hasMissingSpans: traceData?.payload?.hasMissingSpans || false,
-						}}
-						interestedSpanId={interestedSpanId || ''}
-						uncollapsedNodes={uncollapsedNodes}
-						setInterestedSpanId={setInterestedSpanId}
-						setTraceFlamegraphStatsWidth={setTraceFlamegraphStatsWidth}
-						selectedSpan={selectedSpan}
-						setSelectedSpan={setSelectedSpan}
-					/>
-				);
-			default:
-				return <Spinner tip="Fetching the trace!" />;
-		}
-	}, [
-		errorFetchingTraceData,
-		interestedSpanId,
-		selectedSpan,
-		setInterestedSpanId,
-		setSelectedSpan,
-		setTraceFlamegraphStatsWidth,
-		spans,
-		traceData?.payload?.endTimestampMillis,
-		traceData?.payload?.hasMissingSpans,
-		traceData?.payload?.startTimestampMillis,
-		traceId,
-		traceWaterfallState,
-		uncollapsedNodes,
-	]);
-
-	return <div className="trace-waterfall">{getContent}</div>;
-}
-
-export default TraceWaterfall;

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Error/Error.styles.scss

@@ -1,30 +0,0 @@
-.error-waterfall {
-	display: flex;
-	padding: 12px;
-	margin: 20px;
-	gap: 12px;
-	align-items: flex-start;
-	border-radius: 4px;
-	background: var(--bg-cherry-500);
-
-	.text {
-		color: var(--bg-vanilla-100);
-		font-family: Inter;
-		font-size: 14px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 20px; /* 142.857% */
-		letter-spacing: -0.07px;
-		flex-shrink: 0;
-	}
-
-	.value {
-		color: var(--bg-vanilla-100);
-		font-family: Inter;
-		font-size: 14px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 20px; /* 142.857% */
-		letter-spacing: -0.07px;
-	}
-}

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Error/Error.tsx

@@ -1,25 +0,0 @@
-import { Tooltip, Typography } from 'antd';
-import { AxiosError } from 'axios';
-
-import './Error.styles.scss';
-
-interface IErrorProps {
-	error: AxiosError;
-}
-
-function Error(props: IErrorProps): JSX.Element {
-	const { error } = props;
-
-	return (
-		<div className="error-waterfall">
-			<Typography.Text className="text">Something went wrong!</Typography.Text>
-			<Tooltip title={error?.message}>
-				<Typography.Text className="value" ellipsis>
-					{error?.message}
-				</Typography.Text>
-			</Tooltip>
-		</div>
-	);
-}
-
-export default Error;

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/NoData/NoData.tsx

@@ -1,12 +0,0 @@
-import { Typography } from 'antd';
-
-interface INoDataProps {
-	id: string;
-}
-
-function NoData(props: INoDataProps): JSX.Element {
-	const { id } = props;
-	return <Typography.Text>No Trace found with the id: {id} </Typography.Text>;
-}
-
-export default NoData;

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters.styles.scss

@@ -1,60 +0,0 @@
-.filter-row {
-	display: flex;
-	align-items: center;
-	padding: 16px 20px 0px 20px;
-	gap: 12px;
-
-	.query-builder-search-v2 {
-		width: 100%;
-	}
-
-	.pre-next-toggle {
-		display: flex;
-		flex-shrink: 0;
-		gap: 12px;
-
-		.ant-typography {
-			display: flex;
-			align-items: center;
-			color: var(--bg-vanilla-400);
-			font-family: 'Geist Mono';
-			font-size: 12px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 18px; /* 150% */
-		}
-
-		.ant-btn {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			box-shadow: none;
-		}
-	}
-
-	.no-results {
-		display: flex;
-		align-items: center;
-		flex-shrink: 0;
-		color: var(--bg-vanilla-400);
-		font-family: 'Geist Mono';
-		font-size: 12px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 18px; /* 150% */
-	}
-}
-
-.lightMode {
-	.filter-row {
-		.pre-next-toggle {
-			.ant-typography {
-				color: var(--bg-ink-400);
-			}
-		}
-
-		.no-results {
-			color: var(--bg-ink-400);
-		}
-	}
-}

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters.tsx

@@ -1,207 +0,0 @@
-import { useCallback, useState } from 'react';
-import { useHistory, useLocation } from 'react-router-dom';
-import { InfoCircleOutlined, LoadingOutlined } from '@ant-design/icons';
-import { Button, Spin, Tooltip, Typography } from 'antd';
-import { AxiosError } from 'axios';
-import { DEFAULT_ENTITY_VERSION } from 'constants/app';
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
-import QueryBuilderSearchV2 from 'container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2';
-import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
-import { uniqBy } from 'lodash-es';
-import { ChevronDown, ChevronUp } from 'lucide-react';
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
-import { TracesAggregatorOperator } from 'types/common/queryBuilder';
-
-import { BASE_FILTER_QUERY } from './constants';
-
-import './Filters.styles.scss';
-
-function prepareQuery(filters: TagFilter, traceID: string): Query {
-	return {
-		...initialQueriesMap.traces,
-		builder: {
-			...initialQueriesMap.traces.builder,
-			queryData: [
-				{
-					...initialQueriesMap.traces.builder.queryData[0],
-					aggregateOperator: TracesAggregatorOperator.NOOP,
-					orderBy: [{ columnName: 'timestamp', order: 'asc' }],
-					filters: {
-						...filters,
-						items: [
-							...filters.items,
-							{
-								id: '5ab8e1cf',
-								key: {
-									key: 'trace_id',
-									dataType: DataTypes.String,
-									type: '',
-									id: 'trace_id--string----true',
-								},
-								op: '=',
-								value: traceID,
-							},
-						],
-					},
-				},
-			],
-		},
-	};
-}
-
-function Filters({
-	startTime,
-	endTime,
-	traceID,
-	onFilteredSpansChange = (): void => {},
-}: {
-	startTime: number;
-	endTime: number;
-	traceID: string;
-	onFilteredSpansChange?: (spanIds: string[], isFilterActive: boolean) => void;
-}): JSX.Element {
-	const [filters, setFilters] = useState<TagFilter>(
-		BASE_FILTER_QUERY.filters || { items: [], op: 'AND' },
-	);
-	const [noData, setNoData] = useState<boolean>(false);
-	const [filteredSpanIds, setFilteredSpanIds] = useState<string[]>([]);
-	const [currentSearchedIndex, setCurrentSearchedIndex] = useState<number>(0);
-
-	const handleFilterChange = useCallback(
-		(value: TagFilter): void => {
-			if (value.items.length === 0) {
-				setFilteredSpanIds([]);
-				onFilteredSpansChange?.([], false);
-				setCurrentSearchedIndex(0);
-				setNoData(false);
-			}
-			setFilters(value);
-		},
-		[onFilteredSpansChange],
-	);
-	const { search } = useLocation();
-	const history = useHistory();
-
-	const handlePrevNext = useCallback(
-		(index: number, spanId?: string): void => {
-			const searchParams = new URLSearchParams(search);
-			if (spanId) {
-				searchParams.set('spanId', spanId);
-			} else {
-				searchParams.set('spanId', filteredSpanIds[index]);
-			}
-
-			history.replace({ search: searchParams.toString() });
-		},
-		[filteredSpanIds, history, search],
-	);
-
-	const { isFetching, error } = useGetQueryRange(
-		{
-			query: prepareQuery(filters, traceID),
-			graphType: PANEL_TYPES.LIST,
-			selectedTime: 'GLOBAL_TIME',
-			start: startTime,
-			end: endTime,
-			params: {
-				dataSource: 'traces',
-			},
-			tableParams: {
-				pagination: {
-					offset: 0,
-					limit: 200,
-				},
-				selectColumns: [
-					{
-						key: 'name',
-						dataType: 'string',
-						type: 'tag',
-						id: 'name--string--tag--true',
-						isIndexed: false,
-					},
-				],
-			},
-		},
-		DEFAULT_ENTITY_VERSION,
-		{
-			queryKey: [filters],
-			enabled: filters.items.length > 0,
-			onSuccess: (data) => {
-				const isFilterActive = filters.items.length > 0;
-				if (data?.payload.data.newResult.data.result[0].list) {
-					const uniqueSpans = uniqBy(
-						data?.payload.data.newResult.data.result[0].list,
-						'data.spanID',
-					);
-
-					const spanIds = uniqueSpans.map((val) => val.data.spanID);
-					setFilteredSpanIds(spanIds);
-					onFilteredSpansChange?.(spanIds, isFilterActive);
-					handlePrevNext(0, spanIds[0]);
-					setNoData(false);
-				} else {
-					setNoData(true);
-					setFilteredSpanIds([]);
-					onFilteredSpansChange?.([], isFilterActive);
-					setCurrentSearchedIndex(0);
-				}
-			},
-		},
-	);
-
-	return (
-		<div className="filter-row">
-			<QueryBuilderSearchV2
-				query={{
-					...BASE_FILTER_QUERY,
-					filters,
-				}}
-				onChange={handleFilterChange}
-				hideSpanScopeSelector={false}
-				skipQueryBuilderRedirect
-				selectProps={{ listHeight: 125 }}
-			/>
-			{filteredSpanIds.length > 0 && (
-				<div className="pre-next-toggle">
-					<Typography.Text>
-						{currentSearchedIndex + 1} / {filteredSpanIds.length}
-					</Typography.Text>
-					<Button
-						icon={<ChevronUp size={14} />}
-						disabled={currentSearchedIndex === 0}
-						type="text"
-						onClick={(): void => {
-							handlePrevNext(currentSearchedIndex - 1);
-							setCurrentSearchedIndex((prev) => prev - 1);
-						}}
-					/>
-					<Button
-						icon={<ChevronDown size={14} />}
-						type="text"
-						disabled={currentSearchedIndex === filteredSpanIds.length - 1}
-						onClick={(): void => {
-							handlePrevNext(currentSearchedIndex + 1);
-							setCurrentSearchedIndex((prev) => prev + 1);
-						}}
-					/>
-				</div>
-			)}
-			{isFetching && <Spin indicator={<LoadingOutlined spin />} size="small" />}
-			{error && (
-				<Tooltip title={(error as AxiosError)?.message || 'Something went wrong'}>
-					<InfoCircleOutlined size={14} />
-				</Tooltip>
-			)}
-			{noData && (
-				<Typography.Text className="no-results">No results found</Typography.Text>
-			)}
-		</div>
-	);
-}
-
-Filters.defaultProps = {
-	onFilteredSpansChange: undefined,
-};
-
-export default Filters;

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Filters/constants.ts

@@ -1,38 +0,0 @@
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
-
-export const BASE_FILTER_QUERY: IBuilderQuery = {
-	queryName: 'A',
-	dataSource: DataSource.TRACES,
-	aggregateOperator: 'noop',
-	aggregateAttribute: {
-		id: '------false',
-		dataType: DataTypes.EMPTY,
-		key: '',
-		type: '',
-	},
-	timeAggregation: 'rate',
-	spaceAggregation: 'sum',
-	functions: [],
-	filters: {
-		items: [],
-		op: 'AND',
-	},
-	expression: 'A',
-	disabled: false,
-	stepInterval: 60,
-	having: [],
-	limit: 200,
-	orderBy: [
-		{
-			columnName: 'timestamp',
-			order: 'desc',
-		},
-	],
-	groupBy: [],
-	legend: '',
-	reduceTo: ReduceOperators.AVG,
-	offset: 0,
-	selectColumns: [],
-};

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Success.styles.scss

@@ -1,461 +0,0 @@
-.success-content {
-	overflow-y: hidden;
-	overflow-x: hidden;
-	max-width: 100%;
-
-	.missing-spans {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		height: 44px;
-		margin: 16px;
-		padding: 12px;
-		border-radius: 4px;
-		background: rgba(69, 104, 220, 0.1);
-
-		.left-info {
-			display: flex;
-			align-items: center;
-			gap: 8px;
-			color: var(--bg-robin-400);
-			font-family: Inter;
-			font-size: 14px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 20px; /* 142.857% */
-			letter-spacing: -0.07px;
-
-			.text {
-				color: var(--bg-robin-400);
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 20px; /* 142.857% */
-				letter-spacing: -0.07px;
-			}
-		}
-
-		.right-info {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			flex-direction: row-reverse;
-			gap: 8px;
-			color: var(--bg-robin-400);
-			font-family: Inter;
-			font-size: 14px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 20px; /* 142.857% */
-			letter-spacing: -0.07px;
-		}
-
-		.right-info:hover {
-			background-color: unset;
-			color: var(--bg-robin-200);
-		}
-	}
-
-	.waterfall-table {
-		height: calc(70vh - 236px);
-		overflow: auto;
-		overflow-x: hidden;
-		padding: 0px 20px 20px 20px;
-
-		&::-webkit-scrollbar {
-			width: 0.1rem;
-		}
-
-		// default table overrides css for table v3
-		.div-table {
-			width: 100% !important;
-			border: none !important;
-		}
-
-		.div-thead {
-			position: sticky;
-			top: 0;
-			z-index: 2;
-			background-color: var(--bg-ink-500) !important;
-
-			.div-tr {
-				height: 16px;
-			}
-		}
-
-		.div-tr {
-			display: flex;
-			width: 100%;
-			align-items: center;
-			height: 54px;
-		}
-
-		.div-tr:hover {
-			border-radius: 4px;
-			background: rgba(171, 189, 255, 0.06) !important;
-
-			.div-td .span-overview .second-row .add-funnel-button {
-				opacity: 1;
-			}
-
-			.span-overview {
-				background: unset !important;
-
-				.span-overview-content {
-					background: unset !important;
-				}
-			}
-		}
-
-		.div-th,
-		.div-td {
-			box-shadow: none;
-			padding: 0px !important;
-		}
-
-		.div-th {
-			padding: 2px 4px;
-			position: relative;
-			font-weight: bold;
-			text-align: center;
-		}
-
-		.div-td {
-			display: flex;
-			height: 54px;
-			align-items: center;
-			overflow: hidden;
-
-			.span-overview {
-				display: flex;
-				align-items: center;
-				flex-shrink: 0;
-				height: 100%;
-				width: 100%;
-				cursor: pointer;
-
-				.connector-lines {
-					display: flex;
-				}
-
-				.span-overview-content {
-					display: flex;
-					flex-shrink: 0;
-					flex-direction: column;
-					align-items: flex-start;
-					gap: 5px;
-					width: 100%;
-					background-color: #0b0c0e;
-					height: 100%;
-					justify-content: center;
-					&:not(:first-child) {
-						.first-row {
-							width: calc(100% - 28px);
-						}
-					}
-
-					.first-row {
-						display: flex;
-						align-items: center;
-						justify-content: space-between;
-						height: 20px;
-						width: 100%;
-
-						.span-det {
-							display: flex;
-							gap: 6px;
-							flex-shrink: 0;
-							align-items: center;
-
-							.collapse-uncollapse-button {
-								display: flex;
-								align-items: center;
-								justify-content: center;
-								padding: 4px 4px;
-								gap: 4px;
-								border-radius: 2px;
-								border: 1px solid var(--bg-slate-400);
-								background: var(--bg-slate-500);
-								box-shadow: none;
-								height: 20px;
-
-								.children-count {
-									color: var(--bg-vanilla-400);
-									font-family: 'Space Mono';
-									font-size: 14px;
-									font-style: normal;
-									font-weight: 400;
-									line-height: 20px; /* 142.857% */
-									letter-spacing: 0.28px;
-								}
-							}
-
-							.span-name {
-								color: #fff;
-								font-family: 'Inter';
-								font-size: 14px;
-								font-style: normal;
-								font-weight: 400;
-								line-height: 20px; /* 142.857% */
-								letter-spacing: 0.28px;
-							}
-						}
-
-						.status-code-container {
-							display: flex;
-							padding-right: 10px;
-
-							.status-code {
-								display: flex;
-								height: 20px;
-								padding: 3px;
-								align-items: center;
-								border-radius: 3px;
-							}
-
-							.success {
-								border: 1px solid var(--bg-robin-500);
-								background: var(--bg-robin-500);
-							}
-
-							.error {
-								border: 1px solid var(--bg-cherry-500);
-								background: var(--bg-cherry-500);
-							}
-						}
-					}
-
-					.second-row {
-						display: flex;
-						align-items: center;
-						gap: 8px;
-						height: 18px;
-						width: 100%;
-						.service-name {
-							color: var(--bg-vanilla-400);
-							font-family: Inter;
-							font-size: 14px;
-							font-style: normal;
-							font-weight: 400;
-							line-height: 18px; /* 128.571% */
-							letter-spacing: -0.07px;
-						}
-						.add-funnel-button {
-							position: relative;
-							z-index: 1;
-							opacity: 0;
-							display: flex;
-							align-items: center;
-							gap: 6px;
-							transition: opacity 0.1s ease-in-out;
-
-							&__separator {
-								color: var(--bg-vanilla-400);
-							}
-							&__button {
-								display: flex;
-								align-items: center;
-								justify-content: center;
-							}
-						}
-					}
-				}
-			}
-
-			.span-duration {
-				display: flex;
-				flex-direction: column;
-				height: 54px;
-				position: relative;
-				width: 100%;
-				padding-left: 15px;
-				cursor: pointer;
-
-				.span-line {
-					position: relative;
-					height: 12px;
-					top: 35%;
-					border-radius: 6px;
-				}
-
-				.event-dot {
-					position: absolute;
-					top: 50%;
-					transform: translate(-50%, -50%) rotate(45deg);
-					width: 6px;
-					height: 6px;
-					background-color: var(--bg-robin-500);
-					border: 1px solid var(--bg-robin-600);
-					cursor: pointer;
-					z-index: 1;
-
-					&.error {
-						background-color: var(--bg-cherry-500);
-						border-color: var(--bg-cherry-600);
-					}
-
-					&:hover {
-						transform: translate(-50%, -50%) rotate(45deg) scale(1.5);
-					}
-				}
-
-				.span-line-text {
-					position: relative;
-					top: 40%;
-					font-variant-numeric: lining-nums tabular-nums stacked-fractions
-						slashed-zero;
-					font-feature-settings: 'case' on, 'cpsp' on, 'dlig' on, 'salt' on;
-					font-family: Inter;
-					font-size: 14px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: 18px; /* 128.571% */
-					letter-spacing: -0.07px;
-				}
-			}
-
-			.interested-span,
-			.selected-non-matching-span {
-				border-radius: 4px;
-				background: rgba(171, 189, 255, 0.06) !important;
-
-				.span-overview-content {
-					background: unset;
-				}
-			}
-
-			.dimmed-span {
-				opacity: 0.4;
-			}
-			.highlighted-span {
-				opacity: 1;
-			}
-
-			.selected-non-matching-span {
-				.span-overview-content,
-				.span-line-text {
-					opacity: 0.5;
-				}
-			}
-		}
-
-		.div-td + .div-td {
-			border-left: 1px solid var(--bg-slate-400);
-		}
-
-		.div-th + .div-th {
-			border-left: 1px solid var(--bg-slate-400);
-		}
-
-		.div-tr .div-th:nth-child(2) {
-			width: calc(100% - var(--header-span-name-size) * 1px) !important;
-		}
-		.div-tr .div-td:nth-child(2) {
-			width: calc(100% - var(--header-span-name-size) * 1px) !important;
-		}
-		.resizer {
-			width: 10px !important;
-			position: absolute;
-			top: 0;
-			height: calc(70vh - 236px);
-			right: 0;
-			width: 2px;
-			background: rgba(35, 196, 248, 0.2);
-			cursor: col-resize;
-			user-select: none;
-			touch-action: none;
-		}
-
-		.resizer.isResizing {
-			background: rgba(35, 196, 248, 0.2);
-			opacity: 1;
-		}
-
-		@media (hover: hover) {
-			.resizer {
-				opacity: 0;
-			}
-
-			*:hover > .resizer {
-				opacity: 1;
-			}
-		}
-	}
-
-	.missing-spans-waterfall-table {
-		height: calc(70vh - 312px);
-	}
-}
-
-.span-dets {
-	.related-logs {
-		display: flex;
-		width: 160px;
-		padding: 4px 8px;
-		justify-content: center;
-		align-items: center;
-		gap: 8px;
-		border-radius: 2px;
-		border: 1px solid var(--Slate-400, #1d212d);
-		background: var(--Slate-500, #161922);
-		box-shadow: none;
-	}
-}
-
-.lightMode {
-	.success-content {
-		.waterfall-table {
-			.div-td {
-				.span-overview {
-					.span-overview-content {
-						background-color: var(--bg-vanilla-200);
-						.first-row {
-							.collapse-uncollapse-button {
-								border: 1px solid var(--bg-vanilla-400);
-								background: var(--bg-vanilla-400);
-
-								.children-count {
-									color: var(--bg-ink-400);
-								}
-							}
-
-							.span-name {
-								color: var(--bg-ink-400);
-							}
-						}
-
-						.second-row {
-							.service-name {
-								color: var(--bg-ink-400);
-							}
-						}
-					}
-				}
-
-				.interested-span {
-					border-radius: 4px;
-					background: var(--bg-vanilla-300);
-				}
-			}
-
-			.div-td + .div-td {
-				border-left: 1px solid var(--bg-vanilla-300);
-			}
-
-			.div-th + .div-th {
-				border-left: 1px solid var(--bg-vanilla-300);
-			}
-
-			.div-thead {
-				background-color: var(--bg-vanilla-200) !important;
-			}
-		}
-	}
-	.span-dets {
-		.related-logs {
-			border: 1px solid var(--bg-vanilla-300);
-			background: var(--bg-vanilla-300);
-		}
-	}
-}

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Success.tsx

@@ -1,589 +0,0 @@
-import {
-	Dispatch,
-	SetStateAction,
-	useCallback,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-} from 'react';
-import { ColumnDef, createColumnHelper } from '@tanstack/react-table';
-import { Virtualizer } from '@tanstack/react-virtual';
-import { Button, Tooltip, Typography } from 'antd';
-import cx from 'classnames';
-import HttpStatusBadge from 'components/HttpStatusBadge/HttpStatusBadge';
-import SpanHoverCard from 'components/SpanHoverCard/SpanHoverCard';
-import { TableV3 } from 'components/TableV3/TableV3';
-import { themeColors } from 'constants/theme';
-import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import useUrlQuery from 'hooks/useUrlQuery';
-import { generateColor } from 'lib/uPlotLib/utils/generateColor';
-import {
-	AlertCircle,
-	ArrowUpRight,
-	ChevronDown,
-	ChevronRight,
-	Leaf,
-} from 'lucide-react';
-import { useAppContext } from 'providers/App/App';
-import { Span } from 'types/api/trace/getTraceV2';
-import { toFixed } from 'utils/toFixed';
-
-import AddSpanToFunnelModal from '../../AddSpanToFunnelModal/AddSpanToFunnelModal';
-import SpanLineActionButtons from '../../SpanLineActionButtons';
-import { IInterestedSpan } from '../../TraceWaterfall';
-import Filters from './Filters/Filters';
-
-import './Success.styles.scss';
-
-// css config
-const CONNECTOR_WIDTH = 28;
-const VERTICAL_CONNECTOR_WIDTH = 1;
-
-interface ITraceMetadata {
-	traceId: string;
-	startTime: number;
-	endTime: number;
-	hasMissingSpans: boolean;
-}
-interface ISuccessProps {
-	spans: Span[];
-	traceMetadata: ITraceMetadata;
-	interestedSpanId: IInterestedSpan;
-	uncollapsedNodes: string[];
-	setInterestedSpanId: Dispatch<SetStateAction<IInterestedSpan>>;
-	setTraceFlamegraphStatsWidth: Dispatch<SetStateAction<number>>;
-	selectedSpan: Span | undefined;
-	setSelectedSpan: Dispatch<SetStateAction<Span | undefined>>;
-}
-
-function SpanOverview({
-	span,
-	isSpanCollapsed,
-	handleCollapseUncollapse,
-	handleSpanClick,
-	handleAddSpanToFunnel,
-	selectedSpan,
-	filteredSpanIds,
-	isFilterActive,
-	traceMetadata,
-}: {
-	span: Span;
-	isSpanCollapsed: boolean;
-	handleCollapseUncollapse: (id: string, collapse: boolean) => void;
-	selectedSpan: Span | undefined;
-	handleSpanClick: (span: Span) => void;
-	handleAddSpanToFunnel: (span: Span) => void;
-	filteredSpanIds: string[];
-	isFilterActive: boolean;
-	traceMetadata: ITraceMetadata;
-}): JSX.Element {
-	const isRootSpan = span.level === 0;
-	const { hasEditPermission } = useAppContext();
-
-	let color = generateColor(span.serviceName, themeColors.traceDetailColors);
-	if (span.hasError) {
-		color = `var(--bg-cherry-500)`;
-	}
-
-	// Smart highlighting logic
-	const isMatching =
-		isFilterActive && (filteredSpanIds || []).includes(span.spanId);
-	const isSelected = selectedSpan?.spanId === span.spanId;
-	const isDimmed = isFilterActive && !isMatching && !isSelected;
-	const isHighlighted = isFilterActive && isMatching && !isSelected;
-	const isSelectedNonMatching = isSelected && isFilterActive && !isMatching;
-
-	return (
-		<SpanHoverCard span={span} traceMetadata={traceMetadata}>
-			<div
-				className={cx('span-overview', {
-					'interested-span': isSelected && (!isFilterActive || isMatching),
-					'highlighted-span': isHighlighted,
-					'selected-non-matching-span': isSelectedNonMatching,
-					'dimmed-span': isDimmed,
-				})}
-				style={{
-					paddingLeft: `${
-						isRootSpan
-							? span.level * CONNECTOR_WIDTH
-							: (span.level - 1) * (CONNECTOR_WIDTH + VERTICAL_CONNECTOR_WIDTH)
-					}px`,
-					backgroundImage: `url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="54"><line x1="0" y1="0" x2="0" y2="54" stroke="rgb(29 33 45)" stroke-width="1" /></svg>')`,
-					backgroundRepeat: 'repeat',
-					backgroundSize: `${CONNECTOR_WIDTH + 1}px 54px`,
-				}}
-				onClick={(): void => handleSpanClick(span)}
-			>
-				{!isRootSpan && (
-					<div className="connector-lines">
-						<div
-							style={{
-								width: `${CONNECTOR_WIDTH}px`,
-								height: '1px',
-								borderTop: '1px solid var(--bg-slate-400)',
-								display: 'flex',
-								flexShrink: 0,
-								position: 'relative',
-								top: '-10px',
-							}}
-						/>
-					</div>
-				)}
-				<div className="span-overview-content">
-					<section className="first-row">
-						<div className="span-det">
-							{span.hasChildren ? (
-								<Button
-									onClick={(event): void => {
-										event.stopPropagation();
-										event.preventDefault();
-										handleCollapseUncollapse(span.spanId, !isSpanCollapsed);
-									}}
-									className="collapse-uncollapse-button"
-								>
-									{isSpanCollapsed ? (
-										<ChevronRight size={14} />
-									) : (
-										<ChevronDown size={14} />
-									)}
-									<Typography.Text className="children-count">
-										{span.subTreeNodeCount}
-									</Typography.Text>
-								</Button>
-							) : (
-								<Button className="collapse-uncollapse-button">
-									<Leaf size={14} />
-								</Button>
-							)}
-							<Typography.Text className="span-name">{span.name}</Typography.Text>
-						</div>
-						<HttpStatusBadge statusCode={span.tagMap?.['http.status_code']} />
-					</section>
-					<section className="second-row">
-						<div style={{ width: '2px', background: color, height: '100%' }} />
-						<Typography.Text className="service-name">
-							{span.serviceName}
-						</Typography.Text>
-						{!!span.serviceName && !!span.name && (
-							<div className="add-funnel-button">
-								<span className="add-funnel-button__separator">·</span>
-								<Tooltip
-									title={
-										!hasEditPermission
-											? 'You need editor or admin access to add spans to funnels'
-											: ''
-									}
-								>
-									<Button
-										type="text"
-										size="small"
-										className="add-funnel-button__button"
-										onClick={(e): void => {
-											e.preventDefault();
-											e.stopPropagation();
-											handleAddSpanToFunnel(span);
-										}}
-										disabled={!hasEditPermission}
-										icon={
-											<img
-												className="add-funnel-button__icon"
-												src="/Icons/funnel-add.svg"
-												alt="funnel-icon"
-											/>
-										}
-									/>
-								</Tooltip>
-							</div>
-						)}
-					</section>
-				</div>
-			</div>
-		</SpanHoverCard>
-	);
-}
-
-export function SpanDuration({
-	span,
-	traceMetadata,
-	handleSpanClick,
-	selectedSpan,
-	filteredSpanIds,
-	isFilterActive,
-}: {
-	span: Span;
-	traceMetadata: ITraceMetadata;
-	selectedSpan: Span | undefined;
-	handleSpanClick: (span: Span) => void;
-	filteredSpanIds: string[];
-	isFilterActive: boolean;
-}): JSX.Element {
-	const { time, timeUnitName } = convertTimeToRelevantUnit(
-		span.durationNano / 1e6,
-	);
-
-	const spread = traceMetadata.endTime - traceMetadata.startTime;
-	const leftOffset = ((span.timestamp - traceMetadata.startTime) * 1e2) / spread;
-	const width = (span.durationNano * 1e2) / (spread * 1e6);
-
-	let color = generateColor(span.serviceName, themeColors.traceDetailColors);
-
-	if (span.hasError) {
-		color = `var(--bg-cherry-500)`;
-	}
-
-	const [hasActionButtons, setHasActionButtons] = useState(false);
-
-	const isMatching =
-		isFilterActive && (filteredSpanIds || []).includes(span.spanId);
-	const isSelected = selectedSpan?.spanId === span.spanId;
-	const isDimmed = isFilterActive && !isMatching && !isSelected;
-	const isHighlighted = isFilterActive && isMatching && !isSelected;
-	const isSelectedNonMatching = isSelected && isFilterActive && !isMatching;
-
-	const handleMouseEnter = (): void => {
-		setHasActionButtons(true);
-	};
-
-	const handleMouseLeave = (): void => {
-		setHasActionButtons(false);
-	};
-
-	// Calculate text positioning to handle overflow cases
-	const textStyle = useMemo(() => {
-		const spanRightEdge = leftOffset + width;
-		const textWidthApprox = 8; // Approximate text width in percentage
-
-		// If span would cause text overflow, right-align text to span end
-		if (leftOffset > 100 - textWidthApprox) {
-			return {
-				right: `${100 - spanRightEdge}%`,
-				color,
-				textAlign: 'right' as const,
-			};
-		}
-
-		// Default: left-align text to span start
-		return {
-			left: `${leftOffset}%`,
-			color,
-		};
-	}, [leftOffset, width, color]);
-
-	return (
-		<SpanHoverCard span={span} traceMetadata={traceMetadata}>
-			<div
-				className={cx('span-duration', {
-					'interested-span': isSelected && (!isFilterActive || isMatching),
-					'highlighted-span': isHighlighted,
-					'selected-non-matching-span': isSelectedNonMatching,
-					'dimmed-span': isDimmed,
-				})}
-				onMouseEnter={handleMouseEnter}
-				onMouseLeave={handleMouseLeave}
-				onClick={(): void => handleSpanClick(span)}
-			>
-				<div
-					className="span-line"
-					style={{
-						left: `${leftOffset}%`,
-						width: `${width}%`,
-						backgroundColor: color,
-						position: 'relative',
-					}}
-				>
-					{span.event?.map((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 { isError } = event;
-						const { time, timeUnitName } = convertTimeToRelevantUnit(
-							eventTimeMs - span.timestamp,
-						);
-						return (
-							<Tooltip
-								key={`${span.spanId}-event-${event.name}-${event.timeUnixNano}`}
-								title={`${event.name} @ ${toFixed(time, 2)} ${timeUnitName}`}
-							>
-								<div
-									className={`event-dot ${isError ? 'error' : ''}`}
-									style={{
-										left: `${clampedOffset}%`,
-									}}
-								/>
-							</Tooltip>
-						);
-					})}
-				</div>
-				{hasActionButtons && <SpanLineActionButtons span={span} />}
-				<Typography.Text
-					className="span-line-text"
-					ellipsis
-					style={textStyle}
-				>{`${toFixed(time, 2)} ${timeUnitName}`}</Typography.Text>
-			</div>
-		</SpanHoverCard>
-	);
-}
-
-// table config
-const columnDefHelper = createColumnHelper<Span>();
-
-function getWaterfallColumns({
-	handleCollapseUncollapse,
-	uncollapsedNodes,
-	traceMetadata,
-	selectedSpan,
-	handleSpanClick,
-	handleAddSpanToFunnel,
-	filteredSpanIds,
-	isFilterActive,
-}: {
-	handleCollapseUncollapse: (id: string, collapse: boolean) => void;
-	uncollapsedNodes: string[];
-	traceMetadata: ITraceMetadata;
-	selectedSpan: Span | undefined;
-	handleSpanClick: (span: Span) => void;
-	handleAddSpanToFunnel: (span: Span) => void;
-	filteredSpanIds: string[];
-	isFilterActive: boolean;
-}): ColumnDef<Span, any>[] {
-	const waterfallColumns: ColumnDef<Span, any>[] = [
-		columnDefHelper.display({
-			id: 'span-name',
-			header: '',
-			cell: (props): JSX.Element => (
-				<SpanOverview
-					span={props.row.original}
-					handleCollapseUncollapse={handleCollapseUncollapse}
-					isSpanCollapsed={!uncollapsedNodes.includes(props.row.original.spanId)}
-					selectedSpan={selectedSpan}
-					handleSpanClick={handleSpanClick}
-					handleAddSpanToFunnel={handleAddSpanToFunnel}
-					traceMetadata={traceMetadata}
-					filteredSpanIds={filteredSpanIds}
-					isFilterActive={isFilterActive}
-				/>
-			),
-			size: 450,
-			/**
-			 * Note: The TanStack table currently does not support percentage-based column sizing.
-			 * Therefore, we specify both `minSize` and `maxSize` for the "span-name" column to ensure
-			 * that its width remains between 240px and 900px. Setting a `maxSize` here is important
-			 * because the "span-duration" column has column resizing disabled, making it difficult
-			 * to enforce a minimum width for that column. By constraining the "span-name" column,
-			 * we indirectly control the minimum width available for the "span-duration" column.
-			 */
-			minSize: 240,
-			maxSize: 900,
-		}),
-		columnDefHelper.display({
-			id: 'span-duration',
-			header: () => <div />,
-			enableResizing: false,
-			cell: (props): JSX.Element => (
-				<SpanDuration
-					span={props.row.original}
-					traceMetadata={traceMetadata}
-					selectedSpan={selectedSpan}
-					handleSpanClick={handleSpanClick}
-					filteredSpanIds={filteredSpanIds}
-					isFilterActive={isFilterActive}
-				/>
-			),
-		}),
-	];
-
-	return waterfallColumns;
-}
-
-function Success(props: ISuccessProps): JSX.Element {
-	const {
-		spans,
-		traceMetadata,
-		interestedSpanId,
-		uncollapsedNodes,
-		setInterestedSpanId,
-		setTraceFlamegraphStatsWidth,
-		setSelectedSpan,
-		selectedSpan,
-	} = props;
-
-	const [filteredSpanIds, setFilteredSpanIds] = useState<string[]>([]);
-	const [isFilterActive, setIsFilterActive] = useState<boolean>(false);
-	const virtualizerRef = useRef<Virtualizer<HTMLDivElement, Element>>();
-
-	const handleFilteredSpansChange = useCallback(
-		(spanIds: string[], isActive: boolean) => {
-			setFilteredSpanIds(spanIds);
-			setIsFilterActive(isActive);
-		},
-		[],
-	);
-
-	const handleCollapseUncollapse = useCallback(
-		(spanId: string, collapse: boolean) => {
-			setInterestedSpanId({ spanId, isUncollapsed: !collapse });
-		},
-		[setInterestedSpanId],
-	);
-
-	const handleVirtualizerInstanceChanged = (
-		instance: Virtualizer<HTMLDivElement, Element>,
-	): void => {
-		const { range } = instance;
-		// when there are less than 500 elements in the API call that means there is nothing to fetch on top and bottom so
-		// do not trigger the API call
-		if (spans.length < 500) {
-			return;
-		}
-
-		if (range?.startIndex === 0 && instance.isScrolling) {
-			// do not trigger for trace root as nothing to fetch above
-			if (spans[0].level !== 0) {
-				setInterestedSpanId({ spanId: spans[0].spanId, isUncollapsed: false });
-			}
-			return;
-		}
-
-		if (range?.endIndex === spans.length - 1 && instance.isScrolling) {
-			setInterestedSpanId({
-				spanId: spans[spans.length - 1].spanId,
-				isUncollapsed: false,
-			});
-		}
-	};
-
-	const [isAddSpanToFunnelModalOpen, setIsAddSpanToFunnelModalOpen] = useState(
-		false,
-	);
-	const [selectedSpanToAddToFunnel, setSelectedSpanToAddToFunnel] = useState<
-		Span | undefined
-	>(undefined);
-	const handleAddSpanToFunnel = useCallback((span: Span): void => {
-		setIsAddSpanToFunnelModalOpen(true);
-		setSelectedSpanToAddToFunnel(span);
-	}, []);
-
-	const urlQuery = useUrlQuery();
-	const { safeNavigate } = useSafeNavigate();
-
-	const handleSpanClick = useCallback(
-		(span: Span): void => {
-			setSelectedSpan(span);
-			if (span?.spanId) {
-				urlQuery.set('spanId', span?.spanId);
-			}
-
-			safeNavigate({ search: urlQuery.toString() });
-		},
-		[setSelectedSpan, urlQuery, safeNavigate],
-	);
-
-	const columns = useMemo(
-		() =>
-			getWaterfallColumns({
-				handleCollapseUncollapse,
-				uncollapsedNodes,
-				traceMetadata,
-				selectedSpan,
-				handleSpanClick,
-				handleAddSpanToFunnel,
-				filteredSpanIds,
-				isFilterActive,
-			}),
-		[
-			handleCollapseUncollapse,
-			uncollapsedNodes,
-			traceMetadata,
-			selectedSpan,
-			handleSpanClick,
-			handleAddSpanToFunnel,
-			filteredSpanIds,
-			isFilterActive,
-		],
-	);
-
-	useEffect(() => {
-		if (interestedSpanId.spanId !== '' && virtualizerRef.current) {
-			const idx = spans.findIndex(
-				(span) => span.spanId === interestedSpanId.spanId,
-			);
-			if (idx !== -1) {
-				setTimeout(() => {
-					virtualizerRef.current?.scrollToIndex(idx, {
-						align: 'center',
-						behavior: 'auto',
-					});
-				}, 400);
-
-				setSelectedSpan(spans[idx]);
-			}
-		} else {
-			setSelectedSpan((prev) => {
-				if (!prev) {
-					return spans[0];
-				}
-				return prev;
-			});
-		}
-	}, [interestedSpanId, setSelectedSpan, spans]);
-
-	return (
-		<div className="success-content">
-			{traceMetadata.hasMissingSpans && (
-				<div className="missing-spans">
-					<section className="left-info">
-						<AlertCircle size={14} />
-						<Typography.Text className="text">
-							This trace has missing spans
-						</Typography.Text>
-					</section>
-					<Button
-						icon={<ArrowUpRight size={14} />}
-						className="right-info"
-						type="text"
-						onClick={(): WindowProxy | null =>
-							window.open(
-								'https://signoz.io/docs/userguide/traces/#missing-spans',
-								'_blank',
-							)
-						}
-					>
-						Learn More
-					</Button>
-				</div>
-			)}
-			<Filters
-				startTime={traceMetadata.startTime / 1e3}
-				endTime={traceMetadata.endTime / 1e3}
-				traceID={traceMetadata.traceId}
-				onFilteredSpansChange={handleFilteredSpansChange}
-			/>
-			<TableV3
-				columns={columns}
-				data={spans}
-				config={{
-					handleVirtualizerInstanceChanged,
-				}}
-				customClassName={cx(
-					'waterfall-table',
-					traceMetadata.hasMissingSpans ? 'missing-spans-waterfall-table' : '',
-				)}
-				virtualiserRef={virtualizerRef}
-				setColumnWidths={setTraceFlamegraphStatsWidth}
-			/>
-			{selectedSpanToAddToFunnel && (
-				<AddSpanToFunnelModal
-					span={selectedSpanToAddToFunnel}
-					isOpen={isAddSpanToFunnelModalOpen}
-					onClose={(): void => setIsAddSpanToFunnelModalOpen(false)}
-				/>
-			)}
-		</div>
-	);
-}
-
-export default Success;

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/__tests__/SpanDuration.test.tsx

@@ -1,263 +0,0 @@
-import useUrlQuery from 'hooks/useUrlQuery';
-import { fireEvent, render, screen } from 'tests/test-utils';
-import { Span } from 'types/api/trace/getTraceV2';
-
-import { SpanDuration } from '../Success';
-
-// Constants to avoid string duplication
-const SPAN_DURATION_TEXT = '1.16 ms';
-const SPAN_DURATION_CLASS = '.span-duration';
-const INTERESTED_SPAN_CLASS = 'interested-span';
-const HIGHLIGHTED_SPAN_CLASS = 'highlighted-span';
-const DIMMED_SPAN_CLASS = 'dimmed-span';
-const SELECTED_NON_MATCHING_SPAN_CLASS = 'selected-non-matching-span';
-
-// Mock the hooks
-jest.mock('hooks/useUrlQuery');
-jest.mock('@signozhq/badge', () => ({
-	Badge: jest.fn(),
-}));
-
-const mockSpan: Span = {
-	spanId: 'test-span-id',
-	name: 'test-span',
-	serviceName: 'test-service',
-	durationNano: 1160000, // 1ms in nano
-	timestamp: 1234567890,
-	rootSpanId: 'test-root-span-id',
-	parentSpanId: 'test-parent-span-id',
-	traceId: 'test-trace-id',
-	hasError: false,
-	kind: 0,
-	references: [],
-	tagMap: {},
-	event: [],
-	rootName: 'test-root-name',
-	statusMessage: 'test-status-message',
-	statusCodeString: 'test-status-code-string',
-	spanKind: 'test-span-kind',
-	hasChildren: false,
-	hasSibling: false,
-	subTreeNodeCount: 0,
-	level: 0,
-};
-
-const mockTraceMetadata = {
-	traceId: 'test-trace-id',
-	startTime: 1234567000,
-	endTime: 1234569000,
-	hasMissingSpans: false,
-};
-
-const mockSafeNavigate = jest.fn();
-
-jest.mock('hooks/useSafeNavigate', () => ({
-	useSafeNavigate: (): any => ({
-		safeNavigate: mockSafeNavigate,
-	}),
-}));
-
-describe('SpanDuration', () => {
-	const mockSetSelectedSpan = jest.fn();
-	const mockUrlQuerySet = jest.fn();
-	const mockUrlQueryGet = jest.fn();
-
-	beforeEach(() => {
-		jest.clearAllMocks();
-
-		// Mock URL query hook
-		(useUrlQuery as jest.Mock).mockReturnValue({
-			set: mockUrlQuerySet,
-			get: mockUrlQueryGet,
-			toString: () => 'spanId=test-span-id',
-		});
-	});
-
-	it('calls handleSpanClick when clicked', () => {
-		const mockHandleSpanClick = jest.fn();
-
-		render(
-			<SpanDuration
-				span={mockSpan}
-				traceMetadata={mockTraceMetadata}
-				selectedSpan={undefined}
-				handleSpanClick={mockHandleSpanClick}
-				filteredSpanIds={[]}
-				isFilterActive={false}
-			/>,
-		);
-
-		// Find and click the span duration element
-		const spanElement = screen.getByText(SPAN_DURATION_TEXT);
-		fireEvent.click(spanElement);
-
-		// Verify handleSpanClick was called with the correct span
-		expect(mockHandleSpanClick).toHaveBeenCalledWith(mockSpan);
-	});
-
-	it('shows action buttons on hover', () => {
-		render(
-			<SpanDuration
-				span={mockSpan}
-				traceMetadata={mockTraceMetadata}
-				selectedSpan={undefined}
-				handleSpanClick={mockSetSelectedSpan}
-				filteredSpanIds={[]}
-				isFilterActive={false}
-			/>,
-		);
-
-		const spanElement = screen.getByText(SPAN_DURATION_TEXT);
-
-		// Initially, action buttons should not be visible
-		expect(screen.queryByRole('button')).not.toBeInTheDocument();
-
-		// Hover over the span
-		fireEvent.mouseEnter(spanElement);
-
-		// Action buttons should now be visible
-		expect(screen.getByRole('button')).toBeInTheDocument();
-
-		// Mouse leave should hide the buttons
-		fireEvent.mouseLeave(spanElement);
-		expect(screen.queryByRole('button')).not.toBeInTheDocument();
-	});
-
-	it('applies interested-span class when span is selected', () => {
-		render(
-			<SpanDuration
-				span={mockSpan}
-				traceMetadata={mockTraceMetadata}
-				selectedSpan={mockSpan}
-				handleSpanClick={mockSetSelectedSpan}
-				filteredSpanIds={[]}
-				isFilterActive={false}
-			/>,
-		);
-
-		const spanElement = screen
-			.getByText(SPAN_DURATION_TEXT)
-			.closest(SPAN_DURATION_CLASS);
-		expect(spanElement).toHaveClass(INTERESTED_SPAN_CLASS);
-	});
-
-	it('applies highlighted-span class when span matches filter', () => {
-		render(
-			<SpanDuration
-				span={mockSpan}
-				traceMetadata={mockTraceMetadata}
-				selectedSpan={undefined}
-				handleSpanClick={mockSetSelectedSpan}
-				filteredSpanIds={[mockSpan.spanId]}
-				isFilterActive
-			/>,
-		);
-
-		const spanElement = screen
-			.getByText(SPAN_DURATION_TEXT)
-			.closest(SPAN_DURATION_CLASS);
-		expect(spanElement).toHaveClass(HIGHLIGHTED_SPAN_CLASS);
-		expect(spanElement).not.toHaveClass(INTERESTED_SPAN_CLASS);
-	});
-
-	it('applies dimmed-span class when span does not match filter', () => {
-		render(
-			<SpanDuration
-				span={mockSpan}
-				traceMetadata={mockTraceMetadata}
-				selectedSpan={undefined}
-				handleSpanClick={mockSetSelectedSpan}
-				filteredSpanIds={['other-span-id']}
-				isFilterActive
-			/>,
-		);
-
-		const spanElement = screen
-			.getByText(SPAN_DURATION_TEXT)
-			.closest(SPAN_DURATION_CLASS);
-		expect(spanElement).toHaveClass(DIMMED_SPAN_CLASS);
-		expect(spanElement).not.toHaveClass(HIGHLIGHTED_SPAN_CLASS);
-	});
-
-	it('prioritizes interested-span over highlighted-span when span is selected and matches filter', () => {
-		render(
-			<SpanDuration
-				span={mockSpan}
-				traceMetadata={mockTraceMetadata}
-				selectedSpan={mockSpan}
-				handleSpanClick={mockSetSelectedSpan}
-				filteredSpanIds={[mockSpan.spanId]}
-				isFilterActive
-			/>,
-		);
-
-		const spanElement = screen
-			.getByText(SPAN_DURATION_TEXT)
-			.closest(SPAN_DURATION_CLASS);
-		expect(spanElement).toHaveClass(INTERESTED_SPAN_CLASS);
-		expect(spanElement).not.toHaveClass(HIGHLIGHTED_SPAN_CLASS);
-		expect(spanElement).not.toHaveClass(DIMMED_SPAN_CLASS);
-	});
-
-	it('applies selected-non-matching-span class when span is selected but does not match filter', () => {
-		render(
-			<SpanDuration
-				span={mockSpan}
-				traceMetadata={mockTraceMetadata}
-				selectedSpan={mockSpan}
-				handleSpanClick={mockSetSelectedSpan}
-				filteredSpanIds={['different-span-id']}
-				isFilterActive
-			/>,
-		);
-
-		const spanElement = screen
-			.getByText(SPAN_DURATION_TEXT)
-			.closest(SPAN_DURATION_CLASS);
-		expect(spanElement).toHaveClass(SELECTED_NON_MATCHING_SPAN_CLASS);
-		expect(spanElement).not.toHaveClass(INTERESTED_SPAN_CLASS);
-		expect(spanElement).not.toHaveClass(HIGHLIGHTED_SPAN_CLASS);
-		expect(spanElement).not.toHaveClass(DIMMED_SPAN_CLASS);
-	});
-
-	it('applies interested-span class when span is selected and no filter is active', () => {
-		render(
-			<SpanDuration
-				span={mockSpan}
-				traceMetadata={mockTraceMetadata}
-				selectedSpan={mockSpan}
-				handleSpanClick={mockSetSelectedSpan}
-				filteredSpanIds={[]}
-				isFilterActive={false}
-			/>,
-		);
-
-		const spanElement = screen
-			.getByText(SPAN_DURATION_TEXT)
-			.closest(SPAN_DURATION_CLASS);
-		expect(spanElement).toHaveClass(INTERESTED_SPAN_CLASS);
-		expect(spanElement).not.toHaveClass(SELECTED_NON_MATCHING_SPAN_CLASS);
-		expect(spanElement).not.toHaveClass(HIGHLIGHTED_SPAN_CLASS);
-		expect(spanElement).not.toHaveClass(DIMMED_SPAN_CLASS);
-	});
-
-	it('dims span when filter is active but no matches found', () => {
-		render(
-			<SpanDuration
-				span={mockSpan}
-				traceMetadata={mockTraceMetadata}
-				selectedSpan={undefined}
-				handleSpanClick={mockSetSelectedSpan}
-				filteredSpanIds={[]} // Empty array but filter is active
-				isFilterActive // This is the key difference
-			/>,
-		);
-
-		const spanElement = screen
-			.getByText(SPAN_DURATION_TEXT)
-			.closest(SPAN_DURATION_CLASS);
-		expect(spanElement).toHaveClass(DIMMED_SPAN_CLASS);
-		expect(spanElement).not.toHaveClass(HIGHLIGHTED_SPAN_CLASS);
-		expect(spanElement).not.toHaveClass(INTERESTED_SPAN_CLASS);
-	});
-});

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/__tests__/UnifiedSpanClick.test.tsx

@@ -1,447 +0,0 @@
-import React from 'react';
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-import { Span } from 'types/api/trace/getTraceV2';
-
-import Success from '../Success';
-
-// Mock the required hooks with proper typing
-const mockSafeNavigate = jest.fn() as jest.MockedFunction<
-	(params: { search: string }) => void
->;
-const mockUrlQuery = new URLSearchParams();
-
-jest.mock('hooks/useSafeNavigate', () => ({
-	useSafeNavigate: (): { safeNavigate: typeof mockSafeNavigate } => ({
-		safeNavigate: mockSafeNavigate,
-	}),
-}));
-
-jest.mock('hooks/useUrlQuery', () => (): URLSearchParams => mockUrlQuery);
-
-// App provider is already handled by test-utils
-
-// React Router is already globally mocked
-
-// Mock complex external dependencies that cause provider issues
-jest.mock('components/SpanHoverCard/SpanHoverCard', () => {
-	function SpanHoverCard({
-		children,
-	}: {
-		children: React.ReactNode;
-	}): JSX.Element {
-		return <div>{children}</div>;
-	}
-	SpanHoverCard.displayName = 'SpanHoverCard';
-	return SpanHoverCard;
-});
-
-// Mock the Filters component that's causing React Query issues
-jest.mock('../Filters/Filters', () => {
-	function Filters(): null {
-		return null;
-	}
-	Filters.displayName = 'Filters';
-	return Filters;
-});
-
-// Mock other potential dependencies
-jest.mock(
-	'pages/TraceDetailsV3/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal',
-	() => {
-		function AddSpanToFunnelModal(): null {
-			return null;
-		}
-		AddSpanToFunnelModal.displayName = 'AddSpanToFunnelModal';
-		return AddSpanToFunnelModal;
-	},
-);
-
-jest.mock('pages/TraceDetailsV3/TraceWaterfall/SpanLineActionButtons', () => {
-	function SpanLineActionButtons(): null {
-		return null;
-	}
-	SpanLineActionButtons.displayName = 'SpanLineActionButtons';
-	return SpanLineActionButtons;
-});
-
-jest.mock('components/HttpStatusBadge/HttpStatusBadge', () => {
-	function HttpStatusBadge(): null {
-		return null;
-	}
-	HttpStatusBadge.displayName = 'HttpStatusBadge';
-	return HttpStatusBadge;
-});
-
-// Mock other utilities that might cause issues
-jest.mock('lib/uPlotLib/utils/generateColor', () => ({
-	generateColor: (): string => '#1890ff',
-}));
-
-jest.mock('container/TraceDetail/utils', () => ({
-	convertTimeToRelevantUnit: (
-		value: number,
-	): { time: number; timeUnitName: string } => ({
-		time: value < 1000 ? value : value / 1000,
-		timeUnitName: value < 1000 ? 'ms' : 's',
-	}),
-}));
-
-jest.mock('utils/toFixed', () => ({
-	toFixed: (value: number, decimals: number): string => value.toFixed(decimals),
-}));
-
-// Create a simplified mock TableV3 that renders the actual column components
-jest.mock('components/TableV3/TableV3', () => ({
-	TableV3: ({
-		columns,
-		data,
-	}: {
-		columns: unknown[];
-		data: Span[];
-	}): JSX.Element => {
-		// Get the current props from the columns (which contain the current state)
-		const spanOverviewColumn = columns[0] as {
-			cell?: (props: any) => JSX.Element;
-		};
-		const spanDurationColumn = columns[1] as {
-			cell?: (props: any) => JSX.Element;
-		};
-
-		return (
-			<div data-testid="trace-table">
-				{data.map((row: Span) => {
-					// Create proper cell props that match what TanStack Table expects
-					const cellProps = {
-						row: {
-							original: row,
-							getValue: (): Span => row,
-							getAllCells: (): any[] => [],
-							getVisibleCells: (): any[] => [],
-							getUniqueValues: (): any[] => [],
-							getIsSelected: (): boolean => false,
-							getIsSomeSelected: (): boolean => false,
-							getIsAllSelected: (): boolean => false,
-							getCanSelect: (): boolean => true,
-							getCanSelectSubRows: (): boolean => true,
-							getCanSelectAll: (): boolean => true,
-							toggleSelected: (): void => {},
-							getToggleSelectedHandler: (): (() => void) => (): void => {},
-						},
-						column: { id: 'span-name' },
-						table: {},
-						cell: {},
-						renderValue: (): Span => row,
-						getValue: (): Span => row,
-					};
-
-					const durationCellProps = {
-						...cellProps,
-						column: { id: 'span-duration' },
-					};
-
-					return (
-						<div key={row.spanId} data-testid={`table-row-${row.spanId}`}>
-							{/* Render span overview column */}
-							<div data-testid={`cell-0-${row.spanId}`}>
-								{spanOverviewColumn?.cell?.(cellProps)}
-							</div>
-							{/* Render span duration column */}
-							<div data-testid={`cell-1-${row.spanId}`}>
-								{spanDurationColumn?.cell?.(durationCellProps)}
-							</div>
-						</div>
-					);
-				})}
-			</div>
-		);
-	},
-}));
-
-const mockTraceMetadata = {
-	traceId: 'test-trace-id',
-	startTime: 1679748225000000,
-	endTime: 1679748226000000,
-	hasMissingSpans: false,
-};
-
-const createMockSpan = (spanId: string, level = 1): Span => ({
-	spanId,
-	traceId: 'test-trace-id',
-	rootSpanId: 'span-1',
-	parentSpanId: level === 0 ? '' : 'span-1',
-	name: `Test Span ${spanId}`,
-	serviceName: 'test-service',
-	timestamp: mockTraceMetadata.startTime + level * 100000,
-	durationNano: 50000000,
-	level,
-	hasError: false,
-	kind: 1,
-	references: [],
-	tagMap: {},
-	event: [],
-	rootName: 'Test Root Span',
-	statusMessage: '',
-	statusCodeString: 'OK',
-	spanKind: 'server',
-	hasChildren: false,
-	hasSibling: false,
-	subTreeNodeCount: 1,
-});
-
-const mockSpans = [
-	createMockSpan('span-1', 0),
-	createMockSpan('span-2', 1),
-	createMockSpan('span-3', 1),
-];
-
-// Shared TestComponent for all tests
-function TestComponent(): JSX.Element {
-	const [selectedSpan, setSelectedSpan] = React.useState<Span | undefined>(
-		undefined,
-	);
-
-	return (
-		<Success
-			spans={mockSpans}
-			traceMetadata={mockTraceMetadata}
-			interestedSpanId={{ spanId: '', isUncollapsed: false }}
-			uncollapsedNodes={mockSpans.map((s) => s.spanId)}
-			setInterestedSpanId={jest.fn()}
-			setTraceFlamegraphStatsWidth={jest.fn()}
-			selectedSpan={selectedSpan}
-			setSelectedSpan={setSelectedSpan}
-		/>
-	);
-}
-
-describe('Span Click User Flows', () => {
-	const FIRST_SPAN_TEST_ID = 'cell-0-span-1';
-	const FIRST_SPAN_DURATION_TEST_ID = 'cell-1-span-1';
-	const SECOND_SPAN_TEST_ID = 'cell-0-span-2';
-	const SPAN_OVERVIEW_CLASS = '.span-overview';
-	const SPAN_DURATION_CLASS = '.span-duration';
-	const INTERESTED_SPAN_CLASS = 'interested-span';
-	const SECOND_SPAN_DURATION_TEST_ID = 'cell-1-span-2';
-
-	beforeEach(() => {
-		jest.clearAllMocks();
-		// Clear all URL parameters
-		Array.from(mockUrlQuery.keys()).forEach((key) => mockUrlQuery.delete(key));
-	});
-
-	it('clicking span updates URL with spanId parameter', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		render(
-			<Success
-				spans={mockSpans}
-				traceMetadata={mockTraceMetadata}
-				interestedSpanId={{ spanId: '', isUncollapsed: false }}
-				uncollapsedNodes={mockSpans.map((s) => s.spanId)}
-				setInterestedSpanId={jest.fn()}
-				setTraceFlamegraphStatsWidth={jest.fn()}
-				selectedSpan={undefined}
-				setSelectedSpan={jest.fn()}
-			/>,
-			undefined,
-			{ initialRoute: '/trace' },
-		);
-
-		// Initially URL should not have spanId
-		expect(mockUrlQuery.get('spanId')).toBeNull();
-
-		// Click on the actual span element (not the wrapper)
-		const spanOverview = screen.getByTestId(FIRST_SPAN_TEST_ID);
-		const spanElement = spanOverview.querySelector(
-			SPAN_OVERVIEW_CLASS,
-		) as HTMLElement;
-		await user.click(spanElement);
-
-		// Verify URL was updated with spanId
-		expect(mockUrlQuery.get('spanId')).toBe('span-1');
-		expect(mockSafeNavigate).toHaveBeenCalledWith({
-			search: expect.stringContaining('spanId=span-1'),
-		});
-	});
-
-	it('clicking span duration visually selects the span', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		render(<TestComponent />, undefined, {
-			initialRoute: '/trace',
-		});
-
-		// Wait for initial render and selection
-		await waitFor(() => {
-			const spanDuration = screen.getByTestId(FIRST_SPAN_DURATION_TEST_ID);
-			const spanDurationElement = spanDuration.querySelector(
-				SPAN_DURATION_CLASS,
-			) as HTMLElement;
-			expect(spanDurationElement).toHaveClass(INTERESTED_SPAN_CLASS);
-		});
-
-		// Click on span-2 to test selection change
-		const span2Duration = screen.getByTestId(SECOND_SPAN_DURATION_TEST_ID);
-		const span2DurationElement = span2Duration.querySelector(
-			SPAN_DURATION_CLASS,
-		) as HTMLElement;
-		await user.click(span2DurationElement);
-
-		// Wait for the state update and re-render
-		await waitFor(() => {
-			const spanDuration = screen.getByTestId(FIRST_SPAN_DURATION_TEST_ID);
-			const spanDurationElement = spanDuration.querySelector(
-				SPAN_DURATION_CLASS,
-			) as HTMLElement;
-			const span2Duration = screen.getByTestId(SECOND_SPAN_DURATION_TEST_ID);
-			const span2DurationElement = span2Duration.querySelector(
-				SPAN_DURATION_CLASS,
-			) as HTMLElement;
-
-			expect(spanDurationElement).not.toHaveClass(INTERESTED_SPAN_CLASS);
-			expect(span2DurationElement).toHaveClass(INTERESTED_SPAN_CLASS);
-		});
-	});
-
-	it('both click areas produce the same visual result', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		render(<TestComponent />, undefined, {
-			initialRoute: '/trace',
-		});
-
-		// Wait for initial render and selection
-		await waitFor(() => {
-			const spanOverview = screen.getByTestId(FIRST_SPAN_TEST_ID);
-			const spanDuration = screen.getByTestId(FIRST_SPAN_DURATION_TEST_ID);
-			const spanOverviewElement = spanOverview.querySelector(
-				SPAN_OVERVIEW_CLASS,
-			) as HTMLElement;
-			const spanDurationElement = spanDuration.querySelector(
-				SPAN_DURATION_CLASS,
-			) as HTMLElement;
-
-			// Initially both areas should show the same visual selection (first span is auto-selected)
-			expect(spanOverviewElement).toHaveClass(INTERESTED_SPAN_CLASS);
-			expect(spanDurationElement).toHaveClass(INTERESTED_SPAN_CLASS);
-		});
-
-		// Click span-2 to test selection change
-		const span2Overview = screen.getByTestId(SECOND_SPAN_TEST_ID);
-		const span2Element = span2Overview.querySelector(
-			SPAN_OVERVIEW_CLASS,
-		) as HTMLElement;
-		await user.click(span2Element);
-
-		// Wait for the state update and re-render
-		await waitFor(() => {
-			const spanOverview = screen.getByTestId(FIRST_SPAN_TEST_ID);
-			const spanDuration = screen.getByTestId(FIRST_SPAN_DURATION_TEST_ID);
-			const spanOverviewElement = spanOverview.querySelector(
-				SPAN_OVERVIEW_CLASS,
-			) as HTMLElement;
-			const spanDurationElement = spanDuration.querySelector(
-				SPAN_DURATION_CLASS,
-			) as HTMLElement;
-
-			// Now span-2 should be selected, span-1 should not
-			expect(spanOverviewElement).not.toHaveClass(INTERESTED_SPAN_CLASS);
-			expect(spanDurationElement).not.toHaveClass(INTERESTED_SPAN_CLASS);
-
-			// Check that span-2 is selected
-			const span2Overview = screen.getByTestId(SECOND_SPAN_TEST_ID);
-			const span2Duration = screen.getByTestId(SECOND_SPAN_DURATION_TEST_ID);
-			const span2OverviewElement = span2Overview.querySelector(
-				SPAN_OVERVIEW_CLASS,
-			) as HTMLElement;
-			const span2DurationElement = span2Duration.querySelector(
-				SPAN_DURATION_CLASS,
-			) as HTMLElement;
-
-			expect(span2OverviewElement).toHaveClass(INTERESTED_SPAN_CLASS);
-			expect(span2DurationElement).toHaveClass(INTERESTED_SPAN_CLASS);
-		});
-	});
-
-	it('clicking different spans updates selection correctly', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		render(<TestComponent />, undefined, {
-			initialRoute: '/trace',
-		});
-
-		// Wait for initial render and selection
-		await waitFor(() => {
-			const span1Overview = screen.getByTestId(FIRST_SPAN_TEST_ID);
-			const span1Element = span1Overview.querySelector(
-				SPAN_OVERVIEW_CLASS,
-			) as HTMLElement;
-			expect(span1Element).toHaveClass(INTERESTED_SPAN_CLASS);
-		});
-
-		// Click second span
-		const span2Overview = screen.getByTestId(SECOND_SPAN_TEST_ID);
-		const span2Element = span2Overview.querySelector(
-			SPAN_OVERVIEW_CLASS,
-		) as HTMLElement;
-		await user.click(span2Element);
-
-		// Wait for the state update and re-render
-		await waitFor(() => {
-			const span1Overview = screen.getByTestId(FIRST_SPAN_TEST_ID);
-			const span1Element = span1Overview.querySelector(
-				SPAN_OVERVIEW_CLASS,
-			) as HTMLElement;
-			const span2Overview = screen.getByTestId(SECOND_SPAN_TEST_ID);
-			const span2Element = span2Overview.querySelector(
-				SPAN_OVERVIEW_CLASS,
-			) as HTMLElement;
-
-			// Second span should be selected, first should not
-			expect(span1Element).not.toHaveClass(INTERESTED_SPAN_CLASS);
-			expect(span2Element).toHaveClass(INTERESTED_SPAN_CLASS);
-		});
-	});
-
-	it('preserves existing URL parameters when selecting spans', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		// Pre-populate URL with existing parameters
-		mockUrlQuery.set('existingParam', 'existingValue');
-		mockUrlQuery.set('anotherParam', 'anotherValue');
-
-		render(
-			<Success
-				spans={mockSpans}
-				traceMetadata={mockTraceMetadata}
-				interestedSpanId={{ spanId: '', isUncollapsed: false }}
-				uncollapsedNodes={mockSpans.map((s) => s.spanId)}
-				setInterestedSpanId={jest.fn()}
-				setTraceFlamegraphStatsWidth={jest.fn()}
-				selectedSpan={undefined}
-				setSelectedSpan={jest.fn()}
-			/>,
-			undefined,
-			{ initialRoute: '/trace' },
-		);
-
-		// Click on the actual span element (not the wrapper)
-		const spanOverview = screen.getByTestId(FIRST_SPAN_TEST_ID);
-		const spanElement = spanOverview.querySelector(
-			SPAN_OVERVIEW_CLASS,
-		) as HTMLElement;
-		await user.click(spanElement);
-
-		// Verify existing parameters are preserved and spanId is added
-		expect(mockUrlQuery.get('existingParam')).toBe('existingValue');
-		expect(mockUrlQuery.get('anotherParam')).toBe('anotherValue');
-		expect(mockUrlQuery.get('spanId')).toBe('span-1');
-
-		// Verify navigation was called with all parameters
-		expect(mockSafeNavigate).toHaveBeenCalledWith({
-			search: expect.stringMatching(
-				/existingParam=existingValue.*anotherParam=anotherValue.*spanId=span-1/,
-			),
-		});
-	});
-});

frontend/src/pages/TraceDetailsV3/TraceWaterfall/constants.ts

@@ -1,7 +0,0 @@
-export enum TraceWaterfallStates {
-	LOADING = 'LOADING',
-	SUCCESS = 'SUCCESS',
-	NO_DATA = 'NO_DATA',
-	ERROR = 'ERROR',
-	FETCHING_WITH_OLD_DATA_PRESENT = 'FETCHING_WTIH_OLD_DATA_PRESENT',
-}

frontend/src/pages/TraceDetailsV3/index.tsx

@@ -1,95 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
-import {
-	ResizableHandle,
-	ResizablePanel,
-	ResizablePanelGroup,
-} from '@signozhq/resizable';
-import useGetTraceV2 from 'hooks/trace/useGetTraceV2';
-import useUrlQuery from 'hooks/useUrlQuery';
-import { Span, TraceDetailV2URLProps } from 'types/api/trace/getTraceV2';
-
-import TraceDetailsHeader from './TraceDetailsHeader/TraceDetailsHeader';
-import TraceFlamegraph from './TraceFlamegraph/TraceFlamegraph';
-import TraceWaterfall, {
-	IInterestedSpan,
-} from './TraceWaterfall/TraceWaterfall';
-
-function TraceDetailsV3(): JSX.Element {
-	const { id: traceId } = useParams<TraceDetailV2URLProps>();
-	const urlQuery = useUrlQuery();
-	const [interestedSpanId, setInterestedSpanId] = useState<IInterestedSpan>(
-		() => ({
-			spanId: urlQuery.get('spanId') || '',
-			isUncollapsed: urlQuery.get('spanId') !== '',
-		}),
-	);
-	const [
-		_traceFlamegraphStatsWidth,
-		setTraceFlamegraphStatsWidth,
-	] = useState<number>(450);
-	const [uncollapsedNodes, setUncollapsedNodes] = useState<string[]>([]);
-	const [selectedSpan, setSelectedSpan] = useState<Span>();
-
-	useEffect(() => {
-		setInterestedSpanId({
-			spanId: urlQuery.get('spanId') || '',
-			isUncollapsed: urlQuery.get('spanId') !== '',
-		});
-	}, [urlQuery]);
-
-	const {
-		data: traceData,
-		isFetching: isFetchingTraceData,
-		error: errorFetchingTraceData,
-	} = useGetTraceV2({
-		traceId,
-		uncollapsedSpans: uncollapsedNodes,
-		selectedSpanId: interestedSpanId.spanId,
-		isSelectedSpanIDUnCollapsed: interestedSpanId.isUncollapsed,
-	});
-
-	useEffect(() => {
-		if (traceData && traceData.payload && traceData.payload.uncollapsedSpans) {
-			setUncollapsedNodes(traceData.payload.uncollapsedSpans);
-		}
-	}, [traceData]);
-
-	return (
-		<div
-			style={{
-				height: 'calc(100vh - 90px)',
-				display: 'flex',
-				flexDirection: 'column',
-			}}
-		>
-			<TraceDetailsHeader />
-			<ResizablePanelGroup
-				direction="vertical"
-				autoSaveId="trace-details-v3-layout"
-				style={{ flex: 1 }}
-			>
-				<ResizablePanel defaultSize={40} minSize={20} maxSize={80}>
-					<TraceFlamegraph />
-				</ResizablePanel>
-				<ResizableHandle withHandle />
-				<ResizablePanel defaultSize={60} minSize={20}>
-					<TraceWaterfall
-						traceData={traceData}
-						isFetchingTraceData={isFetchingTraceData}
-						errorFetchingTraceData={errorFetchingTraceData}
-						traceId={traceId || ''}
-						interestedSpanId={interestedSpanId}
-						setInterestedSpanId={setInterestedSpanId}
-						uncollapsedNodes={uncollapsedNodes}
-						setTraceFlamegraphStatsWidth={setTraceFlamegraphStatsWidth}
-						selectedSpan={selectedSpan}
-						setSelectedSpan={setSelectedSpan}
-					/>
-				</ResizablePanel>
-			</ResizablePanelGroup>
-		</div>
-	);
-}
-
-export default TraceDetailsV3;

frontend/src/utils/metricsTimeStorageUtils.ts

@@ -0,0 +1,28 @@
+import getLocalStorageKey from 'api/browser/localstorage/get';
+import setLocalStorageKey from 'api/browser/localstorage/set';
+import { LOCALSTORAGE } from 'constants/localStorage';
+
+/**
+ * Updates the stored time duration for a route in localStorage.
+ * Used by both DateTimeSelectionV2 (manual time pick) and useZoomOut (zoom out button).
+ *
+ * @param pathname - The route path (e.g. /infrastructure-monitoring/hosts)
+ * @param value - The time value to store (preset string like '1w' or JSON string for custom range)
+ */
+export function persistTimeDurationForRoute(
+	pathname: string,
+	value: string,
+): void {
+	const preRoutes = getLocalStorageKey(LOCALSTORAGE.METRICS_TIME_IN_DURATION);
+	let preRoutesObject: Record<string, string> = {};
+	try {
+		preRoutesObject = preRoutes ? JSON.parse(preRoutes) : {};
+	} catch {
+		preRoutesObject = {};
+	}
+	const preRoute = { ...preRoutesObject, [pathname]: value };
+	setLocalStorageKey(
+		LOCALSTORAGE.METRICS_TIME_IN_DURATION,
+		JSON.stringify(preRoute),
+	);
+}

pkg/querier/consume.go

@@ -69,6 +69,7 @@ func readAsTimeSeries(rows driver.Rows, queryWindow *qbtypes.TimeRange, step qbt
 		key string // deterministic join of label values
 	}
 	seriesMap := map[sKey]*qbtypes.TimeSeries{}
+	var keyOrder []sKey // preserves ClickHouse row-arrival order
 
 	stepMs := uint64(step.Duration.Milliseconds())
 
@@ -219,6 +220,7 @@ func readAsTimeSeries(rows driver.Rows, queryWindow *qbtypes.TimeRange, step qbt
 			if !ok {
 				series = &qbtypes.TimeSeries{Labels: lblObjs}
 				seriesMap[key] = series
+				keyOrder = append(keyOrder, key)
 			}
 			series.Values = append(series.Values, &qbtypes.TimeSeriesValue{
 				Timestamp: ts,
@@ -250,8 +252,8 @@ func readAsTimeSeries(rows driver.Rows, queryWindow *qbtypes.TimeRange, step qbt
 			Alias: "__result_" + strconv.Itoa(i),
 		}
 	}
-	for k, s := range seriesMap {
-		buckets[k.agg].Series = append(buckets[k.agg].Series, s)
+	for _, k := range keyOrder {
+		buckets[k.agg].Series = append(buckets[k.agg].Series, seriesMap[k])
 	}
 
 	var nonEmpty []*qbtypes.AggregationBucket

pkg/querier/postprocess.go

@@ -185,22 +185,6 @@ func postProcessMetricQuery(
 	query qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation],
 	req *qbtypes.QueryRangeRequest,
 ) *qbtypes.Result {
-
-	config := query.Aggregations[0]
-	spaceAggOrderBy := fmt.Sprintf("%s(%s)", config.SpaceAggregation.StringValue(), config.MetricName)
-	timeAggOrderBy := fmt.Sprintf("%s(%s)", config.TimeAggregation.StringValue(), config.MetricName)
-	timeSpaceAggOrderBy := fmt.Sprintf("%s(%s(%s))", config.SpaceAggregation.StringValue(), config.TimeAggregation.StringValue(), config.MetricName)
-
-	for idx := range query.Order {
-		if query.Order[idx].Key.Name == spaceAggOrderBy ||
-			query.Order[idx].Key.Name == timeAggOrderBy ||
-			query.Order[idx].Key.Name == timeSpaceAggOrderBy {
-			query.Order[idx].Key.Name = qbtypes.DefaultOrderByKey
-		}
-	}
-
-	result = q.applySeriesLimit(result, query.Limit, query.Order)
-
 	if len(query.Functions) > 0 {
 		step := query.StepInterval.Duration.Milliseconds()
 		functions := q.prepareFillZeroArgsWithStep(query.Functions, req, step)

pkg/querybuilder/fallback_expr.go

@@ -132,6 +132,14 @@ func GroupByKeys(keys []qbtypes.GroupByKey) []string {
 	return k
 }
 
+func OrderByKeys(keys []qbtypes.OrderBy) []string {
+	k := []string{}
+	for _, key := range keys {
+		k = append(k, "`"+key.Key.Name+"`")
+	}
+	return k
+}
+
 func FormatValueForContains(value any) string {
 	if value == nil {
 		return ""

pkg/telemetrymeter/stmt_builder_test.go

@@ -51,7 +51,7 @@ func TestStatementBuilder(t *testing.T) {
 				},
 			},
 			expected: qbtypes.Statement{
-				Query: "WITH __temporal_aggregation_cte AS (SELECT ts, `service.name`, multiIf(row_number() OVER rate_window = 1, nan, (per_series_value - lagInFrame(per_series_value, 1) OVER rate_window) < 0, per_series_value / (ts - lagInFrame(ts, 1) OVER rate_window), (per_series_value - lagInFrame(per_series_value, 1) OVER rate_window) / (ts - lagInFrame(ts, 1) OVER rate_window)) AS per_series_value FROM (SELECT fingerprint, toStartOfInterval(toDateTime(intDiv(unix_milli, 1000)), toIntervalSecond(86400)) AS ts, JSONExtractString(labels, 'service.name') AS `service.name`, max(value) AS per_series_value FROM signoz_meter.distributed_samples AS points WHERE metric_name IN (?) AND unix_milli >= ? AND unix_milli < ? AND JSONExtractString(labels, 'service.name') = ? AND LOWER(temporality) LIKE LOWER(?) GROUP BY fingerprint, ts, `service.name` ORDER BY fingerprint, ts) WINDOW rate_window AS (PARTITION BY fingerprint ORDER BY fingerprint, ts)), __spatial_aggregation_cte AS (SELECT ts, `service.name`, sum(per_series_value) AS value FROM __temporal_aggregation_cte WHERE isNaN(per_series_value) = ? GROUP BY ts, `service.name`) SELECT * FROM __spatial_aggregation_cte ORDER BY `service.name`, ts",
+				Query: "WITH __temporal_aggregation_cte AS (SELECT ts, `service.name`, multiIf(row_number() OVER rate_window = 1, nan, (per_series_value - lagInFrame(per_series_value, 1) OVER rate_window) < 0, per_series_value / (ts - lagInFrame(ts, 1) OVER rate_window), (per_series_value - lagInFrame(per_series_value, 1) OVER rate_window) / (ts - lagInFrame(ts, 1) OVER rate_window)) AS per_series_value FROM (SELECT fingerprint, toStartOfInterval(toDateTime(intDiv(unix_milli, 1000)), toIntervalSecond(86400)) AS ts, JSONExtractString(labels, 'service.name') AS `service.name`, max(value) AS per_series_value FROM signoz_meter.distributed_samples AS points WHERE metric_name IN (?) AND unix_milli >= ? AND unix_milli < ? AND JSONExtractString(labels, 'service.name') = ? AND LOWER(temporality) LIKE LOWER(?) GROUP BY fingerprint, ts, `service.name` ORDER BY fingerprint, ts) WINDOW rate_window AS (PARTITION BY fingerprint ORDER BY fingerprint, ts)), __spatial_aggregation_cte AS (SELECT ts, `service.name`, sum(per_series_value) AS value FROM __temporal_aggregation_cte WHERE isNaN(per_series_value) = ? GROUP BY ts, `service.name`) SELECT * FROM __spatial_aggregation_cte WHERE (`service.name`) IN (SELECT `service.name` FROM __spatial_aggregation_cte GROUP BY `service.name` ORDER BY avg(value) LIMIT 10) ORDER BY `service.name`, ts ASC",
 				Args:  []any{"signoz_calls_total", uint64(1747785600000), uint64(1747983420000), "cartservice", "cumulative", 0},
 			},
 			expectedErr: nil,
@@ -84,7 +84,7 @@ func TestStatementBuilder(t *testing.T) {
 				},
 			},
 			expected: qbtypes.Statement{
-				Query: "WITH __spatial_aggregation_cte AS (SELECT toStartOfInterval(toDateTime(intDiv(unix_milli, 1000)), toIntervalSecond(86400)) AS ts, JSONExtractString(labels, 'service.name') AS `service.name`, sum(value)/86400 AS value FROM signoz_meter.distributed_samples AS points WHERE metric_name IN (?) AND unix_milli >= ? AND unix_milli < ? AND JSONExtractString(labels, 'service.name') = ? AND LOWER(temporality) LIKE LOWER(?) GROUP BY ts, `service.name`) SELECT * FROM __spatial_aggregation_cte ORDER BY `service.name`, ts",
+				Query: "WITH __spatial_aggregation_cte AS (SELECT toStartOfInterval(toDateTime(intDiv(unix_milli, 1000)), toIntervalSecond(86400)) AS ts, JSONExtractString(labels, 'service.name') AS `service.name`, sum(value)/86400 AS value FROM signoz_meter.distributed_samples AS points WHERE metric_name IN (?) AND unix_milli >= ? AND unix_milli < ? AND JSONExtractString(labels, 'service.name') = ? AND LOWER(temporality) LIKE LOWER(?) GROUP BY ts, `service.name`) SELECT * FROM __spatial_aggregation_cte WHERE (`service.name`) IN (SELECT `service.name` FROM __spatial_aggregation_cte GROUP BY `service.name` ORDER BY avg(value) LIMIT 10) ORDER BY `service.name`, ts ASC",
 				Args:  []any{"signoz_calls_total", uint64(1747872000000), uint64(1747983420000), "cartservice", "delta"},
 			},
 			expectedErr: nil,
@@ -117,7 +117,7 @@ func TestStatementBuilder(t *testing.T) {
 				},
 			},
 			expected: qbtypes.Statement{
-				Query: "WITH __temporal_aggregation_cte AS (SELECT fingerprint, toStartOfInterval(toDateTime(intDiv(unix_milli, 1000)), toIntervalSecond(86400)) AS ts, JSONExtractString(labels, 'service.name') AS `service.name`, sum(value)/86400 AS per_series_value FROM signoz_meter.distributed_samples AS points WHERE metric_name IN (?) AND unix_milli >= ? AND unix_milli < ? AND JSONExtractString(labels, 'service.name') = ? AND LOWER(temporality) LIKE LOWER(?) GROUP BY fingerprint, ts, `service.name` ORDER BY fingerprint, ts), __spatial_aggregation_cte AS (SELECT ts, `service.name`, avg(per_series_value) AS value FROM __temporal_aggregation_cte WHERE isNaN(per_series_value) = ? GROUP BY ts, `service.name`) SELECT * FROM __spatial_aggregation_cte ORDER BY `service.name`, ts",
+				Query: "WITH __temporal_aggregation_cte AS (SELECT fingerprint, toStartOfInterval(toDateTime(intDiv(unix_milli, 1000)), toIntervalSecond(86400)) AS ts, JSONExtractString(labels, 'service.name') AS `service.name`, sum(value)/86400 AS per_series_value FROM signoz_meter.distributed_samples AS points WHERE metric_name IN (?) AND unix_milli >= ? AND unix_milli < ? AND JSONExtractString(labels, 'service.name') = ? AND LOWER(temporality) LIKE LOWER(?) GROUP BY fingerprint, ts, `service.name` ORDER BY fingerprint, ts), __spatial_aggregation_cte AS (SELECT ts, `service.name`, avg(per_series_value) AS value FROM __temporal_aggregation_cte WHERE isNaN(per_series_value) = ? GROUP BY ts, `service.name`) SELECT * FROM __spatial_aggregation_cte WHERE (`service.name`) IN (SELECT `service.name` FROM __spatial_aggregation_cte GROUP BY `service.name` ORDER BY avg(value) LIMIT 10) ORDER BY `service.name`, ts ASC",
 				Args:  []any{"signoz_calls_total", uint64(1747872000000), uint64(1747983420000), "cartservice", "delta", 0},
 			},
 			expectedErr: nil,
@@ -150,7 +150,7 @@ func TestStatementBuilder(t *testing.T) {
 				},
 			},
 			expected: qbtypes.Statement{
-				Query: "WITH __temporal_aggregation_cte AS (SELECT fingerprint, toStartOfInterval(toDateTime(intDiv(unix_milli, 1000)), toIntervalSecond(86400)) AS ts, JSONExtractString(labels, 'host.name') AS `host.name`, avg(value) AS per_series_value FROM signoz_meter.distributed_samples AS points WHERE metric_name IN (?) AND unix_milli >= ? AND unix_milli < ? AND JSONExtractString(labels, 'host.name') = ? AND LOWER(temporality) LIKE LOWER(?) GROUP BY fingerprint, ts, `host.name` ORDER BY fingerprint, ts), __spatial_aggregation_cte AS (SELECT ts, `host.name`, sum(per_series_value) AS value FROM __temporal_aggregation_cte WHERE isNaN(per_series_value) = ? GROUP BY ts, `host.name`) SELECT * FROM __spatial_aggregation_cte ORDER BY `host.name`, ts",
+				Query: "WITH __temporal_aggregation_cte AS (SELECT fingerprint, toStartOfInterval(toDateTime(intDiv(unix_milli, 1000)), toIntervalSecond(86400)) AS ts, JSONExtractString(labels, 'host.name') AS `host.name`, avg(value) AS per_series_value FROM signoz_meter.distributed_samples AS points WHERE metric_name IN (?) AND unix_milli >= ? AND unix_milli < ? AND JSONExtractString(labels, 'host.name') = ? AND LOWER(temporality) LIKE LOWER(?) GROUP BY fingerprint, ts, `host.name` ORDER BY fingerprint, ts), __spatial_aggregation_cte AS (SELECT ts, `host.name`, sum(per_series_value) AS value FROM __temporal_aggregation_cte WHERE isNaN(per_series_value) = ? GROUP BY ts, `host.name`) SELECT * FROM __spatial_aggregation_cte WHERE (`host.name`) IN (SELECT `host.name` FROM __spatial_aggregation_cte GROUP BY `host.name` ORDER BY avg(value) LIMIT 10) ORDER BY `host.name`, ts ASC",
 				Args:  []any{"system.memory.usage", uint64(1747872000000), uint64(1747983420000), "big-data-node-1", "unspecified", 0},
 			},
 			expectedErr: nil,

pkg/telemetrymetrics/statement_builder.go

@@ -4,6 +4,7 @@ import (
 	"context"
 	"fmt"
 	"log/slog"
+	"strings"
 
 	"github.com/SigNoz/signoz/pkg/factory"
 	"github.com/SigNoz/signoz/pkg/flagger"
@@ -607,8 +608,73 @@ func (b *MetricQueryStatementBuilder) BuildFinalSelect(
 			sb.Where(rewrittenExpr)
 		}
 	}
-	sb.OrderBy(querybuilder.GroupByKeys(query.GroupBy)...)
-	sb.OrderBy("ts")
+	groupByKeys := querybuilder.GroupByKeys(query.GroupBy)
+	hasOrder := len(query.Order) > 0
+	hasLimit := query.Limit > 0
+	hasGroupBy := len(groupByKeys) > 0
+
+	if hasOrder && hasLimit {
+		// order by with limit: add WHERE subquery to restrict to top N distinct key combinations
+		orderByKeys := querybuilder.OrderByKeys(query.Order)
+		var orderByClauses []string
+		for _, o := range query.Order {
+			orderByClauses = append(orderByClauses, fmt.Sprintf("`%s` %s", o.Key.Name, o.Direction.StringValue()))
+		}
+
+		subSb := sqlbuilder.NewSelectBuilder()
+		subSb.Select(fmt.Sprintf("DISTINCT %s", orderByKeys[0]))
+		if len(orderByKeys) > 1 {
+			subSb.SelectMore(orderByKeys[1:]...)
+		}
+		subSb.From("__spatial_aggregation_cte")
+		subSb.OrderBy(orderByClauses...)
+
+		subQ, _ := subSb.BuildWithFlavor(sqlbuilder.ClickHouse)
+		subQ = fmt.Sprintf("%s LIMIT %d", subQ, query.Limit)
+		sb.Where(fmt.Sprintf("(%s) IN (%s)", strings.Join(orderByKeys, ", "), subQ))
+
+		sb.OrderBy(orderByClauses...)
+	} else if hasOrder {
+		// order by without limit: apply order by clauses directly
+		for _, o := range query.Order {
+			key := o.Key.Name
+			if strings.Contains(key, query.Aggregations[0].MetricName) {
+				sb.OrderBy(fmt.Sprintf("avg(value) OVER (PARTITION BY %s) %s", strings.Join(groupByKeys, ", "), o.Direction.StringValue()))
+				continue
+			}
+			sb.OrderBy(fmt.Sprintf("`%s` %s", o.Key.Name, o.Direction.StringValue()))
+		}
+	} else if hasLimit && hasGroupBy {
+		// limit without order by: default ordering by avg(value)
+		subSb := sqlbuilder.NewSelectBuilder()
+		subSb.Select(groupByKeys[0])
+		if len(groupByKeys) > 1 {
+			subSb.SelectMore(groupByKeys[1:]...)
+		}
+		subSb.From("__spatial_aggregation_cte")
+		subSb.GroupBy(groupByKeys...)
+		subSb.OrderBy("avg(value)")
+
+		subQ, _ := subSb.BuildWithFlavor(sqlbuilder.ClickHouse)
+		subQ = fmt.Sprintf("%s LIMIT %d", subQ, query.Limit)
+		sb.Where(fmt.Sprintf("(%s) IN (%s)", strings.Join(groupByKeys, ", "), subQ))
+	} else if hasGroupBy {
+		// grouping without order by or limit: sort by avg(value) DESC with labels as tiebreakers
+		sb.OrderBy(fmt.Sprintf("avg(value) OVER (PARTITION BY %s) DESC", strings.Join(groupByKeys, ", ")))
+	}
+
+	// add any group-by keys not already in the order-by as tiebreakers
+	orderKeySet := make(map[string]struct{})
+	for _, o := range query.Order {
+		orderKeySet[fmt.Sprintf("`%s`", o.Key.Name)] = struct{}{}
+	}
+	for _, g := range groupByKeys {
+		if _, exists := orderKeySet[g]; !exists {
+			sb.OrderBy(g)
+		}
+	}
+
+	sb.OrderBy("ts ASC")
 	if metricType == metrictypes.HistogramType && spaceAgg == metrictypes.SpaceAggregationCount && query.Aggregations[0].ComparisonSpaceAggregationParam == nil {
 		sb.OrderBy("toFloat64(le)")
 	}

pkg/telemetrymetrics/stmt_builder_test.go

@@ -15,16 +15,17 @@ import (
 )
 
 func TestStatementBuilder(t *testing.T) {
-	cases := []struct {
-		name        string
-		requestType qbtypes.RequestType
-		query       qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]
-		expected    qbtypes.Statement
-		expectedErr error
-	}{
+	type baseQuery struct {
+		name     string
+		query    qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]
+		orderKey string
+		args     []any
+		cte      string
+	}
+
+	bases := []baseQuery{
 		{
-			name:        "test_cumulative_rate_sum",
-			requestType: qbtypes.RequestTypeTimeSeries,
+			name: "cumulative_rate_sum",
 			query: qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]{
 				Signal:       telemetrytypes.SignalMetrics,
 				StepInterval: qbtypes.Step{Duration: 30 * time.Second},
@@ -40,24 +41,16 @@ func TestStatementBuilder(t *testing.T) {
 				Filter: &qbtypes.Filter{
 					Expression: "service.name = 'cartservice'",
 				},
-				Limit: 10,
 				GroupBy: []qbtypes.GroupByKey{
-					{
-						TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
-							Name: "service.name",
-						},
-					},
+					{TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{Name: "service.name"}},
 				},
 			},
-			expected: qbtypes.Statement{
-				Query: "WITH __temporal_aggregation_cte AS (SELECT ts, `service.name`, multiIf(row_number() OVER rate_window = 1, nan, (per_series_value - lagInFrame(per_series_value, 1) OVER rate_window) < 0, per_series_value / (ts - lagInFrame(ts, 1) OVER rate_window), (per_series_value - lagInFrame(per_series_value, 1) OVER rate_window) / (ts - lagInFrame(ts, 1) OVER rate_window)) AS per_series_value FROM (SELECT fingerprint, toStartOfInterval(toDateTime(intDiv(unix_milli, 1000)), toIntervalSecond(30)) AS ts, `service.name`, max(value) AS per_series_value FROM signoz_metrics.distributed_samples_v4 AS points INNER JOIN (SELECT fingerprint, JSONExtractString(labels, 'service.name') AS `service.name` FROM signoz_metrics.time_series_v4_6hrs WHERE metric_name IN (?) AND unix_milli >= ? AND unix_milli <= ? AND LOWER(temporality) LIKE LOWER(?) AND __normalized = ? AND JSONExtractString(labels, 'service.name') = ? GROUP BY fingerprint, `service.name`) AS filtered_time_series ON points.fingerprint = filtered_time_series.fingerprint WHERE metric_name IN (?) AND unix_milli >= ? AND unix_milli < ? GROUP BY fingerprint, ts, `service.name` ORDER BY fingerprint, ts) WINDOW rate_window AS (PARTITION BY fingerprint ORDER BY fingerprint, ts)), __spatial_aggregation_cte AS (SELECT ts, `service.name`, sum(per_series_value) AS value FROM __temporal_aggregation_cte WHERE isNaN(per_series_value) = ? GROUP BY ts, `service.name`) SELECT * FROM __spatial_aggregation_cte ORDER BY `service.name`, ts",
-				Args:  []any{"signoz_calls_total", uint64(1747936800000), uint64(1747983420000), "cumulative", false, "cartservice", "signoz_calls_total", uint64(1747947360000), uint64(1747983420000), 0},
-			},
-			expectedErr: nil,
+			orderKey: "service.name",
+			args:     []any{"signoz_calls_total", uint64(1747936800000), uint64(1747983420000), "cumulative", false, "cartservice", "signoz_calls_total", uint64(1747947360000), uint64(1747983420000), 0},
+			cte:      "WITH __temporal_aggregation_cte AS (SELECT ts, `service.name`, multiIf(row_number() OVER rate_window = 1, nan, (per_series_value - lagInFrame(per_series_value, 1) OVER rate_window) < 0, per_series_value / (ts - lagInFrame(ts, 1) OVER rate_window), (per_series_value - lagInFrame(per_series_value, 1) OVER rate_window) / (ts - lagInFrame(ts, 1) OVER rate_window)) AS per_series_value FROM (SELECT fingerprint, toStartOfInterval(toDateTime(intDiv(unix_milli, 1000)), toIntervalSecond(30)) AS ts, `service.name`, max(value) AS per_series_value FROM signoz_metrics.distributed_samples_v4 AS points INNER JOIN (SELECT fingerprint, JSONExtractString(labels, 'service.name') AS `service.name` FROM signoz_metrics.time_series_v4_6hrs WHERE metric_name IN (?) AND unix_milli >= ? AND unix_milli <= ? AND LOWER(temporality) LIKE LOWER(?) AND __normalized = ? AND JSONExtractString(labels, 'service.name') = ? GROUP BY fingerprint, `service.name`) AS filtered_time_series ON points.fingerprint = filtered_time_series.fingerprint WHERE metric_name IN (?) AND unix_milli >= ? AND unix_milli < ? GROUP BY fingerprint, ts, `service.name` ORDER BY fingerprint, ts) WINDOW rate_window AS (PARTITION BY fingerprint ORDER BY fingerprint, ts)), __spatial_aggregation_cte AS (SELECT ts, `service.name`, sum(per_series_value) AS value FROM __temporal_aggregation_cte WHERE isNaN(per_series_value) = ? GROUP BY ts, `service.name`)",
 		},
 		{
-			name:        "test_cumulative_rate_sum_with_mat_column",
-			requestType: qbtypes.RequestTypeTimeSeries,
+			name: "cumulative_rate_sum_with_mat_column",
 			query: qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]{
 				Signal:       telemetrytypes.SignalMetrics,
 				StepInterval: qbtypes.Step{Duration: 30 * time.Second},
@@ -73,24 +66,16 @@ func TestStatementBuilder(t *testing.T) {
 				Filter: &qbtypes.Filter{
 					Expression: "materialized.key.name REGEXP 'cartservice' OR service.name = 'cartservice'",
 				},
-				Limit: 10,
 				GroupBy: []qbtypes.GroupByKey{
-					{
-						TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
-							Name: "service.name",
-						},
-					},
+					{TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{Name: "service.name"}},
 				},
 			},
-			expected: qbtypes.Statement{
-				Query: "WITH __temporal_aggregation_cte AS (SELECT ts, `service.name`, multiIf(row_number() OVER rate_window = 1, nan, (per_series_value - lagInFrame(per_series_value, 1) OVER rate_window) < 0, per_series_value / (ts - lagInFrame(ts, 1) OVER rate_window), (per_series_value - lagInFrame(per_series_value, 1) OVER rate_window) / (ts - lagInFrame(ts, 1) OVER rate_window)) AS per_series_value FROM (SELECT fingerprint, toStartOfInterval(toDateTime(intDiv(unix_milli, 1000)), toIntervalSecond(30)) AS ts, `service.name`, max(value) AS per_series_value FROM signoz_metrics.distributed_samples_v4 AS points INNER JOIN (SELECT fingerprint, JSONExtractString(labels, 'service.name') AS `service.name` FROM signoz_metrics.time_series_v4_6hrs WHERE metric_name IN (?) AND unix_milli >= ? AND unix_milli <= ? AND LOWER(temporality) LIKE LOWER(?) AND __normalized = ? AND (match(JSONExtractString(labels, 'materialized.key.name'), ?) OR JSONExtractString(labels, 'service.name') = ?) GROUP BY fingerprint, `service.name`) AS filtered_time_series ON points.fingerprint = filtered_time_series.fingerprint WHERE metric_name IN (?) AND unix_milli >= ? AND unix_milli < ? GROUP BY fingerprint, ts, `service.name` ORDER BY fingerprint, ts) WINDOW rate_window AS (PARTITION BY fingerprint ORDER BY fingerprint, ts)), __spatial_aggregation_cte AS (SELECT ts, `service.name`, sum(per_series_value) AS value FROM __temporal_aggregation_cte WHERE isNaN(per_series_value) = ? GROUP BY ts, `service.name`) SELECT * FROM __spatial_aggregation_cte ORDER BY `service.name`, ts",
-				Args:  []any{"signoz_calls_total", uint64(1747936800000), uint64(1747983420000), "cumulative", false, "cartservice", "cartservice", "signoz_calls_total", uint64(1747947360000), uint64(1747983420000), 0},
-			},
-			expectedErr: nil,
+			orderKey: "service.name",
+			args:     []any{"signoz_calls_total", uint64(1747936800000), uint64(1747983420000), "cumulative", false, "cartservice", "cartservice", "signoz_calls_total", uint64(1747947360000), uint64(1747983420000), 0},
+			cte:      "WITH __temporal_aggregation_cte AS (SELECT ts, `service.name`, multiIf(row_number() OVER rate_window = 1, nan, (per_series_value - lagInFrame(per_series_value, 1) OVER rate_window) < 0, per_series_value / (ts - lagInFrame(ts, 1) OVER rate_window), (per_series_value - lagInFrame(per_series_value, 1) OVER rate_window) / (ts - lagInFrame(ts, 1) OVER rate_window)) AS per_series_value FROM (SELECT fingerprint, toStartOfInterval(toDateTime(intDiv(unix_milli, 1000)), toIntervalSecond(30)) AS ts, `service.name`, max(value) AS per_series_value FROM signoz_metrics.distributed_samples_v4 AS points INNER JOIN (SELECT fingerprint, JSONExtractString(labels, 'service.name') AS `service.name` FROM signoz_metrics.time_series_v4_6hrs WHERE metric_name IN (?) AND unix_milli >= ? AND unix_milli <= ? AND LOWER(temporality) LIKE LOWER(?) AND __normalized = ? AND (match(JSONExtractString(labels, 'materialized.key.name'), ?) OR JSONExtractString(labels, 'service.name') = ?) GROUP BY fingerprint, `service.name`) AS filtered_time_series ON points.fingerprint = filtered_time_series.fingerprint WHERE metric_name IN (?) AND unix_milli >= ? AND unix_milli < ? GROUP BY fingerprint, ts, `service.name` ORDER BY fingerprint, ts) WINDOW rate_window AS (PARTITION BY fingerprint ORDER BY fingerprint, ts)), __spatial_aggregation_cte AS (SELECT ts, `service.name`, sum(per_series_value) AS value FROM __temporal_aggregation_cte WHERE isNaN(per_series_value) = ? GROUP BY ts, `service.name`)",
 		},
 		{
-			name:        "test_delta_rate_sum",
-			requestType: qbtypes.RequestTypeTimeSeries,
+			name: "delta_rate_sum",
 			query: qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]{
 				Signal:       telemetrytypes.SignalMetrics,
 				StepInterval: qbtypes.Step{Duration: 30 * time.Second},
@@ -106,24 +91,16 @@ func TestStatementBuilder(t *testing.T) {
 				Filter: &qbtypes.Filter{
 					Expression: "service.name = 'cartservice'",
 				},
-				Limit: 10,
 				GroupBy: []qbtypes.GroupByKey{
-					{
-						TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
-							Name: "service.name",
-						},
-					},
+					{TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{Name: "service.name"}},
 				},
 			},
-			expected: qbtypes.Statement{
-				Query: "WITH __spatial_aggregation_cte AS (SELECT toStartOfInterval(toDateTime(intDiv(unix_milli, 1000)), toIntervalSecond(30)) AS ts, `service.name`, sum(value)/30 AS value FROM signoz_metrics.distributed_samples_v4 AS points INNER JOIN (SELECT fingerprint, JSONExtractString(labels, 'service.name') AS `service.name` FROM signoz_metrics.time_series_v4_6hrs WHERE metric_name IN (?) AND unix_milli >= ? AND unix_milli <= ? AND LOWER(temporality) LIKE LOWER(?) AND __normalized = ? AND JSONExtractString(labels, 'service.name') = ? GROUP BY fingerprint, `service.name`) AS filtered_time_series ON points.fingerprint = filtered_time_series.fingerprint WHERE metric_name IN (?) AND unix_milli >= ? AND unix_milli < ? GROUP BY ts, `service.name`) SELECT * FROM __spatial_aggregation_cte ORDER BY `service.name`, ts",
-				Args:  []any{"signoz_calls_total", uint64(1747936800000), uint64(1747983420000), "delta", false, "cartservice", "signoz_calls_total", uint64(1747947390000), uint64(1747983420000)},
-			},
-			expectedErr: nil,
+			orderKey: "service.name",
+			args:     []any{"signoz_calls_total", uint64(1747936800000), uint64(1747983420000), "delta", false, "cartservice", "signoz_calls_total", uint64(1747947390000), uint64(1747983420000)},
+			cte:      "WITH __spatial_aggregation_cte AS (SELECT toStartOfInterval(toDateTime(intDiv(unix_milli, 1000)), toIntervalSecond(30)) AS ts, `service.name`, sum(value)/30 AS value FROM signoz_metrics.distributed_samples_v4 AS points INNER JOIN (SELECT fingerprint, JSONExtractString(labels, 'service.name') AS `service.name` FROM signoz_metrics.time_series_v4_6hrs WHERE metric_name IN (?) AND unix_milli >= ? AND unix_milli <= ? AND LOWER(temporality) LIKE LOWER(?) AND __normalized = ? AND JSONExtractString(labels, 'service.name') = ? GROUP BY fingerprint, `service.name`) AS filtered_time_series ON points.fingerprint = filtered_time_series.fingerprint WHERE metric_name IN (?) AND unix_milli >= ? AND unix_milli < ? GROUP BY ts, `service.name`)",
 		},
 		{
-			name:        "test_histogram_percentile1",
-			requestType: qbtypes.RequestTypeTimeSeries,
+			name: "histogram_percentile1",
 			query: qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]{
 				Signal:       telemetrytypes.SignalMetrics,
 				StepInterval: qbtypes.Step{Duration: 30 * time.Second},
@@ -139,24 +116,16 @@ func TestStatementBuilder(t *testing.T) {
 				Filter: &qbtypes.Filter{
 					Expression: "service.name = 'cartservice'",
 				},
-				Limit: 10,
 				GroupBy: []qbtypes.GroupByKey{
-					{
-						TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
-							Name: "service.name",
-						},
-					},
+					{TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{Name: "service.name"}},
 				},
 			},
-			expected: qbtypes.Statement{
-				Query: "WITH __spatial_aggregation_cte AS (SELECT toStartOfInterval(toDateTime(intDiv(unix_milli, 1000)), toIntervalSecond(30)) AS ts, `service.name`, `le`, sum(value)/30 AS value FROM signoz_metrics.distributed_samples_v4 AS points INNER JOIN (SELECT fingerprint, JSONExtractString(labels, 'service.name') AS `service.name`, JSONExtractString(labels, 'le') AS `le` FROM signoz_metrics.time_series_v4_6hrs WHERE metric_name IN (?) AND unix_milli >= ? AND unix_milli <= ? AND LOWER(temporality) LIKE LOWER(?) AND __normalized = ? AND JSONExtractString(labels, 'service.name') = ? GROUP BY fingerprint, `service.name`, `le`) AS filtered_time_series ON points.fingerprint = filtered_time_series.fingerprint WHERE metric_name IN (?) AND unix_milli >= ? AND unix_milli < ? GROUP BY ts, `service.name`, `le`) SELECT ts, `service.name`, histogramQuantile(arrayMap(x -> toFloat64(x), groupArray(le)), groupArray(value), 0.950) AS value FROM __spatial_aggregation_cte GROUP BY `service.name`, ts ORDER BY `service.name`, ts",
-				Args:  []any{"signoz_latency", uint64(1747936800000), uint64(1747983420000), "delta", false, "cartservice", "signoz_latency", uint64(1747947390000), uint64(1747983420000)},
-			},
-			expectedErr: nil,
+			orderKey: "service.name",
+			args:     []any{"signoz_latency", uint64(1747936800000), uint64(1747983420000), "delta", false, "cartservice", "signoz_latency", uint64(1747947390000), uint64(1747983420000)},
+			cte:      "WITH __spatial_aggregation_cte AS (SELECT toStartOfInterval(toDateTime(intDiv(unix_milli, 1000)), toIntervalSecond(30)) AS ts, `service.name`, `le`, sum(value)/30 AS value FROM signoz_metrics.distributed_samples_v4 AS points INNER JOIN (SELECT fingerprint, JSONExtractString(labels, 'service.name') AS `service.name`, JSONExtractString(labels, 'le') AS `le` FROM signoz_metrics.time_series_v4_6hrs WHERE metric_name IN (?) AND unix_milli >= ? AND unix_milli <= ? AND LOWER(temporality) LIKE LOWER(?) AND __normalized = ? AND JSONExtractString(labels, 'service.name') = ? GROUP BY fingerprint, `service.name`, `le`) AS filtered_time_series ON points.fingerprint = filtered_time_series.fingerprint WHERE metric_name IN (?) AND unix_milli >= ? AND unix_milli < ? GROUP BY ts, `service.name`, `le`)",
 		},
 		{
-			name:        "test_gauge_avg_sum",
-			requestType: qbtypes.RequestTypeTimeSeries,
+			name: "gauge_avg_sum",
 			query: qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]{
 				Signal:       telemetrytypes.SignalMetrics,
 				StepInterval: qbtypes.Step{Duration: 30 * time.Second},
@@ -172,24 +141,16 @@ func TestStatementBuilder(t *testing.T) {
 				Filter: &qbtypes.Filter{
 					Expression: "host.name = 'big-data-node-1'",
 				},
-				Limit: 10,
 				GroupBy: []qbtypes.GroupByKey{
-					{
-						TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
-							Name: "host.name",
-						},
-					},
+					{TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{Name: "host.name"}},
 				},
 			},
-			expected: qbtypes.Statement{
-				Query: "WITH __temporal_aggregation_cte AS (SELECT fingerprint, toStartOfInterval(toDateTime(intDiv(unix_milli, 1000)), toIntervalSecond(30)) AS ts, `host.name`, avg(value) AS per_series_value FROM signoz_metrics.distributed_samples_v4 AS points INNER JOIN (SELECT fingerprint, JSONExtractString(labels, 'host.name') AS `host.name` FROM signoz_metrics.time_series_v4_6hrs WHERE metric_name IN (?) AND unix_milli >= ? AND unix_milli <= ? AND LOWER(temporality) LIKE LOWER(?) AND __normalized = ? AND JSONExtractString(labels, 'host.name') = ? GROUP BY fingerprint, `host.name`) AS filtered_time_series ON points.fingerprint = filtered_time_series.fingerprint WHERE metric_name IN (?) AND unix_milli >= ? AND unix_milli < ? GROUP BY fingerprint, ts, `host.name` ORDER BY fingerprint, ts), __spatial_aggregation_cte AS (SELECT ts, `host.name`, sum(per_series_value) AS value FROM __temporal_aggregation_cte WHERE isNaN(per_series_value) = ? GROUP BY ts, `host.name`) SELECT * FROM __spatial_aggregation_cte ORDER BY `host.name`, ts",
-				Args:  []any{"system.memory.usage", uint64(1747936800000), uint64(1747983420000), "unspecified", false, "big-data-node-1", "system.memory.usage", uint64(1747947390000), uint64(1747983420000), 0},
-			},
-			expectedErr: nil,
+			orderKey: "host.name",
+			args:     []any{"system.memory.usage", uint64(1747936800000), uint64(1747983420000), "unspecified", false, "big-data-node-1", "system.memory.usage", uint64(1747947390000), uint64(1747983420000), 0},
+			cte:      "WITH __temporal_aggregation_cte AS (SELECT fingerprint, toStartOfInterval(toDateTime(intDiv(unix_milli, 1000)), toIntervalSecond(30)) AS ts, `host.name`, avg(value) AS per_series_value FROM signoz_metrics.distributed_samples_v4 AS points INNER JOIN (SELECT fingerprint, JSONExtractString(labels, 'host.name') AS `host.name` FROM signoz_metrics.time_series_v4_6hrs WHERE metric_name IN (?) AND unix_milli >= ? AND unix_milli <= ? AND LOWER(temporality) LIKE LOWER(?) AND __normalized = ? AND JSONExtractString(labels, 'host.name') = ? GROUP BY fingerprint, `host.name`) AS filtered_time_series ON points.fingerprint = filtered_time_series.fingerprint WHERE metric_name IN (?) AND unix_milli >= ? AND unix_milli < ? GROUP BY fingerprint, ts, `host.name` ORDER BY fingerprint, ts), __spatial_aggregation_cte AS (SELECT ts, `host.name`, sum(per_series_value) AS value FROM __temporal_aggregation_cte WHERE isNaN(per_series_value) = ? GROUP BY ts, `host.name`)",
 		},
 		{
-			name:        "test_histogram_percentile2",
-			requestType: qbtypes.RequestTypeTimeSeries,
+			name: "histogram_percentile2",
 			query: qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]{
 				Signal:       telemetrytypes.SignalMetrics,
 				StepInterval: qbtypes.Step{Duration: 30 * time.Second},
@@ -202,23 +163,69 @@ func TestStatementBuilder(t *testing.T) {
 						SpaceAggregation: metrictypes.SpaceAggregationPercentile95,
 					},
 				},
-				Limit: 10,
 				GroupBy: []qbtypes.GroupByKey{
-					{
-						TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
-							Name: "service.name",
-						},
-					},
+					{TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{Name: "service.name"}},
 				},
 			},
-			expected: qbtypes.Statement{
-				Query: "WITH __temporal_aggregation_cte AS (SELECT ts, `service.name`, `le`, multiIf(row_number() OVER rate_window = 1, nan, (per_series_value - lagInFrame(per_series_value, 1) OVER rate_window) < 0, per_series_value / (ts - lagInFrame(ts, 1) OVER rate_window), (per_series_value - lagInFrame(per_series_value, 1) OVER rate_window) / (ts - lagInFrame(ts, 1) OVER rate_window)) AS per_series_value FROM (SELECT fingerprint, toStartOfInterval(toDateTime(intDiv(unix_milli, 1000)), toIntervalSecond(30)) AS ts, `service.name`, `le`, max(value) AS per_series_value FROM signoz_metrics.distributed_samples_v4 AS points INNER JOIN (SELECT fingerprint, JSONExtractString(labels, 'service.name') AS `service.name`, JSONExtractString(labels, 'le') AS `le` FROM signoz_metrics.time_series_v4_6hrs WHERE metric_name IN (?) AND unix_milli >= ? AND unix_milli <= ? AND LOWER(temporality) LIKE LOWER(?) AND __normalized = ? GROUP BY fingerprint, `service.name`, `le`) AS filtered_time_series ON points.fingerprint = filtered_time_series.fingerprint WHERE metric_name IN (?) AND unix_milli >= ? AND unix_milli < ? GROUP BY fingerprint, ts, `service.name`, `le` ORDER BY fingerprint, ts) WINDOW rate_window AS (PARTITION BY fingerprint ORDER BY fingerprint, ts)), __spatial_aggregation_cte AS (SELECT ts, `service.name`, `le`, sum(per_series_value) AS value FROM __temporal_aggregation_cte WHERE isNaN(per_series_value) = ? GROUP BY ts, `service.name`, `le`) SELECT ts, `service.name`, histogramQuantile(arrayMap(x -> toFloat64(x), groupArray(le)), groupArray(value), 0.950) AS value FROM __spatial_aggregation_cte GROUP BY `service.name`, ts ORDER BY `service.name`, ts",
-				Args:  []any{"http_server_duration_bucket", uint64(1747936800000), uint64(1747983420000), "cumulative", false, "http_server_duration_bucket", uint64(1747947360000), uint64(1747983420000), 0},
-			},
-			expectedErr: nil,
+			orderKey: "service.name",
+			args:     []any{"http_server_duration_bucket", uint64(1747936800000), uint64(1747983420000), "cumulative", false, "http_server_duration_bucket", uint64(1747947360000), uint64(1747983420000), 0},
+			cte:      "WITH __temporal_aggregation_cte AS (SELECT ts, `service.name`, `le`, multiIf(row_number() OVER rate_window = 1, nan, (per_series_value - lagInFrame(per_series_value, 1) OVER rate_window) < 0, per_series_value / (ts - lagInFrame(ts, 1) OVER rate_window), (per_series_value - lagInFrame(per_series_value, 1) OVER rate_window) / (ts - lagInFrame(ts, 1) OVER rate_window)) AS per_series_value FROM (SELECT fingerprint, toStartOfInterval(toDateTime(intDiv(unix_milli, 1000)), toIntervalSecond(30)) AS ts, `service.name`, `le`, max(value) AS per_series_value FROM signoz_metrics.distributed_samples_v4 AS points INNER JOIN (SELECT fingerprint, JSONExtractString(labels, 'service.name') AS `service.name`, JSONExtractString(labels, 'le') AS `le` FROM signoz_metrics.time_series_v4_6hrs WHERE metric_name IN (?) AND unix_milli >= ? AND unix_milli <= ? AND LOWER(temporality) LIKE LOWER(?) AND __normalized = ? GROUP BY fingerprint, `service.name`, `le`) AS filtered_time_series ON points.fingerprint = filtered_time_series.fingerprint WHERE metric_name IN (?) AND unix_milli >= ? AND unix_milli < ? GROUP BY fingerprint, ts, `service.name`, `le` ORDER BY fingerprint, ts) WINDOW rate_window AS (PARTITION BY fingerprint ORDER BY fingerprint, ts)), __spatial_aggregation_cte AS (SELECT ts, `service.name`, `le`, sum(per_series_value) AS value FROM __temporal_aggregation_cte WHERE isNaN(per_series_value) = ? GROUP BY ts, `service.name`, `le`)",
 		},
 	}
 
+	type variant struct {
+		name     string
+		limit    int
+		hasOrder bool
+	}
+
+	variants := []variant{
+		{"with_limits", 10, false},
+		{"without_limits", 0, false},
+		{"with_order_by", 0, true},
+		{"with_order_by_and_limits", 10, true},
+	}
+
+	// expectedFinalSelects maps "base/variant" to the final SELECT portion after the CTE.
+	// The full expected query is: base.cte + expectedFinalSelects[name]
+	expectedFinalSelects := map[string]string{
+		// cumulative_rate_sum
+		"cumulative_rate_sum/with_limits":              " SELECT * FROM __spatial_aggregation_cte WHERE (`service.name`) IN (SELECT `service.name` FROM __spatial_aggregation_cte GROUP BY `service.name` ORDER BY avg(value) LIMIT 10) ORDER BY `service.name`, ts ASC",
+		"cumulative_rate_sum/without_limits":           " SELECT * FROM __spatial_aggregation_cte ORDER BY avg(value) OVER (PARTITION BY `service.name`) DESC, `service.name`, ts ASC",
+		"cumulative_rate_sum/with_order_by":            " SELECT * FROM __spatial_aggregation_cte ORDER BY `service.name` asc, ts ASC",
+		"cumulative_rate_sum/with_order_by_and_limits": " SELECT * FROM __spatial_aggregation_cte WHERE (`service.name`) IN (SELECT DISTINCT `service.name` FROM __spatial_aggregation_cte ORDER BY `service.name` asc LIMIT 10) ORDER BY `service.name` asc, ts ASC",
+
+		// cumulative_rate_sum_with_mat_column
+		"cumulative_rate_sum_with_mat_column/with_limits":              " SELECT * FROM __spatial_aggregation_cte WHERE (`service.name`) IN (SELECT `service.name` FROM __spatial_aggregation_cte GROUP BY `service.name` ORDER BY avg(value) LIMIT 10) ORDER BY `service.name`, ts ASC",
+		"cumulative_rate_sum_with_mat_column/without_limits":           " SELECT * FROM __spatial_aggregation_cte ORDER BY avg(value) OVER (PARTITION BY `service.name`) DESC, `service.name`, ts ASC",
+		"cumulative_rate_sum_with_mat_column/with_order_by":            " SELECT * FROM __spatial_aggregation_cte ORDER BY `service.name` asc, ts ASC",
+		"cumulative_rate_sum_with_mat_column/with_order_by_and_limits": " SELECT * FROM __spatial_aggregation_cte WHERE (`service.name`) IN (SELECT DISTINCT `service.name` FROM __spatial_aggregation_cte ORDER BY `service.name` asc LIMIT 10) ORDER BY `service.name` asc, ts ASC",
+
+		// delta_rate_sum
+		"delta_rate_sum/with_limits":              " SELECT * FROM __spatial_aggregation_cte WHERE (`service.name`) IN (SELECT `service.name` FROM __spatial_aggregation_cte GROUP BY `service.name` ORDER BY avg(value) LIMIT 10) ORDER BY `service.name`, ts ASC",
+		"delta_rate_sum/without_limits":           " SELECT * FROM __spatial_aggregation_cte ORDER BY avg(value) OVER (PARTITION BY `service.name`) DESC, `service.name`, ts ASC",
+		"delta_rate_sum/with_order_by":            " SELECT * FROM __spatial_aggregation_cte ORDER BY `service.name` asc, ts ASC",
+		"delta_rate_sum/with_order_by_and_limits": " SELECT * FROM __spatial_aggregation_cte WHERE (`service.name`) IN (SELECT DISTINCT `service.name` FROM __spatial_aggregation_cte ORDER BY `service.name` asc LIMIT 10) ORDER BY `service.name` asc, ts ASC",
+
+		// histogram_percentile1
+		"histogram_percentile1/with_limits":              " SELECT ts, `service.name`, histogramQuantile(arrayMap(x -> toFloat64(x), groupArray(le)), groupArray(value), 0.950) AS value FROM __spatial_aggregation_cte WHERE (`service.name`) IN (SELECT `service.name` FROM __spatial_aggregation_cte GROUP BY `service.name` ORDER BY avg(value) LIMIT 10) GROUP BY `service.name`, ts ORDER BY `service.name`, ts ASC",
+		"histogram_percentile1/without_limits":           " SELECT ts, `service.name`, histogramQuantile(arrayMap(x -> toFloat64(x), groupArray(le)), groupArray(value), 0.950) AS value FROM __spatial_aggregation_cte GROUP BY `service.name`, ts ORDER BY avg(value) OVER (PARTITION BY `service.name`) DESC, `service.name`, ts ASC",
+		"histogram_percentile1/with_order_by":            " SELECT ts, `service.name`, histogramQuantile(arrayMap(x -> toFloat64(x), groupArray(le)), groupArray(value), 0.950) AS value FROM __spatial_aggregation_cte GROUP BY `service.name`, ts ORDER BY `service.name` asc, ts ASC",
+		"histogram_percentile1/with_order_by_and_limits": " SELECT ts, `service.name`, histogramQuantile(arrayMap(x -> toFloat64(x), groupArray(le)), groupArray(value), 0.950) AS value FROM __spatial_aggregation_cte WHERE (`service.name`) IN (SELECT DISTINCT `service.name` FROM __spatial_aggregation_cte ORDER BY `service.name` asc LIMIT 10) GROUP BY `service.name`, ts ORDER BY `service.name` asc, ts ASC",
+
+		// gauge_avg_sum
+		"gauge_avg_sum/with_limits":              " SELECT * FROM __spatial_aggregation_cte WHERE (`host.name`) IN (SELECT `host.name` FROM __spatial_aggregation_cte GROUP BY `host.name` ORDER BY avg(value) LIMIT 10) ORDER BY `host.name`, ts ASC",
+		"gauge_avg_sum/without_limits":           " SELECT * FROM __spatial_aggregation_cte ORDER BY avg(value) OVER (PARTITION BY `host.name`) DESC, `host.name`, ts ASC",
+		"gauge_avg_sum/with_order_by":            " SELECT * FROM __spatial_aggregation_cte ORDER BY `host.name` asc, ts ASC",
+		"gauge_avg_sum/with_order_by_and_limits": " SELECT * FROM __spatial_aggregation_cte WHERE (`host.name`) IN (SELECT DISTINCT `host.name` FROM __spatial_aggregation_cte ORDER BY `host.name` asc LIMIT 10) ORDER BY `host.name` asc, ts ASC",
+
+		// histogram_percentile2
+		"histogram_percentile2/with_limits":              " SELECT ts, `service.name`, histogramQuantile(arrayMap(x -> toFloat64(x), groupArray(le)), groupArray(value), 0.950) AS value FROM __spatial_aggregation_cte WHERE (`service.name`) IN (SELECT `service.name` FROM __spatial_aggregation_cte GROUP BY `service.name` ORDER BY avg(value) LIMIT 10) GROUP BY `service.name`, ts ORDER BY `service.name`, ts ASC",
+		"histogram_percentile2/without_limits":           " SELECT ts, `service.name`, histogramQuantile(arrayMap(x -> toFloat64(x), groupArray(le)), groupArray(value), 0.950) AS value FROM __spatial_aggregation_cte GROUP BY `service.name`, ts ORDER BY avg(value) OVER (PARTITION BY `service.name`) DESC, `service.name`, ts ASC",
+		"histogram_percentile2/with_order_by":            " SELECT ts, `service.name`, histogramQuantile(arrayMap(x -> toFloat64(x), groupArray(le)), groupArray(value), 0.950) AS value FROM __spatial_aggregation_cte GROUP BY `service.name`, ts ORDER BY `service.name` asc, ts ASC",
+		"histogram_percentile2/with_order_by_and_limits": " SELECT ts, `service.name`, histogramQuantile(arrayMap(x -> toFloat64(x), groupArray(le)), groupArray(value), 0.950) AS value FROM __spatial_aggregation_cte WHERE (`service.name`) IN (SELECT DISTINCT `service.name` FROM __spatial_aggregation_cte ORDER BY `service.name` asc LIMIT 10) GROUP BY `service.name`, ts ORDER BY `service.name` asc, ts ASC",
+	}
+
 	fm := NewFieldMapper()
 	cb := NewConditionBuilder(fm)
 	mockMetadataStore := telemetrytypestest.NewMockMetadataStore()
@@ -227,15 +234,13 @@ func TestStatementBuilder(t *testing.T) {
 		t.Fatalf("failed to load field keys: %v", err)
 	}
 	mockMetadataStore.KeysMap = keys
-	// NOTE: LoadFieldKeysFromJSON doesn't set Materialized field
-	// for keys, so we have to set it manually here for testing
 	if _, ok := mockMetadataStore.KeysMap["materialized.key.name"]; ok {
 		if len(mockMetadataStore.KeysMap["materialized.key.name"]) > 0 {
 			mockMetadataStore.KeysMap["materialized.key.name"][0].Materialized = true
 		}
 	}
 
-	flagger, err := flagger.New(context.Background(), instrumentationtest.New().ToProviderSettings(), flagger.Config{}, flagger.MustNewRegistry())
+	fl, err := flagger.New(context.Background(), instrumentationtest.New().ToProviderSettings(), flagger.Config{}, flagger.MustNewRegistry())
 	if err != nil {
 		t.Fatalf("failed to create flagger: %v", err)
 	}
@@ -245,23 +250,30 @@ func TestStatementBuilder(t *testing.T) {
 		mockMetadataStore,
 		fm,
 		cb,
-		flagger,
+		fl,
 	)
 
-	for _, c := range cases {
-		t.Run(c.name, func(t *testing.T) {
+	for _, b := range bases {
+		for _, v := range variants {
+			name := b.name + "/" + v.name
+			t.Run(name, func(t *testing.T) {
+				q := b.query
+				q.Limit = v.limit
+				if v.hasOrder {
+					q.Order = []qbtypes.OrderBy{
+						{
+							Key:       qbtypes.OrderByKey{TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{Name: b.orderKey}},
+							Direction: qbtypes.OrderDirectionAsc,
+						},
+					}
+				}
 
-			q, err := statementBuilder.Build(context.Background(), 1747947419000, 1747983448000, c.requestType, c.query, nil)
+				result, err := statementBuilder.Build(context.Background(), 1747947419000, 1747983448000, qbtypes.RequestTypeTimeSeries, q, nil)
 
-			if c.expectedErr != nil {
-				require.Error(t, err)
-				require.Contains(t, err.Error(), c.expectedErr.Error())
-			} else {
 				require.NoError(t, err)
-				require.Equal(t, c.expected.Query, q.Query)
-				require.Equal(t, c.expected.Args, q.Args)
-				require.Equal(t, c.expected.Warnings, q.Warnings)
-			}
-		})
+				require.Equal(t, b.cte+expectedFinalSelects[name], result.Query)
+				require.Equal(t, b.args, result.Args)
+			})
+		}
 	}
 }

tests/integration/fixtures/clickhouse.py

@@ -75,6 +75,9 @@ def clickhouse(
                 </cluster>
             </remote_servers>
 
+            <user_defined_executable_functions_config>*function.xml</user_defined_executable_functions_config>
+            <user_scripts_path>/var/lib/clickhouse/user_scripts/</user_scripts_path>
+
             <distributed_ddl>
                 <path>/clickhouse/task_queue/ddl</path>
                 <profile>default</profile>
@@ -117,17 +120,73 @@ def clickhouse(
         </clickhouse>
         """
 
+        custom_function_config = """
+        <functions>
+            <function>
+                <type>executable</type>
+                <name>histogramQuantile</name>
+                <return_type>Float64</return_type>
+                <argument>
+                    <type>Array(Float64)</type>
+                    <name>buckets</name>
+                </argument>
+                <argument>
+                    <type>Array(Float64)</type>
+                    <name>counts</name>
+                </argument>
+                <argument>
+                    <type>Float64</type>
+                    <name>quantile</name>
+                </argument>
+                <format>CSV</format>
+                <command>./histogramQuantile</command>
+            </function>
+        </functions>
+        """
+
         tmp_dir = tmpfs("clickhouse")
         cluster_config_file_path = os.path.join(tmp_dir, "cluster.xml")
         with open(cluster_config_file_path, "w", encoding="utf-8") as f:
             f.write(cluster_config)
 
+        custom_function_file_path = os.path.join(tmp_dir, "custom-function.xml")
+        with open(custom_function_file_path, "w", encoding="utf-8") as f:
+            f.write(custom_function_config)
+
         container.with_volume_mapping(
             cluster_config_file_path, "/etc/clickhouse-server/config.d/cluster.xml"
         )
+        container.with_volume_mapping(
+            custom_function_file_path,
+            "/etc/clickhouse-server/custom-function.xml",
+        )
         container.with_network(network)
         container.start()
 
+        # Download and install the histogramQuantile binary
+        wrapped = container.get_wrapped_container()
+        exit_code, output = wrapped.exec_run(
+            [
+                "bash",
+                "-c",
+                (
+                    'version="v0.0.1" && '
+                    'node_os=$(uname -s | tr "[:upper:]" "[:lower:]") && '
+                    'node_arch=$(uname -m | sed s/aarch64/arm64/ | sed s/x86_64/amd64/) && '
+                    "cd /tmp && "
+                    'wget -O histogram-quantile.tar.gz "https://github.com/SigNoz/signoz/releases/download/histogram-quantile%2F${version}/histogram-quantile_${node_os}_${node_arch}.tar.gz" && '
+                    "tar -xzf histogram-quantile.tar.gz && "
+                    "mkdir -p /var/lib/clickhouse/user_scripts && "
+                    "mv histogram-quantile /var/lib/clickhouse/user_scripts/histogramQuantile && "
+                    "chmod +x /var/lib/clickhouse/user_scripts/histogramQuantile"
+                ),
+            ],
+        )
+        if exit_code != 0:
+            raise RuntimeError(
+                f"Failed to install histogramQuantile binary: {output.decode()}"
+            )
+
         connection = clickhouse_connect.get_client(
             user=container.username,
             password=container.password,

tests/integration/fixtures/querier.py

@@ -58,6 +58,8 @@ def build_builder_query(
     step_interval: int = DEFAULT_STEP_INTERVAL,
     group_by: Optional[List[str]] = None,
     filter_expression: Optional[str] = None,
+    order_by: Optional[List[Dict]] = None,
+    limit: Optional[int] = None,
     functions: Optional[List[Dict]] = None,
     disabled: bool = False,
 ) -> Dict:
@@ -93,6 +95,12 @@ def build_builder_query(
     if filter_expression:
         spec["filter"] = {"expression": filter_expression}
 
+    if order_by:
+        spec["order"] = order_by
+
+    if limit is not None:
+        spec["limit"] = limit
+
     if functions:
         spec["functions"] = functions
 

tests/integration/src/querier/05_metrics_rate_cumulative_counter.py

@@ -5,13 +5,16 @@ Look at the cumulative_counters_1h.jsonl file for the relevant data
 import os
 from datetime import datetime, timedelta, timezone
 from http import HTTPStatus
-from typing import Any, Callable, List
+from typing import Any, Callable, List, Optional, Union
+
+import pytest
 
 from fixtures import types
 from fixtures.auth import USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD
 from fixtures.metrics import Metrics
 from fixtures.querier import (
     build_builder_query,
+    build_order_by,
     get_all_series,
     get_series_values,
     make_query_request,
@@ -71,16 +74,61 @@ def test_rate_with_steady_values_and_reset(
         assert v["value"] >= 0, f"Rate should not be negative: {v['value']}"
 
 
+@pytest.mark.parametrize(
+    "metric_suffix,order_by,limit,expected_count,expected_endpoints",
+    [
+        (
+            "no_order",
+            None,
+            None,
+            5,
+            {"/products", "/health", "/checkout", "/orders", "/users"},
+        ),
+        (
+            "asc",
+            [build_order_by("endpoint", "asc")],
+            None,
+            5,
+            ["/checkout", "/health", "/orders", "/products", "/users"],
+        ),
+        (
+            "asc_lim3",
+            [build_order_by("endpoint", "asc")],
+            3,
+            3,
+            ["/checkout", "/health", "/orders"],
+        ),
+        (
+            "desc",
+            [build_order_by("endpoint", "desc")],
+            None,
+            5,
+            ["/users", "/products", "/orders", "/health", "/checkout"],
+        ),
+        (
+            "desc_lim3",
+            [build_order_by("endpoint", "desc")],
+            3,
+            3,
+            ["/users", "/products", "/orders"],
+        ),
+    ],
+)
 def test_rate_group_by_endpoint(
     signoz: types.SigNoz,
     create_user_admin: None,  # pylint: disable=unused-argument
     get_token: Callable[[str, str], str],
     insert_metrics: Callable[[List[Metrics]], None],
+    metric_suffix: str,
+    order_by: Optional[List],
+    limit: Optional[int],
+    expected_count: int,
+    expected_endpoints: Union[set, List[str]],
 ) -> None:
     now = datetime.now(tz=timezone.utc).replace(second=0, microsecond=0)
     start_ms = int((now - timedelta(minutes=65)).timestamp() * 1000)
     end_ms = int(now.timestamp() * 1000)
-    metric_name = "test_rate_groupby"
+    metric_name = f"test_rate_groupby_{metric_suffix}"
 
     metrics = Metrics.load_from_file(
         CUMULATIVE_COUNTERS_FILE,
@@ -97,6 +145,8 @@ def test_rate_group_by_endpoint(
         "sum",
         temporality="cumulative",
         group_by=["endpoint"],
+        order_by=order_by,
+        limit=limit,
     )
 
     response = make_query_request(signoz, token, start_ms, end_ms, [query])
@@ -105,10 +155,23 @@ def test_rate_group_by_endpoint(
     data = response.json()
     all_series = get_all_series(data, "A")
 
-    # Should have 5 different endpoints
     assert (
-        len(all_series) == 5
-    ), f"Expected 5 series for 5 endpoints, got {len(all_series)}"
+        len(all_series) == expected_count
+    ), f"Expected {expected_count} series, got {len(all_series)}"
+
+    endpoint_labels = [
+        series.get("labels", [{}])[0].get("value", "unknown")
+        for series in all_series
+    ]
+
+    if isinstance(expected_endpoints, set):
+        assert (
+            set(endpoint_labels) == expected_endpoints
+        ), f"Expected endpoints {expected_endpoints}, got {set(endpoint_labels)}"
+    else:
+        assert endpoint_labels == expected_endpoints, (
+            f"Expected endpoints {expected_endpoints}, got {endpoint_labels}"
+        )
 
     # endpoint -> values
     endpoint_values = {}
@@ -117,11 +180,6 @@ def test_rate_group_by_endpoint(
         values = sorted(series.get("values", []), key=lambda x: x["timestamp"])
         endpoint_values[endpoint] = values
 
-    expected_endpoints = {"/products", "/health", "/checkout", "/orders", "/users"}
-    assert (
-        set(endpoint_values.keys()) == expected_endpoints
-    ), f"Expected endpoints {expected_endpoints}, got {set(endpoint_values.keys())}"
-
     # at no point rate should be negative
     for endpoint, values in endpoint_values.items():
         for v in values:
@@ -131,101 +189,102 @@ def test_rate_group_by_endpoint(
 
     # /health: 60 data points (t01-t60), steady +10/min
     # rate = 10/60 = 0.167
-    health_values = endpoint_values["/health"]
-    assert (
-        len(health_values) >= 58
-    ), f"Expected >= 58 values for /health, got {len(health_values)}"
-    count_steady_health = sum(1 for v in health_values if v["value"] == 0.167)
-    assert (
-        count_steady_health >= 57
-    ), f"Expected >= 57 steady rate values (0.167) for /health, got {count_steady_health}"
-    # all /health rates should be 0.167 except possibly first/last due to boundaries
-    for v in health_values[1:-1]:
-        assert v["value"] == 0.167, f"Expected /health rate 0.167, got {v['value']}"
+    if "/health" in endpoint_values:
+        health_values = endpoint_values["/health"]
+        assert (
+            len(health_values) >= 58
+        ), f"Expected >= 58 values for /health, got {len(health_values)}"
+        count_steady_health = sum(1 for v in health_values if v["value"] == 0.167)
+        assert (
+            count_steady_health >= 57
+        ), f"Expected >= 57 steady rate values (0.167) for /health, got {count_steady_health}"
+        # all /health rates should be 0.167 except possibly first/last due to boundaries
+        for v in health_values[1:-1]:
+            assert v["value"] == 0.167, f"Expected /health rate 0.167, got {v['value']}"
 
     # /products: 51 data points with 10-minute gap (t20-t29 missing), steady +20/min
     # rate = 20/60 = 0.333, gap causes lower averaged rate at boundary
-    products_values = endpoint_values["/products"]
-    assert (
-        len(products_values) >= 49
-    ), f"Expected >= 49 values for /products, got {len(products_values)}"
-    count_steady_products = sum(1 for v in products_values if v["value"] == 0.333)
-
-    # most values should be 0.333, some boundary values differ due to 10-min gap
-    assert (
-        count_steady_products >= 46
-    ), f"Expected >= 46 steady rate values (0.333) for /products, got {count_steady_products}"
-
-    # check that non-0.333 values are due to gap averaging (should be lower)
-    gap_boundary_values = [v["value"] for v in products_values if v["value"] != 0.333]
-    for val in gap_boundary_values:
+    if "/products" in endpoint_values:
+        products_values = endpoint_values["/products"]
         assert (
-            0 < val < 0.333
-        ), f"Gap boundary values should be between 0 and 0.333, got {val}"
+            len(products_values) >= 49
+        ), f"Expected >= 49 values for /products, got {len(products_values)}"
+        count_steady_products = sum(1 for v in products_values if v["value"] == 0.333)
+        # most values should be 0.333, some boundary values differ due to 10-min gap
+        assert (
+            count_steady_products >= 46
+        ), f"Expected >= 46 steady rate values (0.333) for /products, got {count_steady_products}"
+        # check that non-0.333 values are due to gap averaging (should be lower)
+        gap_boundary_values = [v["value"] for v in products_values if v["value"] != 0.333]
+        for val in gap_boundary_values:
+            assert (
+                0 < val < 0.333
+            ), f"Gap boundary values should be between 0 and 0.333, got {val}"
 
     # /checkout: 61 data points (t00-t60), +1/min normal, +50/min spike at t40-t44
     # normal rate = 1/60 = 0.0167, spike rate = 50/60 = 0.833
-    checkout_values = endpoint_values["/checkout"]
-    assert (
-        len(checkout_values) >= 59
-    ), f"Expected >= 59 values for /checkout, got {len(checkout_values)}"
-    count_steady_checkout = sum(1 for v in checkout_values if v["value"] == 0.0167)
-    assert (
-        count_steady_checkout >= 53
-    ), f"Expected >= 53 steady rate values (0.0167) for /checkout, got {count_steady_checkout}"
-    # check that spike values exist (traffic spike +50/min at t40-t44)
-    count_spike_checkout = sum(1 for v in checkout_values if v["value"] == 0.833)
-    assert (
-        count_spike_checkout >= 4
-    ), f"Expected >= 4 spike rate values (0.833) for /checkout, got {count_spike_checkout}"
-
-    # spike values should be consecutive
-    spike_indices = [
-        i for i, v in enumerate[Any](checkout_values) if v["value"] == 0.833
-    ]
-    assert len(spike_indices) >= 4, f"Expected >= 4 spike indices, got {spike_indices}"
-    # consecutiveness
-    for i in range(1, len(spike_indices)):
+    if "/checkout" in endpoint_values:
+        checkout_values = endpoint_values["/checkout"]
         assert (
-            spike_indices[i] == spike_indices[i - 1] + 1
-        ), f"Spike indices should be consecutive, got {spike_indices}"
+            len(checkout_values) >= 59
+        ), f"Expected >= 59 values for /checkout, got {len(checkout_values)}"
+        count_steady_checkout = sum(1 for v in checkout_values if v["value"] == 0.0167)
+        assert (
+            count_steady_checkout >= 53
+        ), f"Expected >= 53 steady rate values (0.0167) for /checkout, got {count_steady_checkout}"
+        # check that spike values exist (traffic spike +50/min at t40-t44)
+        count_spike_checkout = sum(1 for v in checkout_values if v["value"] == 0.833)
+        assert (
+            count_spike_checkout >= 4
+        ), f"Expected >= 4 spike rate values (0.833) for /checkout, got {count_spike_checkout}"
+        # spike values should be consecutive
+        spike_indices = [
+            i for i, v in enumerate[Any](checkout_values) if v["value"] == 0.833
+        ]
+        assert len(spike_indices) >= 4, f"Expected >= 4 spike indices, got {spike_indices}"
+        for i in range(1, len(spike_indices)):
+            assert (
+                spike_indices[i] == spike_indices[i - 1] + 1
+            ), f"Spike indices should be consecutive, got {spike_indices}"
 
     # /orders: 60 data points (t00-t60) with gap at t30, counter reset at t31 (150->2)
     # rate = 5/60 = 0.0833
     # reset at t31 causes: rate at t30 includes gap (lower), t31 has high rate after reset
-    orders_values = endpoint_values["/orders"]
-    assert (
-        len(orders_values) >= 58
-    ), f"Expected >= 58 values for /orders, got {len(orders_values)}"
-    count_steady_orders = sum(1 for v in orders_values if v["value"] == 0.0833)
-    assert (
-        count_steady_orders >= 55
-    ), f"Expected >= 55 steady rate values (0.0833) for /orders, got {count_steady_orders}"
-    # check for counter reset effects - there should be some non-standard values
-    non_standard_orders = [v["value"] for v in orders_values if v["value"] != 0.0833]
-    assert (
-        len(non_standard_orders) >= 2
-    ), f"Expected >= 2 non-standard values due to counter reset, got {non_standard_orders}"
-    # post-reset value should be higher (new counter value / interval)
-    high_rate_orders = [v for v in non_standard_orders if v > 0.0833]
-    assert (
-        len(high_rate_orders) >= 1
-    ), f"Expected at least one high rate value after counter reset, got {non_standard_orders}"
+    if "/orders" in endpoint_values:
+        orders_values = endpoint_values["/orders"]
+        assert (
+            len(orders_values) >= 58
+        ), f"Expected >= 58 values for /orders, got {len(orders_values)}"
+        count_steady_orders = sum(1 for v in orders_values if v["value"] == 0.0833)
+        assert (
+            count_steady_orders >= 55
+        ), f"Expected >= 55 steady rate values (0.0833) for /orders, got {count_steady_orders}"
+        # check for counter reset effects - there should be some non-standard values
+        non_standard_orders = [v["value"] for v in orders_values if v["value"] != 0.0833]
+        assert (
+            len(non_standard_orders) >= 2
+        ), f"Expected >= 2 non-standard values due to counter reset, got {non_standard_orders}"
+        # post-reset value should be higher (new counter value / interval)
+        high_rate_orders = [v for v in non_standard_orders if v > 0.0833]
+        assert (
+            len(high_rate_orders) >= 1
+        ), f"Expected at least one high rate value after counter reset, got {non_standard_orders}"
 
     # /users: 56 data points (t05-t60), sparse +1 every 5 minutes
     # Rate = 1/60 = 0.0167 during increment, 0 during flat periods
-    users_values = endpoint_values["/users"]
-    assert (
-        len(users_values) >= 54
-    ), f"Expected >= 54 values for /users, got {len(users_values)}"
-    count_zero_users = sum(1 for v in users_values if v["value"] == 0)
-    # most values should be 0 (flat periods between increments)
-    assert (
-        count_zero_users >= 40
-    ), f"Expected >= 40 zero rate values for /users (sparse data), got {count_zero_users}"
-    # non-zero values should be 0.0167 (1/60 increment rate)
-    non_zero_users = [v["value"] for v in users_values if v["value"] != 0]
-    count_increment_rate = sum(1 for v in non_zero_users if v == 0.0167)
-    assert (
-        count_increment_rate >= 8
-    ), f"Expected >= 8 increment rate values (0.0167) for /users, got {count_increment_rate}"
+    if "/users" in endpoint_values:
+        users_values = endpoint_values["/users"]
+        assert (
+            len(users_values) >= 54
+        ), f"Expected >= 54 values for /users, got {len(users_values)}"
+        count_zero_users = sum(1 for v in users_values if v["value"] == 0)
+        # most values should be 0 (flat periods between increments)
+        assert (
+            count_zero_users >= 40
+        ), f"Expected >= 40 zero rate values for /users (sparse data), got {count_zero_users}"
+        # non-zero values should be 0.0167 (1/60 increment rate)
+        non_zero_users = [v["value"] for v in users_values if v["value"] != 0]
+        count_increment_rate = sum(1 for v in non_zero_users if v == 0.0167)
+        assert (
+            count_increment_rate >= 8
+        ), f"Expected >= 8 increment rate values (0.0167) for /users, got {count_increment_rate}"

tests/integration/src/querier/07_metrics_multi_temporality.py

@@ -5,7 +5,7 @@ Look at the multi_temporality_counters_1h.jsonl file for the relevant data
 import random
 from datetime import datetime, timedelta, timezone
 from http import HTTPStatus
-from typing import Callable, List
+from typing import Callable, List, Optional, Union
 
 import pytest
 
@@ -14,6 +14,7 @@ from fixtures.auth import USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD
 from fixtures.metrics import Metrics
 from fixtures.querier import (
     build_builder_query,
+    build_order_by,
     get_all_series,
     get_series_values,
     make_query_request,
@@ -91,6 +92,46 @@ def test_with_steady_values_and_reset(
         ), f"{time_aggregation} should not be negative: {v['value']}"
 
 
+@pytest.mark.parametrize(
+    "order_suffix,order_by,limit,expected_count,expected_endpoints",
+    [
+        (
+            "no_order",
+            None,
+            None,
+            5,
+            {"/products", "/health", "/checkout", "/orders", "/users"},
+        ),
+        (
+            "asc",
+            [build_order_by("endpoint", "asc")],
+            None,
+            5,
+            ["/checkout", "/health", "/orders", "/products", "/users"],
+        ),
+        (
+            "asc_lim3",
+            [build_order_by("endpoint", "asc")],
+            3,
+            3,
+            ["/checkout", "/health", "/orders"],
+        ),
+        (
+            "desc",
+            [build_order_by("endpoint", "desc")],
+            None,
+            5,
+            ["/users", "/products", "/orders", "/health", "/checkout"],
+        ),
+        (
+            "desc_lim3",
+            [build_order_by("endpoint", "desc")],
+            3,
+            3,
+            ["/users", "/products", "/orders"],
+        ),
+    ],
+)
 @pytest.mark.parametrize(
     "time_aggregation, stable_health_value, stable_products_value, stable_checkout_value, spike_checkout_value, stable_orders_value, spike_users_value",
     [
@@ -110,11 +151,16 @@ def test_group_by_endpoint(
     spike_checkout_value: float,
     stable_orders_value: float,
     spike_users_value: float,
+    order_suffix: str,
+    order_by: Optional[List],
+    limit: Optional[int],
+    expected_count: int,
+    expected_endpoints: Union[set, List[str]],
 ) -> None:
     now = datetime.now(tz=timezone.utc).replace(second=0, microsecond=0)
     start_ms = int((now - timedelta(minutes=65)).timestamp() * 1000)
     end_ms = int(now.timestamp() * 1000)
-    metric_name = f"test_{time_aggregation}_groupby"
+    metric_name = f"test_{time_aggregation}_groupby_{order_suffix}"
 
     metrics = Metrics.load_from_file(
         MULTI_TEMPORALITY_FILE,
@@ -130,6 +176,8 @@ def test_group_by_endpoint(
         time_aggregation,
         "sum",
         group_by=["endpoint"],
+        order_by=order_by,
+        limit=limit,
     )
 
     response = make_query_request(signoz, token, start_ms, end_ms, [query])
@@ -137,10 +185,23 @@ def test_group_by_endpoint(
 
     data = response.json()
     all_series = get_all_series(data, "A")
-    # Should have 5 different endpoints
     assert (
-        len(all_series) == 5
-    ), f"Expected 5 series for 5 endpoints, got {len(all_series)}"
+        len(all_series) == expected_count
+    ), f"Expected {expected_count} series, got {len(all_series)}"
+
+    endpoint_labels = [
+        series.get("labels", [{}])[0].get("value", "unknown")
+        for series in all_series
+    ]
+
+    if isinstance(expected_endpoints, set):
+        assert (
+            set(endpoint_labels) == expected_endpoints
+        ), f"Expected endpoints {expected_endpoints}, got {set(endpoint_labels)}"
+    else:
+        assert endpoint_labels == expected_endpoints, (
+            f"Expected endpoints {expected_endpoints}, got {endpoint_labels}"
+        )
 
     # endpoint -> values
     endpoint_values = {}
@@ -149,11 +210,6 @@ def test_group_by_endpoint(
         values = sorted(series.get("values", []), key=lambda x: x["timestamp"])
         endpoint_values[endpoint] = values
 
-    expected_endpoints = {"/products", "/health", "/checkout", "/orders", "/users"}
-    assert (
-        set(endpoint_values.keys()) == expected_endpoints
-    ), f"Expected endpoints {expected_endpoints}, got {set(endpoint_values.keys())}"
-
     # at no point rate should be negative
     for endpoint, values in endpoint_values.items():
         for v in values:
@@ -162,116 +218,117 @@ def test_group_by_endpoint(
             ), f"Rate for {endpoint} should not be negative: {v['value']}"
 
     # /health: 60 data points (t01-t60), steady +10/min
-    health_values = endpoint_values["/health"]
-    assert (
-        len(health_values) >= 58
-    ), f"Expected >= 58 values for /health, got {len(health_values)}"
-    count_steady_health = sum(
-        1 for v in health_values if v["value"] == stable_health_value
-    )
-    assert (
-        count_steady_health >= 57
-    ), f"Expected >= 57 steady rate values ({stable_health_value}) for /health, got {count_steady_health}"
-    # all /health rates should be state except possibly first/last due to boundaries
-    for v in health_values[1:-1]:
+    if "/health" in endpoint_values:
+        health_values = endpoint_values["/health"]
         assert (
-            v["value"] == stable_health_value
-        ), f"Expected /health rate {stable_health_value}, got {v['value']}"
+            len(health_values) >= 58
+        ), f"Expected >= 58 values for /health, got {len(health_values)}"
+        count_steady_health = sum(
+            1 for v in health_values if v["value"] == stable_health_value
+        )
+        assert (
+            count_steady_health >= 57
+        ), f"Expected >= 57 steady rate values ({stable_health_value}) for /health, got {count_steady_health}"
+        # all /health rates should be stable except possibly first/last due to boundaries
+        for v in health_values[1:-1]:
+            assert (
+                v["value"] == stable_health_value
+            ), f"Expected /health rate {stable_health_value}, got {v['value']}"
 
     # /products: 51 data points with 10-minute gap (t20-t29 missing), steady +20/min
-    products_values = endpoint_values["/products"]
-    assert (
-        len(products_values) >= 49
-    ), f"Expected >= 49 values for /products, got {len(products_values)}"
-    count_steady_products = sum(
-        1 for v in products_values if v["value"] == stable_products_value
-    )
-
-    # most values should be stable, some boundary values differ due to 10-min gap
-    assert (
-        count_steady_products >= 46
-    ), f"Expected >= 46 steady rate values ({stable_products_value}) for /products, got {count_steady_products}"
-
-    # check that non-stable values are due to gap averaging (should be lower)
-    gap_boundary_values = [
-        v["value"] for v in products_values if v["value"] != stable_products_value
-    ]
-    for val in gap_boundary_values:
+    if "/products" in endpoint_values:
+        products_values = endpoint_values["/products"]
         assert (
-            0 < val < stable_products_value
-        ), f"Gap boundary values should be between 0 and {stable_products_value}, got {val}"
+            len(products_values) >= 49
+        ), f"Expected >= 49 values for /products, got {len(products_values)}"
+        count_steady_products = sum(
+            1 for v in products_values if v["value"] == stable_products_value
+        )
+        # most values should be stable, some boundary values differ due to 10-min gap
+        assert (
+            count_steady_products >= 46
+        ), f"Expected >= 46 steady rate values ({stable_products_value}) for /products, got {count_steady_products}"
+        # check that non-stable values are due to gap averaging (should be lower)
+        gap_boundary_values = [
+            v["value"] for v in products_values if v["value"] != stable_products_value
+        ]
+        for val in gap_boundary_values:
+            assert (
+                0 < val < stable_products_value
+            ), f"Gap boundary values should be between 0 and {stable_products_value}, got {val}"
 
     # /checkout: 61 data points (t00-t60), +1/min normal, +50/min spike at t40-t44
-    checkout_values = endpoint_values["/checkout"]
-    assert (
-        len(checkout_values) >= 59
-    ), f"Expected >= 59 values for /checkout, got {len(checkout_values)}"
-    count_steady_checkout = sum(
-        1 for v in checkout_values if v["value"] == stable_checkout_value
-    )
-    assert (
-        count_steady_checkout >= 53
-    ), f"Expected >= 53 steady {time_aggregation} values ({stable_checkout_value}) for /checkout, got {count_steady_checkout}"
-    # check that spike values exist (traffic spike +50/min at t40-t44)
-    count_spike_checkout = sum(
-        1 for v in checkout_values if v["value"] == spike_checkout_value
-    )
-    assert (
-        count_spike_checkout >= 4
-    ), f"Expected >= 4 spike {time_aggregation} values ({spike_checkout_value}) for /checkout, got {count_spike_checkout}"
-
-    # spike values should be consecutive
-    spike_indices = [
-        i for i, v in enumerate(checkout_values) if v["value"] == spike_checkout_value
-    ]
-    assert len(spike_indices) >= 4, f"Expected >= 4 spike indices, got {spike_indices}"
-    # consecutiveness
-    for i in range(1, len(spike_indices)):
+    if "/checkout" in endpoint_values:
+        checkout_values = endpoint_values["/checkout"]
         assert (
-            spike_indices[i] == spike_indices[i - 1] + 1
-        ), f"Spike indices should be consecutive, got {spike_indices}"
+            len(checkout_values) >= 59
+        ), f"Expected >= 59 values for /checkout, got {len(checkout_values)}"
+        count_steady_checkout = sum(
+            1 for v in checkout_values if v["value"] == stable_checkout_value
+        )
+        assert (
+            count_steady_checkout >= 53
+        ), f"Expected >= 53 steady {time_aggregation} values ({stable_checkout_value}) for /checkout, got {count_steady_checkout}"
+        # check that spike values exist (traffic spike +50/min at t40-t44)
+        count_spike_checkout = sum(
+            1 for v in checkout_values if v["value"] == spike_checkout_value
+        )
+        assert (
+            count_spike_checkout >= 4
+        ), f"Expected >= 4 spike {time_aggregation} values ({spike_checkout_value}) for /checkout, got {count_spike_checkout}"
+        # spike values should be consecutive
+        spike_indices = [
+            i for i, v in enumerate(checkout_values) if v["value"] == spike_checkout_value
+        ]
+        assert len(spike_indices) >= 4, f"Expected >= 4 spike indices, got {spike_indices}"
+        for i in range(1, len(spike_indices)):
+            assert (
+                spike_indices[i] == spike_indices[i - 1] + 1
+            ), f"Spike indices should be consecutive, got {spike_indices}"
 
     # /orders: 60 data points (t00-t60) with gap at t30, counter reset at t31 (150->2)
     # reset at t31 causes: rate/increase at t30 includes gap (lower), t31 has high rate after reset
-    orders_values = endpoint_values["/orders"]
-    assert (
-        len(orders_values) >= 58
-    ), f"Expected >= 58 values for /orders, got {len(orders_values)}"
-    count_steady_orders = sum(
-        1 for v in orders_values if v["value"] == stable_orders_value
-    )
-    assert (
-        count_steady_orders >= 55
-    ), f"Expected >= 55 steady {time_aggregation} values ({stable_orders_value}) for /orders, got {count_steady_orders}"
-    # check for counter reset effects - there should be some non-standard values
-    non_standard_orders = [
-        v["value"] for v in orders_values if v["value"] != stable_orders_value
-    ]
-    assert (
-        len(non_standard_orders) >= 2
-    ), f"Expected >= 2 non-standard values due to counter reset, got {non_standard_orders}"
-    # post-reset value should be higher (new counter value / interval)
-    high_rate_orders = [v for v in non_standard_orders if v > stable_orders_value]
-    assert (
-        len(high_rate_orders) >= 1
-    ), f"Expected at least one high {time_aggregation} value after counter reset, got {non_standard_orders}"
+    if "/orders" in endpoint_values:
+        orders_values = endpoint_values["/orders"]
+        assert (
+            len(orders_values) >= 58
+        ), f"Expected >= 58 values for /orders, got {len(orders_values)}"
+        count_steady_orders = sum(
+            1 for v in orders_values if v["value"] == stable_orders_value
+        )
+        assert (
+            count_steady_orders >= 55
+        ), f"Expected >= 55 steady {time_aggregation} values ({stable_orders_value}) for /orders, got {count_steady_orders}"
+        # check for counter reset effects - there should be some non-standard values
+        non_standard_orders = [
+            v["value"] for v in orders_values if v["value"] != stable_orders_value
+        ]
+        assert (
+            len(non_standard_orders) >= 2
+        ), f"Expected >= 2 non-standard values due to counter reset, got {non_standard_orders}"
+        # post-reset value should be higher (new counter value / interval)
+        high_rate_orders = [v for v in non_standard_orders if v > stable_orders_value]
+        assert (
+            len(high_rate_orders) >= 1
+        ), f"Expected at least one high {time_aggregation} value after counter reset, got {non_standard_orders}"
 
     # /users: 56 data points (t05-t60), sparse +1 every 5 minutes
-    users_values = endpoint_values["/users"]
-    assert (
-        len(users_values) >= 54
-    ), f"Expected >= 54 values for /users, got {len(users_values)}"
-    count_zero_users = sum(1 for v in users_values if v["value"] == 0)
-    # most values should be 0 (flat periods between increments)
-    assert (
-        count_zero_users >= 40
-    ), f"Expected >= 40 zero {time_aggregation} values for /users (sparse data), got {count_zero_users}"
-    # non-zero values should be 0.0167 (1/60 increment rate)
-    non_zero_users = [v["value"] for v in users_values if v["value"] != 0]
-    count_increment_rate = sum(1 for v in non_zero_users if v == spike_users_value)
-    assert (
-        count_increment_rate >= 8
-    ), f"Expected >= 8 increment {time_aggregation} values ({spike_users_value}) for /users, got {count_increment_rate}"
+    if "/users" in endpoint_values:
+        users_values = endpoint_values["/users"]
+        assert (
+            len(users_values) >= 54
+        ), f"Expected >= 54 values for /users, got {len(users_values)}"
+        count_zero_users = sum(1 for v in users_values if v["value"] == 0)
+        # most values should be 0 (flat periods between increments)
+        assert (
+            count_zero_users >= 40
+        ), f"Expected >= 40 zero {time_aggregation} values for /users (sparse data), got {count_zero_users}"
+        # non-zero values should be stable increment rate
+        non_zero_users = [v["value"] for v in users_values if v["value"] != 0]
+        count_increment_rate = sum(1 for v in non_zero_users if v == spike_users_value)
+        assert (
+            count_increment_rate >= 8
+        ), f"Expected >= 8 increment {time_aggregation} values ({spike_users_value}) for /users, got {count_increment_rate}"
 
 
 @pytest.mark.parametrize(

tests/integration/src/querier/08_metrics_histogram.py

@@ -4,7 +4,7 @@ Look at the histogram_data_1h.jsonl file for the relevant data
 
 from datetime import datetime, timedelta, timezone
 from http import HTTPStatus
-from typing import Callable, List
+from typing import Callable, List, Optional, Union
 
 import pytest
 
@@ -13,6 +13,7 @@ from fixtures.auth import USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD
 from fixtures.metrics import Metrics
 from fixtures.querier import (
     build_builder_query,
+    build_order_by,
     get_all_series,
     get_series_values,
     make_query_request,
@@ -372,3 +373,335 @@ def test_histogram_count_no_param(
             values[1]["value"] == first_values[le]
         )  ## to keep parallel to the cumulative test cases, first_value refers to the value at 10:02
         assert values[-1]["value"] == last_values[le]
+
+@pytest.mark.parametrize(
+    "space_agg, zeroth_value, first_value, last_value",
+    [
+        ("p50", 500, 818.182, 550.725),
+        ("p75", 750, 3000, 826.087),
+        ("p90", 900, 6400, 991.304),
+        ("p95", 950, 8000, 4200),
+        ("p99", 990, 8000, 8000),
+    ],
+)
+def test_histogram_percentile_for_all_services(
+    signoz: types.SigNoz,
+    create_user_admin: None,  # pylint: disable=unused-argument
+    get_token: Callable[[str, str], str],
+    insert_metrics: Callable[[List[Metrics]], None],
+    space_agg: str,
+    zeroth_value: float,
+    first_value: float,
+    last_value: float,
+) -> None:
+    now = datetime.now(tz=timezone.utc).replace(second=0, microsecond=0)
+    start_ms = int((now - timedelta(minutes=65)).timestamp() * 1000)
+    end_ms = int(now.timestamp() * 1000)
+    metric_name = f"test_{space_agg}_bucket"
+
+    metrics = Metrics.load_from_file(
+        FILE,
+        base_time=now - timedelta(minutes=60),
+        metric_name_override=metric_name,
+    )
+    insert_metrics(metrics)
+
+    token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
+    query = build_builder_query(
+        "A",
+        metric_name,
+        "doesnotreallymatter",
+        space_agg,
+    )
+
+    response = make_query_request(signoz, token, start_ms, end_ms, [query])
+    assert response.status_code == HTTPStatus.OK
+
+    data = response.json()
+    result_values = sorted(get_series_values(data, "A"), key=lambda x: x["timestamp"])
+    assert len(result_values) == 60
+    assert result_values[0]["value"] == zeroth_value
+    assert result_values[1]["value"] == first_value
+    assert result_values[-1]["value"] == last_value
+
+@pytest.mark.parametrize(
+    "space_agg, first_value, last_value",
+    [
+        ("p50", 818.182, 550.725),
+        ("p75", 3000, 826.087),
+        ("p90", 6400, 991.304),
+        ("p95", 8000, 4200),
+        ("p99", 8000, 8000),
+    ],
+)
+def test_histogram_percentile_for_cumulative_service(
+    signoz: types.SigNoz,
+    create_user_admin: None,  # pylint: disable=unused-argument
+    get_token: Callable[[str, str], str],
+    insert_metrics: Callable[[List[Metrics]], None],
+    space_agg: str,
+    first_value: float,
+    last_value: float,
+) -> None:
+    now = datetime.now(tz=timezone.utc).replace(second=0, microsecond=0)
+    start_ms = int((now - timedelta(minutes=65)).timestamp() * 1000)
+    end_ms = int(now.timestamp() * 1000)
+    metric_name = f"test_{space_agg}_cumulative_bucket"
+
+    metrics = Metrics.load_from_file(
+        FILE,
+        base_time=now - timedelta(minutes=60),
+        metric_name_override=metric_name,
+    )
+    insert_metrics(metrics)
+
+    token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
+    query = build_builder_query(
+        "A",
+        metric_name,
+        "doesnotreallymatter",
+        space_agg,
+        filter_expression='service = "api"',
+    )
+
+    response = make_query_request(signoz, token, start_ms, end_ms, [query])
+    assert response.status_code == HTTPStatus.OK
+
+    data = response.json()
+    result_values = sorted(get_series_values(data, "A"), key=lambda x: x["timestamp"])
+    assert len(result_values) == 59
+    assert result_values[0]["value"] == first_value
+    assert result_values[-1]["value"] == last_value
+
+@pytest.mark.parametrize(
+    "space_agg, zeroth_value, first_value, last_value",
+    [
+        ("p50", 500, 818.182, 550.725),
+        ("p75", 750, 3000, 826.087),
+        ("p90", 900, 6400, 991.304),
+        ("p95", 950, 8000, 4200),
+        ("p99", 990, 8000, 8000),
+    ],
+)
+def test_histogram_percentile_for_delta_service(
+    signoz: types.SigNoz,
+    create_user_admin: None,  # pylint: disable=unused-argument
+    get_token: Callable[[str, str], str],
+    insert_metrics: Callable[[List[Metrics]], None],
+    space_agg: str,
+    zeroth_value: float,
+    first_value: float,
+    last_value: float,
+) -> None:
+    now = datetime.now(tz=timezone.utc).replace(second=0, microsecond=0)
+    start_ms = int((now - timedelta(minutes=65)).timestamp() * 1000)
+    end_ms = int(now.timestamp() * 1000)
+    metric_name = f"test_{space_agg}_bucket"
+
+    metrics = Metrics.load_from_file(
+        FILE,
+        base_time=now - timedelta(minutes=60),
+        metric_name_override=metric_name,
+    )
+    insert_metrics(metrics)
+
+    token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
+    query = build_builder_query(
+        "A",
+        metric_name,
+        "doesnotreallymatter",
+        space_agg,
+        filter_expression='service = "web"',
+    )
+
+    response = make_query_request(signoz, token, start_ms, end_ms, [query])
+    assert response.status_code == HTTPStatus.OK
+
+    data = response.json()
+    result_values = sorted(get_series_values(data, "A"), key=lambda x: x["timestamp"])
+    assert len(result_values) == 60
+    assert result_values[0]["value"] == zeroth_value
+    assert result_values[1]["value"] == first_value
+    assert result_values[-1]["value"] == last_value
+
+
+@pytest.mark.parametrize(
+    "order_suffix,order_by,limit,expected_count,expected_endpoints",
+    [
+        (
+            "no_order",
+            None,
+            None,
+            3,
+            {"/checkout", "/health", "/orders"},
+        ),
+        (
+            "asc",
+            [build_order_by("endpoint", "asc")],
+            None,
+            3,
+            ["/checkout", "/health", "/orders"],
+        ),
+        (
+            "asc_lim2",
+            [build_order_by("endpoint", "asc")],
+            2,
+            2,
+            ["/checkout", "/health"],
+        ),
+        (
+            "desc",
+            [build_order_by("endpoint", "desc")],
+            None,
+            3,
+            ["/orders", "/health", "/checkout"],
+        ),
+        (
+            "desc_lim2",
+            [build_order_by("endpoint", "desc")],
+            2,
+            2,
+            ["/orders", "/health"],
+        ),
+    ],
+)
+def test_histogram_group_by_endpoint(
+    signoz: types.SigNoz,
+    create_user_admin: None,  # pylint: disable=unused-argument
+    get_token: Callable[[str, str], str],
+    insert_metrics: Callable[[List[Metrics]], None],
+    order_suffix: str,
+    order_by: Optional[List],
+    limit: Optional[int],
+    expected_count: int,
+    expected_endpoints: Union[set, List[str]],
+) -> None:
+    now = datetime.now(tz=timezone.utc).replace(second=0, microsecond=0)
+    start_ms = int((now - timedelta(minutes=65)).timestamp() * 1000)
+    end_ms = int(now.timestamp() * 1000)
+    metric_name = f"test_histogram_groupby_{order_suffix}"
+
+    metrics = Metrics.load_from_file(
+        FILE,
+        base_time=now - timedelta(minutes=60),
+        metric_name_override=metric_name,
+    )
+    insert_metrics(metrics)
+
+    token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
+    query_count = build_builder_query(
+        "A",
+        metric_name,
+        "increase",
+        "count",
+        comparisonSpaceAggregationParam={"threshold": 1000, "operator": "<="},
+        group_by=["endpoint"],
+        order_by=order_by,
+        limit=limit,
+    )
+    query_p90 = build_builder_query(
+        "B",
+        metric_name,
+        "doesnotreallymatter",
+        "p90",
+        group_by=["endpoint"],
+        order_by=order_by,
+        limit=limit,
+    )
+
+    response = make_query_request(signoz, token, start_ms, end_ms, [query_count, query_p90])
+    assert response.status_code == HTTPStatus.OK
+
+    data = response.json()
+    count_all_series = get_all_series(data, "A")
+
+    assert (
+        len(count_all_series) == expected_count
+    ), f"Expected {expected_count} series, got {len(count_all_series)}"
+
+    endpoint_labels_in_count = [
+        series.get("labels", [{}])[0].get("value", "unknown")
+        for series in count_all_series
+    ]
+
+    if isinstance(expected_endpoints, set):
+        assert (
+            set(endpoint_labels_in_count) == expected_endpoints
+        ), f"Expected endpoints {expected_endpoints}, got {set(endpoint_labels_in_count)}"
+    else:
+        assert endpoint_labels_in_count == expected_endpoints, (
+            f"Expected endpoints in order {expected_endpoints}, got {endpoint_labels_in_count}"
+        )
+
+    count_values = {}
+    for series in count_all_series:
+        endpoint = series.get("labels", [{}])[0].get("value", "unknown")
+        count_values[endpoint] = sorted(
+            series.get("values", []), key=lambda x: x["timestamp"]
+        )
+
+    p90_series = get_all_series(data, "B")
+    assert (
+        len(p90_series) == expected_count
+    ), f"Expected {expected_count} p90 series, got {len(p90_series)}"
+
+    p90_endpoint_labels = [
+        series.get("labels", [{}])[0].get("value", "unknown")
+        for series in p90_series
+    ]
+
+    if isinstance(expected_endpoints, set):
+        assert (
+            set(p90_endpoint_labels) == expected_endpoints
+        ), f"Expected p90 endpoints {expected_endpoints}, got {set(p90_endpoint_labels)}"
+    else:
+        assert p90_endpoint_labels == expected_endpoints, (
+            f"Expected p90 endpoints in order {expected_endpoints}, got {p90_endpoint_labels}"
+        )
+
+    p90_values = {}
+    for series in p90_series:
+        endpoint = series.get("labels", [{}])[0].get("value", "unknown")
+        p90_values[endpoint] = sorted(
+            series.get("values", []), key=lambda x: x["timestamp"]
+        )
+
+    # values should be non-negative
+    for endpoint, values in count_values.items():
+        for v in values:
+            assert v["value"] >= 0, f"Count for {endpoint} should not be negative: {v['value']}"
+    for endpoint, values in p90_values.items():
+        for v in values:
+            assert v["value"] >= 0, f"p90 for {endpoint} should not be negative: {v['value']}"
+
+    # /health (cumulative, service=api): 59 points, increase starts at 11/min → 69/min
+    if "/health" in count_values:
+        vals = count_values["/health"]
+        assert vals[0]["value"] == 11, f"Expected /health count first=11, got {vals[0]['value']}"
+        assert vals[-1]["value"] == 69, f"Expected /health count last=69, got {vals[-1]['value']}"
+    if "/health" in p90_values:
+        vals = p90_values["/health"]
+        assert vals[0]["value"] == 6400, f"Expected /health p90 first=6400, got {vals[0]['value']}"
+        assert vals[-1]["value"] == 991.304, f"Expected /health p90 last=991.304, got {vals[-1]['value']}"
+
+    # /orders (cumulative, service=api): same distribution as /health
+    if "/orders" in count_values:
+        vals = count_values["/orders"]
+        assert vals[0]["value"] == 11, f"Expected /orders count first=11, got {vals[0]['value']}"
+        assert vals[-1]["value"] == 69, f"Expected /orders count last=69, got {vals[-1]['value']}"
+    if "/orders" in p90_values:
+        vals = p90_values["/orders"]
+        assert vals[0]["value"] == 6400, f"Expected /orders p90 first=6400, got {vals[0]['value']}"
+        assert vals[-1]["value"] == 991.304, f"Expected /orders p90 last=991.304, got {vals[-1]['value']}"
+
+    # /checkout (delta, service=web): 60 points, zeroth=12345 (raw delta), then 11/min → 69/min
+    if "/checkout" in count_values:
+        vals = count_values["/checkout"]
+        assert vals[0]["value"] == 12345, f"Expected /checkout count zeroth=12345, got {vals[0]['value']}"
+        assert vals[1]["value"] == 11, f"Expected /checkout count first=11, got {vals[1]['value']}"
+        assert vals[-1]["value"] == 69, f"Expected /checkout count last=69, got {vals[-1]['value']}"
+    if "/checkout" in p90_values:
+        vals = p90_values["/checkout"]
+        assert vals[0]["value"] == 900, f"Expected /checkout p90 zeroth=900, got {vals[0]['value']}"
+        assert vals[1]["value"] == 6400, f"Expected /checkout p90 first=6400, got {vals[1]['value']}"
+        assert vals[-1]["value"] == 991.304, f"Expected /checkout p90 last=991.304, got {vals[-1]['value']}"

tests/integration/src/querier/10_metrics_rate_delta_counter.py

@@ -5,13 +5,16 @@ Look at the delta_counters_1h.jsonl file for the relevant data
 import os
 from datetime import datetime, timedelta, timezone
 from http import HTTPStatus
-from typing import Any, Callable, List
+from typing import Any, Callable, List, Optional, Union
+
+import pytest
 
 from fixtures import types
 from fixtures.auth import USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD
 from fixtures.metrics import Metrics
 from fixtures.querier import (
     build_builder_query,
+    build_order_by,
     get_all_series,
     get_series_values,
     make_query_request,
@@ -69,16 +72,61 @@ def test_rate_with_steady_values_and_reset(
         assert v["value"] >= 0, f"Rate should not be negative: {v['value']}"
 
 
+@pytest.mark.parametrize(
+    "order_suffix,order_by,limit,expected_count,expected_endpoints",
+    [
+        (
+            "no_order",
+            None,
+            None,
+            5,
+            {"/products", "/health", "/checkout", "/orders", "/users"},
+        ),
+        (
+            "asc",
+            [build_order_by("endpoint", "asc")],
+            None,
+            5,
+            ["/checkout", "/health", "/orders", "/products", "/users"],
+        ),
+        (
+            "asc_lim3",
+            [build_order_by("endpoint", "asc")],
+            3,
+            3,
+            ["/checkout", "/health", "/orders"],
+        ),
+        (
+            "desc",
+            [build_order_by("endpoint", "desc")],
+            None,
+            5,
+            ["/users", "/products", "/orders", "/health", "/checkout"],
+        ),
+        (
+            "desc_lim3",
+            [build_order_by("endpoint", "desc")],
+            3,
+            3,
+            ["/users", "/products", "/orders"],
+        ),
+    ],
+)
 def test_rate_group_by_endpoint(
     signoz: types.SigNoz,
     create_user_admin: None,  # pylint: disable=unused-argument
     get_token: Callable[[str, str], str],
     insert_metrics: Callable[[List[Metrics]], None],
+    order_suffix: str,
+    order_by: Optional[List],
+    limit: Optional[int],
+    expected_count: int,
+    expected_endpoints: Union[set, List[str]],
 ) -> None:
     now = datetime.now(tz=timezone.utc).replace(second=0, microsecond=0)
     start_ms = int((now - timedelta(minutes=65)).timestamp() * 1000)
     end_ms = int(now.timestamp() * 1000)
-    metric_name = "test_rate_groupby"
+    metric_name = f"test_rate_groupby_{order_suffix}"
 
     metrics = Metrics.load_from_file(
         DELTA_COUNTERS_FILE,
@@ -94,6 +142,8 @@ def test_rate_group_by_endpoint(
         "rate",
         "sum",
         group_by=["endpoint"],
+        order_by=order_by,
+        limit=limit,
     )
 
     response = make_query_request(signoz, token, start_ms, end_ms, [query])
@@ -102,10 +152,23 @@ def test_rate_group_by_endpoint(
     data = response.json()
     all_series = get_all_series(data, "A")
 
-    # Should have 5 different endpoints
     assert (
-        len(all_series) == 5
-    ), f"Expected 5 series for 5 endpoints, got {len(all_series)}"
+        len(all_series) == expected_count
+    ), f"Expected {expected_count} series, got {len(all_series)}"
+
+    endpoint_labels = [
+        series.get("labels", [{}])[0].get("value", "unknown")
+        for series in all_series
+    ]
+
+    if isinstance(expected_endpoints, set):
+        assert (
+            set(endpoint_labels) == expected_endpoints
+        ), f"Expected endpoints {expected_endpoints}, got {set(endpoint_labels)}"
+    else:
+        assert endpoint_labels == expected_endpoints, (
+            f"Expected endpoints {expected_endpoints}, got {endpoint_labels}"
+        )
 
     # endpoint -> values
     endpoint_values = {}
@@ -114,11 +177,6 @@ def test_rate_group_by_endpoint(
         values = sorted(series.get("values", []), key=lambda x: x["timestamp"])
         endpoint_values[endpoint] = values
 
-    expected_endpoints = {"/products", "/health", "/checkout", "/orders", "/users"}
-    assert (
-        set(endpoint_values.keys()) == expected_endpoints
-    ), f"Expected endpoints {expected_endpoints}, got {set(endpoint_values.keys())}"
-
     # at no point rate should be negative
     for endpoint, values in endpoint_values.items():
         for v in values:
@@ -128,93 +186,95 @@ def test_rate_group_by_endpoint(
 
     # /health: 60 data points (t01-t60), steady +10/min
     # rate = 10/60 = 0.167
-    health_values = endpoint_values["/health"]
-    assert (
-        len(health_values) == 60
-    ), f"Expected 60 values for /health, got {len(health_values)}"
-    count_steady_health = sum(1 for v in health_values if v["value"] == 0.167)
-    assert (
-        count_steady_health == 60
-    ), f"Expected == 60 steady rate values (0.167) for /health, got {count_steady_health}"
-    # all /health rates should be 0.167 except possibly first/last due to boundaries
-    for v in health_values[1:-1]:
-        assert v["value"] == 0.167, f"Expected /health rate 0.167, got {v['value']}"
+    if "/health" in endpoint_values:
+        health_values = endpoint_values["/health"]
+        assert (
+            len(health_values) == 60
+        ), f"Expected 60 values for /health, got {len(health_values)}"
+        count_steady_health = sum(1 for v in health_values if v["value"] == 0.167)
+        assert (
+            count_steady_health == 60
+        ), f"Expected == 60 steady rate values (0.167) for /health, got {count_steady_health}"
+        # all /health rates should be 0.167 except possibly first/last due to boundaries
+        for v in health_values[1:-1]:
+            assert v["value"] == 0.167, f"Expected /health rate 0.167, got {v['value']}"
 
     # /products: 51 data points with 10-minute gap (t20-t29 missing), steady +20/min
     # rate = 20/60 = 0.333, gap causes lower averaged rate at boundary
-    products_values = endpoint_values["/products"]
-    assert (
-        len(products_values) == 51
-    ), f"Expected 51 values for /products, got {len(products_values)}"
-    count_steady_products = sum(1 for v in products_values if v["value"] == 0.333)
-
-    assert (
-        count_steady_products == 51
-    ), f"Expected 51 steady rate values (0.333) for /products, got {count_steady_products}"
+    if "/products" in endpoint_values:
+        products_values = endpoint_values["/products"]
+        assert (
+            len(products_values) == 51
+        ), f"Expected 51 values for /products, got {len(products_values)}"
+        count_steady_products = sum(1 for v in products_values if v["value"] == 0.333)
+        assert (
+            count_steady_products == 51
+        ), f"Expected 51 steady rate values (0.333) for /products, got {count_steady_products}"
 
     # /checkout: 61 data points (t00-t60), +1/min normal, +50/min spike at t40-t44
     # normal rate = 1/60 = 0.0167, spike rate = 50/60 = 0.833
-    checkout_values = endpoint_values["/checkout"]
-    assert (
-        len(checkout_values) == 61
-    ), f"Expected 61 values for /checkout, got {len(checkout_values)}"
-    count_steady_checkout = sum(1 for v in checkout_values if v["value"] == 0.0167)
-    assert (
-        count_steady_checkout == 56
-    ), f"Expected 56 steady rate values (0.0167) for /checkout, got {count_steady_checkout}"
-    # check that spike values exist (traffic spike +50/min at t40-t44)
-    count_spike_checkout = sum(1 for v in checkout_values if v["value"] == 0.833)
-    assert (
-        count_spike_checkout == 5
-    ), f"Expected 5 spike rate values (0.833) for /checkout, got {count_spike_checkout}"
-
-    # spike values should be consecutive
-    spike_indices = [
-        i for i, v in enumerate[Any](checkout_values) if v["value"] == 0.833
-    ]
-    assert len(spike_indices) == 5, f"Expected 5 spike indices, got {spike_indices}"
-    # consecutiveness
-    for i in range(1, len(spike_indices)):
+    if "/checkout" in endpoint_values:
+        checkout_values = endpoint_values["/checkout"]
         assert (
-            spike_indices[i] == spike_indices[i - 1] + 1
-        ), f"Spike indices should be consecutive, got {spike_indices}"
+            len(checkout_values) == 61
+        ), f"Expected 61 values for /checkout, got {len(checkout_values)}"
+        count_steady_checkout = sum(1 for v in checkout_values if v["value"] == 0.0167)
+        assert (
+            count_steady_checkout == 56
+        ), f"Expected 56 steady rate values (0.0167) for /checkout, got {count_steady_checkout}"
+        # check that spike values exist (traffic spike +50/min at t40-t44)
+        count_spike_checkout = sum(1 for v in checkout_values if v["value"] == 0.833)
+        assert (
+            count_spike_checkout == 5
+        ), f"Expected 5 spike rate values (0.833) for /checkout, got {count_spike_checkout}"
+        # spike values should be consecutive
+        spike_indices = [
+            i for i, v in enumerate[Any](checkout_values) if v["value"] == 0.833
+        ]
+        assert len(spike_indices) == 5, f"Expected 5 spike indices, got {spike_indices}"
+        for i in range(1, len(spike_indices)):
+            assert (
+                spike_indices[i] == spike_indices[i - 1] + 1
+            ), f"Spike indices should be consecutive, got {spike_indices}"
 
     # /orders: 60 data points (t00-t60) with gap at t30, counter reset at t31 (150->2)
     # rate = 5/60 = 0.0833
     # reset at t31 causes: rate at t30 includes gap (lower), t31 has high rate after reset
-    orders_values = endpoint_values["/orders"]
-    assert (
-        len(orders_values) == 60
-    ), f"Expected 59 values for /orders, got {len(orders_values)}"
-    count_steady_orders = sum(1 for v in orders_values if v["value"] == 0.0833)
-    assert (
-        count_steady_orders == 58
-    ), f"Expected 58 steady rate values (0.0833) for /orders, got {count_steady_orders}"
-    # check for counter reset effects - there should be some non-standard values
-    non_standard_orders = [v["value"] for v in orders_values if v["value"] != 0.0833]
-    assert (
-        len(non_standard_orders) == 2
-    ), f"Expected 2 non-standard values due to counter reset, got {non_standard_orders}"
-    # post-reset value should be higher (new counter value / interval)
-    high_rate_orders = [v for v in non_standard_orders if v > 0.0833]
-    assert (
-        len(high_rate_orders) == 1
-    ), f"Expected one high rate value after counter reset, got {non_standard_orders}"
+    if "/orders" in endpoint_values:
+        orders_values = endpoint_values["/orders"]
+        assert (
+            len(orders_values) == 60
+        ), f"Expected 59 values for /orders, got {len(orders_values)}"
+        count_steady_orders = sum(1 for v in orders_values if v["value"] == 0.0833)
+        assert (
+            count_steady_orders == 58
+        ), f"Expected 58 steady rate values (0.0833) for /orders, got {count_steady_orders}"
+        # check for counter reset effects - there should be some non-standard values
+        non_standard_orders = [v["value"] for v in orders_values if v["value"] != 0.0833]
+        assert (
+            len(non_standard_orders) == 2
+        ), f"Expected 2 non-standard values due to counter reset, got {non_standard_orders}"
+        # post-reset value should be higher (new counter value / interval)
+        high_rate_orders = [v for v in non_standard_orders if v > 0.0833]
+        assert (
+            len(high_rate_orders) == 1
+        ), f"Expected one high rate value after counter reset, got {non_standard_orders}"
 
     # /users: 56 data points (t05-t60), sparse +1 every 5 minutes (12 of them)
     # Rate = 1/60 = 0.0167 during increment, 0 during flat periods
-    users_values = endpoint_values["/users"]
-    assert (
-        len(users_values) == 56
-    ), f"Expected 56 values for /users, got {len(users_values)}"
-    count_zero_users = sum(1 for v in users_values if v["value"] == 0)
-    # most values should be 0 (flat periods between increments)
-    assert (
-        count_zero_users == 44
-    ), f"Expected 44 zero rate values for /users (sparse data), got {count_zero_users}"
-    # non-zero values should be 0.0167 (1/60 increment rate)
-    non_zero_users = [v["value"] for v in users_values if v["value"] != 0]
-    count_increment_rate = sum(1 for v in non_zero_users if v == 0.0167)
-    assert (
-        count_increment_rate == 12
-    ), f"Expected 12 increment rate values (0.0167) for /users, got {count_increment_rate}"
+    if "/users" in endpoint_values:
+        users_values = endpoint_values["/users"]
+        assert (
+            len(users_values) == 56
+        ), f"Expected 56 values for /users, got {len(users_values)}"
+        count_zero_users = sum(1 for v in users_values if v["value"] == 0)
+        # most values should be 0 (flat periods between increments)
+        assert (
+            count_zero_users == 44
+        ), f"Expected 44 zero rate values for /users (sparse data), got {count_zero_users}"
+        # non-zero values should be 0.0167 (1/60 increment rate)
+        non_zero_users = [v["value"] for v in users_values if v["value"] != 0]
+        count_increment_rate = sum(1 for v in non_zero_users if v == 0.0167)
+        assert (
+            count_increment_rate == 12
+        ), f"Expected 12 increment rate values (0.0167) for /users, got {count_increment_rate}"