@finos/legend-application-marketplace 0.2.2 → 0.2.4

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/MarketplaceCard/FieldSearchResultListItem.tsx

@@ -0,0 +1,163 @@
+/**
+ * Copyright (c) 2020-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 { useState } from 'react';
+import { Chip, Typography } from '@mui/material';
+import { DatasetIcon, PackageIcon } from '@finos/legend-art';
+import type {
+  FieldSearchDataProductEntry,
+  FieldSearchResultState,
+} from '../../stores/lakehouse/fieldSearch/FieldSearchResultState.js';
+import { LegendMarketplaceListItem } from '../MarketplaceCard/LegendMarketplaceListItem.js';
+
+enum FieldSearchResultListItemLabel {
+  SHOW_LESS = 'Show Less',
+  MORE_SUFFIX = 'More',
+  DATASET_SEPARATOR = '|',
+  EMPTY_VALUE = '-',
+}
+
+enum FieldSearchResultListItemValue {
+  COLLAPSED_VISIBLE_DATA_PRODUCTS = 2,
+  MAX_DESCRIPTION_LENGTH = 150,
+}
+
+export const FieldSearchResultListRow = observer(
+  (props: {
+    fieldSearchResultState: FieldSearchResultState;
+    expanded: boolean;
+    onToggleExpanded: (rowId: string) => void;
+    onOpenDataProduct: (dataProduct: FieldSearchDataProductEntry) => void;
+  }): React.ReactNode => {
+    const {
+      fieldSearchResultState,
+      expanded,
+      onToggleExpanded,
+      onOpenDataProduct,
+    } = props;
+
+    const [descriptionExpanded, setDescriptionExpanded] = useState(false);
+    const description = fieldSearchResultState.fieldDescription;
+    const isDescriptionTruncatable =
+      description.length >
+      FieldSearchResultListItemValue.MAX_DESCRIPTION_LENGTH;
+    const displayDescription =
+      !descriptionExpanded && isDescriptionTruncatable
+        ? `${description.substring(0, FieldSearchResultListItemValue.MAX_DESCRIPTION_LENGTH)}...`
+        : description;
+
+    const visibleDataProducts = expanded
+      ? fieldSearchResultState.dataProducts
+      : fieldSearchResultState.dataProducts.slice(
+          0,
+          FieldSearchResultListItemValue.COLLAPSED_VISIBLE_DATA_PRODUCTS,
+        );
+    const hiddenDataProductCount = Math.max(
+      0,
+      fieldSearchResultState.dataProducts.length -
+        FieldSearchResultListItemValue.COLLAPSED_VISIBLE_DATA_PRODUCTS,
+    );
+    const toggleLabel = expanded
+      ? FieldSearchResultListItemLabel.SHOW_LESS
+      : `+${hiddenDataProductCount} ${FieldSearchResultListItemLabel.MORE_SUFFIX}`;
+
+    const content = (
+      <div className="marketplace-lakehouse-field-search-results__list-item-grid">
+        <div className="marketplace-lakehouse-field-search-results__field-name-cell">
+          <Typography className="marketplace-lakehouse-field-search-results__list-item-text marketplace-lakehouse-field-search-results__list-item-text--primary">
+            {fieldSearchResultState.fieldName}
+          </Typography>
+        </div>
+        <div className="marketplace-lakehouse-field-search-results__type-cell">
+          <Typography className="marketplace-lakehouse-field-search-results__list-item-text">
+            {fieldSearchResultState.fieldType}
+          </Typography>
+        </div>
+        <div className="marketplace-lakehouse-field-search-results__description-cell">
+          <Typography className="marketplace-lakehouse-field-search-results__list-item-text">
+            {displayDescription}
+          </Typography>
+          {isDescriptionTruncatable && (
+            <button
+              className="marketplace-lakehouse-field-search-results__description-toggle"
+              onClick={(e) => {
+                e.stopPropagation();
+                setDescriptionExpanded(!descriptionExpanded);
+              }}
+            >
+              {descriptionExpanded ? 'Show less' : 'Show more'}
+            </button>
+          )}
+        </div>
+        <div className="marketplace-lakehouse-field-search-results__data-products-cell">
+          {fieldSearchResultState.dataProducts.length > 0 ? (
+            <>
+              {visibleDataProducts.map((dataProduct) => (
+                <Chip
+                  key={`${fieldSearchResultState.id}-${dataProduct.path}-${dataProduct.datasetName ?? ''}`}
+                  clickable={true}
+                  label={
+                    <span className="marketplace-lakehouse-field-search-results__chip-label">
+                      <PackageIcon className="marketplace-lakehouse-field-search-results__chip-icon" />
+                      <span>{dataProduct.name}</span>
+                      {dataProduct.datasetName && (
+                        <span className="marketplace-lakehouse-field-search-results__chip-secondary">
+                          <span className="marketplace-lakehouse-field-search-results__chip-separator">
+                            {FieldSearchResultListItemLabel.DATASET_SEPARATOR}
+                          </span>
+                          <DatasetIcon className="marketplace-lakehouse-field-search-results__chip-icon" />
+                          <span className="marketplace-lakehouse-field-search-results__chip-secondary-text">
+                            {dataProduct.datasetName}
+                          </span>
+                        </span>
+                      )}
+                    </span>
+                  }
+                  onClick={() => onOpenDataProduct(dataProduct)}
+                  className="marketplace-lakehouse-field-search-results__data-product-link"
+                  size="small"
+                />
+              ))}
+              {fieldSearchResultState.dataProducts.length >
+                FieldSearchResultListItemValue.COLLAPSED_VISIBLE_DATA_PRODUCTS && (
+                <Chip
+                  key={`${fieldSearchResultState.id}-toggle`}
+                  label={toggleLabel}
+                  onClick={() => onToggleExpanded(fieldSearchResultState.id)}
+                  size="small"
+                  variant="outlined"
+                  className="marketplace-lakehouse-field-search-results__data-product-toggle"
+                />
+              )}
+            </>
+          ) : (
+            <Typography className="marketplace-lakehouse-field-search-results__list-item-text marketplace-lakehouse-field-search-results__list-item-text--empty">
+              {FieldSearchResultListItemLabel.EMPTY_VALUE}
+            </Typography>
+          )}
+        </div>
+      </div>
+    );
+
+    return (
+      <LegendMarketplaceListItem
+        className="marketplace-lakehouse-field-search-results__list-item"
+        content={content}
+      />
+    );
+  },
+);

package/src/components/MarketplaceSearchFiltersPanel/MarketplaceSearchFiltersPanel.tsx

@@ -181,7 +181,7 @@ const TaxonomyTreeNode: React.FC<{
   );
 });
 
-const FilterSection: React.FC<{
+export const FilterSection: React.FC<{
   title: string;
   children: React.ReactNode;
 }> = ({ title, children }) => (
@@ -195,7 +195,7 @@ const FilterSection: React.FC<{
   </div>
 );
 
-const FilterCheckboxOption: React.FC<{
+export const FilterCheckboxOption: React.FC<{
   label: string;
   checked: boolean;
   onChange: () => void;

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/components/ProviderCard/LegendMarketplaceTerminalCard.tsx

@@ -48,6 +48,9 @@ export const LegendMarketplaceTerminalCard = observer(
     );
 
     const [modalMessage, setModalMessage] = useState<string>('');
+    const [modalTotalCount, setModalTotalCount] = useState<
+      number | null | undefined
+    >(undefined);
 
     const legendMarketplaceBaseStore = useLegendMarketplaceBaseStore();
     const applicationStore = legendMarketplaceBaseStore.applicationStore;
@@ -72,6 +75,7 @@ export const LegendMarketplaceTerminalCard = observer(
         if (result.recommendations && result.recommendations.length > 0) {
           setRecommendedItems(result.recommendations);
           setModalMessage(result.message);
+          setModalTotalCount(result.totalCount);
           setShowRecommendationsModal(true);
         }
       } catch (error) {
@@ -97,9 +101,11 @@ export const LegendMarketplaceTerminalCard = observer(
         _selectedTerminal: TerminalResult,
         recommendations: TerminalResult[],
         responseMessage: string,
+        totalCount?: number | null,
       ) => {
         setRecommendedItems(recommendations);
         setModalMessage(responseMessage);
+        setModalTotalCount(totalCount);
         setShowRecommendationsModal(true);
       },
       [],
@@ -203,6 +209,7 @@ export const LegendMarketplaceTerminalCard = observer(
           setShowModal={setShowRecommendationsModal}
           onViewCart={handleViewCart}
           onTerminalSelected={handleTerminalSelected}
+          totalCount={modalTotalCount}
         />
       </Card>
     );

package/src/components/SearchBar/LegendMarketplaceSearchBar.tsx

@@ -63,13 +63,18 @@ export interface Vendor {
 
 export const LegendMarketplaceSearchBar = observer(
   (props: {
-    onSearch?: (query: string | undefined, useProducerSearch: boolean) => void;
+    onSearch?: (
+      query: string | undefined,
+      useProducerSearch: boolean,
+      useFieldSearch: boolean,
+    ) => void;
     stateSearchQuery?: string | undefined;
     placeholder?: string;
     onChange?: (query: string) => void;
     className?: string | undefined;
     showSettings?: boolean;
     stateUseProducerSearch?: boolean | undefined;
+    stateUseFieldSearch?: boolean;
     enableAutosuggest?: boolean;
   }): JSX.Element => {
     const {
@@ -80,6 +85,7 @@ export const LegendMarketplaceSearchBar = observer(
       className,
       showSettings,
       stateUseProducerSearch,
+      stateUseFieldSearch,
       enableAutosuggest = true,
     } = props;
 
@@ -92,6 +98,9 @@ export const LegendMarketplaceSearchBar = observer(
     const [useProducerSearch, setUseProducerSearch] = useState(
       stateUseProducerSearch ?? false,
     );
+    const [useFieldSearch, setUseFieldSearch] = useState(
+      stateUseFieldSearch ?? false,
+    );
     const [searchMenuAnchorEl, setSearchMenuAnchorEl] =
       useState<HTMLElement | null>();
     const [suggestions, setSuggestions] = useState<SearchSuggestion[]>([]);
@@ -181,6 +190,10 @@ export const LegendMarketplaceSearchBar = observer(
       setUseProducerSearch(stateUseProducerSearch ?? false);
     }, [stateUseProducerSearch]);
 
+    useEffect(() => {
+      setUseFieldSearch(stateUseFieldSearch ?? false);
+    }, [stateUseFieldSearch]);
+
     useEffect(() => {
       const abortController = new AbortController();
 
@@ -241,7 +254,7 @@ export const LegendMarketplaceSearchBar = observer(
         selectedSuggestion.type === SearchSuggestionType.SEARCH_QUERY ||
         selectedSuggestion.type === SearchSuggestionType.DEFAULT
       ) {
-        onSearch?.(selectedQuery, useProducerSearch);
+        onSearch?.(selectedQuery, useProducerSearch, useFieldSearch);
         LegendMarketplaceTelemetryHelper.logEvent_SearchAutosuggestSelection(
           applicationStore.telemetryService,
           selectedQuery,
@@ -274,7 +287,7 @@ export const LegendMarketplaceSearchBar = observer(
 
     const handleSubmit = (event: React.FormEvent): void => {
       event.preventDefault();
-      onSearch?.(searchQuery, useProducerSearch);
+      onSearch?.(searchQuery, useProducerSearch, useFieldSearch);
     };
 
     const getOptionLabel = (option: SearchSuggestion | string): string =>
@@ -525,6 +538,9 @@ export const LegendMarketplaceSearchBar = observer(
                     checked={useProducerSearch}
                     onChange={(event) => {
                       setUseProducerSearch(event.target.checked);
+                      if (event.target.checked) {
+                        setUseFieldSearch(false);
+                      }
                       LegendMarketplaceTelemetryHelper.logEvent_ToggleProducerSearch(
                         applicationStore.telemetryService,
                         event.target.checked,
@@ -540,6 +556,31 @@ export const LegendMarketplaceSearchBar = observer(
                 }
               />
             </MenuItem>
+            <MenuItem>
+              <FormControlLabel
+                control={
+                  <Switch
+                    checked={useFieldSearch}
+                    onChange={(event) => {
+                      setUseFieldSearch(event.target.checked);
+                      if (event.target.checked) {
+                        setUseProducerSearch(false);
+                      }
+                      LegendMarketplaceTelemetryHelper.logEvent_ToggleFieldSearch(
+                        applicationStore.telemetryService,
+                        event.target.checked,
+                      );
+                    }}
+                  />
+                }
+                label={
+                  <>
+                    Field Search{' '}
+                    <LegendMarketplaceInfoTooltip title="Use this search to discover data products and datasets that contain a specific field" />
+                  </>
+                }
+              />
+            </MenuItem>
           </Menu>
         )}
       </form>

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

@@ -25,7 +25,10 @@ import {
   CubesLoadingIndicator,
   CubesLoadingIndicatorIcon,
 } from '@finos/legend-art';
-import { generateLakehouseSearchResultsRoute } from '../../__lib__/LegendMarketplaceNavigation.js';
+import {
+  generateFieldSearchResultsRoute,
+  generateLakehouseSearchResultsRoute,
+} from '../../__lib__/LegendMarketplaceNavigation.js';
 import {
   assertErrorThrown,
   isNonEmptyString,
@@ -46,6 +49,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 +143,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);
         }
 
@@ -211,16 +220,20 @@ export const MarketplaceLakehouseHome = observer(() => {
   const handleSearch = (
     _query: string | undefined,
     _useProducerSearch: boolean,
+    _useFieldSearch: boolean,
   ): void => {
     if (isNonEmptyString(_query)) {
       applicationStore.navigationService.navigator.goToLocation(
-        generateLakehouseSearchResultsRoute(_query, _useProducerSearch),
+        _useFieldSearch
+          ? generateFieldSearchResultsRoute(_query)
+          : generateLakehouseSearchResultsRoute(_query, _useProducerSearch),
       );
       LegendMarketplaceTelemetryHelper.logEvent_SearchQuery(
         applicationStore.telemetryService,
         _query,
         _useProducerSearch,
         LEGEND_MARKETPLACE_PAGE.HOME_PAGE,
+        _useFieldSearch,
       );
     }
   };