Toggle pause on box bar loading

Signed-off-by: James Ketrenos <james_gitlab@ketrenos.com>

frontend/face-explorer.html

@@ -154,6 +154,8 @@ function makeFaceBoxes() {
     box.style.width = Math.floor((face.right - face.left) * width)  + "%";
     box.style.height = Math.floor((face.bottom - face.top) * height)  + "%";
     box.addEventListener("click", (event) => {
+      setPause(true);
+      
       var bar = document.getElementById("bar");
       if (!bar) {
         bar = document.createElement("div");
@@ -194,6 +196,17 @@ function makeFaceBoxes() {
   });
 }
 
+function setPause(state) {
+  paused = state;
+  if (!paused) {
+    tick();
+  } else {
+    document.getElementById("loading").textContent = "||";
+    clearTimeout(scheduled);
+    scheduled = null;
+  }
+}
+
 function loadPhoto(index) {
   const photo = photos[index],
     xml = new XMLHttpRequest(),
@@ -319,14 +332,7 @@ document.addEventListener("DOMContentLoaded", function() {
     document.addEventListener("keydown", function(event) {
       switch (event.keyCode) {
         case 32: /* space */
-        paused = !paused;
-        if (!paused) {
-          tick();
-        } else {
-          document.getElementById("loading").textContent = "||";
-          clearTimeout(scheduled);
-          scheduled = null;
-        }
+        setPause(!paused);
         return;
 
       case 37: /* left */

server/routes/photos.js

@@ -793,8 +793,7 @@ function getFacesForPhoto(id) {
       return photoDB.sequelize.query(
         "SELECT face1Id,face2Id " +
         "FROM facedistances " +
-        "WHERE distance<0.5 AND (face1Id=:id OR face2Id=:id) " +
-        "ORDER BY distance ASC", {
+        "WHERE distance>0 AND distance<=0.5 AND (face1Id=:id OR face2Id=:id)", {
         replacements: {
           id: face.id
         },
@@ -811,7 +810,8 @@ function getFacesForPhoto(id) {
           "   (fd.face1Id=faces.id AND fd.face2Id=:faceId) " +
           "OR (fd.face2Id=faces.id AND fd.face1Id=:faceId) " +
           ") " +
-          "WHERE faces.id IN (:ids)", {
+          "WHERE faces.id IN (:ids) " +
+          "ORDER BY fd.distance ASC", {
           replacements: {
             ids: faceIds.map((match) => {
               return (match.face1Id == face.id) ? match.face2Id : match.face1Id;