@eodash/eodash 5.0.0-processing → 5.0.0-rc.1

package/core/client/eodash.js

@@ -1,5 +1,5 @@
+import { mdiViewDashboard, mdiViewDashboardVariant } from "@mdi/js";
 import { reactive } from "vue";
-import { currentUrl } from "./store/States";
 
 /**
  * Reactive Edoash Instance Object. provided globally in the app, and used as an
@@ -10,181 +10,423 @@ import { currentUrl } from "./store/States";
 export const eodash = reactive({
   id: "demo",
   stacEndpoint:
-    // "https://eodashcatalog.eox.at/test-style/trilateral/catalog.json",
+    // "https://eurodatacube.github.io/eodash-catalog/RACE/catalog.json",
     // "https://gtif-cerulean.github.io/catalog/cerulean/catalog.json",
-    "https://santilland.github.io/process_example/catalog.json",
+    "https://eodashcatalog.eox.at/samplecatalog/samples/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",
     theme: {
       colors: {
-        primary: "#fff",
-        secondary: "#fff",
-        surface: "#fff",
+        primary: "#002742",
+        secondary: "#0071C2",
+        surface: "#ffff",
+      },
+      variables: {
+        "surface-opacity": 0.6,
+        "primary-opacity": 0.8,
       },
     },
     footerText: "Demo configuration of eodash client",
   },
-  template: {
-    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",
+  templates: {
+    light: {
+      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: Symbol(),
-      type: "internal",
-      widget: {
-        name: "EodashMap",
-        properties: {
-          enableCompare: true,
+      background: {
+        id: Symbol(),
+        type: "internal",
+        widget: {
+          name: "EodashMap",
+          properties: {
+            enableCompare: true,
+          },
         },
       },
+      widgets: [
+        {
+          id: Symbol(),
+          type: "internal",
+          title: "Tools",
+          layout: { x: 0, y: 0, w: 3, h: 1 },
+          widget: {
+            name: "EodashTools",
+            properties: {
+              layoutTarget: "expert",
+              layoutIcon: mdiViewDashboardVariant,
+              itemFilterConfig: {
+                resultType: "cards",
+                filtersTitle: "",
+                style: "--padding: 72px",
+                filterProperties: [],
+                resultsTitle: "Explore more indicators",
+                subTitleProperty: "subtitle",
+                imageProperty: "thumbnail",
+              },
+            },
+          },
+        },
+        {
+          defineWidget: (selectedSTAC) => {
+            return selectedSTAC
+              ? {
+                  id: "layercontrol-light",
+                  type: "internal",
+                  title: "Layers",
+                  layout: { x: 0, y: 1, w: 3, h: 3 },
+                  widget: {
+                    name: "EodashLayerControl",
+                    properties: {
+                      slider: false,
+                      tools: ["datetime", "info", "legend"],
+                      cssVars: {
+                        "--list-padding": "0",
+                        "--tools-button-visibility": "none",
+                        "--layer-input-visibility": "none",
+                        "--layer-type-visibility": "none",
+                        "--padding": "16px",
+                        "--padding-vertical": "16px",
+                        "--layer-tools-button-visibility": "none",
+                        "--layer-summary-visibility": "none",
+                      },
+                    },
+                  },
+                }
+              : null;
+          },
+        },
+        {
+          defineWidget: (selectedSTAC) => {
+            return selectedSTAC
+              ? {
+                  id: "stacinfo-light",
+                  type: "internal",
+                  title: "Information",
+                  layout: { x: 9, y: 0, w: 3, h: 6 },
+                  widget: {
+                    name: "EodashStacInfo",
+                    properties: {
+                      tags: [],
+                      header: [],
+                      footer: [],
+                      body: ["description"],
+                      styleOverride: "",
+                      featured: [],
+                    },
+                  },
+                }
+              : null;
+          },
+        },
+        {
+          defineWidget: (selectedSTAC) => {
+            return selectedSTAC
+              ? {
+                  id: "Datepicker",
+                  type: "internal",
+                  layout: { x: 5, y: 8, w: 2, h: 4 },
+                  title: "Date",
+                  widget: {
+                    name: "EodashDatePicker",
+                    properties: {
+                      hideArrows: true,
+                      hideInputField: true,
+                      hintText: `<b>Hint:</b> closest available date is displayed <br />
+                            on map (see Analysis Layers)`,
+                    },
+                  },
+                }
+              : null;
+          },
+        },
+      ],
     },
-    widgets: [
-      {
+    expert: {
+      loading: {
         id: Symbol(),
-        type: "internal",
-        title: "Indicators",
-        layout: { x: 0, y: 0, w: 3, h: 6 },
+        type: "web-component",
         widget: {
-          name: "EodashItemFilter",
+          // https://uiball.com/ldrs/
+          link: "https://cdn.jsdelivr.net/npm/ldrs/dist/auto/mirage.js",
+          tagName: "l-mirage",
           properties: {
-            enableCompare: true,
-            aggregateResults: "collection_group",
+            class: "align-self-center justify-self-center",
+            size: "120",
+            speed: "2.5",
+            color: "#004170",
           },
         },
       },
-      {
+      background: {
         id: Symbol(),
         type: "internal",
-        title: "Layer Control",
-        layout: { x: 0, y: 6, w: 3, h: 6 },
         widget: {
-          name: "EodashLayerControl",
+          name: "EodashMap",
+          properties: {
+            enableCompare: true,
+          },
         },
       },
-      /*
-      {
-        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",
-                  },
+      widgets: [
+        {
+          id: Symbol(),
+          type: "internal",
+          title: "Tools",
+          layout: { x: 0, y: 0, w: 3, h: 1 },
+          widget: {
+            name: "EodashTools",
+            properties: {
+              layoutTarget: "light",
+              layoutIcon: mdiViewDashboard,
+              itemFilterConfig: {
+                resultType: "cards",
+                subTitleProperty: "subtitle",
+                imageProperty: "thumbnail",
+                aggregateResults: "collection_group",
+                style: {
+                  "--form-flex-direction": "row",
                 },
-              }
-            : null;
+              },
+            },
+          },
         },
-      },
-      */
-      {
-        defineWidget: (selectedSTAC) => {
-          return selectedSTAC
-            ? {
-                id: "Information",
-                title: "Information",
-                layout: { x: 9, y: 0, w: 3, h: 6 },
-                type: "web-component",
-                widget: {
-                  link: async () => await import("@eox/stacinfo"),
-                  properties: {
-                    for: currentUrl,
-                    allowHtml: "true",
-                    styleOverride: `.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;}`,
-                    header: '["title"]',
-                    tags: '["themes"]',
-                    subheader: "[]",
-                    properties: '["satellite","sensor","agency","extent"]',
-                    featured: '["description","providers","assets","links"]',
-                    footer: '["sci:citation"]',
+        {
+          id: Symbol(),
+          type: "internal",
+          title: "Layers",
+          layout: { x: 0, y: 1, w: 3, h: 6 },
+          widget: {
+            name: "EodashLayerControl",
+          },
+        },
+        {
+          defineWidget: (selectedSTAC) => {
+            return selectedSTAC
+              ? {
+                  id: "Information",
+                  title: "Information",
+                  layout: { x: 9, y: 0, w: 3, h: 6 },
+                  type: "internal",
+                  widget: {
+                    name: "EodashStacInfo",
+                    properties: {
+                      showIndicatorsBtn: false,
+                      showLayoutSwitcher: false,
+                    },
                   },
-                  tagName: "eox-stacinfo",
-                },
-              }
-            : null;
+                }
+              : null;
+          },
         },
-      },
-      {
-        defineWidget: (selectedSTAC) => {
-          return selectedSTAC
-            ? {
-                id: "Datepicker",
-                type: "internal",
-                layout: { x: 5, y: 10, w: 1, h: 1 },
-                title: "Datepicker",
-                widget: {
-                  name: "EodashDatePicker",
-                  properties: {
-                    hintText: `<b>Hint:</b> closest available date is displayed <br />
-                      on map (see Analysis Layers)`,
+        {
+          defineWidget: (selectedSTAC) => {
+            return selectedSTAC
+              ? {
+                  id: "Datepicker",
+                  type: "internal",
+                  layout: { x: 5, y: 8, w: 2, h: 4 },
+                  title: "Date",
+                  widget: {
+                    name: "EodashDatePicker",
+                    properties: {
+                      hintText: `<b>Hint:</b> closest available date is displayed <br />
+                            on map (see Analysis Layers)`,
+                    },
                   },
-                },
-              }
-            : null;
+                }
+              : null;
+          },
+        },
+        {
+          defineWidget: (selected) => {
+            return selected
+              ? {
+                  id: "Buttons",
+                  layout: { x: 8, y: 0, w: 1, h: 2 },
+                  title: "Buttons",
+                  type: "internal",
+                  widget: {
+                    name: "EodashMapBtns",
+                  },
+                }
+              : null;
+          },
+        },
+        {
+          defineWidget: (selectedSTAC) =>
+            selectedSTAC?.links.some((l) => l.rel === "service")
+              ? {
+                  id: Symbol(),
+                  type: "internal",
+                  title: "Processes",
+                  layout: { x: 0, y: 7, w: 3, h: 5 },
+                  widget: {
+                    name: "EodashProcess",
+                  },
+                }
+              : null,
+        },
+      ],
+    },
+    compare: {
+      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",
+          },
         },
       },
-      {
-        defineWidget: (selected) => {
-          return selected
-            ? {
-                id: "Buttons",
-                layout: { x: 8, y: 0, w: 1, h: 1 },
-                title: "Buttons",
-                type: "internal",
-                widget: {
-                  name: "EodashMapBtns",
-                },
-              }
-            : null;
+      background: {
+        id: Symbol(),
+        type: "internal",
+        widget: {
+          name: "EodashMap",
+          properties: {
+            enableCompare: true,
+          },
         },
       },
-      {
-        defineWidget: (indicator) => {
-          return indicator
-            ? {
-                id: "process",
-                layout: { x: 9, y: 6, w: 3, h: 6 },
-                title: "Process",
-                type: "internal",
-                widget: {
-                  name: "EodashProcess",
+      widgets: [
+        {
+          id: Symbol(),
+          type: "internal",
+          title: "Tools",
+          layout: { x: 0, y: 0, w: 3, h: 1 },
+          widget: {
+            name: "EodashTools",
+            properties: {
+              layoutTarget: "expert",
+              layoutIcon: mdiViewDashboardVariant,
+              itemFilterConfig: {
+                cssVars: {
+                  "--form-flex-direction": "row",
                 },
-              }
-            : null;
+              },
+            },
+          },
         },
-      },
-    ],
+        // compare indicators
+        {
+          id: Symbol(),
+          type: "internal",
+          title: "Tools",
+          layout: { x: 9, y: 0, w: 3, h: 1 },
+          widget: {
+            name: "EodashTools",
+            properties: {
+              showLayoutSwitcher: false,
+              indicatorBtnText: "Select an indicator to compare",
+              itemFilterConfig: {
+                enableCompare: true,
+                // resultsTitle:"Select an indicator to compare",
+                filtersTitle: "Select an indicator to compare",
+                // filterProperties: [],
+                cssVars: {
+                  "--form-flex-direction": "row",
+                },
+              },
+            },
+          },
+        },
+        {
+          id: Symbol(),
+          type: "internal",
+          title: "Layers",
+          layout: { x: 0, y: 1, w: 3, h: 6 },
+          widget: {
+            name: "EodashLayerControl",
+          },
+        },
+        {
+          id: Symbol(),
+          title: "Comparison Layers",
+          layout: { x: 9, y: 1, w: 3, h: 6 },
+          type: "internal",
+          widget: {
+            name: "EodashLayerControl",
+            properties: {
+              map: "second",
+            },
+          },
+        },
+        {
+          defineWidget: (selectedSTAC) =>
+            selectedSTAC?.links.some((l) => l.rel === "service")
+              ? {
+                  id: Symbol(),
+                  type: "internal",
+                  title: "Processes",
+                  layout: { x: 0, y: 7, w: 3, h: 5 },
+                  widget: {
+                    name: "EodashProcess",
+                  },
+                }
+              : null,
+        },
+        {
+          defineWidget: (selected) => {
+            return selected
+              ? {
+                  id: "Buttons",
+                  layout: { x: 8, y: 0, w: 1, h: 2 },
+                  title: "Buttons",
+                  type: "internal",
+                  widget: {
+                    name: "EodashMapBtns",
+                    properties: {
+                      compareIndicators: false,
+                    },
+                  },
+                }
+              : null;
+          },
+        },
+        {
+          defineWidget: (selectedSTAC) => {
+            return selectedSTAC
+              ? {
+                  id: "Datepicker",
+                  type: "internal",
+                  layout: { x: 5, y: 8, w: 2, h: 4 },
+                  title: "Date",
+                  widget: {
+                    name: "EodashDatePicker",
+                    properties: {
+                      hintText: `<b>Hint:</b> closest available date is displayed <br />
+                                on map (see Analysis Layers)`,
+                    },
+                  },
+                }
+              : null;
+          },
+        },
+      ],
+    },
   },
 });