fix: resolved comments and some refactoring

frontend/src/container/GridTableComponent/utils.ts

@@ -31,6 +31,18 @@ function evaluateCondition(
 	}
 }
 
+/**
+ * Evaluates whether a given value meets a specified threshold condition.
+ * It first converts the value to the appropriate unit if a threshold unit is provided,
+ * and then checks the condition using the specified operator.
+ *
+ * @param value - The value to be evaluated.
+ * @param thresholdValue - The threshold value to compare against.
+ * @param thresholdOperator - The operator used for comparison (e.g., '>', '<', '==').
+ * @param thresholdUnit - The unit to which the value should be converted.
+ * @param columnUnits - The current unit of the value.
+ * @returns A boolean indicating whether the value meets the threshold condition.
+ */
 function evaluateThresholdWithConvertedValue(
 	value: number,
 	thresholdValue: number,

frontend/src/container/NewWidget/RightContainer/Threshold/Threshold.styles.scss

@@ -300,7 +300,7 @@
 
 		.invalid-unit {
 			color: var(--bg-vanilla-400);
-			font-family: 'Space Mono';
+			font-family: 'Giest Mono';
 			font-size: 11px;
 			font-style: normal;
 			font-weight: 400;

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

@@ -3,6 +3,7 @@ import './Threshold.styles.scss';
 
 import { Button, Input, InputNumber, Select, Space, Typography } from 'antd';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import { unitOptions } from 'container/NewWidget/utils';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { Check, Pencil, Trash2, X } from 'lucide-react';
 import { useMemo, useRef, useState } from 'react';
@@ -12,7 +13,6 @@ import {
 	operatorOptions,
 	panelTypeVsDragAndDrop,
 	showAsOptions,
-	unitOptions,
 } from '../constants';
 import { convertUnit } from '../dataFormatCategories';
 import ColorSelector from './ColorSelector';

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

@@ -1,10 +1,5 @@
 import { DefaultOptionType } from 'antd/es/select';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { categoryToSupport } from 'container/QueryBuilder/filters/BuilderUnitsFilter/config';
-import { isEmpty } from 'lodash-es';
-
-import { dataTypeCategories, getCategoryName } from './dataFormatCategories';
-import { CategoryNames } from './types';
 
 export const operatorOptions: DefaultOptionType[] = [
 	{ value: '>', label: '>' },
@@ -13,32 +8,6 @@ export const operatorOptions: DefaultOptionType[] = [
 	{ value: '<=', label: '<=' },
 ];
 
-export const getCategorySelectOptionByName = (
-	name?: CategoryNames | string,
-): DefaultOptionType[] =>
-	dataTypeCategories
-		.find((category) => category.name === name)
-		?.formats.map((format) => ({
-			label: format.name,
-			value: format.id,
-		})) || [];
-
-export const unitOptions = (columnUnit: string): DefaultOptionType[] => {
-	const category = getCategoryName(columnUnit);
-	if (isEmpty(category)) {
-		return categoryToSupport.map((category) => ({
-			label: category,
-			options: getCategorySelectOptionByName(category),
-		}));
-	}
-	return categoryToSupport
-		.filter((supportedCategory) => supportedCategory === category)
-		.map((filteredCategory) => ({
-			label: filteredCategory,
-			options: getCategorySelectOptionByName(filteredCategory),
-		}));
-};
-
 export const showAsOptions: DefaultOptionType[] = [
 	{ value: 'Text', label: 'Text' },
 	{ value: 'Background', label: 'Background' },

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

@@ -445,6 +445,7 @@ type ConversionFactors = {
 	};
 };
 
+// Object containing conversion factors for various categories and formats
 const conversionFactors: ConversionFactors = {
 	[CategoryNames.Time]: {
 		[TimeFormats.Hertz]: 1,
@@ -539,14 +540,16 @@ const conversionFactors: ConversionFactors = {
 	},
 };
 
+// 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;
+		return null; // Returns null if the category does not exist
 	}
 	const fromFactor = categoryFactors[fromUnit];
 	const toFactor = categoryFactors[toUnit];
@@ -556,16 +559,18 @@ function getConversionFactor(
 		fromFactor === null ||
 		toFactor === null
 	) {
-		return null;
+		return null; // Returns null if either unit does not exist or is not convertible
 	}
-	return fromFactor / toFactor;
+	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 {
+	// Finds the category that contains the specified units
 	const category = dataTypeCategories.find((category) =>
 		category.formats.some(
 			(format) => format.id === fromUnitId || format.id === toUnitId,
@@ -580,17 +585,20 @@ export function convertUnit(
 
 	if (!fromUnit || !toUnit) return null;
 
+	// Gets the conversion factor for the specified units
 	const conversionFactor = getConversionFactor(
 		fromUnit,
 		toUnit,
 		category.name as any,
 	);
-	if (conversionFactor === null) return null;
+	if (conversionFactor === null) return null; // Returns 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): CategoryNames | null => {
+	// Finds the category that contains the specified unit ID
 	const foundCategory = dataTypeCategories.find((category) =>
 		category.formats.some((format) => format.id === unitId),
 	);

frontend/src/container/NewWidget/utils.ts

@@ -1,3 +1,4 @@
+import { DefaultOptionType } from 'antd/es/select';
 import { omitIdFromQuery } from 'components/ExplorerCard/utils';
 import {
 	initialQueryBuilderFormValuesMap,
@@ -8,12 +9,19 @@ import {
 	listViewInitialTraceQuery,
 	PANEL_TYPES_INITIAL_QUERY,
 } from 'container/NewDashboard/ComponentsSlider/constants';
-import { cloneDeep, isEqual, set, unset } from 'lodash-es';
+import { categoryToSupport } from 'container/QueryBuilder/filters/BuilderUnitsFilter/config';
+import { cloneDeep, isEmpty, isEqual, set, unset } from 'lodash-es';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { IBuilderQuery, Query } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource } from 'types/common/queryBuilder';
 
+import {
+	dataTypeCategories,
+	getCategoryName,
+} from './RightContainer/dataFormatCategories';
+import { CategoryNames } from './RightContainer/types';
+
 export const getIsQueryModified = (
 	currentQuery: Query,
 	stagedQuery: Query | null,
@@ -529,3 +537,41 @@ export const PANEL_TYPE_TO_QUERY_TYPES: Record<PANEL_TYPES, EQueryType[]> = {
 		EQueryType.PROM,
 	],
 };
+
+/**
+ * Retrieves a list of category select options based on the provided category name.
+ * If the category is found, it maps the formats to an array of objects containing
+ * the label and value for each format.
+ */
+export const getCategorySelectOptionByName = (
+	name?: CategoryNames | string,
+): DefaultOptionType[] =>
+	dataTypeCategories
+		.find((category) => category.name === name)
+		?.formats.map((format) => ({
+			label: format.name,
+			value: format.id,
+		})) || [];
+
+/**
+ * Generates unit options based on the provided column unit.
+ * It first retrieves the category name associated with the column unit.
+ * If the category is empty, it maps all supported categories to their respective
+ * select options. If a valid category is found, it filters the supported categories
+ * to return only the options for the matched category.
+ */
+export const unitOptions = (columnUnit: string): DefaultOptionType[] => {
+	const category = getCategoryName(columnUnit);
+	if (isEmpty(category)) {
+		return categoryToSupport.map((category) => ({
+			label: category,
+			options: getCategorySelectOptionByName(category),
+		}));
+	}
+	return categoryToSupport
+		.filter((supportedCategory) => supportedCategory === category)
+		.map((filteredCategory) => ({
+			label: filteredCategory,
+			options: getCategorySelectOptionByName(filteredCategory),
+		}));
+};