You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@atlas.apache.org by kb...@apache.org on 2019/01/03 09:57:56 UTC
[2/2] atlas git commit: provide Full screen support for lineage
provide Full screen support for lineage
Project: http://git-wip-us.apache.org/repos/asf/atlas/repo
Commit: http://git-wip-us.apache.org/repos/asf/atlas/commit/41b48c82
Tree: http://git-wip-us.apache.org/repos/asf/atlas/tree/41b48c82
Diff: http://git-wip-us.apache.org/repos/asf/atlas/diff/41b48c82
Branch: refs/heads/branch-0.8
Commit: 41b48c82f6142c37d0d734348911648108be866d
Parents: c62934a
Author: Abhishek Kadam <ab...@gmail.com>
Authored: Wed Jan 2 17:06:32 2019 +0530
Committer: kevalbhatt <kb...@apache.org>
Committed: Thu Jan 3 15:27:01 2019 +0530
----------------------------------------------------------------------
dashboardv2/public/css/scss/form.scss | 7 +++
dashboardv2/public/css/scss/graph.scss | 58 +++++++++++++-------
.../detail_page/DetailPageLayoutView_tmpl.html | 49 ++---------------
.../templates/graph/LineageLayoutView_tmpl.html | 17 +++---
dashboardv2/public/js/utils/Utils.js | 37 -------------
.../views/detail_page/DetailPageLayoutView.js | 46 +---------------
.../public/js/views/graph/LineageLayoutView.js | 25 +++++++--
7 files changed, 83 insertions(+), 156 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/atlas/blob/41b48c82/dashboardv2/public/css/scss/form.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/form.scss b/dashboardv2/public/css/scss/form.scss
index 694e885..48d4b47 100644
--- a/dashboardv2/public/css/scss/form.scss
+++ b/dashboardv2/public/css/scss/form.scss
@@ -337,6 +337,13 @@ button:focus {
}
}
+.btn-group {
+ .btn-atlas,
+ .btn-action {
+ margin: 0px;
+ }
+}
+
.pagination>.active {
>a {
background-color: $color_curious_blue_approx;
http://git-wip-us.apache.org/repos/asf/atlas/blob/41b48c82/dashboardv2/public/css/scss/graph.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/graph.scss b/dashboardv2/public/css/scss/graph.scss
index 23a1904..b84d59e 100644
--- a/dashboardv2/public/css/scss/graph.scss
+++ b/dashboardv2/public/css/scss/graph.scss
@@ -185,6 +185,10 @@ g.type-TK>rect {
}
.lineage-box {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ overflow: hidden;
.lineage-edge-details {
position: absolute;
left: 0;
@@ -261,22 +265,10 @@ g.type-TK>rect {
}
.graph-button-group {
- position: absolute;
- top: 5px;
- right: 5px;
-
- .zoom-button-group {
- margin-top: 8px;
- border: 1px solid;
- border-radius: 5px;
- background-color: white;
-
- [type="button"] {
- display: block;
- padding: 2px 6px;
- cursor: pointer;
- }
+ &>div {
+ display: inline-block;
}
+ .zoom-button-group {}
}
.lineage-fltr-panel {
@@ -287,9 +279,8 @@ g.type-TK>rect {
overflow: auto;
transition: all 0.3s ease;
right: -273px;
- box-shadow: 9px -14px 26px 6px;
+ box-shadow: 7px 1px 28px -3px;
background-color: #f5f5f5;
- //color: $white;
z-index: 999;
.header {
@@ -336,7 +327,7 @@ g.type-TK>rect {
.btn-gray:hover {
border: 1px solid #686868;
color: $dark_gray !important;
- background-color: transparent !important;
+ background-color: white !important;
}
@@ -344,11 +335,40 @@ span#zoom_in {
border-bottom: 1px solid #625555;
}
-.depthContainer {
+.depth-container {
//display: inline-block;
//margin-top: 3px;
.inline {
display: inline-block;
}
+}
+
+.resizeGraph {
+ position: relative;
+ width: 100%;
+ height: 64vh;
+}
+
+.active.fullscreen-mode {
+ position: fixed;
+ height: 100% !important;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ right: 0;
+ padding: 0 !important;
+ z-index: 999;
+ overflow: hidden !important;
+ .resizeGraph {
+ position: fixed;
+ height: 100% !important;
+ .ui-resizable-handle {
+ display: none;
+ }
+ }
+ .lineage-box {
+ padding: 10px !important;
+ }
}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/atlas/blob/41b48c82/dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html b/dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
index 1d0ece3..e217c48 100644
--- a/dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
+++ b/dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
@@ -68,11 +68,9 @@
</div>
</div>
<div id="tab-lineage" role="lineage" class="tab-pane">
- <div class="resizeGraph animated position-relative" align="center" style="height:64vh;">
- <div id="r_lineageLayoutView">
- <div class="fontLoader">
- <i class="fa fa-refresh fa-spin-custom"></i>
- </div>
+ <div id="r_lineageLayoutView" class="resizeGraph animated position-relative" align="center">
+ <div class="fontLoader">
+ <i class="fa fa-refresh fa-spin-custom"></i>
</div>
</div>
</div>
@@ -118,43 +116,4 @@
</div>
</div>
</div>
-</div>
-</div>
-<!-- <div class="row">
- <div class="col-sm-custom">
- <div class="">
- <div class="lineageLayout">
- <div class="panel panel-default" id="panel">
- <div class="panel-heading clearfix">
- <h4 class="panel-title pull-left"> LINEAGE & IMPACT</h4>
- <div class="btn-group pull-right">
- <button type="button" class="fullscreen_panel" id="fullscreen_panel" title="Fullscreen"><i class="fa fa-expand" aria-hidden="true"></i></button>
- <button type="button" id="expand_collapse_panel" class="expand_collapse_panel" title="Collapse"><i class="fa fa-chevron-up" aria-hidden="true"></i></button>
- </div>
- </div>
- <div id="panel_body" class="panel-body graph-bg resize-graph animated" align="center">
- <div id="r_lineageLayoutView">
- <div class="fontLoader">
- <i class="fa fa-refresh fa-spin-custom"></i>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div> -->
-<!-- <div class="row">
- <div class="col-sm-custom">
- <div class="panel with-nav-tabs panel-default">
- <div class="panel-heading clearfix">
- <h4 class="panel-title pull-left">DETAILS</h4>
- <div class="btn-group pull-right">
- <button type="button" class="expand_collapse_panel" title="Collapse"><i class="fa fa-chevron-up" aria-hidden="true"></i></button>
- </div>
- </div>
- <div class="panel-body">
- </div>
- </div>
- </div>
-</div> -->
\ No newline at end of file
+</div>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/atlas/blob/41b48c82/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html b/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html
index be19895..b93a89c 100644
--- a/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html
+++ b/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html
@@ -15,7 +15,7 @@
* limitations under the License.
-->
<!-- <div class="graph-toolbar clearfix"></div> -->
-<div style="position: absolute;height:100%;width:100%;overflow: hidden;" class="white-bg no-padding lineage-box">
+<div class="white-bg no-padding lineage-box">
<div class="lineage-fltr-panel">
<div class="header clearfix">
<h4>Filters</h4>
@@ -38,7 +38,7 @@
</div>
</div>
</div>
- <div class="depthContainer form-group select2-mini">
+ <div class="depth-container form-group select2-mini">
<label class="control-label col-sm-4">Depth:</label>
<div class="col-sm-4 no-padding">
<select data-id="selectDepth" class="form-control"></select>
@@ -46,19 +46,22 @@
</div>
</div>
</div>
- <div class="graph-button-group">
+ <div class="graph-button-group pull-right">
<div>
<button type="button" data-id="fltr-togler" class="btn btn-action btn-gray btn-sm"><i class="fa fa-filter"></i></button>
</div>
- <div class="zoom-button-group pull-right">
- <span type="button" id="zoom_in" class="btn-md lineageZoomButton" title="Zoom In" data-id="refreshBtn"> <i class="fa fa-search-plus"></i></span>
- <span type="button" id="zoom_out" class="btn-md lineageZoomButton" title="Zoom Out" data-id="refreshBtn"> <i class="fa fa-search-minus"></i></span>
+ <div>
+ <button type="button" data-id="fullScreen-toggler" class="btn btn-action btn-gray btn-sm fullscreen_lineage"><i class="fa fa-expand"></i></button>
+ </div>
+ <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>
</div>
</div>
<div class="fontLoader">
<i class="fa fa-refresh fa-spin-custom"></i>
</div>
- <div class="legends" style="height: 25px; padding: 2px;">
+ <div class="legends pull-left" style="height: 25px; padding: 2px;">
<span style="margin-right: 8px; color:#fb4200;"><i class="fa fa-circle-o fa-fw" aria-hidden="true"></i>Current Entity</span>
<span style="margin-right: 8px; color:#df9b00;"><i class="fa fa-long-arrow-right fa-fw" aria-hidden="true"></i>Lineage</span>
<span style="margin-right: 8px; color:#fb4200;"><i class="fa fa-long-arrow-right fa-fw" aria-hidden="true"></i>Impact</span>
http://git-wip-us.apache.org/repos/asf/atlas/blob/41b48c82/dashboardv2/public/js/utils/Utils.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/utils/Utils.js b/dashboardv2/public/js/utils/Utils.js
index 08bccb2..5e90972 100644
--- a/dashboardv2/public/js/utils/Utils.js
+++ b/dashboardv2/public/js/utils/Utils.js
@@ -768,43 +768,6 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums',
this.attr(attributeName, firstString);
}
}
- $('body').on('click', '.expand_collapse_panel', function() {
- var icon = $(this).find('i'),
- panel = $(this).parents('.panel').first(),
- panelBody = panel.find('.panel-body');
- icon.toggleClass('fa-chevron-up fa-chevron-down');
- $(this).toggleAttribute('title', 'Collapse', 'Expand');
- panelBody.toggle();
- $(this).trigger('expand_collapse_panel', [$(this).parents('.panel')]);
- });
- $('body').on('click', '.fullscreen_panel', function() {
- var icon = $(this).find('i'),
- panel = $(this).parents('.panel').first(),
- panelBody = panel.find('.panel-body');
- icon.toggleClass('fa-expand fa-compress');
- $(this).toggleAttribute('title', 'Fullscreen', 'Exit Fullscreen');
- panel.toggleClass('panel-fullscreen');
- panel.find('.expand_collapse_panel').toggle();
- // Condition if user clicks on fullscree button and body is in collapse mode.
- if (panel.hasClass('panel-fullscreen')) {
- $('body').css("position", "fixed");
- if (!panelBody.is(':visible')) {
- panelBody.show();
- panelBody.addClass('full-visible');
- }
- //first show body to get width and height for postion then trigger the event.
- $(this).trigger('fullscreen_done', [$(this).parents('.panel')]);
- } else if (panelBody.hasClass('full-visible')) {
- $('body').removeAttr("style");
- $(this).trigger('fullscreen_done', [$(this).parents('.panel')]);
- //first trigger the event to getwidth and height for postion then hide body.
- panelBody.hide();
- panelBody.removeClass('full-visible');
- } else {
- $('body').removeAttr("style");
- $(this).trigger('fullscreen_done', [$(this).parents('.panel')]);
- }
- });
$('body').on('click', 'pre.code-block .expand-collapse-button', function(e) {
var $el = $(this).parents('.code-block');
http://git-wip-us.apache.org/repos/asf/atlas/blob/41b48c82/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js b/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js
index 8f6b3fa..685fcac 100644
--- a/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js
+++ b/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js
@@ -25,8 +25,7 @@ define(['require',
'utils/Globals',
'utils/Enums',
'utils/Messages',
- 'utils/UrlLinks',
- 'jquery-ui'
+ 'utils/UrlLinks'
], function(require, Backbone, DetailPageLayoutViewTmpl, ButtonsTmpl, Utils, CommonViewFunction, Globals, Enums, Messages, UrlLinks) {
'use strict';
@@ -62,7 +61,6 @@ define(['require',
addTerm: '[data-id="addTerm"]',
tagList: '[data-id="tagList"]',
termList: '[data-id="termList"]',
- fullscreenPanel: "#fullscreen_panel",
entityIcon: '[data-id="entityIcon"]'
},
templateHelpers: function() {
@@ -237,17 +235,7 @@ define(['require',
processCheck: isProcess,
guid: this.id,
entityDefCollection: this.entityDefCollection,
- fetchCollection: this.fetchCollection.bind(this),
- actionCallBack: function() {
- that.$('#expand_collapse_panel').click();
- }
- });
- this.$(".resizeGraph").resizable({
- handles: ' s',
- minHeight: 375,
- stop: function(event, ui) {
- ui.element.height(($(this).height()));
- },
+ fetchCollection: this.fetchCollection.bind(this)
});
}
@@ -274,36 +262,6 @@ define(['require',
this.bindEvents();
Utils.showTitleLoader(this.$('.page-title .fontLoader'), this.$('.entityDetail'));
this.$('.fontLoader').show(); // to show tab loader
- this.$(".resize-graph").resizable({
- handles: ' s',
- minHeight: 375,
- stop: function(event, ui) {
- that.$('.resize-graph').height(($(this).height()));
- },
- });
- this.ui.fullscreenPanel.on('fullscreen_done', function(e, panel) {
- var svgEl = panel.find('.panel-body svg'),
- scaleEl = svgEl.find('>g'),
- zoom = that.RLineageLayoutView.currentView.zoom,
- svg = that.RLineageLayoutView.currentView.svg,
- viewThis = that.RLineageLayoutView.currentView,
- setGraphZoomPositionCal = that.RLineageLayoutView.currentView.setGraphZoomPositionCal,
- zoomed = that.RLineageLayoutView.currentView.zoomed;;
-
- if (zoom) {
- setGraphZoomPositionCal.call(viewThis);
- zoomed.call(viewThis);
- if ($(e.currentTarget).find('i').hasClass('fa fa-compress')) {
- svg.call(zoom)
- .on("dblclick.zoom", null);
-
- } else {
- svg.call(zoom)
- .on("wheel.zoom", null)
- .on("dblclick.zoom", null);
- }
- }
- })
},
onShow: function() {
var params = Utils.getUrlState.getQueryParams();
http://git-wip-us.apache.org/repos/asf/atlas/blob/41b48c82/dashboardv2/public/js/views/graph/LineageLayoutView.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/views/graph/LineageLayoutView.js b/dashboardv2/public/js/views/graph/LineageLayoutView.js
index 1edffbc..2f64f1e 100644
--- a/dashboardv2/public/js/views/graph/LineageLayoutView.js
+++ b/dashboardv2/public/js/views/graph/LineageLayoutView.js
@@ -27,7 +27,8 @@ define(['require',
'utils/Enums',
'utils/UrlLinks',
'utils/Globals',
- 'platform'
+ 'platform',
+ 'jquery-ui'
], function(require, Backbone, LineageLayoutViewtmpl, VLineageList, VEntity, Utils, dagreD3, d3Tip, Enums, UrlLinks, Globals, platform) {
'use strict';
@@ -37,6 +38,7 @@ define(['require',
_viewName: 'LineageLayoutView',
template: LineageLayoutViewtmpl,
+ className: "resizeGraph",
/** Layout sub regions */
regions: {},
@@ -48,7 +50,8 @@ define(['require',
checkDeletedEntity: "[data-id='checkDeletedEntity']",
selectDepth: 'select[data-id="selectDepth"]',
fltrTogler: '[data-id="fltr-togler"]',
- lineageFilterPanel: '.lineage-fltr-panel'
+ lineageFilterPanel: '.lineage-fltr-panel',
+ LineageFullscreenToggler: '[data-id="fullScreen-toggler"]'
},
/** ui events hash */
@@ -58,6 +61,7 @@ define(['require',
events["click " + this.ui.checkDeletedEntity] = 'onCheckUnwantedEntity';
events['change ' + this.ui.selectDepth] = 'onSelectDepthChange';
events["click " + this.ui.fltrTogler] = 'onClickFiltrTogler';
+ events["click " + this.ui.LineageFullscreenToggler] = 'onClickLineageFullscreenToggler';
return events;
},
@@ -120,6 +124,19 @@ define(['require',
},
onShow: function() {
this.$('.fontLoader').show();
+ this.$el.resizable({
+ handles: ' s',
+ minHeight: 375,
+ stop: function(event, ui) {
+ ui.element.height(($(this).height()));
+ },
+ });
+ },
+ onClickLineageFullscreenToggler: function(e) {
+ var icon = $(e.target).find('i'),
+ panel = $(e.target).parents('.tab-pane').first();
+ icon.toggleClass('fa-expand fa-compress');
+ panel.toggleClass('fullscreen-mode');
},
onCheckUnwantedEntity: function(e) {
var data = $.extend(true, {}, this.lineageData);
@@ -173,7 +190,7 @@ define(['require',
},
noLineage: function() {
this.$('.fontLoader').hide();
- this.$('.depthContainer').hide();
+ this.$('.depth-container').hide();
//this.$('svg').height('100');
this.$('svg').html('<text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle">No lineage data found</text>');
if (this.actionCallBack) {
@@ -484,7 +501,7 @@ define(['require',
interpolateZoom([view.x, view.y], view.k);
}
- d3.selectAll(this.$('span.lineageZoomButton')).on('click', zoomClick);
+ d3.selectAll(this.$('.lineageZoomButton')).on('click', zoomClick);
var tooltip = d3Tip()
.attr('class', 'd3-tip')
.offset([10, 0])