NIFI-15654

Summary

When multiple connections share the same source and destination components with no bend points, they render directly on top of each other, appearing as a single connection. This makes it impossible for users to distinguish, select, or manage the individual connections. This PR addresses the issue with two complementary approaches:

1. Collision avoidance — Automatically adds bend points to new or modified connections that would overlap an existing straight-line connection between the same source and destination.
2. Overlap detection banner — Detects pre-existing overlapping connection groups in the current process group and displays a warning banner over the canvas with clickable links that navigate to and select the affected connections.

What's Changed

Collision Avoidance

• Extracted collision detection logic from ConnectableBehavior into reusable public methods on CanvasUtils (calculateBendPointsForCollisionAvoidance, calculateBendPointsForCollisionAvoidanceByIds)
• New connections created via drag-and-drop automatically receive bend points if they would overlap an existing straight-line connection
• Endpoint drag (moving a connection's source/destination) rechecks for collisions and adds bend points as needed
• Edit Connection dialog applies collision avoidance when the destination is changed
• Removing the last bend point from a connection is blocked with a dialog warning if it would cause an overlap

Overlap Detection & Banner

• Added pure utility functions (detectOverlappingConnections, wouldRemovalCauseOverlap) in overlap-detection.utils.ts for identifying groups of overlapping connections
• Added selectOverlappingConnections NgRx selector that computes overlap groups for the current process group
• Created OverlappingConnectionsBannerComponent — a standalone banner that displays over the canvas with a caution-colored left border stripe, warning icon, and clickable links per overlap group
• Banner positioning is dynamic — adjusts its left offset based on the collapsed/expanded state of the navigation and operation palettes

Navigation

• Added navigateToComponents NgRx action and effect that navigates to the bulk selection route (/process-groups/:id/bulk/:ids), allowing users to click an overlap link in the banner and immediately see all affected connections selected on the canvas

Testing

• 250+ lines of unit tests for overlap-detection.utils.ts covering edge cases (no connections, single connections, bidirectional, bend points present, cross-group filtering)
• 356+ lines of new tests for CanvasUtils collision avoidance methods (self-loops, horizontal/vertical offsets, exclusions, existing bend points)
• Full component test suite for OverlappingConnectionsBannerComponent (rendering, interaction, event emission)
• Updated canvas.component.spec.ts to mock the new banner component

Key Implementation Details

• Collision offset: Bend points are offset perpendicular to the connection line. Horizontal connections offset vertically and vice versa, with a configurable pixel offset (default 100px)
• Self-loop handling: Connections where source equals destination receive a fixed rectangular bend point pattern
• Theme integration: Banner uses NiFi's _-theme.scss mixin pattern with --nf-caution-default for the severity stripe and --mat-sys-* tokens for surface/text colors
• No hardcoded strings: Banner text is currently English-only (consistent with existing NiFi patterns); i18n can be added as NiFi adopts a translation framework