@eodash/eodash 5.0.0-alpha.2.18 → 5.0.0-alpha.2.20

package/core/client/App.vue

@@ -1,7 +1,7 @@
 <template>
   <v-app>
     <Suspense>
-      <Dashboard />
+      <Dashboard :is-web-component="isWebComponent" :config="config" />
 
       <template #fallback>
         <ErrorAlert v-model="error" />
@@ -15,9 +15,19 @@ import Dashboard from "@/views/Dashboard.vue";
 import ErrorAlert from "./components/ErrorAlert.vue";
 import { onErrorCaptured, ref } from "vue";
 
+defineProps({
+  config: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
+});
+
 // window.setEodashLoglevel("DEBUG")
 
 const error = ref("");
+const isWebComponent = !!document.querySelector("eo-dash");
+
 onErrorCaptured((e, inst, info) => {
   error.value = `
   ${e}.

package/core/client/asWebComponent.js

@@ -1,7 +1,14 @@
-import SuspensedDashboard from "./SuspensedDashboard.ce.vue";
+import App from "./App.vue";
 import { defineCustomElement } from "vue";
+import { registerPlugins } from "./plugins";
+
 /** @type {import("./asWebComponent").EodashConstructor} */
-export const Eodash = defineCustomElement(SuspensedDashboard);
+export const Eodash = defineCustomElement(App, {
+  shadowRoot: false,
+  configureApp(app) {
+    registerPlugins(app);
+  },
+});
 
 export function register() {
   customElements.define("eo-dash", Eodash);

package/core/client/composables/EodashMap.js

@@ -2,7 +2,6 @@ import { EodashCollection } from "@/utils/eodashSTAC";
 import { setMapProjFromCol } from "@/utils/helpers";
 import { onMounted, onUnmounted, watch } from "vue";
 import log from "loglevel";
-import { datetime } from "@/store/States";
 import { useSTAcStore } from "@/store/stac";
 import { storeToRefs } from "pinia";
 
@@ -48,67 +47,27 @@ export const useHandleMapMoveEnd = (mapElement, mapPosition) => {
 };
 
 /**
- *  Adds data layers extracted from eodash collections to Analysis Group
- *
- * @param { Record<string,any>[] | undefined} layersCollection
+ * Creates full layer configuration from indicator and time information
+ * @param {import("stac-ts").StacCatalog
+ *   | import("stac-ts").StacCollection
+ *   | import("stac-ts").StacItem
+ *   | null
+ * } selectedIndicator
  * @param {EodashCollection[]} eodashCols
  * @param {string} [updatedTime]
  */
-const updateLayersConfig = async (
-  layersCollection,
+
+const createLayersConfig = async (
+  selectedIndicator,
   eodashCols,
   updatedTime,
 ) => {
   log.debug(
-    "Updating layer configuration",
-    layersCollection,
+    "Creating layers config",
+    selectedIndicator,
     eodashCols,
     updatedTime,
   );
-  const dataLayersGroup = layersCollection?.find(
-    (lyr) => lyr?.properties.id === "AnalysisGroup",
-  );
-  /** @type {Record<string,any>[]} */
-  const analysisLayers = [];
-
-  if (!dataLayersGroup) {
-    log.debug("no AnalysisGroup layer found to be updated");
-    return layersCollection;
-  }
-
-  for (const ec of eodashCols) {
-    let layers;
-    if (updatedTime) {
-      layers = await ec.createLayersJson(new Date(updatedTime));
-    } else {
-      layers = await ec.createLayersJson();
-    }
-
-    if (layers) {
-      analysisLayers.push(...layers);
-    }
-  }
-  // Add expand to all analysis layers
-  analysisLayers.forEach((dl) => {
-    dl.properties.layerControlExpand = true;
-    dl.properties.layerControlToolsExpand = true;
-  });
-
-  dataLayersGroup.layers = analysisLayers;
-
-  return layersCollection;
-};
-
-/**
- * @param {import("stac-ts").StacCatalog
- *   | import("stac-ts").StacCollection
- *   | import("stac-ts").StacItem
- *   | null
- *  } selectedIndicator
- */
-
-const createLayersConfig = async (selectedIndicator) => {
-  log.debug("Creating layers config", selectedIndicator);
   const layersCollection = [];
   const dataLayers = {
     type: "Group",
@@ -120,6 +79,21 @@ const createLayersConfig = async (selectedIndicator) => {
     layers: /** @type {Record<string,any>[]}*/ ([]),
   };
 
+  for (const ec of eodashCols) {
+    let layers;
+    if (updatedTime) {
+      layers = await ec.createLayersJson(new Date(updatedTime));
+    } else {
+      layers = await ec.createLayersJson();
+    }
+    // Add expand to all analysis layers
+    layers.forEach((dl) => {
+      dl.properties.layerControlExpand = true;
+      dl.properties.layerControlToolsExpand = true;
+    });
+    dataLayers.layers.push(...layers);
+  }
+
   layersCollection.push(dataLayers);
   const indicatorLayers =
     //@ts-expect-error indicator is collection
@@ -215,18 +189,6 @@ const createLayersConfig = async (selectedIndicator) => {
     layersCollection.unshift(overlayLayers);
   }
 
-  // We try to set the current time selection
-  // to latest extent date
-  // @ts-expect-error it seems the temporal extent is not defined in type
-  const interval = selectedIndicator?.extent?.temporal?.interval;
-  if (interval && interval.length > 0 && interval[0].length > 1) {
-    const endInterval = new Date(interval[0][1]);
-    log.debug(
-      "Datepicker: found stac extent, setting time to latest value",
-      endInterval,
-    );
-    datetime.value = endInterval.toISOString();
-  }
   return layersCollection;
 };
 
@@ -260,19 +222,21 @@ export const useInitMap = (
     [selectedIndicator, datetime],
     async ([updatedStac, updatedTime], [previousStac, previousTime]) => {
       if (updatedStac) {
+        log.debug(
+          "Selected Indicator watch triggered",
+          updatedStac,
+          updatedTime,
+        );
+
         if (mapElement?.value?.id === "main") {
           // Making sure main map gets the viewer that seems to be
           // removed when the second map is no longer rendered
           if (viewHolder !== null) {
+            // Set view to previous compare view
             mapElement?.value?.map.setView(viewHolder);
             viewHolder = null;
           }
         }
-        log.debug(
-          "Selected Indicator watch triggered",
-          updatedStac,
-          updatedTime,
-        );
         let layersCollection = [];
 
         const onlyTimeChanged =
@@ -286,20 +250,20 @@ export const useInitMap = (
         } else {
           // Compare map being initialized
           if (selectedCompareStac.value !== null) {
-            // save old view to set later
+            // save view of compare map
             viewHolder = mapElement?.value?.map.getView();
             /** @type {any} */
             (mapElement.value).sync = partnerMap.value;
           }
         }
 
+        // We re-crate the configuration if time changed
         if (onlyTimeChanged) {
-          layersCollection =
-            (await updateLayersConfig(
-              [...(mapElement.value?.layers ?? [])].reverse(),
-              eodashCols,
-              updatedTime,
-            )) ?? [];
+          layersCollection = await createLayersConfig(
+            updatedStac,
+            eodashCols,
+            updatedTime,
+          );
           log.debug(
             "Assigned layers after changing time only",
             JSON.parse(JSON.stringify(layersCollection)),
@@ -309,28 +273,50 @@ export const useInitMap = (
         }
 
         /** @type {Record<string,any>[]} */
-        layersCollection = await createLayersConfig(updatedStac);
-
-        // updates layersCollection in place
-        await updateLayersConfig(layersCollection, eodashCols, updatedTime);
-
-        // Try to move map view to extent
-        // Sanitize extent,
-        const b = updatedStac.extent?.spatial.bbox[0];
-        const sanitizedExtent = [
-          b[0] > -180 ? b[0] : -180,
-          b[1] > -90 ? b[1] : -90,
-          b[2] < 180 ? b[2] : 180,
-          b[3] < 90 ? b[3] : 90,
-        ];
-
-        const reprojExtent = mapElement.value?.transformExtent(
-          sanitizedExtent,
-          "EPSG:4326",
-          mapElement.value?.map?.getView().getProjection(),
+        layersCollection = await createLayersConfig(
+          updatedStac,
+          eodashCols,
+          datetime.value,
         );
-        /** @type {any} */
-        (mapElement.value).zoomExtent = reprojExtent;
+
+        // We try to set the current time selection to latest extent date
+        let endInterval = null;
+        const interval = updatedStac?.extent?.temporal?.interval;
+        if (interval && interval.length > 0 && interval[0].length > 1) {
+          // @ts-expect-error this is the defined STAC structure
+          endInterval = new Date(interval[0][1]);
+          log.debug(
+            "Indicator load: found stac extent, setting time to latest value",
+            endInterval,
+          );
+        }
+        if (
+          endInterval !== null &&
+          endInterval.toISOString() !== datetime.value
+        ) {
+          datetime.value = endInterval.toISOString();
+        }
+
+        // Try to move map view to extent only when main
+        // indicator and map changes
+        if (mapElement?.value?.id === "main") {
+          // Sanitize extent,
+          const b = updatedStac.extent?.spatial.bbox[0];
+          const sanitizedExtent = [
+            b[0] > -180 ? b[0] : -180,
+            b[1] > -90 ? b[1] : -90,
+            b[2] < 180 ? b[2] : 180,
+            b[3] < 90 ? b[3] : 90,
+          ];
+
+          const reprojExtent = mapElement.value?.transformExtent(
+            sanitizedExtent,
+            "EPSG:4326",
+            mapElement.value?.map?.getView().getProjection(),
+          );
+          /** @type {any} */
+          (mapElement.value).zoomExtent = reprojExtent;
+        }
 
         log.debug(
           "Assigned layers",

package/core/client/eodash.js

@@ -10,7 +10,8 @@ import { currentUrl } from "./store/States";
 export const eodash = reactive({
   id: "demo",
   stacEndpoint:
-    "https://eodashcatalog.eox.at/test-style/trilateral/catalog.json",
+    // "https://eodashcatalog.eox.at/test-style/trilateral/catalog.json",
+    "https://gtif-cerulean.github.io/catalog/cerulean/catalog.json",
   brand: {
     noLayout: true,
     name: "Demo",
@@ -45,7 +46,7 @@ export const eodash = reactive({
       widget: {
         name: "EodashMap",
         properties: {
-          // enableCompare: true,
+          enableCompare: true,
         },
       },
     },
@@ -58,7 +59,7 @@ export const eodash = reactive({
         widget: {
           name: "EodashItemFilter",
           properties: {
-            // enableCompare: true,
+            enableCompare: true,
             aggregateResults: "collection_group",
           },
         },
@@ -72,13 +73,33 @@ export const eodash = reactive({
           name: "EodashLayerControl",
         },
       },
+      /*
+      {
+        defineWidget: (selectedCompareStac) => {
+          return selectedCompareStac
+            ? {
+                id: Symbol(),
+                title: "Layer Control Comparison",
+                layout: { x: 9, y: 6, w: 3, h: 6 },
+                type: "internal",
+                widget: {
+                  name: "EodashLayerControl",
+                  properties: {
+                    map: "second",
+                  },
+                },
+              }
+            : null;
+        },
+      },
+      */
       {
         defineWidget: (selectedSTAC) => {
           return selectedSTAC
             ? {
                 id: "Information",
                 title: "Information",
-                layout: { x: 9, y: 0, w: 3, h: 12 },
+                layout: { x: 9, y: 0, w: 3, h: 6 },
                 type: "web-component",
                 widget: {
                   link: async () => await import("@eox/stacinfo"),

package/core/client/store/Actions.js

@@ -8,6 +8,12 @@ import log from "loglevel";
  */
 export const getLayers = () => mapEl.value?.layers.toReversed();
 
+/**
+ * Returns the current layers of {@link mapCompareEl}
+ * @returns {Record<string,any>[]}
+ */
+export const getCompareLayers = () => mapCompareEl.value?.layers.toReversed();
+
 /**
  * Register EPSG projection in `eox-map`
  * @param {string|number|{name: string, def: string, extent?:number[]}} [projection]*/

package/core/client/utils/createLayers.js

@@ -1,4 +1,5 @@
 import { registerProjection } from "@/store/Actions";
+import { mapEl } from "@/store/States";
 import {
   extractRoles,
   getProjectionCode,
@@ -116,6 +117,10 @@ export const createLayersFromLinks = async (
   const wmtsArray = item.links.filter((l) => l.rel === "wmts");
   const xyzArray = item.links.filter((l) => l.rel === "xyz") ?? [];
 
+  // Taking projection code from main map view, as main view defines
+  // projection for comparison map
+  const viewProjectionCode = mapEl?.value?.projection || "EPSG:3857";
+
   for (const wmsLink of wmsArray ?? []) {
     // Registering setting sub wms link projection
 
@@ -124,12 +129,16 @@ export const createLayersFromLinks = async (
       (wmsLink?.["proj:epsg"] || wmsLink?.["eodash:proj4_def"]);
 
     await registerProjection(wmsLinkProjection);
-    const projectionCode = getProjectionCode(wmsLinkProjection || "EPSG:4326");
+
+    const linkProjectionCode =
+      getProjectionCode(wmsLinkProjection) || "EPSG:4326";
+    // Projection code need to be based on map view projection to make sure
+    // tiles are reloaded when changing projection
     const linkId = createLayerID(
       collectionId,
       item.id,
       wmsLink,
-      projectionCode,
+      viewProjectionCode,
     );
     log.debug("WMS Layer added", linkId);
     let json = {
@@ -142,7 +151,7 @@ export const createLayersFromLinks = async (
       source: {
         type: "TileWMS",
         url: wmsLink.href,
-        projection: projectionCode,
+        projection: linkProjectionCode,
         tileGrid: {
           tileSize: [512, 512],
         },
@@ -181,8 +190,14 @@ export const createLayersFromLinks = async (
       collectionId,
       item.id,
       wmtsLink,
-      projectionCode,
+      viewProjectionCode,
     );
+    const dimensions = /** @type { {style:any} & Record<string,any> } */ (
+      wmtsLink["wmts:dimensions"] || {}
+    );
+    let { style, ...dimensionsWithoutStyle } = { ...dimensions };
+    let extractedStyle = /** @type { string } */ (style || "default");
+
     if (wmtsLink.title === "wmts capabilities") {
       log.debug(
         "Warning: WMTS Layer from capabilities added, function needs to be updated",
@@ -200,14 +215,14 @@ export const createLayersFromLinks = async (
           // TODO: Hard coding url as the current one set is for capabilities
           url: "https://wmts.marine.copernicus.eu/teroWmts",
           layer: wmtsLink["wmts:layer"],
-          style: wmtsLink.style || "default",
+          style: extractedStyle,
           // TODO: Hard coding matrixSet until we find solution to wmts creation from capabilities
           matrixSet: "EPSG:3857",
           projection: projectionCode,
           tileGrid: {
             tileSize: [128, 128],
           },
-          dimensions: wmtsLink["wmts:dimensions"],
+          dimensions: dimensionsWithoutStyle,
         },
       };
     } else {
@@ -224,15 +239,15 @@ export const createLayersFromLinks = async (
         },
         source: {
           type: "WMTS",
-          url: wmtsLink,
+          url: wmtsLink.href,
           layer: wmtsLink["wmts:layer"],
-          style: wmtsLink.style || "default",
+          style: extractedStyle,
           matrixSet: wmtsLink.matrixSet || "EPSG:3857",
           projection: projectionCode,
           tileGrid: {
             tileSize: [512, 512],
           },
-          dimensions: wmtsLink["wmts:dimensions"],
+          dimensions: dimensionsWithoutStyle,
         },
       };
     }
@@ -251,7 +266,7 @@ export const createLayersFromLinks = async (
       collectionId,
       item.id,
       xyzLink,
-      projectionCode,
+      viewProjectionCode,
     );
     log.debug("XYZ Layer added", linkId);
     let json = {

package/core/client/utils/eodashSTAC.js

@@ -9,7 +9,11 @@ import {
   generateFeatures,
   replaceLayer,
 } from "./helpers";
-import { getLayers, registerProjection } from "@/store/Actions";
+import {
+  getLayers,
+  getCompareLayers,
+  registerProjection,
+} from "@/store/Actions";
 import { createLayersFromAssets, createLayersFromLinks } from "./createLayers";
 import axios from "@/plugins/axios";
 import log from "loglevel";
@@ -305,8 +309,9 @@ export class EodashCollection {
    *
    * @param {string} datetime
    * @param {string} layer
+   * @param {string} map
    */
-  async updateLayerJson(datetime, layer) {
+  async updateLayerJson(datetime, layer, map) {
     await this.fetchCollection();
 
     // get the link of the specified date
@@ -327,12 +332,15 @@ export class EodashCollection {
     // create json layers from the item
     const newLayers = await this.createLayersJson(specifiedLink);
 
-    const curentLayers = getLayers();
+    let currentLayers = getLayers();
+    if (map === "second") {
+      currentLayers = getCompareLayers();
+    }
 
-    const oldLayer = findLayer(curentLayers, layer);
+    const oldLayer = findLayer(currentLayers, layer);
 
     const updatedLayers = replaceLayer(
-      curentLayers,
+      currentLayers,
       /** @type {Record<string,any> & { properties:{ id:string; title:string } } } */
       (oldLayer),
       newLayers,

package/core/client/utils/helpers.js

@@ -141,9 +141,9 @@ export const extractRoles = (properties, linkOrAsset) => {
       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(";:;");
+      // const [_colId, _itemId, _isAsset, _random, proj] =
+      //   properties.id.split(";:;");
+      // properties.id = ["", "", "", "", linkOrAsset.id, proj].join(";:;");
     }
 
     return properties;

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>