Skip to content
Snippets Groups Projects
Commit 124d48d3 authored by AndiMajore's avatar AndiMajore
Browse files

fixed display of drug table on non drug tasks; fixed normalization

parent ff52bf63
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 312 additions and 281 deletions
src/app/components/analysis-panel/analysis-panel.component.html
+ 216
− 176
View file @ 124d48d3
......@@ -227,6 +227,7 @@
*ngIf="task && task.info.done"
[class.is-visible]="tab === 'table'"
>
<div *ngIf="task.info.target === 'drug'">
<div class="columns m-1">
<!-- column normalization for drugs button START -->
<div class="column">
......@@ -291,7 +292,7 @@
<div class="columns m-1">
<!-- drug table or placeholder if no drugs found START -->
<div class="column">
<div *ngIf="tableDrugs.length === 0 && task.info.target === 'drug'">
<div *ngIf="tableDrugs.length === 0">
<i>No drugs have been found.</i>
</div>
<app-drug-table
......@@ -302,7 +303,7 @@
</div>
<!-- drug table or placeholder if no drugs found END -->
</div>
</div>
<div *ngIf="tableProteins.length > 0" class="table-header">
<div class="columns m-1">
<div class="column">
......@@ -311,6 +312,7 @@
<span>Proteins</span>
</h4>
</div>
<div class="column">
<div class="field has-addons is-pulled-right m-1 control">
<a
......@@ -321,6 +323,44 @@
<span>Download</span>
</a>
</div>
<div
class="field has-addons is-pulled-right m-1"
*ngIf="tableHasScores && task.info.target !== 'drug'"
>
<p class="control">
<button
class="button is-rounded has-tooltip is-small"
pTooltip="Normalize the scores"
[tooltipStyleClass]="
'drgstn drgstn-tooltip drgstn-tooltip-top'
"
tooltipPosition="top"
[class.is-primary]="tableNormalize"
(click)="toggleNormalization(true)"
[ngClass]="{ 'text-small': drugstoneConfig.smallStyle }"
>
<span class="icon is-small">
<i class="fa fa-ruler-vertical"></i>
</span>
<span>Normalization On</span>
</button>
</p>
<p class="control">
<button
class="button is-rounded has-tooltip is-small"
pTooltip="Disable normalization of the scores."
[tooltipStyleClass]="
'drgstn drgstn-tooltip drgstn-tooltip-top'
"
tooltipPosition="top"
[class.is-primary]="!tableNormalize"
(click)="toggleNormalization(false)"
[ngClass]="{ 'text-small': drugstoneConfig.smallStyle }"
>
<span>Off</span>
</button>
</p>
</div>
</div>
</div>
</div>
......
src/app/components/analysis-panel/analysis-panel.component.ts
+ 48
− 57
View file @ 124d48d3
......@@ -48,10 +48,9 @@ interface Seeded {
isSeed: boolean;
}
interface Baited {
closestViralProteins: string[];
closestDistance: number;
}
// interface Baited {
// closestDistance: number;
// }
@Component({
selector: 'app-analysis-panel',
......@@ -62,6 +61,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
@ViewChild('networkWithLegend', {static: false}) networkWithLegendEl: ElementRef;
@Input() token: string | null = null;
@Input()
public set config(config: IConfig | undefined) {
if (typeof config === 'undefined') {
......@@ -71,6 +71,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
this.myConfig[key] = config[key];
}
}
@Output() tokenChange = new EventEmitter<string | null>();
@Output() showDetailsChange = new EventEmitter<Wrapper>();
@Output() setInputNetwork = new EventEmitter<any>();
......@@ -81,32 +82,30 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
public network: any;
public nodeData: { nodes: any, edges: any } = {nodes: null, edges: null};
private drugNodes: any[] = [];
private drugEdges: any[] = [];
// private drugNodes: any[] = [];
// private drugEdges: any[] = [];
public showDrugs = false;
public tab: 'meta' | 'network' | 'table' = 'table';
public adjacentDrugs = false;
public adjacentDrugList: Node[] = [];
public adjacentDrugEdgesList: Node[] = [];
public adjacentDisordersProtein = false;
public adjacentDisordersDrug = false;
public adjacentProteinDisorderList: Node[] = [];
public adjacentProteinDisorderEdgesList: Node[] = [];
public adjacentDrugDisorderList: Node[] = [];
public adjacentDrugDisorderEdgesList: Node[] = [];
// public adjacentDrugs = false;
// public adjacentDrugList: Node[] = [];
// public adjacentDrugEdgesList: Node[] = [];
//
// public adjacentDisordersProtein = false;
// public adjacentDisordersDrug = false;
//
// public adjacentProteinDisorderList: Node[] = [];
// public adjacentProteinDisorderEdgesList: Node[] = [];
//
// public adjacentDrugDisorderList: Node[] = [];
// public adjacentDrugDisorderEdgesList: Node[] = [];
private proteins: any;
public effects: any;
public tableDrugs: Array<Drug & Scored & Baited> = [];
public tableProteins: Array<Node & Scored & Seeded & Baited> = [];
public tableSelectedProteins: Array<Node & Scored & Seeded & Baited> = [];
public tableViralProteins: Array<Scored & Seeded> = [];
public tableSelectedViralProteins: Array<Scored & Seeded> = [];
public tableDrugs: Array<Drug & Scored> = [];
public tableProteins: Array<Node & Scored & Seeded> = [];
public tableSelectedProteins: Array<Node & Scored & Seeded> = [];
public tableNormalize = false;
public tableHasScores = false;
......@@ -218,14 +217,10 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
});
this.tableHasScores = ['trustrank', 'closeness', 'degree', 'proximity', 'betweenness', 'quick', 'super']
this.tableHasScores = ['trustrank', 'closeness', 'degree', 'betweenness', 'quick', 'super']
.indexOf(this.task.info.algorithm) !== -1;
if (this.tableHasScores) {
if (this.task.info.algorithm !== 'proximity') {
this.toggleNormalization(true);
} else {
this.toggleNormalization(false);
}
}
this.networkHandler.activeNetwork.networkInternal.on('deselectNode', (properties) => {
......@@ -290,7 +285,6 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
this.nodeData.nodes.update(updatedNodes);
const proteinSelection = this.tableSelectedProteins;
const viralProteinSelection = this.tableSelectedViralProteins;
for (const item of items) {
// TODO: Refactor!
const found = proteinSelection.findIndex((i) => getProteinNodeId(i) === item.id);
......@@ -303,7 +297,6 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
}
}
this.tableSelectedProteins = [...proteinSelection];
this.tableSelectedViralProteins = [...viralProteinSelection];
} else {
// else: selected is null
const updatedNodes = [];
......@@ -322,7 +315,6 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
this.nodeData.nodes.update(updatedNodes);
const proteinSelection = [];
const viralProteinSelection = [];
for (const item of items) {
const tableItem = this.tableProteins.find((i) => getProteinNodeId(i) === item.id);
if (tableItem) {
......@@ -330,7 +322,6 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
}
}
this.tableSelectedProteins = [...proteinSelection];
this.tableSelectedViralProteins = [...viralProteinSelection];
}
});
}
......@@ -388,13 +379,13 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
};
if (normalize) {
normalizeFn(this.tableDrugs);
normalizeFn(this.tableProteins);
normalizeFn(this.tableViralProteins);
if (this.task.info.target === 'drug')
normalizeFn(this.tableDrugs)
} else {
unnormalizeFn(this.tableDrugs);
unnormalizeFn(this.tableProteins);
unnormalizeFn(this.tableViralProteins);
if (this.task.info.target === 'drug')
unnormalizeFn(this.tableDrugs)
}
}
......
src/app/components/analysis-panel/drug-table/drug-table.component.html
+ 1
− 1
View file @ 124d48d3
......@@ -62,7 +62,7 @@
<fa-icon [icon]="faTimes" [classes]="['icon']"></fa-icon>
</span>
</td>
<td *ngIf="tableHasScores">{{e.score | number}}</td>
<td *ngIf="tableHasScores">{{e.score.toString() | number}}</td>
</tr>
</ng-template>
</p-table>
src/app/components/analysis-panel/prot-table/prot-table.component.html
+ 1
− 1
View file @ 124d48d3
......@@ -58,7 +58,7 @@
<a *ngFor="let ensg of e.ensg; index as i" href="https://www.ensembl.org/Homo_sapiens/Gene/Summary?g={{ensg }}" target="_blank">{{ ensg +(i == e.ensg.length -1 ? "":", ")}}</a>
</td>
<td>{{e.proteinName}}</td>
<td *ngIf="tableHasScores">{{e.score | number}}</td>
<td *ngIf="tableHasScores">{{e.score.toString() | number}}</td>
<td>
<span *ngIf="e.isSeed">
<fa-icon [icon]="faCheck" [classes]="['icon']"></fa-icon>
......
src/app/components/info-tile/info-tile.component.html
+ 43
− 42
View file @ 124d48d3
......@@ -20,7 +20,48 @@
</p>
<p *ngIf="wrapper.data.symbol" [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }">
<b><span>Symbol:</span></b>
<span class="is-capitalized"> {{ wrapper.data.symbol }}</span>
<a class="is-capitalized" href="https://www.genecards.org/cgi-bin/carddisp.pl?gene={{wrapper.data.symbol }}" target="_blank"> {{ wrapper.data.symbol }}</a>
</p>
<p *ngIf="wrapper.data.uniprotAc" [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }">
<b><span>Uniprot:</span></b>
<a
*ngFor="let uniprotAc of wrapper.data.uniprotAc"
href="https://www.uniprot.org/uniprot/{{ uniprotAc }}"
target="_blank"
>
<span class="is-capitalized"> {{ uniprotAc }}</span>
</a>
</p>
<p *ngIf="wrapper.data.ensg" [ngClass]="{ 'text-normal': drugstoneConfig.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"
>
<span class="is-capitalized"> {{ ensg }}</span>
</a>
</p>
<p *ngIf="wrapper.data.entrez" [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }">
<b><span>Entrez:</span></b>
<a
*ngFor="let entrez of wrapper.data.entrez"
href="https://www.ncbi.nlm.nih.gov/gene/{{ entrez }}"
target="_blank"
>
<span class="is-capitalized"> {{ entrez }}</span>
</a>
</p>
<p *ngIf="wrapper.expression" [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }">
<b><span>Expression:</span></b>
<span class="is-capitalized"> {{ wrapper.expression | number }}</span>
<span
class="icon has-text-info"
pTooltip="Tissue expression data is provided by the GTEx project. Unit is transcript per million."
[tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"
tooltipPosition="left"
><i class="fas fa-info-circle"></i
></span>
</p>
<p
*ngIf="wrapper.data.drugId || wrapper.data.disorderId"
......@@ -68,47 +109,7 @@
<b><span>Group:</span></b>
<span class="is-capitalized"> {{ wrapper.data.groupName }}</span>
</p>
<p *ngIf="wrapper.data.uniprotAc" [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }">
<b><span>Uniprot:</span></b>
<a
*ngFor="let uniprotAc of wrapper.data.uniprotAc"
href="https://www.uniprot.org/uniprot/{{ uniprotAc }}"
target="_blank"
>
<span class="is-capitalized"> {{ uniprotAc }}</span>
</a>
</p>
<p *ngIf="wrapper.data.ensg" [ngClass]="{ 'text-normal': drugstoneConfig.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"
>
<span class="is-capitalized"> {{ ensg }}</span>
</a>
</p>
<p *ngIf="wrapper.data.entrez" [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }">
<b><span>Entrez:</span></b>
<a
*ngFor="let entrez of wrapper.data.entrez"
href="https://www.ncbi.nlm.nih.gov/gene/{{ entrez }}"
target="_blank"
>
<span class="is-capitalized"> {{ entrez }}</span>
</a>
</p>
<p *ngIf="wrapper.expression" [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }">
<b><span>Expression:</span></b>
<span class="is-capitalized"> {{ wrapper.expression | number }}</span>
<span
class="icon has-text-info"
pTooltip="Tissue expression data is provided by the GTEx project. Unit is transcript per million."
[tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"
tooltipPosition="left"
><i class="fas fa-info-circle"></i
></span>
</p>
</div>
......
src/index.html
+ 3
− 4
View file @ 124d48d3
......@@ -12,10 +12,9 @@
<input type="checkbox" onclick=changeConfigStr('{"showOverview":'+this.checked+'}') checked /> Show overview<br>
<input type="checkbox" onclick=changeConfigStr('{"showQuery":'+this.checked+'}') /> Show query<br>
<!-- <input type="checkbox" onclick=changeConfigStr('{"showSidebar":'+this.checked+'}') checked /> Show sidebar<br> -->
<input type="checkbox" onclick=changeConfigStr('{"showItemSelector":'+this.checked+'}') checked /> Show ItemSelector<br>
<input type="checkbox" onclick=changeConfigStr('{"showConnectGenes":'+this.checked+'}') /> Show Connect Genes<br>
<input type="checkbox" onclick=changeConfigStr('{"showSimpleAnalysis":'+this.checked+'}') /> Show Simple Analysis<br>
<input type="checkbox" onclick=changeConfigStr('{"showSimpleAnalysis":'+this.checked+'}') checked /> Show Simple Analysis<br>
<input type="checkbox" onclick=changeConfigStr('{"showAdvAnalysis":'+this.checked+'}') checked /> Show Advanced Analysis<br>
<input type="checkbox" onclick=changeConfigStr('{"showTasks":'+this.checked+'}') checked /> Show Tasks<br>
<input type="checkbox" onclick=changeConfigStr('{"showSelection":'+this.checked+'}') checked /> Show Selection<br>
......@@ -94,7 +93,7 @@
<drugst-one id="netexp1"
pluginId="2"
groups='{"nodeGroups":{"important":{"type":"gene","color":"#ff881f","font":{"color":"#000000"},"groupName":"Important Gene","shape":"star"},"gene":{"type":"gene","color":"#4da300","font":{"color":"#f0f0f0"},"groupName":"Gene","shape":"circle"}}}'
config='{"licensedDatasets": false, "physicsOn":false,"identifier":"symbol","title":"Breast cancer example network","nodeShadow":true,"edgeShadow":false,"autofillEdges":true,"showLegend":true}'
config='{"showSimpleAnalysis": true, "licensedDatasets": false, "physicsOn":false,"identifier":"symbol","title":"Breast cancer example network","nodeShadow":true,"edgeShadow":false,"autofillEdges":true,"showLegend":true}'
network='{"nodes":[{"id":"FOXP3","label":"FOXP3","group":"gene"},{"id":"ATM","label":"ATM","group":"gene","x":289,"y":242},{"id":"BARD1","label":"BARD1","group":"gene","x":44,"y":250},{"id":"BRCA1","label":"BRCA1","group":"gene","x":466,"y":576},{"id":"BRCA2","label":"BRCA2","group":"gene","x":507,"y":285},{"id":"BRIP1","label":"BRIP1","group":"gene","x":54,"y":474},{"id":"CHEK2","label":"CHEK2","group":"gene","x":216,"y":590},{"id":"CDH1","label":"CDH1","group":"gene","x":320,"y":-57},{"id":"NF1","label":"NF1","group":"gene","x":481,"y":111},{"id":"NBN","label":"NBN","group":"gene","x":-57,"y":314},{"id":"PALB2","label":"PALB2","group":"gene","x":450,"y":190},{"id":"PTEN","label":"PTEN","group":"important","x":305,"y":494},{"id":"RAD51C","label":"RAD51C","group":"gene","x":182,"y":-90},{"id":"RAD51D","label":"RAD51D","group":"gene","x":368,"y":73},{"id":"STK11","label":"STK11","group":"gene","x":686,"y":330},{"id":"TP53","label":"TP53","group":"important","x":333,"y":316}]}'
>
</drugst-one>
......@@ -104,7 +103,7 @@
<!-- <drugst-one id="netexp1"-->
<!-- pluginId="2"-->
<!-- groups='{"nodeGroups":{"node":{"type":"Gene","color":"#0000FF","font":{"color":"#ffffff"},"groupName":"Node","shape":"ellipse"}, "gene":{"type":"Gene","color":"#CD5C5C","font":{"color":"#000000"},"groupName":"Gene","shape":"ellipse"}}}'-->
<!-- config='{"selfReferences": false, "licensedDatasets": false,"physicsOn":false,"identifier":"ensg","title":"Breast cancer example network","nodeShadow":true,"edgeShadow":false,"autofillEdges":true,"showLegend":true}'-->
<!-- config='{"showSimpleAnalysis": true, "selfReferences": false, "licensedDatasets": false,"physicsOn":false,"identifier":"ensg","title":"Breast cancer example network","nodeShadow":true,"edgeShadow":false,"autofillEdges":true,"showLegend":true}'-->
<!-- network='{"nodes":[{"id":"ENSG00000049768", "group": "gene", "label":"ENSG00000049768"},{"id":"ENSG00000185379","group":"gene","label":"ENSG00000185379"},{"id":"ENSG00000108384","group":"gene","label":"ENSG00000108384"},{"id":"ENSG00000138376","group":"gene","label":"ENSG00000138376"},{"id":"ENSG00000284792","group":"gene","label":"ENSG00000284792"},{"id":"ENSG00000171862","group":"gene","label":"ENSG00000171862"},{"id":"ENSG00000141510","group":"gene","label":"ENSG00000141510"}],"edges":[]}'-->
<!-- >-->
<!--</drugst-one>-->
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment