Get a nice dropdown of tags working on the visualize tags tab

static/js/directives/ng-transcope.js

@@ -0,0 +1,25 @@
+/**
+ * Directive to transclude a template under an ng-repeat. From: http://stackoverflow.com/a/24512435
+ */
+angular.module('quay').directive('ngTranscope', function() {
+    return {
+        link: function( $scope, $element, $attrs, controller, $transclude ) {
+            if ( !$transclude ) {
+                throw minErr( 'ngTranscope' )( 'orphan',
+                    'Illegal use of ngTransclude directive in the template! ' +
+                    'No parent directive that requires a transclusion found. ' +
+                    'Element: {0}',
+                    startingTag( $element ));
+            }
+            var innerScope = $scope.$new();
+
+            $transclude( innerScope, function( clone ) {
+                $element.empty();
+                $element.append( clone );
+                $element.on( '$destroy', function() {
+                    innerScope.$destroy();
+                });
+            });
+        }
+    };
+});

static/js/directives/repo-view/repo-panel-changes.js

@@ -96,20 +96,24 @@ angular.module('quay').directive('repoPanelChanges', function () {
       'isEnabled': '=isEnabled'
     },
     controller: function($scope, $element, $timeout, ApiService, UtilService, ImageMetadataService) {
+      $scope.tagNames = [];
 
       var update = function() {
-        if (!$scope.repository || !$scope.selectedTags) { return; }
+        if (!$scope.repository || !$scope.isEnabled) { return; }
 
+        $scope.tagNames = Object.keys($scope.repository.tags);
         $scope.currentImage = null;
         $scope.currentTag = null;
 
-        if (!$scope.tracker) {
+        if ($scope.tracker) {
+          refreshTree();
+        } else {
           updateImages();
         }
       };
 
       var updateImages = function() {
-        if (!$scope.repository || !$scope.images) { return; }
+        if (!$scope.repository || !$scope.images || !$scope.isEnabled) { return; }
 
         $scope.tracker = new RepositoryImageTracker($scope.repository, $scope.images);
 
@@ -120,16 +124,17 @@ angular.module('quay').directive('repoPanelChanges', function () {
 
       $scope.$watch('selectedTags', update)
       $scope.$watch('repository', update);
+      $scope.$watch('isEnabled', update);
+
       $scope.$watch('images', updateImages);
 
-      $scope.$watch('isEnabled', function(isEnabled) {
-        if (isEnabled) {
-          refreshTree();
-        }
-      });
+      $scope.updateState = function() {
+        update();
+      };
 
       var refreshTree = function() {
-        if (!$scope.repository || !$scope.images) { return; }
+        if (!$scope.repository || !$scope.images || !$scope.isEnabled) { return; }
+        if ($scope.selectedTags.length < 1) { return; }
 
         $('#image-history-container').empty();
 
@@ -149,6 +154,7 @@ angular.module('quay').directive('repoPanelChanges', function () {
           // Give enough time for the UI to be drawn before we resize the tree.
           $timeout(function() {
             $scope.tree.notifyResized();
+            $scope.setTag($scope.selectedTags[0]);
           }, 100);
 
           // Listen for changes to the selected tag and image in the tree.

static/js/directives/ui/multiselect-dropdown.js

@@ -0,0 +1,35 @@
+/**
+ * An element which displays a dropdown for selecting multiple elements.
+ */
+angular.module('quay').directive('multiselectDropdown', function ($compile) {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/multiselect-dropdown.html',
+    transclude: true,
+    replace: false,
+    restrict: 'C',
+    scope: {
+      'items': '=items',
+      'selectedItems': '=selectedItems',
+      'itemName': '@itemName',
+      'itemChecked': '&itemChecked'
+    },
+    controller: function($scope, $element) {
+      $scope.isChecked = function(checked, item) {
+        return checked.indexOf(item) >= 0;
+      };
+
+      $scope.toggleItem = function(item) {
+        var isChecked = $scope.isChecked($scope.selectedItems, item);
+        if (!isChecked) {
+          $scope.selectedItems.push(item);
+        } else {
+          var index = $scope.selectedItems.indexOf(item);
+          $scope.selectedItems.splice(index, 1);
+        }
+        $scope.itemChecked({'item': item, 'checked': !isChecked});
+      };
+    }
+  };
+  return directiveDefinitionObject;
+});