diff --git a/client/src/containers/sidebar/explore-sidebar/index.tsx b/client/src/containers/sidebar/explore-sidebar/index.tsx
index 7052ad8b..896ac4d9 100644
--- a/client/src/containers/sidebar/explore-sidebar/index.tsx
+++ b/client/src/containers/sidebar/explore-sidebar/index.tsx
@@ -3,6 +3,7 @@ import { FC } from "react";
import useFilters from "@/hooks/use-filters";
import FilterSettings from "@/containers/sidebar/filter-settings";
+import ClearFiltersButton from "@/containers/sidebar/filter-settings/clear-filters-button";
import SectionsNav from "@/containers/sidebar/sections-nav";
import {
@@ -23,7 +24,10 @@ const ExploreSidebar: FC = () => {
defaultValue={["explore-sections"]}
>
- Filters
+
{
+ const { filters, setFilters } = useFilters();
+
+ if (filters.length === 0) return null;
+
+ return (
+
+ );
+};
+
+export default ClearFiltersButton;
diff --git a/client/src/containers/sidebar/filter-settings/filter-popup/index.tsx b/client/src/containers/sidebar/filter-settings/filter-popup/index.tsx
index b0d9c3a8..d7a388a5 100644
--- a/client/src/containers/sidebar/filter-settings/filter-popup/index.tsx
+++ b/client/src/containers/sidebar/filter-settings/filter-popup/index.tsx
@@ -2,6 +2,7 @@ import { FC, useState } from "react";
import { PageFilter } from "@shared/dto/widgets/page-filter.entity";
import { useSetAtom } from "jotai";
+import { CircleXIcon } from "lucide-react";
import { FilterQueryParam } from "@/hooks/use-filters";
@@ -35,18 +36,16 @@ const FilterItemButton: FC<{
onClick: (value: string) => void;
}> = ({ value, onClick }) => {
return (
- <>
+
{value}
- {
e.stopPropagation();
onClick(value);
}}
- >
- x
-
- >
+ />
+
);
};
diff --git a/client/src/containers/sidebar/sandbox-sidebar/index.tsx b/client/src/containers/sidebar/sandbox-sidebar/index.tsx
index 07b40202..13604725 100644
--- a/client/src/containers/sidebar/sandbox-sidebar/index.tsx
+++ b/client/src/containers/sidebar/sandbox-sidebar/index.tsx
@@ -4,6 +4,7 @@ import useFilters from "@/hooks/use-filters";
import useSandboxWidget from "@/hooks/use-sandbox-widget";
import FilterSettings from "@/containers/sidebar/filter-settings";
+import ClearFiltersButton from "@/containers/sidebar/filter-settings/clear-filters-button";
import IndicatorSelector from "@/containers/sidebar/indicator-seletor";
import VisualizationSelector from "@/containers/sidebar/visualization-selector";
@@ -47,7 +48,10 @@ const SandboxSidebar: FC = () => {
- Filters
+
{
- Filters
+