Merge branch 'staging' into #944

docker-compose.dev.vector.yml

@@ -30,7 +30,7 @@ services:
   web:
     container_name: web_dock
     image: xchem/fragalysis-stack:latest
-    # image: alanbchristie/fragalysis-backend:937-b.7
+    # image: alanbchristie/fragalysis-backend:1069.4
     command: /bin/bash /code/launch-stack.sh
     volumes:
       - ../data/logs:/code/logs/

js/components/common/Components/SearchField/index.js

@@ -31,14 +31,15 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-const SearchField = ({ className, id, placeholder, size, onChange, disabled }) => {
+const SearchField = ({ className, id, placeholder, size, onChange, disabled, searchString }) => {
   const classes = useStyles();
+  let value = searchString ??  '';
 
   const debounced = useMemo(
     () =>
       debounce(value => {
         onChange(value);
-      }, 350),
+      }, 1000),
     [onChange]
   );
 
@@ -51,7 +52,7 @@ const SearchField = ({ className, id, placeholder, size, onChange, disabled }) =
     <TextField
       className={classNames(classes.search, className)}
       id={id}
-      placeholder={placeholder ?? 'Search'}
+      placeholder={placeholder ?? 'Search tags'}
       size={size}
       InputProps={{
         startAdornment: (
@@ -63,6 +64,8 @@ const SearchField = ({ className, id, placeholder, size, onChange, disabled }) =
       }}
       onChange={onChangeDebounced}
       disabled={disabled}
+      defaultValue={value ?? ''}
+      key={value}
     />
   );
 };

js/components/common/Modal/index.js

@@ -12,7 +12,8 @@ const useStyles = makeStyles(theme => ({
     backgroundColor: theme.palette.background.paper,
     borderRadius: theme.spacing(1) / 2,
     boxShadow: theme.shadows[0],
-    outline: 'none'
+    outline: 'none',
+    paddingBottom: '20px'
   },
   withPadding: {
     padding: theme.spacing(2, 4, 3)

js/components/common/ModalNewProject/AlertModal/index.js

@@ -0,0 +1,22 @@
+import React, { memo } from 'react';
+import { DialogTitle, DialogContent, DialogContentText, DialogActions, Button } from '@material-ui/core';
+import Modal from '../index';
+
+export const AlertModal = memo(({ open, title, description, handleOnOk, handleOnCancel }) => {
+  return (
+    <Modal open={open}>
+      <DialogTitle>{title}</DialogTitle>
+      <DialogContent>
+        <DialogContentText>{description}</DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={handleOnCancel} color="secondary" variant="contained">
+          Cancel
+        </Button>
+        <Button onClick={handleOnOk} color="primary" autoFocus variant="contained">
+          OK
+        </Button>
+      </DialogActions>
+    </Modal>
+  );
+});

js/components/common/ModalNewProject/index.js

@@ -0,0 +1,102 @@
+import { CircularProgress, makeStyles, Modal as MaterialModal } from '@material-ui/core';
+import React, { memo } from 'react';
+import classNames from 'classnames';
+import useResizeObserver from '../../../utils/useResizeObserver';
+import { useSelector } from 'react-redux';
+
+const useStyles = makeStyles(theme => ({
+  paper: {
+    position: 'absolute',
+    top: '204px',
+    transform: 'translate(-50%, -50%)',
+    backgroundColor: theme.palette.background.paper,
+    borderRadius: theme.spacing(1) / 2,
+    boxShadow: theme.direction[0],
+    outline: 'none',
+    border: '#3f51b5',
+    borderWidth: '2px',
+    borderStyle: 'solid',
+    zIndex: '1300'
+  },
+  withPadding: {
+    //padding: theme.spacing(2, 4, 3)
+  },
+  resizable: {
+    resize: 'both',
+    overflow: 'hidden'
+  }
+}));
+
+let absoluteTitleLength = 0;
+
+export const ModalNewProject = memo(
+  ({
+    children,
+    open,
+    loading,
+    onClose,
+    noPadding,
+    resizable,
+    onResize,
+    otherClasses,
+    otherContentClasses,
+    modalBackground,
+    ...rest
+  }) => {
+
+    const addButton = useSelector(state => state.projectReducers.addButton);
+
+     // counting title width for fixed position modal window for create new project
+    const defaultTitleLength = 445;
+    const titleLength =  document.getElementById("headerNavbarTitle");
+    const totalScreenWidth = window.innerWidth;
+    let newTitleLength = 0;
+
+    if (addButton === true) {
+      absoluteTitleLength = totalScreenWidth - defaultTitleLength +170;
+    }
+    else {
+        if (titleLength !== null) {
+          newTitleLength = titleLength.offsetWidth;
+        }
+        absoluteTitleLength = defaultTitleLength + newTitleLength; 
+     }
+    const classes = useStyles();
+    const content = loading ? <CircularProgress /> : children;
+
+    const [containerDiv] = useResizeObserver(onResize);
+
+    return (
+      <MaterialModal
+        open={open}
+        onClose={onClose}
+        {...rest}
+        style={{position: 'none'}}
+      >
+         <div>      
+        <div
+          style={addButton === true ? {left: absoluteTitleLength + 'px', top: '249px'} :{left: absoluteTitleLength + 'px'} }
+          ref={containerDiv}
+          className={classNames(
+            classes.paper,
+            {
+              [classes.resizable]: resizable
+            },
+            { [otherClasses]: !!otherClasses }
+          )}
+        >
+          <div
+          /*  className={classNames(noPadding ? undefined : classes.withPadding, {
+              [otherContentClasses]: !!otherContentClasses
+            })}*/
+          >
+            {content}
+          </div>
+        </div>
+        </div>
+      </MaterialModal>
+    );
+  }
+);
+
+export default ModalNewProject;

js/components/common/ModalSaveSnapshot/AlertModal/index.js

@@ -0,0 +1,22 @@
+import React, { memo } from 'react';
+import { DialogTitle, DialogContent, DialogContentText, DialogActions, Button } from '@material-ui/core';
+import Modal from '../index';
+
+export const AlertModal = memo(({ open, title, description, handleOnOk, handleOnCancel }) => {
+  return (
+    <Modal open={open}>
+      <DialogTitle>{title}</DialogTitle>
+      <DialogContent>
+        <DialogContentText>{description}</DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={handleOnCancel} color="secondary" variant="contained">
+          Cancel
+        </Button>
+        <Button onClick={handleOnOk} color="primary" autoFocus variant="contained">
+          OK
+        </Button>
+      </DialogActions>
+    </Modal>
+  );
+});

js/components/common/ModalSaveSnapshot/index.js

@@ -0,0 +1,105 @@
+import { CircularProgress, makeStyles, Modal as MaterialModal } from '@material-ui/core';
+import React, { memo } from 'react';
+import classNames from 'classnames';
+import useResizeObserver from '../../../utils/useResizeObserver';
+import { useSelector } from 'react-redux';
+
+const useStyles = makeStyles(theme => ({
+  paper: {
+    position: 'absolute',
+    top: '175px',
+    transform: 'translate(-50%, -50%)',
+    backgroundColor: theme.palette.background.paper,
+    borderRadius: theme.spacing(1) / 2,
+    boxShadow: theme.shadows[0],
+    outline: 'none',
+    border: '#3f51b5',
+    borderWidth: '2px',
+    borderStyle: 'solid',
+    zIndex: '1300'
+  },
+  paper2: {
+    position: 'absolute',
+    top: '203px',
+    transform: 'translate(-50%, -50%)',
+    backgroundColor: theme.palette.background.paper,
+    borderRadius: theme.spacing(1) / 2,
+    boxShadow: theme.shadows[0],
+    outline: 'none',
+    border: '#3f51b5',
+    borderWidth: '2px',
+    borderStyle: 'solid',
+    zIndex: '1300'
+  },
+  withPadding: {
+    //padding: theme.spacing(2, 4, 3)
+  },
+  resizable: {
+    resize: 'both',
+    overflow: 'hidden'
+  }
+}));
+
+export const ModalSaveSnapshot = memo(
+  ({
+    children,
+    open,
+    loading,
+    onClose,
+    noPadding,
+    resizable,
+    onResize,
+    otherClasses,
+    otherContentClasses,
+    ...rest
+  }) => {
+
+  // counting title width for fix position modal window for save new snapshot
+    const defaultTitleLength = 600;
+    const titleLength =  document.getElementById("headerNavbarTitle");
+    let newTitleLength = 0;
+    if (titleLength !== null) {
+      newTitleLength = titleLength.offsetWidth;
+    }
+    const absoluteTitleLength = defaultTitleLength + newTitleLength; // for fix popover/modal dialog under button
+    const currentSnapshotID = useSelector(state => state.projectReducers.currentSnapshot.id);
+
+    const classes = useStyles();
+    const content = loading ? <CircularProgress /> : children;
+
+    const [containerDiv] = useResizeObserver(onResize);
+
+    return (
+      <MaterialModal
+        aria-labelledby="simple-modal-title"
+        aria-describedby="simple-modal-description"
+        open={open}
+        onClose={onClose}
+        {...rest}
+        style={{position: 'none'}}
+      >
+        <div
+         style={{left: absoluteTitleLength + 'px'}}
+          ref={containerDiv}
+          className={classNames(
+            currentSnapshotID === null? classes.paper : classes.paper2,
+            {
+              [classes.resizable]: resizable
+            },
+            { [otherClasses]: !!otherClasses }
+          )}
+        >
+          <div
+            className={classNames(noPadding ? undefined : classes.withPadding, {
+              [otherContentClasses]: !!otherContentClasses
+            })}
+          >
+            {content}
+          </div>
+        </div>
+      </MaterialModal>
+    );
+  }
+);
+
+export default ModalSaveSnapshot;

js/components/common/Surfaces/Panel/index.js

@@ -21,7 +21,7 @@ const useStyles = makeStyles(theme => ({
   },
   body: {
     padding: theme.spacing(1),
-    overflow: 'auto',
+    overflow: 'hidden',
     height: '100%',
     flex: 1
   },