From 6f845f5e91b6072d3e2b010962ddb744a3dc5adc Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Mon, 16 Dec 2024 12:03:22 +0100
Subject: [PATCH] ui: fix exclusion component for path

---
 .../CustomMetricLineChart.tsx                 |  2 +-
 .../FilterSeries/ExcludeFilters.tsx           |  4 +-
 .../components/FilterSeries/FilterSeries.tsx  | 52 ++++++++++---------
 .../components/WidgetChart/WidgetChart.tsx    |  3 ++
 .../components/WidgetForm/WidgetFormNew.tsx   |  3 +-
 5 files changed, 36 insertions(+), 28 deletions(-)

diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricLineChart/CustomMetricLineChart.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricLineChart/CustomMetricLineChart.tsx
index 15b30e9ff..514b05081 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricLineChart/CustomMetricLineChart.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricLineChart/CustomMetricLineChart.tsx
@@ -85,7 +85,7 @@ function CustomMetricLineChart(props: Props) {
              activeDot={{ fill: colors[index]}}
            />
          ) : null)}
-        {compData?.namesMap.map((key, i) => data.namesMap[i] ? (
+        {compData?.namesMap?.map((key, i) => data.namesMap[i] ? (
           <Line
             key={key}
             name={key}
diff --git a/frontend/app/components/Dashboard/components/FilterSeries/ExcludeFilters.tsx b/frontend/app/components/Dashboard/components/FilterSeries/ExcludeFilters.tsx
index d1d78c63c..398403016 100644
--- a/frontend/app/components/Dashboard/components/FilterSeries/ExcludeFilters.tsx
+++ b/frontend/app/components/Dashboard/components/FilterSeries/ExcludeFilters.tsx
@@ -28,9 +28,9 @@ function ExcludeFilters(props: Props) {
   };
 
   return (
-    <div className={cn("flex items-center border-b", { 'p-5' : hasExcludes, 'px-2': !hasExcludes })}>
+    <div className={cn("flex items-center mb-2")}>
       {filter.excludes.length > 0 ? (
-        <div className="flex items-center mb-2 flex-col">
+        <div className="flex items-center mb-2 bg-white rounded-xl flex-col px-4 py-2 w-full">
           <div className="text-sm color-gray-medium mr-auto mb-2">EXCLUDES</div>
           {filter.excludes.map((f: any, index: number) => (
             <FilterItem
diff --git a/frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx b/frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx
index 5d9eebc8d..d9ce2d7f2 100644
--- a/frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx
+++ b/frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx
@@ -112,6 +112,7 @@ interface Props {
   canExclude?: boolean;
   expandable?: boolean;
   isHeatmap?: boolean;
+  removeEvents?: boolean;
 }
 
 function FilterSeries(props: Props) {
@@ -125,6 +126,7 @@ function FilterSeries(props: Props) {
     canExclude = false,
     expandable = false,
     isHeatmap,
+    removeEvents,
   } = props;
   const [expanded, setExpanded] = useState(hideHeader || !expandable);
   const { series, seriesIndex } = props;
@@ -206,30 +208,32 @@ function FilterSeries(props: Props) {
 
       {expanded ? (
         <>
-        <EventsList
-          filter={series.filter}
-          onUpdateFilter={onUpdateFilter}
-          onRemoveFilter={onRemoveFilter}
-          onChangeEventsOrder={onChangeEventsOrder}
-          supportsEmpty={supportsEmpty}
-          onFilterMove={onFilterMove}
-          excludeFilterKeys={excludeFilterKeys}
-          onAddFilter={onAddFilter}
-          mergeUp={!hideHeader}
-          mergeDown
-          cannotAdd={isHeatmap}
-        />
-        <FilterList
-          filter={series.filter}
-          onUpdateFilter={onUpdateFilter}
-          onRemoveFilter={onRemoveFilter}
-          onChangeEventsOrder={onChangeEventsOrder}
-          supportsEmpty={supportsEmpty}
-          onFilterMove={onFilterMove}
-          excludeFilterKeys={excludeFilterKeys}
-          onAddFilter={onAddFilter}
-          mergeUp
-        />
+          {removeEvents ? null :
+            <EventsList
+              filter={series.filter}
+              onUpdateFilter={onUpdateFilter}
+              onRemoveFilter={onRemoveFilter}
+              onChangeEventsOrder={onChangeEventsOrder}
+              supportsEmpty={supportsEmpty}
+              onFilterMove={onFilterMove}
+              excludeFilterKeys={excludeFilterKeys}
+              onAddFilter={onAddFilter}
+              mergeUp={!hideHeader}
+              mergeDown
+              cannotAdd={isHeatmap}
+            />
+          }
+          <FilterList
+            filter={series.filter}
+            onUpdateFilter={onUpdateFilter}
+            onRemoveFilter={onRemoveFilter}
+            onChangeEventsOrder={onChangeEventsOrder}
+            supportsEmpty={supportsEmpty}
+            onFilterMove={onFilterMove}
+            excludeFilterKeys={excludeFilterKeys}
+            onAddFilter={onAddFilter}
+            mergeUp={!removeEvents}
+          />
         </>
       ) : null}
     </div>
diff --git a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
index a9124efdb..c3b9fc887 100644
--- a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
@@ -191,7 +191,10 @@ function WidgetChart(props: Props) {
     loadComparisonData();
   }, [dashboardStore.comparisonPeriod]);
   useEffect(() => {
+    dashboardStore.setComparisonPeriod(null)
+    setCompData(null);
     _metric.updateKey('page', 1);
+    _metric.updateKey()
     loadPage();
   }, [
     drillDownPeriod,
diff --git a/frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx b/frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx
index d2fd50393..04c8f34a3 100644
--- a/frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx
@@ -55,10 +55,11 @@ const FilterSection = observer(({ metric, excludeFilterKeys }: any) => {
         metric.series
           .slice(0, isSingleSeries ? 1 : metric.series.length)
           .map((series: any, index: number) => (
-            <div className="mb-2 rounded-xl border border-gray-lighter" key={series.name}>
+            <div className="mb-2 rounded-xl" key={series.name}>
               <FilterSeries
                 isHeatmap={isHeatMap}
                 canExclude={isPathAnalysis}
+                removeEvents={isPathAnalysis}
                 supportsEmpty={!isHeatMap && !isPathAnalysis}
                 excludeFilterKeys={excludeFilterKeys}
                 observeChanges={() => metric.updateKey('hasChanged', true)}