Skip to content

A
atlas
Commit 786a0eaa by kevalbhatt
Options

ATLAS-3062 : UI : Add relationship table inside relationships tab

parent 546bc22f
Showing with 237 additions and 357 deletions
dashboardv2/public/css/scss/common.scss
......@@ -20,6 +20,7 @@
/* common.scss */
.readOnly {
span,
button,
a {
......@@ -27,31 +28,39 @@
&.fa-trash[data-guid] {
display: none;
}
&.fa-trash[data-id="delete"] {
display: none;
}
}
&.btn[data-id="addTag"] {
display: none;
}
&.btn[data-id="addTerm"] {
display: none;
}
&.btn[data-id="editButton"] {
display: none;
}
&.editbutton[data-id="editButton"] {
display: none !important;
}
&[data-id="delete"],
&[data-id="edit"] {
display: none;
}
&.btn[data-id="tagClick"] {
span {
display: block;
padding: 3px 5px 3px 5px;
}
i.fa-close[data-id="deleteTag"],
i.fa-times[data-id="deleteTag"],
i.fa-times[data-id="delete"] {
......@@ -69,6 +78,7 @@
#sidebar-wrapper {
left: 0;
}
#wrapper {
padding-left: 0px;
}
......@@ -93,6 +103,7 @@ pre {
white-space: pre-wrap;
/* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */
word-wrap: break-word;
/* IE 5.5+ */
&.code-block {
code {
......@@ -100,11 +111,14 @@ pre {
max-height: 400px;
display: block;
overflow: auto;
text-align: left;
}
position: relative;
overflow: hidden;
&.shrink {
height: 40px;
height: 100px;
white-space: -moz-pre-wrap;
/* Mozilla, supported since 1999 */
white-space: -pre-wrap;
......@@ -114,51 +128,62 @@ pre {
white-space: pre-wrap;
/* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */
word-wrap: break-word;
/* IE 5.5+ */
code {
height: 40px;
height: 100px;
}
&.fixed-height {
height: 75px;
code {
height: 54px;
}
}
&.medium-height {
height: 100px;
}
.expand-collapse-button {
i:before {
content: "\f107";
}
}
}
.expand-collapse-button {
position: absolute;
right: 3px;
top: 4px;
z-index: 1;
i:before {
content: "\f106";
}
}
.json-key {
color: brown;
}
.json-value {
color: navy;
}
.json-string {
color: olive;
}
}
code {
font-family: monospace;
}
}
#accordion {
.panel-default > .panel-heading{
.panel-default>.panel-heading {
cursor: pointer;
}
}
\ No newline at end of file
dashboardv2/public/css/scss/graph.scss
......@@ -58,6 +58,12 @@
transition: all 0.3s;
stroke-width: 1.5px;
&.node-detail-highlight {
stroke: $color_havelock_blue_approx;
stroke-width: 2px;
opacity: 0.8;
}
&.nodeImage {
&.green:hover {
stroke: #ffb203;
......@@ -197,80 +203,6 @@ g.type-TK>rect {
height: 100%;
width: 100%;
overflow: hidden;
.lineage-edge-details {
position: absolute;
left: 0;
overflow: auto;
top: 0px;
max-height: 100%;
box-shadow: 4px 13px 14px -12px;
background: #e7e7e7;
transform: scaleX(0);
width: 200px;
transition: transform 0.3s ease-in;
&.open {
transform: scaleX(1);
}
.title {
background: black;
color: white;
padding: 10px;
padding-left: 17px;
margin-top: 0;
font-size: 14px;
.navigation-font {
font-family: sans-serif;
padding: 0px 5px;
color: #fb4200;
}
}
.close-details {
position: absolute;
top: 0;
color: white;
left: 0;
height: 21px;
width: 21px;
cursor: pointer;
font-size: 16px;
}
.propagation-list {
overflow: auto;
list-style-type: none;
list-style-position: outside;
padding-left: 30px;
}
.overlay {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: #d2d2d2b8;
z-index: 99;
}
ul>li {
word-wrap: break-word;
margin-bottom: 5px;
text-align: left;
}
}
}
.lineage-filter-box {
background-color: #e6e6e6;
padding: 4px;
border-radius: 5px;
width: 100%;
box-shadow: 1px 3px 3px 2px #bfbfbf;
}
.graph-button-group {
......@@ -283,113 +215,38 @@ g.type-TK>rect {
.box-panel {
position: absolute;
top: 45px;
top: 37px;
border: 1px solid #ccc;
width: 250px;
max-height: 99%;
overflow: auto;
transition: all 0.3s ease;
right: -273px;
box-shadow: 7px 1px 28px -3px;
background-color: #f5f5f5;
background-color: $white;
z-index: 999;
box-shadow: 1px 19px 22px -17px;
border-radius: 10px;
max-height: 88%;
.header {
background: black;
color: white;
text-align: center;
margin-bottom: 15px;
position: absolute;
width: 100%;
>h4 {
padding: 0px 36px 0px 10px;
word-break: break-all;
}
&.slide-from-left {
left: -273px;
right: 0px;
.fltr-togler,
.search-togler {
position: absolute;
right: 0px;
top: 0px;
&.size-lg {
left: -373px;
}
}
.body {
padding: 10px;
margin-top: 39px;
width: 100%;
position: relative;
height: 150px;
overflow: auto;
}
}
.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;
&.size-lg {
width: 350px;
}
& h4.title {
position: fixed;
width: 100%;
}
&.show-box-panel {
right: 0px !important;
& table {
& tbody td {
word-wrap: break-word
&.slide-from-left {
left: 0;
}
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 {
......@@ -415,28 +272,59 @@ g.type-TK>rect {
}
}
}
}
.show-filter-panel,
.show-search-panel,
.show-box-panel {
right: 0px !important;
}
.header {
background: $color_havelock_blue_approx;
color: white;
position: relative;
text-align: center;
width: 100%;
position: sticky;
height: 37px;
top: 0;
z-index: 999;
>h4 {
padding: 0px 36px 0px 10px;
word-break: break-all;
}
.btn-close {
position: absolute;
right: 0px;
top: 0px;
font-size: 18px;
&:hover {
color: $white;
}
}
}
.body {
padding: 10px;
width: 100%;
position: relative;
height: calc(100% - 37px);
overflow: hidden;
}
}
.btn-gray {
border: 1px solid #686868;
color: $dark_gray;
background: white;
}
.btn-gray:hover {
border: 1px solid #686868;
color: $dark_gray !important;
background-color: white !important;
&:hover {
border: 1px solid #686868;
color: $dark_gray !important;
background-color: white !important;
}
}
span#zoom_in {
border-bottom: 1px solid #625555;
}
......@@ -485,6 +373,10 @@ span#zoom_in {
.lineage-box {
padding: 10px !important;
}
.box-panel {
margin: 10px !important;
}
}
@keyframes zoominoutsinglefeatured {
......
dashboardv2/public/css/scss/relationship.scss
......@@ -27,64 +27,10 @@
fill: none;
stroke-width: 1.5px;
}
}
.relationship-details {
position: absolute;
left: 0;
overflow: auto;
top: 0px;
max-height: 100%;
box-shadow: 4px 13px 14px -12px;
background: #e7e7e7;
transform: scaleX(0);
width: 240px;
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;
}
}
}
.relationship-node-details {
&.box-panel {
top: 0;
}
}
\ No newline at end of file
dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html
......@@ -19,7 +19,7 @@
<div class="box-panel filter-box">
<div class="header clearfix">
<h4>Filters</h4>
<span data-id="box-close" style="margin: 7px" class="btn btn-action btn-sm fltr-togler"><i class="fa fa-close"></i></span>
<span data-id="box-close" class="btn btn-sm btn-close"><i class="fa fa-close"></i></span>
</div>
<div class="body">
<div class="hideProcessContainer form-group text-left col-sm-12">
......@@ -49,7 +49,7 @@
<div class="box-panel search-box">
<div class="header clearfix">
<h4>Search</h4>
<span data-id="box-close" style="margin: 7px" class="btn btn-action btn-sm fltr-togler"><i class="fa fa-close"></i></span>
<span data-id="box-close" class="btn btn-sm btn-close"><i class="fa fa-close"></i></span>
</div>
<div class="body">
<div class="col-sm-12 no-padding">
......@@ -67,7 +67,7 @@
<div class="box-panel setting-box">
<div class="header clearfix">
<h4>Settings</h4>
<span data-id="box-close" style="margin: 7px" class="btn btn-action btn-sm fltr-togler"><i class="fa fa-close"></i></span>
<span data-id="box-close" class="btn btn-sm btn-close"><i class="fa fa-close"></i></span>
</div>
<div class="body">
<div class="showOnlyHoverPath form-group text-left col-sm-12">
......@@ -106,6 +106,24 @@
<button type="button" id="zoom_out" class="btn btn-action btn-gray btn-sm lineageZoomButton" title="Zoom Out" data-id="refreshBtn"> <i class="fa fa-search-minus"></i></button>
</div>
</div>
<div class="box-panel size-lg node-details slide-from-left lineage-node-detail">
<div class="header clearfix">
<h4><span data-id="typeName"></span></h4>
<span data-id="box-close" class="btn btn-sm btn-close lineage-node-detail-close"><i class="fa fa-close"></i></span>
<span data-id="box-close" class="btn btn-sm btn-close lineage-node-detail-close"><i class="fa fa-close"></i></span>
</div>
<div class="body">
<table class='table table-quickMenu'>
<thead>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
</thead>
<tbody data-id="nodeDetailTable"></tbody>
</table>
</div>
</div>
<div class="fontLoader">
<i class="fa fa-refresh fa-spin-custom"></i>
</div>
......@@ -117,10 +135,4 @@
</div>
<!-- <svg width="100%" height="calc(100% - 28px)" preserveAspectRatio="xMidYMid meet" viewBox="0 0 854 330" enable-background="new 0 0 854 330" xml:space="preserve"></svg> -->
<svg width="{{width}}" height="{{height}}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"></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/templates/graph/RelationshipLayoutView_tmpl.html
......@@ -15,24 +15,55 @@
* limitations under the License.
-->
<!-- <div class="graph-toolbar clearfix"></div> -->
<div class="white-bg no-padding relationship-box">
<div class="graph-button-group form-group clearfix">
<div class="btn-group pull-left">
<span class="pull-left">Graph</span>
<label class="switch pull-left">
<input type="checkbox" class="switch-input" name="relationshipViewToggle" value="text">
<span class="switch-slider"></span>
</label>
<span class="pull-left">Table</span>
</div>
<div class="btn-group pull-right" data-id="zoomControl">
<button type="button" id="zoom_in" class="btn btn-action btn-gray btn-sm lineageZoomButton" title="Zoom In" data-id="refreshBtn"> <i class="fa fa-search-plus"></i></button>
<button type="button" id="zoom_out" class="btn btn-action btn-gray btn-sm lineageZoomButton" title="Zoom Out" data-id="refreshBtn"> <i class="fa fa-search-minus"></i></button>
</div>
</div>
<div class="white-bg no-padding relationship-box" data-id='relationshipSVG'>
<div class="fontLoader">
<i class="fa fa-refresh fa-spin-custom"></i>
</div>
<div class="graph-button-group pull-right">
<div class="btn-group">
<button type="button" id="zoom_in" class="btn btn-action btn-gray btn-sm lineageZoomButton" title="Zoom In" data-id="refreshBtn"> <i class="fa fa-search-plus"></i></button>
<button type="button" id="zoom_out" class="btn btn-action btn-gray btn-sm lineageZoomButton" title="Zoom Out" data-id="refreshBtn"> <i class="fa fa-search-minus"></i></button>
<svg width="100%" height="100%" viewBox="0 0 854 330" enable-background="new 0 0 854 330" xml:space="preserve"></svg>
<div class="box-panel size-lg slide-from-left relationship-node-details">
<div class="header clearfix">
<h4><span data-id="typeName"></span></h4>
<span data-id="box-close" class="btn btn-sm btn-close"><i class="fa fa-close"></i></span>
</div>
<div class="body">
<div class="col-md-12">
<input data-id="searchNode" class="form-control form-group" placeholder="Search Entities" />
<ul data-id="entityList" class="entity-list"></ul>
</div>
</div>
</div>
<svg width="100%" height="100%" viewBox="0 0 854 330" enable-background="new 0 0 854 330" xml:space="preserve"></svg>
<div class="relationship-details">
<!-- <div class="relationship-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>
<!-- <div data-id="close" class="close-details"><i class="fa fa-times"></i></div> -->
<h4 class="title"><span data-id="typeName"></span></h4>
<div class="col-md-12">
<input data-id="searchNode" class="form-control form-group" placeholder="Search Entities" />
<ul data-id="entityList" class="entity-list"></ul>
</div>
</div>
</div> -->
</div>
<div>
<table class="table table-quickMenu" data-id="relationshipDetailTable" style="display: none;">
<thead>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
</thead>
<tbody data-id="relationshipDetailValue">
</tbody>
</table>
</div>
\ No newline at end of file
dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js
......@@ -419,7 +419,6 @@ define(['require',
Globals.termMeanings.push(newD);
}
_.each(data, function(val) {
console.log(val.guid)
if (val.relationshipStatus == "ACTIVE") {
termData += '<span class="btn btn-action btn-sm btn-icon btn-blue" title=' + val.displayText + ' data-id="termClick"><span>' + val.displayText + '</span><i class="fa fa-close" data-id="deleteTerm" data-guid="' + val.guid + '" data-type="term" title="Remove Term"></i></span>';
}
......
dashboardv2/public/js/views/graph/RelationshipLayoutView.js
......@@ -22,11 +22,12 @@ define(['require',
'collection/VLineageList',
'models/VEntity',
'utils/Utils',
'utils/CommonViewFunction',
'd3-tip',
'utils/Enums',
'utils/UrlLinks',
'platform'
], function(require, Backbone, RelationshipLayoutViewtmpl, VLineageList, VEntity, Utils, d3Tip, Enums, UrlLinks, platform) {
], function(require, Backbone, RelationshipLayoutViewtmpl, VLineageList, VEntity, Utils, CommonViewFunction, d3Tip, Enums, UrlLinks, platform) {
'use strict';
var RelationshipLayoutView = Backbone.Marionette.LayoutView.extend(
......@@ -36,14 +37,19 @@ define(['require',
template: RelationshipLayoutViewtmpl,
className: "resizeGraph",
/** Layout sub regions */
regions: {},
/** ui selector cache */
ui: {
relationshipDetailClose: '[data-id="close"]',
searchNode: '[data-id="searchNode"]'
searchNode: '[data-id="searchNode"]',
relationshipViewToggle: 'input[name="relationshipViewToggle"]',
relationshipDetailTable: "[data-id='relationshipDetailTable']",
relationshipSVG: "[data-id='relationshipSVG']",
relationshipDetailValue: "[data-id='relationshipDetailValue']",
zoomControl: "[data-id='zoomControl']",
boxClose: '[data-id="box-close"]'
},
/** ui events hash */
......@@ -53,6 +59,10 @@ define(['require',
this.toggleInformationSlider({ close: true });
};
events["keyup " + this.ui.searchNode] = 'searchNode';
events["click " + this.ui.boxClose] = 'toggleBoxPanel';
events["change " + this.ui.relationshipViewToggle] = function(e) {
this.relationshipViewToggle(e.currentTarget.checked)
};
return events;
},
......@@ -61,7 +71,7 @@ define(['require',
* @constructs
*/
initialize: function(options) {
_.extend(this, _.pick(options, 'entity', 'entityName', 'guid', 'actionCallBack'));
_.extend(this, _.pick(options, 'entity', 'entityName', 'guid', 'actionCallBack', 'attributeDefs'));
this.graphData = this.createData(this.entity);
},
createData: function(entity) {
......@@ -85,14 +95,13 @@ define(['require',
}
return { nodes: nodes, links: links };
},
onRender: function() {
},
onRender: function() {},
onShow: function(argument) {
if (this.graphData && _.isEmpty(this.graphData.links)) {
this.noRelationship();
} else {
this.createGraph(this.graphData);
this.createTable();
}
},
noRelationship: function() {
......@@ -106,6 +115,16 @@ define(['require',
this.$('.relationship-details').removeClass('open');
}
},
toggleBoxPanel: function(options) {
var el = options && options.el,
nodeDetailToggler = options && options.nodeDetailToggler,
currentTarget = options.currentTarget;
this.$el.find('.show-box-panel').removeClass('show-box-panel');
if (el && el.addClass) {
el.addClass('show-box-panel');
}
this.$('circle.node-detail-highlight').removeClass("node-detail-highlight");
},
searchNode: function(e) {
var $el = $(e.currentTarget);
this.updateRelationshipDetails(_.extend({}, $el.data(), { searchString: $el.val() }))
......@@ -307,16 +326,9 @@ define(['require',
})
.on('click', function(d) {
if (d3.event.defaultPrevented) return; // ignore drag
that.toggleInformationSlider({ open: true, obj: d });
that.toggleBoxPanel({ el: that.$('.relationship-node-details') });
that.ui.searchNode.data({ obj: d });
d3.selectAll('circle').attr("stroke", "none");
d3.select('circle[typename="' + d.name + '"]').attr("stroke", function(d) {
if (d && d.value && d.value.guid == that.guid) {
return "#316132";
} else {
return activeEntityColor;
}
});
$(this).find('circle').addClass("node-detail-highlight");
that.updateRelationshipDetails({ obj: d });
}).call(force.drag);
......@@ -443,8 +455,26 @@ define(['require',
function dragstart(d) {
d3.select(this).classed("fixed", d.fixed = true);
}
}
},
createTable: function() {
this.entityModel = new VEntity({});
var table = CommonViewFunction.propertyTable({ scope: this, valueObject: this.entity.relationshipAttributes, attributeDefs: this.attributeDefs });
this.ui.relationshipDetailValue.html(table);
},
relationshipViewToggle: function(checked) {
if (checked) {
this.ui.relationshipDetailTable.show();
this.ui.relationshipSVG.hide();
this.ui.zoomControl.hide();
this.$el.addClass('auto-height');
} else {
this.ui.relationshipDetailTable.hide();
this.ui.relationshipSVG.show();
this.ui.zoomControl.show();
this.$el.removeClass('auto-height');
}
}
});
return RelationshipLayoutView;
});
\ No newline at end of file
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