Commit d0cb5c37 by kalyani Committed by Madhan Neethiraj

ATLAS-1688: fix lineage UI resize issues

parent 401d39af
......@@ -28,11 +28,6 @@
.node {
cursor: pointer;
circle {
fill: $white;
stroke: $steel_blue;
stroke-width: 1.5px;
}
text {
font-size: 10px;
font-family: $font_1;
......@@ -45,11 +40,21 @@
.label {
fill: $color_suva_gray_approx;
}
image {
&.nodeImage {
circle {
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
stroke-width: 1.5px;
&.nodeImage {
&.green:hover {
stroke: #8bc152;
}
&.blue:hover {
stroke: #4b91e2;
}
&.currentNode {
stroke: #fb4200;
}
&:hover {
-moz-transform: scale(1.4);
-webkit-transform: scale(1.4);
......@@ -57,6 +62,21 @@
}
}
}
&.active {
circle {
-moz-transform: scale(1.4);
-webkit-transform: scale(1.4);
transform: scale(1.4);
&.nodeImage {
&.green {
stroke: #8bc152;
}
&.blue {
stroke: #4b91e2;
}
}
}
}
}
.overlay {}
......@@ -74,19 +94,12 @@
background: $black_80;
color: $white;
z-index: 999;
max-width: 300px;
//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
border-radius: 2px;
&:after {
//Instead of the line below you could use @include box-sizing($bs)
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: $black_80;
content: "\25BC";
position: absolute;
text-align: center;
.tip-inner-scroll {
overflow: auto;
max-height: 300px;
}
&.n:after {
margin: -1px 0 0;
......@@ -100,6 +113,7 @@ g.type-TK > rect {
}
.zoomButtonGroup {
background-color: $white;
position: absolute;
top: 4px;
right: 5px;
......
......@@ -320,8 +320,23 @@ ul {
@media (min-width: 768px) {
.col-sm-custom {
width: 92%;
margin: 36px 36px 0px;
//width: 92%;
margin: 25px 25px 0px;
position: relative;
}
}
.panel-fullscreen {
position: fixed;
height: 100%;
top: 0px;
bottom: 0;
left: 0;
width: 100%;
right: 0;
z-index: 999;
}
.no-padding {
padding: 0px !important;
}
......@@ -72,7 +72,7 @@
.table-quickMenu>thead>tr>th {
border-width: thin;
border-color: $action_gray;
border-color: $color_jungle_green_approx;
border-bottom-style: solid;
box-shadow: none;
padding: 20px 30px;
......
......@@ -19,27 +19,57 @@
/* panel.scss */
.panel {
//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
border-radius: 0;
}
.panel-primary {
border-color: $color_hoki_approx;
.panel-default {
> .panel-heading {
color: $white;
background-color: $color_hoki_approx;
border-color: $color_hoki_approx;
//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
border-radius: 0;
color: $color_jungle_green_approx;
background: $white;
border-color: $color_jungle_green_approx;
button {
color: $color_jungle_green_approx;
background: $white;
border: none;
}
.panel-title {
font-weight: bold;
padding-top: 8px;
}
}
.nav-tabs {
> li {
&.active {
>a {
color: $color_jungle_green_approx;
}
}
>a {
color: $black;
}
}
}
}
.appForm {
.panel-fullscreen {
.panel-body {
padding-bottom: 0;
//overflow: hidden;
height: calc(100% - 46px)!important;
}
.ui-resizable-handle{
display: none !important;
}
}
.nav-tabs {
>li {
&:first-child {
margin-left: 25px;
}
}
}
.with-nav-tabs {
.tab-content {
> .tab-pane.active {
padding: 20px 10px 0px 10px;
}
.panel-footer {
margin-bottom: 0;
}
}
\ No newline at end of file
......@@ -20,7 +20,7 @@
/* tab.scss */
.atlast-tabbable {
margin: 50px 0;
margin: 25px 0;
.nav-tabs {
border-bottom: 1px solid $color_mystic_approx;
> li {
......@@ -119,7 +119,7 @@ ul.tabs li.tab {
}
.atlast-tabbable {
margin: 50px 0;
margin: 25px 0;
.nav-tabs {
border-bottom: 1px solid $color_mystic_approx;
> li {
......
......@@ -70,7 +70,7 @@
.page-title {
background-color: $white;
padding: 50px;
padding: 25px;
h1 {
margin-top: 50px;
margin-bottom: 10px;
......
......@@ -23,20 +23,20 @@
<a href="javascript:void(0);" class="backButton" data-id="backButton"><i class="fa fa-chevron-left"></i> Back To Results</a>
</div>
<h1><span data-id="title"></span></h1> {{#if entityUpdate}}
<button data-id="editButton" style="display:none" class="btn btn-default pull-right editbutton" id="editText"><i class="fa fa-pencil"></i></button>
<button data-id="editButton" title="Edit Entity" style="display:none" class="btn btn-default pull-right editbutton" id="editText"><i class="fa fa-pencil"></i></button>
{{/if}}
<div class="tagTerm">
<span class="tagSpan">Tags:</span>
<div class="" data-id="tagList">
<div class="addTag-dropdown" data-id="addTag">
<div class="addTagBase tagBox" data-id="addTagPlus"><i class="fa fa-plus"></i></div>
<div class="addTagBase tagBox" title="Add Tag" data-id="addTagPlus"><i class="fa fa-plus"></i></div>
</div>
</div>
<hr class="termTagLine"> {{#if taxonomy}}
<span class="termSpan">Terms:</span>
<div class="" data-id="termList">
<div class="addTag-dropdown" data-id="addTerm">
<div class="addTagBase termBox" data-id="addTermPlus"><i class="fa fa-plus"></i></div>
<div class="addTagBase termBox" title="Add Term" data-id="addTermPlus"><i class="fa fa-plus"></i></div>
</div>
</div>
{{/if}}
......@@ -46,10 +46,19 @@
<div class="container-fluid gray-bg">
<div class="row">
<div class="col-sm-custom">
<div class="atlast-tabbable">
<h4 class="lineageLabel">LINEAGE & IMPACT</h4>
<div class="panel panel-default lineageLayout">
<div id="r_lineageLayoutView" style="height:405px">
<div class="">
<!-- <h4 class="lineageLabel"></h4> -->
<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" style="height:375px;">
<div id="r_lineageLayoutView">
<div class="fontLoader">
<i class="fa fa-refresh fa-spin-custom"></i>
</div>
......@@ -58,11 +67,21 @@
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-custom">
<div class="atlast-tabbable">
<h4 class="detailLabel">DETAILS</h4>
<ul class="nav nav-tabs" role="tablist">
<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 class="row">
<div class="col-md-12">
<ul class="nav nav-tabs ">
<li role="presentation" class="tab active"><a href="#tab-details" aria-controls="tab-details" role="tab" data-toggle="tab">Properties</a></li>
<li role="presentation"><a href="#tab-tagTable" aria-controls="tab-tagTable" role="tab" data-toggle="tab">Tags</a></li>
{{#if taxonomy}}
......@@ -71,6 +90,8 @@
<li role="presentation" class="tab"><a href="#tab-audit" aria-controls="tab-audit" role="tab" data-toggle="tab">Audits</a></li>
<li role="presentation" class="tab schemaTable" style="display:none"><a href="#tab-schema" aria-controls="tab-schema" role="tab" data-toggle="tab">Schema</a></li>
</ul>
</div>
</div>
<div class="tab-content">
<div id="tab-details" role="tabpanel" class="tab-pane active">
<div id="r_entityDetailTableLayoutView" style="position: relative;">
......@@ -79,7 +100,7 @@
</div>
</div>
</div>
<div id="tab-tagTable" role="tabpanel" class="tab-pane">
<div id="tab-tagTable" role="tabpanel" class="tab-pane fade">
<div id="r_tagTableLayoutView" style="position: relative;">
<div class="fontLoader">
<i class="fa fa-refresh fa-spin-custom"></i>
......@@ -111,4 +132,6 @@
</div>
</div>
</div>
</div>
</div>
</div>
......@@ -14,21 +14,17 @@
* See the License for the specific language governing permissions and
* limitations under the License.
-->
<div class="panel-body graph-bg resize-graph" align="center">
<div class="graph" id="tree-container">
</div>
<div style="position:relative">
<div style="position: absolute;height: calc(100% - 45px);width: calc(100% - 30px);">
<div class="fontLoader">
<i class="fa fa-refresh fa-spin-custom"></i>
</div>
<svg width=100% height=350></svg>
<div class="legends">
<svg width="100%" height="100%"></svg>
<div class="legends" style="height: 20px">
<i class="fa fa-long-arrow-right" aria-hidden="true" style="margin-right: 12px; color:#8bc152;">&nbsp<span>Lineage</span></i>
<i class="fa fa-long-arrow-right" aria-hidden="true" style="color:#fb4200;">&nbsp<span>Impact</span></i>
</div>
<div class="zoomButtonGroup">
<button type="button" class="zoomButton" id="zoom_in">+</button>
<button type="button" class="zoomButton" id="zoom_out">-</button>
</div>
<span type="button" id="zoom_in" class="btn btn-atlasAction btn-atlas lineageZoomButton" title="Zoom In" data-id="refreshBtn"> <i class="fa fa-search-plus"></i></span>
<span type="button" id="zoom_out" class="btn btn-atlasAction btn-atlas lineageZoomButton" title="Zoom Out" data-id="refreshBtn"> <i class="fa fa-search-minus"></i></span>
</div>
</div>
......@@ -396,5 +396,51 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'pnotify.button
loaderEl.hide();
titleBoxEl.fadeIn();
}
$.fn.toggleAttribute = function(attributeName, firstString, secondString) {
if (this.attr(attributeName) == firstString) {
this.attr(attributeName, secondString);
} else {
this.attr(attributeName, firstString);
}
}
$('body').on('click', '.expand_collapse_panel', function() {
var icon = $(this).find('i'),
panel = $(this).parents('.panel'),
panelBody = panel.find('.panel-body');
icon.toggleClass('fa-chevron-up fa-chevron-down');
$(this).toggleAttribute('title', 'Collapse', 'Expand');
panelBody.toggle('0.5', 'linear');
$(this).trigger('expand_collapse_panel', [$(this).parents('.panel')]);
});
$('body').on('click', '.fullscreen_panel', function() {
var icon = $(this).find('i'),
panel = $(this).parents('.panel'),
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')) {
$(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')]);
}
});
return Utils;
});
......@@ -24,7 +24,8 @@ define(['require',
'utils/Globals',
'utils/Enums',
'utils/Messages',
'utils/UrlLinks'
'utils/UrlLinks',
'jquery-ui'
], function(require, Backbone, DetailPageLayoutViewTmpl, Utils, CommonViewFunction, Globals, Enums, Messages, UrlLinks) {
'use strict';
......@@ -57,7 +58,8 @@ define(['require',
addTag: '[data-id="addTag"]',
addTerm: '[data-id="addTerm"]',
tagList: '[data-id="tagList"]',
termList: '[data-id="termList"]'
termList: '[data-id="termList"]',
fullscreenPanel: "#fullscreen_panel"
},
templateHelpers: function() {
return {
......@@ -197,7 +199,43 @@ define(['require',
var that = this;
Utils.showTitleLoader(this.$('.page-title .fontLoader'), this.$('.entityDetail'));
this.$('.fontLoader').show(); // to show tab loader
this.renderLineageLayoutView({ guid: this.id, entityDefCollection: this.entityDefCollection });
this.renderLineageLayoutView({
guid: this.id,
entityDefCollection: this.entityDefCollection,
actionCallBack: function() {
that.$('#expand_collapse_panel').click();
}
});
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);
}
}
})
},
fetchCollection: function() {
this.collection.fetch({ reset: true });
......
......@@ -25,8 +25,7 @@ define(['require',
'dagreD3',
'd3-tip',
'utils/Enums',
'utils/UrlLinks',
'jquery-ui'
'utils/UrlLinks'
], function(require, Backbone, LineageLayoutViewtmpl, VLineageList, VEntity, Utils, dagreD3, d3Tip, Enums, UrlLinks) {
'use strict';
......@@ -56,7 +55,7 @@ define(['require',
* @constructs
*/
initialize: function(options) {
_.extend(this, _.pick(options, 'guid', 'entityDefCollection'));
_.extend(this, _.pick(options, 'guid', 'entityDefCollection', 'actionCallBack'));
this.entityModel = new VEntity();
this.collection = new VLineageList();
this.typeMap = {};
......@@ -66,13 +65,9 @@ define(['require',
onRender: function() {
var that = this;
this.$('.fontLoader').show();
this.$(".resize-graph").resizable({
handles: ' s',
minHeight: 355,
stop: function(event, ui) {
that.$('svg').height(($(this).height() - 5))
},
});
if (this.layoutRendered) {
this.layoutRendered();
}
this.g = new dagreD3.graphlib.Graph()
.setGraph({
nodesep: 50,
......@@ -109,6 +104,9 @@ define(['require',
this.$('.fontLoader').hide();
//this.$('svg').height('100');
this.$('svg').html('<text x="' + (this.$('svg').width() - 150) / 2 + '" y="' + this.$('svg').height() / 2 + '" fill="black">No lineage data found</text>');
if (this.actionCallBack) {
this.actionCallBack();
}
},
generateData: function(relations, guidEntityMap) {
var that = this;
......@@ -172,9 +170,38 @@ define(['require',
});
}
},
setGraphZoomPositionCal: function(argument) {
var initialScale = 1.2,
svgEl = this.$('svg'),
scaleEl = this.$('svg').find('>g'),
translateValue = [(this.$('svg').width() - this.g.graph().width * initialScale) / 2, (this.$('svg').height() - this.g.graph().height * initialScale) / 2]
if (_.keys(this.g._nodes).length > 15) {
translateValue = [((this.$('svg').width() / 2)) / 2, 20];
initialScale = 0;
this.$('svg').addClass('noScale');
}
if (svgEl.parents('.panel.panel-fullscreen').length && svgEl.hasClass('noScale')) {
if (!scaleEl.hasClass('scaleLinage')) {
scaleEl.addClass('scaleLinage');
initialScale = 1.2;
} else {
scaleEl.removeClass('scaleLinage');
initialScale = 0;
}
} else {
scaleEl.removeClass('scaleLinage');
}
this.zoom.translate(translateValue)
.scale(initialScale);
},
zoomed: function(that) {
this.$('svg').find('>g').attr("transform",
"translate(" + this.zoom.translate() + ")" +
"scale(" + this.zoom.scale() + ")"
);
},
createGraph: function() {
var that = this
var that = this;
this.g.nodes().forEach(function(v) {
var node = that.g.node(v);
// Round the corners of the nodes
......@@ -206,8 +233,23 @@ define(['require',
};
render.shapes().img = function circle(parent, bbox, node) {
//var r = Math.max(bbox.width, bbox.height) / 2,
var shapeSvg = parent.insert("image")
.attr("class", "nodeImage")
if (node.id == that.guid) {
var currentNode = true
}
var shapeSvg = parent.append('circle')
.attr('fill', 'url(#img_' + node.id + ')')
.attr('r', currentNode ? '15px' : '14px')
.attr("class", "nodeImage " + (currentNode ? "currentNode" : (node.isProcess ? "blue" : "green")));
parent.insert("defs")
.append("pattern")
.attr("x", "0%")
.attr("y", "0%")
.attr("patternUnits", "objectBoundingBox")
.attr("id", "img_" + node.id)
.attr("width", "100%")
.attr("height", "100%")
.append('image')
.attr("xlink:href", function(d) {
if (node) {
if (node.isProcess) {
......@@ -228,29 +270,25 @@ define(['require',
}
}
}
}).attr("x", "-12px")
.attr("y", "-12px")
.attr("width", "24px")
.attr("height", "24px");
})
.attr("x", "2")
.attr("y", "2")
.attr("width", currentNode ? "26" : "24")
.attr("height", currentNode ? "26" : "24")
node.intersect = function(point) {
//return dagreD3.intersect.circle(node, points, point);
return dagreD3.intersect.circle(node, 13, point);
return dagreD3.intersect.circle(node, currentNode ? 16 : 13, point);
};
return shapeSvg;
};
// Set up an SVG group so that we can translate the final graph.
var svg = d3.select(this.$("svg")[0]),
var svg = this.svg = d3.select(this.$("svg")[0]),
svgGroup = svg.append("g");
var zoom = d3.behavior.zoom()
var zoom = this.zoom = d3.behavior.zoom()
.scaleExtent([0.5, 6])
.on("zoom", zoomed);
.on("zoom", that.zoomed.bind(this));
function zoomed() {
svgGroup.attr("transform",
"translate(" + zoom.translate() + ")" +
"scale(" + zoom.scale() + ")"
);
}
function interpolateZoom(translate, scale) {
var self = this;
......@@ -261,7 +299,7 @@ define(['require',
zoom
.scale(iScale(t))
.translate(iTranslate(t));
zoomed();
that.zoomed();
};
});
}
......@@ -295,7 +333,7 @@ define(['require',
interpolateZoom([view.x, view.y], view.k);
}
d3.selectAll('button.zoomButton').on('click', zoomClick);
d3.selectAll(this.$('span.lineageZoomButton')).on('click', zoomClick);
var tooltip = d3Tip()
.attr('class', 'd3-tip')
.offset([-18, 0])
......@@ -312,8 +350,9 @@ define(['require',
if (value.queryText) {
htmlStr += "<h5>Query: <span style='color:#359f89'>" + value.queryText + "</span></h5> ";
}
return htmlStr;
return "<div class='tip-inner-scroll'>" + htmlStr + "</div>";
});
svg.call(zoom)
.call(tooltip);
this.$('.fontLoader').hide();
......@@ -325,7 +364,30 @@ define(['require',
.attr("transform", "translate(2,-30)");
svgGroup.selectAll("g.nodes g.node")
.on('mouseenter', function(d) {
tooltip.show(d);
that.activeNode = true;
var matrix = this.getScreenCTM()
.translate(+this.getAttribute("cx"), +this.getAttribute("cy"));
that.$('svg').find('.node').removeClass('active');
$(this).addClass('active');
// Fix
var width = $('body').width();
var currentELWidth = $(this).offset();
var direction = 'e';
if (((width - currentELWidth.left) < 330)) {
direction = (((width - currentELWidth.left) < 330) && ((currentELWidth.top) < 400)) ? 'sw' : 'w';
if (((width - currentELWidth.left) < 330) && ((currentELWidth.top) > 600)) {
direction = 'nw';
}
} else if (((currentELWidth.top) > 600)) {
direction = (((width - currentELWidth.left) < 330) && ((currentELWidth.top) > 600)) ? 'nw' : 'n';
if ((currentELWidth.left) < 50) {
direction = 'ne'
}
} else if ((currentELWidth.top) < 400) {
direction = ((currentELWidth.left) < 50) ? 'se' : 's';
}
tooltip.direction(direction).show(d)
})
.on('dblclick', function(d) {
tooltip.hide(d);
......@@ -334,15 +396,28 @@ define(['require',
mergeBrowserUrl: false,
trigger: true
});
})
.on('mouseleave', function(d) {
}).on('mouseleave', function(d) {
that.activeNode = false;
var nodeEL = this;
setTimeout(function(argument) {
if (!(that.activeTip || that.activeNode)) {
$(nodeEL).removeClass('active');
tooltip.hide(d);
}
}, 400)
});
$('body').on('mouseover', '.d3-tip', function(el) {
that.activeTip = true;
});
$('body').on('mouseleave', '.d3-tip', function(el) {
that.activeTip = false;
that.$('svg').find('.node').removeClass('active');
tooltip.hide();
});
// Center the graph
var initialScale = 1.2;
zoom.translate([(this.$('svg').width() - this.g.graph().width * initialScale) / 2, (this.$('svg').height() - this.g.graph().height * initialScale) / 2])
.scale(initialScale)
.event(svg);
this.setGraphZoomPositionCal();
zoom.event(svg);
//svg.attr('height', this.g.graph().height * initialScale + 40);
}
......
......@@ -99,7 +99,7 @@ define(['require',
includePagination: true,
includePageSize: false,
includeFooterRecords: true,
includeOrderAbleColumns: true,
includeOrderAbleColumns: false,
gridOpts: {
className: "table table-hover backgrid table-quickMenu",
emptyText: 'No records found!'
......@@ -204,8 +204,7 @@ define(['require',
var columns = new columnCollection(that.getSchemaTableColumns());
//columns.setPositions().sort();
that.RSchemaTableLayoutView.show(new TableLayout(_.extend({}, that.commonTableOptions, {
columns: columns,
includeOrderAbleColumns: true
columns: columns
})));
that.$('.multiSelectTerm').hide();
that.$('.multiSelectTag').hide();
......
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