From ace2d8a3b35c0c7e2cf90212fb52f170ea67ab80 Mon Sep 17 00:00:00 2001
From: Rajat Dabade <rajat@signoz.io>
Date: Fri, 21 Jul 2023 16:17:31 +0530
Subject: [PATCH] Failing query range request due to top level operation
 dependency (#3182)

* fix: dependency check for top level operation

* refactor: one on one mapping

* fix: removed the unwanted if checks

---------

Co-authored-by: Palash Gupta <palashgdev@gmail.com>
---
 frontend/src/container/GridGraphLayout/Graph/index.tsx     | 7 +++++--
 .../MetricsApplication/Tabs/Overview/ServiceOverview.tsx   | 3 +++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/src/container/GridGraphLayout/Graph/index.tsx b/frontend/src/container/GridGraphLayout/Graph/index.tsx
index c0f6e9a5a9..401530329c 100644
--- a/frontend/src/container/GridGraphLayout/Graph/index.tsx
+++ b/frontend/src/container/GridGraphLayout/Graph/index.tsx
@@ -60,6 +60,7 @@ function GridCardGraph({
 	allowDelete,
 	allowClone,
 	allowEdit,
+	isQueryEnabled,
 }: GridCardGraphProps): JSX.Element {
 	const { ref: graphRef, inView: isGraphVisible } = useInView({
 		threshold: 0,
@@ -115,7 +116,7 @@ function GridCardGraph({
 				variables,
 			],
 			keepPreviousData: true,
-			enabled: isGraphVisible && !isEmptyWidget,
+			enabled: isGraphVisible && !isEmptyWidget && isQueryEnabled,
 			refetchOnMount: false,
 			onError: (error) => {
 				setErrorMessage(error.message);
@@ -287,7 +288,7 @@ function GridCardGraph({
 		);
 	}
 
-	if (prevChartDataSetRef?.labels === undefined && queryResponse.isLoading) {
+	if (queryResponse.status === 'loading' || queryResponse.status === 'idle') {
 		return (
 			<span ref={graphRef}>
 				{!isEmpty(widget) && prevChartDataSetRef?.labels ? (
@@ -399,6 +400,7 @@ interface GridCardGraphProps extends DispatchProps {
 	allowDelete?: boolean;
 	allowClone?: boolean;
 	allowEdit?: boolean;
+	isQueryEnabled?: boolean;
 }
 
 GridCardGraph.defaultProps = {
@@ -407,6 +409,7 @@ GridCardGraph.defaultProps = {
 	allowDelete: true,
 	allowClone: true,
 	allowEdit: true,
+	isQueryEnabled: true,
 };
 
 const mapDispatchToProps = (
diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx
index 3b1ad2b7d9..4fb5d4f024 100644
--- a/frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx
+++ b/frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx
@@ -49,6 +49,8 @@ function ServiceOverview({
 		[servicename, tagFilterItems, isSpanMetricEnable, topLevelOperationsRoute],
 	);
 
+	const isQueryEnabled = topLevelOperationsRoute.length > 0;
+
 	return (
 		<>
 			<Button
@@ -74,6 +76,7 @@ function ServiceOverview({
 						allowClone={false}
 						allowDelete={false}
 						allowEdit={false}
+						isQueryEnabled={isQueryEnabled}
 					/>
 				</GraphContainer>
 			</Card>