fix(RouteViewer): fix route sort, color issues

fix #122

Author: landonreed

lib/components/viewers/route-viewer.js

@@ -18,6 +18,23 @@ function operatorIndexForRoute (operators, route) {
   else return 0
 }
 
+/**
+ * Determine the appropriate contrast color for text (white or black) based on
+ * the input hex string (e.g., '#ff00ff') value.
+ *
+ * From https://stackoverflow.com/a/11868398/915811
+ *
+ * TODO: Move to @opentripplanner/core-utils once otp-rr uses otp-ui library.
+ */
+function getContrastYIQ (hexcolor) {
+  hexcolor = hexcolor.replace('#', '')
+  const r = parseInt(hexcolor.substr(0, 2), 16)
+  const g = parseInt(hexcolor.substr(2, 2), 16)
+  const b = parseInt(hexcolor.substr(4, 2), 16)
+  const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000
+  return (yiq >= 128) ? '000000' : 'ffffff'
+}
+
 class RouteViewer extends Component {
   static propTypes = {
     hideBackButton: PropTypes.bool,
@@ -110,8 +127,14 @@ class RouteRow extends PureComponent {
   render () {
     const {isActive, route, operator} = this.props
     const {defaultRouteColor, defaultRouteTextColor, longNameSplitter} = operator || {}
-    const color = `#${defaultRouteTextColor || route.textColor || '000000'}`
     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}`
+    console.log(route, color, backgroundColor, contrastColor)
     // Default long name is empty string (long name is an optional GTFS value).
     let longName = ''
     if (route.longName) {
@@ -121,6 +144,9 @@ class RouteRow extends PureComponent {
       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 = ''
     }
     return (
       <div

lib/util/itinerary.js

@@ -247,13 +247,21 @@ export function getLegBounds (leg) {
 
 export function routeComparator (a, b) {
   let aComp, bComp
-  if (a.sortOrder !== null && b.sortOrder !== null) {
+  // If route sort order field is available, default sort to these predefined
+  // values. NOTE: OTP/OBA defaults sort order values to -999, so instead of
+  // checking that the sort order is not null, we just check that the values are
+  // not equal. Technically, there could be cases where route_sort_order values
+  // are equivalent, but ideally they should be unique.
+  if (a.sortOrder !== b.sortOrder) {
     aComp = a.sortOrder
     bComp = b.sortOrder
   } else if (!isNaN(parseInt(a.shortName)) && !isNaN(parseInt(b.shortName))) {
+    // Otherwise, if both short names can be parsed as integers, use these
+    // numbers for sorting.
     aComp = parseInt(a.shortName)
     bComp = parseInt(b.shortName)
   } else {
+    // Otherwise, default to short or long name strings.
     aComp = a.shortName || a.longName
     bComp = b.shortName || b.longName
   }