Add error handling to download interface

config/settings/base.py

@@ -338,6 +338,16 @@
     }
 ]
 
+DOWNLOAD_ERRORS = {
+    'bbox': ['Please enter a valid bounding box.'],
+    'point': ['Please enter a valid point.'],
+    'country': ['Please select a country.'],
+    'mask': ['Please select a valid NetCDF file.'],
+    'shape': ['Please select a valid Shapefile or GeoJSON file.'],
+    'var': ['Please enter a valid name for a variable.'],
+    'layer': ['Please enter a layer.']
+}
+
 RESTRICTED_MESSAGES = {}
 RESTRICTED_DEFAULT_MESSAGE = 'Please contact <a href="mailto:[email protected]">[email protected]</a>' \
                              ' if you need access to the dataset.'

isimip_data/core/viewsets.py

@@ -32,6 +32,7 @@ def get_queryset(self):
             } for key in [
                 'METADATA_PAGE_SIZE',
                 'METADATA_MAX_COUNT',
-                'DOWNLOAD_OPERATIONS_HELP'
+                'DOWNLOAD_OPERATIONS_HELP',
+                'DOWNLOAD_ERRORS'
             ]
         ]

isimip_data/download/assets/js/components/Form.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
-import { get, isEmpty, isNil, isUndefined } from 'lodash'
+import { get, isEmpty, isNil, isNumber, isUndefined } from 'lodash'
 
 import { useLsState } from 'isimip_data/core/assets/js/hooks/ls'
 import { useSettingsQuery } from 'isimip_data/core/assets/js/hooks/queries'
@@ -46,46 +46,75 @@ const Form = ({ files, setJob }) => {
   const handleSubmit = (event) => {
     event.preventDefault()
 
-    const uploads = []
-    const data = {
-      paths,
-      operations: operations.reduce((operations, operation) => {
-        const { mask, shape, ...values } = operation
-
-        switch (operation.operation) {
-          case 'mask_mask':
-            uploads.push(mask)
-            return [...operations, { ...values, mask: mask.name }]
-
-          case 'mask_shape':
-            uploads.push(shape)
-            return [
-              ...operations,
-              {
-                operation: 'create_mask',
-                shape: shape.name,
-                mask: shape.name + '.nc'
-              },
-              {
-                operation: 'mask_mask',
-                mask: shape.name + '.nc',
-                var: `m_${values.layer}`
-              }
-            ]
-
-          default:
-            return [...operations, values]
-        }
-      }, [])
-    }
-
-    mutation.mutate({
-      url: settings.FILES_API_URL,
-      data,
-      uploads,
-      setErrors,
-      setJob
+    let errors = {}
+    operations.forEach((operation) => {
+      if (!isUndefined(operation.bbox) && operation.bbox.some(v => !isNumber(v))) {
+        errors = { ...errors, bbox: settings.DOWNLOAD_ERRORS.bbox }
+      }
+      if (!isUndefined(operation.point) && operation.point.some(v => !isNumber(v))) {
+        errors = { ...errors, point: settings.DOWNLOAD_ERRORS.point }
+      }
+      if (!isUndefined(operation.country) && isEmpty(operation.country)) {
+        errors = { ...errors, country: settings.DOWNLOAD_ERRORS.country }
+      }
+      if (!isUndefined(operation.mask) && isNil(operation.mask)) {
+        errors = { ...errors, mask: settings.DOWNLOAD_ERRORS.mask }
+      }
+      if (!isUndefined(operation.shape) && isNil(operation.shape)) {
+        errors = { ...errors, shape: settings.DOWNLOAD_ERRORS.shape }
+      }
+      if (!isUndefined(operation.var) && isEmpty(operation.var)) {
+        errors = { ...errors, var: settings.DOWNLOAD_ERRORS.var }
+      }
+      if (!isUndefined(operation.layer) && isNumber(operation.layer)) {
+        errors = { ...errors, layer: settings.DOWNLOAD_ERRORS.layer }
+      }
     })
+
+    if (isEmpty(errors)) {
+      const uploads = []
+      const data = {
+        paths,
+        operations: operations.reduce((operations, operation) => {
+          const { mask, shape, ...values } = operation
+
+          switch (operation.operation) {
+            case 'mask_mask':
+              uploads.push(mask)
+              return [...operations, { ...values, mask: mask.name }]
+
+            case 'mask_shape':
+              uploads.push(shape)
+              return [
+                ...operations,
+                {
+                  operation: 'create_mask',
+                  shape: shape.name,
+                  mask: shape.name + '.nc'
+                },
+                {
+                  operation: 'mask_mask',
+                  mask: shape.name + '.nc',
+                  var: `m_${values.layer}`
+                }
+              ]
+
+            default:
+              return [...operations, values]
+          }
+        }, [])
+      }
+
+      mutation.mutate({
+        url: settings.FILES_API_URL,
+        data,
+        uploads,
+        setErrors,
+        setJob
+      })
+    } else {
+      setErrors(errors)
+    }
   }
 
   return settings && (

isimip_data/download/assets/js/components/form/Operation.js

@@ -14,10 +14,7 @@ import Mean from './widgets/Mean'
 import Point from './widgets/Point'
 import Var from './widgets/Var'
 
-
 const Operation = ({ operation, index, isLast, values, errors, updateOperation, removeOperation }) => {
-  const error = []
-
   return (
     <div className="card mb-2 operation">
       <div className="card-body">
@@ -35,7 +32,7 @@ const Operation = ({ operation, index, isLast, values, errors, updateOperation,
           !isUndefined(values.bbox) && (
             <BBox
               bbox={values.bbox}
-              errors={errors}
+              errors={errors.bbox}
               onChange={bbox => updateOperation(index, {...values, bbox})}
             />
           )
@@ -44,7 +41,7 @@ const Operation = ({ operation, index, isLast, values, errors, updateOperation,
           !isUndefined(values.point) && (
             <Point
               point={values.point}
-              errors={errors}
+              errors={errors.point}
               onChange={point => updateOperation(index, {...values, point})}
             />
           )
@@ -53,7 +50,7 @@ const Operation = ({ operation, index, isLast, values, errors, updateOperation,
           !isUndefined(values.country) && (
             <Country
               country={values.country}
-              errors={errors}
+              errors={errors.country}
               onChange={country => updateOperation(index, {...values, country})}
             />
           )

isimip_data/download/assets/js/components/form/Operations.js

@@ -67,7 +67,7 @@ const Operations = ({ operationsConfig, operationsHelp, operations, errors, setO
               index={index}
               isLast={index == operations.length - 1}
               values={values}
-              errors={[]}
+              errors={errors}
               updateOperation={updateOperation}
               removeOperation={removeOperation}
             />

isimip_data/download/assets/js/components/form/widgets/BBox.js

@@ -2,6 +2,8 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { isEmpty, uniqueId } from 'lodash'
 
+import Errors from './Errors'
+
 const BBox = ({ bbox, errors, onChange }) => {
   const [ west, east, south, north ] = bbox
 
@@ -20,29 +22,34 @@ const BBox = ({ bbox, errors, onChange }) => {
   }
 
   return <>
-    <div className="col-lg-2">
-      <label className="mb-0" htmlFor={westId}>West</label>
-      <input className={'form-control download-form-input-bbox mb-2 ' + (!isEmpty(errors) && 'is-invalid')}
-          type="number" id={westId} placeholder="West" min="-180" max="180" step="any"
-          value={west} onChange={event => handleChange(event, 0)} onWheel={handleWheel} />
-    </div>
-    <div className="col-lg-2">
-      <label className="mb-0" htmlFor={eastId}>East</label>
-      <input className={'form-control download-form-input-bbox mb-2 ' + (!isEmpty(errors) && 'is-invalid')}
-          type="number" id={eastId} placeholder="East" min="-180" max="180" step="any"
-          value={east} onChange={event => handleChange(event, 1)} onWheel={handleWheel} />
-    </div>
-    <div className="col-lg-2">
-      <label className="mb-0" htmlFor={southId}>South</label>
-      <input className={'form-control download-form-input-bbox mb-2 ' + (!isEmpty(errors) && 'is-invalid')}
-          type="number" id={southId} placeholder="South" min="-90" max="90" step="any"
-          value={south} onChange={event => handleChange(event, 2)} onWheel={handleWheel} />
-    </div>
-    <div className="col-lg-2">
-      <label className="mb-0" htmlFor={northId}>North</label>
-      <input className={'form-control download-form-input-bbox mb-2 ' + (!isEmpty(errors) && 'is-invalid')}
-          type="number" id={northId} placeholder="North" min="-90" max="90" step="any"
-          value={north} onChange={event => handleChange(event, 3)} onWheel={handleWheel} />
+    <div className="col-lg-8">
+      <div className="row">
+        <div className="col-lg-3">
+          <label className="mb-0" htmlFor={westId}>West</label>
+          <input className={'form-control download-form-input-bbox mb-2 ' + (!isEmpty(errors) && 'is-invalid')}
+              type="number" id={westId} placeholder="West" min="-180" max="180" step="any"
+              value={west} onChange={event => handleChange(event, 0)} onWheel={handleWheel} />
+        </div>
+        <div className="col-lg-3">
+          <label className="mb-0" htmlFor={eastId}>East</label>
+          <input className={'form-control download-form-input-bbox mb-2 ' + (!isEmpty(errors) && 'is-invalid')}
+              type="number" id={eastId} placeholder="East" min="-180" max="180" step="any"
+              value={east} onChange={event => handleChange(event, 1)} onWheel={handleWheel} />
+        </div>
+        <div className="col-lg-3">
+          <label className="mb-0" htmlFor={southId}>South</label>
+          <input className={'form-control download-form-input-bbox mb-2 ' + (!isEmpty(errors) && 'is-invalid')}
+              type="number" id={southId} placeholder="South" min="-90" max="90" step="any"
+              value={south} onChange={event => handleChange(event, 2)} onWheel={handleWheel} />
+        </div>
+        <div className="col-lg-3">
+          <label className="mb-0" htmlFor={northId}>North</label>
+          <input className={'form-control download-form-input-bbox mb-2 ' + (!isEmpty(errors) && 'is-invalid')}
+              type="number" id={northId} placeholder="North" min="-90" max="90" step="any"
+              value={north} onChange={event => handleChange(event, 3)} onWheel={handleWheel} />
+        </div>
+      </div>
+      <Errors errors={errors} />
     </div>
   </>
 }

isimip_data/download/assets/js/components/form/widgets/Country.js

@@ -4,6 +4,8 @@ import { isEmpty, uniqueId } from 'lodash'
 
 import { useCountriesQuery } from '../../../hooks/queries'
 
+import Errors from './Errors'
+
 const Country = ({ country, errors, onChange }) => {
   const { data: countries } = useCountriesQuery()
 
@@ -20,6 +22,7 @@ const Country = ({ country, errors, onChange }) => {
           })
         }
       </select>
+      <Errors errors={errors} />
     </div>
   </>
 }

isimip_data/download/assets/js/components/form/widgets/Errors.js

@@ -0,0 +1,23 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+import { isEmpty } from 'lodash'
+
+const Errors = ({ errors }) => {
+  if (isEmpty(errors)) {
+    return null
+  } else {
+    return (
+      <ul className="text-danger list-unstyled mb-2">
+        {
+          errors.map((error, errorIndex) => <li>{error}</li>)
+        }
+      </ul>
+    )
+  }
+}
+
+Errors.propTypes = {
+  errors: PropTypes.array
+}
+
+export default Errors

isimip_data/download/assets/js/components/form/widgets/Layer.js

@@ -2,6 +2,8 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { isEmpty, uniqueId } from 'lodash'
 
+import Errors from './Errors'
+
 const Layer = ({ value, errors, onChange }) => {
   const id = uniqueId('download-form-input-layer-')
 
@@ -11,6 +13,7 @@ const Layer = ({ value, errors, onChange }) => {
       <input className={'form-control mb-2 ' +  (!isEmpty(errors) && 'is-invalid')}
           type="number" id={id} placeholder="Layer"
           value={value} onChange={event => onChange(event.target.value)} />
+      <Errors errors={errors} />
     </div>
   )
 }

isimip_data/download/assets/js/components/form/widgets/Mask.js

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types'
 import { useDropzone } from 'react-dropzone'
 import { isEmpty, isNil, uniqueId } from 'lodash'
 
+import Errors from './Errors'
+
 const Mask = ({ file, accept, errors, onChange }) => {
   const fileId = uniqueId('download-form-input-file-')
 
@@ -49,9 +51,10 @@ const Mask = ({ file, accept, errors, onChange }) => {
       </div>
       {
         dropzoneError && (
-          <div class="invalid-feedback">{dropzoneError}</div>
+          <div class="text-danger">{dropzoneError}</div>
         )
       }
+      <Errors errors={errors} />
     </div>
   )
 }

isimip_data/download/assets/js/components/form/widgets/Point.js

@@ -2,6 +2,8 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { isEmpty, uniqueId } from 'lodash'
 
+import Errors from './Errors'
+
 const Point = ({ point, errors, onChange }) => {
   const [ lat, lon ] = point
 
@@ -18,17 +20,22 @@ const Point = ({ point, errors, onChange }) => {
   }
 
   return <>
-    <div className="col-lg-4">
-      <label className="mb-0" htmlFor={latId}>Latitude</label>
-      <input className={'form-control download-form-input-point mb-2 ' +  (!isEmpty(errors) && 'is-invalid')}
-          type="number" id={latId} placeholder="Latitude" min="-90" max="90" step="any"
-          value={lat} onChange={event => handleChange(event, 0)} />
-    </div>
-    <div className="col-lg-4">
-      <label className="mb-0" htmlFor={lonId}>Longitude</label>
-      <input className={'form-control download-form-input-point mb-2 ' +  (!isEmpty(errors) && 'is-invalid')}
-          type="number" id={lonId} placeholder="Longitude" min="-180" max="180" step="any"
-          value={lon} onChange={event => handleChange(event, 1)} />
+    <div className="col-lg-8">
+      <div className="row">
+        <div className="col-lg-6">
+          <label className="mb-0" htmlFor={latId}>Latitude</label>
+          <input className={'form-control download-form-input-point mb-2 ' +  (!isEmpty(errors) && 'is-invalid')}
+              type="number" id={latId} placeholder="Latitude" min="-90" max="90" step="any"
+              value={lat} onChange={event => handleChange(event, 0)} />
+        </div>
+        <div className="col-lg-6">
+          <label className="mb-0" htmlFor={lonId}>Longitude</label>
+          <input className={'form-control download-form-input-point mb-2 ' +  (!isEmpty(errors) && 'is-invalid')}
+              type="number" id={lonId} placeholder="Longitude" min="-180" max="180" step="any"
+              value={lon} onChange={event => handleChange(event, 1)} />
+        </div>
+      </div>
+      <Errors errors={errors} />
     </div>
   </>
 }