The Simple Table Component visualises tabular data directly received from EMIKAT API. It visualises the data “as-is”, which means, it does not perform any aggregation in contrast to the now deprecated Table Component which used to access the now deprecated table-state-rest-api.
Specialised tables for EU-GL Steps EE, HC, HC-LE, RA/IA and AAOP are implemented as separate components. The main components are:
A Generic EMIKAT Client that communicates with the EMIKAT API and accepts as render prop an arbitrary JSX Component that is able to understand the EMIKAT Data Format and visualises the data retrieved by the client component, e.g. the <GenericEmikatTable>. It accepts furthermore emikatParameters props which control how the EMIKAT template URL is parameterised.
Example template URL and the parameterised URL for Hazard with Local Effects for study with id 3189:
https://service.emikat.at/EmiKatTst/api/scenarios/${EMIKATHelpers.EMIKAT_STUDY_ID}/feature/${emikatView}/table/data?rownum=${EMIKATHelpers.ROWNUM}&filter=SZ_ID=${EMIKATHelpers.EMIKAT_STUDY_ID}- https://service.emikat.at/EmiKatTst/api/scenarios/3189/feature/view.2974/table/data?rownum=1000&filter=SZ_ID=3189
The related response (excerpt):
{
"name": "MAP Local Effects- Mean, UTCI and Apperent Temperature, Discomfort level",
"description": "Display of Mean, UTCI and Apperent Temperature and Discomfort level for different Scenarios",
"columnnames": [
"GRID_ID",
"MULTIPOLYGON",
"STUDY_VARIANT",
"TIME_PERIOD",
"EMISSIONS_SCENARIO",
"EVENT_FREQUENCY",
"T_MRT",
"T_UTCI",
"T_A",
"DISCOMFORT_LEVEL",
"SZM_SZENARIO_REF"
],
"rows": [
{
"rownum": 0,
"values": [
"500mE55225N17605",
"POLYGON ((5522500 1760500, 5523000 1760500, 5523000 1761000, 5522500 1761000, 5522500 1760500))",
"BASELINE",
"20110101-20401231",
"rcp26",
"Rare",
69.03435672650336,
54.30440831904718,
37.40195635643778,
5,
3189
]
},All EMIKAT Service Endpoints including some examples are listed here.
The DownloadButton is a component similar to the GenericEmikatClient, except that it provides an UI for selecting the format of the data retrieved from EMIKAT API and forces the browser to download the data instead of forwarding it to a separate render component.
While specialised tables may modify the response, e.g. by reformatting data or hiding columns, the DownloadButton just downloads the unprocessed data received from EMIKAT API. Furthermore, the query parameter / prop rownum that controls the maximum number of rows shown in a table is not recognized by the DownloadButton, it requests by default 25.000 rows.
A Generic Table Component based on ReactTable v6.0 that understand the JSON format of the EMIKAT API. It uses csis-helpers-js to translate the proprietary EMIKAT JSON format into a tabular format understood by ReactTable. It is the 'base class' of more specific tables like the ExposureTable. Specific tables can provide their own generateColumns and resolveData functions as props that control which columns are shown and how the data is formatted.
The Parameter Selection Component can wrap an EmikatClientComponent and a DownloadButton Component as render props and add a user interface for selection parameters related to a scenario, in particular time_period, emissions_scenario and event_frequency. The Parameter Selection Component thereby changes the respective emikatParameters props of the wrapped components. These props are used to parameterise the API template URL. More information on EMIKAT API parameters can be found in EMIKATHelpers.js.
Specialised Tables that implement some custom formatting of row values and custom selection of columns (not all of them are interesting for end users) are:
CharacteriseHazardTable for reference Study "Advanced Screening Alba Iulia" (CSIS ID: 33, EMIKAT ID: 3209):
CharacteriseHazardTable for reference Study "Advanced Screening Alba Iulia" (CSIS ID: 33, EMIKAT ID: 3209):
ExposureTable for reference Study "Advanced Screening Alba Iulia" (CSIS ID: 33, EMIKAT ID: 3209):
RiskAndImpactTable for reference Study "Advanced Screening Alba Iulia" (CSIS ID: 33, EMIKAT ID: 3209):
AdaptationOptionsAppraisalTable for reference Study "Advanced Screening Alba Iulia" (CSIS ID: 33, EMIKAT ID: 3209):
Same as RiskAndImpactTable. In addition shows also Adaptation Scenarios.
The same Unit Tests as for csis-helpers-js are performed. UI Integration Tests are implemented with help of cypress.io in repository csis-technical-validation.
Apart from that, the different table components can be manually tested locally with yarn start. Although they are served from localhost, the user must be logged-in in either csis or csis-dev.
Example URL for testing HazardLocalEffectsTable locally against study 3183 and Baseline Scenario:
http://localhost:3000/HazardLocalEffectsTable/?host=https://csis-dev.myclimateservice.eu&study_uuid=9359e741-df40-4bcd-9faf-2093b499c65c&study_area=POLYGON%20((16.346111%2048.223997,%2016.346111%2048.238634,%2016.376667%2048.238634,%2016.376667%2048.223997,%2016.346111%2048.223997))&emikat_id=3183&datapackage_uuid=2434ce93-93d4-4ca2-8618-a2de768d3f16&time_period=Baseline&emissions_scenario=Baseline&event_frequency=Rare
The application has been bootstrapped with create-react-app and uses the built-in build process . Node v12.x and yarn v1.x has to be installed locally.
Building and installing the app is straightforward:
yarn install
yarn build
yarn testThe dev branch is automatically built on cismet CI based on this pipeline definition.
Dependencies can be easily upgraded with npm-upgrade:
npx npm-upgrade
The advantage over yarn upgrade is that that package.json is updated with the new dependency version.
Although Simple Table Component is integrated in CI, deployment on CSIS is not automated. The following manual steps are required on cisis-dev.ait.ac.at and cisis.ait.ac.at:
sudo su docker
cd /docker/100-csis/drupal-data/web/apps/simple-table-component/
# reset yarn.lock
git reset --hard
# pull dev or master branch
git pull
# install latest dependencies (may update yarn.lock)
yarn install --network-concurrency 1
# build the app
yarn build
# clear drupal cache
docker exec --user 999 csis-drupal drush crNote: Commonly on DEV the dev branch and on master the master branch is used.
Unless the Scenario Analysis Component, this component does not use seamless.js to communicate with the CSIS Drupal System when embedded as iFrame. Instead, it can be configured by query parameters. Main reasons are that bidirectional communication between iFrame and main site is not required and that query parameters allow the app to be tested independently of CSIS.
The different tables are selected by the corresponding route, e.g. /AdaptationOptionsAppraisalTable for the AdaptationOptionsAppraisalTable. The query parameters supported by the table are:
hostCSIS API host (e.g. https://csis.myclimateservice.eu/)emikat_idinternal EMIKAT Study id (e.g. 3209)rownumnumber of rows requested from EMIKAT API (default: 3000)time_period(e.g. Baseline)emissions_scenario(e.g. Baseline)event_frequency(e.g. Frequent)
Query parameters are mapped to respective props in App.js. For more information on query parameters refer to CSISHelpers.defaultQueryParams and for props to GenericEmikatClient.propTypes and ParameterSelectionComponent.propTypes.
The application is integrated as "Extended iFrame" in CSIS Drupal System. The respective Drupal Nodes that contains the iFrame are listed here.
The application is configured via the aforementioned query parameters. The query parameters are extracted by csis_iframe_connector.js from the studyInfo object which is injected into the main Drupal CSIS Website via the CSIS Helpers Drupal Module, in particular by StudyInfoGenerator.php.
The "Extended iFrame" nodes are used in several EU-GL Step Templates as [Extended iFrame] Table Application, e.g. in EU-GL Steps Impact/Risk Assessment and Adaptation Options Appraisal.
MIT © cismet GmbH