refactor: location search results display (#2168)

* fixup :aws_credentials

* chore: get places index name from env var

* deps(mix): add :address_us

* refactor(LocationService): use get_place for suggestions

* chore: update airplane icon

* refactor(Algolia.Query.Request): enable configuration via frontend

* refactor: frontend everything

* temporarily disable caching

* bonus: correct smoke test

this is a Stop rather than a Station

assets/css/_autocomplete-theme.scss

@@ -91,7 +91,8 @@
   .aa-Item {
     border-bottom: $border;
     border-radius: 0;
-    font-weight: normal;
+    display: flex;
+    padding: calc(#{$base-spacing} / 2) $base-spacing;
 
     &:hover {
       background-color: $brand-primary-lightest;
@@ -102,25 +103,17 @@
       font-weight: bold;
     }
 
-    > a,
-    > button {
-      color: currentColor;
-      display: flex;
-      font-weight: inherit;
-      gap: .25rem;
-      min-width: 0;
-      padding: calc(#{$base-spacing} / 2) $base-spacing;
-    }
-
     a:hover {
       text-decoration: none;
     }
 
     [class*='c-svg__icon'] {
-      width: 1em;
+      height: auto;
+      top: .15em;
     }
   }
 
+  .aa-ItemLink,
   .aa-ItemContent,
   .aa-ItemContentBody {
     display: unset;
@@ -141,6 +134,26 @@
     }
     // stylelint-enable declaration-no-important
   }
+
+  // more specific layout
+  [data-autocomplete-source-id='geolocation'] {
+    .aa-ItemContentTitle {
+      color: $brand-primary;
+    }
+  }
+  [data-autocomplete-source-id='algolia'],
+  [data-autocomplete-source-id='locations'],
+  [data-autocomplete-source-id='popular'] {
+    .fa-map-marker {
+      color: $brand-primary;
+    }
+    .aa-ItemContent {
+      align-items: first baseline;
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+    }
+  }
 }
 
 #header-desktop {

assets/js/algolia-result.js

@@ -223,7 +223,7 @@ function _iconFromRoute(route) {
 export function getPopularIcon(icon) {
   switch (icon) {
     case "airplane":
-      return TEMPLATES.fontAwesomeIcon.render({ icon: "fa-plane" });
+      return TEMPLATES.fontAwesomeIcon.render({ icon: "fa-plane-departure" });
     default:
       return Icons.getFeatureIcon(icon);
   }
@@ -309,7 +309,9 @@ export function getUrl(hit, index) {
       return _contentUrl(hit);
 
     case "locations":
-      return `transit-near-me?address=${encodeURIComponent(hit.address)}`;
+      return `transit-near-me?address=${encodeURIComponent(
+        hit.street_address
+      )}`;
 
     case "usemylocation":
       return "#";
@@ -343,7 +345,7 @@ export function getTitle(hit, type) {
   switch (type) {
     case "locations":
       // eslint-disable-next-line no-case-declarations
-      const { address: text, highlighted_spans: spans } = hit;
+      const { street_address: text, highlighted_spans: spans } = hit;
 
       return highlightText(text, spans);
     case "stops":
@@ -451,21 +453,43 @@ function _getCommuterRailZone(hit) {
   if (hit.zone) {
     return [`<span class="c-icon__cr-zone">Zone ${hit.zone}</span>`];
   }
+  if (hit.icon === "station") {
+    // the north/south station popular result
+    return [`<span class="c-icon__cr-zone">Zone 1A</span>`];
+  }
   return [];
 }
 
 function _stopIcons(hit, type) {
+  const isBusStop = type === "stops" && !hit.stop["station?"];
+  const featuresToFilter = isBusStop
+    ? ["access", "parking_lot", "bus"]
+    : ["access", "parking_lot"];
   const filteredFeatures = hit.features.filter(
-    feature => feature !== "access" && feature !== "parking_lot"
+    feature => !featuresToFilter.includes(feature)
   );
-
   const alertFeature = _getAlertIcon(hit, type);
   const allFeatures = alertFeature.concat(filteredFeatures);
   const allFeaturesSorted = _sortFeatures(allFeatures);
   const allIcons = _featuresToIcons(allFeaturesSorted);
 
   const zoneIcon = _getCommuterRailZone(hit);
 
+  if (isBusStop) {
+    return hit.routes
+      .filter(route => route.type === 3)
+      .map(route => {
+        return route.display_name
+          .replace("Bus: ", "")
+          .split(", ")
+          .map(
+            num =>
+              `<span class="c-icon__bus-pill--small u-bg--bus tw-mr-1">${num}</span>`
+          )
+          .join("");
+      });
+  }
+
   return allIcons.concat(zoneIcon);
 }
 

assets/js/algolia-results.js

@@ -73,7 +73,10 @@ export class AlgoliaResults {
       results.locations.hits.forEach((hit, idx) => {
         const elem = document.getElementById(`hit-location-${idx}`);
         if (elem) {
-          elem.addEventListener("click", this._locationSearch(hit.address));
+          elem.addEventListener(
+            "click",
+            this._locationSearch(hit.street_address)
+          );
         }
       });
       const useLocation = document.getElementById(

assets/js/test/algolia-result_test.js

@@ -166,7 +166,7 @@ describe("AlgoliaResult", () => {
   };
   const locationHits = {
     bostonCommon: {
-      address: "Boston Common, Tremont Street, Boston, MA, USA",
+      street_address: "Boston Common, Tremont Street, Boston, MA, USA",
       highlighted_spans: [
         { length: 2, offset: 3 },
         { length: 5, offset: 9 }

assets/js/test/algolia-results_test.js

@@ -137,7 +137,8 @@ describe("AlgoliaResults", () => {
         const hit = {
           stop: {
             id: "stop-id",
-            name: "pre_stop-name"
+            name: "pre_stop-name",
+            "station?": true
           },
           _highlightResult: {
             stop: {
@@ -164,7 +165,6 @@ describe("AlgoliaResults", () => {
         expect(result).to.be.a("string");
         expect(result).to.have.string("/stops/" + hit.stop.id);
         expect(result).to.have.string(hit._highlightResult.stop.name.value);
-        expect(result).to.have.string("stop-icon");
         expect(result).to.have.string("green-line-b-icon");
         expect(result).to.have.string("bus-icon");
         expect(result).to.have.string("Zone 8");
@@ -290,7 +290,8 @@ describe("AlgoliaResults", () => {
               hitTitle: "title1",
               stop: {
                 id: "id1",
-                name: "name1"
+                name: "name1",
+                "station?": true
               },
               _highlightResult: {
                 stop: {
@@ -308,7 +309,8 @@ describe("AlgoliaResults", () => {
               hitTitle: "title2",
               stop: {
                 id: "id2",
-                name: "name2"
+                name: "name2",
+                "station?": true
               },
               _highlightResult: {
                 stop: {

assets/js/trip-planner-location-controls.js

@@ -320,12 +320,13 @@ export class TripPlannerLocControls {
           );
           break;
         case "locations":
-          MapsHelpers.lookupPlace(hit.address).then(res => {
+          MapsHelpers.lookupPlace(hit.street_address).then(res => {
+            // this doesnt work
             const { latitude, longitude } = res;
             this.setStopValue(ac, hit);
             this.setAutocompleteValue(
               ac,
-              hit.address,
+              hit.street_address,
               lat,
               lng,
               latitude,

assets/ts/ui/autocomplete/__autocomplete.d.ts

@@ -2,7 +2,6 @@ import { Hit } from "@algolia/client-search";
 import { BaseItem } from "@algolia/autocomplete-core";
 import { Route, RouteType, Stop } from "../../__v3api";
 import { HighlightedSpan } from "../../helpers/text";
-import { TripPlannerLocControls } from "../../../js/trip-planner-location-controls";
 
 type AlgoliaItem = Hit<{ index: string }> & BaseItem;
 
@@ -35,12 +34,24 @@ type SearchResultItem = {
 export type LocationItem = {
   longitude: number;
   latitude: number;
-  address: string;
+  formatted: string;
   highlighted_spans: HighlightedSpan[];
+  street_address: string;
+  municipality: string;
+  state: string;
   url: string;
 };
 
-export type PopularItem = typeof TripPlannerLocControls.POPULAR[number];
+export type PopularItem = {
+  icon: "airplane" | "station";
+  name: string;
+  features: string[];
+  latitude: number;
+  longitude: number;
+  url: string;
+  state: string;
+  municipality: string;
+};
 
 export type AutocompleteItem = RouteItem | StopItem | ContentItem;
 export type Item = AutocompleteItem | LocationItem | PopularItem;

assets/ts/ui/autocomplete/__tests__/__snapshots__/config-test.ts.snap

@@ -7,22 +7,28 @@ exports[`Algolia template handles route item 1`] = `
     href="/schedules/111"
   >
     <div
-      class="aa-ItemContent"
+      class="aa-ItemContent tw-mt-1"
     >
-      <span />
-      <span
-        class="aa-ItemContentBody"
+      <div
+        class="tw-flex-grow"
       >
-        <span
-          class="aa-ItemContentTitle"
+        <div
+          class="tw-flex tw-items-baseline tw-gap-1"
         >
-          <span />
-           
           <span
-            class="c-search-result__long-name notranslate"
+            class="tw-basis-4 tw-flex-shrink-0"
           />
-        </span>
-      </span>
+          <div
+            class="aa-ItemContentTitle tw-flex-grow tw-font-normal"
+          >
+            <span />
+             
+            <span
+              class="tw-text-nowrap tw-text-gray-500 tw-text-sm tw-font-normal notranslate"
+            />
+          </div>
+        </div>
+      </div>
     </div>
   </a>
 </DocumentFragment>
@@ -37,15 +43,24 @@ exports[`Location template renders 1`] = `
     <div
       class="aa-ItemContent"
     >
-      <span
-        aria-hidden="true"
-        class="fa fa-fw fa-map-marker"
-      />
-      <span
-        class="aa-ItemContentTitle"
+      <div
+        class="tw-flex tw-items-baseline tw-gap-1"
+      >
+        <span
+          aria-hidden="true"
+          class="fa fa-fw fa-map-marker tw-basis-4 tw-flex-shrink-0"
+        />
+        <span
+          class="aa-ItemContentTitle tw-flex-grow"
+        >
+          123 Main St
+        </span>
+      </div>
+      <div
+        class="tw-text-nowrap tw-flex-grow-0 tw-text-gray-500 tw-text-sm tw-font-normal"
       >
-        South Station, Boston, MA
-      </span>
+        Town, MA
+      </div>
     </div>
   </a>
 </DocumentFragment>
@@ -60,25 +75,49 @@ exports[`Popular template renders 1`] = `
     <div
       class="aa-ItemContent"
     >
-      <span />
-      <span
-        class="c-search-result__feature-icons"
-      />
-      <span
-        class="c-search-result__feature-icons"
-      />
-      <span
-        class="c-search-result__feature-icons"
-      />
-      <span
-        class="aa-ItemContentBody"
+      <div
+        class="tw-flex-grow tw-mt-1"
       >
-        <span
-          class="aa-ItemContentTitle notranslate"
+        <div
+          class="tw-flex tw-items-baseline tw-flex-grow"
         >
-          South Station
-        </span>
-      </span>
+          <div
+            class="tw-basis-6"
+          />
+          <strong
+            class="aa-ItemContentTitle notranslate"
+          >
+            South Station
+          </strong>
+        </div>
+        <div
+          class="tw-flex tw-gap-1 tw-mt-2 tw-mb-1"
+        >
+          <span
+            class="c-search-result__feature-icons"
+          />
+          <span
+            class="c-search-result__feature-icons"
+          />
+          <span
+            class="c-search-result__feature-icons"
+          />
+          <span
+            class="c-search-result__feature-icons"
+          >
+            <span
+              class="c-icon__cr-zone"
+            >
+              Zone 1A
+            </span>
+          </span>
+        </div>
+      </div>
+      <div
+        class="tw-text-nowrap tw-text-gray-500 tw-text-sm tw-font-normal"
+      >
+        Town, MA
+      </div>
     </div>
   </a>
 </DocumentFragment>