fix: step interval not getting updated on time range change

SigNoz · May 21, 2024 · f230fa2 · f230fa2
1 parent de497bf
commit f230fa2
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git 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
@@ -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;
 		}