shrink station selector items (#710)

* shrink station selector items

* revert size of buttons on mobile

* Fix bug with station selection

* lint

* lint

common/components/inputs/StationSelector.tsx

@@ -34,7 +34,12 @@ export const StationSelector: React.FC<StationSelector> = ({
   } = useDelimitatedRoute();
   const mdBreakpoint = useBreakpoint('md');
   const station = type === 'from' ? fromStation : toStation;
-  const stationOptions = optionsForField(type, lineShort, fromStation, toStation, busRoute);
+  const stationOptions = optionsForField(type, lineShort, fromStation, busRoute);
+  const branchLabelWidth = {
+    'line-red': 'w-8',
+    'line-green': 'w-12',
+    DEFAULT: 'w-0',
+  };
   return (
     <Listbox value={station} onChange={setStation}>
       {({ open }) => (
@@ -64,7 +69,7 @@ export const StationSelector: React.FC<StationSelector> = ({
             leaveFrom="transform opacity-100 scale-100"
             leaveTo="transform opacity-0 scale-95"
           >
-            <Listbox.Options className="md:max-w-screen fixed bottom-16 left-0 right-0 top-auto m-auto max-h-96 max-w-xs overflow-auto rounded-md  border border-stone-200 bg-white  shadow-lg  ring-1 ring-black ring-opacity-5 focus:outline-none md:bottom-auto md:left-auto md:right-auto md:top-auto md:mt-1 md:max-h-96 md:-translate-x-1/2 md:border-none">
+            <Listbox.Options className="md:max-w-screen fixed bottom-16 left-0 right-0 top-auto m-auto max-h-[75vh] max-w-xs overflow-auto rounded-md  border border-stone-200 bg-white  shadow-lg  ring-1 ring-black ring-opacity-5 focus:outline-none md:bottom-auto md:left-auto md:right-auto md:top-auto md:mt-1 md:max-h-[66vh] md:-translate-x-1/2 md:border-none">
               <div className="py-1">
                 {stationOptions?.map((station, stationIndex) => (
                   <Listbox.Option
@@ -76,7 +81,7 @@ export const StationSelector: React.FC<StationSelector> = ({
                     }
                     className={({ active, selected, disabled }) =>
                       classNames(
-                        'relative select-none items-center px-4 py-2',
+                        'relative select-none items-center px-4 py-2 lg:py-1 lg:text-sm',
                         active ? lineColorLightBackground[line ?? 'DEFAULT'] : 'text-gray-900',
                         selected
                           ? `bg-opacity-20 font-semibold ${lineColorBackground[line ?? 'DEFAULT']}`
@@ -86,8 +91,20 @@ export const StationSelector: React.FC<StationSelector> = ({
                     }
                     value={station}
                   >
-                    <div className="flex items-baseline justify-between gap-x-1 truncate">
-                      {station.stop_name}
+                    <div className="flex items-center justify-between gap-x-1 truncate">
+                      <div className="flex flex-row items-baseline justify-start">
+                        <div
+                          className={classNames(
+                            'flex flex-row gap-[1px] text-xs text-stone-500',
+                            branchLabelWidth[line ?? 'DEFAULT'] ?? ''
+                          )}
+                        >
+                          {station.branches?.map((branch) => (
+                            <p key={branch}>{branch}</p>
+                          ))}
+                        </div>
+                        {station.stop_name}
+                      </div>
                       <div className="flex flex-row gap-x-1 pl-4">
                         {station.enclosed_bike_parking ? (
                           <FontAwesomeIcon

common/components/widgets/StationSelectorWidget.tsx

@@ -7,6 +7,7 @@ import { StationSelector } from '../inputs/StationSelector';
 import { useDelimitatedRoute, useUpdateQuery } from '../../utils/router';
 import {
   getParentStationForStopId,
+  getStationForInvalidFromSelection,
   optionsStation,
   stopIdsForStations,
 } from '../../utils/stations';
@@ -34,26 +35,41 @@ export const StationSelectorWidget: React.FC<StationSelectorWidgetProps> = ({ li
     updateQueryParams({ from: fromStopIds?.[0], to: toStopIds?.[0] });
   }, [fromStation, toStation, updateQueryParams]);
 
-  const updateStations = (action: 'to' | 'from' | 'swap', stationId?: Station) => {
+  const updateStations = (action: 'to' | 'from' | 'swap', newStation?: Station) => {
     switch (action) {
       case 'to':
         updateQueryParams(
           {
-            to: stopIdsForStations(fromStation, stationId).toStopIds?.[0],
+            to: stopIdsForStations(fromStation, newStation).toStopIds?.[0],
           },
           undefined,
           false
         );
         break;
-      case 'from':
+      case 'from': {
+        if (newStation?.branches?.some((branch) => toStation?.branches?.includes(branch))) {
+          updateQueryParams(
+            {
+              from: stopIdsForStations(newStation, toStation).fromStopIds?.[0],
+            },
+            undefined,
+            false
+          );
+          break;
+        }
+        // If `from` station is on a separate branch, set the `to` station to gov center for GL and Park for RL.
+        const newToStation = getStationForInvalidFromSelection(line);
+        const stationIds = stopIdsForStations(newStation, newToStation);
         updateQueryParams(
           {
-            from: stopIdsForStations(stationId, toStation).fromStopIds?.[0],
+            from: stationIds?.fromStopIds?.[0],
+            to: stationIds?.toStopIds?.[0],
           },
           undefined,
           false
         );
         break;
+      }
       case 'swap': {
         const { fromStopIds, toStopIds } = stopIdsForStations(fromStation, toStation);
         updateQueryParams({ from: toStopIds?.[0], to: fromStopIds?.[0] }, undefined, false);
@@ -75,7 +91,7 @@ export const StationSelectorWidget: React.FC<StationSelectorWidgetProps> = ({ li
         type={'from'}
         fromStation={fromStation}
         toStation={toStation}
-        setStation={(stationId) => updateStations('from', stationId)}
+        setStation={(newStation) => updateStations('from', newStation)}
       />
       <div className="flex h-4 w-4 items-center justify-center">
         <FontAwesomeIcon icon={faArrowRight} className="h-4 w-4 text-white" />
@@ -84,7 +100,7 @@ export const StationSelectorWidget: React.FC<StationSelectorWidgetProps> = ({ li
         type={'to'}
         fromStation={fromStation}
         toStation={toStation}
-        setStation={(stationId) => updateStations('to', stationId)}
+        setStation={(newStation) => updateStations('to', newStation)}
       />
       <Button
         onClick={() => updateStations('swap')}

common/utils/stations.ts

@@ -1,5 +1,5 @@
 import type { SelectOption } from '../../common/types/inputs';
-import type { LineShort } from '../../common/types/lines';
+import type { Line, LineShort } from '../../common/types/lines';
 import type { Station } from '../../common/types/stations';
 import type { Location } from '../types/charts';
 import type { Direction } from '../types/dataPoints';
@@ -9,7 +9,6 @@ export const optionsForField = (
   type: 'from' | 'to',
   line: LineShort,
   fromStation: Station | null,
-  toStation: Station | null,
   busRoute?: string
 ) => {
   if (type === 'from') {
@@ -85,6 +84,12 @@ export const getParentStationForStopId = (stopId: string) => {
   return parentStationIndex[stopId];
 };
 
+export const getStationForInvalidFromSelection = (line: Line): Station => {
+  if (line === 'line-green') return getParentStationForStopId('70202'); // Gov. Center
+  if (line === 'line-red') return getParentStationForStopId('70076'); // Park St.
+  throw new Error('There should be no other lines with invalid from station selections.');
+};
+
 export const stopIdsForStations = (from: Station | undefined, to: Station | undefined) => {
   if (to === undefined || from === undefined) {
     return { fromStopIds: undefined, toStopIds: undefined };