refactor(transitive): Fix transitive remove layer bugs

configurations/default/messages.yml

@@ -1,5 +1,6 @@
 Systems:
   CalculatingAccessibility: Calculating accessibility...
+  NoGrids: No opportunity data has been loaded...
   SelectStart: Select a location to see accessibility
   SelectEnd: Select an endpoint to see possible trips
   Show: show

src/components/application.js

@@ -249,8 +249,7 @@ export default class Application extends Component<Props, State> {
                 {comparisonIsochrone &&
                   <GeoJSON data={comparisonIsochrone} key={comparisonIsochrone.key} style={COMP_ISOCHRONE_STYLE} />}
 
-                {activeTransitive && activeTransitive.journeys && activeTransitive.journeys.length > 0 &&
-                  <TransitiveLayer data={activeTransitive} />}
+                <TransitiveLayer data={activeTransitive} />
               </div>}
           </Map>
         </div>
@@ -300,27 +299,28 @@ export default class Application extends Component<Props, State> {
               </div>
               <Log items={actionLog} />
             </div>}
-          {ui.showLink &&
-            <div className='Card'>
-              <div className='CardContent Attribution'>
-                site made by
-                {' '}
-                <a href='https://www.conveyal.com' target='_blank'>
-                  conveyal
-                </a>
-              </div>
-            </div>}
           {ui.allowChangeConfig &&
             <div className='Card'>
               <a
                 className='CardTitle'
                 tabIndex={0}
                 onClick={this._updateConfig}
               >
-                config <span className='pull-right'>save changes</span>
+                Configure <span className='pull-right'>save changes</span>
               </a>
+              <div className='CardContent'>
+                <br /><a href='https://github.com/conveyal/taui/blob/aa9e6285002d59b4b6ae38890229569311cc4b6d/config.json.tmp' target='_blank'>See example config</a>
+              </div>
               <textarea ref={this._saveRefToConfig} defaultValue={window.localStorage.getItem('taui-config')} />
             </div>}
+          {ui.showLink &&
+            <div className='Attribution'>
+              site made by
+              {' '}
+              <a href='https://www.conveyal.com' target='_blank'>
+                conveyal
+              </a>
+            </div>}
         </Dock>
       </div>
     )

src/components/route-access.js

@@ -8,6 +8,7 @@ export default function RouteAccess (props) {
     <div className='heading'>
       {message('Systems.AccessTitle')}
     </div>
+    {props.grids.length === 0 && <span>{message('Systems.NoGrids')}</span>}
     {props.hasStart
       ? props.showComparison
         ? <ShowDiff

src/components/transitive-map-layer/index.js

@@ -1,19 +1,21 @@
 // @flow
 import {MapLayer} from 'react-leaflet'
 import Transitive from 'transitive-js'
-import LeafletTransitiveLayer from 'leaflet-transitivelayer'
 
+import LeafletTransitiveLayer from './leaflet-transitivelayer'
 import styles from './style'
 
 type Props = {
   data: any
 }
 
 const TRANSITIVE_SETTINGS = {
+  autoResize: false,
   gridCellSize: 200,
   useDynamicRendering: true,
   styles,
   // see https://github.com/conveyal/transitive.js/wiki/Zoom-Factors
+  zoomEnabled: false,
   zoomFactors: [
     {
       minScale: 0,
@@ -37,6 +39,10 @@ export default class TransitiveMapLayer extends MapLayer<LeafletTransitiveLayer,
     return this.props.data !== newProps.data
   }
 
+  componentDidCatch (error) {
+    console.error(error)
+  }
+
   createLeafletElement (props: Props) {
     return new LeafletTransitiveLayer(new Transitive({
       ...TRANSITIVE_SETTINGS,
@@ -45,16 +51,13 @@ export default class TransitiveMapLayer extends MapLayer<LeafletTransitiveLayer,
   }
 
   updateLeafletElement (prevProps: Props, currentProps: Props) {
-    this.leafletElement._transitive.updateData(currentProps.data)
-    this.leafletElement._refresh()
+    if (currentProps.data !== prevProps.data) {
+      this.leafletElement._transitive.updateData(currentProps.data)
+    }
   }
 
   componentDidMount () {
     super.componentDidMount()
     this.leafletElement._refresh()
   }
-
-  render () {
-    return null
-  }
 }

src/components/transitive-map-layer/leaflet-transitivelayer.js

@@ -0,0 +1,76 @@
+var L = window.L || require('leaflet')
+
+L.TransitiveLayer = module.exports = L.Layer.extend({
+
+  initialize: function (transitive, options) {
+    this._transitive = transitive
+  },
+
+  onAdd: function (map) {
+    this._map = map
+
+    this._initContainer()
+
+    map.on('moveend', this._refresh, this)
+    map.on('resize', this._resize, this)
+
+    this._transitive.options.zoomEnabled = false
+    this._transitive.options.autoResize = false
+    this._transitive.setElement(this._container)
+    this._transitive.render()
+
+    var self = this
+    this._transitive.on('clear data', function () {
+      self._refresh()
+    })
+
+    this._transitive.on('update data', function () {
+      self._transitive.render()
+      self._refresh()
+    })
+  },
+
+  onRemove: function (map) {
+    map.getPanes().overlayPane.removeChild(this._container)
+    map.off('moveend', this._moveend, this)
+    map.off('resize', this._resize, this)
+  },
+
+  getBounds: function () {
+    var bounds = this._transitive.getNetworkBounds()
+    if (!bounds) return null
+    return new L.LatLngBounds([bounds[0][1], bounds[0][0]], [bounds[1][1], bounds[1][0]])
+  },
+
+  _initContainer: function () {
+    this._container = L.DomUtil.create('div', 'leaflet-transitive-container', this._map.getPanes().overlayPane)
+    this._container.style.position = 'absolute'
+    this._container.style.width = this._map.getSize().x + 'px'
+    this._container.style.height = this._map.getSize().y + 'px'
+  },
+
+  _refresh: function () {
+    var bounds = this._map.getBounds()
+    var topLeft = this._map.latLngToLayerPoint(bounds.getNorthWest())
+    L.DomUtil.setPosition(this._container, topLeft)
+    this._transitive.setDisplayBounds([
+      [bounds.getWest(), bounds.getSouth()],
+      [bounds.getEast(), bounds.getNorth()]
+    ])
+  },
+
+  _resize: function (data) {
+    this._transitive.resize(data.newSize.x, data.newSize.y)
+    this._refresh()
+  },
+
+  // needed for compatibility w/ Leaflet 1.0
+  _layerAdd: function (data) {
+    this.onAdd(data.target)
+  }
+
+})
+
+window.L.transitiveLayer = function (transitive, options) {
+  return new L.TransitiveLayer(transitive, options)
+}

src/index.css

@@ -180,16 +180,17 @@ body {
   padding: 0 1rem 1rem;
 }
 
-.CardContent.Attribution {
+.Attribution {
+  color: #fff;
   text-align: center;
-  padding-top: 1rem;
 }
 
-.CardContent.Attribution a {
+.Attribution a {
+  color: #fff;
   background: url(https://d2f1n6ed3ipuic.cloudfront.net/conveyal-128x128.png) no-repeat;
-  padding-left: 1.1rem;
+  padding: 2.2rem 0 2.2rem 2.2rem;
   display: inline-block;
-  background-size: 1rem;
+  background-size: 2rem;
   background-position: left;
   background-position-x: left;
   background-position-y: center;

src/selectors/all-transitive-data.js

@@ -10,17 +10,16 @@ import createTransitiveRoutes from '../utils/create-transitive-routes'
  * This assumes loaded query, paths, and targets.
  */
 const memoizedTransitiveRoutes = memoize(
-  (n, i, s, e, z) => createTransitiveRoutes(n, s, e, z),
-  (n, i, s, e, z) =>
-    `${n.name}-${i}-${n.originPoint.x}-${n.originPoint.y}-${lonlat.toString(e.position)}-${z}`
+  (n, i, s, e) => createTransitiveRoutes(n, s, e),
+  (n, i, s, e) =>
+    `${n.name}-${i}-${n.originPoint.x}-${n.originPoint.y}-${lonlat.toString(e.position)}`
 )
 
 export default createSelector(
   state => get(state, 'data.networks'),
   state => get(state, 'geocoder.start'),
   state => get(state, 'geocoder.end'),
-  state => get(state, 'map.zoom'),
-  (networks, start, end, zoom) =>
+  (networks, start, end) =>
     networks.map((network, nIndex) => {
       const td = network.transitive
       if (
@@ -32,7 +31,7 @@ export default createSelector(
         network.targets &&
         td.patterns
       ) {
-        return memoizedTransitiveRoutes(network, nIndex, start, end, zoom)
+        return memoizedTransitiveRoutes(network, nIndex, start, end)
       } else {
         return td
       }

src/utils/create-transitive-routes.js

@@ -31,8 +31,7 @@ const WALK = 'WALK'
 export default function createTransitiveRoutesForNetwork (
   network: Network,
   start: Location,
-  end: Location,
-  zoom: number
+  end: Location
 ) {
   const td = network.transitive
   const places = [

src/utils/parse-times-data.js

@@ -18,8 +18,7 @@ type TimesData = {
  * Parse the ArrayBuffer from a `*_times.dat` file for a point in a network.
  */
 export function parseTimesData (ab: ArrayBuffer): TimesData {
-  const headerData = new Int8Array(ab, 0, TIMES_GRID_TYPE.length)
-  const headerType = String.fromCharCode(...headerData)
+  const headerType = String.fromCharCode(...new Int8Array(ab, 0, TIMES_GRID_TYPE.length))
   if (headerType !== TIMES_GRID_TYPE) {
     throw new Error(
       `Retrieved grid header ${headerType} !== ${TIMES_GRID_TYPE}. Please check your data.`