Repository: incubator-atlas Updated Branches: refs/heads/master 919503968 -> 23c8f71da
ATLAS-1667: lineage UI improvement Signed-off-by: Madhan Neethiraj <[email protected]> Project: http://git-wip-us.apache.org/repos/asf/incubator-atlas/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-atlas/commit/23c8f71d Tree: http://git-wip-us.apache.org/repos/asf/incubator-atlas/tree/23c8f71d Diff: http://git-wip-us.apache.org/repos/asf/incubator-atlas/diff/23c8f71d Branch: refs/heads/master Commit: 23c8f71dad17476d38363c58341627b1159c6197 Parents: 9195039 Author: kevalbhatt <[email protected]> Authored: Wed Mar 15 20:03:50 2017 +0530 Committer: Madhan Neethiraj <[email protected]> Committed: Fri Mar 17 18:45:38 2017 -0700 ---------------------------------------------------------------------- dashboardv2/public/css/scss/graph.scss | 4 -- .../search/SearchResultLayoutView_tmpl.html | 5 ++- .../public/js/utils/CommonViewFunction.js | 7 ++-- .../public/js/views/graph/LineageLayoutView.js | 38 +++++++++++++++++-- .../js/views/search/SearchResultLayoutView.js | 40 ++++++++++++-------- 5 files changed, 66 insertions(+), 28 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/23c8f71d/dashboardv2/public/css/scss/graph.scss ---------------------------------------------------------------------- diff --git a/dashboardv2/public/css/scss/graph.scss b/dashboardv2/public/css/scss/graph.scss index 82100c2..aec7ce0 100644 --- a/dashboardv2/public/css/scss/graph.scss +++ b/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; http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/23c8f71d/dashboardv2/public/js/templates/search/SearchResultLayoutView_tmpl.html ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/templates/search/SearchResultLayoutView_tmpl.html b/dashboardv2/public/js/templates/search/SearchResultLayoutView_tmpl.html index f51ea0a..27d6976 100644 --- a/dashboardv2/public/js/templates/search/SearchResultLayoutView_tmpl.html +++ b/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"> http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/23c8f71d/dashboardv2/public/js/utils/CommonViewFunction.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/utils/CommonViewFunction.js b/dashboardv2/public/js/utils/CommonViewFunction.js index a601d81..615bef4 100644 --- a/dashboardv2/public/js/utils/CommonViewFunction.js +++ b/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; } http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/23c8f71d/dashboardv2/public/js/views/graph/LineageLayoutView.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/views/graph/LineageLayoutView.js b/dashboardv2/public/js/views/graph/LineageLayoutView.js index 02ede88..3049eb1 100644 --- a/dashboardv2/public/js/views/graph/LineageLayoutView.js +++ b/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> "; } http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/23c8f71d/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 3446a67..a092cb4 100644 --- a/dashboardv2/public/js/views/search/SearchResultLayoutView.js +++ b/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 = "",
