Skip to content

A
atlas
Commit 786a0eaa by kevalbhatt
Options

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

parent 546bc22f
Showing with 228 additions and 350 deletions
dashboardv2/public/css/scss/common.scss
...@@ -20,6 +20,7 @@ ...@@ -20,6 +20,7 @@
/* common.scss */ /* common.scss */
.readOnly { .readOnly {
span, span,
button, button,
a { a {
...@@ -27,31 +28,39 @@ ...@@ -27,31 +28,39 @@
&.fa-trash[data-guid] { &.fa-trash[data-guid] {
display: none; display: none;
} }
&.fa-trash[data-id="delete"] { &.fa-trash[data-id="delete"] {
display: none; display: none;
} }
} }
&.btn[data-id="addTag"] { &.btn[data-id="addTag"] {
display: none; display: none;
} }
&.btn[data-id="addTerm"] { &.btn[data-id="addTerm"] {
display: none; display: none;
} }
&.btn[data-id="editButton"] { &.btn[data-id="editButton"] {
display: none; display: none;
} }
&.editbutton[data-id="editButton"] { &.editbutton[data-id="editButton"] {
display: none !important; display: none !important;
} }
&[data-id="delete"], &[data-id="delete"],
&[data-id="edit"] { &[data-id="edit"] {
display: none; display: none;
} }
&.btn[data-id="tagClick"] { &.btn[data-id="tagClick"] {
span { span {
display: block; display: block;
padding: 3px 5px 3px 5px; padding: 3px 5px 3px 5px;
} }
i.fa-close[data-id="deleteTag"], i.fa-close[data-id="deleteTag"],
i.fa-times[data-id="deleteTag"], i.fa-times[data-id="deleteTag"],
i.fa-times[data-id="delete"] { i.fa-times[data-id="delete"] {
...@@ -69,6 +78,7 @@ ...@@ -69,6 +78,7 @@
#sidebar-wrapper { #sidebar-wrapper {
left: 0; left: 0;
} }
#wrapper { #wrapper {
padding-left: 0px; padding-left: 0px;
} }
...@@ -93,6 +103,7 @@ pre { ...@@ -93,6 +103,7 @@ pre {
white-space: pre-wrap; white-space: pre-wrap;
/* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */ /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */
word-wrap: break-word; word-wrap: break-word;
/* IE 5.5+ */ /* IE 5.5+ */
&.code-block { &.code-block {
code { code {
...@@ -100,11 +111,14 @@ pre { ...@@ -100,11 +111,14 @@ pre {
max-height: 400px; max-height: 400px;
display: block; display: block;
overflow: auto; overflow: auto;
text-align: left;
} }
position: relative; position: relative;
overflow: hidden; overflow: hidden;
&.shrink { &.shrink {
height: 40px; height: 100px;
white-space: -moz-pre-wrap; white-space: -moz-pre-wrap;
/* Mozilla, supported since 1999 */ /* Mozilla, supported since 1999 */
white-space: -pre-wrap; white-space: -pre-wrap;
...@@ -114,51 +128,62 @@ pre { ...@@ -114,51 +128,62 @@ pre {
white-space: pre-wrap; white-space: pre-wrap;
/* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */ /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */
word-wrap: break-word; word-wrap: break-word;
/* IE 5.5+ */ /* IE 5.5+ */
code { code {
height: 40px; height: 100px;
} }
&.fixed-height { &.fixed-height {
height: 75px; height: 75px;
code { code {
height: 54px; height: 54px;
} }
} }
&.medium-height { &.medium-height {
height: 100px; height: 100px;
} }
.expand-collapse-button { .expand-collapse-button {
i:before { i:before {
content: "\f107"; content: "\f107";
} }
} }
} }
.expand-collapse-button { .expand-collapse-button {
position: absolute; position: absolute;
right: 3px; right: 3px;
top: 4px; top: 4px;
z-index: 1; z-index: 1;
i:before { i:before {
content: "\f106"; content: "\f106";
} }
} }
.json-key { .json-key {
color: brown; color: brown;
} }
.json-value { .json-value {
color: navy; color: navy;
} }
.json-string { .json-string {
color: olive; color: olive;
} }
} }
code { code {
font-family: monospace; font-family: monospace;
} }
} }
#accordion { #accordion {
.panel-default > .panel-heading{ .panel-default>.panel-heading {
cursor: pointer; cursor: pointer;
} }
} }
\ No newline at end of file
dashboardv2/public/css/scss/graph.scss
...@@ -58,6 +58,12 @@ ...@@ -58,6 +58,12 @@
transition: all 0.3s; transition: all 0.3s;
stroke-width: 1.5px; stroke-width: 1.5px;
&.node-detail-highlight {
stroke: $color_havelock_blue_approx;
stroke-width: 2px;
opacity: 0.8;
}
&.nodeImage { &.nodeImage {
&.green:hover { &.green:hover {
stroke: #ffb203; stroke: #ffb203;
...@@ -197,80 +203,6 @@ g.type-TK>rect { ...@@ -197,80 +203,6 @@ g.type-TK>rect {
height: 100%; height: 100%;
width: 100%; width: 100%;
overflow: hidden; 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 { .graph-button-group {
...@@ -283,113 +215,38 @@ g.type-TK>rect { ...@@ -283,113 +215,38 @@ g.type-TK>rect {
.box-panel { .box-panel {
position: absolute; position: absolute;
top: 45px; top: 37px;
border: 1px solid #ccc; border: 1px solid #ccc;
width: 250px; width: 250px;
max-height: 99%; max-height: 99%;
overflow: auto; overflow: auto;
transition: all 0.3s ease; transition: all 0.3s ease;
right: -273px; right: -273px;
box-shadow: 7px 1px 28px -3px; background-color: $white;
background-color: #f5f5f5;
z-index: 999; z-index: 999;
box-shadow: 1px 19px 22px -17px;
border-radius: 10px;
max-height: 88%;
.header { &.slide-from-left {
background: black; left: -273px;
color: white;
text-align: center;
margin-bottom: 15px;
position: absolute;
width: 100%;
>h4 {
padding: 0px 36px 0px 10px;
word-break: break-all;
}
.fltr-togler,
.search-togler {
position: absolute;
right: 0px; right: 0px;
top: 0px;
}
}
.body {
padding: 10px;
margin-top: 39px;
width: 100%;
position: relative;
height: 150px;
overflow: auto;
}
}
.lineage-details.node-details.open { &.size-lg {
overflow: hidden !important; left: -373px;
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 { &.size-lg {
position: fixed; width: 350px;
width: 100%;
} }
& table { &.show-box-panel {
& tbody td { right: 0px !important;
word-wrap: break-word
}
table-layout: fixed;
}
}
.lineage-details { &.slide-from-left {
position: absolute;
left: 0; 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 { .entity-list {
...@@ -415,28 +272,59 @@ g.type-TK>rect { ...@@ -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 { .btn-gray {
border: 1px solid #686868; border: 1px solid #686868;
color: $dark_gray; color: $dark_gray;
background: white; background: white;
}
.btn-gray:hover { &:hover {
border: 1px solid #686868; border: 1px solid #686868;
color: $dark_gray !important; color: $dark_gray !important;
background-color: white !important; background-color: white !important;
}
} }
span#zoom_in { span#zoom_in {
border-bottom: 1px solid #625555; border-bottom: 1px solid #625555;
} }
...@@ -485,6 +373,10 @@ span#zoom_in { ...@@ -485,6 +373,10 @@ span#zoom_in {
.lineage-box { .lineage-box {
padding: 10px !important; padding: 10px !important;
} }
.box-panel {
margin: 10px !important;
}
} }
@keyframes zoominoutsinglefeatured { @keyframes zoominoutsinglefeatured {
......
dashboardv2/public/css/scss/relationship.scss
...@@ -27,64 +27,10 @@ ...@@ -27,64 +27,10 @@
fill: none; fill: none;
stroke-width: 1.5px; stroke-width: 1.5px;
} }
}
.relationship-details { .relationship-node-details {
position: absolute; &.box-panel {
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; 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;
}
}
}
} }
} }
\ No newline at end of file
dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
<div class="box-panel filter-box"> <div class="box-panel filter-box">
<div class="header clearfix"> <div class="header clearfix">
<h4>Filters</h4> <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>
<div class="body"> <div class="body">
<div class="hideProcessContainer form-group text-left col-sm-12"> <div class="hideProcessContainer form-group text-left col-sm-12">
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
<div class="box-panel search-box"> <div class="box-panel search-box">
<div class="header clearfix"> <div class="header clearfix">
<h4>Search</h4> <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>
<div class="body"> <div class="body">
<div class="col-sm-12 no-padding"> <div class="col-sm-12 no-padding">
...@@ -67,7 +67,7 @@ ...@@ -67,7 +67,7 @@
<div class="box-panel setting-box"> <div class="box-panel setting-box">
<div class="header clearfix"> <div class="header clearfix">
<h4>Settings</h4> <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>
<div class="body"> <div class="body">
<div class="showOnlyHoverPath form-group text-left col-sm-12"> <div class="showOnlyHoverPath form-group text-left col-sm-12">
...@@ -106,6 +106,24 @@ ...@@ -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> <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> </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"> <div class="fontLoader">
<i class="fa fa-refresh fa-spin-custom"></i> <i class="fa fa-refresh fa-spin-custom"></i>
</div> </div>
...@@ -117,10 +135,4 @@ ...@@ -117,10 +135,4 @@
</div> </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="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> <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> </div>
\ No newline at end of file
dashboardv2/public/js/templates/graph/RelationshipLayoutView_tmpl.html
...@@ -15,24 +15,55 @@ ...@@ -15,24 +15,55 @@
* limitations under the License. * limitations under the License.
--> -->
<!-- <div class="graph-toolbar clearfix"></div> --> <!-- <div class="graph-toolbar clearfix"></div> -->
<div class="white-bg no-padding relationship-box"> <div class="graph-button-group form-group clearfix">
<div class="fontLoader"> <div class="btn-group pull-left">
<i class="fa fa-refresh fa-spin-custom"></i> <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>
<div class="graph-button-group pull-right"> <div class="btn-group pull-right" data-id="zoomControl">
<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_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> <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>
<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>
<svg width="100%" height="100%" viewBox="0 0 854 330" enable-background="new 0 0 854 330" xml:space="preserve"></svg> <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="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>
<!-- <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> <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> <h4 class="title"><span data-id="typeName"></span></h4>
<div class="col-md-12"> <div class="col-md-12">
<input data-id="searchNode" class="form-control form-group" placeholder="Search Entities" /> <input data-id="searchNode" class="form-control form-group" placeholder="Search Entities" />
<ul data-id="entityList" class="entity-list"></ul> <ul data-id="entityList" class="entity-list"></ul>
</div> </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> </div>
\ No newline at end of file
dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js
...@@ -419,7 +419,6 @@ define(['require', ...@@ -419,7 +419,6 @@ define(['require',
Globals.termMeanings.push(newD); Globals.termMeanings.push(newD);
} }
_.each(data, function(val) { _.each(data, function(val) {
console.log(val.guid)
if (val.relationshipStatus == "ACTIVE") { 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>'; 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/LineageLayoutView.js
...@@ -28,9 +28,10 @@ define(['require', ...@@ -28,9 +28,10 @@ define(['require',
'utils/Enums', 'utils/Enums',
'utils/UrlLinks', 'utils/UrlLinks',
'utils/Globals', 'utils/Globals',
'utils/CommonViewFunction',
'platform', 'platform',
'jquery-ui' 'jquery-ui'
], function(require, Backbone, LineageLayoutViewtmpl, VLineageList, VEntity, Utils, LineageUtils, dagreD3, d3Tip, Enums, UrlLinks, Globals, platform) { ], function(require, Backbone, LineageLayoutViewtmpl, VLineageList, VEntity, Utils, LineageUtils, dagreD3, d3Tip, Enums, UrlLinks, Globals, CommonViewFunction, platform) {
'use strict'; 'use strict';
var LineageLayoutView = Backbone.Marionette.LayoutView.extend( var LineageLayoutView = Backbone.Marionette.LayoutView.extend(
...@@ -59,9 +60,8 @@ define(['require', ...@@ -59,9 +60,8 @@ define(['require',
searchBox: '.search-box', searchBox: '.search-box',
settingBox: '.setting-box', settingBox: '.setting-box',
lineageTypeSearch: '[data-id="typeSearch"]', lineageTypeSearch: '[data-id="typeSearch"]',
lineageDetailClose: '[data-id="close"]',
searchNode: '[data-id="searchNode"]', searchNode: '[data-id="searchNode"]',
nodeEntityList: '[data-id="entityList"]', nodeDetailTable: '[data-id="nodeDetailTable"]',
showOnlyHoverPath: '[data-id="showOnlyHoverPath"]', showOnlyHoverPath: '[data-id="showOnlyHoverPath"]',
showTooltip: '[data-id="showTooltip"]' showTooltip: '[data-id="showTooltip"]'
}, },
...@@ -82,9 +82,6 @@ define(['require', ...@@ -82,9 +82,6 @@ define(['require',
events["click " + this.ui.settingToggler] = 'onClickSettingToggler'; events["click " + this.ui.settingToggler] = 'onClickSettingToggler';
events["click " + this.ui.lineageFullscreenToggler] = 'onClickLineageFullscreenToggler'; events["click " + this.ui.lineageFullscreenToggler] = 'onClickLineageFullscreenToggler';
events["click " + this.ui.searchToggler] = 'onClickSearchToggler'; events["click " + this.ui.searchToggler] = 'onClickSearchToggler';
events["click " + this.ui.lineageDetailClose] = function() {
this.toggleLineageInfomationSlider({ close: true });
};
return events; return events;
}, },
...@@ -93,7 +90,7 @@ define(['require', ...@@ -93,7 +90,7 @@ define(['require',
* @constructs * @constructs
*/ */
initialize: function(options) { initialize: function(options) {
_.extend(this, _.pick(options, 'processCheck', 'guid', 'entityDefCollection', 'actionCallBack', 'fetchCollection')); _.extend(this, _.pick(options, 'processCheck', 'guid', 'entityDefCollection', 'actionCallBack', 'fetchCollection', 'attributeDefs'));
this.collection = new VLineageList(); this.collection = new VLineageList();
this.lineageData = null; this.lineageData = null;
this.typeMap = {}; this.typeMap = {};
...@@ -174,20 +171,27 @@ define(['require', ...@@ -174,20 +171,27 @@ define(['require',
} }
this.generateData({ "relationshipMap": this.relationshipMap, "guidEntityMap": this.guidEntityMap }); this.generateData({ "relationshipMap": this.relationshipMap, "guidEntityMap": this.guidEntityMap });
}, },
toggleBoxPanel: function(el) { 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'); this.$el.find('.show-box-panel').removeClass('show-box-panel');
if (el && el.addClass) { if (el && el.addClass) {
el.addClass('show-box-panel'); el.addClass('show-box-panel');
} }
this.$('circle.node-detail-highlight').removeClass("node-detail-highlight");
},
onClickNodeToggler: function(options) {
this.toggleBoxPanel({ el: this.$('.lineage-node-detail'), nodeDetailToggler: true });
}, },
onClickFilterToggler: function() { onClickFilterToggler: function() {
this.toggleBoxPanel(this.ui.filterBox); this.toggleBoxPanel({ el: this.ui.filterBox });
}, },
onClickSettingToggler: function() { onClickSettingToggler: function() {
this.toggleBoxPanel(this.ui.settingBox); this.toggleBoxPanel({ el: this.ui.settingBox });
}, },
onClickSearchToggler: function() { onClickSearchToggler: function() {
this.toggleBoxPanel(this.ui.searchBox); this.toggleBoxPanel({ el: this.ui.searchBox });
}, },
onSelectDepthChange: function(e, options) { onSelectDepthChange: function(e, options) {
this.initializeGraph(); this.initializeGraph();
...@@ -462,15 +466,6 @@ define(['require', ...@@ -462,15 +466,6 @@ define(['require',
} }
} }
}, },
toggleInformationSlider: function(options) {
if (options.open && !this.$('.lineage-edge-details').hasClass("open")) {
this.$('.lineage-edge-details').addClass('open');
} else if (options.close && this.$('.lineage-edge-details').hasClass("open")) {
d3.selectAll('circle').attr("stroke", "none");
this.$('.lineage-edge-details').removeClass('open');
}
},
zoomed: function(that) { zoomed: function(that) {
this.$('svg').find('>g').attr("transform", this.$('svg').find('>g').attr("transform",
"translate(" + this.zoom.translate() + ")" + "translate(" + this.zoom.translate() + ")" +
...@@ -544,7 +539,7 @@ define(['require', ...@@ -544,7 +539,7 @@ define(['require',
return Utils.getEntityIconPath({ entityData: node }); return Utils.getEntityIconPath({ entityData: node });
} }
}) })
.attr("x", currentNode ? "3" : "6") .attr("x", "4")
.attr("y", currentNode ? "3" : "4") .attr("y", currentNode ? "3" : "4")
.attr("width", "40") .attr("width", "40")
.attr("height", "40") .attr("height", "40")
...@@ -691,6 +686,7 @@ define(['require', ...@@ -691,6 +686,7 @@ define(['require',
}).init(); }).init();
}) })
.on('click', function(d) { .on('click', function(d) {
var el = this;
if (d3.event.defaultPrevented) return; // ignore drag if (d3.event.defaultPrevented) return; // ignore drag
d3.event.preventDefault(); d3.event.preventDefault();
...@@ -707,16 +703,9 @@ define(['require', ...@@ -707,16 +703,9 @@ define(['require',
var currentEvent = d3.event var currentEvent = d3.event
waitForDoubleClick = setTimeout(function() { waitForDoubleClick = setTimeout(function() {
tooltip.hide(d); tooltip.hide(d);
that.toggleLineageInfomationSlider({ open: true, obj: d }); that.onClickNodeToggler({ obj: d });
svgGroup.selectAll('[data-stroke]').attr('stroke', 'none'); $(el).find('circle').addClass('node-detail-highlight');
svgGroup.selectAll('[data-stroke]').attr('stroke', function(c) { that.updateRelationshipDetails({ guid: d });
if (c == d) {
return "#316132";
} else {
return 'none';
}
})
that.updateRelationshipDetails({ obj: d });
waitForDoubleClick = null; waitForDoubleClick = null;
}, 150) }, 150)
} }
...@@ -845,60 +834,13 @@ define(['require', ...@@ -845,60 +834,13 @@ define(['require',
that.ui.lineageTypeSearch.trigger("change.select2"); that.ui.lineageTypeSearch.trigger("change.select2");
} }
}, },
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) { updateRelationshipDetails: function(options) {
var that = this; var that = this,
var lineageData; data = that.guidEntityMap[options.guid],
for (var x in that.lineageData.guidEntityMap) { typeName = data.typeName || options.guid;
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); this.$("[data-id='typeName']").text(typeName);
var getElement = function(options) { this.entityModel = new VEntity({});
var showCofig = [ this.ui.nodeDetailTable.html(CommonViewFunction.propertyTable({ scope: this, valueObject: data, attributeDefs: that.attributeDefs }));
"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; return LineageLayoutView;
......
dashboardv2/public/js/views/graph/RelationshipLayoutView.js
...@@ -22,11 +22,12 @@ define(['require', ...@@ -22,11 +22,12 @@ define(['require',
'collection/VLineageList', 'collection/VLineageList',
'models/VEntity', 'models/VEntity',
'utils/Utils', 'utils/Utils',
'utils/CommonViewFunction',
'd3-tip', 'd3-tip',
'utils/Enums', 'utils/Enums',
'utils/UrlLinks', 'utils/UrlLinks',
'platform' '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'; 'use strict';
var RelationshipLayoutView = Backbone.Marionette.LayoutView.extend( var RelationshipLayoutView = Backbone.Marionette.LayoutView.extend(
...@@ -36,14 +37,19 @@ define(['require', ...@@ -36,14 +37,19 @@ define(['require',
template: RelationshipLayoutViewtmpl, template: RelationshipLayoutViewtmpl,
className: "resizeGraph", className: "resizeGraph",
/** Layout sub regions */ /** Layout sub regions */
regions: {}, regions: {},
/** ui selector cache */ /** ui selector cache */
ui: { ui: {
relationshipDetailClose: '[data-id="close"]', 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 */ /** ui events hash */
...@@ -53,6 +59,10 @@ define(['require', ...@@ -53,6 +59,10 @@ define(['require',
this.toggleInformationSlider({ close: true }); this.toggleInformationSlider({ close: true });
}; };
events["keyup " + this.ui.searchNode] = 'searchNode'; 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; return events;
}, },
...@@ -61,7 +71,7 @@ define(['require', ...@@ -61,7 +71,7 @@ define(['require',
* @constructs * @constructs
*/ */
initialize: function(options) { 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); this.graphData = this.createData(this.entity);
}, },
createData: function(entity) { createData: function(entity) {
...@@ -85,14 +95,13 @@ define(['require', ...@@ -85,14 +95,13 @@ define(['require',
} }
return { nodes: nodes, links: links }; return { nodes: nodes, links: links };
}, },
onRender: function() { onRender: function() {},
},
onShow: function(argument) { onShow: function(argument) {
if (this.graphData && _.isEmpty(this.graphData.links)) { if (this.graphData && _.isEmpty(this.graphData.links)) {
this.noRelationship(); this.noRelationship();
} else { } else {
this.createGraph(this.graphData); this.createGraph(this.graphData);
this.createTable();
} }
}, },
noRelationship: function() { noRelationship: function() {
...@@ -106,6 +115,16 @@ define(['require', ...@@ -106,6 +115,16 @@ define(['require',
this.$('.relationship-details').removeClass('open'); 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) { searchNode: function(e) {
var $el = $(e.currentTarget); var $el = $(e.currentTarget);
this.updateRelationshipDetails(_.extend({}, $el.data(), { searchString: $el.val() })) this.updateRelationshipDetails(_.extend({}, $el.data(), { searchString: $el.val() }))
...@@ -307,16 +326,9 @@ define(['require', ...@@ -307,16 +326,9 @@ define(['require',
}) })
.on('click', function(d) { .on('click', function(d) {
if (d3.event.defaultPrevented) return; // ignore drag 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 }); that.ui.searchNode.data({ obj: d });
d3.selectAll('circle').attr("stroke", "none"); $(this).find('circle').addClass("node-detail-highlight");
d3.select('circle[typename="' + d.name + '"]').attr("stroke", function(d) {
if (d && d.value && d.value.guid == that.guid) {
return "#316132";
} else {
return activeEntityColor;
}
});
that.updateRelationshipDetails({ obj: d }); that.updateRelationshipDetails({ obj: d });
}).call(force.drag); }).call(force.drag);
...@@ -443,8 +455,26 @@ define(['require', ...@@ -443,8 +455,26 @@ define(['require',
function dragstart(d) { function dragstart(d) {
d3.select(this).classed("fixed", d.fixed = true); 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; 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