Notify the tree when the container was probably resized.

static/js/app.js

@@ -117,6 +117,23 @@ quayApp = angular.module('quay', ['restangular', 'angularMoment', 'angulartics',
       }
     };
   }).
+  directive('onresize', function ($window, $parse) {
+    return function (scope, element, attr) {
+      var fn = $parse(attr.onresize);
+
+      var notifyResized = function() {
+        scope.$apply(function () {
+          fn(scope);
+        });
+      };
+
+      angular.element($window).on('resize', null, notifyResized);
+
+      scope.$on('$destroy', function() {
+        angular.element($window).off('resize', null, notifyResized);
+      });
+    };
+  }).
   config(['$routeProvider', '$locationProvider', '$analyticsProvider',
     function($routeProvider, $locationProvider, $analyticsProvider) {
 

static/js/controllers.js

@@ -313,6 +313,12 @@ function RepoCtrl($scope, Restangular, $routeParams, $rootScope, $location) {
     }
   };
 
+  $scope.$watch('repo', function() {
+    if ($scope.tree) {
+      $scope.tree.notifyResized();
+    }
+  });
+
   var listImages = function() {
     if ($scope.imageHistory) { return; }
 

static/js/graphing.js

@@ -136,6 +136,14 @@ ImageHistoryTree.prototype.draw = function(container) {
 };
 
 
+/**
+ * Redraws the image history to fit the new size.
+ */
+ImageHistoryTree.prototype.notifyResized = function() {
+  console.log('Image history container resized.');
+};
+
+
 /**
  * Sets the current tag displayed in the tree.
  */

static/partials/view-repo.html

@@ -83,7 +83,7 @@
 	    </div>
 
             <!-- Tree View itself -->
-            <div id="image-history-container"></div>
+            <div id="image-history-container" onresize="tree.notifyResized()"></div>
           </div>	
         </div>