This directory contains the code for the UI of the Global.health Curator Portal accessible here:
All relevant usage information will ultimately be provided by the interface itself. This section contains documentation that hasn't yet been incorporated into the interface.
The current bulk upload process is parserless, and so for data to be properly ingested it must be uploaded in a standard CSV format. A Google Sheets template corresponding to this CSV format is available here. The following fields are currently incorporated:
sourceEntryId: Optional. The UUID provided by the data source to identify the specific case.
gender: Optional. One ofFemale,Male,Non-binary/Third gender, orOther.ageRangeStart: Optional. Number (years) from 0 to 120.ageRangeEnd: Optional. Number (years) from 0 to 120.ageRange: Optional. Convenience field accepting an age range in the formatstart-end. If provided in this format, will be used in lieu ofageRangeStartandageRangeEnd.ethnicity: Optional.nationalities: Optional. Delimit multiple nationalities with a semicolon (e.g.,British;Indian).occupation: Optional.
country: Required. Country name text (e.g., "United States").admin1: Optional. Meaning differs by country (e.g., this is state in the US). See full definition here.admin2: Optional. Meaning differs by country (e.g., this is county in the US). See full definition here.admin3: Optional. Meaning differs by country (e.g., this is municipality in the US). See full definition here.
dateConfirmed: Required. Date (YYYY/MM/DD) on which the case was confirmed.confirmationMethod: Optional. Mechanism by which the case was confirmed (e.g.,PCR test).hospitalized: Optional. One oftrueorfalse.dateHospitalized: Optional. Date (YYYY/MM/DD) on which the patient was hospitalized.icuAdmission: Optional. One oftrueorfalse.dateIcuAdmission: Optional. Date (YYYY/MM/DD) on which the patient was admitted to the ICU.outcome: Optional. One of eitherDeathorRecovered.dateOutcome: Optional. Date (YYYY/MM/DD) on which the above outcome transpired.dateSymptomOnset: Optional. Date (YYYY/MM/DD) on which symptoms first presented in the case.
symptomStatus: Optional. One ofSymptomatic,Asymptomatic, orPresymptomatic.symptoms: Optional. Delimit multiple symptoms with a semicolon (e.g.,cough;fever).hasPreexistingConditions: Optional. One oftrueorfalse.preexistingConditions: Optional. Delimit multiple symptoms with a semicolon (e.g.,Lyme disease;COPD).
caseCount: Optional. Number greater than 0. If provided,caseCountnumber of cases will be inserted into the database: each containing identical values for all other columns. Cannot be provided in combination withsourceEntryId.
Any valid CSV file with the above headers can be uploaded via the bulk upload form. For convenience, users can make a copy of the aforementioned Google Sheets template to generate a valid CSV, using roughly the following process:
As a more realistic example, consider the following process that a curator might use in order to prepare data obtained from the Ohio state government website:
Some features to note:
- Bulk upload upserts data. If a row is uploaded that contains a
sourceEntryIdcorresponding to an existing case in our database with the selected source, the provided data will update the existing row. It will not create duplicate row(s) with the samesourceEntryId. This enables easy updating of sources that publish all cases together with UUIDs. - Upload feedback is currently WIP. The existing feedback message, which is
dispalyed at the bottom of the form after uploading, reflects the status of the
final case in the CSV. If it was successful, the message will be
Success!; otherwise, it's likely to say that the request failed with422, which means the data wasn't properly formatted. This is changing in the near future.
Edit ./variantsofconcern.csv to add the new variants, then run:
npm run prepare-variants
This updates src/assets/variants.json, which you should then commit and push.
pushd ../../../data-serving/scripts/prepare_fields_list; npm run populate-fields; popd
The React application was built with the create-react-app new project generator.
Prepare the variants of concern (VOC) data by running npm run prepare-variants. This step is included in npm run build so it's not necessary to do it yourself when preparing a production build.
Run the stack by executing the /dev/run_stack.sh script or simply launch the UI alone by running npm start from this directory. Note that all API calls are proxied to localhost:3001 by default so running the full stack is probably a better idea than just running the UI unless you want to change something that isn't API relevant.
The proxy config can be found in the src/setupProxy.js file.
All react components can be found in the src/components directory and their tests as well.
To run the unit tests and re-run them each time a file is saved, run npm test.
In general all components should have unit tests and proper coverage. UI interactions between components are validated using integration tests described in the next section.
We use https://www.cypress.io/ for our integration tests, you can open the cypress runner locally by running npm run cypress-open or simply run the tests in headless mode by running npm run cypress-run.
Integration tests tend to be slower and more flaky than unit tests so prefer writing plenty of unit tests first and then finish with integration tests.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3002 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject, you can’t go back!
If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.