vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

New view repo UI

Browse source
This commit is contained in:
Joseph Schorr 2013-10-10 20:43:37 -04:00
parent a7f5b5e033
commit 90759e0cb2
4 changed files with 207 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

110
static/js/graphing.js
View file

@ -57,14 +57,14 @@ ImageHistoryTree.prototype.draw = function(container) {
var width = document.getElementById(container).clientWidth;
var height = Math.max(width * 0.625, this.maxHeight_ * (DEPTH_HEIGHT + 10));
var margin = { top: 40, right: 60, bottom: 20, left: 60 };
var margin = { top: 40, right: 20, bottom: 20, left: 20 };
var m = [margin.top, margin.right, margin.bottom, margin.left];
var w = width - m[1] - m[3];
var h = height - m[0] - m[2];
// Create the tree and all its components.
var tree = d3.layout.tree()
.size([h, w]);
.size([w, h]);
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.x, d.y]; });
@ -110,10 +110,26 @@ ImageHistoryTree.prototype.draw = function(container) {
};
/**
* Sets the current tag displayed in the tree.
*/
ImageHistoryTree.prototype.setTag = function(tagName) {
this.setTag_(tagName);
};
/**
* Sets the current image displayed in the tree.
*/
ImageHistoryTree.prototype.setImage = function(imageId) {
this.setImage_(imageId);
};
/**
* Returns the ancestors of the given image.
*/
ImageHistoryTree.prototype.getAncestors = function(image) {
ImageHistoryTree.prototype.getAncestors_ = function(image) {
var ancestorsString = image.ancestors;
// Remove the starting and ending /s.
@ -125,11 +141,37 @@ ImageHistoryTree.prototype.getAncestors = function(image) {
};
/**
* Sets the current tag displayed in the tree and raises the event that the tag
* was changed.
*/
ImageHistoryTree.prototype.changeTag_ = function(tagName) {
$(this).trigger({
'type': 'tagChanged',
'tag': tagName
});
this.setTag_(tagName);
};
/**
* Sets the current image displayed in the tree and raises the event that the image
* was changed.
*/
ImageHistoryTree.prototype.changeImage_ = function(imageId) {
$(this).trigger({
'type': 'imageChanged',
'image': this.findImage_(function(image) { return image.id == imageId; })
});
this.setImage_(imageId);
};
/**
* Marks the image node with whether it is the current image and/or highlighted.
*/
ImageHistoryTree.prototype.markWithState_ = function(image, imageNode) {
var currentAncestors = this.getAncestors(this.currentImage_);
var currentAncestors = this.getAncestors_(this.currentImage_);
var isCurrent = image.id == this.currentImage_.id;
var isHighlighted = currentAncestors.indexOf(image.dbid.toString()) >= 0;
imageNode.highlighted = isHighlighted || isCurrent;
@ -169,7 +211,7 @@ ImageHistoryTree.prototype.buildRoot_ = function() {
for (var i = 0; i < this.images_.length; ++i) {
var image = this.images_[i];
var imageNode = imageByDBID[image.dbid];
var ancestors = this.getAncestors(image);
var ancestors = this.getAncestors_(image);
var immediateParent = ancestors[ancestors.length - 1] * 1;
var parent = imageByDBID[immediateParent];
if (parent) {
@ -192,6 +234,22 @@ ImageHistoryTree.prototype.buildRoot_ = function() {
};
/**
* Finds the image where the checker function returns true and returns it or null
* if none.
*/
ImageHistoryTree.prototype.findImage_ = function(checker) {
for (var i = 0; i < this.images_.length; ++i) {
var image = this.images_[i];
if (checker(image)) {
return image;
}
}
return null;
};
/**
* Sets the current tag displayed in the tree.
*/
@ -199,16 +257,13 @@ ImageHistoryTree.prototype.setTag_ = function(tagName) {
this.currentTag_ = tagName;
// Find the new current image.
for (var i = 0; i < this.images_.length; ++i) {
var image = this.images_[i];
if (image.tags.indexOf(tagName) >= 0) {
this.currentImage_ = image;
}
}
this.currentImage_ = this.findImage_(function(image) {
return image.tags.indexOf(tagName) >= 0;
});
// Update the state of each node.
var imageByDBID = this.imageByDBID_;
var currentAncestors = this.getAncestors(this.currentImage_);
var currentAncestors = this.getAncestors_(this.currentImage_);
for (var i = 0; i < this.images_.length; ++i) {
var image = this.images_[i];
var imageNode = this.imageByDBID_[image.dbid];
@ -219,7 +274,7 @@ ImageHistoryTree.prototype.setTag_ = function(tagName) {
for (var i = 0; i < this.images_.length; ++i) {
var image = this.images_[i];
var imageNode = this.imageByDBID_[image.dbid];
var ancestors = this.getAncestors(image);
var ancestors = this.getAncestors_(image);
var immediateParent = ancestors[ancestors.length - 1] * 1;
var parent = imageByDBID[immediateParent];
if (parent && imageNode.highlighted) {
@ -236,7 +291,24 @@ ImageHistoryTree.prototype.setTag_ = function(tagName) {
}
}
// Finally, update the tree.
this.update_(this.root_);
};
/**
* Sets the current image highlighted in the tree.
*/
ImageHistoryTree.prototype.setImage_ = function(imageId) {
// Find the new current image.
var newImage = this.findImage_(function(image) {
return image.id == imageId;
});
if (newImage == this.currentImage_) {
return;
}
this.currentImage_ = newImage;
this.update_(this.root_);
};
@ -300,7 +372,7 @@ ImageHistoryTree.prototype.update_ = function(source) {
.attr("dy", ".35em")
.attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
.text(function(d) { return d.name; })
.on("click", function(d) { that.toggle_(d); that.update_(d); })
.on("click", function(d) { that.changeImage_(d.image.id); })
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
@ -345,6 +417,12 @@ ImageHistoryTree.prototype.update_ = function(source) {
return d._children ? "lightsteelblue" : "#fff";
});
// Update the repo text.
nodeUpdate.select("text")
.attr("class", function(d) {
return d.image.id == that.currentImage_.id ? 'current' : '';
});
// Ensure that the node is visible.
nodeUpdate.select("g")
.style("fill-opacity", 1);
@ -369,7 +447,7 @@ ImageHistoryTree.prototype.update_ = function(source) {
.on("click", function(d, e) {
var tag = this.getAttribute('data-tag');
if (tag) {
that.setTag_(tag);
that.changeTag_(tag);
}
});