Improvements to tree navigation

Azure · May 16, 2024 · 267deb4 · 267deb4
1 parent 11b1afb
commit 267deb4
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 14 deletions.
diff --git a/src/dotnet/APIView/APIViewWeb/Client/css/shared/theme-colors.scss b/src/dotnet/APIView/APIViewWeb/Client/css/shared/theme-colors.scss
@@ -70,7 +70,7 @@
     --code-added: #cee9d3;
     --code-removed: #fdcfce;
     --code-delta: #fdefc6;
-    --diff-change-color: rgba(0, 0, 0, 0.1);
+    --dark-overlay: rgba(0, 0, 0, 0.1);
     /*----SVG-------------------------------------------------*/
     --svg-check-box: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
     --svg-switch: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
@@ -148,7 +148,7 @@
     --code-added: #14432d;
     --code-removed: #491d24;
     --code-delta: #4c401a;
-    --diff-change-color: rgba(0, 0, 0, 0.3);
+    --dark-overlay: rgba(0, 0, 0, 0.3);
     /*----SVG-------------------------------------------------*/
     --svg-check-box: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
     --svg-switch: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
@@ -229,7 +229,7 @@
     --code-added: #345039;
     --code-removed: #5d3837;
     --code-delta: #695b32;
-    --diff-change-color: rgba(0, 0, 0, 0.3);
+    --dark-overlay: rgba(0, 0, 0, 0.3);
     /*----SVG-------------------------------------------------*/
     --svg-check-box: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='dimgray' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
     --svg-switch: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='dimgray'/%3e%3c/svg%3e");

diff --git a/src/dotnet/APIView/ClientSPA/src/app/_components/code-panel/code-panel.component.html b/src/dotnet/APIView/ClientSPA/src/app/_components/code-panel/code-panel.component.html
@@ -2,7 +2,7 @@
 <div *ngIf="isLoading" class="spinner-border m-3" role="status">
     <span class="visually-hidden">Loading...</span>
 </div>
-<div *ngIf="!isLoading && codePanelRowSource" class="viewport" (click)="onCodePanelItemClick($event)">
+<div *ngIf="codePanelRowSource" class="viewport" (click)="onCodePanelItemClick($event)">
   <div *uiScroll="let item of codePanelRowSource; let index = index" class="code-line" [attr.data-node-id]="item.nodeId" [ngClass]="getClassObject(item.rowClasses)">
     <ng-container *ngIf="item.rowType === CodePanelRowDatatype.CodeLine">
       <div class="line-actions">

diff --git a/src/dotnet/APIView/ClientSPA/src/app/_components/code-panel/code-panel.component.scss b/src/dotnet/APIView/ClientSPA/src/app/_components/code-panel/code-panel.component.scss
@@ -89,11 +89,11 @@
         }
 
         &.added .line-actions, &.removed .line-actions {
-            background-color: var(--diff-change-color) 
+            background-color: var(--dark-overlay) 
         }
 
         .diff-change {
-            background-color: var(--diff-change-color);
+            background-color: var(--dark-overlay);
             border-radius: 2px;
             padding-left: 2px;
             padding-right: 2px;

diff --git a/src/dotnet/APIView/ClientSPA/src/app/_components/code-panel/code-panel.component.ts b/src/dotnet/APIView/ClientSPA/src/app/_components/code-panel/code-panel.component.ts
@@ -1,6 +1,6 @@
 import { ChangeDetectorRef, Component, ElementRef, Input, OnChanges, OnInit, SimpleChanges, ViewChild, ViewContainerRef } from '@angular/core';
 import { BehaviorSubject, fromEvent, of, Subject, takeUntil } from 'rxjs';
-import { debounceTime, finalize, scan } from 'rxjs/operators';
+import { debounceTime, finalize, scan, take } from 'rxjs/operators';
 import { CommentItemModel } from 'src/app/_models/review';
 import { CodePanelRowDatatype } from 'src/app/_models/revision';
 import { CodePanelRowData, CodePanelToggleableData, InsertCodePanelRowDataMessage, ReviewPageWorkerMessageDirective } from 'src/app/_models/revision';
@@ -26,7 +26,7 @@ export class CodePanelComponent implements OnChanges, OnDestroy{
   lastHuskNodeId :  string | undefined = undefined;
   codeWindowHeight: string | undefined = undefined;
 
-  codePanelRowSource: IDatasource | undefined;
+  codePanelRowSource: IDatasource<CodePanelRowData> | undefined;
   visibleCodePanelRowData: CodePanelRowData[] = [];
   CodePanelRowDatatype = CodePanelRowDatatype;
 
@@ -44,11 +44,15 @@ export class CodePanelComponent implements OnChanges, OnDestroy{
       if (changes['codeLinesData'].currentValue.length > 0) {
         this.setMaxLineNumberWidth();
         this.initializeDataSource().then(() => {
-          this.isLoading = false;
-          this.changeDeterctorRef.detectChanges();
+          this.codePanelRowSource?.adapter?.init$.pipe(take(1)).subscribe(() => {
+            this.isLoading = false;
+          });
+        }).catch((error) => {
+          console.error(error);
         });
       } else {
         this.isLoading = true;
+        this.codePanelRowSource = undefined;
       }
     }
   }
@@ -155,7 +159,7 @@ export class CodePanelComponent implements OnChanges, OnDestroy{
 
   initializeDataSource() : Promise<void> {
     return new Promise((resolve, reject) => {
-      this.codePanelRowSource = new Datasource({
+      this.codePanelRowSource = new Datasource<CodePanelRowData>({
         get: (index, count, success) => {
           let data : any = [];
           if (this.codeLinesData.length > 0) {
@@ -174,8 +178,10 @@ export class CodePanelComponent implements OnChanges, OnDestroy{
         }
       });
 
-      if (this.codePanelRowSource && this.codePanelRowSource.adapter) {
+      if (this.codePanelRowSource) {
         resolve();
+      } else {
+        reject('Failed to Initialize Datasource');
       }
     });
   }

diff --git a/src/dotnet/APIView/ClientSPA/src/app/_components/review-nav/review-nav.component.scss b/src/dotnet/APIView/ClientSPA/src/app/_components/review-nav/review-nav.component.scss
@@ -11,11 +11,18 @@
     }
 
     .p-tree .p-tree-container .p-treenode .p-treenode-content {
-        display: block;
-        padding: 0.15rem;
+        padding: 0.05rem;
         text-overflow: ellipsis;
         white-space: nowrap;
         overflow: hidden;
         border: 0px;
     }
+
+    .p-treenode-content:hover{
+        background: var(--dark-overlay);
+    }
+
+    .p-tree-container {
+        padding-left: 0px !important;
+    }
 }
diff --git a/src/dotnet/APIView/ClientSPA/src/app/_workers/apitree-builder.worker.ts b/src/dotnet/APIView/ClientSPA/src/app/_workers/apitree-builder.worker.ts
@@ -19,6 +19,8 @@ addEventListener('message', ({ data }) => {
     comments = reviewContent.comments;
     diagnosticsTargetIds = new Set<string>(diagnostics.map(diagnostic => diagnostic.targetId));
 
+    insertLineNumber = 0;
+
     let navTreeNodes: any[] = [];
     let treeNodeId : string[] = [];