#822: Validate initially, when copying predictive text to modal

src/components/ResultsAddModal.js

@@ -3,7 +3,7 @@ import React, { useState, Suspense, useEffect } from 'react'
 import { Button, Modal } from 'react-bootstrap'
 import config from '../config'
 import ErrorHandler from './ErrorHandler'
-import { nonblankRegex, metricValueRegex, dateRegex, standardErrorRegex, sampleSizeRegex, qubitCountRegex, circuitDepthRegex } from './ValidationRegex'
+import { nonblankRegex, metricValueRegex, dateRegex, standardErrorRegex, numeralRegex } from './ValidationRegex'
 const FormFieldRow = React.lazy(() => import('./FormFieldRow'))
 const FormFieldSelectRow = React.lazy(() => import('./FormFieldSelectRow'))
 const FormFieldTypeaheadRow = React.lazy(() => import('./FormFieldTypeaheadRow'))
@@ -56,7 +56,7 @@ const ResultsAddModal = (props) => {
     if (!standardErrorRegex.test(result.standardError)) {
       return false
     }
-    if (!sampleSizeRegex.test(result.sampleSize)) {
+    if (!numeralRegex.test(result.sampleSize)) {
       return false
     }
 
@@ -81,23 +81,28 @@ const ResultsAddModal = (props) => {
     if (result.standardError) {
       result.standardError = parseFloat(result.standardError)
     }
-    if (result.sampleSize && !sampleSizeRegex.test(result.sampleSize)) {
+    if (result.sampleSize && !numeralRegex.test(result.sampleSize)) {
       window.alert('Error: Sample size is not a valid number.')
       return
     }
     if (result.sampleSize) {
       result.sampleSize = parseInt(result.sampleSize)
     }
-    if (result.qubitCount && !qubitCountRegex.test(result.qubitCount)) {
+    if (result.qubitCount && !numeralRegex.test(result.qubitCount)) {
       window.alert('Error: Qubit count is not a valid number.')
       return
     }
     result.qubitCount = result.qubitCount ? parseInt(result.qubitCount) : null
-    if (result.circuitDepth && !circuitDepthRegex.test(result.circuitDepth)) {
+    if (result.circuitDepth && !numeralRegex.test(result.circuitDepth)) {
       window.alert('Error: Circuit depth is not a valid number.')
       return
     }
     result.circuitDepth = result.circuitDepth ? parseInt(result.circuitDepth) : null
+    if (result.shots && !numeralRegex.test(result.shots)) {
+      window.alert('Error: Shots is not a valid number.')
+      return
+    }
+    result.shots = result.shots ? parseInt(result.shots) : null
     if (!result.evaluatedAt) {
       result.evaluatedAt = (new Date()).toISOString().split('T')[0]
     } else if (!dateRegex.test(result.evaluatedAt)) {
@@ -237,24 +242,31 @@ const ResultsAddModal = (props) => {
             <FormFieldRow
               inputName='sampleSize' inputType='number' label='Sample size (optional)'
               value={result.sampleSize}
-              validRegex={sampleSizeRegex}
+              validRegex={numeralRegex}
               onChange={handleOnChange}
               tooltip='Report the sample size used to calculate the metric value.'
             /><br />
             <FormFieldRow
               inputName='qubitCount' inputType='number' label='Qubit count (optional)'
               value={result.qubitCount}
-              validRegex={qubitCountRegex}
+              validRegex={numeralRegex}
               onChange={handleOnChange}
               tooltip='Task plots can be subset by qubit count of the benchmark.'
             /><br />
             <FormFieldRow
               inputName='circuitDepth' inputType='number' label='Circuit depth (optional)'
               value={result.circuitDepth}
-              validRegex={circuitDepthRegex}
+              validRegex={numeralRegex}
               onChange={handleOnChange}
               tooltip='Task plots can be subset by circuit depth of the benchmark.'
             /><br />
+            <FormFieldRow
+              inputName='shots' inputType='number' label='Shots (optional)'
+              value={result.shots}
+              validRegex={numeralRegex}
+              onChange={handleOnChange}
+              tooltip='Report the measurement shots used (per trial or overall) to calculate the metric value.'
+            /><br />
             <FormFieldRow
               inputName='notes' inputType='textarea' label='Notes'
               value={result.notes}

src/components/ResultsTable.js

@@ -50,17 +50,22 @@ const ResultsTable = (props) => {
                   {
                     title: 'Value',
                     key: 'metricValue',
-                    width: 160
+                    width: 120
                   },
                   {
                     title: 'Qubits',
                     key: 'qubitCount',
-                    width: 160
+                    width: 120
                   },
                   {
                     title: 'Depth',
                     key: 'circuitDepth',
-                    width: 160
+                    width: 120
+                  },
+                  {
+                    title: 'Shots',
+                    key: 'shots',
+                    width: 120
                   },
                   {
                     title: 'Notes',
@@ -84,6 +89,7 @@ const ResultsTable = (props) => {
                     metricValue: row.metricValue,
                     qubitCount: row.qubitCount,
                     circuitDepth: row.circuitDepth,
+                    shots: row.shots,
                     notes: <div className='text-center'>{row.notes && <TooltipTrigger message={<span className='display-linebreak'>{row.notes}</span>}><div className='text-center'><FontAwesomeIcon icon='sticky-note' /></div></TooltipTrigger>}</div>,
                     edit: <div className='text-center'><FontAwesomeIcon icon='edit' onClick={() => props.onClickEdit(row.id)} /></div>
                   })

src/components/SubmissionRefsAddModal.js

@@ -1,4 +1,4 @@
-import React, { Suspense, useEffect, useState } from 'react'
+import React, { Suspense, useEffect, useState, useCallback } from 'react'
 import { Accordion, Button, Card, Modal } from 'react-bootstrap'
 import { Link } from 'react-router-dom'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
@@ -25,6 +25,19 @@ const SubmissionRefsAddModal = (props) => {
     submissions: props.submissionId
   })
 
+  const key = props.modalMode === 'Task'
+    ? 'task'
+    : props.modalMode === 'Method'
+      ? 'method'
+      : props.modalMode === 'Platform' ? 'platform' : 'login'
+
+  const handleValidation = useCallback((i) => {
+    if (!i) {
+      i = item
+    }
+    setIsValid((!!i.id && !showAccordion) || (showAccordion && !!i.name && (i.parent || (key !== 'task'))))
+  }, [item, showAccordion, key])
+
   useEffect(() => {
     const nItem = { ...item }
     const submissions = props.submissionId.toString()
@@ -33,24 +46,12 @@ const SubmissionRefsAddModal = (props) => {
     if (props.refName) {
       isChanged |= nItem.name !== props.refName
       nItem.name = props.refName
+      handleValidation(nItem)
     }
     if (isChanged) {
       setItem(nItem)
     }
-  }, [props.submissionId, props.refName, item])
-
-  const key = props.modalMode === 'Task'
-    ? 'task'
-    : props.modalMode === 'Method'
-      ? 'method'
-      : props.modalMode === 'Platform' ? 'platform' : 'login'
-
-  const handleValidation = (i) => {
-    if (!i) {
-      i = item
-    }
-    setIsValid((!!i.id && !showAccordion) || (showAccordion && !!i.name && (i.parent || (key !== 'task'))))
-  }
+  }, [props.submissionId, props.refName, item, handleValidation])
 
   const handleAccordionToggle = () => {
     setIsValid((!!item.id && showAccordion) || (!showAccordion && !!item.name && (item.parent || (key !== 'task'))))

src/components/ValidationRegex.js

@@ -4,10 +4,8 @@ const metricValueRegex = /(^[+-]?([0-9]+([.][0-9]*)?|[.][0-9]+)$)|([+-]?\d(\.\d+
 const nonblankRegex = /(.|\s)*\S(.|\s)*/
 const numberRegex = /^[+-]?([0-9]+\.?[0-9]*|\.[0-9]+)$/
 const passwordValidRegex = /.{12,}/
-const sampleSizeRegex = /^[0-9]+$/
 const standardErrorRegex = /^[0-9]+([.][0-9]*)?|[.][0-9]+$/
-const qubitCountRegex = /^[0-9]+$/
-const circuitDepthRegex = /^[0-9]+$/
+const numeralRegex = /^[0-9]+$/
 const urlValidRegex = new RegExp('^(https?:\\/\\/)?' + // protocol
       '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
       '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
@@ -29,10 +27,8 @@ module.exports = {
   nonblankRegex,
   numberRegex,
   passwordValidRegex,
-  sampleSizeRegex,
   standardErrorRegex,
-  qubitCountRegex,
-  circuitDepthRegex,
+  numeralRegex,
   urlValidRegex,
   blankOrurlValidRegex,
   usernameValidRegex