Skip to content

A
atlas
Commit ac2c1a77 by kevalbhatt Committed by Madhan Neethiraj
Options

ATLAS-2497: Relationship UI improvements

Signed-off-by: 's avatarMadhan Neethiraj <madhan@apache.org>
parent 8120947b
Showing with 99 additions and 19 deletions
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;
}
......
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>
......
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">
......
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;
}
});
......
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>';
}
......
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
......
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 });
}
},
});
......
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"
}));
}
});
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment