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 142 additions and 50 deletions
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;
......
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
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