feat: added timerRef to cleanup

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

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

frontend/src/components/ValueGraph/index.tsx

@@ -40,7 +40,6 @@ function ValueGraph({
 	value,
 	rawValue,
 	thresholds,
-	yAxisUnit,
 }: ValueGraphProps): JSX.Element {
 	const { t } = useTranslation(['valueGraph']);
 	const containerRef = useRef<HTMLDivElement>(null);
@@ -88,7 +87,7 @@ function ValueGraph({
 	const {
 		threshold,
 		isConflictingThresholds,
-	} = getBackgroundColorAndThresholdCheck(thresholds, rawValue, yAxisUnit);
+	} = getBackgroundColorAndThresholdCheck(thresholds, rawValue);
 
 	return (
 		<div
@@ -156,7 +155,6 @@ interface ValueGraphProps {
 	value: string;
 	rawValue: number;
 	thresholds: ThresholdProps[];
-	yAxisUnit?: string;
 }
 
 export default ValueGraph;

frontend/src/components/ValueGraph/utils.ts

@@ -1,10 +1,9 @@
-import { evaluateThresholdWithConvertedValue } from 'container/GridTableComponent/utils';
+import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
 import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
 
-function doesValueSatisfyThreshold(
+function compareThreshold(
 	rawValue: number,
 	threshold: ThresholdProps,
-	yAxisUnit?: string,
 ): boolean {
 	if (
 		threshold.thresholdOperator === undefined ||
@@ -12,14 +11,31 @@ function doesValueSatisfyThreshold(
 	) {
 		return false;
 	}
+	switch (threshold.thresholdOperator) {
+		case '>':
+			return rawValue > threshold.thresholdValue;
+		case '>=':
+			return rawValue >= threshold.thresholdValue;
+		case '<':
+			return rawValue < threshold.thresholdValue;
+		case '<=':
+			return rawValue <= threshold.thresholdValue;
+		case '=':
+			return rawValue === threshold.thresholdValue;
+		default:
+			return false;
+	}
+}
 
-	return evaluateThresholdWithConvertedValue(
-		rawValue,
-		threshold.thresholdValue,
-		threshold.thresholdOperator,
-		threshold.thresholdUnit,
-		yAxisUnit,
-	);
+function extractNumbersFromString(inputString: string): number[] {
+	const regex = /[+-]?\d+(\.\d+)?/g;
+	const matches = inputString.match(regex);
+
+	if (matches) {
+		return matches.map(Number);
+	}
+
+	return [];
 }
 
 function getHighestPrecedenceThreshold(
@@ -47,13 +63,17 @@ function getHighestPrecedenceThreshold(
 export function getBackgroundColorAndThresholdCheck(
 	thresholds: ThresholdProps[],
 	rawValue: number,
-	yAxisUnit?: string,
 ): {
 	threshold: ThresholdProps;
 	isConflictingThresholds: boolean;
 } {
 	const matchingThresholds = thresholds.filter((threshold) =>
-		doesValueSatisfyThreshold(rawValue, threshold, yAxisUnit),
+		compareThreshold(
+			extractNumbersFromString(
+				getYAxisFormattedValue(rawValue.toString(), threshold.thresholdUnit || ''),
+			)[0],
+			threshold,
+		),
 	);
 
 	if (matchingThresholds.length === 0) {

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/GridTableComponent/utils.ts

@@ -49,7 +49,7 @@ function evaluateCondition(
  * @param columnUnit - The current unit of the value.
  * @returns A boolean indicating whether the value meets the threshold condition.
  */
-export function evaluateThresholdWithConvertedValue(
+function evaluateThresholdWithConvertedValue(
 	value: number,
 	thresholdValue: number,
 	thresholdOperator?: string,

frontend/src/container/GridValueComponent/index.tsx

@@ -99,7 +99,6 @@ function GridValueComponent({
 				<ValueGraph
 					thresholds={thresholds || []}
 					rawValue={value}
-					yAxisUnit={yAxisUnit}
 					value={
 						yAxisUnit
 							? getYAxisFormattedValue(

frontend/src/container/LogDetailedView/Overview.tsx

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

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

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

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

@@ -1,7 +1,3 @@
-import { YAxisCategoryNames } from 'components/YAxisUnitSelector/constants';
-import { YAxisSource } from 'components/YAxisUnitSelector/types';
-import { getYAxisCategories } from 'components/YAxisUnitSelector/utils';
-import { convertValue } from 'lib/getConvertedValue';
 import { flattenDeep } from 'lodash-es';
 
 import {
@@ -443,6 +439,131 @@ export const flattenedCategories = flattenDeep(
 	dataTypeCategories.map((category) => category.formats),
 );
 
+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,
@@ -452,16 +573,14 @@ export function convertUnit(
 	let fromUnit: string | undefined;
 	let toUnit: string | undefined;
 
-	const categories = getYAxisCategories(YAxisSource.DASHBOARDS);
-
 	// Finds the category that contains the specified units and extracts fromUnit and toUnit using array methods
-	const category = categories.find((category) =>
-		category.units.some((unit) => {
-			if (unit.id === fromUnitId) {
-				fromUnit = unit.id;
+	const category = dataTypeCategories.find((category) =>
+		category.formats.some((format) => {
+			if (format.id === fromUnitId) {
+				fromUnit = format.id;
 			}
-			if (unit.id === toUnitId) {
-				toUnit = unit.id;
+			if (format.id === toUnitId) {
+				toUnit = format.id;
 			}
 			return fromUnit && toUnit; // Break out early if both units are found
 		}),
@@ -471,16 +590,24 @@ export function convertUnit(
 		return null;
 	} // Return null if category or units are not found
 
-	// Convert the value from the fromUnit to the toUnit
-	return convertValue(value, fromUnit, toUnit);
+	// 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
+
+	return value * conversionFactor;
 }
 
 // Function to get the category name for a given unit ID
-export const getCategoryName = (unitId: string): YAxisCategoryNames | null => {
+export const getCategoryName = (unitId: string): CategoryNames | null => {
 	// Finds the category that contains the specified unit ID
-	const categories = getYAxisCategories(YAxisSource.DASHBOARDS);
-	const foundCategory = categories.find((category) =>
-		category.units.some((unit) => unit.id === unitId),
+	const foundCategory = dataTypeCategories.find((category) =>
+		category.formats.some((format) => format.id === unitId),
 	);
-	return foundCategory ? foundCategory.name : null;
+	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/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,
 ];