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

@@ -47,6 +47,11 @@ const PatternSelectDropdown = styled(Dropdown)`
   span.caret {
     color: #333;
   }
+
+  ul li button span {
+    width: 100%;
+    display: block;
+  }
 `
 
 interface Props {
@@ -57,6 +62,7 @@ interface Props {
   setHoveredStop: (id: string | null) => void
   setViewedRoute: SetViewedRouteHandler
   setViewedStop: SetViewedStopHandler
+  sortPatternsByVehicleCount: boolean
 }
 
 class RouteDetails extends Component<Props> {
@@ -87,33 +93,44 @@ 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]
 
     const moreDetailsURL = url || route?.agency?.url
 
     const routeColor = getRouteColorBasedOnSettings(operator, route)
 
-    const headsigns = extractMainHeadsigns(
+    const unsortedHeadsigns = extractMainHeadsigns(
       patterns,
       shortName,
       this._editHeadsign
-    ).sort((a, b) => {
-      // sort by number of vehicles on that pattern
-      const aVehicleCount =
-        route.vehicles?.filter((vehicle) => vehicle.patternId === a.id)
-          .length || 0
-      const bVehicleCount =
-        route.vehicles?.filter((vehicle) => vehicle.patternId === b.id)
-          .length || 0
-
-      // if both have the same count, sort by pattern geometry length
-      if (aVehicleCount === bVehicleCount) {
-        return b.geometryLength - a.geometryLength
-      }
-      return bVehicleCount - aVehicleCount
-    })
+    )
+
+    const headsigns = sortPatternsByVehicleCount
+      ? unsortedHeadsigns.sort((a, b) => {
+          // sort by number of vehicles on that pattern
+          const aVehicleCount =
+            route.vehicles?.filter((vehicle) => vehicle.patternId === a.id)
+              .length || 0
+          const bVehicleCount =
+            route.vehicles?.filter((vehicle) => vehicle.patternId === b.id)
+              .length || 0
+
+          // if both have the same count, sort by pattern geometry length
+          if (aVehicleCount === bVehicleCount) {
+            return b.geometryLength - a.geometryLength
+          }
+          return bVehicleCount - aVehicleCount
+        })
+      : unsortedHeadsigns
 
     const patternSelectLabel = intl.formatMessage({
       id: 'components.RouteDetails.selectADirection'
@@ -231,11 +248,22 @@ class RouteDetails extends Component<Props> {
   }
 }
 
+const mapStateToProps = (state: any) => {
+  const { sortRoutePatternsByVehicleCount } = state.otp.config.routeViewer
+
+  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) */