This is an automated email from the ASF dual-hosted git repository.
kbhatt pushed a commit to branch branch-1.0
in repository https://gitbox.apache.org/repos/asf/atlas.git
The following commit(s) were added to refs/heads/branch-1.0 by this push:
new 1d20e16 ATLAS-3062 : UI : Add relationship table inside relationships
tab
1d20e16 is described below
commit 1d20e16d65043580e9bbd3be64749100a9c8f3f1
Author: kevalbhatt <[email protected]>
AuthorDate: Thu Feb 28 18:51:08 2019 +0530
ATLAS-3062 : UI : Add relationship table inside relationships tab
(cherry picked from commit 786a0eaab8053693d16f731d09e7667de5d697df)
---
dashboardv2/public/css/scss/common.scss | 31 ++-
dashboardv2/public/css/scss/graph.scss | 244 ++++++---------------
dashboardv2/public/css/scss/relationship.scss | 62 +-----
.../js/templates/graph/LineageLayoutView_tmpl.html | 30 ++-
.../graph/RelationshipLayoutView_tmpl.html | 49 ++++-
.../public/js/views/graph/LineageLayoutView.js | 108 +++------
.../js/views/graph/RelationshipLayoutView.js | 64 ++++--
7 files changed, 233 insertions(+), 355 deletions(-)
diff --git a/dashboardv2/public/css/scss/common.scss
b/dashboardv2/public/css/scss/common.scss
index 65bafc3..35acc43 100644
--- a/dashboardv2/public/css/scss/common.scss
+++ b/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
diff --git a/dashboardv2/public/css/scss/graph.scss
b/dashboardv2/public/css/scss/graph.scss
index 3c4be1e..fd2867e 100644
--- a/dashboardv2/public/css/scss/graph.scss
+++ b/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 {
diff --git a/dashboardv2/public/css/scss/relationship.scss
b/dashboardv2/public/css/scss/relationship.scss
index c1112c5..a51f83c 100644
--- a/dashboardv2/public/css/scss/relationship.scss
+++ b/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
diff --git a/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html
b/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html
index c27ff8c..8e10e7f 100644
--- a/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html
+++ b/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
diff --git
a/dashboardv2/public/js/templates/graph/RelationshipLayoutView_tmpl.html
b/dashboardv2/public/js/templates/graph/RelationshipLayoutView_tmpl.html
index 3d130ec..ff43907 100644
--- a/dashboardv2/public/js/templates/graph/RelationshipLayoutView_tmpl.html
+++ b/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
diff --git a/dashboardv2/public/js/views/graph/LineageLayoutView.js
b/dashboardv2/public/js/views/graph/LineageLayoutView.js
index d252b65..c26928a 100644
--- a/dashboardv2/public/js/views/graph/LineageLayoutView.js
+++ b/dashboardv2/public/js/views/graph/LineageLayoutView.js
@@ -28,9 +28,10 @@ define(['require',
'utils/Enums',
'utils/UrlLinks',
'utils/Globals',
+ 'utils/CommonViewFunction',
'platform',
'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';
var LineageLayoutView = Backbone.Marionette.LayoutView.extend(
@@ -59,9 +60,8 @@ define(['require',
searchBox: '.search-box',
settingBox: '.setting-box',
lineageTypeSearch: '[data-id="typeSearch"]',
- lineageDetailClose: '[data-id="close"]',
searchNode: '[data-id="searchNode"]',
- nodeEntityList: '[data-id="entityList"]',
+ nodeDetailTable: '[data-id="nodeDetailTable"]',
showOnlyHoverPath: '[data-id="showOnlyHoverPath"]',
showTooltip: '[data-id="showTooltip"]'
},
@@ -82,9 +82,6 @@ define(['require',
events["click " + this.ui.settingToggler] =
'onClickSettingToggler';
events["click " + this.ui.lineageFullscreenToggler] =
'onClickLineageFullscreenToggler';
events["click " + this.ui.searchToggler] =
'onClickSearchToggler';
- events["click " + this.ui.lineageDetailClose] = function() {
- this.toggleLineageInfomationSlider({ close: true });
- };
return events;
},
@@ -93,7 +90,7 @@ define(['require',
* @constructs
*/
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.lineageData = null;
this.typeMap = {};
@@ -174,20 +171,27 @@ define(['require',
}
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');
if (el && el.addClass) {
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() {
- this.toggleBoxPanel(this.ui.filterBox);
+ this.toggleBoxPanel({ el: this.ui.filterBox });
},
onClickSettingToggler: function() {
- this.toggleBoxPanel(this.ui.settingBox);
+ this.toggleBoxPanel({ el: this.ui.settingBox });
},
onClickSearchToggler: function() {
- this.toggleBoxPanel(this.ui.searchBox);
+ this.toggleBoxPanel({ el: this.ui.searchBox });
},
onSelectDepthChange: function(e, options) {
this.initializeGraph();
@@ -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) {
this.$('svg').find('>g').attr("transform",
"translate(" + this.zoom.translate() + ")" +
@@ -544,7 +539,7 @@ define(['require',
return Utils.getEntityIconPath({ entityData:
node });
}
})
- .attr("x", currentNode ? "3" : "6")
+ .attr("x", "4")
.attr("y", currentNode ? "3" : "4")
.attr("width", "40")
.attr("height", "40")
@@ -691,6 +686,7 @@ define(['require',
}).init();
})
.on('click', function(d) {
+ var el = this;
if (d3.event.defaultPrevented) return; // ignore drag
d3.event.preventDefault();
@@ -707,16 +703,9 @@ define(['require',
var currentEvent = d3.event
waitForDoubleClick = setTimeout(function() {
tooltip.hide(d);
- 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 });
+ that.onClickNodeToggler({ obj: d });
+
$(el).find('circle').addClass('node-detail-highlight');
+ that.updateRelationshipDetails({ guid: d });
waitForDoubleClick = null;
}, 150)
}
@@ -845,60 +834,13 @@ define(['require',
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) {
- 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 = "";
+ var that = this,
+ data = that.guidEntityMap[options.guid],
+ typeName = data.typeName || options.guid;
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);
+ this.entityModel = new VEntity({});
+
this.ui.nodeDetailTable.html(CommonViewFunction.propertyTable({ scope: this,
valueObject: data, attributeDefs: that.attributeDefs }));
}
});
return LineageLayoutView;
diff --git a/dashboardv2/public/js/views/graph/RelationshipLayoutView.js
b/dashboardv2/public/js/views/graph/RelationshipLayoutView.js
index ba0ea62..aba3a41 100644
--- a/dashboardv2/public/js/views/graph/RelationshipLayoutView.js
+++ b/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
