@xh/hoist 75.0.0-SNAPSHOT.1753369138152 → 75.0.0-SNAPSHOT.1753454795132

package/CHANGELOG.md

@@ -16,6 +16,12 @@
   which `dimensions` are provided to the model.
 * The usage of the `RelativeTimestamp` component has been streamlined by deprecating the `options`
   prop.  All `RelativeTimestampOptions` are now supported by this component as top-level props.
+* `FilterChooserModel` has been enhanced to better handle multiple simultaneous filters with
+  different `op`s on the same field.  "Inclusive" ops (e.g. `=`, `like`) will be OR'ed together,
+  "Exclusive" ops (e.g. `!=`, `not like`) will be AND'ed together and range ops (e.g. `<`, `>` )
+  will use a heuristic to create a meaningful query that will actually return results.  This
+  behavior is consistent with current behavior and user intuition, and should maximize the ability
+  to create useful queries.
 
 ### 🐞 Bug Fixes
 

package/build/types/cmp/filter/FilterChooserModel.d.ts

@@ -95,7 +95,6 @@ export declare class FilterChooserModel extends HoistModel {
      */
     setValue(rawValue: FilterLike): void;
     setSelectValue(selectValue: string[]): void;
-    toDisplayFilters(filter: Filter): any[];
     queryAsync(query: string): Promise<FilterChooserOption[]>;
     autoComplete(value: any): void;
     createFilterOption(filter: Filter): FilterChooserOption;
@@ -114,6 +113,9 @@ export declare class FilterChooserModel extends HoistModel {
     getFieldSpec(fieldName: string): FilterChooserFieldSpec;
     validateFilter(f: Filter): f is FilterChooserFilter;
     getDefaultIntroHelpText(): string;
+    private toValueFilter;
+    private toDisplayFilters;
+    private implicitOrFieldFilters;
     private initPersist;
     private setValueInternal;
     /**

package/build/types/cmp/grid/GridModel.d.ts

@@ -437,6 +437,10 @@ export declare class GridModel extends HoistModel {
     collapseAll(): void;
     /** Expand all parent rows in grouped or tree grid to the specified level. */
     expandToLevel(level: number): void;
+    /**
+     * Get the resolved level labels for the current state of the grid.
+     */
+    get resolvedLevelLabels(): string[];
     /**
      * Sort this grid.
      * This method is a no-op if provided any sorters without a corresponding column.

package/build/types/data/filter/FieldFilter.d.ts

@@ -17,6 +17,9 @@ export declare class FieldFilter extends Filter {
     readonly value: any;
     static OPERATORS: string[];
     static ARRAY_OPERATORS: string[];
+    static INCLUDE_LIKE_OPERATORS: string[];
+    static EXCLUDE_LIKE_OPERATORS: string[];
+    static RANGE_LIKE_OPERATORS: string[];
     /**
      * Constructor - not typically called by apps - create via {@link parseFilter} instead.
      * @internal

package/cmp/filter/FilterChooserModel.ts

@@ -15,7 +15,6 @@ import {
     XH
 } from '@xh/hoist/core';
 import {
-    combineValueFilters,
     CompoundFilter,
     FieldFilter,
     Filter,
@@ -32,6 +31,8 @@ import {createObservableRef} from '@xh/hoist/utils/react';
 import {
     cloneDeep,
     compact,
+    every,
+    first,
     flatMap,
     flatten,
     forEach,
@@ -41,6 +42,7 @@ import {
     isFinite,
     isObject,
     isString,
+    map,
     partition,
     sortBy,
     uniq,
@@ -222,48 +224,12 @@ export class FilterChooserModel extends HoistModel {
         const [filters, suggestions] = partition(parsedValues, 'op');
 
         // Round-trip actual filters through main value setter above.
-        this.setValue(combineValueFilters(filters));
+        this.setValue(this.toValueFilter(filters));
 
         // And then programmatically re-enter any suggestion
         if (suggestions.length === 1) this.autoComplete(suggestions[0]);
     }
 
-    // Transfer the value filter to the canonical set of individual filters for display.
-    // Filters with arrays values will be split.
-    toDisplayFilters(filter: Filter) {
-        if (!filter) return [];
-
-        let ret;
-        const unsupported = s => {
-            throw XH.exception(`Unsupported Filter in FilterChooserModel: ${s}`);
-        };
-
-        // 1) Flatten CompoundFilters across disparate fields to FieldFilters.
-        if (filter instanceof CompoundFilter && !filter.field) {
-            ret = filter.filters;
-        } else {
-            ret = [filter];
-        }
-        if (ret.some(f => !(f instanceof FieldFilter) && !(f instanceof CompoundFilter))) {
-            unsupported('Filters must be FieldFilters or CompoundFilters.');
-        }
-
-        // 2) Recognize unsupported multiple filters for array-based filters.
-        const groupMap = groupBy(ret, ({op, field}) => `${op}|${field}`);
-        forEach(groupMap, filters => {
-            const {op} = filters[0];
-            if (filters.length > 1 && FieldFilter.ARRAY_OPERATORS.includes(op)) {
-                unsupported(`Multiple filters cannot be provided with ${op} operator`);
-            }
-        });
-
-        // 3) Finally unroll multi-value filters to one value per filter.
-        // The multiple values will later be restored.
-        return flatMap(ret, f => {
-            return isArray(f.value) ? f.value.map(value => new FieldFilter({...f, value})) : f;
-        });
-    }
-
     //-------------
     // Querying
     //---------------
@@ -411,6 +377,108 @@ export class FilterChooserModel extends HoistModel {
     // -------------------------------
     // Implementation
     // -------------------------------
+
+    // Take the raw flat displayed FieldFilter specs and combine them with appropriate semantics
+    // into a proper Filter for the value of ths model.  Field Filters on the same field are going
+    // to be combined into a FieldFilter with array values as well as potentially appropriate
+    // compound filters to combine different ops.  See toDisplayFilters() for the inverse of this
+    // operation.
+    private toValueFilter(specs: FieldFilterSpec[] = []): FilterLike {
+        const ret: FilterLike[] = [];
+
+        // group filters by field -- we'll produce up to two ANDable filters per field
+        const fieldMap = groupBy(specs, 'field');
+        forEach(fieldMap, specs => {
+            // a) combine filters with SAME operator in to a single FieldFilter
+            const opMap = groupBy(specs, 'op');
+            specs = flatMap(opMap, specs => {
+                const firstSpec = first(specs);
+                return specs.length > 1 && FieldFilter.ARRAY_OPERATORS.includes(firstSpec.op)
+                    ? {...firstSpec, value: map(specs, 'value')}
+                    : specs;
+            });
+
+            // Process like operators together, potentially creating sub-OR clauses.
+            [
+                FieldFilter.INCLUDE_LIKE_OPERATORS,
+                FieldFilter.EXCLUDE_LIKE_OPERATORS,
+                FieldFilter.RANGE_LIKE_OPERATORS
+            ].forEach(type => {
+                const filters = specs.filter(s => type.includes(s.op));
+                if (this.implicitOrFieldFilters(filters)) {
+                    ret.push([{op: 'OR', filters}]);
+                } else {
+                    ret.push(...filters);
+                }
+            });
+        });
+
+        return ret;
+    }
+
+    // Transfer the value filter to the canonical set of individual filters for display.
+    // See toValueFilter() for the inverse of this operation.
+    private toDisplayFilters(filter: Filter): Filter[] {
+        if (!filter) return [];
+        const unsupported = s => {
+            throw XH.exception(`Unsupported Filter in FilterChooserModel: ${s}`);
+        };
+
+        let ret: Filter[] = [filter];
+
+        // 0) Can always unwind the top level AND -- its implicit.
+        if (filter instanceof CompoundFilter && filter.op == 'AND') {
+            ret = filter.filters;
+        }
+
+        // 1) Further flatten 2nd-Level CompoundFilters to FieldFilters.
+        // OR'ed filters on the same field can be decomposed if they will later be re-combined
+        ret = ret.flatMap(f => {
+            return f instanceof CompoundFilter &&
+                (f.op == 'AND' ||
+                    (f.field && this.implicitOrFieldFilters(f.filters as FieldFilter[])))
+                ? f.filters
+                : f;
+        });
+
+        // 2) Recognize misc unsupported filters.
+        if (!ret.every(f => f instanceof FieldFilter || f instanceof CompoundFilter)) {
+            unsupported('Filters must be FieldFilters or CompoundFilters.');
+        }
+        const fieldFilters = ret.filter(it => it instanceof FieldFilter) as FieldFilter[];
+        const groupMap = groupBy(fieldFilters, ({op, field}) => `${op}|${field}`);
+        forEach(groupMap, filters => {
+            const {op} = filters[0];
+            if (filters.length > 1 && FieldFilter.ARRAY_OPERATORS.includes(op)) {
+                unsupported(`Multiple filters cannot be provided with ${op} operator`);
+            }
+        });
+
+        // 3) Finally unroll multi-value filters to one filter per value.
+        return flatMap(ret, f => {
+            return f instanceof FieldFilter && isArray(f.value)
+                ? f.value.map(value => new FieldFilter({...f, value}))
+                : f;
+        });
+    }
+
+    // Should Field Filters on a particular Field be implicitly OR'ed together?
+    private implicitOrFieldFilters(filters: Array<FieldFilterSpec | FieldFilter>): boolean {
+        const {INCLUDE_LIKE_OPERATORS, RANGE_LIKE_OPERATORS} = FieldFilter;
+        if (filters.length < 2) return false;
+
+        // For INCLUDE_LIKE, treat them like "equals" and OR them
+        if (every(filters, f => INCLUDE_LIKE_OPERATORS.includes(f.op))) return true;
+
+        // For RANGE_LIKE, recognize simple "exterior" bifurcated range as an OR, otherwise AND
+        if (filters.length == 2 && every(filters, f => RANGE_LIKE_OPERATORS.includes(f.op))) {
+            const [a, b] = sortBy(filters, 'op');
+            return a.op.startsWith('<') && b.op.startsWith('>') && a.value <= b.value;
+        }
+
+        return false;
+    }
+
     private initPersist({
         persistValue = true,
         persistFavorites = true,

package/cmp/grid/GridModel.ts

@@ -92,7 +92,8 @@ import {
     min,
     omit,
     pick,
-    pull
+    pull,
+    take
 } from 'lodash';
 import {ReactNode} from 'react';
 import {GridAutosizeOptions} from './GridAutosizeOptions';
@@ -552,7 +553,7 @@ export class GridModel extends HoistModel {
 
         this.xhImpl = xhImpl;
 
-        this._defaultState = {columns, sortBy, groupBy};
+        this._defaultState = {columns, sortBy, groupBy, expandLevel};
 
         this.treeMode = treeMode;
         this.treeStyle = treeStyle;
@@ -679,10 +680,11 @@ export class GridModel extends HoistModel {
             if (!confirmed) return false;
         }
 
-        const {columns, sortBy, groupBy, filter} = this._defaultState;
+        const {columns, sortBy, groupBy, filter, expandLevel} = this._defaultState;
         this.setColumns(columns);
         this.setSortBy(sortBy);
         this.setGroupBy(groupBy);
+        this.expandToLevel(expandLevel);
 
         this.filterModel?.setFilter(filter);
 
@@ -1043,6 +1045,19 @@ export class GridModel extends HoistModel {
         this.expandLevel = level;
     }
 
+    /**
+     * Get the resolved level labels for the current state of the grid.
+     */
+    get resolvedLevelLabels(): string[] {
+        const {maxDepth, levelLabels} = this,
+            ret = executeIfFunction(levelLabels);
+        if (ret && ret.length < maxDepth + 1) {
+            this.logError('Value produced by `GridModel.levelLabels` has insufficient length.');
+            return null;
+        }
+        return ret ? take(ret, maxDepth + 1) : null;
+    }
+
     /**
      * Sort this grid.
      * This method is a no-op if provided any sorters without a corresponding column.

package/cmp/grid/impl/MenuSupport.ts

@@ -9,7 +9,6 @@ import {Column, GridModel} from '@xh/hoist/cmp/grid';
 import {RecordAction, Store, StoreRecord} from '@xh/hoist/data';
 import {convertIconToHtml, Icon} from '@xh/hoist/icon';
 import {filterConsecutiveMenuSeparators} from '@xh/hoist/utils/impl';
-import {executeIfFunction} from '@xh/hoist/utils/js';
 import copy from 'clipboard-copy';
 import {isEmpty, isFunction, isNil, isString, uniq} from 'lodash';
 import {isValidElement} from 'react';
@@ -282,26 +281,15 @@ function levelExpandAction(gridModel: GridModel): RecordAction {
     return new RecordAction({
         text: 'Expand to ...',
         displayFn: () => {
-            // Don't show for degenerate shallow grid models, or if we don't have labels
-            const {maxDepth, expandLevel} = gridModel;
-            if (maxDepth <= 1) return {hidden: true};
+            const {maxDepth, expandLevel, resolvedLevelLabels} = gridModel;
 
-            // Validate level labels.
-            const levelLabels = executeIfFunction(gridModel.levelLabels);
-            if (!levelLabels) {
-                return {hidden: true};
-            }
-            if (levelLabels.length < maxDepth + 1) {
-                gridModel.logDebug(
-                    'Value produced by `GridModel.levelLabels` has insufficient length. No menu items shown.'
-                );
-                return {hidden: true};
-            }
+            // Don't show for flat grid models or if we don't have labels
+            if (!maxDepth || !resolvedLevelLabels) return {hidden: true};
 
-            const items = levelLabels.map((label, idx) => {
+            const items = resolvedLevelLabels.map((label, idx) => {
                 const isCurrLevel =
                     expandLevel === idx ||
-                    (expandLevel > maxDepth && idx === levelLabels.length - 1);
+                    (expandLevel > maxDepth && idx === resolvedLevelLabels.length - 1);
 
                 return {
                     icon: isCurrLevel ? Icon.check() : null,

package/data/filter/FieldFilter.ts

@@ -69,6 +69,10 @@ export class FieldFilter extends Filter {
         'excludes'
     ];
 
+    static INCLUDE_LIKE_OPERATORS = ['=', 'like', 'begins', 'ends', 'includes'];
+    static EXCLUDE_LIKE_OPERATORS = ['!=', 'not like', 'excludes'];
+    static RANGE_LIKE_OPERATORS = ['>', '>=', '<', '<='];
+
     /**
      * Constructor - not typically called by apps - create via {@link parseFilter} instead.
      * @internal

package/desktop/cmp/button/grid/ExpandToLevelButton.ts

@@ -11,7 +11,7 @@ import '@xh/hoist/desktop/register';
 import {Icon} from '@xh/hoist/icon';
 import {menu, popover, Position} from '@xh/hoist/kit/blueprint';
 import {parseMenuItems} from '@xh/hoist/utils/impl';
-import {executeIfFunction, logDebug, logError, withDefault} from '@xh/hoist/utils/js';
+import {logError, withDefault} from '@xh/hoist/utils/js';
 import {ReactNode} from 'react';
 import {button, ButtonProps} from '../Button';
 
@@ -52,25 +52,14 @@ export const [ExpandToLevelButton, expandToLevelButton] =
                 return disabledButton();
             }
 
-            // Render a disabled button if requested or if we have a flat grid.
-            const {maxDepth, expandLevel} = gridModel;
-            if (disabled || !maxDepth) return disabledButton();
+            // Render a disabled button if requested, if we have a flat grid, or no level labels
+            const {maxDepth, expandLevel, resolvedLevelLabels} = gridModel;
+            if (disabled || !maxDepth || !resolvedLevelLabels) return disabledButton();
 
-            // Validate level labels - disable quietly if unspecified or w/log if mismatched to grid depth.
-            const levelLabels = executeIfFunction(gridModel.levelLabels);
-            if (!levelLabels) return disabledButton();
-            if (levelLabels.length < maxDepth + 1) {
-                logDebug(
-                    'Value produced by `GridModel.levelLabels` has insufficient length - button will be disabled.',
-                    ExpandToLevelButton
-                );
-                return disabledButton();
-            }
-
-            const menuItems: MenuItemLike[] = levelLabels.map((label, idx) => {
+            const menuItems: MenuItemLike[] = resolvedLevelLabels.map((label, idx) => {
                 const isCurrLevel =
                     expandLevel === idx ||
-                    (expandLevel > maxDepth && idx === levelLabels.length - 1);
+                    (expandLevel > maxDepth && idx === resolvedLevelLabels.length - 1);
 
                 return {
                     icon: isCurrLevel ? Icon.check() : Icon.placeholder(),

package/mobile/cmp/button/grid/ExpandToLevelButton.ts

@@ -8,7 +8,7 @@ import {GridModel} from '@xh/hoist/cmp/grid';
 import {hoistCmp, MenuItemLike, useContextModel} from '@xh/hoist/core';
 import {Icon} from '@xh/hoist/icon';
 import '@xh/hoist/mobile/register';
-import {executeIfFunction, logDebug, logError, withDefault} from '@xh/hoist/utils/js';
+import {logError, withDefault} from '@xh/hoist/utils/js';
 import {menuButton, MenuButtonProps} from '../../menu';
 
 export interface ExpandToLevelButtonProps extends MenuButtonProps {
@@ -29,7 +29,7 @@ export const [ExpandToLevelButton, expandToLevelButton] =
         className: 'xh-expand-to-level-button',
         model: false,
 
-        render({gridModel, className, icon, ...rest}) {
+        render({gridModel, className, icon, disabled, ...rest}) {
             gridModel = withDefault(gridModel, useContextModel(GridModel));
             icon = withDefault(icon, Icon.treeList());
 
@@ -50,28 +50,14 @@ export const [ExpandToLevelButton, expandToLevelButton] =
                 return disabledButton();
             }
 
-            // Disable for flat grids. Still show for grids with a single grouping level, although
-            // in this case we're effectively a less efficient way to expand/collapse all.
-            const {maxDepth, expandLevel} = gridModel;
-            if (!maxDepth) return disabledButton();
+            // Render a disabled button if requested or if we have a flat grid, or no level labels
+            const {maxDepth, expandLevel, resolvedLevelLabels} = gridModel;
+            if (disabled || !maxDepth || !resolvedLevelLabels) return disabledButton();
 
-            // Validate level labels - disable if unspecified or mismatched to grid depth.
-            const levelLabels = executeIfFunction(gridModel.levelLabels);
-            if (!levelLabels) {
-                return disabledButton();
-            }
-            if (levelLabels.length < maxDepth + 1) {
-                logDebug(
-                    'Value produced by `GridModel.levelLabels` has insufficient length. No menu items shown.',
-                    ExpandToLevelButton
-                );
-                return disabledButton();
-            }
-
-            const menuItems: MenuItemLike[] = levelLabels.map((label, idx) => {
+            const menuItems: MenuItemLike[] = resolvedLevelLabels.map((label, idx) => {
                 const isCurrLevel =
                     expandLevel === idx ||
-                    (expandLevel > maxDepth && idx === levelLabels.length - 1);
+                    (expandLevel > maxDepth && idx === resolvedLevelLabels.length - 1);
 
                 return {
                     icon: isCurrLevel ? Icon.check() : Icon.placeholder(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "75.0.0-SNAPSHOT.1753369138152",
+  "version": "75.0.0-SNAPSHOT.1753454795132",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",