From 7e775c30f07f2fb73719984047d69600100955b1 Mon Sep 17 00:00:00 2001
From: AndiMajore <andi.majore@googlemail.com>
Date: Mon, 19 Jul 2021 18:24:46 +0200
Subject: [PATCH] changed tooltips from data-tooltip to pTooltip to make footer
overflow:auto possible
---
package-lock.json | 114 ++++++++++++++----
package.json | 8 +-
src/app/app.module.ts | 9 +-
.../analysis-panel.component.html | 10 +-
.../drug-table/drug-table.component.html | 2 +-
.../prot-table/prot-table.component.html | 2 +-
.../dataset-tile/dataset-tile.component.html | 2 +-
.../query-tile/query-tile.component.html | 2 +-
.../task-list/task-list.component.html | 2 +-
.../components/toggle/toggle.component.html | 4 +-
.../add-expressed-proteins.component.html | 6 +-
.../custom-proteins.component.html | 6 +-
.../launch-analysis.component.html | 4 +-
.../explorer-page.component.html | 34 +++---
.../explorer-page.component.scss | 11 ++
src/styles.scss | 23 +++-
src/theme-styles.scss | 20 ++-
src/theme.css | 3 +-
18 files changed, 184 insertions(+), 78 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 90d7b1cd..4adaa340 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -769,6 +769,14 @@
}
}
},
+ "@angular/material": {
+ "version": "12.1.2",
+ "resolved": "https://registry.npmjs.org/@angular/material/-/material-12.1.2.tgz",
+ "integrity": "sha512-DpqnvwnVqaudFRXTNyJR8r/gbKG4RtE3RGc6q4FgdN9SOfRh/q/yYyNnOUnbCwPgLTmkfGz+bj7++GA8gzhSkg==",
+ "requires": {
+ "tslib": "^2.2.0"
+ }
+ },
"@angular/platform-browser": {
"version": "12.0.3",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-12.0.3.tgz",
@@ -2049,6 +2057,14 @@
"schema-utils": "^2.7.0"
}
},
+ "@ng-bootstrap/ng-bootstrap": {
+ "version": "10.0.0",
+ "resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-10.0.0.tgz",
+ "integrity": "sha512-Sz+QaxjuyJYJ+zyUbf0TevgcgVesCPQiiFiggEzxKjzY5R+Hvq3YgryLdXf2r/ryePL+C3FXCcmmKpTM5bfczQ==",
+ "requires": {
+ "tslib": "^2.1.0"
+ }
+ },
"@ng-select/ng-select": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/@ng-select/ng-select/-/ng-select-6.1.0.tgz",
@@ -2885,17 +2901,25 @@
"dev": true
},
"autoprefixer": {
- "version": "10.2.6",
- "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.2.6.tgz",
- "integrity": "sha512-8lChSmdU6dCNMCQopIf4Pe5kipkAGj/fvTMslCsih0uHpOrXOPUEVOmYMMqmw3cekQkSD7EhIeuYl5y0BLdKqg==",
+ "version": "10.3.1",
+ "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.3.1.tgz",
+ "integrity": "sha512-L8AmtKzdiRyYg7BUXJTzigmhbQRCXFKz6SA1Lqo0+AR2FBbQ4aTAPFSDlOutnFkjhiz8my4agGXog1xlMjPJ6A==",
"dev": true,
"requires": {
"browserslist": "^4.16.6",
- "caniuse-lite": "^1.0.30001230",
+ "caniuse-lite": "^1.0.30001243",
"colorette": "^1.2.2",
"fraction.js": "^4.1.1",
"normalize-range": "^0.1.2",
"postcss-value-parser": "^4.1.0"
+ },
+ "dependencies": {
+ "caniuse-lite": {
+ "version": "1.0.30001245",
+ "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001245.tgz",
+ "integrity": "sha512-768fM9j1PKXpOCKws6eTo3RHmvTUsG9UrpT4WoREFeZgJBTi4/X9g565azS/rVUGtqb8nt7FjLeF5u4kukERnA==",
+ "dev": true
+ }
}
},
"aws-sign2": {
@@ -7223,6 +7247,12 @@
}
}
},
+ "js-base64": {
+ "version": "2.6.4",
+ "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
+ "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==",
+ "dev": true
+ },
"js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -10581,39 +10611,73 @@
}
},
"postcss-prefixer": {
- "version": "2.1.2",
- "resolved": "https://registry.npmjs.org/postcss-prefixer/-/postcss-prefixer-2.1.2.tgz",
- "integrity": "sha512-UQ9lvldlOvRFnW0zZfoYwr11LEaxuW+oqqTmb+NlFC0+hfkd7kPxAmI2kzci3L3gAERm+tngpyVdDx5XWTam8g==",
+ "version": "2.1.3",
+ "resolved": "https://registry.npmjs.org/postcss-prefixer/-/postcss-prefixer-2.1.3.tgz",
+ "integrity": "sha512-1ixOH5d9bt/YXw3iJ8FmBAqdviVTj1pdYSDvUDz4dY95tX/hKDXMa34YkQvXGRKkAMoehUd5pKVaF+D1qTbQOg==",
"dev": true,
"requires": {
- "css-selector-tokenizer": "^0.7.1",
- "postcss": "^7.0.14"
+ "css-selector-tokenizer": "^0.7.2",
+ "postcss": "^5.2.18"
},
"dependencies": {
+ "ansi-styles": {
+ "version": "2.2.1",
+ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+ "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+ "dev": true
+ },
+ "chalk": {
+ "version": "1.1.3",
+ "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+ "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+ "dev": true,
+ "requires": {
+ "ansi-styles": "^2.2.1",
+ "escape-string-regexp": "^1.0.2",
+ "has-ansi": "^2.0.0",
+ "strip-ansi": "^3.0.0",
+ "supports-color": "^2.0.0"
+ },
+ "dependencies": {
+ "supports-color": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+ "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+ "dev": true
+ }
+ }
+ },
+ "has-flag": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
+ "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=",
+ "dev": true
+ },
"postcss": {
- "version": "7.0.36",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
- "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+ "version": "5.2.18",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.18.tgz",
+ "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
"dev": true,
"requires": {
- "chalk": "^2.4.2",
- "source-map": "^0.6.1",
- "supports-color": "^6.1.0"
+ "chalk": "^1.1.3",
+ "js-base64": "^2.1.9",
+ "source-map": "^0.5.6",
+ "supports-color": "^3.2.3"
}
},
"source-map": {
- "version": "0.6.1",
- "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
- "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+ "version": "0.5.7",
+ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+ "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
"dev": true
},
"supports-color": {
- "version": "6.1.0",
- "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
- "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+ "version": "3.2.3",
+ "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
+ "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=",
"dev": true,
"requires": {
- "has-flag": "^3.0.0"
+ "has-flag": "^1.0.0"
}
}
}
@@ -11119,9 +11183,9 @@
"integrity": "sha512-uEv2pSPk1zQCfaB2VgnUfnUxxlGryYi+5rbdxmZBBt5v9S/pscIQYS5YDLxsQZ7D9jn5c76+Tx5wX/2J1nK6sA=="
},
"primeng": {
- "version": "12.0.0-rc.1",
- "resolved": "https://registry.npmjs.org/primeng/-/primeng-12.0.0-rc.1.tgz",
- "integrity": "sha512-YSQUKmUFa234wzvm8HYzu1wdQlg1Jd2BI85YYiNdwV3uwZIPRDsOURkapZ42bcQHwBrXPUXkCBgULhoiC6Dlfw==",
+ "version": "12.0.1",
+ "resolved": "https://registry.npmjs.org/primeng/-/primeng-12.0.1.tgz",
+ "integrity": "sha512-czPTqe/wwscoGzJ+FLU9vYd1VHeynEOXjWIodA8jRnwwFqYBAE5aEXEpYxGlvT5D/SYrmQT+GuZNEg333A60MQ==",
"requires": {
"tslib": "^2.1.0"
}
diff --git a/package.json b/package.json
index 432707e8..cc5bd7b8 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
"@angular/elements": "^12.0.3",
"@angular/forms": "~12.0.3",
"@angular/localize": "^12.0.3",
+ "@angular/material": "^12.1.2",
"@angular/platform-browser": "~12.0.3",
"@angular/platform-browser-dynamic": "~12.0.3",
"@angular/router": "~12.0.3",
@@ -39,6 +40,7 @@
"@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/free-regular-svg-icons": "^5.15.3",
"@fortawesome/free-solid-svg-icons": "^5.15.3",
+ "@ng-bootstrap/ng-bootstrap": "^10.0.0",
"@ng-select/ng-select": "^6.1.0",
"animate.css": "^4.1.1",
"bulma": "^0.9.2",
@@ -48,7 +50,7 @@
"dom-to-image": "^2.6.0",
"lodash.merge": "^4.6.2",
"primeicons": "^4.1.0",
- "primeng": "^12.0.0-rc.1",
+ "primeng": "^12.0.1",
"python": "0.0.4",
"python-shell": "^3.0.0",
"rxjs": "~7.1.0",
@@ -64,7 +66,7 @@
"@types/jasmine": "~3.7.7",
"@types/jasminewd2": "^2.0.9",
"@types/node": "^15.12.2",
- "autoprefixer": "^10.2.6",
+ "autoprefixer": "^10.3.1",
"codelyzer": "^6.0.0",
"concat": "^1.0.3",
"fs-extra": "^10.0.0",
@@ -81,7 +83,7 @@
"postcss-cli": "^8.3.1",
"postcss-modules": "^4.1.3",
"postcss-prefix-selector": "^1.10.0",
- "postcss-prefixer": "^2.1.2",
+ "postcss-prefixer": "^2.1.3",
"postcss-scss": "^4.0.0",
"posthtml-css-modules": "^0.1.3",
"posthtml-loader": "^2.0.1",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index ef917345..4d8811f1 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -17,6 +17,8 @@ import {ToggleComponent} from './components/toggle/toggle.component';
import {InfoTileComponent} from './components/info-tile/info-tile.component';
import {CustomProteinsComponent} from './dialogs/custom-proteins/custom-proteins.component';
+import {MatTooltipModule} from '@angular/material/tooltip';
+
import {AnalysisService} from './services/analysis/analysis.service';
import {AddExpressedProteinsComponent} from './dialogs/add-expressed-proteins/add-expressed-proteins.component';
import {createCustomElement} from '@angular/elements';
@@ -31,6 +33,7 @@ import {faTimes, faAngleUp, faAngleLeft, faCapsules, faCrosshairs, faFlask, faCh
faExpand, faInfo, faRocket, faAngleDown, faSearch, faFastForward, faExternalLinkAlt, faTasks, faFilter,
faMinus, faUpload, faAngleDoubleDown, faSync, faBroom, faAngleDoubleUp
} from '@fortawesome/free-solid-svg-icons';
+import {TooltipModule} from "primeng/tooltip";
@NgModule({
declarations: [
@@ -46,7 +49,7 @@ import {faTimes, faAngleUp, faAngleLeft, faCapsules, faCrosshairs, faFlask, faCh
AddExpressedProteinsComponent,
NetworkLegendComponent,
ProtTableComponent,
- DrugTableComponent,
+ DrugTableComponent
],
imports: [
BrowserModule,
@@ -56,7 +59,9 @@ import {faTimes, faAngleUp, faAngleLeft, faCapsules, faCrosshairs, faFlask, faCh
HttpClientModule,
BrowserAnimationsModule,
TableModule,
- FontAwesomeModule
+ FontAwesomeModule,
+ MatTooltipModule,
+ TooltipModule,
],
providers: [AnalysisService],
})
diff --git a/src/app/components/analysis-panel/analysis-panel.component.html b/src/app/components/analysis-panel/analysis-panel.component.html
index 4c117fa5..a38369d2 100644
--- a/src/app/components/analysis-panel/analysis-panel.component.html
+++ b/src/app/components/analysis-panel/analysis-panel.component.html
@@ -133,11 +133,11 @@
<button class="button is-loading center">Loading</button>
</div>
</div>
- <footer class="card-footer toolbar" *ngIf="myConfig.showFooter">
+ <footer class="card-footer toolbar explorer-footer" *ngIf="myConfig.showFooter">
<div class="field">
<p class="control footer-buttons">
<button class="button is-primary is-rounded has-tooltip"
- data-tooltip="Take a screenshot of the current network." (click)="toImage()">
+ pTooltip="Take a screenshot of the current network." tooltipPosition="top" (click)="toImage()">
<span class="icon">
<i class="fas fa-camera" aria-hidden="true"></i>
</span>
@@ -151,7 +151,7 @@
<div class="field">
<p class="control footer-buttons">
<a [href]="graphmlLink()" class="button is-success is-rounded has-tooltip"
- data-tooltip="Export this network as .graphml file.">
+ pTooltip="Export this network as .graphml file." tooltipPosition="top">
<span class="icon">
<i class="fas fa-download" aria-hidden="true"></i>
</span>
@@ -226,7 +226,7 @@
<div class="content tab-content scrollable" *ngIf="task && task.info.done" [class.is-visible]="tab === 'table'">
<div class="field has-addons" *ngIf="tableHasScores && task.info.algorithm !== 'proximity'">
<p class="control">
- <button class="button is-rounded has-tooltip" data-tooltip="Normalize the scores"
+ <button class="button is-rounded has-tooltip" pTooltip="Normalize the scores" tooltipPosition="top"
[class.is-primary]="tableNormalize" (click)="toggleNormalization(true)">
<span class="icon is-small">
<i class="fa fa-ruler-vertical"></i>
@@ -235,7 +235,7 @@
</button>
</p>
<p class="control">
- <button class="button is-rounded has-tooltip" data-tooltip="Disable normalization of the scores."
+ <button class="button is-rounded has-tooltip" pTooltip="Disable normalization of the scores." tooltipPosition="top"
[class.is-primary]="!tableNormalize" (click)="toggleNormalization(false)">
<span>Off</span>
</button>
diff --git a/src/app/components/analysis-panel/drug-table/drug-table.component.html b/src/app/components/analysis-panel/drug-table/drug-table.component.html
index 18e5f816..a89bfeea 100644
--- a/src/app/components/analysis-panel/drug-table/drug-table.component.html
+++ b/src/app/components/analysis-panel/drug-table/drug-table.component.html
@@ -24,7 +24,7 @@
<th *ngIf="tableHasScores" [pSortableColumn]="'score'">
Score
<button class="button is-light has-tooltip tooltip-button"
- [attr.data-tooltip]="tableDrugScoreTooltip">
+ [pTooltip]="tableDrugScoreTooltip" tooltipPosition="top">
<fa-icon [icon]="faQuestionCircle" class="icon"></fa-icon>
</button>
<p-sortIcon [field]="'score'"></p-sortIcon>
diff --git a/src/app/components/analysis-panel/prot-table/prot-table.component.html b/src/app/components/analysis-panel/prot-table/prot-table.component.html
index 39725d40..ad8fcdda 100644
--- a/src/app/components/analysis-panel/prot-table/prot-table.component.html
+++ b/src/app/components/analysis-panel/prot-table/prot-table.component.html
@@ -21,7 +21,7 @@
<th *ngIf="tableHasScores" [pSortableColumn]="'score'">
Score
<button class="button is-light has-tooltip tooltip-button"
- [attr.data-tooltip]="tableProteinScoreTooltip">
+ [pTooltip]="tableProteinScoreTooltip" tooltipPosition="top">
<fa-icon [icon]="faQuestionCircle" class="icon"></fa-icon>
</button>
<p-sortIcon [field]="'score'"></p-sortIcon>
diff --git a/src/app/components/dataset-tile/dataset-tile.component.html b/src/app/components/dataset-tile/dataset-tile.component.html
index f1a016ad..3a5e8c09 100644
--- a/src/app/components/dataset-tile/dataset-tile.component.html
+++ b/src/app/components/dataset-tile/dataset-tile.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)" data-tooltip="Choose the dataset you want to explore.">
+ placeholder="Select..." [ngModel]="selectedDataset" (ngModelChange)="select($event)" pTooltip="Choose the dataset you want to explore." tooltipPosition="top">
<ng-template ng-option-tmp let-item="item">
{{item.strains}} <br/>
<small>{{item.datasetNames}}</small>
diff --git a/src/app/components/query-tile/query-tile.component.html b/src/app/components/query-tile/query-tile.component.html
index 30f9f43c..8a56ce0d 100644
--- a/src/app/components/query-tile/query-tile.component.html
+++ b/src/app/components/query-tile/query-tile.component.html
@@ -1,6 +1,6 @@
<div class="content">
<ng-select [items]="queryItems" bindLabel="id" bindValue="data" [virtualScroll]="true" class="custom"
- placeholder="Search..." [hideSelected]="true" [searchFn]="querySearch" (change)="select($event)" data-tooltip="Find proteins in the network.">
+ placeholder="Search..." [hideSelected]="true" [searchFn]="querySearch" (change)="select($event)" pTooltip="Find proteins in the network." tooltipPosition="top">
<ng-template ng-option-tmp let-item="item">
<b *ngIf="item.data.netexId && item.data.netexId.startsWith('p')"> {{item.data.name}}</b>
<span><small *ngIf="item.data.netexId && item.data.netexId.startsWith('p')">Protein</small> | </span>
diff --git a/src/app/components/task-list/task-list.component.html b/src/app/components/task-list/task-list.component.html
index 9babccf1..a0f19df9 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"></progress>
</div>
- <div *ngIf="task.info.done" (click)="open(task.token)" data-tooltip="Show analysis results">
+ <div *ngIf="task.info.done" (click)="open(task.token)" pTooltip="Show analysis results" tooltipPosition="top">
<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 2dd13a83..ab187ff8 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 has-tooltip">
- <button class="button is-rounded has-tooltip" [attr.data-tooltip]="tooltipOn" [class.is-primary]="value" (click)="toggle(true)" [ngClass]="{'button-small':smallStyle}">
+ <button class="button is-rounded has-tooltip" [pTooltip]="tooltipOn" tooltipPosition="top" [class.is-primary]="value" (click)="toggle(true)" [ngClass]="{'button-small':smallStyle}">
<span class="icon is-small">
<i class="fa {{iconOn}}"></i>
</span>
@@ -8,7 +8,7 @@
</button>
</p>
<p class="control">
- <button class="button is-rounded has-tooltip" [attr.data-tooltip]="tooltipOff" [class.is-primary]="!value" (click)="toggle(false)" [ngClass]="{'button-small':smallStyle}">
+ <button class="button is-rounded has-tooltip" [pTooltip]="tooltipOff" tooltipPosition="top" [class.is-primary]="!value" (click)="toggle(false)" [ngClass]="{'button-small':smallStyle}">
<span [ngClass]="{'text-small':smallStyle}">{{textOff}}</span>
<span *ngIf="iconOff" class="icon is-small">
<i class="fa {{iconOff}}"></i>
diff --git a/src/app/dialogs/add-expressed-proteins/add-expressed-proteins.component.html b/src/app/dialogs/add-expressed-proteins/add-expressed-proteins.component.html
index 518446f7..1dbb602b 100644
--- a/src/app/dialogs/add-expressed-proteins/add-expressed-proteins.component.html
+++ b/src/app/dialogs/add-expressed-proteins/add-expressed-proteins.component.html
@@ -37,7 +37,7 @@
</section>
<footer class="modal-card-foot">
<button (click)="addProteins();" class="button is-success is-rounded has-tooltip"
- data-tooltip="Add all to the selection."
+ pTooltip="Add all to the selection." tooltipPosition="top"
[disabled]="proteins.length === 0 || !selectedTissue || loading">
<span class="icon">
<i class="fas fa-plus"></i>
@@ -47,7 +47,7 @@
</span>
</button>
<button (click)="addVisibleProteins();" class="button is-success is-rounded has-tooltip"
- data-tooltip="Add to selection if they appear in the current network."
+ pTooltip="Add to selection if they appear in the current network." tooltipPosition="top"
[disabled]="proteins.length === 0 || !selectedTissue || loading">
<span class="icon">
<i class="fas fa-expand"></i>
@@ -56,7 +56,7 @@
Select proteins ({{proteins.length}})
</span>
</button>
- <button (click)="close()" class="button is-rounded has-tooltip" data-tooltip="Close the current window.">
+ <button (click)="close()" class="button is-rounded has-tooltip" pTooltip="Close the current window." tooltipPosition="top">
Close
</button>
</footer>
diff --git a/src/app/dialogs/custom-proteins/custom-proteins.component.html b/src/app/dialogs/custom-proteins/custom-proteins.component.html
index 4b9dbad6..30614429 100644
--- a/src/app/dialogs/custom-proteins/custom-proteins.component.html
+++ b/src/app/dialogs/custom-proteins/custom-proteins.component.html
@@ -43,7 +43,7 @@
</section>
<footer class="modal-card-foot">
<button (click)="addProteins();" class="button is-success is-rounded has-tooltip"
- data-tooltip="Add all to the selection."
+ pTooltip="Add all to the selection." tooltipPosition="top"
[disabled]="proteins.length === 0 || loading">
<span class="icon">
<i class="fa fa-plus"></i>
@@ -53,7 +53,7 @@
</span>
</button>
<button (click)="addVisibleProteins();" class="button is-success is-rounded has-tooltip"
- data-tooltip="Add to selection if they appear in the current network."
+ pTooltip="Add to selection if they appear in the current network." tooltipPosition="top"
[disabled]="proteins.length === 0 || loading">
<span class="icon">
<i class="fas fa-expand"></i>
@@ -62,7 +62,7 @@
Select
</span>
</button>
- <button (click)="close()" class="button is-rounded has-tooltip" data-tooltip="Close the current window.">Close
+ <button (click)="close()" class="button is-rounded has-tooltip" pTooltip="Close the current window." tooltipPosition="top">Close
</button>
</footer>
</div>
diff --git a/src/app/dialogs/launch-analysis/launch-analysis.component.html b/src/app/dialogs/launch-analysis/launch-analysis.component.html
index 9133d786..bb001063 100644
--- a/src/app/dialogs/launch-analysis/launch-analysis.component.html
+++ b/src/app/dialogs/launch-analysis/launch-analysis.component.html
@@ -455,7 +455,7 @@
<footer class="modal-card-foot">
<button (click)="startTask(); close()" class="button is-success is-rounded has-tooltip"
- data-tooltip="Run the analysis."
+ pTooltip="Run the analysis." tooltipPosition="top"
[disabled]="!analysis.canLaunchTask()">
<span class="icon">
<i class="fa fa-rocket"></i>
@@ -464,7 +464,7 @@
Launch
</span>
</button>
- <button (click)="close()" class="button is-rounded has-tooltip" data-tooltip="Close the current window.">Close
+ <button (click)="close()" class="button is-rounded has-tooltip" pTooltip="Close the current window." tooltipPosition="top">Close
</button>
</footer>
</div>
diff --git a/src/app/pages/explorer-page/explorer-page.component.html b/src/app/pages/explorer-page/explorer-page.component.html
index cb3a1e57..9ec8e526 100644
--- a/src/app/pages/explorer-page/explorer-page.component.html
+++ b/src/app/pages/explorer-page/explorer-page.component.html
@@ -136,7 +136,7 @@
<ng-container *ngIf="myConfig.showFooterButtonScreenshot">
<button (click)="toImage()" class="button is-primary is-rounded has-tooltip explorer-footer-element"
- data-tooltip="Take a screenshot of the current network.">
+ pTooltip="Take a screenshot of the current network." tooltipPosition="top">
<span class="icon">
<i class="fas fa-camera" aria-hidden="true"></i>
</span>
@@ -150,7 +150,7 @@
<button (click)="expressionExpanded=!expressionExpanded"
class="button is-rounded is-primary" [class.is-outlined]="!selectedTissue"
aria-haspopup="true" aria-controls="dropdown-menu"
- data-tooltip="Tissue expression data is provided by the GTEx project."
+ pTooltip="Tissue expression data is provided by the GTEx project." tooltipPosition="top"
[ngClass]="{'button-small':smallStyle}">
<span *ngIf="!selectedTissue" [ngClass]="{'text-small':smallStyle}">Tissue</span>
<span *ngIf="selectedTissue">{{selectedTissue.name}}</span>
@@ -260,7 +260,7 @@
<div class="digit"><i class="fa fa-fast-forward"></i></div>
<button (click)="analysis.startQuickAnalysis(true, null)"
[disabled]="analysis.isLaunchingQuick()"
- class="button is-white is-rounded has-tooltip" data-tooltip="Find drugs for all proteins.">
+ class="button is-white is-rounded has-tooltip" pTooltip="Find drugs for all proteins." tooltipPosition="top">
<span class="icon">
<i class="fa fa-capsules" *ngIf="!analysis.isLaunchingQuick()"></i>
<i class="fa fa-spin fa-spinner" *ngIf="analysis.isLaunchingQuick()"></i>
@@ -289,7 +289,7 @@
<button (click)="analysis.startQuickAnalysis(false, null)"
[disabled]="analysis.getCount() === 0 || analysis.isLaunchingQuick()"
class="button is-white is-rounded has-tooltip"
- data-tooltip="Find drugs for the selected proteins.">
+ pTooltip="Find drugs for the selected proteins." tooltipPosition="top">
<span class="icon">
<i class="fa fa-capsules" *ngIf="!analysis.isLaunchingQuick()"></i>
<i class="fa fa-spin fa-spinner" *ngIf="analysis.isLaunchingQuick()"></i>
@@ -327,10 +327,9 @@
<div *ngIf="collapseAnalysis">
<div class="card-content">
<div class="field">
- <div class="control">
+ <div class="control" pTooltip="Find drug targets for the selected proteins." tooltipPosition="top">
<button (click)="analysisDialogTarget = 'drug-target'; showAnalysisDialog = true;"
class="button is-primary is-fullwidth is-rounded has-tooltip"
- data-tooltip="Find drug targets for the selected proteins."
[disabled]="analysis.getCount() === 0" [ngClass]="{'text-small':smallStyle}">
<span class="icon">
<i class="fa fa-crosshairs"></i>
@@ -342,10 +341,9 @@
</div>
</div>
<div class="field">
- <div class="control">
+ <div class="control" pTooltip="Find drugs for the selected proteins." tooltipPosition="top">
<button (click)="analysisDialogTarget = 'drug'; showAnalysisDialog = true;"
class="button is-primary is-fullwidth is-rounded has-tooltip"
- data-tooltip="Find drugs for the selected proteins."
[disabled]="analysis.getCount() === 0" [ngClass]="{'text-small':smallStyle}">
<span class="icon">
<i class="fa fa-capsules"></i>
@@ -360,7 +358,7 @@
<div class="control">
<a *ngIf="analysis.getCount() > 0" [href]="gProfilerLink()" target="_blank"
class="button is-primary is-fullwidth is-rounded has-tooltip"
- data-tooltip="Use enrichment analysis via g:Profiler (external).">
+ pTooltip="Use enrichment analysis via g:Profiler (external)." tooltipPosition="top">
<span class="icon">
<i class="fa fa-external-link-alt"></i>
</span>
@@ -370,7 +368,7 @@
</a>
<a *ngIf="analysis.getCount() === 0" disabled
class="button is-primary is-fullwidth is-rounded has-tooltip"
- data-tooltip="Use enrichment analysis via g:Profiler (external).">
+ pTooltip="Use enrichment analysis via g:Profiler (external)." tooltipPosition="top">
<span class="icon">
<i class="fa fa-external-link-alt"></i>
</span>
@@ -409,7 +407,7 @@
<footer class="card-footer">
<a *ngIf="analysis.tasks && analysis.tasks.length > 0"
(click)="analysis.removeAllTasks(); selectedAnalysisToken = null;"
- class="card-footer-item text-danger" data-tooltip="Delete all tasks.">
+ class="card-footer-item text-danger" pTooltip="Delete all tasks." tooltipPosition="top">
<span class="icon">
<i class="fa fa-trash"></i>
</span>
@@ -455,7 +453,7 @@
<td><p class="is-capitalized">{{p.data.label}}</p></td>
<td>
<button (click)="analysis.removeItems([p])" class="button is-small is-danger is-outlined has-tooltip"
- data-tooltip="Remove from selection.">
+ tooltipPosition="top" pTooltip="Remove from selection.">
<i class="fa fa-trash"></i>
</button>
</td>
@@ -469,7 +467,7 @@
<footer class="card-footer" *ngIf="selectedAnalysisToken">
<a (click)="analysis.addSeeds(currentViewNodes)"
- class="card-footer-item has-text-success" data-tooltip="Add all visible seeds.">
+ class="card-footer-item has-text-success" tooltipPosition="top" pTooltip="Add all visible seeds.">
<span class="icon">
<i class="fa fa-plus"></i>
@@ -479,7 +477,7 @@
</span>
</a>
<a (click)="analysis.removeSeeds(currentViewNodes)"
- class="card-footer-item text-danger" data-tooltip="Remove all seeds.">
+ class="card-footer-item text-danger" tooltipPosition="top" pTooltip="Remove all seeds.">
<span class="icon">
<i class="fa fa-minus"></i>
</span>
@@ -492,7 +490,7 @@
<footer class="card-footer">
<a (click)="showCustomProteinsDialog = true"
class="card-footer-item text-primary"
- data-tooltip="Add a custom list of proteins.">
+ tooltipPosition="top" pTooltip="Add a custom list of proteins.">
<span class="icon">
<i class="fa fa-upload"></i>
</span>
@@ -502,7 +500,7 @@
</a>
<a (click)="showThresholdDialog = true"
class="card-footer-item text-primary"
- data-tooltip="Add proteins expressed in the tissue.">
+ pTooltip="Add proteins expressed in the tissue." tooltipPosition="top">
<span class="icon">
<i class="fas fa-angle-double-up"></i>
</span>
@@ -514,7 +512,7 @@
<footer class="card-footer">
<a (click)="analysis.invertSelection(currentViewNodes)" class="card-footer-item text-primary"
- data-tooltip="Invert the current selection.">
+ tooltipPosition="top" pTooltip="Invert the current selection.">
<span class="icon">
<i class="fa fa-sync"></i>
</span>
@@ -523,7 +521,7 @@
</span>
</a>
<a (click)="analysis.resetSelection()" class="card-footer-item text-danger"
- data-tooltip="Remove all entries from the selection.">
+ tooltipPosition="top" pTooltip="Remove all entries from the selection.">
<span class="icon">
<i class="fa fa-broom"></i>
</span>
diff --git a/src/app/pages/explorer-page/explorer-page.component.scss b/src/app/pages/explorer-page/explorer-page.component.scss
index f5fa03d3..1b646893 100644
--- a/src/app/pages/explorer-page/explorer-page.component.scss
+++ b/src/app/pages/explorer-page/explorer-page.component.scss
@@ -72,3 +72,14 @@
.scroll-x{
overflow-x: auto;
}
+
+
+
+//
+//.p-tooltip .p-tooltip-text {
+// background-color: rgba(74,74,74,.9);
+// color: #fff;
+//}
+//.p-tooltip-arrow {
+// background-color: rgba(74,74,74,.9) !important;
+//}
diff --git a/src/styles.scss b/src/styles.scss
index 8a4898db..e5b747ef 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -4,7 +4,7 @@
@import "~bulma/bulma.sass";
@import '~bulma-tooltip';
@import "~animate.css/animate.min";
-//@import '~primeng/resources/themes/md-dark-deeppurple/theme.css';
+@import '~primeng/resources/themes/md-dark-deeppurple/theme.css';
@import "~primeng/resources/primeng.min.css";
@import "~primeicons/primeicons.css";
@import "variables";
@@ -19,12 +19,14 @@
.explorer-footer {
position: absolute;
- // overflow: auto;
- //width: $main-width;
+ overflow: auto;
+ width: 100%;
+ margin-left: -24px;
bottom: 0;
+
&-element {
position: relative;
- }
+ }
}
nav.navbar {
@@ -212,6 +214,19 @@ div.field.has-addons.add-remove-toggle {
}
}
+.p-tooltip-text:before {
+ content: '';
+ position: absolute;
+ display: block;
+ width: 0;
+ left: 50%;
+ bottom: +7px;
+ border: 6px solid transparent;
+ border-bottom: 0;
+ border-top: 6px solid var(--drgstn-tooltip);
+ transform: translate(-50%, calc(100% + 3px));
+}
+
html, #appWindow {
height: 100%;
}
diff --git a/src/theme-styles.scss b/src/theme-styles.scss
index 7e2f1e27..dec5dc08 100644
--- a/src/theme-styles.scss
+++ b/src/theme-styles.scss
@@ -12,6 +12,7 @@
--drgstn-text-primary: #151515;
--drgstn-text-secondary: #eeeeee;
--drgstn-border: rgba(0, 0, 0, 0.2);
+ --drgstn-tooltip: rgba(74,74,74,0.9);
}
#appWindow {
@@ -88,11 +89,6 @@ a:hover {
color: var(--drgstn-primary) !important;
}
-.p-datatable .p-sortable-column .p-sortable-column-icon{
- color: inherit !important;
-}
-
-
.button.is-primary {
background-color: var(--drgstn-primary) !important;
border-color: transparent !important;
@@ -190,6 +186,20 @@ a:hover {
color: var(--drgstn-text-primary)
}
+
+
+.p-tooltip-text, .p-tooltip-arrow {
+ background: var(--drgstn-tooltip) !important;
+ border-radius: 2px !important;
+ padding: .5rem 1rem .5rem 1rem !important;
+ color: var(--drgstn-text-secondary) !important;
+ font-size: .75rem !important;
+}
+
+.p-datatable .p-sortable-column .p-sortable-column-icon{
+ color: inherit !important;
+}
+
.p-datatable .p-datatable-tfoot > tr > td, .p-datatable .p-datatable-thead > tr > th {
background-color: var(--drgstn-panel) !important;
border-color: var(--drgstn-border) !important;
diff --git a/src/theme.css b/src/theme.css
index f83729c4..d586d9c0 100644
--- a/src/theme.css
+++ b/src/theme.css
@@ -9,5 +9,6 @@
--drgstn-info: #61c43d;
--drgstn-text-primary: #363636;
--drgstn-text-secondary: #FFFFFF;
- --drgstn-border: rgba(0, 0, 0, 0.1);
+ --drgstn-border: rgba(0, 0, 0, 0.2);
+ --drgstn-tooltip: rgba(74,74,74,0.9);
}
--
GitLab