projects/web-mev/src/app/features/analysis/components/analysis-result/analysis-result.component.ts
Analysis Result Component Container component used for displaying the result of an executed operation
| changeDetection | ChangeDetectionStrategy.Default |
| selector | mev-analysis-result |
| styleUrls | ./analysis-result.component.scss |
| templateUrl | ./analysis-result.component.html |
Properties |
Methods |
Inputs |
constructor()
|
| outputs | |
| getOperationName |
getOperationName()
|
|
get the name of an executed or executing operation for running operations the name is returned in the operation field for executed operations the name is in operation_name property
Returns :
any
|
| ngOnChanges |
ngOnChanges()
|
|
Returns :
void
|
| operationName |
Type : string
|
import {
Component,
ChangeDetectionStrategy,
Input,
OnChanges
} from '@angular/core';
/**
* Analysis Result Component
* Container component used for displaying the result of an executed operation
*/
@Component({
selector: 'mev-analysis-result',
templateUrl: './analysis-result.component.html',
styleUrls: ['./analysis-result.component.scss'],
changeDetection: ChangeDetectionStrategy.Default
})
export class AnalysisResultComponent implements OnChanges {
@Input() outputs;
operationName: string;
constructor() {}
ngOnChanges(): void {
this.outputs = { ...this.outputs };
this.operationName = this.getOperationName();
}
/**
* get the name of an executed or executing operation
* for running operations the name is returned in the operation field
* for executed operations the name is in operation_name property
*/
getOperationName() {
if (typeof this.outputs.operation === 'string') {
return this.outputs.operation;
}
return this.outputs.operation?.operation_name;
}
}
<div *ngIf="!outputs.error_messages?.length; else error">
<ng-container *ngIf="operationName === 'Principal component analysis (PCA)'">
<mev-scatter-plot *ngIf="outputs" [outputs]="outputs"></mev-scatter-plot>
</ng-container>
<ng-container *ngIf="operationName === 'DESeq2'">
<mev-deseq2 [outputs]="outputs"></mev-deseq2>
</ng-container>
<ng-container *ngIf="operationName === 'Limma/voom'">
<mev-limma [outputs]="outputs"></mev-limma>
</ng-container>
<ng-container *ngIf="operationName === 'Hierarchical clustering (HCL)'">
<mev-hcl [outputs]="outputs"></mev-hcl>
</ng-container>
<ng-container *ngIf="operationName === 'Fast Gene Set Enrichment Analysis (fgsea)'">
<mev-gsea [outputs]="outputs"></mev-gsea>
</ng-container>
<ng-container *ngIf="operationName === 'K-means'">
<mev-kmeans [outputs]="outputs"></mev-kmeans>
</ng-container>
</div>
<ng-template #error>
<p class="error">The analysis result cannot be displayed. The error description:
<span class="error__description">{{ outputs.error_messages }}</span>
</p>
</ng-template>
./analysis-result.component.scss
.error {
font-size: 12px;
}
.error__description {
font-weight: bold;
color: #b94e4e;
}