#469 Make ideas/actions pretty and recognisable

m2ms · Dec 14, 2020 · 4772600 · 4772600
1 parent c21b228
commit 4772600
Show file tree

Hide file tree

Showing 8 changed files with 291 additions and 168 deletions.
diff --git a/js/components/snapshot/redux/dispatchActions.js b/js/components/snapshot/redux/dispatchActions.js
@@ -27,6 +27,7 @@ import { selectFirstMolGroup } from '../../preview/moleculeGroups/redux/dispatch
 import { reloadDatasetsReducer } from '../../datasets/redux/actions';
 import { saveCurrentActionsList } from '../../../reducers/tracking/dispatchActions';
 import { sendTrackingActionsByProjectId, manageSendTrackingActions } from '../../../reducers/tracking/dispatchActions';
+import { captureScreenOfSnapshot } from '../../userFeedback/browserApi';
 
 export const getListOfSnapshots = () => (dispatch, getState) => {
   const userID = DJANGO_CONTEXT['pk'] || null;
@@ -215,7 +216,10 @@ export const createNewSnapshot = ({ title, description, type, author, parent, se
       }).then(res => {
         // redirect to project with newest created snapshot /:projectID/:snapshotID
         if (res.data.id && session_project) {
-          Promise.resolve(dispatch(saveCurrentActionsList(res.data.id, session_project, nglViewList))).then(() => {
+          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 !
@@ -251,6 +255,7 @@ export const activateSnapshotDialog = (loggedInUserID = undefined, finallyShareS
   const projectID = state.projectReducers.currentProject.projectID;
   const currentSnapshotAuthor = state.projectReducers.currentSnapshot.author;
 
+  dispatch(captureScreenOfSnapshot());
   dispatch(manageSendTrackingActions());
   dispatch(setDisableRedirect(finallyShareSnapshot));
 
@@ -321,7 +326,10 @@ export const createNewSnapshotWithoutStateModification = ({
             disableRedirect: true
           })
         );
-        dispatch(saveCurrentActionsList(res.data.id, session_project, nglViewList));
+
+        let snapshot = { id: res.data.id, title: title };
+        let project = { projectID: session_project, authorID: author };
+        dispatch(saveCurrentActionsList(snapshot, project, nglViewList));
       }
     });
   });
@@ -332,6 +340,7 @@ export const saveAndShareSnapshot = nglViewList => (dispatch, getState) => {
   const targetId = state.apiReducers.target_on;
   const loggedInUserID = DJANGO_CONTEXT['pk'];
 
+  dispatch(captureScreenOfSnapshot());
   dispatch(setDisableRedirect(true));
 
   if (targetId) {

diff --git a/js/components/tracking/timelineView.js b/js/components/tracking/timelineView.js
@@ -1,38 +1,52 @@
 import React, { useState, useRef, memo } from 'react';
-import { useDispatch } from 'react-redux';
-import { makeStyles, IconButton, Tooltip, Grid } from '@material-ui/core';
+import { useDispatch, useSelector } from 'react-redux';
+import { makeStyles, IconButton, Tooltip, Grid, Box, Chip } from '@material-ui/core';
 import { Check, Clear, Warning, Favorite, Star } from '@material-ui/icons';
 import { actionAnnotation } from '../../reducers/tracking/constants';
 import { TimelineEvent } from 'react-event-timeline';
 import EditableText from './editableText';
 import palette from '../../theme/palette';
 import { updateTrackingActions } from '../../reducers/tracking/dispatchActions';
+import { actionType } from '../../reducers/tracking/constants';
+import Gallery from 'react-grid-gallery';
 
 const useStyles = makeStyles(theme => ({
   headerGrid: {
-    height: '25px'
+    height: '15px'
   },
   grid: {
     height: 'inherit'
   },
   iconButton: {
-    padding: '6px'
+    padding: '6px',
+    paddingTop: '0px'
   },
   timelineEvent: {
     borderBottom: '1px dashed ' + palette.divider,
     paddingBottom: '10px'
+  },
+  title: {
+    position: 'relative',
+    paddingLeft: '45px',
+    textAlign: 'left',
+    fontWeight: 'bold'
+  },
+  titleMargin: {
+    marginRight: '5px'
   }
 }));
 
 const TimelineView = memo(({ data, index }) => {
   const dispatch = useDispatch();
+  const classes = useStyles();
+
+  const currentSnapshotID = useSelector(state => state.projectReducers.currentSnapshot.id);
+  let isSelected = currentSnapshotID === data.object_id;
 
   const ref = useRef(null);
   const [isHovering, setIsHovering] = useState(false);
   const [updatedIcon, setUpdatedIcon] = useState(null);
 
-  const classes = useStyles();
-
   const getActionIcon = annotation => {
     if (annotation) {
       switch (annotation) {
@@ -127,44 +141,85 @@ const TimelineView = memo(({ data, index }) => {
     dispatch(updateTrackingActions(data));
   };
 
+  const IMAGES = [
+    {
+      src: data.image,
+      thumbnail: data.image,
+      thumbnailWidth: 0,
+      thumbnailHeight: 0,
+      caption: data.object_name
+    }
+  ];
+
   return (
     <div ref={ref} onMouseEnter={() => setIsHovering(true)} onMouseLeave={() => setIsHovering(false)}>
-      <TimelineEvent
-        key={index}
-        title={
-          <div>
-            <Grid container justify="flex-start" direction="row" alignItems="center" className={classes.headerGrid}>
-              {
-                <Grid item xs={8} className={classes.grid}>
-                  <EditableText dataText={data.text} index={index} updateText={updateDataText} />
-                </Grid>
-              }
-              {isHovering && (
-                <Grid
-                  container
-                  item
-                  justify="flex-end"
-                  direction="row"
-                  alignItems="flex-end"
-                  xs={4}
-                  className={classes.grid}
-                >
-                  {annotationActions &&
-                    annotationActions.map((action, index) => (
-                      <Grid item key={index}>
-                        {action}
-                      </Grid>
-                    ))}
+      {data.type && data.type === actionType.SNAPSHOT ? (
+        <>
+          <Grid container justify="flex-start" direction="row" alignItems="center" className={classes.title}>
+            {isSelected && (
+              <Box xs={2} className={classes.titleMargin} flexShrink={1}>
+                <Chip color="primary" size="small" label={`selected snapshot`} />
+              </Box>
+            )}
+            {
+              <Box xs={6} flexShrink={1} className={classes.titleMargin}>
+                {`${data.text}`}
+              </Box>
+            }
+            {
+              <Grid item xs={2}>
+                <Gallery
+                  images={IMAGES}
+                  enableImageSelection={false}
+                  backdropClosesModal={true}
+                  showImageCount={false}
+                  lightboxWidth={2048}
+                  rowHeight={30}
+                />
+              </Grid>
+            }
+          </Grid>
+        </>
+      ) : (
+        <>
+          <TimelineEvent
+            key={index}
+            title={
+              <div>
+                <Grid container justify="flex-start" direction="row" alignItems="center" className={classes.headerGrid}>
+                  {
+                    <Grid item xs={8} className={classes.grid}>
+                      <EditableText dataText={data.text} index={index} updateText={updateDataText} />
+                    </Grid>
+                  }
+                  {isHovering && (
+                    <Grid
+                      container
+                      item
+                      justify="flex-end"
+                      direction="row"
+                      alignItems="flex-end"
+                      xs={4}
+                      className={classes.grid}
+                    >
+                      {annotationActions &&
+                        annotationActions.map((action, index) => (
+                          <Grid item key={index}>
+                            {action}
+                          </Grid>
+                        ))}
+                    </Grid>
+                  )}
                 </Grid>
-              )}
-            </Grid>
-          </div>
-        }
-        createdAt={new Date(data.timestamp).toLocaleString()}
-        icon={updatedIcon && updatedIcon != null ? getActionIcon(updatedIcon) : getActionIcon(data.annotation)}
-        iconColor={palette.primary.main}
-        className={classes.timelineEvent}
-      ></TimelineEvent>
+              </div>
+            }
+            createdAt={new Date(data.timestamp).toLocaleString()}
+            icon={updatedIcon && updatedIcon != null ? getActionIcon(updatedIcon) : getActionIcon(data.annotation)}
+            iconColor={palette.primary.main}
+            className={classes.timelineEvent}
+          ></TimelineEvent>
+        </>
+      )}
     </div>
   );
 });

diff --git a/js/components/userFeedback/browserApi.js b/js/components/userFeedback/browserApi.js
@@ -1,5 +1,6 @@
 import { setImageSource, setIsOpenForm } from './redux/actions';
-
+import { setTrackingImageSource } from '../../reducers/tracking/actions';
+import html2canvas from 'html2canvas';
 /* Getting image from screen capture or  */
 
 // https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser
@@ -81,3 +82,9 @@ export const captureScreen = () => async dispatch => {
   dispatch(setImageSource(image));
   dispatch(setIsOpenForm(true));
 };
+
+export const captureScreenOfSnapshot = () => async dispatch => {
+  html2canvas(document.body).then(canvas => {
+    dispatch(setTrackingImageSource(canvas.toDataURL()));
+  });
+};
diff --git a/js/reducers/tracking/actions.js b/js/reducers/tracking/actions.js
@@ -104,3 +104,8 @@ export const resetTrackingState = function() {
     type: constants.RESET_TRACKING_STATE
   };
 };
+
+export const setTrackingImageSource = imageSource => ({
+  type: constants.SET_TRACKING_IMAGE_SOURCE,
+  payload: imageSource
+});
diff --git a/js/reducers/tracking/constants.js b/js/reducers/tracking/constants.js
@@ -15,7 +15,8 @@ export const constants = {
   SET_PROJECT_ACTIONS_LIST: prefix + 'SET_PROJECT_ACTIONS_LIST',
   SET_IS_ACTIONS_SAVING: prefix + 'SET_IS_ACTIONS_SAVING',
   SET_IS_ACTIONS_RESTORING: prefix + 'SET_IS_ACTIONS_RESTORING',
-  RESET_TRACKING_STATE: prefix + 'RESET_TRACKING_STATE'
+  RESET_TRACKING_STATE: prefix + 'RESET_TRACKING_STATE',
+  SET_TRACKING_IMAGE_SOURCE: prefix + 'SET_TRACKING_IMAGE_SOURCE'
 };
 
 export const actionType = {
@@ -44,6 +45,7 @@ export const actionType = {
   NGL_STATE: 'NGL_STATE',
   UNDO: 'UNDO',
   REDO: 'REDO',
+  SNAPSHOT: 'SNAPSHOT',
   ALL_HIDE: 'ALL_HIDE',
   ALL_TURNED_ON: 'ALL_TURNED_ON',
   ALL_TURNED_OFF: 'ALL_TURNED_OFF',