From a99518e16a74cb92b661f7f7f0a711a0acfe024e Mon Sep 17 00:00:00 2001 From: Sebastian Rothbucher Date: Sat, 20 Aug 2022 20:52:29 +0200 Subject: [PATCH] Status bar feature with current row count - way simpler EDA and avoid layout issues in new grid or jquery --- js/src/qgrid.booleanfilter.js | 2 +- js/src/qgrid.css | 9 +++++++++ js/src/qgrid.datefilter.js | 2 +- js/src/qgrid.filterbase.js | 2 +- js/src/qgrid.sliderfilter.js | 4 ++-- js/src/qgrid.textfilter.js | 4 ++-- js/src/qgrid.widget.js | 34 ++++++++++++++++++++++++++++---- qgrid/grid.py | 37 ++++++++++++++++++++++++++++++----- 8 files changed, 78 insertions(+), 16 deletions(-) diff --git a/js/src/qgrid.booleanfilter.js b/js/src/qgrid.booleanfilter.js index 574306d2..a32dc260 100644 --- a/js/src/qgrid.booleanfilter.js +++ b/js/src/qgrid.booleanfilter.js @@ -8,7 +8,7 @@ class BooleanFilter extends filter_base.FilterBase {

Filter by ${this.field}
- +

diff --git a/js/src/qgrid.css b/js/src/qgrid.css index 7875a231..781edcd7 100644 --- a/js/src/qgrid.css +++ b/js/src/qgrid.css @@ -163,6 +163,15 @@ display: block; } +.q-grid-statusbar { + display: none; + font-size: 80%; +} + +.show-statusbar .q-grid-statusbar { + display: block; +} + .output_scroll .show-toolbar .q-grid { height: 284px !important; } diff --git a/js/src/qgrid.datefilter.js b/js/src/qgrid.datefilter.js index a4cf8acd..d5356b16 100644 --- a/js/src/qgrid.datefilter.js +++ b/js/src/qgrid.datefilter.js @@ -8,7 +8,7 @@ class DateFilter extends filter_base.FilterBase {

Filter by ${this.field}
- +

diff --git a/js/src/qgrid.filterbase.js b/js/src/qgrid.filterbase.js index 36b9e149..13901b2d 100644 --- a/js/src/qgrid.filterbase.js +++ b/js/src/qgrid.filterbase.js @@ -31,7 +31,7 @@ class FilterBase { this.slick_grid = slick_grid; this.filter_btn = $(`
-
+
`); this.filter_icon = this.filter_btn.find('.filter-icon'); diff --git a/js/src/qgrid.sliderfilter.js b/js/src/qgrid.sliderfilter.js index 82517489..7d708a1d 100644 --- a/js/src/qgrid.sliderfilter.js +++ b/js/src/qgrid.sliderfilter.js @@ -7,10 +7,10 @@ class SliderFilter extends filter_base.FilterBase {

Filter by ${this.field}
- +

-
+
0 - diff --git a/js/src/qgrid.textfilter.js b/js/src/qgrid.textfilter.js index 8204829e..d8b14c8b 100644 --- a/js/src/qgrid.textfilter.js +++ b/js/src/qgrid.textfilter.js @@ -9,13 +9,13 @@ class TextFilter extends filter_base.FilterBase {

Filter by ${this.field}
- +

-
+
diff --git a/js/src/qgrid.widget.js b/js/src/qgrid.widget.js index 7c5efd37..bf4fd295 100644 --- a/js/src/qgrid.widget.js +++ b/js/src/qgrid.widget.js @@ -64,6 +64,7 @@ class QgridView extends widgets.DOMWidgetView { } this.initialize_toolbar(); this.initialize_slick_grid(); + this.initialize_statusbar(); } initialize_toolbar() { @@ -131,12 +132,12 @@ class QgridView extends widgets.DOMWidgetView { } this.full_screen_btn = $(` `).appendTo(this.toolbar); this.close_modal_btn = $(` `).appendTo(this.toolbar); } @@ -195,6 +196,22 @@ class QgridView extends widgets.DOMWidgetView { }); } + initialize_statusbar() { + if (!this.model.get('show_statusbar')) { + this.$el.removeClass('show-statusbar'); + return; + } else { + this.$el.addClass('show-statusbar'); + } + + if (this.statusbar) { + return; + } + + this.statusbar = $("
").appendTo(this.$el); + this.update_statusbar(); + } + /** * Create the grid portion of the widget, which is an instance of * SlickGrid, plus automatically created filter controls based on the @@ -305,7 +322,7 @@ class QgridView extends widgets.DOMWidgetView { filter: boolean_filter.BooleanFilter, editor: Slick.Editors.Checkbox, formatter: (row, cell, value, columngDef, dataContext) => { - return value ? `` : ""; + return value ? `` : ""; } } }; @@ -484,7 +501,7 @@ class QgridView extends widgets.DOMWidgetView { var clicked_column_sort_indicator = col_header.find('.slick-sort-indicator'); if (clicked_column_sort_indicator.length == 0){ clicked_column_sort_indicator = - $("").appendTo(col_header); + $("").appendTo(col_header); } this.sort_indicator = clicked_column_sort_indicator; @@ -604,6 +621,7 @@ class QgridView extends widgets.DOMWidgetView { create_data_view(df) { let df_range = this.df_range = this.model.get("_df_range"); let df_length = this.df_length = this.model.get("_row_count"); + this.update_statusbar(); return { getLength: () => { return df_length; @@ -786,6 +804,8 @@ class QgridView extends widgets.DOMWidgetView { this.ignore_selection_changed = false; } else if (msg.type == 'change_show_toolbar') { this.initialize_toolbar(); + } else if (msg.type == 'change_show_statusbar') { + this.initialize_statusbar(); } else if (msg.col_info) { var filter = this.filters[msg.col_info.name]; filter.handle_msg(msg); @@ -828,6 +848,12 @@ class QgridView extends widgets.DOMWidgetView { this.slick_grid.render(); this.slick_grid.resizeCanvas(); } + + update_statusbar() { + if (this.statusbar) { + this.statusbar.text(this.df_length + ' rows'); + } + } } module.exports = { diff --git a/qgrid/grid.py b/qgrid/grid.py index 44887b25..04cf0ba2 100644 --- a/qgrid/grid.py +++ b/qgrid/grid.py @@ -67,15 +67,19 @@ def __init__(self): 'width': None } self._show_toolbar = False + self._show_statusbar = False self._precision = None # Defer to pandas.get_option def set_grid_option(self, optname, optvalue): self._grid_options[optname] = optvalue def set_defaults(self, show_toolbar=None, precision=None, - grid_options=None, column_options=None): + grid_options=None, column_options=None, + show_statusbar=None): if show_toolbar is not None: self._show_toolbar = show_toolbar + if show_statusbar is not None: + self._show_statusbar = show_statusbar if precision is not None: self._precision = precision if grid_options is not None: @@ -87,6 +91,10 @@ def set_defaults(self, show_toolbar=None, precision=None, def show_toolbar(self): return self._show_toolbar + @property + def show_statusbar(self): + return self._show_statusbar + @property def grid_options(self): return self._grid_options @@ -135,7 +143,8 @@ def notify_listeners(self, event, qgrid_widget): def set_defaults(show_toolbar=None, precision=None, grid_options=None, - column_options=None): + column_options=None, + show_statusbar=None): """ Set the default qgrid options. The options that you can set here are the same ones that you can pass into ``QgridWidget`` constructor, with the @@ -160,7 +169,8 @@ def set_defaults(show_toolbar=None, defaults.set_defaults(show_toolbar=show_toolbar, precision=precision, grid_options=grid_options, - column_options=column_options) + column_options=column_options, + show_statusbar=show_statusbar) def on(names, handler): @@ -325,7 +335,8 @@ def show_grid(data_frame, grid_options=None, column_options=None, column_definitions=None, - row_edit_callback=None): + row_edit_callback=None, + show_statusbar=None): """ Renders a DataFrame or Series as an interactive qgrid, represented by an instance of the ``QgridWidget`` class. The ``QgridWidget`` instance @@ -377,6 +388,8 @@ def show_grid(data_frame, particular row's values, keyed by column name. The callback should return True if the provided row should be editable, and False otherwise. + show_statusbar : bool + Whether to show a statusbar with current row counts. Notes @@ -471,6 +484,8 @@ def show_grid(data_frame, if show_toolbar is None: show_toolbar = defaults.show_toolbar + if show_statusbar is None: + show_statusbar = defaults.show_statusbar if precision is None: precision = defaults.precision if not isinstance(precision, Integral): @@ -508,7 +523,8 @@ def show_grid(data_frame, column_options=column_options, column_definitions=column_definitions, row_edit_callback=row_edit_callback, - show_toolbar=show_toolbar) + show_toolbar=show_toolbar, + show_statusbar=show_statusbar) PAGE_SIZE = 100 @@ -554,6 +570,8 @@ class can be constructed directly but that's not recommended because Get/set the precision options being used by the current instance. show_toolbar : bool Get/set the show_toolbar option being used by the current instance. + show_statusbar : bool + Get/set the show_statusbar option being used by the current instance. column_options : bool Get/set the column options being used by the current instance. column_definitions : bool @@ -608,6 +626,7 @@ class can be constructed directly but that's not recommended because column_definitions = Dict({}) row_edit_callback = Instance(FunctionType, sync=False, allow_none=True) show_toolbar = Bool(False, sync=True) + show_statusbar = Bool(False, sync=True) id = Unicode(sync=True) def __init__(self, *args, **kwargs): @@ -635,6 +654,9 @@ def _precision_default(self): def _show_toolbar_default(self): return defaults.show_toolbar + def _show_statusbar_default(self): + return defaults.show_statusbar + def on(self, names, handler): """ Setup a handler to be called when a user interacts with the current @@ -845,6 +867,11 @@ def _show_toolbar_changed(self): return self.send({'type': 'change_show_toolbar'}) + def _show_statusbar_changed(self): + if not self._initialized: + return + self.send({'type': 'change_show_statusbar'}) + def _update_table(self, update_columns=False, triggered_by=None,