fix: Render tables partitioned by non-string columns (#1533)

* Partitioned tables were unable to be rendered if the partitioned
column type is not `java.lang.String`
* Grid can now render string, numerical, and character columns
* Fixes partitioning columns filter dropdown to correctly display `char`
types instead of their ASCII values
* The partition search bar function is now able to search for numbers
* Removes the handleFocus function for `PartitionSelectorSearch` since
it made it impossible for the user to edit the search bar after
deselecting it
* Fixes #1441

---------

Co-authored-by: georgecwan <georgecwan@users.noreply.github.com>

packages/iris-grid/src/IrisGrid.tsx

@@ -1924,10 +1924,27 @@ export class IrisGrid extends Component<IrisGridProps, IrisGridState> {
   }
 
   updatePartition(partition: string, partitionColumn: Column): void {
+    if (TableUtils.isCharType(partitionColumn.type) && partition === '') {
+      return;
+    }
+
     const { model } = this.props;
-    const partitionFilter = partitionColumn
-      .filter()
-      .eq(model.dh.FilterValue.ofString(partition));
+
+    const partitionText = TableUtils.isCharType(partitionColumn.type)
+      ? model.displayString(
+          partition,
+          partitionColumn.type,
+          partitionColumn.name
+        )
+      : partition;
+    const partitionFilter = this.tableUtils.makeQuickFilterFromComponent(
+      partitionColumn,
+      partitionText
+    );
+    if (partitionFilter === null) {
+      return;
+    }
+
     const partitionFilters = [partitionFilter];
     this.setState({
       partition,
@@ -4427,7 +4444,7 @@ export class IrisGrid extends Component<IrisGridProps, IrisGridState> {
                     type: string,
                     stringName: string
                   ) => model.displayString(value, type, stringName)}
-                  columnName={partitionColumn.name}
+                  column={partitionColumn}
                   partition={partition}
                   onChange={this.handlePartitionChange}
                   onFetchAll={this.handlePartitionFetchAll}

packages/iris-grid/src/IrisGridPartitionSelector.test.tsx

@@ -14,7 +14,7 @@ function makeIrisGridPartitionSelector(
     <IrisGridPartitionSelector
       dh={dh}
       table={table}
-      columnName="0"
+      column={new IrisGridTestUtils(dh).makeColumn()}
       getFormattedString={getFormattedString}
       onChange={onChange}
       onDone={onDone}

packages/iris-grid/src/IrisGridPartitionSelector.tsx

@@ -4,10 +4,11 @@ import { DropdownMenu, Tooltip } from '@deephaven/components';
 import { vsTriangleDown, vsClose } from '@deephaven/icons';
 import Log from '@deephaven/log';
 import debounce from 'lodash.debounce';
-import type { dh as DhType, Table } from '@deephaven/jsapi-types';
+import type { Column, dh as DhType, Table } from '@deephaven/jsapi-types';
+import { TableUtils } from '@deephaven/jsapi-utils';
 import PartitionSelectorSearch from './PartitionSelectorSearch';
 import './IrisGridPartitionSelector.scss';
-import { ColumnName } from './CommonTypes';
+import IrisGridUtils from './IrisGridUtils';
 
 const log = Log.module('IrisGridPartitionSelector');
 
@@ -16,7 +17,7 @@ interface IrisGridPartitionSelectorProps<T> {
   dh: DhType;
   getFormattedString: (value: T, type: string, name: string) => string;
   table: Table;
-  columnName: ColumnName;
+  column: Column;
   partition: string;
   onAppend?: (partition: string) => void;
   onFetchAll: () => void;
@@ -90,9 +91,15 @@ class IrisGridPartitionSelector<T> extends Component<
   handlePartitionChange(event: React.ChangeEvent<HTMLInputElement>): void {
     log.debug2('handlePartitionChange');
 
+    const { column } = this.props;
     const { value: partition } = event.target;
 
-    this.setState({ partition });
+    this.setState({
+      partition:
+        TableUtils.isCharType(column.type) && partition.length > 0
+          ? partition.charCodeAt(0).toString()
+          : partition,
+    });
 
     this.debounceUpdate();
   }
@@ -154,7 +161,7 @@ class IrisGridPartitionSelector<T> extends Component<
   }
 
   render(): JSX.Element {
-    const { columnName, dh, getFormattedString, onAppend, onDone, table } =
+    const { column, dh, getFormattedString, onAppend, onDone, table } =
       this.props;
     const { partition } = this.state;
     const partitionSelectorSearch = (
@@ -173,12 +180,17 @@ class IrisGridPartitionSelector<T> extends Component<
     return (
       <div className="iris-grid-partition-selector">
         <div className="status-message">
-          <span>Filtering &quot;{columnName}&quot; partition to</span>
+          <span>Filtering &quot;{column.name}&quot; partition to</span>
         </div>
         <div className="input-group">
           <input
             type="text"
-            value={partition}
+            value={
+              TableUtils.isCharType(column.type) &&
+              partition.toString().length > 0
+                ? String.fromCharCode(parseInt(partition, 10))
+                : IrisGridUtils.convertValueToText(partition, column.type)
+            }
             onChange={this.handlePartitionChange}
             className="form-control input-partition"
           />

packages/iris-grid/src/PartitionSelectorSearch.tsx

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import debounce from 'lodash.debounce';
+import { TableUtils } from '@deephaven/jsapi-utils';
 import type { dh as DhType, Table } from '@deephaven/jsapi-types';
 import { ItemList, LoadingSpinner } from '@deephaven/components';
 import Log from '@deephaven/log';
@@ -74,7 +75,6 @@ class PartitionSelectorSearch<T> extends Component<
     super(props);
 
     this.handleFilterChange = this.handleFilterChange.bind(this);
-    this.handleInputFocus = this.handleInputFocus.bind(this);
     this.handleKeyDown = this.handleKeyDown.bind(this);
     this.handleListKeydown = this.handleListKeydown.bind(this);
     this.handleSelect = this.handleSelect.bind(this);
@@ -86,6 +86,9 @@ class PartitionSelectorSearch<T> extends Component<
     this.searchInput = null;
     this.timer = null;
 
+    const { dh } = props;
+    this.tableUtils = new TableUtils(dh);
+
     this.state = {
       offset: 0,
       itemCount: 0,
@@ -125,6 +128,8 @@ class PartitionSelectorSearch<T> extends Component<
 
   timer: null;
 
+  tableUtils: TableUtils;
+
   handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>): boolean {
     if (this.itemList == null) {
       return false;
@@ -181,12 +186,6 @@ class PartitionSelectorSearch<T> extends Component<
     this.setState({ itemCount, isLoading: true });
   }
 
-  handleInputFocus(): void {
-    if (this.itemList) {
-      this.itemList.focusItem(0);
-    }
-  }
-
   handleSelect(itemIndex: ModelIndex): void {
     log.debug2('handleSelect', itemIndex);
 
@@ -227,9 +226,14 @@ class PartitionSelectorSearch<T> extends Component<
   handleTextChange(event: React.ChangeEvent<HTMLInputElement>): void {
     log.debug2('handleTextChange');
 
+    const { table } = this.props;
     const { value: text } = event.target;
 
-    this.setState({ text });
+    if (text !== '' && TableUtils.isIntegerType(table.columns[0].type)) {
+      this.setState({ text: parseInt(text, 10).toString() });
+    } else {
+      this.setState({ text });
+    }
 
     this.debounceUpdateFilter();
   }
@@ -275,18 +279,21 @@ class PartitionSelectorSearch<T> extends Component<
   }
 
   updateFilter(): void {
-    const { dh, initialPageSize, table } = this.props;
+    const { initialPageSize, table } = this.props;
     const { text } = this.state;
     const filterText = text.trim();
     const filters = [];
     if (filterText.length > 0) {
       const column = table.columns[0];
-      const filter = column
-        .filter()
-        .invoke(
-          'matches',
-          dh.FilterValue.ofString(`(?s)(?i).*\\Q${filterText}\\E.*`)
+      const filter = this.tableUtils.makeQuickFilterFromComponent(
+        column,
+        TableUtils.isStringType(column.type) ? `~${filterText}` : filterText
+      );
+      if (!filter) {
+        throw new Error(
+          'Unable to create column filter for partition selector'
         );
+      }
       filters.push(filter);
     }
 
@@ -297,24 +304,28 @@ class PartitionSelectorSearch<T> extends Component<
   }
 
   render(): JSX.Element {
+    const { table } = this.props;
     const { isLoading, itemCount, items, offset, text } = this.state;
+
     const listHeight =
       Math.min(itemCount, PartitionSelectorSearch.MAX_VISIBLE_ITEMS) *
         ItemList.DEFAULT_ROW_HEIGHT +
       // Adjust for ListItem vertical padding - .375rem ~ 5.25px
       11;
+    const inputType = TableUtils.isNumberType(table.columns[0].type)
+      ? 'number'
+      : 'text';
     return (
       <div className="iris-grid-partition-selector-search">
         <div className="search-container">
           <input
-            type="text"
+            type={inputType}
             ref={searchInput => {
               this.searchInput = searchInput;
             }}
             value={text}
             placeholder="Available Partitions"
             onChange={this.handleTextChange}
-            onFocus={this.handleInputFocus}
             onKeyDown={this.handleKeyDown}
             className="form-control input-partition"
           />