HDPDGI-81:Vishal:Display querytext as tooltip for loadProcess
Project: http://git-wip-us.apache.org/repos/asf/incubator-atlas/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-atlas/commit/eb9eb4cf Tree: http://git-wip-us.apache.org/repos/asf/incubator-atlas/tree/eb9eb4cf Diff: http://git-wip-us.apache.org/repos/asf/incubator-atlas/diff/eb9eb4cf Branch: refs/heads/master Commit: eb9eb4cf43b2a748cedbd168836f6354e6164272 Parents: 6c896a7 Author: Vishal Kadam <[email protected]> Authored: Tue Jun 16 00:41:31 2015 -0400 Committer: Vishal Kadam <[email protected]> Committed: Tue Jun 16 00:41:31 2015 -0400 ---------------------------------------------------------------------- dashboard/v2/public/index.html | 1 + .../public/modules/lineage/lineageController.js | 32 +++++++++++++++++--- 2 files changed, 28 insertions(+), 5 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/eb9eb4cf/dashboard/v2/public/index.html ---------------------------------------------------------------------- diff --git a/dashboard/v2/public/index.html b/dashboard/v2/public/index.html index 90356f3..b5ab634 100644 --- a/dashboard/v2/public/index.html +++ b/dashboard/v2/public/index.html @@ -65,6 +65,7 @@ <script src="lib/angular-ui-utils/ui-utils.js"></script> <script src="lib/lodash/lodash.js"></script> <script src="/lib/d3/d3.js"></script> +<script src="/lib/d3-tip/index.js"></script> <script src="js/app.min.js"></script> </body> http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/eb9eb4cf/dashboard/v2/public/modules/lineage/lineageController.js ---------------------------------------------------------------------- diff --git a/dashboard/v2/public/modules/lineage/lineageController.js b/dashboard/v2/public/modules/lineage/lineageController.js index 49ce91e..6539375 100755 --- a/dashboard/v2/public/modules/lineage/lineageController.js +++ b/dashboard/v2/public/modules/lineage/lineageController.js @@ -91,7 +91,7 @@ angular.module('dgc.lineage').controller('LineageController', ['$element', '$sco nodes = {}; function getNode(guid) { - var name, type; + var name, type, tip; if (vertices.hasOwnProperty(guid)) { name = vertices[guid].values.name; type = vertices[guid].values.vertexId.values.typeName; @@ -100,6 +100,7 @@ angular.module('dgc.lineage').controller('LineageController', ['$element', '$sco if (typeof loadProcess !== "undefined") { name = loadProcess.name; type = loadProcess.typeName; + tip = loadProcess.tip; } else { name = 'Load Process'; type = 'Load Process'; @@ -108,7 +109,8 @@ angular.module('dgc.lineage').controller('LineageController', ['$element', '$sco var vertex = { guid: guid, name: name, - type: type + type: type, + tip: tip }; if (!nodes.hasOwnProperty(guid)) { nodes[guid] = vertex; @@ -122,6 +124,7 @@ angular.module('dgc.lineage').controller('LineageController', ['$element', '$sco if (value.id.id === guid) { procesRes.name = value.values.name; procesRes.typeName = value.typeName; + procesRes.tip = value.values.queryText; } }); return procesRes; @@ -176,13 +179,21 @@ angular.module('dgc.lineage').controller('LineageController', ['$element', '$sco return [d.y, d.x]; }); + /* Initialize tooltip */ + var tooltip = d3.tip() + .attr('class', 'd3-tip') + .html(function(d) { + return '<pre class="alert alert-success">' + d.tip + '</pre>'; + }); + var svg = element.select('svg') .attr('width', width + margin.right + margin.left) .attr('height', height + margin.top + margin.bottom) + /* Invoke the tip in the context of your visualization */ + .call(tooltip) .select('g') - - .attr('transform', - 'translate(' + margin.left + ',' + margin.right + ')'); + .attr('transform', + 'translate(' + margin.left + ',' + margin.right + ')'); //arrow svg.append("svg:defs").append("svg:marker").attr("id", "arrow").attr("viewBox", "0 0 10 10").attr("refX", 26).attr("refY", 5).attr("markerUnits", "strokeWidth").attr("markerWidth", 6).attr("markerHeight", 9).attr("orient", "auto").append("svg:path").attr("d", "M 0 0 L 10 5 L 0 10 z"); @@ -217,10 +228,21 @@ angular.module('dgc.lineage').controller('LineageController', ['$element', '$sco //return d.icon; return d.type === 'Table' ? '../img/tableicon.png' : '../img/process.png'; }) + .on('mouseover', function(d) { + if (d.type === 'LoadProcess') { + tooltip.show(d); + } + }) + .on('mouseout', function(d) { + if (d.type === 'LoadProcess') { + tooltip.hide(d); + } + }) .attr("x", "-18px") .attr("y", "-18px") .attr("width", "34px") .attr("height", "34px"); + nodeEnter.append('text') .attr('x', function(d) { return d.children || d._children ?
