Refactor driver for E2E (#841)

Added shellygo package.
Refactor driver and e2e tests.
Added data-wd attributes to missing places.

---------

Co-authored-by: shelly_goldblit <shelly_goldblit@dell.com>

cypress/e2e/accessibility.cy.ts

@@ -1,41 +1,39 @@
-import driver from "./driver";
+import MaputnikDriver from "./driver";
 
 describe("accessibility", () => {
-    // skipped due to the following issue with cypress: https://github.com/cypress-io/cypress/issues/299
+  let { beforeAndAfter, given, when, get, should } = new MaputnikDriver();
-  describe.skip("skip links", () => {
+  beforeAndAfter();
+
+  describe("skip links", () => {
     beforeEach(() => {
-        driver.beforeEach();
+      when.setStyle("layer");
-        driver.setStyle("layer");
     });
-  
+
     it("skip link to layer list", () => {
-      const selector = driver.getDataAttribute("root:skip:layer-list");
+      const selector = "root:skip:layer-list";
-      driver.isExists(selector);
+      should.isExists(selector);
-      driver.typeKeys('{tab}');
+      when.tab();
-      driver.isFocused(selector);
+      should.beFocused(selector);
-      driver.click(selector);
+      when.click(selector);
-  
+      should.beFocused("skip-target-layer-list");
-      driver.isFocused("#skip-target-layer-list");
     });
-  
+
     it("skip link to layer editor", () => {
-      const selector = driver.getDataAttribute("root:skip:layer-editor");
+      const selector = "root:skip:layer-editor";
-      driver.isExists(selector);
+      should.isExists(selector);
-      driver.typeKeys('{tab}{tab}');
+      when.tab().tab();
-      driver.isFocused(selector);
+      should.beFocused(selector);
-      driver.click(selector);
+      when.click(selector);
-  
+      should.beFocused("skip-target-layer-editor");
-      driver.isFocused("#skip-target-layer-editor");
     });
-  
+
     it("skip link to map view", () => {
-      const selector = driver.getDataAttribute("root:skip:map-view");
+      const selector = "root:skip:map-view";
-      driver.isExists(selector);
+      should.isExists(selector);
-      driver.typeKeys('{tab}{tab}{tab}');
+      when.tab().tab().tab();
-      driver.isFocused(selector);
+      should.beFocused(selector);
-      driver.click(selector);
+      when.click(selector);
-  
+      should.canvasBeFocused();
-      driver.isFocused(".maplibregl-canvas");
     });
-  });  
+  });
-})
+});

cypress/e2e/driver.ts

@@ -1,170 +1,198 @@
-import {v1 as uuid} from "uuid";
+import { CypressHelper } from "@shellygo/cypress-test-utils";
+import { v1 as uuid } from "uuid";
+export default class MaputnikDriver {
+  private helper = new CypressHelper({ defaultDataAttribute: "data-wd-key" });
+  public beforeAndAfter = () => {
+    beforeEach(() => {
+      this.given.setupInterception();
+      this.when.setStyle("both");
+    });
+  };
 
-export default {
+  public given = {
-    isMac() {
+    setupInterception: () => {
-        return Cypress.platform === "darwin";
+      cy.intercept("GET", "http://localhost:8888/example-style.json", {
+        fixture: "example-style.json",
+      }).as("example-style.json");
+      cy.intercept("GET", "http://localhost:8888/example-layer-style.json", {
+        fixture: "example-layer-style.json",
+      });
+      cy.intercept("GET", "http://localhost:8888/geojson-style.json", {
+        fixture: "geojson-style.json",
+      });
+      cy.intercept("GET", "http://localhost:8888/raster-style.json", {
+        fixture: "raster-style.json",
+      });
+      cy.intercept("GET", "http://localhost:8888/geojson-raster-style.json", {
+        fixture: "geojson-raster-style.json",
+      });
+      cy.intercept({ method: "GET", url: "*example.local/*" }, []);
+      cy.intercept({ method: "GET", url: "*example.com/*" }, []);
     },
+  };
 
-    beforeEach() {
+  public when = {
-      this.setupInterception();
+    within: (selector: string, fn: () => void) => {
-      this.setStyle('both');
+      this.helper.when.within(fn, selector);
     },
-
+    tab: () => cy.get("body").tab(),
-    setupInterception() {
+    waitForExampleFileRequset: () => {
-      cy.intercept('GET', 'http://localhost:8888/example-style.json', { fixture: 'example-style.json' }).as('example-style.json');
+      this.helper.when.waitForResponse("example-style.json");
-      cy.intercept('GET', 'http://localhost:8888/example-layer-style.json', { fixture: 'example-layer-style.json' });
-      cy.intercept('GET', 'http://localhost:8888/geojson-style.json', { fixture: 'geojson-style.json' });
-      cy.intercept('GET', 'http://localhost:8888/raster-style.json', { fixture: 'raster-style.json' });
-      cy.intercept('GET', 'http://localhost:8888/geojson-raster-style.json', { fixture: 'geojson-raster-style.json' });
-      cy.intercept({method: 'GET', url: '*example.local/*' }, []);
-      cy.intercept({method: 'GET', url: '*example.com/*' }, []);
     },
-
+    chooseExampleFile: () => {
-    setStyle(styleProperties: 'geojson' | 'raster' | 'both' | 'layer' | '', zoom? : number) {
+      cy.get("input[type='file']").selectFile(
-        let url = "?debug";
+        "cypress/fixtures/example-style.json",
-        switch (styleProperties) {
+        { force: true }
-          case "geojson":
+      );
-            url += "&style=http://localhost:8888/geojson-style.json";
+    },
-            break;
+    setStyle: (
-          case "raster":
+      styleProperties: "geojson" | "raster" | "both" | "layer" | "",
-            url += "&style=http://localhost:8888/raster-style.json";
+      zoom?: number
-            break;
+    ) => {
-          case "both":
+      let url = "?debug";
-            url += "&style=http://localhost:8888/geojson-raster-style.json";
+      switch (styleProperties) {
-            break;
+        case "geojson":
-          case "layer":
+          url += "&style=http://localhost:8888/geojson-style.json";
-            url += "&style=http://localhost:8888/example-layer-style.json";
+          break;
-            break;
+        case "raster":
-        }
+          url += "&style=http://localhost:8888/raster-style.json";
-        if (zoom) {
+          break;
-          url += "#" + zoom + "/41.3805/2.1635";
+        case "both":
-        }
+          url += "&style=http://localhost:8888/geojson-raster-style.json";
-        cy.visit("http://localhost:8888/" + url);
+          break;
-        if (styleProperties) {
+        case "layer":
-            cy.on('window:confirm', () => true)
+          url += "&style=http://localhost:8888/example-layer-style.json";
-        }
+          break;
-        cy.get(".maputnik-toolbar-link").should("be.visible");
+      }
-      },
+      if (zoom) {
-
+        url += "#" + zoom + "/41.3805/2.1635";
-      getDataAttribute(key: string, selector?: string) {
+      }
-        return `*[data-wd-key='${key}'] ${selector || ''}`;
+      cy.visit("http://localhost:8888/" + url);
-      },
+      if (styleProperties) {
-
+        cy.on("window:confirm", () => true);
-      closeModal(key: string) {
+      }
-        const selector = this.getDataAttribute(key);
+      cy.get(".maputnik-toolbar-link").should("be.visible");
-      
+    },
-        this.isDisplayedInViewport(selector);
+    fillLayersModal: (opts: any) => {
-      
+      var type = opts.type;
-        this.click(this.getDataAttribute(key + ".close-modal"));
+      var layer = opts.layer;
-      
+      var id;
-        this.doesNotExists(selector);
+      if (opts.id) {
-      },
+        id = opts.id;
-
+      } else {
-      openLayersModal() {
+        id = `${type}:${uuid()}`;
-        cy.get(this.getDataAttribute('layer-list:add-layer')).click();
-  
-        cy.get(this.getDataAttribute('modal:add-layer')).should('exist');
-        cy.get(this.getDataAttribute('modal:add-layer')).should('be.visible');
-      },
-
-      getStyleFromWindow(win: Window) {
-        const styleId = win.localStorage.getItem("maputnik:latest_style");
-        const styleItem = win.localStorage.getItem(`maputnik:style:${styleId}`)
-        const obj = JSON.parse(styleItem || "");
-        return obj;
-      },
-
-      isStyleStoreEqual(getter: (obj:any) => any, styleObj: any) {
-        cy.window().then((win: any) => {
-          const obj = this.getStyleFromWindow(win);
-          assert.deepEqual(getter(obj), styleObj);
-        });
-      },
-
-      isStyleStoreEqualToExampleFileData() {
-        cy.window().then((win: any) => {
-          const obj = this.getStyleFromWindow(win);
-          cy.fixture('example-style.json').should('deep.equal', obj);
-        });
-      },
-
-      fillLayersModal(opts: any) {
-        var type = opts.type;
-        var layer = opts.layer;
-        var id;
-        if(opts.id) {
-          id = opts.id
-        }
-        else {
-          id = `${type}:${uuid()}`;
-        }
-  
-        cy.get(this.getDataAttribute('add-layer.layer-type', "select")).select(type);
-        cy.get(this.getDataAttribute("add-layer.layer-id", "input")).type(id);
-        if(layer) {
-            cy.get(this.getDataAttribute("add-layer.layer-source-block", "input")).type(layer);
-        }
-        cy.get(this.getDataAttribute("add-layer")).click();
-
-        return id;
-      },
-
-      typeKeys(keys: string) {
-        cy.get('body').type(keys);
-      },
-
-      click(selector: string) {
-        cy.get(selector).click();
-      },
-
-      select(selector: string, value: string) {
-        cy.get(selector).select(value);
-      },
-
-      isSelected(selector: string, value: string) {
-        cy.get(selector).find(`option[value="${value}"]`).should("be.selected");
-      },
-
-
-      focus(selector: string) {
-        cy.get(selector).focus();
-      },
-
-      isFocused(selector: string) {
-        cy.get(selector).should('have.focus');
-      },
-
-      isDisplayedInViewport(selector: string) {
-        cy.get(selector).should('be.visible');
-      },
-
-      isNotDisplayedInViewport(selector: string) {
-        cy.get(selector).should('not.be.visible');
-      },
-
-      setValue(selector: string, text: string) {
-        cy.get(selector).clear().type(text, {parseSpecialCharSequences: false});
-      },
-
-      isExists(selector: string) {
-        cy.get(selector).should('exist');
-      },
-
-      doesNotExists(selector: string) {
-        cy.get(selector).should('not.exist');
-      },
-
-      chooseExampleFile() {
-        cy.get("input[type='file']").selectFile('cypress/fixtures/example-style.json', {force: true});
-      },
-
-      getExampleFileUrl() {
-        return "http://localhost:8888/example-style.json";
-      },
-
-      waitForExampleFileRequset() {
-        cy.wait('@example-style.json');
       }
 
+      cy.get(
+        this.get.getDataAttribute("add-layer.layer-type", "select")
+      ).select(type);
+      cy.get(this.get.getDataAttribute("add-layer.layer-id", "input")).type(id);
+      if (layer) {
+        cy.get(
+          this.get.getDataAttribute("add-layer.layer-source-block", "input")
+        ).type(layer);
+      }
+      this.when.click("add-layer");
 
+      return id;
+    },
+
+    typeKeys: (keys: string) => {
+      cy.get("body").type(keys);
+    },
+
+    click: (selector: string) => {
+      this.helper.when.click(selector);
+      // cy.get(selector).click({ force: true });
+    },
+
+    select: (selector: string, value: string) => {
+      cy.get(selector).select(value);
+    },
+
+    focus: (selector: string) => {
+      this.helper.when.focus(selector);
+    },
+
+    setValue: (selector: string, text: string) => {
+      cy.get(selector).clear().type(text, { parseSpecialCharSequences: false });
+    },
+
+    closeModal: (key: string) => {
+      this.helper.when.waitUntil(() => this.helper.get.element(key));
+      this.when.click(key + ".close-modal");
+    },
+
+    openLayersModal: () => {
+      this.helper.when.click("layer-list:add-layer");
+
+      cy.get(this.get.getDataAttribute("modal:add-layer")).should("exist");
+      cy.get(this.get.getDataAttribute("modal:add-layer")).should("be.visible");
+    },
+  };
+
+  public get = {
+    isMac: () => {
+      return Cypress.platform === "darwin";
+    },
+    getStyleFromWindow: (win: Window) => {
+      const styleId = win.localStorage.getItem("maputnik:latest_style");
+      const styleItem = win.localStorage.getItem(`maputnik:style:${styleId}`);
+      const obj = JSON.parse(styleItem || "");
+      return obj;
+    },
+    getExampleFileUrl: () => {
+      return "http://localhost:8888/example-style.json";
+    },
+    getDataAttribute: (key: string, selector?: string): string => {
+      return `*[data-wd-key='${key}'] ${selector || ""}`;
+    },
+  };
+
+  public should = {
+    canvasBeFocused: () => {
+      this.when.within("maplibre:map", () => {
+        cy.get("canvas").should("be.focused");
+      });
+    },
+    notExist: (selector: string) => {
+      cy.get(selector).should("not.exist");
+    },
+    beFocused: (selector: string) => {
+      this.helper.get.element(selector).should("have.focus");
+    },
+
+    notBeFocused: (selector: string) => {
+      this.helper.get.element(selector).should("not.have.focus");
+    },
+
+    beVisible: (selector: string) => {
+      this.helper.get.element(selector).should("be.visible");
+    },
+
+    notBeVisible: (selector: string) => {
+      this.helper.get.element(selector).should("not.be.visible");
+    },
+
+    equalStyleStore: (getter: (obj: any) => any, styleObj: any) => {
+      cy.window().then((win: any) => {
+        const obj = this.get.getStyleFromWindow(win);
+        assert.deepEqual(getter(obj), styleObj);
+      });
+    },
+
+    isStyleStoreEqualToExampleFileData: () => {
+      cy.window().then((win: any) => {
+        const obj = this.get.getStyleFromWindow(win);
+        cy.fixture("example-style.json").should("deep.equal", obj);
+      });
+    },
+
+    isExists: (selector: string) => {
+      this.helper.get.element(selector).should("exist");
+    },
+    isSelected: (selector: string, value: string) => {
+      cy.get(selector).find(`option[value="${value}"]`).should("be.selected");
+    },
+  };
 }

cypress/e2e/history.cy.ts

@@ -1,80 +1,97 @@
-import driver from "./driver";
+import MaputnikDriver from "./driver";
 
 describe("history", () => {
+  let { beforeAndAfter, given, when, get, should } = new MaputnikDriver();
+  beforeAndAfter();
+
   let undoKeyCombo: string;
   let redoKeyCombo: string;
 
   before(() => {
-    const isMac = driver.isMac();
+    const isMac = get.isMac();
-    undoKeyCombo = isMac ? '{meta}z' : '{ctrl}z';
+    undoKeyCombo = isMac ? "{meta}z" : "{ctrl}z";
-    redoKeyCombo = isMac ? '{meta}{shift}z' : '{ctrl}y';
+    redoKeyCombo = isMac ? "{meta}{shift}z" : "{ctrl}y";
-    driver.beforeEach();
   });
 
   it("undo/redo", () => {
-    driver.setStyle('geojson');
+    when.setStyle("geojson");
-    driver.openLayersModal();
+    when.openLayersModal();
 
-    driver.isStyleStoreEqual((a: any) => a.layers, []);
+    should.equalStyleStore((a: any) => a.layers, []);
 
-    driver.fillLayersModal({
+    when.fillLayersModal({
       id: "step 1",
-      type: "background"
+      type: "background",
-    })
+    });
 
-    driver.isStyleStoreEqual((a: any) => a.layers, [
+    should.equalStyleStore(
-      {
+      (a: any) => a.layers,
-        "id": "step 1",
+      [
-        "type": 'background'
+        {
-      }
+          id: "step 1",
-    ]);
+          type: "background",
+        },
+      ]
+    );
 
-    driver.openLayersModal();
+    when.openLayersModal();
-    driver.fillLayersModal({
+    when.fillLayersModal({
       id: "step 2",
-      type: "background"
+      type: "background",
-    })
+    });
 
-    driver.isStyleStoreEqual((a: any) => a.layers, [
+    should.equalStyleStore(
-      {
+      (a: any) => a.layers,
-        "id": "step 1",
+      [
-        "type": 'background'
+        {
-      },
+          id: "step 1",
-      {
+          type: "background",
-        "id": "step 2",
+        },
-        "type": 'background'
+        {
-      }
+          id: "step 2",
-    ]);
+          type: "background",
+        },
+      ]
+    );
 
-    driver.typeKeys(undoKeyCombo);
+    when.typeKeys(undoKeyCombo);
-    driver.isStyleStoreEqual((a: any) => a.layers, [
+    should.equalStyleStore(
-      {
+      (a: any) => a.layers,
-        "id": "step 1",
+      [
-        "type": 'background'
+        {
-      }
+          id: "step 1",
-    ]);
+          type: "background",
+        },
+      ]
+    );
 
-    driver.typeKeys(undoKeyCombo)
+    when.typeKeys(undoKeyCombo);
-    driver.isStyleStoreEqual((a: any) => a.layers, []);
+    should.equalStyleStore((a: any) => a.layers, []);
 
-    driver.typeKeys(redoKeyCombo)
+    when.typeKeys(redoKeyCombo);
-    driver.isStyleStoreEqual((a: any) => a.layers, [
+    should.equalStyleStore(
-      {
+      (a: any) => a.layers,
-        "id": "step 1",
+      [
-        "type": 'background'
+        {
-      }
+          id: "step 1",
-    ]);
+          type: "background",
+        },
+      ]
+    );
 
-    driver.typeKeys(redoKeyCombo)
+    when.typeKeys(redoKeyCombo);
-    driver.isStyleStoreEqual((a: any) => a.layers, [
+    should.equalStyleStore(
-      {
+      (a: any) => a.layers,
-        "id": "step 1",
+      [
-        "type": 'background'
+        {
-      },
+          id: "step 1",
-      {
+          type: "background",
-        "id": "step 2",
+        },
-        "type": 'background'
+        {
-      }
+          id: "step 2",
-    ]);
+          type: "background",
+        },
+      ]
+    );
   });
-})
+});

cypress/e2e/keyboard.cy.ts

@@ -1,60 +1,61 @@
-import driver from "./driver";
+import { default as MaputnikDriver } from "./driver";
 
 describe("keyboard", () => {
+  let { beforeAndAfter, given, when, get, should } = new MaputnikDriver();
+  beforeAndAfter();
   describe("shortcuts", () => {
     beforeEach(() => {
-        driver.setupInterception();
+      given.setupInterception();
-        driver.setStyle('');
+      when.setStyle("");
-    })
+    });
 
     it("ESC should unfocus", () => {
-      const targetSelector = driver.getDataAttribute("nav:inspect") + " select";
+      const targetSelector = "maputnik-select";
-      driver.focus(targetSelector);
+      when.focus(targetSelector);
-      driver.isFocused(targetSelector);
+      should.beFocused(targetSelector);
 
-      //driver.typeKeys("{esc}");
+      when.typeKeys("{esc}");
-      //driver.isFocused('body');
+      expect(should.notBeFocused(targetSelector));
     });
 
     it("'?' should show shortcuts modal", () => {
-      driver.typeKeys("?");
+      when.typeKeys("?");
-      driver.isDisplayedInViewport(driver.getDataAttribute("modal:shortcuts"));
+      should.beVisible("modal:shortcuts");
     });
 
     it("'o' should show open modal", () => {
-      driver.typeKeys("o");
+      when.typeKeys("o");
-      driver.isDisplayedInViewport(driver.getDataAttribute("modal:open"));
+      should.beVisible("modal:open");
     });
 
     it("'e' should show export modal", () => {
-      driver.typeKeys("e");
+      when.typeKeys("e");
-      driver.isDisplayedInViewport(driver.getDataAttribute("modal:export"));
+      should.beVisible("modal:export");
     });
 
     it("'d' should show sources modal", () => {
-      driver.typeKeys("d");
+      when.typeKeys("d");
-      driver.isDisplayedInViewport(driver.getDataAttribute("modal:sources"));
+      should.beVisible("modal:sources");
     });
 
     it("'s' should show settings modal", () => {
-      driver.typeKeys("s");
+      when.typeKeys("s");
-      driver.isDisplayedInViewport(driver.getDataAttribute("modal:settings"));
+      should.beVisible("modal:settings");
     });
 
     it("'i' should change map to inspect mode", () => {
-      driver.typeKeys("i");
+      when.typeKeys("i");
-      driver.isSelected(driver.getDataAttribute("nav:inspect"), "inspect");
+      should.isSelected(get.getDataAttribute("nav:inspect"), "inspect");
     });
 
     it("'m' should focus map", () => {
-      driver.typeKeys("m");
+      when.typeKeys("m");
-      driver.isFocused(".maplibregl-canvas");
+      should.beFocused(".maplibregl-canvas");
     });
 
     it("'!' should show debug modal", () => {
-      driver.typeKeys("!");
+      when.typeKeys("!");
-      driver.isDisplayedInViewport(driver.getDataAttribute("modal:debug"));
+      should.beVisible("modal:debug");
     });
   });
-
 });

cypress/e2e/layers.cy.ts

@@ -1,112 +1,132 @@
 var assert = require("assert");
-import driver from "./driver";
+import { v1 as uuid } from "uuid";
-import { v1 as uuid } from 'uuid';
+import MaputnikDriver from "./driver";
 
 describe("layers", () => {
+  let { beforeAndAfter, given, when, get, should } = new MaputnikDriver();
+  beforeAndAfter();
   beforeEach(() => {
-    driver.beforeEach();
+    when.setStyle("both");
-    driver.setStyle('both');
+    when.openLayersModal();
-    driver.openLayersModal();
   });
 
   describe("ops", () => {
     it("delete", () => {
-      var id = driver.fillLayersModal({
+      var id = when.fillLayersModal({
-        type: "background"
+        type: "background",
-      })
+      });
 
-      driver.isStyleStoreEqual((a: any) => a.layers, [
+      should.equalStyleStore(
-        {
+        (a: any) => a.layers,
-          "id": id,
+        [
-          "type": 'background'
+          {
-        },
+            id: id,
-      ]);
+            type: "background",
+          },
+        ]
+      );
 
-      driver.click(driver.getDataAttribute("layer-list-item:"+id+":delete", ""))
+      when.click("layer-list-item:" + id + ":delete");
 
-      driver.isStyleStoreEqual((a: any) => a.layers, []);
+      should.equalStyleStore((a: any) => a.layers, []);
     });
 
     it("duplicate", () => {
       var styleObj;
-      var id = driver.fillLayersModal({
+      var id = when.fillLayersModal({
-        type: "background"
+        type: "background",
-      })
+      });
 
-      driver.isStyleStoreEqual((a: any) => a.layers, [
+      should.equalStyleStore(
-        {
+        (a: any) => a.layers,
-          "id": id,
+        [
-          "type": 'background'
+          {
-        },
+            id: id,
-      ]);
+            type: "background",
+          },
+        ]
+      );
 
-      driver.click(driver.getDataAttribute("layer-list-item:"+id+":copy", ""));
+      when.click("layer-list-item:" + id + ":copy");
 
-      driver.isStyleStoreEqual((a: any) => a.layers, [
+      should.equalStyleStore(
-        {
+        (a: any) => a.layers,
-          "id": id+"-copy",
+        [
-          "type": "background"
+          {
-        },
+            id: id + "-copy",
-        {
+            type: "background",
-          "id": id,
+          },
-          "type": "background"
+          {
-        },
+            id: id,
-      ]);
+            type: "background",
+          },
+        ]
+      );
     });
 
     it("hide", () => {
       var styleObj;
-      var id = driver.fillLayersModal({
+      var id = when.fillLayersModal({
-        type: "background"
+        type: "background",
-      })
+      });
 
-      driver.isStyleStoreEqual((a: any) => a.layers, [
+      should.equalStyleStore(
-        {
+        (a: any) => a.layers,
-          "id": id,
+        [
-          "type": 'background'
+          {
-        },
+            id: id,
-      ]);
+            type: "background",
+          },
+        ]
+      );
 
-      driver.click(driver.getDataAttribute("layer-list-item:"+id+":toggle-visibility", ""));
+      when.click("layer-list-item:" + id + ":toggle-visibility");
 
-      driver.isStyleStoreEqual((a: any) => a.layers, [
+      should.equalStyleStore(
-        {
+        (a: any) => a.layers,
-          "id": id,
+        [
-          "type": "background",
+          {
-          "layout": {
+            id: id,
-            "visibility": "none"
+            type: "background",
-          }
+            layout: {
-        },
+              visibility: "none",
-      ]);
+            },
+          },
+        ]
+      );
 
-      driver.click(driver.getDataAttribute("layer-list-item:"+id+":toggle-visibility", ""));
+      when.click("layer-list-item:" + id + ":toggle-visibility");
 
-      driver.isStyleStoreEqual((a: any) => a.layers, [
+      should.equalStyleStore(
-        {
+        (a: any) => a.layers,
-          "id": id,
+        [
-          "type": "background",
+          {
-          "layout": {
+            id: id,
-            "visibility": "visible"
+            type: "background",
-          }
+            layout: {
-        },
+              visibility: "visible",
-      ]);
+            },
-    })
+          },
-  })
+        ]
-
+      );
-
+    });
-  describe('background', () => {
+  });
 
+  describe("background", () => {
     it("add", () => {
-      var id = driver.fillLayersModal({
+      var id = when.fillLayersModal({
-        type: "background"
+        type: "background",
-      })
+      });
 
-      driver.isStyleStoreEqual((a: any) => a.layers, [
+      should.equalStyleStore(
-        {
+        (a: any) => a.layers,
-          "id": id,
+        [
-          "type": 'background'
+          {
-        }
+            id: id,
-      ]);
+            type: "background",
+          },
+        ]
+      );
     });
 
     describe("modify", () => {
@@ -114,17 +134,26 @@ describe("layers", () => {
         // Setup
         var id = uuid();
 
-        driver.select(driver.getDataAttribute("add-layer.layer-type", "select"), "background");
+        when.select(
-        driver.setValue(driver.getDataAttribute("add-layer.layer-id", "input"), "background:"+id);
+          get.getDataAttribute("add-layer.layer-type", "select"),
+          "background"
+        );
+        when.setValue(
+          get.getDataAttribute("add-layer.layer-id", "input"),
+          "background:" + id
+        );
 
-        driver.click(driver.getDataAttribute("add-layer"));
+        when.click("add-layer");
 
-        driver.isStyleStoreEqual((a: any) => a.layers, [
+        should.equalStyleStore(
-          {
+          (a: any) => a.layers,
-            "id": 'background:'+id,
+          [
-            "type": 'background'
+            {
-          }
+              id: "background:" + id,
-        ]);
+              type: "background",
+            },
+          ]
+        );
         return id;
       }
 
@@ -134,35 +163,47 @@ describe("layers", () => {
         it("id", () => {
           var bgId = createBackground();
 
-          driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
+          when.click("layer-list-item:background:" + bgId);
 
           var id = uuid();
-          driver.setValue(driver.getDataAttribute("layer-editor.layer-id", "input"), "foobar:"+id)
+          when.setValue(
-          driver.click(driver.getDataAttribute("min-zoom"));
+            get.getDataAttribute("layer-editor.layer-id", "input"),
+            "foobar:" + id
+          );
+          when.click("min-zoom");
 
-          driver.isStyleStoreEqual((a: any) => a.layers, [
+          should.equalStyleStore(
-            {
+            (a: any) => a.layers,
-              "id": 'foobar:'+id,
+            [
-              "type": 'background'
+              {
-            }
+                id: "foobar:" + id,
-          ]);
+                type: "background",
+              },
+            ]
+          );
         });
 
         it("min-zoom", () => {
           var bgId = createBackground();
 
-          driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
+          when.click("layer-list-item:background:" + bgId);
-          driver.setValue(driver.getDataAttribute("min-zoom", 'input[type="text"]'), "1");
+          when.setValue(
+            get.getDataAttribute("min-zoom", 'input[type="text"]'),
+            "1"
+          );
 
-          driver.click(driver.getDataAttribute("layer-editor.layer-id", "input"));
+          when.click("layer-editor.layer-id");
 
-          driver.isStyleStoreEqual((a: any) => a.layers, [
+          should.equalStyleStore(
-            {
+            (a: any) => a.layers,
-              "id": 'background:'+bgId,
+            [
-              "type": 'background',
+              {
-              "minzoom": 1
+                id: "background:" + bgId,
-            }
+                type: "background",
-          ]);
+                minzoom: 1,
+              },
+            ]
+          );
 
           // AND RESET!
           // driver.setValue(driver.getDataAttribute("min-zoom", "input"), "")
@@ -179,38 +220,47 @@ describe("layers", () => {
         it("max-zoom", () => {
           var bgId = createBackground();
 
-          driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
+          when.click("layer-list-item:background:" + bgId);
-          driver.setValue(driver.getDataAttribute("max-zoom", 'input[type="text"]'), "1")
+          when.setValue(
+            get.getDataAttribute("max-zoom", 'input[type="text"]'),
+            "1"
+          );
 
-          driver.click(driver.getDataAttribute("layer-editor.layer-id", "input"));
+          when.click("layer-editor.layer-id");
 
-          driver.isStyleStoreEqual((a: any) => a.layers, [
+          should.equalStyleStore(
-            {
+            (a: any) => a.layers,
-              "id": 'background:'+bgId,
+            [
-              "type": 'background',
+              {
-              "maxzoom": 1
+                id: "background:" + bgId,
-            }
+                type: "background",
-          ]);
+                maxzoom: 1,
+              },
+            ]
+          );
         });
 
         it("comments", () => {
           var bgId = createBackground();
           var id = uuid();
 
-          driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
+          when.click("layer-list-item:background:" + bgId);
-          driver.setValue(driver.getDataAttribute("layer-comment", "textarea"), id);
+          when.setValue(get.getDataAttribute("layer-comment", "textarea"), id);
 
-          driver.click(driver.getDataAttribute("layer-editor.layer-id", "input"));
+          when.click("layer-editor.layer-id");
 
-          driver.isStyleStoreEqual((a: any) => a.layers, [
+          should.equalStyleStore(
-            {
+            (a: any) => a.layers,
-              "id": 'background:'+bgId,
+            [
-              "type": 'background',
+              {
-              metadata: {
+                id: "background:" + bgId,
-                'maputnik:comment': id
+                type: "background",
-              }
+                metadata: {
-            }
+                  "maputnik:comment": id,
-          ]);
+                },
+              },
+            ]
+          );
 
           // Unset it again.
           // TODO: This fails
@@ -228,31 +278,33 @@ describe("layers", () => {
         it("color", () => {
           var bgId = createBackground();
 
-          driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
+          when.click("layer-list-item:background:" + bgId);
 
-          driver.click(driver.getDataAttribute("spec-field:background-color", "input"));
+          when.click("spec-field:background-color");
 
-          driver.isStyleStoreEqual((a: any) => a.layers, [
+          should.equalStyleStore(
-            {
+            (a: any) => a.layers,
-              "id": 'background:'+bgId,
+            [
-              "type": 'background'
+              {
-            }
+                id: "background:" + bgId,
-          ]);
+                type: "background",
-
+              },
-        })
+            ]
-      })
+          );
+        });
+      });
 
       describe("filter", () => {
         it("expand/collapse");
         it("compound filter");
-      })
+      });
 
       describe("paint", () => {
         it("expand/collapse");
         it("color");
         it("pattern");
         it("opacity");
-      })
+      });
       // <=====
 
       describe("json-editor", () => {
@@ -263,165 +315,183 @@ describe("layers", () => {
         it.skip("parse error", () => {
           var bgId = createBackground();
 
-          driver.click(driver.getDataAttribute("layer-list-item:background:"+bgId));
+          when.click("layer-list-item:background:" + bgId);
 
           var errorSelector = ".CodeMirror-lint-marker-error";
-          driver.doesNotExists(errorSelector);
+          should.notExist(errorSelector);
 
-          driver.click(".CodeMirror");
+          when.click(".CodeMirror");
-          driver.typeKeys("\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013 {");
+          when.typeKeys(
-          driver.isExists(errorSelector);
+            "\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013 {"
+          );
+          should.isExists(errorSelector);
 
-          driver.click(driver.getDataAttribute("layer-editor.layer-id"));
+          when.click("layer-editor.layer-id");
         });
       });
-    })
+    });
   });
 
-  describe('fill', () => {
+  describe("fill", () => {
     it("add", () => {
-
+      var id = when.fillLayersModal({
-      var id = driver.fillLayersModal({
         type: "fill",
-        layer: "example"
+        layer: "example",
       });
 
-      driver.isStyleStoreEqual((a: any) => a.layers, [
+      should.equalStyleStore(
-        {
+        (a: any) => a.layers,
-          "id": id,
+        [
-          "type": 'fill',
+          {
-          "source": "example"
+            id: id,
-        }
+            type: "fill",
-      ]);
+            source: "example",
-    })
+          },
+        ]
+      );
+    });
 
     // TODO: Change source
-    it("change source")
+    it("change source");
   });
 
-  describe('line', () => {
+  describe("line", () => {
     it("add", () => {
-      var id = driver.fillLayersModal({
+      var id = when.fillLayersModal({
         type: "line",
-        layer: "example"
+        layer: "example",
       });
 
-      driver.isStyleStoreEqual((a: any) => a.layers, [
+      should.equalStyleStore(
-        {
+        (a: any) => a.layers,
-          "id": id,
+        [
-          "type": "line",
+          {
-          "source": "example",
+            id: id,
-        }
+            type: "line",
-      ]);
+            source: "example",
+          },
+        ]
+      );
     });
 
     it("groups", () => {
       // TODO
       // Click each of the layer groups.
-    })
+    });
   });
 
-  describe('symbol', () => {
+  describe("symbol", () => {
     it("add", () => {
-      var id = driver.fillLayersModal({
+      var id = when.fillLayersModal({
         type: "symbol",
-        layer: "example"
+        layer: "example",
       });
 
-      driver.isStyleStoreEqual((a: any) => a.layers, [
+      should.equalStyleStore(
-        {
+        (a: any) => a.layers,
-          "id": id,
+        [
-          "type": "symbol",
+          {
-          "source": "example",
+            id: id,
-        }
+            type: "symbol",
-      ]);
+            source: "example",
+          },
+        ]
+      );
     });
   });
 
-  describe('raster', () => {
+  describe("raster", () => {
     it("add", () => {
-      var id = driver.fillLayersModal({
+      var id = when.fillLayersModal({
         type: "raster",
-        layer: "raster"
+        layer: "raster",
       });
 
-      driver.isStyleStoreEqual((a: any) => a.layers, [
+      should.equalStyleStore(
-        {
+        (a: any) => a.layers,
-          "id": id,
+        [
-          "type": "raster",
+          {
-          "source": "raster",
+            id: id,
-        }
+            type: "raster",
-      ]);
+            source: "raster",
+          },
+        ]
+      );
     });
   });
 
-  describe('circle', () => {
+  describe("circle", () => {
     it("add", () => {
-      var id = driver.fillLayersModal({
+      var id = when.fillLayersModal({
         type: "circle",
-        layer: "example"
+        layer: "example",
       });
 
-      driver.isStyleStoreEqual((a: any) => a.layers, [
+      should.equalStyleStore(
-        {
+        (a: any) => a.layers,
-          "id": id,
+        [
-          "type": "circle",
+          {
-          "source": "example",
+            id: id,
-        }
+            type: "circle",
-      ]);
+            source: "example",
+          },
+        ]
+      );
     });
-
   });
 
-  describe('fill extrusion', () => {
+  describe("fill extrusion", () => {
     it("add", () => {
-      var id = driver.fillLayersModal({
+      var id = when.fillLayersModal({
         type: "fill-extrusion",
-        layer: "example"
+        layer: "example",
       });
 
-      driver.isStyleStoreEqual((a: any) => a.layers, [
+      should.equalStyleStore(
-        {
+        (a: any) => a.layers,
-          "id": id,
+        [
-          "type": 'fill-extrusion',
+          {
-          "source": "example"
+            id: id,
-        }
+            type: "fill-extrusion",
-      ]);
+            source: "example",
+          },
+        ]
+      );
     });
   });
 
-
   describe("groups", () => {
     it("simple", () => {
-      driver.setStyle("geojson");
+      when.setStyle("geojson");
 
-      driver.openLayersModal();
+      when.openLayersModal();
-      driver.fillLayersModal({
+      when.fillLayersModal({
         id: "foo",
-        type: "background"
+        type: "background",
-      })
+      });
 
-      driver.openLayersModal();
+      when.openLayersModal();
-      driver.fillLayersModal({
+      when.fillLayersModal({
         id: "foo_bar",
-        type: "background"
+        type: "background",
-      })
+      });
 
-      driver.openLayersModal();
+      when.openLayersModal();
-      driver.fillLayersModal({
+      when.fillLayersModal({
         id: "foo_bar_baz",
-        type: "background"
+        type: "background",
-      })
+      });
 
-      driver.isDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo"));
+      should.beVisible("layer-list-item:foo");
-      driver.isNotDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo_bar"));
-      driver.isNotDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo_bar_baz"));
 
-      driver.click(driver.getDataAttribute("layer-list-group:foo-0"));
+      should.notBeVisible("layer-list-item:foo_bar");
+      should.notBeVisible("layer-list-item:foo_bar_baz");
 
-      driver.isDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo"));
+      when.click("layer-list-group:foo-0");
-      driver.isDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo_bar"));
+
-      driver.isDisplayedInViewport(driver.getDataAttribute("layer-list-item:foo_bar_baz"));
+      should.beVisible("layer-list-item:foo");
-    })
+      should.beVisible("layer-list-item:foo_bar");
-  })
+      should.beVisible("layer-list-item:foo_bar_baz");
+    });
+  });
 });

cypress/e2e/map.cy.ts

@@ -1,25 +1,25 @@
-import driver from "./driver";
+import MaputnikDriver from "./driver";
 
 describe("map", () => {
-    describe("zoom level", () => {
+  let { beforeAndAfter, given, when, get, should } = new MaputnikDriver();
-      beforeEach(() => {
+  beforeAndAfter();
-        driver.beforeEach();
+  describe("zoom level", () => {
-      });
+    it("via url", () => {
-      it("via url", () => {
+      var zoomLevel = 12.37;
-        var zoomLevel = 12.37;
+      when.setStyle("geojson", zoomLevel);
-        driver.setStyle("geojson", zoomLevel);
+      should.beVisible("maplibre:ctrl-zoom");
-        driver.isDisplayedInViewport(".maplibregl-ctrl-zoom");
+      // HM TODO
-        // HM TODO
+      //driver.getText(".maplibregl-ctrl-zoom") === "Zoom "+(zoomLevel);
-        //driver.getText(".maplibregl-ctrl-zoom") === "Zoom "+(zoomLevel);
+    });
-      })
+
-      it("via map controls", () => {
+    it("via map controls", () => {
-        var zoomLevel = 12.37;
+      var zoomLevel = 12.37;
-        driver.setStyle("geojson", zoomLevel);
+      when.setStyle("geojson", zoomLevel);
-  
+
-        driver.click(".maplibregl-ctrl-zoom-in");
+      when.click("maplibre:ctrl-zoom");
-        driver.isDisplayedInViewport(".maplibregl-ctrl-zoom");
+      should.beVisible("maplibre:ctrl-zoom");
-        // HM TODO
+      // HM TODO
-        //driver.getText(".maplibregl-ctrl-zoom") === "Zoom "+(zoomLevel + 1);
+      //driver.getText(".maplibregl-ctrl-zoom") === "Zoom "+(zoomLevel + 1);
-      })
+    });
-    })
+  });
-  })
+});

cypress/e2e/modals.cy.ts

@@ -1,137 +1,160 @@
-import driver from "./driver";
+import MaputnikDriver from "./driver";
 
 describe("modals", () => {
+  let { beforeAndAfter, given, when, get, should } = new MaputnikDriver();
+  beforeAndAfter();
   beforeEach(() => {
-    driver.beforeEach();
+    when.setStyle("");
-    driver.setStyle('');
   });
   describe("open", () => {
     beforeEach(() => {
-        driver.click(driver.getDataAttribute("nav:open"));
+      when.click("nav:open");
     });
 
     it("close", () => {
-      driver.closeModal("modal:open");
+      when.closeModal("modal:open");
+      should.notExist("modal:open");
     });
 
     it.skip("upload", () => {
       // HM: I was not able to make the following choose file actually to select a file and close the modal...
-      driver.chooseExampleFile();
+      when.chooseExampleFile();
 
-      driver.isStyleStoreEqualToExampleFileData();
+      should.isStyleStoreEqualToExampleFileData();
     });
 
     it("load from url", () => {
-      var styleFileUrl = driver.getExampleFileUrl();
+      var styleFileUrl = get.getExampleFileUrl();
 
-      driver.setValue(driver.getDataAttribute("modal:open.url.input"), styleFileUrl);
+      when.setValue(get.getDataAttribute("modal:open.url.input"), styleFileUrl);
-      driver.click(driver.getDataAttribute("modal:open.url.button"))
+      when.click("modal:open.url.button");
-      driver.waitForExampleFileRequset();
+      when.waitForExampleFileRequset();
 
-      driver.isStyleStoreEqualToExampleFileData();
+      should.isStyleStoreEqualToExampleFileData();
     });
-  })
+  });
 
   describe("shortcuts", () => {
     it("open/close", () => {
-      driver.setStyle('');
+      when.setStyle("");
-
+      when.typeKeys("?");
-      driver.typeKeys("?");
+      when.closeModal("modal:shortcuts");
-
+      should.notExist("modal:shortcuts");
-      driver.isDisplayedInViewport(driver.getDataAttribute("modal:shortcuts"));
-
-      driver.closeModal("modal:shortcuts");
     });
-
   });
 
   describe("export", () => {
     beforeEach(() => {
-      driver.click(driver.getDataAttribute("nav:export"));
+      when.click("nav:export");
     });
 
     it("close", () => {
-      driver.closeModal("modal:export");
+      when.closeModal("modal:export");
+      should.notExist("modal:export");
     });
 
     // TODO: Work out how to download a file and check the contents
-    it("download")
+    it("download");
-
+  });
-  })
 
   describe("sources", () => {
-    it("active sources")
+    it("active sources");
-    it("public source")
+    it("public source");
-    it("add new source")
+    it("add new source");
-  })
+  });
 
   describe("inspect", () => {
     it("toggle", () => {
-      driver.setStyle('geojson');
+      when.setStyle("geojson");
 
-      driver.select(driver.getDataAttribute("nav:inspect", "select"), "inspect");
+      when.select(get.getDataAttribute("nav:inspect", "select"), "inspect");
-    })
+    });
-  })
+  });
 
   describe("style settings", () => {
     beforeEach(() => {
-      driver.click(driver.getDataAttribute("nav:settings"));
+      when.click("nav:settings");
     });
 
     it("name", () => {
-      driver.setValue(driver.getDataAttribute("modal:settings.name"), "foobar");
+      when.setValue(get.getDataAttribute("modal:settings.name"), "foobar");
-      driver.click(driver.getDataAttribute("modal:settings.owner"));
+      when.click("modal:settings.owner");
 
-      driver.isStyleStoreEqual((obj) => obj.name, "foobar");
+      should.equalStyleStore((obj) => obj.name, "foobar");
-    })
+    });
     it("owner", () => {
-      driver.setValue(driver.getDataAttribute("modal:settings.owner"), "foobar")
+      when.setValue(get.getDataAttribute("modal:settings.owner"), "foobar");
-      driver.click(driver.getDataAttribute("modal:settings.name"));
+      when.click("modal:settings.name");
 
-      driver.isStyleStoreEqual((obj) => obj.owner, "foobar");
+      should.equalStyleStore((obj) => obj.owner, "foobar");
-    })
+    });
     it("sprite url", () => {
-      driver.setValue(driver.getDataAttribute("modal:settings.sprite"), "http://example.com")
+      when.setValue(
-      driver.click(driver.getDataAttribute("modal:settings.name"));
+        get.getDataAttribute("modal:settings.sprite"),
+        "http://example.com"
+      );
+      when.click("modal:settings.name");
 
-      driver.isStyleStoreEqual((obj) => obj.sprite, "http://example.com");
+      should.equalStyleStore((obj) => obj.sprite, "http://example.com");
-    })
+    });
     it("glyphs url", () => {
-      var glyphsUrl = "http://example.com/{fontstack}/{range}.pbf"
+      var glyphsUrl = "http://example.com/{fontstack}/{range}.pbf";
-      driver.setValue(driver.getDataAttribute("modal:settings.glyphs"), glyphsUrl);
+      when.setValue(get.getDataAttribute("modal:settings.glyphs"), glyphsUrl);
-      driver.click(driver.getDataAttribute("modal:settings.name"));
+      when.click("modal:settings.name");
 
-      driver.isStyleStoreEqual((obj) => obj.glyphs, glyphsUrl);
+      should.equalStyleStore((obj) => obj.glyphs, glyphsUrl);
-    })
+    });
 
     it("maptiler access token", () => {
       var apiKey = "testing123";
-      driver.setValue(driver.getDataAttribute("modal:settings.maputnik:openmaptiles_access_token"), apiKey);
+      when.setValue(
-      driver.click(driver.getDataAttribute("modal:settings.name"));
+        get.getDataAttribute(
+          "modal:settings.maputnik:openmaptiles_access_token"
+        ),
+        apiKey
+      );
+      when.click("modal:settings.name");
 
-      driver.isStyleStoreEqual((obj) => obj.metadata["maputnik:openmaptiles_access_token"], apiKey);
+      should.equalStyleStore(
-    })
+        (obj) => obj.metadata["maputnik:openmaptiles_access_token"],
+        apiKey
+      );
+    });
 
     it("thunderforest access token", () => {
       var apiKey = "testing123";
-      driver.setValue(driver.getDataAttribute("modal:settings.maputnik:thunderforest_access_token"), apiKey);
+      when.setValue(
-      driver.click(driver.getDataAttribute("modal:settings.name"));
+        get.getDataAttribute(
+          "modal:settings.maputnik:thunderforest_access_token"
+        ),
+        apiKey
+      );
+      when.click("modal:settings.name");
 
-      driver.isStyleStoreEqual((obj) => obj.metadata["maputnik:thunderforest_access_token"], apiKey);
+      should.equalStyleStore(
-    })
+        (obj) => obj.metadata["maputnik:thunderforest_access_token"],
+        apiKey
+      );
+    });
 
     it("style renderer", () => {
-      cy.on('uncaught:exception', () => false); // this is due to the fact that this is an invalid style for openlayers
+      cy.on("uncaught:exception", () => false); // this is due to the fact that this is an invalid style for openlayers
-      driver.select(driver.getDataAttribute("modal:settings.maputnik:renderer"), "ol");
+      when.select(
-      driver.isSelected(driver.getDataAttribute("modal:settings.maputnik:renderer"), "ol");
+        get.getDataAttribute("modal:settings.maputnik:renderer"),
-      
+        "ol"
-      driver.click(driver.getDataAttribute("modal:settings.name"));
+      );
+      should.isSelected(
+        get.getDataAttribute("modal:settings.maputnik:renderer"),
+        "ol"
+      );
 
-      driver.isStyleStoreEqual((obj) => obj.metadata["maputnik:renderer"], "ol");
+      when.click("modal:settings.name");
-    })
+
-  })
+      should.equalStyleStore((obj) => obj.metadata["maputnik:renderer"], "ol");
+    });
+  });
 
   describe("sources", () => {
-    it("toggle")
+    it("toggle");
-  })
+  });
-})
+});

cypress/support/e2e.ts

@@ -14,7 +14,8 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import "cypress-plugin-tab";
+import "./commands";
 
 // Alternatively you can use CommonJS syntax:
-// require('./commands')
+// require('./commands')

package.json

@@ -86,6 +86,7 @@
   },
   "devDependencies": {
     "@rollup/plugin-replace": "^5.0.5",
+    "@shellygo/cypress-test-utils": "^2.0.9",
     "@storybook/addon-a11y": "^7.6.5",
     "@storybook/addon-actions": "^7.6.5",
     "@storybook/addon-links": "^7.6.5",

src/components/AppToolbar.jsx

@@ -1,24 +1,33 @@
-import React from 'react'
+import classnames from "classnames";
-import PropTypes from 'prop-types'
+import { detect } from "detect-browser";
-import classnames from 'classnames'
+import PropTypes from "prop-types";
-import {detect} from 'detect-browser';
+import React from "react";
 
-import {MdFileDownload, MdOpenInBrowser, MdSettings, MdLayers, MdHelpOutline, MdFindInPage, MdAssignmentTurnedIn} from 'react-icons/md'
+import {
-import pkgJson from '../../package.json'
+  MdAssignmentTurnedIn,
+  MdFileDownload,
+  MdFindInPage,
+  MdHelpOutline,
+  MdLayers,
+  MdOpenInBrowser,
+  MdSettings,
+} from "react-icons/md";
 
+import logoImage from "maputnik-design/logos/logo-color.svg";
+import pkgJson from "../../package.json";
 
 // This is required because of <https://stackoverflow.com/a/49846426>, there isn't another way to detect support that I'm aware of.
 const browser = detect();
-const colorAccessibilityFiltersEnabled = ['chrome', 'firefox'].indexOf(browser.name) > -1;
+const colorAccessibilityFiltersEnabled =
-
+  ["chrome", "firefox"].indexOf(browser.name) > -1;
 
 class IconText extends React.Component {
   static propTypes = {
     children: PropTypes.node,
-  }
+  };
 
   render() {
-    return <span className="maputnik-icon-text">{this.props.children}</span>
+    return <span className="maputnik-icon-text">{this.props.children}</span>;
   }
 }
 
@@ -28,17 +37,19 @@ class ToolbarLink extends React.Component {
     children: PropTypes.node,
     href: PropTypes.string,
     onToggleModal: PropTypes.func,
-  }
+  };
 
   render() {
-    return <a
+    return (
-      className={classnames('maputnik-toolbar-link', this.props.className)}
+      <a
-      href={this.props.href}
+        className={classnames("maputnik-toolbar-link", this.props.className)}
-      rel="noopener noreferrer"
+        href={this.props.href}
-      target="_blank"
+        rel="noopener noreferrer"
-    >
+        target="_blank"
-      {this.props.children}
+      >
-    </a>
+        {this.props.children}
+      </a>
+    );
   }
 }
 
@@ -47,36 +58,41 @@ class ToolbarLinkHighlighted extends React.Component {
     className: PropTypes.string,
     children: PropTypes.node,
     href: PropTypes.string,
-    onToggleModal: PropTypes.func
+    onToggleModal: PropTypes.func,
-  }
+  };
 
   render() {
-    return <a
+    return (
-      className={classnames('maputnik-toolbar-link', "maputnik-toolbar-link--highlighted", this.props.className)}
+      <a
-      href={this.props.href}
+        className={classnames(
-      rel="noopener noreferrer"
+          "maputnik-toolbar-link",
-      target="_blank"
+          "maputnik-toolbar-link--highlighted",
-    >
+          this.props.className
-      <span className="maputnik-toolbar-link-wrapper">
+        )}
-        {this.props.children}
+        href={this.props.href}
-      </span>
+        rel="noopener noreferrer"
-    </a>
+        target="_blank"
+      >
+        <span className="maputnik-toolbar-link-wrapper">
+          {this.props.children}
+        </span>
+      </a>
+    );
   }
 }
 
 class ToolbarSelect extends React.Component {
   static propTypes = {
     children: PropTypes.node,
-    wdKey: PropTypes.string
+    wdKey: PropTypes.string,
-  }
+  };
 
   render() {
-    return <div
+    return (
-      className='maputnik-toolbar-select'
+      <div className="maputnik-toolbar-select" data-wd-key={this.props.wdKey}>
-      data-wd-key={this.props.wdKey}
+        {this.props.children}
-    >
+      </div>
-      {this.props.children}
+    );
-    </div>
   }
 }
 
@@ -84,17 +100,19 @@ class ToolbarAction extends React.Component {
   static propTypes = {
     children: PropTypes.node,
     onClick: PropTypes.func,
-    wdKey: PropTypes.string
+    wdKey: PropTypes.string,
-  }
+  };
 
   render() {
-    return <button
+    return (
-      className='maputnik-toolbar-action'
+      <button
-      data-wd-key={this.props.wdKey}
+        className="maputnik-toolbar-action"
-      onClick={this.props.onClick}
+        data-wd-key={this.props.wdKey}
-    >
+        onClick={this.props.onClick}
-      {this.props.children}
+      >
-    </button>
+        {this.props.children}
+      </button>
+    );
   }
 }
 
@@ -112,7 +130,7 @@ export default class AppToolbar extends React.Component {
     onSetMapState: PropTypes.func,
     mapState: PropTypes.string,
     renderer: PropTypes.string,
-  }
+  };
 
   state = {
     isOpen: {
@@ -121,8 +139,8 @@ export default class AppToolbar extends React.Component {
       open: false,
       add: false,
       export: false,
-    }
+    },
-  }
+  };
 
   handleSelection(val) {
     this.props.onSetMapState(val);
@@ -131,12 +149,11 @@ export default class AppToolbar extends React.Component {
   onSkip = (target) => {
     if (target === "map") {
       document.querySelector(".maplibregl-canvas").focus();
-    }
+    } else {
-    else {
+      const el = document.querySelector("#skip-target-" + target);
-      const el = document.querySelector("#skip-target-"+target);
       el.focus();
     }
-  }
+  };
 
   render() {
     const views = [
@@ -149,7 +166,7 @@ export default class AppToolbar extends React.Component {
         id: "inspect",
         group: "general",
         title: "Inspect",
-        disabled: this.props.renderer === 'ol',
+        disabled: this.props.renderer === "ol",
       },
       {
         id: "filter-deuteranopia",
@@ -181,102 +198,137 @@ export default class AppToolbar extends React.Component {
       return view.id === this.props.mapState;
     });
 
-    return <nav className='maputnik-toolbar'>
+    return (
-      <div className="maputnik-toolbar__inner">
+      <nav className="maputnik-toolbar">
-        <div
+        <div className="maputnik-toolbar__inner">
-          className="maputnik-toolbar-logo-container"
+          <div className="maputnik-toolbar-logo-container">
-        >
+            {/* Keyboard accessible quick links */}
-          {/* Keyboard accessible quick links */}
+            <button
-          <button
+              data-wd-key="root:skip:layer-list"
-            data-wd-key="root:skip:layer-list"
+              className="maputnik-toolbar-skip"
-            className="maputnik-toolbar-skip"
+              onClick={(e) => this.onSkip("layer-list")}
-            onClick={e => this.onSkip("layer-list")}
+            >
+              Layers list
+            </button>
+            <button
+              data-wd-key="root:skip:layer-editor"
+              className="maputnik-toolbar-skip"
+              onClick={(e) => this.onSkip("layer-editor")}
+            >
+              Layer editor
+            </button>
+            <button
+              data-wd-key="root:skip:map-view"
+              className="maputnik-toolbar-skip"
+              onClick={(e) => this.onSkip("map")}
+            >
+              Map view
+            </button>
+            <a
+              className="maputnik-toolbar-logo"
+              target="blank"
+              rel="noreferrer noopener"
+              href="https://github.com/maputnik/editor"
+            >
+              <span dangerouslySetInnerHTML={{ __html: logoImage }} />
+              <h1>
+                <span className="maputnik-toolbar-name">{pkgJson.name}</span>
+                <span className="maputnik-toolbar-version">
+                  v{pkgJson.version}
+                </span>
+              </h1>
+            </a>
+          </div>
+          <div
+            className="maputnik-toolbar__actions"
+            role="navigation"
+            aria-label="Toolbar"
           >
-            Layers list
+            <ToolbarAction
-          </button>
+              wdKey="nav:open"
-          <button
+              onClick={this.props.onToggleModal.bind(this, "open")}
-            data-wd-key="root:skip:layer-editor"
+            >
-            className="maputnik-toolbar-skip"
+              <MdOpenInBrowser />
-            onClick={e => this.onSkip("layer-editor")}
+              <IconText>Open</IconText>
-          >
+            </ToolbarAction>
-            Layer editor
+            <ToolbarAction
-          </button>
+              wdKey="nav:export"
-          <button
+              onClick={this.props.onToggleModal.bind(this, "export")}
-            data-wd-key="root:skip:map-view"
+            >
-            className="maputnik-toolbar-skip"
+              <MdFileDownload />
-            onClick={e => this.onSkip("map")}
+              <IconText>Export</IconText>
-          >
+            </ToolbarAction>
-            Map view
+            <ToolbarAction
-          </button>
+              wdKey="nav:sources"
-          <a
+              onClick={this.props.onToggleModal.bind(this, "sources")}
-            className="maputnik-toolbar-logo"
+            >
-            target="blank"
+              <MdLayers />
-            rel="noreferrer noopener"
+              <IconText>Data Sources</IconText>
-            href="https://github.com/maputnik/editor"
+            </ToolbarAction>
-          >
+            <ToolbarAction
-            <img src="node_modules/maputnik-design/logos/logo-color.svg" />
+              wdKey="nav:settings"
-            <h1>
+              onClick={this.props.onToggleModal.bind(this, "settings")}
-              <span className="maputnik-toolbar-name">{pkgJson.name}</span>
+            >
-              <span className="maputnik-toolbar-version">v{pkgJson.version}</span>
+              <MdSettings />
-            </h1>
+              <IconText>Style Settings</IconText>
-          </a>
+            </ToolbarAction>
-        </div>
-        <div className="maputnik-toolbar__actions" role="navigation" aria-label="Toolbar">
-          <ToolbarAction wdKey="nav:open" onClick={this.props.onToggleModal.bind(this, 'open')}>
-            <MdOpenInBrowser />
-            <IconText>Open</IconText>
-          </ToolbarAction>
-          <ToolbarAction wdKey="nav:export" onClick={this.props.onToggleModal.bind(this, 'export')}>
-            <MdFileDownload />
-            <IconText>Export</IconText>
-          </ToolbarAction>
-          <ToolbarAction wdKey="nav:sources" onClick={this.props.onToggleModal.bind(this, 'sources')}>
-            <MdLayers />
-            <IconText>Data Sources</IconText>
-          </ToolbarAction>
-          <ToolbarAction wdKey="nav:settings" onClick={this.props.onToggleModal.bind(this, 'settings')}>
-            <MdSettings />
-            <IconText>Style Settings</IconText>
-          </ToolbarAction>
 
-          <ToolbarSelect wdKey="nav:inspect">
+            <ToolbarSelect wdKey="nav:inspect">
-            <MdFindInPage />
+              <MdFindInPage />
-            <label>View
+              <label>
-              <select
+                View
-                className="maputnik-select"
+                <select
-                onChange={(e) => this.handleSelection(e.target.value)}
+                  className="maputnik-select"
-                value={currentView.id}
+                  data-wd-key="maputnik-select"
-              >
+                  onChange={(e) => this.handleSelection(e.target.value)}
-                {views.filter(v => v.group === "general").map((item) => {
+                  value={currentView.id}
-                  return (
+                >
-                    <option key={item.id} value={item.id} disabled={item.disabled}>
+                  {views
-                      {item.title}
+                    .filter((v) => v.group === "general")
-                    </option>
+                    .map((item) => {
-                  );
+                      return (
-                })}
+                        <option
-                <optgroup label="Color accessibility">
+                          key={item.id}
-                  {views.filter(v => v.group === "color-accessibility").map((item) => {
+                          value={item.id}
-                    return (
+                          disabled={item.disabled}
-                      <option key={item.id} value={item.id} disabled={item.disabled}>
+                          data-wd-key={item.id}
-                        {item.title}
+                        >
-                      </option>
+                          {item.title}
-                    );
+                        </option>
-                  })}
+                      );
-                </optgroup>
+                    })}
-              </select>
+                  <optgroup label="Color accessibility">
-            </label>
+                    {views
-          </ToolbarSelect>
+                      .filter((v) => v.group === "color-accessibility")
+                      .map((item) => {
+                        return (
+                          <option
+                            key={item.id}
+                            value={item.id}
+                            disabled={item.disabled}
+                          >
+                            {item.title}
+                          </option>
+                        );
+                      })}
+                  </optgroup>
+                </select>
+              </label>
+            </ToolbarSelect>
 
-          <ToolbarLink href={"https://github.com/maputnik/editor/wiki"}>
+            <ToolbarLink href={"https://github.com/maputnik/editor/wiki"}>
-            <MdHelpOutline />
+              <MdHelpOutline />
-            <IconText>Help</IconText>
+              <IconText>Help</IconText>
-          </ToolbarLink>
+            </ToolbarLink>
-          <ToolbarLinkHighlighted href={"https://gregorywolanski.typeform.com/to/cPgaSY"}>
+            <ToolbarLinkHighlighted
-            <MdAssignmentTurnedIn />
+              href={"https://gregorywolanski.typeform.com/to/cPgaSY"}
-            <IconText>Take the Maputnik Survey</IconText>
+            >
-          </ToolbarLinkHighlighted>
+              <MdAssignmentTurnedIn />
+              <IconText>Take the Maputnik Survey</IconText>
+            </ToolbarLinkHighlighted>
+          </div>
         </div>
-      </div>
+      </nav>
-    </nav>
+    );
   }
 }

src/components/LayerEditor.jsx

@@ -1,47 +1,46 @@
-import React from 'react'
+import PropTypes from "prop-types";
-import PropTypes from 'prop-types'
+import React from "react";
-import { Wrapper, Button, Menu, MenuItem } from 'react-aria-menubutton'
+import { Button, Menu, MenuItem, Wrapper } from "react-aria-menubutton";
 
-import FieldJson from './FieldJson'
+import { Accordion } from "react-accessible-accordion";
-import FilterEditor from './FilterEditor'
+import FieldComment from "./FieldComment";
-import PropertyGroup from './PropertyGroup'
+import FieldId from "./FieldId";
-import LayerEditorGroup from './LayerEditorGroup'
+import FieldJson from "./FieldJson";
-import FieldType from './FieldType'
+import FieldMaxZoom from "./FieldMaxZoom";
-import FieldId from './FieldId'
+import FieldMinZoom from "./FieldMinZoom";
-import FieldMinZoom from './FieldMinZoom'
+import FieldSource from "./FieldSource";
-import FieldMaxZoom from './FieldMaxZoom'
+import FieldSourceLayer from "./FieldSourceLayer";
-import FieldComment from './FieldComment'
+import FieldType from "./FieldType";
-import FieldSource from './FieldSource'
+import FilterEditor from "./FilterEditor";
-import FieldSourceLayer from './FieldSourceLayer'
+import LayerEditorGroup from "./LayerEditorGroup";
-import {Accordion} from 'react-accessible-accordion';
+import PropertyGroup from "./PropertyGroup";
 
-import {MdMoreVert} from 'react-icons/md'
+import { MdMoreVert } from "react-icons/md";
 
-import { changeType, changeProperty } from '../libs/layer'
+import layout from "../config/layout.json";
-import layout from '../config/layout.json'
+import { changeProperty, changeType } from "../libs/layer";
-import {formatLayerId} from '../util/format';
+import { formatLayerId } from "../util/format";
 
-
+function getLayoutForType(type) {
-function getLayoutForType (type) {
   return layout[type] ? layout[type] : layout.invalid;
 }
 
 function layoutGroups(layerType) {
   const layerGroup = {
-    title: 'Layer',
+    title: "Layer",
-    type: 'layer'
+    type: "layer",
-  }
+  };
   const filterGroup = {
-    title: 'Filter',
+    title: "Filter",
-    type: 'filter'
+    type: "filter",
-  }
+  };
   const editorGroup = {
-    title: 'JSON Editor',
+    title: "JSON Editor",
-    type: 'jsoneditor'
+    type: "jsoneditor",
-  }
+  };
   return [layerGroup, filterGroup]
     .concat(getLayoutForType(layerType).groups)
-    .concat([editorGroup])
+    .concat([editorGroup]);
 }
 
 /** Layer editor supporting multiple types of layers. */
@@ -61,277 +60,320 @@ export default class LayerEditor extends React.Component {
     isLastLayer: PropTypes.bool,
     layerIndex: PropTypes.number,
     errors: PropTypes.array,
-  }
+  };
 
   static defaultProps = {
     onLayerChanged: () => {},
     onLayerIdChange: () => {},
     onLayerDestroyed: () => {},
-  }
+  };
 
   static childContextTypes = {
-    reactIconBase: PropTypes.object
+    reactIconBase: PropTypes.object,
-  }
+  };
 
   constructor(props) {
-    super(props)
+    super(props);
 
     //TODO: Clean this up and refactor into function
-    const editorGroups = {}
+    const editorGroups = {};
-    layoutGroups(this.props.layer.type).forEach(group => {
+    layoutGroups(this.props.layer.type).forEach((group) => {
-      editorGroups[group.title] = true
+      editorGroups[group.title] = true;
-    })
+    });
 
-    this.state = { editorGroups }
+    this.state = { editorGroups };
   }
 
   static getDerivedStateFromProps(props, state) {
-    const additionalGroups = { ...state.editorGroups }
+    const additionalGroups = { ...state.editorGroups };
 
-    getLayoutForType(props.layer.type).groups.forEach(group => {
+    getLayoutForType(props.layer.type).groups.forEach((group) => {
-      if(!(group.title in additionalGroups)) {
+      if (!(group.title in additionalGroups)) {
-        additionalGroups[group.title] = true
+        additionalGroups[group.title] = true;
       }
-    })
+    });
 
     return {
-      editorGroups: additionalGroups
+      editorGroups: additionalGroups,
     };
   }
 
-  getChildContext () {
+  getChildContext() {
     return {
       reactIconBase: {
         size: 14,
-        color: '#8e8e8e',
+        color: "#8e8e8e",
-      }
+      },
-    }
+    };
   }
 
   changeProperty(group, property, newValue) {
     this.props.onLayerChanged(
       this.props.layerIndex,
       changeProperty(this.props.layer, group, property, newValue)
-    )
+    );
   }
 
   onGroupToggle(groupTitle, active) {
     const changedActiveGroups = {
       ...this.state.editorGroups,
       [groupTitle]: active,
-    }
+    };
     this.setState({
-      editorGroups: changedActiveGroups
+      editorGroups: changedActiveGroups,
-    })
+    });
   }
 
   renderGroupType(type, fields) {
-    let comment = ""
+    let comment = "";
-    if(this.props.layer.metadata) {
+    if (this.props.layer.metadata) {
-      comment = this.props.layer.metadata['maputnik:comment']
+      comment = this.props.layer.metadata["maputnik:comment"];
     }
-    const {errors, layerIndex} = this.props;
+    const { errors, layerIndex } = this.props;
 
     const errorData = {};
-    errors.forEach(error => {
+    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
+          message: error.parsed.data.message,
         };
       }
-    })
+    });
 
     let sourceLayerIds;
-    if(this.props.sources.hasOwnProperty(this.props.layer.source)) {
+    if (this.props.sources.hasOwnProperty(this.props.layer.source)) {
       sourceLayerIds = this.props.sources[this.props.layer.source].layers;
     }
 
-    switch(type) {
+    switch (type) {
-      case 'layer': return <div>
+      case "layer":
-        <FieldId
+        return (
-          value={this.props.layer.id}
+          <div>
-          wdKey="layer-editor.layer-id"
+            <FieldId
-          error={errorData.id}
+              value={this.props.layer.id}
-          onChange={newId => this.props.onLayerIdChange(this.props.layerIndex, this.props.layer.id, newId)}
+              wdKey="layer-editor.layer-id"
-        />
+              error={errorData.id}
-        <FieldType
+              onChange={(newId) =>
-          disabled={true}
+                this.props.onLayerIdChange(
-          error={errorData.type}
+                  this.props.layerIndex,
-          value={this.props.layer.type}
+                  this.props.layer.id,
-          onChange={newType => this.props.onLayerChanged(
+                  newId
-            this.props.layerIndex,
+                )
-            changeType(this.props.layer, newType)
+              }
-          )}
+            />
-        />
+            <FieldType
-        {this.props.layer.type !== 'background' && <FieldSource
+              disabled={true}
-          error={errorData.source}
+              error={errorData.type}
-          sourceIds={Object.keys(this.props.sources)}
+              value={this.props.layer.type}
-          value={this.props.layer.source}
+              onChange={(newType) =>
-          onChange={v => this.changeProperty(null, 'source', v)}
+                this.props.onLayerChanged(
-        />
+                  this.props.layerIndex,
-        }
+                  changeType(this.props.layer, newType)
-        {['background', 'raster', 'hillshade', 'heatmap'].indexOf(this.props.layer.type) < 0 &&
+                )
-        <FieldSourceLayer
+              }
-          error={errorData['source-layer']}
+            />
-          sourceLayerIds={sourceLayerIds}
+            {this.props.layer.type !== "background" && (
-          value={this.props.layer['source-layer']}
+              <FieldSource
-          onChange={v => this.changeProperty(null, 'source-layer', v)}
+                error={errorData.source}
-        />
+                sourceIds={Object.keys(this.props.sources)}
-        }
+                value={this.props.layer.source}
-        <FieldMinZoom
+                onChange={(v) => this.changeProperty(null, "source", v)}
-          error={errorData.minzoom}
+              />
-          value={this.props.layer.minzoom}
+            )}
-          onChange={v => this.changeProperty(null, 'minzoom', v)}
+            {["background", "raster", "hillshade", "heatmap"].indexOf(
-        />
+              this.props.layer.type
-        <FieldMaxZoom
+            ) < 0 && (
-          error={errorData.maxzoom}
+              <FieldSourceLayer
-          value={this.props.layer.maxzoom}
+                error={errorData["source-layer"]}
-          onChange={v => this.changeProperty(null, 'maxzoom', v)}
+                sourceLayerIds={sourceLayerIds}
-        />
+                value={this.props.layer["source-layer"]}
-        <FieldComment
+                onChange={(v) => this.changeProperty(null, "source-layer", v)}
-          error={errorData.comment}
+              />
-          value={comment}
+            )}
-          onChange={v => this.changeProperty('metadata', 'maputnik:comment', v == ""  ? undefined : v)}
+            <FieldMinZoom
-        />
+              error={errorData.minzoom}
-      </div>
+              value={this.props.layer.minzoom}
-      case 'filter': return <div>
+              onChange={(v) => this.changeProperty(null, "minzoom", v)}
-        <div className="maputnik-filter-editor-wrapper">
+            />
-          <FilterEditor
+            <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.filter}
+                properties={
+                  this.props.vectorLayers[this.props.layer["source-layer"]]
+                }
+                onChange={(f) => this.changeProperty(null, "filter", f)}
+              />
+            </div>
+          </div>
+        );
+      case "properties":
+        return (
+          <PropertyGroup
             errors={errorData}
-            filter={this.props.layer.filter}
+            layer={this.props.layer}
-            properties={this.props.vectorLayers[this.props.layer['source-layer']]}
+            groupFields={fields}
-            onChange={f => this.changeProperty(null, 'filter', f)}
+            spec={this.props.spec}
+            onChange={this.changeProperty.bind(this)}
           />
-        </div>
+        );
-      </div>
+      case "jsoneditor":
-      case 'properties':
+        return (
-        return <PropertyGroup
+          <FieldJson
-          errors={errorData}
+            layer={this.props.layer}
-          layer={this.props.layer}
+            onChange={(layer) => {
-          groupFields={fields}
+              this.props.onLayerChanged(this.props.layerIndex, layer);
-          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
-            );
-          }}
-        />
     }
   }
 
   moveLayer(offset) {
     this.props.onMoveLayer({
       oldIndex: this.props.layerIndex,
-      newIndex: this.props.layerIndex+offset
+      newIndex: this.props.layerIndex + offset,
-    })
+    });
   }
 
   render() {
     const groupIds = [];
-    const layerType = this.props.layer.type
+    const layerType = this.props.layer.type;
-    const groups = layoutGroups(layerType).filter(group => {
+    const groups = layoutGroups(layerType)
-      return !(layerType === 'background' && group.type === 'source')
+      .filter((group) => {
-    }).map(group => {
+        return !(layerType === "background" && group.type === "source");
-      const groupId = group.title.replace(/ /g, "_");
+      })
-      groupIds.push(groupId);
+      .map((group) => {
-      return <LayerEditorGroup
+        const groupId = group.title.replace(/ /g, "_");
-        data-wd-key={group.title}
+        groupIds.push(groupId);
-        id={groupId}
+        return (
-        key={group.title}
+          <LayerEditorGroup
-        title={group.title}
+            data-wd-key={group.title}
-        isActive={this.state.editorGroups[group.title]}
+            id={groupId}
-        onActiveToggle={this.onGroupToggle.bind(this, group.title)}
+            key={group.title}
-      >
+            title={group.title}
-        {this.renderGroupType(group.type, group.fields)}
+            isActive={this.state.editorGroups[group.title]}
-      </LayerEditorGroup>
+            onActiveToggle={this.onGroupToggle.bind(this, group.title)}
-    })
+          >
+            {this.renderGroupType(group.type, group.fields)}
+          </LayerEditorGroup>
+        );
+      });
 
-    const layout = this.props.layer.layout || {}
+    const layout = this.props.layer.layout || {};
 
     const items = {
       delete: {
         text: "Delete",
-        handler: () => this.props.onLayerDestroy(this.props.layerIndex)
+        handler: () => this.props.onLayerDestroy(this.props.layerIndex),
       },
       duplicate: {
         text: "Duplicate",
-        handler: () => this.props.onLayerCopy(this.props.layerIndex)
+        handler: () => this.props.onLayerCopy(this.props.layerIndex),
       },
       hide: {
-        text: (layout.visibility === "none") ? "Show" : "Hide",
+        text: layout.visibility === "none" ? "Show" : "Hide",
-        handler: () => this.props.onLayerVisibilityToggle(this.props.layerIndex)
+        handler: () =>
+          this.props.onLayerVisibilityToggle(this.props.layerIndex),
       },
       moveLayerUp: {
         text: "Move layer up",
         // Not actually used...
         disabled: this.props.isFirstLayer,
-        handler: () => this.moveLayer(-1)
+        handler: () => this.moveLayer(-1),
       },
       moveLayerDown: {
         text: "Move layer down",
         // Not actually used...
         disabled: this.props.isLastLayer,
-        handler: () => this.moveLayer(+1)
+        handler: () => this.moveLayer(+1),
-      }
+      },
-    }
+    };
 
     function handleSelection(id, event) {
       event.stopPropagation;
       items[id].handler();
     }
 
-    return <section className="maputnik-layer-editor"
+    return (
-      role="main"
+      <section
-      aria-label="Layer editor"
+        className="maputnik-layer-editor"
-    >
+        role="main"
-      <header>
+        aria-label="Layer editor"
-        <div className="layer-header">
-          <h2 className="layer-header__title">
-            Layer: {formatLayerId(this.props.layer.id)}
-          </h2>
-          <div className="layer-header__info">
-            <Wrapper
-              className='more-menu'
-              onSelection={handleSelection}
-              closeOnSelection={false}
-            >
-              <Button id="skip-target-layer-editor" className='more-menu__button' title="Layer options">
-                <MdMoreVert className="more-menu__button__svg" />
-              </Button>
-              <Menu>
-                <ul className="more-menu__menu">
-                  {Object.keys(items).map((id, idx) => {
-                    const item = items[id];
-                    return <li key={id}>
-                      <MenuItem value={id} className='more-menu__menu__item'>
-                        {item.text}
-                      </MenuItem>
-                    </li>
-                  })}
-                </ul>
-              </Menu>
-            </Wrapper>
-          </div>
-        </div>
-
-      </header>
-      <Accordion
-        allowMultipleExpanded={true}
-        allowZeroExpanded={true}
-        preExpanded={groupIds}
       >
-        {groups}
+        <header>
-      </Accordion>
+          <div className="layer-header">
-    </section>
+            <h2 className="layer-header__title">
+              Layer: {formatLayerId(this.props.layer.id)}
+            </h2>
+            <div className="layer-header__info">
+              <Wrapper
+                className="more-menu"
+                onSelection={handleSelection}
+                closeOnSelection={false}
+              >
+                <Button
+                  data-wd-key="skip-target-layer-editor"
+                  id="skip-target-layer-editor"
+                  className="more-menu__button"
+                  title="Layer options"
+                >
+                  <MdMoreVert className="more-menu__button__svg" />
+                </Button>
+                <Menu>
+                  <ul className="more-menu__menu">
+                    {Object.keys(items).map((id, idx) => {
+                      const item = items[id];
+                      return (
+                        <li key={id}>
+                          <MenuItem
+                            value={id}
+                            className="more-menu__menu__item"
+                          >
+                            {item.text}
+                          </MenuItem>
+                        </li>
+                      );
+                    })}
+                  </ul>
+                </Menu>
+              </Wrapper>
+            </div>
+          </div>
+        </header>
+        <Accordion
+          allowMultipleExpanded={true}
+          allowZeroExpanded={true}
+          preExpanded={groupIds}
+        >
+          {groups}
+        </Accordion>
+      </section>
+    );
   }
 }

src/components/LayerList.jsx

@@ -1,13 +1,13 @@
-import React from 'react'
+import classnames from "classnames";
-import PropTypes from 'prop-types'
+import lodash from "lodash";
-import classnames from 'classnames'
+import PropTypes from "prop-types";
-import lodash from 'lodash';
+import React from "react";
 
-import LayerListGroup from './LayerListGroup'
+import LayerListGroup from "./LayerListGroup";
-import LayerListItem from './LayerListItem'
+import LayerListItem from "./LayerListItem";
-import ModalAdd from './ModalAdd'
+import ModalAdd from "./ModalAdd";
 
-import {SortableContainer} from 'react-sortable-hoc';
+import { SortableContainer } from "react-sortable-hoc";
 
 const layerListPropTypes = {
   layers: PropTypes.array.isRequired,
@@ -15,34 +15,34 @@ const layerListPropTypes = {
   onLayersChange: PropTypes.func.isRequired,
   onLayerSelect: PropTypes.func,
   sources: PropTypes.object.isRequired,
-}
+};
 
 function layerPrefix(name) {
-  return name.replace(' ', '-').replace('_', '-').split('-')[0]
+  return name.replace(" ", "-").replace("_", "-").split("-")[0];
 }
 
 function findClosestCommonPrefix(layers, idx) {
-  const currentLayerPrefix = layerPrefix(layers[idx].id)
+  const currentLayerPrefix = layerPrefix(layers[idx].id);
-  let closestIdx = idx
+  let closestIdx = idx;
   for (let i = idx; i > 0; i--) {
-    const previousLayerPrefix = layerPrefix(layers[i-1].id)
+    const previousLayerPrefix = layerPrefix(layers[i - 1].id);
-    if(previousLayerPrefix === currentLayerPrefix) {
+    if (previousLayerPrefix === currentLayerPrefix) {
-      closestIdx = i - 1
+      closestIdx = i - 1;
     } else {
-      return closestIdx
+      return closestIdx;
     }
   }
-  return closestIdx
+  return closestIdx;
 }
 
 let UID = 0;
 
 // List of collapsible layer editors
 class LayerListContainer extends React.Component {
-  static propTypes = {...layerListPropTypes}
+  static propTypes = { ...layerListPropTypes };
   static defaultProps = {
     onLayerSelect: () => {},
-  }
+  };
 
   constructor(props) {
     super(props);
@@ -56,8 +56,8 @@ class LayerListContainer extends React.Component {
       },
       isOpen: {
         add: false,
-      }
+      },
-    }
+    };
   }
 
   toggleModal(modalName) {
@@ -68,79 +68,82 @@ class LayerListContainer extends React.Component {
       },
       isOpen: {
         ...this.state.isOpen,
-        [modalName]: !this.state.isOpen[modalName]
+        [modalName]: !this.state.isOpen[modalName],
-      }
+      },
-    })
+    });
   }
 
   toggleLayers = () => {
-    let idx=0
+    let idx = 0;
 
-    let newGroups=[]
+    let newGroups = [];
-
-    this.groupedLayers().forEach(layers => {
-      const groupPrefix = layerPrefix(layers[0].id)
-      const lookupKey = [groupPrefix, idx].join('-')
 
+    this.groupedLayers().forEach((layers) => {
+      const groupPrefix = layerPrefix(layers[0].id);
+      const lookupKey = [groupPrefix, idx].join("-");
 
       if (layers.length > 1) {
-        newGroups[lookupKey] = this.state.areAllGroupsExpanded
+        newGroups[lookupKey] = this.state.areAllGroupsExpanded;
       }
 
       layers.forEach((layer) => {
-        idx += 1
+        idx += 1;
-      })
+      });
     });
 
     this.setState({
       collapsedGroups: newGroups,
-      areAllGroupsExpanded: !this.state.areAllGroupsExpanded
+      areAllGroupsExpanded: !this.state.areAllGroupsExpanded,
-    })
+    });
-  }
+  };
 
   groupedLayers() {
-    const groups = []
+    const groups = [];
     const layerIdCount = new Map();
 
     for (let i = 0; i < this.props.layers.length; i++) {
       const origLayer = this.props.layers[i];
-      const previousLayer = this.props.layers[i-1]
+      const previousLayer = this.props.layers[i - 1];
-      layerIdCount.set(origLayer.id,
+      layerIdCount.set(
+        origLayer.id,
         layerIdCount.has(origLayer.id) ? layerIdCount.get(origLayer.id) + 1 : 0
       );
       const layer = {
         ...origLayer,
         key: `layers-list-${origLayer.id}-${layerIdCount.get(origLayer.id)}`,
-      }
+      };
-      if(previousLayer && layerPrefix(previousLayer.id) == layerPrefix(layer.id)) {
+      if (
-        const lastGroup = groups[groups.length - 1]
+        previousLayer &&
-        lastGroup.push(layer)
+        layerPrefix(previousLayer.id) == layerPrefix(layer.id)
+      ) {
+        const lastGroup = groups[groups.length - 1];
+        lastGroup.push(layer);
       } else {
-        groups.push([layer])
+        groups.push([layer]);
       }
     }
-    return groups
+    return groups;
   }
 
   toggleLayerGroup(groupPrefix, idx) {
-    const lookupKey = [groupPrefix, idx].join('-')
+    const lookupKey = [groupPrefix, idx].join("-");
-    const newGroups = { ...this.state.collapsedGroups }
+    const newGroups = { ...this.state.collapsedGroups };
-    if(lookupKey in this.state.collapsedGroups) {
+    if (lookupKey in this.state.collapsedGroups) {
-      newGroups[lookupKey] = !this.state.collapsedGroups[lookupKey]
+      newGroups[lookupKey] = !this.state.collapsedGroups[lookupKey];
     } else {
-      newGroups[lookupKey] = false
+      newGroups[lookupKey] = false;
     }
     this.setState({
-      collapsedGroups: newGroups
+      collapsedGroups: newGroups,
-    })
+    });
   }
 
   isCollapsed(groupPrefix, idx) {
-    const collapsed = this.state.collapsedGroups[[groupPrefix, idx].join('-')]
+    const collapsed = this.state.collapsedGroups[[groupPrefix, idx].join("-")];
-    return collapsed === undefined ? true : collapsed
+    return collapsed === undefined ? true : collapsed;
   }
 
-  shouldComponentUpdate (nextProps, nextState) {
+  shouldComponentUpdate(nextProps, nextState) {
     // Always update on state change
     if (this.state !== nextState) {
       return true;
@@ -148,28 +151,28 @@ class LayerListContainer extends React.Component {
 
     // This component tree only requires id and visibility from the layers
     // objects
-    function getRequiredProps (layer) {
+    function getRequiredProps(layer) {
       const out = {
         id: layer.id,
       };
 
       if (layer.layout) {
         out.layout = {
-          visibility: layer.layout.visibility
+          visibility: layer.layout.visibility,
         };
       }
       return out;
     }
     const layersEqual = lodash.isEqual(
       nextProps.layers.map(getRequiredProps),
-      this.props.layers.map(getRequiredProps),
+      this.props.layers.map(getRequiredProps)
     );
 
-    function withoutLayers (props) {
+    function withoutLayers(props) {
       const out = {
-        ...props
+        ...props,
       };
-      delete out['layers'];
+      delete out["layers"];
       return out;
     }
 
@@ -184,16 +187,16 @@ class LayerListContainer extends React.Component {
     return propsChanged;
   }
 
-  componentDidUpdate (prevProps) {
+  componentDidUpdate(prevProps) {
     if (prevProps.selectedLayerIndex !== this.props.selectedLayerIndex) {
       const selectedItemNode = this.selectedItemRef.current;
       if (selectedItemNode && selectedItemNode.node) {
         const target = selectedItemNode.node;
         const options = {
           root: this.scrollContainerRef.current,
-          threshold: 1.0
+          threshold: 1.0,
-        }
+        };
-        const observer = new IntersectionObserver(entries => {
+        const observer = new IntersectionObserver((entries) => {
           observer.unobserve(target);
           if (entries.length > 0 && entries[0].intersectionRatio < 1) {
             target.scrollIntoView();
@@ -206,28 +209,32 @@ class LayerListContainer extends React.Component {
   }
 
   render() {
-
+    const listItems = [];
-    const listItems = []
+    let idx = 0;
-    let idx = 0
     const layersByGroup = this.groupedLayers();
-    layersByGroup.forEach(layers => {
+    layersByGroup.forEach((layers) => {
-      const groupPrefix = layerPrefix(layers[0].id)
+      const groupPrefix = layerPrefix(layers[0].id);
-      if(layers.length > 1) {
+      if (layers.length > 1) {
-        const grp = <LayerListGroup
+        const grp = (
-          data-wd-key={[groupPrefix, idx].join('-')}
+          <LayerListGroup
-          aria-controls={layers.map(l => l.key).join(" ")}
+            data-wd-key={[groupPrefix, idx].join("-")}
-          key={`group-${groupPrefix}-${idx}`}
+            aria-controls={layers.map((l) => l.key).join(" ")}
-          title={groupPrefix}
+            key={`group-${groupPrefix}-${idx}`}
-          isActive={!this.isCollapsed(groupPrefix, idx) || idx === this.props.selectedLayerIndex}
+            title={groupPrefix}
-          onActiveToggle={this.toggleLayerGroup.bind(this, groupPrefix, idx)}
+            isActive={
-        />
+              !this.isCollapsed(groupPrefix, idx) ||
-        listItems.push(grp)
+              idx === this.props.selectedLayerIndex
+            }
+            onActiveToggle={this.toggleLayerGroup.bind(this, groupPrefix, idx)}
+          />
+        );
+        listItems.push(grp);
       }
 
       layers.forEach((layer, idxInGroup) => {
-        const groupIdx = findClosestCommonPrefix(this.props.layers, idx)
+        const groupIdx = findClosestCommonPrefix(this.props.layers, idx);
 
-        const layerError = this.props.errors.find(error => {
+        const layerError = this.props.errors.find((error) => {
           return (
             error.parsed &&
             error.parsed.type === "layer" &&
@@ -240,93 +247,107 @@ class LayerListContainer extends React.Component {
           additionalProps.ref = this.selectedItemRef;
         }
 
-        const listItem = <LayerListItem
+        const listItem = (
-          className={classnames({
+          <LayerListItem
-            'maputnik-layer-list-item-collapsed': layers.length > 1 && this.isCollapsed(groupPrefix, groupIdx) && idx !== this.props.selectedLayerIndex,
+            className={classnames({
-            'maputnik-layer-list-item-group-last': idxInGroup == layers.length - 1 && layers.length > 1,
+              "maputnik-layer-list-item-collapsed":
-            'maputnik-layer-list-item--error': !!layerError
+                layers.length > 1 &&
-          })}
+                this.isCollapsed(groupPrefix, groupIdx) &&
-          index={idx}
+                idx !== this.props.selectedLayerIndex,
-          key={layer.key}
+              "maputnik-layer-list-item-group-last":
-          id={layer.key}
+                idxInGroup == layers.length - 1 && layers.length > 1,
-          layerId={layer.id}
+              "maputnik-layer-list-item--error": !!layerError,
-          layerIndex={idx}
+            })}
-          layerType={layer.type}
+            index={idx}
-          visibility={(layer.layout || {}).visibility}
+            key={layer.key}
-          isSelected={idx === this.props.selectedLayerIndex}
+            id={layer.key}
-          onLayerSelect={this.props.onLayerSelect}
+            layerId={layer.id}
-          onLayerDestroy={this.props.onLayerDestroy.bind(this)}
+            layerIndex={idx}
-          onLayerCopy={this.props.onLayerCopy.bind(this)}
+            layerType={layer.type}
-          onLayerVisibilityToggle={this.props.onLayerVisibilityToggle.bind(this)}
+            visibility={(layer.layout || {}).visibility}
-          {...additionalProps}
+            isSelected={idx === this.props.selectedLayerIndex}
-        />
+            onLayerSelect={this.props.onLayerSelect}
-        listItems.push(listItem)
+            onLayerDestroy={this.props.onLayerDestroy.bind(this)}
-        idx += 1
+            onLayerCopy={this.props.onLayerCopy.bind(this)}
-      })
+            onLayerVisibilityToggle={this.props.onLayerVisibilityToggle.bind(
-    })
+              this
+            )}
+            {...additionalProps}
+          />
+        );
+        listItems.push(listItem);
+        idx += 1;
+      });
+    });
 
-    return <section
+    return (
-      className="maputnik-layer-list"
+      <section
-      role="complementary"
+        className="maputnik-layer-list"
-      aria-label="Layers list"
+        role="complementary"
-      ref={this.scrollContainerRef}
+        aria-label="Layers list"
-    >
+        ref={this.scrollContainerRef}
-      <ModalAdd
+      >
+        <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')}
+          onOpenToggle={this.toggleModal.bind(this, "add")}
           onLayersChange={this.props.onLayersChange}
-      />
+        />
-      <header className="maputnik-layer-list-header">
+        <header className="maputnik-layer-list-header">
-        <span className="maputnik-layer-list-header-title">Layers</span>
+          <span className="maputnik-layer-list-header-title">Layers</span>
-        <span className="maputnik-space" />
+          <span className="maputnik-space" />
-        <div className="maputnik-default-property">
+          <div className="maputnik-default-property">
-          <div className="maputnik-multibutton">
+            <div className="maputnik-multibutton">
-            <button
+              <button
-              id="skip-target-layer-list"
+                id="skip-target-layer-list"
-              onClick={this.toggleLayers}
+                data-wd-key="skip-target-layer-list"
-              className="maputnik-button">
+                onClick={this.toggleLayers}
-              {this.state.areAllGroupsExpanded === true ? "Collapse" : "Expand"}
+                className="maputnik-button"
-            </button>
+              >
+                {this.state.areAllGroupsExpanded === true
+                  ? "Collapse"
+                  : "Expand"}
+              </button>
+            </div>
           </div>
-        </div>
+          <div className="maputnik-default-property">
-        <div className="maputnik-default-property">
+            <div className="maputnik-multibutton">
-          <div className="maputnik-multibutton">
+              <button
-            <button
+                onClick={this.toggleModal.bind(this, "add")}
-              onClick={this.toggleModal.bind(this, 'add')}
+                data-wd-key="layer-list:add-layer"
-              data-wd-key="layer-list:add-layer"
+                className="maputnik-button maputnik-button-selected"
-              className="maputnik-button maputnik-button-selected">
+              >
-             Add Layer
+                Add Layer
-            </button>
+              </button>
+            </div>
           </div>
+        </header>
+        <div role="navigation" aria-label="Layers list">
+          <ul className="maputnik-layer-list-container">{listItems}</ul>
         </div>
-      </header>
+      </section>
-      <div
+    );
-        role="navigation"
-        aria-label="Layers list"
-      >
-        <ul className="maputnik-layer-list-container">
-          {listItems}
-        </ul>
-      </div>
-    </section>
   }
 }
 
-const LayerListContainerSortable = SortableContainer((props) => <LayerListContainer {...props} />)
+const LayerListContainerSortable = SortableContainer((props) => (
+  <LayerListContainer {...props} />
+));
 
 export default class LayerList extends React.Component {
-  static propTypes = {...layerListPropTypes}
+  static propTypes = { ...layerListPropTypes };
 
   render() {
-    return <LayerListContainerSortable
+    return (
-      {...this.props}
+      <LayerListContainerSortable
-      helperClass='sortableHelper'
+        {...this.props}
-      onSortEnd={this.props.onMoveLayer.bind(this)}
+        helperClass="sortableHelper"
-      useDragHandle={true}
+        onSortEnd={this.props.onMoveLayer.bind(this)}
-      shouldCancelStart={() => false}
+        useDragHandle={true}
-    />
+        shouldCancelStart={() => false}
+      />
+    );
   }
 }

src/components/MapMaplibreGl.jsx

@@ -1,19 +1,17 @@
-import React from 'react'
+import Color from "color";
-import PropTypes from 'prop-types'
+import MapboxInspect from "mapbox-gl-inspect";
-import ReactDOM from 'react-dom'
+import colors from "mapbox-gl-inspect/lib/colors";
-import MapLibreGl from 'maplibre-gl'
+import MapLibreGl from "maplibre-gl";
-import MapboxInspect from 'mapbox-gl-inspect'
+import "maplibre-gl/dist/maplibre-gl.css";
-import MapMaplibreGlLayerPopup from './MapMaplibreGlLayerPopup'
+import PropTypes from "prop-types";
-import MapMaplibreGlFeaturePropertyPopup from './MapMaplibreGlFeaturePropertyPopup'
+import React from "react";
-import tokens from '../config/tokens.json'
+import ReactDOM from "react-dom";
-import colors from 'mapbox-gl-inspect/lib/colors'
+import { colorHighlightedLayer } from "../libs/highlight";
-import Color from 'color'
+import "../libs/maplibre-rtl";
-import ZoomControl from '../libs/zoomcontrol'
+import ZoomControl from "../libs/zoomcontrol";
-import { colorHighlightedLayer } from '../libs/highlight'
+import "../maplibregl.css";
-import 'maplibre-gl/dist/maplibre-gl.css'
+import MapMaplibreGlFeaturePropertyPopup from "./MapMaplibreGlFeaturePropertyPopup";
-import '../maplibregl.css'
+import MapMaplibreGlLayerPopup from "./MapMaplibreGlLayerPopup";
-import '../libs/maplibre-rtl'
-
 
 const IS_SUPPORTED = MapLibreGl.supported();
 
@@ -24,32 +22,32 @@ function renderPopup(popup, mountNode) {
 
 function buildInspectStyle(originalMapStyle, coloredLayers, highlightedLayer) {
   const backgroundLayer = {
-    "id": "background",
+    id: "background",
-    "type": "background",
+    type: "background",
-    "paint": {
+    paint: {
-      "background-color": '#1c1f24',
+      "background-color": "#1c1f24",
-    }
+    },
+  };
+
+  const layer = colorHighlightedLayer(highlightedLayer);
+  if (layer) {
+    coloredLayers.push(layer);
   }
 
-  const layer = colorHighlightedLayer(highlightedLayer)
+  const sources = {};
-  if(layer) {
+  Object.keys(originalMapStyle.sources).forEach((sourceId) => {
-    coloredLayers.push(layer)
+    const source = originalMapStyle.sources[sourceId];
-  }
+    if (source.type !== "raster" && source.type !== "raster-dem") {
-
+      sources[sourceId] = source;
-  const sources = {}
-  Object.keys(originalMapStyle.sources).forEach(sourceId => {
-    const source = originalMapStyle.sources[sourceId]
-    if(source.type !== 'raster' && source.type !== 'raster-dem') {
-      sources[sourceId] = source
     }
-  })
+  });
 
   const inspectStyle = {
     ...originalMapStyle,
     sources: sources,
-    layers: [backgroundLayer].concat(coloredLayers)
+    layers: [backgroundLayer].concat(coloredLayers),
-  }
+  };
-  return inspectStyle
+  return inspectStyle;
 }
 
 export default class MapMaplibreGl extends React.Component {
@@ -62,7 +60,7 @@ export default class MapMaplibreGl extends React.Component {
     options: PropTypes.object,
     replaceAccessTokens: PropTypes.func.isRequired,
     onChange: PropTypes.func.isRequired,
-  }
+  };
 
   static defaultProps = {
     onMapLoaded: () => {},
@@ -70,51 +68,55 @@ export default class MapMaplibreGl extends React.Component {
     onLayerSelect: () => {},
     onChange: () => {},
     options: {},
-  }
+  };
 
   constructor(props) {
-    super(props)
+    super(props);
     this.state = {
       map: null,
       inspect: null,
-    }
+    };
   }
 
   updateMapFromProps(props) {
-    if(!IS_SUPPORTED) return;
+    if (!IS_SUPPORTED) return;
 
-    if(!this.state.map) return
+    if (!this.state.map) return;
 
     //Maplibre GL now does diffing natively so we don't need to calculate
     //the necessary operations ourselves!
-    this.state.map.setStyle(
+    this.state.map.setStyle(this.props.replaceAccessTokens(props.mapStyle), {
-      this.props.replaceAccessTokens(props.mapStyle),
+      diff: true,
-      {diff: true}
+    });
-    )
   }
 
   shouldComponentUpdate(nextProps, nextState) {
     let should = false;
     try {
-      should = JSON.stringify(this.props) !== JSON.stringify(nextProps) || JSON.stringify(this.state) !== JSON.stringify(nextState);
+      should =
-    } catch(e) {
+        JSON.stringify(this.props) !== JSON.stringify(nextProps) ||
+        JSON.stringify(this.state) !== JSON.stringify(nextState);
+    } catch (e) {
       // no biggie, carry on
     }
     return should;
   }
 
   componentDidUpdate(prevProps, prevState, snapshot) {
-    if(!IS_SUPPORTED) return;
+    if (!IS_SUPPORTED) return;
 
     const map = this.state.map;
 
     this.updateMapFromProps(this.props);
 
-    if(this.state.inspect && this.props.inspectModeEnabled !== this.state.inspect._showInspectMap) {
+    if (
+      this.state.inspect &&
+      this.props.inspectModeEnabled !== this.state.inspect._showInspectMap
+    ) {
       // HACK: Fix for <https://github.com/maputnik/editor/issues/576>, while we wait for a proper fix.
       // eslint-disable-next-line
       this.state.inspect._popupBlocked = false;
-      this.state.inspect.toggleInspector()
+      this.state.inspect.toggleInspector();
     }
     if (map) {
       if (this.props.inspectModeEnabled) {
@@ -123,7 +125,7 @@ export default class MapMaplibreGl extends React.Component {
         // mapbox-gl-inspect.
         try {
           this.state.inspect.render();
-        } catch(err) {
+        } catch (err) {
           console.error("FIXME: Caught error", err);
         }
       }
@@ -135,40 +137,40 @@ export default class MapMaplibreGl extends React.Component {
   }
 
   componentDidMount() {
-    if(!IS_SUPPORTED) return;
+    if (!IS_SUPPORTED) return;
 
     const mapOpts = {
       ...this.props.options,
       container: this.container,
       style: this.props.mapStyle,
       hash: true,
-      maxZoom: 24
+      maxZoom: 24,
-    }
+    };
 
     const map = new MapLibreGl.Map(mapOpts);
 
     const mapViewChange = () => {
       const center = map.getCenter();
       const zoom = map.getZoom();
-      this.props.onChange({center, zoom});
+      this.props.onChange({ center, zoom });
-    }
+    };
     mapViewChange();
 
     map.showTileBoundaries = mapOpts.showTileBoundaries;
     map.showCollisionBoxes = mapOpts.showCollisionBoxes;
     map.showOverdrawInspector = mapOpts.showOverdrawInspector;
 
-    const zoomControl = new ZoomControl;
+    const zoomControl = new ZoomControl();
-    map.addControl(zoomControl, 'top-right');
+    map.addControl(zoomControl, "top-right");
 
-    const nav = new MapLibreGl.NavigationControl({visualizePitch:true});
+    const nav = new MapLibreGl.NavigationControl({ visualizePitch: true });
-    map.addControl(nav, 'top-right');
+    map.addControl(nav, "top-right");
 
-    const tmpNode = document.createElement('div');
+    const tmpNode = document.createElement("div");
 
     const inspect = new MapboxInspect({
       popup: new MapLibreGl.Popup({
-        closeOnClick: false
+        closeOnClick: false,
       }),
       showMapPopup: true,
       showMapPopupOnHover: false,
@@ -176,41 +178,58 @@ export default class MapMaplibreGl extends React.Component {
       showInspectButton: false,
       blockHoverPopupOnClick: true,
       assignLayerColor: (layerId, alpha) => {
-        return Color(colors.brightColor(layerId, alpha)).desaturate(0.5).string()
+        return Color(colors.brightColor(layerId, alpha))
+          .desaturate(0.5)
+          .string();
       },
-      buildInspectStyle: (originalMapStyle, coloredLayers) => buildInspectStyle(originalMapStyle, coloredLayers, this.props.highlightedLayer),
+      buildInspectStyle: (originalMapStyle, coloredLayers) =>
-      renderPopup: features => {
+        buildInspectStyle(
-        if(this.props.inspectModeEnabled) {
+          originalMapStyle,
-          return renderPopup(<MapMaplibreGlFeaturePropertyPopup features={features} />, tmpNode);
+          coloredLayers,
+          this.props.highlightedLayer
+        ),
+      renderPopup: (features) => {
+        if (this.props.inspectModeEnabled) {
+          return renderPopup(
+            <MapMaplibreGlFeaturePropertyPopup features={features} />,
+            tmpNode
+          );
         } else {
-          return renderPopup(<MapMaplibreGlLayerPopup features={features} onLayerSelect={this.onLayerSelectById} zoom={this.state.zoom} />, tmpNode);
+          return renderPopup(
+            <MapMaplibreGlLayerPopup
+              features={features}
+              onLayerSelect={this.onLayerSelectById}
+              zoom={this.state.zoom}
+            />,
+            tmpNode
+          );
         }
-      }
+      },
-    })
+    });
-    map.addControl(inspect)
+    map.addControl(inspect);
 
     map.on("style.load", () => {
       this.setState({
         map,
         inspect,
-        zoom: map.getZoom()
+        zoom: map.getZoom(),
       });
-    })
+    });
 
-    map.on("data", e => {
+    map.on("data", (e) => {
-      if(e.dataType !== 'tile') return
+      if (e.dataType !== "tile") return;
       this.props.onDataChange({
-        map: this.state.map
+        map: this.state.map,
-      })
+      });
-    })
+    });
 
-    map.on("error", e => {
+    map.on("error", (e) => {
       console.log("ERROR", e);
-    })
+    });
 
-    map.on("zoom", e => {
+    map.on("zoom", (e) => {
       this.setState({
-        zoom: map.getZoom()
+        zoom: map.getZoom(),
       });
     });
 
@@ -219,28 +238,32 @@ export default class MapMaplibreGl extends React.Component {
   }
 
   onLayerSelectById = (id) => {
-    const index = this.props.mapStyle.layers.findIndex(layer => layer.id === id);
+    const index = this.props.mapStyle.layers.findIndex(
+      (layer) => layer.id === id
+    );
     this.props.onLayerSelect(index);
-  }
+  };
 
   render() {
-    if(IS_SUPPORTED) {
+    if (IS_SUPPORTED) {
-      return <div
+      return (
-        className="maputnik-map__map"
+        <div
-        role="region"
+          className="maputnik-map__map"
-        aria-label="Map view"
+          role="region"
-        ref={x => this.container = x}
+          aria-label="Map view"
-      ></div>
+          ref={(x) => (this.container = x)}
-    }
+          data-wd-key="maplibre:map"
-    else {
+        ></div>
-      return <div
+      );
-        className="maputnik-map maputnik-map--error"
+    } else {
-      >
+      return (
-        <div className="maputnik-map__error-message">
+        <div className="maputnik-map maputnik-map--error">
-          Error: Cannot load MaplibreGL, WebGL is either unsupported or disabled
+          <div className="maputnik-map__error-message">
+            Error: Cannot load MaplibreGL, WebGL is either unsupported or
+            disabled
+          </div>
         </div>
-      </div>
+      );
     }
   }
 }
-

src/libs/zoomcontrol.js

@@ -1,26 +1,28 @@
 export default class ZoomControl {
   onAdd(map) {
     this._map = map;
-    this._container = document.createElement('div');
+    this._container = document.createElement("div");
-    this._container.className = 'maplibregl-ctrl maplibregl-ctrl-group maplibregl-ctrl-zoom';
+    this._container.className =
+      "maplibregl-ctrl maplibregl-ctrl-group maplibregl-ctrl-zoom";
+    this._container.setAttribute("data-wd-key", "maplibre:ctrl-zoom");
     this._container.innerHTML = `
       Zoom: <span></span>
     `;
     this._textEl = this._container.querySelector("span");
-    
+
     this.addEventListeners();
-    
+
     return this._container;
   }
-  
+
   updateZoomLevel() {
     this._textEl.innerHTML = this._map.getZoom().toFixed(2);
   }
-  
+
-  addEventListeners (){
+  addEventListeners() {
-    this._map.on('render', this.updateZoomLevel.bind(this) );
+    this._map.on("render", this.updateZoomLevel.bind(this));
-    this._map.on('zoomIn', this.updateZoomLevel.bind(this) );
+    this._map.on("zoomIn", this.updateZoomLevel.bind(this));
-    this._map.on('zoomOut', this.updateZoomLevel.bind(this) );
+    this._map.on("zoomOut", this.updateZoomLevel.bind(this));
   }
 
   onRemove() {