From 9844dcdfb785a50daaec4fef42330ee4079b3056 Mon Sep 17 00:00:00 2001
From: SagarRajput-7 <162284829+SagarRajput-7@users.noreply.github.com>
Date: Wed, 10 Jul 2024 12:43:39 +0530
Subject: [PATCH] fix: added logic to keep sections uncollapsed for all
 filtered items (#5371)

---
 .../pages/TracesExplorer/Filter/Section.tsx   | 36 +++++++++++++++----
 1 file changed, 30 insertions(+), 6 deletions(-)

diff --git a/frontend/src/pages/TracesExplorer/Filter/Section.tsx b/frontend/src/pages/TracesExplorer/Filter/Section.tsx
index c95f8a77e0..8ce2007ef7 100644
--- a/frontend/src/pages/TracesExplorer/Filter/Section.tsx
+++ b/frontend/src/pages/TracesExplorer/Filter/Section.tsx
@@ -1,7 +1,14 @@
 import './Filter.styles.scss';
 
 import { Button, Collapse, Divider } from 'antd';
-import { Dispatch, MouseEvent, SetStateAction } from 'react';
+import {
+	Dispatch,
+	MouseEvent,
+	SetStateAction,
+	useEffect,
+	useMemo,
+	useState,
+} from 'react';
 
 import { DurationSection } from './DurationSection';
 import {
@@ -18,9 +25,29 @@ interface SectionProps {
 	setSelectedFilters: Dispatch<SetStateAction<FilterType | undefined>>;
 	handleRun: (props?: HandleRunProps) => void;
 }
+
 export function Section(props: SectionProps): JSX.Element {
 	const { panelName, setSelectedFilters, selectedFilters, handleRun } = props;
 
+	const defaultOpenPanes = useMemo(
+		() =>
+			Array.from(
+				new Set([
+					...Object.keys(selectedFilters || {}),
+					'hasError',
+					'durationNano',
+					'serviceName',
+				]),
+			),
+		[selectedFilters],
+	);
+
+	const [activeKeys, setActiveKeys] = useState<string[]>(defaultOpenPanes);
+
+	useEffect(() => {
+		setActiveKeys(defaultOpenPanes);
+	}, [defaultOpenPanes]);
+
 	const onClearHandler = (e: MouseEvent): void => {
 		e.stopPropagation();
 		e.preventDefault();
@@ -41,11 +68,8 @@ export function Section(props: SectionProps): JSX.Element {
 				<Collapse
 					bordered={false}
 					className="collapseContainer"
-					defaultActiveKey={
-						['hasError', 'durationNano', 'serviceName'].includes(panelName)
-							? panelName
-							: undefined
-					}
+					activeKey={activeKeys}
+					onChange={(keys): void => setActiveKeys(keys as string[])}
 					items={[
 						panelName === 'durationNano'
 							? {