Widgets

The eodash client acts as a micro-frontend host. It exposes a store to share STAC data and state between widgets. eodash offers a grid based layout system; widgets are placed on the dashboard through the layout property. The placement is backed by the EOxElements @eox/layout element. Refer to the API to learn more.

Layout

Every placed widget takes a layout object that positions and sizes it on a 12-column grid:

• x - 0-indexed horizontal starting column (from 0 to 11)
• y - 0-indexed vertical starting row
• w - width, in grid columns (from 1 to 12)
• h - height, in grid rows

Each of these fields can be specified as a number (e.g., x: 0). They can also be a /-separated string to use different sizes/positions per screen size in mobile/tablet/desktop order (with breakpoints at 960px and 1920px). A missing segment falls back to the previous one.

// fixed: 3 columns wide, starting at column 9
layout: { x: 9, y: 1, w: 3, h: 12 }

// responsive: full width on mobile, half on tablet, a quarter on desktop
layout: { x: 1, y: 1, w: "12/6/3", h: 12 }

Type of Widgets:

eodash supports the integration of three widget types iframes, web-components, and internal:

Web Component Widgets

Learn how to integrate Web Components that are developed using Custom Elements specification by referring to the guide and API.

IFrame Widgets

Integrating micro-frontend standalone apps and HTML files using an IFrame. Check out the API for further information.

Example

const myIframe =  new URL('./assets/iframe.html', import.meta.url).href // in-project HTML file
//or
const myIframe = "https://eox-a.github.io/EOxElements" // external URL

export default createEodash({
    ...
    template: {
        ...
        widgets:[
             {
               id: Symbol(),
               type: "iframe",
               layout: { x: 4, y: 0, h: 3, w: 3 },
               title: "Iframe Example",
               widget: {
                 src: myIframe
               }
             }
            ...
        ]
    }
})

Internal Widgets

Eodash provides Internal Widgets as extendable Vue Components that are maintained within the package. Along with these, users can also define their own Vue Components. A guide is available to learn more. For further information, you can refer to the API.

Functional Widgets

Functional widgets are a special form of widget rendered through the defineWidget function on STAC object selection. The function receives the selected STAC object (and the compare selection, when present) and returns a static widget config - including its layout - or a falsy value to render nothing. The widget re-renders only when the id of the returned config changes, which lets you switch or hide widgets based on the current state or indicator.

Example based on the existence of a WMS relation

In the following example a widget is configured based on whether a WMS relation is found in the selected STAC object links. An eox-stacinfo web component is rendered if no relation is found. An eox-map web component is rendered whenever a relation is found, and re-rendered when the wmsLink["wms:layers"][0] value changes.

import { store } from "@eodash/eodash"

const { currentUrl } = store.states

export default createEodash({
    template: {
        ...
        widgets:[
            {
              defineWidget: (selectedSTAC) => {
                const wmsLink = selectedSTAC?.links.find((link) => link.rel == "wms") ?? false;
                return wmsLink
                  ? {
                    id: `${wmsLink["wms:layers"][0]} Map`,
                    title: "Map",
                    type: "web-component",
                    layout: { x: 9, y: 0, w: 3, h: 12 },
                    widget: {
                      link: "https://cdn.skypack.dev/@eox/map",
                      properties: {
                        class: "fill-height fill-width",
                        center: [15, 48],
                        layers: [
                          {
                            type: "Tile",
                            source: {
                              type: "TileWMS",
                              url: wmsLink.href,
                              params: {
                                LAYERS: wmsLink["wms:layers"],
                                TILED: true,
                              },
                              ratio: 1,
                              serverType: "geoserver",
                            },
                          },
                        ],
                      },
                      tagName: "eox-map",
                    },
                  }
                  : {
                    id: "Information",
                    title: "Information",
                    type: "web-component",
                    layout: { x: 9, y: 0, w: 3, h: 12 },
                    widget: {
                      link: () => import("@eox/stacinfo"),
                      tagName: "eox-stacinfo",
                      properties: {
                        for: currentUrl,
                        allowHtml: "true",
                        styleOverride:
                          "#properties li > .value {font-weight: normal !important;}",
                        header: "[]",
                        subheader: "[]",
                        properties: '["description"]',
                        featured: "[]",
                        footer: "[]",
                      },
                    },
                  };
              },
            },
            ...
        ]
    }
})

Background Widget

Defining a Background Widget which is typically used for setting the map.

Example

export default createEodash({
    template: {
        ...
        background: {
           id: Symbol(),
           type: "internal",
           widget: {
             name: "EodashMap",
           },
         },
    }
})

Loading Widget

You can set a loading spinner or animation using any widget type, the configured widget will be displayed as a fallback for the dashboard's suspense states.

Example

export default createEodash({
    template: {
        ...
        loading: {
            id: Symbol(),
            type: "web-component",
            widget: {
              // https://uiball.com/ldrs/
              link: "https://cdn.jsdelivr.net/npm/ldrs/dist/auto/mirage.js",
              tagName: "l-mirage",
              properties: {
                class: "align-self-center justify-self-center",
                size: "120",
                speed: "2.5",
                color: "#004170"
              }
            }
        },
    }
})