From 6eab0a5f44ee99585c733105f79d23b0786d55e5 Mon Sep 17 00:00:00 2001
From: Rob Fellows <rob.fellows@gmail.com>
Date: Wed, 9 Oct 2024 12:29:15 -0400
Subject: [PATCH] [NIFI-13830] - Wait for canvas to complete loading before
 attempting to restore view or center (#9342)

* [NIFI-13830] - Wait for canvas to complete loading before attempting to restore view or center

* When restoring viewport or handling selection, only take action if the processgroup has changed

This closes #9342
---
 .../flow-designer/state/flow/flow.reducer.ts  |  5 +++++
 .../pages/flow-designer/state/flow/index.ts   |  2 +-
 .../ui/canvas/canvas.component.ts             | 21 ++++++++++++-------
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/state/flow/flow.reducer.ts b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/state/flow/flow.reducer.ts
index b05d79baab..2337b759f3 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/state/flow/flow.reducer.ts
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/state/flow/flow.reducer.ts
@@ -43,6 +43,7 @@ import {
     loadConnectionSuccess,
     loadInputPortSuccess,
     loadProcessGroup,
+    loadProcessGroupComplete,
     loadProcessGroupSuccess,
     loadProcessorSuccess,
     loadRemoteProcessGroupSuccess,
@@ -273,6 +274,10 @@ export const flowReducer = createReducer(
             draftState.status = 'success' as const;
         });
     }),
+    on(loadProcessGroupComplete, (state) => ({
+        ...state,
+        status: 'complete' as const
+    })),
     on(loadConnectionSuccess, (state, { response }) => {
         return produce(state, (draftState) => {
             const proposedConnection = response.connection;
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/state/flow/index.ts b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/state/flow/index.ts
index d01516b90b..d1d9041e6d 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/state/flow/index.ts
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/state/flow/index.ts
@@ -642,7 +642,7 @@ export interface FlowState {
     versionSaving: boolean;
     changeVersionRequest: FlowUpdateRequestEntity | null;
     copiedSnippet: CopiedSnippet | null;
-    status: 'pending' | 'loading' | 'success';
+    status: 'pending' | 'loading' | 'success' | 'complete';
 }
 
 export interface RunOnceRequest {
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.ts b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.ts
index 15d66fa510..2cf1ea61d4 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.ts
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.ts
@@ -44,6 +44,7 @@ import {
     selectCurrentProcessGroupId,
     selectEditedCurrentProcessGroup,
     selectFlowAnalysisOpen,
+    selectFlowLoadingStatus,
     selectFunnel,
     selectInputPort,
     selectLabel,
@@ -59,7 +60,7 @@ import {
     selectViewStatusHistoryComponent,
     selectViewStatusHistoryCurrentProcessGroup
 } from '../../state/flow/flow.selectors';
-import { filter, map, NEVER, switchMap, take } from 'rxjs';
+import { distinctUntilChanged, filter, map, NEVER, switchMap, take } from 'rxjs';
 import { restoreViewport } from '../../state/transform/transform.actions';
 import { initialState } from '../../state/flow/flow.reducer';
 import { CanvasContextMenu } from '../../service/canvas-context-menu.service';
@@ -129,9 +130,11 @@ export class Canvas implements OnInit, OnDestroy {
 
         // handle process group loading and viewport restoration
         this.store
-            .select(selectCurrentProcessGroupId)
+            .select(selectFlowLoadingStatus)
             .pipe(
-                filter((processGroupId) => processGroupId != initialState.id),
+                filter((status) => status === 'complete'),
+                switchMap(() => this.store.select(selectCurrentProcessGroupId)),
+                distinctUntilChanged(),
                 switchMap(() => this.store.select(selectProcessGroupRoute)),
                 filter((processGroupRoute) => processGroupRoute != null),
                 concatLatestFrom(() => this.store.select(selectSkipTransform)),
@@ -147,9 +150,11 @@ export class Canvas implements OnInit, OnDestroy {
 
         // handle single component selection
         this.store
-            .select(selectCurrentProcessGroupId)
+            .select(selectFlowLoadingStatus)
             .pipe(
-                filter((processGroupId) => processGroupId != initialState.id),
+                filter((status) => status === 'complete'),
+                switchMap(() => this.store.select(selectCurrentProcessGroupId)),
+                distinctUntilChanged(),
                 switchMap(() => this.store.select(selectSingleSelectedComponent)),
                 filter((selectedComponent) => selectedComponent != null),
                 concatLatestFrom(() => [
@@ -168,9 +173,11 @@ export class Canvas implements OnInit, OnDestroy {
 
         // handle bulk component selection
         this.store
-            .select(selectCurrentProcessGroupId)
+            .select(selectFlowLoadingStatus)
             .pipe(
-                filter((processGroupId) => processGroupId != initialState.id),
+                filter((status) => status === 'complete'),
+                switchMap(() => this.store.select(selectCurrentProcessGroupId)),
+                distinctUntilChanged(),
                 switchMap(() => this.store.select(selectBulkSelectedComponentIds)),
                 filter((ids) => ids.length > 0),
                 concatLatestFrom(() => [