highlighting the selected table geneontology/noctua-annotation-review#30

geneontology · Dec 9, 2020 · 54078d2 · 54078d2
1 parent 08090b4
commit 54078d2
Show file tree

Hide file tree

Showing 12 changed files with 61 additions and 38 deletions.
diff --git a/src/@noctua.form/services/cams.service.ts b/src/@noctua.form/services/cams.service.ts
@@ -23,8 +23,10 @@ export class CamsService {
   onCamsCheckoutChanged: BehaviorSubject<any>;
   onSelectedCamChanged: BehaviorSubject<any>;
   onSelectedNodeChanged: BehaviorSubject<any>;
-  selectedNodeUuid;
-  selectedCamUuid;
+  _selectedNodeUuid: string;
+  _selectedCamUuid;
+
+  currentMatch: Entity = new Entity(null, null);
 
   public annoton: Annoton;
   public camFormGroup$: Observable<FormGroup>;
@@ -42,13 +44,13 @@ export class CamsService {
 
     this.onSelectedCamChanged.subscribe((uuid: string) => {
       if (uuid) {
-        this.selectedCamUuid = uuid;
+        this.currentMatch.modelId = uuid;
       }
     });
 
     this.onSelectedNodeChanged.subscribe((uuid: string) => {
       if (uuid) {
-        this.selectedNodeUuid = uuid;
+        this.currentMatch.uuid = uuid;
       }
     });
   }

diff --git a/src/@noctua.search/components/art-basket/art-basket.component.html b/src/@noctua.search/components/art-basket/art-basket.component.html
@@ -16,7 +16,7 @@
       Log in to Continue
     </div>
     <div *ngFor="let cam of cams" id="{{'noc-basket-'+cam.displayId}}" (click)="selectItem(cam)" class="noc-group-row"
-      [ngClass]="{'noc-selected': cam.id===camsService.selectedCamUuid}" fxLayout="column"
+      [ngClass]="{'noc-selected': cam.id===camsService.currentMatch?.modelId}" fxLayout="column"
       fxLayoutAlign="start stretch">
       <div *ngIf="cam.modified" class="noc-modified-header w-100-p" fxLayout="row" fxLayoutAlign="start center">
         <div class="noc-title">Modified Model:
@@ -101,4 +101,4 @@
       </button>
     </ng-container>
   </div>
-</div>
+</div>
diff --git a/src/@noctua.search/services/noctua-review-search.service.ts b/src/@noctua.search/services/noctua-review-search.service.ts
@@ -141,9 +141,7 @@ export class NoctuaReviewSearchService {
         this.matchedCountCursor = (this.matchedCountCursor + 1) % this.matchedCount;
         this.currentMatchedEnity = this.matchedEntities[this.matchedCountCursor];
         this.camsService.expandMatch(this.currentMatchedEnity.uuid);
-        this.camsService.selectedNodeUuid = this.currentMatchedEnity.uuid;
-        this.camsService.selectedCamUuid = this.currentMatchedEnity.modelId;
-
+        this.camsService.currentMatch = this.currentMatchedEnity;
         this.noctuaSearchMenuService.scrollTo('#' + this.currentMatchedEnity.annotonDisplayId);
 
         return this.currentMatchedEnity;
@@ -154,15 +152,16 @@ export class NoctuaReviewSearchService {
             return;
         }
         this.matchedCountCursor = this.matchedCountCursor - 1;
+
         if (this.matchedCountCursor < 0) {
             this.matchedCountCursor = this.matchedCount - 1;
         }
+
         this.currentMatchedEnity = this.matchedEntities[this.matchedCountCursor];
         this.camsService.expandMatch(this.currentMatchedEnity.uuid);
-        this.camsService.selectedNodeUuid = this.currentMatchedEnity.uuid;
-        this.camsService.selectedCamUuid = this.currentMatchedEnity.modelId;
-
+        this.camsService.currentMatch = this.currentMatchedEnity;
         this.noctuaSearchMenuService.scrollTo('#' + this.currentMatchedEnity.annotonDisplayId);
+
         return this.currentMatchedEnity;
     }
 
@@ -182,19 +181,18 @@ export class NoctuaReviewSearchService {
         this.matchedCountCursor = step;
         this.currentMatchedEnity = this.matchedEntities[this.matchedCountCursor];
         this.camsService.expandMatch(this.currentMatchedEnity.uuid);
-        this.camsService.selectedNodeUuid = this.currentMatchedEnity.uuid;
-        this.camsService.selectedCamUuid = this.currentMatchedEnity.modelId;
+        this.camsService.currentMatch = this.currentMatchedEnity;
 
         this.noctuaSearchMenuService.scrollTo('#' + this.currentMatchedEnity.annotonDisplayId);
 
         return this.currentMatchedEnity;
     }
 
-    replaceAll(replaceWith): Observable<any> {
+    replaceAll(replaceWith: Entity): Observable<any> {
         return this.camsService.replace(this.matchedEntities, replaceWith);
     }
 
-    replace(replaceWith): Observable<any> {
+    replace(replaceWith: Entity): Observable<any> {
         return this.camsService.replace([this.currentMatchedEnity], replaceWith);
     }
 
@@ -207,8 +205,7 @@ export class NoctuaReviewSearchService {
         this.matchedCountCursor = 0;
         this.matchedCount = 0;
         this.currentMatchedEnity = undefined;
-        this.camsService.selectedNodeUuid = undefined;
-        this.camsService.selectedCamUuid = undefined;
+        this.camsService.currentMatch = new Entity(null, null);
         this.searchCriteria = new SearchCriteria();
     }
 

diff --git a/src/app/main/apps/noctua-form/cam/cam-table/annoton-table/annoton-table.component.html b/src/app/main/apps/noctua-form/cam/cam-table/annoton-table/annoton-table.component.html
@@ -1,6 +1,7 @@
 <div class="w-100-p">
   <div class="noc-annoton-table-body w-100-p" fxLayout="row" fxLayoutAlign="start start">
-    <div class="annoton-table" fxFlex="">
+    <div class="annoton-table"
+      [ngClass]="{'noc-selected': annoton.displayId===camsService.currentMatch?.annotonDisplayId}" fxFlex="">
       <table fxFlex="1 1 auto" mat-table class="" [dataSource]="grid" [@animateStagger]="{value:'50'}">
         <ng-container matColumnDef="relationship">
           <th mat-header-cell *matHeaderCellDef fxFlex="120px" fxLayout="row" fxLayoutAlign="start center">Relationship
@@ -28,7 +29,7 @@
           <td mat-cell class="noc-column-flex" *matCellDef="let entity" fxFlex="" fxLayout="row"
             fxLayoutAlign="start center" [attr.id]="entity.term?.displayId" [ngClass]="{'noc-highlight-match': entity.term?.highlight,
             'noc-highlight-modified': entity.term?.modified,
-            'noc-highlight-match-current': entity.term?.uuid===camsService.selectedNodeUuid}">
+            'noc-highlight-match-current': entity.term?.uuid===camsService.currentMatch?.uuid}">
             <p class="">
               {{entity.term?.label}} <br>
               <a (click)="$event.stopPropagation()" href="{{entity.term?.url}}" target="_blank">
@@ -53,7 +54,7 @@
           <td mat-cell *matCellDef="let entity" [attr.id]="entity.extension?.displayId" fxFlex="150px" fxLayout="row"
             fxLayoutAlign="start center" [ngClass]="{'noc-highlight-match': entity.extension?.highlight,
             'noc-highlight-modified': entity.extension?.modified,
-            'noc-highlight-match-current': entity.extension?.uuid===camsService.selectedNodeUuid}">
+            'noc-highlight-match-current': entity.extension?.uuid===camsService.currentMatch?.uuid}">
             <p class="">{{entity.extension?.label}} <br>
               <a (click)="$event.stopPropagation()" href="{{entity.extension?.url}}" target="_blank">
                 {{ entity.extension?.id }}
@@ -156,4 +157,4 @@
       </div>
     </div>
   </div>
-</div>
+</div>
diff --git a/src/app/main/apps/noctua-form/cam/cam-table/annoton-table/annoton-table.component.scss b/src/app/main/apps/noctua-form/cam/cam-table/annoton-table/annoton-table.component.scss
@@ -66,11 +66,13 @@ $accent: map-get($theme, accent);
   }
 
   .annoton-table {
+
     // position: relative;
     //  flex: 1 1 auto;
     //    border-bottom: 1px solid rgba(0, 0, 0, .12);
     //  overflow: auto;
 
+
     tr.mat-footer-row,
     tr.mat-row {
       height: auto;
@@ -175,5 +177,11 @@ $accent: map-get($theme, accent);
       display:flex;
       justify-content:flex-end;
      } */
+
+    &.noc-selected {
+      table {
+        background-color: rgba(map-get($accent, default), 0.05) !important;
+      }
+    }
   }
 }
diff --git a/src/app/main/apps/noctua-form/cam/cam-table/annoton-table/annoton-table.component.ts b/src/app/main/apps/noctua-form/cam/cam-table/annoton-table/annoton-table.component.ts
@@ -66,7 +66,8 @@ export class AnnotonTableComponent implements OnInit, OnDestroy {
 
   private unsubscribeAll: Subject<any>;
 
-  constructor(private camService: CamService,
+  constructor(
+    private camService: CamService,
     public camsService: CamsService,
     public noctuaFormMenuService: NoctuaFormMenuService,
     public noctuaUserService: NoctuaUserService,

diff --git a/src/app/main/apps/noctua-form/cam/cam-table/cam-table.component.html b/src/app/main/apps/noctua-form/cam/cam-table/cam-table.component.html
@@ -42,7 +42,7 @@ <h3>
         </h3>
       </div>
       <div *ngFor="let annoton of cam.annotons" [attr.id]="annoton.displayId" class="w-100-p"
-        [ngClass]="{'noc-annoton-selected': annoton.id=== camService.annoton?.id}">
+        [ngClass]="{'noc-selected': annoton.displayId===camsService.currentMatch?.annotonDisplayId}">
         <div class="noc-annoton-table-heading" fxLayout="row" fxLayoutAlign="start center">
           <div fxFlex="25px" (click)="$event.stopPropagation()">
             <button mat-icon-button (click)="toggleExpand(annoton)" color="primary" class="noc-toggle-expand-button">
@@ -57,6 +57,8 @@ <h3>
             <div class="text-truncate">
               <strong> {{annoton?.presentation.qualifier}} </strong>
               {{annoton?.presentation.title}}
+
+              {{annoton.id}}, {{camService.annoton?.id}}
             </div>
           </div>
           <mat-chip class="noc-chip-xs" [ngClass]="annoton.annotonType">

diff --git a/src/app/main/apps/noctua-form/cam/cam-table/cam-table.component.scss b/src/app/main/apps/noctua-form/cam/cam-table/cam-table.component.scss
@@ -178,18 +178,19 @@ $accent: map-get($theme, accent);
     }
   }
 
-  .noc-annoton-selected {
-    border: rgba(map-get($accent, default), 0.4) solid 1px;
-    border-left: rgba(map-get($accent, default), 0.5) solid 5px;
+  .noc-selected {
     background-color: #FFFFFF;
 
-    .noc-annoton-table-heading {
-      background-color: rgba(map-get($accent, default), 0.05);
-    }
-
     .noc-cam-table-body {
-      background-color: rgba(map-get($accent, default), 0.05);
+
+      &::before {
+        left: 37px;
+        width: 5px;
+        background-color: darken($noc-highlight-model-color, 15%);
+        content: "";
+      }
     }
+
   }
 
   .noc-cam-table-body {

diff --git a/src/app/main/apps/noctua-form/cam/cam-table/cam-table.component.ts b/src/app/main/apps/noctua-form/cam/cam-table/cam-table.component.ts
@@ -15,7 +15,8 @@ import {
   AnnotonType,
   NoctuaUserService,
   NoctuaFormMenuService,
-  RightPanel
+  RightPanel,
+  CamsService
 } from 'noctua-form-base';
 import { NoctuaConfirmDialogService } from '@noctua/components/confirm-dialog/confirm-dialog.service';
 import { trigger, state, transition, style, animate } from '@angular/animations';
@@ -56,7 +57,9 @@ export class CamTableComponent implements OnInit, OnDestroy {
 
   private _unsubscribeAll: Subject<any>;
 
-  constructor(public camService: CamService,
+  constructor(
+    public camService: CamService,
+    public camsService: CamsService,
     public noctuaFormMenuService: NoctuaFormMenuService,
     public noctuaUserService: NoctuaUserService,
     public noctuaFormConfigService: NoctuaFormConfigService,

diff --git a/src/app/main/apps/noctua-form/noctua-form.component.ts b/src/app/main/apps/noctua-form/noctua-form.component.ts
@@ -92,7 +92,6 @@ export class NoctuaFormComponent implements OnInit, OnDestroy {
         if (!annotons) {
           return;
         }
-        annotons[0].presentation.title = ' 44444'
         this.cam.updateAnnotonDisplayNumber();
       });
   }

diff --git a/src/app/main/apps/noctua-search/cams/cams-review/cams-review.component.html b/src/app/main/apps/noctua-search/cams/cams-review/cams-review.component.html
@@ -10,7 +10,7 @@
   </div>
   <div class="noc-cams-results">
     <div class="noc-cam-container" *ngFor="let cam of cams" id="{{'noc-review-cams-'+cam.displayId}}"
-      [ngClass]=" {'noc-selected': cam.id===camsService.selectedCamUuid}" fxLayout="column"
+      [ngClass]=" {'noc-selected': cam.id===camsService.currentMatch?.modelId}" fxLayout="column"
       fxLayoutAlign="start stretch">
       <div *ngIf="cam?.loading.status" class="noc-cam-heading noc-loading-container" fxLayout="column"
         fxLayoutAlign="center center">
@@ -127,4 +127,4 @@ <h3>
       Add Models
     </a>
   </div>
-</div>
+</div>
diff --git a/src/app/main/apps/noctua-search/cams/cams-review/cams-review.component.scss b/src/app/main/apps/noctua-search/cams/cams-review/cams-review.component.scss
@@ -64,7 +64,16 @@
       @include mat-elevation(2);
 
       &.noc-selected {
-        border-left: darken($noc-highlight-model-color, 15%) solid 5px;
+        border-left: darken($noc-highlight-model-color, 15%) solid 1px;
+
+        .noc-cam-table {
+
+          &::before {
+            left: 43px;
+            width: 5px;
+            background-color: darken($noc-highlight-model-color, 15%);
+          }
+        }
       }
     }
-Original file line number
+Diff line change
@@ Expand Up @@
             if (!annotons) {
               return;
             }
-            annotons[0].presentation.title = ' 44444'
             this.cam.updateAnnotonDisplayNumber();
           });
       }
@@ Expand Down @@