Repository: incubator-atlas Updated Branches: refs/heads/0.8-incubating 1ded74614 -> 22003b0b7
ATLAS-1688: fix lineage UI resize issues Signed-off-by: Madhan Neethiraj <[email protected]> (cherry picked from commit d0cb5c37df9a99f79f2be23c40f693417ae2a26a) Project: http://git-wip-us.apache.org/repos/asf/incubator-atlas/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-atlas/commit/22003b0b Tree: http://git-wip-us.apache.org/repos/asf/incubator-atlas/tree/22003b0b Diff: http://git-wip-us.apache.org/repos/asf/incubator-atlas/diff/22003b0b Branch: refs/heads/0.8-incubating Commit: 22003b0b7ccfd7ca4ae6f5b9dccc764e67609147 Parents: 1ded746 Author: kalyani <[email protected]> Authored: Mon Apr 3 18:38:08 2017 +0530 Committer: Madhan Neethiraj <[email protected]> Committed: Mon Apr 3 07:22:37 2017 -0700 ---------------------------------------------------------------------- dashboardv2/public/css/scss/graph.scss | 54 ++++--- dashboardv2/public/css/scss/main.scss | 19 ++- dashboardv2/public/css/scss/override.scss | 2 +- dashboardv2/public/css/scss/panel.scss | 62 ++++++-- dashboardv2/public/css/scss/tab.scss | 4 +- dashboardv2/public/css/scss/theme.scss | 2 +- .../detail_page/DetailPageLayoutView_tmpl.html | 113 ++++++++------ .../templates/graph/LineageLayoutView_tmpl.html | 26 ++-- dashboardv2/public/js/utils/Utils.js | 46 ++++++ .../views/detail_page/DetailPageLayoutView.js | 44 +++++- .../public/js/views/graph/LineageLayoutView.js | 153 ++++++++++++++----- .../public/js/views/schema/SchemaLayoutView.js | 5 +- 12 files changed, 383 insertions(+), 147 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/22003b0b/dashboardv2/public/css/scss/graph.scss ---------------------------------------------------------------------- diff --git a/dashboardv2/public/css/scss/graph.scss b/dashboardv2/public/css/scss/graph.scss index 3ff38b8..feb9c10 100644 --- a/dashboardv2/public/css/scss/graph.scss +++ b/dashboardv2/public/css/scss/graph.scss @@ -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 { + circle { + -moz-transition: all 0.3s; + -webkit-transition: all 0.3s; + transition: all 0.3s; + stroke-width: 1.5px; &.nodeImage { - -moz-transition: all 0.3s; - -webkit-transition: all 0.3s; - transition: all 0.3s; + &.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; http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/22003b0b/dashboardv2/public/css/scss/main.scss ---------------------------------------------------------------------- diff --git a/dashboardv2/public/css/scss/main.scss b/dashboardv2/public/css/scss/main.scss index 47a2c72..3e6e77f 100644 --- a/dashboardv2/public/css/scss/main.scss +++ b/dashboardv2/public/css/scss/main.scss @@ -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; +} http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/22003b0b/dashboardv2/public/css/scss/override.scss ---------------------------------------------------------------------- diff --git a/dashboardv2/public/css/scss/override.scss b/dashboardv2/public/css/scss/override.scss index 48ab1a6..38e120f 100644 --- a/dashboardv2/public/css/scss/override.scss +++ b/dashboardv2/public/css/scss/override.scss @@ -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; http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/22003b0b/dashboardv2/public/css/scss/panel.scss ---------------------------------------------------------------------- diff --git a/dashboardv2/public/css/scss/panel.scss b/dashboardv2/public/css/scss/panel.scss index 8f345e8..d1c2961 100644 --- a/dashboardv2/public/css/scss/panel.scss +++ b/dashboardv2/public/css/scss/panel.scss @@ -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; } - .panel-footer { - margin-bottom: 0; + .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; + } + } +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/22003b0b/dashboardv2/public/css/scss/tab.scss ---------------------------------------------------------------------- diff --git a/dashboardv2/public/css/scss/tab.scss b/dashboardv2/public/css/scss/tab.scss index ada0bdf..9b67e2c 100644 --- a/dashboardv2/public/css/scss/tab.scss +++ b/dashboardv2/public/css/scss/tab.scss @@ -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 { http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/22003b0b/dashboardv2/public/css/scss/theme.scss ---------------------------------------------------------------------- diff --git a/dashboardv2/public/css/scss/theme.scss b/dashboardv2/public/css/scss/theme.scss index 2874e23..5cf8848 100644 --- a/dashboardv2/public/css/scss/theme.scss +++ b/dashboardv2/public/css/scss/theme.scss @@ -70,7 +70,7 @@ .page-title { background-color: $white; - padding: 50px; + padding: 25px; h1 { margin-top: 50px; margin-bottom: 10px; http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/22003b0b/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 710404d..3177c7e 100644 --- a/dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html +++ b/dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html @@ -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,12 +46,23 @@ <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="fontLoader"> - <i class="fa fa-refresh fa-spin-custom"></i> + <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> + </div> </div> </div> </div> @@ -60,50 +71,61 @@ </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"> - <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}} - <li role="presentation"><a href="#tab-termTable" aria-controls="tab-termTable" role="tab" data-toggle="tab">Terms</a></li> - {{/if}} - <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 class="tab-content"> - <div id="tab-details" role="tabpanel" class="tab-pane active"> - <div id="r_entityDetailTableLayoutView" style="position: relative;"> - <div class="fontLoader"> - <i class="fa fa-refresh fa-spin-custom"></i> - </div> + <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}} + <li role="presentation"><a href="#tab-termTable" aria-controls="tab-termTable" role="tab" data-toggle="tab">Terms</a></li> + {{/if}} + <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 id="tab-tagTable" role="tabpanel" class="tab-pane"> - <div id="r_tagTableLayoutView" style="position: relative;"> - <div class="fontLoader"> - <i class="fa fa-refresh fa-spin-custom"></i> + <div class="tab-content"> + <div id="tab-details" role="tabpanel" class="tab-pane active"> + <div id="r_entityDetailTableLayoutView" style="position: relative;"> + <div class="fontLoader"> + <i class="fa fa-refresh fa-spin-custom"></i> + </div> </div> </div> - </div> - <div id="tab-termTable" role="tabpanel" class="tab-pane"> - <div id="r_termTableLayoutView" style="position: relative;"> - <div class="fontLoader"> - <i class="fa fa-refresh fa-spin-custom"></i> + <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> + </div> </div> </div> - </div> - <div id="tab-audit" role="tabpanel" class="tab-pane"> - <div id="r_auditTableLayoutView" style="position: relative;"> - <div class="fontLoader"> - <i class="fa fa-refresh fa-spin-custom"></i> + <div id="tab-termTable" role="tabpanel" class="tab-pane"> + <div id="r_termTableLayoutView" style="position: relative;"> + <div class="fontLoader"> + <i class="fa fa-refresh fa-spin-custom"></i> + </div> </div> </div> - </div> - <div id="tab-schema" role="tabpanel" class="tab-pane"> - <div id="r_schemaTableLayoutView" style="position: relative;"> - <div class="fontLoader"> - <i class="fa fa-refresh fa-spin-custom"></i> + <div id="tab-audit" role="tabpanel" class="tab-pane"> + <div id="r_auditTableLayoutView" style="position: relative;"> + <div class="fontLoader"> + <i class="fa fa-refresh fa-spin-custom"></i> + </div> + </div> + </div> + <div id="tab-schema" role="tabpanel" class="tab-pane"> + <div id="r_schemaTableLayoutView" style="position: relative;"> + <div class="fontLoader"> + <i class="fa fa-refresh fa-spin-custom"></i> + </div> </div> </div> </div> @@ -112,3 +134,4 @@ </div> </div> </div> +</div> http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/22003b0b/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 ec01f3f..7b79e09 100644 --- a/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html +++ b/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html @@ -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 style="position: absolute;height: calc(100% - 45px);width: calc(100% - 30px);"> + <div class="fontLoader"> + <i class="fa fa-refresh fa-spin-custom"></i> </div> - <div style="position:relative"> - <div class="fontLoader"> - <i class="fa fa-refresh fa-spin-custom"></i> - </div> - <svg width=100% height=350></svg> - <div class="legends"> - <i class="fa fa-long-arrow-right" aria-hidden="true" style="margin-right: 12px; color:#8bc152;"> <span>Lineage</span></i> - <i class="fa fa-long-arrow-right" aria-hidden="true" style="color:#fb4200;"> <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> + <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;"> <span>Lineage</span></i> + <i class="fa fa-long-arrow-right" aria-hidden="true" style="color:#fb4200;"> <span>Impact</span></i> + </div> + <div class="zoomButtonGroup"> + <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> http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/22003b0b/dashboardv2/public/js/utils/Utils.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/utils/Utils.js b/dashboardv2/public/js/utils/Utils.js index da304f5..6a70b8c 100644 --- a/dashboardv2/public/js/utils/Utils.js +++ b/dashboardv2/public/js/utils/Utils.js @@ -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; }); http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/22003b0b/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 49953fd..613064f 100644 --- a/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js +++ b/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js @@ -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 }); http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/22003b0b/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 059c689..f98672b 100644 --- a/dashboardv2/public/js/views/graph/LineageLayoutView.js +++ b/dashboardv2/public/js/views/graph/LineageLayoutView.js @@ -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) { - tooltip.hide(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); } http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/22003b0b/dashboardv2/public/js/views/schema/SchemaLayoutView.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/views/schema/SchemaLayoutView.js b/dashboardv2/public/js/views/schema/SchemaLayoutView.js index 309c362..75714f0 100644 --- a/dashboardv2/public/js/views/schema/SchemaLayoutView.js +++ b/dashboardv2/public/js/views/schema/SchemaLayoutView.js @@ -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();
