Merge pull request #543 from ibi-group/fix-show-all-routes

Fix show all routes; add limit for perf

Author: landonreed

i18n/english.yml

@@ -651,6 +651,10 @@ components:
         title: Deployment Server Management
     save: Save
     title: Settings
+  ShowAllRoutesOnMapFilter:
+    fetching: Fetching
+    showAllRoutesOnMap: Show all routes
+    tooManyShapeRecords: Too many shapes to display
   Sidebar:
     unknown: Unknown
   SnapshotItem:

lib/gtfs/actions/shapes.js

@@ -2,8 +2,8 @@
 
 import {createAction, type ActionType} from 'redux-actions'
 
-import {createVoidPayloadAction, secureFetch} from '../../common/actions'
-import {compose, shapes} from '../../gtfs/util/graphql'
+import {createVoidPayloadAction, fetchGraphQL} from '../../common/actions'
+import {shapes} from '../../gtfs/util/graphql'
 import {updateRoutesOnMapDisplay} from './filter'
 
 import type {dispatchFn, getStateFn} from '../../types/reducers'
@@ -32,10 +32,9 @@ export function toggleShowAllRoutesOnMap (namespace: string) {
       !state.gtfs.shapes.fetchStatus.fetching
     ) {
       dispatch(fetchingShapes())
-      return dispatch(secureFetch(compose(shapes, {namespace})))
-        .then(response => response.json())
-        .then(json => {
-          const {patterns} = json.data.feed
+      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,

lib/gtfs/components/ShowAllRoutesOnMapFilter.js

@@ -1,30 +1,52 @@
 // @flow
 
+import Icon from '@conveyal/woonerf/components/icon'
 import React, {Component} from 'react'
 import {Checkbox} from 'react-bootstrap'
 
 import * as shapesActions from '../actions/shapes'
+import {getComponentMessages} from '../../common/util/config'
 
+import type {FetchStatus} from '../../types'
 import type {Props as ContainerProps} from '../containers/ShowAllRoutesOnMapFilter'
 
 type Props = ContainerProps & {
+  fetchStatus: FetchStatus,
   showAllRoutesOnMap: boolean,
   toggleShowAllRoutesOnMap: typeof shapesActions.toggleShowAllRoutesOnMap
 }
 
 export default class ShowAllRoutesOnMapFilter extends Component<Props> {
+  messages = getComponentMessages('ShowAllRoutesOnMapFilter')
+
+  onChange = () => {
+    const {toggleShowAllRoutesOnMap, version} = this.props
+    toggleShowAllRoutesOnMap(version.namespace)
+  }
+
   render () {
     const {
+      fetchStatus,
       showAllRoutesOnMap,
-      toggleShowAllRoutesOnMap
+      version
     } = this.props
-
+    // Disable if greater than one million records. We don't want to break
+    // Data Tools because of this shapes GraphQL fetch. This is a somewhat
+    // arbitrary limit. It may need to be adjusted...
+    const tooManyShapeRecords = version.feedLoadResult.shapes.rowCount > 1000000
     return (
       <Checkbox
         checked={showAllRoutesOnMap}
-        onChange={toggleShowAllRoutesOnMap}
+        disabled={tooManyShapeRecords || fetchStatus.fetching}
+        onChange={this.onChange}
       >
-        Show all routes
+        {fetchStatus.fetching
+          ? <span className='text-muted'>
+            {this.messages('fetching')} <Icon className='fa-spin' type='refresh' />
+          </span>
+          : tooManyShapeRecords
+            ? this.messages('tooManyShapeRecords')
+            : this.messages('showAllRoutesOnMap')}
       </Checkbox>
     )
   }

lib/gtfs/containers/ShowAllRoutesOnMapFilter.js

@@ -5,12 +5,14 @@ import {connect} from 'react-redux'
 import {toggleShowAllRoutesOnMap} from '../actions/shapes'
 import ShowAllRoutesOnMapFilter from '../components/ShowAllRoutesOnMapFilter'
 
+import type {FeedVersion} from '../../types'
 import type {AppState} from '../../types/reducers'
 
-export type Props = {}
+export type Props = {version: FeedVersion}
 
 const mapStateToProps = (state: AppState, ownProps: Props) => {
   return {
+    fetchStatus: state.gtfs.shapes.fetchStatus,
     showAllRoutesOnMap: state.gtfs.filter.showAllRoutesOnMap
   }
 }

lib/gtfs/util/graphql.js

@@ -1,18 +1,5 @@
 // @flow
 
-import {GTFS_GRAPHQL_PREFIX} from '../../common/constants'
-
-/**
- * Construct GET GraphQL request URL. NOTE: variable names/keys must match those
- * specified in GraphQL schema.
- *
- * @deprecated Request can become too large and generate a 413 'request entity
- *   too large' server error. Use lib/common/actions#fetchGraphQL instead.
- */
-export function compose (query: string, variables: Object) {
-  return `${GTFS_GRAPHQL_PREFIX}?query=${encodeURIComponent(query)}&variables=${encodeURIComponent(JSON.stringify(variables))}`
-}
-
 export const feed = `
 query feedQuery($namespace: String) {
   feeds (namespace: $namespace) {
@@ -207,9 +194,7 @@ query timetablesQuery(
 }`
 
 export const shapes = `
-query shapesQuery(
-  $namespace: String
-) {
+query shapesQuery($namespace: String) {
   feed (namespace: $namespace) {
     patterns(limit: -1) {
       shape(limit: -1) {

lib/manager/components/version/FeedVersionMap.js

@@ -67,7 +67,7 @@ export default class FeedVersionMap extends Component<Props, State> {
             position: 'absolute',
             zIndex: 20000
           }}>
-          <ShowAllRoutesOnMapFilter />
+          <ShowAllRoutesOnMapFilter version={version} />
         </div>
         {/* Primary map component */}
         <ActiveGtfsMap