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

m2ms · Jan 18, 2021 · 29e4ff4 · 29e4ff4
2 parents 030155a + bc7ee58
commit 29e4ff4
Show file tree

Hide file tree

Showing 10 changed files with 280 additions and 124 deletions.
diff --git a/js/components/preview/viewerControls/displayControls/index.js b/js/components/preview/viewerControls/displayControls/index.js
@@ -9,7 +9,8 @@ import { NglContext } from '../../../nglView/nglProvider';
 import {
   addComponentRepresentation,
   removeComponentRepresentation,
-  updateComponentRepresentation
+  updateComponentRepresentation,
+  changeComponentRepresentation
 } from '../../../../reducers/ngl/actions';
 import { deleteObject } from '../../../../reducers/ngl/dispatchActions';
 import { MOL_REPRESENTATION, OBJECT_TYPE, SELECTION_TYPE } from '../../../nglView/constants';
@@ -71,10 +72,12 @@ export default memo(({ open, onClose }) => {
       oldRepresentation.lastKnownID
     );
     // add new representation to redux
-    dispatch(addComponentRepresentation(parentKey, newRepresentation));
+    dispatch(addComponentRepresentation(parentKey, newRepresentation, true));
 
     // remove previous representation from NGL
-    removeRepresentation(representation, parentKey);
+    removeRepresentation(representation, parentKey, true);
+
+    dispatch(changeComponentRepresentation(parentKey, oldRepresentation, newRepresentation));
   };
 
   const addMolecularRepresentation = (parentKey, e) => {
@@ -88,7 +91,7 @@ export default memo(({ open, onClose }) => {
     dispatch(addComponentRepresentation(parentKey, newRepresentation));
   };
 
-  const removeRepresentation = (representation, parentKey) => {
+  const removeRepresentation = (representation, parentKey, skipTracking) => {
     const nglView = getNglView(objectsInView[parentKey].display_div);
     const comp = nglView.stage.getComponentsByName(parentKey).first;
     let foundedRepresentation = undefined;
@@ -107,7 +110,7 @@ export default memo(({ open, onClose }) => {
         // remove from nglReducer and selectionReducer
         dispatch(deleteObject(targetObject, nglView.stage, true));
       } else {
-        dispatch(removeComponentRepresentation(parentKey, representation));
+        dispatch(removeComponentRepresentation(parentKey, representation, skipTracking));
       }
     }
   };

diff --git a/js/components/snapshot/modals/newSnapshotForm.js b/js/components/snapshot/modals/newSnapshotForm.js
@@ -1,5 +1,5 @@
 import React, { memo, useState, useContext } from 'react';
-import { Grid, makeStyles, Typography } from '@material-ui/core';
+import { Grid, makeStyles, Typography, Checkbox, FormControlLabel } from '@material-ui/core';
 import { useDispatch, useSelector } from 'react-redux';
 import { DJANGO_CONTEXT } from '../../../utils/djangoContext';
 import { Form, Formik, Field } from 'formik';
@@ -28,6 +28,9 @@ const useStyles = makeStyles(theme => ({
   formControl: {
     margin: theme.spacing(1),
     width: 400
+  },
+  checkbox: {
+    margin: theme.spacing(0)
   }
 }));
 
@@ -36,15 +39,25 @@ export const NewSnapshotForm = memo(({ handleCloseModal }) => {
   const [state, setState] = useState();
   const dispatch = useDispatch();
   const { nglViewList } = useContext(NglContext);
+  const [overwriteSnapshot, setoverwriteSnapshot] = useState(false);
 
   const currentSnapshot = useSelector(state => state.projectReducers.currentSnapshot);
   const currentProject = useSelector(state => state.projectReducers.currentProject);
   const isLoadingSnapshotDialog = useSelector(state => state.snapshotReducers.isLoadingSnapshotDialog);
   const isForceProjectCreated = useSelector(state => state.projectReducers.isForceProjectCreated);
 
+  const currentSnapshotId = currentSnapshot && currentSnapshot.id;
   const loggedInUserID = DJANGO_CONTEXT['pk'];
   const username = DJANGO_CONTEXT['username'];
 
+  const toggleoverwriteSnapshot = () => {
+    if (overwriteSnapshot === true) {
+      setoverwriteSnapshot(false);
+    } else {
+      setoverwriteSnapshot(true);
+    }
+  };
+
   return (
     <>
       <Typography variant="h3">Snapshot details</Typography>
@@ -73,13 +86,22 @@ export const NewSnapshotForm = memo(({ handleCloseModal }) => {
           const parent = isForceProjectCreated === false ? currentSnapshot.id : null;
           const session_project = currentProject.projectID;
 
-          dispatch(createNewSnapshot({ title, description, type, author, parent, session_project, nglViewList })).catch(
-            error => {
-              setState(() => {
-                throw error;
-              });
-            }
-          );
+          dispatch(
+            createNewSnapshot({
+              title,
+              description,
+              type,
+              author,
+              parent,
+              session_project,
+              nglViewList,
+              overwriteSnapshot
+            })
+          ).catch(error => {
+            setState(() => {
+              throw error;
+            });
+          });
         }}
       >
         {({ submitForm, isSubmitting }) => (
@@ -115,6 +137,25 @@ export const NewSnapshotForm = memo(({ handleCloseModal }) => {
                   }
                 />
               </Grid>
+              {currentSnapshotId && (
+                <Grid item>
+                  <FormControlLabel
+                    control={
+                      <Checkbox
+                        name="overwrite"
+                        color="primary"
+                        onChange={() => {
+                          toggleoverwriteSnapshot();
+                        }}
+                      />
+                    }
+                    label="Overwrite current snapshot"
+                    labelPlacement="end"
+                    className={classes.checkbox}
+                    disabled={isLoadingSnapshotDialog || isSubmitting}
+                  />
+                </Grid>
+              )}
             </Grid>
             <Grid container justify="flex-end" direction="row">
               <Grid item>

diff --git a/js/components/snapshot/redux/dispatchActions.js b/js/components/snapshot/redux/dispatchActions.js
@@ -25,8 +25,12 @@ import { base_url, URLS } from '../../routes/constants';
 import { resetCurrentSnapshot, setCurrentSnapshot, setForceCreateProject } from '../../projects/redux/actions';
 import { selectFirstMolGroup } from '../../preview/moleculeGroups/redux/dispatchActions';
 import { reloadDatasetsReducer } from '../../datasets/redux/actions';
-import { saveCurrentActionsList } from '../../../reducers/tracking/dispatchActions';
-import { sendTrackingActionsByProjectId, manageSendTrackingActions } from '../../../reducers/tracking/dispatchActions';
+import {
+  saveCurrentActionsList,
+  addCurrentActionsListToSnapshot,
+  sendTrackingActionsByProjectId,
+  manageSendTrackingActions
+} from '../../../reducers/tracking/dispatchActions';
 import { captureScreenOfSnapshot } from '../../userFeedback/browserApi';
 
 export const getListOfSnapshots = () => (dispatch, getState) => {
@@ -179,71 +183,95 @@ export const createInitSnapshotFromCopy = ({
   return Promise.reject('ProjectID is missing');
 };
 
-export const createNewSnapshot = ({ title, description, type, author, parent, session_project, nglViewList }) => (
-  dispatch,
-  getState
-) => {
+export const createNewSnapshot = ({
+  title,
+  description,
+  type,
+  author,
+  parent,
+  session_project,
+  nglViewList,
+  overwriteSnapshot
+}) => (dispatch, getState) => {
   const state = getState();
   const selectedSnapshotToSwitch = state.snapshotReducers.selectedSnapshotToSwitch;
   const disableRedirect = state.snapshotReducers.disableRedirect;
+  const currentSnapshot = state.projectReducers.currentSnapshot;
+  const currentSnapshotId = currentSnapshot && currentSnapshot.id;
 
   if (!session_project) {
     return Promise.reject('Project ID is missing!');
   }
 
-  let newType = type;
-
-  return Promise.all([
-    dispatch(setIsLoadingSnapshotDialog(true)),
-    api({ url: `${base_url}/api/snapshots/?session_project=${session_project}&type=INIT` }).then(response => {
-      if (response.data.count === 0) {
-        newType = SnapshotType.INIT;
+  if (overwriteSnapshot === true && currentSnapshotId) {
+    dispatch(setIsLoadingSnapshotDialog(true));
+    let project = { projectID: session_project, authorID: author };
+
+    return Promise.resolve(dispatch(addCurrentActionsListToSnapshot(currentSnapshot, project, nglViewList))).then(
+      () => {
+        if (disableRedirect === false && selectedSnapshotToSwitch != null) {
+          window.location.replace(`${URLS.projects}${session_project}/${selectedSnapshotToSwitch}`);
+        } else {
+          dispatch(setIsLoadingSnapshotDialog(false));
+          dispatch(setOpenSnapshotSavingDialog(false));
+        }
       }
+    );
+  } else {
+    let newType = type;
 
-      return api({
-        url: `${base_url}/api/snapshots/`,
-        data: {
-          title,
-          description,
-          type: newType,
-          author,
-          parent,
-          session_project,
-          data: '[]',
-          children: []
-        },
-        method: METHOD.POST
-      }).then(res => {
-        // redirect to project with newest created snapshot /:projectID/:snapshotID
-        if (res.data.id && session_project) {
-          let snapshot = { id: res.data.id, title: title };
-          let project = { projectID: session_project, authorID: author };
-
-          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(
-                `${URLS.projects}${session_project}/${
-                  selectedSnapshotToSwitch === null ? res.data.id : selectedSnapshotToSwitch
-                }`
-              );
-            } else {
-              dispatch(setOpenSnapshotSavingDialog(false));
-              dispatch(setIsLoadingSnapshotDialog(false));
-              dispatch(
-                setSharedSnapshot({
-                  title,
-                  description,
-                  url: `${base_url}${URLS.projects}${session_project}/${res.data.id}`
-                })
-              );
-            }
-          });
+    return Promise.all([
+      dispatch(setIsLoadingSnapshotDialog(true)),
+      api({ url: `${base_url}/api/snapshots/?session_project=${session_project}&type=INIT` }).then(response => {
+        if (response.data.count === 0) {
+          newType = SnapshotType.INIT;
         }
-      });
-    })
-  ]);
+
+        return api({
+          url: `${base_url}/api/snapshots/`,
+          data: {
+            title,
+            description,
+            type: newType,
+            author,
+            parent,
+            session_project,
+            data: '[]',
+            children: []
+          },
+          method: METHOD.POST
+        }).then(res => {
+          // redirect to project with newest created snapshot /:projectID/:snapshotID
+          if (res.data.id && session_project) {
+            let snapshot = { id: res.data.id, title: title };
+            let project = { projectID: session_project, authorID: author };
+
+            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(
+                  `${URLS.projects}${session_project}/${
+                    selectedSnapshotToSwitch === null ? res.data.id : selectedSnapshotToSwitch
+                  }`
+                );
+              } else {
+                dispatch(setOpenSnapshotSavingDialog(false));
+                dispatch(setIsLoadingSnapshotDialog(false));
+                dispatch(
+                  setSharedSnapshot({
+                    title,
+                    description,
+                    url: `${base_url}${URLS.projects}${session_project}/${res.data.id}`
+                  })
+                );
+              }
+            });
+          }
+        });
+      })
+    ]);
+  }
 };
 
 export const activateSnapshotDialog = (loggedInUserID = undefined, finallyShareSnapshot = false) => (
@@ -329,7 +357,7 @@ export const createNewSnapshotWithoutStateModification = ({
 
         let snapshot = { id: res.data.id, title: title };
         let project = { projectID: session_project, authorID: author };
-        dispatch(saveCurrentActionsList(snapshot, project, nglViewList));
+        dispatch(saveCurrentActionsList(snapshot, project, nglViewList, true));
       }
     });
   });

diff --git a/js/index.js b/js/index.js
@@ -5,7 +5,6 @@ import { DJANGO_CONTEXT } from './utils/djangoContext';
 // Sentry logging
 import { init, configureScope } from '@sentry/browser';
 // Setup log rocket logging
-import LogRocket from 'logrocket';
 import { Provider } from 'react-redux';
 import { applyMiddleware, createStore } from 'redux';
 import { rootReducer } from './reducers/rootReducer';
@@ -16,27 +15,6 @@ import { composeWithDevTools } from 'redux-devtools-extension';
 
 require('react-hot-loader/patch');
 
-if (process.env.NODE_ENV === 'production') {
-  LogRocket.init('eoalzb/fragalysis');
-  // This is the log rocket setup
-
-  LogRocket.identify(DJANGO_CONTEXT['username'], {
-    pk: DJANGO_CONTEXT['pk'],
-    name: DJANGO_CONTEXT['name'],
-    email: DJANGO_CONTEXT['email']
-  });
-
-  init({
-    dsn: 'https://27fa0675f555431aa02ca552e93d8cfb@sentry.io/1298290'
-  });
-
-  LogRocket.getSessionURL(sessionURL => {
-    configureScope(scope => {
-      scope.setExtra('logRocketURL', sessionURL);
-    });
-  });
-}
-
 const middlewareEnhancer = applyMiddleware(
   //loggerMiddleware,
   thunkMiddleware,

diff --git a/js/reducers/ngl/actions.js b/js/reducers/ngl/actions.js
@@ -20,15 +20,24 @@ export const updateComponentRepresentation = (objectInViewID, representationID,
   change
 });
 
-export const addComponentRepresentation = (objectInViewID, newRepresentation) => ({
+export const addComponentRepresentation = (objectInViewID, newRepresentation, skipTracking = false) => ({
   type: CONSTANTS.ADD_COMPONENT_REPRESENTATION,
   newRepresentation,
-  objectInViewID
+  objectInViewID,
+  skipTracking
 });
 
-export const removeComponentRepresentation = (objectInViewID, representation) => ({
+export const removeComponentRepresentation = (objectInViewID, representation, skipTracking = false) => ({
   type: CONSTANTS.REMOVE_COMPONENT_REPRESENTATION,
   representation,
+  objectInViewID,
+  skipTracking
+});
+
+export const changeComponentRepresentation = (objectInViewID, oldRepresentation, newRepresentation) => ({
+  type: CONSTANTS.CHANGE_COMPONENT_REPRESENTATION,
+  oldRepresentation,
+  newRepresentation,
   objectInViewID
 });
 
@@ -91,5 +100,5 @@ export const removeMoleculeOrientation = moleculeGroupID => ({
 
 export const addToPdbCache = (name, cacheItem) => ({
   type: CONSTANTS.ADD_TO_PDB_CACHE,
-  payload: {name: name, cacheItem: cacheItem}
+  payload: { name: name, cacheItem: cacheItem }
 });
diff --git a/js/reducers/ngl/constants.js b/js/reducers/ngl/constants.js
@@ -7,6 +7,7 @@ export const CONSTANTS = {
   UPDATE_COMPONENT_REPRESENTATION: prefix + 'UPDATE_COMPONENT_REPRESENTATION',
   REMOVE_COMPONENT_REPRESENTATION: prefix + 'REMOVE_COMPONENT_REPRESENTATION',
   ADD_COMPONENT_REPRESENTATION: prefix + 'ADD_COMPONENT_REPRESENTATION',
+  CHANGE_COMPONENT_REPRESENTATION: prefix + 'CHANGE_COMPONENT_REPRESENTATION',
 
   SET_NGL_VIEW_PARAMS: prefix + 'SET_NGL_VIEW_PARAMS',
   SET_ORIENTATION: prefix + 'SET_ORIENTATION',