Eodash Store
eodash fetches the SpatioTemporal Asset Catalog (STAC) endpoint assigned in the client configuration, navigates through its links, and assigns the result to its store. The store is then exposed to users, giving them the ability to read or modify the state of the dashboard at runtime.
The store is divided into three areas:
states- reactive values that drive the dashboard. They use the Vue reactivity system, so reading or writing a state updates the interface accordingly.actions- functions that operate on the states, either by fetching new data or by triggering changes to existing states.stac- a Pinia store that holds the STAC catalog navigation: the root catalog links, the selected STAC object, and the actions to load them.
States - store.states
| Property | Type | Description |
|---|---|---|
currentUrl | Ref<string> | Currently selected STAC endpoint |
currentCompareUrl | Ref<string> | Currently selected compare STAC endpoint |
datetime | Ref<string> | Currently selected datetime |
indicator | Ref<string> | Currently selected indicator |
compareIndicator | Ref<string> | Currently selected compare indicator |
mapPosition | Ref<(number | undefined)[]> | Current map position |
registeredProjections | string[] | |
availableMapProjection | Ref<string> | available projection to be rendered by EodashMap |
mapEl | Ref<EOxMap | null> | |
mapCompareEl | Ref<EOxMap | null> | |
activeTemplate | Ref<string> | |
poi | Ref<string> | Selected point of interest, used for location collections |
comparePoi | Ref<string> | Selected point of interest for comparison, used for location collections |
isGlobe | Ref<boolean> | Whether the map is in globe mode |
areChartsSeparateLayout | Ref<boolean> | Whether the charts are in fullscreen mode |
chartData | Ref<Record<string,any>|null> | Holds main chart data |
compareChartData | Ref<Record<string,any>|null> | Holds compare chart data |
chartSpec | Ref<VisualizationSpec | null> | Holds main chart spec |
compareChartSpec | Ref<VisualizationSpec | null> | Holds compare chart spec |
Actions - store.actions
| Action | Signature | Description |
|---|---|---|
getLayers | () | Returns the current layers of mapEl |
getCompareLayers | () | Returns the current layers of mapCompareEl |
registerProjection | (projection) => Promise | Register EPSG projection in eox-map |
changeMapProjection | (projection) => Promise | Change eox-map projection from an EPSG projection |
setActiveTemplate | (template) | |
includesProcess | (collection, compare?) | Check whether the collection needs an EodashProcess Widget |
shouldShowChartWidget | (compare?) | Check whether main or compare chart have data to show |
STAC store - store.stac.useSTAcStore()
The STAC catalog navigation pinia store. Call store.stac.useSTAcStore() to access these properties.
| Property | Type | Description |
|---|---|---|
stacEndpoint | Ref<string| null> | STAC catalog endpoint URL |
isApi | Ref<boolean> | |
stac | Ref<StacLink[] | null> | Links of the root STAC catalog |
init | (endpoint) | Initializes the store by assigning the STAC endpoint. |
loadSTAC | (url) => Promise | Fetches root stac catalog and assign it to stac |
loadSelectedSTAC | (relativePath?, isPoi?, stacItem) => Promise | Fetches selected stac object and assign it to selectedStac |
loadSelectedCompareSTAC | (relativePath?, isPOI?) => Promise | Fetches selected stac object and assign it to selectedCompareStac |
resetSelectedCompareSTAC | () => Promise | Reset selected compare stac object |
selectedStac | Ref<StacCollection | null > | Selected STAC object. |
selectedCompareStac | Ref<StacCollection | null > | Selected STAC object. |
selectedItem | Ref<StacLink | StacItem | null> | Currently selected item |
supportedUpscalingEndpoints | Ref<string[]> | List of supported endpoints for upscaling |
URL Query Parameters
A subset of the states is mirrored to the URL query string, so a dashboard can be deep-linked and restored to a specific view. On load these parameters are read into the store; while the user navigates they are written back, keeping the URL shareable.
| Parameter | State | Description |
|---|---|---|
template | activeTemplate | The active template id. |
indicator | indicator | The selected dataset (sub-code id of a STAC link). |
poi | poi | Point of interest passed to the dataset's process service. |
x, y, z | mapPosition | Map center longitude, latitude, and zoom. |
datetime | datetime | Selected date (YYYY-MM-DD). |
Importing the store
The same store API is exported from several entry points; pick the one that matches how the dashboard is configured.
| Configuration | Import |
|---|---|
| Build-time (SPA) | import { store } from "@eodash/eodash" |
| Web component inside a bundled app | import { store } from "@eodash/eodash/webcomponent" |
Runtime (config.js) | const store = window.eodashStore |
| Runtime (web component build) | import { store } from "/.eodash/dist/eo-dash.js" |