added visual feedback to filters (#6907)

Author: konzz

app/react/App/styles/globals.css

@@ -1833,6 +1833,10 @@ input[type="range"]::-ms-fill-lower {
   margin-top: 1.5rem;
 }
 
+.ml-1 {
+  margin-left: 0.25rem;
+}
+
 .block {
   display: block;
 }
@@ -2924,6 +2928,11 @@ input[type="range"]::-ms-fill-lower {
   background-color: rgb(67 56 202 / var(--tw-bg-opacity));
 }
 
+.bg-primary-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(49 46 129 / var(--tw-bg-opacity));
+}
+
 .bg-red-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(253 232 232 / var(--tw-bg-opacity));
@@ -3125,6 +3134,16 @@ input[type="range"]::-ms-fill-lower {
   padding-bottom: 3px;
 }
 
+.py-\[2px\] {
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+
+.py-\[1px\] {
+  padding-top: 1px;
+  padding-bottom: 1px;
+}
+
 .pb-14 {
   padding-bottom: 3.5rem;
 }
@@ -3270,6 +3289,14 @@ input[type="range"]::-ms-fill-lower {
   line-height: 1rem;
 }
 
+.text-\[8px\] {
+  font-size: 8px;
+}
+
+.text-\[10px\] {
+  font-size: 10px;
+}
+
 .font-black {
   font-weight: 900;
 }
@@ -3519,6 +3546,11 @@ input[type="range"]::-ms-fill-lower {
   color: rgb(114 59 19 / var(--tw-text-opacity));
 }
 
+.text-primary-900 {
+  --tw-text-opacity: 1;
+  color: rgb(49 46 129 / var(--tw-text-opacity));
+}
+
 .underline {
   text-decoration-line: underline;
 }

app/react/V2/Routes/Settings/IX/IXSuggestions.tsx

@@ -60,16 +60,24 @@ const ixmessages = {
 };
 
 const IXSuggestions = () => {
-  const { suggestions, extractor, templates, aggregation, currentStatus, totalPages } =
-    useLoaderData() as {
-      totalPages: number;
-      suggestions: TableSuggestion[];
-      extractor: IXExtractorInfo;
-      templates: ClientTemplateSchema[];
-      aggregation: any;
-      currentStatus: ixStatus;
-      _id: string;
-    };
+  const {
+    suggestions,
+    extractor,
+    templates,
+    aggregation,
+    currentStatus,
+    totalPages,
+    activeFilters,
+  } = useLoaderData() as {
+    totalPages: number;
+    suggestions: TableSuggestion[];
+    extractor: IXExtractorInfo;
+    templates: ClientTemplateSchema[];
+    aggregation: any;
+    currentStatus: ixStatus;
+    _id: string;
+    activeFilters: number;
+  };
 
   const [currentSuggestions, setCurrentSuggestions] = useState<TableSuggestion[]>(suggestions);
   const [property, setProperty] = useState<ClientPropertySchema>();
@@ -248,6 +256,7 @@ const IXSuggestions = () => {
                 onFiltersButtonClicked={() => {
                   setSidepanel('filters');
                 }}
+                activeFilters={activeFilters}
               />
             }
             enableSelection
@@ -366,10 +375,14 @@ const IXSuggestionsLoader =
     if (!extractorId) throw new Error('extractorId is required');
     const searchParams = new URLSearchParams(request.url.split('?')[1]);
     const filter: any = { extractorId };
+    let activeFilters = 0;
     if (searchParams.has('filter')) {
       filter.customFilter = JSON.parse(searchParams.get('filter')!);
+      activeFilters = [
+        ...Object.values(filter.customFilter.labeled),
+        ...Object.values(filter.customFilter.nonLabeled),
+      ].filter(Boolean).length;
     }
-
     const sortingOption = searchParams.has('sort') ? searchParams.get('sort') : undefined;
 
     const suggestionsList: { suggestions: EntitySuggestionType[]; totalPages: number } =
@@ -396,6 +409,7 @@ const IXSuggestionsLoader =
       templates,
       aggregation,
       currentStatus: currentStatus.status,
+      activeFilters,
     };
   };
 

app/react/V2/Routes/Settings/IX/components/SuggestionsTitle.tsx

@@ -9,16 +9,19 @@ import {
   NumericPropertyIcon,
   TextPropertyIcon,
   SelectPropertyIcon,
+  RelationshipPropertyIcon,
 } from 'app/V2/Components/CustomIcons';
 
 const SuggestionsTitle = ({
   property,
   templates,
   onFiltersButtonClicked,
+  activeFilters,
 }: {
   property: string;
   templates: ClientTemplateSchema[];
   onFiltersButtonClicked: () => void;
+  activeFilters: number;
 }) => {
   const allProperties = [...(templates[0].commonProperties || []), ...templates[0].properties];
   const template = allProperties.find(prop => prop.name === property);
@@ -39,6 +42,9 @@ const SuggestionsTitle = ({
     case 'multiselect':
       propGraphics = <SelectPropertyIcon className="w-3" />;
       break;
+    case 'relationship':
+      propGraphics = <RelationshipPropertyIcon className="w-3" />;
+      break;
     default:
       propGraphics = <TextPropertyIcon className="w-3" />;
   }
@@ -64,8 +70,15 @@ const SuggestionsTitle = ({
 
       <div className="flex-none">
         <Button size="small" styling="light" onClick={onFiltersButtonClicked}>
-          <FunnelIcon className="inline w-5 px-1 text-gray-800" />
+          <FunnelIcon
+            className={`inline w-4 mr-2 ${activeFilters > 0 ? 'text-primary-900' : 'text-gray-800'} `}
+          />
           <Translate>Stats & Filters</Translate>
+          {activeFilters > 0 && (
+            <span className="px-3 py-[2px] ml-2 text-xs text-white rounded-md bg-primary-900">
+              {activeFilters}
+            </span>
+          )}
         </Button>
       </div>
     </div>