@eodash/eodash 5.0.0-rc.1.5 → 5.0.0-rc.2

package/dist/client/{asWebComponent-BnFMd0T6.js → asWebComponent-CLUhauLl.js}

@@ -3775,9 +3775,11 @@ const eodash = reactive({
   stacEndpoint:
     // "https://eurodatacube.github.io/eodash-catalog/RACE/catalog.json",
     // "https://gtif-cerulean.github.io/catalog/cerulean/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",
+    // "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",
+    // "https://gtif-cerulean.github.io/deside-catalog/deside/catalog.json",
+    "https://gtif-cerulean.github.io/cerulean-catalog/cerulean/catalog.json",
   brand: {
     noLayout: true,
     name: "Demo",
@@ -3791,6 +3793,18 @@ const eodash = reactive({
         "surface-opacity": 0.6,
         "primary-opacity": 0.8,
       },
+      // Bank-Wong palette
+      collectionsPalette: [
+        "#009E73",
+        "#E69F00",
+        "#56B4E9",
+        "#009E73",
+        "#F0E442",
+        "#0072B2",
+        "#D55E00",
+        "#CC79A7",
+        "#994F00",
+      ],
     },
     footerText: "Demo configuration of eodash client",
   },
@@ -3908,8 +3922,6 @@ const eodash = reactive({
                   widget: {
                     name: "EodashDatePicker",
                     properties: {
-                      hideArrows: true,
-                      hideInputField: true,
                       hintText: `<b>Hint:</b> closest available date is displayed <br />
                             on map (see Analysis Layers)`,
                     },
@@ -4010,6 +4022,7 @@ const eodash = reactive({
                     properties: {
                       hintText: `<b>Hint:</b> closest available date is displayed <br />
                             on map (see Analysis Layers)`,
+                      toggleCalendar: true,
                     },
                   },
                 }
@@ -4035,10 +4048,10 @@ const eodash = reactive({
           defineWidget: (selectedSTAC) =>
             selectedSTAC?.links.some((l) => l.rel === "service")
               ? {
-                  id: Symbol(),
+                  id: "Processes",
                   type: "internal",
                   title: "Processes",
-                  layout: { x: 0, y: 7, w: 3, h: 5 },
+                  layout: { x: 9, y: 7, w: 3, h: 5 },
                   widget: {
                     name: "EodashProcess",
                   },
@@ -4182,6 +4195,7 @@ const eodash = reactive({
                     properties: {
                       hintText: `<b>Hint:</b> closest available date is displayed <br />
                                 on map (see Analysis Layers)`,
+                      toggleCalendar: true,
                     },
                   },
                 }
@@ -4646,7 +4660,7 @@ function APCAcontrast(text, background) {
     // WoB should always return negative value.
 
     const SAPC = (Ybg ** revBG - Ytxt ** revTXT) * scaleWoB;
-    outputContrast = SAPC > -loClip ? 0.0 : SAPC > -loConThresh ? SAPC - SAPC * loConFactor * loConOffset : SAPC + loConOffset;
+    outputContrast = SAPC > -1e-3 ? 0.0 : SAPC > -0.078 ? SAPC - SAPC * loConFactor * loConOffset : SAPC + loConOffset;
   }
   return outputContrast * 100;
 }
@@ -4679,7 +4693,7 @@ function toXYZ$1(lab) {
 
 // Utilities
 // For converting XYZ to sRGB
-const srgbForwardMatrix = [[3.2406, -1.5372, -0.4986], [-0.9689, 1.8758, 0.0415], [0.0557, -0.2040, 1.0570]];
+const srgbForwardMatrix = [[3.2406, -1.5372, -0.4986], [-0.9689, 1.8758, 0.0415], [0.0557, -0.204, 1.0570]];
 
 // Forward gamma adjust
 const srgbForwardTransform = C => C <= 0.0031308 ? C * 12.92 : 1.055 * C ** (1 / 2.4) - 0.055;
@@ -7429,7 +7443,7 @@ function createLayout(props) {
 }
 
 function createVuetify() {
-  let vuetify = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+  let vuetify = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     blueprint,
     ...rest
@@ -7516,7 +7530,7 @@ function createVuetify() {
     goTo
   };
 }
-const version = "3.7.6";
+const version = "3.7.7";
 createVuetify.version = version;
 function inject(key) {
   const vm = this.$;
@@ -7556,6 +7570,85 @@ const eodashCompareCollections = shallowReactive([]);
 /** whether the map postion was set in URL params on first load */
 const posIsSetFromUrl = ref(false);
 
+/**
+ * Current value of the layer control JSON form for the latest layer the user interacted with.
+ * @type {import("vue").Ref<Record<string, any> | undefined>}
+ */
+const layerControlFormValue = ref({});
+/**
+ * STAC indicators color palette, defaults to Bank-Wong palette
+ *  @type {string[]} */
+const collectionsPalette = reactive([
+  "#009E73",
+  "#0072B2",
+  "#E69F00",
+  "#CC79A7",
+  "#56B4E9",
+  "#D55E00",
+]);
+
+/**
+ * Loads font in the app using `webfontloader`
+ *
+ * @param {string} [family]
+ * @param {string} [link]
+ * @param {boolean} [isWebComponent]
+ * @returns {Promise<string>} - Font family name
+ * @see {@link "https://github.com/typekit/webfontloader"}
+ */
+const loadFont = async (
+  family = "",
+  link = "",
+  isWebComponent = false,
+) => {
+  if (family && link) {
+    const WebFontLoader = (await import('webfontloader')).default;
+    WebFontLoader.load({
+      classes: false,
+      custom: {
+        // Use FVD notation to include families https://github.com/typekit/fvd
+        families: [family],
+        // Path to stylesheet that defines font-face
+        urls: [link],
+      },
+      fontactive(familyName, _fvd) {
+        const stylesheet = new CSSStyleSheet();
+        const styles = isWebComponent
+          ? `eo-dash {font-family: ${familyName};}`
+          : `* {font-family: ${familyName};}`;
+        stylesheet.replaceSync(styles);
+        document.adoptedStyleSheets.push(stylesheet);
+      },
+      fontinactive(familyName, _fvd) {
+        throw new Error(`error loading font: ${familyName}`);
+      },
+    });
+  }
+  return family;
+};
+
+/**
+ *  @param {string} text
+ *  @param {import("vue").Ref<boolean>} showIcon
+ **/
+const copyToClipBoard = async (text, showIcon) => {
+  await navigator.clipboard.writeText(text);
+  showIcon.value = true;
+  setTimeout(() => {
+    showIcon.value = false;
+  }, 2000);
+};
+
+/**
+ * Sets the color palette for STAC indicators
+ * @param {string[]} colors
+ **/
+const setCollectionsPalette = (colors) => {
+  log.debug("Setting collections color palette", colors);
+  collectionsPalette.splice(0, collectionsPalette.length);
+  collectionsPalette.push(...colors);
+};
+
 // functions of this folder can only be consumed inside setup stores,
 // setup functions or vue composition api components https://vuejs.org/guide/reusability/composables
 
@@ -7623,13 +7716,19 @@ const useCompareAbsoluteUrl = (rel = "", base = eodash.stacEndpoint) => {
  * `ThemeDefinition`
  *
  * @param {string} themeName - Name of the theme to be updated
- * @param {import("vuetify").ThemeDefinition} [themeDefinition={}] - New
+ * @param {import("@/types").Eodash["brand"]["theme"]} [themeDefinition={}] - New
  *   defintion to be updated to. Default is `{}`
  * @returns {import("vuetify").ThemeInstance}
  */
 const useUpdateTheme = (themeName, themeDefinition = {}) => {
   const theme = useTheme();
 
+  // extract collections palette from the theme
+  if (themeDefinition.collectionsPalette?.length) {
+    setCollectionsPalette(themeDefinition.collectionsPalette);
+    delete themeDefinition.collectionsPalette;
+  }
+
   /** @type {(keyof import("vuetify").ThemeDefinition)[]} */ (
     Object.keys(themeDefinition)
   ).forEach((key) => {
@@ -7777,6 +7876,177 @@ const useOnLayersUpdate = (listener) => {
   });
 };
 
+/**
+ * Returns the current layers of {@link mapEl}
+ * @returns {Record<string,any>[]}
+ */
+const getLayers = () => mapEl.value?.layers.toReversed();
+
+/**
+ * Returns the current layers of {@link mapCompareEl}
+ * @returns {Record<string,any>[]}
+ */
+const getCompareLayers = () => mapCompareEl.value?.layers.toReversed();
+
+/**
+ * Register EPSG projection in `eox-map`
+ * @param {string|number|{name: string, def: string, extent?:number[]}} [projection]*/
+const registerProjection = async (projection) => {
+  let code = getProjectionCode(projection);
+  if (!code || registeredProjections.includes(code)) {
+    return;
+  }
+  log.debug("Unregistered projection found, registering it", code);
+  registeredProjections.push(code);
+  if (typeof projection === "object") {
+    // registering whole projection definition
+    await mapEl.value?.registerProjection(
+      code,
+      projection.def,
+      projection.extent,
+    );
+    // also registering for comparison map
+    await mapCompareEl.value?.registerProjection(
+      code,
+      projection.def,
+      projection.extent,
+    );
+  } else {
+    await mapEl.value?.registerProjectionFromCode(code);
+    // also registering for comparison map
+    await mapCompareEl.value?.registerProjectionFromCode(code);
+  }
+};
+/**
+ * Change `eox-map` projection from an `EPSG` projection
+ *  @param {string|number|{name: string, def: string}} [projection]*/
+const changeMapProjection = async (projection) => {
+  let code = getProjectionCode(projection);
+
+  if (!code) {
+    mapEl.value?.setAttribute("projection", "EPSG:3857");
+    mapCompareEl.value?.setAttribute("projection", "EPSG:3857");
+    return;
+  }
+
+  if (!registeredProjections.includes(code)) {
+    await registerProjection(projection);
+  }
+
+  code = mapEl.value?.getAttribute("projection") === code ? "EPSG:3857" : code;
+  mapEl.value?.setAttribute("projection", code);
+  mapCompareEl.value?.setAttribute("projection", code);
+};
+
+/**
+ *
+ * @param {string} template
+ */
+const setActiveTemplate = (template) => {
+  activeTemplate.value = template;
+  log.debug("Setting active template to", template);
+};
+
+const actions = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+  __proto__: null,
+  changeMapProjection,
+  getCompareLayers,
+  getLayers,
+  registerProjection,
+  setActiveTemplate
+}, Symbol.toStringTag, { value: 'Module' }));
+
+/*
+ * eodashSTAC helpers that utilizes the app states or actions
+ */
+
+/**
+ * checks if there's a projection on the Collection and
+ * updates {@link availableMapProjection}
+ * @param {import('stac-ts').StacCollection} [STAcCollection]
+ */
+const setMapProjFromCol = async (STAcCollection) => {
+  // if a projection exists on the collection level
+  log.debug("Checking for available map projection in indicator");
+  const projection =
+    /** @type {number | string | {name: string, def: string} | undefined} */
+    (
+      STAcCollection?.["eodash:mapProjection"] ||
+        STAcCollection?.["proj:epsg"] ||
+        STAcCollection?.["eodash:proj4_def"]
+    );
+  if (projection) {
+    log.debug("Projection found", projection);
+    await registerProjection(projection);
+    const projectionCode = getProjectionCode(projection);
+    if (availableMapProjection.value !== projectionCode) {
+      log.debug(
+        "Changing map projection",
+        availableMapProjection.value,
+        projectionCode,
+      );
+      await changeMapProjection(projection);
+    }
+    // set it for `EodashMapBtns`
+    availableMapProjection.value = /** @type {string} */ (projectionCode);
+  } else {
+    // reset to default projection
+    log.debug("Resetting projection to default EPSG:3857");
+    await changeMapProjection((availableMapProjection.value = ""));
+  }
+};
+/**
+ *
+ * @param {string} collectionId
+ * @param {import("@/types").EodashStyleJson["variables"]} variables
+ */
+function getStyleVariablesState(collectionId, variables) {
+  const mapElement = /** @type {import("@eox/map").EOxMap} */ (mapEl.value);
+  if (!mapElement || !mapElement.layers.length || !variables) {
+    return variables;
+  }
+
+  const analysisGroup = mapElement.layers.find(
+    (layer) => layer.properties?.id === "AnalysisGroup",
+  );
+  if (!analysisGroup) {
+    return variables;
+  }
+  const matchingLayer = analysisGroup.layers?.find((layer) => {
+    const [collection, ..._other] = layer.properties?.id.split(";:;") ?? [
+      "",
+      "",
+      "",
+    ];
+    return (
+      collection === collectionId &&
+      ["Vector", "WebGLTile"].includes(layer?.type ?? "")
+    );
+  });
+
+  if (!matchingLayer) {
+    return variables;
+  }
+
+  const olLayer = mapElement.getLayerById(matchingLayer.properties?.id ?? "");
+  const oldVariablesState = /** @type {import("ol/layer").WebGLTile} */ (
+    olLayer
+    //@ts-expect-error todo
+  ).getStyle()?.variables;
+  if (!oldVariablesState) {
+    return variables;
+  }
+  const styleVariablesKeys = Object.keys(variables);
+  const matchingKeys =
+    Object.keys(oldVariablesState).every((key) =>
+      styleVariablesKeys.includes(key),
+    ) &&
+    styleVariablesKeys.every((key) =>
+      Object.keys(oldVariablesState).includes(key),
+    );
+  return matchingKeys ? oldVariablesState : variables;
+}
+
 /** @param {import("stac-ts").StacLink[]} [links] */
 function generateFeatures(links) {
   /**
@@ -7814,13 +8084,24 @@ function generateFeatures(links) {
 /**
  * Sperates and extracts layerConfig (jsonform schema & legend) from a style json
  *
- *  @param { import("ol/layer/WebGLTile").Style & { jsonform?: Record<string,any> } & { legend?: Record<string,any> } } [style] */
-function extractLayerConfig(style) {
+ * @param {string} collectionId
+ *  @param { import("@/types").EodashStyleJson} [style]
+ * */
+function extractLayerConfig(collectionId, style) {
+  if (!style) {
+    return { layerConfig: undefined, style: undefined };
+  }
+  style = { ...style };
+
+  if (Object.keys(style.variables ?? {}).length) {
+    style.variables = getStyleVariablesState(collectionId, style.variables);
+  }
+
   /** @type {Record<string,unknown> | undefined} */
   let layerConfig = undefined;
+
   if (style?.jsonform) {
     layerConfig = { schema: style.jsonform, type: "style" };
-    style = { ...style };
     delete style.jsonform;
     if (style?.legend) {
       layerConfig.legend = style.legend;
@@ -7899,7 +8180,7 @@ const fetchStyle = async (item, itemUrl) => {
       url = toAbsolute(styleLink.href, itemUrl);
     }
 
-    /** @type {import("ol/layer/WebGLTile").Style & {jsonform?:Record<string,any>}} */
+    /** @type {import("@/types").EodashStyleJson} */
     const styleJson = await axios.get(url).then((resp) => resp.data);
 
     log.debug("fetched styles JSON", JSON.parse(JSON.stringify(styleJson)));
@@ -7975,8 +8256,9 @@ const extractLayerDatetime = (links, currentStep) => {
     controlValues,
     currentStep,
     slider: true,
+    navigation: true,
     play: false,
-    displayFormat: "DD MMMM YYYY",
+    displayFormat: "DD.MM.YYYY HH:MM",
   };
 };
 
@@ -8071,14 +8353,14 @@ const getColFromLayer = async (indicators, layer) => {
  */
 const createLayerID = (collectionId, itemId, link, projectionCode) => {
   const linkId = link.id || link.title || link.href;
-  let lId = `${collectionId ?? ""};:;${itemId ?? ""};:;${linkId ?? ""};:;${projectionCode ?? ""}`;
+  let lId = `${collectionId ?? ""};:;${itemId ?? ""};:;${linkId ?? ""};:;${projectionCode}`;
   // If we are looking at base layers and overlays we remove the collection and item part
   // as we want to make sure tiles are not reloaded when switching layers
   if (
     /** @type {string[]} */
     (link.roles)?.find((r) => ["baselayer", "overlay"].includes(r))
   ) {
-    lId = `${linkId ?? ""};:;${projectionCode ?? ""}`;
+    lId = `${linkId ?? ""};:;${projectionCode}`;
   }
   log.debug("Generated Layer ID", lId);
   return lId;
@@ -8122,91 +8404,41 @@ const removeUnneededProperties = (layers) => {
 };
 
 /**
- * Returns the current layers of {@link mapEl}
- * @returns {Record<string,any>[]}
- */
-const getLayers = () => mapEl.value?.layers.toReversed();
-
-/**
- * Returns the current layers of {@link mapCompareEl}
- * @returns {Record<string,any>[]}
+ * @param {string[]} geojsonUrls
  */
-const getCompareLayers = () => mapCompareEl.value?.layers.toReversed();
-
-/**
- * Register EPSG projection in `eox-map`
- * @param {string|number|{name: string, def: string, extent?:number[]}} [projection]*/
-const registerProjection = async (projection) => {
-  let code = getProjectionCode(projection);
-  if (!code || registeredProjections.includes(code)) {
-    return;
-  }
-  log.debug("Unregistered projection found, registering it", code);
-  registeredProjections.push(code);
-  if (typeof projection === "object") {
-    // registering whole projection definition
-    await mapEl.value?.registerProjection(
-      code,
-      projection.def,
-      projection.extent,
-    );
-    // also registering for comparison map
-    await mapCompareEl.value?.registerProjection(
-      code,
-      projection.def,
-      projection.extent,
-    );
-  } else {
-    await mapEl.value?.registerProjectionFromCode(code);
-    // also registering for comparison map
-    await mapCompareEl.value?.registerProjectionFromCode(code);
-  }
-};
-/**
- * Change `eox-map` projection from an `EPSG` projection
- *  @param {string|number|{name: string, def: string}} [projection]*/
-const changeMapProjection = async (projection) => {
-  let code = getProjectionCode(projection);
-
-  if (!code) {
-    mapEl.value?.setAttribute("projection", "EPSG:3857");
-    mapCompareEl.value?.setAttribute("projection", "EPSG:3857");
-    return;
+async function mergeGeojsons(geojsonUrls) {
+  if (!geojsonUrls.length) {
+    return undefined;
   }
-
-  if (!registeredProjections.includes(code)) {
-    await registerProjection(projection);
+  if (geojsonUrls.length === 1) {
+    return geojsonUrls[0];
   }
 
-  code = mapEl.value?.getAttribute("projection") === code ? "EPSG:3857" : code;
-  mapEl.value?.setAttribute("projection", code);
-  mapCompareEl.value?.setAttribute("projection", code);
-};
-
-/**
- *
- * @param {string} template
- */
-const setActiveTemplate = (template) => {
-  activeTemplate.value = template;
-  log.debug("Setting active template to", template);
-};
+  const merged = {
+    type: "FeatureCollection",
+    /** @type {import("ol").Feature[]} */
+    features: [],
+  };
+  await Promise.all(
+    geojsonUrls.map((url) =>
+      axios.get(url).then((resp) => {
+        const geojson = resp.data;
+        merged.features.push(...(geojson.features ?? []));
+      }),
+    ),
+  );
 
-const actions = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
-  __proto__: null,
-  changeMapProjection,
-  getCompareLayers,
-  getLayers,
-  registerProjection,
-  setActiveTemplate
-}, Symbol.toStringTag, { value: 'Module' }));
+  return encodeURI(
+    "data:application/json;charset=utf-8," + JSON.stringify(merged),
+  );
+}
 
 /**
  * @param {string} collectionId
  * @param {string} title
  * @param {Record<string,import("stac-ts").StacAsset>} assets
  * @param {import("stac-ts").StacItem } item
- * @param {import("ol/layer/WebGLTile").Style} [style]
+ * @param {import("@/types").EodashStyleJson} [style]
  * @param {Record<string, unknown>} [layerConfig]
  * @param {Record<string, unknown>} [layerDatetime]
  * @param {object | null} [extraProperties]
@@ -8226,6 +8458,11 @@ async function createLayersFromAssets(
   let geoTIFFSources = [];
   /** @type {number|null} */
   let geoTIFFIdx = null;
+  // let geoJsonLayers = [];
+  let geoJsonIdx = 0;
+
+  const geoJsonSources = [];
+  let geoJsonRoles = {};
 
   for (const [idx, ast] of Object.keys(assets).entries()) {
     // register projection if exists
@@ -8234,15 +8471,18 @@ async function createLayersFromAssets(
         assets[ast]?.["proj:epsg"] || assets[ast]?.["eodash:proj4_def"]
       );
     await registerProjection(assetProjection);
-
-    if (assets[ast]?.type === "application/geo+json" || assets[ast]?.type === "application/vnd.flatgeobuf") {
+    if (assets[ast]?.type === "application/geo+json") {
+      geoJsonSources.push(assets[ast].href);
+      geoJsonIdx = idx;
+      extractRoles(geoJsonRoles, assets[ast]);
+    } else if (assets[ast]?.type === "application/vnd.flatgeobuf") {
       const assetId = createAssetID(collectionId, item.id, idx);
-      const sourceType = assets[ast]?.type === "application/geo+json" ? "GeoJSON" : "FlatGeoBuf";
-      log.debug(`Creating Vector layer from ${sourceType}`, assetId);
+      log.debug(`Creating Vector layer from FlatGeoBuf`, assetId);
+
       const layer = {
         type: "Vector",
         source: {
-          type: sourceType,
+          type: "FlatGeoBuf",
           url: assets[ast].href,
           format: "GeoJSON",
         },
@@ -8259,6 +8499,23 @@ async function createLayersFromAssets(
         },
         ...(!style?.variables && { style }),
       };
+      // add tooltip interaction if style has tooltip
+      if (style?.tooltip) {
+        // @ts-expect-error no type for eox-map layer
+        layer.interactions = [
+          {
+            type: "select",
+            options: {
+              id: (Math.random() * 10000).toFixed() + "_selectInteraction",
+              condition: "pointermove",
+              style: {
+                "stroke-color": "#335267",
+                "stroke-width": 4,
+              },
+            },
+          },
+        ];
+      }
 
       extractRoles(layer.properties, assets[ast]);
 
@@ -8271,6 +8528,36 @@ async function createLayersFromAssets(
     }
   }
 
+  if (geoJsonSources.length) {
+    const assetId = createAssetID(collectionId, item.id, geoJsonIdx);
+    log.debug(`Creating Vector layer from GeoJsons`, assetId);
+
+    const layer = {
+      type: "Vector",
+      source: {
+        type: "Vector",
+        url: await mergeGeojsons(geoJsonSources),
+        format: "GeoJSON",
+      },
+      properties: {
+        ...geoJsonRoles,
+        id: assetId,
+        title,
+        layerDatetime,
+        ...(layerConfig && {
+          layerConfig: {
+            ...layerConfig,
+            style,
+          },
+        }),
+      },
+      ...(!style?.variables && { style }),
+    };
+
+    layer.properties = { ...layer.properties, ...(extraProperties ?? {}) };
+
+    jsonArray.push(layer);
+  }
   if (geoTIFFSources.length && typeof geoTIFFIdx === "number") {
     const geotiffSourceID = collectionId + ";:;GeoTIFF";
     log.debug("Creating WebGLTile layer from GeoTIFF", geotiffSourceID);
@@ -8521,6 +8808,12 @@ class EodashCollection {
    */
   selectedItem;
 
+  /** @type {Exclude<import("@/types").EodashStyleJson["tooltip"],undefined>} */
+  #tooltipProperties = [];
+
+  /** @type {string | undefined} */
+  color;
+
   //  read only
   get collectionStac() {
     return this.#collectionStac;
@@ -8635,6 +8928,7 @@ class EodashCollection {
     // less control.
 
     let { layerConfig, style } = extractLayerConfig(
+      this.#collectionStac?.id ?? "",
       await fetchStyle(item, itemUrl),
     );
 
@@ -8669,6 +8963,10 @@ class EodashCollection {
           layerLegend: this.#collectionStac["eox:colorlegend"],
         };
       }
+      extraProperties = {
+        ...extraProperties,
+        ...(this.color && { color: this.color }),
+      };
       const links = await createLayersFromLinks(
         this.#collectionStac?.id ?? "",
         title,
@@ -8780,6 +9078,19 @@ class EodashCollection {
       : this.getItems()?.at(-1);
   }
 
+  async getToolTipProperties() {
+    if (!(this.selectedItem instanceof Item)) {
+      return [];
+    }
+    let styles = await fetchStyle(
+      this.selectedItem,
+      `${this.#collectionUrl}/${this.selectedItem.id}`,
+    );
+    const { tooltip } = styles || { tooltip: [] };
+    this.#tooltipProperties = tooltip ?? [];
+    return this.#tooltipProperties;
+  }
+
   /**
    *
    * @param {string} datetime
@@ -8848,7 +9159,6 @@ class EodashCollection {
         indicator?.title || indicator.id,
         //@ts-expect-error indicator instead of item
         indicator,
-        // layerDatetime,
       )),
       ...(await createLayersFromAssets(
         indicator?.id ?? "",
@@ -8856,9 +9166,6 @@ class EodashCollection {
         indicatorAssets,
         //@ts-expect-error indicator instead of item
         indicator,
-        // style,
-        // layerConfig,
-        // layerDatetime,
       )),
     ];
   }
@@ -9004,9 +9311,10 @@ const useSTAcStore = defineStore("stac", () => {
         );
 
         await Promise.all(
-          collectionUrls.map((cu) => {
+          collectionUrls.map((cu, idx) => {
             const ec = new EodashCollection(cu);
             ec.fetchCollection();
+            ec.color = collectionsPalette[idx % collectionsPalette.length];
             return ec;
           }),
         ).then((collections) => {
@@ -9146,58 +9454,6 @@ const useEodashRuntime = async (runtimeConfig) => {
   return eodash;
 };
 
-/**
- * Loads font in the app using `webfontloader`
- *
- * @param {string} [family]
- * @param {string} [link]
- * @param {boolean} [isWebComponent]
- * @returns {Promise<string>} - Font family name
- * @see {@link "https://github.com/typekit/webfontloader"}
- */
-const loadFont = async (
-  family = "",
-  link = "",
-  isWebComponent = false,
-) => {
-  if (family && link) {
-    const WebFontLoader = (await import('webfontloader')).default;
-    WebFontLoader.load({
-      classes: false,
-      custom: {
-        // Use FVD notation to include families https://github.com/typekit/fvd
-        families: [family],
-        // Path to stylesheet that defines font-face
-        urls: [link],
-      },
-      fontactive(familyName, _fvd) {
-        const stylesheet = new CSSStyleSheet();
-        const styles = isWebComponent
-          ? `eo-dash {font-family: ${familyName};}`
-          : `* {font-family: ${familyName};}`;
-        stylesheet.replaceSync(styles);
-        document.adoptedStyleSheets.push(stylesheet);
-      },
-      fontinactive(familyName, _fvd) {
-        throw new Error(`error loading font: ${familyName}`);
-      },
-    });
-  }
-  return family;
-};
-
-/**
- *  @param {string} text
- *  @param {import("vue").Ref<boolean>} showIcon
- **/
-const copyToClipBoard = async (text, showIcon) => {
-  await navigator.clipboard.writeText(text);
-  showIcon.value = true;
-  setTimeout(() => {
-    showIcon.value = false;
-  }, 2000);
-};
-
 const _export_sfc = (sfc, props) => {
   const target = sfc.__vccOpts || sfc;
   for (const [key, val] of props) {
@@ -10238,7 +10494,7 @@ const VProgressLinear = genericComponent()({
       "aria-hidden": props.active ? 'false' : 'true',
       "aria-valuemin": "0",
       "aria-valuemax": props.max,
-      "aria-valuenow": props.indeterminate ? undefined : normalizedValue.value,
+      "aria-valuenow": props.indeterminate ? undefined : Math.min(parseFloat(progress.value), max.value),
       "onClick": props.clickable && handleClick
     }, {
       default: () => [props.stream && createVNode("div", {
@@ -11192,7 +11448,7 @@ const ErrorAlert = /*#__PURE__*/_export_sfc(_sfc_main$3, [['__scopeId',"data-v-a
 const internalWidgets = (() => {
   /** @type {Record<string, () => Promise<import("vue").Component>>} */
   const importMap = {
-    .../* #__PURE__ */ Object.assign({"/widgets/EodashDatePicker.vue": () => import('./EodashDatePicker-DGRJrJ0s.js'),"/widgets/EodashItemFilter.vue": () => import('./EodashItemFilter-DBQwJQPh.js'),"/widgets/EodashLayerControl.vue": () => import('./EodashLayerControl-C5fOCvoI.js'),"/widgets/EodashLayoutSwitcher.vue": () => import('./EodashLayoutSwitcher-BMO9k_20.js'),"/widgets/EodashMap.vue": () => import('./EodashMap-D2bnMLAC.js'),"/widgets/EodashMapBtns.vue": () => import('./EodashMapBtns-l9B977id.js'),"/widgets/EodashProcess.vue": () => import('./EodashProcess-BtIlJvF1.js'),"/widgets/EodashStacInfo.vue": () => import('./EodashStacInfo-CPVvp_Hm.js'),"/widgets/EodashTools.vue": () => import('./EodashTools-DY2dlNXW.js'),"/widgets/ExportState.vue": () => import('./ExportState-BvD5A0XG.js'),"/widgets/PopUp.vue": () => import('./PopUp-CREaSybs.js'),"/widgets/WidgetsContainer.vue": () => import('./WidgetsContainer-6FHEEXns.js')}),
+    .../* #__PURE__ */ Object.assign({"/widgets/EodashDatePicker.vue": () => import('./EodashDatePicker-Bp5ec3BC.js'),"/widgets/EodashItemFilter.vue": () => import('./EodashItemFilter-Cx0t-qeW.js'),"/widgets/EodashLayerControl.vue": () => import('./EodashLayerControl-DERx00In.js'),"/widgets/EodashLayoutSwitcher.vue": () => import('./EodashLayoutSwitcher-DTS7otlk.js'),"/widgets/EodashMap.vue": () => import('./EodashMap-C-I6puhb.js'),"/widgets/EodashMapBtns.vue": () => import('./EodashMapBtns-CWgtJiG4.js'),"/widgets/EodashProcess.vue": () => import('./EodashProcess-DWrTIyHT.js'),"/widgets/EodashStacInfo.vue": () => import('./EodashStacInfo-Dvsk97Mz.js'),"/widgets/EodashTools.vue": () => import('./EodashTools-CdnjgTTl.js'),"/widgets/ExportState.vue": () => import('./ExportState-S4lcehm3.js'),"/widgets/PopUp.vue": () => import('./PopUp-CzqV8BFZ.js'),"/widgets/WidgetsContainer.vue": () => import('./WidgetsContainer-Cv466WUW.js')}),
     .../* #__PURE__ */ Object.assign({}),
   };
   for (const key in importMap) {
@@ -11300,7 +11556,7 @@ const getWidgetDefinition = (config) => {
 
     case "web-component":
       importedWidget.component = defineAsyncComponent({
-        loader: () => import('./DynamicWebComponent-Dj3QYwag.js'),
+        loader: () => import('./DynamicWebComponent-BCwpocDX.js'),
         suspensible: true,
       });
       importedWidget.props = reactive(config.widget);
@@ -11712,7 +11968,9 @@ const eodash = (
 
 useURLSearchParametersSync();
 
-const theme = useUpdateTheme("dashboardTheme", eodash.brand?.theme);
+const theme = useUpdateTheme("dashboardTheme", {
+  ...(eodash.brand?.theme ?? {}),
+});
 theme.global.name.value = "dashboardTheme";
 (
   ([__temp,__restore] = withAsyncContext(() => loadFont(
@@ -11734,15 +11992,15 @@ const { loadSTAC } = useSTAcStore();
 const { smAndDown } = useDisplay();
 const TemplateComponent = computed(() =>
   smAndDown.value
-    ? defineAsyncComponent(() => import('./MobileLayout-CmVlZe7S.js'))
-    : defineAsyncComponent(() => import('./DashboardLayout-B-4X57-t.js')),
+    ? defineAsyncComponent(() => import('./MobileLayout-DRgyQYFz.js'))
+    : defineAsyncComponent(() => import('./DashboardLayout-VrJIbhe8.js')),
 );
 
 const HeaderComponent = defineAsyncComponent(
-  () => import('./Header-BpiorKy9.js'),
+  () => import('./Header-CTiEXLi0.js'),
 );
 const FooterComponent = defineAsyncComponent(
-  () => import('./Footer-w95gBnSH.js'),
+  () => import('./Footer-DlIEbXp-.js'),
 );
 
 const templateHeight = props.isWebComponent ? "100%" : "100dvh";
@@ -11941,4 +12199,4 @@ function register() {
 
 register();
 
-export { useSTAcStore as $, makeDensityProps as A, useDensity as B, useBackgroundColor as C, provideDefaults as D, isObject as E, useDefineTemplate as F, useLayout as G, makeDimensionProps as H, IconValue as I, useDimension as J, makeBorderProps as K, makeElevationProps as L, makeRoundedProps as M, useBorder as N, useElevation as O, useRounded as P, VDefaultsProvider as Q, clamp as R, consoleWarn as S, makeLayoutItemProps as T, useToggleScope as U, VBtn as V, useLayoutItem as W, eodashKey as X, consoleError as Y, datetime as Z, _export_sfc as _, useRender as a, eodashCollections as a0, makePanelTransparent as a1, mapCompareEl as a2, mapEl as a3, eodashCompareCollections as a4, getColFromLayer as a5, registerProjection as a6, getProjectionCode as a7, availableMapProjection as a8, changeMapProjection as a9, useLink as aA, LoaderSlot as aB, removeUnneededProperties as aC, VRow as aD, VCol as aE, copyToClipBoard as aF, SUPPORTS_INTERSECTION as aG, getCurrentInstance as aH, useDefineWidgets as aI, isOn as aJ, eventName as aK, destructComputed as aL, parseAnchor as aM, flipSide as aN, flipAlign as aO, flipCorner as aP, getAxis as aQ, defer as aR, templateRef as aS, matchesSelector as aT, useRouter as aU, useBackButton as aV, EodashConstructor as aW, register as aX, store as aY, eoxLayersKey as aa, posIsSetFromUrl as ab, EodashCollection as ac, mapPosition as ad, setActiveTemplate as ae, axios$1 as af, getLayers as ag, extractLayerConfig as ah, useOnLayersUpdate as ai, currentUrl as aj, activeTemplate as ak, getUid as al, createSimpleFunctional as am, makeSizeProps as an, makeVariantProps as ao, useVariant as ap, useSize as aq, genOverlays as ar, makeLoaderProps as as, makeLocationProps as at, makePositionProps as au, makeRouterProps as av, Ripple as aw, useLoader as ax, useLocation as ay, usePosition as az, makeComponentProps as b, makeTagProps as c, makeThemeProps as d, provideTheme as e, useRtl as f, genericComponent as g, useLocale as h, useGroup as i, useProxiedModel as j, keys as k, makeGroupItemProps as l, makeVBtnProps as m, useGroupItem as n, omit as o, propsFactory as p, convertToUnit as q, makeDisplayProps as r, makeGroupProps as s, useDisplay as t, useTextColor as u, useResizeObserver as v, useGoTo as w, IN_BROWSER as x, VIcon as y, focusableChildren as z };
+export { useSTAcStore as $, makeDensityProps as A, useDensity as B, useBackgroundColor as C, provideDefaults as D, isObject as E, useDefineTemplate as F, useLayout as G, makeDimensionProps as H, IconValue as I, useDimension as J, makeBorderProps as K, makeElevationProps as L, makeRoundedProps as M, useBorder as N, useElevation as O, useRounded as P, VDefaultsProvider as Q, clamp as R, consoleWarn as S, makeLayoutItemProps as T, useToggleScope as U, VBtn as V, useLayoutItem as W, eodashKey as X, consoleError as Y, datetime as Z, _export_sfc as _, useRender as a, eodashCollections as a0, collectionsPalette as a1, makePanelTransparent as a2, mapCompareEl as a3, mapEl as a4, eodashCompareCollections as a5, layerControlFormValue as a6, getColFromLayer as a7, eoxLayersKey as a8, setMapProjFromCol as a9, usePosition as aA, useLink as aB, LoaderSlot as aC, removeUnneededProperties as aD, VRow as aE, VCol as aF, copyToClipBoard as aG, SUPPORTS_INTERSECTION as aH, getCurrentInstance as aI, useDefineWidgets as aJ, isOn as aK, eventName as aL, destructComputed as aM, parseAnchor as aN, flipSide as aO, flipAlign as aP, flipCorner as aQ, getAxis as aR, defer as aS, templateRef as aT, matchesSelector as aU, useRouter as aV, useBackButton as aW, EodashConstructor as aX, register as aY, store as aZ, posIsSetFromUrl as aa, useOnLayersUpdate as ab, EodashCollection as ac, mapPosition as ad, availableMapProjection as ae, changeMapProjection as af, setActiveTemplate as ag, axios$1 as ah, getLayers as ai, extractLayerConfig as aj, currentUrl as ak, activeTemplate as al, getUid as am, createSimpleFunctional as an, makeSizeProps as ao, makeVariantProps as ap, useVariant as aq, useSize as ar, genOverlays as as, makeLoaderProps as at, makeLocationProps as au, makePositionProps as av, makeRouterProps as aw, Ripple as ax, useLoader as ay, useLocation as az, makeComponentProps as b, makeTagProps as c, makeThemeProps as d, provideTheme as e, useRtl as f, genericComponent as g, useLocale as h, useGroup as i, useProxiedModel as j, keys as k, makeGroupItemProps as l, makeVBtnProps as m, useGroupItem as n, omit as o, propsFactory as p, convertToUnit as q, makeDisplayProps as r, makeGroupProps as s, useDisplay as t, useTextColor as u, useResizeObserver as v, useGoTo as w, IN_BROWSER as x, VIcon as y, focusableChildren as z };