Comments/comment all code

website-glen/deployment/README.md

@@ -0,0 +1,143 @@
+# Intro to the site
+Hello! If you are reading this, you are probably trying to deploy, redeploy, or fix the Uhrig Lab DomainViz website. Thanks!
+
+The way this site is organized is rather standard, however, I (Cameron Ridderikhoff) haven't fully separated the REST API/backend from the frontend.
+
+The frontend is contained mainly within the `src` folder, but there are some important files contained within the `public` folder as well, namely `index.html`, `example_iframe.html` and `favicon.ico`. You can find these folders at the path: `Glen Website/website-glen/src` and `Glen Website/website-glen/public` respectively.
+
+The api is contained in a folder aptly named: `api`. You can find this in the path: `Glen Website/website-glen/api`, however, this folder is mainly for Flask environment variables, and for Flask's wsgi.py file, which is the entrypoint for the backend's service. This will be further explained in *Section 2 - Backend Deployment*. You can find the Python files that contain the API endpoints in the `api/api` subfolder. Feel free to rename this if you like, but you will have to change the service files.
+
+
+# Section 1 - Frontend Deployment
+## Section 1.1 Redeploy - Frontend
+The frontend deployment is quite easy, at least if you are redeploying the site, and not making too many major changes. There is a file within this folder `Glen Website/website-glen/deployment/redeploy.sh` that will automatically redeploy both the frontend and backend. However, this shell file isn't ideal, and could certainly use some updating (There is a TODO in the file if you want some more work).
+
+This file needs to be run with `sudo`, so the full commands from logging onto the server should be:
+### 1.1.1 IMPORTANT
+```bash
+$cd Website_Glen/website-glen/deployment
+$sudo ./redeploy.sh
+```
+
+You may have to deal with npm (it has certainly been a struggle for me), and I find the best way to fix issues I am having with npm is to delete the `node_modules` folder and `package-lock.json` files, and then run `redeploy.sh`, which runs `npm install` to refresh your packages. This usually fixes enough npm package conflicts to allow the `redeploy.sh` to run to completition.
+
+## Section 1.2 Fresh Deploy - Frontend
+This guide only works for Linux distributions. If you have another OS that you are trying to serve this site from, you can loosely follow these instructions, but many may not work, or may have incorrect file paths.
+
+If you run in the situation that Glen, or others, ask you to deploy the site onto a fresh Cirrus instance, or other cloud infrastructure (Azure/AWS/GCP, etc...) then you will need to do a bit more work. I have tried to list all of the steps below, but I may miss something, so stay sharp! (Note: you will also have to install the backend - see *Section 2.2 Fresh Deploy - Backend*)
+1. Clone the repo
+2. Install node and npm
+3. Run `sudo npm install` in the `Website_Glen/website_glen` directory to ensure npm has correctly installed.
+4. Create a SSL certificate using [certbot](https://certbot.eff.org/) NOTE: We are running `Nginx` on whatever Ubuntu/Linux distro you are using.
+5. Ensure that the file paths of the certificate match those of the frontend service file (`Website_Glen/website-glen/deployment/prodoplot.nginx`):
+```bash
+$ssl_certificate /etc/letsencrypt/live/uhriglabdev.biology.ualberta.ca/fullchain.pem;
+$ssl_certificate_key /etc/letsencrypt/live/uhriglabdev.biology.ualberta.ca/privkey.pem;
+```
+If they are not, either change the filepaths, or lines 8 and 9 of the frontend service file.
+6. Copy the frontend service file  into the `/etc/nginx/sites-available/` folder
+```bash
+$sudo cp Website_Glen/website-glen/deployment/prodoplot.nginx /etc/nginx/sites-available/prodoplot.nginx
+```
+7. Create a soft-link from the sites-available folder to sites-enabled: 
+```bash
+$sudo ln /etc/nginx/sites-available/prodoplot.nginx /etc/nginx/sites-enabled/prodoplot.nginx
+```
+8. Reload Nginx: 
+```bash
+$sudo systemctl reload nginx
+```
+
+With all of this done, you should have a working frontend, that you can view in your web browser.
+
+**RESOURCES**
+Here are some of the videos/blogs that I used to learn how to deploy an Nginx site:
+1. [How to Deploy a React + Flask App](https://blog.miguelgrinberg.com/post/how-to-deploy-a-react--flask-project)
+2. [How to run Flask App on HTTPS](https://blog.miguelgrinberg.com/post/running-your-flask-application-over-https)
+
+
+# Section 2 - Backend Deployment
+The backend is slightly more complex, but certainly manageable. It is quite easy to redeploy, but rather difficult to deploy fresh.
+
+## Section 2.1 Redeploy - Backend
+The backend deployment is quite easy, at least if you are redeploying the site, and not making too many major changes, much like the frontend. There is a file within this folder `Glen Website/website-glen/deployment/redeploy.sh` that will automatically redeploy both the frontend and backend. (See *Section 1.1 Redeploy - Frontend* for more details)
+
+This file needs to be run with `sudo`, so the full commands from logging onto the server should be:
+### 2.1.1 IMPORTANT
+```bash
+$cd Website_Glen/website-glen/deployment
+$sudo ./redeploy.sh
+```
+
+Luckily python is nicer than npm, so usually modules aren't as big of an issue. However, if you run into any issues, install all packages inside the virtual environment by traveling to the first api folder and activate the virtual environment and install packages: 
+```bash
+$cd Website_Glen/website-glen/api/
+$source venv/bin/activate
+$pip3 install -r requirements.flask.txt
+``` 
+Then navigate to the second api folder and activate the virtual environment and install packages: 
+```bash
+$cd Website_Glen/website-glen/api/api/
+$source propplotenv/bin/activate
+$pip3 install -r requirements.domainviz.txt
+```
+
+If you add more packages to the backend, add them to `requirements.flask.txt`.
+
+## Section 2.2 Fresh Deploy - Backend
+This guide only works for Linux distributions. If you have another OS that you are trying to serve this site from, you can loosely follow these instructions, but many may not work, or may have incorrect file paths.
+
+The same applies for backend as for frontend.
+1. Clone the repo
+2. Install python3.8 [Downloads Page](https://www.python.org/downloads/release/python-3811/)
+3. Install python3 virtual environment 
+```bash
+$sudo python3 -m pip install --user virtualenv
+```
+4. Create a virtual environment for the backend in the `Website_Glen/website-glen/api/` directory: 
+```bash
+$sudo python3 -m venv venv
+```
+5. Activate the virtual environment: 
+```bash
+$source venv/bin/activate
+```
+6. Deactivate the environment: 
+```bash
+$deactivate
+```
+7. Install packages: 
+```bash
+$pip install -r requirements.flask.txt
+```
+8. Create a virtual environment for domainviz.py in the `Website_Glen/website-glen/api/api/` directory: 
+```bash
+$sudo python3 -m venv protplotenv
+```
+9. Activate the virtual environment: 
+```bash
+$source venv/bin/activate
+```
+10. Install packages: 
+```bash
+$pip install -r requirements.domainviz.txt
+```
+11. Deactivate the environment: 
+```bash
+$deactivate
+```
+12. Copy the backend service file from the `Website_Glen/website_glen/deployment` folder into the `/etc/systemd/system/` folder: 
+```bash
+$sudo cp prodoplot.service /etc/systemd/system/prodoplot.service
+```
+13. Run the service: 
+```bash
+$sudo systemctl daemon-reload
+$sudo systemctl start prodoplot.service
+```
+
+With all of this done, you should have a working backend, and you can check that it is running by running the command:
+```bash
+$sudo systemctl status prodoplot
+```
+It should say "active (running)" in green text, and have a green dot by the `prodoplot.service` name. Press `CTL+C` to exit.

website-glen/deployment/redeploy.sh

@@ -1,3 +1,7 @@
+# TODO: The IFS and following for loop should be able to display the information of the currently running jobs,
+# and then you should be able to kill those jobs before closing the service files with `systemctl restart prodoplot`.
+# The goal there is to be able to re-run the jobs using a direct python3 call to the domainviz.py file, thus not losing any
+# data for users upon redeployment.
 #!/bin/sh
 NUM_INSTANCES=$(ps -ef | grep "python" | egrep -v "grep|vi|more|pg" | wc -l)
 if [ $NUM_INSTANCES -gt 0 ]; 

website-glen/public/index.html

@@ -14,6 +14,7 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--This style brings in the Raleway font that Glen wants-->
     <style>
       @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;300&display=swap');
     </style> 

website-glen/src/App.js

@@ -2,7 +2,17 @@ import React from 'react';
 import './App.css';
 import 'fontsource-roboto';
 import { makeStyles } from '@material-ui/core/styles';
-import { AppBar, Toolbar, Typography, Button, createMuiTheme, ThemeProvider, Divider, Box, Container } from '@material-ui/core';
+import {
+  AppBar,
+  Toolbar,
+  Typography,
+  Button,
+  createMuiTheme,
+  ThemeProvider,
+  Divider,
+  Box,
+  Container
+} from '@material-ui/core';
 import {
   BrowserRouter,
   Switch,
@@ -19,8 +29,16 @@ import { Help } from './components/Help';
 import { TermsOfUse } from './components/TermsOfUse';
 import { PrivacyStatement } from './components/PrivacyStatement';
 import DomainViz from './components/DomainViz';
+/* MotifX was the previous name of UMotif. When using this module, have a look at the UMotifMerge branch
+ * and attempt to merge that into the main codebase. https://github.com/UhrigLab/DomainViz/tree/UMotifMerge
+ * That way, that work is not lost.
+ */
 // import MotifX from './components/MotifX';
 
+
+/* This makeStyles() is used to bring the Raleway font into the DomainViz site,
+ * as well as for certain typeographys used on the toolbar.
+ */
 const useStyles = makeStyles((theme) => ({
   app: {
     minHeight: '85.8vh',
@@ -62,10 +80,10 @@ const useStyles = makeStyles((theme) => ({
 const theme = createMuiTheme({
   palette: {
     primary: {
+      // This is grey as hex.
       main: '#e8e8e8',
     },
     secondary: {
-      // This is green.A700 as hex.
       main: '#000000',
     },
   },
@@ -92,8 +110,13 @@ function App() {
               <Divider className={classes.divider}></Divider>
               <Typography variant='body1' className={classes.subtitle}>Protein tools</Typography>
             </Box>
-            <Typography variant="h6" className={classes.subtitle}/> {/* Need this for spacing for now */}
+            {/* Need this for spacing - If you are better at frontend than me, please change it */}
+            <Typography variant="h6" className={classes.subtitle}/>
 
+            {/* The Home button is currently disabled, as is the MotifX/UMotif button. This is so that
+              * users are automatically redirected to the DomainViz page, since there is only one tool enabled at the moment.
+              * When UMotif is added, you should enable the Home button, and un-comment the Home.js component to create a real home page.
+              */}
             {/* <RouterLink to='/'>
               <Button color='inherit'>Home</Button>
             </RouterLink> */}

website-glen/src/README.md

@@ -0,0 +1,23 @@
+# Cameron's Style Guide
+This guide is to be used to understand how I styled my ReactJS components. The short answer is "poorly". This was the first website I created, and as such, the styling leaves much to be desired.
+
+Each page is set up using the material-ui `<Grid></Grid>` component. The Grid is setup in rows, and every `{12}` xs points is equal to one row with the spacing that I used.
+
+For example, `<Grid item xs={12} />` is one row, or, 
+```html
+<Grid item xs={6}> </Grid>
+<Grid item xs={3}> </Grid>
+<Grid item xs={2}> </Grid>
+<Grid item xs={1}> </Grid>
+```
+is also one single row.
+
+Sometimes there are empty `<Grid item xs={XYZ} />` objects, these are used to create empty space
+Every 12 xs points are separated from the next with a blank line.
+
+# Cameron's Component Guide
+All components are functional components. Look up a React functional components guide if you need help.
+
+For some reason, some of my components are set up as `function xyz() {}` and others as `const xyz = () => {}`. This is likely caused by me looking at different coding practices, and not realizing what the difference between the two are, or why one would choose either. This should be changed, for consistency.
+
+As well, some components use a tab spacing of 2 spaces, and others use a spacing of 4 spaces. I'm honestly not sure when this happened, but by the time I noticed it, it would have been too much work to rectify, so I left it as is.