Skip to content

Commit

Permalink
Merge branch 'features' into staging
Browse files Browse the repository at this point in the history
  • Loading branch information
@acoffman
acoffman committed Jan 25, 2024
2 parents 17d28db + 03f51b4 commit 346304d
Show file tree
Hide file tree
Showing 13 changed files with 147 additions and 201 deletions.
5 changes: 3 additions & 2 deletions client/src/app/components/genes/genes-summary/genes-summary.page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@
<nz-descriptions-item nzTitle="Resources">
<cvc-tag-list>
<cvc-link-tag
[href]="'http://dgidb.org/genes/' + gene.name"
[href]="'https://dgidb.org/results?searchType=gene&searchTerms=' + gene.name"
[tooltip]="'View ' + gene.name + ' on DGIdb'">
DGIdb
</cvc-link-tag>
Expand All @@ -96,4 +96,5 @@
<!-- mygeneinfo -->
<cvc-my-gene-info [geneInfo]="gene.myGeneInfoDetails"></cvc-my-gene-info>
</nz-col>
</nz-row>
</nz-row>

121 changes: 82 additions & 39 deletions client/src/app/components/variants/variants-menu/variants-menu.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,82 +1,110 @@
<nz-spin [nzSpinning]="loading$ | ngrxPush">
<ng-container *ngIf="menuVariants$ | ngrxPush as variants">
<nz-card [nzTitle]="cardTitle"
<nz-card
[nzTitle]="cardTitle"
[nzExtra]="cardExtra">

<ng-template #cardTitle>
<ng-container *ngIf="totalVariants$ | ngrxPush as total">
<span nz-typography
nzType="secondary">{{ total }} Total</span>
<span nz-typography
*ngIf="total > variants.length"
nzType="secondary">({{ variants.length }} displayed)</span>
<span
nz-typography
nzType="secondary">
{{ total }} Total
</span>
<span
nz-typography
nzType="secondary">
&nbsp;
<cvc-feature-tag
*ngIf="feature"
[feature]="feature"></cvc-feature-tag>
Variants
</span>
<span
nz-typography
*ngIf="total > variants.length"
nzType="secondary"
>({{ variants.length }} displayed)</span
>
</ng-container>

</ng-template>

<ng-template #cardExtra>
<form nz-form
<form
nz-form
nzLayout="inline"
id="variant-filters">
<nz-form-item>
<nz-form-label>Name Filter</nz-form-label>
<nz-form-control>
<nz-input-group [nzSuffix]="nameInputClearTpl"
<nz-input-group
[nzSuffix]="nameInputClearTpl"
id="name-filter-group"
[nzCompact]="true"
nzSize="small">
<input type="text"
<input
type="text"
nz-input
placeholder="Variant Names"
name="name-filter"
(ngModelChange)="onModelUpdated()"
[(ngModel)]="variantNameFilter" />
<ng-template #nameInputClearTpl>
<i nz-icon
<i
nz-icon
class="ant-input-clear-icon"
nzTheme="fill"
nzType="close-circle"
*ngIf="variantNameFilter"
(click)="variantNameFilter = undefined; onModelUpdated()"></i>
(click)="
variantNameFilter = undefined; onModelUpdated()
"></i>
</ng-template>
</nz-input-group>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label>Variant Type</nz-form-label>
<nz-form-control>
<ng-container *ngIf="menuVariantTypes$ | ngrxPush as variantTypes">
<nz-select nzAllowClear
<ng-container
*ngIf="menuVariantTypes$ | ngrxPush as variantTypes">
<nz-select
nzAllowClear
nzSize="small"
nzMode="multiple"
style="min-width: 115px;"
style="min-width: 115px"
[nzDropdownMatchSelectWidth]="false"
nzPlaceHolder="Variant Type"
name="variantTypes"
nzShowSearch
[(ngModel)]="variantTypeFilter"
(ngModelChange)="onModelUpdated()"
[nzCustomTemplate]="variantTypeTemplate">
<nz-option *ngFor="let variantType of variantTypes"
<nz-option
*ngFor="let variantType of variantTypes"
[nzLabel]="variantType!.name"
[nzValue]="variantType">
</nz-option>
</nz-select>
<ng-template #variantTypeTemplate let-selected>
<ng-template
#variantTypeTemplate
let-selected>
<div class="ant-select-selection-item-content">
<i nz-icon nzType="civic-varianttype" nzTheme="twotone" [nzTwotoneColor]="iconColor"></i>
<i
nz-icon
nzType="civic-varianttype"
nzTheme="twotone"
[nzTwotoneColor]="iconColor"></i>
{{ selected.nzLabel }}
</div>
</ng-template>
</ng-container>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label>
No Variant Type
</nz-form-label>
<nz-form-label> No Variant Type </nz-form-label>
<nz-form-control>
<label nz-checkbox
<label
nz-checkbox
name="noVt"
[(ngModel)]="hasNoVariantType"
(ngModelChange)="onModelUpdated()">
Expand All @@ -86,20 +114,24 @@
<nz-form-item>
<nz-form-label>Order By</nz-form-label>
<nz-form-control>
<nz-select (ngModelChange)="onVariantSortOrderChanged($event)"
<nz-select
(ngModelChange)="onVariantSortOrderChanged($event)"
nzSize="small"
id="variant-sort-order"
name="sortBy"
style="width: 115px;"
style="width: 115px"
[(ngModel)]="sortBy">
<nz-option nzValue="NAME"
<nz-option
nzValue="NAME"
nzLabel="Variant Name"
style="width: 100%"
selected></nz-option>
<nz-option nzValue="COORDINATE_START"
<nz-option
nzValue="COORDINATE_START"
style="width: 100%"
nzLabel="Start Position"></nz-option>
<nz-option nzValue="COORDINATE_END"
<nz-option
nzValue="COORDINATE_END"
style="width: 100%"
nzLabel="End Position"></nz-option>
</nz-select>
Expand All @@ -111,30 +143,41 @@
<nz-col nzSpan="24">
<cvc-tag-list size="sm">
<ng-container *ngFor="let v of variants">
<cvc-variant-tag *ngIf="v" [variant]="v"></cvc-variant-tag>
<cvc-variant-tag
*ngIf="v"
[variant]="v"></cvc-variant-tag>
</ng-container>
</cvc-tag-list>
</nz-col>
</nz-row>
<ng-container *ngIf="pageInfo$ | ngrxPush as pageInfo">
<nz-row id="load-more-btn"
<nz-row
id="load-more-btn"
*ngIf="pageInfo.hasNextPage && pageInfo.endCursor">
<button nz-button
<button
nz-button
nzType="default"
nzSize="small"
style="width: 95%;"
(click)="fetchMore(pageInfo.endCursor)">Load More
style="width: 95%"
(click)="fetchMore(pageInfo.endCursor)">
Load More
</button>
<nz-select
<nz-select
[(ngModel)]="this.pageSize"
style="width: 5%;"
style="width: 5%"
nzSize="small">
<nz-option nzLabel="50" [nzValue]="50"></nz-option>
<nz-option nzLabel="100" [nzValue]="100"></nz-option>
<nz-option nzLabel="300" [nzValue]="300"></nz-option>
<nz-option
nzLabel="50"
[nzValue]="50"></nz-option>
<nz-option
nzLabel="100"
[nzValue]="100"></nz-option>
<nz-option
nzLabel="300"
[nzValue]="300"></nz-option>
</nz-select>
</nz-row>
</ng-container>
</nz-card>
</ng-container>
</nz-spin>
</nz-spin>
69 changes: 36 additions & 33 deletions client/src/app/components/variants/variants-menu/variants-menu.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,14 @@ import {
MenuVariantTypeFragment,
VariantTypesForFeatureGQL,
} from '@app/generated/civic.apollo'
import { map, debounceTime, distinctUntilChanged, filter, startWith } from 'rxjs/operators'
import { Observable, Observer, Subject } from 'rxjs'
import { Apollo, QueryRef } from 'apollo-angular'
import { map, debounceTime, filter, startWith } from 'rxjs/operators'
import { Observable, Subject } from 'rxjs'
import { QueryRef } from 'apollo-angular'
import { ApolloQueryResult } from '@apollo/client/core'
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'
import { isNonNulled } from 'rxjs-etc'
import { getEntityColor } from '@app/core/utilities/get-entity-color'
import { LinkableFeature } from '@app/components/features/feature-tag/feature-tag.component'

@UntilDestroy()
@Component({
Expand All @@ -27,38 +28,41 @@ import { getEntityColor } from '@app/core/utilities/get-entity-color'
styleUrls: ['./variants-menu.component.less'],
})
export class CvcVariantsMenuComponent implements OnInit {
@Input() featureId?: number
@Input() featureName?: string
@Input() feature?: LinkableFeature
featureId?: number


menuVariants$?: Observable<Maybe<MenuVariantFragment>[]>;
menuVariantTypes$?: Observable<Maybe<MenuVariantTypeFragment>[]>;
totalVariants$?: Observable<number>;
queryRef$!: QueryRef<VariantsMenuQuery, VariantsMenuQueryVariables>;
pageInfo$?: Observable<PageInfo>;
loading$?: Observable<boolean>;
menuVariants$?: Observable<Maybe<MenuVariantFragment>[]>
menuVariantTypes$?: Observable<Maybe<MenuVariantTypeFragment>[]>
totalVariants$?: Observable<number>
queryRef$!: QueryRef<VariantsMenuQuery, VariantsMenuQueryVariables>
pageInfo$?: Observable<PageInfo>
loading$?: Observable<boolean>

sortBy: VariantMenuSortColumns = VariantMenuSortColumns.Name
variantNameFilter: Maybe<string>;
variantTypeFilter: Maybe<MenuVariantTypeFragment[]> = [];
variantNameFilter: Maybe<string>
variantTypeFilter: Maybe<MenuVariantTypeFragment[]> = []
hasNoVariantType: boolean = false

private debouncedQuery = new Subject<void>()
private result$!: Observable<ApolloQueryResult<VariantsMenuQuery>>
connection$!: Observable<VariantConnection>
private initialQueryVars!: VariantsMenuQueryVariables
pageSize = 50;
pageSize = 50

iconColor = getEntityColor('VariantType')


constructor(private gql: VariantsMenuGQL, private variantTypeGql: VariantTypesForFeatureGQL) { }
constructor(
private gql: VariantsMenuGQL,
private variantTypeGql: VariantTypesForFeatureGQL
) {}

ngOnInit() {
if (this.featureId === undefined) {
throw new Error('Must pass a feature id into variant menu component.')
if (this.feature === undefined) {
throw new Error('Must pass a feature into variant menu component.')
}

this.featureId = this.feature.id

this.initialQueryVars = {
featureId: this.featureId,
first: this.pageSize,
Expand All @@ -68,14 +72,15 @@ export class CvcVariantsMenuComponent implements OnInit {
this.result$ = this.queryRef$.valueChanges

this.loading$ = this.result$.pipe(
map(({data, loading}) => (loading && !data) ),
map(({ data, loading }) => loading && !data),
filter(isNonNulled),
startWith(true)
);
)

this.connection$ = this.result$
.pipe(map(r => r.data?.variants),
filter(isNonNulled)) as Observable<VariantConnection>;
this.connection$ = this.result$.pipe(
map((r) => r.data?.variants),
filter(isNonNulled)
) as Observable<VariantConnection>

this.pageInfo$ = this.connection$.pipe(
map((c) => c.pageInfo),
Expand All @@ -89,15 +94,13 @@ export class CvcVariantsMenuComponent implements OnInit {
this.totalVariants$ = this.connection$.pipe(map((c) => c.totalCount))

this.debouncedQuery
.pipe(debounceTime(500),
untilDestroyed(this))
.subscribe((_) => this.refresh());
.pipe(debounceTime(500), untilDestroyed(this))
.subscribe((_) => this.refresh())

this.menuVariantTypes$ = this.variantTypeGql
.watch({featureId: this.featureId})
.valueChanges
.pipe(
map(c => c.data?.variantTypes.edges?.map((e) => e.node)),
.watch({ featureId: this.featureId })
.valueChanges.pipe(
map((c) => c.data?.variantTypes.edges?.map((e) => e.node)),
filter(isNonNulled)
)
}
Expand All @@ -122,14 +125,14 @@ export class CvcVariantsMenuComponent implements OnInit {

refresh() {
if (this.featureId === undefined) {
throw new Error('Must pass a gene id into variant menu component.')
throw new Error('Must pass a feature id into variant menu component.')
}

this.queryRef$.refetch({
featureId: this.featureId,
variantName: this.variantNameFilter,
hasNoVariantType: this.hasNoVariantType,
variantTypeIds: this.variantTypeFilter?.map(vt => vt.id),
variantTypeIds: this.variantTypeFilter?.map((vt) => vt.id),
first: this.pageSize,
sortBy: {
column: this.sortBy,
Expand Down
2 changes: 2 additions & 0 deletions client/src/app/components/variants/variants-menu/variants-menu.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import { CvcVariantsMenuComponent } from './variants-menu.component'
import { CvcVariantTypeTagModule } from '@app/components/variant-types/variant-type-tag/variant-type-tag.module'
import { NzCheckboxModule } from 'ng-zorro-antd/checkbox'
import { NzSpinModule } from 'ng-zorro-antd/spin'
import { CvcFeatureTagModule } from '@app/components/features/feature-tag/feature-tag.module'

@NgModule({
declarations: [CvcVariantsMenuComponent],
Expand All @@ -39,6 +40,7 @@ import { NzSpinModule } from 'ng-zorro-antd/spin'
CvcVariantTagModule,
CvcTagListModule,
CvcVariantTypeTagModule,
CvcFeatureTagModule,
],
exports: [CvcVariantsMenuComponent],
})
Expand Down
Loading

0 comments on commit 346304d

Please sign in to comment.