onaio / reveal-frontend Goto Github PK
View Code? Open in Web Editor NEWWebUI for the Reveal epidemiological surveillance platform
WebUI for the Reveal epidemiological surveillance platform
Create the basic static UI for Focus Investigation reporting as we wait for APIs to make it actually work.
Add test for the above component
Verify all variables displayed in the Web UI data dictionary are present in the web app and are populated appropriately by the ETL.
Make it possible to embed Gisida as a component in any page.
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
The Gisida Map will require some basic configurations to correctly render in the Plan module.
The cleanup work includes:
This issue is part of pending work from #33
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',
}
The way supersetFetch
is used in the focus investigation components might not be the best approach, because of:
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).
This one is broken in the master branch: https://circleci.com/gh/onaio/reveal-frontend/171
Display bubbles when a user clicks on a structure as defined in the data dictionary.
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
.
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.
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
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.
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#
The map
reducer currently has 0 tests.
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
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.
Gisida will use tilesets hosted on Mapbox Studio to render Administrative boundaries as line layers.
We should use circle layers for showing points (i.e. not polygons on the Gisida powered maps)
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.
There's some dirty hacks to be removed in the goal and plan reducer modules
This issue is part of pending work from #33
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
The FI pages need to only have FI plans. Similarly, the IRS pages should have only IRS plans.
Make it possible to:
Specifically need to test how the doFetch
method works within Reveal.
{
"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]]]}"
}
structures
reducer.plan_id
goal_id
jurisdiction_id
task_id
structure_id
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
Make the superset connector package usable from within Reveal (aka Typescript)
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',
}
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.
reveal
branches and yarn install
yarn link
in both reposyarn link gisida && yarn link gisida-react
in the reveal-frontend
repoindex.tsx
or a wrapper componentAdd IRS plans to a new section in the Web UI so that we can report on IRS activities.
Map seems to render twice hence having a flash like view while loading
This web app needs to be translatable to other languages.
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.
Currently using Ona Stage as an oAuth2 provider, we need to switch to OpenSRP.
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.
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.
structures reducer
(#41). Each goal may have one or more structures. The structures should be colored as defined in this document.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.
Gisida will be able to accept custom event handlers for various Mapbox Map mouse events.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.