fix(editor-map): handle new gtfs-lib response for encoded polylines

fix #627

Author: landonreed

lib/editor/actions/tripPattern.js

@@ -5,10 +5,10 @@ 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 {fetchGTFSEntities, receiveGTFSEntities} from '../../manager/actions/versions'
 import {fetchTripCounts} from './trip'
 import {getEditorNamespace} from '../util/gtfs'
 import {resequenceStops, resequenceShapePoints} from '../util/map'
@@ -17,6 +17,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 +119,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}))
+    const query = `
+query shapesQuery ($namespace: String) {
+  feed(namespace: $namespace) {
+    feed_version
+    feed_info {
+      feed_id
+    }
+    shapes (limit: -1) {
+      shape_id
+      polyline
+    }
+  }
+}
+`
+    const variables = {namespace}
+    return dispatch(fetchGraphQL({query, variables}))
+      .then(data => dispatch(receiveGTFSEntities({namespace, component: 'pattern', data, editor: true, replaceNew: true})))
   }
 }
 

lib/editor/components/map/EditorMapLayersControl.js

@@ -1,13 +1,12 @@
 // @flow
 
-import React, {Component} from 'react'
-import {Browser} from 'leaflet'
+import React, {PureComponent} from 'react'
+import L from 'leaflet'
 import {
   TileLayer,
   FeatureGroup,
   LayersControl,
-  Polyline,
-  Tooltip
+  Polyline
 } from 'react-leaflet'
 
 import {getUserMetadataProperty} from '../../../common/util/user'
@@ -26,8 +25,9 @@ type Props = {
 
 type OverlayItem = {component: any, name: string}
 
-export default class EditorMapLayersControl extends Component<Props> {
+export default class EditorMapLayersControl extends PureComponent<Props> {
   render () {
+    const canvas = L.canvas()
     const { tripPatterns, stops, user } = this.props
     const { BaseLayer, Overlay } = LayersControl
     const OVERLAYS: Array<OverlayItem> = [
@@ -43,11 +43,8 @@ export default class EditorMapLayersControl extends Component<Props> {
                     key={tp.id}
                     positions={tp.latLngs}
                     weight={2}
-                    color='#888'>
-                    <Tooltip sticky>
-                      <span>{tp.name} ({tp.route_id})</span>
-                    </Tooltip>
-                  </Polyline>
+                    renderer={canvas}
+                    color='#888' />
                 )
               })
               : null
@@ -78,7 +75,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

@@ -2,6 +2,7 @@
 
 import update from 'react-addons-update'
 import clone from 'lodash/cloneDeep'
+import {decode as decodePolyline} from 'polyline'
 import SortDirection from 'react-virtualized/dist/commonjs/Table/SortDirection'
 
 import {ENTITY} from '../constants'
@@ -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,15 +246,13 @@ 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 => {
+            data.feed.shapes.map(shape => {
               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
+                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/manager/actions/versions.js

@@ -49,7 +49,7 @@ const receiveFeedVersions = createAction(
     versions: Array<FeedVersion>
   }) => payload
 )
-const receiveGTFSEntities = createAction(
+export const receiveGTFSEntities = createAction(
   'RECEIVE_GTFS_ENTITIES',
   (payload: {
     component: string,