From e2bdc5677b770621c1b907b7a9a7a7f7643dec36 Mon Sep 17 00:00:00 2001 From: ag-m2ms Date: Thu, 5 Nov 2020 11:58:04 +0100 Subject: [PATCH] Check molecule's site after clicking on a molecule's action --- .../preview/molecule/moleculeList.js | 3 +- .../preview/molecule/moleculeView.js | 57 ++++++++++++------- .../preview/molecule/redux/selectors.js | 11 ++-- .../moleculeGroups/molGroupChecklist.js | 4 +- .../moleculeGroups/redux/dispatchActions.js | 6 +- 5 files changed, 47 insertions(+), 34 deletions(-) diff --git a/js/components/preview/molecule/moleculeList.js b/js/components/preview/molecule/moleculeList.js index 02350a8f7..c3f2224a0 100644 --- a/js/components/preview/molecule/moleculeList.js +++ b/js/components/preview/molecule/moleculeList.js @@ -60,7 +60,6 @@ import { useRouteMatch } from 'react-router-dom'; import { setSortDialogOpen } from './redux/actions'; import { setMoleculeList, setAllMolLists } from '../../../reducers/api/actions'; import { AlertModal } from '../../common/Modal/AlertModal'; -import {selectMoleculeGroup} from '../moleculeGroups/redux/dispatchActions' const useStyles = makeStyles(theme => ({ container: { @@ -581,7 +580,7 @@ export const MoleculeList = memo(({ height, setFilterItemsHeight, filterItemsHei ) }} onChange={handleSearch} - disabled={disableUserInteraction || (getJoinedMoleculeList && getJoinedMoleculeList.length === 0)} + disabled={disableUserInteraction} />, ({ @@ -215,6 +217,8 @@ const MoleculeView = memo( const key = 'mol_image'; const [moleculeGroupID, setMoleculeGroupID] = useState(); + const moleculeGroups = useSelector(state => getMoleculeGroupLists(state)); + const dispatch = useDispatch(); const proteinList = useSelector(state => state.selectionReducers.proteinList); const complexList = useSelector(state => state.selectionReducers.complexList); @@ -228,7 +232,8 @@ const MoleculeView = memo( const [img_data, setImg_data] = useState(img_data_init); const { getNglView } = useContext(NglContext); - const stage = getNglView(VIEWS.MAJOR_VIEW) && getNglView(VIEWS.MAJOR_VIEW).stage; + const majorViewStage = getNglView(VIEWS.MAJOR_VIEW) && getNglView(VIEWS.MAJOR_VIEW).stage; + const stageSummaryView = getNglView(VIEWS.SUMMARY_VIEW) && getNglView(VIEWS.SUMMARY_VIEW).stage; const isLigandOn = (currentID && fragmentDisplayList.includes(currentID)) || false; const isProteinOn = (currentID && proteinList.includes(currentID)) || false; @@ -324,6 +329,8 @@ const MoleculeView = memo( } }, [currentID, dispatch, searchMoleculeGroup]); + const moleculeGroup = moleculeGroups[data.site - 1]; + const svg_image = ( { + dispatch(onSelectMoleculeGroup({ moleculeGroup, stageSummaryView, majorViewStage, selectGroup: true })); + } + const addNewLigand = () => { - dispatch(addLigand(stage, data, colourToggle)); + selectMoleculeSite(); + dispatch(addLigand(majorViewStage, data, colourToggle)); }; const removeSelectedLigand = () => { - dispatch(removeLigand(stage, data)); + dispatch(removeLigand(majorViewStage, data)); selectedAll.current = false; }; @@ -370,12 +382,13 @@ const MoleculeView = memo( }; const removeSelectedProtein = () => { - dispatch(removeHitProtein(stage, data, colourToggle)); + dispatch(removeHitProtein(majorViewStage, data, colourToggle)); selectedAll.current = false; }; const addNewProtein = () => { - dispatch(addHitProtein(stage, data, colourToggle)); + selectMoleculeSite(); + dispatch(addHitProtein(majorViewStage, data, colourToggle)); }; const onProtein = calledFromSelectAll => { @@ -395,12 +408,13 @@ const MoleculeView = memo( }; const removeSelectedComplex = () => { - dispatch(removeComplex(stage, data, colourToggle)); + dispatch(removeComplex(majorViewStage, data, colourToggle)); selectedAll.current = false; }; const addNewComplex = () => { - dispatch(addComplex(stage, data, colourToggle)); + selectMoleculeSite(); + dispatch(addComplex(majorViewStage, data, colourToggle)); }; const onComplex = calledFromSelectAll => { @@ -420,11 +434,12 @@ const MoleculeView = memo( }; const removeSelectedSurface = () => { - dispatch(removeSurface(stage, data, colourToggle)); + dispatch(removeSurface(majorViewStage, data, colourToggle)); }; const addNewSurface = () => { - dispatch(addSurface(stage, data, colourToggle)); + selectMoleculeSite(); + dispatch(addSurface(majorViewStage, data, colourToggle)); }; const onSurface = () => { @@ -436,11 +451,12 @@ const MoleculeView = memo( }; const removeSelectedDensity = () => { - dispatch(removeDensity(stage, data, colourToggle)); + dispatch(removeDensity(majorViewStage, data, colourToggle)); }; const addNewDensity = () => { - dispatch(addDensity(stage, data, colourToggle)); + selectMoleculeSite(); + dispatch(addDensity(majorViewStage, data, colourToggle)); }; const onDensity = () => { @@ -452,11 +468,12 @@ const MoleculeView = memo( }; const removeSelectedVector = () => { - dispatch(removeVector(stage, data)); + dispatch(removeVector(majorViewStage, data)); }; const addNewVector = () => { - dispatch(addVector(stage, data)).catch(error => { + selectMoleculeSite(); + dispatch(addVector(majorViewStage, data)).catch(error => { throw new Error(error); }); }; @@ -498,22 +515,22 @@ const MoleculeView = memo( const moveSelectedMolSettings = newItemDataset => { if (newItemDataset) { if (isLigandOn) { - dispatch(addLigand(stage, newItemDataset, colourToggle)); + dispatch(addLigand(majorViewStage, newItemDataset, colourToggle)); } if (isProteinOn) { - dispatch(addHitProtein(stage, newItemDataset, colourToggle)); + dispatch(addHitProtein(majorViewStage, newItemDataset, colourToggle)); } if (isComplexOn) { - dispatch(addComplex(stage, newItemDataset, colourToggle)); + dispatch(addComplex(majorViewStage, newItemDataset, colourToggle)); } if (isSurfaceOn) { - dispatch(addSurface(stage, newItemDataset, colourToggle)); + dispatch(addSurface(majorViewStage, newItemDataset, colourToggle)); } if (isDensityOn) { - dispatch(addDensity(stage, newItemDataset, colourToggle)); + dispatch(addDensity(majorViewStage, newItemDataset, colourToggle)); } if (isVectorOn) { - dispatch(addVector(stage, newItemDataset)).catch(error => { + dispatch(addVector(majorViewStage, newItemDataset)).catch(error => { throw new Error(error); }); } @@ -567,7 +584,7 @@ const MoleculeView = memo( variant="outlined" className={classes.myLocationButton} onClick={() => { - dispatch(centerOnLigandByMoleculeID(stage, data?.id)); + dispatch(centerOnLigandByMoleculeID(majorViewStage, data?.id)); }} disabled={disableUserInteraction || !isLigandOn} > diff --git a/js/components/preview/molecule/redux/selectors.js b/js/components/preview/molecule/redux/selectors.js index 79e1ad775..031c81a7b 100644 --- a/js/components/preview/molecule/redux/selectors.js +++ b/js/components/preview/molecule/redux/selectors.js @@ -1,6 +1,6 @@ import { createSelector } from 'reselect'; -const getMoleculeGroupLists = state => state.apiReducers.mol_group_list; +export const getMoleculeGroupLists = state => state.apiReducers.mol_group_list; const getMoleculeGroupSelection = state => state.selectionReducers.mol_group_selection; const getObjectSelection = state => state.selectionReducers.object_selection; const getAllMolecules = state => state.apiReducers.all_mol_lists; @@ -39,17 +39,16 @@ export const selectAllMoleculeList = createSelector( (all_mol_lists, mol_group_list) => { const groupList = mol_group_list || []; const allMoleculesList = []; - groupList.forEach(site => { - const siteId = site.id; - const siteMolecules = (all_mol_lists || {})[siteId]; + groupList.forEach((site, index) => { + const siteMolecules = (all_mol_lists || {})[site.id]; if (siteMolecules) { siteMolecules.forEach(r => { - allMoleculesList.push({ site: siteId, ...r }) + allMoleculesList.push({ site: index + 1, ...r }) }); } }); return allMoleculesList; } -) \ No newline at end of file +); \ No newline at end of file diff --git a/js/components/preview/moleculeGroups/molGroupChecklist.js b/js/components/preview/moleculeGroups/molGroupChecklist.js index f1fb53177..9bf99efe6 100644 --- a/js/components/preview/moleculeGroups/molGroupChecklist.js +++ b/js/components/preview/moleculeGroups/molGroupChecklist.js @@ -73,9 +73,7 @@ const molGroupChecklist = memo(({}) => { - dispatch(onSelectMoleculeGroup({ moleculeGroup, stageSummaryView, majorViewStage, event })) - } + onChange={event => dispatch(onSelectMoleculeGroup({ moleculeGroup, stageSummaryView, majorViewStage, selectGroup: event.target.checked }))} disabled={disableUserInteraction} /> diff --git a/js/components/preview/moleculeGroups/redux/dispatchActions.js b/js/components/preview/moleculeGroups/redux/dispatchActions.js index 8875e791e..8b05dcde2 100644 --- a/js/components/preview/moleculeGroups/redux/dispatchActions.js +++ b/js/components/preview/moleculeGroups/redux/dispatchActions.js @@ -259,7 +259,7 @@ export const onDeselectMoleculeGroup = ({ moleculeGroup, stageSummaryView, major } }; -export const onSelectMoleculeGroup = ({ moleculeGroup, stageSummaryView, majorViewStage, event }) => ( +export const onSelectMoleculeGroup = ({ moleculeGroup, stageSummaryView, majorViewStage, selectGroup }) => ( dispatch, getState ) => { @@ -270,9 +270,9 @@ export const onSelectMoleculeGroup = ({ moleculeGroup, stageSummaryView, majorVi const objIdx = mol_group_selection.indexOf(moleculeGroup.id); const currentMolGroup = mol_group_list.find(o => o.id === moleculeGroup.id); - if (event.target.checked && objIdx === -1) { + if (selectGroup && objIdx === -1) { dispatch(selectMoleculeGroup(currentMolGroup, stageSummaryView)); - } else if (!event.target.checked && objIdx > -1) { + } else if (!selectGroup && objIdx > -1) { dispatch(onDeselectMoleculeGroup({ moleculeGroup, stageSummaryView, majorViewStage })); } };