Merge branch 'main' into release

client/package.json

@@ -35,8 +35,8 @@
     "@apollo/client": "^3.7.17",
     "@ngneat/until-destroy": "^9.1.2",
     "@ngrx/component": "^16.1.0",
-    "@ngx-formly/core": "^6.1.8",
-    "@ngx-formly/ng-zorro-antd": "^6.1.8",
+    "@ngx-formly/core": "^6.2.2",
+    "@ngx-formly/ng-zorro-antd": "^6.2.2",
     "apollo-angular": "^5.0.0",
     "ng-zorro-antd": "^16.1.0",
     "ngx-cookie-service": "^16.0.0",
@@ -79,4 +79,4 @@
       "error-stack-parser": "2.0.6"
     }
   }
-}
+}

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

@@ -0,0 +1,8 @@
+<ng-container *ngIf="activity$ | ngrxPush as activity">
+    <ng-container [ngSwitch]="activity.verbiage">
+        <nz-divider nzPlain nzOrientation="left" nzText="Flagging Comment"></nz-divider>
+        <nz-card>
+            <!-- <cvc-comment-body [commentBodySegments]="activity.comment.parsedComment"></cvc-comment-body> -->
+        </nz-card>
+    </ng-container>
+</ng-container>

client/src/app/components/activities/activity-card/activity-card.component.ts

@@ -0,0 +1,27 @@
+import { Component, Input, OnDestroy } from "@angular/core";
+import { OnInit } from "@angular/core";
+import { ActivityCardFragment, ActivityCardGQL, Maybe } from "@app/generated/civic.apollo";
+import { Observable, pluck } from "rxjs";
+
+
+@Component({
+    selector: 'cvc-activity-card',
+    templateUrl: './activity-card.component.html',
+    styleUrls: ['./activity-card.component.less'],
+  })
+export class CvcActivityCardComponent implements OnInit {
+  @Input() activityId!: number
+
+  activity$?: Observable<Maybe<ActivityCardFragment>>
+
+  constructor(private gql: ActivityCardGQL) {}
+
+  ngOnInit() {
+    if (this.activityId == undefined) {
+      throw new Error('cvc-activity-card requires valid activityId input.')
+    }
+    this.activity$ = this.gql
+      .watch({ activityId: this.activityId })
+      .valueChanges.pipe(pluck('data', 'activity'))
+  }
+}

client/src/app/components/activities/activity-card/activity-card.gql

@@ -0,0 +1,15 @@
+query ActivityCard($activityId: Int!) {
+  activity(id: $activityId) {
+    ...ActivityCard
+  }
+}
+
+fragment ActivityCard on ActivityInterface {
+  id
+  verbiage
+  #... on FlagEntityActivity {
+    #comment {
+      #...commentListNode
+    #}
+  #}
+}

client/src/app/components/activities/activity-card/activity-card.module.ts

@@ -0,0 +1,20 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+import { PushModule } from "@ngrx/component";
+import { NzCardModule } from "ng-zorro-antd/card";
+import { CvcActivityCardComponent } from "./activity-card.component";
+import { CvcCommentBodyModule } from "@app/components/comments/comment-body/comment-body.module";
+import { NzDividerModule } from "ng-zorro-antd/divider";
+
+@NgModule({
+  declarations: [CvcActivityCardComponent],
+  imports: [
+    CommonModule,
+    PushModule,
+    NzCardModule,
+    NzDividerModule,
+    CvcCommentBodyModule
+  ],
+  exports: [CvcActivityCardComponent],
+})
+export class CvcActivityCardModule {}

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

@@ -0,0 +1,201 @@
+<nz-spin
+  [nzSpinning]="this.loading$ | ngrxPush"
+  nzTip="Loading">
+  <ng-container *ngIf="activities$ | ngrxPush as activities">
+    <nz-timeline *ngIf="activities?.length">
+      <ng-container *ngFor="let activity of activities">
+        <nz-timeline-item
+          *ngIf="activity"
+          [nzDot]="timelineDotTemplate">
+          <ng-template #timelineDotTemplate>
+            <nz-avatar nzIcon="user" [nzSrc]="activity.user.profileImagePath"></nz-avatar>
+          </ng-template>
+          <nz-collapse
+            [nzBordered]="false"
+            nzExpandIconPosition="right">
+            <cvc-collapsible-card [header]="activityHeaderTemplate" [contents]="activityContentTemplate"></cvc-collapsible-card>
+          </nz-collapse>
+
+          <ng-template #activityContentTemplate>
+            <cvc-activity-card [activityId]="activity.id"></cvc-activity-card>
+          </ng-template>
+
+          <ng-template #activityHeaderTemplate>
+
+          <cvc-user-tag [user]="activity.user"></cvc-user-tag>
+          {{ activity.verbiage }}
+          <ng-container
+            [ngSwitch]="activity.subject.__typename">
+            <cvc-gene-tag
+              *ngSwitchCase="'Gene'"
+              [gene]="activity.subject"></cvc-gene-tag>
+            <cvc-assertion-tag
+              *ngSwitchCase="'Assertion'"
+              [assertion]="activity.subject"></cvc-assertion-tag>
+            <cvc-evidence-tag
+              *ngSwitchCase="'EvidenceItem'"
+              [evidence]="activity.subject"></cvc-evidence-tag>
+            <cvc-variant-tag
+              *ngSwitchCase="'Variant'"
+              [variant]="activity.subject"></cvc-variant-tag>
+            <cvc-revision-tag
+              *ngSwitchCase="'Revision'"
+              [revision]="$any(activity.subject)"></cvc-revision-tag>
+            <cvc-variant-group-tag
+              *ngSwitchCase="'VariantGroup'"
+              [variantgroup]="activity.subject"></cvc-variant-group-tag>
+            <cvc-source-tag
+              *ngSwitchCase="'Source'"
+              mode="concise"
+              [source]="$any(activity.subject)"></cvc-source-tag>
+            <cvc-molecular-profile-tag
+              *ngSwitchCase="'MolecularProfile'"
+              [molecularProfile]="activity.subject"></cvc-molecular-profile-tag>
+            <span *ngSwitchDefault>{{ activity.subject.name }}</span>
+          </ng-container>
+          ·
+          <span
+            nz-tooltip
+            nzTooltipPlacement="top"
+            [nzTooltipTitle]="activity.createdAt | date">
+            {{ activity.createdAt | timeAgo }}
+          </span>
+          </ng-template>
+
+<!--           <cvc-event-timeline-item
+            [event]="event!"
+            [tagDisplay]="tagDisplay"></cvc-event-timeline-item> -->
+        </nz-timeline-item>
+      </ng-container>
+    </nz-timeline>
+  </ng-container>
+
+
+  <!-- <ng-container
+    *ngIf="this.unfilteredCount$ | ngrxPush as count; else noEvents">
+    <nz-row [nzGutter]="16">
+      <nz-col [nzSpan]="this.showFilters ? '18' : '24'">
+        <nz-space
+          nzDirection="vertical"
+          style="width: 100%">
+          <nz-card
+            [nzTitle]="this.showFilters ? 'Events' : undefined"
+            [nzExtra]="refreshFeed"
+            *nzSpaceItem>
+            <ng-container *ngIf="events$ | ngrxPush as events">
+              <nz-row [nzGutter]="16">
+                <nz-col
+                  nzSpan="24"
+                  class="timeline">
+                  <ng-container *ngIf="events.length; else noEvents">
+                    <cvc-event-timeline
+                      [events]="events"
+                      [tagDisplay]="tagDisplay"></cvc-event-timeline>
+                  </ng-container>
+                  <ng-container *ngIf="pageInfo$ | ngrxPush as pageInfo">
+                    <div
+                      nz-list-load-more
+                      *ngIf="pageInfo.hasNextPage && pageInfo.endCursor">
+                      <button
+                        nz-button
+                        nzType="default"
+                        nzSize="small"
+                        nzBlock
+                        (click)="fetchMore(pageInfo.endCursor)">
+                        Load More
+                      </button>
+                    </div>
+                  </ng-container>
+                </nz-col>
+              </nz-row>
+            </ng-container>
+            <ng-template #refreshFeed>
+              <ng-container
+                *ngIf="this.pollForNewEvents && this.originalEventCount">
+                <ng-container *ngrxLet="this.newEventCount$ as newCount">
+                  <nz-badge
+                    *ngIf="newCount && newCount > originalEventCount"
+                    [nzCount]="newCount - originalEventCount">
+                    <button
+                      nz-button
+                      nz-tooltip="Click to Refresh"
+                      (click)="refresh()">
+                      New Event(s)
+                    </button>
+                  </nz-badge>
+                </ng-container>
+              </ng-container>
+            </ng-template>
+          </nz-card>
+        </nz-space>
+      </nz-col>
+      <nz-col nzSpan="6">
+        <nz-space
+          nzDirection="vertical"
+          style="width: 100%"
+          *ngIf="showFilters">
+          <span *nzSpaceItem>
+            Show Child Events
+            <nz-switch
+              nzSize="small"
+              [(ngModel)]="showChildren"
+              (ngModelChange)="onShowChildrenToggle()"></nz-switch>
+          </span>
+          <ng-container *nzSpaceItem>
+            <cvc-participant-list
+              listTitle="events && Action"
+              [participantList]="(actions$ | ngrxPush) || []"
+              (participantSelectedEvent)="onActionSelected($event)">
+              <ng-template
+                #itemTemplate
+                let-action>
+                {{ action.id | eventVerbiage : 'action-filter' }}
+              </ng-template>
+            </cvc-participant-list>
+            <cvc-participant-list
+              *ngIf="!userId"
+              listTitle="Curator"
+              [participantList]="(participants$ | ngrxPush) || []"
+              (participantSelectedEvent)="onOriginatingUserSelected($event)">
+              <ng-template
+                #itemTemplate
+                let-user>
+                <nz-avatar
+                  *ngIf="user.profileImagePath; else noAvatar"
+                  nz-comment-avatar
+                  [nzSrc]="user.profileImagePath">
+                </nz-avatar>
+                <ng-template #noAvatar>
+                  <nz-avatar
+                    nz-comment-avatar
+                    [nzText]="
+                      user.displayName.charAt(0) | uppercase
+                    "></nz-avatar>
+                </ng-template>
+                <span>{{ user.displayName }}</span>
+              </ng-template>
+            </cvc-participant-list>
+            <cvc-participant-list
+              *ngIf="!organizationId"
+              listTitle="Organization"
+              [participantList]="(organizations$ | ngrxPush) || []"
+              (participantSelectedEvent)="onOrganizationSelected($event)">
+              <ng-template
+                #itemTemplate
+                let-organization>
+                <nz-col>
+                  {{ organization.name }}
+                </nz-col>
+              </ng-template>
+            </cvc-participant-list>
+          </ng-container>
+        </nz-space>
+      </nz-col>
+    </nz-row>
+  </ng-container>
+  <ng-template #noEvents>
+    <nz-empty
+      nzNotFoundImage="simple"
+      nzNotFoundContent="No Events"></nz-empty>
+  </ng-template> -->
+</nz-spin>

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

@@ -0,0 +1,25 @@
+:host {
+  display: block;
+}
+
+.timeline {
+  // timeline's base styles pull it up and left of its container,
+  // this padding adds them back b/c in the event feed card it looks to cramped
+  padding-top: 6px;
+  padding-left: 6px;
+}
+
+#event-filters {
+  // all form items get a right margin which creates an unsightly gap on the right :(
+  // so we remove that here
+  nz-form-item:last-child {
+    margin-right: 0;
+  }
+  // need to specify selector widths or else item names clipped
+  #participant-filter {
+    width: 200px;
+  }
+  #organization-filter {
+    width: 250px;
+  }
+}