@eodash/eodash 5.0.0-rc.3 → 5.1.0

package/widgets/EodashProcess/methods/composables.js

@@ -1,4 +1,3 @@
-import { mapEl } from "@/store/states";
 import { initProcess } from "./handling";
 import { useEventBus } from "@vueuse/core";
 import { nextTick, onMounted, watch } from "vue";
@@ -11,7 +10,7 @@ import { useOnLayersUpdate } from "@/composables";
  * @export
  * @async
  * @param {Object} params
- * @param {import("vue").Ref<import("stac-ts").StacCollection>} params.selectedStac
+ * @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"] | null>} params.chartSpec
@@ -19,6 +18,7 @@ import { useOnLayersUpdate } from "@/composables";
  * @param {import("vue").Ref<boolean>} params.isProcessed
  * @param {import("vue").Ref<boolean>} params.loading
  * @param {import("vue").Ref<boolean>} params.isPolling
+ * @param {import("@eox/map").EOxMap | null} params.mapElement
  */
 export const useInitProcess = ({
   selectedStac,
@@ -29,13 +29,15 @@ export const useInitProcess = ({
   processResults,
   loading,
   isPolling,
+  mapElement,
 }) => {
   const layersEvents = useEventBus(eoxLayersKey);
 
   onMounted(async () => {
     // wait for the layers to be rendered
-    if (mapEl.value?.layers.length > 1) {
+    if ((mapElement?.layers.length ?? 0) > 1) {
       await initProcess({
+        enableCompare: mapElement?.id === "compare",
         selectedStac,
         jsonformEl,
         jsonformSchema,
@@ -48,6 +50,7 @@ export const useInitProcess = ({
     } else {
       layersEvents.once(async () => {
         await initProcess({
+          enableCompare: mapElement?.id === "compare",
           selectedStac,
           jsonformEl,
           jsonformSchema,
@@ -61,19 +64,23 @@ export const useInitProcess = ({
     }
   });
 
+  const evtKey =
+    mapElement?.id === "compare" ? "compareLayers:updated" : "layers:updated";
   useOnLayersUpdate(async (evt, _payload) => {
-    if (evt === "layers:updated") {
-      await initProcess({
-        selectedStac,
-        jsonformEl,
-        jsonformSchema,
-        chartSpec,
-        isProcessed,
-        processResults,
-        loading,
-        isPolling,
-      });
+    if (evt !== evtKey) {
+      return;
     }
+    await initProcess({
+      enableCompare: mapElement?.id === "compare",
+      selectedStac,
+      jsonformEl,
+      jsonformSchema,
+      chartSpec,
+      isProcessed,
+      processResults,
+      loading,
+      isPolling,
+    });
   });
 };
 

package/widgets/EodashProcess/methods/custom-endpoints/chart/index.js

@@ -0,0 +1,35 @@
+import log from "loglevel";
+import { handleSentinelHubProcess } from "./sentinelhub-endpoint";
+import { handleVedaEndpoint } from "./veda-endpoint";
+
+export const handleChartCustomEndpoints = createCustomChartEndpointsHandler([
+  handleSentinelHubProcess,
+  handleVedaEndpoint,
+]);
+/**
+ * @param {((input:import("^/EodashProcess/types").CustomEnpointInput)=> Promise<any[] | undefined | null>)[]} callbacks
+ */
+function createCustomChartEndpointsHandler(callbacks) {
+  /**
+   * @param {import("^/EodashProcess/types").CustomEnpointInput} inputs
+   * */
+  return async (inputs) => {
+    for (const callback of callbacks) {
+      const data = await callback(inputs);
+      log.debug(
+        "Custom endpoint data:",
+        data,
+        "for callback:",
+        callback.name,
+        "inputs:",
+        inputs,
+      );
+      const isNotValid = !data || !data.length || data.some((item) => !item);
+      if (isNotValid) {
+        continue;
+      }
+      return data;
+    }
+    return null;
+  };
+}

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

@@ -0,0 +1,275 @@
+import axios from "@/plugins/axios";
+import { currentUrl, currentCompareUrl } from "@/store/states";
+import { generateTimePairs, getBboxProperty } from "../../utils";
+import { extractCollectionUrls } from "@/eodashSTAC/helpers";
+
+/**
+ *
+ * @param {import("^/EodashProcess/types").CustomEnpointInput} inputs
+ * @returns
+ */
+export async function handleSentinelHubProcess({
+  links,
+  jsonformValue,
+  jsonformSchema,
+  selectedStac,
+  enableCompare = false,
+}) {
+  const sentinelHubLink = links.find(
+    (link) => link.rel === "service" && link.endpoint === "sentinelhub",
+  );
+  if (!sentinelHubLink) {
+    return;
+  }
+  const evalScriptLink = await getEvalScriptLink(
+    selectedStac,
+    enableCompare ? currentCompareUrl.value : currentUrl.value,
+  );
+  if (!evalScriptLink) {
+    console.error(
+      "[eodash] evalscript link for sentinel hub not found in indicator",
+      evalScriptLink,
+    );
+    return;
+  }
+  if (!sentinelHubLink) {
+    return;
+  }
+  const endpoint = sentinelHubLink.href;
+  const bboxProperty = getBboxProperty(jsonformSchema);
+  const bbox = jsonformValue[bboxProperty];
+
+  const clientId = process.env.EODASH_SENTINELHUB_CLIENT_ID;
+  const clientSecret = process.env.EODASH_SENTINELHUB_CLIENT_SECRET;
+
+  const bearer = await sentinelHubAuth(clientId, clientSecret);
+  if (!bearer) {
+    console.error(
+      "[eodash] Error while fetching bearer token from sentinel hub",
+    );
+    return;
+  }
+  // generate 30 dates from the start and end date of the selected stac
+  // generate time pairs from the selected stac temporal extent
+  const timePairs = generateTimePairs(
+    selectedStac.extent.temporal.interval[0],
+    [jsonformValue["start_date"], jsonformValue["end_date"]],
+    jsonformValue["distribution"],
+  );
+
+  // fetch data from sentinel hub
+  return await Promise.all(
+    timePairs.map(([to, from]) => {
+      return fetchSentinelHubData({
+        url: endpoint,
+        bearer,
+        bbox,
+        from,
+        to,
+        exampleLink: evalScriptLink,
+      }).catch((err) =>
+        console.error(
+          "[eodash] Error while fetching data from sentinel hub endpoint:",
+          err,
+        ),
+      );
+    }),
+  ).then((data) => data.flat().map((data) => data.outputs.data));
+}
+
+/**
+ * @param {string} [clientId]
+ * @param {string} [clientSecret]
+ * @returns {Promise<string | void>}
+ */
+async function sentinelHubAuth(clientId, clientSecret) {
+  if (!clientId || !clientSecret) {
+    console.error(
+      "[eodash] Error (sentinelhub): client id or secret not found",
+    );
+    return;
+  }
+
+  const sessionToken = sessionStorage.getItem("sentinelhub_token");
+  const sessionTokenTime = /** @type {string} */ (
+    sessionStorage.getItem("sentinelhub_token_time")
+  );
+  const isValid = Date.now() - Number(sessionTokenTime) < 3600 * 1000;
+
+  // if the token is still valid, return it
+  if (sessionToken && isValid) {
+    sessionStorage.setItem("sentinelhub_token_time", Date.now().toString());
+    return sessionToken;
+  }
+  const token = await retrieveSentinelHubToken(clientId, clientSecret);
+  if (!token) {
+    return;
+  }
+  sessionStorage.setItem("sentinelhub_token_time", Date.now().toString());
+  sessionStorage.setItem("sentinelhub_token", token);
+  return token;
+}
+/**
+ * @param {string} clientId
+ * @param {string} clientSecret
+ * @returns {Promise<string | void>}
+ */
+async function retrieveSentinelHubToken(clientId, clientSecret) {
+  const url = "https://services.sentinel-hub.com/oauth/token";
+  const headers = {
+    "Content-Type": "application/x-www-form-urlencoded",
+  };
+  const body = new URLSearchParams({
+    client_id: clientId,
+    client_secret: clientSecret,
+    response_type: "token",
+    grant_type: "client_credentials",
+  });
+  return await axios
+    .post(url, body, { headers })
+    .then((resp) => resp.data.access_token);
+}
+/**
+ *
+ * @param {object} param0
+ * @param {string} param0.url  - url to the sentinel hub endpoint
+ * @param {string} param0.bearer - bearer token for authentication
+ * @param {number[]} param0.bbox - bounding box of the area of interest
+ * @param {string} param0.from - start date of the time range
+ * @param {string} param0.to - end date of the time range
+ * @param {number} [param0.timeout = 20000] - timeout for the request
+ * @param {import("stac-ts").StacLink} param0.exampleLink - example link containing evalscript to use for the request
+ * @returns
+ */
+async function fetchSentinelHubData({
+  url,
+  bearer,
+  bbox,
+  from,
+  to,
+  timeout = 20000,
+  exampleLink,
+}) {
+  if (!exampleLink) {
+    console.error(
+      "[eodash] Error (sentinelhub): example link not found in indicator",
+    );
+    return;
+  }
+  if (!bbox) {
+    console.error("[eodash] Error (sentinelhub): bbox not found");
+    return;
+  }
+  if (!from || !to || new Date(from) > new Date(to)) {
+    console.error(
+      "[eodash] Error (sentinelhub): time range is faulty or not found",
+      from,
+      to,
+    );
+    return;
+  }
+  const evalscript = await axios
+    .get(exampleLink.href, { responseType: "text" })
+    .then((resp) => resp.data);
+
+  if (!evalscript || evalscript.error) {
+    console.error(
+      "[eodash] Error (sentinelhub): evalscript not found",
+      evalscript,
+    );
+    return;
+  }
+  const body = {
+    input: {
+      bounds: {
+        bbox,
+      },
+
+      data: [
+        {
+          dataFilter: {},
+          type: exampleLink.dataId,
+        },
+      ],
+    },
+    aggregation: {
+      evalscript,
+      timeRange: {
+        from,
+        to,
+      },
+      aggregationInterval: {
+        of: "P1D",
+      },
+      width: 100,
+      height: 100,
+    },
+    calculations: {
+      default: {},
+    },
+  };
+  const config = {
+    headers: {
+      Authorization: `Bearer ${bearer}`,
+      "Content-Type": "application/json",
+    },
+    params: {
+      credentials: "same-origin",
+    },
+    timeout,
+  };
+
+  return await axios
+    .post(url, body, config)
+    .then((resp) => {
+      const fetched = resp.data.data;
+      //@ts-expect-error TODO
+      fetched.forEach((dataItem) => {
+        dataItem.outputs.data.date = from;
+      });
+      return fetched;
+    })
+    .catch((err) => {
+      if (err.response?.status === 401) {
+        console.error(
+          "[eodash] Error (sentinelhub): bearer token expired, please try again",
+        );
+        sessionStorage.removeItem("sentinelhub_token");
+        sessionStorage.removeItem("sentinelhub_token_time");
+        return;
+      }
+
+      console.error(
+        "[eodash] Error (sentinelhub): error while fetching data from sentinel hub",
+        err.response?.data,
+      );
+
+      return [];
+    });
+}
+/**
+ * @param {import("stac-ts").StacCollection} selectedStac
+ * @param {string} absoluteUrl
+ */
+async function getEvalScriptLink(selectedStac, absoluteUrl) {
+  const evalScriptLink = selectedStac.links.find(
+    (link) => link.rel === "example" && link.title === "evalscript",
+  );
+  if (evalScriptLink) {
+    return evalScriptLink;
+  }
+  // retrieve the first example link from the indicator children
+  for (const link of extractCollectionUrls(selectedStac, absoluteUrl)) {
+    const scriptLink = axios
+      .get(link)
+      .then((resp) =>
+        /** @type {import("stac-ts").StacCollection} */ (resp.data).links.find(
+          (link) => link.rel === "example" && link.title === "evalscript",
+        ),
+      );
+
+    if (scriptLink) {
+      return scriptLink;
+    }
+  }
+}

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

@@ -0,0 +1,116 @@
+import axios from "@/plugins/axios";
+import { getBboxProperty } from "../../utils";
+import { toAbsolute } from "stac-js/src/http.js";
+import { currentCompareUrl, currentUrl } from "@/store/states";
+import { getDatetimeProperty } from "@/eodashSTAC/helpers";
+
+/**
+ * @param {import("^/EodashProcess/types").CustomEnpointInput} inputs
+ */
+export async function handleVedaEndpoint({
+  links,
+  jsonformSchema,
+  jsonformValue,
+  selectedStac,
+  enableCompare = false,
+}) {
+  const vedaLink = links.find(
+    (link) => link.rel === "service" && link.endpoint === "veda",
+  );
+  if (!vedaLink) {
+    return;
+  }
+  const vedaEndpoint = vedaLink?.href;
+  const bboxProperty = getBboxProperty(jsonformSchema);
+  // this should be type geojson
+  const bboxGeoJSON = JSON.parse(jsonformValue[bboxProperty]);
+
+  const configs = await fetchVedaCOGsConfig(
+    selectedStac,
+    enableCompare ? currentCompareUrl.value : currentUrl.value,
+  );
+  // TODO: convert jsonform bbox type to geojson in the schema to avoid the conversion here
+  return await Promise.all(
+    configs.map(({ endpoint, datetime }) => {
+      return axios
+        .post(vedaEndpoint + `?url=${endpoint}`, {
+          ...{
+            type: "Feature",
+            properties: {},
+            geometry: bboxGeoJSON,
+          },
+        })
+        .then((resp) => {
+          const fetchedSats = resp.data.properties.statistics;
+          fetchedSats.date = datetime;
+          return fetchedSats;
+        })
+        .catch((resp) =>
+          console.error(
+            "[eodash] Error while fetching data from veda endpoint:",
+            resp,
+          ),
+        );
+    }),
+  );
+}
+
+/**
+ * Fetches the COGs endpoints from the STAC collections
+ * @param {import("stac-ts").StacCollection} selectedStac
+ * @param {string} absoluteUrl
+ */
+async function fetchVedaCOGsConfig(selectedStac, absoluteUrl) {
+  // retrieve the collections from the indicator
+  const collectionLinks = selectedStac.links.filter(
+    (link) => link.rel == "child",
+  );
+  /** @type {import("stac-ts").StacCollection[]} */
+  const collections = [];
+  if (!collectionLinks.length) {
+    collections.push(selectedStac);
+  } else {
+    collections.push(
+      ...(await Promise.all(
+        collectionLinks.map((link) =>
+          axios
+            .get(toAbsolute(link.href, absoluteUrl))
+            .then((resp) => resp.data),
+        ),
+      )),
+    );
+  }
+  /** @type {{endpoint:string; datetime:string}[]} */
+  const configs = [];
+  for (const collection of collections) {
+    const datetimeProperty = /** @type string **/ (
+      getDatetimeProperty(collection.links)
+    );
+    let itemLinks = collection.links.filter((link) => link.rel == "item");
+    configs.push(
+      ...itemLinks.map((link) => ({
+        endpoint: /** @type {string} */ (link["cog_href"]),
+        datetime: /** @type string **/ (link[datetimeProperty]),
+      })),
+    );
+  }
+
+  // Sort by date ascending
+  configs.sort(
+    (a, b) => new Date(a.datetime).getTime() - new Date(b.datetime).getTime(),
+  );
+
+  const maxConfigs = 50;
+  if (configs.length <= maxConfigs) {
+    return configs;
+  }
+  // we need to sample if the number of configs are more than 50
+  const totalSize = configs.length;
+  const sampledConfigs = [];
+  for (let i = 0; i < maxConfigs; i++) {
+    // Calculate the index to pick, ensuring distribution and inclusion of first/last
+    const index = Math.floor((i * (totalSize - 1)) / (maxConfigs - 1));
+    sampledConfigs.push(configs[index]);
+  }
+  return sampledConfigs;
+}

package/widgets/EodashProcess/methods/custom-endpoints/layers/eoxhub-workspaces-endpoint.js

@@ -0,0 +1,94 @@
+import axios from "@/plugins/axios";
+import { compareIndicator, indicator } from "@/store/states";
+import mustache from "mustache";
+import {
+  pollProcessStatus,
+  updateJobsStatus,
+} from "^/EodashProcess/methods/async";
+import {
+  creatAsyncProcessLayerDefinitions,
+  extractAsyncResults,
+} from "../../utils";
+
+/**
+ *
+ * @param {import("^/EodashProcess/types").CustomEnpointInput} param0
+ */
+
+export async function handleEOxHubEndpoint({
+  links,
+  jsonformValue,
+  isPolling,
+  selectedStac,
+  jobs,
+  enableCompare = false,
+}) {
+  if (!isPolling) {
+    return;
+  }
+  const eoxhubLinks = links.filter(
+    (link) => link.rel === "service" && link.endpoint === "eoxhub_workspaces",
+  );
+  const layers = [];
+  for (const link of eoxhubLinks) {
+    // TODO: prove of concept, needs to be reworked for sure
+    // Special handling for eoxhub workspace process endpoints
+    const postBody = await axios
+      .get(/** @type {string} */ (link["body"]), { responseType: "text" })
+      .then((resp) => resp.data);
+    const jsonData = JSON.parse(
+      mustache.render(postBody, { ...(jsonformValue ?? {}) }),
+    );
+    const currentIndicator = enableCompare ? compareIndicator : indicator;
+    try {
+      const responseProcess = await axios.post(link.href, jsonData, {
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+
+      // We save the process status url into localstorage assigning it to the indicator id
+      const currentJobs = JSON.parse(
+        localStorage.getItem(currentIndicator.value) || "[]",
+      );
+      currentJobs.push(responseProcess.headers.location);
+      localStorage.setItem(currentIndicator.value, JSON.stringify(currentJobs));
+
+      const processResults = await pollProcessStatus({
+        jobs,
+        processUrl: responseProcess.headers.location,
+        isPolling,
+        enableCompare,
+      })
+        .then((resultItem) => {
+          return extractAsyncResults(resultItem);
+        })
+        .catch((error) => {
+          if (error instanceof Error) {
+            console.error("Polling failed:", error.message);
+          } else {
+            console.error("Unknown error occurred during polling:", error);
+          }
+          return [];
+        });
+      await updateJobsStatus(jobs, currentIndicator.value);
+
+      layers.push(
+        ...(await creatAsyncProcessLayerDefinitions(
+          processResults,
+          link,
+          selectedStac,
+        )),
+      );
+    } catch (error) {
+      await updateJobsStatus(jobs, currentIndicator.value);
+      if (error instanceof Error) {
+        console.error("Error sending POST request:", error.message);
+      } else {
+        console.error("Unknown error occurred:", error);
+      }
+    }
+  }
+
+  return layers;
+}

package/widgets/EodashProcess/methods/custom-endpoints/layers/index.js

@@ -0,0 +1,33 @@
+import { handleEOxHubEndpoint } from "./eoxhub-workspaces-endpoint";
+
+export const handleLayersCustomEndpoints = createCustomLayersEndpointsHandler([
+  handleEOxHubEndpoint,
+]);
+
+/**
+ * @param {((input:import("^/EodashProcess/types").CustomEnpointInput)=> Promise<Record<string,any>[] | undefined | null>)[]} callbacks
+ * @returns {(input: import("^/EodashProcess/types").CustomEnpointInput) => Promise<import("@eox/map/.").EoxLayer[]>}
+ */
+function createCustomLayersEndpointsHandler(callbacks) {
+  return async (inputs) => {
+    // this allows multiple endpoints links to exist
+    // and return multiple layers
+    return await Promise.all(
+      callbacks.map((callback) => callback(inputs)),
+    ).then((asyncProcessesLayers) => {
+      const layers = [];
+      for (const processLayers of asyncProcessesLayers) {
+        layers.push(...(processLayers?.filter(isValidEoxLayer) ?? []));
+      }
+      return layers;
+    });
+  };
+}
+
+/**
+ * @param {any} layer
+ * @returns {layer is import("@eox/map/.").EoxLayer}
+ */
+function isValidEoxLayer(layer) {
+  return !!layer && !!layer.type && (!!layer.source || !!layer.layers);
+}