feat: improvements to null and empty strings filters in grid (#1348)

Fixes #1243

-  advanced styling for null and empty strings
- context menu styling for null and empty strings
- escape the null when using filter by menu
- escape any operator when using filter by menu
- New special empty string context menu
- Fixed broken startswith/endwith
- Allow empty string search as just "=" or "!="

Any filter containing a backslashes however is still broken in the jsapi
deephaven/deephaven-core#3912

---------

Co-authored-by: Mike Bender <mikebender@deephaven.io>

packages/components/src/SelectValueList.tsx

@@ -6,7 +6,7 @@ import Checkbox from './Checkbox';
 
 export interface SelectItem<T> {
   value: T;
-  displayValue?: string;
+  displayValue?: string | JSX.Element;
   isSelected: boolean;
 }
 
@@ -72,7 +72,7 @@ class SelectValueList<T> extends PureComponent<SelectValueListProps<T>> {
       itemIndex: number,
       key: number,
       value: T,
-      displayValue: string | undefined,
+      displayValue: string | JSX.Element | undefined,
       rowHeight: number,
       isSelected: boolean,
       disabled: boolean

packages/iris-grid/src/AdvancedFilterCreatorSelectValueList.tsx

@@ -1,5 +1,5 @@
 /* eslint react/no-did-update-set-state: "off" */
-import React, { PureComponent } from 'react';
+import React, { PureComponent, ReactElement } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import type {
   dh as DhType,
@@ -182,11 +182,18 @@ class AdvancedFilterCreatorSelectValueList<T = unknown> extends PureComponent<
     for (let r = 0; r < data.rows.length; r += 1) {
       const row = data.rows[r];
       const value = row.get(column);
-      const displayValue = formatter.getFormattedString(
-        value,
-        column.type,
-        column.name
-      );
+      let displayValue: string | JSX.Element;
+      if (value == null) {
+        displayValue = <i className="text-muted">null</i>;
+      } else if (value === '') {
+        displayValue = <i className="text-muted">empty</i>;
+      } else {
+        displayValue = formatter.getFormattedString(
+          value,
+          column.type,
+          column.name
+        );
+      }
       const isSelected = this.isValueSelected(value);
       items.push({
         displayValue,
@@ -263,7 +270,7 @@ class AdvancedFilterCreatorSelectValueList<T = unknown> extends PureComponent<
     table.setViewport(topRow, bottomRow);
   }
 
-  render(): React.ReactElement {
+  render(): ReactElement {
     const { offset, isLoading, items, itemCount } = this.state;
 
     return (

packages/iris-grid/src/mousehandlers/IrisGridContextMenuHandler.tsx

@@ -413,6 +413,7 @@ class IrisGridContextMenuHandler extends GridMouseHandler {
       };
 
       if (value == null) {
+        // null gets a special menu
         if (quickFilters.get(modelColumn)) {
           filterMenu.actions.push({
             title: 'And',
@@ -426,6 +427,22 @@ class IrisGridContextMenuHandler extends GridMouseHandler {
           });
         }
         filterMenu.actions.push(...this.nullFilterActions(column));
+      } else if (value === '') {
+        // empty string gets a special menu
+        if (quickFilters.get(modelColumn)) {
+          filterMenu.actions.push({
+            title: 'And',
+
+            actions: this.emptyStringFilterActions(
+              column,
+              quickFilters.get(modelColumn),
+              '&&'
+            ),
+            order: 2,
+            group: ContextActions.groups.high,
+          });
+        }
+        filterMenu.actions.push(...this.emptyStringFilterActions(column));
       } else if (TableUtils.isBooleanType(column.type)) {
         // boolean should have OR condition, and handles it's own null menu options
         if (quickFilters.get(modelColumn)) {
@@ -918,6 +935,11 @@ class IrisGridContextMenuHandler extends GridMouseHandler {
     const actions = [];
     const { model } = this.irisGrid.props;
     const columnIndex = model.getColumnIndexByName(column.name);
+
+    const quickFilterValueText:
+      | string
+      | null = TableUtils.escapeQuickTextFilter(valueText);
+
     assertNotNull(columnIndex);
 
     actions.push({
@@ -946,7 +968,7 @@ class IrisGridContextMenuHandler extends GridMouseHandler {
           ),
           IrisGridContextMenuHandler.getQuickFilterText(
             filterText,
-            `=${valueText}`,
+            `${quickFilterValueText}`,
             operator
           )
         );
@@ -967,7 +989,7 @@ class IrisGridContextMenuHandler extends GridMouseHandler {
           ),
           IrisGridContextMenuHandler.getQuickFilterText(
             filterText,
-            `!=${valueText}`,
+            `!=${quickFilterValueText}`,
             operator
           )
         );
@@ -983,12 +1005,16 @@ class IrisGridContextMenuHandler extends GridMouseHandler {
           columnIndex,
           IrisGridContextMenuHandler.getQuickFilterCondition(
             filter,
-            column.filter().contains(filterValue),
+            column
+              .filter()
+              .isNull()
+              .not()
+              .and(column.filter().contains(filterValue)),
             operator
           ),
           IrisGridContextMenuHandler.getQuickFilterText(
             filterText,
-            `~${valueText}`,
+            `~${quickFilterValueText}`,
             operator
           )
         );
@@ -1004,12 +1030,15 @@ class IrisGridContextMenuHandler extends GridMouseHandler {
           columnIndex,
           IrisGridContextMenuHandler.getQuickFilterCondition(
             filter,
-            column.filter().contains(filterValue).not(),
+            column
+              .filter()
+              .isNull()
+              .or(column.filter().contains(filterValue).not()),
             operator
           ),
           IrisGridContextMenuHandler.getQuickFilterText(
             filterText,
-            `!~${valueText}`,
+            `!~${quickFilterValueText}`,
             operator
           )
         );
@@ -1025,12 +1054,16 @@ class IrisGridContextMenuHandler extends GridMouseHandler {
           columnIndex,
           IrisGridContextMenuHandler.getQuickFilterCondition(
             filter,
-            column.filter().invoke('startsWith', filterValue),
+            column
+              .filter()
+              .isNull()
+              .not()
+              .and(column.filter().invoke('startsWith', filterValue)),
             operator
           ),
           IrisGridContextMenuHandler.getQuickFilterText(
             filterText,
-            `${valueText}*`,
+            `${quickFilterValueText}*`,
             operator
           )
         );
@@ -1046,12 +1079,16 @@ class IrisGridContextMenuHandler extends GridMouseHandler {
           columnIndex,
           IrisGridContextMenuHandler.getQuickFilterCondition(
             filter,
-            column.filter().invoke('endsWith', filterValue),
+            column
+              .filter()
+              .isNull()
+              .not()
+              .and(column.filter().invoke('endsWith', filterValue)),
             operator
           ),
           IrisGridContextMenuHandler.getQuickFilterText(
             filterText,
-            `*${valueText}`,
+            `*${quickFilterValueText}`,
             operator
           )
         );
@@ -1518,6 +1555,88 @@ class IrisGridContextMenuHandler extends GridMouseHandler {
     return actions;
   }
 
+  emptyStringFilterActions(
+    column: Column,
+    quickFilter?: QuickFilter,
+    operator?: '&&' | '||' | null
+  ): ContextAction[] {
+    const { dh } = this;
+    const filterValue = dh.FilterValue.ofString('');
+    let newQuickFilter:
+      | {
+          filter: null | FilterCondition | undefined;
+          text: string | null;
+        }
+      | undefined
+      | null = quickFilter;
+    if (!newQuickFilter) {
+      newQuickFilter = { filter: null, text: null };
+    }
+    const { filter, text: filterText } = newQuickFilter;
+    const actions = [];
+    const { model } = this.irisGrid.props;
+    const columnIndex = model.getColumnIndexByName(column.name);
+    assertNotNull(columnIndex);
+
+    actions.push({
+      menuElement: (
+        <div className="iris-grid-filter-menu-item-value">
+          {operator
+            ? IrisGridContextMenuHandler.getOperatorAsText(operator)
+            : ''}{' '}
+          <i className="text-muted">empty</i>
+        </div>
+      ),
+      order: 1,
+      group: ContextActions.groups.high,
+    });
+
+    actions.push({
+      title: 'is empty string',
+      description: `Show only rows where ${column.name} is empty`,
+      action: () => {
+        this.irisGrid.setQuickFilter(
+          columnIndex,
+          IrisGridContextMenuHandler.getQuickFilterCondition(
+            filter,
+            column.filter().eq(filterValue),
+            operator
+          ),
+          IrisGridContextMenuHandler.getQuickFilterText(
+            filterText,
+            `=`,
+            operator
+          )
+        );
+      },
+      order: 10,
+      group: ContextActions.groups.low,
+    });
+    actions.push({
+      title: 'is not empty string',
+      description: `Show only rows where ${column.name} is not empty`,
+      action: () => {
+        this.irisGrid.setQuickFilter(
+          columnIndex,
+          IrisGridContextMenuHandler.getQuickFilterCondition(
+            filter,
+            column.filter().notEq(filterValue),
+            operator
+          ),
+          IrisGridContextMenuHandler.getQuickFilterText(
+            filterText,
+            `!=`,
+            operator
+          )
+        );
+      },
+      order: 20,
+      group: ContextActions.groups.low,
+    });
+
+    return actions;
+  }
+
   nullFilterActions(
     column: Column,
     quickFilter?: QuickFilter,
@@ -1540,7 +1659,7 @@ class IrisGridContextMenuHandler extends GridMouseHandler {
           {operator
             ? IrisGridContextMenuHandler.getOperatorAsText(operator)
             : ''}{' '}
-          &quot;null&quot;
+          <i className="text-muted">null</i>
         </div>
       ),
       order: 1,