NIFI-9543: Add bring-to-front functionality to labels

[sardell]

Thank you for submitting a contribution to Apache NiFi.

Please provide a short description of the PR here:

Link to Jira: https://issues.apache.org/jira/browse/NIFI-9543

This PR adds bring-to-front functionality to labels on the canvas. To test, add multiple overlapping labels on the canvas, right click on a label below the others to open the context menu and choose Bring to Front. The label should now be at the top of the other overlapping labels. This label that's now at the front should be persisted even after shutting down and restarting NiFi.

In order to streamline the review of the contribution we ask you
to ensure the following steps have been taken:

For all changes:

• Is there a JIRA ticket associated with this PR? Is it referenced
  in the commit message?

• Does your PR title start with NIFI-XXXX where XXXX is the JIRA number you are trying to resolve? Pay particular attention to the hyphen "-" character.

• Has your PR been rebased against the latest commit within the target branch (typically main)?

• Is your initial contribution a single, squashed commit? Additional commits in response to PR reviewer feedback should be made on this branch and pushed to allow change tracking. Do not squash or use --force when pushing to allow for clean monitoring of changes.

For code changes:

• Have you ensured that the full suite of tests is executed via mvn -Pcontrib-check clean install at the root nifi folder?
• Have you written or updated unit tests to verify your changes?
• Have you verified that the full build is successful on JDK 8?
• Have you verified that the full build is successful on JDK 11?
• If adding new dependencies to the code, are these dependencies licensed in a way that is compatible for inclusion under ASF 2.0?
• If applicable, have you updated the LICENSE file, including the main LICENSE file under nifi-assembly?
• If applicable, have you updated the NOTICE file, including the main NOTICE file found under nifi-assembly?
• If adding new Properties, have you added .displayName in addition to .name (programmatic access) for each of the new properties?

For documentation related changes:

• Have you ensured that format looks appropriate for the output in which it is rendered?

Note:

Please ensure that once the PR is submitted, you check GitHub Actions CI for build issues and submit an update to your PR as soon as possible.

[mcgilman]

Reviewing...

[mcgilman]

We also need to introduce a call to sort in add. When a new Label is created, it's z-index will be 0. If it is placed directly on top of another Label that already has an established z-index we need to ensure this is rendered below. By default, it will render on top because it was added to the DOM later. If you try this out, you'll see it renders on top until the canvas polls which triggers a call to update that will re-sort and move the new Label below.

[sardell]

Thanks for pointing this out. Unfortunately, I still see the behavior your describing even after updating add at line 484 from

            // update
            updateLabels(selection.merge(entered));

to

            // update
            var updated = selection.merge(entered);
            updated.call(updateLabels).call(nfCanvasUtils.position, transition).call(sort);

Does anything look off to you about that block of code?

[mcgilman]

@sardell At first glance, this looks ok. Have you verified that the value of the zIndex coming back in the creation response? I wonder if it could be comparing undefined with some number. Setting a break point in sort should help steer in the right direction.

[sardell]

@mcgilman Turned out that transition wasn't defined in add. This should now be functioning correctly.

[mcgilman]

Thanks for the PR @sardell! Looks great overall but identified a minor issue we'll want to address before merging in.

[mcgilman]

Thanks @sardell! Changes look good to me. Verified the zIndex are persisted and restored when NiFi restarts. Also verified the presence of the zIndex in the flow downloaded through the UI. Also verified the UI honored the zIndex when navigating throughout the flow.

I would appreciate a quick review from @markap14 to verify that all the necessary places are updated to include the new field.

[markap14]

Thanks @mcgilman . I haven't had a chance to completely review/test this yet. One thing that I think we need to address, though, is something that I just noticed the other day with the 'retry' fields that were recently added. I had to make a small update: https://github.com/apache/nifi/pull/5809/files#diff-fcc9a36983c80e3ddfb13c77ac2db46d83346e6f55f84f44cedfc7a33bf43e02R67-R177

The issue here was related to the fact that we add a new field to a component. So in this case, zIndex is added to label. If you've pushed your flow to Registry using 1.15.3 or earlier, and now you startup with this version, we end up seeing a "Local Change" to each of those labels. And you can't revert the change. As a result, you won't be able to change to a later version. So we need to make a similar update here: If there's a flow difference that changes the zIndex from null to the default value (0), then we need to return true from that isEnvironmentalChange method. Granted, isEnvironmentalChange is probably no longer the most accurate name for that method, but basically is used to filter out any flow change that we don't want to consider a "Local Modification".

[mcgilman]

Thanks @sardell! With the latest updates looks great. +1 will merge.