Merge branch 'master' of gitlab.rrz.uni-hamburg.de:cosy-bio/drugst.one/frontend

src/app/components/analysis-panel/analysis-panel.component.html

@@ -241,7 +241,7 @@
                 <button
                   class="button is-rounded has-tooltip is-small"
                   pTooltip="Normalize the scores"
-                  [tooltipStyleClass]="'drgstn drgstn-tooltip'"
+                  [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-top'"
                   tooltipPosition="top"
                   [class.is-primary]="tableNormalize"
                   (click)="toggleNormalization(true)"
@@ -257,7 +257,7 @@
                 <button
                   class="button is-rounded has-tooltip is-small"
                   pTooltip="Disable normalization of the scores."
-                  [tooltipStyleClass]="'drgstn drgstn-tooltip'"
+                  [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-top'"
                   tooltipPosition="top"
                   [class.is-primary]="!tableNormalize"
                   (click)="toggleNormalization(false)"

src/app/components/analysis-panel/drug-table/drug-table.component.html

@@ -24,7 +24,7 @@
       <th *ngIf="tableHasScores" [pSortableColumn]="'score'">
         Score
         <span class="has-tooltip tooltip-button has-text-info question-icon"
-                [pTooltip]="tableDrugScoreTooltip" [tooltipStyleClass]="'drgstn drgstn-tooltip'" tooltipPosition="top">
+                [pTooltip]="tableDrugScoreTooltip" [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-top'" tooltipPosition="top">
           <fa-icon [icon]="faQuestionCircle" class="icon"></fa-icon>
       </span>
         <p-sortIcon [field]="'score'"></p-sortIcon>

src/app/components/analysis-panel/prot-table/prot-table.component.html

@@ -21,7 +21,7 @@
       <th *ngIf="tableHasScores" [pSortableColumn]="'score'">
         Score
         <span class="question-icon has-text-info has-tooltip tooltip-button"
-                [pTooltip]="tableProteinScoreTooltip" [tooltipStyleClass]="'drgstn drgstn-tooltip'" tooltipPosition="top">
+                [pTooltip]="tableProteinScoreTooltip" [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-top'" tooltipPosition="top">
           <fa-icon [icon]="faQuestionCircle" class="icon"></fa-icon>
         </span>
         <p-sortIcon [field]="'score'"></p-sortIcon>

src/app/components/dataset-tile/dataset-tile.component.html

 <div class="content">
   <ng-select [items]="datasetItems" bindLabel="label" [virtualScroll]="true" class="custom"
-             placeholder="Select..." [ngModel]="selectedDataset" (ngModelChange)="select($event)" pTooltip="Choose the dataset you want to explore." [tooltipStyleClass]="'drgstn drgstn-tooltip'" tooltipPosition="top">
+             placeholder="Select..." [ngModel]="selectedDataset" (ngModelChange)="select($event)" pTooltip="Choose the dataset you want to explore." [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-top'" tooltipPosition="top">
     <ng-template ng-option-tmp let-item="item">
       {{item.strains}} <br/>
       <small>{{item.datasetNames}}</small>

src/app/components/info-tile/info-tile.component.html

@@ -93,8 +93,8 @@
       <span
         class="icon has-text-info"
         pTooltip="Tissue expression data is provided by the GTEx project. Unit is transcript per million."
-        [tooltipStyleClass]="'drgstn drgstn-tooltip'"
-        tooltipPosition="top"
+        [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"
+        tooltipPosition="left"
         ><i class="fas fa-info-circle"></i
       ></span>
     </p>

src/app/components/network/network-menu-left/network-menu-left.component.html

@@ -39,8 +39,8 @@
             (click)="networkHandler.activeNetwork.toImage()"
             class="button is-primary is-rounded has-tooltip"
             pTooltip="Take a screenshot of the current network."
-            [tooltipStyleClass]="'drgstn drgstn-tooltip'"
-            tooltipPosition="top"
+            [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-right'"
+            tooltipPosition="right"
             [ngClass]="{
               'is-small': drugstoneConfig.smallStyle
             }"
@@ -87,8 +87,8 @@
               aria-haspopup="true"
               aria-controls="dropdown-menu"
               pTooltip="Tissue expression data is provided by the GTEx project."
-              [tooltipStyleClass]="'drgstn drgstn-tooltip'"
-              tooltipPosition="top"
+              [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-right'"
+              tooltipPosition="right"
               [ngClass]="{
                 'is-small': drugstoneConfig.smallStyle
               }"

src/app/components/network/network-menu-left/network-menu-left.component.scss

@@ -85,8 +85,8 @@
     top: calc(50% - 10px);
     display: inline-block;
     margin: 0px;
-    right: -20px;
-
+    right: -12px;
+    padding: calc(.75em - 1px) !important;
     .dropdown-menu {
       z-index: $network-tissue-options-z;
       .scroll-area {
@@ -98,4 +98,4 @@
 
 .dropdown-menu{
   z-index: $network-tissue-options-z !important;
-}
\ No newline at end of file
+}

src/app/components/network/network-menu-left/toggle-inplace-reversed/toggle-inplace-reversed.component.html

 <button
   class="button is-rounded has-tooltip"
   [pTooltip]="tooltip"
-  [tooltipStyleClass]="'drgstn drgstn-tooltip'"
+  [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-right'"
   tooltipPosition="right"
   (click)="toggle()"
   [ngClass]="{

src/app/components/network/network-menu/network-menu.component.html

@@ -39,8 +39,8 @@
             (click)="networkHandler.activeNetwork.toImage()"
             class="button is-primary is-rounded has-tooltip"
             pTooltip="Take a screenshot of the current network."
-            [tooltipStyleClass]="'drgstn drgstn-tooltip'"
-            tooltipPosition="top"
+            [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"
+            tooltipPosition="left"
             [ngClass]="{
               'is-small': drugstoneConfig.smallStyle
             }"
@@ -87,8 +87,8 @@
               aria-haspopup="true"
               aria-controls="dropdown-menu"
               pTooltip="Tissue expression data is provided by the GTEx project."
-              [tooltipStyleClass]="'drgstn drgstn-tooltip'"
-              tooltipPosition="top"
+              [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"
+              tooltipPosition="left"
               [ngClass]="{
                 'is-small': drugstoneConfig.smallStyle
               }"

src/app/components/network/network-menu/network-menu.component.scss

@@ -85,7 +85,8 @@
     top: calc(50% - 10px);
     display: inline-block;
     margin: 0px;
-    left: -20px;
+    left: -12px;
+    padding: calc(.75em - 1px) !important;
     &.rotated {
       -ms-transform: rotate(180deg); /* IE 9 */
       transform: rotate(180deg);

src/app/components/network/network-menu/toggle-inplace/toggle-inplace.component.html

 <button
   class="button is-rounded has-tooltip"
   [pTooltip]="tooltip"
-  [tooltipStyleClass]="'drgstn drgstn-tooltip'"
+  [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"
   tooltipPosition="left"
   (click)="toggle()"
   [ngClass]="{
@@ -21,4 +21,4 @@
   <span *ngIf="value" class="icon is-small">
     <i class="fa {{ iconOn }}"></i>
   </span>
-</button>
\ No newline at end of file
+</button>

src/app/components/query-tile/query-tile.component.html

@@ -9,7 +9,7 @@
     [searchFn]="querySearch"
     (change)="select($event)"
     pTooltip="Find nodes in the network."
-    [tooltipStyleClass]="'drgstn drgstn-tooltip'"
+    [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-top'"
     tooltipPosition="top"
   >
     <ng-template ng-option-tmp let-item="item">

src/app/components/task-list/task-list.component.html

@@ -97,7 +97,7 @@
         *ngIf="task.info.done"
         (click)="open(task.token)"
         pTooltip="Show analysis results"
-        [tooltipStyleClass]="'drgstn drgstn-tooltip'"
+        [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-top'"
         tooltipPosition="top"
       >
         <div class="columns mb-0">

src/app/components/toggle/toggle.component.html

@@ -4,7 +4,7 @@
       class="button is-rounded has-tooltip"
       [pTooltip]="tooltipOn"
       [disabled]="disabled"
-      [tooltipStyleClass]="'drgstn drgstn-tooltip'"
+      [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-top'"
       tooltipPosition="top"
       [class.is-primary]="value"
       (click)="toggle(true)"
@@ -21,7 +21,7 @@
       class="button is-rounded has-tooltip"
       [pTooltip]="tooltipOff"
       [disabled]="disabled"
-      [tooltipStyleClass]="'drgstn drgstn-tooltip'"
+      [tooltipStyleClass]="'drgstn drgstn-tooltip-top'"
       tooltipPosition="top"
       [class.is-primary]="!value"
       (click)="toggle(false)"

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"
-              pTooltip="Add all to the selection." [tooltipStyleClass]="'drgstn drgstn-tooltip'" tooltipPosition="top"
+              pTooltip="Add all to the selection." [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-top'" 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"
-              pTooltip="Add to selection if they appear in the current network." [tooltipStyleClass]="'drgstn drgstn-tooltip'" tooltipPosition="top"
+              pTooltip="Add to selection if they appear in the current network." [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-top'" 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" pTooltip="Close the current window." [tooltipStyleClass]="'drgstn drgstn-tooltip'" tooltipPosition="top">
+      <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>

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"
-              pTooltip="Add all to the selection." [tooltipStyleClass]="'drgstn drgstn-tooltip'" tooltipPosition="top"
+              pTooltip="Add all to the selection." [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-top'" 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"
-              pTooltip="Add to selection if they appear in the current network."  [tooltipStyleClass]="'drgstn drgstn-tooltip'" tooltipPosition="top"
+              pTooltip="Add to selection if they appear in the current network."  [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-top'" 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" pTooltip="Close the current window." [tooltipStyleClass]="'drgstn drgstn-tooltip'" tooltipPosition="top">Close
+      <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>

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"
-              pTooltip="Run the analysis." [tooltipStyleClass]="'drgstn drgstn-tooltip'" tooltipPosition="top"
+              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>
@@ -464,7 +464,7 @@
           Launch
         </span>
       </button>
-      <button (click)="close()" class="button is-rounded has-tooltip" pTooltip="Close the current window." [tooltipStyleClass]="'drgstn drgstn-tooltip'" tooltipPosition="top">Close
+      <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>

src/app/pages/explorer-page/explorer-page.component.html

@@ -250,7 +250,7 @@
                           [disabled]="analysis.isLaunchingQuick()"
                           class="button is-white is-rounded has-tooltip quick-start-btn"
                           pTooltip="Find drugs for all proteins."
-                          [tooltipStyleClass]="'drgstn drgstn-tooltip'"
+                          [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-top'"
                           tooltipPosition="top"
                         >
                           <span class="icon quick-icon">
@@ -342,7 +342,7 @@
                           "
                           class="button is-white is-rounded quick-start-btn drugs-btn"
                           pTooltip="Find drugs for the selected proteins."
-                          [tooltipStyleClass]="'drgstn drgstn-tooltip'"
+                          [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-top'"
                           tooltipPosition="top"
                         >
                           <span class="icon quick-icon">
@@ -404,7 +404,7 @@
                 <div
                   class="control"
                   pTooltip="Find drug targets for the selected proteins."
-                  [tooltipStyleClass]="'drgstn drgstn-tooltip'"
+                  [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-top'"
                   tooltipPosition="top"
                 >
                   <button
@@ -427,7 +427,7 @@
                 <div
                   class="control"
                   pTooltip="Find drugs for the selected proteins."
-                  [tooltipStyleClass]="'drgstn drgstn-tooltip'"
+                  [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-top'"
                   tooltipPosition="top"
                 >
                   <button
@@ -455,7 +455,7 @@
                     target="_blank"
                     class="button is-primary is-fullwidth is-rounded has-tooltip"
                     pTooltip="Use enrichment analysis via g:Profiler (external)."
-                    [tooltipStyleClass]="'drgstn drgstn-tooltip'"
+                    [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-top'"
                     tooltipPosition="top"
                   >
                     <span class="icon">
@@ -472,7 +472,7 @@
                     disabled
                     class="button is-primary is-fullwidth is-rounded has-tooltip"
                     pTooltip="Use enrichment analysis via g:Profiler (external)."
-                    [tooltipStyleClass]="'drgstn drgstn-tooltip'"
+                    [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-top'"
                     tooltipPosition="top"
                   >
                     <span class="icon">
@@ -530,7 +530,7 @@
                 "
                 class="card-footer-item has-text-danger"
                 pTooltip="Delete all tasks."
-                [tooltipStyleClass]="'drgstn drgstn-tooltip'"
+                [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-top'"
                 tooltipPosition="top"
               >
                 <span class="icon">

src/index.html

@@ -45,7 +45,7 @@
 
 <button onclick="setNetwork('netexp1')">Add nodes</button>
 
-<div >
+<div style="max-width: 80vw">
 
   <drugst-one id="netexp1"
                     pluginId="2"

src/stylesheets/primeng.scss

 @import '../stylesheets/icons';
+
 .drgstn-tooltip {
   position: absolute !important;
   padding: .25em .5rem !important;
   max-width: 12.5rem !important;
 }
 
+.drgstn-tooltip-top {
+  .p-tooltip-text:before {
+    width: 0;
+    left: 50%;
+    bottom: +7px;
+    border: 6px solid transparent;
+    border-top: 6px solid var(--drgstn-tooltip);
+    border-bottom: 0;
+    transform: translate(-50%, calc(100% + 3px));
+
+  }
+}
+
+.drgstn-tooltip-bottom {
+  .p-tooltip-text:before {
+    width: 0;
+    left: 50%;
+    top: +3px;
+    border: 6px solid transparent;
+    border-bottom: 6px solid var(--drgstn-tooltip);
+    border-top: 0;
+    transform: translate(-50%, -5px);
+  }
+}
+
+.drgstn-tooltip-left {
+  .p-tooltip-text:before {
+    height: 0;
+    top: 50%;
+    right: +7px;
+    border: 6px solid transparent;
+    border-left: 6px solid var(--drgstn-tooltip);
+    border-right: 0;
+    transform: translate(calc(100% - 1px),-50% );
+  }
+}
+
+.drgstn-tooltip-right {
+  .p-tooltip-text:before {
+    height: 0;
+    top: 50%;
+    left: +7px;
+    border: 6px solid transparent;
+    border-right: 6px solid var(--drgstn-tooltip);
+    border-left: 0;
+    transform: translate(-5px,-50% );
+  }
+}
+
 .drgstn {
   @import '../assets/styles/primeicons';
   @import '../assets/styles/theme';
@@ -23,7 +73,7 @@
     border-radius: 4px !important;
     padding: .5rem 1rem .5rem 1rem !important;
     color: var(--drgstn-text-secondary) !important;
-    font-family: Roboto,Helvetica Neue,sans-serif !important;
+    font-family: Roboto, Helvetica Neue, sans-serif !important;
     font-size: .75rem !important;
   }
 
@@ -31,13 +81,6 @@
     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));
   }
 
   .p-checkbox .p-checkbox-box {