feat(route-viewer): support filtering routes by agency or mode

Author: miles-grant-ibigroup

lib/components/viewers/route-viewer.js

@@ -33,14 +33,32 @@ class RouteViewer extends Component {
   static propTypes = {
     hideBackButton: PropTypes.bool,
     routes: PropTypes.object
-  }
+  };
+
+  state = {
+    agency: null,
+    mode: null
+  };
 
-  _backClicked = () => this.props.setMainPanelContent(null)
+  _backClicked = () => this.props.setMainPanelContent(null);
 
   componentDidMount () {
     this.props.findRoutes()
   }
 
+  /**
+   * Handle filter dropdown change. Id of the filter is equivalent to the key in the
+   * route object
+   */
+  onFilterChange = (event) => {
+    const { target } = event
+    const { id, value } = target
+    // id will be either 'agency' or 'mode' based on the dropdown used
+    this.setState({
+      [id]: value
+    })
+  };
+
   render () {
     const {
       findRoute,
@@ -51,11 +69,36 @@ class RouteViewer extends Component {
       transitOperators,
       viewedRoute
     } = this.props
-    const sortedRoutes = routes
-      ? Object.values(routes).sort(
-        coreUtils.route.makeRouteComparator(transitOperators)
+    const { agency, mode } = this.state
+    const routesArray = routes ? Object.values(routes) : []
+
+    const filteredAndSortedRoutes = routesArray
+      .filter(
+        (route) =>
+          // If the filter isn't defined, don't check.
+          (!agency || agency === route.agencyName) &&
+          (!mode || mode === route.mode)
+      )
+      .sort(coreUtils.route.makeRouteComparator(transitOperators))
+
+    // get agency and mode lists from route list
+    const agencies = Array.from(
+      new Set(routesArray.map((route) => route.agencyName || route.agency.name))
+    )
+      .filter((agency) => agency !== undefined)
+      .sort()
+
+    const modes = Array.from(
+      new Set(
+        routesArray
+          .filter((route) => route.mode !== undefined)
+          .map((route) => route.mode.toLowerCase())
       )
-      : []
+    )
+      // Correct capitalization
+      .map((mode) => mode[0].toUpperCase() + mode.substr(1).toLowerCase())
+      .sort()
+
     return (
       <div className='route-viewer'>
         {/* Header Block */}
@@ -74,32 +117,51 @@ class RouteViewer extends Component {
           <div className='header-text'>
             {languageConfig.routeViewer || 'Route Viewer'}
           </div>
-          <div className=''>
-            {languageConfig.routeViewerDetails}
+          <div className=''>{languageConfig.routeViewerDetails}</div>
+          <div className='search-and-filter'>
+            <Icon type='filter' />
+            <select id='agency' onBlur={this.onFilterChange} onChange={this.onFilterChange}>
+              <option value=''>All agencies</option>
+              {agencies.map((agency) => (
+                <option key={agency}>{agency}</option>
+              ))}
+            </select>
+            <select id='mode' onBlur={this.onFilterChange} onChange={this.onFilterChange}>
+              <option value=''>All modes</option>
+              {modes.map((mode) => (
+                <option key={mode} value={mode.toUpperCase()}>
+                  {mode}
+                </option>
+              ))}
+            </select>
           </div>
           <div style={{ clear: 'both' }} />
         </div>
 
         <div className='route-viewer-body'>
-          {sortedRoutes
-            .map(route => {
-              // Find operator based on agency_id (extracted from OTP route ID).
-              const operator = coreUtils.route.getTransitOperatorFromOtpRoute(
+          {filteredAndSortedRoutes.map((route) => {
+            // Find operator based on agency_id (extracted from OTP route ID).
+            const operator =
+              coreUtils.route.getTransitOperatorFromOtpRoute(
                 route,
                 transitOperators
               ) || {}
-              return (
-                <RouteRow
-                  findRoute={findRoute}
-                  isActive={viewedRoute && viewedRoute.routeId === route.id}
-                  key={route.id}
-                  operator={operator}
-                  route={route}
-                  setViewedRoute={setViewedRoute}
-                />
-              )
-            })
-          }
+            return (
+              <RouteRow
+                findRoute={findRoute}
+                isActive={viewedRoute && viewedRoute.routeId === route.id}
+                key={route.id}
+                operator={operator}
+                route={route}
+                setViewedRoute={setViewedRoute}
+              />
+            )
+          })}
+          {(agency || mode) && filteredAndSortedRoutes.length === 0 && (
+            <span className='noRoutesFoundMessage'>
+              No routes match your filter!
+            </span>
+          )}
         </div>
       </div>
     )
@@ -177,9 +239,10 @@ class RouteRow extends PureComponent {
       // Attempt to split route name if splitter is defined for operator (to
       // remove short name value from start of long name value).
       const nameParts = route.longName.split(longNameSplitter)
-      longName = (longNameSplitter && nameParts.length > 1)
-        ? nameParts[1]
-        : route.longName
+      longName =
+        longNameSplitter && nameParts.length > 1
+          ? nameParts[1]
+          : route.longName
       // If long name and short name are identical, set long name to be an empty
       // string.
       if (longName === route.shortName) longName = ''
@@ -191,14 +254,17 @@ class RouteRow extends PureComponent {
     const { isActive, operator, route } = this.props
     const { ModeIcon } = this.context
 
-    const {defaultRouteColor, defaultRouteTextColor, longNameSplitter} = operator || {}
+    const { defaultRouteColor, defaultRouteTextColor, longNameSplitter } =
+      operator || {}
     const backgroundColor = `#${defaultRouteColor || route.color || 'ffffff'}`
     // NOTE: text color is not a part of short response route object, so there
     // is no way to determine from OTP what the text color should be if the
     // background color is, say, black. Instead, determine the appropriate
     // contrast color and use that if no text color is available.
     const contrastColor = getContrastYIQ(backgroundColor)
-    const color = `#${defaultRouteTextColor || route.textColor || contrastColor}`
+    const color = `#${defaultRouteTextColor ||
+      route.textColor ||
+      contrastColor}`
     // Default long name is empty string (long name is an optional GTFS value).
     const longName = this.getCleanRouteLongName({ longNameSplitter, route })
     return (
@@ -208,12 +274,9 @@ class RouteRow extends PureComponent {
           onClick={this._onClick}
         >
           <RouteRowElement>
-            {operator && operator.logo &&
-              <OperatorImg
-                alt={`${operator.name} logo`}
-                src={operator.logo}
-              />
-            }
+            {operator && operator.logo && (
+              <OperatorImg alt={`${operator.name} logo`} src={operator.logo} />
+            )}
           </RouteRowElement>
           <ModeIconElement>
             <ModeIcon height={22} mode={getModeFromRoute(route)} width={22} />
@@ -226,13 +289,19 @@ class RouteRow extends PureComponent {
             <b>{route.shortName}</b> {longName}
           </RouteNameElement>
         </RouteRowButton>
-        <VelocityTransitionGroup enter={{animation: 'slideDown'}} leave={{animation: 'slideUp'}}>
+        <VelocityTransitionGroup
+          enter={{ animation: 'slideDown' }}
+          leave={{ animation: 'slideUp' }}
+        >
           {isActive && (
             <RouteDetails>
-              {route.url
-                ? <a href={route.url} target='_blank'>Route Details</a>
-                : 'No route URL provided.'
-              }
+              {route.url ? (
+                <a href={route.url} target='_blank'>
+                  Route Details
+                </a>
+              ) : (
+                'No route URL provided.'
+              )}
             </RouteDetails>
           )}
         </VelocityTransitionGroup>

lib/components/viewers/viewers.css

@@ -268,3 +268,19 @@
   float: right;
   width: 50px;
 }
+
+/* Route Viewer Updates */
+.search-and-filter {
+  margin-top: 5px;
+}
+.search-and-filter select {
+  max-width: 125px;
+  margin: 0 5px;
+}
+
+.route-viewer-body .noRoutesFoundMessage {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 10px;
+}

lib/reducers/create-otp-reducer.js

@@ -252,6 +252,7 @@ function createOtpReducer (config) {
   // validate the initial state
   validateInitialState(initialState)
 
+  // eslint-disable-next-line complexity
   return (state = initialState, action) => {
     const searchId = action.payload && action.payload.searchId
     const requestId = action.payload && action.payload.requestId
@@ -899,7 +900,7 @@ function createOtpReducer (config) {
         // Otherwise, overwrite only this route
         return update(state, {
           transitIndex: {
-            routes: { [action.payload.id]: { $set: action.payload } }
+            routes: { [action.payload.id]: { $merge: action.payload } }
           }
         })
       case 'FIND_PATTERNS_FOR_ROUTE_RESPONSE':