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 |
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 |
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 |
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. |
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} />
)