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 2021/02/09 11:11:33 UTC
[atlas] branch master updated: Atlas-4113:UI:Entity Lineage Details
Box layout rendering and centring issue fixed
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 2152ae1 Atlas-4113:UI:Entity Lineage Details Box layout rendering and centring issue fixed
2152ae1 is described below
commit 2152ae16a1464963de0ceda03a84263bfbbbca5e
Author: prasad pawar <pr...@freestoneinfotech.com>
AuthorDate: Tue Feb 9 11:23:06 2021 +0530
Atlas-4113:UI:Entity Lineage Details Box layout rendering and centring issue fixed
Signed-off-by: nixonrodrigues <ni...@apache.org>
---
dashboardv2/public/css/scss/graph.scss | 30 ++++++++++++--------
.../js/external_lib/atlas-lineage/dist/index.js | 2 +-
.../js/external_lib/atlas-lineage/dist/styles.css | 2 +-
.../js/templates/graph/LineageLayoutView_tmpl.html | 10 ++++++-
.../templates/graph/TypeSystemTreeView_tmpl.html | 10 ++++++-
.../public/js/views/graph/LineageLayoutView.js | 25 ++++++++++++++++-
.../public/js/views/graph/TypeSystemTreeView.js | 23 ++++++++++++++++
dashboardv3/public/css/scss/graph.scss | 32 +++++++++++++---------
.../js/external_lib/atlas-lineage/dist/index.js | 2 +-
.../js/external_lib/atlas-lineage/dist/styles.css | 2 +-
.../js/templates/graph/LineageLayoutView_tmpl.html | 10 ++++++-
.../templates/graph/TypeSystemTreeView_tmpl.html | 10 ++++++-
.../public/js/views/graph/LineageLayoutView.js | 25 ++++++++++++++++-
.../public/js/views/graph/TypeSystemTreeView.js | 23 ++++++++++++++++
14 files changed, 172 insertions(+), 34 deletions(-)
diff --git a/dashboardv2/public/css/scss/graph.scss b/dashboardv2/public/css/scss/graph.scss
index 19636c5..a369841 100644
--- a/dashboardv2/public/css/scss/graph.scss
+++ b/dashboardv2/public/css/scss/graph.scss
@@ -199,6 +199,7 @@ span#zoom_in {
.systemTypeTree {
height: 100vh !important;
+ padding: 10px;
}
.resizeGraph {
@@ -270,32 +271,39 @@ span#zoom_in {
.box-panel.fix-box {
- position: fixed;
- top: 0;
+ position: absolute;
+ top: 37px;
right: 0;
bottom: 0;
- height: 100vh;
- max-height: 100vh;
+ height: auto;
+ max-height: initial;
z-index: 999;
bottom: 0;
width: 400px;
- overflow: auto;
- border-radius: 0px;
+ overflow: hidden;
+ border-radius: 10px;
margin: 0 !important;
- &.slide-from-left.size-lg {
- left: -413px;
+ &.slide-from-right.size-lg {
+ right: -413px;
&.show-box-panel {
- left: 0;
- margin: 0 !important;
+ right: 0px;
}
}
.body {
+
+ position: relative;
+
+ table{
+ position: relative;
+ height: 100%;
+ }
tbody {
overflow: auto;
- height: calc(100vh - 48px);
+ height: auto;
+ display: block;
position: absolute;
padding-bottom: 15px;
}
diff --git a/dashboardv2/public/js/external_lib/atlas-lineage/dist/index.js b/dashboardv2/public/js/external_lib/atlas-lineage/dist/index.js
index e82cb48..0b896fb 100644
--- a/dashboardv2/public/js/external_lib/atlas-lineage/dist/index.js
+++ b/dashboardv2/public/js/external_lib/atlas-lineage/dist/index.js
@@ -1 +1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("platform"),require("dagreD3")):"function"==typeof define&&define.amd?define(["platform","dagreD3"],e):"object"==typeof exports?exports.LineageHelper=e(require("platform"),require("dagreD3")):t.LineageHelper=e(t.platform,t.dagreD3)}(window,(function(t,e){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var i=e[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,n),i. [...]
\ No newline at end of file
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("platform"),require("dagreD3")):"function"==typeof define&&define.amd?define(["platform","dagreD3"],e):"object"==typeof exports?exports.LineageHelper=e(require("platform"),require("dagreD3")):t.LineageHelper=e(t.platform,t.dagreD3)}(window,(function(t,e){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var i=e[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,n),i. [...]
\ No newline at end of file
diff --git a/dashboardv2/public/js/external_lib/atlas-lineage/dist/styles.css b/dashboardv2/public/js/external_lib/atlas-lineage/dist/styles.css
index 2cd29ed..2d7f9d9 100644
--- a/dashboardv2/public/js/external_lib/atlas-lineage/dist/styles.css
+++ b/dashboardv2/public/js/external_lib/atlas-lineage/dist/styles.css
@@ -1,2 +1,2 @@
-.node{cursor:pointer}.node text{font-size:10px;font-family:sans-serif}.node rect{stroke:#999;fill:#fff;stroke-width:1.5px}.node rect.serach-rect{stroke:#37bb9b;fill:transparent;stroke-width:2.5px}.node .label{fill:#868686}.node .label.highlight{cursor:pointer;fill:#4a90e2;text-decoration:underline}.node .label.highlight tspan{font-weight:400}.node circle{-moz-transition:all 0.3s;-webkit-transition:all 0.3s;transition:all 0.3s;stroke-width:1.5px}.node circle.node-detail-highlight{stroke:# [...]
+.node{cursor:pointer}.node text{font-size:10px;font-family:sans-serif}.node .label{fill:#868686}.node .label.highlight{cursor:pointer;fill:#4a90e2;text-decoration:underline}.node .label.highlight tspan{font-weight:400}.node circle{-moz-transition:all 0.3s;-webkit-transition:all 0.3s;transition:all 0.3s;stroke-width:1.5px}.node circle.node-detail-highlight{stroke:#4a90e2;stroke-width:2px}.node circle.nodeImage.green:hover{stroke:#ffb203}.node circle.nodeImage.blue:hover{stroke:#4b91e2}.no [...]
diff --git a/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html b/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html
index f6f61e2..5f90b09 100644
--- a/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html
+++ b/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html
@@ -86,6 +86,14 @@
</div>
</div>
</div>
+ <div class="showTooltip form-group text-left col-sm-12">
+ <div class="pretty p-switch p-fill">
+ <input type="checkbox" class="pull-left" data-id="labelFullName" value="" id="labelFullName"/>
+ <div class="state p-primary">
+ <label>Display fullname</label>
+ </div>
+ </div>
+ </div>
</div>
</div>
<div class="graph-button-group pull-right">
@@ -130,7 +138,7 @@
<div class="legends pull-left" style="height: 25px; padding: 2px;"></div>
<div class="svg" style="height: 100%; width: 100%"></div>
</div>
-<div class="box-panel size-lg slide-from-left lineage-node-detail fix-box">
+<div class="box-panel size-lg slide-from-right lineage-node-detail fix-box">
<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>
diff --git a/dashboardv2/public/js/templates/graph/TypeSystemTreeView_tmpl.html b/dashboardv2/public/js/templates/graph/TypeSystemTreeView_tmpl.html
index 005c061..3b4a67e 100644
--- a/dashboardv2/public/js/templates/graph/TypeSystemTreeView_tmpl.html
+++ b/dashboardv2/public/js/templates/graph/TypeSystemTreeView_tmpl.html
@@ -15,7 +15,7 @@
* limitations under the License.
-->
<div id="typeSystemTreeViewPage" data-id="typeSystemTreeViewPage" class="systemTypeTree" style="height: calc(100vh - 180px); width: 100%; position: relative;overflow: hidden;">
- <div class="box-panel size-lg type-node-details fix-box slide-from-left lineage-node-detail">
+ <div class="box-panel size-lg type-node-details fix-box slide-from-right lineage-node-detail">
<div class="header clearfix">
<div class="typeDetailHeader">
<h4 style="padding-right: 67px;"><span data-id="typeName"></span></h4>
@@ -94,6 +94,14 @@
</div>
</div>
</div>
+ <div class="showTooltip form-group text-left col-sm-12">
+ <div class="pretty p-switch p-fill">
+ <input type="checkbox" class="pull-left" data-id="labelFullName" value="" id="labelFullName"/>
+ <div class="state p-primary">
+ <label>Display fullname</label>
+ </div>
+ </div>
+ </div>
</div>
</div>
<div class="graph-button-group pull-right">
diff --git a/dashboardv2/public/js/views/graph/LineageLayoutView.js b/dashboardv2/public/js/views/graph/LineageLayoutView.js
index aa26580..d933241 100644
--- a/dashboardv2/public/js/views/graph/LineageLayoutView.js
+++ b/dashboardv2/public/js/views/graph/LineageLayoutView.js
@@ -68,6 +68,7 @@ define(['require',
saveSvg: '[data-id="saveSvg"]',
resetLineage: '[data-id="resetLineage"]',
onZoomIn: '[data-id="zoom-in"]',
+ labelFullName: '[data-id="labelFullName"]',
onZoomOut: '[data-id="zoom-out"]'
},
templateHelpers: function() {
@@ -91,6 +92,7 @@ define(['require',
events["click " + this.ui.resetLineage] = 'onClickResetLineage';
events["click " + this.ui.onZoomIn] = 'onClickZoomIn';
events["click " + this.ui.onZoomOut] = 'onClickZoomOut';
+ events["change " + this.ui.labelFullName] = "onClickLabelFullName";
return events;
},
@@ -112,11 +114,12 @@ define(['require',
this.searchNodeObj = {
selectedNode: ''
}
+ this.labelFullText = false;
},
onRender: function() {
var that = this;
this.ui.searchToggler.prop("disabled", true);
- this.$graphButtonsEl = this.$(".graph-button-group button,select[data-id='selectDepth']")
+ this.$graphButtonsEl = this.$(".graph-button-group button, select[data-id='selectDepth']")
this.fetchGraphData();
if (this.layoutRendered) {
this.layoutRendered();
@@ -157,6 +160,7 @@ define(['require',
width: node.width,
height: node.height
});
+ this.calculateLineageDetailPanelHeight();
},
onCheckUnwantedEntity: function(e) {
var that = this;
@@ -217,6 +221,8 @@ define(['require',
this.LineageHelperRef.refresh();
this.searchNodeObj.selectedNode = "";
this.ui.lineageTypeSearch.data({ refresh: true }).val("").trigger("change");
+ this.ui.labelFullName.prop("checked", false);
+ this.labelFullText = false;
},
onClickSaveSvg: function(e, a) {
this.LineageHelperRef.exportLineage();
@@ -227,6 +233,10 @@ define(['require',
onClickZoomOut: function() {
this.LineageHelperRef.zoomOut();
},
+ onClickLabelFullName: function() {
+ this.labelFullText = !this.labelFullText;
+ this.LineageHelperRef.displayFullName({ bLabelFullText : this.labelFullText });
+ },
fetchGraphData: function(options) {
var that = this,
queryParam = options && options.queryParam || {};
@@ -290,6 +300,7 @@ define(['require',
onNodeClick: function(d) {
that.onClickNodeToggler();
that.updateRelationshipDetails({ guid: d.clickedData });
+ that.calculateLineageDetailPanelHeight();
},
onLabelClick: function(d) {
var guid = d.clickedData;
@@ -418,6 +429,18 @@ define(['require',
"attributeDefs": attributeDefs,
"sortBy": false
}));
+ },
+ calculateLineageDetailPanelHeight: function(){
+ var $parentContainer = $('#tab-lineage .resizeGraph'),
+ $panel = $parentContainer.find('.fix-box');
+ var $parentHeight = $parentContainer.find('.fix-box, tbody').removeAttr('style').height() - 48, // 48px is the Panels top from the parent container
+ $tBody = $panel.find('tbody'),
+ panelHeight = $tBody.height() + 100;
+ if($parentHeight < panelHeight){
+ panelHeight = $parentHeight;
+ }
+ $panel.css('height', panelHeight + 'px');
+ $tBody.css('height', '100%');
}
});
return LineageLayoutView;
diff --git a/dashboardv2/public/js/views/graph/TypeSystemTreeView.js b/dashboardv2/public/js/views/graph/TypeSystemTreeView.js
index 90734a4..935cae0 100644
--- a/dashboardv2/public/js/views/graph/TypeSystemTreeView.js
+++ b/dashboardv2/public/js/views/graph/TypeSystemTreeView.js
@@ -66,6 +66,7 @@ define([
filterToggler: '[data-id="filter-toggler"]',
settingToggler: '[data-id="setting-toggler"]',
searchToggler: '[data-id="search-toggler"]',
+ labelFullName: '[data-id="labelFullName"]',
reset: '[data-id="reset"]',
fullscreenToggler: '[data-id="fullScreen-toggler"]',
noValueToggle: "[data-id='noValueToggle']",
@@ -85,6 +86,7 @@ define([
events["click " + this.ui.saveSvg] = 'onClickSaveSvg';
events["click " + this.ui.fullscreenToggler] = "onClickFullscreenToggler";
events["click " + this.ui.reset] = "onClickReset";
+ events["change " + this.ui.labelFullName] = "onClickLabelFullName";
events["click " + this.ui.noValueToggle] = function() {
this.showAllProperties = !this.showAllProperties;
this.ui.noValueToggle.attr("data-original-title", (this.showAllProperties ? "Hide" : "Show") + " empty values");
@@ -101,6 +103,7 @@ define([
*/
initialize: function(options) {
_.extend(this, _.pick(options, "entityDefCollection"));
+ this.labelFullText = false;
},
onShow: function() {
this.$(".fontLoader").show();
@@ -324,10 +327,16 @@ define([
onClickSearchToggler: function() {
this.toggleBoxPanel({ el: this.ui.searchBox });
},
+ onClickLabelFullName: function() {
+ this.labelFullText = !this.labelFullText;
+ this.LineageHelperRef.displayFullName({ bLabelFullText : this.labelFullText });
+ },
onClickReset: function() {
this.fetchGraphData({ refresh: true });
this.ui.typeSearch.data({ refresh: true }).val("").trigger("change");
this.ui.filterServiceType.data({ refresh: true }).val("").trigger("change");
+ this.ui.labelFullName.prop("checked", false);
+ this.labelFullText = false;
},
onClickSaveSvg: function(e, a) {
this.LineageHelperRef.exportLineage({ downloadFileName: "TypeSystemView" });
@@ -347,6 +356,7 @@ define([
width: node.width,
height: node.height
});
+ this.calculateLineageDetailPanelHeight();
},
updateDetails: function(data) {
this.$("[data-id='typeName']").text(Utils.getName(data));
@@ -429,6 +439,7 @@ define([
onNodeClick: function(d) {
that.onClickNodeToggler();
that.updateDetails(that.LineageHelperRef.getNode(d.clickedData, true));
+ that.calculateLineageDetailPanelHeight();
},
beforeRender: function() {
that.$(".fontLoader").show();
@@ -497,6 +508,18 @@ define([
}
});
}
+ },
+ calculateLineageDetailPanelHeight: function(){
+ this.ui.typeSystemTreeViewPage.find('tbody').removeAttr('style');
+ var $panel = this.ui.typeSystemTreeViewPage.find('.fix-box'),
+ $parentHeight = this.ui.typeSystemTreeViewPage.height() - 48, // 48px is the Panels top from the parent container
+ $tBody = $panel.find('tbody'),
+ panelHeight = $tBody.height() + 37; //37px is height of Panel Header
+ if($parentHeight < panelHeight){
+ panelHeight = $parentHeight;
+ }
+ $panel.css('height', panelHeight + 'px');
+ $tBody.css('height', '100%');
}
});
return TypeSystemTreeView;
diff --git a/dashboardv3/public/css/scss/graph.scss b/dashboardv3/public/css/scss/graph.scss
index ee774ce..519dc6d 100644
--- a/dashboardv3/public/css/scss/graph.scss
+++ b/dashboardv3/public/css/scss/graph.scss
@@ -162,8 +162,6 @@
}
}
-
-
span#zoom_in {
border-bottom: 1px solid #625555;
}
@@ -203,6 +201,7 @@ span#zoom_in {
.systemTypeTree {
height: 100vh !important;
+ padding: 10px;
}
.resizeGraph {
@@ -281,32 +280,39 @@ span#zoom_in {
.box-panel.fix-box {
- position: fixed;
- top: 0;
+ position: absolute;
+ top: 37px;
right: 0;
bottom: 0;
- height: 100vh;
- max-height: 100vh;
+ height: auto;
+ max-height: initial;
z-index: 999;
bottom: 0;
width: 400px;
- overflow: auto;
- border-radius: 0px;
+ overflow: hidden;
+ border-radius: 10px;
margin: 0 !important;
- &.slide-from-left.size-lg {
- left: -413px;
+ &.slide-from-right.size-lg {
+ right: -413px;
&.show-box-panel {
- left: 0;
- margin: 0 !important;
+ right: 0px;
}
}
.body {
+
+ position: relative;
+
+ table{
+ position: relative;
+ height: 100%;
+ }
tbody {
overflow: auto;
- height: calc(100vh - 48px);
+ height: auto;
+ display: block;
position: absolute;
padding-bottom: 15px;
}
diff --git a/dashboardv3/public/js/external_lib/atlas-lineage/dist/index.js b/dashboardv3/public/js/external_lib/atlas-lineage/dist/index.js
index e82cb48..d90d022 100644
--- a/dashboardv3/public/js/external_lib/atlas-lineage/dist/index.js
+++ b/dashboardv3/public/js/external_lib/atlas-lineage/dist/index.js
@@ -1 +1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("platform"),require("dagreD3")):"function"==typeof define&&define.amd?define(["platform","dagreD3"],e):"object"==typeof exports?exports.LineageHelper=e(require("platform"),require("dagreD3")):t.LineageHelper=e(t.platform,t.dagreD3)}(window,(function(t,e){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var i=e[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,n),i. [...]
\ No newline at end of file
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("platform"),require("dagreD3")):"function"==typeof define&&define.amd?define(["platform","dagreD3"],e):"object"==typeof exports?exports.LineageHelper=e(require("platform"),require("dagreD3")):t.LineageHelper=e(t.platform,t.dagreD3)}(window,(function(t,e){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var i=e[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,n),i. [...]
\ No newline at end of file
diff --git a/dashboardv3/public/js/external_lib/atlas-lineage/dist/styles.css b/dashboardv3/public/js/external_lib/atlas-lineage/dist/styles.css
index 2cd29ed..2d7f9d9 100644
--- a/dashboardv3/public/js/external_lib/atlas-lineage/dist/styles.css
+++ b/dashboardv3/public/js/external_lib/atlas-lineage/dist/styles.css
@@ -1,2 +1,2 @@
-.node{cursor:pointer}.node text{font-size:10px;font-family:sans-serif}.node rect{stroke:#999;fill:#fff;stroke-width:1.5px}.node rect.serach-rect{stroke:#37bb9b;fill:transparent;stroke-width:2.5px}.node .label{fill:#868686}.node .label.highlight{cursor:pointer;fill:#4a90e2;text-decoration:underline}.node .label.highlight tspan{font-weight:400}.node circle{-moz-transition:all 0.3s;-webkit-transition:all 0.3s;transition:all 0.3s;stroke-width:1.5px}.node circle.node-detail-highlight{stroke:# [...]
+.node{cursor:pointer}.node text{font-size:10px;font-family:sans-serif}.node .label{fill:#868686}.node .label.highlight{cursor:pointer;fill:#4a90e2;text-decoration:underline}.node .label.highlight tspan{font-weight:400}.node circle{-moz-transition:all 0.3s;-webkit-transition:all 0.3s;transition:all 0.3s;stroke-width:1.5px}.node circle.node-detail-highlight{stroke:#4a90e2;stroke-width:2px}.node circle.nodeImage.green:hover{stroke:#ffb203}.node circle.nodeImage.blue:hover{stroke:#4b91e2}.no [...]
diff --git a/dashboardv3/public/js/templates/graph/LineageLayoutView_tmpl.html b/dashboardv3/public/js/templates/graph/LineageLayoutView_tmpl.html
index f6f61e2..5f90b09 100644
--- a/dashboardv3/public/js/templates/graph/LineageLayoutView_tmpl.html
+++ b/dashboardv3/public/js/templates/graph/LineageLayoutView_tmpl.html
@@ -86,6 +86,14 @@
</div>
</div>
</div>
+ <div class="showTooltip form-group text-left col-sm-12">
+ <div class="pretty p-switch p-fill">
+ <input type="checkbox" class="pull-left" data-id="labelFullName" value="" id="labelFullName"/>
+ <div class="state p-primary">
+ <label>Display fullname</label>
+ </div>
+ </div>
+ </div>
</div>
</div>
<div class="graph-button-group pull-right">
@@ -130,7 +138,7 @@
<div class="legends pull-left" style="height: 25px; padding: 2px;"></div>
<div class="svg" style="height: 100%; width: 100%"></div>
</div>
-<div class="box-panel size-lg slide-from-left lineage-node-detail fix-box">
+<div class="box-panel size-lg slide-from-right lineage-node-detail fix-box">
<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>
diff --git a/dashboardv3/public/js/templates/graph/TypeSystemTreeView_tmpl.html b/dashboardv3/public/js/templates/graph/TypeSystemTreeView_tmpl.html
index 005c061..3b4a67e 100644
--- a/dashboardv3/public/js/templates/graph/TypeSystemTreeView_tmpl.html
+++ b/dashboardv3/public/js/templates/graph/TypeSystemTreeView_tmpl.html
@@ -15,7 +15,7 @@
* limitations under the License.
-->
<div id="typeSystemTreeViewPage" data-id="typeSystemTreeViewPage" class="systemTypeTree" style="height: calc(100vh - 180px); width: 100%; position: relative;overflow: hidden;">
- <div class="box-panel size-lg type-node-details fix-box slide-from-left lineage-node-detail">
+ <div class="box-panel size-lg type-node-details fix-box slide-from-right lineage-node-detail">
<div class="header clearfix">
<div class="typeDetailHeader">
<h4 style="padding-right: 67px;"><span data-id="typeName"></span></h4>
@@ -94,6 +94,14 @@
</div>
</div>
</div>
+ <div class="showTooltip form-group text-left col-sm-12">
+ <div class="pretty p-switch p-fill">
+ <input type="checkbox" class="pull-left" data-id="labelFullName" value="" id="labelFullName"/>
+ <div class="state p-primary">
+ <label>Display fullname</label>
+ </div>
+ </div>
+ </div>
</div>
</div>
<div class="graph-button-group pull-right">
diff --git a/dashboardv3/public/js/views/graph/LineageLayoutView.js b/dashboardv3/public/js/views/graph/LineageLayoutView.js
index aa26580..d933241 100644
--- a/dashboardv3/public/js/views/graph/LineageLayoutView.js
+++ b/dashboardv3/public/js/views/graph/LineageLayoutView.js
@@ -68,6 +68,7 @@ define(['require',
saveSvg: '[data-id="saveSvg"]',
resetLineage: '[data-id="resetLineage"]',
onZoomIn: '[data-id="zoom-in"]',
+ labelFullName: '[data-id="labelFullName"]',
onZoomOut: '[data-id="zoom-out"]'
},
templateHelpers: function() {
@@ -91,6 +92,7 @@ define(['require',
events["click " + this.ui.resetLineage] = 'onClickResetLineage';
events["click " + this.ui.onZoomIn] = 'onClickZoomIn';
events["click " + this.ui.onZoomOut] = 'onClickZoomOut';
+ events["change " + this.ui.labelFullName] = "onClickLabelFullName";
return events;
},
@@ -112,11 +114,12 @@ define(['require',
this.searchNodeObj = {
selectedNode: ''
}
+ this.labelFullText = false;
},
onRender: function() {
var that = this;
this.ui.searchToggler.prop("disabled", true);
- this.$graphButtonsEl = this.$(".graph-button-group button,select[data-id='selectDepth']")
+ this.$graphButtonsEl = this.$(".graph-button-group button, select[data-id='selectDepth']")
this.fetchGraphData();
if (this.layoutRendered) {
this.layoutRendered();
@@ -157,6 +160,7 @@ define(['require',
width: node.width,
height: node.height
});
+ this.calculateLineageDetailPanelHeight();
},
onCheckUnwantedEntity: function(e) {
var that = this;
@@ -217,6 +221,8 @@ define(['require',
this.LineageHelperRef.refresh();
this.searchNodeObj.selectedNode = "";
this.ui.lineageTypeSearch.data({ refresh: true }).val("").trigger("change");
+ this.ui.labelFullName.prop("checked", false);
+ this.labelFullText = false;
},
onClickSaveSvg: function(e, a) {
this.LineageHelperRef.exportLineage();
@@ -227,6 +233,10 @@ define(['require',
onClickZoomOut: function() {
this.LineageHelperRef.zoomOut();
},
+ onClickLabelFullName: function() {
+ this.labelFullText = !this.labelFullText;
+ this.LineageHelperRef.displayFullName({ bLabelFullText : this.labelFullText });
+ },
fetchGraphData: function(options) {
var that = this,
queryParam = options && options.queryParam || {};
@@ -290,6 +300,7 @@ define(['require',
onNodeClick: function(d) {
that.onClickNodeToggler();
that.updateRelationshipDetails({ guid: d.clickedData });
+ that.calculateLineageDetailPanelHeight();
},
onLabelClick: function(d) {
var guid = d.clickedData;
@@ -418,6 +429,18 @@ define(['require',
"attributeDefs": attributeDefs,
"sortBy": false
}));
+ },
+ calculateLineageDetailPanelHeight: function(){
+ var $parentContainer = $('#tab-lineage .resizeGraph'),
+ $panel = $parentContainer.find('.fix-box');
+ var $parentHeight = $parentContainer.find('.fix-box, tbody').removeAttr('style').height() - 48, // 48px is the Panels top from the parent container
+ $tBody = $panel.find('tbody'),
+ panelHeight = $tBody.height() + 100;
+ if($parentHeight < panelHeight){
+ panelHeight = $parentHeight;
+ }
+ $panel.css('height', panelHeight + 'px');
+ $tBody.css('height', '100%');
}
});
return LineageLayoutView;
diff --git a/dashboardv3/public/js/views/graph/TypeSystemTreeView.js b/dashboardv3/public/js/views/graph/TypeSystemTreeView.js
index 90734a4..935cae0 100644
--- a/dashboardv3/public/js/views/graph/TypeSystemTreeView.js
+++ b/dashboardv3/public/js/views/graph/TypeSystemTreeView.js
@@ -66,6 +66,7 @@ define([
filterToggler: '[data-id="filter-toggler"]',
settingToggler: '[data-id="setting-toggler"]',
searchToggler: '[data-id="search-toggler"]',
+ labelFullName: '[data-id="labelFullName"]',
reset: '[data-id="reset"]',
fullscreenToggler: '[data-id="fullScreen-toggler"]',
noValueToggle: "[data-id='noValueToggle']",
@@ -85,6 +86,7 @@ define([
events["click " + this.ui.saveSvg] = 'onClickSaveSvg';
events["click " + this.ui.fullscreenToggler] = "onClickFullscreenToggler";
events["click " + this.ui.reset] = "onClickReset";
+ events["change " + this.ui.labelFullName] = "onClickLabelFullName";
events["click " + this.ui.noValueToggle] = function() {
this.showAllProperties = !this.showAllProperties;
this.ui.noValueToggle.attr("data-original-title", (this.showAllProperties ? "Hide" : "Show") + " empty values");
@@ -101,6 +103,7 @@ define([
*/
initialize: function(options) {
_.extend(this, _.pick(options, "entityDefCollection"));
+ this.labelFullText = false;
},
onShow: function() {
this.$(".fontLoader").show();
@@ -324,10 +327,16 @@ define([
onClickSearchToggler: function() {
this.toggleBoxPanel({ el: this.ui.searchBox });
},
+ onClickLabelFullName: function() {
+ this.labelFullText = !this.labelFullText;
+ this.LineageHelperRef.displayFullName({ bLabelFullText : this.labelFullText });
+ },
onClickReset: function() {
this.fetchGraphData({ refresh: true });
this.ui.typeSearch.data({ refresh: true }).val("").trigger("change");
this.ui.filterServiceType.data({ refresh: true }).val("").trigger("change");
+ this.ui.labelFullName.prop("checked", false);
+ this.labelFullText = false;
},
onClickSaveSvg: function(e, a) {
this.LineageHelperRef.exportLineage({ downloadFileName: "TypeSystemView" });
@@ -347,6 +356,7 @@ define([
width: node.width,
height: node.height
});
+ this.calculateLineageDetailPanelHeight();
},
updateDetails: function(data) {
this.$("[data-id='typeName']").text(Utils.getName(data));
@@ -429,6 +439,7 @@ define([
onNodeClick: function(d) {
that.onClickNodeToggler();
that.updateDetails(that.LineageHelperRef.getNode(d.clickedData, true));
+ that.calculateLineageDetailPanelHeight();
},
beforeRender: function() {
that.$(".fontLoader").show();
@@ -497,6 +508,18 @@ define([
}
});
}
+ },
+ calculateLineageDetailPanelHeight: function(){
+ this.ui.typeSystemTreeViewPage.find('tbody').removeAttr('style');
+ var $panel = this.ui.typeSystemTreeViewPage.find('.fix-box'),
+ $parentHeight = this.ui.typeSystemTreeViewPage.height() - 48, // 48px is the Panels top from the parent container
+ $tBody = $panel.find('tbody'),
+ panelHeight = $tBody.height() + 37; //37px is height of Panel Header
+ if($parentHeight < panelHeight){
+ panelHeight = $parentHeight;
+ }
+ $panel.css('height', panelHeight + 'px');
+ $tBody.css('height', '100%');
}
});
return TypeSystemTreeView;