Add scripts for distillability modelling

heuristics/distillable/index.js

Index: heuristics/distillable/index.js
diff --git a/foo/test.js b/heuristics/distillable/index.js
similarity index 72%
rename from foo/test.js
rename to heuristics/distillable/index.js
index bd27485040923622564df212a44414a55a6b1700..5f60fb9b04ea95a24fce7d4a1836ea5789306ed8 100644
--- a/foo/test.js
+++ b/heuristics/distillable/index.js
@@ -9,6 +9,10 @@ $dataRows = null;
 
 baseImage = document.querySelector('#base-img');
 distilledImage = document.querySelector('#distilled-img');
+baseImageNext = document.querySelector('#base-img-next');
+distilledImageNext = document.querySelector('#distilled-img-next');
+baseImageNext2 = document.querySelector('#base-img-next2');
+distilledImageNext2 = document.querySelector('#distilled-img-next2');
 imageHolder = document.querySelector('#image-holder');
 
 goodButton = document.querySelector('#good');
@@ -17,6 +21,13 @@ resetButton = document.querySelector('#reset');
 poorButton = document.querySelector('#poor');
 errorButton = document.querySelector('#error');
 
+jumpCheck = document.getElementById('auto-advance');
+
+goodCount = document.querySelector('#good-count');
+badCount = document.querySelector('#bad-count');
+poorCount = document.querySelector('#poor-count');
+errorCount = document.querySelector('#error-count');
+
 function changeIndex(newIndex) {
   var oldIndex = idx;
   idx = Math.max(0, Math.min(data.length - 1, newIndex));
@@ -25,7 +36,16 @@ function changeIndex(newIndex) {
   var $currentRow = $dataRows.eq(idx);
   $currentRow.addClass('active');
   $currentRow[0].scrollIntoViewIfNeeded();
+  urlHolder.scrollIntoViewIfNeeded();
   $('.current-position').text(idx + 1);
+  window.location.hash = data[idx]['index'];
+}
+
+function updateCount() {
+  goodCount.innerText = document.querySelectorAll('tr[class*="good"]').length
+  badCount.innerText = document.querySelectorAll('tr[class*="bad"]').length
+  poorCount.innerText = document.querySelectorAll('tr[class*="poor"]').length
+  errorCount.innerText = document.querySelectorAll('tr[class*="error"]').length
 }
 
 function recordValue(v) {
@@ -33,8 +53,9 @@ function recordValue(v) {
   e['good'] = v;
   updateTableRow(idx);
   sendUpdate(e, function() {
-    changeIndex(idx + 1);
+    changeIndex(nextIndex(idx));
   });
+  updateCount();
 }
 
 function recordGood() {
@@ -104,11 +125,11 @@ $('.left-caret').click(back);
 function showImage(i) {
   goodButton.disabled = false;
   badButton.disabled = false;
-  var e = data[i]
-  baseImage.src = '/images/' + e['screenshot'].replace(/.*\//, '')
-  distilledImage.src = '/images/' + e['distilled'].replace(/.*\//, '')
-  urlHolder.innerText = e['url']
-  urlHolder.href = e['url']
+  var e = data[i];
+  baseImage.src = '/images/' + e['screenshot'].replace(/.*\//, '');
+  distilledImage.src = '/images/' + e['distilled'].replace(/.*\//, '');
+  urlHolder.innerText = decodeURI(e['url']);
+  urlHolder.href = e['url'];
   imageHolder.classList.remove('bad');
   imageHolder.classList.remove('good');
   imageHolder.classList.remove('error');
@@ -123,8 +144,35 @@ function showImage(i) {
               ? 'poor'
               : 'bad');
   }
+  var n = data[i + 1];
+  if (n) {
+    baseImageNext.src = '/images/' + n['screenshot'].replace(/.*\//, '');
+    distilledImageNext.src = '/images/' + n['distilled'].replace(/.*\//, '');
+  }
+  n = data[nextUnrated(i)];
+  if (n) {
+    baseImageNext2.src = '/images/' + n['screenshot'].replace(/.*\//, '');
+    distilledImageNext2.src = '/images/' + n['distilled'].replace(/.*\//, '');
+  }
+}
+
+function nextIndex(i) {
+  return jumpCheck.checked ? nextUnrated(i) : (i + 1);
+}
+
+function nextUnrated(i) {
+  i += 1;
+  while (i < data.length) {
+    var e = data[i];
+    if (typeof e['good'] == 'undefined') {
+      return i;
+    }
+    i += 1;
+  }
+  return -1;
 }
 
+
 function updateTableRow(i) {
   var row = dataTable.querySelectorAll('tr')[i];
   row.classList.remove('good');
@@ -154,7 +202,7 @@ function createTable() {
     row = document.createElement('tr');
     cell = document.createElement('td');
     row.appendChild(cell);
-    cell.appendChild(document.createTextNode(data[i]['url']));
+    cell.appendChild(document.createTextNode(decodeURI(data[i]['url'])));
     dataTable.appendChild(row);
     dataRows.push(row);
   }
@@ -170,16 +218,21 @@ function createTable() {
   })
 }
 
-function setData(d, i) {
+function setData(d) {
   var needsTable = data == null;
   data = d; //.slice(0, 100);
   $('.total-entries').text(data.length);
   if (needsTable) {
     createTable();
   }
+  idx = getHashIndex();
+  if (idx == -1) {
+    idx = Math.floor(Math.random() * data.length);
+  }
   for (var i = 0; i < data.length; i++) {
     updateTableRow(i);
   }
+  updateCount();
 }
 
 function handleVisibilityChange() {
@@ -197,11 +250,6 @@ function getData() {
         var data = rsp['response']['data'];
         nextUpdateId = rsp['response']['nextId'];
         setData(data);
-        var startIndex = parseInt(window.location.hash.substr(1)) - 1;
-        if (isNaN(startIndex)) {
-          startIndex = 0;
-        }
-        changeIndex(startIndex);
         sendGetUpdates(1000);
       }
     );
@@ -244,6 +292,7 @@ function getUpdates(delay) {
           data[idx] = entry;
           updateTableRow(idx);
         }
+        updateCount();
         nextUpdateId = nextUpdateId;
         delay = 1000;
       } else {
@@ -299,3 +348,29 @@ $(document).ready(function(){
     }
   });
 });
+
+function getHashIndex() {
+  if (!window.location.hash) {
+    return -1;
+  }
+  index = parseInt(window.location.hash.substr(1));
+  if (isNaN(index)) {
+    return -1;
+  }
+  if (data && parseInt(data[idx]['index']) == index) {
+    return idx;
+  }
+  for (var i = 0; i < data.length; i++) {
+    if (parseInt(data[i]['index']) == index) {
+      return i;
+    }
+  }
+  return -1;
+}
+
+$(window).on('hashchange', function () {
+  hashIdx = getHashIndex();
+  if (hashIdx != idx) {
+    changeIndex(hashIdx);
+  }
+});