Add lint to CI and fix errors (#853)

Adds lint to CI and fixes errors. I'm not sure I'm fully proud of all the solutions there. But there's no lint issues and the lint is being checked as part of the CI. --------- Co-authored-by: Yuri Astrakhan <yuriastrakhan@gmail.com>
2026-01-05 04:50:01 +00:00 · 2023-12-26 23:13:22 +02:00
parent a324ddb654
commit a22476cab2
55 changed files with 831 additions and 691 deletions
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -334,7 +334,7 @@ export default class App extends React.Component<any, AppState> {
    const metadata: {[key: string]: string} = this.state.mapStyle.metadata || {} as any
    const accessToken = metadata['maputnik:openmaptiles_access_token'] || tokens.openmaptiles

-    let glyphUrl = (typeof urlTemplate === 'string')? urlTemplate.replace('{key}', accessToken): urlTemplate;
+    const glyphUrl = (typeof urlTemplate === 'string')? urlTemplate.replace('{key}', accessToken): urlTemplate;
    downloadGlyphsMetadata(glyphUrl, fonts => {
      this.setState({ spec: updateRootSpec(this.state.spec, 'glyphs', fonts)})
    })
@@ -402,7 +402,7 @@ export default class App extends React.Component<any, AppState> {
      // Special case: Duplicate layer id
      const dupMatch = error.message.match(/layers\[(\d+)\]: (duplicate layer id "?(.*)"?, previously used)/);
      if (dupMatch) {
-        const [_matchStr, index, message] = dupMatch;
+        const [, index, message] = dupMatch;
        return {
          message: error.message,
          parsed: {
@@ -419,7 +419,7 @@ export default class App extends React.Component<any, AppState> {
      // Special case: Invalid source
      const invalidSourceMatch = error.message.match(/layers\[(\d+)\]: (source "(?:.*)" not found)/);
      if (invalidSourceMatch) {
-        const [_matchStr, index, message] = invalidSourceMatch;
+        const [, index, message] = invalidSourceMatch;
        return {
          message: error.message,
          parsed: {
@@ -435,7 +435,7 @@ export default class App extends React.Component<any, AppState> {

      const layerMatch = error.message.match(/layers\[(\d+)\]\.(?:(\S+)\.)?(\S+): (.*)/);
      if (layerMatch) {
-        const [_matchStr, index, group, property, message] = layerMatch;
+        const [, index, group, property, message] = layerMatch;
        const key = (group && property) ? [group, property].join(".") : property;
        return {
          message: error.message,
@@ -466,7 +466,7 @@ export default class App extends React.Component<any, AppState> {
          try {
            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];
+            const unsetPath = objPath.match(/^\S+?\[\d+\]\.[^[]+/)![0];
            unset(dirtyMapStyle, unsetPath);
          }
          catch (err) {
@@ -547,14 +547,14 @@ export default class App extends React.Component<any, AppState> {
  }

  onLayerDestroy = (index: number) => {
-    let layers = this.state.mapStyle.layers;
+    const layers = this.state.mapStyle.layers;
    const remainingLayers = layers.slice(0);
    remainingLayers.splice(index, 1);
    this.onLayersChange(remainingLayers);
  }

  onLayerCopy = (index: number) => {
-    let layers = this.state.mapStyle.layers;
+    const layers = this.state.mapStyle.layers;
    const changedLayers = layers.slice(0)

    const clonedLayer = cloneDeep(changedLayers[index])
@@ -564,7 +564,7 @@ export default class App extends React.Component<any, AppState> {
  }

  onLayerVisibilityToggle = (index: number) => {
-    let layers = this.state.mapStyle.layers;
+    const layers = this.state.mapStyle.layers;
    const changedLayers = layers.slice(0)

    const layer = { ...changedLayers[index] }
@@ -624,11 +624,11 @@ export default class App extends React.Component<any, AppState> {
  fetchSources() {
    const sourceList: {[key: string]: any} = {};

-    for(let [key, val] of Object.entries(this.state.mapStyle.sources)) {
+    for(const [key, val] of Object.entries(this.state.mapStyle.sources)) {
      if(
-        !this.state.sources.hasOwnProperty(key) &&
+        !Object.prototype.hasOwnProperty.call(this.state.sources, key) &&
        val.type === "vector" &&
-        val.hasOwnProperty("url")
+        Object.prototype.hasOwnProperty.call(val, "url")
      ) {
        sourceList[key] = {
          type: val.type,
@@ -646,30 +646,30 @@ export default class App extends React.Component<any, AppState> {
        fetch(url!, {
          mode: 'cors',
        })
-        .then(response => response.json())
-        .then(json => {
+          .then(response => response.json())
+          .then(json => {

-          if(!json.hasOwnProperty("vector_layers")) {
-            return;
-          }
+            if(!Object.prototype.hasOwnProperty.call(json, "vector_layers")) {
+              return;
+            }

-          // Create new objects before setState
-          const sources = Object.assign({}, {
-            [key]: this.state.sources[key],
+            // Create new objects before setState
+            const sources = Object.assign({}, {
+              [key]: this.state.sources[key],
+            });
+
+            for(const layer of json.vector_layers) {
+              (sources[key] as any).layers.push(layer.id)
+            }
+
+            console.debug("Updating source: "+key);
+            this.setState({
+              sources: sources
+            });
+          })
+          .catch(err => {
+            console.error("Failed to process sources for '%s'", url, err);
          });
-
-          for(let layer of json.vector_layers) {
-            (sources[key] as any).layers.push(layer.id)
-          }
-
-          console.debug("Updating source: "+key);
-          this.setState({
-            sources: sources
-          });
-        })
-        .catch(err => {
-          console.error("Failed to process sources for '%s'", url, err);
-        });
      }
      else {
        sourceList[key] = this.state.sources[key] || this.state.mapStyle.sources[key];
@@ -760,8 +760,8 @@ export default class App extends React.Component<any, AppState> {
    url.searchParams.set("layer", `${hashVal}~${selectedLayerIndex}`);

    const openModals = Object.entries(isOpen)
-    .map(([key, val]) => (val === true ? key : null))
-    .filter(val => val !== null);
+      .map(([key, val]) => (val === true ? key : null))
+      .filter(val => val !== null);

    if (openModals.length > 0) {
      url.searchParams.set("modal", openModals.join(","));
--- a/src/components/AppLayout.tsx
+++ b/src/components/AppLayout.tsx
@@ -35,8 +35,8 @@ class AppLayout extends React.Component<AppLayoutProps> {
      </div>
      {this.props.map}
      {this.props.bottom && <div className="maputnik-layout-bottom">
-          {this.props.bottom}
-        </div>
+        {this.props.bottom}
+      </div>
      }
      {this.props.modals}
    </div>
--- a/src/components/Block.tsx
+++ b/src/components/Block.tsx
@@ -56,7 +56,7 @@ export default class Block extends React.Component<BlockProps, BlockState> {
    if (event.nativeEvent.target.nodeName !== "INPUT" && !contains) {
      event.stopPropagation();
    }
-        event.preventDefault();
+    event.preventDefault();
  }

  render() {
--- a/src/components/Doc.tsx
+++ b/src/components/Doc.tsx
@@ -71,7 +71,7 @@ export default class Doc extends React.Component<DocProps> {
                    <tr key={key}>
                      <td>{key}</td>
                      {Object.keys(headers).map((k) => {
-                        if (supportObj.hasOwnProperty(k)) {
+                        if (Object.prototype.hasOwnProperty.call(supportObj, k)) {
                          return <td key={k}>{supportObj[k as keyof typeof headers]}</td>;
                        }
                        else {
--- a/src/components/FieldFunction.tsx
+++ b/src/components/FieldFunction.tsx
@@ -40,7 +40,7 @@ function isIdentityProperty(value: any) {
  return (
    typeof(value) === 'object' &&
    value.type === "identity" &&
-    value.hasOwnProperty("property")
+    Object.prototype.hasOwnProperty.call(value, "property")
  );
 }

--- a/src/components/Fieldset.tsx
+++ b/src/components/Fieldset.tsx
@@ -1,6 +1,7 @@
 import React, { ReactElement } from 'react'
 import FieldDocLabel from './FieldDocLabel'
 import Doc from './Doc'
+import generateUniqueId from '../libs/document-uid';

 type FieldsetProps = {
  label?: string,
@@ -12,14 +13,12 @@ type FieldsetState = {
  showDoc: boolean
 };

-let IDX = 0;
-
 export default class Fieldset extends React.Component<FieldsetProps, FieldsetState> {
  _labelId: string;

  constructor (props: FieldsetProps) {
    super(props);
-    this._labelId = `fieldset_label_${(IDX++)}`;
+    this._labelId = generateUniqueId(`fieldset_label_`);
    this.state = {
      showDoc: false,
    }
--- a/src/components/FilterEditor.tsx
+++ b/src/components/FilterEditor.tsx
@@ -16,7 +16,7 @@ import ExpressionProperty from './_ExpressionProperty';


 function combiningFilter(props: FilterEditorProps): LegacyFilterSpecification | ExpressionSpecification {
-  let filter = props.filter || ['all'];
+  const filter = props.filter || ['all'];

  if (!Array.isArray(filter)) {
    return filter;
@@ -148,7 +148,7 @@ export default class FilterEditor extends React.Component<FilterEditorProps, Fil
  }

  makeExpression = () => {
-    let filter = combiningFilter(this.props);
+    const filter = combiningFilter(this.props);
    this.props.onChange(migrateFilter(filter));
    this.setState({
      displaySimpleFilter: false,
@@ -205,8 +205,8 @@ export default class FilterEditor extends React.Component<FilterEditorProps, Fil
    }
    else if (displaySimpleFilter) {
      const filter = combiningFilter(this.props);
-      let combiningOp = filter[0];
-      let filters = filter.slice(1) as (LegacyFilterSpecification | ExpressionSpecification)[];
+      const combiningOp = filter[0];
+      const filters = filter.slice(1) as (LegacyFilterSpecification | ExpressionSpecification)[];

      const actions = (
        <div>
@@ -282,7 +282,7 @@ export default class FilterEditor extends React.Component<FilterEditorProps, Fil
      );
    }
    else {
-      let {filter} = this.props;
+      const {filter} = this.props;

      return (
        <>
--- a/src/components/IconLayer.tsx
+++ b/src/components/IconLayer.tsx
@@ -17,16 +17,16 @@ export default class IconLayer extends React.Component<IconLayerProps> {
  render() {
    const iconProps = { style: this.props.style }
    switch(this.props.type) {
-      case 'fill-extrusion': return <IconBackground {...iconProps} />
-      case 'raster': return <IconFill {...iconProps} />
-      case 'hillshade': return <IconFill {...iconProps} />
-      case 'heatmap': return <IconFill {...iconProps} />
-      case 'fill': return <IconFill {...iconProps} />
-      case 'background': return <IconBackground {...iconProps} />
-      case 'line': return <IconLine {...iconProps} />
-      case 'symbol': return <IconSymbol {...iconProps} />
-      case 'circle': return <IconCircle {...iconProps} />
-      default: return <IconMissing {...iconProps} />
+    case 'fill-extrusion': return <IconBackground {...iconProps} />
+    case 'raster': return <IconFill {...iconProps} />
+    case 'hillshade': return <IconFill {...iconProps} />
+    case 'heatmap': return <IconFill {...iconProps} />
+    case 'fill': return <IconFill {...iconProps} />
+    case 'background': return <IconBackground {...iconProps} />
+    case 'line': return <IconLine {...iconProps} />
+    case 'symbol': return <IconSymbol {...iconProps} />
+    case 'circle': return <IconCircle {...iconProps} />
+    default: return <IconMissing {...iconProps} />
    }
  }
 }
--- a/src/components/InputAutocomplete.tsx
+++ b/src/components/InputAutocomplete.tsx
@@ -91,7 +91,7 @@ export default class InputAutocomplete extends React.Component<InputAutocomplete
              "maputnik-autocomplete-menu-item-selected": isHighlighted,
            })}
          >
-           {item[1]}
+            {item[1]}
          </div>
        )}
      />
--- a/src/components/InputCheckbox.tsx
+++ b/src/components/InputCheckbox.tsx
@@ -27,8 +27,8 @@ export default class InputCheckbox extends React.Component<InputCheckboxProps> {
      />
      <div className="maputnik-checkbox-box">
        <svg style={{
-            display: this.props.value ? 'inline' : 'none'
-          }} className="maputnik-checkbox-icon" viewBox='0 0 32 32'>
+          display: this.props.value ? 'inline' : 'none'
+        }} className="maputnik-checkbox-icon" viewBox='0 0 32 32'>
          <path d='M1 14 L5 10 L13 18 L27 4 L31 8 L13 26 z' />
        </svg>
      </div>
--- a/src/components/InputColor.tsx
+++ b/src/components/InputColor.tsx
@@ -87,8 +87,8 @@ export default class InputColor extends React.Component<InputColorProps> {
    const picker = <div
      className="maputnik-color-picker-offset"
      style={{
-          position: 'fixed',
-          zIndex: 1,
+        position: 'fixed',
+        zIndex: 1,
        left: offset.left,
        top: offset.top,
      }}>
@@ -110,7 +110,7 @@ export default class InputColor extends React.Component<InputColorProps> {
      />
    </div>

-    var swatchStyle = {
+    const swatchStyle = {
      backgroundColor: this.props.value
    };

--- a/src/components/InputDynamicArray.tsx
+++ b/src/components/InputDynamicArray.tsx
@@ -100,7 +100,7 @@ export default class FieldDynamicArray extends React.Component<FieldDynamicArray
        style={this.props.style}
        key={i}
        className="maputnik-array-block"
-        >
+      >
        <div className="maputnik-array-block-action">
          {deleteValueBtn}
        </div>
--- a/src/components/InputNumber.tsx
+++ b/src/components/InputNumber.tsx
@@ -1,6 +1,5 @@
 import React, { BaseSyntheticEvent } from 'react'
-
-let IDX = 0;
+import generateUniqueId from '../libs/document-uid';

 export type InputNumberProps = {
  value?: number
@@ -32,7 +31,7 @@ export default class InputNumber extends React.Component<InputNumberProps, Input
  constructor(props: InputNumberProps) {
    super(props)
    this.state = {
-      uuid: IDX++,
+      uuid: +generateUniqueId(),
      editing: false,
      value: props.value,
      dirtyValue: props.value,
@@ -140,7 +139,7 @@ export default class InputNumber extends React.Component<InputNumberProps, Input
        }
        else {
          value = value + (step - snap);
-        };
+        }
      }
    }

@@ -155,7 +154,8 @@ export default class InputNumber extends React.Component<InputNumberProps, Input

  render() {
    if(
-      this.props.hasOwnProperty("min") && this.props.hasOwnProperty("max") &&
+      Object.prototype.hasOwnProperty.call(this.props, "min") && 
+      Object.prototype.hasOwnProperty.call(this.props, "max") &&
      this.props.min !== undefined && this.props.max !== undefined &&
      this.props.allowRange
    ) {
--- a/src/components/InputSpec.tsx
+++ b/src/components/InputSpec.tsx
@@ -53,66 +53,67 @@ export default class SpecField extends React.Component<SpecFieldProps> {
      'aria-label': this.props['aria-label'],
    }
    switch(this.props.fieldSpec?.type) {
-      case 'number': return (
-        <InputNumber
-          {...commonProps as InputNumberProps}
-          min={this.props.fieldSpec.minimum}
-          max={this.props.fieldSpec.maximum}
-        />
-      )
-      case 'enum':
-        const options = Object.keys(this.props.fieldSpec.values || []).map(v => [v, capitalize(v)])
+    case 'number': return (
+      <InputNumber
+        {...commonProps as InputNumberProps}
+        min={this.props.fieldSpec.minimum}
+        max={this.props.fieldSpec.maximum}
+      />
+    )
+    case 'enum': {
+      const options = Object.keys(this.props.fieldSpec.values || []).map(v => [v, capitalize(v)])

-        return <InputEnum
-          {...commonProps as Omit<InputEnumProps, "options">}
-          options={options}
+      return <InputEnum
+        {...commonProps as Omit<InputEnumProps, "options">}
+        options={options}
+      />
+    }
+    case 'resolvedImage':
+    case 'formatted':
+    case 'string':
+      if (iconProperties.indexOf(this.props.fieldName!) >= 0) {
+        const options = this.props.fieldSpec.values || [];
+        return <InputAutocomplete
+          {...commonProps as Omit<InputAutocompleteProps, "options">}
+          options={options.map(f => [f, f])}
        />
-      case 'resolvedImage':
-      case 'formatted':
-      case 'string':
-        if (iconProperties.indexOf(this.props.fieldName!) >= 0) {
-          const options = this.props.fieldSpec.values || [];
-          return <InputAutocomplete
-            {...commonProps as Omit<InputAutocompleteProps, "options">}
-            options={options.map(f => [f, f])}
+      } else {
+        return <InputString
+          {...commonProps as InputStringProps}
+        />
+      }
+    case 'color': return (
+      <InputColor
+        {...commonProps as InputColorProps}
+      />
+    )
+    case 'boolean': return (
+      <InputCheckbox
+        {...commonProps as InputCheckboxProps}
+      />
+    )
+    case 'array':
+      if(this.props.fieldName === 'text-font') {
+        return <InputFont
+          {...commonProps as FieldFontProps}
+          fonts={this.props.fieldSpec.values}
+        />
+      } else {
+        if (this.props.fieldSpec.length) {
+          return <InputArray
+            {...commonProps as FieldArrayProps}
+            type={this.props.fieldSpec.value}
+            length={this.props.fieldSpec.length}
          />
        } else {
-          return <InputString
-            {...commonProps as InputStringProps}
+          return <InputDynamicArray
+            {...commonProps as FieldDynamicArrayProps}
+            fieldSpec={this.props.fieldSpec}
+            type={this.props.fieldSpec.value as FieldDynamicArrayProps['type']}
          />
        }
-      case 'color': return (
-        <InputColor
-          {...commonProps as InputColorProps}
-        />
-      )
-      case 'boolean': return (
-        <InputCheckbox
-          {...commonProps as InputCheckboxProps}
-        />
-      )
-      case 'array':
-        if(this.props.fieldName === 'text-font') {
-          return <InputFont
-            {...commonProps as FieldFontProps}
-            fonts={this.props.fieldSpec.values}
-          />
-        } else {
-          if (this.props.fieldSpec.length) {
-            return <InputArray
-              {...commonProps as FieldArrayProps}
-              type={this.props.fieldSpec.value}
-              length={this.props.fieldSpec.length}
-            />
-          } else {
-            return <InputDynamicArray
-              {...commonProps as FieldDynamicArrayProps}
-              fieldSpec={this.props.fieldSpec}
-              type={this.props.fieldSpec.value as FieldDynamicArrayProps['type']}
-            />
-          }
-        }
-      default: return null
+      }
+    default: return null
    }
  }

--- a/src/components/InputString.tsx
+++ b/src/components/InputString.tsx
@@ -46,7 +46,7 @@ export default class InputString extends React.Component<InputStringProps, Input
    let tag;
    let classes;

-    if(!!this.props.multi) {
+    if(this.props.multi) {
      tag = "textarea"
      classes = [
        "maputnik-string",
@@ -60,14 +60,14 @@ export default class InputString extends React.Component<InputStringProps, Input
      ]
    }

-    if(!!this.props.disabled) {
+    if(this.props.disabled) {
      classes.push("maputnik-string--disabled");
    }

    return React.createElement(tag, {
      "aria-label": this.props["aria-label"],
      "data-wd-key": this.props["data-wd-key"],
-      spellCheck: this.props.hasOwnProperty("spellCheck") ? this.props.spellCheck : !(tag === "input"),
+      spellCheck: Object.prototype.hasOwnProperty.call(this.props, "spellCheck") ? this.props.spellCheck : !(tag === "input"),
      disabled: this.props.disabled,
      className: classes.join(" "),
      style: this.props.style,
--- a/src/components/InputUrl.tsx
+++ b/src/components/InputUrl.tsx
@@ -26,8 +26,8 @@ function validate(url: string) {
      <SmallError>
        Must provide protocol {
          isSsl
-          ? <code>https://</code>
-          : <><code>http://</code> or <code>https://</code></>
+            ? <code>https://</code>
+            : <><code>http://</code> or <code>https://</code></>
        }
      </SmallError>
    );
--- a/src/components/LayerEditor.tsx
+++ b/src/components/LayerEditor.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, {type JSX} from 'react'
 import PropTypes from 'prop-types'
 import { Wrapper, Button, Menu, MenuItem } from 'react-aria-menubutton'
 import {Accordion} from 'react-accessible-accordion';
@@ -150,87 +150,87 @@ export default class LayerEditor extends React.Component<LayerEditorProps, Layer

    let sourceLayerIds;
    const layer = this.props.layer as Exclude<LayerSpecification, BackgroundLayerSpecification>;
-    if(this.props.sources.hasOwnProperty(layer.source)) {
+    if(Object.prototype.hasOwnProperty.call(this.props.sources, layer.source)) {
      sourceLayerIds = (this.props.sources[layer.source] as any).layers;
    }

    switch(type) {
-      case 'layer': return <div>
-        <FieldId
-          value={this.props.layer.id}
-          wdKey="layer-editor.layer-id"
-          error={errorData.id}
-          onChange={newId => this.props.onLayerIdChange(this.props.layerIndex, this.props.layer.id, newId)}
-        />
-        <FieldType
-          disabled={true}
-          error={errorData.type}
-          value={this.props.layer.type}
-          onChange={newType => this.props.onLayerChanged(
-            this.props.layerIndex,
-            changeType(this.props.layer, newType)
-          )}
-        />
-        {this.props.layer.type !== 'background' && <FieldSource
-          error={errorData.source}
-          sourceIds={Object.keys(this.props.sources!)}
-          value={this.props.layer.source}
-          onChange={v => this.changeProperty(null, 'source', v)}
-        />
-        }
-        {['background', 'raster', 'hillshade', 'heatmap'].indexOf(this.props.layer.type) < 0 &&
+    case 'layer': return <div>
+      <FieldId
+        value={this.props.layer.id}
+        wdKey="layer-editor.layer-id"
+        error={errorData.id}
+        onChange={newId => this.props.onLayerIdChange(this.props.layerIndex, this.props.layer.id, newId)}
+      />
+      <FieldType
+        disabled={true}
+        error={errorData.type}
+        value={this.props.layer.type}
+        onChange={newType => this.props.onLayerChanged(
+          this.props.layerIndex,
+          changeType(this.props.layer, newType)
+        )}
+      />
+      {this.props.layer.type !== 'background' && <FieldSource
+        error={errorData.source}
+        sourceIds={Object.keys(this.props.sources!)}
+        value={this.props.layer.source}
+        onChange={v => this.changeProperty(null, 'source', v)}
+      />
+      }
+      {['background', 'raster', 'hillshade', 'heatmap'].indexOf(this.props.layer.type) < 0 &&
        <FieldSourceLayer
          error={errorData['source-layer']}
          sourceLayerIds={sourceLayerIds}
          value={(this.props.layer as any)['source-layer']}
          onChange={v => this.changeProperty(null, 'source-layer', v)}
        />
-        }
-        <FieldMinZoom
-          error={errorData.minzoom}
-          value={this.props.layer.minzoom}
-          onChange={v => this.changeProperty(null, 'minzoom', v)}
-        />
-        <FieldMaxZoom
-          error={errorData.maxzoom}
-          value={this.props.layer.maxzoom}
-          onChange={v => this.changeProperty(null, 'maxzoom', v)}
-        />
-        <FieldComment
-          error={errorData.comment}
-          value={comment}
-          onChange={v => this.changeProperty('metadata', 'maputnik:comment', v == ""  ? undefined : v)}
-        />
-      </div>
-      case 'filter': return <div>
-        <div className="maputnik-filter-editor-wrapper">
-          <FilterEditor
-            errors={errorData}
-            filter={(this.props.layer as any).filter}
-            properties={this.props.vectorLayers[(this.props.layer as any)['source-layer']]}
-            onChange={f => this.changeProperty(null, 'filter', f)}
-          />
-        </div>
-      </div>
-      case 'properties':
-        return <PropertyGroup
+      }
+      <FieldMinZoom
+        error={errorData.minzoom}
+        value={this.props.layer.minzoom}
+        onChange={v => this.changeProperty(null, 'minzoom', v)}
+      />
+      <FieldMaxZoom
+        error={errorData.maxzoom}
+        value={this.props.layer.maxzoom}
+        onChange={v => this.changeProperty(null, 'maxzoom', v)}
+      />
+      <FieldComment
+        error={errorData.comment}
+        value={comment}
+        onChange={v => this.changeProperty('metadata', 'maputnik:comment', v == ""  ? undefined : v)}
+      />
+    </div>
+    case 'filter': return <div>
+      <div className="maputnik-filter-editor-wrapper">
+        <FilterEditor
          errors={errorData}
-          layer={this.props.layer}
-          groupFields={fields!}
-          spec={this.props.spec}
-          onChange={this.changeProperty.bind(this)}
+          filter={(this.props.layer as any).filter}
+          properties={this.props.vectorLayers[(this.props.layer as any)['source-layer']]}
+          onChange={f => this.changeProperty(null, 'filter', f)}
        />
-      case 'jsoneditor':
-        return <FieldJson
-          layer={this.props.layer}
-          onChange={(layer) => {
-            this.props.onLayerChanged(
-              this.props.layerIndex,
-              layer
-            );
-          }}
-        />
-        default: return <></>
+      </div>
+    </div>
+    case 'properties':
+      return <PropertyGroup
+        errors={errorData}
+        layer={this.props.layer}
+        groupFields={fields!}
+        spec={this.props.spec}
+        onChange={this.changeProperty.bind(this)}
+      />
+    case 'jsoneditor':
+      return <FieldJson
+        layer={this.props.layer}
+        onChange={(layer) => {
+          this.props.onLayerChanged(
+            this.props.layerIndex,
+            layer
+          );
+        }}
+      />
+    default: return <></>
    }
  }

--- a/src/components/LayerEditorGroup.tsx
+++ b/src/components/LayerEditorGroup.tsx
@@ -5,10 +5,10 @@ import {
  mdiMenuUp
 } from '@mdi/js';
 import {
-    AccordionItem,
-    AccordionItemHeading,
-    AccordionItemButton,
-    AccordionItemPanel,
+  AccordionItem,
+  AccordionItemHeading,
+  AccordionItemButton,
+  AccordionItemPanel,
 } from 'react-accessible-accordion';


--- a/src/components/LayerList.tsx
+++ b/src/components/LayerList.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, {type JSX} from 'react'
 import classnames from 'classnames'
 import lodash from 'lodash';

@@ -8,26 +8,8 @@ import ModalAdd from './ModalAdd'

 import {SortEndHandler, SortableContainer} from 'react-sortable-hoc';
 import type {LayerSpecification} from 'maplibre-gl';
-
-function layerPrefix(name: string) {
-  return name.replace(' ', '-').replace('_', '-').split('-')[0]
-}
-
-function findClosestCommonPrefix(layers: LayerSpecification[], idx: number) {
-  const currentLayerPrefix = layerPrefix(layers[idx].id)
-  let closestIdx = idx
-  for (let i = idx; i > 0; i--) {
-    const previousLayerPrefix = layerPrefix(layers[i-1].id)
-    if(previousLayerPrefix === currentLayerPrefix) {
-      closestIdx = i - 1
-    } else {
-      return closestIdx
-    }
-  }
-  return closestIdx
-}
-
-let UID = 0;
+import generateUniqueId from '../libs/document-uid';
+import { findClosestCommonPrefix, layerPrefix } from '../libs/layer';

 type LayerListContainerProps = {
  layers: LayerSpecification[]
@@ -64,7 +46,7 @@ class LayerListContainer extends React.Component<LayerListContainerProps, LayerL
      collapsedGroups: {},
      areAllGroupsExpanded: false,
      keys: {
-        add: UID++,
+        add: +generateUniqueId(),
      },
      isOpen: {
        add: false,
@@ -76,7 +58,7 @@ class LayerListContainer extends React.Component<LayerListContainerProps, LayerL
    this.setState({
      keys: {
        ...this.state.keys,
-        [modalName]: UID++,
+        [modalName]: +generateUniqueId(),
      },
      isOpen: {
        ...this.state.isOpen,
@@ -88,7 +70,7 @@ class LayerListContainer extends React.Component<LayerListContainerProps, LayerL
  toggleLayers = () => {
    let idx = 0

-    let newGroups: {[key:string]: boolean} = {}
+    const newGroups: {[key:string]: boolean} = {}

    this.groupedLayers().forEach(layers => {
      const groupPrefix = layerPrefix(layers[0].id)
@@ -284,12 +266,12 @@ class LayerListContainer extends React.Component<LayerListContainerProps, LayerL
      ref={this.scrollContainerRef}
    >
      <ModalAdd
-          key={this.state.keys.add}
-          layers={this.props.layers}
-          sources={this.props.sources}
-          isOpen={this.state.isOpen.add}
-          onOpenToggle={this.toggleModal.bind(this, 'add')}
-          onLayersChange={this.props.onLayersChange}
+        key={this.state.keys.add}
+        layers={this.props.layers}
+        sources={this.props.sources}
+        isOpen={this.state.isOpen.add}
+        onOpenToggle={this.toggleModal.bind(this, 'add')}
+        onLayersChange={this.props.onLayersChange}
      />
      <header className="maputnik-layer-list-header">
        <span className="maputnik-layer-list-header-title">Layers</span>
@@ -328,6 +310,7 @@ class LayerListContainer extends React.Component<LayerListContainerProps, LayerL
  }
 }

+// eslint-disable-next-line react-refresh/only-export-components
 const LayerListContainerSortable = SortableContainer((props: LayerListContainerProps) => <LayerListContainer {...props} />)

 type LayerListProps = LayerListContainerProps & {
--- a/src/components/LayerListItem.tsx
+++ b/src/components/LayerListItem.tsx
@@ -36,10 +36,10 @@ type IconActionProps = {
 class IconAction extends React.Component<IconActionProps> {
  renderIcon() {
    switch(this.props.action) {
-      case 'duplicate': return <MdContentCopy />
-      case 'show': return <MdVisibility />
-      case 'hide': return <MdVisibilityOff />
-      case 'delete': return <MdDelete />
+    case 'duplicate': return <MdContentCopy />
+    case 'show': return <MdVisibility />
+    case 'hide': return <MdVisibilityOff />
+    case 'delete': return <MdDelete />
    }
  }

@@ -114,27 +114,27 @@ class LayerListItem extends React.Component<LayerListItemProps> {
        "maputnik-layer-list-item-selected": this.props.isSelected,
        [this.props.className!]: true,
      })}>
-        <DraggableLabel {...this.props} />
-        <span style={{flexGrow: 1}} />
-        <IconAction
-          wdKey={"layer-list-item:"+this.props.layerId+":delete"}
-          action={'delete'}
-          classBlockName="delete"
-          onClick={_e => this.props.onLayerDestroy!(this.props.layerIndex)}
-        />
-        <IconAction
-          wdKey={"layer-list-item:"+this.props.layerId+":copy"}
-          action={'duplicate'}
-          classBlockName="duplicate"
-          onClick={_e => this.props.onLayerCopy!(this.props.layerIndex)}
-        />
-        <IconAction
-          wdKey={"layer-list-item:"+this.props.layerId+":toggle-visibility"}
-          action={visibilityAction}
-          classBlockName="visibility"
-          classBlockModifier={visibilityAction}
-          onClick={_e => this.props.onLayerVisibilityToggle!(this.props.layerIndex)}
-        />
+      <DraggableLabel {...this.props} />
+      <span style={{flexGrow: 1}} />
+      <IconAction
+        wdKey={"layer-list-item:"+this.props.layerId+":delete"}
+        action={'delete'}
+        classBlockName="delete"
+        onClick={_e => this.props.onLayerDestroy!(this.props.layerIndex)}
+      />
+      <IconAction
+        wdKey={"layer-list-item:"+this.props.layerId+":copy"}
+        action={'duplicate'}
+        classBlockName="duplicate"
+        onClick={_e => this.props.onLayerCopy!(this.props.layerIndex)}
+      />
+      <IconAction
+        wdKey={"layer-list-item:"+this.props.layerId+":toggle-visibility"}
+        action={visibilityAction}
+        classBlockName="visibility"
+        classBlockModifier={visibilityAction}
+        onClick={_e => this.props.onLayerVisibilityToggle!(this.props.layerIndex)}
+      />
    </li>
  }
 }
--- a/src/components/MapMaplibreGl.tsx
+++ b/src/components/MapMaplibreGl.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, {type JSX} from 'react'
 import ReactDOM from 'react-dom'
 import MapLibreGl, {LayerSpecification, LngLat, Map, MapOptions, SourceSpecification, StyleSpecification} from 'maplibre-gl'
 // @ts-ignore
--- a/src/components/MapMaplibreGlFeaturePropertyPopup.tsx
+++ b/src/components/MapMaplibreGlFeaturePropertyPopup.tsx
@@ -34,7 +34,7 @@ function renderFeatureId(feature: InspectFeature) {
  return <Block key={"feature-id"} label={"feature_id"}>
    <FieldString value={displayValue(feature.id)} style={{backgroundColor: 'transparent'}} />
  </Block>
-  }
+}

 function renderFeature(feature: InspectFeature, idx: number) {
  return <div key={`${feature.sourceLayer}-${idx}`}>
@@ -48,7 +48,7 @@ function renderFeature(feature: InspectFeature, idx: number) {
 }

 function removeDuplicatedFeatures(features: InspectFeature[]) {
-  let uniqueFeatures: InspectFeature[] = [];
+  const uniqueFeatures: InspectFeature[] = [];

  features.forEach(feature => {
    const featureIndex = uniqueFeatures.findIndex(feature2 => {
--- a/src/components/MapMaplibreGlLayerPopup.tsx
+++ b/src/components/MapMaplibreGlLayerPopup.tsx
@@ -5,10 +5,10 @@ import type {InspectFeature} from './MapMaplibreGlFeaturePropertyPopup';
 function groupFeaturesBySourceLayer(features: InspectFeature[]) {
  const sources: {[key: string]: InspectFeature[]} = {}

-  let returnedFeatures: {[key: string]: number} = {}
+  const returnedFeatures: {[key: string]: number} = {}

  features.forEach(feature => {
-    if(returnedFeatures.hasOwnProperty(feature.layer.id)) {
+    if(Object.prototype.hasOwnProperty.call(returnedFeatures, feature.layer.id)) {
      returnedFeatures[feature.layer.id]++

      const featureObject = sources[feature.layer['source-layer']].find((f: InspectFeature) => f.layer.id === feature.layer.id)
@@ -42,21 +42,21 @@ class FeatureLayerPopup extends React.Component<FeatureLayerPopupProps> {
      const paintProps = feature.layer.paint;
      let propName;

-      if(paintProps.hasOwnProperty("text-color") && paintProps["text-color"]) {
+      if(Object.prototype.hasOwnProperty.call(paintProps, "text-color") && paintProps["text-color"]) {
        propName = "text-color";
      }
-      else if (paintProps.hasOwnProperty("fill-color") && paintProps["fill-color"]) {
+      else if (Object.prototype.hasOwnProperty.call(paintProps, "fill-color") && paintProps["fill-color"]) {
        propName = "fill-color";
      }
-      else if (paintProps.hasOwnProperty("line-color") && paintProps["line-color"]) {
+      else if (Object.prototype.hasOwnProperty.call(paintProps, "line-color") && paintProps["line-color"]) {
        propName = "line-color";
      }
-      else if (paintProps.hasOwnProperty("fill-extrusion-color") && paintProps["fill-extrusion-color"]) {
+      else if (Object.prototype.hasOwnProperty.call(paintProps, "fill-extrusion-color") && paintProps["fill-extrusion-color"]) {
        propName = "fill-extrusion-color";
      }

      if(propName) {
-        let color = feature.layer.paint[propName];
+        const color = feature.layer.paint[propName];
        return String(color);
      }
      else {
@@ -80,8 +80,8 @@ class FeatureLayerPopup extends React.Component<FeatureLayerPopupProps> {
        const featureColor = this._getFeatureColor(feature, this.props.zoom);

        return <div
-            key={idx}
-            className="maputnik-popup-layer"
+          key={idx}
+          className="maputnik-popup-layer"
        >
          <div
            className="maputnik-popup-layer__swatch"
--- a/src/components/MapOpenLayers.tsx
+++ b/src/components/MapOpenLayers.tsx
@@ -99,7 +99,7 @@ export default class MapOpenLayers extends React.Component<MapOpenLayersProps, M
    });

    map.on('pointermove', (evt) => {
-      var coords = toLonLat(evt.coordinate);
+      const coords = toLonLat(evt.coordinate);
      this.setState({
        cursor: [
          coords[0].toFixed(2),
--- a/src/components/ModalAdd.tsx
+++ b/src/components/ModalAdd.tsx
@@ -68,7 +68,7 @@ export default class ModalAdd extends React.Component<ModalAddProps, ModalAddSta
    const availableSourcesNew = this.getSources(newType);

    if(
-      // Type has changed
+    // Type has changed
      oldType !== newType
      && prevState.source !== ""
      // Was a valid source previously
@@ -113,7 +113,7 @@ export default class ModalAdd extends React.Component<ModalAddProps, ModalAddSta
      ]
    }

-    for(let [key, val] of Object.entries(this.props.sources) as any) {
+    for(const [key, val] of Object.entries(this.props.sources) as any) {
      const valType = val.type as keyof typeof types;
      if(types[valType] && types[valType].indexOf(type) > -1) {
        sources.push(key);
@@ -136,41 +136,41 @@ export default class ModalAdd extends React.Component<ModalAddProps, ModalAddSta
      className="maputnik-add-modal"
    >
      <div className="maputnik-add-layer">
-      <FieldId
-        value={this.state.id}
-        wdKey="add-layer.layer-id"
-        onChange={(v: string) => {
-          this.setState({ id: v })
-        }}
-      />
-      <FieldType
-        value={this.state.type}
-        wdKey="add-layer.layer-type"
-        onChange={(v: LayerSpecification["type"]) => this.setState({ type: v })}
-      />
-      {this.state.type !== 'background' &&
+        <FieldId
+          value={this.state.id}
+          wdKey="add-layer.layer-id"
+          onChange={(v: string) => {
+            this.setState({ id: v })
+          }}
+        />
+        <FieldType
+          value={this.state.type}
+          wdKey="add-layer.layer-type"
+          onChange={(v: LayerSpecification["type"]) => this.setState({ type: v })}
+        />
+        {this.state.type !== 'background' &&
      <FieldSource
        sourceIds={sources}
        wdKey="add-layer.layer-source-block"
        value={this.state.source}
        onChange={(v: string) => this.setState({ source: v })}
      />
-      }
-      {['background', 'raster', 'hillshade', 'heatmap'].indexOf(this.state.type) < 0 &&
+        }
+        {['background', 'raster', 'hillshade', 'heatmap'].indexOf(this.state.type) < 0 &&
      <FieldSourceLayer
        isFixed={true}
        sourceLayerIds={layers}
        value={this.state['source-layer']}
        onChange={(v: string) => this.setState({ 'source-layer': v })}
      />
-      }
-      <InputButton
-        className="maputnik-add-layer-button"
-        onClick={this.addLayer}
-        data-wd-key="add-layer"
-      >
+        }
+        <InputButton
+          className="maputnik-add-layer-button"
+          onClick={this.addLayer}
+          data-wd-key="add-layer"
+        >
        Add Layer
-      </InputButton>
+        </InputButton>
      </div>
    </Modal>
  }
--- a/src/components/ModalLoading.tsx
+++ b/src/components/ModalLoading.tsx
@@ -25,7 +25,7 @@ export default class ModalLoading extends React.Component<ModalLoadingProps> {
      underlayClickExits={false}
      underlayProps={{
        // @ts-ignore
-        onClick: (e: Event) => underlayProps(e)
+        onClick: (e: Event) => underlayProps(e)  
      }}
      title={this.props.title}
      onOpenToggle={() => this.props.onCancel()}
--- a/src/components/ModalOpen.tsx
+++ b/src/components/ModalOpen.tsx
@@ -91,33 +91,33 @@ export default class ModalOpen extends React.Component<ModalOpenProps, ModalOpen
      mode: 'cors',
      credentials: "same-origin"
    })
-    .then(function(response) {
-      return response.json();
-    })
-    .then((body) => {
-      if(canceled) {
-        return;
-      }
+      .then(function(response) {
+        return response.json();
+      })
+      .then((body) => {
+        if(canceled) {
+          return;
+        }

-      this.setState({
-        activeRequest: null,
-        activeRequestUrl: null
-      });
+        this.setState({
+          activeRequest: null,
+          activeRequestUrl: null
+        });

-      const mapStyle = style.ensureStyleValidity(body)
-      console.log('Loaded style ', mapStyle.id)
-      this.props.onStyleOpen(mapStyle)
-      this.onOpenToggle()
-    })
-    .catch((err) => {
-      this.setState({
-        error: `Failed to load: '${styleUrl}'`,
-        activeRequest: null,
-        activeRequestUrl: null
-      });
-      console.error(err);
-      console.warn('Could not open the style URL', styleUrl)
-    })
+        const mapStyle = style.ensureStyleValidity(body)
+        console.log('Loaded style ', mapStyle.id)
+        this.props.onStyleOpen(mapStyle)
+        this.onOpenToggle()
+      })
+      .catch((err) => {
+        this.setState({
+          error: `Failed to load: '${styleUrl}'`,
+          activeRequest: null,
+          activeRequestUrl: null
+        });
+        console.error(err);
+        console.warn('Could not open the style URL', styleUrl)
+      })

    this.setState({
      activeRequest: {
@@ -135,7 +135,7 @@ export default class ModalOpen extends React.Component<ModalOpenProps, ModalOpen
  }

  onUpload = (_: any, files: Result[]) => {
-    const [_e, file] = files[0];
+    const [, file] = files[0];
    const reader = new FileReader();

    this.clearError();
@@ -244,7 +244,7 @@ export default class ModalOpen extends React.Component<ModalOpenProps, ModalOpen
              Open one of the publicly available styles to start from.
            </p>
            <div className="maputnik-style-gallery-container">
-            {styleOptions}
+              {styleOptions}
            </div>
          </section>
        </Modal>
--- a/src/components/ModalSources.tsx
+++ b/src/components/ModalSources.tsx
@@ -24,17 +24,17 @@ type PublicSourceProps = {
 class PublicSource extends React.Component<PublicSourceProps> {
  render() {
    return <div className="maputnik-public-source">
-            <InputButton
+      <InputButton
        className="maputnik-public-source-select"
-                onClick={() => this.props.onSelect(this.props.id)}
-            >
-                <div className="maputnik-public-source-info">
-                    <p className="maputnik-public-source-name">{this.props.title}</p>
-                    <p className="maputnik-public-source-id">#{this.props.id}</p>
-                </div>
-                <span className="maputnik-space" />
-                <MdAddCircleOutline />
-            </InputButton>
+        onClick={() => this.props.onSelect(this.props.id)}
+      >
+        <div className="maputnik-public-source-info">
+          <p className="maputnik-public-source-name">{this.props.title}</p>
+          <p className="maputnik-public-source-id">#{this.props.id}</p>
+        </div>
+        <span className="maputnik-space" />
+        <MdAddCircleOutline />
+      </InputButton>
    </div>
  }
 }
@@ -127,68 +127,68 @@ class AddSource extends React.Component<AddSourceProps, AddSourceState> {
    const {protocol} = window.location;

    switch(mode) {
-      case 'geojson_url': return {
-        type: 'geojson',
-        data: `${protocol}//localhost:3000/geojson.json`
-      }
-      case 'geojson_json': return {
-        type: 'geojson',
-        cluster: (source as GeoJSONSourceSpecification).cluster || false,
-        data: {}
-      }
-      case 'tilejson_vector': return {
-        type: 'vector',
-        url: (source as VectorSourceSpecification).url || `${protocol}//localhost:3000/tilejson.json`
-      }
-      case 'tilexyz_vector': return {
-        type: 'vector',
-        tiles: (source as VectorSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
-        minzoom: (source as VectorSourceSpecification).minzoom || 0,
-        maxzoom: (source as VectorSourceSpecification).maxzoom || 14
-      }
-      case 'tilejson_raster': return {
-        type: 'raster',
-        url: (source as RasterSourceSpecification).url || `${protocol}//localhost:3000/tilejson.json`
-      }
-      case 'tilexyz_raster': return {
-        type: 'raster',
-        tiles: (source as RasterSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
-        minzoom: (source as RasterSourceSpecification).minzoom || 0,
-        maxzoom: (source as RasterSourceSpecification).maxzoom || 14
-      }
-      case 'tilejson_raster-dem': return {
-        type: 'raster-dem',
-        url: (source as RasterDEMSourceSpecification).url || `${protocol}//localhost:3000/tilejson.json`
-      }
-      case 'tilexyz_raster-dem': return {
-        type: 'raster-dem',
-        tiles: (source as RasterDEMSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
-        minzoom: (source as RasterDEMSourceSpecification).minzoom || 0,
-        maxzoom: (source as RasterDEMSourceSpecification).maxzoom || 14
-      }
-      case 'image': return {
-        type: 'image',
-        url: `${protocol}//localhost:3000/image.png`,
-        coordinates: [
-          [0,0],
-          [0,0],
-          [0,0],
-          [0,0],
-        ],
-      }
-      case 'video': return {
-        type: 'video',
-        urls: [
-          `${protocol}//localhost:3000/movie.mp4`
-        ],
-        coordinates: [
-          [0,0],
-          [0,0],
-          [0,0],
-          [0,0],
-        ],
-      }
-      default: return {} as any
+    case 'geojson_url': return {
+      type: 'geojson',
+      data: `${protocol}//localhost:3000/geojson.json`
+    }
+    case 'geojson_json': return {
+      type: 'geojson',
+      cluster: (source as GeoJSONSourceSpecification).cluster || false,
+      data: {}
+    }
+    case 'tilejson_vector': return {
+      type: 'vector',
+      url: (source as VectorSourceSpecification).url || `${protocol}//localhost:3000/tilejson.json`
+    }
+    case 'tilexyz_vector': return {
+      type: 'vector',
+      tiles: (source as VectorSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
+      minzoom: (source as VectorSourceSpecification).minzoom || 0,
+      maxzoom: (source as VectorSourceSpecification).maxzoom || 14
+    }
+    case 'tilejson_raster': return {
+      type: 'raster',
+      url: (source as RasterSourceSpecification).url || `${protocol}//localhost:3000/tilejson.json`
+    }
+    case 'tilexyz_raster': return {
+      type: 'raster',
+      tiles: (source as RasterSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
+      minzoom: (source as RasterSourceSpecification).minzoom || 0,
+      maxzoom: (source as RasterSourceSpecification).maxzoom || 14
+    }
+    case 'tilejson_raster-dem': return {
+      type: 'raster-dem',
+      url: (source as RasterDEMSourceSpecification).url || `${protocol}//localhost:3000/tilejson.json`
+    }
+    case 'tilexyz_raster-dem': return {
+      type: 'raster-dem',
+      tiles: (source as RasterDEMSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
+      minzoom: (source as RasterDEMSourceSpecification).minzoom || 0,
+      maxzoom: (source as RasterDEMSourceSpecification).maxzoom || 14
+    }
+    case 'image': return {
+      type: 'image',
+      url: `${protocol}//localhost:3000/image.png`,
+      coordinates: [
+        [0,0],
+        [0,0],
+        [0,0],
+        [0,0],
+      ],
+    }
+    case 'video': return {
+      type: 'video',
+      urls: [
+        `${protocol}//localhost:3000/movie.mp4`
+      ],
+      coordinates: [
+        [0,0],
+        [0,0],
+        [0,0],
+        [0,0],
+      ],
+    }
+    default: return {} as any
    }
  }

@@ -245,7 +245,7 @@ class AddSource extends React.Component<AddSourceProps, AddSourceState> {
      />
      <InputButton
        className="maputnik-add-source-button"
-                onClick={this.onAdd}
+        onClick={this.onAdd}
      >
        Add Source
      </InputButton>
@@ -308,16 +308,16 @@ export default class ModalSources extends React.Component<ModalSourcesProps> {
          Add one of the publicly available sources to your style.
        </p>
        <div className="maputnik-public-sources" style={{maxWidth: 500}}>
-        {tilesetOptions}
+          {tilesetOptions}
        </div>
      </section>

      <section className="maputnik-modal-section">
-                <h1>Add New Source</h1>
-                <p>Add a new source to your style. You can only choose the source type and id at creation time!</p>
-                <AddSource
-                    onAdd={(sourceId: string, source: SourceSpecification) => this.props.onStyleChanged(addSource(mapStyle, sourceId, source))}
-                />
+        <h1>Add New Source</h1>
+        <p>Add a new source to your style. You can only choose the source type and id at creation time!</p>
+        <AddSource
+          onAdd={(sourceId: string, source: SourceSpecification) => this.props.onStyleChanged(addSource(mapStyle, sourceId, source))}
+        />
      </section>
    </Modal>
  }
--- a/src/components/ModalSourcesTypeEditor.tsx
+++ b/src/components/ModalSourcesTypeEditor.tsx
@@ -269,28 +269,28 @@ export default class ModalSourcesTypeEditor extends React.Component<ModalSources
      onChange: this.props.onChange,
    }
    switch(this.props.mode) {
-      case 'geojson_url': return <GeoJSONSourceUrlEditor {...commonProps} />
-      case 'geojson_json': return <GeoJSONSourceFieldJsonEditor {...commonProps} />
-      case 'tilejson_vector': return <TileJSONSourceEditor {...commonProps} />
-      case 'tilexyz_vector': return <TileURLSourceEditor {...commonProps} />
-      case 'tilejson_raster': return <TileJSONSourceEditor {...commonProps} />
-      case 'tilexyz_raster': return <TileURLSourceEditor {...commonProps} />
-      case 'tilejson_raster-dem': return <TileJSONSourceEditor {...commonProps} />
-      case 'tilexyz_raster-dem': return <TileURLSourceEditor {...commonProps}>
-        <FieldSelect
-          label={"Encoding"}
-          fieldSpec={latest.source_raster_dem.encoding}
-          options={Object.keys(latest.source_raster_dem.encoding.values)}
-          onChange={encoding => this.props.onChange({
-            ...this.props.source,
-            encoding: encoding
-          })}
-          value={this.props.source.encoding || latest.source_raster_dem.encoding.default}
-        />
-      </TileURLSourceEditor>
-      case 'image': return <ImageSourceEditor {...commonProps} />
-      case 'video': return <VideoSourceEditor {...commonProps} />
-      default: return null
+    case 'geojson_url': return <GeoJSONSourceUrlEditor {...commonProps} />
+    case 'geojson_json': return <GeoJSONSourceFieldJsonEditor {...commonProps} />
+    case 'tilejson_vector': return <TileJSONSourceEditor {...commonProps} />
+    case 'tilexyz_vector': return <TileURLSourceEditor {...commonProps} />
+    case 'tilejson_raster': return <TileJSONSourceEditor {...commonProps} />
+    case 'tilexyz_raster': return <TileURLSourceEditor {...commonProps} />
+    case 'tilejson_raster-dem': return <TileJSONSourceEditor {...commonProps} />
+    case 'tilexyz_raster-dem': return <TileURLSourceEditor {...commonProps}>
+      <FieldSelect
+        label={"Encoding"}
+        fieldSpec={latest.source_raster_dem.encoding}
+        options={Object.keys(latest.source_raster_dem.encoding.values)}
+        onChange={encoding => this.props.onChange({
+          ...this.props.source,
+          encoding: encoding
+        })}
+        value={this.props.source.encoding || latest.source_raster_dem.encoding.default}
+      />
+    </TileURLSourceEditor>
+    case 'image': return <ImageSourceEditor {...commonProps} />
+    case 'video': return <VideoSourceEditor {...commonProps} />
+    default: return null
    }
  }
 }
--- a/src/components/_DataProperty.tsx
+++ b/src/components/_DataProperty.tsx
@@ -23,7 +23,7 @@ function setStopRefs(props: DataPropertyProps, state: DataPropertyState) {

  if(props.value && props.value.stops) {
    props.value.stops.forEach((_val, idx) => {
-      if(!state.refs.hasOwnProperty(idx)) {
+      if(!Object.prototype.hasOwnProperty.call(state.refs, idx)) {
        if(!newRefs) {
          newRefs = {...state};
        }
@@ -118,7 +118,7 @@ export default class DataProperty extends React.Component<DataPropertyProps, Dat
          data: stop
        }
      })
-      // Sort by zoom
+    // Sort by zoom
      .sort((a, b) => sortNumerically(a.data[0].zoom, b.data[0].zoom));

    // Fetch the new position of the stops
--- a/src/components/_ExpressionProperty.tsx
+++ b/src/components/_ExpressionProperty.tsx
@@ -96,12 +96,12 @@ export default class ExpressionProperty extends React.Component<ExpressionProper
    }
    else {
      Object.entries(errors!)
-      .filter(([key, _error]) => {
-        return key.startsWith(errorKeyStart);
-      })
-      .forEach(([_key, error]) => {
-        return foundErrors.push(error);
-      })
+        .filter(([key, _error]) => {
+          return key.startsWith(errorKeyStart);
+        })
+        .forEach(([_key, error]) => {
+          return foundErrors.push(error);
+        })

      if (fieldError) {
        foundErrors.push(fieldError);
--- a/src/components/_ZoomProperty.tsx
+++ b/src/components/_ZoomProperty.tsx
@@ -26,7 +26,7 @@ function setStopRefs(props: ZoomPropertyProps, state: ZoomPropertyState) {

  if(props.value && (props.value as ZoomWithStops).stops) {
    (props.value as ZoomWithStops).stops.forEach((_val, idx: number) => {
-      if(!state.refs.hasOwnProperty(idx)) {
+      if(Object.prototype.hasOwnProperty.call(!state.refs, idx)) {
        if(!newRefs) {
          newRefs = {...state};
        }