Reorganize frontend

src/docking/DockingContainer.js

@@ -1,13 +1,40 @@
 import React, {useState, useEffect} from "react";
-import LigandLibraryContainer from "../ligand_library/LigandLibraryContainer";
-import ImportedLigandsContainer from "../imported_ligands/ImportedLigandsContainer";
-import DockingInfoContainer from "../docking_info/DockingInfoContainer";
+import LigandLibraryContainer from "./ligand_library/LigandLibraryContainer";
+import ImportedLigandsContainer from "./imported_ligands/ImportedLigandsContainer";
+import DockingInfoContainer from "./docking_info/DockingInfoContainer";
 import useForm, {dockRequestURL, dockingMoleculeFileRetrievalURL, ligandLibraryURL} from "../util/request"
 import axios from "axios";
 
 function DockingContainer(props){
-  const { selectedMacromolecules, dockingCenter, dockingRange, setDisplayedFile, setDisplayedConfiguration, 
-    setDisplayedActiveSites, viewingLigand, setViewingLigand, alignmentInProgress, eClasses } = props;
+  const { 
+    //an array of string macromolecule IDs (ex: "1A0J")
+    selectedMacromolecules,     
+    //a 3-element array representing the XYZ coordinates of the 
+    //center of the docking search space 
+    dockingCenter,              
+    //a 3-element array representing the XYZ dimensions of the 
+    //docking search space
+    dockingRange,               
+    //a setter function which takes a File object representing 
+    //a .PDB molecule file
+    setDisplayedFile,           
+    //the index of the molecular configuration to be 
+    //displayed (ordered lowest to highest RMSD)
+    setDisplayedConfiguration,  
+    //an array of objects representing the residues that 
+    //are part of the active sites to be displayed. Each 
+    //one includes a residueId, a residueChainName, and 
+    //(optionally) and a (residueAltLocation)
+    setDisplayedActiveSites,    
+    //a Ligand object representing the ligand to be viewed                  
+    viewingLigand,
+    //setter function for viewingLigand              
+    setViewingLigand,
+    //true if docking calculation is in process           
+    alignmentInProgress, 
+    //enzyme classes
+    eClasses 
+  } = props;
 
   //ligands selected for docking. Do not pass this setter (instead use the 
   //"setSelectedLigands" function)

src/common/FilteredLigandResults.js → src/docking/FilteredLigandResults.js

@@ -147,9 +147,9 @@ FilteredLigandResults.propTypes = {
    */
   selectedLigands: propTypes.object,
   /** 
-   * A Set of objects representing ligands which have had docking operations
+   * An object containing objects representing ligands which have had docking operations
    * performed on them.
-   * Example of object inside the Set: 
+   * Example of object inside the top level object: 
    *   {name:"00I",structure:"C30 H35 N5 O6 S", min_affinity: -5.2}  
    */
   dockedLigands: propTypes.object,

src/common/LigandResultsBox.js → src/docking/LigandResultsBox.js

@@ -25,6 +25,7 @@ export default function LigandResultsBox(props) {
 }
 
 LigandResultsBox.propTypes = {
+  /** full list of ligands being displayed */
   ligandResults: PropTypes.array,
   /** ligands selected for docking */
   selectedLigands: PropTypes.instanceOf(Set),

src/common/UploadLigand.js → src/docking/UploadLigand.js

@@ -2,19 +2,21 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import Button from '@material-ui/core/Button';
-import FormLabel from '@material-ui/core/FormLabel';
-import GetAppIcon from '@material-ui/icons/GetApp';
-
-import Chip from '@material-ui/core/Chip';
-import CloseIcon from '@material-ui/icons/Close';
-
-import NameChips from '../search/form/NameChips';
 
 import { withStyles } from '@material-ui/core/styles';
 import styles from './styles';
 
 function UploadLigand(props) {
-  const { classes, label, buttonText, inputName, handleChange} = props;
+  const { 
+    classes, 
+    //text displayed on the Upload button
+    buttonText, 
+    //the name of the upload input element
+    inputName, 
+    //event handler for selecting ligands for upload 
+    //(triggered by a change to the selected upload file)
+    handleChange
+  } = props;
 
   return (
     <>

src/docking_info/DockingInfoContainer.js → src/docking/docking_info/DockingInfoContainer.js

@@ -22,4 +22,7 @@ function DockingInfoContainer(props){
     />
 }
 
+DockingInfoContainer.propTypes ={
+
+}
 export default withStyles(styles)(DockingInfoContainer)

src/docking_info/LigandDetailsBox.js → src/docking/docking_info/LigandDetailsBox.js

@@ -7,10 +7,10 @@ import GetAppIcon from '@material-ui/icons/GetApp'
 import IconButton from '@material-ui/core/IconButton';
 import { withStyles, TableBody } from "@material-ui/core";
 import FileDownload from "js-file-download";
-import jssPluginPropsSort from "jss-plugin-props-sort";
 import PropTypes from 'prop-types';
 import axios from "axios";
-import {exportDockingInfoURL} from "../util/request"
+
+import {exportDockingInfoURL} from "../../util/request"
 
 import styles from "./styles.js"
 

src/imported_ligands/ImportedLigandsContainer.js → src/docking/imported_ligands/ImportedLigandsContainer.js

@@ -1,15 +1,37 @@
 import React, {useState} from "react";
-import FilteredLigandResults from '../common/FilteredLigandResults';
-import MenuCard from '../common/MenuCard';
+import FilteredLigandResults from '../FilteredLigandResults';
+import MenuCard from '../../common/MenuCard';
 import PropTypes from 'prop-types';
 
 import AddCircleOutlineIcon from '@material-ui/icons/AddCircleOutline';
 import CircularProgress from '@material-ui/core/CircularProgress'
 
 
 function ImportedLigandsContainer(props){
-  const {importedLigands, setImportedLigands, selectedLigands, dockedLigands, viewingLigand, 
-    clickLigandHandler, dockHandler, ligandUploadHandler, dockingInProgress, dockingError, setDockingError} = props;
+  const {
+    //an object containing Ligand objects. Each key is the ligand's unique ID.
+    importedLigands, 
+    //setter for importedLigands
+    setImportedLigands, 
+    //an object containing Ligand objects which represent ligands selected for docking
+    selectedLigands, 
+    //an object containing Ligand objects which have had dockings already performed on them
+    dockedLigands, 
+    //the Ligand object being viewed
+    viewingLigand, 
+    //an event handler used to handle ligand selection for docking and viewing
+    clickLigandHandler, 
+    //an event handler used to initiate docking
+    dockHandler, 
+    //an even handler used to upload ligands
+    ligandUploadHandler, 
+    //true when docking is in progress
+    dockingInProgress, 
+    //contains a message when there is a docking error to show (falsy otherwise)
+    dockingError, 
+    //set the docking error message
+    setDockingError
+  } = props;
   const [expandImportedLigands, setExpandImportedLigands] = useState(false);
 
   return(

src/ligand_library/LigandLibraryContainer.js → src/docking/ligand_library/LigandLibraryContainer.js

@@ -1,14 +1,34 @@
 import React, {useState} from "react"
-import FilteredLigandResults from '../common/FilteredLigandResults';
-import MenuCard from '../common/MenuCard';
+import FilteredLigandResults from '../FilteredLigandResults';
+import MenuCard from '../../common/MenuCard';
 
 import ListIcon from '@material-ui/icons/List';
 import AddCircleOutlineIcon from '@material-ui/icons/AddCircleOutline';
 import CircularProgress from '@material-ui/core/CircularProgress';
 
 function LigandLibraryContainer(props){
-    const {library, selectedLigands, dockedLigands, viewingLigand, clickLigandHandler, dockHandler,
-        alignmentInProgress, dockingInProgress, dockingError, setDockingError} = props
+    const {
+      //an object containing the Ligand objects available for use
+      library, 
+      //an object containing Ligand objects which represent ligands selected for docking
+      selectedLigands, 
+      //an object containing Ligand objects which have had dockings already performed on them
+      dockedLigands, 
+      //the Ligand object being viewed
+      viewingLigand, 
+      //an event handler used to handle ligand selection for docking and viewing
+      clickLigandHandler, 
+      //an event handler used to initiate docking
+      dockHandler,
+      //true when an alignment search is in progress
+      alignmentInProgress, 
+      //true when docking is in progress
+      dockingInProgress, 
+      //contains a message when there is a docking error to show (falsy otherwise)
+      dockingError, 
+      //set the docking error message
+      setDockingError
+    } = props
     const [expandLigandLibrary, setExpandLigandLibrary] = useState(false);
 
     if( alignmentInProgress && expandLigandLibrary ) {

src/docking/styles.js

@@ -0,0 +1,89 @@
+export default {
+  search: {
+    margin: '10px 0',
+  },
+  scrolling: {
+    width: '375px',
+    maxHeight: '350px',
+    overflow: 'scroll'
+  },
+  cyanBackground: {
+    background: '#2AF598',
+  },
+  white: {
+    color: 'white',
+  },
+  narrowInput: {
+    width: '75px',
+    margin: '10px'
+  },
+  rounded: {
+    borderRadius: 25,
+    background: '#5433FF',
+    color: 'white',
+    padding: '10px 20px',
+  },
+  dockButton:{
+    float: 'right',
+    borderRadius: 25,
+    padding: '10px 20px',
+    color: 'white',
+  },
+  uploadButton:{
+    float: 'right',
+    borderRadius: 25,
+    padding: '10px 20px',
+    color: 'white',
+  },
+  unselected: {
+    cursor: "pointer",
+  },
+  selected: {
+    background: '#856eff',
+    cursor: "pointer",
+  },
+  dockedSelected: {
+    background: '#e6e6e6',
+    cursor: "pointer",
+  },
+  dockedUnselected: {
+    cursor: "pointer",
+  },
+  midDocking: {
+    color: '#f2f2f2',
+    opacity: 0.5,
+  },
+  cancelButton: {
+    borderRadius: 25,
+    color: 'rgba(0, 0, 0, 0.54)',
+    padding: '10px 20px',
+  },
+  floatButton: {
+    float: 'right',
+    marginBottom: '20px',
+  },
+  spaced: {
+    margin: '20px 0'
+  },
+  buttonContainer: {
+    display: 'flex',
+    justifyContent: 'center',
+    margin: '10px 0',
+    overflow: 'scroll'
+  },
+  grey: {
+    color: 'rgba(0, 0, 0, 0.54)'
+  },
+  padded: {
+    margin: '20px'
+  },
+  builderContainer: {
+    margin: '5% 10%'
+  },
+  filter: {
+    margin: '0% 10%'
+  },
+  input: {
+    display: 'none',
+  },
+}