Merge pull request #120 from conveyal/dev

Merge release

.gitignore

@@ -7,3 +7,4 @@ configurations/*
 !configurations/messages
 tmp
 config.json
+yarn-error.log

package.json

@@ -4,12 +4,12 @@
   "main": "src/index.js",
   "scripts": {
     "build": "mastarm build",
-    "deploy": "mastarm deploy --env production --minify",
+    "deploy": "mastarm deploy",
     "predeploy": "yarn",
     "prestart": "yarn",
     "pretest": "yarn",
     "semantic-release": "semantic-release",
-    "start": "mastarm build --serve --env development",
+    "start": "mastarm build --serve",
     "test": "mastarm lint src"
   },
   "repository": {
@@ -29,7 +29,7 @@
   "dependencies": {
     "@conveyal/gridualizer": "^2.1.0",
     "@conveyal/lonlat": "^1.3.0",
-    "@conveyal/woonerf": "^3.0.1",
+    "@conveyal/woonerf": "^4.0.0",
     "@mapbox/polyline": "^1.0.0",
     "d3-scale": "^2.1.0",
     "date-fns": "^1.29.0",
@@ -38,10 +38,9 @@
     "jsolines": "^1.0.2",
     "leaflet": "^1.3.4",
     "lodash": "^4.17.10",
-    "mastarm": "^4.2.1",
-    "prop-types": "^15.6.2",
-    "react": "^16.4.2",
-    "react-dom": "^16.4.2",
+    "mastarm": "^4.3.1",
+    "react": "^16.5.1",
+    "react-dom": "^16.5.1",
     "react-leaflet": "^1.9.1",
     "react-redux": "^5.0.7",
     "react-select": "^1.2.1",

src/actions/geocode.js

@@ -27,8 +27,11 @@ export function geocode (text: string, nextAction: any) {
     dispatch(fetch({
       next: (response) => {
         try {
-          const features = JSON.parse(response.value).features
-          return nextAction(features)
+          if (typeof response.value === 'string') {
+            return nextAction(JSON.parse(response.value).features)
+          } else {
+            return nextAction(response.value.features)
+          }
         } catch (e) {
           console.error('Error parsing geocoder response.')
           console.error(e)

src/actions/network.js

@@ -110,8 +110,8 @@ export function loadDatasetFromJSON (jsonConfig: any) {
 }
 
 export const loadDataset = (
-  networks: {name: string, url: string, showOnMap: boolean},
-  grids: {name: string, url: string, icon: string, showOnMap: boolean},
+  networks: {name: string, showOnMap: boolean, url: string},
+  grids: {icon: string, name: string, showOnMap: boolean, url: string},
   pointsOfInterestUrl?: string,
   startCoordinate?: LonLat
 ) => (dispatch: Dispatch, getState: any) => {
@@ -235,7 +235,9 @@ const fetchTimesAndPathsForNetworkAtIndex = (network, originPoint, index) =>
       const travelTimeSurface = parseTimesData(timesResponse.value)
       const {paths, pathsPerTarget, targets} = parsePathsData(pathsResponse.value)
 
-      warnForInvalidPaths(paths, network.transitive)
+      if (process.env.NODE_ENV === 'development') {
+        warnForInvalidPaths(paths, network.transitive)
+      }
 
       return [
         logItem(`Found times and paths for ${index}...`),

src/components/application.js

@@ -31,8 +31,8 @@ import RouteCard from './route-card'
 import RouteSegments from './route-segments'
 
 type Network = {
-  name: string,
-  active: boolean
+  active: boolean,
+  name: string
 }
 
 type MapState = {
@@ -48,25 +48,25 @@ type Props = {
     grids: string[],
     networks: Network[]
   },
-  drawActiveOpportunityDataset: Function,
   drawIsochrones: Function[],
+  drawOpportunityDatasets: any[],
+  geocode: (string, Function) => void,
   geocoder: GeocoderStore,
+  initialize: Function => void,
   isLoading: boolean,
   isochrones: any[],
   map: MapState,
   pointsOfInterest: PointsOfInterest,
+  reverseGeocode: (string, Function) => void,
+  setEnd: any => void,
+  setSelectedTimeCutoff: any => void,
+
+  setStart: any => void,
   showComparison: boolean,
   timeCutoff: any,
   travelTimes: number[],
   ui: UIStore,
   uniqueRoutes: any[],
-
-  geocode: (string, Function) => void,
-  reverseGeocode: (string, Function) => void,
-  initialize: Function => void,
-  setEnd: any => void,
-  setSelectedTimeCutoff: any => void,
-  setStart: any => void,
   updateEnd: any => void,
   updateEndPosition: LonLat => void,
   updateMap: any => void,
@@ -234,7 +234,7 @@ export default class Application extends Component<Props, State> {
     return (
       <div>
         <div className='Fullscreen'>
-          <svg>
+          <svg width='0' height='0' style={{position: 'absolute'}}>
             <defs>
               <filter id='shadow'>
                 <feDropShadow dx='1' dy='1' stdDeviation='1' />
@@ -253,8 +253,8 @@ export default class Application extends Component<Props, State> {
             updateMap={p.updateMap}
             zoom={p.map.zoom}
           >
-            {p.drawActiveOpportunityDataset &&
-              <Gridualizer drawTile={p.drawActiveOpportunityDataset} zoom={p.map.zoom} />}
+            {p.drawOpportunityDatasets.map((drawTile, i) => drawTile &&
+              <Gridualizer drawTile={drawTile} key={`draw-od-${i}`} zoom={p.map.zoom} />)}
 
             {!p.isLoading && p.isochrones.map((iso, i) => !iso
               ? null

src/components/geocoder.js

@@ -18,21 +18,19 @@ type ReactSelectOption = {
 }
 
 type Props = {
-  placeholder: string,
-  pointsOfInterest: PointsOfInterest,
-  value: null | Location,
-
   geocode: (string, Function) => void,
   onChange: any => void,
-  reverseGeocode: (string, Function) => void
+  placeholder: string,
+
+  pointsOfInterest: PointsOfInterest,
+  reverseGeocode: (string, Function) => void,
+  value: null | Location
 }
 
 /**
  *
  */
-export default class Geocoder extends Component {
-  props: Props
-
+export default class Geocoder extends Component<Props> {
   autocompleteCache = {}
   options = {}
 

src/components/map.js

@@ -68,9 +68,9 @@ type Props = {
 }
 
 type State = {
-  showSelectStartOrEnd: boolean,
   lastClickedLabel: null | string,
-  lastClickedPosition: null | Coordinate
+  lastClickedPosition: null | Coordinate,
+  showSelectStartOrEnd: boolean
 }
 
 const poiToFeatures = memoize(poi => poi.map(p => p.feature))
@@ -167,6 +167,13 @@ export default class Map extends PureComponent<Props, State> {
       start,
       zoom
     } = this.props
+
+    // Index elements with keys to reset them when elements are added / removed
+    const poiKey = pointsOfInterest.length > 0 ? 1 : 0
+    const startKey = `${poiKey + 1}-start-key`
+    const endKey = `${startKey + 1}-end-key`
+    const selectKey = `${endKey + 1}-select-key`
+
     const {
       lastClickedLabel,
       lastClickedPosition,
@@ -201,13 +208,15 @@ export default class Map extends PureComponent<Props, State> {
           pointsOfInterest.length > 0 &&
           <GeoJSON
             data={poiToFeatures(pointsOfInterest)}
+            key={poiKey}
             onClick={this._clickPoi}
           />}
 
         {start &&
           <Marker
             draggable
             icon={startIcon}
+            key={startKey}
             onDragEnd={this._setStartWithEvent}
             position={start.position}
           >
@@ -220,6 +229,7 @@ export default class Map extends PureComponent<Props, State> {
           <Marker
             draggable
             icon={endIcon}
+            key={endKey}
             onDragEnd={this._setEndWithEvent}
             position={end.position}
           >
@@ -229,7 +239,11 @@ export default class Map extends PureComponent<Props, State> {
           </Marker>}
 
         {showSelectStartOrEnd &&
-          <Popup closeButton={false} position={lastClickedPosition}>
+          <Popup
+            closeButton={false}
+            key={selectKey}
+            position={lastClickedPosition}
+          >
             <div className='Popup'>
               {lastClickedLabel &&
                 <h3>

src/index.css

@@ -17,6 +17,10 @@
   --shadow: #333;
 }
 
+::-webkit-scrollbar {
+  width: 0;
+}
+
 html, body {
   font-size: 15px;
   font-family: -apple-system,
@@ -56,20 +60,20 @@ html, body {
 }
 
 .Taui-Dock-content .heading {
-  color: rgba(255, 255, 255);
+  color: rgba(255, 255, 255, 1);
   text-shadow: 0 0 1px var(--shadow);
   margin: 1rem 0 0.5rem;
   font-weight: var(--bold);
 }
 
 .Taui-Dock-content .heading a {
-  color: rgba(255, 255, 255);
+  color: rgba(255, 255, 255, 1);
   text-shadow: 0 0 1px var(--shadow);
   cursor: pointer;
 }
 
 .Taui-Dock-content .title {
-  color: rgba(255, 255, 255);
+  color: rgba(255, 255, 255, 1);
   text-shadow: 0 0 1px var(--shadow);
   font-size: 1.5rem;
   margin: 1rem 0;
@@ -138,7 +142,7 @@ html, body {
 
 .TimeCutoff .Time {
   font-weight: var(--bold);
-  color: rgba(255, 255, 255);
+  color: rgba(255, 255, 255, 1);
   text-shadow: 0 0 1px var(--shadow);
 }
 
@@ -171,7 +175,7 @@ html, body {
 }
 
 .CardTitle {
-  color: rgba(255, 255, 255);
+  color: rgba(255, 255, 255, 1);
   text-shadow: 0 0 1px var(--shadow);
   background-color: var(--blue);
   padding: 1rem 0.5rem 1rem 1rem;

src/index.js

@@ -1,11 +1,11 @@
 // @flow
 import message from '@conveyal/woonerf/message'
+import mount from '@conveyal/woonerf/mount'
 import React from 'react'
 import {connect} from 'react-redux'
 
 import actions from './actions'
 import Application from './components/application'
-import mount from './mount'
 import reducers from './reducers'
 import * as select from './selectors'
 
@@ -19,7 +19,7 @@ function mapStateToProps (state, ownProps) {
     activeNetworkIndex: select.activeNetworkIndex(state, ownProps),
     activeTransitive: select.activeTransitive(state, ownProps),
     allTransitiveData: select.allTransitiveData(state, ownProps),
-    drawActiveOpportunityDataset: select.drawActiveOpportunityDataset(state, ownProps),
+    drawOpportunityDatasets: select.drawOpportunityDatasets(state, ownProps),
     drawIsochrones: select.drawIsochrones(state, ownProps),
     isochrones: select.isochrones(state, ownProps),
     isLoading: select.loading(state, ownProps),

src/selectors/draw-active-opportunity-dataset.js → src/selectors/draw-opportunity-datasets.js

@@ -2,14 +2,13 @@
 import gridualizer from '@conveyal/gridualizer'
 import {createSelector} from 'reselect'
 
-import selectActiveOpportunityDataset from './active-opportunity-dataset'
-
 export default createSelector(
-  selectActiveOpportunityDataset,
-  (grid) => grid && grid.showOnMap &&
+  (state) => state.data.grids,
+  (grids = []) => grids.map(grid => grid.showOnMap &&
     gridualizer.createDrawTile({
       colorizer: gridualizer.colorizers.dot(),
       grid,
       interpolator: gridualizer.interpolators.bicubic
     })
+  )
 )

src/selectors/index.js

@@ -3,7 +3,7 @@ export {default as accessibility} from './accessibility'
 export {default as activeNetworkIndex} from './active-network-index'
 export {default as activeTransitive} from './active-transitive'
 export {default as allTransitiveData} from './all-transitive-data'
-export {default as drawActiveOpportunityDataset} from './draw-active-opportunity-dataset'
+export {default as drawOpportunityDatasets} from './draw-opportunity-datasets'
 export {default as drawIsochrones} from './draw-isochrones'
 export {default as isochrones} from './isochrones'
 export {default as loading} from './loading'

src/selectors/points-of-interest.js

@@ -5,18 +5,23 @@ export default createSelector(
   state => state.data.pointsOfInterest,
   featureCollection =>
     (featureCollection
-      ? featureCollection.features.map(feature => ({
-        label: feature.properties.name,
-        value: `poi-${feature.properties.name}-${feature.geometry.coordinates.join(',')}`,
-        feature: {
-          ...feature,
-          properties: {
-            ...feature.properties,
-            label: feature.properties.name,
-            'marker-color': '#0b2b40',
-            'marker-size': 'small'
+      ? featureCollection.features.map(feature => {
+        const p = feature.properties
+        const label = p.label || p.name || p.Name
+        return {
+          label,
+          value: `poi-${label}-${feature.geometry.coordinates.join(',')}`,
+          feature: {
+            ...feature,
+            properties: {
+              ...p,
+              label,
+              'marker-color': '#0b2b40',
+              'marker-size': 'small'
+            }
           }
         }
-      }))
-      : [])
+      })
+      : []
+    )
 )