Add specification filter (#509)

Signed-off-by: Cintia Sanchez Garcia <cynthiasg@icloud.com>
cncf · Feb 21, 2024 · 9e2f6ed · 9e2f6ed
1 parent e813698
commit 9e2f6ed
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 5 deletions.
diff --git a/web/src/data.ts b/web/src/data.ts
@@ -126,10 +126,20 @@ export const FILTERS: FilterSection[] = [
       },
     ],
   },
+  {
+    value: FilterCategory.Extra,
+    title: 'Extra',
+    options: [
+      {
+        value: 'specification',
+        name: 'Specification',
+      },
+    ],
+  },
 ];
 
 export const FILTER_CATEGORIES_PER_TITLE: FilterCategoriesPerTitle = {
-  [FilterTitle.Project]: [FilterCategory.Maturity, FilterCategory.TAG, FilterCategory.License],
+  [FilterTitle.Project]: [FilterCategory.Maturity, FilterCategory.TAG, FilterCategory.License, FilterCategory.Extra],
   [FilterTitle.Organization]: [
     FilterCategory.Organization,
     FilterCategory.OrgType,

diff --git a/web/src/layout/common/ActiveFiltersList.tsx b/web/src/layout/common/ActiveFiltersList.tsx
@@ -56,15 +56,15 @@ const ActiveFiltersList = (props: Props) => {
               const activeFiltersPerCategory = () => activeFilters()[f as FilterCategory];
               if (isUndefined(activeFiltersPerCategory()) || isEmpty(activeFiltersPerCategory())) return null;
 
-              const allMatutirySelected = () =>
+              const allMaturitySelected = () =>
                 !isUndefined(props.maturityOptions) &&
                 f === FilterCategory.Maturity &&
                 props.maturityOptions.every((element) => activeFiltersPerCategory()!.includes(element));
               const foundationLabel = getFoundationNameLabel();
 
               return (
                 <Switch>
-                  <Match when={allMatutirySelected()}>
+                  <Match when={allMaturitySelected()}>
                     <span
                       role="listitem"
                       class={`badge badge-sm border rounded-0 me-3 my-1 d-flex flex-row align-items-center ${styles.filterBadge}`}
@@ -88,7 +88,34 @@ const ActiveFiltersList = (props: Props) => {
                     </span>
                   </Match>
 
-                  <Match when={!allMatutirySelected()}>
+                  <Match when={f === FilterCategory.Extra}>
+                    <For each={activeFiltersPerCategory()}>
+                      {(c: string) => {
+                        return (
+                          <span
+                            role="listitem"
+                            class={`badge badge-sm border rounded-0 me-3 my-1 d-flex flex-row align-items-center ${styles.filterBadge}`}
+                          >
+                            <div class="d-flex flex-row align-items-baseline">
+                              <div>
+                                <span class="text-uppercase">{c}</span>
+                              </div>
+                              <button
+                                class="btn btn-link btn-sm text-reset lh-1 p-0 ps-2"
+                                onClick={() => props.removeFilter(f as FilterCategory, c)}
+                                aria-label={`Remove ${c} filter`}
+                                title={`Remove ${c} filter`}
+                              >
+                                <SVGIcon kind={SVGIconKind.ClearCircle} />
+                              </button>
+                            </div>
+                          </span>
+                        );
+                      }}
+                    </For>
+                  </Match>
+
+                  <Match when={!allMaturitySelected()}>
                     <For each={activeFiltersPerCategory()}>
                       {(c: string) => {
                         return (

diff --git a/web/src/layout/explore/filters/index.tsx b/web/src/layout/explore/filters/index.tsx
@@ -250,6 +250,15 @@ const Filters = (props: Props) => {
                   updateActiveFilters={updateActiveFilters}
                   resetFilter={resetFilter}
                 />
+
+                <Section
+                  title="Extra"
+                  section={getSection(FilterCategory.Extra)}
+                  activeFilters={{ ...tmpActiveFilters() }[FilterCategory.Extra]}
+                  updateActiveFilters={updateActiveFilters}
+                  resetFilter={resetFilter}
+                  sectionClass={styles.section}
+                />
               </div>
             </Show>
 

diff --git a/web/src/layout/explore/index.tsx b/web/src/layout/explore/index.tsx
@@ -52,6 +52,7 @@ export type LoadedContent = {
 
 const TITLE_GAP = 40;
 const CONTROLS_WIDTH = 102 + 49 + 160 + 101 + 24; // Filters + Group legend + View Mode + Zoom + Right margin
+const EXTRA_FILTERS = ['specification'];
 
 const Explore = (props: Props) => {
   const navigate = useNavigate();
@@ -124,6 +125,14 @@ const Explore = (props: Props) => {
             currentFilters[f] = [value];
           }
         }
+      } else {
+        if (EXTRA_FILTERS.includes(key)) {
+          if (currentFilters[f]) {
+            currentFilters[FilterCategory.Extra] = [...currentFilters[FilterCategory.Extra]!, key];
+          } else {
+            currentFilters[FilterCategory.Extra] = [key];
+          }
+        }
       }
     }
     setVisibleItems(filterData(landscapeData() || props.initialData.items, currentFilters));
@@ -205,6 +214,9 @@ const Explore = (props: Props) => {
     Object.values(FilterCategory).forEach((f: string) => {
       params.delete(f);
     });
+    EXTRA_FILTERS.forEach((f: string) => {
+      params.delete(f);
+    });
 
     if (params.toString() === '') {
       params.set(GROUP_PARAM, selectedGroup()!);
@@ -213,7 +225,11 @@ const Explore = (props: Props) => {
 
     const filtersParams = getFiltersQuery(filters);
     for (const [key, val] of filtersParams.entries()) {
-      params.append(key, val);
+      if (key === FilterCategory.Extra) {
+        params.append(val, 'true');
+      } else {
+        params.append(key, val);
+      }
     }
 
     const query = params.toString();

diff --git a/web/src/types.ts b/web/src/types.ts
@@ -324,6 +324,7 @@ export enum FilterCategory {
   TAG = 'tag',
   Membership = 'membership',
   InvestmentType = 'investment-type',
+  Extra = 'extra',
 }
 
 export interface Stats {

diff --git a/web/src/utils/filterData.ts b/web/src/utils/filterData.ts
@@ -6,6 +6,16 @@ import getFoundationNameLabel from './getFoundationNameLabel';
 const filterData = (items: Item[], activeFilters: ActiveFilters): Item[] => {
   if (Object.keys(activeFilters).length > 0) {
     const filteredItems: Item[] = items.filter((item: Item) => {
+      // Filter Extra
+      if (activeFilters[FilterCategory.Extra]) {
+        if (
+          activeFilters[FilterCategory.Extra].includes('specification') &&
+          (isUndefined(item.specification) || !item.specification)
+        ) {
+          return false;
+        }
+      }
+
       // Filter Organization
       if (activeFilters[FilterCategory.Organization]) {
         if (isUndefined(item.crunchbase_data) || isUndefined(item.crunchbase_data.name)) {

diff --git a/web/src/utils/prepareFilters.ts b/web/src/utils/prepareFilters.ts
@@ -50,6 +50,7 @@ const prepareFilters = (items: Item[]): FilterSection[] => {
   const licenses: string[] = [];
   const countries: string[] = [];
   const companyTypes: string[] = [];
+  const extraTypes: string[] = [];
   let categories: string[] = [];
 
   items.forEach((i: Item) => {
@@ -61,6 +62,10 @@ const prepareFilters = (items: Item[]): FilterSection[] => {
       tags.push(i.tag);
     }
 
+    if (i.specification) {
+      extraTypes.push('specification');
+    }
+
     if (i.crunchbase_data) {
       if (i.crunchbase_data.name) {
         organizations.push(i.crunchbase_data.name);
@@ -163,6 +168,19 @@ const prepareFilters = (items: Item[]): FilterSection[] => {
         })),
       });
     }
+
+    if (extraTypes.length > 0) {
+      filters.push({
+        value: FilterCategory.Extra,
+        title: 'Extra',
+        options: [
+          {
+            value: 'specification',
+            name: 'Specification',
+          },
+        ],
+      });
+    }
   }
 
   return filters;