@xh/hoist 73.0.0-SNAPSHOT.1746553761854 → 73.0.0-SNAPSHOT.1746559391577

package/CHANGELOG.md

@@ -127,10 +127,6 @@
 
 ### 🎁 New Features
 
-* Improvements to  Grid columns `HeaderFilter` component:
-    * `GridFilterModel` `commitOnChage` now set to `false` by default
-    * Addition of ability to append terms to active filter **only** when `commitOnChage:false`
-    * Column header filtering functionality now similar to Excel on Windows
 * Introduced a new "JSON Search" feature to the Hoist Admin Console, accessible from the Config,
   User Preference, and JSON Blob tabs. Supports searching JSON values stored within these objects
   to filter and match data using JSON Path expressions.

package/admin/columns/Tracking.ts

@@ -139,6 +139,12 @@ export const deviceIcon: ColumnSpec = {
     }
 };
 
+export const elapsedRenderer = numberRenderer({
+    label: 'ms',
+    nullDisplay: '-',
+    formatConfig: {thousandSeparated: false, mantissa: 0}
+});
+
 export const elapsed: ColumnSpec = {
     field: {
         name: 'elapsed',
@@ -146,12 +152,17 @@ export const elapsed: ColumnSpec = {
         aggregator: 'AVG'
     },
     width: 130,
-    align: 'right',
-    renderer: numberRenderer({
-        label: 'ms',
-        nullDisplay: '-',
-        formatConfig: {thousandSeparated: false, mantissa: 0}
-    })
+    renderer: elapsedRenderer
+};
+
+export const elapsedMax: ColumnSpec = {
+    field: {
+        name: 'elapsedMax',
+        type: 'int',
+        aggregator: 'MAX'
+    },
+    width: 130,
+    renderer: elapsedRenderer
 };
 
 export const entryCount: ColumnSpec = {

package/admin/tabs/activity/tracking/ActivityTrackingModel.ts

@@ -6,6 +6,7 @@
  */
 import {exportFilename, getAppModel} from '@xh/hoist/admin/AdminUtils';
 import * as Col from '@xh/hoist/admin/columns';
+import {elapsedRenderer} from '@xh/hoist/admin/columns';
 import {
     ActivityTrackingDataFieldSpec,
     DataFieldsEditorModel
@@ -16,7 +17,7 @@ import {ColumnRenderer, ColumnSpec, GridModel, TreeStyle} from '@xh/hoist/cmp/gr
 import {GroupingChooserModel} from '@xh/hoist/cmp/grouping';
 import {HoistModel, LoadSpec, managed, PlainObject, XH} from '@xh/hoist/core';
 import {Cube, CubeFieldSpec, FieldSpec, StoreRecord} from '@xh/hoist/data';
-import {dateRenderer, dateTimeSecRenderer, fmtNumber, numberRenderer} from '@xh/hoist/format';
+import {dateRenderer, dateTimeSecRenderer, numberRenderer} from '@xh/hoist/format';
 import {action, computed, makeObservable, observable} from '@xh/hoist/mobx';
 import {LocalDate} from '@xh/hoist/utils/datetime';
 import {compact, get, isEmpty, isEqual, round} from 'lodash';
@@ -329,6 +330,7 @@ export class ActivityTrackingModel extends HoistModel implements ActivityDetailP
             Col.dayRange.field,
             Col.device.field,
             Col.elapsed.field,
+            Col.elapsedMax.field,
             Col.entryCount.field,
             Col.impersonating.field,
             Col.instance.field,
@@ -349,7 +351,11 @@ export class ActivityTrackingModel extends HoistModel implements ActivityDetailP
     private createFilterChooserModel(): FilterChooserModel {
         // TODO - data fields?
         const ret = new FilterChooserModel({
-            persistWith: {...this.persistWith, persistFavorites: false},
+            persistWith: {
+                ...this.persistWith,
+                // Faves persisted to local storage (vs trapped within a single VM view)
+                persistFavorites: {localStorageKey: 'xhAdminActivityTabState'}
+            },
             fieldSpecs: [
                 {field: 'appEnvironment', displayName: 'Environment'},
                 {field: 'appVersion'},
@@ -358,16 +364,7 @@ export class ActivityTrackingModel extends HoistModel implements ActivityDetailP
                 {field: 'correlationId'},
                 {field: 'data'},
                 {field: 'device'},
-                {
-                    field: 'elapsed',
-                    valueRenderer: v => {
-                        return fmtNumber(v, {
-                            label: 'ms',
-                            formatConfig: {thousandSeparated: false, mantissa: 0}
-                        });
-                    },
-                    fieldType: 'number'
-                },
+                {field: 'elapsed', fieldType: 'number', valueRenderer: elapsedRenderer},
                 {field: 'instance'},
                 {field: 'loadId'},
                 {field: 'msg', displayName: 'Message'},
@@ -403,7 +400,11 @@ export class ActivityTrackingModel extends HoistModel implements ActivityDetailP
 
     private createGroupingChooserModel(): GroupingChooserModel {
         return new GroupingChooserModel({
-            persistWith: {...this.persistWith, persistFavorites: false},
+            persistWith: {
+                ...this.persistWith,
+                // Faves persisted to local storage (vs trapped within a single VM view)
+                persistFavorites: {localStorageKey: 'xhAdminActivityTabState'}
+            },
             dimensions: this.cube.dimensions,
             initialValue: ['username', 'category']
         });
@@ -440,7 +441,8 @@ export class ActivityTrackingModel extends HoistModel implements ActivityDetailP
                 {...Col.browser, hidden},
                 {...Col.userAgent, hidden},
                 {...Col.impersonating, hidden},
-                {...Col.elapsed, headerName: 'Elapsed (avg)', hidden},
+                {...Col.elapsed, displayName: 'Elapsed (avg)', hidden},
+                {...Col.elapsedMax, displayName: 'Elapsed (max)', hidden},
                 {...Col.dayRange, hidden},
                 {...Col.entryCount},
                 {field: 'count', hidden},
@@ -464,6 +466,9 @@ export class ActivityTrackingModel extends HoistModel implements ActivityDetailP
             raw.month = raw.day.format(this._monthFormat);
             raw.dayRange = {min: raw.day, max: raw.day};
 
+            // Workaround lack of support for multiple aggregations on the same field.
+            raw.elapsedMax = raw.elapsed;
+
             const data = JSON.parse(raw.data);
             if (isEmpty(data)) return;
 

package/admin/tabs/activity/tracking/ActivityTrackingPanel.ts

@@ -26,6 +26,7 @@ import {activityDetailView} from './detail/ActivityDetailView';
 import './ActivityTracking.scss';
 
 export const activityTrackingPanel = hoistCmp.factory({
+    displayName: 'ActivityTrackingPanel',
     model: creates(ActivityTrackingModel),
 
     render({model}) {

package/admin/tabs/activity/tracking/chart/AggChartModel.ts

@@ -45,14 +45,9 @@ export class AggChartModel extends HoistModel {
         if (!activityTrackingModel) return [];
 
         const ret: SelectOption[] = [
-            {
-                label: 'Entries [count]',
-                value: 'entryCount'
-            },
-            {
-                label: 'Elapsed ms [avg]',
-                value: 'elapsed'
-            }
+            {label: 'Entries [count]', value: 'entryCount'},
+            {label: 'Elapsed [avg]', value: 'elapsed'},
+            {label: 'Elapsed [max]', value: 'elapsedMax'}
         ];
 
         if (secondaryDim) {
@@ -88,10 +83,16 @@ export class AggChartModel extends HoistModel {
         this.markPersist('metric', {...persistWith, path: 'chartMetric'});
         this.markPersist('incWeekends', {...persistWith, path: 'chartIncWeekends'});
 
-        this.addReaction({
-            track: () => [this.data, this.metric, this.incWeekends],
-            run: () => this.loadChart()
-        });
+        this.addReaction(
+            {
+                track: () => [this.data, this.metric, this.incWeekends],
+                run: () => this.loadChart()
+            },
+            {
+                track: () => this.selectableMetrics,
+                run: () => this.onSelectableMetricsChange()
+            }
+        );
     }
 
     //-----------------
@@ -215,4 +216,11 @@ export class AggChartModel extends HoistModel {
     private getDisplayName(fieldName: string) {
         return this.activityTrackingModel?.getDisplayName(fieldName) ?? fieldName;
     }
+
+    private onSelectableMetricsChange(): void {
+        const {metric} = this;
+        if (!this.selectableMetrics.some(it => it.value === metric)) {
+            this.metric = this.selectableMetrics[0]?.value;
+        }
+    }
 }

package/admin/tabs/activity/tracking/chart/AggChartPanel.ts

@@ -14,6 +14,7 @@ import {Icon} from '@xh/hoist/icon/Icon';
 import {AggChartModel} from './AggChartModel';
 
 export const aggChartPanel = hoistCmp.factory({
+    displayName: 'AggChartPanel',
     model: creates(AggChartModel),
 
     render({model, ...props}) {

package/admin/tabs/activity/tracking/datafields/DataFieldsEditor.ts

@@ -12,6 +12,7 @@ import {popover} from '@xh/hoist/kit/blueprint';
 import {isEmpty} from 'lodash';
 
 export const dataFieldsEditor = hoistCmp.factory({
+    displayName: 'DataFieldsEditor',
     model: uses(DataFieldsEditorModel),
 
     render({model}) {

package/admin/tabs/activity/tracking/detail/ActivityDetailView.ts

@@ -22,6 +22,7 @@ import {isNil} from 'lodash';
 import {ActivityDetailModel} from './ActivityDetailModel';
 
 export const activityDetailView = hoistCmp.factory({
+    displayName: 'ActivityDetailView',
     model: creates(ActivityDetailModel),
 
     render({model, ...props}) {

package/build/types/admin/columns/Tracking.d.ts

@@ -12,7 +12,9 @@ export declare const day: ColumnSpec;
 export declare const dayRange: ColumnSpec;
 export declare const device: ColumnSpec;
 export declare const deviceIcon: ColumnSpec;
+export declare const elapsedRenderer: (v: number) => import("react").ReactNode;
 export declare const elapsed: ColumnSpec;
+export declare const elapsedMax: ColumnSpec;
 export declare const entryCount: ColumnSpec;
 export declare const entryId: ColumnSpec;
 export declare const error: ColumnSpec;

package/build/types/admin/tabs/activity/tracking/chart/AggChartModel.d.ts

@@ -30,4 +30,5 @@ export declare class AggChartModel extends HoistModel {
     private loadChart;
     private getSeriesData;
     private getDisplayName;
+    private onSelectableMetricsChange;
 }

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

@@ -60,10 +60,7 @@ export interface GridFilterModelConfig {
      * gridModel's store.
      */
     bind?: Store | View;
-    /**
-     * True to update filters immediately after each change made in the column-based filter UI.
-     * Defaults to False.
-     */
+    /** True (default) to update filters immediately after each change made in the column-based filter UI.*/
     commitOnChange?: boolean;
     /**
      * Specifies the fields this model supports for filtering. Should be configs for

package/build/types/desktop/cmp/grid/impl/filter/headerfilter/values/ValuesTabModel.d.ts

@@ -11,7 +11,6 @@ export declare class ValuesTabModel extends HoistModel {
     pendingValues: any[];
     /** Bound search term for `StoreFilterField` */
     filterText: string;
-    combineCurrentFilters: boolean;
     /** FieldFilter output by this model. */
     get filter(): FieldFilterSpec;
     get allVisibleRecsChecked(): boolean;
@@ -27,7 +26,6 @@ export declare class ValuesTabModel extends HoistModel {
     reset(): void;
     setRecsChecked(isChecked: boolean, values: any[]): void;
     toggleAllRecsChecked(): void;
-    setPendingValues(): void;
     private getFilter;
     private doSyncWithFilter;
     private syncGrid;

package/cmp/grid/Types.ts

@@ -90,10 +90,7 @@ export interface GridFilterModelConfig {
      */
     bind?: Store | View;
 
-    /**
-     * True to update filters immediately after each change made in the column-based filter UI.
-     * Defaults to False.
-     */
+    /** True (default) to update filters immediately after each change made in the column-based filter UI.*/
     commitOnChange?: boolean;
 
     /**

package/cmp/grid/filter/GridFilterModel.ts

@@ -46,7 +46,7 @@ export class GridFilterModel extends HoistModel {
     static BLANK_PLACEHOLDER = '[blank]';
 
     constructor(
-        {bind, commitOnChange = false, fieldSpecs, fieldSpecDefaults}: GridFilterModelConfig,
+        {bind, commitOnChange = true, fieldSpecs, fieldSpecDefaults}: GridFilterModelConfig,
         gridModel: GridModel
     ) {
         super();

package/desktop/cmp/grid/impl/filter/headerfilter/values/ValuesTab.scss

@@ -1,17 +1,4 @@
 .xh-values-filter-tab {
-  .store-filter-header {
-    padding: 5px 7px;
-    border-bottom: 1px solid var(--xh-grid-header-border-color);
-    row-gap: 5px;
-    .bp5-control-indicator {
-      font-size: 1em;
-    }
-    span {
-      font-size: var(--xh-grid-compact-header-font-size-px);
-      color: var(--xh-grid-header-text-color);
-    }
-  }
-
   &__hidden-values-message {
     display: flex;
     padding: var(--xh-pad-half-px);

package/desktop/cmp/grid/impl/filter/headerfilter/values/ValuesTab.ts

@@ -5,11 +5,10 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 import {grid} from '@xh/hoist/cmp/grid';
-import {div, hframe, placeholder, span, vbox, vframe} from '@xh/hoist/cmp/layout';
+import {div, placeholder, vframe} from '@xh/hoist/cmp/layout';
 import {storeFilterField} from '@xh/hoist/cmp/store';
 import {hoistCmp, uses} from '@xh/hoist/core';
 import {button} from '@xh/hoist/desktop/cmp/button';
-import {checkbox} from '@xh/hoist/desktop/cmp/input';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
 import {Icon} from '@xh/hoist/icon';
@@ -48,33 +47,7 @@ const tbar = hoistCmp.factory(() => {
 const body = hoistCmp.factory<ValuesTabModel>(({model}) => {
     const {isCustomFilter} = model.headerFilterModel;
     if (isCustomFilter) return customFilterPlaceholder();
-    return vframe(storeFilterSelect(), grid(), hiddenValuesMessage());
-});
-
-const storeFilterSelect = hoistCmp.factory<ValuesTabModel>(({model}) => {
-    const {gridModel, allVisibleRecsChecked, filterText, headerFilterModel} = model,
-        {store} = gridModel;
-    return vbox({
-        className: 'store-filter-header',
-        items: [
-            hframe(
-                checkbox({
-                    disabled: store.empty,
-                    displayUnsetState: true,
-                    value: allVisibleRecsChecked,
-                    onChange: () => model.toggleAllRecsChecked()
-                }),
-                span(`(Select All${filterText ? ' Search Results' : ''})`)
-            ),
-            hframe({
-                omit: !filterText || store.empty || headerFilterModel.commitOnChange,
-                items: [
-                    checkbox({bind: 'combineCurrentFilters'}),
-                    span(`Add current selection to filter`)
-                ]
-            })
-        ]
-    });
+    return vframe(grid(), hiddenValuesMessage());
 });
 
 const customFilterPlaceholder = hoistCmp.factory<ValuesTabModel>(({model}) => {

package/desktop/cmp/grid/impl/filter/headerfilter/values/ValuesTabModel.ts

@@ -10,7 +10,7 @@ import {FieldFilterSpec} from '@xh/hoist/data';
 import {HeaderFilterModel} from '../HeaderFilterModel';
 import {checkbox} from '@xh/hoist/desktop/cmp/input';
 import {action, bindable, computed, makeObservable, observable} from '@xh/hoist/mobx';
-import {castArray, difference, flatten, isEmpty, map, partition, uniq, without} from 'lodash';
+import {castArray, difference, isEmpty, partition, uniq, without} from 'lodash';
 
 export class ValuesTabModel extends HoistModel {
     override xhImpl = true;
@@ -26,12 +26,6 @@ export class ValuesTabModel extends HoistModel {
     /** Bound search term for `StoreFilterField` */
     @bindable filterText: string = null;
 
-    /*
-     * Available only when commit on change is false merge
-     * current filter with pendingValues on commit
-     */
-    @bindable combineCurrentFilters: boolean = false;
-
     /** FieldFilter output by this model. */
     @computed.struct
     get filter(): FieldFilterSpec {
@@ -87,18 +81,11 @@ export class ValuesTabModel extends HoistModel {
         this.headerFilterModel = headerFilterModel;
         this.gridModel = this.createGridModel();
 
-        this.addReaction(
-            {
-                track: () => this.pendingValues,
-                run: () => this.syncGrid(),
-                fireImmediately: true
-            },
-            {
-                track: () => [this.filterText, this.combineCurrentFilters],
-                run: () => this.setPendingValues(),
-                debounce: 300
-            }
-        );
+        this.addReaction({
+            track: () => this.pendingValues,
+            run: () => this.syncGrid(),
+            fireImmediately: true
+        });
     }
 
     syncWithFilter() {
@@ -128,23 +115,6 @@ export class ValuesTabModel extends HoistModel {
     //-------------------
     // Implementation
     //-------------------
-    @action
-    setPendingValues() {
-        if (!this.filterText) {
-            this.doSyncWithFilter();
-            this.syncGrid();
-            return;
-        }
-
-        const {records} = this.gridModel.store,
-            currentFilterValues = flatten(map(this.columnFilters, 'value')),
-            values = map(records, it => it.get('value'));
-
-        this.pendingValues = uniq(
-            this.combineCurrentFilters ? [...currentFilterValues, ...values] : values
-        );
-    }
-
     private getFilter() {
         const {gridFilterModel, pendingValues, values, valueCount, field} = this,
             included = pendingValues.map(it => gridFilterModel.fromDisplayValue(it)),
@@ -247,10 +217,17 @@ export class ValuesTabModel extends HoistModel {
             onRowClicked: ({data: record}) => {
                 this.setRecsChecked(!record.get('isChecked'), record.get('value'));
             },
-            hideHeaders: true,
             columns: [
                 {
                     field: 'isChecked',
+                    headerName: ({gridModel}) => {
+                        return checkbox({
+                            disabled: gridModel.store.empty,
+                            displayUnsetState: true,
+                            value: this.allVisibleRecsChecked,
+                            onChange: () => this.toggleAllRecsChecked()
+                        });
+                    },
                     width: 28,
                     autosizable: false,
                     pinned: true,
@@ -268,6 +245,7 @@ export class ValuesTabModel extends HoistModel {
                 },
                 {
                     field: 'value',
+                    displayName: '(Select All)',
                     align: 'left',
                     comparator: (v1, v2, sortDir, abs, {defaultComparator}) => {
                         const mul = sortDir === 'desc' ? -1 : 1;

package/desktop/cmp/grouping/GroupingChooser.scss

@@ -137,6 +137,10 @@
       color: var(--xh-text-color);
     }
 
+    .xh-toolbar--compact & {
+      height: 15px;
+    }
+
     // Matched to FilterChooser equivalent.
     & > .svg-inline--fa {
       width: 12px;

package/desktop/cmp/grouping/GroupingChooser.ts

@@ -47,8 +47,10 @@ export interface GroupingChooserProps extends ButtonProps<GroupingChooserModel>
  * @see GroupingChooserModel
  */
 export const [GroupingChooser, groupingChooser] = hoistCmp.withFactory<GroupingChooserProps>({
+    displayName: 'GroupingChooser',
     model: uses(GroupingChooserModel),
     className: 'xh-grouping-chooser',
+
     render(
         {
             model,
@@ -103,15 +105,13 @@ export const [GroupingChooser, groupingChooser] = hoistCmp.withFactory<GroupingC
                 ),
                 content: favoritesIsOpen
                     ? favoritesMenu({testId: favoritesMenuTestId})
-                    : editorIsOpen
-                      ? editor({
-                            popoverWidth,
-                            popoverMinHeight,
-                            popoverTitle,
-                            emptyText,
-                            testId: editorTestId
-                        })
-                      : null,
+                    : editor({
+                          popoverWidth,
+                          popoverMinHeight,
+                          popoverTitle,
+                          emptyText,
+                          testId: editorTestId
+                      }),
                 onInteraction: (nextOpenState, e) => {
                     if (
                         isOpen &&

package/package.json

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