From ccef4a8529be0f6e833a4c168d0754b035b677c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julian=20Sp=C3=A4th?= <julian.spaeth@wzw.tum.de> Date: Sat, 11 Apr 2020 12:09:33 +0200 Subject: [PATCH] Add algorithm descriptions --- src/app/analysis.service.ts | 2 +- .../launch-analysis.component.html | 41 +++++++++++++++---- .../launch-analysis.component.scss | 6 ++- 3 files changed, 39 insertions(+), 10 deletions(-) diff --git a/src/app/analysis.service.ts b/src/app/analysis.service.ts index 353dffea..92f5765d 100644 --- a/src/app/analysis.service.ts +++ b/src/app/analysis.service.ts @@ -9,7 +9,7 @@ export type AlgorithmType = 'trustrank' | 'keypathwayminer' | 'multisteiner' | ' export type QuickAlgorithmType = 'quick' | 'super'; export const algorithmNames = { - trustrank: 'Trust-Rank', + trustrank: 'TrustRank', keypathwayminer: 'KeyPathwayMiner', multisteiner: 'Multi-Steiner', closeness: 'Closeness Centrality', diff --git a/src/app/components/launch-analysis/launch-analysis.component.html b/src/app/components/launch-analysis/launch-analysis.component.html index 1806915e..dafe84cf 100644 --- a/src/app/components/launch-analysis/launch-analysis.component.html +++ b/src/app/components/launch-analysis/launch-analysis.component.html @@ -13,14 +13,6 @@ <button (click)="close()" class="delete" aria-label="close"></button> </header> <section class="modal-card-body"> - <div class="tabs is-toggle is-small is-fullwidth is-rounded has-tooltip"> - <ul> - <li [class.is-active]="algorithm === algo.slug" *ngFor="let algo of algorithms"> - <a (click)="algorithm = algo.slug" class="is-boxed is-medium">{{algo.name}}</a> - </li> - </ul> - </div> - <div *ngIf="target === 'drug' && hasBaits"> <div class="notification is-warning warning"> You have selected <i class="fa fa-virus"></i> viral proteins. @@ -42,7 +34,21 @@ </div> </div> + <div class="tabs is-toggle is-small is-fullwidth is-rounded has-tooltip"> + <ul> + <li [class.is-active]="algorithm === algo.slug" *ngFor="let algo of algorithms"> + <a (click)="algorithm = algo.slug" class="is-boxed is-medium">{{algo.name}}</a> + </li> + </ul> + </div> + <div *ngIf="algorithm==='trustrank'"> + <p class="help info"> + <span class="icon"><i class="fa fa-info"></i></span> + <a href="https://en.wikipedia.org/wiki/TrustRank" target="_blank">TrustRank</a> + is a node centrality measure that ranks nodes in a network based on how well they are connected to a + (trusted) set of seed nodes (Gyöngyi, Garcia-Molina, and Pedersen 2004). + </p> <div class="field" *ngIf="target === 'drug'"> <label class="label">Indirect Drugs</label> <app-toggle textOn="Include" textOff="Ignore" tooltipOn="Include indirect drugs." @@ -74,6 +80,11 @@ </div> <div *ngIf="algorithm==='closeness'"> + <p class="help info"> <span class="icon"><i class="fa fa-info"></i></span> + <a href="https://en.wikipedia.org/wiki/Closeness_centrality" target="_blank">Closeness Centrality</a> + is a node centrality measure that ranks the nodes in a network based on the lengths of their shortest paths + to all other nodes in the network (Kaczprowski, Doncheva, and Albrecht 2013). + </p> <div class="field" *ngIf="target === 'drug'"> <label class="label">Indirect Drugs</label> <app-toggle textOn="Include" textOff="Ignore" tooltipOn="Include indirect drugs." @@ -96,6 +107,10 @@ </div> <div *ngIf="algorithm==='degree'"> + <p class="help info"> <span class="icon"><i class="fa fa-info"></i></span> + <a href="https://en.wikipedia.org/wiki/Centrality#Degree_centrality" target="_blank">Degree Centrality</a> + assigns an importance score based simply on the number of links held by each node. + </p> <div class="field" *ngIf="target === 'drug'"> <label class="label">Non-approved Drugs</label> <app-toggle textOn="Include" textOff="Ignore" tooltipOn="Include non-approved drugs." @@ -112,6 +127,11 @@ </div> <div *ngIf="algorithm==='keypathwayminer'"> + <p class="help info"> <span class="icon"><i class="fa fa-info"></i></span> + <a href="https://keypathwayminer.compbio.sdu.dk/keypathwayminer/">KeyPathwayMiner</a> + is a network enrichment tool that identifies condition-specific sub-networks (key pathways) + (Alcaraz et al. 2016). + </p> <div class="field"> <label class="label" for="keypathwayminer-k">K</label> <div class="control"> @@ -129,6 +149,11 @@ </div> <div *ngIf="algorithm==='multisteiner'"> + <p class="help info"> <span class="icon"><i class="fa fa-info"></i></span> + The <a href="https://en.wikipedia.org/wiki/Steiner_tree_problem">Steiner tree</a> + problem is a classical combinatorial optimization problem. It asks to find a sub-graph + of minimum size connecting a given set of seed nodes. + </p> <div class="field"> <label class="label" for="multisteiner-numtrees">Number of Steiner trees to return</label> <div class="control"> diff --git a/src/app/components/launch-analysis/launch-analysis.component.scss b/src/app/components/launch-analysis/launch-analysis.component.scss index e2256b6b..7bf0ee27 100644 --- a/src/app/components/launch-analysis/launch-analysis.component.scss +++ b/src/app/components/launch-analysis/launch-analysis.component.scss @@ -1,5 +1,5 @@ .modal-card { - height: 500px; + height: 600px; } .modal-card-body { @@ -10,3 +10,7 @@ .warning { margin-bottom: 15px; } + +.help.info { + margin-bottom: 20px; +} -- GitLab