diff --git a/package-lock.json b/package-lock.json
index 655fb4f58bea610d0e1fc497775c96d09b9a84be..5604f9c7b108ca9f295d74a5ba2b056462806ff4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2698,6 +2698,11 @@
"resolved": "https://registry.npmjs.org/bulma-toast/-/bulma-toast-1.5.4.tgz",
"integrity": "sha512-yLGeupj1WOCgOS6Gtik2eyJ2aA55nFwDyTeLSoTDdRRdWsWbBcMsna3j7ZATiQTZ4o5BI05X4z/qCKc9qMysUA=="
},
+ "bulma-tooltip": {
+ "version": "3.0.2",
+ "resolved": "https://registry.npmjs.org/bulma-tooltip/-/bulma-tooltip-3.0.2.tgz",
+ "integrity": "sha512-CsT3APjhlZScskFg38n8HYL8oYNUHQtcu4sz6ERarxkUpBRbk9v0h/5KAvXeKapVSn2dp9l7bOGit5SECP8EWQ=="
+ },
"bytes": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
diff --git a/package.json b/package.json
index bb1a835a1464c0ea5bdab79ff8cab5e2a09a95c0..3f0e5b1081b22c94a2c989169057185d5adf3640 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
"@ng-select/ng-select": "^3.7.3",
"bulma": "^0.8.1",
"bulma-toast": "^1.5.4",
+ "bulma-tooltip": "^3.0.2",
"html2canvas": "^1.0.0-rc.5",
"primeicons": "^2.0.0",
"primeng": "^9.0.5",
diff --git a/src/app/components/analysis-window/analysis-window.component.html b/src/app/components/analysis-window/analysis-window.component.html
index 711c4144eefe7d233b9b4656655f9514b87f5d19..1f2319730d348bc076f891499fb95e3f4d9611fb 100644
--- a/src/app/components/analysis-window/analysis-window.component.html
+++ b/src/app/components/analysis-window/analysis-window.component.html
@@ -76,7 +76,8 @@
<footer class="card-footer toolbar">
<div class="field">
<p class="control footer-buttons">
- <button class="button is-primary is-rounded" (click)="toCanvas()">
+ <button class="button is-primary is-rounded has-tooltip"
+ data-tooltip="Take a screenshot of the current network." (click)="toCanvas()">
<span class="icon">
<i class="fas fa-camera" aria-hidden="true"></i>
</span>
@@ -88,7 +89,8 @@
</div>
<div class="field">
<p class="control footer-buttons">
- <button class="button is-danger is-rounded" (click)="analysis.removeTask(token); close()">
+ <button class="button is-danger is-rounded has-tooltip" data-tooltip="Delete the current analysis."
+ (click)="analysis.removeTask(token); close()">
<span class="icon">
<i class="fas fa-trash" aria-hidden="true"></i>
</span>
@@ -100,16 +102,19 @@
</div>
<app-toggle *ngIf="task.info.target === 'drug-target'" class="footer-buttons" textOn="Drugs On" textOff="Off"
+ tooltipOn="Display drugs in the network" tooltipOff="Hide drugs in the network"
[value]="showDrugs" (valueChange)="toggleDrugs($event)" icon="fa-capsules"></app-toggle>
<app-toggle class="footer-buttons" textOn="Animation On" textOff="Off"
+ tooltipOn="Enable the network animation." tooltipOff="Disable the network animation and freeze nodes."
[value]="physicsEnabled" (valueChange)="updatePhysicsEnabled($event)" icon="fa-wind"></app-toggle>
</footer>
</div>
<div class="content tab-content scrollable" *ngIf="task && task.info.done" [class.is-visible]="tab === 'table'">
<div class="field has-addons" *ngIf="tableHasScores">
<p class="control">
- <button class="button is-rounded" [class.is-primary]="tableNormalize" (click)="toggleNormalization(true)">
+ <button class="button is-rounded has-tooltip" data-tooltip="Normalize the scores"
+ [class.is-primary]="tableNormalize" (click)="toggleNormalization(true)">
<span class="icon is-small">
<i class="fa fa-ruler-vertical"></i>
</span>
@@ -117,7 +122,8 @@
</button>
</p>
<p class="control">
- <button class="button is-rounded" [class.is-primary]="!tableNormalize" (click)="toggleNormalization(false)">
+ <button class="button is-rounded has-tooltip" data-tooltip="Disable normalization of the scores."
+ [class.is-primary]="!tableNormalize" (click)="toggleNormalization(false)">
<span>Off</span>
</button>
</p>
@@ -178,33 +184,33 @@
[value]="tableProteins" [selection]="tableSelectedProteins" dataKey="proteinAc"
(selectionChange)="tableProteinSelection($event)">
<ng-template pTemplate="header">
- <tr>
- <th class="checkbox-col">
- <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
- </th>
- <th [pSortableColumn]="'proteinAc'">
- UniProt Code
- <p-sortIcon [field]="'proteinAc'"></p-sortIcon>
- </th>
- <th [pSortableColumn]="'name'">
- Gene
- <p-sortIcon [field]="'name'"></p-sortIcon>
- </th>
- <th *ngIf="tableHasScores" [pSortableColumn]="'score'">
- Score
- <p-sortIcon [field]="'score'"></p-sortIcon>
- </th>
- </tr>
+ <tr>
+ <th class="checkbox-col">
+ <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
+ </th>
+ <th [pSortableColumn]="'proteinAc'">
+ UniProt Code
+ <p-sortIcon [field]="'proteinAc'"></p-sortIcon>
+ </th>
+ <th [pSortableColumn]="'name'">
+ Gene
+ <p-sortIcon [field]="'name'"></p-sortIcon>
+ </th>
+ <th *ngIf="tableHasScores" [pSortableColumn]="'score'">
+ Score
+ <p-sortIcon [field]="'score'"></p-sortIcon>
+ </th>
+ </tr>
</ng-template>
<ng-template pTemplate="body" let-e>
- <tr>
- <td>
- <p-tableCheckbox [value]="e"></p-tableCheckbox>
- </td>
- <td><a href="https://www.uniprot.org/uniprot/{{ e.proteinAc }}" target="_blank">{{ e.proteinAc }}</a></td>
- <td>{{e.name}}</td>
- <td *ngIf="tableHasScores">{{e.score ? (e.score | number) : ''}}</td>
- </tr>
+ <tr>
+ <td>
+ <p-tableCheckbox [value]="e"></p-tableCheckbox>
+ </td>
+ <td><a href="https://www.uniprot.org/uniprot/{{ e.proteinAc }}" target="_blank">{{ e.proteinAc }}</a></td>
+ <td>{{e.name}}</td>
+ <td *ngIf="tableHasScores">{{e.score ? (e.score | number) : ''}}</td>
+ </tr>
</ng-template>
</p-table>
@@ -222,33 +228,33 @@
[value]="tableViralProteins" [selection]="tableSelectedViralProteins" dataKey="effectId"
(selectionChange)="tableViralProteinSelection($event)">
<ng-template pTemplate="header">
- <tr>
- <th class="checkbox-col">
- <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
- </th>
- <th [pSortableColumn]="'effectName'">
- Name
- <p-sortIcon [field]="'effectName'"></p-sortIcon>
- </th>
- <th [pSortableColumn]="'virusName'">
- Virus Strain
- <p-sortIcon [field]="'virusName'"></p-sortIcon>
- </th>
- <th *ngIf="tableHasScores" [pSortableColumn]="'score'">
- Score
- <p-sortIcon [field]="'score'"></p-sortIcon>
- </th>
- </tr>
+ <tr>
+ <th class="checkbox-col">
+ <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
+ </th>
+ <th [pSortableColumn]="'effectName'">
+ Name
+ <p-sortIcon [field]="'effectName'"></p-sortIcon>
+ </th>
+ <th [pSortableColumn]="'virusName'">
+ Virus Strain
+ <p-sortIcon [field]="'virusName'"></p-sortIcon>
+ </th>
+ <th *ngIf="tableHasScores" [pSortableColumn]="'score'">
+ Score
+ <p-sortIcon [field]="'score'"></p-sortIcon>
+ </th>
+ </tr>
</ng-template>
<ng-template pTemplate="body" let-e>
- <tr>
- <td>
- <p-tableCheckbox [value]="e"></p-tableCheckbox>
- </td>
- <td>{{e.effectName}}</td>
- <td>{{e.virusName}}</td>
- <td *ngIf="tableHasScores">{{e.score ? (e.score | number) : ''}}</td>
- </tr>
+ <tr>
+ <td>
+ <p-tableCheckbox [value]="e"></p-tableCheckbox>
+ </td>
+ <td>{{e.effectName}}</td>
+ <td>{{e.virusName}}</td>
+ <td *ngIf="tableHasScores">{{e.score ? (e.score | number) : ''}}</td>
+ </tr>
</ng-template>
</p-table>
</div>
diff --git a/src/app/components/info-box/info-box.component.html b/src/app/components/info-box/info-box.component.html
index 94f3f8b2b71febf537053496829eb9ca99fafd4e..bc4f40ee68f1e9c4ac2e67a6ac24cc8af5c75e55 100644
--- a/src/app/components/info-box/info-box.component.html
+++ b/src/app/components/info-box/info-box.component.html
@@ -45,7 +45,8 @@
<div class="field has-addons add-remove-toggle" *ngIf="wrapper.type !== 'drug'">
<app-toggle [value]="analysis.inSelection(wrapper)"
(valueChange)="$event ? analysis.addItem(wrapper) : analysis.removeItem(wrapper)" textOn="Selected"
- textOff="Deselected" icon="fa-plus"></app-toggle>
+ textOff="Deselected" tooltipOn="Add protein to selection." tooltipOff="Remove protein from selection."
+ icon="fa-plus"></app-toggle>
</div>
</div>
<div *ngIf="!wrapper">
diff --git a/src/app/components/launch-analysis/launch-analysis.component.html b/src/app/components/launch-analysis/launch-analysis.component.html
index b41441d0ede36c52747c0cb9d98578c5a602ed12..cf60b5720d783b4abf30c108420b9d184e20a0a2 100644
--- a/src/app/components/launch-analysis/launch-analysis.component.html
+++ b/src/app/components/launch-analysis/launch-analysis.component.html
@@ -13,7 +13,7 @@
<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">
+ <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>
@@ -30,22 +30,27 @@
<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.
+ 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==='trustrank'">
<div class="field" *ngIf="target === 'drug'">
<label class="label">Indirect Drugs</label>
- <app-toggle textOn="Include" textOff="Ignore" icon="fa-check" [(value)]="trustrankIncludeIndirectDrugs"></app-toggle>
+ <app-toggle textOn="Include" textOff="Ignore" tooltipOn="Include indirect drugs."
+ tooltipOff="Exclude indirect drugs from the result." icon="fa-check"
+ [(value)]="trustrankIncludeIndirectDrugs"></app-toggle>
</div>
<div class="field" *ngIf="target === 'drug'">
<label class="label">Non-approved Drugs</label>
- <app-toggle textOn="Include" textOff="Ignore" icon="fa-check" [(value)]="trustrankIncludeNonApprovedDrugs"></app-toggle>
+ <app-toggle textOn="Include" textOff="Ignore" tooltipOn="Include non-approved drugs."
+ tooltipOff="Exclude non-approved drugs from the result." icon="fa-check"
+ [(value)]="trustrankIncludeNonApprovedDrugs"></app-toggle>
</div>
<div class="field">
<label class="label" for="trustrank-df">Damping Factor</label>
- <div class="control">
+ <div class="control">
<input [(ngModel)]="trustrankDampingFactor" id="trustrank-df" class="input" type="number"
placeholder="Damping factor"
min="0" max="1"
@@ -54,7 +59,7 @@
</div>
<div class="field">
<label class="label" for="trustrank-rs">Result Size</label>
- <div class="control">
+ <div class="control">
<input [(ngModel)]="trustrankResultSize" id="trustrank-rs" class="input" type="number"
placeholder="Result size" required>
</div>
@@ -64,15 +69,19 @@
<div *ngIf="algorithm==='closeness'">
<div class="field" *ngIf="target === 'drug'">
<label class="label">Indirect Drugs</label>
- <app-toggle textOn="Include" textOff="Ignore" icon="fa-check" [(value)]="closenessIncludeIndirectDrugs"></app-toggle>
+ <app-toggle textOn="Include" textOff="Ignore" tooltipOn="Include indirect drugs."
+ tooltipOff="Exclude indirect drugs from the result." icon="fa-check"
+ [(value)]="closenessIncludeIndirectDrugs"></app-toggle>
</div>
<div class="field" *ngIf="target === 'drug'">
<label class="label">Non-approved Drugs</label>
- <app-toggle textOn="Include" textOff="Ignore" icon="fa-check" [(value)]="closenessIncludeNonApprovedDrugs"></app-toggle>
+ <app-toggle textOn="Include" textOff="Ignore" tooltipOn="Include non-approved drugs."
+ tooltipOff="Exclude non-approved drugs from the result." icon="fa-check"
+ [(value)]="closenessIncludeNonApprovedDrugs"></app-toggle>
</div>
<div class="field">
<label class="label" for="closeness-rs">Result Size</label>
- <div class="control">
+ <div class="control">
<input [(ngModel)]="closenessResultSize" id="closeness-rs" class="input" type="number"
placeholder="Result size" required>
</div>
@@ -82,11 +91,13 @@
<div *ngIf="algorithm==='degree'">
<div class="field" *ngIf="target === 'drug'">
<label class="label">Non-approved Drugs</label>
- <app-toggle textOn="Include" textOff="Ignore" icon="fa-check" [(value)]="degreeIncludeNonApprovedDrugs"></app-toggle>
+ <app-toggle textOn="Include" textOff="Ignore" tooltipOn="Include non-approved drugs."
+ tooltipOff="Exclude non-approved drugs from the result." icon="fa-check"
+ [(value)]="degreeIncludeNonApprovedDrugs"></app-toggle>
</div>
<div class="field">
<label class="label" for="degree-rs">Result Size</label>
- <div class="control">
+ <div class="control">
<input [(ngModel)]="degreeResultSize" id="degree-rs" class="input" type="number"
placeholder="Result size" required>
</div>
@@ -96,7 +107,7 @@
<div *ngIf="algorithm==='keypathwayminer'">
<div class="field">
<label class="label" for="keypathwayminer-k">K</label>
- <div class="control">
+ <div class="control">
<div class="select">
<select id="keypathwayminer-k" [(ngModel)]="keypathwayminerK">
<option [ngValue]="1">1</option>
@@ -113,7 +124,7 @@
<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="control">
<div class="select">
<select id="multisteiner-numtrees" [(ngModel)]="multisteinerNumTrees">
<option [ngValue]="1">1</option>
@@ -132,8 +143,12 @@
</section>
<footer class="modal-card-foot">
- <button (click)="startTask(); close()" class="button is-success is-rounded" [disabled]="(target === 'drug' && hasBaits) || !analysis.canLaunchTask()">Launch</button>
- <button (click)="close()" class="button is-rounded">Close</button>
+ <button (click)="startTask(); close()" class="button is-success is-rounded has-tooltip"
+ data-tooltip="Run the analysis."
+ [disabled]="(target === 'drug' && hasBaits) || !analysis.canLaunchTask()">Launch
+ </button>
+ <button (click)="close()" class="button is-rounded has-tooltip" data-tooltip="Close the current window.">Close
+ </button>
</footer>
</div>
</div>
diff --git a/src/app/components/launch-analysis/launch-analysis.component.scss b/src/app/components/launch-analysis/launch-analysis.component.scss
index 192552e6b31a0e1770bc064855c9d097d385bce2..e2256b6b8c7521316ecac6fff96486bf852c53d3 100644
--- a/src/app/components/launch-analysis/launch-analysis.component.scss
+++ b/src/app/components/launch-analysis/launch-analysis.component.scss
@@ -2,6 +2,11 @@
height: 500px;
}
+.modal-card-body {
+ padding-left: 40px;
+ padding-right: 40px;
+}
+
.warning {
margin-bottom: 15px;
}
diff --git a/src/app/components/query/query.component.html b/src/app/components/query/query.component.html
index 5a258cb821ce3815554938e2a1ae2127297aa447..09381933fe31267d3578154183787aa580cc2c5d 100644
--- a/src/app/components/query/query.component.html
+++ b/src/app/components/query/query.component.html
@@ -1,6 +1,6 @@
<div class="content">
<ng-select [items]="queryItems" bindLabel="backendId" bindValue="data" [virtualScroll]="true" class="custom"
- placeholder="Search..." [hideSelected]="true" [searchFn]="querySearch" (change)="select($event)">
+ placeholder="Search..." [hideSelected]="true" [searchFn]="querySearch" (change)="select($event)" data-tooltip="Find proteins in the network.">
<ng-template ng-option-tmp let-item="item">
<b *ngIf="item.type == 'host'"> {{item.data.name}}</b>
<b *ngIf="item.type == 'virus'"> {{item.data.effectName}}</b> <br/>
diff --git a/src/app/components/select-dataset/select-dataset.component.html b/src/app/components/select-dataset/select-dataset.component.html
index 127284a6f2d8a582bd4e4831eee312261076ab30..f1a016ad76127c2872bc01b7458738f1efe736d6 100644
--- a/src/app/components/select-dataset/select-dataset.component.html
+++ b/src/app/components/select-dataset/select-dataset.component.html
@@ -1,6 +1,6 @@
<div class="content">
<ng-select [items]="datasetItems" bindLabel="label" [virtualScroll]="true" class="custom"
- placeholder="Select..." [ngModel]="selectedDataset" (ngModelChange)="select($event)">
+ placeholder="Select..." [ngModel]="selectedDataset" (ngModelChange)="select($event)" data-tooltip="Choose the dataset you want to explore.">
<ng-template ng-option-tmp let-item="item">
{{item.strains}} <br/>
<small>{{item.datasetNames}}</small>
diff --git a/src/app/components/task-list/task-list.component.html b/src/app/components/task-list/task-list.component.html
index cdb62063f9ac3d2834a73ed65d0b1d6931ae6930..7fe72fc248a626c40c6efde0872bf762cc966d45 100644
--- a/src/app/components/task-list/task-list.component.html
+++ b/src/app/components/task-list/task-list.component.html
@@ -40,7 +40,7 @@
</p>
<progress class="progress is-success" [value]="task.info.progress * 100" max="100">Test</progress>
</div>
- <div *ngIf="task.info.done" (click)="open(task.token)">
+ <div *ngIf="task.info.done" (click)="open(task.token)" data-tooltip="Show analysis results">
<p>
<span class="is-capitalized"><i class="fa" [class.fa-capsules]="task.info.target === 'drug'"
[class.fa-crosshairs]="task.info.target === 'drug-target'"></i> {{algorithmNames[task.info.algorithm]}}</span>
diff --git a/src/app/components/toggle/toggle.component.html b/src/app/components/toggle/toggle.component.html
index ac8059b82fe946d9833790c94b892c8cf4b47914..08a9cb814decdb1fbf50ba5b3347e445d0f2175b 100644
--- a/src/app/components/toggle/toggle.component.html
+++ b/src/app/components/toggle/toggle.component.html
@@ -1,6 +1,6 @@
<div class="field has-addons">
- <p class="control">
- <button class="button is-rounded" [class.is-primary]="value" (click)="toggle(true)">
+ <p class="control has-tooltip">
+ <button class="button is-rounded has-tooltip" [attr.data-tooltip]="tooltipOn" [class.is-primary]="value" (click)="toggle(true)">
<span class="icon is-small">
<i class="fa {{icon}}"></i>
</span>
@@ -8,7 +8,7 @@
</button>
</p>
<p class="control">
- <button class="button is-rounded" [class.is-primary]="!value" (click)="toggle(false)">
+ <button class="button is-rounded has-tooltip" [attr.data-tooltip]="tooltipOff" [class.is-primary]="!value" (click)="toggle(false)">
<span>{{textOff}}</span>
</button>
</p>
diff --git a/src/app/components/toggle/toggle.component.ts b/src/app/components/toggle/toggle.component.ts
index b2a21e2abe41a6628270121a425d75aeb8741883..5c3444e9b154e32041da3cd96d5843abe4301d05 100644
--- a/src/app/components/toggle/toggle.component.ts
+++ b/src/app/components/toggle/toggle.component.ts
@@ -11,6 +11,8 @@ export class ToggleComponent implements OnInit {
@Input() textOn = 'On';
@Input() textOff = 'Off';
+ @Input() tooltipOn: string;
+ @Input() tooltipOff: string;
@Input() value: boolean;
@Output() valueChange = new EventEmitter<boolean>();
diff --git a/src/app/pages/explorer-page/explorer-page.component.html b/src/app/pages/explorer-page/explorer-page.component.html
index 4dabb047456357b0edefcbb5a4e47a0869f28211..71de0c631d613911417f10aeed72e5ce066ad8b5 100644
--- a/src/app/pages/explorer-page/explorer-page.component.html
+++ b/src/app/pages/explorer-page/explorer-page.component.html
@@ -16,7 +16,8 @@
<i class="fas fa-database" aria-hidden="true"></i>
</span> Choose Dataset
</p>
- <a (click)="collapseData = !collapseData" data-action="collapse" class="card-header-icon is-hidden-fullscreen"
+ <a (click)="collapseData = !collapseData" data-action="collapse"
+ class="card-header-icon is-hidden-fullscreen"
aria-label="more options">
<span class="icon">
<i *ngIf="collapseData" class="fas fa-angle-up" aria-hidden="true"></i>
@@ -127,7 +128,7 @@
</div>
</div>
<footer class="card-footer">
- <a (click)="reset($event);" class="card-footer-item has-text-danger">
+ <a (click)="reset($event);" class="card-footer-item has-text-danger" data-tooltip="Remove filter and show all proteins.">
<span class="icon">
<i class="fa fa-refresh"></i>
</span>
@@ -151,7 +152,7 @@
<div class="card-image" id="canvas-content">
<div class="parent">
<div class="network center image1" #network>
- <button class="button is-loading center" alt="Snow">Loading</button>
+ <button class="button is-loading center" alt="loading...">Loading</button>
</div>
<div class="image2">
<img src="assets/legend1.png" width="160px"/>
@@ -159,12 +160,16 @@
</div>
</div>
<footer class="card-footer toolbar">
- <button (click)="toCanvas()" class="button is-primary is-rounded">
+ <button (click)="toCanvas()" class="button is-primary is-rounded has-tooltip"
+ data-tooltip="Take a screenshot of the current network.">
<span class="icon">
<i class="fas fa-camera" aria-hidden="true"></i>
</span> <span>Screenshot</span>
</button>
- <app-toggle class="footer-buttons" textOn="Animation On" textOff="Off" [value]="physicsEnabled" (valueChange)="updatePhysicsEnabled($event)" icon="fa-wind"></app-toggle>
+ <app-toggle class="footer-buttons" textOn="Animation On" textOff="Off"
+ tooltipOn="Enable the network animation." tooltipOff="Disable the network animation and freeze nodes."
+ [value]="physicsEnabled" (valueChange)="updatePhysicsEnabled($event)"
+ icon="fa-wind"></app-toggle>
</footer>
</div>
</div>
@@ -187,7 +192,8 @@
<i *ngIf="!selectedWrapper" class="fas fa-info" aria-hidden="true"></i>
<i *ngIf="selectedWrapper && selectedWrapper.type === 'host'" class="fas fa-dna" aria-hidden="true"></i>
<i *ngIf="selectedWrapper && selectedWrapper.type === 'virus'" class="fas fa-virus" aria-hidden="true"></i>
- <i *ngIf="selectedWrapper && selectedWrapper.type === 'drug'" class="fas fa-capsules" aria-hidden="true"></i>
+ <i *ngIf="selectedWrapper && selectedWrapper.type === 'drug'" class="fas fa-capsules"
+ aria-hidden="true"></i>
</span>
<span *ngIf="!selectedWrapper">No item selected</span>
<span *ngIf="selectedWrapper">
@@ -235,7 +241,7 @@
<div class="digit"><i class="fa fa-fast-forward"></i></div>
<button (click)="analysis.startQuickAnalysis(true, selectedDataset)"
[disabled]="analysis.isLaunchingQuick()"
- class="button is-white is-rounded">
+ class="button is-white is-rounded has-tooltip" data-tooltip="Find drugs for all proteins.">
<span class="icon">
<i class="fa fa-capsules" *ngIf="!analysis.isLaunchingQuick()"></i>
<i class="fa fa-spin fa-spinner" *ngIf="analysis.isLaunchingQuick()"></i>
@@ -263,7 +269,8 @@
<div class="digit">2</div>
<button (click)="analysis.startQuickAnalysis(false, selectedDataset)"
[disabled]="analysis.getCount() === 0 || analysis.isLaunchingQuick()"
- class="button is-white is-rounded">
+ class="button is-white is-rounded has-tooltip"
+ data-tooltip="Find drugs for the selected proteins.">
<span class="icon">
<i class="fa fa-capsules" *ngIf="!analysis.isLaunchingQuick()"></i>
<i class="fa fa-spin fa-spinner" *ngIf="analysis.isLaunchingQuick()"></i>
@@ -300,7 +307,8 @@
<div class="field">
<div class="control">
<button (click)="analysisDialogTarget = 'drug-target'; showAnalysisDialog = true;"
- class="button is-primary is-fullwidth is-rounded"
+ class="button is-primary is-fullwidth is-rounded has-tooltip"
+ data-tooltip="Find drug targets for the selected proteins."
[disabled]="analysis.getCount() === 0">
<span class="icon">
<i class="fa fa-crosshairs"></i>
@@ -314,7 +322,8 @@
<div class="field">
<div class="control">
<button (click)="analysisDialogTarget = 'drug'; showAnalysisDialog = true;"
- class="button is-primary is-fullwidth is-rounded"
+ class="button is-primary is-fullwidth is-rounded has-tooltip"
+ data-tooltip="Find drugs for the selected proteins."
[disabled]="analysis.getCount() === 0">
<span class="icon">
<i class="fa fa-capsules"></i>
@@ -350,7 +359,7 @@
</div>
<footer class="card-footer">
<a (click)="analysis.removeAllTasks(); selectedAnalysisToken = null;"
- class="card-footer-item has-text-danger">
+ class="card-footer-item has-text-danger" data-tooltip="Delete all tasks.">
<span class="icon">
<i class="fa fa-trash"></i>
</span>
@@ -399,7 +408,8 @@
<td *ngIf="p.type == 'virus'">{{p.data.effectName}}</td>
<td *ngIf="p.type == 'host'">{{p.data.name}}</td>
<td>
- <button (click)="analysis.removeItem(p)" class="button is-small is-danger is-outlined">
+ <button (click)="analysis.removeItem(p)" class="button is-small is-danger is-outlined has-tooltip"
+ data-tooltip="Remove from selection.">
<i class="fa fa-trash"></i>
</button>
</td>
@@ -412,7 +422,7 @@
</div>
<footer class="card-footer">
<a (click)="analysis.addAllHostProteins(currentViewNodes, currentViewProteins)"
- class="card-footer-item has-text-success">
+ class="card-footer-item has-text-success" data-tooltip="Add all visible host proteins.">
<span class="icon">
<i class="fa fa-plus"></i>
</span>
@@ -421,7 +431,7 @@
</span>
</a>
<a (click)="analysis.addAllViralProteins(currentViewNodes, currentViewEffects)"
- class="card-footer-item has-text-success">
+ class="card-footer-item has-text-success" data-tooltip="Add all visible viral proteins.">
<span class="icon">
<i class="fa fa-plus"></i>
</span>
@@ -431,7 +441,8 @@
</a>
</footer>
<footer class="card-footer">
- <a (click)="analysis.resetSelection()" class="card-footer-item has-text-danger">
+ <a (click)="analysis.resetSelection()" class="card-footer-item has-text-danger"
+ data-tooltip="Remove all entries of the selection.">
<span class="icon">
<i class="fa fa-refresh"></i>
</span>
diff --git a/src/styles.scss b/src/styles.scss
index be775433d539666dd97cdf7ba025e4da4538f7da..e539e5fccb84f12bd7bd4301fbff44c981e3c901 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -12,6 +12,7 @@ $danger: #EF476F;
$link: $primary;
$info: $primary;
@import "~bulma/bulma.sass";
+@import '~bulma-tooltip';
@import "~primeng/resources/primeng.min.css";
@import "~primeicons/primeicons.css";