Add scripts for distillability modelling

heuristics/distillable/index.js

 data = null;
 idx = 0;
 
 nextUpdateId = 0;
 
 urlHolder = document.querySelector('#url-holder');
 dataTable = document.querySelector('#data-table');
 $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');
 badButton = document.querySelector('#bad');
 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));
   showImage(idx);
   $dataRows.eq(oldIndex).removeClass('active');
   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) {
   var e = data[idx];
   e['good'] = v;
   updateTableRow(idx);
   sendUpdate(e, function() {
-    changeIndex(idx + 1);
+    changeIndex(nextIndex(idx));
   });
+  updateCount();
 }
 
 function recordGood() {
   recordValue(1);
 }
 
 function recordBad() {
   recordValue(0);
 }
 
@@ skipping 49 matching lines @@
 goodButton.onclick = recordGood
 badButton.onclick = recordBad
 resetButton.onclick = resetEntry
 errorButton.onclick = recordError
 $('.right-caret').click(skip);
 $('.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');
   imageHolder.classList.remove('poor');
   if (typeof e['good'] != 'undefined')  {
     imageHolder.classList.add(
         e['good'] == 1
           ? 'good'
           : e['good'] == -1
             ? 'error'
             : e['good'] == 2
               ? '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');
   row.classList.remove('bad');
   row.classList.remove('error');
   row.classList.remove('poor');
   var e = data[i];
   if (typeof e['good'] != 'undefined') {
     row.classList.add(
         e['good'] == 1
           ? 'good'
           : e['good'] == -1
             ? 'error'
             : e['good'] == 2
               ? 'poor'
               : 'bad');
   }
   if (i == idx) {
     // forces ui update
     changeIndex(idx);
   }
 }
 
 function createTable() {
   var dataRows = [];
   for (var i = 0; i < data.length; i++) {
     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);
   }
 
   $dataRows = $(dataRows);
 
   $dataRows.each(function(i, r) {
     $(r).click(function() {
       console.log(i);
       // forces ui update
       changeIndex(i);
     });
   })
 }
 
-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() {
   if (!document.hidden) sendGetUpdates(1000);
 }
 
 function getData() {
   sendMessage(
       'POST',
       {
         'action': 'getData'
       },
       function(rsp) {
         document.addEventListener('visibilitychange', handleVisibilityChange, false);
         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);
       }
     );
 }
 
 
 getUpdatesSent = false;
 function sendGetUpdates(delay) {
   if (document.hidden) return;
   if (getUpdatesSent) return;
@@ skipping 22 matching lines @@
           var u = updates[i];
           var idx = u['index'];
           var entry = u['entry'];
           var curr = data[idx];
           if (curr['url'] != entry['url']) {
             console.error(curr, entry);
           }
           data[idx] = entry;
           updateTableRow(idx);
         }
+        updateCount();
         nextUpdateId = nextUpdateId;
         delay = 1000;
       } else {
         delay = Math.min(30 * 1000, 1.5 * delay);
       }
       console.log('xx: response: ', response, delay);
       sendGetUpdates(delay);
     },
     'dataType': 'json',
   });
@@ skipping 35 matching lines @@
     switch (e.which) {
       case 37: // <--
         back();
         break;
       case 39: // >--
         skip();
         break;
     }
   });
 });
+
+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);
+  }
+});