Merge pull request #620 from orangemug/feature/ui-errors-and-expressions

Added support for expressions and UI errors

package-lock.json

@@ -3168,6 +3168,11 @@
         }
       }
     },
+    "code-error-fragment": {
+      "version": "0.0.230",
+      "resolved": "https://registry.npmjs.org/code-error-fragment/-/code-error-fragment-0.0.230.tgz",
+      "integrity": "sha512-cadkfKp6932H8UkhzE/gcUqhRMNf8jHzkAN7+5Myabswaghu4xABTgPHDCjW+dBAJxj/SpkTYokpzDqY4pCzQw=="
+    },
     "code-point-at": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
@@ -5783,8 +5788,7 @@
     "grapheme-splitter": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
-      "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
+      "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ=="
-      "dev": true
     },
     "grid-index": {
       "version": "1.1.0",
@@ -7141,6 +7145,15 @@
       "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
       "dev": true
     },
+    "json-to-ast": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/json-to-ast/-/json-to-ast-2.1.0.tgz",
+      "integrity": "sha512-W9Lq347r8tA1DfMvAGn9QNcgYm4Wm7Yc+k8e6vezpMnRT+NHbtlxgNBXRVjXe9YM6eTn6+p/MKOlV/aABJcSnQ==",
+      "requires": {
+        "code-error-fragment": "0.0.230",
+        "grapheme-splitter": "^1.0.4"
+      }
+    },
     "json3": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/json3/-/json3-3.3.3.tgz",

package.json

@@ -30,6 +30,7 @@
     "color": "^3.1.2",
     "detect-browser": "^4.8.0",
     "file-saver": "^2.0.2",
+    "json-to-ast": "^2.1.0",
     "jsonlint": "github:josdejong/jsonlint#85a19d7",
     "lodash": "^4.17.15",
     "lodash.capitalize": "^4.2.1",

src/components/App.jsx

@@ -3,6 +3,7 @@ import React from 'react'
 import cloneDeep from 'lodash.clonedeep'
 import clamp from 'lodash.clamp'
 import get from 'lodash.get'
+import {unset} from 'lodash'
 import {arrayMove} from 'react-sortable-hoc'
 import url from 'url'
 
@@ -97,7 +98,7 @@ export default class App extends React.Component {
       port = window.location.port
     }
     this.styleStore = new ApiStyleStore({
-      onLocalStyleChange: mapStyle => this.onStyleChanged(mapStyle, false),
+      onLocalStyleChange: mapStyle => this.onStyleChanged(mapStyle, {save: false}),
       port: port,
       host: params.get("localhost")
     })
@@ -316,39 +317,87 @@ export default class App extends React.Component {
     this.onStyleChanged(changedStyle)
   }
 
-  onStyleChanged = (newStyle, save=true) => {
+  onStyleChanged = (newStyle, opts={}) => {
+    opts = {
+      save: true,
+      addRevision: true,
+      ...opts,
+    };
 
-    const errors = validate(newStyle, latest)
+    const errors = validate(newStyle, latest) || [];
-    if(errors.length === 0) {
+    const mappedErrors = errors.map(error => {
-
+      const layerMatch = error.message.match(/layers\[(\d+)\]\.(?:(\S+)\.)?(\S+): (.*)/);
-      if(newStyle.glyphs !== this.state.mapStyle.glyphs) {
+      if (layerMatch) {
-        this.updateFonts(newStyle.glyphs)
+        const [matchStr, index, group, property, message] = layerMatch;
+        const key = (group && property) ? [group, property].join(".") : property;
+        return {
+          message: error.message,
+          parsed: {
+            type: "layer",
+            data: {
+              index,
+              key,
+              message
+            }
+          }
+        }
       }
-      if(newStyle.sprite !== this.state.mapStyle.sprite) {
+      else {
-        this.updateIcons(newStyle.sprite)
+        return {
+          message: error.message,
+        };
       }
+    })
 
-      this.revisionStore.addRevision(newStyle)
+    let dirtyMapStyle = undefined;
-      if(save) this.saveStyle(newStyle)
+    if (errors.length > 0) {
-      this.setState({
+      dirtyMapStyle = cloneDeep(newStyle);
-        mapStyle: newStyle,
+
-        errors: [],
+      errors.forEach(error => {
-      })
+        const {message} = error;
-    } else {
+        if (message) {
-      this.setState({
+          try {
-        errors: errors.map(err => err.message)
+            const objPath = message.split(":")[0];
-      })
+            // Errors can be deply nested for example 'layers[0].filter[1][1][0]' we only care upto the property 'layers[0].filter'
+            const unsetPath = objPath.match(/^\S+?\[\d+\]\.[^\[]+/)[0];
+            unset(dirtyMapStyle, unsetPath);
+          }
+          catch (err) {
+            console.warn(err);
+          }
+        }
+      });
     }
 
+    if(newStyle.glyphs !== this.state.mapStyle.glyphs) {
+      this.updateFonts(newStyle.glyphs)
+    }
+    if(newStyle.sprite !== this.state.mapStyle.sprite) {
+      this.updateIcons(newStyle.sprite)
+    }
+
+    if (opts.addRevision) {
+      this.revisionStore.addRevision(newStyle);
+    }
+    if (opts.save) {
+      this.saveStyle(newStyle);
+    }
+       
+    this.setState({
+      mapStyle: newStyle,
+      dirtyMapStyle: dirtyMapStyle,
+      errors: mappedErrors,
+    })
+
     this.fetchSources();
   }
 
   onUndo = () => {
     const activeStyle = this.revisionStore.undo()
+
     const messages = undoMessages(this.state.mapStyle, activeStyle)
-    this.saveStyle(activeStyle)
+    this.onStyleChanged(activeStyle, {addRevision: false});
     this.setState({
-      mapStyle: activeStyle,
       infos: messages,
     })
   }
@@ -356,9 +405,8 @@ export default class App extends React.Component {
   onRedo = () => {
     const activeStyle = this.revisionStore.redo()
     const messages = redoMessages(this.state.mapStyle, activeStyle)
-    this.saveStyle(activeStyle)
+    this.onStyleChanged(activeStyle, {addRevision: false});
     this.setState({
-      mapStyle: activeStyle,
       infos: messages,
     })
   }
@@ -546,10 +594,11 @@ export default class App extends React.Component {
   }
 
   mapRenderer() {
+    const {mapStyle, dirtyMapStyle} = this.state;
     const metadata = this.state.mapStyle.metadata || {};
 
     const mapProps = {
-      mapStyle: this.state.mapStyle,
+      mapStyle: (dirtyMapStyle || mapStyle),
       replaceAccessTokens: (mapStyle) => {
         return style.replaceAccessTokens(mapStyle, {
           allowFallback: true
@@ -663,6 +712,7 @@ export default class App extends React.Component {
       selectedLayerIndex={this.state.selectedLayerIndex}
       layers={layers}
       sources={this.state.sources}
+      errors={this.state.errors}
     />
 
     const layerEditor = selectedLayer ? <LayerEditor
@@ -680,9 +730,13 @@ export default class App extends React.Component {
       onLayerCopy={this.onLayerCopy}
       onLayerVisibilityToggle={this.onLayerVisibilityToggle}
       onLayerIdChange={this.onLayerIdChange}
+      errors={this.state.errors}
     /> : null
 
     const bottomPanel = (this.state.errors.length + this.state.infos.length) > 0 ? <MessagePanel
+      currentLayer={selectedLayer}
+      onLayerSelect={this.onLayerSelect}
+      mapStyle={this.state.mapStyle}
       errors={this.state.errors}
       infos={this.state.infos}
     /> : null

src/components/MessagePanel.jsx

@@ -5,11 +5,45 @@ class MessagePanel extends React.Component {
   static propTypes = {
     errors: PropTypes.array,
     infos: PropTypes.array,
+    mapStyle: PropTypes.object,
+    onLayerSelect: PropTypes.func,
+    currentLayer: PropTypes.object,
+  }
+
+  static defaultProps = {
+    onLayerSelect: () => {},
   }
 
   render() {
-    const errors = this.props.errors.map((m, i) => {
+    const errors = this.props.errors.map((error, idx) => {
-      return <p key={"error-"+i} className="maputnik-message-panel-error">{m}</p>
+      let content;
+      if (error.parsed && error.parsed.type === "layer") {
+        const {parsed} = error;
+        const {mapStyle, currentLayer} = this.props;
+        const layerId = mapStyle.layers[parsed.data.index].id;
+        content = (
+          <>
+            Layer <span>&apos;{layerId}&apos;</span>: {parsed.data.message}
+            {currentLayer.id !== layerId &&
+              <>
+                &nbsp;&mdash;&nbsp;
+                <button
+                  className="maputnik-message-panel__switch-button"
+                  onClick={() => this.props.onLayerSelect(layerId)}
+                >
+                  switch to layer
+                </button>
+              </>
+            }
+          </>
+        );
+      }
+      else {
+        content = error.message;
+      }
+      return <p key={"error-"+idx} className="maputnik-message-panel-error">
+        {content}
+      </p>
     })
 
     const infos = this.props.infos.map((m, i) => {

src/components/fields/DocLabel.jsx

@@ -49,8 +49,15 @@ export default class DocLabel extends React.Component {
         </div>
       </label>
     }
+    else if (label) {
+      return <label className="maputnik-doc-wrapper">
+        <div className="maputnik-doc-target">
+          {label}
+        </div>
+      </label>
+    }
     else {
-      return <div />
+      <div />
     }
   }
 }

src/components/fields/FunctionSpecField.jsx

@@ -4,14 +4,78 @@ import PropTypes from 'prop-types'
 import SpecProperty from './_SpecProperty'
 import DataProperty from './_DataProperty'
 import ZoomProperty from './_ZoomProperty'
+import ExpressionProperty from './_ExpressionProperty'
+import {function as styleFunction} from '@mapbox/mapbox-gl-style-spec';
 
 
+function isLiteralExpression (value) {
+  return (Array.isArray(value) && value.length === 2 && value[0] === "literal");
+}
+
 function isZoomField(value) {
-  return typeof value === 'object' && value.stops && typeof value.property === 'undefined'
+  return (
+    typeof(value) === 'object' &&
+    value.stops &&
+    typeof(value.property) === 'undefined' &&
+    Array.isArray(value.stops) &&
+    value.stops.length > 1 &&
+    value.stops.every(stop => {
+      return (
+        Array.isArray(stop) &&
+        stop.length === 2
+      );
+    })
+  );
 }
 
 function isDataField(value) {
-  return typeof value === 'object' && value.stops && typeof value.property !== 'undefined'
+  return (
+    typeof(value) === 'object' &&
+    value.stops &&
+    typeof(value.property) !== 'undefined' &&
+    value.stops.length > 1 &&
+    Array.isArray(value.stops) &&
+    value.stops.every(stop => {
+      return (
+        Array.isArray(stop) &&
+        stop.length === 2 &&
+        typeof(stop[0]) === 'object'
+      );
+    })
+  );
+}
+
+function isPrimative (value) {
+  const valid = ["string", "boolean", "number"];
+  return valid.includes(typeof(value));
+}
+
+function isArrayOfPrimatives (values) {
+  if (Array.isArray(values)) {
+    return values.every(isPrimative);
+  }
+  return false;
+}
+
+function getDataType (value, fieldSpec={}) {
+  if (value === undefined) {
+    return "value";
+  }
+  else if (isPrimative(value)) {
+    return "value";
+  }
+  else if (fieldSpec.type === "array" && isArrayOfPrimatives(value)) {
+    return "value";
+  }
+  else if (isZoomField(value)) {
+    return "zoom_function";
+  }
+  else if (isDataField(value)) {
+    return "data_function";
+  }
+  else {
+    return "expression";
+  }
 }
 
 /**
@@ -40,7 +104,9 @@ export default class FunctionSpecProperty  extends React.Component {
   static propTypes = {
       onChange: PropTypes.func.isRequired,
       fieldName: PropTypes.string.isRequired,
+      fieldType: PropTypes.string.isRequired,
       fieldSpec: PropTypes.object.isRequired,
+      errors: PropTypes.object,
 
       value: PropTypes.oneOfType([
       PropTypes.object,
@@ -51,6 +117,27 @@ export default class FunctionSpecProperty  extends React.Component {
     ]),
   }
 
+  constructor (props) {
+    super();
+    this.state = {
+      dataType: getDataType(props.value, props.fieldSpec),
+      isEditing: false,
+    }
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    // Because otherwise when editing values we end up accidentally changing field type.
+    if (state.isEditing) {
+      return {};
+    }
+    else {
+      return {
+        isEditing: false,
+        dataType: getDataType(props.value, props.fieldSpec)
+      };
+    }
+  }
+
   getFieldFunctionType(fieldSpec) {
     if (fieldSpec.expression.interpolated) {
       return "exponential"
@@ -82,6 +169,14 @@ export default class FunctionSpecProperty  extends React.Component {
     this.props.onChange(this.props.fieldName, changedValue)
   }
 
+  deleteExpression = () => {
+    const {fieldSpec, fieldName} = this.props;
+    this.props.onChange(fieldName, fieldSpec.default);
+    this.setState({
+      dataType: "value",
+    });
+  }
+
   deleteStop = (stopIdx) => {
     const stops = this.props.value.stops.slice(0)
     stops.splice(stopIdx, 1)
@@ -108,6 +203,39 @@ export default class FunctionSpecProperty  extends React.Component {
     this.props.onChange(this.props.fieldName, zoomFunc)
   }
 
+  undoExpression = () => {
+    const {value, fieldName} = this.props;
+
+    if (isLiteralExpression(value)) {
+      this.props.onChange(fieldName, value[1]);
+      this.setState({
+        dataType: "value",
+      });
+    }
+  }
+
+  canUndo = () => {
+    const {value, fieldSpec} = this.props;
+    return (
+      isLiteralExpression(value) ||
+      isPrimative(value) ||
+      (Array.isArray(value) && fieldSpec.type === "array")
+    );
+  }
+
+  makeExpression = () => {
+    const {value, fieldSpec} = this.props;
+    let expression;
+
+    if (typeof(value) === "object" && 'stops' in value) {
+      expression = styleFunction.convertFunction(value, fieldSpec);
+    }
+    else {
+      expression = ["literal", value || this.props.fieldSpec.default];
+    }
+    this.props.onChange(this.props.fieldName, expression);
+  }
+
   makeDataFunction = () => {
     const functionType = this.getFieldFunctionType(this.props.fieldSpec);
     const stopValue = functionType === 'categorical' ? '' : 0;
@@ -122,43 +250,78 @@ export default class FunctionSpecProperty  extends React.Component {
     this.props.onChange(this.props.fieldName, dataFunc)
   }
 
+  onMarkEditing = () => {
+    this.setState({isEditing: true});
+  }
+
+  onUnmarkEditing = () => {
+    this.setState({isEditing: false});
+  }
+
   render() {
+    const {dataType} = this.state;
     const propClass = this.props.fieldSpec.default === this.props.value ? "maputnik-default-property" : "maputnik-modified-property"
     let specField;
 
-    if (isZoomField(this.props.value)) {
+    if (dataType === "expression") {
+      specField = (
+        <ExpressionProperty
+          errors={this.props.errors}
+          onChange={this.props.onChange.bind(this, this.props.fieldName)}
+          canUndo={this.canUndo}
+          onUndo={this.undoExpression}
+          onDelete={this.deleteExpression}
+          fieldType={this.props.fieldType}
+          fieldName={this.props.fieldName}
+          fieldSpec={this.props.fieldSpec}
+          value={this.props.value}
+          onFocus={this.onMarkEditing}
+          onBlur={this.onUnmarkEditing}
+        />
+      );
+    }
+    else if (dataType === "zoom_function") {
       specField = (
         <ZoomProperty
+          errors={this.props.errors}
           onChange={this.props.onChange.bind(this)}
+          fieldType={this.props.fieldType}
           fieldName={this.props.fieldName}
           fieldSpec={this.props.fieldSpec}
           value={this.props.value}
           onDeleteStop={this.deleteStop}
           onAddStop={this.addStop}
+          onExpressionClick={this.makeExpression} 
         />
       )
     }
-    else if (isDataField(this.props.value)) {
+    else if (dataType === "data_function") {
       specField = (
         <DataProperty
+          errors={this.props.errors}
           onChange={this.props.onChange.bind(this)}
+          fieldType={this.props.fieldType}
           fieldName={this.props.fieldName}
           fieldSpec={this.props.fieldSpec}
           value={this.props.value}
           onDeleteStop={this.deleteStop}
           onAddStop={this.addStop}
+          onExpressionClick={this.makeExpression} 
         />
       )
     }
     else {
       specField = (
         <SpecProperty
+          errors={this.props.errors}
           onChange={this.props.onChange.bind(this)}
+          fieldType={this.props.fieldType}
           fieldName={this.props.fieldName}
           fieldSpec={this.props.fieldSpec}
           value={this.props.value}
           onZoomClick={this.makeZoomFunction}
           onDataClick={this.makeDataFunction} 
+          onExpressionClick={this.makeExpression} 
         />
       )
     }

src/components/fields/PropertyGroup.jsx

@@ -40,6 +40,7 @@ export default class PropertyGroup extends React.Component {
     groupFields: PropTypes.array.isRequired,
     onChange: PropTypes.func.isRequired,
     spec: PropTypes.object.isRequired,
+    errors: PropTypes.object,
   }
 
   onPropertyChange = (property, newValue) => {
@@ -48,18 +49,22 @@ export default class PropertyGroup extends React.Component {
   }
 
   render() {
+    const {errors} = this.props;
     const fields = this.props.groupFields.map(fieldName => {
       const fieldSpec = getFieldSpec(this.props.spec, this.props.layer.type, fieldName)
 
       const paint = this.props.layer.paint || {}
       const layout = this.props.layer.layout || {}
       const fieldValue = fieldName in paint ? paint[fieldName] : layout[fieldName]
+      const fieldType = fieldName in paint ? 'paint' : 'layout';
 
       return <FunctionSpecField
+        errors={errors}
         onChange={this.onPropertyChange}
         key={fieldName}
         fieldName={fieldName}
         value={fieldValue}
+        fieldType={fieldType}
         fieldSpec={fieldSpec}
       />
     })

src/components/fields/_DataProperty.jsx

@@ -39,7 +39,9 @@ export default class DataProperty extends React.Component {
     onChange: PropTypes.func,
     onDeleteStop: PropTypes.func,
     onAddStop: PropTypes.func,
+    onExpressionClick: PropTypes.func,
     fieldName: PropTypes.string,
+    fieldType: PropTypes.string,
     fieldSpec: PropTypes.object,
     value: PropTypes.oneOfType([
       PropTypes.object,
@@ -48,6 +50,7 @@ export default class DataProperty extends React.Component {
       PropTypes.bool,
       PropTypes.array
     ]),
+    errors: PropTypes.object,
   }
 
   state = {
@@ -144,6 +147,8 @@ export default class DataProperty extends React.Component {
   }
 
   render() {
+    const {fieldName, fieldType, errors} = this.props;
+
     if (typeof this.props.value.type === "undefined") {
       this.props.value.type = this.getFieldFunctionType(this.props.fieldSpec)
     }
@@ -181,7 +186,22 @@ export default class DataProperty extends React.Component {
         </div>
       }
 
-      return <InputBlock key={key} action={deleteStopBtn} label="">
+      const errorKeyStart = `${fieldType}.${fieldName}.stops[${idx}]`;
+      const foundErrors = Object.entries(errors).filter(([key, error]) => {
+        return key.startsWith(errorKeyStart);
+      });
+
+      const message = foundErrors.map(([key, error]) => {
+        return error.message;
+      }).join("");
+      const error = message ? {message} : undefined;
+
+      return <InputBlock
+        error={error}
+        key={key}
+        action={deleteStopBtn}
+        label=""
+      >
         {zoomInput}
         <div className="maputnik-data-spec-property-stop-data">
           {dataInput}
@@ -198,58 +218,64 @@ export default class DataProperty extends React.Component {
     })
 
     return <div className="maputnik-data-spec-block">
-    <div className="maputnik-data-spec-property">
+      <div className="maputnik-data-spec-property">
-      <InputBlock
+        <InputBlock
-        fieldSpec={this.props.fieldSpec}
+          fieldSpec={this.props.fieldSpec}
-        label={labelFromFieldName(this.props.fieldName)}
+          label={labelFromFieldName(this.props.fieldName)}
-      >
-        <div className="maputnik-data-spec-property-group">
-          <DocLabel
-            label="Property"
-          />
-          <div className="maputnik-data-spec-property-input">
-            <StringInput
-              value={this.props.value.property}
-              title={"Input a data property to base styles off of."}
-              onChange={propVal => this.changeDataProperty("property", propVal)}
-            />
-          </div>
-        </div>
-        <div className="maputnik-data-spec-property-group">
-          <DocLabel
-            label="Type"
-          />
-          <div className="maputnik-data-spec-property-input">
-            <SelectInput
-              value={this.props.value.type}
-              onChange={propVal => this.changeDataProperty("type", propVal)}
-              title={"Select a type of data scale (default is 'categorical')."}
-              options={this.getDataFunctionTypes(this.props.fieldSpec)}
-            />
-          </div>
-        </div>
-        <div className="maputnik-data-spec-property-group">
-          <DocLabel
-            label="Default"
-          />
-          <div className="maputnik-data-spec-property-input">
-            <SpecField
-              fieldName={this.props.fieldName}
-              fieldSpec={this.props.fieldSpec}
-              value={this.props.value.default}
-              onChange={(_, propVal) => this.changeDataProperty("default", propVal)}
-            />
-          </div>
-        </div>
-        {dataFields}
-        <Button
-          className="maputnik-add-stop"
-          onClick={this.props.onAddStop.bind(this)}
         >
-          Add stop
+          <div className="maputnik-data-spec-property-group">
-        </Button>
+            <DocLabel
-      </InputBlock>
+              label="Property"
-    </div>
+            />
+            <div className="maputnik-data-spec-property-input">
+              <StringInput
+                value={this.props.value.property}
+                title={"Input a data property to base styles off of."}
+                onChange={propVal => this.changeDataProperty("property", propVal)}
+              />
+            </div>
+          </div>
+          <div className="maputnik-data-spec-property-group">
+            <DocLabel
+              label="Type"
+            />
+            <div className="maputnik-data-spec-property-input">
+              <SelectInput
+                value={this.props.value.type}
+                onChange={propVal => this.changeDataProperty("type", propVal)}
+                title={"Select a type of data scale (default is 'categorical')."}
+                options={this.getDataFunctionTypes(this.props.fieldSpec)}
+              />
+            </div>
+          </div>
+          <div className="maputnik-data-spec-property-group">
+            <DocLabel
+              label="Default"
+            />
+            <div className="maputnik-data-spec-property-input">
+              <SpecField
+                fieldName={this.props.fieldName}
+                fieldSpec={this.props.fieldSpec}
+                value={this.props.value.default}
+                onChange={(_, propVal) => this.changeDataProperty("default", propVal)}
+              />
+            </div>
+          </div>
+        </InputBlock>
+      </div>
+      {dataFields}
+      <Button
+        className="maputnik-add-stop"
+        onClick={this.props.onAddStop.bind(this)}
+      >
+        Add stop
+      </Button>
+      <Button
+        className="maputnik-add-stop"
+        onClick={this.props.onExpressionClick.bind(this)}
+      >
+        Convert to expression
+      </Button>
     </div>
   }
 }

src/components/fields/_ExpressionProperty.jsx

@@ -0,0 +1,135 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import InputBlock from '../inputs/InputBlock'
+import Button from '../Button'
+import {MdDelete, MdUndo} from 'react-icons/md'
+import StringInput from '../inputs/StringInput'
+
+import labelFromFieldName from './_labelFromFieldName'
+import stringifyPretty from 'json-stringify-pretty-compact'
+import JSONEditor from '../layers/JSONEditor'
+
+
+export default class ExpressionProperty extends React.Component {
+  static propTypes = {
+    onDelete: PropTypes.func,
+    fieldName: PropTypes.string,
+    fieldType: PropTypes.string,
+    fieldSpec: PropTypes.object,
+    value: PropTypes.any,
+    errors: PropTypes.object,
+    onChange: PropTypes.func,
+    onUndo: PropTypes.func,
+    canUndo: PropTypes.func,
+    onFocus: PropTypes.func,
+    onBlur: PropTypes.func,
+  }
+
+  static defaultProps = {
+    errors: {},
+    onFocus: () => {},
+    onBlur: () => {},
+  }
+
+  constructor (props) {
+    super();
+    this.state = {
+      jsonError: false,
+    };
+  }
+
+  onJSONInvalid = (err) => {
+    this.setState({
+      jsonError: true,
+    })
+  }
+
+  onJSONValid = () => {
+    this.setState({
+      jsonError: false,
+    })
+  }
+
+  render() {
+    const {errors, fieldName, fieldType, value, canUndo} = this.props;
+    const {jsonError} = this.state;
+    const undoDisabled = canUndo ? !canUndo() : true;
+
+    const deleteStopBtn = (
+      <>
+        {this.props.onUndo &&
+          <Button
+            key="undo_action"
+            onClick={this.props.onUndo}
+            disabled={undoDisabled}
+            className="maputnik-delete-stop"
+          >
+            <MdUndo />
+          </Button>
+        }
+        <Button
+          key="delete_action"
+          onClick={this.props.onDelete}
+          className="maputnik-delete-stop"
+        >
+          <MdDelete />
+        </Button>
+      </>
+    );
+
+    const fieldKey = fieldType === undefined ? fieldName : `${fieldType}.${fieldName}`;
+
+    const fieldError = errors[fieldKey];
+    const errorKeyStart = `${fieldKey}[`;
+    const foundErrors = [];
+
+    function getValue (data) {
+      return stringifyPretty(data, {indent: 2, maxLength: 38})
+    }
+    
+    if (jsonError) {
+      foundErrors.push({message: "Invalid JSON"});
+    }
+    else {
+      Object.entries(errors)
+      .filter(([key, error]) => {
+        return key.startsWith(errorKeyStart);
+      })
+      .forEach(([key, error]) => {
+        return foundErrors.push(error);
+      })
+
+      if (fieldError) {
+        foundErrors.push(fieldError);
+      }
+    }
+
+    return <InputBlock
+      error={foundErrors}
+      fieldSpec={this.props.fieldSpec}
+      label={labelFromFieldName(this.props.fieldName)}
+      action={deleteStopBtn}
+      wideMode={true}
+    >
+      <JSONEditor
+        mode={{name: "mgl"}}
+        lint={{
+          context: "expression",
+          spec: this.props.fieldSpec,
+        }}
+        className="maputnik-expression-editor"
+        onFocus={this.props.onFocus}
+        onBlur={this.props.onBlur}
+        onJSONInvalid={this.onJSONInvalid}
+        onJSONValid={this.onJSONValid}
+        layer={value}
+        lineNumbers={false}
+        maxHeight={200}
+        lineWrapping={true}
+        getValue={getValue}
+        onChange={this.props.onChange}
+      />
+    </InputBlock>
+  }
+}

src/components/fields/_FunctionButtons.jsx

@@ -3,18 +3,50 @@ import PropTypes from 'prop-types'
 
 import Button from '../Button'
 import {MdFunctions, MdInsertChart} from 'react-icons/md'
+import {mdiFunctionVariant} from '@mdi/js';
 
 
+/**
+ * So here we can't just check is `Array.isArray(value)` because certain
+ * properties accept arrays as values, for example `text-font`. So we must try
+ * and create an expression.
+ */
+function isExpression(value, fieldSpec={}) {
+  if (!Array.isArray(value)) {
+    return false;
+  }
+  try {
+    expression.createExpression(value, fieldSpec);
+    return true;
+  }
+  catch (err) {
+    return false;
+  }
+}
+
 export default class FunctionButtons extends React.Component {
   static propTypes = {
     fieldSpec: PropTypes.object,
     onZoomClick: PropTypes.func,
     onDataClick: PropTypes.func,
+    onExpressionClick: PropTypes.func,
   }
 
   render() {
-    let makeZoomButton, makeDataButton
+    let makeZoomButton, makeDataButton, expressionButton;
+
     if (this.props.fieldSpec.expression.parameters.includes('zoom')) {
+      expressionButton = (
+        <Button
+          className="maputnik-make-zoom-function"
+          onClick={this.props.onExpressionClick}
+        >
+          <svg style={{width:"14px", height:"14px", verticalAlign: "middle"}} viewBox="0 0 24 24">
+            <path fill="currentColor" d={mdiFunctionVariant} />
+          </svg>
+        </Button>
+      );
+
       makeZoomButton = <Button
         className="maputnik-make-zoom-function"
         onClick={this.props.onZoomClick}
@@ -32,10 +64,14 @@ export default class FunctionButtons extends React.Component {
           <MdInsertChart />
         </Button>
       }
-      return <div>{makeDataButton}{makeZoomButton}</div>
+      return <div>
+        {expressionButton}
+        {makeDataButton}
+        {makeZoomButton}
+      </div>
     }
     else {
-      return null
+      return <div>{expressionButton}</div>
     }
   }
 }

src/components/fields/_SpecProperty.jsx

@@ -13,18 +13,32 @@ export default class SpecProperty extends React.Component {
     onZoomClick: PropTypes.func.isRequired,
     onDataClick: PropTypes.func.isRequired,
     fieldName: PropTypes.string,
-    fieldSpec: PropTypes.object
+    fieldType: PropTypes.string,
+    fieldSpec: PropTypes.object,
+    value: PropTypes.any,
+    errors: PropTypes.object,
+    onExpressionClick: PropTypes.func,
+  }
+
+  static defaultProps = {
+    errors: {},
   }
 
   render() {
+    const {errors, fieldName, fieldType} = this.props;
+
     const functionBtn = <FunctionButtons
       fieldSpec={this.props.fieldSpec}
       onZoomClick={this.props.onZoomClick}
       onDataClick={this.props.onDataClick} 
+      value={this.props.value}
+      onExpressionClick={this.props.onExpressionClick} 
     />
 
+    const error = errors[fieldType+"."+fieldName];
+
     return <InputBlock
-      doc={this.props.fieldSpec.doc}
+      error={error}
       fieldSpec={this.props.fieldSpec}
       label={labelFromFieldName(this.props.fieldName)}
       action={functionBtn}

src/components/fields/_ZoomProperty.jsx

@@ -42,8 +42,11 @@ export default class ZoomProperty extends React.Component {
     onChange: PropTypes.func,
     onDeleteStop: PropTypes.func,
     onAddStop: PropTypes.func,
+    onExpressionClick: PropTypes.func,
+    fieldType: PropTypes.string,
     fieldName: PropTypes.string,
     fieldSpec: PropTypes.object,
+    errors: PropTypes.object,
     value: PropTypes.oneOfType([
       PropTypes.object,
       PropTypes.string,
@@ -53,6 +56,10 @@ export default class ZoomProperty extends React.Component {
     ]),
   }
 
+  static defaultProps = {
+    errors: {},
+  }
+
   state = {
     refs: {}
   }
@@ -117,13 +124,26 @@ export default class ZoomProperty extends React.Component {
   }
 
   render() {
+    const {fieldName, fieldType, errors} = this.props;
+
     const zoomFields = this.props.value.stops.map((stop, idx) => {
       const zoomLevel = stop[0]
       const key  = this.state.refs[idx];
       const value = stop[1]
       const deleteStopBtn= <DeleteStopButton onClick={this.props.onDeleteStop.bind(this, idx)} />
 
+      const errorKeyStart = `${fieldType}.${fieldName}.stops[${idx}]`;
+      const foundErrors = Object.entries(errors).filter(([key, error]) => {
+        return key.startsWith(errorKeyStart);
+      });
+
+      const message = foundErrors.map(([key, error]) => {
+        return error.message;
+      }).join("");
+      const error = message ? {message} : undefined;
+
       return <InputBlock
+        error={error}
         key={key}
         fieldSpec={this.props.fieldSpec}
         label={labelFromFieldName(this.props.fieldName)}
@@ -158,6 +178,12 @@ export default class ZoomProperty extends React.Component {
       >
         Add stop
       </Button>
+      <Button
+        className="maputnik-add-stop"
+        onClick={this.props.onExpressionClick.bind(this)}
+      >
+        Convert to expression
+      </Button>
     </div>
   }
 }

src/components/fields/_labelFromFieldName.js

@@ -1,6 +1,13 @@
 import capitalize from 'lodash.capitalize'
 
 export default function labelFromFieldName(fieldName) {
-  let label = fieldName.split('-').slice(1).join(' ')
+  let label;
-  return capitalize(label)
+  const parts = fieldName.split('-');
+  if (parts.length > 1) {
+    label = fieldName.split('-').slice(1).join(' ');
+  }
+  else {
+    label = fieldName;
+  }
+  return capitalize(label);
 }

src/components/filter/FilterEditor.jsx

@@ -2,13 +2,84 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { combiningFilterOps } from '../../libs/filterops.js'
 
-import {latest} from '@mapbox/mapbox-gl-style-spec'
+import {latest, validate, migrate} from '@mapbox/mapbox-gl-style-spec'
 import DocLabel from '../fields/DocLabel'
 import SelectInput from '../inputs/SelectInput'
+import InputBlock from '../inputs/InputBlock'
 import SingleFilterEditor from './SingleFilterEditor'
 import FilterEditorBlock from './FilterEditorBlock'
 import Button from '../Button'
 import SpecDoc from '../inputs/SpecDoc'
+import ExpressionProperty from '../fields/_ExpressionProperty';
+import {mdiFunctionVariant} from '@mdi/js';
+
+
+function combiningFilter (props) {
+  let filter = props.filter || ['all'];
+
+  if (!Array.isArray(filter)) {
+    return filter;
+  }
+
+  let combiningOp = filter[0];
+  let filters = filter.slice(1);
+
+  if(combiningFilterOps.indexOf(combiningOp) < 0) {
+    combiningOp = 'all';
+    filters = [filter.slice(0)];
+  }
+
+  return [combiningOp, ...filters];
+}
+
+function migrateFilter (filter) {
+  return migrate(createStyleFromFilter(filter)).layers[0].filter;
+}
+
+function createStyleFromFilter (filter) {
+  return {
+    "id": "tmp",
+    "version": 8,
+    "name": "Empty Style",
+    "metadata": {"maputnik:renderer": "mbgljs"},
+    "sources": {
+      "tmp": {
+        "type": "geojson",
+        "data": {}
+      }
+    },
+    "sprite": "",
+    "glyphs": "https://orangemug.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf",
+    "layers": [
+      {
+        id: "tmp",
+        type: "fill",
+        source: "tmp",
+        filter: filter,
+      },
+    ],
+  };
+}
+
+/**
+ * This is doing way more work than we need it to, however validating a whole
+ * style if the only thing that's exported from mapbox-gl-style-spec at the
+ * moment. Not really an issue though as it take ~0.1ms to calculate.
+ */
+function checkIfSimpleFilter (filter) {
+  if (!filter || !combiningFilterOps.includes(filter[0])) {
+    return false;
+  }
+
+  // Because "none" isn't supported by the next expression syntax we can test
+  // with ["none", ...] because it'll return false if it's a new style
+  // expression.
+  const moddedFilter = ["none", ...filter.slice(1)];
+  const tmpStyle = createStyleFromFilter(moddedFilter)
+
+  const errors = validate(tmpStyle);
+  return (errors.length < 1);
+}
 
 function hasCombiningFilter(filter) {
   return combiningFilterOps.indexOf(filter[0]) >= 0
@@ -27,46 +98,37 @@ export default class CombiningFilterEditor extends React.Component {
     /** Properties of the vector layer and the available fields */
     properties: PropTypes.object,
     filter: PropTypes.array,
+    errors: PropTypes.object,
     onChange: PropTypes.func.isRequired,
   }
 
-  constructor () {
+  static defaultProps = {
+    filter: ["all"],
+  }
+
+  constructor (props) {
     super();
     this.state = {
       showDoc: false,
+      displaySimpleFilter: checkIfSimpleFilter(combiningFilter(props)),
     };
   }
 
   // Convert filter to combining filter
-  combiningFilter() {
-    let filter = this.props.filter || ['all']
-
-    let combiningOp = filter[0]
-    let filters = filter.slice(1)
-
-    if(combiningFilterOps.indexOf(combiningOp) < 0) {
-      combiningOp = 'all'
-      filters = [filter.slice(0)]
-    }
-
-    return [combiningOp, ...filters]
-  }
-
   onFilterPartChanged(filterIdx, newPart) {
-    const newFilter = this.combiningFilter().slice(0)
+    const newFilter = combiningFilter(this.props).slice(0)
     newFilter[filterIdx] = newPart
     this.props.onChange(newFilter)
   }
 
   deleteFilterItem(filterIdx) {
-    const newFilter = this.combiningFilter().slice(0)
+    const newFilter = combiningFilter(this.props).slice(0)
-    console.log('Delete', filterIdx, newFilter)
     newFilter.splice(filterIdx + 1, 1)
     this.props.onChange(newFilter)
   }
 
   addFilterItem = () => {
-    const newFilterItem = this.combiningFilter().slice(0)
+    const newFilterItem = combiningFilter(this.props).slice(0)
     newFilterItem.push(['==', 'name', ''])
     this.props.onChange(newFilterItem)
   }
@@ -77,60 +139,171 @@ export default class CombiningFilterEditor extends React.Component {
     });
   }
 
-  render() {
+  makeFilter = () => {
-    const filter = this.combiningFilter()
+    this.setState({
-    let combiningOp = filter[0]
+      displaySimpleFilter: true,
-    let filters = filter.slice(1)
+    })
+  }
 
+  makeExpression = () => {
+    let filter = combiningFilter(this.props);
+    this.props.onChange(migrateFilter(filter));
+    this.setState({
+      displaySimpleFilter: false,
+    })
+  }
+
+  static getDerivedStateFromProps (props, currentState) {
+    const {filter} = props;
+    const displaySimpleFilter = checkIfSimpleFilter(combiningFilter(props));
+
+    // Upgrade but never downgrade
+    if (!displaySimpleFilter && currentState.displaySimpleFilter === true) {
+      return {
+        displaySimpleFilter: false,
+        valueIsSimpleFilter: false,
+      };
+    }
+    else if (displaySimpleFilter && currentState.displaySimpleFilter === false) {
+      return {
+        valueIsSimpleFilter: true,
+      }
+    }
+    else {
+      return {
+        valueIsSimpleFilter: false,
+      };
+    }
+  }
+
+  render() {
+    const {errors} = this.props;
+    const {displaySimpleFilter} = this.state;
     const fieldSpec={
       doc: latest.layer.filter.doc + " Combine multiple filters together by using a compound filter."
     };
+    const defaultFilter = ["all"];
 
-    const editorBlocks = filters.map((f, idx) => {
+    const isNestedCombiningFilter = displaySimpleFilter && hasNestedCombiningFilter(combiningFilter(this.props));
-      return <FilterEditorBlock key={idx} onDelete={this.deleteFilterItem.bind(this, idx)}>
-        <SingleFilterEditor
-          properties={this.props.properties}
-          filter={f}
-          onChange={this.onFilterPartChanged.bind(this, idx + 1)}
-        />
-      </FilterEditorBlock>
-    })
 
-    //TODO: Implement support for nested filter
+    if (isNestedCombiningFilter) {
-    if(hasNestedCombiningFilter(filter)) {
       return <div className="maputnik-filter-editor-unsupported">
-        Nested filters are not supported.
+        <p>
-      </div>
+          Nested filters are not supported.
-    }
+        </p>
-
-    return <div className="maputnik-filter-editor">
-      <div className="maputnik-filter-editor-compound-select" data-wd-key="layer-filter">
-        <DocLabel
-          label={"Compound Filter"}
-          onToggleDoc={this.onToggleDoc}
-          fieldSpec={fieldSpec}
-        />
-        <SelectInput
-          value={combiningOp}
-          onChange={this.onFilterPartChanged.bind(this, 0)}
-          options={[["all", "every filter matches"], ["none", "no filter matches"], ["any", "any filter matches"]]}
-        />
-      </div>
-      {editorBlocks}
-      <div className="maputnik-filter-editor-add-wrapper">
         <Button
-          data-wd-key="layer-filter-button"
+          onClick={this.makeExpression}
-          className="maputnik-add-filter"
+        >
-          onClick={this.addFilterItem}>
+          <svg style={{marginRight: "0.2em", width:"14px", height:"14px", verticalAlign: "middle"}} viewBox="0 0 24 24">
-          Add filter
+            <path fill="currentColor" d={mdiFunctionVariant} />
+          </svg>
+          Upgrade to expression
         </Button>
       </div>
-      <div
+    }
-        className="maputnik-doc-inline"
+    else if (displaySimpleFilter) {
-        style={{display: this.state.showDoc ? '' : 'none'}}
+      const filter = combiningFilter(this.props);
-      >
+      let combiningOp = filter[0];
-        <SpecDoc fieldSpec={fieldSpec} />
+      let filters = filter.slice(1)
-      </div>
+
-    </div>
+      const actions = (
+        <div>
+          <Button
+            onClick={this.makeExpression}
+            className="maputnik-make-zoom-function"
+          >
+            <svg style={{width:"14px", height:"14px", verticalAlign: "middle"}} viewBox="0 0 24 24">
+              <path fill="currentColor" d={mdiFunctionVariant} />
+            </svg>
+          </Button>
+        </div>
+      );
+
+      const editorBlocks = filters.map((f, idx) => {
+        const error = errors[`filter[${idx+1}]`];
+
+        return (
+          <>
+            <FilterEditorBlock key={idx} onDelete={this.deleteFilterItem.bind(this, idx)}>
+              <SingleFilterEditor
+                properties={this.props.properties}
+                filter={f}
+                onChange={this.onFilterPartChanged.bind(this, idx + 1)}
+              />
+            </FilterEditorBlock>
+            {error &&
+              <div className="maputnik-inline-error">{error.message}</div>
+            }
+          </>
+        );
+      })
+
+
+      return (
+        <>
+          <InputBlock
+            key="top"
+            fieldSpec={fieldSpec}
+            label={"Filter"}
+            action={actions}
+          >
+            <SelectInput
+              value={combiningOp}
+              onChange={this.onFilterPartChanged.bind(this, 0)}
+              options={[["all", "every filter matches"], ["none", "no filter matches"], ["any", "any filter matches"]]}
+            />
+          </InputBlock>
+          {editorBlocks}
+          <div
+            key="buttons"
+            className="maputnik-filter-editor-add-wrapper"
+          >
+            <Button
+              data-wd-key="layer-filter-button"
+              className="maputnik-add-filter"
+              onClick={this.addFilterItem}>
+              Add filter
+            </Button>
+          </div>
+          <div
+            key="doc"
+            className="maputnik-doc-inline"
+            style={{display: this.state.showDoc ? '' : 'none'}}
+          >
+            <SpecDoc fieldSpec={fieldSpec} />
+          </div>
+        </>
+      );
+    }
+    else {
+      let {filter} = this.props;
+
+      return (
+        <>
+          <ExpressionProperty
+            onDelete={() => {
+              this.setState({displaySimpleFilter: true});
+              this.props.onChange(defaultFilter);
+            }}
+            fieldName="filter"
+            fieldSpec={fieldSpec}
+            value={filter}
+            errors={errors}
+            onChange={this.props.onChange}
+          />
+          {this.state.valueIsSimpleFilter &&
+            <div className="maputnik-expr-infobox">
+              You&apos;ve entered a old style filter,{' '}
+              <button
+                onClick={this.makeFilter}
+                className="maputnik-expr-infobox__button"
+              >
+                switch to filter editor
+              </button>
+            </div>
+          }
+        </>
+      );
+    }
   }
 }

src/components/icons/LayerIcon.jsx

@@ -6,6 +6,7 @@ import FillIcon from './FillIcon.jsx'
 import SymbolIcon from './SymbolIcon.jsx'
 import BackgroundIcon from './BackgroundIcon.jsx'
 import CircleIcon from './CircleIcon.jsx'
+import MissingIcon from './MissingIcon.jsx'
 
 class LayerIcon extends React.Component {
   static propTypes = {
@@ -25,6 +26,7 @@ class LayerIcon extends React.Component {
       case 'line': return <LineIcon {...iconProps} />
       case 'symbol': return <SymbolIcon {...iconProps} />
       case 'circle': return <CircleIcon {...iconProps} />
+      default: return <MissingIcon {...iconProps} />
     }
   }
 }

src/components/icons/MissingIcon.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import {MdPriorityHigh} from 'react-icons/md'
+
+
+export default class MissingIcon extends React.Component {
+  render() {
+    return (
+      <MdPriorityHigh {...this.props} />
+    )
+  }
+}

src/components/inputs/InputBlock.jsx

@@ -18,6 +18,8 @@ class InputBlock extends React.Component {
     style: PropTypes.object,
     onChange: PropTypes.func,
     fieldSpec: PropTypes.object,
+    wideMode: PropTypes.bool,
+    error: PropTypes.array,
   }
 
   constructor (props) {
@@ -39,10 +41,13 @@ class InputBlock extends React.Component {
   }
 
   render() {
+    const errors = [].concat(this.props.error || []);
+
     return <div style={this.props.style}
       data-wd-key={this.props["data-wd-key"]}
       className={classnames({
         "maputnik-input-block": true,
+        "maputnik-input-block--wide": this.props.wideMode,
         "maputnik-action-block": this.props.action
       })}
       >
@@ -68,6 +73,13 @@ class InputBlock extends React.Component {
       <div className="maputnik-input-block-content">
         {this.props.children}
       </div>
+      {errors.length > 0 &&
+        <div className="maputnik-inline-error">
+          {[].concat(this.props.error).map((error, idx) => {
+            return <div key={idx}>{error.message}</div>
+          })}
+        </div>
+      }
       {this.props.fieldSpec &&
       <div
         className="maputnik-doc-inline"

src/components/inputs/StringInput.jsx

@@ -11,6 +11,8 @@ class StringInput extends React.Component {
     onInput: PropTypes.func,
     multi: PropTypes.bool,
     required: PropTypes.bool,
+    disabled: PropTypes.bool,
+    spellCheck: PropTypes.bool,
   }
 
   static defaultProps = {
@@ -51,9 +53,14 @@ class StringInput extends React.Component {
       ]
     }
 
+    if(!!this.props.disabled) {
+      classes.push("maputnik-string--disabled");
+    }
+
     return React.createElement(tag, {
       "data-wd-key": this.props["data-wd-key"],
-      spellCheck: !(tag === "input"),
+      spellCheck: this.props.hasOwnProperty("spellCheck") ? this.props.spellCheck : !(tag === "input"),
+      disabled: this.props.disabled,
       className: classes.join(" "),
       style: this.props.style,
       value: this.state.value === undefined ? "" : this.state.value,

src/components/layers/JSONEditor.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import classnames from 'classnames';
 
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
@@ -11,44 +12,68 @@ import 'codemirror/addon/edit/matchbrackets'
 import 'codemirror/lib/codemirror.css'
 import 'codemirror/addon/lint/lint.css'
 import jsonlint from 'jsonlint'
-
+import stringifyPretty from 'json-stringify-pretty-compact'
-// This is mainly because of this issue <https://github.com/zaach/jsonlint/issues/57> also the API has changed, see comment in file
+import '../util/codemirror-mgl';
-import '../../vendor/codemirror/addon/lint/json-lint'
 
 
 class JSONEditor extends React.Component {
   static propTypes = {
-    layer: PropTypes.object.isRequired,
+    layer: PropTypes.any.isRequired,
     maxHeight: PropTypes.number,
     onChange: PropTypes.func,
+    lineNumbers: PropTypes.bool,
+    lineWrapping: PropTypes.bool,
+    getValue: PropTypes.func,
+    gutters: PropTypes.array,
+    className: PropTypes.string,
+    onFocus: PropTypes.func,
+    onBlur: PropTypes.func,
+    onJSONValid: PropTypes.func,
+    onJSONInvalid: PropTypes.func,
+    mode: PropTypes.object,
+    lint: PropTypes.oneOfType([
+      PropTypes.bool,
+      PropTypes.object,
+    ]),
+  }
+
+  static defaultProps = {
+    lineNumbers: true,
+    lineWrapping: false,
+    gutters: ["CodeMirror-lint-markers"],
+    getValue: (data) => {
+      return stringifyPretty(data, {indent: 2, maxLength: 40});
+    },
+    onFocus: () => {},
+    onBlur: () => {},
+    onJSONInvalid: () => {},
+    onJSONValid: () => {},
   }
 
   constructor(props) {
     super(props)
     this.state = {
       isEditing: false,
-      prevValue: this.getValue(),
+      prevValue: this.props.getValue(this.props.layer),
     };
   }
 
-  getValue () {
-    return JSON.stringify(this.props.layer, null, 2);
-  }
-
   componentDidMount () {
     this._doc = CodeMirror(this._el, {
-      value: this.getValue(),
+      value: this.props.getValue(this.props.layer),
-      mode: {
+      mode: this.props.mode || {
-        name: "javascript",
+        name: "mgl",
-        json: true
       },
+      lineWrapping: this.props.lineWrapping,
       tabSize: 2,
       theme: 'maputnik',
       viewportMargin: Infinity,
-      lineNumbers: true,
+      lineNumbers: this.props.lineNumbers,
-      lint: true,
+      lint: this.props.lint || {
+        context: "layer"
+      },
       matchBrackets: true,
-      gutters: ["CodeMirror-lint-markers"],
+      gutters: this.props.gutters,
       scrollbarStyle: "null",
     });
 
@@ -58,12 +83,14 @@ class JSONEditor extends React.Component {
   }
 
   onFocus = () => {
+    this.props.onFocus();
     this.setState({
       isEditing: true
     });
   }
 
   onBlur = () => {
+    this.props.onBlur();
     this.setState({
       isEditing: false
     });
@@ -79,7 +106,7 @@ class JSONEditor extends React.Component {
     if (!this.state.isEditing && prevProps.layer !== this.props.layer) {
       this._cancelNextChange = true;
       this._doc.setValue(
-        this.getValue(),
+        this.props.getValue(this.props.layer),
       )
     }
   }
@@ -87,16 +114,28 @@ class JSONEditor extends React.Component {
   onChange = (e) => {
     if (this._cancelNextChange) {
       this._cancelNextChange = false;
+      this.setState({
+        prevValue: this._doc.getValue(),
+      })
       return;
     }
     const newCode = this._doc.getValue();
 
     if (this.state.prevValue !== newCode) {
+      let parsedLayer, err;
       try {
-        const parsedLayer = JSON.parse(newCode)
+        parsedLayer = JSON.parse(newCode);
+      } catch(_err) {
+        err = _err;
+        console.warn(_err)
+      }
+
+      if (err) {
+        this.props.onJSONInvalid();
+      }
+      else {
         this.props.onChange(parsedLayer)
-      } catch(err) {
+        this.props.onJSONValid();
-        console.warn(err)
       }
     }
 
@@ -112,7 +151,7 @@ class JSONEditor extends React.Component {
     }
 
     return <div
-      className="codemirror-container"
+      className={classnames("codemirror-container", this.props.className)}
       ref={(el) => this._el = el}
       style={style}
     />

src/components/layers/LayerEditor.jsx

@@ -20,6 +20,10 @@ import { changeType, changeProperty } from '../../libs/layer'
 import layout from '../../config/layout.json'
 
 
+function getLayoutForType (type) {
+  return layout[type] ? layout[type] : layout.invalid;
+}
+
 function layoutGroups(layerType) {
   const layerGroup = {
     title: 'Layer',
@@ -33,7 +37,9 @@ function layoutGroups(layerType) {
     title: 'JSON Editor',
     type: 'jsoneditor'
   }
-  return [layerGroup, filterGroup].concat(layout[layerType].groups).concat([editorGroup])
+  return [layerGroup, filterGroup]
+    .concat(getLayoutForType(layerType).groups)
+    .concat([editorGroup])
 }
 
 /** Layer editor supporting multiple types of layers. */
@@ -52,6 +58,7 @@ export default class LayerEditor extends React.Component {
     isFirstLayer: PropTypes.bool,
     isLastLayer: PropTypes.bool,
     layerIndex: PropTypes.number,
+    errors: PropTypes.array,
   }
 
   static defaultProps = {
@@ -79,7 +86,7 @@ export default class LayerEditor extends React.Component {
   static getDerivedStateFromProps(props, state) {
     const additionalGroups = { ...state.editorGroups }
 
-    layout[props.layer.type].groups.forEach(group => {
+    getLayoutForType(props.layer.type).groups.forEach(group => {
       if(!(group.title in additionalGroups)) {
         additionalGroups[group.title] = true
       }
@@ -118,6 +125,20 @@ export default class LayerEditor extends React.Component {
     if(this.props.layer.metadata) {
       comment = this.props.layer.metadata['maputnik:comment']
     }
+    const {errors, layerIndex} = this.props;
+
+    const errorData = {};
+    errors.forEach(error => {
+      if (
+        error.parsed &&
+        error.parsed.type === "layer" &&
+        error.parsed.data.index == layerIndex
+      ) {
+        errorData[error.parsed.data.key] = {
+          message: error.parsed.data.message
+        };
+      }
+    })
 
     let sourceLayerIds;
     if(this.props.sources.hasOwnProperty(this.props.layer.source)) {
@@ -129,13 +150,17 @@ export default class LayerEditor extends React.Component {
         <LayerIdBlock
           value={this.props.layer.id}
           wdKey="layer-editor.layer-id"
+          error={errorData.id}
           onChange={newId => this.props.onLayerIdChange(this.props.layer.id, newId)}
         />
         <LayerTypeBlock
+          disabled={true}
+          error={errorData.type}
           value={this.props.layer.type}
           onChange={newType => this.props.onLayerChanged(changeType(this.props.layer, newType))}
         />
         {this.props.layer.type !== 'background' && <LayerSourceBlock
+          error={errorData.sources}
           sourceIds={Object.keys(this.props.sources)}
           value={this.props.layer.source}
           onChange={v => this.changeProperty(null, 'source', v)}
@@ -143,20 +168,24 @@ export default class LayerEditor extends React.Component {
         }
         {['background', 'raster', 'hillshade', 'heatmap'].indexOf(this.props.layer.type) < 0 &&
         <LayerSourceLayerBlock
+          error={errorData['source-layer']}
           sourceLayerIds={sourceLayerIds}
           value={this.props.layer['source-layer']}
           onChange={v => this.changeProperty(null, 'source-layer', v)}
         />
         }
         <MinZoomBlock
+          error={errorData.minzoom}
           value={this.props.layer.minzoom}
           onChange={v => this.changeProperty(null, 'minzoom', v)}
         />
         <MaxZoomBlock
+          error={errorData.maxzoom}
           value={this.props.layer.maxzoom}
           onChange={v => this.changeProperty(null, 'maxzoom', v)}
         />
         <CommentBlock
+          error={errorData.comment}
           value={comment}
           onChange={v => this.changeProperty('metadata', 'maputnik:comment', v == ""  ? undefined : v)}
         />
@@ -164,6 +193,7 @@ export default class LayerEditor extends React.Component {
       case 'filter': return <div>
         <div className="maputnik-filter-editor-wrapper">
           <FilterEditor
+            errors={errorData}
             filter={this.props.layer.filter}
             properties={this.props.vectorLayers[this.props.layer['source-layer']]}
             onChange={f => this.changeProperty(null, 'filter', f)}
@@ -171,6 +201,7 @@ export default class LayerEditor extends React.Component {
         </div>
       </div>
       case 'properties': return <PropertyGroup
+        errors={errorData}
         layer={this.props.layer}
         groupFields={fields}
         spec={this.props.spec}

src/components/layers/LayerList.jsx

@@ -181,10 +181,19 @@ class LayerListContainer extends React.Component {
       layers.forEach((layer, idxInGroup) => {
         const groupIdx = findClosestCommonPrefix(this.props.layers, idx)
 
+        const layerError = this.props.errors.find(error => {
+          return (
+            error.parsed &&
+            error.parsed.type === "layer" &&
+            error.parsed.data.index == idx
+          );
+        });
+
         const listItem = <LayerListItem
           className={classnames({
             'maputnik-layer-list-item-collapsed': layers.length > 1 && this.isCollapsed(groupPrefix, groupIdx) && idx !== this.props.selectedLayerIndex,
-            'maputnik-layer-list-item-group-last': idxInGroup == layers.length - 1 && layers.length > 1
+            'maputnik-layer-list-item-group-last': idxInGroup == layers.length - 1 && layers.length > 1,
+            'maputnik-layer-list-item--error': !!layerError
           })}
           index={idx}
           key={layer.id}

src/components/layers/LayerTypeBlock.jsx

@@ -4,33 +4,49 @@ import PropTypes from 'prop-types'
 import {latest} from '@mapbox/mapbox-gl-style-spec'
 import InputBlock from '../inputs/InputBlock'
 import SelectInput from '../inputs/SelectInput'
+import StringInput from '../inputs/StringInput'
 
 class LayerTypeBlock extends React.Component {
   static propTypes = {
     value: PropTypes.string.isRequired,
     wdKey: PropTypes.string,
     onChange: PropTypes.func.isRequired,
+    error: PropTypes.object,
+    disabled: PropTypes.bool,
+  }
+
+  static defaultProps = {
+    disabled: false,
   }
 
   render() {
     return <InputBlock label={"Type"} fieldSpec={latest.layer.type}
       data-wd-key={this.props.wdKey}
+      error={this.props.error}
     >
-      <SelectInput
+      {this.props.disabled &&
-        options={[
+        <StringInput
-          ['background', 'Background'],
+          value={this.props.value}
-          ['fill', 'Fill'],
+          disabled={true}
-          ['line', 'Line'],
+        />
-          ['symbol', 'Symbol'],
+      }
-          ['raster', 'Raster'],
+      {!this.props.disabled &&
-          ['circle', 'Circle'],
+        <SelectInput
-          ['fill-extrusion', 'Fill Extrusion'],
+          options={[
-          ['hillshade', 'Hillshade'],
+            ['background', 'Background'],
-          ['heatmap', 'Heatmap'],
+            ['fill', 'Fill'],
-        ]}
+            ['line', 'Line'],
-        onChange={this.props.onChange}
+            ['symbol', 'Symbol'],
-        value={this.props.value}
+            ['raster', 'Raster'],
-      />
+            ['circle', 'Circle'],
+            ['fill-extrusion', 'Fill Extrusion'],
+            ['hillshade', 'Hillshade'],
+            ['heatmap', 'Heatmap'],
+          ]}
+          onChange={this.props.onChange}
+          value={this.props.value}
+        />
+      }
     </InputBlock>
   }
 }

src/components/layers/MaxZoomBlock.jsx

@@ -9,10 +9,12 @@ class MaxZoomBlock extends React.Component {
   static propTypes = {
     value: PropTypes.number,
     onChange: PropTypes.func.isRequired,
+    error: PropTypes.object,
   }
 
   render() {
     return <InputBlock label={"Max Zoom"} fieldSpec={latest.layer.maxzoom}
+      error={this.props.error}
       data-wd-key="max-zoom"
     >
       <NumberInput

src/components/layers/MinZoomBlock.jsx

@@ -9,10 +9,12 @@ class MinZoomBlock extends React.Component {
   static propTypes = {
     value: PropTypes.number,
     onChange: PropTypes.func.isRequired,
+    error: PropTypes.object,
   }
 
   render() {
     return <InputBlock label={"Min Zoom"} fieldSpec={latest.layer.minzoom}
+      error={this.props.error}
       data-wd-key="min-zoom"
     >
       <NumberInput

src/components/util/codemirror-mgl.js

@@ -0,0 +1,154 @@
+import jsonlint from 'jsonlint';
+import CodeMirror from 'codemirror';
+import jsonToAst from 'json-to-ast';
+import {expression, validate, latest} from '@mapbox/mapbox-gl-style-spec';
+
+
+CodeMirror.defineMode("mgl", function(config, parserConfig) {
+  // Just using the javascript mode with json enabled. Our logic is in the linter below.
+  return CodeMirror.modes.javascript(
+    {...config, json: true},
+    parserConfig
+  );
+});
+
+CodeMirror.registerHelper("lint", "mgl", function(text, opts, doc) {
+  const found = [];
+  const {parser} = jsonlint;
+  const {context} = opts;
+
+  parser.parseError = function(str, hash) {
+    const loc = hash.loc;
+    found.push({
+      from: CodeMirror.Pos(loc.first_line - 1, loc.first_column),
+      to: CodeMirror.Pos(loc.last_line - 1, loc.last_column),
+      message: str
+    });
+  };
+  try {
+    parser.parse(text);
+  }
+  catch (e) {}
+
+  if (found.length > 0) {
+    // JSON invalid so don't go any further
+    return found;
+  }
+
+  const ast = jsonToAst(text);
+  const input = JSON.parse(text);
+
+  function getArrayPositionalFromAst (node, path) {
+    if (!node) {
+      return undefined;
+    }
+    else if (path.length < 1) {
+      return node;
+    }
+    else if (!node.children) {
+      return undefined;
+    }
+    else {
+      const key = path[0];
+      let newNode;
+      if (key.match(/^[0-9]+$/)) {
+        newNode = node.children[path[0]];
+      }
+      else {
+        newNode = node.children.find(childNode => {
+          return (
+            childNode.key &&
+            childNode.key.type === "Identifier" &&
+            childNode.key.value === key
+          );
+        });
+        if (newNode) {
+          newNode = newNode.value;
+        }
+      }
+      return getArrayPositionalFromAst(newNode, path.slice(1))
+    }
+  }
+
+  let out;
+  if (context === "layer") {
+    // Just an empty style so we can validate a layer.
+    const errors = validate({
+      "version": 8,
+      "name": "Empty Style",
+      "metadata": {},
+      "sources": {},
+      "sprite": "",
+      "glyphs": "https://example.com/glyphs/{fontstack}/{range}.pbf",
+      "layers": [
+        input
+      ]
+    });
+
+    if (errors) {
+      out = {
+        result: "error",
+        value: errors
+          .filter(err => {
+            // Remove missing 'layer source' errors, because we don't include them
+            if (err.message.match(/^layers\[0\]: source ".*" not found$/)) {
+              return false;
+            }
+            else {
+              return true;
+            }
+          })
+          .map(err => {
+            // Remove the 'layers[0].' as we're validating the layer only here
+            const errMessageParts = err.message.replace(/^layers\[0\]./, "").split(":");
+            return {
+              key: errMessageParts[0],
+              message: errMessageParts[1],
+            };
+          })
+      }
+    }
+  }
+  else if (context === "expression") {
+    out = expression.createExpression(input, opts.spec);
+  }
+  else {
+    throw new Error(`Invalid context ${context}`);
+  }
+
+  if (out.result === "error") {
+    const errors = out.value;
+    errors.forEach(error => {
+      const {key, message} = error;
+
+      if (!key) {
+        const lastLineHandle = doc.getLineHandle(doc.lastLine());
+        const err = {
+          from: CodeMirror.Pos(doc.firstLine(), 0),
+          to: CodeMirror.Pos(doc.lastLine(), lastLineHandle.text.length),
+          message: message,
+        }
+        found.push(err);
+      }
+      else if (key) {
+        const path = key.replace(/^\[|\]$/g, "").split(/\.|[\[\]]+/).filter(Boolean)
+        const parsedError = getArrayPositionalFromAst(ast, path);
+        if (!parsedError) {
+          console.warn("Something went wrong parsing error:", error);
+          return;
+        }
+
+        const {loc} = parsedError;
+        const {start, end} = loc;
+
+        found.push({
+          from: CodeMirror.Pos(start.line - 1, start.column),
+          to: CodeMirror.Pos(end.line - 1, end.column),
+          message: message,
+        });
+      }
+    })
+  }
+
+  return found;
+});

src/config/layout.json

@@ -233,5 +233,8 @@
           ]
         }
       ]
+    },
+    "invalid": {
+      "groups": []
     }
 }

src/styles/_components.scss

@@ -146,7 +146,7 @@
 .maputnik-icon-button {
   background-color: transparent;
 
-  &:hover {
+  &:hover:not(:disabled) {
     background-color: transparent;
 
     label,
@@ -182,18 +182,26 @@
 .maputnik-action-block {
   .maputnik-input-block-label {
     display: inline-block;
-    width: 35%;
+    width: 32%;
   }
 
   .maputnik-input-block-action {
     vertical-align: top;
     display: inline-block;
-    width: 15%;
+    width: 18%;
   }
 
   .maputnik-input-block-action > div {
     text-align: right;
   }
+
+}
+
+.maputnik-data-spec-block,
+.maputnik-zoom-spec-property {
+  .maputnik-inline-error {
+    margin-left: 32%;
+  }
 }
 
 // SPACE HELPER
@@ -208,6 +216,12 @@
   &-error {
     color: $color-red;
   }
+
+  &__switch-button {
+    all: unset;
+    text-decoration: underline;
+    cursor: pointer;
+  }
 }
 
 .maputnik-dialog {
@@ -238,3 +252,51 @@
     }
   }
 }
+
+.maputnik-inline-error {
+  color: #a4a4a4;
+  padding: 0.4em 0.4em;
+  font-size: 0.9em;
+  border: solid 1px $color-red;
+  border-radius: 2px;
+  margin: $margin-2 0px;
+}
+
+.maputnik-expression-editor {
+  border: solid 1px $color-gray;
+}
+
+.maputnik-input-block--wide {
+  .maputnik-input-block-content {
+    display: block;
+    width: auto;
+  }
+
+  .maputnik-input-block-label {
+    width: 82%;
+  }
+
+  .maputnik-input-block-action {
+    text-align: right;
+  }
+}
+
+.maputnik-expr-infobox {
+  font-size: $font-size-6;
+  background: $color-midgray;
+  padding: $margin-2;
+  border-radius: 2px;
+  border-top-right-radius: 0px;
+  border-top-left-radius: 0px;
+  color: $color-white;
+}
+
+.maputnik-expr-infobox__button {
+  background: none;
+  border: none;
+  padding: 0;
+  text-decoration: underline;
+  color: currentColor;
+  cursor: pointer;
+}
+

src/styles/_filtereditor.scss

@@ -1,5 +1,10 @@
 .maputnik-filter-editor-wrapper {
   padding: $margin-3;
+  overflow: hidden;
+
+  .maputnik-input-block {
+    margin: 0;
+  }
 }
 
 .maputnik-filter-editor {

src/styles/_input.scss

@@ -25,6 +25,11 @@
     resize: vertical;
     height: 78px;
   }
+
+  &--disabled {
+    background: transparent;
+    border: none;
+  }
 }
 
 .maputnik-number-container {

src/styles/_layer.scss

@@ -99,6 +99,11 @@
     }
   }
 
+
+  .maputnik-layer-list-item--error {
+    color: $color-red;
+  }
+
   &-item-selected {
     color: $color-white;
   }

src/styles/_layout.scss

@@ -38,7 +38,6 @@
 
   &-bottom {
     position: fixed;
-    height: 50px;
     bottom: 0;
     right: 0;
     z-index: 1;

src/styles/_zoomproperty.scss

@@ -2,9 +2,8 @@
 .maputnik-make-zoom-function {
   background-color: transparent;
   display: inline-block;
-  padding-bottom: 0;
-  padding-top: 0;
   vertical-align: middle;
+  padding: 0 $margin-2 0 0;
 
   @extend .maputnik-icon-button;
 }
@@ -63,9 +62,8 @@
 .maputnik-make-data-function {
   background-color: transparent;
   display: inline-block;
-  padding-bottom: 0;
-  padding-top: 0;
   vertical-align: middle;
+  padding: 0 $margin-2 0 0;
 
   @extend .maputnik-icon-button;
 }
@@ -98,10 +96,6 @@
     .maputnik-data-spec-property-input {
       width: 75%;
       display: inline-block;
-
-      .maputnik-string {
-        margin-bottom: 3%;
-      }
     }
   }
 }

src/styles/index.scss

@@ -34,3 +34,4 @@
   width: 14px;
   height: 14px;
 }
+

src/vendor/codemirror/addon/lint/json-lint.js

@@ -1,31 +0,0 @@
-// CodeMirror, copyright (c) by Marijn Haverbeke and others
-// Distributed under an MIT license: http://codemirror.net/LICENSE
-
-// Depends on fork of jsonlint from <https://github.com/josdejong/jsonlint>
-// becuase of <https://github.com/zaach/jsonlint/issues/57>
-var jsonlint   = require("jsonlint");
-var CodeMirror = require("codemirror");
-
-CodeMirror.registerHelper("lint", "json", function(text) {
-  var found = [];
-
-  // NOTE: This was modified from the original to remove the global, also the
-  // old jsonlint API was 'jsonlint.parseError' its now
-  // 'jsonlint.parser.parseError'
-  jsonlint.parser.parseError = function(str, hash) {
-    var loc = hash.loc;
-    found.push({
-      from:    CodeMirror.Pos(loc.first_line - 1, loc.first_column),
-      to:      CodeMirror.Pos(loc.last_line  - 1, loc.last_column),
-      message: str
-    });
-  };
-
-  try {
-    jsonlint.parse(text);
-  }
-  catch(e) {
-    // Do nothing we catch the error above
-  }
-  return found;
-});