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

m2ms · Jan 20, 2021 · aa3a832 · aa3a832
2 parents 1e5921d + aad4c70
commit aa3a832
Show file tree

Hide file tree

Showing 19 changed files with 380 additions and 82 deletions.
diff --git a/js/components/preview/moleculeGroups/redux/dispatchActions.js b/js/components/preview/moleculeGroups/redux/dispatchActions.js
@@ -34,6 +34,7 @@ import { resetCurrentCompoundsSettings } from '../../compounds/redux/actions';
 import { reloadSession } from '../../../snapshot/redux/dispatchActions';
 import { resetRestoringState } from '../../../../reducers/tracking/dispatchActions';
 import { selectJoinedMoleculeList } from '../../molecule/redux/selectors';
+import { URLS } from '../../../routes/constants';
 
 export const clearAfterDeselectingMoleculeGroup = ({ molGroupId, currentMolGroup, majorViewStage }) => (
   dispatch,
@@ -269,8 +270,10 @@ export const restoreFromCurrentSnapshot = ({ nglViewList }) => (dispatch, getSta
   dispatch(reloadSession(snapshot, nglViewList));
 };
 
-export const restoreSnapshotActions = ({ nglViewList }) => (dispatch, getState) => {
+export const restoreSnapshotActions = ({ nglViewList, projectId, snapshotId, history }) => (dispatch, getState) => {
   dispatch(resetRestoringState(nglViewList));
+  // Trigger react-router to get rid of snapshot just saved flag
+  history.replace(`${URLS.projects}${projectId}/${snapshotId}`);
 };
 
 export const onDeselectMoleculeGroup = ({ moleculeGroup, stageSummaryView, majorViewStage }) => (

diff --git a/js/components/preview/projectHistory/index.js b/js/components/preview/projectHistory/index.js
@@ -72,8 +72,8 @@ export const ProjectHistory = memo(({ setHeight, showFullHistory }) => {
   const { nglViewList } = useContext(NglContext);
   const dispatch = useDispatch();
   let match = useRouteMatch();
-  const projectID = match && match.params && match.params.projectId;
-  const snapshotId = match && match.params && match.params.snapshotId;
+  const projectID = useSelector(state => state.projectReducers.currentProject).projectID;
+  const snapshotId = useSelector(state => state.projectReducers.currentSnapshot).id;
   const currentSnapshotID = useSelector(state => state.projectReducers.currentSnapshot.id);
   const currentSnapshotList = useSelector(state => state.projectReducers.currentSnapshotList);
   const currentSnapshotTree = useSelector(state => state.projectReducers.currentSnapshotTree);

diff --git a/js/components/preview/viewerControls/index.js b/js/components/preview/viewerControls/index.js
@@ -3,15 +3,22 @@
  */
 
 import React, { memo, useState, useContext, useEffect, useCallback } from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { Button } from '../../common/Inputs/Button';
 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 {
+  undoAction,
+  redoAction,
+  getCanRedo,
+  getCanUndo,
+  getUndoActionText,
+  getRedoActionText
+} from '../../../../js/reducers/tracking/dispatchActions';
 import { NglContext } from '../../nglView/nglProvider';
 
 const drawers = {
@@ -33,8 +40,11 @@ export const ViewerControls = memo(({}) => {
   const classes = useStyles();
   const dispatch = useDispatch();
   const { nglViewList } = useContext(NglContext);
+  const [undoTooltip, setUndoTooltip] = useState('Undo');
+  const [redoTooltip, setRedoTooltip] = useState('Redo');
   const [canUndo, setCanUndo] = useState(true);
   const [canRedo, setCanRedo] = useState(false);
+  const isActionTracking = useSelector(state => state.trackingReducers.isActionTracking);
 
   const openDrawer = key => {
     //close all and open selected by key
@@ -51,13 +61,19 @@ export const ViewerControls = memo(({}) => {
     setCanRedo(dispatch(getCanRedo()));
     setCanUndo(dispatch(getCanUndo()));
     dispatch(undoAction(nglViewList));
+
+    setUndoTooltip(dispatch(getUndoActionText()));
+    setRedoTooltip(dispatch(getRedoActionText()));
   };
 
   const doRedo = () => {
     dispatch(UndoActionCreators.redo());
     setCanRedo(dispatch(getCanRedo()));
     setCanUndo(dispatch(getCanUndo()));
     dispatch(redoAction(nglViewList));
+
+    setUndoTooltip(dispatch(getUndoActionText()));
+    setRedoTooltip(dispatch(getRedoActionText()));
   };
 
   const handleUserKeyPress = useCallback(e => {
@@ -70,19 +86,23 @@ export const ViewerControls = memo(({}) => {
   });
 
   useEffect(() => {
+    if (isActionTracking === false) {
+      setUndoTooltip(dispatch(getUndoActionText()));
+      setRedoTooltip(dispatch(getRedoActionText()));
+    }
     window.addEventListener('keydown', handleUserKeyPress);
 
     return () => {
       window.removeEventListener('keydown', handleUserKeyPress);
     };
-  }, [handleUserKeyPress]);
+  }, [handleUserKeyPress, dispatch, isActionTracking]);
 
   return (
     <>
       <Grid container justify="center">
         <Grid item>
           <ButtonGroup variant="contained" color="primary">
-            <Tooltip title="Undo">
+            <Tooltip title={undoTooltip}>
               <Button
                 size="small"
                 color="primary"
@@ -120,7 +140,7 @@ export const ViewerControls = memo(({}) => {
                 <Mouse />
               </Button>
             </Tooltip>
-            <Tooltip title="Redo">
+            <Tooltip title={redoTooltip}>
               <Button
                 size="small"
                 color="primary"

diff --git a/js/components/preview/viewerControls/settingsControls.js b/js/components/preview/viewerControls/settingsControls.js
@@ -4,6 +4,7 @@ import { Drawer } from '../../common/Navigation/Drawer';
 import { BACKGROUND_COLOR, NGL_PARAMS } from '../../nglView/constants';
 import { useDispatch, useSelector } from 'react-redux';
 import { setNglViewParams } from '../../../reducers/ngl/actions';
+import { setNglBckGrndColor, setNglClipNear } from '../../../reducers/ngl/dispatchActions';
 import { NglContext } from '../../nglView/nglProvider';
 import { VIEWS } from '../../../constants/constants';
 
@@ -33,11 +34,13 @@ export const SettingControls = memo(({ open, onClose }) => {
 
   const handleStageColor = () => {
     if (viewParams[NGL_PARAMS.backgroundColor] === BACKGROUND_COLOR.white) {
-      dispatch(setNglViewParams(NGL_PARAMS.backgroundColor, BACKGROUND_COLOR.black, majorView));
-      dispatch(setNglViewParams(NGL_PARAMS.backgroundColor, BACKGROUND_COLOR.black, summaryView));
+      dispatch(setNglBckGrndColor(BACKGROUND_COLOR.black, majorView, summaryView));
+      // dispatch(setNglViewParams(NGL_PARAMS.backgroundColor, BACKGROUND_COLOR.black, majorView, VIEWS.MAJOR_VIEW));
+      // dispatch(setNglViewParams(NGL_PARAMS.backgroundColor, BACKGROUND_COLOR.black, summaryView, VIEWS.SUMMARY_VIEW));
     } else {
-      dispatch(setNglViewParams(NGL_PARAMS.backgroundColor, BACKGROUND_COLOR.white, majorView));
-      dispatch(setNglViewParams(NGL_PARAMS.backgroundColor, BACKGROUND_COLOR.white, summaryView));
+      dispatch(setNglBckGrndColor(BACKGROUND_COLOR.white, majorView, summaryView));
+      // dispatch(setNglViewParams(NGL_PARAMS.backgroundColor, BACKGROUND_COLOR.white, majorView, VIEWS.MAJOR_VIEW));
+      // dispatch(setNglViewParams(NGL_PARAMS.backgroundColor, BACKGROUND_COLOR.white, summaryView, VIEWS.SUMMARY_VIEW));
     }
   };
 
@@ -68,7 +71,7 @@ export const SettingControls = memo(({ open, onClose }) => {
               step={1}
               min={0}
               max={100}
-              onChange={(e, value) => dispatch(setNglViewParams(NGL_PARAMS.clipNear, value, majorView))}
+              onChange={(e, value) => dispatch(setNglClipNear(value, viewParams[NGL_PARAMS.clipNear], majorView))}
             />
           </Grid>
         </Grid>
@@ -83,7 +86,7 @@ export const SettingControls = memo(({ open, onClose }) => {
               step={1}
               min={0}
               max={100}
-              onChange={(e, value) => dispatch(setNglViewParams(NGL_PARAMS.clipFar, value, majorView))}
+              onChange={(e, value) => dispatch(setNglViewParams(NGL_PARAMS.clipFar, value, majorView, VIEWS.MAJOR_VIEW))}
             />
           </Grid>
         </Grid>
@@ -95,7 +98,7 @@ export const SettingControls = memo(({ open, onClose }) => {
             <TextField
               type="number"
               value={viewParams[NGL_PARAMS.clipDist]}
-              onChange={e => dispatch(setNglViewParams(NGL_PARAMS.clipDist, e.target.value, majorView))}
+              onChange={e => dispatch(setNglViewParams(NGL_PARAMS.clipDist, e.target.value, majorView, VIEWS.MAJOR_VIEW))}
               className={classes.textField}
             />
           </Grid>
@@ -111,7 +114,7 @@ export const SettingControls = memo(({ open, onClose }) => {
               step={1}
               min={0}
               max={100}
-              onChange={(e, value) => dispatch(setNglViewParams(NGL_PARAMS.fogNear, value, majorView))}
+              onChange={(e, value) => dispatch(setNglViewParams(NGL_PARAMS.fogNear, value, majorView, VIEWS.MAJOR_VIEW))}
             />
           </Grid>
         </Grid>
@@ -126,7 +129,7 @@ export const SettingControls = memo(({ open, onClose }) => {
               step={1}
               min={0}
               max={100}
-              onChange={(e, value) => dispatch(setNglViewParams(NGL_PARAMS.fogFar, value, majorView))}
+              onChange={(e, value) => dispatch(setNglViewParams(NGL_PARAMS.fogFar, value, majorView, VIEWS.MAJOR_VIEW))}
             />
           </Grid>
         </Grid>

diff --git a/js/components/routes/Routes.js b/js/components/routes/Routes.js
@@ -1,7 +1,7 @@
-import React, { memo, useContext } from 'react';
+import React, { memo, useContext, useEffect } from 'react';
 import { Box, IconButton, makeStyles, Snackbar, useTheme } from '@material-ui/core';
 import Header from '../header';
-import { Redirect, Route, Switch } from 'react-router-dom';
+import { Route, Switch, useLocation } from 'react-router-dom';
 import { Management } from '../management/management';
 import Tindspect from '../tindspect/Tindspect';
 import Landing from '../landing/Landing';
@@ -17,6 +17,8 @@ import { Projects } from '../projects';
 import { ProjectDetailSessionList } from '../projects/projectDetailSessionList';
 import { SessionRedirect } from '../snapshot/sessionRedirect';
 import { DirectDisplay } from '../direct/directDisplay';
+import { setSnapshotJustSaved } from '../snapshot/redux/actions';
+import { useDispatch } from 'react-redux';
 
 const useStyles = makeStyles(theme => ({
   content: {
@@ -31,6 +33,9 @@ const Routes = memo(() => {
   const { headerHeight, setHeaderHeight, snackBarTitle, setSnackBarTitle } = useContext(HeaderContext);
   const contentHeight = `calc(100vh - ${headerHeight}px - ${2 * theme.spacing(1)}px)`;
   const contentWidth = `100%`;
+
+  const dispatch = useDispatch();
+  const location = useLocation();
 
   const handleCloseSnackbar = (event, reason) => {
     if (reason === 'clickaway') {
@@ -39,6 +44,12 @@ const Routes = memo(() => {
     setSnackBarTitle(null);
   };
 
+  useEffect(() => {
+    // Reset the snapshot just saved flag on each route change
+    dispatch(setSnapshotJustSaved(undefined));
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location]);
+
   return (
     <Box minHeight="100vh" width="100%" margin={0}>
       <Header headerHeight={headerHeight} setHeaderHeight={setHeaderHeight} />

diff --git a/js/components/snapshot/redux/actions.js b/js/components/snapshot/redux/actions.js
@@ -45,3 +45,8 @@ export const setDisableRedirect = (disable = false) => ({
   type: constants.SET_DISABLE_REDIRECT,
   payload: disable
 });
+
+export const setSnapshotJustSaved = (saved) => ({
+  type: constants.SET_SNAPSHOT_JUST_SAVED,
+  payload: saved
+});
diff --git a/js/components/snapshot/redux/constants.js b/js/components/snapshot/redux/constants.js
@@ -17,5 +17,7 @@ export const constants = {
 
   SET_IS_OPEN_MODAL_BEFORE_EXIT: prefix + 'SET_IS_OPEN_MODAL_BEFORE_EXIT',
   SET_SELECTED_SNAPSHOT_TO_SWITCH: prefix + 'SET_SELECTED_SNAPSHOT_TO_SWITCH',
-  SET_DISABLE_REDIRECT: prefix + 'SET_DISABLE_REDIRECT'
+  SET_DISABLE_REDIRECT: prefix + 'SET_DISABLE_REDIRECT',
+
+  SET_SNAPSHOT_JUST_SAVED: prefix + 'SET_SNAPSHOT_JUST_SAVED'
 };
diff --git a/js/components/snapshot/redux/dispatchActions.js b/js/components/snapshot/redux/dispatchActions.js
@@ -7,7 +7,8 @@ import {
   setIsLoadingSnapshotDialog,
   setListOfSnapshots,
   setOpenSnapshotSavingDialog,
-  setSharedSnapshot
+  setSharedSnapshot,
+  setSnapshotJustSaved
 } from './actions';
 import { DJANGO_CONTEXT } from '../../../utils/djangoContext';
 import {
@@ -22,7 +23,7 @@ import moment from 'moment';
 import { setProteinLoadingState } from '../../../reducers/ngl/actions';
 import { reloadNglViewFromSnapshot } from '../../../reducers/ngl/dispatchActions';
 import { base_url, URLS } from '../../routes/constants';
-import { resetCurrentSnapshot, setCurrentSnapshot, setForceCreateProject } from '../../projects/redux/actions';
+import { resetCurrentSnapshot, setCurrentSnapshot, setForceCreateProject, setForceProjectCreated } from '../../projects/redux/actions';
 import { selectFirstMolGroup } from '../../preview/moleculeGroups/redux/dispatchActions';
 import { reloadDatasetsReducer } from '../../datasets/redux/actions';
 import {
@@ -32,6 +33,7 @@ import {
   manageSendTrackingActions
 } from '../../../reducers/tracking/dispatchActions';
 import { captureScreenOfSnapshot } from '../../userFeedback/browserApi';
+import { setCurrentProject } from '../../projects/redux/actions';
 
 export const getListOfSnapshots = () => (dispatch, getState) => {
   const userID = DJANGO_CONTEXT['pk'] || null;
@@ -225,6 +227,8 @@ export const createNewSnapshot = ({
       api({ url: `${base_url}/api/snapshots/?session_project=${session_project}&type=INIT` }).then(response => {
         if (response.data.count === 0) {
           newType = SnapshotType.INIT;
+          // Without this, the snapshot tree wouldnt work
+          dispatch(setForceProjectCreated(false));
         }
 
         return api({
@@ -248,13 +252,53 @@ export const createNewSnapshot = ({
 
             Promise.resolve(dispatch(saveCurrentActionsList(snapshot, project, nglViewList))).then(() => {
               if (disableRedirect === false) {
-                // Really bad usage or redirection. Hint for everybody in this line ignore it, but in other parts of code
-                // use react-router !
-                window.location.replace(
+                // A hacky way of changing the URL without triggering react-router
+                window.history.replaceState(
+                  null, null,
                   `${URLS.projects}${session_project}/${
                     selectedSnapshotToSwitch === null ? res.data.id : selectedSnapshotToSwitch
                   }`
                 );
+                api({ url: `${base_url}/api/session-projects/${session_project}/` }).then(async projectResponse => {
+                  const response = await api({ url: `${base_url}/api/snapshots/?session_project=${session_project}` });
+                  const length = response.data.results.length;
+                  if (length === 0) {
+                    dispatch(resetCurrentSnapshot());
+                  } else if (response.data.results[length - 1] !== undefined) {
+                    // If the tree fails to load, bail out first without modifying the store
+                    dispatch(loadSnapshotTree(projectResponse.data.id));
+                    // Pick the latest snapshot which should be the last one
+                    dispatch(
+                      setCurrentSnapshot({
+                        id: response.data.results[length - 1].id,
+                        type: response.data.results[length - 1].type,
+                        title: response.data.results[length - 1].title,
+                        author: response.data.results[length - 1].author,
+                        description: response.data.results[length - 1].description,
+                        created: response.data.results[length - 1].created,
+                        children: response.data.results[length - 1].children,
+                        parent: response.data.results[length - 1].parent,
+                        data: '[]'
+                      })
+                    );
+                    dispatch(
+                      setCurrentProject({
+                        projectID: projectResponse.data.id,
+                        authorID: (projectResponse.data.author && projectResponse.data.author.id) || null,
+                        title: projectResponse.data.title,
+                        description: projectResponse.data.description,
+                        targetID: projectResponse.data.target.id,
+                        tags: JSON.parse(projectResponse.data.tags)
+                      })
+                    );
+                    dispatch(setOpenSnapshotSavingDialog(false));
+                    dispatch(setIsLoadingSnapshotDialog(false));
+                    dispatch(setSnapshotJustSaved(projectResponse.data.id));
+                  }
+                }).catch(error => {
+                  dispatch(resetCurrentSnapshot());
+                  dispatch(setIsLoadingSnapshotDialog(false));
+                });
               } else {
                 dispatch(setOpenSnapshotSavingDialog(false));
                 dispatch(setIsLoadingSnapshotDialog(false));

diff --git a/js/components/snapshot/redux/reducer.js b/js/components/snapshot/redux/reducer.js
@@ -21,7 +21,8 @@ export const INITIAL_STATE = {
   sharedSnapshot: initSharedSnapshot,
   isOpenModalSaveSnapshotBeforeExit: false,
   selectedSnapshotToSwitch: null,
-  disableRedirect: false
+  disableRedirect: false,
+  snapshotJustSaved: false
 };
 
 export const snapshotReducers = (state = INITIAL_STATE, action = {}) => {
@@ -88,6 +89,12 @@ export const snapshotReducers = (state = INITIAL_STATE, action = {}) => {
         disableRedirect: action.payload
       });
 
+    case constants.SET_SNAPSHOT_JUST_SAVED: {
+      return Object.assign({}, state, {
+        snapshotJustSaved: action.payload
+      });
+    }
+
     default:
       return state;
   }