@eodash/eodash 5.0.0-alpha.2.9 → 5.0.0-rc

package/widgets/EodashStacInfo.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="flex-grow-1 fill-height overflow-auto">
+    <eox-stacinfo
+      .for="currentUrl"
+      .allowHtml="allowHtml"
+      .body="body"
+      .featured="featured"
+      .footer="footer"
+      .styleOverride="styleOverride"
+      .header="header"
+      .subheader="subheader"
+      .tags="tags"
+      style="--color-primary-lighter: none"
+    >
+    </eox-stacinfo>
+  </div>
+</template>
+
+<script setup>
+import "@eox/stacinfo";
+import { currentUrl } from "@/store/states";
+
+const {
+  allowHtml,
+  featured,
+  footer,
+  header,
+  body,
+  styleOverride,
+  subheader,
+  tags,
+} = defineProps({
+  allowHtml: {
+    type: Boolean,
+    default: true,
+  },
+
+  styleOverride: {
+    type: String,
+    default: `
+.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: {
+    type: Array,
+    default: () => ["title"],
+  },
+  tags: {
+    type: Array,
+    default: () => ["themes"],
+  },
+  subheader: {
+    type: Array,
+    default: () => [],
+  },
+  body: {
+    type: Array,
+    default: () => ["satellite", "sensor", "agency", "extent"],
+  },
+  featured: {
+    type: Array,
+    default: () => ["description", "providers", "assets", "links"],
+  },
+  footer: {
+    type: Array,
+    default: () => ["sci:citation"],
+  },
+});
+</script>

package/widgets/EodashTools.vue

@@ -0,0 +1,83 @@
+<template>
+  <div
+    ref="rootEl"
+    class="d-flex flex-column fill-height overflow-auto bg-primary"
+  >
+    <div class="d-flex flex-row justify-space-between pa-4 align-center">
+      <v-btn
+        v-if="props.showIndicatorsBtn"
+        color="secondary"
+        class="text-none py-2 px-4"
+        :append-icon="[mdiPlus]"
+        :text="indicatorBtnText"
+        @click="dialog = !dialog"
+      >
+      </v-btn>
+      <EodashLayoutSwitcher
+        v-if="props.showLayoutSwitcher"
+        :target="layoutTarget"
+        :icon="layoutIcon"
+      />
+    </div>
+    <PopUp
+      v-model="dialog"
+      :maxWidth="popupWidth"
+      :width="popupWidth"
+      :max-height="popupHeight"
+      :height="popupHeight"
+    >
+      <EodashItemFilter
+        class="pa-4"
+        results-title=""
+        v-bind="props.itemFilterConfig"
+        @select="dialog = !dialog"
+      />
+    </PopUp>
+  </div>
+</template>
+
+<script setup>
+import PopUp from "^/PopUp.vue";
+import EodashItemFilter from "^/EodashItemFilter.vue";
+import EodashLayoutSwitcher from "^/EodashLayoutSwitcher.vue";
+import { mdiPlus, mdiViewDashboard } from "@mdi/js";
+import { computed, ref } from "vue";
+import { makePanelTransparent } from "@/composables";
+import { useDisplay } from "vuetify/lib/framework.mjs";
+
+const dialog = ref(false);
+
+const { smAndDown } = useDisplay();
+const popupWidth = computed(() => (smAndDown.value ? "80%" : "1500px"));
+const popupHeight = computed(() => (smAndDown.value ? "90%" : "800px"));
+
+const props = defineProps({
+  showIndicatorsBtn: {
+    type: Boolean,
+    default: true,
+  },
+  showLayoutSwitcher: {
+    type: Boolean,
+    default: true,
+  },
+  layoutTarget: {
+    type: String,
+    default: "light",
+  },
+  // mdi/js icon
+  layoutIcon: {
+    type: String,
+    default: mdiViewDashboard,
+  },
+  indicatorBtnText: {
+    type: String,
+    default: "Select indicator",
+  },
+  itemFilterConfig: {
+    type: Object,
+    default: () => {},
+  },
+});
+const rootEl = ref(null);
+makePanelTransparent(rootEl);
+</script>

package/widgets/ExportState.vue

@@ -1,17 +1,17 @@
 <template>
   <PopUp v-model="dialog">
-    <v-card>
-      <v-card-title class="bg-primary">
+    <v-card style="max-height: 498px">
+      <v-card-title class="bg-primary" style="max-height: 49px">
         <h5 class="text-h5">Storytelling map configuration</h5>
       </v-card-title>
 
-      <v-card-text class="py-5">
+      <v-card-text class="py-5 overflow-auto" style="height: 400px">
         <p class="text-body-2">
-          Copy and paste this code into the map layers field of the storytelling
-          editor:
+          Copy and paste this code into the map <b>layers field</b> of the
+          storytelling editor:
         </p>
         <div class="pa-3 code-block">
-          {{ getLayers() }}
+          {{ removeUnneededProperties(getLayers()) }}
         </div>
 
         <div style="position: absolute; bottom: 15px">
@@ -41,7 +41,7 @@
 
       <v-divider></v-divider>
 
-      <v-card-actions>
+      <v-card-actions style="max-height: 49px">
         <v-spacer></v-spacer>
         <v-btn variant="text" @click="dialog = !dialog"> Close </v-btn>
       </v-card-actions>
@@ -53,8 +53,9 @@ import { mdiClipboardCheckOutline, mdiContentCopy } from "@mdi/js";
 import PopUp from "./PopUp.vue";
 import { copyToClipBoard } from "@/utils";
 import { computed, ref } from "vue";
-import { getLayers as getLayerAction } from "@/store/Actions";
-import { mapPosition } from "@/store/States";
+import { getLayers as getLayerAction } from "@/store/actions";
+import { mapPosition } from "@/store/states";
+import { removeUnneededProperties } from "@/eodashSTAC/helpers";
 
 const dialog = defineModel({ type: Boolean, required: true, default: false });
 
@@ -88,19 +89,20 @@ const copyBtns = [
 
 const mapStepCode = computed(() => {
   const [x, y, z] = mapPosition.value;
-  const preTag = "### <!--{ layers=";
+  const preTag = "### <!" + "--{ layers=";
   const endTag = `zoom="${z}" center=[${[x, y]}] animationOptions={duration:500}}-->
 #### Tour step title
 Text describing the current step of the tour and why it is interesting what the map shows currently
 `;
-  return `${preTag}'${JSON.stringify(props.getLayers())}' ${endTag}`;
+  return `${preTag}'${JSON.stringify(removeUnneededProperties(props.getLayers()))}' ${endTag}`;
 });
 const mapEntryCode = computed(() => {
   const [x, y, z] = mapPosition.value;
   const preTag =
-    '## Map Example <!--{as="eox-map" style="width: 100%; height: 500px;" layers=';
+    "## Map Example <!" +
+    '--{as="eox-map" style="width: 100%; height: 500px;" layers=';
   const endTag = `zoom="${z}" center=[${[x, y]}] }-->`;
-  return `${preTag}'${JSON.stringify(props.getLayers())}' ${endTag}`;
+  return `${preTag}'${JSON.stringify(removeUnneededProperties(props.getLayers()))}' ${endTag}`;
 });
 </script>
 <style scoped>
@@ -108,5 +110,7 @@ const mapEntryCode = computed(() => {
   background-color: #ddd;
   font-family: monospace;
   font-size: small;
+  max-height: 200px;
+  overflow-y: auto;
 }
 </style>

package/widgets/PopUp.vue

@@ -1,8 +1,7 @@
 <template>
   <span>
     <v-dialog
-      max-width="500px"
-      max-height="500px"
+      v-bind="config"
       absolute
       scrollable
       scroll-strategy="block"
@@ -34,7 +33,30 @@ const props = defineProps({
     type: Object,
     default: undefined,
   },
+  maxWidth: {
+    type: String,
+    default: "500px",
+  },
+  maxHeight: {
+    type: String,
+    default: "500px",
+  },
+  width: {
+    type: String,
+    default: "500px",
+  },
+  height: {
+    type: String,
+    default: "500px",
+  },
 });
 
+const config = {
+  maxWidth: props.maxWidth,
+  maxHeight: props.maxHeight,
+  width: props.width,
+  height: props.height,
+};
+
 const [definedWidget] = useDefineWidgets([props?.widget]);
 </script>

package/core/client/SuspensedDashboard.ce.vue

@@ -1,105 +0,0 @@
-<template>
-  <v-app ref="vAppRef">
-    <Suspense>
-      <Dashboard :on-template-mount="setStylesFromHead" :config="config" />
-
-      <template #fallback>
-        <ErrorAlert @vue:mounted="setStylesFromHead()" v-model="error" />
-      </template>
-    </Suspense>
-  </v-app>
-</template>
-<script setup>
-import Dashboard from "@/views/Dashboard.vue";
-import { createApp, getCurrentInstance, onErrorCaptured, ref } from "vue";
-import { registerPlugins } from "@/plugins";
-import { eodashKey } from "@/utils/keys";
-import ErrorAlert from "@/components/ErrorAlert.vue";
-
-defineProps({
-  config: {
-    type: String,
-  },
-});
-
-/** @type {import("vue").Ref<import("vuetify/components").VApp | null>} */
-const vAppRef = ref(null);
-const app = createApp({});
-registerPlugins(app);
-
-const inst = getCurrentInstance();
-
-Object.assign(inst?.appContext ?? {}, app._context);
-
-//@ts-expect-error Property 'provides' does not exist on type 'ComponentInternalInstance'
-Object.assign(inst?.provides ?? {}, app._context.provides);
-
-/**
- * @param {import("vue").Ref<
- *   HTMLElement | import("vue").ComponentPublicInstance
- * >[]} [hiddenElements]
- */
-function setStylesFromHead(hiddenElements) {
-  const eodashShadowRoot = vAppRef.value?.$el.getRootNode();
-  const styleSheet = new CSSStyleSheet();
-  const head = document.querySelector("head");
-  let stylesStr = "";
-
-  Array.from(head?.children ?? []).forEach((child) => {
-    if (child.getAttribute("type") === "text/css") {
-      stylesStr += `\n ${child.innerHTML}`;
-      return;
-    }
-
-    if (
-      child.tagName == "LINK" &&
-      child.getAttribute("rel")?.includes("stylesheet")
-    ) {
-      eodashShadowRoot?.appendChild(child.cloneNode(true));
-    }
-  });
-
-  stylesStr += `\n
-      ${
-        //@ts-expect-error Property 'provides' does not exist on type 'ComponentInternalInstance'
-        /** @type {import("@/types").Eodash} */ (inst?.provides[eodashKey])
-          ?.brand.noLayout
-          ? `div.v-application__wrap {
-          min-height: fit-content;
-        }`
-          : ""
-      }
-        `;
-  styleSheet.replaceSync(stylesStr.replaceAll(":root", ":host"));
-  eodashShadowRoot?.adoptedStyleSheets.push(styleSheet);
-
-  if (
-    hiddenElements &&
-    !(
-      //@ts-expect-error Property 'provides' does not exist on type 'ComponentInternalInstance'
-      /** @type {import("@/types").Eodash} */ (inst.provides[eodashKey])?.brand
-        .noLayout
-    )
-  ) {
-    hiddenElements.forEach((element) => {
-      if (element.value) {
-        if (element.value instanceof HTMLElement) {
-          element.value.style.opacity = "1";
-        } else {
-          /** @type {HTMLElement} */
-          (element.value.$el).style.opacity = "1";
-        }
-      }
-    });
-  }
-}
-
-const error = ref("");
-onErrorCaptured((e, comp, info) => {
-  error.value = `
-  ${e}.
-  component: ${comp?.$.type.name}.
-  info: ${info}.
-  `;
-});
-</script>

package/core/client/asWebComponent.d.ts

@@ -1,23 +0,0 @@
-/** @group WebComponent */
-type EodashConstructor = import("vue").VueElementConstructor<
-  import("vue").ExtractPropTypes<{ config: string }>
->;
-/**
- * Eodash Web Component constructor
- *
- * @group WebComponent
- */
-export declare const Eodash: EodashConstructor;
-/**
- * Registers `eo-dash` as Custom Element in the window
- *
- * @group WebComponent
- */
-export declare function register(): void;
-
-/**
- * Eodash store @see EodashStore
- *
- * @group WebComponent
- */
-export declare const store: import("./types").EodashStore;

package/core/client/store/Actions.js

@@ -1,14 +0,0 @@
-/**
- * Returns the current layers of the `eox-map`
- * @param {string} [el="eox-map"] - `eox-map` element selector
- * @returns {object[]}
- */
-export const getLayers = (el = "eox-map") =>
-  customElements.get("eo-dash")
-    ? document
-        .querySelector("eo-dash")
-        ?.shadowRoot?.querySelector(el)
-        //@ts-expect-error `layers` doesn't exist on type element
-        ?.layers.toReversed()
-    : //@ts-expect-error `layers` doesn't exist on type element
-      document.querySelector(el)?.layers.toReversed();

package/core/client/store/States.js

@@ -1,16 +0,0 @@
-import { ref } from "vue";
-
-/** Currently selected STAC endpoint */
-export const currentUrl = ref("");
-/** Currently selected datetime */
-export const datetime = ref(new Date().toISOString());
-
-/** Currently selected indicator */
-export const indicator = ref("");
-
-/**
- * Current map position
- *
- * @type {import("vue").Ref<(number | undefined)[]>}
- */
-export const mapPosition = ref([]);

package/core/client/utils/eodashSTAC.js

@@ -1,249 +0,0 @@
-import { Collection, Item } from "stac-js";
-import { toAbsolute } from "stac-js/src/http.js";
-import { generateFeatures } from "./helpers";
-import axios from "axios";
-
-/**
- * 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;
-}
-export class EodashCollection {
-  /** @type {string} */
-  #collectionUrl = "";
-  /** @type {import("stac-ts").StacCollection | undefined} */
-  #collectionStac;
-  /**
-   * @type {import("stac-ts").StacLink
-   *   | import("stac-ts").StacItem
-   *   | undefined}
-   */
-  selectedItem;
-
-  /** @param {string} collectionUrl */
-  constructor(collectionUrl) {
-    this.#collectionUrl = collectionUrl;
-  }
-  /**
-   * @async
-   * @param {any} item
-   * @returns
-   */
-  createLayersJson = async (item = null) => {
-    /** @type {import("stac-ts").StacLink | undefined} */
-    let stacItem,
-      /** @type {import("stac-ts").StacCollection | undefined} */
-      stac;
-    // TODO get auxiliary layers from collection
-    /** @type {object[]} */
-    let layersJson = [
-      /*{
-        type: "Tile",
-        properties: {
-          id: "OSM",
-        },
-        source: {
-          type: "OSM",
-        },
-      },*/
-    ];
-    // Load collectionstac if not yet initialized
-    if (!this.#collectionStac) {
-      const response = await axios.get(this.#collectionUrl);
-      stac = await response.data;
-      this.#collectionStac = new Collection(stac);
-    }
-
-    if (stac && stac.endpointtype === "GeoDB") {
-      // Special handling of point based data
-      const allFeatures = generateFeatures(stac.links);
-      layersJson.unshift({
-        type: "Vector",
-        properties: {
-          id: stac.id,
-        },
-        source: {
-          type: "Vector",
-          url: "data:," + encodeURIComponent(JSON.stringify(allFeatures)),
-          format: "GeoJSON",
-        },
-        style: {
-          "circle-radius": 5,
-          "circle-fill-color": "#00417077",
-          "circle-stroke-color": "#004170",
-          "fill-color": "#00417077",
-          "stroke-color": "#004170",
-        },
-      });
-      return layersJson;
-    } else {
-      if (item instanceof Date) {
-        // if collectionStac not yet initialized we do it here
-        stacItem = this.getItems()?.sort((a, b) => {
-          const distanceA = Math.abs(
-            new Date(/** @type {number} */ (a.datetime)).getTime() -
-              item.getTime(),
-          );
-          const distanceB = Math.abs(
-            new Date(/** @type {number} */ (b.datetime)).getTime() -
-              item.getTime(),
-          );
-          return distanceA - distanceB;
-        })[0];
-        this.selectedItem = stacItem;
-      } else {
-        stacItem = item;
-      }
-      const response = await fetch(
-        stacItem
-          ? toAbsolute(stacItem.href, this.#collectionUrl)
-          : this.#collectionUrl,
-      );
-      stac = await response.json();
-
-      if (!stacItem) {
-        // no specific item was requested; render last item
-        this.#collectionStac = new Collection(stac);
-        const items = this.getItems();
-        this.selectedItem = items?.[items.length - 1];
-        if (this.selectedItem) {
-          layersJson = await this.createLayersJson(this.selectedItem);
-        } else {
-          if (import.meta.env.DEV) {
-            console.warn(
-              "[eodash] the selected collection does not include any items",
-            );
-          }
-        }
-        return [];
-      } else {
-        // specific item was requested
-        const item = new Item(stac);
-        this.selectedItem = item;
-        layersJson.unshift(...this.buildJsonArray(item));
-        return layersJson;
-      }
-    }
-  };
-
-  /** @param {import("stac-ts").StacItem} item */
-  buildJsonArray(item) {
-    const jsonArray = [];
-    // TODO: this currently assumes only one layer will be extracted
-    //       from an item, although it think this is currently true
-    //       potentially this could return multiple layers
-    // TODO: implement other types, such as COG
-
-    // I propose following approach, we "manually" create configurations
-    // for the rendering options we know and expect.
-    // If we don't find any we fallback to using the STAC ol item that
-    // will try to extract anything it supports but for which we have
-    // less control.
-    const wms = item.links.find((l) => l.rel === "wms");
-    // const projDef = false; // TODO: add capability to find projection in item
-    if (wms) {
-      let json = {
-        type: "Tile",
-        properties: {
-          id: item.id,
-        },
-        source: {
-          // if no projection information is provided we should
-          // assume one, else for WMS requests it will try to get
-          // the map projection that might not be supported
-          // projection: projDef ? projDef : "EPSG:4326",
-          type: "TileWMS",
-          url: wms.href,
-          params: {
-            LAYERS: wms["wms:layers"],
-            TILED: true,
-          },
-        },
-      };
-      if ("wms:dimensions" in wms) {
-        // @ts-expect-error: waiting for eox-map to provide type definition
-        json.source.params.time = wms["wms:dimensions"];
-      }
-      jsonArray.push(json);
-    } else if (item.links.find((l) => l.rel === "wmts" || l.rel === "xyz")) {
-      jsonArray.push({
-        type: "STAC",
-        displayWebMapLink: true,
-        displayFootprint: false,
-        data: item,
-        properties: {
-          id: item.id,
-        },
-      });
-    } else {
-      // fall back to rendering the feature
-      jsonArray.push({
-        type: "Vector",
-        source: {
-          type: "Vector",
-          url: "data:," + encodeURIComponent(JSON.stringify(item.geometry)),
-          format: "GeoJSON",
-        },
-        properties: {
-          id: item.id,
-        },
-      });
-    }
-
-    return jsonArray;
-  }
-
-  getItems() {
-    return (
-      this.#collectionStac?.links
-        .filter((i) => i.rel === "item")
-        // sort by `datetime`, where oldest is first in array
-        .sort((a, b) =>
-          /** @type {number} */ (a.datetime) <
-          /** @type {number} */ (b.datetime)
-            ? -1
-            : 1,
-        )
-    );
-  }
-
-  getDates() {
-    return (
-      this.#collectionStac?.links
-        .filter((i) => i.rel === "item")
-        // sort by `datetime`, where oldest is first in array
-        .sort((a, b) =>
-          /** @type {number} */ (a.datetime) <
-          /** @type {number} */ (b.datetime)
-            ? -1
-            : 1,
-        )
-        .map((i) => new Date(/** @type {number} */ (i.datetime)))
-    );
-  }
-}