@eodash/eodash 5.3.2 → 5.4.0

package/dist/types/widgets/EodashProcess/methods/handling.d.ts

@@ -25,6 +25,19 @@ export function initProcess({ selectedStac, jsonformEl, jsonformSchema, chartSpe
     isPolling: import("vue").Ref<boolean>;
     enableCompare: boolean;
 }): Promise<void>;
+/**
+ * Update the jsonform schema to have the correct layer id from the map
+ *
+ * @export
+ * @async
+ * @param {Object} params
+ * @param {import("vue").Ref<Record<string,any> | null>} params.jsonformSchema params.jsonformSchema
+ * @param {Record<string, any>[] | undefined} params.newLayers params.newLayers
+ */
+export function updateJsonformIdentifier({ jsonformSchema, newLayers }: {
+    jsonformSchema: import("vue").Ref<Record<string, any> | null>;
+    newLayers: Record<string, any>[] | undefined;
+}): Promise<void>;
 /**
  *
  * @param {object} params

package/dist/types/widgets/EodashProcess/methods/utils.d.ts

@@ -59,4 +59,5 @@ export function extractAsyncResults(resultItem: import("../../EodashProcess/type
  */
 export function updateJsonformSchemaTarget(jsonformSchema: import("json-schema").JSONSchema7 | null | undefined): import("json-schema").JSONSchema7 | null | undefined;
 export function download(fileName: string, content: string | Record<string, any>): void;
+export function getDrawToolsProperty(jsonformSchema: any): string | undefined;
 export function applyProcessLayersToMap(mapElement: import("@eox/map").EOxMap | null, processLayers: import("@eox/map").EoxLayer[]): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eodash/eodash",
-  "version": "5.3.2",
+  "version": "5.4.0",
   "type": "module",
   "types": "./dist/types/core/client/types.d.ts",
   "files": [
@@ -42,7 +42,7 @@
   "browser": "./core/client/main.js",
   "scripts": {
     "start": "npx eodash dev --entryPoint templates/baseConfig.js",
-    "prepare": "rollup -c",
+    "prepare": "rollup -c && chmod +x dist/node/cli.js",
     "prepack": "npm run build:lib && npm run build:types",
     "dev": "npx eodash dev --entryPoint templates/baseConfig.js",
     "dev:lib": "npx eodash dev --entryPoint templates/baseConfig.js --lib",

package/templates/expert.js

@@ -35,6 +35,10 @@ export default {
           },
           enableBackToPOIs: true,
           enableSearch: true,
+          // searchParams: {
+          //   countrycode: "gb,ie,fr"
+          //   bounds: "-84.26514,41.58998,-77.54150,46.14246"
+          // },
         },
         btnsPosition: {
           x: "12/9/9",

package/templates/index.js

@@ -3,6 +3,8 @@ import { getBaseConfig } from "./baseConfig";
 export { default as lite } from "./lite";
 export { default as expert } from "./expert";
 export { default as compare } from "./compare";
+export { default as explore } from "./explore";
+
 export { getBaseConfig };
 
 export default getBaseConfig;

package/widgets/EodashMap/EodashMapBtns.vue

@@ -69,6 +69,7 @@
       v-if="mapEl && enableSearch"
       :for="mapEl"
       :endpoint="opencageUrl"
+      :params="searchParams"
       class="geosearch-detached"
       label="Search"
       small
@@ -131,6 +132,7 @@ const {
   backToPOIs,
   enableSearch,
   enableZoom,
+  searchParams,
 } = defineProps({
   exportMap: {
     type: Boolean,
@@ -157,6 +159,10 @@ const {
     type: Boolean,
     default: true,
   },
+  searchParams: {
+    type: [Boolean, Object],
+    default: true,
+  },
   enableZoom: {
     type: Boolean,
     default: true,
@@ -263,11 +269,20 @@ const opencageUrl = `https://api.opencagedata.com/geocode/v1/json?key=${opencage
 
 <style scoped>
 @import url("@eox/ui/style.css");
+/* Make sure panel does pass click event through */
+.map-buttons {
+  pointer-events: none !important;
+}
 
 .map-buttons button {
+  pointer-events: auto !important;
   margin-bottom: 5px;
   background-color: var(--primary);
 }
+/* Make sure buttons have pointer event */
+.geosearch-detached {
+  pointer-events: auto !important;
+}
 
 /* Container constraints removal */
 eox-geosearch {

package/widgets/EodashMap/index.vue

@@ -41,7 +41,7 @@
     <span v-if="enableScaleLine" id="scale-line" ref="scale-line" />
     <div
       class="map-buttons-container"
-      :style="`margin: ${btnsPosition.gap}px 0 ${btnsPosition.gap}px 0`"
+      :style="`margin: ${btnsPosition.gap}px 0 ${btnsPosition.gap}px 0; top: ${btnsTop}px;`"
     >
       <!-- prettier-ignore -->
       <EodashMapBtns
@@ -60,6 +60,7 @@
         "
         :enableZoom="(indicator || compareIndicator || poi) ? btnsProps.enableZoom : false
         "
+        :searchParams="btnsProps.searchParams"
       />
     </div>
   </span>
@@ -79,7 +80,7 @@ import {
 } from "@/store/states";
 import { storeToRefs } from "pinia";
 import { useSTAcStore } from "@/store/stac";
-import { useDisplay } from "vuetify";
+import { useDisplay, useLayout } from "vuetify";
 import {
   eodashCollections,
   eodashCompareCollections,
@@ -136,6 +137,7 @@ const props = defineProps({
      * enableChangeProjection?: boolean;
      * enableBackToPOIs?: boolean;
      * enableSearch?: boolean;
+     * searchParams?: object;
      * enableZoom?: boolean;
      * enableCompareIndicators?: boolean | {
      *   compareTemplate?:string;
@@ -151,6 +153,7 @@ const props = defineProps({
       enableBackToPOIs: true,
       enableSearch: true,
       enableZoom: true,
+      searchParams: {},
     }),
   },
 });
@@ -192,6 +195,7 @@ const btnsProps = computed(() => ({
   backToPOIs: props.btns.enableBackToPOIs ?? true,
   enableSearch: props.btns.enableSearch ?? true,
   enableZoom: props.btns.enableZoom ?? true,
+  searchParams: props.btns.searchParams,
 }));
 
 // Prepare containers for scale line and cursor coordinates
@@ -355,7 +359,10 @@ const tooltipPropertyTransform = (map) => {
       param.value = JSON.stringify(param.value);
     }
     if (!isNaN(Number(param.value))) {
-      param.value = Number(param.value).toFixed(4).toString();
+      const decimals = !isNaN(Number(tooltipProp.decimals))
+        ? Number(tooltipProp.decimals)
+        : 4;
+      param.value = Number(param.value).toFixed(decimals).toString();
     }
 
     return {
@@ -364,6 +371,13 @@ const tooltipPropertyTransform = (map) => {
     };
   };
 };
+const { mainRect } = useLayout();
+const btnsTop = ref(0);
+onMounted(() => {
+  const eoDash = document.querySelector("eo-dash");
+  btnsTop.value =
+    (mainRect.value.top || eoDash?.getBoundingClientRect().top) ?? 0;
+});
 </script>
 
 <style scoped>
@@ -421,7 +435,6 @@ const tooltipPropertyTransform = (map) => {
 
 .map-buttons-container {
   position: fixed;
-  top: 0;
   left: 0;
   width: 100%;
   height: 100%;

package/widgets/EodashMap/methods/create-layers-config.js

@@ -52,6 +52,29 @@ export const createLayersConfig = async (
     dataLayers.layers.push(...layers);
   }
 
+  /* check for roles in indicator links to assign visibility property for the data layers */
+  if (selectedIndicator?.links) {
+    const visibilityLinks = selectedIndicator.links.filter(
+      (link) =>
+        Array.isArray(link.roles) &&
+        (link.roles.includes("disable") || link.roles.includes("hidden")),
+    );
+    if (visibilityLinks.length > 0) {
+      visibilityLinks.forEach((vl) => {
+        const targetLayerId = vl.id;
+        const targetLayer = dataLayers.layers.find(
+          (dl) => dl.properties.id.split(";:;")[0] === targetLayerId,
+        );
+        if (targetLayer) {
+          if (Array.isArray(vl.roles) && vl.roles.includes("disable")) {
+            targetLayer.properties.visible = false;
+          } else if (Array.isArray(vl.roles) && vl.roles.includes("hidden")) {
+            targetLayer.properties.layerControlHide = true;
+          }
+        }
+      });
+    }
+  }
   layersCollection.push(dataLayers);
   const indicatorLayers =
     //@ts-expect-error indicator is collection

package/widgets/EodashMap/methods/index.js

@@ -155,13 +155,6 @@ export const useInitMap = (
           return;
         }
 
-        /** @type {Record<string,any>[]} */
-        layersCollection = await createLayersConfig(
-          updatedStac,
-          eodashCols,
-          selectedItem ? updatedItem : updatedTime,
-        );
-
         // We try to set the current time selection to latest extent date
         let endInterval = null;
         const interval = updatedStac?.extent?.temporal?.interval;
@@ -180,8 +173,17 @@ export const useInitMap = (
           !isFirstLoad.value
         ) {
           datetime.value = endInterval.toISOString();
+        } else if (isFirstLoad.value && !datetime.value && endInterval) {
+          datetime.value = endInterval.toISOString();
         }
 
+        /** @type {Record<string,any>[]} */
+        layersCollection = await createLayersConfig(
+          updatedStac,
+          eodashCols,
+          updatedItem ?? updatedTime,
+        );
+
         if (zoomToExtent) {
           // Try to move map view to extent only when main
           // indicator and map changes

package/widgets/EodashProcess/ProcessList.vue

@@ -20,10 +20,12 @@
             <a
               class="processUrl"
               target="_blank"
+              v-tooltip="'Process details'"
               :href="getJobStatusUrl(item.jobID, currentIndicator)"
               >{{
                 new Date(item.job_start_datetime).toISOString().slice(0, 16)
-              }}</a
+              }}
+              <v-icon>mdi-open-in-new</v-icon></a
             >
           </td>
           <td>{{ item.status }}</td>
@@ -71,7 +73,13 @@
   </div>
 </template>
 <script setup>
-import { mdiUploadBox, mdiDownloadBox, mdiTrashCanOutline } from "@mdi/js";
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import {
+  mdiUploadBox,
+  mdiDownloadBox,
+  mdiTrashCanOutline,
+  mdiOpenInNew,
+} from "@mdi/js";
 import { onMounted, toRef, toRefs } from "vue";
 import { useSTAcStore } from "@/store/stac";
 import { compareIndicator, indicator } from "@/store/states";

package/widgets/EodashProcess/index.vue

@@ -59,7 +59,7 @@ import {
   chartEl,
   compareChartEl,
 } from "@/store/states";
-import { download } from "./methods/utils";
+import { download, getDrawToolsProperty } from "./methods/utils";
 import { compareJobs, jobs } from "./states";
 import { mdiCogPlayOutline, mdiDownloadCircleOutline } from "@mdi/js";
 
@@ -155,14 +155,6 @@ const downloadResults = () => {
 };
 
 const startProcess = async () => {
-  /** @param {*} jsonformSchema */
-  const getDrawToolsProperty = (jsonformSchema) => {
-    for (const property in jsonformSchema.properties) {
-      if (jsonformSchema.properties[property]?.options?.drawtools) {
-        return property;
-      }
-    }
-  };
   const drawToolsProperty = getDrawToolsProperty(jsonformSchema.value);
   const propertyIsEmpty =
     drawToolsProperty &&

package/widgets/EodashProcess/methods/composables.js

@@ -1,4 +1,4 @@
-import { initProcess } from "./handling";
+import { initProcess, updateJsonformIdentifier } from "./handling";
 import { useEventBus } from "@vueuse/core";
 import { nextTick, onMounted, watch } from "vue";
 import { eoxLayersKey } from "@/utils/keys";
@@ -67,6 +67,18 @@ export const useInitProcess = ({
   const evtKey =
     mapElement?.id === "compare" ? "compareLayers:updated" : "layers:updated";
   useOnLayersUpdate(async (evt, _payload) => {
+    if (
+      evt == "layertime:updated" ||
+      evt == "compareLayertime:updated" ||
+      evt == "time:updated" ||
+      evt == "compareTime:updated"
+    ) {
+      await updateJsonformIdentifier({
+        jsonformSchema,
+        // @ts-expect-error TODO payload coming from time update events is not an object with layers property
+        newLayers: _payload,
+      });
+    }
     if (evt !== evtKey) {
       return;
     }

package/widgets/EodashProcess/methods/custom-endpoints/chart/veda-endpoint.js

@@ -19,7 +19,7 @@ export async function handleVedaEndpoint({
   enableCompare = false,
 }) {
   const vedaLink = links.find(
-    (link) => link.rel === "service" && link.endpoint === "veda",
+    (link) => link.rel === "service" && (link.endpoint === "veda" || link.endpoint === "veda_stac"),
   );
   if (!vedaLink) {
     return;
@@ -32,12 +32,17 @@ export async function handleVedaEndpoint({
   const configs = await fetchVedaCOGsConfig(
     selectedStac,
     enableCompare ? currentCompareUrl.value : currentUrl.value,
+    vedaLink,
   );
   // TODO: convert jsonform bbox type to geojson in the schema to avoid the conversion here
   return await Promise.all(
     configs.map(({ endpoint, datetime }) => {
+      const url = new URL(vedaEndpoint);
+      const key = vedaLink.endpoint === "veda_stac" ? "ids" : "url";
+      url.searchParams.set(key, endpoint);
+
       return axios
-        .post(vedaEndpoint + `?url=${endpoint}`, {
+        .post(url.toString(), {
           ...{
             type: "Feature",
             properties: {},
@@ -63,8 +68,9 @@ export async function handleVedaEndpoint({
  * Fetches the COGs endpoints from the STAC collections
  * @param {import("stac-ts").StacCollection} selectedStac
  * @param {string} absoluteUrl
+ * @param {import("stac-ts").StacLink} vedaLink
  */
-async function fetchVedaCOGsConfig(selectedStac, absoluteUrl) {
+async function fetchVedaCOGsConfig(selectedStac, absoluteUrl, vedaLink) {
   // retrieve the collections from the indicator
   const collectionLinks = selectedStac.links.filter(
     (link) => link.rel == "child",
@@ -110,10 +116,13 @@ async function fetchVedaCOGsConfig(selectedStac, absoluteUrl) {
     );
     const itemLinks = collection.links.filter((link) => link.rel == "item");
     configs.push(
-      ...itemLinks.map((link) => ({
-        endpoint: /** @type {string} */ (link["cog_href"]),
+      ...itemLinks.map((link) => {
+        const endpoint = /** @type {string} */ (vedaLink.endpoint === "veda_stac" ? link.id : link["cog_href"]);
+        return {
+        endpoint,
         datetime: /** @type string **/ (link[datetimeProperty]),
-      })),
+      }
+    })
     );
   }
 

package/widgets/EodashProcess/methods/handling.js

@@ -3,6 +3,7 @@ import {
   applyProcessLayersToMap,
   extractGeometries,
   getBboxProperty,
+  getDrawToolsProperty,
   updateJsonformSchemaTarget,
 } from "./utils";
 import {
@@ -18,6 +19,7 @@ import { handleLayersCustomEndpoints } from "./custom-endpoints/layers";
 import { handleChartCustomEndpoints } from "./custom-endpoints/chart";
 import { useSTAcStore } from "@/store/stac";
 import { useGetSubCodeId } from "@/composables";
+import { getLayers } from "@/store/actions";
 
 /**
  * Fetch and set the jsonform schema to initialize the process
@@ -70,6 +72,13 @@ export async function initProcess({
 
   await jsonformEl.value?.editor.destroy();
   if (updatedJsonform) {
+    // make sure correct target layer id is used in jsonform
+    if (updatedJsonform.properties?.feature?.options?.drawtools?.layerId) {
+      await updateJsonformIdentifier({
+        jsonformSchema,
+        newLayers: await getLayers(),
+      });
+    }
     if (enableCompare) {
       updatedJsonform = updateJsonformSchemaTarget(updatedJsonform);
     }
@@ -77,6 +86,74 @@ export async function initProcess({
   }
 }
 
+/**
+ * Update the jsonform schema to have the correct layer id from the map
+ *
+ * @export
+ * @async
+ * @param {Object} params
+ * @param {import("vue").Ref<Record<string,any> | null>} params.jsonformSchema params.jsonformSchema
+ * @param {Record<string, any>[] | undefined} params.newLayers params.newLayers
+ */
+export async function updateJsonformIdentifier({ jsonformSchema, newLayers }) {
+  const form = jsonformSchema.value;
+  if (!form) {
+    return;
+  }
+  const drawToolsProperty = getDrawToolsProperty(form);
+  if (
+    drawToolsProperty &&
+    newLayers &&
+    form?.properties[drawToolsProperty]?.options?.drawtools?.layerId
+  ) {
+    // get partial or full id and try to match with correct eoxmap layer
+    // check if newLayers is an array or an object with layers property
+    let layers = newLayers;
+    // @ts-expect-error TODO payload coming from time update sometimes is not an object with layers property
+    if (newLayers.layers && Array.isArray(newLayers.layers)) {
+      // @ts-expect-error TODO payload coming from time update sometimes is not an object with layers property
+      layers = newLayers.layers;
+    }
+
+    const layerId =
+      form.properties[drawToolsProperty].options.drawtools.layerId.split(
+        ";:;",
+      )[0];
+    let matchedLayerId = null;
+    // layers are not flat can be grouped, we need to recursively search
+    const traverseLayers = (
+      /** @type {Record<string, any>[] | undefined} */ layersArray,
+    ) => {
+      if (!layersArray) {
+        return;
+      }
+      for (const layer of layersArray) {
+        if (layer.layers) {
+          // @ts-expect-error TODO payload coming from time update events is not an object with layers property
+          traverseLayers(layer);
+        } else {
+          if (layer.properties?.id?.startsWith(layerId)) {
+            matchedLayerId = layer.properties.id;
+            break;
+          }
+        }
+      }
+    };
+    traverseLayers(layers);
+    if (matchedLayerId) {
+      form.properties.feature.options.drawtools.layerId = matchedLayerId;
+      // trigger jsonform update in next tick
+      jsonformSchema.value = null;
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      jsonformSchema.value = form;
+    } else {
+      throw new Error(
+        `Could not find matching layer for processing form with id: ${layerId}`,
+      );
+    }
+  }
+}
+
 /**
  *
  * @param {object} params

package/widgets/EodashProcess/methods/utils.js

@@ -508,6 +508,16 @@ export function extractAsyncResults(resultItem) {
   }
   return extracted;
 }
+
+/** @param {*} jsonformSchema */
+export const getDrawToolsProperty = (jsonformSchema) => {
+  for (const property in jsonformSchema.properties) {
+    if (jsonformSchema.properties[property]?.options?.drawtools) {
+      return property;
+    }
+  }
+};
+
 /**
  * @param {import("@eox/map").EOxMap | null} mapElement
  * @param {import("@eox/map").EoxLayer[]} processLayers