Merge pull request #203 from quantopian/object-display

1.0.6 beta 6
quantopian · Jun 14, 2018 · 4a6bdd5 · 4a6bdd5
2 parents 19e135e + 5b9ffe0
commit 4a6bdd5
Show file tree

Hide file tree

Showing 7 changed files with 300 additions and 48 deletions.
diff --git a/js/package.json b/js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "qgrid",
-  "version": "1.0.5",
+  "version": "1.0.6-beta.6",
   "description": "An Interactive Grid for Sorting and Filtering DataFrames in Jupyter Notebook",
   "author": "Quantopian Inc.",
   "main": "src/index.js",

diff --git a/js/src/qgrid.css b/js/src/qgrid.css
@@ -186,7 +186,8 @@
   border-right: none;
 }
 
-.q-grid .slick-header-columns {
+.q-grid .slick-header-columns,
+.text-filter-grid .slick-header-columns {
   background: none;
   background-color: rgb(245, 245, 245);
   border-bottom: none;
@@ -286,12 +287,12 @@
 .q-grid .slick-cell {
   border-bottom: 1px solid #e1e8ed;
   border-right: none;
-  border-top: 1px solid transparent;
   border-left: 1px solid transparent;
   font-size: 13px;
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  padding-top: 3px;
   padding-left: 0px;
+  padding-top: 4px;
+  border-top: none;
 }
 
 .q-grid.highlight-selected-row .slick-cell.selected {
@@ -322,11 +323,69 @@
 
 .q-grid .slick-cell.idx-col {
   font-weight: bold;
+  margin-right: 3px;
+}
+
+.q-grid .slick-cell.idx-col.last-idx-col {
+  border-right: 1px solid rgb(225, 232, 237);
+}
+
+.q-grid .slick-cell.idx-col:not(.first-idx-col) {
+  font-weight: bold;
+  border-left: 1px solid rgb(225, 232, 237);
+  margin-right: 3px;
+}
+
+.q-grid .idx-col.group-top {
+  border-bottom-color: transparent;
+  background-color: #FFF;
+}
+
+.q-grid .idx-col.group-middle {
+  border-top-color: transparent;
+  border-bottom-color: transparent;
+  color: transparent;
+  background-color: #FFF;
+}
+
+.q-grid .idx-col.group-bottom {
+  border-top-color: transparent;
+  color: transparent;
+  background-color: #FFF;
+}
+
+.q-grid .idx-col.group-single {
+  background-color: transparent;
 }
 
 .q-grid .slick-cell.l0.r0 {
   border-left: none;
   padding-left: 6px;
+  z-index: 85;
+}
+
+.q-grid .slick-cell.l1.r1 {
+  z-index: 86;
+}
+
+.q-grid .slick-cell.l2.r2 {
+  z-index: 87;
+}
+
+.q-grid .slick-cell.l3.r3 {
+  z-index: 88;
+}
+
+.q-grid .slick-cell.l4.r4 {
+  z-index: 89;
+}
+
+.q-grid .slick-cell.l5.r5 {
+  z-index: 90;
+}
+
+.q-grid .slick-cell.editable {
+  z-index: 91 !important;
 }
 
 .q-grid .slick-cell.selected {
@@ -577,7 +636,7 @@
   z-index: 9999 !important;
 }
 
-#ui-datepicker-div .ui-datepicker {
+#ui-datepicker-div.ui-datepicker {
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   /*@include box-shadow(0 5px 10px rgba(0, 0, 0, 0.2))*/
   z-index: 99 !important;
@@ -586,6 +645,27 @@
   border: 1px solid gray;
 }
 
+#ui-datepicker-div.ui-datepicker .ui-icon {
+  display: inline-block;
+  font: normal normal normal 14px/1 FontAwesome;
+  font-size: inherit;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-indent: 0px;
+  margin-left: -4px;
+  margin-top: -6px;
+  background-image: none;
+}
+
+#ui-datepicker-div.ui-datepicker .ui-icon-circle-triangle-w:before {
+    content: "\f053";
+}
+
+#ui-datepicker-div.ui-datepicker .ui-icon-circle-triangle-e:before {
+    content: "\f054";
+}
+
 
 /* from slickgrid editing example */
 input.editor-text {
@@ -641,5 +721,6 @@ input.bool-filter-radio {
 }
 
 .slick-row .slick-cell:not(:first-child) {
-  padding-left: 4px;
+  padding-left: 5px;
+  margin-left: -4px;
 }
diff --git a/js/src/qgrid.datefilter.js b/js/src/qgrid.datefilter.js
@@ -83,14 +83,14 @@ class DateFilter extends filter_base.FilterBase {
         var end_date_string = this.end_date_control.val();
 
         var start_date = new Date(start_date_string);
+        var end_date = new Date(end_date_string);
 
-        // use the last millisecond of the end_date (1000ms * 60s * 60m * 24h)
-        var end_date = new Date(
-            (new Date(end_date_string).getTime()) + (1000 * 60 * 60 * 24) - 1
-        );
+        start_date = Date.UTC(start_date.getUTCFullYear(), start_date.getUTCMonth(), start_date.getUTCDate());
+        end_date = Date.UTC(end_date.getUTCFullYear(), end_date.getUTCMonth(), end_date.getUTCDate());
+        end_date += (1000 * 60 * 60 * 24) - 1;
 
-        this.filter_start_date = start_date.getTime();
-        this.filter_end_date = end_date.getTime();
+        this.filter_start_date = start_date;
+        this.filter_end_date = end_date;
 
         this.send_filter_changed();
 
@@ -112,8 +112,22 @@ class DateFilter extends filter_base.FilterBase {
 
     this.filter_elem.find(".datepicker").datepicker(date_options);
 
-    this.start_date_control.datepicker("setDate", this.min_date);
-    this.end_date_control.datepicker("setDate", this.max_date);
+    if (this.filter_start_date != null){
+      this.start_date_control.datepicker("setDate", this.get_utc_date(this.filter_start_date));
+    } else {
+      this.start_date_control.datepicker("setDate", this.min_date);
+    }
+
+    if (this.filter_end_date != null){
+      this.end_date_control.datepicker("setDate", this.get_utc_date(this.filter_end_date));
+    } else {
+      this.end_date_control.datepicker("setDate", this.max_date);
+    }
+  }
+
+  get_utc_date(date_ms) {
+    var date = new Date(date_ms);
+    return new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate());
   }
 
   get_filter_info() {

diff --git a/js/src/qgrid.widget.js b/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.5',
-      _view_module_version : '^1.0.5',
+      _model_module_version : '^1.0.6-beta.6',
+      _view_module_version : '^1.0.6-beta.6',
       _df_json: '',
       _columns: {}
     });
@@ -204,6 +204,7 @@ class QgridView extends widgets.DOMWidgetView {
     this.data_view = this.create_data_view(df_json.data);
     this.grid_options = this.model.get('grid_options');
     this.index_col_name = this.model.get("_index_col_name");
+    this.row_styles = this.model.get("_row_styles");
 
     this.columns = [];
     this.index_columns = [];
@@ -301,7 +302,9 @@ class QgridView extends widgets.DOMWidgetView {
     $.datepicker.setDefaults({
       gotoCurrent: true,
       dateFormat: $.datepicker.ISO_8601,
-      constrainInput: false
+      constrainInput: false,
+      "prevText": "",
+      "nextText": ""
     });
 
     var sorted_columns = Object.values(columns).sort(
@@ -346,6 +349,15 @@ class QgridView extends widgets.DOMWidgetView {
       if (cur_column.is_index) {
         slick_column.editor = editors.IndexEditor;
         slick_column.cssClass += ' idx-col';
+        if (cur_column.first_index){
+          slick_column.cssClass += ' first-idx-col';
+        }
+        if (cur_column.last_index){
+          slick_column.cssClass += ' last-idx-col';
+        }
+
+        slick_column.name = cur_column.index_display_text;
+        slick_column.level = cur_column.level;
         this.index_columns.push(slick_column);
         continue;
       }
@@ -386,6 +398,7 @@ class QgridView extends widgets.DOMWidgetView {
     }, 1);
 
     this.slick_grid.setSelectionModel(new Slick.RowSelectionModel());
+    this.slick_grid.setCellCssStyles("grouping", this.row_styles);
     this.slick_grid.render();
 
     var render_header_cell = (e, args) => {
@@ -469,7 +482,7 @@ class QgridView extends widgets.DOMWidgetView {
         };
         this.send(msg);
         this.viewport_timeout = null;
-      }, 100);
+      }, 10);
     });
 
     // set up callbacks
@@ -631,6 +644,8 @@ class QgridView extends widgets.DOMWidgetView {
       }
       this.update_timeout = setTimeout(() => {
         var df_json = JSON.parse(this.model.get('_df_json'));
+        this.row_styles = this.model.get("_row_styles");
+        this.multi_index = this.model.get("_multi_index");
         var data_view = this.create_data_view(df_json.data);
 
         if (msg.triggered_by == 'sort_changed' && this.sort_indicator){
@@ -649,6 +664,23 @@ class QgridView extends widgets.DOMWidgetView {
         }
 
         this.set_data_view(data_view);
+
+        var skip_grouping = false;
+        if (this.multi_index) {
+          for (var i=1; i < this.filter_list.length; i++) {
+            var cur_filter = this.filter_list[i];
+            if (cur_filter.is_active()) {
+              skip_grouping = true;
+            }
+          }
+        }
+
+        if (skip_grouping) {
+          this.slick_grid.removeCellCssStyles("grouping");
+        } else {
+          this.slick_grid.setCellCssStyles("grouping", this.row_styles);
+        }
+
         this.slick_grid.render();
 
         if ((msg.triggered_by == 'add_row' ||
@@ -674,7 +706,7 @@ class QgridView extends widgets.DOMWidgetView {
           'rows': selected_rows,
           'type': 'selection_changed'
         });
-      }, 100);
+      }, 10);
     } else if (msg.col_info) {
       var filter = this.filters[msg.col_info.name];
       filter.handle_msg(msg);

diff --git a/qgrid/_version.py b/qgrid/_version.py
@@ -1,4 +1,4 @@
-version_info = (1, 0, 5, 'final')
+version_info = (1, 0, 6, 'beta', 6)
 
 _specifier_ = {'alpha': 'a', 'beta': 'b', 'candidate': 'rc', 'final': ''}