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>

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();
 

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 {

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}

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,

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')}

frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx

@@ -88,6 +88,7 @@ function ServiceOverview({
 						widget={latencyWidget}
 						onClickHandler={handleGraphClick('Service')}
 						isQueryEnabled={isQueryEnabled}
+						filterNaN
 					/>
 				</GraphContainer>
 			</Card>

frontend/src/container/MetricsApplication/Tabs/Overview/TopLevelOperations.tsx

@@ -27,6 +27,7 @@ function TopLevelOperation({
 			) : (
 				<GraphContainer>
 					<Graph
+						filterNaN
 						name={name}
 						widget={widget}
 						onClickHandler={handleGraphClick(opName)}

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) {