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/28 07:29:10 UTC

[atlas] branch branch-2.0 updated (6d9292d -> ffb8cf1)

This is an automated email from the ASF dual-hosted git repository.

kbhatt pushed a change to branch branch-2.0
in repository https://gitbox.apache.org/repos/asf/atlas.git.


    from 6d9292d  ATLAS-3216: Fixed typos in What's New for 2 doc
     new eadc07d  ATLAS-3196 UI : Lineage support for IE.
     new 2f39aa1  ATLAS-3218 : UI - entity detail page columns sorting empty value check
     new ffb8cf1  ATLAS-3213 UI : Png export not working in Safari Browser.

The 3 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.


Summary of changes:
 dashboardv2/public/js/utils/CommonViewFunction.js  |   8 +-
 dashboardv2/public/js/utils/Utils.js               |  28 +++++
 .../js/views/detail_page/DetailPageLayoutView.js   |   7 +-
 .../public/js/views/graph/LineageLayoutView.js     | 114 +++++++++++++--------
 dashboardv2/public/js/views/graph/LineageUtils.js  |  83 +++++++++++++--
 .../js/views/graph/PropagationPropertyModal.js     |   2 +-
 6 files changed, 182 insertions(+), 60 deletions(-)


[atlas] 03/03: ATLAS-3213 UI : Png export not working in Safari Browser.

Posted by kb...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

kbhatt pushed a commit to branch branch-2.0
in repository https://gitbox.apache.org/repos/asf/atlas.git

commit ffb8cf1f898e73d96bee1042ab711906be4a3663
Author: gutkaBinit <bi...@gmail.com>
AuthorDate: Tue May 21 09:59:33 2019 +0530

    ATLAS-3213 UI : Png export not working in Safari Browser.
    
    (cherry picked from commit da13d53a049eebd6de2fa34283f5ac01f184708d)
---
 .../public/js/views/graph/LineageLayoutView.js     | 44 +++++++++-------------
 dashboardv2/public/js/views/graph/LineageUtils.js  | 14 +++++--
 .../js/views/graph/PropagationPropertyModal.js     |  2 +-
 3 files changed, 29 insertions(+), 31 deletions(-)

diff --git a/dashboardv2/public/js/views/graph/LineageLayoutView.js b/dashboardv2/public/js/views/graph/LineageLayoutView.js
index 2495e71..34f0b39 100644
--- a/dashboardv2/public/js/views/graph/LineageLayoutView.js
+++ b/dashboardv2/public/js/views/graph/LineageLayoutView.js
@@ -603,10 +603,13 @@ define(['require',
                                             }
                                         });
                                 }
-                                getImageData({
-                                    "imagePath": imagePath,
-                                    "imageIconPath": imageIconPath
-                                });
+                                if (_.keys(imageObject).indexOf(imageIconPath) === -1) {
+                                    getImageData({
+                                        "imagePath": imagePath,
+                                        "imageIconPath": imageIconPath
+                                    });
+                                }
+
                                 if (_.isUndefined(imageObject[imageIconPath])) {
                                     // before img success
                                     imageObject[imageIconPath] = [d3.select(that)];
@@ -755,6 +758,7 @@ define(['require',
                             return;
                         }
                         that.$('svg').removeClass('hover');
+                        that.$('svg').removeClass('hover-active');
                         LineageUtils.onHoverFade({
                             opacity: 1,
                             selectedNode: d,
@@ -825,39 +829,17 @@ 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") {
-
-
                     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,
                     edgeEl: this.$('svg .edgePath')
                 }).init();
-                // }
             },
             renderLineageTypeSearch: function() {
                 var that = this,
@@ -987,7 +969,7 @@ define(['require',
                         scaleFactor = 1,
                         svgWidth = that.$('svg').width(),
                         svgHeight = that.$('svg').height();
-                    if (platform.name != "Chrome") {
+                    if (platform.name === "Firefox") {
                         svgClone.setAttribute('width', svgWidth);
                         svgClone.setAttribute('height', svgHeight);
                     }
@@ -1020,6 +1002,9 @@ define(['require',
 
                     var img = new Image(canvas.width, canvas.height);
                     var svgBlob = new Blob([data], { type: 'image/svg+xml;base64' });
+                    if (platform.name === "Safari") {
+                        svgBlob = new Blob([data], { type: 'image/svg+xml' });
+                    }
                     var url = DOMURL.createObjectURL(svgBlob);
 
                     img.onload = function() {
@@ -1045,6 +1030,11 @@ define(['require',
                                 }
                                 a.click();
                                 that.toggleLoader(loaderTargetDiv);
+                                if (platform.name === 'Safari') {
+                                    LineageUtils.refreshGraphForSafari({
+                                        edgeEl: that.$('svg g.node')
+                                    });
+                                }
                             }, 'image/png');
                             $('.hidden-svg').html('');
                             createCanvas.remove();
diff --git a/dashboardv2/public/js/views/graph/LineageUtils.js b/dashboardv2/public/js/views/graph/LineageUtils.js
index a477e0b..2f50fbd 100644
--- a/dashboardv2/public/js/views/graph/LineageUtils.js
+++ b/dashboardv2/public/js/views/graph/LineageUtils.js
@@ -63,7 +63,6 @@ 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();
@@ -159,9 +158,18 @@ define(['require', ''], function(require) {
             },
         }
     }
-
+    LinegaeUtils.refreshGraphForSafari = function(options) {
+        var edgePathEl = options.edgeEl,
+            IEGraphRenderDone = 0;
+        edgePathEl.each(function(argument) {
+            var eleRef = this,
+                childNode = $(this).find('pattern');
+            setTimeout(function(argument) {
+                $(eleRef).find('defs').append(childNode);
+            }, 500);
+        });
+    }
     LinegaeUtils.refreshGraphForIE = function(options) {
-
         var edgePathEl = options.edgeEl,
             IEGraphRenderDone = 0;
         edgePathEl.each(function(argument) {
diff --git a/dashboardv2/public/js/views/graph/PropagationPropertyModal.js b/dashboardv2/public/js/views/graph/PropagationPropertyModal.js
index 9aef264..8bba109 100644
--- a/dashboardv2/public/js/views/graph/PropagationPropertyModal.js
+++ b/dashboardv2/public/js/views/graph/PropagationPropertyModal.js
@@ -318,7 +318,7 @@ define(['require',
             var that = this,
                 notifyObj = {
                     modal: true,
-                    text: "It looks like you have been edited something. If you leave before saving, your changes will be lost.",
+                    text: "It looks like you have edited something. If you leave before saving, your changes will be lost.",
                     ok: function(argument) {
                         that.viewType = that.ui.editPropagationType.is(":checked") ? "flow" : "table";
                         that.ui.editPropagationType.prop("checked", that.viewType === "flow" ? false : true).trigger("change");


[atlas] 02/03: ATLAS-3218 : UI - entity detail page columns sorting empty value check

Posted by kb...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

kbhatt pushed a commit to branch branch-2.0
in repository https://gitbox.apache.org/repos/asf/atlas.git

commit 2f39aa1f1cb6f743693ccb0ed51dd4298854b8ef
Author: kevalbhatt <kb...@apache.org>
AuthorDate: Mon May 20 20:58:21 2019 +0530

    ATLAS-3218 : UI - entity detail page columns sorting empty value check
    
    Signed-off-by: Sarath Subramanian <ss...@cloudera.com>
    (cherry picked from commit 4e4038f6e1dff1e5900a14cf306ea64817647b0a)
---
 dashboardv2/public/js/utils/CommonViewFunction.js  |  8 +++----
 dashboardv2/public/js/utils/Utils.js               | 28 ++++++++++++++++++++++
 .../js/views/detail_page/DetailPageLayoutView.js   |  7 +++++-
 3 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/dashboardv2/public/js/utils/CommonViewFunction.js b/dashboardv2/public/js/utils/CommonViewFunction.js
index 2bc4142..1fc2402 100644
--- a/dashboardv2/public/js/utils/CommonViewFunction.js
+++ b/dashboardv2/public/js/utils/CommonViewFunction.js
@@ -104,7 +104,7 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
                         value = Utils.getName(data);
                         var id = "";
                         if (data.guid) {
-                            if (Enums.entityStateReadOnly[data.status]) {
+                            if (Enums.entityStateReadOnly[data.status || data.entityStatus]) {
                                 deleteButton += '<button title="Deleted" class="btn btn-action btn-md deleteBtn"><i class="fa fa-trash"></i></button>';
                             }
                             id = data.guid;
@@ -144,7 +144,7 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
                     var inputOutputField = keyValue[i],
                         id = inputOutputField.guid || (_.isObject(inputOutputField.id) ? inputOutputField.id.id : inputOutputField.id),
                         tempLink = "",
-                        status = inputOutputField.status || (_.isObject(inputOutputField.id) ? inputOutputField.id.state : inputOutputField.state),
+                        status = (inputOutputField.status || inputOutputField.entityStatus) || (_.isObject(inputOutputField.id) ? inputOutputField.id.state : inputOutputField.state),
                         readOnly = Enums.entityStateReadOnly[status];
                     if (!inputOutputField.attributes && inputOutputField.values) {
                         inputOutputField['attributes'] = inputOutputField.values;
@@ -303,7 +303,7 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
                 ++count;
             });
         }
-        if (!Enums.entityStateReadOnly[obj.status]) {
+        if (!Enums.entityStateReadOnly[obj.status || obj.entityStatus]) {
             if (obj.guid) {
                 addTag += '<a href="javascript:void(0)" data-id="addTag" class="btn btn-action btn-sm assignTag" data-guid="' + obj.guid + '" ><i class="fa fa-plus"></i></a>';
             } else {
@@ -335,7 +335,7 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
                 ++count;
             });
         }
-        if (!Enums.entityStateReadOnly[obj.status]) {
+        if (!Enums.entityStateReadOnly[obj.status || obj.entityStatus]) {
             if (obj.guid) {
                 addTerm += '<a href="javascript:void(0)" data-id="addTerm" class="btn btn-action btn-sm assignTag" data-guid="' + obj.guid + '" ><i class="fa fa-plus"></i></a>';
             } else {
diff --git a/dashboardv2/public/js/utils/Utils.js b/dashboardv2/public/js/utils/Utils.js
index af593db..5bb5fb2 100644
--- a/dashboardv2/public/js/utils/Utils.js
+++ b/dashboardv2/public/js/utils/Utils.js
@@ -576,6 +576,34 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums',
             });
         }
     }
+
+    Utils.findAndMergeRelationShipEntity = function(options) {
+        var attributeObject = options.attributeObject,
+            relationshipAttributes = options.relationshipAttributes;
+        _.each(attributeObject, function(val, key) {
+            var attributVal = val;
+            if (relationshipAttributes && relationshipAttributes[key]) {
+                var relationShipVal = relationshipAttributes[key];
+                if (_.isObject(val)) {
+                    if (_.isArray(val)) {
+                        _.each(val, function(attr) {
+                            if (attr && attr.attributes === undefined) {
+                                var entityFound = _.find(relationShipVal, { guid: attr.guid });
+                                if (entityFound) {
+                                    attr.attributes = _.omit(entityFound, 'typeName', 'guid', 'entityStatus');
+                                    attr.status = entityFound.entityStatus;
+                                }
+                            }
+                        });
+                    } else if (relationShipVal && val.attributes === undefined) {
+                        val.attributes = _.omit(relationShipVal, 'typeName', 'guid', 'entityStatus');
+                        val.status = relationShipVal.entityStatus;
+                    }
+                }
+            }
+        })
+    }
+
     Utils.getNestedSuperTypes = function(options) {
         var data = options.data,
             collection = options.collection,
diff --git a/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js b/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js
index 3c197b9..6e81c6d 100644
--- a/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js
+++ b/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js
@@ -141,6 +141,11 @@ define(['require',
                         referredEntities: this.entityObject.referredEntities
                     });
 
+                    Utils.findAndMergeRelationShipEntity({
+                        attributeObject: collectionJSON.attributes,
+                        relationshipAttributes: collectionJSON.relationshipAttributes
+                    });
+
                     // check if entity is process
                     var isProcess = false,
                         superTypes = Utils.getNestedSuperTypes({ data: this.activeEntityDef.toJSON(), collection: this.entityDefCollection }),
@@ -217,7 +222,7 @@ define(['require',
                         }
                         if (collectionJSON.attributes && collectionJSON.attributes.columns) {
                             var valueSorted = _.sortBy(collectionJSON.attributes.columns, function(val) {
-                                return val.attributes.position
+                                return val.attributes && val.attributes.position
                             });
                             collectionJSON.attributes.columns = valueSorted;
                         }


[atlas] 01/03: ATLAS-3196 UI : Lineage support for IE.

Posted by kb...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

kbhatt pushed a commit to branch branch-2.0
in repository https://gitbox.apache.org/repos/asf/atlas.git

commit eadc07d20f28f99abe092d28e5579ef749a5be2c
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>
    (cherry picked from commit 8d30f75b0785a2704fe20dd8be5ff3afb8752ceb)
---
 .../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