@xh/hoist 75.0.0-SNAPSHOT.1753294066799 → 75.0.0-SNAPSHOT.1753376908830

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/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/build/types/desktop/cmp/button/grid/ExpandToLevelButton.d.ts

@@ -9,7 +9,7 @@ export interface ExpandToLevelButtonProps extends Omit<ButtonProps, 'title'> {
     /** Position for menu, as per Blueprint docs. */
     popoverPosition?: Position;
     /** Title for the menu popover - defaults to "Expand To Level". */
-    title: ReactNode;
+    title?: ReactNode;
 }
 /**
  * A menu button to expand a multi-level grouped or tree grid out to a desired level.

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/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

@@ -23,7 +23,7 @@ export interface ExpandToLevelButtonProps extends Omit<ButtonProps, 'title'> {
     popoverPosition?: Position;
 
     /** Title for the menu popover - defaults to "Expand To Level". */
-    title: ReactNode;
+    title?: ReactNode;
 }
 
 /**

package/package.json

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