show badge for comment count on comments tab in detail views

griffithlab · Aug 2, 2023 · a026939 · a026939
1 parent efb4f9a
commit a026939
Show file tree

Hide file tree

Showing 13 changed files with 107 additions and 65 deletions.
diff --git a/client/src/app/components/shared/tab-navigation/tab-navigation.component.html b/client/src/app/components/shared/tab-navigation/tab-navigation.component.html
@@ -20,12 +20,12 @@
             [nzType]="tab.iconName"></i>
           {{ tab.tabLabel }}
           <nz-badge
+            *ngIf="tab.badgeCount && tab.badgeCount > 0"
             nzStandalone
             [nzCount]="tab.badgeCount"
-            nzTitle="There are {{ tab.badgeCount }} outstanding revisions."
-            [nzStyle]="{
-              transform: 'scale(0.75, 0.75) translate(0, -2px)'
-            }"></nz-badge>
+            nzTitle="{{ tab.badgeCount }} {{ tab.tabLabel }}(s)."
+            [nzStyle]="{ transform: 'scale(0.75, 0.75) translate(0, -2px)', backgroundColor: tab.badgeColor || '#ff4d4f'}">
+          </nz-badge>
         </a>
       </nz-tab>
     </nz-tabset>

diff --git a/client/src/app/components/shared/tab-navigation/tab-navigation.component.ts b/client/src/app/components/shared/tab-navigation/tab-navigation.component.ts
@@ -7,6 +7,7 @@ export interface RouteableTab {
   tabLabel: string
   iconName: string
   badgeCount?: number
+  badgeColor?: string
 }
 
 @Component({

diff --git a/client/src/app/generated/civic.apollo.ts b/client/src/app/generated/civic.apollo.ts
@@ -6781,9 +6781,9 @@ export type SourceDetailQueryVariables = Exact<{
 }>;
 
 
-export type SourceDetailQuery = { __typename: 'Query', source?: { __typename: 'Source', id: number, citation?: string | undefined, sourceUrl?: string | undefined, displayType: string, citationId: string } | undefined };
+export type SourceDetailQuery = { __typename: 'Query', source?: { __typename: 'Source', id: number, citation?: string | undefined, sourceUrl?: string | undefined, displayType: string, citationId: string, comments: { __typename: 'CommentConnection', totalCount: number } } | undefined };
 
-export type SourceDetailFieldsFragment = { __typename: 'Source', id: number, citation?: string | undefined, sourceUrl?: string | undefined, displayType: string, citationId: string };
+export type SourceDetailFieldsFragment = { __typename: 'Source', id: number, citation?: string | undefined, sourceUrl?: string | undefined, displayType: string, citationId: string, comments: { __typename: 'CommentConnection', totalCount: number } };
 
 export type SourceSummaryQueryVariables = Exact<{
   sourceId: Scalars['Int'];
@@ -9208,6 +9208,9 @@ export const SourceDetailFieldsFragmentDoc = gql`
   sourceUrl
   displayType
   citationId
+  comments {
+    totalCount
+  }
 }
     `;
 export const SourceSummaryFieldsFragmentDoc = gql`

diff --git a/client/src/app/views/assertions/assertions-detail/assertions-detail.view.ts b/client/src/app/views/assertions/assertions-detail/assertions-detail.view.ts
@@ -27,7 +27,6 @@ export class AssertionsDetailView implements OnDestroy {
 
   assertion$?: Observable<Maybe<AssertionDetailFieldsFragment>>
   loading$?: Observable<boolean>
-  commentsTotal$?: Observable<number>
   flagsTotal$?: Observable<number>
   viewer$: Observable<Viewer>
 
@@ -85,21 +84,23 @@ export class AssertionsDetailView implements OnDestroy {
 
       this.assertion$ = observable.pipe(pluck('data', 'assertion'))
 
-      this.commentsTotal$ = this.assertion$.pipe(
-        pluck('comments', 'totalCount')
-      )
-
       this.flagsTotal$ = this.assertion$.pipe(pluck('flags', 'totalCount'))
 
       this.assertion$
-        .pipe(pluck('revisions', 'totalCount'), takeUntil(this.destroy$))
+        .pipe(takeUntil(this.destroy$))
         .subscribe({
-          next: (count) => {
+          next: (assertionResp) => {
             this.tabs$.next(
               this.defaultTabs.map((tab) => {
                 if (tab.tabLabel === 'Revisions') {
                   return {
-                    badgeCount: count as number,
+                    badgeCount: assertionResp?.revisions.totalCount,
+                    ...tab,
+                  }
+                } else if (tab.tabLabel === 'Comments') {
+                  return {
+                    badgeCount: assertionResp?.comments.totalCount,
+                    badgeColor: '#cccccc',
                     ...tab,
                   }
                 } else {

diff --git a/client/src/app/views/evidence/evidence-detail/evidence-detail.view.ts b/client/src/app/views/evidence/evidence-detail/evidence-detail.view.ts
@@ -27,7 +27,6 @@ export class EvidenceDetailView implements OnDestroy {
 
   evidence$?: Observable<Maybe<EvidenceDetailFieldsFragment>>
   loading$?: Observable<boolean>
-  commentsTotal$?: Observable<number>
   flagsTotal$?: Observable<number>
   viewer$: Observable<Viewer>
 
@@ -85,19 +84,23 @@ export class EvidenceDetailView implements OnDestroy {
 
       this.evidence$ = observable.pipe(pluck('data', 'evidenceItem'))
 
-      this.commentsTotal$ = this.evidence$.pipe(pluck('comments', 'totalCount'))
-
       this.flagsTotal$ = this.evidence$.pipe(pluck('flags', 'totalCount'))
 
       this.evidence$
-        .pipe(pluck('revisions', 'totalCount'), takeUntil(this.destroy$))
+        .pipe(takeUntil(this.destroy$))
         .subscribe({
-          next: (count) => {
+          next: (evidenceResponse) => {
             this.tabs$.next(
               this.defaultTabs.map((tab) => {
                 if (tab.tabLabel === 'Revisions') {
                   return {
-                    badgeCount: count as number,
+                    badgeCount: evidenceResponse?.revisions.totalCount,
+                    ...tab,
+                  }
+                } else if (tab.tabLabel === 'Comments') {
+                  return {
+                    badgeCount: evidenceResponse?.comments.totalCount,
+                    badgeColor: '#cccccc',
                     ...tab,
                   }
                 } else {

diff --git a/client/src/app/views/genes/genes-detail/genes-detail.view.ts b/client/src/app/views/genes/genes-detail/genes-detail.view.ts
@@ -22,7 +22,6 @@ export class GenesDetailView implements OnDestroy {
   loading$?: Observable<boolean>
   gene$?: Observable<Maybe<GeneDetailFieldsFragment>>
   viewer$: Observable<Viewer>
-  commentsTotal$?: Observable<number>
   flagsTotal$?: Observable<number>
   routeSub: Subscription
   subscribable?: SubscribableInput
@@ -72,19 +71,23 @@ export class GenesDetailView implements OnDestroy {
 
       this.gene$ = observable.pipe(pluck('data', 'gene'))
 
-      this.commentsTotal$ = this.gene$.pipe(pluck('comments', 'totalCount'))
-
       this.flagsTotal$ = this.gene$.pipe(pluck('flags', 'totalCount'))
 
       this.gene$
-        .pipe(pluck('revisions', 'totalCount'), takeUntil(this.destroy$))
+        .pipe(takeUntil(this.destroy$))
         .subscribe({
-          next: (count) => {
+          next: (geneResp) => {
             this.tabs$.next(
               this.defaultTabs.map((tab) => {
                 if (tab.tabLabel === 'Revisions') {
                   return {
-                    badgeCount: count as number,
+                    badgeCount: geneResp?.revisions.totalCount,
+                    ...tab,
+                  }
+                } else if (tab.tabLabel === 'Comments') {
+                  return {
+                    badgeCount: geneResp?.comments.totalCount,
+                    badgeColor: '#cccccc',
                     ...tab,
                   }
                 } else {

diff --git a/.../app/views/molecular-profiles/molecular-profiles-detail/molecular-profiles-detail.view.ts b/.../app/views/molecular-profiles/molecular-profiles-detail/molecular-profiles-detail.view.ts
@@ -29,7 +29,6 @@ export class MolecularProfilesDetailView implements OnDestroy {
 
   molecularProfile$?: Observable<Maybe<MolecularProfileDetailFieldsFragment>>
   loading$?: Observable<boolean>
-  commentsTotal$?: Observable<number>
   flagsTotal$?: Observable<number>
   viewer$: Observable<Viewer>
 
@@ -85,23 +84,25 @@ export class MolecularProfilesDetailView implements OnDestroy {
         pluck('data', 'molecularProfile')
       )
 
-      this.commentsTotal$ = this.molecularProfile$.pipe(
-        pluck('comments', 'totalCount')
-      )
-
       this.flagsTotal$ = this.molecularProfile$.pipe(
         pluck('flags', 'totalCount')
       )
 
       this.molecularProfile$
-        .pipe(pluck('revisions', 'totalCount'), takeUntil(this.destroy$))
+        .pipe(takeUntil(this.destroy$))
         .subscribe({
-          next: (count) => {
+          next: (mpResp) => {
             this.tabs$.next(
               this.defaultTabs.map((tab) => {
                 if (tab.tabLabel === 'Revisions') {
                   return {
-                    badgeCount: count as number,
+                    badgeCount: mpResp?.revisions.totalCount,
+                    ...tab,
+                  }
+                } else if (tab.tabLabel === 'Comments') {
+                  return {
+                    badgeCount: mpResp?.comments.totalCount,
+                    badgeColor: '#cccccc',
                     ...tab,
                   }
                 } else {

diff --git a/client/src/app/views/sources/sources-detail/sources-detail.query.gql b/client/src/app/views/sources/sources-detail/sources-detail.query.gql
@@ -10,4 +10,7 @@ fragment SourceDetailFields on Source {
   sourceUrl
   displayType
   citationId
+  comments {
+    totalCount
+  }
 }
diff --git a/client/src/app/views/sources/sources-detail/sources-detail.view.html b/client/src/app/views/sources/sources-detail/sources-detail.view.html
@@ -35,7 +35,7 @@
       </cvc-link-tag>
     </nz-page-header-extra>
     <nz-page-header-content>
-      <cvc-tab-navigation [tabs]="this.tabs"></cvc-tab-navigation>
+      <cvc-tab-navigation [tabs]="this.tabs$ | ngrxPush"></cvc-tab-navigation>
       <div class="content">
         <router-outlet></router-outlet>
       </div>

diff --git a/client/src/app/views/sources/sources-detail/sources-detail.view.ts b/client/src/app/views/sources/sources-detail/sources-detail.view.ts
@@ -10,8 +10,8 @@ import {
   SourceDetailQueryVariables,
 } from '@app/generated/civic.apollo'
 import { QueryRef } from 'apollo-angular'
-import { Observable, Subscription } from 'rxjs'
-import { startWith } from 'rxjs/operators'
+import { BehaviorSubject, Observable, Subject, Subscription } from 'rxjs'
+import { startWith, takeUntil } from 'rxjs/operators'
 import { pluck } from 'rxjs-etc/operators'
 
 @Component({
@@ -25,17 +25,32 @@ export class SourcesDetailView implements OnDestroy {
   sourceId?: number
 
   queryRef?: QueryRef<SourceDetailQuery, SourceDetailQueryVariables>
+  destroy$ = new Subject<void>()
 
   loading$?: Observable<boolean>
   source$?: Observable<Maybe<SourceDetailFieldsFragment>>
 
-  tabs: RouteableTab[]
+  tabs$: BehaviorSubject<RouteableTab[]>
+  defaultTabs: RouteableTab[] = [
+      {
+        routeName: 'summary',
+        iconName: 'pic-left',
+        tabLabel: 'Summary',
+      },
+      {
+        routeName: 'comments',
+        iconName: 'civic-comment',
+        tabLabel: 'Comments',
+      },
+    ]
 
   constructor(
     private viewerService: ViewerService,
     private route: ActivatedRoute,
     private gql: SourceDetailGQL
   ) {
+    this.tabs$ = new BehaviorSubject(this.defaultTabs)
+
     this.viewer$ = this.viewerService.viewer$
 
     this.routeSub = this.route.params.subscribe((params) => {
@@ -49,22 +64,29 @@ export class SourcesDetailView implements OnDestroy {
       this.loading$ = observable.pipe(pluck('loading'), startWith(true))
 
       this.source$ = observable.pipe(pluck('data', 'source'))
+      this.source$.pipe(takeUntil(this.destroy$)).subscribe({
+        next: (sourceResp) => {
+          this.tabs$.next(
+            this.defaultTabs.map((tab) => {
+              if (tab.tabLabel === 'Comments') {
+                return {
+                  badgeCount: sourceResp?.comments.totalCount,
+                  badgeColor: '#cccccc',
+                  ...tab,
+                }
+              } else {
+                return tab
+              }
+            })
+          )
+        },
+      })
     })
-
-    this.tabs = [
-      {
-        routeName: 'summary',
-        iconName: 'pic-left',
-        tabLabel: 'Summary',
-      },
-      {
-        routeName: 'comments',
-        iconName: 'civic-comment',
-        tabLabel: 'Comments',
-      },
-    ]
   }
+
   ngOnDestroy() {
     this.routeSub.unsubscribe()
+    this.destroy$.next()
+    this.destroy$.unsubscribe()
   }
 }
diff --git a/client/src/app/views/variant-groups/variant-groups-detail/variant-groups-detail.view.ts b/client/src/app/views/variant-groups/variant-groups-detail/variant-groups-detail.view.ts
@@ -22,7 +22,6 @@ export class VariantGroupsDetailView implements OnInit, OnDestroy {
   loading$?: Observable<boolean>
   variantGroup$?: Observable<Maybe<VariantGroupDetailFieldsFragment>>
   viewer$: Observable<Viewer>
-  commentsTotal$?: Observable<number>
   revisionsTotal$?: Observable<number>
   flagsTotal$?: Observable<number>
   routeSub: Subscription
@@ -70,21 +69,23 @@ export class VariantGroupsDetailView implements OnInit, OnDestroy {
 
       this.variantGroup$ = observable.pipe(pluck('data', 'variantGroup'))
 
-      this.commentsTotal$ = this.variantGroup$.pipe(
-        pluck('comments', 'totalCount')
-      )
-
       this.flagsTotal$ = this.variantGroup$.pipe(pluck('flags', 'totalCount'))
 
       this.variantGroup$
-        .pipe(pluck('revisions', 'totalCount'), takeUntil(this.destroy$))
+        .pipe(takeUntil(this.destroy$))
         .subscribe({
-          next: (count) => {
+          next: (vgResp) => {
             this.tabs$.next(
               this.defaultTabs.map((tab) => {
                 if (tab.tabLabel === 'Revisions') {
                   return {
-                    badgeCount: count as number,
+                    badgeCount: vgResp?.revisions.totalCount,
+                    ...tab,
+                  }
+                } else if (tab.tabLabel === 'Comments') {
+                  return {
+                    badgeCount: vgResp?.comments.totalCount,
+                    badgeColor: '#cccccc',
                     ...tab,
                   }
                 } else {

diff --git a/client/src/app/views/variants/variants-detail/variants-detail.view.ts b/client/src/app/views/variants/variants-detail/variants-detail.view.ts
@@ -26,7 +26,6 @@ export class VariantsDetailView implements OnDestroy {
 
   variant$?: Observable<Maybe<VariantDetailFieldsFragment>>
   loading$?: Observable<boolean>
-  commentsTotal$?: Observable<number>
   flagsTotal$?: Observable<number>
   viewer$: Observable<Viewer>
 
@@ -80,19 +79,23 @@ export class VariantsDetailView implements OnDestroy {
 
       this.variant$ = observable.pipe(pluck('data', 'variant'))
 
-      this.commentsTotal$ = this.variant$.pipe(pluck('comments', 'totalCount'))
-
       this.flagsTotal$ = this.variant$.pipe(pluck('flags', 'totalCount'))
 
       this.variant$
-        .pipe(pluck('revisions', 'totalCount'), takeUntil(this.destroy$))
+        .pipe(takeUntil(this.destroy$))
         .subscribe({
-          next: (count) => {
+          next: (variantResp) => {
             this.tabs$.next(
               this.defaultTabs.map((tab) => {
                 if (tab.tabLabel === 'Revisions') {
                   return {
-                    badgeCount: count as number,
+                    badgeCount: variantResp?.revisions.totalCount,
+                    ...tab,
+                  }
+                } else if (tab.tabLabel === 'Comments') {
+                  return {
+                    badgeCount: variantResp?.comments.totalCount,
+                    badgeColor: '#cccccc',
                     ...tab,
                   }
                 } else {

diff --git a/server/app/models/source.rb b/server/app/models/source.rb
@@ -2,6 +2,7 @@ class Source < ActiveRecord::Base
   include ModeratedField
   include Subscribable
   include WithTimepointCounts
+  include Commentable
 
   has_many :evidence_items
   has_and_belongs_to_many :genes