Merge branch 'master' of https://git-wip-us.apache.org/repos/asf/incubator-htrace
diff --git a/htrace-webapp/src/main/web/app/search_results_view.js b/htrace-webapp/src/main/web/app/search_results_view.js
index 9275d89..f7ece4b 100644
--- a/htrace-webapp/src/main/web/app/search_results_view.js
+++ b/htrace-webapp/src/main/web/app/search_results_view.js
@@ -99,9 +99,9 @@
$('#selectedTime').attr('readonly', 'readonly');
this.canvas = $("#resultsCanvas");
this.ctx = this.canvas.get(0).getContext("2d");
- this.scaleCanvas();
this.setupCoordinates();
this.setupWidgets();
+ this.scaleCanvas();
this.draw();
this.attachEvents();
return this;
@@ -127,46 +127,45 @@
// Sets up the canvas size and scaling.
scaleCanvas: function() {
- var cssX = this.canvas.parent().innerWidth();
- var cssY = $(window).innerHeight() - $("#header").innerHeight() - 50;
var ratio = this.computeScaleFactor();
- console.log("scaleCanvas: cssX=" + cssX + ", cssY=" + cssY + ", ratio=" + ratio);
- this.maxX = cssX;
- this.maxY = cssY;
- $('#searchView').css('height', cssY + "px");
- $('#results').css('width', cssX + "px");
- $('#results').css('height', cssY + "px");
- $('#resultsView').css('width', cssX + "px");
- $('#resultsView').css('height', cssY + "px");
- $('#resultsDiv').css('width', cssX + "px");
- $('#resultsDiv').css('height', cssY + "px");
- $('#resultsCanvas').css('width', cssX + "px");
- $('#resultsCanvas').css('height', cssY + "px");
- this.ctx.canvas.width = cssX * ratio;
- this.ctx.canvas.height = cssY * ratio;
+ //console.log("scaleCanvas: cssX=" + cssX + ", cssY=" + cssY + ", ratio=" + ratio);
+ $('#searchView').css('height', this.canvasY + "px");
+ $('#results').css('width', this.viewX + "px");
+ $('#results').css('height', this.canvasY + "px");
+ $('#resultsView').css('width', this.viewX + "px");
+ $('#resultsView').css('height', this.canvasY + "px");
+ $('#resultsDiv').css('width', this.viewX + "px");
+ $('#resultsDiv').css('height', this.canvasY + "px");
+ $('#resultsCanvas').css('width', this.viewX + "px");
+ $('#resultsCanvas').css('height', this.canvasY + "px");
+ this.ctx.canvas.width = this.viewX * ratio;
+ this.ctx.canvas.height = this.canvasY * ratio;
this.ctx.scale(ratio, ratio);
},
//
// Set up the screen coordinates.
//
- // 0 xB xD xS maxX
+ // 0 xB xD xS viewX
// +--------------+----------+--------------------+-----------+
// |ProcessId | Buttons | Span Description | Scrollbar |
// +--------------+----------+--------------------+-----------+
//
setupCoordinates: function() {
- this.xB = Math.min(300, Math.floor(this.maxX / 5));
- this.xD = this.xB + Math.min(75, Math.floor(this.maxX / 20));
- var scrollBarWidth = Math.min(50, Math.floor(this.maxX / 10));
- this.xS = this.maxX - scrollBarWidth;
+ this.viewX = this.canvas.parent().innerWidth();
+ this.viewY = $(window).innerHeight() - $("#header").innerHeight() - 50;
+ this.xB = Math.min(300, Math.floor(this.viewX / 5));
+ this.xD = this.xB + Math.min(75, Math.floor(this.viewX / 20));
+ var scrollBarWidth = Math.min(50, Math.floor(this.viewX / 10));
+ this.xS = this.viewX - scrollBarWidth;
+ this.canvasY = this.viewY;
},
setupWidgets: function() {
this.widgetManager = new htrace.WidgetManager({searchResultsView: this});
// Create a SpanWidget for each span we know about
- var spanWidgetHeight = Math.min(25, Math.floor(this.maxY / 32));
+ var spanWidgetHeight = Math.min(25, Math.floor(this.viewY / 32));
var numResults = this.searchResults.size();
var groupY = 0;
for (var i = 0; i < numResults; i++) {
@@ -185,6 +184,9 @@
});
groupY = widget.yF;
}
+ if (this.canvasY < groupY) {
+ this.canvasY = groupY;
+ }
// Create the time cursor widget.
var selectedTime = this.begin;
@@ -200,7 +202,7 @@
this.timeCursor.x0 = this.xD;
this.timeCursor.xF = this.xS;
this.timeCursor.y0 = 0;
- this.timeCursor.yF = this.maxY;
+ this.timeCursor.yF = this.canvasY;
this.timeCursor.begin = this.begin;
this.timeCursor.end = this.end;
},
@@ -214,7 +216,7 @@
this.ctx.save();
this.ctx.fillStyle="#ffffff";
this.ctx.strokeStyle="#000000";
- this.ctx.fillRect(0, 0, this.maxX, this.maxY);
+ this.ctx.fillRect(0, 0, this.viewX, this.canvasY);
this.ctx.restore();
// Draw all the widgets.
@@ -222,10 +224,10 @@
},
checkCanvasTooSmall: function() {
- if ((this.maxX < 200) || (this.maxY < 200)) {
+ if ((this.viewX < 200) || (this.viewY < 200)) {
this.ctx.fillStyle="#cccccc";
this.ctx.strokeStyle="#000000";
- this.ctx.fillRect(0, 0, this.maxX, this.maxY);
+ this.ctx.fillRect(0, 0, this.viewX, this.viewY);
this.ctx.font = "24px serif";
this.ctx.fillStyle="#000000";
this.ctx.fillText("Canvas too small!", 0, 24);
