@eodash/eodash 5.0.0-rc.2.4 → 5.0.0-rc.3

package/widgets/EodashProcess/methods/handling.js

@@ -0,0 +1,254 @@
+import log from "loglevel";
+import { extractGeometries, getBboxProperty } from "./utils";
+import { datetime, mapEl } from "@/store/states";
+import axios from "@/plugins/axios";
+import { getLayers } from "@/store/actions";
+import {
+  getChartValues,
+  processGeoTiff,
+  processImage,
+  processVector,
+} from "./outputs";
+
+/**
+ * Fetch and set the jsonform schema to initialize the process
+ *
+ * @export
+ * @async
+ * @param {Object} params
+ * @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"] | 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
+ */
+export async function initProcess({
+  selectedStac,
+  jsonformEl,
+  jsonformSchema,
+  chartSpec,
+  isProcessed,
+  processResults,
+  loading,
+  isPolling,
+}) {
+  if (!selectedStac.value) {
+    return;
+  }
+  resetProcess({
+    loading,
+    isProcessed,
+    chartSpec,
+    jsonformSchema,
+    isPolling,
+    processResults,
+  });
+  if (selectedStac.value["eodash:jsonform"]) {
+    jsonformEl.value?.editor.destroy();
+    // wait for the layers to be rendered
+    jsonformSchema.value = await axios
+      //@ts-expect-error eodash extention
+      .get(selectedStac.value["eodash:jsonform"])
+      .then((resp) => resp.data);
+    // remove borders from jsonform
+  } else {
+    if (!jsonformSchema.value) {
+      return;
+    }
+    jsonformSchema.value = null;
+  }
+}
+
+/**
+ *
+ * @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
+ */
+export async function handleProcesses({
+  loading,
+  selectedStac,
+  jsonformEl,
+  jsonformSchema,
+  chartSpec,
+  chartData,
+  isPolling,
+  processResults,
+}) {
+  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"]
+    );
+
+    [chartSpec.value, chartData.value] = await getChartValues(
+      serviceLinks,
+      { ...(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,
+      //@ts-expect-error TODO
+      selectedStac.value?.["eodash:mapProjection"]?.["name"] ?? null,
+    );
+
+    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:",
+      geotiffLayer,
+      vectorLayers,
+      imageLayers,
+    );
+
+    if (geotiffLayer || vectorLayers?.length || imageLayers?.length) {
+      const layers = [
+        ...(geotiffLayer ? [geotiffLayer] : []),
+        ...(vectorLayers ?? []),
+        ...(imageLayers ?? []),
+      ];
+      let currentLayers = [...getLayers()];
+      let analysisGroup = currentLayers.find((l) =>
+        l.properties.id.includes("AnalysisGroup"),
+      );
+      analysisGroup?.layers.push(...layers);
+
+      if (mapEl.value) {
+        mapEl.value.layers = [...currentLayers];
+      }
+    }
+    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
+ */
+export 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.
+ */
+export const onChartClick = (evt) => {
+  const chartSpec = evt.target?.spec;
+  if (!chartSpec) {
+    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;
+    const temporalValue = new Date(vegaItem.datum.datum[temporalKey]);
+    datetime.value = temporalValue.toISOString();
+  } catch (error) {
+    console.warn(
+      "[eodash] Error while setting datetime from eox-chart:",
+      error,
+    );
+  }
+};

package/widgets/EodashProcess/methods/outputs.js

@@ -0,0 +1,216 @@
+import mustache from "mustache";
+import { extractLayerConfig } from "@/eodashSTAC/helpers";
+import axios from "@/plugins/axios";
+import { createLayerDefinition } from "./utils";
+import { pollProcessStatus } from "./async";
+import { indicator } from "@/store/states";
+
+/**
+ * @param {import("stac-ts").StacLink[] | undefined} links
+ * @param {Record<string,any>|undefined} jsonformValue
+ * @param {number[]} origBbox
+ */
+export function processImage(links, jsonformValue, origBbox) {
+  if (!links) return;
+  const imageLinks = links.filter(
+    (link) => link.rel === "service" && link.type === "image/png",
+  );
+  const layers = [];
+  for (const link of imageLinks) {
+    layers.push({
+      type: "Image",
+      properties: {
+        id: link.id,
+        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
+ */
+export async function processVector(links, jsonformValue, layerId) {
+  if (!links) return;
+  /** @type {Record<string,any>[]} */
+  const layers = [];
+  const vectorLinks = links.filter(
+    (link) => link.rel === "service" && link.type === "application/geo+json",
+  );
+  if (vectorLinks.length === 0) 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(flatStyleJSON);
+      layerConfig = extracted.layerConfig;
+      style = extracted.style;
+    }
+
+    layers.push({
+      type: "Vector",
+      source: {
+        type: "Vector",
+        url: mustache.render(link.href, {
+          ...(jsonformValue ?? {}),
+        }),
+        format: "GeoJSON",
+      },
+      properties: {
+        id: layerId + "_vector_process",
+        title: "Results " + layerId,
+        ...(layerConfig && { ...layerConfig, ...(style && { style: style }) }),
+      },
+    });
+  }
+  return layers;
+}
+
+/**
+ * @param {import("stac-ts").StacLink[] | undefined} links
+ * @param {Record<string,any> | undefined} jsonformValue
+ * @param {string} specUrl
+ * @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];
+  /** @type {import("vega").Spec} */
+  const spec = await axios.get(specUrl).then((resp) => {
+    return resp.data;
+  });
+  // //@ts-expect-error NamedData
+  // const dataName = spec?.data?.name;
+  const dataLinks = links.filter(
+    (link) => link.rel === "service", // && dataName && link.id === dataName,
+  );
+
+  /** @type {Record<string,any>}  */
+  const dataValues = {};
+  for (const link of dataLinks ?? []) {
+    if (link.type && ["application/json", "text/csv"].includes(link.type)) {
+      const dataUrl = mustache.render(link.href, {
+        ...(jsonformValue ?? {}),
+        ...(link["eox:flatstyle"] ?? {}),
+      });
+
+      // Wait for data to be retrieved
+      const data = await axios.get(dataUrl).then((resp) => {
+        return resp.data;
+      });
+      // @ts-expect-error we assume data to exist in spec
+      spec.data.values = data;
+      continue;
+    }
+
+    dataValues[/** @type {string} */ (link.id)] = await axios
+      .get(
+        mustache.render(link.href, {
+          ...(jsonformValue ?? {}),
+          ...(link["eox:flatstyle"] ?? {}),
+        }),
+      )
+      .then((resp) => resp.data);
+  }
+
+  return [spec, dataValues];
+}
+
+/**
+ * @param {import("stac-ts").StacLink[] | undefined} links
+ * @param {Record<string,any> | undefined} jsonformValue
+ * @param {import("vue").Ref<boolean>} isPolling
+ * @param {string} layerId
+ * @param {string} projection
+ */
+export async function processGeoTiff(
+  links,
+  jsonformValue,
+  layerId,
+  isPolling,
+  projection,
+) {
+  if (!links) return;
+  const geotiffLinks = links.filter(
+    (link) => link.rel === "service" && link.type === "image/tiff",
+  );
+  let urls = [];
+  let processId = "";
+  for (const link of geotiffLinks ?? []) {
+    if (link.endpoint === "eoxhub_workspaces") {
+      // 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 ?? {}) }),
+      );
+      try {
+        const responseProcess = await axios.post(link.href, jsonData, {
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+        console.log(responseProcess.headers.location);
+        // We save the process status url into localstorage assigning it to the indicator id
+        const currentJobs = JSON.parse(
+          localStorage.getItem(indicator.value) || "[]",
+        );
+        currentJobs.push(responseProcess.headers.location);
+        localStorage.setItem(indicator.value, JSON.stringify(currentJobs));
+        await pollProcessStatus({
+          processUrl: responseProcess.headers.location,
+          isPolling,
+        })
+          .then((resultItem) => {
+            // @ts-expect-error we have currently no definition of what is allowed as response
+            const resultUrls = resultItem?.urls;
+            if (resultUrls?.length < 1) {
+              return;
+            }
+            //@ts-expect-error todo
+            processId = resultItem?.id;
+            urls = resultUrls;
+          })
+          .catch((error) => {
+            if (error instanceof Error) {
+              console.error("Polling failed:", error.message);
+            } else {
+              console.error("Unknown error occurred during polling:", error);
+            }
+          });
+      } catch (error) {
+        if (error instanceof Error) {
+          console.error("Error sending POST request:", error.message);
+        } else {
+          console.error("Unknown error occurred:", error);
+        }
+      }
+    } else {
+      urls.push(mustache.render(link.href, { ...(jsonformValue ?? {}) }));
+    }
+  }
+
+  return createLayerDefinition(links[0], layerId, urls, projection, processId);
+}

package/widgets/EodashProcess/methods/utils.js

@@ -0,0 +1,138 @@
+import { extractLayerConfig } from "@/eodashSTAC/helpers";
+import axios from "@/plugins/axios";
+import { isMulti } from "@eox/jsonform/src/custom-inputs/spatial/utils";
+
+/**
+ * @param {Record<string,any> |null} [jsonformSchema]
+ **/
+export function getBboxProperty(jsonformSchema) {
+  return /** @type {string} */ (
+    Object.keys(jsonformSchema?.properties ?? {}).find(
+      (key) => jsonformSchema?.properties[key].format === "bounding-box",
+    )
+  );
+}
+
+/**
+ * Extracts the keys of type "geojson" from the jsonform schema
+ * @param {Record<string,any> |null} [jsonformSchema]
+ **/
+export function getGeoJsonProperties(jsonformSchema) {
+  return /** @type {string[]} */ (
+    Object.keys(jsonformSchema?.properties ?? {}).filter(
+      (key) => jsonformSchema?.properties[key].type === "geojson",
+    )
+  );
+}
+
+/**
+ * Converts jsonform geojson values to stringified geometries
+ * @param {Record<string,any> |null} [jsonformSchema]
+ * @param {Record<string,any>} jsonformValue
+ **/
+export function extractGeometries(jsonformValue, jsonformSchema) {
+  const geojsonKeys = getGeoJsonProperties(jsonformSchema);
+
+  for (const key of geojsonKeys) {
+    if (!jsonformValue[key]) {
+      continue;
+    }
+
+    if (isMulti(jsonformSchema?.properties[key])) {
+      // jsonformValue[key] is a feature collection
+      jsonformValue[key] =
+        /** @type {import("ol/format/GeoJSON").GeoJSONFeatureCollection} */ (
+          jsonformValue[key]
+        ).features.map((feature) => JSON.stringify(feature.geometry));
+    } else {
+      // jsonformValue[key] is a single feature
+      jsonformValue[key] = JSON.stringify(jsonformValue[key].geometry);
+    }
+  }
+}
+
+/**
+ *
+ * @param {*} link
+ * @param {*} layerId
+ * @param {string[]} urls
+ * @param {*} projection
+ * @param {*} processId
+ * @returns
+ */
+export async function createLayerDefinition(
+  link,
+  layerId,
+  urls,
+  projection,
+  processId,
+) {
+  let flatStyleJSON = null;
+  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;
+  }
+  // We want to make sure the urls are alphabetically sorted
+  urls = urls.sort();
+  const layerdef =
+    urls.length > 0
+      ? {
+          type: "WebGLTile",
+          source: {
+            type: "GeoTIFF",
+            normalize: !style,
+            sources: urls.map((url) => ({ url })),
+          },
+          properties: {
+            id: layerId + "_geotiff_process" + processId,
+            title: "Results " + layerId,
+            ...(layerConfig && { layerConfig: layerConfig }),
+            layerControlToolsExpand: true,
+          },
+          ...(style && { style: style }),
+        }
+      : undefined;
+
+  // We want to see if the currently selected indicator uses a
+  // specific map projection if it does we want to apply it
+  if (projection && layerdef) {
+    //@ts-expect-error TODO
+    layerdef.source.projection = projection;
+  }
+  return layerdef;
+}
+/**
+ * @param {string} fileName
+ * @param {string|Record<string,any>} content
+ * @returns
+ */
+export const download = (fileName, content) => {
+  if (!content) {
+    return;
+  }
+  let url = /** @type string */ (content);
+  if (typeof content === "object") {
+    content = JSON.stringify(content);
+    const blob = new Blob([content], { type: "text" });
+    url = URL.createObjectURL(blob);
+  }
+  const link = document.createElement("a");
+  if (confirm(`Would you like to download ${fileName}?`)) {
+    link.href = url;
+    link.download = fileName;
+    link.click();
+  }
+  URL.revokeObjectURL(url);
+  link.remove();
+};

package/widgets/EodashStacInfo.vue

@@ -55,26 +55,32 @@ main {padding-bottom: 10px;}
 .footer-container small {font-size:10px;line-height:1;}`,
   },
   header: {
+    /** @type {import("vue").PropType<string[]>}  */
     type: Array,
     default: () => ["title"],
   },
   tags: {
+    /** @type {import("vue").PropType<string[]>}  */
     type: Array,
     default: () => ["themes"],
   },
   subheader: {
+    /** @type {import("vue").PropType<string[]>}  */
     type: Array,
     default: () => [],
   },
   body: {
+    /** @type {import("vue").PropType<string[]>}  */
     type: Array,
     default: () => ["satellite", "sensor", "agency", "extent"],
   },
   featured: {
+    /** @type {import("vue").PropType<string[]>}  */
     type: Array,
     default: () => ["description", "providers", "assets", "links"],
   },
   footer: {
+    /** @type {import("vue").PropType<string[]>}  */
     type: Array,
     default: () => ["sci:citation"],
   },

package/widgets/EodashTools.vue

@@ -74,6 +74,7 @@ const props = defineProps({
     default: "Select indicator",
   },
   itemFilterConfig: {
+    /** @type {import("vue").PropType<InstanceType<import("./EodashItemFilter.vue").default>["$props"]>} */
     type: Object,
     default: () => {},
   },