#384 move same settings to next/previous compound in RHS

Author: tibor-postek-m2ms

js/components/datasets/datasetMoleculeView.js

@@ -4,7 +4,7 @@
 
 import React, { memo, useEffect, useState, useRef, useContext } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { Grid, Button, makeStyles, Tooltip, Typography, Checkbox, IconButton } from '@material-ui/core';
+import { Grid, Button, makeStyles, Tooltip, Checkbox, IconButton } from '@material-ui/core';
 import SVGInline from 'react-svg-inline';
 import classNames from 'classnames';
 import { VIEWS } from '../../constants/constants';
@@ -450,6 +450,35 @@ export const DatasetMoleculeView = memo(
       return cssClass;
     };
 
+    const moveSelectedMoleculeSettings = newItemData => {
+      if (newItemData) {
+        if (isLigandOn) {
+          dispatch(addDatasetLigand(stage, newItemData, colourToggle, datasetID));
+          removeSelectedLigand();
+        }
+        if (isProteinOn) {
+          dispatch(addDatasetHitProtein(stage, newItemData, colourToggle, datasetID));
+          removeSelectedProtein();
+        }
+        if (isComplexOn) {
+          dispatch(addDatasetComplex(stage, newItemData, colourToggle, datasetID));
+          removeSelectedComplex();
+        }
+        if (isSurfaceOn) {
+          dispatch(addDatasetSurface(stage, newItemData, colourToggle, datasetID));
+          removeSelectedSurface();
+        }
+      }
+    };
+
+    const handleClickOnDownArrow = () => {
+      moveSelectedMoleculeSettings(nextItemData);
+    };
+
+    const handleClickOnUpArrow = () => {
+      moveSelectedMoleculeSettings(previousItemData);
+    };
+
     const moleculeTitle = data && data.name;
     const datasetTitle = datasets?.find(item => `${item.id}` === `${datasetID}`)?.title;
 
@@ -702,14 +731,22 @@ export const DatasetMoleculeView = memo(
         <Grid item>
           <Grid container direction="column" justify="space-between" className={classes.arrows}>
             <Grid item>
-              <Tooltip title="secondary">
-                <IconButton color="primary" size="small" disabled={disableUserInteraction || !previousItemData}>
-                  <ArrowUpward className={classes.arrow} />
-                </IconButton>
-              </Tooltip>
+              <IconButton
+                color="primary"
+                size="small"
+                disabled={disableUserInteraction || !previousItemData}
+                onClick={handleClickOnUpArrow}
+              >
+                <ArrowUpward className={classes.arrow} />
+              </IconButton>
             </Grid>
             <Grid item>
-              <IconButton color="primary" size="small" disabled={disableUserInteraction || !nextItemData}>
+              <IconButton
+                color="primary"
+                size="small"
+                disabled={disableUserInteraction || !nextItemData}
+                onClick={handleClickOnDownArrow}
+              >
                 <ArrowDownward className={classes.arrow} />
               </IconButton>
             </Grid>

js/components/preview/molecule/moleculeView.js

@@ -469,66 +469,43 @@ const MoleculeView = memo(
       return cssClass;
     };
 
-    const handleClickOnDownArrow = () => {
-      if (nextItemData) {
+    const moveSelectedMolSettings = newItemDataset => {
+      if (newItemDataset) {
         if (isLigandOn) {
-          dispatch(addLigand(stage, nextItemData, colourToggle));
+          dispatch(addLigand(stage, newItemDataset, colourToggle));
           removeSelectedLigand();
         }
         if (isProteinOn) {
-          dispatch(addHitProtein(stage, nextItemData, colourToggle));
+          dispatch(addHitProtein(stage, newItemDataset, colourToggle));
           removeSelectedProtein();
         }
         if (isComplexOn) {
-          dispatch(addComplex(stage, nextItemData, colourToggle));
+          dispatch(addComplex(stage, newItemDataset, colourToggle));
           removeSelectedComplex();
         }
         if (isSurfaceOn) {
-          dispatch(addSurface(stage, nextItemData, colourToggle));
+          dispatch(addSurface(stage, newItemDataset, colourToggle));
           removeSelectedSurface();
         }
         if (isDensityOn) {
-          dispatch(addDensity(stage, nextItemData, colourToggle));
+          dispatch(addDensity(stage, newItemDataset, colourToggle));
           removeSelectedDensity();
         }
         if (isVectorOn) {
-          dispatch(addVector(stage, nextItemData)).catch(error => {
+          dispatch(addVector(stage, newItemDataset)).catch(error => {
             throw new Error(error);
           });
           removeSelectedVector();
         }
       }
     };
 
+    const handleClickOnDownArrow = () => {
+      moveSelectedMolSettings(nextItemData);
+    };
+
     const handleClickOnUpArrow = () => {
-      if (previousItemData) {
-        if (isLigandOn) {
-          dispatch(addLigand(stage, previousItemData, colourToggle));
-          removeSelectedLigand();
-        }
-        if (isProteinOn) {
-          dispatch(addHitProtein(stage, previousItemData, colourToggle));
-          removeSelectedProtein();
-        }
-        if (isComplexOn) {
-          dispatch(addComplex(stage, previousItemData, colourToggle));
-          removeSelectedComplex();
-        }
-        if (isSurfaceOn) {
-          dispatch(addSurface(stage, previousItemData, colourToggle));
-          removeSelectedSurface();
-        }
-        if (isDensityOn) {
-          dispatch(addDensity(stage, previousItemData, colourToggle));
-          removeSelectedDensity();
-        }
-        if (isVectorOn) {
-          dispatch(addVector(stage, previousItemData)).catch(error => {
-            throw new Error(error);
-          });
-          removeSelectedVector();
-        }
-      }
+      moveSelectedMolSettings(previousItemData);
     };
 
     let moleculeTitle = data?.protein_code.replace(`${target_on_name}-`, '');
@@ -721,16 +698,14 @@ const MoleculeView = memo(
         <Grid item>
           <Grid container direction="column" justify="space-between" className={classes.arrows}>
             <Grid item>
-              <Tooltip title="secondary">
-                <IconButton
-                  color="primary"
-                  size="small"
-                  disabled={disableUserInteraction || !previousItemData}
-                  onClick={handleClickOnUpArrow}
-                >
-                  <ArrowUpward className={classes.arrow} />
-                </IconButton>
-              </Tooltip>
+              <IconButton
+                color="primary"
+                size="small"
+                disabled={disableUserInteraction || !previousItemData}
+                onClick={handleClickOnUpArrow}
+              >
+                <ArrowUpward className={classes.arrow} />
+              </IconButton>
             </Grid>
             <Grid item>
               <IconButton