chore: stabilize Playwright E2E runs (#2164)

#1351 made `styleStore` initialization asynchronous in
`componentDidMount`. `setStyle` currently treats `toolbar:link`
appearing as the signal that loading is complete, but if the style
network request (`empty-style.json` from jsdelivr) takes over ~1s, the
`toolbar:link` can appear while `styleStore` is still null (because the
request has not finished). Subsequent `saveStyle` calls in tests then
silently do nothing, causing test failures (3 in #2157, and often 20+ on
my machine).

Changes are:

1. Mock the default empty style to avoid slow network E2E failures.
2. Also cap Playwright workers at 4 to avoid overloading Chromium on
high-core machines.

Fixes #2158.

## Launch Checklist

<!-- Thanks for the PR! Feel free to add or remove items from the
checklist. -->


 - [x] Briefly describe the changes in this PR.
 - [x] Link to related issues.
- [ ] ~~Include before/after visuals or gifs if this PR includes visual
changes.~~
 - [ ] ~~Write tests for all new functionality.~~
- [ ] ~~Add an entry to `CHANGELOG.md` under the `## main` section.~~
(only minor test infra fix)

Co-authored-by: liuly <me@liuly.moe>
Co-authored-by: Harel M <harel.mazor@gmail.com>

.github/dependabot.yml

@@ -31,6 +31,10 @@ updates:
     directory: "/"
     schedule:
       interval: "daily"
+    groups:
+      codeql-action:
+        patterns:
+          - "github/codeql-action*"
     cooldown:
       default-days: 3
       # no semver support for github-actions

.github/workflows/ci.yml

@@ -6,6 +6,10 @@ on:
   push:
     branches: [ main ]
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: ${{ github.event_name == 'pull_request' }}
+
 jobs:
 
   build-node:

.github/workflows/codeql-analysis.yml

@@ -20,6 +20,10 @@ on:
   schedule:
     - cron: '17 0 * * 6'
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: ${{ github.event_name == 'pull_request' }}
+
 jobs:
   analyze:
     name: Analyze
@@ -42,7 +46,7 @@ jobs:
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@cdf488f595d80d6e07e03d4674febd5ab45fa938 # v4.37.9
+      uses: github/codeql-action/init@b96794f015dfd88f77b49b1c93e0fa7110f94c63 # v4.38.0
       with:
         languages: ${{ matrix.language }}
         # If you wish to specify custom queries, you can do so here or in a config file.
@@ -53,7 +57,7 @@ jobs:
     # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
     # If this step fails, then you should remove it and run the build manually (see below)
     - name: Autobuild
-      uses: github/codeql-action/autobuild@db488ddef3bf6cb639b32c2e9a7c0a7ea8271d28 # v4.37.8
+      uses: github/codeql-action/autobuild@b96794f015dfd88f77b49b1c93e0fa7110f94c63 # v4.38.0
 
     # ℹ️ Command-line programs to run using the OS shell.
     # 📚 https://git.io/JvXDl
@@ -67,4 +71,4 @@ jobs:
     #   make release
 
     - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@db488ddef3bf6cb639b32c2e9a7c0a7ea8271d28 # v4.37.8
+      uses: github/codeql-action/analyze@b96794f015dfd88f77b49b1c93e0fa7110f94c63 # v4.38.0

CHANGELOG.md

@@ -8,8 +8,12 @@
 - _...Add new stuff here..._
 
 ### 🐞 Bug fixes
+- Prevent a crash when converting a function to an expression
+- Prevent a crash when deleting either stop from a function with two stops
+- Preserve expanded layer groups when deleting layers, including the first layer of a group
 - The map's data listener now fires on tile loads again, so source and vector layer field autocompletion is populated
 - The `maputnik` desktop binary now opens the default browser automatically on startup (opt out with `--no-browser`)
+- Keyboard shortcuts now keep working while the map has focus, instead of going dead until the map is blurred
 - _...Add new stuff here..._
 
 ## 3.1.0

e2e/fixtures/grouped-layers-style.json

@@ -0,0 +1,16 @@
+{
+  "version": 8,
+  "name": "Grouped layers",
+  "sources": {},
+  "layers": [
+    { "id": "background", "type": "background" },
+    { "id": "park-a", "type": "background" },
+    { "id": "park-b", "type": "background" },
+    { "id": "park-c", "type": "background" },
+    { "id": "road", "type": "background" },
+    { "id": "park-d", "type": "background" },
+    { "id": "park-e", "type": "background" },
+    { "id": "water-a", "type": "background" },
+    { "id": "water-b", "type": "background" }
+  ]
+}

e2e/keyboard.spec.ts

@@ -62,5 +62,22 @@ describe("keyboard", () => {
       await when.typeKeys("!");
       await then(get.elementByTestId("modal:debug")).shouldBeVisible();
     });
+
+    describe("while the map has focus", () => {
+      beforeEach(async () => {
+        await when.typeKeys("m");
+        await then(get.canvas()).shouldBeFocused();
+      });
+
+      test("'!' should show debug modal", async () => {
+        await when.typeKeys("!");
+        await then(get.elementByTestId("modal:debug")).shouldBeVisible();
+      });
+
+      test("'s' should show settings modal", async () => {
+        await when.typeKeys("s");
+        await then(get.elementByTestId("modal:settings")).shouldBeVisible();
+      });
+    });
   });
 });

e2e/layer-editor.spec.ts

@@ -289,6 +289,20 @@ describe("layer editor", () => {
         });
       });
 
+      test("should leave a plain editable value after deleting a stop", async () => {
+        await when.setFunctionStopValue("circle-radius", "Output value", 1, "0");
+        await when.deleteFunctionStop("circle-radius");
+        await then(get.elementByTestId("spec-field:circle-radius")).shouldBeVisible();
+        await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+          layers: [{ id, paint: { "circle-radius": 0 } }],
+        });
+
+        await when.setValue("spec-field-input:circle-radius", "7");
+        await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+          layers: [{ id, paint: { "circle-radius": 7 } }],
+        });
+      });
+
       test("should set the base", async () => {
         await when.setFunctionBase("circle-radius", "2");
         await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
@@ -310,8 +324,9 @@ describe("layer editor", () => {
         });
       });
 
-      test("should convert to an expression", async () => {
+      test("should convert to an expression without crashing", async () => {
         await when.makeExpression("circle-radius");
+        await then(get.element("[data-wd-key='spec-field-container:circle-radius'] .maputnik-expression-editor")).shouldBeVisible();
         await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
           layers: [{ id, paint: { "circle-radius": ["interpolate", ["linear"], ["zoom"], 6, 5, 10, 5] } }],
         });

e2e/layers-list.spec.ts

@@ -1,4 +1,4 @@
-import { beforeEach, describe, test } from "./utils/fixtures";
+import { beforeEach, describe, expect, test } from "./utils/fixtures";
 import { MaputnikDriver } from "./maputnik-driver";
 
 describe("layers list", () => {
@@ -47,6 +47,14 @@ describe("layers list", () => {
       });
     });
 
+    test("should title the visibility button with the action it performs", async () => {
+      const key = "layer-list-item:" + id + ":toggle-visibility";
+      // A visible layer is about to be hidden, and a hidden one to be shown.
+      await expect(get.elementByTestId(key)).toHaveAttribute("title", "hide");
+      await when.click(key);
+      await expect(get.elementByTestId(key)).toHaveAttribute("title", "show");
+    });
+
     describe("when clicking hide", () => {
       beforeEach(async () => {
         await when.click("layer-list-item:" + id + ":toggle-visibility");
@@ -298,6 +306,75 @@ describe("layers list", () => {
   });
 
   describe("groups", () => {
+    for (const control of ["menu", "trash"] as const) {
+      describe(`after deletion using ${control}`, () => {
+        beforeEach(async () => {
+          await when.setStyle("grouped_layers");
+        });
+
+        test("keeps all groups expanded when an earlier layer is deleted", async () => {
+          await when.click("skip-target-layer-list");
+          await then(get.elementByTestId("layer-list-item:park-b")).shouldBeVisible();
+          await when.deleteLayer("background", control);
+          await then(get.elementByTestId("layer-list-item:background")).shouldNotExist();
+          await then(get.elementByTestId("layer-list-group:park-0")).shouldExist();
+          await expect(get.elementByTestId("layer-list-group:water-6").getByRole("button")).toHaveAttribute("aria-expanded", "true");
+          await then(get.elementByTestId("layer-list-item:park-b")).shouldBeVisible();
+          await then(get.elementByTestId("layer-list-item:park-e")).shouldBeVisible();
+          await then(get.elementByTestId("layer-list-item:water-b")).shouldBeVisible();
+        });
+
+        test("preserves separate states for groups with the same prefix", async () => {
+          await when.click("layer-list-group:park-1");
+          await when.deleteLayer("background", control);
+          await then(get.elementByTestId("layer-list-group:park-0")).shouldExist();
+          await when.click("layer-list-item:road");
+          await expect(get.elementByTestId("layer-list-group:park-0").getByRole("button")).toHaveAttribute("aria-expanded", "true");
+          await expect(get.elementByTestId("layer-list-group:park-4").getByRole("button")).toHaveAttribute("aria-expanded", "false");
+          await then(get.elementByTestId("layer-list-item:park-b")).shouldBeVisible();
+          await then(get.elementByTestId("layer-list-item:park-e")).shouldNotBeVisible();
+        });
+
+        test("keeps a group expanded when its first layer is deleted", async () => {
+          await when.click("layer-list-group:park-1");
+          await when.deleteLayer("park-a", control);
+          await then(get.elementByTestId("layer-list-item:park-a")).shouldNotExist();
+          await when.click("layer-list-item:road");
+          await expect(get.elementByTestId("layer-list-group:park-1").getByRole("button")).toHaveAttribute("aria-expanded", "true");
+          await then(get.elementByTestId("layer-list-item:park-c")).shouldBeVisible();
+        });
+
+        for (const expandedGroup of ["park-1", "park-5"]) {
+          test(`keeps a merged group expanded when ${expandedGroup} was expanded`, async () => {
+            await when.click("layer-list-group:" + expandedGroup);
+            await when.deleteLayer("road", control);
+            await then(get.elementByTestId("layer-list-item:road")).shouldNotExist();
+            await expect(get.elementByTestId("layer-list-group:park-1").getByRole("button")).toHaveAttribute("aria-expanded", "true");
+            await then(get.elementByTestId("layer-list-item:park-b")).shouldBeVisible();
+            await then(get.elementByTestId("layer-list-item:park-e")).shouldBeVisible();
+          });
+        }
+
+        test("keeps a merged group collapsed when both groups were collapsed", async () => {
+          await when.deleteLayer("road", control);
+          await then(get.elementByTestId("layer-list-item:road")).shouldNotExist();
+          await when.click("layer-list-item:background");
+          await expect(get.elementByTestId("layer-list-group:park-1").getByRole("button")).toHaveAttribute("aria-expanded", "false");
+          await then(get.elementByTestId("layer-list-item:park-b")).shouldNotBeVisible();
+          await then(get.elementByTestId("layer-list-item:park-e")).shouldNotBeVisible();
+        });
+
+        test("preserves later groups after deleting an entire group", async () => {
+          await when.click("skip-target-layer-list");
+          await when.deleteLayer("park-a", control);
+          await when.deleteLayer("park-b", control);
+          await when.deleteLayer("park-c", control);
+          await expect(get.elementByTestId("layer-list-group:water-4").getByRole("button")).toHaveAttribute("aria-expanded", "true");
+          await then(get.elementByTestId("layer-list-item:water-b")).shouldBeVisible();
+        });
+      });
+    }
+
     test("simple", async () => {
       await when.setStyle("geojson");
 

e2e/maputnik-driver.ts

@@ -1,5 +1,6 @@
 import { PlaywrightHelper } from "./playwright-helper";
 import { ModalDriver } from "./modal-driver";
+import emptyStyle from "../src/config/empty-style.json" with { type: "json" };
 
 const baseUrl = "http://localhost:8888/";
 const isMac = process.platform === "darwin";
@@ -39,6 +40,7 @@ export class MaputnikDriver {
         "example-style-with-zoom-7-and-center-0-51.json",
         "example-style-with-zoom-5-and-center-50-50.json",
         "access-token-style.json",
+        "grouped-layers-style.json",
       ];
       for (const fixture of styleFixtures) {
         await this.helper.given.interceptAndMockResponse({
@@ -55,6 +57,11 @@ export class MaputnikDriver {
         url: "https://www.glyph-server.com/*",
         response: ["Font 1", "Font 2", "Font 3"],
       });
+      await this.helper.given.interceptAndMockResponse({
+        method: "GET",
+        url: /cdn\.jsdelivr\.net\/.*\/empty-style\.json$/,
+        response: emptyStyle,
+      });
     },
   };
 
@@ -63,6 +70,18 @@ export class MaputnikDriver {
 
     modal: this.modalDriver.when,
 
+    deleteLayer: async (id: string, control: "menu" | "trash" = "menu") => {
+      if (control === "trash") {
+        await this.helper.when.hover("layer-list-item:" + id);
+        await this.helper.when.click("layer-list-item:" + id + ":delete");
+        return;
+      }
+
+      await this.helper.when.click("layer-list-item:" + id);
+      await this.helper.when.click("skip-target-layer-editor");
+      await this.helper.when.click("menu-delete-layer");
+    },
+
     setStyle: async (
       styleProperties:
         | "geojson"
@@ -73,6 +92,7 @@ export class MaputnikDriver {
         | "font"
         | "zoom_7_center_0_51"
         | "access_tokens"
+        | "grouped_layers"
         | "",
       zoom?: number
     ) => {
@@ -85,6 +105,7 @@ export class MaputnikDriver {
         font: "example-style-with-fonts.json",
         zoom_7_center_0_51: "example-style-with-zoom-7-and-center-0-51.json",
         access_tokens: "access-token-style.json",
+        grouped_layers: "grouped-layers-style.json",
       };
 
       const url = new URL(baseUrl);

i18next.config.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from "i18next-cli";
 
 export default defineConfig({
-  locales: ["de", "fr", "he", "it", "ja", "ko", "tr", "zh"],
+  locales: ["az", "de", "fr", "he", "it", "ja", "ko", "tr", "zh"],
   extract: {
     input: ["src/**/*.{js,jsx,ts,tsx}"],
     output: "src/locales/{{language}}/{{namespace}}.json",

package.json

@@ -29,16 +29,16 @@
   "dependencies": {
     "@codemirror/lang-json": "^6.0.2",
     "@codemirror/lint": "^6.9.7",
-    "@codemirror/state": "^6.7.1",
+    "@codemirror/state": "^6.7.4",
     "@codemirror/theme-one-dark": "^6.1.3",
-    "@codemirror/view": "^6.43.9",
+    "@codemirror/view": "^6.43.11",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@mapbox/mapbox-gl-rtl-text": "^0.4.0",
     "@maplibre/maplibre-gl-geocoder": "^1.9.4",
     "@maplibre/maplibre-gl-inspect": "^1.9.0",
-    "@maplibre/maplibre-gl-style-spec": "^26.4.1",
+    "@maplibre/maplibre-gl-style-spec": "^26.4.2",
     "array-move": "^4.0.0",
     "buffer": "^6.0.3",
     "classnames": "^2.5.1",
@@ -48,7 +48,7 @@
     "downshift": "^9.4.0",
     "events": "^3.3.0",
     "file-saver": "^2.0.5",
-    "i18next": "^26.4.0",
+    "i18next": "^26.4.2",
     "i18next-browser-languagedetector": "^8.2.1",
     "i18next-resources-to-backend": "^1.2.3",
     "json-stringify-pretty-compact": "^4.0.0",
@@ -60,20 +60,20 @@
     "lodash.get": "^4.4.2",
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
-    "maplibre-gl": "^6.6.0",
+    "maplibre-gl": "^6.9.0",
     "maputnik-design": "github:maputnik/design#172b06c",
     "ol": "^10.10.0",
     "ol-mapbox-style": "^13.4.3",
     "pmtiles": "^4.5.0",
     "prop-types": "^15.8.1",
-    "react": "^19.2.8",
+    "react": "^19.3.0",
     "react-accessible-accordion": "^5.0.1",
     "react-aria-menubutton": "^8.0.0",
     "react-aria-modal": "^5.0.2",
     "react-collapse": "^5.1.1",
     "react-color": "^2.19.3",
-    "react-dom": "^19.2.8",
-    "react-i18next": "^17.0.12",
+    "react-dom": "^19.3.0",
+    "react-i18next": "^17.0.13",
     "react-icons": "^5.7.0",
     "react-markdown": "^10.1.0",
     "reconnecting-websocket": "^4.4.0",
@@ -101,7 +101,7 @@
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "@istanbuljs/nyc-config-typescript": "^1.0.2",
-    "@playwright/test": "^1.62.1",
+    "@playwright/test": "^1.63.0",
     "@stylistic/eslint-plugin": "^5.10.0",
     "@types/codemirror": "^5.60.18",
     "@types/color": "^4.2.1",
@@ -116,36 +116,36 @@
     "@types/lodash.isequal": "^4.5.8",
     "@types/lodash.throttle": "^4.1.9",
     "@types/randomcolor": "^0.5.9",
-    "@types/react": "^19.2.18",
+    "@types/react": "^19.3.0",
     "@types/react-aria-menubutton": "^6.2.14",
     "@types/react-aria-modal": "^5.0.0",
     "@types/react-collapse": "^5.0.4",
     "@types/react-color": "^3.0.13",
-    "@types/react-dom": "^19.2.5",
+    "@types/react-dom": "^19.3.0",
     "@types/string-hash": "^1.1.3",
     "@types/wicg-file-system-access": "^2023.10.7",
     "@vitejs/plugin-react": "^6.1.1",
-    "@vitest/coverage-v8": "^4.1.11",
+    "@vitest/coverage-v8": "^5.0.0",
     "cors": "^2.8.6",
-    "eslint": "^10.9.1",
+    "eslint": "^10.10.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.1.1",
-    "eslint-plugin-react-refresh": "^0.5.5",
-    "i18next-cli": "^1.71.3",
+    "eslint-plugin-react-refresh": "^0.5.6",
+    "i18next-cli": "^1.73.2",
     "istanbul": "^0.4.5",
     "istanbul-lib-coverage": "^3.2.2",
     "nyc": "^18.0.0",
-    "postcss": "^8.5.26",
+    "postcss": "^8.5.28",
     "react-hot-loader": "^4.13.1",
-    "sass": "^1.103.1",
-    "stylelint": "^17.14.1",
+    "sass": "^1.104.0",
+    "stylelint": "^17.15.0",
     "stylelint-config-recommended-scss": "^17.0.1",
     "stylelint-scss": "^7.2.0",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.68.0",
+    "typescript-eslint": "^8.70.0",
     "uuid": "^14.0.2",
-    "vite": "^8.2.2",
+    "vite": "^8.3.0",
     "vite-plugin-istanbul": "^9.0.1",
-    "vitest": "^4.1.11"
+    "vitest": "^5.0.0"
   }
 }

playwright.config.ts

@@ -1,6 +1,10 @@
+import { cpus } from "node:os";
 import { defineConfig, devices } from "@playwright/test";
 
 const isCI = !!process.env.CI;
+// Playwright defaults to CPU / 2 workers,
+// capping the number of workers to 4 to avoid overloading browsers.
+const workers = Math.min(4, Math.max(1, Math.floor(cpus().length / 2)));
 // When the app is already served elsewhere (e.g. the docker e2e job) set
 // E2E_NO_WEBSERVER=1 so Playwright does not start its own dev server.
 const useExternalServer = !!process.env.E2E_NO_WEBSERVER;
@@ -13,6 +17,7 @@ export default defineConfig({
   globalTeardown: "./e2e/utils/e2e-teardown.ts",
   fullyParallel: true,
   forbidOnly: isCI,
+  workers,
   retries: isCI ? 2 : 0,
   reporter: isCI ? [["list"], ["html", { open: "never" }]] : "list",
   use: {

src/components/App.tsx

@@ -83,6 +83,22 @@ function updateRootSpec(spec: any, fieldName: string, newValues: any) {
   };
 }
 
+/**
+ * Whether the given element consumes keystrokes as text.
+ *
+ * Shortcuts have to stay out of the way while the user is typing, but asking
+ * whether the focus is on `document.body` answers a different question: the map
+ * canvas is not a text field, yet focusing it used to disable every shortcut.
+ */
+function isTextEntryElement(element: Element | null): boolean {
+  if (!element) return false;
+  const node = element as HTMLElement;
+  return node.isContentEditable ||
+    node.tagName === "INPUT" ||
+    node.tagName === "TEXTAREA" ||
+    node.tagName === "SELECT";
+}
+
 type AppState = {
   errors: MappedError[],
   infos: string[],
@@ -242,7 +258,7 @@ export class App extends React.Component<any, AppState> {
         (e.target as HTMLElement).blur();
         document.body.focus();
       }
-      else if(this.state.isOpen.shortcuts || document.activeElement === document.body) {
+      else if(this.state.isOpen.shortcuts || !isTextEntryElement(document.activeElement)) {
         const shortcut = shortcuts.find((shortcut) => {
           return (shortcut.key === e.key);
         });

src/components/FieldFunction.tsx

@@ -129,16 +129,10 @@ type FieldFunctionProps = {
  * https://www.mapbox.com/mapbox-gl-style-spec/#types-function-zoom-property
  */
 export const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
-  const [dataType, setDataType] = React.useState(
-    getDataType(props.value, props.fieldSpec)
-  );
   const [isEditing, setIsEditing] = React.useState(false);
-
-  React.useEffect(() => {
-    if (!isEditing) {
-      setDataType(getDataType(props.value, props.fieldSpec));
-    }
-  }, [props.value, props.fieldSpec, isEditing]);
+  // Keep the expression editor mounted while typing, but otherwise select the
+  // editor from the current value so a collapsed function never renders as stops.
+  const dataType = isEditing ? "expression" : getDataType(props.value, props.fieldSpec);
 
   const getFieldFunctionType = (fieldSpec: any) => {
     if (fieldSpec.expression.interpolated) {
@@ -173,7 +167,7 @@ export const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
   const deleteExpression = () => {
     const { fieldSpec, fieldName } = props;
     props.onChange(fieldName, fieldSpec.default);
-    setDataType("value");
+    setIsEditing(false);
   };
 
   const deleteStop = (stopIdx: number) => {
@@ -233,10 +227,10 @@ export const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
         type: "identity",
         property: value[1],
       });
-      setDataType("value");
+      setIsEditing(false);
     } else if (isLiteralExpression(value)) {
       props.onChange(fieldName, value[1]);
-      setDataType("value");
+      setIsEditing(false);
     }
   };
 

src/components/LayerList.tsx

@@ -106,13 +106,13 @@ class LayerListContainerInternal extends React.Component<LayerListContainerInter
     });
   };
 
-  groupedLayers(): (LayerSpecification & {key: string})[][] {
+  groupedLayers(layers = this.props.layers): (LayerSpecification & {key: string})[][] {
     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];
+    for (let i = 0; i < layers.length; i++) {
+      const origLayer = layers[i];
+      const previousLayer = layers[i-1];
       layerIdCount.set(origLayer.id,
         layerIdCount.has(origLayer.id) ? layerIdCount.get(origLayer.id) + 1 : 0
       );
@@ -192,7 +192,39 @@ class LayerListContainerInternal extends React.Component<LayerListContainerInter
     return propsChanged;
   }
 
+  /**
+   * Preserves group state through surviving layer IDs when group indices change.
+   * If deletion joins groups, the result stays expanded when either group was.
+   */
+  private preserveLayerGroupState(previousLayers: LayerSpecification[]) {
+    if (previousLayers === this.props.layers) return;
+
+    const collapsedByLayer = new Map<string, boolean>();
+    let idx = 0;
+    for (const layers of this.groupedLayers(previousLayers)) {
+      const collapsed = this.isCollapsed(layerPrefix(layers[0].id), idx);
+      for (const layer of layers) {
+        collapsedByLayer.set(layer.id, collapsed);
+      }
+      idx += layers.length;
+    }
+
+    const collapsedGroups: {[key: string]: boolean} = {};
+    idx = 0;
+    for (const layers of this.groupedLayers()) {
+      const lookupKey = [layerPrefix(layers[0].id), idx].join("-");
+      collapsedGroups[lookupKey] = layers.every(layer => collapsedByLayer.get(layer.id) !== false);
+      idx += layers.length;
+    }
+
+    if (!lodash.isEqual(collapsedGroups, this.state.collapsedGroups)) {
+      this.setState({ collapsedGroups });
+    }
+  }
+
   componentDidUpdate (prevProps: LayerListContainerProps) {
+    this.preserveLayerGroupState(prevProps.layers);
+
     if (prevProps.selectedLayerIndex !== this.props.selectedLayerIndex) {
       const selectedItemNode = this.selectedItemRef.current;
       if (selectedItemNode && selectedItemNode.node) {

src/components/LayerListItem.tsx

@@ -32,6 +32,8 @@ const DraggableLabel: React.FC<DraggableLabelProps> = (props) => {
 
 type IconActionProps = {
   action: string
+  /** Tooltip text, for buttons whose action reads differently from their icon. */
+  title?: string
   onClick(...args: unknown[]): unknown
   wdKey?: string
   classBlockName?: string
@@ -62,7 +64,7 @@ class IconAction extends React.Component<IconActionProps> {
 
     return <button
       tabIndex={-1}
-      title={this.props.action}
+      title={this.props.title ?? this.props.action}
       className={`maputnik-layer-list-icon-action ${classAdditions}`}
       data-wd-key={this.props.wdKey}
       onClick={this.props.onClick}
@@ -111,7 +113,12 @@ export const LayerListItem = React.forwardRef<HTMLLIElement, LayerListItemProps>
     opacity: isDragging ? 0.5 : 1,
   };
 
-  const visibilityAction = visibility === "visible" ? "show" : "hide";
+  // The icon and the CSS modifier describe the layer's current visibility,
+  // while the tooltip has to describe what clicking the button does, which is
+  // the opposite of it.
+  const isVisible = visibility === "visible";
+  const visibilityAction = isVisible ? "show" : "hide";
+  const visibilityTitle = isVisible ? "hide" : "show";
 
   // Cast ref to MutableRefObject since we know from the codebase that's what's always passed
   const refObject = ref as React.MutableRefObject<HTMLLIElement | null> | null;
@@ -155,6 +162,7 @@ export const LayerListItem = React.forwardRef<HTMLLIElement, LayerListItemProps>
       <IconAction
         wdKey={"layer-list-item:" + props.layerId + ":toggle-visibility"}
         action={visibilityAction}
+        title={visibilityTitle}
         classBlockName="visibility"
         classBlockModifier={visibilityAction}
         onClick={_e => onLayerVisibilityToggle!(props.layerIndex)}

src/i18n.ts

@@ -4,6 +4,7 @@ import resourcesToBackend from "i18next-resources-to-backend";
 import { initReactI18next } from "react-i18next";
 
 export const supportedLanguages = {
+  "az": "Azərbaycan",
   "de": "Deutsch",
   "en": "English",
   "fr": "Français",

src/locales/README.md

@@ -46,6 +46,7 @@ The following users can help you with the relevant languages:
 
 | ISO Code | Language           | User                                       |
 |----------|--------------------|--------------------------------------------|
+| az       | Azerbaijani        | [@jamalkamaladdin](https://github.com/jamalkamaladdin) |
 | de       | German             | [@josxha](https://github.com/josxha)       |
 | en       | English            | [@HarelM](https://github.com/HarelM)       |
 | fr       | French             | [@lhapaipai](https://github.com/lhapaipai) |

src/locales/az/translation.json

@@ -0,0 +1,204 @@
+{
+  "<0>Open in OSM</0>. Opens the current view on openstreetmap.org": "<0>OSM-də aç</0>. Cari görünüşü openstreetmap.org saytında açır",
+  "Achromatopsia filter": "Axromatopsiya süzgəci",
+  "Active Sources": "Aktiv Mənbələr",
+  "Add a new source to your style. You can only choose the source type and id at creation time!": "Üslubunuza yeni mənbə əlavə edin. Mənbə növünü və ID-ni yalnız yaradılma zamanı seçə bilərsiniz!",
+  "Add filter": "Süzgəc əlavə et",
+  "Add Layer": "Qat Əlavə Et",
+  "Add New Source": "Yeni Mənbə Əlavə Et",
+  "Add one of the publicly available sources to your style.": "Üslubunuza ictimai mənbələrdən birini əlavə edin.",
+  "Add Source": "Mənbə Əlavə Et",
+  "Add stop": "Dayanacaq əlavə et",
+  "Add value": "Dəyər əlavə et",
+  "Add Variable": "Dəyişən Əlavə Et",
+  "any filter matches": "istənilən süzgəc uyğun gəlirsə",
+  "API key for Stadia Maps.": "Stadia Maps üçün API açarı.",
+  "Base": "Baza",
+  "Bearing": "İstiqamət",
+  "Cancel": "Ləğv et",
+  "Center": "Mərkəz",
+  "Choose Public Source": "İctimai Mənbə Seç",
+  "Choose the default Maputnik renderer for this style.": "Bu üslub üçün defolt Maputnik renderer-ini seçin.",
+  "Click to close the editor": "Redaktoru bağlamaq üçün klikləyin",
+  "Close": "Bağla",
+  "Close modal": "Modalı bağla",
+  "Close popup": "Popapı bağla",
+  "Cluster": "Klaster",
+  "Code Editor": "Kod Redaktoru",
+  "Collapse": "Yığ",
+  "Color accessibility": "Rəng əlçatanlığı",
+  "Comment...": "Şərh...",
+  "Comments": "Şərhlər",
+  "Comments for the current layer. This is non-standard and not in the spec.": "Cari qat üçün şərhlər. Bu, standart deyil və spesifikasiyada yoxdur.",
+  "Convert property into a elevation function": "Xassəni hündürlük funksiyasına çevir",
+  "Convert property into a zoom function": "Xassəni yaxınlaşma funksiyasına çevir",
+  "Convert property to data function": "Xassəni məlumat funksiyasına çevir",
+  "Convert to expression": "İfadəyə çevir",
+  "Coord bottom left": "Koordinat aşağı sol",
+  "Coord bottom right": "Koordinat aşağı sağ",
+  "Coord top left": "Koordinat yuxarı sol",
+  "Coord top right": "Koordinat yuxarı sağ",
+  "CORS policy won't allow fetching resources served over http from https, use a <1>https://</1> domain": "CORS siyasəti https-dən http üzərindən verilən resursların alınmasına icazə vermir, <1>https://</1> domenindən istifadə edin",
+  "Create HTML": "HTML Yarat",
+  "Data Sources": "Məlumat Mənbələri",
+  "Data Sources modal": "Məlumat Mənbələri modalı",
+  "Data value": "Məlumat dəyəri",
+  "Debug": "Sazlama",
+  "Debug modal": "Sazlama modalı",
+  "Decrease the pitch by 10 degrees.": "Meyli 10 dərəcə azalt.",
+  "Decrease the rotation by 15 degrees.": "Fırlanmanı 15 dərəcə azalt.",
+  "Decrease the zoom level by 1.": "Yaxınlaşma səviyyəsini 1 azalt.",
+  "Decrease the zoom level by 2.": "Yaxınlaşma səviyyəsini 2 azalt.",
+  "Default": "Defolt",
+  "Delete": "Sil",
+  "Delete expression": "İfadəni sil",
+  "Delete filter block": "Süzgəc blokunu sil",
+  "Deuteranopia filter": "Deuteranopiya süzgəci",
+  "Drag and drop a style JSON file here or click to browse": "Üslub JSON faylını buraya sürükləyib buraxın və ya seçmək üçün klikləyin",
+  "Duplicate": "Dublikat et",
+  "Encoding": "Kodlaşdırma",
+  "Enter URL...": "URL daxil edin...",
+  "every filter matches": "bütün süzgəclər uyğun gəlirsə",
+  "Expand": "Genişlət",
+  "Export modal": "İxrac modalı",
+  "Filter": "Süzgəc",
+  "Focus map": "Xəritəyə fokuslan",
+  "Function": "Funksiya",
+  "Gallery Styles": "Qalereya Üslubları",
+  "General layout properties": "Ümumi düzülüş xassələri",
+  "GeoJSON": "GeoJSON",
+  "GeoJSON (JSON)": "GeoJSON (JSON)",
+  "GeoJSON (URL)": "GeoJSON (URL)",
+  "GeoJSON URL": "GeoJSON URL",
+  "Global State": "Qlobal Vəziyyət",
+  "Global State Variables": "Qlobal Vəziyyət Dəyişənləri",
+  "Glyphs URL": "Şriftlər URL-i",
+  "Help": "Kömək",
+  "Hide": "Gizlət",
+  "Icon layout properties": "İkon düzülüş xassələri",
+  "Icon paint properties": "İkon boyama xassələri",
+  "If the Map is in focused you can use the following shortcuts": "Xəritə fokusdadırsa aşağıdakı qısayollardan istifadə edə bilərsiniz",
+  "Image": "Şəkil",
+  "Image URL": "Şəkil URL-i",
+  "Increase the pitch by 10 degrees.": "Meyli 10 dərəcə artır.",
+  "Increase the rotation by 15 degrees.": "Fırlanmanı 15 dərəcə artır.",
+  "Increase the zoom level by 1.": "Yaxınlaşma səviyyəsini 1 artır.",
+  "Increase the zoom level by 2.": "Yaxınlaşma səviyyəsini 2 artır.",
+  "Input a data property to base styles off of.": "Üslubların əsaslanacağı məlumat xassəsini daxil edin.",
+  "Input value": "Giriş dəyəri",
+  "Inspect": "Yoxla",
+  "JSON Editor": "JSON Redaktoru",
+  "Key": "Açar",
+  "Layer": "Qat",
+  "Layer editor": "Qat redaktoru",
+  "Layer ID already exists": "Qat ID artıq mövcuddur",
+  "Layers": "Qatlar",
+  "Layers list": "Qatlar siyahısı",
+  "Layout properties": "Düzülüş xassələri",
+  "Learn More": "Ətraflı Öyrən",
+  "Light anchor": "İşıq lövbəri",
+  "Light color": "İşıq rəngi",
+  "Light intensity": "İşıq intensivliyi",
+  "Light position": "İşıq mövqeyi",
+  "Links": "Keçidlər",
+  "Load from a URL. Note that the URL must have <1>CORS enabled</1>.": "URL-dən yüklə. Qeyd edin ki, URL-də <1>CORS aktiv olmalıdır</1>.",
+  "Load from URL": "URL-dən yüklə",
+  "Loading": "Yüklənir",
+  "Loading style": "Üslub yüklənir",
+  "LocationIQ Access Token": "LocationIQ Giriş Tokeni",
+  "Map": "Xəritə",
+  "Map view": "Xəritə görünüşü",
+  "MapTiler Access Token": "MapTiler Giriş Tokeni",
+  "Maputnik on GitHub": "GitHub-da Maputnik",
+  "Max Zoom": "Maks. Yaxınlaşma",
+  "Min Zoom": "Min. Yaxınlaşma",
+  "Move layer down": "Qatı aşağı köçür",
+  "Move layer up": "Qatı yuxarı köçür",
+  "Must provide protocol: <1>http://</1> or <3>https://</3>": "Protokol göstərilməlidir: <1>http://</1> və ya <3>https://</3>",
+  "Must provide protocol: <1>https://</1>": "Protokol göstərilməlidir: <1>https://</1>",
+  "Name": "Ad",
+  "Nested filters are not supported.": "İç-içə süzgəclər dəstəklənmir.",
+  "no filter matches": "heç bir süzgəc uyğun gəlmirsə",
+  "No global state variables defined. Add variables to create reusable values in your style.": "Heç bir qlobal vəziyyət dəyişəni təyin edilməyib. Üslubunuzda təkrar istifadə oluna bilən dəyərlər yaratmaq üçün dəyişən əlavə edin.",
+  "Open": "Aç",
+  "Open a local JSON style from your computer.": "Kompüterinizdən yerli JSON üslubunu açın.",
+  "OpenLayers (experimental)": "OpenLayers (eksperimental)",
+  "Open local Style": "Yerli Üslubu Aç",
+  "Open modal": "Modalı aç",
+  "Open one of the publicly available styles to start from.": "Başlamaq üçün ictimai üslublardan birini açın.",
+  "Open Style": "Üslubu Aç",
+  "Options": "Seçimlər",
+  "Output value": "Çıxış dəyəri",
+  "Owner": "Sahib",
+  "Owner ID of the style. Used by Mapbox or future style APIs.": "Üslubun sahib ID-si. Mapbox və ya gələcək üslub API-ləri tərəfindən istifadə olunur.",
+  "Paint properties": "Boyama xassələri",
+  "Pan down by 100 pixels.": "100 piksel aşağı sürüşdür.",
+  "Pan left by 100 pixels.": "100 piksel sola sürüşdür.",
+  "Pan right by 100 pixels.": "100 piksel sağa sürüşdür.",
+  "Pan up by 100 pixels.": "100 piksel yuxarı sürüşdür.",
+  "Pitch": "Meyl",
+  "PMTiles URL": "PMTiles URL",
+  "Press <1>ESC</1> to lose focus of any active elements, then press one of:": "İstənilən aktiv elementin fokusunu itirmək üçün <1>ESC</1> düyməsini basın, sonra bunlardan birini basın:",
+  "Projection": "Proyeksiya",
+  "Protanopia filter": "Protanopiya süzgəci",
+  "Public access token for LocationIQ services.": "LocationIQ xidmətləri üçün ictimai giriş tokeni.",
+  "Public access token for MapTiler Cloud.": "MapTiler Cloud üçün ictimai giriş tokeni.",
+  "Public access token for Thunderforest services.": "Thunderforest xidmətləri üçün ictimai giriş tokeni.",
+  "Raster (Tile URLs)": "Rastr (Kafel URL-ləri)",
+  "Raster (TileJSON URL)": "Rastr (TileJSON URL)",
+  "Raster DEM (TileJSON URL)": "Rastr DEM (TileJSON URL)",
+  "Raster DEM (XYZ URLs)": "Rastr DEM (XYZ URL-ləri)",
+  "Remove '{{sourceId}}' source": "'{{sourceId}}' mənbəsini sil",
+  "Remove array item": "Massiv elementini sil",
+  "Remove variable": "Dəyişəni sil",
+  "Remove zoom level from stop": "Dayanacaqdan yaxınlaşma səviyyəsini sil",
+  "Revert from expression": "İfadədən geri qaytar",
+  "Save": "Yadda saxla",
+  "Save as": "Fərqli yadda saxla",
+  "Save Style": "Üslubu Yadda Saxla",
+  "Save the JSON style to your computer.": "JSON üslubunu kompüterinizə yadda saxlayın.",
+  "Scheme Type": "Sxem Növü",
+  "Search": "Axtar",
+  "Select a type of data scale (default is 'categorical').": "Məlumat şkalasının növünü seçin (defolt 'categorical'dır).",
+  "Shortcuts": "Qısayollar",
+  "Shortcuts menu": "Qısayollar menyusu",
+  "Show": "Göstər",
+  "Source": "Mənbə",
+  "Source ID": "Mənbə ID",
+  "Source Layer": "Mənbə Qatı",
+  "Source Type": "Mənbə Növü",
+  "Sources": "Mənbələr",
+  "Sprite URL": "Sprite URL-i",
+  "Stadia Maps API Key": "Stadia Maps API Açarı",
+  "Stops": "Dayanacaqlar",
+  "Style Renderer": "Üslub Renderer-i",
+  "Style Settings": "Üslub Parametrləri",
+  "Style Settings modal": "Üslub Parametrləri modalı",
+  "Style URL": "Üslub URL-i",
+  "Switch to filter editor.": "Süzgəc redaktoruna keç.",
+  "switch to layer": "qata keç",
+  "Terrain exaggeration": "Relyef şişirdilməsi",
+  "Terrain source": "Relyef mənbəyi",
+  "Text layout properties": "Mətn düzülüş xassələri",
+  "Text paint properties": "Mətn boyama xassələri",
+  "Thunderforest Access Token": "Thunderforest Giriş Tokeni",
+  "Tile Size": "Kafel Ölçüsü",
+  "Tile URL": "Kafel URL-i",
+  "TileJSON URL": "TileJSON URL",
+  "Toggle inspect": "Yoxlamanı aç/bağla",
+  "Transition delay": "Keçid gecikməsi",
+  "Transition duration": "Keçid müddəti",
+  "Tritanopia filter": "Tritanopiya süzgəci",
+  "Type": "Növ",
+  "Unique ID that identifies the source and is used in the layer to reference the source.": "Mənbəni müəyyən edən və qatda mənbəyə istinad üçün istifadə olunan unikal ID.",
+  "Upgrade to expression": "İfadəyə yüksəlt",
+  "Value": "Dəyər",
+  "Vector (PMTiles)": "Vektor (PMTiles)",
+  "Vector (Tile URLs)": "Vektor (Kafel URL-ləri)",
+  "Vector (TileJSON URL)": "Vektor (TileJSON URL)",
+  "Video": "Video",
+  "Video URL": "Video URL-i",
+  "View": "Görünüş",
+  "You've entered an old style filter.": "Köhnə üslub süzgəci daxil etmisiniz.",
+  "Zoom": "Yaxınlaşma"
+}

src/locales/de/translation.json

@@ -121,7 +121,7 @@
   "No global state variables defined. Add variables to create reusable values in your style.": "Keine globalen Zustandsvariablen definiert. Füge Variablen hinzu, um wiederverwendbare Werte in deinem Stil zu erstellen.",
   "Open": "Öffnen",
   "Open a local JSON style from your computer.": "Öffne einen lokalen JSON Stil von deinem Computer.",
-  "Open Layers (experimental)": "Ebenen öffnen (experimentell)",
+  "OpenLayers (experimental)": "OpenLayers (experimentell)",
   "Open local Style": "Lokalen Stil öffnen",
   "Open modal": "Modale Fenster öffnen",
   "Open one of the publicly available styles to start from.": "Öffne einen der öffentlich verfügbaren Stile, um zu starten.",

src/locales/it/translation.json

@@ -121,7 +121,7 @@
   "No global state variables defined. Add variables to create reusable values in your style.": "Nessuna variabile di stato globale definita. Aggiungi variabili per creare valori riutilizzabili nel tuo stile.",
   "Open": "Apri",
   "Open a local JSON style from your computer.": "Apri uno stile JSON dal tuo computer.",
-  "Open Layers (experimental)": "Apri livelli (sperimentale)",
+  "OpenLayers (experimental)": "OpenLayers (sperimentale)",
   "Open local Style": "Apri stile locale",
   "Open modal": "Apri finestra modale",
   "Open one of the publicly available styles to start from.": "Apro uno degli stili pubblici a partire da.",

src/locales/ko/translation.json

@@ -121,7 +121,7 @@
   "No global state variables defined. Add variables to create reusable values in your style.": "전역 상태 변수가 정의되지 않았습니다. 스타일에서 재사용 가능한 값을 생성하려면 변수를 추가하세요.",
   "Open": "열기",
   "Open a local JSON style from your computer.": "컴퓨터에서 로컬 JSON 스타일을 엽니다.",
-  "Open Layers (experimental)": "레이어 열기 (실험적)",
+  "OpenLayers (experimental)": "OpenLayers (실험적)",
   "Open local Style": "로컬 스타일 열기",
   "Open modal": "모달 열기",
   "Open one of the publicly available styles to start from.": "공개 스타일 중 하나를 선택하여 시작하세요.",

src/locales/zh/translation.json

@@ -121,7 +121,7 @@
   "No global state variables defined. Add variables to create reusable values in your style.": "未定义全局状态变量。添加变量以在样式中创建可重用的值。",
   "Open": "打开",
   "Open a local JSON style from your computer.": "从您的计算机打开本地JSON样式。",
-  "Open Layers (experimental)": "开放图层（实验性）",
+  "OpenLayers (experimental)": "OpenLayers（实验性）",
   "Open local Style": "打开本地样式",
   "Open modal": "打开模态框",
   "Open one of the publicly available styles to start from.": "打开一个公开可用的样式开始。",