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 { ...@@ -86,10 +86,6 @@ g.type-TK > rect {
fill: $color_bright_turquoise_approx; fill: $color_bright_turquoise_approx;
} }
.edgePath path {
stroke: #cccccc !important;
}
.zoomButtonGroup { .zoomButtonGroup {
position: absolute; position: absolute;
top: 4px; top: 4px;
......
dashboardv2/public/js/templates/search/SearchResultLayoutView_tmpl.html
...@@ -18,7 +18,10 @@ ...@@ -18,7 +18,10 @@
<div class="fontLoader"> <div class="fontLoader">
<i class="fa fa-refresh fa-spin-custom"></i> <i class="fa fa-refresh fa-spin-custom"></i>
</div> </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"> <div class="searchTable">
<span class="labelShowRecord pull-left" data-id="pageRecordText"></span> <span class="labelShowRecord pull-left" data-id="pageRecordText"></span>
<div data-id="paginationDiv" style="display:none"> <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 ...@@ -352,11 +352,12 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
traits.map(function(tag) { traits.map(function(tag) {
var checkTagOrTerm = Utils.checkTagOrTerm(tag); var checkTagOrTerm = Utils.checkTagOrTerm(tag);
if (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) { 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 { } 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; ++count;
} }
......
dashboardv2/public/js/views/graph/LineageLayoutView.js
...@@ -120,6 +120,7 @@ define(['require', ...@@ -120,6 +120,7 @@ define(['require',
obj['label'] = relationObj.displayText.trunc(18); obj['label'] = relationObj.displayText.trunc(18);
obj['toolTipLabel'] = relationObj.displayText; obj['toolTipLabel'] = relationObj.displayText;
obj['id'] = relationObj.guid; obj['id'] = relationObj.guid;
obj['isLineage'] = true;
obj['queryText'] = relationObj.queryText; obj['queryText'] = relationObj.queryText;
if (relationObj.status) { if (relationObj.status) {
obj['status'] = relationObj.status; obj['status'] = relationObj.status;
...@@ -141,12 +142,36 @@ define(['require', ...@@ -141,12 +142,36 @@ define(['require',
that.fromToObj[obj.toEntityId] = makeNodeObj(guidEntityMap[obj.toEntityId]); that.fromToObj[obj.toEntityId] = makeNodeObj(guidEntityMap[obj.toEntityId]);
that.g.setNode(obj.toEntityId, that.fromToObj[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) { if (this.asyncFetchCounter == 0) {
this.createGraph(); 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() { createGraph: function() {
var that = this var that = this
...@@ -175,8 +200,8 @@ define(['require', ...@@ -175,8 +200,8 @@ define(['require',
.attr("d", "M 0 0 L 10 5 L 0 10 z") .attr("d", "M 0 0 L 10 5 L 0 10 z")
.style("stroke-width", 1) .style("stroke-width", 1)
.style("stroke-dasharray", "1,0") .style("stroke-dasharray", "1,0")
.style("fill", "#cccccc") .style("fill", edge.styleObj.stroke)
.style("stroke", "#cccccc"); .style("stroke", edge.styleObj.stroke);
dagreD3.util.applyStyle(path, edge[type + "Style"]); dagreD3.util.applyStyle(path, edge[type + "Style"]);
}; };
render.shapes().img = function circle(parent, bbox, node) { render.shapes().img = function circle(parent, bbox, node) {
...@@ -273,9 +298,14 @@ define(['require', ...@@ -273,9 +298,14 @@ define(['require',
d3.selectAll('button.zoomButton').on('click', zoomClick); d3.selectAll('button.zoomButton').on('click', zoomClick);
var tooltip = d3Tip() var tooltip = d3Tip()
.attr('class', 'd3-tip') .attr('class', 'd3-tip')
.offset([-13, 0])
.html(function(d) { .html(function(d) {
var value = that.g.node(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) { if (value.typeName) {
htmlStr += "<h5 class='text-center'><span>(" + value.typeName + ")</span></h5> "; htmlStr += "<h5 class='text-center'><span>(" + value.typeName + ")</span></h5> ";
} }
......
dashboardv2/public/js/views/search/SearchResultLayoutView.js
...@@ -172,12 +172,17 @@ define(['require', ...@@ -172,12 +172,17 @@ define(['require',
}); });
} }
}); });
if (this.arr.length > 0) { if (this.arr.length > 0) {
this.$('.searchResult').find(".inputAssignTag.multiSelect").show(); if (Globals.taxonomy) {
this.$('.searchResult').find(".inputAssignTag.multiSelectTag").show(); this.$('.multiSelectTerm').show();
}
this.$('.multiSelectTag').show();
} else { } else {
this.$('.searchResult').find(".inputAssignTag.multiSelect").hide(); if (Globals.taxonomy) {
this.$('.searchResult').find(".inputAssignTag.multiSelectTag").hide(); this.$('.multiSelectTerm').hide();
}
this.$('.multiSelectTag').hide();
} }
}); });
this.listenTo(this.searchCollection, "error", function(model, response) { this.listenTo(this.searchCollection, "error", function(model, response) {
...@@ -283,18 +288,21 @@ define(['require', ...@@ -283,18 +288,21 @@ define(['require',
if (that.searchCollection.models.length) { if (that.searchCollection.models.length) {
that.renderTableLayoutView(); that.renderTableLayoutView();
} }
var resultData = 'Results for <b>' + _.escape(that.searchCollection.queryParams.query) + '</b>'; var resultArr = [];
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>'; if (that.searchCollection.queryParams.typeName) {
var resultText = that.searchCollection.queryParams.query; resultArr.push(that.searchCollection.queryParams.typeName)
var multiAssignDataTerm = "", }
createEntityTag = ""; if (that.searchCollection.queryParams.classification) {
if (Globals.taxonomy) { resultArr.push(that.searchCollection.queryParams.classification)
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>'; }
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()) { 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, silent: true,
reset: true reset: true
...@@ -309,7 +317,7 @@ define(['require', ...@@ -309,7 +317,7 @@ define(['require',
columns: columns columns: columns
}))); })));
that.ui.paginationDiv.show(); that.ui.paginationDiv.show();
that.$('.searchResult').find(".inputAssignTag.multiSelect").hide(); that.$(".ellipsis .inputAssignTag").hide();
that.renderBreadcrumb(); that.renderBreadcrumb();
}); });
}, },
...@@ -501,12 +509,12 @@ define(['require', ...@@ -501,12 +509,12 @@ define(['require',
showLoader: function() { showLoader: function() {
this.$('.fontLoader').show(); this.$('.fontLoader').show();
this.$('.searchTable').hide(); this.$('.searchTable').hide();
this.$('.searchResult').hide(); this.$('.ellipsis').hide();
}, },
hideLoader: function() { hideLoader: function() {
this.$('.fontLoader').hide(); this.$('.fontLoader').hide();
this.$('.searchTable').show(); this.$('.searchTable').show();
this.$('.searchResult').show(); this.$('.ellipsis').show();
}, },
checkedValue: function(e) { checkedValue: function(e) {
var guid = "", 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