@xh/hoist 56.0.0 → 56.2.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 57.0.0-SNAPSHOT - unreleased
+
+## 56.2.0 - 2023-04-28
+* Expose `margin` property on DashContainerModel.
+
+### ⚙️ Technical
+* Optimize scrolling performance for `Grid` and `DataView`
+
+## 56.1.0 - 2023-04-14
+* Add support for new memory management diagnostics provided by hoist-core
+ (requires hoist-core 16.1.0 for full operation).
+
+### 🐞 Bug Fixes
+* Fixes bug with display/reporting of exceptions during app initialization sequence.
+
 ## v56.0.0 - 2023-03-29
 
 ### 🎁 New Features
@@ -10,8 +25,6 @@
 * New `FetchService.abort()` API allows manually aborting a pending fetch request.
 * Hoist exceptions have been enhanced and standardized, including new TypeScript types. The
   `Error.cause` property is now populated for wrapping exceptions.
-* `PanelModel` now supports a `defaultSize` property specified in percentage as well as pixels
-  (e.g. `defaultSize: '20%'` as well as `defaultSize: 200`).
 * New `GridModel.headerMenuDisplay` config for limiting column header menu visibility to on hover.
 
 ### 💥 Breaking Changes
@@ -20,10 +33,11 @@
 * Requires AG Grid v29.0.0 or higher - update your AG Grid dependency in your app's `package.json`
   file. See the [AG Grid Changelog](https://www.ag-grid.com/changelog) for details.
     * Add a dependency on `@ag-grid-community/styles` to import new dedicated styles package.
-    * Imports of AG Grid CSS files within your app's `Bootstrap.ts` file will also need to be updated to import styles from their new location. The recommended imports are now:
+    * Imports of AG Grid CSS files within your app's `Bootstrap.ts` file will also need to be
+      updated to import styles from their new location. The recommended imports are now:
 ```typescript
 import '@ag-grid-community/styles/ag-grid.css';
-import '@ag-grid-community/styles/ag-theme-balham-no-font.css';
+import '@ag-grid-community/styles/ag-theme-balham.css';
 ```
 * New `xhActivityTrackingConfig` soft-configuration entry places new limits on the size of
   any `data` objects passed to `XH.track()` calls.

package/admin/tabs/general/about/AboutPanel.ts

@@ -91,13 +91,14 @@ function renderBlurb() {
             xhLogo(),
             div(
                 p(
-                    'Built with Hoist: a plugin for rich web-application development provided by ',
+                    'Built with Hoist, a toolkit for rapid application development from ',
                     a({
-                        href: 'http://xh.io',
+                        href: 'https://xh.io',
                         target: '_blank',
                         rel: 'noopener noreferrer',
                         item: 'Extremely Heavy'
-                    })
+                    }),
+                    '.'
                 ),
                 p(
                     'Please contact ',

package/admin/tabs/monitor/MonitorColumns.ts

@@ -9,7 +9,8 @@ import * as Col from '@xh/hoist/cmp/grid/columns';
 import {ColumnSpec} from '@xh/hoist/cmp/grid/columns';
 
 const mbCol = {width: 150, renderer: numberRenderer({precision: 2, withCommas: true})},
-    pctCol = {width: 150, renderer: numberRenderer({precision: 2, withCommas: true, label: '%'})};
+    pctCol = {width: 150, renderer: numberRenderer({precision: 2, withCommas: true, label: '%'})},
+    msCol = {width: 150, renderer: numberRenderer({precision: 0, withCommas: false})};
 
 export const metricUnit: ColumnSpec = {
     field: {name: 'metricUnit', type: 'string'},
@@ -84,11 +85,38 @@ export const usedHeapMb: ColumnSpec = {
     ...mbCol
 };
 
-export const usedPctTotal: ColumnSpec = {
+export const usedPctMax: ColumnSpec = {
     field: {
-        name: 'usedPctTotal',
+        name: 'usedPctMax',
         type: 'number',
-        displayName: 'Used (pct Total)'
+        displayName: 'Used (pct Max)'
+    },
+    ...pctCol
+};
+
+export const avgCollectionTime: ColumnSpec = {
+    field: {
+        name: 'avgCollectionTime',
+        type: 'number',
+        displayName: 'Avg (ms)'
+    },
+    ...msCol
+};
+
+export const collectionCount: ColumnSpec = {
+    field: {
+        name: 'collectionCount',
+        type: 'number',
+        displayName: '# GCs'
+    },
+    ...msCol
+};
+
+export const pctCollectionTime: ColumnSpec = {
+    field: {
+        name: 'pctCollectionTime',
+        type: 'number',
+        displayName: '% Time in GC'
     },
     ...pctCol
 };

package/admin/tabs/server/memory/MemoryMonitorModel.ts

@@ -7,7 +7,9 @@
 import {ChartModel} from '@xh/hoist/cmp/chart';
 import {GridModel} from '@xh/hoist/cmp/grid';
 import {HoistModel, LoadSpec, managed, XH} from '@xh/hoist/core';
+import {lengthIs, required} from '@xh/hoist/data';
 import {fmtTime} from '@xh/hoist/format';
+import {Icon} from '@xh/hoist/icon';
 import {forOwn, sortBy} from 'lodash';
 import * as MCol from '../../monitor/MonitorColumns';
 
@@ -15,6 +17,14 @@ export class MemoryMonitorModel extends HoistModel {
     @managed gridModel: GridModel;
     @managed chartModel: ChartModel;
 
+    get enabled(): boolean {
+        return this.conf.enabled;
+    }
+
+    get heapDumpDir(): string {
+        return this.conf.heapDumpDir;
+    }
+
     constructor() {
         super();
 
@@ -24,13 +34,25 @@ export class MemoryMonitorModel extends HoistModel {
             filterModel: true,
             store: {idSpec: 'timestamp'},
             colDefaults: {filterable: true},
+            headerMenuDisplay: 'hover',
             columns: [
                 MCol.timestamp,
-                MCol.totalHeapMb,
-                MCol.maxHeapMb,
-                MCol.freeHeapMb,
-                MCol.usedHeapMb,
-                MCol.usedPctTotal
+                {
+                    groupId: 'heap',
+                    headerAlign: 'center',
+                    children: [
+                        MCol.totalHeapMb,
+                        MCol.maxHeapMb,
+                        MCol.freeHeapMb,
+                        MCol.usedHeapMb,
+                        MCol.usedPctMax
+                    ]
+                },
+                {
+                    groupId: 'GC',
+                    headerAlign: 'center',
+                    children: [MCol.collectionCount, MCol.avgCollectionTime, MCol.pctCollectionTime]
+                }
             ]
         });
 
@@ -58,12 +80,14 @@ export class MemoryMonitorModel extends HoistModel {
                 yAxis: [
                     {
                         floor: 0,
-                        title: {text: 'JVM Heap (mb)'}
+                        height: '20%',
+                        title: {text: 'GC Avg (ms)'}
                     },
                     {
-                        opposite: true,
-                        linkedTo: 0,
-                        title: {text: undefined}
+                        floor: 0,
+                        top: '30%',
+                        height: '70%',
+                        title: {text: 'Heap (mb)'}
                     }
                 ],
                 tooltip: {outside: true, shared: true}
@@ -91,34 +115,46 @@ export class MemoryMonitorModel extends HoistModel {
             // Process further for chart series.
             const maxSeries = [],
                 totalSeries = [],
-                usedSeries = [];
+                usedSeries = [],
+                avgGCSeries = [];
 
             snaps.forEach(snap => {
                 maxSeries.push([snap.timestamp, snap.maxHeapMb]);
                 totalSeries.push([snap.timestamp, snap.totalHeapMb]);
                 usedSeries.push([snap.timestamp, snap.usedHeapMb]);
+
+                avgGCSeries.push([snap.timestamp, snap.avgCollectionTime]);
             });
 
             chartModel.setSeries([
                 {
-                    name: 'Max',
+                    name: 'GC Avg',
+                    data: avgGCSeries,
+                    step: true,
+                    yAxis: 0
+                },
+                {
+                    name: 'Heap Max',
                     data: maxSeries,
                     color: '#ef6c00',
-                    step: true
+                    step: true,
+                    yAxis: 1
                 },
                 {
-                    name: 'Total',
+                    name: 'Heap Total',
                     data: totalSeries,
                     color: '#1976d2',
-                    step: true
+                    step: true,
+                    yAxis: 1
                 },
                 {
-                    name: 'Used',
+                    name: 'Heap Used',
                     type: 'area',
                     data: usedSeries,
                     color: '#bd7c7c',
                     fillOpacity: 0.3,
-                    lineWidth: 1
+                    lineWidth: 1,
+                    yAxis: 1
                 }
             ]);
         } catch (e) {
@@ -145,4 +181,32 @@ export class MemoryMonitorModel extends HoistModel {
             XH.handleException(e);
         }
     }
+
+    async dumpHeapAsync() {
+        try {
+            const appEnv = XH.getEnv('appEnvironment').toLowerCase(),
+                filename = await XH.prompt({
+                    title: 'Dump Heap',
+                    icon: Icon.fileArchive(),
+                    message: `Specify a filename for the heap dump (to be saved in ${this.heapDumpDir})`,
+                    input: {
+                        rules: [required, lengthIs({min: 3, max: 250})],
+                        initialValue: `${XH.appCode}_${appEnv}_${Date.now()}.hprof`
+                    }
+                });
+            if (!filename) return;
+            await XH.fetchJson({
+                url: 'memoryMonitorAdmin/dumpHeap',
+                params: {filename}
+            }).linkTo(this.loadModel);
+            await this.loadAsync();
+            XH.successToast('Heap dumped successfully to ' + filename);
+        } catch (e) {
+            XH.handleException(e);
+        }
+    }
+
+    private get conf() {
+        return XH.getConf('xhMemoryMonitoringConfig', {heapDumpDir: null, enabled: true});
+    }
 }

package/admin/tabs/server/memory/MemoryMonitorPanel.ts

@@ -10,15 +10,24 @@ import {grid, gridCountLabel} from '@xh/hoist/cmp/grid';
 import {filler} from '@xh/hoist/cmp/layout';
 import {creates, hoistCmp} from '@xh/hoist/core';
 import {button, exportButton} from '@xh/hoist/desktop/cmp/button';
+import {errorMessage} from '@xh/hoist/desktop/cmp/error';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {Icon} from '@xh/hoist/icon';
 import {AppModel} from '@xh/hoist/admin/AppModel';
+import {isNil} from 'lodash';
 
 export const memoryMonitorPanel = hoistCmp.factory({
     model: creates(MemoryMonitorModel),
 
     render({model}) {
-        const {readonly} = AppModel;
+        if (!model.enabled) {
+            return errorMessage({
+                error: 'Memory Monitoring disabled via xhMemoryMonitoringConfig.'
+            });
+        }
+
+        const {readonly} = AppModel,
+            dumpDisabled = isNil(model.heapDumpDir);
         return panel({
             tbar: [
                 button({
@@ -27,6 +36,7 @@ export const memoryMonitorPanel = hoistCmp.factory({
                     omit: readonly,
                     onClick: () => model.takeSnapshotAsync()
                 }),
+                '-',
                 button({
                     text: 'Request GC',
                     icon: Icon.trash(),
@@ -34,6 +44,17 @@ export const memoryMonitorPanel = hoistCmp.factory({
                     omit: readonly,
                     onClick: () => model.requestGcAsync()
                 }),
+                button({
+                    text: 'Dump Heap',
+                    icon: Icon.fileArchive(),
+                    intent: 'danger',
+                    omit: readonly,
+                    disabled: dumpDisabled,
+                    tooltip: dumpDisabled
+                        ? 'Missing required config xhMemoryMonitoringConfig.heapDumpDir'
+                        : null,
+                    onClick: () => model.dumpHeapAsync()
+                }),
                 filler(),
                 gridCountLabel({unit: 'snapshot'}),
                 '-',

package/cmp/ag-grid/AgGrid.ts

@@ -35,13 +35,18 @@ export interface AgGridProps extends HoistProps<AgGridModel>, GridOptions, Layou
  * via the `model` prop to control additional Hoist customizations.
  *
  * This component complements and contrasts with the primary Hoist `Grid` class, which provides a
- * significantly more managed and opinionated wrapper around ag-Grid and a number of Hoist-specific
+ * significantly more managed and opinionated use of ag-Grid and a number of Hoist-specific
  * extensions and customizations. That fully managed component is expected to cover the majority of
  * use cases within Hoist apps and is recommended as the primary grid class within the toolkit.
  *
  * This wrapper is provided for advanced usages of grid that wish to leverage features of the
  * underlying component not yet supported by the Hoist layer - most notably pivoting - where the
  * managed option would conflict with or complicate access to those features.
+ *
+ * Note that this component uses the ag-Grid `getRowHeight` prop to provide the grid with row
+ * heights.  As of 4/2023, this may cause scrolling to be slow in large data sets, and
+ * applications may wish to set this prop to `null` and use either a fixed `rowWidth` property, or
+ * an explicit per-row setting instead. See GridModel for a more efficient, data aware approach.
  */
 export const [AgGrid, agGrid] = hoistCmp.withFactory<AgGridProps>({
     displayName: 'AgGrid',
@@ -125,8 +130,10 @@ class AgGridLocalModel extends HoistModel {
     @lookup(AgGridModel) model: AgGridModel;
 
     get headerHeight() {
-        const {hideHeaders, sizingMode} = this.model;
-        return hideHeaders ? 0 : (AgGrid as any).getHeaderHeightForSizingMode(sizingMode);
+        const {hideHeaders, sizingMode} = this.model,
+            AgGridCmp = AgGrid as any;
+
+        return hideHeaders ? 0 : AgGridCmp.getHeaderHeightForSizingMode(sizingMode);
     }
 
     override onLinked() {
@@ -141,15 +148,20 @@ class AgGridLocalModel extends HoistModel {
         }
     }
 
+    getRowHeight = ({node}) => {
+        const {sizingMode} = this.model,
+            {groupDisplayType} = this.componentProps,
+            AgGridCmp = AgGrid as any;
+        return node.group && groupDisplayType === 'groupRows'
+            ? AgGridCmp.getGroupRowHeightForSizingMode(sizingMode)
+            : AgGridCmp.getRowHeightForSizingMode(sizingMode);
+    };
+
     noteGridReady = agParams => {
         this.model.handleGridReady(agParams);
         this.componentProps.onGridReady?.(agParams);
     };
 
-    getRowHeight = () => {
-        return (AgGrid as any).getRowHeightForSizingMode(this.model.sizingMode);
-    };
-
     override destroy() {
         this.model?.handleGridUnmount();
         super.destroy();

package/cmp/filter/FilterChooserModel.ts

@@ -60,7 +60,7 @@ export interface FilterChooserConfig {
     fieldSpecs?: Array<FilterChooserFieldSpecConfig | string>;
 
     /** Default properties to be assigned to all FilterChooserFieldSpecs created by this model. */
-    fieldSpecDefaults?: FilterChooserFieldSpecConfig;
+    fieldSpecDefaults?: Partial<FilterChooserFieldSpecConfig>;
 
     /**
      * Store or cube View that should actually be filtered as this model's value changes.
@@ -460,7 +460,7 @@ export class FilterChooserModel extends HoistModel {
     //--------------------------------
     parseFieldSpecs(
         specs: Array<FilterChooserFieldSpecConfig | string>,
-        fieldSpecDefaults: FilterChooserFieldSpecConfig
+        fieldSpecDefaults: Partial<FilterChooserFieldSpecConfig>
     ): Array<FilterChooserFieldSpec> {
         const {valueSource} = this;
 

package/cmp/form/Form.ts

@@ -4,14 +4,7 @@
  *
  * Copyright © 2022 Extremely Heavy Industries Inc.
  */
-import {
-    BoxProps,
-    DefaultHoistProps,
-    elementFactory,
-    hoistCmp,
-    HoistProps,
-    uses
-} from '@xh/hoist/core';
+import {DefaultHoistProps, elementFactory, hoistCmp, HoistProps, uses} from '@xh/hoist/core';
 import equal from 'fast-deep-equal';
 import {createContext, useContext} from 'react';
 import {useCached} from '@xh/hoist/utils/react';
@@ -31,7 +24,7 @@ export interface FormContextType {
 export const FormContext = createContext<FormContextType>({});
 const formContextProvider = elementFactory(FormContext.Provider);
 
-export interface FormProps extends HoistProps<FormModel>, BoxProps {
+export interface FormProps extends HoistProps<FormModel> {
     /**
      * Defaults for certain props on child/nested FormFields.
      * @see FormField (note there are both desktop and mobile implementations).

package/cmp/form/FormModel.ts

@@ -79,7 +79,7 @@ export class FormModel extends HoistModel {
      *
      * See {@link getData} instead if you need to get or react to the values of *any/all* fields.
      */
-    get values(): Record<string, any> {
+    get values(): PlainObject {
         return this.valuesProxy;
     }
 

package/cmp/grid/Grid.ts

@@ -8,7 +8,6 @@ import composeRefs from '@seznam/compose-react-refs';
 import {agGrid, AgGrid} from '@xh/hoist/cmp/ag-grid';
 import {getTreeStyleClasses} from '@xh/hoist/cmp/grid';
 import {getAgGridMenuItems} from '@xh/hoist/cmp/grid/impl/MenuSupport';
-import {Column} from './columns/Column';
 import {div, fragment, frame} from '@xh/hoist/cmp/layout';
 import {
     hoistCmp,
@@ -17,7 +16,6 @@ import {
     LayoutProps,
     lookup,
     PlainObject,
-    SizingMode,
     useLocalModel,
     uses,
     XH
@@ -137,23 +135,9 @@ class GridLocalModel extends HoistModel {
     private model: GridModel;
     agOptions: GridOptions;
     viewRef = createRef<HTMLElement>();
-    private fixedRowHeight: number;
     private rowKeyNavSupport: RowKeyNavSupport;
     private prevRs: RecordSet;
 
-    getRowHeight(node) {
-        const {model, agOptions} = this,
-            {sizingMode, groupRowHeight} = model,
-            {groupDisplayType} = agOptions;
-
-        if (node?.group) {
-            return groupRowHeight ?? groupDisplayType === 'groupRows'
-                ? (AgGrid as any).getGroupRowHeightForSizingMode(sizingMode)
-                : (AgGrid as any).getRowHeightForSizingMode(sizingMode);
-        }
-        return this.fixedRowHeight;
-    }
-
     /** @returns true if any root-level records have children */
     @computed
     get isHierarchical(): boolean {
@@ -220,7 +204,7 @@ class GridLocalModel extends HoistModel {
             suppressRowClickSelection: !selModel.isEnabled,
             isRowSelectable: () => selModel.isEnabled,
             tooltipShowDelay: 0,
-            getRowHeight: ({node}) => this.getRowHeight(node),
+            getRowHeight: this.defaultGetRowHeight,
             getRowClass: ({data}) => (model.rowClassFn ? model.rowClassFn(data) : null),
             rowClassRules: model.rowClassRules,
             noRowsOverlayComponent: observer(() => div(this.emptyText)),
@@ -367,20 +351,78 @@ class GridLocalModel extends HoistModel {
         };
     }
 
+    //----------------------
+    // Row Height Management
+    //----------------------
+    @computed
+    get calculatedRowHeight() {
+        const {model} = this,
+            AgGridCmp = AgGrid as any;
+        return max([
+            AgGridCmp.getRowHeightForSizingMode(model.sizingMode),
+            maxBy(model.getVisibleLeafColumns(), 'rowHeight')?.rowHeight
+        ]);
+    }
+
+    @computed
+    get calculatedGroupRowHeight() {
+        const {sizingMode, groupRowHeight} = this.model,
+            {groupDisplayType} = this.agOptions,
+            AgGridCmp = AgGrid as any;
+        return groupRowHeight ?? groupDisplayType === 'groupRows'
+            ? AgGridCmp.getGroupRowHeightForSizingMode(sizingMode)
+            : AgGridCmp.getRowHeightForSizingMode(sizingMode);
+    }
+
+    defaultGetRowHeight = ({node}) => {
+        return node.group ? this.calculatedGroupRowHeight : this.calculatedRowHeight;
+    };
+
     rowHeightReaction() {
-        const {model} = this;
         return {
-            track: () => [model.getVisibleLeafColumns(), model.sizingMode],
-            run: ([visibleCols, sizingMode]: [Column[], SizingMode]) => {
-                this.fixedRowHeight = max([
-                    (AgGrid as any).getRowHeightForSizingMode(sizingMode),
-                    maxBy(visibleCols, 'rowHeight')?.rowHeight
-                ]);
+            track: () => [
+                this.useScrollOptimization,
+                this.calculatedRowHeight,
+                this.calculatedGroupRowHeight
+            ],
+            run: () => {
+                const {agApi} = this.model;
+                if (!agApi) return;
+                agApi.resetRowHeights();
+                this.applyScrollOptimization();
             },
-            fireImmediately: true
+            debounce: 1
         };
     }
 
+    @computed
+    get useScrollOptimization() {
+        // When true, we preemptively evaluate and assign functional row heights after data loading.
+        // This improves slow scrolling but means function not guaranteed to be re-called
+        // when node is rendered in viewport.
+        const {model, agOptions} = this;
+        return (
+            agOptions.getRowHeight &&
+            !agOptions.rowHeight &&
+            !model.getVisibleLeafColumns().some(c => c.autoHeight) &&
+            model.experimental.useScrollOptimization !== false
+        );
+    }
+
+    applyScrollOptimization() {
+        if (!this.useScrollOptimization) return;
+        const {agApi, agColumnApi} = this.model,
+            {getRowHeight} = this.agOptions,
+            params = {api: agApi, columnApi: agColumnApi, context: null} as any;
+
+        agApi.forEachNode(node => {
+            params.node = node;
+            params.data = node.data;
+            node.setRowHeight(getRowHeight(params));
+        });
+        agApi.onRowHeightChanged();
+    }
+
     columnsReaction() {
         const {model} = this;
         return {
@@ -627,6 +669,7 @@ class GridLocalModel extends HoistModel {
         model.noteAgExpandStateChange();
 
         this.prevRs = newRs;
+        this.applyScrollOptimization();
     }
 
     syncSelection() {

package/core/impl/InstallServices.ts

@@ -69,7 +69,7 @@ async function initServicesInternalAsync(svcs: HoistService[]) {
             it.name = svcs[idx].constructor.name;
         });
 
-        throw this.exception({
+        throw XH.exception({
             message: [
                 'Failed to initialize services: ',
                 ...errs.map(it => it.reason.message + ' (' + it.name + ')')

package/data/RecordAction.ts

@@ -207,5 +207,5 @@ export class RecordAction {
 
 interface DisplayFnData extends ActionFnData {
     /** Default display config for the action */
-    defaultConfig?: Record<string, any>;
+    defaultConfig?: PlainObject;
 }

package/data/Store.ts

@@ -118,7 +118,7 @@ export interface StoreConfig {
      *  Flags for experimental features. These features are designed for early client-access and
      *  testing, but are not yet part of the Hoist API.
      */
-    experimental?: Record<string, any>;
+    experimental?: PlainObject;
 }
 
 /**

package/data/StoreRecord.ts

@@ -51,7 +51,7 @@ export class StoreRecord {
      * This object has the same form as `data`. If this record has not been locally modified, this
      * property will point to the same object as `data`.
      */
-    readonly committedData: Record<string, any>;
+    readonly committedData: PlainObject;
 
     /**
      * Unique ID for representing record within ag-Grid node API.
@@ -171,7 +171,7 @@ export class StoreRecord {
      * Unlike 'data', the object returned by this method contains an 'own' property for every
      * Field in the Store. Useful for cloning/iterating over all values (including defaults).
      */
-    getValues(): Record<string, any> {
+    getValues(): PlainObject {
         const ret = {id: this.id};
         this.fields.forEach(({name}) => {
             ret[name] = this.data[name];

package/data/cube/Cube.ts

@@ -205,7 +205,7 @@ export class Cube extends HoistBase {
      * @param rawData - flat array of lowest/leaf level data rows.
      * @param info - optional metadata to associate with this cube/dataset.
      */
-    async loadDataAsync(rawData: PlainObject[], info: Record<string, any> = {}): Promise<void> {
+    async loadDataAsync(rawData: PlainObject[], info: PlainObject = {}): Promise<void> {
         this.store.loadData(rawData);
         this.setInfo(info);
         await forEachAsync(this._connectedViews, v => v.noteCubeLoaded());
@@ -248,7 +248,7 @@ export class Cube extends HoistBase {
      * Populate the metadata associated with this cube.
      * @param infoUpdates - new key-value pairs to be applied to existing info on this cube.
      */
-    updateInfo(infoUpdates: Record<string, any> = {}) {
+    updateInfo(infoUpdates: PlainObject = {}) {
         this.setInfo({...this.info, ...infoUpdates});
         this._connectedViews.forEach(v => v.noteCubeUpdated(null));
     }
@@ -257,7 +257,7 @@ export class Cube extends HoistBase {
     // Implementation
     //---------------------
     @action
-    private setInfo(info: Record<string, any>) {
+    private setInfo(info: PlainObject) {
         this.info = Object.freeze(info);
     }
 

package/data/cube/CubeField.ts

@@ -5,6 +5,7 @@
  * Copyright © 2022 Extremely Heavy Industries Inc.
  */
 
+import {PlainObject} from '@xh/hoist/core';
 import {
     Aggregator,
     AverageAggregator,
@@ -64,11 +65,7 @@ export interface CubeFieldSpec extends FieldSpec {
  * @param value - value of record on dimension
  * @param appliedDims - *all* applied dimension values for this record
  */
-export type CanAggregateFn = (
-    dimension: string,
-    value: any,
-    appliedDims: Record<string, any>
-) => boolean;
+export type CanAggregateFn = (dimension: string, value: any, appliedDims: PlainObject) => boolean;
 
 /**
  * Metadata used to define a measure or dimension in Cube. For properties present on raw data source

package/data/cube/View.ts

@@ -78,7 +78,7 @@ export class View extends HoistBase {
 
     /** Cube info associated with this View when last updated. */
     @observable.ref
-    info: Record<string, any> = null;
+    info: PlainObject = null;
 
     /** timestamp (ms) of the last time this view's data was changed. */
     @observable

package/data/validation/Rule.ts

@@ -4,7 +4,7 @@
  *
  * Copyright © 2022 Extremely Heavy Industries Inc.
  */
-import {Awaitable, Some} from '../../core';
+import {Awaitable, PlainObject, Some} from '../../core';
 import {castArray} from 'lodash';
 import {StoreRecord} from '../StoreRecord';
 import {BaseFieldModel} from '../../cmp/form';
@@ -32,7 +32,7 @@ export class Rule {
  */
 export type Constraint<T = any> = (
     fieldState: FieldState<T>,
-    allValues: Record<string, any>
+    allValues: PlainObject
 ) => Awaitable<Some<string>>;
 
 /**
@@ -43,7 +43,7 @@ export type Constraint<T = any> = (
  * @param allValues - current values for all fields in form or record, keyed by field name.
  * @returns true if this rule is currently active.
  */
-export type When = (entity: any, allValues: Record<string, any>) => boolean;
+export type When = (entity: any, allValues: PlainObject) => boolean;
 
 export interface FieldState<T = any> {
     /** Current value of the field */

package/desktop/cmp/dash/DashViewModel.ts

@@ -9,6 +9,7 @@ import {
     managed,
     ManagedRefreshContextModel,
     MenuItemLike,
+    PlainObject,
     RefreshMode,
     RenderMode
 } from '@xh/hoist/core';
@@ -18,7 +19,7 @@ import {throwIf} from '@xh/hoist/utils/js';
 import {ReactElement} from 'react';
 import {DashViewSpec} from './DashViewSpec';
 
-export type DashViewState = Record<string, any>;
+export type DashViewState = PlainObject;
 
 /**
  * Model for a content item within a DashContainer or DashCanvas.

package/desktop/cmp/dash/container/DashContainerModel.ts

@@ -7,6 +7,7 @@
 import {
     managed,
     PersistenceProvider,
+    PlainObject,
     RefreshMode,
     RenderMode,
     TaskObserver,
@@ -46,11 +47,14 @@ export interface DashContainerConfig extends DashConfig<DashContainerViewSpec, D
     /** True to include a button in each stack header showing the dash context menu. */
     showMenuButton?: boolean;
 
+    /** Between items in pixels. */
+    margin?: number;
+
     /**
      * Custom settings to be passed to the GoldenLayout instance.
      * @see http://golden-layout.com/docs/Config.html
      */
-    goldenLayoutSettings?: Record<string, any>;
+    goldenLayoutSettings?: PlainObject;
 }
 
 /**
@@ -124,7 +128,8 @@ export class DashContainerModel extends DashModel<
     //-----------------------------
     renderMode: RenderMode;
     refreshMode: RefreshMode;
-    goldenLayoutSettings: Record<string, any>;
+    goldenLayoutSettings: PlainObject;
+    margin: number;
 
     get isEmpty(): boolean {
         return this.goldenLayout && this.viewModels.length === 0;
@@ -148,6 +153,7 @@ export class DashContainerModel extends DashModel<
         contentLocked = false,
         renameLocked = false,
         showMenuButton = false,
+        margin = 6,
         goldenLayoutSettings,
         persistWith = null,
         emptyText = 'No views have been added to the container.',
@@ -176,6 +182,7 @@ export class DashContainerModel extends DashModel<
         this.contentLocked = contentLocked;
         this.renameLocked = renameLocked;
         this.showMenuButton = showMenuButton;
+        this.margin = margin;
         this.goldenLayoutSettings = goldenLayoutSettings;
         this.emptyText = emptyText;
         this.addViewButtonText = addViewButtonText;
@@ -570,7 +577,7 @@ export class DashContainerModel extends DashModel<
                         ...this.goldenLayoutSettings
                     },
                     dimensions: {
-                        borderWidth: 6,
+                        borderWidth: this.margin,
                         headerHeight: 25
                     }
                 },

package/desktop/cmp/error/ErrorMessage.ts

@@ -5,7 +5,7 @@
  * Copyright © 2022 Extremely Heavy Industries Inc.
  */
 import {div, frame, p} from '@xh/hoist/cmp/layout';
-import {hoistCmp, HoistProps} from '@xh/hoist/core';
+import {hoistCmp, HoistProps, PlainObject} from '@xh/hoist/core';
 import {button, ButtonProps} from '@xh/hoist/desktop/cmp/button';
 import '@xh/hoist/desktop/register';
 import {isEmpty, isNil, isString} from 'lodash';
@@ -28,7 +28,7 @@ export interface ErrorMessageProps extends HoistProps {
      * Error to display. If undefined, this component will look for an error property on its model.
      * If no error is found, this component will not be displayed.
      */
-    error?: Error | string | Record<string, any>;
+    error?: Error | string | PlainObject;
     /**
      * Message to display for the error.
      * Defaults to the error, or any 'message' property contained within it.

package/desktop/cmp/input/CodeInput.ts

@@ -6,7 +6,7 @@
  */
 import {HoistInputModel, HoistInputProps, useHoistInputModel} from '@xh/hoist/cmp/input';
 import {box, div, filler, fragment, frame, hbox, label, span, vbox} from '@xh/hoist/cmp/layout';
-import {hoistCmp, HoistProps, LayoutProps, managed, XH} from '@xh/hoist/core';
+import {hoistCmp, HoistProps, LayoutProps, managed, PlainObject, XH} from '@xh/hoist/core';
 import {button} from '@xh/hoist/desktop/cmp/button';
 import {clipboardButton} from '@xh/hoist/desktop/cmp/clipboard';
 import {textInput} from '@xh/hoist/desktop/cmp/input/TextInput';
@@ -50,7 +50,7 @@ export interface CodeInputProps extends HoistProps, HoistInputProps, LayoutProps
      * Configuration object with any properties supported by the CodeMirror API.
      * @see {@link https://codemirror.net/doc/manual.html#api_configuration|CodeMirror Docs}
      */
-    editorProps?: Record<string, any>;
+    editorProps?: PlainObject;
 
     /**
      * True to enable case-insensitive searching within the input. Default false, except in

package/desktop/cmp/treemap/TreeMapModel.ts

@@ -257,7 +257,7 @@ export class TreeMapModel extends HoistModel {
     }
 
     @computed
-    get expandState(): Record<string, any> {
+    get expandState(): PlainObject {
         const {gridModel} = this;
         return gridModel?.treeMode ? gridModel.expandState : {};
     }

package/kit/ag-grid/index.ts

@@ -38,6 +38,7 @@ export type {
     HeaderValueGetterParams,
     ICellRendererParams,
     ITooltipParams,
+    IRowNode,
     RowClassParams,
     ValueGetterParams,
     ValueSetterParams,

package/mobile/cmp/error/ErrorMessage.ts

@@ -5,7 +5,7 @@
  * Copyright © 2022 Extremely Heavy Industries Inc.
  */
 import {div, frame, p} from '@xh/hoist/cmp/layout';
-import {hoistCmp, HoistProps} from '@xh/hoist/core';
+import {hoistCmp, HoistProps, PlainObject} from '@xh/hoist/core';
 import {button, ButtonProps} from '@xh/hoist/mobile/cmp/button';
 import '@xh/hoist/mobile/register';
 import {isEmpty, isNil, isString} from 'lodash';
@@ -28,7 +28,7 @@ export interface ErrorMessageProps extends HoistProps {
      * Error to display. If undefined, this component will look for an error property on its model.
      * If no error is found, this component will not be displayed.
      */
-    error?: Error | string | Record<string, any>;
+    error?: Error | string | PlainObject;
     /**
      * Message to display for the error.
      * Defaults to the error, or any 'message' property contained within it.

package/mobile/cmp/input/DateInput.ts

@@ -6,7 +6,7 @@
  */
 import {HoistInputModel, HoistInputProps, useHoistInputModel} from '@xh/hoist/cmp/input';
 import {div} from '@xh/hoist/cmp/layout';
-import {hoistCmp, HoistProps, StyleProps, LayoutProps, HSide} from '@xh/hoist/core';
+import {hoistCmp, HoistProps, StyleProps, LayoutProps, HSide, PlainObject} from '@xh/hoist/core';
 import {fmtDate} from '@xh/hoist/format';
 import {Icon} from '@xh/hoist/icon';
 import {singleDatePicker} from '@xh/hoist/kit/react-dates';
@@ -65,7 +65,7 @@ export interface DateInputProps extends HoistProps, HoistInputProps, StyleProps,
     placeholder?: string;
 
     /** Props passed to SingleDatePicker component, as per SingleDatePicker docs. */
-    singleDatePickerProps?: Record<string, any>;
+    singleDatePickerProps?: PlainObject;
 
     /** Alignment of entry text within control, default 'left'. */
     textAlign?: HSide;

package/mobile/cmp/popover/Popover.ts

@@ -5,7 +5,15 @@
  * Copyright © 2022 Extremely Heavy Industries Inc.
  */
 import {div, fragment} from '@xh/hoist/cmp/layout';
-import {Content, hoistCmp, HoistModel, HoistProps, useLocalModel, XH} from '@xh/hoist/core';
+import {
+    Content,
+    hoistCmp,
+    HoistModel,
+    HoistProps,
+    PlainObject,
+    useLocalModel,
+    XH
+} from '@xh/hoist/core';
 import '@xh/hoist/mobile/register';
 import {action, makeObservable, observable} from '@xh/hoist/mobx';
 import {createObservableRef, elementFromContent} from '@xh/hoist/utils/react';
@@ -59,7 +67,7 @@ export interface PopoverProps extends HoistProps {
     popoverClassName?: string;
 
     /** Escape hatch to provide additional options to the PopperJS implementation */
-    popperOptions?: Record<string, any>;
+    popperOptions?: PlainObject;
 }
 
 /**

package/package.json

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

package/utils/js/LangUtils.ts

@@ -236,7 +236,7 @@ export function pluralize(s: string, count?: number, includeCount?: boolean): st
 }
 
 /**
- * Returns the number with an ordinal suffix (ie. 1 => '1st', 11 => '11th').
+ * Returns the number with an ordinal suffix (i.e. 1 becomes '1st', 11 becomes '11th').
  *
  * @param n - the number to ordinalize
  */