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

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/connectors/ui/connector-canvas/connector-canvas.component.html

@@ -29,7 +29,21 @@
     <div class="relative flex-1 min-h-0">
         <mat-sidenav-container class="h-full">
             <mat-sidenav disableClose="true" mode="side" [opened]="graphControlsOpen" position="start">
-                <connector-graph-controls [connectorEntity]="connectorEntity()" [entitySaving]="entitySaving()">
+                <connector-graph-controls
+                    [connectorEntity]="connectorEntity()"
+                    [entitySaving]="entitySaving()"
+                    [birdseyeComponents]="birdseyeComponents()"
+                    [birdseyeTransform]="birdseyeTransform()"
+                    [canvasDimensions]="canvasDimensions()"
+                    [canNavigateToParent]="canNavigateToParent"
+                    (viewportChange)="onBirdseyeViewportChange($event)"
+                    (birdseyeDragStart)="onBirdseyeDragStart()"
+                    (birdseyeDragEnd)="onBirdseyeDragEnd()"
+                    (zoomIn)="onNavigationZoomIn()"
+                    (zoomOut)="onNavigationZoomOut()"
+                    (zoomFit)="onNavigationZoomFit()"
+                    (zoomActual)="onNavigationZoomActual()"
+                    (leaveGroup)="onNavigationLeaveGroup()">
                 </connector-graph-controls>
             </mat-sidenav>
             <mat-sidenav-content>

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/connectors/ui/connector-canvas/connector-canvas.component.ts

@@ -15,13 +15,24 @@
  * limitations under the License.
  */
 
-import { Component, computed, OnDestroy, OnInit, DestroyRef, inject, HostListener, viewChild } from '@angular/core';
+import {
+    Component,
+    computed,
+    OnDestroy,
+    OnInit,
+    DestroyRef,
+    inject,
+    HostListener,
+    signal,
+    viewChild
+} from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Router } from '@angular/router';
 import { MatButton } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSidenav, MatSidenavContainer, MatSidenavContent } from '@angular/material/sidenav';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Actions, ofType } from '@ngrx/effects';
 import { Store } from '@ngrx/store';
 import {
     canOperateConnector,
@@ -38,7 +49,8 @@ import { selectCurrentUser } from '../../../../state/current-user/current-user.s
 import { CanvasConfiguration } from '../../../../state/canvas-ui';
 import { setConfiguration } from '../../../../state/canvas-ui/canvas-ui.actions';
 import { CanvasComponent } from '../../../../ui/common/canvas/canvas.component';
-import { ContextMenuContext } from '../../../../ui/common/canvas/canvas.types';
+import { BirdseyeComponentData, BirdseyeTransform } from '../../../../ui/common/birdseye/birdseye.types';
+import { ContextMenuContext, Dimension, Position } from '../../../../ui/common/canvas/canvas.types';
 import {
     ContextMenuDefinition,
     ContextMenuDefinitionProvider,
@@ -80,6 +92,7 @@ import { getComponentStateAndOpenDialog } from '../../../../state/component-stat
 })
 export class ConnectorCanvasComponent implements OnInit, OnDestroy {
     private store = inject(Store<NiFiState>);
+    private actions$ = inject(Actions);
     private destroyRef = inject(DestroyRef);
     private router = inject(Router);
     private dialog = inject(MatDialog);
@@ -97,6 +110,12 @@ export class ConnectorCanvasComponent implements OnInit, OnDestroy {
     skipTransform = this.store.selectSignal(ConnectorCanvasSelectors.selectSkipTransform);
     graphControlsOpen = true;
 
+    birdseyeComponents = signal<BirdseyeComponentData[]>([]);
+    birdseyeTransform = signal<BirdseyeTransform>({ translate: { x: 0, y: 0 }, scale: 1 });
+    canvasDimensions = signal<Dimension>({ width: 0, height: 0 });
+
+    private canvasReady = false;
+
     connectorEntity = this.store.selectSignal(selectConnectorCanvasEntity);
     entitySaving = this.store.selectSignal(selectConnectorCanvasEntitySaving);
 
@@ -360,15 +379,34 @@ export class ConnectorCanvasComponent implements OnInit, OnDestroy {
             .subscribe((parentProcessGroupId) => {
                 this.canNavigateToParent = parentProcessGroupId != null;
             });
+
+        // Refresh birdseye geometry whenever a flow load completes (initial load or refresh).
+        // Without this, the minimap would only reflect the data captured during the very first
+        // canvas initialization and would go stale after subsequent refreshes / process-group
+        // navigations performed against an already-mounted canvas.
+        this.actions$
+            .pipe(ofType(ConnectorCanvasActions.loadConnectorFlowSuccess), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+                // Defer one tick so the entity arrays flow through async pipes into the canvas
+                // and the canvas's internal signals (read by getBirdseyeComponentData) update.
+                queueMicrotask(() => this.refreshBirdseye());
+            });
     }
 
     ngOnDestroy(): void {
         this.store.dispatch(ConnectorCanvasActions.resetConnectorCanvasState());
         this.store.dispatch(ConnectorCanvasEntityActions.resetConnectorCanvasEntityState());
     }
 
-    onTransformChange(_event: { translate: { x: number; y: number }; scale: number }): void {
-        // placeholder for future viewport persistence
+    @HostListener('window:resize')
+    handleWindowResize(): void {
+        if (this.canvasReady) {
+            this.canvasDimensions.set(this.canvasComponent().getCanvasDimensions());
+        }
+    }
+
+    onTransformChange(event: BirdseyeTransform): void {
+        this.birdseyeTransform.set(event);
     }
 
     onProcessGroupDoubleClick(event: { processGroupId: string }): void {
@@ -407,6 +445,9 @@ export class ConnectorCanvasComponent implements OnInit, OnDestroy {
     }
 
     onCanvasInitialized(): void {
+        this.canvasReady = true;
+        this.refreshBirdseye();
+
         if (this.selectedComponentIds.length > 0) {
             if (this.skipTransform()) {
                 this.store.dispatch(ConnectorCanvasActions.setSkipTransform({ skipTransform: false }));
@@ -416,6 +457,51 @@ export class ConnectorCanvasComponent implements OnInit, OnDestroy {
         }
     }
 
+    private refreshBirdseye(): void {
+        if (!this.canvasReady) {
+            return;
+        }
+        const canvas = this.canvasComponent();
+        this.birdseyeComponents.set(canvas.getBirdseyeComponentData());
+        this.canvasDimensions.set(canvas.getCanvasDimensions());
+    }
+
+    // =========================================================================
+    // Navigation Control / Birdseye delegation
+    // =========================================================================
+
+    onNavigationZoomIn(): void {
+        this.canvasComponent().onZoomIn();
+    }
+
+    onNavigationZoomOut(): void {
+        this.canvasComponent().onZoomOut();
+    }
+
+    onNavigationZoomFit(): void {
+        this.canvasComponent().onZoomFit();
+    }
+
+    onNavigationZoomActual(): void {
+        this.canvasComponent().onZoomActual();
+    }
+
+    onNavigationLeaveGroup(): void {
+        this.leaveGroupAction();
+    }
+
+    onBirdseyeViewportChange(event: Position): void {
+        this.canvasComponent().setViewportPosition(event.x, event.y, false);
+    }
+
+    onBirdseyeDragStart(): void {
+        this.canvasComponent().birdseyeDragStart();
+    }
+
+    onBirdseyeDragEnd(): void {
+        this.canvasComponent().birdseyeDragEnd();
+    }
+
     // =========================================================================
     // Shared Actions (used by both context menu and keyboard shortcuts)
     // =========================================================================

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/connectors/ui/connector-canvas/graph-controls/connector-graph-controls.component.html

@@ -17,7 +17,21 @@
 
 <div class="connector-graph-controls w-96">
     <div class="flex flex-col p-2 gap-y-2">
-        <!-- Navigation control will be added in Effort 3 (Canvas Navigation & Birdseye). -->
+        <canvas-navigation-control
+            storageKey="connector-navigation-control"
+            [birdseyeComponents]="birdseyeComponents()"
+            [birdseyeTransform]="birdseyeTransform()"
+            [canvasDimensions]="canvasDimensions()"
+            [canNavigateToParent]="canNavigateToParent()"
+            (viewportChange)="viewportChange.emit($event)"
+            (birdseyeDragStart)="birdseyeDragStart.emit()"
+            (birdseyeDragEnd)="birdseyeDragEnd.emit()"
+            (zoomIn)="zoomIn.emit()"
+            (zoomOut)="zoomOut.emit()"
+            (zoomFit)="zoomFit.emit()"
+            (zoomActual)="zoomActual.emit()"
+            (leaveGroup)="leaveGroup.emit()">
+        </canvas-navigation-control>
         <connector-info-control
             [connectorEntity]="connectorEntity()"
             [entitySaving]="entitySaving()"></connector-info-control>

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/connectors/ui/connector-canvas/graph-controls/connector-graph-controls.component.spec.ts

@@ -23,6 +23,8 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { ConnectorGraphControls } from './connector-graph-controls.component';
 import { ConnectorInfoControl } from './connector-info-control/connector-info-control.component';
 import { ConnectorEntity } from '@nifi/shared';
+import { BirdseyeComponentData, BirdseyeTransform } from '../../../../../ui/common/birdseye/birdseye.types';
+import { Dimension } from '../../../../../ui/common/canvas/canvas.types';
 
 @Component({
     selector: 'connector-info-control',
@@ -35,7 +37,15 @@ class MockConnectorInfoControl {
     entitySaving = input<boolean>(false);
 }
 
-async function setup(inputs: { connectorEntity?: ConnectorEntity | null; entitySaving?: boolean } = {}) {
+interface SetupInputs {
+    connectorEntity?: ConnectorEntity | null;
+    entitySaving?: boolean;
+    birdseyeComponents?: BirdseyeComponentData[];
+    birdseyeTransform?: BirdseyeTransform;
+    canvasDimensions?: Dimension;
+}
+
+async function setup(inputs: SetupInputs = {}) {
     await TestBed.configureTestingModule({
         imports: [ConnectorGraphControls, NoopAnimationsModule]
     })
@@ -48,6 +58,12 @@ async function setup(inputs: { connectorEntity?: ConnectorEntity | null; entityS
     const fixture: ComponentFixture<ConnectorGraphControls> = TestBed.createComponent(ConnectorGraphControls);
     fixture.componentRef.setInput('connectorEntity', inputs.connectorEntity ?? null);
     fixture.componentRef.setInput('entitySaving', inputs.entitySaving ?? false);
+    fixture.componentRef.setInput('birdseyeComponents', inputs.birdseyeComponents ?? []);
+    fixture.componentRef.setInput(
+        'birdseyeTransform',
+        inputs.birdseyeTransform ?? { translate: { x: 0, y: 0 }, scale: 1 }
+    );
+    fixture.componentRef.setInput('canvasDimensions', inputs.canvasDimensions ?? { width: 0, height: 0 });
     fixture.detectChanges();
 
     return { fixture, component: fixture.componentInstance };

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/connectors/ui/connector-canvas/graph-controls/connector-graph-controls.component.ts

@@ -15,18 +15,36 @@
  * limitations under the License.
  */
 
-import { Component, input } from '@angular/core';
+import { Component, input, output } from '@angular/core';
 import { ConnectorEntity } from '@nifi/shared';
+import { CanvasNavigationControl } from '../../../../../ui/common/navigation-control/canvas-navigation-control.component';
+import { BirdseyeComponentData, BirdseyeTransform } from '../../../../../ui/common/birdseye/birdseye.types';
+import { Dimension, Position } from '../../../../../ui/common/canvas/canvas.types';
 import { ConnectorInfoControl } from './connector-info-control/connector-info-control.component';
 
 @Component({
     selector: 'connector-graph-controls',
     standalone: true,
-    imports: [ConnectorInfoControl],
+    imports: [CanvasNavigationControl, ConnectorInfoControl],
     templateUrl: './connector-graph-controls.component.html',
     styleUrls: ['./connector-graph-controls.component.scss']
 })
 export class ConnectorGraphControls {
     connectorEntity = input<ConnectorEntity | null>(null);
     entitySaving = input<boolean>(false);
+
+    birdseyeComponents = input.required<BirdseyeComponentData[]>();
+    birdseyeTransform = input.required<BirdseyeTransform>();
+    canvasDimensions = input.required<Dimension>();
+    canNavigateToParent = input<boolean>(false);
+
+    viewportChange = output<Position>();
+    birdseyeDragStart = output<void>();
+    birdseyeDragEnd = output<void>();
+
+    zoomIn = output<void>();
+    zoomOut = output<void>();
+    zoomFit = output<void>();
+    zoomActual = output<void>();
+    leaveGroup = output<void>();
 }

nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/birdseye/birdseye.component.html

@@ -0,0 +1,18 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one or more
+  ~ contributor license agreements.  See the NOTICE file distributed with
+  ~ this work for additional information regarding copyright ownership.
+  ~ The ASF licenses this file to You under the Apache License, Version 2.0
+  ~ (the "License"); you may not use this file except in compliance with
+  ~ the License.  You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<div #birdseyeContainer class="birdseye-container border" [style.height.px]="birdseyeDimensions().height"></div>

nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/birdseye/birdseye.component.scss

@@ -0,0 +1,55 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// THEMED STYLES (internal mixin)
+// These styles use CSS variables for colors. This mixin is included twice:
+// once for light mode and once under .darkMode for dark mode, mirroring the
+// pattern used by canvas.component.scss.
+@mixin generate-theme() {
+    .birdseye-container {
+        background: var(--mat-sys-background);
+        width: 100%;
+        height: 175px;
+        overflow: hidden;
+        box-sizing: content-box;
+
+        canvas,
+        svg {
+            position: absolute;
+            overflow: hidden;
+        }
+
+        rect.birdseye-brush {
+            stroke: var(--mat-sys-primary);
+            fill: transparent;
+        }
+    }
+}
+
+// ::ng-deep is required because the canvas, svg, and rect elements are created dynamically in
+// birdseye.component.ts via document.createElement() and D3, NOT declared in the component
+// template. Angular's ViewEncapsulation.Emulated only adds scoping attributes to template-defined
+// elements; dynamically created elements don't receive those attributes, so normal scoped styles
+// won't match them. ::ng-deep disables the encapsulation requirement for descendant selectors.
+:host ::ng-deep {
+    @include generate-theme();
+
+    // Dark mode styles (same styles, scoped to .darkMode)
+    .darkMode {
+        @include generate-theme();
+    }
+}