Merge pull request #630 from ibi-group/refactor-route-layer

Handle new gtfs-lib response for encoded polylines

Author: landonreed

i18n/english.yml

@@ -676,7 +676,7 @@ components:
   ShowAllRoutesOnMapFilter:
     fetching: Fetching
     showAllRoutesOnMap: Show all routes
-    tooManyShapeRecords: Too many shapes to display
+    tooManyShapeRecords: large shapes.txt may impact performance
   Sidebar:
     unknown: Unknown
   SnapshotItem:

lib/common/util/gtfs.js

@@ -1,6 +1,9 @@
 // @flow
 
 import moment from 'moment'
+import {decode as decodePolyline} from 'polyline'
+
+type GraphQLShape = {polyline: string, shape_id: string}
 
 /**
  * @param  {number} seconds Seconds after midnight
@@ -36,3 +39,16 @@ export function secondsAfterMidnightToHHMM (seconds: ?(number | string)): string
 export function humanizeSeconds (seconds: number): string {
   return moment.duration(seconds, 'seconds').humanize()
 }
+
+/**
+ * Array map function to decode a GraphQL encoded shape polyline.
+ */
+export function decodeShapePolylines (shape: GraphQLShape) {
+  return {
+    id: shape.shape_id,
+    // Decode polyline and coords divide by ten (gtfs-lib
+    // simplification level requires this).
+    latLngs: decodePolyline(shape.polyline)
+      .map(coords => ([coords[0] / 10, coords[1] / 10]))
+  }
+}

lib/editor/actions/editor.js

@@ -40,7 +40,7 @@ const setEditorCheckIn = createAction(
   'SET_EDITOR_CHECK_IN',
   (payload: LockState) => payload
 )
-const showEditorModal = createVoidPayloadAction('SHOW_EDITOR_MODAL')
+export const showEditorModal = createVoidPayloadAction('SHOW_EDITOR_MODAL')
 
 export type EditorActions = ActionType<typeof createGtfsEntity> |
   ActionType<typeof receiveBaseGtfs> |

lib/editor/actions/tripPattern.js

@@ -5,10 +5,12 @@ import {ActionCreators} from 'redux-undo'
 import {toast} from 'react-toastify'
 
 import {resetActiveGtfsEntity, savedGtfsEntity, updateActiveGtfsEntity, updateEditSetting} from './active'
-import {createVoidPayloadAction, secureFetch} from '../../common/actions'
+import {createVoidPayloadAction, fetchGraphQL, secureFetch} from '../../common/actions'
 import {snakeCaseKeys} from '../../common/util/map-keys'
 import {generateUID} from '../../common/util/util'
-import {fetchGTFSEntities} from '../../manager/actions/versions'
+import {showEditorModal} from './editor'
+import {shapes} from '../../gtfs/util/graphql'
+import {fetchGTFSEntities, receiveGTFSEntities} from '../../manager/actions/versions'
 import {fetchTripCounts} from './trip'
 import {getEditorNamespace} from '../util/gtfs'
 import {resequenceStops, resequenceShapePoints} from '../util/map'
@@ -17,6 +19,7 @@ import {entityIsNew} from '../util/objects'
 import type {ControlPoint, Pattern, PatternStop} from '../../types'
 import type {dispatchFn, getStateFn} from '../../types/reducers'
 
+const fetchingTripPatterns = createVoidPayloadAction('FETCHING_TRIP_PATTERNS')
 const savedTripPattern = createVoidPayloadAction('SAVED_TRIP_PATTERN')
 export const setActivePatternSegment = createAction(
   'SET_ACTIVE_PATTERN_SEGMENT',
@@ -118,8 +121,25 @@ export function togglePatternEditing () {
  */
 export function fetchTripPatterns (feedId: string) {
   return function (dispatch: dispatchFn, getState: getStateFn) {
+    dispatch(fetchingTripPatterns())
     const namespace = getEditorNamespace(feedId, getState())
-    return dispatch(fetchGTFSEntities({namespace, type: 'pattern', editor: true}))
+    if (!namespace) {
+      console.error('Cannot fetch GTFS for undefined or null namespace')
+      dispatch(showEditorModal())
+      return
+    }
+    const variables = {namespace}
+    return dispatch(fetchGraphQL({query: shapes, variables}))
+      .then(data => dispatch(
+        receiveGTFSEntities({
+          namespace,
+          component: 'pattern',
+          data,
+          editor: true,
+          id: null,
+          replaceNew: true
+        })
+      ))
   }
 }
 

lib/editor/components/map/EditorMapLayersControl.js

@@ -1,9 +1,11 @@
 // @flow
 
-import React, {Component} from 'react'
-import {Browser} from 'leaflet'
+import React, {PureComponent} from 'react'
+import L from 'leaflet'
 import {
+  FeatureGroup,
   LayersControl,
+  Polyline,
   TileLayer
 } from 'react-leaflet'
 
@@ -23,37 +25,34 @@ type Props = {
 
 type OverlayItem = {component: any, name: string}
 
-export default class EditorMapLayersControl extends Component<Props> {
+export default class EditorMapLayersControl extends PureComponent<Props> {
   render () {
-    const { stops, user } = this.props
+    const canvas = L.canvas()
+    const { tripPatterns, stops, user } = this.props
     const { BaseLayer, Overlay } = LayersControl
     const OVERLAYS: Array<OverlayItem> = [
-      // FIXME: Do not show trip pattern overlay because it can cause out of
-      // memory issues for very large GTFS feeds.
-      // {
-      //   name: 'Route alignments',
-      //   component: (
-      //     <FeatureGroup>
-      //       {tripPatterns
-      //         ? tripPatterns.map((tp) => {
-      //           if (!tp.latLngs) return null
-      //           return (
-      //             <Polyline
-      //               key={tp.id}
-      //               positions={tp.latLngs}
-      //               weight={2}
-      //               color='#888'>
-      //               <Tooltip sticky>
-      //                 <span>{tp.name} ({tp.route_id})</span>
-      //               </Tooltip>
-      //             </Polyline>
-      //           )
-      //         })
-      //         : null
-      //       }
-      //     </FeatureGroup>
-      //   )
-      // },
+      {
+        name: 'Route alignments',
+        component: (
+          <FeatureGroup>
+            {tripPatterns
+              ? tripPatterns.map((tp) => {
+                if (!tp.latLngs) return null
+                return (
+                  <Polyline
+                    color='#888'
+                    interactive={false}
+                    key={tp.id}
+                    positions={tp.latLngs}
+                    renderer={canvas}
+                    weight={2} />
+                )
+              })
+              : null
+            }
+          </FeatureGroup>
+        )
+      },
       {
         name: 'Stop locations',
         component: <StopLayer key='stop-layer' stops={stops} />
@@ -77,7 +76,7 @@ export default class EditorMapLayersControl extends Component<Props> {
             name='Route layer'
             key='route-layer'>
             <TileLayer
-              url={`https://s3.amazonaws.com/datatools-nysdot/tiles/{z}_{x}_{y}${Browser.retina ? '@2x' : ''}.png`} />
+              url={`https://s3.amazonaws.com/datatools-nysdot/tiles/{z}_{x}_{y}${L.Browser.retina ? '@2x' : ''}.png`} />
           </Overlay>
         }
         {OVERLAYS.map((overlay: OverlayItem, i: number) => (

lib/editor/containers/ActiveGtfsEditor.js

@@ -65,7 +65,7 @@ const mapStateToProps = (state: AppState, ownProps: Props) => {
   const {activeEntityId, subEntityId} = getIdsFromParams(ownProps.routeParams)
   const {data, editSettings: editSettingsState, mapState} = state.editor
   const {present: editSettings} = editSettingsState
-  const {active, tables, status} = data
+  const {active, tables, tripPatterns, status} = data
   // FIXME: entityId is now a non-string line number and somewhere the number is
   // being cast to a string.
   const activeEntity = active.entity && active.entity.id === activeEntityId
@@ -130,6 +130,7 @@ const mapStateToProps = (state: AppState, ownProps: Props) => {
     tableData: tables,
     tableView,
     timetableStatus,
+    tripPatterns,
     user,
     validationErrors
   }

lib/editor/reducers/data.js

@@ -4,8 +4,9 @@ import update from 'react-addons-update'
 import clone from 'lodash/cloneDeep'
 import SortDirection from 'react-virtualized/dist/commonjs/Table/SortDirection'
 
-import {ENTITY} from '../constants'
+import {decodeShapePolylines} from '../../common/util/gtfs'
 import {defaultSorter} from '../../common/util/util'
+import {ENTITY} from '../constants'
 import {generateNullProps, getTableById, getKeyForId} from '../util/gtfs'
 import {getMapToGtfsStrategy, entityIsNew} from '../util/objects'
 import {assignDistancesToPatternStops, constructShapePoints} from '../util/map'
@@ -22,6 +23,11 @@ const getUpdateEntityKeys = component => component === 'trippattern'
 export const defaultState = {
   active: {},
   lock: {},
+  sort: {
+    key: 'name',
+    direction: SortDirection.ASC
+  },
+  status: {},
   tables: {
     agency: [],
     calendar: [],
@@ -36,11 +42,7 @@ export const defaultState = {
       service_id: []
     }
   },
-  sort: {
-    key: 'name',
-    direction: SortDirection.ASC
-  },
-  status: {}
+  tripPatterns: null
 }
 
 /* eslint-disable complexity */
@@ -51,6 +53,10 @@ const data = (state: DataState = defaultState, action: Action): DataState => {
       return update(state, {active: {$merge: {feedSourceId}}})
     case 'RECEIVE_BASE_GTFS': {
       const feed = clone(action.payload.feed)
+      if (!feed) {
+        console.warn('Could not fetch base GTFS!')
+        return state
+      }
       if (feed.feed_info.length === 0) {
         console.warn(`No feed info found. Adding feed info with null values.`)
         feed.feed_info.push(generateNullProps('feedinfo'))
@@ -223,6 +229,11 @@ const data = (state: DataState = defaultState, action: Action): DataState => {
       if (!tableName) return state
       return update(state, {tables: {[tableName]: {$push: [entity]}}})
     }
+    case 'FETCHING_TRIP_PATTERNS': {
+      // Set value to an empty array to prevent the user from accidentally
+      // triggering multiple fetches.
+      return update(state, {tripPatterns: {$set: []}})
+    }
     case 'RECEIVE_GTFS_ENTITIES': {
       let activePattern
       const {data, editor, component} = action.payload
@@ -235,17 +246,7 @@ const data = (state: DataState = defaultState, action: Action): DataState => {
         // Handle trip patterns to be drawn as overlay layer in editor
         return update(state, {
           tripPatterns: {$set:
-            data.feed.patterns.map(pattern => {
-              return {
-                id: pattern.id,
-                name: pattern.name,
-                route_id: pattern.route_id,
-                latLngs: pattern.shape_points
-                  ? (pattern.shape_points.map(sp =>
-                    ({lon: sp.shape_pt_lon, lat: sp.shape_pt_lat})))
-                  : null
-              }
-            })
+            data.feed.shapes_as_polylines.map(decodeShapePolylines)
           }
         })
       }

lib/gtfs/actions/shapes.js

@@ -3,6 +3,7 @@
 import {createAction, type ActionType} from 'redux-actions'
 
 import {createVoidPayloadAction, fetchGraphQL} from '../../common/actions'
+import {decodeShapePolylines} from '../../common/util/gtfs'
 import {shapes} from '../../gtfs/util/graphql'
 import {updateRoutesOnMapDisplay} from './filter'
 
@@ -34,13 +35,8 @@ export function toggleShowAllRoutesOnMap (namespace: string) {
       dispatch(fetchingShapes())
       return dispatch(fetchGraphQL({query: shapes, variables: {namespace}}))
         .then(data => {
-          const {patterns} = data.feed
-          const shapes = patterns.map(pattern => {
-            return pattern.shape.map(point => [
-              point.shape_pt_lat,
-              point.shape_pt_lon
-            ])
-          })
+          const {shapes_as_polylines: encodedShapes} = data.feed
+          const shapes = encodedShapes.map(decodeShapePolylines)
           dispatch(receiveShapes(shapes))
         })
     }