Merge branch 'master' of https://github.com/m2ms/fragalysis-frontend

js/components/landing/Landing.js

@@ -9,8 +9,9 @@ import { connect } from 'react-redux';
 import * as apiActions from '../../reducers/api/actions';
 import * as selectionActions from '../../reducers/selection/actions';
 import { DJANGO_CONTEXT } from '../../utils/djangoContext';
+import { resetCurrentCompoundsSettings } from '../preview/compounds/redux/actions';
 
-const Landing = memo(({ resetSelectionState, resetTargetState }) => {
+const Landing = memo(({ resetSelectionState, resetTargetState, resetCurrentCompoundsSettings }) => {
   let text_div;
 
   if (DJANGO_CONTEXT['authenticated'] === true) {
@@ -30,7 +31,8 @@ const Landing = memo(({ resetSelectionState, resetTargetState }) => {
   useEffect(() => {
     resetTargetState();
     resetSelectionState();
-  }, [resetTargetState, resetSelectionState]);
+    resetCurrentCompoundsSettings(true);
+  }, [resetTargetState, resetSelectionState, resetCurrentCompoundsSettings]);
 
   return (
     <Grid container spacing={2}>
@@ -63,7 +65,8 @@ function mapStateToProps(state) {
 }
 const mapDispatchToProps = {
   resetSelectionState: selectionActions.resetSelectionState,
-  resetTargetState: apiActions.resetTargetState
+  resetTargetState: apiActions.resetTargetState,
+  resetCurrentCompoundsSettings
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Landing);

js/components/preview/Preview.js

@@ -18,6 +18,7 @@ import { withLoadingProtein } from './withLoadingProtein';
 import { withSessionManagement } from '../session/withSessionManagement';
 import { useDispatch } from 'react-redux';
 import { removeAllNglComponents } from '../../reducers/ngl/actions';
+import { resetCurrentCompoundsSettings } from './compounds/redux/actions';
 //import HotspotList from '../hotspot/hotspotList';
 
 const hitNavigatorWidth = 504;
@@ -84,6 +85,8 @@ const Preview = memo(({ isStateLoaded, headerHeight }) => {
     // Unmount Preview - reset NGL state
     return () => {
       dispatch(removeAllNglComponents());
+      dispatch(resetCurrentCompoundsSettings(true));
+      console.log(' Unmount Preview ');
     };
   }, [dispatch]);
 

js/components/preview/compounds/compoundList.js

@@ -6,7 +6,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { CompoundView } from './compoundView';
 import { Panel } from '../../common/Surfaces/Panel';
 import { Button } from '../../common/Inputs/Button';
-import { Grid, Box, makeStyles, TextField, useTheme, CircularProgress } from '@material-ui/core';
+import { Grid, Box, makeStyles, TextField, CircularProgress } from '@material-ui/core';
 import { SelectAll, Delete } from '@material-ui/icons';
 import {
   clearAllSelectedCompounds,
@@ -18,16 +18,40 @@ import {
 import { compoundsColors } from './redux/constants';
 // import { getTotalCountOfMolecules } from '../../../reducers/selection/selectors';
 import InfiniteScroll from 'react-infinite-scroller';
-import { getCanLoadMoreCompounds, getCompoundClasses, getCompoundListOffset } from './redux/selectors';
+import { getCanLoadMoreCompounds, getCompoundListOffset } from './redux/selectors';
 import { NglContext } from '../../nglView/nglProvider';
 import { VIEWS } from '../../../constants/constants';
+import classNames from 'classnames';
 
 const useStyles = makeStyles(theme => ({
   textField: {
     marginLeft: theme.spacing(1),
     marginRight: theme.spacing(1),
-    width: 50
+    width: 76,
+    '& .MuiFormLabel-root': {
+      paddingLeft: theme.spacing(1)
+    }
+  },
+  selectedInput: {
+    border: `2px groove ${theme.palette.primary.main}`
+  },
+
+  [compoundsColors.blue.key]: {
+    backgroundColor: compoundsColors.blue.color
+  },
+  [compoundsColors.red.key]: {
+    backgroundColor: compoundsColors.red.color
+  },
+  [compoundsColors.green.key]: {
+    backgroundColor: compoundsColors.green.color
+  },
+  [compoundsColors.purple.key]: {
+    backgroundColor: compoundsColors.purple.color
   },
+  [compoundsColors.apricot.key]: {
+    backgroundColor: compoundsColors.apricot.color
+  },
+
   paddingProgress: {
     padding: theme.spacing(1),
     width: 100,
@@ -43,13 +67,26 @@ const useStyles = makeStyles(theme => ({
 export const CompoundList = memo(({ height }) => {
   const classes = useStyles();
   const panelRef = useRef(null);
-  const theme = useTheme();
   const dispatch = useDispatch();
   const { getNglView } = useContext(NglContext);
   const majorViewStage = getNglView(VIEWS.MAJOR_VIEW) && getNglView(VIEWS.MAJOR_VIEW).stage;
 
   const to_query = useSelector(state => state.selectionReducers.to_query);
-  const compoundClasses = useSelector(state => getCompoundClasses(state));
+  // const compoundClasses = useSelector(state => getCompoundClasses(state));
+  const blueInput = useSelector(state => state.previewReducers.compounds[compoundsColors.blue.key]);
+  const redInput = useSelector(state => state.previewReducers.compounds[compoundsColors.red.key]);
+  const greenInput = useSelector(state => state.previewReducers.compounds[compoundsColors.green.key]);
+  const purpleInput = useSelector(state => state.previewReducers.compounds[compoundsColors.purple.key]);
+  const apricotInput = useSelector(state => state.previewReducers.compounds[compoundsColors.apricot.key]);
+
+  const inputs = {
+    [compoundsColors.blue.key]: blueInput,
+    [compoundsColors.red.key]: redInput,
+    [compoundsColors.green.key]: greenInput,
+    [compoundsColors.purple.key]: purpleInput,
+    [compoundsColors.apricot.key]: apricotInput
+  };
+
   const currentCompoundClass = useSelector(state => state.previewReducers.compounds.currentCompoundClass);
   // const totalCountOfMolecules = useSelector(state => getTotalCountOfMolecules(state));
   const canLoadMoreCompounds = useSelector(state => getCanLoadMoreCompounds(state));
@@ -58,17 +95,6 @@ export const CompoundList = memo(({ height }) => {
   const currentCompounds = useSelector(state => state.previewReducers.compounds.currentCompounds);
   const compoundsListOffset = useSelector(state => getCompoundListOffset(state));
 
-  Object.keys(compoundsColors).forEach(item => {
-    if (!!document.getElementById(item)) {
-      let inputId = document.getElementById(item);
-      inputId.style.backgroundColor = compoundsColors[item].color;
-      inputId.style.border = `1px solid ${theme.palette.primary.contrastText}`;
-      if (currentCompoundClass === item) {
-        inputId.style.border = `2px solid ${theme.palette.primary.main}`;
-      }
-    }
-  });
-
   let mol_string = currentCompounds.length + ' Compounds on vector to pick';
 
   if (to_query === '' || to_query === undefined) {
@@ -86,11 +112,16 @@ export const CompoundList = memo(({ height }) => {
                   <TextField
                     id={`${item}`}
                     key={`CLASS_${item}`}
-                    className={classes.textField}
+                    variant="standard"
+                    className={classNames(
+                      classes.textField,
+                      classes[item],
+                      currentCompoundClass === item && classes.selectedInput
+                    )}
                     label={compoundsColors[item].text}
                     onChange={e => dispatch(onChangeCompoundClassValue(e))}
                     onKeyDown={e => dispatch(onKeyDownCompoundClass(e))}
-                    value={compoundClasses[item] || ''}
+                    value={inputs[item] || ''}
                   />
                 </Grid>
               ))}

js/components/preview/compounds/redux/actions.js

@@ -1,5 +1,4 @@
 import { constants } from './constants';
-import { compounds } from './reducer';
 
 export const setCurrentCompounds = loadedCompounds => ({
   type: constants.SET_CURRENT_COMPOUNDS,
@@ -11,9 +10,15 @@ export const setCurrentPage = page => ({
   payload: page
 });
 
-export const resetCurrentCompoundsSettings = () => ({
-  type: constants.RESET_CURRENT_COMPOUNDS_SETTINGS
-});
+export const resetCurrentCompoundsSettings = (withCompoundClasses = false) => async dispatch => {
+  await dispatch({
+    type: constants.RESET_CURRENT_COMPOUNDS_SETTINGS
+  });
+
+  if (withCompoundClasses === true) {
+    dispatch(resetCompoundClasses());
+  }
+};
 
 export const updateCurrentCompound = ({ id, key, value }) => ({
   type: constants.UPDATE_COMPOUND,

js/components/preview/compounds/redux/dispatchActions.js

@@ -47,7 +47,11 @@ export const selectAllCompounds = () => (dispatch, getState) => {
 
 export const onChangeCompoundClassValue = event => (dispatch, getState) => {
   const state = getState();
-  const compoundClasses = state.previewReducers.compounds.compoundClasses;
+  const compoundClasses = {};
+  Object.keys(compoundsColors).forEach(color => {
+    compoundClasses[color] = state.previewReducers.compounds[color];
+  });
+  // const compoundClasses = state.previewReducers.compounds.compoundClasses;
 
   const newClassDescription = { [event.target.id]: event.target.value };
   const descriptionToSet = Object.assign(compoundClasses, newClassDescription);

js/components/preview/compounds/redux/reducer.js

@@ -27,9 +27,9 @@ export const INITIAL_STATE = {
    }] */
   currentCompounds: [],
   currentCompoundClass: compoundsColors.blue.key,
-  compoundClasses: defaultCompoundsClasses,
+  ...defaultCompoundsClasses,
   selectedCompoundsClass: defaultSelectedCmpdsClass,
-  highlightedCompoundId: undefined,
+  highlightedCompoundId: null,
   showedCompoundList: [],
 
   // configuration: {
@@ -62,11 +62,11 @@ export const compounds = (state = INITIAL_STATE, action = {}) => {
       });
     case constants.SET_COMPOUND_CLASSES:
       return Object.assign({}, state, {
-        compoundClasses: action.payload
+        ...action.payload
       });
 
     case constants.RESET_COMPOUND_CLASSES:
-      return Object.assign({}, state, { compoundClasses: {} });
+      return Object.assign({}, state, { ...defaultCompoundsClasses });
 
     case constants.SET_HIGHLIGHTED_COMPOUND_ID:
       return Object.assign({}, state, { highlightedCompoundId: action.payload });

js/components/preview/compounds/redux/selectors.js

@@ -4,11 +4,6 @@ import { compoundsColors } from './constants';
 const getCompoundsPerPage = state => state.previewReducers.compounds.compoundsPerPage;
 const getCurrentPage = state => state.previewReducers.compounds.currentPage;
 const getCurrentCompounds = state => state.previewReducers.compounds.currentCompounds;
-const getCompdClassBlue = state => state.previewReducers.compounds.compoundClasses[compoundsColors.blue.key];
-const getCompdClassRed = state => state.previewReducers.compounds.compoundClasses[compoundsColors.red.key];
-const getCompdClassGreen = state => state.previewReducers.compounds.compoundClasses[compoundsColors.green.key];
-const getCompdClassPurple = state => state.previewReducers.compounds.compoundClasses[compoundsColors.purple.key];
-const getCompdClassApricot = state => state.previewReducers.compounds.compoundClasses[compoundsColors.apricot.key];
 
 export const getCompoundListOffset = createSelector(
   getCompoundsPerPage,
@@ -25,18 +20,3 @@ export const getCanLoadMoreCompounds = createSelector(
     return compoundsListOffset < compoundsList.length;
   }
 );
-
-export const getCompoundClasses = createSelector(
-  getCompdClassBlue,
-  getCompdClassRed,
-  getCompdClassGreen,
-  getCompdClassPurple,
-  getCompdClassApricot,
-  (blue, red, green, purple, apricot) => ({
-    [compoundsColors.blue.key]: blue,
-    [compoundsColors.red.key]: red,
-    [compoundsColors.green.key]: green,
-    [compoundsColors.purple.key]: purple,
-    [compoundsColors.apricot.key]: apricot
-  })
-);

js/components/preview/moleculeGroups/redux/dispatchActions.js

@@ -23,6 +23,7 @@ import { getUrl, loadFromServer } from '../../../../utils/genericList';
 import { OBJECT_TYPE } from '../../../nglView/constants';
 import { SCENES } from '../../../../reducers/ngl/constants';
 import { setSortDialogOpen } from '../../molecule/redux/actions';
+import { resetCurrentCompoundsSettings } from '../../compounds/redux/actions';
 
 export const clearAfterDeselectingMoleculeGroup = ({ molGroupId, majorViewStage }) => (dispatch, getState) => {
   dispatch(setObjectSelection([molGroupId]));
@@ -159,6 +160,9 @@ export const clearMoleculeGroupSelection = ({ getNglView }) => dispatch => {
   dispatch(setFilterSettings(undefined));
   // close sort dialog
   dispatch(setSortDialogOpen(false));
+
+  // reset compounds
+  dispatch(resetCurrentCompoundsSettings(true));
 };
 
 export const onSelectMoleculeGroup = ({ moleculeGroup, stageSummaryView, majorViewStage, event }) => (

js/reducers/selection/dispatchActions.js

@@ -3,7 +3,7 @@ import { selectVector } from './actions';
 import { getAllCompoundsList } from './selectors';
 
 export const selectVectorAndResetCompounds = currentVector => async (dispatch, getState) => {
-  await dispatch(resetCurrentCompoundsSettings());
+  await dispatch(resetCurrentCompoundsSettings(false));
   dispatch(selectVector(currentVector));
   dispatch(setCurrentCompounds(getAllCompoundsList(getState())));
 };