ATLAS-3059: UI : Lineage data structure change to support hide deleted and hide…

dashboardv2/public/css/scss/graph.scss

@@ -34,6 +34,8 @@
         font-family: $font_1;
     }
 
+    transition: opacity 0.3s linear;
+
     rect {
         stroke: $color_mountain_mist_approx;
         fill: $white;
@@ -279,8 +281,7 @@ g.type-TK>rect {
     .zoom-button-group {}
 }
 
-.lineage-fltr-panel,
-.lineage-search-panel {
+.box-panel {
     position: absolute;
     top: 45px;
     border: 1px solid #ccc;
@@ -417,7 +418,8 @@ g.type-TK>rect {
 }
 
 .show-filter-panel,
-.show-search-panel {
+.show-search-panel,
+.show-box-panel {
     right: 0px !important;
 }
 
@@ -501,4 +503,20 @@ span#zoom_in {
 
 .wobble {
     animation: zoominoutsinglefeatured 1s 5;
+}
+
+.hover {
+
+    g.node {
+        opacity: 0.1 !important;
+    }
+
+    g.edgePath {
+        opacity: 0 !important;
+    }
+
+    g.node.hover-active,
+    g.edgePath.hover-active-node {
+        opacity: 1 !important;
+    }
 }
\ No newline at end of file

dashboardv2/public/css/scss/relationship.scss

@@ -16,11 +16,13 @@
  * limitations under the License.
  */
 
-.relationship-box {
+.relationship-box,
+.lineage-box {
     position: absolute;
     height: 100%;
     width: 100%;
     overflow: hidden;
+
     .relatioship-link {
         fill: none;
         stroke-width: 1.5px;

dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html

@@ -16,10 +16,10 @@
 -->
 <!-- <div class="graph-toolbar clearfix"></div> -->
 <div class="white-bg no-padding lineage-box">
-    <div class="lineage-fltr-panel">
+    <div class="box-panel filter-box">
         <div class="header clearfix">
             <h4>Filters</h4>
-            <span data-id="fltr-togler" style="margin: 7px" class="btn btn-action btn-sm fltr-togler"><i class="fa fa-close"></i></span>
+            <span data-id="box-close" style="margin: 7px" class="btn btn-action btn-sm fltr-togler"><i class="fa fa-close"></i></span>
         </div>
         <div class="body">
             <div class="hideProcessContainer form-group text-left col-sm-12">
@@ -46,10 +46,10 @@
             </div>
         </div>
     </div>
-    <div class="lineage-search-panel">
+    <div class="box-panel search-box">
         <div class="header clearfix">
             <h4>Search</h4>
-            <span data-id="search-togler" style="margin: 7px" class="btn btn-action btn-sm fltr-togler"><i class="fa fa-close"></i></span>
+            <span data-id="box-close" style="margin: 7px" class="btn btn-action btn-sm fltr-togler"><i class="fa fa-close"></i></span>
         </div>
         <div class="body">
             <div class="col-sm-12 no-padding">
@@ -64,12 +64,39 @@
             </div>
         </div>
     </div>
+    <div class="box-panel setting-box">
+        <div class="header clearfix">
+            <h4>Settings</h4>
+            <span data-id="box-close" style="margin: 7px" class="btn btn-action btn-sm fltr-togler"><i class="fa fa-close"></i></span>
+        </div>
+        <div class="body">
+            <div class="showOnlyHoverPath form-group text-left col-sm-12">
+                <div class="pretty p-switch p-fill">
+                    <input type="checkbox" checked class="pull-left" data-id="showOnlyHoverPath" value="" />
+                    <div class="state p-primary">
+                        <label>On hover show current path</label>
+                    </div>
+                </div>
+            </div>
+            <div class="showTooltip form-group text-left col-sm-12">
+                <div class="pretty p-switch p-fill">
+                    <input type="checkbox" class="pull-left" data-id="showTooltip" value="" />
+                    <div class="state p-primary">
+                        <label>Show node details on hover</label>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
     <div class="graph-button-group pull-right">
         <div>
-            <button type="button" data-id="fltr-togler" class="btn btn-action btn-gray btn-sm"><i class="fa fa-filter"></i></button>
+            <button type="button" data-id="setting-toggler" class="btn btn-action btn-gray btn-sm"><i class="fa fa-gear"></i></button>
+        </div>
+        <div>
+            <button type="button" data-id="filter-toggler" class="btn btn-action btn-gray btn-sm"><i class="fa fa-filter"></i></button>
         </div>
         <div>
-            <button type="button" data-id="search-togler" class="btn btn-action btn-gray btn-sm"><i class="fa fa-search"></i></button>
+            <button type="button" data-id="search-toggler" class="btn btn-action btn-gray btn-sm"><i class="fa fa-search"></i></button>
         </div>
         <div>
             <button type="button" data-id="fullScreen-toggler" class="btn btn-action btn-gray btn-sm fullscreen_lineage"><i class="fa fa-expand"></i></button>