geobeyond / arpav-ppcv

La Piattaforma Proiezioni Climatiche per il Nord-Est propone proiezioni climatiche per il territorio del Nord-Est Italia attraverso undici indicatori.

Piattaforma Proiezioni Climatiche per il Nord-Est

This is the frontend component of the ARPAV-PPCV system.

Climate Projections Platform for North-Eastern Italy

About

This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 IT License.

Commissioned by & Data credits to

Designed and developed in Italy by

Install & development

This project uses the Yarn Package Manager .

Install dependencies

yarn install

Before launching the application, copy the contents of .env.example file to .env and edit Environment variables.

Launch application in development mode

yarn start

Open the browser and enter the following URL in the address bar

http://localhost:3000

Dependencies

• React: entire project is based on React;
• Redux: for state management;
• Redux-Saga: Side effects manager;
• Material UI: design system;
• Leaflet: library used for map visualization;
• ECharts: library used display the timeseries charts.

Project Structure

• src/app/index.tsx: application's entry point;
• src/app/pages/MapPage/index.tsx: main container, it's rendered throughout the application;
• src/app/pages: Application pages;
• src/app/components: React components;
• src/app/Services/API: APIs consumers, based on axios, to communicate with the server and other services such as Thredds;
• src/app/utils/theme.ts: Material UI theme customizations.
• src/locales/it/translation.json: Italian terms dictionary;
• src/app/pages/MapPage/slice: Redux and Redux-Saga management;
• src/utils: Utility functions.

Docker build command for production

docker build -t ppcv_frontend -f production.Dockerfile .

arpav-ppcv's Issues

Search by coordiantes

coordinates updated on map click;
2 buttons:

• center on point
• clear selections and center on start

Tolgee front-end integration

Add CI workflow to frontend repo

In a similar fashion as what is in place for the backend repo, the frontend repo needs a continuous integration pipeline working like this:

• on each commit to main branch, build the related docker image
• run any existing linters, formatters
• run any existing tests
• if everything passes, publish the built image to the repo's container registry. This must not use the github-generated creds, as we want to eventually also setup a Continuous Deployment workflow, triggered by the registry push

Valore annuale singolo punto

FR110

Publish to Netlify

Interrogazione mappa

FR109

WMS integration in front-end

The structure of the front-end revealed some complex issues to manage the WMS visualization, as the previous developers used an unmaintainable way to display the data. The culprit for many of the issues is the setupFrontLayer code, visilble here: https://github.com/venetoarpa/Arpav-PPCV/blob/c9bdd0eaf3f6e2d150ed9623d50501c9cc6a05ef/src/app/components/Map/ThreddsWrapperLayer.tsx#L25-L58

This method does not set up the front layer "per se", but decides based on a series of operations that the same layer could be deleted while being added.

Vector Tile usage inefficiency

The interface downloads the PBF vector tiles multiple times and this creates inefficiencies in both memory and response time for the interactions with the interface, with the additional issue that potentially polygons can change their ids making them even more difficult to find and to connect to.

This affects the resolution of the municipality from the click on the map, as well as the same operation from coordinates given via search form.

The issue can be problematic not at a single click, but after multiple clicks or interactions

add CD workflow

In a similar way as to what was done on the backend repo, lets have each new build of the docker image trigger a webhook that results in the deployment to the staging environment.

Front-end Translation management for non-interface items

Ricerca lat/lon

FR105