@eodash/eodash 5.0.0-alpha.2.8 → 5.0.0-processing

package/core/client/utils/helpers.js

@@ -1,16 +1,16 @@
-/** @param {import("stac-ts").StacLink[]} links */
+import { changeMapProjection, registerProjection } from "@/store/Actions";
+import { availableMapProjection } from "@/store/States";
+import { toAbsolute } from "stac-js/src/http.js";
+import axios from "@/plugins/axios";
+import log from "loglevel";
+
+/** @param {import("stac-ts").StacLink[]} [links] */
 export function generateFeatures(links) {
   /**
-   * @type {{
-   *   type: string;
-   *   geometry: {
-   *     type: string;
-   *     coordinates: [number, number];
-   *   };
-   * }[]}
+   * @type {import("geojson").Feature[]}
    */
   const features = [];
-  links.forEach((element) => {
+  links?.forEach((element) => {
     if (element.rel === "item" && "latlng" in element) {
       const [lat, lon] = /** @type {string} */ (element.latlng)
         .split(",")
@@ -21,6 +21,7 @@ export function generateFeatures(links) {
           type: "Point",
           coordinates: [lon, lat],
         },
+        properties: { id: element.id },
       });
     }
   });
@@ -36,3 +37,362 @@ export function generateFeatures(links) {
   };
   return geojsonObject;
 }
+
+/** @param { import("ol/layer/WebGLTile").Style & { jsonform?: Record<string,any> } & { legend?: Record<string,any> } } [style] */
+export function extractLayerConfig(style) {
+  /** @type {Record<string,unknown> | undefined} */
+  let layerConfig = undefined;
+  if (style?.jsonform) {
+    layerConfig = { schema: style.jsonform, type: "style" };
+    style = { ...style };
+    delete style.jsonform;
+    if (style?.legend) {
+      layerConfig.legend = style.legend;
+      delete style.legend;
+    }
+  }
+  log.debug(
+    "extracted layerConfig",
+    JSON.parse(JSON.stringify({ layerConfig, style })),
+  );
+
+  return { layerConfig, style };
+}
+
+/**
+ * checks if there's a projection on the Collection and
+ * updates {@link availableMapProjection}
+ * @param {import('stac-ts').StacCollection} [STAcCollection]
+ */
+export const setMapProjFromCol = async (STAcCollection) => {
+  // if a projection exists on the collection level
+  log.debug("Checking for available map projection in indicator");
+  const projection =
+    /** @type {number | string | {name: string, def: string} | undefined} */
+    (
+      STAcCollection?.["eodash:mapProjection"] ||
+        STAcCollection?.["proj:epsg"] ||
+        STAcCollection?.["eodash:proj4_def"]
+    );
+  if (projection) {
+    log.debug("Projection found", projection);
+    await registerProjection(projection);
+    const projectionCode = getProjectionCode(projection);
+    if (availableMapProjection.value !== projectionCode) {
+      log.debug(
+        "Changing map projection",
+        availableMapProjection.value,
+        projectionCode,
+      );
+      await changeMapProjection(projection);
+    }
+    // set it for `EodashMapBtns`
+    availableMapProjection.value = /** @type {string} */ (projectionCode);
+  } else {
+    // reset to default projection
+    log.debug("Resetting projection to default EPSG:3857");
+    await changeMapProjection((availableMapProjection.value = ""));
+  }
+};
+
+/**
+ * Function to extract collection urls from an indicator
+ * @param {import("stac-ts").StacCatalog
+ *   | import("stac-ts").StacCollection
+ *   | import("stac-ts").StacItem
+ *   | null
+ * } stacObject
+ * @param {string} basepath
+ * @returns {string[]}
+ */
+export function extractCollectionUrls(stacObject, basepath) {
+  const collectionUrls = [];
+  // Support for two structure types, flat and indicator, simplified here:
+  // Flat assumes Catalog-Collection-Item
+  // Indicator assumes Catalog-Collection-Collection-Item
+  // TODO: this is not the most stable test approach,
+  // we should discuss potential other approaches
+  if (stacObject?.links && stacObject?.links[1]?.rel === "item") {
+    collectionUrls.push(basepath);
+  } else if (stacObject?.links[1]?.rel === "child") {
+    // TODO: Iterate through all children to create collections
+    stacObject.links.forEach((link) => {
+      if (link.rel === "child") {
+        collectionUrls.push(toAbsolute(link.href, basepath));
+      }
+    });
+  }
+  return collectionUrls;
+}
+
+/**
+ * Assign extracted roles to layer properties
+ * @param {Record<string,any>} properties
+ * @param {import("stac-ts").StacLink | import("stac-ts").StacAsset} linkOrAsset
+ * */
+export const extractRoles = (properties, linkOrAsset) => {
+  const roles = /** @type {string[]} */ (linkOrAsset.roles);
+  roles?.forEach((role) => {
+    if (role === "visible") {
+      properties.visible = true;
+    }
+    if (role === "overlay" || role === "baselayer") {
+      properties.group = role;
+      //remove all the properties and replace the random ID with baselayer
+      // provided ID
+      // const [_colId, _itemId, _isAsset, _random, proj] =
+      //   properties.id.split(";:;");
+      // properties.id = ["", "", "", "", linkOrAsset.id, proj].join(";:;");
+    }
+
+    return properties;
+  });
+};
+
+/**
+ * @param {import("stac-ts").StacItem} item
+ * @param {string} itemUrl
+ **/
+export const fetchStyle = async (item, itemUrl) => {
+  const styleLink = item.links.find((link) => link.rel.includes("style"));
+  if (styleLink) {
+    let url = "";
+    if (styleLink.href.startsWith("http")) {
+      url = styleLink.href;
+    } else {
+      url = toAbsolute(styleLink.href, itemUrl);
+    }
+
+    /** @type {import("ol/layer/WebGLTile").Style & {jsonform?:Record<string,any>}} */
+    const styleJson = await axios.get(url).then((resp) => resp.data);
+
+    log.debug("fetched styles JSON", JSON.parse(JSON.stringify(styleJson)));
+    return { ...styleJson };
+  }
+};
+
+/**
+ * Return projection code which is to be registered in `eox-map`
+ * @param {string|number|{name: string, def: string}} [projection]
+ * @returns {string}
+ */
+export const getProjectionCode = (projection) => {
+  let code = projection;
+  switch (typeof projection) {
+    case "number":
+      code = `EPSG:${projection}`;
+      break;
+    case "string":
+      code = projection;
+      break;
+    case "object":
+      code = projection?.name;
+  }
+  return /** @type {string} */ (code);
+};
+
+/**
+ * @param {import("stac-ts").StacLink[]} [links]
+ * @param {string|null} [currentStep]
+ **/
+export const extractLayerDatetime = (links, currentStep) => {
+  if (!currentStep || !links?.length) {
+    return undefined;
+  }
+
+  // check if links has a datetime value
+  const hasDatetime = links.some((l) => typeof l.datetime === "string");
+  if (!hasDatetime) {
+    return undefined;
+  }
+
+  /** @type {string[]} */
+  const controlValues = [];
+  try {
+    currentStep = new Date(currentStep).toISOString();
+
+    links.reduce((vals, link) => {
+      if (link.datetime && link.rel === "item") {
+        vals.push(
+          new Date(/** @type {string} */ (link.datetime)).toISOString(),
+        );
+      }
+      return vals;
+    }, controlValues);
+  } catch (e) {
+    console.warn("[eodash] not supported datetime format was provided", e);
+    return undefined;
+  }
+  // not enough controlValues
+  if (controlValues.length <= 1) {
+    return undefined;
+  }
+
+  // item datetime is not included in the item links datetime
+  if (!controlValues.includes(currentStep)) {
+    return undefined;
+  }
+
+  return {
+    controlValues,
+    currentStep,
+    slider: true,
+    disablePlay: true,
+  };
+};
+
+/**
+ * Find layer by ID
+ *  @param {string} layer
+ *  @param {Record<string, any>[]} layers
+ *  @returns {Record<string,any> | undefined}
+ **/
+export const findLayer = (layers, layer) => {
+  for (const lyr of layers) {
+    if (lyr.type === "Group") {
+      const found = findLayer(lyr.layers, layer);
+      if (!found) {
+        continue;
+      }
+      return found;
+    }
+    if (lyr.properties.id === layer) {
+      return lyr;
+    }
+  }
+};
+
+/**
+ * @param {Record<string,any>[]} currentLayers
+ * @param {Record<string,any>} oldLayer
+ * @param {Record<string,any>[]} newLayers
+ * @returns {Record<string,any>[] | undefined}
+ */
+export const replaceLayer = (currentLayers, oldLayer, newLayers) => {
+  const oldLayerIdx = currentLayers.findIndex(
+    (l) => l.properties.id === oldLayer.properties.id,
+  );
+  if (oldLayerIdx !== -1) {
+    currentLayers.splice(oldLayerIdx, 1, ...newLayers);
+    return currentLayers;
+  }
+
+  for (const l of currentLayers) {
+    if (l.type === "Group") {
+      const updatedGroupLyrs = replaceLayer(l.layers, oldLayer, newLayers);
+      if (updatedGroupLyrs?.length) {
+        l.layers = updatedGroupLyrs;
+        return currentLayers;
+      }
+    }
+  }
+};
+/**
+ * @param {import('./eodashSTAC.js').EodashCollection[]} indicators
+ * @param {import('ol/layer').Layer} layer
+ */
+export const getColFromLayer = async (indicators, layer) => {
+  // init cols
+  const collections = await Promise.all(
+    indicators.map((ind) => ind.fetchCollection()),
+  );
+  const [collectionId, itemId, ..._other] = layer.get("id").split(";:;");
+
+  const chosen = collections.find((col) => {
+    const isInd =
+      col.id === collectionId &&
+      col.links?.some(
+        (link) => link.rel === "item" && link.href.includes(itemId),
+      );
+    return isInd ?? false;
+  });
+  return indicators.find((ind) => ind.collectionStac?.id === chosen?.id);
+};
+
+/**
+ * generates layer specific ID, related functions are: {@link assignProjID} & {@link extractRoles}
+ * @param {string} collectionId
+ * @param {string} itemId
+ * @param {import('stac-ts').StacLink} link
+ * @param {string} projectionCode
+ *
+ */
+export const createLayerID = (collectionId, itemId, link, projectionCode) => {
+  const linkId = link.id || link.title || link.href;
+  let lId = `${collectionId ?? ""};:;${itemId ?? ""};:;${linkId ?? ""};:;${projectionCode ?? ""}`;
+  // If we are looking at base layers and overlays we remove the collection and item part
+  // as we want to make sure tiles are not reloaded when switching layers
+  if (
+    link.roles &&
+    // @ts-expect-error it seems roles it not defined for links yet
+    link.roles.find((r) => ["baselayer", "overlay"].includes(r))
+  ) {
+    lId = `${linkId ?? ""};:;${projectionCode ?? ""}`;
+  }
+  log.debug("Generated Layer ID", lId);
+  return lId;
+};
+
+/**
+ * generates layer specific ID, related functions are: {@link assignProjID} & {@link extractRoles}
+ * @param {string} collectionId
+ * @param {string} itemId
+ * @param {number} index
+ *
+ */
+export const createAssetID = (collectionId, itemId, index) => {
+  let lId = `${collectionId ?? ""};:;${itemId ?? ""};:;${index ?? ""}`;
+  log.debug("Generated Asset ID", lId);
+  return lId;
+};
+
+/**
+ *
+ * @param {import("stac-ts").StacItem} item
+ * @param {import("stac-ts").StacLink | import("stac-ts").StacAsset} linkOrAsset
+ * @param {string} id - {@link createLayerID} & {@link extractRoles}
+ * @param {{ properties:{id:string}  & Record<string, any> }& Record<string,any>} layer
+ * @returns
+ */
+export function assignProjID(item, linkOrAsset, id, layer) {
+  const indicatorProjection =
+    /** @type { string | undefined} */
+    (item?.["proj:epsg"]) ||
+    /** @type { {name?: string} | undefined} */
+    (item?.["eodash:mapProjection"])?.name ||
+    "EPSG:3857";
+
+  const idArr = id.split(";:;");
+
+  idArr.pop();
+  idArr.push(indicatorProjection);
+  const updatedID = idArr.join(";:;");
+  layer.properties.id = updatedID;
+
+  log.debug("Updating layer id", updatedID);
+
+  return updatedID;
+}
+
+/**
+ * creates a structured clone from the layers and
+ * removes all properties from the clone
+ * except the ID and title
+ *
+ * @param {Record<string,any>[]} layers
+ */
+export const removeUnneededProperties = (layers) => {
+  const cloned = structuredClone(layers);
+  cloned.forEach((layer) => {
+    const id = layer.properties.id;
+    const title = layer.properties.title;
+    layer.properties = { id, title };
+    if (layer["interactions"]) {
+      delete layer["interactions"];
+    }
+    if (layer.type === "Group") {
+      layer.layers = removeUnneededProperties(layer.layers);
+    }
+  });
+  return cloned;
+};

package/core/client/utils/keys.js

@@ -4,3 +4,5 @@
  * @see {@link "@/plugins/index.js"}
  */
 export const eodashKey = Symbol("eodash");
+/** @type {import("@vueuse/core").EventBusKey<"layers:updated"|"time:updated">} */
+export const eoxLayersKey = Symbol("eoxMapLayers");

package/core/client/utils/states.js

@@ -0,0 +1,17 @@
+import { shallowReactive } from "vue";
+
+/**
+ * Array of eodash STAC Collections extracted from the current selected indicator.
+ * Updated in {@link file://./../store/stac.js `loadSelectedSTAC`} widget
+ * @type {import('./eodashSTAC').EodashCollection[]}
+ * @private
+ */
+export const eodashCollections = shallowReactive([]);
+
+/**
+ * Array of eodash STAC Collections extracted from the current selected COMPARE indicator.
+ * Updated in {@link file://./../store/stac.js ` loadSelectedCompareSTAC`} widget
+ * @type {import('./eodashSTAC').EodashCollection[]}
+ * @private
+ */
+export const eodashCompareCollections = shallowReactive([]);

package/core/client/views/Dashboard.vue

@@ -1,26 +1,23 @@
 <template>
-  <HeaderComponent ref="headerRef" v-if="!eodash.brand.noLayout" />
+  <HeaderComponent v-if="!eodash.brand.noLayout" />
   <ErrorAlert v-model="error" />
   <Suspense>
-    <TemplateComponent
-      @vue:mounted="onTemplateMount?.(hiddenElements)"
-      class="template"
-    />
+    <TemplateComponent :style="{ height: templateHeight }" />
     <template #fallback>
       <div class="loading-container">
         <Loading />
       </div>
     </template>
   </Suspense>
-  <FooterComponent ref="footerRef" v-if="!eodash.brand.noLayout" />
+  <FooterComponent v-if="!eodash.brand.noLayout" />
 </template>
 
 <script setup>
 import { useEodashRuntime } from "@/composables/DefineEodash";
 import { useURLSearchParametersSync, useUpdateTheme } from "@/composables";
 import { useSTAcStore } from "@/store/stac";
-import { defineAsyncComponent, onErrorCaptured, onMounted, ref } from "vue";
-import { useDisplay, useLayout } from "vuetify/lib/framework.mjs";
+import { defineAsyncComponent, onErrorCaptured, ref } from "vue";
+import { useDisplay } from "vuetify/lib/framework.mjs";
 import { loadFont } from "@/utils";
 import Loading from "@/components/Loading.vue";
 import ErrorAlert from "@/components/ErrorAlert.vue";
@@ -29,8 +26,9 @@ const props = defineProps({
   config: {
     type: String,
   },
-  onTemplateMount: {
-    type: Function,
+  isWebComponent: {
+    type: Boolean,
+    default: false,
   },
 });
 const eodash = await useEodashRuntime(props.config);
@@ -43,7 +41,7 @@ theme.global.name.value = "dashboardTheme";
 await loadFont(
   eodash.brand?.font?.family,
   eodash.brand?.font?.link,
-  !!props.onTemplateMount,
+  props.isWebComponent,
 );
 
 const { loadSTAC } = useSTAcStore();
@@ -60,34 +58,8 @@ const HeaderComponent = defineAsyncComponent(
 const FooterComponent = defineAsyncComponent(
   () => import(`@/components/Footer.vue`),
 );
-const { mainRect } = useLayout();
-const templateHeight = eodash.brand.noLayout
-  ? props.onTemplateMount
-    ? "100%"
-    : "90dvh"
-  : `calc(100dvh - ${mainRect.value["top"] + mainRect.value["bottom"]}px)`;
 
-const headerRef = ref(null);
-/**
- * @type {import("vue").Ref<InstanceType<
- *   typeof import("@/components/Footer.vue").default
- * > | null>}
- */
-const footerRef = ref(null);
-
-const hiddenElements = [headerRef, footerRef];
-
-onMounted(() => {
-  if (props.onTemplateMount && !eodash.brand.noLayout) {
-    hiddenElements.forEach((element) => {
-      /** @type {HTMLElement} */
-      (
-        /** @type {import("vue").ComponentPublicInstance} */
-        (element.value).$el
-      ).style.opacity = "0";
-    });
-  }
-});
+const templateHeight = props.isWebComponent ? "100%" : "100dvh";
 
 const error = ref("");
 onErrorCaptured((e, comp, info) => {
@@ -99,18 +71,17 @@ onErrorCaptured((e, comp, info) => {
 });
 </script>
 <style>
-html {
-  overflow: hidden !important;
-}
-
-.template {
-  height: v-bind("templateHeight");
-}
-
 .loading-container {
   height: 100dvh;
   display: flex;
   align-items: center;
   justify-content: center;
 }
+
+div.v-application__wrap {
+  min-height: fit-content;
+}
+eo-dash {
+  overflow: hidden;
+}
 </style>

package/core/client/vite-env.d.ts

@@ -7,15 +7,7 @@ declare module "*.vue" {
 }
 declare interface Window {
   eodashStore: import("@/types").EodashStore;
-}
-declare module "@eox/stacinfo" {
-  export const EOxStacInfo: CustomElementConstructor;
-}
-declare module "@eox/map" {
-  export const EOxMap: CustomElementConstructor;
-}
-declare module "@eox/itemfilter" {
-  export const EOxItemFilter: CustomElementConstructor;
+  setEodashLoglevel: typeof import("loglevel").setLevel;
 }
 declare module "user:config" {
   const eodash: import("@/types").Eodash | Promise<import("@/types").Eodash>;

package/dist/client/DashboardLayout-CVMJ4l8M.js

@@ -0,0 +1,87 @@
+import { inject, openBlock, createBlock, withCtx, createElementVNode, unref, normalizeStyle, createElementBlock, Suspense, resolveDynamicComponent, mergeProps, createCommentVNode, Fragment, renderList, Transition } from 'vue';
+import { _ as _export_sfc, F as eodashKey, G as useDefineWidgets } from './asWebComponent-DUUoR7MZ.js';
+import '@eox/layout';
+import { V as VMain } from './VMain-DnGlQUyr.js';
+
+const _hoisted_1 = ["gap"];
+const _hoisted_2 = ["h", "w", "x", "y"];
+
+
+const _sfc_main = {
+  __name: 'DashboardLayout',
+  setup(__props) {
+
+const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey));
+
+const [bgWidget] = useDefineWidgets([eodash.template?.background]);
+
+const importedWidgets = useDefineWidgets(eodash.template?.widgets);
+
+return (_ctx, _cache) => {
+                                                       
+
+  return (openBlock(), createBlock(VMain, null, {
+    default: withCtx(() => [
+      createElementVNode("eox-layout", {
+        gap: unref(eodash).template.gap ?? 16,
+        style: normalizeStyle(`padding: ${unref(eodash).template.gap || 16}px`)
+      }, [
+        (unref(bgWidget).component)
+          ? (openBlock(), createElementBlock("eox-layout-item", {
+              key: 0,
+              class: "bg-panel bg-surface",
+              style: normalizeStyle(`margin: -${unref(eodash).template.gap ?? 16}px;`),
+              x: "0",
+              y: "0",
+              h: "12",
+              w: "12"
+            }, [
+              (openBlock(), createBlock(Suspense, { suspensible: "" }, {
+                default: withCtx(() => [
+                  (openBlock(), createBlock(resolveDynamicComponent(unref(bgWidget).component), mergeProps({ id: "bg-widget" }, unref(bgWidget).props), null, 16 /* FULL_PROPS */))
+                ]),
+                _: 1 /* STABLE */
+              }))
+            ], 4 /* STYLE */))
+          : createCommentVNode("v-if", true),
+        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(importedWidgets), (importedWidget, idx) => {
+          return (openBlock(), createBlock(Transition, {
+            key: idx,
+            name: "fade"
+          }, {
+            default: withCtx(() => [
+              (importedWidget.value.component)
+                ? (openBlock(), createElementBlock("eox-layout-item", {
+                    key: importedWidget.value.id,
+                    class: "panel bg-surface",
+                    h: importedWidget.value.layout.h,
+                    w: importedWidget.value.layout.w,
+                    x: importedWidget.value.layout.x,
+                    y: importedWidget.value.layout.y
+                  }, [
+                    (openBlock(), createBlock(Suspense, { suspensible: "" }, {
+                      default: withCtx(() => [
+                        (openBlock(), createBlock(resolveDynamicComponent(importedWidget.value.component), mergeProps({
+                          key: importedWidget.value.id,
+                          ref_for: true
+                        }, importedWidget.value.props), null, 16 /* FULL_PROPS */))
+                      ]),
+                      _: 2 /* DYNAMIC */
+                    }, 1024 /* DYNAMIC_SLOTS */))
+                  ], 8 /* PROPS */, _hoisted_2))
+                : createCommentVNode("v-if", true)
+            ]),
+            _: 2 /* DYNAMIC */
+          }, 1024 /* DYNAMIC_SLOTS */))
+        }), 128 /* KEYED_FRAGMENT */))
+      ], 12 /* STYLE, PROPS */, _hoisted_1)
+    ]),
+    _: 1 /* STABLE */
+  }))
+}
+}
+
+};
+const DashboardLayout = /*#__PURE__*/_export_sfc(_sfc_main, [['__scopeId',"data-v-c4bc74b1"]]);
+
+export { DashboardLayout as default };