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

m2ms · Nov 25, 2020 · 36c1f58 · 36c1f58
2 parents 4c07a93 + 54f1539
commit 36c1f58
Show file tree

Hide file tree

Showing 46 changed files with 1,588 additions and 188 deletions.
diff --git a/js/components/common/Modal/index.js b/js/components/common/Modal/index.js
@@ -24,7 +24,18 @@ const useStyles = makeStyles(theme => ({
 }));
 
 export const Modal = memo(
-  ({ children, open, loading, onClose, noPadding, resizable, onResize, otherClasses, ...rest }) => {
+  ({
+    children,
+    open,
+    loading,
+    onClose,
+    noPadding,
+    resizable,
+    onResize,
+    otherClasses,
+    otherContentClasses,
+    ...rest
+  }) => {
     const classes = useStyles();
     const content = loading ? <CircularProgress /> : children;
 
@@ -48,7 +59,13 @@ export const Modal = memo(
             { [otherClasses]: !!otherClasses }
           )}
         >
-          <div className={noPadding ? undefined : classes.withPadding}>{content}</div>
+          <div
+            className={classNames(noPadding ? undefined : classes.withPadding, {
+              [otherContentClasses]: !!otherContentClasses
+            })}
+          >
+            {content}
+          </div>
         </div>
       </MaterialModal>
     );

diff --git a/js/components/common/Surfaces/Panel/index.js b/js/components/common/Surfaces/Panel/index.js
@@ -13,7 +13,8 @@ import ExpandLess from '@material-ui/icons/ExpandLess';
 
 const useStyles = makeStyles(theme => ({
   root: {
-    backgroundColor: theme.palette.background.paper
+    backgroundColor: theme.palette.background.paper,
+    height: '100%'
   },
   body: {
     padding: theme.spacing(1)
@@ -113,7 +114,7 @@ export const Panel = memo(
                 {title && (
                   <Grid
                     item
-                    xs={hasExpansion || headerActions ? (headerActions && headerActions.length > 2 ? 4 : 6) : 12}
+                    xs={hasExpansion || headerActions ? (headerActions && headerActions.length > 1 ? 4 : 6) : 12}
                     className={classes.headerTitle}
                   >
                     {withTooltip ? (
@@ -135,7 +136,7 @@ export const Panel = memo(
                     container
                     direction="row"
                     justify="flex-end"
-                    xs={title ? (headerActions && headerActions.length > 2 ? 8 : 6) : 12}
+                    xs={title ? (headerActions && headerActions.length > 1 ? 8 : 6) : 12}
                   >
                     {headerActions &&
                       headerActions.map((action, index) => (

diff --git a/js/components/datasets/crossReferenceDialog.js b/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),
@@ -317,26 +318,32 @@ export const CrossReferenceDialog = memo(
               </Grid>
               <div className={classes.content}>
                 {moleculeList.length > 0 &&
-                  moleculeList.map((data, index, array) => (
-                    <DatasetMoleculeView
-                      key={index}
-                      index={index}
-                      imageHeight={imgHeight}
-                      imageWidth={imgWidth}
-                      data={data.molecule}
-                      datasetID={data.datasetID}
-                      hideFButton
-                      showDatasetName
-                      previousItemData={index > 0 && array[index - 1]}
-                      nextItemData={index < array?.length && array[index + 1]}
-                      removeOfAllSelectedTypes={removeOfAllSelectedTypes}
-                      L={ligandList.includes(data.id)}
-                      P={proteinList.includes(data.id)}
-                      C={complexList.includes(data.id)}
-                      S={false}
-                      V={false}
-                    />
-                  ))}
+                  moleculeList.map((data, index, array) => {
+                    let molecule = Object.assign({ isCrossReference: true }, data.molecule);
+                    let previousData = index > 0 && Object.assign({ isCrossReference: true }, array[index - 1]);
+                    let nextData = index < array?.length && Object.assign({ isCrossReference: true }, array[index + 1]);
+
+                    return (
+                      <DatasetMoleculeView
+                        key={index}
+                        index={index}
+                        imageHeight={imgHeight}
+                        imageWidth={imgWidth}
+                        data={molecule}
+                        datasetID={data.datasetID}
+                        hideFButton
+                        showDatasetName
+                        previousItemData={previousData}
+                        nextItemData={nextData}
+                        removeOfAllSelectedTypes={removeOfAllSelectedTypes}
+                        L={ligandList.includes(data.id)}
+                        P={proteinList.includes(data.id)}
+                        C={complexList.includes(data.id)}
+                        S={false}
+                        V={false}
+                      />
+                    );
+                  })}
                 {!(moleculeList.length > 0) && (
                   <Grid container justify="center" alignItems="center" direction="row" className={classes.notFound}>
                     <Grid item>

diff --git a/js/components/datasets/datasetMoleculeView.js b/js/components/datasets/datasetMoleculeView.js
@@ -165,6 +165,10 @@ const useStyles = makeStyles(theme => ({
   inheritWidth: {
     width: 'inherit'
   },
+  widthOverflow: {
+    maxWidth: '180px',
+    overflow: 'hidden'
+  },
   rank: {
     fontStyle: 'italic',
     fontSize: 7
@@ -582,9 +586,9 @@ export const DatasetMoleculeView = memo(
                 onChange={e => {
                   const result = e.target.checked;
                   if (result) {
-                    dispatch(appendMoleculeToCompoundsOfDatasetToBuy(datasetID, currentID));
+                    dispatch(appendMoleculeToCompoundsOfDatasetToBuy(datasetID, currentID, moleculeTitle));
                   } else {
-                    dispatch(removeMoleculeFromCompoundsOfDatasetToBuy(datasetID, currentID));
+                    dispatch(removeMoleculeFromCompoundsOfDatasetToBuy(datasetID, currentID, moleculeTitle));
                   }
                 }}
               />
@@ -595,7 +599,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)}>

diff --git a/js/components/datasets/inspirationDialog.js b/js/components/datasets/inspirationDialog.js
@@ -221,31 +221,40 @@ export const InspirationDialog = memo(
       surface: removeSurface
     };
 
+    const selectMoleculeSite = moleculeGroupSite => {};
+
     const removeOfAllSelectedTypes = () => {
       let molecules = [...getJoinedMoleculeList, ...allInspirationMoleculeDataList];
 
       proteinList?.forEach(moleculeID => {
-        const foundedMolecule = molecules?.find(mol => mol.id === moleculeID);
+        let foundedMolecule = moleculeList?.find(mol => mol.id === moleculeID);
+        foundedMolecule = foundedMolecule && Object.assign({ isInspiration: true }, foundedMolecule);
+
         dispatch(removeHitProtein(stage, foundedMolecule, colourList[foundedMolecule.id % colourList.length]));
       });
       complexList?.forEach(moleculeID => {
-        const foundedMolecule = molecules?.find(mol => mol.id === moleculeID);
+        let foundedMolecule = moleculeList?.find(mol => mol.id === moleculeID);
+        foundedMolecule = foundedMolecule && Object.assign({ isInspiration: true }, foundedMolecule);
         dispatch(removeComplex(stage, foundedMolecule, colourList[foundedMolecule.id % colourList.length]));
       });
       ligandList?.forEach(moleculeID => {
-        const foundedMolecule = molecules?.find(mol => mol.id === moleculeID);
+        let foundedMolecule = moleculeList?.find(mol => mol.id === moleculeID);
+        foundedMolecule = foundedMolecule && Object.assign({ isInspiration: true }, foundedMolecule);
         dispatch(removeLigand(stage, foundedMolecule, colourList[foundedMolecule.id % colourList.length]));
       });
       surfaceList?.forEach(moleculeID => {
-        const foundedMolecule = molecules?.find(mol => mol.id === moleculeID);
+        let foundedMolecule = moleculeList?.find(mol => mol.id === moleculeID);
+        foundedMolecule = foundedMolecule && Object.assign({ isInspiration: true }, foundedMolecule);
         dispatch(removeSurface(stage, foundedMolecule, colourList[foundedMolecule.id % colourList.length]));
       });
       densityList?.forEach(moleculeID => {
-        const foundedMolecule = molecules?.find(mol => mol.id === moleculeID);
+        let foundedMolecule = moleculeList?.find(mol => mol.id === moleculeID);
+        foundedMolecule = foundedMolecule && Object.assign({ isInspiration: true }, foundedMolecule);
         dispatch(removeDensity(stage, foundedMolecule, colourList[foundedMolecule.id % colourList.length]));
       });
       vectorOnList?.forEach(moleculeID => {
-        const foundedMolecule = molecules?.find(mol => mol.id === moleculeID);
+        let foundedMolecule = moleculeList?.find(mol => mol.id === moleculeID);
+        foundedMolecule = foundedMolecule && Object.assign({ isInspiration: true }, foundedMolecule);
         dispatch(removeVector(stage, foundedMolecule, colourList[foundedMolecule.id % colourList.length]));
       });
     };
@@ -391,24 +400,31 @@ export const InspirationDialog = memo(
               </Grid>
               <div className={classes.content}>
                 {moleculeList.length > 0 &&
-                  moleculeList.map((molecule, index, array) => (
-                    <MoleculeView
-                      key={index}
-                      index={index}
-                      imageHeight={imgHeight}
-                      imageWidth={imgWidth}
-                      data={molecule}
-                      searchMoleculeGroup
-                      previousItemData={index > 0 && array[index - 1]}
-                      nextItemData={index < array?.length && array[index + 1]}
-                      removeOfAllSelectedTypes={removeOfAllSelectedTypes}
-                      L={ligandList.includes(molecule.id)}
-                      P={proteinList.includes(molecule.id)}
-                      C={complexList.includes(molecule.id)}
-                      S={surfaceList.includes(molecule.id)}
-                      V={vectorOnList.includes(molecule.id)}
-                    />
-                  ))}
+                  moleculeList.map((molecule, index, array) => {
+                    let data = Object.assign({ isInspiration: true }, molecule);
+                    let previousData = index > 0 && Object.assign({ isInspiration: true }, array[index - 1]);
+                    let nextData = index < array?.length && Object.assign({ isInspiration: true }, array[index + 1]);
+
+                    return (
+                      <MoleculeView
+                        key={index}
+                        index={index}
+                        imageHeight={imgHeight}
+                        imageWidth={imgWidth}
+                        data={data}
+                        searchMoleculeGroup
+                        previousItemData={previousData}
+                        nextItemData={nextData}
+                        removeOfAllSelectedTypes={removeOfAllSelectedTypes}
+                        selectMoleculeSite={selectMoleculeSite}
+                        L={ligandList.includes(molecule.id)}
+                        P={proteinList.includes(molecule.id)}
+                        C={complexList.includes(molecule.id)}
+                        S={surfaceList.includes(molecule.id)}
+                        V={vectorOnList.includes(molecule.id)}
+                      />
+                    );
+                  })}
                 {!(moleculeList.length > 0) && (
                   <Grid container justify="center" alignItems="center" direction="row" className={classes.notFound}>
                     <Grid item>

diff --git a/js/components/datasets/redux/actions.js b/js/components/datasets/redux/actions.js
@@ -288,14 +288,14 @@ export const setFilterWithInspirations = isChecked => ({
   payload: isChecked
 });
 
-export const appendMoleculeToCompoundsOfDatasetToBuy = (datasetID, moleculeID) => ({
+export const appendMoleculeToCompoundsOfDatasetToBuy = (datasetID, moleculeID, moleculeTitle) => ({
   type: constants.APPEND_MOLECULE_TO_COMPOUNDS_TO_BUY_OF_DATASET,
-  payload: { datasetID, moleculeID }
+  payload: { datasetID, moleculeID, moleculeTitle }
 });
 
-export const removeMoleculeFromCompoundsOfDatasetToBuy = (datasetID, moleculeID) => ({
+export const removeMoleculeFromCompoundsOfDatasetToBuy = (datasetID, moleculeID, moleculeTitle) => ({
   type: constants.REMOVE_MOLECULE_FROM_COMPOUNDS_TO_BUY_OF_DATASET,
-  payload: { datasetID, moleculeID }
+  payload: { datasetID, moleculeID, moleculeTitle }
 });
 
 export const reloadDatasetsReducer = savedDatasetsReducers => {

diff --git a/js/components/datasets/redux/dispatchActions.js b/js/components/datasets/redux/dispatchActions.js
@@ -30,7 +30,7 @@ import {
 } from './actions';
 import { base_url } from '../../routes/constants';
 import {
-  generateMoleculeId,
+  generateMoleculeCompoundId,
   generateHitProteinObject,
   generateComplexObject,
   generateSurfaceObject,
@@ -78,7 +78,7 @@ export const addDatasetHitProtein = (stage, data, colourToggle, datasetID, repre
     const currentOrientation = stage.viewerControls.getOrientation();
     dispatch(setOrientation(VIEWS.MAJOR_VIEW, currentOrientation));
   });
-  dispatch(appendProteinList(datasetID, generateMoleculeId(data)));
+  dispatch(appendProteinList(datasetID, generateMoleculeCompoundId(data)));
 };
 
 export const removeDatasetHitProtein = (stage, data, colourToggle, datasetID) => dispatch => {
@@ -91,7 +91,7 @@ export const removeDatasetHitProtein = (stage, data, colourToggle, datasetID) =>
       stage
     )
   );
-  dispatch(removeFromProteinList(datasetID, generateMoleculeId(data)));
+  dispatch(removeFromProteinList(datasetID, generateMoleculeCompoundId(data)));
 };
 
 export const addDatasetComplex = (stage, data, colourToggle, datasetID, representations = undefined) => dispatch => {
@@ -109,7 +109,7 @@ export const addDatasetComplex = (stage, data, colourToggle, datasetID, represen
     const currentOrientation = stage.viewerControls.getOrientation();
     dispatch(setOrientation(VIEWS.MAJOR_VIEW, currentOrientation));
   });
-  dispatch(appendComplexList(datasetID, generateMoleculeId(data)));
+  dispatch(appendComplexList(datasetID, generateMoleculeCompoundId(data)));
 };
 
 export const removeDatasetComplex = (stage, data, colourToggle, datasetID) => dispatch => {
@@ -119,7 +119,7 @@ export const removeDatasetComplex = (stage, data, colourToggle, datasetID) => di
       stage
     )
   );
-  dispatch(removeFromComplexList(datasetID, generateMoleculeId(data)));
+  dispatch(removeFromComplexList(datasetID, generateMoleculeCompoundId(data)));
 };
 
 export const addDatasetSurface = (stage, data, colourToggle, datasetID, representations = undefined) => dispatch => {
@@ -137,7 +137,7 @@ export const addDatasetSurface = (stage, data, colourToggle, datasetID, represen
     const currentOrientation = stage.viewerControls.getOrientation();
     dispatch(setOrientation(VIEWS.MAJOR_VIEW, currentOrientation));
   });
-  dispatch(appendSurfaceList(datasetID, generateMoleculeId(data)));
+  dispatch(appendSurfaceList(datasetID, generateMoleculeCompoundId(data)));
 };
 
 export const removeDatasetSurface = (stage, data, colourToggle, datasetID) => dispatch => {
@@ -147,7 +147,7 @@ export const removeDatasetSurface = (stage, data, colourToggle, datasetID) => di
       stage
     )
   );
-  dispatch(removeFromSurfaceList(datasetID, generateMoleculeId(data)));
+  dispatch(removeFromSurfaceList(datasetID, generateMoleculeCompoundId(data)));
 };
 
 export const addDatasetLigand = (stage, data, colourToggle, datasetID, representations = undefined) => dispatch => {
@@ -168,7 +168,7 @@ export const addDatasetLigand = (stage, data, colourToggle, datasetID, represent
     // keep current orientation of NGL View
     stage.viewerControls.orient(currentOrientation);
   });
-  dispatch(appendLigandList(datasetID, generateMoleculeId(data)));
+  dispatch(appendLigandList(datasetID, generateMoleculeCompoundId(data)));
 };
 
 export const removeDatasetLigand = (stage, data, colourToggle, datasetID) => dispatch => {
@@ -178,7 +178,7 @@ export const removeDatasetLigand = (stage, data, colourToggle, datasetID) => dis
       stage
     )
   );
-  dispatch(removeFromLigandList(datasetID, generateMoleculeId(data)));
+  dispatch(removeFromLigandList(datasetID, generateMoleculeCompoundId(data)));
 };
 
 export const loadDataSets = targetId => dispatch =>

diff --git a/js/components/datasets/redux/selectors.js b/js/components/datasets/redux/selectors.js
@@ -330,7 +330,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;