Feature/1605 add map save check

packages/coinstac-api-server/seed/data/coinstac-schema-regression-ss-fsl.json

@@ -35,14 +35,14 @@
         "covariates": {
           "label": "Covariates",
           "type": "csv",
-          "extensions": ["csv", "txt"],
           "items": ["boolean", "number"],
           "source": "member"
         },
         "data": {
           "label": "Data",
           "type": "freesurfer",
           "items": ["FreeSurfer"],
+          "extensions": ["csv", "txt"],
           "source": "owner"
         }
       },

packages/coinstac-desktop-app/app/render/components/maps/fields/maps-csv-field-pipeline-variable.jsx

@@ -9,19 +9,17 @@ import classNames from 'classnames';
 
 const styles = theme => ({
   rootPaper: {
-    marginTop: theme.spacing(1.5),
-    minWidth: '250px',
-    display: 'inline-flex',
+    display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
   },
   nestedListItem: {
     paddingLeft: theme.spacing(3),
   },
   listDropzoneContainer: {
-    flex: '1 0 auto',
     marginLeft: theme.spacing(0.5),
-    maxWidth: '80px',
+    minWidth: '80px',
+    width: 'fit-content',
   },
   dropZone: {
     flex: '1 0 auto',
@@ -57,10 +55,24 @@ function MapsCsvFieldPipelineVariable({
     <div>
       <div className={classNames('drop-panel', classes.rootPaper)}>
         <div>
-          <Typography style={{ fontWeight: '500', fontSize: '1rem' }} className={classes.title}>
+          <Typography
+            style={{
+              fontWeight: '500',
+              fontSize: '1rem',
+              color: mappedColumn ? 'black' : 'red',
+            }}
+            className={classes.title}
+          >
             {name}
           </Typography>
-          <Typography style={{ fontWeight: '500', fontSize: '1rem', color: 'green' }} className={classes.title}>
+          <Typography
+            style={{
+              fontWeight: '500',
+              fontSize: '1rem',
+              color: 'green',
+            }}
+            className={classes.title}
+          >
             {`${dataType}`}
           </Typography>
         </div>

packages/coinstac-desktop-app/app/render/components/maps/fields/maps-csv-field.jsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
+import Alert from '@material-ui/lab/Alert';
 import Typography from '@material-ui/core/Typography';
 import Grid from '@material-ui/core/Grid';
+import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
 import Tooltip from '@material-ui/core/Tooltip';
 import InfoIcon from '@material-ui/icons/Info';
@@ -50,6 +52,9 @@ const styles = theme => ({
   errorMessage: {
     color: red[400],
   },
+  alert: {
+    marginBottom: theme.spacing(1),
+  },
 });
 
 const drake = dragula({
@@ -152,6 +157,37 @@ class MapsCsvField extends React.Component {
     readFiles();
   }
 
+  getUnmappedFieldsWarningMessage = () => {
+    const { field, fieldDataMap } = this.props;
+
+    if (!fieldDataMap) {
+      return 'All fields are unmapped.';
+    }
+
+    const unmappedFields = field.value
+      .map(pipelineVariable => pipelineVariable.name)
+      .filter(name => !fieldDataMap.maps[name]);
+
+    if (unmappedFields.length === 0) {
+      return null;
+    }
+
+    if (unmappedFields.length === field.value.length) {
+      return 'All fields are unmapped.';
+    }
+
+    if (unmappedFields.length === 1) {
+      return `${unmappedFields[0]} is unmapped.`;
+    }
+
+    if (unmappedFields.length === 2) {
+      return `${unmappedFields.join(', ')} are unmapped.`;
+    }
+
+    return `${unmappedFields.slice(0, unmappedFields.length - 1).join(', ')}
+      and ${unmappedFields[unmappedFields.length - 1]} are unmapped.`;
+  }
+
   setInitialState(fieldDataMap) {
     if (fieldDataMap.files) {
       this.setSelectedFiles(fieldDataMap.files);
@@ -239,6 +275,8 @@ class MapsCsvField extends React.Component {
 
     const { remainingHeader, selectedFiles, autoMapError } = this.state;
 
+    const unmappedFieldsWarningMessage = this.getUnmappedFieldsWarningMessage();
+
     return (
       <div>
         <Typography variant="h4" className={classes.header}>
@@ -255,7 +293,7 @@ class MapsCsvField extends React.Component {
         />
         {
           selectedFiles.length > 0 && (
-            <React.Fragment>
+            <>
               <Typography variant="h5" className={classes.subtitle}>
                 Map CSV columns to pipeline variables
               </Typography>
@@ -286,9 +324,20 @@ class MapsCsvField extends React.Component {
                   </Typography>
                 )
               }
+              {unmappedFieldsWarningMessage && (
+                <Alert severity="error" className={classes.alert}>
+                  { unmappedFieldsWarningMessage }
+                </Alert>
+              )}
               <Grid container spacing={6}>
-                <Grid item xs={12} md={6}>
-                  <div>
+                <Grid item xs={12}>
+                  <MapsCsvFieldCsvHeader
+                    remainingHeader={remainingHeader}
+                    registerDraggableContainer={container => drake.containers.push(container)}
+                  />
+                </Grid>
+                <Grid item xs={12}>
+                  <Box display="flex" flexDirection="column" gridGap={16}>
                     <Typography variant="h6" className={classes.capitalize}>
                       { `Pipeline ${fieldName}` }
                     </Typography>
@@ -309,16 +358,10 @@ class MapsCsvField extends React.Component {
                         />
                       ))
                     }
-                  </div>
-                </Grid>
-                <Grid item xs={12} md={6}>
-                  <MapsCsvFieldCsvHeader
-                    remainingHeader={remainingHeader}
-                    registerDraggableContainer={container => drake.containers.push(container)}
-                  />
+                  </Box>
                 </Grid>
               </Grid>
-            </React.Fragment>
+            </>
           )
         }
       </div>

packages/coinstac-desktop-app/app/render/components/maps/maps-edit.jsx

@@ -49,7 +49,7 @@ function MapsEdit({
     } else {
       setDataMap({ ...dataMap, [fieldName]: fieldData });
       setSaved(false);
-      setAlertMsg(false);
+      setAlertMsg(null);
     }
   }
 
@@ -66,20 +66,24 @@ function MapsEdit({
     const undef = [];
 
     Object.keys(unfulfilledArr).forEach((key) => {
-      if (!dataMap[key]) undef.push(key);
+      if (dataMap[key]
+        && dataMap[key].fieldType === 'csv'
+        && unfulfilledArr[key].value.length !== Object.keys(dataMap[key].maps).length
+      ) {
+        undef.push(`Missing fields for ${key}`);
+      } else if (!dataMap[key]) {
+        undef.push(`Please set value for ${key}`);
+      }
     });
 
-
     if (undef.length > 0) {
-      undef.forEach((item) => {
-        setAlertMsg(`Please set value for ${item}`);
-      });
+      setAlertMsg(undef[0]);
     } else {
       try {
         await saveDataMapping(consortium, pipeline, dataMap);
         updateConsortiumMappedUsers(consortium.id, true);
         setSaved(true);
-        setAlertMsg(false);
+        setAlertMsg(null);
       } catch (error) {
         setSaved(false);
         setAlertMsg(`${error}`);
@@ -130,7 +134,8 @@ const mapStateToProps = ({ auth, maps }) => ({
 
 const ComponentWithData = compose(
   graphql(
-    UPDATE_CONSORTIUM_MAPPED_USERS_MUTATION, {
+    UPDATE_CONSORTIUM_MAPPED_USERS_MUTATION,
+    {
       props: ({ mutate }) => ({
         updateConsortiumMappedUsers: (consortiumId, isMapped) => mutate({
           variables: { consortiumId, isMapped },

packages/coinstac-desktop-app/app/render/styles/maps-collection.scss

@@ -6,10 +6,10 @@
 .card-deck {
   margin-top: 12px;
   display: flex;
+  gap: 1rem;
   background: #F5F5F5;
   border: 3px dashed #DDD;
-  padding: 0.5rem 1rem;
-  padding-top: 0;
+  padding: 0.5rem;
   border-radius: 0.5rem;
   width: 100%;
   min-height: 50px;
@@ -21,9 +21,7 @@
   border-radius: 0.5rem;
   padding: 0 1rem 0 2.25rem;
   position: relative;
-  float: left;
-  margin-right: 1rem;
-  margin-top: 0.5rem;
+  float: right;
   background-color: rgba(0, 0, 0, 0.2);
   transition: opacity 0.4s ease-in-out;
   line-height: 3rem;