Merge branch 'master' into #456

m2ms · Nov 27, 2020 · fa8ee46 · fa8ee46
2 parents 60e153e + 0e50fed
commit fa8ee46
Show file tree

Hide file tree

Showing 31 changed files with 1,166 additions and 112 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -5,19 +5,19 @@
   "version": "0.2.0",
   "configurations": [
     {
-      "type": "chrome",
-      "request": "launch",
-      "name": "Launch Chrome against localhost",
-      "url": "http://localhost:8080",
-      "webRoot": "${workspaceFolder}"
-    },
-    {
-      "name": "Attach to Chrome against localhost",
+      "name": "Attach to Chrome",
       "port": 9222,
       "request": "attach",
       "type": "pwa-chrome",
       "urlFilter": "http://localhost:8080/*",
       "webRoot": "${workspaceFolder}"
+    },
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      "url": "http://localhost:8080",
+      "webRoot": "${workspaceFolder}"
     }
   ]
 }
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,21 +318,27 @@ 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}
-                    />
-                  ))}
+                  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}
+                      />
+                    );
+                  })}
                 {!(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
@@ -37,7 +37,6 @@ import { ArrowDownward, ArrowUpward, MyLocation } from '@material-ui/icons';
 import { isNumber, isString } from 'lodash';
 import { SvgTooltip } from '../common';
 
-
 const useStyles = makeStyles(theme => ({
   container: {
     padding: theme.spacing(1) / 4,
@@ -162,6 +161,10 @@ const useStyles = makeStyles(theme => ({
   inheritWidth: {
     width: 'inherit'
   },
+  widthOverflow: {
+    maxWidth: '180px',
+    overflow: 'hidden'
+  },
   rank: {
     fontStyle: 'italic',
     fontSize: 7
@@ -541,9 +544,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));
                   }
                 }}
               />
@@ -554,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)}>

diff --git a/js/components/datasets/inspirationDialog.js b/js/components/datasets/inspirationDialog.js
@@ -218,29 +218,38 @@ export const InspirationDialog = memo(
       surface: removeSurface
     };
 
+    const selectMoleculeSite = moleculeGroupSite => {};
+
     const removeOfAllSelectedTypes = () => {
       proteinList?.forEach(moleculeID => {
-        const foundedMolecule = moleculeList?.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 = moleculeList?.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 = moleculeList?.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 = moleculeList?.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 = moleculeList?.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 = moleculeList?.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]));
       });
     };
@@ -386,19 +395,26 @@ 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}
-                    />
-                  ))}
+                  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}
+                      />
+                    );
+                  })}
                 {!(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
@@ -278,14 +278,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
@@ -28,7 +28,7 @@ import {
 } from './actions';
 import { base_url } from '../../routes/constants';
 import {
-  generateMoleculeId,
+  generateMoleculeCompoundId,
   generateHitProteinObject,
   generateComplexObject,
   generateSurfaceObject,
@@ -64,7 +64,7 @@ export const addDatasetHitProtein = (stage, data, colourToggle, datasetID) => di
     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 => {
@@ -77,7 +77,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) => dispatch => {
@@ -94,7 +94,7 @@ export const addDatasetComplex = (stage, data, colourToggle, datasetID) => dispa
     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 => {
@@ -104,7 +104,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) => dispatch => {
@@ -121,7 +121,7 @@ export const addDatasetSurface = (stage, data, colourToggle, datasetID) => dispa
     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 => {
@@ -131,7 +131,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) => dispatch => {
@@ -151,7 +151,7 @@ export const addDatasetLigand = (stage, data, colourToggle, datasetID) => dispat
     // 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 => {
@@ -161,7 +161,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 =>