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 & { mapUpdateId?: number } | 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
errorState	Ref<{message: string, details: string, severity: "error" | "warning" | "info"}>	Global error state
loading		Global loading state. - loading.activeLoads — increment/decrement to track concurrent loads - loading.value — derived boolean, true when activeLoads > 0
tooltipAdapter	Ref<((param: {key: string, value: any}, map?: string) => {key: string, value: any} | undefined) | null>	Adapter allows external widgets to hook into tooltip property transformation

Actions - store.actions

Action	Signature	Description
getLayers	()	Returns the current layers of mapEl.
getCompareLayers	()	Returns the current layers of mapCompareEl.
assignLayers	(map, layers, event) => Promise	Assigns layers to an EOxMap instance and emits an update event when provided.
registerProjection	(projection) => Promise	Registers a spatial projection definition globally in proj4 and OpenLayers.
changeMapProjection	(projection) => Promise	Changes eox-map projection to an EPSG projection.
setDatetime	(value) => Promise	Sets the datetime the dashboard shows and rebuilds the data layers to match. An open compare pane follows the same datetime.
setActiveTemplate	(template)
includesProcess	(collection, compare?)	Checks whether the collection requires an EodashProcess widget.
shouldShowChartWidget	(compare?)	Checks whether the main or compare chart has data to display.

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
rasterEndpoint	Ref<string | null>	Raster endpoint URL
configRenders	Record<string, Record<string, Render>>	TiTiler render presets from the eodash configuration, keyed by collection id then render name. Take precedence over a collection's own renders.
isApi	Ref<boolean>
stac	Ref<STACLink[] | null>	Links of the root STAC catalog
init	(endpoint, renders)	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 the selected STAC object and assigns it to selectedStac.
loadSelectedCompareSTAC	(relativePath?, isPOI?, stacItem) => Promise	Fetches the selected STAC object and assigns it to selectedCompareStac.
resetSelectedCompareSTAC	() => Promise	Reset selected compare stac object
selectedStac	Ref<STACCollection | null>	Selected STAC object.
selectedCompareStac	Ref<STACCollection | null>	Selected compare STAC object.
selectedItem	Ref<STACItem | null | undefined>	Currently selected item
selectedCompareItem	Ref<STACItem | null | undefined>	Currently selected compare item
supportedUpscalingEndpoints	Ref<Array<string | { url: string; titilerVersion?: 1 | 2, scaleFactor?: number; }>>	List of supported endpoints for upscaling. scaleFactor for v1 corresponds to @nx suffix (max 4). scaleFactor for v2 multiplies base tile size of 256px. Default scaleFactor is 2.
colormapRegistry	Ref<Record<string, string[]> | null>	Registry of colormap ranges
loadColormapRegistry	(registry) => Promise	Loads the colormap registry from a URL or object
tileMatrixSetRegistry	Ref<Record<string, any> | null>	Custom registry of TileMatrixSets that replaces the default eodash registry
loadTileMatrixSetRegistry	(registry) => Promise	Loads the tileMatrixSet registry from a URL or object

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"