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

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,12 @@ 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
  */
 export const useInitMap = (
   mapElement,
@@ -260,7 +261,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;
           }
@@ -341,7 +342,6 @@ export const useInitMap = (
           "Assigned layers",
           JSON.parse(JSON.stringify(layersCollection)),
         );
-
         mapLayers.value = layersCollection;
         // Emit event to update layers
         await nextTick(() => {
@@ -358,3 +358,17 @@ export const useInitMap = (
     stopIndicatorWatcher();
   });
 };
+/**
+ *
+ * @param {EodashCollection[]} eodashCols
+ * @param {import("vue").Ref<import("@/types").EodashStyleJson["tooltip"]>} tooltipProperties
+ */
+export const useUpdateTooltipProperties = (eodashCols, tooltipProperties) => {
+  useOnLayersUpdate(async () => {
+    tooltipProperties.value = [];
+    for (const ec of eodashCols) {
+      tooltipProperties.value.push(...(await ec.getToolTipProperties()));
+    }
+    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/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",
@@ -145,10 +147,9 @@ 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)`,
+                      toggleCalendar: true,
                     },
                   },
                 }
@@ -272,10 +273,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",
                   },

package/core/client/eodashSTAC/EodashCollection.js

@@ -31,6 +31,9 @@ export class EodashCollection {
    */
   selectedItem;
 
+  /** @type {import("@/types").EodashStyleJson["tooltip"]} */
+  #tooltipProperties = [];
+
   //  read only
   get collectionStac() {
     return this.#collectionStac;
@@ -290,6 +293,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

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: "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

@@ -39,13 +39,17 @@ 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] */
+ *  @param { import("@/types").EodashStyleJson} [style] */
 export function extractLayerConfig(style) {
+  if (!style) {
+    return { layerConfig: undefined, style: undefined };
+  }
+  style = { ...style };
   /** @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 +128,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 +204,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 +378,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),
+  );
+}

package/core/client/types.ts

@@ -316,3 +316,10 @@ export declare const store: typeof import("@/store").default;
 /////
 
 export * from "./main.js";
+
+export type EodashStyleJson = import("ol/style/webgl.js").WebGLStyle & {
+  variables?: Record<string, any>;
+  legend?: Record<string, any>;
+  jsonform?: Record<string, any>;
+  tooltip?: { id: string; title?: string; appendix?: string }[];
+};

package/core/client/utils/states.js

@@ -20,3 +20,6 @@ export const eodashCompareCollections = shallowReactive([]);
 
 /** whether the map postion was set in URL params on first load */
 export const posIsSetFromUrl = ref(false);
+
+/** @type {import("vue").Ref<Record<string,any>|undefined>} */
+export const layerControlFormValue = ref({});

package/dist/client/{DashboardLayout-B-4X57-t.js → DashboardLayout-SZfMDUoR.js}

@@ -1,7 +1,7 @@
 import { openBlock, createBlock, withCtx, createElementVNode, unref, normalizeStyle, createElementBlock, Suspense, resolveDynamicComponent, mergeProps, createCommentVNode, Fragment, renderList, Transition } from 'vue';
 import '@eox/layout';
-import { _ as _export_sfc, F as useDefineTemplate } from './asWebComponent-BnFMd0T6.js';
-import { V as VMain } from './VMain-BWLMf-rn.js';
+import { _ as _export_sfc, F as useDefineTemplate } from './asWebComponent-DW1XzZkL.js';
+import { V as VMain } from './VMain-CQpXnzDR.js';
 
 const _hoisted_1 = ["gap"];
 const _hoisted_2 = ["id", "h", "w", "x", "y"];

package/dist/client/{DynamicWebComponent-Dj3QYwag.js → DynamicWebComponent-I9gzMY0L.js}

@@ -1,5 +1,5 @@
 import { withAsyncContext, ref, onMounted, onUnmounted, openBlock, createElementBlock, createBlock, resolveDynamicComponent, mergeProps } from 'vue';
-import { $ as useSTAcStore } from './asWebComponent-BnFMd0T6.js';
+import { $ as useSTAcStore } from './asWebComponent-DW1XzZkL.js';
 
 const _hoisted_1 = { class: "d-flex flex-column fill-height overflow-auto" };