for #63, add search function (only show when there are more than 10 l…

…evels
hds-lab · Mar 2, 2015 · 16f2872 · 16f2872
1 parent 949932a
commit 16f2872
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 9 deletions.
diff --git a/msgvis/static/SparQs/controllers.js b/msgvis/static/SparQs/controllers.js
@@ -218,6 +218,8 @@
             if (!Filtering.dimension.filter.is_empty()) {
                 if (Filtering.dimension.is_categorical()){
                     Filtering.dimension.filtered_all(false);
+                    if ( typeof(Filtering.dimension.search) != "undefined")
+                        Filtering.dimension.search.level = "";
                 }else{
                     Filtering.dimension.filter.reset();
                 }

diff --git a/msgvis/static/SparQs/services/dimensions_service.js b/msgvis/static/SparQs/services/dimensions_service.js
@@ -159,6 +159,7 @@
                     dimension.distribution = dimension.get_distribution_in_order(dimension.table, dimension.domain);
                     if ( dimension.is_categorical() ){
                         dimension.filter.levels(dimension.get_categorical_levels().slice(0, dimension.num_default_show));
+                        dimension.search = {level: ""}
                     }
                 },
                 get_distribution_in_order: function(table, domain) {
@@ -192,6 +193,16 @@
 
                     return distribution;
                 },
+                show_search: function(){
+                    return this.is_categorical() && this.domain && this.domain.length > 10;
+                },
+                unfilter_level: function(d){
+                    d.show = true;
+                    this.filter.levels().push(d.level);
+
+                    this.filter.dirty = true;
+
+                },
                 change_level: function(d){
                     if (d.show == true){
                         this.filter.levels().push(d.level);
@@ -234,6 +245,12 @@
                         dimension.filter.dirty = true;
                     }
                     return false;
+                },
+                reset_search: function(){
+                    var dimension = this;
+                    if ( dimension.is_categorical() ){
+                        dimension.search = {level: ""};
+                    }
                 }
             });
 

diff --git a/msgvis/static/sparqs.less b/msgvis/static/sparqs.less
@@ -467,6 +467,9 @@ body {
         &.form-buttons {
             margin-top: 6px;
         }
+        hr{
+            margin: 0.5em;
+        }
     }
 
     .form-error {
@@ -492,7 +495,7 @@ body {
     }
     .dimension-levels{
         height: 200px;
-        overflow-y: scroll;
+        overflow-y: auto;
 
     }
     .dimension-level{
@@ -531,11 +534,21 @@ body {
            fill: steelblue;
         }
     }
+    .selected-levels{
+        max-height: 200px;
+        max-width: 100%;
+        overflow-y: auto;
+        overflow-x: hidden;
+        padding: 0 5px;
+    }
     .dimension-level-filter{
         margin: 0px 3px;
         padding: 0px 3px;
         background-color: #555;
     }
+    .dimension-level-filter:hover{
+        cursor: pointer;
+    }
     .level-select-button-group{
         text-align: left;
     }
@@ -548,6 +561,18 @@ body {
     .level-select-button:disabled{
         color: #333;
     }
+    .search{
+        font-size: 0.5em;
+        text-align: left;
+        margin-top: 1.5em;
+    }
+    .search input{
+        color: black;
+        line-height: 0.5em;
+    }
+    .search .glyphicon-remove:hover{
+        cursor: pointer;
+    }
 
 }
 

diff --git a/msgvis/templates/explorer.html b/msgvis/templates/explorer.html
@@ -228,12 +228,12 @@ <h3>
                         </div>
 
                         <div class="form-group" ng-switch-when="CategoricalDimension">
-                            <!-- TODO: search
-                            <div class="search">
-                                <input type="text" />
+                            <div class="search" ng-show="filtering.dimension.show_search()">
+                                Search: <input type="text" ng-model="filtering.dimension.search.level" />
+                                <span class="glyphicon glyphicon-remove"
+                                      ng-show="filtering.dimension.search.level"
+                                      ng-click="filtering.dimension.reset_search()"   ></span>
                             </div>
-                            -->
-
                             <hr />
                             <div class="level-select-button-group">
                                 <button type=button class="level-select-button"
@@ -246,7 +246,7 @@ <h3>
 
 
                             <div class="dimension-levels">
-                                <div class=dimension-level ng-repeat="d in filtering.dimension.distribution">
+                                <div class=dimension-level ng-repeat="d in filtering.dimension.distribution | filter: filtering.dimension.search">
                                     <div class="level-name">
                                         <label><input type="checkbox" ng-model="d.show" ng-change="filtering.dimension.change_level(d)" /> {$ d.level $} </label>
                                     </div>
@@ -261,8 +261,11 @@ <h3>
                             </div>
                             <hr />
                             <div class="selected-levels">
-                                <strong>The following levels will be filtered out:</strong> <br />
-                                <span class=dimension-level-filter ng-repeat="d in filtering.dimension.distribution" ng-show="!d.show">
+                                <strong>Filter out levels:</strong> <br />
+                                <span class=dimension-level-filter
+                                      ng-repeat="d in filtering.dimension.distribution"
+                                      ng-click="filtering.dimension.unfilter_level(d)"
+                                      ng-show="!d.show">
                                     {$ d.level $}
                                 </span>