From c543afdf822cd1524e7e7ea3c5cb994b48ba450b Mon Sep 17 00:00:00 2001
From: James Ketrenos <james_gitlab@ketrenos.com>
Date: Mon, 20 Jan 2020 15:47:39 -0800
Subject: [PATCH] Face identity editing

Signed-off-by: James Ketrenos <james_gitlab@ketrenos.com>
---
 frontend/identities.html    | 45 ++++++++++++++++++++++++++++++-------
 server/routes/identities.js |  4 ++++
 2 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/frontend/identities.html b/frontend/identities.html
index ac0a887..ba611e1 100755
--- a/frontend/identities.html
+++ b/frontend/identities.html
@@ -153,14 +153,21 @@ function getIdentities(id) {
       div.textContent = "Related faces " + identity.relatedFaces.length;
       block.appendChild(div);
 
-      const random = Math.floor(Math.random() * identity.relatedFaces.length);
-      const facePhoto = createFace(identity.relatedFaces[random].faceId, identity.relatedFaces[random].photoId);
-      const distance = document.createElement("div");
-      distance.classList.add("distance");
-      distance.textContent = Math.round(100 * identity.relatedFaces[random].distance) / 100;
-      facePhoto.appendChild(distance);
-      block.appendChild(facePhoto);
+      identity.relatedFaces.sort((a, b) => {
+        return a.distance - b.distance;
+      });
+      div = document.createElement("div");
+      div.classList.add("face-block");
+      for (let i = 0; i < identity.relatedFaces.length && i < 4; i++) {
+        const facePhoto = createFace(identity.relatedFaces[i].faceId, identity.relatedFaces[i].photoId),
+          distance = document.createElement("div");
+        distance.classList.add("distance");
+        distance.textContent = identity.relatedFaces[i].distance.toFixed(2);
+        facePhoto.appendChild(distance);
+        div.appendChild(facePhoto);
+      }
 
+      block.appendChild(div);
       identitiesBlock.appendChild(block);
     });
   });
@@ -222,6 +229,10 @@ body {
   padding: 0;
 }
 
+* {
+  box-sizing: border-box;
+}
+
 .more {
   cursor: pointer;
 }
@@ -249,6 +260,22 @@ body {
   filter: grayscale(100%);
 }
 
+.face-block {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0.5em;
+  min-width: 128px;
+  max-width: 128px;
+  min-height: 128px;
+  max-height: 128px;
+}
+
+.face-block .face {
+  max-width: 64px;
+  max-height: 64px;
+  margin: 0;
+}
+
 .face {
   position: relative;
   max-width: 128px;
@@ -270,11 +297,13 @@ body {
 .face .distance {
   position: absolute;
   background: black;
-  opacity: 0.8;
+  opacity: 0.5;
   text-align: center;
   left: 0;
   right: 0;
   bottom: 0;
+  color: white;
+  box-sizing: border-box;
 }
 
 .editor-row {
diff --git a/server/routes/identities.js b/server/routes/identities.js
index bdcb7f9..5b111b8 100755
--- a/server/routes/identities.js
+++ b/server/routes/identities.js
@@ -169,6 +169,8 @@ router.get("/:id?", (req, res) => {
           return;
         }
 
+        /* For each face's descriptor returned for this identity, compute the distance between the
+         * requested photo and that face descriptor */
         descriptors.forEach((descriptor) => {
           for (let i = 0; i < identity.relatedFaces.length; i++) {
             if (identity.relatedFaces[i].faceId == descriptor.faceId) {
@@ -179,6 +181,8 @@ router.get("/:id?", (req, res) => {
           }
         });
       });
+    }, {
+      maxConcurrency: 5
     }).then(() => {
       return identities;
     });