You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@atlas.apache.org by ni...@apache.org on 2019/01/25 09:17:21 UTC
[atlas] branch master updated: ATLAS-2953: UI : Lineage show detail
popup while clicking on node
This is an automated email from the ASF dual-hosted git repository.
nixon pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/atlas.git
The following commit(s) were added to refs/heads/master by this push:
new 05e845f ATLAS-2953: UI : Lineage show detail popup while clicking on node
05e845f is described below
commit 05e845f5b5178849f6fd53e589f9deaebd498f85
Author: Abhishek Kadam <ab...@gmail.com>
AuthorDate: Mon Jan 21 20:01:28 2019 +0530
ATLAS-2953: UI : Lineage show detail popup while clicking on node
Signed-off-by: nixonrodrigues <ni...@apache.org>
---
dashboardv2/public/css/scss/graph.scss | 108 ++++++++++++++++++++-
.../js/templates/graph/LineageLayoutView_tmpl.html | 6 ++
.../public/js/views/graph/LineageLayoutView.js | 79 ++++++++++++++-
3 files changed, 186 insertions(+), 7 deletions(-)
diff --git a/dashboardv2/public/css/scss/graph.scss b/dashboardv2/public/css/scss/graph.scss
index b84d59e..3646261 100644
--- a/dashboardv2/public/css/scss/graph.scss
+++ b/dashboardv2/public/css/scss/graph.scss
@@ -189,6 +189,7 @@ g.type-TK>rect {
height: 100%;
width: 100%;
overflow: hidden;
+
.lineage-edge-details {
position: absolute;
left: 0;
@@ -268,10 +269,12 @@ g.type-TK>rect {
&>div {
display: inline-block;
}
+
.zoom-button-group {}
}
-.lineage-fltr-panel {
+.lineage-fltr-panel,
+.lineage-search-panel {
position: absolute;
border: 1px solid #ccc;
width: 250px;
@@ -296,7 +299,8 @@ g.type-TK>rect {
word-break: break-all;
}
- .fltr-togler {
+ .fltr-togler,
+ .search-togler {
position: absolute;
right: 0px;
top: 0px;
@@ -308,12 +312,105 @@ g.type-TK>rect {
margin-top: 39px;
width: 100%;
position: relative;
- height: 200px;
+ height: 150px;
overflow: auto;
}
}
-.show-filter-panel {
+.lineage-details.node-details.open {
+ overflow: hidden !important;
+ min-height: 300px;
+
+ & span[data-id='close'] {
+ margin: 7px;
+ position: absolute;
+ right: 0;
+ z-index: 99;
+ }
+
+ & div[data-id="entityList"] {
+ position: relative;
+ overflow: auto;
+ max-height: 250px;
+ top: 40px;
+ }
+
+ & h4.title {
+ position: fixed;
+ width: 100%;
+ }
+
+ & table {
+ & tbody td {
+ word-wrap: break-word
+ }
+
+ table-layout: fixed;
+ }
+}
+
+.lineage-details {
+ position: absolute;
+ left: 0;
+ overflow: auto;
+ top: 0px;
+ max-height: 100%;
+ box-shadow: 4px 13px 14px -12px;
+ background: #e7e7e7;
+ transform: scaleX(0);
+ width: 35%;
+ transition: transform 0.3s ease-in;
+
+ &.open {
+ transform: scaleX(1);
+ }
+
+ .title {
+ background: black;
+ color: white;
+ padding: 10px 38px 10px 10px;
+ word-break: break-all;
+ margin-top: 0;
+ }
+
+ .close-details {
+ position: absolute;
+ top: 0;
+ color: white;
+ left: 0;
+ height: 21px;
+ width: 21px;
+ cursor: pointer;
+ font-size: 16px;
+ }
+
+ .entity-list {
+ overflow: auto;
+ list-style-type: decimal;
+ list-style-position: outside;
+ padding-left: 15px;
+ }
+
+ ul>li {
+ word-wrap: break-word;
+ margin-bottom: 5px;
+ text-align: left;
+
+ &.deleted-relation {
+ a {
+ color: #BB5838 !important;
+ }
+
+ .deleteBtn {
+ padding: 2px 8px !important;
+ margin: 5px 5px !important;
+ }
+ }
+ }
+}
+
+.show-filter-panel,
+.show-search-panel {
right: 0px !important;
}
@@ -361,13 +458,16 @@ span#zoom_in {
padding: 0 !important;
z-index: 999;
overflow: hidden !important;
+
.resizeGraph {
position: fixed;
height: 100% !important;
+
.ui-resizable-handle {
display: none;
}
}
+
.lineage-box {
padding: 10px !important;
}
diff --git a/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html b/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html
index b93a89c..2c92103 100644
--- a/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html
+++ b/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html
@@ -67,4 +67,10 @@
<span style="margin-right: 8px; color:#fb4200;"><i class="fa fa-long-arrow-right fa-fw" aria-hidden="true"></i>Impact</span>
</div>
<svg width="100%" height="calc(100% - 28px)" viewBox="0 0 854 330" enable-background="new 0 0 854 330" xml:space="preserve"></svg>
+ <div class="lineage-details node-details">
+ <span data-id="close" style="margin: 7px;position: absolute;right: 0" class="btn btn-action btn-sm fltr-togler"><i class="fa fa-close"></i></span>
+ <h4 class="title"><span data-id="typeName"></span></h4>
+ <div class="col-md-12" data-id="entityList">
+ </div>
+ </div>
</div>
\ No newline at end of file
diff --git a/dashboardv2/public/js/views/graph/LineageLayoutView.js b/dashboardv2/public/js/views/graph/LineageLayoutView.js
index 66b20ba..5ba2f2f 100644
--- a/dashboardv2/public/js/views/graph/LineageLayoutView.js
+++ b/dashboardv2/public/js/views/graph/LineageLayoutView.js
@@ -51,7 +51,9 @@ define(['require',
selectDepth: 'select[data-id="selectDepth"]',
fltrTogler: '[data-id="fltr-togler"]',
lineageFilterPanel: '.lineage-fltr-panel',
- LineageFullscreenToggler: '[data-id="fullScreen-toggler"]'
+ LineageFullscreenToggler: '[data-id="fullScreen-toggler"]',
+ lineageDetailClose: '[data-id="close"]',
+ nodeEntityList: '[data-id="entityList"]'
},
/** ui events hash */
@@ -62,6 +64,9 @@ define(['require',
events['change ' + this.ui.selectDepth] = 'onSelectDepthChange';
events["click " + this.ui.fltrTogler] = 'onClickFiltrTogler';
events["click " + this.ui.LineageFullscreenToggler] = 'onClickLineageFullscreenToggler';
+ events["click " + this.ui.lineageDetailClose] = function() {
+ this.toggleLineageInfomationSlider({ close: true });
+ };
return events;
},
@@ -133,7 +138,7 @@ define(['require',
});
},
onClickLineageFullscreenToggler: function(e) {
- var icon = $(e.target).find('i'),
+ var icon = $(e.currentTarget).find('i'),
panel = $(e.target).parents('.tab-pane').first();
icon.toggleClass('fa-expand fa-compress');
panel.toggleClass('fullscreen-mode');
@@ -153,7 +158,6 @@ define(['require',
var lineageFilterPanel = this.ui.lineageFilterPanel;
$(lineageFilterPanel).toggleClass("show-filter-panel");
},
-
onSelectDepthChange: function(e, options) {
this.initializeGraph();
this.filterObj.depthCount = e.currentTarget.value;
@@ -438,6 +442,7 @@ define(['require',
var shapeSvg = parent.append('circle')
.attr('fill', 'url(#img_' + node.id + ')')
.attr('r', '24px')
+ .attr('data-stroke',node.id)
.attr("class", "nodeImage " + (currentNode ? "currentNode" : (node.isProcess ? "process" : "node")));
parent.insert("defs")
@@ -597,6 +602,19 @@ define(['require',
tooltip.hide(d);
}
}, 400)
+ }).on('click', function(d) {
+ if (d3.event.defaultPrevented) return; // ignore drag
+ that.toggleLineageInfomationSlider({ open: true, obj: d });
+ svgGroup.selectAll('[data-stroke]').attr('stroke','none');
+ svgGroup.selectAll('[data-stroke]').attr('stroke',function(c) {
+ if (c == d) {
+ return "#316132";
+ } else {
+ return 'none';
+ }
+ })
+ that.updateRelationshipDetails({ obj: d });
+
});
svgGroup.selectAll("g.edgePath path.path").on('click', function(d) {
var data = { obj: _.find(that.lineageData.relations, { "fromEntityId": d.v, "toEntityId": d.w }) },
@@ -641,6 +659,61 @@ define(['require',
}, 1000);
});
}
+ },
+ toggleLineageInfomationSlider: function(options) {
+ if (options.open && !this.$('.lineage-details').hasClass("open")) {
+ this.$('.lineage-details').addClass('open');
+ } else if (options.close && this.$('.lineage-details').hasClass("open")) {
+ d3.selectAll('circle').attr("stroke", "none");
+ this.$('.lineage-details').removeClass('open');
+ }
+ },
+ updateRelationshipDetails: function(options) {
+ var that = this;
+ var lineageData;
+ for (var x in that.lineageData.guidEntityMap) {
+ if (x == options.obj) {
+ lineageData = that.lineageData.guidEntityMap[x]
+ }
+ }
+ var data = lineageData,
+ typeName = data.typeName || options.obj.name,
+ searchString = options.searchString,
+ listString = "";
+ this.$("[data-id='typeName']").text(typeName);
+ var getElement = function(options) {
+ var showCofig = [
+ "meaningNames",
+ "meanings",
+ "classificationNames",
+ {
+ "attributes": [
+ "description",
+ "name",
+ "qualifiedName"
+ ]
+ }
+ ];
+ var tbody = '';
+ for (var x = 0; x < showCofig.length; x++) {
+ if (typeof showCofig[x] === "object") {
+ _.each(showCofig[x].attributes, function(element, index, list) {
+ var dataToShow = data.attributes[element] ? data.attributes[element] : "N/A";
+ tbody += '<tr><td class="html-cell renderable">' + element + '</td><td class="html-cell renderable">' + dataToShow + '</td></tr>';
+ })
+ } else {
+ var dataToShow = data[showCofig[x]] ? data[showCofig[x]] : "N/A";
+ dataToShow = dataToShow && dataToShow.length > 0 ? dataToShow : "N/A";
+ tbody += '<tr><td class="html-cell renderable">' + showCofig[x] + '</td><td class="html-cell renderable">' + dataToShow + '</td></tr>';
+ }
+ }
+ var thead = '<thead><tr><th class="renderable">Type</th><th class="renderable">Details</th></thead>';
+ var table = '<table style="word-wrap: break-word;" class="table table-hover ">' + thead + '<tbody>' + tbody + '</body></table>';
+ return table;
+
+ }
+ listString += getElement(data);
+ this.ui.nodeEntityList.html(listString);
}
});
return LineageLayoutView;