@xh/hoist 72.0.0-SNAPSHOT.1737725354262 → 72.0.0-SNAPSHOT.1737748132453

package/CHANGELOG.md

@@ -15,7 +15,8 @@
 ### 🐞 Bug Fixes
 
 * Fixed `ViewManagerModel` unique name validation.
-* `GridModel.restoreDefaultsAsync()` now restores default filter rather than simply clearing it.
+* Fixed `GridModel.restoreDefaultsAsync()` to restore any default filter, rather than simply clearing it.
+* Improved suboptimal column state synchronization between `GridModel` and AG Grid.
 
 ### ⚙️ Technical
 

package/admin/jsonsearch/JsonSearchPanel.ts

@@ -0,0 +1,210 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2025 Extremely Heavy Industries Inc.
+ */
+
+import {toolbar, toolbarSep} from '@xh/hoist/desktop/cmp/toolbar';
+import {errorMessage} from '@xh/hoist/cmp/error';
+import {JsonBlobModel} from '@xh/hoist/admin/tabs/userData/jsonblob/JsonBlobModel';
+import {grid, gridCountLabel} from '@xh/hoist/cmp/grid';
+import {a, box, filler, h4, hframe, label, li, span, ul, vbox} from '@xh/hoist/cmp/layout';
+import {hoistCmp, useLocalModel} from '@xh/hoist/core';
+import {button} from '@xh/hoist/desktop/cmp/button';
+import {buttonGroupInput, jsonInput, textInput} from '@xh/hoist/desktop/cmp/input';
+import {panel} from '@xh/hoist/desktop/cmp/panel';
+import {Icon} from '@xh/hoist/icon';
+import {popover} from '@xh/hoist/kit/blueprint';
+import {clipboardButton} from '@xh/hoist/desktop/cmp/clipboard';
+import {startCase} from 'lodash';
+
+import {JsonSearchPanelImplModel} from './impl/JsonSearchPanelImplModel';
+
+export const [JsonSearchPanel, jsonSearchPanel] = hoistCmp.withFactory<JsonBlobModel>({
+    render() {
+        const impl = useLocalModel(JsonSearchPanelImplModel),
+            {error} = impl;
+
+        return panel({
+            title: 'JSON Path Search',
+            icon: Icon.json(),
+            modelConfig: {
+                side: 'right',
+                defaultSize: '75%',
+                collapsible: true,
+                defaultCollapsed: true
+            },
+            compactHeader: true,
+            tbar: searchTbar({model: impl}),
+            flex: 1,
+            item: panel({
+                mask: impl.docLoadTask,
+                items: [
+                    errorMessage({
+                        error,
+                        title: error?.name ? startCase(error.name) : undefined
+                    }),
+                    hframe({
+                        omit: impl.error,
+                        items: [
+                            panel({
+                                item: grid({model: impl.gridModel})
+                            }),
+                            panel({
+                                mask: impl.nodeLoadTask,
+                                tbar: nodeTbar({model: impl}),
+                                bbar: nodeBbar({
+                                    omit: !impl.asPathList,
+                                    model: impl
+                                }),
+                                item: jsonInput({
+                                    model: impl,
+                                    bind: 'matchingNodes',
+                                    flex: 1,
+                                    width: '100%',
+                                    readonly: true,
+                                    showCopyButton: true
+                                })
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    }
+});
+
+const searchTbar = hoistCmp.factory<JsonSearchPanelImplModel>(({model}) => {
+    return toolbar(
+        pathField({model}),
+        helpButton(),
+        toolbarSep(),
+        gridCountLabel({
+            gridModel: model.gridModel,
+            unit: 'document'
+        })
+    );
+});
+
+const pathField = hoistCmp.factory<JsonSearchPanelImplModel>({
+    render({model}) {
+        return textInput({
+            bind: 'path',
+            autoFocus: true,
+            commitOnChange: true,
+            leftIcon: Icon.search(),
+            enableClear: true,
+            placeholder:
+                "JSON Path - e.g. $..[?(@.colId == 'trader')] - type a path and hit ENTER to search",
+            width: null,
+            flex: 1,
+            onKeyDown: e => {
+                if (e.key === 'Enter') model.loadJsonDocsAsync();
+            }
+        });
+    }
+});
+
+const helpButton = hoistCmp.factory({
+    model: false,
+    render() {
+        return popover({
+            item: button({
+                icon: Icon.questionCircle(),
+                outlined: true
+            }),
+            content: vbox({
+                style: {
+                    padding: '0px 20px 10px 20px'
+                },
+                items: [
+                    h4('Sample Queries'),
+                    ul({
+                        style: {listStyleType: 'none'},
+                        items: [
+                            {
+                                query: "$..[?(@.colId == 'trader')]",
+                                explanation:
+                                    'Find all nodes with a property "colId" equal to "trader"'
+                            }
+                        ].map(({query, explanation}) =>
+                            li({
+                                key: query,
+                                items: [
+                                    span({
+                                        className:
+                                            'xh-border xh-pad-half xh-bg-alt xh-font-family-mono',
+                                        item: query
+                                    }),
+                                    ' ',
+                                    clipboardButton({
+                                        text: null,
+                                        icon: Icon.copy(),
+                                        getCopyText: () => query,
+                                        successMessage: 'Query copied to clipboard.'
+                                    }),
+                                    ' ',
+                                    explanation
+                                ]
+                            })
+                        )
+                    }),
+                    a({
+                        href: 'https://github.com/json-path/JsonPath?tab=readme-ov-file#operators',
+                        target: '_blank',
+                        item: 'Path Syntax Docs & More Examples'
+                    })
+                ]
+            })
+        });
+    }
+});
+
+const nodeTbar = hoistCmp.factory<JsonSearchPanelImplModel>(({model}) => {
+    return toolbar(
+        buttonGroupInput({
+            model,
+            bind: 'pathOrValue',
+            minimal: true,
+            outlined: true,
+            items: [
+                button({
+                    text: 'Path',
+                    value: 'path'
+                }),
+                button({
+                    text: 'Value',
+                    value: 'value'
+                })
+            ]
+        }),
+        filler(),
+        box({
+            omit: !model.matchingNodeCount,
+            item: `${model.matchingNodeCount} ${model.matchingNodeCount === 1 ? 'match' : 'matches'}`
+        })
+    );
+});
+
+const nodeBbar = hoistCmp.factory<JsonSearchPanelImplModel>(({model}) => {
+    return toolbar(
+        label('Path Format:'),
+        buttonGroupInput({
+            model,
+            bind: 'pathFormat',
+            minimal: true,
+            outlined: true,
+            items: [
+                button({
+                    text: 'XPath',
+                    value: 'XPath'
+                }),
+                button({
+                    text: 'JSONPath',
+                    value: 'JSONPath'
+                })
+            ]
+        })
+    );
+});

package/admin/jsonsearch/impl/JsonSearchPanelImplModel.ts

@@ -0,0 +1,130 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2025 Extremely Heavy Industries Inc.
+ */
+
+import {GridModel} from '@xh/hoist/cmp/grid';
+import {HoistModel, managed, TaskObserver, XH} from '@xh/hoist/core';
+import {bindable, makeObservable} from '@xh/hoist/mobx';
+import {isEmpty} from 'lodash';
+
+/**
+ * @internal
+ */
+export class JsonSearchPanelImplModel extends HoistModel {
+    override xhImpl = true;
+
+    @managed gridModel: GridModel;
+    @managed docLoadTask: TaskObserver = TaskObserver.trackLast();
+    @managed nodeLoadTask: TaskObserver = TaskObserver.trackLast();
+
+    @bindable.ref error = null;
+    @bindable path: string = '';
+    @bindable pathOrValue: 'path' | 'value' = 'value';
+    @bindable pathFormat: 'XPath' | 'JSONPath' = 'XPath';
+    @bindable matchingNodes: string = '';
+    @bindable matchingNodeCount: number = 0;
+
+    get asPathList(): boolean {
+        return this.pathOrValue === 'path';
+    }
+
+    get queryBuffer(): number {
+        return this.componentProps.queryBuffer ?? 200;
+    }
+
+    get docSearchUrl(): string {
+        return this.componentProps.docSearchUrl;
+    }
+
+    get matchingNodesUrl(): string {
+        return this.componentProps.matchingNodesUrl;
+    }
+
+    get gridModelConfig() {
+        return this.componentProps.gridModelConfig;
+    }
+
+    constructor() {
+        super();
+        makeObservable(this);
+    }
+
+    override onLinked() {
+        this.gridModel = new GridModel({
+            ...this.gridModelConfig,
+            selModel: 'single'
+        });
+
+        this.addReaction(
+            {
+                track: () => this.path,
+                run: path => {
+                    if (isEmpty(path)) {
+                        this.error = null;
+                        this.gridModel.clear();
+                    }
+                }
+            },
+            {
+                track: () => [this.gridModel.selectedRecord, this.pathOrValue, this.pathFormat],
+                run: () => this.loadJsonNodesAsync(),
+                debounce: 300
+            }
+        );
+    }
+
+    async loadJsonDocsAsync() {
+        if (isEmpty(this.path)) {
+            this.error = null;
+            this.gridModel.clear();
+            return;
+        }
+
+        try {
+            const data = await XH.fetchJson({
+                url: this.docSearchUrl,
+                params: {path: this.path}
+            }).linkTo(this.docLoadTask);
+
+            this.error = null;
+            this.gridModel.loadData(data);
+            this.gridModel.selectFirstAsync();
+        } catch (e) {
+            this.gridModel.clear();
+            this.error = e;
+        }
+    }
+
+    private async loadJsonNodesAsync() {
+        if (!this.gridModel.selectedRecord) {
+            this.matchingNodeCount = 0;
+            this.matchingNodes = '';
+            return;
+        }
+
+        let nodes = await XH.fetchJson({
+            url: this.matchingNodesUrl,
+            params: {
+                path: this.path,
+                asPathList: this.pathOrValue === 'path',
+                json: this.gridModel.selectedRecord.data.json
+            }
+        }).linkTo(this.nodeLoadTask);
+
+        this.matchingNodeCount = nodes.length;
+        if (this.asPathList && this.pathFormat === 'XPath') {
+            nodes = nodes.map(it => this.convertToPath(it));
+        }
+        this.matchingNodes = JSON.stringify(nodes, null, 2);
+    }
+
+    private convertToPath(JSONPath: string): string {
+        return JSONPath.replaceAll(/^\$\['?/g, '/')
+            .replaceAll(/^\$/g, '')
+            .replaceAll(/'?]\['?/g, '/')
+            .replaceAll(/'?]$/g, '');
+    }
+}

package/admin/tabs/userData/jsonblob/JsonBlobPanel.ts

@@ -5,9 +5,13 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 
-import {fragment} from '@xh/hoist/cmp/layout';
+import * as Col from '@xh/hoist/admin/columns/Rest';
+import * as AdminCol from '@xh/hoist/admin/columns';
+import {hframe} from '@xh/hoist/cmp/layout';
 import {creates, hoistCmp} from '@xh/hoist/core';
 import {button} from '@xh/hoist/desktop/cmp/button';
+import {jsonSearchPanel} from '@xh/hoist/admin/jsonsearch/JsonSearchPanel';
+import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {restGrid} from '@xh/hoist/desktop/cmp/rest';
 import {Icon} from '@xh/hoist/icon';
 import {differ} from '../../../differ/Differ';
@@ -17,14 +21,48 @@ export const jsonBlobPanel = hoistCmp.factory({
     model: creates(JsonBlobModel),
 
     render({model}) {
-        return fragment(
-            restGrid({
-                extraToolbarItems: () => {
-                    return button({
-                        icon: Icon.diff(),
-                        text: 'Compare w/ Remote',
-                        onClick: () => model.openDiffer()
-                    });
+        return hframe(
+            panel({
+                item: restGrid({
+                    extraToolbarItems: () => {
+                        return button({
+                            icon: Icon.diff(),
+                            text: 'Compare w/ Remote',
+                            onClick: () => model.openDiffer()
+                        });
+                    }
+                })
+            }),
+            jsonSearchPanel({
+                docSearchUrl: 'jsonBlobSearchAdmin/searchByJsonPath',
+                matchingNodesUrl: 'jsonBlobSearchAdmin/getMatchingNodes',
+                gridModelConfig: {
+                    sortBy: ['owner', 'name'],
+                    store: {
+                        idSpec: 'token'
+                    },
+                    groupBy: 'type',
+                    columns: [
+                        {
+                            field: {name: 'token', type: 'string'},
+                            hidden: true,
+                            width: 100
+                        },
+                        {
+                            field: {name: 'type', type: 'string'},
+                            width: 200
+                        },
+                        {
+                            field: {name: 'owner', type: 'string'},
+                            width: 200
+                        },
+                        {...AdminCol.name},
+                        {
+                            field: {name: 'json', type: 'string'},
+                            hidden: true
+                        },
+                        {...Col.lastUpdated}
+                    ]
                 }
             }),
             differ({omit: !model.differModel})

package/admin/tabs/userData/prefs/UserPreferencePanel.ts

@@ -4,10 +4,14 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
+import * as Col from '@xh/hoist/admin/columns/Rest';
+import * as AdminCol from '@xh/hoist/admin/columns';
 import {prefEditorDialog} from '@xh/hoist/admin/tabs/userData/prefs/editor/PrefEditorDialog';
 import {UserPreferenceModel} from '@xh/hoist/admin/tabs/userData/prefs/UserPreferenceModel';
+import {hframe} from '@xh/hoist/cmp/layout';
 import {creates, hoistCmp} from '@xh/hoist/core';
 import {button} from '@xh/hoist/desktop/cmp/button';
+import {jsonSearchPanel} from '@xh/hoist/admin/jsonsearch/JsonSearchPanel';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {restGrid} from '@xh/hoist/desktop/cmp/rest';
 import {Icon} from '@xh/hoist/icon';
@@ -16,20 +20,43 @@ export const userPreferencePanel = hoistCmp.factory({
     model: creates(UserPreferenceModel),
 
     render({model}) {
-        return panel({
-            items: [
-                restGrid({
-                    extraToolbarItems: () => {
-                        return button({
-                            icon: Icon.gear(),
-                            text: 'Configure',
-                            onClick: () => (model.showEditorDialog = true)
-                        });
-                    }
-                }),
-                prefEditorDialog()
-            ],
-            mask: 'onLoad'
-        });
+        return hframe(
+            panel({
+                items: [
+                    restGrid({
+                        extraToolbarItems: () => {
+                            return button({
+                                icon: Icon.gear(),
+                                text: 'Configure',
+                                onClick: () => (model.showEditorDialog = true)
+                            });
+                        }
+                    }),
+                    prefEditorDialog()
+                ],
+                mask: 'onLoad'
+            }),
+            jsonSearchPanel({
+                docSearchUrl: 'preferenceJsonSearchAdmin/searchByJsonPath',
+                matchingNodesUrl: 'preferenceJsonSearchAdmin/getMatchingNodes',
+                gridModelConfig: {
+                    sortBy: ['name'],
+                    groupBy: 'groupName',
+                    columns: [
+                        {
+                            field: {name: 'owner', type: 'string'},
+                            width: 200
+                        },
+                        {...AdminCol.groupName},
+                        {...AdminCol.name},
+                        {
+                            field: {name: 'json', type: 'string'},
+                            hidden: true
+                        },
+                        {...Col.lastUpdated}
+                    ]
+                }
+            })
+        );
     }
 });

package/build/types/admin/jsonsearch/JsonSearchPanel.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { JsonBlobModel } from '@xh/hoist/admin/tabs/userData/jsonblob/JsonBlobModel';
+export declare const JsonSearchPanel: import("react").FC<import("@xh/hoist/core").DefaultHoistProps<JsonBlobModel>>, jsonSearchPanel: import("@xh/hoist/core").ElementFactory<import("@xh/hoist/core").DefaultHoistProps<JsonBlobModel>>;

package/build/types/admin/jsonsearch/impl/JsonSearchPanelImplModel.d.ts

@@ -0,0 +1,27 @@
+import { GridModel } from '@xh/hoist/cmp/grid';
+import { HoistModel, TaskObserver } from '@xh/hoist/core';
+/**
+ * @internal
+ */
+export declare class JsonSearchPanelImplModel extends HoistModel {
+    xhImpl: boolean;
+    gridModel: GridModel;
+    docLoadTask: TaskObserver;
+    nodeLoadTask: TaskObserver;
+    error: any;
+    path: string;
+    pathOrValue: 'path' | 'value';
+    pathFormat: 'XPath' | 'JSONPath';
+    matchingNodes: string;
+    matchingNodeCount: number;
+    get asPathList(): boolean;
+    get queryBuffer(): number;
+    get docSearchUrl(): string;
+    get matchingNodesUrl(): string;
+    get gridModelConfig(): any;
+    constructor();
+    onLinked(): void;
+    loadJsonDocsAsync(): Promise<void>;
+    private loadJsonNodesAsync;
+    private convertToPath;
+}

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

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 /// <reference types="lodash" />
-import { HoistModel, HoistProps, LayoutProps, PlainObject, TestSupportProps } from '@xh/hoist/core';
+import { GridApi } from '@ag-grid-community/core';
+import { ColumnState } from '@xh/hoist/cmp/grid';
+import { HoistModel, HoistProps, LayoutProps, PlainObject, ReactionSpec, TestSupportProps } from '@xh/hoist/core';
 import { RecordSet } from '@xh/hoist/data/impl/RecordSet';
 import type { ColDef, ColGroupDef, GetContextMenuItemsParams, GridOptions, GridReadyEvent, ProcessCellForExportParams } from '@xh/hoist/kit/ag-grid';
 import './Grid.scss';
@@ -53,7 +55,7 @@ export declare class GridLocalModel extends HoistModel {
     onLinked(): void;
     private createDefaultAgOptions;
     getColumnDefs(): Array<ColDef | ColGroupDef>;
-    getContextMenuItems: (params: GetContextMenuItemsParams) => (string | import("@xh/hoist/kit/ag-grid").MenuItemDef<any, any>)[];
+    getContextMenuItems: (params: GetContextMenuItemsParams) => (string | import("@ag-grid-community/core").MenuItemDef<any, any>)[];
     dataReaction(): {
         track: () => (boolean | import("@xh/hoist/core").VSide | import("../../data").StoreRecord[] | RecordSet)[];
         run: () => void;
@@ -63,11 +65,11 @@ export declare class GridLocalModel extends HoistModel {
         run: () => void;
     };
     sortReaction(): {
-        track: () => (import("@xh/hoist/kit/ag-grid").GridApi<any> | import("@xh/hoist/cmp/grid").GridSorter[])[];
+        track: () => (GridApi<any> | import("@xh/hoist/cmp/grid").GridSorter[])[];
         run: ([agApi, sortBy]: [any, any]) => void;
     };
     groupReaction(): {
-        track: () => (string[] | import("@xh/hoist/kit/ag-grid").GridApi<any>)[];
+        track: () => (string[] | GridApi<any>)[];
         run: ([agApi, groupBy]: [any, any]) => void;
     };
     get calculatedRowHeight(): any;
@@ -83,13 +85,10 @@ export declare class GridLocalModel extends HoistModel {
     get useScrollOptimization(): boolean;
     applyScrollOptimization(): void;
     columnsReaction(): {
-        track: () => (import("@xh/hoist/kit/ag-grid").GridApi<any> | (import("@xh/hoist/cmp/grid").Column | import("@xh/hoist/cmp/grid").ColumnGroup)[])[];
+        track: () => (GridApi<any> | (import("@xh/hoist/cmp/grid").Column | import("@xh/hoist/cmp/grid").ColumnGroup)[])[];
         run: ([api]: [any]) => void;
     };
-    columnStateReaction(): {
-        track: () => (import("@xh/hoist/kit/ag-grid").GridApi<any> | import("@xh/hoist/cmp/grid").ColumnState[])[];
-        run: ([api, colState]: [any, any]) => void;
-    };
+    columnStateReaction(): ReactionSpec<[GridApi, ColumnState[]]>;
     sizingModeReaction(): {
         track: () => import("@xh/hoist/core").SizingMode;
         run: () => void;
@@ -126,7 +125,7 @@ export declare class GridLocalModel extends HoistModel {
     readFilterState(): import("@ag-grid-community/core").FilterModel;
     writeFilterState(filterState: any): void;
     processCellForClipboard: ({ value, node, column }: ProcessCellForExportParams) => any;
-    navigateToNextCell: (agParams: any) => import("@xh/hoist/kit/ag-grid").CellPosition;
+    navigateToNextCell: (agParams: any) => import("@ag-grid-community/core").CellPosition;
     onCellMouseDown: (evt: any) => void;
     onKeyDown: (evt: any) => void;
     onRowClicked: (evt: any) => void;

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

@@ -1,4 +1,4 @@
-import { CellClickedEvent, CellContextMenuEvent, CellDoubleClickedEvent, RowClickedEvent, RowDoubleClickedEvent } from '@ag-grid-community/core';
+import { CellClickedEvent, CellContextMenuEvent, CellDoubleClickedEvent, ColumnState as AgColumnState, RowClickedEvent, RowDoubleClickedEvent } from '@ag-grid-community/core';
 import { AgGridModel } from '@xh/hoist/cmp/ag-grid';
 import { Column, ColumnGroup, ColumnGroupSpec, ColumnSpec, GridAutosizeMode, GridFilterModelConfig, GridGroupSortFn, TreeStyle } from '@xh/hoist/cmp/grid';
 import { GridFilterModel } from '@xh/hoist/cmp/grid/filter/GridFilterModel';
@@ -430,7 +430,7 @@ export declare class GridModel extends HoistModel {
     setColumns(colConfigs: Array<ColumnSpec | ColumnGroupSpec>): void;
     setColumnState(colState: Partial<ColumnState>[]): void;
     showColChooser(): void;
-    noteAgColumnStateChanged(agColState: any): void;
+    noteAgColumnStateChanged(agColState: AgColumnState[]): void;
     setExpandState(expandState: any): void;
     noteAgExpandStateChange(): void;
     noteAgSelectionStateChanged(): void;

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