2 files changed, 54 insertions, 21 deletions

diff --git a/client/faceSearch/faceSearch.result.js b/client/faceSearch/faceSearch.result.js
index 1882def0..2a85552d 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) => {
@@ -36,19 +64,27 @@ class FaceSearchResult extends Component {
       const { uuid } = result.uuid
       const { fullname, gender, description, images } = result.identity
       return (
-        <div>
+        <div key={i}>
           <img src={'https://megapixels.nyc3.digitaloceanspaces.com/v1/media/' + dataset + '/' + uuid + '.jpg'} />
           {fullname} {'('}{gender}{')'}<br/>
           {description}<br/>
-          {courtesyS(images, 'image')}<br />
-          {distance}
+          {courtesyS(images, 'image')}{' in dataset'}<br />
+          {Math.round((1 - distance) * 100)}{'% match'}
         </div>
       )
     })
 
     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>
diff --git a/client/map/index.js b/client/map/index.js
index 788894f9..053cf13b 100644
--- a/client/map/index.js
+++ b/client/map/index.js
@@ -34,6 +34,7 @@ function addMarker(map, latlng, title, subtext) {
     subtext,
   ].join(''))
 }
+
 function addArc(map, src, dest) {
   L.bezier({
     path: [
@@ -46,14 +47,15 @@ function addArc(map, src, dest) {
 }
 
 export default function append(el, payload) {
-  const { cmd, data } = payload
+  const { data } = payload
+  let { paper, address } = data
+  let source = [0, 0]
   const citations = getCitations(data)
 
-  // console.log(el)
   let map = L.map(el).setView([25, 0], 2)
   L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
-    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors,' +
-      '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>,' +
+    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
+      '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
       'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
     maxZoom: 18,
     id: 'mapbox.dark',
@@ -61,13 +63,8 @@ export default function append(el, payload) {
     accessToken: 'pk.eyJ1IjoiZmFuc2FsY3kiLCJhIjoiY2pvN3I1czJwMHF5NDNrbWRoMWpteHlrdCJ9.kMpM5syQUhVjKkn1iVx9fg'
   }).addTo(map)
 
-  let { address } = data
-  console.log(address)
-  let source = [0, 0]
   if (address) {
     source = address.slice(3, 5).map(n => parseFloat(n))
-    // console.log(map, address, source)
-    console.log(source)
   }
 
   citations.forEach(point => {
@@ -77,5 +74,5 @@ export default function append(el, payload) {
     addArc(map, source, latlng)
   })
 
-  addMarker(map, source, document.querySelector('h2').innerText, address[0])
+  addMarker(map, source, paper.title, paper.address)
 }