feat(feed viewer): Add various enhancements to feed viewer, including…

… consistency in selected route/

lib/gtfs/actions/filter.js

@@ -48,6 +48,20 @@ export function updatePermissionFilter (permission) {
   }
 }
 
+export function updateRouteFilter (routeId) {
+  return {
+    type: 'ROUTE_FILTER_CHANGE',
+    payload: routeId
+  }
+}
+
+export function updatePatternFilter (patternId) {
+  return {
+    type: 'PATTERN_FILTER_CHANGE',
+    payload: patternId
+  }
+}
+
 export const updateDateTimeFilter = createAction('UPDATE_GTFS_DATETIME_FILTER')
 export const addActiveFeed = createAction('ADD_ACTIVE_FEED')
 export const removeActiveFeed = createAction('REMOVE_ACTIVE_FEED')

lib/gtfs/actions/patterns.js

@@ -2,6 +2,7 @@ import fetch from 'isomorphic-fetch'
 import {createAction} from 'redux-actions'
 
 import {compose, patterns} from '../../gtfs/util/graphql'
+import {updateRouteFilter} from './filter'
 
 export const fetchingPatterns = createAction('FETCH_GRAPHQL_PATTERNS')
 export const clearPatterns = createAction('CLEAR_GRAPHQL_PATTERNS')
@@ -10,7 +11,7 @@ export const receivePatterns = createAction('FETCH_GRAPHQL_PATTERNS_FULFILLED')
 
 export function patternDateTimeFilterChange (namespace, props) {
   return function (dispatch, getState) {
-    const routeId = getState().gtfs.patterns.routeFilter
+    const routeId = getState().gtfs.filter.routeFilter
     const { date, from, to } = getState().gtfs.filter.dateTimeFilter
     dispatch(fetchPatterns(namespace, routeId, date, from, to))
   }
@@ -42,18 +43,13 @@ export function fetchPatterns (namespace, routeId, date, from, to) {
   }
 }
 
-export function updateRouteFilter (routeId) {
-  return {
-    type: 'PATTERN_ROUTE_FILTER_CHANGE',
-    payload: routeId
-  }
-}
-
 export function patternRouteFilterChange (namespace, routeData) {
   return function (dispatch, getState) {
     const newRouteId = (routeData && routeData.route_id) ? routeData.route_id : null
     const {date, from, to} = getState().gtfs.filter.dateTimeFilter
     dispatch(updateRouteFilter(newRouteId))
+    // If there's an active pattern, clear it
+    dispatch(updatePatternFilter(null))
     dispatch(fetchPatterns(namespace, newRouteId, date, from, to))
   }
 }

lib/gtfs/actions/stops.js

@@ -3,6 +3,7 @@ import {createAction} from 'redux-actions'
 
 import { compose, stopsFiltered } from '../../gtfs/util/graphql'
 import { fetchPatterns } from './patterns'
+import { updatePatternFilter, updateRouteFilter } from './filter'
 
 export const fetchingStops = createAction('FETCH_GRAPHQL_STOPS')
 export const clearStops = createAction('CLEAR_GRAPHQL_STOPS')
@@ -13,8 +14,8 @@ export function fetchStopsWithFilters (namespace) {
   return function (dispatch, getState) {
     const state = getState()
     const {date, from, to} = state.gtfs.filter.dateTimeFilter
-    const routeId = state.gtfs.stops.routeFilter
-    const patternId = state.gtfs.stops.patternFilter
+    const routeId = state.gtfs.filter.routeFilter
+    const patternId = state.gtfs.filter.patternFilter
     if (!routeId && !patternId) {
       return dispatch(receiveStops({namespace, routeId, patternId, data: {stops: []}}))
     }
@@ -45,20 +46,6 @@ export function fetchStops (namespace, routeId, patternId, date, from, to) {
   }
 }
 
-export function updateStopRouteFilter (routeId) {
-  return {
-    type: 'STOP_ROUTE_FILTER_CHANGE',
-    payload: routeId
-  }
-}
-
-export function updateStopPatternFilter (patternId) {
-  return {
-    type: 'STOP_PATTERN_FILTER_CHANGE',
-    payload: patternId
-  }
-}
-
 export function stopDateTimeFilterChange (feedId, props) {
   return function (dispatch, getState) {
     dispatch(fetchStopsWithFilters(feedId))
@@ -71,11 +58,11 @@ export function stopPatternFilterChange (feedId, patternData) {
     const {date, from, to} = state.gtfs.filter.dateTimeFilter
     const patternId = (patternData && patternData.pattern_id) ? patternData.pattern_id : null
     const routeId = (patternData && patternData.route_id) ? patternData.route_id : null
-    dispatch(updateStopPatternFilter(patternId))
+    dispatch(updatePatternFilter(patternId))
 
-    const routeFilter = state.gtfs.stops.routeFilter
+    const routeFilter = state.gtfs.filter.routeFilter
     if (!routeFilter && patternId) {
-      dispatch(updateStopRouteFilter(routeId))
+      dispatch(updateRouteFilter(routeId))
     }
     if (patternId) {
       dispatch(fetchStops(feedId, null, patternId, date, from, to))
@@ -88,8 +75,8 @@ export function stopPatternFilterChange (feedId, patternData) {
 export function stopRouteFilterChange (feedId, routeData) {
   return function (dispatch, getState) {
     const routeId = (routeData && routeData.route_id) ? routeData.route_id : null
-    dispatch(updateStopRouteFilter(routeId))
-    dispatch(updateStopPatternFilter(null))
+    dispatch(updateRouteFilter(routeId))
+    dispatch(updatePatternFilter(null))
     dispatch(fetchPatterns(feedId, routeId, null))
     dispatch(fetchStopsWithFilters(feedId))
   }

lib/gtfs/components/GtfsMap.js

@@ -1,6 +1,6 @@
 import React, { Component, PropTypes } from 'react'
 import { shallowEqual } from 'react-pure-render'
-import { Browser } from 'leaflet'
+import { Browser, latLngBounds } from 'leaflet'
 import { Map, Marker, TileLayer, GeoJSON, FeatureGroup, Rectangle } from 'react-leaflet'
 
 import { getFeedId } from '../../common/util/modules'
@@ -20,11 +20,15 @@ export default class GtfsMap extends Component {
     onStopClick: PropTypes.func,
     onZoomChange: PropTypes.func,
     pattern: PropTypes.object,
+    patternFilter: PropTypes.string,
     patterns: PropTypes.array,
     popupAction: PropTypes.string,
     position: PropTypes.array,
     routes: PropTypes.array,
     searchFocus: PropTypes.string,
+    showIsochrones: PropTypes.bool,
+    showPatterns: PropTypes.bool,
+    showStops: PropTypes.bool,
     stops: PropTypes.array,
     version: PropTypes.object,
     width: PropTypes.string // % or px
@@ -87,6 +91,23 @@ export default class GtfsMap extends Component {
     }
   }
 
+  /* Auto-zoom to newly-updated patterns or stops */
+  componentDidUpdate (prevProps) {
+    const { patterns, showPatterns, showStops, stops } = this.props
+    if (showPatterns && prevProps.patterns !== patterns && patterns && patterns.length > 0) {
+      let bounds = []
+      patterns.forEach(ptn => {
+        if (ptn.geometry && ptn.geometry.coordinates && ptn.geometry.coordinates.length > 0) {
+          bounds = bounds.concat(ptn.geometry.coordinates.map(c => [c[1], c[0]]))
+        }
+      })
+      this.props.updateMapState({ bounds })
+    } else if (showStops && prevProps.stops !== stops && stops && stops.length > 0) {
+      const bounds = latLngBounds(stops.map(stop => [stop.stop_lat, stop.stop_lon]))
+      this.props.updateMapState({ bounds })
+    }
+  }
+
   getBounds () {
     let bounds
     if (this.props.feeds) {
@@ -175,16 +196,20 @@ export default class GtfsMap extends Component {
       feeds,
       height,
       isochroneBand,
+      mapState,
       newEntityId,
       onRouteClick,
       onStopClick,
       pattern,
+      patternFilter,
       patterns,
       popupAction,
       renderTransferPerformance,
       routes,
       showBounds,
       showIsochrones,
+      showPatterns,
+      showStops,
       sidebarExpanded,
       stop,
       stops,
@@ -201,6 +226,11 @@ export default class GtfsMap extends Component {
       height: `${height}px` // only px
     }
 
+    // In view-stops mode, only show the current pattern
+    let displayedPatterns = (patterns && showStops && patternFilter)
+      ? patterns.filter(ptn => ptn.pattern_id === patternFilter)
+      : patterns
+
     const MAPBOX_MAP_ID = process.env.MAPBOX_MAP_ID
     const MAPBOX_ACCESS_TOKEN = process.env.MAPBOX_ACCESS_TOKEN
     const MAPBOX_ATTRIBUTION = process.env.MAPBOX_ATTRIBUTION
@@ -209,7 +239,8 @@ export default class GtfsMap extends Component {
         <Map
           ref='map'
           style={mapStyle}
-          bounds={this.getBounds()}
+          bounds={mapState.bounds}
+          zoom={mapState.zoom}
           scrollWheelZoom={!disableScroll}
           onClick={this.mapClicked}
           onMoveEnd={this.mapMoved}
@@ -226,11 +257,9 @@ export default class GtfsMap extends Component {
           }
 
           {/* Stops from map bounds search */}
-          {stops && stops.length && <FeatureGroup ref='stops'>
+          {showStops && stops && stops.length && <FeatureGroup ref='stops'>
             {stops.map((s, index) => {
-              // console.log(' - stop', s);
               if (!s) return null
-              // const key = `marker-${stopMarkerId++}`
               return (
                 <StopMarker
                   stop={s}
@@ -261,10 +290,10 @@ export default class GtfsMap extends Component {
             </FeatureGroup>
           )}
 
-          {/* Patterns from map bounds search */}
-          {patterns && patterns.length && (
+          {/* Group of Patterns from search */}
+          {showPatterns && displayedPatterns && displayedPatterns.length && (
             <FeatureGroup>
-              {patterns.map((pattern, index) => (
+              {displayedPatterns.map((pattern, index) => (
                 <PatternGeoJson
                   pattern={pattern}
                   key={pattern.pattern_id}
@@ -277,7 +306,7 @@ export default class GtfsMap extends Component {
             </FeatureGroup>
           )}
 
-          {/* Pattern from GtfsSearch */}
+          {/* Single Pattern from GtfsSearch */}
           {pattern &&
             <FeatureGroup>
               <PatternGeoJson

lib/gtfs/components/PatternGeoJson.js

@@ -47,22 +47,25 @@ export default class PatternGeoJson extends GeoJSON {
           <p><Icon type='bus' /> <strong>{routeName}</strong></p>
           <ul>
             <li><strong>ID:</strong> {routeId}</li>
-            <li><strong>Agency:</strong>{' '}
-              {// TODO: change this back to feedName
-                // route.feed_id
-                feed && feed.name
-              }
-            </li>
+            {feed && (
+              <li><strong>Agency:</strong>{' '}
+                { // TODO: change this back to feedName
+                  // route.feed_id
+                  feed && feed.name
+                }
+              </li>
+            )}
           </ul>
-          {onRouteClick
+          {/* TODO: Revisit this for Alerts module
+          onRouteClick
             ? <Button
               bsStyle='primary'
               block
               onClick={this._onClickAction}>
               <Icon type='bus' /> {popupAction} route
             </Button>
             : <p>[Must add stops first]</p>
-          }
+          */}
         </div>
       </Popup>
     )

lib/gtfs/containers/ActiveGtfsMap.js

@@ -8,6 +8,8 @@ import { fetchFeedVersionIsochrones } from '../../manager/actions/versions'
 const mapStateToProps = (state, ownProps) => {
   return {
     dateTime: state.gtfs.filter.dateTimeFilter,
+    mapState: state.gtfs.filter.map,
+    patternFilter: state.gtfs.filter.patternFilter,
     patterns: state.gtfs.patterns.data,
     routes: state.gtfs.routes.data,
     routing: state.routing.locationBeforeTransitions && state.routing.locationBeforeTransitions.pathname,

lib/gtfs/reducers/filter.js

@@ -7,17 +7,20 @@ const defaultState = {
   loadedFeeds: [],
   typeFilter: ['stops', 'routes'],
   map: {
-    bounds: [],
-    zoom: null
+    bounds: [[70, 130], [-70, -130]],
+    zoom: 10
   },
   permissionFilter: 'view-feed',
   version: null,
   dateTimeFilter: {
     date: moment().format('YYYY-MM-DD'),
     from: 60 * 60 * 6, // 6 AM
     to: 60 * 60 * 9 // 9 AM
-  }
+  },
+  routeFilter: null,
+  patternFilter: null
 }
+
 const setAllFeeds = (feeds, value) => {
   const activeFeeds = Object.assign({}, feeds)
   for (const feedId in activeFeeds) {
@@ -27,6 +30,7 @@ const setAllFeeds = (feeds, value) => {
   }
   return activeFeeds
 }
+
 const gtfsFilter = (state = defaultState, action) => {
   switch (action.type) {
     case 'SET_ACTIVE_PROJECT':
@@ -63,6 +67,10 @@ const gtfsFilter = (state = defaultState, action) => {
       return update(state, {activeFeeds: {$set: setAllFeeds(state.activeFeeds, true)}})
     case 'REMOVE_ALL_ACTIVE_FEEDS':
       return update(state, {activeFeeds: {$set: setAllFeeds(state.activeFeeds, false)}})
+    case 'ROUTE_FILTER_CHANGE':
+      return update(state, {routeFilter: { $set: action.payload }})
+    case 'PATTERN_FILTER_CHANGE':
+      return update(state, {patternFilter: { $set: action.payload }})
     default:
       return state
   }

lib/gtfs/reducers/patterns.js

@@ -3,7 +3,6 @@ import update from 'react-addons-update'
 import {getRouteName, mapPatternShape} from '../../editor/util/gtfs'
 
 const defaultState = {
-  routeFilter: null,
   fetchStatus: {
     fetched: false,
     fetching: false,
@@ -79,8 +78,6 @@ export default function reducer (state = defaultState, action) {
           data: {$set: allPatterns}
         }
       )
-    case 'PATTERN_ROUTE_FILTER_CHANGE':
-      return update(state, {routeFilter: { $set: action.payload }})
     default:
       return state
   }

lib/gtfs/reducers/stops.js

@@ -1,8 +1,6 @@
 import update from 'react-addons-update'
 
 const defaultState = {
-  routeFilter: null,
-  patternFilter: null,
   fetchStatus: {
     fetched: false,
     fetching: false,
@@ -100,10 +98,6 @@ export default function reducer (state = defaultState, action) {
           data: {$set: stops}
         }
       )
-    case 'STOP_ROUTE_FILTER_CHANGE':
-      return update(state, {routeFilter: { $set: action.payload }})
-    case 'STOP_PATTERN_FILTER_CHANGE':
-      return update(state, {patternFilter: { $set: action.payload }})
     default:
       return state
   }