- implemented #1173 also with save/restore and undo/redo functionality

xchem · Oct 13, 2023 · 411921f · 411921f
1 parent d82f46a
commit 411921f
Show file tree

Hide file tree

Showing 8 changed files with 278 additions and 59 deletions.
diff --git a/js/components/datasets/datasetMoleculeList.js b/js/components/datasets/datasetMoleculeList.js
@@ -14,7 +14,8 @@ import {
   TextField,
   Checkbox,
   InputAdornment,
-  setRef
+  setRef,
+  Box
 } from '@material-ui/core';
 import React, { useState, useEffect, memo, useRef, useContext, useCallback, useMemo } from 'react';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
@@ -52,7 +53,11 @@ import {
   setIsOpenLockVisibleCompoundsDialogGlobal,
   setSearchStringOfCompoundSet,
   setCompoundToSelectedCompoundsByDataset,
-  setSelectAllButtonForDataset
+  setSelectAllButtonForDataset,
+  appendCompoundColorOfDataset,
+  appendColorToAllCompoundsOfDataset,
+  removeCompoundColorOfDataset,
+  removeColorFromAllCompoundsOfDataset
 } from './redux/actions';
 import { DatasetFilter } from './datasetFilter';
 import { FilterList, Link, DeleteForever, ArrowUpward, ArrowDownward, Edit } from '@material-ui/icons';
@@ -79,6 +84,7 @@ import {
   onStartEditColorClassName
 } from '../preview/compounds/redux/dispatchActions';
 import { LockVisibleCompoundsDialog } from './lockVisibleCompoundsDialog';
+import { size } from 'lodash';
 
 const useStyles = makeStyles(theme => ({
   container: {
@@ -163,6 +169,26 @@ const useStyles = makeStyles(theme => ({
   contButtonsMargin: {
     margin: theme.spacing(1) / 2
   },
+  paintAllButton: {
+    minWidth: 'fit-content',
+    paddingLeft: theme.spacing(1) / 4,
+    paddingRight: theme.spacing(1) / 4,
+    paddingBottom: 0,
+    paddingTop: 0,
+    fontWeight: 'bold',
+    fontSize: 9,
+    borderRadius: 0,
+    borderColor: theme.palette.primary.main,
+    backgroundColor: 'white',
+    '&:hover': {
+      backgroundColor: 'white'
+      // color: theme.palette.primary.contrastText
+    },
+    '&:disabled': {
+      borderRadius: 0,
+      borderColor: 'white'
+    }
+  },
   contColButton: {
     minWidth: 'fit-content',
     paddingLeft: theme.spacing(1) / 4,
@@ -808,6 +834,39 @@ const DatasetMoleculeList = ({ title, datasetID, url }) => {
     }
   };
 
+  const isPaintOrUnpaintAll = () => {
+    let isPaint = true;
+    const compounds = Object.keys(compoundColors);
+    for (let i = 0; i < compounds.length; i++) {
+      const cmpId = compounds[i];
+      const colors = compoundColors[cmpId];
+      if (colors.some(c => c === currentCompoundClass)) {
+        isPaint = false;
+        break;
+      }
+    }
+
+    return isPaint;
+  };
+
+  const paintAllCompounds = () => {
+    const paintAll = isPaintOrUnpaintAll();
+    const cmpIds = joinedMoleculeLists.map(mol => mol.id);
+    if (paintAll) {
+      joinedMoleculeLists.forEach(molecule => {
+        const molName = molecule.name;
+        dispatch(appendCompoundColorOfDataset(datasetID, molecule.id, currentCompoundClass, molName, true));
+      });
+      dispatch(appendColorToAllCompoundsOfDataset(datasetID, currentCompoundClass, cmpIds));
+    } else {
+      joinedMoleculeLists.forEach(molecule => {
+        const molName = molecule.name;
+        dispatch(removeCompoundColorOfDataset(datasetID, molecule.id, currentCompoundClass, molName, true));
+      });
+      dispatch(removeColorFromAllCompoundsOfDataset(datasetID, currentCompoundClass, cmpIds));
+    }
+  };
+
   return (
     <Panel hasHeader title={title} withTooltip headerActions={actions}>
       <AlertModal
@@ -1082,25 +1141,53 @@ const DatasetMoleculeList = ({ title, datasetID, url }) => {
                   </Grid>
                 </Grid>
                 <Grid item>
-                  {
-                    <Tooltip title={selectAllPressed ? 'Unselect all' : 'Select all'}>
-                      <Grid item style={{ margin: '4px', marginLeft: '5px' }}>
-                        <Button
-                          variant="outlined"
-                          className={classNames(classes.contColButton, {
-                            [classes.contColButtonHalfSelected]: false
-                          })}
-                          onClick={() => {
-                            dispatch(setSelectAllButtonForDataset(!selectAllPressed));
-                            selectAllDatasetMolecule(!selectAllPressed);
+                  <Tooltip title={selectAllPressed ? 'Unselect all' : 'Select all'}>
+                    <Grid item style={{ margin: '4px', marginLeft: '5px' }}>
+                      <Button
+                        variant="outlined"
+                        className={classNames(classes.contColButton, {
+                          [classes.contColButtonHalfSelected]: false
+                        })}
+                        onClick={() => {
+                          dispatch(setSelectAllButtonForDataset(!selectAllPressed));
+                          selectAllDatasetMolecule(!selectAllPressed);
+                        }}
+                        disabled={false}
+                      >
+                        {selectAllPressed ? 'Unselect all' : 'Select all'}
+                      </Button>
+                    </Grid>
+                  </Tooltip>
+                </Grid>
+                <Grid item>
+                  <Tooltip
+                    title={
+                      isPaintOrUnpaintAll()
+                        ? 'Paint all compounds with selected color'
+                        : 'Unpaint all compounds with selected color'
+                    }
+                  >
+                    <Grid item style={{ margin: '4px', marginLeft: '5px' }}>
+                      <Button
+                        variant="outlined"
+                        className={classNames(classes.paintAllButton)}
+                        disabled={false}
+                        onClick={() => paintAllCompounds()}
+                      >
+                        <Box
+                          style={{
+                            width: '10px',
+                            height: '10px',
+                            backgroundColor: compoundsColors[currentCompoundClass]
+                              ? compoundsColors[currentCompoundClass].color
+                              : '#000000',
+                            marginRight: '2px'
                           }}
-                          disabled={false}
-                        >
-                          {selectAllPressed ? 'Unselect all' : 'Select all'}
-                        </Button>
-                      </Grid>
-                    </Tooltip>
-                  }
+                        />
+                        {isPaintOrUnpaintAll() ? 'Paint all' : 'Unpaint all'}
+                      </Button>
+                    </Grid>
+                  </Tooltip>
                 </Grid>
               </Grid>
             </Grid>

diff --git a/js/components/datasets/datasetMoleculeView/datasetMoleculeView.js b/js/components/datasets/datasetMoleculeView/datasetMoleculeView.js
@@ -78,6 +78,7 @@ import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart';
 import RemoveShoppingCartIcon from '@mui/icons-material/RemoveShoppingCart';
 import { compoundsColors } from '../../preview/compounds/redux/constants';
 import { LockVisibleCompoundsDialog } from '../lockVisibleCompoundsDialog';
+import { fabClasses } from '@mui/material';
 
 const useStyles = makeStyles(theme => ({
   container: {
@@ -639,26 +640,26 @@ const DatasetMoleculeView = memo(
           // if (shoppingCartColors?.length === 1) {
           //   dispatch(removeMoleculeFromCompoundsOfDatasetToBuy(datasetID, currentID, moleculeTitle));
           // }
-          dispatch(removeCompoundColorOfDataset(datasetID, currentID, event.target.id, moleculeTitle, true));
+          dispatch(removeCompoundColorOfDataset(datasetID, currentID, event.target.id, moleculeTitle, false));
         } else {
           // dispatch(appendMoleculeToCompoundsOfDatasetToBuy(datasetID, currentID, moleculeTitle));
-          dispatch(appendCompoundColorOfDataset(datasetID, currentID, event.target.id, moleculeTitle, true));
+          dispatch(appendCompoundColorOfDataset(datasetID, currentID, event.target.id, moleculeTitle, false));
         }
       };
 
       const handleRemoveColorFromCompound = event => {
         if (shoppingCartColors?.length === 1) {
           dispatch(removeMoleculeFromCompoundsOfDatasetToBuy(datasetID, currentID, moleculeTitle));
         }
-        dispatch(removeCompoundColorOfDataset(datasetID, currentID, event.target.id, moleculeTitle, true));
+        dispatch(removeCompoundColorOfDataset(datasetID, currentID, event.target.id, moleculeTitle, false));
       };
 
       const handleShoppingCartClick = () => {
         if (currentCompoundClass) {
           // if (!isAddedToShoppingCart) {
           //   dispatch(appendMoleculeToCompoundsOfDatasetToBuy(datasetID, currentID, moleculeTitle));
           // }
-          dispatch(appendCompoundColorOfDataset(datasetID, currentID, currentCompoundClass, moleculeTitle, true));
+          dispatch(appendCompoundColorOfDataset(datasetID, currentID, currentCompoundClass, moleculeTitle, false));
         }
       };
 

diff --git a/js/components/datasets/redux/actions.js b/js/components/datasets/redux/actions.js
@@ -388,7 +388,8 @@ export const appendCompoundColorOfDataset = (
   skipTracking = false
 ) => ({
   type: constants.APPEND_COMPOUND_COLOR_OF_DATASET,
-  payload: { datasetID, compoundID, colorClass, compoundTitle, skipTracking: skipTracking }
+  payload: { datasetID, compoundID, colorClass, compoundTitle },
+  skipTracking: skipTracking
 });
 
 export const removeCompoundColorOfDataset = (
@@ -399,7 +400,18 @@ export const removeCompoundColorOfDataset = (
   skipTracking = false
 ) => ({
   type: constants.REMOVE_COMPOUND_COLOR_OF_DATASET,
-  payload: { datasetID, compoundID, colorClass, compoundTitle, skipTracking: skipTracking }
+  payload: { datasetID, compoundID, colorClass, compoundTitle },
+  skipTracking: skipTracking
+});
+
+export const appendColorToAllCompoundsOfDataset = (datasetID, colorClass, cmpIds) => ({
+  type: constants.APPEND_COLOR_TO_ALL_COMPOUNDS_OF_DATASET,
+  payload: { datasetID, colorClass, cmpIds }
+});
+
+export const removeColorFromAllCompoundsOfDataset = (datasetID, colorClass, cmpIds) => ({
+  type: constants.REMOVE_COLOR_FROM_ALL_COMPOUNDS_OF_DATASET,
+  payload: { datasetID, colorClass, cmpIds }
 });
 
 export const appendColorToSelectedColorFilter = colorClass => ({

diff --git a/js/components/datasets/redux/constants.js b/js/components/datasets/redux/constants.js
@@ -74,6 +74,8 @@ export const constants = {
 
   APPEND_COMPOUND_COLOR_OF_DATASET: prefix + 'APPEND_COMPOUND_COLOR_OF_DATASET',
   REMOVE_COMPOUND_COLOR_OF_DATASET: prefix + 'REMOVE_COMPOUND_COLOR_OF_DATASET',
+  APPEND_COLOR_TO_ALL_COMPOUNDS_OF_DATASET: prefix + 'SET_COLOR_TO_ALL_COMPOUNDS_OF_DATASET',
+  REMOVE_COLOR_FROM_ALL_COMPOUNDS_OF_DATASET: prefix + 'REMOVE_COLOR_FROM_ALL_COMPOUNDS_OF_DATASET',
 
   APPEND_COLOR_TO_SELECTED_COLOR_FILTERS: prefix + 'APPEND_COLOR_TO_SELECTED_COLOR_FILTERS',
   REMOVE_COLOR_FROM_SELECTED_COLOR_FILTERS: prefix + 'REMOVE_COLOR_FROM_SELECTED_COLOR_FILTERS',

diff --git a/js/components/projects/redux/dispatchActions.js b/js/components/projects/redux/dispatchActions.js
@@ -552,5 +552,5 @@ const getJobOverrides = async () => {
   const resultCall = await api({
     url: `${base_url}/api/job_override/`
   });
-  return resultCall.data.results[0].override;
+  return resultCall.data?.results[0]?.override;
 };
diff --git a/js/reducers/tracking/constants.js b/js/reducers/tracking/constants.js
@@ -117,7 +117,9 @@ export const actionType = {
   COMPOUND_REMOVED_FROM_COLOR_GROUP: 'COMPOUND_REMOVED_FROM_COLOR_GROUP',
   TAG_DETAIL_VIEW: 'TAG_DETAIL_VIEW',
   SELECT_ALL_DATASET_COMPOUNDS: 'SELECT_ALL_DATASET_COMPOUNDS',
-  SELECTED_SELECT_ALL_BUTTON_FOR_DATASET: 'SELECTED_SELECT_ALL_BUTTON_FOR_DATASET'
+  SELECTED_SELECT_ALL_BUTTON_FOR_DATASET: 'SELECTED_SELECT_ALL_BUTTON_FOR_DATASET',
+  ALL_COMPOUNDS_ADDED_TO_COLOR_GROUP: 'ALL_COMPOUNDS_ADDED_TO_COLOR_GROUP',
+  ALL_COMPOUNDS_REMOVED_FROM_COLOR_GROUP: 'ALL_COMPOUNDS_REMOVED_FROM_COLOR_GROUP'
 };
 
 export const snapshotSwitchManualActions = [