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 <[email protected]> Authored: Mon Apr 13 22:46:57 2015 +0530 Committer: Prakash Ramachandran <[email protected]> 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}}
