IDEAS_I4 custom area API integration

Ideas I4 custom area chart implementation

Task

Mockup of target integration:

Integrate following endpoint https://api.ideas.adamplatform.eu/areas as a series of custom bar charts showing a view on the data for all possible values for 1 selected parameter (scenarios, storm surge, years, confidence).

API description

The API expects a JSON object data in the following format:

{
    "geometry": {
        "type": "Polygon",
        "coordinates": [
            [
                [-79.6884731, 0.9742484],
                [-79.6887841, 0.9132887],
                [-79.5805495, 0.9139107],
                [-79.5836597, 0.9739374],
                [-79.6884731, 0.9742484]
            ]
        ]
    },
    "ssp": "ssp119",
    "confidence": "medium",
    "storm_surge": "1_0",
    "year": 2040
}

Here are the details of the parameters and the allowed values for each:

ssp: This parameter specifies the Shared Socioeconomic Pathway scenario. Allowed values are:
```
- ssp119
- ssp126
- ssp245
- ssp370
- ssp585
```
confidence: This parameter indicates the confidence level of the data. Allowed values are:
```
- medium
- low
```
storm_surge: This parameter specifies the storm surge level in meters. Allowed values are:
```
- 0_0
- 0_5
- 1_0
- 1_5
- 2_0
- 3_0
- 5_0
```
year: This parameter indicates the year for which the inundation map is requested. Allowed values are:
```
- 2040
- 2060
- 2080
- 2100
- 2120
- 2150
```

These allowed values match our dropdown options configured in display.wmsVariables.variables and the display.wmsVariables.variables.selected hold the currently selected value for each of the parameters. Year is supposed to be taken from time parameter.

Sample returned response:

{ 'GHS_POP_E2020_GLOBE': 64.03273681491615, 'GHS_BUILT_S_E2020_GLOBE': 13572.0, 'ESA_WORLD_CEREAL_SECOND_MAIZE_CLASSIFICATION': 89684804.96220013, 'ESA_WORLD_CEREAL_SPRINGCEREALS': 0, 'ESA_WORLD_CEREAL_WINTERCEREALS': 89684804.96220013 }

additional UI elements:

as seen on UI mockup above, a new UI component (self contained) should be created and included in DataPanel.vue which would

1) allow to select from 4 radio buttons scenarios, storm surge, years, confidence 2) On change of this parameter, a set of requests (2-7, depending on parameter) is sent for all allowed values of this parameter, filling the rest of placeholder parameters of the request to API by the selected values options of the WMS visualisation 3) These requests are aggregated to a set of 3 bar charts - 1 for each parameter of GHS_POP_E2020_GLOBE - population, GHS_BUILT_S_E2020_GLOBE - urban, sum of all other 3 parameters of "ESA_WORLD_CEREAL_SECOND_MAIZE_CLASSIFICATION","ESA_WORLD_CEREAL_SPRINGCEREALS""ESA_WORLD_CEREAL_WINTERCEREALS"} == Agriculture, where the number of columns of chart corresponds to the number of requests sent.

triggered when?

This API call will be manually on clicking a new Button (being part of the Vue component): ideally the button will also show a loading animation, not allowing further triggering (https://github.com/eurodatacube/eodash/blob/staging/app/src/components/GTIFProcessingButtons.vue#L12-L19)

example request data from CURL

curl -H "Content-Type: application/json" -d '{"geometry":{"type":"Polygon","coordinates":[[[-79.6884731,0.9742484],[-79.6887841,0.9132887],[-79.5805495,0.9139107],[-79.5836597,0.9739374],[-79.6884731,0.9742484]]]},"ssp":"ssp119","confidence":"medium","storm_surge":"1_0","year":2040}' -X POST https://api.ideas.adamplatform.eu/areas

cc @santilland @UndeadFairy

eurodatacube / eodash