ATLAS-2953: UI : Lineage show detail popup while clicking on node

dashboardv2/public/css/scss/graph.scss

@@ -189,6 +189,7 @@ g.type-TK>rect {
     height: 100%;
     width: 100%;
     overflow: hidden;
+
     .lineage-edge-details {
         position: absolute;
         left: 0;
@@ -268,10 +269,12 @@ g.type-TK>rect {
     &>div {
         display: inline-block;
     }
+
     .zoom-button-group {}
 }
 
-.lineage-fltr-panel {
+.lineage-fltr-panel,
+.lineage-search-panel {
     position: absolute;
     border: 1px solid #ccc;
     width: 250px;
@@ -296,7 +299,8 @@ g.type-TK>rect {
             word-break: break-all;
         }
 
-        .fltr-togler {
+        .fltr-togler,
+        .search-togler {
             position: absolute;
             right: 0px;
             top: 0px;
@@ -308,12 +312,105 @@ g.type-TK>rect {
         margin-top: 39px;
         width: 100%;
         position: relative;
-        height: 200px;
+        height: 150px;
         overflow: auto;
     }
 }
 
-.show-filter-panel {
+.lineage-details.node-details.open {
+    overflow: hidden !important;
+    min-height: 300px;
+
+    & span[data-id='close'] {
+        margin: 7px;
+        position: absolute;
+        right: 0;
+        z-index: 99;
+    }
+
+    & div[data-id="entityList"] {
+        position: relative;
+        overflow: auto;
+        max-height: 250px;
+        top: 40px;
+    }
+
+    & h4.title {
+        position: fixed;
+        width: 100%;
+    }
+
+    & table {
+        & tbody td {
+            word-wrap: break-word
+        }
+
+        table-layout: fixed;
+    }
+}
+
+.lineage-details {
+    position: absolute;
+    left: 0;
+    overflow: auto;
+    top: 0px;
+    max-height: 100%;
+    box-shadow: 4px 13px 14px -12px;
+    background: #e7e7e7;
+    transform: scaleX(0);
+    width: 35%;
+    transition: transform 0.3s ease-in;
+
+    &.open {
+        transform: scaleX(1);
+    }
+
+    .title {
+        background: black;
+        color: white;
+        padding: 10px 38px 10px 10px;
+        word-break: break-all;
+        margin-top: 0;
+    }
+
+    .close-details {
+        position: absolute;
+        top: 0;
+        color: white;
+        left: 0;
+        height: 21px;
+        width: 21px;
+        cursor: pointer;
+        font-size: 16px;
+    }
+
+    .entity-list {
+        overflow: auto;
+        list-style-type: decimal;
+        list-style-position: outside;
+        padding-left: 15px;
+    }
+
+    ul>li {
+        word-wrap: break-word;
+        margin-bottom: 5px;
+        text-align: left;
+
+        &.deleted-relation {
+            a {
+                color: #BB5838 !important;
+            }
+
+            .deleteBtn {
+                padding: 2px 8px !important;
+                margin: 5px 5px !important;
+            }
+        }
+    }
+}
+
+.show-filter-panel,
+.show-search-panel {
     right: 0px !important;
 }
 
@@ -361,13 +458,16 @@ span#zoom_in {
     padding: 0 !important;
     z-index: 999;
     overflow: hidden !important;
+
     .resizeGraph {
         position: fixed;
         height: 100% !important;
+
         .ui-resizable-handle {
             display: none;
         }
     }
+
     .lineage-box {
         padding: 10px !important;
     }

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

@@ -67,4 +67,10 @@
         <span style="margin-right: 8px; color:#fb4200;"><i class="fa fa-long-arrow-right fa-fw" aria-hidden="true"></i>Impact</span>
     </div>
     <svg width="100%" height="calc(100% - 28px)" viewBox="0 0 854 330" enable-background="new 0 0 854 330" xml:space="preserve"></svg>
+    <div class="lineage-details node-details">
+        <span data-id="close" style="margin: 7px;position: absolute;right: 0" class="btn btn-action btn-sm fltr-togler"><i class="fa fa-close"></i></span>
+        <h4 class="title"><span data-id="typeName"></span></h4>
+        <div class="col-md-12" data-id="entityList">
+        </div>
+    </div>
 </div>
\ No newline at end of file

dashboardv2/public/js/views/graph/LineageLayoutView.js

@@ -51,7 +51,9 @@ define(['require',
                 selectDepth: 'select[data-id="selectDepth"]',
                 fltrTogler: '[data-id="fltr-togler"]',
                 lineageFilterPanel: '.lineage-fltr-panel',
-                LineageFullscreenToggler: '[data-id="fullScreen-toggler"]'
+                LineageFullscreenToggler: '[data-id="fullScreen-toggler"]',
+                lineageDetailClose: '[data-id="close"]',
+                nodeEntityList: '[data-id="entityList"]'
             },
 
             /** ui events hash */
@@ -62,6 +64,9 @@ define(['require',
                 events['change ' + this.ui.selectDepth] = 'onSelectDepthChange';
                 events["click " + this.ui.fltrTogler] = 'onClickFiltrTogler';
                 events["click " + this.ui.LineageFullscreenToggler] = 'onClickLineageFullscreenToggler';
+                events["click " + this.ui.lineageDetailClose] = function() {
+                    this.toggleLineageInfomationSlider({ close: true });
+                };
                 return events;
             },
 
@@ -133,7 +138,7 @@ define(['require',
                 });
             },
             onClickLineageFullscreenToggler: function(e) {
-                var icon = $(e.target).find('i'),
+                var icon = $(e.currentTarget).find('i'),
                     panel = $(e.target).parents('.tab-pane').first();
                 icon.toggleClass('fa-expand fa-compress');
                 panel.toggleClass('fullscreen-mode');
@@ -153,7 +158,6 @@ define(['require',
                 var lineageFilterPanel = this.ui.lineageFilterPanel;
                 $(lineageFilterPanel).toggleClass("show-filter-panel");
             },
-
             onSelectDepthChange: function(e, options) {
                 this.initializeGraph();
                 this.filterObj.depthCount = e.currentTarget.value;
@@ -438,6 +442,7 @@ define(['require',
                     var shapeSvg = parent.append('circle')
                         .attr('fill', 'url(#img_' + node.id + ')')
                         .attr('r', '24px')
+                        .attr('data-stroke',node.id)
                         .attr("class", "nodeImage " + (currentNode ? "currentNode" : (node.isProcess ? "process" : "node")));
 
                     parent.insert("defs")
@@ -597,6 +602,19 @@ define(['require',
                                 tooltip.hide(d);
                             }
                         }, 400)
+                    }).on('click', function(d) {
+                        if (d3.event.defaultPrevented) return; // ignore drag
+                        that.toggleLineageInfomationSlider({ open: true, obj: d });
+                        svgGroup.selectAll('[data-stroke]').attr('stroke','none');
+                        svgGroup.selectAll('[data-stroke]').attr('stroke',function(c) {
+                            if (c == d) {
+                                return "#316132";
+                            } else {
+                                return 'none';
+                            }
+                        })
+                        that.updateRelationshipDetails({ obj: d });
+
                     });
                 svgGroup.selectAll("g.edgePath path.path").on('click', function(d) {
                     var data = { obj: _.find(that.lineageData.relations, { "fromEntityId": d.v, "toEntityId": d.w }) },
@@ -641,6 +659,61 @@ define(['require',
                         }, 1000);
                     });
                 }
+            },
+            toggleLineageInfomationSlider: function(options) {
+                if (options.open && !this.$('.lineage-details').hasClass("open")) {
+                    this.$('.lineage-details').addClass('open');
+                } else if (options.close && this.$('.lineage-details').hasClass("open")) {
+                    d3.selectAll('circle').attr("stroke", "none");
+                    this.$('.lineage-details').removeClass('open');
+                }
+            },
+            updateRelationshipDetails: function(options) {
+                var that = this;
+                var lineageData;
+                for (var x in that.lineageData.guidEntityMap) {
+                    if (x == options.obj) {
+                        lineageData = that.lineageData.guidEntityMap[x]
+                    }
+                }
+                var data = lineageData,
+                    typeName = data.typeName || options.obj.name,
+                    searchString = options.searchString,
+                    listString = "";
+                this.$("[data-id='typeName']").text(typeName);
+                var getElement = function(options) {
+                    var showCofig = [
+                        "meaningNames",
+                        "meanings",
+                        "classificationNames",
+                        {
+                            "attributes": [
+                                "description",
+                                "name",
+                                "qualifiedName"
+                            ]
+                        }
+                    ];
+                    var tbody = '';
+                    for (var x = 0; x < showCofig.length; x++) {
+                        if (typeof showCofig[x] === "object") {
+                            _.each(showCofig[x].attributes, function(element, index, list) {
+                                var dataToShow = data.attributes[element] ? data.attributes[element] : "N/A";
+                                tbody += '<tr><td class="html-cell renderable">' + element + '</td><td  class="html-cell renderable">' + dataToShow + '</td></tr>';
+                            })
+                        } else {
+                            var dataToShow = data[showCofig[x]] ? data[showCofig[x]] : "N/A";
+                            dataToShow = dataToShow && dataToShow.length > 0 ? dataToShow : "N/A";
+                            tbody += '<tr><td class="html-cell renderable">' + showCofig[x] + '</td><td class="html-cell renderable">' + dataToShow + '</td></tr>';
+                        }
+                    }
+                    var thead = '<thead><tr><th class="renderable">Type</th><th class="renderable">Details</th></thead>';
+                    var table = '<table style="word-wrap: break-word;" class="table table-hover ">' + thead + '<tbody>' + tbody + '</body></table>';
+                    return table;
+
+                }
+                listString += getElement(data);
+                this.ui.nodeEntityList.html(listString);
             }
         });
     return LineageLayoutView;