From f230fa23b6a47b105c4009db8e8de973d9e0c200 Mon Sep 17 00:00:00 2001
From: Vikrant Gupta <vikrant.thomso@gmail.com>
Date: Tue, 21 May 2024 13:36:55 +0530
Subject: [PATCH] fix: step interval not getting updated on time range change

---
 .../src/container/GridCardLayout/GridCard/index.tsx   | 11 +++++++++++
 frontend/src/container/GridCardLayout/styles.ts       |  3 ++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/frontend/src/container/GridCardLayout/GridCard/index.tsx b/frontend/src/container/GridCardLayout/GridCard/index.tsx
index 43f7768412..a553fe7241 100644
--- a/frontend/src/container/GridCardLayout/GridCard/index.tsx
+++ b/frontend/src/container/GridCardLayout/GridCard/index.tsx
@@ -8,6 +8,7 @@ import { useIntersectionObserver } from 'hooks/useIntersectionObserver';
 import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import getTimeString from 'lib/getTimeString';
+import { isEqual } from 'lodash-es';
 import isEmpty from 'lodash-es/isEmpty';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { memo, useEffect, useRef, useState } from 'react';
@@ -125,6 +126,16 @@ function GridCardGraph({
 		};
 	});
 
+	useEffect(() => {
+		if (!isEqual(updatedQuery, requestData.query)) {
+			setRequestData((prev) => ({
+				...prev,
+				query: updatedQuery,
+			}));
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [updatedQuery]);
+
 	const queryResponse = useGetQueryRange(
 		{
 			...requestData,
diff --git a/frontend/src/container/GridCardLayout/styles.ts b/frontend/src/container/GridCardLayout/styles.ts
index ee4144b9c5..fcfb5bd8d7 100644
--- a/frontend/src/container/GridCardLayout/styles.ts
+++ b/frontend/src/container/GridCardLayout/styles.ts
@@ -34,7 +34,8 @@ export const CardContainer = styled.div<Props>`
 			height: 100%;
 			display: flex;
 			justify-content: space-between;
-			background: var(--bg-ink-400);
+			background: ${({ isDarkMode }): string =>
+				isDarkMode ? 'var(--bg-ink-400)' : 'var(--bg-vanilla-300)'};
 			align-items: center;
 			overflow: hidden;
 		}