UI and API improvements for working with large repositories

- Change the tag check bar to only select the current page (by default), but allow for selecting ALL tags
- Limit the number of tags compared in the visualization view to 10
- Fix the multiselect dropdown to limit itself to 10 items selected
- Remove saving the selected tags in the URL, as it is too slow and overloads the URLs in Chrome when there are 1000+ tags selected
- Change the images API to not return locations: By skipping the extra join and looping, it made the /images API call 10x faster (in hand tests)

Fixes #292
Fixes #293

static/js/services/ui-service.js

@@ -2,14 +2,16 @@
  * Service which provides helper methods for performing some simple UI operations.
  */
 angular.module('quay').factory('UIService', ['$timeout', '$rootScope', '$location', function($timeout, $rootScope, $location) {
-  var CheckStateController = function(items, itemKey, opt_checked) {
+  var CheckStateController = function(items, itemKey) {
     this.items = items;
-    this.itemKey = itemKey;
-    this.checked = opt_checked || [];
-    this.checkedMap = {};
-    this.listeners_ = [];
+    this.checked = [];
 
-    this.buildMap_();
+    this.allItems_ = items;
+    this.allCheckedMap_ = {};
+
+    this.itemKey_ = itemKey;
+    this.listeners_ = [];
+    this.page_ = null;
   };
 
   CheckStateController.prototype.listen = function(callback) {
@@ -17,7 +19,7 @@ angular.module('quay').factory('UIService', ['$timeout', '$rootScope', '$locatio
   };
 
   CheckStateController.prototype.isChecked = function(item) {
-    return !!this.checkedMap[item[this.itemKey]];
+    return !!this.allCheckedMap_[item[this.itemKey_]];
   };
 
   CheckStateController.prototype.toggleItem = function(item) {
@@ -29,38 +31,59 @@ angular.module('quay').factory('UIService', ['$timeout', '$rootScope', '$locatio
   };
 
   CheckStateController.prototype.toggleItems = function() {
+    this.updateMap_(this.checked, false);
+
     if (this.checked.length) {
       this.checked = [];
-      this.checkedMap = {};
     } else {
       this.checked = this.items.slice();
-      this.buildMap_();
     }
+
+    this.updateMap_(this.checked, true);
     this.callListeners_();
   };
 
-  CheckStateController.prototype.setChecked = function(items) {
-    this.checked = items.slice();
-    this.buildMap_();
+  CheckStateController.prototype.setPage = function(page, pageSize) {
+    this.items = this.allItems_.slice(page * pageSize, (page + 1) * pageSize);
+    this.rebuildCheckedList_();
   };
 
-  CheckStateController.prototype.buildMap_ = function() {
+  CheckStateController.prototype.setChecked = function(items) {
+    this.allCheckedMap_ = {};
+    this.updateMap_(items, true);
+    this.rebuildCheckedList_();
+  };
+
+  CheckStateController.prototype.rebuildCheckedList_ = function() {
     var that = this;
-    this.checked.forEach(function(item) {
+    this.checked = [];
+    this.items.forEach(function(item) {
+      if (that.allCheckedMap_[item[that.itemKey_]]) {
+        that.checked.push(item);
+      }
+    });
+
+    this.callListeners_();
+  };
+
+  CheckStateController.prototype.updateMap_ = function(items, is_checked) {
+    var that = this;
+    items.forEach(function(item) {
       if (item == null) { return; }
-      that.checkedMap[item[that.itemKey]] = true;
+      that.allCheckedMap_[item[that.itemKey_]] = is_checked;
     });
   };
 
   CheckStateController.prototype.checkByFilter = function(filter) {
+    this.updateMap_(this.checked, false);
     this.checked = $.grep(this.items, filter);
-    this.buildMap_();
+    this.updateMap_(this.checked, true);
     this.callListeners_();
   };
 
   CheckStateController.prototype.checkItem = function(item) {
     this.checked.push(item);
-    this.checkedMap[item[this.itemKey]] = true;
+    this.allCheckedMap_[item[this.itemKey_]] = true;
     this.callListeners_();
   };
 
@@ -68,17 +91,30 @@ angular.module('quay').factory('UIService', ['$timeout', '$rootScope', '$locatio
     this.checked = $.grep(this.checked, function(cItem) {
       return cItem != item;
     });
-    this.checkedMap[item[this.itemKey]] = false;
+
+    this.allCheckedMap_[item[this.itemKey_]] = false;
     this.callListeners_();
   };
 
   CheckStateController.prototype.callListeners_ = function() {
-    var checked = this.checked;
+    var that = this;
+    var allCheckedMap = this.allCheckedMap_;
+    var allChecked = [];
+
+    this.allItems_.forEach(function(item) {
+      var key = item[that.itemKey_];
+      if (!!allCheckedMap[key]) {
+        allChecked.push(item);
+      }
+    });
+
     this.listeners_.map(function(listener) {
-      listener(checked);
+      listener(allChecked, that.checked);
     });
   };
 
+  //////////////////////////////////////////////////////////////////////////////////////
+
   var uiService = {};
 
   uiService.hidePopover = function(elem) {