Check molecule's site after clicking on a molecule's action

m2ms · Nov 5, 2020 · e2bdc56 · e2bdc56
1 parent 4c93ed5
commit e2bdc56
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 34 deletions.
diff --git 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}
     />,
 
     <IconButton

diff --git a/js/components/preview/molecule/moleculeView.js b/js/components/preview/molecule/moleculeView.js
@@ -31,6 +31,8 @@ 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 => ({
@@ -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 = (
       <SVGInline
         component="div"
@@ -344,12 +351,17 @@ const MoleculeView = memo(
     const current_style =
       isLigandOn || isProteinOn || isComplexOn || isSurfaceOn || isVectorOn ? selected_style : not_selected_style;
 
+    const selectMoleculeSite = () => {
+      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
@@ -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;
   }
-)
+);
diff --git a/js/components/preview/moleculeGroups/molGroupChecklist.js b/js/components/preview/moleculeGroups/molGroupChecklist.js
@@ -73,9 +73,7 @@ const molGroupChecklist = memo(({}) => {
                       <Checkbox
                         color="primary"
                         checked={checked}
-                        onChange={event =>
-                          dispatch(onSelectMoleculeGroup({ moleculeGroup, stageSummaryView, majorViewStage, event }))
-                        }
+                        onChange={event => dispatch(onSelectMoleculeGroup({ moleculeGroup, stageSummaryView, majorViewStage, selectGroup: event.target.checked }))}
                         disabled={disableUserInteraction}
                       />
                     </Grid>

diff --git 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 }));
   }
 };