Convert Webpage to React from Python Dash

[keenanjohnson]

In #95, an excellent start was made at converting the Python Dash Web App to a React App.

This seems to be a more scalable path forward for our web application and could enable us to more easily fix certain issues like #45 in the future!

Work Required

In order to deploy a React app, we don't want to lose any functionality from the existing web application.

The specific features are listed below:

Features

Interactive Map

The current map is interactive, meaning you can zoom and pan the map with the cursor.

Display specific sensors on map

The current dashboard displays sensors at their specific locations in the map

The sensors are color coded according to this key:

Cluster Sensors

The current dashboard has the ability to cluster sensors when you are zoomed out to avoid making the map look too overwhelming and increase rendering speed.

Sensor Selection Displays Plots

By selecting a given sensor in the map, the relevant plots are displayed for that sensor.

• CO2 PPM
• Temperature (C)
• Barometric Pressure (mBar)
• Humidity (%)

Plot Zooming

The plotly dash library allows you to select box in the plots and zoom in on that location.

Plot Options Selection

The current dashboard has selectors that allow the user to selection the duration of the plots, as well as the sampling average.

Data CSV Download

The current page has the ability to download data in a CSV that matches the currently display plots and sensor.