ADA-UI - UI for Automated Damage Assessment

This code repository contains the user interface (UI) for the Automated Damage Assessment (ADA) project.

The UI visualizes the data provided by ADA-API on a map view.

A disaster manager can interpret information from the data visualized on the map to consider in their disaster response activities.

Frequently Asked Questions

Event

What is an Event?

• An Event refers to a disaster event anywhere in the world. An event can be caused by conflicts, accidents, or nature. Event information can be Restricted (protected by an Event Access Code) or Public (accessible to anyone). An event is identified by an Event Marker on the World View map.

How do I view an Event?

• Click on the Event Marker to open the Event Popup.
• If the Event is Public, the View Event button will be clickable.
• If the Event is Restricted, type in the Event Access Code.
• Click on the View Event button.
• The application will show the Event View map.

How do I change the numbers of People Affected, People Affected in Percentage, Building Damage, and Building Damage in Percentage for an Event?

• If you refer to the Total Statistics on the left side of the application which are shown under the About ADA, User Guide, and Disclaimer buttons,
• These numbers are from GET /api/events/{id}.
• To change these numbers, use PATCH /api/events/{id}.
• If you refer to the Admin Level Statistics on the map of the application which are shown in the admin area popups,
• These numbers are from GET /api/events/{id}/layer/{name}.
• To change these numbers, use POST /api/events/{id}/layer/{name}.

Event Layer

What is an Event Layer?

• An Event Layer is GeoJSON information of an Event which can be visualized on the Event View map.
• Examples of event layers are administrative boundaries, wealth index, population density, assessment area, building and building damage.
• An event layer can contain extra support information to be shown in information popups.

How to change the GeoJSON data visualized for an Event Layer?

• This data is from geojson of GET /api/events/{id}/layer/{name}.
• An example of a valid GeoJSON for administrative boundaries is,

  {
      "type": "FeatureCollection",
      "features": [
          {
              "type": "Feature",
              "properties": {
                  "people_affected": 6789,
                  "people_affected_percentage": 0.23,
                  "building_damage": 123,
                  "building_damage_percentage": 0.45
              },
              "geometry": {
                  "type": "MultiPolygon",
                  "coordinates": [
                      [
                          [
                              [95, 216],
                              [241, 253],
                              [175, 138],
                              [95, 216]
                          ]
                      ]
                  ]
              }
          }
      ]
  }

• Note that properties contain the keys people_affected, people_affected_percentage, building_damage, and building_damage_percentage. These numbers are shown in the admin area popup and are used to shade the admin areas.
• To change this data update geojson using POST /api/events/{id}/layer/{name}.

How to change the popup information text for the Event Layers?

• This data is from information of GET /api/events/{id}/layer/{name}.
• The value for information can be plain string or Markdown.
• To change this data update information using POST /api/events/{id}/layer/{name}.
• NOTE: information for administrative boundary event layers are not used in ADA-UI.

How do I change the legend for the visualized Event Layers?

• A legend is shown for each Event Layer visualized on the Event View map.
• Event Layers assessment area, wealth index, and population density have pre-defined static legends.
• Event Layers with buildings are also static but are grouped together for better readability.
• Event Layers that show admin level properties are calculated using properties in their geojson values.
• The following assumptions are taken to generate legible legends,
• Minimum value is 0.
• Maximum value is the largest property value found in geojson. The lowest possible maximum value is programmatically restricted to 1.
• 5 linearly divided categories are generated using the maximum value. For example, a maximum value of 2 will generate the categories, [ 0 - 0.4, 0.4 - 0.8, 0.8 - 1.2, 1.2 - 1.6, 1.6+ ].

Why do I not see any data on the map for an Event Layer?

1. Check if the geojson uploaded for the Event Layer is a valid geojson.
2. Check if the geojson features is a not empty array.
3. Check if the geojson features contain the property names used by the UI,
• Event Layers admin-{n} use people_affected, people_affected_percentage, building_damage, and building_damage_percentage
• Event Layer wealth-index uses rwi
• Event Layer population-density uses population_density
4. Check if the geojson features contain valid values for the property names.

Miscellaneous

How to change the popup information text for the About ADA, User Guide, and Disclaimer buttons?

• The information shown in these popups are from markdown assets within this repository.
• They are stored in src/assets/markdown directory.
• Change the content of these assets and rebuild the ADA-UI to effect any changes. A merge into main branch with commit prefix feat or fix will trigger a rebuild via continuous deployment.

Installation

$ npm install

Running the app

$ npm run start

Test

# unit tests
$ npm run test

# e2e tests
$ npm run e2e

License

This project is open source under the MIT LICENSE.

Support

Write to us at [email protected].