From 5226f60834a48ecde89c2d3b719358afdadf782b Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Wed, 3 Jul 2024 13:39:12 +0200
Subject: [PATCH] change(ui): expand the first series on adding a fitler

---
 .../Dashboard/components/FilterSeries/FilterSeries.tsx | 10 +++++++++-
 .../Dashboard/components/WidgetForm/WidgetFormNew.tsx  |  1 -
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx b/frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx
index 61c8ddb3a..91799d5d5 100644
--- a/frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx
+++ b/frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx
@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, { useEffect, useState } from 'react';
 import FilterList from 'Shared/Filters/FilterList';
 import SeriesName from './SeriesName';
 import cn from 'classnames';
@@ -93,6 +93,14 @@ function FilterSeries(props: Props) {
     } = props;
     const [expanded, setExpanded] = useState(!expandable);
     const {series, seriesIndex} = props;
+    const [prevLength, setPrevLength] = useState(0);
+
+    useEffect(() => {
+        if (series.filter.filters.length === 1 && prevLength === 0 && seriesIndex === 0) {
+            setExpanded(true);
+        }
+        setPrevLength(series.filter.filters.length);
+    }, [series.filter.filters.length]);
 
     const onUpdateFilter = (filterIndex: any, filter: any) => {
         series.filter.updateFilter(filterIndex, filter);
diff --git a/frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx b/frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx
index d3482069a..b7d246231 100644
--- a/frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx
@@ -18,7 +18,6 @@ import { metricOf } from 'App/constants/filterOptions';
 import { AudioWaveform, ChevronDown, ChevronUp, PlusIcon } from 'lucide-react';
 import { observer } from 'mobx-react-lite';
 import AddStepButton from 'Components/Dashboard/components/FilterSeries/AddStepButton';
-import { Icon } from 'UI';
 import FilterItem from 'Shared/Filters/FilterItem';
 import { FilterKey } from 'Types/filter/filterType';