Merge branch 'main' into release

.github/workflows/build_frontend.yml

@@ -26,7 +26,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
 
       - run: npm install -g yarn
         working-directory: ./client

client/package.json

@@ -23,23 +23,23 @@
     "error-stack-parser": "2.0.6"
   },
   "dependencies": {
-    "@angular-devkit/schematics": "17.0.10",
-    "@angular/animations": "^17.0.9",
-    "@angular/common": "^17.0.9",
-    "@angular/compiler": "^17.0.9",
-    "@angular/core": "^17.0.9",
-    "@angular/forms": "^17.0.9",
-    "@angular/platform-browser": "^17.0.9",
-    "@angular/platform-browser-dynamic": "^17.0.9",
-    "@angular/router": "^17.0.9",
-    "@apollo/client": "^3.7.17",
-    "@ngneat/until-destroy": "^9.1.2",
-    "@ngrx/component": "^17.0.1",
-    "@ngx-formly/core": "^6.2.2",
-    "@ngx-formly/ng-zorro-antd": "^6.2.2",
-    "apollo-angular": "^5.0.0",
-    "ng-zorro-antd": "17.0.0",
-    "ngx-cookie-service": "^16.0.0",
+    "@angular-devkit/schematics": "18.1.2",
+    "@angular/animations": "^18.1.2",
+    "@angular/common": "^18.1.2",
+    "@angular/compiler": "^18.1.2",
+    "@angular/core": "^18.1.2",
+    "@angular/forms": "^18.1.2",
+    "@angular/platform-browser": "^18.1.2",
+    "@angular/platform-browser-dynamic": "^18.1.2",
+    "@angular/router": "^18.1.2",
+    "@apollo/client": "^3.11.1",
+    "@ngneat/until-destroy": "^10.0.0",
+    "@ngrx/component": "^18.0.1",
+    "@ngx-formly/core": "^6.3.6",
+    "@ngx-formly/ng-zorro-antd": "^6.3.6",
+    "apollo-angular": "^7.0.2",
+    "ng-zorro-antd": "18.0.1",
+    "ngx-cookie-service": "^18.0.0",
     "rxjs": "^7.8.1",
     "rxjs-etc": "^10.6.2",
     "rxjs-spy": "^8.0.2",
@@ -48,30 +48,34 @@
     "zone.js": "0.14.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.0.10",
-    "@angular-eslint/schematics": "^16.1.2",
-    "@angular/cli": "^17.0.10",
-    "@angular/compiler-cli": "17.0.9",
-    "@graphql-codegen/add": "^3.2.3",
-    "@graphql-codegen/cli": "^2.16.4",
-    "@graphql-codegen/fragment-matcher": "^3.3.3",
-    "@graphql-codegen/introspection": "^2.2.3",
-    "@graphql-codegen/typescript": "^2.8.7",
-    "@graphql-codegen/typescript-apollo-angular": "^3.5.6",
-    "@graphql-codegen/typescript-apollo-client-helpers": "^2.2.6",
-    "@graphql-codegen/typescript-operations": "^2.5.12",
-    "@types/node": "^12.11.1",
+    "@angular-devkit/build-angular": "^18.1.2",
+    "@angular-devkit/core": "^18.1.2",
+    "@angular-eslint/schematics": "^18.1.0",
+    "@angular/cli": "^18.1.2",
+    "@angular/compiler-cli": "18.1.2",
+    "@graphql-codegen/add": "^5.0.3",
+    "@graphql-codegen/cli": "^5.0.2",
+    "@graphql-codegen/fragment-matcher": "^5.0.2",
+    "@graphql-codegen/introspection": "^4.0.3",
+    "@graphql-codegen/typescript": "^4.0.9",
+    "@graphql-codegen/typescript-apollo-angular": "^4.0.0",
+    "@graphql-codegen/typescript-apollo-client-helpers": "^3.0.0",
+    "@graphql-codegen/typescript-operations": "^4.2.3",
+    "@parcel/watcher": "^2.4.1",
+    "@types/node": "^20.14.12",
+    "@typescript-eslint/utils": "^7.17.0",
     "directory-tree": "^3.5.1",
+    "eslint": "^8.56.0",
     "graphql": "^16.8.1",
     "mustache": "^4.2.0",
     "ngx-json-viewer": "^3.0.2",
     "prettier": "^3.2.4",
-    "svg-to-ts": "^9.0.0",
+    "svg-to-ts": "^12.0.0",
     "svgo": "^3.0.2",
     "ts-node": "~10.9.1",
     "tslib": "^2.3.1",
     "tslint": "~6.1.0",
-    "typescript": "5.2.2",
+    "typescript": "5.5.4",
     "webpack-bundle-analyzer": "^4.5.0"
   },
   "overrides": {

client/src/app/app.module.ts

@@ -3,10 +3,11 @@ import { APP_INITIALIZER, ErrorHandler, NgModule } from '@angular/core'
 import { registerLocaleData } from '@angular/common'
 import en from '@angular/common/locales/en'
 import {
-  HttpClientModule,
-  HttpClientXsrfModule,
-  HttpClientJsonpModule,
   HttpClient,
+  provideHttpClient,
+  withInterceptorsFromDi,
+  withJsonpSupport,
+  withXsrfConfiguration,
 } from '@angular/common/http'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { LetDirective, PushPipe } from '@ngrx/component'
@@ -32,22 +33,12 @@ function initializeApiFactory(httpClient: HttpClient): () => Observable<any> {
 
 @NgModule({
   declarations: [AppComponent],
+  bootstrap: [AppComponent],
   imports: [
     AppRoutingModule,
     BrowserAnimationsModule,
     BrowserModule,
     GraphQLModule,
-    HttpClientModule,
-    HttpClientXsrfModule,
-    HttpClientJsonpModule,
-    // LoggerModule.forRoot({
-    //   timestampFormat: 'mediumTime',
-    //   level: !environment.production
-    //     ? NgxLoggerLevel.TRACE
-    //     : NgxLoggerLevel.OFF,
-    //   enableSourceMaps: true,
-    //   serverLogLevel: NgxLoggerLevel.ERROR,
-    // }),
     NgxJsonViewerModule,
     NzIconModule.forRoot(civicIcons),
     CvcForms2Module,
@@ -56,7 +47,6 @@ function initializeApiFactory(httpClient: HttpClient): () => Observable<any> {
     CvcNetworkErrorAlertModule,
   ],
   providers: [
-    CookieService,
     {
       provide: ErrorHandler,
       useClass: AppErrorHandler,
@@ -68,7 +58,11 @@ function initializeApiFactory(httpClient: HttpClient): () => Observable<any> {
       deps: [HttpClient],
       multi: true,
     },
+    provideHttpClient(
+      withInterceptorsFromDi(),
+      withJsonpSupport(),
+      withXsrfConfiguration({ cookieName: 'XSRF-TOKEN' })
+    ),
   ],
-  bootstrap: [AppComponent],
 })
 export class AppModule {}

client/src/app/components/activities/activity-feed/activity-feed.component.html

@@ -14,7 +14,7 @@
           </ng-template>
           <nz-collapse
             [nzBordered]="false"
-            nzExpandIconPosition="right">
+            nzExpandIconPosition="end">
             <cvc-collapsible-card
               [header]="activityHeaderTemplate"
               [contents]="activityContentTemplate"></cvc-collapsible-card>
@@ -29,8 +29,7 @@
             {{ activity.verbiage }}
             @switch (activity.subject.__typename) {
               @case ('Feature') {
-                <cvc-feature-tag
-                  [feature]="activity.subject"></cvc-feature-tag>
+                <cvc-feature-tag [feature]="activity.subject"></cvc-feature-tag>
               }
               @case ('Assertion') {
                 <cvc-assertion-tag

client/src/app/components/assertions/assertions-table/assertions-table.component.html

@@ -498,4 +498,44 @@
     <span>Loading…</span>
   </nz-tag>
   <cvc-no-more-rows [cvcShowTag]="noMoreRows$ | ngrxPush"></cvc-no-more-rows>
+  <nz-filter-trigger
+    [(nzVisible)]="statusFilterVisible"
+    [nzDropdownMenu]="statusFilterMenu">
+    <span
+      nz-icon
+      nzType="filter"
+      nzTheme="fill"></span>
+  </nz-filter-trigger>
 </ng-template>
+
+<nz-dropdown-menu #statusFilterMenu>
+  <nz-radio-group
+    [(ngModel)]="statusInput"
+    (ngModelChange)="statusChanged()">
+    <label
+      nz-radio-button
+      [nzValue]="availableStatusFilters.NonRejected"
+      >Non-Rejected</label
+    >
+    <label
+      nz-radio-button
+      [nzValue]="availableStatusFilters.Accepted"
+      >Accepted</label
+    >
+    <label
+      nz-radio-button
+      [nzValue]="availableStatusFilters.Submitted"
+      >Submitted</label
+    >
+    <label
+      nz-radio-button
+      [nzValue]="availableStatusFilters.Rejected"
+      >Rejected</label
+    >
+    <label
+      nz-radio-button
+      [nzValue]="availableStatusFilters.All"
+      >All</label
+    >
+  </nz-radio-group>
+</nz-dropdown-menu>

client/src/app/components/assertions/assertions-table/assertions-table.component.ts

@@ -26,6 +26,7 @@ import {
   EvidenceType,
   Maybe,
   PageInfo,
+  EvidenceLevel,
 } from '@app/generated/civic.apollo'
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'
 import { QueryRef } from 'apollo-angular'
@@ -118,6 +119,10 @@ export class CvcAssertionsTableComponent implements OnInit {
   SignificanceInput: Maybe<EvidenceSignificance>
   molecularProfileNameInput: Maybe<string>
   ampLevelInput: Maybe<AmpLevel>
+  statusInput: Maybe<EvidenceStatusFilter> = EvidenceStatusFilter.NonRejected
+
+  availableStatusFilters = EvidenceStatusFilter
+  statusFilterVisible = false
 
   sortColumns: typeof AssertionSortColumns = AssertionSortColumns
 
@@ -144,7 +149,7 @@ export class CvcAssertionsTableComponent implements OnInit {
       phenotypeId: this.phenotypeId,
       diseaseId: this.diseaseId,
       therapyId: this.therapyId,
-      status: this.status,
+      status: this.status || EvidenceStatusFilter.NonRejected,
     })
 
     this.result$ = this.queryRef.valueChanges
@@ -255,6 +260,7 @@ export class CvcAssertionsTableComponent implements OnInit {
       molecularProfileName: this.molecularProfileNameInput,
       therapyName: this.therapyNameInput,
       summary: this.summaryInput,
+      status: this.statusInput,
       assertionType: this.assertionTypeInput
         ? this.assertionTypeInput
         : undefined,
@@ -276,8 +282,16 @@ export class CvcAssertionsTableComponent implements OnInit {
     this.loadedPages += 1
   }
 
+  statusChanged() {
+    this.debouncedQuery.next()
+    this.statusFilterVisible = false
+  }
+
   // virtual scroll helpers
-  trackByIndex(_: number, data: Maybe<AssertionBrowseFieldsFragment>): Maybe<number> {
+  trackByIndex(
+    _: number,
+    data: Maybe<AssertionBrowseFieldsFragment>
+  ): Maybe<number> {
     return data?.id
   }
 

client/src/app/components/assertions/assertions-table/assertions-table.module.ts

@@ -27,6 +27,8 @@ import { NzToolTipModule } from 'ng-zorro-antd/tooltip'
 import { NzTypographyModule } from 'ng-zorro-antd/typography'
 import { CvcAssertionsTagModule } from '../assertions-tag/assertions-tag.module'
 import { CvcAssertionsTableComponent } from './assertions-table.component'
+import { NzDropDownModule } from 'ng-zorro-antd/dropdown'
+import { NzRadioModule } from 'ng-zorro-antd/radio'
 
 @NgModule({
   declarations: [CvcAssertionsTableComponent],
@@ -46,6 +48,8 @@ import { CvcAssertionsTableComponent } from './assertions-table.component'
     NzTagModule,
     NzToolTipModule,
     NzTypographyModule,
+    NzDropDownModule,
+    NzRadioModule,
 
     CvcAssertionsTagModule,
     CvcAutoHeightCardModule,

client/src/app/components/comments/comment-display/comment-display.component.html

@@ -1,3 +1,5 @@
+@let viewer = viewer$ | ngrxPush;
+
 <nz-comment
   [nzAuthor]="comment.commenter.displayName"
   [nzDatetime]="comment.createdAt | timeAgo">
@@ -10,8 +12,43 @@
       nz-comment-avatar
       nzIcon="civic:curator"></nz-avatar>
   </ng-template>
+  @if (
+    viewer &&
+    viewer.signedIn &&
+    viewer.id == comment.commenter.id &&
+    comment.id &&
+    !comment.deleted
+  ) {
+    <nz-comment-action>
+      <span
+        nz-tooltip
+        nz-popconfirm
+        nzPopconfirmPlacement="right"
+        nzPopconfirmTitle="Delete This Comment?"
+        (nzOnConfirm)="deleteComment(comment.id, viewer.mostRecentOrg?.id)"
+        nzTooltipTitle="Delete"
+        nz-icon
+        nzType="delete"></span>
+    </nz-comment-action>
+  }
   <nz-comment-content>
-    <cvc-comment-body
-      [commentBodySegments]="comment.parsedComment"></cvc-comment-body>
+    @if (comment.deleted) {
+      <span
+        nz-typography
+        nzType="secondary">
+        <i> This comment has been deleted. </i>
+      </span>
+    } @else {
+      @if (comment.parsedComment.length == 0) {
+        <span
+          nz-typography
+          nzType="secondary">
+          <i>No Comment Provided</i>
+        </span>
+      } @else {
+        <cvc-comment-body
+          [commentBodySegments]="comment.parsedComment"></cvc-comment-body>
+      }
+    }
   </nz-comment-content>
 </nz-comment>