You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@tez.apache.org by je...@apache.org on 2015/02/26 22:08:42 UTC
tez git commit: TEZ-2147. Swimlanes: Improved tooltip (jeagles)
Repository: tez
Updated Branches:
refs/heads/master 9c8015c49 -> 3c289c8f7
TEZ-2147. Swimlanes: Improved tooltip (jeagles)
Project: http://git-wip-us.apache.org/repos/asf/tez/repo
Commit: http://git-wip-us.apache.org/repos/asf/tez/commit/3c289c8f
Tree: http://git-wip-us.apache.org/repos/asf/tez/tree/3c289c8f
Diff: http://git-wip-us.apache.org/repos/asf/tez/diff/3c289c8f
Branch: refs/heads/master
Commit: 3c289c8f74747b2362dcdcb6d85cadc5f5f11d6e
Parents: 9c8015c
Author: Jonathan Eagles <je...@gmail.com>
Authored: Thu Feb 26 15:02:19 2015 -0600
Committer: Jonathan Eagles <je...@gmail.com>
Committed: Thu Feb 26 15:02:19 2015 -0600
----------------------------------------------------------------------
CHANGES.txt | 1 +
.../scripts/components/dag-view/graph-view.js | 6 +-
.../webapp/app/scripts/views/swimlane_view.js | 73 ++++++++++++++------
tez-ui/src/main/webapp/app/styles/dag-view.less | 6 +-
.../webapp/app/templates/common/swimlanes.hbs | 9 ++-
5 files changed, 66 insertions(+), 29 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/tez/blob/3c289c8f/CHANGES.txt
----------------------------------------------------------------------
diff --git a/CHANGES.txt b/CHANGES.txt
index 1dfe515..302292d 100644
--- a/CHANGES.txt
+++ b/CHANGES.txt
@@ -72,6 +72,7 @@ Release 0.6.1: Unreleased
INCOMPATIBLE CHANGES
ALL CHANGES:
+ TEZ-2147. Swimlanes: Improved tooltip
TEZ-2142. TEZ UI: Breadcrumb border color looks out of place in wrapped mode.
TEZ-2134. TEZ UI: On request failure, display request URL and server name in error bar.
TEZ-2136. Some enhancements to the new Tez UI.
http://git-wip-us.apache.org/repos/asf/tez/blob/3c289c8f/tez-ui/src/main/webapp/app/scripts/components/dag-view/graph-view.js
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/scripts/components/dag-view/graph-view.js b/tez-ui/src/main/webapp/app/scripts/components/dag-view/graph-view.js
index 1bfb13a..c3c090b 100644
--- a/tez-ui/src/main/webapp/app/scripts/components/dag-view/graph-view.js
+++ b/tez-ui/src/main/webapp/app/scripts/components/dag-view/graph-view.js
@@ -432,8 +432,8 @@ App.DagViewComponent.graphView = (function (){
case "path":
tooltipData = {
position: {
- x: event.pageX,
- y: event.pageY
+ x: event.clientX,
+ y: event.clientY
},
title: '%@ - %@'.fmt(
d.get('source.name') || d.get('source.vertexName'),
@@ -885,4 +885,4 @@ App.DagViewComponent.graphView = (function (){
}
};
-})();
\ No newline at end of file
+})();
http://git-wip-us.apache.org/repos/asf/tez/blob/3c289c8f/tez-ui/src/main/webapp/app/scripts/views/swimlane_view.js
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/scripts/views/swimlane_view.js b/tez-ui/src/main/webapp/app/scripts/views/swimlane_view.js
index 80f1d57..51e8509 100644
--- a/tez-ui/src/main/webapp/app/scripts/views/swimlane_view.js
+++ b/tez-ui/src/main/webapp/app/scripts/views/swimlane_view.js
@@ -19,6 +19,7 @@
App.SwimlanesView = Ember.View.extend({
didInsertElement: function() {
+ var _tip; // Instance of tip.js
var task_attempts = this.get("content");
var controller = this.get("controller");
var timeBegin = d3.min(task_attempts, function (d) { return d.get('startTime') });
@@ -52,17 +53,13 @@ App.SwimlanesView = Ember.View.extend({
.tickSize(0)
.orient("left");
- $('#swimlane').html('');
- var div = d3.select("#swimlane")
- .append("div") // declare the tooltip div
- .attr("class", "tooltip") // apply the 'tooltip' class
- .style("opacity", 0);
-
- var svg = d3.select("#swimlane")
+ var svg = d3.select('.svg-container')
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr("class", "svg");
+ _tip = App.DagViewComponent.tip;
+ _tip.init($('.tool-tip'), $(svg.node()));
var mini = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
@@ -104,23 +101,55 @@ App.SwimlanesView = Ember.View.extend({
.attr("width", function(d) {return x(d.get('endTime')) - x(d.get('startTime'));})
.attr("rx", 6)
.attr("height", y.rangeBand())
- // Tooltip stuff after this
- .on("mouseover", function(d) {
- div.transition()
- .duration(500)
- .style("opacity", 0);
- div.transition()
- .duration(200)
- .style("opacity", .9);
- div .html(
- d.get('id') +
- "<br/>Start: " + moment(d.get('startTime')).format() +
- "<br/>End: " + moment(d.get('endTime')).format())
- .style("left", (d3.event.pageX) + "px")
- .style("top", (d3.event.pageY - 28) + "px")
- .on("click", function () {controller.send('taskAttemptClicked', d.get('id'))});
+ .on({
+ mouseover: _onMouseOver,
+ mouseout: _tip.hide,
+ click: function (d) { controller.send('taskAttemptClicked', d.get('id'))}
});
+ /**
+ * Mouse over handler for all displayed SVG DOM elements.
+ * Later the implementation will be refactored and moved into the respective DataNode.
+ * d {DataNode} Contains data to be displayed
+ */
+ function _onMouseOver(d) {
+ var event = d3.event,
+ node = event.target,
+ tooltipData = {}; // Will be populated with {title/text/kvList}.
+
+ node = node.correspondingUseElement || node;
+
+ switch(_getType(node)) {
+ case "task_attempt":
+ node = d3.event.target;
+ tooltipData = {
+ position: {
+ x: event.clientX,
+ y: event.clientY
+ },
+ title: '%@'.fmt(
+ "Task Attempt"
+ )
+ };
+ tooltipData.kvList = {
+ "Id": d.get('id'),
+ "Task Id": d.get("taskID"),
+ "Vertex Id": d.get("vertexID"),
+ "DAG Id": d.get("dagID"),
+ "Start Time": App.Helpers.date.dateFormat(d.get("startTime")),
+ "End Time": App.Helpers.date.dateFormat(d.get("endTime")),
+ "Duration": App.Helpers.date.timingFormat(App.Helpers.date.duration(d.get("startTime"), d.get("endTime"))),
+ };
+ break;
+ }
+
+ _tip.show(node, tooltipData, event);
+ }
+
+ function _getType(node) {
+ return $(node).attr('class');
+ }
+
/*
// TODO: task attempt labels - draw labels if they fit
mini.append("g").selectAll("task_attempt_label")
http://git-wip-us.apache.org/repos/asf/tez/blob/3c289c8f/tez-ui/src/main/webapp/app/styles/dag-view.less
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/styles/dag-view.less b/tez-ui/src/main/webapp/app/styles/dag-view.less
index 4cb6707..e51c6e8 100644
--- a/tez-ui/src/main/webapp/app/styles/dag-view.less
+++ b/tez-ui/src/main/webapp/app/styles/dag-view.less
@@ -256,7 +256,7 @@
pointer-events: none;
display: none;
- max-width: 620px;
+ max-width: 820px;
.sub {
font-size: 10px;
@@ -288,7 +288,7 @@
td {
overflow: hidden;
white-space: nowrap;
- max-width: 300px;
+ max-width: 400px;
}
td:nth-child(1) {
padding-right: 10px;
@@ -344,4 +344,4 @@
margin-top: -20px;
font-size: .7em;
text-align: right;
-}
\ No newline at end of file
+}
http://git-wip-us.apache.org/repos/asf/tez/blob/3c289c8f/tez-ui/src/main/webapp/app/templates/common/swimlanes.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/common/swimlanes.hbs b/tez-ui/src/main/webapp/app/templates/common/swimlanes.hbs
index 4d051b8..2b2377a 100644
--- a/tez-ui/src/main/webapp/app/templates/common/swimlanes.hbs
+++ b/tez-ui/src/main/webapp/app/templates/common/swimlanes.hbs
@@ -21,7 +21,14 @@
time=controller.model.content.0.timeStamp
refresh='refresh'
}}
-<div id="swimlane">
+<div class="svg-container">
{{#view App.SwimlanesView contentBinding="controller.model.content"}}
{{/view}}
</div>
+<div class="tool-tip">
+ <div class="bubble">
+ <div class="tip-title">Title</div>
+ <div class="tip-text"></div>
+ <div class="tip-list"></div>
+ </div>
+</div>