Repository: ambari Updated Branches: refs/heads/trunk 7dd65f2e2 -> d3c6cce7e
AMBARI-5119. Jobs DAG graph has multiple zoom level issues. (srimanth) Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/d3c6cce7 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/d3c6cce7 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/d3c6cce7 Branch: refs/heads/trunk Commit: d3c6cce7ea72b4e9d7bdc8ee254fb39f29aed058 Parents: 7dd65f2 Author: Srimanth Gunturi <[email protected]> Authored: Mon Mar 17 16:24:38 2014 -0700 Committer: Srimanth Gunturi <[email protected]> Committed: Mon Mar 17 17:08:01 2014 -0700 ---------------------------------------------------------------------- ambari-web/app/styles/application.less | 4 +++ .../main/jobs/hive_job_details_tez_dag_view.js | 37 +++++++++++++++++++- 2 files changed, 40 insertions(+), 1 deletion(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/d3c6cce7/ambari-web/app/styles/application.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less index a3d2023..a5e29bc 100644 --- a/ambari-web/app/styles/application.less +++ b/ambari-web/app/styles/application.less @@ -5799,6 +5799,10 @@ i.icon-asterisks { opacity: 0; stroke-opacity: 0; } + .debug { + fill: green; + opacity: 0.2; + } .node { .background.map { fill: #fde0dd; http://git-wip-us.apache.org/repos/asf/ambari/blob/d3c6cce7/ambari-web/app/views/main/jobs/hive_job_details_tez_dag_view.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/main/jobs/hive_job_details_tez_dag_view.js b/ambari-web/app/views/main/jobs/hive_job_details_tez_dag_view.js index b8671d7..7188610 100644 --- a/ambari-web/app/views/main/jobs/hive_job_details_tez_dag_view.js +++ b/ambari-web/app/views/main/jobs/hive_job_details_tez_dag_view.js @@ -33,6 +33,8 @@ App.MainHiveJobDetailsTezDagView = Em.View.extend({ // zoomScaleTo: -1, // Bound from parent view // zoomScale: -1, // Bound from parent view zoomTranslate: [0, 0], + zoomBehavior: null, + svgCreated: false, content : null, @@ -121,10 +123,12 @@ App.MainHiveJobDetailsTezDagView = Em.View.extend({ self.set('zoomTranslate', d3.event.translate); }); svg.call(zoom); + this.set('zoomBehavior', zoom); this.set('zoomTranslate', [0, 0]); this.set('zoomScaleFrom', minScale); this.set('zoomScaleTo', 2); this.set('zoomScale', minScale); + this.set('svgCreated', true); }, zoomScaleObserver : function() { @@ -133,8 +137,39 @@ App.MainHiveJobDetailsTezDagView = Em.View.extend({ var newScaleFrom = this.get('zoomScaleFrom'); var newScaleTo = this.get('zoomScaleTo'); var zoomTranslate = this.get('zoomTranslate'); + var zoomBehavior = this.get('zoomBehavior'); + if (d3.event == null && this.get('svgCreated')) { + // Values were set from actions instead of UI events + // We need to center in on selected vertex if available. + var selectedNode = null; + var dagVisualModel = this.get('dagVisualModel'); + if (dagVisualModel && dagVisualModel.nodes && dagVisualModel.nodes.length > 0) { + dagVisualModel.nodes.every(function(node) { + if (node.selected) { + selectedNode = node; + return false; + } + return true; + }) + } + if (selectedNode != null) { + var cX = selectedNode.x + selectedNode.width / 2; + var cY = selectedNode.y + selectedNode.height / 2; + var mX = (cX * zoomBehavior.scale()) + zoomTranslate[0]; + var mY = (cY * zoomBehavior.scale()) + zoomTranslate[1]; + var pX = (cX * newScale) + zoomTranslate[0]; + var pY = (cY * newScale) + zoomTranslate[1]; + var nX = (mX - pX); + var nY = (mY - pY); + zoomTranslate[0] += nX; + zoomTranslate[1] += nY; + this.set('zoomTranslate', zoomTranslate); + } + } console.debug("zoomScaleObserver(): New scale = " + newScale + ", Range = [" + newScaleFrom + ", " + newScaleTo + "]. Translate = ", zoomTranslate.join(',')); - tezRoot.attr("transform", "translate("+zoomTranslate+")scale(" + newScale + ")"); + zoomBehavior.scale(newScale); + zoomBehavior.translate(zoomTranslate); + tezRoot.attr("transform", "translate(" + zoomTranslate + ")scale(" + newScale + ")"); }.observes('zoomScale', 'zoomScaleFrom', 'zoomScaleTo', 'zoomTranslate'), /**
