Page History

Overview:

The goal of this dashboard is to allow researchers to analyse view, download, and analyze data collected from participants and gain insights into infant health. The dashboard is a React.js web application and is supported by the backend-offline team.

Setup and Installation:

...

Git Repo

https://github.com/

...

DIAPER-

...

       cd dev-dashboard 
       cd dashboard-frontend
       npm install
     

...

      
       npm start
    

Getting Familiar with the Code:

Login, Register, Logout

...

Upload

...

Visualize

...

1. Filter Data: The filter feature is a checkbox that is present in the header of both tables. By checking the box, a new row will appear in the table that allows users to search by one or more columns at a time. The search will update the table for every character that is typed in the search bars. The feature was added using a component from “react-table.”
2. Sort Data: The sorting feature that is present in both tables was also imported from “react-table.” Next to each column, there are two arrows that can be clicked to sort the table. The double arrow means the table is not sorted, the up arrow means the column is ascending and finally, the down arrow means the column is descending. One can be sorted at a time.
3. Expand Row: Both tables have a small arrow on the left side of each row. Clicking on this arrow will expand the given row and it can be pressed again to close it. Any number of rows can be expanded at once on a given page. These rows are implemented with renderSubComponent functions found in the /src/views/Visualize.js file.
4. Download:
   1. For the Sample Table, the downloading feature allows users to download a stool image from the database by inputting the sample id for the sample.
   2. On both pages, there's a download button to the right of the filter, which allows users to download a .csv file for all data in the database. (It isn't affected by the filter. If you see some weird record in the CSV, those are records inputted for testing(we haven't dealt with that yet, please ask Prof. Johnson for further instruction on how to do that).
5. Pagination: The pagination component seen being used for both tables is again part of the “react-table” package. It is combined with Pagination components from “react-strap” to create the UI. The current capabilities include: changing the number of rows per page, displaying the current and total number of pages, jumping to the first and last page, going back or forward one page (if possible), and finally jumping to any page using an input box.

Tasks that Remain

1. Fix Logout: As aforementioned, the logout function currently does not make a call to the backend, but rather just updates the Local Storage. Once the CSRF token issue is fixed, this can be changed. This will be an easy change as the code is already written, I just have commented it out. The existing code may have to be changed if any changes are made to the back-end API. It can be found in file /src/services/AuthService.js on line 36.
2. Improve Security: An extra layer of protection should be added for the login/register functions, such as encrypting the passwords before sending them to the database.
3. Forgot Password: There needs to be a page for the user to reset their username or password if forgotten. This will also require a new API to be added to make a PATCH request to update the account. The only existing code for this page is the Forgot Password button found on the login page in file /src/views/LoginPage.js
4. Implement Upload Functionality: Allow for researchers to upload their own files to the database and then visualize this data in the Sample and Baby Table. The existing page exists in file /src/views/Upload.js and already includes a button that allows users to select a file from their computer.

Tips and Tricks

...

Project/frontend-web