From c1f9c3d400a077c809c650f7e83c41e4b59f366b Mon Sep 17 00:00:00 2001 From: Filomeno Sanchez Date: Mon, 8 Jul 2024 15:18:45 +0100 Subject: [PATCH 1/4] refactor code base to stop using defaultProps --- baby-gru/src/components/MoorhenContainer.tsx | 55 ++++---- .../MoorhenAddCustomRepresentationCard.tsx | 22 ++-- .../src/components/card/MoorhenLigandCard.tsx | 18 ++- .../src/components/card/MoorhenMapCard.tsx | 18 +-- .../MoorhenAddAltConfButton.tsx | 0 .../MoorhenAddTerminalResidueButton.tsx | 9 +- .../MoorhenAutofitRotamerButton.tsx | 0 .../MoorhenContextButtonBase.tsx | 52 ++++---- .../context-menu/MoorhenContextMenu.tsx | 120 +++++------------- .../MoorhenConvertCisTransButton.tsx | 0 .../MoorhenDeleteButton.tsx | 0 .../MoorhenDragAtomsButton.tsx | 0 .../MoorhenEigenFlipLigandButton.tsx | 0 .../MoorhenFlipPeptideButton.tsx | 0 .../MoorhenJedFlipFalseButton.tsx | 0 .../MoorhenJedFlipTrueButton.tsx | 0 .../MoorhenMutateButton.tsx | 0 .../MoorhenRefineResiduesButton.tsx | 0 .../MoorhenRigidBodyFitButton.tsx | 0 .../MoorhenRotamerChangeButton.tsx | 0 .../MoorhenRotateTranslateZoneButton.tsx | 0 .../MoorhenSideChain180Button.tsx | 0 .../components/form/MoorhenCidInputForm.tsx | 22 ++-- .../form/MoorhenFetchOnlineSourcesForm.tsx | 34 ++--- .../list/MoorhenCarbohydrateList.tsx | 13 +- .../src/components/list/MoorhenLigandList.tsx | 12 +- .../menu-item/MoorhenAddSimpleMenuItem.tsx | 6 +- .../MoorhenBackgroundColorMenuItem.tsx | 4 +- .../menu-item/MoorhenBaseMenuItem.tsx | 59 +++++---- .../MoorhenCalculateTrajectoryMenuItem.tsx | 5 +- .../MoorhenClearSelfRestraintsMenuItem.tsx | 6 +- ...faultBondSmoothnessPreferencesMenuItem.tsx | 8 +- .../menu-item/MoorhenGetMonomerMenuItem.tsx | 8 +- .../menu-item/MoorhenImportFSigFMenuItem.tsx | 5 +- .../MoorhenMapContourSettingsMenuItem.tsx | 11 +- .../MoorhenMergeMoleculesMenuItem.tsx | 14 +- .../menu-item/MoorhenMoveMoleculeHere.tsx | 8 +- .../MoorhenSelfRestraintsMenuItem.tsx | 8 +- .../menu-item/MoorhenSplitModelsMenuItem.tsx | 9 +- .../src/components/misc/MoorhenSlider.tsx | 79 +++++++----- .../modal/MoorhenDraggableModalBase.tsx | 64 +++++----- .../src/components/modal/MoorhenMapsModal.tsx | 7 - .../components/select/MoorhenBackupSelect.tsx | 10 +- .../components/select/MoorhenChainSelect.tsx | 17 +-- .../components/select/MoorhenLigandSelect.tsx | 19 +-- .../components/select/MoorhenMapSelect.tsx | 21 +-- .../select/MoorhenMoleculeSelect.tsx | 22 ++-- .../components/select/MoorhenNumberForm.tsx | 24 ++-- .../sequence-viewer/MoorhenSequenceViewer.tsx | 1 - .../snack-bar/MoorhenResidueStepsSnackBar.tsx | 26 ++-- .../MoorhenValidationChartWidgetBase.tsx | 23 ++-- .../MoorhenValidationListWidgetBase.tsx | 23 ++-- baby-gru/src/types/moorhen.d.ts | 1 - 53 files changed, 401 insertions(+), 462 deletions(-) rename baby-gru/src/components/{button => context-menu}/MoorhenAddAltConfButton.tsx (100%) rename baby-gru/src/components/{button => context-menu}/MoorhenAddTerminalResidueButton.tsx (86%) rename baby-gru/src/components/{button => context-menu}/MoorhenAutofitRotamerButton.tsx (100%) rename baby-gru/src/components/{button => context-menu}/MoorhenContextButtonBase.tsx (85%) rename baby-gru/src/components/{button => context-menu}/MoorhenConvertCisTransButton.tsx (100%) rename baby-gru/src/components/{button => context-menu}/MoorhenDeleteButton.tsx (100%) rename baby-gru/src/components/{button => context-menu}/MoorhenDragAtomsButton.tsx (100%) rename baby-gru/src/components/{button => context-menu}/MoorhenEigenFlipLigandButton.tsx (100%) rename baby-gru/src/components/{button => context-menu}/MoorhenFlipPeptideButton.tsx (100%) rename baby-gru/src/components/{button => context-menu}/MoorhenJedFlipFalseButton.tsx (100%) rename baby-gru/src/components/{button => context-menu}/MoorhenJedFlipTrueButton.tsx (100%) rename baby-gru/src/components/{button => context-menu}/MoorhenMutateButton.tsx (100%) rename baby-gru/src/components/{button => context-menu}/MoorhenRefineResiduesButton.tsx (100%) rename baby-gru/src/components/{button => context-menu}/MoorhenRigidBodyFitButton.tsx (100%) rename baby-gru/src/components/{button => context-menu}/MoorhenRotamerChangeButton.tsx (100%) rename baby-gru/src/components/{button => context-menu}/MoorhenRotateTranslateZoneButton.tsx (100%) rename baby-gru/src/components/{button => context-menu}/MoorhenSideChain180Button.tsx (100%) diff --git a/baby-gru/src/components/MoorhenContainer.tsx b/baby-gru/src/components/MoorhenContainer.tsx index 3e37e0ad1..bc8ed9632 100644 --- a/baby-gru/src/components/MoorhenContainer.tsx +++ b/baby-gru/src/components/MoorhenContainer.tsx @@ -171,7 +171,6 @@ export const MoorhenContainer = (props: moorhen.ContainerProps) => { const innerActiveMapRef = useRef(null) const innerlastHoveredAtomRef = useRef(null) - const dispatch = useDispatch() const maps = useSelector((state: moorhen.State) => state.maps) const molecules = useSelector((state: moorhen.State) => state.molecules.moleculeList) const cursorStyle = useSelector((state: moorhen.State) => state.hoveringStates.cursorStyle) @@ -191,15 +190,17 @@ export const MoorhenContainer = (props: moorhen.ContainerProps) => { const modificationCountBackupThreshold = useSelector((state: moorhen.State) => state.backupSettings.modificationCountBackupThreshold) const activeMap = useSelector((state: moorhen.State) => state.generalStates.activeMap) - const innerStatesMap: moorhen.ContainerRefs = { + const dispatch = useDispatch() + + const innerRefsMap: moorhen.ContainerRefs = { glRef: innerGlRef, timeCapsuleRef: innerTimeCapsuleRef, commandCentre: innnerCommandCentre, moleculesRef: innerMoleculesRef, mapsRef: innerMapsRef, activeMapRef: innerActiveMapRef, lastHoveredAtomRef: innerlastHoveredAtomRef, videoRecorderRef: innerVideoRecorderRef, } let refs = {} as moorhen.ContainerRefs - Object.keys(innerStatesMap).forEach(key => { - refs[key] = props[key] ? props[key] : innerStatesMap[key] + Object.keys(innerRefsMap).forEach(key => { + refs[key] = props[key] ? props[key] : innerRefsMap[key] }) const { @@ -210,12 +211,32 @@ export const MoorhenContainer = (props: moorhen.ContainerProps) => { moleculesRef.current = molecules mapsRef.current = maps + const defaultProps = { + onUserPreferencesChange: () => {}, + urlPrefix: '.', + monomerLibraryPath: './monomers', + setMoorhenDimensions: null, + disableFileUploads: false, + includeNavBarMenuNames: [], + extraNavBarModals: [], + extraNavBarMenus: [], + extraFileMenuItems: [], + extraEditMenuItems: [], + extraCalculateMenuItems: [], + extraDraggableModals: [], + viewOnly: false, + allowScripting: true, + backupStorageInstance: createLocalStorageInstance('Moorhen-TimeCapsule'), + aceDRGInstance: null, + store: MoorhenReduxStore + } + const { disableFileUploads, urlPrefix, extraNavBarMenus, viewOnly, extraDraggableModals, monomerLibraryPath, extraFileMenuItems, allowScripting, backupStorageInstance, extraEditMenuItems, aceDRGInstance, extraCalculateMenuItems, setMoorhenDimensions, onUserPreferencesChange, extraNavBarModals, includeNavBarMenuNames, store - } = props + } = { ...defaultProps, ...props } const collectedProps: moorhen.CollectedProps = { glRef, commandCentre, timeCapsuleRef, disableFileUploads, extraDraggableModals, aceDRGInstance, @@ -228,7 +249,7 @@ export const MoorhenContainer = (props: moorhen.ContainerProps) => { useLayoutEffect(() => { let head = document.head let style: any = document.createElement("link") - style.href = `${props.urlPrefix}/moorhen.css` + style.href = `${urlPrefix}/moorhen.css` style.rel = "stylesheet" style.async = true style.type = 'text/css' @@ -486,7 +507,7 @@ export const MoorhenContainer = (props: moorhen.ContainerProps) => { - + {/** { } - -MoorhenContainer.defaultProps = { - onUserPreferencesChange: () => {}, - urlPrefix: '.', - monomerLibraryPath: './monomers', - setMoorhenDimensions: null, - disableFileUploads: false, - includeNavBarMenuNames: [], - extraNavBarModals: [], - extraNavBarMenus: [], - extraFileMenuItems: [], - extraEditMenuItems: [], - extraCalculateMenuItems: [], - extraDraggableModals: [], - viewOnly: false, - allowScripting: true, - backupStorageInstance: createLocalStorageInstance('Moorhen-TimeCapsule'), - aceDRGInstance: null, - store: MoorhenReduxStore -} diff --git a/baby-gru/src/components/card/MoorhenAddCustomRepresentationCard.tsx b/baby-gru/src/components/card/MoorhenAddCustomRepresentationCard.tsx index 3598b92ab..40d6c2f54 100644 --- a/baby-gru/src/components/card/MoorhenAddCustomRepresentationCard.tsx +++ b/baby-gru/src/components/card/MoorhenAddCustomRepresentationCard.tsx @@ -100,6 +100,8 @@ export const MoorhenAddCustomRepresentationCard = (props: { const { enqueueSnackbar } = useSnackbar() + const mode = props.mode ?? "add" + const ribbonSettingsProps = { ribbonCoilThickness, setRibbonCoilThickness, ribbonHelixWidth, setRibbonHelixWidth, ribbonStrandWidth, setRibbonStrandWidth, ribbonArrowWidth, setRibbonArrowWidth, ribbonDNARNAWidth, @@ -249,7 +251,7 @@ export const MoorhenAddCustomRepresentationCard = (props: { } } - if (props.mode === 'add') { + if (mode === 'add') { const representation = await props.molecule.addRepresentation( styleSelectRef.current.value, cidSelection, @@ -260,7 +262,7 @@ export const MoorhenAddCustomRepresentationCard = (props: { residueEnvSettings ) dispatch( addCustomRepresentation(representation) ) - } else if (props.mode === 'edit' && props.representation.uniqueId) { + } else if (mode === 'edit' && props.representation.uniqueId) { const representation = props.molecule.representations.find(item => item.uniqueId === props.representation.uniqueId) if (representation) { representation.cid = cidSelection @@ -277,7 +279,7 @@ export const MoorhenAddCustomRepresentationCard = (props: { props.setShow(false) props.setBusy?.(false) }, [ - colour, props.molecule, props.representation, props.mode, bondWidth, atomRadiusBondRatio, bondSmoothness, + colour, props.molecule, props.representation, mode, bondWidth, atomRadiusBondRatio, bondSmoothness, nucleotideRibbonStyle, ribbonArrowWidth, ribbonAxialSampling, ribbonCoilThickness, ribbonDNARNAWidth, ribbonHelixWidth, ribbonStrandWidth, maxEnvDist, labelledEnv, showEnvContacts, showEnvHBonds ]) @@ -287,17 +289,17 @@ export const MoorhenAddCustomRepresentationCard = (props: { await createRepresentation() } catch (err) { console.warn(err) - enqueueSnackbar(`Something went wrong while ${props.mode === "edit" ? "editing" : "creating a new"} custom representation`, { variant: "error" }) + enqueueSnackbar(`Something went wrong while ${mode === "edit" ? "editing" : "creating a new"} custom representation`, { variant: "error" }) } }, [createRepresentation]) const handleColourModeChange = useCallback((evt) => { - if (evt.target.value === "mol-symm" && !ncsColourRuleRef.current && props.mode === "edit") { + if (evt.target.value === "mol-symm" && !ncsColourRuleRef.current && mode === "edit") { const representation = props.molecule.representations.find(item => item.uniqueId === props.representation.uniqueId) if (representation?.colourRules?.length > 0) ncsColourRuleRef.current = representation.colourRules[0] } setColourMode(evt.target.value) - }, [props.molecule, props.mode, props.representation]) + }, [props.molecule, mode, props.representation]) const applyNcsColourChange = useCallback(async () => { await props.molecule.redraw() @@ -445,7 +447,7 @@ export const MoorhenAddCustomRepresentationCard = (props: {
: colourMode === "mol-symm" ? - props.mode === "edit" ? + mode === "edit" ? : @@ -490,12 +492,8 @@ export const MoorhenAddCustomRepresentationCard = (props: { } } - -MoorhenAddCustomRepresentationCard.defaultProps = { - mode: 'add' -} diff --git a/baby-gru/src/components/card/MoorhenLigandCard.tsx b/baby-gru/src/components/card/MoorhenLigandCard.tsx index e78379adf..79523a9ce 100644 --- a/baby-gru/src/components/card/MoorhenLigandCard.tsx +++ b/baby-gru/src/components/card/MoorhenLigandCard.tsx @@ -29,14 +29,18 @@ export const MoorhenLigandCard = (props: { const height = useSelector((state: moorhen.State) => state.sceneSettings.height) const width = useSelector((state: moorhen.State) => state.sceneSettings.width) - const { ligand, molecule } = props + const defaultValidationStyles = [ + 'contact_dots', 'chemical_features', 'ligand_environment', 'ligand_validation' + ] + + const { ligand, molecule, validationStyles } = { validationStyles: defaultValidationStyles, ...props } useEffect(() => { const changedState = { ...showState } - props.validationStyles.forEach(style => changedState[style] = molecule.representations.some(representation => representation.style === style && representation.visible)) + validationStyles.forEach(style => changedState[style] = molecule.representations.some(representation => representation.style === style && representation.visible)) setShowState(changedState) return () => { - props.validationStyles.forEach(key => { + validationStyles.forEach(key => { molecule.hide(key, ligand.cid) }) } @@ -120,7 +124,7 @@ export const MoorhenLigandCard = (props: { {ligand.cid} - {props.validationStyles.map(style => { + {validationStyles.map(style => { return getToggleButton(style, validationLabels[style]) })} {ligand.chem_comp_info?.length > 0 && @@ -135,9 +139,3 @@ export const MoorhenLigandCard = (props: { } - -MoorhenLigandCard.defaultProps = { - validationStyles: [ - 'contact_dots', 'chemical_features', 'ligand_environment', 'ligand_validation' - ] -} \ No newline at end of file diff --git a/baby-gru/src/components/card/MoorhenMapCard.tsx b/baby-gru/src/components/card/MoorhenMapCard.tsx index 18d1a5fe6..1b579cf2c 100644 --- a/baby-gru/src/components/card/MoorhenMapCard.tsx +++ b/baby-gru/src/components/card/MoorhenMapCard.tsx @@ -42,12 +42,18 @@ interface MoorhenMapCardPropsInterface extends moorhen.CollectedProps { } export const MoorhenMapCard = forwardRef((props, cardRef) => { + const defaultProps = { + initialContour: 0.8, initialRadius: 13 + } + + const { initialContour, initialRadius } = {...defaultProps, ...props} + const mapRadius = useSelector((state: moorhen.State) => { const map = state.mapContourSettings.mapRadii.find(item => item.molNo === props.map.molNo) if (map) { return map.radius } else { - return props.initialRadius + return initialRadius } }) const mapContourLevel = useSelector((state: moorhen.State) => { @@ -55,7 +61,7 @@ export const MoorhenMapCard = forwardRef((pro if (map) { return map.contourLevel } else { - return props.initialContour + return initialContour } }) const mapStyle = useSelector((state: moorhen.State) => { @@ -616,7 +622,7 @@ export const MoorhenMapCard = forwardRef((pro logScale={true} showSliderTitle={false} isDisabled={!mapIsVisible} - initialValue={props.initialContour} + initialValue={initialContour} externalValue={mapContourLevel} setExternalValue={(newVal) => dispatch( setContourLevel({molNo: props.map.molNo, contourLevel: newVal}) )} /> @@ -633,7 +639,7 @@ export const MoorhenMapCard = forwardRef((pro sliderTitle="Radius" decimalPlaces={2} isDisabled={!mapIsVisible} - initialValue={props.initialRadius} + initialValue={initialRadius} externalValue={mapRadius} setExternalValue={(newVal) => dispatch( setMapRadius({molNo: props.map.molNo, radius: newVal}) )} /> @@ -657,7 +663,3 @@ export const MoorhenMapCard = forwardRef((pro }) - -MoorhenMapCard.defaultProps = { - initialContour: 0.8, initialRadius: 13 -} \ No newline at end of file diff --git a/baby-gru/src/components/button/MoorhenAddAltConfButton.tsx b/baby-gru/src/components/context-menu/MoorhenAddAltConfButton.tsx similarity index 100% rename from baby-gru/src/components/button/MoorhenAddAltConfButton.tsx rename to baby-gru/src/components/context-menu/MoorhenAddAltConfButton.tsx diff --git a/baby-gru/src/components/button/MoorhenAddTerminalResidueButton.tsx b/baby-gru/src/components/context-menu/MoorhenAddTerminalResidueButton.tsx similarity index 86% rename from baby-gru/src/components/button/MoorhenAddTerminalResidueButton.tsx rename to baby-gru/src/components/context-menu/MoorhenAddTerminalResidueButton.tsx index d0e2f1044..104cc9575 100644 --- a/baby-gru/src/components/button/MoorhenAddTerminalResidueButton.tsx +++ b/baby-gru/src/components/context-menu/MoorhenAddTerminalResidueButton.tsx @@ -7,8 +7,11 @@ import { useSelector } from "react-redux"; export const MoorhenAddTerminalResidueButton = (props: moorhen.ContextButtonProps) => { const [toolTip, setToolTip] = useState("Add Residue") + const shortCuts = useSelector((state: moorhen.State) => state.shortcutSettings.shortCuts) + const { selectedMolecule, chosenAtom, urlPrefix } = { ...props } + const getCootCommandInput = (selectedMolecule: moorhen.Molecule, chosenAtom: moorhen.ResidueSpec, localParameters?: string): moorhen.cootCommandKwargs => { return { message: 'coot_command', @@ -27,12 +30,10 @@ export const MoorhenAddTerminalResidueButton = (props: moorhen.ContextButtonProp }, [shortCuts]) return } + icon={Add Residue} needsMapData={true} toolTipLabel={toolTip} - cootCommandInput={getCootCommandInput(props.selectedMolecule, props.chosenAtom)} + cootCommandInput={getCootCommandInput(selectedMolecule, chosenAtom)} {...props} /> } - -MoorhenAddTerminalResidueButton.defaultProps = { mode: 'edit' } diff --git a/baby-gru/src/components/button/MoorhenAutofitRotamerButton.tsx b/baby-gru/src/components/context-menu/MoorhenAutofitRotamerButton.tsx similarity index 100% rename from baby-gru/src/components/button/MoorhenAutofitRotamerButton.tsx rename to baby-gru/src/components/context-menu/MoorhenAutofitRotamerButton.tsx diff --git a/baby-gru/src/components/button/MoorhenContextButtonBase.tsx b/baby-gru/src/components/context-menu/MoorhenContextButtonBase.tsx similarity index 85% rename from baby-gru/src/components/button/MoorhenContextButtonBase.tsx rename to baby-gru/src/components/context-menu/MoorhenContextButtonBase.tsx index 6ff24e7b0..1ddea3e1e 100644 --- a/baby-gru/src/components/button/MoorhenContextButtonBase.tsx +++ b/baby-gru/src/components/context-menu/MoorhenContextButtonBase.tsx @@ -21,6 +21,12 @@ const MoorhenPopoverOptions = (props: { defaultValue?: string; setDefaultValue?: (arg0: string) => void; }) => { + + const defaultProps = { defaultValue: 'TRIPLE', nonCootCommand: null } + + const { + defaultValue, nonCootCommand + } = { ...defaultProps, ...props } const selectRef = useRef(null) const extraInputRef = useRef(null) @@ -32,11 +38,11 @@ const MoorhenPopoverOptions = (props: { }, []) const handleClick = useCallback(() => { - props.setDefaultValue(selectRef.current.value) - if (!props.nonCootCommand) { - props.doEdit(props.getCootCommandInput(props.selectedMolecule, props.chosenAtom, selectRef.current.value, extraInputRef)) + props.setDefaultValue?.(selectRef.current.value) + if (!nonCootCommand) { + props.doEdit(props.getCootCommandInput?.(props.selectedMolecule, props.chosenAtom, selectRef.current.value, extraInputRef)) } else { - props.nonCootCommand(props.selectedMolecule, props.chosenAtom, selectRef.current.value) + nonCootCommand(props.selectedMolecule, props.chosenAtom, selectRef.current.value) } }, [props]) @@ -51,22 +57,20 @@ const MoorhenPopoverOptions = (props: { {props.label} - + {props.options.map(optionName => { return })} - {props.extraInput(extraInputRef)} + {props.extraInput?.(extraInputRef)} - } +} -MoorhenPopoverOptions.defaultProps = {extraInput: () => null, nonCootCommand: false} - export const MoorhenContextButtonBase = (props: { commandCentre: React.RefObject; @@ -98,25 +102,35 @@ export const MoorhenContextButtonBase = (props: { setDefaultValue?: (arg0: string) => void; }; }) => { + + const defaultProps = { + needsMapData: false, needsAtomData: true, + refineAfterMod: true, onExit: null, onCompleted: null + } + + const { + refineAfterMod, onCompleted, needsAtomData, needsMapData, onExit + } = {...defaultProps, ...props} - const dispatch = useDispatch() const molecules = useSelector((state: moorhen.State) => state.molecules.moleculeList) const isDark = useSelector((state: moorhen.State) => state.sceneSettings.isDark) const enableRefineAfterMod = useSelector((state: moorhen.State) => state.refinementSettings.enableRefineAfterMod) const activeMap = useSelector((state: moorhen.State) => state.generalStates.activeMap) const animateRefine = useSelector((state: moorhen.State) => state.refinementSettings.animateRefine) + const dispatch = useDispatch() + const doEdit = async (cootCommandInput: moorhen.cootCommandKwargs) => { dispatch( setHoveredAtom({molecule: null, cid: null}) ) props.setShowContextMenu(false) const cootResult = await props.commandCentre.current.cootCommand(cootCommandInput, true) - if (props.onCompleted) { - props.onCompleted(props.selectedMolecule, props.chosenAtom) + if (onCompleted) { + onCompleted(props.selectedMolecule, props.chosenAtom) } - if (props.refineAfterMod && enableRefineAfterMod && activeMap) { + if (refineAfterMod && enableRefineAfterMod && activeMap) { try { if (animateRefine) { await props.selectedMolecule.refineResiduesUsingAtomCidAnimated(`//${props.chosenAtom.chain_id}/${props.chosenAtom.res_no}`, activeMap, 2, true, false) @@ -135,8 +149,8 @@ export const MoorhenContextButtonBase = (props: { dispatch( triggerUpdate(props.selectedMolecule.molNo) ) props.selectedMolecule.clearBuffersOfStyle('hover') - if(props.onExit) { - props.onExit(props.selectedMolecule, props.chosenAtom, cootResult) + if(onExit) { + onExit(props.selectedMolecule, props.chosenAtom, cootResult) } } @@ -159,15 +173,9 @@ export const MoorhenContextButtonBase = (props: { onClick={handleClick} onMouseEnter={() => props.setToolTip(props.toolTipLabel)} style={{ backgroundColor: isDark ? 'grey' : 'white' }} - disabled={props.needsMapData && !activeMap || (props.needsAtomData && molecules.length === 0)} + disabled={needsMapData && !activeMap || (needsAtomData && molecules.length === 0)} > {props.icon} } - -MoorhenContextButtonBase.defaultProps = { - needsMapData: false, needsAtomData: true, - refineAfterMod: true, onExit: null, onCompleted: null -} - \ No newline at end of file diff --git a/baby-gru/src/components/context-menu/MoorhenContextMenu.tsx b/baby-gru/src/components/context-menu/MoorhenContextMenu.tsx index ea0f528db..9fe287c97 100644 --- a/baby-gru/src/components/context-menu/MoorhenContextMenu.tsx +++ b/baby-gru/src/components/context-menu/MoorhenContextMenu.tsx @@ -4,22 +4,22 @@ import { MoorhenBackgroundColorMenuItem } from "../menu-item/MoorhenBackgroundCo import { atomInfoToResSpec, convertRemToPx } from "../../utils/utils"; import { useEffect, useRef, useState, useCallback, MutableRefObject, RefObject } from "react"; import { Popover, Overlay, FormLabel, FormSelect, Button, Stack } from "react-bootstrap"; -import { MoorhenAddAltConfButton } from "../button/MoorhenAddAltConfButton" -import { MoorhenAddTerminalResidueButton } from "../button/MoorhenAddTerminalResidueButton" -import { MoorhenAutofitRotamerButton } from "../button/MoorhenAutofitRotamerButton" -import { MoorhenFlipPeptideButton } from "../button/MoorhenFlipPeptideButton" -import { MoorhenConvertCisTransButton } from "../button/MoorhenConvertCisTransButton" -import { MoorhenSideChain180Button } from "../button/MoorhenSideChain180Button" -import { MoorhenRefineResiduesButton } from "../button/MoorhenRefineResiduesButton" -import { MoorhenDeleteButton } from "../button/MoorhenDeleteButton" -import { MoorhenMutateButton } from "../button/MoorhenMutateButton"; -import { MoorhenEigenFlipLigandButton } from "../button/MoorhenEigenFlipLigandButton"; -import { MoorhenJedFlipFalseButton } from "../button/MoorhenJedFlipFalseButton"; -import { MoorhenJedFlipTrueButton } from "../button/MoorhenJedFlipTrueButton"; -import { MoorhenRotamerChangeButton } from "../button/MoorhenRotamerChangeButton"; -import { MoorhenRotateTranslateZoneButton } from "../button/MoorhenRotateTranslateZoneButton"; -import { MoorhenDragAtomsButton } from "../button/MoorhenDragAtomsButton"; -import { MoorhenRigidBodyFitButton } from "../button/MoorhenRigidBodyFitButton"; +import { MoorhenAddAltConfButton } from "./MoorhenAddAltConfButton" +import { MoorhenAddTerminalResidueButton } from "./MoorhenAddTerminalResidueButton" +import { MoorhenAutofitRotamerButton } from "./MoorhenAutofitRotamerButton" +import { MoorhenFlipPeptideButton } from "./MoorhenFlipPeptideButton" +import { MoorhenConvertCisTransButton } from "./MoorhenConvertCisTransButton" +import { MoorhenSideChain180Button } from "./MoorhenSideChain180Button" +import { MoorhenRefineResiduesButton } from "./MoorhenRefineResiduesButton" +import { MoorhenDeleteButton } from "./MoorhenDeleteButton" +import { MoorhenMutateButton } from "./MoorhenMutateButton"; +import { MoorhenEigenFlipLigandButton } from "./MoorhenEigenFlipLigandButton"; +import { MoorhenJedFlipFalseButton } from "./MoorhenJedFlipFalseButton"; +import { MoorhenJedFlipTrueButton } from "./MoorhenJedFlipTrueButton"; +import { MoorhenRotamerChangeButton } from "./MoorhenRotamerChangeButton"; +import { MoorhenRotateTranslateZoneButton } from "./MoorhenRotateTranslateZoneButton"; +import { MoorhenDragAtomsButton } from "./MoorhenDragAtomsButton"; +import { MoorhenRigidBodyFitButton } from "./MoorhenRigidBodyFitButton"; import { moorhen } from "../../types/moorhen"; import { JSX } from "react/jsx-runtime"; import { webGL } from "../../types/mgWebGL"; @@ -37,62 +37,6 @@ const ContextMenu = styled.div` `} `; -const MoorhenPopoverOptions = (props: { - showContextMenu: boolean; - setShowOverlay: React.Dispatch>; - label: string; - options: string[]; - extraInput: (arg0: MutableRefObject) => JSX.Element; - nonCootCommand?: (arg0: moorhen.Molecule, arg1: moorhen.ResidueSpec, arg2: string) => void; - doEdit: (arg0: moorhen.cootCommandKwargs) => void; - formatArgs: (arg0: string, arg1: MutableRefObject) => moorhen.cootCommandKwargs; - selectedMolecule: moorhen.Molecule; - chosenAtom: moorhen.ResidueSpec; -}) => { - - const selectRef = useRef(null) - const extraInputRef = useRef(null) - - const handleRightClick = useCallback(() => { - if (props.showContextMenu) { - props.setShowOverlay(false) - } - }, []) - - useEffect(() => { - document.addEventListener("rightClick", handleRightClick); - return () => { - document.removeEventListener("rightClick", handleRightClick); - }; - -}, [handleRightClick]); - - return props.setShowOverlay(false)}> - - - {props.label} - - {props.options.map(optionName => { - return - })} - - - {props.extraInput(extraInputRef)} - - - -} - -MoorhenPopoverOptions.defaultProps = {extraInput: () => null, nonCootCommand: false} - export const MoorhenContextMenu = (props: { urlPrefix: string; showContextMenu: false | moorhen.AtomRightClickEventInfo; @@ -184,22 +128,22 @@ export const MoorhenContextMenu = (props: {
- - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + +
diff --git a/baby-gru/src/components/button/MoorhenConvertCisTransButton.tsx b/baby-gru/src/components/context-menu/MoorhenConvertCisTransButton.tsx similarity index 100% rename from baby-gru/src/components/button/MoorhenConvertCisTransButton.tsx rename to baby-gru/src/components/context-menu/MoorhenConvertCisTransButton.tsx diff --git a/baby-gru/src/components/button/MoorhenDeleteButton.tsx b/baby-gru/src/components/context-menu/MoorhenDeleteButton.tsx similarity index 100% rename from baby-gru/src/components/button/MoorhenDeleteButton.tsx rename to baby-gru/src/components/context-menu/MoorhenDeleteButton.tsx diff --git a/baby-gru/src/components/button/MoorhenDragAtomsButton.tsx b/baby-gru/src/components/context-menu/MoorhenDragAtomsButton.tsx similarity index 100% rename from baby-gru/src/components/button/MoorhenDragAtomsButton.tsx rename to baby-gru/src/components/context-menu/MoorhenDragAtomsButton.tsx diff --git a/baby-gru/src/components/button/MoorhenEigenFlipLigandButton.tsx b/baby-gru/src/components/context-menu/MoorhenEigenFlipLigandButton.tsx similarity index 100% rename from baby-gru/src/components/button/MoorhenEigenFlipLigandButton.tsx rename to baby-gru/src/components/context-menu/MoorhenEigenFlipLigandButton.tsx diff --git a/baby-gru/src/components/button/MoorhenFlipPeptideButton.tsx b/baby-gru/src/components/context-menu/MoorhenFlipPeptideButton.tsx similarity index 100% rename from baby-gru/src/components/button/MoorhenFlipPeptideButton.tsx rename to baby-gru/src/components/context-menu/MoorhenFlipPeptideButton.tsx diff --git a/baby-gru/src/components/button/MoorhenJedFlipFalseButton.tsx b/baby-gru/src/components/context-menu/MoorhenJedFlipFalseButton.tsx similarity index 100% rename from baby-gru/src/components/button/MoorhenJedFlipFalseButton.tsx rename to baby-gru/src/components/context-menu/MoorhenJedFlipFalseButton.tsx diff --git a/baby-gru/src/components/button/MoorhenJedFlipTrueButton.tsx b/baby-gru/src/components/context-menu/MoorhenJedFlipTrueButton.tsx similarity index 100% rename from baby-gru/src/components/button/MoorhenJedFlipTrueButton.tsx rename to baby-gru/src/components/context-menu/MoorhenJedFlipTrueButton.tsx diff --git a/baby-gru/src/components/button/MoorhenMutateButton.tsx b/baby-gru/src/components/context-menu/MoorhenMutateButton.tsx similarity index 100% rename from baby-gru/src/components/button/MoorhenMutateButton.tsx rename to baby-gru/src/components/context-menu/MoorhenMutateButton.tsx diff --git a/baby-gru/src/components/button/MoorhenRefineResiduesButton.tsx b/baby-gru/src/components/context-menu/MoorhenRefineResiduesButton.tsx similarity index 100% rename from baby-gru/src/components/button/MoorhenRefineResiduesButton.tsx rename to baby-gru/src/components/context-menu/MoorhenRefineResiduesButton.tsx diff --git a/baby-gru/src/components/button/MoorhenRigidBodyFitButton.tsx b/baby-gru/src/components/context-menu/MoorhenRigidBodyFitButton.tsx similarity index 100% rename from baby-gru/src/components/button/MoorhenRigidBodyFitButton.tsx rename to baby-gru/src/components/context-menu/MoorhenRigidBodyFitButton.tsx diff --git a/baby-gru/src/components/button/MoorhenRotamerChangeButton.tsx b/baby-gru/src/components/context-menu/MoorhenRotamerChangeButton.tsx similarity index 100% rename from baby-gru/src/components/button/MoorhenRotamerChangeButton.tsx rename to baby-gru/src/components/context-menu/MoorhenRotamerChangeButton.tsx diff --git a/baby-gru/src/components/button/MoorhenRotateTranslateZoneButton.tsx b/baby-gru/src/components/context-menu/MoorhenRotateTranslateZoneButton.tsx similarity index 100% rename from baby-gru/src/components/button/MoorhenRotateTranslateZoneButton.tsx rename to baby-gru/src/components/context-menu/MoorhenRotateTranslateZoneButton.tsx diff --git a/baby-gru/src/components/button/MoorhenSideChain180Button.tsx b/baby-gru/src/components/context-menu/MoorhenSideChain180Button.tsx similarity index 100% rename from baby-gru/src/components/button/MoorhenSideChain180Button.tsx rename to baby-gru/src/components/context-menu/MoorhenSideChain180Button.tsx diff --git a/baby-gru/src/components/form/MoorhenCidInputForm.tsx b/baby-gru/src/components/form/MoorhenCidInputForm.tsx index 9d0e3b42d..6952d76ad 100644 --- a/baby-gru/src/components/form/MoorhenCidInputForm.tsx +++ b/baby-gru/src/components/form/MoorhenCidInputForm.tsx @@ -16,6 +16,16 @@ type MoorhenCidInputFormPropsType = { } export const MoorhenCidInputForm = forwardRef((props, cidFormRef) => { + + const defaultProps = { + height: '4rem', width: '20rem', margin: '0.1rem', label: "Atom selection", + placeholder: "", defaultValue: "", invalidCid: false, allowUseCurrentSelection: false + } + + const { + height, width, margin, label, placeholder, defaultValue, invalidCid, allowUseCurrentSelection + } = { ...defaultProps, ...props } + const residueSelection = useSelector((state: moorhen.State) => state.generalStates.residueSelection) const showResidueSelection = useSelector((state: moorhen.State) => state.generalStates.showResidueSelection) @@ -39,15 +49,11 @@ export const MoorhenCidInputForm = forwardRef - - {props.label && {props.label}} - + + {label && {label}} + - {props.allowUseCurrentSelection && showResidueSelection && } + {allowUseCurrentSelection && showResidueSelection && } }) -MoorhenCidInputForm.defaultProps = { - height: '4rem', width: '20rem', margin: '0.1rem', label: "Atom selection", - placeholder: "", defaultValue: "", invalidCid: false, allowUseCurrentSelection: false -} diff --git a/baby-gru/src/components/form/MoorhenFetchOnlineSourcesForm.tsx b/baby-gru/src/components/form/MoorhenFetchOnlineSourcesForm.tsx index 26e326eb6..bcc859680 100644 --- a/baby-gru/src/components/form/MoorhenFetchOnlineSourcesForm.tsx +++ b/baby-gru/src/components/form/MoorhenFetchOnlineSourcesForm.tsx @@ -2,7 +2,7 @@ import { Form, Button, InputGroup, SplitButton, Dropdown } from "react-bootstrap import { MoorhenMolecule } from "../../utils/MoorhenMolecule"; import { MoorhenMap } from "../../utils/MoorhenMap"; import { useState, useRef } from "react"; -import { getMultiColourRuleArgs, guid } from "../../utils/utils"; +import { getMultiColourRuleArgs } from "../../utils/utils"; import { moorhen } from "../../types/moorhen"; import { useSelector, useDispatch, batch } from 'react-redux'; import { setActiveMap } from "../../store/generalStatesSlice"; @@ -24,6 +24,14 @@ export const MoorhenFetchOnlineSourcesForm = (props: { onMoleculeLoad: (newMolecule: moorhen.Molecule) => any; }) => { + const defaultProps = { + sources: ['PDBe', 'PDB-REDO', 'AFDB', 'EMDB'], downloadMaps: true, onMoleculeLoad: () => {} + } + + const { + sources, downloadMaps, onMoleculeLoad, commandCentre, glRef, store, monomerLibraryPath + } = { ...defaultProps, ...props } + const pdbCodeFetchInputRef = useRef(null); const fetchMapDataCheckRef = useRef(null); @@ -37,8 +45,6 @@ export const MoorhenFetchOnlineSourcesForm = (props: { const { enqueueSnackbar } = useSnackbar() - const { commandCentre, glRef, monomerLibraryPath, store } = props; - const fetchFiles = (): void => { if (pdbCodeFetchInputRef.current.value === "") { return @@ -74,18 +80,6 @@ export const MoorhenFetchOnlineSourcesForm = (props: { } } - const fetchFilesFromCOD = () => { - const entryCod: string = pdbCodeFetchInputRef.current.value.toLowerCase() - const codUrl = `http://www.crystallography.net/cod/${entryCod}.cif` - if (entryCod) { - Promise.all([ - fetchMoleculeFromURL(codUrl, `cod-${entryCod}`), - ]) - } else { - console.log('Error: no COD entry') - } - } - const fetchFilesFromEBI = () => { const pdbCode = pdbCodeFetchInputRef.current.value.toLowerCase() const coordUrl = `https://www.ebi.ac.uk/pdbe/entry-files/download/${pdbCode}.cif` @@ -146,7 +140,7 @@ export const MoorhenFetchOnlineSourcesForm = (props: { await newMolecule.fetchIfDirtyAndDraw(newMolecule.atomCount >= 50000 ? 'CRs' : 'CBs') await newMolecule.centreOn('/*/*/*/*', true) dispatch(addMolecule(newMolecule)) - props.onMoleculeLoad(newMolecule) + onMoleculeLoad(newMolecule) return newMolecule } catch (err) { enqueueSnackbar('Failed to read molecule', {variant: "error"}) @@ -206,7 +200,7 @@ export const MoorhenFetchOnlineSourcesForm = (props: { Fetch from online services - {props.sources.map(source => { + {sources.map(source => { /* @ts-ignore */ return { setRemoteSource(source) @@ -224,10 +218,6 @@ export const MoorhenFetchOnlineSourcesForm = (props: { Problem fetching - {props.downloadMaps && } + {downloadMaps && } } - -MoorhenFetchOnlineSourcesForm.defaultProps = { - sources: ['PDBe', 'PDB-REDO', 'AFDB', 'EMDB'], downloadMaps: true, onMoleculeLoad: () => {} -} diff --git a/baby-gru/src/components/list/MoorhenCarbohydrateList.tsx b/baby-gru/src/components/list/MoorhenCarbohydrateList.tsx index 8029d632a..bbe0789dd 100644 --- a/baby-gru/src/components/list/MoorhenCarbohydrateList.tsx +++ b/baby-gru/src/components/list/MoorhenCarbohydrateList.tsx @@ -1,7 +1,6 @@ import { useEffect, useState } from "react"; import { Row, Col } from "react-bootstrap"; import { moorhen } from "../../types/moorhen"; -import { webGL } from "../../types/mgWebGL"; import { useSelector } from "react-redux"; import { MoorhenCarbohydrateCard } from "../card/MoorhenCarbohydrateCard"; import { privateer } from "../../types/privateer"; @@ -10,9 +9,7 @@ import { modalKeys } from "../../utils/enums"; export const MoorhenCarbohydrateList = (props: { setBusy?: React.Dispatch>; - commandCentre: React.RefObject; molecule: moorhen.Molecule; - glRef: React.RefObject; height?: number | string; }) => { @@ -23,10 +20,10 @@ export const MoorhenCarbohydrateList = (props: { const [carbohydrateList, setCarbohydrateList] = useState(null) const validate = async () => { - props.setBusy(true) + props.setBusy?.(true) const result = await props.molecule.getPrivateerValidation(true) setCarbohydrateList(result) - props.setBusy(false) + props.setBusy?.(false) } useEffect(() => { @@ -48,9 +45,9 @@ export const MoorhenCarbohydrateList = (props: { : carbohydrateList.length > 0 ? <> - + - {carbohydrateList.map((carbohydrate, index) => { + {carbohydrateList.map(carbohydrate => { return })} @@ -63,5 +60,3 @@ export const MoorhenCarbohydrateList = (props: { } } - -MoorhenCarbohydrateList.defaultProps = { setBusy: () => {}, height: '30vh'} \ No newline at end of file diff --git a/baby-gru/src/components/list/MoorhenLigandList.tsx b/baby-gru/src/components/list/MoorhenLigandList.tsx index e4ac70696..bb3792adf 100644 --- a/baby-gru/src/components/list/MoorhenLigandList.tsx +++ b/baby-gru/src/components/list/MoorhenLigandList.tsx @@ -1,7 +1,6 @@ import { useEffect, useState } from "react"; import { Row, Col } from "react-bootstrap"; import { moorhen } from "../../types/moorhen"; -import { webGL } from "../../types/mgWebGL"; import { useSelector } from "react-redux"; import { MoorhenLigandCard } from "../card/MoorhenLigandCard"; import { LinearProgress } from "@mui/material"; @@ -11,7 +10,6 @@ export const MoorhenLigandList = (props: { setBusy?: React.Dispatch>; commandCentre: React.RefObject; molecule: moorhen.Molecule; - glRef: React.RefObject; height?: number | string; }) => { @@ -22,7 +20,7 @@ export const MoorhenLigandList = (props: { const [ligandList, setLigandList] = useState(null) async function updateLigandList() { - props.setBusy(true) + props.setBusy?.(true) if (props.molecule.gemmiStructure === null || props.molecule.atomsDirty || props.molecule.ligands === null) { await props.molecule.updateAtoms() } @@ -45,7 +43,7 @@ export const MoorhenLigandList = (props: { } setLigandList(ligandList) - props.setBusy(false) + props.setBusy?.(false) } useEffect(() => { @@ -67,9 +65,9 @@ export const MoorhenLigandList = (props: { : ligandList.length > 0 ? <> - + - {ligandList.map((ligand, index) => { + {ligandList.map(ligand => { return })} @@ -82,5 +80,3 @@ export const MoorhenLigandList = (props: { } } - -MoorhenLigandList.defaultProps = { setBusy: () => {}, height: '30vh'} \ No newline at end of file diff --git a/baby-gru/src/components/menu-item/MoorhenAddSimpleMenuItem.tsx b/baby-gru/src/components/menu-item/MoorhenAddSimpleMenuItem.tsx index ddf2d4a58..32fed8db3 100644 --- a/baby-gru/src/components/menu-item/MoorhenAddSimpleMenuItem.tsx +++ b/baby-gru/src/components/menu-item/MoorhenAddSimpleMenuItem.tsx @@ -28,7 +28,7 @@ export const MoorhenAddSimpleMenuItem = (props: { {molTypes.map(type => {return })} - + @@ -45,10 +45,8 @@ export const MoorhenAddSimpleMenuItem = (props: { popoverContent={panelContent} menuItemText="Add simple..." onCompleted={onCompleted} - popoverPlacement={props.popoverPlacement} + popoverPlacement={props.popoverPlacement ?? 'right'} setPopoverIsShown={props.setPopoverIsShown} /> } -MoorhenAddSimpleMenuItem.defaultProps = { popoverPlacement: "right" } - diff --git a/baby-gru/src/components/menu-item/MoorhenBackgroundColorMenuItem.tsx b/baby-gru/src/components/menu-item/MoorhenBackgroundColorMenuItem.tsx index cfd25eb8a..57c663dec 100644 --- a/baby-gru/src/components/menu-item/MoorhenBackgroundColorMenuItem.tsx +++ b/baby-gru/src/components/menu-item/MoorhenBackgroundColorMenuItem.tsx @@ -65,8 +65,6 @@ export const MoorhenBackgroundColorMenuItem = (props: { menuItemText="Set background colour..." onCompleted={() => props.setPopoverIsShown(false)} setPopoverIsShown={props.setPopoverIsShown} - popoverPlacement={props.popoverPlacement} + popoverPlacement={props.popoverPlacement ?? "right"} /> } - -MoorhenBackgroundColorMenuItem.defaultProps = { popoverPlacement: "right" } diff --git a/baby-gru/src/components/menu-item/MoorhenBaseMenuItem.tsx b/baby-gru/src/components/menu-item/MoorhenBaseMenuItem.tsx index f14047524..a31586ab9 100644 --- a/baby-gru/src/components/menu-item/MoorhenBaseMenuItem.tsx +++ b/baby-gru/src/components/menu-item/MoorhenBaseMenuItem.tsx @@ -19,15 +19,34 @@ export const MoorhenBaseMenuItem = (props: { disabled?: boolean; }) => { + const defaultProps = { + id: '', + showOkButton: true, + buttonText: "OK", + buttonVariant: "primary", + textClassName: "", + popoverPlacement: "right", + onEntering: () => { }, + onExiting: () => { }, + onCompleted: () => { }, + disabled: false + } + + const { + popoverContent, popoverPlacement, onCompleted, onEntering, setPopoverIsShown, + onExiting, menuItemTitle, showOkButton, buttonVariant, buttonText, + textClassName, id, menuItemText, disabled + } = { ...defaultProps, ...props } + const resolveOrRejectRef = useRef({ resolve: (_arg0?: any) => { }, reject: (_arg0?: any) => { } }) return <> - {props.popoverContent ? { @@ -35,60 +54,48 @@ export const MoorhenBaseMenuItem = (props: { new Promise((resolve, reject) => { resolveOrRejectRef.current = { resolve, reject } }).then(_result => { - props.onCompleted() + onCompleted() document.body.click() }).catch(err => console.log(err)) } }} onEntering={() => { - props.onEntering() + onEntering() }} onEntered={() => { - props.setPopoverIsShown(true) + setPopoverIsShown(true) }} onExit={() => { - props.setPopoverIsShown(false) + setPopoverIsShown(false) }} onExiting={() => { - props.onExiting() + onExiting() }} overlay={ - {props.menuItemTitle} + {menuItemTitle} - {props.popoverContent} - {props.showOkButton && - } }> - {props.menuItemText} + {menuItemText} : - {props.menuItemText} + {menuItemText} } } -MoorhenBaseMenuItem.defaultProps = { - id: '', - showOkButton: true, - buttonText: "OK", - buttonVariant: "primary", - textClassName: "", - popoverPlacement: "right", - onEntering: () => { }, - onExiting: () => { }, - onCompleted: () => { }, - disabled: false -} diff --git a/baby-gru/src/components/menu-item/MoorhenCalculateTrajectoryMenuItem.tsx b/baby-gru/src/components/menu-item/MoorhenCalculateTrajectoryMenuItem.tsx index d79ec7578..84296c6cc 100644 --- a/baby-gru/src/components/menu-item/MoorhenCalculateTrajectoryMenuItem.tsx +++ b/baby-gru/src/components/menu-item/MoorhenCalculateTrajectoryMenuItem.tsx @@ -60,7 +60,7 @@ export const MoorhenCalculateTrajectoryMenuItem = (props: { return } -MoorhenCalculateTrajectoryMenuItem.defaultProps = { - popoverPlacement: "right", -} diff --git a/baby-gru/src/components/menu-item/MoorhenClearSelfRestraintsMenuItem.tsx b/baby-gru/src/components/menu-item/MoorhenClearSelfRestraintsMenuItem.tsx index 03ac13dfd..bf1b4ddcd 100644 --- a/baby-gru/src/components/menu-item/MoorhenClearSelfRestraintsMenuItem.tsx +++ b/baby-gru/src/components/menu-item/MoorhenClearSelfRestraintsMenuItem.tsx @@ -1,15 +1,12 @@ import { useRef } from "react"; import { MoorhenBaseMenuItem } from "./MoorhenBaseMenuItem" import { moorhen } from "../../types/moorhen"; -import { webGL } from "../../types/mgWebGL"; import { MoorhenMoleculeSelect } from "../select/MoorhenMoleculeSelect"; import { useDispatch, useSelector } from 'react-redux'; import { triggerUpdate } from "../../store/moleculeMapUpdateSlice"; import { removeGeneralRepresentation } from "../../moorhen"; export const MoorhenClearSelfRestraintsMenuItem = (props: { - glRef: React.RefObject; - commandCentre: React.RefObject; setPopoverIsShown: React.Dispatch>; popoverPlacement?: 'left' | 'right'; }) => { @@ -48,10 +45,9 @@ export const MoorhenClearSelfRestraintsMenuItem = (props: { popoverContent={panelContent} menuItemText="Clear self-restraints..." onCompleted={onCompleted} - popoverPlacement={props.popoverPlacement} + popoverPlacement={props.popoverPlacement ?? "right"} setPopoverIsShown={props.setPopoverIsShown} /> } -MoorhenClearSelfRestraintsMenuItem.defaultProps = { popoverPlacement: "right" } diff --git a/baby-gru/src/components/menu-item/MoorhenDefaultBondSmoothnessPreferencesMenuItem.tsx b/baby-gru/src/components/menu-item/MoorhenDefaultBondSmoothnessPreferencesMenuItem.tsx index 7f6097226..24aaa6609 100644 --- a/baby-gru/src/components/menu-item/MoorhenDefaultBondSmoothnessPreferencesMenuItem.tsx +++ b/baby-gru/src/components/menu-item/MoorhenDefaultBondSmoothnessPreferencesMenuItem.tsx @@ -11,7 +11,9 @@ export const MoorhenDefaultBondSmoothnessPreferencesMenuItem = (props: { }) => { const dispatch = useDispatch() + const defaultBondSmoothness = useSelector((state: moorhen.State) => state.sceneSettings.defaultBondSmoothness) + const smoothnesSelectRef = useRef(null) const onCompleted = () => { dispatch( @@ -31,14 +33,10 @@ export const MoorhenDefaultBondSmoothnessPreferencesMenuItem = (props: { return } - -MoorhenDefaultBondSmoothnessPreferencesMenuItem.defaultProps = { - popoverPlacement: 'right' -} \ No newline at end of file diff --git a/baby-gru/src/components/menu-item/MoorhenGetMonomerMenuItem.tsx b/baby-gru/src/components/menu-item/MoorhenGetMonomerMenuItem.tsx index 812250f2b..9c6196f09 100644 --- a/baby-gru/src/components/menu-item/MoorhenGetMonomerMenuItem.tsx +++ b/baby-gru/src/components/menu-item/MoorhenGetMonomerMenuItem.tsx @@ -61,8 +61,6 @@ export const MoorhenGetMonomerMenuItem = (props: { setPopoverIsShown: React.Dispatch>; }) => { - const dispatch = useDispatch() - const molecules = useSelector((state: moorhen.State) => state.molecules.moleculeList) const defaultBondSmoothness = useSelector((state: moorhen.State) => state.sceneSettings.defaultBondSmoothness) const isDark = useSelector((state: moorhen.State) => state.sceneSettings.isDark) @@ -80,6 +78,8 @@ export const MoorhenGetMonomerMenuItem = (props: { const [autoCompleteValue, setAutoCompleteValue] = useState("") const [autocompleteOpen, setAutocompleteOpen] = useState(false) + const dispatch = useDispatch() + const { enqueueSnackbar } = useSnackbar() const filterOptions = useMemo(() => createFilterOptions({ @@ -359,8 +359,6 @@ export const MoorhenGetMonomerMenuItem = (props: { onCompleted={() => {}} showOkButton={false} setPopoverIsShown={props.setPopoverIsShown} - popoverPlacement={props.popoverPlacement} + popoverPlacement={props.popoverPlacement ?? "right"} /> } - -MoorhenGetMonomerMenuItem.defaultProps = { popoverPlacement: "right" } diff --git a/baby-gru/src/components/menu-item/MoorhenImportFSigFMenuItem.tsx b/baby-gru/src/components/menu-item/MoorhenImportFSigFMenuItem.tsx index 35e6a4ea9..16c5f6c71 100644 --- a/baby-gru/src/components/menu-item/MoorhenImportFSigFMenuItem.tsx +++ b/baby-gru/src/components/menu-item/MoorhenImportFSigFMenuItem.tsx @@ -30,7 +30,7 @@ export const MoorhenImportFSigFMenuItem = (props:{ const connectMap = async () => { const [molecule, reflectionMap, twoFoFcMap, foFcMap] = [ - props.selectedMolNo !== null ? props.selectedMolNo : parseInt(moleculeSelectRef.current.value), + props.selectedMolNo !== undefined ? props.selectedMolNo : parseInt(moleculeSelectRef.current.value), parseInt(mapSelectRef.current.value), parseInt(twoFoFcSelectRef.current.value), parseInt(foFcSelectRef.current.value) @@ -110,7 +110,7 @@ export const MoorhenImportFSigFMenuItem = (props:{ map.isDifference} width='100%' /> - {props.selectedMolNo === null && + {props.selectedMolNo === undefined && @@ -127,5 +127,4 @@ export const MoorhenImportFSigFMenuItem = (props:{ /> } -MoorhenImportFSigFMenuItem.defaultProps = { selectedMolNo: null } diff --git a/baby-gru/src/components/menu-item/MoorhenMapContourSettingsMenuItem.tsx b/baby-gru/src/components/menu-item/MoorhenMapContourSettingsMenuItem.tsx index d3d50e2e6..8572b333d 100644 --- a/baby-gru/src/components/menu-item/MoorhenMapContourSettingsMenuItem.tsx +++ b/baby-gru/src/components/menu-item/MoorhenMapContourSettingsMenuItem.tsx @@ -2,7 +2,6 @@ import { Slider } from "@mui/material"; import { MoorhenBaseMenuItem } from "./MoorhenBaseMenuItem"; import { useEffect, useState } from "react"; import { moorhen } from "../../types/moorhen"; -import { webGL } from "../../types/mgWebGL"; import { useDispatch, useSelector } from "react-redux"; import { setDefaultMapSamplingRate, setMapLineWidth } from "../../store/mapContourSettingsSlice"; import { Form, InputGroup } from "react-bootstrap"; @@ -30,10 +29,8 @@ export const MapContourSettingsMenuItem = (props: { setPopoverIsShown: React.Dispatch>; popoverPlacement?: "left" | "right"; commandCentre: React.RefObject; - glRef: React.RefObject; }) => { - const dispatch = useDispatch() const maps = useSelector((state: moorhen.State) => state.maps) const defaultMapSamplingRate = useSelector((state: moorhen.State) => state.mapContourSettings.defaultMapSamplingRate) const mapLineWidth = useSelector((state: moorhen.State) => state.mapContourSettings.mapLineWidth) @@ -44,6 +41,8 @@ export const MapContourSettingsMenuItem = (props: { const [mapSampling, setMapSampling] = useState(convertPercentageToSamplingRate(defaultMapSamplingRate, true)) + const dispatch = useDispatch() + useEffect(() => { const setMapSamplingRate = async () => { let newSamplingRate = convertPercentageToSamplingRate(mapSampling) @@ -149,7 +148,7 @@ export const MapContourSettingsMenuItem = (props: { return {}} /> } - -MapContourSettingsMenuItem.defaultProps = { - popoverPlacement: 'right' -} \ No newline at end of file diff --git a/baby-gru/src/components/menu-item/MoorhenMergeMoleculesMenuItem.tsx b/baby-gru/src/components/menu-item/MoorhenMergeMoleculesMenuItem.tsx index 780191a20..a56a904f6 100644 --- a/baby-gru/src/components/menu-item/MoorhenMergeMoleculesMenuItem.tsx +++ b/baby-gru/src/components/menu-item/MoorhenMergeMoleculesMenuItem.tsx @@ -21,13 +21,13 @@ export const MoorhenMergeMoleculesMenuItem = (props: { const molecules = useSelector((state: moorhen.State) => state.molecules.moleculeList) const panelContent = <> - {props.fromMolNo === null ? : null} + {props.fromMolNo === undefined ? : null} const onCompleted = useCallback(async () => { const toMolecule = molecules.find(molecule => molecule.molNo === parseInt(toRef.current.value)) - const fromMolNo: number = props.fromMolNo !== null ? props.fromMolNo : parseInt(fromRef.current.value) + const fromMolNo: number = props.fromMolNo ?? parseInt(fromRef.current.value) const otherMolecules = molecules.filter(molecule => (molecule.molNo === fromMolNo) && (molecule.molNo !== toMolecule.molNo)) if (otherMolecules.length <= 0) { console.log('No valid molecules selected, skipping merge...') @@ -40,17 +40,11 @@ export const MoorhenMergeMoleculesMenuItem = (props: { return } -MoorhenMergeMoleculesMenuItem.defaultProps = { - popoverPlacement: "right", - menuItemText: 'Merge molecules...', - fromMolNo: null -} - diff --git a/baby-gru/src/components/menu-item/MoorhenMoveMoleculeHere.tsx b/baby-gru/src/components/menu-item/MoorhenMoveMoleculeHere.tsx index d23ee1ad6..9cc5b3f62 100644 --- a/baby-gru/src/components/menu-item/MoorhenMoveMoleculeHere.tsx +++ b/baby-gru/src/components/menu-item/MoorhenMoveMoleculeHere.tsx @@ -13,6 +13,7 @@ export const MoorhenMoveMoleculeHere = (props: { }) => { const dispatch = useDispatch() + const molecules = useSelector((state: moorhen.State) => state.molecules.moleculeList) const moleculeSelectRef = useRef(null) @@ -34,15 +35,10 @@ export const MoorhenMoveMoleculeHere = (props: { return } - -MoorhenMoveMoleculeHere.defaultProps = { - popoverPlacement: "right", -} - diff --git a/baby-gru/src/components/menu-item/MoorhenSelfRestraintsMenuItem.tsx b/baby-gru/src/components/menu-item/MoorhenSelfRestraintsMenuItem.tsx index 9b4d328e4..3979e0f65 100644 --- a/baby-gru/src/components/menu-item/MoorhenSelfRestraintsMenuItem.tsx +++ b/baby-gru/src/components/menu-item/MoorhenSelfRestraintsMenuItem.tsx @@ -2,7 +2,6 @@ import { useRef, useCallback, useState, useEffect } from "react"; import { Form, FormSelect } from "react-bootstrap"; import { MoorhenBaseMenuItem } from "./MoorhenBaseMenuItem" import { moorhen } from "../../types/moorhen"; -import { webGL } from "../../types/mgWebGL"; import { MoorhenChainSelect } from "../select/MoorhenChainSelect"; import { MoorhenMoleculeSelect } from "../select/MoorhenMoleculeSelect"; import { MoorhenCidInputForm } from "../form/MoorhenCidInputForm"; @@ -14,8 +13,6 @@ import { triggerUpdate } from "../../store/moleculeMapUpdateSlice"; import { addGeneralRepresentation } from "../../moorhen"; export const MoorhenSelfRestraintsMenuItem = (props: { - glRef: React.RefObject; - commandCentre: React.RefObject; setPopoverIsShown: React.Dispatch>; popoverPlacement?: 'left' | 'right'; }) => { @@ -147,17 +144,16 @@ export const MoorhenSelfRestraintsMenuItem = (props: { dispatch( triggerUpdate(selectedMolecule.molNo) ) } - }, [props.commandCentre]) + }, [ ]) return } -MoorhenSelfRestraintsMenuItem.defaultProps = { popoverPlacement: "right" } diff --git a/baby-gru/src/components/menu-item/MoorhenSplitModelsMenuItem.tsx b/baby-gru/src/components/menu-item/MoorhenSplitModelsMenuItem.tsx index 613cae3ab..4bf273ca8 100644 --- a/baby-gru/src/components/menu-item/MoorhenSplitModelsMenuItem.tsx +++ b/baby-gru/src/components/menu-item/MoorhenSplitModelsMenuItem.tsx @@ -2,17 +2,16 @@ import { useCallback, useRef } from "react" import { MoorhenMoleculeSelect } from "../select/MoorhenMoleculeSelect" import { MoorhenBaseMenuItem } from "./MoorhenBaseMenuItem" import { moorhen } from "../../types/moorhen"; -import { webGL } from "../../types/mgWebGL"; import { useDispatch, useSelector } from 'react-redux'; import { addMoleculeList } from "../../store/moleculesSlice"; export const MoorhenSplitModelsMenuItem = (props: { popoverPlacement?: 'left' | 'right' setPopoverIsShown: React.Dispatch>; - glRef: React.RefObject; }) => { const dispatch = useDispatch() + const molecules = useSelector((state: moorhen.State) => state.molecules.moleculeList) const moleculeSelectRef = useRef(null) @@ -34,7 +33,7 @@ export const MoorhenSplitModelsMenuItem = (props: { return } -MoorhenSplitModelsMenuItem.defaultProps = { - popoverPlacement: "right", -} - diff --git a/baby-gru/src/components/misc/MoorhenSlider.tsx b/baby-gru/src/components/misc/MoorhenSlider.tsx index 9c9aa4087..6da042585 100644 --- a/baby-gru/src/components/misc/MoorhenSlider.tsx +++ b/baby-gru/src/components/misc/MoorhenSlider.tsx @@ -1,16 +1,8 @@ -import { forwardRef, useCallback, useEffect, useRef, useState } from "react"; +import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react"; import Box from '@mui/material/Box'; import Stack from '@mui/material/Stack'; import Slider from '@mui/material/Slider'; -const convertValueToScale = (logScale: boolean, minVal: number, maxVal: number, value: number) => { - if (logScale) { - return 100 * ((Math.log10(value) - Math.log10(minVal)) / ((Math.log10(maxVal) - Math.log10(minVal)))); - } else { - return (100 * (value - minVal)) / (maxVal - minVal); - } -} - type MoorhenSliderProps = { logScale?: boolean; minVal?: number; @@ -30,16 +22,40 @@ type MoorhenSliderProps = { } export const MoorhenSlider = forwardRef((props, ref) => { + + const defaultProps ={ + minVal: 0, maxVal: 100, logScale: false, showMinMaxVal: true, incrementButton: null, + isDisabled: false, allowFloats: true, showSliderTitle: true, decimalPlaces: 3, + decrementButton: null, allowExternalFeedback: true, + } + + const { + logScale, minVal, maxVal, initialValue, allowExternalFeedback, + allowFloats, showSliderTitle, sliderTitle, decimalPlaces, + showMinMaxVal, decrementButton, isDisabled, incrementButton + } = { ...defaultProps, ...props } + + const convertValueToScale = (logScale: boolean, minVal: number, maxVal: number, value: number) => { + if (logScale) { + return 100 * ((Math.log10(value) - Math.log10(minVal)) / ((Math.log10(maxVal) - Math.log10(minVal)))); + } else { + return (100 * (value - minVal)) / (maxVal - minVal); + } + } - const initValue = convertValueToScale(props.logScale, props.minVal, props.maxVal, props.initialValue) + const initValue = useMemo(() => { + return convertValueToScale(logScale, minVal, maxVal, initialValue) + }, [ ]) + const [value, setValue] = useState(initValue); const [externalValue, setExternalValue] = useState(props.externalValue) + const localRef = useRef(props.externalValue) const externalValueRef = ref || localRef useEffect(() => { if (props.externalValue !== externalValue) { - props.setExternalValue(externalValue) + props.setExternalValue?.(externalValue) } }, [externalValue]) @@ -48,52 +64,47 @@ export const MoorhenSlider = forwardRef((props, ref) * components. However this can slow down things so better not to use it unless this is expected. */ useEffect(() => { - if (props.allowExternalFeedback) { - setValue(convertValueToScale(props.logScale, props.minVal, props.maxVal, props.externalValue)) + if (allowExternalFeedback) { + setValue(convertValueToScale(logScale, minVal, maxVal, externalValue)) } }, [props.externalValue]) const handleChange = useCallback((evt: any, newValue: number) => { let newVal: number - setValue(props.allowFloats ? newValue : Math.round(newValue)) - if (props.logScale) { - const log10MaxVal = Math.log10(props.maxVal) - const log10MinVal = Math.log10(Math.max(props.minVal, 0.00000001)) + setValue(allowFloats ? newValue : Math.round(newValue)) + if (logScale) { + const log10MaxVal = Math.log10(maxVal) + const log10MinVal = Math.log10(Math.max(minVal, 0.00000001)) const log10NewVal = log10MinVal + (newValue/100) * (log10MaxVal-log10MinVal) newVal = Math.pow(10., log10NewVal) - if (!props.allowFloats) { + if (!allowFloats) { newVal = Math.round(newVal) } } - else if (props.allowFloats) { - newVal = props.minVal + (newValue/100.)*(props.maxVal-props.minVal) + else if (allowFloats) { + newVal = minVal + (newValue/100.)*(maxVal-minVal) } else { - newVal = Math.round(props.minVal + (newValue/100.)*(props.maxVal-props.minVal)) + newVal = Math.round(minVal + (newValue/100.)*(maxVal-minVal)) } setExternalValue(newVal) if (externalValueRef !== null && typeof externalValueRef !== 'function') externalValueRef.current = newVal - }, [props.allowFloats, props.logScale, props.minVal, props.maxVal]) + }, [allowFloats, logScale, minVal, maxVal]) return ( - {props.showSliderTitle && - {props.sliderTitle}: {props.allowFloats ? props.externalValue.toFixed(props.decimalPlaces) : props.externalValue} + {showSliderTitle && + {sliderTitle}: {allowFloats ? props.externalValue.toFixed(decimalPlaces) : props.externalValue} } - {props.showMinMaxVal && props.minVal} - {props.decrementButton} - - {props.incrementButton} - {props.showMinMaxVal && props.maxVal} + {showMinMaxVal && minVal} + {decrementButton} + + {incrementButton} + {showMinMaxVal && maxVal} ); }) - -MoorhenSlider.defaultProps={ - minVal: 0, maxVal: 100, setExternalValue: ()=>{}, logScale: false, showMinMaxVal: true, incrementButton: null, - isDisabled: false, allowFloats: true, showSliderTitle: true, decimalPlaces: 3, decrementButton: null, allowExternalFeedback: true, -} \ No newline at end of file diff --git a/baby-gru/src/components/modal/MoorhenDraggableModalBase.tsx b/baby-gru/src/components/modal/MoorhenDraggableModalBase.tsx index 61157a5f1..012b8cfb7 100644 --- a/baby-gru/src/components/modal/MoorhenDraggableModalBase.tsx +++ b/baby-gru/src/components/modal/MoorhenDraggableModalBase.tsx @@ -14,7 +14,7 @@ import { hideModal, focusOnModal, unFocusModal } from "../../store/modalsSlice"; * @property {boolean} show - Indicates if the modal is to be displayed * @property {function} setShow - Setter function for props.show * @property {JSX.Element} body - Element rendered as the modal body - * @property {string} [modalId=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. + * @property {string} modalId - The id assigned to the modal used to keep track of the focused modal and the z-index. * @property {number} [width=35] - The width of the modal measured in wh * @property {number} [height=45] - The height of the modal measured in vh * @property {number} [top=500] - The intial top location of the modal @@ -67,8 +67,6 @@ export const MoorhenDraggableModalBase = (props: { modalId: string; enforceMaxBodyDimensions?: boolean; resizeNodeRef?: null | React.RefObject; - defaultWidth?: number; - defaultHeight?: number; maxWidth?: number; maxHeight?: number; minWidth?: number; @@ -88,6 +86,19 @@ export const MoorhenDraggableModalBase = (props: { onClose?: () => (void | Promise); }) => { + const defaultProps = { + showCloseButton: true, handleClassName: 'handle', additionalHeaderButtons:null, additionalChildren: null, + enableResize: { top: false, right: true, bottom: true, left: false, topRight: false, bottomRight: true, bottomLeft: true, topLeft: false }, + top: 500, left: 500, overflowY: 'auto', overflowX: 'hidden', lockAspectRatio: false, maxHeight: 100, maxWidth: 100, + minHeight: 100, minWidth: 100, enforceMaxBodyDimensions: true, + } + + const { + showCloseButton, handleClassName, additionalHeaderButtons, additionalChildren, + enableResize, top, left, overflowY, overflowX, lockAspectRatio, maxHeight, maxWidth, + minHeight, minWidth, enforceMaxBodyDimensions + } = {...defaultProps, ...props} + const dispatch = useDispatch() const focusHierarchy = useSelector((state: moorhen.State) => state.modals.focusHierarchy) @@ -100,7 +111,7 @@ export const MoorhenDraggableModalBase = (props: { const [currentZIndex, setCurrentZIndex] = useState(999) const [opacity, setOpacity] = useState(1.0) const [collapse, setCollapse] = useState(false) - const [position, setPosition] = useState<{x: number, y: number}>({x: props.left, y: props.top}) + const [position, setPosition] = useState<{x: number, y: number}>({x: left, y: top}) const draggableNodeRef = useRef(); const resizeNodeRef = useRef(); @@ -128,7 +139,7 @@ export const MoorhenDraggableModalBase = (props: { useEffect(() => { setPosition({ - x: props.left, y: props.top + x: left, y: top }) }, [windowWidth, windowHeight]) @@ -172,7 +183,7 @@ export const MoorhenDraggableModalBase = (props: { if (cachedEnableAtomHovering.current) { dispatch( setEnableAtomHovering(true) ) } - props.onResizeStop(evt, direction, ref, delta) + props.onResizeStop?.(evt, direction, ref, delta) } const handleClose = useCallback(async () => { @@ -182,7 +193,7 @@ export const MoorhenDraggableModalBase = (props: { return - + {props.headerTitle} - {props.additionalHeaderButtons?.map(button => button)} + {additionalHeaderButtons?.map(button => button)} - {props.showCloseButton && + {showCloseButton && @@ -215,30 +226,30 @@ export const MoorhenDraggableModalBase = (props: { : <>}} + lockAspectRatio={lockAspectRatio} + enable={enableResize} + handleComponent={{bottomRight: enableResize ? : <>}} onResizeStop={handleResizeStop} onResizeStart={handleStart} > -
- {props.enforceMaxBodyDimensions ? -
+ {enforceMaxBodyDimensions ? +
{props.body}
: @@ -252,14 +263,7 @@ export const MoorhenDraggableModalBase = (props: { {props.footer} } - {props.additionalChildren} + {additionalChildren} } - -MoorhenDraggableModalBase.defaultProps = { - showCloseButton: true, handleClassName: 'handle', additionalHeaderButtons:null, additionalChildren: null, - enableResize: { top: false, right: true, bottom: true, left: false, topRight: false, bottomRight: true, bottomLeft: true, topLeft: false }, - top: 500, left: 500, overflowY: 'auto', overflowX: 'hidden', lockAspectRatio: false, maxHeight: 100, maxWidth: 100, modalId: null, - minHeight: 100, minWidth: 100, deafultWidth: 100, defaultHeight: 100, onResizeStop: () => {}, resizeNodeRef: null, enforceMaxBodyDimensions: true, -} diff --git a/baby-gru/src/components/modal/MoorhenMapsModal.tsx b/baby-gru/src/components/modal/MoorhenMapsModal.tsx index 05bf0db69..e56351773 100644 --- a/baby-gru/src/components/modal/MoorhenMapsModal.tsx +++ b/baby-gru/src/components/modal/MoorhenMapsModal.tsx @@ -31,14 +31,7 @@ export const MoorhenMapsModal = (props: moorhen.CollectedProps) => { let displayData = maps.map((map, index) => { return cardListRef.current[index] = el} - showSideBar={true} - busy={false} - dropdownId={1} - accordionDropdownId={1} - setAccordionDropdownId={(arg0) => {}} - sideBarWidth={convertRemToPx(20)} key={map.molNo} - index={map.molNo} map={map} initialContour={map.suggestedContourLevel ? map.suggestedContourLevel : 0.8} initialRadius={map.suggestedRadius ? map.suggestedRadius : 13} diff --git a/baby-gru/src/components/select/MoorhenBackupSelect.tsx b/baby-gru/src/components/select/MoorhenBackupSelect.tsx index 89fb12094..6d956bc08 100644 --- a/baby-gru/src/components/select/MoorhenBackupSelect.tsx +++ b/baby-gru/src/components/select/MoorhenBackupSelect.tsx @@ -10,6 +10,11 @@ type MoorhenBackupSelectPropsType = { } export const MoorhenBackupSelect = forwardRef((props, selectRef) => { + + const defaultProps = { height: '4rem', width: '20rem', label: "Backup" } + + const { height, width, label } = { ...defaultProps, ...props } + const [backupOptions, setBackupOptions] = useState(null) useEffect(() => { @@ -26,12 +31,11 @@ export const MoorhenBackupSelect = forwardRef - {props.label} + return + {label} {backupOptions} }) -MoorhenBackupSelect.defaultProps = { height: '4rem', width: '20rem', label: "Backup" } diff --git a/baby-gru/src/components/select/MoorhenChainSelect.tsx b/baby-gru/src/components/select/MoorhenChainSelect.tsx index 25b117406..e556c4ccb 100644 --- a/baby-gru/src/components/select/MoorhenChainSelect.tsx +++ b/baby-gru/src/components/select/MoorhenChainSelect.tsx @@ -14,29 +14,30 @@ type MoorhenChainSelectPropsType = { } export const MoorhenChainSelect = forwardRef((props, selectRef) => { + + // props.allowedTypes refers to gemmi::PolymerType member values -> https://project-gemmi.github.io/python-api/gemmi.html#PolymerType + const defaultProps = { allowedTypes: [1, 2, 3, 4, 5], height: '4rem', width: '20rem', label: "Chain", margin: '0.5rem' } + + const { allowedTypes, height, width, label, margin } = { ...defaultProps, ...props } const handleChange = (evt: React.ChangeEvent) => { - if (props.onChange) { - props.onChange(evt) - } + props.onChange?.(evt) if(selectRef !== null && typeof selectRef !== 'function') selectRef.current.value = evt.target.value } const getChainOptions = (selectedCoordMolNo: number): JSX.Element[] => { let selectedMolecule = props.molecules.find(molecule => molecule.molNo === selectedCoordMolNo) if (selectedMolecule) { - return selectedMolecule.sequences.map(sequence => props.allowedTypes.includes(sequence.type) ? : null) + return selectedMolecule.sequences.map(sequence => allowedTypes.includes(sequence.type) ? : null) } } - return - {props.label} + return + {label} {props.selectedCoordMolNo !== null ? getChainOptions(props.selectedCoordMolNo) : null} }) -// props.allowedTypes refers to gemmi::PolymerType member values -> https://project-gemmi.github.io/python-api/gemmi.html#PolymerType -MoorhenChainSelect.defaultProps = { allowedTypes: [1, 2, 3, 4, 5], height: '4rem', width: '20rem', label: "Chain", margin: '0.5rem' } diff --git a/baby-gru/src/components/select/MoorhenLigandSelect.tsx b/baby-gru/src/components/select/MoorhenLigandSelect.tsx index 562782fa5..d3d7c057a 100644 --- a/baby-gru/src/components/select/MoorhenLigandSelect.tsx +++ b/baby-gru/src/components/select/MoorhenLigandSelect.tsx @@ -14,10 +14,13 @@ type MoorhenLigandSelectPropsType = { } export const MoorhenLigandSelect = forwardRef((props, selectRef) => { + const defaultProps = { disabled: false, height: '4rem', width: '20rem', margin: '0.5rem', selectedCoordMolNo: null, label: "Ligand" } + const { + disabled, height, width, margin, selectedCoordMolNo, label + } = { ...defaultProps, ...props } + const handleChange = (evt: ChangeEvent) => { - if (props.onChange) { - props.onChange(evt) - } + props.onChange?.(evt) if (selectRef !== null && typeof selectRef !== 'function') { selectRef.current.value = evt.target.value } @@ -30,16 +33,14 @@ export const MoorhenLigandSelect = forwardRef{ligand.cid} }) } - } - return - {props.label} - - {props.selectedCoordMolNo !== null ? getLigandOptions(props.selectedCoordMolNo) : null} + return + {label} + + {selectedCoordMolNo !== null ? getLigandOptions(selectedCoordMolNo) : null} }) -MoorhenLigandSelect.defaultProps = { disabled: false, height: '4rem', width: '20rem', margin: '0.5rem', selectedCoordMolNo: null, label: "Ligand" } diff --git a/baby-gru/src/components/select/MoorhenMapSelect.tsx b/baby-gru/src/components/select/MoorhenMapSelect.tsx index 8cf70a89b..93daf99b9 100644 --- a/baby-gru/src/components/select/MoorhenMapSelect.tsx +++ b/baby-gru/src/components/select/MoorhenMapSelect.tsx @@ -36,18 +36,22 @@ type MoorhenMapSelectPropsType = { */ export const MoorhenMapSelect = forwardRef((props, selectRef) => { + const defaultProps = { height: '4rem', width: '20rem', maps: null, label: "Map", filterFunction: () => true } + + const { + height, width, maps, label, filterFunction + } = { ...defaultProps, ...props } + const handleChange = (evt: ChangeEvent) => { - if (props.onChange) { - props.onChange(evt) - } + props.onChange?.(evt) } const getMapOptions = () => { let mapOptions: JSX.Element[] = [] - if (props.maps) { - props.maps.forEach(map => { - if(props.filterFunction(map)){ + if (maps) { + maps.forEach(map => { + if(filterFunction(map)){ mapOptions.push() } }) @@ -56,12 +60,11 @@ export const MoorhenMapSelect = forwardRef 0 ? mapOptions : null } - return - {props.label} + return + {label} {getMapOptions()} }) -MoorhenMapSelect.defaultProps = { height: '4rem', width: '20rem', maps: null, label: "Map", filterFunction: () => true } diff --git a/baby-gru/src/components/select/MoorhenMoleculeSelect.tsx b/baby-gru/src/components/select/MoorhenMoleculeSelect.tsx index 3b5d93440..0c1259e15 100644 --- a/baby-gru/src/components/select/MoorhenMoleculeSelect.tsx +++ b/baby-gru/src/components/select/MoorhenMoleculeSelect.tsx @@ -41,17 +41,23 @@ type MoorhenMoleculeSelectPropsType = { */ export const MoorhenMoleculeSelect = forwardRef((props, selectRef) => { + const defaultProps = { disabled: false, height: '4rem', width: '20rem', allowAny: false, label: "Molecule", margin: '0.5rem', filterFunction: () => true } + + const { + disabled, height, width, allowAny, label, margin, filterFunction + } = { ...defaultProps, ...props } + const getMoleculeOptions = () => { let moleculeOptions: JSX.Element[] = [] if (props.molecules) { - if (props.allowAny) { + if (allowAny) { moleculeOptions.push( ) } props.molecules.forEach(molecule => { - if (props.filterFunction(molecule)) { + if (filterFunction(molecule)) { moleculeOptions.push() } }) @@ -61,12 +67,10 @@ export const MoorhenMoleculeSelect = forwardRef - {props.label} - { - if (props.onChange) { - props.onChange(evt) - } + return + {label} + { + props.onChange?.(evt) if (selectRef !== null && typeof selectRef !== 'function') { selectRef.current.value = evt.target.value } @@ -75,5 +79,3 @@ export const MoorhenMoleculeSelect = forwardRef }) - -MoorhenMoleculeSelect.defaultProps = { disabled: false, height: '4rem', width: '20rem', allowAny: false, label: "Molecule", margin: '0.5rem', filterFunction: () => true } \ No newline at end of file diff --git a/baby-gru/src/components/select/MoorhenNumberForm.tsx b/baby-gru/src/components/select/MoorhenNumberForm.tsx index 8a098a2f5..76595f365 100644 --- a/baby-gru/src/components/select/MoorhenNumberForm.tsx +++ b/baby-gru/src/components/select/MoorhenNumberForm.tsx @@ -13,6 +13,14 @@ type MoorhenNumberFormPropsType = { } export const MoorhenNumberForm = forwardRef((props, formRef) => { + const defaultProps = { + allowNegativeValues: false, label: 'Input', disabled: false, width: '', margin: '', padding: '' + } + + const { + allowNegativeValues, label, disabled, width, margin, padding + } = { ...defaultProps, ...props } + const [currentValue, setCurrentValue] = useState(props.defaultValue.toString()) const [isValidInput, setIsValidInput] = useState(true) @@ -21,7 +29,7 @@ export const MoorhenNumberForm = forwardRef( return false } else if (parseInt(input) === Infinity) { return false - } else if (!props.allowNegativeValues && parseInt(input) < 0) { + } else if (!allowNegativeValues && parseInt(input) < 0) { return false } return true @@ -33,10 +41,10 @@ export const MoorhenNumberForm = forwardRef( } }, []) - return - {props.label} - + {label} + { if (formRef !== null && typeof formRef !== 'function') { const _isValid = checkIsValidInput(evt.target.value) @@ -47,12 +55,8 @@ export const MoorhenNumberForm = forwardRef( } setCurrentValue(evt.target.value) setIsValidInput(_isValid) - props.onChange(evt.target.value) + props.onChange?.(evt.target.value) } }} /> }) - -MoorhenNumberForm.defaultProps = { - allowNegativeValues: false, label: 'Input', onChange: () => {}, disabled: false, width: '', margin: '', padding: '' - } diff --git a/baby-gru/src/components/sequence-viewer/MoorhenSequenceViewer.tsx b/baby-gru/src/components/sequence-viewer/MoorhenSequenceViewer.tsx index 347a34d52..0e57a7fd4 100644 --- a/baby-gru/src/components/sequence-viewer/MoorhenSequenceViewer.tsx +++ b/baby-gru/src/components/sequence-viewer/MoorhenSequenceViewer.tsx @@ -396,4 +396,3 @@ export const MoorhenSequenceViewer = (props: MoorhenSequenceViewerPropsType) => ) } -MoorhenSequenceViewer.defaultProps = { useMainStateResidueSelections: false } \ No newline at end of file diff --git a/baby-gru/src/components/snack-bar/MoorhenResidueStepsSnackBar.tsx b/baby-gru/src/components/snack-bar/MoorhenResidueStepsSnackBar.tsx index 1c799fc0b..6790c8213 100644 --- a/baby-gru/src/components/snack-bar/MoorhenResidueStepsSnackBar.tsx +++ b/baby-gru/src/components/snack-bar/MoorhenResidueStepsSnackBar.tsx @@ -20,12 +20,17 @@ export const MoorhenResidueStepsSnackBar = forwardRef< onStop?: () => void; onPause?: () => void; onResume?: () => void; - onProgress?: (progress: number) => void; disableTimeCapsule?: boolean sleepTime?: number; } >((props, ref) => { + const defaultProps = { + disableTimeCapsule: true, sleepTime: 600, + } + + const { sleepTime, disableTimeCapsule } = { ...defaultProps, ...props } + const dispatch = useDispatch() const timeCapsuleIsEnabled = useSelector((state: moorhen.State) => state.backupSettings.enableTimeCapsule) @@ -42,16 +47,16 @@ export const MoorhenResidueStepsSnackBar = forwardRef< const { closeSnackbar } = useSnackbar() const exit = useCallback(async () => { - props.onStop() - if (props.disableTimeCapsule) props.timeCapsuleRef.current.disableBackups = !timeCapsuleIsEnabled + props.onStop?.() + if (disableTimeCapsule) props.timeCapsuleRef.current.disableBackups = !timeCapsuleIsEnabled await props.timeCapsuleRef.current.addModification() closeSnackbar(props.id) }, [timeCapsuleIsEnabled]) const init = async () => { - await props.onStart() + await props.onStart?.() dispatch( setHoveredAtom({molecule: null, cid: null}) ) - if (props.disableTimeCapsule) props.timeCapsuleRef.current.disableBackups = true + if (disableTimeCapsule) props.timeCapsuleRef.current.disableBackups = true } const steppedRefine = async () => { @@ -76,7 +81,7 @@ export const MoorhenResidueStepsSnackBar = forwardRef< setCid(residue.cid) await props.onStep(residue.cid) setProgress((prev) => prev + singleStepPercent) - await sleep(props.sleepTime) + await sleep(sleepTime) } await exit() } @@ -98,9 +103,9 @@ export const MoorhenResidueStepsSnackBar = forwardRef<
{ if (isRunningRef.current) { - props.onPause() + props.onPause?.() } else { - props.onResume() + props.onResume?.() } isRunningRef.current = !isRunningRef.current setIsRunning(isRunningRef.current) @@ -116,8 +121,3 @@ export const MoorhenResidueStepsSnackBar = forwardRef< }) - -MoorhenResidueStepsSnackBar.defaultProps = { - disableTimeCapsule: true, sleepTime: 600, onStart: () => {}, onStop: () => {}, - onPause: () => {}, onResume: () => {}, onProgress: () => {} -} \ No newline at end of file diff --git a/baby-gru/src/components/validation-tools/MoorhenValidationChartWidgetBase.tsx b/baby-gru/src/components/validation-tools/MoorhenValidationChartWidgetBase.tsx index 2b4c313b0..5abe63c2a 100644 --- a/baby-gru/src/components/validation-tools/MoorhenValidationChartWidgetBase.tsx +++ b/baby-gru/src/components/validation-tools/MoorhenValidationChartWidgetBase.tsx @@ -23,6 +23,13 @@ type ValidationChartProps = { } export const MoorhenValidationChartWidgetBase = forwardRef((props, chartRef) => { + const defaultProps = { + filterMapFunction: (arg0: moorhen.Map) => {return true}, extraControlForm: null, extraControlFormValue: null, enableChainSelect: true + } + const { + filterMapFunction, extraControlForm, extraControlFormValue, enableChainSelect + } = { ...defaultProps, ...props } + const chainSelectRef = useRef(null); const mapSelectRef = useRef(null); const moleculeSelectRef = useRef(null); @@ -64,7 +71,7 @@ export const MoorhenValidationChartWidgetBase = forwardRef { - const filteredMaps = maps.filter(map => props.filterMapFunction(map)) + const filteredMaps = maps.filter(map => filterMapFunction(map)) if (maps.length === 0 || filteredMaps.length === 0) { setSelectedMap(null) @@ -77,13 +84,13 @@ export const MoorhenValidationChartWidgetBase = forwardRef { - const newPlotData = await props.fetchData(selectedModel, selectedMap, props.enableChainSelect ? chainSelectRef.current.value : null) + const newPlotData = await props.fetchData(selectedModel, selectedMap, enableChainSelect ? chainSelectRef.current.value : null) setPlotData(newPlotData) } useEffect(() => { fetchData() - }, [selectedChain, selectedMap, selectedModel, props.extraControlFormValue]) + }, [selectedChain, selectedMap, selectedModel, extraControlFormValue]) useEffect(() => { if (selectedModel !== null && selectedModel === updateMolNo) { @@ -102,7 +109,7 @@ export const MoorhenValidationChartWidgetBase = forwardRef - {props.enableChainSelect && + {enableChainSelect && } - + - {props.extraControlForm} + {extraControlForm} @@ -146,4 +153,4 @@ export const MoorhenValidationChartWidgetBase = forwardRef {return true}, extraControlForm: null, extraControlFormValue: null, enableChainSelect: true} \ No newline at end of file + diff --git a/baby-gru/src/components/validation-tools/MoorhenValidationListWidgetBase.tsx b/baby-gru/src/components/validation-tools/MoorhenValidationListWidgetBase.tsx index 61c98c97c..4846cc655 100644 --- a/baby-gru/src/components/validation-tools/MoorhenValidationListWidgetBase.tsx +++ b/baby-gru/src/components/validation-tools/MoorhenValidationListWidgetBase.tsx @@ -15,6 +15,13 @@ export const MoorhenValidationListWidgetBase = (props: { enableMapSelect?: boolean; }) => { + const defaultProps = { + filterMapFunction: (_maps: moorhen.Map) => true, extraControlForm: null, extraControlFormValue: null, enableMapSelect: true } + + const { + filterMapFunction, extraControlForm, extraControlFormValue, enableMapSelect + } = { ...defaultProps, ...props } + const mapSelectRef = useRef(); const moleculeSelectRef = useRef(); @@ -50,7 +57,7 @@ export const MoorhenValidationListWidgetBase = (props: { }, [molecules.length]) useEffect(() => { - const filteredMaps = maps.filter(map => props.filterMapFunction(map)) + const filteredMaps = maps.filter(map => filterMapFunction(map)) if (maps.length === 0 || filteredMaps.length === 0) { setSelectedMap(null) @@ -64,7 +71,7 @@ export const MoorhenValidationListWidgetBase = (props: { async function fetchData() { setBusy(true) - if (selectedModel === null || (props.enableMapSelect && selectedMap === null)) { + if (selectedModel === null || (enableMapSelect && selectedMap === null)) { setCardData(null) } else { let newData = await props.fetchData(selectedModel, selectedMap) @@ -75,7 +82,7 @@ export const MoorhenValidationListWidgetBase = (props: { useEffect(() => { fetchData() - }, [selectedMap, selectedModel, props.extraControlFormValue]) + }, [selectedMap, selectedModel, extraControlFormValue]) useEffect(() => { if (selectedModel !== null && selectedModel === updateMolNo) { @@ -84,7 +91,7 @@ export const MoorhenValidationListWidgetBase = (props: { }, [updateSwitch]) useEffect(() => { - if (selectedModel === null || (props.enableMapSelect && selectedMap === null) || cardData === null) { + if (selectedModel === null || (enableMapSelect && selectedMap === null) || cardData === null) { setCardList([]) } else { const newCardList = props.getCards(selectedModel, selectedMap, cardData) @@ -99,12 +106,12 @@ export const MoorhenValidationListWidgetBase = (props: { - {props.enableMapSelect && + {enableMapSelect && - + } - {props.extraControlForm} + {extraControlForm} @@ -117,5 +124,3 @@ export const MoorhenValidationListWidgetBase = (props: {
} - -MoorhenValidationListWidgetBase.defaultProps = {filterMapFunction: (maps: moorhen.Map) => {return true}, extraControlForm: null, extraControlFormValue: null, enableMapSelect: true} \ No newline at end of file diff --git a/baby-gru/src/types/moorhen.d.ts b/baby-gru/src/types/moorhen.d.ts index 5ac112cbb..c3be03deb 100644 --- a/baby-gru/src/types/moorhen.d.ts +++ b/baby-gru/src/types/moorhen.d.ts @@ -874,7 +874,6 @@ export namespace moorhen { interface Context extends ContextSetters, PreferencesValues { } type ContextButtonProps = { - mode: 'context'; monomerLibraryPath: string; urlPrefix: string; commandCentre: React.RefObject From 737ba09b6a714bcac47c1556a1b345a155bea784 Mon Sep 17 00:00:00 2001 From: Filomeno Sanchez Date: Mon, 8 Jul 2024 15:50:25 +0100 Subject: [PATCH 2/4] fix some of the TS errors --- baby-gru/src/components/card/MoorhenMoleculeCard.tsx | 4 ++-- .../form/MoorhenFetchOnlineSourcesForm.tsx | 8 ++++---- .../modal/MoorhenCarbohydrateValidationModal.tsx | 2 -- .../src/components/modal/MoorhenControlsModal.tsx | 2 -- .../modal/MoorhenCreateAcedrgLinkModal.tsx | 2 -- .../components/modal/MoorhenDiffMapPeaksModal.tsx | 2 -- .../modal/MoorhenFillPartialResiduesModal.tsx | 2 -- .../src/components/modal/MoorhenFindLigandModal.tsx | 2 -- baby-gru/src/components/modal/MoorhenLhasaModal.tsx | 2 -- .../modal/MoorhenLigandValidationModal.tsx | 2 -- baby-gru/src/components/modal/MoorhenMapsModal.tsx | 2 -- baby-gru/src/components/modal/MoorhenMmrrccModal.tsx | 2 -- baby-gru/src/components/modal/MoorhenModelsModal.tsx | 2 -- .../src/components/modal/MoorhenPepFlipsModal.tsx | 2 -- baby-gru/src/components/modal/MoorhenQScoreModal.tsx | 2 -- .../components/modal/MoorhenQuerySequenceModal.tsx | 2 -- .../src/components/modal/MoorhenRamaPlotModal.tsx | 2 -- .../components/modal/MoorhenSceneSettingsModal.tsx | 2 -- baby-gru/src/components/modal/MoorhenScriptModal.tsx | 2 -- .../src/components/modal/MoorhenSliceNDiceModal.tsx | 2 -- .../modal/MoorhenSuperposeStructuresModal.tsx | 2 -- .../components/modal/MoorhenUnmodelledBlobsModal.tsx | 2 -- .../components/modal/MoorhenValidationPlotModal.tsx | 2 -- .../components/modal/MoorhenWaterValidationModal.tsx | 2 -- .../components/navbar-menus/MoorhenCalculateMenu.tsx | 12 ++---------- .../navbar-menus/MoorhenPreferencesMenu.tsx | 1 - 26 files changed, 8 insertions(+), 61 deletions(-) diff --git a/baby-gru/src/components/card/MoorhenMoleculeCard.tsx b/baby-gru/src/components/card/MoorhenMoleculeCard.tsx index b1791ce01..a0ca7d949 100644 --- a/baby-gru/src/components/card/MoorhenMoleculeCard.tsx +++ b/baby-gru/src/components/card/MoorhenMoleculeCard.tsx @@ -697,7 +697,7 @@ export const MoorhenMoleculeCard = forwardRef - + {props.molecule.hasGlycans && @@ -706,7 +706,7 @@ export const MoorhenMoleculeCard = forwardRef - + } diff --git a/baby-gru/src/components/form/MoorhenFetchOnlineSourcesForm.tsx b/baby-gru/src/components/form/MoorhenFetchOnlineSourcesForm.tsx index bcc859680..04313e064 100644 --- a/baby-gru/src/components/form/MoorhenFetchOnlineSourcesForm.tsx +++ b/baby-gru/src/components/form/MoorhenFetchOnlineSourcesForm.tsx @@ -21,15 +21,15 @@ export const MoorhenFetchOnlineSourcesForm = (props: { setBusy: React.Dispatch>; sources?: string[]; downloadMaps?: boolean; - onMoleculeLoad: (newMolecule: moorhen.Molecule) => any; + onMoleculeLoad?: (newMolecule: moorhen.Molecule) => any; }) => { const defaultProps = { - sources: ['PDBe', 'PDB-REDO', 'AFDB', 'EMDB'], downloadMaps: true, onMoleculeLoad: () => {} + sources: ['PDBe', 'PDB-REDO', 'AFDB', 'EMDB'], downloadMaps: true } const { - sources, downloadMaps, onMoleculeLoad, commandCentre, glRef, store, monomerLibraryPath + sources, downloadMaps, commandCentre, glRef, store, monomerLibraryPath } = { ...defaultProps, ...props } const pdbCodeFetchInputRef = useRef(null); @@ -140,7 +140,7 @@ export const MoorhenFetchOnlineSourcesForm = (props: { await newMolecule.fetchIfDirtyAndDraw(newMolecule.atomCount >= 50000 ? 'CRs' : 'CBs') await newMolecule.centreOn('/*/*/*/*', true) dispatch(addMolecule(newMolecule)) - onMoleculeLoad(newMolecule) + props.onMoleculeLoad?.(newMolecule) return newMolecule } catch (err) { enqueueSnackbar('Failed to read molecule', {variant: "error"}) diff --git a/baby-gru/src/components/modal/MoorhenCarbohydrateValidationModal.tsx b/baby-gru/src/components/modal/MoorhenCarbohydrateValidationModal.tsx index 1759267e6..8bf08ef69 100644 --- a/baby-gru/src/components/modal/MoorhenCarbohydrateValidationModal.tsx +++ b/baby-gru/src/components/modal/MoorhenCarbohydrateValidationModal.tsx @@ -25,8 +25,6 @@ export const MoorhenCarbohydrateValidationModal = (props: moorhen.CollectedProps modalId={modalKeys.CARB_VALIDATION} left={width / 6} top={height / 3} - defaultHeight={convertViewtoPx(70, height)} - defaultWidth={convertViewtoPx(37, width)} minHeight={convertViewtoPx(30, height)} minWidth={convertRemToPx(37)} maxHeight={convertViewtoPx(70, height)} diff --git a/baby-gru/src/components/modal/MoorhenControlsModal.tsx b/baby-gru/src/components/modal/MoorhenControlsModal.tsx index ac170e44f..a560f6a80 100644 --- a/baby-gru/src/components/modal/MoorhenControlsModal.tsx +++ b/baby-gru/src/components/modal/MoorhenControlsModal.tsx @@ -78,8 +78,6 @@ export const MoorhenControlsModal = (props: { urlPrefix: string }) => { modalId={modalKeys.SHOW_CONTROLS} left={width / 5} top={height / 5} - defaultHeight={convertViewtoPx(60, height)} - defaultWidth={convertViewtoPx(60, width)} minHeight={convertViewtoPx(60, height)} minWidth={convertViewtoPx(60, width)} maxHeight={convertViewtoPx(60, height)} diff --git a/baby-gru/src/components/modal/MoorhenCreateAcedrgLinkModal.tsx b/baby-gru/src/components/modal/MoorhenCreateAcedrgLinkModal.tsx index e0d51ae5b..7fd4eb17a 100644 --- a/baby-gru/src/components/modal/MoorhenCreateAcedrgLinkModal.tsx +++ b/baby-gru/src/components/modal/MoorhenCreateAcedrgLinkModal.tsx @@ -281,8 +281,6 @@ export const MoorhenCreateAcedrgLinkModal = (props: { headerTitle="Create covalent link" left={width / 2} top={height / 3} - defaultHeight={convertViewtoPx(10, height)} - defaultWidth={convertViewtoPx(10, width)} minHeight={convertViewtoPx(10, height)} minWidth={convertRemToPx(37)} maxHeight={convertViewtoPx(90, height)} diff --git a/baby-gru/src/components/modal/MoorhenDiffMapPeaksModal.tsx b/baby-gru/src/components/modal/MoorhenDiffMapPeaksModal.tsx index eb9260373..64d143d48 100644 --- a/baby-gru/src/components/modal/MoorhenDiffMapPeaksModal.tsx +++ b/baby-gru/src/components/modal/MoorhenDiffMapPeaksModal.tsx @@ -17,8 +17,6 @@ export const MoorhenDiffMapPeaksModal = (props: moorhen.CollectedProps) => { modalId={modalKeys.DIFF_MAP_PEAKS} left={width / 6} top={height / 3} - defaultHeight={convertViewtoPx(70, height)} - defaultWidth={convertViewtoPx(37, width)} minHeight={convertViewtoPx(30, height)} minWidth={convertRemToPx(37)} maxHeight={convertViewtoPx(90, height)} diff --git a/baby-gru/src/components/modal/MoorhenFillPartialResiduesModal.tsx b/baby-gru/src/components/modal/MoorhenFillPartialResiduesModal.tsx index 705776e97..9d13305bc 100644 --- a/baby-gru/src/components/modal/MoorhenFillPartialResiduesModal.tsx +++ b/baby-gru/src/components/modal/MoorhenFillPartialResiduesModal.tsx @@ -25,8 +25,6 @@ export const MoorhenFillPartialResiduesModal = (props: moorhen.CollectedProps) = modalId={modalKeys.FILL_PART_RES} left={width / 6} top={height / 3} - defaultHeight={convertViewtoPx(70, height)} - defaultWidth={convertViewtoPx(37, width)} minHeight={convertViewtoPx(30, height)} minWidth={convertRemToPx(37)} maxHeight={convertViewtoPx(70, height)} diff --git a/baby-gru/src/components/modal/MoorhenFindLigandModal.tsx b/baby-gru/src/components/modal/MoorhenFindLigandModal.tsx index 04a9eeae3..2df148354 100644 --- a/baby-gru/src/components/modal/MoorhenFindLigandModal.tsx +++ b/baby-gru/src/components/modal/MoorhenFindLigandModal.tsx @@ -254,8 +254,6 @@ export const MoorheFindLigandModal = (props: { }) => { modalId={modalKeys.FIT_LIGAND} left={width / 6} top={height / 6} - defaultHeight={convertViewtoPx(10, height)} - defaultWidth={convertViewtoPx(40, width)} minHeight={convertViewtoPx(15, height)} minWidth={convertViewtoPx(25, width)} maxHeight={convertViewtoPx(50, height)} diff --git a/baby-gru/src/components/modal/MoorhenLhasaModal.tsx b/baby-gru/src/components/modal/MoorhenLhasaModal.tsx index e0a68f373..e09a5cafa 100644 --- a/baby-gru/src/components/modal/MoorhenLhasaModal.tsx +++ b/baby-gru/src/components/modal/MoorhenLhasaModal.tsx @@ -139,8 +139,6 @@ export const MoorhenLhasaModal = (props: moorhen.CollectedProps) => { modalId={modalKeys.LHASA} left={width / 6} top={height / 3} - defaultHeight={convertViewtoPx(70, height)} - defaultWidth={convertViewtoPx(37, width)} minHeight={convertViewtoPx(30, height)} minWidth={convertRemToPx(37)} maxHeight={convertViewtoPx(90, height)} diff --git a/baby-gru/src/components/modal/MoorhenLigandValidationModal.tsx b/baby-gru/src/components/modal/MoorhenLigandValidationModal.tsx index 922797806..4a9265ef8 100644 --- a/baby-gru/src/components/modal/MoorhenLigandValidationModal.tsx +++ b/baby-gru/src/components/modal/MoorhenLigandValidationModal.tsx @@ -17,8 +17,6 @@ export const MoorhenLigandValidationModal = (props: moorhen.CollectedProps) => { modalId={modalKeys.LIGAND_VALIDATION} left={width / 6} top={height / 3} - defaultHeight={convertViewtoPx(70, height)} - defaultWidth={convertViewtoPx(37, width)} minHeight={convertViewtoPx(30, height)} minWidth={convertRemToPx(37)} maxHeight={convertViewtoPx(70, height)} diff --git a/baby-gru/src/components/modal/MoorhenMapsModal.tsx b/baby-gru/src/components/modal/MoorhenMapsModal.tsx index e56351773..73f2a3766 100644 --- a/baby-gru/src/components/modal/MoorhenMapsModal.tsx +++ b/baby-gru/src/components/modal/MoorhenMapsModal.tsx @@ -46,8 +46,6 @@ export const MoorhenMapsModal = (props: moorhen.CollectedProps) => { modalId={modalKeys.MAPS} left={width - (convertRemToPx(55) + 100)} top={height / 2} - defaultHeight={convertViewtoPx(10, height)} - defaultWidth={convertViewtoPx(10, width)} minHeight={convertViewtoPx(10, height)} minWidth={convertRemToPx(20)} maxHeight={convertViewtoPx(90, height)} diff --git a/baby-gru/src/components/modal/MoorhenMmrrccModal.tsx b/baby-gru/src/components/modal/MoorhenMmrrccModal.tsx index 73215f07e..1cc6c2480 100644 --- a/baby-gru/src/components/modal/MoorhenMmrrccModal.tsx +++ b/baby-gru/src/components/modal/MoorhenMmrrccModal.tsx @@ -17,8 +17,6 @@ export const MoorhenMmrrccModal = (props: moorhen.CollectedProps) => { modalId={modalKeys.MMRRCC} left={width / 6} top={height / 3} - defaultHeight={convertViewtoPx(70, height)} - defaultWidth={convertViewtoPx(37, width)} minHeight={convertViewtoPx(30, height)} minWidth={convertRemToPx(37)} maxHeight={convertViewtoPx(90, height)} diff --git a/baby-gru/src/components/modal/MoorhenModelsModal.tsx b/baby-gru/src/components/modal/MoorhenModelsModal.tsx index 41a6af671..dd94f5f31 100644 --- a/baby-gru/src/components/modal/MoorhenModelsModal.tsx +++ b/baby-gru/src/components/modal/MoorhenModelsModal.tsx @@ -49,8 +49,6 @@ export const MoorhenModelsModal = (props: moorhen.CollectedProps) => { modalId={modalKeys.MODELS} left={width - (convertRemToPx(55) + 100)} top={height / 4} - defaultHeight={convertViewtoPx(10, height)} - defaultWidth={convertViewtoPx(10, width)} minHeight={convertViewtoPx(10, height)} minWidth={convertRemToPx(20)} maxHeight={convertViewtoPx(90, height)} diff --git a/baby-gru/src/components/modal/MoorhenPepFlipsModal.tsx b/baby-gru/src/components/modal/MoorhenPepFlipsModal.tsx index dd76378ed..d33c833e4 100644 --- a/baby-gru/src/components/modal/MoorhenPepFlipsModal.tsx +++ b/baby-gru/src/components/modal/MoorhenPepFlipsModal.tsx @@ -25,8 +25,6 @@ export const MoorhenPepFlipsModal = (props: moorhen.CollectedProps) => { modalId={modalKeys.PEPTIDE_FLIPS} left={width / 6} top={height / 3} - defaultHeight={convertViewtoPx(70, height)} - defaultWidth={convertViewtoPx(37, width)} minHeight={convertViewtoPx(30, height)} minWidth={convertRemToPx(37)} maxHeight={convertViewtoPx(70, height)} diff --git a/baby-gru/src/components/modal/MoorhenQScoreModal.tsx b/baby-gru/src/components/modal/MoorhenQScoreModal.tsx index d498129d1..1ced73f5e 100644 --- a/baby-gru/src/components/modal/MoorhenQScoreModal.tsx +++ b/baby-gru/src/components/modal/MoorhenQScoreModal.tsx @@ -17,8 +17,6 @@ export const MoorhenQScoreModal = (props) => { modalId={modalKeys.QSCORE} left={width / 6} top={height / 3} - defaultHeight={convertViewtoPx(70, height)} - defaultWidth={convertViewtoPx(37, width)} minHeight={convertViewtoPx(30, height)} minWidth={convertRemToPx(37)} maxHeight={convertViewtoPx(90, height)} diff --git a/baby-gru/src/components/modal/MoorhenQuerySequenceModal.tsx b/baby-gru/src/components/modal/MoorhenQuerySequenceModal.tsx index 22c985cfc..543f42230 100644 --- a/baby-gru/src/components/modal/MoorhenQuerySequenceModal.tsx +++ b/baby-gru/src/components/modal/MoorhenQuerySequenceModal.tsx @@ -209,8 +209,6 @@ const MoorhenQuerySequence = (props: { modalId={modalKeys.SEQ_QUERY} left={width / 4} top={height / 4} - defaultHeight={convertViewtoPx(10, height)} - defaultWidth={convertViewtoPx(10, width)} minHeight={convertViewtoPx(15, height)} minWidth={convertRemToPx(37)} maxHeight={convertViewtoPx(50, height)} diff --git a/baby-gru/src/components/modal/MoorhenRamaPlotModal.tsx b/baby-gru/src/components/modal/MoorhenRamaPlotModal.tsx index 54a0649ca..18e726eaa 100644 --- a/baby-gru/src/components/modal/MoorhenRamaPlotModal.tsx +++ b/baby-gru/src/components/modal/MoorhenRamaPlotModal.tsx @@ -27,8 +27,6 @@ export const MoorhenRamaPlotModal = (props: moorhen.CollectedProps) => { modalId={modalKeys.RAMA_PLOT} left={width / 6} top={height / 3} - defaultHeight={convertViewtoPx(70, height)} - defaultWidth={convertViewtoPx(37, width)} minHeight={convertViewtoPx(30, height)} minWidth={convertRemToPx(37)} maxHeight={convertViewtoPx(90, height)} diff --git a/baby-gru/src/components/modal/MoorhenSceneSettingsModal.tsx b/baby-gru/src/components/modal/MoorhenSceneSettingsModal.tsx index 5a5366bdf..8b84396f1 100644 --- a/baby-gru/src/components/modal/MoorhenSceneSettingsModal.tsx +++ b/baby-gru/src/components/modal/MoorhenSceneSettingsModal.tsx @@ -410,8 +410,6 @@ export const MoorhenSceneSettingsModal = (props: { left={width / 5} top={height / 6} headerTitle="Scene settings" - defaultHeight={convertViewtoPx(40, height)} - defaultWidth={convertViewtoPx(40, width)} minHeight={convertViewtoPx(60, height)} minWidth={convertRemToPx(40)} maxHeight={convertViewtoPx(75, height)} diff --git a/baby-gru/src/components/modal/MoorhenScriptModal.tsx b/baby-gru/src/components/modal/MoorhenScriptModal.tsx index 988e94328..2a4021941 100644 --- a/baby-gru/src/components/modal/MoorhenScriptModal.tsx +++ b/baby-gru/src/components/modal/MoorhenScriptModal.tsx @@ -44,8 +44,6 @@ export const MoorhenScriptModal = (props: { left={width / 5} top={height / 6} headerTitle="Interactive scripting" - defaultHeight={convertViewtoPx(10, height)} - defaultWidth={convertViewtoPx(10, width)} minHeight={convertViewtoPx(10, height)} minWidth={convertRemToPx(37)} maxHeight={convertViewtoPx(60, height)} diff --git a/baby-gru/src/components/modal/MoorhenSliceNDiceModal.tsx b/baby-gru/src/components/modal/MoorhenSliceNDiceModal.tsx index b7ee4a948..bf7dbf8f2 100644 --- a/baby-gru/src/components/modal/MoorhenSliceNDiceModal.tsx +++ b/baby-gru/src/components/modal/MoorhenSliceNDiceModal.tsx @@ -582,8 +582,6 @@ export const MoorhenSliceNDiceModal = (props: { modalId={modalKeys.SLICE_N_DICE} left={width / 6} top={height / 6} - defaultHeight={convertViewtoPx(10, height)} - defaultWidth={convertViewtoPx(10, width)} minHeight={convertViewtoPx(15, height)} minWidth={convertViewtoPx(33, width)} maxHeight={convertViewtoPx(50, height)} diff --git a/baby-gru/src/components/modal/MoorhenSuperposeStructuresModal.tsx b/baby-gru/src/components/modal/MoorhenSuperposeStructuresModal.tsx index 099d6766a..988815f0a 100644 --- a/baby-gru/src/components/modal/MoorhenSuperposeStructuresModal.tsx +++ b/baby-gru/src/components/modal/MoorhenSuperposeStructuresModal.tsx @@ -348,8 +348,6 @@ export const MoorheSuperposeStructuresModal = (props: { commandCentre: React.Ref modalId={modalKeys.SUPERPOSE_MODELS} left={width / 6} top={height / 6} - defaultHeight={convertViewtoPx(10, height)} - defaultWidth={convertViewtoPx(10, width)} minHeight={convertViewtoPx(15, height)} minWidth={convertViewtoPx(25, width)} maxHeight={convertViewtoPx(50, height)} diff --git a/baby-gru/src/components/modal/MoorhenUnmodelledBlobsModal.tsx b/baby-gru/src/components/modal/MoorhenUnmodelledBlobsModal.tsx index 5ad3c0222..a6ef2286b 100644 --- a/baby-gru/src/components/modal/MoorhenUnmodelledBlobsModal.tsx +++ b/baby-gru/src/components/modal/MoorhenUnmodelledBlobsModal.tsx @@ -25,8 +25,6 @@ export const MoorhenUnmodelledBlobsModal = (props: moorhen.CollectedProps) => { modalId={modalKeys.UNMODELLED_BLOBS} left={width / 6} top={height / 3} - defaultHeight={convertViewtoPx(70, height)} - defaultWidth={convertViewtoPx(37, width)} minHeight={convertViewtoPx(30, height)} minWidth={convertRemToPx(37)} maxHeight={convertViewtoPx(70, height)} diff --git a/baby-gru/src/components/modal/MoorhenValidationPlotModal.tsx b/baby-gru/src/components/modal/MoorhenValidationPlotModal.tsx index 86e31a28e..d567c0b71 100644 --- a/baby-gru/src/components/modal/MoorhenValidationPlotModal.tsx +++ b/baby-gru/src/components/modal/MoorhenValidationPlotModal.tsx @@ -17,8 +17,6 @@ export const MoorhenValidationPlotModal = (props: moorhen.CollectedProps) => { modalId={modalKeys.VALIDATION_PLOT} left={width / 6} top={height / 3} - defaultHeight={convertViewtoPx(70, height)} - defaultWidth={convertViewtoPx(37, width)} minHeight={convertViewtoPx(30, height)} minWidth={convertRemToPx(37)} maxHeight={convertViewtoPx(90, height)} diff --git a/baby-gru/src/components/modal/MoorhenWaterValidationModal.tsx b/baby-gru/src/components/modal/MoorhenWaterValidationModal.tsx index 5abaf610b..db40edae3 100644 --- a/baby-gru/src/components/modal/MoorhenWaterValidationModal.tsx +++ b/baby-gru/src/components/modal/MoorhenWaterValidationModal.tsx @@ -17,8 +17,6 @@ export const MoorhenWaterValidationModal = (props: moorhen.CollectedProps) => { modalId={modalKeys.WATER_VALIDATION} left={width / 6} top={height / 3} - defaultHeight={convertViewtoPx(70, height)} - defaultWidth={convertViewtoPx(37, width)} minHeight={convertViewtoPx(30, height)} minWidth={convertRemToPx(37)} maxHeight={convertViewtoPx(70, height)} diff --git a/baby-gru/src/components/navbar-menus/MoorhenCalculateMenu.tsx b/baby-gru/src/components/navbar-menus/MoorhenCalculateMenu.tsx index a361c212f..abc805ed1 100644 --- a/baby-gru/src/components/navbar-menus/MoorhenCalculateMenu.tsx +++ b/baby-gru/src/components/navbar-menus/MoorhenCalculateMenu.tsx @@ -31,16 +31,8 @@ export const MoorhenCalculateMenu = (props: MoorhenNavBarExtendedControlsInterfa - - + + From 65fa135c843da69ea1ff3d9c523eaafb82339a97 Mon Sep 17 00:00:00 2001 From: FilomenoSanchez Date: Tue, 9 Jul 2024 13:38:57 +0100 Subject: [PATCH 3/4] fix TS transpilation --- .../src/components/card/MoorhenMapCard.tsx | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/baby-gru/src/components/card/MoorhenMapCard.tsx b/baby-gru/src/components/card/MoorhenMapCard.tsx index 1b579cf2c..bbd83c0f4 100644 --- a/baby-gru/src/components/card/MoorhenMapCard.tsx +++ b/baby-gru/src/components/card/MoorhenMapCard.tsx @@ -1,6 +1,6 @@ import { forwardRef, useImperativeHandle, useEffect, useState, useRef, useCallback, useMemo, Fragment } from "react" import { Card, Form, Button, Col, DropdownButton, Stack, OverlayTrigger, ToggleButton, Spinner } from "react-bootstrap" -import { doDownload, rgbToHex } from '../../utils/utils' +import { convertRemToPx, doDownload, rgbToHex } from '../../utils/utils' import { getNameLabel } from "./cardUtils" import { VisibilityOffOutlined, VisibilityOutlined, ExpandMoreOutlined, ExpandLessOutlined, DownloadOutlined, Settings, FileCopyOutlined, RadioButtonCheckedOutlined, RadioButtonUncheckedOutlined, AddCircleOutline, RemoveCircleOutline } from '@mui/icons-material'; import { MoorhenMapSettingsMenuItem } from "../menu-item/MoorhenMapSettingsMenuItem"; @@ -26,14 +26,6 @@ type ActionButtonType = { } interface MoorhenMapCardPropsInterface extends moorhen.CollectedProps { - dropdownId: number; - accordionDropdownId: number; - setAccordionDropdownId: React.Dispatch>; - sideBarWidth: number; - showSideBar: boolean; - busy: boolean; - key: number; - index: number; map: moorhen.Map; initialContour?: number; initialRadius?: number; @@ -278,8 +270,9 @@ export const MoorhenMapCard = forwardRef((pro }, } - const getButtonBar = (sideBarWidth: number) => { - const maximumAllowedWidth = sideBarWidth * 0.55 + const getButtonBar = () => { + const minWidth = convertRemToPx(20) + const maximumAllowedWidth = minWidth * 0.55 let currentlyUsedWidth = 0 let expandedButtons: JSX.Element[] = [] let compressedButtons: JSX.Element[] = [] @@ -583,7 +576,7 @@ export const MoorhenMapCard = forwardRef((pro } - return + return @@ -591,7 +584,7 @@ export const MoorhenMapCard = forwardRef((pro {getMapColourSelector()} - {getButtonBar(props.sideBarWidth)} + {getButtonBar()} From f3d57a7c8e211062e16bb327fcbc3c37c511b0a2 Mon Sep 17 00:00:00 2001 From: FilomenoSanchez Date: Tue, 9 Jul 2024 13:42:20 +0100 Subject: [PATCH 4/4] format --- .../modal/MoorhenSceneSettingsModal.tsx | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/baby-gru/src/components/modal/MoorhenSceneSettingsModal.tsx b/baby-gru/src/components/modal/MoorhenSceneSettingsModal.tsx index f1d03d0f7..9e8847ebb 100644 --- a/baby-gru/src/components/modal/MoorhenSceneSettingsModal.tsx +++ b/baby-gru/src/components/modal/MoorhenSceneSettingsModal.tsx @@ -378,14 +378,13 @@ const LightingPanel = (props: { } }} /> - - {dispatch( setDoShadow(!doShadow) )}} - label="Shadows"/> - - + + {dispatch( setDoShadow(!doShadow) )}} + label="Shadows"/> +
}