You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@tez.apache.org by ss...@apache.org on 2015/02/18 23:40:57 UTC
[10/23] tez git commit: TEZ-2102. Tez UI: DAG view has hidden edges,
dragging DAG by holding vertex causes unintended click. (Sreenath
Somarajapuram via hitesh)
TEZ-2102. Tez UI: DAG view has hidden edges, dragging DAG by holding vertex causes unintended click. (Sreenath Somarajapuram via hitesh)
Project: http://git-wip-us.apache.org/repos/asf/tez/repo
Commit: http://git-wip-us.apache.org/repos/asf/tez/commit/a5a56659
Tree: http://git-wip-us.apache.org/repos/asf/tez/tree/a5a56659
Diff: http://git-wip-us.apache.org/repos/asf/tez/diff/a5a56659
Branch: refs/heads/TEZ-2003
Commit: a5a5665916acbd504bb095761b920df9ff36185e
Parents: 8e138a2
Author: Hitesh Shah <hi...@apache.org>
Authored: Sat Feb 14 08:53:21 2015 -0800
Committer: Hitesh Shah <hi...@apache.org>
Committed: Sat Feb 14 08:53:21 2015 -0800
----------------------------------------------------------------------
CHANGES.txt | 1 +
.../components/dag-view/data-processor.js | 16 +++++------
.../scripts/components/dag-view/graph-view.js | 30 ++++++++++++++++----
tez-ui/src/main/webapp/app/styles/dag-view.less | 4 +--
4 files changed, 35 insertions(+), 16 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/tez/blob/a5a56659/CHANGES.txt
----------------------------------------------------------------------
diff --git a/CHANGES.txt b/CHANGES.txt
index 33f9614..fd20d20 100644
--- a/CHANGES.txt
+++ b/CHANGES.txt
@@ -64,6 +64,7 @@ Release 0.6.1: Unreleased
INCOMPATIBLE CHANGES
ALL CHANGES:
+ TEZ-2102. Tez UI: DAG view has hidden edges, dragging DAG by holding vertex causes unintended click.
TEZ-2101. Tez UI: Issues on displaying a table.
TEZ-2092. Tez UI history url handler injects spurious trailing slash.
TEZ-2098. Tez UI: Dag details should be the default page for dag, fix invalid time entries for failed Vertices.
http://git-wip-us.apache.org/repos/asf/tez/blob/a5a56659/tez-ui/src/main/webapp/app/scripts/components/dag-view/data-processor.js
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/scripts/components/dag-view/data-processor.js b/tez-ui/src/main/webapp/app/scripts/components/dag-view/data-processor.js
index fae5a38..362a602 100644
--- a/tez-ui/src/main/webapp/app/scripts/components/dag-view/data-processor.js
+++ b/tez-ui/src/main/webapp/app/scripts/components/dag-view/data-processor.js
@@ -74,7 +74,7 @@
* + Other custom properties including data to be displayed
* }
* ]
- * maxDepth, inputCount
+ * maxDepth, leafCount
* }
*
* Data Nodes:
@@ -579,27 +579,27 @@ App.DagViewComponent.dataProcessor = (function (){
*/
function _getGraphDetails(tree) {
var maxDepth = 0,
- inputCount = 0,
+ leafCount = 0,
links = _getLinks(tree);
tree.ifForEach('children', function (child) {
var details = _getGraphDetails(child);
maxDepth = Math.max(maxDepth, details.maxDepth);
-
- if(child.type == types.INPUT) {
- inputCount++;
- }
- inputCount += details.inputCount;
+ leafCount += details.leafCount;
links.push.apply(links, details.links);
});
+ if(!tree.get('children')) {
+ leafCount++;
+ }
+
return {
tree: tree,
links: links,
maxDepth: maxDepth + 1,
- inputCount: inputCount
+ leafCount: leafCount
};
}
http://git-wip-us.apache.org/repos/asf/tez/blob/a5a56659/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 02c04e6..88c11f7 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
@@ -86,6 +86,7 @@ App.DagViewComponent.graphView = (function (){
hSpacing: 180, // Horizontal spacing between nodes
vSpacing: 70, // Vertical spacing between nodes
depthSpacing: 180, // In leftToRight depthSpacing = hSpacing
+ linkDelta: 30, // Used for links starting and ending at the same point
projector: function (x, y) { // Converts coordinate based on current orientation
return {x: y, y: x};
},
@@ -96,6 +97,7 @@ App.DagViewComponent.graphView = (function (){
hSpacing: 120,
vSpacing: 100,
depthSpacing: 100, // In topToBottom depthSpacing = vSpacing
+ linkDelta: 15,
projector: function (x, y) {
return {x: x, y: y};
},
@@ -218,7 +220,7 @@ App.DagViewComponent.graphView = (function (){
* @param d {VertexDataNode}
*/
function _addStatusBar(node, d) {
- var group = node.append('g');
+ var group = node.append('g'),
statusIcon = App.Helpers.misc.getStatusClassForEntity(d.get('data'));
group.attr('class', 'status-bar');
@@ -486,6 +488,14 @@ App.DagViewComponent.graphView = (function (){
}
/**
+ * Callback for mousedown & mousemove interactions. To disable click on drag
+ * @param d {DataNode} Data of the clicked element
+ */
+ function _onMouse(d) {
+ d3.select(this).on('click', d3.event.type == 'mousedown' ? _onClick : null);
+ }
+
+ /**
* Double click event handler.
* @param d {DataNode} Data of the clicked element
*/
@@ -530,8 +540,8 @@ App.DagViewComponent.graphView = (function (){
sV = 45,
mY -= 50;
if(sX == tX) {
- sX += 30,
- tX -= 30;
+ sX += _layout.linkDelta,
+ tX -= _layout.linkDelta;
}
}
sH = Math.abs(sX - tX) * 1.1;
@@ -575,7 +585,8 @@ App.DagViewComponent.graphView = (function (){
.on({
mouseover: _onMouseOver,
mouseout: _tip.hide,
- click: _onClick,
+ mousedown: _onMouse,
+ mousemove: _onMouse,
dblclick: _onDblclick
})
.style('opacity', 1e-6)
@@ -786,7 +797,14 @@ App.DagViewComponent.graphView = (function (){
* @param layout {Object} One of the values defined in LAYOUTS object
*/
function _setLayout(layout) {
- var dimention = layout.projector(_data.inputCount, _data.maxDepth - 1);
+ var leafCount = _data.leafCount,
+ dimention;
+
+ // If count is even dummy will be replaced by output, so output would no more be leaf
+ if(_data.tree.get('children.length') % 2 == 0) {
+ leafCount--;
+ }
+ dimention = layout.projector(leafCount, _data.maxDepth - 1);
_layout = layout;
@@ -818,7 +836,7 @@ App.DagViewComponent.graphView = (function (){
_tip.init($(element).find('.tool-tip'), _svg);
_treeData = data.tree,
- _treeData.x0 = _height / 2,
+ _treeData.x0 = 0,
_treeData.y0 = 0;
_panZoom = _attachPanZoom(_svg, _g);
http://git-wip-us.apache.org/repos/asf/tez/blob/a5a56659/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 0ad61e2..4cb6707 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: 420px;
+ max-width: 620px;
.sub {
font-size: 10px;
@@ -288,7 +288,7 @@
td {
overflow: hidden;
white-space: nowrap;
- max-width: 200;
+ max-width: 300px;
}
td:nth-child(1) {
padding-right: 10px;