Adding nulls toggle button to filters. Addresses #730

sandialabs · Jun 19, 2017 · 2a90606 · 2a90606
1 parent d1d523c
commit 2a90606
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 2 deletions.
diff --git a/web-server/plugins/slycat-parameter-image/css/ui.css b/web-server/plugins/slycat-parameter-image/css/ui.css
@@ -651,7 +651,8 @@ rights in this software.
 .slycat-pim-filter .invert-button,
 .slycat-pim-filter .select-all-button,
 .slycat-pim-filter .select-none-button,
-.slycat-pim-filter .auto-width-button
+.slycat-pim-filter .auto-width-button,
+.slycat-pim-filter .null-button
 {
   position: absolute;
 }
@@ -678,6 +679,10 @@ rights in this software.
   left: 65px;
   bottom: 7px;
 }
+.slycat-pim-filter .null-button {
+  bottom: 7px;
+  left: 7px;
+}
 .slycat-pim-filter .minMaxHighLow .max,
 .slycat-pim-filter .minMaxHighLow .min,
 .slycat-pim-filter .minMaxHighLow .high,

diff --git a/web-server/plugins/slycat-parameter-image/js/filter-manager.js b/web-server/plugins/slycat-parameter-image/js/filter-manager.js
@@ -102,6 +102,7 @@ define("slycat-parameter-image-filter-manager", ["slycat-server-root", "slycat-d
             .extend({ rateLimit: { timeout: 0, method: "notifyWhenChangesStop" } })
             ,
           autowidth: ko.observable(false),
+          nulls: ko.observable(false),
           order: ko.observable( variable_order.indexOf(index) ) 
         });
       };
@@ -121,6 +122,7 @@ define("slycat-parameter-image-filter-manager", ["slycat-server-root", "slycat-d
           low: low,
           invert: ko.observable(false),
           active: ko.observable(false),
+          nulls: ko.observable(false),
           order: ko.observable( variable_order.indexOf(index) ),
           rateLimitedHigh: ko.pureComputed(high).extend({ rateLimit: { timeout: rateLimit, method: "notifyWhenChangesStop" } }),
           rateLimitedLow: ko.pureComputed(low).extend({ rateLimit: { timeout: rateLimit, method: "notifyWhenChangesStop" } }),
@@ -284,6 +286,17 @@ define("slycat-parameter-image-filter-manager", ["slycat-server-root", "slycat-d
           }
           self.bookmarker.updateState( {"allFilters" : mapping.toJS(vm.allFilters())} );
         };
+        vm.toggleNull = function(filter, event) {
+          if(filter.nulls())
+          {
+            filter.nulls(false);
+          }
+          else
+          {
+            filter.nulls(true);
+          }
+          self.bookmarker.updateState( {"allFilters" : mapping.toJS(vm.allFilters())} );
+        };
         vm.invertFilter = function(filter, event) {
           if(filter.type() === 'numeric')
           {

diff --git a/web-server/plugins/slycat-parameter-image/ui.html b/web-server/plugins/slycat-parameter-image/ui.html
@@ -173,6 +173,13 @@
                 css: { 'fa-compress': invert(), 'fa-arrows-v': !invert() }
               "
             ></i>
+            <i class="fa fa-ban fa-flip-horizontal null-button button" 
+              data-bind="
+                click: $parent.toggleNull,
+                attr: { title: nulls() ? 'Hide nulls' : 'Show nulls' },
+                style: { color: nulls() ? 'black' : 'gray' },
+              "
+            ></i>
           </div>
         <!-- /ko -->
         <!-- ko if: type() === 'category' -->
@@ -191,7 +198,7 @@
                     model_id: $parent.model_id
                     "></slycat-category-select>
             <i class="fa fa-times close-button button" title="Close filter" data-bind="click: $parent.removeFilter"></i>
-            <i class="fa auto-width-button button" title="Close filter" 
+            <i class="fa auto-width-button button"
               data-bind="
                 click: $parent.toggleAutoWidth, 
                 css: { 'fa-chevron-left': autowidth(), 'fa-chevron-right': !autowidth() },
@@ -211,6 +218,13 @@
                 css: { 'active': false }
               "
             ></i>
+            <i class="fa fa-ban fa-flip-horizontal null-button button" 
+              data-bind="
+                click: $parent.toggleNull,
+                attr: { title: nulls() ? 'Hide nulls' : 'Show nulls' },
+                style: { color: nulls() ? 'black' : 'gray' },
+              "
+            ></i>
           </div>
         <!-- /ko -->
       </div>