You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@atlas.apache.org by yh...@apache.org on 2016/05/19 03:54:22 UTC

incubator-atlas git commit: ATLAS-658 Improve Lineage with Backbone porting (kevalbhatt18 via yhemanth)

Repository: incubator-atlas
Updated Branches:
  refs/heads/master aaf2971ad -> a05107a07


ATLAS-658 Improve Lineage with Backbone porting (kevalbhatt18 via yhemanth)


Project: http://git-wip-us.apache.org/repos/asf/incubator-atlas/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-atlas/commit/a05107a0
Tree: http://git-wip-us.apache.org/repos/asf/incubator-atlas/tree/a05107a0
Diff: http://git-wip-us.apache.org/repos/asf/incubator-atlas/diff/a05107a0

Branch: refs/heads/master
Commit: a05107a07a0e1415915c87228fd7c65dd3b23e42
Parents: aaf2971
Author: Hemanth Yamijala <hy...@hortonworks.com>
Authored: Thu May 19 09:24:07 2016 +0530
Committer: Hemanth Yamijala <hy...@hortonworks.com>
Committed: Thu May 19 09:24:07 2016 +0530

----------------------------------------------------------------------
 dashboardv2/public/css/style.css                |  53 +++++-
 dashboardv2/public/img/icon-gear-active.png     | Bin 0 -> 18088 bytes
 dashboardv2/public/img/icon-table-active.png    | Bin 0 -> 14468 bytes
 .../public/js/collection/BaseCollection.js      |  12 +-
 dashboardv2/public/js/collection/VCommonList.js |   1 -
 dashboardv2/public/js/collection/VSchemaList.js |   4 +-
 dashboardv2/public/js/collection/VTagList.js    |   4 +-
 dashboardv2/public/js/modules/Helpers.js        |   2 +-
 .../js/templates/common/TableLayout_tmpl.html   |  32 ++--
 .../public/js/templates/common/modal.html       |  41 ++---
 .../detail_page/DetailPageLayoutView_tmpl.html  |   5 +-
 .../templates/graph/LineageLayoutView_tmpl.html |   8 +-
 .../schema/SchemaTableLayoutView_tmpl.html      |   2 +-
 .../js/templates/tag/addTagModalView_tmpl.html  |   2 +-
 dashboardv2/public/js/utils/Overrides.js        |  23 ++-
 dashboardv2/public/js/utils/Utils.js            |  16 +-
 .../js/views/asset/AssetPageLayoutView.js       |  10 +-
 .../views/detail_page/DetailPageLayoutView.js   |   7 +-
 .../public/js/views/graph/LineageLayoutView.js  | 170 ++++++++++++++-----
 .../public/js/views/schema/SchemaLayoutView.js  |   1 -
 .../public/js/views/tag/TagLayoutView.js        |   4 +-
 .../public/js/views/tag/addTagModalView.js      |  21 ++-
 .../public/js/views/tag/createTagsLayoutView.js |   1 -
 release-log.txt                                 |   1 +
 24 files changed, 286 insertions(+), 134 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/a05107a0/dashboardv2/public/css/style.css
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/style.css b/dashboardv2/public/css/style.css
index d1d23cc..40255ad 100644
--- a/dashboardv2/public/css/style.css
+++ b/dashboardv2/public/css/style.css
@@ -691,7 +691,7 @@ ul[data-id=branchList] li {
     max-width: 140px;
 }
 
-.appndList {
+.appendList {
     max-height: 200px;
     overflow: auto;
     max-width: 140px;
@@ -720,7 +720,54 @@ text {
 }
 
 .edgePath path {
-    stroke: #333;
-    stroke-width: 1.5px;
+    stroke: #000;
+    /* stroke-width: 1.5px;*/
+}
+
+.node .label {
+    fill: #868686;
+}
+
+.branchChildDiv {
+    padding-left: 15px;
 }
 
+.branchListParentInput .form-control {
+    border-right: none;
+    box-shadow: none;
+    border-radius: 4px;
+}
+
+.branchListParentInput .input-group-addon {
+    background-color: #fff;
+}
+
+.branchListParentInput {
+    padding-bottom: 18px;
+    display: list-item;
+}
+
+.backButton {
+    display: block;
+    width: 35px;
+    height: 35px;
+    line-height: 46px;
+    text-align: center;
+    background-color: #323544;
+    color: #fff;
+    position: fixed;
+    left: 5px;
+    top: 90px;
+    font-size: 11px;
+}
+
+.backButton:hover,
+.backButton:active {
+    color: #fff;
+}
+
+.zoomButtonGroup {
+    position: absolute;
+    top: 4px;
+    right: 5px;
+}

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/a05107a0/dashboardv2/public/img/icon-gear-active.png
----------------------------------------------------------------------
diff --git a/dashboardv2/public/img/icon-gear-active.png b/dashboardv2/public/img/icon-gear-active.png
new file mode 100644
index 0000000..7dffb90
Binary files /dev/null and b/dashboardv2/public/img/icon-gear-active.png differ

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/a05107a0/dashboardv2/public/img/icon-table-active.png
----------------------------------------------------------------------
diff --git a/dashboardv2/public/img/icon-table-active.png b/dashboardv2/public/img/icon-table-active.png
new file mode 100644
index 0000000..4427a05
Binary files /dev/null and b/dashboardv2/public/img/icon-table-active.png differ

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/a05107a0/dashboardv2/public/js/collection/BaseCollection.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/collection/BaseCollection.js b/dashboardv2/public/js/collection/BaseCollection.js
index 2018019..909288c 100644
--- a/dashboardv2/public/js/collection/BaseCollection.js
+++ b/dashboardv2/public/js/collection/BaseCollection.js
@@ -32,9 +32,7 @@ define(['require',
              * @constructs
              */
 
-            initialize: function() {
-
-            },
+            initialize: function() {},
             bindErrorEvents: function() {
                 this.bind("error", Utils.defaultErrorHandler);
             },
@@ -45,9 +43,7 @@ define(['require',
                 firstPage: 0,
                 pageSize: Globals.settings.PAGE_SIZE
             },
-
             mode: 'client',
-
             /**
              * override the parseRecords of PageableCollection for our use
              */
@@ -57,7 +53,7 @@ define(['require',
                     query: resp.query,
                     queryType: resp.queryType,
                     requestId: resp.requestId
-                }
+                };
                 try {
                     if (!this.modelAttrName) {
                         throw new Error("this.modelAttrName not defined for " + this);
@@ -119,18 +115,14 @@ define(['require',
                         'name': k
                     }, defaults, v);
                 });
-
                 return retCols;
             },
-
             nonCrudOperation: function(url, requestMethod, options) {
                 return Backbone.sync.call(this, null, this, _.extend({
                     url: url,
                     type: requestMethod
                 }, options));
             }
-
         });
-
     return BaseCollection;
 });

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/a05107a0/dashboardv2/public/js/collection/VCommonList.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/collection/VCommonList.js b/dashboardv2/public/js/collection/VCommonList.js
index d9e1f52..9b33b24 100644
--- a/dashboardv2/public/js/collection/VCommonList.js
+++ b/dashboardv2/public/js/collection/VCommonList.js
@@ -45,6 +45,5 @@ define(['require',
             tableCols: {}
         }
     );
-
     return VCommonList;
 });

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/a05107a0/dashboardv2/public/js/collection/VSchemaList.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/collection/VSchemaList.js b/dashboardv2/public/js/collection/VSchemaList.js
index 6a5c9d6..a5bf30c 100644
--- a/dashboardv2/public/js/collection/VSchemaList.js
+++ b/dashboardv2/public/js/collection/VSchemaList.js
@@ -39,8 +39,8 @@ define(['require',
                     }
                     var arr = [];
                     resp[this.modelAttrName].rows.forEach(function(d) {
-                        arr.push(d)
-                    })
+                        arr.push(d);
+                    });
                     return arr;
                 } catch (e) {
                     console.log(e);

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/a05107a0/dashboardv2/public/js/collection/VTagList.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/collection/VTagList.js b/dashboardv2/public/js/collection/VTagList.js
index 9fa48bf..472fc48 100644
--- a/dashboardv2/public/js/collection/VTagList.js
+++ b/dashboardv2/public/js/collection/VTagList.js
@@ -41,8 +41,8 @@ define(['require',
                     resp[this.modelAttrName].forEach(function(d) {
                         arr.push({
                             tags: d
-                        })
-                    })
+                        });
+                    });
                     return arr;
                 } catch (e) {
                     console.log(e);

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/a05107a0/dashboardv2/public/js/modules/Helpers.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/modules/Helpers.js b/dashboardv2/public/js/modules/Helpers.js
index 4deb19b..3897d58 100644
--- a/dashboardv2/public/js/modules/Helpers.js
+++ b/dashboardv2/public/js/modules/Helpers.js
@@ -55,7 +55,7 @@ define(['require',
 
     Handlebars.registerHelper('toHumanDate', function(val) {
         if (!val) return "";
-        return val //localization.formatDate(val, 'f');
+        return val;//localization.formatDate(val, 'f');
     });
     Handlebars.registerHelper('tt', function(str) {
         //return localization.tt(str);

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/a05107a0/dashboardv2/public/js/templates/common/TableLayout_tmpl.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/templates/common/TableLayout_tmpl.html b/dashboardv2/public/js/templates/common/TableLayout_tmpl.html
index 4264035..b5a0472 100644
--- a/dashboardv2/public/js/templates/common/TableLayout_tmpl.html
+++ b/dashboardv2/public/js/templates/common/TableLayout_tmpl.html
@@ -15,23 +15,23 @@
  * limitations under the License.
 -->
 <div class="clearfix">
-	<div class="form-group pull-right no-margin">
-		<div data-id="control" class="pull-right"></div>
-		<label class="select pull-right">
-			<select data-id="pageSize" class="form-control">
-				<option selected>10</option>
-				<option>25</option>
-				<option>50</option>
-				<option>100</option>
-			</select>
-		</label>
-	</div>
+    <div class="form-group pull-right no-margin">
+        <div data-id="control" class="pull-right"></div>
+        <label class="select pull-right">
+            <select data-id="pageSize" class="form-control">
+                <option selected>10</option>
+                <option>25</option>
+                <option>50</option>
+                <option>100</option>
+            </select>
+        </label>
+    </div>
 </div>
 <div class="position-relative thick-border">
-	<div data-id="r_tableList" class="table-responsive tableBorder"> </div>
-	<div data-id="r_tableSpinner"></div>
+    <div data-id="r_tableList" class="table-responsive tableBorder"> </div>
+    <div data-id="r_tableSpinner"></div>
 </div>
 <div class="row banded">
-	<div data-id="r_footerRecords" class="col-sm-6 margin-top-10"></div>
-	<div data-id="r_pagination" class="col-sm-6 text-right"></div>
-</div>
\ No newline at end of file
+    <div data-id="r_footerRecords" class="col-sm-6 margin-top-10"></div>
+    <div data-id="r_pagination" class="col-sm-6 text-right"></div>
+</div>

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/a05107a0/dashboardv2/public/js/templates/common/modal.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/templates/common/modal.html b/dashboardv2/public/js/templates/common/modal.html
index 0f64f5a..c9c545f 100644
--- a/dashboardv2/public/js/templates/common/modal.html
+++ b/dashboardv2/public/js/templates/common/modal.html
@@ -15,32 +15,27 @@
  * limitations under the License.
 -->
 <div class="modal-dialog {{mainClass}}" role="document">
-	<div class="modal-content">
-		{{#if title}}
-		     <div class="modal-header">
-		        <a class="close">&times;</a>
-				<h4 class="modal-title">
+    <div class="modal-content">
+        {{#if title}}
+        <div class="modal-header">
+            <a class="close">&times;</a>
+            <h4 class="modal-title">
 					{{#if titleHtml}}
 					    {{{tt title}}}
 					  {{else}}
 					    {{tt title}}
 					  {{/if}}
 				</h4>
-		     </div>
-		{{/if}}
-		{{#if contentWithFooter}}
-		{{else}}
-			<div class="modal-body">{{content}}</div>
-			{{#if showFooter}}
-				 <div class="modal-footer" >
-				   <a href="#" class="btn ok btn-success">{{tt okText}}</a>
-				   {{#if allowCancel}}
-				     {{#if cancelText}}
-				       <a href="#" class="btn btn-default cancel">{{tt cancelText}}</a>
-				     {{/if}}
-				   {{/if}}
-				 </div>
-			{{/if}}
-		{{/if}}
-	</div>
-</div>
\ No newline at end of file
+        </div>
+        {{/if}} {{#if contentWithFooter}} {{else}}
+        <div class="modal-body">{{content}}</div>
+        {{#if showFooter}}
+        <div class="modal-footer">
+            <button class="btn ok btn-success">{{tt okText}}</button>
+            {{#if allowCancel}} {{#if cancelText}}
+            <button class="btn btn-default cancel">{{tt cancelText}}</button>
+            {{/if}} {{/if}}
+        </div>
+        {{/if}} {{/if}}
+    </div>
+</div>

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/a05107a0/dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html b/dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
index 3a8eb44..383bc3e 100644
--- a/dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
+++ b/dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
@@ -15,10 +15,7 @@
  * limitations under the License.
 -->
 <div class="col-sm-12">
-    <ol class="breadcrumb">
-        <li><a href="#!/dashboard/assetPage">Home</a></li>
-        <li class="active breadcrumbName"></li>
-    </ol>
+    <a href="javascript:void(0);" class="backButton" data-id="backButton" title="Back To Result"><i class="fa fa-chevron-left fa-2x"></i></a>
     <div class="panel panel-default lineageLayout" style="display:none">
         <div id="r_lineageLayoutView"></div>
     </div>

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/a05107a0/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html b/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html
index 0c32a48..f67c77d 100644
--- a/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html
+++ b/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html
@@ -27,7 +27,11 @@
     </div> -->
     <div class="graph" id="tree-container">
     </div>
-    <div>
-        <svg width=100% height=350> </svg>
+    <div style="position:relative">
+        <svg width=100% height=350></svg>
+        <div class="zoomButtonGroup">
+            <button class="zoomButton" id="zoom_in">+</button>
+            <button class="zoomButton" id="zoom_out">-</button>
+        </div>
     </div>
 </div>

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/a05107a0/dashboardv2/public/js/templates/schema/SchemaTableLayoutView_tmpl.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/templates/schema/SchemaTableLayoutView_tmpl.html b/dashboardv2/public/js/templates/schema/SchemaTableLayoutView_tmpl.html
index cbc0e8a..abbe593 100644
--- a/dashboardv2/public/js/templates/schema/SchemaTableLayoutView_tmpl.html
+++ b/dashboardv2/public/js/templates/schema/SchemaTableLayoutView_tmpl.html
@@ -14,4 +14,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 -->
-<div id="r_tagLayoutView"></div>
\ No newline at end of file
+<div id="r_tagLayoutView"></div>

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/a05107a0/dashboardv2/public/js/templates/tag/addTagModalView_tmpl.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/templates/tag/addTagModalView_tmpl.html b/dashboardv2/public/js/templates/tag/addTagModalView_tmpl.html
index acae4e1..574921a 100644
--- a/dashboardv2/public/js/templates/tag/addTagModalView_tmpl.html
+++ b/dashboardv2/public/js/templates/tag/addTagModalView_tmpl.html
@@ -19,7 +19,7 @@
         <div class="form-group">
             <label class="control-label col-sm-4">Tag definition</label>
             <div class="col-sm-8 input-spacing">
-                <select class="form-control" data-id="addTagOptions" id="addTagID" required>
+                <select class="form-control" data-id="addTagOptions" required>
                 </select>
             </div>
         </div>

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/a05107a0/dashboardv2/public/js/utils/Overrides.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/utils/Overrides.js b/dashboardv2/public/js/utils/Overrides.js
index 3b598e3..4b96b86 100644
--- a/dashboardv2/public/js/utils/Overrides.js
+++ b/dashboardv2/public/js/utils/Overrides.js
@@ -16,9 +16,28 @@
  * limitations under the License.
  */
 
-define(['require', 'backgrid'], function(require) {
+define(['require', 'backgrid', 'asBreadcrumbs'], function(require) {
     'use strict';
 
+    $.asBreadcrumbs.prototype.generateChildrenInfo = function() {
+        var self = this;
+        this.$children.each(function() {
+            var $this = $(this);
+            self.childrenInfo.push({
+                $this: $this,
+                outerWidth: $this.outerWidth(),
+                $content: $(self.options.dropdownContent($this))
+            });
+        });
+        if (this.options.overflow === "left") {
+            this.childrenInfo.reverse();
+        }
+        this.childrenLength = this.childrenInfo.length;
+    };
+    String.prototype.trunc = String.prototype.trunc ||
+        function(n) {
+            return (this.length > n) ? this.substr(0, n - 1) + '...' : this;
+        };
     /*
      * HtmlCell renders any html code
      * @class Backgrid.HtmlCell
@@ -71,7 +90,5 @@ define(['require', 'backgrid'], function(require) {
             this.delegateEvents();
             return this;
         }
-
     });
-
 });

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/a05107a0/dashboardv2/public/js/utils/Utils.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/utils/Utils.js b/dashboardv2/public/js/utils/Utils.js
index 3892c72..e942fe3 100644
--- a/dashboardv2/public/js/utils/Utils.js
+++ b/dashboardv2/public/js/utils/Utils.js
@@ -96,20 +96,20 @@
             return { found: false, 'value': value };
         },
         getLocalStorage: function(key, value) {
-            var keyValue = localStorage.getItem(key)
+            var keyValue = localStorage.getItem(key);
             if (!keyValue || keyValue == "undefined") {
                 return this.setLocalStorage(key, value);
             } else {
                 return { found: true, 'value': keyValue };
             }
         }
-    }
+    };
     Utils.cookie = {
         setCookie: function(cname, cvalue) {
             //var d = new Date();
             //d.setTime(d.getTime() + (exdays*24*60*60*1000));
             //var expires = "expires=" + d.toGMTString();
-            document.cookie = cname + "=" + cvalue + "; "
+            document.cookie = cname + "=" + cvalue + "; ";
             return { found: false, 'value': cvalue };
         },
         getCookie: function(findString) {
@@ -132,7 +132,7 @@
                 return setCookie(key, value);
             }
         }
-    }
+    };
     Utils.getQueryParams = function(qs) {
         qs = qs.split('+').join(' ');
         var params = {},
@@ -142,7 +142,7 @@
             params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
         }
         return params;
-    }
+    };
 
     Utils.setUrl = function(options) {
         if (options) {
@@ -150,11 +150,11 @@
                 var hashUrl = window.location.hash.split("?");
                 if (hashUrl.length > 1) {
                     var param = Utils.getQueryParams(hashUrl[1]);
-                    options.urlParams = _.extend(param, options.urlParams)
+                    options.urlParams = _.extend(param, options.urlParams);
                 }
             }
             if (options.urlParams) {
-                var urlParams = "?"
+                var urlParams = "?";
                 _.each(options.urlParams, function(value, key, obj) {
                     urlParams += key + "=" + value + "&";
                 });
@@ -163,6 +163,6 @@
             }
             Backbone.history.navigate(options.url, { trigger: options.trigger != undefined ? options.trigger : true });
         }
-    }
+    };
     return Utils;
 });
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/a05107a0/dashboardv2/public/js/views/asset/AssetPageLayoutView.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/views/asset/AssetPageLayoutView.js b/dashboardv2/public/js/views/asset/AssetPageLayoutView.js
index 6334790..ae0ef89 100644
--- a/dashboardv2/public/js/views/asset/AssetPageLayoutView.js
+++ b/dashboardv2/public/js/views/asset/AssetPageLayoutView.js
@@ -79,7 +79,7 @@ define(['require',
                 _.extend(this, _.pick(options, 'globalVent', 'collection', 'vent'));
                 this.entityModel = new VEntity();
                 this.searchCollection = this.collection;
-                this.fetchList = 0
+                this.fetchList = 0;
                 this.commonTableOptions = {
                     collection: this.searchCollection,
                     includeFilter: false,
@@ -297,11 +297,11 @@ define(['require',
                                 var modelObject = model.toJSON();
                                 if (modelObject.$typeName$ && modelObject.instanceInfo) {
                                     var guid = model.toJSON().instanceInfo.guid;
-                                    ++that.fetchList
+                                    ++that.fetchList;
                                     model.getEntity(guid, {
                                         beforeSend: function() {},
                                         success: function(data) {
-                                            --that.fetchList
+                                            --that.fetchList;
                                             that.checkTableFetch();
                                             if (data.definition && data.definition.values && data.definition.values.name) {
                                                 return that.$('td a[data-id="' + guid + '"]').html(data.definition.values.name);
@@ -318,11 +318,11 @@ define(['require',
                                     return '<a href="#!/dashboard/detailPage/' + guid + '" data-id="' + guid + '"></a>';
                                 } else if (!modelObject.$typeName$) {
                                     var guid = model.toJSON().guid;
-                                    ++that.fetchList
+                                    ++that.fetchList;
                                     model.getEntity(guid, {
                                         beforeSend: function() {},
                                         success: function(data) {
-                                            --that.fetchList
+                                            --that.fetchList;
                                             that.checkTableFetch();
                                             if (data.definition && data.definition.values && data.definition.values.name) {
                                                 return that.$('td a[data-id="' + guid + '"]').html(data.definition.values.name);

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/a05107a0/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js b/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js
index 0932208..dfa29bb 100644
--- a/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js
+++ b/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js
@@ -37,10 +37,15 @@ define(['require',
                 RLineageLayoutView: "#r_lineageLayoutView",
             },
             /** ui selector cache */
-            ui: {},
+            ui: {
+                backButton: "[data-id='backButton']"
+            },
             /** ui events hash */
             events: function() {
                 var events = {};
+                events['click ' + this.ui.backButton] = function() {
+                    Backbone.history.history.back();
+                };
                 return events;
             },
             /**

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/a05107a0/dashboardv2/public/js/views/graph/LineageLayoutView.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/views/graph/LineageLayoutView.js b/dashboardv2/public/js/views/graph/LineageLayoutView.js
index 31433c1..8751fbe 100644
--- a/dashboardv2/public/js/views/graph/LineageLayoutView.js
+++ b/dashboardv2/public/js/views/graph/LineageLayoutView.js
@@ -61,7 +61,7 @@ define(['require',
                 this.bindEvents();
                 this.fetchGraphData();
                 this.data = {};
-                this.fetchList = 0
+                this.fetchList = 0;
             },
             bindEvents: function() {
                 this.listenTo(this.inputCollection, 'reset', function() {
@@ -87,7 +87,16 @@ define(['require',
             onRender: function() {
                 this.$('.fontLoader').show();
                 this.g = new dagreD3.graphlib.Graph()
-                    .setGraph({})
+                    .setGraph({
+                        nodesep: 50,
+                        ranksep: 90,
+                        rankdir: "LR",
+                        marginx: 20,
+                        marginy: 20,
+                        transition: function transition(selection) {
+                            return selection.transition().duration(500);
+                        }
+                    })
                     .setDefaultEdgeLabel(function() {
                         return {};
                     });
@@ -102,13 +111,16 @@ define(['require',
                     var obj = {};
                     if (data && data.definition && data.definition.values) {
                         var values = data.definition.values;
-                        obj['label'] = values.name
+                        obj['label'] = values.name.trunc(20);
+                        obj['toolTiplabel'] = values.name;
                         obj['id'] = data.GUID;
                         if (values.queryText) {
                             obj['queryText'] = values.queryText;
                         }
+                        obj['shape'] = "img";
                     } else {
                         obj['label'] = vertices[val].values.name;
+                        obj['toolTiplabel'] = values.name;
                     }
                     obj['class'] = "type-TOP";
                     that.g.setNode(data.GUID, obj);
@@ -125,7 +137,7 @@ define(['require',
                 }
 
                 function fetchLoadProcess(id) {
-                    ++that.fetchList
+                    ++that.fetchList;
                     that.entityModel.getEntity(id, {
                         beforeSend: function() {},
                         success: function(data) {
@@ -137,29 +149,29 @@ define(['require',
                 }
 
                 function makeNode(c) {
-
                     var edges = c.edges,
                         vertices = c.vertices,
                         allKeys = [];
                     _.each(c.edges, function(val, key, obj) {
-                        allKeys.push(key)
+                        allKeys.push(key);
                         _.each(val, function(val1, key1, obj1) {
-                            allKeys.push(val1)
+                            allKeys.push(val1);
                         });
                     });
                     var uniquNode = _.uniq(allKeys);
                     _.each(uniquNode, function(val, key) {
-                        var obj = {}
+                        var obj = {};
                         if (vertices[val] && vertices[val].values) {
-                            obj['label'] = vertices[val].values.name;
+                            obj['label'] = vertices[val].values.name.trunc(20);
+                            obj['toolTiplabel'] = vertices[val].values.name;
                             obj['id'] = val;
                             obj['class'] = "type-TOP";
+                            obj['shape'] = "img";
                             obj['typeName'] = vertices[val].values.vertexId.values.typeName;
                             that.g.setNode(val, obj);
                         } else {
                             fetchLoadProcess(val);
                         }
-
                     });
                 }
                 _.each(collection.models, function(values) {
@@ -170,12 +182,12 @@ define(['require',
                             that.edgesAndvertices = {
                                 edges: {},
                                 vertices: valuObj.vertices
-                            }
+                            };
                             _.each(valuObj.edges, function(val, key, obj) {
                                 _.each(val, function(val1, key1, obj1) {
                                     var chiledParent = {};
                                     if (!obj[val1]) {
-                                        that.startingPoint.push(val1)
+                                        that.startingPoint.push(val1);
                                     }
                                     that.edgesAndvertices.edges[val1] = [key];
                                 });
@@ -203,62 +215,145 @@ define(['require',
             },
             createGraph: function(edgesAndvertices, startingPoint) {
                 var that = this;
-
                 this.g.nodes().forEach(function(v) {
                     var node = that.g.node(v);
                     // Round the corners of the nodes
                     node.rx = node.ry = 5;
                 });
-
                 // Set up edges, no special attributes.
                 // For input
                 var lastVal = "";
                 _.each(startingPoint, function(val, key, obj) {
-                    that.g.setEdge(val, edgesAndvertices.edges[val][0]);
-                    lastVal = edgesAndvertices.edges[val][0];
+                    _.each(edgesAndvertices.edges[val], function(val1) {
+                        that.g.setEdge(val, val1);
+                        createRemaningEdge(edgesAndvertices.edges, val1);
+                    });
                 });
-                createRemaningEdge(edgesAndvertices.edges, lastVal);
 
                 function createRemaningEdge(obj, starting) {
                     if (obj[starting] && obj[starting].length) {
-                        that.g.setEdge(starting, obj[starting]);
-                        createRemaningEdge(obj, obj[starting]);
+                        _.each(obj[starting], function(val, key) {
+                            that.g.setEdge(starting, val);
+                            createRemaningEdge(obj, val);
+                        });
                     }
                 }
-
                 if (this.outputState) {
                     // Create the renderer
                     var render = new dagreD3.render();
+                    render.shapes().img = function circle(parent, bbox, node) {
+                        //var r = Math.max(bbox.width, bbox.height) / 2,
+                        var shapeSvg = parent.insert("image")
+                            .attr("class", "nodeImage")
+                            .attr("xlink:href", function(d) {
+                                if (node) {
+                                    if (node.typeName) {
+                                        if (node.id == that.guid) {
+                                            return '../img/icon-table-active.png';
+                                        } else {
+                                            return '../img/icon-table.png';
+                                        }
+                                    } else {
+                                        if (node.id == that.guid) {
+                                            return '../img/icon-gear-active.png';
+                                        } else {
+                                            return '../img/icon-gear.png';
+                                        }
+                                    }
+                                }
+                            }).attr("x", "-20px")
+                            .attr("y", "-20px")
+                            .attr("width", "40px")
+                            .attr("height", "40px");
+                        /*shapeSvg = parent.insert("circle", ":first-child")
+                            .attr("x", 35)
+                            .attr("y", 35)
+                            .attr("r", 20);*/
+                        node.intersect = function(point) {
+                            //return dagreD3.intersect.circle(node, points, point);
+                            return dagreD3.intersect.circle(node, 20, point);
+                        };
+                        return shapeSvg;
+                    };
                     // Set up an SVG group so that we can translate the final graph.
                     var svg = d3.select(this.$("svg")[0]),
                         svgGroup = svg.append("g");
-                    var zoom = d3.behavior.zoom().on("zoom", function() {
-                        svgGroup.attr("transform", "translate(" + d3.event.translate + ")" +
-                            "scale(" + d3.event.scale + ")");
-                    });
+                    var zoom = d3.behavior.zoom()
+                        .scaleExtent([0.5, 6])
+                        .on("zoom", zoomed)
+
+                    function zoomed() {
+                        svgGroup.attr("transform",
+                            "translate(" + zoom.translate() + ")" +
+                            "scale(" + zoom.scale() + ")"
+                        );
+                    }
+
+                    function interpolateZoom(translate, scale) {
+                        var self = this;
+                        return d3.transition().duration(350).tween("zoom", function() {
+                            var iTranslate = d3.interpolate(zoom.translate(), translate),
+                                iScale = d3.interpolate(zoom.scale(), scale);
+                            return function(t) {
+                                zoom
+                                    .scale(iScale(t))
+                                    .translate(iTranslate(t));
+                                zoomed();
+                            };
+                        });
+                    }
+
+                    function zoomClick() {
+                        var clicked = d3.event.target,
+                            direction = 1,
+                            factor = 0.2,
+                            target_zoom = 1,
+                            center = [that.g.graph().width / 2, that.g.graph().height / 2],
+                            extent = zoom.scaleExtent(),
+                            translate = zoom.translate(),
+                            translate0 = [],
+                            l = [],
+                            view = { x: translate[0], y: translate[1], k: zoom.scale() };
+
+                        d3.event.preventDefault();
+                        direction = (this.id === 'zoom_in') ? 1 : -1;
+                        target_zoom = zoom.scale() * (1 + factor * direction);
+
+                        if (target_zoom < extent[0] || target_zoom > extent[1]) {
+                            return false;
+                        }
+
+                        translate0 = [(center[0] - view.x) / view.k, (center[1] - view.y) / view.k];
+                        view.k = target_zoom;
+                        l = [translate0[0] * view.k + view.x, translate0[1] * view.k + view.y];
+
+                        view.x += center[0] - l[0];
+                        view.y += center[1] - l[1];
+
+                        interpolateZoom([view.x, view.y], view.k);
+                    }
+                    d3.selectAll('button.zoomButton').on('click', zoomClick);
                     var tooltip = d3Tip()
                         .attr('class', 'd3-tip')
                         .html(function(d) {
-                            var value = that.g.node(d)
-                            var htmlStr = "<h5>Name: <span style='color:#359f89'>" + value.label + "</span></h5> ";
+                            var value = that.g.node(d);
+                            var htmlStr = "<h5>Name: <span style='color:#359f89'>" + value.toolTiplabel + "</span></h5> ";
                             if (value.queryText) {
-                                htmlStr += "<h5>Query: <span style='color:#359f89'>" + value.queryText + "</span></h5> "
+                                htmlStr += "<h5>Query: <span style='color:#359f89'>" + value.queryText + "</span></h5> ";
                             }
                             return htmlStr;
                         });
                     svg.call(zoom)
                         .call(tooltip);
-
-
                     this.$('.fontLoader').hide();
-                    // Run the renderer. This is what draws the final graph.
-                    this.g.graph().rankDir = 'LR';
-                    //render(d3.select(this.$("svg g")[0]), this.g);
                     render(svgGroup, this.g);
-                    svg.on("dblclick.zoom", function() {
-                        return null;
-                    })
-                    svgGroup.selectAll("g.nodes g.node")
+                    svg.on("dblclick.zoom", null)
+                        .on("wheel.zoom", null);
+                    //change text postion 
+                    svgGroup.selectAll("g.nodes g.label")
+                        .attr("transform", "translate(2,-30)");
+
+                    svgGroup.selectAll("g.nodes image")
                         .on('mouseover', function(d) {
                             tooltip.show(d);
                         })
@@ -275,11 +370,8 @@ define(['require',
                         .scale(initialScale)
                         .event(svg);
                     //svg.attr('height', this.g.graph().height * initialScale + 40);
-
                 }
-
             }
         });
     return LineageLayoutView;
-
 });

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/a05107a0/dashboardv2/public/js/views/schema/SchemaLayoutView.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/views/schema/SchemaLayoutView.js b/dashboardv2/public/js/views/schema/SchemaLayoutView.js
index 301b993..05850ad 100644
--- a/dashboardv2/public/js/views/schema/SchemaLayoutView.js
+++ b/dashboardv2/public/js/views/schema/SchemaLayoutView.js
@@ -39,7 +39,6 @@ define(['require',
             /** ui selector cache */
             ui: {
                 tagClick: '[data-id="tagClick"]',
-                DetailValue: "[data-id='detailValue']",
                 addTag: "[data-id='addTag']",
             },
             /** ui events hash */

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/a05107a0/dashboardv2/public/js/views/tag/TagLayoutView.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/views/tag/TagLayoutView.js b/dashboardv2/public/js/views/tag/TagLayoutView.js
index 42791b9..4a40f4a 100644
--- a/dashboardv2/public/js/views/tag/TagLayoutView.js
+++ b/dashboardv2/public/js/views/tag/TagLayoutView.js
@@ -81,10 +81,10 @@ define(['require',
             tagsAndTypeGenerator: function(collection, element, searchString) {
                 if (element == "listType") {
                     var searchType = "dsl";
-                    var icon = "fa fa-cogs"
+                    var icon = "fa fa-cogs";
                 } else {
                     var searchType = "fulltext";
-                    var icon = "fa fa-tags"
+                    var icon = "fa fa-tags";
                 }
                 var str = '';
                 _.each(this[collection].fullCollection.models, function(model) {

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/a05107a0/dashboardv2/public/js/views/tag/addTagModalView.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/views/tag/addTagModalView.js b/dashboardv2/public/js/views/tag/addTagModalView.js
index d7e7c67..546df22 100644
--- a/dashboardv2/public/js/views/tag/addTagModalView.js
+++ b/dashboardv2/public/js/views/tag/addTagModalView.js
@@ -34,9 +34,10 @@ define(['require',
             addTagOptions: "[data-id='addTagOptions']",
             tagAttribute: "[data-id='tagAttribute']"
         },
-        events: {
-            'change #addTagID': 'onChangeTagDefination'
-
+        events: function() {
+            var events = {};
+            events["change " + this.ui.addTagOptions] = 'onChangeTagDefination';
+            return events;
         },
         /**
          * intialize a new AddTagModel Layout
@@ -47,19 +48,20 @@ define(['require',
             _.extend(this, _.pick(options, 'vent', 'modalCollection', 'guid'));
             this.collection = new VTagList();
             this.commonCollection = new VCommonList();
-            var modal = new Modal({
+            this.modal = new Modal({
                 title: 'Add Tag',
                 content: this,
                 okText: 'Save',
                 cancelText: "Cancel",
                 allowCancel: true,
             }).open();
-
+            var saveBtn = this.modal.$el.find('.btn-success');
+            saveBtn[0].setAttribute('disabled', true);
             this.on('ok', function() {
                 that.saveTagData();
             });
             this.on('closeModal', function() {
-                modal.trigger('cancel');
+                this.modal.trigger('cancel');
             });
             this.bindEvents();
         },
@@ -77,14 +79,17 @@ define(['require',
             }, this);
         },
         tagsCollection: function() {
+            var str = '<option selected="true" style="display:none;"></option>';
             for (var i = 0; i < this.collection.fullCollection.models.length; i++) {
                 var tags = this.collection.fullCollection.models[i].get("tags");
-                var str = '<option>' + tags + '</option>';
-                this.ui.addTagOptions.append(str);
+                str += '<option>' + tags + '</option>';
+                this.ui.addTagOptions.html(str);
             }
         },
         onChangeTagDefination: function() {
             this.ui.tagAttribute.empty();
+            var saveBtn = this.modal.$el.find('.btn-success');
+            saveBtn.prop("disabled", false);
             var tagname = this.ui.addTagOptions.val();
             this.fetchTagSubData(tagname);
         },

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/a05107a0/dashboardv2/public/js/views/tag/createTagsLayoutView.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/views/tag/createTagsLayoutView.js b/dashboardv2/public/js/views/tag/createTagsLayoutView.js
index 5d93eee..95ac2b1 100644
--- a/dashboardv2/public/js/views/tag/createTagsLayoutView.js
+++ b/dashboardv2/public/js/views/tag/createTagsLayoutView.js
@@ -138,7 +138,6 @@ define(['require',
                         content: that.name + "  has been created"
                     });
                     that.collection.reset();
-
                 },
                 error: function(model, response) {
                     if (response.responseJSON && response.responseJSON.error) {

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/a05107a0/release-log.txt
----------------------------------------------------------------------
diff --git a/release-log.txt b/release-log.txt
index d7e182d..6e73a39 100644
--- a/release-log.txt
+++ b/release-log.txt
@@ -21,6 +21,7 @@ ATLAS-409 Atlas will not import avro tables with schema read from a file (dosset
 ATLAS-379 Create sqoop and falcon metadata addons (venkatnrangan,bvellanki,sowmyaramesh via shwethags)
 
 ALL CHANGES:
+ATLAS-658 Improve Lineage with Backbone porting (kevalbhatt18 via yhemanth)
 ATLAS-491 Business Catalog / Taxonomy (jspeidel via yhemanth)
 ATLAS-713 Entity lineage based on entity id (shwethags)
 ATLAS-736 UI - BUG :: displaying timestamp values for hive_db description (kevalbhatt18 via yhemanth)