Merge pull request #291 from zhx828/add-no-result-info

Allow user suggests annotation in the search result

Author: zhx828

app/index.html

@@ -288,6 +288,7 @@
 <script src="scripts/directives/search-box.js"></script>
 <script src="scripts/directives/search-icon.js"></script>
 <script src="scripts/directives/action-button.js"></script>
+<script src="scripts/directives/suggest-curation.js"></script>
 <!-- endbuild -->
 <script src="https://unpkg.com/[email protected]/bundles/ng-table.min.js"></script>
 </body>

app/scripts/directives/search-box.js

@@ -27,6 +27,7 @@ angular.module('oncokbStaticApp')
                     }).join(', ') : '';
                 }
                 scope.content = {
+                    currentQuery: '',
                     selectedGene: '',
                     loadingSearchResult: false
                 };
@@ -43,6 +44,7 @@ angular.module('oncokbStaticApp')
                 };
 
                 scope.searchKeyUp = function(query) {
+                    scope.content.currentQuery = query;
                     return api.blurSearch(query)
                         .then(function(resp) {
                             var result = resp;

app/scripts/directives/search-icon.js

@@ -17,11 +17,7 @@ angular.module('oncokbStaticApp')
                     hideRect: false
                 };
                 scope.mouseLeave = function() {
-                    // set timeout for the animation from css.
-                    // Time should be the same with the transition time
-                    $timeout(function() {
-                        scope.data.hideRect = false;
-                    }, 500);
+                    scope.data.hideRect = false;
                 };
             }
         };

app/scripts/directives/suggest-curation.js

@@ -0,0 +1,11 @@
+'use strict';
+angular.module('oncokbStaticApp')
+    .directive('suggestCuration', function() {
+        return {
+            templateUrl: 'views/suggestCuration.html',
+            restrict: 'E',
+            scope: {
+                suggestion: '='
+            }
+        };
+    });

app/styles/_searchBox.scss

@@ -1,28 +1,41 @@
+$border-radius: 5px;
+$padding: 6px 12px;
+$input-border: 1px solid #ccc;
+$box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+
 .search-box {
     input[type=search] {
         text-align: left;
         display: block;
         width: 100%;
         height: 50px;
-        padding: 6px 12px;
+        padding: $padding;
         font-size: 20px;
         line-height: 1.428571429;
         color: #555555;
         background: #fff none;
-        border: 1px solid #ccc;
-        border-radius: 5px;
-        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+        border: $input-border;
+        border-radius: $border-radius;
+        box-shadow: $box-shadow;
         margin-bottom: 0;
         transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
     }
     input[type=search]:focus {
         box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
         border-color: $secondary-color;
     }
-    input[type=search][aria-expanded=true] {
+    input[type=search][aria-expanded=true], input[type=search].no-result {
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
     }
+    .no-result-info {
+      background: white;
+      border-radius: 0 0 $border-radius $border-radius;
+      padding: $padding;
+      border: $input-border;
+      border-top: 0;
+      box-shadow: $box-shadow;
+    }
     .row {
         margin-bottom: 40px;
     }

app/views/cancerGenes.html

@@ -103,12 +103,7 @@
                                 </a>
                             </span>
                             <span ng-if="x.oncokbAnnotated === 'No'">
-                                <a
-                                    href="mailto:[email protected]?subject=Annotation suggestion for {{x.hugoSymbol}}&&body=Thank you for using the Cancer Gene Page feedback feature.%0A Please provide the following information for {{x.hugoSymbol}} curation:%0A%0AEvidence:%0APMIDs:%0AAbstracts:"
-                                    target="_blank"
-                                    title="suggest to annotate this gene"
-                                    qtip qtip-content="Suggest to annotate {{x.hugoSymbol}}" my="bottom center"
-                                    at="top center"><i class="fa fa-envelope-o" aria-hidden="true"></i></a>
+                                <suggest-curation suggestion="x.hugoSymbol"></suggest-curation>
                             </span>
                         </td>
                         <td header="'geneType.html'" filter="{geneType:'text'}" sortable="'geneType'">

app/views/searchBox.html

@@ -32,7 +32,10 @@
                     </div>
                     <i class="oncogenic-icon-image"
                        ng-class="getIconClass(match.model.oncogenicity, match.model.highestSensitiveLevel, match.model.highestResistanceLevel, match.model.vus)"/>
-                    <span class="no-annotation" ng-if="!match.model.variantExist">Not annotated by OncoKB</span>
+                    <span class="no-annotation" ng-if="!match.model.variantExist">
+                        <span>Not annotated by OncoKB</span>
+                        <suggest-curation suggestion="query"></suggest-curation>
+                    </span>
                 </div>
                 <div class="search-box-annotation">
                     <span ng-if="match.model.annotation">{{match.model.annotation}}</span>
@@ -60,17 +63,23 @@
     </div>
 </script>
 
-<div class="search-box">
-    <input type="search" class="form-control" placeholder="Search Gene / Alteration / Drug"
+<div class="search-box" ng-init="noResultMatched">
+    <input type="search" class="form-control" ng-class="noResultMatched ? 'no-result': ''" placeholder="Search Gene / Alteration / Drug"
            ng-model="content.selectedItem"
            typeahead-on-select="searchConfirmed($event)"
            uib-typeahead="item for item in searchKeyUp($viewValue)"
            typeahead-template-url="searchBoxTemplate.html"
            typeahead-wait-ms="200"
            typeahead-loading="content.loadingSearchResult"
            typeahead-min-length="2"
+           typeahead-no-results="noResultMatched"
     >
     <div class="loading" ng-if="content.loadingSearchResult">
         <i class="fa fa-spinner fa-spin fa-2x fa-fw"></i>
     </div>
+    <div ng-if="noResultMatched"
+         class="no-result-info">
+        <span>No result found, please send us an email if you would like {{content.currentQuery}} to be curated.</span>
+        <suggest-curation suggestion="content.currentQuery"></suggest-curation>
+    </div>
 </div>

app/views/suggestCuration.html

@@ -0,0 +1,8 @@
+<a
+    href="mailto:[email protected]?subject=Annotation suggestion for {{suggestion}}&&body=Thank you for using the feedback feature.%0APlease provide the following information for {{suggestion}} curation:%0A%0AEvidence:%0APMIDs:%0AAbstracts:"
+    target="_blank"
+    title="suggest to annotate this gene"
+    qtip qtip-content="Suggest to annotate {{suggestion}}" my="bottom center"
+    at="top center">
+    <i class="fa fa-envelope-o" aria-hidden="true"></i>
+</a>