2 files changed, 15 insertions, 3 deletions
diff --git a/client/faceSearch/faceSearch.container.js b/client/faceSearch/faceSearch.container.js
index f96961db..94c6eb9f 100644
--- a/client/faceSearch/faceSearch.container.js
+++ b/client/faceSearch/faceSearch.container.js
@@ -10,7 +10,7 @@ import FaceSearchResult from './faceSearch.result'
 class FaceSearchContainer extends Component {
   render() {
     const { payload } = this.props
-    console.log(payload)
+    // console.log(payload)
     return (
       <div className='searchContainer'>
         <FaceSearchQuery payload={payload} />
diff --git a/client/faceSearch/faceSearch.result.js b/client/faceSearch/faceSearch.result.js
index d63f3265..936bc8d2 100644
--- a/client/faceSearch/faceSearch.result.js
+++ b/client/faceSearch/faceSearch.result.js
@@ -32,6 +32,7 @@ class FaceSearchResult extends Component {
   render() {
     const { dataset } = this.props.payload
     const { query, distances, results, loading, error } = this.props.result
+    console.log(this.props.result)
     if (loading) {
       return (
         <div className='result'>
@@ -43,7 +44,7 @@ class FaceSearchResult extends Component {
       )
     }
     if (error) {
-      console.log(error)
+      // console.log(error)
       let errorMessage = errors[error] || errors.error
       return (
         <div className='result'>{errorMessage}</div>
@@ -60,10 +61,21 @@ class FaceSearchResult extends Component {
     const els = results.map((result, i) => {
       const distance = distances[i]
       const { uuid } = result.uuid
+      const { x, y, w, h } = result.roi
       const { fullname, gender, description, images } = result.identity
+      const bbox = {
+        left: (100 * x) + '%',
+        top: (100 * y) + '%',
+        width: (100 * w) + '%',
+        height: (100 * h) + '%',
+      }
+      // console.log(bbox)
       return (
         <div key={i}>
-          <img src={'https://megapixels.nyc3.digitaloceanspaces.com/v1/media/' + dataset + '/' + uuid + '.jpg'} />
+          <div className='img'>
+            <img src={'https://megapixels.nyc3.digitaloceanspaces.com/v1/media/' + dataset + '/' + uuid + '.jpg'} />
+            <div className='bbox' style={bbox} />
+          </div>
           {fullname} {'('}{gender}{')'}<br/>
           {description}<br/>
           {courtesyS(images, 'image')}{' in dataset'}<br />