tez-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From ss...@apache.org
Subject [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)
Date Wed, 18 Feb 2015 22:40:57 GMT
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 <hitesh@apache.org>
Authored: Sat Feb 14 08:53:21 2015 -0800
Committer: Hitesh Shah <hitesh@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;


Mime
View raw message