Merge remote-tracking branch 'remotes/origin/#446' into allfunctionality

m2ms · Nov 5, 2020 · 2debcc1 · 2debcc1
2 parents 6330cbe + e2bdc56
commit 2debcc1
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 32 deletions.
diff --git a/js/components/preview/molecule/moleculeList.js b/js/components/preview/molecule/moleculeList.js
@@ -17,7 +17,7 @@ import {
   IconButton,
   ButtonGroup
 } from '@material-ui/core';
-import React, { useState, useEffect, useCallback, memo, useRef, useContext } from 'react';
+import React, { useState, useEffect, useCallback, memo, useRef, useContext, useMemo } from 'react';
 import { useDispatch, useSelector, useStore } from 'react-redux';
 import MoleculeView, { colourList } from './moleculeView';
 import { MoleculeListSortFilterDialog, filterMolecules, getAttrDefinition } from './moleculeListSortFilterDialog';
@@ -49,7 +49,7 @@ import {
 } from './redux/dispatchActions';
 import { DEFAULT_FILTER, PREDEFINED_FILTERS } from '../../../reducers/selection/constants';
 import { DeleteSweep, FilterList, Search } from '@material-ui/icons';
-import { selectJoinedMoleculeList } from './redux/selectors';
+import { selectAllMoleculeList, selectJoinedMoleculeList } from './redux/selectors';
 import { debounce } from 'lodash';
 import { MOL_ATTRIBUTES } from './redux/constants';
 import { setFilter } from '../../../reducers/selection/actions';
@@ -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: {
@@ -235,6 +234,7 @@ export const MoleculeList = memo(({ height, setFilterItemsHeight, filterItemsHei
   const sortDialogOpen = useSelector(state => state.previewReducers.molecule.sortDialogOpen);
   const filter = useSelector(state => state.selectionReducers.filter);
   const getJoinedMoleculeList = useSelector(state => selectJoinedMoleculeList(state));
+  const getAllMoleculeList = useSelector(state => selectAllMoleculeList(state));
   const selectedAll = useRef(false);
 
   const proteinList = useSelector(state => state.selectionReducers.proteinList);
@@ -278,7 +278,7 @@ export const MoleculeList = memo(({ height, setFilterItemsHeight, filterItemsHei
 
   let joinedMoleculeLists = [];
   if (searchString !== null) {
-    joinedMoleculeLists = getJoinedMoleculeList.filter(molecule =>
+    joinedMoleculeLists = getAllMoleculeList.filter(molecule =>
       molecule.protein_code.toLowerCase().includes(searchString.toLowerCase())
     );
   } else {
@@ -580,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 => ({
   container: {
@@ -214,6 +216,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);
@@ -227,7 +231,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;
@@ -323,6 +328,8 @@ const MoleculeView = memo(
       }
     }, [currentID, dispatch, searchMoleculeGroup]);
 
+    const moleculeGroup = moleculeGroups[data.site - 1];
+
     const svg_image = (
       <SVGInline
         component="div"
@@ -343,12 +350,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;
     };
 
@@ -369,12 +381,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 => {
@@ -394,12 +407,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 => {
@@ -419,11 +433,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 = () => {
@@ -435,11 +450,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 = () => {
@@ -451,11 +467,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);
       });
     };
@@ -497,22 +514,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);
           });
         }
@@ -566,7 +583,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;
@@ -32,3 +32,23 @@ export const selectJoinedMoleculeList = createSelector(
     return joinedMoleculeLists;
   }
 );
+
+export const selectAllMoleculeList = createSelector(
+  getAllMolecules,
+  getMoleculeGroupLists,
+  (all_mol_lists, mol_group_list) => {
+    const groupList = mol_group_list || [];
+    const allMoleculesList = [];
+    groupList.forEach((site, index) => {
+      const siteMolecules = (all_mol_lists || {})[site.id];
+
+      if (siteMolecules) {
+        siteMolecules.forEach(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 }));
   }
 };