Skip to content

A
atlas
Commit 8d30f75b by gutkaBinit Committed by kevalbhatt
Options

ATLAS-3196 UI : Lineage support for IE.

Signed-off-by: 's avatarkevalbhatt <kbhatt@apache.org>
parent 0c9bb699
Showing with 141 additions and 49 deletions
dashboardv2/public/js/views/graph/LineageLayoutView.js
...@@ -130,8 +130,16 @@ define(['require', ...@@ -130,8 +130,16 @@ define(['require',
onRender: function() { onRender: function() {
var that = this; var that = this;
this.fetchGraphData(); this.fetchGraphData();
if (platform.name === "IE") { if (platform.name === "IE") {
this.$('svg').css('opacity', '0'); this.$('svg').css('opacity', '0');
}
if (platform.name === "Microsoft Edge" || platform.name === "IE") {
$(that.ui.saveSvg).hide();
} }
if (this.layoutRendered) { if (this.layoutRendered) {
this.layoutRendered(); this.layoutRendered();
...@@ -161,10 +169,10 @@ define(['require', ...@@ -161,10 +169,10 @@ define(['require',
var icon = $(e.currentTarget).find('i'), var icon = $(e.currentTarget).find('i'),
panel = $(e.target).parents('.tab-pane').first(); panel = $(e.target).parents('.tab-pane').first();
icon.toggleClass('fa-expand fa-compress'); icon.toggleClass('fa-expand fa-compress');
if(icon.hasClass('fa-expand')){ if (icon.hasClass('fa-expand')) {
icon.parent('button').attr("data-original-title","Full Screen"); icon.parent('button').attr("data-original-title", "Full Screen");
}else{ } else {
icon.parent('button').attr("data-original-title","Default View"); icon.parent('button').attr("data-original-title", "Default View");
} }
panel.toggleClass('fullscreen-mode'); panel.toggleClass('fullscreen-mode');
}, },
...@@ -483,6 +491,9 @@ define(['require', ...@@ -483,6 +491,9 @@ define(['require',
"translate(" + this.zoom.translate() + ")" + "translate(" + this.zoom.translate() + ")" +
"scale(" + this.zoom.scale() + ")" "scale(" + this.zoom.scale() + ")"
); );
LineageUtils.refreshGraphForIE({
edgeEl: this.$('svg .edgePath')
});
}, },
interpolateZoom: function(translate, scale, that, zoom) { interpolateZoom: function(translate, scale, that, zoom) {
return d3.transition().duration(350).tween("zoom", function() { return d3.transition().duration(350).tween("zoom", function() {
...@@ -501,6 +512,8 @@ define(['require', ...@@ -501,6 +512,8 @@ define(['require',
width = this.$('svg').width(), width = this.$('svg').width(),
height = this.$('svg').height(), height = this.$('svg').height(),
imageObject = {}; imageObject = {};
$('.resizeGraph').css("height", height + "px");
this.g.nodes().forEach(function(v) { this.g.nodes().forEach(function(v) {
var node = that.g.node(v); var node = that.g.node(v);
// Round the corners of the nodes // Round the corners of the nodes
...@@ -552,38 +565,51 @@ define(['require', ...@@ -552,38 +565,51 @@ define(['require',
.attr("width", "100%") .attr("width", "100%")
.attr("height", "100%") .attr("height", "100%")
.append('image') .append('image')
.attr("xlink:href", function(d) { .attr("href", function(d) {
var that = this; var that = this;
if (node) { 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 }), 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';
xhr.onload = function() { var getImageData = function(options) {
var reader = new FileReader(); var imagePath = options.imagePath,
reader.onloadend = function() { ajaxOptions = {
_.each(imageObject[imageIconPath], function(obj) { "url": imagePath,
obj.attr("xlink:href", reader.result); "method": "get",
}); "async": false,
imageObject[imageIconPath] = reader.result;
} }
if (xhr.status != 404) { if (platform.name !== "IE") {
reader.readAsDataURL(xhr.response); 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 { } else {
xhr.open('GET', imageObject[imageIconPath] = imagePath;
Utils.getEntityIconPath({ entityData: node, errorUrl: this.responseURL }),
true);
xhr.send();
} }
} }
});
}
getImageData({
"imagePath": imagePath,
"imageIconPath": imageIconPath
});
if (_.isUndefined(imageObject[imageIconPath])) { if (_.isUndefined(imageObject[imageIconPath])) {
// before img success // before img success
imageObject[imageIconPath] = [d3.select(that)]; imageObject[imageIconPath] = [d3.select(that)];
xhr.open('GET', imagePath, true);
xhr.send();
} else if (_.isArray(imageObject[imageIconPath])) { } else if (_.isArray(imageObject[imageIconPath])) {
// before img success // before img success
imageObject[imageIconPath].push(d3.select(that)); imageObject[imageIconPath].push(d3.select(that));
...@@ -790,6 +816,7 @@ define(['require', ...@@ -790,6 +816,7 @@ define(['require',
guid: that.guid, guid: that.guid,
svg: that.$('svg'), svg: that.$('svg'),
g: this.g, g: this.g,
edgeEl: $('svg .edgePath'),
afterCenterZoomed: function(options) { afterCenterZoomed: function(options) {
var newScale = options.newScale, var newScale = options.newScale,
newTranslate = options.newTranslate; newTranslate = options.newTranslate;
...@@ -798,29 +825,39 @@ define(['require', ...@@ -798,29 +825,39 @@ define(['require',
} }
}).init(); }).init();
zoom.event(svg); zoom.event(svg);
// console.log(this.$('svg')[0].getBBox())
//svg.attr('height', this.g.graph().height * initialScale + 40); //svg.attr('height', this.g.graph().height * initialScale + 40);
if (platform.name === "IE") { if (platform.name === "IE") {
this.IEGraphRenderDone = 0;
this.$('svg .edgePath').each(function(argument) {
var childNode = $(this).find('marker'); LineageUtils.refreshGraphForIE({
$(this).find('marker').remove(); edgeEl: this.$('svg .edgePath')
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);
}); });
} // 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({ LineageUtils.DragNode({
svg: this.svg, svg: this.svg,
g: this.g, g: this.g,
guid: this.guid guid: this.guid,
edgeEl: this.$('svg .edgePath')
}).init(); }).init();
// }
}, },
renderLineageTypeSearch: function() { renderLineageTypeSearch: function() {
var that = this, var that = this,
...@@ -856,6 +893,7 @@ define(['require', ...@@ -856,6 +893,7 @@ define(['require',
guid: selectedNode, guid: selectedNode,
svg: $(that.svg[0]), svg: $(that.svg[0]),
g: that.g, g: that.g,
edgeEl: $('svg .edgePath'),
afterCenterZoomed: function(options) { afterCenterZoomed: function(options) {
var newScale = options.newScale, var newScale = options.newScale,
newTranslate = options.newTranslate; newTranslate = options.newTranslate;
......
dashboardv2/public/js/views/graph/LineageUtils.js
...@@ -23,7 +23,8 @@ define(['require', ''], function(require) { ...@@ -23,7 +23,8 @@ define(['require', ''], function(require) {
var that = this, var that = this,
g = options.g, g = options.g,
svg = options.svg, svg = options.svg,
guid = options.guid; guid = options.guid,
edgePathEl = options.edgeEl;
return { return {
init: function() { init: function() {
var that = this; var that = this;
...@@ -62,6 +63,7 @@ define(['require', ''], function(require) { ...@@ -62,6 +63,7 @@ define(['require', ''], function(require) {
nodeDrag.call(svg.selectAll("g.node")); nodeDrag.call(svg.selectAll("g.node"));
edgeDrag.call(svg.selectAll("g.edgePath")); edgeDrag.call(svg.selectAll("g.edgePath"));
// this.refreshGraphForIE();
}, },
dragstart: function(d) { dragstart: function(d) {
d3.event.sourceEvent.stopPropagation(); d3.event.sourceEvent.stopPropagation();
...@@ -91,15 +93,14 @@ define(['require', ''], function(require) { ...@@ -91,15 +93,14 @@ define(['require', ''], function(require) {
var parts = /translate\(\s*([^\s,)]+)[ ,]?([^\s,)]+)?/.exec(xforms), var parts = /translate\(\s*([^\s,)]+)[ ,]?([^\s,)]+)?/.exec(xforms),
X = parseInt(parts[1]) + dx, X = parseInt(parts[1]) + dx,
Y = parseInt(parts[2]) + dy; Y = parseInt(parts[2]) + dy;
// console.log(X, Y);
if (isNaN(Y)) { if (isNaN(Y)) {
Y = dy; Y = dy;
} }
label.attr('transform', 'translate(' + X + ',' + Y + ')'); label.attr('transform', 'translate(' + X + ',' + Y + ')');
} }
} }
}) });
LinegaeUtils.refreshGraphForIE({ "edgeEl": edgePathEl })
}, },
translateEdge: function(e, dx, dy) { translateEdge: function(e, dx, dy) {
e.points.forEach(function(p) { e.points.forEach(function(p) {
...@@ -155,12 +156,29 @@ define(['require', ''], function(require) { ...@@ -155,12 +156,29 @@ define(['require', ''], function(require) {
x: x + sx, x: x + sx,
y: y + sy 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) { LinegaeUtils.centerNode = function(options) {
var nodeID = options.guid, var nodeID = options.guid,
svg = options.svg, svg = options.svg,
...@@ -168,6 +186,7 @@ define(['require', ''], function(require) { ...@@ -168,6 +186,7 @@ define(['require', ''], function(require) {
afterCenterZoomed = options.afterCenterZoomed, afterCenterZoomed = options.afterCenterZoomed,
zoom = d3.behavior.zoom(), zoom = d3.behavior.zoom(),
svgGroup = svg.find("g"), svgGroup = svg.find("g"),
edgePathEl = options.edgeEl,
zoomBind = function() { zoomBind = function() {
svgGroup.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); svgGroup.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}, },
...@@ -176,8 +195,11 @@ define(['require', ''], function(require) { ...@@ -176,8 +195,11 @@ define(['require', ''], function(require) {
init: function() { init: function() {
if (selectedNode.length > 0) { if (selectedNode.length > 0) {
selectedNode = selectedNode; selectedNode = selectedNode;
var matrix = selectedNode.attr('transform').replace(/[^0-9\-.,]/g, '').split(','), var matrix = selectedNode.attr('transform').replace(/[^0-9\-.,]/g, '').split(',');
x = matrix[0], 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]; y = matrix[1];
} else { } else {
selectedNode = $(svg).find("g.nodes").find('g').eq(1); selectedNode = $(svg).find("g.nodes").find('g').eq(1);
...@@ -185,7 +207,6 @@ define(['require', ''], function(require) { ...@@ -185,7 +207,6 @@ define(['require', ''], function(require) {
y = g.graph().height / 2; y = g.graph().height / 2;
} }
var viewerWidth = $(svg).width(), var viewerWidth = $(svg).width(),
viewerHeight = $(svg).height(), viewerHeight = $(svg).height(),
gBBox = d3.select('g').node().getBBox(), gBBox = d3.select('g').node().getBBox(),
...@@ -202,6 +223,7 @@ define(['require', ''], function(require) { ...@@ -202,6 +223,7 @@ define(['require', ''], function(require) {
zoomListener.translate([xa, ya]); zoomListener.translate([xa, ya]);
zoom.scale(scale); zoom.scale(scale);
afterCenterZoomed({ newScale: scale, newTranslate: [xa, ya] }); afterCenterZoomed({ newScale: scale, newTranslate: [xa, ya] });
LinegaeUtils.refreshGraphForIE({ "edgeEl": edgePathEl })
} }
} }
} }
...@@ -239,5 +261,36 @@ define(['require', ''], function(require) { ...@@ -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; return LinegaeUtils;
}); });
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment