merge conflict and catchup

CHANGELOG.md

@@ -9,15 +9,26 @@
   * Addition of ability to append terms to active filter **only** when `commitOnChage:false`
   * Column header filtering functionality now similar to Excel on Windows
 
+### 💥 Breaking Changes
+
+* Mobile `Navigator` no longer supports `animation` prop, and `NavigatorModel` no longer supports
+  `swipeToGoBack`. Both of these properties are now managed internally by the `Navigator` component.
+
+### 🎁 New Features
+
+* Mobile `Navigator` has been rebuilt to support smooth swipe-based navigation. The API remains
+  largely the same, notwithstanding the minor breaking changes detailed above.
+
 ### 🐞 Bug Fixes
 
 * Fixed `ViewManagerModel` unique name validation.
+* Fixed `GridModel.restoreDefaultsAsync()` to restore any default filter, rather than simply clearing it.
+* Improved suboptimal column state synchronization between `GridModel` and AG Grid.
 
 ### ⚙️ Technical
 
 * Added support for providing custom `PersistenceProvider` implementations to `PersistOptions`.
 
-
 ### ⚙️ Typescript API Adjustments
 
 * Improved signature of `HoistBase.markPersist`.

admin/columns/Tracking.ts

@@ -37,6 +37,16 @@ export const browser: ColumnSpec = {
     width: 100
 };
 
+export const severity: ColumnSpec = {
+    field: {
+        name: 'severity',
+        type: 'string',
+        isDimension: true,
+        aggregator: 'UNIQUE'
+    },
+    width: 80
+};
+
 export const category: ColumnSpec = {
     field: {
         name: 'category',

admin/tabs/activity/tracking/ActivityTrackingModel.ts

@@ -87,6 +87,7 @@ export class ActivityTrackingModel extends HoistModel {
             fields: [
                 Col.browser.field,
                 Col.category.field,
+                Col.severity.field,
                 Col.correlationId.field,
                 Col.data.field,
                 {...(Col.dateCreated.field as FieldSpec), displayName: 'Timestamp'},
@@ -131,6 +132,7 @@ export class ActivityTrackingModel extends HoistModel {
                 {field: 'userAgent'},
                 {field: 'url', displayName: 'URL'},
                 {field: 'instance'},
+                {field: 'severity'},
                 {field: 'appVersion'},
                 {field: 'appEnvironment', displayName: 'Environment'}
             ]

admin/tabs/activity/tracking/detail/ActivityDetailModel.ts

@@ -58,6 +58,7 @@ export class ActivityDetailModel extends HoistModel {
                 {...Col.url},
                 {...Col.correlationId},
                 {...Col.instance, hidden},
+                {...Col.severity, hidden},
                 {...Col.elapsed},
                 {...Col.dateCreatedWithSec, displayName: 'Timestamp'}
             ]

admin/tabs/cluster/instances/InstancesTabModel.ts

@@ -17,12 +17,11 @@ import {memoryMonitorPanel} from '@xh/hoist/admin/tabs/cluster/instances/memory/
 import {servicePanel} from '@xh/hoist/admin/tabs/cluster/instances/services/ServicePanel';
 import {webSocketPanel} from '@xh/hoist/admin/tabs/cluster/instances/websocket/WebSocketPanel';
 import {badge} from '@xh/hoist/cmp/badge';
-import {GridModel, numberCol} from '@xh/hoist/cmp/grid';
+import {GridContextMenuSpec, GridModel, numberCol} from '@xh/hoist/cmp/grid';
 import {hbox} from '@xh/hoist/cmp/layout';
 import {getRelativeTimestamp} from '@xh/hoist/cmp/relativetimestamp';
 import {TabContainerModel, TabModel} from '@xh/hoist/cmp/tab';
 import {HoistModel, LoadSpec, lookup, managed, PlainObject, XH} from '@xh/hoist/core';
-import {RecordActionSpec} from '@xh/hoist/data';
 import {Icon} from '@xh/hoist/icon';
 import {makeObservable} from '@xh/hoist/mobx';
 import {Timer} from '@xh/hoist/utils/async';
@@ -38,15 +37,6 @@ export class InstancesTabModel extends HoistModel {
     @managed readonly tabContainerModel: TabContainerModel = this.createTabContainerModel();
     @managed readonly timer: Timer;
 
-    shutdownAction: RecordActionSpec = {
-        icon: Icon.skull(),
-        text: 'Shutdown Instance',
-        intent: 'danger',
-        actionFn: ({record}) => this.shutdownInstanceAsync(record.data),
-        displayFn: () => ({hidden: AppModel.readonly}),
-        recordsRequired: 1
-    };
-
     get instance(): PlainObject {
         return this.gridModel.selectedRecord?.data;
     }
@@ -182,10 +172,25 @@ export class InstancesTabModel extends HoistModel {
                     rendererIsComplex: true
                 }
             ],
-            contextMenu: [this.shutdownAction, '-', ...GridModel.defaultContextMenu]
+            contextMenu: this.createContextMenu()
         });
     }
 
+    private createContextMenu(): GridContextMenuSpec {
+        return [
+            {
+                icon: Icon.skull(),
+                text: 'Shutdown Instance',
+                intent: 'danger',
+                actionFn: ({record}) => this.shutdownInstanceAsync(record.data),
+                displayFn: () => ({hidden: AppModel.readonly}),
+                recordsRequired: 1
+            },
+            '-',
+            ...GridModel.defaultContextMenu
+        ];
+    }
+
     private createTabContainerModel() {
         return new TabContainerModel({
             route: 'default.cluster.instances',

cmp/ag-grid/AgGrid.scss

@@ -26,6 +26,12 @@
   .ag-floating-bottom {
     overflow-y: hidden !important;
   }
+
+  // Prevent the "bounce" overscroll effect for horizontal scrolling on mobile devices, as it
+  // conflicts with the drag management in the Navigator.
+  .ag-center-cols-viewport {
+    overscroll-behavior-x: none;
+  }
 }
 
 // Ag-Grid themes referenced here to help ensure a high enough level of specificity for our rules.

cmp/ag-grid/AgGridModel.ts

@@ -395,7 +395,7 @@ export class AgGridModel extends HoistModel {
             ];
 
         let {isPivot, columns} = colState;
-        agApi.setPivotMode(isPivot);
+        agApi.setGridOption('pivotMode', isPivot);
 
         if (isPivot && columns.some(it => !isNil(it.pivotIndex) && it.pivotIndex >= 0)) {
             // Exclude the auto group column as this causes issues with ag-grid when in pivot mode

cmp/grid/Grid.ts

@@ -4,9 +4,10 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
+import {ColumnState as AgColumnState, GridApi} from '@ag-grid-community/core';
 import composeRefs from '@seznam/compose-react-refs';
 import {agGrid, AgGrid} from '@xh/hoist/cmp/ag-grid';
-import {getTreeStyleClasses} from '@xh/hoist/cmp/grid';
+import {ColumnState, getTreeStyleClasses} from '@xh/hoist/cmp/grid';
 import {gridHScrollbar} from '@xh/hoist/cmp/grid/impl/GridHScrollbar';
 import {getAgGridMenuItems} from '@xh/hoist/cmp/grid/impl/MenuSupport';
 import {div, fragment, frame, vframe} from '@xh/hoist/cmp/layout';
@@ -17,6 +18,7 @@ import {
     LayoutProps,
     lookup,
     PlainObject,
+    ReactionSpec,
     TestSupportProps,
     useLocalModel,
     uses,
@@ -44,7 +46,7 @@ import {wait} from '@xh/hoist/promise';
 import {consumeEvent, isDisplayed, logWithDebug} from '@xh/hoist/utils/js';
 import {createObservableRef, getLayoutProps} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
-import {debounce, isEmpty, isEqual, isNil, max, maxBy, merge} from 'lodash';
+import {compact, debounce, isBoolean, isEmpty, isEqual, isNil, max, maxBy, merge} from 'lodash';
 import './Grid.scss';
 import {GridModel} from './GridModel';
 import {columnGroupHeader} from './impl/ColumnGroupHeader';
@@ -463,7 +465,7 @@ export class GridLocalModel extends HoistModel {
         };
     }
 
-    columnStateReaction() {
+    columnStateReaction(): ReactionSpec<[GridApi, ColumnState[]]> {
         const {model} = this;
         return {
             track: () => [model.agApi, model.columnState],
@@ -472,65 +474,57 @@ export class GridLocalModel extends HoistModel {
 
                 const agColState = api.getColumnState();
 
-                // 0) Insert the auto group col state if it exists, since we won't have it in our column state list
+                // Insert the auto group col state if it exists, since we won't have it in our column state list
                 const autoColState = agColState.find(c => c.colId === 'ag-Grid-AutoColumn');
                 if (autoColState) {
-                    colState.splice(agColState.indexOf(autoColState), 0, autoColState);
+                    const {colId, width, hide, pinned} = autoColState;
+                    colState.splice(agColState.indexOf(autoColState), 0, {
+                        colId,
+                        width,
+                        hidden: hide,
+                        pinned: isBoolean(pinned) ? (pinned ? 'left' : null) : pinned
+                    });
                 }
 
-                // 1) Columns all in right place -- simply update incorrect props we maintain
-                if (
-                    isEqual(
-                        colState.map(c => c.colId),
-                        agColState.map(c => c.colId)
-                    )
-                ) {
-                    let hasChanges = false;
-                    colState.forEach((col, index) => {
-                        const agCol = agColState[index],
-                            id = col.colId;
-
-                        if (agCol.width !== col.width) {
-                            api.setColumnWidths([{key: id, newWidth: col.width}]);
+                // Determine if column order has changed
+                const applyOrder = !isEqual(
+                    colState.map(c => c.colId),
+                    agColState.map(c => c.colId)
+                );
+
+                // Build a list of column state changes
+                colState = compact(
+                    colState.map(({colId, width, hidden, pinned}) => {
+                        const agCol: AgColumnState = agColState.find(c => c.colId === colId) || {
+                                colId
+                            },
+                            ret: any = {colId};
+
+                        let hasChanges = applyOrder;
+
+                        if (agCol.width !== width) {
+                            ret.width = width;
                             hasChanges = true;
                         }
-                        if (agCol.hide !== col.hidden) {
-                            api.setColumnsVisible([id], !col.hidden);
+
+                        if (agCol.hide !== hidden) {
+                            ret.hide = hidden;
                             hasChanges = true;
                         }
-                        if (agCol.pinned !== col.pinned) {
-                            api.setColumnsPinned([id], col.pinned);
+
+                        if (agCol.pinned !== pinned) {
+                            ret.pinned = pinned;
                             hasChanges = true;
                         }
-                    });
-
-                    // We need to tell agGrid to refresh its flexed column sizes due to
-                    // a regression introduced in 25.1.0.  See #2341
-                    if (hasChanges) {
-                        api.columnModel.refreshFlexedColumns({
-                            updateBodyWidths: true,
-                            fireResizedEvent: true
-                        });
-                    }
 
-                    return;
-                }
+                        return hasChanges ? ret : null;
+                    })
+                );
 
-                // 2) Otherwise do an (expensive) full refresh of column state
-                // Merge our state onto the ag column state to get any state which we do not yet support
-                colState = colState.map(({colId, width, hidden, pinned}) => {
-                    const agCol = agColState.find(c => c.colId === colId) || {};
-                    return {
-                        colId,
-                        ...agCol,
-                        width,
-                        pinned,
-                        hide: hidden
-                    };
-                });
+                if (isEmpty(colState)) return;
 
                 this.doWithPreservedState({expansion: false}, () => {
-                    api.applyColumnState({state: colState, applyOrder: true});
+                    api.applyColumnState({state: colState, applyOrder});
                 });
             }
         };
@@ -870,6 +864,7 @@ export class GridLocalModel extends HoistModel {
      * by conditionally stopping the focus event from propagating.
      */
     private static didAddFocusFixListener = false;
+
     static addFocusFixListener() {
         if (this.didAddFocusFixListener) return;
         document.addEventListener(

cmp/grid/GridModel.ts

@@ -9,6 +9,7 @@ import {
     CellContextMenuEvent,
     CellDoubleClickedEvent,
     ColumnEvent,
+    ColumnState as AgColumnState,
     RowClickedEvent,
     RowDoubleClickedEvent
 } from '@ag-grid-community/core';
@@ -77,6 +78,7 @@ import {
     first,
     forEach,
     isArray,
+    isBoolean,
     isEmpty,
     isFunction,
     isNil,
@@ -600,6 +602,7 @@ export class GridModel extends HoistModel {
         this.colChooserModel = this.parseChooserModel(colChooserModel);
         this.selModel = this.parseSelModel(selModel);
         this.filterModel = this.parseFilterModel(filterModel);
+        if (this.filterModel) this._defaultState.filter = this.filterModel.filter;
         if (persistWith) initPersist(this, persistWith);
         this.experimental = this.parseExperimental(experimental);
         this.onKeyDown = onKeyDown;
@@ -644,12 +647,12 @@ export class GridModel extends HoistModel {
             if (!confirmed) return false;
         }
 
-        const {columns, sortBy, groupBy} = this._defaultState;
+        const {columns, sortBy, groupBy, filter} = this._defaultState;
         this.setColumns(columns);
         this.setSortBy(sortBy);
         this.setGroupBy(groupBy);
 
-        this.filterModel?.clear();
+        this.filterModel?.setFilter(filter);
 
         if (this.autosizeOptions.mode === 'managed') {
             await this.autosizeAsync();
@@ -1072,17 +1075,19 @@ export class GridModel extends HoistModel {
         (this.colChooserModel as any)?.open();
     }
 
-    noteAgColumnStateChanged(agColState) {
-        const colStateChanges = agColState.map(({colId, width, hide, pinned}) => {
-            const col = this.findColumn(this.columns, colId);
-            if (!col) return null;
-            return {
-                colId,
-                pinned: pinned ?? null,
-                hidden: !!hide,
-                width: col.flex ? undefined : width
-            };
-        });
+    noteAgColumnStateChanged(agColState: AgColumnState[]) {
+        const colStateChanges: Partial<ColumnState>[] = agColState.map(
+            ({colId, width, hide, pinned}) => {
+                const col = this.findColumn(this.columns, colId);
+                if (!col) return null;
+                return {
+                    colId,
+                    pinned: isBoolean(pinned) ? (pinned ? 'left' : null) : pinned,
+                    hidden: !!hide,
+                    width: col.flex ? undefined : width
+                };
+            }
+        );
 
         pull(colStateChanges, null);
         this.applyColumnStateChanges(colStateChanges);

core/types/Interfaces.ts

@@ -193,6 +193,11 @@ export interface AppOptionSpec {
     omit?: Thunkable<boolean>;
 }
 
+/**
+ * Severity levels for tracking.  Default is 'INFO'.
+ */
+export type TrackSeverity = 'DEBUG' | 'INFO' | 'WARN';
+
 /**
  * Options for tracking activity on the server via TrackService.
  */
@@ -219,11 +224,16 @@ export interface TrackOptions {
     logData?: boolean | string[];
 
     /**
-     * Flag to indicate relative importance of activity.
-     * Default 'INFO'. Note, errors should be tracked via {@link XH.handleException}, which
+     * Flag to indicate relative importance of activity. Default 'INFO'.
+     *
+     * Allows conditional saving of messages depending on the currently active
+     * level configuration for the category/user.  See HoistCore's 'TrackService' for
+     * more information.
+     *
+     * Note, errors should be tracked via {@link XH.handleException}, which
      * will post to the server for dedicated logging if requested.
      */
-    severity?: string;
+    severity?: TrackSeverity;
 
     /**
      * Set to true to log this message only once during the current session. The category and