diff --git a/src/docking/DockingContainer.js b/src/docking/DockingContainer.js index ac885ce..52ff326 100644 --- a/src/docking/DockingContainer.js +++ b/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) diff --git a/src/common/FilteredLigandResults.js b/src/docking/FilteredLigandResults.js similarity index 97% rename from src/common/FilteredLigandResults.js rename to src/docking/FilteredLigandResults.js index 46b248f..e7b3ac8 100644 --- a/src/common/FilteredLigandResults.js +++ b/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, diff --git a/src/common/LigandResultItem.js b/src/docking/LigandResultItem.js similarity index 100% rename from src/common/LigandResultItem.js rename to src/docking/LigandResultItem.js diff --git a/src/common/LigandResultsBox.js b/src/docking/LigandResultsBox.js similarity index 96% rename from src/common/LigandResultsBox.js rename to src/docking/LigandResultsBox.js index 8a85cb9..f1fa66b 100644 --- a/src/common/LigandResultsBox.js +++ b/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), diff --git a/src/common/UploadLigand.js b/src/docking/UploadLigand.js similarity index 76% rename from src/common/UploadLigand.js rename to src/docking/UploadLigand.js index fe656fe..c04ba5f 100644 --- a/src/common/UploadLigand.js +++ b/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 ( <> diff --git a/src/docking_info/DockingInfoContainer.js b/src/docking/docking_info/DockingInfoContainer.js similarity index 95% rename from src/docking_info/DockingInfoContainer.js rename to src/docking/docking_info/DockingInfoContainer.js index ee37331..8343734 100644 --- a/src/docking_info/DockingInfoContainer.js +++ b/src/docking/docking_info/DockingInfoContainer.js @@ -22,4 +22,7 @@ function DockingInfoContainer(props){ /> } +DockingInfoContainer.propTypes ={ + +} export default withStyles(styles)(DockingInfoContainer) \ No newline at end of file diff --git a/src/docking_info/LigandDetailsBox.js b/src/docking/docking_info/LigandDetailsBox.js similarity index 97% rename from src/docking_info/LigandDetailsBox.js rename to src/docking/docking_info/LigandDetailsBox.js index 1f87ae2..1e5508f 100644 --- a/src/docking_info/LigandDetailsBox.js +++ b/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" diff --git a/src/docking_info/styles.js b/src/docking/docking_info/styles.js similarity index 100% rename from src/docking_info/styles.js rename to src/docking/docking_info/styles.js diff --git a/src/imported_ligands/ImportedLigandsContainer.js b/src/docking/imported_ligands/ImportedLigandsContainer.js similarity index 61% rename from src/imported_ligands/ImportedLigandsContainer.js rename to src/docking/imported_ligands/ImportedLigandsContainer.js index 1e76f77..508bdcc 100644 --- a/src/imported_ligands/ImportedLigandsContainer.js +++ b/src/docking/imported_ligands/ImportedLigandsContainer.js @@ -1,6 +1,6 @@ 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'; @@ -8,8 +8,30 @@ 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( diff --git a/src/ligand_library/LigandLibraryContainer.js b/src/docking/ligand_library/LigandLibraryContainer.js similarity index 56% rename from src/ligand_library/LigandLibraryContainer.js rename to src/docking/ligand_library/LigandLibraryContainer.js index 1834032..06c3ada 100644 --- a/src/ligand_library/LigandLibraryContainer.js +++ b/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 ) { diff --git a/src/docking/styles.js b/src/docking/styles.js new file mode 100644 index 0000000..f7734f9 --- /dev/null +++ b/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', + }, +}