@finos/legend-application-marketplace 0.2.2 → 0.2.3

package/src/components/LegendServiceCard/LegendServiceGrid.tsx

@@ -0,0 +1,206 @@
+/**
+ * Copyright (c) 2026-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { observer } from 'mobx-react-lite';
+import { useCallback, useMemo, useRef } from 'react';
+import { Chip, Tooltip } from '@mui/material';
+import { clsx, DownloadIcon, StarIcon } from '@finos/legend-art';
+import type {
+  LegendMarketplaceDataAPIsStore,
+  LegendServiceCardState,
+} from '../../stores/dataAPIs/LegendMarketplaceDataAPIsStore.js';
+import { ServiceOwnershipType } from '@finos/legend-graph';
+import { isString } from '@finos/legend-shared';
+import {
+  DataGrid,
+  type DataGridApi,
+  type DataGridCellRendererParams,
+  type DataGridColumnDefinition,
+} from '@finos/legend-lego/data-grid';
+
+const FavoriteCellRenderer = observer(
+  (
+    params: DataGridCellRendererParams<LegendServiceCardState> & {
+      store: LegendMarketplaceDataAPIsStore;
+    },
+  ): React.ReactNode => {
+    const { data, store } = params;
+    if (!data) {
+      return null;
+    }
+    const isFav = store.isFavorite(data.service.pattern);
+    return (
+      <button
+        className={clsx('marketplace-legend-service-grid__star-btn', {
+          'marketplace-legend-service-grid__star-btn--active': isFav,
+        })}
+        onClick={(e) => {
+          e.stopPropagation();
+          store.toggleFavorite(data.service.pattern);
+        }}
+        title={isFav ? 'Remove from favorites' : 'Add to favorites'}
+      >
+        <StarIcon />
+      </button>
+    );
+  },
+);
+
+const OwnersCellRenderer = observer(
+  (
+    params: DataGridCellRendererParams<LegendServiceCardState>,
+  ): React.ReactNode => {
+    const data = params.data;
+    if (!data) {
+      return null;
+    }
+    return (
+      <div className="marketplace-legend-service-grid__chips">
+        {data.owners.map((owner) => (
+          <Chip
+            key={owner}
+            size="small"
+            label={owner}
+            className={`marketplace-legend-service-list-row__chip marketplace-legend-service-list-row__chip--${
+              data.ownershipType === ServiceOwnershipType.DEPLOYMENT_OWNERSHIP
+                ? 'did'
+                : 'owner'
+            }`}
+          />
+        ))}
+      </div>
+    );
+  },
+);
+
+export const LegendServiceGridView = observer(
+  (props: {
+    services: LegendServiceCardState[];
+    store: LegendMarketplaceDataAPIsStore;
+    onRowClick: (serviceCardState: LegendServiceCardState) => void;
+  }): React.ReactNode => {
+    const { services, store, onRowClick } = props;
+    const gridApiRef = useRef<DataGridApi<LegendServiceCardState> | null>(null);
+
+    const columnDefs: DataGridColumnDefinition<LegendServiceCardState>[] =
+      useMemo(
+        () => [
+          {
+            headerName: '',
+            colId: 'favorite',
+            cellRenderer: FavoriteCellRenderer,
+            cellRendererParams: { store },
+            width: 50,
+            maxWidth: 50,
+            minWidth: 50,
+            resizable: false,
+            sortable: false,
+            filter: false,
+            suppressHeaderMenuButton: true,
+          },
+          {
+            headerName: 'Title',
+            colId: 'title',
+            valueGetter: (p) => p.data?.title,
+            minWidth: 150,
+            flex: 2,
+            filter: true,
+            resizable: true,
+          },
+          {
+            headerName: 'URL Path',
+            colId: 'urlPath',
+            valueGetter: (p) => p.data?.service.pattern,
+            minWidth: 200,
+            flex: 3,
+            filter: true,
+            resizable: true,
+          },
+          {
+            headerName: 'Description',
+            colId: 'description',
+            valueGetter: (p) => p.data?.description,
+            minWidth: 200,
+            flex: 4,
+            filter: true,
+            resizable: true,
+          },
+          {
+            headerName: 'Owner / DID',
+            colId: 'owners',
+            cellRenderer: OwnersCellRenderer,
+            valueGetter: (p) => p.data?.owners.join(', '),
+            minWidth: 150,
+            flex: 2,
+            filter: true,
+            resizable: true,
+            autoHeight: true,
+            wrapText: true,
+          },
+        ],
+        [store],
+      );
+
+    const exportToCSV = useCallback((): void => {
+      gridApiRef.current?.exportDataAsCsv({
+        fileName: 'legend-services.csv',
+        columnKeys: ['title', 'urlPath', 'description', 'owners'],
+        processCellCallback: (params) => {
+          const value: unknown = params.value;
+          if (isString(value)) {
+            return value.replaceAll(/[\r\n]+/g, ' ');
+          }
+          return isString(value) ? value : '';
+        },
+      });
+    }, []);
+
+    return (
+      <div className="marketplace-legend-service-grid">
+        <div className="marketplace-legend-service-grid__toolbar">
+          <span className="marketplace-legend-service-grid__toolbar__count">
+            {`${services.length} result${services.length === 1 ? '' : 's'}`}
+          </span>
+          <Tooltip title="Export visible rows to CSV" placement="left">
+            <button
+              className="marketplace-legend-service-grid__toolbar__export-btn"
+              onClick={exportToCSV}
+            >
+              <DownloadIcon />
+              Export to CSV
+            </button>
+          </Tooltip>
+        </div>
+        <div className="marketplace-legend-service-grid__ag-grid ag-theme-balham">
+          <DataGrid
+            rowData={services}
+            columnDefs={columnDefs}
+            onGridReady={(params) => {
+              gridApiRef.current = params.api;
+            }}
+            onCellClicked={(event) => {
+              if (event.data && event.column.getColId() !== 'favorite') {
+                onRowClick(event.data);
+              }
+            }}
+            suppressCellFocus={true}
+            overlayNoRowsTemplate="No services match the filters."
+          />
+        </div>
+      </div>
+    );
+  },
+);

package/src/components/LegendServiceCard/LegendServiceListRow.tsx

@@ -16,8 +16,13 @@
 
 import { observer } from 'mobx-react-lite';
 import { useState } from 'react';
-import { Chip } from '@mui/material';
-import { MarkdownTextViewer } from '@finos/legend-art';
+import { Chip, IconButton } from '@mui/material';
+import {
+  clsx,
+  MarkdownTextViewer,
+  StarIcon,
+  EmptyStarIcon,
+} from '@finos/legend-art';
 import type { LegendServiceCardState } from '../../stores/dataAPIs/LegendMarketplaceDataAPIsStore.js';
 import { ServiceOwnershipType } from '@finos/legend-graph';
 import { LegendMarketplaceListItem } from '../MarketplaceCard/LegendMarketplaceListItem.js';
@@ -28,8 +33,10 @@ export const LegendServiceListRow = observer(
   (props: {
     serviceCardState: LegendServiceCardState;
     onClick: () => void;
+    isFavorite: boolean;
+    onToggleFavorite: () => void;
   }): React.ReactNode => {
-    const { serviceCardState, onClick } = props;
+    const { serviceCardState, onClick, isFavorite, onToggleFavorite } = props;
     const [expanded, setExpanded] = useState(false);
     const description = serviceCardState.description;
     const isTruncatable = description.length > MAX_DESCRIPTION_LENGTH;
@@ -46,6 +53,23 @@ export const LegendServiceListRow = observer(
         content={
           <div className="marketplace-legend-service-list-row__body">
             <div className="marketplace-legend-service-list-row__header">
+              <IconButton
+                className={clsx(
+                  'marketplace-legend-service-list-row__favorite-btn',
+                  isFavorite &&
+                    'marketplace-legend-service-list-row__favorite-btn--active',
+                )}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onToggleFavorite();
+                }}
+                size="small"
+                title={
+                  isFavorite ? 'Remove from favorites' : 'Add to favorites'
+                }
+              >
+                {isFavorite ? <StarIcon /> : <EmptyStarIcon />}
+              </IconButton>
               <div className="marketplace-legend-service-list-row__title-block">
                 <div className="marketplace-legend-service-list-row__name">
                   {serviceCardState.title}

package/src/components/Pagination/PaginationControls.tsx

@@ -33,6 +33,7 @@ export const PaginationControls = observer(
     onPageChange: (page: number) => void;
     onItemsPerPageChange: (itemsPerPage: number) => void;
     disabled?: boolean;
+    pageSizeOptions?: number[] | undefined;
   }) => {
     const {
       totalItems,
@@ -41,6 +42,7 @@ export const PaginationControls = observer(
       onPageChange,
       onItemsPerPageChange,
       disabled = false,
+      pageSizeOptions = [12, 24, 36, 48],
     } = props;
 
     const totalPages = Math.ceil(totalItems / itemsPerPage);
@@ -75,10 +77,11 @@ export const PaginationControls = observer(
             size="medium"
             disabled={disabled}
           >
-            <MenuItem value={12}>12</MenuItem>
-            <MenuItem value={24}>24</MenuItem>
-            <MenuItem value={36}>36</MenuItem>
-            <MenuItem value={48}>48</MenuItem>
+            {pageSizeOptions.map((option) => (
+              <MenuItem key={option} value={option}>
+                {option}
+              </MenuItem>
+            ))}
           </Select>
         </Box>
         <Box className="legend-marketplace-pagination-info">

package/src/pages/DataAPIs/LegendMarketplaceDataAPIs.tsx

@@ -26,6 +26,8 @@ import {
   CheckIcon,
   CubesLoadingIndicator,
   CubesLoadingIndicatorIcon,
+  StarIcon,
+  TableIcon,
   ViewHeadlineIcon,
   WindowIcon,
   clsx,
@@ -48,6 +50,7 @@ import {
 } from '../../stores/dataAPIs/LegendMarketplaceDataAPIsStore.js';
 import { LegendServiceCard } from '../../components/LegendServiceCard/LegendServiceCard.js';
 import { LegendServiceListRow } from '../../components/LegendServiceCard/LegendServiceListRow.js';
+import { LegendServiceGridView } from '../../components/LegendServiceCard/LegendServiceGrid.js';
 import { PaginationControls } from '../../components/Pagination/PaginationControls.js';
 import { DataAPIsFiltersPanel } from '../../components/DataAPIsFiltersPanel/DataAPIsFiltersPanel.js';
 import { useSearchParams } from '@finos/legend-application/browser';
@@ -68,7 +71,6 @@ export const LegendMarketplaceDataAPIs = withLegendMarketplaceDataAPIsStore(
     );
 
     useEffect(() => {
-      dataAPIsStore.setItemsPerPage(12);
       if (queryFromUrl) {
         dataAPIsStore.setSearchQuery(queryFromUrl);
       }
@@ -150,6 +152,14 @@ export const LegendMarketplaceDataAPIs = withLegendMarketplaceDataAPIsStore(
                     key={serviceCardState.guid}
                     serviceCardState={serviceCardState}
                     onClick={() => handleServiceClick(serviceCardState)}
+                    isFavorite={dataAPIsStore.isFavorite(
+                      serviceCardState.service.pattern,
+                    )}
+                    onToggleFavorite={() =>
+                      dataAPIsStore.toggleFavorite(
+                        serviceCardState.service.pattern,
+                      )
+                    }
                   />
                 ))}
               </div>
@@ -163,6 +173,14 @@ export const LegendMarketplaceDataAPIs = withLegendMarketplaceDataAPIsStore(
               )}
             </>
           );
+        case ServicesViewMode.GRID:
+          return (
+            <LegendServiceGridView
+              services={dataAPIsStore.filteredSortedServices}
+              store={dataAPIsStore}
+              onRowClick={handleServiceClick}
+            />
+          );
         case ServicesViewMode.TILE:
           return (
             <Grid
@@ -176,6 +194,14 @@ export const LegendMarketplaceDataAPIs = withLegendMarketplaceDataAPIsStore(
                   <LegendServiceCard
                     serviceCardState={serviceCardState}
                     onClick={() => handleServiceClick(serviceCardState)}
+                    isFavorite={dataAPIsStore.isFavorite(
+                      serviceCardState.service.pattern,
+                    )}
+                    onToggleFavorite={() =>
+                      dataAPIsStore.toggleFavorite(
+                        serviceCardState.service.pattern,
+                      )
+                    }
                   />
                 </Grid>
               ))}
@@ -231,11 +257,34 @@ export const LegendMarketplaceDataAPIs = withLegendMarketplaceDataAPIsStore(
                 label="My Services"
               />
               <span className="legend-marketplace-search-results__sort-bar__controls-divider" />
-              <div className="legend-marketplace-search-results__view-toggle">
+              <IconButton
+                className={clsx(
+                  'legend-marketplace-search-results__favorites-toggle',
+                  dataAPIsStore.showFavoritesOnly &&
+                    'legend-marketplace-search-results__favorites-toggle--active',
+                )}
+                onClick={() =>
+                  dataAPIsStore.setShowFavoritesOnly(
+                    !dataAPIsStore.showFavoritesOnly,
+                  )
+                }
+                title={
+                  dataAPIsStore.showFavoritesOnly
+                    ? 'Show all services'
+                    : 'Show favorites only'
+                }
+                size="small"
+              >
+                <StarIcon />
+              </IconButton>
+              <span className="legend-marketplace-search-results__sort-bar__controls-divider" />
+              <div className="legend-marketplace-search-results__view-toggle legend-marketplace-search-results__view-toggle--three">
                 <div
                   className={clsx(
                     'legend-marketplace-search-results__view-toggle__slider',
                     viewMode === ServicesViewMode.LIST &&
+                      'legend-marketplace-search-results__view-toggle__slider--middle',
+                    viewMode === ServicesViewMode.GRID &&
                       'legend-marketplace-search-results__view-toggle__slider--right',
                   )}
                 />
@@ -247,8 +296,6 @@ export const LegendMarketplaceDataAPIs = withLegendMarketplaceDataAPIsStore(
                   )}
                   onClick={() => {
                     dataAPIsStore.setViewMode(ServicesViewMode.TILE);
-                    dataAPIsStore.setItemsPerPage(12);
-                    dataAPIsStore.setPage(1);
                     LegendMarketplaceTelemetryHelper.logEvent_ToggleServicesViewMode(
                       applicationStore.telemetryService,
                       ServicesViewMode.TILE,
@@ -267,8 +314,6 @@ export const LegendMarketplaceDataAPIs = withLegendMarketplaceDataAPIsStore(
                   )}
                   onClick={() => {
                     dataAPIsStore.setViewMode(ServicesViewMode.LIST);
-                    dataAPIsStore.setItemsPerPage(12);
-                    dataAPIsStore.setPage(1);
                     LegendMarketplaceTelemetryHelper.logEvent_ToggleServicesViewMode(
                       applicationStore.telemetryService,
                       ServicesViewMode.LIST,
@@ -279,6 +324,24 @@ export const LegendMarketplaceDataAPIs = withLegendMarketplaceDataAPIsStore(
                 >
                   <ViewHeadlineIcon />
                 </IconButton>
+                <IconButton
+                  className={clsx(
+                    'legend-marketplace-search-results__view-toggle__btn',
+                    viewMode === ServicesViewMode.GRID &&
+                      'legend-marketplace-search-results__view-toggle__btn--active',
+                  )}
+                  onClick={() => {
+                    dataAPIsStore.setViewMode(ServicesViewMode.GRID);
+                    LegendMarketplaceTelemetryHelper.logEvent_ToggleServicesViewMode(
+                      applicationStore.telemetryService,
+                      ServicesViewMode.GRID,
+                    );
+                  }}
+                  title="Grid View"
+                  size="small"
+                >
+                  <TableIcon />
+                </IconButton>
               </div>
               <span className="legend-marketplace-search-results__sort-bar__controls-divider" />
               <FormControl>
@@ -349,14 +412,17 @@ export const LegendMarketplaceDataAPIs = withLegendMarketplaceDataAPIsStore(
                   >
                     {renderServiceView()}
                   </div>
-                  <PaginationControls
-                    totalItems={dataAPIsStore.totalFilteredCount}
-                    itemsPerPage={dataAPIsStore.itemsPerPage}
-                    page={dataAPIsStore.page}
-                    onPageChange={handlePageChange}
-                    onItemsPerPageChange={handleItemsPerPageChange}
-                    disabled={dataAPIsStore.isLoading}
-                  />
+                  {viewMode !== ServicesViewMode.GRID && (
+                    <PaginationControls
+                      totalItems={dataAPIsStore.totalFilteredCount}
+                      itemsPerPage={dataAPIsStore.itemsPerPage}
+                      page={dataAPIsStore.page}
+                      onPageChange={handlePageChange}
+                      onItemsPerPageChange={handleItemsPerPageChange}
+                      disabled={dataAPIsStore.isLoading}
+                      pageSizeOptions={[12, 25, 50, 100]}
+                    />
+                  )}
                 </>
               )}
             </div>

package/src/pages/Lakehouse/MarketplaceLakehouseHome.tsx

@@ -46,6 +46,8 @@ import { logClickingDataProductCard } from '../../utils/LogUtils.js';
 import { LakehouseProductCard } from '../../components/LakehouseProductCard/LakehouseProductCard.js';
 import type { HomePageBannerConfig } from '../../application/LegendMarketplaceApplicationPlugin.js';
 
+const TRENDING_DATA_PRODUCTS = 4;
+
 export const MarketplaceLakehouseHome = observer(() => {
   const legendMarketplaceBaseStore = useLegendMarketplaceBaseStore();
   const applicationStore = legendMarketplaceBaseStore.applicationStore;
@@ -138,7 +140,11 @@ export const MarketplaceLakehouseHome = observer(() => {
         const result: Record<string, ProductCardState[]> = {
           ...configDataProducts,
         };
-        if (trendingDataProducts) {
+        if (
+          trendingDataProducts &&
+          Object.values(trendingDataProducts).flat().length >=
+            TRENDING_DATA_PRODUCTS
+        ) {
           Object.assign(result, trendingDataProducts);
         }
 

package/src/pages/Lakehouse/searchResults/LegendMarketplaceSearchResults.tsx

@@ -145,7 +145,9 @@ const SearchResultsContent = observer(
           </div>
         )}
         {searchResultsStore.isOnLastPage &&
-          !searchResultsStore.showAllProducts && (
+          !searchResultsStore.showAllProducts &&
+          !searchResultsStore.useProducerSearch &&
+          searchResultsStore.hasFilteredDataProducts && (
             <div className="marketplace-lakehouse-search-results__show-all-container">
               <div className="marketplace-lakehouse-search-results__show-all-text-row">
                 <Typography
@@ -325,8 +327,19 @@ export const LegendMarketplaceSearchResults =
         [applicationStore],
       );
       const handleShowAllProducts = useCallback(() => {
+        LegendMarketplaceTelemetryHelper.logEvent_ShowAllDataProducts(
+          applicationStore.telemetryService,
+          searchResultsStore.searchQuery,
+        );
         searchResultsStore.setShowAllProducts(true);
-      }, [searchResultsStore]);
+        flowResult(
+          searchResultsStore.executeSearch(
+            searchResultsStore.searchQuery ?? '',
+            searchResultsStore.useProducerSearch ?? false,
+            tokenRef.current,
+          ),
+        ).catch(applicationStore.alertUnhandledError);
+      }, [searchResultsStore, applicationStore]);
 
       return (
         <LegendMarketplacePage className="marketplace-lakehouse-search-results">

package/src/stores/dataAPIs/LegendMarketplaceDataAPIsStore.ts

@@ -19,6 +19,7 @@ import type { LegendMarketplaceBaseStore } from '../LegendMarketplaceBaseStore.j
 import {
   ActionState,
   assertErrorThrown,
+  isString,
   type GeneratorFn,
 } from '@finos/legend-shared';
 import {
@@ -38,6 +39,7 @@ export enum LegendServiceSort {
 export enum ServicesViewMode {
   LIST = 'list',
   TILE = 'tile',
+  GRID = 'grid',
 }
 
 export class LegendServiceCardState {
@@ -119,6 +121,10 @@ const LEGEND_MARKETPLACE_SETTING_KEY_SERVICES_VIEW_MODE =
   'marketplace.data-apis.viewMode';
 const LEGEND_MARKETPLACE_SETTING_KEY_SHOW_OWN_SERVICES =
   'marketplace.data-apis.showOwnServicesOnly';
+const LEGEND_MARKETPLACE_SETTING_KEY_FAVORITES =
+  'marketplace.data-apis.favorites';
+const LEGEND_MARKETPLACE_SETTING_KEY_ITEMS_PER_PAGE =
+  'marketplace.data-apis.itemsPerPage';
 
 export class LegendMarketplaceDataAPIsStore {
   readonly marketplaceBaseStore: LegendMarketplaceBaseStore;
@@ -127,12 +133,15 @@ export class LegendMarketplaceDataAPIsStore {
   sort: LegendServiceSort = LegendServiceSort.DEFAULT;
   viewMode: ServicesViewMode;
   showOwnServicesOnly: boolean;
+  showFavoritesOnly = false;
+  favoritePatterns: Set<string>;
   serviceCardStates: LegendServiceCardState[] = [];
   page = 1;
-  itemsPerPage = 12;
+  itemsPerPage: number;
 
   ownerFilters: string[] = [];
   deploymentIdFilters: string[] = [];
+  favorites: Set<string> = new Set();
 
   readonly fetchingServicesState = ActionState.create();
 
@@ -164,20 +173,37 @@ export class LegendMarketplaceDataAPIsStore {
       );
     this.showOwnServicesOnly = persistedShowOwn ?? false;
 
+    const persistedFavorites =
+      (this.marketplaceBaseStore.applicationStore.settingService.getObjectValue(
+        LEGEND_MARKETPLACE_SETTING_KEY_FAVORITES,
+      ) as string[] | undefined) ?? [];
+    this.favoritePatterns = new Set(persistedFavorites.filter(isString));
+
+    const persistedItemsPerPage =
+      this.marketplaceBaseStore.applicationStore.settingService.getNumericValue(
+        LEGEND_MARKETPLACE_SETTING_KEY_ITEMS_PER_PAGE,
+      );
+    this.itemsPerPage = persistedItemsPerPage ?? 12;
+
     makeObservable(this, {
       searchQuery: observable,
       sort: observable,
       viewMode: observable,
       showOwnServicesOnly: observable,
+      showFavoritesOnly: observable,
+      favoritePatterns: observable.shallow,
       serviceCardStates: observable,
       page: observable,
       itemsPerPage: observable,
       ownerFilters: observable,
       deploymentIdFilters: observable,
+      favorites: observable,
       setSearchQuery: action,
       setSort: action,
       setViewMode: action,
       setShowOwnServicesOnly: action,
+      setShowFavoritesOnly: action,
+      toggleFavorite: action,
       setPage: action,
       setItemsPerPage: action,
       addOwnerFilter: action,
@@ -220,13 +246,37 @@ export class LegendMarketplaceDataAPIsStore {
     );
   }
 
+  setShowFavoritesOnly(value: boolean): void {
+    this.showFavoritesOnly = value;
+    this.page = 1;
+  }
+
+  isFavorite(pattern: string): boolean {
+    return this.favoritePatterns.has(pattern);
+  }
+
+  toggleFavorite(pattern: string): void {
+    if (this.favoritePatterns.has(pattern)) {
+      this.favoritePatterns.delete(pattern);
+    } else {
+      this.favoritePatterns.add(pattern);
+    }
+    this.marketplaceBaseStore.applicationStore.settingService.persistValue(
+      LEGEND_MARKETPLACE_SETTING_KEY_FAVORITES,
+      Array.from(this.favoritePatterns),
+    );
+  }
+
   setPage(value: number): void {
     this.page = value;
   }
 
   setItemsPerPage(value: number): void {
     this.itemsPerPage = value;
-    this.page = 1;
+    this.marketplaceBaseStore.applicationStore.settingService.persistValue(
+      LEGEND_MARKETPLACE_SETTING_KEY_ITEMS_PER_PAGE,
+      value,
+    );
   }
 
   private persistOwnerFilters(): void {
@@ -320,6 +370,12 @@ export class LegendMarketplaceDataAPIsStore {
   get filteredSortedServices(): LegendServiceCardState[] {
     let results = this.serviceCardStates;
 
+    if (this.showFavoritesOnly) {
+      results = results.filter((card) =>
+        this.favoritePatterns.has(card.service.pattern),
+      );
+    }
+
     if (this.showOwnServicesOnly) {
       const currentUser =
         this.marketplaceBaseStore.applicationStore.identityService.currentUser;