feat: increase limit

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

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

* fix: switch to new derived attributes for ip filtering

---------

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

.github/workflows/integrationci.yaml

@@ -54,7 +54,7 @@ jobs:
           - sqlite
         clickhouse-version:
           - 25.5.6
-          - 25.10.5
+          - 25.12.5
         schema-migrator-version:
           - v0.142.0
         postgres-version:

frontend/src/components/TimelineV2/TimelineV2.tsx

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

frontend/src/components/TimelineV2/utils.ts

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

frontend/src/components/YAxisUnitSelector/__tests__/utils.test.tsx

@@ -1,4 +1,5 @@
-import { UniversalYAxisUnit } from '../types';
+import { YAxisCategoryNames } from '../constants';
+import { UniversalYAxisUnit, YAxisCategory } from '../types';
 import {
 	getUniversalNameFromMetricUnit,
 	mapMetricUnitToUniversalUnit,
@@ -41,29 +42,29 @@ describe('YAxisUnitSelector utils', () => {
 
 	describe('mergeCategories', () => {
 		it('merges categories correctly', () => {
-			const categories1 = [
+			const categories1: YAxisCategory[] = [
 				{
-					name: 'Data',
+					name: YAxisCategoryNames.Data,
 					units: [
 						{ name: 'bytes', id: UniversalYAxisUnit.BYTES },
 						{ name: 'kilobytes', id: UniversalYAxisUnit.KILOBYTES },
 					],
 				},
 			];
-			const categories2 = [
+			const categories2: YAxisCategory[] = [
 				{
-					name: 'Data',
+					name: YAxisCategoryNames.Data,
 					units: [{ name: 'bits', id: UniversalYAxisUnit.BITS }],
 				},
 				{
-					name: 'Time',
+					name: YAxisCategoryNames.Time,
 					units: [{ name: 'seconds', id: UniversalYAxisUnit.SECONDS }],
 				},
 			];
 			const mergedCategories = mergeCategories(categories1, categories2);
 			expect(mergedCategories).toEqual([
 				{
-					name: 'Data',
+					name: YAxisCategoryNames.Data,
 					units: [
 						{ name: 'bytes', id: UniversalYAxisUnit.BYTES },
 						{ name: 'kilobytes', id: UniversalYAxisUnit.KILOBYTES },
@@ -71,7 +72,7 @@ describe('YAxisUnitSelector utils', () => {
 					],
 				},
 				{
-					name: 'Time',
+					name: YAxisCategoryNames.Time,
 					units: [{ name: 'seconds', id: UniversalYAxisUnit.SECONDS }],
 				},
 			]);

frontend/src/components/YAxisUnitSelector/constants.ts

@@ -1,5 +1,36 @@
 import { UnitFamilyConfig, UniversalYAxisUnit, YAxisUnit } from './types';
 
+export enum YAxisCategoryNames {
+	Time = 'Time',
+	Data = 'Data',
+	DataRate = 'Data Rate',
+	Count = 'Count',
+	Operations = 'Operations',
+	Percentage = 'Percentage',
+	Boolean = 'Boolean',
+	None = 'None',
+	HashRate = 'Hash Rate',
+	Miscellaneous = 'Miscellaneous',
+	Acceleration = 'Acceleration',
+	Angular = 'Angular',
+	Area = 'Area',
+	Flops = 'FLOPs',
+	Concentration = 'Concentration',
+	Currency = 'Currency',
+	Datetime = 'Datetime',
+	PowerElectrical = 'Power/Electrical',
+	Flow = 'Flow',
+	Force = 'Force',
+	Mass = 'Mass',
+	Length = 'Length',
+	Pressure = 'Pressure',
+	Radiation = 'Radiation',
+	RotationSpeed = 'Rotation Speed',
+	Temperature = 'Temperature',
+	Velocity = 'Velocity',
+	Volume = 'Volume',
+}
+
 // Mapping of universal y-axis units to their AWS, UCUM, and OpenMetrics equivalents (if available)
 export const UniversalYAxisUnitMappings: Partial<
 	Record<UniversalYAxisUnit, Set<YAxisUnit> | null>

frontend/src/components/YAxisUnitSelector/data.ts

@@ -1,10 +1,11 @@
 import { Y_AXIS_UNIT_NAMES } from './constants';
+import { YAxisCategoryNames } from './constants';
 import { UniversalYAxisUnit, YAxisCategory } from './types';
 
 // Base categories for the universal y-axis units
 export const BASE_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 	{
-		name: 'Time',
+		name: YAxisCategoryNames.Time,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.SECONDS],
@@ -37,7 +38,7 @@ export const BASE_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Data',
+		name: YAxisCategoryNames.Data,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.BYTES],
@@ -154,7 +155,7 @@ export const BASE_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Data Rate',
+		name: YAxisCategoryNames.DataRate,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.BYTES_SECOND],
@@ -295,7 +296,7 @@ export const BASE_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Count',
+		name: YAxisCategoryNames.Count,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.COUNT],
@@ -312,7 +313,7 @@ export const BASE_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Operations',
+		name: YAxisCategoryNames.Operations,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.OPS_SECOND],
@@ -353,7 +354,7 @@ export const BASE_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Percentage',
+		name: YAxisCategoryNames.Percentage,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.PERCENT],
@@ -366,7 +367,7 @@ export const BASE_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Boolean',
+		name: YAxisCategoryNames.Boolean,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.TRUE_FALSE],
@@ -382,7 +383,7 @@ export const BASE_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 
 export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 	{
-		name: 'Time',
+		name: YAxisCategoryNames.Time,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.DURATION_MS],
@@ -419,7 +420,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Data Rate',
+		name: YAxisCategoryNames.DataRate,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.DATA_RATE_PACKETS_PER_SECOND],
@@ -428,7 +429,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Boolean',
+		name: YAxisCategoryNames.Boolean,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.ON_OFF],
@@ -437,7 +438,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'None',
+		name: YAxisCategoryNames.None,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.NONE],
@@ -446,7 +447,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Hash Rate',
+		name: YAxisCategoryNames.HashRate,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.HASH_RATE_HASHES_PER_SECOND],
@@ -479,7 +480,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Miscellaneous',
+		name: YAxisCategoryNames.Miscellaneous,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.MISC_STRING],
@@ -520,7 +521,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Acceleration',
+		name: YAxisCategoryNames.Acceleration,
 		units: [
 			{
 				name:
@@ -541,7 +542,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Angular',
+		name: YAxisCategoryNames.Angular,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.ANGULAR_DEGREE],
@@ -566,7 +567,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Area',
+		name: YAxisCategoryNames.Area,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.AREA_SQUARE_METERS],
@@ -583,7 +584,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'FLOPs',
+		name: YAxisCategoryNames.Flops,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.FLOPS_FLOPS],
@@ -620,7 +621,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Concentration',
+		name: YAxisCategoryNames.Concentration,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.CONCENTRATION_PPM],
@@ -677,7 +678,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Currency',
+		name: YAxisCategoryNames.Currency,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.CURRENCY_USD],
@@ -774,7 +775,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Datetime',
+		name: YAxisCategoryNames.Datetime,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.DATETIME_ISO],
@@ -811,7 +812,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Power/Electrical',
+		name: YAxisCategoryNames.PowerElectrical,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.POWER_WATT],
@@ -968,7 +969,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Flow',
+		name: YAxisCategoryNames.Flow,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.FLOW_GALLONS_PER_MINUTE],
@@ -1005,7 +1006,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Force',
+		name: YAxisCategoryNames.Force,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.FORCE_NEWTON_METERS],
@@ -1026,7 +1027,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Mass',
+		name: YAxisCategoryNames.Mass,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.MASS_MILLIGRAM],
@@ -1051,7 +1052,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Length',
+		name: YAxisCategoryNames.Length,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.LENGTH_MILLIMETER],
@@ -1080,7 +1081,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Pressure',
+		name: YAxisCategoryNames.Pressure,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.PRESSURE_MILLIBAR],
@@ -1117,7 +1118,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Radiation',
+		name: YAxisCategoryNames.Radiation,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.RADIATION_BECQUEREL],
@@ -1174,7 +1175,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Rotation Speed',
+		name: YAxisCategoryNames.RotationSpeed,
 		units: [
 			{
 				name:
@@ -1200,7 +1201,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Temperature',
+		name: YAxisCategoryNames.Temperature,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.TEMPERATURE_CELSIUS],
@@ -1217,7 +1218,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Velocity',
+		name: YAxisCategoryNames.Velocity,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.VELOCITY_METERS_PER_SECOND],
@@ -1238,7 +1239,7 @@ export const ADDITIONAL_Y_AXIS_CATEGORIES: YAxisCategory[] = [
 		],
 	},
 	{
-		name: 'Volume',
+		name: YAxisCategoryNames.Volume,
 		units: [
 			{
 				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.VOLUME_MILLILITER],

frontend/src/components/YAxisUnitSelector/types.ts

@@ -1,3 +1,5 @@
+import { YAxisCategoryNames } from './constants';
+
 export interface YAxisUnitSelectorProps {
 	value: string | undefined;
 	onChange: (value: UniversalYAxisUnit) => void;
@@ -669,7 +671,7 @@ export interface UnitFamilyConfig {
 }
 
 export interface YAxisCategory {
-	name: string;
+	name: YAxisCategoryNames;
 	units: {
 		name: string;
 		id: UniversalYAxisUnit;

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -172,23 +172,51 @@ function ExplorerOptions({
 	const { user } = useAppContext();
 
 	const handleConditionalQueryModification = useCallback(
+		// eslint-disable-next-line sonarjs/cognitive-complexity
 		(defaultQuery: Query | null): string => {
 			const queryToUse = defaultQuery || query;
+			if (!queryToUse) {
+				throw new Error('No query provided');
+			}
 			if (
 				queryToUse?.builder?.queryData?.[0]?.aggregateOperator !==
-				StringOperators.NOOP
+					StringOperators.NOOP &&
+				sourcepage !== DataSource.LOGS
 			) {
 				return JSON.stringify(queryToUse);
 			}
 
-			// Modify aggregateOperator to count, as noop is not supported in alerts
+			// Convert NOOP to COUNT for alerts and strip orderBy for logs
 			const modifiedQuery = cloneDeep(queryToUse);
+			if (modifiedQuery && modifiedQuery.builder?.queryData) {
+				modifiedQuery.builder.queryData = modifiedQuery.builder.queryData.map(
+					(item) => {
+						const updatedItem = { ...item };
 
-			modifiedQuery.builder.queryData[0].aggregateOperator = StringOperators.COUNT;
+						if (updatedItem.aggregateOperator === StringOperators.NOOP) {
+							updatedItem.aggregateOperator = StringOperators.COUNT;
+						}
 
-			return JSON.stringify(modifiedQuery);
+						// Alerts do not support order by on logs explorer queries
+						if (sourcepage === DataSource.LOGS && panelType === PANEL_TYPES.LIST) {
+							updatedItem.orderBy = [];
+						}
+
+						return updatedItem;
+					},
+				);
+			}
+
+			try {
+				return JSON.stringify(modifiedQuery);
+			} catch (err) {
+				throw new Error(
+					'Failed to stringify modified query: ' +
+						(err instanceof Error ? err.message : String(err)),
+				);
+			}
 		},
-		[query],
+		[panelType, query, sourcepage],
 	);
 
 	const onCreateAlertsHandler = useCallback(
@@ -757,9 +785,9 @@ function ExplorerOptions({
 		);
 	}, [
 		disabled,
+		query,
 		isOneChartPerQuery,
 		onCreateAlertsHandler,
-		query,
 		splitedQueries,
 	]);
 

frontend/src/container/ExplorerOptions/__tests__/ExplorerOptionWrapper.test.tsx

@@ -1,3 +1,4 @@
+import { useHistory } from 'react-router-dom';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { MOCK_QUERY } from 'container/QueryTable/Drilldown/__tests__/mockTableData';
 import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
@@ -15,6 +16,11 @@ import { getExplorerToolBarVisibility } from '../utils';
 // Mock dependencies
 jest.mock('hooks/dashboard/useUpdateDashboard');
 
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useHistory: jest.fn(),
+}));
+
 jest.mock('../utils', () => ({
 	getExplorerToolBarVisibility: jest.fn(),
 	generateRGBAFromHex: jest.fn(() => 'rgba(0, 0, 0, 0.08)'),
@@ -29,6 +35,7 @@ const mockGetExplorerToolBarVisibility = jest.mocked(
 );
 
 const mockUseUpdateDashboard = jest.mocked(useUpdateDashboard);
+const mockUseHistory = jest.mocked(useHistory);
 
 // Mock data
 const TEST_QUERY_ID = 'test-query-id';
@@ -103,7 +110,6 @@ describe('ExplorerOptionWrapper', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
 		mockGetExplorerToolBarVisibility.mockReturnValue(true);
-
 		// Mock useUpdateDashboard to return a mutation object
 		mockUseUpdateDashboard.mockReturnValue(({
 			mutate: jest.fn(),
@@ -117,6 +123,28 @@ describe('ExplorerOptionWrapper', () => {
 		} as unknown) as ReturnType<typeof useUpdateDashboard>);
 	});
 
+	it('should navigate to alert creation page when "Create an Alert" is clicked in logs-explorer', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		const mockPush = jest.fn();
+		mockUseHistory.mockReturnValue(({
+			push: mockPush,
+		} as unknown) as ReturnType<typeof useHistory>);
+
+		renderExplorerOptionWrapper({ sourcepage: DataSource.LOGS });
+
+		const createAlertButton = screen.getByRole('button', {
+			name: 'Create an Alert',
+		});
+		await user.click(createAlertButton);
+
+		expect(mockPush).toHaveBeenCalledTimes(1);
+		const calledWith = mockPush.mock.calls[0][0] as string;
+		const [path, search = ''] = calledWith.split('?');
+		expect(path).toBe('/alerts/new');
+		const params = new URLSearchParams(search);
+		expect(params.has('compositeQuery')).toBe(true);
+	});
+
 	describe('onExport functionality', () => {
 		it('should call onExport when New Dashboard button is clicked in export modal', async () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });

frontend/src/container/NewWidget/RightContainer/Threshold/__tests__/Threshold.test.tsx

@@ -18,8 +18,8 @@ jest.mock('lib/query/createTableColumnsFromQuery', () => ({
 jest.mock('container/NewWidget/utils', () => ({
 	unitOptions: jest.fn(() => [
 		{ value: 'none', label: 'None' },
-		{ value: 'percent', label: 'Percent' },
-		{ value: 'ms', label: 'Milliseconds' },
+		{ value: '%', label: 'Percent (0 - 100)' },
+		{ value: 'ms', label: 'Milliseconds (ms)' },
 	]),
 }));
 
@@ -39,7 +39,7 @@ const defaultProps = {
 	],
 	thresholdTableOptions: 'cpu_usage',
 	columnUnits: { cpu_usage: 'percent', memory_usage: 'bytes' },
-	yAxisUnit: 'percent',
+	yAxisUnit: '%',
 	moveThreshold: jest.fn(),
 };
 

frontend/src/container/NewWidget/RightContainer/YAxisUnitSelector.tsx

@@ -1,99 +0,0 @@
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
-import { AutoComplete, Input, Typography } from 'antd';
-import { find } from 'lodash-es';
-
-import { flattenedCategories } from './dataFormatCategories';
-
-const findCategoryById = (
-	searchValue: string,
-): Record<string, string> | undefined =>
-	find(flattenedCategories, (option) => option.id === searchValue);
-const findCategoryByName = (
-	searchValue: string,
-): Record<string, string> | undefined =>
-	find(flattenedCategories, (option) => option.name === searchValue);
-
-type OnSelectType = Dispatch<SetStateAction<string>> | ((val: string) => void);
-
-/**
- * @deprecated Use DashboardYAxisUnitSelectorWrapper instead.
- */
-function YAxisUnitSelector({
-	value,
-	onSelect,
-	fieldLabel,
-	handleClear,
-}: {
-	value: string;
-	onSelect: OnSelectType;
-	fieldLabel: string;
-	handleClear?: () => void;
-}): JSX.Element {
-	const [inputValue, setInputValue] = useState('');
-
-	// Sync input value with the actual value prop
-	useEffect(() => {
-		const category = findCategoryById(value);
-		setInputValue(category?.name || '');
-	}, [value]);
-
-	const onSelectHandler = (selectedValue: string): void => {
-		const category = findCategoryByName(selectedValue);
-		if (category) {
-			onSelect(category.id);
-			setInputValue(selectedValue);
-		}
-	};
-
-	const onChangeHandler = (inputValue: string): void => {
-		setInputValue(inputValue);
-		// Clear the yAxisUnit if input is empty or doesn't match any option
-		if (!inputValue) {
-			onSelect('');
-		}
-	};
-
-	const onClearHandler = (): void => {
-		setInputValue('');
-		onSelect('');
-		if (handleClear) {
-			handleClear();
-		}
-	};
-
-	const options = flattenedCategories.map((options) => ({
-		value: options.name,
-	}));
-
-	return (
-		<div className="y-axis-unit-selector">
-			<Typography.Text className="heading">{fieldLabel}</Typography.Text>
-			<AutoComplete
-				style={{ width: '100%' }}
-				rootClassName="y-axis-root-popover"
-				options={options}
-				allowClear
-				value={inputValue}
-				onChange={onChangeHandler}
-				onClear={onClearHandler}
-				onSelect={onSelectHandler}
-				filterOption={(inputValue, option): boolean => {
-					if (option) {
-						return (
-							option.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
-						);
-					}
-					return false;
-				}}
-			>
-				<Input placeholder="Unit" rootClassName="input" />
-			</AutoComplete>
-		</div>
-	);
-}
-
-export default YAxisUnitSelector;
-
-YAxisUnitSelector.defaultProps = {
-	handleClear: (): void => {},
-};

frontend/src/container/NewWidget/RightContainer/__tests__/YAxisUnitSelector.test.tsx

@@ -1,240 +0,0 @@
-/* eslint-disable sonarjs/no-duplicate-string */
-import { act } from 'react-dom/test-utils';
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import YAxisUnitSelector from '../YAxisUnitSelector';
-
-// Mock the dataFormatCategories to have predictable test data
-jest.mock('../dataFormatCategories', () => ({
-	flattenedCategories: [
-		{ id: 'seconds', name: 'seconds (s)' },
-		{ id: 'milliseconds', name: 'milliseconds (ms)' },
-		{ id: 'hours', name: 'hours (h)' },
-		{ id: 'minutes', name: 'minutes (m)' },
-	],
-}));
-
-const MOCK_SECONDS = 'seconds';
-const MOCK_MILLISECONDS = 'milliseconds';
-
-describe('YAxisUnitSelector', () => {
-	const defaultProps = {
-		value: MOCK_SECONDS,
-		onSelect: jest.fn(),
-		fieldLabel: 'Y Axis Unit',
-		handleClear: jest.fn(),
-	};
-
-	let user: ReturnType<typeof userEvent.setup>;
-
-	beforeEach(() => {
-		jest.clearAllMocks();
-		user = userEvent.setup();
-	});
-
-	afterEach(() => {
-		jest.restoreAllMocks();
-	});
-
-	describe('Rendering (Read) & (write)', () => {
-		it('renders with correct field label', () => {
-			render(
-				<YAxisUnitSelector
-					value={defaultProps.value}
-					onSelect={defaultProps.onSelect}
-					fieldLabel={defaultProps.fieldLabel}
-					handleClear={defaultProps.handleClear}
-				/>,
-			);
-			expect(screen.getByText('Y Axis Unit')).toBeInTheDocument();
-			const input = screen.getByRole('combobox');
-
-			expect(input).toHaveValue('seconds (s)');
-		});
-
-		it('renders with custom field label', () => {
-			render(
-				<YAxisUnitSelector
-					value={defaultProps.value}
-					onSelect={defaultProps.onSelect}
-					fieldLabel="Custom Unit Label"
-					handleClear={defaultProps.handleClear}
-				/>,
-			);
-			expect(screen.getByText('Custom Unit Label')).toBeInTheDocument();
-		});
-
-		it('displays empty input when value prop is empty', () => {
-			render(
-				<YAxisUnitSelector
-					value=""
-					onSelect={defaultProps.onSelect}
-					fieldLabel={defaultProps.fieldLabel}
-					handleClear={defaultProps.handleClear}
-				/>,
-			);
-			expect(screen.getByDisplayValue('')).toBeInTheDocument();
-		});
-
-		it('shows placeholder text', () => {
-			render(
-				<YAxisUnitSelector
-					value={defaultProps.value}
-					onSelect={defaultProps.onSelect}
-					fieldLabel={defaultProps.fieldLabel}
-					handleClear={defaultProps.handleClear}
-				/>,
-			);
-			expect(screen.getByPlaceholderText('Unit')).toBeInTheDocument();
-		});
-
-		it('handles numeric input', async () => {
-			render(
-				<YAxisUnitSelector
-					value={defaultProps.value}
-					onSelect={defaultProps.onSelect}
-					fieldLabel={defaultProps.fieldLabel}
-					handleClear={defaultProps.handleClear}
-				/>,
-			);
-			const input = screen.getByRole('combobox');
-
-			await user.clear(input);
-			await user.type(input, '12345');
-			expect(input).toHaveValue('12345');
-		});
-
-		it('handles mixed content input', async () => {
-			render(
-				<YAxisUnitSelector
-					value={defaultProps.value}
-					onSelect={defaultProps.onSelect}
-					fieldLabel={defaultProps.fieldLabel}
-					handleClear={defaultProps.handleClear}
-				/>,
-			);
-			const input = screen.getByRole('combobox');
-
-			await user.clear(input);
-			await user.type(input, 'Test123!@#');
-			expect(input).toHaveValue('Test123!@#');
-		});
-	});
-
-	describe('State Management', () => {
-		it('syncs input value with value prop changes', async () => {
-			const { rerender } = render(
-				<YAxisUnitSelector
-					value={defaultProps.value}
-					onSelect={defaultProps.onSelect}
-					fieldLabel={defaultProps.fieldLabel}
-					handleClear={defaultProps.handleClear}
-				/>,
-			);
-			const input = screen.getByRole('combobox');
-
-			// Initial value
-			expect(input).toHaveValue('seconds (s)');
-
-			// Change value prop
-			rerender(
-				<YAxisUnitSelector
-					value={MOCK_MILLISECONDS}
-					onSelect={defaultProps.onSelect}
-					fieldLabel={defaultProps.fieldLabel}
-					handleClear={defaultProps.handleClear}
-				/>,
-			);
-
-			await waitFor(() => {
-				expect(input).toHaveValue('milliseconds (ms)');
-			});
-		});
-
-		it('handles empty value prop correctly', async () => {
-			const { rerender } = render(
-				<YAxisUnitSelector
-					value={defaultProps.value}
-					onSelect={defaultProps.onSelect}
-					fieldLabel={defaultProps.fieldLabel}
-					handleClear={defaultProps.handleClear}
-				/>,
-			);
-			const input = screen.getByRole('combobox');
-
-			// Change to empty value
-			rerender(
-				<YAxisUnitSelector
-					value=""
-					onSelect={defaultProps.onSelect}
-					fieldLabel={defaultProps.fieldLabel}
-					handleClear={defaultProps.handleClear}
-				/>,
-			);
-
-			await waitFor(() => {
-				expect(input).toHaveValue('');
-			});
-		});
-
-		it('handles invalid value prop gracefully', async () => {
-			const { rerender } = render(
-				<YAxisUnitSelector
-					value={defaultProps.value}
-					onSelect={defaultProps.onSelect}
-					fieldLabel={defaultProps.fieldLabel}
-					handleClear={defaultProps.handleClear}
-				/>,
-			);
-			const input = screen.getByRole('combobox');
-
-			// Change to invalid value
-			rerender(
-				<YAxisUnitSelector
-					value="invalid_id"
-					onSelect={defaultProps.onSelect}
-					fieldLabel={defaultProps.fieldLabel}
-					handleClear={defaultProps.handleClear}
-				/>,
-			);
-
-			await waitFor(() => {
-				expect(input).toHaveValue('');
-			});
-		});
-
-		it('maintains local state during typing', async () => {
-			render(
-				<YAxisUnitSelector
-					value={defaultProps.value}
-					onSelect={defaultProps.onSelect}
-					fieldLabel={defaultProps.fieldLabel}
-					handleClear={defaultProps.handleClear}
-				/>,
-			);
-			const input = screen.getByRole('combobox');
-
-			// first clear then type
-			await user.clear(input);
-			await user.type(input, 'test');
-			expect(input).toHaveValue('test');
-
-			// Value prop change should not override local typing
-			await act(async () => {
-				// Simulate prop change
-				render(
-					<YAxisUnitSelector
-						value="bytes"
-						onSelect={defaultProps.onSelect}
-						fieldLabel={defaultProps.fieldLabel}
-						handleClear={defaultProps.handleClear}
-					/>,
-				);
-			});
-
-			// Local typing should be preserved
-			expect(input).toHaveValue('test');
-		});
-	});
-});

frontend/src/container/NewWidget/RightContainer/dataFormatCategories.ts

@@ -1,613 +1,53 @@
-import { flattenDeep } from 'lodash-es';
-
 import {
-	AccelerationFormats,
-	AngularFormats,
-	AreaFormats,
-	BooleanFormats,
-	CategoryNames,
-	ConcentrationFormats,
-	CurrencyFormats,
-	DataFormats,
-	DataRateFormats,
-	DataTypeCategories,
-	DatetimeFormats,
-	FlopsFormats,
-	FlowFormats,
-	ForceFormats,
-	HashRateFormats,
-	LengthFormats,
-	MassFormats,
-	MiscellaneousFormats,
-	PowerElectricalFormats,
-	PressureFormats,
-	RadiationFormats,
-	RotationSpeedFormats,
-	TemperatureFormats,
-	ThroughputFormats,
-	TimeFormats,
-	VelocityFormats,
-	VolumeFormats,
-} from './types';
+	UniversalUnitToGrafanaUnit,
+	YAxisCategoryNames,
+} from 'components/YAxisUnitSelector/constants';
+import { YAxisSource } from 'components/YAxisUnitSelector/types';
+import { getYAxisCategories } from 'components/YAxisUnitSelector/utils';
+import { convertValue } from 'lib/getConvertedValue';
 
-export const dataTypeCategories: DataTypeCategories = [
-	{
-		name: CategoryNames.Time,
-		formats: [
-			{ name: 'Hertz (1/s)', id: TimeFormats.Hertz },
-			{ name: 'nanoseconds (ns)', id: TimeFormats.Nanoseconds },
-			{ name: 'microseconds (µs)', id: TimeFormats.Microseconds },
-			{ name: 'milliseconds (ms)', id: TimeFormats.Milliseconds },
-			{ name: 'seconds (s)', id: TimeFormats.Seconds },
-			{ name: 'minutes (m)', id: TimeFormats.Minutes },
-			{ name: 'hours (h)', id: TimeFormats.Hours },
-			{ name: 'days (d)', id: TimeFormats.Days },
-			{ name: 'duration in ms (dtdurationms)', id: TimeFormats.DurationMs },
-			{ name: 'duration in s (dtdurations)', id: TimeFormats.DurationS },
-			{ name: 'duration in h:m:s (dthms)', id: TimeFormats.DurationHms },
-			{ name: 'duration in d:h:m:s (dtdhms)', id: TimeFormats.DurationDhms },
-			{ name: 'timeticks (timeticks)', id: TimeFormats.Timeticks },
-			{ name: 'clock in ms (clockms)', id: TimeFormats.ClockMs },
-			{ name: 'clock in s (clocks)', id: TimeFormats.ClockS },
-		],
-	},
-	{
-		name: CategoryNames.Throughput,
-		formats: [
-			{ name: 'counts/sec (cps)', id: ThroughputFormats.CountsPerSec },
-			{ name: 'ops/sec (ops)', id: ThroughputFormats.OpsPerSec },
-			{ name: 'requests/sec (reqps)', id: ThroughputFormats.RequestsPerSec },
-			{ name: 'reads/sec (rps)', id: ThroughputFormats.ReadsPerSec },
-			{ name: 'writes/sec (wps)', id: ThroughputFormats.WritesPerSec },
-			{ name: 'I/O operations/sec (iops)', id: ThroughputFormats.IOOpsPerSec },
-			{ name: 'counts/min (cpm)', id: ThroughputFormats.CountsPerMin },
-			{ name: 'ops/min (opm)', id: ThroughputFormats.OpsPerMin },
-			{ name: 'reads/min (rpm)', id: ThroughputFormats.ReadsPerMin },
-			{ name: 'writes/min (wpm)', id: ThroughputFormats.WritesPerMin },
-		],
-	},
-	{
-		name: CategoryNames.Data,
-		formats: [
-			{ name: 'bytes(IEC)', id: DataFormats.BytesIEC },
-			{ name: 'bytes(SI)', id: DataFormats.BytesSI },
-			{ name: 'bits(IEC)', id: DataFormats.BitsIEC },
-			{ name: 'bits(SI)', id: DataFormats.BitsSI },
-			{ name: 'kibibytes', id: DataFormats.KibiBytes },
-			{ name: 'kilobytes', id: DataFormats.KiloBytes },
-			{ name: 'mebibytes', id: DataFormats.MebiBytes },
-			{ name: 'megabytes', id: DataFormats.MegaBytes },
-			{ name: 'gibibytes', id: DataFormats.GibiBytes },
-			{ name: 'gigabytes', id: DataFormats.GigaBytes },
-			{ name: 'tebibytes', id: DataFormats.TebiBytes },
-			{ name: 'terabytes', id: DataFormats.TeraBytes },
-			{ name: 'pebibytes', id: DataFormats.PebiBytes },
-			{ name: 'petabytes', id: DataFormats.PetaBytes },
-		],
-	},
-	{
-		name: CategoryNames.DataRate,
-		formats: [
-			{ name: 'packets/sec', id: DataRateFormats.PacketsPerSec },
-			{ name: 'bytes/sec(IEC)', id: DataRateFormats.BytesPerSecIEC },
-			{ name: 'bytes/sec(SI)', id: DataRateFormats.BytesPerSecSI },
-			{ name: 'bits/sec(IEC)', id: DataRateFormats.BitsPerSecIEC },
-			{ name: 'bits/sec(SI)', id: DataRateFormats.BitsPerSecSI },
-			{ name: 'kibibytes/sec', id: DataRateFormats.KibiBytesPerSec },
-			{ name: 'kibibits/sec', id: DataRateFormats.KibiBitsPerSec },
-			{ name: 'kilobytes/sec', id: DataRateFormats.KiloBytesPerSec },
-			{ name: 'kilobits/sec', id: DataRateFormats.KiloBitsPerSec },
-			{ name: 'mebibytes/sec', id: DataRateFormats.MebiBytesPerSec },
-			{ name: 'mebibits/sec', id: DataRateFormats.MebiBitsPerSec },
-			{ name: 'megabytes/sec', id: DataRateFormats.MegaBytesPerSec },
-			{ name: 'megabits/sec', id: DataRateFormats.MegaBitsPerSec },
-			{ name: 'gibibytes/sec', id: DataRateFormats.GibiBytesPerSec },
-			{ name: 'gibibits/sec', id: DataRateFormats.GibiBitsPerSec },
-			{ name: 'gigabytes/sec', id: DataRateFormats.GigaBytesPerSec },
-			{ name: 'gigabits/sec', id: DataRateFormats.GigaBitsPerSec },
-			{ name: 'tebibytes/sec', id: DataRateFormats.TebiBytesPerSec },
-			{ name: 'tebibits/sec', id: DataRateFormats.TebiBitsPerSec },
-			{ name: 'terabytes/sec', id: DataRateFormats.TeraBytesPerSec },
-			{ name: 'terabits/sec', id: DataRateFormats.TeraBitsPerSec },
-			{ name: 'pebibytes/sec', id: DataRateFormats.PebiBytesPerSec },
-			{ name: 'pebibits/sec', id: DataRateFormats.PebiBitsPerSec },
-			{ name: 'petabytes/sec', id: DataRateFormats.PetaBytesPerSec },
-			{ name: 'petabits/sec', id: DataRateFormats.PetaBitsPerSec },
-		],
-	},
-	{
-		name: CategoryNames.HashRate,
-		formats: [
-			{ name: 'hashes/sec', id: HashRateFormats.HashesPerSec },
-			{ name: 'kilohashes/sec', id: HashRateFormats.KiloHashesPerSec },
-			{ name: 'megahashes/sec', id: HashRateFormats.MegaHashesPerSec },
-			{ name: 'gigahashes/sec', id: HashRateFormats.GigaHashesPerSec },
-			{ name: 'terahashes/sec', id: HashRateFormats.TeraHashesPerSec },
-			{ name: 'petahashes/sec', id: HashRateFormats.PetaHashesPerSec },
-			{ name: 'exahashes/sec', id: HashRateFormats.ExaHashesPerSec },
-		],
-	},
-	{
-		name: CategoryNames.Miscellaneous,
-		formats: [
-			{ name: 'none', id: MiscellaneousFormats.None },
-			{ name: 'String', id: MiscellaneousFormats.String },
-			{ name: 'short', id: MiscellaneousFormats.Short },
-			{ name: 'Percent (0-100)', id: MiscellaneousFormats.Percent },
-			{ name: 'Percent (0.0-1.0)', id: MiscellaneousFormats.PercentUnit },
-			{ name: 'Humidity (%H)', id: MiscellaneousFormats.Humidity },
-			{ name: 'Decibel', id: MiscellaneousFormats.Decibel },
-			{ name: 'Hexadecimal (0x)', id: MiscellaneousFormats.Hexadecimal0x },
-			{ name: 'Hexadecimal', id: MiscellaneousFormats.Hexadecimal },
-			{ name: 'Scientific notation', id: MiscellaneousFormats.ScientificNotation },
-			{ name: 'Locale format', id: MiscellaneousFormats.LocaleFormat },
-			{ name: 'Pixels', id: MiscellaneousFormats.Pixels },
-		],
-	},
-	{
-		name: CategoryNames.Acceleration,
-		formats: [
-			{ name: 'Meters/sec²', id: AccelerationFormats.MetersPerSecondSquared },
-			{ name: 'Feet/sec²', id: AccelerationFormats.FeetPerSecondSquared },
-			{ name: 'G unit', id: AccelerationFormats.GUnit },
-		],
-	},
-	{
-		name: CategoryNames.Angle,
-		formats: [
-			{ name: 'Degrees (°)', id: AngularFormats.Degree },
-			{ name: 'Radians', id: AngularFormats.Radian },
-			{ name: 'Gradian', id: AngularFormats.Gradian },
-			{ name: 'Arc Minutes', id: AngularFormats.ArcMinute },
-			{ name: 'Arc Seconds', id: AngularFormats.ArcSecond },
-		],
-	},
-	{
-		name: CategoryNames.Area,
-		formats: [
-			{ name: 'Square Meters (m²)', id: AreaFormats.SquareMeters },
-			{ name: 'Square Feet (ft²)', id: AreaFormats.SquareFeet },
-			{ name: 'Square Miles (mi²)', id: AreaFormats.SquareMiles },
-		],
-	},
-	{
-		name: CategoryNames.Computation,
-		formats: [
-			{ name: 'FLOP/s', id: FlopsFormats.FLOPs },
-			{ name: 'MFLOP/s', id: FlopsFormats.MFLOPs },
-			{ name: 'GFLOP/s', id: FlopsFormats.GFLOPs },
-			{ name: 'TFLOP/s', id: FlopsFormats.TFLOPs },
-			{ name: 'PFLOP/s', id: FlopsFormats.PFLOPs },
-			{ name: 'EFLOP/s', id: FlopsFormats.EFLOPs },
-			{ name: 'ZFLOP/s', id: FlopsFormats.ZFLOPs },
-			{ name: 'YFLOP/s', id: FlopsFormats.YFLOPs },
-		],
-	},
-	{
-		name: CategoryNames.Concentration,
-		formats: [
-			{ name: 'parts-per-million (ppm)', id: ConcentrationFormats.PPM },
-			{ name: 'parts-per-billion (ppb)', id: ConcentrationFormats.PPB },
-			{ name: 'nanogram per cubic meter (ng/m³)', id: ConcentrationFormats.NgM3 },
-			{
-				name: 'nanogram per normal cubic meter (ng/Nm³)',
-				id: ConcentrationFormats.NgNM3,
-			},
-			{ name: 'microgram per cubic meter (μg/m³)', id: ConcentrationFormats.UgM3 },
-			{
-				name: 'microgram per normal cubic meter (μg/Nm³)',
-				id: ConcentrationFormats.UgNM3,
-			},
-			{ name: 'milligram per cubic meter (mg/m³)', id: ConcentrationFormats.MgM3 },
-			{
-				name: 'milligram per normal cubic meter (mg/Nm³)',
-				id: ConcentrationFormats.MgNM3,
-			},
-			{ name: 'gram per cubic meter (g/m³)', id: ConcentrationFormats.GM3 },
-			{
-				name: 'gram per normal cubic meter (g/Nm³)',
-				id: ConcentrationFormats.GNM3,
-			},
-			{ name: 'milligrams per decilitre (mg/dL)', id: ConcentrationFormats.MgDL },
-			{ name: 'millimoles per litre (mmol/L)', id: ConcentrationFormats.MmolL },
-		],
-	},
-	{
-		name: CategoryNames.Currency,
-		formats: [
-			{ name: 'Dollars ($)', id: CurrencyFormats.USD },
-			{ name: 'Pounds (£)', id: CurrencyFormats.GBP },
-			{ name: 'Euro (€)', id: CurrencyFormats.EUR },
-			{ name: 'Yen (¥)', id: CurrencyFormats.JPY },
-			{ name: 'Rubles (₽)', id: CurrencyFormats.RUB },
-			{ name: 'Hryvnias (₴)', id: CurrencyFormats.UAH },
-			{ name: 'Real (R$)', id: CurrencyFormats.BRL },
-			{ name: 'Danish Krone (kr)', id: CurrencyFormats.DKK },
-			{ name: 'Icelandic Króna (kr)', id: CurrencyFormats.ISK },
-			{ name: 'Norwegian Krone (kr)', id: CurrencyFormats.NOK },
-			{ name: 'Swedish Krona (kr)', id: CurrencyFormats.SEK },
-			{ name: 'Czech koruna (czk)', id: CurrencyFormats.CZK },
-			{ name: 'Swiss franc (CHF)', id: CurrencyFormats.CHF },
-			{ name: 'Polish Złoty (PLN)', id: CurrencyFormats.PLN },
-			{ name: 'Bitcoin (฿)', id: CurrencyFormats.BTC },
-			{ name: 'Milli Bitcoin (฿)', id: CurrencyFormats.MBTC },
-			{ name: 'Micro Bitcoin (฿)', id: CurrencyFormats.UBTC },
-			{ name: 'South African Rand (R)', id: CurrencyFormats.ZAR },
-			{ name: 'Indian Rupee (₹)', id: CurrencyFormats.INR },
-			{ name: 'South Korean Won (₩)', id: CurrencyFormats.KRW },
-			{ name: 'Indonesian Rupiah (Rp)', id: CurrencyFormats.IDR },
-			{ name: 'Philippine Peso (PHP)', id: CurrencyFormats.PHP },
-			{ name: 'Vietnamese Dong (VND)', id: CurrencyFormats.VND },
-		],
-	},
-	{
-		name: CategoryNames.Datetime,
-		formats: [
-			{ name: 'Datetime ISO', id: DatetimeFormats.ISO },
-			{
-				name: 'Datetime ISO (No date if today)',
-				id: DatetimeFormats.ISONoDateIfToday,
-			},
-			{ name: 'Datetime US', id: DatetimeFormats.US },
-			{
-				name: 'Datetime US (No date if today)',
-				id: DatetimeFormats.USNoDateIfToday,
-			},
-			{ name: 'Datetime local', id: DatetimeFormats.Local },
-			{
-				name: 'Datetime local (No date if today)',
-				id: DatetimeFormats.LocalNoDateIfToday,
-			},
-			{ name: 'Datetime default', id: DatetimeFormats.System },
-			{ name: 'From Now', id: DatetimeFormats.FromNow },
-		],
-	},
-	{
-		name: CategoryNames.Energy,
-		formats: [
-			{ name: 'Watt (W)', id: PowerElectricalFormats.WATT },
-			{ name: 'Kilowatt (kW)', id: PowerElectricalFormats.KWATT },
-			{ name: 'Megawatt (MW)', id: PowerElectricalFormats.MEGWATT },
-			{ name: 'Gigawatt (GW)', id: PowerElectricalFormats.GWATT },
-			{ name: 'Milliwatt (mW)', id: PowerElectricalFormats.MWATT },
-			{ name: 'Watt per square meter (W/m²)', id: PowerElectricalFormats.WM2 },
-			{ name: 'Volt-Ampere (VA)', id: PowerElectricalFormats.VOLTAMP },
-			{ name: 'Kilovolt-Ampere (kVA)', id: PowerElectricalFormats.KVOLTAMP },
-			{
-				name: 'Volt-Ampere reactive (VAr)',
-				id: PowerElectricalFormats.VOLTAMPREACT,
-			},
-			{
-				name: 'Kilovolt-Ampere reactive (kVAr)',
-				id: PowerElectricalFormats.KVOLTAMPREACT,
-			},
-			{ name: 'Watt-hour (Wh)', id: PowerElectricalFormats.WATTH },
-			{
-				name: 'Watt-hour per Kilogram (Wh/kg)',
-				id: PowerElectricalFormats.WATTHPERKG,
-			},
-			{ name: 'Kilowatt-hour (kWh)', id: PowerElectricalFormats.KWATTH },
-			{ name: 'Kilowatt-min (kWm)', id: PowerElectricalFormats.KWATTM },
-			{ name: 'Ampere-hour (Ah)', id: PowerElectricalFormats.AMPH },
-			{ name: 'Kiloampere-hour (kAh)', id: PowerElectricalFormats.KAMPH },
-			{ name: 'Milliampere-hour (mAh)', id: PowerElectricalFormats.MAMPH },
-			{ name: 'Joule (J)', id: PowerElectricalFormats.JOULE },
-			{ name: 'Electron volt (eV)', id: PowerElectricalFormats.EV },
-			{ name: 'Ampere (A)', id: PowerElectricalFormats.AMP },
-			{ name: 'Kiloampere (kA)', id: PowerElectricalFormats.KAMP },
-			{ name: 'Milliampere (mA)', id: PowerElectricalFormats.MAMP },
-			{ name: 'Volt (V)', id: PowerElectricalFormats.VOLT },
-			{ name: 'Kilovolt (kV)', id: PowerElectricalFormats.KVOLT },
-			{ name: 'Millivolt (mV)', id: PowerElectricalFormats.MVOLT },
-			{ name: 'Decibel-milliwatt (dBm)', id: PowerElectricalFormats.DBM },
-			{ name: 'Ohm (Ω)', id: PowerElectricalFormats.OHM },
-			{ name: 'Kiloohm (kΩ)', id: PowerElectricalFormats.KOHM },
-			{ name: 'Megaohm (MΩ)', id: PowerElectricalFormats.MOHM },
-			{ name: 'Farad (F)', id: PowerElectricalFormats.FARAD },
-			{ name: 'Microfarad (µF)', id: PowerElectricalFormats.µFARAD },
-			{ name: 'Nanofarad (nF)', id: PowerElectricalFormats.NFARAD },
-			{ name: 'Picofarad (pF)', id: PowerElectricalFormats.PFARAD },
-			{ name: 'Femtofarad (fF)', id: PowerElectricalFormats.FFARAD },
-			{ name: 'Henry (H)', id: PowerElectricalFormats.HENRY },
-			{ name: 'Millihenry (mH)', id: PowerElectricalFormats.MHENRY },
-			{ name: 'Microhenry (µH)', id: PowerElectricalFormats.µHENRY },
-			{ name: 'Lumens (Lm)', id: PowerElectricalFormats.LUMENS },
-		],
-	},
-	{
-		name: CategoryNames.Flow,
-		formats: [
-			{ name: 'Gallons/min (gpm)', id: FlowFormats.FLOWGPM },
-			{ name: 'Cubic meters/sec (cms)', id: FlowFormats.FLOWCMS },
-			{ name: 'Cubic feet/sec (cfs)', id: FlowFormats.FLOWCFS },
-			{ name: 'Cubic feet/min (cfm)', id: FlowFormats.FLOWCFM },
-			{ name: 'Litre/hour', id: FlowFormats.LITREH },
-			{ name: 'Litre/min (L/min)', id: FlowFormats.FLOWLPM },
-			{ name: 'milliLitre/min (mL/min)', id: FlowFormats.FLOWMLPM },
-			{ name: 'Lux (lx)', id: FlowFormats.LUX },
-		],
-	},
-	{
-		name: CategoryNames.Force,
-		formats: [
-			{ name: 'Newton-meters (Nm)', id: ForceFormats.FORCENM },
-			{ name: 'Kilonewton-meters (kNm)', id: ForceFormats.FORCEKNM },
-			{ name: 'Newtons (N)', id: ForceFormats.FORCEN },
-			{ name: 'Kilonewtons (kN)', id: ForceFormats.FORCEKN },
-		],
-	},
-	{
-		name: CategoryNames.Mass,
-		formats: [
-			{ name: 'milligram (mg)', id: MassFormats.MASSMG },
-			{ name: 'gram (g)', id: MassFormats.MASSG },
-			{ name: 'pound (lb)', id: MassFormats.MASSLB },
-			{ name: 'kilogram (kg)', id: MassFormats.MASSKG },
-			{ name: 'metric ton (t)', id: MassFormats.MASST },
-		],
-	},
-	{
-		name: CategoryNames.Length,
-		formats: [
-			{ name: 'millimeter (mm)', id: LengthFormats.LENGTHMM },
-			{ name: 'inch (in)', id: LengthFormats.LENGTHIN },
-			{ name: 'feet (ft)', id: LengthFormats.LENGTHFT },
-			{ name: 'meter (m)', id: LengthFormats.LENGTHM },
-			{ name: 'kilometer (km)', id: LengthFormats.LENGTHKM },
-			{ name: 'mile (mi)', id: LengthFormats.LENGTHMI },
-		],
-	},
-	{
-		name: CategoryNames.Pressure,
-		formats: [
-			{ name: 'Millibars', id: PressureFormats.PRESSUREMBAR },
-			{ name: 'Bars', id: PressureFormats.PRESSUREBAR },
-			{ name: 'Kilobars', id: PressureFormats.PRESSUREKBAR },
-			{ name: 'Pascals', id: PressureFormats.PRESSUREPA },
-			{ name: 'Hectopascals', id: PressureFormats.PRESSUREHPA },
-			{ name: 'Kilopascals', id: PressureFormats.PRESSUREKPA },
-			{ name: 'Inches of mercury', id: PressureFormats.PRESSUREHG },
-			{ name: 'PSI', id: PressureFormats.PRESSUREPSI },
-		],
-	},
-	{
-		name: CategoryNames.Radiation,
-		formats: [
-			{ name: 'Becquerel (Bq)', id: RadiationFormats.RADBQ },
-			{ name: 'curie (Ci)', id: RadiationFormats.RADCI },
-			{ name: 'Gray (Gy)', id: RadiationFormats.RADGY },
-			{ name: 'rad', id: RadiationFormats.RADRAD },
-			{ name: 'Sievert (Sv)', id: RadiationFormats.RADSV },
-			{ name: 'milliSievert (mSv)', id: RadiationFormats.RADMSV },
-			{ name: 'microSievert (µSv)', id: RadiationFormats.RADUSV },
-			{ name: 'rem', id: RadiationFormats.RADREM },
-			{ name: 'Exposure (C/kg)', id: RadiationFormats.RADEXPCKG },
-			{ name: 'roentgen (R)', id: RadiationFormats.RADR },
-			{ name: 'Sievert/hour (Sv/h)', id: RadiationFormats.RADSVH },
-			{ name: 'milliSievert/hour (mSv/h)', id: RadiationFormats.RADMSVH },
-			{ name: 'microSievert/hour (µSv/h)', id: RadiationFormats.RADUSVH },
-		],
-	},
-	{
-		name: CategoryNames.RotationSpeed,
-		formats: [
-			{ name: 'Revolutions per minute (rpm)', id: RotationSpeedFormats.ROTRPM },
-			{ name: 'Hertz (Hz)', id: RotationSpeedFormats.ROTHZ },
-			{ name: 'Radians per second (rad/s)', id: RotationSpeedFormats.ROTRADS },
-			{ name: 'Degrees per second (°/s)', id: RotationSpeedFormats.ROTDEGS },
-		],
-	},
-	{
-		name: CategoryNames.Temperature,
-		formats: [
-			{ name: 'Celsius (°C)', id: TemperatureFormats.CELSIUS },
-			{ name: 'Fahrenheit (°F)', id: TemperatureFormats.FAHRENHEIT },
-			{ name: 'Kelvin (K)', id: TemperatureFormats.KELVIN },
-		],
-	},
-	{
-		name: CategoryNames.Velocity,
-		formats: [
-			{ name: 'meters/second (m/s)', id: VelocityFormats.METERS_PER_SECOND },
-			{ name: 'kilometers/hour (km/h)', id: VelocityFormats.KILOMETERS_PER_HOUR },
-			{ name: 'miles/hour (mph)', id: VelocityFormats.MILES_PER_HOUR },
-			{ name: 'knot (kn)', id: VelocityFormats.KNOT },
-		],
-	},
-	{
-		name: CategoryNames.Volume,
-		formats: [
-			{ name: 'millilitre (mL)', id: VolumeFormats.MILLILITRE },
-			{ name: 'litre (L)', id: VolumeFormats.LITRE },
-			{ name: 'cubic meter', id: VolumeFormats.CUBIC_METER },
-			{ name: 'Normal cubic meter', id: VolumeFormats.NORMAL_CUBIC_METER },
-			{ name: 'cubic decimeter', id: VolumeFormats.CUBIC_DECIMETER },
-			{ name: 'gallons', id: VolumeFormats.GALLONS },
-		],
-	},
-	{
-		name: CategoryNames.Boolean,
-		formats: [
-			{ name: 'True / False', id: BooleanFormats.TRUE_FALSE },
-			{ name: 'Yes / No', id: BooleanFormats.YES_NO },
-			{ name: 'On / Off', id: BooleanFormats.ON_OFF },
-		],
-	},
-];
+// Function to get the category name for a given unit ID (Grafana or universal)
+export const getCategoryName = (unitId: string): YAxisCategoryNames | null => {
+	const categories = getYAxisCategories(YAxisSource.DASHBOARDS);
 
-export const flattenedCategories = flattenDeep(
-	dataTypeCategories.map((category) => category.formats),
-);
+	const foundCategory = categories.find((category) =>
+		category.units.some((unit) => {
+			// Units in Y-axis categories use universal unit IDs.
+			// Thresholds / column units often use Grafana-style IDs.
+			// Treat a unit as matching if either:
+			// - it is already the universal ID, or
+			// - it matches the mapped Grafana ID for that universal unit.
+			if (unit.id === unitId) {
+				return true;
+			}
 
-type ConversionFactors = {
-	[key: string]: {
-		[key: string]: number | null;
-	};
+			const grafanaId = UniversalUnitToGrafanaUnit[unit.id];
+			return grafanaId === unitId;
+		}),
+	);
+
+	return foundCategory ? foundCategory.name : null;
 };
 
-// Object containing conversion factors for various categories and formats
-const conversionFactors: ConversionFactors = {
-	[CategoryNames.Time]: {
-		[TimeFormats.Hertz]: 1,
-		[TimeFormats.Nanoseconds]: 1e-9,
-		[TimeFormats.Microseconds]: 1e-6,
-		[TimeFormats.Milliseconds]: 1e-3,
-		[TimeFormats.Seconds]: 1,
-		[TimeFormats.Minutes]: 60,
-		[TimeFormats.Hours]: 3600,
-		[TimeFormats.Days]: 86400,
-		[TimeFormats.DurationMs]: 1e-3,
-		[TimeFormats.DurationS]: 1,
-		[TimeFormats.DurationHms]: null, // Requires special handling
-		[TimeFormats.DurationDhms]: null, // Requires special handling
-		[TimeFormats.Timeticks]: null, // Requires special handling
-		[TimeFormats.ClockMs]: 1e-3,
-		[TimeFormats.ClockS]: 1,
-	},
-	[CategoryNames.Throughput]: {
-		[ThroughputFormats.CountsPerSec]: 1,
-		[ThroughputFormats.OpsPerSec]: 1,
-		[ThroughputFormats.RequestsPerSec]: 1,
-		[ThroughputFormats.ReadsPerSec]: 1,
-		[ThroughputFormats.WritesPerSec]: 1,
-		[ThroughputFormats.IOOpsPerSec]: 1,
-		[ThroughputFormats.CountsPerMin]: 1 / 60,
-		[ThroughputFormats.OpsPerMin]: 1 / 60,
-		[ThroughputFormats.ReadsPerMin]: 1 / 60,
-		[ThroughputFormats.WritesPerMin]: 1 / 60,
-	},
-	[CategoryNames.Data]: {
-		[DataFormats.BytesIEC]: 1,
-		[DataFormats.BytesSI]: 1,
-		[DataFormats.BitsIEC]: 0.125,
-		[DataFormats.BitsSI]: 0.125,
-		[DataFormats.KibiBytes]: 1024,
-		[DataFormats.KiloBytes]: 1000,
-		[DataFormats.MebiBytes]: 1048576,
-		[DataFormats.MegaBytes]: 1000000,
-		[DataFormats.GibiBytes]: 1073741824,
-		[DataFormats.GigaBytes]: 1000000000,
-		[DataFormats.TebiBytes]: 1099511627776,
-		[DataFormats.TeraBytes]: 1000000000000,
-		[DataFormats.PebiBytes]: 1125899906842624,
-		[DataFormats.PetaBytes]: 1000000000000000,
-	},
-	[CategoryNames.DataRate]: {
-		[DataRateFormats.PacketsPerSec]: null, // Cannot convert directly to other data rates
-		[DataRateFormats.BytesPerSecIEC]: 1,
-		[DataRateFormats.BytesPerSecSI]: 1,
-		[DataRateFormats.BitsPerSecIEC]: 0.125,
-		[DataRateFormats.BitsPerSecSI]: 0.125,
-		[DataRateFormats.KibiBytesPerSec]: 1024,
-		[DataRateFormats.KibiBitsPerSec]: 128,
-		[DataRateFormats.KiloBytesPerSec]: 1000,
-		[DataRateFormats.KiloBitsPerSec]: 125,
-		[DataRateFormats.MebiBytesPerSec]: 1048576,
-		[DataRateFormats.MebiBitsPerSec]: 131072,
-		[DataRateFormats.MegaBytesPerSec]: 1000000,
-		[DataRateFormats.MegaBitsPerSec]: 125000,
-		[DataRateFormats.GibiBytesPerSec]: 1073741824,
-		[DataRateFormats.GibiBitsPerSec]: 134217728,
-		[DataRateFormats.GigaBytesPerSec]: 1000000000,
-		[DataRateFormats.GigaBitsPerSec]: 125000000,
-		[DataRateFormats.TebiBytesPerSec]: 1099511627776,
-		[DataRateFormats.TebiBitsPerSec]: 137438953472,
-		[DataRateFormats.TeraBytesPerSec]: 1000000000000,
-		[DataRateFormats.TeraBitsPerSec]: 125000000000,
-		[DataRateFormats.PebiBytesPerSec]: 1125899906842624,
-		[DataRateFormats.PebiBitsPerSec]: 140737488355328,
-		[DataRateFormats.PetaBytesPerSec]: 1000000000000000,
-		[DataRateFormats.PetaBitsPerSec]: 125000000000000,
-	},
-	[CategoryNames.Miscellaneous]: {
-		[MiscellaneousFormats.None]: null,
-		[MiscellaneousFormats.String]: null,
-		[MiscellaneousFormats.Short]: null,
-		[MiscellaneousFormats.Percent]: 1,
-		[MiscellaneousFormats.PercentUnit]: 100,
-		[MiscellaneousFormats.Humidity]: 1,
-		[MiscellaneousFormats.Decibel]: null,
-		[MiscellaneousFormats.Hexadecimal0x]: null,
-		[MiscellaneousFormats.Hexadecimal]: null,
-		[MiscellaneousFormats.ScientificNotation]: null,
-		[MiscellaneousFormats.LocaleFormat]: null,
-		[MiscellaneousFormats.Pixels]: null,
-	},
-	[CategoryNames.Boolean]: {
-		[BooleanFormats.TRUE_FALSE]: null, // Not convertible
-		[BooleanFormats.YES_NO]: null, // Not convertible
-		[BooleanFormats.ON_OFF]: null, // Not convertible
-	},
-};
-
-// Function to get the conversion factor between two units in a specific category
-function getConversionFactor(
-	fromUnit: string,
-	toUnit: string,
-	category: CategoryNames,
-): number | null {
-	// Retrieves the conversion factors for the specified category
-	const categoryFactors = conversionFactors[category];
-	if (!categoryFactors) {
-		return null; // Returns null if the category does not exist
-	}
-	const fromFactor = categoryFactors[fromUnit];
-	const toFactor = categoryFactors[toUnit];
-	if (
-		fromFactor === undefined ||
-		toFactor === undefined ||
-		fromFactor === null ||
-		toFactor === null
-	) {
-		return null; // Returns null if either unit does not exist or is not convertible
-	}
-	return fromFactor / toFactor; // Returns the conversion factor ratio
-}
-
 // Function to convert a value from one unit to another
 export function convertUnit(
 	value: number,
 	fromUnitId?: string,
 	toUnitId?: string,
 ): number | null {
-	let fromUnit: string | undefined;
-	let toUnit: string | undefined;
-
-	// Finds the category that contains the specified units and extracts fromUnit and toUnit using array methods
-	const category = dataTypeCategories.find((category) =>
-		category.formats.some((format) => {
-			if (format.id === fromUnitId) {
-				fromUnit = format.id;
-			}
-			if (format.id === toUnitId) {
-				toUnit = format.id;
-			}
-			return fromUnit && toUnit; // Break out early if both units are found
-		}),
-	);
-
-	if (!category || !fromUnit || !toUnit) {
+	if (!fromUnitId || !toUnitId) {
 		return null;
-	} // Return null if category or units are not found
+	}
 
-	// Gets the conversion factor for the specified units
-	const conversionFactor = getConversionFactor(
-		fromUnit,
-		toUnit,
-		category.name as any,
-	);
-	if (conversionFactor === null) {
+	const fromCategory = getCategoryName(fromUnitId);
+	const toCategory = getCategoryName(toUnitId);
+
+	// If either unit is unknown or the categories don't match, the conversion is invalid
+	if (!fromCategory || !toCategory || fromCategory !== toCategory) {
 		return null;
-	} // Return null if conversion is not possible
+	}
 
-	return value * conversionFactor;
+	// Delegate the actual numeric conversion (or identity) to the shared helper,
+	// which understands both Grafana-style and universal unit IDs.
+	return convertValue(value, fromUnitId, toUnitId);
 }
-
-// Function to get the category name for a given unit ID
-export const getCategoryName = (unitId: string): CategoryNames | null => {
-	// Finds the category that contains the specified unit ID
-	const foundCategory = dataTypeCategories.find((category) =>
-		category.formats.some((format) => format.id === unitId),
-	);
-	return foundCategory ? (foundCategory.name as CategoryNames) : null;
-};

frontend/src/container/NewWidget/utils.ts

@@ -2,6 +2,9 @@ import { Layout } from 'react-grid-layout';
 import { DefaultOptionType } from 'antd/es/select';
 import { omitIdFromQuery } from 'components/ExplorerCard/utils';
 import { PrecisionOptionsEnum } from 'components/Graph/types';
+import { YAxisCategoryNames } from 'components/YAxisUnitSelector/constants';
+import { YAxisSource } from 'components/YAxisUnitSelector/types';
+import { getYAxisCategories } from 'components/YAxisUnitSelector/utils';
 import {
 	initialQueryBuilderFormValuesMap,
 	PANEL_TYPES,
@@ -21,11 +24,7 @@ import { IBuilderQuery, Query } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource } from 'types/common/queryBuilder';
 
-import {
-	dataTypeCategories,
-	getCategoryName,
-} from './RightContainer/dataFormatCategories';
-import { CategoryNames } from './RightContainer/types';
+import { getCategoryName } from './RightContainer/dataFormatCategories';
 
 export const getIsQueryModified = (
 	currentQuery: Query,
@@ -606,14 +605,21 @@ export const PANEL_TYPE_TO_QUERY_TYPES: Record<PANEL_TYPES, EQueryType[]> = {
  * the label and value for each format.
  */
 export const getCategorySelectOptionByName = (
-	name?: CategoryNames | string,
-): DefaultOptionType[] =>
-	dataTypeCategories
-		.find((category) => category.name === name)
-		?.formats.map((format) => ({
-			label: format.name,
-			value: format.id,
-		})) || [];
+	name?: YAxisCategoryNames,
+): DefaultOptionType[] => {
+	const categories = getYAxisCategories(YAxisSource.DASHBOARDS);
+	if (!categories.length) {
+		return [];
+	}
+	return (
+		categories
+			.find((category) => category.name === name)
+			?.units.map((unit) => ({
+				label: unit.name,
+				value: unit.id,
+			})) || []
+	);
+};
 
 /**
  * Generates unit options based on the provided column unit.

frontend/src/container/PaginatedTraceFlamegraph/FLAMEGRAPH_CANVAS_POC_NOTES.md

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

frontend/src/container/PaginatedTraceFlamegraph/PaginatedTraceFlamegraph.tsx

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

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

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

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

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

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

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

frontend/src/container/QueryBuilder/filters/BuilderUnitsFilter/config.ts

@@ -1,10 +1,13 @@
-import { CategoryNames } from 'container/NewWidget/RightContainer/types';
+import { YAxisCategoryNames } from 'components/YAxisUnitSelector/constants';
 
-export const categoryToSupport = [
-	CategoryNames.Data,
-	CategoryNames.DataRate,
-	CategoryNames.Time,
-	CategoryNames.Throughput,
-	CategoryNames.Miscellaneous,
-	CategoryNames.Boolean,
+export const categoryToSupport: YAxisCategoryNames[] = [
+	YAxisCategoryNames.None,
+	YAxisCategoryNames.Data,
+	YAxisCategoryNames.DataRate,
+	YAxisCategoryNames.Time,
+	YAxisCategoryNames.Count,
+	YAxisCategoryNames.Operations,
+	YAxisCategoryNames.Percentage,
+	YAxisCategoryNames.Miscellaneous,
+	YAxisCategoryNames.Boolean,
 ];

frontend/src/hooks/trace/useGetTraceFlamegraph.tsx

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

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

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

pkg/flagger/configflagger/configflagger.go

@@ -3,6 +3,7 @@ package configflagger
 import (
 	"context"
 
+	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/factory"
 	"github.com/SigNoz/signoz/pkg/flagger"
 	"github.com/SigNoz/signoz/pkg/types/featuretypes"
@@ -32,6 +33,10 @@ func New(ctx context.Context, ps factory.ProviderSettings, c flagger.Config, reg
 	for name, value := range c.Config.Boolean {
 		feature, _, err := registry.GetByString(name)
 		if err != nil {
+			if errors.Ast(err, errors.TypeNotFound) {
+				settings.Logger().WarnContext(ctx, "skipping unknown feature flag", "name", name, "kind", "boolean")
+				continue
+			}
 			return nil, err
 		}
 
@@ -46,6 +51,10 @@ func New(ctx context.Context, ps factory.ProviderSettings, c flagger.Config, reg
 	for name, value := range c.Config.String {
 		feature, _, err := registry.GetByString(name)
 		if err != nil {
+			if errors.Ast(err, errors.TypeNotFound) {
+				settings.Logger().WarnContext(ctx, "skipping unknown feature flag", "name", name, "kind", "string")
+				continue
+			}
 			return nil, err
 		}
 
@@ -60,6 +69,10 @@ func New(ctx context.Context, ps factory.ProviderSettings, c flagger.Config, reg
 	for name, value := range c.Config.Float {
 		feature, _, err := registry.GetByString(name)
 		if err != nil {
+			if errors.Ast(err, errors.TypeNotFound) {
+				settings.Logger().WarnContext(ctx, "skipping unknown feature flag", "name", name, "kind", "float")
+				continue
+			}
 			return nil, err
 		}
 
@@ -74,6 +87,10 @@ func New(ctx context.Context, ps factory.ProviderSettings, c flagger.Config, reg
 	for name, value := range c.Config.Integer {
 		feature, _, err := registry.GetByString(name)
 		if err != nil {
+			if errors.Ast(err, errors.TypeNotFound) {
+				settings.Logger().WarnContext(ctx, "skipping unknown feature flag", "name", name, "kind", "integer")
+				continue
+			}
 			return nil, err
 		}
 
@@ -88,6 +105,10 @@ func New(ctx context.Context, ps factory.ProviderSettings, c flagger.Config, reg
 	for name, value := range c.Config.Object {
 		feature, _, err := registry.GetByString(name)
 		if err != nil {
+			if errors.Ast(err, errors.TypeNotFound) {
+				settings.Logger().WarnContext(ctx, "skipping unknown feature flag", "name", name, "kind", "object")
+				continue
+			}
 			return nil, err
 		}
 

pkg/flagger/registry.go

@@ -5,6 +5,7 @@ import "github.com/SigNoz/signoz/pkg/types/featuretypes"
 var (
 	FeatureUseSpanMetrics = featuretypes.MustNewName("use_span_metrics")
 	FeatureKafkaSpanEval  = featuretypes.MustNewName("kafka_span_eval")
+	FeatureHideRootUser   = featuretypes.MustNewName("hide_root_user")
 )
 
 func MustNewRegistry() featuretypes.Registry {
@@ -25,6 +26,14 @@ func MustNewRegistry() featuretypes.Registry {
 			DefaultVariant: featuretypes.MustNewName("disabled"),
 			Variants:       featuretypes.NewBooleanVariants(),
 		},
+		&featuretypes.Feature{
+			Name:           FeatureHideRootUser,
+			Kind:           featuretypes.KindBoolean,
+			Stage:          featuretypes.StageStable,
+			Description:    "Controls whether root admin user is hidden or not",
+			DefaultVariant: featuretypes.MustNewName("disabled"),
+			Variants:       featuretypes.NewBooleanVariants(),
+		},
 	)
 	if err != nil {
 		panic(err)

pkg/modules/thirdpartyapi/translator.go

@@ -120,6 +120,8 @@ func FilterResponse(results []*qbtypes.QueryRangeResponse) []*qbtypes.QueryRange
 					}
 				}
 				resultData.Rows = filteredRows
+			case *qbtypes.ScalarData:
+				resultData.Data = filterScalarDataIPs(resultData.Columns, resultData.Data)
 			}
 
 			filteredData = append(filteredData, result)
@@ -145,6 +147,39 @@ func shouldIncludeSeries(series *qbtypes.TimeSeries) bool {
 	return true
 }
 
+func filterScalarDataIPs(columns []*qbtypes.ColumnDescriptor, data [][]any) [][]any {
+	// Find column indices for server address fields
+	serverColIndices := make([]int, 0)
+	for i, col := range columns {
+		if col.Name == derivedKeyHTTPHost {
+			serverColIndices = append(serverColIndices, i)
+		}
+	}
+
+	if len(serverColIndices) == 0 {
+		return data
+	}
+
+	filtered := make([][]any, 0, len(data))
+	for _, row := range data {
+		includeRow := true
+		for _, colIdx := range serverColIndices {
+			if colIdx < len(row) {
+				if strVal, ok := row[colIdx].(string); ok {
+					if net.ParseIP(strVal) != nil {
+						includeRow = false
+						break
+					}
+				}
+			}
+		}
+		if includeRow {
+			filtered = append(filtered, row)
+		}
+	}
+	return filtered
+}
+
 func shouldIncludeRow(row *qbtypes.RawRow) bool {
 	if row.Data != nil {
 		if domainVal, ok := row.Data[derivedKeyHTTPHost]; ok {

pkg/modules/thirdpartyapi/translator_test.go

@@ -117,6 +117,59 @@ func TestFilterResponse(t *testing.T) {
 				},
 			},
 		},
+		{
+			name: "should filter out IP addresses from scalar data",
+			input: []*qbtypes.QueryRangeResponse{
+				{
+					Data: qbtypes.QueryData{
+						Results: []any{
+							&qbtypes.ScalarData{
+								QueryName: "endpoints",
+								Columns: []*qbtypes.ColumnDescriptor{
+									{
+										TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{Name: derivedKeyHTTPHost},
+										Type:              qbtypes.ColumnTypeGroup,
+									},
+									{
+										TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{Name: "endpoints"},
+										Type:              qbtypes.ColumnTypeAggregation,
+									},
+								},
+								Data: [][]any{
+									{"192.168.1.1", 10},
+									{"example.com", 20},
+									{"10.0.0.1", 5},
+								},
+							},
+						},
+					},
+				},
+			},
+			expected: []*qbtypes.QueryRangeResponse{
+				{
+					Data: qbtypes.QueryData{
+						Results: []any{
+							&qbtypes.ScalarData{
+								QueryName: "endpoints",
+								Columns: []*qbtypes.ColumnDescriptor{
+									{
+										TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{Name: derivedKeyHTTPHost},
+										Type:              qbtypes.ColumnTypeGroup,
+									},
+									{
+										TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{Name: "endpoints"},
+										Type:              qbtypes.ColumnTypeAggregation,
+									},
+								},
+								Data: [][]any{
+									{"example.com", 20},
+								},
+							},
+						},
+					},
+				},
+			},
+		},
 	}
 
 	for _, tt := range tests {

pkg/modules/user/impluser/getter.go

@@ -2,18 +2,22 @@ package impluser
 
 import (
 	"context"
+	"slices"
 
+	"github.com/SigNoz/signoz/pkg/flagger"
 	"github.com/SigNoz/signoz/pkg/modules/user"
 	"github.com/SigNoz/signoz/pkg/types"
+	"github.com/SigNoz/signoz/pkg/types/featuretypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
 )
 
 type getter struct {
-	store types.UserStore
+	store   types.UserStore
+	flagger flagger.Flagger
 }
 
-func NewGetter(store types.UserStore) user.Getter {
-	return &getter{store: store}
+func NewGetter(store types.UserStore, flagger flagger.Flagger) user.Getter {
+	return &getter{store: store, flagger: flagger}
 }
 
 func (module *getter) GetRootUserByOrgID(ctx context.Context, orgID valuer.UUID) (*types.User, error) {
@@ -26,6 +30,14 @@ func (module *getter) ListByOrgID(ctx context.Context, orgID valuer.UUID) ([]*ty
 		return nil, err
 	}
 
+	// filter root users if feature flag `hide_root_users` is true
+	evalCtx := featuretypes.NewFlaggerEvaluationContext(orgID)
+	hideRootUsers := module.flagger.BooleanOrEmpty(ctx, flagger.FeatureHideRootUser, evalCtx)
+
+	if hideRootUsers {
+		users = slices.DeleteFunc(users, func(user *types.User) bool { return user.IsRoot })
+	}
+
 	return users, nil
 }
 

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

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

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

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

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

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

pkg/query-service/model/queryParams.go

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

pkg/query-service/model/response.go

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

pkg/query-service/utils/time.go

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

pkg/signoz/handler_test.go

@@ -11,8 +11,11 @@ import (
 	"github.com/SigNoz/signoz/pkg/alertmanager/signozalertmanager"
 	"github.com/SigNoz/signoz/pkg/emailing/emailingtest"
 	"github.com/SigNoz/signoz/pkg/factory/factorytest"
+	"github.com/SigNoz/signoz/pkg/flagger"
+	"github.com/SigNoz/signoz/pkg/instrumentation/instrumentationtest"
 	"github.com/SigNoz/signoz/pkg/modules/dashboard/impldashboard"
 	"github.com/SigNoz/signoz/pkg/modules/organization/implorganization"
+	"github.com/SigNoz/signoz/pkg/modules/user/impluser"
 	"github.com/SigNoz/signoz/pkg/querier"
 	"github.com/SigNoz/signoz/pkg/queryparser"
 	"github.com/SigNoz/signoz/pkg/sharder"
@@ -41,7 +44,13 @@ func TestNewHandlers(t *testing.T) {
 	queryParser := queryparser.New(providerSettings)
 	require.NoError(t, err)
 	dashboardModule := impldashboard.NewModule(impldashboard.NewStore(sqlstore), providerSettings, nil, orgGetter, queryParser)
-	modules := NewModules(sqlstore, tokenizer, emailing, providerSettings, orgGetter, alertmanager, nil, nil, nil, nil, nil, nil, nil, queryParser, Config{}, dashboardModule)
+
+	flagger, err := flagger.New(context.Background(), instrumentationtest.New().ToProviderSettings(), flagger.Config{}, flagger.MustNewRegistry())
+	require.NoError(t, err)
+
+	userGetter := impluser.NewGetter(impluser.NewStore(sqlstore, providerSettings), flagger)
+
+	modules := NewModules(sqlstore, tokenizer, emailing, providerSettings, orgGetter, alertmanager, nil, nil, nil, nil, nil, nil, nil, queryParser, Config{}, dashboardModule, userGetter)
 
 	querierHandler := querier.NewHandler(providerSettings, nil, nil)
 	handlers := NewHandlers(modules, providerSettings, nil, querierHandler, nil, nil, nil, nil, nil, nil, nil)

pkg/signoz/module.go

@@ -85,11 +85,11 @@ func NewModules(
 	queryParser queryparser.QueryParser,
 	config Config,
 	dashboard dashboard.Module,
+	userGetter user.Getter,
 ) Modules {
 	quickfilter := implquickfilter.NewModule(implquickfilter.NewStore(sqlstore))
 	orgSetter := implorganization.NewSetter(implorganization.NewStore(sqlstore), alertmanager, quickfilter)
 	user := impluser.NewModule(impluser.NewStore(sqlstore, providerSettings), tokenizer, emailing, providerSettings, orgSetter, authz, analytics, config.User)
-	userGetter := impluser.NewGetter(impluser.NewStore(sqlstore, providerSettings))
 	ruleStore := sqlrulestore.NewRuleStore(sqlstore, queryParser, providerSettings)
 
 	return Modules{

pkg/signoz/module_test.go

@@ -11,8 +11,11 @@ import (
 	"github.com/SigNoz/signoz/pkg/alertmanager/signozalertmanager"
 	"github.com/SigNoz/signoz/pkg/emailing/emailingtest"
 	"github.com/SigNoz/signoz/pkg/factory/factorytest"
+	"github.com/SigNoz/signoz/pkg/flagger"
+	"github.com/SigNoz/signoz/pkg/instrumentation/instrumentationtest"
 	"github.com/SigNoz/signoz/pkg/modules/dashboard/impldashboard"
 	"github.com/SigNoz/signoz/pkg/modules/organization/implorganization"
+	"github.com/SigNoz/signoz/pkg/modules/user/impluser"
 	"github.com/SigNoz/signoz/pkg/queryparser"
 	"github.com/SigNoz/signoz/pkg/sharder"
 	"github.com/SigNoz/signoz/pkg/sharder/noopsharder"
@@ -40,7 +43,13 @@ func TestNewModules(t *testing.T) {
 	queryParser := queryparser.New(providerSettings)
 	require.NoError(t, err)
 	dashboardModule := impldashboard.NewModule(impldashboard.NewStore(sqlstore), providerSettings, nil, orgGetter, queryParser)
-	modules := NewModules(sqlstore, tokenizer, emailing, providerSettings, orgGetter, alertmanager, nil, nil, nil, nil, nil, nil, nil, queryParser, Config{}, dashboardModule)
+
+	flagger, err := flagger.New(context.Background(), instrumentationtest.New().ToProviderSettings(), flagger.Config{}, flagger.MustNewRegistry())
+	require.NoError(t, err)
+
+	userGetter := impluser.NewGetter(impluser.NewStore(sqlstore, providerSettings), flagger)
+
+	modules := NewModules(sqlstore, tokenizer, emailing, providerSettings, orgGetter, alertmanager, nil, nil, nil, nil, nil, nil, nil, queryParser, Config{}, dashboardModule, userGetter)
 
 	reflectVal := reflect.ValueOf(modules)
 	for i := 0; i < reflectVal.NumField(); i++ {

pkg/signoz/provider_test.go

@@ -1,11 +1,13 @@
 package signoz
 
 import (
+	"context"
 	"testing"
 
 	"github.com/DATA-DOG/go-sqlmock"
 	"github.com/SigNoz/signoz/pkg/alertmanager/nfmanager/nfmanagertest"
 	"github.com/SigNoz/signoz/pkg/analytics"
+	"github.com/SigNoz/signoz/pkg/flagger"
 	"github.com/SigNoz/signoz/pkg/instrumentation/instrumentationtest"
 	"github.com/SigNoz/signoz/pkg/modules/organization/implorganization"
 	"github.com/SigNoz/signoz/pkg/modules/user/impluser"
@@ -75,7 +77,12 @@ func TestNewProviderFactories(t *testing.T) {
 	})
 
 	assert.NotPanics(t, func() {
-		userGetter := impluser.NewGetter(impluser.NewStore(sqlstoretest.New(sqlstore.Config{Provider: "sqlite"}, sqlmock.QueryMatcherEqual), instrumentationtest.New().ToProviderSettings()))
+		flagger, err := flagger.New(context.Background(), instrumentationtest.New().ToProviderSettings(), flagger.Config{}, flagger.MustNewRegistry())
+		if err != nil {
+			panic(err)
+		}
+
+		userGetter := impluser.NewGetter(impluser.NewStore(sqlstoretest.New(sqlstore.Config{Provider: "sqlite"}, sqlmock.QueryMatcherEqual), instrumentationtest.New().ToProviderSettings()), flagger)
 		orgGetter := implorganization.NewGetter(implorganization.NewStore(sqlstoretest.New(sqlstore.Config{Provider: "sqlite"}, sqlmock.QueryMatcherEqual)), nil)
 		telemetryStore := telemetrystoretest.New(telemetrystore.Config{Provider: "clickhouse"}, sqlmock.QueryMatcherEqual)
 		NewStatsReporterProviderFactories(telemetryStore, []statsreporter.StatsCollector{}, orgGetter, userGetter, tokenizertest.NewMockTokenizer(t), version.Build{}, analytics.Config{Enabled: true})

pkg/signoz/signoz.go

@@ -280,7 +280,7 @@ func New(
 	}
 
 	// Initialize user getter
-	userGetter := impluser.NewGetter(impluser.NewStore(sqlstore, providerSettings))
+	userGetter := impluser.NewGetter(impluser.NewStore(sqlstore, providerSettings), flagger)
 
 	licensingProviderFactory := licenseProviderFactory(sqlstore, zeus, orgGetter, analytics)
 	licensing, err := licensingProviderFactory.New(
@@ -388,7 +388,7 @@ func New(
 	}
 
 	// Initialize all modules
-	modules := NewModules(sqlstore, tokenizer, emailing, providerSettings, orgGetter, alertmanager, analytics, querier, telemetrystore, telemetryMetadataStore, authNs, authz, cache, queryParser, config, dashboard)
+	modules := NewModules(sqlstore, tokenizer, emailing, providerSettings, orgGetter, alertmanager, analytics, querier, telemetrystore, telemetryMetadataStore, authNs, authz, cache, queryParser, config, dashboard, userGetter)
 
 	userService := impluser.NewService(providerSettings, impluser.NewStore(sqlstore, providerSettings), modules.User, orgGetter, authz, config.User.Root)