Merge remote-tracking branch 'remotes/origin/master' into #453

# Conflicts:
#	js/components/preview/molecule/moleculeList.js

js/components/datasets/crossReferenceDialog.js

@@ -60,7 +60,8 @@ const useStyles = makeStyles(theme => ({
   },
   content: {
     overflowY: 'auto',
-    height: 214
+    height: 214,
+    width: 'fit-content'
   },
   search: {
     margin: theme.spacing(1),

js/components/datasets/datasetMoleculeView.js

@@ -161,6 +161,10 @@ const useStyles = makeStyles(theme => ({
   inheritWidth: {
     width: 'inherit'
   },
+  widthOverflow: {
+    maxWidth: '180px',
+    overflow: 'hidden'
+  },
   rank: {
     fontStyle: 'italic',
     fontSize: 7
@@ -553,7 +557,13 @@ export const DatasetMoleculeView = memo(
           </Grid>
           <Grid item container className={classes.detailsCol} justify="space-between" direction="row">
             {/* Title label */}
-            <Grid item xs={!showCrossReferenceModal && hideFButton ? 8 : 7} container direction="column">
+            <Grid
+              item
+              xs={!showCrossReferenceModal && hideFButton ? 8 : 7}
+              container
+              direction="column"
+              className={!showCrossReferenceModal && hideFButton ? classes.widthOverflow : ''}
+            >
               <Grid item className={classes.inheritWidth}>
                 <Tooltip title={moleculeTitle} placement="bottom-start">
                   <div className={classNames(classes.moleculeTitleLabel, isCheckedToBuy && classes.selectedMolecule)}>

js/components/datasets/inspirationDialog.js

@@ -218,6 +218,8 @@ export const InspirationDialog = memo(
       surface: removeSurface
     };
 
+    const selectMoleculeSite = moleculeGroupSite => {};
+
     const removeOfAllSelectedTypes = () => {
       proteinList?.forEach(moleculeID => {
         let foundedMolecule = moleculeList?.find(mol => mol.id === moleculeID);
@@ -409,6 +411,7 @@ export const InspirationDialog = memo(
                         previousItemData={previousData}
                         nextItemData={nextData}
                         removeOfAllSelectedTypes={removeOfAllSelectedTypes}
+                        selectMoleculeSite={selectMoleculeSite}
                       />
                     );
                   })}

js/components/datasets/redux/selectors.js

@@ -254,20 +254,24 @@ export const getFilteredDatasetMoleculeList = createSelector(
         for (let prioAttr of sortedAttributes) {
           const order = filterProperties[prioAttr].order;
 
-          const scoreValueOfA = Object.keys(a.numerical_scores).find(key => key === prioAttr) && a.numerical_scores[prioAttr];
-          scoreValueOfA = scoreValueOfA || (Object.keys(a.text_scores).find(key => key === prioAttr) && a.text_scores[prioAttr]);
-          const scoreValueOfB = Object.keys(b.numerical_scores).find(key => key === prioAttr) && b.numerical_scores[prioAttr];
-          scoreValueOfB = scoreValueOfB || (Object.keys(b.text_scores).find(key => key === prioAttr) && b.text_scores[prioAttr]);
-
-          if (scoreValueOfA === "Y") {
+          const scoreValueOfA =
+            Object.keys(a.numerical_scores).find(key => key === prioAttr) && a.numerical_scores[prioAttr];
+          scoreValueOfA =
+            scoreValueOfA || (Object.keys(a.text_scores).find(key => key === prioAttr) && a.text_scores[prioAttr]);
+          const scoreValueOfB =
+            Object.keys(b.numerical_scores).find(key => key === prioAttr) && b.numerical_scores[prioAttr];
+          scoreValueOfB =
+            scoreValueOfB || (Object.keys(b.text_scores).find(key => key === prioAttr) && b.text_scores[prioAttr]);
+
+          if (scoreValueOfA === 'Y') {
             scoreValueOfA = 1;
-          } else if (scoreValueOfA === "N") {
+          } else if (scoreValueOfA === 'N') {
             scoreValueOfA = 0;
           }
 
-          if (scoreValueOfB === "Y") {
+          if (scoreValueOfB === 'Y') {
             scoreValueOfB = 1;
-          } else if (scoreValueOfB === "N") {
+          } else if (scoreValueOfB === 'N') {
             scoreValueOfB = 0;
           }
 
@@ -314,7 +318,10 @@ export const getCrossReferenceCompoundListByCompoundName = createSelector(
     Object.keys(moleculesDatasetMap).forEach(datasetID => {
       const currentList = moleculesDatasetMap[datasetID];
       if (currentList && Array.isArray(currentList)) {
-        results.push({ molecule: currentList.find(item => item.name === compoundName), datasetID });
+        let molecule = currentList.find(item => item.name === compoundName);
+        if (molecule) {
+          results.push({ molecule, datasetID });
+        }
       }
     });
     return results;

js/components/direct/constants.js

@@ -1,4 +1,5 @@
 export const URL_TOKENS = {
     target: 'target',
-    molecules: 'mols'
+    molecules: 'mols',
+    exact: 'exact'
 };

js/components/direct/directDisplay.js

@@ -65,12 +65,16 @@ export const DirectDisplay = memo(props => {
                       currentMolecule.V = true;
                       break;
                     default:
-                      currentMolecule = { name: part, L: true, P: false, C: false, S: false, V: false };
-                      molecules.push(currentMolecule);
+                      if (part.toLowerCase() === URL_TOKENS.exact) {
+                        currentMolecule.exact = true;
+                      } else {
+                        currentMolecule = { name: part, L: true, P: false, C: false, S: false, V: false, exact: false };
+                        molecules.push(currentMolecule);
+                      }
                       break;
                   }
                 } else {
-                  currentMolecule = { name: part, L: true, P: false, C: false, S: false, V: false };
+                  currentMolecule = { name: part, L: true, P: false, C: false, S: false, V: false, exact: false };
                   molecules.push(currentMolecule);
                 }
               } else {

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,8 @@ 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';
+import {selectMoleculeGroup} from '../moleculeGroups/redux/dispatchActions';
+import { onSelectMoleculeGroup } from '../moleculeGroups/redux/dispatchActions';
 
 const useStyles = makeStyles(theme => ({
   container: {
@@ -235,6 +236,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);
@@ -261,7 +263,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();
@@ -279,7 +281,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 {
@@ -360,11 +362,11 @@ export const MoleculeList = memo(({ height, setFilterItemsHeight, filterItemsHei
     if ((proteinsHasLoaded === true || proteinsHasLoaded === null) && allMolsGroupsCount > 0) {
       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 &&
@@ -373,14 +375,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,
@@ -478,41 +480,47 @@ 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;
   };
 
   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]));
     });
   };
 
@@ -583,13 +591,13 @@ export const MoleculeList = memo(({ height, setFilterItemsHeight, filterItemsHei
         )
       }}
       onChange={handleSearch}
-      disabled={disableUserInteraction || (getJoinedMoleculeList && getJoinedMoleculeList.length === 0)}
+      disabled={disableUserInteraction}
     />,
 
     <IconButton
       color={'inherit'}
       disabled={!(object_selection || []).length}
-      onClick={() => dispatch(hideAllSelectedMolecules(stage, joinedMoleculeLists))}
+      onClick={() => dispatch(hideAllSelectedMolecules(majorViewStage, joinedMoleculeLists))}
     >
       <Tooltip title="Hide all">
         <DeleteSweep />
@@ -792,6 +800,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}
                     />
                   ))}
                 </InfiniteScroll>

js/components/preview/molecule/moleculeView.js

@@ -204,7 +204,8 @@ const MoleculeView = memo(
     index,
     previousItemData,
     nextItemData,
-    removeOfAllSelectedTypes
+    removeOfAllSelectedTypes,
+    selectMoleculeSite
   }) => {
     // const [countOfVectors, setCountOfVectors] = useState('-');
     // const [cmpds, setCmpds] = useState('-');
@@ -344,6 +345,9 @@ const MoleculeView = memo(
       isLigandOn || isProteinOn || isComplexOn || isSurfaceOn || isVectorOn ? selected_style : not_selected_style;
 
     const addNewLigand = () => {
+      if (selectMoleculeSite) {
+        selectMoleculeSite(data.site);
+      }
       dispatch(addLigand(stage, data, colourToggle));
     };
 
@@ -374,6 +378,9 @@ const MoleculeView = memo(
     };
 
     const addNewProtein = () => {
+      if (selectMoleculeSite) {
+        selectMoleculeSite(data.site);
+      }
       dispatch(addHitProtein(stage, data, colourToggle));
     };
 
@@ -399,6 +406,9 @@ const MoleculeView = memo(
     };
 
     const addNewComplex = () => {
+      if (selectMoleculeSite) {
+        selectMoleculeSite(data.site);
+      }
       dispatch(addComplex(stage, data, colourToggle));
     };
 
@@ -423,6 +433,9 @@ const MoleculeView = memo(
     };
 
     const addNewSurface = () => {
+      if (selectMoleculeSite) {
+        selectMoleculeSite(data.site);
+      }
       dispatch(addSurface(stage, data, colourToggle));
     };
 
@@ -439,6 +452,9 @@ const MoleculeView = memo(
     };
 
     const addNewDensity = () => {
+      if (selectMoleculeSite) {
+        selectMoleculeSite(data.site);
+      }
       dispatch(addDensity(stage, data, colourToggle));
     };
 
@@ -455,6 +471,9 @@ const MoleculeView = memo(
     };
 
     const addNewVector = () => {
+      if (selectMoleculeSite) {
+        selectMoleculeSite(data.site);
+      }
       dispatch(addVector(stage, data)).catch(error => {
         throw new Error(error);
       });
@@ -529,7 +548,7 @@ const MoleculeView = memo(
       moveSelectedMolSettings(previousItemData);
     };
 
-    let moleculeTitle = data?.protein_code.replace(`${target_on_name}-`, '');
+    let moleculeTitle = data?.protein_code.replace(new RegExp(`${target_on_name}-`, 'i'), '');
 
     return (
       <>