You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@atlas.apache.org by kb...@apache.org on 2019/05/20 15:18:21 UTC
[atlas] 02/02: ATLAS-3196 UI : Lineage support for IE.
This is an automated email from the ASF dual-hosted git repository.
kbhatt pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/atlas.git
commit 8d30f75b0785a2704fe20dd8be5ff3afb8752ceb
Author: gutkaBinit <bi...@gmail.com>
AuthorDate: Thu May 16 14:34:17 2019 +0530
ATLAS-3196 UI : Lineage support for IE.
Signed-off-by: kevalbhatt <kb...@apache.org>
---
.../public/js/views/graph/LineageLayoutView.js | 120 ++++++++++++++-------
dashboardv2/public/js/views/graph/LineageUtils.js | 71 ++++++++++--
2 files changed, 141 insertions(+), 50 deletions(-)
diff --git a/dashboardv2/public/js/views/graph/LineageLayoutView.js b/dashboardv2/public/js/views/graph/LineageLayoutView.js
index 6c71319..2495e71 100644
--- a/dashboardv2/public/js/views/graph/LineageLayoutView.js
+++ b/dashboardv2/public/js/views/graph/LineageLayoutView.js
@@ -130,8 +130,16 @@ define(['require',
onRender: function() {
var that = this;
this.fetchGraphData();
+
+
if (platform.name === "IE") {
this.$('svg').css('opacity', '0');
+
+ }
+
+ if (platform.name === "Microsoft Edge" || platform.name === "IE") {
+ $(that.ui.saveSvg).hide();
+
}
if (this.layoutRendered) {
this.layoutRendered();
@@ -161,10 +169,10 @@ define(['require',
var icon = $(e.currentTarget).find('i'),
panel = $(e.target).parents('.tab-pane').first();
icon.toggleClass('fa-expand fa-compress');
- if(icon.hasClass('fa-expand')){
- icon.parent('button').attr("data-original-title","Full Screen");
- }else{
- icon.parent('button').attr("data-original-title","Default View");
+ if (icon.hasClass('fa-expand')) {
+ icon.parent('button').attr("data-original-title", "Full Screen");
+ } else {
+ icon.parent('button').attr("data-original-title", "Default View");
}
panel.toggleClass('fullscreen-mode');
},
@@ -483,6 +491,9 @@ define(['require',
"translate(" + this.zoom.translate() + ")" +
"scale(" + this.zoom.scale() + ")"
);
+ LineageUtils.refreshGraphForIE({
+ edgeEl: this.$('svg .edgePath')
+ });
},
interpolateZoom: function(translate, scale, that, zoom) {
return d3.transition().duration(350).tween("zoom", function() {
@@ -501,6 +512,8 @@ define(['require',
width = this.$('svg').width(),
height = this.$('svg').height(),
imageObject = {};
+ $('.resizeGraph').css("height", height + "px");
+
this.g.nodes().forEach(function(v) {
var node = that.g.node(v);
// Round the corners of the nodes
@@ -552,38 +565,51 @@ define(['require',
.attr("width", "100%")
.attr("height", "100%")
.append('image')
- .attr("xlink:href", function(d) {
+ .attr("href", function(d) {
var that = this;
if (node) {
+ // to check for IE-10
+ var originLink = window.location.origin;
+ if (platform.name === "IE") {
+ originLink = window.location.protocol + "//" + window.location.host;
+ }
var imageIconPath = Utils.getEntityIconPath({ entityData: node }),
- imagePath = ((window.location.origin + Utils.getBaseUrl(window.location.pathname)) + imageIconPath);
+ imagePath = ((originLink + Utils.getBaseUrl(window.location.pathname)) + imageIconPath);
- var xhr = new XMLHttpRequest();
- xhr.responseType = 'blob';
+ var getImageData = function(options) {
+ var imagePath = options.imagePath,
+ ajaxOptions = {
+ "url": imagePath,
+ "method": "get",
+ "async": false,
+ }
- xhr.onload = function() {
- var reader = new FileReader();
- reader.onloadend = function() {
- _.each(imageObject[imageIconPath], function(obj) {
- obj.attr("xlink:href", reader.result);
- });
- imageObject[imageIconPath] = reader.result;
- }
-
- if (xhr.status != 404) {
- reader.readAsDataURL(xhr.response);
- } else {
- xhr.open('GET',
- Utils.getEntityIconPath({ entityData: node, errorUrl: this.responseURL }),
- true);
- xhr.send();
+ if (platform.name !== "IE") {
+ ajaxOptions["mimeType"] = "text/plain; charset=x-user-defined";
}
+ $.ajax(ajaxOptions)
+ .always(function(data, status, xhr) {
+ if (data.status == 404) {
+ getImageData({
+ "imagePath": Utils.getEntityIconPath({ entityData: node, errorUrl: imagePath }),
+ "imageIconPath": imageIconPath
+ });
+ } else if (data) {
+ if (platform.name !== "IE") {
+ imageObject[imageIconPath] = 'data:image/png;base64,' + LineageUtils.base64Encode({ "data": data });
+ } else {
+ imageObject[imageIconPath] = imagePath;
+ }
+ }
+ });
}
+ getImageData({
+ "imagePath": imagePath,
+ "imageIconPath": imageIconPath
+ });
if (_.isUndefined(imageObject[imageIconPath])) {
// before img success
imageObject[imageIconPath] = [d3.select(that)];
- xhr.open('GET', imagePath, true);
- xhr.send();
} else if (_.isArray(imageObject[imageIconPath])) {
// before img success
imageObject[imageIconPath].push(d3.select(that));
@@ -790,6 +816,7 @@ define(['require',
guid: that.guid,
svg: that.$('svg'),
g: this.g,
+ edgeEl: $('svg .edgePath'),
afterCenterZoomed: function(options) {
var newScale = options.newScale,
newTranslate = options.newTranslate;
@@ -798,29 +825,39 @@ define(['require',
}
}).init();
zoom.event(svg);
+ // console.log(this.$('svg')[0].getBBox())
//svg.attr('height', this.g.graph().height * initialScale + 40);
if (platform.name === "IE") {
- this.IEGraphRenderDone = 0;
- this.$('svg .edgePath').each(function(argument) {
- var childNode = $(this).find('marker');
- $(this).find('marker').remove();
- var eleRef = this;
- ++that.IEGraphRenderDone;
- setTimeout(function(argument) {
- $(eleRef).find('defs').append(childNode);
- --that.IEGraphRenderDone;
- if (that.IEGraphRenderDone === 0) {
- this.$('.fontLoader').hide();
- this.$('svg').fadeTo(1000, 1)
- }
- }, 1000);
+
+
+ LineageUtils.refreshGraphForIE({
+ edgeEl: this.$('svg .edgePath')
});
+ // this.$('svg .edgePath').each(function(argument) {
+ // var childNode = $(this).find('marker');
+ // console.log(childNode);
+ // $(this).find('marker').remove();
+ // var eleRef = this;
+ // ++that.IEGraphRenderDone;
+ // setTimeout(function(argument) {
+ // $(eleRef).find('defs').append(childNode);
+ // --that.IEGraphRenderDone;
+ // if (that.IEGraphRenderDone === 0) {
+ // this.$('.fontLoader').hide();
+ // this.$('svg').fadeTo(1000, 1)
+ // }
+ // }, 1000);
+ // });
}
+ // console.log(platform.name)
+ // if (platform.name !== "IE") {
LineageUtils.DragNode({
svg: this.svg,
g: this.g,
- guid: this.guid
+ guid: this.guid,
+ edgeEl: this.$('svg .edgePath')
}).init();
+ // }
},
renderLineageTypeSearch: function() {
var that = this,
@@ -856,6 +893,7 @@ define(['require',
guid: selectedNode,
svg: $(that.svg[0]),
g: that.g,
+ edgeEl: $('svg .edgePath'),
afterCenterZoomed: function(options) {
var newScale = options.newScale,
newTranslate = options.newTranslate;
diff --git a/dashboardv2/public/js/views/graph/LineageUtils.js b/dashboardv2/public/js/views/graph/LineageUtils.js
index 3e53ddd..a477e0b 100644
--- a/dashboardv2/public/js/views/graph/LineageUtils.js
+++ b/dashboardv2/public/js/views/graph/LineageUtils.js
@@ -23,7 +23,8 @@ define(['require', ''], function(require) {
var that = this,
g = options.g,
svg = options.svg,
- guid = options.guid;
+ guid = options.guid,
+ edgePathEl = options.edgeEl;
return {
init: function() {
var that = this;
@@ -62,6 +63,7 @@ define(['require', ''], function(require) {
nodeDrag.call(svg.selectAll("g.node"));
edgeDrag.call(svg.selectAll("g.edgePath"));
+ // this.refreshGraphForIE();
},
dragstart: function(d) {
d3.event.sourceEvent.stopPropagation();
@@ -91,15 +93,14 @@ define(['require', ''], function(require) {
var parts = /translate\(\s*([^\s,)]+)[ ,]?([^\s,)]+)?/.exec(xforms),
X = parseInt(parts[1]) + dx,
Y = parseInt(parts[2]) + dy;
- // console.log(X, Y);
if (isNaN(Y)) {
Y = dy;
}
label.attr('transform', 'translate(' + X + ',' + Y + ')');
}
}
- })
-
+ });
+ LinegaeUtils.refreshGraphForIE({ "edgeEl": edgePathEl })
},
translateEdge: function(e, dx, dy) {
e.points.forEach(function(p) {
@@ -155,12 +156,29 @@ define(['require', ''], function(require) {
x: x + sx,
y: y + sy
};
- }
-
+ },
}
}
+ LinegaeUtils.refreshGraphForIE = function(options) {
+ var edgePathEl = options.edgeEl,
+ IEGraphRenderDone = 0;
+ edgePathEl.each(function(argument) {
+ var childNode = $(this).find('marker');
+ $(this).find('marker').remove();
+ var eleRef = this;
+ ++IEGraphRenderDone;
+ setTimeout(function(argument) {
+ $(eleRef).find('defs').append(childNode);
+ --IEGraphRenderDone;
+ if (IEGraphRenderDone === 0) {
+ this.$('.fontLoader').hide();
+ this.$('svg').fadeTo(1000, 1)
+ }
+ }, 1000);
+ });
+ }
LinegaeUtils.centerNode = function(options) {
var nodeID = options.guid,
svg = options.svg,
@@ -168,6 +186,7 @@ define(['require', ''], function(require) {
afterCenterZoomed = options.afterCenterZoomed,
zoom = d3.behavior.zoom(),
svgGroup = svg.find("g"),
+ edgePathEl = options.edgeEl,
zoomBind = function() {
svgGroup.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
},
@@ -176,8 +195,11 @@ define(['require', ''], function(require) {
init: function() {
if (selectedNode.length > 0) {
selectedNode = selectedNode;
- var matrix = selectedNode.attr('transform').replace(/[^0-9\-.,]/g, '').split(','),
- x = matrix[0],
+ var matrix = selectedNode.attr('transform').replace(/[^0-9\-.,]/g, '').split(',');
+ if (platform.name === "IE" || platform.name === "Microsoft Edge") {
+ var matrix = selectedNode.attr('transform').replace(/[a-z\()]/g, '').split(' ');
+ }
+ var x = matrix[0],
y = matrix[1];
} else {
selectedNode = $(svg).find("g.nodes").find('g').eq(1);
@@ -185,7 +207,6 @@ define(['require', ''], function(require) {
y = g.graph().height / 2;
}
-
var viewerWidth = $(svg).width(),
viewerHeight = $(svg).height(),
gBBox = d3.select('g').node().getBBox(),
@@ -202,6 +223,7 @@ define(['require', ''], function(require) {
zoomListener.translate([xa, ya]);
zoom.scale(scale);
afterCenterZoomed({ newScale: scale, newTranslate: [xa, ya] });
+ LinegaeUtils.refreshGraphForIE({ "edgeEl": edgePathEl })
}
}
}
@@ -239,5 +261,36 @@ define(['require', ''], function(require) {
}
}
+ LinegaeUtils.base64Encode = function(options) {
+ var str = options.data,
+ CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",
+ out = "",
+ i = 0,
+ len = str.length,
+ c1, c2, c3;
+ while (i < len) {
+ c1 = str.charCodeAt(i++) & 0xff;
+ if (i == len) {
+ out += CHARS.charAt(c1 >> 2);
+ out += CHARS.charAt((c1 & 0x3) << 4);
+ out += "==";
+ break;
+ }
+ c2 = str.charCodeAt(i++);
+ if (i == len) {
+ out += CHARS.charAt(c1 >> 2);
+ out += CHARS.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
+ out += CHARS.charAt((c2 & 0xF) << 2);
+ out += "=";
+ break;
+ }
+ c3 = str.charCodeAt(i++);
+ out += CHARS.charAt(c1 >> 2);
+ out += CHARS.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
+ out += CHARS.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6));
+ out += CHARS.charAt(c3 & 0x3F);
+ }
+ return out;
+ }
return LinegaeUtils;
});
\ No newline at end of file