src/app/components/info/info.component.ts
OnInit
| selector | app-info |
| styleUrls | ./info.component.scss |
| templateUrl | ./info.component.html |
Properties |
Methods |
constructor(data: Observable
|
|||||||||||||||
|
Defined in src/app/components/info/info.component.ts:18
|
|||||||||||||||
|
Parameters :
|
| close |
close()
|
|
Defined in src/app/components/info/info.component.ts:50
|
|
Returns :
void
|
| Public Readonly data |
Type : Observable<SheetInfo>
|
Decorators :
@Inject(MAT_BOTTOM_SHEET_DATA)
|
|
Defined in src/app/components/info/info.component.ts:23
|
| error |
Type : Error
|
Default value : { hasError: false }
|
|
Defined in src/app/components/info/info.component.ts:17
|
| Public Readonly ga |
Type : GoogleAnalyticsService
|
|
Defined in src/app/components/info/info.component.ts:26
|
| info |
Type : SheetInfo
|
|
Defined in src/app/components/info/info.component.ts:18
|
| loading |
Default value : true
|
|
Defined in src/app/components/info/info.component.ts:15
|
| noId |
Default value : false
|
|
Defined in src/app/components/info/info.component.ts:16
|
| Public Readonly sheetRef |
Type : MatBottomSheetRef
|
|
Defined in src/app/components/info/info.component.ts:25
|
import { ChangeDetectorRef, Component, Inject, OnInit } from '@angular/core';
import { MAT_BOTTOM_SHEET_DATA, MatBottomSheetRef } from '@angular/material/bottom-sheet';
import { GoogleAnalyticsService } from 'ngx-google-analytics';
import { Observable } from 'rxjs';
import { GaAction, GaCategory } from '../../models/ga.model';
import { Error } from '../../models/response.model';
import { SheetInfo } from '../../models/sheet.model';
@Component({
selector: 'app-info',
templateUrl: './info.component.html',
styleUrls: ['./info.component.scss'],
})
export class InfoComponent implements OnInit {
loading = true;
noId = false;
error: Error = { hasError: false };
info!: SheetInfo;
// @Output() close: EventEmitter<any> = new EventEmitter<any>();
constructor(
@Inject(MAT_BOTTOM_SHEET_DATA) public readonly data: Observable<SheetInfo>,
private readonly changeDetectorRef: ChangeDetectorRef,
public readonly sheetRef: MatBottomSheetRef,
public readonly ga: GoogleAnalyticsService,
) {}
ngOnInit(): void {
this.loading = true;
this.data.subscribe((info: SheetInfo) => {
this.info = info;
this.loading = false;
if (info.hasError) {
this.error = {
hasError: info.hasError,
msg: info.msg,
status: info.status,
};
} else {
this.error = { hasError: false };
this.info = info;
}
this.changeDetectorRef.detectChanges();
});
}
close() {
this.ga.event(GaAction.CLICK, GaCategory.GRAPH, 'Close Bottom Sheet Information', +false);
this.sheetRef.dismiss();
}
}
<div class="p-2">
<div class="w-100 d-flex justify-content-between align-items-center border-bottom pb-2">
<div>
<span class="h5">{{ info.name }}</span>
</div>
<div>
<button mat-icon-button (click)="close()">
<mat-icon>close</mat-icon>
</button>
</div>
</div>
<div *ngIf="loading || info.name === ''; else resultBlock">
<div class="text-center">
<img src="../../../assets/loading.svg" alt="" class="loading-wait" />
<p class="text-muted">Please wait while the data loads...</p>
</div>
</div>
<ng-template #resultBlock>
<div *ngIf="error.hasError; else infoBlock" class="pt-3">
Could not fetch data {{ !info.notes ? 'and notes' : '' }} for
<strong>{{ info.name }}</strong>
{{
info.notes
? 'but we have some
notes available'
: ''
}}. This could be because,
<ul class="pl-3 pt-2">
<li>Structure does not have an ontology ID.</li>
<li>Structure has an invalid ontology ID.</li>
<li>Broken network connection.</li>
</ul>
<div *ngIf="info.notes">
<div class="pt-3"></div>
<label><strong>Notes</strong></label>
<div>
{{ info.notes }}
</div>
</div>
<div *ngIf="info?.references?.length">
<div class="pt-3"></div>
<label><strong>DOI</strong></label>
<ul class="pl-3 pt-2">
<li *ngFor="let refer of info?.references ?? []">
{{ refer.doi }}
</li>
</ul>
</div>
</div>
</ng-template>
<ng-template #infoBlock>
<div *ngIf="!error.hasError" class="py-3 info">
<label><strong>Description</strong></label>
<div>
{{ info.desc ? info.desc : 'No description found.' }}
</div>
<div class="pt-3"></div>
<label><strong>Ontology ID</strong></label>
<div>
{{ info.ontologyId ? info.ontologyId : 'No ID found.' }}
</div>
<div class="pt-3"></div>
<label
><strong>{{ info.ontologyCode === 'HGNC' ? 'Link' : 'IRI' }}</strong></label
>
<div>
<a [href]="info.iri" target="_blank" class="text-info">{{ info.iri ? info.iri : 'No IRI found.' }}</a>
</div>
<div *ngIf="info.extraLinks">
<div *ngFor="let item of info.extraLinks | keyvalue">
<div class="pt-3"></div>
<label
><strong>{{ item.key }}</strong></label
>
<div>
<a [href]="item.value" target="_blank" class="text-info">{{
item.value
? item.value
: 'No ' +
item.key +
'
found.'
}}</a>
</div>
</div>
</div>
<div class="pt-3"></div>
<!-- REMOVE ME -->
<label><strong>Notes</strong></label>
<markdown [data]="info.notes ? info.notes : 'No notes found'"> </markdown>
<div class="pt-3"></div>
<label><strong>DOI</strong></label>
<div *ngIf="info?.references?.length">
<ul class="pl-3 pt-2">
<li *ngFor="let refer of info?.references ?? []">
{{ refer.doi }}
</li>
</ul>
</div>
<div *ngIf="!info?.references?.length">No DOI references found</div>
</div>
</ng-template>
</div>
./info.component.scss
.info {
max-height: 18.75rem;
overflow: auto;
}
.loading-wait {
width: 10%;
}