From d9b458d7fd276acc1af30c197425fde4938bde6a Mon Sep 17 00:00:00 2001
From: Lukas Martinelli <me@lukasmartinelli.ch>
Date: Mon, 9 Jan 2017 16:40:09 +0100
Subject: [PATCH] Add label to filter editor

---
 src/components/filter/FilterEditor.jsx | 20 +++++++++++++++-----
 src/components/layers/LayerEditor.jsx  |  2 --
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/filter/FilterEditor.jsx b/src/components/filter/FilterEditor.jsx
index 804a4f8..d7de3b5 100644
--- a/src/components/filter/FilterEditor.jsx
+++ b/src/components/filter/FilterEditor.jsx
@@ -1,10 +1,11 @@
 import React from 'react'
-import GlSpec from 'mapbox-gl-style-spec/reference/latest.min.js'
+import GlSpec from 'mapbox-gl-style-spec/reference/latest.js'
 
 import input from '../../config/input.js'
 import colors from '../../config/colors.js'
 import { margins } from '../../config/scales.js'
 
+import DocLabel from '../fields/DocLabel'
 import Button from '../Button'
 import SelectInput from '../inputs/SelectInput'
 import StringInput from '../inputs/StringInput'
@@ -148,18 +149,20 @@ export default class CombiningFilterEditor extends React.Component {
   static propTypes = {
     /** Properties of the vector layer and the available fields */
     properties: React.PropTypes.object.isRequired,
-    filter: React.PropTypes.array.isRequired,
+    filter: React.PropTypes.array,
     onChange: React.PropTypes.func.isRequired,
   }
 
   // Convert filter to combining filter
   combiningFilter() {
-    let combiningOp = this.props.filter[0]
-    let filters = this.props.filter.slice(1)
+    let filter = this.props.filter || ['all']
+
+    let combiningOp = filter[0]
+    let filters = filter.slice(1)
 
     if(combiningFilterOps.indexOf(combiningOp) < 0) {
       combiningOp = 'all'
-      filters = [this.props.filter.slice(0)]
+      filters = [filter.slice(0)]
     }
 
     return [combiningOp, ...filters]
@@ -216,6 +219,13 @@ export default class CombiningFilterEditor extends React.Component {
     }
 
     return <div>
+      <DocLabel
+        label={"Filter"}
+        doc={GlSpec.layer.filter.doc}
+        style={{
+          width: '42.25%',
+        }}
+      />
       <CombiningOperatorSelect
         value={combiningOp}
         onChange={this.onFilterPartChanged.bind(this, 0)}
diff --git a/src/components/layers/LayerEditor.jsx b/src/components/layers/LayerEditor.jsx
index 5eb7170..d9c343e 100644
--- a/src/components/layers/LayerEditor.jsx
+++ b/src/components/layers/LayerEditor.jsx
@@ -118,7 +118,6 @@ export default class LayerEditor extends React.Component {
           onChange={v => this.changeProperty(null, 'source-layer', v)}
         />
         }
-        {this.props.layer.filter &&
         <div style={input.property}>
           <FilterEditor
             filter={this.props.layer.filter}
@@ -126,7 +125,6 @@ export default class LayerEditor extends React.Component {
             onChange={f => this.changeProperty(null, 'filter', f)}
           />
         </div>
-        }
       </div>
       case 'properties': return <PropertyGroup
         layer={this.props.layer}