Skip to content

A
atlas
Commit 05e845f5 by Abhishek Kadam Committed by nixonrodrigues
Options

ATLAS-2953: UI : Lineage show detail popup while clicking on node

Signed-off-by: 's avatarnixonrodrigues <nixon@apache.org>
parent 2341d58a
Showing with 187 additions and 7 deletions
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;
}
......
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
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;
......
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