@eodash/eodash 5.0.0-rc.1.5 → 5.0.0-rc.2

package/README.md

@@ -44,7 +44,7 @@ npm run build -- --lib
     ├── core               # CLI & Client source code
     ├── docs               # Documentation files
     ├── tests              # CLI & Client component tests folder
-    ├── widgets            # Vue componenets as internal widgets.
+    ├── widgets            # Vue components as internal widgets.
     ├── public             # Statically served directory
     └── README.md
 

package/core/client/composables/EodashMap.js

@@ -7,9 +7,10 @@ import { storeToRefs } from "pinia";
 import { useEventBus } from "@vueuse/core";
 import { eoxLayersKey } from "@/utils/keys";
 import { posIsSetFromUrl } from "@/utils/states";
+import { useOnLayersUpdate } from ".";
 /**
  * Holder for previous compare map view as it is overwritten by sync
- * @type { {map:import("ol").View } | null} mapElement
+ * @type { import("ol").View | null} mapElement
  */
 let viewHolder = null;
 
@@ -203,12 +204,13 @@ const createLayersConfig = async (
 /**
  * Initializes the map and updates it based on changes in the selected indicator and datetime,
  *
- * @param {import("vue").Ref<HTMLElement & Record<string,any> | null>} mapElement
+ * @param {import("vue").Ref<import("@eox/map").EOxMap| null>} mapElement
  * @param {import("vue").Ref<import("stac-ts").StacCollection | null>} selectedIndicator
  * @param {EodashCollection[]} eodashCols
  * @param {import("vue").Ref<string>} datetime
  * @param {import("vue").Ref<Record<string,any>[]>} mapLayers
- * @param {import("vue").Ref<HTMLElement & Record<string,any> | null>} partnerMap
+ * @param {import("vue").Ref<import("@eox/map").EOxMap| null>} partnerMap
+ * @param {boolean} zoomToExtent
  */
 export const useInitMap = (
   mapElement,
@@ -217,6 +219,7 @@ export const useInitMap = (
   datetime,
   mapLayers,
   partnerMap,
+  zoomToExtent,
 ) => {
   log.debug(
     "InitMap",
@@ -260,7 +263,7 @@ export const useInitMap = (
           // Compare map being initialized
           if (selectedCompareStac.value !== null) {
             // save view of compare map
-            viewHolder = mapElement?.value?.map.getView();
+            viewHolder = mapElement?.value?.map.getView() ?? null;
             /** @type {any} */
             (mapElement.value).sync = partnerMap.value;
           }
@@ -309,29 +312,31 @@ export const useInitMap = (
           datetime.value = endInterval.toISOString();
         }
 
-        // Try to move map view to extent only when main
-        // indicator and map changes
-        if (
-          mapElement?.value?.id === "main" &&
-          updatedStac.extent?.spatial.bbox &&
-          !posIsSetFromUrl.value
-        ) {
-          // Sanitize extent,
-          const b = updatedStac.extent?.spatial.bbox[0];
-          const sanitizedExtent = [
-            b?.[0] > -180 ? b?.[0] : -180,
-            b?.[1] > -90 ? b?.[1] : -90,
-            b?.[2] < 180 ? b?.[2] : 180,
-            b?.[3] < 90 ? b?.[3] : 90,
-          ];
-
-          const reprojExtent = mapElement.value?.transformExtent(
-            sanitizedExtent,
-            "EPSG:4326",
-            mapElement.value?.map?.getView().getProjection(),
-          );
-          /** @type {import("@eox/map").EOxMap} */
-          (mapElement.value).zoomExtent = reprojExtent;
+        if (zoomToExtent) {
+          // Try to move map view to extent only when main
+          // indicator and map changes
+          if (
+            mapElement?.value?.id === "main" &&
+            updatedStac.extent?.spatial.bbox &&
+            !posIsSetFromUrl.value
+          ) {
+            // Sanitize extent,
+            const b = updatedStac.extent?.spatial.bbox[0];
+            const sanitizedExtent = [
+              b?.[0] > -180 ? b?.[0] : -180,
+              b?.[1] > -90 ? b?.[1] : -90,
+              b?.[2] < 180 ? b?.[2] : 180,
+              b?.[3] < 90 ? b?.[3] : 90,
+            ];
+
+            const reprojExtent = mapElement.value?.transformExtent(
+              sanitizedExtent,
+              "EPSG:4326",
+              mapElement.value?.map?.getView().getProjection(),
+            );
+            /** @type {import("@eox/map").EOxMap} */
+            (mapElement.value).zoomExtent = reprojExtent;
+          }
         }
         if (posIsSetFromUrl.value) {
           posIsSetFromUrl.value = false;
@@ -341,7 +346,6 @@ export const useInitMap = (
           "Assigned layers",
           JSON.parse(JSON.stringify(layersCollection)),
         );
-
         mapLayers.value = layersCollection;
         // Emit event to update layers
         await nextTick(() => {
@@ -358,3 +362,18 @@ export const useInitMap = (
     stopIndicatorWatcher();
   });
 };
+/**
+ *
+ * @param {EodashCollection[]} eodashCols
+ * @param {import("vue").Ref<Exclude<import("@/types").EodashStyleJson["tooltip"],undefined>>} tooltipProperties
+ */
+export const useUpdateTooltipProperties = (eodashCols, tooltipProperties) => {
+  useOnLayersUpdate(async () => {
+    const tooltips = [];
+    for (const ec of eodashCols) {
+      tooltips.push(...(await ec.getToolTipProperties()));
+    }
+    tooltipProperties.value = tooltips;
+    log.debug("Updated tooltip properties", tooltipProperties.value);
+  });
+};

package/core/client/composables/EodashProcess.js

@@ -48,6 +48,10 @@ export async function pollProcessStatus({
         console.log("Result file fetched successfully:", resultResponse.data);
         return resultResponse.data; // Return the json result list
       }
+      if (processReport.status === "failed") {
+        isPolling.value = false;
+        throw new Error("Process failed.", processReport);
+      }
 
       // Log the current status if not successful
       console.log(
@@ -370,7 +374,7 @@ export async function processGeoTiff(links, jsonformValue, layerId, isPolling) {
  * @param {import("stac-ts").StacLink[] | undefined} links
  * @param {Record<string,any> | undefined} jsonformValue
  * @param {string} specUrl
- * @returns {Promise<[import("vega").Spec|null,Record<string,any>|null]>}
+ * @returns {Promise<[import("@eox/chart").EOxChart["spec"] | null,Record<string,any>|null]>}
  **/
 export async function getChartValues(links, jsonformValue, specUrl) {
   if (!specUrl || !links) return [null, null];
@@ -419,9 +423,10 @@ export async function getChartValues(links, jsonformValue, specUrl) {
  * @param {import("vue").Ref<import("stac-ts").StacCollection | null>} params.selectedStac
  * @param {import("vue").Ref<import("@eox/jsonform").EOxJSONForm | null>} params.jsonformEl
  * @param {import("vue").Ref<Record<string,any>|null>} params.jsonformSchema
- * @param {import("vue").Ref<import("@eox/chart").EOxChart["spec"]>} params.chartSpec
+ * @param {import("vue").Ref<import("@eox/chart").EOxChart["spec"] | null>} params.chartSpec
  * @param {import("vue").Ref<Record<string, any> | null>} params.chartData
  * @param {import("vue").Ref<boolean>} params.isPolling
+ * @param {import("vue").Ref<any[]>} params.processResults
  */
 export async function handleProcesses({
   loading,
@@ -431,6 +436,7 @@ export async function handleProcesses({
   chartSpec,
   chartData,
   isPolling,
+  processResults,
 }) {
   log.debug("Processing...");
   loading.value = true;
@@ -456,22 +462,50 @@ export async function handleProcesses({
       { ...(jsonformValue ?? {}) },
       specUrl,
     );
+    if (Object.keys(chartData.value ?? {}).length) {
+      processResults.value.push(chartData.value);
+    }
+    //@ts-expect-error we assume that the spec data is of type InlineData
+    if (chartSpec.value?.data?.values?.length) {
+      //@ts-expect-error we assume that the spec data is of type InlineData
+      processResults.value.push(chartSpec.value?.data.values);
+    }
+
     if (chartSpec.value && !("background" in chartSpec.value)) {
       chartSpec.value["background"] = "transparent";
     }
+
     const geotiffLayer = await processGeoTiff(
       serviceLinks,
       jsonformValue,
       selectedStac.value?.id ?? "",
       isPolling,
     );
+
+    if (geotiffLayer && geotiffLayer.source?.sources.length) {
+      processResults.value.push(
+        ...(geotiffLayer.source?.sources?.map((source) => source.url) ?? []),
+      );
+    }
+    // 3. vector geojson
     const vectorLayers = await processVector(
       serviceLinks,
       jsonformValue,
       selectedStac.value?.id ?? "",
     );
 
+    if (vectorLayers?.length) {
+      processResults.value.push(
+        ...vectorLayers.map((layer) => layer.source?.url),
+      );
+    }
+
     const imageLayers = processImage(serviceLinks, jsonformValue, origBbox);
+    if (imageLayers?.length) {
+      processResults.value.push(
+        ...imageLayers.map((layer) => layer.source?.url),
+      );
+    }
 
     log.debug(
       "rendered layers after processing:",
@@ -509,8 +543,9 @@ export async function handleProcesses({
  * @param {Object} params
  * @param {import("vue").Ref<boolean>} params.loading
  * @param {import("vue").Ref<boolean>} params.isProcessed
- * @param {import("vue").Ref<import("@eox/chart").EOxChart["spec"]>} params.chartSpec
+ * @param {import("vue").Ref<import("@eox/chart").EOxChart["spec"] | null>} params.chartSpec
  * @param {import("vue").Ref<boolean>} params.isPolling
+ * @param {import("vue").Ref<any[]>} params.processResults
  * @param {import("vue").Ref<Record<string,any>|null>} params.jsonformSchema
  */
 export function resetProcess({
@@ -518,12 +553,14 @@ export function resetProcess({
   isProcessed,
   chartSpec,
   jsonformSchema,
+  processResults,
   isPolling,
 }) {
   loading.value = false;
   isProcessed.value = false;
   isPolling.value = false;
   chartSpec.value = null;
+  processResults.value = [];
   jsonformSchema.value = null;
 }
 
@@ -536,7 +573,8 @@ export function resetProcess({
  * @param {import("vue").Ref<import("stac-ts").StacCollection>} params.selectedStac
  * @param {import("vue").Ref<import("@eox/jsonform").EOxJSONForm | null>} params.jsonformEl
  * @param {import("vue").Ref<Record<string,any> | null>} params.jsonformSchema
- * @param {import("vue").Ref<import("@eox/chart").EOxChart["spec"]>} params.chartSpec
+ * @param {import("vue").Ref<import("@eox/chart").EOxChart["spec"] | null>} params.chartSpec
+ * @param {import("vue").Ref<any[]>} params.processResults
  * @param {import("vue").Ref<boolean>} params.isProcessed
  * @param {import("vue").Ref<boolean>} params.loading
  * @param {import("vue").Ref<boolean>} params.isPolling
@@ -547,13 +585,21 @@ export async function initProcess({
   jsonformSchema,
   chartSpec,
   isProcessed,
+  processResults,
   loading,
   isPolling,
 }) {
   if (!selectedStac.value) {
     return;
   }
-  resetProcess({ loading, isProcessed, chartSpec, jsonformSchema, isPolling });
+  resetProcess({
+    loading,
+    isProcessed,
+    chartSpec,
+    jsonformSchema,
+    isPolling,
+    processResults,
+  });
   if (selectedStac.value["eodash:jsonform"]) {
     jsonformEl.value?.editor.destroy();
     // wait for the layers to be rendered

package/core/client/composables/index.js

@@ -17,6 +17,7 @@ import log from "loglevel";
 import { eodashKey, eoxLayersKey } from "@/utils/keys";
 import { useEventBus } from "@vueuse/core";
 import { posIsSetFromUrl } from "@/utils/states";
+import { setCollectionsPalette } from "@/utils";
 
 /**
  * Creates an absolute URL from a relative link and assignes it to `currentUrl`
@@ -81,13 +82,19 @@ export const useCompareAbsoluteUrl = (rel = "", base = eodash.stacEndpoint) => {
  * `ThemeDefinition`
  *
  * @param {string} themeName - Name of the theme to be updated
- * @param {import("vuetify").ThemeDefinition} [themeDefinition={}] - New
+ * @param {import("@/types").Eodash["brand"]["theme"]} [themeDefinition={}] - New
  *   defintion to be updated to. Default is `{}`
  * @returns {import("vuetify").ThemeInstance}
  */
 export const useUpdateTheme = (themeName, themeDefinition = {}) => {
   const theme = useTheme();
 
+  // extract collections palette from the theme
+  if (themeDefinition.collectionsPalette?.length) {
+    setCollectionsPalette(themeDefinition.collectionsPalette);
+    delete themeDefinition.collectionsPalette;
+  }
+
   /** @type {(keyof import("vuetify").ThemeDefinition)[]} */ (
     Object.keys(themeDefinition)
   ).forEach((key) => {

package/core/client/eodash.js

@@ -12,9 +12,11 @@ export const eodash = reactive({
   stacEndpoint:
     // "https://eurodatacube.github.io/eodash-catalog/RACE/catalog.json",
     // "https://gtif-cerulean.github.io/catalog/cerulean/catalog.json",
-    "https://eodashcatalog.eox.at/samplecatalog/samples/catalog.json",
-  // "https://eodashcatalog.eox.at/test-style/trilateral/catalog.json",
-  // "https://gtif-cerulean.github.io/catalog/cerulean/catalog.json",
+    // "https://eodashcatalog.eox.at/samplecatalog/samples/catalog.json",
+    // "https://eodashcatalog.eox.at/test-style/trilateral/catalog.json",
+    // "https://gtif-cerulean.github.io/catalog/cerulean/catalog.json",
+    // "https://gtif-cerulean.github.io/deside-catalog/deside/catalog.json",
+    "https://gtif-cerulean.github.io/cerulean-catalog/cerulean/catalog.json",
   brand: {
     noLayout: true,
     name: "Demo",
@@ -28,6 +30,18 @@ export const eodash = reactive({
         "surface-opacity": 0.6,
         "primary-opacity": 0.8,
       },
+      // Bank-Wong palette
+      collectionsPalette: [
+        "#009E73",
+        "#E69F00",
+        "#56B4E9",
+        "#009E73",
+        "#F0E442",
+        "#0072B2",
+        "#D55E00",
+        "#CC79A7",
+        "#994F00",
+      ],
     },
     footerText: "Demo configuration of eodash client",
   },
@@ -145,8 +159,6 @@ export const eodash = reactive({
                   widget: {
                     name: "EodashDatePicker",
                     properties: {
-                      hideArrows: true,
-                      hideInputField: true,
                       hintText: `<b>Hint:</b> closest available date is displayed <br />
                             on map (see Analysis Layers)`,
                     },
@@ -247,6 +259,7 @@ export const eodash = reactive({
                     properties: {
                       hintText: `<b>Hint:</b> closest available date is displayed <br />
                             on map (see Analysis Layers)`,
+                      toggleCalendar: true,
                     },
                   },
                 }
@@ -272,10 +285,10 @@ export const eodash = reactive({
           defineWidget: (selectedSTAC) =>
             selectedSTAC?.links.some((l) => l.rel === "service")
               ? {
-                  id: Symbol(),
+                  id: "Processes",
                   type: "internal",
                   title: "Processes",
-                  layout: { x: 0, y: 7, w: 3, h: 5 },
+                  layout: { x: 9, y: 7, w: 3, h: 5 },
                   widget: {
                     name: "EodashProcess",
                   },
@@ -419,6 +432,7 @@ export const eodash = reactive({
                     properties: {
                       hintText: `<b>Hint:</b> closest available date is displayed <br />
                                 on map (see Analysis Layers)`,
+                      toggleCalendar: true,
                     },
                   },
                 }

package/core/client/eodashSTAC/EodashCollection.js

@@ -31,6 +31,12 @@ export class EodashCollection {
    */
   selectedItem;
 
+  /** @type {Exclude<import("@/types").EodashStyleJson["tooltip"],undefined>} */
+  #tooltipProperties = [];
+
+  /** @type {string | undefined} */
+  color;
+
   //  read only
   get collectionStac() {
     return this.#collectionStac;
@@ -145,6 +151,7 @@ export class EodashCollection {
     // less control.
 
     let { layerConfig, style } = extractLayerConfig(
+      this.#collectionStac?.id ?? "",
       await fetchStyle(item, itemUrl),
     );
 
@@ -179,6 +186,10 @@ export class EodashCollection {
           layerLegend: this.#collectionStac["eox:colorlegend"],
         };
       }
+      extraProperties = {
+        ...extraProperties,
+        ...(this.color && { color: this.color }),
+      };
       const links = await createLayersFromLinks(
         this.#collectionStac?.id ?? "",
         title,
@@ -290,6 +301,19 @@ export class EodashCollection {
       : this.getItems()?.at(-1);
   }
 
+  async getToolTipProperties() {
+    if (!(this.selectedItem instanceof Item)) {
+      return [];
+    }
+    let styles = await fetchStyle(
+      this.selectedItem,
+      `${this.#collectionUrl}/${this.selectedItem.id}`,
+    );
+    const { tooltip } = styles || { tooltip: [] };
+    this.#tooltipProperties = tooltip ?? [];
+    return this.#tooltipProperties;
+  }
+
   /**
    *
    * @param {string} datetime
@@ -358,7 +382,6 @@ export class EodashCollection {
         indicator?.title || indicator.id,
         //@ts-expect-error indicator instead of item
         indicator,
-        // layerDatetime,
       )),
       ...(await createLayersFromAssets(
         indicator?.id ?? "",
@@ -366,9 +389,6 @@ export class EodashCollection {
         indicatorAssets,
         //@ts-expect-error indicator instead of item
         indicator,
-        // style,
-        // layerConfig,
-        // layerDatetime,
       )),
     ];
   }

package/core/client/eodashSTAC/createLayers.js

@@ -5,6 +5,7 @@ import {
   getProjectionCode,
   createLayerID,
   createAssetID,
+  mergeGeojsons,
 } from "./helpers";
 import log from "loglevel";
 
@@ -13,7 +14,7 @@ import log from "loglevel";
  * @param {string} title
  * @param {Record<string,import("stac-ts").StacAsset>} assets
  * @param {import("stac-ts").StacItem } item
- * @param {import("ol/layer/WebGLTile").Style} [style]
+ * @param {import("@/types").EodashStyleJson} [style]
  * @param {Record<string, unknown>} [layerConfig]
  * @param {Record<string, unknown>} [layerDatetime]
  * @param {object | null} [extraProperties]
@@ -33,6 +34,11 @@ export async function createLayersFromAssets(
   let geoTIFFSources = [];
   /** @type {number|null} */
   let geoTIFFIdx = null;
+  // let geoJsonLayers = [];
+  let geoJsonIdx = 0;
+
+  const geoJsonSources = [];
+  let geoJsonRoles = {};
 
   for (const [idx, ast] of Object.keys(assets).entries()) {
     // register projection if exists
@@ -41,15 +47,18 @@ export async function createLayersFromAssets(
         assets[ast]?.["proj:epsg"] || assets[ast]?.["eodash:proj4_def"]
       );
     await registerProjection(assetProjection);
-
-    if (assets[ast]?.type === "application/geo+json" || assets[ast]?.type === "application/vnd.flatgeobuf") {
+    if (assets[ast]?.type === "application/geo+json") {
+      geoJsonSources.push(assets[ast].href);
+      geoJsonIdx = idx;
+      extractRoles(geoJsonRoles, assets[ast]);
+    } else if (assets[ast]?.type === "application/vnd.flatgeobuf") {
       const assetId = createAssetID(collectionId, item.id, idx);
-      const sourceType = assets[ast]?.type === "application/geo+json" ? "GeoJSON" : "FlatGeoBuf";
-      log.debug(`Creating Vector layer from ${sourceType}`, assetId);
+      log.debug(`Creating Vector layer from FlatGeoBuf`, assetId);
+
       const layer = {
         type: "Vector",
         source: {
-          type: sourceType,
+          type: "FlatGeoBuf",
           url: assets[ast].href,
           format: "GeoJSON",
         },
@@ -66,6 +75,23 @@ export async function createLayersFromAssets(
         },
         ...(!style?.variables && { style }),
       };
+      // add tooltip interaction if style has tooltip
+      if (style?.tooltip) {
+        // @ts-expect-error no type for eox-map layer
+        layer.interactions = [
+          {
+            type: "select",
+            options: {
+              id: (Math.random() * 10000).toFixed() + "_selectInteraction",
+              condition: "pointermove",
+              style: {
+                "stroke-color": "#335267",
+                "stroke-width": 4,
+              },
+            },
+          },
+        ];
+      }
 
       extractRoles(layer.properties, assets[ast]);
 
@@ -78,6 +104,36 @@ export async function createLayersFromAssets(
     }
   }
 
+  if (geoJsonSources.length) {
+    const assetId = createAssetID(collectionId, item.id, geoJsonIdx);
+    log.debug(`Creating Vector layer from GeoJsons`, assetId);
+
+    const layer = {
+      type: "Vector",
+      source: {
+        type: "Vector",
+        url: await mergeGeojsons(geoJsonSources),
+        format: "GeoJSON",
+      },
+      properties: {
+        ...geoJsonRoles,
+        id: assetId,
+        title,
+        layerDatetime,
+        ...(layerConfig && {
+          layerConfig: {
+            ...layerConfig,
+            style,
+          },
+        }),
+      },
+      ...(!style?.variables && { style }),
+    };
+
+    layer.properties = { ...layer.properties, ...(extraProperties ?? {}) };
+
+    jsonArray.push(layer);
+  }
   if (geoTIFFSources.length && typeof geoTIFFIdx === "number") {
     const geotiffSourceID = collectionId + ";:;GeoTIFF";
     log.debug("Creating WebGLTile layer from GeoTIFF", geotiffSourceID);

package/core/client/eodashSTAC/helpers.js

@@ -1,6 +1,7 @@
 import { toAbsolute } from "stac-js/src/http.js";
 import axios from "@/plugins/axios";
 import log from "loglevel";
+import { getStyleVariablesState } from "./triggers.js";
 
 /** @param {import("stac-ts").StacLink[]} [links] */
 export function generateFeatures(links) {
@@ -39,13 +40,24 @@ export function generateFeatures(links) {
 /**
  * Sperates and extracts layerConfig (jsonform schema & legend) from a style json
  *
- *  @param { import("ol/layer/WebGLTile").Style & { jsonform?: Record<string,any> } & { legend?: Record<string,any> } } [style] */
-export function extractLayerConfig(style) {
+ * @param {string} collectionId
+ *  @param { import("@/types").EodashStyleJson} [style]
+ * */
+export function extractLayerConfig(collectionId, style) {
+  if (!style) {
+    return { layerConfig: undefined, style: undefined };
+  }
+  style = { ...style };
+
+  if (Object.keys(style.variables ?? {}).length) {
+    style.variables = getStyleVariablesState(collectionId, style.variables);
+  }
+
   /** @type {Record<string,unknown> | undefined} */
   let layerConfig = undefined;
+
   if (style?.jsonform) {
     layerConfig = { schema: style.jsonform, type: "style" };
-    style = { ...style };
     delete style.jsonform;
     if (style?.legend) {
       layerConfig.legend = style.legend;
@@ -124,7 +136,7 @@ export const fetchStyle = async (item, itemUrl) => {
       url = toAbsolute(styleLink.href, itemUrl);
     }
 
-    /** @type {import("ol/layer/WebGLTile").Style & {jsonform?:Record<string,any>}} */
+    /** @type {import("@/types").EodashStyleJson} */
     const styleJson = await axios.get(url).then((resp) => resp.data);
 
     log.debug("fetched styles JSON", JSON.parse(JSON.stringify(styleJson)));
@@ -200,8 +212,9 @@ export const extractLayerDatetime = (links, currentStep) => {
     controlValues,
     currentStep,
     slider: true,
+    navigation: true,
     play: false,
-    displayFormat: "DD MMMM YYYY",
+    displayFormat: "DD.MM.YYYY HH:MM",
   };
 };
 
@@ -373,3 +386,33 @@ export const removeUnneededProperties = (layers) => {
   });
   return cloned;
 };
+
+/**
+ * @param {string[]} geojsonUrls
+ */
+export async function mergeGeojsons(geojsonUrls) {
+  if (!geojsonUrls.length) {
+    return undefined;
+  }
+  if (geojsonUrls.length === 1) {
+    return geojsonUrls[0];
+  }
+
+  const merged = {
+    type: "FeatureCollection",
+    /** @type {import("ol").Feature[]} */
+    features: [],
+  };
+  await Promise.all(
+    geojsonUrls.map((url) =>
+      axios.get(url).then((resp) => {
+        const geojson = resp.data;
+        merged.features.push(...(geojson.features ?? []));
+      }),
+    ),
+  );
+
+  return encodeURI(
+    "data:application/json;charset=utf-8," + JSON.stringify(merged),
+  );
+}