Ribbit-Network / ribbit-network-dashboard

The web dashboard for the world's largest crowdsourced network of open-source, low-cost, CO2 Gas Detection Sensors.
MIT License
17 stars 16 forks source link

Convert Webpage to React from Python Dash #96

Open keenanjohnson opened 2 years ago

keenanjohnson commented 2 years ago

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

image

The sensors are color coded according to this key:

image

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.

image

Sensor Selection Displays Plots

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

image

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.

image

Data CSV Download

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

image