Documentation Github Moorhen Wiki

Global

Members

# constant MoorhenContainer

A container for the Moorhen app. Needs to be rendered within a MoorhenReduxprovider.
Properties:
Name Type Attributes Default Description
glRef React.RefObject.<webGL.mgWebGL> <optional>
 React reference holding the webGL rendering component
timeCapsuleRef React.RefObject.<moorhen.TimeCapsule> <optional>
 React reference holding an instance of MoorhenTimeCapsule which is in charge of backups
commandCentre React.RefObject.<moorhen.commandCentre> <optional>
 React reference holding an instance of MoorhenCommandCentre which is in charge of communication with libcoot instance
moleculesRef React.RefObject.<Array.<moorhen.Molecule>> <optional>
 React reference holding a list of loaded MoorhenMolecule instances
mapsRef React.RefObject.<Array.<moorhen.Map>> <optional>
 React reference holding a list of loaded MoorhenMap instances
urlPrefix string <optional>
 '.' The root url used to load sources from public folder
monomerLibraryPath string <optional>
 './baby-gru/monomers' A string with the path to the monomer library, relative to the root of the app
setMoorhenDimensions function Callback executed on window resize. Return type is an array of two numbers [width, height]
onUserPreferencesChange function Callback executed whenever a user-defined preference changes (key: string, value: any) => void.
disableFileUploads boolean <optional>
 false Indicates if file uploads should b disabled
includeNavBarMenuNames Array.<string> <optional>
 An array of menu names to include in the Moorhen navbar. If empty array then all menus will be included. It can also be used to set their order.
extraNavBarModals Array.<object> A list with additional draggable modals with buttons rendered under the navigation menu
extraNavBarMenus Array.<object> A list with additional menu items rendered under the navigation menu
extraFileMenuItems Array.<JSX.Element> A list with additional menu items rendered under the "File" menu
extraEditMenuItems Array.<JSX.Element> A list with additional menu items rendered under the "Edit" menu
extraCalculateMenuItems Array.<JSX.Element> A list with additional menu items rendered under the "Calculate" menu
extraDraggableModals Array.<JSX.Element> A list with additional draggable modals to be rendered
viewOnly boolean <optional>
 false Indicates if Moorhen should work in view-only mode
allowScripting boolean <optional>
 true Indicates if the scrpting interface is enabled
backupStorageInstance moorhen.LocalStorageInstance An interface used by the moorhen container to store session backups
aceDRGInstance moorhen.AceDRGInstance An interface used by the moorhen container to execute aceDRG jobs

View Source components/MoorhenContainer.tsx, line 83

Example
import { MoorhenContainer } from "moorhen";

const ExampleApp = () => {

 const doClick = (evt) => { console.log('Click!') }

 const exportMenuItem =  <MenuItem key={'example-key'} id='example-menu-item' onClick={doClick}>
                             Example extra menu
                         </MenuItem>

const setDimensions = () => {
  return [window.innerWidth, window.innerHeight]
}

return <MoorhenReduxProvider>
             <MoorhenContainer
                 allowScripting={false}
                 setMoorhenDimensions={setDimensions}
                 extraFileMenuItems={[exportMenuItem]}/>
         </MoorhenReduxProvider>

# constant MoorhenDraggableModalBase

The base component used to create draggable modals.
Properties:
Name Type Attributes Default Description
headerTitle string The title displayed on the modal header
show boolean Indicates if the modal is to be displayed
setShow function Setter function for props.show
body JSX.Element Element rendered as the modal body
modalId string <optional>
 null The id assigned to the modal used to keep track of the focused modal and the z-index. If empty then random string is used.
width number <optional>
 35 The width of the modal measured in wh
height number <optional>
 45 The height of the modal measured in vh
top number <optional>
 500 The intial top location of the modal
left number <optional>
 500 The intial top location of the modal
additionalHeaderButtons Array.<JSX.Element> <optional>
 null Additional buttons rendered on the modal header
additionalChildren Array.<JSX.Element> <optional>
 null Additional JSX elements rendered inside the modal
overflowY string <optional>
 "scroll" Indicates how to handle content overflow on vertical axis
handleClassName string <optional>
 "handle" The css class name for the draggable handle
footer JSX.Element <optional>
 null Element rendered as the modal footer

View Source components/modal/MoorhenDraggableModalBase.tsx, line 64

Example
import { MoorhenDraggableModalBase } from "moorhen";

const example = () => {
  return <MoorhenDraggableModalBase
               modalId="example-modal-id"
               headerTitle="Create covalent link"
               additionalChildren={
                   <Backdrop sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }} open={awaitAtomClick !== -1}>
                       <Stack gap={2} direction='vertical'style={{justifyContent: 'center', alignItems: 'center'}}>
                           <Spinner animation="border" style={{ marginRight: '0.5rem' }}/>
                           <span>Click on an atom...</span>
                           <Button variant='danger' onClick={() => setAwaitAtomClick(-1)}>Cancel</Button>
                       </Stack>
                   </Backdrop>
               }
               body={
                   <Stack direction='horizontal' gap={2} style={{display: 'flex', justifyContent: 'space-between'}}>
                       <AceDRGtomPicker id={1} ref={atomPickerOneRef} awaitAtomClick={awaitAtomClick} setAwaitAtomClick={setAwaitAtomClick} {...props}/>
                       <AceDRGtomPicker id={2} ref={atomPickerTwoRef} awaitAtomClick={awaitAtomClick} setAwaitAtomClick={setAwaitAtomClick} {...props}/>
                   </Stack>
               }
               footer={
                   <div style={{display: 'flex', justifyContent: 'space-between', width: '100%'}}>
                   <div style={{display: 'flex', alignItems: 'center', justifyContent: 'left', width: '50%'}}>
                       <Form.Control type="text" readOnly={true} value={errorMessage}/>
                   </div>
                   <div style={{display: 'flex', alignItems: 'center', justifyContent: 'right'}}>
                       <Button variant='primary' onClick={handleSubmitToAcedrg}>Run AceDRG</Button>
                       <Button variant='danger' onClick={handleCancel} style={{marginLeft: '0.1rem'}}>Cancel</Button>
                   </div>
                   </div>
               }
           />
}

# constant MoorhenMapSelect

A map selector react component
Properties:
Name Type Attributes Default Description
height string <optional>
 "4rem" The height of the selector
width string <optional>
 "20rem" The width of the selector
label string <optional>
 "Map" A text label shown on top of the selector
maps Array.<moorhen.Map> List of maps displayed in the selector options
filterFunction function A function that takes a moorhen.Map as input and returns a boolean: true if the map is to be included in the options.
onChange function A function that is called when the user changes the selector option

View Source components/select/MoorhenMapSelect.tsx, line 27

Example
import { MoorhenMapSelect } from "moorhen";
import { useRef } from "react";

const mapSelectRef = useRef(null);

const handleMapChange = (evt) => {
 const selectedMap = parseInt(evt.target.value)
 console.log(`New selected map is ${selectedMap}`)
}

return (
 <MoorhenMapSelect ref={mapSelectRef} filterFunction={(map) => !map.hasReflectionData} width='100%' label='Select a map' onChange={handleMapChange} />
)

# constant MoorhenMoleculeSelect

A molecule selector react component
Properties:
Name Type Attributes Default Description
height string <optional>
 "4rem" The height of the selector
width string <optional>
 "20rem" The width of the selector
label string <optional>
 "Molecule" A text label shown on top of the selector
margin string <optional>
 "0.5rem" The margin used to render the selector
allowAny boolean <optional>
 false Indicates whether a "Any molecule" option should be included in the selector (with value -999999)
molecules Array.<moorhen.Molecule> List of molecules displayed in the selector options
onChange function A function that is called when the user changes the selector option
filterFunction function A function that takes a moorhen.Molecule as input and returns a boolean: true if the molecule is to be included in the options.

View Source components/select/MoorhenMoleculeSelect.tsx, line 29

Example
import { MoorhenMoleculeSelect } from "moorhen";
import { useRef } from "react";

const moleculeSelectRef = useRef(null);

const handleModelChange = (evt) => {
 const selectedModel = parseInt(evt.target.value)
 console.log(`New selected model is ${selectedModel}`)
}

return (
 <MoorhenMoleculeSelect ref={moleculeSelectRef} width='100%' label='Select a molecule' onChange={handleModelChange} />
)

Methods

# loadSessionData(sessionData, monomerLibraryPath, molecules, maps, commandCentre, timeCapsuleRef, glRef, dispatch) → {number}

A function to load session data
Parameters:
Name Type Description
sessionData moorhen.backupSession An object containing session data
monomerLibraryPath string Path to the monomer library
molecules Array.<moorhen.Molecule> State containing current molecules loaded in the session
maps Array.<moorhen.Map> State containing current maps loaded in the session
commandCentre React.RefObject.<moorhen.CommandCentre> React reference to the command centre
timeCapsuleRef React.RefObject.<moorhen.TimeCapsule> React reference to the time capsule
glRef React.RefObject.<webGL.MGWebGL> React reference to the webGL renderer
dispatch Dispatch.<AnyAction> Dispatch method for the MoorhenReduxStore

View Source utils/MoorhenUtils.ts, line 221

Returns -1 if there was an error loading the session otherwise 0
number

# loadSessionFromJsonString(sessionDataString, monomerLibraryPath, molecules, maps, commandCentre, timeCapsuleRef, glRef, dispatch) → {number}

A function to load session data from a JSON string representation
Parameters:
Name Type Description
sessionDataString string A JSON string representation of the object containing session data
monomerLibraryPath string Path to the monomer library
molecules Array.<moorhen.Molecule> State containing current molecules loaded in the session
maps Array.<moorhen.Map> State containing current maps loaded in the session
commandCentre React.RefObject.<moorhen.CommandCentre> React reference to the command centre
timeCapsuleRef React.RefObject.<moorhen.TimeCapsule> React reference to the time capsule
glRef React.RefObject.<webGL.MGWebGL> React reference to the webGL renderer
dispatch Dispatch.<AnyAction> Dispatch method for the MoorhenReduxStore

View Source utils/MoorhenUtils.ts, line 423

Returns -1 if there was an error loading the session otherwise 0
number

# loadSessionFromProtoMessage(sessionProtoMessage, monomerLibraryPath, molecules, maps, commandCentre, timeCapsuleRef, glRef, dispatch) → {number}

A function to load session data
Parameters:
Name Type Description
sessionProtoMessage string A protobuf message for the object containing session data
monomerLibraryPath string Path to the monomer library
molecules Array.<moorhen.Molecule> State containing current molecules loaded in the session
maps Array.<moorhen.Map> State containing current maps loaded in the session
commandCentre React.RefObject.<moorhen.CommandCentre> React reference to the command centre
timeCapsuleRef React.RefObject.<moorhen.TimeCapsule> React reference to the time capsule
glRef React.RefObject.<webGL.MGWebGL> React reference to the webGL renderer
dispatch Dispatch.<AnyAction> Dispatch method for the MoorhenReduxStore

View Source utils/MoorhenUtils.ts, line 404

Returns -1 if there was an error loading the session otherwise 0
number