Mobile batch results

example.js

@@ -13,6 +13,7 @@ import createLogger from 'redux-logger'
 
 // import OTP-RR components
 import {
+  BatchResultsScreen,
   BatchRoutingPanel,
   BatchSearchScreen,
   CallTakerControls,
@@ -21,6 +22,7 @@ import {
   DefaultItinerary,
   DefaultMainPanel,
   FieldTripWindows,
+  MobileResultsScreen,
   MobileSearchScreen,
   ResponsiveWebapp,
   createCallTakerReducer,
@@ -76,6 +78,7 @@ const TermsOfStorage = () => (
 // - MainControls (optional)
 // - MainPanel (required)
 // - MapWindows (optional)
+// - MobileResultsScreen (required)
 // - MobileSearchScreen (required)
 // - ModeIcon (required)
 // - TermsOfService (required if otpConfig.persistence.strategy === 'otp_middleware')
@@ -96,6 +99,9 @@ const components = {
       <FieldTripWindows />
     </>
     : null,
+  MobileResultsScreen: isBatchRoutingEnabled
+    ? BatchResultsScreen
+    : MobileResultsScreen,
   MobileSearchScreen: isBatchRoutingEnabled
     ? BatchSearchScreen
     : MobileSearchScreen,

lib/actions/ui.js

@@ -3,9 +3,13 @@ import coreUtils from '@opentripplanner/core-utils'
 import { createAction } from 'redux-actions'
 import { matchPath } from 'react-router'
 
-import { findRoute } from './api'
+import { findRoute, setUrlSearch } from './api'
 import { setMapCenter, setMapZoom, setRouterId } from './config'
-import { clearActiveSearch, parseUrlQueryString, setActiveSearch } from './form'
+import {
+  clearActiveSearch,
+  parseUrlQueryString,
+  setActiveSearch
+} from './form'
 import { clearLocation } from './map'
 import { setActiveItinerary } from './narrative'
 import { getUiUrlParams } from '../util/state'
@@ -230,3 +234,43 @@ export const MobileScreens = {
   SET_DATETIME: 7,
   RESULTS_SUMMARY: 8
 }
+
+/**
+ * Enum to describe the layout of the itinerary view
+ * (currently only used in batch results).
+ */
+export const ItineraryView = {
+  DEFAULT: 'list',
+  /** One itinerary is shown. (In mobile view, the map is hidden.) */
+  FULL: 'full',
+  /** One itinerary is shown, itinerary and map are focused on a leg. (The mobile view is split.) */
+  LEG: 'leg',
+  /** One itinerary leg is hidden. (In mobile view, the map is expanded.) */
+  LEG_HIDDEN: 'leg-hidden',
+  /** The list of itineraries is shown. (The mobile view is split.) */
+  LIST: 'list',
+  /** The list of itineraries is hidden. (In mobile view, the map is expanded.) */
+  LIST_HIDDEN: 'list-hidden'
+}
+
+/**
+ * Sets the itinerary view state (see values above) in the URL params
+ * (currently only used in batch results).
+ */
+export function setItineraryView (value) {
+  return function (dispatch, getState) {
+    const urlParams = coreUtils.query.getUrlParams()
+
+    // If the itinerary value is changed,
+    // set the desired ui query param, or remove it if same as default.
+    if (value !== urlParams.ui_itineraryView) {
+      if (value !== ItineraryView.DEFAULT) {
+        urlParams.ui_itineraryView = value
+      } else if (urlParams.ui_itineraryView) {
+        delete urlParams.ui_itineraryView
+      }
+
+      dispatch(setUrlSearch(urlParams))
+    }
+  }
+}

lib/components/map/bounds-updating-overlay.js

@@ -22,6 +22,9 @@ function extendBoundsByPlaces (bounds, places = []) {
     })
 }
 
+/** Padding around itinerary bounds and map bounds. */
+const BOUNDS_PADDING = [30, 30]
+
 /**
  * This MapLayer component will automatically update the leaflet bounds
  * depending on what data is in the redux store. This component does not
@@ -42,6 +45,29 @@ class BoundsUpdatingOverlay extends MapLayer {
 
   componentWillUnmount () {}
 
+  _fitItineraryViewToMap (newProps, bounds, map) {
+    // If itineraryView has changed (currently: only in mobile batch results),
+    // force a resize of the map before re-fitting the active itinerary or active leg,
+    // and do that after a delay to ensure that canvas heights have stabilized in the DOM.
+    setTimeout(() => {
+      map.invalidateSize(true)
+
+      const { activeLeg, itinerary } = newProps
+      if (itinerary) {
+        if (activeLeg !== null) {
+          // Fit to active leg if set.
+          map.fitBounds(
+            getLeafletLegBounds(itinerary.legs[activeLeg]),
+            { ITINERARY_MAP_PADDING: BOUNDS_PADDING }
+          )
+        } else {
+          // Fit to whole itinerary otherwise.
+          map.fitBounds(bounds, { ITINERARY_MAP_PADDING: BOUNDS_PADDING })
+        }
+      }
+    }, 250)
+  }
+
   /* eslint-disable-next-line complexity */
   updateBounds (oldProps, newProps) {
     // TODO: maybe setting bounds ought to be handled in map props...
@@ -55,8 +81,6 @@ class BoundsUpdatingOverlay extends MapLayer {
     const { map } = newProps.leaflet
     if (!map) return
 
-    const padding = [30, 30]
-
     // Fit map to to entire itinerary if active itinerary bounds changed
     const newFrom = newProps.query && newProps.query.from
     const newItinBounds = newProps.itinerary && getLeafletItineraryBounds(newProps.itinerary)
@@ -69,11 +93,17 @@ class BoundsUpdatingOverlay extends MapLayer {
     const oldIntermediate = oldProps.query && oldProps.query.intermediatePlaces
     const newIntermediate = newProps.query && newProps.query.intermediatePlaces
     const intermediateChanged = !isEqual(oldIntermediate, newIntermediate)
-    if (
+
+    // Also refit map if itineraryView prop has changed.
+    const itineraryViewChanged = oldProps.itineraryView !== newProps.itineraryView
+
+    if (itineraryViewChanged) {
+      this._fitItineraryViewToMap(newProps, newItinBounds, map)
+    } else if (
       (!oldItinBounds && newItinBounds) ||
       (oldItinBounds && newItinBounds && !oldItinBounds.equals(newItinBounds))
     ) {
-      map.fitBounds(newItinBounds, { padding })
+      map.fitBounds(newItinBounds, { padding: BOUNDS_PADDING })
     // Pan to to itinerary leg if made active (clicked); newly active leg must be non-null
     } else if (
       newProps.itinerary &&
@@ -82,7 +112,7 @@ class BoundsUpdatingOverlay extends MapLayer {
     ) {
       map.fitBounds(
         getLeafletLegBounds(newProps.itinerary.legs[newProps.activeLeg]),
-        { padding }
+        { padding: BOUNDS_PADDING }
       )
 
     // If no itinerary update but from/to locations are present, fit to those
@@ -108,9 +138,8 @@ class BoundsUpdatingOverlay extends MapLayer {
         map.fitBounds([
           [left, bottom],
           [right, top]
-        ], { padding })
+        ], { padding: BOUNDS_PADDING })
       }
-
     // If only from or to is set, pan to that
     } else if (newFrom && fromChanged) {
       map.panTo([newFrom.lat, newFrom.lon])
@@ -141,10 +170,13 @@ class BoundsUpdatingOverlay extends MapLayer {
 
 const mapStateToProps = (state, ownProps) => {
   const activeSearch = getActiveSearch(state.otp)
+  const urlParams = coreUtils.query.getUrlParams()
+
   return {
     activeLeg: activeSearch && activeSearch.activeLeg,
     activeStep: activeSearch && activeSearch.activeStep,
     itinerary: getActiveItinerary(state.otp),
+    itineraryView: urlParams.ui_itineraryView,
     popupLocation: state.otp.ui.mapPopupLocation,
     query: state.otp.currentQuery
   }

lib/components/map/default-map.js

@@ -1,4 +1,5 @@
 import BaseMap from '@opentripplanner/base-map'
+import coreUtils from '@opentripplanner/core-utils'
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import styled from 'styled-components'
@@ -119,6 +120,7 @@ class DefaultMap extends Component {
       bikeRentalStations,
       carRentalQuery,
       carRentalStations,
+      itineraryView,
       mapConfig,
       mapPopupLocation,
       vehicleRentalQuery,
@@ -146,16 +148,23 @@ class DefaultMap extends Component {
           center={center}
           maxZoom={mapConfig.maxZoom}
           onClick={this.onMapClick}
-          popup={popup}
           onPopupClosed={this.onPopupClosed}
+          popup={popup}
           zoom={mapConfig.initZoom || 13}
         >
           {/* The default overlays */}
           <BoundsUpdatingOverlay />
           <EndpointsOverlay />
           <RouteViewerOverlay />
           <StopViewerOverlay />
-          <TransitiveOverlay />
+          {/*
+              HACK: Use the key prop to force a remount and full resizing of transitive
+              if the map container size changes,
+              per https://linguinecode.com/post/4-methods-to-re-render-react-component
+              Without it, transitive resolution will not match the map,
+              and transitive will appear blurry after e.g. the narrative is expanded.
+           */}
+          <TransitiveOverlay key={itineraryView ? `transitive-${itineraryView}` : 'transitive-default'} />
           <TripViewerOverlay />
           <ElevationPointMarker />
 
@@ -206,9 +215,12 @@ const mapStateToProps = (state, ownProps) => {
   const overlays = state.otp.config.map && state.otp.config.map.overlays
     ? state.otp.config.map.overlays
     : []
+  const urlParams = coreUtils.query.getUrlParams()
+
   return {
     bikeRentalStations: state.otp.overlay.bikeRental.stations,
     carRentalStations: state.otp.overlay.carRental.stations,
+    itineraryView: urlParams.ui_itineraryView,
     mapConfig: state.otp.config.map,
     mapPopupLocation: state.otp.ui.mapPopupLocation,
     overlays,