onaio / reveal-frontend

WebUI for the Reveal epidemiological surveillance platform

Reveal Frontend

This is the Reveal web application front end.

The structure of this repo is inherited from create-react-app.

Guidelines

• We try follow the BEM or Block Element Modifier guidelines for CSS.
• We strictly follow the three principles of redux.

Getting started

First, copy the included .env.sample into .env

cp .env.sample .env

Next install packages using yarn and then start the app:

yarn

yarn start

Configuration

The configurations are located in the configs directory and are split into two modules:

• env.ts: this module reads configurations from environemt variables
• settings.ts: this module holds more complicated configurations

Testing

yarn test

Run test and generate coverage report

Generating reports significantly slows down your tests. Therefore, use this option when you only need a coverage report.

yarn test:coverage

reveal-frontend's Issues

Add test for Gisida Wrapper Component

Add test for GisidaWrapper this includes testing helper functions we have used too. Currently we have one helper function i.e: ConfigStore. We may have more as we move along

Fix broken test

This one is broken in the master branch: https://circleci.com/gh/onaio/reveal-frontend/171

Implement Focus Investigation Web UI Reporting For Active Investigation (Map)

• Active Investigation Map

Add a way to persist oAuth access token

Right now you need to log in again to the web app whenever you refresh your browser.

This is because the oAuth2 access token is not currently persisted anywhere, it is just in memory.

This document recommends against storing the token anywhere in the browser.

This probably means that we may need some kind of backed just for storing the access token.

Use circle layer for points on Gisida maps

We should use circle layers for showing points (i.e. not polygons on the Gisida powered maps)

Create Custom Map Event Handlers

Gisida will be able to accept custom event handlers for various Mapbox Map mouse events.

• Clicking on a district zooms into that district
• Clicking on a operation area toggles its selection and inclusion in the campaign plan
• Mouse over default tooltip? Custom tooltip?

FI Map does not load when there are no tasks

Add structures to focus investigation map

This view displays a map of all activities performed against the plan. The right column displays progress against goals as defined in the previous page. Users can toggle on and off each layer.

• Add a sidebar component next to the map that lists the goals/targets from the plan object that represents the focus investigation
• When a goal on this sidebar is clicked, load its structures from the structures reducer (#41). Each goal may have one or more structures. The structures should be colored as defined in this document.

Notes:

• Colors are associated with each action (Intervention)
• Users can toggle the view to see each action
• The operational area outline is a tile instead of a geoJSON
• The circle around the index case is in view only if the Focus has an index case
• We haven't defined what happens when a user clicks on a point
• The mapbox style should be the same as Reveal

Change to using OpenSRP oAuth2

Currently using Ona Stage as an oAuth2 provider, we need to switch to OpenSRP.

Make active focus investigation table more generic

We should be able to render the active focus investigation table with any kind of hierarchical structure i.e. the hierarchy should not be hard coded but configurable.

Cleanup Gisida Wrapper Component

The code needs optimization and cleaning. We also should leverage the power of typescript in some instances on this component.

• moving strings/numbers/etc to the constants file

• refactoring code that might be weird

• use proper typing so that we can leverage Typescript

• writing tests

• removing unnecessary comments

Update goals reducer

According to https://github.com/onaio/canopy/issues/240, the task goals will be grouped by plan_id, goal_id and jurisdiction_id (this is new).

We need to update the tasks reducer to reflect this change.

Add IRS reporting

Add IRS plans to a new section in the Web UI so that we can report on IRS activities.

Rethink supersetFetch

The way supersetFetch is used in the focus investigation components might not be the best approach, because of:

• there must be a way to make this very similar code more DRY
• it complicates detecting whether the call to superset has been made or not (so that you can stop showing the loading component)
• it makes it very hard to test the components

Load tasks to the FI map when a goal is clicked on the sidebar

On the FI Map, the structures that are shown on the map need to be loaded whenever a goal is clicked on the sidebar. i.e. fetch the relevant tasks that correspond to that clicked goal in that jurisdiction for that plan and then display its structures on the map.

Build mSpray Tables with Drill-Down Functionality

The Web UI will need to display tabular mSpray data with the ability to drill down, with the flexibility to handle different contexts and data hierarchies (admin/OA boundaries, team structures, etc).

The table itself can be pretty straight forward, we can leverage reactstrap's Table component coupled with custom event handlers / controllers (to drill down), or utilize a 3rd party solution.

Ideally, this solution should be modular, testable, and reusable via the js-tools repo.

Update tasks reducer

New task objects look like:

{
  geojson: {
    geometry: {
      coordinates: [
        [
          [101.188427209854, 15.0909179029537],
          [101.18852108717, 15.0909179029537],
          [101.18852108717, 15.0910085427885],
          [101.188427209854, 15.0910085427885],
          [101.188427209854, 15.0909179029537],
        ],
      ],
      type: 'Polygon',
    },
    id: 'e652f8b2-b884-42d5-832a-86009c10a812',
    properties: {
      action_code: 'RACD Register Family',
      goal_id: 'RACD_register_family_1km_radius',
      jurisdiction_id: '450fc15b-5bd2-468a-927a-49cb10d3bcac',
      jurisdiction_name: 'TLv1_01',
      jurisdiction_parent_id: 'dad42fa6-b9b8-4658-bf25-bfa7ab5b16ae',
      plan_id: '10f9e9fa-ce34-4b27-a961-72fab5206ab6',
      structure_code: 'a19eeb63-45d0-4744-9a9d-76d0694103f6',
      structure_id: 'a19eeb63-45d0-4744-9a9d-76d0694103f6',
      structure_name: 'a19eeb63-45d0-4744-9a9d-76d0694103f6',
      structure_type: 'a19eeb63-45d0-4744-9a9d-76d0694103f6',
      task_business_status: 'Not Visited',
      task_execution_end_date: '2019-04-01',
      task_execution_start_date: '2019-04-08',
      task_focus: '95515b0d-b9c0-496e-83c7-7af8b4924d1f',
      task_status: 'Ready',
      task_task_for: 'a19eeb63-45d0-4744-9a9d-76d0694103f6',
    },
    type: 'Feature',
  },
  goal_id: 'RACD_register_family_1km_radius',
  jurisdiction_id: '450fc15b-5bd2-468a-927a-49cb10d3bcac',
  plan_id: '10f9e9fa-ce34-4b27-a961-72fab5206ab6',
  task_identifier: 'e652f8b2-b884-42d5-832a-86009c10a812',
}

Implement Focus Investigation Web UI Reporting For Active Investigation (Tables)

• Active Investigation Home
• Active Investigation - Individual Investigation

Install / Import / Instantiate Gisida and Gisida-React

This ticket tracks the work to install and import Gisida and Gisida-React libraries and instantiate the Map component and stores in the context of the Reveal Web UI.

• clone both repos locally
• switch to reveal branches and yarn install
• run yarn link in both repos
• run yarn link gisida && yarn link gisida-react in the reveal-frontend repo
• import both libraries into index.tsx or a wrapper component
• acquire Risk Data
• create site-config and layer config json files (#7)
• create or reference admin / operation area boundary geometries (#8)
• add gisida stores to redux store registry
• insert Map component (and sub-components) into the react app
• add custom styling to properly size and position the Map

Allow any url in DrillDownTableLinkedCell

Make it possible for DrillDownTableLinkedCell to work easily with any urlPath. i.e. it be possible to work with any kind of url.

This issue depends on onaio/js-tools#31

Add more tests for Superset connector usage

Specifically need to test how the doFetch method works within Reveal.

Add support for task_business_status_map in goals reducer

Goal objects now have a field called task_business_status_map which is an object that has the task business statuses for the goal and their counts. i.e.

export const goal = {
  action_code: "Mosquito Collection",
  completed_task_count: 3,
  goal_comparator: ">=",
  goal_id: "Mosquito_Collection_Min_3_Traps",
  goal_unit: "traps",
  goal_value: 3,
  id: "0f03cef6-1654-5bba-8898-1d2a8000e5b1",
  jurisdiction_id: "450fc15b-5bd2-468a-927a-49cb10d3bcac",
  measure: "Number of mosquito collection traps",
  plan_id: "10f9e9fa-ce34-4b27-a961-72fab5206ab6",
  task_business_status_map: {
    Complete: 3,
    'In Progress': 3,
    Incomplete: 1,
    'Not Eligible': 6,
    'Not Visited': 5,
  },
  task_count: 18,
}

We need to add support for this in goals reducer

Display outlines of all structures on the map view

Display outlines of all structures on the map view regardless of what’s clicked in the toggle on the right
Use the grey color style as Reveal Android Client that has opacity

Create IRS Plan Module Map Sidebar Component

This component should render Plan related information according to the mockups.

• Campaign / District Summary
• Risk layer and filter range-selector

Add tests for the map reducer

The map reducer currently has 0 tests.

Fix types in plan and goal ducks

There's some dirty hacks to be removed in the goal and plan reducer modules

• plan
• goal

---

This issue is part of pending work from #33

Create Boundary Tilesets

Gisida will use tilesets hosted on Mapbox Studio to render Administrative boundaries as line layers.

Add support for Gisida

Make it possible to embed Gisida as a component in any page.

Implement Focus Investigation CRUD

Make it possible to:

• Create Focus Investigations
• Edit Focus Investigations
• View Focus Investigations
• Delete Focus Investigations

Display bubbles when a user clicks on a structure

Display bubbles when a user clicks on a structure as defined in the data dictionary.

Update jurisdictions reducer

New jurisdiction objects from Superset look like this:

  {
    geojson: {
      geometry: {
        coordinates: [
          [
            [101.166915893555, 15.0715019595332],
            [101.165628433228, 15.069429992157],
            [101.164855957031, 15.0649130333519],
            [101.164898872375, 15.061473449978],
            [101.165843009949, 15.0585311116698],
            [101.168718338013, 15.0577022766384],
            [101.173524856567, 15.0577437184666],
            [101.179447174072, 15.0583653449216],
            [101.183996200562, 15.0589455279759],
            [101.189103126526, 15.0597743581685],
            [101.191892623901, 15.0629238834779],
            [101.191549301147, 15.0671093647448],
            [101.19086265564, 15.0727036913665],
            [101.190605163574, 15.0748170653661],
            [101.188631057739, 15.0768061040682],
            [101.185412406921, 15.0769304183694],
            [101.182150840759, 15.0772619228176],
            [101.177172660828, 15.0780906816776],
            [101.174211502075, 15.0777591785211],
            [101.172151565552, 15.0765989134045],
            [101.168503761292, 15.0753557651845],
            [101.166915893555, 15.0715019595332],
          ],
        ],
        type: 'Polygon',
      },
      id: '10f9e9fa-ce34-4b27-a961-72fab5206ab6',
      properties: {
        jurisdiction_name: 'TLv1_01',
        jurisdiction_parent_id: 'dad42fa6-b9b8-4658-bf25-bfa7ab5b16ae',
      },
      type: 'Feature',
    },
    jurisdiction_id: '10f9e9fa-ce34-4b27-a961-72fab5206ab6',
  }

Create site-config and layer configs for Gisida Map

The Gisida Map will require some basic configurations to correctly render in the Plan module.

• site-config.json
• locations.json(?)
• Risk Layer - Fill layer with local CSV source; highlight-layer should be used to visualize selection

Map renders twice

Map seems to render twice hence having a flash like view while loading

Dynamic configurations for locationHierarchy

The location hierarchy should be completely configurable i.e. it should be possible to load a completely different location hierarchy and have the web app still just work.

Implement Focus Investigation Web UI Reporting For Historical Data (Tables)

Create the basic static UI for Focus Investigation reporting as we wait for APIs to make it actually work.

• Historical Investigation Home
• Historical Investigation Drill Down
• Historical Investigation Focus Area List
• Historical Investigation Focus Area List

Add Superset connector

Make the superset connector package usable from within Reveal (aka Typescript)

Implement Focus Investigation Web UI Reporting For Historical Data (Map)

• Historical Investigation Map for focus area

Add structures reducer

• We need to add support for fetching structures from a structure-tasks Superset slice JSON endpoint that returns a list of JSON objects that look like this:

{
    "task_identifier": "e652f8b2-b884-42d5-832a-86009c10a812",
    "plan_id": "10f9e9fa-ce34-4b27-a961-72fab5206ab6",
    "jurisdiction_id": "450fc15b-5bd2-468a-927a-49cb10d3bcac",
    "task_status": "Ready",
    "task_business_status": "Not Visited",
    "task_focus": "95515b0d-b9c0-496e-83c7-7af8b4924d1f",
    "task_task_for": "a19eeb63-45d0-4744-9a9d-76d0694103f6",
    "task_execution_start_date": "2019-04-01",
    "task_execution_end_date": "2019-04-08",
    "goal_id": "RACD_register_family_1km_radius",
    "action_code": "RACD Register Family",
    "jurisdiction_name": "TLv1_01",
    "jurisdiction_parent_id": "dad42fa6-b9b8-4658-bf25-bfa7ab5b16ae",
    "structure_id": "a19eeb63-45d0-4744-9a9d-76d0694103f6",
    "structure_code": "a19eeb63-45d0-4744-9a9d-76d0694103f6",
    "structure_name": "a19eeb63-45d0-4744-9a9d-76d0694103f6",
    "structure_type": "a19eeb63-45d0-4744-9a9d-76d0694103f6",
    "geometry": "{\"type\":\"Polygon\",\"coordinates\":[[[101.168586909771,15.061877500303],[101.168570816517,15.061789438118],[101.168667376041,15.0617505871425],[101.168688833714,15.0618490096001],[101.168586909771,15.061877500303]]]}"
}

• These records should be stored in a new structures reducer.
• It should be possible to get data from this reducer by plan_id
• It should be possible to get data from this reducer by goal_id
• It should be possible to get data from this reducer by jurisdiction_id
• It should be possible to get data from this reducer by task_id
• It should be possible to get data from this reducer by structure_id

Fix the grey square in the Focus Investigation profile view

Fix the grey square in the Focus Investigation profile view. It is meant to display a little map of the focus area.

This is what we mean:

Add authentication

• Add login page
• Require login for all pages
• Add logout functionality

Filter plans by investigation type

The FI pages need to only have FI plans. Similarly, the IRS pages should have only IRS plans.

Map Id equal to undefined when you click on map

Make layer building Dynamic

Current way of building layers is static. It would be important to understand what needs to be taken into account so as to achieve the goal side bar functionality. Once there is clarity on how that will be implemented we can decide how to treat this issue.

Cleanup Focus Investigation Components

• ActiveFocusInvestigation
• SingleFI
• SingleFI Map

The cleanup work includes:

• refactor if needed
• remove unnecessary comments
• add tests

---

This issue is part of pending work from #33

Add Reveal Style and baselayers to Web Map

We uploaded some specific geotiffs to Thailand in Mapbox as you can see in the Android client in this commit: opensrp/opensrp-client-reveal@d8641f8

These tiffs aren't represented in the web UI. We would like to make the web UI use the same styling as we have in the Android client.

Show contextual coloring for structures on the map

The structures displayed on the map need to have contextual coloring based on the task status and the type of intervention.

Here is the business logic to guide that: https://docs.google.com/document/d/1lieNnvmB7o4-vQtLDmESYBa93OGL91Q4qxkXQcZKucw/edit#

Add support for internationalization

This web app needs to be translatable to other languages.

Add test for SingleActiveFIMap

Add test for the above component

Re-scope what the web app needs to display

Verify all variables displayed in the Web UI data dictionary are present in the web app and are populated appropriately by the ETL.

Investigate IRS Planning needs

It seems that later this year Reveal will replace mSpray for the new IRS seasons.

We need to do a gap analysis of sorts to figure out what the Reveal web app may be lacking that is required for IRS reporting.

One way of doing this may be setting up a Reveal frontend instance that is set up to use mSpray data from the last IRS season (this data may need to be manipulated a little to fit the current data structures i.e, OpenSRP tasks, structures and jurisdictions).