@eodash/eodash 5.0.0 → 5.2.0

package/dist/client/handling-BS24aG1q.js

@@ -0,0 +1,1227 @@
+import log from 'loglevel';
+import { s as separateEndpointLinks, c as createTiffLayerDefinition, p as pollProcessStatus, e as extractAsyncResults, u as updateJobsStatus, a as creatAsyncProcessLayerDefinitions, g as getBboxProperty, b as generateTimePairs, f as updateJsonformSchemaTarget, h as extractGeometries, i as applyProcessLayersToMap } from './async-B7jIrM53.js';
+import { f as axios, h as extractLayerConfig, D as compareIndicator, C as indicator, t as extractCollectionUrls, w as currentCompareUrl, x as currentUrl, u as generateLinksFromItems, k as getDatetimeProperty, y as datetime, E as comparePoi, z as poi } from './helpers-wXK7Ywio.js';
+import mustache from 'mustache';
+import { O as isFirstLoad, E as useSTAcStore, R as readParquetItems, S as useGetSubCodeId } from './asWebComponent-ZyEzWOOf.js';
+import { toAbsolute } from 'stac-js/src/http.js';
+
+////// --- CHARTS --- //////
+/**
+ * @param {object} options
+ * @param {import("stac-ts").StacLink[] | undefined} options.links
+ * @param {Record<string,any> | undefined} options.jsonformValue
+ * @param {string} options.specUrl
+ * @param {(input:import("^/EodashProcess/types").CustomEnpointInput)=>Promise<Record<string,any>[] | undefined | null>} [options.customEndpointsHandler]
+ * @param {import("vue").Ref<boolean>} options.isPolling
+ * @param {import("stac-ts").StacCollection} options.selectedStac
+ * @param {Record<string,any>} options.jsonformSchema
+ * @param {import("vue").Ref<import("../types").AsyncJob[]>} options.jobs
+ * @param {boolean} [options.enableCompare=false] - Whether to enable compare mode
+ * @returns {Promise<[import("@eox/chart").EOxChart["spec"] | null,Record<string,any>|null]>}
+ **/
+async function processCharts({
+  links,
+  jsonformValue,
+  specUrl,
+  customEndpointsHandler,
+  jsonformSchema,
+  selectedStac,
+  isPolling,
+  jobs,
+  enableCompare = false,
+}) {
+  if (!specUrl || !links) return [null, null];
+  /** @type {import("vega-lite").TopLevelSpec} **/
+  const spec = await axios.get(specUrl).then((resp) => {
+    return resp.data;
+  });
+
+  /** @type {Record<string,any>} */
+  const dataValues = {};
+
+  const [standardLinks, endpointLinks] = separateEndpointLinks(
+    links,
+    "service",
+    undefined,
+  );
+
+  const data =
+    customEndpointsHandler &&
+    jsonformValue &&
+    (await customEndpointsHandler({
+      jsonformSchema,
+      jsonformValue,
+      links: endpointLinks,
+      selectedStac,
+      isPolling,
+      jobs,
+      enableCompare,
+    }));
+
+  if (data && data.length) {
+    //@ts-expect-error we assume data to exist in spec
+    spec.data.values = data;
+    return [spec, dataValues];
+  }
+
+  const dataLinks = standardLinks.filter((link) => link.rel === "service");
+  try {
+    checkForData: for (const link of dataLinks ?? []) {
+      switch (link.type) {
+        case undefined:
+          continue;
+        case "application/json":
+          await injectVegaInlineData(spec, {
+            url: link.href,
+            jsonformValue: jsonformValue,
+            link: link,
+            flatstyleUrl: /** @type string */ (link["eox:flatstyle"]),
+            jsonformSchema,
+          });
+          break checkForData;
+        case "text/csv":
+          await injectVegaUrlData(spec, {
+            url: link.href,
+            jsonformValue: jsonformValue,
+            flatstyleUrl: /** @type string */ (link["eox:flatstyle"]),
+          });
+          break checkForData;
+      }
+    }
+  } catch (e) {
+    console.error("[eodash] Error while injecting Vega data", e);
+  }
+  return [spec, dataValues];
+}
+
+/**
+ *
+ * @param {import("vega-lite").TopLevelSpec} spec
+ * @param {object} injectables
+ * @param {string} injectables.url
+ * @param {Record<string,any>} [injectables.jsonformValue]
+ * @param {import("stac-ts").StacLink} injectables.link
+ * @param {url} [injectables.flatstyleUrl]
+ * @param {import("json-schema").JSONSchema7} [injectables.jsonformSchema]
+ */
+async function injectVegaInlineData(
+  spec,
+  { url, jsonformValue, link, flatstyleUrl, jsonformSchema },
+) {
+  if (!spec.data) {
+    return;
+  }
+  if (link.method == "GET") {
+    // we see if any of the multiQuery values match an array in the jsonformValue
+    // and if so, we can do multiple requests and merge all data together.
+    //@ts-expect-error type jsonform Schema
+    const multiQuery = jsonformSchema?.options?.multiQuery;
+    const matches = Object.keys(jsonformValue ?? {}).filter((key) => {
+      return Array.isArray(multiQuery)
+        ? multiQuery.includes(key)
+        : multiQuery === key;
+    });
+    if (matches.length > 0 && jsonformValue) {
+      const dataValues = [];
+      for (const match of matches) {
+        if (Array.isArray(jsonformValue[match])) {
+          for (const value of jsonformValue[match]) {
+            const dataUrl = await renderDataUrl(
+              url,
+              { ...jsonformValue, [match]: value },
+              flatstyleUrl,
+            );
+            dataValues.push(await axios.get(dataUrl).then((resp) => resp.data));
+          }
+        } else {
+          const dataUrl = await renderDataUrl(url, jsonformValue, flatstyleUrl);
+          dataValues.push(await axios.get(dataUrl).then((resp) => resp.data));
+        }
+      }
+      /** @type {import("vega-lite/build/src/data").InlineData} */
+      (spec.data).values = dataValues.flat();
+      return spec;
+    }
+    // if no array matches, we can just do a single request
+    const dataUrl = await renderDataUrl(url, jsonformValue, flatstyleUrl);
+    /** @type {import("vega-lite/build/src/data").InlineData} */
+    (spec.data).values = await axios.get(dataUrl).then((resp) => {
+      return resp.data;
+    });
+  } else if (link.method == "POST") {
+    // get body template to be used in POST request, check first if available
+    if (!link.body) {
+      console.error(
+        "[eodash] Inline data POST request requires a body template",
+      );
+      return spec;
+    }
+    /** @type {string} */
+    const bodyTemplate = await axios
+      // @ts-expect-error we assume link.body to be a string, not defined in stac-ts
+      .get(link.body, { responseType: "text" })
+      .then((resp) => {
+        return resp.data;
+      });
+    const body = JSON.parse(
+      mustache.render(bodyTemplate, {
+        ...(jsonformValue ?? {}),
+      }),
+    );
+    /** @type {import("vega-lite/build/src/data").InlineData} */
+    (spec.data).values = await axios.post(url, body).then((resp) => {
+      return resp.data;
+    });
+  }
+  return spec;
+}
+
+/**
+ * @param {import("vega-lite").TopLevelSpec} spec
+ * @param {object} injectables
+ * @param {string} injectables.url
+ * @param {Record<string,any>} [injectables.jsonformValue]
+ * @param {url} [injectables.flatstyleUrl]
+ */
+async function injectVegaUrlData(spec, { url, jsonformValue, flatstyleUrl }) {
+  if (!spec.data) {
+    return;
+  }
+  const dataUrl = await renderDataUrl(url, jsonformValue, flatstyleUrl);
+  /** @type {import("vega").UrlData} */
+  (spec.data).url = dataUrl;
+  return spec;
+}
+/**
+ *
+ * @param {string} url
+ * @param {Record<string,any>} [jsonformValue]
+ * @param {string} [flatstyleUrl]
+ */
+async function renderDataUrl(url, jsonformValue, flatstyleUrl) {
+  let flatStyles = {};
+  if (flatstyleUrl) {
+    flatStyles = await axios.get(flatstyleUrl).then((resp) => resp.data);
+  }
+
+  return mustache.render(url, {
+    ...(jsonformValue ?? {}),
+    ...flatStyles,
+  });
+}
+
+/////// MAP LAYERS ///////
+
+/**
+ * @param {object} options
+ * @param {import("stac-ts").StacLink[] | undefined} options.links
+ * @param {Record<string,any> | undefined} options.jsonformValue
+ * @param {string} options.layerId
+ * @param {string} [options.projection]
+ */
+async function processGeoTiff({
+  links,
+  jsonformValue,
+  layerId,
+  projection,
+}) {
+  if (!links) return;
+
+  const [geotiffLinks, _] = separateEndpointLinks(
+    links,
+    "service",
+    "image/tiff",
+  );
+
+  if (!geotiffLinks.length) {
+    return;
+  }
+  let urls = [];
+  let processId = "";
+  for (const link of geotiffLinks ?? []) {
+    urls.push(mustache.render(link.href, { ...(jsonformValue ?? {}) }));
+  }
+  const definitions = await Promise.all(
+    geotiffLinks.map((geotiffLink) =>
+      createTiffLayerDefinition(
+        geotiffLink,
+        layerId,
+        urls,
+        projection,
+        processId,
+      ),
+    ),
+  ).then((defs) => defs.filter((defs) => !!defs));
+  return definitions;
+}
+
+/**
+ * @param {import("stac-ts").StacLink[] | undefined} links
+ * @param {Record<string,any>|undefined} jsonformValue
+ * @param {number[]} origBbox
+ */
+function processImage(links, jsonformValue, origBbox) {
+  if (!links) return;
+  const imageLinks = links.filter(
+    (link) => link.rel === "service" && link.type === "image/png",
+  );
+  /** @type {import("@eox/map/src/layers").EOxLayerType<"Image","ImageStatic">[]} */
+  const layers = [];
+  for (const link of imageLinks) {
+    layers.push({
+      type: "Image",
+      properties: {
+        id: link.id + "_process",
+        title: "Results " + link.id,
+      },
+      source: {
+        type: "ImageStatic",
+        imageExtent: origBbox,
+        url: mustache.render(link.href, {
+          ...(jsonformValue ?? {}),
+        }),
+      },
+    });
+  }
+  return layers;
+}
+
+/**
+ * @param {import("stac-ts").StacLink[] | undefined} links
+ * @param {Record<string,any> | undefined} jsonformValue
+ * @param {string} layerId
+ */
+async function processVector(links, jsonformValue, layerId) {
+  if (!links) return;
+  /** @type {import("@eox/map/src/layers").EOxLayerType<"Vector",any>[]} */
+  const layers = [];
+  const vectorLinks = links.filter(
+    (link) => link.rel === "service" && link.type === "application/geo+json",
+  );
+  if (!vectorLinks.length) return layers;
+
+  let flatStyleJSON = null;
+
+  for (const link of vectorLinks) {
+    if ("eox:flatstyle" in (link ?? {})) {
+      flatStyleJSON = await axios
+        .get(/** @type {string} */ (link["eox:flatstyle"]))
+        .then((resp) => resp.data);
+    }
+
+    /** @type {Record<string,any>|undefined} */
+    let layerConfig;
+    /** @type {Record<string,any>|undefined} */
+    let style;
+    if (flatStyleJSON) {
+      const extracted = extractLayerConfig(layerId ?? "", flatStyleJSON);
+      layerConfig = extracted.layerConfig;
+      style = extracted.style;
+    }
+    /** @type {import("@eox/map/src/layers").EOxLayerType<"Vector","Vector"|"FlatGeoBuf">} */
+    const layer = {
+      type: "Vector",
+      source: {
+        type: "Vector",
+        url: mustache.render(link.href, {
+          ...(jsonformValue ?? {}),
+        }),
+        format: "GeoJSON",
+      },
+      properties: {
+        id: link.id + "_process",
+        title: "Results " + layerId,
+        ...(layerConfig && { ...layerConfig }),
+      },
+      ...(style && { style }),
+    };
+    layers.push(layer);
+  }
+  return layers;
+}
+
+/**
+ * Unified wrapper for processing map layer types (Vector, Image, GeoTiff)
+ * @param {object} options
+ * @param {import("stac-ts").StacLink[] | undefined} options.links
+ * @param {Record<string,any> | undefined} options.jsonformValue
+ * @param {string} options.layerId
+ * @param {string} [options.projection] - Required for GeoTiff layers
+ * @param {number[]} options.origBbox - Required for Image layers
+ * @param {import("vue").Ref<boolean>} options.isPolling
+ * @param {import("stac-ts").StacCollection} options.selectedStac
+ * @param {import("json-schema").JSONSchema7} options.jsonformSchema
+ * @param {import("vue").Ref<import("../types").AsyncJob[]>} options.jobs
+ * @param {(input:import("../types").CustomEnpointInput)=>Promise<import("@eox/map").EoxLayer[]>} options.customLayersHandler
+ * @param {boolean} [options.enableCompare=false] - Whether to enable compare mode
+ */
+async function processLayers({
+  links,
+  jsonformValue,
+  layerId,
+  projection,
+  origBbox,
+  isPolling,
+  selectedStac,
+  jsonformSchema,
+  jobs,
+  customLayersHandler,
+  enableCompare = false,
+}) {
+  if (!links) return [];
+  /** @type {import("@eox/map").EoxLayer[]} */
+  const layers = [];
+
+  const [standardLinks, endpointLinks] = separateEndpointLinks(
+    links,
+    "service",
+    undefined,
+  );
+  // Handle custom endpoints first if handler is provided
+  if (customLayersHandler && jsonformValue && selectedStac && jsonformSchema) {
+    if (endpointLinks.length > 0) {
+      const customLayers = await customLayersHandler({
+        jsonformValue,
+        links: endpointLinks,
+        selectedStac,
+        isPolling,
+        jsonformSchema,
+        jobs,
+        enableCompare,
+      });
+
+      if (customLayers.length) {
+        layers.push(...customLayers);
+      }
+    }
+  }
+
+  const vectorlayers = await processVector(
+    standardLinks,
+    jsonformValue,
+    layerId,
+  );
+
+  const imagelayers = processImage(standardLinks, jsonformValue, origBbox);
+
+  const geotiffLayers = await processGeoTiff({
+    links: standardLinks,
+    jsonformValue,
+    layerId,
+    projection,
+  });
+
+  layers.push(
+    ...[
+      ...(vectorlayers ?? []),
+      ...(imagelayers ?? []),
+      ...(geotiffLayers ?? []),
+    ],
+  );
+
+  return layers;
+}
+
+////// STAC PROCESSING /////
+/**
+ * This function loads a STAC collection as a processing output.
+ * Currently, it only supports POI STAC collections
+ *
+ * @param {import("stac-ts").StacLink[]} links
+ * @param {Record<string,any>} jsonformValue
+ */
+async function processSTAC(links, jsonformValue, enableCompare = false) {
+  const stacLink = links.find(
+    (link) =>
+      link.rel === "service" &&
+      link.type == "application/json; profile=collection" &&
+      link.endpoint === "STAC",
+  );
+
+  if (!stacLink) return;
+  let poiUrl = mustache.render(stacLink.href, {
+    ...(jsonformValue ?? {}),
+  });
+  if (isFirstLoad.value) {
+    // prevent the map from jumping to the initial position
+    isFirstLoad.value = false;
+  }
+  const store = useSTAcStore();
+  const loadPOI = enableCompare
+    ? store.loadSelectedCompareSTAC
+    : store.loadSelectedSTAC;
+  await loadPOI(poiUrl, true);
+}
+
+/**
+ *
+ * @param {import("^/EodashProcess/types").CustomEnpointInput} param0
+ */
+
+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;
+}
+
+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);
+}
+
+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 = import.meta.env.EODASH_SENTINELHUB_CLIENT_ID;
+  const clientSecret = import.meta.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;
+  }
+  const timePairs = generateTimePairs(
+    selectedStac.extent.temporal.interval[0],
+    [jsonformValue["start_date"], jsonformValue["end_date"]],
+    jsonformValue["distribution"]
+  );
+  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((data2) => data2.outputs.data));
+}
+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 * 1e3;
+  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;
+}
+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);
+}
+async function fetchSentinelHubData({
+  url,
+  bearer,
+  bbox,
+  from,
+  to,
+  timeout = 2e4,
+  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;
+    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 [];
+  });
+}
+async function getEvalScriptLink(selectedStac, absoluteUrl) {
+  const evalScriptLink = selectedStac.links.find(
+    (link) => link.rel === "example" && link.title === "evalscript"
+  );
+  if (evalScriptLink) {
+    return evalScriptLink;
+  }
+  for (const link of extractCollectionUrls(selectedStac, absoluteUrl)) {
+    const scriptLink = axios.get(link).then(
+      (resp) => (
+        /** @type {import("stac-ts").StacCollection} */
+        resp.data.links.find(
+          (link2) => link2.rel === "example" && link2.title === "evalscript"
+        )
+      )
+    );
+    if (scriptLink) {
+      return scriptLink;
+    }
+  }
+}
+
+/**
+ * @param {import("^/EodashProcess/types").CustomEnpointInput} inputs
+ */
+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)
+            .then(async (collection) => {
+              // items in geoparquet handling specially to get item links
+              const parquetAsset = Object.values(collection.assets ?? {}).find(
+                (asset) =>
+                  asset.type === "application/vnd.apache.parquet" &&
+                asset.roles?.includes("collection-mirror"),
+              );
+              if (parquetAsset) {
+                const parquetAbsoluteUrl = toAbsolute(parquetAsset.href, toAbsolute(link.href, absoluteUrl));
+                await readParquetItems(parquetAbsoluteUrl).then((items) => {
+                  collection.links.push(...generateLinksFromItems(items));
+                });
+              }
+              return collection;
+            }),
+        ),
+      )),
+    );
+  }
+  /** @type {{endpoint:string; datetime:string}[]} */
+  const configs = [];
+  for (const collection of collections) {
+    const datetimeProperty = /** @type string **/ (
+      getDatetimeProperty(collection.links)
+    );
+    const 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;
+}
+
+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;
+  };
+}
+
+/**
+ * Fetch and set the jsonform schema to initialize the process
+ *
+ * @export
+ * @async
+ * @param {Object} params
+ * @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
+ * @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
+ * @param {boolean} params.enableCompare
+ */
+async function initProcess({
+  selectedStac,
+  jsonformEl,
+  jsonformSchema,
+  chartSpec,
+  isProcessed,
+  processResults,
+  loading,
+  isPolling,
+  enableCompare,
+}) {
+  const isPoiAlive = enableCompare ? !!comparePoi.value : !!poi.value;
+  let updatedJsonform = null;
+  if (selectedStac.value?.["eodash:jsonform"]) {
+    updatedJsonform = await axios
+      //@ts-expect-error eodash extention
+      .get(selectedStac.value["eodash:jsonform"])
+      .then((resp) => resp.data);
+  }
+
+  if (!updatedJsonform && isPoiAlive) {
+    jsonformSchema.value = null;
+    return;
+  }
+  resetProcess({
+    loading,
+    isProcessed,
+    chartSpec,
+    jsonformSchema,
+    isPolling,
+    processResults,
+  });
+
+  await jsonformEl.value?.editor.destroy();
+  if (updatedJsonform) {
+    if (enableCompare) {
+      updatedJsonform = updateJsonformSchemaTarget(updatedJsonform);
+    }
+    jsonformSchema.value = updatedJsonform;
+  }
+}
+
+/**
+ *
+ * @param {object} params
+ * @param {import("vue").Ref<boolean>} params.loading
+ * @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
+ * @param {import("vue").Ref<Record<string, any> | null>} params.chartData
+ * @param {import("vue").Ref<boolean>} params.isPolling
+ * @param {import("vue").Ref<any[]>} params.processResults
+ * @param {import("@eox/map").EOxMap | null} params.mapElement
+ * @param {import("vue").Ref<import("../types").AsyncJob[]>} params.jobs
+ */
+async function handleProcesses({
+  loading,
+  selectedStac,
+  jsonformEl,
+  jsonformSchema,
+  chartSpec,
+  chartData,
+  isPolling,
+  processResults,
+  mapElement,
+  jobs,
+}) {
+  if (!jsonformEl.value || !jsonformSchema.value || !selectedStac.value) {
+    return;
+  }
+
+  log.debug("Processing...");
+  loading.value = true;
+  try {
+    const serviceLinks = selectedStac.value?.links?.filter(
+      (l) => l.rel === "service",
+    );
+
+    const bboxProperty = getBboxProperty(jsonformSchema.value);
+    const jsonformValue = /** @type {Record<string,any>} */ (
+      jsonformEl.value?.value
+    );
+
+    extractGeometries(jsonformValue, jsonformSchema.value);
+
+    const origBbox = jsonformValue[bboxProperty];
+
+    const specUrl = /** @type {string} */ (
+      selectedStac.value?.["eodash:vegadefinition"]
+    );
+    const layerId = selectedStac.value?.id ?? "";
+
+    [chartSpec.value, chartData.value] = await processCharts({
+      links: serviceLinks,
+      jsonformValue: { ...(jsonformValue ?? {}) },
+      jsonformSchema: jsonformSchema.value,
+      enableCompare: mapElement?.id === "compare",
+      selectedStac: selectedStac.value,
+      specUrl,
+      isPolling,
+      jobs,
+      customEndpointsHandler: handleChartCustomEndpoints,
+    });
+
+    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";
+    }
+
+    await processSTAC(
+      serviceLinks,
+      jsonformValue,
+      mapElement?.id === "compare",
+    );
+
+    const newLayers = await processLayers({
+      isPolling,
+      links: serviceLinks,
+      jsonformValue: { ...(jsonformValue ?? {}) },
+      jsonformSchema: jsonformSchema.value,
+      selectedStac: selectedStac.value,
+      enableCompare: mapElement?.id === "compare",
+      layerId,
+      origBbox,
+      jobs,
+      customLayersHandler: handleLayersCustomEndpoints,
+      projection: /** @type {{name?:string}} */ (
+        selectedStac.value["eodash:mapProjection"]
+      )?.["name"],
+    });
+
+    // save layers results
+    if (newLayers.length) {
+      for (const layer of newLayers) {
+        if (layer.type === "WebGLTile" && layer.source?.type === "GeoTIFF") {
+          processResults.value.push(...(layer.source.sources ?? []));
+        } else if (layer.source && "url" in layer.source) {
+          processResults.value.push(layer.source.url);
+        }
+      }
+    }
+
+    applyProcessLayersToMap(mapElement, newLayers);
+    loading.value = false;
+  } catch (error) {
+    console.error("[eodash] Error while running process:", error);
+    loading.value = false;
+    throw error;
+  }
+}
+
+/**
+ * Reset the process state
+ * @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"] | 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
+ */
+function resetProcess({
+  loading,
+  isProcessed,
+  chartSpec,
+  jsonformSchema,
+  processResults,
+  isPolling,
+}) {
+  loading.value = false;
+  isProcessed.value = false;
+  isPolling.value = false;
+  chartSpec.value = null;
+  processResults.value = [];
+  jsonformSchema.value = null;
+}
+
+/**
+ * Handles the click event on a chart to extract temporal information and update the global datetime value.
+ *
+ * @param {object} evt - The click event object.
+ * @param {object} evt.target - The target of the event, expected to have a Vega-Lite specification (`spec`).
+ * @param {object} evt.target.spec - The Vega-Lite specification of the chart.
+ * @param {Record<string,{type?:string;field?:string;}>} [evt.target.spec.encoding] - The encoding specification of the chart.
+ * @param {object} evt.detail - The detail of the event, containing information about the clicked item.
+ * @param {import("vega").Item} evt.detail.item - The Vega item that was clicked.
+ */
+const onChartClick = (evt) => {
+  const chartSpec = evt.target?.spec;
+  if (
+    !chartSpec ||
+    !evt.detail?.item?.datum ||
+    !evt.detail?.item?.datum.datum
+  ) {
+    return;
+  }
+  const encodingKey = Object.keys(chartSpec.encoding ?? {}).find(
+    (key) => chartSpec.encoding?.[key].type === "temporal",
+  );
+  if (!encodingKey) {
+    return;
+  }
+  const temporalKey = chartSpec.encoding?.[encodingKey].field;
+  if (!temporalKey) {
+    return;
+  }
+
+  try {
+    const vegaItem = evt.detail.item;
+    let datestring = "";
+    // It seems sometimes we have datum inside datum and sometimes not
+    if (vegaItem.datum && vegaItem.datum.datum) {
+      // If datum is nested, we use the nested datum
+      datestring = vegaItem.datum.datum[temporalKey];
+    } else {
+      // Otherwise, we use the top-level datum
+      datestring = vegaItem.datum[temporalKey];
+    }
+    const temporalValue = new Date(datestring);
+    datetime.value = temporalValue.toISOString();
+  } catch (error) {
+    console.warn(
+      "[eodash] Error while setting datetime from eox-chart:",
+      error,
+    );
+  }
+};
+
+/**
+ * Loads the main indicator of a Point of Interest (POI)
+ */
+const loadPOiIndicator = () => {
+  if (!indicator.value) {
+    indicator.value =
+      new URLSearchParams(window.location.search).get("indicator") ?? "";
+  }
+  const stacStore = useSTAcStore();
+  const link = stacStore.stac?.find(
+    (link) => useGetSubCodeId(link) === indicator.value,
+  );
+  stacStore.loadSelectedSTAC(link?.href);
+  if (comparePoi.value) {
+    if (compareIndicator.value) {
+      const comparelink = stacStore.stac?.find(
+        (link) => useGetSubCodeId(link) === compareIndicator.value,
+      );
+      stacStore.loadSelectedCompareSTAC(comparelink?.href).catch((err) => {
+        console.error("[eodash] Error loading compare STAC:", err);
+      });
+    } else {
+      stacStore.resetSelectedCompareSTAC();
+    }
+  }
+};
+
+export { handleProcesses as h, initProcess as i, loadPOiIndicator as l, onChartClick as o };