NIFI-2581: Keeping context menu and tooltips open when refreshing the canvas.

This closes #899.

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-utils.js

@@ -476,11 +476,8 @@ nf.CanvasUtils = (function () {
         bulletins: function (selection, d, getTooltipContainer, offset) {
             offset = nf.Common.isDefinedAndNotNull(offset) ? offset : 0;
 
-            // remove any existing tip if necessary
+            // get the tip
             var tip = d3.select('#bulletin-tip-' + d.id);
-            if (!tip.empty()) {
-                tip.remove();
-            }
 
             var hasBulletins = false;
             if (!nf.Common.isEmpty(d.bulletins)) {
@@ -499,17 +496,20 @@ nf.CanvasUtils = (function () {
                 // update the tooltip
                 selection.select('text.bulletin-icon')
                         .each(function () {
-                            // if there are bulletins generate a tooltip
+                            // create the tip if necessary
+                            if (tip.empty()) {
                                 tip = getTooltipContainer().append('div')
                                     .attr('id', function () {
                                         return 'bulletin-tip-' + d.id;
                                     })
-                                    .attr('class', 'tooltip nifi-tooltip')
+                                    .attr('class', 'tooltip nifi-tooltip');
-                                    .html(function () {
+                            }
+
+                            // add the tooltip
+                            tip.html(function () {
                                 return $('<div></div>').append(list).html();
                             });
 
-                            // add the tooltip
                             nf.CanvasUtils.canvasTooltip(tip, d3.select(this));
                         });
 
@@ -517,6 +517,11 @@ nf.CanvasUtils = (function () {
                 selection.select('text.bulletin-icon').style("visibility", "visible");
                 selection.select('rect.bulletin-background').style("visibility", "visible");
             } else {
+                // clean up if necessary
+                if (!tip.empty()) {
+                    tip.remove();
+                }
+
                 // update the tooltip background
                 selection.select('text.bulletin-icon').style("visibility", "hidden");
                 selection.select('rect.bulletin-background').style("visibility", "hidden");
@@ -1292,6 +1297,9 @@ nf.CanvasUtils = (function () {
          * @param {string} groupId
          */
         enterGroup: function (groupId) {
+            // hide the context menu
+            nf.ContextMenu.hide();
+
             // set the new group id
             nf.Canvas.setGroupId(groupId);
 

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js

@@ -725,9 +725,6 @@ nf.Canvas = (function () {
          */
         reload: function (options) {
             return $.Deferred(function (deferred) {
-                // hide the context menu
-                nf.ContextMenu.hide();
-
                 // issue the requests
                 var processGroupXhr = reloadProcessGroup(nf.Canvas.getGroupId(), options);
                 var statusXhr = nf.ng.Bridge.injector.get('flowStatusCtrl').reloadFlowStatus();

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port.js

@@ -357,20 +357,22 @@ nf.Port = (function () {
                 return img;
             })
             .each(function (d) {
-                // remove the existing tip if necessary
+                // get the tip
                 var tip = d3.select('#run-status-tip-' + d.id);
-                if (!tip.empty()) {
-                    tip.remove();
-                }
 
                 // if there are validation errors generate a tooltip
                 if (d.permissions.canRead && !nf.Common.isEmpty(d.component.validationErrors)) {
+                    // create the tip if necessary
+                    if (tip.empty()) {
                         tip = d3.select('#port-tooltips').append('div')
                             .attr('id', function () {
                                 return 'run-status-tip-' + d.id;
                             })
-                        .attr('class', 'tooltip nifi-tooltip')
+                            .attr('class', 'tooltip nifi-tooltip');
-                        .html(function () {
+                    }
+
+                    // update the tip
+                    tip.html(function () {
                             var list = nf.Common.formatUnorderedList(d.component.validationErrors);
                             if (list === null || list.length === 0) {
                                 return '';
@@ -381,6 +383,11 @@ nf.Port = (function () {
 
                     // add the tooltip
                     nf.CanvasUtils.canvasTooltip(tip, d3.select(this));
+                } else {
+                    // remove if necessary
+                    if (!tip.empty()) {
+                        tip.remove();
+                    }
                 }
             });
 

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor.js

@@ -608,20 +608,22 @@ nf.Processor = (function () {
                 return img;
             })
             .each(function (d) {
-                // remove the existing tip if necessary
+                // get the tip
                 var tip = d3.select('#run-status-tip-' + d.id);
-                if (!tip.empty()) {
-                    tip.remove();
-                }
 
                 // if there are validation errors generate a tooltip
                 if (d.permissions.canRead && !nf.Common.isEmpty(d.component.validationErrors)) {
+                    // create the tip if necessary
+                    if (tip.empty()) {
                         tip = d3.select('#processor-tooltips').append('div')
                             .attr('id', function () {
                                 return 'run-status-tip-' + d.id;
                             })
-                        .attr('class', 'tooltip nifi-tooltip')
+                            .attr('class', 'tooltip nifi-tooltip');
-                        .html(function () {
+                    }
+
+                    // update the tip
+                    tip.html(function () {
                             var list = nf.Common.formatUnorderedList(d.component.validationErrors);
                             if (list === null || list.length === 0) {
                                 return '';
@@ -632,6 +634,11 @@ nf.Processor = (function () {
 
                     // add the tooltip
                     nf.CanvasUtils.canvasTooltip(tip, d3.select(this));
+                } else {
+                    // remove the tip if necessary
+                    if (!tip.empty()) {
+                        tip.remove();
+                    }
                 }
             });
 

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group.js

@@ -520,18 +520,20 @@ nf.RemoteProcessGroup = (function () {
                             return icon;
                         })
                         .each(function (d) {
-                            // remove the existing tip if necessary
+                            // get the tip
                             var tip = d3.select('#transmission-secure-' + d.id);
-                            if (!tip.empty()) {
-                                tip.remove();
-                            }
 
+                            // remove the tip if necessary
+                            if (tip.empty()) {
                                 tip = d3.select('#remote-process-group-tooltips').append('div')
                                     .attr('id', function () {
                                         return 'transmission-secure-' + d.id;
                                     })
-                                .attr('class', 'tooltip nifi-tooltip')
+                                    .attr('class', 'tooltip nifi-tooltip');
-                                .text(function () {
+                            }
+
+                            // update the tip
+                            tip.text(function () {
                                     if (d.component.targetSecure === true) {
                                         return 'Site-to-Site is secure.';
                                     } else {
@@ -720,20 +722,22 @@ nf.RemoteProcessGroup = (function () {
                 return d.permissions.canRead && !nf.Common.isEmpty(d.component.authorizationIssues);
             })
             .each(function (d) {
-                // remove the existing tip if necessary
+                // get the tip
                 var tip = d3.select('#authorization-issues-' + d.id);
-                if (!tip.empty()) {
-                    tip.remove();
-                }
 
                 // if there are validation errors generate a tooltip
                 if (d.permissions.canRead && !nf.Common.isEmpty(d.component.authorizationIssues)) {
+                    // create the tip if necessary
+                    if (tip.empty()) {
                         tip = d3.select('#remote-process-group-tooltips').append('div')
                             .attr('id', function () {
                                 return 'authorization-issues-' + d.id;
                             })
-                        .attr('class', 'tooltip nifi-tooltip')
+                            .attr('class', 'tooltip nifi-tooltip');
-                        .html(function () {
+                    }
+
+                    // update the tip
+                    tip.html(function () {
                             var list = nf.Common.formatUnorderedList(d.component.authorizationIssues);
                             if (list === null || list.length === 0) {
                                 return '';
@@ -744,6 +748,10 @@ nf.RemoteProcessGroup = (function () {
 
                     // add the tooltip
                     nf.CanvasUtils.canvasTooltip(tip, d3.select(this));
+                } else {
+                    if (!tip.empty()) {
+                        tip.remove();
+                    }
                 }
             });