Add a search bar to the controllers

emperor/support_files/js/color-view-controller.js

@@ -140,13 +140,14 @@ define([
             attributes, scope.setPlottableAttributes, category);
 
           if (scaled) {
+            scope.$searchBar.prop('hidden', true);
             plottables = ColorViewController._nonNumericPlottables(
               uniqueVals, data);
             // Set SlickGrid for color of non-numeric values and show color bar
             // for rest if there are non numeric categories
             if (plottables.length > 0) {
               scope.setSlickGridDataset(
-                [{category: 'Non-numeric values', value: '#64655d',
+                [{id: 0, category: 'Non-numeric values', value: '#64655d',
                   plottables: plottables}]);
             }
             else {
@@ -156,6 +157,7 @@ define([
             scope.$colorScale.html(colorInfo[1]);
           }
           else {
+            scope.$searchBar.prop('hidden', false);
             scope.setSlickGridDataset(data);
             scope.$scaleDiv.hide();
           }
@@ -181,7 +183,8 @@ define([
     var ready = this.ready;
     this.ready = undefined;
 
-    this.$header.append(this.$colormapSelect);
+    // account for the searchbar
+    this.$colormapSelect.insertAfter(this.$select);
     this.$header.append(this.$scaled);
     this.$header.append(this.$scaledLabel);
     this.$body.prepend(this.$scaleDiv);
@@ -267,7 +270,8 @@ define([
    */
   ColorViewController.prototype.isColoringContinuous = function() {
     // the bodygrid can have at most one element (NA values)
-    return this.$scaled.is(':checked') && this.bodyGrid.getData().length <= 1;
+    return (this.$scaled.is(':checked') &&
+            this.getSlickGridDataset().length <= 1);
   };
 
   /**
@@ -510,7 +514,7 @@ define([
     var decompViewDict = this.getView();
     if (this.$scaled.is(':checked')) {
       // Get the current SlickGrid data and update with the saved color
-      data = this.bodyGrid.getData();
+      data = this.getSlickGridDataset();
       data[0].value = json.data['Non-numeric values'];
       this.setPlottableAttributes(
         decompViewDict, json.data['Non-numeric values'], data[0].plottables);

emperor/support_files/js/controller.js

@@ -680,11 +680,11 @@ define([
               name: 'Open in Vega Editor',
               callback: function(key, opts) {
                 scope.exportToVega();
-              },
+              }
             }
           }
-        },
-      },
+        }
+      }
     });
 
     // The context menu is only shown if there's a single right click. We
@@ -998,7 +998,7 @@ define([
     var payload = {
       mode: 'vega',
       renderer: 'canvas',
-      spec: JSON.stringify(spec),
+      spec: JSON.stringify(spec)
     };
     _postMessage(url, payload);
   };

emperor/support_files/js/sceneplotview3d.js

@@ -773,7 +773,7 @@ define([
       return;
     }
 
-    var element = this.renderer.domElement;
+    var element = this.renderer.domElement, scope = this;
     var offset = $(element).offset();
     this._mouse.x = ((event.clientX - offset.left) / element.width) * 2 - 1;
     this._mouse.y = -((event.clientY - offset.top) / element.height) * 2 + 1;

emperor/support_files/js/view-controller.js

@@ -174,8 +174,31 @@ define([
     this.$select = $('<select>');
     this.$header.append(this.$select);
 
+    this.$searchBar = $("<input type='search' " +
+                        "placeholder='Search for a value ...'>"
+    ).css({
+      'width': '100%'
+    });
+    this.$header.append(this.$searchBar);
+
     // there's a few attributes we can only set on "ready" so list them up here
     $(function() {
+      scope.$searchBar.tooltip({
+        content: 'No results found!',
+        disabled: true,
+        // place the element with a slight offset at the bottom of the input
+        // so that it doesn't overlap with the "continuous values" elements
+        position: {my: 'center top+40', at: 'center bottom',
+                   of: scope.$searchBar},
+        // prevent the tooltip from disappearing when there's no matches
+        close: function(event, ui) {
+          if (scope.bodyGrid.getDataLength() === 0 &&
+              scope.$searchBar.val() !== '') {
+            scope.$searchBar.tooltip('open');
+          }
+        }
+      });
+
       var placeholder = 'Select a ' + scope.title + ' Category';
 
       // setup the slick grid
@@ -308,7 +331,7 @@ define([
    * displayed by the body grid.
    */
   EmperorAttributeABC.prototype.getSlickGridDataset = function() {
-    return this.bodyGrid.getData();
+    return this.bodyGrid.getData().getItems();
   };
 
   /**
@@ -326,9 +349,9 @@ define([
     }
 
     // Re-render
-    this.bodyGrid.setData(data);
-    this.bodyGrid.invalidate();
-    this.bodyGrid.render();
+    this.bodyGrid.getData().beginUpdate();
+    this.bodyGrid.getData().setItems(data);
+    this.bodyGrid.getData().endUpdate();
   };
 
   /**
@@ -340,7 +363,7 @@ define([
    *
    */
   EmperorAttributeABC.prototype._buildGrid = function(options) {
-    var columns = [{id: 'field1', name: '', field: 'category'}];
+    var columns = [{id: 'field1', name: '', field: 'category'}], scope = this;
 
     // autoEdit enables one-click editor trigger on the entire grid, instead
     // of requiring users to click twice on a widget.
@@ -353,12 +376,52 @@ define([
       columns.unshift(options.slickGridColumn);
     }
 
+    var dataView = new Slick.Data.DataView(), searchString = '';
+
     /**
      * @type {Slick.Grid}
      * Container that lists the metadata categories described under the
      * metadata column and the attribute that can be modified.
      */
-    this.bodyGrid = new Slick.Grid(this.$gridDiv, [], columns, gridOptions);
+    this.bodyGrid = new Slick.Grid(this.$gridDiv, dataView, columns,
+                                   gridOptions);
+
+    this.$searchBar.on('input', function(e) {
+      dataView.refresh();
+
+      // show a message when no results are found
+      if (scope.bodyGrid.getDataLength() === 0 &&
+          scope.$searchBar.val() !== '') {
+        scope.$searchBar.tooltip('option', 'disabled', false);
+        scope.$searchBar.tooltip('open');
+      }
+      else {
+        scope.$searchBar.tooltip('option', 'disabled', true);
+        scope.$searchBar.tooltip('close');
+      }
+
+    });
+
+    function substringFilter(item, args) {
+      var val = scope.$searchBar.val();
+      if (!searchString && val &&
+         item.category.toLowerCase().indexOf(val.toLowerCase()) === -1) {
+        return false;
+      }
+      return true;
+    }
+
+    dataView.onRowCountChanged.subscribe(function(e, args) {
+      scope.bodyGrid.updateRowCount();
+      scope.bodyGrid.render();
+    });
+
+    dataView.onRowsChanged.subscribe(function(e, args) {
+      scope.bodyGrid.invalidateRows(args.rows);
+      scope.bodyGrid.render();
+    });
+
+    dataView.setFilter(substringFilter);
 
     // hide the header row of the grid
     // http://stackoverflow.com/a/29827664/379593
@@ -402,7 +465,7 @@ define([
     json.category = this.getMetadataField();
 
     // Convert SlickGrid list of objects to single object
-    var gridData = this.bodyGrid.getData();
+    var gridData = this.getSlickGridDataset();
     var jsonData = {};
     for (var i = 0; i < gridData.length; i++) {
       jsonData[gridData[i].category] = gridData[i].value;
@@ -488,6 +551,8 @@ define([
 
     this.$select.prop('disabled', !trulse).trigger('chosen:updated');
     this.bodyGrid.setOptions({editable: trulse});
+    this.$searchBar.prop('disabled', !trulse);
+    this.$searchBar.prop('hidden', !trulse);
   };
 
   /**

emperor/support_files/js/view.js

@@ -579,7 +579,7 @@ DecompositionView.prototype.flipVisibleDimension = function(index) {
 DecompositionView.prototype.setCategory = function(attributes,
                                                    setPlottableAttributes,
                                                    category) {
-  var scope = this, dataView = [], plottables;
+  var scope = this, dataView = [], plottables, i = 0;
 
   _.each(attributes, function(value, key) {
     /*
@@ -594,7 +594,9 @@ DecompositionView.prototype.setCategory = function(attributes,
       setPlottableAttributes(scope, value, plottables);
     }
 
-    dataView.push({category: key, value: value, plottables: plottables});
+    dataView.push({id: i, category: key, value: value,
+                   plottables: plottables});
+    i = i + 1;
   });
   this.needsUpdate = true;
 
@@ -853,7 +855,7 @@ DecompositionView.prototype._buildVegaSpec = function() {
     Ring: 'circle',
     Square: 'square',
     Icosahedron: 'cross',
-    Star: 'cross',
+    Star: 'cross'
   };
 
   function viewMarkersAsVegaDataset(markers) {
@@ -868,8 +870,8 @@ DecompositionView.prototype._buildVegaSpec = function() {
           color: rgbColor(marker.material.color),
           originalShape: marker.userData.shape,
           shape: getShape[marker.userData.shape],
-          scale: { x: marker.scale.x, y: marker.scale.y, },
-          opacity: marker.material.opacity,
+          scale: { x: marker.scale.x, y: marker.scale.y },
+          opacity: marker.material.opacity
         });
       }
     }
@@ -908,14 +910,14 @@ DecompositionView.prototype._buildVegaSpec = function() {
     padding: 5,
     background: scope.backgroundColor,
     config: {
-      axis: { labelColor: scope.axesColor, titleColor: scope.axesColor, },
-      title: { color: scope.axesColor, },
+      axis: { labelColor: scope.axesColor, titleColor: scope.axesColor },
+      title: { color: scope.axesColor }
     },
     title: 'Emperor PCoA',
     data: [
       {
         name: 'metadata',
-        values: plottablesAsMetadata(model.plottable, model.md_headers),
+        values: plottablesAsMetadata(model.plottable, model.md_headers)
       },
       {
         name: 'points', values: viewMarkersAsVegaDataset(scope.markers),
@@ -925,48 +927,48 @@ DecompositionView.prototype._buildVegaSpec = function() {
             from: 'metadata',
             key: model.md_headers[0],
             fields: ['id'],
-            as: ['metadata'],
+            as: ['metadata']
           }
-        ],
-      },
+        ]
+      }
     ],
     signals: [
       {
         name: 'width',
-        update: baseWidth + ' * ((' + rangeX[1] + ') - (' + rangeX[0] + '))',
+        update: baseWidth + ' * ((' + rangeX[1] + ') - (' + rangeX[0] + '))'
       },
       {
         name: 'height',
-        update: baseWidth + ' * ((' + rangeY[1] + ') - (' + rangeY[0] + '))',
-      },
+        update: baseWidth + ' * ((' + rangeY[1] + ') - (' + rangeY[0] + '))'
+      }
     ],
     scales: [
       { name: 'xScale', range: 'width', domain: [rangeX[0], rangeX[1]] },
       { name: 'yScale', range: 'height', domain: [rangeY[0], rangeY[1]] }
     ],
     axes: [
-      { orient: 'bottom', scale: 'xScale', title: model.axesLabels[axisX], },
-      { orient: 'left', scale: 'yScale', title: model.axesLabels[axisY], }
+      { orient: 'bottom', scale: 'xScale', title: model.axesLabels[axisX] },
+      { orient: 'left', scale: 'yScale', title: model.axesLabels[axisY] }
     ],
     marks: [
       {
         type: 'symbol',
         from: {data: 'points'},
         encode: {
           enter: {
-            fill: { field: 'color', },
-            x: { scale: 'xScale', field: 'x', },
-            y: { scale: 'yScale', field: 'y', },
-            shape: { field: 'shape', },
-            size: { signal: 'datum.scale.x * datum.scale.y * 100', },
-            opacity: { field: 'opacity', },
+            fill: { field: 'color' },
+            x: { scale: 'xScale', field: 'x' },
+            y: { scale: 'yScale', field: 'y' },
+            shape: { field: 'shape' },
+            size: { signal: 'datum.scale.x * datum.scale.y * 100' },
+            opacity: { field: 'opacity' }
           },
           update: {
-            tooltip: { signal: 'datum.metadata' },
-          },
-        },
-      },
-    ],
+            tooltip: { signal: 'datum.metadata' }
+          }
+        }
+      }
+    ]
   };
 };
 

emperor/support_files/templates/logic-template.html

@@ -43,6 +43,7 @@
   'slickgrid': '{{ base_url }}/vendor/js/slick.grid.min',
   'slickformatters': '{{ base_url }}/vendor/js/slick.editors.min',
   'slickeditors': '{{ base_url }}/vendor/js/slick.formatters.min',
+  'slickdataview': '{{ base_url }}/vendor/js/slick.dataview.min',
 
   /* Emperor's objects */
   'util': '{{ base_url }}/js/util',
@@ -94,7 +95,8 @@
     'deps': ['blob']
   },
   'slickcore': ['jqueryui'],
-  'slickgrid': ['slickcore', 'jquery_drag', 'slickformatters', 'slickeditors']
+  'slickgrid': ['slickcore', 'jquery_drag', 'slickformatters', 'slickeditors',
+                'slickdataview']
 }
 });
 

tests/javascript_tests/index.html

@@ -80,6 +80,7 @@
           'slickgrid': './vendor/js/slick.grid.min',
           'slickformatters': './vendor/js/slick.editors.min',
           'slickeditors': './vendor/js/slick.formatters.min',
+          'slickdataview': './vendor/js/slick.dataview.min',
 
           /* Emperor's objects */
           'animationdirector': './js/animate',
@@ -147,7 +148,7 @@
           },
           'slickcore': ['jqueryui'],
           'slickgrid': ['slickcore', 'jquery_drag', 'slickformatters',
-                        'slickeditors']
+                        'slickeditors', 'slickdataview']
           }
       });