Skip to content

A
atlas
Commit d0cb5c37 by kalyani Committed by Madhan Neethiraj
Options

ATLAS-1688: fix lineage UI resize issues

Signed-off-by: 's avatarMadhan Neethiraj <madhan@apache.org>
parent 401d39af
Showing with 340 additions and 105 deletions
dashboardv2/public/css/scss/graph.scss
...@@ -28,11 +28,6 @@ ...@@ -28,11 +28,6 @@
.node { .node {
cursor: pointer; cursor: pointer;
circle {
fill: $white;
stroke: $steel_blue;
stroke-width: 1.5px;
}
text { text {
font-size: 10px; font-size: 10px;
font-family: $font_1; font-family: $font_1;
...@@ -45,11 +40,21 @@ ...@@ -45,11 +40,21 @@
.label { .label {
fill: $color_suva_gray_approx; fill: $color_suva_gray_approx;
} }
image { circle {
&.nodeImage {
-moz-transition: all 0.3s; -moz-transition: all 0.3s;
-webkit-transition: all 0.3s; -webkit-transition: all 0.3s;
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 { &:hover {
-moz-transform: scale(1.4); -moz-transform: scale(1.4);
-webkit-transform: scale(1.4); -webkit-transform: scale(1.4);
...@@ -57,6 +62,21 @@ ...@@ -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 {} .overlay {}
...@@ -74,19 +94,12 @@ ...@@ -74,19 +94,12 @@
background: $black_80; background: $black_80;
color: $white; color: $white;
z-index: 999; z-index: 999;
max-width: 300px;
//Instead of the line below you could use @include border-radius($radius, $vertical-radius) //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
border-radius: 2px; border-radius: 2px;
&:after { .tip-inner-scroll {
//Instead of the line below you could use @include box-sizing($bs) overflow: auto;
box-sizing: border-box; max-height: 300px;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: $black_80;
content: "\25BC";
position: absolute;
text-align: center;
} }
&.n:after { &.n:after {
margin: -1px 0 0; margin: -1px 0 0;
...@@ -100,6 +113,7 @@ g.type-TK > rect { ...@@ -100,6 +113,7 @@ g.type-TK > rect {
} }
.zoomButtonGroup { .zoomButtonGroup {
background-color: $white;
position: absolute; position: absolute;
top: 4px; top: 4px;
right: 5px; right: 5px;
......
dashboardv2/public/css/scss/main.scss
...@@ -320,8 +320,23 @@ ul { ...@@ -320,8 +320,23 @@ ul {
@media (min-width: 768px) { @media (min-width: 768px) {
.col-sm-custom { .col-sm-custom {
width: 92%; //width: 92%;
margin: 36px 36px 0px; margin: 25px 25px 0px;
position: relative; 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;
}
dashboardv2/public/css/scss/override.scss
...@@ -72,7 +72,7 @@ ...@@ -72,7 +72,7 @@
.table-quickMenu>thead>tr>th { .table-quickMenu>thead>tr>th {
border-width: thin; border-width: thin;
border-color: $action_gray; border-color: $color_jungle_green_approx;
border-bottom-style: solid; border-bottom-style: solid;
box-shadow: none; box-shadow: none;
padding: 20px 30px; padding: 20px 30px;
......
dashboardv2/public/css/scss/panel.scss
...@@ -19,27 +19,57 @@ ...@@ -19,27 +19,57 @@
/* panel.scss */ /* panel.scss */
.panel { .panel-default {
//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-heading { > .panel-heading {
color: $white; color: $color_jungle_green_approx;
background-color: $color_hoki_approx; background: $white;
border-color: $color_hoki_approx; border-color: $color_jungle_green_approx;
//Instead of the line below you could use @include border-radius($radius, $vertical-radius) button {
border-radius: 0; 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 { .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
dashboardv2/public/css/scss/tab.scss
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
/* tab.scss */ /* tab.scss */
.atlast-tabbable { .atlast-tabbable {
margin: 50px 0; margin: 25px 0;
.nav-tabs { .nav-tabs {
border-bottom: 1px solid $color_mystic_approx; border-bottom: 1px solid $color_mystic_approx;
> li { > li {
...@@ -119,7 +119,7 @@ ul.tabs li.tab { ...@@ -119,7 +119,7 @@ ul.tabs li.tab {
} }
.atlast-tabbable { .atlast-tabbable {
margin: 50px 0; margin: 25px 0;
.nav-tabs { .nav-tabs {
border-bottom: 1px solid $color_mystic_approx; border-bottom: 1px solid $color_mystic_approx;
> li { > li {
......
dashboardv2/public/css/scss/theme.scss
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
.page-title { .page-title {
background-color: $white; background-color: $white;
padding: 50px; padding: 25px;
h1 { h1 {
margin-top: 50px; margin-top: 50px;
margin-bottom: 10px; margin-bottom: 10px;
......
dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
...@@ -23,20 +23,20 @@ ...@@ -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> <a href="javascript:void(0);" class="backButton" data-id="backButton"><i class="fa fa-chevron-left"></i> Back To Results</a>
</div> </div>
<h1><span data-id="title"></span></h1> {{#if entityUpdate}} <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}} {{/if}}
<div class="tagTerm"> <div class="tagTerm">
<span class="tagSpan">Tags:</span> <span class="tagSpan">Tags:</span>
<div class="" data-id="tagList"> <div class="" data-id="tagList">
<div class="addTag-dropdown" data-id="addTag"> <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>
</div> </div>
<hr class="termTagLine"> {{#if taxonomy}} <hr class="termTagLine"> {{#if taxonomy}}
<span class="termSpan">Terms:</span> <span class="termSpan">Terms:</span>
<div class="" data-id="termList"> <div class="" data-id="termList">
<div class="addTag-dropdown" data-id="addTerm"> <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>
</div> </div>
{{/if}} {{/if}}
...@@ -46,10 +46,19 @@ ...@@ -46,10 +46,19 @@
<div class="container-fluid gray-bg"> <div class="container-fluid gray-bg">
<div class="row"> <div class="row">
<div class="col-sm-custom"> <div class="col-sm-custom">
<div class="atlast-tabbable"> <div class="">
<h4 class="lineageLabel">LINEAGE & IMPACT</h4> <!-- <h4 class="lineageLabel"></h4> -->
<div class="panel panel-default lineageLayout"> <div class="lineageLayout">
<div id="r_lineageLayoutView" style="height:405px"> <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"> <div class="fontLoader">
<i class="fa fa-refresh fa-spin-custom"></i> <i class="fa fa-refresh fa-spin-custom"></i>
</div> </div>
...@@ -58,11 +67,21 @@ ...@@ -58,11 +67,21 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
<div class="row"> <div class="row">
<div class="col-sm-custom"> <div class="col-sm-custom">
<div class="atlast-tabbable"> <div class="panel with-nav-tabs panel-default">
<h4 class="detailLabel">DETAILS</h4> <div class="panel-heading clearfix">
<ul class="nav nav-tabs" role="tablist"> <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" 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> <li role="presentation"><a href="#tab-tagTable" aria-controls="tab-tagTable" role="tab" data-toggle="tab">Tags</a></li>
{{#if taxonomy}} {{#if taxonomy}}
...@@ -71,6 +90,8 @@ ...@@ -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"><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> <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> </ul>
</div>
</div>
<div class="tab-content"> <div class="tab-content">
<div id="tab-details" role="tabpanel" class="tab-pane active"> <div id="tab-details" role="tabpanel" class="tab-pane active">
<div id="r_entityDetailTableLayoutView" style="position: relative;"> <div id="r_entityDetailTableLayoutView" style="position: relative;">
...@@ -79,7 +100,7 @@ ...@@ -79,7 +100,7 @@
</div> </div>
</div> </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 id="r_tagTableLayoutView" style="position: relative;">
<div class="fontLoader"> <div class="fontLoader">
<i class="fa fa-refresh fa-spin-custom"></i> <i class="fa fa-refresh fa-spin-custom"></i>
...@@ -111,4 +132,6 @@ ...@@ -111,4 +132,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</div> </div>
dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html
...@@ -14,21 +14,17 @@ ...@@ -14,21 +14,17 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
--> -->
<div class="panel-body graph-bg resize-graph" align="center"> <div style="position: absolute;height: calc(100% - 45px);width: calc(100% - 30px);">
<div class="graph" id="tree-container">
</div>
<div style="position:relative">
<div class="fontLoader"> <div class="fontLoader">
<i class="fa fa-refresh fa-spin-custom"></i> <i class="fa fa-refresh fa-spin-custom"></i>
</div> </div>
<svg width=100% height=350></svg> <svg width="100%" height="100%"></svg>
<div class="legends"> <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="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> <i class="fa fa-long-arrow-right" aria-hidden="true" style="color:#fb4200;">&nbsp<span>Impact</span></i>
</div> </div>
<div class="zoomButtonGroup"> <div class="zoomButtonGroup">
<button type="button" class="zoomButton" id="zoom_in">+</button> <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>
<button type="button" class="zoomButton" id="zoom_out">-</button> <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> </div>
</div> </div>
dashboardv2/public/js/utils/Utils.js
...@@ -396,5 +396,51 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'pnotify.button ...@@ -396,5 +396,51 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'pnotify.button
loaderEl.hide(); loaderEl.hide();
titleBoxEl.fadeIn(); 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; return Utils;
}); });
dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js
...@@ -24,7 +24,8 @@ define(['require', ...@@ -24,7 +24,8 @@ define(['require',
'utils/Globals', 'utils/Globals',
'utils/Enums', 'utils/Enums',
'utils/Messages', 'utils/Messages',
'utils/UrlLinks' 'utils/UrlLinks',
'jquery-ui'
], function(require, Backbone, DetailPageLayoutViewTmpl, Utils, CommonViewFunction, Globals, Enums, Messages, UrlLinks) { ], function(require, Backbone, DetailPageLayoutViewTmpl, Utils, CommonViewFunction, Globals, Enums, Messages, UrlLinks) {
'use strict'; 'use strict';
...@@ -57,7 +58,8 @@ define(['require', ...@@ -57,7 +58,8 @@ define(['require',
addTag: '[data-id="addTag"]', addTag: '[data-id="addTag"]',
addTerm: '[data-id="addTerm"]', addTerm: '[data-id="addTerm"]',
tagList: '[data-id="tagList"]', tagList: '[data-id="tagList"]',
termList: '[data-id="termList"]' termList: '[data-id="termList"]',
fullscreenPanel: "#fullscreen_panel"
}, },
templateHelpers: function() { templateHelpers: function() {
return { return {
...@@ -197,7 +199,43 @@ define(['require', ...@@ -197,7 +199,43 @@ define(['require',
var that = this; var that = this;
Utils.showTitleLoader(this.$('.page-title .fontLoader'), this.$('.entityDetail')); Utils.showTitleLoader(this.$('.page-title .fontLoader'), this.$('.entityDetail'));
this.$('.fontLoader').show(); // to show tab loader 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() { fetchCollection: function() {
this.collection.fetch({ reset: true }); this.collection.fetch({ reset: true });
......
dashboardv2/public/js/views/graph/LineageLayoutView.js
...@@ -25,8 +25,7 @@ define(['require', ...@@ -25,8 +25,7 @@ define(['require',
'dagreD3', 'dagreD3',
'd3-tip', 'd3-tip',
'utils/Enums', 'utils/Enums',
'utils/UrlLinks', 'utils/UrlLinks'
'jquery-ui'
], function(require, Backbone, LineageLayoutViewtmpl, VLineageList, VEntity, Utils, dagreD3, d3Tip, Enums, UrlLinks) { ], function(require, Backbone, LineageLayoutViewtmpl, VLineageList, VEntity, Utils, dagreD3, d3Tip, Enums, UrlLinks) {
'use strict'; 'use strict';
...@@ -56,7 +55,7 @@ define(['require', ...@@ -56,7 +55,7 @@ define(['require',
* @constructs * @constructs
*/ */
initialize: function(options) { initialize: function(options) {
_.extend(this, _.pick(options, 'guid', 'entityDefCollection')); _.extend(this, _.pick(options, 'guid', 'entityDefCollection', 'actionCallBack'));
this.entityModel = new VEntity(); this.entityModel = new VEntity();
this.collection = new VLineageList(); this.collection = new VLineageList();
this.typeMap = {}; this.typeMap = {};
...@@ -66,13 +65,9 @@ define(['require', ...@@ -66,13 +65,9 @@ define(['require',
onRender: function() { onRender: function() {
var that = this; var that = this;
this.$('.fontLoader').show(); this.$('.fontLoader').show();
this.$(".resize-graph").resizable({ if (this.layoutRendered) {
handles: ' s', this.layoutRendered();
minHeight: 355, }
stop: function(event, ui) {
that.$('svg').height(($(this).height() - 5))
},
});
this.g = new dagreD3.graphlib.Graph() this.g = new dagreD3.graphlib.Graph()
.setGraph({ .setGraph({
nodesep: 50, nodesep: 50,
...@@ -109,6 +104,9 @@ define(['require', ...@@ -109,6 +104,9 @@ define(['require',
this.$('.fontLoader').hide(); this.$('.fontLoader').hide();
//this.$('svg').height('100'); //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>'); 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) { generateData: function(relations, guidEntityMap) {
var that = this; var that = this;
...@@ -172,9 +170,38 @@ define(['require', ...@@ -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() { createGraph: function() {
var that = this var that = this;
this.g.nodes().forEach(function(v) { this.g.nodes().forEach(function(v) {
var node = that.g.node(v); var node = that.g.node(v);
// Round the corners of the nodes // Round the corners of the nodes
...@@ -206,8 +233,23 @@ define(['require', ...@@ -206,8 +233,23 @@ define(['require',
}; };
render.shapes().img = function circle(parent, bbox, node) { render.shapes().img = function circle(parent, bbox, node) {
//var r = Math.max(bbox.width, bbox.height) / 2, //var r = Math.max(bbox.width, bbox.height) / 2,
var shapeSvg = parent.insert("image") if (node.id == that.guid) {
.attr("class", "nodeImage") 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) { .attr("xlink:href", function(d) {
if (node) { if (node) {
if (node.isProcess) { if (node.isProcess) {
...@@ -228,29 +270,25 @@ define(['require', ...@@ -228,29 +270,25 @@ define(['require',
} }
} }
} }
}).attr("x", "-12px") })
.attr("y", "-12px") .attr("x", "2")
.attr("width", "24px") .attr("y", "2")
.attr("height", "24px"); .attr("width", currentNode ? "26" : "24")
.attr("height", currentNode ? "26" : "24")
node.intersect = function(point) { node.intersect = function(point) {
//return dagreD3.intersect.circle(node, points, 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; return shapeSvg;
}; };
// Set up an SVG group so that we can translate the final graph. // 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"); svgGroup = svg.append("g");
var zoom = d3.behavior.zoom() var zoom = this.zoom = d3.behavior.zoom()
.scaleExtent([0.5, 6]) .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) { function interpolateZoom(translate, scale) {
var self = this; var self = this;
...@@ -261,7 +299,7 @@ define(['require', ...@@ -261,7 +299,7 @@ define(['require',
zoom zoom
.scale(iScale(t)) .scale(iScale(t))
.translate(iTranslate(t)); .translate(iTranslate(t));
zoomed(); that.zoomed();
}; };
}); });
} }
...@@ -295,7 +333,7 @@ define(['require', ...@@ -295,7 +333,7 @@ define(['require',
interpolateZoom([view.x, view.y], view.k); 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() var tooltip = d3Tip()
.attr('class', 'd3-tip') .attr('class', 'd3-tip')
.offset([-18, 0]) .offset([-18, 0])
...@@ -312,8 +350,9 @@ define(['require', ...@@ -312,8 +350,9 @@ define(['require',
if (value.queryText) { if (value.queryText) {
htmlStr += "<h5>Query: <span style='color:#359f89'>" + value.queryText + "</span></h5> "; htmlStr += "<h5>Query: <span style='color:#359f89'>" + value.queryText + "</span></h5> ";
} }
return htmlStr; return "<div class='tip-inner-scroll'>" + htmlStr + "</div>";
}); });
svg.call(zoom) svg.call(zoom)
.call(tooltip); .call(tooltip);
this.$('.fontLoader').hide(); this.$('.fontLoader').hide();
...@@ -325,7 +364,30 @@ define(['require', ...@@ -325,7 +364,30 @@ define(['require',
.attr("transform", "translate(2,-30)"); .attr("transform", "translate(2,-30)");
svgGroup.selectAll("g.nodes g.node") svgGroup.selectAll("g.nodes g.node")
.on('mouseenter', function(d) { .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) { .on('dblclick', function(d) {
tooltip.hide(d); tooltip.hide(d);
...@@ -334,15 +396,28 @@ define(['require', ...@@ -334,15 +396,28 @@ define(['require',
mergeBrowserUrl: false, mergeBrowserUrl: false,
trigger: true 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); 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 // Center the graph
var initialScale = 1.2; this.setGraphZoomPositionCal();
zoom.translate([(this.$('svg').width() - this.g.graph().width * initialScale) / 2, (this.$('svg').height() - this.g.graph().height * initialScale) / 2]) zoom.event(svg);
.scale(initialScale)
.event(svg);
//svg.attr('height', this.g.graph().height * initialScale + 40); //svg.attr('height', this.g.graph().height * initialScale + 40);
} }
......
dashboardv2/public/js/views/schema/SchemaLayoutView.js
...@@ -99,7 +99,7 @@ define(['require', ...@@ -99,7 +99,7 @@ define(['require',
includePagination: true, includePagination: true,
includePageSize: false, includePageSize: false,
includeFooterRecords: true, includeFooterRecords: true,
includeOrderAbleColumns: true, includeOrderAbleColumns: false,
gridOpts: { gridOpts: {
className: "table table-hover backgrid table-quickMenu", className: "table table-hover backgrid table-quickMenu",
emptyText: 'No records found!' emptyText: 'No records found!'
...@@ -204,8 +204,7 @@ define(['require', ...@@ -204,8 +204,7 @@ define(['require',
var columns = new columnCollection(that.getSchemaTableColumns()); var columns = new columnCollection(that.getSchemaTableColumns());
//columns.setPositions().sort(); //columns.setPositions().sort();
that.RSchemaTableLayoutView.show(new TableLayout(_.extend({}, that.commonTableOptions, { that.RSchemaTableLayoutView.show(new TableLayout(_.extend({}, that.commonTableOptions, {
columns: columns, columns: columns
includeOrderAbleColumns: true
}))); })));
that.$('.multiSelectTerm').hide(); that.$('.multiSelectTerm').hide();
that.$('.multiSelectTag').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