SJHack2022_Project6 - SimplySamples

This project is humble attempt of BioHackathon Team #6 to solve sample management problem faced by many lab scientists working hardly to gather all sample data and figure out connections between them.

Aim of this project is to..

• provide single webpage to view, edit and add sample data.
• Show/hide, filter and export any column from any table.
• Upload their own data as CSV files.

Click here to check Presentation from the St. Jude BioHackathon 2022.

Example Demo app:

About The Project

(back to top)

Built With

• Docker
• Django
• React
• React Table
• Tailwind

Architecture

(back to top)

Getting Started

To get a local copy up and running follow these simple example steps:

Prerequisites

• Docker Installation - Download apporpirate Docker installtion file for your OS: https://docs.docker.com/get-docker/

Installation and setup

1. Once docker is installed, clone the repo on you local folder:

   git clone https://github.com/stjude-biohackathon/SJHack2022_Project6.git

2. Go to the repo root and run this docker commands to build image (will take few minute for first time, should be faster on sunsequent run):

   cd SJHack2022_Project6
   docker-compose build

3. Start database container first using following command:

   docker-compose up db

   Once you see following LOG in terminal, go to next step:

   db_1   | LOG:  database system is ready to accept connections

4. Open new terminal tab and start Django app container using following command:

   docker-compose up backend

   Once you see following LOG in terminal, the backend app is ready!

   web_1  | Starting development server at http://0.0.0.0:8000/
   web_1  | Quit the server with CONTROL-C.

5. To load the database to the Django backend go to this url: http://localhost:8000/ It will take sometime to load the page as it's working on loading data from csv files to database. Once dtatabse is loaded, the page will show how many records and tables are loaded to database.

6. Open new terminal tab and start React app container using following command:

   docker-compose up frontend

   Once you see following LOG in terminal, the frontend app is ready!

   sjhack2022_project6-frontend-1  | 
   sjhack2022_project6-frontend-1  | webpack 5.72.0 compiled with 1 warning in 522 ms

   frontend app can be accessed at: http://localhost:3000/

(back to top)

Usage

Note: Following steps are temporary till users can upload their own data from frontend page. (ETA feature release - April 30, 2022)

Upload CSV data

1. To upload your own data, convert all your excel to 1 CSV file per table.

2. Copy all your CSV files to backend/raw_data/ folder.

Repouplate database with your data

To repopulate database with your csv files, go to http://localhost:8000/ and Click "Update Database" button.
The page will looks like this:

It will take sometime to load the page as it's working on loading data from csv files to database. Once dtatabse is loaded, the page will show how many records and tables are loaded to database.

To see your data on frontend go to this url: http://localhost:3000/

(back to top)

deployment

As this Application is using Docker, it's easy to deploy it to any server or cloud service like AWS.
Detailed instrunction on deployment will be available soon.

(back to top)

Roadmap

• Add Django Backend
• Support Rest api with sample db
• Add React frontend
• Show sample data in table
• Allow filtering of data
• Allow users to select any column from any tables
• Allow users to export data into csv file or generate reports
• Allow users to add new tables or new data for existing tables
• Add security feature by implementing login

(back to top)

Developed by Team Sigma 6

web developer and dev-ops experts

• Jaimin Patel
• Kennon Silence
• Karthik Vadambacheri Manian

Data cleaning and Data management experts

• Jia Sujuan
• Kubra Bahcivanci
• Pei-Lin Chen