Merge remote-tracking branch 'remotes/origin/#453' into allfunctionality

Author: boriskovar-m2ms

js/components/preview/molecule/moleculeList.js

@@ -60,7 +60,8 @@ import { useRouteMatch } from 'react-router-dom';
 import { setSortDialogOpen } from './redux/actions';
 import { setMoleculeList, setAllMolLists } from '../../../reducers/api/actions';
 import { AlertModal } from '../../common/Modal/AlertModal';
-import { selectMoleculeGroup } from '../moleculeGroups/redux/dispatchActions';
+import {selectMoleculeGroup} from '../moleculeGroups/redux/dispatchActions';
+import { onSelectMoleculeGroup } from '../moleculeGroups/redux/dispatchActions';
 
 const useStyles = makeStyles(theme => ({
   container: {

js/components/preview/viewerControls/displayControls/editRepresentationMenu.js

@@ -40,11 +40,15 @@ export const EditRepresentationMenu = memo(
     const handleRepresentationPropertyChange = throttle((key, value) => {
       const r = comp.reprList.find(rep => rep.uuid === representation.uuid || rep.uuid === representation.lastKnownID);
       if (r) {
+        let oldValue = oldRepresentation.params[key];
+        let change = { key, value, oldValue };
+
         // update in ngl
         r.setParameters({ [key]: value });
         //update in redux
         oldRepresentation.params[key] = value;
-        dispatch(updateComponentRepresentation(parentKey, oldRepresentation.uuid, oldRepresentation));
+
+        dispatch(updateComponentRepresentation(parentKey, oldRepresentation.uuid, oldRepresentation, change));
       }
     }, 250);
 

js/components/preview/viewerControls/index.js

@@ -2,13 +2,17 @@
  * Created by ricgillams on 28/06/2018.
  */
 
-import React, { memo, useState } from 'react';
+import React, { memo, useState, useContext, useEffect, useCallback } from 'react';
+import { useDispatch } from 'react-redux';
 import { Button } from '../../common/Inputs/Button';
-import { Settings, Mouse, PersonalVideo } from '@material-ui/icons';
+import { Settings, Mouse, PersonalVideo, Undo, Redo } from '@material-ui/icons';
 import { ButtonGroup, Grid, makeStyles, Tooltip } from '@material-ui/core';
 import { SettingControls } from './settingsControls';
 import DisplayControls from './displayControls/';
 import { MouseControls } from './mouseControls';
+import { ActionCreators as UndoActionCreators } from 'redux-undo';
+import { undoAction, redoAction, getCanRedo, getCanUndo } from '../../../../js/reducers/tracking/dispatchActions';
+import { NglContext } from '../../nglView/nglProvider';
 
 const drawers = {
   settings: 'settings',
@@ -27,6 +31,10 @@ const useStyles = makeStyles(theme => ({
 export const ViewerControls = memo(({}) => {
   const [drawerSettings, setDrawerSettings] = useState(JSON.parse(JSON.stringify(initDrawers)));
   const classes = useStyles();
+  const dispatch = useDispatch();
+  const { nglViewList } = useContext(NglContext);
+  const [canUndo, setCanUndo] = useState(true);
+  const [canRedo, setCanRedo] = useState(false);
 
   const openDrawer = key => {
     //close all and open selected by key
@@ -38,11 +46,55 @@ export const ViewerControls = memo(({}) => {
     setDrawerSettings(JSON.parse(JSON.stringify(initDrawers)));
   };
 
+  const doUndo = () => {
+    dispatch(UndoActionCreators.undo());
+    setCanRedo(dispatch(getCanRedo()));
+    setCanUndo(dispatch(getCanUndo()));
+    dispatch(undoAction(nglViewList));
+  };
+
+  const doRedo = () => {
+    dispatch(UndoActionCreators.redo());
+    setCanRedo(dispatch(getCanRedo()));
+    setCanUndo(dispatch(getCanUndo()));
+    dispatch(redoAction(nglViewList));
+  };
+
+  const handleUserKeyPress = useCallback(e => {
+    var evtobj = window.event ? window.event : e;
+    if (evtobj.keyCode === 90 && evtobj.ctrlKey) {
+      doUndo();
+    } else if (evtobj.keyCode === 89 && evtobj.ctrlKey) {
+      doRedo();
+    }
+  });
+
+  useEffect(() => {
+    window.addEventListener('keydown', handleUserKeyPress);
+
+    return () => {
+      window.removeEventListener('keydown', handleUserKeyPress);
+    };
+  }, [handleUserKeyPress]);
+
   return (
     <>
       <Grid container justify="center">
         <Grid item>
           <ButtonGroup variant="contained" color="primary">
+            <Tooltip title="Undo">
+              <Button
+                size="small"
+                color="primary"
+                onClick={() => {
+                  doUndo();
+                }}
+                className={classes.button}
+                disabled={!canUndo}
+              >
+                <Undo />
+              </Button>
+            </Tooltip>
             <Tooltip title="Settings controls">
               <Button
                 size="small"
@@ -68,6 +120,19 @@ export const ViewerControls = memo(({}) => {
                 <Mouse />
               </Button>
             </Tooltip>
+            <Tooltip title="Redo">
+              <Button
+                size="small"
+                color="primary"
+                onClick={() => {
+                  doRedo();
+                }}
+                className={classes.button}
+                disabled={!canRedo}
+              >
+                <Redo />
+              </Button>
+            </Tooltip>
           </ButtonGroup>
         </Grid>
       </Grid>

js/components/tracking/trackingModal.js

@@ -40,7 +40,7 @@ export const TrackingModal = memo(({ openModal, onModalClose }) => {
   const { nglViewList } = useContext(NglContext);
 
   const actionList = useSelector(state => state.trackingReducers.truck_actions_list);
-  const orderedActionList = actionList.sort((a, b) => a.timestamp - b.timestamp);
+  const orderedActionList = (actionList && actionList.sort((a, b) => a.timestamp - b.timestamp)) || [];
 
   if (openModal === undefined) {
     console.log('undefined openModal');

js/reducers/ngl/actions.js

@@ -10,11 +10,12 @@ export const deleteNglObject = target => ({
   target
 });
 
-export const updateComponentRepresentation = (objectInViewID, representationID, newRepresentation) => ({
+export const updateComponentRepresentation = (objectInViewID, representationID, newRepresentation, change) => ({
   type: CONSTANTS.UPDATE_COMPONENT_REPRESENTATION,
   representationID,
   newRepresentation,
-  objectInViewID
+  objectInViewID,
+  change
 });
 
 export const addComponentRepresentation = (objectInViewID, newRepresentation) => ({

js/reducers/rootReducer.js

@@ -4,14 +4,14 @@
 import { combineReducers } from 'redux';
 import apiReducers from './api/apiReducers';
 import nglReducers from './ngl/nglReducers';
-import selectionReducers from './selection/selectionReducers';
+import { selectionReducers } from './selection/selectionReducers';
 import { targetReducers } from '../components/target/redux/reducer';
 import { snapshotReducers } from '../components/snapshot/redux/reducer';
 import { previewReducers } from '../components/preview/redux';
 import { projectReducers } from '../components/projects/redux/reducer';
 import { issueReducers } from '../components/userFeedback/redux/reducer';
 import { datasetsReducers } from '../components/datasets/redux/reducer';
-import trackingReducers from './tracking/trackingReducers';
+import { trackingReducers, undoableTrackingReducers } from './tracking/trackingReducers';
 
 const rootReducer = combineReducers({
   apiReducers,
@@ -23,7 +23,8 @@ const rootReducer = combineReducers({
   projectReducers,
   issueReducers,
   datasetsReducers,
-  trackingReducers
+  trackingReducers,
+  undoableTrackingReducers
 });
 
 export { rootReducer };

js/reducers/selection/selectionReducers.js

@@ -28,7 +28,7 @@ export const INITIAL_STATE = {
   currentVector: null // selected vector smile (ID) of compoundsOfVectors
 };
 
-export default function selectionReducers(state = INITIAL_STATE, action = {}) {
+export function selectionReducers(state = INITIAL_STATE, action = {}) {
   switch (action.type) {
     case constants.SET_TO_BUY_LIST:
       return Object.assign({}, state, {

js/reducers/tracking/actions.js

@@ -34,3 +34,10 @@ export const setIsTrackingCompoundsRestoring = function(isTrackingCompoundsResto
     isTrackingCompoundsRestoring: isTrackingCompoundsRestoring
   };
 };
+
+export const setIsUndoRedoAction = function(isUndoRedoAction) {
+  return {
+    type: constants.SET_IS_UNDO_REDO_ACTION,
+    isUndoRedoAction: isUndoRedoAction
+  };
+};

js/reducers/tracking/constants.js

@@ -5,7 +5,8 @@ export const constants = {
   APPEND_ACTIONS_LIST: prefix + 'APPEND_ACTIONS_LIST',
   SET_CURRENT_ACTIONS_LIST: prefix + 'SET_CURRENT_ACTIONS_LIST',
   SET_IS_TRACKING_COMPOUNDS_RESTORING: prefix + 'SET_IS_TRACKING_COMPOUNDS_RESTORING',
-  SET_IS_TRACKING_MOLECULES_RESTORING: prefix + 'SET_IS_TRACKING_MOLECULES_RESTORING'
+  SET_IS_TRACKING_MOLECULES_RESTORING: prefix + 'SET_IS_TRACKING_MOLECULES_RESTORING',
+  SET_IS_UNDO_REDO_ACTION: prefix + 'SET_IS_UNDO_REDO_ACTION'
 };
 
 export const actionType = {
@@ -30,7 +31,9 @@ export const actionType = {
   COMPOUND_DESELECTED: 'COMPOUND_DESELECTED',
   REPRESENTATION_CHANGED: 'REPRESENTATION_CHANGED',
   REPRESENTATION_ADDED: 'REPRESENTATION_ADDED',
-  REPRESENTATION_REMOVED: 'REPRESENTATION_REMOVED'
+  REPRESENTATION_REMOVED: 'REPRESENTATION_REMOVED',
+  UNDO: 'UNDO',
+  REDO: 'REDO'
 };
 
 export const actionDescription = {