From 4968d66a026a19d9efc87f02a784bf8d8f306dfb Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 11 Oct 2023 11:29:16 -0400
Subject: [PATCH] refactor: route viewer always use route color overrides

---
 lib/actions/apiV2.js | 53 +++++++++++++++++++++++++-------------------
 lib/util/viewer.js   |  2 +-
 2 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/lib/actions/apiV2.js b/lib/actions/apiV2.js
index ae64d539c..544f5aec5 100644
--- a/lib/actions/apiV2.js
+++ b/lib/actions/apiV2.js
@@ -12,8 +12,13 @@ import { generateModeSettingValues } from '../util/api'
 import {
   getActiveItineraries,
   getActiveItinerary,
+  getRouteOperator,
   queryIsValid
 } from '../util/state'
+import {
+  getColorAndNameFromRoute,
+  getRouteColorBasedOnSettings
+} from '../util/viewer'
 import { ItineraryView } from '../util/ui'
 
 import {
@@ -669,6 +674,10 @@ export const findRoute = (params) =>
             newRoute.patterns = routePatterns
             // TODO: avoid explicit behavior shift like this
             newRoute.v2 = true
+            newRoute.color = getColorAndNameFromRoute(
+              getRouteOperator(route, getState().otp.config.transitOperators),
+              route
+            ).backgroundColor.split('#')[1]
             newRoute.mode = checkForRouteModeOverride(
               newRoute,
               getState().otp.config?.routeModeOverrides
@@ -716,29 +725,27 @@ export function findRoutes() {
             const { config } = getState().otp
             // To initialize the route viewer,
             // convert the routes array to a dictionary indexed by route ids.
-            return routes.reduce(
-              (
-                result,
-                { agency, color, id, longName, mode, shortName, type }
-              ) => {
-                result[id] = {
-                  agencyId: agency.id,
-                  agencyName: agency.name,
-                  color,
-                  id,
-                  longName,
-                  mode: checkForRouteModeOverride(
-                    { id, mode },
-                    config?.routeModeOverrides
-                  ),
-                  shortName,
-                  type,
-                  v2: true
-                }
-                return result
-              },
-              {}
-            )
+            return routes.reduce((result, route) => {
+              const { agency, id, longName, mode, shortName, type } = route
+              result[id] = {
+                agencyId: agency.id,
+                agencyName: agency.name,
+                color: getColorAndNameFromRoute(
+                  getRouteOperator(route, config.transitOperators),
+                  route
+                ).backgroundColor.split('#')[1],
+                id,
+                longName,
+                mode: checkForRouteModeOverride(
+                  { id, mode },
+                  config?.routeModeOverrides
+                ),
+                shortName,
+                type,
+                v2: true
+              }
+              return result
+            }, {})
           }
         }
       )
diff --git a/lib/util/viewer.js b/lib/util/viewer.js
index 9f1f9ef9d..b2e9df92e 100644
--- a/lib/util/viewer.js
+++ b/lib/util/viewer.js
@@ -383,7 +383,7 @@ export function getColorAndNameFromRoute(operator, route) {
   const modeColors = operator?.modeColors?.[getModeFromRoute(route)]
 
   const backgroundColor = `#${
-    modeColors?.color || defaultRouteColor || route.color || '333333'
+    modeColors?.color || defaultRouteColor || route?.color || '333333'
   }`
   // 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