From 50929102b5b9c12fe342bace54d1949f03f5ec1a Mon Sep 17 00:00:00 2001 From: Joseph Schorr Date: Wed, 16 Oct 2013 22:33:35 -0400 Subject: [PATCH] Have the image tree allow a state with no selected image nor so selected tag. --- static/js/controllers.js | 2 +- static/js/graphing.js | 58 +++++++++++++++++++++++----------------- 2 files changed, 35 insertions(+), 25 deletions(-) diff --git a/static/js/controllers.js b/static/js/controllers.js index 534ce6020..b103a4255 100644 --- a/static/js/controllers.js +++ b/static/js/controllers.js @@ -302,7 +302,7 @@ function RepoCtrl($scope, Restangular, $routeParams, $rootScope) { var imageFetch = Restangular.one('repository/' + namespace + '/' + name + '/image'); imageFetch.get().then(function(resp) { $scope.imageHistory = resp.images; - $scope.tree = new ImageHistoryTree(namespace, name, resp.images, $scope.currentTag, + $scope.tree = new ImageHistoryTree(namespace, name, resp.images, $scope.getCommentFirstLine, $scope.getTimeSince); $scope.tree.draw('image-history-container'); diff --git a/static/js/graphing.js b/static/js/graphing.js index f05943ae4..95d76d1b4 100644 --- a/static/js/graphing.js +++ b/static/js/graphing.js @@ -4,7 +4,7 @@ var DEPTH_WIDTH = 132; /** * Based off of http://mbostock.github.io/d3/talk/20111018/tree.html by Mike Bostock (@mbostock) */ -function ImageHistoryTree(namespace, name, images, current, formatComment, formatTime) { +function ImageHistoryTree(namespace, name, images, formatComment, formatTime) { /** * The namespace of the repo. */ @@ -20,21 +20,6 @@ function ImageHistoryTree(namespace, name, images, current, formatComment, forma */ this.images_ = images; - /** - * The current tag. - */ - this.currentTag_ = current.name; - - /** - * The current image. - */ - this.currentImage_ = current.image; - - /** - * Counter for creating unique IDs. - */ - this.idCounter_ = 0; - /** * Method to invoke to format a comment for an image. */ @@ -44,6 +29,21 @@ function ImageHistoryTree(namespace, name, images, current, formatComment, forma * Method to invoke to format the time for an image. */ this.formatTime_ = formatTime; + + /** + * The current tag (if any). + */ + this.currentTag_ = null; + + /** + * The current image (if any). + */ + this.currentImage_ = null; + + /** + * Counter for creating unique IDs. + */ + this.idCounter_ = 0; } @@ -361,21 +361,27 @@ ImageHistoryTree.prototype.markPath_ = function(startingNode, isHighlighted) { * Sets the current tag displayed in the tree. */ ImageHistoryTree.prototype.setTag_ = function(tagName) { + // Save the current tag. this.currentTag_ = tagName; - // Update the state of each existing node to no longer be highlighted. var imageByDBID = this.imageByDBID_; - var currentNode = imageByDBID[this.currentImage_.dbid]; - this.markPath_(currentNode, false); - // Find the new current image. + // Update the state of each existing node to no longer be highlighted. + if (this.currentImage_) { + var currentNode = imageByDBID[this.currentImage_.dbid]; + this.markPath_(currentNode, false); + } + + // Find the new current image (if any). this.currentImage_ = this.findImage_(function(image) { - return image.tags.indexOf(tagName) >= 0; + return image.tags.indexOf(tagName || '(no tag specified)') >= 0; }); // Update the state of the new node path. - currentNode = imageByDBID[this.currentImage_.dbid]; - this.markPath_(currentNode, true); + if (this.currentImage_) { + var currentNode = imageByDBID[this.currentImage_.dbid]; + this.markPath_(currentNode, true); + } // Ensure that the children are in the correct order. for (var i = 0; i < this.images_.length; ++i) { @@ -432,6 +438,7 @@ ImageHistoryTree.prototype.update_ = function(source) { var diagonal = this.diagonal_; var tip = this.tip_; var currentTag = this.currentTag_; + var currentImage = this.currentImage_; var repoNamespace = this.repoNamespace_; var repoName = this.repoName_; var maxHeight = this.maxHeight_; @@ -520,7 +527,10 @@ ImageHistoryTree.prototype.update_ = function(source) { if (d.collapsed) { return 'collapsed'; } - return d.image.id == that.currentImage_.id ? 'current' : ''; + if (!currentImage) { + return ''; + } + return d.image.id == currentImage.id ? 'current' : ''; }); // Ensure that the node is visible.