Repository: atlas Updated Branches: refs/heads/branch-1.0 de172af37 -> 14cb82d72
ATLAS-2917: Filter added for Lineage to hide Process entity. (cherry picked from commit c2a2ec426eac66702cf9ba20a08d634469d78e48) Project: http://git-wip-us.apache.org/repos/asf/atlas/repo Commit: http://git-wip-us.apache.org/repos/asf/atlas/commit/14cb82d7 Tree: http://git-wip-us.apache.org/repos/asf/atlas/tree/14cb82d7 Diff: http://git-wip-us.apache.org/repos/asf/atlas/diff/14cb82d7 Branch: refs/heads/branch-1.0 Commit: 14cb82d72e9577416014a56d4946b4c022603254 Parents: de172af Author: Sarath Subramanian <[email protected]> Authored: Sun Oct 14 12:00:58 2018 -0700 Committer: Sarath Subramanian <[email protected]> Committed: Sun Oct 14 12:02:27 2018 -0700 ---------------------------------------------------------------------- dashboardv2/public/css/scss/graph.scss | 14 ++- .../templates/graph/LineageLayoutView_tmpl.html | 21 +++- .../public/js/views/graph/LineageLayoutView.js | 108 +++++++++++++++---- 3 files changed, 115 insertions(+), 28 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/atlas/blob/14cb82d7/dashboardv2/public/css/scss/graph.scss ---------------------------------------------------------------------- diff --git a/dashboardv2/public/css/scss/graph.scss b/dashboardv2/public/css/scss/graph.scss index 5784095..3fce69d 100644 --- a/dashboardv2/public/css/scss/graph.scss +++ b/dashboardv2/public/css/scss/graph.scss @@ -152,11 +152,9 @@ g.type-TK>rect { fill: $color_bright_turquoise_approx; } -.zoomButtonGroup { - background-color: $white; +.hideProcessContainer { position: absolute; - top: 4px; - right: 5px; + top: 12px; } .graph-toolbar { @@ -232,4 +230,12 @@ g.type-TK>rect { text-align: left; } } +} + +.lineage-filter-box { + background-color: #e6e6e6; + padding: 4px; + border-radius: 5px; + width: 100%; + box-shadow: 1px 3px 3px 2px #bfbfbf; } \ No newline at end of file http://git-wip-us.apache.org/repos/asf/atlas/blob/14cb82d7/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html b/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html index 096fb5b..cde8fed 100644 --- a/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html +++ b/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html @@ -16,16 +16,27 @@ --> <!-- <div class="graph-toolbar clearfix"></div> --> <div style="position: absolute;height:100%;width:100%;" class="white-bg no-padding lineage-box"> + <div class="lineage-filter-box clearfix"> + <div class="hideProcessContainer"> + <span class="pull-left"><b>Load Process:</b> </span> + <span class="pull-left">Show</span> + <label class="switch pull-left"> + <input type="checkbox" class="switch-input" data-id="checkHideProcess" value="" /> + <span class="switch-slider"></span> + </label> + <span class="pull-left">Hide</span> + </div> + <div class="zoomButtonGroup pull-right"> + <span type="button" id="zoom_in" class="btn btn-atlas btn-md lineageZoomButton" title="Zoom In" data-id="refreshBtn"> <i class="fa fa-search-plus"></i></span> + <span type="button" id="zoom_out" class="btn btn-atlas btn-md lineageZoomButton" title="Zoom Out" data-id="refreshBtn"> <i class="fa fa-search-minus"></i></span> + </div> + </div> <div class="fontLoader"> <i class="fa fa-refresh fa-spin-custom"></i> </div> - <svg width="100%" height="calc(100% - 30px)" viewBox="0 0 854 330" enable-background="new 0 0 854 330" xml:space="preserve"></svg> + <svg width="100%" height="calc(100% - 80px)" viewBox="0 0 854 330" enable-background="new 0 0 854 330" xml:space="preserve"></svg> <div class="legends" style="height: 20px"> <i class="fa fa-long-arrow-right" aria-hidden="true" style="margin-right: 12px; color:#8bc152;"> <span>Lineage</span></i> <i class="fa fa-long-arrow-right" aria-hidden="true" style="color:#fb4200;"> <span>Impact</span></i> </div> - <div class="zoomButtonGroup"> - <span type="button" id="zoom_in" class="btn btn-action btn-md lineageZoomButton" title="Zoom In" data-id="refreshBtn"> <i class="fa fa-search-plus"></i></span> - <span type="button" id="zoom_out" class="btn btn-action btn-md lineageZoomButton" title="Zoom Out" data-id="refreshBtn"> <i class="fa fa-search-minus"></i></span> - </div> </div> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/atlas/blob/14cb82d7/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 0d95f0c..5385bc4 100644 --- a/dashboardv2/public/js/views/graph/LineageLayoutView.js +++ b/dashboardv2/public/js/views/graph/LineageLayoutView.js @@ -42,12 +42,14 @@ define(['require', /** ui selector cache */ ui: { - graph: ".graph" + graph: ".graph", + checkHideProcess: "[data-id='checkHideProcess']" }, /** ui events hash */ events: function() { var events = {}; + events["click " + this.ui.checkHideProcess] = 'onCheckHideProcess'; return events; }, @@ -56,7 +58,7 @@ define(['require', * @constructs */ initialize: function(options) { - _.extend(this, _.pick(options, 'guid', 'entityDefCollection', 'actionCallBack', 'fetchCollection')); + _.extend(this, _.pick(options, 'processCheck', 'guid', 'entityDefCollection', 'actionCallBack', 'fetchCollection')); this.collection = new VLineageList(); this.lineageData = null; this.typeMap = {}; @@ -64,16 +66,9 @@ define(['require', this.asyncFetchCounter = 0; this.edgeCall; }, - onRender: function() { - var that = this; - this.$('.fontLoader').show(); - this.fetchGraphData(); - if (platform.name === "IE") { - this.$('svg').css('opacity', '0'); - } - if (this.layoutRendered) { - this.layoutRendered(); - } + + initializeGraph: function() { + this.g = {}; this.g = new dagreD3.graphlib.Graph() .setGraph({ nodesep: 50, @@ -89,6 +84,31 @@ define(['require', return {}; }); }, + + onRender: function() { + var that = this; + this.fetchGraphData(); + if (platform.name === "IE") { + this.$('svg').css('opacity', '0'); + } + if (this.layoutRendered) { + this.layoutRendered(); + } + if (this.processCheck) { + this.hideCheckForProcess(); + } + this.initializeGraph(); + }, + onShow: function() { + this.$('.fontLoader').show(); + }, + onCheckHideProcess: function(e) { + var data = $.extend(true, {}, this.lineageData); + this.fromToObj = {}; + this.initializeGraph(); + this.generateData(data.relations, data.guidEntityMap, e.target.checked); + }, + fetchGraphData: function() { var that = this; this.fromToObj = {}; @@ -96,10 +116,11 @@ define(['require', skipDefaultError: true, success: function(data) { if (data.relations.length) { - that.lineageData = data; + that.lineageData = $.extend(true, {}, data) that.generateData(data.relations, data.guidEntityMap); } else { that.noLineage(); + that.hideCheckForProcess(); } }, cust_error: function(model, response) { @@ -116,9 +137,17 @@ define(['require', this.actionCallBack(); } }, - generateData: function(relations, guidEntityMap) { + hideCheckForProcess: function() { + this.$('.hideProcessContainer').hide(); + }, + generateData: function(relations, guidEntityMap, hideProcess) { var that = this; + function isProcess(typeName) { + var entityDef = that.entityDefCollection.fullCollection.find({ name: typeName }); + return _.contains(Utils.getNestedSuperTypes({ data: entityDef.toJSON(), collection: that.entityDefCollection}), "Process") + } + function makeNodeObj(relationObj) { var obj = {}; obj['shape'] = "img"; @@ -131,15 +160,53 @@ define(['require', if (relationObj.status) { obj['status'] = relationObj.status; } - var entityDef = that.entityDefCollection.fullCollection.find({ name: relationObj.typeName }); - if (entityDef && entityDef.get('superTypes')) { - obj['isProcess'] = _.contains(entityDef.get('superTypes'), "Process") ? true : false; + if (hideProcess) { + obj['isProcess'] = relationObj.isProcess; + } else { + obj['isProcess'] = isProcess(relationObj.typeName); } return obj; } - _.each(relations, function(obj, index) { + var newRelations = []; + + if (hideProcess) { + _.each(relations, function(obj, index, relationArr) { + var isFromEntityIdProcess = isProcess(guidEntityMap[obj.fromEntityId].typeName); + var isToEntityProcess = isProcess(guidEntityMap[obj.toEntityId].typeName); + if (isToEntityProcess) { + guidEntityMap[obj.toEntityId]["isProcess"] = true; + _.filter(relationArr, function(flrObj) { + if (flrObj.fromEntityId === obj.toEntityId) { + newRelations.push({ + fromEntityId: obj.fromEntityId, + toEntityId: flrObj.toEntityId + }); + } + }) + } else if (isFromEntityIdProcess) { + guidEntityMap[obj.fromEntityId]["isProcess"] = true; + _.filter(relationArr, function(flrObj) { + if (flrObj.toEntityId === obj.fromEntityId) { + newRelations.push({ + fromEntityId: flrObj.fromEntityId, + toEntityId: obj.toEntityId + }); + } + }) + } else { + newRelations.push(obj); + } + }); + } + + + var finalRelations = hideProcess ? newRelations : relations; + + + + _.each(finalRelations, function(obj, index) { if (!that.fromToObj[obj.fromEntityId]) { that.fromToObj[obj.fromEntityId] = makeNodeObj(guidEntityMap[obj.fromEntityId]); that.g.setNode(obj.fromEntityId, that.fromToObj[obj.fromEntityId]); @@ -158,7 +225,7 @@ define(['require', if (this.fromToObj[this.guid]) { this.fromToObj[this.guid]['isLineage'] = false; - this.checkForLineageOrImpactFlag(relations, this.guid); + this.checkForLineageOrImpactFlag(finalRelations, this.guid); } if (this.asyncFetchCounter == 0) { this.createGraph(); @@ -308,6 +375,9 @@ define(['require', return shapeSvg; }; // Set up an SVG group so that we can translate the final graph. + if (this.$("svg").find('.output').length) { + this.$("svg").find('.output').parent('g').remove(); + } var svg = this.svg = d3.select(this.$("svg")[0]) .attr("viewBox", "0 0 " + width + " " + height) .attr("enable-background", "new 0 0 " + width + " " + height),
