Add Button for Disabling CodeLines Lazy Loading (#8803)

* Add Button for Disabling CodeLines LazyLoadin

* Add test for page options defaults

Author: chidozieononiwu

src/dotnet/APIView/APIViewWeb/Models/UserPreferenceModel.cs

@@ -23,6 +23,7 @@ public class UserPreferenceModel
         internal bool? _hideRevisionsPageOptions;
         internal bool? _showComments;
         internal bool? _showSystemComments;
+        internal bool? _disableCodeLinesLazyLoading;
         internal bool? _useBetaIndexPage;
         internal string _theme;
 
@@ -132,6 +133,13 @@ public bool? ShowSystemComments
             set => _showSystemComments = value;
         }
 
+        [Name("DisableCodeLinesLazyLoading")]
+        public bool? DisableCodeLinesLazyLoading
+        {
+            get => _disableCodeLinesLazyLoading ?? false;
+            set => _disableCodeLinesLazyLoading = value;
+        }
+
         [Name("UseBetaIndexPage")]
         public bool? UseBetaIndexPage
         {

src/dotnet/APIView/ClientSPA/src/app/_components/code-panel/code-panel.component.ts

@@ -368,7 +368,7 @@ export class CodePanelComponent implements OnChanges{
           success(data);
         },
         settings: {
-          bufferSize: 50,
+          bufferSize: (this.userProfile?.preferences.disableCodeLinesLazyLoading) ? this.codePanelRowData.length : 50,
           padding: 1,
           itemSize: 21,
           startIndex : 0,

src/dotnet/APIView/ClientSPA/src/app/_components/review-page-options/review-page-options.component.html

@@ -83,6 +83,11 @@
             (onChange)="onShowLeftNavigationSwitchChange($event)" />
             <label class="ms-2">Left Navigation</label>
         </li>
+        <li class="list-group-item">
+            <p-inputSwitch [(ngModel)]="disableCodeLinesLazyLoading"
+            (onChange)="onDisableLazyLoadingSwitchChange($event)" />
+            <label class="ms-2">Disable Lazy Loading</label>
+        </li>
         <li *ngIf="isDiffView" class="list-group-item">
             <label class="small mx-1 fw-semibold" for="diff-style-select">Diff Style :</label>
             <p-dropdown 
@@ -180,4 +185,14 @@
             (click)="toggleAPIRevisionApproval()"
             [disabled]="(hasActiveConversation && !overrideActiveConversationforApproval) || (hasFatalDiagnostics && !overrideFatalDiagnosticsforApproval)">Confirm</button>
       </div>
+</p-dialog>
+
+<p-dialog header="Disable Lazy Loading" 
+    [modal]="true" [(visible)]="showDisableCodeLinesLazyLoadingModal"
+    [style]="{ width: '30dvw' }" (onHide)="disableCodeLinesLazyLoading = userProfile?.preferences?.disableCodeLinesLazyLoading!">
+    <p>Disabling lazy loading will load all code lines at once. This may lead to degraded performance.</p>
+    <div class="d-grid gap-2 mt-2">
+    <button class="btn btn-primary" type="button" (click)="disableCodeLinesLazyLoadingEmitter.emit(disableCodeLinesLazyLoading); showDisableCodeLinesLazyLoadingModal = false">Disable</button>
+    <button class="btn btn-link" type="button" (click)="showDisableCodeLinesLazyLoadingModal = false;">Cancel</button>
+    </div>
 </p-dialog>

src/dotnet/APIView/ClientSPA/src/app/_components/review-page-options/review-page-options.component.spec.ts

@@ -86,4 +86,20 @@ describe('ReviewPageOptionsComponent', () => {
       expect(message.textContent).toEqual("First Release Approval Pending");
     });
   });
+
+  describe('Page Option Values', () => {
+    it('Should set Page Option Defaults when UserProfile is undefined', () => {
+      component.userProfile = undefined;
+      component.ngOnInit();
+      expect(component.userProfile).toBeUndefined();
+      expect(component.showCommentsSwitch).toEqual(true);
+      expect(component.showSystemCommentsSwitch).toEqual(true);
+      expect(component.showDocumentationSwitch).toEqual(true);
+      expect(component.showHiddenAPISwitch).toEqual(false);
+      expect(component.showLeftNavigationSwitch).toEqual(true);
+      expect(component.markedAsViewSwitch).toEqual(false);
+      expect(component.showLineNumbersSwitch).toEqual(true);
+      expect(component.disableCodeLinesLazyLoading).toEqual(false);
+    })
+  });
 });

src/dotnet/APIView/ClientSPA/src/app/_components/review-page-options/review-page-options.component.ts

@@ -34,6 +34,7 @@ export class ReviewPageOptionsComponent implements OnInit, OnChanges{
   @Output() showDocumentationEmitter : EventEmitter<boolean> = new EventEmitter<boolean>();
   @Output() showHiddenAPIEmitter : EventEmitter<boolean> = new EventEmitter<boolean>();
   @Output() showLeftNavigationEmitter : EventEmitter<boolean> = new EventEmitter<boolean>();
+  @Output() disableCodeLinesLazyLoadingEmitter : EventEmitter<boolean> = new EventEmitter<boolean>();
   @Output() markAsViewedEmitter : EventEmitter<boolean> = new EventEmitter<boolean>();
   @Output() showLineNumbersEmitter : EventEmitter<boolean> = new EventEmitter<boolean>();
   @Output() apiRevisionApprovalEmitter : EventEmitter<boolean> = new EventEmitter<boolean>();
@@ -48,13 +49,15 @@ export class ReviewPageOptionsComponent implements OnInit, OnChanges{
   showLeftNavigationSwitch : boolean = true;
   markedAsViewSwitch : boolean = false;
   showLineNumbersSwitch : boolean = true;
+  disableCodeLinesLazyLoading: boolean = false;
 
   canToggleApproveAPIRevision: boolean = false;
   activeAPIRevisionIsApprovedByCurrentUser: boolean = false;
   apiRevisionApprovalMessage: string = '';
   apiRevisionApprovalBtnClass: string = '';
   apiRevisionApprovalBtnLabel: string = '';
   showAPIRevisionApprovalModal: boolean = false;
+  showDisableCodeLinesLazyLoadingModal: boolean = false;
   overrideActiveConversationforApproval : boolean = false;
   overrideFatalDiagnosticsforApproval : boolean = false;
 
@@ -88,21 +91,7 @@ export class ReviewPageOptionsComponent implements OnInit, OnChanges{
 
   ngOnInit() {
     this.setSelectedDiffStyle();
-    this.showCommentsSwitch = this.userProfile?.preferences.showComments ?? true;
-    this.showSystemCommentsSwitch = this.userProfile?.preferences.showSystemComments ?? true;
-    this.showDocumentationSwitch = this.userProfile?.preferences.showDocumentation ?? false;
-    this.showHiddenAPISwitch = this.userProfile?.preferences.showHiddenApis ?? false;
-
-    if (this.userProfile?.preferences.hideLeftNavigation != undefined) {
-      this.showLeftNavigationSwitch = !(this.userProfile?.preferences.hideLeftNavigation);
-    } else {
-      this.showLeftNavigationSwitch = false;
-    }
-    if (this.userProfile?.preferences.hideLineNumbers){
-      this.showLineNumbersSwitch = false;
-    } else {
-      this.showLineNumbersSwitch = true;
-    }
+    this.setPageOptionValues();
 
     this.activeAPIRevision?.assignedReviewers.map(revision => this.selectedApprovers.push(revision.assingedTo));
     this.setAPIRevisionApprovalStates();
@@ -115,21 +104,7 @@ export class ReviewPageOptionsComponent implements OnInit, OnChanges{
     }
 
     if (changes['userProfile']) {
-      this.showCommentsSwitch = this.userProfile?.preferences.showComments ?? this.showCommentsSwitch;
-      this.showSystemCommentsSwitch = this.userProfile?.preferences.showSystemComments ?? this.showSystemCommentsSwitch;
-      this.showDocumentationSwitch = this.userProfile?.preferences.showDocumentation ?? this.showDocumentationSwitch;
-      this.showHiddenAPISwitch = this.userProfile?.preferences.showHiddenApis ?? false;
-
-      if (this.userProfile?.preferences.hideLeftNavigation != undefined) {
-        this.showLeftNavigationSwitch = !(this.userProfile?.preferences.hideLeftNavigation);
-      } else {
-        this.showLeftNavigationSwitch = false;
-      }
-      if (this.userProfile?.preferences.hideLineNumbers){
-        this.showLineNumbersSwitch = false;
-     } else {
-      this.showLineNumbersSwitch = true;
-     }
+      this.setPageOptionValues();
     }
 
     if (changes['activeAPIRevision'] && changes['activeAPIRevision'].currentValue != undefined) {
@@ -191,6 +166,19 @@ export class ReviewPageOptionsComponent implements OnInit, OnChanges{
     this.showLeftNavigationEmitter.emit(event.checked);
   }
 
+  /**
+  * Disable Lazy Loading
+  * @param event the Filter event
+  */
+  onDisableLazyLoadingSwitchChange(event: InputSwitchOnChangeEvent) {
+    if (event.checked) {
+      this.showDisableCodeLinesLazyLoadingModal = true;
+    } else {
+      this.disableCodeLinesLazyLoadingEmitter.emit(event.checked);
+    }
+  }
+  
+
   /**
   * Callback for markedAsViewSwitch Change
   * @param event the Filter event
@@ -241,6 +229,16 @@ export class ReviewPageOptionsComponent implements OnInit, OnChanges{
     this.selectedDiffStyle = (inputDiffStyle) ? inputDiffStyle : this.diffStyleOptions[0];
   }
 
+  setPageOptionValues() {
+    this.showCommentsSwitch = this.userProfile?.preferences.showComments ?? this.showCommentsSwitch;
+    this.showSystemCommentsSwitch = this.userProfile?.preferences.showSystemComments ?? this.showSystemCommentsSwitch;
+    this.showDocumentationSwitch = this.userProfile?.preferences.showDocumentation ?? this.showDocumentationSwitch;
+    this.showHiddenAPISwitch = this.userProfile?.preferences.showHiddenApis ?? this.showHiddenAPISwitch;
+    this.disableCodeLinesLazyLoading = this.userProfile?.preferences.disableCodeLinesLazyLoading ?? this.disableCodeLinesLazyLoading;
+    this.showLineNumbersSwitch = (this.userProfile?.preferences.hideLineNumbers) ? false : this.showLineNumbersSwitch;
+    this.showLeftNavigationSwitch = (this.userProfile?.preferences.hideLeftNavigation) ? false : this.showLeftNavigationSwitch;
+  }
+
   setAPIRevisionApprovalStates() {
     this.activeAPIRevisionIsApprovedByCurrentUser = this.activeAPIRevision?.approvers.includes(this.userProfile?.userName!)!;
     const isActiveAPIRevisionAhead = (!this.diffAPIRevision) ? true : ((new Date(this.activeAPIRevision?.createdOn!)) > (new Date(this.diffAPIRevision?.createdOn!)));

src/dotnet/APIView/ClientSPA/src/app/_components/review-page/review-page.component.html

@@ -60,7 +60,8 @@
                             (showLineNumbersEmitter)="handleShowLineNumbersEmitter($event)"
                             (apiRevisionApprovalEmitter)="handleApiRevisionApprovalEmitter($event)"
                             (reviewApprovalEmitter)="handleReviewApprovalEmitter($event)"
-                            (showHiddenAPIEmitter)="handleShowHiddenAPIEmitter($event)"></app-review-page-options>
+                            (showHiddenAPIEmitter)="handleShowHiddenAPIEmitter($event)"
+                            (disableCodeLinesLazyLoadingEmitter)="handleDisableCodeLinesLazyLoadingEmitter($event)"></app-review-page-options>
                     </div>
                 </ng-template>
             </p-splitter>

src/dotnet/APIView/ClientSPA/src/app/_components/review-page/review-page.component.ts

@@ -398,6 +398,17 @@ export class ReviewPageComponent implements OnInit {
     });
   }
 
+  handleDisableCodeLinesLazyLoadingEmitter(state: boolean) {
+    let userPreferenceModel = this.userProfile?.preferences;
+    userPreferenceModel!.disableCodeLinesLazyLoading = state;
+    this.userProfileService.updateUserPrefernece(userPreferenceModel!).pipe(takeUntil(this.destroy$)).subscribe({
+      next: () => {
+        const currentParams = this.route.snapshot.queryParams;
+        this.updateStateBasedOnQueryParams(currentParams);
+      }
+    });
+  }
+
   handleHasActiveConversationEmitter(value: boolean) {
     this.hasActiveConversation = value;
   }

src/dotnet/APIView/ClientSPA/src/app/_models/userPreferenceModel.ts

@@ -10,6 +10,8 @@ export class UserPreferenceModel {
     showComments: boolean
     showSystemComments: boolean
     useBetaIndexPage: boolean
+    disableCodeLinesLazyLoading: boolean
+
 
     constructor() {
         this.userName = '';
@@ -20,8 +22,10 @@ export class UserPreferenceModel {
         this.hideLeftNavigation = false;
         this.showHiddenApis = false
         this.showDocumentation = false;
-        this.showComments = false;
-        this.showSystemComments = false;
+        this.showComments = true;
+        this.showSystemComments = true;
         this.useBetaIndexPage = false;
+        this.disableCodeLinesLazyLoading = false;
+
     }
 }