Fix: Update Eodash

package.json

@@ -11,7 +11,7 @@
     "format": "prettier . --write"
   },
   "dependencies": {
-    "@eodash/eodash": "^5.0.0-alpha.1.15",
+    "@eodash/eodash": "^5.0.0-alpha.2.1",
     "@eox/map": "^1.3.0",
     "@eox/stacinfo": "^0.3.0"
   },

src/container.js

@@ -1,7 +1,5 @@
-import { store } from "@eodash/eodash";
-const { currentUrl, mapInstance } = store.states;
 /**
- *  @type {import("@eodash/eodash").Widget}
+ *  @type {import("@eodash/eodash").InternalComponentWidget}
  **/
 export default {
   id: Symbol(),
@@ -11,30 +9,12 @@ export default {
   widget: {
     name: "WidgetsContainer",
     properties: {
+      /** @type {Omit<import("@eodash/eodash").Widget,"layout">[]} */
       widgets: [
-        {
-          id: "Information",
-          title: "Information",
-          type: "web-component",
-          widget: {
-            link: () => import("@eox/stacinfo"),
-            tagName: "eox-stacinfo",
-            properties: {
-              for: currentUrl,
-              allowHtml: "true",
-              styleOverride:
-                "#properties li > .value {font-weight: normal !important;}",
-              header: "[]",
-              subheader: "[]",
-              properties: '["description"]',
-              featured: "[]",
-              footer: "[]",
-            },
-          },
-        },
-        {
+        /** @type {Omit<import("@eodash/eodash").FunctionalWidget,"layout">} */
+        ({
           defineWidget: (selectedSTAC) => {
-            const legendURL = selectedSTAC?.assets?.legend?.href ?? false;
+            const legendURL = selectedSTAC?.assets?.["legend"]?.href;
             return legendURL
               ? {
                   id: legendURL,
@@ -54,23 +34,18 @@ export default {
                   },
                 }
               : {
-                  id: "reset-zoom",
-                  title: "Reset Zoom",
-                  type: "web-component",
+                  id: Symbol(),
+                  title: "Date Picker",
+                  type: "internal",
                   widget: {
-                    link: new URL(
-                      "/reset-zoom-btn/ResetZoom.S2AXqNgZ.js",
-                      import.meta.url
-                    ).href,
-                    tagName: "reset-zoom-btn",
+                    name: "EodashDatePicker",
                     properties: {
-                      map: mapInstance,
-                      to: 6,
+                      inline: true,
                     },
                   },
                 };
           },
-        },
+        }),
       ],
     },
   },

src/information.js

@@ -0,0 +1,27 @@
+import { store } from "@eodash/eodash";
+
+const { currentUrl } = store.states;
+/**
+ * @type {import("@eodash/eodash").Widget}
+ **/
+export default {
+  id: "Information",
+  layout: { x: 9, y: 0, w: 3, h: 12 },
+  title: "Information",
+  type: "web-component",
+  widget: {
+    link: () => import("@eox/stacinfo"),
+    tagName: "eox-stacinfo",
+    properties: {
+      for: currentUrl,
+      allowHtml: "true",
+      styleOverride:
+        "#properties li > .value {font-weight: normal !important;}",
+      header: "[]",
+      subheader: "[]",
+      properties: '["description"]',
+      featured: "[]",
+      footer: "[]",
+    },
+  },
+};

src/main.js

@@ -1,18 +1,18 @@
 import { createEodash } from "@eodash/eodash";
-import tools from "./tools";
-import basedOnWms from "./basedOnWms";
+import information from "./information";
 import container from "./container";
 
-export default createEodash((_store) => ({
+export default createEodash({
   id: "template-id",
   stacEndpoint:
-    "https://eodash.github.io/catalog-template/template_catalog/catalog.json",
-  routes: [],
+    "https://eurodatacube.github.io/eodash-catalog/RACE/catalog.json",
   brand: {
     name: "Dashboard",
     font: {
       family: "Poppins",
     },
+    logo: "/logo.png",
+    footerText:"eodash instance template",
     theme: {
       colors: {
         primary: "#004170",
@@ -31,31 +31,43 @@ export default createEodash((_store) => ({
         name: "EodashMap",
       },
     },
+    loading: {
+      id: Symbol(),
+      type: "web-component",
+      widget: {
+        // https://uiball.com/ldrs/
+        link: "https://cdn.jsdelivr.net/npm/ldrs/dist/auto/mirage.js",
+        tagName: "l-mirage",
+        properties: {
+          class: "align-self-center justify-self-center",
+          size: "120",
+          speed: "2.5",
+          color: "#004170",
+        },
+      },
+    },
     widgets: [
+      information,
+      container,
       {
         id: Symbol(),
-        type: "internal",
-        title: "itemfilter",
-        layout: { x: 0, y: 0, w: 3, h: 12 },
         slidable: false,
+        title: "Tools",
+        layout: { x: 0, y: 0, w: 3, h: 12 },
         widget: {
-          name: "EodashItemFilter",
+          name: "List",
         },
+        type: "internal",
       },
       {
         id: Symbol(),
+        layout: { x: 4, y: 0, h: 4, w: 4 },
+        title: "Date Picker",
         type: "internal",
-        title: "datepicker",
-        layout: { x: 5, y: 11, w: 2, h: 1 },
-        slidable: false,
         widget: {
           name: "EodashDatePicker",
-          properties: {
-            inline: true,
-          },
         },
       },
-      basedOnWms,
     ],
   },
-}));
+});

types.d.ts → src/types.d.ts

@@ -1,5 +1,5 @@
 declare interface Window {
-  eodashStore?: import("@edoash/eodash").EodashStore;
+  eodashStore?: import("@eodash/eodash").EodashStore;
 }
 declare module "@eox/stacinfo" {
   export const EOxStacInfo: CustomElementConstructor;

src/widgets/List.vue

@@ -0,0 +1,29 @@
+<template>
+  <v-card
+    class="mx-auto d-flex flex-column overflow-auto fill-height"
+    color="transparent"
+  >
+    <v-list lines="one" class="overflow-auto">
+      <v-list-item
+        v-for="(link, idx) in stac"
+        :key="idx"
+        @click="getSelected(idx)"
+        :title="link.title"
+      >
+      </v-list-item>
+    </v-list>
+  </v-card>
+</template>
+<script setup lang="ts">
+import { store } from "@eodash/eodash";
+import { storeToRefs } from "pinia";
+
+const { stac, selectedStac } = storeToRefs(store.stac.useSTAcStore());
+const { loadSelectedSTAC } = store.stac.useSTAcStore();
+
+const getSelected = async (idx) => {
+  const link = stac.value![idx];
+  await loadSelectedSTAC(link.href);
+  console.log(selectedStac.value);
+};
+</script>

tsconfig.json

@@ -11,5 +11,5 @@
     "moduleResolution": "node"
   },
   "exclude": ["node_modules", ".eodash", "public", "dist"],
-  "include": ["src/**/**.js", "types.d.ts"]
+  "include": ["src/**/**.js", "src/**/**.vue", "src/**.d.ts"]
 }