Coder Social home page Coder Social logo

table-components's Introduction

table-components

Table Components Building Block

table-components's People

Contributors

p-a-s-c-a-l avatar therter avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

table-components's Issues

Implement VA Table

Implement the VA Table following the Mock-Up and the approach described here.

Open Questions

This is the current VA Table Mock-Up:

grafik

@stefanon @bernhardsk: Does 'high', medium' 'low' make sense in this context? What are "vulnerability levels" and how are they calculated / defined? Is this mock-up still valid?

According to CLARITY tables_mod.xlsx, the VA table should rather look like:

grafik

Questions:

  • why different values for HW and PF? Shouldn't the table show the number/m³,m², ... of Elements at Risk for each vulnerability class in the study area? How can they be different for each Hazard?
  • what's then the difference to the EE Table, which shows also the elements at risk grouped by vulnerability classes?

Implement EE Table

Status:

  • GUI implementation ("html wireframe") as React AJAX web Application following the respective Product Mock-Ups
  • Integration into the respective GL-Step as External ReactMount Application
  • Design of a simplified internal state data model in JSON (the "table model") and definition of static JSON constants (example) as initial reference / example data based on the example table content from the mock-up screens.
  • the table contains the content for DC1 Reference study (The content will be retrieved from the table-state-rest-api)
  • Mapping of the actual Data Package Data Model to the internal JSON state data model with help of the JSON:API and/or REST Views and additional REST Micro Services for simple data aggregation and transformation.

Implement the EE Table following the Mock-Up and the approach described here.

EE Table GUI

grafik

Important Note: The Mock-Up seems to be outdated. It seems that a request for revision wasn't taken into account. Furthermore, future exposure scenarios as shown in the mock-up above are, if at all, expected to be supported in the expert workflow of DC2 only and for sure not in CSIS v1. Therefore we follow KISS and YAGNI and start with the following EE table example taken from this excel sheet.

grafik

HC Table state model

  • column 1: Hazard is the hazard 'applicable' to the exposed element
  • column 2: category to group several EE layers. Same categorisation as in the map-component and HC/HC-LE tables!
  • column 3: the vulnerability class, but essentially that's the name of the EE layer. For each vulnerability class, there will be a separate layer. So column 2 and column 3 define also the hierarchy of the map layer widget for the EE step!
  • column 4: absolute numerical value
  • column 5: the unit may become part of the class or name, respectively. (to be consistent with in the HC table which lacks a unit column good reasons)

Currently, no realistic example data is available. Example layers however will be reported in this issue.

Mapping Data Package to HC Table state model

Same approach as in Implement HC table:

  1. Fetch Data Package Meta Data and build WCS requests,
  2. Fetch data for each relevant layer from WCS, aggregate and transform to JSON state model.

Please expose the link for downloading the table data from EMIKAT

As discussed yesterday, @mattia-leone needs a simple way to download the table data in our studies.

@patrickkaleta and I looked at this today and this would be difficult to do from the drupal side. We do know the variable values but we do not know which data is shown where, so this would need to be hard-coded in drupal - not a good idea.

Therefore, I propose to do this in the CIS table component. Since the link will not work for normal users, ideally it should be hidden from them, based on their user role. E.g., the link could be shown to users with "editor" role. If a role is not already listed, then the helper module might need to be changed.

Show tooltips

Show tooltips for the damage classes from the taxonomy and show the cell content as tooltip

EMIKAT tables always show the same data

Not sure if it's because of EMIKAT or because of the table component, but https://csis.myclimateservice.eu/study/30/step/1613/view/table and https://csis.myclimateservice.eu/study/14/step/1651/view/table show exactly the same data.

One is in Naples and the other in Vienna. Not good. Not good at all. :-(

The same is true also for the impact tables

https://csis.myclimateservice.eu/study/14/step/1650/view/table
https://csis.myclimateservice.eu/study/30/step/1612/view/table

E.g., sort by population and this is what you will see:
image
image

Units in HC and EE table

The difference to the baseline value should be shown with an unit. So the table-rest-api should provide the units

Show Percentages

Show Percentages instead of absolute numbers for damage classes or provide an option box to switch between the two representation and make percentage view default.

Implement HC Events Table

We have to provide a table component that shows events relevant for the chosen study area. In the long term, it could replace the current HC Table.

Status:

  • GUI implementation ("html wireframe") as React AJAX web Application following this CSV Schema
  • Integration into the respective GL-Step as External ReactMount Application
  • Design of a simplified internal state data model in JSON (the "table model") and definition of static JSON constants (example) as initial reference / example data based on the example table content from the mock-up screens. The internal model should be identical to the JSON model implemented by EMIKAT REST API
  • Query EMIKAT REST API and retrieve all events (Baseline + all RCP/time combinations) and map to internal state model
  • Mapping of the actual Data Package Data Model to the internal JSON state data model with help of the JSON:API and/or REST Views and additional REST Micro Services for simple data aggregation and transformation.

Basic flow:

  • get meta information about EMIKAT REST API from Data Package (HC Resource) from cSIS REST API.
  • query EMIKAT Rest API with study area bbox to retrieve a table representative events for this area (30 events: 3 baseline and 27 future).

Goal is to show to the user a list of rare / frequent / occasional events in relation to RCP and time period so that he can make an informed choice for a RCP/time period of interest for impact calculation and adaption calculation.

For the table layout we start wit a simple list following the CSV structure, possibly highlighting the 3 baseline events.

Implement HC-LE Table

Implement the HC-LE Table according to the Mock-Up and following the approach described here.

HC-LE Table GUI

grafik

Important Note: The the Mock-Up seems to be outdated / invalid (to be discussed here). So at the the moment we should re-use the plain HC-Table.

HC-LE Table state model

tbd

Mapping Data Package to HC-LE Table state model

tbd

Implement AA Table

Status:

  • GUI implementation ("html wireframe") as React AJAX web Application following the respective Product Mock-Ups
  • Integration into the respective GL-Step as External ReactMount Application
  • Design of a simplified internal state data model in JSON (the "table model") and definition of static JSON constants (example) as initial reference / example data based on the json file
  • the table contains the content for DC1 Reference study
  • Mapping of the actual Data Package Data Model to the internal JSON state data model with help of the JSON:API and/or REST Views and additional REST Micro Services for simple data aggregation and transformation.

Implement the Adaptation Options Table

grafik

Adaptation Options Data from Data Package: clarity-h2020/csis#19 (comment)

Adaptation Measures Parameters v2.xlsx

hide/show table columns as a configuration option.

It would be good if we could add a configuration option to our table components (e.g. to https://csis.myclimateservice.eu/node/1413/edit) that would suppress showing of unnecessary table columns. Even better: also allow to show them in a different order if necessary.

Of course, we could change what EMIKAT is spitting out, but this would be a more robust solution/easier to change. It would even allow us to show one EMIKAT output as several tables, e.g. one table tor ambient temperature, second for UTCI and third for the radiation temperature if and when necessary.

this is how the configuration could look like for the local effects table

image

by the way, would it be possible to give each cell a 1,2,3...N number or a (N,M) pair corresponding to the place of the grid cell in a study? In my opinion, it would be much easier for the user to talk about cell (3,5) than about the 500mE46360N28055 cell.

Include information on Event Group/Type in RA/IA Table

In the RA/IA Table, information on the selected HW Scenario Name ("Event Group" or "Event Type") is missing:

grafik

In particular, the name of the HW Scenario / Event is missing (low, medium, high, very high). See also the table below that defines 3 of the currently 4 event groups:

grafik

@therter So maybe you can follow a similar approach as for the HC Table.

However, in the JSON obtained from EMIKAT REST API this information on the HW Event name as well as RCP and time period is not available: @bernhardsk @humerh

{
  "name": "TAB Impact Results for Impact Assessment Drupal Table",
  "description": null,
  "columnnames": [
    "HAZARD_EVENT_ID",
    "HAZEVENT_NAME",
    "IMPACTCASE_ID",
    "EARTYPE_ID",
    "NAME",
    "QUANTITYUNIT",
    "VULNERABILITYCLASS_ID",
    "VULCLASS_NAME",
    "EXPOSEDQUANTITY",
    "DAMAGELEVEL1QUANTITY",
    "DAMAGELEVEL2QUANTITY",
    "DAMAGELEVEL3QUANTITY",
    "DAMAGELEVEL4QUANTITY",
    "DAMAGELEVEL5QUANTITY",
    "SZM_SZENARIO_REF"
  ],
  "rows": [
    {
      "rownum": 0,
      "values": [
        3,
        "Heat wave 32°, 6 days",
        1,
        1,
        "people",
        "number of people",
        26,
        "Age 15-65",
        337355.6662325851,
        236277.49887164417,
        87214.87361277906,
        12877.203135764006,
        950.6682674434248,
        35.75970062065402,
        2846
      ]
    },

IMHO it would make sense to introduce a Event Category (low, medum, ...), so that I could use that that as aggregation criteria for Scenario Analysis (see clarity-h2020/scenario-analysis#9).

Implement RA/IA Table

Status:

  • GUI implementation ("html wireframe") as React AJAX web Application following the respective Product Mock-Ups
  • Integration into the respective GL-Step as External ReactMount Application
  • Design of a simplified internal state data model in JSON (the "table model") and definition of static JSON constants (example) as initial reference / example data from the EMICAT Rest Interface
  • the table contains the content for DC1 Reference study (The content will be retrieved from the emicat server). When this server contains the content for DC1 Reference study, the table will also contain this content
  • Mapping of the actual Data Package Data Model to the internal JSON state data model with help of the JSON:API and/or REST Views and additional REST Micro Services for simple data aggregation and transformation.

Implement the GUI following the description in this issue and the approach described here.

RA/IA Table GUI

The table shows the output of the impact model calculation. Note: The Mock-Ups aren't valid any more (see also clarity-h2020/csis#45 (comment)):

Outdated Mock-Up
grafik

Actual Mock-Up: The table should look like this:

grafik

RA/IA Table state model

  • Column 1: Hazard
  • Column 2: Exposure (Element at Risk) grouped by Hazard. e.g. Heat Wave has no impact on buildings or infrastructure, therefore there is no HW/Buildings Group.
  • Column 3: The Vulnerability Classes of the respective Element at Risk
  • Column 4: Unit
  • Column 5-8: number of elements at risk impacted by hazard and grouped by damage classification D1 - D4 (see legend)

Mapping Data Package to HC Table state model

The Impact is calculated by the Risk & Impact Calculation Service (EMIKAT), therefore the data for the table should be retrieved from the EMIKAT REST Service. Ideally, the JSON data obtained from EMIKAT matches directly the internal state model of the RA/IA Table. To be discussed with @bernhardsk and @humerh
The REST URI can be obtained from the path property of respective RA/IA Data Resource of the Data Package. However, since the table data is rather small, the JSON could be stored directly in the data property of the Data Resource.

Implement HC Table

Status:

  • GUI implementation ("html wireframe") as React AJAX web Application following the respective Product Mock-Ups
  • Integration into the respective GL-Step as External ReactMount Application
  • Design of a simplified internal state data model in JSON (the "table model") and definition of static JSON constants (example) as initial reference / example data based on the example table content from the mock-up screens
  • the table contains the content for DC1 Reference study (The content will be retrieved from the table-state-rest-api)
  • Mapping of the actual Data Package Data Model to the internal JSON state data model with help of the JSON:API and/or REST Views and additional REST Micro Services for simple data aggregation and transformation.

Implement GUI following the Mock-Up and the approach described here.

HC Table GUI

The table compares current conditions against three future scenarios (or 9 scenarios, if we take time periods into account)

  • Column 2 is the hazard related to the baseline scenario (current climate conditions)
  • columns 3-5 are the hazard for three different RCPs for one selected time period (e.g. 2020-2050).

What is missing in the mock-up are the different time periods (3 time periods). A drop-down select-box could be added. Selecting a different time period changes columns 3-5 only!

Initial Mock-Up
grafik

HC Table state model

  • Column 1: Hazard, possibly grouped! So maybe add an empty row for group name
  • Column 2: It can be low, medium, high or an absolute numerical value, depending on the hazard! In case of a numerical value, the unit should be shown (e.g. in header row). See clarity-h2020/data-package#8 (comment).
  • columns 3-5: low,medium, high
  • legend: example in mock-up invalid! low, medium, high has different meaning in column 2 than in columns 3-5! ignore colors in column 2, to be discussed later. legend for column 3-5: is low / medium / high increase with respect to the baseline climate

Correct Mock-Up (explanation here)
hazard_table_new

Example for grouping:
hazard_table_new

Mapping Data Package to HC Table state model

tbd @p-a-s-c-a-l
Table content is not part of the Data Package Meta-Data stored in CSIS! Data has to be obtained from WCS and has to be aggregated and normalised! Find possibilities for delegating this task, e.g. METEOGRID could implement a simple REST API that returns JSON compliant to the state model.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.