diff --git a/dashboardv2/public/css/scss/graph.scss b/dashboardv2/public/css/scss/graph.scss index ab0d9c8..683fdd1 100644 --- a/dashboardv2/public/css/scss/graph.scss +++ b/dashboardv2/public/css/scss/graph.scss @@ -448,4 +448,41 @@ span#zoom_in { list-style-position: inside; } +} + +.isIncomplete { + + foreignObject { + display: none; + } + + &.show { + image { + opacity: 0.2; + animation: blink 2.5s infinite; + } + + foreignObject { + display: block; + } + } + + i.fa-refresh { + + text-align: center; + margin-top: 33%; + font-size: 15px; + } + +} + + +@-webkit-keyframes blink { + from { + opacity: 0.2; + } + + to { + opacity: 0.5; + } } \ No newline at end of file diff --git a/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html b/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html index 8679c3b..dd45cc8 100644 --- a/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html +++ b/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html @@ -139,6 +139,7 @@ </div> <div class="legends pull-left" style="height: 25px; padding: 2px;"> <span style="margin-right: 8px; color:#fb4200;"><i class="fa fa-circle-o fa-fw"></i>Current Entity</span> + <span style="margin-right: 8px;"><i class="fa fa-refresh fa-fw"></i>In Progress</span> <span style="margin-right: 8px; color:#df9b00;"><i class="fa fa-long-arrow-right fa-fw"></i>Lineage</span> <span style="margin-right: 8px; color:#fb4200;"><i class="fa fa-long-arrow-right fa-fw"></i>Impact</span> </div> diff --git a/dashboardv2/public/js/views/graph/LineageLayoutView.js b/dashboardv2/public/js/views/graph/LineageLayoutView.js index bcf0428..e7b5a27 100644 --- a/dashboardv2/public/js/views/graph/LineageLayoutView.js +++ b/dashboardv2/public/js/views/graph/LineageLayoutView.js @@ -329,6 +329,7 @@ define(['require', toolTipLabel: relationObj.displayText, id: relationObj.guid, isLineage: true, + isIncomplete: relationObj.isIncomplete, entityDef: this.getEntityDef(relationObj.typeName) }, relationObj); obj["serviceType"] = this.getServiceType({ typeName: relationObj.typeName, entityDef: obj.entityDef }); @@ -559,6 +560,12 @@ define(['require', if (currentNode) { shapeSvg.attr("stroke", "#fb4200") } + if (node.isIncomplete === true) { + parent.attr("class", "isIncomplete show"); + } else { + parent.attr("class", "isIncomplete"); + } + parent.insert("defs") .append("pattern") .attr("x", "0%") @@ -625,6 +632,15 @@ define(['require', .attr("y", currentNode ? "3" : "4").attr("width", "40") .attr("height", "40"); + parent.insert("foreignObject") + .attr("x", "-25") + .attr("y", "-25") + .attr("width", "50") + .attr("height", "50") + .append("xhtml:div") + .insert("i") + .attr("class", "fa fa-refresh fa-spin-custom"); + node.intersect = function(point) { return dagreD3.intersect.circle(node, currentNode ? 24 : 21, point); }; diff --git a/dashboardv3/public/css/scss/graph.scss b/dashboardv3/public/css/scss/graph.scss index bcb506f..5d3c308 100644 --- a/dashboardv3/public/css/scss/graph.scss +++ b/dashboardv3/public/css/scss/graph.scss @@ -441,4 +441,41 @@ span#zoom_in { list-style-position: inside; } +} + +.isIncomplete { + + foreignObject { + display: none; + } + + &.show { + image { + opacity: 0.2; + animation: blink 2.5s infinite; + } + + foreignObject { + display: block; + } + } + + i.fa-refresh { + + text-align: center; + margin-top: 33%; + font-size: 15px; + } + +} + + +@-webkit-keyframes blink { + from { + opacity: 0.2; + } + + to { + opacity: 0.5; + } } \ No newline at end of file diff --git a/dashboardv3/public/js/templates/graph/LineageLayoutView_tmpl.html b/dashboardv3/public/js/templates/graph/LineageLayoutView_tmpl.html index 8679c3b..dd45cc8 100644 --- a/dashboardv3/public/js/templates/graph/LineageLayoutView_tmpl.html +++ b/dashboardv3/public/js/templates/graph/LineageLayoutView_tmpl.html @@ -139,6 +139,7 @@ </div> <div class="legends pull-left" style="height: 25px; padding: 2px;"> <span style="margin-right: 8px; color:#fb4200;"><i class="fa fa-circle-o fa-fw"></i>Current Entity</span> + <span style="margin-right: 8px;"><i class="fa fa-refresh fa-fw"></i>In Progress</span> <span style="margin-right: 8px; color:#df9b00;"><i class="fa fa-long-arrow-right fa-fw"></i>Lineage</span> <span style="margin-right: 8px; color:#fb4200;"><i class="fa fa-long-arrow-right fa-fw"></i>Impact</span> </div> diff --git a/dashboardv3/public/js/views/graph/LineageLayoutView.js b/dashboardv3/public/js/views/graph/LineageLayoutView.js index b2e2701..8dfdfc5 100644 --- a/dashboardv3/public/js/views/graph/LineageLayoutView.js +++ b/dashboardv3/public/js/views/graph/LineageLayoutView.js @@ -344,6 +344,7 @@ define(['require', toolTipLabel: relationObj.displayText, id: relationObj.guid, isLineage: true, + isIncomplete: relationObj.isIncomplete, entityDef: this.getEntityDef(relationObj.typeName) }, relationObj); obj["serviceType"] = this.getServiceType({ typeName: relationObj.typeName, entityDef: obj.entityDef }); @@ -574,6 +575,12 @@ define(['require', if (currentNode) { shapeSvg.attr("stroke", "#fb4200") } + if (node.isIncomplete === true) { + parent.attr("class", "isIncomplete show"); + } else { + parent.attr("class", "isIncomplete"); + } + parent.insert("defs") .append("pattern") .attr("x", "0%") @@ -640,6 +647,15 @@ define(['require', .attr("y", currentNode ? "3" : "4").attr("width", "40") .attr("height", "40"); + parent.insert("foreignObject") + .attr("x", "-25") + .attr("y", "-25") + .attr("width", "50") + .attr("height", "50") + .append("xhtml:div") + .insert("i") + .attr("class", "fa fa-refresh fa-spin-custom"); + node.intersect = function(point) { return dagreD3.intersect.circle(node, currentNode ? 24 : 21, point); };