Adding a "Select all" checkbox to the "Filter by Value" menu (#146)

* fix dialog datamodel filter logic

* add semicolons

* add support for default checkboxes

* add select_all box with basic event listener

* add support for select all/none checkbox

* fix an edge case where unselecting and reselecting all values does not render a ticked "select all"

* fix alignment and styling

* refactor get checked state logic tetsting

* refactor check-all promise handling

* fix hitting on "void" area, fix boolean datafilter issue, fix filter column index mismatch issue

* semicolons

* add support for default checkboxes

* add select_all box with basic event listener

* add support for select all/none checkbox

* fix an edge case where unselecting and reselecting all values does not render a ticked "select all"

* fix alignment and styling

* refactor get checked state logic tetsting

* refactor check-all promise handling

* fix hitting on "void" area, fix boolean datafilter issue, fix filter column index mismatch issue

* semicolons

* change methods to private where applicable

Author: ibdafna

src/core/filterMenu.ts

@@ -14,6 +14,10 @@ import {
   DataModel
 } from '@lumino/datagrid';
 
+import { 
+  Signal, ISignal 
+} from '@lumino/signaling';
+
 import {
   ElementExt
 } from '@lumino/domutils';
@@ -91,13 +95,35 @@ export class InteractiveFilterDialog extends BoxPanel {
     this._applyWidget = new Widget();
     this._applyWidget.addClass('ipydatagrid-filter-apply')
 
+    // Create the "Select All" widget and connecting to
+    // lumino signal
+    this._selectAllCheckbox = new SelectCanvasWidget();
+    this._connectToCheckbox();
+
     // Add all widgets to the dock
     this.addWidget(this._titleWidget);
+    this.addWidget(this._selectAllCheckbox);
     this.addWidget(this._filterByConditionWidget);
     this.addWidget(this._uniqueValueGrid);
     this.addWidget(this._applyWidget);
   }
 
+  /**
+   * Connects to the "Select All" widget signal and
+   * toggles checking all/none of the unique elements
+   * by adding/removing them from the state object
+   */
+  private _connectToCheckbox() {
+    this._selectAllCheckbox.checkChanged.connect((sender: SelectCanvasWidget, checked: boolean) => {
+      this.userInteractedWithDialog = true;
+
+      // Adding all unique values to the state **IF** the select
+      // all box is "checked"
+      this.addRemoveAllUniqueValuesToState(checked);
+    })
+  }
+
+
   /**
    * Checks for any undefined values in `this._filterValue`.
    *
@@ -131,6 +157,11 @@ export class InteractiveFilterDialog extends BoxPanel {
       return;
     }
 
+    if (!this.hasFilter && !this.userInteractedWithDialog) {
+      this.close();
+      return;
+    }
+
     const value = this._mode === 'condition'
       ? <Transform.FilterValue>this._filterValue
       : this._uniqueValueStateManager.getValues(this.region, this._columnIndex);
@@ -180,8 +211,9 @@ export class InteractiveFilterDialog extends BoxPanel {
   private _render(): void {
     if (this._mode === 'condition') {
       this._applyWidget.node.style.minHeight = '65px';
-      this._uniqueValueGrid.setHidden(true)
-      this._filterByConditionWidget.setHidden(false)
+      this._selectAllCheckbox.setHidden(true);
+      this._uniqueValueGrid.setHidden(true);
+      this._filterByConditionWidget.setHidden(false);
 
       // selector
       VirtualDOM.render([
@@ -202,6 +234,7 @@ export class InteractiveFilterDialog extends BoxPanel {
 
     } else if (this._mode === 'value') {
       this._applyWidget.node.style.minHeight = '30px';
+      this._selectAllCheckbox.setHidden(false);
       this._uniqueValueGrid.setHidden(false);
       this._filterByConditionWidget.setHidden(true);
 
@@ -251,6 +284,38 @@ export class InteractiveFilterDialog extends BoxPanel {
     });
   }
 
+  /**
+   * Checks whether all unique elements in the column
+   * are present as "selected" in the state. This 
+   * function is used to determine whether the
+   * "Select all" button should be ticked when
+   * opening the filter by value menu.
+   */
+  updateSelectAllCheckboxState() {
+    if (!this.userInteractedWithDialog && !this.hasFilter) {
+      this._selectAllCheckbox.checked = true;
+      return;
+    }
+
+    const uniqueVals = this._model.uniqueValues(
+      this._region,
+      this._columnIndex
+    );
+
+    uniqueVals.then(values => {
+      let showAsChecked = true;
+      for (const value of values) {
+        // If there is a unique value which is not present in the state then it is 
+        // not ticked, and therefore we should not tick the "Select all" checkbox.
+        if (!this._uniqueValueStateManager.has(this._region, this._columnIndex, value)) {
+          showAsChecked = false;
+          break;
+        }
+      }
+      this._selectAllCheckbox.checked = showAsChecked;
+    });
+  }
+
   /**
    * Open the menu at the specified location.
    * 
@@ -268,6 +333,14 @@ export class InteractiveFilterDialog extends BoxPanel {
     this._region = options.region;
     this._mode = options.mode;
 
+    // Setting filter flag
+    this.hasFilter = this._model.getFilterTransform(this.model.getSchemaIndex(this._region, this._columnIndex)) !== undefined;
+
+    this.userInteractedWithDialog = false;
+
+    // Determines whether we should or not tick the "Select all" chekcbox
+    this.updateSelectAllCheckboxState();
+
     // Update styling on unique value grid
     this._uniqueValueGrid.style = {
       voidColor: Theme.getBackgroundColor(),
@@ -841,6 +914,23 @@ export class InteractiveFilterDialog extends BoxPanel {
     ]
   }
 
+  async addRemoveAllUniqueValuesToState(add: boolean) {
+    const uniqueVals = this.model.uniqueValues(
+      this._region,
+      this._columnIndex
+    );
+
+    return uniqueVals.then(values => {
+      for (let value of values) {
+        if (add) {
+          this._uniqueValueStateManager.add(this._region, this._columnIndex, value);
+        } else {
+          this._uniqueValueStateManager.remove(this._region, this._columnIndex, value);
+        }
+      }
+    });
+  }
+
   /**
    * Returns a reference to the data model used for this menu.
    */
@@ -910,6 +1000,138 @@ export class InteractiveFilterDialog extends BoxPanel {
 
   // Unique value state
   private _uniqueValueStateManager: UniqueValueStateManager
+
+  // Checking filter status
+  hasFilter: boolean = false;
+  userInteractedWithDialog: boolean = false;
+
+  private _selectAllCheckbox: SelectCanvasWidget;
+}
+
+/**
+ * A lumino widget to draw and control the 
+ * "Select All" checkbox
+ */
+class SelectCanvasWidget extends Widget {
+  constructor() {
+    super();
+    this.canvas = document.createElement("canvas");
+    this.node.style.minHeight = "16px";
+    this.node.style.overflow = "visible";
+    this.node.appendChild(this.canvas);
+  }
+
+  get checked(): boolean {
+    return this._checked;
+  }
+
+  /**
+   * We re-render reach time the box is checked
+   */
+  set checked(value: boolean) {
+    this._checked = value;
+    this.renderCheckbox();
+  }
+
+  get checkChanged(): ISignal<this, boolean> {
+    return this._checkedChanged;
+  }
+
+  /**
+   * Toggles and checkbox value and emits
+   * a signal to add all unique values to
+   * the state
+   */
+  toggleCheckMark = () => {
+    this._checked = !this._checked;
+    this.renderCheckbox();
+    this._checkedChanged.emit(this._checked);
+  }
+
+  /**
+   * Rendering the actual tickmark inside the
+   * canvas box. This function is only called
+   * from within renderCheckbox() below
+   */
+  addCheckMark() {
+    const gc = this.canvas.getContext('2d')!;
+    const BOX_OFFSET = 8;
+    const x = 0;
+    const y = 0;
+    gc.lineWidth = 1;
+    gc.beginPath();
+    gc.strokeStyle = "#000000";
+    gc.moveTo(x + BOX_OFFSET + 3, y + BOX_OFFSET + 5);
+    gc.lineTo(x + BOX_OFFSET + 4, y + BOX_OFFSET + 8);
+    gc.lineTo(x + BOX_OFFSET + 8, y + BOX_OFFSET + 2);
+    gc.lineWidth = 2;
+    gc.stroke();
+  }
+
+
+  /**
+   * Renders the checkbox and tick mark. Tick mark 
+   * rendering is conditional
+   */
+  renderCheckbox() {
+    const gc = this.canvas.getContext('2d')!;
+
+    // Needed to avoid blurring issue.
+    // Set display size (css pixels).
+    const size = 100;
+    this.canvas.style.width = size + "px";
+    this.canvas.style.height = size + "px";
+
+    // Set actual size in memory (scaled to account for extra pixel density)
+    var scale = window.devicePixelRatio; 
+    this.canvas.width = Math.floor(size * scale);
+    this.canvas.height = Math.floor(size * scale);
+
+    // Normalize coordinate system to use css pixels.
+    gc.scale(scale, scale);
+
+    // Draw the checkmark rectangle
+    const BOX_OFFSET = 8;
+    const x = 0;
+    const y = 0;
+    gc.lineWidth = 1;
+    gc.fillStyle = '#ffffff'
+    gc.fillRect(x + BOX_OFFSET, y + BOX_OFFSET, 10, 10)
+    gc.strokeStyle = 'black';
+    gc.strokeRect(x + BOX_OFFSET, y + BOX_OFFSET, 10, 10)
+
+    // Draw "Select all" text
+    gc.font = "12px sans-serif";
+    gc.fillStyle = Theme.getFontColor(0);
+    gc.fillText("(Select All)", x + 30, y + 17);
+
+    // Draw actual tickmark inside the checkmark rect
+    if (this._checked) {
+      this.addCheckMark();
+    }
+  }
+
+  /**
+   * Adding an event listener for clicks in the box
+   * area and rendering the checkbox
+   */
+  onAfterAttach() {
+    this.renderCheckbox();
+    this.canvas.addEventListener('click', this.toggleCheckMark, true);
+  }
+
+  /**
+   * Removing the event listener to declutter the
+   * DOM space
+   * @param msg lumino msg
+   */
+  protected onAfterDetach(msg: Message): void {
+    this.canvas.removeEventListener('click', this.toggleCheckMark, true);
+  }
+
+  private canvas: HTMLCanvasElement;
+  private _checked: boolean = false;
+  private _checkedChanged = new Signal<this, boolean>(this);
 }
 
 /**
@@ -1046,15 +1268,35 @@ class UniqueValueGridMouseHandler extends BasicMouseHandler {
   //@ts-ignore added so we don't have to add basicmousehandler.ts fork
   onMouseDown(grid: DataGrid, event: MouseEvent): void {
     const hit = grid.hitTest(event.clientX, event.clientY);
+
+    // Bail if hitting on an invalid area
+    if (hit.region === "void") {
+      return;
+    }
     const row = hit.row;
     const colIndex = this._filterDialog.columnIndex;
     const region = this._filterDialog.region;
     const value = grid.dataModel!.data('body', row, 0);
 
-    if (this._uniqueValuesSelectionState.has(region, colIndex, value)) {
-      this._uniqueValuesSelectionState.remove(region, colIndex, value)
+    const updateCheckState = () => {
+      if (this._uniqueValuesSelectionState.has(region, colIndex, value)) {
+        this._uniqueValuesSelectionState.remove(region, colIndex, value);
+      } else {
+        this._uniqueValuesSelectionState.add(region, colIndex, value);
+      }
+
+      // Updating the "Select all" chexboox if needed
+      this._filterDialog.updateSelectAllCheckboxState();
+    }
+
+    // User is clicking for the first time when no filter is applied
+    if (!this._filterDialog.hasFilter && !this._filterDialog.userInteractedWithDialog) {
+      this._filterDialog.addRemoveAllUniqueValuesToState(true).then(() => {
+        this._filterDialog.userInteractedWithDialog = true;
+        updateCheckState();
+      });
     } else {
-      this._uniqueValuesSelectionState.add(region, colIndex, value)
+      updateCheckState();
     }
   }
 

src/core/transformExecutors.ts

@@ -134,10 +134,6 @@ class FilterExecutor extends TransformExecutor {
       case "in":
         filterFunc = (item: any) => {
           let values = <any[]>this._options.value;
-
-          if (this._options.dType === 'boolean'){
-            return values.includes(String(item[this._options.field]))
-          }
           return values.includes(item[this._options.field]);
         };
         break;

src/core/transformStateManager.ts

@@ -230,6 +230,14 @@ export class TransformStateManager {
     return transforms;
   }
 
+  getFilterTransform(columnIndex: number): Transform.TransformSpec | undefined {
+    if (!this._state.hasOwnProperty(columnIndex)) {
+      return undefined;
+    }
+    
+    return this._state[columnIndex].filter;
+  }
+
   private _state: TransformStateManager.IState = {};
   private _changed = new Signal<this, TransformStateManager.IEvent>(this);
 }

src/core/valueRenderer.ts

@@ -131,8 +131,7 @@ export class FilterValueRenderer extends TextRenderer {
     gc.strokeRect(config.x + BOX_OFFSET, config.y + BOX_OFFSET, 10, 10)
 
     // Check state to display checkbox
-
-    if (this._stateManager.has(this._dialog.region, this._dialog.columnIndex, config.value)) {
+    if (this._getCheckedState(config)) {
       gc.beginPath();
       gc.strokeStyle = "#000000";
       gc.moveTo(config.x + BOX_OFFSET + 3, config.y + BOX_OFFSET + 5);
@@ -143,6 +142,11 @@ export class FilterValueRenderer extends TextRenderer {
     }
   }
 
+  private _getCheckedState(config: CellRenderer.CellConfig): boolean {
+    return (this._stateManager.has(this._dialog.region, this._dialog.columnIndex, config.value) 
+      || (!this._dialog.hasFilter && !this._dialog.userInteractedWithDialog))
+  }
+
   private _stateManager: UniqueValueStateManager
   private _dialog: InteractiveFilterDialog
 }

src/core/viewbasedjsonmodel.ts

@@ -373,6 +373,10 @@ export class ViewBasedJSONModel extends MutableDataModel {
     return this._transformState.activeTransforms;
   }
 
+  getFilterTransform(columnIndex: number): Transform.TransformSpec | undefined {
+    return this._transformState.getFilterTransform(columnIndex);
+  }
+
   /**
    * Updates the indicated value in the dataset.
    *