From 3378426f3520cf66ec0525382a3596ce25915a15 Mon Sep 17 00:00:00 2001 From: Matt Gilman Date: Fri, 19 Aug 2016 10:19:24 -0400 Subject: [PATCH] NIFI-2581: Keeping context menu and tooltips open when refreshing the canvas. This closes #899. --- .../webapp/js/nf/canvas/nf-canvas-utils.js | 28 +++++++---- .../src/main/webapp/js/nf/canvas/nf-canvas.js | 3 -- .../src/main/webapp/js/nf/canvas/nf-port.js | 27 +++++++---- .../main/webapp/js/nf/canvas/nf-processor.js | 27 +++++++---- .../js/nf/canvas/nf-remote-process-group.js | 46 +++++++++++-------- 5 files changed, 79 insertions(+), 52 deletions(-) diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-utils.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-utils.js index 1b26f35227..09e820e141 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-utils.js +++ b/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 - tip = getTooltipContainer().append('div') + // 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') - .html(function () { - return $('
').append(list).html(); - }); + .attr('class', 'tooltip nifi-tooltip'); + } // add the tooltip + tip.html(function () { + return $('
').append(list).html(); + }); + 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); diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js index 790d10d91d..5236e147db 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js +++ b/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(); diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port.js index 75aed00dff..544b12c4aa 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port.js +++ b/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)) { - tip = d3.select('#port-tooltips').append('div') - .attr('id', function () { - return 'run-status-tip-' + d.id; - }) - .attr('class', 'tooltip nifi-tooltip') - .html(function () { + // 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'); + } + + // 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(); + } } }); diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor.js index 536f222949..d3bbd6e972 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor.js +++ b/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)) { - tip = d3.select('#processor-tooltips').append('div') - .attr('id', function () { - return 'run-status-tip-' + d.id; - }) - .attr('class', 'tooltip nifi-tooltip') - .html(function () { + // 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'); + } + + // 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(); + } } }); diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group.js index fcb452e637..f530ba6d47 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group.js +++ b/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'); } - tip = d3.select('#remote-process-group-tooltips').append('div') - .attr('id', function () { - return 'transmission-secure-' + d.id; - }) - .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)) { - tip = d3.select('#remote-process-group-tooltips').append('div') - .attr('id', function () { - return 'authorization-issues-' + d.id; - }) - .attr('class', 'tooltip nifi-tooltip') - .html(function () { + // 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'); + } + + // 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(); + } } });