New "grouped" style for Dataframes with a multi-index. Don't show column name for unnamed index columns.

Author: Tim Shawver

js/src/qgrid.css

@@ -322,11 +322,56 @@
 
 .q-grid .slick-cell.idx-col {
   font-weight: bold;
+  border-right: 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: 90;
+}
+
+.q-grid .slick-cell.l1.r1 {
+  z-index: 89;
+}
+
+.q-grid .slick-cell.l2.r2 {
+  z-index: 88;
+}
+
+.q-grid .slick-cell.l3.r3 {
+  z-index: 87;
+}
+
+.q-grid .slick-cell.l4.r4 {
+  z-index: 86;
+}
+
+.q-grid .slick-cell.l5.r5 {
+  z-index: 85;
 }
 
 .q-grid .slick-cell.selected {
@@ -641,5 +686,6 @@ input.bool-filter-radio {
 }
 
 .slick-row .slick-cell:not(:first-child) {
-  padding-left: 4px;
+  padding-left: 5px;
+  margin-left: -4px;
 }

js/src/qgrid.widget.js

@@ -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 = [];
@@ -346,6 +347,8 @@ class QgridView extends widgets.DOMWidgetView {
       if (cur_column.is_index) {
         slick_column.editor = editors.IndexEditor;
         slick_column.cssClass += ' 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 +389,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 +473,7 @@ class QgridView extends widgets.DOMWidgetView {
         };
         this.send(msg);
         this.viewport_timeout = null;
-      }, 100);
+      }, 10);
     });
 
     // set up callbacks
@@ -631,6 +635,7 @@ 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");
         var data_view = this.create_data_view(df_json.data);
 
         if (msg.triggered_by == 'sort_changed' && this.sort_indicator){
@@ -649,6 +654,7 @@ class QgridView extends widgets.DOMWidgetView {
         }
 
         this.set_data_view(data_view);
+        this.slick_grid.setCellCssStyles("grouping", this.row_styles);
         this.slick_grid.render();
 
         if ((msg.triggered_by == 'add_row' ||
@@ -674,7 +680,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);

qgrid/grid.py

@@ -470,6 +470,9 @@ class QgridWidget(widgets.DOMWidget):
     _df = Instance(pd.DataFrame)
     _df_json = Unicode('', sync=True)
     _primary_key = List()
+    _primary_key_display = Dict({})
+    _row_styles = Dict({}, sync=True)
+    _disable_grouping = Bool(False)
     _columns = Dict({}, sync=True)
     _filter_tables = Dict({})
     _sorted_column_cache = Dict({})
@@ -762,17 +765,21 @@ def should_be_stringified(col_series):
                 for idx, cur_level in enumerate(df.index.levels):
                     if cur_level.name:
                         col_name = cur_level.name
+                        self._primary_key_display[col_name] = col_name
                     else:
                         col_name = 'level_%s' % idx
+                        self._primary_key_display[col_name] = ""
                     self._primary_key.append(col_name)
                     if should_be_stringified(cur_level):
                         self._string_columns.append(col_name)
             else:
                 self._multi_index = False
                 if df.index.name:
                     col_name = df.index.name
+                    self._primary_key_display[col_name] = col_name
                 else:
                     col_name = 'index'
+                    self._primary_key_display[col_name] = ""
                 self._primary_key = [col_name]
 
                 if should_be_stringified(df.index):
@@ -786,10 +793,50 @@ def should_be_stringified(col_series):
                 series_to_set = df[sort_column_name]
             else:
                 series_to_set = self._get_col_series_from_df(
-                    col_name, df
+                    col_name, df, level_vals=True
                 ).map(str)
             self._set_col_series_on_df(col_name, df, series_to_set)
 
+        if type(df.index) == pd.core.index.MultiIndex and \
+                not self._disable_grouping:
+            previous_value = None
+            row_styles = {}
+            row_styles_idx = 0
+            for index, row in df.iterrows():
+                row_style = {}
+                row_loc = self._df.index.get_loc(index)
+                last_row = row_loc == (len(self._df) - 1)
+                prev_idx = row_loc - 1
+                for idx, index_val in enumerate(index):
+                    col_name = self._primary_key[idx]
+                    if previous_value == None:
+                        row_style[col_name] = 'group-top'
+                        continue
+                    elif index_val == previous_value[idx]:
+                        if prev_idx < 0:
+                            row_style[col_name] = 'group-top'
+                            continue
+                        if row_styles[prev_idx][col_name] == 'group-top':
+                            row_style[col_name] = 'group-middle'
+                        elif row_styles[prev_idx][col_name] == 'group-bottom':
+                            row_style[col_name] = 'group-top'
+                        else:
+                            row_style[col_name] = 'group-middle'
+                    else:
+                        row_style[col_name] = 'single' if last_row else 'group-top'
+                        if prev_idx >= 0:
+                            if row_styles[prev_idx][col_name] == 'group-middle':
+                                row_styles[prev_idx][col_name] = 'group-bottom'
+                            elif row_styles[prev_idx][col_name] == 'group-top':
+                                row_styles[prev_idx][col_name] = 'group-single'
+                previous_value = index
+                row_styles[row_loc] = row_style
+                row_styles_idx += 1
+
+            self._row_styles = row_styles
+        else:
+            self._row_styles = {}
+
         df_json = pd_json.to_json(None, df,
                                   orient='table',
                                   date_format='iso',
@@ -825,6 +872,10 @@ def should_be_stringified(col_series):
 
                 if col_name in self._primary_key:
                     cur_column['is_index'] = True
+                    cur_column['index_display_text'] = \
+                        self._primary_key_display[col_name]
+                    if len(self._primary_key) > 0:
+                        cur_column['level'] = self._primary_key.index(col_name)
 
                 cur_column['position'] = i
                 columns[col_name] = cur_column
@@ -836,7 +887,9 @@ def should_be_stringified(col_series):
         # json that has interval columns replaced with text columns
         if len(self._interval_columns) > 0:
             for col_name in self._interval_columns:
-                col_series = self._get_col_series_from_df(col_name, df)
+                col_series = self._get_col_series_from_df(col_name,
+                                                          df,
+                                                          level_vals=True)
                 col_series_as_strings = col_series.map(lambda x: str(x))
                 self._set_col_series_on_df(col_name, df,
                                            col_series_as_strings)
@@ -850,7 +903,7 @@ def should_be_stringified(col_series):
                     series_to_set = df[sort_column_name]
                 else:
                     series_to_set = self._get_col_series_from_df(
-                        col_name, df
+                        col_name, df, level_vals=True
                     ).to_timestamp()
                 self._set_col_series_on_df(col_name, df, series_to_set)
 
@@ -882,6 +935,7 @@ def _update_sort(self):
         try:
             if self._sort_field is None:
                 return
+            self._disable_grouping = False
             if self._sort_field in self._primary_key:
                 if len(self._primary_key) == 1:
                     self._df.sort_index(
@@ -890,19 +944,23 @@ def _update_sort(self):
                     )
                 else:
                     level_id = self._sort_field
+                    level_index = self._primary_key.index(level_id)
                     if self._sort_field.startswith('level_'):
                         level_id = int(self._sort_field[6:])
                     self._df.sort_index(
                         level=level_id,
                         ascending=self._sort_ascending,
                         inplace=True
                     )
+                    if level_index > 0:
+                        self._disable_grouping = True
             else:
                 self._df.sort_values(
                     self._sort_field,
                     ascending=self._sort_ascending,
                     inplace=True
                 )
+                self._disable_grouping = True
         except TypeError:
             self.log.info('TypeError occurred, assuming mixed data type '
                           'column')
@@ -1114,15 +1172,18 @@ def get_value_from_filter_table(k):
                 })
 
     # get any column from a dataframe, including index columns
-    def _get_col_series_from_df(self, col_name, df):
+    def _get_col_series_from_df(self, col_name, df, level_vals=False):
         sort_column_name = self._sort_helper_columns.get(col_name)
         if sort_column_name:
             return df[sort_column_name]
 
         if col_name in self._primary_key:
             if len(self._primary_key) > 1:
                 key_index = self._primary_key.index(col_name)
-                return df.index.levels[key_index]
+                if level_vals:
+                    return df.index.levels[key_index]
+
+                return df.index.get_level_values(key_index)
             else:
                 return df.index
         else:

qgrid/tests/test_grid.py

@@ -382,6 +382,17 @@ def test_multi_index():
         }
     })
 
+    widget._handle_qgrid_msg_helper({
+        'type': 'filter_changed',
+        'field': 'level_1',
+        'filter_info': {
+            'field': 'level_1',
+            'type': 'text',
+            'selected': [0],
+            'excluded': []
+        }
+    })
+
     widget._handle_qgrid_msg_helper({
         'type': 'sort_changed',
         'sort_field': 3,
@@ -411,6 +422,10 @@ def test_multi_index():
             'name': 'filter_changed',
             'column': 3
         },
+        {
+            'name': 'filter_changed',
+            'column': 'level_1'
+        },
         {
             'name': 'sort_changed',
             'old': {