Pattern viewer configuration and styling

example-config.yml

@@ -674,6 +674,8 @@ disableSingleItineraryDays: false
 #   # Whether to render routes within flex zones of a route's patterns. If set to true,
 #   # routes will not be rendered within flex zones.
 #   hideRouteShapesWithinFlexZones: true
+#   # Setting to sort routes by the number of vehicles on each pattern
+#   sortRoutePatternsByVehicleCount: true
 #   # Disable vehicle highlight if necessary (e.g. custom or inverted icons)
 #   vehicleIconHighlight: true
 #   # Customize vehicle icon padding (the default iconPadding is 2px in otp-ui)

lib/components/viewers/route-details.tsx

@@ -7,6 +7,7 @@ import React, { Component } from 'react'
 import styled from 'styled-components'
 
 import * as uiActions from '../../actions/ui'
+import { AppReduxState } from '../../util/state-types'
 import { DEFAULT_ROUTE_COLOR } from '../util/colors'
 import { extractMainHeadsigns, PatternSummary } from '../../util/pattern-viewer'
 import { getOperatorName } from '../../util/state'
@@ -47,6 +48,11 @@ const PatternSelectDropdown = styled(Dropdown)`
   span.caret {
     color: #333;
   }
+
+  ul li button span {
+    width: 100%;
+    display: block;
+  }
 `
 
 interface Props {
@@ -57,6 +63,7 @@ interface Props {
   setHoveredStop: (id: string | null) => void
   setViewedRoute: SetViewedRouteHandler
   setViewedStop: SetViewedStopHandler
+  sortPatternsByVehicleCount: boolean
 }
 
 class RouteDetails extends Component<Props> {
@@ -87,7 +94,14 @@ class RouteDetails extends Component<Props> {
   }
 
   render() {
-    const { intl, operator, patternId, route, setHoveredStop } = this.props
+    const {
+      intl,
+      operator,
+      patternId,
+      route,
+      setHoveredStop,
+      sortPatternsByVehicleCount
+    } = this.props
     const { agency, patterns = {}, shortName, url } = route
     const pattern = patterns[patternId]
 
@@ -100,6 +114,7 @@ class RouteDetails extends Component<Props> {
       shortName,
       this._editHeadsign
     ).sort((a, b) => {
+      if (!sortPatternsByVehicleCount) return 0
       // sort by number of vehicles on that pattern
       const aVehicleCount =
         route.vehicles?.filter((vehicle) => vehicle.patternId === a.id)
@@ -231,11 +246,23 @@ class RouteDetails extends Component<Props> {
   }
 }
 
+const mapStateToProps = (state: AppReduxState) => {
+  const sortRoutePatternsByVehicleCount =
+    state.otp.config.routeViewer?.sortRoutePatternsByVehicleCount
+
+  return {
+    sortPatternsByVehicleCount: sortRoutePatternsByVehicleCount !== false
+  }
+}
+
 // connect to redux store
 const mapDispatchToProps = {
   setHoveredStop: uiActions.setHoveredStop,
   setViewedRoute: uiActions.setViewedRoute,
   setViewedStop: uiActions.setViewedStop
 }
 
-export default connect(null, mapDispatchToProps)(injectIntl(RouteDetails))
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(injectIntl(RouteDetails))

lib/components/viewers/styled.ts

@@ -36,8 +36,7 @@ export const PatternContainer = styled.div`
   background-color: inherit;
   color: inherit;
   display: flex;
-  gap: 16px;
-  justify-content: flex-start;
+  justify-content: space-between;
   margin: 0;
   padding: 8px;
 
@@ -48,7 +47,7 @@ export const PatternContainer = styled.div`
   // Styling for SortResultsDropdown
 
   & > span {
-    width: 85%;
+    width: 80%;
 
     button#headsign-selector-label {
       align-items: center;

lib/util/config-types.ts

@@ -362,6 +362,8 @@ export interface RouteViewerConfig {
   maxRealtimeVehicleAge?: number
   /** Use OTP date limiting to only show current service week in list */
   onlyShowCurrentServiceWeek?: boolean
+  /** Setting to sort routes by the number of vehicles on each pattern */
+  sortRoutePatternsByVehicleCount?: boolean
   /** Disable vehicle highlight if necessary (e.g. custom or inverted icons) */
   vehicleIconHighlight?: boolean
   /** Customize vehicle icon padding (the default iconPadding is 2px in otp-ui) */