tez-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From prak...@apache.org
Subject tez git commit: TEZ-2016. Tez UI: Dag View Fit and Finish (Sreenath Somarajapuram via pramachandran)
Date Mon, 13 Apr 2015 17:17:29 GMT
Repository: tez
Updated Branches:
  refs/heads/master cb6721b7f -> 6019bbccf


TEZ-2016. Tez UI: Dag View Fit and Finish (Sreenath Somarajapuram via pramachandran)


Project: http://git-wip-us.apache.org/repos/asf/tez/repo
Commit: http://git-wip-us.apache.org/repos/asf/tez/commit/6019bbcc
Tree: http://git-wip-us.apache.org/repos/asf/tez/tree/6019bbcc
Diff: http://git-wip-us.apache.org/repos/asf/tez/diff/6019bbcc

Branch: refs/heads/master
Commit: 6019bbccfcae4e217b4331a25c7c822c164a34c6
Parents: cb6721b
Author: Prakash Ramachandran <pramachandran@hortonworks.com>
Authored: Mon Apr 13 22:46:57 2015 +0530
Committer: Prakash Ramachandran <pramachandran@hortonworks.com>
Committed: Mon Apr 13 22:46:57 2015 +0530

----------------------------------------------------------------------
 CHANGES.txt                                     |  1 +
 .../scripts/components/dag-view/graph-view.js   | 86 +++++++++++++++++---
 .../app/scripts/components/dag-view/tip.js      |  2 +-
 .../main/webapp/app/scripts/helpers/dialogs.js  |  2 +-
 tez-ui/src/main/webapp/app/styles/dag-view.less | 32 +++++++-
 .../app/templates/components/dag-view.hbs       | 10 ++-
 .../src/main/webapp/app/templates/dag/view.hbs  |  2 +-
 7 files changed, 111 insertions(+), 24 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/tez/blob/6019bbcc/CHANGES.txt
----------------------------------------------------------------------
diff --git a/CHANGES.txt b/CHANGES.txt
index df8b06c..5fe83cb 100644
--- a/CHANGES.txt
+++ b/CHANGES.txt
@@ -9,6 +9,7 @@ INCOMPATIBLE CHANGES
   TEZ-1993. Implement a pluggable InputSizeEstimator for grouping fairly
 
 ALL CHANGES:
+  TEZ-2016. Tez UI: Dag View Fit and Finish
   TEZ-2252. Tez UI: in graphical view some of the sinks are hidden as they overlap
   TEZ-2275. Tez UI: enable faster loading and caching of data in tables
   TEZ-2234. Add API for statistics information - allow vertex managers to get

http://git-wip-us.apache.org/repos/asf/tez/blob/6019bbcc/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 6b54ce4..45202ae 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
@@ -132,6 +132,8 @@ App.DagViewComponent.graphView = (function (){
       _scheduledClickId = 0, // Id of scheduled click, used for double click.
 
       _tip,     // Instance of tip.js
+
+      _panZoomValues, // Temporary storage of pan zoom values for fit toggle
       _panZoom; // A closure returned by _attachPanZoom to reset/modify pan and zoom values
 
   function _getName(d) {
@@ -250,7 +252,7 @@ App.DagViewComponent.graphView = (function (){
     node.append('use').attr('xlink:href', '#%@-bg'.fmt(className));
     node.append('text')
         .attr('class', 'title')
-        .text(_trimText(d.get(titleProperty || 'name'), maxTitleLength || 3));
+        .text(_trimText(d.get(titleProperty || 'name'), maxTitleLength || 12));
   }
   /**
    * Populates the calling node with the required content.
@@ -261,7 +263,7 @@ App.DagViewComponent.graphView = (function (){
 
     switch(d.type) {
       case 'vertex':
-        _addBasicContents(node, d, 'vertexName', 15);
+        _addBasicContents(node, d, 'vertexName');
         _addStatusBar(node, d);
         _addTaskBubble(node, d);
         _addIOBubble(node, d);
@@ -376,6 +378,8 @@ App.DagViewComponent.graphView = (function (){
             value = property.getCellContent(d.get('data'));
           }
 
+          value = App.Helpers.number.formatNumThousands(value);
+
           if(typeof value != 'object') {
             list[property.get('headerCellName')] = value;
           }
@@ -390,7 +394,7 @@ App.DagViewComponent.graphView = (function (){
         var list = {
           "Class": App.Helpers.misc.getClassName(d.get("class")),
           "Initializer": App.Helpers.misc.getClassName(d.get("initializer")),
-          "Configurations": d.get("configs.length")
+          "Configurations": App.Helpers.number.formatNumThousands(d.get("configs.length"))
         };
         tooltipData = {
           title: d.get("name"),
@@ -400,7 +404,7 @@ App.DagViewComponent.graphView = (function (){
       case "output":
         var list = {
           "Class": App.Helpers.misc.getClassName(d.get("class")),
-          "Configurations": d.get("configs.length")
+          "Configurations": App.Helpers.number.formatNumThousands(d.get("configs.length"))
         };
         tooltipData = {
           title: d.get("name"),
@@ -446,8 +450,8 @@ App.DagViewComponent.graphView = (function (){
             "Data Movement Type": d.get("dataMovementType"),
             "Data Source Type": d.get("dataSourceType"),
             "Scheduling Type": d.get("schedulingType"),
-            "Edge Destination Class": App.Helpers.misc.getClassName(d.get("edgeDestinationClass")),
-            "Edge Source Class": App.Helpers.misc.getClassName(d.get("edgeSourceClass"))
+            "Edge Source Class": App.Helpers.misc.getClassName(d.get("edgeSourceClass")),
+            "Edge Destination Class": App.Helpers.misc.getClassName(d.get("edgeDestinationClass"))
           };
         }
         else {
@@ -713,7 +717,9 @@ App.DagViewComponent.graphView = (function (){
 
         panX = PADDING,
         panY = PADDING,
-        scale = 1;
+        scale = 1,
+
+        scheduleId = 0;
 
     /**
      * Transform g to current panX, panY and scale.
@@ -725,6 +731,33 @@ App.DagViewComponent.graphView = (function (){
     }
 
     /**
+     * Check if the item have moved out of the visible area, and reset if required
+     */
+    function visibilityCheck() {
+      var graphBound = g.node().getBoundingClientRect(),
+          containerBound = container[0].getBoundingClientRect();
+
+      if(graphBound.right < containerBound.left ||
+        graphBound.bottom < containerBound.top ||
+        graphBound.left > containerBound.right ||
+        graphBound.top > containerBound.bottom) {
+          panX = PADDING, panY = PADDING, scale = 1;
+          transform(true);
+      }
+    }
+
+    /**
+     * Schedule a visibility check and reset if required
+     */
+    function scheduleVisibilityCheck() {
+      if(scheduleId) {
+        clearTimeout(scheduleId);
+        scheduleId = 0;
+      }
+      scheduleId = setTimeout(visibilityCheck, 100);
+    }
+
+    /**
      * Set pan values
      */
     function onMouseMove(event) {
@@ -760,6 +793,7 @@ App.DagViewComponent.graphView = (function (){
       panY += (mouseY - panY) * factor;
 
       transform();
+      scheduleVisibilityCheck();
 
       _tip.reposition();
       event.preventDefault();
@@ -772,9 +806,13 @@ App.DagViewComponent.graphView = (function (){
       prevY = event.pageY;
 
       container.on('mousemove', onMouseMove);
+      container.parent().addClass('panning');
     })
     .mouseup(function (event){
       container.off('mousemove', onMouseMove);
+      container.parent().removeClass('panning');
+
+      scheduleVisibilityCheck();
     })
 
     /**
@@ -783,12 +821,20 @@ App.DagViewComponent.graphView = (function (){
      * @param newPanY {Number}
      * @param newScale {Number}
      */
-    return function (newPanX, newPanY, newScale) {
-      panX = newPanX,
-      panY = newPanY,
-      scale = newScale;
+    return function(newPanX, newPanY, newScale) {
+      var values = {
+        panX: panX,
+        panY: panY,
+        scale: scale
+      };
+
+      panX = newPanX == undefined ? panX : newPanX,
+      panY = newPanY == undefined ? panY : newPanY,
+      scale = newScale == undefined ? scale : newScale;
 
       transform(true);
+
+      return values;
     }
   }
 
@@ -851,8 +897,22 @@ App.DagViewComponent.graphView = (function (){
       var scale = Math.min(
         (_svg.width() - PADDING * 2) / _width,
         (_svg.height() - PADDING * 2) / _height
-      );
-      _panZoom(PADDING, PADDING, scale);
+      ),
+      panZoomValues = _panZoom();
+
+      if(
+        panZoomValues.panX != PADDING ||
+        panZoomValues.panY != PADDING ||
+        panZoomValues.scale != scale
+      ) {
+        _panZoomValues = _panZoom(PADDING, PADDING, scale);
+      }
+      else {
+        _panZoomValues = _panZoom(
+          _panZoomValues.panX,
+          _panZoomValues.panY,
+          _panZoomValues.scale);
+      }
     },
 
     /**

http://git-wip-us.apache.org/repos/asf/tez/blob/6019bbcc/tez-ui/src/main/webapp/app/scripts/components/dag-view/tip.js
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/scripts/components/dag-view/tip.js b/tez-ui/src/main/webapp/app/scripts/components/dag-view/tip.js
index fa95a66..e26223d 100644
--- a/tez-ui/src/main/webapp/app/scripts/components/dag-view/tip.js
+++ b/tez-ui/src/main/webapp/app/scripts/components/dag-view/tip.js
@@ -51,7 +51,7 @@ App.DagViewComponent.tip = (function () {
           "<tr><td>",
           property,
           "</td><td>",
-          App.Helpers.number.formatNumThousands(value),
+          value,
           "</td></tr>"
         );
       });

http://git-wip-us.apache.org/repos/asf/tez/blob/6019bbcc/tez-ui/src/main/webapp/app/scripts/helpers/dialogs.js
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/scripts/helpers/dialogs.js b/tez-ui/src/main/webapp/app/scripts/helpers/dialogs.js
index abfc62b..ddf7535 100644
--- a/tez-ui/src/main/webapp/app/scripts/helpers/dialogs.js
+++ b/tez-ui/src/main/webapp/app/scripts/helpers/dialogs.js
@@ -35,7 +35,7 @@ App.Dialogs = Em.Namespace.create({
     }
 
     var container = $( "<div/>" ),
-        listHTML = "";
+        listHTML = "<input type='hidden' autofocus='autofocus'/>";
 
     listItems.forEach(function (item) {
       var id = getProperty(item, 'id'),

http://git-wip-us.apache.org/repos/asf/tez/blob/6019bbcc/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 e51c6e8..0bf0070 100644
--- a/tez-ui/src/main/webapp/app/styles/dag-view.less
+++ b/tez-ui/src/main/webapp/app/styles/dag-view.less
@@ -40,6 +40,16 @@
     overflow:hidden;
     height: 100%;
 
+    cursor: -moz-grab;
+    cursor: -webkit-grab;
+    cursor: grab;
+
+    &.panning {
+      cursor: -moz-grabbing;
+      cursor: -webkit-grabbing;
+      cursor: grabbing;
+    }
+
     svg {
       width: 100%;
       height: 100%;
@@ -156,7 +166,7 @@
     .no-select;
 
     pointer-events: none;
-    font: 12px sans-serif;
+    font: 11px sans-serif;
     text-anchor: middle;
 
     -webkit-transform: translate(0px, 4px); // For safari
@@ -216,13 +226,21 @@
 
         .task-status {
           -webkit-animation: none !important;
-          font-size: 12px;
+          font-size: 11px;
           margin-top: 3px;
           background-color: rgba(255, 255, 255, 0.8);
           border-radius: 6px;
+          vertical-align: -1px;
+
+          width: 8px;
+          height: 7px;
 
-          width: 10px;
-          height: 8px;
+          &.running {
+            font-size: 11px;
+
+            width: 9px;
+            height: 7px
+          }
         }
       }
     }
@@ -243,6 +261,8 @@
   stroke: #ccc;
   stroke-width: 3px;
 
+  cursor: default;
+
   &.broadcast {
     stroke: #ccbb8f;
   }
@@ -278,6 +298,9 @@
       font-size: 1.1em;
     }
     .tip-text {
+      border-top: 1px solid rgba(255, 255, 255, 0.4);
+      text-align: center;
+      margin-bottom: -1px;
     }
     .tip-list {
       table {
@@ -288,6 +311,7 @@
         td {
           overflow: hidden;
           white-space: nowrap;
+          text-overflow: ellipsis;
           max-width: 400px;
         }
         td:nth-child(1) {

http://git-wip-us.apache.org/repos/asf/tez/blob/6019bbcc/tez-ui/src/main/webapp/app/templates/components/dag-view.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/components/dag-view.hbs b/tez-ui/src/main/webapp/app/templates/components/dag-view.hbs
index a41f772..eb9c661 100644
--- a/tez-ui/src/main/webapp/app/templates/components/dag-view.hbs
+++ b/tez-ui/src/main/webapp/app/templates/components/dag-view.hbs
@@ -28,12 +28,14 @@
             class="vertex-node-bg"
             style="fill: url(#vertex-grad); filter: url(#grey-glow)"
             rx="5" ry="5" width="80" height="30" x="-40" y="-15"/>
-        <circle id="input-bg" class="input-node-bg"
+        <rect id="input-bg"
+            class="input-node-bg"
             style="fill: url(#input-grad); filter: url(#grey-glow)"
-            cx="0" cy="0" r="15"/>
-        <circle id="output-bg" class="output-node-bg"
+            rx="15" ry="15" width="80" height="30" x="-40" y="-15"/>
+        <rect id="output-bg"
+            class="output-node-bg"
             style="fill: url(#output-grad); filter: url(#grey-glow)"
-            cx="0" cy="0" r="15"/>
+            rx="15" ry="15" width="80" height="30" x="-40" y="-15"/>
         <circle id="task-bubble" class="task-bubble-bg"
             style="fill: url(#task-grad); filter: url(#grey-glow)"
             r="10"/>

http://git-wip-us.apache.org/repos/asf/tez/blob/6019bbcc/tez-ui/src/main/webapp/app/templates/dag/view.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/dag/view.hbs b/tez-ui/src/main/webapp/app/templates/dag/view.hbs
index 699d0c8..3ea27c7 100644
--- a/tez-ui/src/main/webapp/app/templates/dag/view.hbs
+++ b/tez-ui/src/main/webapp/app/templates/dag/view.hbs
@@ -31,7 +31,7 @@
       entityClicked='entityClicked'
       configure='selectColumns'
     }}
-    <div class="dag-view-legend">Double click source/sink bubble to toggle visibility
locally.</div>
+    <div class="dag-view-legend">When sources & sinks are hidden, double click
green bubble to toggle visibility locally.</div>
   {{else}}
     {{partial 'partials/loading-spinner'}}
   {{/unless}}


Mime
View raw message