Skip to content

A
atlas
Commit 2a3b8830 by Abhishek Kadam Committed by kevalbhatt
Options

ATLAS-3009 UI - Please provide Full screen support for Lineage

Signed-off-by: 's avatarkevalbhatt <kbhatt@apache.org>
parent e04c857d
Showing with 94 additions and 97 deletions
dashboardv2/public/css/scss/form.scss
......@@ -342,6 +342,13 @@ button:focus {
}
}
.btn-group {
.btn-atlas,
.btn-action {
margin: 0px;
}
}
.pagination>.active {
>a {
background-color: $color_curious_blue_approx;
......
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,7 +335,7 @@ span#zoom_in {
border-bottom: 1px solid #625555;
}
.depthContainer {
.depth-container {
//display: inline-block;
//margin-top: 3px;
......@@ -352,3 +343,32 @@ span#zoom_in {
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
dashboardv2/public/css/scss/relationship.scss
......@@ -17,6 +17,10 @@
*/
.relationship-box {
position: absolute;
height: 100%;
width: 100%;
overflow: hidden;
.relatioship-link {
fill: none;
stroke-width: 1.5px;
......
dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
......@@ -22,8 +22,7 @@
<h1 class="title row">
<div data-id="entityIcon" class="entity-icon-box"></div>
<span data-id="title"></span>
</h1>
{{#if entityUpdate}}
</h1> {{#if entityUpdate}}
<div data-id="editButtonContainer" class="pull-right"></div>
{{/if}}
<div class="form-group">
......@@ -73,23 +72,19 @@
</div>
</div>
<div id="tab-lineage" role="lineage" class="tab-pane animated fadeIn">
<div class="resizeGraph animated position-relative" align="center" style="height:64vh;">
<div id="r_lineageLayoutView">
<div id="r_lineageLayoutView" class="animated position-relative" align="center">
<div class="fontLoader-relative">
<i class="fa fa-refresh fa-spin-custom"></i>
</div>
</div>
</div>
</div>
<div id="tab-relationship" role="relationship" class="tab-pane animated fadeIn">
<div class="resizeGraph animated position-relative" align="center" style="height:64vh;">
<div id="r_relationshipLayoutView">
<div id="r_relationshipLayoutView" class="animated position-relative">
<div class="fontLoader-relative">
<i class="fa fa-refresh fa-spin-custom"></i>
</div>
</div>
</div>
</div>
<div id="tab-tagTable" role="classification" class="tab-pane animated fadeIn">
<div id="r_tagTableLayoutView">
<div class="fontLoader-relative">
......
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>
......
dashboardv2/public/js/templates/graph/RelationshipLayoutView_tmpl.html
......@@ -15,19 +15,17 @@
* limitations under the License.
-->
<!-- <div class="graph-toolbar clearfix"></div> -->
<div style="position: absolute;height:100%;width:100%;" class="white-bg no-padding relationship-box">
<div class="white-bg no-padding relationship-box">
<div class="fontLoader">
<i class="fa fa-refresh fa-spin-custom"></i>
</div>
<div style="position: absolute;height:100%;width:100%;">
<div class="graph-button-group">
<div class="zoom-button-group">
<span type="button" id="zoom_in" class="btn-md lineageZoomButton" title="Zoom In"> <i class="fa fa-search-plus"></i></span>
<span type="button" id="zoom_out" class="btn-md lineageZoomButton" title="Zoom Out"> <i class="fa fa-search-minus"></i></span>
<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>
</div>
</div>
<svg width="100%" height="100%" viewBox="0 0 854 330" enable-background="new 0 0 854 330" xml:space="preserve"></svg>
</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>
<!-- <div data-id="close" class="close-details"><i class="fa fa-times"></i></div> -->
......
dashboardv2/public/js/templates/search/SearchResultLayoutView_tmpl.html
......@@ -85,7 +85,7 @@
<div class="input-group" data-id="goToPageDiv">
<input type="text" class="form-control number-input" data-id="gotoPage" placeholder="Goto Page" />
<span class="input-group-btn">
<button class="btn btn-atlas btn-md no-margin" type="button" data-id="gotoPagebtn" title="Goto Page" disabled="disabled">Go!</button>
<button class="btn btn-default" type="button" data-id="gotoPagebtn" title="Goto Page" disabled="disabled">Go!</button>
</span>
</div>
</div>
......
dashboardv2/public/js/utils/Utils.js
......@@ -763,43 +763,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');
......
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';
......@@ -65,7 +64,6 @@ define(['require',
tagList: '[data-id="tagList"]',
termList: '[data-id="termList"]',
propagatedTagList: '[data-id="propagatedTagList"]',
fullscreenPanel: "#fullscreen_panel",
tablist: '[data-id="tab-list"] li',
entityIcon: '[data-id="entityIcon"]'
},
......@@ -280,16 +278,6 @@ define(['require',
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()));
},
});
} else if (this.value && this.value.tabActive == "lineage") {
Utils.setUrl({
......
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])
......
dashboardv2/public/js/views/graph/RelationshipLayoutView.js
......@@ -35,6 +35,7 @@ define(['require',
_viewName: 'RelationshipLayoutView',
template: RelationshipLayoutViewtmpl,
className: "resizeGraph",
/** Layout sub regions */
regions: {},
......@@ -225,7 +226,7 @@ define(['require',
d3.selectAll(this.$('span.lineageZoomButton')).on('click', zoomClick);
d3.selectAll(this.$('.lineageZoomButton')).on('click', zoomClick);
var svg = d3.select(this.$("svg")[0])
.attr("viewBox", "0 0 " + width + " " + height)
......
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