Select Git revision
-
AndiMajore authoredAndiMajore authored
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
launch-analysis.component.html 18.15 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="!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 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'">
<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 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>
<p class="help">
Specifies whether also drugs targeting interactors of the seed nodes should be considered.
</p>
</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>
<p class="help">
The larger the damping factor, the faster the trust is propagated through the network.
</p>
</div>
<div class="field">
<label class="label" for="trustrank-md">Maximum degree</label>
<div class="control">
<input [(ngModel)]="trustrankMaxDeg" id="trustrank-md" class="input" type="number"
placeholder="Maximum degree" min="0" max="1" required>
</div>
<p class="help">
All nodes with degree greater than this value will be ignored. Disabled if equal to 0.
</p>
</div>
<div class="field">
<label class="label" for="trustrank-hp">Hub penalty</label>
<div class="control">
<input [(ngModel)]="trustrankHubPenalty" id="trustrank-hp" class="input" type="number"
placeholder="Maximum degree" min="0" max="1" required>
</div>
<p class="help">
Penalty parameter for hubs.
</p>
</div>
<div class="box">
<article class="media">
<div class="media-left">
<span class="icon"><i class="fa fa-info"></i></span>
</div>
<div class="media-content">
<div class="content">
<h6 class="is-6">About TrustRank</h6>
<p>
TrustRank 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.
</p>
<p>
<a href="https://docs.google.com/document/d/1_SRnIx_UC8FR59rMyrf_r45fCIt3naP4t1qefYNp9vk" target="_blank">
Check the documentation for more info
</a>
</p>
</div>
</div>
</article>
</div>
</div>
<div *ngIf="algorithm==='closeness'">
<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 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>
<p class="help">
Specifies whether also drugs targeting interactors of the seed nodes should be considered.
</p>
</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-md">Maximum degree</label>
<div class="control">
<input [(ngModel)]="closenessMaxDeg" id="closeness-md" class="input" type="number"
placeholder="Maximum degree" min="0" max="1" required>
</div>
<p class="help">
All nodes with degree greater than this value will be ignored. Disabled if equal to 0.
</p>
</div>
<div class="field">
<label class="label" for="closeness-hp">Hub penalty</label>
<div class="control">
<input [(ngModel)]="closenessHubPenalty" id="closeness-hp" class="input" type="number"
placeholder="Maximum degree" min="0" max="1" required>
</div>
<p class="help">
Penalty parameter for hubs.
</p>
</div>
<div class="box">
<article class="media">
<div class="media-left">
<span class="icon"><i class="fa fa-info"></i></span>
</div>
<div class="media-content">
<div class="content">
<h6 class="is-6">About Closeness Centrality</h6>
<p>
Closeness Centrality 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.
</p>
</div>
</div>
</article>
</div>
</div>
<div *ngIf="algorithm==='degree'">
<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 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-md">Maximum degree</label>
<div class="control">
<input [(ngModel)]="degreeMaxDeg" id="degree-md" class="input" type="number"
placeholder="Maximum degree" min="0" max="1" required>
</div>
<p class="help"> All nodes with degree greater than this value will be ignored. Disabled if equal to 0.
</p>
</div>
<div class="box">
<article class="media">
<div class="media-left">
<span class="icon"><i class="fa fa-info"></i></span>
</div>
<div class="media-content">
<div class="content">
<h6 class="is-6">About Degree Centrality</h6>
<p>
Degree Centrality assigns an importance score based simply on the number of links held by each node.
In Drugst.One, we use a modified version which does not consider all links but only the neighbouring seeds.
</p>
</div>
</div>
</article>
</div>
</div>
<div *ngIf="algorithm==='proximity'">
<div class="field">
<label class="label" for="proximity-rs">Result size</label>
<div class="control">
<input [(ngModel)]="proximityResultSize" id="proximity-rs" class="input" type="number"
placeholder="Result size" required>
</div>
</div>
<div class="field">
<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)]="proximityIncludeNonApprovedDrugs"></app-toggle>
</div>
<div class="field">
<label class="label" for="proximity-md">Maximum degree</label>
<div class="control">
<input [(ngModel)]="proximityMaxDeg" id="proximity-md" class="input" type="number"
placeholder="Maximum degree" required>
</div>
<p class="help">
All nodes with degree greater than this value will be ignored. Disabled if equal to 0.
</p>
</div>
<div class="field">
<label class="label" for="proximity-hp">Hub penalty</label>
<div class="control">
<input [(ngModel)]="proximityHubPenalty" id="proximity-hp" class="input" type="number"
placeholder="Maximum degree" min="0" max="1" required>
</div>
<p class="help">
Penalty parameter for hubs.
</p>
</div>
<div class="box">
<article class="media">
<div class="media-left">
<span class="icon"><i class="fa fa-info"></i></span>
</div>
<div class="media-content">
<div class="content">
<h6 class="is-6">About Network Proximity</h6> <p>
Network Proximity uses the average minimum distance from the drug’s targets to all of the selected
seeds as a measure of proximity.
</p>
</div>
</div>
</article>
</div>
</div>
<div *ngIf="algorithm==='betweenness'">
<div class="field">
<label class="label" for="proximity-rs">Result size</label>
<div class="control">
<input [(ngModel)]="betweennessResultSize" id="betweenness-rs" class="input" type="number"
placeholder="Result size" required>
</div>
</div>
<div class="field">
<label class="label" for="betweenness-md">Maximum degree</label>
<div class="control">
<input [(ngModel)]="betweennessMaxDeg" id="betweenness-md" class="input" type="number"
placeholder="Maximum degree" min="0" max="1" required>
</div>
<p class="help">
All nodes with degree greater than this value will be ignored. Disabled if equal to 0.
</p>
</div>
<div class="field">
<label class="label" for="betweenness-hp">Hub penalty</label>
<div class="control">
<input [(ngModel)]="betweennessHubPenalty" id="betweenness-hp" class="input" type="number"
placeholder="Maximum degree" min="0" max="1" required>
</div>
<p class="help">
Penalty parameter for hubs.
</p>
</div>
<div class="box">
<article class="media">
<div class="media-left">
<span class="icon"><i class="fa fa-info"></i></span>
</div>
<div class="media-content">
<div class="content">
<h6 class="is-6">About Betweenness Centrality</h6>
<p>
Betweenness Centrality ranks the proteins in a network based on how many shortest paths pass through
them.
</p>
</div>
</div>
</article>
</div>
</div>
<div *ngIf="algorithm==='keypathwayminer'">
<div class="field">
<label class="label" for="keypathwayminer-k">Additional proteins</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]="5">5</option>
<option [ngValue]="10">10</option>
<option [ngValue]="15">15</option>
<option [ngValue]="20">20</option>
<option [ngValue]="25">25</option>
<option [ngValue]="30">30</option>
<option [ngValue]="40">40</option>
<option [ngValue]="50">50</option>
</select>
</div>
</div>
<p class="help">
Number of new proteins to be found.
</p>
</div>
<div class="box">
<article class="media">
<div class="media-left">
<span class="icon"><i class="fa fa-info"></i></span>
</div>
<div class="media-content">
<div class="content">
<h6 class="is-6">About KeyPathwayMiner</h6>
<p>
KeyPathwayMiner is a network enrichment tool that identifies condition-specific sub-networks
(key pathways) (Alcaraz et al. 2016).
</p>
</div>
</div>
</article>
</div>
</div>
<div *ngIf="algorithm==='multisteiner'">
<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 class="field">
<label class="label" for="multisteiner-numtrees">Tolerance for trees</label>
<div class="control">
<div class="select">
<select id="multisteiner-tolerance" [(ngModel)]="multisteinerTolerance">
<option [ngValue]="0">0</option>
<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>
</select> </div>
</div>
</div>
<div class="field">
<label class="label" for="multisteiner-md">Maximum degree</label>
<div class="control">
<input [(ngModel)]="multisteinerMaxDeg" id="multisteiner-md" class="input" type="number"
placeholder="Maximum degree" min="0" max="1" required>
</div>
<p class="help">
All nodes with degree greater than this value will be ignored. Disabled if equal to 0.
</p>
</div>
<div class="field">
<label class="label" for="multisteiner-hp">Hub penalty</label>
<div class="control">
<input [(ngModel)]="multisteinerHubPenalty" id="multisteiner-hp" class="input" type="number"
placeholder="Maximum degree" min="0" max="1" required>
</div>
<p class="help">
Penalty parameter for hubs.
</p>
</div>
</div>
<p class="doc-link">
<a href="https://docs.google.com/document/d/1_SRnIx_UC8FR59rMyrf_r45fCIt3naP4t1qefYNp9vk" target="_blank">
Check the documentation for more info
</a>
</p>
</section>
<footer class="modal-card-foot">
<button (click)="startTask(); close()" class="button is-success is-rounded has-tooltip"
pTooltip="Run the analysis." [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-top'" tooltipPosition="top"
[disabled]="!analysis.canLaunchTask()">
<span class="icon">
<i class="fa fa-rocket"></i>
</span>
<span>
Launch
</span>
</button>
<button (click)="close()" class="button is-rounded has-tooltip" pTooltip="Close the current window." [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-top'" tooltipPosition="top">Close
</button>
</footer>
</div>
</div>