Return-Path: X-Original-To: apmail-tez-commits-archive@minotaur.apache.org Delivered-To: apmail-tez-commits-archive@minotaur.apache.org Received: from mail.apache.org (hermes.apache.org [140.211.11.3]) by minotaur.apache.org (Postfix) with SMTP id EF948176F0 for ; Sat, 14 Feb 2015 16:55:43 +0000 (UTC) Received: (qmail 21544 invoked by uid 500); 14 Feb 2015 16:55:43 -0000 Delivered-To: apmail-tez-commits-archive@tez.apache.org Received: (qmail 21503 invoked by uid 500); 14 Feb 2015 16:55:43 -0000 Mailing-List: contact commits-help@tez.apache.org; run by ezmlm Precedence: bulk List-Help: List-Unsubscribe: List-Post: List-Id: Reply-To: dev@tez.apache.org Delivered-To: mailing list commits@tez.apache.org Received: (qmail 21494 invoked by uid 99); 14 Feb 2015 16:55:43 -0000 Received: from git1-us-west.apache.org (HELO git1-us-west.apache.org) (140.211.11.23) by apache.org (qpsmtpd/0.29) with ESMTP; Sat, 14 Feb 2015 16:55:43 +0000 Received: by git1-us-west.apache.org (ASF Mail Server at git1-us-west.apache.org, from userid 33) id 92B74E03AE; Sat, 14 Feb 2015 16:55:43 +0000 (UTC) Content-Type: text/plain; charset="us-ascii" MIME-Version: 1.0 Content-Transfer-Encoding: 7bit From: hitesh@apache.org To: commits@tez.apache.org Message-Id: X-Mailer: ASF-Git Admin Mailer Subject: tez git commit: TEZ-2102. Tez UI: DAG view has hidden edges, dragging DAG by holding vertex causes unintended click. (Sreenath Somarajapuram via hitesh) Date: Sat, 14 Feb 2015 16:55:43 +0000 (UTC) Repository: tez Updated Branches: refs/heads/branch-0.6 84e1b8e84 -> 6bcfda8de TEZ-2102. Tez UI: DAG view has hidden edges, dragging DAG by holding vertex causes unintended click. (Sreenath Somarajapuram via hitesh) (cherry picked from commit a5a5665916acbd504bb095761b920df9ff36185e) Project: http://git-wip-us.apache.org/repos/asf/tez/repo Commit: http://git-wip-us.apache.org/repos/asf/tez/commit/6bcfda8d Tree: http://git-wip-us.apache.org/repos/asf/tez/tree/6bcfda8d Diff: http://git-wip-us.apache.org/repos/asf/tez/diff/6bcfda8d Branch: refs/heads/branch-0.6 Commit: 6bcfda8def168b68fbd5f8ce95608dc34ff3976e Parents: 84e1b8e Author: Hitesh Shah Authored: Sat Feb 14 08:53:21 2015 -0800 Committer: Hitesh Shah Committed: Sat Feb 14 08:54: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/6bcfda8d/CHANGES.txt ---------------------------------------------------------------------- diff --git a/CHANGES.txt b/CHANGES.txt index aa7fd9b..efb1f35 100644 --- a/CHANGES.txt +++ b/CHANGES.txt @@ -6,6 +6,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/6bcfda8d/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/6bcfda8d/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/6bcfda8d/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;