From 4146292955229080a216bbec445ea96cca704bcf Mon Sep 17 00:00:00 2001
From: Michael Hartung <michi@Michaels-MacBook-Pro.local>
Date: Tue, 28 Sep 2021 19:15:43 +0200
Subject: [PATCH] show expression values in detail window
---
.../info-tile/info-tile.component.html | 96 ++++++++++++++-----
1 file changed, 71 insertions(+), 25 deletions(-)
diff --git a/src/app/components/info-tile/info-tile.component.html b/src/app/components/info-tile/info-tile.component.html
index 54147cc0..32a529b5 100644
--- a/src/app/components/info-tile/info-tile.component.html
+++ b/src/app/components/info-tile/info-tile.component.html
@@ -1,72 +1,118 @@
<div *ngIf="wrapper">
<div>
- <p *ngIf="!wrapper.data.drugId && wrapper.data.detailShowLabel && wrapper.data.label"
- [ngClass]="{'text-normal':smallStyle}">
+ <p
+ *ngIf="
+ !wrapper.data.drugId &&
+ wrapper.data.detailShowLabel &&
+ wrapper.data.label
+ "
+ [ngClass]="{ 'text-normal': smallStyle }"
+ >
<b><span>Label:</span></b>
<span class="is-capitalized"> {{ wrapper.data.label }}</span>
</p>
- <p *ngIf="wrapper.data.proteinName" [ngClass]="{'text-normal':smallStyle}">
+ <p
+ *ngIf="wrapper.data.proteinName"
+ [ngClass]="{ 'text-normal': smallStyle }"
+ >
<b><span>Name:</span></b>
<span class="is-capitalized"> {{ wrapper.data.proteinName }}</span>
</p>
- <p *ngIf="wrapper.data.symbol" [ngClass]="{'text-normal':smallStyle}">
+ <p *ngIf="wrapper.data.symbol" [ngClass]="{ 'text-normal': smallStyle }">
<b><span>Symbol:</span></b>
<span class="is-capitalized"> {{ wrapper.data.symbol }}</span>
</p>
- <p *ngIf="wrapper.data.drugId || wrapper.data.disorderId" [ngClass]="{'text-normal':smallStyle}">
+ <p
+ *ngIf="wrapper.data.drugId || wrapper.data.disorderId"
+ [ngClass]="{ 'text-normal': smallStyle }"
+ >
<b><span>Name:</span></b>
<span class="is-capitalized"> {{ wrapper.data.label }}</span>
</p>
- <p *ngIf="wrapper.data.icd10" [ngClass]="{'text-normal': smallStyle}">
+ <p *ngIf="wrapper.data.icd10" [ngClass]="{ 'text-normal': smallStyle }">
<b><span>ICD10:</span></b>
- <span class="is-capitalized"> {{wrapper.data.icd10.length===0 || (wrapper.data.icd10.length ===1 && wrapper.data.icd10[0].length===0) ? '-' : wrapper.data.icd10}}</span>
+ <span class="is-capitalized">
+ {{
+ wrapper.data.icd10.length === 0 ||
+ (wrapper.data.icd10.length === 1 &&
+ wrapper.data.icd10[0].length === 0)
+ ? "-"
+ : wrapper.data.icd10
+ }}</span
+ >
</p>
- <p *ngIf="wrapper.data.drugId" [ngClass]="{'text-normal':smallStyle}">
+ <p *ngIf="wrapper.data.drugId" [ngClass]="{ 'text-normal': smallStyle }">
<b><span>DrugBank:</span></b>
- <a href="https://go.drugbank.com/drugs/{{ wrapper.data.drugId }}" target="_blank">
+ <a
+ href="https://go.drugbank.com/drugs/{{ wrapper.data.drugId }}"
+ target="_blank"
+ >
<span class="is-capitalized"> {{ wrapper.data.drugId }}</span>
</a>
</p>
- <p *ngIf="wrapper.data.disorderId" [ngClass]="{'text-normal':smallStyle}">
+ <p
+ *ngIf="wrapper.data.disorderId"
+ [ngClass]="{ 'text-normal': smallStyle }"
+ >
<b><span>Mondo:</span></b>
- <a href="https://www.ebi.ac.uk/ols/ontologies/mondo/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMONDO_{{writeZeros(7-(''+wrapper.data.disorderId).length)}}{{ wrapper.data.disorderId }}" target="_blank">
+ <a
+ href="https://www.ebi.ac.uk/ols/ontologies/mondo/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMONDO_{{
+ writeZeros(7 - ('' + wrapper.data.disorderId).length)
+ }}{{ wrapper.data.disorderId }}"
+ target="_blank"
+ >
<span class="is-capitalized"> MONDO:{{ wrapper.data.disorderId }}</span>
</a>
</p>
- <p *ngIf="wrapper.data.groupName" [ngClass]="{'text-normal':smallStyle}">
+ <p *ngIf="wrapper.data.groupName" [ngClass]="{ 'text-normal': smallStyle }">
<b><span>Group:</span></b>
<span class="is-capitalized"> {{ wrapper.data.groupName }}</span>
</p>
- <p *ngIf="wrapper.data.uniprotAc" [ngClass]="{'text-normal':smallStyle}">
+ <p *ngIf="wrapper.data.uniprotAc" [ngClass]="{ 'text-normal': smallStyle }">
<b><span>Uniprot:</span></b>
- <a href="https://www.uniprot.org/uniprot/{{ wrapper.data.uniprotAc }}" target="_blank">
+ <a
+ href="https://www.uniprot.org/uniprot/{{ wrapper.data.uniprotAc }}"
+ target="_blank"
+ >
<span class="is-capitalized"> {{ wrapper.data.uniprotAc }}</span>
</a>
</p>
- <p *ngIf="wrapper.data.ensg" [ngClass]="{'text-normal':smallStyle}">
+ <p *ngIf="wrapper.data.ensg" [ngClass]="{ 'text-normal': smallStyle }">
<b><span>Ensembl:</span></b>
<a
*ngFor="let ensg of wrapper.data.ensg"
- href="https://www.ensembl.org/Homo_sapiens/Gene/Summary?g={{ ensg }}" target="_blank">
+ href="https://www.ensembl.org/Homo_sapiens/Gene/Summary?g={{ ensg }}"
+ target="_blank"
+ >
<span class="is-capitalized"> {{ ensg }}</span>
</a>
</p>
- <p *ngIf="wrapper.expression" [ngClass]="{'text-normal':smallStyle}">
+ <p *ngIf="wrapper.expression" [ngClass]="{ 'text-normal': smallStyle }">
<b><span>Expression:</span></b>
<span class="is-capitalized"> {{ wrapper.expression }}</span>
- <span class="icon" pTooltip="Tissue expression data is provided by the GTEx project. Unit is expression per million."
- [tooltipStyleClass]="'drgstn drgstn-tooltip'"
- tooltipPosition="top"><i class="fas fa-info-circle"></i></span>
+ <span
+ class="icon has-text-info"
+ pTooltip="Tissue expression data is provided by the GTEx project. Unit is expression per million."
+ [tooltipStyleClass]="'drgstn drgstn-tooltip'"
+ tooltipPosition="top"
+ ><i class="fas fa-info-circle"></i
+ ></span>
</p>
-
</div>
<app-toggle
*ngIf="wrapper.data.netexId && wrapper.data.netexId.startsWith('p')"
- [value]="analysis.inSelection(wrapper)" [smallStyle]="smallStyle"
- (valueChange)="$event ? analysis.addItems([wrapper]) : analysis.removeItems([wrapper])" textOn="Seed"
- textOff="Off" tooltipOn="Add protein to selection." tooltipOff="Remove protein from selection."></app-toggle>
+ [value]="analysis.inSelection(wrapper)"
+ [smallStyle]="smallStyle"
+ (valueChange)="
+ $event ? analysis.addItems([wrapper]) : analysis.removeItems([wrapper])
+ "
+ textOn="Seed"
+ textOff="Off"
+ tooltipOn="Add protein to selection."
+ tooltipOff="Remove protein from selection."
+ ></app-toggle>
</div>
-<div *ngIf="!wrapper" [ngClass]="{'text-normal':smallStyle}">
+<div *ngIf="!wrapper" [ngClass]="{ 'text-normal': smallStyle }">
Please select a node for further information.
</div>
--
GitLab