Merge pull request #1099 from griffithlab/browse-table-fixes

Disease and Therapy browse table improvements
griffithlab · Aug 21, 2024 · d87f723 · d87f723
2 parents c8e1655 + 0297aa1
commit d87f723
Show file tree

Hide file tree

Showing 29 changed files with 367 additions and 130 deletions.
diff --git a/client/src/app/components/diseases/diseases-table/diseases-table.component.html b/client/src/app/components/diseases/diseases-table/diseases-table.component.html
@@ -46,20 +46,21 @@
     <thead (nzSortOrderChange)="sortChange$.next($event)">
       <tr class="col-header-row">
         <th
-          nzWidth="300px"
+          nzWidth="200px"
           nzLeft
           [nzColumnKey]="sortColumns.Name"
           [nzSortFn]="true">
           Name
         </th>
         <th
-          nzWidth="150px"
+          nzWidth="100px"
           nzLeft
           [nzColumnKey]="sortColumns.Doid"
           [nzSortFn]="true">
           DOID
         </th>
-        <th nzWidth="400px">Features</th>
+        <th nzWidth="200px">Aliases</th>
+        <th nzWidth="300px">Features</th>
         <th
           nzWidth="75px"
           nzRight
@@ -131,6 +132,13 @@
               filterChange$.next()
             "></cvc-clearable-input-filter>
         </th>
+        <th>
+          <cvc-clearable-input-filter
+            [(inputModel)]="diseaseAliasInput"
+            (inputModelChange)="
+              filterChange$.next()
+            "></cvc-clearable-input-filter>
+        </th>
         <th>
           <cvc-clearable-input-filter
             [(inputModel)]="featureNameInput"
@@ -163,6 +171,12 @@
 
             <ng-template #noDoid> -- </ng-template>
           </td>
+          <td class="overflow-ellipsis">
+            <cvc-plain-tag-overflow
+              [maxDisplayCount]="1"
+              [tags]="disease.diseaseAliases"
+              [matchingText]="diseaseAliasInput"></cvc-plain-tag-overflow>
+          </td>
           <td class="overflow-ellipsis">
             <cvc-tag-overflow
               tagType="feature"

diff --git a/client/src/app/components/diseases/diseases-table/diseases-table.component.ts b/client/src/app/components/diseases/diseases-table/diseases-table.component.ts
@@ -31,7 +31,6 @@ import {
   filter,
   map,
   skip,
-  take,
   takeWhile,
   withLatestFrom,
 } from 'rxjs/operators'
@@ -41,6 +40,7 @@ export interface DiseasesTableUserFilters {
   nameInput?: Maybe<string>
   featureNameInput?: Maybe<string>
   doidInput?: Maybe<string>
+  diseaseAliasInput?: Maybe<string>
 }
 
 @UntilDestroy()
@@ -85,10 +85,14 @@ export class CvcDiseasesTableComponent implements OnInit {
   nameInput: Maybe<string>
   featureNameInput: Maybe<string>
   doidInput: Maybe<string>
+  diseaseAliasInput: Maybe<string>
 
   sortColumns: typeof DiseasesSortColumns = DiseasesSortColumns
 
-  constructor(private gql: BrowseDiseasesGQL, private cdr: ChangeDetectorRef) {
+  constructor(
+    private gql: BrowseDiseasesGQL,
+    private cdr: ChangeDetectorRef
+  ) {
     this.noMoreRows$ = new BehaviorSubject<boolean>(false)
     this.scrollEvent$ = new BehaviorSubject<ScrollEvent>('stop')
     this.sortChange$ = new Subject<SortDirectionEvent>()
@@ -185,13 +189,17 @@ export class CvcDiseasesTableComponent implements OnInit {
         name: this.nameInput,
         featureName: this.featureNameInput,
         doid: this.doidInput,
+        diseaseAlias: this.diseaseAliasInput,
       })
       .then(() => this.scrollIndex$.next(0))
 
     this.cdr.detectChanges()
   }
 
-  trackByIndex(_: number, data: Maybe<BrowseDiseaseRowFieldsFragment>): Maybe<number> {
+  trackByIndex(
+    _: number,
+    data: Maybe<BrowseDiseaseRowFieldsFragment>
+  ): Maybe<number> {
     return data?.id
   }
 }
diff --git a/client/src/app/components/diseases/diseases-table/diseases-table.module.ts b/client/src/app/components/diseases/diseases-table/diseases-table.module.ts
@@ -19,6 +19,7 @@ import { NzToolTipModule } from 'ng-zorro-antd/tooltip'
 import { NzTypographyModule } from 'ng-zorro-antd/typography'
 import { CvcDiseaseTagModule } from '../cvc-disease-tag/cvc-disease-tag.module'
 import { CvcDiseasesTableComponent } from './diseases-table.component'
+import { CvcPlainTagOverflowModule } from '@app/components/shared/plain-tag-overflow/plain-tag-overflow.module'
 
 @NgModule({
   declarations: [CvcDiseasesTableComponent],
@@ -46,6 +47,7 @@ import { CvcDiseasesTableComponent } from './diseases-table.component'
     CvcTableCountsModule,
     CvcTableScrollModule,
     CvcTagOverflowModule,
+    CvcPlainTagOverflowModule,
   ],
   exports: [CvcDiseasesTableComponent],
 })

diff --git a/client/src/app/components/diseases/diseases-table/diseases-table.query.gql b/client/src/app/components/diseases/diseases-table/diseases-table.query.gql
@@ -6,6 +6,7 @@ query BrowseDiseases(
   $sortBy: DiseasesSort
   $name: String
   $doid: String
+  $diseaseAlias: String
   $featureName: String
 ) {
   browseDiseases(
@@ -16,6 +17,7 @@ query BrowseDiseases(
     sortBy: $sortBy
     name: $name
     doid: $doid
+    diseaseAlias: $diseaseAlias
     featureName: $featureName
   ) {
     pageInfo {
@@ -53,4 +55,5 @@ fragment BrowseDiseaseRowFields on BrowseDisease {
   featureCount
   link
   deprecated
+  diseaseAliases
 }
diff --git a/client/src/app/components/therapies/therapies-table/therapies-table.component.html b/client/src/app/components/therapies/therapies-table/therapies-table.component.html
@@ -54,11 +54,12 @@
           Name
         </th>
         <th
-          nzWidth="100%"
+          nzWidth="15%"
           [nzColumnKey]="sortColumns.NcitId"
           [nzSortFn]="true">
           NCIt Code
         </th>
+        <th nzWidth="85%">Aliases</th>
         <th
           nzWidth="75px"
           nzRight
@@ -101,6 +102,13 @@
               filterChange$.next()
             "></cvc-clearable-input-filter>
         </th>
+        <th>
+          <cvc-clearable-input-filter
+            [(inputModel)]="therapyAliasFilter"
+            (inputModelChange)="
+              filterChange$.next()
+            "></cvc-clearable-input-filter>
+        </th>
         <th nzRight></th>
         <th nzRight></th>
       </tr>
@@ -123,6 +131,12 @@
 
             <ng-template #noNcit>--</ng-template>
           </td>
+          <td>
+            <cvc-plain-tag-overflow
+              [maxDisplayCount]="3"
+              [tags]="therapy.therapyAliases"
+              [matchingText]="therapyAliasFilter"></cvc-plain-tag-overflow>
+          </td>
           <td
             nzRight
             nzAlign="right">

diff --git a/client/src/app/components/therapies/therapies-table/therapies-table.component.ts b/client/src/app/components/therapies/therapies-table/therapies-table.component.ts
@@ -33,7 +33,6 @@ import {
   filter,
   map,
   skip,
-  take,
   takeWhile,
   withLatestFrom,
 } from 'rxjs/operators'
@@ -42,6 +41,7 @@ import { pluck } from 'rxjs-etc/operators'
 export interface TherapyTableUserFilters {
   ncitIdFilter?: Maybe<string>
   nameFilter?: Maybe<string>
+  therapyAliasFilter?: Maybe<string>
 }
 
 @UntilDestroy()
@@ -87,10 +87,14 @@ export class CvcTherapiesTableComponent implements OnInit {
   // filters
   ncitIdFilter: Maybe<string>
   nameFilter: Maybe<string>
+  therapyAliasFilter: Maybe<string>
 
   sortColumns = TherapySortColumns
 
-  constructor(private gql: TherapiesBrowseGQL, private cdr: ChangeDetectorRef) {
+  constructor(
+    private gql: TherapiesBrowseGQL,
+    private cdr: ChangeDetectorRef
+  ) {
     this.noMoreRows$ = new BehaviorSubject<boolean>(false)
     this.scrollEvent$ = new BehaviorSubject<ScrollEvent>('stop')
     this.sortChange$ = new Subject<SortDirectionEvent>()
@@ -186,13 +190,17 @@ export class CvcTherapiesTableComponent implements OnInit {
       .refetch({
         name: this.nameFilter,
         ncitId: this.ncitIdFilter,
+        therapyAlias: this.therapyAliasFilter,
       })
       .then(() => this.scrollIndex$.next(0))
 
     this.cdr.detectChanges()
   }
 
-  trackByIndex(_: number, data: Maybe<TherapyBrowseTableRowFieldsFragment>): Maybe<number> {
+  trackByIndex(
+    _: number,
+    data: Maybe<TherapyBrowseTableRowFieldsFragment>
+  ): Maybe<number> {
     return data?.id
   }
 }
diff --git a/client/src/app/components/therapies/therapies-table/therapies-table.module.ts b/client/src/app/components/therapies/therapies-table/therapies-table.module.ts
@@ -18,6 +18,7 @@ import { CvcTableCountsModule } from '@app/components/shared/table-counts/table-
 import { CvcNoMoreRowsModule } from '@app/components/shared/no-more-rows/no-more-rows.module'
 import { CvcPipesModule } from '@app/core/pipes/pipes.module'
 import { CvcTherapyTagModule } from '../cvc-therapy-tag/cvc-therapy-tag.module'
+import { CvcPlainTagOverflowModule } from '@app/components/shared/plain-tag-overflow/plain-tag-overflow.module'
 
 @NgModule({
   declarations: [CvcTherapiesTableComponent],
@@ -44,6 +45,7 @@ import { CvcTherapyTagModule } from '../cvc-therapy-tag/cvc-therapy-tag.module'
     CvcNoMoreRowsModule,
     CvcTableCountsModule,
     CvcTableScrollModule,
+    CvcPlainTagOverflowModule,
   ],
   exports: [CvcTherapiesTableComponent],
 })

diff --git a/client/src/app/components/therapies/therapies-table/therapies-table.query.gql b/client/src/app/components/therapies/therapies-table/therapies-table.query.gql
@@ -5,6 +5,7 @@ query TherapiesBrowse(
   $after: String
   $name: String
   $ncitId: String
+  $therapyAlias: String,
   $sortBy: TherapySort
 ) {
   therapies(
@@ -14,6 +15,7 @@ query TherapiesBrowse(
     after: $after
     name: $name
     ncitId: $ncitId
+    therapyAlias: $therapyAlias
     sortBy: $sortBy
   ) {
     totalCount
@@ -42,4 +44,5 @@ fragment TherapyBrowseTableRowFields on BrowseTherapy {
   evidenceCount
   link
   deprecated
+  therapyAliases
 }
diff --git a/client/src/app/generated/civic.apollo-helpers.ts b/client/src/app/generated/civic.apollo-helpers.ts
@@ -164,10 +164,11 @@ export type BrowseClinicalTrialEdgeFieldPolicy = {
 	cursor?: FieldPolicy<any> | FieldReadFunction<any>,
 	node?: FieldPolicy<any> | FieldReadFunction<any>
 };
-export type BrowseDiseaseKeySpecifier = ('assertionCount' | 'deprecated' | 'diseaseUrl' | 'displayName' | 'doid' | 'evidenceItemCount' | 'featureCount' | 'features' | 'id' | 'link' | 'name' | 'variantCount' | BrowseDiseaseKeySpecifier)[];
+export type BrowseDiseaseKeySpecifier = ('assertionCount' | 'deprecated' | 'diseaseAliases' | 'diseaseUrl' | 'displayName' | 'doid' | 'evidenceItemCount' | 'featureCount' | 'features' | 'id' | 'link' | 'name' | 'variantCount' | BrowseDiseaseKeySpecifier)[];
 export type BrowseDiseaseFieldPolicy = {
 	assertionCount?: FieldPolicy<any> | FieldReadFunction<any>,
 	deprecated?: FieldPolicy<any> | FieldReadFunction<any>,
+	diseaseAliases?: FieldPolicy<any> | FieldReadFunction<any>,
 	diseaseUrl?: FieldPolicy<any> | FieldReadFunction<any>,
 	displayName?: FieldPolicy<any> | FieldReadFunction<any>,
 	doid?: FieldPolicy<any> | FieldReadFunction<any>,
@@ -348,7 +349,7 @@ export type BrowseSourceEdgeFieldPolicy = {
 	cursor?: FieldPolicy<any> | FieldReadFunction<any>,
 	node?: FieldPolicy<any> | FieldReadFunction<any>
 };
-export type BrowseTherapyKeySpecifier = ('assertionCount' | 'deprecated' | 'evidenceCount' | 'id' | 'link' | 'name' | 'ncitId' | 'therapyUrl' | BrowseTherapyKeySpecifier)[];
+export type BrowseTherapyKeySpecifier = ('assertionCount' | 'deprecated' | 'evidenceCount' | 'id' | 'link' | 'name' | 'ncitId' | 'therapyAliases' | 'therapyUrl' | BrowseTherapyKeySpecifier)[];
 export type BrowseTherapyFieldPolicy = {
 	assertionCount?: FieldPolicy<any> | FieldReadFunction<any>,
 	deprecated?: FieldPolicy<any> | FieldReadFunction<any>,
@@ -357,6 +358,7 @@ export type BrowseTherapyFieldPolicy = {
 	link?: FieldPolicy<any> | FieldReadFunction<any>,
 	name?: FieldPolicy<any> | FieldReadFunction<any>,
 	ncitId?: FieldPolicy<any> | FieldReadFunction<any>,
+	therapyAliases?: FieldPolicy<any> | FieldReadFunction<any>,
 	therapyUrl?: FieldPolicy<any> | FieldReadFunction<any>
 };
 export type BrowseTherapyConnectionKeySpecifier = ('edges' | 'filteredCount' | 'lastUpdated' | 'nodes' | 'pageCount' | 'pageInfo' | 'totalCount' | BrowseTherapyConnectionKeySpecifier)[];