Skip to content
This repository has been archived by the owner on Jul 7, 2023. It is now read-only.

Latest commit

 

History

History

frontend

README.md

Landing Page for the Covid-19 India Data Project

Website

This is the source code for the landing page of the COVID-19 India Data Project. The goal of the landing page is to make the data quickly accessible, in its most basic form, for researchers to explore. Findings from the data will also be added to the landing page over time. Contributions are welcome! 🤗

Setting up locally

frontend:~$ yarn
frontend:~$ yarn start

Configuration

  1. The default sampling rate at which to display the graphs on the landing page: this setting will ensure that graphs show data every sampling_rate days. This setting is in place to save downloading large amoutns of data for the viewer as well as to speed up the plotting on the browser.
"sampling_rate": 10
  1. List of states to display:

Each state in the configuration is key-ed by its short_name which is the same as that used by the state in its entry in the database (and is used for all calls to fetch data from it). The full name is used for display purposes only. The short_name is also visible in the table schemas, the raw link to this image from the wiki is also provided in the config. You can mark your state as incomplete if the data extraction is not complete yet.

"DL": {
  "name" : "Delhi",
  "short_name" : "DL",
  "is_complete": true,
  "link_to_db_schema" : "https://raw.githubusercontent.com/IBM/covid19-india-data/main/docs/images/DL_tables.png"
}

Using the DB locally

If you are running the DB locally for testing:

  1. Bring up the DB server here.
  2. Add link to the local server in the configuration file.
"data_server": "http://localhost:3456"

Anatomy of the Frontend

The frontend houses individual pages for each state that let's you explore the data for that state in detail, through time-series plots, tables, API queries, and so on.

State-level pages

Each state-level page on our landing page has some standard elements. These are all generated automatically from the configuration file and the DB schema. The data is primarily grouped into 3 tabs.

  1. Visualization: This tab (open by default) allows you to visualize any data from a state's bulletin as a time-series or on a particular date. Each plot element is realized as a BasicElement described below.

  2. Schema View: This tab shows the Database schema for a particular state. You can also access all the schemas on this repository's Wiki page here or through the API.

  3. API View: This tab allows you to inspect all the avaliable API access points available for a state, allowing you to fetch data for individual tables, or specific columns inside those tables, through GET requests. You can, of course, construct more complex queries, as detailed in the API documentation.

Furthermore, each state-level page also contains a series of "Highlights" that talk about some interesting features of the data. These are also autogenerated from a list of queries using the HighlightsElement described below.

Non-state pages

Other than the state-level pages, we also have dedicated Analysis and Anomalies pages which document comparitive numbers between states and data anomalies if any. We encourage you to contribute to these once the state-level data builds up for a large number of Indian states.

Reusable frontend artifacts

All the default elements in all the pages are constructed from two basic kinds of time series plots, one for individual display, and the other for comparative display.

BasicElement: This element is used to draw individual time series plots. By default, each state-level page invokes one instances of this element for all columns of all its tables, and plots them as and when they are selected for visualization by the user. The plots produced by these are currently standalone and independent of each other, and hence not suitable for comparison.

HighlightsElement This element can be used to produced targeted plots for very specific queries and comparisions acroos multiple data elements across the time axis. As input it takes in a query with the following elements:

{
  "subject": "TITLE OF THE PLOT",
  "description": "DESCRIPTION OF THE PLOT",
  "legend": "LIST OF LEGENDS FOR EACH PLOT ELEMENT",
  "query": "SQL QUERY"
}

You can find examples of the HighlightsElement being used across the state-level pages, and in the analysis and anomalies pages, under the header "Highlights". Internally, this generates a call to the API serving SQL queries to the COVID-19 India DB, and returns timeseries data where each tuple on the timeseries starts with the date and then the data per item requested as indexed by the list of lengeds above. See here for some example queries.

Contributing to the Frontend

You can contribute to the frontend in several forms, either as part of the existing infrastructure or as completely new elements. Contributors will require familiarity with React and the Carbon Design System.

Adding a new state-level page

  1. Make a copy of the NewStatePage template inside the content directory.
  2. Replace "NewStatePage" with the name of your state. See Delhi or West Bengal for examples.
  3. Add your state to the static nav Header
    • Import your page in App.js: import NewStatePage from './content/NewStatePage';
    • Add a new route in App.js: <Route exact path="/NewStatePage" component={NewStatePage} />
  4. Add custom styles for your page in app.scss: @import './content/WestBengal/new-state.scss';
  5. Add your entry in the list of states to display in config.json as seen above. Note that the short_name corresponds to the entry of the state in the DB. See here for an example: "DL" for Delhi.

Once you add information in, the page for your state will be autogenerated with all the entries as described above.

Adding a new element

Instead of entire state-level pages, you can also add individual elements to the existing pages, either by using the existing frontend artifacts or by making up completely new ones as you wish.

Using the existing frontend elements

You can use the HighlightsElement to add to the existing analysis and anomalies sections. This is done automatically, if you augment your results to the corresponding query files being used by the automated generator for the landing page.

  1. A new query to the state-level highlights e.g. for Delhi here.
  2. A new query to the anomalies page here.
  3. A new query to the analysis page here.

Completely new element

In any of these pages, you can add in your own elements. By default, each page contains a Basic section and a Highlights section, as seen here for example in the state template. If you want to add new analysis elements for a state that cannot be built using the BasicElement or the HighlightsElement objects, you can directly extend the state-level page with your new elements in the code, following right after the default elements.