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 <abhishek.kada...@gmail.com> Authored: Wed Jan 2 17:06:32 2019 +0530 Committer: kevalbhatt <kbh...@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])