Enhance filterTiles with scoring, filtering, and sorting

packages/ui/src/components/Catalog/Catalog.tsx

@@ -42,26 +42,27 @@
   /** Selected Providers */
   const [selectedProviders, setSelectedProviders] = useState<string[]>(providers);
 
-  /** Filter by selected group */
-  const filteredTilesByGroup = useMemo(() => {
+  const filteredTiles = useMemo(() => {
     return filterTiles(props.tiles, { searchTerm, searchTags: filterTags, selectedProviders });
   }, [filterTags, props.tiles, searchTerm, selectedProviders]);
 
   /** Set the tiles groups */
   const tilesGroups = useMemo(() => {
-    return Object.entries(filteredTilesByGroup).map(([group, tiles]) => ({ name: group, count: tiles.length }));
-  }, [filteredTilesByGroup]);
+    const groups: Record<string, ITile[]> = {};
+    filteredTiles.forEach((tile) => {
+      if (!groups[tile.type]) {
+        groups[tile.type] = [];
+      }
+      groups[tile.type].push(tile);
+    });
+    return Object.entries(groups).map(([group, tiles]) => ({ name: group, count: tiles.length }));
+  }, [filteredTiles]);
 
   const [activeGroups, setActiveGroups] = useState<string[]>(tilesGroups.map((g) => g.name));
 
-  const filteredTiles = useMemo(() => {
-    return Object.entries(filteredTilesByGroup).reduce((acc, [group, tiles]) => {
-      if (activeGroups.includes(group)) {
-        acc.push(...tiles);
-      }
-      return acc;
-    }, [] as ITile[]);
-  }, [activeGroups, filteredTilesByGroup]);
+  const filteredTilesByGroup = useMemo<ITile[]>(() => {
+    return filteredTiles.filter((tile) => activeGroups.includes(tile.type));
+  }, [activeGroups, filteredTiles]);
 
   const onFilterChange = useCallback(
     (_event: unknown, value = '') => {
@@ -116,7 +117,7 @@
       />
       <BaseCatalog
         className="catalog__base"
-        tiles={filteredTiles}
+        tiles={filteredTilesByGroup}
         catalogLayout={activeLayout}
         onTileClick={onTileClick}
         onTagClick={onTagClick}

packages/ui/src/components/Catalog/filter-tiles.test.ts

@@ -69,62 +69,46 @@ describe('filterTiles', () => {
     const options = { searchTerm: 'message' };
     const result = filterTiles(tiles, options);
 
-    expect(result).toEqual({
-      [CatalogKind.Component]: [tilesMap.activemq],
-      [CatalogKind.Pattern]: [tilesMap.setBody, tilesMap.split],
-      [CatalogKind.Kamelet]: [tilesMap.slackSource],
-    });
+    expect(result).toEqual([tilesMap.activemq, tilesMap.setBody, tilesMap.split, tilesMap.slackSource]);
   });
 
   it('should filter tiles by provider', () => {
     const options = { selectedProviders: ['Red Hat'] };
     const result = filterTiles(tiles, options);
 
-    expect(result).toEqual({
-      [CatalogKind.Component]: [tilesMap.cron],
-      [CatalogKind.Pattern]: [],
-      [CatalogKind.Kamelet]: [],
-    });
+    expect(result).toEqual([tilesMap.cron]);
   });
 
   it('should return tiles without provider when community is selected', () => {
     const options = { selectedProviders: ['Community'] };
     const result = filterTiles(tiles, options);
 
-    expect(result).toEqual({
-      [CatalogKind.Component]: [tilesMap.activemq, tilesMap.cometd, tilesMap.hazelcast],
-      [CatalogKind.Pattern]: [tilesMap.setBody, tilesMap.split],
-      [CatalogKind.Kamelet]: [tilesMap.beerSource, tilesMap.slackSource],
-    });
+    expect(result).toEqual([
+      tilesMap.activemq,
+      tilesMap.cometd,
+      tilesMap.hazelcast,
+      tilesMap.setBody,
+      tilesMap.split,
+      tilesMap.beerSource,
+      tilesMap.slackSource,
+    ]);
   });
 
   it('should filter tiles by a single tag', () => {
     const options = { searchTags: ['messaging'] };
     const result = filterTiles(tiles, options);
-    expect(result).toEqual({
-      [CatalogKind.Component]: [tilesMap.activemq, tilesMap.cometd, tilesMap.hazelcast],
-      [CatalogKind.Pattern]: [],
-      [CatalogKind.Kamelet]: [],
-    });
+    expect(result).toEqual([tilesMap.activemq, tilesMap.cometd, tilesMap.hazelcast]);
   });
 
   it('should filter tiles by multiple tags', () => {
     const options = { searchTags: ['messaging', 'clustering'] };
     const result = filterTiles(tiles, options);
-    expect(result).toEqual({
-      [CatalogKind.Component]: [tilesMap.hazelcast],
-      [CatalogKind.Pattern]: [],
-      [CatalogKind.Kamelet]: [],
-    });
+    expect(result).toEqual([tilesMap.hazelcast]);
   });
 
   it('should filter tiles by search term and tags', () => {
     const options = { searchTerm: 'cr', searchTags: ['scheduling'] };
     const result = filterTiles(tiles, options);
-    expect(result).toEqual({
-      [CatalogKind.Component]: [tilesMap.cron],
-      [CatalogKind.Pattern]: [],
-      [CatalogKind.Kamelet]: [],
-    });
+    expect(result).toEqual([tilesMap.cron]);
   });
 });

packages/ui/src/components/Catalog/filter-tiles.ts

@@ -6,41 +6,57 @@
 export const filterTiles = (
   tiles: ITile[],
   options?: { searchTerm?: string; searchTags?: string[]; selectedProviders?: string[] },
-): Record<string, ITile[]> => {
+): ITile[] => {
   const { searchTerm = '', searchTags = [], selectedProviders = [] } = options ?? {};
   const searchTermLowercase = searchTerm.toLowerCase();
 
-  return tiles.reduce(
-    (acc, tile) => {
-      /** Filter by selected tags */
-      const doesTagsMatches = searchTags.length ? checkThatArrayContainsAllTags(tile.tags, searchTags) : true;
-
-      /** Filter by providers */
-      let doesProviderMatch = true;
-      if (selectedProviders.length) {
-        doesProviderMatch =
-          tile.provider === undefined
-            ? selectedProviders.includes('Community')
-            : selectedProviders.includes(tile.provider);
-      }
-
-      /** Determine whether the tile should be included in the filtered list */
-      const shouldInclude =
-        doesTagsMatches &&
-        doesProviderMatch &&
-        (!searchTermLowercase ||
-          tile.name.toLowerCase().includes(searchTermLowercase) ||
-          tile.title.toLowerCase().includes(searchTermLowercase) ||
-          tile.description?.toLowerCase().includes(searchTermLowercase) ||
-          tile.tags.some((tag) => tag.toLowerCase().includes(searchTermLowercase)));
-
-      acc[tile.type] = acc[tile.type] ?? [];
-      if (shouldInclude) {
-        acc[tile.type].push(tile);
-      }
-
-      return acc;
-    },
-    {} as Record<ITile['type'], ITile[]>,
-  );
+  // Step 1: Score each tile based on how well it matches the search term
+  const scoredTiles = tiles.map((tile) => {
+    let score = 0;
+
+    // Score based on name
+    const nameLower = tile.name.toLowerCase();
+    if (nameLower.startsWith(searchTermLowercase)) {
+      score += 100;
+    } else if (nameLower.includes(searchTermLowercase)) {
+      score += 40;
+    }
+
+    // Score based on title
+    if (tile.title?.toLowerCase().includes(searchTermLowercase)) {
+      score += 40;
+    }
+
+    // Score based on description
+    if (tile.description?.toLowerCase().includes(searchTermLowercase)) {
+      score += 10;
+    }
+
+    return { tile, score };
+  });
+
+  // Step 2: Filter tiles based on score, tags, and providers
+  const filteredTiles = scoredTiles.filter(({ tile, score }) => {
+    // Exclude tiles with no match
+    if (score <= 0) return false;
+
+    // Filter by selected tags
+    const doesTagsMatch = searchTags.length ? checkThatArrayContainsAllTags(tile.tags, searchTags) : true;
+
+    // Filter by selected providers
+    let doesProviderMatch = true;
+    if (selectedProviders.length) {
+      doesProviderMatch =
+        tile.provider === undefined
+          ? selectedProviders.includes('Community')
+          : selectedProviders.includes(tile.provider);
+    }
+
+    return doesTagsMatch && doesProviderMatch;
+  });
+
+  // Step 3: Sort the filtered tiles by score in descending order
+  const tilesResult: ITile[] = filteredTiles.sort((a, b) => b.score - a.score).map(({ tile }) => tile);
+
+  return tilesResult;
 };