Skip to content

A
atlas
Commit 23c8f71d by kevalbhatt Committed by Madhan Neethiraj
Options

ATLAS-1667: lineage UI improvement

Signed-off-by: 's avatarMadhan Neethiraj <madhan@apache.org>
parent 91950396
Showing with 66 additions and 28 deletions
dashboardv2/public/css/scss/graph.scss
......@@ -86,10 +86,6 @@ g.type-TK > rect {
fill: $color_bright_turquoise_approx;
}
.edgePath path {
stroke: #cccccc !important;
}
.zoomButtonGroup {
position: absolute;
top: 4px;
......
dashboardv2/public/js/templates/search/SearchResultLayoutView_tmpl.html
......@@ -18,7 +18,10 @@
<div class="fontLoader">
<i class="fa fa-refresh fa-spin-custom"></i>
</div>
<div class="ellipsis"><span class="searchResult" style=" font-size: 16px;"></span></div>
<div class="ellipsis"><span class="searchResult" style=" font-size: 16px;"></span>
<a href="javascript:void(0)" class="inputAssignTag multiSelectTerm btnAssign" style="display:none" data-id="addTerm"><i class="fa fa-folder-o"></i> Assign Term</a>
<a href="javascript:void(0)" class="inputAssignTag multiSelectTag assignTag btnAssign" style="display:none" data-id="addAssignTag"><i class="fa fa-plus"></i> Assign Tag</a>
</div>
<div class="searchTable">
<span class="labelShowRecord pull-left" data-id="pageRecordText"></span>
<div data-id="paginationDiv" style="display:none">
......
dashboardv2/public/js/utils/CommonViewFunction.js
......@@ -352,11 +352,12 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
traits.map(function(tag) {
var checkTagOrTerm = Utils.checkTagOrTerm(tag);
if (checkTagOrTerm.tag) {
var className = "inputTag";
var className = "inputTag",
tagString = '<a class="' + className + '" data-id="tagClick"><span class="inputValue">' + tag + '</span><i class="fa fa-times" data-id="delete" data-assetname="' + entityName + '"data-name="' + tag + '" data-type="tag" data-guid="' + obj.guid + '" ></i></a>';
if (count >= 1) {
popTag += '<a class="' + className + '" data-id="tagClick"><span class="inputValue">' + tag + '</span><i class="fa fa-times" data-id="delete" data-assetname="' + entityName + '"data-name="' + tag + '" data-type="tag" data-guid="' + obj.guid + '" ></i></a>';
popTag += tagString;
} else {
atags += '<a class="' + className + '" data-id="tagClick"><span class="inputValue">' + tag + '</span><i class="fa fa-times" data-id="delete" data-assetname="' + entityName + '" data-name="' + tag + '" data-type="tag" data-guid="' + obj.guid + '" ></i></a>';
atags += tagString;
}
++count;
}
......
dashboardv2/public/js/views/graph/LineageLayoutView.js
......@@ -120,6 +120,7 @@ define(['require',
obj['label'] = relationObj.displayText.trunc(18);
obj['toolTipLabel'] = relationObj.displayText;
obj['id'] = relationObj.guid;
obj['isLineage'] = true;
obj['queryText'] = relationObj.queryText;
if (relationObj.status) {
obj['status'] = relationObj.status;
......@@ -141,12 +142,36 @@ define(['require',
that.fromToObj[obj.toEntityId] = makeNodeObj(guidEntityMap[obj.toEntityId]);
that.g.setNode(obj.toEntityId, that.fromToObj[obj.toEntityId]);
}
that.g.setEdge(obj.fromEntityId, obj.toEntityId, { 'arrowhead': "arrowPoint", lineInterpolate: 'basis' });
var styleObj = {
fill: 'none',
stroke: '#8bc152'
}
that.g.setEdge(obj.fromEntityId, obj.toEntityId, { 'arrowhead': "arrowPoint", lineInterpolate: 'basis', "style": "fill:" + styleObj.fill + ";stroke:" + styleObj.stroke + "", 'styleObj': styleObj });
});
if (this.fromToObj[this.guid]) {
this.fromToObj[this.guid]['isLineage'] = false;
this.checkForLineageOrImpactFlag(relations, this.guid);
}
if (this.asyncFetchCounter == 0) {
this.createGraph();
}
},
checkForLineageOrImpactFlag: function(relations, guid) {
var that = this,
nodeFound = _.where(relations, { 'fromEntityId': guid });
if (nodeFound.length) {
_.each(nodeFound, function(node) {
that.fromToObj[node.toEntityId]['isLineage'] = false;
var styleObj = {
fill: 'none',
stroke: '#fb4200'
}
that.g.setEdge(node.fromEntityId, node.toEntityId, { 'arrowhead': "arrowPoint", lineInterpolate: 'basis', "style": "fill:" + styleObj.fill + ";stroke:" + styleObj.stroke + "", 'styleObj': styleObj });
that.checkForLineageOrImpactFlag(relations, node.toEntityId);
});
}
},
createGraph: function() {
var that = this
......@@ -175,8 +200,8 @@ define(['require',
.attr("d", "M 0 0 L 10 5 L 0 10 z")
.style("stroke-width", 1)
.style("stroke-dasharray", "1,0")
.style("fill", "#cccccc")
.style("stroke", "#cccccc");
.style("fill", edge.styleObj.stroke)
.style("stroke", edge.styleObj.stroke);
dagreD3.util.applyStyle(path, edge[type + "Style"]);
};
render.shapes().img = function circle(parent, bbox, node) {
......@@ -273,9 +298,14 @@ define(['require',
d3.selectAll('button.zoomButton').on('click', zoomClick);
var tooltip = d3Tip()
.attr('class', 'd3-tip')
.offset([-13, 0])
.html(function(d) {
var value = that.g.node(d);
var htmlStr = "<h5 class='text-center'><span style='color:#359f89'>" + value.toolTipLabel + "</span></h5> ";
var htmlStr = "";
if (value.id !== that.guid) {
htmlStr = "<h5 style='text-align: center;'>" + (value.isLineage ? "Lineage" : "Impact") + "</h5>";
}
htmlStr += "<h5 class='text-center'><span style='color:#359f89'>" + value.toolTipLabel + "</span></h5> ";
if (value.typeName) {
htmlStr += "<h5 class='text-center'><span>(" + value.typeName + ")</span></h5> ";
}
......
dashboardv2/public/js/views/search/SearchResultLayoutView.js
......@@ -172,12 +172,17 @@ define(['require',
});
}
});
if (this.arr.length > 0) {
this.$('.searchResult').find(".inputAssignTag.multiSelect").show();
this.$('.searchResult').find(".inputAssignTag.multiSelectTag").show();
if (Globals.taxonomy) {
this.$('.multiSelectTerm').show();
}
this.$('.multiSelectTag').show();
} else {
this.$('.searchResult').find(".inputAssignTag.multiSelect").hide();
this.$('.searchResult').find(".inputAssignTag.multiSelectTag").hide();
if (Globals.taxonomy) {
this.$('.multiSelectTerm').hide();
}
this.$('.multiSelectTag').hide();
}
});
this.listenTo(this.searchCollection, "error", function(model, response) {
......@@ -283,18 +288,21 @@ define(['require',
if (that.searchCollection.models.length) {
that.renderTableLayoutView();
}
var resultData = 'Results for <b>' + _.escape(that.searchCollection.queryParams.query) + '</b>';
var multiAssignDataTag = '<a href="javascript:void(0)" class="inputAssignTag multiSelectTag assignTag" style="display:none" data-id="addAssignTag"><i class="fa fa-plus"></i>' + " " + 'Assign Tag</a>';
var resultText = that.searchCollection.queryParams.query;
var multiAssignDataTerm = "",
createEntityTag = "";
if (Globals.taxonomy) {
multiAssignDataTerm = '<a href="javascript:void(0)" class="inputAssignTag multiSelect" style="display:none" data-id="addTerm"><i class="fa fa-folder-o"></i>' + " " + 'Assign Term</a>';
var resultArr = [];
if (that.searchCollection.queryParams.typeName) {
resultArr.push(that.searchCollection.queryParams.typeName)
}
if (that.searchCollection.queryParams.classification) {
resultArr.push(that.searchCollection.queryParams.classification)
}
if (that.searchCollection.queryParams.query) {
resultArr.push(that.searchCollection.queryParams.query)
}
var searchString = 'Results for <b>' + _.escape(resultArr.join(that.searchType == 'Advanced Search' ? " " : " & ")) + '</b>';
if (Globals.entityCreate && Globals.entityTypeConfList && Utils.getUrlState.isSearchTab()) {
createEntityTag = "<p>If you do not find the entity in search result below then you can" + '<a href="javascript:void(0)" data-id="createEntity"> create new entity</a></p>';
searchString += "<p>If you do not find the entity in search result below then you can" + '<a href="javascript:void(0)" data-id="createEntity"> create new entity</a></p>';
}
that.$('.searchResult').html(resultData + multiAssignDataTerm + multiAssignDataTag + createEntityTag);
that.$('.searchResult').html(searchString);
},
silent: true,
reset: true
......@@ -309,7 +317,7 @@ define(['require',
columns: columns
})));
that.ui.paginationDiv.show();
that.$('.searchResult').find(".inputAssignTag.multiSelect").hide();
that.$(".ellipsis .inputAssignTag").hide();
that.renderBreadcrumb();
});
},
......@@ -501,12 +509,12 @@ define(['require',
showLoader: function() {
this.$('.fontLoader').show();
this.$('.searchTable').hide();
this.$('.searchResult').hide();
this.$('.ellipsis').hide();
},
hideLoader: function() {
this.$('.fontLoader').hide();
this.$('.searchTable').show();
this.$('.searchResult').show();
this.$('.ellipsis').show();
},
checkedValue: function(e) {
var guid = "",
......
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