Merge pull request #353 from unitaryfund/352_result_metadata

#352: Add 'notes' field to results
unitaryfund · Dec 2, 2021 · 836f78a · 836f78a
2 parents 957ef06 + 8bf8dbf
commit 836f78a
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 11 deletions.
diff --git a/src/App.css b/src/App.css
@@ -23,6 +23,10 @@
   font-size: calc(10px + 2vmin);
 }
 
+.display-linebreak {
+  white-space: pre-line;
+}
+
 .metriq-navbar {
   background-color: #3cd2f9;
   font-family: 'Courier New', monospace;
@@ -128,6 +132,7 @@ form > .row > label {
 }
 
 .submission-description {
+  white-space: pre-line;
   text-align: left;
   font-size: 90%;
   padding: 0 8px 8px 8px

diff --git a/src/components/SubmissionBox.js b/src/components/SubmissionBox.js
@@ -88,7 +88,7 @@ class SubmissionBox extends React.Component {
               <div className='submission-heading'>{this.props.item.name} {this.props.isEditView && ' - '} {this.props.isEditView && <b>{this.props.isUnderReview ? 'Under Review' : 'Approved'}</b>}</div>
               <div className='submission-subheading'> {this.parseContentUrl()} • {this.props.item.createdAt ? new Date(this.props.item.createdAt).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }) : ''} • </div>
               <div className='submission-description'>
-                {this.state.description ? this.state.description.replace(/\0.*$/g,'').split('. ')[0] + '.' : <i>(No description provided.)</i>}
+                {this.state.description ? this.state.description.replace(/\0.*$/g, '').split('. ')[0] + '.' : <i>(No description provided.)</i>}
               </div>
             </div>
             <div className='col-md-2 col-sm-12 h-100'>

diff --git a/src/views/Method.js b/src/views/Method.js
@@ -34,7 +34,7 @@ class Method extends React.Component {
     if (!this.props.isLoggedIn) {
       mode = 'Login'
     }
-    const method = { description: this.state.method.description }
+    const method = { description: this.state.item.description }
     this.setState({ showEditModal: true, modalMode: mode, method: method })
   }
 

diff --git a/src/views/Submission.js b/src/views/Submission.js
@@ -13,9 +13,9 @@ import { Accordion, Button, Card, Modal } from 'react-bootstrap'
 import { Link } from 'react-router-dom'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faEdit, faExternalLinkAlt, faThumbsUp, faPlus, faTrash, faMobileAlt, faSuperscript } from '@fortawesome/free-solid-svg-icons'
+import { faEdit, faExternalLinkAlt, faThumbsUp, faPlus, faTrash, faMobileAlt, faStickyNote, faSuperscript } from '@fortawesome/free-solid-svg-icons'
 
-library.add(faEdit, faExternalLinkAlt, faThumbsUp, faPlus, faTrash, faMobileAlt, faSuperscript)
+library.add(faEdit, faExternalLinkAlt, faThumbsUp, faPlus, faTrash, faMobileAlt, faStickyNote, faSuperscript)
 
 const dateRegex = /^\d{4}-\d{2}-\d{2}$/
 const metricNameRegex = /.{1,}/
@@ -698,25 +698,32 @@ class Submission extends React.Component {
                     title: 'Task',
                     dataIndex: 'taskName',
                     key: 'taskName',
-                    width: 300
+                    width: 290
                   },
                   {
                     title: 'Method',
                     dataIndex: 'methodName',
                     key: 'methodName',
-                    width: 300
+                    width: 290
                   },
                   {
                     title: 'Metric',
                     dataIndex: 'metricName',
                     key: 'metricName',
-                    width: 300
+                    width: 290
                   },
                   {
                     title: 'Value',
                     dataIndex: 'metricValue',
                     key: 'metricValue',
-                    width: 300
+                    width: 290
+                  },
+                  {
+                    title: 'Notes',
+                    dataIndex: 'notes',
+                    key: 'notes',
+                    width: 40,
+                    render: (value, row, index) => row.notes ? <OverlayTrigger placement='top' overlay={props => <Tooltip {...props}><span className='display-linebreak'>{row.notes}</span></Tooltip>}><div className='text-center'><FontAwesomeIcon icon='sticky-note' /></div></OverlayTrigger> : <span />
                   }
                 ]}
                 data={this.state.item.results.length
@@ -726,7 +733,8 @@ class Submission extends React.Component {
                         taskName: row.task.name,
                         methodName: row.method.name,
                         metricName: row.metricName,
-                        metricValue: row.metricValue
+                        metricValue: row.metricValue,
+                        notes: row.notes
                       }))
                   : []}
                 tableLayout='auto'
@@ -930,6 +938,11 @@ class Submission extends React.Component {
                   inputName='isHigherBetter' inputType='checkbox' label='Is higher better?'
                   onChange={(field, value) => this.handleOnChange('result', field, value)}
                   tooltip='Does a higher value of the metric indicate better performance? (If not checked, then a lower value of the metric indicates better performance.)'
+                /><br />
+                <FormFieldRow
+                  inputName='notes' inputType='textarea' label='Notes'
+                  onChange={(field, value) => this.handleOnChange('result', field, value)}
+                  tooltip='You may include any additional notes on the result, in this field, and they will be visible to all readers.'
                 />
               </span>}
             {(this.state.modalMode === 'Tag') &&

diff --git a/src/views/Task.js b/src/views/Task.js
@@ -42,7 +42,7 @@ class Task extends React.Component {
     if (!this.props.isLoggedIn) {
       mode = 'Login'
     }
-    const task = { description: this.state.task.description }
+    const task = { description: this.state.item.description }
     this.setState({ showEditModal: true, modalMode: mode, task: task })
   }
 
@@ -87,7 +87,6 @@ class Task extends React.Component {
     axios.get(methodRoute)
       .then(res => {
         const task = res.data.data
-        console.log(task)
         this.setState({ isRequestFailed: false, requestFailedMessage: '', item: task })
 
         const results = task.results