Merge pull request #88 from conveyal/dev

v0.3.0

Author: trevorgerhardt

README.md

@@ -5,6 +5,18 @@
 
 ![Taui screenshot](screenshot.png?raw=true "Taui screenshot")
 
+## Setup
+
+Clone the repository. 
+
+If you want to change the UI language, copy `configurations/messages/messages-XY.yml` to `configurations/default/messages.yml`.
+
+Edit `configurations/default/settings.yml`, changing `s3bucket` to the bucket where TAUI will be deployed (not necessarily the same as the bucket containing analysis results or destination grids). In this same file, set/delete the Cloudfront distribution ID (?).
+
+Edit `configurations/default/store.yml`, changing gridsUrl to the Cloudfront URL for the destination count grids. For sub-buckets within Conveyal's analyst-static bucket, this is `https://dz69bcpxxuhn6.cloudfront.net/sub-bucket/sub-sub-bucket`. In this same file, specify the file names of the destination grid(s) within the S3 bucket by editing the `grids:` section. Specify two URLs for the analysis results by editing the `origins:` section (one for each scenario). Again, use the Cloudfront URL to speed up access. Set the geocoder focus point, country filter, and bounding box. Set the map center coordinates and default origin map marker.
+
+Edit `src/reducers/destinations.js` to change the mapping between labels and S3 object names for the destination grids.
+
 ## Build
 
 After cloning the repository, run:

configurations/default/messages.yml

@@ -3,7 +3,7 @@ Systems:
   ComparisonTitle: Current Transit
   TripsTitle: Example trips
   TripsEmpty: No trips found!
-  BestTripTitle: Best trip
+  BestTripTitle: Fastest trip
   AlternateTripsTitle: Alternates
 Faster: faster
 NewTrip: New Trip

configurations/default/store.yml

@@ -7,8 +7,8 @@ browsochrones:
     - Jobs_total
     - Workers_total
   origins:
-    - https://dz69bcpxxuhn6.cloudfront.net/indyconnect-marion-v5/
-    - https://dz69bcpxxuhn6.cloudfront.net/indy-baseline-v5/
+    - https://dz69bcpxxuhn6.cloudfront.net/indyconnect-marion-v6
+    - https://dz69bcpxxuhn6.cloudfront.net/indy-baseline-v6
 geocoder:
   focusLatlng:
     lat: 39.7691

package.json

@@ -23,11 +23,12 @@
   },
   "homepage": "https://github.com/conveyal/taui",
   "devDependencies": {
-    "mastarm": "^1.3.0",
+    "mastarm": "^2.0.0",
     "semantic-release": "^4.3.5"
   },
   "dependencies": {
-    "browsochrones": "^0.8.0",
+    "@conveyal/woonerf": "^0.2.1",
+    "browsochrones": "^0.9.0",
     "color": "^0.11.1",
     "debug": "^2.2.0",
     "font-awesome": "^4.6.3",
@@ -53,7 +54,7 @@
     "react-select-geocoder": "^0.2.1",
     "redux": "^3.6.0",
     "redux-actions": "^0.12.0",
-    "transitive-js": "0.8.4"
+    "transitive-js": "0.9.0"
   },
   "standard": {
     "parser": "babel-eslint"

src/actions/index.js

@@ -5,7 +5,7 @@ import {createAction} from 'redux-actions'
 import fetch, {
   incrementFetches as incrementWork,
   decrementFetches as decrementWork
-} from 'mastarm/react/fetch'
+} from '@conveyal/woonerf/build/lib/fetch'
 
 import featureToLabel from '../utils/feature-to-label'
 import {setKeyTo} from '../utils/hash'
@@ -79,6 +79,14 @@ export function updateOrigin ({browsochrones, destinationLatlng, latlng, label,
     clearIsochrone()
   ]
 
+  // TODO: Remove this!
+  if (label && label.toLowerCase().indexOf('airport') !== -1) {
+    latlng = {
+      lat: 39.7146,
+      lng: -86.2983
+    }
+  }
+
   if (label) {
     actions.push(
       addActionLogItem(`Set start address to: ${label}`),
@@ -150,7 +158,13 @@ function fetchBrowsochronesFor ({
           decrementWork(),
           generateAccessiblityFor({browsochrones, name, timeCutoff}),
           generateIsochroneFor({browsochrones, latlng, name, timeCutoff}),
-          destinationLatlng && generateDestinationDataFor({browsochrones, latlng: destinationLatlng, name, zoom})
+          destinationLatlng && generateDestinationDataFor({
+            browsochrones,
+            fromLatlng: latlng,
+            toLatlng: destinationLatlng,
+            name,
+            zoom
+          })
         ]
       }
     })
@@ -190,14 +204,17 @@ function generateIsochroneFor ({browsochrones, latlng, name, timeCutoff}) {
   ]
 }
 
-function generateDestinationDataFor ({browsochrones, latlng, name, zoom}) {
+function generateDestinationDataFor ({browsochrones, fromLatlng, toLatlng, name, zoom}) {
   return [
     incrementWork(),
     addActionLogItem(`Generating transit data for ${name}`),
     (async () => {
-      const destinationPoint = browsochrones.pixelToOriginPoint(Leaflet.CRS.EPSG3857.latLngToPoint(latlng, zoom), zoom)
-      const data = await browsochrones.generateDestinationData(destinationPoint, zoom)
-      data.transitive.key = `${name}-${lonlng.toString(latlng)}`
+      const destinationPoint = browsochrones.pixelToOriginPoint(Leaflet.CRS.EPSG3857.latLngToPoint(toLatlng, zoom), zoom)
+      const data = await browsochrones.generateDestinationData({
+        from: fromLatlng || null,
+        to: destinationPoint
+      })
+      data.transitive.key = `${name}-${lonlng.toString(toLatlng)}`
       return [
         setDestinationDataFor({data, name}),
         decrementWork()
@@ -228,9 +245,23 @@ export function updateSelectedTimeCutoff ({browsochrones, latlng, timeCutoff}) {
  *  - If Browsochones is loaded, transitive data is generated
  *  - If Browsochones has a surface generated, travel time is calculated
  */
-export function updateDestination ({browsochrones, latlng, label, zoom}) {
+export function updateDestination ({
+  browsochrones,
+  fromLatlng,
+  latlng,
+  label,
+  zoom
+}) {
   const actions = []
 
+  // TODO: Remove this!
+  if (label && label.toLowerCase().indexOf('airport') !== -1) {
+    latlng = {
+      lat: 39.7146,
+      lng: -86.2983
+    }
+  }
+
   if (label) {
     actions.push(setDestination({label, latlng}))
   } else {
@@ -241,8 +272,8 @@ export function updateDestination ({browsochrones, latlng, label, zoom}) {
   }
 
   if (browsochrones.base && browsochrones.base.isLoaded()) {
-    actions.push(generateDestinationDataFor({browsochrones: browsochrones.base, latlng, name: 'base', zoom}))
-    actions.push(generateDestinationDataFor({browsochrones: browsochrones.comparison, latlng, name: 'comparison', zoom}))
+    actions.push(generateDestinationDataFor({browsochrones: browsochrones.base, fromLatlng, toLatlng: latlng, name: 'base', zoom}))
+    actions.push(generateDestinationDataFor({browsochrones: browsochrones.comparison, fromLatlng, toLatlng: latlng, name: 'comparison', zoom}))
   }
 
   return actions

src/components/route-card.js

@@ -61,11 +61,15 @@ function TripDiff ({
   oldTravelTime,
   travelTime
 }) {
-  const difference = oldTravelTime - travelTime
+  const actualDiff = travelTime - oldTravelTime
+  const nume = actualDiff > 0
+    ? travelTime - oldTravelTime
+    : oldTravelTime - travelTime
+  const diff = parseInt((nume / oldTravelTime * 100).toFixed(1))
 
   if (oldTravelTime === 255) return <span className='increase'>{messages.NewTrip} <Icon type='star' /></span>
-  else if (difference > 0) return <span className='increase'><strong>{difference}</strong> {messages.Units.Mins} {messages.Faster}</span>
-  else if (difference < 0) return <span className='decrease'><strong>{difference * -1}</strong> {messages.Units.Mins} {messages.Slower}</span>
+  else if (actualDiff > 0) return <span className='pull-right decrease'><strong>{diff}</strong>%<Icon type='level-up' /></span>
+  else return <span className='pull-right increase'><strong>{diff * -1}</strong>%<Icon className='fa-rotate-180' type='level-up' /></span>
 }
 
 function renderJourneys ({ oldTravelTime, transitiveData, travelTime, waitTime }) {
@@ -107,16 +111,15 @@ function renderJourneys ({ oldTravelTime, transitiveData, travelTime, waitTime }
   return (
     <div>
       <div className='heading'>{messages.Systems.BestTripTitle}</div>
-      <div className='Metric'>
-        {bestTripSegments}
-        <strong> {travelTime}</strong> {messages.Units.Mins} / <strong>{waitTime}</strong> {messages.Units.Mins} wait
-        {oldTravelTime && <span className='pull-right'>
+      <div className='BestTrip'>
+        <div>{bestTripSegments} <strong> {travelTime}</strong> {messages.Units.Mins}</div>
+        <div>{oldTravelTime &&
           <TripDiff
             oldTravelTime={oldTravelTime}
             travelTime={travelTime}
-            />
-        </span>}
-        <br />
+            />}<br />
+          includes <strong>{waitTime}</strong> {messages.Units.Mins} waiting <br />
+        </div>
       </div>
       {alternateTrips.length > 0 &&
         <div>

src/containers/indianapolis/index.js

@@ -31,6 +31,7 @@ class Indianapolis extends Component {
     clearStart: PropTypes.func.isRequired,
     destinations: PropTypes.object,
     geocoder: PropTypes.object,
+    history: PropTypes.any,
     initializeBrowsochrones: PropTypes.func.isRequired,
     mapMarkers: PropTypes.object,
     map: PropTypes.object,
@@ -104,9 +105,10 @@ class Indianapolis extends Component {
     label,
     latlng
   }) => {
-    const {browsochrones, map, moveDestination} = this.props
+    const {browsochrones, map, mapMarkers, moveDestination} = this.props
     moveDestination({
       browsochrones,
+      fromLatlng: mapMarkers.origin.latlng,
       label,
       latlng: lonlng(latlng),
       zoom: map.zoom

src/containers/indianapolis/style.css

@@ -189,6 +189,18 @@ body {
   height: 1.5rem;
 }
 
+.Card .BestTrip {
+  display: flex;
+}
+
+.Card .BestTrip > div {
+  flex-grow: 1;
+}
+
+.Card .BestTrip > div:last-of-type {
+  text-align: right;
+}
+
 .Card .Metric > .pull-right {
   margin-top: 0.25rem;
 }

src/index.js

@@ -1,4 +1,4 @@
-import mount from 'mastarm/react/mount'
+import mount from '@conveyal/woonerf/build/lib/mount'
 
 import Indianapolis from './containers/indianapolis'
 import reducers from './reducers'

src/reducers/ui.js

@@ -1,5 +1,5 @@
+import {DECREMENT_FETCH, INCREMENT_FETCH} from '@conveyal/woonerf/build/lib/fetch'
 import {handleActions} from 'redux-actions'
-import {DECREMENT_FETCH, INCREMENT_FETCH} from 'mastarm/react/fetch'
 
 export default handleActions({
   [`${INCREMENT_FETCH}`]: (state, payload) => {