From 3dac0f5296bc4e7a68ca5e647269c986477cc219 Mon Sep 17 00:00:00 2001 From: ag-m2ms Date: Fri, 6 Nov 2020 13:19:03 +0100 Subject: [PATCH] Fixed LPC buttons at the top of the list --- .../preview/molecule/moleculeList.js | 36 ++++++---- .../preview/molecule/moleculeView.js | 66 ++++++++----------- .../preview/molecule/redux/selectors.js | 2 +- 3 files changed, 51 insertions(+), 53 deletions(-) diff --git a/js/components/preview/molecule/moleculeList.js b/js/components/preview/molecule/moleculeList.js index c3f2224a0..c4747504b 100644 --- a/js/components/preview/molecule/moleculeList.js +++ b/js/components/preview/molecule/moleculeList.js @@ -60,6 +60,7 @@ 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 { onSelectMoleculeGroup } from '../moleculeGroups/redux/dispatchActions'; const useStyles = makeStyles(theme => ({ container: { @@ -260,7 +261,7 @@ export const MoleculeList = memo(({ height, setFilterItemsHeight, filterItemsHei const isActiveFilter = !!(filter || {}).active; 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 filterRef = useRef(); @@ -357,11 +358,11 @@ export const MoleculeList = memo(({ height, setFilterItemsHeight, filterItemsHei ) { dispatch(setMoleculeList({ ...(all_mol_lists[mol_group_on] || []) })); if (!directAccessProcessed && directDisplay && directDisplay.molecules && directDisplay.molecules.length > 0) { - dispatch(applyDirectSelection(stage, stageSummaryView)); + dispatch(applyDirectSelection(majorViewStage, stageSummaryView)); wereMoleculesInitialized.current = true; } if ( - stage && + majorViewStage && all_mol_lists && all_mol_lists[mol_group_on] && hideProjects && @@ -370,14 +371,14 @@ export const MoleculeList = memo(({ height, setFilterItemsHeight, filterItemsHei ) { dispatch(initializeFilter(object_selection, joinedMoleculeLists)); let moleculeList = all_mol_lists[mol_group_on]; - dispatch(initializeMolecules(stage, moleculeList, firstInitializationMolecule.current)); + dispatch(initializeMolecules(majorViewStage, moleculeList, firstInitializationMolecule.current)); wereMoleculesInitialized.current = true; } } }, [ list_type, mol_group_on, - stage, + majorViewStage, firstLoad, target_on, dispatch, @@ -475,7 +476,7 @@ export const MoleculeList = memo(({ height, setFilterItemsHeight, filterItemsHei const removeSelectedType = type => { joinedMoleculeLists.forEach(molecule => { - dispatch(removeType[type](stage, molecule, colourList[molecule.id % colourList.length])); + dispatch(removeType[type](majorViewStage, molecule, colourList[molecule.id % colourList.length])); }); selectedAll.current = false; }; @@ -483,33 +484,39 @@ export const MoleculeList = memo(({ height, setFilterItemsHeight, filterItemsHei const removeOfAllSelectedTypes = () => { proteinList?.forEach(moleculeID => { const foundedMolecule = joinedMoleculeLists?.find(mol => mol.id === moleculeID); - dispatch(removeHitProtein(stage, foundedMolecule, colourList[foundedMolecule.id % colourList.length])); + dispatch(removeHitProtein(majorViewStage, foundedMolecule, colourList[foundedMolecule.id % colourList.length])); }); complexList?.forEach(moleculeID => { const foundedMolecule = joinedMoleculeLists?.find(mol => mol.id === moleculeID); - dispatch(removeComplex(stage, foundedMolecule, colourList[foundedMolecule.id % colourList.length])); + dispatch(removeComplex(majorViewStage, foundedMolecule, colourList[foundedMolecule.id % colourList.length])); }); fragmentDisplayList?.forEach(moleculeID => { const foundedMolecule = joinedMoleculeLists?.find(mol => mol.id === moleculeID); - dispatch(removeLigand(stage, foundedMolecule, colourList[foundedMolecule.id % colourList.length])); + dispatch(removeLigand(majorViewStage, foundedMolecule, colourList[foundedMolecule.id % colourList.length])); }); surfaceList?.forEach(moleculeID => { const foundedMolecule = joinedMoleculeLists?.find(mol => mol.id === moleculeID); - dispatch(removeSurface(stage, foundedMolecule, colourList[foundedMolecule.id % colourList.length])); + dispatch(removeSurface(majorViewStage, foundedMolecule, colourList[foundedMolecule.id % colourList.length])); }); densityList?.forEach(moleculeID => { const foundedMolecule = joinedMoleculeLists?.find(mol => mol.id === moleculeID); - dispatch(removeDensity(stage, foundedMolecule, colourList[foundedMolecule.id % colourList.length])); + dispatch(removeDensity(majorViewStage, foundedMolecule, colourList[foundedMolecule.id % colourList.length])); }); vectorOnList?.forEach(moleculeID => { const foundedMolecule = joinedMoleculeLists?.find(mol => mol.id === moleculeID); - dispatch(removeVector(stage, foundedMolecule, colourList[foundedMolecule.id % colourList.length])); + dispatch(removeVector(majorViewStage, foundedMolecule, colourList[foundedMolecule.id % colourList.length])); }); }; + const selectMoleculeSite = (moleculeGroupSite) => { + const moleculeGroup = mol_group_list[moleculeGroupSite - 1]; + dispatch(onSelectMoleculeGroup({ moleculeGroup, stageSummaryView, majorViewStage, selectGroup: true })); + } + const addNewType = type => { joinedMoleculeLists.forEach(molecule => { - dispatch(addType[type](stage, molecule, colourList[molecule.id % colourList.length])); + selectMoleculeSite(molecule.site); + dispatch(addType[type](majorViewStage, molecule, colourList[molecule.id % colourList.length])); }); }; @@ -586,7 +593,7 @@ export const MoleculeList = memo(({ height, setFilterItemsHeight, filterItemsHei dispatch(hideAllSelectedMolecules(stage, joinedMoleculeLists))} + onClick={() => dispatch(hideAllSelectedMolecules(majorViewStage, joinedMoleculeLists))} > @@ -789,6 +796,7 @@ export const MoleculeList = memo(({ height, setFilterItemsHeight, filterItemsHei previousItemData={index > 0 && array[index - 1]} nextItemData={index < array?.length && array[index + 1]} removeOfAllSelectedTypes={removeOfAllSelectedTypes} + selectMoleculeSite={selectMoleculeSite} /> ))} diff --git a/js/components/preview/molecule/moleculeView.js b/js/components/preview/molecule/moleculeView.js index 58ee1a11d..891a1818c 100644 --- a/js/components/preview/molecule/moleculeView.js +++ b/js/components/preview/molecule/moleculeView.js @@ -31,8 +31,6 @@ import { base_url } from '../../routes/constants'; import { moleculeProperty } from './helperConstants'; import { centerOnLigandByMoleculeID } from '../../../reducers/ngl/dispatchActions'; import { SvgTooltip } from '../../common'; -import { onSelectMoleculeGroup } from '../moleculeGroups/redux/dispatchActions'; -import { getMoleculeGroupLists } from './redux/selectors'; const useStyles = makeStyles(theme => ({ @@ -207,7 +205,8 @@ const MoleculeView = memo( index, previousItemData, nextItemData, - removeOfAllSelectedTypes + removeOfAllSelectedTypes, + selectMoleculeSite }) => { // const [countOfVectors, setCountOfVectors] = useState('-'); // const [cmpds, setCmpds] = useState('-'); @@ -217,8 +216,6 @@ 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); @@ -232,8 +229,7 @@ const MoleculeView = memo( const [img_data, setImg_data] = useState(img_data_init); const { getNglView } = useContext(NglContext); - const majorViewStage = getNglView(VIEWS.MAJOR_VIEW) && getNglView(VIEWS.MAJOR_VIEW).stage; - const stageSummaryView = getNglView(VIEWS.SUMMARY_VIEW) && getNglView(VIEWS.SUMMARY_VIEW).stage; + const stage = getNglView(VIEWS.MAJOR_VIEW) && getNglView(VIEWS.MAJOR_VIEW).stage; const isLigandOn = (currentID && fragmentDisplayList.includes(currentID)) || false; const isProteinOn = (currentID && proteinList.includes(currentID)) || false; @@ -329,8 +325,6 @@ const MoleculeView = memo( } }, [currentID, dispatch, searchMoleculeGroup]); - const moleculeGroup = moleculeGroups[data.site - 1]; - const svg_image = ( { - dispatch(onSelectMoleculeGroup({ moleculeGroup, stageSummaryView, majorViewStage, selectGroup: true })); - } - const addNewLigand = () => { - selectMoleculeSite(); - dispatch(addLigand(majorViewStage, data, colourToggle)); + selectMoleculeSite(data.site); + dispatch(addLigand(stage, data, colourToggle)); }; const removeSelectedLigand = () => { - dispatch(removeLigand(majorViewStage, data)); + dispatch(removeLigand(stage, data)); selectedAll.current = false; }; @@ -382,13 +372,13 @@ const MoleculeView = memo( }; const removeSelectedProtein = () => { - dispatch(removeHitProtein(majorViewStage, data, colourToggle)); + dispatch(removeHitProtein(stage, data, colourToggle)); selectedAll.current = false; }; const addNewProtein = () => { - selectMoleculeSite(); - dispatch(addHitProtein(majorViewStage, data, colourToggle)); + selectMoleculeSite(data.site); + dispatch(addHitProtein(stage, data, colourToggle)); }; const onProtein = calledFromSelectAll => { @@ -408,13 +398,13 @@ const MoleculeView = memo( }; const removeSelectedComplex = () => { - dispatch(removeComplex(majorViewStage, data, colourToggle)); + dispatch(removeComplex(stage, data, colourToggle)); selectedAll.current = false; }; const addNewComplex = () => { - selectMoleculeSite(); - dispatch(addComplex(majorViewStage, data, colourToggle)); + selectMoleculeSite(data.site); + dispatch(addComplex(stage, data, colourToggle)); }; const onComplex = calledFromSelectAll => { @@ -434,12 +424,12 @@ const MoleculeView = memo( }; const removeSelectedSurface = () => { - dispatch(removeSurface(majorViewStage, data, colourToggle)); + dispatch(removeSurface(stage, data, colourToggle)); }; const addNewSurface = () => { - selectMoleculeSite(); - dispatch(addSurface(majorViewStage, data, colourToggle)); + selectMoleculeSite(data.site); + dispatch(addSurface(stage, data, colourToggle)); }; const onSurface = () => { @@ -451,12 +441,12 @@ const MoleculeView = memo( }; const removeSelectedDensity = () => { - dispatch(removeDensity(majorViewStage, data, colourToggle)); + dispatch(removeDensity(stage, data, colourToggle)); }; const addNewDensity = () => { - selectMoleculeSite(); - dispatch(addDensity(majorViewStage, data, colourToggle)); + selectMoleculeSite(data.site); + dispatch(addDensity(stage, data, colourToggle)); }; const onDensity = () => { @@ -468,12 +458,12 @@ const MoleculeView = memo( }; const removeSelectedVector = () => { - dispatch(removeVector(majorViewStage, data)); + dispatch(removeVector(stage, data)); }; const addNewVector = () => { - selectMoleculeSite(); - dispatch(addVector(majorViewStage, data)).catch(error => { + selectMoleculeSite(data.site); + dispatch(addVector(stage, data)).catch(error => { throw new Error(error); }); }; @@ -515,22 +505,22 @@ const MoleculeView = memo( const moveSelectedMolSettings = newItemDataset => { if (newItemDataset) { if (isLigandOn) { - dispatch(addLigand(majorViewStage, newItemDataset, colourToggle)); + dispatch(addLigand(stage, newItemDataset, colourToggle)); } if (isProteinOn) { - dispatch(addHitProtein(majorViewStage, newItemDataset, colourToggle)); + dispatch(addHitProtein(stage, newItemDataset, colourToggle)); } if (isComplexOn) { - dispatch(addComplex(majorViewStage, newItemDataset, colourToggle)); + dispatch(addComplex(stage, newItemDataset, colourToggle)); } if (isSurfaceOn) { - dispatch(addSurface(majorViewStage, newItemDataset, colourToggle)); + dispatch(addSurface(stage, newItemDataset, colourToggle)); } if (isDensityOn) { - dispatch(addDensity(majorViewStage, newItemDataset, colourToggle)); + dispatch(addDensity(stage, newItemDataset, colourToggle)); } if (isVectorOn) { - dispatch(addVector(majorViewStage, newItemDataset)).catch(error => { + dispatch(addVector(stage, newItemDataset)).catch(error => { throw new Error(error); }); } @@ -584,7 +574,7 @@ const MoleculeView = memo( variant="outlined" className={classes.myLocationButton} onClick={() => { - dispatch(centerOnLigandByMoleculeID(majorViewStage, data?.id)); + dispatch(centerOnLigandByMoleculeID(stage, data?.id)); }} disabled={disableUserInteraction || !isLigandOn} > diff --git a/js/components/preview/molecule/redux/selectors.js b/js/components/preview/molecule/redux/selectors.js index 031c81a7b..9fe926a7e 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'; -export const getMoleculeGroupLists = state => state.apiReducers.mol_group_list; +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;