From efcaa7f5b880ff4277f707bc4ce45b5da5a8cd11 Mon Sep 17 00:00:00 2001
From: James Ketrenos <james_gitlab@ketrenos.com>
Date: Wed, 22 Jan 2020 21:22:11 -0800
Subject: [PATCH] Added 'show more' to the identity matcher

Signed-off-by: James Ketrenos <james_gitlab@ketrenos.com>
---
 frontend/identities.html | 46 ++++++++++++++++++++++++++++------------
 1 file changed, 32 insertions(+), 14 deletions(-)

diff --git a/frontend/identities.html b/frontend/identities.html
index 27fd6f1..10d4609 100755
--- a/frontend/identities.html
+++ b/frontend/identities.html
@@ -86,10 +86,9 @@ function loadFace(id) {
     editor.appendChild(row);
     row = document.createElement("div");
     row.classList.add("editor-row");
-    let message = "Related faces: ",
-      max = Math.min(face.relatedFaces.length, 9);
-    if (max > 0) {
-      message += face.relatedFaces.length + " related. Showing top " + max + ". (tap to deselect)";
+    let message = "Related faces: ";
+    if (face.relatedFaces.length > 0) {
+      message += face.relatedFaces.length + " related (tap to deselect)";
     } else {
       message += "No matches found.";
     }
@@ -99,22 +98,41 @@ function loadFace(id) {
     row = document.createElement("div");
     row.classList.add("editor-row");
     row.classList.add("related-faces");
-    for (let i = 0; i < max; i++) {
-      let relation = face.relatedFaces[i];
-      const distance = document.createElement("div"),
-        facePhoto = createFace(relation.faceId, relation.photoId, true);
-      distance.classList.add("distance");
-      distance.textContent = relation.distance.toFixed(2);
-      facePhoto.appendChild(distance);
-      row.appendChild(facePhoto);
-    }
 
     editor.appendChild(row);
 
+    let button = document.createElement("button");
+    button.textContent = "show more";
+    button.addEventListener("click", (event) => {
+      showMore(row, face.relatedFaces);
+    });
+
+    editor.appendChild(button);
+
+    showMore(row, face.relatedFaces);
+
     faceEditorBlock.appendChild(editor);
   });
 } 
 
+function showMore(row, faces) {
+  let index = row.querySelectorAll(".face").length,
+    max = Math.min(faces.length - index, 9);
+  let more = index + max < faces.length;
+  for (let i = index; i < index + max; i++) {
+    let relation = faces[i];
+    const distance = document.createElement("div"),
+      facePhoto = createFace(relation.faceId, relation.photoId, true);
+    distance.classList.add("distance");
+    distance.textContent = relation.distance.toFixed(2);
+    facePhoto.appendChild(distance);
+    row.appendChild(facePhoto);
+  }
+  if (!more) {
+    row.parentElement.querySelector("button").style.display = "none";
+  }
+}
+
 function getIdentities(id) {
   const identitiesBlock = document.getElementById("identities");
   identitiesBlock.innerHTML = "";
@@ -190,7 +208,7 @@ function getIdentities(id) {
         div.appendChild(facePhoto);
       }
 
-      if (minDistance.distance < 0.4) {
+      if (minDistance.distance < 0.45) {
         const bestMatch = document.getElementById("best-match");
         const distance = document.createElement("div"),
           facePhoto = createFace(minDistance.faceId, minDistance.photoId);