From 2971b2f4496160a9c9f4341fe6e25a90d2977952 Mon Sep 17 00:00:00 2001
From: Sid Joshi <sidjoshi@hotmail.ca>
Date: Fri, 6 Jan 2017 13:36:48 -0500
Subject: [PATCH 1/4] Search bar

---
 dcc-portal-ui/app/scripts/facets/views/terms.html | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/dcc-portal-ui/app/scripts/facets/views/terms.html b/dcc-portal-ui/app/scripts/facets/views/terms.html
index da7c673fa..450edf5a1 100644
--- a/dcc-portal-ui/app/scripts/facets/views/terms.html
+++ b/dcc-portal-ui/app/scripts/facets/views/terms.html
@@ -7,6 +7,12 @@
         <span data-ng-if="actives.length" class="t_facets__facet__terms__inactive__reset t_tools">
             <span data-ng-click="removeFacet()" class="t_tools__tool"><i class="icon-undo"></i></span>
         </span>
+        <span class="pull-right" data-ng-show="(inactives.length > 5 || actives.length > 5) && !collapsed">
+            <span data-ng-click="showSearch = !showSearch" class="t_tools__tool"><i class="icon-search"></i></span>
+        </span>
+    </li>
+    <li class="t_facets__facet__search" data-ng-if="showSearch">
+        <input type="search" placeholder="Search for {{label}}" ng-model="search">
     </li>
     <li class="t_facets__facet__terms">
         <ul class="t_facets__facet__terms__active">

From a6c49ec1f055c24a0d98a7dbdcc2b468c6ee2433 Mon Sep 17 00:00:00 2001
From: Sid Joshi <sidjoshi@hotmail.ca>
Date: Fri, 6 Jan 2017 15:43:55 -0500
Subject: [PATCH 2/4] style change for search input, search icon.

---
 dcc-portal-ui/app/scripts/facets/js/terms.js    |  5 ++++-
 .../app/scripts/facets/styles/_facets.scss      | 15 +++++++++++++++
 .../app/scripts/facets/views/terms.html         | 17 ++++++++++++-----
 3 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/dcc-portal-ui/app/scripts/facets/js/terms.js b/dcc-portal-ui/app/scripts/facets/js/terms.js
index b7909d885..335c3de97 100644
--- a/dcc-portal-ui/app/scripts/facets/js/terms.js
+++ b/dcc-portal-ui/app/scripts/facets/js/terms.js
@@ -180,7 +180,10 @@
         iconGetter: '&iconGetter',
         showWhenEmpty: '<',
 
-        resetPaginationOnChange: '<'
+        resetPaginationOnChange: '<',
+
+        //Search Config
+        searchIconShowLimit : '@'
       },
       transclude: true,
       templateUrl: '/scripts/facets/views/terms.html',
diff --git a/dcc-portal-ui/app/scripts/facets/styles/_facets.scss b/dcc-portal-ui/app/scripts/facets/styles/_facets.scss
index c6d6c5ccd..583c6f484 100644
--- a/dcc-portal-ui/app/scripts/facets/styles/_facets.scss
+++ b/dcc-portal-ui/app/scripts/facets/styles/_facets.scss
@@ -21,10 +21,25 @@ $foregroundRed: #ff654b;
     size: 1.1rem;
     weight: 300;
   }
+
+  .t_facets_facet_search_icon{
+    i{
+      font-size: 1.5rem;
+    }
+  }
+
+  .t_facets__facet__search{
+    input{
+      font-size: 1rem;
+    }
+  }
 }
 
 .t_facets__facet__title_active {
   border-left-color: $orangeLight;
+  .t_facets_facet_search_icon{
+    margin-right: -.5rem;
+  }
 }
 
 .t_facets__facet__title__label {
diff --git a/dcc-portal-ui/app/scripts/facets/views/terms.html b/dcc-portal-ui/app/scripts/facets/views/terms.html
index 450edf5a1..93cd5ef22 100644
--- a/dcc-portal-ui/app/scripts/facets/views/terms.html
+++ b/dcc-portal-ui/app/scripts/facets/views/terms.html
@@ -7,12 +7,19 @@
         <span data-ng-if="actives.length" class="t_facets__facet__terms__inactive__reset t_tools">
             <span data-ng-click="removeFacet()" class="t_tools__tool"><i class="icon-undo"></i></span>
         </span>
-        <span class="pull-right" data-ng-show="(inactives.length > 5 || actives.length > 5) && !collapsed">
+        <span class="t_tools t_facets_facet_search_icon" 
+            data-ng-show="((inactives.length > (searchIconShowLimit || 5)) || (actives.length > (searchIconShowLimit || 5))) && !collapsed">
             <span data-ng-click="showSearch = !showSearch" class="t_tools__tool"><i class="icon-search"></i></span>
         </span>
+        <div class="t_facets__facet__search t_facets__facet__input" data-ng-show="showSearch && !collapsed">
+            <input class="t_input__block" type="search" placeholder="Search for {{label}}" ng-model="searchQuery">
+            <i class="t_suggest__embedded t_suggest__embedded__right t_suggest__embedded__clear icon-cancel"
+                data-ng-click="searchQuery = ''"
+                data-ng-show="searchQuery"></i>
+        </div>
     </li>
-    <li class="t_facets__facet__search" data-ng-if="showSearch">
-        <input type="search" placeholder="Search for {{label}}" ng-model="search">
+    <li class="t_facets__facet__search" data-ng-show="showSearch">
+        
     </li>
     <li class="t_facets__facet__terms">
         <ul class="t_facets__facet__terms__active">
@@ -47,7 +54,7 @@
         </ul>
 
         <ul data-ng-hide="collapsed || inactives.length == 0" class="t_facets__facet__terms__inactive">
-            <li data-ng-repeat="item in inactives | limitTo: (collapsed? 0 : displayLimit)"
+            <li data-ng-repeat="item in inactives | filter: searchQuery | limitTo: (collapsed? 0 : displayLimit)"
                 class="t_facets__facet__terms__inactive__term">
 
                 <span data-ng-hide="hideCount" data-ng-style="bar(item.count)" class="t_facets__facet__terms__inactive__term__bar"></span>
@@ -64,7 +71,7 @@
                 <span data-ng-if="hideCount" class="t_facets__facet__terms__inactive__term__count t_facets__facet__term__na">{{hideText}}</span>
 
             </li>
-            <li data-ng-show="inactives.length > displayLimit || expanded" class="t_sh__toggle">
+            <li data-ng-show="(inactives | filter: searchQuery).length > displayLimit || expanded" class="t_sh__toggle">
                 <a data-ng-click="toggle()" href="" class="t_tools__tool">
                   <span>
                      <i class="{{ expanded? 'icon-caret-up': 'icon-caret-down' }}"></i>

From 36b855f8d646727786c07074aa703badb6578eae Mon Sep 17 00:00:00 2001
From: Sid Joshi <sidjoshi@hotmail.ca>
Date: Fri, 6 Jan 2017 15:52:58 -0500
Subject: [PATCH 3/4] condition change

---
 dcc-portal-ui/app/scripts/facets/views/terms.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/dcc-portal-ui/app/scripts/facets/views/terms.html b/dcc-portal-ui/app/scripts/facets/views/terms.html
index 93cd5ef22..bcce14f17 100644
--- a/dcc-portal-ui/app/scripts/facets/views/terms.html
+++ b/dcc-portal-ui/app/scripts/facets/views/terms.html
@@ -8,7 +8,7 @@
             <span data-ng-click="removeFacet()" class="t_tools__tool"><i class="icon-undo"></i></span>
         </span>
         <span class="t_tools t_facets_facet_search_icon" 
-            data-ng-show="((inactives.length > (searchIconShowLimit || 5)) || (actives.length > (searchIconShowLimit || 5))) && !collapsed">
+            data-ng-show="(inactives.length > (searchIconShowLimit || 5)) && !collapsed">
             <span data-ng-click="showSearch = !showSearch" class="t_tools__tool"><i class="icon-search"></i></span>
         </span>
         <div class="t_facets__facet__search t_facets__facet__input" data-ng-show="showSearch && !collapsed">

From 2479839897226f6105facf5152853d808c9f5158 Mon Sep 17 00:00:00 2001
From: Sid Joshi <sidjoshi@hotmail.ca>
Date: Fri, 6 Jan 2017 17:04:08 -0500
Subject: [PATCH 4/4] code review changes

---
 .../advanced/views/advanced.facets.genes.html      |  2 +-
 .../advanced/views/advanced.facets.mutations.html  |  2 +-
 dcc-portal-ui/app/scripts/facets/js/terms.js       |  1 +
 .../app/scripts/facets/styles/_facets.scss         |  2 +-
 dcc-portal-ui/app/scripts/facets/views/terms.html  | 14 +++++++-------
 dcc-portal-ui/app/scripts/ui/js/table.js           |  2 +-
 6 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/dcc-portal-ui/app/scripts/advanced/views/advanced.facets.genes.html b/dcc-portal-ui/app/scripts/advanced/views/advanced.facets.genes.html
index c27db5f95..e718bba65 100644
--- a/dcc-portal-ui/app/scripts/advanced/views/advanced.facets.genes.html
+++ b/dcc-portal-ui/app/scripts/advanced/views/advanced.facets.genes.html
@@ -48,5 +48,5 @@ <h3 data-ng-if="!AdvancedCtrl.Gene.genes" class="loading loading-icon">
     </li>
 
     <li data-location-facet data-type="gene" data-facet-name="location" data-label="{{'Location' | translate}}"
-        data-placeholder="{{'Enter gene location' | translate}}" data-example="{{'e.g. chr12:43566-3457633' | translate}}"></li>
+        data-placeholder="{{'e.g. chr12:43566-3457633' | translate}}"></li>
 </ul>
diff --git a/dcc-portal-ui/app/scripts/advanced/views/advanced.facets.mutations.html b/dcc-portal-ui/app/scripts/advanced/views/advanced.facets.mutations.html
index 7dcf4689b..191a564b8 100644
--- a/dcc-portal-ui/app/scripts/advanced/views/advanced.facets.mutations.html
+++ b/dcc-portal-ui/app/scripts/advanced/views/advanced.facets.mutations.html
@@ -34,6 +34,6 @@
            data-facet="AdvancedCtrl.Mutation.mutations.facets.verificationStatus"></terms>
 
     <li data-location-facet data-type="mutation" data-facet-name="location" data-label="{{'Location' | translate}}"
-        data-placeholder="{{'Enter mutation location' | translate}}" data-example="{{'e.g. chr12:43566-3457633' | translate}}"></li>
+        data-placeholder="{{'e.g. chr12:43566-3457633' | translate}}" ></li>
 </ul>
 
diff --git a/dcc-portal-ui/app/scripts/facets/js/terms.js b/dcc-portal-ui/app/scripts/facets/js/terms.js
index 335c3de97..ca2eb73b7 100644
--- a/dcc-portal-ui/app/scripts/facets/js/terms.js
+++ b/dcc-portal-ui/app/scripts/facets/js/terms.js
@@ -24,6 +24,7 @@
     function ($scope, $filter, Facets, HighchartsService, ProjectCache, ValueTranslator, LocationService) {
  
       $scope.resetPaginationOnChange = _.isUndefined($scope.resetPaginationOnChange) ? true : $scope.resetPaginationOnChange;  
+      $scope.search = {};
 
     // Translation on UI is slow, do in here
     function addTranslations (terms, facetName, missingText) {
diff --git a/dcc-portal-ui/app/scripts/facets/styles/_facets.scss b/dcc-portal-ui/app/scripts/facets/styles/_facets.scss
index 583c6f484..a5122b453 100644
--- a/dcc-portal-ui/app/scripts/facets/styles/_facets.scss
+++ b/dcc-portal-ui/app/scripts/facets/styles/_facets.scss
@@ -332,5 +332,5 @@ $togglerFontSize: 10px;
 }
 
 .t_facet_location_search{
-  margin: 0px 0px 10px 0px;
+  margin: 10px 0px 10px 0px;
 }
\ No newline at end of file
diff --git a/dcc-portal-ui/app/scripts/facets/views/terms.html b/dcc-portal-ui/app/scripts/facets/views/terms.html
index bcce14f17..f252e77fa 100644
--- a/dcc-portal-ui/app/scripts/facets/views/terms.html
+++ b/dcc-portal-ui/app/scripts/facets/views/terms.html
@@ -11,11 +11,11 @@
             data-ng-show="(inactives.length > (searchIconShowLimit || 5)) && !collapsed">
             <span data-ng-click="showSearch = !showSearch" class="t_tools__tool"><i class="icon-search"></i></span>
         </span>
-        <div class="t_facets__facet__search t_facets__facet__input" data-ng-show="showSearch && !collapsed">
-            <input class="t_input__block" type="search" placeholder="Search for {{label}}" ng-model="searchQuery">
+        <div class="t_facets__facet__search t_facets__facet__input" data-ng-if="showSearch && !collapsed">
+            <input class="t_input__block" type="search" placeholder="Filter values" ng-model="search.query" autofocus>
             <i class="t_suggest__embedded t_suggest__embedded__right t_suggest__embedded__clear icon-cancel"
-                data-ng-click="searchQuery = ''"
-                data-ng-show="searchQuery"></i>
+                data-ng-click="search.query = ''"
+                data-ng-show="search.query"></i>
         </div>
     </li>
     <li class="t_facets__facet__search" data-ng-show="showSearch">
@@ -54,7 +54,7 @@
         </ul>
 
         <ul data-ng-hide="collapsed || inactives.length == 0" class="t_facets__facet__terms__inactive">
-            <li data-ng-repeat="item in inactives | filter: searchQuery | limitTo: (collapsed? 0 : displayLimit)"
+            <li data-ng-repeat="item in inactives | filter: search.query | limitTo: (collapsed? 0 : displayLimit)"
                 class="t_facets__facet__terms__inactive__term">
 
                 <span data-ng-hide="hideCount" data-ng-style="bar(item.count)" class="t_facets__facet__terms__inactive__term__bar"></span>
@@ -71,11 +71,11 @@
                 <span data-ng-if="hideCount" class="t_facets__facet__terms__inactive__term__count t_facets__facet__term__na">{{hideText}}</span>
 
             </li>
-            <li data-ng-show="(inactives | filter: searchQuery).length > displayLimit || expanded" class="t_sh__toggle">
+            <li data-ng-show="(inactives | filter: search.query).length > displayLimit || expanded" class="t_sh__toggle">
                 <a data-ng-click="toggle()" href="" class="t_tools__tool">
                   <span>
                      <i class="{{ expanded? 'icon-caret-up': 'icon-caret-down' }}"></i>
-                     {{ expanded? "less" : (inactives.length - displayLimit) + " more" }}
+                     {{ expanded? "less" : ((inactives | filter: search.query).length - displayLimit) + " more" }}
                   </span>
                 </a>
             </li>
diff --git a/dcc-portal-ui/app/scripts/ui/js/table.js b/dcc-portal-ui/app/scripts/ui/js/table.js
index 31ccfb0dc..bcce35424 100644
--- a/dcc-portal-ui/app/scripts/ui/js/table.js
+++ b/dcc-portal-ui/app/scripts/ui/js/table.js
@@ -361,7 +361,7 @@ angular.module('icgc.ui.table.filter', [])
         class: '@'
       },
       template: '<span class="t_suggest t_suggest__header table-filter {{class}}">' +
-        '<input type="text" class="t_suggest__input form-control" placeholder="' + gettextCatalog.getString('Table filter') + 
+        '<input type="text" class="t_suggest__input form-control" placeholder="' + gettextCatalog.getString('Filter table') + 
         '" data-ng-change="currentPage = 1;" data-ng-model="filterModel" />' + 
         '<i class="t_suggest__embedded t_suggest__embedded__left t_suggest__embedded__search icon-search">' +
         '</i>'+