Repository: atlas Updated Branches: refs/heads/master 8120947b4 -> ac2c1a779
ATLAS-2497: Relationship UI improvements Signed-off-by: Madhan Neethiraj <[email protected]> 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 <[email protected]> Authored: Tue Mar 13 18:54:18 2018 +0530 Committer: Madhan Neethiraj <[email protected]> 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" })); } });
