Merge pull request #162 from quantopian/page_size

Fix issue where qgrid would prevent all other jupyterlab widgets from working

Author: TimShawver

js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qgrid",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "An Interactive Grid for Sorting and Filtering DataFrames in Jupyter Notebook",
   "author": "Quantopian Inc.",
   "main": "src/index.js",

js/src/index.js

@@ -1,12 +1,4 @@
 // Entry point for the notebook bundle containing custom model definitions.
-//
-// Setup notebook base URL
-//
-// Some static assets may be required by the custom widget javascript. The base
-// url for the notebook is not known at build time and is therefore computed
-// dynamically.
-__webpack_public_path__ = document.querySelector('body').getAttribute('data-base-url') + 'nbextensions/qgrid/';
-
 // Export widget models and views, and the npm package version number.
 module.exports = require('./qgrid.widget.js');
 module.exports.version = require('../package.json').version;

js/src/qgrid.booleanfilter.js

@@ -79,6 +79,7 @@ class BooleanFilter extends filter_base.FilterBase {
   reset_filter() {
     this.radio_buttons.prop('checked', false);
     this.selected = null;
+    this.send_filter_changed();
   }
 
   get_filter_info() {

js/src/qgrid.css

@@ -284,8 +284,8 @@
 }
 
 .q-grid .slick-cell {
-  border-bottom: 1px solid #e1e8ed !important;
-  border-right: none !important;
+  border-bottom: 1px solid #e1e8ed;
+  border-right: none;
   border-top: 1px solid transparent;
   border-left: 1px solid transparent;
   font-size: 13px;
@@ -294,6 +294,32 @@
   padding-left: 0px;
 }
 
+.q-grid.highlight-selected-row .slick-cell.selected {
+  background-color: #deeaf7;
+}
+
+.q-grid.highlight-selected-cell .slick-cell.active {
+  border: 2px solid rgb(65, 165, 245);
+  padding-top: 2px;
+  padding-bottom: 1px;
+  padding-left: 3px;
+}
+
+.q-grid .slick-cell.editable:not(.idx-col) {
+  border: 2px solid rgb(65, 165, 245);
+  padding-top: 2px;
+  padding-bottom: 1px;
+  padding-left: 3px !important;
+  background-color: #FFF;
+  -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.4);
+  -moz-box-shadow: 0 2px 5px rgba(0,0,0,0.4);
+  box-shadow: 0 2px 5px rgba(0,0,0,0.4);
+}
+
+.q-grid .slick-cell.editable .editor-select:focus {
+  outline-style: none;
+}
+
 .q-grid .slick-cell.idx-col {
   font-weight: bold;
 }
@@ -304,7 +330,7 @@
 }
 
 .q-grid .slick-cell.selected {
-  background-color: #deeaf7;
+  background-color: transparent;
 }
 
 /* Filter button */
@@ -605,18 +631,6 @@ input.bool-filter-radio {
   margin-left: -23px;
 }
 
-.slick-cell.editable:not(.idx-col) {
-  background-color: rgb(255, 247, 141) !important;
-  border: 1px solid rgba(0, 0, 0, 0.26) !important;
-  margin-top: -1px;
-  padding-top: 4px;
-  padding-bottom: 2px;
-}
-
-.slick-cell.editable:not(:last-child):not(.idx-col) {
-  margin-right: 3px;
-}
-
 .slick-cell {
   -webkit-touch-callout: none; /* iOS Safari */
     -webkit-user-select: none; /* Safari */
@@ -627,6 +641,5 @@ input.bool-filter-radio {
 }
 
 .slick-row .slick-cell:not(:first-child) {
-  margin-left: -4px;
   padding-left: 4px;
 }

js/src/qgrid.datefilter.js

@@ -51,6 +51,7 @@ class DateFilter extends filter_base.FilterBase {
 
     this.filter_start_date = null;
     this.filter_end_date = null;
+    this.send_filter_changed();
   }
 
   initialize_controls() {

js/src/qgrid.editors.js

@@ -16,11 +16,11 @@ class IndexEditor {
     this.$cell.tooltip();
     this.$cell.tooltip('enable');
     this.$cell.tooltip("open");
-    this.$cell.off('tooltipclose');
-    this.$cell.on("tooltipclose", (event, ui) => {
+    // automatically hide it after 4 seconds
+    setTimeout((event, ui) => {
       this.$cell.tooltip('destroy');
       args.cancelChanges();
-    });
+    }, 3000);
   }
 
   destroy() {}

js/src/qgrid.filterbase.js

@@ -152,10 +152,10 @@ class FilterBase {
 
   initialize_controls() {
     this.filter_elem.find("a.reset-link").click(
-        (e) => this.handle_reset_filter_clicked(e)
+        (e) => this.reset_filter()
     );
     this.filter_elem.find("i.close-button").click(
-        (e) => this.handle_close_button_clicked(e)
+        (e) => this.hide_filter()
     );
     $(document.body).bind("mousedown",
         (e) => this.handle_body_mouse_down(e)
@@ -180,22 +180,6 @@ class FilterBase {
     this.widget_model.send(msg);
   }
 
-  handle_reset_filter_clicked(e) {
-    this.reset_filter();
-    this.send_filter_changed();
-    // The "false" parameter tells backtest_table_manager that we want to recalculate the min/max values for this filter
-    // based on the rows that are still included in the grid.  This is because if this filter was already active,
-    // its min/max could be out-of-date because we don't adjust the min/max on active filters (to prevent confusion).
-    // This is currently the only filter_changed case where it's appropriate to have this filter's min/max recalculated,
-    // because you wouldn't want to adjust a slider's min/max while the user was moving the slider, for example.
-    return false;
-  }
-
-  handle_close_button_clicked(e) {
-    this.hide_filter();
-    return false;
-  }
-
   handle_body_mouse_down(e) {
     if (this.filter_elem && this.filter_elem[0] != e.target && !$.contains(this.filter_elem[0], e.target) &&
         !$.contains(this.filter_btn[0], e.target) &&

js/src/qgrid.sliderfilter.js

@@ -100,6 +100,7 @@ class SliderFilter extends filter_base.FilterBase {
       });
       this.set_value(this.min_value, this.max_value);
     }
+    this.send_filter_changed();
   }
 
   is_active() {

js/src/qgrid.textfilter.js

@@ -355,11 +355,20 @@ class TextFilter extends filter_base.FilterBase {
   }
 
   reset_filter() {
+    this.ignore_selection_changed = true;
     this.search_string = "";
     this.excluded_rows = null;
     this.security_search.val("");
     this.row_selection_model.setSelectedRows([]);
     this.filter_list = null;
+    this.send_filter_changed();
+    var msg = {
+      'type': 'get_column_min_max',
+      'field': this.field,
+      'search_val': this.search_string
+    };
+    this.widget_model.send(msg);
+    this.ignore_selection_changed = false;
   }
 
   get_filter_info() {

js/src/qgrid.widget.js

@@ -36,8 +36,8 @@ class QgridModel extends widgets.DOMWidgetModel {
       _view_name : 'QgridView',
       _model_module : 'qgrid',
       _view_module : 'qgrid',
-      _model_module_version : '^1.0.0',
-      _view_module_version : '^1.0.0',
+      _model_module_version : '^1.0.1',
+      _view_module_version : '^1.0.1',
       _df_json: '',
       _columns: {}
     });
@@ -370,6 +370,16 @@ class QgridView extends widgets.DOMWidgetView {
       this.grid_elem.addClass('force-fit-columns');
     }
 
+    if (this.grid_options.highlightSelectedCell) {
+      this.grid_elem.addClass('highlight-selected-cell');
+    }
+
+    // compare to false since we still want to show row
+    // selection if this option is excluded entirely
+    if (this.grid_options.highlightSelectedRow != false) {
+      this.grid_elem.addClass('highlight-selected-row');
+    }
+
     setTimeout(() => {
       this.slick_grid.init();
       this.update_size();
@@ -378,12 +388,16 @@ class QgridView extends widgets.DOMWidgetView {
     this.slick_grid.setSelectionModel(new Slick.RowSelectionModel());
     this.slick_grid.render();
 
-    this.slick_grid.onHeaderCellRendered.subscribe((e, args) => {
+    var render_header_cell = (e, args) => {
       var cur_filter = this.filters[args.column.id];
-      if (cur_filter){
-        cur_filter.render_filter_button($(args.node), this.slick_grid);
-      }
-    });
+        if (cur_filter) {
+          cur_filter.render_filter_button($(args.node), this.slick_grid);
+        }
+    };
+
+    if (this.grid_options.filterable != false) {
+      this.slick_grid.onHeaderCellRendered.subscribe(render_header_cell);
+    }
 
     // Force the grid to re-render the column headers so the
     // onHeaderCellRendered event is triggered.
@@ -396,7 +410,7 @@ class QgridView extends widgets.DOMWidgetView {
     this.slick_grid.setSortColumns([]);
 
     this.grid_header = this.$el.find('.slick-header-columns');
-    this.grid_header.click((e) => {
+    var handle_header_click = (e) => {
       if (this.resizing_column) {
         return;
       }
@@ -436,7 +450,11 @@ class QgridView extends widgets.DOMWidgetView {
         'sort_ascending': this.sort_ascending
       };
       this.send(msg);
-    });
+    };
+
+    if (this.grid_options.sortable != false) {
+      this.grid_header.click(handle_header_click)
+    }
 
     this.slick_grid.onViewportChanged.subscribe((e) => {
       if (this.viewport_timeout){
@@ -491,6 +509,18 @@ class QgridView extends widgets.DOMWidgetView {
     }, 1);
   }
 
+  processPhosphorMessage(msg) {
+    super.processPhosphorMessage(msg)
+    switch (msg.type) {
+    case 'resize':
+    case 'after-show':
+      if (this.slick_grid){
+        this.slick_grid.resizeCanvas();
+      }
+      break;
+    }
+  }
+
   has_active_filter() {
     for (var i=0; i < this.filter_list.length; i++){
       var cur_filter = this.filter_list[i];