@eodash/eodash 5.0.0 → 5.1.0

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@eodash/eodash",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "type": "module",
   "types": "./dist/types/core/client/types.d.ts",
   "files": [
     "core/client",
+    "templates",
     "widgets",
     "dist"
   ],
@@ -18,6 +19,9 @@
       ],
       "config": [
         "./dist/node/types.d.ts"
+      ],
+      "templates": [
+        "./dist/types/templates/index.d.ts"
       ]
     }
   },
@@ -28,20 +32,22 @@
     "./webcomponent": {
       "default": "./dist/client/eo-dash.js"
     },
-    "./webcomponent.css": "./dist/client/eo-dash.css",
+    "./templates": {
+      "default": "./dist/client/templates.js"
+    },
     "./config": {
       "default": "./dist/node/main.js"
     }
   },
   "browser": "./core/client/main.js",
   "scripts": {
-    "start": "npx eodash dev --entryPoint core/client/eodash.js",
+    "start": "npx eodash dev --entryPoint templates/baseConfig.js",
     "prepare": "rollup -c",
     "prepack": "npm run build:lib && npm run build:types",
-    "dev": "npx eodash dev --entryPoint core/client/eodash.js",
-    "dev:lib": "npx eodash dev --entryPoint core/client/eodash.js --lib",
-    "build": "npx eodash build --entryPoint core/client/eodash.js",
-    "build:lib": "npx eodash build --entryPoint core/client/eodash.js --lib --outDir dist/client",
+    "dev": "npx eodash dev --entryPoint templates/baseConfig.js",
+    "dev:lib": "npx eodash dev --entryPoint templates/baseConfig.js --lib",
+    "build": "npx eodash build --entryPoint templates/baseConfig.js",
+    "build:lib": "npx eodash build --entryPoint false --lib --outDir dist/client",
     "build:cli": "rollup -c",
     "build:types": "vue-tsc --declaration  --emitDeclarationOnly && tsc-alias",
     "check": "vue-tsc --noEmit --skipLibCheck && eslint .",
@@ -59,66 +65,68 @@
     "docs:generate": "npm run build:cli && npm run build:types && typedoc --options typedoc.config.json"
   },
   "dependencies": {
-    "@eox/chart": "^0.4.0",
-    "@eox/drawtools": "^0.14.2",
-    "@eox/itemfilter": "^1.8.0",
-    "@eox/jsonform": "^0.16.1",
-    "@eox/layercontrol": "^0.29.1",
-    "@eox/layout": "^0.3.0",
-    "@eox/map": "^1.20.0",
-    "@eox/stacinfo": "^0.6.2",
-    "@eox/timecontrol": "^0.12.3",
+    "@eox/chart": "^1.0.1",
+    "@eox/drawtools": "^1.1.2",
+    "@eox/itemfilter": "^1.10.3",
+    "@eox/jsonform": "^1.3.2",
+    "@eox/layercontrol": "^1.1.2",
+    "@eox/layout": "^1.0.0",
+    "@eox/map": "^1.24.2",
+    "@eox/stacinfo": "^1.0.1",
+    "@eox/timecontrol": "^1.0.1",
+    "@eox/ui": "^0.4.0",
     "@mdi/js": "^7.4.47",
-    "@vitejs/plugin-vue": "^5.2.3",
-    "@vueuse/core": "^12.0.0",
+    "@vitejs/plugin-vue": "^5.2.4",
+    "@vueuse/core": "^13.6.0",
     "animated-details": "gist:2912bb049fa906671807415eb0e87188",
-    "axios": "^1.8.4",
-    "axios-cache-interceptor": "^1.7.0",
+    "axios": "^1.11.0",
+    "axios-cache-interceptor": "^1.8.0",
     "color-legend-element": "^1.3.0",
-    "commander": "^12.1.0",
-    "core-js": "^3.41.0",
+    "commander": "^14.0.0",
+    "core-js": "^3.44.0",
+    "dotenv": "^17.2.1",
+    "hyparquet": "^1.17.1",
     "loglevel": "^1.9.2",
     "mustache": "^4.2.0",
-    "pinia": "^3.0.1",
-    "sass": "^1.86.0",
-    "stac-js": "^0.0.9",
+    "pinia": "^3.0.3",
+    "sass": "^1.89.2",
+    "stac-js": "^0.1.6",
     "stac-ts": "^1.0.4",
     "v-calendar": "3.0.0",
     "vega": "^5.33.0",
     "vega-embed": "^6.29.0",
     "vega-lite": "^5.23.0",
-    "vite": "^6.2.3",
-    "vite-plugin-vuetify": "^2.1.0",
-    "vue": "^3.5.0",
-    "vuetify": "^3.7.18",
+    "vite": "^6.3.5",
+    "vite-plugin-vuetify": "^2.1.1",
+    "vue": "^3.5.17",
+    "vuetify": "^3.9.2",
     "webfontloader": "^1.6.28"
   },
   "devDependencies": {
-    "@babel/types": "^7.27.0",
+    "@babel/types": "^7.28.2",
     "@eox/eslint-config": "^2.0.0",
-    "@pinia/testing": "^0.1.7",
+    "@pinia/testing": "^1.0.2",
     "@types/json-schema": "^7.0.15",
-    "@types/mustache": "^4.2.5",
-    "@types/node": "^22.13.13",
+    "@types/mustache": "^4.2.6",
+    "@types/node": "^24.1.0",
     "@types/openlayers": "^4.6.23",
     "@types/webfontloader": "^1.6.38",
-    "cypress": "^13.17.0",
-    "eslint": "^9.23.0",
+    "cypress": "^14.5.3",
+    "eslint": "^9.32.0",
     "eslint-plugin-vue": "^9.33.0",
-    "pkg-pr-new": "^0.0.39",
-    "prettier": "^3.5.3",
-    "rollup": "^4.37.0",
+    "pkg-pr-new": "^0.0.54",
+    "prettier": "^3.6.2",
+    "rollup": "^4.46.1",
     "terminate": "^2.8.0",
-    "tsc-alias": "^1.8.11",
-    "typedoc": "^0.28.1",
-    "typedoc-plugin-markdown": "^4.6.0",
+    "tsc-alias": "^1.8.16",
+    "typedoc": "^0.28.8",
+    "typedoc-plugin-markdown": "^4.7.1",
     "typedoc-plugin-vue": "^1.5.0",
     "typedoc-vitepress-theme": "^1.1.2",
-    "typescript": "^5.8.2",
-    "unplugin-fonts": "^1.3.1",
+    "typescript": "^5.8.3",
     "vitepress": "^1.6.3",
-    "vitest": "^1.6.1",
-    "vue-tsc": "2.2.0"
+    "vitest": "^3.2.4",
+    "vue-tsc": "3.0.1"
   },
   "engines": {
     "node": ">=20.15.1"

package/templates/baseConfig.js

@@ -0,0 +1,68 @@
+import { deepmergeInto } from "deepmerge-ts";
+import light from "./light";
+import expert from "./expert";
+import compare from "./compare";
+
+/** @type {import("@/types").Eodash} */
+const baseConfig = {
+  id: "demo",
+  options: {
+    // useSubCode: true,
+  },
+  stacEndpoint:
+    "https://esa-eodashboards.github.io/eodashboard-catalog/trilateral/catalog.json",
+  brand: {
+    noLayout: true,
+    name: "Demo",
+    font: {
+      headers: {
+        family: "Open Sans",
+        link: "https://eox.at/fonts/opensans/opensans.css",
+      },
+      body: {
+        family: "Sintony",
+        link: "https://eox.at/fonts/sintony/sintony.css",
+      },
+    },
+    theme: {
+      colors: {
+        primary: "#002742",
+        secondary: "#0071C2",
+        surface: "#ffff",
+      },
+      variables: {
+        "surface-opacity": 0.8,
+        "primary-opacity": 0.8,
+      },
+      // Bank-Wong palette
+      collectionsPalette: [
+        "#009E73",
+        "#E69F00",
+        "#56B4E9",
+        "#009E73",
+        "#F0E442",
+        "#0072B2",
+        "#D55E00",
+        "#CC79A7",
+        "#994F00",
+      ],
+    },
+    footerText: "Demo configuration of eodash client",
+  },
+  templates: {
+    light,
+    expert,
+    compare,
+  },
+};
+
+/**
+ * @param {Partial<import("@/types").Eodash>} config
+ */
+export const getBaseConfig = (config) => {
+  const merged = /** @type {import("@/types").Eodash} */ ({});
+  deepmergeInto(merged, baseConfig, config || {});
+  return merged;
+};
+
+export default baseConfig;

package/templates/compare.js

@@ -0,0 +1,162 @@
+import { includesProcess } from "@/store/actions";
+
+/** @type {import("@/types").Template} */
+export default {
+  gap: 16,
+  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",
+      },
+    },
+  },
+  background: {
+    id: "background-map",
+    type: "internal",
+    widget: {
+      name: "EodashMap",
+      properties: {
+        enableCompare: true,
+      },
+    },
+  },
+  widgets: [
+    {
+      id: "Tools",
+      type: "internal",
+      title: "Tools",
+      layout: { x: 0, y: 0, w: "3/3/2", h: 1 },
+      widget: {
+        name: "EodashTools",
+        properties: {
+          showLayoutSwitcher: false,
+          itemFilterConfig: {
+            resultType: "cards",
+            filtersTitle: "Select an indicator",
+            resultsTitle: "",
+            subTitleProperty: "subtitle",
+            imageProperty: "thumbnail",
+          },
+        },
+      },
+    },
+    // compare indicators
+    {
+      id: "CompareTools",
+      type: "internal",
+      title: "Tools",
+      layout: { x: "9/9/10", y: 0, w: "3/3/2", h: 1 },
+      widget: {
+        name: "EodashTools",
+        properties: {
+          showLayoutSwitcher: false,
+          indicatorBtnText: "Select second indicator",
+          itemFilterConfig: {
+            enableCompare: true,
+            resultType: "cards",
+            filtersTitle: "Select an indicator to compare",
+            resultsTitle: "",
+            subTitleProperty: "subtitle",
+            imageProperty: "thumbnail",
+          },
+        },
+      },
+    },
+    {
+      id: "layercontrol",
+      type: "internal",
+      title: "Layers",
+      layout: { x: 0, y: 1, w: "3/3/2", h: 5 },
+      widget: {
+        name: "EodashLayerControl",
+      },
+    },
+    {
+      id: "CompareLayerControl",
+      title: "Comparison Layers",
+      layout: { x: "9/9/10", y: 1, w: "3/3/2", h: 5 },
+      type: "internal",
+      widget: {
+        name: "EodashLayerControl",
+        properties: {
+          map: "second",
+        },
+      },
+    },
+    {
+      defineWidget: (selectedSTAC) =>
+        includesProcess(selectedSTAC) && {
+          id: "Process",
+          type: "internal",
+          title: "Processes",
+          layout: { x: 0, y: 6, w: "3/3/2", h: 5 },
+          widget: {
+            name: "EodashProcess",
+          },
+        },
+    },
+    {
+      defineWidget: (_, updatedCompareStac) =>
+        includesProcess(updatedCompareStac, true) && {
+          id: "CompareMapProcess",
+          type: "internal",
+          title: "Processes",
+          layout: { x: 9, y: 6, w: "3/3/2", h: 5 },
+          widget: {
+            name: "EodashProcess",
+            properties: {
+              enableCompare: true,
+            },
+          },
+        },
+    },
+    {
+      defineWidget: (selected) => {
+        return selected
+          ? {
+              id: "Buttons",
+              layout: { x: "8/8/9", y: 0, w: 1, h: 2 },
+              title: "Buttons",
+              type: "internal",
+              widget: {
+                name: "EodashMapBtns",
+                properties: {
+                  compareIndicators: {
+                    fallbackTemplate: "expert",
+                  },
+                },
+              },
+            }
+          : null;
+      },
+    },
+    {
+      defineWidget: (selectedSTAC) => {
+        return selectedSTAC
+          ? {
+              id: "expert-Datepicker",
+              type: "internal",
+              layout: { x: 4, y: 7, w: 4, h: 5 },
+              title: "Date",
+              widget: {
+                name: "EodashDatePicker",
+                properties: {
+                  hintText: `<b>Hint:</b> closest available date is displayed <br />
+                                on map (see Analysis Layers)`,
+                  toggleCalendar: true,
+                },
+              },
+            }
+          : null;
+      },
+    },
+  ],
+};

package/templates/expert.js

@@ -0,0 +1,123 @@
+import { mdiViewDashboard } from "@mdi/js";
+import { includesProcess } from "@/store/actions";
+
+/** @type {import("@/types").Template} */
+export default {
+  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",
+      },
+    },
+  },
+  background: {
+    id: "background-map",
+    type: "internal",
+    widget: {
+      name: "EodashMap",
+      properties: {
+        enableCompare: true,
+      },
+    },
+  },
+  widgets: [
+    {
+      id: "Tools",
+      type: "internal",
+      title: "Tools",
+      layout: { x: 0, y: 0, w: "3/3/2", h: 1 },
+      widget: {
+        name: "EodashTools",
+        properties: {
+          layoutTarget: "light",
+          layoutIcon: mdiViewDashboard,
+          itemFilterConfig: {
+            resultType: "cards",
+            subTitleProperty: "subtitle",
+            imageProperty: "thumbnail",
+            aggregateResults: "collection_group",
+          },
+        },
+      },
+    },
+    {
+      id: "Layercontrol",
+      type: "internal",
+      title: "Layers",
+      layout: { x: 0, y: 1, w: "3/3/2", h: 11 },
+      widget: {
+        name: "EodashLayerControl",
+      },
+    },
+    {
+      defineWidget: (selectedSTAC) => {
+        return selectedSTAC
+          ? {
+              id: "Information",
+              title: "Information",
+              layout: { x: "9/9/10", y: 0, w: "3/3/2", h: 6 },
+              type: "internal",
+              widget: {
+                name: "EodashStacInfo",
+              },
+            }
+          : null;
+      },
+    },
+    {
+      defineWidget: (selectedSTAC) => {
+        return selectedSTAC
+          ? {
+              id: "expert-datepicker",
+              type: "internal",
+              layout: { x: 4, y: 7, w: 4, h: 5 },
+              title: "Date",
+              widget: {
+                name: "EodashDatePicker",
+                properties: {
+                  hintText: `<b>Hint:</b> closest available date is displayed <br />
+                            on map (see Analysis Layers)`,
+                  toggleCalendar: true,
+                },
+              },
+            }
+          : null;
+      },
+    },
+    {
+      defineWidget: (selected) => {
+        return selected
+          ? {
+              id: "Buttons",
+              layout: { x: "8/8/9", y: 0, w: 1, h: 2 },
+              title: "Buttons",
+              type: "internal",
+              widget: {
+                name: "EodashMapBtns",
+              },
+            }
+          : null;
+      },
+    },
+    {
+      defineWidget: (selectedSTAC) =>
+        includesProcess(selectedSTAC) && {
+          id: "Processes",
+          type: "internal",
+          title: "Processes",
+          layout: { x: "9/9/10", y: 6, w: "3/3/2", h: 5 },
+          widget: {
+            name: "EodashProcess",
+          },
+        },
+    },
+  ],
+};

package/templates/index.js

@@ -0,0 +1,8 @@
+import { getBaseConfig } from "./baseConfig";
+
+export { default as light } from "./light";
+export { default as expert } from "./expert";
+export { default as compare } from "./compare";
+export { getBaseConfig };
+
+export default getBaseConfig;

package/templates/light.js

@@ -0,0 +1,130 @@
+import { mdiViewDashboardVariant } from "@mdi/js";
+
+/** @type {import("@/types").Template} */
+export default {
+  gap: 16,
+  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",
+      },
+    },
+  },
+  background: {
+    id: "background-map",
+    type: "internal",
+    widget: {
+      name: "EodashMap",
+      properties: {
+        enableCompare: true,
+      },
+    },
+  },
+  widgets: [
+    {
+      id: "tools-light",
+      type: "internal",
+      title: "Tools",
+      layout: { x: 0, y: 0, w: "3/3/2", h: 1 },
+      widget: {
+        name: "EodashTools",
+        properties: {
+          layoutTarget: "expert",
+          layoutIcon: mdiViewDashboardVariant,
+          itemFilterConfig: {
+            resultType: "cards",
+            filtersTitle: "",
+            filterProperties: [],
+            resultsTitle: "Explore more indicators",
+            subTitleProperty: "subtitle",
+            imageProperty: "thumbnail",
+            cssVars: {
+              "--filter-display": "none",
+            },
+          },
+        },
+      },
+    },
+    {
+      defineWidget: (selectedSTAC) => {
+        return selectedSTAC
+          ? {
+              id: "layercontrol-light",
+              type: "internal",
+              title: "Layers",
+              layout: { x: 0, y: 1, w: "3/3/2", h: 10 },
+              widget: {
+                name: "EodashLayerControl",
+                properties: {
+                  slider: false,
+                  tools: ["datetime", "info", "legend"],
+                  cssVars: {
+                    "--list-padding": "-8px",
+                    "--tools-button-visibility": "none",
+                    "--layer-input-visibility": "none",
+                    "--layer-type-visibility": "none",
+                    "--padding": "8px",
+                    "--padding-vertical": "16px",
+                    "--layer-tools-button-visibility": "none",
+                    "--layer-toggle-button-visibility": "flex",
+                    "--layer-summary-visibility": "none",
+                    "--layer-visibility": "none",
+                  },
+                },
+              },
+            }
+          : null;
+      },
+    },
+    {
+      defineWidget: (selectedSTAC) => {
+        return selectedSTAC
+          ? {
+              id: "stacinfo-light",
+              type: "internal",
+              title: "Information",
+              layout: { x: "9/9/10", y: 0, w: "3/3/2", h: 12 },
+              widget: {
+                name: "EodashStacInfo",
+                properties: {
+                  tags: [],
+                  header: [],
+                  footer: [],
+                  body: ["description"],
+                  styleOverride: "",
+                  featured: [],
+                },
+              },
+            }
+          : null;
+      },
+    },
+    {
+      defineWidget: (selectedSTAC) => {
+        return selectedSTAC
+          ? {
+              id: "light-datepicker",
+              type: "internal",
+              layout: { x: 4, y: 7, w: 4, h: 5 },
+              title: "Date",
+              widget: {
+                name: "EodashDatePicker",
+                properties: {
+                  hintText: `<b>Hint:</b> closest available date is displayed <br />
+                            on map (see Analysis Layers)`,
+                },
+              },
+            }
+          : null;
+      },
+    },
+  ],
+};