From 14d5e97e188ffbf91f2b3b92a721311d5b7a9e9e Mon Sep 17 00:00:00 2001 From: Scott Aslan Date: Tue, 18 Oct 2016 12:59:48 -0400 Subject: [PATCH] [NIFI-2888] Display processor fill color when sufficiently zoomed out. --- .../src/main/webapp/js/nf/canvas/nf-canvas.js | 3 + .../webapp/js/nf/canvas/nf-connectable.js | 12 +- .../src/main/webapp/js/nf/canvas/nf-funnel.js | 27 ++ .../src/main/webapp/js/nf/canvas/nf-graph.js | 1 + .../src/main/webapp/js/nf/canvas/nf-port.js | 118 ++++++--- .../webapp/js/nf/canvas/nf-process-group.js | 133 ++++++---- .../main/webapp/js/nf/canvas/nf-processor.js | 234 ++++++++++-------- .../js/nf/canvas/nf-remote-process-group.js | 126 ++++++---- .../src/main/webapp/js/nf/nf-common.js | 14 ++ 9 files changed, 424 insertions(+), 244 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.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 5076dc8104b0..b8ac2526147e 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 @@ -1161,6 +1161,9 @@ nf.Canvas = (function () { $.each(graph.remoteProcessGroups, function (_, d) { updateVisibility(d, isComponentVisible); }); + $.each(graph.funnels, function (_, d) { + updateVisibility(d, isComponentVisible); + }); $.each(graph.connections, function (_, d) { updateVisibility(d, isConnectionVisible); }); diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connectable.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connectable.js index d81c3f591d20..d96685058826 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connectable.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connectable.js @@ -220,7 +220,17 @@ nf.Connectable = (function () { 'class': 'add-connect', 'transform': 'translate(' + x + ', ' + y + ')' }) - .text('\ue834'); + .text('\ue834').style('fill', function (d) { + if (selection.classed('visible')) { + return '#004849'; + } else { + var processorRectBody = selection.select('rect.body'); + return nf.Common.determineContrastColor( + nf.Common.substringAfterLast( + d3.rgb(processorRectBody.style('fill')).toString(), '#' + )); + } + }); } } } diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-funnel.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-funnel.js index 543cd6d79b91..588e2aa50512 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-funnel.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-funnel.js @@ -149,6 +149,26 @@ nf.Funnel = (function () { // update the component behavior as appropriate nf.CanvasUtils.editable(funnel); + + var funnelRectBody = funnel.select('rect.body') + .style('fill', function (d) { + if (funnel.classed('visible')) { + return '#ffffff'; + } else { + return '#ad9897'; + } + }); + funnel.select('text.funnel-icon') + .style('fill', function (d) { + if (funnel.classed('visible')) { + return nf.Processor.defaultColor(); + } else { + return nf.Common.determineContrastColor( + nf.Common.substringAfterLast( + d3.rgb(funnelRectBody.style('fill')).toString(), '#' + )); + } + }); }); }; @@ -298,6 +318,13 @@ nf.Funnel = (function () { } }, + /** + * Refreshes the funnels necessary after a pan event. + */ + pan: function () { + d3.selectAll('g.funnel.entering, g.funnel.leaving').call(updateFunnels); + }, + /** * Reloads the funnel state from the server and refreshes the UI. * If the funnel is currently unknown, this function just returns. diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-graph.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-graph.js index cf333944e155..3e01246b9f32 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-graph.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-graph.js @@ -184,6 +184,7 @@ nf.Graph = (function () { pan: function () { // refresh the components nf.Port.pan(); + nf.Funnel.pan(); nf.RemoteProcessGroup.pan(); nf.ProcessGroup.pan(); nf.Processor.pan(); 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 5b58d443ae78..f2ede3a1aa14 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 @@ -132,7 +132,8 @@ nf.Port = (function () { return d.dimensions.width; }, 'height': offset, - 'fill': '#e3e8eb' + 'fill': '#e3e8eb', + 'class': 'port-header' }); } @@ -269,48 +270,9 @@ nf.Port = (function () { }); } - if (portData.permissions.canRead) { - // update the port name - port.select('text.port-name') - .each(function (d) { - var portName = d3.select(this); - var name = d.component.name; - var words = name.split(/\s+/); - - // reset the port name to handle any previous state - portName.text(null).selectAll('tspan, title').remove(); - - // handle based on the number of tokens in the port name - if (words.length === 1) { - // apply ellipsis to the port name as necessary - nf.CanvasUtils.ellipsis(portName, name); - } else { - nf.CanvasUtils.multilineEllipsis(portName, 2, name); - } - }).append('title').text(function (d) { - return d.component.name; - }); - } else { - // clear the port name - port.select('text.port-name').text(null); - } - // populate the stats port.call(updatePortStatus); } else { - if (portData.permissions.canRead) { - // update the port name - port.select('text.port-name') - .text(function (d) { - var name = d.component.name; - if (name.length > PREVIEW_NAME_LENGTH) { - return name.substring(0, PREVIEW_NAME_LENGTH) + String.fromCharCode(8230); - } else { - return name; - } - }); - } - // remove tooltips if necessary port.call(removeTooltips); @@ -319,9 +281,85 @@ nf.Port = (function () { details.remove(); } } + + // enhance color for usability + port.call(enhancePortReadability, portData); }); }; + /** + * Enhances the readability of the port in the specified selection. + * + * @param {selection} processGroup The port to update. + * @param {object} portData The port data. + */ + var enhancePortReadability = function (port, portData) { + var portRectBody = port.select('rect.body') + .style('fill', function (d) { + if (port.classed('visible')) { + return '#ffffff'; + } else { + return '#bbdcde'; + } + }); + port.select('rect.port-header') + .style('fill', function (d) { + if (port.classed('visible')) { + return '#e3e8eb'; + } else { + return '#bbdcde'; + } + }); + port.select('text.port-icon') + .style('fill', function (d) { + if (port.classed('visible')) { + return nf.Processor.defaultColor(); + } else { + return nf.Common.determineContrastColor( + nf.Common.substringAfterLast( + d3.rgb(portRectBody.style('fill')).toString(), '#' + )); + } + }); + + if (portData.permissions.canRead) { + // update the port name + port.select('text.port-name') + .each(function (d) { + var portName = d3.select(this); + var name = d.component.name; + var words = name.split(/\s+/); + + // reset the port name to handle any previous state + portName.text(null).selectAll('tspan, title').remove(); + + portName.style('fill', function (d) { + if (port.classed('visible')) { + return '#262626'; + } else { + return nf.Common.determineContrastColor( + nf.Common.substringAfterLast( + d3.rgb(portRectBody.style('fill')).toString(), '#' + )); + } + }); + + // handle based on the number of tokens in the port name + if (words.length === 1) { + // apply ellipsis to the port name as necessary + nf.CanvasUtils.ellipsis(portName, name); + } else { + nf.CanvasUtils.multilineEllipsis(portName, 2, name); + } + }).append('title').text(function (d) { + return d.component.name; + }); + } else { + // clear the port name + port.select('text.port-name').text(null); + } + } + /** * Updates the port status. * diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group.js index 80c7eec6b6ae..f73dcf92740c 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group.js @@ -131,7 +131,8 @@ nf.ProcessGroup = (function () { return d.dimensions.width; }, 'height': 32, - 'fill': '#b8c6cd' + 'fill': '#b8c6cd', + 'class': 'process-group-header' }); // process group name @@ -144,17 +145,6 @@ nf.ProcessGroup = (function () { 'class': 'process-group-name' }); - // process group preview - processGroup.append('image') - .call(nf.CanvasUtils.disableImageHref) - .attr({ - 'width': 352, - 'height': 113, - 'x': 6, - 'y': 22, - 'class': 'process-group-preview' - }); - // always support selecting and navigation processGroup.on('dblclick', function (d) { // enter this group on double click @@ -572,7 +562,7 @@ nf.ProcessGroup = (function () { 'y': 60, 'class': 'process-group-out stats-value' }); - + // out ports outText.append('tspan') .attr({ @@ -791,50 +781,14 @@ nf.ProcessGroup = (function () { }).append('title').text(function (d) { return getProcessGroupComments(d); }); - - // update the process group name - processGroup.select('text.process-group-name') - .each(function (d) { - var processGroupName = d3.select(this); - - // reset the process group name to handle any previous state - processGroupName.text(null).selectAll('title').remove(); - - // apply ellipsis to the process group name as necessary - nf.CanvasUtils.ellipsis(processGroupName, d.component.name); - }).append('title').text(function (d) { - return d.component.name; - }); } else { // clear the process group comments details.select('text.process-group-comments').text(null); - - // clear the process group name - processGroup.select('text.process-group-name').text(null); } - // hide the preview - processGroup.select('image.process-group-preview').style('display', 'none'); - // populate the stats processGroup.call(updateProcessGroupStatus); } else { - if (processGroupData.permissions.canRead) { - // update the process group name - processGroup.select('text.process-group-name') - .text(function (d) { - var name = d.component.name; - if (name.length > PREVIEW_NAME_LENGTH) { - return name.substring(0, PREVIEW_NAME_LENGTH) + String.fromCharCode(8230); - } else { - return name; - } - }); - } - - // show the preview - processGroup.select('image.process-group-preview').style('display', 'block'); - // remove the tooltips processGroup.call(removeTooltips); @@ -843,9 +797,86 @@ nf.ProcessGroup = (function () { details.remove(); } } + + // enhance color for usability + processGroup.call(enhanceProcessorGroupReadability, processGroupData); }); }; + /** + * Enhances the readability of the process group in the specified selection. + * + * @param {selection} processGroup The process group to update. + * @param {object} processGroupData The process group data. + */ + var enhanceProcessorGroupReadability = function (processGroup, processGroupData) { + var processGroupRectBody = processGroup.select('rect.body') + .style('fill', function (d) { + if (processGroup.classed('visible')) { + return '#ffffff'; + } else { + return '#728e9b'; + } + }); + processGroup.select('rect.process-group-header') + .style('fill', function (d) { + if (processGroup.classed('visible')) { + return '#b8c6cd'; + } else { + return '#728e9b'; + } + }); + + if (processGroupData.permissions.canRead) { + // update the process group name + if (processGroup.classed('visible')) { + processGroup.select('text.process-group-name') + .each(function (d) { + var processGroupName = d3.select(this); + + // reset the process group name to handle any previous state + processGroupName.text(null).selectAll('title').remove(); + + processGroupName.style('fill', function (d) { + if (processGroup.classed('visible')) { + return '#262626'; + } else { + return nf.Common.determineContrastColor( + nf.Common.substringAfterLast( + d3.rgb(processGroupRectBody.style('fill')).toString(), '#' + )); + } + }); + + // apply ellipsis to the process group name as necessary + nf.CanvasUtils.ellipsis(processGroupName, d.component.name); + }).append('title').text(function (d) { + return d.component.name; + }); + } else { + processGroup.select('text.process-group-name') + .text(function (d) { + var name = d.component.name; + if (name.length > PREVIEW_NAME_LENGTH) { + return name.substring(0, PREVIEW_NAME_LENGTH) + String.fromCharCode(8230); + } else { + return name; + } + }) + .style('fill', function (d) { + return nf.Common.determineContrastColor( + nf.Common.substringAfterLast( + d3.rgb(processGroupRectBody.style('fill')).toString(), '#' + )); + }); + + } + } else { + // clear the process group name + processGroup.select('text.process-group-name').text(null); + } + } + /** * Updates the process group status. * @@ -897,7 +928,7 @@ nf.ProcessGroup = (function () { .text(function (d) { return d.outputPortCount + ' ' + String.fromCharCode(8594) + ' '; }); - + // out count value updated.select('text.process-group-out tspan.count') .text(function (d) { @@ -1017,7 +1048,7 @@ nf.ProcessGroup = (function () { selection.enter().call(renderProcessGroups, selectAll); selection.call(updateProcessGroups); }, - + /** * Populates the graph with the specified process groups. * 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 183d1b5d85ff..936fe9173f6f 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 @@ -122,17 +122,6 @@ nf.Processor = (function () { }) .text('\ue807'); - // processor stats preview - processor.append('image') - .call(nf.CanvasUtils.disableImageHref) - .attr({ - 'width': 294, - 'height': 58, - 'x': 8, - 'y': 35, - 'class': 'processor-stats-preview' - }); - // make processors selectable processor.call(nf.Selectable.activate).call(nf.ContextMenu.activate); }; @@ -161,6 +150,30 @@ nf.Processor = (function () { updated.each(function (processorData) { var processor = d3.select(this); + var info = processor.select('g.processor-canvas-info'); + + if (info.empty()) { + info = processor.append('g').attr('class', 'processor-canvas-info'); + + // run status icon + info.append('text') + .attr({ + 'class': 'run-status-icon', + 'x': 42, + 'y': 20 + }); + + // processor type + info.append('text') + .attr({ + 'class': 'processor-type', + 'x': 62, + 'y': 35, + 'width': 246, + 'height': 16 + }); + } + var details = processor.select('g.processor-canvas-details'); // update the component behavior as appropriate @@ -171,24 +184,6 @@ nf.Processor = (function () { if (details.empty()) { details = processor.append('g').attr('class', 'processor-canvas-details'); - // run status icon - details.append('text') - .attr({ - 'class': 'run-status-icon', - 'x': 42, - 'y': 20 - }); - - // processor type - details.append('text') - .attr({ - 'class': 'processor-type', - 'x': 62, - 'y': 35, - 'width': 246, - 'height': 16 - }); - // ----- // stats // ----- @@ -480,65 +475,7 @@ nf.Processor = (function () { }) .text('\uf24a'); } - - if (processorData.permissions.canRead) { - // update the processor name - processor.select('text.processor-name') - .each(function (d) { - var processorName = d3.select(this); - - // reset the processor name to handle any previous state - processorName.text(null).selectAll('title').remove(); - - // apply ellipsis to the processor name as necessary - nf.CanvasUtils.ellipsis(processorName, d.component.name); - }).append('title').text(function (d) { - return d.component.name; - }); - - // update the processor type - processor.select('text.processor-type') - .each(function (d) { - var processorType = d3.select(this); - - // reset the processor type to handle any previous state - processorType.text(null).selectAll('title').remove(); - - // apply ellipsis to the processor type as necessary - nf.CanvasUtils.ellipsis(processorType, nf.Common.substringAfterLast(d.component.type, '.')); - }).append('title').text(function (d) { - return nf.Common.substringAfterLast(d.component.type, '.'); - }); - } else { - // clear the processor name - processor.select('text.processor-name').text(null); - - // clear the processor type - processor.select('text.processor-type').text(null); - } - - // hide the preview - processor.select('image.processor-stats-preview').style('display', 'none'); - - // populate the stats - processor.call(updateProcessorStatus); } else { - if (processorData.permissions.canRead) { - // update the processor name - processor.select('text.processor-name') - .text(function (d) { - var name = d.component.name; - if (name.length > PREVIEW_NAME_LENGTH) { - return name.substring(0, PREVIEW_NAME_LENGTH) + String.fromCharCode(8230); - } else { - return name; - } - }); - } - - // show the preview - processor.select('image.processor-stats-preview').style('display', 'block'); - // remove the tooltips processor.call(removeTooltips); @@ -547,31 +484,113 @@ nf.Processor = (function () { details.remove(); } } + + // enhance color for usability + processor.call(enhanceProcessorReadability, processorData); + + // populate the status + processor.call(updateProcessorStatus); }); - - // --------------- - // processor color - // --------------- + }; - // update the processor color - updated.select('text.processor-icon') + /** + * Enhances the readability of the processors in the specified selection. + * + * @param {selection} processor The processor to update. + * @param {object} processorData The processor data. + */ + var enhanceProcessorReadability = function (processor, processorData) { + var processorRectBody = processor.select('rect.body') .style('fill', function (d) { - - // get the default color - var color = nf.Processor.defaultColor(); - - if (!d.permissions.canRead) { + if (processor.classed('visible')) { + return '#ffffff'; + } else { + var color = '#dde4eb'; + + // use the specified color if appropriate + if (nf.Common.isDefinedAndNotNull(d.component.style['background-color'])) { + color = d.component.style['background-color']; + } + return color; } + }); - // use the specified color if appropriate - if (nf.Common.isDefinedAndNotNull(d.component.style['background-color'])) { - color = d.component.style['background-color']; - } + processor.select('text.processor-icon') + .style('fill', function (d) { + if (processor.classed('visible')) { + // get the default color + var color = nf.Processor.defaultColor(); + + if (!d.permissions.canRead) { + return color; + } - return color; + // use the specified color if appropriate + if (nf.Common.isDefinedAndNotNull(d.component.style['background-color'])) { + color = d.component.style['background-color']; + } + + return color; + } else { + return nf.Common.determineContrastColor( + nf.Common.substringAfterLast( + d3.rgb(processorRectBody.style('fill')).toString(), '#' + )); + } }); - }; + + if (processorData.permissions.canRead) { + // update the processor name + processor.select('text.processor-name') + .text(function (d) { + var name = d.component.name; + if (name.length > PREVIEW_NAME_LENGTH) { + return name.substring(0, PREVIEW_NAME_LENGTH) + String.fromCharCode(8230); + } else { + return name; + } + }) + .style('fill', function (d) { + return nf.Common.determineContrastColor( + nf.Common.substringAfterLast( + d3.rgb(processorRectBody.style('fill')).toString(), '#' + )); + }); + + // update the processor type + processor.select('text.processor-type') + .each(function (d) { + var processorType = d3.select(this); + + // reset the processor type to handle any previous state + processorType.text(null).selectAll('title').remove(); + + processorType.style('fill', function (d) { + if (processor.classed('visible')) { + return '#728e9b'; + } else { + return nf.Common.determineContrastColor( + nf.Common.substringAfterLast( + d3.rgb(processorRectBody.style('fill')).toString(), '#' + )); + } + }); + + // apply ellipsis to the processor type as necessary + nf.CanvasUtils.ellipsis(processorType, nf.Common.substringAfterLast(d.component.type, '.')); + }).append('title').text(function (d) { + return nf.Common.substringAfterLast(d.component.type, '.'); + }) + + } else { + // clear the processor name + processor.select('text.processor-name').text(null); + + // clear the processor type + processor.select('text.processor-type').text(null); + } + } /** * Updates the stats for the processors in the specified selection. @@ -591,6 +610,13 @@ nf.Processor = (function () { if (d.status.aggregateSnapshot.runStatus === 'Invalid') { fill = '#ba554a'; } + if (!updated.classed('visible')) { + var processorRectBody = updated.select('rect.body'); + fill = nf.Common.determineContrastColor( + nf.Common.substringAfterLast( + d3.rgb(processorRectBody.style('fill')).toString(), '#' + )); + } return fill; }, 'font-family': function (d) { 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 39df01f017ef..c1e0dce4b693 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 @@ -131,7 +131,8 @@ nf.RemoteProcessGroup = (function () { return d.dimensions.width; }, 'height': 32, - 'fill': '#b8c6cd' + 'fill': '#b8c6cd', + 'class': 'remote-process-group-header' }); // remote process group name @@ -144,17 +145,6 @@ nf.RemoteProcessGroup = (function () { 'class': 'remote-process-group-name' }); - // remote process group icon - remoteProcessGroup.append('image') - .call(nf.CanvasUtils.disableImageHref) - .attr({ - 'width': 352, - 'height': 89, - 'x': 6, - 'y': 38, - 'class': 'remote-process-group-preview' - }); - // always support selection remoteProcessGroup.call(nf.Selectable.activate).call(nf.ContextMenu.activate); }; @@ -584,20 +574,6 @@ nf.RemoteProcessGroup = (function () { return 'Remote flow not current'; } }); - - // update the process group name - remoteProcessGroup.select('text.remote-process-group-name') - .each(function (d) { - var remoteProcessGroupName = d3.select(this); - - // reset the remote process group name to handle any previous state - remoteProcessGroupName.text(null).selectAll('title').remove(); - - // apply ellipsis to the remote process group name as necessary - nf.CanvasUtils.ellipsis(remoteProcessGroupName, d.component.name); - }).append('title').text(function (d) { - return d.component.name; - }); } else { // clear the target uri details.select('text.remote-process-group-uri').text(null); @@ -610,33 +586,11 @@ nf.RemoteProcessGroup = (function () { // clear the last refresh details.select('text.remote-process-group-last-refresh').text(null); - - // clear the name - remoteProcessGroup.select('text.remote-process-group-name').text(null); } - // show the preview - remoteProcessGroup.select('image.remote-process-group-preview').style('display', 'none'); - // populate the stats remoteProcessGroup.call(updateProcessGroupStatus); } else { - if (remoteProcessGroupData.permissions.canRead) { - // update the process group name - remoteProcessGroup.select('text.remote-process-group-name') - .text(function (d) { - var name = d.component.name; - if (name.length > PREVIEW_NAME_LENGTH) { - return name.substring(0, PREVIEW_NAME_LENGTH) + String.fromCharCode(8230); - } else { - return name; - } - }); - } - - // show the preview - remoteProcessGroup.select('image.remote-process-group-preview').style('display', 'block'); - // remove the tooltips remoteProcessGroup.call(removeTooltips); @@ -645,9 +599,85 @@ nf.RemoteProcessGroup = (function () { details.remove(); } } + + // enhance color for usability + remoteProcessGroup.call(enhanceRemoteProcessorGroupReadability, remoteProcessGroupData); }); }; + /** + * Enhances the readability of the remote process group in the specified selection. + * + * @param {selection} remoteProcessGroup The remote process group to update. + * @param {object} remoteProcessGroupData The remote process group data. + */ + var enhanceRemoteProcessorGroupReadability = function (remoteProcessGroup, remoteProcessGroupData) { + var remoteProcessGroupRectBody = remoteProcessGroup.select('rect.body') + .style('fill', function (d) { + if (remoteProcessGroup.classed('visible')) { + return '#ffffff'; + } else { + return '#728e9b'; + } + }); + remoteProcessGroup.select('rect.remote-process-group-header') + .style('fill', function (d) { + if (remoteProcessGroup.classed('visible')) { + return '#b8c6cd'; + } else { + return '#728e9b'; + } + }); + if (remoteProcessGroupData.permissions.canRead) { + // update the process group name + if (remoteProcessGroup.classed('visible')) { + remoteProcessGroup.select('text.remote-process-group-name') + .each(function (d) { + var remoteProcessGroupName = d3.select(this); + + // reset the remote process group name to handle any previous state + remoteProcessGroupName.text(null).selectAll('title').remove(); + + remoteProcessGroupName.style('fill', function (d) { + if (remoteProcessGroup.classed('visible')) { + return '#262626'; + } else { + return nf.Common.determineContrastColor( + nf.Common.substringAfterLast( + d3.rgb(remoteProcessGroupRectBody.style('fill')).toString(), '#' + )); + } + }); + + // apply ellipsis to the remote process group name as necessary + nf.CanvasUtils.ellipsis(remoteProcessGroupName, d.component.name); + }).append('title').text(function (d) { + return d.component.name; + }); + + } else { + remoteProcessGroup.select('text.remote-process-group-name') + .text(function (d) { + var name = d.component.name; + if (name.length > PREVIEW_NAME_LENGTH) { + return name.substring(0, PREVIEW_NAME_LENGTH) + String.fromCharCode(8230); + } else { + return name; + } + }) + .style('fill', function (d) { + return nf.Common.determineContrastColor( + nf.Common.substringAfterLast( + d3.rgb(remoteProcessGroupRectBody.style('fill')).toString(), '#' + )); + }); + } + } else { + // clear the name + remoteProcessGroup.select('text.remote-process-group-name').text(null); + } + } + /** * Updates the process group status. * diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-common.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-common.js index 898a5d85fb12..be9fae792f3f 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-common.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-common.js @@ -384,6 +384,20 @@ nf.Common = (function () { } }, + /** + * Determines the contrast color of a given hex color. + * + * @param {string} hex The hex color to test. + * @returns {string} The contrasting color string. + */ + determineContrastColor: function (hex){ + if (parseInt(hex, 16) > 0xffffff/1.5) { + return '#000000'; + } + return '#ffffff'; + }, + + /** * Method for handling ajax errors. *