Code owners
Assign users and groups as approvers for specific file changes. Learn more.
launch-analysis.component.html 8.94 KiB
<div class="modal" [class.is-active]="show">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title" *ngIf="target === 'drug'">
<span class="icon"><i class="fa fa-capsules"></i></span>
Find Drugs
</p>
<p class="modal-card-title" *ngIf="target === 'drug-target'">
<span class="icon"><i class="fa fa-crosshairs"></i></span>
Find Drug Targets
</p>
<button (click)="close()" class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
<div *ngIf="target === 'drug' && hasBaits">
<div class="notification is-warning warning">
You have selected <i class="fa fa-virus"></i> viral proteins.
When finding drugs, make sure you have selected <i class="fa fa-dna"></i> host proteins only.
</div>
</div>
<div *ngIf="!analysis.canLaunchTask()">
<div class="notification is-warning warning">
You can only run {{maxTasks}} tasks at once. Please wait for one of them to finish or delete it from the task
list.
</div>
</div>
<div *ngIf="algorithm === 'keypathwayminer' && hasBaits">
<div class="notification is-warning warning">
You have selected <i class="fa fa-virus"></i> viral proteins.
If you want to use KeyPathwayMiner, please remove them because it cannot process them.
</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."
tooltipOff="Exclude indirect drugs from the result."
[(value)]="trustrankIncludeIndirectDrugs"></app-toggle>
</div>
<div class="field" *ngIf="target === 'drug'">
<label class="label">Non-approved Drugs</label>
<app-toggle textOn="Include" textOff="Ignore" tooltipOn="Include non-approved drugs."
tooltipOff="Exclude non-approved drugs from the result."
[(value)]="trustrankIncludeNonApprovedDrugs"></app-toggle>
</div>
<div class="field">
<label class="label" for="trustrank-df">Damping Factor</label>
<div class="control">
<input [(ngModel)]="trustrankDampingFactor" id="trustrank-df" class="input" type="number"
placeholder="Damping factor"
min="0" max="1"
required> </div>
</div>
<div class="field">
<label class="label" for="trustrank-rs">Result Size</label>
<div class="control">
<input [(ngModel)]="trustrankResultSize" id="trustrank-rs" class="input" type="number"
placeholder="Result size" required>
</div>
</div>
</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."
tooltipOff="Exclude indirect drugs from the result."
[(value)]="closenessIncludeIndirectDrugs"></app-toggle>
</div>
<div class="field" *ngIf="target === 'drug'">
<label class="label">Non-approved Drugs</label>
<app-toggle textOn="Include" textOff="Ignore" tooltipOn="Include non-approved drugs."
tooltipOff="Exclude non-approved drugs from the result."
[(value)]="closenessIncludeNonApprovedDrugs"></app-toggle>
</div>
<div class="field">
<label class="label" for="closeness-rs">Result Size</label>
<div class="control">
<input [(ngModel)]="closenessResultSize" id="closeness-rs" class="input" type="number"
placeholder="Result size" required>
</div>
</div>
</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. In CoVex, we use a modified
version which does not consider all links but only the neighbouring seeds.
</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."
tooltipOff="Exclude non-approved drugs from the result."
[(value)]="degreeIncludeNonApprovedDrugs"></app-toggle>
</div>
<div class="field">
<label class="label" for="degree-rs">Result Size</label>
<div class="control">
<input [(ngModel)]="degreeResultSize" id="degree-rs" class="input" type="number"
placeholder="Result size" required>
</div>
</div>
</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">
<div class="select">
<select id="keypathwayminer-k" [(ngModel)]="keypathwayminerK"> <option [ngValue]="1">1</option>
<option [ngValue]="2">2</option>
<option [ngValue]="3">3</option>
<option [ngValue]="4">4</option>
<option [ngValue]="5">5</option>
</select>
</div>
</div>
</div>
</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">
<div class="select">
<select id="multisteiner-numtrees" [(ngModel)]="multisteinerNumTrees">
<option [ngValue]="1">1</option>
<option [ngValue]="2">2</option>
<option [ngValue]="3">3</option>
<option [ngValue]="5">5</option>
<option [ngValue]="10">10</option>
<option [ngValue]="15">15</option>
<option [ngValue]="20">20</option>
<option [ngValue]="25">25</option>
</select>
</div>
</div>
</div>
</div>
</section>
<footer class="modal-card-foot">
<button (click)="startTask(); close()" class="button is-success is-rounded has-tooltip"
data-tooltip="Run the analysis."
[disabled]="(target === 'drug' && hasBaits) || !analysis.canLaunchTask() || (algorithm === 'keypathwayminer' && hasBaits)">
<span class="icon">
<i class="fa fa-rocket"></i>
</span>
<span>
Launch
</span>
</button>
<button (click)="close()" class="button is-rounded has-tooltip" data-tooltip="Close the current window.">Close
</button>
</footer>
</div>
</div>