adding verbiage and timing

1 files changed, 44 insertions, 8 deletions

diff --git a/client/faceSearch/faceSearch.result.js b/client/faceSearch/faceSearch.result.js
index 1882def0..bc7831d9 100644
--- a/client/faceSearch/faceSearch.result.js
+++ b/client/faceSearch/faceSearch.result.js
@@ -4,31 +4,59 @@ import { connect } from 'react-redux'
 import { courtesyS } from '../util'
 
 import * as actions from './faceSearch.actions'
+import { Loader } from '../common'
 
 const errors = {
-  'bbox': "Sorry, we couldn't find a face in that image.  Please choose an image where the face is large and clear.",
-  'nomatch': "We didn't find a match.",
-  'default': "There was an error!",
+  bbox: (
+    <div>
+      <h2>No face found</h2>
+      {"Sorry, we didn't detect a face in that image. "}
+      {"Please choose an image where the face is large and clear."}
+    </div>
+  ),
+  nomatch: (
+    <div>
+      <h2>{"You're clear"}</h2>
+      {"No images in this dataset match your face.  We show only matches above 70% probability."}
+    </div>
+  ),
+  error: (
+    <div>
+      <h2>{"No matches found"}</h2>
+      {"Sorry, an error occured."}
+    </div>
+  ),
 }
 
 class FaceSearchResult extends Component {
   render() {
     const { dataset } = this.props.payload
-    const { distances, results, error } = this.props.result
+    const { query, distances, results, loading, error } = this.props.result
+    if (loading) {
+      return (
+        <div className='result'>
+          <div>
+            <Loader /><br />
+            <h2>Searching...</h2>
+          </div>
+        </div>
+      )
+    }
     if (error) {
-      let errorMessage = errors[error.message] || errors.default
+      console.log(error)
+      let errorMessage = errors[error] || errors.error
       return (
         <div className='result'>{errorMessage}</div>
       )
     }
     if (!results) {
       return (
-        <div className='result'></div>
+        <div className='result'>{errors.nomatch}</div>
       )
     }
     if (!this.props.result.results.length) {
       return (
-        <div className='result'>No results</div>
+        <div className='result'>{errors.nomatch}</div>
       )
     }
     const els = results.map((result, i) => {
@@ -48,7 +76,15 @@ class FaceSearchResult extends Component {
 
     return (
       <div className='result'>
-        <div class='results'>
+        <div className="about">
+          <h2>Did we find you?</h2>
+          {'These faces matched images in the '}
+          <b><tt>{dataset}</tt></b>
+          {' dataset with over 70% probability.'}
+          <br />
+          <small>Query took {query.timing.toFixed(2)} seconds</small>
+        </div>
+        <div className='results'>
           {els}
         </div>
       </div>