From df2844ea7451804885826b93a92a5513f58ec760 Mon Sep 17 00:00:00 2001
From: Vikrant Gupta <vikrant.thomso@gmail.com>
Date: Tue, 24 Sep 2024 09:08:24 +0530
Subject: [PATCH] fix: the tag key flickering when moving from traces to logs
 (#6054)

---
 .../QueryBuilderSearchV2.styles.scss             | 16 ++++++++--------
 .../QueryBuilderSearchV2.tsx                     |  5 +++--
 .../QueryBuilderSearchV2/Suggestions.styles.scss |  8 ++++----
 3 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.styles.scss b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.styles.scss
index 7db18f400e..624546fed5 100644
--- a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.styles.scss
+++ b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.styles.scss
@@ -235,16 +235,16 @@
 			}
 
 			&.resource {
-				border: 1px solid rgba(242, 71, 105, 0.2);
+				border: 1px solid #4bcff920;
 
 				.ant-typography {
-					color: var(--bg-sakura-400);
-					background: rgba(245, 108, 135, 0.1);
+					color: var(--bg-aqua-400);
+					background: #4bcff910;
 					font-size: 14px;
 				}
 
 				.ant-tag-close-icon {
-					background: rgba(245, 108, 135, 0.1);
+					background: #4bcff910;
 				}
 			}
 			&.tag {
@@ -343,15 +343,15 @@
 				}
 
 				&.resource {
-					border: 1px solid rgba(242, 71, 105, 0.2);
+					border: 1px solid #4bcff920;
 
 					.ant-typography {
-						color: var(--bg-sakura-400);
-						background: rgba(245, 108, 135, 0.1);
+						color: var(--bg-aqua-400);
+						background: #4bcff910;
 					}
 
 					.ant-tag-close-icon {
-						background: rgba(245, 108, 135, 0.1);
+						background: #4bcff910;
 					}
 				}
 				&.tag {
diff --git a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.tsx b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.tsx
index 3ddeef85bc..3d3fca4654 100644
--- a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.tsx
+++ b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.tsx
@@ -729,7 +729,8 @@ function QueryBuilderSearchV2(
 	}, [tags]);
 
 	useEffect(() => {
-		if (!isEqual(query.filters.items, tags)) {
+		// convert the query and tags to same format before comparison
+		if (!isEqual(getInitTags(query), tags)) {
 			setTags(getInitTags(query));
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -769,7 +770,7 @@ function QueryBuilderSearchV2(
 	);
 
 	const queryTags = useMemo(
-		() => tags.map((tag) => `${tag.key.key} ${tag.op} ${tag.value}`),
+		() => tags.map((tag) => `${tag.key?.key} ${tag.op} ${tag.value}`),
 		[tags],
 	);
 
diff --git a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/Suggestions.styles.scss b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/Suggestions.styles.scss
index 9fb2f50e55..153f32e5ee 100644
--- a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/Suggestions.styles.scss
+++ b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/Suggestions.styles.scss
@@ -77,14 +77,14 @@
 
 				&.resource {
 					border-radius: 50px;
-					background: rgba(245, 108, 135, 0.1) !important;
-					color: var(--bg-sakura-400) !important;
+					background: #4bcff910 !important;
+					color: var(--bg-aqua-400) !important;
 
 					.dot {
-						background-color: var(--bg-sakura-400);
+						background-color: var(--bg-aqua-400);
 					}
 					.text {
-						color: var(--bg-sakura-400);
+						color: var(--bg-aqua-400);
 						font-family: Inter;
 						font-size: 12px;
 						font-style: normal;