Support Floating Vehicle Bunching

i18n/en-US.yml

@@ -374,6 +374,7 @@ components:
     signIn: Log in
     signOut: Log out
   NearbyView:
+    additionalVehicles: +{count} more nearby
     bikeRentalStation: Bike Rental Station
     bikesAvailable: "{bikesAvailable, plural, one {# bike} other {# bikes}} available"
     companyBicycle: "{company} Bike"

lib/actions/apiV2.js

@@ -395,7 +395,7 @@ export const fetchNearby = (position, radius, currentServiceWeek) => {
       $radius: Int
       $currentServiceWeek: LocalDateRangeInput
     ) {
-      nearest(lat:$lat, lon:$lon, maxDistance: $radius, first: 100, filterByPlaceTypes: [STOP, VEHICLE_RENT, BIKE_PARK, CAR_PARK]) {
+      nearest(lat:$lat, lon:$lon, maxDistance: $radius, first: 100, filterByPlaceTypes: [STOP, VEHICLE_RENT, BIKE_PARK, CAR_PARK], maxResults: 100) {
         edges {
           node {
             id

lib/components/viewers/nearby/nearby-view.tsx

@@ -236,14 +236,39 @@ function NearbyView({
     )
   )
 
-  // If configured, filter out stops that don't have any patterns
-  const filteredNearby = nearby?.filter((n: any) => {
-    if (n.place.__typename === 'Stop' && nearbyViewConfig?.hideEmptyStops) {
-      const patternArray = patternArrayforStops(n.place, routeSortComparator)
-      return !(patternArray?.length === 0)
+  const scooterGroups = nearby?.reduce((acc: any, item: any) => {
+    if (item.place.__typename === 'RentalVehicle') {
+      const network = item.place.network
+      if (!acc[network]) {
+        acc[network] = {
+          count: 1,
+          nearest: item
+        }
+      } else {
+        acc[network].count++
+      }
     }
-    return true
-  })
+    return acc
+  }, {})
+
+  // If configured, filter out stops that don't have any patterns
+  const filteredNearby = nearby
+    ?.filter((n: any) => {
+      if (n.place.__typename === 'Stop' && nearbyViewConfig?.hideEmptyStops) {
+        const patternArray = patternArrayforStops(n.place, routeSortComparator)
+        return !(patternArray?.length === 0)
+      }
+      return true
+    })
+    .filter((n: any) => {
+      if (
+        Object.keys(scooterGroups).length > 0 &&
+        n.place.__typename === 'RentalVehicle'
+      ) {
+        return scooterGroups[n.place?.network].nearest.id === n.id
+      }
+      return true
+    })
 
   const nearbyItemList =
     filteredNearby?.map &&
@@ -264,7 +289,12 @@ function NearbyView({
           /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
           tabIndex={0}
         >
-          {getNearbyItem({ ...n.place, distance: n.distance, nearbyRoutes })}
+          {getNearbyItem({
+            ...n.place,
+            additionalCount: scooterGroups?.[n.place?.network]?.count,
+            distance: n.distance,
+            nearbyRoutes
+          })}
         </div>
       </li>
     ))

lib/components/viewers/nearby/styled.tsx

@@ -1,6 +1,7 @@
-import { DARK_TEXT_GREY, grey } from '../../util/colors'
 import styled from 'styled-components'
 
+import { DARK_TEXT_GREY, grey } from '../../util/colors'
+
 export const FloatingLoadingIndicator = styled.div`
   aspect-ratio: 1;
   background: white;
@@ -108,3 +109,30 @@ export const Scrollable = styled.div`
   height: 100%;
   overflow-y: scroll;
 `
+
+export const CardFooter = styled.div`
+  background: rgba(0, 0, 0, 0.2);
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+  color: ${grey[700]};
+  font-size: 15px;
+  padding: 5px 12px;
+  margin-top: -6px;
+
+  span {
+    padding-top: 5px;
+    display: block;
+  }
+
+  &::before {
+    background: white;
+    border-radius: 10px;
+    content: '';
+    display: block;
+    height: 12px;
+    margin-left: -12px;
+    margin-top: -12px;
+    padding: 0;
+    width: calc(100% + 24px);
+  }
+`

lib/components/viewers/nearby/vehicle-rent.tsx

@@ -1,17 +1,17 @@
 import { Bicycle } from '@styled-icons/fa-solid/Bicycle'
 import { Company } from '@opentripplanner/types'
 import { connect } from 'react-redux'
+import { FormattedMessage, IntlShape, useIntl } from 'react-intl'
 // @ts-expect-error icons doesn't have typescript?
 import { getCompanyIcon } from '@opentripplanner/icons/lib/companies'
-import { IntlShape, useIntl } from 'react-intl'
 // @ts-expect-error icons doesn't have typescript?
 import { Micromobility } from '@opentripplanner/icons'
 import React, { Suspense } from 'react'
 
 import { AppReduxState } from '../../../util/state-types'
 import { IconWithText } from '../../util/styledIcon'
 
-import { Card, CardBody, CardHeader, CardTitle } from './styled'
+import { Card, CardBody, CardFooter, CardHeader, CardTitle } from './styled'
 import DistanceDisplay from './distance-display'
 
 type VehicleFormFactor =
@@ -101,6 +101,7 @@ const Vehicle = ({
     vehicle.name === 'Default vehicle type'
       ? getVehicleText(formFactor, companyLabel, intl)
       : vehicle.name
+
   return (
     <Card>
       <CardHeader>
@@ -119,6 +120,18 @@ const Vehicle = ({
         )}
         {fromToSlot}
       </CardBody>
+      {vehicle.additionalCount > 0 && (
+        <CardFooter>
+          <span>
+            <FormattedMessage
+              id="components.NearbyView.additionalVehicles"
+              values={{
+                count: vehicle.additionalCount
+              }}
+            />
+          </span>
+        </CardFooter>
+      )}
     </Card>
   )
 }