From 7e87df2d69eab9f5aa1dc4ddfbbd4fb118c4e1d7 Mon Sep 17 00:00:00 2001
From: Palash Gupta <palashgdev@gmail.com>
Date: Tue, 21 Nov 2023 15:27:06 +0530
Subject: [PATCH] feat: Nan filtering is added  (#4000)

* fix: handle nan in uplot

* feat: filter for nan is added for metrics

* feat: filter for nan is added for metrics

---------

Co-authored-by: Vishal Sharma <makeavish786@gmail.com>
---
 .../GridCardLayout/GridCard/index.tsx          |  7 ++++++-
 .../container/GridCardLayout/GridCard/types.ts |  1 +
 .../MetricsApplication/Tabs/DBCall.tsx         |  2 ++
 .../MetricsApplication/Tabs/External.tsx       |  4 ++++
 .../Tabs/Overview/ApDex/ApDexMetrics.tsx       |  1 +
 .../Tabs/Overview/ServiceOverview.tsx          |  1 +
 .../Tabs/Overview/TopLevelOperations.tsx       |  1 +
 .../lib/uPlotLib/utils/getUplotChartData.ts    | 18 ++++++++++++++++--
 8 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/frontend/src/container/GridCardLayout/GridCard/index.tsx b/frontend/src/container/GridCardLayout/GridCard/index.tsx
index 7975f4279e..fe8caf6971 100644
--- a/frontend/src/container/GridCardLayout/GridCard/index.tsx
+++ b/frontend/src/container/GridCardLayout/GridCard/index.tsx
@@ -28,6 +28,7 @@ function GridCardGraph({
 	isQueryEnabled,
 	threshold,
 	variables,
+	filterNaN,
 }: GridCardGraphProps): JSX.Element {
 	const dispatch = useDispatch();
 	const [errorMessage, setErrorMessage] = useState<string>();
@@ -89,7 +90,11 @@ function GridCardGraph({
 
 	const containerDimensions = useResizeObserver(graphRef);
 
-	const chartData = getUPlotChartData(queryResponse?.data?.payload);
+	const chartData = getUPlotChartData(
+		queryResponse?.data?.payload,
+		undefined,
+		filterNaN,
+	);
 
 	const isDarkMode = useIsDarkMode();
 
diff --git a/frontend/src/container/GridCardLayout/GridCard/types.ts b/frontend/src/container/GridCardLayout/GridCard/types.ts
index ca68ea8540..155c8208a2 100644
--- a/frontend/src/container/GridCardLayout/GridCard/types.ts
+++ b/frontend/src/container/GridCardLayout/GridCard/types.ts
@@ -39,6 +39,7 @@ export interface GridCardGraphProps {
 	headerMenuList?: WidgetGraphComponentProps['headerMenuList'];
 	isQueryEnabled: boolean;
 	variables?: Dashboard['data']['variables'];
+	filterNaN?: boolean;
 }
 
 export interface GetGraphVisibilityStateOnLegendClickProps {
diff --git a/frontend/src/container/MetricsApplication/Tabs/DBCall.tsx b/frontend/src/container/MetricsApplication/Tabs/DBCall.tsx
index 13d954de4b..84af0baa0e 100644
--- a/frontend/src/container/MetricsApplication/Tabs/DBCall.tsx
+++ b/frontend/src/container/MetricsApplication/Tabs/DBCall.tsx
@@ -107,6 +107,7 @@ function DBCall(): JSX.Element {
 				<Card data-testid="database_call_rps">
 					<GraphContainer>
 						<Graph
+							filterNaN
 							name="database_call_rps"
 							widget={databaseCallsRPSWidget}
 							onClickHandler={(xValue, yValue, mouseX, mouseY): void => {
@@ -140,6 +141,7 @@ function DBCall(): JSX.Element {
 				<Card data-testid="database_call_avg_duration">
 					<GraphContainer>
 						<Graph
+							filterNaN
 							name="database_call_avg_duration"
 							widget={databaseCallsAverageDurationWidget}
 							headerMenuList={MENU_ITEMS}
diff --git a/frontend/src/container/MetricsApplication/Tabs/External.tsx b/frontend/src/container/MetricsApplication/Tabs/External.tsx
index c02f4f1ce7..a344ad9c1d 100644
--- a/frontend/src/container/MetricsApplication/Tabs/External.tsx
+++ b/frontend/src/container/MetricsApplication/Tabs/External.tsx
@@ -148,6 +148,7 @@ function External(): JSX.Element {
 					<Card data-testid="external_call_error_percentage">
 						<GraphContainer>
 							<Graph
+								filterNaN
 								headerMenuList={MENU_ITEMS}
 								name="external_call_error_percentage"
 								widget={externalCallErrorWidget}
@@ -183,6 +184,7 @@ function External(): JSX.Element {
 					<Card data-testid="external_call_duration">
 						<GraphContainer>
 							<Graph
+								filterNaN
 								name="external_call_duration"
 								headerMenuList={MENU_ITEMS}
 								widget={externalCallDurationWidget}
@@ -219,6 +221,7 @@ function External(): JSX.Element {
 					<Card data-testid="external_call_rps_by_address">
 						<GraphContainer>
 							<Graph
+								filterNaN
 								name="external_call_rps_by_address"
 								widget={externalCallRPSWidget}
 								headerMenuList={MENU_ITEMS}
@@ -257,6 +260,7 @@ function External(): JSX.Element {
 								name="external_call_duration_by_address"
 								widget={externalCallDurationAddressWidget}
 								headerMenuList={MENU_ITEMS}
+								filterNaN
 								onClickHandler={(xValue, yValue, mouseX, mouseY): void => {
 									onGraphClickHandler(setSelectedTimeStamp)(
 										xValue,
diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexMetrics.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexMetrics.tsx
index ac4ae1e03b..f3578e8be2 100644
--- a/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexMetrics.tsx
+++ b/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexMetrics.tsx
@@ -84,6 +84,7 @@ function ApDexMetrics({
 	return (
 		<Graph
 			name="apdex"
+			filterNaN
 			widget={apDexMetricsWidget}
 			onDragSelect={onDragSelect}
 			onClickHandler={handleGraphClick('ApDex')}
diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx
index b97a631b55..45cc23399e 100644
--- a/frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx
+++ b/frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx
@@ -88,6 +88,7 @@ function ServiceOverview({
 						widget={latencyWidget}
 						onClickHandler={handleGraphClick('Service')}
 						isQueryEnabled={isQueryEnabled}
+						filterNaN
 					/>
 				</GraphContainer>
 			</Card>
diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview/TopLevelOperations.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview/TopLevelOperations.tsx
index 1dbbf2ee98..0d87ba5356 100644
--- a/frontend/src/container/MetricsApplication/Tabs/Overview/TopLevelOperations.tsx
+++ b/frontend/src/container/MetricsApplication/Tabs/Overview/TopLevelOperations.tsx
@@ -27,6 +27,7 @@ function TopLevelOperation({
 			) : (
 				<GraphContainer>
 					<Graph
+						filterNaN
 						name={name}
 						widget={widget}
 						onClickHandler={handleGraphClick(opName)}
diff --git a/frontend/src/lib/uPlotLib/utils/getUplotChartData.ts b/frontend/src/lib/uPlotLib/utils/getUplotChartData.ts
index fe9cec3350..d0264517c7 100644
--- a/frontend/src/lib/uPlotLib/utils/getUplotChartData.ts
+++ b/frontend/src/lib/uPlotLib/utils/getUplotChartData.ts
@@ -1,8 +1,17 @@
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 
+function filterIsNan(
+	value: [number, string],
+	isFilterNaNEnabled?: boolean,
+): boolean {
+	const val = value[1];
+	return isFilterNaNEnabled ? val !== 'NaN' : true;
+}
+
 export const getUPlotChartData = (
 	apiResponse?: MetricRangePayloadProps,
 	fillSpans?: boolean,
+	filterNaN?: boolean,
 ): uPlot.AlignedData => {
 	const seriesList = apiResponse?.data?.result || [];
 	const uPlotData: uPlot.AlignedData = [];
@@ -19,7 +28,9 @@ export const getUPlotChartData = (
 		seriesList[index]?.values?.sort((a, b) => a[0] - b[0]);
 	}
 
-	const timestampArr = xSeries?.values?.map((v) => v[0]);
+	const timestampArr = xSeries?.values
+		?.filter((response) => filterIsNan(response, filterNaN))
+		.map((v) => v[0]);
 
 	const uplotDataFormatArr = new Float64Array(timestampArr);
 
@@ -30,7 +41,10 @@ export const getUPlotChartData = (
 
 	// for each series, push the values
 	seriesList.forEach((series) => {
-		const seriesData = series?.values?.map((v) => parseFloat(v[1])) || [];
+		const seriesData =
+			series?.values
+				?.filter((response) => filterIsNan(response, filterNaN))
+				.map((v) => parseFloat(v[1])) || [];
 
 		// fill rest of the value with zero
 		if (seriesData.length < numberOfTimestamps && fillSpans) {