Repository: atlas
Updated Branches:
  refs/heads/master 8120947b4 -> ac2c1a779


ATLAS-2497: Relationship UI improvements

Signed-off-by: Madhan Neethiraj <mad...@apache.org>


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

Branch: refs/heads/master
Commit: ac2c1a779b24aca4c6cfacbb854cc35219013cbe
Parents: 8120947
Author: kevalbhatt <kbh...@apache.org>
Authored: Tue Mar 13 18:54:18 2018 +0530
Committer: Madhan Neethiraj <mad...@apache.org>
Committed: Tue Mar 13 08:43:59 2018 -0700

----------------------------------------------------------------------
 dashboardv2/public/css/scss/relationship.scss   |  2 +-
 .../graph/RelationshipLayoutView_tmpl.html      |  4 ++
 .../tag/TagAttributeDetailLayoutView_tmpl.html  |  2 +-
 .../js/views/graph/RelationshipLayoutView.js    | 71 ++++++++++++++++++--
 .../js/views/search/SearchResultLayoutView.js   |  6 +-
 dashboardv2/public/js/views/site/Header.js      |  7 +-
 .../public/js/views/site/SideNavLayoutView.js   | 23 +++++--
 .../public/js/views/tag/TagDetailLayoutView.js  |  3 +-
 8 files changed, 99 insertions(+), 19 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/atlas/blob/ac2c1a77/dashboardv2/public/css/scss/relationship.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/relationship.scss 
b/dashboardv2/public/css/scss/relationship.scss
index 91ad8f7..b20812f 100644
--- a/dashboardv2/public/css/scss/relationship.scss
+++ b/dashboardv2/public/css/scss/relationship.scss
@@ -53,7 +53,7 @@
         }
         .entity-list {
             overflow: auto;
-            list-style-type: disc;
+            list-style-type: decimal;
             list-style-position: outside;
             padding-left: 18px;
         }

http://git-wip-us.apache.org/repos/asf/atlas/blob/ac2c1a77/dashboardv2/public/js/templates/graph/RelationshipLayoutView_tmpl.html
----------------------------------------------------------------------
diff --git 
a/dashboardv2/public/js/templates/graph/RelationshipLayoutView_tmpl.html 
b/dashboardv2/public/js/templates/graph/RelationshipLayoutView_tmpl.html
index a0e5b97..7cec662 100644
--- a/dashboardv2/public/js/templates/graph/RelationshipLayoutView_tmpl.html
+++ b/dashboardv2/public/js/templates/graph/RelationshipLayoutView_tmpl.html
@@ -22,6 +22,10 @@
     <div style="position: absolute;height:100%;width:100%;">
         <svg width="100%" height="100%" viewBox="0 0 854 330" 
enable-background="new 0 0 854 330" xml:space="preserve"></svg>
     </div>
+    <div class="zoomButtonGroup">
+        <span type="button" id="zoom_in" class="btn btn-action btn-md 
lineageZoomButton" title="Zoom In"> <i class="fa fa-search-plus"></i></span>
+        <span type="button" id="zoom_out" class="btn btn-action btn-md 
lineageZoomButton" title="Zoom Out"> <i class="fa fa-search-minus"></i></span>
+    </div>
     <div class="relationship-details">
         <div data-id="close" class="close-details"><i class="fa 
fa-times"></i></div>
         <h4 class="title"><span data-id="typeName"></span></h4>

http://git-wip-us.apache.org/repos/asf/atlas/blob/ac2c1a77/dashboardv2/public/js/templates/tag/TagAttributeDetailLayoutView_tmpl.html
----------------------------------------------------------------------
diff --git 
a/dashboardv2/public/js/templates/tag/TagAttributeDetailLayoutView_tmpl.html 
b/dashboardv2/public/js/templates/tag/TagAttributeDetailLayoutView_tmpl.html
index 32fc728..d12785b 100644
--- a/dashboardv2/public/js/templates/tag/TagAttributeDetailLayoutView_tmpl.html
+++ b/dashboardv2/public/js/templates/tag/TagAttributeDetailLayoutView_tmpl.html
@@ -19,7 +19,7 @@
         <i class="fa fa-refresh fa-spin-custom"></i>
     </div>
     <div class="tagDetail clearfix form-horizontal col-sm-12">
-        <h1 class="form-group"><span data-id="title"></span></h1>
+        <h1 class="row title"><span data-id="title"></span></h1>
         <button type="button" data-id="editButton" class="btn btn-sm 
btn-action pull-right"><i class="fa fa-pencil"></i></button>
         <p class="form-group" data-id="description"></p>
         <div class="superType form-group" style="display:none">

http://git-wip-us.apache.org/repos/asf/atlas/blob/ac2c1a77/dashboardv2/public/js/views/graph/RelationshipLayoutView.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/views/graph/RelationshipLayoutView.js 
b/dashboardv2/public/js/views/graph/RelationshipLayoutView.js
index a26a64a..397deed 100644
--- a/dashboardv2/public/js/views/graph/RelationshipLayoutView.js
+++ b/dashboardv2/public/js/views/graph/RelationshipLayoutView.js
@@ -114,13 +114,16 @@ define(['require',
                     typeName = data.typeName || options.obj.name,
                     searchString = options.searchString,
                     listString = "";
-
+                this.ui.searchNode.hide();
                 this.$("[data-id='typeName']").text(typeName);
                 var getElement = function(options) {
                     var name = options.entityName ? options.entityName : 
Utils.getName(options, "displayText");
                     return "<li><a href=#!/detailPage/" + options.guid + 
"?tabActive=relationship>" + _.escape(name) + " (" + options.typeName + 
")</a></li>";
                 }
                 if (_.isArray(data)) {
+                    if (data.length > 1) {
+                        this.ui.searchNode.show();
+                    }
                     _.each(_.sortBy(data, "displayText"), function(val) {
                         var name = Utils.getName(val, "displayText"),
                             valObj = _.extend({}, val, { entityName: name });
@@ -166,12 +169,58 @@ define(['require',
                     .on("zoom", zoomed);
 
                 function zoomed() {
-                    var translateX = d3.event.translate[0];
-                    var translateY = d3.event.translate[1];
-                    var xScale = d3.event.scale;
-                    container.attr("transform", "translate(" + translateX + 
"," + translateY + ")scale(" + xScale + ")");
+                    container.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.5,
+                        target_zoom = 1,
+                        center = [width / 2, 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(this.$('span.lineageZoomButton')).on('click', 
zoomClick);
+
                 var svg = d3.select(this.$("svg")[0])
                     .attr("viewBox", "0 0 " + width + " " + height)
                     .attr("enable-background", "new 0 0 " + width + " " + 
height)
@@ -214,6 +263,16 @@ define(['require',
                     .data(force.nodes())
                     .enter().append("g")
                     .attr("class", "node")
+                    .on('touchstart', function(d) {
+                        if (d && d.value && d.value.guid != that.guid) {
+                            d3.event.stopPropagation();
+                        }
+                    })
+                    .on('mousedown', function(d) {
+                        if (d && d.value && d.value.guid != that.guid) {
+                            d3.event.stopPropagation();
+                        }
+                    })
                     .on('click', function(d) {
                         if (d3.event.defaultPrevented) return; // ignore drag
                         that.toggleInformationSlider({ open: true, obj: d });
@@ -302,7 +361,7 @@ define(['require',
                     .attr("text-anchor", "middle")
                     .attr("fill", "#e0e0e0")
                     .text(function(d) {
-                        if (_.isArray(d.value)) {
+                        if (_.isArray(d.value) && d.value.length > 1) {
                             return d.value.length;
                         }
                     });

http://git-wip-us.apache.org/repos/asf/atlas/blob/ac2c1a77/dashboardv2/public/js/views/search/SearchResultLayoutView.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/views/search/SearchResultLayoutView.js 
b/dashboardv2/public/js/views/search/SearchResultLayoutView.js
index 28d1124..ccc666b 100644
--- a/dashboardv2/public/js/views/search/SearchResultLayoutView.js
+++ b/dashboardv2/public/js/views/search/SearchResultLayoutView.js
@@ -124,7 +124,7 @@ define(['require',
              * @constructs
              */
             initialize: function(options) {
-                _.extend(this, _.pick(options, 'value', 'initialView', 
'isTypeTagNotExists', 'classificationDefCollection', 'entityDefCollection', 
'typeHeaders', 'searchVent', 'enumDefCollection', 'tagCollection', 
'searchTableColumns', 'isDisable'));
+                _.extend(this, _.pick(options, 'value', 'initialView', 
'isTypeTagNotExists', 'classificationDefCollection', 'entityDefCollection', 
'typeHeaders', 'searchVent', 'enumDefCollection', 'tagCollection', 
'searchTableColumns', 'isDisable', 'fromView'));
                 this.entityModel = new VEntity();
                 this.searchCollection = new VSearchList();
                 this.limit = 25;
@@ -600,7 +600,7 @@ define(['require',
                                 nameHtml = "",
                                 name = Utils.getName(obj);
                             if (obj.guid) {
-                                nameHtml = '<a title="' + name + '" 
href="#!/detailPage/' + obj.guid + '">' + name + '</a>';
+                                nameHtml = '<a title="' + name + '" 
href="#!/detailPage/' + obj.guid + (that.fromView ? "?from=" + that.fromView : 
"") + '">' + name + '</a>';
                             } else {
                                 nameHtml = '<span title="' + name + '">' + 
name + '</span>';
                             }
@@ -747,7 +747,7 @@ define(['require',
                                         var nameHtml = "",
                                             name = modelObj[key];
                                         if (modelObj.guid) {
-                                            nameHtml = '<a title="' + name + 
'" href="#!/detailPage/' + modelObj.guid + '">' + name + '</a>';
+                                            nameHtml = '<a title="' + name + 
'" href="#!/detailPage/' + modelObj.guid + (that.fromView ? "?from=" + 
that.fromView : "") + '">' + name + '</a>';
                                         } else {
                                             nameHtml = '<span title="' + name 
+ '">' + name + '</span>';
                                         }

http://git-wip-us.apache.org/repos/asf/atlas/blob/ac2c1a77/dashboardv2/public/js/views/site/Header.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/views/site/Header.js 
b/dashboardv2/public/js/views/site/Header.js
index 8b75b1a..bd58986 100644
--- a/dashboardv2/public/js/views/site/Header.js
+++ b/dashboardv2/public/js/views/site/Header.js
@@ -34,8 +34,13 @@ define(['require',
         events: function() {
             var events = {};
             events['click ' + this.ui.backButton] = function() {
+                var queryParams = Utils.getUrlState.getQueryParams(),
+                    urlPath = "searchUrl";
+                if (queryParams && queryParams.from && queryParams.from == 
"classification") {
+                    urlPath = "tagUrl";
+                }
                 Utils.setUrl({
-                    url: Globals.saveApplicationState.tabState.searchUrl,
+                    url: Globals.saveApplicationState.tabState[urlPath],
                     mergeBrowserUrl: false,
                     trigger: true,
                     updateTabState: true

http://git-wip-us.apache.org/repos/asf/atlas/blob/ac2c1a77/dashboardv2/public/js/views/site/SideNavLayoutView.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/views/site/SideNavLayoutView.js 
b/dashboardv2/public/js/views/site/SideNavLayoutView.js
index 7648907..b00451b 100644
--- a/dashboardv2/public/js/views/site/SideNavLayoutView.js
+++ b/dashboardv2/public/js/views/site/SideNavLayoutView.js
@@ -112,12 +112,23 @@ define(['require',
             });
         },
         selectTab: function() {
-            if (Utils.getUrlState.isTagTab()) {
-                this.$('.tabs').find('li 
a[aria-controls="tab-tag"]').parents('li').addClass('active').siblings().removeClass('active');
-                
this.$('.tab-content').find('div#tab-tag').addClass('active').siblings().removeClass('active');
-            } else if (Utils.getUrlState.isSearchTab() || 
(Utils.getUrlState.isDetailPage()) || Utils.getUrlState.isInitial()) {
-                this.$('.tabs').find('li 
a[aria-controls="tab-search"]').parents('li').addClass('active').siblings().removeClass('active');
-                
this.$('.tab-content').find('div#tab-search').addClass('active').siblings().removeClass('active');
+            var that = this;
+            var activeTab = function(options) {
+                var view = options.view;
+                that.$('.tabs').find('li a[aria-controls="tab-' + view + 
'"]').parents('li').addClass('active').siblings().removeClass('active');
+                that.$('.tab-content').find('div#tab-' + 
view).addClass('active').siblings().removeClass('active');
+            };
+            if (Utils.getUrlState.isSearchTab() || 
Utils.getUrlState.isInitial()) {
+                activeTab({ "view": "search" });
+            } else if (Utils.getUrlState.isTagTab()) {
+                activeTab({ "view": "tag" });
+            } else if (Utils.getUrlState.isDetailPage()) {
+                var queryParams = Utils.getUrlState.getQueryParams(),
+                    view = "search";
+                if (queryParams && queryParams.from && queryParams.from == 
"classification") {
+                    view = "tag";
+                }
+                activeTab({ "view": view });
             }
         },
     });

http://git-wip-us.apache.org/repos/asf/atlas/blob/ac2c1a77/dashboardv2/public/js/views/tag/TagDetailLayoutView.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/views/tag/TagDetailLayoutView.js 
b/dashboardv2/public/js/views/tag/TagDetailLayoutView.js
index e5087c0..d7f26e3 100644
--- a/dashboardv2/public/js/views/tag/TagDetailLayoutView.js
+++ b/dashboardv2/public/js/views/tag/TagDetailLayoutView.js
@@ -66,7 +66,8 @@ define(['require',
                             typeHeaders: that.typeHeaders,
                             tagCollection: that.collection,
                             enumDefCollection: that.enumDefCollection,
-                            classificationDefCollection: 
that.classificationDefCollection
+                            classificationDefCollection: 
that.classificationDefCollection,
+                            fromView: "classification"
                         }));
                     }
                 });

Reply via email to