Merge branch 'dev' into date-restricted-requests

craco.config.js

@@ -48,6 +48,8 @@ module.exports = {
         findBackwardsCompatibleEnvVar('JS_CONFIG')
       backwardsCompatibleEnv.HTML_FILE =
         findBackwardsCompatibleEnvVar('HTML_FILE')
+      backwardsCompatibleEnv.PLAN_QUERY_RESOURCE_URI =
+        findBackwardsCompatibleEnvVar('PLAN_QUERY_RESOURCE_URI')
       backwardsCompatibleEnv.CUSTOM_CSS =
         findBackwardsCompatibleEnvVar('CUSTOM_CSS')
 
@@ -65,6 +67,13 @@ module.exports = {
       }
       addBeforeLoader(webpackConfig, loaderByName('file-loader'), yamlLoader)
 
+      // Support import of raw GraphQL files
+      const graphqlLoader = {
+        loader: ['raw-loader'],
+        test: /\.graphql$/
+      }
+      addBeforeLoader(webpackConfig, loaderByName('file-loader'), graphqlLoader)
+
       // Support webfonts (for font awesome)
       const webfontLoader = {
         loader: ['url-loader'],
@@ -82,7 +91,7 @@ module.exports = {
         loader.exclude = /node_modules/
       })
 
-      // Gather the CSS, HTML, YAML, and JS override files.
+      // Gather the CSS, HTML, YAML, GraphQL, and JS override files.
       const CUSTOM_CSS =
         (process.env && process.env.CUSTOM_CSS) ||
         backwardsCompatibleEnv.CUSTOM_CSS ||
@@ -91,6 +100,22 @@ module.exports = {
         (process.env && process.env.HTML_FILE) ||
         backwardsCompatibleEnv.HTML_FILE ||
         'lib/index.tpl.html'
+      // resolve the custom GraphQL file. If it is present, copy the file to a
+      // temporary folder within this project so that it can be bundled and loaded at runtime.
+      let customPlanGraphQLFile = './planQuery.graphql'
+      const PLAN_QUERY_RESOURCE_URI =
+        (process.env && process.env.PLAN_QUERY_RESOURCE_URI) ||
+        backwardsCompatibleEnv.PLAN_QUERY_RESOURCE_URI ||
+        'node_modules/@opentripplanner/core-utils/src/planQuery.graphql'
+      if (PLAN_QUERY_RESOURCE_URI) {
+        const splitPath = PLAN_QUERY_RESOURCE_URI.split(path.sep)
+        customPlanGraphQLFile = `../tmp/${splitPath[splitPath.length - 1]}`
+        // copy location is relative to root, while js file for app is relative to lib
+        fs.copySync(
+          PLAN_QUERY_RESOURCE_URI,
+          `./tmp/${splitPath[splitPath.length - 1]}`
+        )
+      }
       const YAML_CONFIG =
         (process.env && process.env.YAML_CONFIG) ||
         backwardsCompatibleEnv.YAML_CONFIG ||
@@ -143,6 +168,7 @@ module.exports = {
         new webpack.DefinePlugin({
           CSS: JSON.stringify(CUSTOM_CSS),
           JS_CONFIG: JSON.stringify(customJsFile),
+          PLAN_QUERY_RESOURCE: JSON.stringify(customPlanGraphQLFile),
           // Optionally override the default config files with some other
           // files.
           YAML_CONFIG: JSON.stringify(YAML_CONFIG)

lib/actions/apiV2.js

@@ -27,6 +27,7 @@ import { getCurrentServiceWeek } from '../util/current-service-week'
 import {
   getRouteColorBasedOnSettings,
   getRouteIdForPattern,
+  getRouteTextColorBasedOnSettings,
   routeIsValid
 } from '../util/viewer'
 import { isLastStop } from '../util/stop-times'
@@ -977,6 +978,8 @@ export function routingQuery(searchId = null, updateSearchInReducer) {
   return function (dispatch, getState) {
     const state = getState()
     const { config, currentQuery, modeSettingDefinitions } = state.otp
+    const { planQuery } = config.api
+    const { loggedInUser } = state.user
     const persistenceMode = getPersistenceMode(config.persistence)
     const activeItinerary =
       getActiveItinerary(state) ||
@@ -1060,6 +1063,9 @@ export function routingQuery(searchId = null, updateSearchInReducer) {
       ...currentQuery,
       numItineraries: numItineraries || getDefaultNumItineraries(config)
     }
+    if (config.mobilityProfile) {
+      baseQuery.mobilityProfile = loggedInUser?.mobilityProfile?.mobilityMode
+    }
     // Generate combinations if the modes for query are not specified in the query
     // FIXME: BICYCLE_RENT does not appear in this list unless TRANSIT is also enabled.
     // This is likely due to the fact that BICYCLE_RENT is treated as a transit submode.
@@ -1083,7 +1089,7 @@ export function routingQuery(searchId = null, updateSearchInReducer) {
       const query = generateOtp2Query(combo)
       dispatch(
         createGraphQLQueryAction(
-          query.query,
+          planQuery || query.query,
           query.variables,
           (response) => {
             const dispatchedRoutingResponse = routingResponse(response)
@@ -1144,20 +1150,30 @@ export function routingQuery(searchId = null, updateSearchInReducer) {
                   ...itin,
                   legs: itin.legs
                     ?.map((leg) => {
+                      const routeOperator = getRouteOperator(
+                        {
+                          agencyId: leg?.agency?.id,
+                          id: leg?.route?.id
+                        },
+                        config.transitOperators
+                      )
+                      const routeProperties = {
+                        color: leg?.route?.color,
+                        mode: leg.mode
+                      }
+
                       return {
                         ...leg,
                         origColor: leg?.route?.color,
                         route: {
                           ...leg.route,
                           color: getRouteColorBasedOnSettings(
-                            getRouteOperator(
-                              {
-                                agencyId: leg?.agency?.id,
-                                id: leg?.route?.id
-                              },
-                              config.transitOperators
-                            ),
-                            { color: leg?.route?.color, mode: leg.mode }
+                            routeOperator,
+                            routeProperties
+                          ).split('#')?.[1],
+                          textColor: getRouteTextColorBasedOnSettings(
+                            routeOperator,
+                            routeProperties
                           ).split('#')?.[1]
                         }
                       }

lib/actions/user.js

@@ -270,7 +270,8 @@ function setUser(user, fetchTrips) {
   return function (dispatch, getState) {
     positionHomeAndWorkFirst(user)
     // If mobility profile is enabled, set a default selection for "no mobility devices".
-    if (getState().otp.config.mobilityProfile) {
+    const hasMobilityProfile = !!getState().otp.config.mobilityProfile
+    if (hasMobilityProfile) {
       setAtLeastNoMobilityDevice(user)
     }
     dispatch(setCurrentUser(user))
@@ -287,6 +288,23 @@ function setUser(user, fetchTrips) {
     if (!isBlank(preferredLocale)) {
       dispatch(setLocale(preferredLocale))
     }
+
+    // Also replan itinerary search for the current user profile.
+    if (
+      hasMobilityProfile &&
+      !getState().router.location.pathname.startsWith('/account')
+    ) {
+      // TODO: Refactor below.
+      // This prevents some kind of race condition whose origin I can't figure
+      // out. Unless this is called after redux catches up with routing to the '/'
+      // path, then the old path will be used and the screen won't change.
+      // Therefore, this timeout occurs so that the view of the homepage has time
+      // to render itself.
+      // FIXME: remove hack
+      setTimeout(() => {
+        dispatch(routingQuery())
+      }, 300)
+    }
   }
 }
 

lib/components/map/itinerary-summary-overlay.tsx

@@ -5,7 +5,7 @@ import { Marker } from 'react-map-gl'
 import centroid from '@turf/centroid'
 import distance from '@turf/distance'
 import polyline from '@mapbox/polyline'
-import React, { useContext, useState } from 'react'
+import React, { useContext } from 'react'
 import styled from 'styled-components'
 
 import * as narriativeActions from '../../actions/narrative'
@@ -147,19 +147,20 @@ const ItinerarySummaryOverlay = ({
   // @ts-expect-error React context is populated dynamically
   const { LegIcon } = useContext(ComponentContext)
 
-  const [sharedTimeout, setSharedTimeout] = useState<null | NodeJS.Timeout>(
-    null
-  )
-
   if (!itins || !visible) return <></>
-  const mergedItins: ItinWithGeometry[] = addTrueIndex(
-    doMergeItineraries(itins).mergedItineraries.map(addItinLineString)
+  const indexedItins: ItinWithGeometry[] = addTrueIndex(
+    itins.map(addItinLineString)
+  )
+  const mergedItins: ItinWithGeometry[] =
+    doMergeItineraries(indexedItins).mergedItineraries
+
+  const midPoints = mergedItins.reduce<ItinUniquePoint[]>(
+    (prev: ItinUniquePoint[], curItin: ItinWithGeometry) => {
+      prev.push(getUniquePoint(curItin, prev))
+      return prev
+    },
+    []
   )
-
-  const midPoints = mergedItins.reduce<ItinUniquePoint[]>((prev, curItin) => {
-    prev.push(getUniquePoint(curItin, prev))
-    return prev
-  }, [])
   // The first point is probably not well placed, so let's run the algorithm again
   if (midPoints.length > 1) {
     midPoints[0] = getUniquePoint(mergedItins[0], midPoints)
@@ -186,18 +187,8 @@ const ItinerarySummaryOverlay = ({
                   onClick={() => {
                     setActive({ index: mp.itin.index })
                   }}
-                  // TODO: useCallback here (getting weird errors?)
-                  onMouseEnter={() => {
-                    setSharedTimeout(
-                      setTimeout(() => {
-                        setVisible({ index: mp.itin.index })
-                      }, 150)
-                    )
-                  }}
-                  onMouseLeave={() => {
-                    sharedTimeout && clearTimeout(sharedTimeout)
-                    setVisible({ index: null })
-                  }}
+                  // TODO: restore setting visible itinerary on hover without
+                  // causing endless re-render?
                 >
                   <MetroItineraryRoutes
                     expanded={false}

lib/components/user/mobility-profile/mobility-pane.tsx

@@ -1,24 +1,17 @@
-import { Button } from 'react-bootstrap'
-import { connect } from 'react-redux'
 import { FormattedList, FormattedMessage } from 'react-intl'
 import { FormikProps } from 'formik'
-import React, { useCallback } from 'react'
+import React from 'react'
 
-import * as uiActions from '../../../actions/ui'
 import { EditedUser } from '../types'
 import { NONE_SINGLETON } from '../../../util/user'
-
-interface Props extends FormikProps<EditedUser> {
-  routeTo: (url: string) => void
-}
+import Link from '../../util/link'
 
 /**
  * Renders a button to show the mobility profile settings.
  */
-const MobilityPane = ({ routeTo, values: userData }: Props): JSX.Element => {
-  const handleClick = useCallback(() => {
-    routeTo('/account/mobilityProfile/')
-  }, [routeTo])
+const MobilityPane = ({
+  values: userData
+}: FormikProps<EditedUser>): JSX.Element => {
   const {
     isMobilityLimited,
     mobilityDevices = [],
@@ -54,15 +47,11 @@ const MobilityPane = ({ routeTo, values: userData }: Props): JSX.Element => {
           id={`components.MobilityProfile.LimitationsPane.visionLimitations.${visionLimitation}`}
         />
       </p>
-      <Button bsStyle="primary" onClick={handleClick}>
+      <Link className="btn btn-primary" to="/account/mobilityProfile/">
         <FormattedMessage id="components.MobilityProfile.MobilityPane.button" />
-      </Button>
+      </Link>
     </div>
   )
 }
 
-const mapDispatchToProps = {
-  routeTo: uiActions.routeTo
-}
-
-export default connect(null, mapDispatchToProps)(MobilityPane)
+export default MobilityPane

lib/components/user/types.ts

@@ -25,6 +25,7 @@ export type VisionLimitation = typeof visionLimitations[number]
 export interface MobilityProfile {
   isMobilityLimited: boolean
   mobilityDevices: string[]
+  mobilityMode: string
   visionLimitation: VisionLimitation
 }
 

lib/main.js

@@ -34,6 +34,18 @@ import(CSS)
 // eslint-disable-next-line no-undef
 const otpConfig = require(YAML_CONFIG)
 
+// Loads a JavaScript file which is set in the webpack section of the craco.config.js file.
+// This setting is defined from a custom environment setting passed into webpack or
+// defaults to ./config.js
+// defined in webpack config:
+// The JS_CONFIG variable is passed to this file by webpack's `DefinePlugin` that replaces the variable
+// with its content at compile time (like C's `#define` preprocessor directive).
+// eslint-disable-next-line no-undef
+const jsConfig = require(JS_CONFIG).configure(otpConfig)
+
+// If defined, plug custom plan query into the redux config, so it is available from actions.
+otpConfig.api.planQuery = jsConfig.planQuery
+
 const history = createHashHistory()
 
 const middleware = [

lib/util/viewer.js

@@ -355,6 +355,10 @@ export function getRouteColorBasedOnSettings(operator = {}, route = {}) {
       return backgroundColor
   }
 }
+export function getRouteTextColorBasedOnSettings(operator = {}, route = {}) {
+  const { color } = getColorAndNameFromRoute(operator, route)
+  return color
+}
 
 /**
  * Helper method to determine if a stop being viewed is a flex stop. This is not marked by

package.json

@@ -195,6 +195,7 @@
     "pinst": "^2.1.6",
     "prettier": "^2.3.2",
     "puppeteer": "^10.2.0",
+    "raw-loader": "^4.0.2",
     "react-refresh": "^0.10.0",
     "react-scripts": "^4.0.3",
     "redux-mock-store": "^1.5.3",

yarn.lock

@@ -15163,6 +15163,14 @@ [email protected]:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
+raw-loader@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-4.0.2.tgz#1aac6b7d1ad1501e66efdac1522c73e59a584eb6"
+  integrity sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
+
 rc@^1.0.1, rc@^1.1.6, rc@^1.2.8:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"