Boost service discovery (tile) results based on boosted category. (#1392

)

In order to surface some specific results on the tile results page, we
make use of an optional filter on a newly added Algolia index property.

On the backend, we've created a new column, `boosted_category`, which we
can optionally set on each Service. This allows us perform an optional
filter only on the tile results pages, and not the general search page,
where services that match the optional filter are boosted in ranking.

For now, there can only be one `boosted_category` per service, but this
is sufficient for the current use case, where only two services need to
be boosted, and they each only apply to one category.

app/pages/ServiceDiscoveryResults/ServiceDiscoveryResults.tsx

@@ -15,6 +15,7 @@ import Sidebar from "components/search/Sidebar/Sidebar";
 import { Header } from "components/search/Header/Header";
 import { Category } from "models/Meta";
 
+import whitelabel from "utils/whitelabel";
 import {
   useEligibilitiesForCategory,
   useSubcategoriesForCategory,
@@ -26,6 +27,7 @@ import styles from "./ServiceDiscoveryResults.module.scss";
 type MatchParams = { categorySlug: string };
 type RouterLocation = RouteComponentProps["location"];
 type SearchState = {
+  refinementList?: { categories?: string[] };
   configure?: {
     aroundRadius?: string;
   };
@@ -148,6 +150,26 @@ const InnerServiceDiscoveryResults = ({
     sortAlgoliaSubcategoryRefinements,
   } = category;
 
+  const configureProps: Record<string, any> = {
+    filters: `categories:'${algoliaCategoryName}'`,
+  };
+  if (!category.disableGeoLocation) {
+    Object.assign(configureProps, {
+      aroundLatLng: `${location.lat}, ${location.lng}`,
+      aroundRadius: searchRadius,
+      aroundPrecision: 1600,
+    });
+  }
+  if (whitelabel.useBoostedCategories) {
+    const selectedSubcategories = searchState.refinementList?.categories ?? [];
+    configureProps.optionalFilters = subcategoryNames
+      .filter((x) => selectedSubcategories.includes(x))
+      .map((x) => `boosted_category:${x}`)
+      // Our Algolia plan only allows for up to one optional filter, so just
+      // drop all but the first.
+      .slice(0, 1);
+  }
+
   return (
     <div className={styles.container}>
       <Helmet>
@@ -169,16 +191,7 @@ const InnerServiceDiscoveryResults = ({
         searchState={searchState}
         onSearchStateChange={onSearchStateChange}
       >
-        {category.disableGeoLocation ? (
-          <Configure filters={`categories:'${algoliaCategoryName}'`} />
-        ) : (
-          <Configure
-            filters={`categories:'${algoliaCategoryName}'`}
-            aroundLatLng={`${location.lat}, ${location.lng}`}
-            aroundRadius={searchRadius}
-            aroundPrecision={1600}
-          />
-        )}
+        <Configure {...configureProps} />
         <div className={styles.flexContainer}>
           <Sidebar
             setSearchRadius={setSearchRadius}

app/utils/whitelabel.ts

@@ -59,6 +59,7 @@ interface WhiteLabelSite {
   siteNavStyle: string;
   siteUrl: string;
   title: string;
+  useBoostedCategories: boolean;
   userWay: boolean;
   weGlot?: {
     apiKey: string;
@@ -120,6 +121,7 @@ services and re-entry programs.`,
   showSearch: true,
   showReportCrisis: false,
   siteNavStyle: styles.siteNav,
+  useBoostedCategories: false,
   userWay: false,
 } as const;
 
@@ -177,6 +179,7 @@ const SFServiceGuide: WhiteLabelSite = {
   showBreakingNews: true,
   title: "SF Service Guide",
   showReportCrisis: true,
+  useBoostedCategories: true,
 } as const;
 
 const LinkSF: WhiteLabelSite = {
@@ -205,6 +208,7 @@ const defaultWhiteLabel: WhiteLabelSite = {
   showBreakingNews: true,
   title: "SF Service Guide",
   showReportCrisis: true,
+  useBoostedCategories: true,
 } as const;
 
 const Ucsf: WhiteLabelSite = {