Merge branch '#384' into #369

# Conflicts:
#	js/components/datasets/customDatasetList.js
#	js/components/datasets/datasetMoleculeView.js
#	js/components/datasets/redux/dispatchActions.js

Author: tibor-postek-m2ms

js/components/common/Modal/AlertModal/index.js

@@ -0,0 +1,22 @@
+import React, { memo } from 'react';
+import { DialogTitle, DialogContent, DialogContentText, DialogActions, Button } from '@material-ui/core';
+import Modal from '../index';
+
+export const AlertModal = memo(({ open, title, description, handleOnOk, handleOnCancel }) => {
+  return (
+    <Modal open={open}>
+      <DialogTitle>{title}</DialogTitle>
+      <DialogContent>
+        <DialogContentText>{description}</DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={handleOnCancel} color="secondary" variant="contained">
+          Cancel
+        </Button>
+        <Button onClick={handleOnOk} color="primary" autoFocus variant="contained">
+          OK
+        </Button>
+      </DialogActions>
+    </Modal>
+  );
+});

js/components/datasets/crossReferenceDialog.js

@@ -8,12 +8,16 @@ import {
   handleAllLigandsOfCrossReferenceDialog,
   resetCrossReferenceDialog,
   removeOrAddAllHitProteinsOfList,
-  removeOrAddAllComplexesOfList
+  removeOrAddAllComplexesOfList,
+  removeDatasetLigand,
+  removeDatasetHitProtein,
+  removeDatasetComplex,
+  removeDatasetSurface
 } from './redux/dispatchActions';
 import { Button } from '../common/Inputs/Button';
 import classNames from 'classnames';
 import { useDisableUserInteraction } from '../helpers/useEnableUserInteracion';
-import { DatasetMoleculeView } from './datasetMoleculeView';
+import { colourList, DatasetMoleculeView } from './datasetMoleculeView';
 import { NglContext } from '../nglView/nglProvider';
 import { VIEWS } from '../../constants/constants';
 import { Panel } from '../common/Surfaces/Panel';
@@ -136,6 +140,66 @@ export const CrossReferenceDialog = memo(
     const proteinList = useSelector(state => getListOfSelectedProteinOfAllDatasets(state));
     const complexList = useSelector(state => getListOfSelectedComplexOfAllDatasets(state));
 
+    const ligandListAllDatasets = useSelector(state => state.datasetsReducers.ligandLists);
+    const proteinListAllDatasets = useSelector(state => state.datasetsReducers.proteinLists);
+    const complexListAllDatasets = useSelector(state => state.datasetsReducers.complexLists);
+    const surfaceListAllDatasets = useSelector(state => state.datasetsReducers.surfaceLists);
+
+    const removeOfAllSelectedTypes = () => {
+      Object.keys(ligandListAllDatasets).forEach(datasetKey => {
+        ligandListAllDatasets[datasetKey]?.forEach(moleculeID => {
+          const foundedMolecule = moleculeList?.find(mol => mol?.molecule?.id === moleculeID);
+          dispatch(
+            removeDatasetLigand(
+              stage,
+              foundedMolecule?.molecule,
+              colourList[foundedMolecule?.molecule?.id % colourList.length],
+              datasetKey
+            )
+          );
+        });
+      });
+      Object.keys(proteinListAllDatasets).forEach(datasetKey => {
+        proteinListAllDatasets[datasetKey]?.forEach(moleculeID => {
+          const foundedMolecule = moleculeList?.find(mol => mol?.molecule?.id === moleculeID);
+          dispatch(
+            removeDatasetHitProtein(
+              stage,
+              foundedMolecule?.molecule,
+              colourList[foundedMolecule?.molecule?.id % colourList.length],
+              datasetKey
+            )
+          );
+        });
+      });
+      Object.keys(complexListAllDatasets).forEach(datasetKey => {
+        complexListAllDatasets[datasetKey]?.forEach(moleculeID => {
+          const foundedMolecule = moleculeList?.find(mol => mol?.molecule?.id === moleculeID);
+          dispatch(
+            removeDatasetComplex(
+              stage,
+              foundedMolecule?.molecule,
+              colourList[foundedMolecule?.molecule?.id % colourList.length],
+              datasetKey
+            )
+          );
+        });
+      });
+      Object.keys(surfaceListAllDatasets).forEach(datasetKey => {
+        surfaceListAllDatasets[datasetKey]?.forEach(moleculeID => {
+          const foundedMolecule = moleculeList?.find(mol => mol?.molecule?.id === moleculeID);
+          dispatch(
+            removeDatasetSurface(
+              stage,
+              foundedMolecule?.molecule,
+              colourList[foundedMolecule?.molecule?.id % colourList.length],
+              datasetKey
+            )
+          );
+        });
+      });
+    };
+
     useEffect(() => {
       if (moleculeList && Array.isArray(moleculeList) && moleculeList.length > 0) {
         // moleculeList has following structure:
@@ -253,15 +317,19 @@ export const CrossReferenceDialog = memo(
               </Grid>
               <div className={classes.content}>
                 {moleculeList.length > 0 &&
-                  moleculeList.map((data, index) => (
+                  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.length > 0) && (

js/components/datasets/datasetMoleculeList.js

@@ -44,6 +44,7 @@ import { getFilteredDatasetMoleculeList } from './redux/selectors';
 import { debounce } from 'lodash';
 import { InspirationDialog } from './inspirationDialog';
 import { CrossReferenceDialog } from './crossReferenceDialog';
+import { AlertModal } from '../common/Modal/AlertModal';
 
 const useStyles = makeStyles(theme => ({
   container: {
@@ -182,6 +183,11 @@ const useStyles = makeStyles(theme => ({
   },
   loading: {
     paddingTop: theme.spacing(2)
+  },
+  total: {
+    ...theme.typography.button,
+    color: theme.palette.primary.main,
+    fontStyle: 'italic'
   }
 }));
 
@@ -255,8 +261,9 @@ export const DatasetMoleculeList = memo(
     const ligandList = useSelector(state => state.datasetsReducers.ligandLists[datasetID]);
     const proteinList = useSelector(state => state.datasetsReducers.proteinLists[datasetID]);
     const complexList = useSelector(state => state.datasetsReducers.complexLists[datasetID]);
-    const isLigandOn = (ligandList && ligandList.length > 0) || false;
+    const surfaceList = useSelector(state => state.datasetsReducers.surfaceLists[datasetID]);
 
+    const isLigandOn = (ligandList && ligandList.length > 0) || false;
     const isProteinOn = (proteinList && proteinList.length > 0) || false;
     const isComplexOn = (complexList && complexList.length > 0) || false;
     const addType = {
@@ -273,6 +280,33 @@ export const DatasetMoleculeList = memo(
       surface: removeDatasetSurface
     };
 
+    const removeOfAllSelectedTypes = () => {
+      ligandList?.forEach(moleculeID => {
+        const foundedMolecule = joinedMoleculeLists?.find(mol => mol.id === moleculeID);
+        dispatch(
+          removeDatasetLigand(stage, foundedMolecule, colourList[foundedMolecule.id % colourList.length], datasetID)
+        );
+      });
+      proteinList?.forEach(moleculeID => {
+        const foundedMolecule = joinedMoleculeLists?.find(mol => mol.id === moleculeID);
+        dispatch(
+          removeDatasetHitProtein(stage, foundedMolecule, colourList[foundedMolecule.id % colourList.length], datasetID)
+        );
+      });
+      complexList?.forEach(moleculeID => {
+        const foundedMolecule = joinedMoleculeLists?.find(mol => mol.id === moleculeID);
+        dispatch(
+          removeDatasetComplex(stage, foundedMolecule, colourList[foundedMolecule.id % colourList.length], datasetID)
+        );
+      });
+      surfaceList?.forEach(moleculeID => {
+        const foundedMolecule = joinedMoleculeLists?.find(mol => mol.id === moleculeID);
+        dispatch(
+          removeDatasetSurface(stage, foundedMolecule, colourList[foundedMolecule.id % colourList.length], datasetID)
+        );
+      });
+    };
+
     // TODO "currentMolecules" do not need to correspondent to selections in {type}List
     // TODO so this could lead to inconsistend behaviour while scrolling
     // TODO maybe change "currentMolecules.forEach" to "{type}List.forEach"
@@ -365,6 +399,8 @@ export const DatasetMoleculeList = memo(
     const inspirationDialogRef = useRef();
     const scrollBarRef = useRef();
 
+    const [isOpenAlert, setIsOpenAlert] = useState(false);
+
     return (
       <ComputeSize
         componentRef={filterRef.current}
@@ -373,6 +409,18 @@ export const DatasetMoleculeList = memo(
         forceCompute={isActiveFilter}
       >
         <Panel hasHeader title={title} withTooltip headerActions={actions}>
+          <AlertModal
+            title="Are you sure?"
+            description={`Loading of ${joinedMoleculeLists?.length} may take a long time`}
+            open={isOpenAlert}
+            handleOnOk={() => {
+              setNextXMolecules(joinedMoleculeLists?.length || 0);
+              setIsOpenAlert(false);
+            }}
+            handleOnCancel={() => {
+              setIsOpenAlert(false);
+            }}
+          />
           {sortDialogOpen && (
             <DatasetFilter
               open={sortDialogOpen}
@@ -550,7 +598,7 @@ export const DatasetMoleculeList = memo(
                     useWindow={false}
                   >
                     {datasetID &&
-                      currentMolecules.map((data, index) => (
+                      currentMolecules.map((data, index, array) => (
                         <DatasetMoleculeView
                           key={index}
                           index={index}
@@ -560,12 +608,18 @@ export const DatasetMoleculeList = memo(
                           datasetID={datasetID}
                           setRef={setSelectedMoleculeRef}
                           showCrossReferenceModal
+                          previousItemData={index > 0 && array[index - 1]}
+                          nextItemData={index < array?.length && array[index + 1]}
+                          removeOfAllSelectedTypes={removeOfAllSelectedTypes}
                         />
                       ))}
                   </InfiniteScroll>
                 </Grid>
                 <Grid item>
-                  <Grid container justify="flex-end" direction="row">
+                  <Grid container justify="space-between" alignItems="center" direction="row">
+                    <Grid item>
+                      <span className={classes.total}>{`Total ${joinedMoleculeLists?.length}`}</span>
+                    </Grid>
                     <Grid item>
                       <ButtonGroup
                         variant="text"
@@ -589,7 +643,11 @@ export const DatasetMoleculeList = memo(
                         </Button>
                         <Button
                           onClick={() => {
-                            setNextXMolecules(joinedMoleculeLists?.length || 0);
+                            if (joinedMoleculeLists?.length > 300) {
+                              setIsOpenAlert(true);
+                            } else {
+                              setNextXMolecules(joinedMoleculeLists?.length || 0);
+                            }
                           }}
                         >
                           Load full list