mcgilman opened a new pull request, #11202: URL: https://github.com/apache/nifi/pull/11202
…nnector canvas graph controls panel. # Summary [NIFI-15819](https://issues.apache.org/jira/browse/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. -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected]
