Update sources if they change

package.json

@@ -24,6 +24,7 @@
     "file-saver": "^1.3.2",
     "lodash.capitalize": "^4.2.1",
     "lodash.clonedeep": "^4.5.0",
+    "lodash.isequal": "^4.4.0",
     "lodash.throttle": "^4.1.1",
     "lodash.topairs": "^4.3.0",
     "mapbox-gl": "^0.29.0",

src/components/App.jsx

@@ -20,9 +20,9 @@ import LayerWatcher from '../libs/layerwatcher'
 export default class App extends React.Component {
   constructor(props) {
     super(props)
-    this.layerWatcher = new LayerWatcher()
     this.styleStore = new ApiStyleStore()
     this.revisionStore = new RevisionStore()
+
     this.styleStore.supported(isSupported => {
       if(!isSupported) {
         console.log('Falling back to local storage for storing styles')
@@ -34,7 +34,14 @@ export default class App extends React.Component {
     this.state = {
       mapStyle: style.emptyStyle,
       selectedLayerIndex: 0,
+      sources: {},
+      vectorLayers: {},
     }
+
+    this.layerWatcher = new LayerWatcher({
+      onSourcesChange: v => this.setState({ sources: v }),
+      onVectorLayersChange: v => this.setState({ vectorLayers: v })
+    })
   }
 
   componentDidMount() {
@@ -146,7 +153,7 @@ export default class App extends React.Component {
     if(renderer === 'ol3') {
       return <OpenLayers3Map {...mapProps} />
     } else if(renderer === 'inspection') {
-      return  <InspectionMap {...mapProps} sources={this.layerWatcher.sources} />
+      return  <InspectionMap {...mapProps} sources={this.state.sources} />
     } else {
       return  <MapboxGlMap {...mapProps} />
     }
@@ -164,7 +171,7 @@ export default class App extends React.Component {
 
     const toolbar = <Toolbar
       mapStyle={this.state.mapStyle}
-      sources={this.layerWatcher.sources}
+      sources={this.state.sources}
       onStyleChanged={this.onStyleChanged.bind(this)}
       onStyleOpen={this.onStyleChanged.bind(this)}
       onStyleDownload={this.onStyleDownload.bind(this)}
@@ -179,8 +186,8 @@ export default class App extends React.Component {
 
     const layerEditor = selectedLayer ? <LayerEditor
       layer={selectedLayer}
-      sources={this.layerWatcher.sources}
+      sources={this.state.sources}
-      vectorLayers={this.layerWatcher.vectorLayers}
+      vectorLayers={this.state.vectorLayers}
       highlightLayer={metadata['maputnik:highlighted_layer'] ? true : false}
       onLayerChanged={this.onLayerChanged.bind(this)}
       onLayerIdChange={this.onLayerIdChange.bind(this)}

src/components/fields/SpecField.jsx

@@ -45,7 +45,6 @@ export default class SpecField extends React.Component {
       name: this.props.fieldName,
       onChange: newValue => this.props.onChange(this.props.fieldName, newValue)
     }
-    console.log(this.props.fieldName, this.props.fieldSpec.type)
     switch(this.props.fieldSpec.type) {
       case 'number': return (
         <NumberInput

src/components/layers/LayerEditor.jsx

@@ -169,7 +169,6 @@ export default class LayerEditor extends React.Component {
   }
 
   render() {
-    console.log(this.props)
     const layerType = this.props.layer.type
     const layoutGroups = layout[layerType].groups.filter(group => {
       return !(this.props.layer.type === 'background' && group.type === 'source')

src/components/modals/AddModal.jsx

@@ -24,16 +24,26 @@ class AddModal extends React.Component {
 
   constructor(props) {
     super(props)
-
-    console.log('sources', this.props.sources)
     this.state = {
       type: 'fill',
       id: '',
-      //source: Object.keys(this.props.sources)[0],
+    }
-      //'source-layer': this.props.sources[0][0]
+
+    if(props.sources.length > 0) {
+      this.state.source = Object.keys(this.props.sources)[0]
     }
   }
 
+  componentWillReceiveProps(nextProps) {
+    const sourceIds = Object.keys(nextProps.sources)
+    if(!this.state.source && sourceIds.length > 0) {
+      this.setState({
+        source: sourceIds[0],
+      })
+    }
+  }
+
+
   render() {
     return <Modal
       isOpen={this.props.isOpen}

src/libs/layerwatcher.js

@@ -1,9 +1,13 @@
 import throttle from 'lodash.throttle'
+import isEqual from 'lodash.isequal'
 
 /** Listens to map events to build up a store of available vector
  * layers contained in the tiles */
 export default class LayerWatcher {
-  constructor() {
+  constructor(opts = {}) {
+    this.onSourcesChange = opts.onSourcesChange || (() => {})
+    this.onVectorLayersChange = opts.onVectorLayersChange || (() => {})
+
     this._sources = {}
     this._vectorLayers = {}
 
@@ -14,15 +18,24 @@ export default class LayerWatcher {
   }
 
   analyzeMap(map) {
+    const previousSources = { ...this._sources }
+
     Object.keys(map.style.sourceCaches).forEach(sourceId => {
       //NOTE: This heavily depends on the internal API of Mapbox GL
       //so this breaks between Mapbox GL JS releases
       this._sources[sourceId] = map.style.sourceCaches[sourceId]._source.vectorLayerIds
     })
+
+    if(!isEqual(previousSources, this._sources)) {
+      this.onSourcesChange(this._sources)
+    }
+
     this.throttledAnalyzeVectorLayerFields(map)
   }
 
   analyzeVectorLayerFields(map) {
+    const previousVectorLayers = { ...this._vectorLayers }
+
     Object.keys(this._sources).forEach(sourceId => {
       this._sources[sourceId].forEach(vectorLayerId => {
         const knownProperties = this._vectorLayers[vectorLayerId] || {}
@@ -38,6 +51,11 @@ export default class LayerWatcher {
         this._vectorLayers[vectorLayerId] = knownProperties
       })
     })
+
+    if(!isEqual(previousVectorLayers, this._vectorLayers)) {
+      this.onVectorLayersChange(this._vectorLayers)
+    }
+
   }
 
   /** Access all known sources and their vector tile ids */

src/libs/style.js

@@ -30,7 +30,6 @@ function ensureHasNoRefs(style) {
     ...style,
     layers: derefLayers(style.layers)
   }
-  console.log(derefedStyle)
   return derefedStyle
 }