@eodash/eodash 5.0.0 → 5.1.0

package/widgets/EodashProcess/methods/utils.js

@@ -1,5 +1,11 @@
-import { extractLayerConfig } from "@/eodashSTAC/helpers";
+import { useEmitLayersUpdate } from "@/composables";
+import {
+  extractLayerConfig,
+  mergeGeojsons,
+  replaceLayer,
+} from "@/eodashSTAC/helpers";
 import axios from "@/plugins/axios";
+import { getCompareLayers, getLayers } from "@/store/actions";
 import { isMulti } from "@eox/jsonform/src/custom-inputs/spatial/utils";
 
 /**
@@ -53,14 +59,13 @@ export function extractGeometries(jsonformValue, jsonformSchema) {
 
 /**
  *
- * @param {*} link
- * @param {*} layerId
+ * @param {import("stac-ts").StacLink} link
+ * @param {string} layerId
  * @param {string[]} urls
- * @param {*} projection
- * @param {*} processId
- * @returns
+ * @param {import("openlayers").ProjectionLike} projection
+ * @param {string} processId
  */
-export async function createLayerDefinition(
+export async function createTiffLayerDefinition(
   link,
   layerId,
   urls,
@@ -74,9 +79,7 @@ export async function createLayerDefinition(
       .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);
@@ -85,6 +88,7 @@ export async function createLayerDefinition(
   }
   // We want to make sure the urls are alphabetically sorted
   urls = urls.sort();
+  /** @type {import("@eox/map/src/layers").EOxLayerType<"WebGLTile","GeoTIFF"> | undefined} */
   const layerdef =
     urls.length > 0
       ? {
@@ -95,7 +99,7 @@ export async function createLayerDefinition(
             sources: urls.map((url) => ({ url })),
           },
           properties: {
-            id: layerId + "_geotiff_process" + processId,
+            id: link.id + "_process" + processId,
             title: "Results " + layerId,
             ...(layerConfig && { layerConfig: layerConfig }),
             layerControlToolsExpand: true,
@@ -136,3 +140,387 @@ export const download = (fileName, content) => {
   URL.revokeObjectURL(url);
   link.remove();
 };
+
+/**
+ * Generate time pairs from a temporal extent
+ * @param {import("stac-ts").TemporalExtent} stacExtent - [start, end]
+ * @param {import("stac-ts").TemporalExtent} [userExtent] -[start, end]
+ * @param {string} [distribution] - daily, weekly, monthly, or yearly
+ */
+export function generateTimePairs(stacExtent, userExtent, distribution) {
+  // check whether the userExtent is provided
+  // if it is check that it doesn't exceed the stacExtent
+  // and clamp it otherwise
+
+  /** @type {string|Date} */
+  let from = "";
+
+  /** @type {string|Date} */
+  let to = "";
+  [from, to] = /** @type {[string, string]} */ (userExtent ?? ["", ""]);
+
+  const [stacFrom, stacTo] = /** @type {[string, string]} */ (
+    stacExtent ?? ["", ""]
+  );
+
+  try {
+    if (from && to) {
+      from = new Date(from);
+      to = new Date(to);
+    } else {
+      from = new Date(stacFrom);
+      to = new Date(stacTo);
+    }
+
+    if (from < new Date(stacFrom) || from > new Date(stacTo)) {
+      console.warn(
+        "[eodash] warn: start date is outside of the collection temporal extent and will be clamped",
+        `\nprovided start date:${from.toISOString()}`,
+        `\ncollection start date:${stacFrom}`,
+      );
+      from = new Date(stacFrom);
+    }
+
+    if (to > new Date(stacTo) || to < new Date(stacFrom)) {
+      console.warn(
+        "[eodash] warn: end date is outside of the collection temporal extent and will be clamped",
+        `\nprovided end date:${to.toISOString()}`,
+        `\ncollection end date:${stacTo}`,
+      );
+      to = new Date(stacTo);
+    }
+
+    if (from > to) {
+      console.error(
+        "[eodash] Error: start date is greater than end date",
+        from,
+        to,
+      );
+      return [];
+    }
+  } catch (e) {
+    //@ts-expect-error e should be an error
+    console.error("[eodash] Invalid date:", e.message);
+    return [];
+  }
+
+  const startDate = /** @type {Date} */ (from).toISOString();
+  const endDate = /** @type {Date} */ (to).toISOString();
+
+  if (!startDate || !endDate) {
+    return [];
+  }
+  const times = [];
+  let latest = new Date(endDate);
+  const start = new Date(startDate);
+  const oneDay = 24 * 60 * 60 * 1000;
+  // Use fixed step of 1 day (in milliseconds)
+  const step =
+    distribution === "daily"
+      ? oneDay
+      : distribution === "weekly"
+        ? oneDay * 7
+        : distribution === "monthly"
+          ? oneDay * 30
+          : distribution === "yearly"
+            ? oneDay * 365
+            : oneDay;
+
+  // Add dates, limiting to 31 dates (30 pairs maximum)
+  while (latest >= start && times.length < 31) {
+    times.push(new Date(latest));
+    latest.setTime(latest.getTime() - step);
+  }
+
+  const timePairs = [];
+  for (let i = 0; i < times.length - 1; i++) {
+    timePairs.push([times[i].toISOString(), times[i + 1].toISOString()]);
+  }
+
+  return timePairs;
+}
+
+/**
+ * Filter links to separate those with and without endpoint property
+ * @param {import("stac-ts").StacLink[] | undefined} links
+ * @param {string} [relType] - Optional relationship type
+ * @param {string} [contentType] - Optional content type
+ * @returns {[import("stac-ts").StacLink[], import("stac-ts").StacLink[]]}
+ */
+export function separateEndpointLinks(links, relType, contentType) {
+  if (!links) return [[], []];
+  const standardLinks = [];
+  const endpointLinks = [];
+
+  for (const link of links) {
+    // Check if the link matches the specified relType and contentType (if provided)
+    const relTypeMatch = relType ? link.rel === relType : true;
+    const contentTypeMatch = contentType ? link.type === contentType : true;
+
+    if (relTypeMatch && contentTypeMatch) {
+      if (link.endpoint) {
+        endpointLinks.push(link);
+      } else {
+        standardLinks.push(link);
+      }
+    }
+  }
+
+  return [standardLinks, endpointLinks];
+}
+
+/**
+ * Generates layer definitions for asynchronous process results.
+ * using AsyncProcessResults data structure.
+ * @param {import("^/EodashProcess/types").AsyncProcessResults} processResults
+ * @param {import("stac-ts").StacLink} endpointLink
+ * @param {import("stac-ts").StacCollection|null} selectedStac
+ * @param {string} [postfixId=""] - Optional layers id postfix
+ * @returns
+ */
+export async function creatAsyncProcessLayerDefinitions(
+  processResults,
+  endpointLink,
+  selectedStac,
+  postfixId = "",
+) {
+  /** @type {import("@eox/map").EoxLayer[]} */
+  const layers = [];
+  const flatStyles = await fetchProcessStyles(endpointLink);
+
+  for (const resultItem of processResults) {
+    const flatStyleJSON = extractStyleFromResult(resultItem, flatStyles);
+    let style, layerConfig;
+    if (flatStyleJSON) {
+      const extracted = extractLayerConfig(
+        selectedStac?.id ?? "",
+        flatStyleJSON,
+      );
+      layerConfig = extracted.layerConfig;
+      style = extracted.style;
+    }
+
+    switch (resultItem.type) {
+      case "image/tiff": {
+        layers.push({
+          type: "WebGLTile",
+          properties: {
+            id: endpointLink.id + "_process" + resultItem.id + postfixId,
+            title:
+              "Results " +
+              (selectedStac?.id ?? "") +
+              " " +
+              (resultItem.id ?? ""),
+            layerControlToolsExpand: true,
+            ...(layerConfig && { layerConfig }),
+          },
+          source: {
+            type: "GeoTIFF",
+            normalize: !style,
+            sources: resultItem.urls.map((url) => ({ url })),
+            //@ts-expect-error TODO
+            ...(selectedStac["eodash:mapProjection"]?.["name"] && {
+              //@ts-expect-error TODO
+              projection: selectedStac["eodash:mapProjection"]["name"],
+            }),
+          },
+          ...(style && { style }),
+        });
+        break;
+      }
+      case "application/geo+json": {
+        const mergedUrl = await mergeGeojsons(resultItem.urls);
+        layers.push({
+          type: "Vector",
+          source: {
+            type: "Vector",
+            format: "GeoJSON",
+            ...(mergedUrl && { url: mergedUrl }),
+          },
+          properties: {
+            id: endpointLink.id + "_process_" + resultItem.id + postfixId,
+            title:
+              "Results " +
+              (selectedStac?.id ?? "") +
+              " " +
+              (resultItem.id ?? ""),
+            ...(layerConfig && {
+              layerConfig: {
+                ...layerConfig,
+                style,
+              },
+            }),
+          },
+          ...(!style?.variables && { style }),
+          interactions: [],
+        });
+        break;
+      }
+      default:
+        console.warn(
+          `[eodash] Unsupported result type "${resultItem.type}" for ${resultItem.id} layer creation.`,
+        );
+        break;
+    }
+  }
+  return layers;
+}
+
+/**
+ * @param {import("stac-ts").StacLink} endpointLink
+ * @returns
+ */
+async function fetchProcessStyles(endpointLink) {
+  /** @type {import("@/types").EodashStyleJson | (Record<string,import("@/types").EodashStyleJson> & {multipleStyles:true}) | null} */
+  let flatStyles = null;
+  if (endpointLink["eox:flatstyle"]) {
+    if (typeof endpointLink["eox:flatstyle"] === "string") {
+      flatStyles = await axios
+        .get(/** @type {string} */ (endpointLink["eox:flatstyle"]))
+        .then((resp) => /** @type {} */ resp.data);
+    } else if (
+      Array.isArray(endpointLink["eox:flatstyle"]) &&
+      endpointLink["eox:flatstyle"].length
+    ) {
+      // multipleStyles as a flag to indicate it
+      flatStyles = { multipleStyles: true };
+
+      await Promise.all(
+        /** @type {{id:string;url:string}[]} */
+        (endpointLink["eox:flatstyle"]).map(async (styleDict) => {
+          //@ts-expect-error TODO
+          flatStyles[styleDict.id] = await axios
+            .get(styleDict.url)
+            .then(
+              (resp) =>
+                /** @type {import("@/types").EodashStyleJson} */ (resp.data),
+            );
+        }),
+      );
+    } else {
+      // multipleStyles as a flag to indicate it
+      flatStyles = { multipleStyles: true };
+      await Promise.all(
+        Object.keys(endpointLink["eox:flatstyle"] ?? {}).map((key) => {
+          //@ts-expect-error TODO
+          flatStyles[key] = axios
+            //@ts-expect-error TODO
+            .get(endpointLink["eox:flatstyle"][key])
+            .then((resp) => resp.data);
+        }),
+      );
+    }
+  }
+  return flatStyles;
+}
+
+/**
+ *
+ * @param {import("^/EodashProcess/types").AsyncProcessResults[number]} processResult
+ * @param {null| import("@/types").EodashStyleJson | (Record<string,import("@/types").EodashStyleJson> & {multipleStyles:true})} flatStyles
+ */
+function extractStyleFromResult(processResult, flatStyles) {
+  if (!flatStyles) {
+    return undefined;
+  }
+  if (!("multipleStyles" in flatStyles)) {
+    return flatStyles;
+  }
+
+  const outputKey = processResult.id;
+  if (!outputKey || !(outputKey in flatStyles)) {
+    return undefined;
+  }
+  return flatStyles[outputKey];
+}
+
+/**
+ *
+ * @param {import("^/EodashProcess/types").EOxHubProcessResults} resultItem
+ * @returns {import("^/EodashProcess/types").AsyncProcessResults}
+ */
+export function extractAsyncResults(resultItem) {
+  if (!resultItem) {
+    return [];
+  }
+  // if no type specified we assume the results are geotiff sources
+  if ("urls" in resultItem && Array.isArray(resultItem.urls)) {
+    return [{ id: "", urls: resultItem.urls, type: "image/tiff" }];
+  }
+
+  const extracted = [];
+  for (const key in resultItem) {
+    if (key === "id") {
+      continue;
+    }
+    extracted.push({
+      // used as a key to identify the corresponding style
+      id: key,
+      //@ts-expect-error TODO
+      urls: /** @type {string[]} */ (resultItem[key].urls),
+      //@ts-expect-error TODO
+      type: /** @type {string} */ (resultItem[key].mimetype),
+    });
+  }
+  return extracted;
+}
+/**
+ * @param {import("@eox/map").EOxMap | null} mapElement
+ * @param {import("@eox/map").EoxLayer[]} processLayers
+ */
+export const applyProcessLayersToMap = (mapElement, processLayers) => {
+  if (!processLayers.length || !mapElement) {
+    return;
+  }
+  const getMapLayers =
+    mapElement.id === "compare" ? getCompareLayers : getLayers;
+  const currentLayers = [...getMapLayers()];
+
+  let analysisGroup =
+    /*** @type {import("@eox/map/src/layers").EOxLayerTypeGroup | undefined} */ (
+      currentLayers.find((l) => l.properties?.id.includes("AnalysisGroup"))
+    );
+  if (!analysisGroup) {
+    return;
+  }
+
+  for (const layer of processLayers) {
+    const exists = analysisGroup.layers.find(
+      (l) => l.properties?.id === layer.properties?.id,
+    );
+    if (!exists) {
+      analysisGroup.layers.unshift(layer);
+    } else {
+      analysisGroup.layers = replaceLayer(
+        analysisGroup.layers,
+        layer.properties?.id ?? "",
+        [layer],
+      );
+    }
+  }
+  if (mapElement) {
+    const layers = [...currentLayers];
+    const evtKey =
+      mapElement.id === "compare"
+        ? "compareProcess:updated"
+        : "process:updated";
+    useEmitLayersUpdate(evtKey, mapElement, layers);
+    mapElement.layers = layers;
+  }
+};
+/**
+ * Updates the jsonform schema to target the compare map
+ * @param {import("json-schema").JSONSchema7 | null | undefined} jsonformSchema
+ */
+export function updateJsonformSchemaTarget(jsonformSchema) {
+  if (!jsonformSchema) {
+    return jsonformSchema;
+  }
+  const stringified = JSON.stringify(jsonformSchema).replaceAll(
+    "eox-map#main",
+    "eox-map#compare",
+  );
+  return /** @type {import("json-schema").JSONSchema7} */ (
+    JSON.parse(stringified)
+  );
+}

package/widgets/EodashProcess/states.js

@@ -0,0 +1,13 @@
+import { ref } from "vue";
+
+/**
+ * The list of job result from the server
+ * {job_start_datetime: string, job_end_datetime: string,status: string}
+ *  @type {import("vue").Ref<import("./types").AsyncJob[]>}
+ **/
+export const jobs = ref([]);
+/**
+ * The list of jobs results from the server for the compare map
+ * @type {import("vue").Ref<import("./types").AsyncJob[]>}
+ */
+export const compareJobs = ref([]);

package/widgets/EodashProcess/types.ts

@@ -0,0 +1,46 @@
+import type { StacLink, StacCollection } from "stac-ts";
+import type { Ref } from "vue";
+
+export interface CustomEnpointInput {
+  links: StacLink[];
+  jsonformSchema: Record<string, any>;
+  jsonformValue: Record<string, any>;
+  selectedStac: StacCollection;
+  isPolling?: Ref<boolean>;
+  enableCompare?: boolean;
+  jobs: Ref<AsyncJob[]>;
+}
+export interface AsyncJob {
+  type: string;
+  processID: string;
+  jobID: string;
+  status: "successful" | "failed" | "running";
+  message: string;
+  /** percentage of completion */
+  progress: number | string;
+  /** stringified object of parameters  */
+  parameters: string;
+  /** ISO datetime string */
+  job_start_datetime: string;
+  /** ISO datetime string */
+  job_end_datetime: string;
+  /** typically contains links to differen types of the results */
+  links: StacLink[];
+}
+
+export type EOxHubProcessResults =
+  | {
+      urls: string[];
+    }
+  | {
+      [K in string as K extends "urls" ? never : K]: {
+        urls: string[];
+        mimetype: string;
+      };
+    };
+
+export type AsyncProcessResults = {
+  type: string;
+  urls: string[];
+  id: string;
+}[];

package/widgets/EodashStacInfo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex-grow-1 fill-height overflow-auto">
+  <div class="flex-grow-1">
     <eox-stacinfo
       .for="currentUrl"
       .allowHtml="allowHtml"
@@ -37,22 +37,7 @@ const {
 
   styleOverride: {
     type: String,
-    default: `
-.single-property {columns: 1!important;}
-h1 {margin:0px!important;font-size:16px!important;}
-header h1:after {
-content:' ';
-display:block;
-border:1px solid #d0d0d0;
-}
-h2 {font-size:15px}
-h3 {font-size:14px}
-summary {cursor: pointer;}
-#properties li > .value { font-weight: normal !important;}
-main {padding-bottom: 10px;}
-.footer-container {line-height:1;}
-.footer-container button {margin-top: -10px;}
-.footer-container small {font-size:10px;line-height:1;}`,
+    default: "",
   },
   header: {
     /** @type {import("vue").PropType<string[]>}  */

package/widgets/EodashTools.vue

@@ -1,14 +1,13 @@
 <template>
-  <div
-    ref="rootEl"
-    class="d-flex flex-column fill-height overflow-auto bg-primary"
-  >
-    <div class="d-flex flex-row justify-space-between pa-4 align-center">
+  <div ref="rootEl" class="d-flex flex-column fill-height bg-primary">
+    <div
+      class="d-flex flex-row align-center fill-height justify-space-between pa-2 align-center"
+    >
       <v-btn
         v-if="props.showIndicatorsBtn"
         color="secondary"
-        class="text-none py-2 px-4"
-        :append-icon="[mdiPlus]"
+        class="text-none"
+        :append-icon="[mdiPlusCircleOutline]"
         :text="indicatorBtnText"
         @click="dialog = !dialog"
       >
@@ -40,16 +39,16 @@
 import PopUp from "^/PopUp.vue";
 import EodashItemFilter from "^/EodashItemFilter.vue";
 import EodashLayoutSwitcher from "^/EodashLayoutSwitcher.vue";
-import { mdiPlus, mdiViewDashboard } from "@mdi/js";
+import { mdiPlusCircleOutline, mdiViewDashboard } from "@mdi/js";
 import { computed, ref } from "vue";
-import { makePanelTransparent } from "@/composables";
-import { useDisplay } from "vuetify/lib/framework.mjs";
+import { useTransparentPanel } from "@/composables";
+import { useDisplay } from "vuetify";
 
 const dialog = ref(false);
 
 const { smAndDown } = useDisplay();
-const popupWidth = computed(() => (smAndDown.value ? "80%" : "1500px"));
-const popupHeight = computed(() => (smAndDown.value ? "90%" : "800px"));
+const popupWidth = computed(() => (smAndDown.value ? "90%" : "70%"));
+const popupHeight = computed(() => (smAndDown.value ? "90%" : "70%"));
 
 const props = defineProps({
   showIndicatorsBtn: {
@@ -80,5 +79,6 @@ const props = defineProps({
   },
 });
 const rootEl = ref(null);
-makePanelTransparent(rootEl);
+useTransparentPanel(rootEl);
 </script>
+<style lang="scss" scoped></style>

package/widgets/WidgetsContainer.vue

@@ -17,7 +17,7 @@
 import { useDefineWidgets } from "@/composables/DefineWidgets";
 import { nextTick, onMounted } from "vue";
 import { ref } from "vue";
-import { useLayout } from "vuetify/lib/framework.mjs";
+import { useLayout } from "vuetify";
 import "animated-details";
 
 const props = defineProps({