From 0b9b183e563ab5e424b8ddf08d514c7f550f8bac Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 12 Jan 2022 14:44:18 +0100
Subject: [PATCH 1/7] feat(itinerary-body): show itinerary walking leg imagery
 button

---
 example-config.yml                            |  4 +++
 .../line-itin/connected-itinerary-body.js     | 28 ++++++++++++-------
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/example-config.yml b/example-config.yml
index 123383bcd..7115a99ae 100644
--- a/example-config.yml
+++ b/example-config.yml
@@ -409,3 +409,7 @@ dateTime:
 #   # 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
+
+# API key to make Mapillary API calls. These are used to show street imagery.
+# mapillary:
+#   key: <Mapillary Key>
diff --git a/lib/components/narrative/line-itin/connected-itinerary-body.js b/lib/components/narrative/line-itin/connected-itinerary-body.js
index 79b8f167b..3b33267af 100644
--- a/lib/components/narrative/line-itin/connected-itinerary-body.js
+++ b/lib/components/narrative/line-itin/connected-itinerary-body.js
@@ -1,23 +1,29 @@
+/* eslint-disable react/prop-types */
+// TODO: Typescript (otp-rr config object)
+import { connect } from 'react-redux'
+import {
+  PlaceName as PlaceNameWrapper,
+  PlaceRowWrapper
+} from '@opentripplanner/itinerary-body/lib/styled'
 import isEqual from 'lodash.isequal'
-import TransitLegSummary from '@opentripplanner/itinerary-body/lib/defaults/transit-leg-summary'
 import ItineraryBody from '@opentripplanner/itinerary-body/lib/otp-react-redux/itinerary-body'
 import LineColumnContent from '@opentripplanner/itinerary-body/lib/otp-react-redux/line-column-content'
 import PlaceName from '@opentripplanner/itinerary-body/lib/otp-react-redux/place-name'
-import { PlaceName as PlaceNameWrapper, PlaceRowWrapper } from '@opentripplanner/itinerary-body/lib/styled'
-import RouteDescription from '@opentripplanner/itinerary-body/lib/otp-react-redux/route-description'
 import React, { Component } from 'react'
-import { connect } from 'react-redux'
+import RouteDescription from '@opentripplanner/itinerary-body/lib/otp-react-redux/route-description'
 import styled from 'styled-components'
+import TransitLegSummary from '@opentripplanner/itinerary-body/lib/defaults/transit-leg-summary'
 
+import { ComponentContext } from '../../../util/contexts'
 import { setLegDiagram } from '../../../actions/map'
 import { setViewedTrip } from '../../../actions/ui'
 import TripDetails from '../connected-trip-details'
 import TripTools from '../trip-tools'
-import { ComponentContext } from '../../../util/contexts'
 
 import RealtimeTimeColumn from './realtime-time-column'
 import TransitLegSubheader from './connected-transit-leg-subheader'
 
+// eslint-disable-next-line @typescript-eslint/no-empty-function
 const noop = () => {}
 
 const ItineraryBodyContainer = styled.div`
@@ -37,11 +43,11 @@ class ConnectedItineraryBody extends Component {
   static contextType = ComponentContext
 
   /** avoid rerendering if the itinerary to display hasn't changed */
-  shouldComponentUpdate (nextProps, nextState) {
+  shouldComponentUpdate(nextProps, nextState) {
     return !isEqual(this.props.itinerary, nextProps.itinerary)
   }
 
-  render () {
+  render() {
     const {
       accessibilityScoreGradationMap,
       config,
@@ -63,6 +69,7 @@ class ConnectedItineraryBody extends Component {
           itinerary={itinerary}
           LegIcon={LegIcon}
           LineColumnContent={LineColumnContent}
+          mapillaryKey={config?.mapillary?.key}
           PlaceName={PlaceName}
           RouteDescription={RouteDescription}
           setActiveLeg={setActiveLeg}
@@ -99,6 +106,7 @@ const mapDispatchToProps = {
   setViewedTrip
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(
-  ConnectedItineraryBody
-)
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ConnectedItineraryBody)

From a3c0a0af02e89187a9a2965cda4309e74fd0291b Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 12 Jan 2022 16:32:09 +0100
Subject: [PATCH 2/7] improvement: show mapillary iframe in elevation popup

---
 lib/actions/map.js                            |   1 +
 lib/components/map/map.css                    |  21 +-
 lib/components/map/map.js                     |  67 +++-
 lib/components/map/mapillary-frame.tsx        |  29 ++
 .../narrative/default/access-leg.js           |  61 ++--
 .../line-itin/connected-itinerary-body.js     |   5 +-
 lib/reducers/create-otp-reducer.js            | 334 +++++++++++-------
 7 files changed, 337 insertions(+), 181 deletions(-)
 create mode 100644 lib/components/map/mapillary-frame.tsx

diff --git a/lib/actions/map.js b/lib/actions/map.js
index 5db88e68f..310d66233 100644
--- a/lib/actions/map.js
+++ b/lib/actions/map.js
@@ -131,6 +131,7 @@ export function switchLocations() {
 }
 
 export const setLegDiagram = createAction('SET_LEG_DIAGRAM')
+export const setMapillaryId = createAction('SET_MAPILLARY_ID')
 
 export const setElevationPoint = createAction('SET_ELEVATION_POINT')
 
diff --git a/lib/components/map/map.css b/lib/components/map/map.css
index 77652d126..04dca4aea 100644
--- a/lib/components/map/map.css
+++ b/lib/components/map/map.css
@@ -15,7 +15,7 @@
 }
 
 .otp .link-button:focus {
-  outline:0;
+  outline: 0;
 }
 
 /* leg diagram */
@@ -29,8 +29,8 @@
   z-index: 1000;
   background-color: white;
   background-clip: padding-box;
-  border: 2px solid rgba(127, 127, 127, .5);
-  border-Radius: 4px;
+  border: 2px solid rgba(127, 127, 127, 0.5);
+  border-radius: 4px;
   cursor: crosshair;
 }
 
@@ -64,6 +64,21 @@
   background: none;
 }
 
+.otp .leg-diagram .mapillary-close-button {
+  background: rgba(255, 255, 255, 0.85);
+  border-radius: 0 0 1em;
+  display: block;
+  left: 0;
+  padding: 0.5em;
+  position: absolute;
+  top: 0;
+  z-index: 10000;
+}
+.otp .leg-diagram .mapillary-close-button:hover {
+  background: rgba(200, 200, 200, 0.85);
+  color: #333;
+}
+
 /*** Car Rental Map Icons ***/
 
 .otp .car-rental-icon {
diff --git a/lib/components/map/map.js b/lib/components/map/map.js
index 12e01609e..4b8ca41e2 100644
--- a/lib/components/map/map.js
+++ b/lib/components/map/map.js
@@ -1,43 +1,56 @@
-import React, { Component } from 'react'
+/* eslint-disable react/prop-types */
+// TODO: Typescript (config object)
+import { Button, ButtonGroup } from 'react-bootstrap'
 import { connect } from 'react-redux'
-import { ButtonGroup, Button } from 'react-bootstrap'
+import React, { Component } from 'react'
+
+import { setMapillaryId } from '../../actions/map'
 
 import DefaultMap from './default-map'
 import LegDiagram from './leg-diagram'
+import MapillaryFrame from './mapillary-frame'
 import StylizedMap from './stylized-map'
 
 class Map extends Component {
-  constructor () {
+  constructor() {
     super()
     this.state = {
       activeViewIndex: 0
     }
   }
 
-  getComponentForView (view) {
+  getComponentForView(view) {
     // TODO: allow a 'CUSTOM' type
     switch (view.type) {
-      case 'DEFAULT': return <DefaultMap />
-      case 'STYLIZED': return <StylizedMap />
+      case 'DEFAULT':
+        return <DefaultMap />
+      case 'STYLIZED':
+        return <StylizedMap />
     }
   }
 
-  render () {
-    const { diagramLeg, mapConfig } = this.props
+  render() {
+    const { activeMapillaryImage, diagramLeg, mapConfig, setMapillaryId } =
+      this.props
 
     const showDiagram = diagramLeg
+    const showMapillary = activeMapillaryImage
 
     // Use the views defined in the config; if none defined, just show the default map
     const views = mapConfig.views || [{ type: 'DEFAULT' }]
 
     return (
-      <div className='map-container'>
+      <div className="map-container">
         {/* The map views -- only one is visible at a time */}
         {views.map((view, i) => {
           return (
-            <div className='map-container'
+            <div
+              className="map-container"
               key={i}
-              style={{ visibility: i === this.state.activeViewIndex ? 'visible' : 'hidden' }}
+              style={{
+                visibility:
+                  i === this.state.activeViewIndex ? 'visible' : 'hidden'
+              }}
             >
               {this.getComponentForView(view)}
             </div>
@@ -46,15 +59,26 @@ class Map extends Component {
 
         {/* The toggle buttons -- only show if multiple views */}
         {views.length > 1 && (
-          <div style={{ bottom: 12 + (showDiagram ? 192 : 0), left: 12, position: 'absolute', zIndex: 100000 }}>
+          <div
+            style={{
+              bottom: 12 + (showDiagram ? 192 : 0),
+              left: 12,
+              position: 'absolute',
+              zIndex: 100000
+            }}
+          >
             <ButtonGroup>
               {views.map((view, i) => {
                 return (
                   <Button
-                    bsSize='xsmall'
-                    bsStyle={i === this.state.activeViewIndex ? 'success' : 'default'}
+                    bsSize="xsmall"
+                    bsStyle={
+                      i === this.state.activeViewIndex ? 'success' : 'default'
+                    }
                     key={i}
-                    onClick={() => { this.setState({ activeViewIndex: i }) }}
+                    onClick={() => {
+                      this.setState({ activeViewIndex: i })
+                    }}
                     style={{ padding: '3px 6px' }}
                   >
                     {view.text || view.type}
@@ -67,6 +91,12 @@ class Map extends Component {
 
         {/* The leg diagram overlay, if active */}
         {showDiagram && <LegDiagram leg={diagramLeg} />}
+        {showMapillary && (
+          <MapillaryFrame
+            id={activeMapillaryImage}
+            onClose={() => setMapillaryId(null)}
+          />
+        )}
       </div>
     )
   }
@@ -76,9 +106,14 @@ class Map extends Component {
 
 const mapStateToProps = (state, ownProps) => {
   return {
+    activeMapillaryImage: state.otp.ui.mapillaryId,
     diagramLeg: state.otp.ui.diagramLeg,
     mapConfig: state.otp.config.map
   }
 }
 
-export default connect(mapStateToProps)(Map)
+const mapDispatchToProps = {
+  setMapillaryId
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Map)
diff --git a/lib/components/map/mapillary-frame.tsx b/lib/components/map/mapillary-frame.tsx
new file mode 100644
index 000000000..f4225abde
--- /dev/null
+++ b/lib/components/map/mapillary-frame.tsx
@@ -0,0 +1,29 @@
+import { Button } from 'react-bootstrap'
+import React from 'react'
+
+const MapillaryFrame = ({
+  id,
+  onClose
+}: {
+  id: string
+  onClose?: () => void
+}): React.ReactElement => {
+  return (
+    <div className="leg-diagram" style={{ height: '50vh', zIndex: 999 }}>
+      <iframe
+        frameBorder="0"
+        src={`https://www.mapillary.com/embed?image_key=${id}&style=photo`}
+        style={{ height: '100%', width: '100%' }}
+        title="Imagery of the street"
+      />
+      <Button
+        className="mapillary-close-button close-button clear-button-formatting"
+        onClick={onClose}
+      >
+        <i className="fa fa-close" />
+      </Button>
+    </div>
+  )
+}
+
+export default MapillaryFrame
diff --git a/lib/components/narrative/default/access-leg.js b/lib/components/narrative/default/access-leg.js
index 017edd06a..3837510f5 100644
--- a/lib/components/narrative/default/access-leg.js
+++ b/lib/components/narrative/default/access-leg.js
@@ -1,28 +1,30 @@
-import coreUtils from '@opentripplanner/core-utils'
+import { FormattedMessage } from 'react-intl'
 import { humanizeDistanceString } from '@opentripplanner/humanize-distance'
+import coreUtils from '@opentripplanner/core-utils'
 import PropTypes from 'prop-types'
-import React, {Component} from 'react'
-import { FormattedMessage } from 'react-intl'
+import React, { Component } from 'react'
 
-import Icon from '../../util/icon'
-import Strong from '../../util/strong-text'
-import FormattedMode from '../../util/formatted-mode'
 import FormattedDuration from '../../util/formatted-duration'
+import FormattedMode from '../../util/formatted-mode'
+import Icon from '../../util/icon'
 import LegDiagramPreview from '../leg-diagram-preview'
+import Strong from '../../util/strong-text'
 
 /**
  * Default access leg component for narrative itinerary.
  */
 export default class AccessLeg extends Component {
   static propTypes = {
+    active: PropTypes.bool,
     activeStep: PropTypes.number,
+    index: PropTypes.number,
     leg: PropTypes.object,
     setActiveLeg: PropTypes.func,
     setActiveStep: PropTypes.func
   }
 
   _onLegClick = (e) => {
-    const {active, index, leg, setActiveLeg} = this.props
+    const { active, index, leg, setActiveLeg } = this.props
     if (active) {
       setActiveLeg(null)
     } else {
@@ -30,7 +32,7 @@ export default class AccessLeg extends Component {
     }
   }
 
-  _onStepClick (e, step, index) {
+  _onStepClick(e, step, index) {
     if (index === this.props.activeStep) {
       this.props.setActiveStep(null)
     } else {
@@ -38,46 +40,53 @@ export default class AccessLeg extends Component {
     }
   }
 
-  render () {
+  render() {
     const { active, activeStep, index, leg } = this.props
     return (
-      <div
-        className={`leg${active ? ' active' : ''} access-leg`}
-        key={index}>
-        <button
-          className='header'
-          onClick={this._onLegClick}>
-          <span><Icon type={`caret-${active ? 'down' : 'right'}`} /></span>
+      <div className={`leg${active ? ' active' : ''} access-leg`} key={index}>
+        <button className="header" onClick={this._onLegClick}>
+          <span>
+            <Icon type={`caret-${active ? 'down' : 'right'}`} />
+          </span>
           <FormattedMessage
-            id='components.AccessLeg.summary'
+            id="components.AccessLeg.summary"
             values={{
               distance: humanizeDistanceString(leg.distance),
-              distanceSpan: contents => <span className='leg-distance'>{contents}</span>,
-              durationSpan: contents => <span className='leg-duration'>{contents}</span>,
+              distanceSpan: (contents) => (
+                <span className="leg-distance">{contents}</span>
+              ),
+              durationSpan: (contents) => (
+                <span className="leg-duration">{contents}</span>
+              ),
               formattedDuration: <FormattedDuration duration={leg.duration} />,
               mode: <FormattedMode mode={leg.mode.toLowerCase()} />,
               strong: Strong
             }}
           />
         </button>
-        {active &&
-          <div className='step-by-step'>
-            <div className='access-leg'>
+        {active && (
+          <div className="step-by-step">
+            <div className="access-leg">
               {leg.steps.map((step, stepIndex) => {
                 const stepIsActive = activeStep === stepIndex
                 return (
                   <button
                     className={`step ${stepIsActive ? 'active' : ''}`}
                     key={stepIndex}
-                    onClick={(e) => this._onStepClick(e, step, stepIndex)}>
-                    <span className='step-distance'>{humanizeDistanceString(step.distance)}</span>
-                    <span className='step-text'>{coreUtils.itinerary.getStepInstructions(step)}</span>
+                    onClick={(e) => this._onStepClick(e, step, stepIndex)}
+                  >
+                    <span className="step-distance">
+                      {humanizeDistanceString(step.distance)}
+                    </span>
+                    <span className="step-text">
+                      {coreUtils.itinerary.getStepInstructions(step)}
+                    </span>
                   </button>
                 )
               })}
             </div>
           </div>
-        }
+        )}
         <LegDiagramPreview leg={leg} />
       </div>
     )
diff --git a/lib/components/narrative/line-itin/connected-itinerary-body.js b/lib/components/narrative/line-itin/connected-itinerary-body.js
index 3b33267af..a935115b0 100644
--- a/lib/components/narrative/line-itin/connected-itinerary-body.js
+++ b/lib/components/narrative/line-itin/connected-itinerary-body.js
@@ -15,7 +15,7 @@ import styled from 'styled-components'
 import TransitLegSummary from '@opentripplanner/itinerary-body/lib/defaults/transit-leg-summary'
 
 import { ComponentContext } from '../../../util/contexts'
-import { setLegDiagram } from '../../../actions/map'
+import { setLegDiagram, setMapillaryId } from '../../../actions/map'
 import { setViewedTrip } from '../../../actions/ui'
 import TripDetails from '../connected-trip-details'
 import TripTools from '../trip-tools'
@@ -55,6 +55,7 @@ class ConnectedItineraryBody extends Component {
       itinerary,
       setActiveLeg,
       setLegDiagram,
+      setMapillaryId,
       setViewedTrip,
       timeOptions
     } = this.props
@@ -69,6 +70,7 @@ class ConnectedItineraryBody extends Component {
           itinerary={itinerary}
           LegIcon={LegIcon}
           LineColumnContent={LineColumnContent}
+          mapillaryCallback={setMapillaryId}
           mapillaryKey={config?.mapillary?.key}
           PlaceName={PlaceName}
           RouteDescription={RouteDescription}
@@ -103,6 +105,7 @@ const mapStateToProps = (state, ownProps) => {
 
 const mapDispatchToProps = {
   setLegDiagram,
+  setMapillaryId,
   setViewedTrip
 }
 
diff --git a/lib/reducers/create-otp-reducer.js b/lib/reducers/create-otp-reducer.js
index 914a05a2e..6ba9ec15b 100644
--- a/lib/reducers/create-otp-reducer.js
+++ b/lib/reducers/create-otp-reducer.js
@@ -1,22 +1,20 @@
+/* eslint-disable no-case-declarations */
 import clone from 'clone'
-import update from 'immutability-helper'
+import coreUtils from '@opentripplanner/core-utils'
 import isEqual from 'lodash.isequal'
 import objectPath from 'object-path'
-import coreUtils from '@opentripplanner/core-utils'
+import update from 'immutability-helper'
 
+import { FETCH_STATUS } from '../util/constants'
+import { getTimestamp } from '../util/state'
+import { isBatchRoutingEnabled } from '../util/itinerary'
 import { MainPanelContent, MobileScreens } from '../actions/ui'
-import {FETCH_STATUS} from '../util/constants'
-import {getTimestamp} from '../util/state'
-import {isBatchRoutingEnabled} from '../util/itinerary'
 
 const { getTransitModes, isTransit } = coreUtils.itinerary
 const { matchLatLon } = coreUtils.map
 const { filterProfileOptions } = coreUtils.profile
-const {
-  ensureSingleAccessMode,
-  getDefaultQuery,
-  getTripOptionsFromQuery
-} = coreUtils.query
+const { ensureSingleAccessMode, getDefaultQuery, getTripOptionsFromQuery } =
+  coreUtils.query
 const { getItem, removeItem, storeItem } = coreUtils.storage
 const { getUserTimezone } = coreUtils.time
 
@@ -31,8 +29,8 @@ const MAX_RECENT_STORAGE = 5
  * TODO: maybe it's a better idea to move all of this to a script that can do
  *  JSON Schema validation and other stuff.
  */
-function validateInitialState (initialState) {
-  const {config} = initialState
+function validateInitialState(initialState) {
+  const { config } = initialState
 
   const errors = []
 
@@ -45,17 +43,18 @@ function validateInitialState (initialState) {
     objectPath.get(config, 'persistence.strategy') === 'localStorage' &&
     objectPath.get(config, 'geocoder.type') === 'ARCGIS'
   ) {
-    errors.push(new Error('Local Storage persistence and ARCGIS geocoder cannot be enabled at the same time!'))
+    errors.push(
+      new Error(
+        'Local Storage persistence and ARCGIS geocoder cannot be enabled at the same time!'
+      )
+    )
   }
 
   if (errors.length > 0) {
     throw new Error(
-      errors.reduce(
-        (message, error) => {
-          return `${message}\n- ${error.message}`
-        },
-        'Encountered the following configuration errors:'
-      )
+      errors.reduce((message, error) => {
+        return `${message}\n- ${error.message}`
+      }, 'Encountered the following configuration errors:')
     )
   }
 }
@@ -64,7 +63,7 @@ function validateInitialState (initialState) {
  * Create the initial state of otp-react-redux using user-provided config, any
  * items in localStorage and a few defaults.
  */
-export function getInitialState (userDefinedConfig) {
+export function getInitialState(userDefinedConfig) {
   const defaultConfig = {
     autoPlan: {
       default: 'ONE_LOCATION_CHANGED',
@@ -131,14 +130,16 @@ export function getInitialState (userDefinedConfig) {
   // Recent trip plan searches (excluding time/date parameters to avoid complexity).
   const recentSearches = getItem('recentSearches', [])
   // Filter valid locations found into locations list.
-  const locations = [home, work].filter(p => p)
+  const locations = [home, work].filter((p) => p)
   // TODO: parse and merge URL query params w/ default query
 
   // populate query by merging any provided query params w/ the default params
   const currentQuery = Object.assign(defaults, userDefinedConfig.initialQuery)
   // Add configurable locations to home and work locations
   if (config.locations) {
-    locations.push(...config.locations.map(l => ({ ...l, type: 'suggested' })))
+    locations.push(
+      ...config.locations.map((l) => ({ ...l, type: 'suggested' }))
+    )
   }
   // Check for alternative routerId in session storage. This is generally used
   // for testing single GTFS feed OTP graphs that are deployed to feed-specific
@@ -159,7 +160,7 @@ export function getInitialState (userDefinedConfig) {
   // If 'TRANSIT' is included in the mode list, replace it with individual modes
   if (queryModes.includes('TRANSIT')) {
     // Isolate the non-transit modes in queryModes
-    queryModes = queryModes.filter(m => !isTransit(m))
+    queryModes = queryModes.filter((m) => !isTransit(m))
     // Add all possible transit modes
     queryModes = queryModes.concat(getTransitModes(config))
     // Stringify and set as OTP 'mode' query param
@@ -256,7 +257,7 @@ export function getInitialState (userDefinedConfig) {
   }
 }
 
-function createOtpReducer (config) {
+function createOtpReducer(config) {
   const initialState = getInitialState(config)
   // validate the initial state
   validateInitialState(initialState)
@@ -268,35 +269,32 @@ function createOtpReducer (config) {
     const activeSearch = state.searches[searchId]
     switch (action.type) {
       case 'ROUTING_REQUEST':
-        const {
-          activeItinerary,
-          pending,
-          updateSearchInReducer
-        } = action.payload
+        const { activeItinerary, pending, updateSearchInReducer } =
+          action.payload
         const searchUpdate = updateSearchInReducer
           ? {
-            activeItinerary: { $set: activeItinerary },
-            activeLeg: { $set: null },
-            activeStep: { $set: null },
-            pending: { $set: pending },
-            // FIXME: get query from action payload?
-            query: { $set: clone(state.currentQuery) },
-            // omit requests reset to make sure requests can be added to this
-            // search
-            timestamp: { $set: getTimestamp() }
-          }
-          : {
-            $set: {
-              activeItinerary,
-              activeLeg: null,
-              activeStep: null,
-              pending,
+              activeItinerary: { $set: activeItinerary },
+              activeLeg: { $set: null },
+              activeStep: { $set: null },
+              pending: { $set: pending },
               // FIXME: get query from action payload?
-              query: clone(state.currentQuery),
-              response: [],
-              timestamp: getTimestamp()
+              query: { $set: clone(state.currentQuery) },
+              // omit requests reset to make sure requests can be added to this
+              // search
+              timestamp: { $set: getTimestamp() }
+            }
+          : {
+              $set: {
+                activeItinerary,
+                activeLeg: null,
+                activeStep: null,
+                pending,
+                // FIXME: get query from action payload?
+                query: clone(state.currentQuery),
+                response: [],
+                timestamp: getTimestamp()
+              }
             }
-          }
         return update(state, {
           activeSearchId: { $set: searchId },
           searches: { [searchId]: searchUpdate }
@@ -307,19 +305,22 @@ function createOtpReducer (config) {
             [searchId]: {
               pending: { $set: activeSearch.pending - 1 },
               response: {
-                $push: [{
-                  error: action.payload.error,
-                  requestId,
-                  url: action.payload.url
-                }]
+                $push: [
+                  {
+                    error: action.payload.error,
+                    requestId,
+                    url: action.payload.url
+                  }
+                ]
               }
             }
           }
         })
       case 'ROUTING_RESPONSE':
-        const response = (state.currentQuery.routingType === 'PROFILE')
-          ? filterProfileOptions(action.payload.response)
-          : action.payload.response
+        const response =
+          state.currentQuery.routingType === 'PROFILE'
+            ? filterProfileOptions(action.payload.response)
+            : action.payload.response
         response.requestId = requestId
         return update(state, {
           searches: {
@@ -350,8 +351,8 @@ function createOtpReducer (config) {
         })
       case 'SET_ACTIVE_ITINERARIES':
         const responseUpdate = {}
-        Object.entries(action.payload.assignedItinerariesByResponse)
-          .forEach(([ responseIdx, responsePlanItineraries ]) => {
+        Object.entries(action.payload.assignedItinerariesByResponse).forEach(
+          ([responseIdx, responsePlanItineraries]) => {
             responseUpdate[responseIdx] = {
               plan: {
                 itineraries: {
@@ -359,7 +360,8 @@ function createOtpReducer (config) {
                 }
               }
             }
-          })
+          }
+        )
         return update(state, {
           searches: {
             [searchId]: {
@@ -532,18 +534,26 @@ function createOtpReducer (config) {
         if (action.payload.indexOf('recent') !== -1) {
           const recentPlaces = clone(state.user.recentPlaces)
           // Remove recent from list of recent places
-          const removeIndex = recentPlaces.findIndex(l => l.id === action.payload)
+          const removeIndex = recentPlaces.findIndex(
+            (l) => l.id === action.payload
+          )
           recentPlaces.splice(removeIndex, 1)
           storeItem('recent', recentPlaces)
           return removeIndex !== -1
-            ? update(state, { user: { recentPlaces: { $splice: [[removeIndex, 1]] } } })
+            ? update(state, {
+                user: { recentPlaces: { $splice: [[removeIndex, 1]] } }
+              })
             : state
         } else {
           const locations = clone(state.user.locations)
-          const removeIndex = locations.findIndex(l => l.id === action.payload)
+          const removeIndex = locations.findIndex(
+            (l) => l.id === action.payload
+          )
           removeItem(action.payload)
           return removeIndex !== -1
-            ? update(state, { user: { locations: { $splice: [[removeIndex, 1]] } } })
+            ? update(state, {
+                user: { locations: { $splice: [[removeIndex, 1]] } }
+              })
             : state
         }
       }
@@ -552,23 +562,29 @@ function createOtpReducer (config) {
         switch (type) {
           case 'recent': {
             const recentPlaces = clone(state.user.recentPlaces)
-            const index = recentPlaces.findIndex(l => matchLatLon(l, location))
+            const index = recentPlaces.findIndex((l) =>
+              matchLatLon(l, location)
+            )
             // Replace recent place if duplicate found or add to list.
             if (index !== -1) recentPlaces.splice(index, 1, location)
             else recentPlaces.push(location)
-            const sortedPlaces = recentPlaces.sort((a, b) => b.timestamp - a.timestamp)
+            const sortedPlaces = recentPlaces.sort(
+              (a, b) => b.timestamp - a.timestamp
+            )
             // Only keep up to 5 recent locations
             // FIXME: Check for duplicates
             if (recentPlaces.length >= MAX_RECENT_STORAGE) {
               sortedPlaces.splice(MAX_RECENT_STORAGE)
             }
             storeItem('recent', recentPlaces)
-            return update(state, { user: { recentPlaces: { $set: sortedPlaces } } })
+            return update(state, {
+              user: { recentPlaces: { $set: sortedPlaces } }
+            })
           }
           default: {
             const locations = clone(state.user.locations)
             // Determine if location type (e.g., home or work) already exists in list
-            const index = locations.findIndex(l => l.type === type)
+            const index = locations.findIndex((l) => l.type === type)
             if (index !== -1) locations.splice(index, 1, location)
             else locations.push(location)
             storeItem(type, location)
@@ -580,11 +596,15 @@ function createOtpReducer (config) {
         // Payload is the stop ID.
         const favoriteStops = clone(state.user.favoriteStops)
         // Remove stop from favorites
-        const removeIndex = favoriteStops.findIndex(l => l.id === action.payload)
+        const removeIndex = favoriteStops.findIndex(
+          (l) => l.id === action.payload
+        )
         favoriteStops.splice(removeIndex, 1)
         storeItem('favoriteStops', favoriteStops)
         return removeIndex !== -1
-          ? update(state, { user: { favoriteStops: { $splice: [[removeIndex, 1]] } } })
+          ? update(state, {
+              user: { favoriteStops: { $splice: [[removeIndex, 1]] } }
+            })
           : state
       }
       case 'REMEMBER_STOP': {
@@ -601,10 +621,12 @@ function createOtpReducer (config) {
         }
         const favoriteStops = clone(state.user.favoriteStops)
         if (favoriteStops.length >= MAX_RECENT_STORAGE) {
-          window.alert(`Cannot save more than ${MAX_RECENT_STORAGE} stops. Remove one before adding more.`)
+          window.alert(
+            `Cannot save more than ${MAX_RECENT_STORAGE} stops. Remove one before adding more.`
+          )
           return state
         }
-        const index = favoriteStops.findIndex(s => s.id === stop.id)
+        const index = favoriteStops.findIndex((s) => s.id === stop.id)
         // Do nothing if duplicate stop found.
         if (index !== -1) {
           console.warn(`Stop with id ${stop.id} already exists in favorites.`)
@@ -613,15 +635,19 @@ function createOtpReducer (config) {
           favoriteStops.unshift(stop)
         }
         storeItem('favoriteStops', favoriteStops)
-        return update(state, { user: { favoriteStops: { $set: favoriteStops } } })
+        return update(state, {
+          user: { favoriteStops: { $set: favoriteStops } }
+        })
       }
       // FIXME: set up action
       case 'TOGGLE_ADVANCED_OPTIONS':
         storeItem('expandAdvanced', action.payload)
         if (!action.payload) removeItem('expandAdvanced')
-        return update(state, { user: {
-          expandAdvanced: { $set: action.payload }
-        } })
+        return update(state, {
+          user: {
+            expandAdvanced: { $set: action.payload }
+          }
+        })
       case 'TOGGLE_TRACKING': {
         storeItem('trackRecent', action.payload)
         let recentPlaces = clone(state.user.recentPlaces)
@@ -633,19 +659,25 @@ function createOtpReducer (config) {
           removeItem('recent')
           removeItem('recentSearches')
         }
-        return update(state, { user: {
-          recentPlaces: { $set: recentPlaces },
-          recentSearches: { $set: recentSearches },
-          trackRecent: { $set: action.payload }
-        } })
+        return update(state, {
+          user: {
+            recentPlaces: { $set: recentPlaces },
+            recentSearches: { $set: recentSearches },
+            trackRecent: { $set: action.payload }
+          }
+        })
       }
       case 'REMEMBER_SEARCH':
         const searches = clone(state.user.recentSearches)
-        const duplicateIndex = searches.findIndex(s => isEqual(s.query, action.payload.query))
+        const duplicateIndex = searches.findIndex((s) =>
+          isEqual(s.query, action.payload.query)
+        )
         // Overwrite duplicate search (so that new timestamp is stored).
         if (duplicateIndex !== -1) searches[duplicateIndex] = action.payload
         else searches.unshift(action.payload)
-        const sortedSearches = searches.sort((a, b) => b.timestamp - a.timestamp)
+        const sortedSearches = searches.sort(
+          (a, b) => b.timestamp - a.timestamp
+        )
         // Ensure recent searches do not extend beyond MAX_RECENT_STORAGE
         if (sortedSearches.length >= MAX_RECENT_STORAGE) {
           sortedSearches.splice(MAX_RECENT_STORAGE)
@@ -654,12 +686,14 @@ function createOtpReducer (config) {
         return update(state, { user: { searches: { $set: sortedSearches } } })
       case 'FORGET_SEARCH': {
         const recentSearches = clone(state.user.recentSearches)
-        const index = recentSearches.findIndex(l => l.id === action.payload)
+        const index = recentSearches.findIndex((l) => l.id === action.payload)
         // Remove item from list of recent searches
         recentSearches.splice(index, 1)
         storeItem('recentSearches', recentSearches)
         return index !== -1
-          ? update(state, { user: { recentSearches: { $splice: [[index, 1]] } } })
+          ? update(state, {
+              user: { recentSearches: { $splice: [[index, 1]] } }
+            })
           : state
       }
       case 'SET_AUTOPLAN':
@@ -686,12 +720,13 @@ function createOtpReducer (config) {
       case 'SET_ROUTER_ID':
         const routerId = action.payload
         // Store original path value in originalPath variable.
-        const originalPath = config.api.originalPath || config.api.path || '/otp/routers/default'
+        const originalPath =
+          config.api.originalPath || config.api.path || '/otp/routers/default'
         const path = routerId
           ? `/otp/routers/${routerId}`
-          // If routerId is null, revert to the original config's API path (or
-          // the standard path if that is not found).
-          : originalPath
+          : // If routerId is null, revert to the original config's API path (or
+            // the standard path if that is not found).
+            originalPath
         // Store routerId in session storage (persists through page reloads but
         // not when a new tab/window is opened).
         if (routerId) window.sessionStorage.setItem('routerId', routerId)
@@ -707,7 +742,15 @@ function createOtpReducer (config) {
       case 'SET_LEG_DIAGRAM':
         return update(state, {
           ui: {
-            diagramLeg: { $set: action.payload }
+            diagramLeg: { $set: action.payload },
+            mapillaryId: { $set: false }
+          }
+        })
+      case 'SET_MAPILLARY_ID':
+        return update(state, {
+          ui: {
+            diagramLeg: { $set: false },
+            mapillaryId: { $set: action.payload }
           }
         })
       case 'SET_ELEVATION_POINT':
@@ -742,13 +785,15 @@ function createOtpReducer (config) {
         })
 
       case 'NEARBY_STOPS_RESPONSE':
-        const {focusStopId, stops} = action.payload
+        const { focusStopId, stops } = action.payload
         const stopLookup = {}
-        stops.forEach(s => {
+        stops.forEach((s) => {
           stopLookup[s.id] = s
         })
 
-        const stopIds = stops.map(stop => stop.id).filter(id => focusStopId !== id)
+        const stopIds = stops
+          .map((stop) => stop.id)
+          .filter((id) => focusStopId !== id)
 
         if (!focusStopId) {
           return update(state, {
@@ -762,20 +807,24 @@ function createOtpReducer (config) {
           // losing the child stops field we're adding here.
           delete stopLookup[focusStopId]
           return update(state, {
-            transitIndex: { stops: {
-              // We'll keep all of the main child stop objects in the stops lookup (to match how the state currently looks)
-              $merge: stopLookup, // going to include the parentStop
-              // For the parent stop, we want to add the nearby stops as a new child stops field
-              [focusStopId]: {$merge: {nearbyStops: stopIds}}
-            } }
+            transitIndex: {
+              stops: {
+                // We'll keep all of the main child stop objects in the stops lookup (to match how the state currently looks)
+                $merge: stopLookup, // going to include the parentStop
+                // For the parent stop, we want to add the nearby stops as a new child stops field
+                [focusStopId]: { $merge: { nearbyStops: stopIds } }
+              }
+            }
           })
         }
       case 'FIND_NEARBY_AMENITIES_RESPONSE':
         const { stopId, ...amenities } = action.payload
         return update(state, {
-          transitIndex: { stops: {
-            [stopId]: {$merge: amenities}
-          } }
+          transitIndex: {
+            stops: {
+              [stopId]: { $merge: amenities }
+            }
+          }
         })
       case 'STOPS_WITHIN_BBOX_RESPONSE':
         return update(state, {
@@ -826,10 +875,12 @@ function createOtpReducer (config) {
       case 'SET_VIEWED_STOP':
         if (action.payload) {
           // If setting to a stop (not null), also set main panel.
-          return update(state, { ui: {
-            mainPanelContent: { $set: MainPanelContent.STOP_VIEWER },
-            viewedStop: { $set: action.payload }
-          } })
+          return update(state, {
+            ui: {
+              mainPanelContent: { $set: MainPanelContent.STOP_VIEWER },
+              viewedStop: { $set: action.payload }
+            }
+          })
         } else {
           // Otherwise, just replace viewed stop with null
           return update(state, { ui: { viewedStop: { $set: action.payload } } })
@@ -843,18 +894,24 @@ function createOtpReducer (config) {
         return update(state, { ui: { viewedTrip: { $set: null } } })
 
       case 'SET_HOVERED_STOP':
-        return update(state, { ui: { highlightedStop: { $set: action.payload } } })
+        return update(state, {
+          ui: { highlightedStop: { $set: action.payload } }
+        })
 
       case 'SET_VIEWED_ROUTE':
         if (action.payload) {
           // If setting to a route (not null), also set main panel.
-          return update(state, { ui: {
-            mainPanelContent: { $set: MainPanelContent.ROUTE_VIEWER },
-            viewedRoute: { $set: action.payload }
-          } })
+          return update(state, {
+            ui: {
+              mainPanelContent: { $set: MainPanelContent.ROUTE_VIEWER },
+              viewedRoute: { $set: action.payload }
+            }
+          })
         } else {
           // Otherwise, just replace viewed route with null
-          return update(state, { ui: { viewedRoute: { $set: action.payload } } })
+          return update(state, {
+            ui: { viewedRoute: { $set: action.payload } }
+          })
         }
       case 'FIND_STOP_RESPONSE':
         return update(state, {
@@ -934,7 +991,9 @@ function createOtpReducer (config) {
         })
       case 'TOGGLE_AUTO_REFRESH':
         storeItem('autoRefreshStopTimes', action.payload)
-        return update(state, { user: { autoRefreshStopTimes: { $set: action.payload } } })
+        return update(state, {
+          user: { autoRefreshStopTimes: { $set: action.payload } }
+        })
 
       case 'FIND_ROUTES_RESPONSE':
         // If routes is undefined, initialize it w/ the full payload
@@ -951,7 +1010,9 @@ function createOtpReducer (config) {
         // If routes is undefined, initialize it w/ this route only
         if (!state.transitIndex.routes) {
           return update(state, {
-            transitIndex: { routes: { $set: { [action.payload.id]: action.payload } } }
+            transitIndex: {
+              routes: { $set: { [action.payload.id]: action.payload } }
+            }
           })
         }
         // Otherwise, overwrite only this route
@@ -1008,19 +1069,20 @@ function createOtpReducer (config) {
         return update(state, {
           tnc: {
             etaEstimates: {
-              [action.payload.from]: fromData => {
+              [action.payload.from]: (fromData) => {
                 fromData = Object.assign({}, fromData)
                 const estimates = action.payload.estimates || []
-                estimates.forEach(estimate => {
+                estimates.forEach((estimate) => {
                   if (!fromData[estimate.company]) {
                     fromData[estimate.company] = {}
                   }
-                  fromData[estimate.company][estimate.productId] = Object.assign(
-                    {
-                      estimateTimestamp: new Date()
-                    },
-                    estimate
-                  )
+                  fromData[estimate.company][estimate.productId] =
+                    Object.assign(
+                      {
+                        estimateTimestamp: new Date()
+                      },
+                      estimate
+                    )
                 })
                 return fromData
               }
@@ -1031,7 +1093,7 @@ function createOtpReducer (config) {
         return update(state, {
           tnc: {
             rideEstimates: {
-              [action.payload.from]: fromData => {
+              [action.payload.from]: (fromData) => {
                 fromData = Object.assign({}, fromData)
                 const { company, rideEstimate, to } = action.payload
                 if (!rideEstimate) {
@@ -1078,23 +1140,25 @@ function createOtpReducer (config) {
       case 'UPDATE_OVERLAY_VISIBILITY':
         const mapOverlays = clone(state.config.map.overlays)
         for (const key in action.payload) {
-          const overlay = mapOverlays.find(o => o.name === key)
+          const overlay = mapOverlays.find((o) => o.name === key)
           overlay.visible = action.payload[key]
         }
-        return update(state,
-          { config: { map: { overlays: { $set: mapOverlays } } } }
-        )
+        return update(state, {
+          config: { map: { overlays: { $set: mapOverlays } } }
+        })
       case 'UPDATE_ITINERARY_FILTER':
-        return update(state,
-          { filter: { $set: action.payload } }
-        )
+        return update(state, { filter: { $set: action.payload } })
       case 'SET_PREVIOUS_ITINERARY_VIEW':
-        return update(state, { ui: { previousItineraryView: { $set: action.payload } } })
+        return update(state, {
+          ui: { previousItineraryView: { $set: action.payload } }
+        })
       case 'UPDATE_LOCALE':
-        return update(state, { ui: {
-          locale: { $set: action.payload.locale },
-          localizedMessages: { $set: action.payload.messages }
-        }})
+        return update(state, {
+          ui: {
+            locale: { $set: action.payload.locale },
+            localizedMessages: { $set: action.payload.messages }
+          }
+        })
 
       case 'UPDATE_ROUTE_VIEWER_FILTER':
         return update(state, {

From 3aa1cee089658307d9993dcaccef1ba556fc3c2c Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 13 Jan 2022 14:00:58 +0100
Subject: [PATCH 3/7] improvement(mapillary-frame): show fake loading screen to
 provide click feedback

---
 lib/components/map/mapillary-frame.tsx | 29 ++++++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/lib/components/map/mapillary-frame.tsx b/lib/components/map/mapillary-frame.tsx
index f4225abde..b8e79a262 100644
--- a/lib/components/map/mapillary-frame.tsx
+++ b/lib/components/map/mapillary-frame.tsx
@@ -1,5 +1,8 @@
 import { Button } from 'react-bootstrap'
-import React from 'react'
+import React, { useEffect, useState } from 'react'
+
+// eslint-disable-next-line sort-imports-es6-autofix/sort-imports-es6
+import Icon from '../util/icon'
 
 const MapillaryFrame = ({
   id,
@@ -8,12 +11,34 @@ const MapillaryFrame = ({
   id: string
   onClose?: () => void
 }): React.ReactElement => {
+  const [fakeLoad, setFakeLoad] = useState(false)
+  useEffect(() => {
+    // If the ID changed, show a "fake" loading screen to indicate to the user
+    // something is happening
+    setFakeLoad(true)
+    setTimeout(() => setFakeLoad(false), 750)
+  }, [id])
+
   return (
     <div className="leg-diagram" style={{ height: '50vh', zIndex: 999 }}>
+      <div
+        style={{
+          alignItems: 'center',
+          display: fakeLoad ? 'flex' : 'none',
+          height: '100%',
+          justifyContent: 'center'
+        }}
+      >
+        <Icon className="fa-spin" type="spinner" />
+      </div>
       <iframe
         frameBorder="0"
         src={`https://www.mapillary.com/embed?image_key=${id}&style=photo`}
-        style={{ height: '100%', width: '100%' }}
+        style={{
+          display: fakeLoad ? 'none' : 'block',
+          height: '100%',
+          width: '100%'
+        }}
         title="Imagery of the street"
       />
       <Button

From 568ab7a0bd7eaf264b02dc5d2b8317c0c54ac2e3 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Thu, 13 Jan 2022 14:12:57 +0100
Subject: [PATCH 4/7] improvement(map/mapillary-frame): improve accessibility

---
 lib/components/map/mapillary-frame.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/components/map/mapillary-frame.tsx b/lib/components/map/mapillary-frame.tsx
index b8e79a262..795f8d48a 100644
--- a/lib/components/map/mapillary-frame.tsx
+++ b/lib/components/map/mapillary-frame.tsx
@@ -42,6 +42,7 @@ const MapillaryFrame = ({
         title="Imagery of the street"
       />
       <Button
+        aria-label="Close"
         className="mapillary-close-button close-button clear-button-formatting"
         onClick={onClose}
       >

From 2670533526c8c21436900296e2d778f59448a02b Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 19 Jan 2022 08:53:13 -0500
Subject: [PATCH 5/7] refactor(map.css): ensure close button doesn't consume
 panel

---
 lib/components/map/map.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/components/map/map.css b/lib/components/map/map.css
index 04dca4aea..2cb3349b7 100644
--- a/lib/components/map/map.css
+++ b/lib/components/map/map.css
@@ -69,6 +69,7 @@
   border-radius: 0 0 1em;
   display: block;
   left: 0;
+  max-width: 40px;
   padding: 0.5em;
   position: absolute;
   top: 0;

From 64bf9eab0ac11a2ae58fca2d35a1fa7cf5d47972 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Tue, 8 Feb 2022 08:07:55 -0800
Subject: [PATCH 6/7] chore(deps): update itinerary-body

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 81a2998a0..d92a209f7 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
     "@opentripplanner/geocoder": "^1.1.1",
     "@opentripplanner/humanize-distance": "^1.1.0",
     "@opentripplanner/icons": "^1.2.0",
-    "@opentripplanner/itinerary-body": "^2.7.0",
+    "@opentripplanner/itinerary-body": "^2.9.0",
     "@opentripplanner/location-field": "^1.11.1",
     "@opentripplanner/location-icon": "^1.4.0",
     "@opentripplanner/park-and-ride-overlay": "^1.2.2",
diff --git a/yarn.lock b/yarn.lock
index 7019c6546..37ddee735 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2532,10 +2532,10 @@
     "@opentripplanner/core-utils" "^4.1.0"
     prop-types "^15.7.2"
 
-"@opentripplanner/itinerary-body@^2.7.0":
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/itinerary-body/-/itinerary-body-2.7.0.tgz#ba5ae119bc97deb30d68936d15fc683bbd15e865"
-  integrity sha512-9i3uXPTssyZPr+4a+2QX5QywF+8b11Km3RRDpZFcr4bwTDllfX21mvt36miqhZ/l6mYmloMzybQM+XIJWlQHtA==
+"@opentripplanner/itinerary-body@^2.9.0":
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/itinerary-body/-/itinerary-body-2.9.0.tgz#85623aa9e3605ba425b929d3eb949b5bcf36935a"
+  integrity sha512-aCwRwiq32uhWMBS0uMp5C3vEyNEkA/5C7sPBWgJRhytAR5HsSfdbGkUeM6EUbY+9Ki3QldWR4BHpNd7wqWvF9Q==
   dependencies:
     "@opentripplanner/core-utils" "^4.5.0"
     "@opentripplanner/humanize-distance" "^1.1.0"

From f68f92513ae1214fa5cea5e9cdd287fcd36cc78a Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Tue, 22 Feb 2022 14:43:00 -0800
Subject: [PATCH 7/7] refactor(example-config): clarify mapillary api key

---
 example-config.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/example-config.yml b/example-config.yml
index 7115a99ae..ec5f97ae0 100644
--- a/example-config.yml
+++ b/example-config.yml
@@ -411,5 +411,6 @@ dateTime:
 #   hideRouteShapesWithinFlexZones: true
 
 # API key to make Mapillary API calls. These are used to show street imagery.
+# Mapillary calls these "Client Tokens". They can be created at https://www.mapillary.com/dashboard/developers
 # mapillary:
 #   key: <Mapillary Key>