@matdata/yasgui 5.0.1 → 5.2.0

package/README.md

@@ -1,111 +1,196 @@
-# YASGUI
-
-YASGUI (Yet Another SPARQL GUI) is an advanced SPARQL client for querying and exploring RDF data. It provides a user-friendly interface for writing SPARQL queries, executing them against SPARQL endpoints, and visualizing the results in various formats.
-
-Go to https://yasgui.matdata.eu/ and use it freely in production. Or fork this repo and extend it yourself. Contributions are certainly welcome!
-
-## Table of Contents
-
-- [Useful Links](#useful-links)
-- [Features](#features)
-  - [Keyboard Shortcuts](#keyboard-shortcuts)
-    - [Query Editor (Yasqe)](#query-editor-yasqe)
-    - [Fullscreen Mode](#fullscreen-mode)
-    - [URI Explorer](#uri-explorer)
-  - [Prefix Management](#prefix-management)
-  - [Result Visualization Plugins (Yasr)](#result-visualization-plugins-yasr)
-- [Installation](#installation)
-  - [npm](#npm)
-  - [Yarn](#yarn)
-- [Local Development](#local-development)
-- [License](#license)
-
-## Useful Links
-
-- Production environment: https://yasgui.matdata.eu/
-- Dev environment: https://yasgui-dev.matdata.eu/
-- User documentation: https://docs.triply.cc/yasgui/
-- Developer documentation: https://docs.triply.cc/yasgui-api/
-
-## Features
-
-### Keyboard Shortcuts
-
-#### Query Editor (Yasqe)
-- **Ctrl+Enter** / **Cmd+Enter**: Execute the current query
-- **Ctrl+Space**: Trigger autocomplete
-- **Ctrl+S**: Save query to local storage
-- **Shift+Ctrl+F**: Auto-format the query
-- **Ctrl+/**: Comment/uncomment selected lines
-- **Shift+Ctrl+D**: Duplicate the current line
-- **Shift+Ctrl+K**: Delete the current line
-- **Esc**: Remove focus from the editor
-
-#### Fullscreen Mode
-- **F11**: Toggle fullscreen mode for the query editor (Yasqe)
-- **F10**: Toggle fullscreen mode for the results viewer (Yasr)
-- **Ctrl+Shift+F**: Switch between Yasqe and Yasr fullscreen modes
-
-#### URI Explorer
-- **Ctrl+Click** on any URI in the query editor: Automatically executes a CONSTRUCT query to explore the clicked URI's connections (incoming and outgoing triples). The query runs in the background without modifying your current query in the editor.
-
-### Prefix Management
-- **PREFIX Button**: Insert saved prefix declarations into your query (replaces existing PREFIX lines at the beginning)
-- **Settings Modal**: Access via the settings button (⚙) to manage:
-  - **Saved Prefixes**: Define reusable PREFIX declarations
-  - **Auto-capture**: Automatically captures new prefixes from your queries (enabled by default)
-  - **Request Configuration**: Configure HTTP request method, accept headers, arguments, headers, and named/default graphs
-- **Default Prefixes**: Automatically includes `rdf:` and `rdfs:` prefixes for new users
-- **Prefix Autocomplete**: When typing a prefix declaration (e.g., `PREFIX foaf:`), the editor automatically queries [prefix.cc](https://prefix.cc) to suggest and auto-complete the full URI commonly associated with that prefix. This helps you quickly add standard prefixes without needing to remember their full URIs.
-
-### Result Visualization Plugins (Yasr)
-
-Yasgui includes several built-in plugins to visualize SPARQL query results:
-
-- **Table**: Interactive table view with sorting, filtering, pagination, and column resizing. Ideal for SELECT query results.
-- **Boolean**: Displays boolean results (true/false) with visual indicators. Automatically used for ASK queries.
-- **Response**: Raw response viewer with syntax highlighting and code folding. Shows the original response from the endpoint in JSON, XML, Turtle, or other formats.
-- **Geo**: Geographic visualization plugin for displaying spatial data on interactive maps. Visualizes geospatial triples with coordinates. See [Yasgui Geo TG Plugin](https://github.com/Thib-G/yasgui-geo-tg) for more details.
-- **Graph**: Visual graph representation of RDF data using nodes and edges. Ideal for CONSTRUCT/DESCRIBE query results. See [Yasgui Graph Plugin](https://github.com/Matdata-eu/yasgui-graph-plugin) for more details.
-- **Error**: Displays error messages and diagnostics when queries fail, including CORS troubleshooting guidance.
-
-Plugins are automatically selected based on the query type and response format. You can manually switch between available plugins using the view selector in the results pane.
-
-## Installation
-
-Below are instructions on how to include Yasgui in your project.
-If you only want to install Yasr or Yasqe, replace yasgui in the commands below.
-
-### npm
-
-```sh
-npm i @matdata/yasgui
-```
-
-### Yarn
-
-```sh
-yarn add @matdata/yasgui
-```
-
-## Local Development
-
-#### Installing dependencies
-
-Run `npm install`.
-
-#### Running Yasgui locally
-
-To develop locally, run `npm run dev`
-
-Go to `http://localhost:5173/demo` in your browser to see Yasgui in action.
-
-#### Compiling Yasgui
-
-Run `npm run build`. It'll store the transpiled js/css files in the `build` directory.
-
-## License
-
-This is a fork from [Zazuko](https://github.com/zazuko/Yasgui) who forked it from [Triply](https://github.com/TriplyDB/Yasgui).
-
-This code is released under the MIT license.
+# YASGUI
+
+YASGUI (Yet Another SPARQL GUI) is an advanced SPARQL client for querying and exploring RDF data. It provides a user-friendly interface for writing SPARQL queries, executing them against SPARQL endpoints, and visualizing the results in various formats.
+
+Go to https://yasgui.matdata.eu/ and use it freely in production. Or fork this repo and extend it yourself. Contributions are certainly welcome!
+
+## Table of Contents
+
+- [Useful Links](#useful-links)
+- [Features](#features)
+  - [Keyboard Shortcuts](#keyboard-shortcuts)
+    - [Query Editor (Yasqe)](#query-editor-yasqe)
+    - [Fullscreen Mode](#fullscreen-mode)
+    - [URI Explorer](#uri-explorer)
+  - [Prefix Management](#prefix-management)
+  - [Result Visualization Plugins (Yasr)](#result-visualization-plugins-yasr)
+- [Installation](#installation)
+  - [npm](#npm)
+  - [Yarn](#yarn)
+- [Local Development](#local-development)
+- [License](#license)
+
+## Useful Links
+
+- Production environment: https://yasgui.matdata.eu/
+- Dev environment: https://yasgui-dev.matdata.eu/ (GitHub Pages - automatically updated with every commit to main branch)
+- User documentation: https://docs.triply.cc/yasgui/
+- Developer documentation: https://docs.triply.cc/yasgui-api/
+- Docker Hub: https://hub.docker.com/r/mathiasvda/yasgui
+
+## Features
+
+### Themes
+
+Yasgui supports both **light** and **dark** themes with instant switching:
+
+- **Theme Toggle Button**: Quickly switch between light and dark modes using the button in the tab bar
+- **Persistent Preference**: Your theme choice is automatically saved
+- **System Detection**: Automatically matches your system's dark/light mode preference
+- **Full Coverage**: Consistent theming across all components (editor, results, modals)
+
+See the [Theme Guide](./docs/THEME_GUIDE.md) for detailed configuration options and usage examples.
+
+See the [Theme Implementation Guide](./docs/THEME_IMPLEMENTATION_GUIDE.md) for detailed instructions on how to implement theme support in your own Yasgui plugins.
+
+### Layout Orientation
+
+Yasgui supports two layout orientations to optimize screen space usage:
+
+- **Vertical Layout (Default)**: YASQE (query editor) positioned above YASR (results viewer)
+- **Horizontal Layout**: YASQE and YASR positioned side-by-side
+
+The horizontal layout is particularly useful for wide monitors, allowing you to dedicate the complete height to both the query editor and results viewer.
+
+#### Runtime Toggle
+
+Users can switch between vertical and horizontal layouts at any time using the **layout toggle button** in the control bar (next to the endpoint selector). This button shows:
+- **Side-by-side rectangles icon** when in vertical mode (click to switch to horizontal)
+- **Stacked rectangles icon** when in horizontal mode (click to switch to vertical)
+
+#### Initial Configuration
+
+You can also set the initial layout orientation when creating a Yasgui instance:
+
+```javascript
+new Yasgui(document.getElementById("yasgui"), {
+  orientation: "horizontal" // or "vertical" (default)
+});
+```
+
+#### CSS Customization
+
+Customize the header height used in the horizontal layout calculation by setting the CSS custom property:
+
+```css
+.yasgui {
+  --yasgui-header-height: 120px; /* Adjust based on your header height */
+  --yasgui-min-height: 500px; /* Minimum height for horizontal layout panels */
+}
+```
+
+### Keyboard Shortcuts
+
+#### Query Editor (Yasqe)
+- **Ctrl+Enter** / **Cmd+Enter**: Execute the current query
+- **Ctrl+Space**: Trigger autocomplete
+- **Ctrl+S**: Save query to local storage
+- **Shift+Ctrl+F**: Auto-format the query
+- **Ctrl+/**: Comment/uncomment selected lines
+- **Shift+Ctrl+D**: Duplicate the current line
+- **Shift+Ctrl+K**: Delete the current line
+- **Esc**: Remove focus from the editor
+
+#### Fullscreen Mode
+- **F11**: Toggle fullscreen mode for the query editor (Yasqe)
+- **F10**: Toggle fullscreen mode for the results viewer (Yasr)
+- **Ctrl+Shift+F**: Switch between Yasqe and Yasr fullscreen modes
+
+#### URI Explorer
+- **Ctrl+Click** on any URI in the query editor: Automatically executes a CONSTRUCT query to explore the clicked URI's connections (incoming and outgoing triples). The query runs in the background without modifying your current query in the editor.
+
+### Prefix Management
+- **PREFIX Button**: Insert saved prefix declarations into your query (replaces existing PREFIX lines at the beginning)
+- **Settings Modal**: Access via the settings button (⚙) to manage:
+  - **Saved Prefixes**: Define reusable PREFIX declarations
+  - **Auto-capture**: Automatically captures new prefixes from your queries (enabled by default)
+  - **Request Configuration**: Configure HTTP request method, accept headers, arguments, headers, and named/default graphs
+- **Default Prefixes**: Automatically includes `rdf:` and `rdfs:` prefixes for new users
+- **Prefix Autocomplete**: When typing a prefix declaration (e.g., `PREFIX foaf:`), the editor automatically queries [prefix.cc](https://prefix.cc) to suggest and auto-complete the full URI commonly associated with that prefix. This helps you quickly add standard prefixes without needing to remember their full URIs.
+
+### Endpoint Quick Switch Buttons
+
+Configure predefined SPARQL endpoint buttons for quick switching between different endpoints:
+
+- **Predefined Buttons**: Configure a list of endpoint buttons during Yasgui initialization
+- **User-Defined Buttons**: Users can add their own custom endpoint buttons through the Settings modal
+- **One-Click Switching**: Instantly switch to a different SPARQL endpoint with a single button click
+- **Persistent Custom Buttons**: User-defined buttons are saved in local storage
+- **Fully Themed**: Buttons automatically adapt to light and dark themes
+
+For detailed configuration options and examples, see the [Endpoint Buttons Guide](./docs/ENDPOINT_BUTTONS.md).
+
+### Result Visualization Plugins (Yasr)
+
+Yasgui includes several built-in plugins to visualize SPARQL query results:
+
+- **Table**: Interactive table view with sorting, filtering, pagination, and column resizing. Ideal for SELECT query results.
+- **Boolean**: Displays boolean results (true/false) with visual indicators. Automatically used for ASK queries.
+- **Response**: Raw response viewer with syntax highlighting and code folding. Shows the original response from the endpoint in JSON, XML, Turtle, or other formats.
+- **Geo**: Geographic visualization plugin for displaying spatial data on interactive maps. Visualizes geospatial triples with coordinates. See [Yasgui Geo TG Plugin](https://github.com/Thib-G/yasgui-geo-tg) for more details.
+- **Graph**: Visual graph representation of RDF data using nodes and edges. Ideal for CONSTRUCT/DESCRIBE query results. See [Yasgui Graph Plugin](https://github.com/Matdata-eu/yasgui-graph-plugin) for more details.
+- **Error**: Displays error messages and diagnostics when queries fail, including CORS troubleshooting guidance.
+
+Plugins are automatically selected based on the query type and response format. You can manually switch between available plugins using the view selector in the results pane.
+
+## Installation
+
+Below are instructions on how to include Yasgui in your project.
+If you only want to install Yasr or Yasqe, replace yasgui in the commands below.
+
+### npm
+
+```sh
+npm i @matdata/yasgui
+```
+
+### Yarn
+
+```sh
+yarn add @matdata/yasgui
+```
+
+### Docker
+
+Yasgui is also available as a Docker image on Docker Hub. Images are built and published automatically when a new release is created.
+
+```sh
+docker pull mathiasvda/yasgui:latest
+docker run -p 8080:8080 mathiasvda/yasgui:latest
+```
+
+You can customize the default SPARQL endpoint by setting the `YASGUI_DEFAULT_ENDPOINT` environment variable:
+
+```sh
+docker run -p 8080:8080 -e YASGUI_DEFAULT_ENDPOINT=https://your-endpoint.com/sparql mathiasvda/yasgui:latest
+```
+
+The application will be available at `http://localhost:8080`.
+
+## Local Development
+
+#### Installing dependencies
+
+Run `npm install`.
+
+#### Running Yasgui locally
+
+To develop locally, run `npm run dev`
+
+Go to `http://localhost:5173/demo` in your browser to see Yasgui in action.
+
+#### Compiling Yasgui
+
+Run `npm run build`. It'll store the transpiled js/css files in the `build` directory.
+
+## License
+
+This is a fork from [Zazuko](https://github.com/zazuko/Yasgui) who forked it from [Triply](https://github.com/TriplyDB/Yasgui).
+
+This code is released under the MIT license.
+
+## Release notes
+
+Release notes can be found in the release section of the GitHub repository: [Yasgui Releases](https://github.com/Matdata-eu/yasgui/releases)
+
+Instructions on how to write release notes are found in 

package/build/ts/src/PersistentConfig.d.ts

@@ -1,4 +1,4 @@
-import Yasgui from "./";
+import Yasgui, { EndpointButton } from "./";
 import * as Tab from "./Tab";
 export declare var storageNamespace: string;
 export interface PersistedJson {
@@ -14,6 +14,7 @@ export interface PersistedJson {
     } | undefined;
     prefixes?: string;
     autoCaptureEnabled?: boolean;
+    customEndpointButtons?: EndpointButton[];
 }
 export default class PersistentConfig {
     private persistedJson;
@@ -45,5 +46,7 @@ export default class PersistentConfig {
     setPrefixes(prefixes: string): void;
     getAutoCaptureEnabled(): boolean;
     setAutoCaptureEnabled(enabled: boolean): void;
+    getCustomEndpointButtons(): EndpointButton[];
+    setCustomEndpointButtons(buttons: EndpointButton[]): void;
     static clear(): void;
 }

package/build/ts/src/PersistentConfig.js

@@ -9,6 +9,7 @@ function getDefaults() {
         lastClosedTab: undefined,
         prefixes: "",
         autoCaptureEnabled: true,
+        customEndpointButtons: [],
     };
 }
 export default class PersistentConfig {
@@ -119,6 +120,13 @@ export default class PersistentConfig {
         this.persistedJson.autoCaptureEnabled = enabled;
         this.toStorage();
     }
+    getCustomEndpointButtons() {
+        return this.persistedJson.customEndpointButtons || [];
+    }
+    setCustomEndpointButtons(buttons) {
+        this.persistedJson.customEndpointButtons = buttons;
+        this.toStorage();
+    }
     static clear() {
         const storage = new YStorage(storageNamespace);
         storage.removeNamespace();

package/build/ts/src/PersistentConfig.js.map

@@ -1 +1 @@
-{"version":3,"file":"PersistentConfig.js","sourceRoot":"","sources":["../../../../../packages/yasgui/src/PersistentConfig.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"PersistentConfig.js","sourceRoot":"","sources":["../../../../../packages/yasgui/src/PersistentConfig.ts"],"names":[],"mappings":"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"}

package/build/ts/src/Tab.d.ts

@@ -51,7 +51,10 @@ export declare class Tab extends EventEmitter {
     private yasqeWrapperEl;
     private yasrWrapperEl;
     private endpointSelect;
+    private endpointButtonsContainer;
     private settingsModal?;
+    private currentOrientation;
+    private orientationToggleButton?;
     constructor(yasgui: Yasgui, conf: PersistedJson);
     name(): string;
     getPersistedJson(): PersistedJson;
@@ -68,10 +71,15 @@ export declare class Tab extends EventEmitter {
     setQuery(query: string): this;
     getRequestConfig(): YasguiRequestConfig;
     private initControlbar;
+    private initOrientationToggle;
+    private updateOrientationToggleIcon;
+    toggleOrientation(): void;
     getYasqe(): Yasqe;
     getYasr(): Yasr;
     private initTabSettingsMenu;
     private initEndpointSelectField;
+    private initEndpointButtons;
+    refreshEndpointButtons(): void;
     private checkEndpointForCors;
     setEndpoint(endpoint: string, endpointHistory?: string[]): this;
     getEndpoint(): string;

package/build/ts/src/Tab.js

@@ -17,6 +17,14 @@ import * as shareLink from "./linkUtils";
 import EndpointSelect from "./endpointSelect";
 import "./tab.scss";
 import { getRandomId, default as Yasgui } from "./";
+const HORIZONTAL_LAYOUT_ICON = `<svg viewBox="0 0 24 24" class="svgImg">
+  <rect x="2" y="4" width="9" height="16" stroke="currentColor" stroke-width="2" fill="none"/>
+  <rect x="13" y="4" width="9" height="16" stroke="currentColor" stroke-width="2" fill="none"/>
+</svg>`;
+const VERTICAL_LAYOUT_ICON = `<svg viewBox="0 0 24 24" class="svgImg">
+  <rect x="2" y="2" width="20" height="8" stroke="currentColor" stroke-width="2" fill="none"/>
+  <rect x="2" y="12" width="20" height="10" stroke="currentColor" stroke-width="2" fill="none"/>
+</svg>`;
 export class Tab extends EventEmitter {
     constructor(yasgui, conf) {
         super();
@@ -156,6 +164,7 @@ WHERE {
             throw new Error("Expected a valid configuration to initialize tab with");
         this.yasgui = yasgui;
         this.persistentJson = conf;
+        this.currentOrientation = this.yasgui.config.orientation || "vertical";
     }
     name() {
         return this.persistentJson.name;
@@ -174,6 +183,7 @@ WHERE {
         this.rootEl.id = this.persistentJson.id;
         this.rootEl.setAttribute("role", "tabpanel");
         this.rootEl.setAttribute("aria-labelledby", "tab-" + this.persistentJson.id);
+        addClass(this.rootEl, `orientation-${this.currentOrientation}`);
         const editorWrapper = document.createElement("div");
         editorWrapper.className = "editorwrapper";
         const controlbarAndYasqeDiv = document.createElement("div");
@@ -184,6 +194,7 @@ WHERE {
         controlbarAndYasqeDiv.appendChild(this.yasqeWrapperEl);
         editorWrapper.appendChild(controlbarAndYasqeDiv);
         this.yasrWrapperEl = document.createElement("div");
+        this.yasrWrapperEl.className = "yasrWrapperEl";
         this.initTabSettingsMenu();
         this.rootEl.appendChild(editorWrapper);
         this.rootEl.appendChild(this.yasrWrapperEl);
@@ -261,10 +272,47 @@ WHERE {
     }
     initControlbar() {
         this.initEndpointSelectField();
+        this.initOrientationToggle();
+        this.initEndpointButtons();
         if (this.yasgui.config.endpointInfo && this.controlBarEl) {
             this.controlBarEl.appendChild(this.yasgui.config.endpointInfo());
         }
     }
+    initOrientationToggle() {
+        if (!this.controlBarEl)
+            return;
+        this.orientationToggleButton = document.createElement("button");
+        this.orientationToggleButton.className = "tabContextButton orientationToggle";
+        this.orientationToggleButton.setAttribute("aria-label", "Toggle layout orientation");
+        this.orientationToggleButton.title = "Toggle layout orientation";
+        this.updateOrientationToggleIcon();
+        this.orientationToggleButton.addEventListener("click", () => {
+            this.toggleOrientation();
+        });
+        this.controlBarEl.appendChild(this.orientationToggleButton);
+    }
+    updateOrientationToggleIcon() {
+        if (!this.orientationToggleButton)
+            return;
+        this.orientationToggleButton.innerHTML =
+            this.currentOrientation === "vertical" ? HORIZONTAL_LAYOUT_ICON : VERTICAL_LAYOUT_ICON;
+        this.orientationToggleButton.title =
+            this.currentOrientation === "vertical" ? "Switch to horizontal layout" : "Switch to vertical layout";
+    }
+    toggleOrientation() {
+        if (!this.rootEl)
+            return;
+        removeClass(this.rootEl, `orientation-${this.currentOrientation}`);
+        this.currentOrientation = this.currentOrientation === "vertical" ? "horizontal" : "vertical";
+        addClass(this.rootEl, `orientation-${this.currentOrientation}`);
+        this.updateOrientationToggleIcon();
+        if (this.yasqe) {
+            this.yasqe.refresh();
+        }
+        if (this.yasr) {
+            this.yasr.refresh();
+        }
+    }
     getYasqe() {
         return this.yasqe;
     }
@@ -287,6 +335,40 @@ WHERE {
             this.setEndpoint(endpoint, endpointHistory);
         });
     }
+    initEndpointButtons() {
+        if (!this.controlBarEl)
+            throw new Error("Need to initialize wrapper elements before drawing endpoint buttons");
+        if (!this.endpointButtonsContainer) {
+            this.endpointButtonsContainer = document.createElement("div");
+            addClass(this.endpointButtonsContainer, "endpointButtonsContainer");
+            this.controlBarEl.appendChild(this.endpointButtonsContainer);
+        }
+        this.refreshEndpointButtons();
+    }
+    refreshEndpointButtons() {
+        if (!this.endpointButtonsContainer)
+            return;
+        this.endpointButtonsContainer.innerHTML = "";
+        const configButtons = this.yasgui.config.endpointButtons || [];
+        const customButtons = this.yasgui.persistentConfig.getCustomEndpointButtons();
+        const allButtons = [...configButtons, ...customButtons];
+        if (allButtons.length === 0) {
+            this.endpointButtonsContainer.style.display = "none";
+            return;
+        }
+        this.endpointButtonsContainer.style.display = "flex";
+        allButtons.forEach((buttonConfig) => {
+            const button = document.createElement("button");
+            addClass(button, "endpointButton");
+            button.textContent = buttonConfig.label;
+            button.title = `Set endpoint to ${buttonConfig.endpoint}`;
+            button.setAttribute("aria-label", `Set endpoint to ${buttonConfig.endpoint}`);
+            button.addEventListener("click", () => {
+                this.setEndpoint(buttonConfig.endpoint);
+            });
+            this.endpointButtonsContainer.appendChild(button);
+        });
+    }
     checkEndpointForCors(endpoint) {
         if (this.yasgui.config.corsProxy && !(endpoint in Yasgui.corsEnabled)) {
             const askUrl = new URL(endpoint);
@@ -368,7 +450,9 @@ WHERE {
         return config;
     }
     initYasqe() {
-        const yasqeConf = Object.assign(Object.assign({}, this.yasgui.config.yasqe), { value: this.persistentJson.yasqe.value, editorHeight: this.persistentJson.yasqe.editorHeight ? this.persistentJson.yasqe.editorHeight : undefined, persistenceId: null, consumeShareLink: null, createShareableLink: () => this.getShareableLink(), requestConfig: () => {
+        const currentTheme = this.yasgui.getTheme();
+        const cmTheme = currentTheme === "dark" ? "material-palenight" : "default";
+        const yasqeConf = Object.assign(Object.assign({}, this.yasgui.config.yasqe), { theme: cmTheme, value: this.persistentJson.yasqe.value, editorHeight: this.persistentJson.yasqe.editorHeight ? this.persistentJson.yasqe.editorHeight : undefined, persistenceId: null, consumeShareLink: null, createShareableLink: () => this.getShareableLink(), requestConfig: () => {
                 const processedReqConfig = Object.assign(Object.assign({ acceptHeaderGraph: "text/turtle", acceptHeaderSelect: "application/sparql-results+json" }, mergeWith({}, this.persistentJson.requestConfig, this.getStaticRequestConfig(), function customizer(objValue, srcValue) {
                     if (Array.isArray(objValue) || Array.isArray(srcValue)) {
                         return [...(objValue || []), ...(srcValue || [])];