Merge pull request #101 from EBISPOT/gwas-curation-ui#91_Studies_Management_Page_to_view,_filter,_and_export_studies_in_the_curation_app

remove quotes from params and minor ui improvements

Author: ala-ebi

src/app/core/services/study.service.ts

@@ -22,13 +22,13 @@ export class StudyService {
       params = params.set('sort', sort + ',' + order);
     }
     if (efoTrait){
-      params = params.set('efoTrait', '"' + efoTrait + '"');
+      params = params.set('efoTrait', efoTrait);
     }
     if (reportedTrait) {
-      params = params.set('reportedTrait', '"' + reportedTrait + '"');
+      params = params.set('reportedTrait', reportedTrait);
     }
     if (note) {
-      params = params.set('note', '"' + note + '"');
+      params = params.set('note', note);
     }
     if (sumstatsFlag !== 'any' && sumstatsFlag != null) {
       params = params.set('sumstatsFlag', String(sumstatsFlag));

src/app/feature/study/pages/study-search/study-search.component.css

@@ -70,9 +70,9 @@ tr.example-element-row:not(.example-expanded-row):active {
   background-color: #eee;
 }
 
-.note-col {
+.ellipsis-col {
   overflow: hidden;
-  max-width: 120px;
+  max-width: 200px;
   text-overflow: ellipsis;
   white-space: nowrap;
 }

src/app/feature/study/pages/study-search/study-search.component.html

@@ -65,10 +65,6 @@ <h3>Search parameters</h3>
           <mat-option disabled *ngIf="efoTraitsDropdownItems.length == 0"> No results.</mat-option>
         </mat-autocomplete>
       </mat-form-field>
-      <button mat-raised-button class="ml-4 filters-button" color="accent" (click)="resetFilters()">
-        <mat-icon>restart_alt</mat-icon>
-        Reset
-      </button>
       <br>
       <mat-form-field appearance="outline">
         <mat-label>GxE flag</mat-label>
@@ -97,7 +93,12 @@ <h3>Search parameters</h3>
         </mat-select>
       </mat-form-field>
 
-      <button mat-raised-button class="ml-4 filters-button" color="accent" (click)="search()">
+      <button mat-raised-button class="ml-4 filters-button" color="primary" (click)="resetFilters()">
+        <mat-icon>restart_alt</mat-icon>
+        Reset
+      </button>
+
+      <button mat-raised-button class="ml-4 filters-button" color="primary" (click)="search()">
         <mat-icon>search</mat-icon>
         Search
       </button>
@@ -146,8 +147,10 @@ <h3>Search parameters</h3>
           </ng-container>
 
           <ng-container matColumnDef="title">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header>TITLE</th>
-            <td mat-cell *matCellDef="let row">{{row?.title || 'NA'}}</td>
+            <th mat-header-cell *matHeaderCellDef>TITLE</th>
+            <td mat-cell *matCellDef="let row" class="ellipsis-col">
+              <span matTooltip="{{row?.title}}" matTooltipClass="mat-tooltip">{{row?.title || 'NA'}}</span>
+            </td>
           </ng-container>
 
           <ng-container matColumnDef="efoTrait">
@@ -162,8 +165,8 @@ <h3>Search parameters</h3>
 
           <ng-container matColumnDef="note">
             <th mat-header-cell *matHeaderCellDef>NOTE</th>
-            <td mat-cell *matCellDef="let row" class="note-col">{{row?.notes?.toString() || 'NA'}}
-              <button mat-icon-button class="float-right" (click)="(expandedElement = expandedElement === row ? null : row); $event.stopPropagation()" *ngIf="row?.notes">
+            <td mat-cell *matCellDef="let row" class="ellipsis-col">{{row?.notes?.toString() || 'NA'}}
+              <button mat-icon-button class="float-right -top-8 -right-6" (click)="(expandedElement = expandedElement === row ? null : row); $event.stopPropagation()" *ngIf="row?.notes">
                 <mat-icon *ngIf="expandedElement !== row">keyboard_arrow_down</mat-icon>
                 <mat-icon *ngIf="expandedElement === row">keyboard_arrow_up</mat-icon>
               </button>

src/styles.css

@@ -434,3 +434,8 @@ a.menu-btn {
   position: fixed;
   overflow-y: scroll;
 }
+
+.mat-tooltip {
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 12px;
+}