atlas-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From mad...@apache.org
Subject incubator-atlas git commit: ATLAS-1688: fix lineage UI resize issues
Date Mon, 03 Apr 2017 14:22:47 GMT
Repository: incubator-atlas
Updated Branches:
  refs/heads/0.8-incubating 1ded74614 -> 22003b0b7


ATLAS-1688: fix lineage UI resize issues

Signed-off-by: Madhan Neethiraj <madhan@apache.org>
(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 <kalyani.kashikar@freestoneinfotech.com>
Authored: Mon Apr 3 18:38:08 2017 +0530
Committer: Madhan Neethiraj <madhan@apache.org>
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;">&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>
+    <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">
+        <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();



Mime
View raw message