From 088aeb4370dcf4cd3e3e7ac1ee05e2170100bfe8 Mon Sep 17 00:00:00 2001
From: SagarRajput-7 <sagar@signoz.io>
Date: Thu, 3 Oct 2024 18:48:25 +0530
Subject: [PATCH] fix: cleanup and multiple threshold and state change handling

---
 frontend/src/container/GridTableComponent/utils.ts  |  5 -----
 .../RightContainer/Threshold/Threshold.tsx          | 13 ++++++++++---
 .../RightContainer/Threshold/ThresholdSelector.tsx  |  2 +-
 .../NewWidget/RightContainer/Threshold/types.ts     |  2 +-
 .../RightContainer/dataFormatCategories.ts          |  2 --
 5 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/frontend/src/container/GridTableComponent/utils.ts b/frontend/src/container/GridTableComponent/utils.ts
index d0850e52e8..09203c5b3e 100644
--- a/frontend/src/container/GridTableComponent/utils.ts
+++ b/frontend/src/container/GridTableComponent/utils.ts
@@ -65,11 +65,6 @@ export function findMatchingThreshold(
 		if (
 			threshold.thresholdValue !== undefined &&
 			threshold.thresholdTableOptions === label &&
-			// evaluateCondition(
-			// 	threshold.thresholdOperator,
-			// 	value,
-			// 	threshold.thresholdValue,
-			// )
 			evaluateThresholdWithConvertedValue(
 				value,
 				threshold?.thresholdValue,
diff --git a/frontend/src/container/NewWidget/RightContainer/Threshold/Threshold.tsx b/frontend/src/container/NewWidget/RightContainer/Threshold/Threshold.tsx
index 6f2a31ff19..ac13c20603 100644
--- a/frontend/src/container/NewWidget/RightContainer/Threshold/Threshold.tsx
+++ b/frontend/src/container/NewWidget/RightContainer/Threshold/Threshold.tsx
@@ -5,7 +5,7 @@ import { Button, Input, InputNumber, Select, Space, Typography } from 'antd';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { Check, Pencil, Trash2, X } from 'lucide-react';
-import { useRef, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 import { useDrag, useDrop, XYCoord } from 'react-dnd';
 
 import {
@@ -194,6 +194,13 @@ function Threshold({
 
 	const allowDragAndDrop = panelTypeVsDragAndDrop[selectedGraph];
 
+	const isInvalidUnitComparison = useMemo(
+		() =>
+			unit !== 'none' &&
+			convertUnit(value, unit, columnUnits?.[tableSelectedOption]) === null,
+		[unit, value, columnUnits, tableSelectedOption],
+	);
+
 	return (
 		<div
 			ref={allowDragAndDrop ? ref : null}
@@ -341,10 +348,10 @@ function Threshold({
 						</>
 					)}
 				</div>
-				{unit !== 'none' && convertUnit(value, unit, columnUnits) === null && (
+				{isInvalidUnitComparison && (
 					<Typography.Text className="invalid-unit">
 						Threshold unit ({unit}) is not valid in comparison with the column unit (
-						{columnUnits || 'none'})
+						{columnUnits?.[tableSelectedOption] || 'none'})
 					</Typography.Text>
 				)}
 				{isEditMode && (
diff --git a/frontend/src/container/NewWidget/RightContainer/Threshold/ThresholdSelector.tsx b/frontend/src/container/NewWidget/RightContainer/Threshold/ThresholdSelector.tsx
index 96f2dd0841..83cf8b50f6 100644
--- a/frontend/src/container/NewWidget/RightContainer/Threshold/ThresholdSelector.tsx
+++ b/frontend/src/container/NewWidget/RightContainer/Threshold/ThresholdSelector.tsx
@@ -108,7 +108,7 @@ function ThresholdSelector({
 						thresholdLabel={threshold.thresholdLabel}
 						tableOptions={tableOptions}
 						thresholdTableOptions={threshold.thresholdTableOptions}
-						columnUnits={columnUnits[threshold.thresholdTableOptions || '']}
+						columnUnits={columnUnits}
 					/>
 				))}
 			</div>
diff --git a/frontend/src/container/NewWidget/RightContainer/Threshold/types.ts b/frontend/src/container/NewWidget/RightContainer/Threshold/types.ts
index 96049a36d0..6f09f2136e 100644
--- a/frontend/src/container/NewWidget/RightContainer/Threshold/types.ts
+++ b/frontend/src/container/NewWidget/RightContainer/Threshold/types.ts
@@ -20,7 +20,7 @@ export type ThresholdProps = {
 	moveThreshold: (dragIndex: number, hoverIndex: number) => void;
 	selectedGraph: PANEL_TYPES;
 	tableOptions?: Array<{ value: string; label: string }>;
-	columnUnits?: string;
+	columnUnits?: ColumnUnit;
 };
 
 export type ShowCaseValueProps = {
diff --git a/frontend/src/container/NewWidget/RightContainer/dataFormatCategories.ts b/frontend/src/container/NewWidget/RightContainer/dataFormatCategories.ts
index e7b85f600c..d9359bfa2f 100644
--- a/frontend/src/container/NewWidget/RightContainer/dataFormatCategories.ts
+++ b/frontend/src/container/NewWidget/RightContainer/dataFormatCategories.ts
@@ -578,8 +578,6 @@ export function convertUnit(
 		?.id;
 	const toUnit = category.formats.find((format) => format.id === toUnitId)?.id;
 
-	console.log(fromUnit, toUnit);
-
 	if (!fromUnit || !toUnit) return null;
 
 	const conversionFactor = getConversionFactor(