Correctly sort routes in route viewer by agency

example-config.yml

@@ -29,7 +29,7 @@ persistence:
 
 ### If using the OTP Middleware to store user profiles
 ### with Auth0 as the authentication mechanism,
-### then use the otp_middleware strategy below instead: 
+### then use the otp_middleware strategy below instead:
 # persistence:
 #  enabled: true
 #  strategy: otp_middleware
@@ -130,6 +130,57 @@ itinerary:
   # (Requires using LineItinerary.)
   showRouteFares: false
 
+# The transitOperators key is a list of transit operators that can be used to
+# order transit agencies when sorting by route. Also, this can optionally
+# provide operator logos that appear in the the route viewer and itineraries).
+# Note: these logos will override the values found in
+# agency.txt#agency_branding_url.
+#
+# When sorting routes, otp-react-redux uses otp-ui's route-comparator which uses
+# multiple criteria to sort routes. (See https://git.io/Jk2Ia). The routes are
+# first sorted according to a comparator value based off of the agency. After
+# sorting routes by the agency, additional sorting criteria is used for routes
+# that yield the same agency comparator value.
+#
+# If the transitOperators key is not defined, route sorting will fall back to
+# using the agency name. If the transitOperators key is defined, the order field
+# defined for each agency is used as a comparator value. Agencies are matched
+# according to both the feedId and agencyId. If no match is found or the order
+# field is not undefined, the associated routes will be placed after all other
+# agencies which did have a match with a defined order value.
+#
+# This works best with the IBI fork of OTP which returns the necessary
+# information in the route index API. Check the build logs of OTP to see what
+# feedIds and agencyIds were found as these IDs can sometimes be auto-generated.
+#
+# Shown below is an example transitOperators config setting for the Portland, OR
+# area which uses 2 GTFS files (from TriMet and C-TRAN).
+#
+# transitOperators:
+#   - feedId: TriMet
+#     agencyId: PSC
+#     logo: https://d2tyb7byn1fef9.cloudfront.net/psc.png
+#     order: 1
+#   - feedId: TriMet
+#     agencyId: TRIMET
+#     name: TriMet
+#     logo: http://news.trimet.org/wordpress/wp-content/uploads/2019/04/TriMet-logo-300x300.png
+#     order: 1
+#   - feedId: TriMet
+#     agencyId: TRAM
+#     logo: https://d2tyb7byn1fef9.cloudfront.net/tram.png
+#     order: 1
+#     # The C-TRAN GTFS feed does not come with feed_id or agency_id filled. The
+#     # value of '1' is a feed_id and agency_id that OTP auto-generated.
+#   - feedId: '1'
+#     agencyId: '1'
+#     name: C-TRAN
+#     logo: https://d2tyb7byn1fef9.cloudfront.net/ctran.png
+#     defaultRouteColor: ffffff
+#     defaultRouteTextColor: '000000'
+#     longNameSplitter: ' - '
+#     order: 2
+
 ### Use this config for the standard mode selector
 # modeGroups:
 #   - name: Transit

lib/components/app/batch-routing-panel.js

@@ -33,12 +33,13 @@ class BatchRoutingPanel extends Component {
       activeSearch,
       itineraryFooter,
       LegIcon,
+      ModeIcon,
       mobile,
       showUserSettings
     } = this.props
     const actionText = mobile ? 'tap' : 'click'
     return (
-      <ViewerContainer>
+      <ViewerContainer ModeIcon={ModeIcon}>
         <LocationField
           inputPlaceholder={`Enter start location or ${actionText} on map...`}
           locationType='from'

lib/components/app/call-taker-panel.js

@@ -240,7 +240,7 @@ class CallTakerPanel extends Component {
     const maxPlacesDefined = intermediatePlaces.length >= 3
     const addIntermediateDisabled = !from || !to || maxPlacesDefined
     return (
-      <ViewerContainer>
+      <ViewerContainer ModeIcon={ModeIcon}>
         {/* FIXME: should this be a styled component */}
         <div className='main-panel' style={{
           position: 'absolute',

lib/components/app/default-main-panel.js

@@ -26,7 +26,7 @@ class DefaultMainPanel extends Component {
     const mostRecentQuery = activeSearch ? activeSearch.query : null
     const planDisabled = isEqual(currentQuery, mostRecentQuery)
     return (
-      <ViewerContainer>
+      <ViewerContainer ModeIcon={ModeIcon}>
         <div style={{
           position: 'absolute',
           top: 0,

lib/components/map/connected-stop-marker.js

@@ -1,4 +1,4 @@
-import DefaultStopMarker from '@opentripplanner/stops-overlay/lib/stop-marker'
+import DefaultStopMarker from '@opentripplanner/stops-overlay/lib/default-stop-marker'
 import { connect } from 'react-redux'
 
 import { setLocation } from '../../actions/map'
@@ -8,7 +8,8 @@ import { setViewedStop } from '../../actions/ui'
 
 const mapStateToProps = (state, ownProps) => {
   return {
-    languageConfig: state.otp.config.language
+    languageConfig: state.otp.config.language,
+    stop: ownProps.entity
   }
 }
 

lib/components/map/connected-stops-overlay.js

@@ -8,8 +8,13 @@ import { findStopsWithinBBox } from '../../actions/api'
 
 const mapStateToProps = (state, ownProps) => {
   return {
-    StopMarker,
-    stops: state.otp.overlay.transit.stops
+    stops: state.otp.overlay.transit.stops,
+    symbols: [
+      {
+        minZoom: 15,
+        symbol: StopMarker
+      }
+    ]
   }
 }
 

lib/components/mobile/main.js

@@ -50,7 +50,7 @@ class MobileMain extends Component {
 
     // check for route viewer
     if (uiState.mainPanelContent === MainPanelContent.ROUTE_VIEWER) {
-      return <MobileRouteViewer />
+      return <MobileRouteViewer ModeIcon={ModeIcon} />
     }
 
     // check for viewed stop

lib/components/mobile/route-viewer.js

@@ -12,6 +12,7 @@ import { setViewedRoute, setMainPanelContent } from '../../actions/ui'
 
 class MobileRouteViewer extends Component {
   static propTypes = {
+    ModeIcon: PropTypes.element.isRequired,
     setViewedRoute: PropTypes.func,
     setMainPanelContent: PropTypes.func
   }
@@ -22,6 +23,7 @@ class MobileRouteViewer extends Component {
   }
 
   render () {
+    const { ModeIcon } = this.props
     return (
       <MobileContainer>
         <MobileNavigationBar
@@ -34,7 +36,7 @@ class MobileRouteViewer extends Component {
         </div>
 
         <div className='viewer-container'>
-          <RouteViewer hideBackButton />
+          <RouteViewer hideBackButton ModeIcon={ModeIcon} />
         </div>
       </MobileContainer>
     )