Adding default error to proteomics

- Added logic to display placeholder image when we have no gene found for proteomics - Fixed several styling issues with the input search boxes - Related to #693 - Related to #698
Sage-Bionetworks · Jun 18, 2019 · a0a9056 · a0a9056
1 parent 15db2c8
commit a0a9056
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 77 deletions.
diff --git a/src/app/charts/select-menu/select-menu-view/select-menu-view.component.html b/src/app/charts/select-menu/select-menu-view/select-menu-view.component.html
@@ -6,6 +6,6 @@
         </div>
     </div>
     <div class="col-md-2 col-sm-2 col-1">
-        <p-progressSpinner *ngIf="!isActive" strokeWidth="8" fill="#FFFFFF" animationDuration=".5s"></p-progressSpinner>
+        <p-progressSpinner *ngIf="!isActive" strokeWidth="4" fill="#FFFFFF" animationDuration=".5s"></p-progressSpinner>
     </div>
 </div>
diff --git a/src/app/core/contrib-teams/contrib-teams.component.scss b/src/app/core/contrib-teams/contrib-teams.component.scss
@@ -55,7 +55,7 @@
 
         h3 {
             text-align: center;
-            font-size: 16px;
+            font-size: $font-size-regular;
             color: $brand-color-content;
         }
     }

diff --git a/src/app/genes/gene-overview/evidence-menu/rna/gene-rnaseq-de/gene-rnaseq-de.component.scss b/src/app/genes/gene-overview/evidence-menu/rna/gene-rnaseq-de/gene-rnaseq-de.component.scss
@@ -91,10 +91,10 @@
             font-size: 18px;
 
             @include respond-to('ex-small') {
-                font-size: 16px;
+                font-size: $font-size-regular;
             }
             @include respond-to('small') {
-                font-size: 16px;
+                font-size: $font-size-regular;
             }
             @include respond-to('medium') {
                 font-size: 18px;
@@ -111,6 +111,11 @@
             line-height: 52px;
             background: $background;
             box-shadow: 0px 0px 4px color(box-shadow);
+
+            .ui-multiselect-label {
+                margin: auto;
+                line-height: 52px;
+            }
         }
 
         .ui-chkbox {
@@ -154,13 +159,13 @@
                 font-size: 14px;
             }
             @include respond-to('medium') {
-                font-size: 16px;
+                font-size: $font-size-regular;
             }
             @include respond-to('large') {
-                font-size: 16px;
+                font-size: $font-size-regular;
             }
             @include respond-to('ex-large') {
-                font-size: 16px;
+                font-size: $font-size-regular;
             }
 
             color: color(text, secondary);

diff --git a/src/app/genes/gene-search/gene-search.component.html b/src/app/genes/gene-search/gene-search.component.html
@@ -2,12 +2,20 @@
 <div class="row search-row">
     <section class="filter-wrapper">
         <div class="keyword-wrapper">
-            <input type="text" [formControl]="queryField" id="keyword" rows="1" cols="22"
-                [class.input-text]="searchedGenes.value"
-                (blur)="closeSearchList($event.target)" placeholder="Search Gene Symbol or Ensembl ID" #searchedGenes>
-            <p-progressSpinner *ngIf="isSearching" strokeWidth="8" fill="#FFFFFF" animationDuration=".5s"></p-progressSpinner>
-            <div class="input-search-icon">
-                <i class="fa fa-search fa-lg"></i>
+            <div class="row">
+                <div class="col-md-10 input-search-col">
+                    <input type="text" [formControl]="queryField" id="keyword" rows="1" cols="22"
+                        [class.input-text]="searchedGenes.value"
+                        (blur)="closeSearchList($event.target)"
+                        placeholder="Search Gene Symbol or Ensembl ID"
+                        #searchedGenes>
+                </div>
+                <div class="col-md-1 input-search-icon">
+                    <i class="fa fa-search fa-lg"></i>
+                </div>
+                <div class="col-md-1 input-search-col">
+                    <p-progressSpinner *ngIf="isSearching" strokeWidth="4" fill="#FFFFFF" animationDuration=".5s"></p-progressSpinner>
+                </div>
             </div>
         </div>
         <ul class="filter-select" (mouseover)="focusSearchList(true)" (mouseleave)="focusSearchList(false)">

diff --git a/src/app/genes/gene-search/gene-search.component.scss b/src/app/genes/gene-search/gene-search.component.scss
@@ -58,7 +58,8 @@
     resize: none;
     width: 85%;
     background: transparent;
-    line-height: 63px;
+    line-height: 18px;
+    font-size: $font-size-x-small-odd;
     border-color: color(keyword, border-color);
     border: 2px;
 
@@ -78,7 +79,6 @@
         white-space:pre-line;
         position:relative;
         color: color(input-placeholder);
-        font-size: $font-size-x-small-odd;
     }
 }
 

diff --git a/src/app/genes/genes-list/genes-list.component.html b/src/app/genes/genes-list/genes-list.component.html
@@ -33,10 +33,14 @@ <h1>Nominated Target List</h1>
                     <div class="row search-row header-row">
                         <section class="filter-wrapper">
                             <div class="keyword-wrapper">
-                                <input type="text" pInputText size="50" id="keyword" placeholder="Search Gene Symbol or Ensembl ID"
-                                    (input)="gl.filterGlobal($event.target.value, 'contains')">
-                                <div class="input-search-icon">
-                                    <i class="fa fa-search fa-lg"></i>
+                                <div class="row">
+                                    <div class="col-md-10 input-search-col">
+                                        <input type="text" pInputText size="50" id="keyword" placeholder="Search Gene Symbol or Ensembl ID"
+                                            (input)="gl.filterGlobal($event.target.value, 'contains')">
+                                    </div>
+                                    <div class="col-md-2 input-search-icon">
+                                        <i class="fa fa-search fa-lg"></i>
+                                    </div>
                                 </div>
                             </div>
                         </section>
@@ -60,10 +64,8 @@ <h1>Nominated Target List</h1>
             <tr class="">
                 <th class="" *ngFor="let col of cols; let i = index;" [ngSwitch]="col.field">
                     <div class="row">
-                        <div class="col-md-9 col-sm-9 col-9 nomlist-first-col">
+                        <div [pSortableColumn]="col.field" class="col-md-12 col-sm-12 col-12 nomlist-first-col">
                             {{col.header}}
-                        </div>
-                        <div [pSortableColumn]="col.field" class="col-md-3 col-sm-3 col-3 nomlist-second-col">
                             <p-sortIcon [field]="col.field"></p-sortIcon>
                         </div>
                     </div>

diff --git a/src/server/routes/api.ts b/src/server/routes/api.ts
@@ -205,10 +205,14 @@ connection.once('open', () => {
                     }
                 ]}).exec((err, gene: Proteomics) => {
                     if (err) {
-                        next(err);
+                        res.send({error: 'Empty Proteomics array', items: []});
                     } else {
-                        filter = gene.UniProtID;
-                        resolve(true);
+                        if (gene) {
+                            filter = gene.UniProtID;
+                            resolve(true);
+                        } else {
+                            res.send({error: 'Empty Proteomics array', items: []});
+                        }
                     }
                 });
             }

diff --git a/src/styles/styles.scss b/src/styles/styles.scss
@@ -127,30 +127,13 @@ p-checkbox {
 }
 
 p-progressSpinner {
-    position: absolute;
     z-index: 2;
     color: color(text, title);
-    top: 35%;
 
     .ui-progress-spinner {
-        width: 20px;
-        height: 20px;
-    }
-
-    @include respond-to('ex-small') {
-        left: 83.5%;
-    }
-    @include respond-to('small') {
-        left: 88%;
-    }
-    @include respond-to('medium') {
-        left: 88.5%;
-    }
-    @include respond-to('large') {
-        left: 87.5%;
-    }
-    @include respond-to('ex-large') {
-        left: 86.5%;
+        width: 10px;
+        height: 10px;
+        position: static;
     }
 }
 
@@ -538,6 +521,7 @@ p-dialog {
 
             text-align: left;
             text-align-last: left;
+            font-size: $font-size-x-small-odd;
             overflow: auto;
 
             // Opera Mini workaround
@@ -552,7 +536,6 @@ p-dialog {
                 white-space:pre-line;
                 position:relative;
                 color: color(input-placeholder);
-                font-size: $font-size-x-small-odd;
             }
         }
 
@@ -635,16 +618,6 @@ p-dialog {
         }
 
         .nomlist-first-col {
-            text-align-last: right;
-            text-align: right;
-            vertical-align: middle;
-            margin: auto;
-        }
-
-        .nomlist-second-col {
-            padding: 0px;
-            text-align: left;
-            text-align-last: left;
             vertical-align: middle;
             margin: auto;
         }
@@ -679,7 +652,7 @@ p-dialog {
                     line-height: 40px;
                     box-shadow: inset 0px 0px 4px color(box-shadow);
                     text-align-last: left;
-                    font-size: 16px;
+                    font-size: $font-size-regular;
                     border: 0px;
 
                     ::-moz-placeholder,
@@ -724,7 +697,7 @@ p-dialog {
             }
 
             .ui-sortable-column {
-                font-size: 16px;
+                font-size: $font-size-regular;
             }
         }
         @include respond-to('medium') {
@@ -791,7 +764,7 @@ p-dialog {
                 font-size: 12px;
             }
             @include respond-to('small') {
-                font-size: 16px;
+                font-size: $font-size-regular;
             }
             @include respond-to('medium') {
                 font-size: 18px;
@@ -1118,28 +1091,20 @@ p-dialog {
     box-shadow: inset 0px 0px 4px color(keyword, box-shadow);
     border-radius: 6px;
 
+    .row {
+        width: 100%;
+    }
+
+    .input-search-col {
+        vertical-align: middle;
+        margin: auto;
+    }
+
     .input-search-icon {
-        width: 15%;
         vertical-align: middle;
         margin: auto;
 
         i {
-            @include respond-to('ex-small') {
-                width: 60%;
-            }
-            @include respond-to('small') {
-                width: 50%;
-            }
-            @include respond-to('medium') {
-                width: 60%;
-            }
-            @include respond-to('large') {
-                width: 55%;
-            }
-            @include respond-to('ex-large') {
-                width: 45%;
-            }
-
             z-index: 2;
             vertical-align: middle;
             color: $contrast-color;
@@ -1209,7 +1174,7 @@ p-dialog {
     transform: translate(-50%, -50%);
     text-align: center;
     line-height: normal;
-    font-size: 18px;
+    font-size: $font-size-x-regular;
     text-align: center;
     color: #9DA3B3;
 }