NIFI-15819: Adding the navigation card and birdseye control to the co…

[mcgilman]

…nnector canvas graph controls panel.

Summary

NIFI-15819

Adds a navigation panel (Zoom In/Out/Fit/Actual, Leave Group) and an embedded birdseye minimap to the connector canvas graph-controls side panel, sitting directly above the existing Connector card. Both are implemented as new reusable presentation components under apps/nifi/src/app/ui/common/ so they can be hosted by any page that already mounts the reusable <reusable-canvas>.

What changed

New reusable components (apps/nifi/src/app/ui/common/)

• birdseye/ — CanvasBirdseyeComponent, a hybrid Canvas + SVG minimap. Uses Canvas to draw simplified component representations (efficient for thousands of nodes) and SVG to host an interactive viewport brush with native D3 drag. Recalculates bounds to include both component extents and the current viewport so the brush stays meaningful when the user pans far from any component. Retina-aware (devicePixelRatio scaling) and auto-sizes via ResizeObserver. Effects react to changes in components, transform, and canvasDimensions inputs (drag-aware to avoid mid-drag re-renders).
• birdseye/birdseye.types.ts — extracts the BirdseyeComponentData, BirdseyeTransform, and BirdseyeBounds interfaces that previously lived inline in canvas.component.ts. canvas.component.ts now imports them from the new file (no re-exports).
• navigation-control/ — CanvasNavigationControl, a mat-expansion-panel shell with Zoom In/Out/Fit to Screen/Zoom to Actual Size buttons, an optional Leave Group button (shown when canNavigateToParent is true), and the embedded <canvas-birdseye>. Persists collapsed state in localStorage under graph-control-visibility[<storageKey>] via the shared Storage service. The storageKey input is configurable so independent instances on different pages do not collide.

Wiring into the connector canvas (pages/connectors/ui/connector-canvas/)

• connector-graph-controls now hosts <canvas-navigation-control storageKey="connector-navigation-control" …> above the existing Connector info card and bubbles its zoom / birdseye / leave-group events.
• connector-canvas.component.ts adds three signals — birdseyeComponents, birdseyeTransform, canvasDimensions — and:
  • Seeds them on (initialized) from the canvas's public getBirdseyeComponentData() / getCanvasDimensions() API.
  • Refreshes them after every loadConnectorFlowSuccess action (initial load, refresh, process-group navigation), so the minimap stays in sync with the underlying flow.
  • Updates birdseyeTransform from the canvas's (transformChange) output.
  • Refreshes canvasDimensions on window:resize (e.g. when the side panel toggles).
  • Delegates zoom / birdseye / leave-group events back into the CanvasComponent API and the existing leaveGroupAction().

Architectural note for reviewers

NiFi already has a flow-designer-specific navigation control at pages/flow-designer/ui/canvas/graph-controls/navigation-control/, but it is tightly coupled to flow-designer NgRx state and the legacy BirdseyeView / CanvasView services. Rather than refactor the legacy stack, the new components were built fresh against the reusable CanvasComponent public API (signals + outputs). They are presentation-only and have no coupling to flow-designer state, which keeps the legacy flow-designer code path untouched and lets future canvases (e.g. the connector canvas here) opt in.

The connector page passes storageKey="connector-navigation-control" so the new panel persists independently of the legacy flow-designer navigation-control key — both can coexist without interference.