@eodash/eodash 5.0.0-rc.2.5 → 5.0.0-rc.3

package/core/client/composables/DefineWidgets.js

@@ -23,7 +23,14 @@ const internalWidgets = (() => {
     ...import.meta.glob("user:widgets/**/*.vue"),
   };
   for (const key in importMap) {
-    const newKey = /** @type {string} */ (key.split("/").at(-1)).slice(0, -4);
+    // Remove the extention and "widgets" from the key path
+    const path = key.split("/");
+    path.splice(0, path.findIndex((el) => el === "widgets") + 1);
+    const lastIdx = path.length - 1;
+    path[lastIdx] = path[lastIdx].split(".")[0];
+    const newKey =
+      path[lastIdx] == "index" ? path[lastIdx - 1] : path.join("/");
+
     Object.defineProperty(
       importMap,
       newKey,

package/core/client/eodash.js

@@ -14,10 +14,9 @@ export const eodash = reactive({
     // "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",
-    "https://gtif-austria.github.io/public-catalog/GTIF-Austria/catalog.json",
+    "https://gtif-cerulean.github.io/cerulean-catalog/cerulean/catalog.json",
+  // "https://gtif-austria.github.io/public-catalog/GTIF-Austria/catalog.json",
   brand: {
     noLayout: true,
     name: "Demo",
@@ -163,7 +162,7 @@ export const eodash = reactive({
           defineWidget: (selectedSTAC) => {
             return selectedSTAC
               ? {
-                  id: "Datepicker",
+                  id: "light-datepicker",
                   type: "internal",
                   layout: { x: 5, y: 8, w: 2, h: 4 },
                   title: "Date",
@@ -257,7 +256,7 @@ export const eodash = reactive({
           defineWidget: (selectedSTAC) => {
             return selectedSTAC
               ? {
-                  id: "Datepicker",
+                  id: "expert-datepicker",
                   type: "internal",
                   layout: { x: 5, y: 11, w: 2, h: 1 },
                   title: "Date",
@@ -340,8 +339,7 @@ export const eodash = reactive({
           widget: {
             name: "EodashTools",
             properties: {
-              layoutTarget: "expert",
-              layoutIcon: mdiViewDashboardVariant,
+              showLayoutSwitcher: false,
               itemFilterConfig: {
                 cssVars: {
                   "--form-flex-direction": "row",
@@ -419,7 +417,9 @@ export const eodash = reactive({
                   widget: {
                     name: "EodashMapBtns",
                     properties: {
-                      compareIndicators: false,
+                      compareIndicators: {
+                        fallbackTemplate: "expert",
+                      },
                     },
                   },
                 }
@@ -430,7 +430,7 @@ export const eodash = reactive({
           defineWidget: (selectedSTAC) => {
             return selectedSTAC
               ? {
-                  id: "Datepicker",
+                  id: "expert-Datepicker",
                   type: "internal",
                   layout: { x: 5, y: 8, w: 2, h: 4 },
                   title: "Date",

package/core/client/eodashSTAC/createLayers.js

@@ -6,6 +6,7 @@ import {
   createLayerID,
   createAssetID,
   mergeGeojsons,
+  addTooltipInteraction,
 } from "./helpers";
 import log from "loglevel";
 
@@ -81,22 +82,7 @@ export async function createLayersFromAssets(
         interactions: [],
       };
       // add tooltip interaction if style has tooltip
-      if (style?.tooltip) {
-        layer.interactions = [
-          // @ts-expect-error no type for eox-map layer
-          {
-            type: "select",
-            options: {
-              id: (Math.random() * 10000).toFixed() + "_selectInteraction",
-              condition: "pointermove",
-              style: {
-                "stroke-color": "#335267",
-                "stroke-width": 4,
-              },
-            },
-          },
-        ];
-      }
+      addTooltipInteraction(layer, style);
 
       extractRoles(layer.properties, assets[ast]);
 
@@ -137,11 +123,11 @@ export async function createLayersFromAssets(
         }),
       },
       ...(!style?.variables && { style }),
-      interactions:[],
+      interactions: [],
     };
 
     layer.properties = { ...layer.properties, ...(extraProperties ?? {}) };
-
+    addTooltipInteraction(layer, style);
     jsonArray.push(layer);
   }
   if (geoTIFFSources.length && typeof geoTIFFIdx === "number") {

package/core/client/eodashSTAC/helpers.js

@@ -418,3 +418,26 @@ export async function mergeGeojsons(geojsonUrls) {
     "data:application/json;charset=utf-8," + JSON.stringify(merged),
   );
 }
+
+/**
+ * adds tooltip to the layer if the style has tooltip property
+ * @param {Record<string,any>} layer
+ * @param {import("@/types").EodashStyleJson} [style]
+ */
+export const addTooltipInteraction = (layer, style) => {
+  if (style?.tooltip) {
+    layer.interactions = [
+      {
+        type: "select",
+        options: {
+          id: (Math.random() * 10000).toFixed() + "_selectInteraction",
+          condition: "pointermove",
+          style: {
+            "stroke-color": "#335267",
+            "stroke-width": 4,
+          },
+        },
+      },
+    ];
+  }
+};

package/core/client/store/stac.js

@@ -9,6 +9,7 @@ import {
   eodashCollections,
   eodashCompareCollections,
   collectionsPalette,
+  switchToCompare,
 } from "@/utils/states";
 import { EodashCollection } from "@/eodashSTAC/EodashCollection";
 import log from "loglevel";
@@ -110,6 +111,7 @@ export const useSTAcStore = defineStore("stac", () => {
 
           selectedStac.value = resp.data;
           indicator.value = selectedStac.value?.id ?? "";
+          switchToCompare.value = true;
         });
       })
       .catch((err) => {
@@ -126,7 +128,6 @@ export const useSTAcStore = defineStore("stac", () => {
    */
   async function loadSelectedCompareSTAC(relativePath = "") {
     const absoluteUrl = useCompareAbsoluteUrl(relativePath);
-
     await axios
       .get(absoluteUrl.value)
       .then(async (resp) => {
@@ -149,6 +150,7 @@ export const useSTAcStore = defineStore("stac", () => {
           eodashCompareCollections.push(...collections);
 
           selectedCompareStac.value = resp.data;
+          switchToCompare.value = false;
         });
       })
       .catch((err) => {

package/core/client/types.ts

@@ -53,7 +53,10 @@ export interface WidgetsContainerProps {
 }
 
 // eodash types:
-/** Properties of EOxLayoutItem used for setting the position and size of panels */
+/**
+ * Properties of EOxLayoutItem used for setting the position and size of panels
+ * @group Eodash
+ * */
 export interface Layout {
   /** Horizontal start position. Integer between 1 and 12 */
   x: number;
@@ -77,7 +80,116 @@ export interface WebComponentWidget<T extends ExecutionTime = "compiletime"> {
   widget: WebComponentProps<T>;
   type: "web-component";
 }
+// Internal Widget Interfaces
+/** @group Widgets */
+export interface TEodashMap {
+  name: "EodashMap";
+  properties?: InstanceType<typeof import("^/EodashMap.vue").default>["$props"];
+}
+
+/** @group Widgets */
+export interface TEodashDatePicker {
+  name: "EodashDatePicker";
+  properties?: InstanceType<
+    typeof import("^/EodashDatePicker.vue").default
+  >["$props"];
+}
+
+/** @group Widgets */
+export interface TEodashItemFilter {
+  name: "EodashItemFilter";
+  properties?: InstanceType<
+    typeof import("^/EodashItemFilter.vue").default
+  >["$props"];
+}
+
+/** @group Widgets */
+export interface TEodashLayerControl {
+  name: "EodashLayerControl";
+  properties?: InstanceType<
+    typeof import("^/EodashLayerControl.vue").default
+  >["$props"];
+}
+
+/** @group Widgets */
+export interface TEodashStacInfo {
+  name: "EodashStacInfo";
+  properties?: InstanceType<
+    typeof import("^/EodashStacInfo.vue").default
+  >["$props"];
+}
+
+/** @group Widgets */
+export interface TEodashProcess {
+  name: "EodashProcess";
+  properties?: InstanceType<
+    typeof import("^/EodashProcess.vue").default
+  >["$props"];
+}
+
+/** @group Widgets */
+export interface TEodashMapBtns {
+  name: "EodashMapBtns";
+  properties?: InstanceType<
+    typeof import("^/EodashMapBtns.vue").default
+  >["$props"];
+}
 
+/** @group Widgets */
+export interface TEodashTools {
+  name: "EodashTools";
+  properties?: InstanceType<
+    typeof import("^/EodashTools.vue").default
+  >["$props"];
+}
+
+/** @group Widgets */
+export interface TEodashLayoutSwitcher {
+  name: "EodashLayoutSwitcher";
+  properties?: InstanceType<
+    typeof import("^/EodashLayoutSwitcher.vue").default
+  >["$props"];
+}
+
+/** @group Widgets */
+export interface TExportState {
+  name: "ExportState";
+  properties?: InstanceType<
+    typeof import("^/ExportState.vue").default
+  >["$props"];
+}
+
+/** @group Widgets */
+export interface TPopUp {
+  name: "PopUp";
+  properties?: InstanceType<typeof import("^/PopUp.vue").default>["$props"];
+}
+/** @group Widgets */
+export interface TWidgetsContainer {
+  name: "WidgetsContainer";
+  properties?: InstanceType<
+    typeof import("^/WidgetsContainer.vue").default
+  >["$props"];
+}
+/**
+ * Internal Vue Components inside the
+ * [widgets](https://github.com/eodash/eodash/tree/main/widgets) folder.
+ * Referenced using their name without the .vue extention
+ * @group Widgets
+ */
+export type ComponentWidget =
+  | TEodashMap
+  | TEodashDatePicker
+  | TEodashItemFilter
+  | TEodashLayerControl
+  | TEodashStacInfo
+  | TEodashProcess
+  | TEodashMapBtns
+  | TEodashTools
+  | TEodashLayoutSwitcher
+  | TExportState
+  | TPopUp
+  | TWidgetsContainer;
 /**
  * Widget type: `internal` API. Internal widgets are Vue components provided by
  * eodash.
@@ -89,16 +201,7 @@ export interface InternalComponentWidget {
   title: string;
   /** Widget position and size. */
   layout: Layout;
-  widget: {
-    /**
-     * Internal Vue Components inside the
-     * [widgets](https://github.com/eodash/eodash/tree/main/widgets) folder.
-     * Referenced using their name without the .vue extention
-     */
-    name: string;
-    /** Specified Vue component props */
-    properties?: Record<string, unknown>;
-  };
+  widget: ComponentWidget;
   type: "internal";
 }
 
@@ -170,7 +273,7 @@ export type BackgroundWidget<T extends ExecutionTime = "compiletime"> =
  *
  * @group Eodash
  */
-export interface SingleTemplate<T extends ExecutionTime = "compiletime"> {
+export interface Template<T extends ExecutionTime = "compiletime"> {
   /** Gap between widgets */
   gap?: number;
   /** Loading widget */
@@ -183,10 +286,10 @@ export interface SingleTemplate<T extends ExecutionTime = "compiletime"> {
   /** Array of widgets that will be rendered as dashboard panels. */
   widgets: Widget<T>[];
 }
-
+/** @group Eodash */
 export type MultiTemplates<T extends ExecutionTime = "compiletime"> = Record<
   string,
-  SingleTemplate<T>
+  Template<T>
 >;
 
 /** @ignore */
@@ -194,7 +297,8 @@ export type StacEndpoint = `${string}/catalog.json`;
 
 /** @group Eodash */
 type ExecutionTime = "runtime" | "compiletime";
-type EodashFont = {
+/** @group Eodash */
+export interface EodashFont {
   /**
    * Link to stylesheet that defines font-face. Could be either a relative
    * or absolute URL.
@@ -202,7 +306,7 @@ type EodashFont = {
   link?: string;
   /** Font family name. */
   family: string;
-};
+}
 /**
  * Eodash instance API
  *
@@ -243,7 +347,7 @@ export type Eodash<T extends ExecutionTime = "compiletime"> = {
 } & (
   | {
       /** Template configuration */
-      template: SingleTemplate<T>;
+      template: Template<T>;
     }
   | {
       /** Multiple templates configuration */
@@ -297,7 +401,7 @@ export interface EodashStore {
 ///////
 
 /** @group WebComponent */
-type EodashConstructor = import("vue").VueElementConstructor<
+export type EodashConstructor = import("vue").VueElementConstructor<
   import("vue").ExtractPropTypes<{ config: string }>
 >;
 /**
@@ -323,7 +427,9 @@ export declare const store: typeof import("@/store").default;
 /////
 
 export * from "./main.js";
-
+/**
+ * @group Eodash
+ */
 export type EodashStyleJson = import("ol/style/flat").FlatStyleLike & {
   variables?: Record<string, string | number | boolean | null | undefined>;
   legend?: import("@eox/layercontrol/src/components/layer-config.js").EOxLayerControlLayerConfig["layerConfig"]["legend"];

package/core/client/utils/states.js

@@ -35,6 +35,13 @@ export const posIsSetFromUrl = ref(false);
  * @type {import("vue").Ref<Record<string, any> | undefined>}
  */
 export const layerControlFormValue = ref({});
+
+/**
+ * Current value of the layer control JSON form for the latest layer the user interacted with.
+ * @type {import("vue").Ref<Record<string, any> | undefined>}
+ */
+export const layerControlFormValueCompare = ref({});
+
 /**
  * STAC indicators color palette, defaults to Bank-Wong palette
  *  @type {string[]} */
@@ -80,3 +87,5 @@ export const dataThemesBrands = {
     color: "#8E81AF",
   },
 };
+/** used for switching in and out of compare mode @see {@link widgets/EodashMapBtns.vue} */
+export const switchToCompare = ref(true);

package/dist/client/{DashboardLayout-BX3Sm_Vx.js → DashboardLayout-t_PavJPO.js}

@@ -1,7 +1,7 @@
 import { createBlock, openBlock, withCtx, createElementVNode, normalizeStyle, unref, createElementBlock, createCommentVNode, Suspense, resolveDynamicComponent, mergeProps, Fragment, renderList, Transition } from 'vue';
 import '@eox/layout';
-import { _ as _export_sfc, F as useDefineTemplate } from './asWebComponent-Df8nUiLs.js';
-import { V as VMain } from './VMain-eZDKIfmJ.js';
+import { _ as _export_sfc, F as useDefineTemplate } from './asWebComponent-BJ2NWunV.js';
+import { V as VMain } from './VMain-C3hN2-H3.js';
 
 const _hoisted_1 = ["gap"];
 const _hoisted_2 = ["id", "h", "w", "x", "y"];

package/dist/client/{DynamicWebComponent-BqoHM1np.js → DynamicWebComponent-y07rVJch.js}

@@ -1,5 +1,5 @@
 import { withAsyncContext, ref, onMounted, onUnmounted, createElementBlock, openBlock, createBlock, resolveDynamicComponent, mergeProps } from 'vue';
-import { $ as useSTAcStore } from './asWebComponent-Df8nUiLs.js';
+import { Z as useSTAcStore } from './asWebComponent-BJ2NWunV.js';
 
 const _hoisted_1 = { class: "d-flex flex-column fill-height overflow-auto" };
 

package/dist/client/{EodashDatePicker-BoWV2vc8.js → EodashDatePicker-CcOfyzGD.js}

@@ -1,89 +1,9 @@
-import { resolveComponent, render, h, mergeProps, useCssVars, ref, useTemplateRef, customRef, computed, reactive, toRef, watch, onMounted, createElementBlock, openBlock, createVNode, unref, createSlots, withCtx, createElementVNode, withDirectives, createCommentVNode, createBlock, toHandlers } from 'vue';
+import { useCssVars, ref, useTemplateRef, customRef, computed, reactive, toRef, watch, onMounted, createElementBlock, openBlock, createVNode, unref, createSlots, withCtx, createElementVNode, withDirectives, createCommentVNode, createBlock, mergeProps, toHandlers } from 'vue';
 import { DatePicker } from 'v-calendar';
-import { E as isObject, Y as consoleError, r as useDisplay, Z as datetime, $ as useSTAcStore, a0 as eodashCollections, a1 as collectionsPalette, a2 as makePanelTransparent, V as VBtn, v as VIcon } from './asWebComponent-Df8nUiLs.js';
+import { r as useDisplay, Y as datetime, Z as useSTAcStore, $ as eodashCollections, a0 as collectionsPalette, a1 as makePanelTransparent, V as VBtn, v as VIcon } from './asWebComponent-BJ2NWunV.js';
 import { mdiRayEndArrow, mdiRayStartArrow } from '@mdi/js';
 import log from 'loglevel';
-import { V as VTooltip } from './VTooltip-BMsliOuh.js';
-
-// Utilities
-function useDirectiveComponent(component, props) {
-  const concreteComponent = typeof component === 'string' ? resolveComponent(component) : component;
-  const hook = mountComponent(concreteComponent, props);
-  return {
-    mounted: hook,
-    updated: hook,
-    unmounted(el) {
-      render(null, el);
-    }
-  };
-}
-function mountComponent(component, props) {
-  return function (el, binding, vnode) {
-    const _props = typeof props === 'function' ? props(binding) : props;
-    const text = binding.value?.text ?? binding.value ?? _props?.text;
-    const value = isObject(binding.value) ? binding.value : {};
-
-    // Get the children from the props or directive value, or the element's children
-    const children = () => text ?? el.textContent;
-
-    // If vnode.ctx is the same as the instance, then we're bound to a plain element
-    // and need to find the nearest parent component instance to inherit provides from
-    const provides = (vnode.ctx === binding.instance.$ ? findComponentParent(vnode, binding.instance.$)?.provides : vnode.ctx?.provides) ?? binding.instance.$.provides;
-    const node = h(component, mergeProps(_props, value), children);
-    node.appContext = Object.assign(Object.create(null), binding.instance.$.appContext, {
-      provides
-    });
-    render(node, el);
-  };
-}
-function findComponentParent(vnode, root) {
-  // Walk the tree from root until we find the child vnode
-  const stack = new Set();
-  const walk = children => {
-    for (const child of children) {
-      if (!child) continue;
-      if (child === vnode || child.el && vnode.el && child.el === vnode.el) {
-        return true;
-      }
-      stack.add(child);
-      let result;
-      if (child.suspense) {
-        result = walk([child.ssContent]);
-      } else if (Array.isArray(child.children)) {
-        result = walk(child.children);
-      } else if (child.component?.vnode) {
-        result = walk([child.component?.subTree]);
-      }
-      if (result) {
-        return result;
-      }
-      stack.delete(child);
-    }
-    return false;
-  };
-  if (!walk([root.subTree])) {
-    consoleError('Could not find original vnode, component will not inherit provides');
-    return root;
-  }
-
-  // Return the first component parent
-  const result = Array.from(stack).reverse();
-  for (const child of result) {
-    if (child.component) {
-      return child.component;
-    }
-  }
-  return root;
-}
-
-// Components
-const Tooltip = useDirectiveComponent(VTooltip, binding => {
-  return {
-    activator: 'parent',
-    location: binding.arg?.replace('-', ' '),
-    text: typeof binding.value === 'boolean' ? undefined : binding.value
-  };
-});
+import { T as Tooltip } from './index-Cv7HBz49.js';
 
 const _hoisted_1 = {
   ref: "rootRef",

package/dist/client/{EodashItemFilter-127fZLyK.js → EodashItemFilter-B9HCvIMi.js}

@@ -1,5 +1,5 @@
 import { computed, ref, createElementBlock, openBlock, mergeProps, unref, createElementVNode, toDisplayString } from 'vue';
-import { r as useDisplay, $ as useSTAcStore } from './asWebComponent-Df8nUiLs.js';
+import { r as useDisplay, Z as useSTAcStore } from './asWebComponent-BJ2NWunV.js';
 import '@eox/itemfilter';
 
 const _hoisted_1 = [".items"];

package/dist/client/{EodashLayerControl-B-pZaizw.js → EodashLayerControl-KStn7Nb_.js}

@@ -3,7 +3,7 @@ import '@eox/layercontrol';
 import '@eox/jsonform';
 import '@eox/timecontrol';
 import 'color-legend-element';
-import { $ as useSTAcStore, a3 as mapCompareEl, a4 as mapEl, a5 as eodashCompareCollections, a0 as eodashCollections, a6 as layerControlFormValue, a7 as getColFromLayer } from './asWebComponent-Df8nUiLs.js';
+import { Z as useSTAcStore, a2 as mapCompareEl, a3 as mapEl, a4 as eodashCompareCollections, $ as eodashCollections, a5 as layerControlFormValueCompare, a6 as layerControlFormValue, a7 as getColFromLayer } from './asWebComponent-BJ2NWunV.js';
 import { storeToRefs } from 'pinia';
 
 const _hoisted_1 = { class: "d-flex flex-column fill-height overflow-auto" };
@@ -19,6 +19,8 @@ const _sfc_main = {
   __name: 'EodashLayerControl',
   props: {
   map: {
+    /** @type {import("vue").PropType<"first" | "second">} */
+    //@ts-expect-error todo
     type: String,
     default: "first",
   },
@@ -107,7 +109,11 @@ const debouncedHandleDateTime = (evt) => {
  * @param {Event & {detail:{layer:import("ol/layer").Layer;jsonformValue:Record<string,any>}}} evt
  */
 const onLayerConfigChange = (evt) => {
-  layerControlFormValue.value = evt.detail.jsonformValue;
+  if (props.map === "second") {
+    layerControlFormValueCompare.value = evt.detail.jsonformValue;
+  } else {
+    layerControlFormValue.value = evt.detail.jsonformValue;
+  }
 };
 
 

package/dist/client/{EodashLayoutSwitcher-DwexHfOD.js → EodashLayoutSwitcher-DqeFO3RN.js}

@@ -1,7 +1,7 @@
 import { ref, createElementBlock, openBlock, createVNode, withCtx, mergeProps } from 'vue';
-import { a2 as makePanelTransparent, v as VIcon, al as activeTemplate } from './asWebComponent-Df8nUiLs.js';
+import { a1 as makePanelTransparent, v as VIcon, ap as activeTemplate } from './asWebComponent-BJ2NWunV.js';
 import { mdiViewDashboard } from '@mdi/js';
-import { V as VTooltip } from './VTooltip-BMsliOuh.js';
+import { V as VTooltip } from './VTooltip-B0Q3iHMZ.js';
 
 const _sfc_main = {
   __name: 'EodashLayoutSwitcher',

package/dist/client/{EodashMapBtns-Jfn3bpWD.js → EodashMapBtns-5BF27qJB.js}

@@ -1,9 +1,10 @@
-import { computed, ref, createElementBlock, openBlock, createBlock, createCommentVNode, createVNode, unref, withCtx } from 'vue';
-import { _ as _export_sfc, r as useDisplay, a2 as makePanelTransparent, V as VBtn, ae as availableMapProjection, af as changeMapProjection, ag as setActiveTemplate } from './asWebComponent-Df8nUiLs.js';
-import { mdiMapPlus, mdiEarthBox, mdiCompare } from '@mdi/js';
-import ExportState from './ExportState-Ckcb6u01.js';
-import _sfc_main$1 from './PopUp-D3IyjsN4.js';
-import _sfc_main$2 from './EodashItemFilter-127fZLyK.js';
+import { computed, ref, createElementBlock, openBlock, createBlock, createCommentVNode, createVNode, unref, withCtx, triggerRef } from 'vue';
+import { _ as _export_sfc, Z as useSTAcStore, r as useDisplay, ae as switchToCompare, a1 as makePanelTransparent, V as VBtn, af as availableMapProjection, ag as changeMapProjection, ah as setActiveTemplate } from './asWebComponent-BJ2NWunV.js';
+import { mdiCompare, mdiCompareRemove, mdiMapPlus, mdiEarthBox } from '@mdi/js';
+import ExportState from './ExportState-C0QRemK1.js';
+import _sfc_main$1 from './PopUp-DgNrh9Df.js';
+import _sfc_main$2 from './EodashItemFilter-B9HCvIMi.js';
+import { storeToRefs } from 'pinia';
 
 const _sfc_main = {
   __name: 'EodashMapBtns',
@@ -17,25 +18,48 @@ const _sfc_main = {
     default: true,
   },
   compareIndicators: {
-    type: Boolean,
+    /** @type {import("vue").PropType<boolean | {compareTemplate?:string;fallbackTemplate?:string}> }*/
+    type: [Boolean, Object],
     default: true,
   },
 },
   setup(__props) {
 
 
+const { selectedStac, selectedCompareStac } = storeToRefs(useSTAcStore());
 const { smAndDown } = useDisplay();
 const popupWidth = computed(() => (smAndDown ? "70%" : "500px"));
 const popupHeight = computed(() => (smAndDown ? "90%" : "500px"));
 
 const showMapState = ref(false);
 const showCompareIndicators = ref(false);
+const compareIcon = computed(() =>
+  switchToCompare.value ? mdiCompare : mdiCompareRemove,
+);
+const onCompareClick = () => {
+  if (switchToCompare.value) {
+    showCompareIndicators.value = !showCompareIndicators.value;
+  } else {
+    switchToCompare.value = true;
+    const fallbackTemplate =
+      (typeof __props.compareIndicators === "object" &&
+        __props.compareIndicators.fallbackTemplate) ||
+      "expert";
+    selectedCompareStac.value = null;
+    setActiveTemplate(fallbackTemplate);
+    triggerRef(selectedStac);
+  }
+};
 
 /** @type {import("vue").Ref<HTMLDivElement|null>} */
 const rootRef = ref(null);
 
 const onSelectCompareIndicator = () => {
-  setActiveTemplate("compare");
+  const compareTemplate =
+    (typeof __props.compareIndicators === "object" &&
+      __props.compareIndicators.compareTemplate) ||
+    "compare";
+  setActiveTemplate(compareTemplate);
   showCompareIndicators.value = !showCompareIndicators.value;
 };
 
@@ -76,13 +100,13 @@ return (_ctx, _cache) => {
       ? (openBlock(), createBlock(VBtn, {
           key: 3,
           class: "map-btn",
-          icon: [unref(mdiCompare)],
-          onClick: _cache[3] || (_cache[3] = $event => (showCompareIndicators.value = !showCompareIndicators.value))
+          icon: [compareIcon.value],
+          onClick: onCompareClick
         }, null, 8 /* PROPS */, ["icon"]))
       : createCommentVNode("v-if", true),
     createVNode(_sfc_main$1, {
       modelValue: showCompareIndicators.value,
-      "onUpdate:modelValue": _cache[4] || (_cache[4] = $event => ((showCompareIndicators).value = $event)),
+      "onUpdate:modelValue": _cache[3] || (_cache[3] = $event => ((showCompareIndicators).value = $event)),
       maxWidth: popupWidth.value,
       maxHeight: popupHeight.value
     }, {
@@ -102,6 +126,6 @@ return (_ctx, _cache) => {
 }
 
 };
-const EodashMapBtns = /*#__PURE__*/_export_sfc(_sfc_main, [['__scopeId',"data-v-37c140ec"]]);
+const EodashMapBtns = /*#__PURE__*/_export_sfc(_sfc_main, [['__scopeId',"data-v-da630fa1"]]);
 
 export { EodashMapBtns as default };