You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@atlas.apache.org by ma...@apache.org on 2018/03/13 15:48:05 UTC
atlas git commit: ATLAS-2497: Relationship UI improvements
Repository: atlas
Updated Branches:
refs/heads/master 8120947b4 -> ac2c1a779
ATLAS-2497: Relationship UI improvements
Signed-off-by: Madhan Neethiraj <ma...@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 <kb...@apache.org>
Authored: Tue Mar 13 18:54:18 2018 +0530
Committer: Madhan Neethiraj <ma...@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"
}));
}
});