Revert "feat: test css commit"

This reverts commit f0a34dd460.

.github/workflows/integrationci.yaml

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

frontend/src/components/Logs/ListLogView/ListLogView.styles.scss

@@ -70,9 +70,6 @@
 		padding-left: 0;
 	}
 	transition: background-color 0.2s ease-in;
-	&:hover {
-		background-color: rgba(171, 189, 255, 0.04) !important;
-	}
 }
 
 .log-selected-fields {
@@ -183,11 +180,6 @@
 	.log-value {
 		color: var(--text-slate-400);
 	}
-	.log-line {
-		&:hover {
-			background-color: var(--text-vanilla-200) !important;
-		}
-	}
 }
 
 .dark {

frontend/src/components/Logs/ListLogView/styles.ts

@@ -49,6 +49,12 @@ export const Container = styled(Card)<{
 
 		${({ $isActiveLog, $isDarkMode, $logType }): string =>
 			getActiveLogBackground($isActiveLog, $isDarkMode, $logType)}
+	}
+
+	&:hover .ant-card-body {
+		${({ $isDarkMode, $logType }): string =>
+			getActiveLogBackground(true, $isDarkMode, $logType)}
+	}
 `;
 
 export const LogContainer = styled.div<LogContainerProps>`

frontend/src/components/Logs/RawLogView/styles.ts

@@ -8,7 +8,6 @@ import styled from 'styled-components';
 import {
 	getActiveLogBackground,
 	getCustomHighlightBackground,
-	getDefaultLogBackground,
 } from 'utils/logs';
 
 import { RawLogContentProps } from './types';
@@ -48,7 +47,9 @@ export const RawLogViewContainer = styled(Row)<{
 	${({ $isReadOnly, $isActiveLog, $isDarkMode, $logType }): string =>
 		$isActiveLog
 			? getActiveLogBackground($isActiveLog, $isDarkMode, $logType)
-			: getDefaultLogBackground($isReadOnly, $isDarkMode)}
+			: !$isReadOnly
+			? `&:hover { ${getActiveLogBackground(true, $isDarkMode, $logType)} }`
+			: ''}
 
 	${({ $isHightlightedLog, $isDarkMode }): string =>
 		$isHightlightedLog

frontend/src/components/TimelineV2/TimelineV2.tsx

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

frontend/src/components/TimelineV2/utils.ts

@@ -64,71 +64,6 @@ 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;
@@ -171,10 +106,9 @@ export function getIntervalsOld(
 		}
 		elapsedIntervals = intervalTime;
 		const interval: Interval = {
-			label: `${toFixed(
-				resolveTimeFromInterval(intervalTime + offsetTimestamp, intervalUnit),
-				2,
-			)}${intervalUnit.name}`,
+			label: `${toFixed(resolveTimeFromInterval(intervalTime, intervalUnit), 2)}${
+				intervalUnit.name
+			}`,
 			percentage: (intervalTime / baseSpread) * 100,
 		};
 		intervals.push(interval);

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

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

frontend/src/components/YAxisUnitSelector/constants.ts

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

frontend/src/components/YAxisUnitSelector/types.ts

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

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -172,51 +172,23 @@ 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 &&
-				sourcepage !== DataSource.LOGS
+				StringOperators.NOOP
 			) {
 				return JSON.stringify(queryToUse);
 			}
 
-			// Convert NOOP to COUNT for alerts and strip orderBy for logs
+			// Modify aggregateOperator to count, as noop is not supported in alerts
 			const modifiedQuery = cloneDeep(queryToUse);
-			if (modifiedQuery && modifiedQuery.builder?.queryData) {
-				modifiedQuery.builder.queryData = modifiedQuery.builder.queryData.map(
-					(item) => {
-						const updatedItem = { ...item };
 
-						if (updatedItem.aggregateOperator === StringOperators.NOOP) {
-							updatedItem.aggregateOperator = StringOperators.COUNT;
-						}
+			modifiedQuery.builder.queryData[0].aggregateOperator = StringOperators.COUNT;
 
-						// 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)),
-				);
-			}
+			return JSON.stringify(modifiedQuery);
 		},
-		[panelType, query, sourcepage],
+		[query],
 	);
 
 	const onCreateAlertsHandler = useCallback(
@@ -785,9 +757,9 @@ function ExplorerOptions({
 		);
 	}, [
 		disabled,
-		query,
 		isOneChartPerQuery,
 		onCreateAlertsHandler,
+		query,
 		splitedQueries,
 	]);
 

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

@@ -1,4 +1,3 @@
-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';
@@ -16,11 +15,6 @@ 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)'),
@@ -35,7 +29,6 @@ const mockGetExplorerToolBarVisibility = jest.mocked(
 );
 
 const mockUseUpdateDashboard = jest.mocked(useUpdateDashboard);
-const mockUseHistory = jest.mocked(useHistory);
 
 // Mock data
 const TEST_QUERY_ID = 'test-query-id';
@@ -110,6 +103,7 @@ describe('ExplorerOptionWrapper', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
 		mockGetExplorerToolBarVisibility.mockReturnValue(true);
+
 		// Mock useUpdateDashboard to return a mutation object
 		mockUseUpdateDashboard.mockReturnValue(({
 			mutate: jest.fn(),
@@ -123,28 +117,6 @@ 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/LogsExplorerList/InfinityTableView/styles.ts

@@ -70,12 +70,8 @@ export const TableRowStyled = styled.tr<{
 
 	&:hover {
 		${TableCellStyled} {
-			${({ $isActiveLog, $isDarkMode }): string =>
-				$isActiveLog
-					? getActiveLogBackground()
-					: `background-color: ${
-							!$isDarkMode ? 'var(--bg-vanilla-200)' : 'rgba(171, 189, 255, 0.04)'
-					  }`}
+			${({ $isDarkMode, $logType }): string =>
+				getActiveLogBackground(true, $isDarkMode, $logType)}
 		}
 		.log-line-action-buttons {
 			display: flex;

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: '%', label: 'Percent (0 - 100)' },
-		{ value: 'ms', label: 'Milliseconds (ms)' },
+		{ value: 'percent', label: 'Percent' },
+		{ value: 'ms', label: 'Milliseconds' },
 	]),
 }));
 
@@ -39,7 +39,7 @@ const defaultProps = {
 	],
 	thresholdTableOptions: 'cpu_usage',
 	columnUnits: { cpu_usage: 'percent', memory_usage: 'bytes' },
-	yAxisUnit: '%',
+	yAxisUnit: 'percent',
 	moveThreshold: jest.fn(),
 };
 

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

@@ -0,0 +1,99 @@
+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

@@ -0,0 +1,240 @@
+/* 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,53 +1,613 @@
+import { flattenDeep } from 'lodash-es';
+
 import {
-	UniversalUnitToGrafanaUnit,
-	YAxisCategoryNames,
-} from 'components/YAxisUnitSelector/constants';
-import { YAxisSource } from 'components/YAxisUnitSelector/types';
-import { getYAxisCategories } from 'components/YAxisUnitSelector/utils';
-import { convertValue } from 'lib/getConvertedValue';
+	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';
 
-// 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 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 },
+		],
+	},
+];
 
-	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;
-			}
+export const flattenedCategories = flattenDeep(
+	dataTypeCategories.map((category) => category.formats),
+);
 
-			const grafanaId = UniversalUnitToGrafanaUnit[unit.id];
-			return grafanaId === unitId;
-		}),
-	);
-
-	return foundCategory ? foundCategory.name : null;
+type ConversionFactors = {
+	[key: string]: {
+		[key: string]: number | 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 {
-	if (!fromUnitId || !toUnitId) {
+	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) {
 		return null;
-	}
+	} // Return null if category or units are not found
 
-	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) {
+	// Gets the conversion factor for the specified units
+	const conversionFactor = getConversionFactor(
+		fromUnit,
+		toUnit,
+		category.name as any,
+	);
+	if (conversionFactor === null) {
 		return null;
-	}
+	} // Return null if conversion is not possible
 
-	// 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);
+	return value * conversionFactor;
 }
+
+// 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,9 +2,6 @@ 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,
@@ -24,7 +21,11 @@ import { IBuilderQuery, Query } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource } from 'types/common/queryBuilder';
 
-import { getCategoryName } from './RightContainer/dataFormatCategories';
+import {
+	dataTypeCategories,
+	getCategoryName,
+} from './RightContainer/dataFormatCategories';
+import { CategoryNames } from './RightContainer/types';
 
 export const getIsQueryModified = (
 	currentQuery: Query,
@@ -605,21 +606,14 @@ export const PANEL_TYPE_TO_QUERY_TYPES: Record<PANEL_TYPES, EQueryType[]> = {
  * the label and value for each format.
  */
 export const getCategorySelectOptionByName = (
-	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,
-			})) || []
-	);
-};
+	name?: CategoryNames | string,
+): DefaultOptionType[] =>
+	dataTypeCategories
+		.find((category) => category.name === name)
+		?.formats.map((format) => ({
+			label: format.name,
+			value: format.id,
+		})) || [];
 
 /**
  * Generates unit options based on the provided column unit.

frontend/src/container/PaginatedTraceFlamegraph/FLAMEGRAPH_CANVAS_POC_NOTES.md

@@ -1,88 +0,0 @@
-# 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,5 +1,3 @@
-// @ts-nocheck
-/* eslint-disable */
 import { useEffect, useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { Progress, Skeleton, Tooltip, Typography } from 'antd';
@@ -15,13 +13,8 @@ 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/SuccessV2';
-// import Success from './TraceFlamegraphStates/Success/SuccessV3_without_minimap_best';
-import Success from './TraceFlamegraphStates/Success/Success_zoom';
+import Success from './TraceFlamegraphStates/Success/Success';
 
-// 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 {
@@ -45,6 +38,7 @@ function TraceFlamegraph(props: ITraceFlamegraphProps): JSX.Element {
 	const [firstSpanAtFetchLevel, setFirstSpanAtFetchLevel] = useState<string>(
 		urlQuery.get('spanId') || '',
 	);
+
 	useEffect(() => {
 		setFirstSpanAtFetchLevel(urlQuery.get('spanId') || '');
 	}, [urlQuery]);
@@ -52,9 +46,6 @@ 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,11 +3,6 @@
 	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,6 +1,3 @@
-// @ts-nocheck
-/* eslint-disable */
-
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import {
@@ -26,12 +23,6 @@ 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;
@@ -44,14 +35,6 @@ 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 {
@@ -65,28 +48,6 @@ 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 => (
@@ -196,305 +157,16 @@ 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 ref={containerRef} className="trace-flamegraph trace-flamegraph-canvas">
-				<canvas ref={baseCanvasRef}></canvas>
+			<div className="trace-flamegraph">
+				<Virtuoso
+					ref={virtuosoRef}
+					className="trace-flamegraph-virtuoso"
+					data={spans}
+					itemContent={renderSpanLevel}
+					rangeChanged={handleRangeChanged}
+				/>
 			</div>
 			<TimelineV2
 				startTimestamp={traceMetadata.startTime}

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

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

frontend/src/hooks/trace/useGetTraceFlamegraph.tsx

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

pkg/flagger/configflagger/configflagger.go

@@ -3,7 +3,6 @@ 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"
@@ -33,10 +32,6 @@ 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
 		}
 
@@ -51,10 +46,6 @@ 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
 		}
 
@@ -69,10 +60,6 @@ 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
 		}
 
@@ -87,10 +74,6 @@ 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
 		}
 
@@ -105,10 +88,6 @@ 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,7 +5,6 @@ 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 {
@@ -26,14 +25,6 @@ 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,8 +120,6 @@ func FilterResponse(results []*qbtypes.QueryRangeResponse) []*qbtypes.QueryRange
 					}
 				}
 				resultData.Rows = filteredRows
-			case *qbtypes.ScalarData:
-				resultData.Data = filterScalarDataIPs(resultData.Columns, resultData.Data)
 			}
 
 			filteredData = append(filteredData, result)
@@ -147,39 +145,6 @@ 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,59 +117,6 @@ 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,22 +2,18 @@ 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
-	flagger flagger.Flagger
+	store types.UserStore
 }
 
-func NewGetter(store types.UserStore, flagger flagger.Flagger) user.Getter {
-	return &getter{store: store, flagger: flagger}
+func NewGetter(store types.UserStore) user.Getter {
+	return &getter{store: store}
 }
 
 func (module *getter) GetRootUserByOrgID(ctx context.Context, orgID valuer.UUID) (*types.User, error) {
@@ -30,14 +26,6 @@ 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,19 +1046,7 @@ func (r *ClickHouseReader) GetWaterfallSpansForTraceWithMetadata(ctx context.Con
 	}
 
 	processingPostCache := time.Now()
-	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)
-	}
+	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
@@ -1071,7 +1059,7 @@ func (r *ClickHouseReader) GetWaterfallSpansForTraceWithMetadata(ctx context.Con
 	}
 
 	response.Spans = selectedSpans
-	response.UncollapsedSpans = uncollapsedSpans // ignoring if all spans are returning
+	response.UncollapsedSpans = uncollapsedSpans
 	response.StartTimestampMillis = startTime / 1000000
 	response.EndTimestampMillis = endTime / 1000000
 	response.TotalSpansCount = totalSpans
@@ -1080,7 +1068,6 @@ func (r *ClickHouseReader) GetWaterfallSpansForTraceWithMetadata(ctx context.Con
 	response.RootServiceEntryPoint = rootServiceEntryPoint
 	response.ServiceNameToTotalDurationMap = serviceNameToTotalDurationMap
 	response.HasMissingSpans = hasMissingSpans
-	response.HasMore = !selectAllSpans
 	return response, nil
 }
 
@@ -1212,7 +1199,7 @@ func (r *ClickHouseReader) GetFlamegraphSpansForTrace(ctx context.Context, orgID
 			}
 		}
 
-		selectedSpans = tracedetail.GetAllSpansForFlamegraph(traceRoots, spanIdToSpanNodeMap)
+		selectedSpans = tracedetail.GetSelectedSpansForFlamegraph(traceRoots, spanIdToSpanNodeMap)
 		traceCache := model.GetFlamegraphSpansForTraceCache{
 			StartTime:     startTime,
 			EndTime:       endTime,
@@ -1229,20 +1216,12 @@ func (r *ClickHouseReader) GetFlamegraphSpansForTrace(ctx context.Context, orgID
 	}
 
 	processingPostCache := time.Now()
-	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))
+	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))
 
 	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,11 +7,9 @@ import (
 )
 
 var (
-	flamegraphSpanLevelLimit      float64 = 50
-	flamegraphSpanLimitPerLevel   int     = 1000
-	flamegraphSamplingBucketCount int     = 500
-
-	MaxLimitWithoutSampling uint = 120_000
+	SPAN_LIMIT_PER_REQUEST_FOR_FLAMEGRAPH float64 = 50
+	SPAN_LIMIT_PER_LEVEL                  int     = 100
+	TIMESTAMP_SAMPLING_BUCKET_COUNT       int     = 50
 )
 
 func ContainsFlamegraphSpan(slice []*model.FlamegraphSpan, item *model.FlamegraphSpan) bool {
@@ -54,8 +52,7 @@ func FindIndexForSelectedSpan(spans [][]*model.FlamegraphSpan, selectedSpanId st
 	return selectedSpanLevel
 }
 
-// GetAllSpansForFlamegraph groups all spans as per their level
-func GetAllSpansForFlamegraph(traceRoots []*model.FlamegraphSpan, spanIdToSpanNodeMap map[string]*model.FlamegraphSpan) [][]*model.FlamegraphSpan {
+func GetSelectedSpansForFlamegraph(traceRoots []*model.FlamegraphSpan, spanIdToSpanNodeMap map[string]*model.FlamegraphSpan) [][]*model.FlamegraphSpan {
 
 	var traceIdLevelledFlamegraph = map[string]map[int64][]*model.FlamegraphSpan{}
 	selectedSpans := [][]*model.FlamegraphSpan{}
@@ -103,7 +100,7 @@ func getLatencyAndTimestampBucketedSpans(spans []*model.FlamegraphSpan, selected
 	})
 
 	// pick the top 5 latency spans
-	for idx := range 100 {
+	for idx := range 5 {
 		sampledSpans = append(sampledSpans, spans[idx])
 	}
 
@@ -113,7 +110,6 @@ func getLatencyAndTimestampBucketedSpans(spans []*model.FlamegraphSpan, selected
 		for _idx, span := range spans {
 			if span.SpanID == selectedSpanID {
 				idx = _idx
-				break
 			}
 		}
 		if idx != -1 {
@@ -121,17 +117,17 @@ func getLatencyAndTimestampBucketedSpans(spans []*model.FlamegraphSpan, selected
 		}
 	}
 
-	bucketSize := (endTime - startTime) / uint64(flamegraphSamplingBucketCount)
+	bucketSize := (endTime - startTime) / uint64(TIMESTAMP_SAMPLING_BUCKET_COUNT)
 	if bucketSize == 0 {
 		bucketSize = 1
 	}
 
-	bucketedSpans := make([][]*model.FlamegraphSpan, flamegraphSamplingBucketCount)
+	bucketedSpans := make([][]*model.FlamegraphSpan, 50)
 
 	for _, span := range spans {
 		if span.TimeUnixNano >= startTime && span.TimeUnixNano <= endTime {
 			bucketIndex := int((span.TimeUnixNano - startTime) / bucketSize)
-			if bucketIndex >= 0 && bucketIndex < flamegraphSamplingBucketCount {
+			if bucketIndex >= 0 && bucketIndex < 50 {
 				bucketedSpans[bucketIndex] = append(bucketedSpans[bucketIndex], span)
 			}
 		}
@@ -160,8 +156,8 @@ func GetSelectedSpansForFlamegraphForRequest(selectedSpanID string, selectedSpan
 		selectedIndex = FindIndexForSelectedSpan(selectedSpans, selectedSpanID)
 	}
 
-	lowerLimit := selectedIndex - int(flamegraphSpanLevelLimit*0.4)
-	upperLimit := selectedIndex + int(flamegraphSpanLevelLimit*0.6)
+	lowerLimit := selectedIndex - int(SPAN_LIMIT_PER_REQUEST_FOR_FLAMEGRAPH*0.4)
+	upperLimit := selectedIndex + int(SPAN_LIMIT_PER_REQUEST_FOR_FLAMEGRAPH*0.6)
 
 	if lowerLimit < 0 {
 		upperLimit = upperLimit - lowerLimit
@@ -178,7 +174,7 @@ func GetSelectedSpansForFlamegraphForRequest(selectedSpanID string, selectedSpan
 	}
 
 	for i := lowerLimit; i < upperLimit; i++ {
-		if len(selectedSpans[i]) > flamegraphSpanLimitPerLevel {
+		if len(selectedSpans[i]) > SPAN_LIMIT_PER_LEVEL {
 			_spans := getLatencyAndTimestampBucketedSpans(selectedSpans[i], selectedSpanID, i == selectedIndex, startTime, endTime)
 			selectedSpansForRequest = append(selectedSpansForRequest, _spans)
 		} else {
@@ -188,12 +184,3 @@ 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,9 +9,6 @@ import (
 
 var (
 	SPAN_LIMIT_PER_REQUEST_FOR_WATERFALL float64 = 500
-
-	maxDepthForSelectedSpanChildren int  = 5
-	MaxLimitToSelectAllSpans        uint = 10_000
 )
 
 type Interval struct {
@@ -91,11 +88,8 @@ 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,
-	depthFromSelectedSpan int, isSelectedSpanIDUnCollapsed bool, selectAllSpan bool) ([]*model.Span, []string) {
-
+func traverseTrace(span *model.Span, uncollapsedSpans []string, level uint64, isPartOfPreOrder bool, hasSibling bool, selectedSpanId string) []*model.Span {
 	preOrderTraversal := []*model.Span{}
-	autoExpandedSpans := []string{}
 
 	// sort the children to maintain the order across requests
 	sort.Slice(span.Children, func(i, j int) bool {
@@ -132,40 +126,15 @@ 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 {
-		// 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)
+		_childTraversal := traverseTrace(child, uncollapsedSpans, level+1, isPartOfPreOrder && slices.Contains(uncollapsedSpans, span.SpanID), index != (len(span.Children)-1), selectedSpanId)
 		preOrderTraversal = append(preOrderTraversal, _childTraversal...)
-		autoExpandedSpans = append(autoExpandedSpans, _autoExpanded...)
 		nodeWithoutChildren.SubTreeNodeCount += child.SubTreeNodeCount + 1
 		span.SubTreeNodeCount += child.SubTreeNodeCount + 1
 	}
 
 	nodeWithoutChildren.SubTreeNodeCount += 1
-	return preOrderTraversal, autoExpandedSpans
+	return preOrderTraversal
 
 }
 
@@ -199,13 +168,7 @@ func GetSelectedSpans(uncollapsedSpans []string, selectedSpanID string, traceRoo
 			_, spansFromRootToNode := getPathFromRootToSelectedSpanId(rootNode, selectedSpanID, updatedUncollapsedSpans, isSelectedSpanIDUnCollapsed)
 			updatedUncollapsedSpans = append(updatedUncollapsedSpans, spansFromRootToNode...)
 
-			_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)
-				}
-			}
+			_preOrderTraversal := traverseTrace(rootNode, updatedUncollapsedSpans, 0, true, false, selectedSpanID)
 			_selectedSpanIndex := findIndexForSelectedSpanFromPreOrder(_preOrderTraversal, selectedSpanID)
 
 			if _selectedSpanIndex != -1 {
@@ -249,17 +212,3 @@ 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,14 +333,10 @@ 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"`
-	Limit           uint   `json:"limit"`
-	BoundaryStartTS uint64 `json:"boundaryStartTsMilli"`
-	BoundaryEndTS   uint64 `json:"boundarEndTsMilli"`
+	SelectedSpanID string `json:"selectedSpanId"`
 }
 
 type SpanFilterParams struct {

pkg/query-service/model/response.go

@@ -329,7 +329,6 @@ 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 {
@@ -337,7 +336,6 @@ 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,7 +17,3 @@ 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,11 +11,8 @@ 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"
@@ -44,13 +41,7 @@ func TestNewHandlers(t *testing.T) {
 	queryParser := queryparser.New(providerSettings)
 	require.NoError(t, err)
 	dashboardModule := impldashboard.NewModule(impldashboard.NewStore(sqlstore), providerSettings, nil, orgGetter, queryParser)
-
-	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)
+	modules := NewModules(sqlstore, tokenizer, emailing, providerSettings, orgGetter, alertmanager, nil, nil, nil, nil, nil, nil, nil, queryParser, Config{}, dashboardModule)
 
 	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,11 +11,8 @@ 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"
@@ -43,13 +40,7 @@ func TestNewModules(t *testing.T) {
 	queryParser := queryparser.New(providerSettings)
 	require.NoError(t, err)
 	dashboardModule := impldashboard.NewModule(impldashboard.NewStore(sqlstore), providerSettings, nil, orgGetter, queryParser)
-
-	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)
+	modules := NewModules(sqlstore, tokenizer, emailing, providerSettings, orgGetter, alertmanager, nil, nil, nil, nil, nil, nil, nil, queryParser, Config{}, dashboardModule)
 
 	reflectVal := reflect.ValueOf(modules)
 	for i := 0; i < reflectVal.NumField(); i++ {

pkg/signoz/provider_test.go

@@ -1,13 +1,11 @@
 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"
@@ -77,12 +75,7 @@ func TestNewProviderFactories(t *testing.T) {
 	})
 
 	assert.NotPanics(t, func() {
-		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)
+		userGetter := impluser.NewGetter(impluser.NewStore(sqlstoretest.New(sqlstore.Config{Provider: "sqlite"}, sqlmock.QueryMatcherEqual), instrumentationtest.New().ToProviderSettings()))
 		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), flagger)
+	userGetter := impluser.NewGetter(impluser.NewStore(sqlstore, providerSettings))
 
 	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, userGetter)
+	modules := NewModules(sqlstore, tokenizer, emailing, providerSettings, orgGetter, alertmanager, analytics, querier, telemetrystore, telemetryMetadataStore, authNs, authz, cache, queryParser, config, dashboard)
 
 	userService := impluser.NewService(providerSettings, impluser.NewStore(sqlstore, providerSettings), modules.User, orgGetter, authz, config.User.Root)